/* Minification failed. Returning unminified contents.
(2,28): run-time error CSS1039: Token not allowed after unary operator: '-bgBackground'
(5,17): run-time error CSS1039: Token not allowed after unary operator: '-txtNormal'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(30,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(33,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(34,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(35,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(36,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(37,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(39,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(40,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(41,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(42,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(43,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(44,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(45,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(47,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(48,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(49,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(50,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(51,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(52,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(54,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(55,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(56,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(57,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(58,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(59,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(61,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(62,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(64,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(65,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(66,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(67,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(68,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(69,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(71,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(72,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(73,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(74,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(76,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(77,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(78,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(79,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(80,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(82,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(83,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(84,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(85,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(86,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(87,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(88,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(89,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(90,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(93,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(94,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(95,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(96,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(97,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(98,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(99,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(100,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(101,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(102,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(103,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(104,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(105,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(175,21): run-time error CSS1039: Token not allowed after unary operator: '-txtFSmaller'
(207,21): run-time error CSS1039: Token not allowed after unary operator: '-txtFSmaller'
(208,23): run-time error CSS1039: Token not allowed after unary operator: '-caret'
(210,28): run-time error CSS1039: Token not allowed after unary operator: '-txtLowKey'
(211,17): run-time error CSS1039: Token not allowed after unary operator: '-txtNormal'
(217,32): run-time error CSS1039: Token not allowed after unary operator: '-txtWhite'
(222,17): run-time error CSS1039: Token not allowed after unary operator: '-txtLowKey'
(223,21): run-time error CSS1039: Token not allowed after unary operator: '-txtFSmaller'
(227,28): run-time error CSS1039: Token not allowed after unary operator: '-optionBG'
(228,21): run-time error CSS1039: Token not allowed after unary operator: '-txtFSmaller'
(255,45): run-time error CSS1039: Token not allowed after unary operator: '-bgPopWinBtn'
(261,17): run-time error CSS1039: Token not allowed after unary operator: '-txtPopWinBtn'
(263,21): run-time error CSS1039: Token not allowed after unary operator: '-txtFSmaller'
(277,49): run-time error CSS1039: Token not allowed after unary operator: '-bgPopWinBtn_on'
(278,21): run-time error CSS1039: Token not allowed after unary operator: '-txtWhite'
(281,49): run-time error CSS1039: Token not allowed after unary operator: '-btnBg_grayout'
(285,32): run-time error CSS1039: Token not allowed after unary operator: '-bgPopWinBtn'
(289,21): run-time error CSS1039: Token not allowed after unary operator: '-bgPopWinBtn'
(293,32): run-time error CSS1039: Token not allowed after unary operator: '-btnBg_grayout'
(306,17): run-time error CSS1039: Token not allowed after unary operator: '-lnkNormal'
(315,21): run-time error CSS1039: Token not allowed after unary operator: '-lnkBrighter'
(340,28): run-time error CSS1039: Token not allowed after unary operator: '-bgBackground'
(341,28): run-time error CSS1039: Token not allowed after unary operator: '-bgSentenceLine'
(345,21): run-time error CSS1039: Token not allowed after unary operator: '-txtFSubDesc'
(346,17): run-time error CSS1039: Token not allowed after unary operator: '-txtWhite'
(350,17): run-time error CSS1039: Token not allowed after unary operator: '-txtMinor'
(355,21): run-time error CSS1039: Token not allowed after unary operator: '-txtFSmaller'
(368,28): run-time error CSS1039: Token not allowed after unary operator: '-bgProgressLine'
(380,35): run-time error CSS1039: Token not allowed after unary operator: '-txtLowKey'
(385,35): run-time error CSS1039: Token not allowed after unary operator: '-txtWhite'
(389,22): run-time error CSS1039: Token not allowed after unary operator: '-inputBG'
(392,17): run-time error CSS1039: Token not allowed after unary operator: '-txtFNormal'
(397,22): run-time error CSS1039: Token not allowed after unary operator: '-inputBG'
(398,17): run-time error CSS1039: Token not allowed after unary operator: '-txtFNormal'
(403,17): run-time error CSS1039: Token not allowed after unary operator: '-txtFNormal'
(412,45): run-time error CSS1039: Token not allowed after unary operator: '-bgPopWinBtn'
(418,17): run-time error CSS1039: Token not allowed after unary operator: '-txtPopWinBtn'
(420,21): run-time error CSS1039: Token not allowed after unary operator: '-txtFSmaller'
(435,32): run-time error CSS1039: Token not allowed after unary operator: '-bgPopWinBtn'
(439,21): run-time error CSS1039: Token not allowed after unary operator: '-bgPopWinBtn'
(443,49): run-time error CSS1039: Token not allowed after unary operator: '-bgPopWinBtn_on'
(447,32): run-time error CSS1039: Token not allowed after unary operator: '-btnBg_grayout'
(457,45): run-time error CSS1039: Token not allowed after unary operator: '-bgPopWinBtn_on'
(458,17): run-time error CSS1039: Token not allowed after unary operator: '-txtPopWinBtn'
(465,28): run-time error CSS1039: Token not allowed after unary operator: '-bgMask'
(529,28): run-time error CSS1039: Token not allowed after unary operator: '-bgPopWin'
(530,17): run-time error CSS1039: Token not allowed after unary operator: '-txtWhite'
(537,25): run-time error CSS1039: Token not allowed after unary operator: '-txtFNormal'
(545,25): run-time error CSS1039: Token not allowed after unary operator: '-txtFSmaller'
(559,17): run-time error CSS1039: Token not allowed after unary operator: '-txtPopWinBtn'
(601,28): run-time error CSS1039: Token not allowed after unary operator: '-bgPopWinBtn'
(602,24): run-time error CSS1039: Token not allowed after unary operator: '-bgPopWinBtn'
(607,17): run-time error CSS1039: Token not allowed after unary operator: '-txtMinor'
(609,21): run-time error CSS1039: Token not allowed after unary operator: '-txtFMinor'
(613,17): run-time error CSS1039: Token not allowed after unary operator: '-txtNormal'
(618,21): run-time error CSS1039: Token not allowed after unary operator: '-lnkHighlight'
(627,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(628,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(629,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(630,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(631,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(632,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(633,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(634,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(635,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(636,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(637,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(638,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(709,32): run-time error CSS1039: Token not allowed after unary operator: '-bgLeftMenu'
(715,25): run-time error CSS1039: Token not allowed after unary operator: '-txtHighlight'
(721,25): run-time error CSS1039: Token not allowed after unary operator: '-inputBtnTxt'
(733,21): run-time error CSS1039: Token not allowed after unary operator: '-txtLowKey'
(779,25): run-time error CSS1039: Token not allowed after unary operator: '-txtMinor'
(780,29): run-time error CSS1039: Token not allowed after unary operator: '-txtFMinor'
(798,32): run-time error CSS1039: Token not allowed after unary operator: '-bgTile'
(871,25): run-time error CSS1039: Token not allowed after unary operator: '-txtMinor'
(872,29): run-time error CSS1039: Token not allowed after unary operator: '-txtFMinor'
(937,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(938,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(939,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(940,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(941,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(942,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(948,17): run-time error CSS1039: Token not allowed after unary operator: '-txtMinor'
 */
