@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;700;800&display=swap');

:root {
    /* color */
    --modern-blue: #005DFA;
    --support-blue: #002C8F;
    --main-menu: #000000;
    --lighter-grey: #F8F9FA;
    --light-grey: #F2F2F2;
    --separator-grey: #DCDCDC;
    --grey: #646464;
    --dark-grey: #323232;
    --red: #D21028;
    --green: #217534;
    --fresh-green: #62C8AF;
    --flag-blue: #5F9CFC;
    --orange: #F1A268;
    --purple: #D099E6;
    --damascus: #F57F79;
    --violet: #857ED0;
    --white: white;
    --red-over: #A1091C;
    --modern-blue-opacity: rgba(0, 93, 250, 0.1);
    --fresh-green-opacity: rgba(98, 200, 175, 0.1);
    --purple-opacity: rgba(202, 136, 228, 0.1);
    --damascus-opacity: rgba(245, 127, 121, 0.1);
    /* fonts */
    --main-font: 'Red Hat Display', sans-serif;
}

.fs-normal {
    font-size: 16px!important;
}

.fs-small {
    font-size: 14px!important;
}

.fs-xsmall {
    font-size: 12px!important;
}

/* text */
p {
    font-family: var(--main-font);
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
}

h1 {
    font-family: var(--main-font);
    font-size: 48px;
    font-weight: 800;
}

h2 {
    font-family: var(--main-font);
    font-size: 32px;
    font-weight: 700;
}

h3 {
    font-family: var(--main-font);
    font-size: 24px;
    font-weight: 700;
    margin: 0px;
}

h4 {
    font-family: var(--main-font);
    font-size: 20px;
    font-weight: 700;
}

h5 {
    font-family: var(--main-font);
    font-size: 18px;
    font-weight: 700;
}

.table-title {
    font-family: var(--main-font);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 00.04em;
}

.normal-text{
    font-family: var(--main-font);
    font-style: normal;
    font-weight: bold;
    font-size: 12px;
    line-height: 16px;
    /* identical to box height */
    color: var(--white);
    letter-spacing: 0.04em;
}

.normal-bold-text{
    font-family: var(--main-font);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
}

.table-data {
    font-family: var(--main-font);
    font-weight: 400;
    font-size: 14px;
}

.help {
    font-family: var(--main-font);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.04em;
}


/* backgrounds */
.--dark-grey-background {
    background-color: var(--dark-grey)!important;
}

.--white-background {
    background-color: #FFF!important;
}



/* buttons */
.btn-third {
    border: 1px solid var(--modern-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 118px;
    min-height: 40px;
    border-radius: 8px;
    background-color: transparent;
    font-family: var(--main-font);
    font-size: 12px;
    color: var(--modern-blue);
    letter-spacing: 0.04em;
    font-weight: 700;
    text-transform: uppercase;
    transition: all .2s ease;
}

.btn-third:hover {
    cursor: pointer;
    color: #FFF;
    background-color: var(--modern-blue);
    transition: all .2s ease;
}

/* tables */
.table-green {
    background-color: var(--fresh-green);
    color: #FFF;
}

.table-blue {
    background-color: var(--flag-blue);
    color: #FFF;
}

.table-orange {
    background-color: var(--orange);
    color: #FFF;
}

.table-purple {
    background-color: var(--purple);
    color: #FFF;
}

.table-damascus {
    background-color: var(--damascus);
    color: #FFF;
}

.table-violet {
    background-color: var(--violet);
    color: #FFF;
}

.table-danger {
    background-color: var(--red);
    border: 1px solid var(--red-over) !important;
}

/* others */
.--border-radius-8 {
    border-radius: 8px;
}

/* FINISH RODO */

.link-text{
    font-family: var(--main-font);
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: 0.04em;
    text-decoration-line: underline;
}

.text-blue-modern { color: var(--modern-blue); }

.text-grey { color: var(--grey); }

.text-orange { color: var(--orange); }



.background-light-gray {
    background-color: #F8F9FA !important;
}

.background-modern-blue {
    background-color: var(--modern-blue) !important;
}

.background-flag-blue {
    background-color: var(--flag-blue) !important;
}

.background-fresh-green {
    background-color: var(--fresh-green) !important;
}

.background-violet{
    background-color: var(--violet) !important;
}

.background-purple{
    background-color: var(--purple) !important;
}

.background-orange {
    background-color: var(--orange) !important;
}

.background-damascus{
    background-color: var(--damascus) !important;
}

.bg-separator-grey{
    background-color: var(--separator-grey) !important;
}

.background-modern-blue-opacity{
    background-color: var(--modern-blue-opacity) !important;
}

.background-fresh-green-opacity{
    background-color: var(--fresh-green-opacity) !important;
}

.background-purple-opacity{
    background-color: var(--purple-opacity) !important;
}

.background-damascus-opacity{
    background-color: var(--damascus-opacity) !important;
}

.button-lg{
    width: 173px;
    height: 44px;
    padding: 14px 25px !important;
}

.button-cube{
    display: flex;
    width: 50px;
    height: 50px;
    justify-content: center;
    align-items: center;
    align-content: center;
}



.button-primary{
    background-color: var(--modern-blue) !important;
    color: var(--white) !important
}

.button-primary.outline{
    border-color: var(--modern-blue) !important;
    color: var(--modern-blue) !important;
    background-color: transparent !important;
}

.button-primary:hover{
    background-color: var(--support-blue) !important;
    color: var(--white) !important;
}

.button-primary:focus{
    background-color: var(--dark-grey) !important;
    color: var(--white) !important;
    box-shadow: unset !important;
}

.button-secondary{
    border-radius: 8px !important;
    background-color: var(--dark-grey);
    color: var(--white)
}

.button-secondary:hover{
    background-color: var(--support-blue);
    color: var(--white);
}

.button-secondary:focus{
    background-color: var(--modern-blue);
    color: var(--white);
    box-shadow: unset;
}

.button-alert{
    border-radius: 8px !important;
    background-color: var(--red);
    color: var(--white)
}

.button-alert.outline{
    border-color: var(--red) !important;
    color: var(--red) !important;
    background-color: transparent !important;
}

.button-alert:hover{
    background-color: var(--red-over) !important;
    color: var(--white) !important;
}

.button-alert:focus{
    background-color: var(--red-over) !important;
    color: var(--white) !important;
    box-shadow: unset !important;
}