/*

  PG Docket System

  Delveloped by Riyaz
  Maintained by Paul Matos

  Created by ICS
  2-17-2017

  v1.2


  TOC

*/



/*    Bootstrap overrides
=================================================================  */

  .btn { box-shadow: 0px 2px 2px 1px rgba(0,0,0,0.1); }
  .btn-primary { background-color:#038cc8; border-color:#038cc8; }
  .btn-primary:hover { background-color:#3870A0; }

  .table>tbody>tr>td,
  .table>tbody>tr>th,
  .table>tfoot>tr>td,
  .table>tfoot>tr>th,
  .table>thead>tr>td,
  .table>thead>tr>th { padding:3px; }

  ol, ul { margin-bottom: 3px; }

  
/*    Tools
================================================================= */

  .flex { display: flex; flex-wrap: wrap; }

  
/*    Main Elements 
================================================================= */

  body { padding-top:174px; font-size: 100%; scroll:auto; overflow-y:scroll; padding-bottom:180px; font-family: Arial;}

  body.hasTags { padding-top: 223px; }

  body.modal-open { overflow-y: scroll; overflow-x: hidden; position: fixed; top:0; bottom: 0; right: 0; left: 0; height: 100%; width: 100%; padding-right: 0 !important; }
  a { color:#038cc8; }

  p { font-family: Arial; }

  #editModal { min-width: 1240px; }
  header { min-width: 1240px; position: fixed; top:0; left:0; right:0; z-index: 300; background: white; padding:0 0; }

    header > div { padding: 0 39px; }

  footer {
    bottom: 0; background-color: #000; color:white; position:fixed; height: 60px; width:100%; padding: 8px;
  }

    .innerFooter { width: 90%; margin: auto; display: flex; justify-content: center; padding-top:5px; }
    
    .innerFooter button { margin-left:20px; }
    .innerFooter button.prevBtn { margin-left: 0; margin-right: 20px; }

    .innerFooter ul { margin: 0; padding: 0; list-style: none; display: flex; cursor: pointer;  }
    .innerFooter ul li { flex:1; padding: 5px 10px; margin: 0 5px; background: #fff; border-radius: 3px; color: black; line-height: 23px; }
    .innerFooter ul li:hover { cursor: pointer; background: #484848; color:white; }
    
    .innerFooter ul li.current { background: #484848; color:white; cursor: default;  }
    .innerFooter ul li.current:hover { background: #484848; color:white;  }

  textarea {
    resize: none;
    /*overflow: hidden;*/
    /*min-height: 50px;
    max-height: 100px;*/
    width:100%;
    
  }

  input {
    min-height: 22px;
  }
  



/*    Framing
================================================================= */

  .outerWrapper { min-width: 1240px; padding:0; font-size: 13px; margin-bottom:-16em; }
  
  .innerWrap { position: relative; margin-bottom: 70px; width:100%; padding-left:0; padding-right:0; }




/*    Loading
================================================================= */

/*body.isLoading { overflow:hidden; }*/

body.isloading .loadingCover { background: black; opacity: 0.5; position: fixed; z-index: 999999; top:0; left:0; right:0; bottom: 0; padding-top:200px; }

body.isloading .loadingCover .loader,
body.isloading .loadingCover .loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

body.isloading .loadingCover .loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}

.nodata { display:none; text-align: center; width: 100%; }


@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


/*    Nav Bar
================================================================= */

  .navBar { padding-bottom:15px; }
    
    .navBar .logo { flex:1; }
    .navBar .controlBtn { width:50px; text-align: center; padding:15px; }

/*    Filters/Searching
================================================================= */

#filter { width: 100px; text-align: center; }

.dropdown-menu .CustomerName a:hover { background-color: #7D94B2; }
.dropdown-menu .DocketNum a:hover { background-color: #35B2AF; }
.dropdown-menu .InvoiceNum a:hover { background-color: #14B254; }
.dropdown-menu .Description a:hover { background-color: #B25763; }
.dropdown-menu .Created a:hover { background-color: #FF8958; }
.dropdown-menu .InvoiceDate a:hover { background-color: #187F48; }
.dropdown-menu .year a:hover { background-color: #1A69B2; }
.dropdown-menu .InvoiceDate a:hover, .dropdown-menu .Created a:hover, .dropdown-menu .Description a:hover, .dropdown-menu .CustomerName a:hover, .dropdown-menu .InvoiceNum a:hover, .dropdown-menu .DocketNum a:hover, .dropdown-menu .year a:hover {
  color:white;
}

.tags { margin:10px 0 0 0; }

/*
.tags { position: absolute; top:67px; padding: 0; right:455px; }
.tagWidth { position: absolute; top: 67px; left: 530px; padding: 0; right: 455px; height:2px; }
.tags.multiLine { position: relative; top: auto; left: auto; right: auto; padding-top:10px; }
.tags.multiLine ul { margin:10px 39px 0 39px; }
*/

/*.tags ul { list-style: none;  padding: 0; margin: 0; float:left; }*/
.tags ul { list-style: none;  padding: 0; margin: 0; }
.tags li { list-style: none; float:left; padding-bottom:5px; padding-right:5px; }

.tags p {  margin: 0;  }

.tags p:first-child { margin-left:0; }

.tags .DocketNum { background-color: #35B2AF; }
.tags .CustomerName { background-color: #7D94B2; }
.tags .InvoiceNum { background-color: #14B254; }
.tags .Description { background-color: #B25763; }
.tags .QuoteNum { background-color: #b16dc3; }
.tags .Created { background-color: #FF8958; }
.tags .InvoiceDate { background-color: #35B2AF; }
.tags .year { background-color: #1A69B2; }
.tags .DocketNum, .tags .CustomerName, .tags .InvoiceNum, .tags .Description, .tags .Created, .tags .InvoiceDate, .tags .year {
  color:white;
}





/*    Notes
================================================================= */

.noteClickOff { z-index: 250; background: rgba(0,0,0,0.5); position: fixed; top:0; left:0; right:0; bottom:0; display:none; }
.noteBtn + .dropdown-menu { min-width: 300px; left:auto; right:0; }
.noteBtn  { padding:1px 7px; }

.noteDrop { cursor: default; }
.noteDrop.dropdown-menu { left:auto; right:0; }


/*    Data Table
================================================================= */

.thead { width:100%; margin-top:20px; font-size: 12px; }

#thead {
  background-color:black;
  color:white;
}

#thead td { padding: 0; margin: 0; }
#thead td p { margin: 0; padding:5px 0; margin-left: 10px; }
/*
#thead td:nth-child(odd) { background: red; }
#thead td:nth-child(even) { background: teal; }

.mainTable tr td:nth-child(odd) { background: teal !important; }
.mainTable tr td:nth-child(even) { background: red !important; }
*/


.mainTable { margin-top: 0px; }
.mainTable > tbody > tr { background: white; }
.mainTable > tbody > tr > td input,
.mainTable > tbody > tr > td textarea { width:100%; background: none; border:none; }

/*.selected td:not(.noEdit){ background-color: white !important; }*/

.docketSum { text-align: right; line-height:14px; font-size: 14px; vertical-align: middle; }

/* Date Create      */

#thead td:nth-child(1),
.mainTable > tbody > tr > td:nth-child(1) { width: 100px; text-align: center; }

#thead td:nth-child(1) p { margin-left: 0; }

/* Docket Num      */

#thead td:nth-child(2),
.mainTable > tbody > tr > td:nth-child(2) { width: 70px; text-align: center; }

#thead td:nth-child(2) p { margin-left: 0; }

/* Customer      */

#thead td:nth-child(3),
.mainTable > tbody > tr > td:nth-child(3) { width:300px;  }

/* Quantity      */

#thead td:nth-child(4),
.mainTable > tbody > tr > td:nth-child(4) { width: 115px; text-align: center; }
.mainTable > tbody > tr > td:nth-child(4) input { text-align:center; }

#thead td:nth-child(4) p { margin-left: 0; }

/* Description      */

#thead td:nth-child(5),
.mainTable > tbody > tr > td:nth-child(5) { }

/* QuoteNum      */
#thead td:nth-child(6),
.mainTable > tbody > tr > td:nth-child(6) { 
    width: 150px;
    text-align: center;
}

/* Invoice Date      */

#thead td:nth-child(7),
.mainTable > tbody > tr > td:nth-child(7) { width: 110px; }

/* Invoice Num      */

#thead td:nth-child(8),
.mainTable > tbody > tr > td:nth-child(8) { width: 100px; }

/* Invoice Total      */

#thead td:nth-child(9),
.mainTable > tbody > tr > td:nth-child(9) { width: 100px; }

/* Rep      */

#thead td:nth-child(10),
.mainTable > tbody > tr > td:nth-child(10) { width: 100px; }

/* Note      */

#thead td:nth-child(11),
.mainTable > tbody > tr > td:nth-child(11) { width: 50px; text-align: center; }

#thead td:nth-child(11) p { margin-left: 0; }


.mainTable > tbody > tr:hover { cursor: pointer; }
/*.mainTable tbody tr:hover td { background-color: #ae4949; cursor: pointer; }*/
.mainTable > tbody > tr.danger.selected > td { background-color: #5594b5; border:0; }
.mainTable > tbody > tr.danger.selected > td.noEdit { color:white; }

.mainTable > tbody > tr.danger.selected > td input,
.mainTable > tbody > tr.danger.selected > td textarea { background-color: white; min-height: 22px; }

.uneditable {
  cursor: not-allowed;
  background-color: gray;
  color:white;
}




/*    Other
================================================================= */


.hidden { display: none; }

#month {
  font-size: 28px;
  vertical-align: middle;
}

span.glyphicon-home {
    font-size: 1.2em;
}




/*.pageLinks { margin-right: -15px; }*/

.password {
  display: none;
}

#accessOption {
  margin-top: 10px;
  margin-bottom: 5px;
}

.resetPassword {
  width:200px;
}

.profile{
  padding-bottom: 0;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 7px;
}
.userAccess {
  display: inline-block;
}

.inline {
  display: inline-block;
}

.addUser {
  float:right;
}

#delete:hover {
  text-decoration: underline;
}


.dropdown {
    display:inline-block !important;
}

#docketTable {
  width:100%;
}

.dateRange, .query {
  display:inline-block;
  border: 1px solid #ccc;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin: 7px 7px 0px 7px;
  border-radius: 4px;
  cursor:pointer;
}


#startDate, #endDate{
    width: 150px;
       display:inline-block;
       margin-left: 10px;
    display:none;
}
#year {
    width: 40px;
}

#go {
  margin-left: 10px;
}

.btn:focus, .btn:active:focus, .btn.active:focus{
  outline-color: transparent;
  outline-style: none;
}

#yearSelect {
  width: 200px;
  margin-left: 10px;
  display:inline-block;
  display:none;
}

#search {
    width: 200px;
    margin-left: 10px;
    display:inline-block;
}

table {
    /*margin-top: 5px;*/
}

.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap;  }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }

::-webkit-input-placeholder {
   text-align: center;
}

:-moz-placeholder { /* Firefox 18- */
   text-align: center;  
}

::-moz-placeholder {  /* Firefox 19+ */
   text-align: center;  
}

:-ms-input-placeholder {  
   text-align: center; 
}

.pglogo { height:50px; cursor:pointer; padding-top:0;  }

/* The Modal (background) */
.edit {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 275; /* Sit on top */
    left: 0;
    width:100%;
    overflow: auto; /* Enable scroll if needed */
    box-shadow: none;
    padding: 0;
}
.edit .modal-content { background: #5594b5; }

button.editing { background:#2C2C2C; color:white; }
button.editing.disabled:hover { background:#2C2C2C; color:white; }

button.editing:hover { background:#6C6C6C; color:white; }


.isEditing {
  background-color: #f2f2f2 !important;
}



/* CONTROL BUTTONS */

#saveDocket {
  width: 285px; float:left;
  margin-right: 0; margin-left:122px;
}

#closeEdit { margin-left:16px; float:left; }

#cancelDocket { margin-right:431px; float:right; }

@media screen and (max-width: 1267px) {

  #cancelDocket { margin-right:0; float:left; margin-left:154px; }

}








.logo {
  margin: 0 auto;
  display:block;
}
/* Modal Content */
.modal-content {
    background-color: white;
    margin: 0;
    padding: 15px;
    width: 100%;
    box-shadow: none !important;
    border-radius: 0px !important;
    border: none !important;
}

.panel {
  width: 582px;
  margin: 0 auto;
}

.clearFix { clear:both; }

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.cursorDisable {
  cursor: not-allowed;
}

.alwaysSelected {
  cursor:pointer;
  font-weight: bold;
}

.right {
  display: inline-block;
  float:right;
}

.newDocket {
  margin-left:10px;
}
.createdate {
   margin-right: 10px;
}
.createdate, .quantity {
  width: 48.5%;
  display:inline;
}

.form-control .noteText { height: 130px !important; }

.upArrow p:before { content:'\2193'; margin-top:-5px;
display: block; float:left; width:20px; height:20px; font-weight: bold; font-size: 20px; vertical-align: middle; margin-left:10px;
}
.downArrow p:before { content:'\2191'; margin-top:-5px;
display: block; float:left; width:20px; height:20px; font-weight: bold; font-size: 20px; vertical-align: middle; margin-left:10px;
}

#invoiceSum { padding-left: 20px;  }

tr.selected textarea#description, tr.selected input#customer {
    text-transform: uppercase;
}