@media (min-width: 768px) {
  .modal-xl {
    width: 90%;
   max-width:1200px;
  }
}

/*#modal-container .input-group input{
  height: 40px;
}*/

a {
  cursor: pointer;
}

input[type="file"]#picture-upload {
    display: none;
}
.picture-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

.profile-user-img {
    margin: 0 auto;
    width: 80%;
    padding: 3px;
    border: 3px solid #adb5bd;
}

.sortable-placeholder {
  background-color: #f3f3f3;
  height: 200px; 
  width: 300px;
  border:dashed 1px gray;
}
.sortable-row-placeholder {
  background-color: #f3f3f3;
  height: 100px; 
  width: 100%;
  border:dashed 1px gray;
  margin-top: 5px;
}

.nav-sidebar > .nav-item > .nav-link > .nav-icon {
  font-size: 1.0rem !important;
}


.nav-sidebar .nav-treeview > .nav-item > .nav-link > .nav-icon {
  font-size: 0.9rem !important;
}

body.login-page {
  background: url("/img/background.jpg");
  background-size: cover;
}

body.login-page .card {
  opacity: 0.94;
}

.heat-box {
  text-transform: uppercase;
}

.heat-container-list {
  display: flex;
  width: 100%;
}

.heat-container-list .heat-box {
  flex: 1;
  text-align: center;
  height: 10px;
  margin: 0 2px;
}

.heat-container-list .heat-box:first-child {
  margin-left: 0;
}

.heat-container-list .heat-box:last-child {
  margin-right: 0;
}

.heat-container-legend {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 5px;
  font-size: 12px;
}
.heat-container-legend .start{
  text-align: left;
}
.heat-container-legend .end{
  text-align: right;
}

/* .bg-hot {
  background-color: #1e5631;
}

.bg-warm {
  background-color: #52ad5e;
}

.bg-cold, .bg-unknown {
  background-color: #a7e1ae;
} */

.bg-cold {
  background-color: #ffe513;
  border:1px solid #ffe513;
  color: white;
}

.bg-warm {
  background-color: #ff9900;
  border:1px solid #ff9900;
  color: white;
}

.bg-hot {
  background-color: #ee0000;
  border:1px solid #ee0000;
  color: white;
}

.bg-unknown {
  background-color: #e9e9e9;
  border:1px solid #e9e9e9;
}

.disabled-link {
  pointer-events: none;
  opacity: 0.6;
  cursor: not-allowed;
}

@media (min-width: 992px){
  .sidebar-mini.sidebar-collapse .sidebar .user-panel > .info, .sidebar-mini.sidebar-collapse .nav-sidebar .nav-link p, .sidebar-mini.sidebar-collapse .brand-text {
    opacity: 0;
    margin-left: -45px !important;
  }
}

.overlay {
  position  : fixed;
  display   : none;
  width     : 100%;
  height    : 100%;
  top       : 0;
  left      : 0;
  right     : 0;
  bottom    : 0;
  background-color: rgba(0,0,0,0.5);
  z-index   : 2;
  cursor    : pointer;
}

@media (min-width: 992px) {
  .sidebar-mini.sidebar-collapse .sidebar .user-panel > .logout {
    opacity: 0;
    margin-left: -43px;
  }

  .sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel > .logout {
    opacity: 1;
    margin-left: 0;
    display: inline-block;
  }
}

/*******************
 ** MODAL LOADING **
 ******************/
 .modalloading {
  position:fixed; 
  z-index:10000; 
  top:0; 
  left:0; 
  height:100%; 
  width:100%; 
  background: rgba( 0, 0, 0, .4 ) 50% 50% no-repeat;}
/********************
 ** JSGantt Teawks **
 *******************/

.gmainright{
  width: 60%;
}
.gmainleft{
  width: 40%;
  flex: 0 0 40%;
}

/********************
 ** ELFINDER TWEAK **
 *******************/

.std42-dialog .ui-dialog-titlebar .elfinder-titlebar-button {
  top: 12px !important;
  left: -7px !important;
}

