* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    body {
        overflow: auto;

    }
}


body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/*Header*/
.title {
    font-size: 2rem;
}

@media (max-width: 768px) {
    .head h1 {
        font-size: 2rem;
    }
}
.head {
    color: #DCBE96;
    width: auto;
}

header {
    width: 100%;
}

@media (min-width: 768px) {
    .logo {
        width: 120px;
        height: auto;
    }
}

@media (max-width: 767px) {
    .logo {
        width: 60px;
        height: auto;
    }
}

/*Content*/

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;
    margin: auto auto 50px;
    max-width: 1320px;
    width: 100%;
    gap: 50px;
    font-family: 'Inter', sans-serif;
}

@media (max-width: 768px) {
    main {
        max-width: 100%;
    }
}

.row {
    padding-right: 10px !important;
}

@media (min-width: 768px) {
    .quote {
        height: 100px;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .quote {
        height: 190px;
        width: 100%;
    }
}

.quote {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #DCBE96;
    background-color: #575C5F;
    border-radius: 25px;
}

@media (max-width: 768px) {
    .min-container {
        flex-wrap: wrap;
        display: flex;
        flex-direction: row;
    }

    .num_1 {
        order: 2;
    }

    .num_2 {
        order: 1;
    }
}
.span_h {
    font-size: 2rem;
  
}
.btn-secondary {
    background-color: #FF8C00;
}

.myChart_4 {
    align-self: flex-end;
}

:root {
    --blue: #FF8C00; /* изменяем значение переменной $blue на #007bff */
    --bs-button-text-color: #fff;
    --bs-button-bg: var(--blue);
    --bs-button-active-bg: #FF8C00;
    --bs-button-border-radius: 0;
    --bs-button-box-shadow: none;
    --bs-accent: #FF8C00;
}

.accordion-button:not(.collapsed) {
    color: #fff;
    background-color: var(--bs-button-active-bg);
}

.accordion-button:not(.collapsed)::before {
    background-color: #fff;
}

.accordion-header {
    margin-bottom: 0;
}

.accordion-body {
    border-top: 1px solid rgba(0, 0, 0, 0.125);
}

/*Footer*/

/* Privacy */
.privacy h1 {
    text-align: center;
    margin: 50px;
}

.privacy h2 {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 500;
}

.privacy h3 {
    font-size: 1.25rem;
    font-weight: 500;
}

.privacy ol, ul {
    list-style-type: none;
}

.privacy ol {
    counter-reset: num;
}

.privacy ol > li {
    margin-top: 50px;
    position: relative;
}

.privacy ol > li:before {
    counter-increment: num;
    content: counter(num) ".";
    position: absolute;
    top: -4px;
    left: -37px;
    width: 50px;
    display: inline-block;
    font-size: 1.5rem;
}

.loader {
    position: fixed;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.7);
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*Test*/
label img {
    width: 100px;
    height: 100px;
    margin: 20px;
}

label img:hover {
    box-shadow: 0 .5em 1em 0 rgba(0, 0, 0, 0.15), 0 .4em .5em -.4em rgba(0, 0, 0, 0.4);
    cursor: pointer;
}


@media (max-width: 767px) {
    label img {
        height: 4rem;
        width: 100%;
        margin: 0 auto;
        margin-bottom: 2rem;
    }
    label img:hover {
        box-shadow: none;
        cursor: default;
    }
}

.radio {
    display: none;
}

.img_question {
    width: 100rem;
    height: auto;
}

.image_div {
    height: 200px;
}

.answers {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.finish_input {
    width: 15rem;
}

.timer {
    height: 20px;
}

.q_number {
    color: #FF8C00;
}

.finish_label {
    padding: .375rem .75rem;
}

.finish_button {
    width: 15rem;
}

/*Feedback*/

.feedback_textarea {
    max-width: 30rem;
    height: 10rem;
}


.lang_button {
    background-color: transparent;
    border: none;
}

.lang_button:active {
    background-color: transparent;
    border: none;
}

.lang_button:hover{
    background-color: transparent;
    border: none;
}