/* https://dash.plotly.com/external-resources */


/* *************** */
/* STYLING SYSTEMS */
/* *************** */

/* 

Spacing
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

Font Size
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

Color (https://www.color-hex.com/color/4582ec)

    PRIMARY

        main                #4582ec      
        lighter             #5c92ee
        darker              #2e72ea

    GRAY
           
        text                #495057
        headers             #343a40
        lighter option      #868e96
*/


/* ******************* */
/* GENERAL POSITIONING */
/* ******************* */


.top-space {
    margin-top: 48px;
}

.top-space-small {
    margin-top: 24px;
}

.top-space-tiny {
    margin-top: 16px;
}

.top-space-big {
    margin-top: 80px;
}

.top-space-mega {
    margin-top: 200px;
}

.top-space-ultra-mega {
    margin-top: 600px;
}

.bottom-space {
    margin-bottom: 48px;
}

.bottom-space-small {
    margin-bottom: 25px;
}

.bottom-space-tiny {
    margin-bottom: 16px;
}

.bottom-space-big {
    margin-bottom: 80px;
}

.text-center {
    text-align: center;
}

.margin-left {
    margin-left: 32px;
}

.margin-left-small {
    margin-left: 20px;
}


/* ********* */
/* ALL PAGES */
/* ********* */

.page-title {
    color: #343a40;
    /* font-weight: bold; */
}


.page-sub-title {
    color: #343a40;
    font-size: 20px;
    font-style: italic;
}

.component-title {
    color: #343a40;
    display: inline-block;
}

.component-title-note {
    color: #343a40;
    display: inline-block;
    padding-left: 10px;
}

.reset-link-button {
    text-decoration: none;
    background-color: #4582ec;
    color: white !important;
    padding-top: 8px;
    padding-right: 30px;
    padding-bottom: 8px;
    padding-left: 30px;
    border-radius: 15px;
}

.primary-header {
    color: #343a40;
}

.sub-header {
    color: #343a40;
}

/* margin: 2px 6px 2px 6px; */
/* border-radius: 5px; */
/* border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC; */




.button {
    font: bold 11px Arial;
    text-decoration: none;
    background-color: #EEEEEE;
    color: #333333;
    padding: 2px 6px 2px 6px;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
}





/* ********* */
/* Home Page */
/* ********* */


.home-banner-text {
    color: #343a40;
    text-align: center;
    line-height: 1.33;
}

.bs-icon-center {
    text-align: center;
    color: #4582ec;
    font-size: 74px;
}

.bs-card-title {
    color: #343a40;
    /* font-weight: bold; */
}

.bs-card-subtitle {
    color: #343a40;
    /* font-weight: bold;                     */
    font-style: italic;
}

.bs-card-text {
    color: #495057;
}

.contact-button {
    margin-top: 25px;
    margin-bottom: 25px;
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
}

.contact-button-align {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-main-text {
    display: inline-block;
}

.footer-link {
    color: white;
    margin-left: 5px;
    font-weight: bold;
    text-align: center;
    text-decoration: None;
    font-size: 25px;
    display: inline-block;
}

.footer-body {
    background-color: #4582ec;
    color: white;
    font-weight: bold;
}


/* ***************** */
/* CREATE COLLECTION */
/* ***************** */

.text-box {
    width: 100%;
    height: 300px;
}


/* ************** */
/* AUTHENTICATION */
/* ************** */


/* logout link on top of each authenticated page */
.logout {
    color: #2c3e50;
    display: block;
    text-align: right;
    margin-top: 12px;
    margin-right: 12px;
}

/* Login form on home page */

.login-h2 {
    color: white;
    text-align: center;
}

.login-input {
    width: 350px;
    margin: 0 auto;
}

.login-button {
    color: #4582ec;
    font-weight: bold;
    background-color: white;
    margin-left: 25px;
    border: none;

}

.login-link {
    color: white;
    display: block;
    text-align: center;
}

.login-forgot-link {
    color: white;
    display: block;
    text-align: center;
    text-decoration: none;

    /* font-weight: bold; */
}

.login-body {
    padding: 50px;
    border-radius: 10px;
    background-color: #4582ec;
    width: 500px;
    margin: auto;
}

.login-overview-link {
    display: block;
    color: white;
    text-align: center;
    margin-bottom: 20px;
}




/* *************************** */
/* PAGE SPECIFIC - Inst Groups */
/* *************************** */


/* ************************** */
/* Inst Search and Bib Search */
/* ************************** */

.filter-subtitles {
    display: block;
    margin-bottom: 24px;
    font-weight: bold;
}

.filter-inst-dpdn {
    margin-left: 28px;
    width: 360px;
}

.filter-border {
    border: solid 1px #343a40
}

.search-input {
    height: 50px;
    margin-bottom: 16px;
}

.filter-radio-mleft {
    margin-left: 30px;
}

.filter-date-picker {
    width: 350px;
}

.filter-pub-dpdn {
    width: 350px;
}


/* ************ */
/* NLP Analysis */
/* ************ */

.analysis-dpdns {
    margin-left: 25px;
}

.coll-dpdn-width {
    width: 515px;
}

.summary-text {
    color: #343a40;
    font-weight: bold;

}

.chart-titles {
    color: #343a40;
    font-weight: bold;
    margin-bottom: 16px;

}


/* ************* */
/* Overview Page */
/* ************* */


.overview-bs-icon {
    color: #4582ec;
    display: inline-block;
    font-size: 30px;
}

.overview-card-title {
    color: #343a40;
    display: inline-block;
}

.overview-card-subtitle {
    color: #343a40;
    font-style: italic;
}

.overview-data-title {
    color: #343a40;
    display: inline-block;

}

.overview-data-number {
    color: #343a40;
    font-weight: bold;
    display: inline-block;
    padding-left: 10px;
}


/* ****** */
/* Logout */
/* ****** */

.logout-message {
    color: #343a40;
    font-weight: bold;
    margin-top: 25px;
}

.logout-sub-message {
    font-style: italic;
    color: #343a40;
    display: inline;
}

.logout-link {
    color: #343a40;
    font-size: 20px;
    font-weight: bold;
    display: inline;
}

/* ******************* */
/* BOOTSTRAP OVERRIDES */
/* ******************* */

p {
    /* font-family: sans-serif !important; */
    font-family: 'Segoe UI' !important;
}

a:hover {
    text-decoration: underline !important;

}