/**
 *
 * You can write your CSS code here, DO NOT touch the default JavaScript file
 * because it will make it harder for you to update.
 * 
 */
 .form-control::-webkit-input-placeholder {
      color: #B0BEC5; /*text-transform: uppercase;*/ font-weight: 400; }
.form-control:-moz-placeholder {
      /* Firefox 18- */
      color: #B0BEC5; /*text-transform: uppercase;*/ font-weight: 400;}
.form-control::-moz-placeholder {
      /* Firefox 19+ */
      color: #B0BEC5;/*text-transform: uppercase;*/ font-weight: 400; }
.form-control:-ms-input-placeholder {
      color: #B0BEC5;/*text-transform: uppercase;*/ font-weight: 400; }
body {background-color: #ECF0F1;  font: 14px Tahoma,helvetica,arial,sans-serif; /*text-transform: uppercase;*/ letter-spacing: 0.07em;}
.browser_icon img {width: 50%;}
.modal-xl {
  max-width: 94%;
  margin-left: 3%;
  margin-right: 3%; }
a:focus {outline: none;}
a:hover {color: #ECF0F1;}
.pull-left { float: left;}
label.mandatory:after, span.star:before  { content:"*"; color:red; padding-left: 5px;}
textarea.form-control.login_screen {resize: none; height: 90px;}
textarea.form-control.trackArea {resize: none; height: 50px;}
.bootstrap-select.form-control ul li a {color: #34495E; line-height: 1.8;}
.bootstrap-select.form-control .btn {color: #34495E;}
.pull-right {float: right;}
p.h6 {border-bottom: 1px solid rgb(52, 73, 94);}
.text-center {text-align: center!important;}
.effect2 { position: relative;}
.form-control {
    display: block;
    width: 100%;
    font-size: 0.9em;
    padding: 0.5rem 0.75rem;
    line-height: 1.25;
    background-image: none;
    background-clip: padding-box;
    border: 1px solid #E0E0E0;
    border-radius: 0.18rem;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.effect2:before, .effect2:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
.tooltip-inner {/*text-transform: uppercase;*/ font-size: 1em;}
.login-brand { margin: 20px 0; margin-bottom: 40px; text-align: center;}
.mt-5, .my-5 { margin-top: 3rem!important;}
.mb-3, .my-3 { margin-bottom: 1rem!important}
.mb-1 { margin-bottom: 0.5rem!important}
.card.card-primary { border-left: 1px solid #D2D7D3; border-right: 1px solid #D2D7D3; margin-bottom: 50px;}
.card .card-body { padding-top: 20px; padding-bottom: 20px; height: 260px;}
.card .card-header, .card .card-footer, .card .card-body { background-color: transparent;}
.card .card-header h4 {font-size: 1.5em; font-weight: normal; color: #1E6ED1;}
.card .card-body .form-group label {color: #212121;}
.card-body {-webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 1.25rem;}
.card {
    -webkit-box-shadow: 0 0 40px rgba(0,0,0,.05);
    box-shadow: 0 0 40px rgba(0,0,0,.05);
    background-color: #fff;
    border-radius: 10px;
    border: none;
    position: relative;
    margin-bottom: 30px;
}
.card .card-header {border-bottom-color: #e5e5e5; line-height: 30px; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; width: 100%;}
.card .card-header img {opacity: 0.4;}
.border-right {border-right: 1px solid #e5e5e5;}
.hidden {display: none;}
.simple-footer {text-align: center; margin-top: 40px; margin-bottom: 40px; color: #666;}
.forgot a {color: #1E6ED1 ;margin-right:  10px; text-decoration: none;}
.forgot a:active {background-color: rgba(26,115,232,0.251); border-radius: 0.25rem;}
.forgot a:focus  {background-color: none;}
.signup a {text-decoration: none;color: #1C2A39;}
 .btn {/*text-transform: uppercase;*/font-size: 0.9em; letter-spacing: 0.07em;}
.btn.btn-xs { padding: .15rem .25rem; font-size: 0.9em; letter-spacing: 0.07em;}
.btn:focus, .btn.focus, .btn:active:focus, .btn:active.focus, .btn.active:focus, .btn.active.focus { outline: 0; outline-offset: -2px;}
.form-control:focus {/*color: #55595c;*//* background-color: #fff; */ border-color: #1C2A39; outline: none;}
.form-control.login_screen, .bootstrap-select input.form-control {background-color: #ECF0F1;}
.effect4, .form-group.form-login {position: relative;}
.form-login button {
    position: absolute;
    width: 75px;
    height: 75px;
    border-radius: 50px;
    padding: 0;
    border: 5px solid #ECF0F1;
    top: -25px;
    left: 0;
    right: 0;
    margin: 0 auto;
    letter-spacing: 0.07em;
}
.effect4:after {
    z-index:-1;
    position:absolute;
    content:"";
    bottom:15px;
    right:10px;
    left:auto;
    width:50%;
    top:80%;
    max-width:300px;
    background:#95A5A6;
    -webkit-box-shadow:0 15px 10px #95A5A6;
    -moz-box-shadow:0 15px 10px #95A5A6;
    box-shadow:0 15px 10px #95A5A6;
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    -o-transform:rotate(3deg);
    -ms-transform:rotate(3deg);
    transform: rotate(3deg);
}
.has-error .form-control, .has-error .custom-select { border: 1px solid #ff0000;}
.help-block {/*position: absolute; color: #ff0000; font-size: 0.7rem; */display: none; }
.fade-in.two {-webkit-animation-delay: 1.2s;-moz-animation-delay:1.2s;animation-delay: 1.2s;}
.card-header { border-bottom: 1px solid #ECF0F1; display: flex; padding: 15px 20px;}
#signup-overlay { position: fixed; top:0; bottom:0; left:0; right:0; background:rgba(0, 0, 0, 0.7); opacity:1; z-index:1; display:none;}
.signup-pop {position: relative; width: 50%; top:10%; margin: 0 auto;}
.terms-close .fa-times { position: fixed; top: 5px; font-size: 30px; right: 10px; color: #fff; cursor: pointer; z-index: 1;}
.terms-body { position: relative; overflow: auto; height: 500px;}
.terms-box p, .terms-box ul, .terms-box ol {line-height: 22px; font-size: 0.8em;}
.terms-box h5 {font-size: 20px; line-height: 34px;font-weight: 600; color: #222; margin: 0; padding: 0;}
.well { margin-bottom: 20px; background-color: #f5f5f5; border-radius: 5px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05); box-shadow: inset 0 1px 1px rgba(0,0,0,.05);}
.signup-panel-heading>.signup-panel-title {/* white-space: nowrap;*/ overflow: hidden; text-overflow: ellipsis; font-size: 1em; line-height: 30px; padding-left: 15px;}
.signup-panel-heading>.signup-panel-title h5 { margin: 0; line-height: 30px; color: #fff;}
.signup-panel { margin-bottom: 0;}
.signup-panel-default>.signup-panel-heading { background-color: #34495E; padding: 2px; border-radius: 4px 4px 0 0; position: relative;}
.signup-outer-body {padding: 15px; border: none;}

/* color */
.alert-color {color: #ff0000;}
.info-color {color: #01579B;}
/*.wet_asphalt_bg, .wet_asphalt_bg:hover, .wet_asphalt_bg:focus {background-color: #1E6ED1; color: #ECF0F1;}
.wet_asphalt_bg:hover {background-color: #2C3E50;}*/
.wet_asphalt_bg {background-color: #212121; color: #ECF0F1;}
.concrete_bg, .concrete_bg:hover, .concrete_bg:focus {background-color:#95A5A6; color: #ECF0F1; }
.concrete_bg:hover {background-color: #7F8C8D;}
.silver_bg, .silver_bg:hover, .silver_bg:focus {background-color:#BDC3C7; color: #ECF0F1; }
.silver_bg:hover {background-color: #95A5A6;}
.email_rates_bg, .email_rates_bg:hover, .email_rates_bg:focus {color: #ECF0F1; background-color: #E74C3C;}
.email_rates_bg:hover {background-color:#C0392B;}
.nephritis_bg, .nephritis_bg:hover, .nephritis_bg:focus {background-color: #27AE60; color: #ECF0F1;}
.nephritis_bg:hover {background-color: #2ECC71;}
.gray_bg {background-color: #FAFAFA;}
.white_bg {background-color: #ffffff;}

.card .card-body .form-group .inputGroup label {color: #CFD8DC;}
.card .card-body .form-group .inputGroup {
   background-color: #fff;
   display: block;
   margin: 5px 0;
   position: relative;
}
 .card .card-body .form-group .inputGroup label {
   padding: 10px 15px;
   width: 100%;
   display: block;
   text-align: left;
   color: #B0BEC5;
   cursor: pointer;
   position: relative;
   z-index: 2;
   transition: color 200ms ease-in;
   overflow: hidden;
   border-radius: 0.25rem;
}
 .card .card-body .form-group .inputGroup label:before {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   content: '';
   background-color: #ECEFF1;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%) scale3d(1, 1, 1);
   transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
   opacity: 0;
   z-index: -1;
}
 .card .card-body .form-group .inputGroup label:after {
   width: 22px;
   height: 22px;
   content: '';
   border: 2px solid #d1d7dc;
   background-color: #fff;
   background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
   background-position: -2px -2px;
   background-repeat: no-repeat;
   border-radius: 50%;
   z-index: 2;
   position: absolute;
   right: 15px;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
   transition: all 200ms ease-in;
   line-height: 22px;
}
 .card .card-body .form-group .inputGroup input:checked ~ label {
   color: #263238;
}
 .card .card-body .form-group .inputGroup input:checked ~ label:before {
   transform: translate(-50%, -50%) scale3d(56, 56, 1);
   opacity: 1;
}
 .card .card-body .form-group .inputGroup input:checked ~ label:after {
   background-color: #388E3C;
   border-color: #388E3C;
}
.inputGroup input {
   width: 32px;
   height: 32px;
   order: 1;
   z-index: 2;
   position: absolute;
   right: 30px;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
   visibility: hidden;
} 

.soluship_Tracking .info_Tracking {margin-top: 5px;}
.soluship_Tracking .input-group-addon {padding: 0.5rem; width: 110px; font-size: 0.8rem}
.soluship_Tracking span.input-group-addon {width: auto; cursor: pointer; background-color: #1E6ED1; color: #fff;}

@media (max-width: 767px) {
.card .card-body {
  height:330px;
}
.forgot a {display: flex; padding: 5px; margin-right: 0px;}
textarea.form-control.trackArea {height: 40px;}
}

@media (max-width: 567px) {
.card .card-body {
  height:345px;
}
 
}