@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url(./mobile/style.mobile.css);
@import url(./helpers.css);
@import url(./colors.css);
@import url(./animations.css);

/* nonGoogleImport */
/* 
@font-face {
    font-family: "Jost";
    src: 
    url(../src/fonts/Jost/Jost-Regular.ttf) format('truetype'),
    url(../src/fonts/Jost/Jost-Black.ttf) format('truetype'),
    url(../src/fonts/Jost/Jost-Bold.ttf) format('truetype'),
    url(../src/fonts/Jost/Jost-ExtraBold.ttf) format('truetype'),
    url(../src/fonts/Jost/Jost-ExtraLight.ttf) format('truetype'),
    url(../src/fonts/Jost/Jost-Light.ttf) format('truetype'),
    url(../src/fonts/Jost/Jost-Medium.ttf) format('truetype'),
    url(../src/fonts/Jost/Jost-SemiBold.ttf) format('truetype'),
    url(../src/fonts/Jost/Jost-Thin.ttf) format('truetype');
} */

/* *{
    border: solid 1px red;
} */

html{
    /* background-color: black; */
    width: 100%;
    background: var(--color-dark-blue);
}

body{
    padding: 0px;
    margin: 0px;
    background: var(--main-background);
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Jost', sans-serif;
}

a > p:hover{
    color: var(--color-blue);
    transition: 100ms;
}

h1{
    padding: 0px;
    margin: 0px;
    color: var(--color-white);
    font-family: Jost;
    font-size: 50px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 2px;
}

h2{
    padding: 0px;
    margin: 0px;
    color: var(--color-white);
    font-family: Jost;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1.6px;
}

h3{
    color: var(--color-white);
    font-family: Jost;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.2px;
}

h5{
    color: var(--color-white);
    padding: 0px;
    margin: 0px;
    text-align: center;
    font-family: Jost;
    font-size: 35px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1.4px;
}

h6{
    color: var(--color-white);
    padding: 0px;
    margin: 0px;
    font-family: Jost;
    font-size: 28px;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1.12px;
}

p{
    padding: 0px;
    margin: 0px;
    color: var(--color-white);
    font-family: Jost;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1px;
}

header{
    gap: 0px;
    width: 100%;
    
}
header > .dash {
    margin: 0px 144px 0px 144px;
    width: calc(100% - (144px * 2));
}

.wrapper{
    padding: 0px 144px 0px 144px;
    align-items: center;
    height: 115px;
}

/* Для уменьшенных хедеров */
body.small > header > .wrapper{
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 0px 144px 0px 144px;
    height: fit-content;
    align-items: center;
}


.sign--options > li{
    padding: 38px;
}

.dash{
    width: 100%;
    height: 2px;
    background-color: var(--color-dash);
}

main{
    width: calc(100% - (144px * 2));
}

/* Main.html */
.h1--main-header{
    text-align: center;
    margin-top: 92px;
    text-wrap: wrap;
}


/* BrowsersDropDown start */
.browsers--container{
    margin-top: 58px;
    width: 95%; 
    display: flex;
    flex-direction: column;
    gap: 34px;
    overflow: hidden;
}