body {
    background-color: var(--bgBackground);
    margin: 0;
    padding: 0;
    color: var(--txtNormal);
    line-height: 1.5;
}

html {
    /*text*/
    --txtMinor: #888;
    --txtNormal: #ebebf4;
    --txtLowKey: #aaa;
    --txtBrighter: #f9f9f9;
    --txtWhite: #fff;
    --txtBlack: #000;
    --txtUnfocused: #888;
    --txtAttention: #ff2a2a;
    --txtHighlight: #00cbc9;
    --txtScore_Middle: #fe8600;
    --txtScore_Failed: #eb5155;
    /*background*/
    --bgBackground: #131621;
    --bgToolBar: #080b1a;
    --bgTile: #1d223b;
    --bgTileBase: rgba(25,30,56,0.4);
    --bgTileSepLine: #111622;
    /*pop-up win*/
    --bgMask: rgba(0, 0, 0, 0.4);
    --bgPopWin: rgba(29,34,59,.99);
    --bgPopWinLine: #111622;
    --bgPopWinInput: #40434d;
    --bgPopWinFocusLegend: #ebebf4;
    --txtPopWinBtn: #FFF;
    --bgPopWinBtn: #0072d2;
    --bgPopWinBtn_on: #0094ff;
    --lnkPopWin: #66bcff;
    /*input,button*/
    --inputBG: #1d223b;
    --inputBtnBg: #00b2ff;
    --inputBtnTxt: #fff;
    --btnBg: #0094ff; /*#007aff;*/
    --btnBg_grayout: #c9d1d7;
    --caret: #00daea;
    --optionBG: #273049;
    /*link*/
    --lnkButton: #0094ff; /*#007aff;*/
    --lnkNormal: #4192f7;
    --lnkBrighter: #5bb2fc;
    --lnkHighlight: #00cbc9;
    --lnkVisited: #784dd0;
    --lnkDownloadHover: #85b4ff;
    /*CEFR*/
    --bgCEFR-A1: rgb(0,187,110);
    --bgCEFR-A2: rgb(108,179,3);
    --bgCEFR-B1: rgb(255,200,0);
    --bgCEFR-B2: rgb(253,131,4);
    --bgCEFR-C1: rgb(219,119,255);
    --bgCEFR-C2: rgb(255,79,114);
    /*progress*/
    --bgProgressLine: #080b19;
    --progressOn: #00ccca;
    /*focus*/
    --focusBorder: #FFF;
    --focusTxtWhite: #FFF;
    --focusTxtDark: #000;
    --focus: #222; /*#fc7982;*/
    --focusInactive: #3a3a3a; /*#fc7982;*/
    --btnFocus: #1b1b1b;
    /*table*/
    --tbBody: #1d223b;
    --tbHead: #2a356c;
    --tbHeadTxt: #aaa;
    --tbSepLine: #000;
    /*menu*/
    --bgMenu: #1b428e;
    --bgAvatar: #7e07ac;
    --bgLeftMenu: #232323;
    --bgTableHeader: #70164b;
    --tbLine: #40434d;
    /*Dashboard*/
    --txtDashboardFGreen: #81c266;
    --txtDashboardFLarge: 3rem;
    --chartPurple: #c462e0;
    --chartRed: #e6626e;
    --chartYellow: #f2ad41;
    --chartGreen: #a0c76e;
    --chartTeal: #2fbdc2;
    --chartBlue: #00a3e0;
    --barPink: #ff63ab;
    /*font-size*/
    font-size: 16px;
    --txtFCirclePercent: 1.5rem;
    --txtFPageHeader: 2rem;
    --txtFHeader: 1.5rem;
    --txtAvatar: 1.3rem;
    --txtSysTitle: 1.8rem;
    --txtReportHeader: 1.5rem;
    --txtTableHeader: 0.85rem;
    --txtSubHeader: 1rem;
    --txtFNormal: 1.1rem;
    --txtFSmaller: 1rem;
    --txtFSubDesc: 0.8rem;
    --txtFMinor: 0.65rem;
    --txtProgress: 0.6rem;
}

