html {
    --corner-radius: 30px;
    --light-gray: #FAF8FA;
    --color-orange: #FF7536;
    --color-purple: #9441DE;
}

body {
    font-family: 'Aldrich', sans-serif;
}

.wrapper-itleg {
    text-align: center;
    flex-direction: column;
    display: grid;
    grid-template-columns: 40% 60%;
    width: 100%;
    height: 100vh;
}

.box1-itleg {
    margin: auto;
    grid-column-start: 1;
    grid-column-end: 2;
}

.box2-itleg {
    margin: 50% auto;
    grid-column-start: 2;
    grid-column-end: 3;
}

.box3-itleg {
    margin-top: auto;
    margin-bottom: auto;
}

.uil-user {
    font-size: 25px;
    color: rgb(154, 154, 154);
}

.uil-lock {
    font-size: 25px;
    color: rgb(154, 154, 154);
}

.h1-itleg {
    color: #348F6C;
    text-align: center;
    font-size: 25px;
}

.button-itleg {
    cursor: pointer;
    margin: 30px;
    background-color: #348F6C;
    border: none;
    color: rgb(255, 255, 255);
    padding: 15px 65px;
    text-align: center;
    font-size: 20px;
    border-radius: 50px;
    outline: none !important;
    width: 250px;
}

    .button-itleg:hover {
        box-shadow: 0 1px 5px #d2cbc3, 0 5px 10px rgb(197, 197, 197);
    }


.input-field-itleg {
    padding: 15px 15px;
    padding-left: 30px;
    width: 240px;
    text-decoration-color: black;
    font-size: 16px;
    outline: none;
    border: none;
}

.img-itleg {
    max-width: 75%
}

.input-contaoner-itleg {
    border-bottom: 1px solid;
    border-color: rgb(186, 186, 186);
}

@media screen and (min-width:600px) and (max-width:1024px) {
    .img-itleg {
        min-width: 10%
    }
}

.grid_dashboard-admin-itleg {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-rows: none;
    min-height: 100vh;
    width: 100%;
    margin: 0px;
    background-color: #348F6C;
}

.logo-admin-itleg {
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
    font-family: 'Aldrich', sans-serif;
    color: #ffffff;
    font-size: 25px;
    -webkit-user-select: none;
}

.bottom-line-admin-itleg {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 250px;
    border-bottom: 1px solid;
    border-color: #66a18c;
}

.bottom-line-admin-logo-itleg {
    margin-top: 10px;
    width: 300px;
    border-bottom: 1px solid;
    border-color: #66a18c;
}

.nav-admin-itleg {
    padding-left: 1em;
    -webkit-user-select: none;
    cursor: pointer;
    font-weight: 100;
    font-size: 22px;
    color: #ffffff;
    position: relative;
}

.uil-nav {
    padding-right: 1em;
    color: #FFCF96;
}

.navbar-itleg {
    padding-left: 1em;
    padding-top: 1em;
    padding-bottom: 1em;
}

.navbar-itleg-active {
    position: relative;
    font-weight: 300;
    padding-left: 30px;
    background: #ffffff;
    color: #348F6C;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    z-index: 3
}

.font-admin-itleg {
    font-family: sans-serif;
}

.box-content-admin-itleg {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    padding-top: 2em;
    padding-left: 3em;
    padding-right: 3em;
    column-gap: 2em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-right: 1em;
    background: rgb(255, 255, 255);
    border-radius: 20px;
}

.grid_dashboard-itleg {
    width: 100%;
    height: 100%;
    background-color: #FDF9F3;
}

.grid-container-itleg {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    gap: 1em 1em;
    height: 100vh;
}

@media all and (-ms-high-contrast:none) {
    .grid-container-itleg {
        display: grid;
        -ms-grid-columns: repeat(5, 1fr);
        -ms-grid-rows: repeat(4, 1fr);
    }
}

.icon-block-admin-itleg {
    font-size: 70px;
    color: rgb(255, 255, 255);
}

.icon-block-squares-itleg {
    font-size: 70px;
    color: rgb(255, 255, 255);
}

.box-squares1-itleg {
    grid-column-start: 2;
    grid-column-end: 3;
}

.box-squares2-itleg {
    grid-column-start: 3;
    grid-column-end: 4;
}

.box-squares3-itleg {
    grid-column-start: 4;
    grid-column-end: 5;
}

.box-squares4-itleg {
    grid-column-start: 5;
    grid-column-end: 6;
}

.item1-itleg {
    grid-column-start: 2;
    grid-column-end: 5;
}

