/**************Global Variables Start*****************/
:root {
    /* Font Family  */
    --font-family-base        : "Roboto", sans-serif;

    /* Neutral Colors  */
    --primary-bg-color        : #ffffff;
    --light-bg-color          : #F7F9FB;
    --base-bg-color           : #F3F5F9;
    --border-color            : #E5E7EB;
    --input-label-color       : #B1B3B7;
    --support-text-color      : #6F7071;
    --paragraph-color         : #3C3D3E;
    --headline-color          : #090A0B;
    --white-text              : #ffffff;

    --blue-color              : #376AF7;
    --orange-color            : #FFA800;
    --green-color             : #33A857;

    /* Primary Colors  */
    --primary-gold-color          : #DBAA32;
    --primary-navy-color          : #114A6E;
    --primary-green-color         : #33A857;

    /* Buttons */
  --btn-font-weight        : 700;
  --btn-border-radius-base : 6px;

  --btn-primary-color          : #fff;
  --btn-primary-bg             : #33A857;

  --btn-primary-bg-hover       : #5cb979;
  --btn-primary-bg-focus       : var(--btn-primary-bg);
  --btn-primary-border-focus   : var(--primary-navy-color);
  --btn-primary-bg-active      : #2b8848;


  --btn-secondary-color          : #fff;
  --btn-secondary-bg             : var(--primary-gold-color);

  --btn-secondary-bg-hover       : #FFA800; 
  --btn-secondary-bg-focus       : var(--btn-secondary-bg);
  --btn-secondary-border-focus   : var(--primary-navy-color);
  --btn-secondary-bg-active      : #FFA800;

  --btn-default-color      : #090A0B;
  --btn-default-bg         : #fff;
  --btn-default-border     : #ECECEC;

  --btn-padding-base       : 12px 20px; 
  --btn-font-size-lg       : 18px;
  --btn-padding-lg         : 16px 24px;
  --btn-padding-sm         : 8px 16px;

  --btn-height-base        : 48px;
  --btn-height-lg          : 56px;
  --btn-height-sm          : 40px;

  /* inputs */
  --input-height-base                : 48px;
  --input-height-lg                  : 56px;
  --input-height-sm                  : 40px; 
  --input-padding-horizontal-base    : 16px;
  --input-padding-vertical-base      : 12px;
  --input-padding-vertical-sm        : 8px;
  --input-padding-vertical-lg        : 16px;
  --input-placeholder-color          : #909294;
  --input-color                      : #090A0B;
  --input-border-color               : #909294;
  --input-border-radius-base         : 4px;
  --input-font-size-base             : 16px;
  --input-font-weight-base           : 400;
  --input-bg                         : #fff;
  --input-addon-bg                   : #fff; 
  --input-hover-border-color         : #3086FA;
  --input-disabled-bg                : #F8F9FB;

  /* sidebar */
  --sidebar-bg                       :var(--primary-navy-color);
  --sidebar-icon-color               :#88A3B7;
  --sidebar-text-color               :#ffffff;
  --sidebar-text-opacity             : 0.8;
  --sidebar-bg-submenu               : #052B46;
  --sidebar-bg-submenu-active        : #0A3757;

  /* box */
  --box-border-radius-base           : 4px;
  --box-body-padding                 : 20px;
  --box-heading-font-size            : 16px;

  /* list */
  --list-bg-active                   :#E7EDF1;
  --list-avatar-bg                   :#88A3B7;
  --list-bg-hover                    :#E7EDF1;
}
/**************Global Variables end*****************/
body{
    font-family: var(--font-family-base);
    background-color: var(--base-bg-color);
}
.pt-0{
  padding-top: 0px !important;
}
.pb-0{
  padding-bottom: 0px !important;
}
.blue-grey{
  background-color: var(--list-avatar-bg);
}
.avatar i{
  border-width: 1px;
}
.space-y-16{
  margin: 16px 0px;
}
.mt-32{
  margin-top: 32px;
}
.success {
  background-color: var(--primary-green-color);
}
.warning {
  background-color: var(--orange-color);
}
.text-primary{
  color: var(--primary-green-color) !important;
}
  /************inputs**************/
  .form-control{
    border-radius: var(--input-border-radius-base);
    border: 1px solid var(--input-border-color);
    color: var(--input-color);
    font-size: var(--input-font-size-base);
    font-weight: var(--input-font-weight-base);
    line-height: 20px;
    padding: 14px 16px;
    height: var(--input-height-base);
  }
  .form-control:focus{
    border-color: var(--input-hover-border-color);
  }  
  .form-control-sm:focus{
    border-color: var(--input-hover-border-color);
  }  
  .form-control::placeholder {
    color: var(--input-placeholder-color);
    opacity: 1; /* Firefox */
  }
  
  .form-control::-ms-input-placeholder { /* Edge 12 -18 */
    color: var(--input-placeholder-color);
  }
  .form-group {
    margin-bottom: 24px;
}
.input-group-addon{
  border-color: var(--input-border-color) !important;
}
.input-group-btn>.btn {
  border-color: var(--input-border-color) !important;
}

