body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    --bg-color: #f5f8fc;
    --primary-color: #0075ff;
}

footer {
    margin-top: auto;
}

.bold{
    font-weight:800;
}

.centerSelf {
    margin-inline: auto;
}

.centerText{
    text-align: center;
}

.grid {
    display: grid;
    row-gap: 1rem;
    column-gap: 2rem;
}



.textAccent {
    font-size: 120%;
    font-weight: 600;
}

#modalContent{
    padding:1rem;
}


.summaryOverviewGrid {
    display: grid;
    grid-template-columns: auto max-content max-content max-content max-content max-content;

    > * {
        padding-inline: 1em;
        padding-block: 0.2em;
    }

    .summaryOverviewHeader {
        font-weight: 800;
    }

    .summaryOverviewPart {
        font-weight: 600;
        border-block: 1px solid #ddd;
        margin-top: 1rem;
    }
}

.wrap {
    flex-wrap: wrap;
}

.alignCenter {
    align-items: center;
}



.g1{
    gap: 1rem;
}

.cursorPointer{
    cursor:pointer;
    text-decoration:underline;
    color:var(--primary-color);
}

.cursorPointer:hover,
.cursorPointer:focus {
    text-decoration: none;
}


.spaceBetween {
    justify-content: space-between;
}


.languagePicker {
    position: relative;

    label {
        cursor: pointer;
    }

    .icon:before {
        display: inline-block;
    }

    .languageGrid {
        position: absolute;
        top: 0;
        width: 100%;
        display: grid;
        gap: 1rem;
        justify-items: center;
        overflow-y: hidden;
        height: 0;
        transition: 0.3s ease;
        top: 50%;
    }

    #chooseLanguage {
        display: none;
    }

    #chooseLanguage:checked ~ .languageGrid {
        padding-top: calc(40px + 1rem);
        padding-bottom: 1rem;
        height: auto;
        overflow: visible;
        top: 0;
    }

    .icon--chevron-down:before {
        transition: 0.3s ease;
    }

    #chooseLanguage:checked ~ label .icon--chevron-down:before {
        transform: rotateX(180deg);
    }

    .flag {
        width: 20px;
        height: 13.33px;
        cursor: pointer;
    }

    .flag-en {
        background-image: url('../../Images/flag-en.svg');
    }

    .flag-cs {
        background-image: url('../../Images/flag-cs.svg');
    }

    .flag-sk {
        background-image: url('../../Images/flag-sk.svg');
    }
}


.progress {
    --progres-height: 40px;
    height: var(--progres-height);

    .progress-bar {
        float: left;
        min-width: var(--progres-height);
        height: 100%;
        font-size: 12px;
        line-height: 20px;
        color: #fff;
        text-align: center;
        background-color: var(--primary-color);
        position: relative;
    }

    .progress-bar-success {
        background-color: var(--primary-color);
    }

    .progress-text {
        position: absolute;
        right: 10px;
        transform: translatey(-50%);
        top: 50%;
    }
}






.gridfit1 {
    grid-template-columns: max-content min-content;
    align-items: center;
    margin-inline: auto;
    justify-items: self-end;
    justify-content: center;
}

dialog[open] {
    -webkit-animation: show 0.5s ease normal;
}

@-webkit-keyframes show {
    from {
        transform: translateY(10%);
        opacity: 0;
    }

    to {
        transform: translateY(0%);
        opacity: 1;
    }
}


#elearning-list {
    label{
        display: block;
    }

    ul {
        margin-bottom: 1rem;
    }
}

.workbookRow {
    display: flex;
    column-gap: 1em;
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden;

    .progress {
        min-width: 200px;
        --progres-height: 30px;

        .progress-bar {
            min-width: calc(var(--progres-height) * 1.3);
        }
    }

        .workbook-name {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    }

    .section-summary {
        display: none;
    }

    .section-summary-label {
        cursor: pointer;
    }

    .section-detail {
        overflow-y: hidden;
        max-height: 0;
        opacity: 0;
        transition: 0.3s ease;
    }

    .section-summary:checked ~ .section-detail {
        max-height: 10000px;
        opacity: 1;
    }

    .icon--chevron-right::before {
        display: inline-block;
        transition: 0.3s ease;
    }

    .section-summary:checked ~ label .icon--chevron-right::before {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .icon--chevron-down::before {
        transform-origin: 50% 40%;
        display: inline-block;
        transition: 0.3s ease;
    }

    .section-summary:checked ~ label .icon--chevron-down::before {
        -webkit-transform: rotateX(180deg);
        -ms-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }



    .testGrid {
        display: grid;
        gap: 1rem;
        align-items: center;
        grid-template-areas:
            "name" "progress" "summary" "button";

        .btn {
            width: auto;
            min-width: 170px;
        }

        .elearningName {
            grid-area: name;
        }

        .elearningProgress {
            grid-area: progress;
        }

        .elearningSummary {
            grid-area: summary;
            min-width: 170px;
        }

        .elearningButton {
            grid-area: button;
            min-width: 170px;
        }
    }

    .subjectIcon {
        position: relative;
        padding-left: 35px;
    }

    .subjectIcon:before {
        position: absolute;
        left: 0;
        content: '🧮';
    }

    .subjectIconOSP:before,
    .subjectIconVŠP:before,
    .subjectIconGAP:before {
        content: '💡';
    }

    .subjectIconZSV:before {
        content: '🎭';
    }

    .subjectIconAJ:before,
    .subjectIconNE:before {
        content: '🌍';
    }

    .subjectIconBIO:before {
        content: '🔬';
    }

    .subjectIconCHE:before {
        content: '🧪';
    }

    .subjectIconFY:before {
        content: '⚛️';
    }


    .subjectIconMAT:before {
        content: '📐';
    }

    .subjectIconLecture:before,
    .subjectIconLectureFinished:before {
        content: '📕';
    }

    .subjectIconLectureOpen:before {
        content: '📖';
    }

.infoCircle {
    position: relative;
    display: inline-block;

    &:before {
        content: '?';
        font-size: 0.6em;
        background-color: var(--primary-color);
        color: white;
        border-radius: 50%;
        display: block;
        height: 1.5em;
        aspect-ratio: 1 / 1;
        cursor: help;
        margin: 10px;
        padding-left: 0.4em;
    }

    .tooltiptext {
        font-size: 0.7em;
        --tooltipWidth: 200px;
        visibility: hidden;
        width: var(--tooltipWidth);
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
        top: 100%;
        left: 50%;
        margin-left: calc(-1 * var(--tooltipWidth) / 2);
    }

    &:hover .tooltiptext {
        visibility: visible;
    }

    .tooltiptext::after {
        content: " ";
        position: absolute;
        bottom: 100%; /* At the top of the tooltip */
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent black transparent;
    }
}

.elearningHeader {
    .last-part {
        margin-left: 35px;
    }

    .progress-part {
        margin-right: 35px;
    }
}





@media (max-width: 599px) {
    .testGrid {
        text-align: center;

        .btn {
            width: 200px;
        }
    }

    .elearningHeader {
        display: grid;

        .last-part {
            margin-left: 0;
        }

        .progress-part { 
            margin-right: 0;
        }
    }
}

@media (min-width: 600px) {
    .testGrid {
        grid-template-areas: "name name name" "progress summary button";
        grid-template-columns: auto min-content min-content;
    }
}

@media (min-width: 1000px) {
    .testGrid {
        grid-template-areas: "name progress summary button";
        grid-template-columns: 2fr 1fr min-content min-content;
    }
}