/* © Anton Kalyuta 2022 - 2026 */
a {
    text-decoration: none;
    font-family: "Open Sans", sans-serif;
}

#frame1 {
    min-width: 1000px;
    width: max-content;
    
}

/*#frame2 {*/
/*    width: max-content;*/
/*    min-width: 950px;*/
/*    !*display: none;*!*/
/*}*/

#frame2 {
    width: max-content;
    min-width: 950px;
    display: none;
    background: white;
    padding: 25px 25px 25px 25px;
    border-radius: 30px;
}

html:not(.previewPage) body {
    background: white;
}

@media (max-device-width: 480px) {
    body {
        background: none;
    }

    #frame2 {
        min-width: 1000px;
    }
}

html.dark .description {
    box-shadow: 0 5px 10px 1px #303030;
}

.description {
    font-size: 21px;
    border-radius: 44px;
    padding: 6px;
    width: 1010px;
    border: 28px solid #ffff;
    /*box-shadow: -4px 3px 10px 4px #cbcbcb;*/
    background: white;
    color: #333 !important;
}

@media (max-device-width: 480px) {
    .description {
        border-radius: 0;
        padding: 0;
        border: none;
        box-shadow: none;
        width: 100vw;
        height: 12vh;
        display: flex;
        flex-direction: column;
        position: fixed;
        bottom: 0;
    }

    .description span {
        margin: auto;
    }

    @media (max-device-height: 640px) {
        .description {
            height: 8vh;
        }
    }
}

#descriptionText {
    text-align: center;
    font-size: 20px;
    color: #333;
}

@media (max-device-width: 480px) {
    #descriptionText {
        display: none;
    }
}

html.dark .preview, html.dark #previewText{
    box-shadow: 0 5px 10px 1px #303030;
}

#previewContainer {
    display: flex;
    width: 1070px;
    justify-content: space-between;
}

@media (max-device-width: 480px) {
    #previewContainer {
        width: 100vw;
        /*box-shadow: -4px 3px 10px 4px #cbcbcb;*/
        flex-direction: column-reverse;
        align-items: center;
    }
}

#previewText {
    border: 40px solid white;
    /* box-shadow: -4px 1px 10px 4px #cbcbcb; */
    border-radius: 68px;
    width: 268px;
    padding: 20px;
    font-size: 20px;
    text-align: left;
    color: white;
}

@media (max-device-width: 480px) {
    #previewText {
        background: white !important;
        border: 44px solid white;
        box-shadow: none !important;
        border-radius: 0;
        width: max-content;
        max-width: 80vw;
        margin-left: -100px;
        padding-top: 0;
        font-size: 55px;
        color: #333;
    }

    html.dark #previewText {
        background: #404040 !important;
        border: 44px solid #404040;
    }
}

html.dark #previewText {
    color: white;
}

#previewTextHeader {
    line-height: 1.9;
    font-weight: bold;
}

@media (max-device-width: 480px) {
    #previewTextHeader {
        line-height: revert;
        margin-bottom: -50px;
        display: block;
    }
}

.preview {
    border: 44px solid white;
    /*box-shadow: -4px 1px 10px 4px #cbcbcb;*/
    border-radius: 68px;
    position: relative;
    width: 560px;
    height: 321px;
    user-select: none;
}

@media (max-device-width: 480px) {
    .preview {
        /*box-shadow: -4px 1px 10px 4px #e7e7e7;*/
        border-radius: 0;
        border-left: none !important;
        border-right: none !important;
        width: 100vw;
        height: calc(9 / 16 * 100vw);
    }

    .previousSlide, .nextSlide {
        display: none;
    }
}

html.previewPage .back {
    background: none;
}

@media (min-device-width: 481px) {
    html.previewPage .back svg {
        fill: #ffffff;
    }
}

/*#back2 {*/
/*    margin-bottom: 5px;*/
/*    padding: 0;*/
/*}*/

/*@media (max-device-width: 480px) {*/
/*    #back2 {*/
/*        margin-bottom: 0;*/
/*        margin-top: 6px;*/
/*    }*/
/*}*/

.train {
    border-radius: 44px;
}

@media (min-device-width: 480px) {
    .train {
        width: 905px;
    }
}

@media (max-device-width: 480px) {
    .train {
        border-radius: 0;
        /*width: calc(100% - 100px);*/
        height: 100%;
        font-size: 60px;
        display: flex;
        align-content: center;
        padding: 25px;
    }
}

#readed {
    display: none;
    border-radius: 10px;
    font-weight: bold;
    /* width: 50vw; */
    border: 3px solid #05c3d7;
    background: #05c3d7;
    color: white;
    cursor: pointer;
    position: fixed;
    left: 50%;
    bottom: 75px;
    transform: translate(-50%);
    z-index: 1000;
    font-size: 25px;
    padding: 18px 50px;
}

html.dark #readed {
    border: 3px solid #f5f5f5;
    background: #404040;
    color: #f5f5f5;
}

