/* Custom App CSS Below --------------------------------- */
/*Fonts ––––––––––––––––––––––––––––––––––––––––––––––––––*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

/* Main Layout ––––––––––––––––––––––––––––––––––––––––––––––––––*/
/*hi and fm graph container*/
/*.graph-container-frame {
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height:auto;
    overflow: auto;
}
*/

/* Voice recognition button*/
@keyframes flashing {
    0% { opacity: 1; background-color: #007AFF; }  /* Initial state */
    50% { opacity: 0.5; background-color: white; } /* Midpoint state */
    100% { opacity: 1; background-color: #007AFF; } /* Final state */
}
.flashing {
    animation: flashing 3s infinite;
}

/* Add this to your CSS file */
/* In your /assets/style.css file */
@keyframes blink-border {
    0% {
        border-color: red;
    }
    50% {
        border-color: transparent;
    }
    100% {
        border-color: red;
    }
}

.blinking {
    animation: blink-border 1s step-start 5;
}

/* styles.css */


/* style for risk and health index labels

#risk index label

/* na (Grey) */
.notavailable {
    background-color: rgba(128, 128, 128, 0.5); /* Semi-transparent grey */
    color: white; /* Text color for better contrast */
}

/* Normal (Green) */
.normal {
    background-color: rgba(0, 255, 0, 0.5); /* Semi-transparent green */
    color: white; /* Text color for better contrast */
}

/* fair (orange) */
.fair {
    background-color: rgba(255, 165, 0, 0.5); /* Semi-transparent orange */
    color: white; /* Text color for better contrast */
}




/* Warning (Yellow) */
.warning {
    animation: flash 10s infinite; /* Slower flashing */
    background-color: rgba(255, 165, 0, 0.5); /* Semi-transparent orange */
    color: white; /* Text color for better contrast */
}

/* Flashing (Red) */
.flashing {
    animation: flash 1s infinite; /* Faster flashing */
    background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
    color: white; /* Text color for better contrast */
}

/* Keyframes for flashing effect */
@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}


/* health index

/* Dark Red */
.dark-red {
    background-color: rgba(139, 0, 0, 0.5); /* Semi-transparent dark red */
    color: white; /* Text color for better contrast */
}

/* Red */
.red {
    background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
    color: white; /* Text color for better contrast */
}

/* Orange */
.orange {
    background-color: rgba(255, 165, 0, 0.5); /* Semi-transparent orange */
    color: white; /* Text color for better contrast */
}

/* Dark Yellow (Gold) */
.gold {
    background-color: rgba(255, 215, 0, 0.5); /* Semi-transparent gold */
    color: white; /* Text color for better contrast */
}

/* Light Green */
.lightgreen {
    background-color: rgba(144, 238, 144, 0.5); /* Semi-transparent light green */
    color: white; /* Text color for better contrast */
}

/* Dark Green */
.dark-green {
    background-color: rgba(0, 100, 0, 0.5); /* Semi-transparent dark green */
    color: white; /* Text color for better contrast */
}

/* default Grey */
.grey {
    background-color: rgba(128, 128, 128, 0.5); /* Semi-transparent grey */
    color: white; /* Text color for better contrast */
}




/* Background Image Class */
.background {
    background-image: url('/assets/home_page_background.png');  /* Update this path to your image */
    background-size: cover;  /* Cover the entire container */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    background-position: center; /* Center the image */
    height: 100vh;           /* Full height of the viewport */
    width: 100vw;            /* Full width of the viewport */
    overflow: hidden;        /* Prevent overflow */
    color: white;
}



body {
  background-color: #1E1E1E;
  color: #d8d8d8;
  margin: 0;
  padding: 0;
}
h1, h2, h3, h4, h5 {
  font-family: "Open Sans";
  font-weight: bold;
  letter-spacing: 2.1px;
  font-size: 21px;
  padding-left: 12px;
}
p {
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 14px;
  padding-left: 12px;
}
a {
  text-decoration: none;
}
.bg-grey{
  background-color: #31302F;
}
.text-padding{
  padding: 5px;
}
/* Graph Layout ––––––––––––––––––––––––––––––––––––––––––––––––––*/
.div-for-charts{
  display: flex;
  flex-direction: column;
  height: 100vh;
 /* height: 100vh;*/
  /*height: 1155;*/
  width: 100%;
  margin-bottom:0px
}
#histogram {
  flex-grow: 1 
}
#map-graph {
  flex-grow: 1 
}
#fig {
  flex-grow: 1
}
#fig_2 {
  flex-grow: 1
}
.mapboxgl-canvas, .mapboxgl-map {
  min-width: 100%;
}
/* Graph Control Objects ––––––––––––––––––––––––––––––––––––––––––––––––––*/

/* Remove hover highlight in Dash DataTable */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td:hover {
    background-color: transparent !important;
}

/*feedback form------------------------------*/
.star-selected {
    color: gold;
}
.star-unselected {
    color: grey;
}



.div-user-controls {
  padding-left: 55px;
  padding-top: 64px;
  height: 100vh;       /* Set height to full viewport height */

}

