@import url('./Scrollbar.css'); /*import Scrollbar 導入客製化滾動條  */
@import url('./ListLink.css'); /*import ListLink 導入表格  */
@import url('./Forms.css'); /*import Forms 導入Forms工具格式  */
@import url('./Table.css'); /*import Table 導入表格  */
@import url('./SysBut.css'); /*import 按鈕Hover 導入按鈕Hover  */
@import url('./TreeNode.css'); /*import 客製化按鈕TreeNodeHover 導入按鈕TreeNodeHover  */
@import url('./CheckBox.css'); /*import 客製化按鈕CheckBox 導入按鈕CheckBox  */
@import url('./Calendar.css'); /*import 客製化按鈕Calendar 導入按鈕Calendar  */
/*-----------------------------------------------------------------------------------*/
/* Heading */

/* #Basic Styles 基本樣式
================================================== */
body {
    background: #f4f7f8;
    font: 14px/21px Microsoft JhengHei, PMingLiU, Arial, Puritan; /*"Microsoft JhengHei微軟正黑體", "PMingLiU新細明體",*/
    color: #0d0d0d;
    -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 22px;
    font-family: Microsoft JhengHei, PMingLiU, Arial, Puritan; /*"Microsoft JhengHei微軟正黑體", "PMingLiU新細明體",*/
}

h1 {
    font-size: 48px;
}

h2 {
    font-size: 40px;
}

h3 {
    font-size: 32px;
    font-weight: 500;
    text-transform: capitalize;
}

h4 {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.7;
    text-transform: capitalize;
}

h5 {
    font-size: 18px;
    text-transform: capitalize;
}

h6 {
    font-size: 16px;
    line-height: 28px;
    font-weight: 500;
    text-transform: capitalize;
}


input[type=checkbox] {
    cursor: pointer;
    width: 20px;
    height: 20px;
}

    input[type=checkbox]:checked:before {
        content: "\2714"; /*2714勾，2600太陽，2764愛心，雪人2603*/
        background: #FCF3CF; /*#FEF9E7、#fffed5*/
        text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
        font-size: 26px;
        text-align: center;
        line-height: 8px;
        display: inline-block;
        width: 20px;
        height: 20px;
        color: #FF5733; /*#FF5733紅、#00904f綠*/
        border: 1px solid #cdcdcd;
    }

    input[type=checkbox]:before {
        content: "\202A";
        background: #ffffff;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
        font-size: 40px;
        text-align: center;
        line-height: 8px;
        display: inline-block;
        width: 20px;
        height: 20px;
        color: #00904f;
        border: 1px solid #cdcdcd;
    }


.icon-size {
    width: 36px;
    height: 36px;
}

.icon-size26 {
    width: 26px;
    height: 26px;
}

.icon-size30 {
    width: 30px;
    height: 30px;
}


.icon-size36 {
    width: 36px;
    height: 36px;
}

.nav-link-text {
    margin-left: 10px;
}

.imgPercent {
    width: 50px;
    height: 50px;
    border-radius: 50%
}

/*"Microsoft JhengHei微軟正黑體", "PMingLiU新細明體",*/
.font10 {
    font: 10px Microsoft JhengHei, PMingLiU, Arial, Puritan;
}

.font12 {
    font: 12px Microsoft JhengHei, PMingLiU, Arial, Puritan;
}

.font14 {
    font: 12px Microsoft JhengHei, PMingLiU, Arial, Puritan;
}

.font16 {
    font: 16px Microsoft JhengHei, PMingLiU, Arial, Puritan;
}

.font18 {
    font: 18px Microsoft JhengHei, PMingLiU, Arial, Puritan;
}

.font20 {
    font: 20px Microsoft JhengHei, PMingLiU, Arial, Puritan;
}

.font24 {
    font: 24px Microsoft JhengHei, PMingLiU, Arial, Puritan;
}

.font30 {
    font: 30px Microsoft JhengHei, PMingLiU, Arial, Puritan;
}

.TreeDeptFont {
    font: 18px Microsoft JhengHei, PMingLiU, Arial, Puritan;
    height: 36px;
    color: #000000;
}

.TreePosiFont {
    font: 18px Microsoft JhengHei, PMingLiU, Arial, Puritan;
    height: 36px;
    color: #1B4F72;
    font-weight: bold;
}

.TreeTermFont {
    font: 18px Microsoft JhengHei, PMingLiU, Arial, Puritan;
    height: 36px;
    color: #000000;
}

.TreeTeacherFont {
    font: 18px Microsoft JhengHei, PMingLiU, Arial, Puritan;
    height: 36px;
    color: #1B4F72;
    font-weight: bold;
}

.TreeNumberFont {
    font: 18px Microsoft JhengHei, PMingLiU, Arial, Puritan;
    height: 36px;
    color: #873600;
}

.TreeStudentFont {
    font: 18px Microsoft JhengHei, PMingLiU, Arial, Puritan;
    height: 36px;
    color: #1B4F72;
    font-weight: bold;
}

.GridView {
    text-align: center;
}

.GridViewL {
    text-align: left;
}

.GridViewR {
    text-align: right;
}

.SysButGridView {
    height: 24px;
    font: 18px Microsoft JhengHei, PMingLiU, Arial, Puritan; /*"Microsoft JhengHei微軟正黑體", "PMingLiU新細明體",*/
    color: #336666;
    /*使用 align-items 或 align-content 的屬性，輕輕鬆鬆就可以做到垂直置中的效果喔！*/
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle; /*垂直置中 */
}

    .SysButGridView a {
        /*padding: 3px 12px;*/
        border-radius: 12px;
        color: #005AB5;
    }

    .SysButGridView:hover {
        border-radius: 12px;
        color: #984B4B;
        background: #F0F87F;
        font-weight: bold;
    }