.w-5 {
    width: 5%;
}
.w-10 {
    width: 10%;
}
.w-15 {
    width: 15%;
}
.w-20 {
    width: 20%;
}
.w-25 {
    width:25%;
}
.w-30 {
    width: 30%;
}
.w-40 {
    width: 40%;
}
.w-45 {
    width: 45%;
}
.w-50 {
    width: 50%;
}
.w-60 {
    width: 60%;
}
.w-70 {
    width: 70%;
}
.w-75 {
    width: 75%;
}
.w-8 {
    width: 80%;
}
.w-85 {
    width: 85%;
}
.w-90 {
    width: 90%;
}
.w-100 {
    width: 100%;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}
.text-nowrap {
    white-space: nowrap;
}
.form-label {
    text-align: left;
    margin-bottom:8px;
    margin-top: 10px;
    font-size: var(--txtFSmaller);
    font-weight: bold;
}

.form-control {
    display: block;
    width: 100%;    
    padding: 4px;        
    line-height: 1.5;    
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 3px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-input {
    display:flex;
}
.form-check {
    margin-top: 10px;
    text-align: left;
}
.form-check .form-check-input {
    display: inline-block;
    width: auto;
}


input, textarea, select {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 6px;
    font-size: var(--txtFSmaller);
    caret-color: var(--caret);
    background-color: transparent;
    border: 1px solid var(--txtLowKey);
    color: var(--txtNormal);
}

    input:focus,
    textarea:focus,
    select:focus {
        border: 1px solid var(--txtWhite);
        outline: none;
    }

::placeholder {
    color: var(--txtLowKey);
    font-size: var(--txtFSmaller);
}

select option {
    background-color: var(--optionBG);
    font-size: var(--txtFSmaller);
}

textarea {
    resize: none;
}

IMG {
    BORDER: 0px;
}

.KKphoneticSymbol {
    font-family: "L Lab's KK Phonetic Symbol" !important;
}

.DJphoneticSymbol {
    font-family: "L Lab's DJ Phonetic Symbol" !important;
}



/* ---------------------- Buttons ---------------------- */
.button-box {
    margin: 10px 0px;
}
.main-button {
    position: relative;
    background: none repeat scroll 0 0 var(--bgPopWinBtn);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 0;
    padding: 0;
    color: var(--txtPopWinBtn);
    display: inline-block;
    font-size: var(--txtFSmaller);
    opacity: 0.9;
    text-decoration: none;
    text-transform: inherit !important; /*uppercase;*/
    transition: background 200ms linear 0s;
    text-align: center;
    width: 10rem;
    line-height: 2.3rem;
    height: 2.3rem;
    outline: 0;
    -webkit-appearance: none;
}

    .main-button:hover {
        background: none repeat scroll 0 0 var(--bgPopWinBtn_on);
        color: var(--txtWhite);
    }
    .main-button:disabled {
        background: none repeat scroll 0 0 var(--btnBg_grayout);
    }
    .main-button.minor {
        background: transparent;
        border: 2px solid var(--bgPopWinBtn);
        width: 146px;
        height: 36px;
        line-height: 36px;
        color: var(--bgPopWinBtn);
    }

    .main-button.grayout, .main-button.grayout:hover {
        background-color: var(--btnBg_grayout);
    }

input.main-button.minor,
button.main-button.minor {
    width: 150px;
    height: 40px;
}

/* ---------------------- Links ---------------------- */

a {
    text-decoration: none;    
    color: var(--lnkNormal);
}

    /*a:visited {
        color: var(--lnkVisited);
    }*/

    a:focus,
    a:hover {
        color: var(--lnkBrighter);
        cursor: pointer;
    }
/* ---------------------- Others ---------------------- */
.errorPageTitle {
    COLOR: #CC3333;
    FONT-SIZE: 116%; /*11pt;*/
    font-weight: bold;
}

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    .ellipsis.multi-line {
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
    }

.fnHint {
    display: none;
    background-color: var(--bgBackground);
    border: 1px solid var(--bgSentenceLine);
    text-align: center;
    padding: 2px 5px;
    white-space: nowrap;
    font-size: var(--txtFSubDesc);
    color: var(--txtWhite);
}

.txtHint {
    color: var(--txtMinor);
}

.warningMsg {
    color: #ff2a2a;
    font-size: var(--txtFSmaller);
}

/* --------------------- Scroll bar ------------------ */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 6px;
    background-color: #080b19;
}

