/*
    cdot-video-container - класс для видео добавленного с iframe
    
    Пример использования:
    
    <div class="cdot-video-container">
        <div>
            <iframe ...></iframe>
        </div>
    </div>
*/

.cdot-video-container {
    width: 100%;
    max-height: 90vh;
    max-width: min(160vh, 75rem);
    padding: 0.5rem 1rem;
    margin: auto;
}

.cdot-video-container > div {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
    border: 1px solid LightGrey;
    box-shadow: 2px 2px 2px Grey;
}

.cdot-video-container > div > iframe, video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*
    cdot-img-tumbnail - класс для представления изображения в виде миниатюры

    Пример использования:

    <div class="cdot-img-tumbnail">
        <img ...>
    </div>
*/

.cdot-img-tumbnail {
    margin: 1rem;
    padding: 0.5rem;
    background-color: white;
    border: 1px solid DimGrey;
    width: 15rem;
    height: 15rem;
}

.cdot-img-tumbnail > img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

/*
    cdot-img-expandable - класс для увеличения изображения на весь экран при нажатии

    Пример использования:

    <div class="cdot-img-tumbnail cdot-img-expandable">
        <img ...>
    </div>
*/

.cdot-img-expandable {
    cursor: pointer;
}

#cdot-overlay {
    display: none;
    align-items: center;
    position: fixed;
    background-color: rgb(50, 50, 50, 80%);
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 100;
}

#cdot-overlay-frame {
    margin: auto;
    padding: 1rem;
    background-color: white;
}

#cdot-img-expanded {
    object-fit: scale-down;
    width: 100%;
    height: 100%;
    max-width: 90vw;
    max-height: 90vh;
}

/*
    cdot-course-description - класс для форматирования таблицы описания курса

    Пример использования:

    <table class="cdot-course-description">
        ...
    </table>
*/

table.cdot-course-description {
    margin: 1rem;
    text-align: justify;
    width: 48rem;
    box-shadow: 2px 2px 2px LightGrey;
}

table.cdot-course-description tr > td:first-child {
    width: 16rem;
}

table.cdot-course-description td {
    padding: 1rem;
    border: 1px solid DimGrey;
}

table.cdot-course-description ul {
    list-style-type: none !important;
    padding-left: 0;
}

/*
    cdot-button - класс для оформления кнопок

    Пример использования:

    <a class="cdot-button" href="... > ... </a>
*/

.cdot-button {
    display: block;
    padding: 1rem;
    background-color: #3C63FB;
    border-radius: 0.5rem;
    box-shadow: 2px 2px 2px LightGrey;
    text-align: center;
    text-decoration: none;
    color: white;
    cursor: pointer;
}

a.cdot-button:link {
    color: white;
}

a.cdot-button:visited {
    color: white;
}

/*
    cdot-longread - класс для оформления большого объема текста

    Пример использования:

    <div class="cdot-longread">
        <p> ... </p>
        ...
        <p> ... </p>
    </div>
*/

.cdot-longread {
    padding: 1rem;
    margin: 1rem auto;
    height: 80vh;
    max-width: 48rem;
    overflow-y: scroll;
    background-color: Snow;
    border: 1px solid LightGrey;
    box-shadow: 2px 2px 2px Grey;
    text-align:justify;
}

.cdot-longread p {
    text-indent: 2rem;
}

.cdot-longread div:has(> img) {
    margin: 1rem auto;
    width: 36rem;
    max-width: 100%;
}

.cdot-longread div > img {
    display: block;
    margin: 0px auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 75vh;
    border: 1px solid DimGrey;
    object-fit: contain;
}