.diffvarheading { display:block; border-bottom:1px solid #ddd; padding:5px 0px; } .diffvarheading:first-child { border-top:1px solid #ddd; } .diffvar { font-size:80%; display:inline-block !important; border-radius:7px; border:1px solid #aaa; padding:2px 7px; margin:5px; color:#777 } .diffvar:hover { color:#fff; background-color:#777 !important; } .activevar { border:1px solid #777; color:#444; background:#eee; } .psize { color:#999; display:block; font-size:90%; } .table td, .table th { padding: .45rem; } th { color:#444; } td { color:#666; } td.firstcolumn { color:#444; } .vmid { vertical-align:middle !important; } .mid { text-align:center !important; } .activetab { background:#efefef; } tr.focus { background:#ccc !important; font-weight:bold; } .qtylink { color:inherit !important; border-bottom:1px dotted #ccc; } .qtylink:hover { color:#555; } .excess { color:red !important; } .less { color: blue !important; } .success { color:green !important; } .error { color:Red !important; } .error a { text-decoration:underline !important; } #salesrep { display:none; z-index:1000; position:fixed; background:#eee !important; border:2px solid #ccc; border-radius:10px; left:0px; height:20px top:0%; } .thumb { width:80%; height:80%; max-height:200px; border-radius:100%; } .intro { font-size:small; line-height:100%; } .loadlink { display:inline; font-size:small; -webkit-animation: ellipsis steps(4,end) 1s infinite; animation: ellipsis steps(4,end) 1s infinite; content: "\2026"; /* ascii code for the ellipsis character */ } .ios-toggle,.ios-toggle:active{ position:absolute; top:-5000px; height:0; width:0; opacity:0; border:none; outline:none; } .checkbox-label{ display:block; position:relative; padding:10px; margin-bottom:20px; font-size:12px; line-height:16px; width:100%; height:36px; /*border-radius*/ -webkit-border-radius:18px; -moz-border-radius:18px; border-radius:18px; background:#f8f8f8; cursor:pointer; } .checkbox-label:before{ content:''; display:block; position:absolute; z-index:1; line-height:34px; text-indent:40px; height:36px; width:36px; /*border-radius*/ -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; top:0px; left:0px; right:auto; background:white; /*box-shadow*/ -webkit-box-shadow:0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd; -moz-box-shadow:0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd; box-shadow:0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd; } .checkbox-label:after{ content:attr(data-off); display:block; position:absolute; z-index:0; top:0; left:-300px; padding:10px; height:100%; width:300px; text-align:right; color:#bfbfbf; white-space:nowrap; } .ios-toggle:checked + .checkbox-label{ /*box-shadow*/ -webkit-box-shadow:inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1); -moz-box-shadow:inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1); box-shadow:inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1); } .ios-toggle:checked + .checkbox-label:before{ left:calc(100% - 36px); /*box-shadow*/ -webkit-box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3); -moz-box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3); box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3); } .ios-toggle:checked + .checkbox-label:after{ content:attr(data-on); left:60px; width:36px; } /* GREEN CHECKBOX */ #checkbox1 + .checkbox-label{ /*box-shadow*/ -webkit-box-shadow:inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd; -moz-box-shadow:inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd; box-shadow:inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd; } #checkbox1:checked + .checkbox-label{ /*box-shadow*/ -webkit-box-shadow:inset 0 0 0 18px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1); -moz-box-shadow:inset 0 0 0 18px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1); box-shadow:inset 0 0 0 18px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1); } #checkbox1:checked + .checkbox-label:after{ color:rgba(19,191,17,1); } /* RED CHECKBOX */ #checkbox2 + .checkbox-label{ /*box-shadow*/ -webkit-box-shadow:inset 0 0 0 0px #f35f42,0 0 0 2px #dddddd; -moz-box-shadow:inset 0 0 0 0px #f35f42,0 0 0 2px #dddddd; box-shadow:inset 0 0 0 0px #f35f42,0 0 0 2px #dddddd; } #checkbox2:checked + .checkbox-label{ /*box-shadow*/ -webkit-box-shadow:inset 0 0 0 20px #f35f42,0 0 0 2px #f35f42; -moz-box-shadow:inset 0 0 0 20px #f35f42,0 0 0 2px #f35f42; box-shadow:inset 0 0 0 20px #f35f42,0 0 0 2px #f35f42; } #checkbox2:checked + .checkbox-label:after{ color:#f35f42; } /* BLUE CHECKBOX */ #checkbox3 + .checkbox-label{ /*box-shadow*/ -webkit-box-shadow:inset 0 0 0 0px #1fc1c8,0 0 0 2px #dddddd; -moz-box-shadow:inset 0 0 0 0px #1fc1c8,0 0 0 2px #dddddd; box-shadow:inset 0 0 0 0px #1fc1c8,0 0 0 2px #dddddd; } #checkbox3:checked + .checkbox-label{ /*box-shadow*/ -webkit-box-shadow:inset 0 0 0 20px #1fc1c8,0 0 0 2px #1fc1c8; -moz-box-shadow:inset 0 0 0 20px #1fc1c8,0 0 0 2px #1fc1c8; box-shadow:inset 0 0 0 20px #1fc1c8,0 0 0 2px #1fc1c8; } #checkbox3:checked + .checkbox-label:after{ color:#1fc1c8; } .newbtn { color:white; background:#555 !important; } .cityhidden{display:none;} .billinghidden{display:none;} .hiddenchecked{display:none;} .samehidden{display:none;} .pickuphidden{display:none;} .selectize-control { display: inline-block; vertical-align: middle; width:100%; } .badd { border-right:1px solid #eee; margin-top:10px; font-size:80%; padding:12px; } .badd span { display:block; } .form-control,.form-control-lg { border:1px solid #eee !important; color:#333; font-size:inherit !important; } .form-row label { color:#555; } .closediv { position:absolute; right:3%; top:3%; font-size:150%; } .bselected { color:black; background:white; border:1px solid #afa; } .dispatch { display:relative; border-radius:10px !important; radius:10px; border:1px solid #eee; padding:10px; margin:15px; margin-top:15px; background:#fbfaf9; } .locdetails { padding:20px; } .pdtdetails { padding:10px; background:#fff; } .addresrow { padding:7px; border-bottom:1px dotted #ddd; } .addresrow:last-child { border-bottom:none; } .splitpdt { border-top:3px solid #eee; } .split { border-top:3px solid #eee; } .spliti { display:inline-block; padding:10px 0px; margin-right:50px; } .unltd { flex:none !important; max-width: 100% !important; width: auto !important; vertical-align:top !important; padding:15px; } .unltd ul li { padding:5px; font-size:80% !important; color:#777; } .pwise { border-collapse:collapse !important; width:100% !important; table-layout:fixed; } .pwise tbody { display:table-row-group !important; } .pwise tr { display:table-row !important; border-bottom:3px solid #eee; } .pwise td,.pwise th { display:table-cell !important; vertical-align:middle; text-align:center; } .pwise td input { width:80px; padding:10px; border:1px solid #ddd; border-radius:10px; text-align:center; } .pwise td:first-child { border:1px solid #fff !important; border-right:3px solid #eee !important; } img { border-radius:5%; } #billeditor { background:#fff; } .loadlink { position:relative; } .selectize-input { box-shadow:none !important; shadow:none !important; } .fader { opacity:0.5; } .imglabel { font-size:1.5vmin !important; background:white; opacity:70%; color:#333; position:absolute; left:0%; top:45%; padding:3%; width:auto; height:auto; z-index:500; border-radius:5%; } .imglabel a { font-size:1.5vmin !important; } .capacity { font-size:4vmin; } .units { display:block; } .totalwt { display:block; font-size:2vmin; } .totalshelfkg { display:block; color:#999; font-size:1.2vmin; } .comparison0,.comparison1 { table-layout: fixed; } .skeleton-box { display: inline-block; height: 1em; position: relative; overflow: hidden; background-color: #DDDBDD; &::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%); background-image: linear-gradient( 90deg, rgba(#fff, 0) 0, rgba(#fff, 0.2) 20%, rgba(#fff, 0.5) 60%, rgba(#fff, 0) ); animation: shimmer 2s infinite; content: ''; } @keyframes shimmer { 100% { transform: translateX(100%); } } } .clientlogo { padding:6px; margin:6px; border-radius:10px; } .clientlogosmall { width:66px; padding:6px; margin:6px; border-radius:10px; } h3.small { font-size:70%; }