NUXT_FRONTEND/assets/styles/settings/ui.less

.basic_content{
	background: white;
	box-sizing: border-box;
    margin: 20px auto;
    max-width: 1306px;
    h1,h2{
	    margin: 15px 0;
    }
}
h1{
	font-size: 36px;
}
p{
	margin-top: 10px;
	margin-bottom: 10px;
}
a{
	&:hover{
		color: rgba(59, 85, 115, 1);
	}
}
.simple-button{
	padding: 10px 20px;
	background: rgba(90, 116, 139, .1);
	border-radius: 10px;
	margin: 10px 0 20px;
}

@media (max-width: 576px) {
	h1{
		font-size: 22px;
	}
	h2{
		font-size: 18px;
	}
	h1,h2,h3,h4{
		line-height: 130%;
		margin-top: 10px;
		margin-bottom: 5px;
	}
}
form{
	margin: 20px 0;
	label{
		background: white;
		color: #878787;
		display: inline-block;
		padding: 0 5px 5px 0;
		margin-bottom: -10px;
		font-size: 14px;
		position: relative;
	}
	input{
		width: 100%;
		display: block;
		max-width: 350px;
		margin: -8px 0 20px;
		padding: 0;
		line-height: 1;
		border: none;
		border-radius: 0;
		background: #fff;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		outline: 0;
		color: #000;
		height: 44px;
		padding: 0 15px;
		font-size: 18px;
		border: 1px solid #ebebeb;
	}
	.agreement{
		font-size: 12px;
		line-height: 150%;
		margin: 20px 0;
		color: #878787;
		a{
			color: #FF7F00
		}
	}
}

.adaptive_flex{
	display: flex;
	@media (max-width: 576px) {
		flex-direction: column;
	}
	.column{
		padding: 20px;
	}
}
.radio {
    position: relative;
    display: block;
    padding-left: 40px;
    font: 16px/21px @font-main;
    &__input {
        position: absolute;
        visibility: hidden;
        appearance: none;
        &:checked {
            +.radio__icon {
                background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23FF7F00' stroke='white' stroke-width='2'/%3E%3C/svg%3E ");
            }
        }
    }
    &__icon {
        .size(20px);
        position: absolute;
        left: 0;
        top: 3px;
        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='10' fill='white'/%3E%3C/svg%3E%0A");
        cursor: pointer;
    }
    &__text {
        display: inline-block;
        color: @color-white;
    }
    &__input-text {
        padding: 1px 0;
        max-width: 211px;
        border: none;
        background-color: transparent;
        border-bottom: 1px solid rgba(@color-white, .22);
        color: @color-white;
        font: 16px/21px @font-main;
        &::placeholder {
            color: rgba(@color-white, .35);
        }
    }
    &__result {
        display: none;
        padding-top: 1px;
    }
}

@media @media-sm {
    .radio {
        font: 15px/20px @font-main;
    }
}

@media @media-xs {
    .radio {
        &__result {
            position: relative;
            left: -40px;
        }
    }
}

.radio-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    &__line {
        position: relative;
        flex: 1 0 275px;
        max-width: 275px;
        height: 7px;
        border-radius: 23px;
        background-color: rgba(@color-white, .12);
    }
    &__line-fact {
        .size(0, 100%);
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 23px;
    }
    &__percent {
        font: 14px/18px @font-main;
        color: @color-white;
    }
}

@media @media-xs {
    .radio-result {
        &__percent {
            margin-left: 8px;
        }
    }
}

@media @media-xxs {
    .radio-result {
        &__line {
            flex: 1 0 240px;
            max-width: 240px;
        }
    }
}

.radio-result_orange {
    .radio-result__line-fact {
        background-color: @color-orange;
    }
}

.radio-result_blue {
    .radio-result__line-fact {
        background-color: @color-blue;
    }
}

html.dark-mode {
    background-color: @color-black;

    .page-content {
        background-color: @color-black;
    }

    .header__bottom {
        a { color: @color-white; }
        background-color: @color-black-light;
    }

    .header-bottom__burger {
        filter: invert(100%);
    }

    .header-comments-item__top {
        color: @color-white;
    }

    .footer-top {
        background-color: @color-black-light;
    }
}