.browsers--drop-down input{
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.browsers--drop-down > label > * {
    transition: all 0.35s;
}

.browsers--drop-down input:checked ~ .browsers--list{
    transition: 300ms;
    height: 750px;
    padding-top: 74px;
    gap: 40px;
}

.browsers--list{
    height: 0;
    overflow: hidden;
    transition: all 0.35s;
    padding-top: 0px;
    gap: 0px;
    align-items: center;
    margin-bottom: 4px;
}

.open-list{
    
    cursor: pointer;
    gap: 34px;
    align-items: center;
}

.open-list > b{
    font-weight: 700;
}

.open-list > h5{
    min-width: 540px;
    max-width: fit-content;
}

.browsers--drop-down input:checked + label > .open-list > svg {
    transform: rotate(90deg);
    transition: 300ms;
}

.browsers--drop-down input + label > .open-list > svg {
    transform: rotate(0);
    transition: 300ms;
}

/* Таблица */
.browsers--support-table {
    margin-top: 90px;
	width: 100%;
	margin-bottom: 20px;
	border-collapse: collapse;
    color: var(--color-white); 
}

.browsers--support-table th {
	font-weight: bold;
	padding: 5px;
	border: 2px solid rgba(255, 255, 255, 0.15);;
}

.browsers--support-table td {
	border: 2px solid rgba(255, 255, 255, 0.15);;
	padding: 5px;
    margin: 0px auto;

    width: 176px;
    height: 94px;
    text-align: center;
}

.browsers--support-table td > .plus-icon{
    width: 25px;
    height: 25px;
}

.browsers--support-table tr:first-child td:nth-child(n){
    border-top: none;
}

.browsers--support-table tr:last-child td:nth-child(n){
    border-bottom: none;
}

.browsers--support-table tr td:first-child, .browsers--support-table tr th:first-child {
	border-left: none;
}

.browsers--support-table tr td:last-child, .browsers--support-table tr th:last-child {
	border-right: none;
}

.table--browser{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.table--browser-right{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
}

.table--browser > p, .table--browser-right > p{
    text-align: center;
    font-family: Jost;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.8px;
}

.table--browser > img, .table--browser-right > img{
    width: 30px;
    height: 30px;
}
/* BrowsersDropDown end */

.main-quick-info{
    margin-top: 66px;
    margin-bottom: 107px;
    width: 720px;
    gap: 48px;
}

.main-quick-info > h5 > span > a, .main-quick-info > h5 > span > a:visited{
    text-decoration: underline;
    color: var(--color-blue);
    transition: 100ms;
}

.main-quick-info > h5 > span > a:hover{
    color: var(--color-white);
    transition: 100ms;
}

.main-quick-info > b{
    font-weight: 600;
}

.how-to-use{
    margin-top: 107px;
    gap: 107px;
    margin-bottom: 107px;
}

.how-to-use > h1{
    width: 685px;
    text-align: center;
}

.how-to-use > video{
    background-color: black;
    width: 1116px;
    height: 562px;
    border-radius: 20px;
}

/* FAQ */

.FAQ--container{
    margin-top: 112px;
    width: 95%; 
    display: flex;
    flex-direction: column;
    gap: 61px;
    overflow: hidden;
    margin-bottom: 144px;
}

.FAQ--drop-down input{
    position: absolute;
    opacity: 0;
    z-index: -1;
}
.FAQ--drop-down > label > * {
    transition: all 0.35s;
}

.FAQ--drop-down input:checked ~ .FAQ--list{
    transition: 300ms;
    height: 850px;
    padding-top: 74px;
    gap: 40px;
}

.FAQ--drop-down input:checked ~ .FAQ--list:last-child{
    margin-bottom: 90px;
}

.FAQ--list{
    width: 857px;
    height: 0;
    overflow: hidden;
    transition: all 0.35s;
    padding-top: 0px;
    gap: 0px;
    align-items: center;
    margin-bottom: 4px;
}

.FAQ--drop-down > .open-list{
    
    cursor: pointer;
    gap: 34px;
    align-items: center;
}

.FAQ--drop-down > .open-list > b{
    font-weight: 700;
}

.FAQ--drop-down > .open-list > h5{
    min-width: 540px;
    max-width: fit-content;
}

.FAQ--drop-down input:checked + label > .open-list > svg {
    transform: rotate(90deg);
    transition: 300ms;
}

.FAQ--drop-down input + label > .open-list > svg {
    transform: rotate(0);
    transition: 300ms;
}

.FAQ--item{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.FAQ--item > p{
    color: var(--color-white);

    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    line-height: 110%;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.8px;
}

.FAQ--item > p > b{
    color: var(--color-white);
    font-family: Jost;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.96px;
}

.FAQ--item > p > span > a, .FAQ--item > p > span > a:visited{
    color: #FFF;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.8px;
    text-decoration-line: underline;
}

/* FAQ end */

.main-subscriptions{
    margin-top: 107px;
}

.main-subscriptions > h1{
    text-align: center;
}

.subscriptions--container{
    margin-top: 110px;
    margin-bottom: 126px;
}

.subscriptions-top{
    gap: 356px;
}

.subscriptions-rigth{
    gap: 100px;
}

.subscriptions-grid{
    display: grid;
    grid-template-columns: 20px repeat(2, 1fr) 20px 1fr 20px 1fr 20px;
    grid-template-rows: repeat(6, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
 
    #grid-dash-1 { grid-area: 2 / 1 / 7 / 2; }
    #grid-dash-2 { grid-area: 2 / 4 / 7 / 5; }
    #grid-dash-3 { grid-area: 2 / 6 / 7 / 7; }
    #grid-dash-4 { grid-area: 2 / 8 / 7 / 9; }

    #subscription-option-1 { grid-area: 1 / 2 / 2 / 4; }
    #subscription-description-1 { grid-area: 2 / 2 / 3 / 4; }
    #subscription-description-2 { grid-area: 3 / 2 / 4 / 4; }
    #subscription-description-3 { grid-area: 4 / 2 / 5 / 4; }
    #subscription-description-4 { grid-area: 5 / 2 / 6 / 4; }
    #subscription-price-1 { grid-area: 6 / 2 / 7 / 4; }

    #subscription-option-2 { grid-area: 1 / 5 / 2 / 6; } 
    #subscription-description-5 > h2 { font-size: 55px; }
    #subscription-description-5 { grid-area: 2 / 5 / 3 / 6; }
    #subscription-icon-1 { grid-area: 3 / 5 / 4 / 6; }
    #subscription-icon-2 { grid-area: 4 / 5 / 5 / 6; }
    #subscription-icon-3 { grid-area: 5 / 5 / 6 / 6; }
    #subscription-price-2 { grid-area: 6 / 5 / 7 / 6; }

    #subscription-option-3 { grid-area: 1 / 7 / 2 / 8; }
    #subscription-description-6 > h2 { font-size: 55px; }
    #subscription-description-6 { grid-area: 2 / 7 / 3 / 8; }
    #subscription-icon-4 { grid-area: 3 / 7 / 4 / 8; }
    #subscription-icon-5 { grid-area: 4 / 7 / 5 / 8; }
    #subscription-icon-6 { grid-area: 5 / 7 / 6 / 8; }
    #subscription-price-3 { grid-area: 6 / 7 / 7 / 8; text-align: center;}
    
.subscriptions-grid--first-column{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: 20px;
}

.grid-dash{
    margin-left: 10px;
    width: 2px;
    height: 100%;
    background-color: var(--color-dash);
}
/* Main.html */

footer{
    width: 100%;
    min-width: 100%;
    height: 338px;
    display: flex;
    justify-content: center;
    background-color: var(--color-dark-blue);
}

.footer--section{
    width: 100%;
    padding: 82px 0px 109px 0px;
    display: flex;
    flex-shrink: 1;
    flex-direction: row;
    gap: 120px;
    align-items: flex-start;
    justify-content: center;
}

.footer--section > h6{
    text-align: center;
    font-family: Jost;
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 1.2px;
}

.footer--links--wrap{
    display: flex;
    flex-direction: row;
    /* flex-wrap: wrap; */
    gap: 108px;
    align-items: flex-start;
    justify-content: flex-start;
    max-height: 330px;
    min-width: 800px;
    width: auto;
}

.footer--links--wrap > li > a{
    color: var(--color-blue);
    font-family: Jost;
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: 55px;
    letter-spacing: 1px;
    text-decoration-line: underline;
    text-transform: uppercase;
}

.footer--links--wrap > li > a:hover{
    color: var(--color-white);
    font-family: Jost;
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: 55px;
    letter-spacing: 1px;
    text-decoration-line: underline;
    text-transform: uppercase;
}

.footer--links--wrap > li > a > img:hover{
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(241deg) brightness(504%) contrast(104%);
}

.footer-telegram-wrap{
    gap: 44px;
}

/* SCREENSHOT - CARDS */
.vertical-dash{
    width: 2px;
    height: 100%;
    background-color: var(--color-dash);
}

.render-card--section{
    min-height: 400px;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 80px;
}

.render-card--section > h1{
    margin-top: 20%;
    font-weight: 700;
}

.render-card{
    max-height: 434px;
    height: 434px;
    max-width: 300px;
    width: auto;
    border-radius: 10px;
    background-color: var(--color-card-primary);
}

.render-card--big{
    max-height: 434px;
    height: 434px;
    max-width: fit-content;
    width: auto;
    border-radius: 10px;
    background-color: var(--color-card-primary);
}

.render-card--container{
    display: flex;
    justify-content: flex-start;
    width: 100%;
    height: 200%;
    gap: 28px;
    margin-bottom: 80;
    flex-wrap: wrap;
    row-gap: 56px;
}

.render-card--top{
    height: 80px; 
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 20px;
    padding: 0px 10px 0px 10px;
}

.render-card--top > img{
    width: 45px;
    height: 45px;
}

.render-card--bottom{
    min-height: 54px;
    height: 54px;
    background-color: var(--color-card-primary);
    border-radius:  0px 0px 10px 10px ;
}

.render-card--bottom > label > p{
    color: #FFF;
    text-align: center;
    font-family: Jost;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.64px;
    margin-left: 8px;
}

.render-card--bottom input[type="checkbox"]{
    position: absolute;
    width: 100px;
    height: 100px;
    opacity: 0;
}

.render-card--bottom input[type="radio"]{
    /* position: absolute; */
    width: 24px;
    height: 24px;
    border-radius: 0px;
    appearance: none;
    background-color: var(--color-dark-blue);
    /* opacity: 0; */
    cursor: pointer;
}

.render-card--bottom input[type="radio"]:checked{
    width: 24px;
    height: 24px;
    background-color: var(--color-blue);
    display: grid;
    place-content: center;
}

.render-card--state-display{
    display: flex;
}

.render-card--state-display--left{
    display: flex;
    flex-direction: column;
    max-width: 300px;
    height: 300px;
}

.render-card--state-display--left > img{
    width: 300px;
    height: 300px;
}

.render-card--state-display--right{
    display: flex;
    max-height: 300px;
    
    transition: 2s;
}

.render-card--state-display--right > img{
    margin: 0px;
    padding: 0px;
    width: auto;
    min-width: 25px;
    height: 300px;
    object-fit: cover;
    /* object-fit: fill; */
    background-color: var(--color-white);
    box-decoration-break: none;
}

.render-card--state-display > img{
    margin: 0px;
    padding: 0px;
    width: 300px;
    height: 300px;
    background-size:cover;
    box-decoration-break: none;
}

.animation--card-state, .card-state{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    position: relative;
    top: -80%;
    left: 0%;
    text-align: center;
}

.animation--card-state > p, .card-state > p{
    text-align: center;
    width: 200px;
}

.animation--card-state > img, .card-state > img{
    width: 45px;
}

.animation--card-state > a, .card-state > a{
    color: var(--color-card-primary);
    text-align: center;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.64px;
    text-decoration-line: underline;
    cursor: pointer;
    transition: 100ms;
}

.animation--card-state > a:hover, .card-state > a:hover{
    transition: 100ms;
    color: var(--color-white);
}

/* Results.html */

.link--to-site{
    width: 100%;
    
    margin-top: 28px;
    height: 72px;
    border: solid 2px rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
}

.link--to-site > h2{
    font-weight: 700;
    margin-left: 24px;
}

/*  */

/* Screenshots.html */

.settings--top{
    height: auto;
    padding: 0px;
    margin: 40px 0 34px 0;
    display: flex;
    width: 100%;
    gap: 36px;
    justify-content: center;
}

.link--input{
    width: 990px;
    height: 66px;
    border-radius: 10px;
    background: var(--color-input-blue);
    color: var(--color-white);
    padding: 0 0 0 24px;

    border: none;

    font-family: Inter;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1.2px;
}


/* Dropdown Button */
.dropbtn {
    flex-shrink: 0;
    width: 608px;
    background-color: var(--color-card-primary);
    color: var(--color-white);
    border: 2px solid var(--color-white);
    border-radius: 10px;
    cursor: pointer;

    font-family: Inter;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1.28px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    /* display: none; */
    max-height: 0px;
    overflow: hidden;
    position: absolute;
    transform: translateX(-6px) translateY(5px);
    background-color: var(--color-card-primary);
    width: 604px;
    z-index: 1;
    border: solid 2px var(--color-white);
    border-radius: 0px 0px 10px 10px;
    border-bottom: none;
    border-top: none;
    transition: 400ms;
}

.dropdown-content > .dash{
    margin-top: 20px;
    margin-bottom: 20px;
    height: 2px;
    padding: 0px;
    margin-left: 45px;
    width: 520px;
}

/* Links inside the dropdown */
.dropdown-content div {
    color: var(--color-white);
    /* padding: 28px 16px; */
    text-decoration: none;
    text-align: left;
    width: auto;
    /* margin-top: 20px; */
    padding-left: 130px;
}

/* Change color of dropdown links on hover */
.dropdown-content div:hover { background-color: var(--color-dash); }



/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
    
    border: solid 2px var(--color-white);
    border-radius: 0px 0px 10px 10px;
    border-top: none;
    height: 440px;
    max-height: 440px; 
    max-width: 604px;
    transition: 400ms; 
    z-index: 1;
} 

.button--wrap{
    display: flex;
    justify-content: space-between;
    margin: 0 30px 0 40px;
}

.button--wrap > span{
    padding-right: 50%;
}

#triangle-menu{
    transition: 200ms;
    width: 20px;
}

.triangle-rotated{
    transform: rotate(90deg);
    transition: 200ms;
}
/* Сверху | Справа | Снизу | Слева */


.settings{
    width: 100%;
    margin-bottom: 90px;
}

.backboard{
    margin-top: 34px;
    width: 100%;
    height: 440px;
    background: var(--color-card-primary);
    border-radius: 10px;
    margin-bottom: 65px;
}

.button-huge{
    text-align: center;
    font-family: Jost;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.44px;
    text-transform: uppercase;
    color: var(--color-white);

    cursor: pointer;

    width: 856px;
    height: 94px;

    border: none;
    border-radius: 10px;
    background: var(--color-blue);
}

/* Registration */

/* Возможно добавить красную обводку при фокусе на путсое поле */
#register-form{
    display: flex;
    justify-content: space-between;
    /* width: calc(100% - (144px*2)); */
    gap: 100px;
    margin-top: 37px;
    margin-bottom: 100px;
}

.left--fields{
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.left--fields > .button-huge{
    margin-top: 20px;
    width: 505px;
}

.small-input{
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.small-input-check{
    display: flex;
    flex-direction: row;
    gap: 18px;
    align-items: center;
}

.register-input, .register-input-check{
    height: 75px;
    width: auto;
    border-radius: 10px;
    background: var(--color-input-blue);
    color: var(--color-white);
    padding: 0 0 0 24px;

    border: none;

    font-family: Inter;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1.2px;
}

.register-input{
    min-width: 700px;
}

.register-input-check{
  min-width: 100px;
}

.backboard--registration{
    width: 726px;
    margin-top: 34px;
    /* width: 100%; */
    height: fit-content;
    background: var(--color-backboard);
    padding: 35px 40px;
    border-radius: 10px;
    margin-bottom: 65px;
    gap: 54px;
}

.backboard--registration > p{
    color: var(--color-white);

    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.96px;
}

.backboard--registration > div{
    display: flex;
    flex-direction: row;
    gap: 38px;
    align-items: center;
}

.register-check > input{
    color: var(--color-white);
    width: 25px;
    height: 25px;
    flex-shrink: 0;
}

.backboard--registration label.render-chkbx,
.backboard--registration label.render-chkbx::after,
.backboard--registration label.render-chkbx::before {
    box-sizing: border-box;
}
.backboard--registration label.render-chkbx *,
.backboard--registration label.render-chkbx *::after,
.backboard--registration label.render-chkbx *::before {
    box-sizing: border-box;
}
.backboard--registration label.render-chkbx {
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Так как .chkbx-mark имеет position: absolute; оставляем для него свободное место */
    cursor: pointer;
    user-select: none;
    margin-top: 41px;
}
.backboard--registration label.render-chkbx input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
/* Если input отмечен(:checked), то .chkbx-mark (область отметки), применяет данные стили */
.backboard--registration label.render-chkbx input:checked ~ .chkbx-mark {
    background-color: #496DB4;
}
/* При наведении(:hover) на всю область checkbox элемент .chkbx-mark (область отметки) применяет данные стили*/
.backboard--registration label.render-chkbx:hover input ~ .chkbx-mark {
    background-color: #5f8ee9;
}
/* При наведении(:hover) на всю область checkbox и при отмеченном input  элемент .chkbx-mark (область отметки) применяет данные стили*/
.backboard--registration label.render-chkbx:hover input:checked ~ .chkbx-mark {
    background-color: #324d81;
}
/* Исходные стили для области отметки .chkbx-mark */
.backboard--registration label.render-chkbx .chkbx-mark {
    position: absolute;
    top: 4px;
    left: 0;
    height: 24px;
    width: 24px;
    background-color: #273752;
    border: 3px solid #273752;
    transition: background-color 0.25s ease;
}
.backboard--registration label.render-chkbx .chkbx-txt {
    color: white;
    line-height: 1.4;
    font-size: 24px;
    font-family: Inter;
    text-transform: uppercase;
    margin-left: 22px;
}

.chkbx-txt > span > a{
    color: var(--color-white);
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.96px;
    text-decoration-line: underline;
}

.chkbx-txt > span > a:hover{
    color: var(--color-dark-blue);
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.96px;
    text-decoration-line: underline;
}

.chkbx-txt > span > a:visited{
    color: var(--color-white);
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.96px;
    text-decoration-line: underline;
}

/* Registration end */


/* Profile */
.subscription--offer{
    margin-top: 50px;
    display: flex;
    align-items: center;
    width: calc(100% - 288px);
    gap: 62px;
}

.subscription--offer > h6{
    color: var(--color-white);
    font-family: Inter;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1.12px;
}

.subscription--offer > .button-huge{
    height: 85px;
    width: 640px;

    color: var(--color-white);
    font-family: Inter;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.88px;
    text-transform: uppercase;
}

.done-tasks{
    margin-top: 57px;
    width: calc(100% - 288px);
}

.task-grid{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.task-details--line{
    padding: 20px;
    padding-right: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.task-details--line > .task--right{
    gap: 180px;
}

.task-details--line > .task--right > .flex{
    gap: 86px;
}

.task--container{
    display: flex;
    flex-direction: column;
}

.task{
    border: solid 1px var(--color-white);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto;
}

.task--container > .task > p{
    word-wrap: break-word;
}

@media screen and (max-width: 1790px) {
    .task--container > .task > p{
        word-wrap: break-word;
        max-width: 560px;
    }
}

@media screen and (max-width: 1550px) {
    .task--container > .task > p{
        word-wrap: break-word;
        max-width: 360px;
    }
}

@media screen and (max-width: 1150px) {
    .task--container > .task > p{
        word-wrap: break-word;
        max-width: 160px;
    }
}

.task--right{
    display: flex;
    align-items: center;
    gap: 100px;
}

.task--right > a{
    color: var(--color-white);
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.96px;
    text-decoration-line: underline;
}

.task--right > a:hover{
    color: var(--color-dark-blue);
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.96px;
    text-decoration-line: underline;
}

.task--right > a:visited{
    color: var(--color-white);
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.96px;
    text-decoration-line: underline;
}

.show-more-tasks{
    margin-top: 30px;
    margin-bottom: 48px;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
}

.show-more-tasks > img{
    width: 22px;
    height: 22px;
}

/* История задач <> Dropdown */

.tasks--accordion > .task--container{
    height: 0px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tasks--accordion > label > .open-list > img{
    width: 16px;
}

.tasks--accordion input{
    position: absolute;
    opacity: 0;
    z-index: -1;
}
.tasks--accordion > label > * {
    transition: all 0.35s;
}

.tasks--accordion input:checked ~ .task--container{
    transition: 300ms;
    height: fit-content;
    padding-top: 12px;
}

.tasks--accordion input:checked ~ .task--container:last-child{
    margin-bottom: 0px;
}

.tasks--accordion input:checked + label > .open-list > img {
    transform: rotate(90deg);
    transition: 300ms;
}

.tasks--accordion input + label > .open-list > img {
    transform: rotate(0);
    transition: 300ms;
}




/* Конец истории задач */

.profile-options{
    margin-top: 48px;
    width: calc(100% - 288px);
}

.profile-options--container{
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 66px;
    margin-bottom: 90px;
}

.profile-options--container > div > .button-huge{
    width: 423px;
    height: 75px;
}

.profile-option{
    display: flex;
    align-items: center;
    gap: 75px;
}

.profile-option > button.button-huge{
    color: var(--color-white);
    text-transform: none;
    font-family: Jost;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.2px;
}

.button-huge.button-red{
    background-color: var(--color-button-red);
}


/* Profile end */

/* PARAMS.html */

/* При media запросах стоит сделать сетку 2x2 через врап с бордерами (?) */
.backboard-big {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: fit-content;
    max-width: fit-content;
    min-width: fit-content;
    margin-top: 34px;
    padding-top:32px;
    padding-bottom: 27px;
    height: fit-content;
    background: var(--color-card-primary);
    border-radius: 10px;
    margin-bottom: 65px;
}
.os-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    margin-top: 0;
    margin-bottom: 0;
    width: 300px;
    padding: 0;
    padding-right: 50px;
    padding-left: 50px;
    padding-bottom: 26px;
    border-radius: 0;
    border-right: 2px solid #63728b;
    height: auto;
    max-height: fit-content;
    min-height: fit-content;
}
.os-card:last-child {
    border: 0;
}
.os-card .render-card--top {
    justify-content: left;
    padding: 0;
}
.render-card--select-browser {
    display: flex;
    flex-direction: column;
    padding: 0;
}
.render-card--select-browser label.render-chkbx,
.render-card--select-browser label.render-chkbx::after,
.render-card--select-browser label.render-chkbx::before {
    box-sizing: border-box;
}
.render-card--select-browser label.render-chkbx *,
.render-card--select-browser label.render-chkbx *::after,
.render-card--select-browser label.render-chkbx *::before {
    box-sizing: border-box;
}
.render-card--select-browser label.render-chkbx {
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Так как .chkbx-mark имеет position: absolute; оставляем для него свободное место */
    cursor: pointer;
    user-select: none;
    margin-top: 41px;
}
.render-card--select-browser label.render-chkbx input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
/* Если input отмечен(:checked), то .chkbx-mark (область отметки), применяет данные стили */
.render-card--select-browser label.render-chkbx input:checked ~ .chkbx-mark {
    background-color: #496DB4;
}
/* При наведении(:hover) на всю область checkbox элемент .chkbx-mark (область отметки) применяет данные стили*/
.render-card--select-browser label.render-chkbx:hover input ~ .chkbx-mark {
    background-color: #5f8ee9;
}
/* При наведении(:hover) на всю область checkbox и при отмеченном input  элемент .chkbx-mark (область отметки) применяет данные стили*/
.render-card--select-browser label.render-chkbx:hover input:checked ~ .chkbx-mark {
    background-color: #324d81;
}
/* Исходные стили для области отметки .chkbx-mark */
.render-card--select-browser label.render-chkbx .chkbx-mark {
    position: absolute;
    top: 4px;
    left: 0;
    height: 24px;
    width: 24px;
    background-color: #273752;
    border: 3px solid #273752;
    transition: background-color 0.25s ease;
}
.render-card--select-browser label.render-chkbx .chkbx-txt {
    color: white;
    line-height: 1.4;
    font-size: 24px;
    font-family: Inter;
    text-transform: uppercase;
    margin-left: 22px;
}

/* POP-UP INFO MESSAGE */
.container-info {
    position: relative;
    display: inline-block;
}
.img-info {
    display: block;
    width: 35px;
}

.container-info:hover > .popup-info-msg{
    visibility: visible;
}

.popup-info-msg {
    position: absolute;
    z-index: 1;
    top: 125%;
    right: 0%;
    margin-left: -60px;

    background-color: #8B97FF94;
    border-radius: 10px;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 30px;
    padding-right: 30px;
    width: fit-content;
    max-width: 434px;
    min-width: fit-content;
    color: #243D66;
    font-family: Inter;
    font-size: 16px;
    font-weight: 500;
    opacity: 58;
    visibility: hidden;
}

#popup-info-msg-1{
    width: 170px;
    z-index: 2;
}

#popup-info-msg-2{
    width: 400px;
}

/* PARAMS.html end */

/* Offer document */

.document--full{
/* null */
}

.document--full > ol{
    list-style:lower-roman;
    counter-reset: item;
}

.document--full > ol > li{
    list-style:decimal;
    padding: 0px;
    margin: 0px;
    color: var(--color-white);
    font-family: Jost;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1px;
}

/* Offer document end */

/* 404 */

.not-found-main{
    height: 100%;
    min-height: 600px;
    justify-content: space-around;
}

.not-found-main > h1{
    color: var(--color-white);

    font-family: Jost;
    font-size: 300px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
    letter-spacing: 12px;
}

.right-side-404{
    width: 600px;
    text-align: center;
    gap: 75px;
}

.right-side-404 > .button-huge {
    width: 405px;
    height: 85px;
    flex-shrink: 0;
    color: #FFF;

    text-align: center;
    font-family: Jost;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* 404 end */