/**
 * Filename : global.css
 * Author   : Kumpee Teeravech
 *          : Geoinformatics Field of Study,
 *          : Faculty of Computer Science and Information Technology,
 *          : Rambhai Barni Rajabhat University, Chanthaburi, Thailand, 22000
 * Version  : 2023-08-01
 */
* {
    /*font-family: 'Sarabun', sans-serif;*/
    /*font-family: 'Roboto', sans-serif;*/
    font-family: "Noto Sans Thai", sans-serif;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    box-sizing: border-box;

    --header_height: 100px;
    --footer_height: 70px;
    --nav_bar_height: 50px;

    --primary_color: #b8e0ae;
    --secondary_color: rgb(240, 240, 240);

    --page_background_color: rgb(225, 225, 227);

    --primary_title_color: rgb(155, 206, 88);
    --primary_text_color: rgb(80, 80, 80);

    --primary_button_color: rgb(155, 206, 88);
    --primary_button_hover_color: rgb(84, 124, 31);

    --primary_shadow_color: rgba(0, 0, 0, 0.10);

    --required_field_background_color: rgb(252, 255, 252);
    --required_field_border_color: rgb(155, 206, 88);
}

html,
body {
    height: 100%;
}

body {
    padding: 16px 16px 16px 16px;
    background-color: var(--page_background_color);
}

.bgcolor_col_1 {
    background-color: rgb(255, 0, 0);
}

.bgcolor_col_2 {
    background-color: rgb(245, 245, 245);
}

/** PIXEL-BASED WIDTH **/
.width_24px {
    width: 24px !important;
}

.width_32px {
    width: 32px !important;
}

.width_64px {
    width: 64px !important;
}

.width_100px {
    width: 100px !important;
}

.width_150px {
    width: 150px !important;
}

.width_200px {
    width: 200px !important;
}

/** COLUMN-BASED WIDTH **/
.col_1 {
    width: 8.33%;
}

.col_2 {
    width: 16.66%;
}

.col_3 {
    width: 25%;
}

.col_4 {
    width: 33.33%;
}

.col_5 {
    width: 41.66%;
}

.col_6 {
    width: 50%;
}

.col_7 {
    width: 58.33%;
}

.col_8 {
    width: 66.66%;
}

.col_9 {
    width: 75%;
}

.col_10 {
    width: 83.33%;
}

.col_11 {
    width: 91.66%;
}

.col_12 {
    width: 100%;
}

/** PERCENT-BASED WIDTH **/
.width_1p {
    width: 1% !important;
}

.width_3p {
    width: 3% !important;
}

.width_5p {
    width: 5% !important;
}

.width_7p {
    width: 7% !important;
}

.width_10p {
    width: 10% !important;
}

.width_15p {
    width: 15% !important;
}

.width_20p {
    width: 20% !important;
}

.width_25p {
    width: 25% !important;
}

.width_30p {
    width: 30% !important;
}

.width_35p {
    width: 35% !important;
}

.width_40p {
    width: 40% !important;
}

.width_45p {
    width: 45% !important;
}

.width_50p {
    width: 50% !important;
}

.width_60p {
    width: 60% !important;
}

.width_70p {
    width: 70% !important;
}

.width_75p {
    width: 75% !important;
}

.width_80p {
    width: 80% !important;
}

.width_90p {
    width: 90% !important;
}

.width_100p {
    width: 100% !important;
}

.float_left {
    float: left;
}

.float_right {
    float: right;
}

.float_block {
    clear: both;
}

.align_center {
    text-align: center;
}

.align_left {
    text-align: left;
}

.align_right {
    text-align: right;
}

.valign_top {
    vertical-align: top;
}

.spacer_col_8 {
    width: 8px !important;
}

.spacer_row_4 {
    width: 100% !important;
    height: 4px !important;
}

.spacer_row_8 {
    width: 100% !important;
    height: 8px !important;
}

.spacer_row_16 {
    width: 100% !important;
    height: 16px !important;
}

.spacer_row_32 {
    width: 100% !important;
    height: 32px !important;
}

.spacer_row_64 {
    width: 100% !important;
    height: 64px !important;
}