.ms-parent.form-control:has(> .ms-choice .open){
  border-color: var(--input-hover-border-color);
}
.ms-parent.form-control .ms-choice{
  height: 32px;
}
.ms-parent.form-control .ms-drop{
  margin-top: 1px;
}
.table-xs.table > tbody > tr > td .form-control{
  height: 30px !important;
}
.input-group.input-group-xs .input-group-btn .btn{
  line-height: 20px;
  border-radius: 0px 4px 4px 0px;
}
.form-control.c-select {
  background: white;
}
.form-control.c-select option {
  background: white;
}
.aside-filter-panel .filter-results-body {
  height: calc(100vh - 123px);
  overflow-y: auto;
  overflow-x: hidden;
}
.dark-select2 .select2-container--default .select2-selection--single{
  background-color: white;
}
.dark-select2-dropdown{
  background-color: white;
  color: #333;
}
.dark-select2-dropdown .select2-results .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary-navy-color);
}
.filter-results-body hr {
  border-top: 1px solid rgb(10 55 87);
}
.green{
  background-color: var(--primary-green-color);
}
  /************btn**************/
  .btn{
    border-radius: var(--btn-border-radius-base);
  }
  .btn-primary{
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    box-shadow: none;
    outline: none;
  }
  .btn-primary:hover{
    background: var(--btn-primary-bg-hover);
    border-color: var(--btn-primary-bg-hover);
    color: var(--btn-primary-color);
}
.btn-primary:focus {
  background: var(--btn-primary-bg-focus);
  border-color: var(--btn-primary-border-focus);
}
.btn-primary:active {
  background: var(--btn-primary-bg-active);
  border-color: var(--btn-primary-bg-active);
}
.btn-primary:active:focus, .btn-primary:active:hover{
  background: var(--btn-primary-bg-active);
  border-color: var(--btn-primary-bg-active);
}

.btn-secondary{
  background: var(--btn-secondary-bg);
  border-color: var(--btn-secondary-bg);
  box-shadow: none;
  outline: none;
  color: var(--btn-secondary-color);
}
.btn-secondary:hover{
  background: var(--btn-secondary-bg-hover);
  border-color: var(--btn-secondary-bg-hover);
  color: var(--btn-secondary-color);
}

.btn-secondary:focus {
  background: var(--btn-secondary-bg-focus);
  border-color: var(--btn-secondary-border-focus);
}
.btn-secondary:active {
  background: var(--btn-secondary-bg-active);
  border-color: var(--btn-secondary-bg-active);
}
.btn-secondary:active:focus, .btn-secondary:active:hover{
  background: var(--btn-secondary-bg-active);
  border-color: var(--btn-secondary-bg-active);
}

