body {
}
/*
.app .appcontentContainer {
    background-color: #fff;
}
*/


.app .apptopbar {
    background-color: #036eb8;
    
}

.app .page_index {
    position: relative;
    padding-top: calc(50vw + 20px);
    padding-bottom: 20px;
    background-image: url("bg_appindex.jpg")!important;
/*    background-size: 100%;*/
    background-size: 100% auto;
/*    background-size: 10%;*/
/*    background-repeat: repeat!important;*/
    background-attachment: fixed;
/*    height : calc(100vh - 55px);*/
}
.app .page_index::before {
    position: absolute;
    content: '';
    background-image: url("tswcps_logo.jpg?1");
/*
    background-size: 50%;
    background-repeat: no-repeat;
*/
    background-size: 100%;
    width: 50vw;
    height: 50vw;
    background-position: center center;
    top: 20px;
    left: calc(50% - 25vw);
}


.app #leftmenu {
   background-color: #036eb8; 
}

.app .appBox {
    display: block;
    border-radius: 40px;
    background-color: #036eb8;
    color:#fff;
    width: auto;
    height: auto;
    margin:30px;
    padding: 8px;
}

.app .appBox:nth-child(1) { background-color: #036eb8; }
.app .appBox:nth-child(2) { background-color: #8fc31f; }
.app .appBox:nth-child(3) { background-color: #f39800; }
.app .appBox:nth-child(4) { background-color: #00a29a; }
.app .appBox:nth-child(5) { background-color: #f08f9f; }
.app .appBox:nth-child(6) { background-color: #dae000; }
.app .appBox:nth-child(7) { background-color: #2ea7e0; }
.app .appBox:nth-child(8) { background-color: #f8b62d; }
.app .appBox:nth-child(9) { background-color: #c19bc6; }
.app .appBox:nth-child(10) { background-color: #1eabc9; }

.app .appBox>.appBoxImg { display: inline-block; width:50px; }
.app .appBox>.appBoxTitle {
    display: inline-block;
    height: auto;
    margin-left:5px;
    font-size: 20px; 
}
.app.lang_tc .appBox>.appBoxTitle {
    letter-spacing: 10px;
    font-weight: bold; 
}

.app .appBoxImg>i.fas {
    font-size: 25px;
    padding: 15px 0 10px 0;
}

.togglebox {
    position: relative;
    margin: 20px 0;
}

.togglebox>div:first-child::before {
    position: absolute;
    right:16px;
    top:0px;
    font-family: 'FontAwesome';
    content: "+";
    font-size: 25px;
}

.togglebox.active>div:first-child::before {
    content: "一";
    top:5px;
    font-size:20px;
    color: #fff;
}


.togglebox>div:first-child {
    background-color: #f0d699;
    color: #595654;
    font-size: 14px;
    font-weight: bold;
    padding:10px;
    cursor: pointer;
}
.togglebox.active>div:first-child {
    background-color: #a3a7aa;
    color: #fff;
}

.togglebox>div:last-child {
    display: none;
    border: 1px solid #a3a7aa;
    color: #595654;
    font-size: 14px;
    padding:10px;
}
.togglebox.active>div:last-child {
    display: block;
}


.v_component_backbtn {
    display: block;
    padding: 2px;
    font-size: 25px;
    line-height: 50px;
    color: #267fbf;
}

.v_component_backbtn>a>.fas {
    font-size: 30px;
    line-height: 50px;
    color: #267fbf;
}
.v_component_backbtn>a {
    font-size: 25px;
    line-height: 50px;
    color: #267fbf;
}

.numpagination {
    text-align: center;
}

.numpagination >a {
    display: inline-block;
    border:1px solid #ccc;
    margin:5px;
    min-width:30px;
    height:30px;
    padding:0 10px;
    line-height: 30px;
    font-weight: bold;
}

.numpagination >a.active {
    color: #fff;
    background: #f5a63f!important;
    border-color: #f5a63f!important;
    opacity: 1!important;
}

.app .btn.btn-primary {
    position: relative;
    display: block;
    border-radius: 40px;
    background-color: #036eb8;
    color:#fff;
    width: auto;
    height: auto;
    margin:30px;
    padding: 15px 8px;
    font-size: 20px;
    text-align: center;
    vertical-align: top;
    border: 1px solid #efefef;
    box-shadow: 1px 1px 5px rgb(200 200 200);
}
.app.lang_tc .btn.btn-primary {
    letter-spacing: 10px;
    font-weight: bold; 
}

.app .btn.btn-primary>.badge {
    position: absolute;
    right:-10px;
    top:-10px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 20px;
    letter-spacing: 0;
    color: #000;
    box-shadow: 1px 1px 5px rgb(200 200 200);
}

.app .btn.btn-primary:nth-child(1) { background-color: #036eb8; }
.app .btn.btn-primary:nth-child(2) { background-color: #8fc31f; }
.app .btn.btn-primary:nth-child(3) { background-color: #f39800; }
.app .btn.btn-primary:nth-child(4) { background-color: #00a29a; }
.app .btn.btn-primary:nth-child(5) { background-color: #f08f9f; }
.app .btn.btn-primary:nth-child(6) { background-color: #dae000; }
.app .btn.btn-primary:nth-child(7) { background-color: #2ea7e0; }
.app .btn.btn-primary:nth-child(8) { background-color: #f8b62d; }
.app .btn.btn-primary:nth-child(9) { background-color: #c19bc6; }
.app .btn.btn-primary:nth-child(10) { background-color: #1eabc9; }
.app .btn.btn-primary:nth-child(11) { background-color: #036eb8; }
.app .btn.btn-primary:nth-child(12) { background-color: #8fc31f; }
.app .btn.btn-primary:nth-child(13) { background-color: #f39800; }
.app .btn.btn-primary:nth-child(14) { background-color: #00a29a; }
.app .btn.btn-primary:nth-child(15) { background-color: #f08f9f; }
.app .btn.btn-primary:nth-child(16) { background-color: #dae000; }
.app .btn.btn-primary:nth-child(17) { background-color: #2ea7e0; }
.app .btn.btn-primary:nth-child(18) { background-color: #f8b62d; }
.app .btn.btn-primary:nth-child(19) { background-color: #c19bc6; }
.app .btn.btn-primary:nth-child(20) { background-color: #1eabc9; }
.app .btn.btn-primary:nth-child(21) { background-color: #036eb8; }
.app .btn.btn-primary:nth-child(22) { background-color: #8fc31f; }
.app .btn.btn-primary:nth-child(23) { background-color: #f39800; }
.app .btn.btn-primary:nth-child(24) { background-color: #00a29a; }
.app .btn.btn-primary:nth-child(25) { background-color: #f08f9f; }
.app .btn.btn-primary:nth-child(26) { background-color: #dae000; }
.app .btn.btn-primary:nth-child(27) { background-color: #2ea7e0; }
.app .btn.btn-primary:nth-child(28) { background-color: #f8b62d; }
.app .btn.btn-primary:nth-child(29) { background-color: #c19bc6; }
.app .btn.btn-primary:nth-child(30) { background-color: #1eabc9; }

.studentinfo .f_point_total { color: blue; }
.studentinfo .f_point_used { color: red; }
.studentinfo .f_point_net { color: green; }

.groupaddpoint_caution_title {
    text-align: center;
    font-size:160%;
    font-weight: bold;
}
.groupaddpoint_caution_desc {
    text-align: center;
    font-size:120%;
}
.groupaddpoint_caution_total {
    text-align: center;
    font-size:120%;
    font-weight: bold;
}