:root{
    --white: rgba(255, 255, 255, 1);
    --white-50: rgba(255, 255, 255, 0.5);
    --dark-blue-opacity: rgba(3, 56, 120, 0.5);
    --dark-blue: rgba(3, 56, 120, 1);
    --dark-blue-hover: rgba(2, 40, 90, 1);
    --base-blue-opacity: rgba(0, 113, 186, 0.5);
    --base-blue: rgba(0, 113, 186, 1);
    --base-blue-hover: rgba(0, 90, 150, 1);
    --purple-opacity: rgba(183, 144, 253, 0.5);
    --purple: rgba(183, 144, 253, 1);
    --purple-hover: rgba(160, 115, 202, 1);
    --blue-50: rgba(10, 69, 132, 0.5);
    --blue-20: rgba(10, 69, 132, 0.2);
    --blue-10: rgba(10, 69, 132, 0.1);
    --text-color: rgba(16, 43, 76, 1);
    --light-blue-bg: rgba(243, 246, 249, 1);

    --primary-color: rgba(16, 43, 76, 1);
    --transparency-color: rgba(16, 43, 76, 0.5);

    --control-bg: rgba(67, 177, 46, 1);
    --control-color: rgba(255, 255, 255, 1);

    --header-height: 68px;
    --px: 16px;
    --py: 32px;
}

html, body{
    height: 100%;
}

html{
    scroll-behavior: smooth;
}

body{
    position: relative;
    min-width: 254px;
    color: var(--text-color, #222);
    background: var(--light-blue-bg);
    font-family: Arial, sans-serif;
    font-weight: 500;
    margin: 0;
    display: flex;
    flex-flow: column nowrap;
}

a, button, div{
    -webkit-tap-highlight-color: transparent;
}

.strong{
    font-weight: bold;
}

img{
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

.container-fluid{
    padding: var(--py) var(--px);
}

.logo{
    padding: 8px 16px 8px 0;
    color: var(--dark-blue);
    text-decoration: none;
    font-weight: bold;
}

.button{
    padding: 0 1.3em;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    min-height: 2.67em;
    max-width: max-content;
    display: grid;
    align-items: center;
}

.button_blue{
    background-color: var(--dark-blue);
    border: 2px solid var(--dark-blue);
    color: #FFF;
}

.button_light{
    color: var(--text-color);
    border: 2px solid var(--dark-blue);
    grid-template-columns: auto auto;
    justify-content: center;
}

.button_light svg{
    width: 32px;
    height: 32px;
}

header{
    border-bottom: 1px solid var(--blue-50);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 4;
    width: 100%;
    transition: opacity 0.5s;
}

header .container-fluid{
    height: var(--header-height);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background-color: var(--light-blue-bg);
    display: grid;
    grid-template-columns: 1fr max-content;
    grid-gap: 8px;
    align-items: center;
    align-content: center;
}

header .button_blue{
    display: none;
}

header .auth_button{
    cursor: pointer;
}

header .auth_informer_wrapper{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 8px;
    align-items: center;
}

header .auth_informer_wrapper svg{
    width: 32px;
    height: 32px;
}

.auth_button,
.auth_informer{
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    text-decoration: none;
    min-height: 2.67em;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--blue-20);
    color: var(--text-color);
}

header .auth_informer{
    display: none;
}

header .auth_button > :nth-child(-n+2),
header .auth_informer > :nth-child(-n+2){
    display: none;
}

.auth_button .line,
.auth_informer .line{
    width: 1px;
    height: 26px;
    margin: 0 8px;
    background-color: var(--dark-blue);
}

body.reg-main-active header{
    opacity: 0;
}

header .auth_informer_dropdown .dropdown-toggle{
    border: none;
    background-color: transparent;
}

header .auth_informer_dropdown .dropdown-item{
    color: var(--text-color);
    display: block;
    position: relative;
}

header .auth_informer_dropdown .dropdown-item.disabled{
    color: var(--blue-20)
}

header .auth_informer_dropdown .dropdown-item svg{
    width: 24px;
    height: 24px;
    color: #033878;
}

header .auth_informer_dropdown .dropdown-item span{
    padding: 2px 0 2px 8px;
    border-left: 1px solid var(--blue-20);
}

header .auth_informer_dropdown .dropdown-item.disabled svg{
    color: var(--blue-20)
}

.breadcrumbs{
    display: none;
    flex-flow: row nowrap;
    justify-content: flex-start;
    font-size: 18px;
    color: var(--transparency-color);
    overflow: hidden;
}

.breadcrumbs svg{
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
}

.breadcrumbs a{
    flex: 0 0 auto;
    color: var(--transparency-color);
    text-decoration: none;
}

.breadcrumbs a:after{
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-top: 1px solid var(--transparency-color);
    border-right: 1px solid var(--transparency-color);
    transform: rotate(45deg);
    margin: 0 16px 0 13px;
}

.breadcrumbs a:hover{
    color: var(--primary-color);
}

.breadcrumbs span{
    flex: 0 0 auto;
    display: block;
    color: var(--primary-color);
    text-overflow: ellipsis;
}

main{
    padding-top: var(--header-height);
    position: relative;
    z-index: 3;
}

.menu-open main{
    z-index: 4;
}

main .content{
    min-height: 300px;
}

.fixed{
    width: 80px;
    height: 80px;
    position: fixed;
    right: calc(var(--px) / 4);
    bottom: var(--py);

    border-radius: 50%;
    border: 1px dashed #FFF;
    background-color: #000;
    color: var(--white);
    text-align: center;
    font-size: 10px;
    text-decoration: none;
    display: grid;
    justify-items: center;
    align-content: center;

    z-index: 3;
}

.fixed small{
    color: var(--white-50);
}

.fixed svg,
.fixed img{
    display: none;
}

.fixed:hover{
    box-shadow: 0 0 5px 3px #999;
}

body.modal-open .fixed,
body.menu-open .fixed{
    display: none;
}

.reg-fixed{
    bottom: calc(var(--py) * 4);
    background-color: var(--dark-blue-opacity);
}

.reg-fixed:hover{
    background-color: var(--dark-blue);
}

.receipt-fixed{
    bottom: calc(var(--py) * 4);
    background-color: var(--purple-opacity);
}

.receipt-fixed:hover{
    background-color: var(--purple);
}

.support-fixed{
    bottom: calc(var(--py));
    background-color: var(--base-blue-opacity);
}

.support-fixed:hover{
    background-color: var(--base-blue);
}

#hde-container{
    right: -1px !important;
    bottom: 28px !important;
}

