/* 用作清楚地顯示一般資料 */
table.currentInfoDisplay {
    font-size: 1rem;
    color: #800000;
    line-height: 1.2em;
    vertical-align: middle;
    text-align: left;
    background-color: #FFFFCC;
    border: medium solid #996600;
    margin: 10px 0px 10px 0px;
    width: 100%;
    border-collapse: collapse;
}

table.currentInfoDisplay > tbody > tr.heading
, table.currentInfoDisplay > thead > tr
{
    font-size: 2em;
    font-weight: bolder;
    border-bottom-style: double;
    border-bottom-width: 3px;
}

table.currentInfoDisplay > tbody > tr > td, table.currentInfoDisplay > thead > tr > td
{
    padding: 5px;
}

/* ============================================================================= */

/* 選擇不同功能的Table，最左一列是數字 */
.selectFunction {
    font-size: 1rem;
    color: #000000;
    background-color: #FFFFFF;
    border: 1px solid #C0C0C0;
    width: auto;
    border-collapse: collapse;
    margin-top: 10px;
}

.selectFunction td
{
	padding: 5px 30px;
}

.selectFunction tr:hover
{
    background-color: #FFFFCC;
}

.selectFunction > tbody > tr > td:first-child
{
	text-align: center;
	font-weight: bolder;
	color: #0000FF;
}

/* ============================================================================================================================== */

/* 輸入資料的表格 */
.manage {
    font-size: 1rem;
    color: #000000;
    background-color: #fafafa;
    border: 1px solid #dae5e6;
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    margin-bottom: 20px;
}

    /* Heading Row */
    .manage > thead > tr
    , .manage > tbody > tr.heading {
        background-color: #0066FF;
        color: #FFFFFF;
    }

        /* Heading Row Hover */
        .manage > thead > tr:hover, .manage > tbody > tr.heading:hover {
            
        }
 
        /* Heading Cell */
        .manage > thead > tr > td
        , .manage > thead > tr > th
        , .manage > tbody > tr.heading > td
        , .manage > tbody > tr.heading > th {
            padding: 10px;
            font-weight: bolder;
            font-size: larger;
        }


    /* Body Row */
    .manage > tbody > tr {
        border-bottom-style: dotted;
        border-bottom-width: 1px;
        border-bottom-color: #dddddd;
    }

        /* Body Row Hover */
        .manage > tbody > tr:not(.heading):hover {
            background-color: #FFFFFF;
        }

        /* Body Cell */
        .manage > tbody > tr > td {
            padding: 5px;
        }

    .manage tr:lang(english) {
        background-color: #F8ECD1;
    }


/* 新增內容時，標題列變為綠色 */
.addContent tr.heading
{
	background-color: #009933 !important;
}

/* 修改內容時，標題列變為藍色 */
.modifyContent tr.heading
{
	background-color: #0066FF !important;
}

.manage > tbody > .subHeading
{
    background-color: #99CCFF;
    color: #000000;
    font-size : 1.3em;
}

.manage > tbody > .subHeading > td
{
	font-weight: bolder;
    padding : 10px 0 10px 20px;
}

.manage input[type="text"]
, .manage input[type="password"]
, .manage textarea
, .manage input[type="file"]
, .manage select
{
    border-style: solid;
    border-width: 1px 5px 1px 1px;
    border-color: #3399FF;
    padding : 5px;
    border-radius : 3px;
}

.manage .parseStudent
{
    height:100px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    display:block; 
    float:left; 
    padding : 5px !important;
}

.manage legend
{
    padding : 5px;
    background-color : #FFCC66;
}

.manage fieldset
{
    background-color : #FFFF99;
    border : dotted 1px #F1F0ED;
    width : auto;
    padding : 5px;
}

.manage input[type="submit"] {
    padding: 5px 30px 5px 30px;
    border: 1px solid #3399FF;
    vertical-align: middle;
    cursor: pointer;
    font-weight: normal;
    background-color: #EBEBEB;
    border-radius: 3px;
    font-size : 1.2em;
}

    .manage input[type="submit"]:hover {
        font-weight: bolder;
        background-color: #FFFF99;
        border-radius: 3px;
    }

.manage input[type="submit"].changeLevel
{
    vertical-align: middle;
    padding: 5px 5px 5px 5px !Important;
}

.manage .label {
    text-align: right;
    color: #0066FF;
    vertical-align: middle;
    padding-left : 20px;
}

.manage .yellowBox {
    margin: 2em 0;
    background-color: #f7f0c8;
    border-top: solid 1px #0066FF;
    text-align: left;
    padding: 0.5em;
}

    .manage .yellowBox input[type="submit"] {
        padding: 5px 10px 5px 10px;
        border: 1px solid #bd9320;
        background-color: #f5e9c9;
        font-size: 1em;
    }


/* Chinese Version */
.shortLabel .manage .label {
    width: 200px;
}

/* English Version */
.longLabel .manage .label {
    width: 300px;
}

