/* ---------- MAIN BODY ---------- */
*
{
    padding: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
}
/*color and font scheme for VM SM*/
.markers
{
    font-weight:900;
    color: #000000; 
    font-size: 1.2em; 
}
.selectButton
{
    width:100%;
    height:40px;
    font-weight:900;   
}
.listResults
{  
    white-space: pre;
    word-wrap: normal;
    overflow-x: scroll;   
    font-family: Courier New; 
    min-width: 99%;
    min-height:786px;
}
@media screen and (min-aspect-ratio: 13/9)
{
        #buttonUpdate,#buttonCancel,#buttonUpdateComment,#buttonCancelComment
        {
            height:32px;
        }
        #AddCommentDiv,#AddDiv
        {
            height:180px;
        }
}
.inline-block 
{
    display: inline-block;
}
/* Needed to set height reference */
form
{
    height: 100%;
}
/* All objects that can be made hidden */
.HideObject
{
    visibility: hidden; 
    display: none;
}
/* All objects that can be made visible */
.ShowObject
{
    visibility: visible; 
}
/* ---------- DISPLAY AREA ---------- */
/* Contains the display area */
#DisplayDiv
{
    color: White;
    font-weight: 900;
    /*height:100%;*/
    width:100%;
}
/* All customer notes beginning with a date and all grid header cells */
tr.HeaderRow td, th
{
    color: Black;
    font-weight: bold;
}

/* Table with customer potential, target, and ytd sales numbers */
.PotentialTable
{
    width: 100%;
    text-align: center;
    margin-bottom: 1em;
}
/*Div that contains button to edit potential,target and sales value*/
#editPotTargetSales {
 text-align:center;
}

.labelPotential{
    text-align:center;
    margin-top:10px;
}
/* ---------- ALL LISTING TABLES ---------- */
.ListHeaderStyle {
    background-color: #5D7B9D;
    font-weight: bold;
    color: White;
}
/* cell in listing header row */
.ListHeaderStyle th
{
    color: White;
    font-weight:900;
}
/* ---------- ALL REPORT TABLES ---------- */
.ReportStyle
{
    border-right: 2px solid #A7A6AA;
    border-bottom: 2px solid #A7A6AA;
    border-left: 2px solid white;
    border-top: 2px solid white;
}
/* report header row */
.ReportHeaderStyle
{
    background-color: #5D7B9D;
    font-weight: bold;
    color: White;
}
/* cell in report header row */
.ReportHeaderStyle th
{
    color: White;
    font-weight:900;
}
/* cell in report body */
.ReportStyle tbody tr td
{
    background-color: #F7F6F3;
    color: #333333;
    border: 1px solid #EBE9ED;
}
.BorderStyle
{
    border-right: 2px solid #A7A6AA;
    border-bottom: 2px solid #A7A6AA;
    border-left: 2px solid white;
    border-top: 2px solid white;
    padding: 4px;
}
.RowHeaderStyle
{
    background-color: #5D7B9D;
    font-weight: bold;
    color: White;
}
.RowCellStyle
{
    background-color: #F7F6F3;
    color: #333333;
    border: 1px solid #EBE9ED;
}
/* field description column in report body */
.columnFieldName, .ReportStyle tbody tr td.columnFieldName
{
    /*    background-color: #5D7B9D; */
    background-color: #3F92D2;
    font-weight: bold;
    color: Black;
}
/* field information column in report body */
.columnFieldInfo
{
    background-color: #F7F6F3;
    color: #333333;
    border: 1px solid #EBE9ED;
}
/* text column in report body */
.columnText
{
    text-align: left;
}
.columnCenter
{
    text-align: center;
}
/* description text column in report body */
.columnTextDesc
{
    text-align: left;
    /*min-width: 320px;*/
}
.ReportStyle tbody tr td.columnTextDesc
{
    background-color: #FFFFFF;
}
/* date text column in report body */
.columnTextDate
{
    text-align: left;
    /*min-width: 110px;*/
}

