/*
Created By  : ยุทธภูมิ ตวันนา
Description : CSS Style Sheet ของ SDG 4, 5
*/

@import url(https://themes.googleusercontent.com/fonts/css?kit=6ozZp4BPlrbDRWPe3EBGA3SdiW2ksQBmltQAEmSvRHSiR_iGxZ5QmKDUsH-dNij1crwWn6UNkWWBz4j5_wrbugM8RwGeeH4yrHES5QaGeeiodoQ3NYUpWIa0AeaOlsjg_4F_kTqVI9Bgys60vh9KLg);

:root {
    --main-class: ".sdg-container";
}

html {
    /*
    filter: grayscale(0) !important;
    */
}

body {
    min-width: 286px;
    font-style: normal;
    font-weight: 400;
    font-size: 11pt;
    color: #000000;
    line-height: 1.4;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    cursor: default;
}


.sdg-container {
    & a {
        text-decoration: underline;
        &.nolink {
            color: inherit;
            text-decoration: none;
        }
    }

    & table {
        & .table {
            margin-bottom: 0 !important;
        }
    }

    & li::before {
        min-width: 24px;
        display: table-cell;
    }

    & ul {
        &.list-style-dashed,
        &.list-style-bullet,
        &.list-style-order,
        &.list-style-asterisk,
        &.list-style-custom,
        &.list-style-empty {
            list-style: none;
            padding-left: 1.8rem;
            margin: 0;
        }
        &.list-style-order {
            counter-reset: order;
            & li::before {
                counter-increment: order;
                content: counters(order, ".") ". ";
            }
        }
        &.list-style-dashed li::before {
            content: "-";
        }
        &.list-style-bullet li::before {
            content: "\0025cf";
        }
        &.list-style-bullet.important li::before {
            content: "\0025cf" !important;
        }
        &.list-style-asterisk li::before {
            content: "\002756";
        }
        &.list-style-empty li::before {
            content: "•";
            color: #ffffff;
        }
        &.list-style-custom li::before {
            content: attr(data-content);
        }
        &.list-style-empty li::before {
            content: "•";
            color: #ffffff;
        }
    }
    
    & .hide {
        display: none;
    }

    & .align-center {
        text-align: center;
    }
    & .align-justify {
        text-align: justify;
    }

    & .underline {
        text-decoration: underline;
    }

    & .table {
        display: table;
    }
    & .table-cell {
        display: table-cell;
    }
    
    & .paragraph {
        margin-bottom: 1rem;
    }

    & .title {
        &.lv1 {
            font-size: 14pt;
        }
        &.lv2 {
            font-size: 12pt;
        }
        &.lv3 {
            font-size: 11pt;
        }
        &.lv4 {
            font-size: 9pt;
        }
    }

    & .rows {
        display: block;
        margin: 0;
    }

    & .cols {
        max-width: inherit;
        padding: 0;
        position: relative;
        display: block;
        float: left;
        overflow: hidden;
        border: 1px solid transparent;
        & img {
            position: absolute;
            top: 0;
            left: 0;
        }
    }

    & .p-0 {
        padding: 0;
    }

    & .pl-0 {
        padding-left: 0;
    }

    & .embbed-pdf {
        width: 685px;
        height: 965px;
        margin-right: auto;
        margin-left: auto;
        & object {
            width: inherit;
            height: inherit;
        }
    }
    @media screen and (max-width: 728px) {
        & .embbed-pdf {
            width: 100%;
        }
    }

    & .indent {
        &.lv1 {
            padding-left: 1.8rem;
        }
        &.lv2 {
            padding-left: 3.35rem;
        }
    }

    & .site-header {
        position: fixed;
    }

    & :target {
        scroll-margin-top: 135px;
    }
    @media screen and (max-width: 1199px) {
        & :target {
            scroll-margin-top: 95px;
        }
    }
    @media screen and (max-width: 991px) {
        & :target {
            scroll-margin-top: 75px;
        }
    }

    & .container {
        & .breadcrumb-block {
            overflow-x: hidden;
            & .breadcrumb li:first-child:before {
                padding-right: 0;
            }
        }
    }
    @media screen and (max-width: 1440px) {
        & .container,
        & .container.-lg {
            width: 100%;
        }
    }
    @media screen and (max-width: 575px) {
        & .container {
            & .breadcrumb-block {
                & .breadcrumb {
                    & li.first {
                        &::before {
                            width: 0;
                            border: 0;
                        }
                        padding-left: 0;
                        margin-left: 0;
                    }
                    & .shrink-1 {
                        display: none;
                    }
                }
            }
        }
    }
    @media screen and (max-width: 340px) {
        & .container {
            & .breadcrumb-block {
                & .breadcrumb {
                    & .hide {
                        display: inline-block;
                    }
                    & .shrink-2 {
                        display: none;
                    }
                }
            }
        }
    }

    & .subject-head {
        font-family: "Roboto Serif";
        text-align: center;
        padding-bottom: 16px;
        & .row1 {
            & span {
                height: 116.16px;
                display: inline-block;
                overflow: hidden;
                & img {
                    width: inherit;
                    height: inherit;
                }
            }
            & .logo img {
                width: 123.01px;
            }
            & .subject-logo img {
                width: 116.16px;
            }
        }
        & .row2 {
            text-align: left;
            padding-top: 16px;
            & .subject-name {
                font-weight: 500;
                font-size: 30pt;
                font-family: "Roboto Serif";
                font-style: normal;
                color: #000000;
            }
        }
    }

    & .subject-content {
        font-family: "Rubik";
        & p.paragraph:not(.title) {
            text-align: justify;
        }
        & .table {
            width: auto;
            & .table-cell:first-child {
                min-width: 54px;
            }
        }
        & img {
            max-width: inherit;
            width: 100%;
            height: 100%;
        }
        & table {
            width: 100%;
            margin-right: auto;
            margin-left: auto;
            & th,
            & td {
                vertical-align: top;
                padding: 0.5rem 1rem;
                border: 1px solid #000000;
                &:last-child {
                    width: 130px;
                    text-align: center;
                }
            }  
        }
        @media screen and (min-width: 990px) {
            & table {
                max-width: 920px;
            }
        }

        & .title,
        & table thead {
            font-weight: 700;
        }
    }
}