.box-admin-itleg {
    grid-row-start: 3;
    grid-row-end: 4;
    padding: 1em;
    display: grid;
    margin: auto;
    height: 170px;
    width: 170px;
    background: #348F6C;
    color: rgb(255, 255, 255);
    -webkit-touch-callout: none;
    border-radius: 10px;
}

    .box-admin-itleg:hover {
        box-shadow: 0 1px 5px #d2cbc3, 0 5px 10px rgb(197, 197, 197);
    }


.margin-auto-itleg {
    margin: auto;
}

.margin-top-itleg {
    margin-top: 30px;
}

.tabs li {
    /* Что бы псевдоэлементы можно было абсолютно позиционировать в табах */
    position: relative;
}

    .tabs li a {
        color: white;
        text-decoration: none;
    }

.navbar-holy-active .tabs li a {
    color: #348F6C;
}

.tabs .navbar-itleg-active {
    /* Активную вкладку помещаем поверх остальных */
    z-index: 3;
}

    .tabs .navbar-itleg-active a {
        /* Цвета активной вкладке */
        background: white;
        color: #348F6C;
    }

.tabs li:before, .tabs li:after,
.tabs li a:before, .tabs li a:after {
    /* Все псевдоэлементы абсолютно позиционированы относительно нижней грани*/
    position: absolute;
    bottom: 0;
}
/* Только первая, последная и активная вкладка создают псевдоэлементы, остальным они не нужны*/

.tabs .navbar-itleg-active:after, .tabs .navbar-itleg-active:before,
.tabs .navbar-itleg-active a:after, .tabs .navbar-itleg-active a:before {
    content: "";
}

.tabs .navbar-itleg-active:before, .tabs .navbar-itleg-active:after {
    background: white;
    /* Прямоугольники под окружностями */
    z-index: 1;
}
/* Прямоугольники */
.tabs li:before, .tabs li:after {
    background: #ffffff;
    width: 25px;
    height: 25px;
}

.tabs li:before {
    right: 0px;
    top: -20px;
}

.tabs li:after {
    bottom: -25px;
    right: 0px;
}
/* Окружности */
.tabs li a:after, .tabs li a:before {
    width: 50px;
    height: 50px;
    /* Окружности … э … крууугггглыыыыыеееее */
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    background: #348F6C;
    /* Окружности над прямоугольниками */
    z-index: 2;
}

.tabs .navbar-itleg-active a:after, .tabs .navbar-itleg-active a:before {
    background: #348F6C;
}
/* Первая и последняя вкладки обладают разными фоновыми цветами у внешних элементов*/
.tabs li:first-child.navbar-itleg-active a:before,
.tabs li:last-child.navbar-itleg-active a:after {
    background: #348F6C;
}

.tabs li a:before {
    right: 0px;
    top: -50px;
}

.tabs li a:after {
    right: 0;
    bottom: -50px;
}

.pagination {
    text-align: center;
    margin-top: 3em;
}


.pagination-template {
    display: inline-flex;
    outline: none;
    list-style: none;
    text-align: center;
    text-decoration: none;
}

    .pagination-template a {
        float: left;
        padding: 8px;
        text-decoration: none;
        color: #348F6C;
    }

        .pagination-template a.active {
            background-color: #E4CB94;
            color: white;
            border-radius: 50px;
        }

.pagination a {
    text-decoration: none;
    color: #348F6C;
    padding: 8px 16px;
}

    .pagination a.active {
        background-color: #E4CB94;
        color: white;
        border-radius: 50px;
    }

.pagination-template :hover {
    background-color: #ececec;
    border-radius: 100px;
}


.analytics-header-itleg {
    font-family: 'Roboto', sans-serif;
    color: #000000;
    font-weight: 300;
}

h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
}

table {
    grid-column-start: 1;
    grid-column-end: 5;
    font-family: 'Roboto', sans-serif;
    border-collapse: collapse;
    text-align: left;
    border-radius: 20px;
    box-shadow: 0 14px 28px rgba(173, 173, 173, 0.22), 0 10px 10px rgba(173, 173, 173, 0.22)
}

.tbody {
    overflow: scroll;
}

th {
    font-weight: 500;
    color: rgb(197 197 197);
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 8px;
}

td {
    font-weight: 300;
    color: rgb(0, 0, 0);
    padding: 10px 15px;
    transition: .3s linear;
    border-bottom: 1px solid #ececec;
}

.img-user-admin-itleg {
    max-width: 50px;
    border-radius: 100px;
}