@media all and (min-width: 640px){
    #hde-container{
        right: 3px !important;
        bottom: 28px !important;
    }
}

@media all and (min-width: 768px){
    .fixed.support-fixed img{
        visibility: hidden;
    }

    #hde-container{
        right: 30px !important;
        bottom: 89px !important;
    }
}

@media all and (min-width: 1200px){
    #hde-container{
        right: calc(var(--px) / 4 + 31px) !important;
        bottom: 118px !important;
    }
}

#hde-container.hde-container-mobile{
    right: 0 !important;
    bottom: 0 !important;
}

body.modal-open #hde-container,
body.menu-open #hde-container{
    display: none !important;
}

/*
#hde-container{
    bottom: -200px !important;
}

/*.hde-container-mobile{
    top: 0 !important;
    height: calc(100vh + 200px) !important;
}

#hde-chat-container{
    padding: 0 0 200px 0 !important;
}

@media all and (min-width: 480px){
    .hde-container-mobile{
        top: auto !important;
        width: 350px !important;
        height: 650px !important;
    }

    .hde-container-mobile #hde-chat-container,
    .hde-container-mobile #hde-chat-container iframe{
        height: 450px;
    }
}*/

footer .container-fluid{
    display: grid;
    grid-gap: 16px;
    /*@formatter:off*/
    grid-template-areas:
        "ll"
        "ii"
        "c1"
        "bb"
        "oo"
        "c2"
        "cr"
        "sa";
    /*@formatter:on*/
}

footer .logo{
    grid-area: ll;
}

footer .info{
    grid-area: ii;
}

footer .contacts1{
    grid-area: c1;
}

footer .button_blue{
    grid-area: bb;
}

footer .other{
    grid-area: oo;
}

footer .contacts2{
    grid-area: c2;
}

footer .copyright{
    grid-area: cr;
    margin-right: 70px;
}

footer .site_approval{
    grid-area: sa;
    text-align: right;
    margin-right: 70px;
}

footer .info,
footer .contacts1,
footer .copyright,
footer .site_approval,
footer .contacts1 a{
    color: var(--transparency-color);
}

footer .contacts2,
footer .contacts2 a,
footer .other a{
    color: var(--text-color);
    text-decoration: none;
}

footer .contacts1{
    font-weight: bold;
}

footer .contacts1 a{
    text-decoration: none;
}

footer .contacts1 a.em{
    font-style: italic;
    text-decoration: underline;
}

footer .contacts2 li{
    display: flex;
}

footer .contacts2 li svg{
    width: 32px;
    height: 32px;
    margin-right: 8px;
}

footer .other{
    display: grid;
}

footer .button{
    max-width: 320px;
}

footer .contacts2{
    font-weight: bold;
}

footer .contacts2 ul{
    list-style: inside none;
    line-height: 1.5rem;
    padding: 0;
}

footer .contacts2 ul li{
    margin-bottom: 1rem;
}