/* © Anton Kalyuta 2022 - 2026 */

#updatedText {
    font-size: 20px;
    border-top: 5px solid #e6e9ee;
    border-bottom: 5px solid #e6e9ee;
    padding-left: 50px;
    padding-right: 50px;
    width: 84vw;
    height: max-content;
    min-height: 300px;
    font-family: monospace;
    color: #151f33;
    overflow: hidden;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-device-width: 481px) {
    #updatedText {
        height: 300px;
    }
}

/*#upText {*/
/*    position: fixed;*/
/*    left: 50%;*/
/*    top: calc(50% + 83px);*/
/*    transform: translate(-50%, -50%);*/
/*}*/

html.dark #updatedText {
    border-top: 5px solid #8b8b8b;
    border-bottom: 5px solid #8b8b8b;
}

@media (max-device-width: 480px) {
    #updatedText {
        border-top: 10px solid #e6e9ee;
        border-bottom: 10px solid #e6e9ee;
    }

    html.dark #updatedText {
        border-top: 10px solid #8b8b8b;
        border-bottom: 10px solid #8b8b8b;
    }
}

.updatedTextMax {
    height: 50% !important;
    width: 100% !important;
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
}

#timer {
    display: flex;
    justify-content: center;
}

#timerIn {
    width: 100vw;
    display: flex;
    justify-content: space-around;
}

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

#running-line {
    font-family: monospace;
    display: flex;
}

html.dark #running-line {
    color: white;
}

#readingProgress {
    width: 100vw;
    position: fixed;
    bottom: 115px;
    z-index: 100;
    left: 50%;
    transform: translate(-50%);
    display: none;
    border: none;
    padding: 0;
}

@media (max-device-width: 480px) {
    #readingProgress {
        bottom: 330px;
    }
}

#readed {
    bottom: 150px;
    border: none;
    width: 20vw;
    display: none;
    /*padding: 12px;*/
}

@media (max-device-width: 480px) {
    #readed {
        bottom: 420px;
        width: 40vw;
        padding: 50px 150px;
    }
}

#start-stop {
    position: fixed;
    bottom: 55px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 100;
    /*padding: 15px;*/
    /*border-radius: 5px;*/
    /*background: red;*/
    /*color: white;*/
    /*cursor: pointer;*/
    width: 20vw;
    display: none;
}

@media (max-device-width: 480px) {
    #start-stop {
        bottom: 165px;
        font-size: 60px;
        width: 40vw;
    }
}

#save {
    padding: 4px 165px;
    display: inline-block;
    margin-left: 10px;
    font-weight: normal;
}

#realTimeSettings {
    z-index: 1001;
    margin-left: 50px;
    /*text-align: left;*/
    /*width: 100vw;*/
    display: flex;
    /*justify-content: flex-start;*/
    grid-gap: 20px;
}

@media (max-device-width: 480px) {
    #realTimeSettings {
        margin-left: 100px;
        font-size: 45px;
    }
}

div#realTimeSettings.realTimeSettingsMax {
    position: fixed;
    width: 90vw;
    left: 50%;
    transform: translate(-50%);
    margin: 0;
    top: 25px;
}

#previewText {
    background: #48af4f;
}

@media (max-device-width: 480px) {
    #text {
        min-height: 15vh;
    }
}

.task-top-left-container {
    width: calc(84vw + 100px);
}

/*#upText {*/
/*    position: fixed;*/
/*    transform: translateX(-50%);*/
/*}*/

#frame2 {
    min-height: 655px;
    padding: 30px 30px 0 30px;
}