@media (max-device-width: 480px) {
    #readed {
        font-size: 60px;
        border-radius: 10px;
    }
}

#timer {
    font-size: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
    display: none;
    background: #767676;
    color: white;
    font-weight: 400;
    position: fixed;
    bottom: 0;
    text-align: center;
    width: 100%;
    z-index: 1000;
}

#result {
    display: none;
    font-size: 20px;
}

@media (max-device-width: 480px) {
    #result * {
        font-size: 60px !important;
    }
}

#result table {
    border: 5px solid #e6e9ee;
    border-collapse: collapse;
    table-layout: fixed;
}

html.dark #result table {
    color: white;
    border: 5px solid #585858;
}

#result table tr {
    border: 5px solid #e6e9ee;
}

html.dark #result table tr {
    border: 5px solid #585858;
}

#result table td {
    border: 1px solid #e6e9ee;
    padding: 13px;
    vertical-align: top;
    font-size: 20px;
}

html.dark #result table td {
    border: 5px solid #585858;
}

@media (max-device-width: 480px) {
    #result table {
        border-width: 10px;
        width: 90vw;
        border-radius: 50px;
    }

    #result table tr {
        border-width: 5px;
        border-radius: 50px;
    }

    #result table tr:first-child td {
        border-width: 10px;
    }

    #result table td {
        border-width: 5px;
        padding: 25px;
        border-radius: 50px;
    }

    #result table td {
        text-align: left;
    }
}

#settings {
    text-align: left;
    width: 1005px;
    
}

@media (max-device-width: 480px) {
    #settings {
        font-size: 50px;
    }
}

html.dark #settings {
    color: white;
}

#resultHeader {
    color: #01bbcf;
}

#continueTraining {
    width: 300px;
}

#tlt {
    display: block;
    width: 300px;
}

@media (max-device-width: 480px) {
    #continueTraining {
        width: calc(90vw - 300px);;
    }

    #tlt {
        width: calc(90vw - 300px);
    }
}

/*#continueTraining {*/
/*    background: #05c3d7;*/
/*    color: white;*/
/*    padding: 15px;*/
/*    border-radius: 10px;*/
/*    width: 320px;*/
/*    cursor: pointer;*/
/*    font-weight: bold;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/

/*@media (max-device-width: 480px) {*/
/*    #continueTraining {*/
/*        !*padding: 25px;*!*/
/*        !*border-radius: 0;*!*/
/*        !*position: fixed;*!*/
/*        !*width: calc(100vw - 50px);*!*/
/*        !*bottom: 125px;*!*/
/*        width: 600px;*/
/*        height: 100px;*/
/*    }*/
/*}*/

/*#continueTraining:hover {*/
/*    background: #01b4c7;*/
/*}*/

/*#continueTraining:active {*/
/*    background: #02a9bb;*/
/*}*/

/*#tlt {*/
/*    !*font-weight: normal;*!*/
/*    !*color: #408DD2;*!*/
/*    color: #02a2b3;*/
/*    border: 5px solid #05c3d7;*/
/*    background: white;*/
/*    padding: 10px;*/
/*    border-radius: 10px;*/
/*    width: 320px;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/

/*html.dark #tlt {*/
/*    background: #404040;*/
/*}*/

/*#tlt:hover {*/
/*    color: #02a9bb;*/
/*    border-color: #02a9bb;*/
/*}*/

/*#tlt:active {*/
/*    color: #02a9bb;*/
/*    border-color: #02a9bb;*/
/*}*/

/*@media (max-device-width: 480px) {*/
/*    #tlt {*/
/*        !*border: 10px solid #05c3d7;*!*/
/*        !*padding: 15px;*!*/
/*        !*border-radius: 0;*!*/
/*        !*position: fixed;*!*/
/*        !*bottom: 0;*!*/
/*        !*width: calc(100vw - 30px - 20px);*!*/
/*        width: 600px;*/
/*        height: 100px;*/
/*    }*/
/*}*/

#show, #hide {
    color: #408DD2;
    cursor: pointer;
}

#show:hover, #hide:hover {
    color: #7b81ff;
}

#show:active, #hide:active {
    color: #2e4688;
}

input {
    border: 3px solid #e6e9ee;
    font-size: 20px;
    padding: 4px;
    border-radius: 10px;
    outline: none;
}

input:focus-visible {
    border: 3px solid #bdc0c5;
}

@media (max-device-width: 480px) {
    input {
        border: 5px solid #e6e9ee;
        font-size: 40px !important;
        padding: 15px 25px !important;
        outline: none;
    }

    input:focus-visible {
        border: 10px solid #bdc0c5;
    }
}

.maximize {
    top: 15px;
    right: 25px;
    cursor: pointer;
    position: absolute;
    fill: #c7c7c7;
}

.minimize {
    right: 20px;
    top: 20px;
    position: absolute;
    cursor: pointer;
    fill: #c7c7c7;
    display: none;
}

