@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/roboto-regular-webfont.eot');
    src: url('../fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
         url('../fonts/roboto-regular-webfont.woff') format('woff'),
         url('../fonts/roboto-regular-webfont.ttf') format('truetype'),
         url('../fonts/roboto-regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotothin';
    src: url('../fonts/roboto-thin-webfont.woff2') format('woff2'),
         url('../fonts/roboto-thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body, button, html, input, select, textarea { font-family: 'robotoregular';  color: #505050;}
a, a:focus, a:hover { color:#307ac5;}
body { font-size:15px;}
img { max-width:100%; height:auto;}
.redlink { color:#e12222;}
.redlink:hover { color:#e12222; opacity:0.8;}
.btn { font-weight:normal;}
.m-r-sm { margin-right:10px;}
.border-right { border-right:solid 1px #e6e6e6;}
.checkbox input + label::before, .radio input + label::before { border: 1px solid #c3dce8;}
.checkbox input:checked + label::before, .radio input:checked + label::before {border-color: #00a8ff; }
.checkbox input[type="radio"]:checked + label::after, .radio input[type="radio"]:checked + label::after { background: #307ac5 none repeat scroll 0 0;}
.checkbox input + label, .checkbox-bird input + label, .checkbox-detailed input + label, .checkbox-slide input + label, .checkbox-toggle input + label, .radio input + label { font-size: 15px;}
.form-control { border: 1px solid #c3dce8;  line-height: 1.4; padding: 0.29rem 0.75rem;}
.box-typical { border: 1px solid #c3dce8; }
.b-t, .b-b, .b-a { border-color:#c3dce8;}
.form-control-label { color:#666666; padding-left:0.85rem;}


.bodyfullheight  { height:100vh; background:#fff;}
.loginimage { margin:0; padding:0; float:left; background:url(../images/login-image.jpg) no-repeat left center;  height: 100vh; width: 50%; background-size:cover; min-height:530px;}
.login-right { display: table; float: left; height: 100vh; text-align: center; width: 50%;}
.loginbox { border: medium none; max-width: 370px; padding: 0;}
.login-right .page-center-in { position:relative; padding: 135px 0;}
.login-logo { left: 0; position: absolute; width: 100%; top: 40px;}
.footer-logo { bottom: 40px; left: 0; position: absolute; width: 100%;}
.loginbox .form-group { margin-bottom:30px;}
.loginbox .form-control { border-top:none; border-left:none; border-right:none; border-bottom: solid 1px #c7c7c7; border-radius:0;}
.loginbox .font-icon { font-size: 22px; color:#646464 !important; margin-top:-3px;}
.bar::before, .bar::after { background: #307ac5 none repeat scroll 0 0; bottom: 0px; content: ""; height: 2px; position: absolute; transition: all 0.2s ease 0s; width: 0;}
.loginbox .form-control:focus ~ .bar::before, .loginbox .form-control:focus ~ .bar::after { width: 50%;}
.bar::after { right: 50%;}
.bar::before { left: 50%;}
.loginbox .btn { margin: 0; width: 100%; text-transform:uppercase; border-radius: 8px; padding: 7px 10px; font-size:18px; border-width: 2px; font-weight:bold;}

.page-header { float:left; font-size:20px; text-transform:uppercase; font-weight:bold;  margin: 0; padding: 5px 0 0 40px;}
.btn { background: #307ac5 none repeat scroll 0 0; border: 1px solid #307ac5;}
.btn:hover { background-color: #3a87d4; border-color: #3a87d4;}
.btn.btn-primary-outline, .btn.btn-primary-outline:focus { border-color: #307ac5; color: #307ac5;}
.btn.btn-primary-outline:focus:hover, .btn.btn-primary-outline:hover { background-color: #307ac5;}
.btn.btn-default { background-color: #dbe4ea; border-color: #dbe4ea; color:#3c5061 !important; font-weight:normal;}
.btn.btn-default:hover { background: #307ac5 none repeat scroll 0 0; border: 1px solid #307ac5; color:#fff !important;}

.site-header {  border-bottom: 1px solid #c3dce8;} 
.site-header .site-header-content { height:auto; padding:0;}
.logout { float: left;}
.logout-btn { border:solid 1px #8e8e8e; border-radius:3px; background:#fff; height:38px; line-height:36px; padding:0 10px;}
.site-header .user-menu.dropdown { margin: 0 5px 0 0px; height:auto;}
.user-menu .dropdown-toggle span { float: left; margin-right: 10px;}
.mobileshow { display:none;}
.profileimg { float:left; border: 1px solid #8e8e8e; border-radius: 3px; display: block; float: left; height: 38px; margin:0px 3px -1px 0; transition: all 0.2s ease-in-out 0s; width: 38px; overflow:hidden;}
.site-header .user-menu.dropdown .dropdown-toggle { height: 39px; line-height: 38px; color:#121212;}
.site-header .user-menu.dropdown .dropdown-toggle img { border-radius: 0; /*height: auto;*/ margin: 0; width: 38px;}
.site-header .user-menu.dropdown .dropdown-toggle::after { border:0;}
.cart { float:left; width:38px; height:38px; text-align:center; position:relative; margin-left:15px;}
.cart .label { position: absolute; right: -9px; top: -4px;}
.cart > img { margin-top: 7px;}

.site-header .user-menu.dropdown .dropdown-toggle:hover, .site-header .user-menu.dropdown.open .dropdown-toggle { color: #307ac5;}
.dropdown-item.current, .dropdown-item:hover, .logout .logout-btn:hover { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; color: #307ac5;}
.dropdown-item.current .font-icon, .dropdown-item:hover .font-icon { color: #307ac5;}

.page-content {  padding-bottom: 115px;}

.side-menu {  border-right: 1px solid #c3dce8;}
.side-menu .jspPane { padding-top: 80px !important;}
.side-menu-list .lbl { font-size:15px; color: #515151; font-weight:normal;}
.side-menu-list li { margin-bottom:1px;}
.side-menu-list a, .side-menu-list > li > span { padding: 17px 10px 17px 60px; border-left: 3px solid rgba(0, 0, 0, 0);}
.side-menu-list li.active a, .side-menu-list > li.active > span:hover { background-color: #f6f8fa; color:#121212;  border-left: 3px solid #307ac5;}
.side-menu-list li.active a span, .side-menu-list a:hover span { color:#121212;}
.side-menu-list a:hover, .side-menu-list > li > span:hover {  background-color: #f6f8fa; border-left: 3px solid #307ac5; color:#121212;}

.statistic-box.kithisyear { background-color:#E17277; }
.statistic-box.dark { background-color:#304b58; }
.statistic-box.blue { background-color:#2ea3fc; }
.statistic-box > div { height: 162px;}
.statistic-box .caption { font-weight:normal;}
.statistic-box .number { font-family: 'robotothin'; font-size: 63px;}
.box-typical.box-typical-dashboard { height: 405px;}
.box-typical-dashboard a { text-decoration:underline;}
.box-typical-dashboard a:hover { text-decoration:none;}
.tbl-typical th { color:#505050; font-size: 15px;}
.tbl-typical th > div { padding-top:10px; padding-bottom:11px;}
.tbl-typical th > div::before { background:none;}
.tbl-typical tr:nth-child(2n) td { background: #fafafa none repeat scroll 0 0;}

footer { background: #ffffff none repeat scroll 0 0; border-top: 1px solid #c3dce8; bottom: 0; position: absolute; width: 100%; padding:15px 0}
footer .container-fluid {  padding-left: 270px; padding-right:25px;}
footer p { color:#7d7d7d; margin:0; padding:10px 0 0 0;}
footer p a { color:#7d7d7d;}

.mobile-heaer-show { display:none; font-size: 20px; padding-bottom:25px; text-transform: uppercase; font-weight: bold;}

.searchbox { margin-bottom:30px;}
.searchbox .form-control { padding:10px 15px;}
.searchbox .searchicon { height: 45px !important; line-height: 49px !important;}

.box-typical-body-2 { margin: 0; padding:15px 10px; border-top: 1px solid #d8e2e7;}
.orderblock { padding-left: 0.9375rem; padding-right: 0.9375rem; padding-bottom:15px; padding-top:15px; position: relative; float: left; width: 25%; }
.orderblock-details { margin:0; padding:20px 0 0 0;}
.orderblock-details .link { text-decoration:underline; text-overflow:ellipsis; width:200px; overflow: hidden;  white-space: nowrap; display: block;}
.orderblock-details p { padding-top:10px;}
.details-content { padding:0 20px;}
.details-content p { line-height:26px;}
.details-content h5 { color:#2a2a2a; font-weight:bold; font-size:15px; margin-bottom:10px; }
.quantity-div .quantity-text { display:inline-block; padding-right:10px;}
.quantity-div .form-control { display:inline-block; width:100px;}
.slider-section { text-align:center; margin:30px 0; padding:0;}
.part-imformation { margin:0; padding:10px 0 0 0;}
.quantitybox { width:80px;}

.section-block-inside { padding: 0 25px;}
.section-subtitle { background: #eceff4 none repeat scroll 0 0; color: #232323; padding: 10px 15px 15px;}
.option-radio { border-top: 1px solid #e6e6e6; margin: 5px 0 0; padding: 16px 0;}
.display-inline { display:inline-block;}
.threecolom-box {}
.threecolom-box .col1 {  width: 36.33%; float:left; position:relative;}
.threecolom-box .col1:first-child { width:27.33%;}
.threecolom-label { position:absolute; left:0; top:0;}
.col1-inside { padding: 0 0 0 50px;}
.readonly-data { color:#000; padding:5px 0 0 0; line-height:24px;}
.small-head { font-size:16px; font-weight:600; color:#505050;}
.library-block { float:left; width:25%; margin:0; padding:0 15px;}
.library-block-inside { padding:0; transition: all ease-in-out 0.2s;}
.library-block-inside:hover { box-shadow:0 0 5px rgba(0, 0, 0, 0.24);}
.library-block-image { text-align: center;  margin: 30px 15px;}
.library-title { padding:15px 20px; border-top:solid 1px #e6e6e6;}
.zoom-icon { float:right; color:#595959;}
.quantity-div{ float: left; width: 100%; margin-top: 10px; margin-bottom: 10px; }
@media (max-width:1366px){
.orderblock { width: 33.33%;}
.library-block { width:33.33%;}
}

@media (max-width:991px){
.hidden-md-down { display: block !important;}
.site-header .site-header-content .site-header-content-in { margin-left: 130px;}
footer .container-fluid { padding-left: 15px; padding-right: 15px;}

.page-header { display:none;}
.mobile-heaer-show { display:block;} 
.border-right { border-right:0;}


}

@media (max-width:800px){
.orderblock { width: 50%;}

}

@media (max-width:767px){
.site-header .site-header-content { margin-left: -210px;}
.site-header .site-logo img { top: 1px; width: 85px;}
.loginimage { display:none;}  
.login-right { width:100%;}
.page-header { display:none;}

.details-content { padding: 0 5px;}
.section-block-inside { padding: 0 15px;}
.library-block { width: 50%;}

.responsive-table, .responsive-table tbody, .responsive-table td, .responsive-table tr { display: block;}
.responsive-table thead, .responsive-table th  { display:none !important;}
.responsive-table td{ border: none;
border-bottom: 1px solid #d8e2e7;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;}
  
.responsive-table td:before{ content:attr(data-label); position: absolute;  
left: 6px;
width: 45%;
padding-right: 10px;
text-align:left;
color:#000000; }
.tbl-typical tr:nth-child(2n) td {
  background: #F7F7F7 none repeat scroll 0 0;
}

}

@media (max-width:568px){
.cart { margin-left: 0;}
.user-menu .dropdown-toggle span { display: none;}
.profileimg { margin-right:0; }
.logout { display: none;}
.mobileshow { display:block;}
}

@media (max-width:543px){
.footer-contact { text-align: center;}
.powered-logo { padding-top: 30px; text-align: center;}
.page-content { padding-bottom: 215px;}

.orderblock { width: 100%; border-bottom: solid 1px #d8e2e7;}
.threecolom-box .col1:first-child { width: 100%;}
.threecolom-box .col1 { width: 100%; margin-bottom:5px;}
.threecolom-label { position: relative; padding-left: 0;}
.col1-inside { padding: 0;}
.library-block { width: 100%;}
}

@media (max-width:479px){

.radio { display: block; padding: 0 0 5px 0;}
  
}

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
  color: #d7272d;
}
.color-red {
    color: #d7272d !important;
}
.has-error .form-control {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.has-error .form-control:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}
.has-error .input-group-addon {
  color: #a94442;
  background-color: #f2dede;
  border-color: #a94442;
}
.has-error .form-control-feedback {
  color: #a94442;
}

.img-bg{
    display: block;
    width: 100%;
    height: 108px;
    background-repeat:no-repeat;
    background-position: center top;
    background-size: contain;}
.bannerimage{ display: none; }

 .loader_container {
  background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
  font-family: Helvetica;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
  width: 100vw;
}

.loader {
  height: 20px;
  width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.loader--dot {
  animation-name: loader;
  animation-timing-function: ease-in-out;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  background-color: black;
  position: absolute;
  border: 2px solid white;
}
.loader--dot:first-child {
  background-color: #8cc759;
  animation-delay: 0.5s;
}
.loader--dot:nth-child(2) {
  background-color: #8c6daf;
  animation-delay: 0.4s;
}
.loader--dot:nth-child(3) {
  background-color: #ef5d74;
  animation-delay: 0.3s;
}
.loader--dot:nth-child(4) {
  background-color: #f9a74b;
  animation-delay: 0.2s;
}
.loader--dot:nth-child(5) {
  background-color: #60beeb;
  animation-delay: 0.1s;
}
.loader--dot:nth-child(6) {
  background-color: #fbef5a;
  animation-delay: 0s;
}
.loader--text {
  position: absolute;
  top: 200%;
  left: 0;
  right: 0;
  width: 4rem;
  margin: auto;
}
.loader--text:after {
  content: "Loading";
  font-weight: bold;
  animation-name: loading-text;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes loader {
  15% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(230px);
  }
  65% {
    transform: translateX(230px);
  }
  95% {
    transform: translateX(0);
  }
}
@keyframes loading-text {
  0% {
    content: "Loading";
  }
  25% {
    content: "Loading.";
  }
  50% {
    content: "Loading..";
  }
  75% {
    content: "Loading...";
  }
}
.addkitpop td{padding: 10px;}
.popaddkitbtn{margin-left: 100px;}
.addkitpop .kquantity{width: 125px;}
.mystatus{width: 194px;float: right;margin-bottom:10px; }
.mystatuslab{margin:0px 8px 0px 0px; }
.ordplacebody{height: 80px;}
.floatl{float: left;}
.ordplacebody .leftspan{position: relative;margin:0px 10px 5px 5px;}
.ordplacebody .rightspan{font-size: 18px;}
.site-header .user-menu.dropdown .dropdown-toggle img{height: 36px;}
.forgotpass {    
    display: table;
    float: left;
    height: 100vh;
    text-align: center;
    width: 100%;
}
.floatr{float:right;}
.ordcontact{font-size: 10px;font-style: italic;}
div.auto-complete ul{overflow: scroll;}
.dashordmonth{height: 550px !important;}
.ordbymonths{height: 455px !important;}

.btn.btn-default.btn-view-all{ margin:15px; background:#307ac5 !important; color:#fff !important; border:1px solid #307ac5} 
.btn.btn-default.btn-view-all:hover{background:#22568b !important; color:#fff !important;}
.completer-input{width: 100%;border: none;}
.completer-dropdown{width: 100% !important;left: 0;top: 45px; border: 1px solid lightblue !important;max-height: 250px;overflow: auto;}
.completer-row{width: 97% !important;}
.dispnone{display: none;}
.ng-gallery-content > span.info-text{bottom: 8px;}
.statusinactkit{font-size:12px;color:#e12222;font-style: italic;}
.contactlab{font-size: 12px;font-weight: bold;}