@media (max-width: 1199px) {
    .manage > tbody > tr
    {
        display : block;
    }
    .manage > tbody > tr > td
    {
        display : block
    }
    .manage .label {
        text-align: left;
        font-weight: bold;
        display: flex;
        flex-direction: row;
        font-size: larger;
    }
    .shortLabel .manage .label, .longLabel .manage .label {
        width: 100%;
    }
    .manage .label div
    {
        margin : 0 0 0 2em;
        font-weight : normal;
        color : #2c8e3d;
    }
}

.manage .vam {
}

    .manage .vam > * {
        vertical-align: middle;
    }

.manage .labelWide {
    text-align: right;
    color: #0066FF;
    vertical-align: middle;
    width: 400px;
}

.manage .helpNo {
    width: fit-content;
}

.manage .label > table
{
    float : right;
    clear : both;
}

.manage .rowNum
{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    color: #0066FF;
    border-right-style: dotted;
    border-right-width: 1px;
    border-right-color: #0066FF;
    text-align: center;
}

.manage .help
{
    font-size: 1em;
    color: #009933;
}

.manage .manageInner
{
	width : 100%;
}

.manage .vm *
{
    vertical-align: middle;
}

.manage input[type=radio] {
}

.manage input[type=radio] + label {
}

.manage input[type=radio]:checked {
    width : 2em;
    height : 2em;
 }

.manage input[type=radio]:checked + label
, .manage input[type=checkbox]:checked + label 
{
    font-weight: bolder;
    font-size: 2em;
    color : #0066FF;
}

.manage span[disabled=disabled] > label {
    text-decoration: line-through;
}

.manage select {
    vertical-align: middle;
    padding: 5px;
    border-radius: 3px;
}

.manage select option
{
    padding : 5px;
}

.manage .oneRow
{
    display : flex;
    flex-direction : row;
    flex-wrap : nowrap;
    align-items : flex-start;
    justify-content : flex-start;
}

.manage .action .add label::before {
    content: '\2b';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: inline;
    margin: 0 5px;
    color: #FFFFFF;
    background-color: #73bd68;
}

.manage .action .modify label::before {
    content: '\f303';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: inline;
    margin: 0 5px;
    color: #FFFFFF;
    background-color: #377dc8;
}

.manage .action .delete label::before {
    content: '\f2ed';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: inline;
    margin: 0 5px;
    color: #FFFFFF;
    background-color: #e02a2a;
}

/* ======================================================================== */
table.search {
    border-collapse: collapse;
    border: 1px solid #C0C0C0;
    background-color: #FFFFCC;
}

table.search > tbody > tr> td
{
    padding : 5px;
}

/* Search Result */
table.searchResult
{
    background-color: #FFFF99;
    border-style: double none double none;
    border-top-width: medium;
    border-bottom-width: medium;
    border-top-color: #FFCC66;
    border-bottom-color: #FFCC66;
    margin: 10px 0px 10px 0px;
    width: 100%;
    border-collapse: collapse;
}

table.searchResult > tbody > tr > td
{
    padding : 5px;
    line-height: 1.2em;
}

/* ============================================================== */
div.manage {
    border-style: solid;
    border-width: 1px;
    border-color: #C0C0C0;
    font-size: 1rem;
    color: #000000;
    background-color: #FFFFFF;
    padding: 0px;
    margin-top: 20px;
    margin-bottom: 20px;
}

div.manage div.header
{
    padding: 5px;
    background-color: #0066FF;
    color: #FFFFFF;
    font-weight: 900;
    font-size: 120%;
}

div.manage .row
{
    padding: 5px;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    border-bottom-color: #dddddd;
    display : flex;
    flex-direction : row;
    flex-wrap : nowrap;
    justify-content : flex-start;
    align-items : stretch;
}

div.manage .row:hover
{
    border-bottom-color: #66CCFF;
    background-color: #FCFCFC;
}

    div.manage .row .label {
        display: block;
        text-align: right;
        padding-right: 20px;
        border-right-style: solid;
        border-right-width: 1px;
        border-right-color: #dddddd;
        flex-grow : 0;
        flex-shrink : 1;
    }

    div.manage .row .content
    {
        display: block;
        flex-grow : 1;
        flex-shrink : 5;
    }

.shortLabel div.manage .label {
    flex-basis: 200px;
}

.longLabel div.manage .label {
    flex-basis: 300px;
}

div.manage .row .content > *
{
    margin-left : 20px;
}

div.manage .row .content .guideline
{
    display: block;
    color: #0066FF;
    line-height : 2em;
}

div.manage .row .content input[type="text"]
, div.manage .row .content input[type="password"]
, div.manage .row .content textarea
, div.manage .row .content input[type="file"]
{
    border-style: solid;
	border-width: 1px 5px 1px 1px;
	border-color: #3399FF;
	padding : 5px;
}

div.manage .row .content input[type="text"]:focus
, div.manage .row .content input[type="password"]:focus
, div.manage .row .content textarea:focus
, div.manage .row .content input[type="file"]:focus
{
    border-color: #FF0066;
}