.elfinder-ltr .elfinder-cwd-view-icons .elfinder-cwd-file {
  margin: 0 10px 40px 0 !important
}

.elfinder .elfinder-cwd-view-icons .elfinder-cwd-file {
  width: 120px !important;
}
/**********************
 ** DATATABLES TWEAK **
 *********************/

div.dt-buttons {
  float: right;
  margin-left:10px;
  clear: none !important; 
}

div.dataTables_length {
  float: left;
}

.dataTables_wrapper .dataTables_processing {
  position        : absolute;
  background-color: #007bff;
  color           : white;
  top             : 0px;
}

.dataTables_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child::before {
  content: '\f055';
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
  top: 50%;
  left: 8px;
  height: 18px;
  width: 18px;
  margin-top: -9px;
  font-size: 18px;
  color: #28a745;
  border: 0;
  background-color: transparent;
  font-family: "Font Awesome 5 Free"; /* This is the correct font-family*/
  font-style: normal;
  font-weight:900;
  text-decoration: inherit;
  text-rendering: optimizeLegibility;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.dataTables_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child::before {
  content: '\f056';
  color: #dc3545 ;
}

/******************
 ** RADIO BUTTON **
 *****************/

label.radiobtn span.fa {         
  opacity: 0;       
}
label.radiobtn.active span.fa {        
  opacity: 1;       
}

/******************
** UTILITIES CSS **
******************/

.w-10             { width: 10%; }
.w-15             { width: 15%; }
.mw-10            { max-width: 10%; }
.mw-25            { max-width: 25%; }
.c-pointer:hover  { cursor: pointer; }
.c-move:hover     { cursor: move; }

/***********************
 ** FONTAWESOME TWEAK ** 
 **********************/

 @keyframes fa-blink {
  0% { opacity: 1; }
  25% { opacity: 0.25; }
  50% { opacity: 0.5; }
  75% { opacity: 0.75; }
  100% { opacity: 0; }
}
.fa-blink {
   -webkit-animation: fa-blink .75s linear infinite;
   -moz-animation: fa-blink .75s linear infinite;
   -ms-animation: fa-blink .75s linear infinite;
   -o-animation: fa-blink .75s linear infinite;
   animation: fa-blink .75s linear infinite;
}
/**************
 ** CKEDITOR **
 *************/

figure img {
  width: 100%;
}

div.dt-buttons {
  clear: both;
}

/*.modal {
  z-index: 1000;
}

.modal-backdrop {
  z-index: 999;
}*/
    
/*****************
 ** TIMETRACKER **
 ****************/

.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

/* The sidepanel menu */
.sidepanel {
  height: 250px; /* Specify a height */
  width: 250; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}

/* The sidepanel links */
.sidepanel a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style the button that is used to open the sidepanel */
.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}


/*****************
 ** CLIPBOARD **
 ****************/

 .textarea-clipboard {
  position:relative;
 }

 .textarea-clipboard .clipboard {
  opacity: 0;
  webkit-transition: opacity .3s ease-in-out;
  -o-transition: opacity .3s ease-in-out;
  transition: opacity .3s ease-in-out;
  position:absolute;
  top: 6px;
  right: 5px;
  background: #f8f8f8;
  border-radius: 4px;
  border: 1px solid #ddd;
  clear: both;
  padding: 5px 8px;
 }
 .textarea-clipboard:hover .clipboard {
  opacity: 1;
 }


/*****************
 ** COLORPICKER **
 ****************/
.colorpicker:after, .colorpicker:before{
  display: none;
}


/********************
 ** DETAIL CONTROL **
 *******************/
.detail-control {
  cursor:pointer;
}

/*********************
 **** RECORD INFO ****
 ********************/
.record-info {
  float: left;
  margin-bottom: 10px;
}

.record-info .record-info-item {
  float:left;
  margin-right: 20px;
}

.record-info .record-changed .image {
  float:left; margin:0 5px; 
}

.record-info .record-changed .image img {
  height:15px; width:15px;
}

.hideOverflow {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}


/* button-group */