.div-for-charts{

  height: 100vh;       /* Set height to full viewport height */

}
/*box-sizing: border-box;*/

.div-for-dropdown {
  padding-top: 12px;
  padding-bottom: 12px;
}
.div-for-slider {
  width: 97%;
  text-align: center;
}
.logo {
  height: 35px;
  padding-bottom: 12px;
  margin-left: 8px;
}
.Select-control, .Select-menu-outer, .Select-multi-value-wrapper, .select-up, .is-open .Select-control {
  background-color: #1E1E1E;
  color: white;
  
}

#bar-selector .Select-multi-value-wrapper{
  max-height: 82px;
  overflow-y: auto;
  margin: 0px 0px -3px 0px;
}

.Select-control{
  border: 0.5px solid #dbdbdb44;
}

.has-value.Select--single>.Select-control .Select-value .Select-value-label, .has-value.is-pseudo-focused.Select--single>.Select-control .Select-value .Select-value-label {
  color: white;
}
._dash-app-content {
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
}
.has-value.Select--single>.Select-control .Select-value .Select-value-label, .has-value.is-pseudo-focused.Select--single>.Select-control .Select-value .Select-value-label{
  color: #ffffff !important;
  font-weight: 400;
  font-size: 14px;
}

.ag-theme-quartz .ag-body-horizontal-scroll {
    z-index: 0 !important;
    background-color: transparent;

}

.ag-theme-quartz {
    z-index: 0;
    background-color: transparent;

}


#date {
  background-color: #1e1e1e;
  font-family: "Open Sans";
  font-weight: 400;
  color: #dbdbdb;
  border: 0.5px solid #dbdbdb44;
}

#date-picker{
  width: 100%;
}

._dash-undo-redo {
  display: none;
}
.DateInput.DateInput_1{
  width: 100%;
}
.SingleDatePickerInput__withBorder{
  border:none;
}

.DateInput.DateInput_1 {
  background-color: #1e1e1e;
}

.SingleDatePickerInput__withBorder {
  border-radius: 3px;
  color: #dbdbdb;
  background: #1e1e1e;
  background-color: #1e1e1e;
}
.SingleDatePickerInput.SingleDatePickerInput_1.SingleDatePickerInput__withBorder.SingleDatePickerInput__withBorder_2 {
  border: 0.0px solid #dbdbdb;
  display: block;
}
.SingleDatePicker_1 {
  border: 0.0px solid #dbdbdb;
  display: block;
}

.SingleDatePicker_picker, .SingleDatePicker_picker_1, .SingleDatePicker_picker__directionLeft,
.SingleDatePicker_picker__directionLeft_2{
  filter:invert(100%);
}

.circle-hidden {
    display: none !important;
}

/* For Mobile Phones and small screens ––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* Show prompt in portrait, hide in landscape */
/* Show prompt only on mobile devices in portrait (up to 991px) */
@media (max-width: 991.98px) and (orientation: portrait) {
    #rotate-prompt {
        display: flex;
    }

}

/* Ensure content shows in landscape on mobile and all desktop sizes */
@media (max-width: 991.98px) and (orientation: landscape) {
    #rotate-prompt {
        display: none;
    }

}

/* Desktop: Always show content, hide prompt (992px and up) */
@media (min-width: 1920px) {
    #rotate-prompt {
        display: none;
    }

}

/* default circle locations */



.stator-circle {
    top: 400px;
    left: 250px;
}

.rotor-circle {
    top: 250px;
    left: 350px;
}

.aux-circle {
    top: 130px;
    left: 200px;
}


.core-circle {
    top: 200px;
    left: 100px;
}

.wind-circle {
    top: 180px;
    left: 140px;
}

.saux-circle {
    top: 100px;
    left: 150px;
}



/* Default styles (optional, if you want to move some inline styles here) */

#container-frame-risk_rm {
    margin-top: 50%;  /* default for desktop */
}

/* For small screens / phones */
@media only screen and (max-width: 1024px) {
    #container-frame-risk_rm {
        margin-top: 90%;  /* smaller margin for mobile */
    }
}



/* Adjust for smaller screens */


@media only screen and (max-width: 1024px) {

    /* create user -----   Input fields */
    #fullname, #country, #company, #role, #email_create, #password_create, #email{
      color: black;
      width: 350px !important;
      border: 1.5px solid black;
      height: 50px;
      text-align: left;
      margin-top: 20px;
    }

    .email-signup {
            padding-right: 0;
        }

    .fullname-signup {
            padding-right: 0;
        }
    .country-signup {
            padding-right: 0;
        }

    .companyname-signup {
            padding-right: 0;
        }

    .role-signup {
            padding-right: 0;
        }

    .password-signup {
            padding-right: 0;
        }

    #confirm-button-create {
  background-color: RGB(20,54,214);
  color: white;
  width: 100%;
  max-width: 350px;
  border: 1.5px solid black;
  height: 50px;
  text-align: center;
  margin-top: 20px;
}




  /* Graph */
  #coord-map {
    display: none !important;
  }
    /* spaces for first div in main layout */

    .spacer-mobile-hide {
        display: none; /* Hides the extra breaks on mobile */
    }
  /* Container padding */
  .background {
    padding: 0 10px !important;  /* Reduce side padding */
  }

  /* Row adjustments */
  .justify-content-center {
    flex-direction: column !important;  /* Ensure stacking */
    align-items: center !important;     /* Center contents */
  }

  /* Column padding */
  [class*="col-"] {
    padding-left: 0 !important;   /* Remove extra padding */
    padding-right: 0 !important;
  }

  /* Logo */
  .logo {
    width: 80% !important;        /* Smaller logo */
    max-width: 200px !important;  /* Cap size */
  }