.btn-lg{
    font-size: 16px;
    padding: 12px 20px;
    letter-spacing: 0.5px;
    line-height: 24px;
    font-weight: 700;
}
.btn-line{
  background-color: transparent;
  border-color: #D8DADE;
}
.nav-inline .btn i{
  color: #7A7A7A;
}
 /************signin pages**************/
.sign-page{
  background: var(--base-bg-color);
}
.sign-box{
    width: 880px;
    border-radius: 8px;
    box-shadow: none;
    display: flex;
    padding: 0px;
    min-height: 562px;
    overflow: hidden;
    background-color: var(--primary-bg-color);
}
.sign-box .media{
    background-image: url(../images/login-img.png);
    background-position: center center;
    background-repeat: no-repeat;
    width: 320px;
    background-size: cover;
    position: relative;
}

.sign-box .media .logo-box{
    width: 64px;
}

.sign-box .media .brand{
    height: 64px;
    width: 64px;
}

.sign-box .media .color-overlay{
    background: linear-gradient(180deg, #114870 0%, rgba(17, 72, 112, 0.00) 100%);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sign-box  .form-block{
    padding: 80px 100px;
}

  .sign-box  .form-block .form-signin{
    width: 360px;
  }
.sign-box  .form-block h1{
    color: var(--headline-color);
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 48px;
}

.lockme .logo-wrapper{
  background-image: url(../images/login-img.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    border-radius: 4px 4px 0px 0px;
    overflow: hidden;
}
.lockme .logo-wrapper h3{
  margin: 0px;
  color: #fff;
}
.lockme .logo-wrapper .color-overlay {
  background: linear-gradient(180deg, #114870 0%, rgba(17, 72, 112, 0.30) 100%);
  min-height: 260px;
    display: flex;
    justify-content: center;
    align-items: center;
  padding:30px 20px;
}
.lockme .logo-wrapper .navbar-brand span{
  color: #fff;
}
.lockme .box{
  border-radius: 0px 0px 4px 4px;
}
.lockme p{
  color: var(--headline-color);
}

.navbar #close-nav-menu{
  height: 24px;
  background-color: #114870;
  border-radius: 12px 0px 0px 12px;
  color: #88A3B7;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 16px;
}
.navbar #close-nav-menu i{
  font-size: 18px;

  color: #88A3B7;
}
.list-top-navbar .nav-item > .nav-link .material-icons{
  vertical-align: middle;
}
 /************main pages**************/
 .navside .navbar-brand{
  display: block;
 }
 .navbar-brand > span{
  color: var(--white-text);
 }
.black .dk {
  background-color: var(--sidebar-bg);
}

.navside .nav-foot{
  background-color: var(--primary-navy-color);
}

.navside .nav-icon i {
  color: var(--sidebar-icon-color);
}
.navside a:hover > .nav-icon i, .navside a:focus > .nav-icon i, .navside .active > a > .nav-icon i{
  color: var(--primary-gold-color);
}
#aside .navside a:hover > .nav-icon svg, #aside .navside a:focus > .nav-icon svg, #aside .navside .active > a > .nav-icon svg{
  color: var(--primary-gold-color);
}
#aside .navside .nav-icon svg {
  fill: var(--sidebar-icon-color);
}

.folded span.footer-icon {
  border-color: var(--primary-navy-color);
  color: var(--sidebar-icon-color);
}
span.footer-icon{
  border-color: var(--primary-navy-color);
}

.nav-foot .link-b{
  border-color: var(--sidebar-icon-color);
}

.nav-foot .inline-icon{
  position: relative;
}

.nav-foot .inline-icon .ver{
  color:white;
  font-size:10px;
  text-align:left;
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 100%;
  letter-spacing: -0.5px;
}

.navside .nav-text {
  opacity: var(--sidebar-text-opacity);
  color: var(--sidebar-text-color);
}
.app .navside .nav-foot .txt{
  opacity: var(--sidebar-text-opacity);
  color: var(--sidebar-text-color);
}