.button-group {
  display: flex;
  justify-content: flex-end;
}

.record-info {
  display: flex;
   /* flex-direction: column; */
  align-items: flex-start;
}

/* Mobile layout */
@media (max-width: 768px) {
  .modal-footer {
    flex-direction: column;
  }
  .record-info {
    order: 2;
    display: block;
  }
  .record-info .record-changed,
  .record-info .record-history-link {
    text-align: center;
    display: block;
    width: 100%;
    margin: 10px;
  }
  .record-info .record-changed .saved-at {
    display: block;
  }
  .button-group {
    order: 1;
    margin-bottom: 1rem;
  }
}

/* Desktop layout */
@media (min-width: 769px) {
  .modal-footer {
    flex-direction: row;
    justify-content: space-between;
  }
  .button-group {
    margin: 0;
  }
  .record-info {
    order: 1;
  }
  .button-group {
    order: 2;
  }

  /* .modal-sm */
  .modal-sm .modal-footer {
      flex-direction: column;
  }
  .modal-sm .record-info {
      order: 2;
      display: block;
  }
  .modal-sm .record-info .record-changed,
  .modal-sm .record-info .record-history-link {
    text-align: center;
      display: block;
      width: 100%;
      margin: 10px;
  }
  .modal-sm .record-info .record-changed .saved-at {
    display: block;
  }
  .modal-sm .button-group {
      order: 1;
      margin-bottom: 1rem;
  }

}

/********************
 ** RESPONSIVE TABLE **
 *******************/
@media (max-width: 767px) {
    .responsive-details-table td, 
    .responsive-details-table th, 
    .responsive-details-table tr {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
    }

    .responsive-details-table tr {
        /* Space above the text (below the border of the row above) */
        padding-top: 15px !important; 
        
        /* Space below the text (above the border of this row) */
        padding-bottom: 15px !important; 
        
        border-bottom: 1px solid #eee !important;
    }

    /* Remove padding and border from the last row so it stays clean */
    .responsive-details-table tr:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }
    
    /* Remove top padding from the first row so it doesn't push away from the top */
    .responsive-details-table tr:first-child {
        padding-top: 0 !important;
    }

    .responsive-details-table td, 
    .responsive-details-table th {
        padding: 2px 0 !important; /* Tighten space between Label and Value */
        border-top: none !important;
    }

    .responsive-details-table .pull-right {
        float: none !important;
        display: block;
        margin-top: 5px;
    }
}


.info-cell {
    border-bottom: 1px solid #eee;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.inner-content {
    display: flex;
    align-items: center;
}

.info-label {
    width: 150px; /* Fixed width for labels keeps values aligned */
    flex-shrink: 0;
    color: #333;
    font-weight: bold;
}

.m-icon {
    width: 30px;
    text-align: center;
    color: #555;
}

.m-label {
    flex: 1; /* Takes up remaining space */
    padding-left: 10px;
}

.m-value {
    flex:1;
    padding-left: 10px;
}

/* Desktop Specific (2 columns) */
@media (min-width: 768px) {
    /* Add a vertical line between the two columns for a cleaner look */
    .monitoring-cell:nth-child(odd) {
        border-right: 1px solid #eee;
    }
    
    /* Remove bottom border on the last two items (the last "row") */
    .monitoring-cell:nth-last-child(-n+2) {
        border-bottom: none;
    }
}

/* Mobile Specific (1 column) */
@media (max-width: 767px) {
    .monitoring-cell:last-child {
        border-bottom: none;
    }

    /* Remove top padding from first item to keep it flush with top */
    .monitoring-cell:first-child {
        padding-top: 0 !important;
    }
}


.monitoring-cell {
    border-bottom: 1px solid #eee;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

@media (min-width: 768px) {
    .monitoring-cell:nth-child(odd) {
        border-right: 1px solid #eee;
    }

    .monitoring-cell:nth-last-child(-n+2) {
        border-bottom: none;
    }
}

/* PIE TABLE */

.pietable .label-number {
  font-family: monospace;
  float: right;
}