@import url('../images/font-icons/clb-icon.css');

@import url('../fonts/fonts.css');
@import url('./components/index.css');
@import url('./blocks/index.css');

:root {
    --color-blue: #3861fb;
    --color-blue-hover: #3459e7;
    --color-white: #ffffff;
    --color-light-gray: #f5f5f5;
    --color-black: #1B1B1B;
    --color-red: #e04853;
    --color-bg-error: #faf7ef;
    --color-green: #5ab973;
    --color-light-green: #d8efe8;
    --color-orange: #ef9a45;
    --color-light-orange: #ffe2b3;
    --color-222222: #222222;
    --color-858585: #858585;
    --color-b9b9ba: #b9b9ba;
    --color-cecece: #cecece;
    --color-d9d9d9: #d9d9d9;
    --color-e4e4e4: #e4e4e4;
    --color-ebebeb: #ebebeb;
    --color-d1e6fb: #d1e6fb;
    --color-61c3c3: #61c3c3;
}

html {
    font-size: 16px;
    text-underline-offset: 19%;

    @media (min-width: 1200px) and (max-width: 1600px) {
        font-size: 14px;
    }
}

body {
    font-family: Inter, serif, Fluent Emoji Color;
    font-weight: normal;
    line-height: 1.2;
    font-size: .875rem;
    background-color: var(--color-light-gray);
    color: var(--color-black);
}

.wrap {
    overflow-x: clip;
    background-color: inherit;
}

.main {
    flex: 1 0 auto;
}

a {
    color: var(--color-blue);
    text-decoration: none;
    transition: color .3s ease-in-out, background-color .3s ease-in-out;

    &:hover {
        color: var(--color-blue-hover);
        text-decoration: underline;
    }
}

.container {
    max-width: 95.125rem;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    margin-right: auto;
    margin-left: auto;

    @media (max-width: 1199px) {
        padding-right: .625rem;
        padding-left: .625rem;
    }
}

.title {
    margin: 0;
    font-weight: 600;
    font-size: 2.625rem;

    @media (max-width: 991px) {
        font-size: 1.875rem;
    }
}

.subtitle {
    margin: 0.625rem 0 0;
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--color-222222);
}

.min-width-0 {
    min-width: 0;
}

.min-width-250 {
    min-width: 15.625rem;
}

.logo_svg {
    color: #333;
    vertical-align: middle;
}

.bg-color-light-gray {
    background-color: var(--color-light-gray);
}

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

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

.gap-1 {
    gap: .25rem !important;
}

.gap-2 {
    gap: .5rem !important;
}