/* numeric column in report body */
.columnNumber
{
    text-align: right;
}

/* Header Columns within table */
.ReportStyle .DailyReportHeader {
    text-align: center;
    
}

/* hyperlink look*/
.ReportStyle .hyperlink {
    text-decoration: underline;
    color: #3f92d2;
}
/* Daily Sales -days groups (non summary) */
#DailyTables div {
   display: inline-block;
}
#DailySalesDiv header {
    text-align: center;
}

/* Daily sales back button */
#DailyBackButton {
   padding: 5px;
   margin-top: 1em;  
}
   
/* All sales recap report groups */
#RecapSalesDiv, #RecapProfitsDiv, #RecapPoundsDiv
{
    float: left;
    min-width: 100%;
}

/* All sales recap tables (including the first) */
#RecapSalesDiv div, #RecapProfitsDiv div, #RecapPoundsDiv div, #ARCustomerDiv div
{
    float: left;
    margin-top: 1em;
}
/* ---------- MAINTENANCE OBJECTS ---------- */
/* Contains all of the inputs (text, buttons) for adding notes */
#AddDiv,#AddCommentDiv
{
    z-index:3;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%;
    background-color:#b2cecf;
    -moz-box-shadow:    inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow:         inset 0 0 10px #000000;
 }
 
#textRecapDiv
{
    width: 100%;
    z-index: 4;
    position: relative;
    background-color: #A9BACE;
    height: 60px;
    top: 0;
    left: 0;
}
#cancelSalesRecap
{
    position:absolute;
    top:14px;
    right:12%;
    padding:0 2px;
    height:26px;
}
#buttonSalesRecap
{
    position:absolute;
    right:14%;
    top:14px;
    height:26px;
    padding:0 2px;
  
}
#textRecapTerritory{
    position: absolute;
    top: 15px;
    left: 17%;
    border: 0px solid #000033;
    border-bottom-width: 2px;
    background-color: #A9BACE;
    width: 55%;
    font-size: 1.05em;
    transform: scaleY(1.7);
    min-height: 22px;   
}

#buttonRecapPounds, #buttonRecapProfits, #buttonRecapSales
{
    margin-right: 1%;
}
/* Button to update the entered notes */
#buttonUpdate,#buttonCancel,#buttonUpdateComment,#buttonCancelComment
{
    margin-top:0;
    width:48%;
    height:28px;
    font-weight:600;
}
/* Button to cancel the entered notes */
#buttonUpdate,#buttonUpdateComment
{
   margin-right:1%;
}

