@import 'menu-layout.css';
@import 'menu-color.css';
/*--Web-Custom-Fonts--*/
/*Lato Light bold regular*/
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(fonts/S6u9w4BMUTPHh7USSwaPGR_p.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(fonts/S6u9w4BMUTPHh7USSwiPGQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(fonts/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(fonts/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(fonts/S6u9w4BMUTPHh6UVSwaPGR_p.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(fonts/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}




/*---------*/
*{font-family: 'Lato',sans-serif;}

body{
    background-color: #E8EDF2;
    color: #484848;
}
/*---------------*/
.shadow-lg{
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
.shadow-md{
  -webkit-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.15);
}
.corner-rad-df{
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
.corner-rad-sm{
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

/*---------------*/

.vendor{
  display: block;
  width:100%;
  height:24px;
  font-size:11px;
  background-color: #2C3E50;
  color:#95A5A6;
  line-height: 2.0;
}
.vendor .vendor-title{
  float: left;
  height: 100%;
  padding:0 10px;
  border-left: 5px solid #18BC9C;
}
.vendor .app-info{
  float:right;
  padding:0 16px;
}

.main-header{
  display: block;
  width:100%;
  height:42px;
  background-color: #fff;
}
.main-header .app-title{
  float:left;
  height:100%;
  padding: 0 16px;
  line-height: 2.75;
  text-transform: uppercase;
  letter-spacing: 1pt;
  font-weight: 400;
}
.main-header .user-info{
  float:right;
  padding: 8px 10px;
  height:100%;
}

.content-area{
  margin-top:16px;
  float: left;
  display: block;
  width: 100%;
  height: calc(100% - 70px);
  overflow: auto;
}

.centralize{
  margin: auto;
  width: 400px;
  height: calc(100% - 24px);
}

.copyrights{
  font-size: 70%;
  text-transform: capitalize;
  letter-spacing: 1px;
}



/*-----*/

.blank-card{
  background-color: #fff;
  color:#484848;
  margin-bottom: 16px;
}
.blank-card-header{
  padding: 8px;
  font-size: 14px;
  border-bottom:1px solid #DFDFDF;
  letter-spacing: 1px;
  letter-spacing: 0.5px;
}

.bottom-divider{
  padding: 8px 0;
  border-bottom:1px solid #DFDFDF;
}

.blank-card-header-filled{
  padding: 8px;
  font-size: 14px;
  border-bottom:1px solid #18BC9C;
  background-color: #18BC9C;
  color: #fff;
  letter-spacing: 0.5px;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  -ms-border-radius: 3px 3px 0 0;
  -o-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
}

.blank-card-header-filled .text-muted{
  color: rgba(255,255,255,0.75);
}

.blank-card-body{
  padding: 8px;
}

.blank-card-body-full{
  padding: 8px 0px;
}

.blank-card-footer{
  padding: 8px;
  border-top:1px solid #DFDFDF;
}
.blank-card-footer-inline{
  padding: 0 8px 8px 8px;
  border-bottom:1px solid #DFDFDF;
}

.gap-generator{
  padding:20px 0;
}

.custom-logo{
  display: inline-block;
  margin: 10% 0 10px 0;
}

.form-lg{width:100%; padding: 10px 0;}
.form-md{width:75%; padding: 10px 0;}
.form-sm{width:50%; padding: 10px 0;}
.min-width-sm{ min-width: auto;}
.min-width-lg{ min-width: auto;}




/*----Bootstrap Overrides---*/
.nav-tabs li a,
.table{
  font-size: 82%;
}

.table thead tr th{
  border-bottom:1px solid #B9C4C4 /*#18BC9C*/;
  padding: 4px;
}
.btn{
  border-width:1px;
}
.btn-sm{
  font-size: 11px;
}

.btn-sm,
.btn-group-sm > .btn {
  padding: 4px 9px;
}

.btn-xs{
  font-size: 11px;
}

.btn-outline-secondary {
    margin-top:0px;
    color: #2C3E50;
    background-color: transparent;
    background-image: none;
    border-color: #DFDFDF;
}

.btn-outline-secondary:focus,
.btn-outline-secondary:hover {
    color: #2C3E50;
    background-color: #DFDFDF;
    border-color: #DFDFDF;
}

.btn-outline-secondary:active {
  color: #fff;
  background-color: #18BC9C;
  border-color: #18BC9C;
}

.btn-outline-secondary.btn-active{
  color: #fff;
  background-color: #18BC9C;
  border-color: #18BC9C;
}
select.input-sm,
.input-sm {
    height: 28px;
    padding: 4px 9px;
    font-size: 11px;
    line-height: 1.5;
    border-radius: 3px;
}

.input-group-sm > .form-control{
  font-size: 11px;
  line-height: 1.5;
}

.dropdown-menu{
  font-size:12px;
}

.dropdown-menu > li > a {
    padding: 6px 20px;
}

label{
  font-size: 80%;
  font-weight: normal;
  line-height: 2.15;
}

.form-control, input {
    border-width: 1px;
}

form  .row{
  margin-bottom:10px;
}

.dynamic-left{
  text-align: left;
}

.popover{
  font-size:80%;
}
.popover-title{
  font-size: 13px;
}

.no-bullets{
  list-style-type: none;
  font-size: 13px;
  padding: 0 10px;
}

.breadcrumb{
  font-size: 12px;
}

.pagination{
  margin:10px 0;
}

.col-section{
  border-bottom: 1px solid #18BC9C !important;
}

.row-active{
  background-color: rgba(44, 62, 80, 0.2);
}
.form-group{
  margin-bottom:0;
}


.help-block{
  margin-top: 0;
  margin-bottom: 0;
  font-size:11px;
}
.with-errors > .list-unstyled{
  color:#fff;
  font-size:10px;
}

.with-errors > .list-unstyled > li{
  display: inline-block;
  background-color: #d9534F;
  padding: 10px;
  border-radius: 4px;
  margin: 0 2px;
}

.has-error .form-control, .has-error .form-control:focus {
    border: 1px solid #2C3E50;
}
.dx-textbox .dx-overlay-wrapper{/*Important to create space bottom in form*/
color: #484848;
font-weight: normal;
font-size: 12px;
font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, Verdana, sans-serif;
line-height: 1.33334;
margin-bottom: 9px;
display: block;
float: left;
position: relative !important;}

/* phone Devices with 5inches plus  */
@media (min-width: 412px) and (max-width: 1023px){
  .form-lg{width:100%; padding: 10px 0;}
  .form-md{width:100%; padding: 10px 0;}
  .form-sm{width:100%; padding: 10px 0;}
  .min-width-sm{ min-width: 100px;}
  .min-width-lg{ min-width: 200px;}

  .nav-tabs li a,
  .table{
    font-size: 80%;
  }

  label{
    font-size: 85%;
    font-weight: bold;
    line-height: 2.15;
  }

  .btn-outline-secondary {
      margin-top:8px;
      color: #2C3E50;
      background-color: transparent;
      background-image: none;
      border-color: #DFDFDF;
  }

  .btn-space{
    margin-top:8px;
  }

  form .row{
    margin-bottom:0;
  }
  .dynamic-left{
    text-align: right;
  }

  .centralize{
    margin: auto;
    width: 375px;
    height: calc(100% - 24px);
  }
  .custom-logo{
    display: inline-block;
    margin: 1% 0 5px 0;
  }
  .input-separator{
    margin-bottom: 15px;
  }

}
/* phone Devices (minimum 5inches) to (maximum 5.2inches)  */
@media (min-width: 360px) and (max-width: 411px){
  .form-lg{width:100%; padding: 10px 0;}
  .form-md{width:100%; padding: 10px 0;}
  .form-sm{width:100%; padding: 10px 0;}

  .btn-outline-secondary {
      margin-top:8px;
      color: #2C3E50;
      background-color: transparent;
      background-image: none;
      border-color: #DFDFDF;
  }
  .btn-space{
    margin-top:8px;
  }

  .centralize{
    margin: auto;
    width: 340px;
    height: calc(100% - 24px);
  }
  .custom-logo{
    display: inline-block;
    margin: 1% 0 5px 0;
  }
  .vendor{
    display:none;
  }
  .input-separator{
    margin-bottom: 15px;
  }
}
/* phone Devices less then 5inches  */
@media (min-width: 240px) and (max-width: 359px){
  .vendor,
  .main-header,
  .copyrights,
  .custom-logo,
  .blank-card{display:none;}
}

/*----------------------------------------------------------------------------*/

.menu-frame{
  display: block;
  margin: auto;
  width:100%;
  height: calc(100% - 24px);
}

.menu-centralize{
  display: block;
  margin: 10px auto 0px auto;
  width:60%;
}

.ltrLanguages{
  direction: ltr;
  display: block;
  padding: 0 0 10px 0;
  border-bottom: 1px solid #e5e5e5;
}
.rtlLanguages{
  direction: rtl;
  display: block;
  padding: 0 0 10px 0;
}

.multi-lang-header{
  color: #18BC9C;
  border-bottom: 1px solid #18BC9C;
  padding: 5px;
  margin:10px 0 0 0;
}

.lang-selection{
  float: right;
  height: 100%;
  padding: 6px 0 6px 0;
  width:100px;
}
.app-title.parallel{
  padding-right: 0;
}

.setSVGLogo{
  float: left;
  height: 26px;
  margin-top: 8px;
}
.
.custom-item {
  position: relative;
  min-height: 30px;
}

.custom-item .product-name  {
  display: inline-block;
  padding-left: 7px;
  text-indent: 0;
  line-height: 30px;
  font-size: 15px;
  width: 100%;
}