/* CUSTOM CSS */
/* !NOTE: ONLY OVERRIDE PREDEFINED CSS UPON SPECIAL CIRCUMSTANCES */
@font-face {
    font-family: custom-font;
    src: url(../assets/font/Roboto-Regular.ttf);
}
body {
    font-family: custom-font;
}

input[type=file]{
    padding: 0.20rem !important;
    overflow: hidden;
}

.image-holder {
    height:200px;
    width:100%;
    border: 1px solid rgb(206, 212, 218);
    object-fit: cover;
}
.img-holder {
    height:200px;
    width:200px;
    border: 1px solid rgb(206, 212, 218);
    object-fit: cover;
}
.plan-img {
    height:100px;
    width:100%;
    border: 1px solid rgb(206, 212, 218);
    object-fit: cover;
}
.logged-user {
    margin: 7px 10px;
}

#sidebar-user-img {
    height:35px;
    width: 35px;
}

.filter-dropdown {
    width:100%;
}

.system-image {
    height: 70px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

/* .nav-item {
    padding: 5px 0;
} */
.wrapper, .content-wrapper{
    background-color: #2e3338;
    color: #fff !important;
}
.card-body {
    background-color: #343a40;
}
.table-bordered, .table-bordered tr, .table-bordered td, .table-bordered th {
    border: 1px solid #2e3338;
}
/* CUSTOM BACKGROUND COLORS */
.bg-custom-primary {
    background-color: #0c2c53;
}
.bg-custom-secondary {
    background-color: #127940;
}
.bg-custom-accent {
    background-color: #17cc17;
}
.bg-custom-gray {
    background-color: #343a40;
    border: 0;
}
.bg-custom-gray-dark {
    background-color: #2e3338;
    border: 0;
}

input[type=text] {
    background-color: #ccc;
    border: 1px solid #2e3338;
}

h1 {
    font-size: 2.5em !important;
}

.content-header{
    border-bottom: 5px solid #343a40;
}
.add-btn {
    margin: 5px 15px;
}

label{
    font-weight: 400 !important;
}

/* LOGIN */

.login-box {
    width: 400px;
}

#login-form .input-group-text {
    border: 1px solid #2e3338;
}

/* SELECT2 */

.select2-selection__rendered {
    line-height: 35px !important;
  }
  
.select2-selection {
    height: 37px !important;
}

/* FORM */

.form-extra-label {
    color: #5c9ce0;
    font-size: small;
}

/* IMAGE PREVIEW */

/* Style the Image Used to Trigger the Modal */
  #image_holder, .img-holder, #add_image_holder {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
  }
  
  #image_holder:hover, .img-holder:hover, #add_image_holder:hover {opacity: 0.7;}
  
  /* The Modal (background) */
  #imagemodal,#ca-modal, #noa-modal,#ntp-modal,#plan-modal,#req-img-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    padding-top: 35px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
  }
  
  /* Modal Content (Image) */
  #imagemodal .modal-content, #ca-modal .modal-content, #noa-modal .modal-content, #ntp-modal .modal-content, #plan-modal .modal-content, #req-img-modal .modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
  }
  
  /* Add Animation - Zoom in the Modal */
  .modal-content, #caption {
    animation-name: zoom;
    animation-duration: 0.6s;
  }
  
  /* The Close Button */
  .close-prv {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }
  
  .close-prv:hover,
  .close-prv:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
  }

  /* projects -- tab link color fix */

  #custom-content-below-tab li a {
      color: #fff;
  }
  #custom-content-below-tab li a.active {
    color: #2e3338;
}
  
  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 700px){
    .modal-content {
      width: 100%;
    }
  }

  .custom-nav-tabs, .custom-nav-tabs:hover  {
      color: #fff;
  }

/* Datepicker selected day: AdminLTE accent-primary paints the number blue on a blue cell */
.ui-datepicker td a.ui-state-active,
.ui-datepicker td a.ui-state-active.ui-state-hover,
.accent-primary .ui-datepicker a.ui-state-active,
.accent-primary .ui-datepicker a.ui-state-active:hover {
    color: #ffffff !important;
    background: #007bff !important;
    border-color: #0056b3;
}