.SysSelect {
    font: 18px Microsoft JhengHei, PMingLiU, Arial, Puritan; /*"Microsoft JhengHei微軟正黑體", "PMingLiU新細明體",*/
    color: #005AB5;
}

    .SysSelect a {
        color: #005AB5;
    }

    .SysSelect:hover {
        color: #005AB5;
        background: #cae6f1;
        font-weight: bold; /*粗體 */
    }

.SysBut36 {
    height: 36px;
    font: 16px Microsoft JhengHei, PMingLiU, Arial, Puritan; /*"Microsoft JhengHei微軟正黑體", "PMingLiU新細明體",*/
    color: #005AB5;
    /*使用 align-items 或 align-content 的屬性，輕輕鬆鬆就可以做到垂直置中的效果喔！*/
    /*            display: flex;*/
    align-items: center;
    justify-content: center; /*水平置中 */
    vertical-align: middle; /*垂直置中 */
}

    .SysBut36 a {
        /*padding: 3px 12px;*/
        border-radius: 12px;
        color: #005AB5;
    }

    .SysBut36:hover {
        border-radius: 12px;
        color: #984B4B;
        background: #F0F87F;
        font-weight: bold; /*粗體 */
    }

.SysBut36L {
    height: 36px;
    font: 18px Microsoft JhengHei, PMingLiU, Arial, Puritan; /*"Microsoft JhengHei微軟正黑體", "PMingLiU新細明體",*/
    color: #005AB5;
    /*使用 align-items 或 align-content 的屬性，輕輕鬆鬆就可以做到垂直置中的效果喔！*/
    margin: 6px; /*表格內間距全部padding*/
    display: flex;
    align-items: center;
    justify-content: left; /*水平靠右 */
    vertical-align: middle; /*垂直置中 */
}

    .SysBut36L a {
        /*padding: 3px 12px;*/
        border-radius: 12px;
        color: #005AB5;
    }

    .SysBut36L:hover {
        border-radius: 12px;
        color: #984B4B;
        background: #F0F87F;
        font-weight: bold; /*粗體 */
    }

.SysDropdown30 {
    height: 30px;
    font: 18px Microsoft JhengHei, PMingLiU, Arial, Puritan; /*"Microsoft JhengHei微軟正黑體", "PMingLiU新細明體",*/
    color: #005AB5;
    /*使用 align-items 或 align-content 的屬性，輕輕鬆鬆就可以做到垂直置中的效果喔！*/
    display: flex;
    align-items: center;
    justify-content: center; /*水平置中 */
    vertical-align: middle; /*垂直置中 */
}

    .SysDropdown30 a {
        /*padding: 3px 12px;*/
        border-radius: 12px;
        color: #005AB5;
    }

    .SysDropdown30:hover {
        border-radius: 12px;
        color: #984B4B;
        background: #F0F87F;
        font-weight: bold; /*粗體 */
    }

.SysDropdown30L {
    height: 30px;
    font: 18px Microsoft JhengHei, PMingLiU, Arial, Puritan; /*"Microsoft JhengHei微軟正黑體", "PMingLiU新細明體",*/
    color: #005AB5;
    /*使用 align-items 或 align-content 的屬性，輕輕鬆鬆就可以做到垂直置中的效果喔！*/
    display: flex;
    align-items: center;
    justify-content: left; /*水平靠右 */
    vertical-align: middle; /*垂直置中 */
}

    .SysDropdown30L a {
        /*padding: 3px 12px;*/
        border-radius: 12px;
        color: #005AB5;
    }

    .SysDropdown30L:hover {
        border-radius: 12px;
        color: #984B4B;
        background: #F0F87F;
        font-weight: bold; /*粗體 */
    }


.SysDropdown36 {
    height: 36px;
    font: 18px Microsoft JhengHei, PMingLiU, Arial, Puritan; /*"Microsoft JhengHei微軟正黑體", "PMingLiU新細明體",*/
    color: #005AB5;
    /*使用 align-items 或 align-content 的屬性，輕輕鬆鬆就可以做到垂直置中的效果喔！*/
    display: flex;
    align-items: center;
    justify-content: center; /*水平置中 */
    vertical-align: middle; /*垂直置中 */
}

    .SysDropdown36 a {
        /*padding: 3px 12px;*/
        border-radius: 12px;
        color: #005AB5;
    }

    .SysDropdown36:hover {
        border-radius: 12px;
        color: #984B4B;
        background: #F0F87F;
        font-weight: bold; /*粗體 */
    }

.SysDropdown36L {
    height: 36px;
    font: 18px Microsoft JhengHei, PMingLiU, Arial, Puritan; /*"Microsoft JhengHei微軟正黑體", "PMingLiU新細明體",*/
    color: #005AB5;
    /*使用 align-items 或 align-content 的屬性，輕輕鬆鬆就可以做到垂直置中的效果喔！*/
    display: flex;
    align-items: center;
    justify-content: left; /*水平靠右 */
    vertical-align: middle; /*垂直置中 */
}

    .SysDropdown36L a {
        /*padding: 3px 12px;*/
        border-radius: 12px;
        color: #005AB5;
    }

    .SysDropdown36L:hover {
        border-radius: 12px;
        color: #984B4B;
        background: #F0F87F;
        font-weight: bold; /*粗體 */
    }