/*===================== Admin Template General=================== */
#main-container-fluid-admin{
    position: relative !important;
    overflow-x: hidden;
}
#container-fluid-welcome{
    background-color: #6C757D;
    position: relative !important;
    overflow-x: hidden;
    padding: 7px;
    font-size: 15px;

}

/* ======================= FD ADMIN TEMPLATE CSS =================== */
.fd-body-admin{
   background-color: #E9ECEF !important; 

  
}

/*====================Admin Template Navigation================================ */
#main-navbar-admin{
    background-color: #111111;

}
.nav-header{
  font-size: 15px;
  color: white;
  padding-top: 5px;
  padding-bottom: 5px;
}
.nav-menu{
  font-size: 15px !important;
  text-decoration: none !important;
  display: block;
  color: white !important;
  padding-top: 3px;
  padding-bottom: 3px;
}
.menu-highlight{
    /* background-color: #0A2E57;*/
    background-color: #0A2E57;
    color:white !important;
}

.menu-header{
 padding: 5px !important;
 color: white !important; 
 pointer-events: none !important;
 font-size: 15px !important;

}

.sidenav{
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  /*background-color: #687179;*/
  background-color:  #3A4651;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 17px;
}
.sidenav a{
  padding: 2px 8px 8px 2px;
  text-decoration: none;
  font-size: 14px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
.sidenav a:hover{
  color: white !important;
  background-color: black !important;
  -webkit-transform: scale(1.1);

}
.sidenav .closebtn{
  position: absolute;
  top: 0;
  right: 15px;
  font-size: 36px;
  margin-left: 50px;
  color:white !important
}
@media screen and (max-height: 450px){
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}


/* ===================== FD CARD LOGIN TEMPLATE ============================== */
.fd-body-login{
 background-image: url("img/light_alu.png") !important; 
  padding-top: 2.5% !important; 
  padding-bottom: 2.5% !important; 
}
.fd-card-login{
  margin-left: 15% !important;
  margin-right: 15% !important;
}

.fd-card-login2{
  margin-left: 5% !important;
  margin-right: 5% !important;
}

.fd-card-form{
  font-size: 12px;
}



/*===================================== GENERAL FD ================================================== */

/* ===================== FD CARD ============================== */
.fd-card{
 margin-top: 10px !important;
}
.fd-card .card-headers{
  size: 10px !important;
  padding: 5px !important;
  font-size: 15px !important; 
  background-color: #E9ECEF !important;
  /*
  background-color: #E9ECEF !important;
  background-color:#17A2B8 !important; 
  color: #6C757D !important;
  */
  
}
.fd-card .card-body{
 overflow: auto !important;
}
.fd-card .card-footer{
 padding: 10px !important;
}


/* ===================== FD CARD 2 ============================== */
.fd-card-2{
 margin-top: 10px !important;
}
.fd-card-2 .card-header{
  size: 10px !important;
  padding: 5px !important;
  font-size: 15px !important; 
  color:#727271 !important;
  background-color: #eee !important;
  /*
  background-color: #E9ECEF !important;
  background-color:#17A2B8 !important; 
  color: #6C757D !important;
  */
  
}
.fd-card-2 .card-body{
 overflow: auto !important;
}
.fd-card-2 .card-footer{
 padding: 10px !important;
}


/* ===================== FD TABLE ============================== */
.fd-table th{
  background-color: #E9ECEF;
  padding: 6px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  color: #3A4651 !important;
}

.fd-tables th{
  background-color: #E9ECEF;
  padding: 6px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  color: #3A4651 !important;
}

.fd-table th a{
  color:#687179;
}
.fd-table td{
  padding: 7px !important;
  font-size: 14px;
}
.fd-table .td-center, .fd-table .th-center{
    text-align: center !important;
}
.fd-table .link-action{
  margin-right: 2px !important;
  margin-left: 2px !important;
  font-size: 12px !important;
  color:#17A2B8 !important;
}



/* ===================== FD TABLE V2 ============================== */

.fd-table-payslipform th a{
  color:#687179;
}
.fd-table-payslipform td{
  padding: 2px !important;
  font-size: 12px;
}

/* =================================================================== */


.fd-card .result-display-no{
  text-align: center;
  background-color: #0A2E57 !important;
  margin: 2px !important;
  padding: 4px !important;
  font-size: 12px !important;
  width: 250px !important;
  border-radius: 3px;
  color:white !important;
}


/* ===================== FD INPUT TEXT ============================== */
.fd-input-text-small{
  height: 25px !important;
  font-size: 11px !important;
}
.fd-input-text-regular{
  height: 30px !important;
  font-size: 13px !important;
  margin: 2px !important;
}

/* ===================== FD BUTTON ============================== */
.fd-btn-regular{
  font-size: 13px !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin: 2px !important;
}
.fd-btn-small{
  font-size: 10px !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin: 2px !important;

}

.btn-extrasmall {
    padding: 0px 5px;
    font-size: 10px;
    border-radius: 2px;
    width: 100%;
}

.btn-smaller{
   padding: 5px 5px;
  font-size: 11px !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin: 0px !important;

}


/* ===================== FD BREADCRUMB ============================== */
.fd-breadcrumb{
    margin-top: 10px !important;
    font-size: 13px !important;
    padding: 0px !important;
}

.fd-breadcrumb-2{
    margin-top: 10px !important;
    font-size: 11px !important;
    padding: 0px !important;
}

/* ===================== FD HR ============================== */
fd-hr{
  margin-top: 2px;
  margin-bottom: 2px;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* ===================== FD POPUP MODAL ============================== */
.fd-modal-popup .modal-header{
    padding: 10px;
    font-size: 15px !important;
}
.fd-modal-popup .modal-title {
    font-size: 15px !important;
}
.fd-modal-popup .modal-body {
   padding: 10px;

}
.fd-modal-popup .modal-footer {
   padding: 8px;
}
.fd-modal-popup .modal-footer button{
  font-size: 12px !important;
  text-decoration: none !important;
  display: inline-block !important;
}
.fd-modal-popup .close{
  transition: all .2s ease-in-out; 
  text-decoration: none;
}
.fd-modal-popup .close:hover, .fd-modal-popup.close:active, .fd-modal-popup.close:focus{
    transform: scale(1.4);
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* ===================== FD POPUP MODAL FORM ============================== */
.fd-modal-popup-form .modal-content {
   -webkit-border-radius: 10px !important;
   -moz-border-radius: 10px !important;
   border-radius: 10px !important;
}

.fd-modal-popup-form .modal-body {
   /*overflow: auto !important;*/
  
}
.fd-modal-popup-form td{
  padding: 5px;
}

.fd-modal-popup-form-display-success{
  text-align: center !important;
  border-radius: 3px;
  padding: 20px !important
  font-size: 15px !important;
  background-color: #D4EDDA !important;
  color: #155724 !important
}
.fd-modal-popup-form-display-error{
  text-align: center !important;
  border-radius: 3px;
  font-size: 15px !important;
  background-color: #F8D7DA !important;
  color: #721C24 !important
}
.fd-modal-popup-form .modal-header{
  background-color: #0A2E57 !important;
  padding: 10px !important;
}
.fd-modal-popup-form .modal-title {
  color: white !important;
  font-size: 16px !important;
}

.fd-modal-popup-form select{
 font-size: 14px !important;
 margin: 2px !important;
 white-space: nowrap !important; 
}

.fd-modal-popup-form textarea{
 font-size: 14px !important;
 margin: 2px !important;
}

.fd-modal-popup-form .modal-footer button{
  font-size: 14px !important;
  text-decoration: none !important;
  display: inline-block !important;
  padding: 10px !important;

}
.fd-modal-popup-form .close{
  color: white !important;
  transition: all .2s ease-in-out; 
  text-decoration: none;
  font-size: 25px !important;
}
.fd-modal-popup-form button {
  font-size: 12px !important;
}
.fd-modal-popup-form label {
  font-size: 14px !important;
  color: #6C757D !important;
}
.fd-modal-popup-form input {
  font-size: 14px !important;
}


.fd-modal-popup-form .close:hover, .fd-modal-popup-form.close:active, .fd-modal-popup-form.close:focus{
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.fd-modal-popup-form{
    border-radius: 5px !important;
}



/* ===================== FD FORM SEARCH ============================== */
.fd-form-search select{
 margin: 2px !important;
}
.fd-form-search label{
 font-size: 12px !important;
 margin: 2px !important;
}
.fd-form-search button{
  font-size: 10px !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin: 2px !important;
}
.fd-form-search .input-text{
  height: 30px !important;
  font-size: 13px !important;
  margin: 2px !important;
}
/* ===================== FD FORM PAGINATION ============================== */
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* ========================SCROLL BARS======================================*/
/* width */
::-webkit-scrollbar {
  width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
  /*box-shadow: inset 0 0 5px grey; 
  border-radius: 0px;*/
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #6C757D; 

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
}

/* ============================ OTHERS =========================*/

.tr-resource-hidden{
  display: none !important
}

.tr-resource-block{
  display: block !important
}

.role-menu-header-link{
  text-decoration: none !important;
  color:#17A2B8 !important;
}

.role-advance-link{
  text-decoration: none !important;
  color:#17A2B8 !important;
}

.shiftmenu{
  margin-left: 5px !important;
}
.shiftmenu a{
  text-decoration: none !important;
  font-size: 12px !important;
}

.required{
    font-size: 18px;
    font-family: sans-serif;
    color: red;
    font-weight: bolder;
}

.alignleft {
	float: left;
        float: top;
       
}
.alignright {
	float: right;
        float: top;
}

/* Accordion */
.accord {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 5px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accord:hover {
  background-color: #ccc; 
}

.accord-panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

/* overwrite and addons*/

.max-width{
    width: 100% !important;
}

.bg-info{
    background-color: #0A2E57 !important;
}

.btn-info{
    background-color: #0A2E57 !important;
    border-color: #0A2E57 !important; 
}

.btn-yellow{
    background-color: yellow !important;
    border-color: #0A2E57 !important; 
}

input[type=text]:focus, input[type=password]:focus, select:focus, textarea:focus, input[type=button]:focus, input[type=button]:active {
  box-shadow: 0px 0px 15px rgb(120, 120, 120) !important;
  border: 1px solid rgb(120, 120, 120)!important;
  outline: none !important;
}

/* counter */
.counter-box {
    display: block;
    background: #f6f6f6;
    padding: 20px 10px 20px;
    text-align: center;
    border-radius: 10px;
}

.counter-box p {
    margin: 5px 0 0;
    padding: 0;
    color: #909090;
    font-size: 15px;
    font-weight: 500;
}

.counter-box i {
    font-size: 30px;
    margin: 0 0 15px;
    color: #d2d2d2
}

.counter {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #666;
    line-height: 28px
}

.counter-box.color-success {
  /*background: #3acf87;*/
  background:  #28A745;
}

.counter-box.color-success p,
.counter-box.color-success i,
.counter-box.color-success .counter {
    color: #fff
}

.counter-box.color-warning {
    background: #FFA349;
}

.counter-box.color-warning p,
.counter-box.color-warning i,
.counter-box.color-warning .counter {
    color: #fff
}

.counter-box.color-primary {
    background: #007BFF;
}

.counter-box.color-primary p,
.counter-box.color-primary i,
.counter-box.color-primary .counter {
    color: #fff
}

.counter-box.color-danger {
    background: #DC3545;
}

.counter-box.color-danger p,
.counter-box.color-danger i,
.counter-box.color-danger .counter {
    color: #fff
}

/* notification */
.notification {
  color: white;
  text-decoration: none;
  padding: 4px 7px;
  position: relative;
  display: inline-block;
  border-radius: 100px;
}

.notification:hover {

  -webkit-transform: scale(1.3);
}

.notification .badge {
  position: absolute;
  top: -5px;
  right: -5px;
  padding: 2px 4px;
  border-radius: 50%;
  background: red;
  color: white;
}

/* Icon Design*/
.icon {
  color: white;
  text-decoration: none;
  padding: 2px 5px;
  position: relative;
  display: inline-block;
  font-size: 15px;
  border-radius: 50px;
}

.text-darkorange{
    color: #856404 !important;
}

.text-purple{
   color: #711DAD !important;
}

.bg-lightorange{
    background-color: #FFF3CD !important;
}

.bg-orange{
    background-color: #FFA349 !important;
}

.bg-green{
    background-color: #28A745 !important;
}

.bg-lightgreen{
    background-color: #0A2E57 !important;
}

.bg-monitoring{
    background-color: #88D4A4 !important;
}


.bg-darkgreen{
    background-color: #037B38 !important;
}

.bg-blue{
    background-color: #007BFF !important;
}

.bg-lightblue{
    background-color: #1EC8DB !important;
}

.bg-purple{
    background-color: #711DAD !important;
}

.bg-lightpurple{
    background-color: #C5BDDC !important;
}

.bg-red{
    background-color: #DC3545 !important;
}

.bg-darkyellow{
    background-color: #91910d !important;
}

.bg-yellow{
   /* background-color: #f2f29f !important;*/
   background-color: #eaea0e !important;
}

.bg-brown{
    background-color: #936745 !important;
}

.bg-lightbrown{
    background-color: #dbb920 !important;
}

.bg-darkgray{
    background-color: #3A4651 !important;
}

.bg-grey{
    background-color: #6C757D !important;
}

.bg-acmyellow{
    background-color: #EFF8D6 !important;
}

.bg-offwhite{
    background-color: #FCFCFC !important;
}

.bg-offwhite-2{
    background-color: #FDFDFD !important;
}

.bg-offwhite-3{
    background-color: #F7F7F7 !important;
}

.no-hover{
    pointer-events: none !important;
}

.no-link{
    text-decoration: none !important;
}

.link:hover{
    text-decoration: none !important;
    font-weight: bold;
}

.pop-effect:hover{
  -webkit-transform: scale(1.1);
}

tr:hover {
    background-color: #F7F7F7 !important;
}

.underline{
      text-decoration: underline;
}

.put-border-1{
    border:  #E9ECEF solid thin !important;
}

.embossed-dark{
       box-shadow: 0 0 10px 2px rgba(0,0,0,.20);
}

.embossed-light{
       box-shadow: 0 0 10px 1px rgba(0,0,0,.10);
}
.breadcrumb{
    background-color:white !important;
    color: white !important;
}

.curve{
   border-radius: 5px !important;
}

.font-large-2{
    font-size: 40px !important;
}

/* ----------- Add ons ----------- */

.headcol {
  position: absolute;
  width: 7em;
  left: 0;
  top: auto;
  border-top-width: 1px;
  /*only relevant for first row*/
  /*compensate for top border*/
}


.divheadcol {
  overflow-x: scroll;
  margin-left: 5em;
  overflow-y: visible;
  padding: 0;
}


/* Switch */
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 16px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 15px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Currency  */
.currency-wrap{
    position:relative;
}

.currency-code{
    position:absolute;
    left:8px;
    top:5px;
}

.currency-code-2{
    position:absolute;
    left:4px;
    top:5px;
    color: gray !important;
}

.text-currency{
    padding:10px 14px;
    border:solid 1px #ccc;
    border-radius:5px;
}



/* override */
table .form-control{
    font-size:15px !important;
    height: 20px !important;
}

 .ui-timepicker-container {
      z-index: 3500 !important;
 }