.switch {
    display: inline-block;
    height: 25px;
    position: relative;
    width: 45px;
    margin-top: 25px;
}

    .switch.disabled {
        filter: grayscale(1);
        pointer-events: none;
    }

.switch-packeges {
    float: right;
    display: inline-block;
    height: 25px;
    position: relative;
    width: 45px;
}

.switch input {
    display: none;
}

.switch-packeges input {
    display: none;
}

.slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
}

    .slider:before {
        background-color: #fff;
        bottom: 5px;
        content: "";
        height: 16px;
        left: 4px;
        position: absolute;
        transition: .4s;
        width: 16px;
    }

input:checked + .slider {
}

    input:checked + .slider:before {
        transform: translateX(21px);
        background-color: var(--color-orange);
    }

.slider.round {
    border-radius: 14px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.button-table-itleg button:hover {
    background-color: #E4CB94;
    color: #ffffff;
}

.button-table-itleg button:active {
    background-color: #348F6C;
    color: #ffffff;
}


.box-content-form-itleg {
    display: grid;
    grid-template-columns: 1fr 400px;
    padding-top: 2em;
    padding-left: 5em;
    padding-right: 5em;
    padding-bottom: 2em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-right: 1em;
    background: rgb(255, 255, 255);
    border-radius: 20px;
}

.input-contaoner-loader-itleg {
    border: 1px solid;
    border-color: rgb(186, 186, 186);
}

.input-field-loader-itleg {
    padding: 15px 100px;
    padding-left: 30px;
    width: 150px;
    text-decoration-color: black;
    font-size: 16px;
    outline: none;
    border: none;
}

.margin-h1 {
    margin-top: 1em;
    margin-bottom: 1em;
}

.form-app-edit-itleg {
    border: 1px solid;
    border-color: rgb(186, 186, 186);
    width: 300px;
    margin-top: 1em;
    margin-bottom: 2em;
}

.box-content-loader-itleg {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding-top: 2em;
    padding-left: 5em;
    padding-right: 5em;
    padding-bottom: 2em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-right: 1em;
    background: rgb(255, 255, 255);
    border-radius: 20px;
}


/* loader*/



.body-loader-itleg {
    position: absolute;
    top: 50%;
    margin: auto;
    left: 50%;
    animation: speeder 0.4s linear infinite;
}

    .body-loader-itleg > span {
        height: 5px;
        width: 35px;
        background: #348F6C;
        position: absolute;
        top: -19px;
        left: 60px;
        border-radius: 2px 10px 1px 0;
    }

.base-loader-itleg span {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-right: 100px solid #348F6C;
    border-bottom: 6px solid transparent;
}

    .base-loader-itleg span:before {
        content: "";
        height: 22px;
        width: 22px;
        border-radius: 50%;
        background: #348F6C;
        position: absolute;
        right: -110px;
        top: -16px;
    }

    .base-loader-itleg span:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-top: 0 solid transparent;
        border-right: 55px solid #348F6C;
        border-bottom: 16px solid transparent;
        top: -16px;
        right: -98px;
    }

.face-loader-itleg {
    position: absolute;
    height: 12px;
    width: 20px;
    background: #348F6C;
    border-radius: 20px 20px 0 0;
    transform: rotate(-40deg);
    right: -125px;
    top: -15px;
}

    .face-loader-itleg:after {
        content: "";
        height: 12px;
        width: 12px;
        background: #348F6C;
        right: 4px;
        top: 7px;
        position: absolute;
        transform: rotate(40deg);
        transform-origin: 50% 50%;
        border-radius: 0 0 0 2px;
    }

.body-loader-itleg > span > span:nth-child(1),
.body-loader-itleg > span > span:nth-child(2),
.body-loader-itleg > span > span:nth-child(3),
.body-loader-itleg > span > span:nth-child(4) {
    width: 30px;
    height: 1px;
    background: #348F6C;
    position: absolute;
    animation: fazer1 0.2s linear infinite;
}

.body-loader-itleg > span > span:nth-child(2) {
    top: 3px;
    animation: fazer2 0.4s linear infinite;
}

.body-loader-itleg > span > span:nth-child(3) {
    top: 1px;
    animation: fazer3 0.4s linear infinite;
    animation-delay: -1s;
}

.body-loader-itleg > span > span:nth-child(4) {
    top: 4px;
    animation: fazer4 1s linear infinite;
    animation-delay: -1s;
}

@keyframes fazer1 {
    0% {
        left: 0;
    }

    100% {
        left: -80px;
        opacity: 0;
    }
}