.rounded_border_8 {
    border-radius: 8px;
}

.rounded_border_16 {
    border-radius: 16px;
}

.rounded_border_24 {
    border-radius: 24px;
}

.padding_8 {
    padding: 8px 8x 8px 8px;
}

.padding_10 {
    padding: 10px 10x 10px 10px;
}

.padding_12 {
    padding: 12px 12x 12px 12px;
}

.padding_16 {
    padding: 16px 16x 16px 16px;
}

.margin_6 {
    margin: 6px 6px 6px 6px;
}

.margin_8 {
    margin: 8px 8px 8px 8px;
}

.nowrap {
    white-space: nowrap;
}

.icon_24 {
    width: 24px !important;
    height: 24px !important;
    transition: all 0.1s ease-out;
}

.icon_32 {
    width: 32px !important;
    height: 32px !important;
    transform: translate(0.0rem, 0.0rem);
    transition: all 0.1s ease-out;
}

.icon_48 {
    width: 48px !important;
    height: 48px !important;
}

.icon_64 {
    width: 64px !important;
    height: 64px !important;
}

.icon_24:hover,
.icon_32:hover,
.icon_48:hover,
.icon_64:hover {
    transform: scale(0.8);
}


/**
 * ----------------------------------------------------------------------------
 * HEADERS
 * ----------------------------------------------------------------------------
 */
#content_container h3 {
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 22px;
    font-weight: normal;
    color: rgb(184, 0, 174);
}

#content_body_container img {
    width: 100% !important;
}

/**
 * ----------------------------------------------------------------------------
 * SEARCHBOX
 * ----------------------------------------------------------------------------
 */
#search_box {
    /*background-color: rgba(0,0,0,0.2);*/
    /*float: right;*/
    text-align: right;
    /*position: absolute;
    left: 0px;
    top: 0px;*/
    padding: 4px 0px 0px 0px;
    /*width: 50% !important;
    height: auto !important;*/
}

#search_box #search_input {
    background-color: rgb(230, 230, 230);
    border: 1px solid var(--primary_button_color);
    border-radius: 8px;
    float: left;
    padding: 0px 0px 0px 12px;
    font-size: 17px;
    position: absolute;
    left: calc(100vw - 30% - (2*8px) - (2*48px));
    top: 8px;
    width: calc(30%);
    height: 35px !important;
}

#search_box #search_input:hover {
    border: 1px solid var(--primary_button_hover_color);
    /*background-color: var(--primary_button_hover_color);*/
    background-color: var(--page_background_color);
    /*color: white;*/
}

#search_box #search_input:focus {
    outline: none;
}

#search_box #serach_clear {
    position: absolute;
    left: calc(100vw - 96px) !important;
    top: 0px;
}

#search_box #serach_button {
    position: absolute;
    left: calc(100vw - 48px) !important;
    top: 0px;
}

#search_box #serach_button:hover,
#search_box #serach_button:visited {
    background-color: var(--secondary_color);
}

@media screen and (max-width: 800px) {
    /*
    #search_box {
        float: none;
        padding: 4px 0px 0px 4px;
        position: absolute;
        left: 0px;
        top: 100px;
        width: 100vw;
        height: 48px;
        z-index: +2;
    }

    #search_box #search_input {
        left: 8px;
        width: calc(100vw - (2*(8px + 48px)));
    }

    #search_box #serach_button {
        float: right;
        position: absolute;
        left: calc(100vw - 48px);
    }
    */
}


/**
 * ----------------------------------------------------------------------------
 * CONTENT BLOCKER
 * ----------------------------------------------------------------------------
 */
#content_blocker {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 16px 16px 16px 16px;
    position: absolute;
    left: 0px;
    top: 0px;
    width: calc(100vw);
    height: calc(100vh);
    visibility: hidden;
    z-index: +1;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(5px);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(5px);
}

/**
 * ----------------------------------------------------------------------------
 * CONTENT-BODY-CONTAINER
 * ----------------------------------------------------------------------------
 */
#content_body_container div {
    padding-bottom: 24px;
    text-align: justify;
}