/* asset pages ------- rotating machine overview */
    .stator-circle {
        top: 300px !important;
        left: 150px !important;
    }
    .rotor-circle {
        top: 200px !important;
        left: 200px !important;
    }
    .aux-circle {
        top: 100px !important;
        left: 150px !important;
    }
/* rotating machine stator */
    .core-circle {
    top: 100px !important;
    left: 200px !important;
    }

    .wind-circle {
        top: 180px !important;
        left: 100px !important;
    }

    .saux-circle {
        top: 70px !important;
        left: 50px !important;
    }
/* rotating machine rotor */
    .shaft-circle {
        top: 50px !important;
        left: 180px !important;
    }


    .rwind-circle {
        top: -50px !important;
        left: -150px !important;
    }
    .raux-circle {
        top: 50px !important;
        left: -50px !important;
    }

    .nde-circle {
    top: -100px !important;
    left: -50px !important;
    }

    .de-circle {
        top: -200px !important;
        left: -250px !important;
    }

    .poles-circle {
        top: -70px !important;
        left: -280px !important;
    }

/* rotating machine enclosure */


    .enclosure-circle {
    top: -120px !important;
    left: -150px !important;
    }

    .terminal-box-circle {
        top: -80px !important;
        left: -220px !important;
    }

    .cooling-circle {
        top: -70px !important;
        left: -80px !important;
    }
/* cable overview */


    .cbtermination-circle {
    top: 70px !important;
    left: 50px !important;
    }

    .cbsection-circle {
        top: 150px !important;
        left: 220px !important;
    }

    .cbjoin-circle {
        top: 150px !important;
        left: 70px !important;
    }
/* transmission cable overview */


    .hvtermination-circle {
        top: 55px !important;
        left: 50px !important;
        height: 30px !important;
        width: 80px !important;
    }

    .hvsection-circle {
        top: 115px !important;
        left: 220px !important;
        height: 30px !important;
        width: 80px !important;
    }

    .hvjoin-circle {
        top: 115px !important;
        left: 70px !important;
        height: 30px !important;
        width: 80px !important;
    }

/* sw overview */


    .bays-circle {
    top: 70px !important;
    left: 50px !important;
    }

    .bus-circle {
        top: 150px !important;
        left: 220px !important;
    }

    .mainins-circle {
        top: 150px !important;
        left: 70px !important;
    }

    /* Hidden class to toggle visibility */
    .hidden {
    display: none !important;
}

/* tx overview */


    .txcore-circle {
    top: 150px !important;
    left: 50px !important;
    }

    .txwind-circle {
        top: 190px !important;
        left: 220px !important;
    }

    .txtank-circle {
        top: 150px !important;
        left: 70px !important;
    }
    .txmain-circle {
        top: -40px !important;
        left: 220px !important;
    }


    .app-container {
        padding: 10px;
 }
  .four, .eight {
      min-width: 100%;
 }
  h1, h2, h3, p {
      text-align: center;
 }
  body {
      display: block;
      margin: 0px;
      overflow-y: scroll;
  }
  .div-for-charts {
      padding: 0px;
      width: 100%;
      height: 100vh;

      text-align: center;
 }

 .div-user-controls {
    padding: 0px;

 }
 /*height: 100vh;     /*box-sizing: border-box;  /* Set height to full viewport height */

 
 .side-by-side{
    display: inline-block;
    width: 48%;
  }

   
 .side-by-side-right{
    display: inline-block;
    width: 48%;
    float:right;
  }
  .div-for-charts{
    margin: 0px;
  }
} 

/* width */
::-webkit-scrollbar {
  width: 10px !important;
  display: block !important;
}

/* Track */
::-webkit-scrollbar-track {
  background: #1e1e1e !important; 
  border-radius: 10px !important;
  display: block !important;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: transparent; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #d8d8d870 !important; 
}

.CalendarMonth_table td {
  padding: unset;  
}


.custom-dropdown .Select-control {
    background-color: black !important;
    color: white !important;
}

/* Dropdown menu background and text color */
.Select-menu-outer {
    background-color: black !important;
    color: white !important;
}

.Select-option {
    background-color: black !important;
    color: white !important;
}

/* Optional: Change the hover color */
.Select-option--is-selected {
    background-color: black !important;
    color: white !important;
}

.Select-option--is-focused {
    background-color: black !important;
    color: white !important;
}