.box-setting-list .dark {
  background: var(--sidebar-bg-submenu);
}

.box-setting-list .head-dark {
  background: var(--sidebar-bg-submenu);
}

.box-setting-list .setting-list .list-unstyled li.active a.list-group-item{
  background-color: var(--sidebar-bg-submenu-active);
}

.box-setting-list .setting-list .list-unstyled li a.list-group-item:hover, .box-setting-list .list li a.list-group-item:focus, .box-setting-list .list li a.list-group-item.hover {
  background-color: var(--sidebar-bg-submenu-active);
  border-left-color: var(--primary-gold-color);
}

#list .list-item.active{
  border-color: var(--primary-gold-color);
  background-color: var(--list-bg-active);
}
#list .list-item:hover {
  background: var(--list-bg-hover);
  border-color: var(--list-bg-hover);
}
.list-left > span.avatar{
  font-size: 14px;
  font-weight: 700;
}
.line-tabs .nav-tabs .nav-item .nav-link.active {
  border-bottom: 3px solid var(--primary-gold-color);
  font-weight: 600;
}
.line-tabs .nav-tabs .nav-item .nav-link:hover, .line-tabs .nav-tabs .nav-item .nav-link:focus {
  border-bottom: 3px solid var(--primary-gold-color);
  
}
.line-tabs .nav-tabs .nav-item.active .nav-link {
  border-bottom: 3px solid var(--primary-gold-color);
  font-weight: 600;
}
.check-header{
  background-color: #052B46;
}
.check-header .md-check input[type="radio"]:checked + i:after{
  background-color: var(--primary-gold-color);
}
.ui-switch.text-switch i:before {
  background-color: var(--primary-gold-color);
}
 /************main box**************/
.box{
  border-radius: var(--box-border-radius-base);
}
.box .table-box-body{
  padding: var(--box-body-padding);

}
.box .box-header{
  padding: var(--box-body-padding);
}
.box .box-header .s-heading{
  font-size: var(--box-heading-font-size);
  color: var(--headline-color);
}     
.box .box-header .form-control{
  border-color: #D8DADE;
}
.box .box-header .form-control:focus{
  border-color: var(--input-hover-border-color);
}  
.box .box-header .form-control .ms-choice > span.placeholder {
  font-size: 14px;
}

.t-card .progress{
  display: flex;
  position: relative;
}

.project-info .title{
  font-size: 32px;
  font-weight: 700;
  color: var(--headline-color);
  margin-bottom: 8px;
}

.project-info p{
  color: var(--paragraph-color);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px; 
}
.project-status{
  display: flex;
}

.project-status .status-icon{
  display: flex;
  color: #7A7A7A;
  width: 16px;
  margin-right: 8px;
  padding-top: 2px;
}
.project-status .status-icon .material-icons{
  color: #7A7A7A;
}
.project-status .status-info{
  flex-grow: 1px;
}
.project-status .status-info span{
  color: #3C3D3E;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
.project-status .status-info p{
  color: var(--headline-color);font-size: 16px;line-height: 24px;
}
.project-status .status-info p a{
  color: var(--headline-color);
}
.project-status .status-info p span{
  font-size: 16px;
  line-height: 24px;
}
.t-card .card-title{
  color: #686A6B;
  font-size: 12px;
    letter-spacing: normal;
}
.t-card .list-inline>li .text-black{
  color: var(--headline-color);
  font-weight: 400;
  font-size: 16px;
}

.t-card .text-info{
  color: var(--blue-color) !important;
}
.t-card .text-warning{
  color: var(--orange-color) !important;
}
.t-card .text-success{
  color: var(--green-color) !important;
}
.t-card .success {
  background-color: var(--green-color) !important;
}
.t-card .warning {
  background-color: var(--orange-color) !important;
}
.t-card .info {
  background-color: var(--blue-color) !important;
}

.progress-wrap{
  display: flex;
  align-items: center;
}
.progress-wrap .progress-label{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.48px;
  margin-right: 4px;
  min-width: 32px;
  text-align: right;
  line-height: 14px;
}
.t-card .progress{
  border-radius: 8px;
  flex-grow: 1;
}

.ranges li.active{
  background-color: var(--primary-gold-color);
  border-color: var(--primary-gold-color);
}
.ranges li:hover{
  background-color: var(--orange-color);
  border-color: var(--orange-color);
}
.btn-success{
  background-color: var(--primary-green-color);
  border-color: var(--primary-green-color);
}
.btn-success:hover{
  background: var(--btn-primary-bg-hover);
    border-color: var(--btn-primary-bg-hover);
    color: var(--btn-primary-color);
}
.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: var(--primary-gold-color);
}

