/**
* @package   Dispatch App
* @version   1.0.0
* @copyright 2014. Styled by Silviu B.
*
* The base stylesheet for he Dispatch App.
* This file holds most of the styles we're going to use for the app and works in conjunction with "animation.css" and "responsive.css" stylesheets. 
*/


/*////////////////////////////////////////////////////////////
From Login ---> to be deleted                                
////////////////////////////////////////////////////////////*/
body, div, input {margin: 0px; padding: 0px; }
body, div, span, a, input {font-family: Verdana, Arial, Helvetica; }
#l1 {left: 0; line-height: 30px; margin: auto; margin-top: -100px; position: absolute; top: 50%; width: 100%; text-align: center; }
#l2 {position: relative; margin: -75px auto 0px auto; width: 100%; }
/*input {padding: 3px; font-size: 10pt; width: 100px; text-align: center; color: #0066ff; -webkit-border-radius: 9px; -moz-border-radius: 9px; -ms-border-radius: 9px; -o-border-radius: 9px; border-radius: 9px; border-top: 2px solid #0066ff; border-left: 2px solid #0066ff; border-right: 1px solid #0077ff; border-bottom: 1px solid #0077ff; }*/
input:focus {outline: none; }
input.red {color: #ff3333; }
input.submit {width: 110px; background-color: #ffffff; border-top: 1px solid #0077ff; border-left: 1px solid #0077ff; border-right: 2px solid #0066ff; border-bottom: 2px solid #0066ff; }
input.submit:active {border-top: 2px solid #0066ff; border-left: 2px solid #0066ff; border-right: 1px solid #0077ff; border-bottom: 1px solid #0077ff; }


/* font-family: 'Scada', sans-serif; - keep it here until i've finished styling */


/*////////////////////////////////////////////////////////////
Global Styles                                
////////////////////////////////////////////////////////////*/

body {margin: 0px; background-color: #fff; color:#232323;}
body, div, span, p, a, input, select, textarea, ul, li {font-family: 'Scada', Arial, Helvetica, sans-serif; margin: 0px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

h2 {font-family: 'Scada', Arial, Helvetica, sans-serif; font-size:24px;}

a, .a, .a span {text-decoration: none !important; cursor: pointer !important;}

tr.hidden {display: none;}

.fa2 {
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  /*line-height: 1;*/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Errors */
.msg-alert {display: none; text-align: left; position: fixed; top: 10px; z-index: 99999;}
div.error, span.error, p.error {color: #003555; font-weight: bold; font-size:12px;}

/* Light Background Body */
.lightBackground {background-color: #fff; color:#232323;}
.darkBackground {background-color: #003555; color:#fff;}

/*.container {
  padding-left: 4px !important;
  padding-right: 4px !important;
}*/

.table-condensed > thead > tr > th, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, .table-condensed > tbody > tr > td, .table-condensed > tfoot > tr > td {
    padding: 8px 2px !important;
}

/* Page header */
.headerContainer {clear:both; float: left; width: 100%; margin:10px 0; padding-bottom:20px; border-bottom:1px solid rgba(0, 0, 0, 0.1);}
.headerContainer h2 {display: block; float:left; margin:3px 0 0;}
.headerContainer button {float:right;}

/*////////////////////////////////////////////////////////////
Login Page                                
////////////////////////////////////////////////////////////*/

.loginBgOverlay {position: absolute; width:100%; height:100%; background-color:#1574AE; opacity:0.75; top:0; left:0; z-index:-1;}
.loginContainer {height: 550px; left: 50%; margin-left: -300px; margin-top: -300px; position: absolute; top: 50%; width: 600px; }

.homeLogo {max-width:120px; margin:10px auto 50px; cursor:pointer;}
.homeLogo img {width:100%; height:auto;}

.loginForm {max-width:40%; margin:0 auto; text-align:center;}
.loginForm .input-group {float:left; width:100%; margin: 10px 0;}

.loginForm .loginSubmit {float: left; width: 100%; margin:40px auto 10px;}
.loginForm button {/*margin: 40px auto 10px;*/}

.loginForm .rememberPassword {font-size:11px; text-align:center; margin:20px 0 10px; float: left; width: 100%;}
.loginForm .rememberPassword a:link, .loginForm .rememberPassword a:visited {font-size:11px; color:rgba(255, 255, 255, 0.5); text-align:center; margin:10px 0;}
.loginForm .rememberPassword a:hover, .loginForm .rememberPassword a:active {color:rgba(255, 255, 255, 1);}

.copyright {bottom: 0; position: absolute; text-align: center; width: 100%;}
.copyright p {color: #74A4CB; font-size:11px;}
.copyright p span {color: #A8CFEF; }
.copyright p span a:link, .copyright p span a:visited {color: #A8CFEF;}
.copyright p span a:hover, .copyright p span a:active {color: #FFF; }


/* Prepare DOM for animations */

.loginUsername {opacity:0;}
.loginPassword {opacity:0;}
.loginButton   {opacity:0;}


/* Login Page Animations */

.slideUpFadeIn { position: relative;
-webkit-animation: slideUpFadeIn 0.75s ease-in-out 1.9s;
        animation: slideUpFadeIn 0.75s ease-in-out 1.9s;
        animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;  
}

.slideUpShortFadeIn {position: relative;
-webkit-animation: slideUpShortFadeIn 0.75s ease-in-out 1.9s;
        animation: slideUpShortFadeIn 0.75s ease-in-out 1.9s;
    animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}

.slideFromRightFadeIn {position: relative;
-webkit-animation: slideFromRightFadeIn 0.75s ease-in-out 1.9s;
        animation: slideFromRightFadeIn 0.75s ease-in-out 1.9s;
    animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}

.slideFromLeftFadeIn {position: relative;
-webkit-animation: slideFromLeftFadeIn 0.75s ease-in-out 1.9s;
        animation: slideFromLeftFadeIn 0.75s ease-in-out 1.9s;
    animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}

.logoAppear {
-webkit-animation: logoAppear 2s ease-in-out;
        animation: logoAppear 2s ease-in-out;
        animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}



/*////////////////////////////////////////////////////////////
Menu Page                              
////////////////////////////////////////////////////////////*/

.menuWrap {display: block; height: 100%; position: absolute; width: 100%;}
.menuWrap .copyright {bottom:-10px;}
.menuContainer {width:90%; margin:0 auto; text-align:center; position: relative;}

/*.menuButton {height: 30%; padding: 15%; margin: 0%; cursor:pointer;}*/
.menuButton {min-width:140px; min-height:120px; padding:15px; margin: 0px; cursor:pointer;}
.menuLabel {clear:both; display: block; font-size:11px; margin-top:20px; font-weight:bold; text-transform:uppercase;}

.menuButton:active .menuLabel {color: rgba(255,255,255,0.5);}
.menuButton:active i {color: rgba(255,255,255,0.5);}

.menu {display: block; padding-bottom: 10px; margin-top: 0px; }
div.menu .menuButton {color: #ffffff; display: inline-block; }



/*////////////////////////////////////////////////////////////
New Delivery                             
////////////////////////////////////////////////////////////*/

.newNote {color:#232323; text-align:left; padding-bottom:20px;}
.newNoteFull {height:1568px;}
.newNote hr {border-color:rgba(0, 0, 0, 0.1);}

.newNote .headerContainer {clear:both; float: left; width: 100%; margin:30px 0 20px; padding-bottom:20px; border-bottom:1px solid rgba(0, 0, 0, 0.1);}
.newNote h2 {display: block; float:left; margin:3px 0 0;}
.newNote .signed-items {margin-top: -20px;}
.newNote .signed-items  h3 {font-size: 14pt;}

.newNote .input-group {margin-bottom:20px;}
.newNote .processButtons {width: 100%; border-spacing: 0px; border-collapse: collapse;}
.newNote .leftButton {width: 33%; text-align: left;}
.newNote .centerButton {width: 34%; text-align: center;}
.newNote .rightButton {width: 33%; text-align: right;}
.btn-process {
  min-width: 90px;
}

.btn-dispatch {
  min-width: 120px;
}

.headerContainer h3 {display: block; float:left; margin:15px 0; width:100%; font-size:18px;}


/* Styles for the table */
.itemsContainer {margin:0; font-size:12px;}
.itemsContainer .headerContainerItems {clear:both; float: left; width: 100%; margin:10px 0;}
.itemsContainer table tr td {border-color:rgba(0, 0, 0, 0.1);}
.table > thead > tr > th {border-color:rgba(0, 0, 0, 0.1);}
.table > thead > tr > th {/*background-color:rgba(0, 0, 0, 0.1);*/ border-width:1px;}
.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {background-color:rgba(0, 0, 0, 0.1);}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {border-top:1px solid rgba(0, 0, 0, 0.1); vertical-align:middle;}

.itemsContainer th.jn,
.itemsContainer th.desc {white-space: nowrap;}
.itemsContainer th.amount,
.itemsContainer th.boxes,
.itemsContainer th.total {text-align:center; white-space: nowrap;}

.itemsContainer tr.items-item {cursor: pointer;}

.itemsContainer td.items-itms,
.itemsContainer td.items-amt,
.itemsContainer td.items-ttl {text-align:center;}

.itemsContainer .items {float:left; width:100%;}

.itemsContainer .items .item td {vertical-align: top;}

/*////////////////////////////////////////////////////////////
Add Items To Delivery Note                            
////////////////////////////////////////////////////////////*/

.addItemPage {padding-bottom:20px;}
.addItemPage .input-group {margin-bottom:20px; float:left;}

.addItemPage .headerContainer {clear:both; float: left; width: 100%; margin:30px 0 20px; padding-bottom:20px; border-bottom:1px solid rgba(0, 0, 0, 0.1);}
.addItemPage h2 {display: block; float:left; margin:3px 0 0;}

.addItemPage .doneItemButton {float:left;}


.addItemPage h2 {display: block; float:left; margin:3px 0 0;}
.addItemPage .cancelItem {float:right;}



/*////////////////////////////////////////////////////////////
Dispatch Page                           
////////////////////////////////////////////////////////////*/
.dispatchContainer {padding-bottom:20px;}
.dispatchContainer .input-group {margin-bottom:20px; float:left;}

.dispatchContainer .saveButton {float:right;}
.dispatchContainer .clearButton {float:left;}


.sig-sig-pad canvas {margin-bottom:30px; height: 180px !important;}


/*////////////////////////////////////////////////////////////
List Of Jobs                          
////////////////////////////////////////////////////////////*/
.notesList {padding-bottom:15px;}
.notes {float:left; width:100%; font-size:12px;}

.notes .headerContainer {clear:both; float: left; width: 100%; margin:30px 0 20px; padding-bottom:20px; border-bottom:1px solid rgba(0, 0, 0, 0.1);}

.notes h2 {display: block; float:left; margin:3px 0 0;}
.notes .goBack {float:right;}

.notes-note {cursor:pointer;}

/*////////////////////////////////////////////////////////////
Delivered Notes                    
////////////////////////////////////////////////////////////*/


.signed > div {display: block; width: 100%;}
.signed > div > div {display: inline-block;}
.signed .left {float: left;}
.signed .right {float: right;}
.signed .sig-img {margin-top: 20px; width: 100%; border: 1px solid #707070;}
/*.notesList .notes .table td {font-size:12px;}*/




/*////////////////////////////////////////////////////////////
Logout page (if really necessary - will c.)        
////////////////////////////////////////////////////////////*/






/*////////////////////////////////////////////////////////////
Admin Email Settings Page        
////////////////////////////////////////////////////////////*/

.info-show {cursor: pointer;}
.info-alert {display: none;}
.subject_wildcards {display: inline-block; width: 180px;}

/*////////////////////////////////////////////////////////////
Things below this line need to go away when i'm finished.        
////////////////////////////////////////////////////////////*/

div, span, h1, h2, h3, h4 {
  cursor: default;
}

.fa {
  cursor: default;
}

.a .fa {
  cursor: pointer !important;
}

.fa-port:before {
  content: "587";
}

.grey {
  color: #999999;
}

.nowrap {
  white-space: nowrap;
}

.wrap {
  white-space: normal;
}

.b {
  font-weight: bold;
}

div.moveable div {
  cursor: move;
}

div.adm_menu_item .form-control {
  display: inline-block !important;
}

div.adm_menu_item {
  margin-top: 10px;
  padding-right: 4px;
  white-space: nowrap;
}

div.adm_menu_field {
  display: inline-block;
  margin: 4px 0px;
}

div.adm_menu_block {
  display: inline-block;
  margin: 0px;
}

div.addButton {
  margin: 20px 0px 20px 40px;
}

div.addButton button {
  width: 125px;
}

input.error {
  border-color: #f33;
}

canvas.error {
  border-color: #f33;
}

div.notes > div > div {
  display: inline-block;
  font-size: 9pt;
  white-space:nowrap;
}

div.signed-items {
}

div.signed > div {
  display: inline-block;
  font-size: 9pt;
}

.signed-col1 {
  width: 120px;
}

.signed-col2 {
  width: 230px;
  text-align: right;
}

.signed-signature-img {
  margin-top: 20px;
  width: 100%;
  border: 1px dashed #000;
}

div.deliveryCompany {
  position: relative;
}

div.addressList {
  position: absolute;
  display: block;
  margin-top: 35px;
  background-color: #ffffff;
  z-index: 9999;
  cursor: pointer;
}
div.addressList div {
  
}