@keyframes fazer2 {
    0% {
        left: 0;
    }

    100% {
        left: -100px;
        opacity: 0;
    }
}

@keyframes fazer3 {
    0% {
        left: 0;
    }

    100% {
        left: -50px;
        opacity: 0;
    }
}

@keyframes fazer4 {
    0% {
        left: 0;
    }

    100% {
        left: -150px;
        opacity: 0;
    }
}

@keyframes speeder {
    0% {
        transform: translate(2px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -3px) rotate(-1deg);
    }

    20% {
        transform: translate(-2px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 3px) rotate(-1deg);
    }

    60% {
        transform: translate(-1px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-2px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(2px, 1px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}


.box-content-admin-itleg {
    grid-column-start: 2;
    grid-column-end: 3;
}

body {
    font-family: Arial, sans-serif;
    font-size: 16px;
}

.input-admin-itleg {
    color: rgb(255, 255, 255);
    width: 298px;
    height: 52px;
    text-decoration-color: black;
    font-size: 16px;
    outline: none;
    border: none;
    background-color: #348F6C;
    border-bottom: rgb(255, 255, 255) 1px solid;
}

    .input-admin-itleg::placeholder {
        font-family: 'Roboto', sans-serif;
        font-weight: 100;
        color: #eeeeee;
    }

.input-admin-table {
    margin-top: 4em;
    text-align: center;
}

.button-table-admin {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    cursor: pointer;
    background-color: #f4ead3;
    border: none;
    color: #348F6C;
    height: 54px;
    font-size: 20px;
    border-radius: 10px;
    outline: none;
    width: 300px;
}

.name-iput {
    color: rgb(255, 255, 255);
}

.img-girl {
    padding-top: 80px;
    padding-bottom: 20px;
    margin-top: 4em;
    background-color: #44A37E;
    border-radius: 30px;
    text-align: center;
}

.box-content-packeges-itleg {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 100px 1fr 1fr;
    padding-top: 2em;
    padding-left: 3em;
    padding-right: 3em;
    padding-bottom: 2em;
    column-gap: 1em;
    row-gap: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-right: 1em;
    background: rgb(255, 255, 255);
    border-radius: 20px;
}

.packeges-header-itleg {
    grid-column-start: 1;
    font-family: 'Roboto', sans-serif;
    color: #000000;
    font-weight: 300;
    width: 6em;
}

.box-packeges-itleg1 {
    grid-column-start: 1;
    grid-row-start: 2;
    display: grid;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    height: 370px;
    width: 270px;
    margin: auto;
    background: #ffffff;
    color: rgb(0, 0, 0);
    -webkit-touch-callout: none;
    border-radius: 10px;
    box-shadow: 0 1px 5px #d2cbc3, 0 15px 30px rgb(197, 197, 197);
}

.box-packeges-itleg2 {
    grid-column-start: 2;
    grid-row-start: 2;
    display: grid;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    height: 370px;
    width: 270px;
    margin: auto;
    background: #ffffff;
    color: rgb(0, 0, 0);
    -webkit-touch-callout: none;
    border-radius: 10px;
    box-shadow: 0 1px 5px #d2cbc3, 0 15px 30px rgb(197, 197, 197);
}

.box-packeges-itleg3 {
    grid-column-start: 3;
    grid-row-start: 2;
    display: grid;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    height: 370px;
    width: 270px;
    margin: auto;
    background: #ffffff;
    color: rgb(0, 0, 0);
    -webkit-touch-callout: none;
    border-radius: 10px;
    box-shadow: 0 1px 5px #d2cbc3, 0 15px 30px rgb(197, 197, 197);
}

.box-packeges-itleg4 {
    grid-column-start: 4;
    grid-row-start: 2;
    display: grid;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    height: 370px;
    width: 270px;
    margin: auto;
    background: #ffffff;
    color: rgb(0, 0, 0);
    -webkit-touch-callout: none;
    border-radius: 10px;
    box-shadow: 0 1px 5px #d2cbc3, 0 15px 30px rgb(197, 197, 197);
}

.box-packeges-h1 {
    font-family: 'Roboto', sans-serif;
    color: #000000;
    font-weight: 300;
    text-align: center;
    margin-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.box-packeges-h3 {
    font-family: 'Roboto', sans-serif;
    color: #000000;
    font-weight: 300;
    text-align: center;
    font-size: small;
    padding-left: 20px;
    padding-right: 20px;
}

.user-info-page-string p {
    color: #fff;
    text-align: left;
    margin-bottom: 10px;
}

.grid-full-page-size {
    grid-column-start: 1;
    grid-column-end: 3;
}

.icons-size {
    font-size: 20px;
}


/*CKEditor start*/

.document-editor {
    border: 1px solid var(--ck-color-base-border);
    border-radius: var(--ck-border-radius);
    /* Set vertical boundaries for the document editor. */
    max-height: 700px;
    /* This element is a flex container for easier rendering. */
    display: flex;
    flex-flow: column nowrap;
}

.document-editor__toolbar {
    /* Make sure the toolbar container is always above the editable. */
    z-index: 1;
    /* Create the illusion of the toolbar floating over the editable. */
    box-shadow: 0 0 5px hsla( 0,0%,0%,.2 );
    /* Use the CKEditor CSS variables to keep the UI consistent. */
    border-bottom: 1px solid var(--ck-color-toolbar-border);
}

    /* Adjust the look of the toolbar inside the container. */
    .document-editor__toolbar .ck-toolbar {
        border: 0;
        border-radius: 0;
    }

/* Make the editable container look like the inside of a native word processor application. */
.document-editor__editable-container {
    padding: calc( 2 * var(--ck-spacing-large) );
    background: var(--ck-color-base-foreground);
    /* Make it possible to scroll the "page" of the edited content. */
    overflow-y: scroll;
}

    .document-editor__editable-container .ck-editor__editable {
        /* Set the dimensions of the "page". */
        width: 76%;
        /* Keep the "page" off the boundaries of the container. */
        padding: 1cm 2cm 2cm;
        border: 1px hsl( 0,0%,82.7% ) solid;
        border-radius: var(--ck-border-radius);
        background: white;
        /* The "page" should cast a slight shadow (3D illusion). */
        box-shadow: 0 0 5px hsla( 0,0%,0%,.1 );
        /* Center the "page". */
        margin: 0 auto;
    }

/* Set the default font for the "page" of the content. */
.document-editor .ck-content,
.document-editor .ck-heading-dropdown .ck-list .ck-button__label {
    font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Adjust the headings dropdown to host some larger heading styles. */
.document-editor .ck-heading-dropdown .ck-list .ck-button__label {
    line-height: calc( 1.7 * var(--ck-line-height-base) * var(--ck-font-size-base) );
    min-width: 6em;
}

/* Scale down all heading previews because they are way too big to be presented in the UI.
Preserve the relative scale, though. */
.document-editor .ck-heading-dropdown .ck-list .ck-button:not(.ck-heading_paragraph) .ck-button__label {
    transform: scale(0.8);
    transform-origin: left;
}

/* Set the styles for "Heading 1". */
.document-editor .ck-content h2,
.document-editor .ck-heading-dropdown .ck-heading_heading1 .ck-button__label {
    font-size: 2.18em;
    font-weight: normal;
}

.document-editor .ck-content h2 {
    line-height: 1.37em;
    padding-top: .342em;
    margin-bottom: .142em;
}

/* Set the styles for "Heading 2". */
.document-editor .ck-content h3,
.document-editor .ck-heading-dropdown .ck-heading_heading2 .ck-button__label {
    font-size: 1.75em;
    font-weight: normal;
    color: hsl( 203, 100%, 50% );
}

.document-editor .ck-heading-dropdown .ck-heading_heading2.ck-on .ck-button__label {
    color: var(--ck-color-list-button-on-text);
}

/* Set the styles for "Heading 2". */
.document-editor .ck-content h3 {
    line-height: 1.86em;
    padding-top: .171em;
    margin-bottom: .357em;
}

/* Set the styles for "Heading 3". */
.document-editor .ck-content h4,
.document-editor .ck-heading-dropdown .ck-heading_heading3 .ck-button__label {
    font-size: 1.31em;
    font-weight: bold;
}

.document-editor .ck-content h4 {
    line-height: 1.24em;
    padding-top: .286em;
    margin-bottom: .952em;
}

/* Set the styles for "Paragraph". */
.document-editor .ck-content p {
    font-size: 1em;
    line-height: 1.63em;
    padding-top: .5em;
    margin-bottom: 1.13em;
}

/* Make the block quoted text serif with some additional spacing. */
.document-editor .ck-content blockquote {
    font-family: Georgia, serif;
    margin-left: calc( 2 * var(--ck-spacing-large) );
    margin-right: calc( 2 * var(--ck-spacing-large) );
}


/*CKEditor end*/

.wrap-extra-chars {
    display: block;
    width: 5em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.user-quiz-item-grid {
    display: grid;
    grid-template-columns: 1fr 150px;
}

.simple-card-shadow {
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 14px 28px rgb(173 173 173 / 22%), 0 10px 10px rgb(173 173 173);
}

.card-template {
    padding: 5px;
    background: #ffffff;
    color: rgb(0, 0, 0);
    -webkit-touch-callout: none;
    border-radius: 10px;
    box-shadow: 0 1px 5px #d2cbc3, 0 15px 30px rgb(197 197 197);
}

    .card-template.active {
        background: rgb(203 241 226)
    }

.margin-vertical-auto-itleg {
    margin-top: auto;
    margin-bottom: auto;
}

.layout {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    margin-left: 220px;
    max-width: calc(100% - 220px);
}

    .layout .layout-body {
        max-width: 98%;
        margin: 0 auto;
        width: 100%;
        position: relative;
    }

.input-full-width {
    width: 100%;
}

.holy__input__width175 {
    width: 175px !important;
}

.input-half-width {
    width: 50%;
}

.small-button {
    padding: 10px 15px;
    font-size: 16px;
}

.hidden {
    display: none;
}

.quiz-option-input {
    padding: 3px 5px !important;
    font-size: 14px !important;
    padding-right: 30px !important;
    width: 100%;
}

.quiz-select {
    padding: 3px 5px !important;
    font-size: 14px !important;
}

.quiz-option-delete {
    position: relative;
    left: -27px;
    top: -5px;
    width: 0px;
    height: 0px;
    z-index: 10;
}

    .quiz-option-delete img {
        width: 13px;
    }

.w-auto {
    width: auto !important;
}

.text-gray {
    color: #CFCFCF;
}

.option-input {
    padding: 3px 5px !important;
    font-size: 14px !important;
    padding-right: 60px !important;
    width: 100%;
}

.answer-input {
    padding-right: 70px !important;
    width: 100%;
}

.option-delete-button {
    position: relative;
    left: -50px;
    width: 0px;
    height: 0px;
    z-index: 10;
}

.option-correct-button {
    position: relative;
    left: -68px;
    top: -2px;
    width: 0px;
    height: 0px;
    z-index: 10;
}

.w-100 {
    width: 100%;
}

.file-hidden {
    opacity: 0;
    width: 0.1px;
    height: 0.1px;
    position: absolute;
}

.z-10 {
    z-index: 10;
}

.link_incoming {
    color: #000;
    text-decoration: none;
}

.link_outcoming {
    color: #fff;
    text-decoration: none;
}

.input__file__documents {
    display: inline-block;
    height: 25px;
    opacity: 0;
    cursor: pointer;
}

.chat__input__teachercabinet {
    background: #fff !important;
    width: 95% !important;
}

.holy-card__stat {
    width: calc(100% - 20px);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .holy-card__stat:hover {
        background-color: #ff6a00 !important;
        color: #fff !important;
    }

span[data-linklaw] {
    color: darkblue;
    text-decoration: underline dotted 1px;
    cursor: pointer;
}

@keyframes highlightAnimation {
    0% {
        background: none;
    }

    10% {
        background: none;
    }

    20% {
        background: rgb(255, 117, 54, 0.21);
    }

    90% {
        background: rgb(255, 117, 54, 0.21);
    }

    100% {
        background: none;
    }
}

.bots canvas {
    position: absolute;
    z-index: 0;
}

.registration__button__container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding-top: 20px;
}

.drag__leave__row {
    opacity: 0.3;
}

.row_up {
    border-top: solid 3px;
}

.row_up_template::after {
    content: "Вставити блок сюди";
    display: block;
    width: 100%;
    border: 1px solid #000;
    padding: 10px;
    background: #FF753621;
    color: #ff6a00;
}

.pull-request-delete {
    background: red;
}

.pull-request-insert {
    background: #2fff2f;
}

.pull-request-delete > * {
    background: red;
}

.pull-request-insert > * {
    background: #2fff2f;
}

input[type="datetime-local" i] {
    height: 38px;
    padding: 0 10px;
    border: 1px solid #c5c5c5;
    border-radius: 7px;
    font-size: 16px;
    box-shadow: 0px 0px 5px #c5c5c5;
    outline: none;
    margin: 0 5px;
}

.holy__text__grey {
    color: #CFCFCF;
    font-size: 34px;
}

.tree__item__contaier p,
.task__answers__container p,
.task__answers__container .answer__line p {
    margin: 0;
}