/* 若要改變scroll bar寬度，則也必須要調整 SiteMaster.js 內的 fn: _resetPageZoom() 內的 scroll bar 寬度 */
::-webkit-scrollbar {
    width: 8px;
    background-color: var(--bgProgressLine);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    border-radius: 6px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #1d223b;
}

.only-bottom-line {
    border: none;
    border-bottom: 1px solid var(--txtLowKey) !important;
}

.only-bottom-line:focus {
    border: none;
    border-bottom: 1px solid var(--txtWhite) !important;
}

.chosen-container .chosen-drop {
    background: var(--inputBG) !important;
}
.chosen-container .chosen-results {
    color: var(--txtFNormal) !important;
}

.chosen-container-active.chosen-with-drop .chosen-single,
.chosen-container-single .chosen-single {
    background: var(--inputBG) !important;
    color: var(--txtFNormal) !important;
    box-shadow: unset !important;
}

.chosen-container-single .chosen-search input[type="text"] {
    color: var(--txtFNormal) !important;
}
.query-input input[type="text"] {
    box-sizing: border-box;
}

/* ---------------------- Buttons ---------------------- */
.form-button {
    position: relative;
    background: none repeat scroll 0 0 var(--bgPopWinBtn);
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    border: 0;
    padding: 0;
    color: var(--txtPopWinBtn);
    display: inline-block;
    font-size: var(--txtFSmaller);
    opacity: 0.9;
    text-decoration: none;
    text-transform: inherit !important; /*uppercase;*/
    transition: background 200ms linear 0s;
    text-align: center;
    width: 164px;
    line-height: 40px;
    height: 40px;
    outline: 0;
    -webkit-appearance: none;
}

    .form-button.minor {
        background: transparent;
        border: 2px solid var(--bgPopWinBtn);
        width: 160px;
        height: 36px;
        line-height: 36px;
        color: var(--bgPopWinBtn);
    }

    .form-button:hover {
        background: none repeat scroll 0 0 var(--bgPopWinBtn_on);
    }

    .form-button.grayout, .form-button.grayout:hover {
        background-color: var(--btnBg_grayout);
    }

