@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap');

:root {
    --site-ff: 'Noto Sans TC';      /* Noto Sans Traditional Chinese */
    --site-font-size: 16pt;          /* font size */
    --site-title-font-size: 24pt;  /* font size for titles */
    --site-text-color: #ffffff;  /*  white */
    --site-bk-color: #2f99a5; 
    --site-bk-color2: #f5b85f;
    --pagetitle-text-color: #3c3c3c;
    --dialogbox-text-color: #858585;
    --aboutus-title-font-size: 18pt;
    --aboutus-img-width: 30%;
}

html {
	margin: 0;
	padding: 0;
    font-family: var(--site-ff);
    font-size: var(--site-font-size);
    color: var(--site-text-color);
}

body { 
    margin: 0; 
    padding: 0;
    background-color: var(--site-bk-color);
    background-repeat: no-repeat;
    background-size: cover;  /* make background image resizable */

    background: var(--site-bk-color);
    background: -moz-linear-gradient(45deg, var(--site-bk-color) 0%, var(--site-bk-color2) 100%);
    background: -webkit-linear-gradient(45deg, var(--site-bk-color) 0%, var(--site-bk-color2) 100%);
    background: linear-gradient(45deg, var(--site-bk-color) 0%, var(--site-bk-color2) 100%);

    display:flex;
    flex-direction:column;
    align-items: center;
    height: 900px;
}

div.generic_block {
    width: 40%;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1%;
}

.generic_block_80 {
    width: 80%;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

div.table_block {
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0;
}

div.content_block {
    width: 80%;
    align-items: center;
}

div.content_table {
    display: table; 
    width: 100%;
}

div.control_block_h,
div.control_block_v,
div.control_block_connect,
div.control_block_r {
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
    flex-direction: row;
    font-size: 14px;
    align-items: center;
}

div.control_block_v {
    flex-direction: column;
}

div.control_block_connect {
    justify-content: center;
    align-items:baseline;
}

div.control_block_r {
    justify-content: flex-end;
    align-items:baseline;
    gap: 20px;
}

div.center_align {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    margin-top: 15px;
}

div.content_column {
    display: table-cell;
    width: 40%;
    padding: 1%;
}

div.dual_labels {
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
    align-items:flex-end;
}

img {
    width: 10%;
    height: auto;
    padding: 5% 0 2% 0;
}

img.dialog_img {
    width: 25%;
    padding: 0;
}

.o4title {
    margin: 0;
    padding: 0;
    font-size: 30pt;
}

.title {
    margin: 0;
    padding: 0;
    font-size: var(--site-title-font-size);
}

p {
    margin: 0;
    padding: 0;
}

p.line_text {
    font-size: 20px;
    margin-top: 15px;
}

.black_color {
    color: #7c7c7c;
    font-size: 18px;
}

hr {
    background: rgba(255,255,255,0);
    background: -moz-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=rgba(255,255,255,1),endColorstr=rgba(255,255,255,0),GradientType=1);

    width: 100%;
    height: 2px;
    border: rgba(255,255,255,0);
}

hr.black {
    background: rgb(255,255,255);
    background: -moz-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(60,60,60,1) 50%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(60,60,60,1) 50%, rgba(255,255,255,0) 100%);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(60,60,60,1) 50%, rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);

    width: 45%;
    height: 2px;
    border: #3c3c3c;

    margin-top: 30px;
}


ul.no-bullets {
    list-style-type: none; /* Remove bullets */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margins */
    width: 100%;
}

ul.no-bullets ui {
    width: 100%;
}

/* Style inputs */
input {
    width: 100%; /* Full width */
    border: 1px solid #ccc; /* Gray border */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    border-radius: 10px;
    height: 30px;
}

/* Style the submit button with a specific background color etc */
input[type=submit], button {
    background-color: var(--site-bk-color2);
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 10px;
    height: 30px;
    width: 100px;
    font-size: 20px;
}

input[type=checkbox] {
    accent-color: #858585;
    vertical-align:middle;
    width: 15px;
}

a {
    font-size: 14px;
    /*text-decoration: none;*/
}

a:hover, button:hover {
    /*background-color: var(--site-bk-color2)!important;*/
    cursor: pointer;
}

input[type=submit]:hover, button[type=submit]:hover {
    background-color: var(--site-bk-color)!important;
    cursor: pointer;
}


a:visited, a:link {
    color: var(--site-text-color2);
}

label.small {
    font-size: 10px;
}

label.medium {
    font-size: 14px;
}

label.left_align,
label.left_align_black {
    display: inline-block;
    width: 100%;
    text-align: left;
    padding: 2px;
}

label.left_align_black {
    color: #7c7c7c;
}

.gap_above {
    margin-top: 15px;
}

.error_layer {
    display: none;
    width: 100%;
    text-align: center;
    color: red;
    font-size: 14px;
}

button {
    margin: 2% 0 2% 0;
}

button.gray {
    background-color: #e5e5e5;
    color: #858585;
}

button.gray:hover {
    color: #fff;
    cursor: pointer;
}

.dialog_50 {
    width: 50%;
    border-radius: 10px;
    background-color: #f8f8f8;
    border-color: #f8f8f8;
    font-size: 14px;
    text-align: center;
    color: #2f99a5;
}

.dialog_50::backdrop {
    backdrop-filter: blur(3px);
}

.fa {
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    color: #858585;
    float: right;
    margin-top: -22px;
    margin-right: 6px;
    position: relative;
    z-index: 2;
}

.fa:hover {
    color: #2f99a5;
    cursor: pointer;
}

::placeholder {
    color: #ccc;
    opacity: 0.5;
}


@media screen and (min-width: 1408px) {
}

@media screen and (max-width: 1407px) and (min-width: 1216px) {
 /*   html {
        color:blueviolet; 
    } */
    img.dialog_img {
        width: 25%;
    }
    div.generic_block {
        width: 55%;
    }
}

@media screen and (max-width: 1215px) and (min-width: 1024px){
  /*  html {
        color:rgb(254, 207, 150);
    } */
    img.dialog_img {
        width: 30%;
    }
    div.generic_block {
        width: 50%;
    }
}

@media screen and (max-width: 1023px) and (min-width: 768px) {
 /*   html {
        color: aqua;
    } */
    .o4title {
        font-size: 30px;
    }
    .title {
        font-size: 26px;
    }
    img.dialog_img {
        width: 40%;
    }
    div.generic_block {
        width: 70%;
    }
}

@media screen and (max-width: 767px) {
    html {
      /*  color:red;  */
        font-size: 14px;
    }
    .o4title {
        font-size: 24px;
    }
    .title {
        font-size: 20px;
    }
    img.dialog_img {
        width: 50%;
    }
    div.generic_block {
        width: 95%;
    }
    div.content_block {
        width: 100%;
    }
    div.content_table {
        display: block;
    }
    div.content_column {
        display: block;
        width: 100%;
    }
    div.control_block {
        font-size: 10px;
    }
    input[type=submit], button {
        font-size: 12px;
    }
    input[type=checkbox] {
        width: 15px;
    }
    label.medium {
        font-size: 12px;
    }

    .dialog_50 {
        width: 80%;
    }
    hr.black {
        width: 70%;
    }
    
}