div.manage .row .content input[type="submit"]
{
    padding: 5px 30px 5px 30px;
    border: 1px solid #3399FF;
    vertical-align: middle;
    cursor: pointer;
    font-weight: normal;
    background-color: #EBEBEB;
}

div.manage .row .content input[type="submit"]:hover
{
    font-weight: bolder;
    background-color: #FFFF99;
}

input[type="submit"].changeLevel
{
    vertical-align: middle;
    padding: 5px 5px 5px 5px !Important;
}

/*======================================*/

h3.error
{
    font-size: large;
    font-weight: bold;
    color: #FF0000;
}

p.error
{
    margin-bottom: 30px;
}

.error
{
    background-color: #FF6600;
}

/* ================================== */

table.clearDisplay
{
    border-collapse: collapse;
    border: 1px solid #999999;
}

/* Table Head */
table.clearDisplay > thead > tr
, table.clearDisplay tr.head {
    background-color: #F1F0ED;
    font-size: 1rem;
    font-weight: 800;
    border-bottom: 1px solid #999999;
}

    table.clearDisplay > thead > tr > td
    , table.clearDisplay > thead > tr > th
    , table.clearDisplay tr.head td
    , table.clearDisplay > thead > th > td 
    {
        padding: 5px;
        text-align: left;
    }

table.clearDisplay > tbody > tr > td
{
    padding: 5px 5px 5px 5px;
    border-right-style: dotted;
    border-right-width: 1px;
    border-right-color: #C0C0C0;
    vertical-align : top;
}

table.clearDisplay > tbody > tr.bottomLine
{
    border-bottom : dotted 1px #C0C0C0;
}

table.clearDisplay > tbody > tr.bottomLine > td
{
    vertical-align : top;
}

table.clearDisplay > tbody > tr:hover
{
    background-color: #FFFFCC;
}

table.clearDisplay > tbody > tr.subHeading
{
    background-color: #FFCC66;
    font-weight: 600;
}

table.clearDisplay > tbody > tr > td.selected
{
    font-size: larger;
    font-weight: bolder;
    background-color: #99FFCC;
}

table.clearDisplay > tbody > tr.selected
{
    background-color: #99FFCC;
}

table.clearDisplay > tbody > tr > td.label
{
    font-weight: bold;
    color: #808080;
}

table.clearDisplay > tbody > tr > td.labelRight
{
    font-weight: bold;
    vertical-align: top;
    text-align: right;
}

/* ============================================ */
table.clearDisplaySmall
{
    border-collapse: collapse;
    border: 1px solid #999999;
}

table.clearDisplaySmall > thead > tr
{
    background-color: #F1F0ED;
    font-weight: 600;
    border-bottom: 1px solid #999999;
}

table.clearDisplaySmall > thead > tr > td
{
    padding: 3px;
    text-align: left;
}

table.clearDisplaySmall > tbody > tr > td
{
    padding: 5px 20px 5px 5px;
    border-right-style: dotted;
    border-right-width: 1px;
    border-right-color: #C0C0C0;
}

table.clearDisplaySmall > tbody > tr.bottomLine
{
    border-bottom : dotted 1px #C0C0C0;
}

table.clearDisplaySmall > tbody > tr.bottomLine > td
{
    vertical-align : top;
}

table.clearDisplaySmall > tbody > tr:hover
{
    background-color: #FFFFCC;
}

table.clearDisplaySmall > tbody > tr.subHeading
{
    background-color: #FFCC66;
    font-weight: 600;
}

table.clearDisplaySmall > tbody > tr > td.selected
{
    font-size: larger;
    font-weight: bolder;
    background-color: #99FFCC;
}

table.clearDisplaySmall > tbody > tr.selected
{
    background-color: #99FFCC;
}

table.clearDisplaySmall > tbody > tr > td.label
{
    font-weight: bold;
    color: #808080;
}

/* ===================================================== */
table.manage02 input[type=radio]:checked + label
, table.manage02 input[type=checkbox]:checked + label
{
    font-weight:bolder;
    font-size:larger;
}

table.manage02 > tbody > tr > td.label
, table.manage02 td.label
{
    text-align: right;
    vertical-align: top;
}

/*永遠放在右下角*/
div.rightBottom {
    position: fixed;
    bottom: 5px;
    right: 5px;
}

/*===========================================*/
table.twoColumns {
    border-collapse: collapse;
    border: 1px solid #999999;
    margin-bottom: 1em;
    width: 100%;
}

    table.twoColumns td {
        padding: 5px;
        text-align: left;
    }

    table.twoColumns tr
    {
        border-bottom : solid 1px #dddddd;
    }

    table.twoColumns tr > td:nth-of-type(1) {
        text-align: right;
        vertical-align: top;
        background-color: aliceblue;
        width : 30%;
        padding : 5px 15px 5px 5px;
    }

        table.twoColumns tr > td:nth-of-type(2) {
            padding: 5px 5px 5px 15px;
            font-weight : bold;
        }