input.form-button.minor,
button.form-button.minor {
    width: 150px;
    height: 40px;
}

a.form-button:hover, input.form-button:hover {
    background: none repeat scroll 0 0 var(--bgPopWinBtn_on);
    color: var(--txtPopWinBtn);
}
.mask
{
	position: absolute;
}
.helpScreen .mask {
    background-color: var(--bgMask) !important;
    opacity: unset !important;
}

.help_contentBox
{
    display: none;
    z-index: 3001;
    position: absolute;
    top: 50px;
    left: 50px;
    margin: auto;
}

.help_contentBox .HeadZone
{
    position: relative;
    display: none;
    /*font-weight: bold;*/
    text-align: center;
}

.help_contentBox .BodyZone
{
    position: relative;
    display: block;
}

.help_contentBox .BodyZone h3 {
    color: #FFF;
}

.help_contentBox .BtnZone
{
    position: relative;
    display: none;
}

.BtnZone ul
{
    list-style: none;
    margin: 0;
    padding: 0;
}

.BtnZone li
{
    float: left;
}

.help_contentBox .closeWin {
    left: 506px;
}

.help_contentBox {
    min-width: 200px;
    min-height: 100px;
    max-height: 500px;
    -moz-box-shadow: 0 20px 62px rgba(0,0,0,.45);
    -webkit-box-shadow: 0 20px 62px rgba(0,0,0,.45);
    box-shadow: 0 20px 62px rgba(0,0,0,.45);
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#000000')";
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=90,Color='#000000');
    padding: 15px;
    background-color: var(--bgPopWin);
    color: var(--txtWhite);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

    .help_contentBox .HeadZone {
        font-size: var(--txtFNormal);
        line-height: 1.5; 
    }

    .help_contentBox .BodyZone {
        max-height: 400px;
        overflow: auto;
        padding: 15px;
        font-size: var(--txtFSmaller);
    }