#content_body_container b {
    color: rgb(0, 122, 192);
    font-weight: normal;
}

#content_body_container a {
    border-bottom: 1px dashed red;
    color: red;
    text-decoration: none;
}
#content_body_container h2 {
    font-size: 2.0em;
    color: rgb(0, 132, 255);
}
#content_body_container h3 {
    font-size: 1.5em;
    color: rgb(0, 132, 255);
    padding-top: 24px;
    padding-bottom: 8px;
    width: 100%;
    border-bottom: 2px dashed rgb(228, 228, 228);
    margin-bottom: 6px;
}
#content_body_container h4 {
    color: rgb(155, 69, 69);
    padding-top: 16px;
    padding-bottom: 8px;
}
#content_body_container #author_info {
    color: rgb(0, 0, 0);
    font-size: 0.80em;
    text-align: left;
}
figure {
    text-align: center;
    font-size: 0.8em;
}

/**
 * ----------------------------------------------------------------------------
 * TOOLTIPS
 * ----------------------------------------------------------------------------
 */
.tooltip {
    transition: all 0.1s ease-out;
    /*overflow: hidden;*/
}

.tooltip_text {
    background-color: rgb(0, 0, 0);
    border-radius: 8px;
    color: white;
    padding-top: 6px;
    /*visibility: hidden;*/
    visibility: visible;
    position: relative;
    left: 0px;
    top: -35px;
    width: 120px !important;
    height: 35px !important;
    opacity: 0.0;
    transition: all 0.1s ease-out;
}

.tooltip_text:before {
    background-color: rgb(0, 0, 0);
    content: "";
    position: absolute;
    height: 12px;
    width: 12px;
    left: -6px;
    top: 12px;
    transform: rotate(45deg);
}

.tooltip:hover+.tooltip_text {
    left: 32px;
    top: -35px;
    opacity: 1.0;
    visibility: visible;
    z-index: +10;
}

/**
 * -------------------------------------------------------------------------------
 * -------------------------------------------------------------------------------
 * INPUT
 * -------------------------------------------------------------------------------
 * -------------------------------------------------------------------------------
 */
.input_box {
    font-size: 12pt;
    color: black;
    /*display: block;*/
    border: 1px solid rgb(220, 220, 220);
    border-radius: 4px;
    padding: 12px 12px 12px 12px;
    outline: none;
    transition: all 0.15s ease-out;
}

.input_box:hover {
    border: 1px solid var(--primary_color);
}

.input_box:focus {
    border: 1px solid var(--primary_button_color);
    /*box-shadow: 0 0 3px var(--primary_color) !important;
    -moz-box-shadow: 0 0 3px var(--primary_color) !important;
    -webkit-box-shadow: 0 0 3px var(--primary_color) !important;*/
}

.input_button {
    font-family: 'Anuphan', sans-serif;
    font-size: 12pt;
    font-weight: normal;
    background-color: var(--primary_button_color);
    border: 1px solid rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    border-radius: 6px;
    padding: 12px 12px 12px 12px;
    /*margin: 6px 6px 6px 6px;*/
    transition: all 0.05s ease-out;
}

.input_button:hover {
    background-color: var(--primary_button_hover_color);
    color: rgb(255, 255, 255);
    cursor: pointer;
    letter-spacing: 2pt;
}

.input_box_required {
    border-color: var(--required_field_border_color);
    background-color: var(--required_field_background_color);
}

/**
 * ----------------------------------------------------------------------------
 * FLOATING INPUT PLACEHOLDERS
 * ----------------------------------------------------------------------------
 */
.input_box_label {
    background-color: white;
    color: var(--primary_button_hover_color);
    font-family: 'Anuphan', sans-serif;
    font-size: 10pt;
    font-weight: normal;
    display: block;
    position: absolute;
    transform: translate(1.0rem, -3.3rem);
    transition: all 0.05s ease-out;
    /*    visibility: hidden;*/
}

.input_box:focus+.input_box_label {
    color: var(--primary_title_color);
    font-size: 8pt;
    background-color: white;
    border-color: red;
    transform: translate(1.0rem, -3.3rem);
}