/* Comments edit area */
#areaComments,#areaNotes
{
    width: 97%;
    height: 93%;
    float: left;
    margin-top:1%;
    margin-left:1%;
    margin-right:2%;
    font-size:larger;
}
/* ---------- GOOGLE MAP OBJECTS ---------- */
/* Google map div */
.googleMap
{
    background-color: Gray;
    height: 300px;
    visibility: visible;
    width: 90%;
    z-index: 9999;
}
.googleMapButton
{
    height: 20px;
    width: 20px;
}
.googleMapButtonSpan
{
    float: left;
    padding-right: 5px;
    vertical-align: top;
}
.shipToCol
{
    width: 5% !important;
    font-size: 9pt;
    padding: 2px;
    text-align: left;
}
.shipToCol2
{
    width: 35% !important;
    font-size: 10pt;
    padding: 2px;
    text-align: left;
}
.shipToCol3
{
    width: 28% !important;
    font-size: 10pt;
    padding: 2px;
    text-align: left;
}
.shipToCol4
{
    width: 20% !important;
    font-size: 10pt;
    padding: 2px;
    text-align: left;
}
.shipToCol5
{
    width: 2% !important;
    font-size: 10pt;
    padding: 2px;
    text-align: left;
}
.shipToCol6
{
    width: 10% !important;
    font-size: 10pt;
    padding: 2px;
    text-align: left;
}
/* ---------- DRIVER PROCESS OBJECTS ---------- */
/* Button to select the operational branch */
button.branchButton
{
    height: 2.0em;
    font-size: 1.0em;
}
/* Button goes inside driverMenuItem */
button
{
    width: 100%;
    height: 6.0em;
    font-size:2.0em;
    padding: 0px;
}
/* Driver menu option */
.driverMenuItem
{
     margin-left: 5px;
     margin-right: 5px;
}
/* Contains the branch label */
.branchSectionDiv
{
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 7px;
    font-size: 2.0em;
    color: blue;
    text-align: center;
    overflow: hidden;
    background-color: White;
}
/* Contains the last order scanned tag label */
.labelLastScanDiv
{
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 7px;
    width: 100%;
    font-size: 2.0em;
    color: White;
    text-align: center;
    overflow: hidden;
}
/* Contains the last order scanned tag label */
.labelScanSuccess
{
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 7px;
    width: 100%;
    font-size: 2.0em;
    color: White;
    text-align: center;
    overflow: hidden;
}
.addressContainer{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

.inputAddress{
    display:block;
    margin-top:20px;
    margin-left:10%;
    text-align:center;
    width:80%;
    background: #fff;
    font-size:1.2em;    
    outline:none;
    border:none;
    border-radius:4px;
}
.inputAddress::placeholder
{
    color:#676767;
}

.inputAddress:focus
{
    background:#f6f8fa;
    border-bottom:2px solid #000033;
    -moz-box-shadow:    0 0 10px #000000;
    -webkit-box-shadow: 0 0 10px #000000;
    box-shadow:         0 0 10px #000000;    
}

.buttonRow
{
    width:80%;
    padding:0;
    margin-top:15px;
    margin-left:10%;
}

.buttonAddress
{
    display:inline-block;
    margin:0;
    padding:10px;
    width:50%;
    border-left:2px solid#6883A1;
    border-right:2px solid#6883A1;
    border-radius:4px;
}

/*Calendar CSS*/

.calendar,.dayContainer{
	background: #cecece;
	height: 50%;
	width:96%;
    margin: 2%;
    transition:opacity 1s ease-in-out;
    overflow:hidden;
    border-radius: 15px;
    box-shadow: -1px -1px 1px 1px #ceeff0;
    opacity:1;
    position:relative;
}
.week, .dayHeader, .fade{
	margin: 0px;
	width:100%;
	padding:0px;
}
.week{
	opacity:1;
	transition: opacity 0.15s ease-in-out;
}
.week li, .fade li{
	list-style: none;
	display:inline-block;
	width:14.28%;
	text-align: center;
	outline: solid 1px #ceeff0;
  	margin:0;
  	padding-top: 15px;
  	padding-bottom: 15px;
}

 .row, .dayHeader, .followUpRow{
  	width:100%;
  	background: #6883A1;
  	position: relative;
  	color:#f2f8ff;
 }
.dayHeader {
    text-align:center;
    background: #cecece;
    color:#22466f;
    text-decoration:underline;
    padding: 5px 0px;
}
.followUpRow{
    height:20%;
}
 .col-2{
  	display: inline-block;
  	width:16.6%;
    text-align: center;  	
 }
.col-8{
  	display: inline-block;
  	width:66.8%;
  	text-align: center;
    padding: 15px 0px;
    font-weight:900;
}

.pagingBck, .pagingFwd{
  	height: 100%;
    width: 100%;
    outline: none;
    color: #f2f8ff;
    border: 0px;
    padding: 15px 0px;
}
.pagingFwd{
    background: linear-gradient(to right,#6883a1,#bbd1ea);
}
.pagingBck{
    background: linear-gradient(to right, #bbd1ea,#6883a1);
}

.dayHeader li{
	list-style: none;
	display:inline-block;
	width:14.28%;
	background: #344354;
	text-align: center;
	outline: solid 1px #344354;
  	margin:0;
  	color: #f2f8ff;
  	padding-top: 15px;
  	padding-bottom: 15px;
}
.col-46{
    width:46%;
    padding:15px 0px;
    display:inline-block;
    
}
.alternateMo{
  background: #424040;
  color: #f2f8ff;
}
.currentMo{
  background: #dfdfdf;
}

.alternateMo{
    background: #dfdfdf;    

}
.currentMo{
    background: #424040;
    color: #f2f8ff;
}

.currentDay{
    background: #eafcdb;
    color:#000033;
    position:relative;
}

.selectedDay{
    background:#a4b4c6;
}

.followUpDay{
    background:#0000ff;
    position:relative;
}
.followUpCount{
    position:absolute;
    top:0;
    right:0;
    background:#ff0000;
    font-size:14px;
    color:#ffffff;
}
.fade{
	opacity: 0;
	transition: opacity 0.15s ease-in-out;
}
.followUp{
    width:45%;
    padding-top:15px;
    padding-left:10px;
    display:inline-block;
    text-decoration:underline;
    text-align:left;
}
.followUpRow{
    color: #4d9ff9;
    background: #cecece;
    white-space: nowrap;
}
.hide{
    display:none;
    opacity:0;
    transition:opacity 1s ease-in-out;
}
.backNav{
    position:absolute;
    top: 0px;
    left: 8px;
    height: 30px;
    width: 30px;
    z-index:3;
}
.backNav span{
    height:5px;
    width:100%;
    border-radius:5px;
    position:absolute;
    left:0;
    top:12.5px;
    background:#22466f;
}
.backNav span:nth-child(2){
    transform: rotate(36deg);
    width: 50%;
    top: 18px;
}
.backNav span:nth-child(3){
    transform: rotate(-36deg);
    top: 8px;
    width: 50%;
}
.fwdNav{
    position:absolute;
    top: 0px;
    right: 8px;
    height: 30px;
    width: 30px;
    z-index:3;
}
.fwdNav span{
    height:5px;
    width:100%;
    border-radius:5px;
    position:absolute;
    right:0;
    top:12.5px;
    background:#22466f;
}
.fwdNav span:nth-child(2){
    transform: rotate(136deg);
    width: 50%;
    top: 18px;
}
.fwdNav span:nth-child(3){
    transform: rotate(-136deg);
    top: 8px;
    width: 50%;
}

.fwdNav:active, .backNav:active,.addBtn:active{
    background:#a4bfde;
}

.FollowUpBt{
    position:absolute;
    left:10px;
    top:20px;
    left:13%;
    outline:none;
    padding:5px;
    background:inherit;
    border:0px;
    transition:all 0.5s linear;
}
.FollowUpBt:disabled{
    color:#22466f;
}

.activeFollowUp{
    left:72%;
    outline:1px;
    border:1px solid #000;
    background:#a4bfde;
}
.followUpText{
    position: absolute;
    padding:5px;
    top: 20px;
    left: 12%;
    width:0px;
    border:0px;
    background:inherit;
    outline:none;
    transition:all 0.8s linear;
}

.activefollowUpText{
    width:55%;
    border-bottom:1px solid #000;
}
.addBtn{
    position:absolute;
    top: 17px;
    left: 18px;
    height: 30px;
    width: 30px;
    z-index:3;
    transition:all 0.2s linear;
}

.addBtn span{
    height:3px;
    width:100%;
    border-radius:5px;
    position:absolute;
    left:0;
    top:12.5px;
    background:#22466f;
}

.addBtn span:nth-child(2){
    transform: rotate(90deg);
}

.rotatePlus{
    transform:rotate(45deg);
}

.errorBackground{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:5;
    background:rgba(0,0,0,0.3);
}

.errorMessage{
    position:absolute;
    top:20%;
    left:10%;
    width:80%;
    height:20%;
    z-index:5;
    background:#ffffff;
    text-align:center;
    padding-top:15px;
}

.dismissButton{
    position: absolute;
    bottom:10px;
    left:36%;
    border: 1px solid #000;
    background: #a4bfde;
    padding:15px;
}

.loadBar{
    height:5px;
    width:0;
    background:#0000ff;
    position:absolute;
    top:0;
    left:0;
    transition:width 0.4s linear;
    z-index:5;
}

.progress{
    width:75%;
}
.done{
    width:100%;
    opacity:1;
    transition:opacity 0.3s linear; 
}
.loader{
    position:relative;
    height:6px;
    width:27px;
    background:#37cfd0;
    transform:rotate(20deg) skew(-20deg,-20deg);
    animation: move 1s infinite;
}

@keyframes move {
    from {left: 0px;}
    to {left: 90%;}
}

.custName{
    padding:0 15%;
}
.rowManifest {
    width: 100%;
    background: #ffffff;
    color: #6883A1;
    border-bottom: 1px solid #cecece;
    font-size: 0.96rem;
    padding:2% 0;
}

[class^="COL"] {
    display: inline-block;
    font-weight:500;
    text-overflow:clip;
}
.COL-5{
    width:5%;
}
.COL-9{
    width:9%;
}
.COL-10{
    width:10%;
}
.COL-12{
    width:12%;
}
.COL-13{
    width:13%;
}
.COL-14{
    width:14%;
}
.COL-15{
    width:15%;
}
.COL-20{
    width:20%;
}
.COL-22{
    width:22%;
}
.COL-25 {
    width: 25%;
}
.COL-29{
    width:29%;
}
.COL-36{
    width:36%;
}
.COL-38{
    width:38%;
}
.COL-40 {
    width: 40%;
}
.orderHeader {
    width: 100%;
    height: 20%;
    position: sticky;
    top: 0;
    color: #137ff6;
    background: #13f1f6;
}
.orderListRow {
    width: 100%;
    background: #000033;
    border-bottom: 1px solid #cecece;
    font-size:0.9rem;
}
.shipmentContainer{
    width:100%;
    height:100%;
    text-align:center;
    padding-top:5%;
}
#shipmentContainer {
    width: 100%;
    height: 100%;
}
.whseInput {
    background: #6883A1;
    border: 0px;
    border-bottom: 1px solid #000033;
    outline: none;
    font-size: 1.7rem;
    text-align: center;
    margin-bottom: 5%;
    width: 50%;
}
.shipmentSearch{
    padding:5%;
}
.manifestHeader, .manifestHeaderB {
    position: sticky;
    top: 0;
    color: #137ff6;
    background: #13f1f6;
}
.backToShipments {
    background: white;
    width: 100%;
    border: 0;
    padding: 5%;
    outline: none;
    font-weight: 900;
    font-size:1rem;
    border-bottom: 6px solid #cecece;
    border-right: 6px solid #807f7f;
    border-left: 6px solid #807f7f;
}

 #backToShipments:hover {
    border-bottom: 0px solid #cecece;
    border-right: 0px solid #807f7f;
    border-left: 0px solid #807f7f;
    width:98%;
    margin-left:1%;
 }

.productdetContainer {
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 5%;
}

#productdetContainer {
    width: 100%;
    height: 100%;
}

.productdetInput {
    background: #6883A1;
    border: 0px;
    border-bottom: 1px solid #000033;
    outline: none;
    font-size: 1.7rem;
    text-align: center;
    margin-bottom: 5%;
    width: 50%;
}

.productdetSearch {
    padding: 5%;
}

.proddescContainer {
    width: 100%;
    height: 100%;
    background: White;
    color: #5D7B9D;
    text-align: center;
}

#proddescContainer {
    width: 100%;
    height: 100%;
}

.OpenInvContainer {
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 5%;
}

#OpenInvContainer {
    width: 100%;
    height: 100%;
}

#invID {
    white-space: nowrap;
}