* {
    font-family: var(--text-body);
    color: var(--text)
}

h1 {
    font-size: 3.0rem;
    margin: 0.3rem auto 0.7rem auto;
    color: var(--blue4);
}

h2 {
    font-size: 2.3rem;
}

h3 {
    font-size: 1.9rem
}

h4 {
    font-size: 1.5rem;
}

p {
    font-size: 1.6rem;
    margin: 0 auto 1.5% auto;
    line-height: 2.2rem;
}

a {
    color: blue;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

html {
    font-size: 62.5%;
}

body {
    position: relative;
    /* ensures that the footer does not overlap with the main content of each page */
    min-height: 100vh;
    /* ensures that the footer does not overlap with the main content of each page */
    width: 100vw;
    padding: 0 0 0.1px 0;
    overflow-x: hidden;
    margin: 0;
}

.body-contain {
    width: 100%;
    max-width: 140rem;
    margin: 0 auto;
}

:root {

    /* OLD BRANDING COLORS */
    --black: black;
    --white: white;

    --gray: rgb(244, 244, 244);
    --blue: rgb(48, 110, 180);
    --dark-brown: #51372e;
    /* --dark-brown: #51372e; */
    --light-brown: #d4c7bd;
    /* --light-brown: #d4c7bd;*/

    /* NEW BRANDING COLORS */
    --blue1: blue;
    --blue2: #1d4179;
    --blue3: #153463;
    /* rgba(21, 52, 99, 1) */
    --blue4: #112646;
    /* rgba(17, 38, 70, 1) */
    --blue5: #0b192e;
    /* rgba(11, 25, 46, 1) */
    --cyan1: #d8f0f9;
    --cyan2: #b4f8ee;
    --sand: #d2bca6;
    --metal: #79817c;
    --gray1: #eeefef;
    --gray2: #d7d7da;
    --gray3: #cbcbcf;
    --gray4: #c5c5c8;
    --gray5: #b7b7b9;
    --text: #424242;

    /* GRADIENTS */
    --gblue1: linear-gradient(135deg, var(--blue3) 2%, var(--blue2) 5%, var(--blue1) 15%, var(--blue1) 85%, var(--blue2) 95%, var(--blue2) 98%);
    --gblue2: linear-gradient(135deg, var(--blue4) 2%, var(--blue3) 5%, var(--blue2) 15%, var(--blue2) 85%, var(--blue3) 95%, var(--blue4) 98%);
    --gblue3: linear-gradient(135deg, var(--blue5) 2%, var(--blue4) 5%, var(--blue3) 15%, var(--blue3) 85%, var(--blue4) 95%, var(--blue5) 98%);
    --gblue4: linear-gradient(135deg, var(--blue3) 2%, var(--blue4) 5%, var(--blue5) 15%, var(--blue4) 50%, var(--blue5) 85%, var(--blue4) 95%, var(--blue3) 98%);
    --ggray1: linear-gradient(135deg, var(--gray3) 2%, var(--gray2) 5%, var(--gray1) 15%, var(--gray1) 85%, var(--gray2) 95%, var(--gray2) 98%);
    --ggray2: linear-gradient(135deg, var(--gray4) 2%, var(--gray3) 5%, var(--gray2) 15%, var(--gray2) 85%, var(--gray3) 95%, var(--gray4) 98%);
    --ggray3: linear-gradient(135deg, var(--gray5) 2%, var(--gray4) 5%, var(--gray3) 15%, var(--gray3) 85%, var(--gray4) 95%, var(--gray5) 98%);
    --gbluegray1: linear-gradient(165deg, var(--gray5) 1%, var(--gray4) 5%, var(--gray2) 10%, var(--gray3) 50%, var(--gray2) 90%, var(--gray4) 95%, var(--gray5) 99.5%);
    --gbluegray2: linear-gradient(135deg, var(--gray1) 5%, var(--gray2) 10%, var(--blue2) 35%, var(--blue3) 50%, var(--blue2) 65%, var(--gray2) 90%, var(--gray1) 95%);
    /* CRYPTO RATING COLORS */
    --strongly-pro: #F2a900;
    /* rgba(242, 169, 0) */
    --slightly-pro: #be7b15;
    /* rgba(208, 135, 27)*/
    --neutral: #9D5444;
    /* rgba(157, 84, 68) */
    --slightly-anti: #8a3d8d;
    /* rgba(106, 33, 108 */
    --strongly-anti: #480088;
    /* rgba(72, 0, 136) */
    --not-enough-data: #c0c0c0;
    /* rgba(117, 117, 117) */
    --sentiment-range: linear-gradient(90deg, var(--strongly-pro) 13%, var(--strongly-anti) 100%);

    /* POLITCICS COLORS*/
    --dems: #00AEF3;
    --reps: #E81B23;
    --inds: #f2e20d;
    --grns: #00bf06;


    /* FONT STYLES */
    --text-body: 'Open Sans',
        sans-serif;
    --text-logo-name: 'Aclonica';
}

/* NO-DISPLAY */

.hidden {
    display: none;
}


/* CRYPTO TEXT */

.anti-crypto-text,
.pro-crypto-text {
    color: var(--white);
    padding: 0rem 0.5rem 0.1rem 0.5rem;
    text-wrap: nowrap;
}

.pro-crypto-text {
    background: var(--strongly-pro);
}

.anti-crypto-text {
    background: var(--strongly-anti);
}


/* FANCY PAGE DIVIDERS */
.fancy {
    /* border thickness */
    --b: 0.3rem;
    /* width of the line*/
    --w: 500rem;
    /* gap */
    --g: 2rem;
    /* color */
    color: var(--blue4);
    background:
        conic-gradient(from 45deg at left, var(--gray2) 25%, #0000 0) 0,
        conic-gradient(from -135deg at right, var(--gray2) 25%, #0000 0) 100%;
    display: flex;
    margin: auto;
    padding: 0.5rem;
    justify-content: center;
    width: 18rem;
    text-align: center;
    border: 1px solid;
    background-size: 51% 100%;
    background-origin: border-box;
    background-repeat: no-repeat;
    border-image:
        linear-gradient(#0000 calc(50% - var(--b)/2),
            var(--gray2) 0 calc(50% + var(--b)/2),
            #0000 0) 1/0 var(--w)/calc(var(--w) + var(--g));
}

.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* TOP PAGE LOGO & TITLE */

.top-page-logo-title-section {
    width: 100vw;
    padding-left: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.top-page-logo-title-cont {
    display: flex;
    text-align: center;
    width: 23rem;
}

.top-page-logo-title-cont:hover {
    cursor: pointer;
    text-decoration: none !important;
}

#top-page-logo {
    height: 3rem;
    margin-right: 0.5rem;
    z-index: 2000;
}

#top-page-title {
    font-size: 3rem;
    font-family: var(--text-logo-name);
    color: var(--blue3);
    z-index: 2000;
    text-decoration: none !important;
}


/* PAGE-NAV-LINKS */

.page-nav-links {
    font-size: 1.4rem;
    padding-left: 5rem;
    padding-top: 1.5rem;
    max-width: 140rem;
    margin: 0rem auto 0rem auto;
}

.page-nav-links a {
    color: blue;
    text-decoration: none;
}

.page-nav-links a:hover {
    text-decoration: underline;
}

.page-nav-links a:visited {
    color: blue
}


/* SEARCH INPUT FIELDS */

.search-field {
    border: 0.15rem solid var(--blue4);
    -webkit-box-shadow: 3px 3px 3px 0px var(--gray5);
    box-shadow: 3px 3px 3px 0px var(--gray5);
    border-radius: 0.5rem;
    color: black;
}

.search-field:focus {
    outline: 0.01rem solid var(--blue4);
    background: var(--cyan2);
}


/* BUTTONS */
.button-design {
    color: var(--white);
    border-radius: 1rem;
    cursor: pointer;
    background: var(--gblue4);
    border: 0.2rem solid var(--blue4);
    transition: all 0.3s ease;
}

.button-design:hover {
    background: var(--cyan2);
    border: 0.2rem solid var(--blue4);
    color: var(--blue4);
}


/* PAGE TABS */

.page-tab-cont {
    overflow: hidden;
    border: 1px solid white;
    background: var(--ggray2);
}

.page-tab-button {
    background: var(--gblue4);
    color: white;
    border-right: 0.1rem solid white;
    float: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 1.7rem;
    font-weight: bold;
    height: 3.2rem;
}

.page-tab-button:hover {
    opacity: 0.6;
}

.page-tab-button.active {
    background: linear-gradient(45deg, var(--cyan2) 1%, var(--cyan2) 91%, var(--blue3) 98%);
    color: var(--blue4);
    transition: all 0.35s;
    opacity: 1 !important;
    cursor: default;
    z-index: 5;
}


/* PAGE HEADERS */

.page-title-cont {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
    margin-top: 1rem;
}

.page-title-bar {
    width: 25rem;
    border: none;
    background: linear-gradient(to right, transparent, var(--blue4), transparent)
}

.page-title-bar.top {
    height: 0.25rem;
    margin: 0 auto;
}

.page-title-bar.bottom {
    height: 0.3rem;
    margin: 0 auto;
}


/* SELECT2 DROPDOWNS */

.select2-container--default .select2-selection--single {
    border: 0.1rem solid var(--gray4);
    -webkit-box-shadow: 1px 2px 2px 0px #000000;
    box-shadow: 1px 2px 2px 0px #000000;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--text);
}

.select2-results__options {
    overflow-y: auto;
    color: var(--text);
}

.select2-search__field:focus {
    outline: 1.5px solid var(--blue4);
}

.select2-results__option--highlighted {
    background-color: var(--cyan2) !important;
    color: var(--text) !important;
}


/* CHOICES.JS DROPDOWNS */

/* 
classNames: {
    containerOuter: 'choices',
        containerInner: 'choices__inner',
        input: 'choices__input',
        inputCloned: 'choices__input--cloned',
        list: 'choices__list',
        listItems: 'choices__list--multiple',
        listSingle: 'choices__list--single',
        listDropdown: 'choices__list--dropdown',
        item: 'choices__item',
        itemSelectable: 'choices__item--selectable',
        itemDisabled: 'choices__item--disabled',
        itemOption: 'choices__item--choice',
        group: 'choices__group',
        groupHeading: 'choices__heading',
        button: 'choices__button',
        activeState: 'is-active',
        focusState: 'is-focused',
        openState: 'is-open',
        disabledState: 'is-disabled',
        highlightedState: 'is-highlighted',
        selectedState: 'is-selected',
        flippedState: 'is-flipped',
        selectedState: 'is-highlighted',
}
*/

.choices {
    height: 3rem;
    padding: 0;
}

.choices__inner {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    background-color: var(--gray1);
    padding: 0;
    border: 1px solid var(--blue4);
    border-radius: 0px;
    font-size: 14px;
    min-height: 0;
    overflow: hidden;
}

.choices[data-type*=select-one] .choices__inner {
    padding-bottom: 0;
}

.choices__item--choice {
    color: var(--blue3);
}

.choices__list--dropdown .choices__item--selectable,
.choices__list[aria-expanded] .choices__item--selectable {
    padding-right: 0 !important;
}

.choices__placeholder[data-id="1"] {
    color: var(--blue5)
}

.choices__placeholder[role="option"] {
    display: none;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: var(--cyan2);
}
