/*
Utilities ART
*/
/*:root {
    --theme-color1 : #153256;
    --theme-color4 : #25756a;
}*/
/*body {
    font-family: Kanit, sans-serif;
}*/
.max-width-100p {
    max-width: 100%;
}
.mfp-close-btn-in .mfp-close:hover {
    color: #ff0000;
}

/*HOME PAGE*/
.font1 { font-family: var(--theme-font1); }
.font2 { font-family: var(--theme-font2); }
.font3 { font-family: var(--theme-font3); }
.card-welcome p {
    color: var(--theme-color1);
    font-family: var(--theme-font2);
    font-size: 16px;
}

/*
Badge
*/
#userBadge {
    transform: scale(1,1);
    aspect-ratio: 6/9;


}
#badgeBg {
    aspect-ratio: 6/9;
    border: 1px solid;
    z-index: -1;
}

#badgeQR, #badgeBar, #badgeName, #badgeLoc, #badgeId {
    position: absolute;
    /*border: 1px solid;*/
    text-align: center;
    /*text-transform: uppercase;*/
    font-weight: bold;
}
#badgeQR {
    width: 30%;
    right: 8%;
    top: 25%;
}
#badgeBar {
    width: 100%;
    height: 11.5%;
    top: 49.1%;
}
#badgeName {
    width: 100%;
    top: 68.9%;
    font-size: 18pt;
}
#badgeLoc {
    width: 100%;
    top: 79.2%;
    font-size: 16pt;
}
#badgeId {
    width: 100%;
    top: 89.5%;
    letter-spacing: 1pt;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {

    /* Place the timelime to the left */
    .timeline-container:not(.fixed) .the-timeline::after {
        left: 31px;
    }

    /* Full-width containers */
    .timeline-container:not(.fixed) .content-container {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

    /* Make sure that all arrows are pointing leftwards */
    .timeline-container:not(.fixed) .content-container::before {
        left: 60px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }

    /* Make sure all circles are at the same spot */
    .timeline-container:not(.fixed) .timeline-left::after,
    .timeline-container .timeline-right::after {
        left: 18px;
    }

    /* Make all right containers behave like the left ones */
    .timeline-container:not(.fixed) .timeline-right {
        left: 0;
    }

    .timeline-content h4 {
        font-size: 4vw;
    }

    .timeline-content ol>li,
    .timeline-content ul>li {
        font-size: 4vw;
    }
}


/*
Form Profile
*/
.form-group label:not(.error) {
    font-weight: 600;
}
.form-group label:not(.error) {
    font-size: 16px;
}

input[type=checkbox], input[type=radio] {
    height: 24px;
    width: auto;
    margin-top: 6px;
}

/*
Utilities
*/

.text-indent20 {text-indent: 20px;}
.text-indent30 {text-indent: 30px;}
.text-indent40 {text-indent: 40px;}

.langTH {
    font-family: Sarabun, "sans-serif","Tahoma";
}