.modal .form-control-label{
  padding-top: 0px;
}

/*****************/

.aside-filter-panel{
  background: var(--sidebar-bg-submenu);
}
.aside-filter-panel .filter-results-header {
  background-color: var(--sidebar-bg-submenu-active);
  width: 100%;
  padding: 19px 15px 19px 15px;
  border-bottom: 1px solid var(--sidebar-bg-submenu);
  position: relative;
}
.aside-filter-panel .filter-results-header h5 {
  margin-bottom: 0px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2rem;
  color: rgba(225, 235, 245, 0.87);
}
.aside-filter-panel .filter-results-header .md-fab{
  background: var(--sidebar-bg-submenu);
  color: rgb(255 255 255 / 50%);
}
.aside-filter-panel .filter-results-header .md-fab {
  position: absolute;
  right: 12px;
  top: 12px;
  height: 30px;
  width: 30px;
  line-height: 30px;
}
.aside-filter-panel  .filter-results-header .md-fab i {
  font-size: 19px;
  vertical-align: middle;
}
.aside-filter-panel .filter-footer{
  background-color: var(--sidebar-bg-submenu-active);
}
.filter-results-body h6{
  color: rgba(255, 255, 255, 1);
}
#filters .inline-checkbox label{
  color: rgba(225, 235, 245, 0.87);
}

/******** step form************/
.nav-tabs.wizard-nav .nav-item .nav-link.active{
  background-color: var(--primary-green-color) !important;
}
.nav-tabs.wizard-nav li > .nav-link.active:after {
  border-left-color: var(--primary-green-color);
}

.note-card .card-header{
  background-color: var(--primary-navy-color);
}

.label-warning {
  background-color: var(--primary-gold-color);
}
.lt-bg-assign{
  background-color: var(--primary-gold-color) !important;
}
.lt-bg-reject{
  background-color: #D52C15 !important;
}
.lt-bg-accept{
  background-color: var(--primary-navy-color) !important;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon{
  background-color: var(--primary-green-color);
}
.mile-box h5 span{
  color: var(--primary-green-color);
}
.wizard-nav li > a.active {
  background-color: var(--primary-green-color);
  border-color: var(--primary-green-color);
}
.wizard-nav li > a:hover{
  background-color: var(--primary-green-color);
  border-color: var(--primary-green-color);
}
.nav-tabs.wizard-nav .nav-item .nav-link:hover{
  background-color: var(--primary-green-color);
}

.select2-container--default.select2-container--open span.select2-selection.select2-selection--single{
  border-color: var(--input-hover-border-color);
}
span.select2-selection.select2-selection--single{
  border-color: var(--input-border-color);
}
.custom-select {
  border-color: var(--input-border-color);
}
.dropdown.open .btn{
  border:1px solid var(--input-hover-border-color);
}
.drop-btn.open .btn{
  border:1px solid var(--input-hover-border-color);
}

/******************************************responsive media query ***********************************************/

@media (max-width: 576px) {
  .sign-box{
    width: 100%;
    margin:0px 15px;
    display: block;
    min-height: auto;
  }
  .sign-box .media{
    display: none;
  }
  .sign-box .form-block {
    padding: 20px;
}
.sign-box .form-block .form-signin {
  width: 100%;
}
}