/* 
    - The name of the file does not matter. I just didn't want to use 'custom' 
      because that's used by the docs or 'style' in case that is hardcoded anywhere.
    - `!important` is used a lot to override bootstrap styles.
*/
@font-face {
    font-family:                "Abel";
    src:                        url("Abel-Regular.ttf");
}
/* ======== PAGE ======== */
body {
    /* rgb coloring does not work here */
    margin:                     0;
    background-color:         #182d41;
}

#_pages_content {
    position:                   fixed;
    height:                     100%;
    width:                      100%;
    padding-bottom:             48px;
    top:                        48px;
}

.ctr {
    margin-left:                auto;
    margin-right:               auto;
}

.hrz {
    color:                    #40566b;
    width:                      85%;
    height:                     3px;
    margin-top:                 45px;
    margin-bottom:              45px;
}


/* ======== NAV BAR ======== */
.navig {
    /* These 3 stick it to top. */
    position:                   sticky;
    top:                        0;
    z-index:                    999;

    width: 100%;
    height:                     48px;
    background-image:           linear-gradient(#1b344a, #010A11);
    display:                    flex;
}

.logo {
    position:                   relative;
    margin-left:                8px;
    margin-top:                 4px;
}

.all-linx {
    display:                    flex;
    position:                   relative;
    top:                        11px;
}

.linx-box {
    margin-left:                20%;
}

.linx {
    font-family:                Abel;
    color:                    #43eac5;
    font-size:                  16px;
    text-decoration:            none;
}

.linx:hover {
    color:                    #ffda67;
}

.linx:active {
    color:                    #ffda67;
}

.linx-live {
    border-bottom:              1px solid #43eac5;
    padding:                    0px 7px 2px 7px;
    color:                    white;
    font-weight:                bold;
    font-size:                  15.5px;
}
/* ======== PROGRESS BAR ====== */
.prog_footer {
    position:                   fixed;
    bottom:                     0px;
    width:                      100%;
    background-image:           linear-gradient(#010A11, #1b344a);
    height:                     48px;
}

.prog_bar {
    /* matches bootstrap secondary color */
    border:                     1px solid #6c757d;
    width:                      45%;
    margin-top:                 17px;
    border-radius:              12px;
    background:                 none;
    height:                     15px;
    font-size:                  12px;
    color:                    #010A11;
}

/* ======== MID BAR ======== */
.middle_bar {
    --bs-gutter-x:              0px !important;
    width:                      100%;
    background-image:           linear-gradient(#010A11, #010A1170);
    padding-top:                18px;
    padding-bottom:             18px;
    /* These 3 stick it to top & mirror nav */
    position:                   sticky;
    top:                        0px;
    z-index:                    999;
}

.up_arrow {
    color:                    #5E768C;
    text-decoration:            none;
    font-size:                  19px;
}


/* ======== BUTTONS ======== */
button {
    border-radius:              8px !important;
    letter-spacing:             0.03em !important;
}

button:hover {
    border-color:             #ffda67 !important;
    color:                    #ffda67 !important;
}

button:active {
    border-color:             #ffffff !important;
    color:                    #ffffff !important;
}

.exp_ctrl_row {
    width:                      100%;
    padding-left:               4%;
    margin-top:                 18px;
}

.ctrl_chart {
    width:                      75%;
    font-family:                Abel;
}

.ctrl_chart select {
    color:                    #5c5c5c !important;
}

.ctrl_big {
    min-width:                  222px;
}

.ctrl_sm {
    min-width:                  160px;
}

.chart_button {
    padding-top:                7px;
    padding-bottom:             7px;
    padding-left:               12px;
    padding-right:              12px;
    border-radius:              6px;
    color:                    #43eac5;
    border-color:             #43eac5;
    font-weight:                lighter;
}

.ctrl_col_big {
    min-width:                  230px;
}

.ctrl_col_sm {
    min-width:                  190px;
}

/* alternating dropdown row colors */
option:nth-child(even) {
    background-color:         #E0F1F4 !important;
}

/* === EXP BUTTONS === */
.input-group-text {
    border-top-left-radius:     8px !important;
    border-bottom-left-radius:  8px !important;
    font-size:                  16px !important;
}

.form-select {
    border-top-right-radius:    8px !important;
    border-bottom-right-radius: 8px !important;
    text-align:                 center;
    padding-left:               6% !important;
    font-size:                  16px !important;
}

.form-control {
    border-top-right-radius:    8px !important;
    border-bottom-right-radius: 8px !important;
    text-align:                 center;
    font-size:                  16px !important;
}

/* === MULTITRON === */
.multitron {
    font-family:                Abel;
    font-size:                  16px !important;
    width:                      90%;
}

.Select-control {
    /* this will also apply when dropdown is clicked */
    border-radius:              20px;
    padding-left:               20px;
}

.Select-placeholder {
    padding-left:               20px;
    text-align:                 center;
    padding-right:              11%;
}

.Select-value {
    border-radius:              15px !important;
    padding-left:               2px;
    padding-right:              5px;
}

.Select-value-label {
    padding-left:               8px;
}

/* somewhat centers models. margin-l/r auto !important doesn't work. */
.Select-multi-value-wrapper {
    padding-left:               3%;
}

.model_container {
    width:                      100%;
    overflow-y:                 auto;
    height:                     100%;
    padding-top:                60px;
    padding-bottom:             60px;
    --bs-gutter-x:              0px !important;
}

/* ======== TABLES ======== */
.hp_contain {
    overflow-y:                 auto;
    max-height:                 100%;
    margin-top:                 20px;
    padding-right:              5%;
}

.tbl {
    /* it injects its own margin w/o this */
    margin-bottom:              5px;
    text-align:                 center; 
    font-size:                  16px !important;
    font-family:                Abel;
}

.tbig {
    width:                      70%;
}

.tsmall {
    width:                      40%; 
}

thead {
    color:                    white;
}

tbody {
    border-top-color:         #484848 !important;
}

td {
    color:                    #e4e4e4 !important;
}

/* Rounded table corners */
th:first-child {
    border-top-left-radius:     12px;
}
th:last-child {
    border-top-right-radius:    12px;
}
tr:last-child td:first-child {
    border-bottom-left-radius:  12px;
}
tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}
tr:last-child td {
    border-bottom-width:        0px !important;
}

/* ======== PLOTS ======== */
.exp_row {
    width:                      100%;
    padding-left:               4%;
    height:                     500px;
    margin-bottom:              15px;
}

.exp_plot_contain {
    width:                      100%;
    height:                     500px;
    margin-left:                3%;
}

.plots {
    width:                      90%;
}
/* community.plotly.com/t/is-it-possible-to-hide-the-floating-toolbar/4911 */ 
.modebar{
    display:                    none !important;
}

/* ======== SIMULATIONS ======== */
/* overflow:auto hides scroll when content fits */

.sim-pane {
    height:                     100%;
    flex-wrap:                  nowrap !important;
    --bs-gutter-x:              0px !important;
    font-family:                Abel;
}

.sim-inputs {
    height:                     100%;
    min-width:                  274px;
    padding:                    30px 30px 0px 30px;
}

.sim-outputs {
    height:                     100%;
    padding:                    30px;
    background:               #ffffff15;
    overflow-y:                 auto;
}

#scenario-btm {
    height:                     65%;
}

.sim-btn-block {
    padding-bottom:             25px;
}

.sim-features {
    height:                     100%;
    overflow-y:                 auto;
}

.sim-subtitle {
    font-size:                  17px;
    margin-top:                 5px;
    text-align:                 center;
    margin-bottom:              10px;
    color:                    #dde7f3;
}

.sim-slider-name {
    font-size:                  15.5px;
    color:                    #b8d7e1;
    margin-bottom:              5px;
}

.sim-slider {
    margin-bottom:              10px;
}

.sim-slider-num {
    margin-left:                20%;
    border-radius:              8px !important;
    font-size:                  14px !important;
    width:                      40%;
    color:                    #393939;
}

.sim-tooltip {
    font-size:                  15px;
}

.sim-title {
    margin-bottom:              25px;
    color:                    #ffffff;
}

.sim-card {
    color:                    #393939;
    margin:                     30px 30px 45px 30px;
    border:                     0px;
    border-radius:              10px;
    box-shadow:                 4px 4px 4px #242424;
}

.sim-val {
    background:               #273357;
    color:                    white;
    padding:                    2px 7px;
    border-radius:              5px;
    margin:                     6px;
    font-size:                  15px;
}

.card-bod {
    padding:                    0px !important;
}

.card-fut {
    padding:                    20px;
}

.card-tbl-scroll {
    overflow-x:                 auto;
}

.card-tbl {
    width:                      fit-content;
    margin-left:                auto;
    margin-right:               auto;   
}

.card-chart {
    height:                     150px;
}

.card-head {
    font-size:                  18px;
    font-weight:                bold;
    margin-bottom:              0px;
    margin-left:                9px;
}

.card-row {
    padding:                    20px;
}

.card-text {
    margin-top:                 8px;
}

.card-subhead {
    font-size:                  15px;
    font-weight:                bold;  
    display:                    inline-block;
    text-align:                 right;
    margin-right:               10px; 
}

.sim-thead {
    color:                    #010911 !important;
    font-size:                  14px !important;
    font-weight:                bold !important;
    text-align:                 center !important;
}

.sim-thead-tr {
    border-bottom:              1px solid #d5d5d5 !important
}

.sim-thead-th {
    padding:                    5px 10px !important;
}

.sim-td {
    color:                    #010911 !important;
    font-size:                  13px !important;
    text-align:                 center !important;
    padding:                    5px 10px !important;
}

/* unicode star is bigger in chrome than firefox */
.star {
    color:                    #8895a2;
    text-decoration:            none;
    font-size:                  18px;
    font-weight:                lighter;
    background:                 none !important;
    border:                     0px !important;
    padding:                    0px 7px 7px 0px !important;
}

.star:focus {
    color:                      #8895a2 !important;
    box-shadow:                 none !important;
}

.star:active {
    color:                      #8895a2 !important;
}

.star:hover {
    color:                    #d0a318 !important;
    border:                     0px !important;
}

.star:visited {
    color:                    #d0a318 !important;
}

/* ======== MISC ======== */
.header {
    color:                    #ffda67;
    font-size:                  19px;
    font-weight:                200;
    font-stretch:               108%;
    text-align:                 center;
    font-family:                Abel;
}

.alert {
    width:                      80%;
    margin:                     auto;
    text-align:                 center;
    background:               #ffffff20;
    color:                    #FFFFFF;
    font-weight:                lighter;
    border-radius:              12px;
    border-color:             #ffffff00;
    border-width:               4px;
    padding:                    25px;
}

.spinner {
    margin-left:                48%;
}
