/* assets/custom.css */

/* Overall Dashboard Background */
body {
    background-color: #bdcfe7;
}

/* Style the sidebar */
.sidebar {
    height: 100vh;
    padding: 15px 20px 20px 20px;
    background-color: #425874;
    overflow-y: auto;
    position: fixed;
    right: 0;
    top: 0;
    width: 20%;
    box-shadow: -2px 0 5px rgba(255, 255, 255, 0.1);
}

/* Style the main content to have left margin equal to sidebar width */
.main-content {
    margin-right: 20%;
    padding: 20px;
    height: auto;
    overflow-y: visible;
}

/* Style the plots */
.plot-container {
    margin-bottom: 20px;
}

/* 3D Plot Specific Background */
#3d-arrow-plot .plotly {
    background-color: #bdcfe7;
}

/* Remove any padding/margins for plot titles (since titles are removed) */
h1, h2, h4 {
    color: white;
    font-size: 1.4em;
    margin: 0;
    padding: 0;
}

/* Hr */
.Hr-line {
    border-color: white;
    border-width: 2px;
    margin: 5px 0 10px 0;
    padding: 0;
}

/* Tooltip */
.tooltip .tooltip-inner {
    background-color: rgba(255, 255, 255, 0.9);
    color: #425874; /* Dark text color */
    border: none; /* Light border */
    border-radius: 8px; /* Rounded corners */
    padding: 5px; /* Padding inside the tooltip */
    font-size: 14px; /* Font size */
}

.tooltip .tooltip-arrow {
    display: none; /* Hide the arrow */
}


/* **************************** Input **************************** */

/* Input label col */
.input-label-col {
    flex: 0 0 55%;
}

/* Input box col */
.input-box-col {
    flex: 0 0 45%;
}

/* Input label */
.input-label {
    color: white;
    font-size: 1em;
}

/* Input box */
.input-box {
    color: #425874;
    height: 1.5em; /* Sets the overall height */
    font-size: 1em;
}

/* Input row */
.input-row {
    display: flex;
    align-items: center; /* Vertically centers the items */
    padding: 1.5% 0% 1.5% 0%;
}

/* Input label col eq */
.input-label-col-eq {
    flex: 0 0 55%;
    padding: 0% 0% 0% 20%;
}

/* Input box col eq */
.input-box-col-eq {
    flex: 0 0 45%;
}

/* Input box text */
.input-box-text {
    color: #425874;
    appearance: textfield;
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    width: 50%;
    height: 1.5em;
}



/* **************************** Instructions **************************** */

/* 1. Outer modal container */
.instructions-modal {
    width: 70%;
    margin-top: 5vh; 
    margin-left: 5%;
    opacity: 0.9;
    border-radius: 10px;
    background-color: #bdcfe7;
}

/* 2. Inner modal elements (dialog and content) */
.instructions-modal .modal-dialog,
.instructions-modal .modal-content {
    background-color: #bdcfe7;
    border: none;
    width: 100%;
    max-width: none;
}

/* 3. Modal header */
.instructions-modal .modal-header {
    background-color: #bdcfe7;
    border: none;
    width: 100%;
    color: #1a2a3a;
    margin: 1% 1% 1% 5%;
}

.instructions-modal .modal-header .modal-title {
    font-size: 3em;
}

/* 4. Modal body */
.instructions-modal .modal-body {
    background-color: #bdcfe7;
    border: none;
    width: 100%;
    /* padding: 20px; */
    color: #2c3e50;
    line-height: 1.3;
}

.instructions-modal .modal-body h1,
.instructions-modal .modal-body h2,
.instructions-modal .modal-body h4 {
    color: #2c3e50;  /* Match the body text color or choose another */
    /* margin: 15px 0 10px 0;  Add some spacing around headers */
}