.help_contentBox .BtnZone
{
    margin-top: 10px;
}

.BtnZone ul
{
    margin: 0 auto;
}

.BtnZone li {
    color: var(--txtPopWinBtn);
    margin-left: 20px;
    float: left;
}



body {
    font-size: 15px;
}
.login-box {
    width: 20vw;
    display:inline-block;
    margin-top:10vh;
}
    .login-box input {
        box-sizing: border-box;
        width:100%;
    }
    .school-logo {
        margin: 0px auto;
        text-align: center;
    }
    .school-logo img {
        width:260px;
    }

    .customer-name {
        margin:1vh 1vw;
    }
.sys-title {
    
}
.input-box {
    text-align: left;
    margin-top: 1vh;
}
.btn-box {
    text-align: left;
}
.btn-login {
    margin-top: 2vh;
    background-color: var(--bgPopWinBtn);
    border-color: var(--bgPopWinBtn);
}
.page-footer {
    margin-top: 3vh;
    text-align: center;
    color: var(--txtMinor);
    margin-bottom: 1vh;
    font-size: var(--txtFMinor);
}

#lnkBackMenu {
    color: var(--txtNormal);
}

    #lnkBackMenu:focus,
    #lnkBackMenu:hover {
        color: var(--lnkHighlight);
    }

@media only screen and (orientation: Portrait) {
    body {
        font-size:20px !important;
    }

    html {
        --txtFPageHeader: 2.375rem !important;
        --txtFHeader: 2.125rem !important;
        --txtAvatar: 1.875rem !important;
        --txtSysTitle: 2.25rem !important;
        --txtReportHeader: 1.875rem !important;
        --txtTableHeader: 1.25rem !important;
        --txtSubHeader: 1.375rem !important;
        --txtFNormal: 1.25rem !important;
        --txtFSmaller: 1.125rem !important;
        --txtFSubDesc: 1rem !important;
        --txtFMinor: 1rem !important;
        --txtProgress: 0.75rem !important;
    }
    .login-box {
        width: calc(100% - 100px);
        margin-top: 5vh;
    }
    .school-logo img {
        width: 260px;
    }
    .main-button {
        line-height: 3rem;
        height: 3rem;
    }
    .login-box input[type='text'],
    .login-box input[type='password'] {
        padding: 10px;
    }
  }