#start {
    width: 1000px;
    font-size: 20px;
    background: #05c3d7;
    border-radius: 20px;
    color: white;
    font-weight: bold;
}

@media (max-device-width: 480px) {
    #start {
        font-size: 60px;
    }
}

#text:focus-visible {
    outline: 5px solid #e6e9ee;
    border-radius: 10px;
}

#text {
    border: 2px solid #e6e9ee;
    padding: 10px;
    /* width: 950px; */
    width: calc(100% - 30px);
    height: 115px;
    border-radius: 20px;
}

@media (max-device-width: 480px) {
    #text {
        width: 100%;
        /*height: 500px;*/
        font-size: 45px;
        padding: 30px;
        box-sizing: border-box;
    }
}

@media (max-height: 1700px) and (max-device-width: 480px), (max-height: 1700px) and (max-device-height: 480px) {
    #text:focus {
        height: 1000px;
    }
}

#text3 {
    width: 350px;
}

#taskName {
    margin-top: 8px;
}

@media (min-device-width: 481px) {
    #frame1 .pageName {
        color: #ffffff;
    }
}

#frame2 .pageName {
    font-size: 20px;
}

@media (min-device-width: 481px) {
    .pageName:before {
        content: "Тренажер по скорочтению «";
    }

    .pageName:after {
        content: "»";
    }
}

.setting * {
    vertical-align: middle;
    font-size: 20px;
}

.readedMax {
}

#upText {
    width: max-content;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}

#upText.upTextMax {
    width: 100% !important;
    height: 100%;
    left: 0;
    top: 0;
    transform: none;
    z-index: 100;
    position: absolute !important;
    background: white;
}

html.dark #upText.upTextMax {
    background: #404040;
}

#updatedText {
    resize: none !important;
    color: #333;
}

.updatedTextMax {
    border: none !important;
    /*width: max-content !important;*/
    width: 90vw;
    /*max-width: 100vw;*/
    height: 75% !important;
}

footer {
    display: none;
}

.moreTraining:focus {
    border: 5px solid #05c3d7 !important;
}

.moreTraining:hover {
    border: 5px solid #05c3d7 !important;
}

.moreTraining {
    color: white;
    font-size: 20px;
    /* border: 5px solid white; */
    background: #fff;
    border-radius: 44px;
    padding: 27px;
    margin-top: -40px;
    /* box-shadow: -4px 19px 10px 4px #cbcbcb; */
    font-weight: bold;
    text-align: center;
    margin-left: 25px;
}

@media (max-device-width: 480px) {
    .moreTraining {
        font-size: 3.5vmin;
        border-radius: 0;
        margin-top: 0;
        box-shadow: none;
        width: 50vw;
        height: 100%;
        line-height: 7vh;
        margin-left: 0;
    }
}

html.dark .moreTraining {
    background: #404040;
    box-shadow: -4px 19px 10px 4px #303030;
    border: 5px solid white;
}

#moreTrainings {
    color: white;
}

@media (max-device-width: 480px) {
    #moreTrainings {
        width: 100vw;
        display: none;
        justify-content: center;
        height: 7vh;
        position: fixed;
        bottom: 0;
        margin-bottom: 3.5vh;
    }

}

html.dark #moreTrainings {
    color: white;
}

.moreTraining#magicSquares {
    background: #8bc34a !important;
}

.moreTraining#mentalArithmetic {
    background: #05c3d7 !important;
}

.moreTraining#running-line {
    background: #8bc34a !important;
}

.moreTraining#rotating-symbols {
    background: #8bc34a !important;
}

.moreTraining#missing-characters {
    background: #f57eaadb !important;
}

.moreTraining#flipped-text {
    background: #e5af07 !important;
}

.moreTraining#reading-without-spaces {
    background: #1abc9c !important;
}

.moreTraining#missing-vowels {
    background: #6d8d9d !important;
}

.moreTraining#rearranged-characters {
    background: #9e9e9e !important;
}

.moreTraining#torn-text {
    background: #eb8a76d6 !important;
}

@media (max-device-width: 480px) {
    .moreTrainingsText {
        display: none;
    }
}

#text2 {
    text-align: left;
}


#innerSettings {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    grid-gap: 17px;
}

div.setting {
    width: max-content;
    display: flex;
    justify-content: flex-start;
    padding: 5px;
    align-items: center;
    text-align: center;
    grid-gap: 7px;
}

@media (max-device-width: 480px) {
    /*#settings * {*/
    /*    font-size: 40px;*/
    /*}*/
    /**/
    .settingDescription {
        text-align: center;
    }

    div.setting {
        justify-content: space-between;
    }

    div.setting input[type=number]:not(#answer) {
        font-size: 60px !important;
        width: 300px !important;
        height: 60px;
    }

    #innerSettings {
        flex-wrap: wrap;
    }

    div.setting {
        width: 100%;
    }

    .settingDescription {
        font-size: 60px !important;
        text-align: left;
    }

    #taskName {
        font-size: 60px;
    }
}