:root {
    --color-blue: #141747;
    --color-blue-light: #2C2F5A;
    --color-orange: #F67003;
    --color-orange-light: #FAA968;

    --color-white: #FFFFFF;

    --font-family: 'Signika';
}

*{
    margin: 0 ;
    box-sizing: border-box;
    padding: 0;
}

body {
    max-width: 100vw;
    height: 100vh;
}

html, h1, h2, h3, h4, h5, h6, p {
    font-family: 'Signika', sans-serif;
}

h1 {
    font-family: SignikaCF-Regular;
}

.border-primary {
    border: 1px solid var(--color-blue) !important;
}

.toast-container {
    font-family: var(--font-family);
}

.toast-header {
    background-color: var(--color-blue);
    color: var(--color-white);
}

.col-form-label {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 1px;
    color: #FFFFFF;
    width: 100%;
}

.btn {
    padding: 8px 16px;
    font-family: var(--font-family);
    border: none;
}

.btn-primary {
    background-color: var(--color-blue);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: var(--color-blue-light);
    color: var(--color-white);
}

.btn-secondary {
    background-color: var(--color-orange);
    color: var(--color-white);
}

.btn-secondary:hover {
    background-color: var(--color-orange-light);
    color: var(--color-white);
}

.form-select {
    border-radius: 4px;
    color: var(--color-blue);
    font-family: var(--font-family);

    --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg width='11' height='7' viewBox='-2 -2 13 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.00409 6.00409C4.87249 6.00485 4.74202 5.97963 4.62019 5.92986C4.49835 5.8801 4.38753 5.80677 4.29409 5.71409L0.294092 1.71409C0.200853 1.62085 0.126893 1.51016 0.0764322 1.38834C0.0259719 1.26652 1.96485e-09 1.13595 0 1.00409C-1.96485e-09 0.872232 0.0259719 0.741664 0.0764322 0.619842C0.126893 0.49802 0.200853 0.38733 0.294092 0.294091C0.38733 0.200853 0.498021 0.126892 0.619843 0.0764313C0.741665 0.0259709 0.872233 -1.96485e-09 1.00409 0C1.13595 1.96486e-09 1.26652 0.0259709 1.38834 0.0764313C1.51016 0.126892 1.62085 0.200853 1.71409 0.294091L5.00409 3.60409L8.30409 0.424091C8.39608 0.321802 8.50819 0.239593 8.6334 0.182607C8.75862 0.125621 8.89424 0.0950833 9.03179 0.0929041C9.16935 0.0907248 9.30587 0.11695 9.43283 0.169941C9.55978 0.222932 9.67444 0.301549 9.76962 0.400873C9.86481 0.500198 9.93848 0.618093 9.98602 0.747188C10.0336 0.876282 10.054 1.0138 10.0459 1.15113C10.0379 1.28847 10.0016 1.42267 9.93936 1.54535C9.8771 1.66802 9.7902 1.77653 9.68409 1.86409L5.68409 5.72409C5.50122 5.90041 5.25809 6.00052 5.00409 6.00409Z' fill='%23F67003'/%3E%3C/svg%3E");
}


/* Custom CSS */
.o-header {
    height: 120px;
}

.o-background-blue {
    background-color: var(--color-blue);
}

.o-background-blue-light {
    background-color: var(--color-blue-light);
}

.o-icon-blue {
    fill: var(--color-blue);
}

.o-icon-container {
    width: 20px;
    height: 20px;
}

.o-btn-icon {
    padding: 10px;
    font-family: var(--font-family);
    border: none;
    border-radius: 5px;
}

.o-image-bottom{
    position:fixed;
    bottom:0px;
    left:0%;
    z-index: -1;
}

.o-image-design-bottom{
    position:fixed;
    bottom:0px;
    left:25%;
}

.o-text-area {
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #141747;
    border-radius: 5px;
    height: 117px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #A2A5CC;
}

.o-text-tips {
    box-sizing: border-box;
    padding: 25px;
    gap: 24px;
    background: #FFFFFF;
    border: 2px solid var(--color-blue);
    border-radius: 5px;
}

.o-information {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 1px;
}


/* Media screens */
@media only screen and (max-width: 990px) {
    .o-output-buttons {
        display: flex;
        justify-content: center;
    }
}