@media only screen and (max-width: 767px) {
    body{
        line-height:1.5;
        font-size:20px;
    }
    .left {
        display: none !important;
    }

    .right {
        width: 100%;
        margin: 0;
        padding: 0rem 1rem !important;
    }

    .menubar {
        display: none;
    }

    .page-header-content .user-login {
        margin-right: 0px !important;
    }

    .content-box {
        min-width: unset;
        width: auto;
        margin: 1rem 0rem 3rem 0rem;
    }

    .menubar4Phone {
        margin-top: 0.25rem;
        text-align: left;
        margin-left: 1rem;
    }

    #divReportManager_Slide {
        margin-bottom: 5rem;
    }

    .slide-menu-box {
        height: 100%;
        position: fixed;
        z-index: 1001;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .slide-menu {
        width: 90%;
        height: 100%;
        overflow-y: auto;
        background-color: var(--bgLeftMenu);
        padding-bottom: 3rem;
        font-size:1rem;
    }

        .slide-menu ul a:hover {
            color: var(--txtHighlight);
        }

        .slide-menu ul a {
            text-decoration: none;
            display: block;
            color: var(--inputBtnTxt);
        }

    tr.head {
        display: none;
    }

    table.dataGrid .sub-title, table.dataGrid .add-sub-title, table.report-dataGrid .sub-title, table.report-dataGrid .add-sub-title, table.report-detail .sub-title, table.report-detail .add-sub-title {
        display: inline-block;
    }

    table.dataGrid .sub-title {
        color: var(--txtLowKey);
        vertical-align:top;
    }

    table.dataGrid .sub-info {
        display:inline-block;
        width:70%;
    }

    .row td div.divOnline,
    .row td div.divSchool {
        width: 100% !important;
    }

    a {
        line-height: 2.5rem;
        white-space: nowrap;
    }

    .lnkMenuBtn,
    .page-header-content .user-login a.lnkUser {
        line-height: unset;
    }

    .leftMenuLv2 li a {
        line-height: 2rem;
    }

    .text-left-phone {
        text-align: left !important;
    }
    .dataGrid .row td {
        white-space: normal;
    }

    .dataGrid .row td div {
        width: 100% !important;
    }

        .dataGrid .row td div.score-box {
            width: 19% !important;
            display: inline-block;
            text-align: center !important;
        }

        .score-box .score-hint {
            color: var(--txtMinor);
            font-size: var(--txtFMinor);
            display: inline-block;
            width: 100%;
            margin-top: -10px;
        }

    #txtFilePath {
        width:100% !important;
    }
    .upload-btn {
        margin-top: 10px;
    }

    .dataGrid .row td {
        padding: 8px 0px;
    }

    .result-hint {
        background-color: var(--bgTile);
        margin-bottom: 10px;
        padding: 10px 0px;
    }

    .email-box {
        clear: both;
        float: none;
        height: 250px;
    }

    .input-box-half {
        float:unset;
        width:100%;
    }
    .page-header-content .user-login .avatar {
        line-height: 36px !important;
    }
    .login-server {
        line-height: 1 !important;
    }

    .report-title {
        width: 100% !important;
    }
    .download {
        width:100% !important;
    }

    #btnCheckVLAC {
        margin-top: 10px;
    }

    .input-date-calendar {
        width: 130px;
        height: 32px;
        background: url(../images/icon/icon_calendar.png) no-repeat scroll 100px 2px;
        background-size: 25px;
        margin-bottom: 10px;
    }

    #dlgLessonList .homework_item input[type='button'],
    .dlgLessonList .homework_item input[type='button'] {
        position: relative !important;
        margin-left: inherit;
        width: 110px;
    }

    #txtCommunityIntro {
        line-height: 1.5;
    }
    .CategoryItem {
        width: 320px !important;
    }
    .category-box {
        width:100% !important;
    }

    #ui-datepicker-div a {
        line-height:32px;
    }

    .VSMultiple {
        width:100% !important;
    }

    .dataGrid .row td div.statistics-box {
        width: 30% !important;
        display: inline-block;
        text-align: center !important;
    }

        .dataGrid .row td div.statistics-box .score-hint {
            color: var(--txtMinor);
            font-size: var(--txtFMinor);
            display: inline-block;
            white-space: nowrap;
        }
    .chart-cell {
        width:300px;
    }

    .ReportOfLessonDetail-WinDT {
        display:none;
    }
    .ReportOfLessonDetail-PhoneDT {
        display: table;
    }

    .result-box .score-box {
        width:100% !important;
    }
}

@media only screen and (min-width: 768px) {
    body {
        font-size:15px;
    }
    .left {
        display: inline-block !important;
    }

    .right {
        width: calc(100% - 350px);
    }

    .menubar4Phone {
        display: none !important;
    }

    .slide-menu-box {
        display: none !important;
    }

    .email-box {
        clear: both;
        float: none;
        height: 10rem;
    }

    
}

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

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





/********************/
/* For Android Pad  */
/********************/
@media (min-aspect-ratio: 144/96) {
    html {
        /*font-size*/
        --txtFPageHeader: 34px;
        --txtFHeader: 28px;
        --txtFNormal: 20px;
        --txtFSmaller: 17px;
        --txtFSubDesc: 15px;
        --txtFMinor: 13px;
    }
}


.form-label {
    color: var(--txtMinor);
}

.query-input {
    line-height:1.6rem;
}

#divReportMgrSchool_Slide {
    padding-bottom: 4rem;
}

#lblFirstLoginName {
    line-height:3rem;
}