/********************************************************/
/*page effect*/
html{
    min-height: 100% !important;
    height: 100%;
}

body{
    margin: 0;
    min-width: 1500px;
    /*min-height: 100% !important;*/
    height: 100%;
}

.mainBodyPadding{
    width: 90%;
    margin: 0 auto 20px;
}

/*nonuser*/
.normalUserBody{
    background: rgba(250,137,0,1);
    background: -moz-linear-gradient(top, rgba(250,137,0,1) 0%, rgba(255,168,61,1) 100%) fixed;
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(250,137,0,1)), color-stop(100%, rgba(255,168,61,1))) fixed;
    background: -webkit-linear-gradient(top, rgba(250,137,0,1) 0%, rgba(255,168,61,1) 100%) fixed;
    background: -o-linear-gradient(top, rgba(250,137,0,1) 0%, rgba(255,168,61,1) 100%) fixed;
    background: -ms-linear-gradient(top, rgba(250,137,0,1) 0%, rgba(255,168,61,1) 100%) fixed;
    background: linear-gradient(to bottom, rgba(250,137,0,1) 0%, rgba(255,168,61,1) 100%) fixed;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa8900', endColorstr='#ffa83d', GradientType=0 );
}

.normalUserSchoolName{
    padding-top: 50px;
    font-size: 34px;
    letter-spacing:3px;
    font-family:Microsoft JhengHei;
}

.normalUserProgramName{
    padding-top: 15px;
    font-size: 48px;
    font-family:Microsoft JhengHei Light;
}

.normalUserContainer{
    padding-top: 20px;
    width:100%;
    text-align: center;
}

.circleContainer{
    margin:0 auto;
    width: 250px;
    height: 250px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}
.circleContainerInsideImage{
  display: inline;
  margin: 0 auto;
  margin-left: -8%; //centers the image
  height: 100%;
  width: auto;
}

.normalUserUsername{
    padding-top: 40px;
    font-family: Microsoft JhengHei;
    font-size: 24px;
}
.normalUserUsernameTitle{
    vertical-align: middle;
}
.normalUserUserIcon{
    font-size: 36px;
    vertical-align: middle;
    padding-left: 16px;
}
.normalUserUsernameInputContainer{
    padding-left: 16px;
}
.normalUserUsernameInput{
    height: 35px;
    width: 250px;
    border: 0;
    padding: 0;
    font-size: 18px;
    padding-left: 16px;
    background-color: #FAC698;
}
.normalUserUsernameInput:focus{
    outline: none;
}

.failLogin{
    height: 25px;
    color: red;
}
.failLoginMessage{
    padding-left: 180px;
}

.normalUserPassword{
    font-family: Microsoft JhengHei;
    font-size: 24px;
}
.normalUserPasswordIcon{
    font-size: 36px;
    vertical-align: middle;
    padding-left: 16px;
}
.normalUserPasswordInputContainer{
    padding-left: 16px;
}
.normalUserPasswordInput{
    height: 35px;
    width: 250px;
    border: 0;
    padding: 0;
    font-size: 18px;
    padding-left: 16px;
    background-color: #FAC698;
}
.normalUserPasswordInput:focus{
    outline: none;
}

.normalUserSubmit{
    padding-top: 25px;
}
.normalUserSubmitInput{
    border: 0;
    width: 266px;
    height: 35px;
    border-radius: 15px;
    color: #F68F33;
    font-size: 24px;
    font-weight: 900;
    font-family: Microsoft JhengHei;
}
.normalUserSubmitInputContainer{
    padding-left: 170px;
}
.normalUserSubmitInput:focus{
    outline: none;
}
.normalUserSubmitInput:hover{
    outline: none;
    cursor: pointer;
    background-color: lightgrey;
}

/* user */
.shadowBar{
    padding-bottom: 30px;
}
.topMenuBar{
    width: 90%;
    margin: 0 auto;
    padding-top: 20px;
    font-family: Microsoft JhengHei;
    font-size: 20px;
}

.topMenuBar table{
    table-layout: fixed;
}

.topMenuCell{
    border: 1px lightgrey solid;
}

.topMenuCell:hover{
    background-color: lightgrey;
    cursor: pointer; 
}

.topMenuCellMainSelected{ color:white;background-color: lightgrey; }
.topMenuCellStudentSelected{ color:white;background-color: #FABD96; }
.topMenuCellAttendSelected{ color:white;background-color: #CFE4AE; }
.topMenuCellGradingSelected{ color:white;background-color: #ba976c; }
.topMenuCellActivitySelected{ color:white;background-color: #F5A8B2; }
.topMenuCellServiceSelected{ color:white;background-color: #FF95CA; }
.topMenuCellUserDetailSelected{ color:white;background-color: #94F3DF; }
.topMenuCellRewardPunishSelected{ color:white;background-color: #dab2f1; }
.topMenuCellReportSelected{ color:white;background-color: #E3DFF1; }
.topMenuCellUploadDataSelected{ color:white;background-color: #FFE79B; }
.topMenuCellDownloadDataSelected{ color:white;background-color: #fab9d9; }
.topMenuCellAdminSelected{ color:white;background-color: #D9E2F3; }


/********************page*************************/
/*main*/
.main{
    min-height: calc(100% - 255.2px);
    background-color:#FABD96; 
    box-shadow: inset 0 7px 15px -7px rgba(33,33,33,0.7);
    font-family: Microsoft JhengHei;
    font-size: 20px;
}

.mainDate{
    padding-top: 50px;
    width: 70%;
    margin: 0 auto;
}

.mainUserName{
    padding-top: 30px;
    width: 70%;
    margin: 0 auto;
}

.mainPermissionGroup{
   /* padding-top: 30px;
    width: 70%;
    margin: 0 auto;*/
}
.mainPermissionGroup select{
    font-size: 20px;
    width: 300px;
    padding-left: 10px;
    height: 30px;
    line-height:30px;
    border-left: 5px solid #F68F33; 
}

.mainCurrentPermissionGroupSubmitInput{
    font-size: 20px;
    width:60px;
    height: 30px;
    background-color: #F68F33;
    font-family: Microsoft JhengHei;
}

.mainLogout{
    padding-top: 30px;
    width: 70%;
    margin: 0 auto;
}

/*layout*/
.page{
    font-family: Microsoft JhengHei;
    font-size: 20px;
    display: grid;
    grid-template-columns: 300px auto;
    grid-gap: 0px;
    min-height: calc(100% - 255.2px);
}

.menuSideBar{
    box-shadow: inset 0 7px 15px -7px rgba(33,33,33,0.7);
    grid-column-start: 1;
    grid-column-end: 2;
    background-color: #F68F33;
}
.menuItem{
    width: 100%;
    font-size: 22px;
    font-weight: bold;
    padding: 15px 0px 15px 30px;
    color: white;
}
.menuItem:hover{
    background-color: #FABD96;
    cursor: pointer;
}
.menuSideBarIcon{
    font-size: 30px;
}
.menuSideBarTitle{
    padding-left: 20px;
}
.menuItemChosen{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 22.5px 50px 22.5px 0;
    border-color: transparent #FABD96 transparent transparent;
    position: absolute;
    left: 251px;
}

.detailBody{
    box-shadow: inset 0 7px 15px -7px rgba(33,33,33,0.7);
    grid-column-start: 2;
    grid-column-end: 3;
    background-color: #FABD96; 
    padding-bottom: 50px;
}

.noRight{
    padding-top: 50px;
    width: 80%;
    margin: 0 auto;
    font-size: 22px; 
}
.noRightReturn{
    padding-top: 30px;
    width: 80%;
    margin: 0 auto;
    font-size: 22px; 
}
/*student*/
.studentSmallTitle{
    width: 90%;
    margin: 0 auto;
    margin-top: 50px;
    background-color: #F68F33;
    color: white;
    font-size: 27px;
    padding: 10px 0px 10px 30px;
    font-weight: bold; 
}
.studentFooter{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    border-top: 3px #F68F33 solid;
    padding-top: 5px;
}
.studentFooter input[type=submit]{
    width: 100px;
    font-size: 24px;
    background-color: #F68F33;
    color: white;
}

.studentUpper{
    width: 90%;
    margin: 0 auto;
    color:#57585A;
}

.studentPageIndex{
    width: 90%;
    margin: 0 auto;
    border-collapse: collapse;
    border-style: hidden;
    text-align: center;
}
.studentPageIndex td{
    background-color: #F68F33;
    border:3px solid #FABD96;
}
.studentPageIndex td.unClickable{
    background-color: lightgrey;
}
.studentPageIndex td.clickable:hover{
    background-color: lightgrey;
    cursor: pointer;
}
.studentPageIndex td.chosen{
    font-weight: bold;
    background-color: white;
}
/*search*/
.studentSearchAcademicYear,
.studentSearchSTRN{
    width: 90%;
    margin: 0 auto;
}
.studentSearchAcademicYear select,
.studentSearchSTRN input[type=text]{
    font-size: 20px;
    width: 150px;
    padding-left: 10px;
    height: 30px;
    line-height:30px;
    border-left: 5px solid #F15921;
}
.studentSearchAcademicYear input[type=submit],
.studentSearchSTRN input[type=submit]{
    font-size: 20px;
    width:60px;
    height: 30px;
    background-color: #F68F33;
}

.studentSearchSTRN input[type=text]{
    width: 300px;
}

/*personaldata*/
.studentPersonalDataUpper{
    width: 90%;
    margin: 0 auto;
    text-align: center;
    color:#57585A;
    font-weight: bold;
}
.studentPersonalDataUpper td{
    vertical-align: bottom;
}
.studentPhoto{
    height: 250px;
    width:200px;
    background-color: grey;
}

.studentPersonalDataDetail,
.studentPersonalDataPassSchool{
    width: 90%;
    margin: 0 auto;
    text-align: left;
    color:#57585A;
    font-weight: bold;
}
.studentPersonalDataDetail input,
.studentPersonalDataPassSchool input{
    font-size: 20px;
    width: 150px;
    padding-left: 10px;
    height: 30px;
    line-height:30px;
    border-left: 5px solid #F15921;
}

.studentPersonalDataDetail input.xlong,
.studentPersonalDataPassSchool input.xlong{
    width: 700px;
}

.studentPersonalDataDetail select{
    font-size: 20px;
    width: 164px;
    padding-left: 10px;
    height: 32px;
    line-height:32px;
    border-left: 5px solid #F15921;
}
.studentPersonalDataPassSchool input{
    width: 500px;
}
.studentPersonalDataPhoto{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    padding-top: 5px;
}
.studentPersonalDataPhoto input[type=button],
.studentPersonalDataPhoto input[type=submit]{
    width: 150px;
    font-size: 24px;
    background-color: #F68F33;
    color: white;
}
.studentPhotoUpload{
    width: 300px;
    font-size: 24px;
    background-color: #F68F33;
    color: white;
    padding-left: 20px;
}

.studentPhotoUpload label:hover{
    cursor: pointer;
}

/*address*/
.studentAddressContact,
.studentAddressAddress{
    width: 90%;
    margin: 0 auto;
    text-align: left;
    color:#57585A;
    font-weight: bold;
}

.studentAddressContact input,
.studentAddressAddress input{
    font-size: 20px;
    width: 200px;
    padding-left: 10px;
    height: 30px;
    line-height:30px;
    border-left: 5px solid #F15921;
}

.studentAddressEmailInput{
    width:600px !important;
}

/*school data*/
.studentSchoolData{
    width: 90%;
    margin: 0 auto;
    border-collapse: collapse;
    border-style: hidden;
}
.studentSchoolData td{
    background-color: white;
    border:3px solid #FABD96;
}

/*guardian*/
.studentGuardian,
.studentGuardianAddress,
.studentGuardianContact,
.studentGuardianWorkContact{
    width: 90%;
    margin: 0 auto;
    text-align: left;
    color:#57585A;
    font-weight: bold;
}
.studentGuardian input,
.studentGuardianAddress input,
.studentGuardianContact input,
.studentGuardianWorkContact input{
    font-size: 20px;
    width: 150px;
    padding-left: 10px;
    height: 30px;
    line-height:30px;
    border-left: 5px solid #F15921;
}
.studentGuardian select{
    font-size: 20px;
    width: 164px;
    padding-left: 10px;
    height: 32px;
    line-height:32px;
    border-left: 5px solid #F15921;
}
.studentGuardianAddress input[type=text]{
    width:200px;
}
.studentGuardianContact input[type=checkbox]{
    height: 16px;
    width: 16px;
}
.studentGuardianEmailInput,
.studentGuardianWorkAddressInput{
    width:600px !important;
}

.studentGuardianDelete{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    padding-top: 5px;
}
.studentGuardianDelete input[type=button],
.studentGuardianDelete input[type=submit]{
    width: 150px;
    font-size: 24px;
    background-color: #F68F33;
    color: white;
}

/*brother sister*/
.studentBrotherSister{
    width: 90%;
    margin: 0 auto;
    border-collapse: collapse;
    border-style: hidden;
}
.studentBrotherSister td{
    background-color: white;
    border:3px solid #FABD96;
}

.studentBrotherSister td.clickable{
    background-color: #F68F33;
    color: white;
}

.studentBrotherSister td.clickable:hover{
    background-color: lightgrey;
    cursor: pointer;
}

/*healthy*/
.studentJoinActivity,
.studentJoinFitness,
.studentDHData{
    width: 90%;
    margin: 0 auto;
    padding-top: 20px;
}
.studentHealthyClear{
    padding-left: 30px;
}
.studentHealthyClearInput{
    width: auto;
}
.studentHealthyClearInput:hover{
    color: lightgrey;
    cursor: pointer;
}

.studentSickness{
    width: 90%;
    margin: 0 auto;
    border-collapse: collapse;
    border-style: hidden;
}
.studentSickness td{
    background-color: white;
    border:3px solid #FABD96;
}
.studentSickness input{
    font-size: 20px;
    width: 700px;
    padding-left: 10px;
    height: 30px;
    line-height:30px;
    border-left: 5px solid #F15921;
}
.studentSickness input[type=checkbox]{
    height: 20px;
    width: 20px;
}
.studentSicknessDetail{
    padding-left: 20px; 
}
/*height weight*/
.studentHeightWeight{
    width: 90%;
    margin: 0 auto;
    border-collapse: collapse;
    border-style: hidden;
}
.studentHeightWeight td{
    background-color: white;
    border:3px solid #FABD96;
}
.studentHeightWeight input[type=text]{
    font-size: 20px;
    width:150px;
    padding-left: 10px;
    height: 30px;
    line-height:30px;
    border-left: 5px solid #F15921;
}
/*special education*/
.studentSpecialEducationType,
.studentSpecialEducationPolicy{
    width: 90%;
    margin: 0 auto;
    border-collapse: collapse;
    border-style: hidden;
}
.studentSpecialEducationType td,
.studentSpecialEducationPolicy td{
    background-color: white;
    border:3px solid #FABD96;
}
.studentSpecialEducationType input,
.studentSpecialEducationPolicy input,
.studentSpecialEducationRemark input{
    font-size: 20px;
    width: 700px;
    padding-left: 10px;
    height: 30px;
    line-height:30px;
    border-left: 5px solid #F15921;
}
.studentSpecialEducationType input[type=checkbox],
.studentSpecialEducationPolicy input[type=checkbox]{
    height: 20px;
    width: 20px;
}
.studentSpecialEducationTypeDetail,
.studentSpecialEducationPolicyDetail{
    padding-left: 20px; 
}
.studentSpecialEducationDate,
.studentSpecialEducationAgreement,
.studentSpecialEducationRemark{
    width: 90%;
    margin: 0 auto;
}
.studentSpecialEducationDate input,
.studentSpecialEducationAgreement input{
    font-size: 20px;
    width: 200px;
    padding-left: 10px;
    height: 30px;
    line-height:30px;
    border-left: 5px solid #F15921;
}

/*leave school*/
.studentLeavelSchoolTable{
    width: 90%;
    margin: 0 auto;
    border-collapse: collapse;
    border-style: hidden;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~attend~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.attendMenuSideBar{
    box-shadow: inset 0 7px 15px -7px rgba(33,33,33,0.7);
    grid-column-start: 1;
    grid-column-end: 2;
    background-color: #83DC8B;
}
.attendMenuItem{
    width: 100%;
    font-size: 22px;
    font-weight: bold;
    padding: 15px 0px 15px 30px;
    color: white;
}
.attendMenuItem:hover{
    background-color: #CFE4AE;
    cursor: pointer;
}
.attendMenuItemChosen{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 22.5px 50px 22.5px 0;
    border-color: transparent #CFE4AE transparent transparent;
    position: absolute;
    left: 251px;
}
.attendDetailBody{
    box-shadow: inset 0 7px 15px -7px rgba(33,33,33,0.7);
    grid-column-start: 2;
    grid-column-end: 3;
    background-color: #CFE4AE; 
    padding-bottom: 50px;
    color: #57585A;
}
.attendSmallTitle{
    width: 90%;
    margin: 0 auto;
    margin-top: 50px;
    background-color: #83DC8B;
    color: white;
    font-size: 27px;
    padding: 10px 0px 10px 30px;
    font-weight: bold; 
}
.attendFooter{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    border-top: 3px #83DC8B solid;
    padding-top: 5px;
}
.attendFooter input[type=submit],
.attendFooter input[type=button]{
    width: 100px;
    font-size: 24px;
    background-color: #83DC8B;
    color: white;
}
.attendButton{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    padding-top: 5px;
}
.attendButton input[type=button],
.attendButton input[type=submit]{
    width: 150px;
    font-size: 24px;
    background-color: #83DC8B;
    color: white;
}
.attendButton input[type=button].long{
    width: 200px;
}
.attendEmptyBackground{
    background-color: #CFE4AE !important;
}
.attendTableTilteBackground{
    background-color: #83DC8B !important;
    color: white !important;
}
.attendPageIndex{
    width: 90%;
    margin: 0 auto;
    border-collapse: collapse;
    border-style: hidden;
    text-align: center;
}
.attendPageIndex td{
    background-color: #83DC8B;
    border:3px solid #CFE4AE;
}
.attendPageIndex td.unClickable{
    background-color: lightgrey;
}
.attendPageIndex td.clickable{
    color: white;
}
.attendPageIndex td.clickable:hover{
    background-color: lightgrey;
    cursor: pointer;
}
.attendPageIndex td.chosen{
    font-weight: bold;
    background-color: white;
    color: black;
}
.attendConfirm{
    background: #83DC8B !important;
    color: white;
}
.attendConfirm:hover{
    background: lightgrey !important;
    cursor: pointer;
}
.attendInsertDataNOTable td.Y,
.attendTable td.Y{
    background-color: #66FFB2 !important;
}
.attendInsertDataNOTable td.N,
.attendTable td.N{
    background-color: #FF6969 !important;
}
.attendTable{
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border-style: hidden;
}
.attendReasonTable{
    width: 500px;
    border-collapse: collapse;
    border-style: hidden;
}
.attendInsertDataNOTable{
    width: 500px;
    border-collapse: collapse;
    border-style: hidden;
}
.attendTable td,
.attendReasonTable td,
.attendInsertDataNOTable td{
    word-wrap: break-word;       
    overflow-wrap: break-word;     
    background-color: white;
    border:3px solid #CFE4AE;
}
.attendTable select,
.attendReasonTable select,
.attendButton select{
    font-size: 20px;
    width: 164px;
    padding-left: 10px;
    height: 32px;
    line-height:32px;
    border-left: 5px solid #83DC8B;
}
.attendTable .lightgrey{
    background-color: lightgrey;
}
.attendButton input[type=date],
.attendButton input[type=number]{
    border-style:none;
}
.attendTable input[type=text],
.attendReasonTable input[type=text],
.attendButton input[type=text],
.attendButton input[type=date],
.attendButton input[type=number]{
    font-size: 20px;
    width:400px;
    padding-left: 10px;
    height: 30px;
    line-height:30px;
    border-left: 5px solid #83DC8B;
}
.attendButton input[type=number]::-webkit-inner-spin-button, 
.attendButton input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
.attendButton input[type=text].short,
.attendButton select.short,
.attendButton input[type=date].short{
    width:200px !important;
}
.attendButton input[type=text].long,
.attendButton select.long{
    width:600px !important;
}
.attendButton select.xshort{
    width: 65px !important;
}
.attendButton select.xvshort{
    width: 90px !important;
}
.attendButton select.sshort{
    width: 175px !important;
}
.attendModelBackground{
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width:100%;
    height: 100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.attendModelBox{
    background-color: #CFE4AE;
    margin: 10% auto 10% auto;
    border: 1px solid #CCC;
    width: 60%;
    padding-bottom: 20px;
    border-radius: 20px;
}
.attendModelTitle{
    padding-top: 30px;
    padding-left: 20px;
    font-size: 52px;
    border-bottom: dotted 1px white;
}
.attendModelDescription{
    padding-top: 30px;
    padding-left: 20px;
    font-size: 40px;
}
.attendModelConfirmButton{
    padding-top: 25px;
    width: 80%;
    margin: 0 auto;
}
.attendModelConfirmButton input[type=submit]{
    width:100%;
    border:0px;
    height: 40px;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
    background-color: #83DC8B;
}

.attendModelConfirmButton input[type=submit]:hover{
    background-color: lightgrey;
    cursor: pointer;
}
.attendButton .editButton:hover{
    background-color: lightgrey;
    cursor: pointer;
}
.attendButton .editGreen{
    background-color: #83DC8B;
    color:white;
}
.attendButton .editRed{
    background-color: red;
    color:white;
}
/* attend */
.attendClassCodeList{
    width: 100%;
    border-collapse: collapse;
    border-style: hidden;
}
.attendClassCodeList td{
    background-color: white;
    border:3px solid #CFE4AE;
}

.attendFileButton{
    width: 300px;
    font-size: 24px;
    background-color: #83DC8B;
    color: white;
    padding-left: 20px;
}
.attendFileButton label:hover{
    cursor: pointer;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~grading~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.gradingMenuSideBar{
    box-shadow: inset 0 7px 15px -7px rgba(33,33,33,0.7);
    grid-column-start: 1;
    grid-column-end: 2;
    background-color: #94672f;
}
.gradingMenuItem{
    width: 100%;
    font-size: 22px;
    font-weight: bold;
    padding: 15px 0px 15px 30px;
    color: white;
}
.gradingMenuItem:hover{
    background-color: #ba976c;
    cursor: pointer;
}
.gradingMenuItemChosen{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 22.5px 50px 22.5px 0;
    border-color: transparent #ba976c transparent transparent;
    position: absolute;
    left: 251px;
}
.gradingDetailBody{
    box-shadow: inset 0 7px 15px -7px rgba(33,33,33,0.7);
    grid-column-start: 2;
    grid-column-end: 3;
    background-color: #ba976c; 
    padding-bottom: 50px;
    color: #57585A;
}
.gradingSmallTitle{
    width: 90%;
    margin: 0 auto;
    margin-top: 50px;
    background-color: #94672f;
    color: white;
    font-size: 27px;
    padding: 10px 0px 10px 30px;
    font-weight: bold; 
}
.gradingFooter{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    border-top: 3px #94672f solid;
    padding-top: 5px;
}
.gradingFooter input[type=submit],
.gradingFooter input[type=button]{
    width: 100px;
    font-size: 24px;
    background-color: #94672f;
    color: white;
}
.gradingButton{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    padding-top: 5px;
}
.gradingButton input[type=button],
.gradingButton input[type=submit]{
    width: 150px;
    font-size: 24px;
    background-color: #94672f;
    color: white;
}
.gradingButton input[type=button].long{
    width: 200px;
}
.gradingPageIndex{
    width: 90%;
    margin: 0 auto;
    border-collapse: collapse;
    border-style: hidden;
    text-align: center;
}
.gradingPageIndex td{
    background-color: #94672f;
    border:3px solid #ba976c;
}
.gradingPageIndex td.unClickable{
    background-color: lightgrey;
}
.gradingPageIndex td.clickable{
    color: white;
}
.gradingPageIndex td.clickable:hover{
    background-color: lightgrey;
    cursor: pointer;
}
.gradingPageIndex td.chosen{
    font-weight: bold;
    background-color: white;
    color: black;
}
.gradingEmptyBackground{
    background-color: #ba976c !important;
}
.gradingTableTilteBackground{
    background-color: #94672f !important;
    color: white !important;
}
.gradingTable{
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border-style: hidden;
}
.gradingReasonTable{
    width: 500px;
    border-collapse: collapse;
    border-style: hidden;
}
.gradingInsertDataNOTable{
    width: 500px;
    border-collapse: collapse;
    border-style: hidden;
}
.gradingTable td,
.gradingReasonTable td{
    word-wrap: break-word;       
    overflow-wrap: break-word;     
    background-color: white;
    border:3px solid #ba976c;
}
.gradingTable select,
.gradingReasonTable select,
.gradingButton select{
    font-size: 20px;
    width: 164px;
    padding-left: 10px;
    height: 32px;
    line-height:32px;
    border-left: 5px solid #94672f;
}
.gradingButton input[type=date],
.gradingButton input[type=number]{
    border-style:none;
}
.gradingTable input[type=text],
.gradingReasonTable input[type=text],
.gradingButton input[type=text],
.gradingButton input[type=date],
.gradingButton input[type=number]{
    font-size: 20px;
    width:400px;
    padding-left: 10px;
    height: 30px;
    line-height:30px;
    border-left: 5px solid #94672f;
}
.gradingButton input[type=number]::-webkit-inner-spin-button, 
.gradingButton input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
.gradingButton input[type=text].short,
.gradingButton select.short,
.gradingButton input[type=date].short,
.gradingButton input[type=number].short{
    width:200px !important;
}
.gradingButton input[type=text].long,
.gradingButton select.long{
    width:600px !important;
}
.gradingButton select.xshort,
.gradingButton input[type=text].xshort,
.gradingButton input[type=number].xshort{
    width: 65px !important;
}
.gradingButton select.xxhort,
.gradingButton input[type=number].xxshort,
.gradingButton input[type=text].xxshort{
    width: 30px !important;
}
.gradingButton select.xxxhort,
.gradingButton input[type=number].xxxshort,
.gradingButton input[type=text].xxxshort{
    width: 25px !important;
}
.gradingButton select.xvshort,
.gradingButton input[type=number].xvshort,
.gradingButton input[type=text].xvshort{
    width: 90px !important;
}
.gradingButton select.sshort{
    width: 175px !important;
}
.gradingModelBackground{
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width:100%;
    height: 100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.gradingModelBox{
    background-color: #CFE4AE;
    margin: 10% auto 10% auto;
    border: 1px solid #CCC;
    width: 60%;
    padding-bottom: 20px;
    border-radius: 20px;
}
.gradingModelTitle{
    padding-top: 30px;
    padding-left: 20px;
    font-size: 52px;
    border-bottom: dotted 1px white;
}
.gradingModelDescription{
    padding-top: 30px;
    padding-left: 20px;
    font-size: 40px;
}
.gradingModelConfirmButton{
    padding-top: 25px;
    width: 80%;
    margin: 0 auto;
}
.gradingModelConfirmButton input[type=submit]{
    width:100%;
    border:0px;
    height: 40px;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
    background-color: #94672f;
}

.gradingModelConfirmButton input[type=submit]:hover{
    background-color: lightgrey;
    cursor: pointer;
}
.gradingButton .editButton:hover{
    background-color: lightgrey;
    cursor: pointer;
}
.gradingButton .editGreen{
    background-color: #94672f;
    color:white;
}
.gradingButton .editRed{
    background-color: red;
    color:white;
}
.gradingConfirm{
    background-color: #94672f !important;
    color:white;
}
.gradingConfirm:hover{
    background-color: lightgrey !important;
    cursor: pointer;
}

.gradingFileButton{
    width: 300px;
    font-size: 24px;
    background-color: #94672f;
    color: white;
    padding-left: 20px;
}
.gradingFileButton label:hover{
    cursor: pointer;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~activity~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.activityMenuSideBar{
    box-shadow: inset 0 7px 15px -7px rgba(33,33,33,0.7);
    grid-column-start: 1;
    grid-column-end: 2;
    background-color: #ED2541;
}
.activityMenuItem{
    width: 100%;
    font-size: 22px;
    font-weight: bold;
    padding: 15px 0px 15px 30px;
    color: white;
}
.activityMenuItem:hover{
    background-color: #F5A8B2;
    cursor: pointer;
}
.activityMenuItemChosen{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 22.5px 50px 22.5px 0;
    border-color: transparent #F5A8B2 transparent transparent;
    position: absolute;
    left: 251px;
}
.activityDetailBody{
    box-shadow: inset 0 7px 15px -7px rgba(33,33,33,0.7);
    grid-column-start: 2;
    grid-column-end: 3;
    background-color: #F5A8B2; 
    padding-bottom: 50px;
    color: #57585A;
}
.activitySmallTitle{
    width: 90%;
    margin: 0 auto;
    margin-top: 50px;
    background-color: #ED2541;
    color: white;
    font-size: 27px;
    padding: 10px 0px 10px 30px;
    font-weight: bold; 
}
.activityPageIndex{
    width: 90%;
    margin: 0 auto;
    border-collapse: collapse;
    border-style: hidden;
    text-align: center;
}
.activityPageIndex td{
    background-color: #ED2541;
    border:3px solid #F5A8B2;
}
.activityPageIndex td.unClickable{
    background-color: lightgrey;
}
.activityPageIndex td.clickable{
    color: white;
}
.activityPageIndex td.clickable:hover{
    background-color: lightgrey;
    cursor: pointer;
}
.activityPageIndex td.chosen{
    font-weight: bold;
    background-color: white;
    color: black;
}
.activityFooter{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    border-top: 3px #ED2541 solid;
    padding-top: 5px;
}
.activityFooter input[type=submit],
.activityFooter input[type=button]{
    width: 100px;
    font-size: 24px;
    background-color: #ED2541;
    color: white;
}
.activityButton{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    padding-top: 5px;
}
.activityButton input[type=button],
.activityButton input[type=submit]{
    width: 150px;
    font-size: 24px;
    background-color: #ED2541;
    color: white;
}
.activityButton input[type=button].long{
    width: 200px;
}
.activityEmptyBackground{
    background-color: #F5A8B2 !important;
}
.activityTableTilteBackground{
    background-color: #ED2541 !important;
    color: white !important;
}
.activityTable{
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border-style: hidden;
}
.activityReasonTable{
    width: 500px;
    border-collapse: collapse;
    border-style: hidden;
}
.activityTable td,
.activityReasonTable td{
    word-wrap: break-word;       
    overflow-wrap: break-word;     
    background-color: white;
    border:3px solid #F5A8B2;
}
.activityTable select,
.activityReasonTable select,
.activityButton select{
    font-size: 20px;
    width: 164px;
    padding-left: 10px;
    height: 32px;
    line-height:32px;
    border-left: 5px solid #ED2541;
}
.activityButton input[type=date]{
    border-style:none;
}
.activityTable input[type=text],
.activityReasonTable input[type=text],
.activityButton input[type=text],
.activityButton input[type=date]{
    font-size: 20px;
    width:400px;
    padding-left: 10px;
    height: 30px;
    line-height:30px;
    border-left: 5px solid #ED2541;
}
.activityInsertDataNOTable{
    width:500px;
}
.activityInsertDataNOTable td.Y,
.activityTable td.Y{
    background-color: #66FFB2 !important;
}
.activityInsertDataNOTable td.N,
.activityTable td.N{
    background-color: #FF6969 !important;
}
.activityConfirm{
    background: #ED2541 !important;
    color: white;
}
.activityConfirm:hover{
    background: lightgrey !important;
    cursor: pointer;
}

.activityFileButton{
    width: 300px;
    font-size: 24px;
    background-color: #ED2541;
    color: white;
    padding-left: 20px;
}
.activityFileButton label:hover{
    cursor: pointer;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~service~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.serviceMenuSideBar{
    box-shadow: inset 0 7px 15px -7px rgba(33,33,33,0.7);
    grid-column-start: 1;
    grid-column-end: 2;
    background-color: #FF0080;
}
.serviceMenuItem{
    width: 100%;
    font-size: 22px;
    font-weight: bold;
    padding: 15px 0px 15px 30px;
    color: white;
}
.serviceMenuItem:hover{
    background-color: #FF95CA;
    cursor: pointer;
}
.serviceMenuItemChosen{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 22.5px 50px 22.5px 0;
    border-color: transparent #FF95CA transparent transparent;
    position: absolute;
    left: 251px;
}
.serviceDetailBody{
    box-shadow: inset 0 7px 15px -7px rgba(33,33,33,0.7);
    grid-column-start: 2;
    grid-column-end: 3;
    background-color: #FF95CA; 
    padding-bottom: 50px;
    color: #57585A;
}
.serviceSmallTitle{
    width: 90%;
    margin: 0 auto;
    margin-top: 50px;
    background-color: #FF0080;
    color: white;
    font-size: 27px;
    padding: 10px 0px 10px 30px;
    font-weight: bold; 
}
.serviceFooter{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    border-top: 3px #FF0080 solid;
    padding-top: 5px;
}
.serviceFooter input[type=submit],
.serviceFooter input[type=button]{
    width: 100px;
    font-size: 24px;
    background-color: #FF0080;
    color: white;
}
.serviceButton{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    padding-top: 5px;
}
.serviceButton input[type=button],
.serviceButton input[type=submit]{
    width: 150px;
    font-size: 24px;
    background-color: #FF0080;
    color: white;
}
.serviceButton input[type=button].long{
    width: 200px;
}
.serviceEmptyBackground{
    background-color: #FF95CA !important;
}
.serviceTableTilteBackground{
    background-color: #FF0080 !important;
    color: white !important;
}
.servicePageIndex{
    width: 90%;
    margin: 0 auto;
    border-collapse: collapse;
    border-style: hidden;
    text-align: center;
}
.servicePageIndex td{
    background-color: #FF0080;
    border:3px solid #FF95CA;
}
.servicePageIndex td.unClickable{
    background-color: lightgrey;
}
.servicePageIndex td.clickable{
    color: white;
}
.servicePageIndex td.clickable:hover{
    background-color: lightgrey;
    cursor: pointer;
}
.servicePageIndex td.chosen{
    font-weight: bold;
    background-color: white;
    color: black;
}
.serviceConfirm{
    background: #FF0080 !important;
    color: white;
}
.serviceConfirm:hover{
    background: lightgrey !important;
    cursor: pointer;
}
.serviceInsertDataNOTable td.Y,
.serviceTable td.Y{
    background-color: #66FFB2 !important;
}
.serviceInsertDataNOTable td.N,
.serviceTable td.N{
    background-color: #FF6969 !important;
}
.serviceTable{
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border-style: hidden;
}
.serviceReasonTable{
    width: 500px;
    border-collapse: collapse;
    border-style: hidden;
}
.serviceInsertDataNOTable{
    width: 500px;
    border-collapse: collapse;
    border-style: hidden;
}
.serviceTable td,
.serviceReasonTable td,
.serviceInsertDataNOTable td{
    word-wrap: break-word;       
    overflow-wrap: break-word;     
    background-color: white;
    border:3px solid #FF95CA;
}
.serviceTable select,
.serviceReasonTable select,
.serviceButton select{
    font-size: 20px;
    width: 164px;
    padding-left: 10px;
    height: 32px;
    line-height:32px;
    border-left: 5px solid #FF0080;
}
.serviceTable .lightgrey{
    background-color: lightgrey;
}
.serviceButton input[type=date],
.serviceButton input[type=number]{
    border-style:none;
}
.serviceTable input[type=text],
.serviceReasonTable input[type=text],
.serviceButton input[type=text],
.serviceButton input[type=date],
.serviceButton input[type=number]{
    font-size: 20px;
    width:400px;
    padding-left: 10px;
    height: 30px;
    line-height:30px;
    border-left: 5px solid #FF0080;
}
.serviceButton input[type=number]::-webkit-inner-spin-button, 
.serviceButton input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
.serviceButton input[type=text].short,
.serviceButton select.short,
.serviceButton input[type=date].short{
    width:200px !important;
}
.serviceButton input[type=text].long,
.serviceButton select.long{
    width:600px !important;
}
.serviceButton select.xshort{
    width: 65px !important;
}
.serviceButton select.xvshort{
    width: 90px !important;
}
.serviceButton select.sshort{
    width: 175px !important;
}
.serviceModelBackground{
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width:100%;
    height: 100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.serviceModelBox{
    background-color: #FF95CA;
    margin: 10% auto 10% auto;
    border: 1px solid #CCC;
    width: 60%;
    padding-bottom: 20px;
    border-radius: 20px;
}
.serviceModelTitle{
    padding-top: 30px;
    padding-left: 20px;
    font-size: 52px;
    border-bottom: dotted 1px white;
}
.serviceModelDescription{
    padding-top: 30px;
    padding-left: 20px;
    font-size: 40px;
}
.serviceModelConfirmButton{
    padding-top: 25px;
    width: 80%;
    margin: 0 auto;
}
.serviceModelConfirmButton input[type=submit]{
    width:100%;
    border:0px;
    height: 40px;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
    background-color: #FF0080;
}

.serviceModelConfirmButton input[type=submit]:hover{
    background-color: lightgrey;
    cursor: pointer;
}
.serviceButton .editButton:hover{
    background-color: lightgrey;
    cursor: pointer;
}
.serviceButton .editGreen{
    background-color: #FF0080;
    color:white;
}
.serviceButton .editRed{
    background-color: red;
    color:white;
}
/* service */
.serviceClassCodeList{
    width: 100%;
    border-collapse: collapse;
    border-style: hidden;
}
.serviceClassCodeList td{
    background-color: white;
    border:3px solid #FF95CA;
}

.serviceFileButton{
    width: 300px;
    font-size: 24px;
    background-color: #FF0080;
    color: white;
    padding-left: 20px;
}
.serviceFileButton label:hover{
    cursor: pointer;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~user Detail~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.userDetailMenuSideBar{
    box-shadow: inset 0 7px 15px -7px rgba(33,33,33,0.7);
    grid-column-start: 1;
    grid-column-end: 2;
    background-color: #17B899;
}
.userDetailMenuItem{
    width: 100%;
    font-size: 22px;
    font-weight: bold;
    padding: 15px 0px 15px 30px;
    color: white;
}
.userDetailMenuItem:hover{
    background-color: #94F3DF;
    cursor: pointer;
}
.userDetailMenuItemChosen{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 22.5px 50px 22.5px 0;
    border-color: transparent #94F3DF transparent transparent;
    position: absolute;
    left: 251px;
}
.userDetailDetailBody{
    box-shadow: inset 0 7px 15px -7px rgba(33,33,33,0.7);
    grid-column-start: 2;
    grid-column-end: 3;
    background-color: #94F3DF; 
    padding-bottom: 50px;
}
.userDetailSmallTitle{
    width: 90%;
    margin: 0 auto;
    margin-top: 50px;
    background-color: #17B899;
    color: white;
    font-size: 27px;
    padding: 10px 0px 10px 30px;
    font-weight: bold; 
}
.userDetailFooter{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    border-top: 3px #17B899 solid;
    padding-top: 5px;
}
.userDetailFooter input[type=submit]{
    width: 100px;
    font-size: 24px;
    background-color: #17B899;
    color: white;
}
.userDetailButton{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    padding-top: 5px;
}
.userDetailButton input[type=button],
.userDetailButton input[type=submit]{
    width: 150px;
    font-size: 24px;
    background-color: #17B899;
    color: white;
}
.userDetailButton input[type=button].long{
    width: 200px;
}
.userDetailButton select{
    font-size: 20px;
    width: 180px;
    padding-left: 10px;
    height: 32px;
    line-height:32px;
    border-left: 5px solid #17B899;
}
.userDetailButton input[type=password]{
    border-right: 0;
    border-bottom: 0;
    border-top: 0;
}
.userDetailButton input[type=text],
.userDetailButton input[type=password]{
    font-size: 20px;
    width: 165px;
    padding-left: 10px;
    height: 32px;
    line-height:32px;
    border-left: 5px solid #17B899;
}
.userDetailButton input[type=text].long{
    width: 400px;
}
.userDetailTable{
    width: 100%;
    border-collapse: collapse;
    border-style: hidden;
}
.userDetailTable td{
    background-color: white;
    border:3px solid #94F3DF;
}
.userDetailTableBackground{
    background-color: #17B899 !important;
}
.userDetailTableEmptyBackground{
    background-color: #94F3DF !important;
}
.userDetailTableButton{
    background-color: #17B899 !important;
    color: white;
}
.userDetailTableButton:hover{
    background-color: lightgrey !important;
    cursor: pointer;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~rewardPunish~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.rewardPunishMenuSideBar{
    box-shadow: inset 0 7px 15px -7px rgba(33,33,33,0.7);
    grid-column-start: 1;
    grid-column-end: 2;
    background-color: #611c87;
}
.rewardPunishMenuItem{
    width: 100%;
    font-size: 22px;
    font-weight: bold;
    padding: 15px 0px 15px 30px;
    color: white;
}
.rewardPunishMenuItem:hover{
    background-color: #dab2f1;
    cursor: pointer;
}
.rewardPunishMenuItemChosen{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 22.5px 50px 22.5px 0;
    border-color: transparent #dab2f1 transparent transparent;
    position: absolute;
    left: 251px;
}
.rewardPunishDetailBody{
    box-shadow: inset 0 7px 15px -7px rgba(33,33,33,0.7);
    grid-column-start: 2;
    grid-column-end: 3;
    background-color: #dab2f1; 
    padding-bottom: 50px;
}
.rewardPunishSmallTitle{
    width: 90%;
    margin: 0 auto;
    margin-top: 50px;
    background-color: #611c87;
    color: white;
    font-size: 27px;
    padding: 10px 0px 10px 30px;
    font-weight: bold; 
}
.rewardPunishFooter{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    border-top: 3px #611c87 solid;
    padding-top: 5px;
}
.rewardPunishFooter input[type=submit]{
    width: 100px;
    font-size: 24px;
    background-color: #611c87;
    color: white;
}
.rewardPunishButton{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    padding-top: 5px;
}
.rewardPunishButton input[type=button],
.rewardPunishButton input[type=submit]{
    width: 150px;
    font-size: 24px;
    background-color: #611c87;
    color: white;
}
.rewardPunishButton input[type=button].long{
    width: 200px;
}
.rewardPunishButton select{
    font-size: 20px;
    width: 180px;
    padding-left: 10px;
    height: 32px;
    line-height:32px;
    border-left: 5px solid #611c87;
}
.rewardPunishButton input[type=password]{
    border-right: 0;
    border-bottom: 0;
    border-top: 0;
}
.rewardPunishButton input[type=text],
.rewardPunishButton input[type=password]{
    font-size: 20px;
    width: 165px;
    padding-left: 10px;
    height: 32px;
    line-height:32px;
    border-left: 5px solid #611c87;
}
.rewardPunishButton input[type=text].long{
    width: 400px;
}
.rewardPunishButton input[type=text].xxxlong{
    width: 100%;
}
.rewardPunishTable{
    width: 100%;
    border-collapse: collapse;
    border-style: hidden;
}
.rewardPunishTable td{
    background-color: white;
    border:3px solid #dab2f1;
}
.rewardPunishTable td.true{
    background-color: #66FFB2 !important;
}
.rewardPunishTable td.false{
    background-color: #FF6969 !important;
}
.rewardPunishTable td.Y{
    background-color: #66FFB2 !important;
}
.rewardPunishTable td.N{
    background-color: #FF6969 !important;
}
.rewardPunishTable option.true{
    background-color: #66FFB2 !important;
}
.rewardPunishTable option.false{
    background-color: #FF6969 !important;
}
.rewardPunishTable td.seperate0{
    background-color: #00FFFF !important;
}
.rewardPunishTable td.seperate1{
    background-color: white !important;
}
.rewardPunishTableBackground{
    background-color: #611c87 !important;
}
.rewardPunishTableEmptyBackground{
    background-color: #dab2f1 !important;
}
.rewardPunishTableTilteBackground,
.rewardPunishTableTitleBackground{
    background-color: #611c87 !important;
    color: white !important;
}
.rewardPunishTableButton{
    background-color: #611c87 !important;
    color: white;
}
.rewardPunishTableButton:hover{
    background-color: lightgrey !important;
    cursor: pointer;
}
.rewardPunishFileButton{
    width: 300px;
    font-size: 24px;
    background-color: #611c87;
    color: white;
    padding-left: 20px;
}
.rewardPunishFileButton label:hover{
    cursor: pointer;
}
.rewardPunishInsertDataNOTable{
    width: 400px;
    border-collapse: collapse;
    border-style: hidden;
    background-color: white !important;
}
.rewardPunishInsertDataTable{
    width: 600px;
    border-collapse: collapse;
    border-style: hidden;
    background-color: white !important;
}
.rewardPunishPageIndex{
    width: 90%;
    margin: 0 auto;
    border-collapse: collapse;
    border-style: hidden;
    text-align: center;
}
.rewardPunishPageIndex td{
    background-color: #611c87;
    border:3px solid #dab2f1;
}
.rewardPunishPageIndex td.unClickable{
    background-color: lightgrey;
}
.rewardPunishPageIndex td.clickable{
    color: white;
}
.rewardPunishPageIndex td.clickable:hover{
    background-color: lightgrey;
    cursor: pointer;
}
.rewardPunishPageIndex td.chosen{
    font-weight: bold;
    background-color: white;
    color: black;
}
.rewardPunishConfirm{
    background: #611c87 !important;
    color: white;
}
.rewardPunishConfirm:hover{
    background: lightgrey !important;
    cursor: pointer;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~report~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.reportMenuSideBar{
    box-shadow: inset 0 7px 15px -7px rgba(33,33,33,0.7);
    grid-column-start: 1;
    grid-column-end: 2;
    background-color: #7860B4;
}
.reportMenuItem{
    width: 100%;
    font-size: 22px;
    font-weight: bold;
    padding: 15px 0px 15px 30px;
    color: white;
}
.reportMenuItem:hover{
    background-color: #E3DFF1;
    cursor: pointer;
}
.reportMenuItemChosen{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 22.5px 50px 22.5px 0;
    border-color: transparent #E3DFF1 transparent transparent;
    position: absolute;
    left: 251px;
}
.reportDetailBody{
    box-shadow: inset 0 7px 15px -7px rgba(33,33,33,0.7);
    grid-column-start: 2;
    grid-column-end: 3;
    background-color: #E3DFF1; 
    padding-bottom: 50px;
}
.reportSmallTitle{
    width: 90%;
    margin: 0 auto;
    margin-top: 50px;
    background-color: #7860B4;
    color: white;
    font-size: 27px;
    padding: 10px 0px 10px 30px;
    font-weight: bold; 
}
.reportFooter{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    border-top: 3px #7860B4 solid;
    padding-top: 5px;
}
.reportFooter input[type=submit]{
    width: 100px;
    font-size: 24px;
    background-color: #7860B4;
    color: white;
}
.reportButton{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    padding-top: 5px;
}
.reportButton input[type=button],
.reportButton input[type=submit]{
    width: 150px;
    font-size: 24px;
    background-color: #7860B4;
    color: white;
}
.reportButton input[type=button].long{
    width: 200px;
}
.reportButton select{
    font-size: 20px;
    width: 180px;
    padding-left: 10px;
    height: 32px;
    line-height:32px;
    border-left: 5px solid #7860B4;
}
.reportButton input[type=text]{
    font-size: 20px;
    width: 165px;
    padding-left: 10px;
    height: 32px;
    line-height:32px;
    border-left: 5px solid #7860B4;
}
.reportButton input[type=text].long{
    width: 400px;
}
.reportTable{
    width: 100%;
    border-collapse: collapse;
    border-style: hidden;
}
.reportTable td{
    background-color: white;
    border:3px solid #E3DFF1;
}
.reportTableBackground{
    background-color: #7860B4 !important;
    color: white !important;
}
.reportNotFullTable{
    word-wrap: break-word;       
    overflow-wrap: break-word; 
    border-collapse: collapse;
    border-style: hidden;
}
.reportNotFullTable td{
    background-color: white;
    border:3px solid #E3DFF1;
}
.reportTableEmptyBackground{
    background-color: #E3DFF1 !important;
}
.reportTableButton{
    background-color: #7860B4 !important;
    color: white;
}
.reportTableButton:hover{
    background-color: lightgrey !important;
    cursor: pointer;
}
.healtyReportTable td{
    word-wrap: break-word;       
    overflow-wrap: break-word; 
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~uploadData~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.uploadDataMenuSideBar{
    box-shadow: inset 0 7px 15px -7px rgba(33,33,33,0.7);
    grid-column-start: 1;
    grid-column-end: 2;
    background-color: #FFC000;
}
.uploadDataMenuItem{
    width: 100%;
    font-size: 22px;
    font-weight: bold;
    padding: 15px 0px 15px 30px;
    color: white;
}
.uploadDataMenuItem:hover{
    background-color: #FFF2CC;
    cursor: pointer;
}
.uploadDataMenuItemChosen{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 22.5px 50px 22.5px 0;
    border-color: transparent #FFF2CC transparent transparent;
    position: absolute;
    left: 251px;
}
.uploadDataDetailBody{
    box-shadow: inset 0 7px 15px -7px rgba(33,33,33,0.7);
    grid-column-start: 2;
    grid-column-end: 3;
    background-color: #FFF2CC; 
    padding-bottom: 50px;
    color: #57585A;
}
.uploadDataSmallTitle{
    width: 90%;
    margin: 0 auto;
    margin-top: 50px;
    background-color: #FFC000;
    color: white;
    font-size: 27px;
    padding: 10px 0px 10px 30px;
    font-weight: bold; 
}
.uploadDataFooter{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    border-top: 3px #FFC000 solid;
    padding-top: 5px;
}
.uploadDataFooter input[type=submit]{
    width: 100px;
    font-size: 24px;
    background-color: #FFC000;
    color: white;
}
.uploadDataButton{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    padding-top: 5px;
}
.uploadDataTable{
    width: 100%;
    border-collapse: collapse;
    border-style: hidden;
}
.uploadDataTable td{
    background-color: white;
    border:3px solid #FFF2CC;
}
.uploadDataEmptyBackground{
    background-color: #FFF2CC !important;
}
.uploadDataTableTilteBackground{
    background-color: #FFC000 !important;
    color: white !important;
}
.uploadDataButton input[type=button],
.uploadDataButton input[type=submit]{
    width: 150px;
    font-size: 24px;
    background-color: #FFC000;
    color: white;
}
.uploadDataButton input[type=button].long{
    width: 200px;
}
.uploadDataFileButton{
    width: 300px;
    font-size: 24px;
    background-color: #FFC000;
    color: white;
    padding-left: 20px;
}
.uploadDataFileButton label:hover{
    cursor: pointer;
}
.uploadDataButton select{
    font-size: 20px;
    width: 164px;
    padding-left: 10px;
    height: 32px;
    line-height:32px;
    border-left: 5px solid #FFC000;
}

/*student*/
.uploadDataStudentClassData{
    width: 400px;
    border-collapse: collapse;
    border-style: hidden;
}
.uploadDataStudentNameData{
    width: 100%;
    border-collapse: collapse;
    border-style: hidden;
}
.uploadDataStudentClassData td,
.uploadDataStudentNameData td{
    background-color: white;
    border:3px solid #FFF2CC;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~download Data~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.downloadDataMenuSideBar{
    box-shadow: inset 0 7px 15px -7px rgba(33,33,33,0.7);
    grid-column-start: 1;
    grid-column-end: 2;
    background-color: #800040;
}
.downloadDataMenuItem{
    width: 100%;
    font-size: 22px;
    font-weight: bold;
    padding: 15px 0px 15px 30px;
    color: white;
}
.downloadDataMenuItem:hover{
    background-color: #fab9d9;
    cursor: pointer;
}
.downloadDataMenuItemChosen{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 22.5px 50px 22.5px 0;
    border-color: transparent #fab9d9 transparent transparent;
    position: absolute;
    left: 251px;
}
.downloadDataDetailBody{
    box-shadow: inset 0 7px 15px -7px rgba(33,33,33,0.7);
    grid-column-start: 2;
    grid-column-end: 3;
    background-color: #fab9d9; 
    padding-bottom: 50px;
}
.downloadDataSmallTitle{
    width: 90%;
    margin: 0 auto;
    margin-top: 50px;
    background-color: #800040;
    color: white;
    font-size: 27px;
    padding: 10px 0px 10px 30px;
    font-weight: bold; 
}
.downloadDataFooter{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    border-top: 3px #800040 solid;
    padding-top: 5px;
}
.downloadDataFooter input[type=submit]{
    width: 100px;
    font-size: 24px;
    background-color: #800040;
    color: white;
}
.downloadDataButton{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    padding-top: 5px;
}
.downloadDataButton input[type=button],
.downloadDataButton input[type=submit]{
    width: 150px;
    font-size: 24px;
    background-color: #800040;
    color: white;
}
.downloadDataButton input[type=button].long{
    width: 200px;
}
.downloadDataButton select{
    font-size: 20px;
    width: 180px;
    padding-left: 10px;
    height: 32px;
    line-height:32px;
    border-left: 5px solid #800040;
}
.downloadDataButton input[type=password]{
    border-right: 0;
    border-bottom: 0;
    border-top: 0;
}
.downloadDataButton input[type=text],
.downloadDataButton input[type=password]{
    font-size: 20px;
    width: 165px;
    padding-left: 10px;
    height: 32px;
    line-height:32px;
    border-left: 5px solid #800040;
}
.downloadDataButton input[type=text].long{
    width: 400px;
}
.downloadDataTable{
    width: 100%;
    border-collapse: collapse;
    border-style: hidden;
}
.downloadDataTable td{
    background-color: white;
    border:3px solid #fab9d9;
}
.downloadDataTableBackground{
    background-color: #800040 !important;
}
.downloadDataTableEmptyBackground{
    background-color: #fab9d9 !important;
}
.downloadDataTableButton{
    background-color: #800040 !important;
    color: white;
}
.downloadDataTableButton:hover{
    background-color: lightgrey !important;
    cursor: pointer;
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~  sen  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.senMenuSideBar{
    box-shadow: inset 0 7px 15px -7px rgba(33,33,33,0.7);
    grid-column-start: 1;
    grid-column-end: 2;
    background-color: #800040;
}
.senMenuItem{
    width: 100%;
    font-size: 22px;
    font-weight: bold;
    padding: 15px 0px 15px 30px;
    color: white;
}
.senMenuItem:hover{
    background-color: #fab9d9;
    cursor: pointer;
}
.senMenuItemChosen{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 22.5px 50px 22.5px 0;
    border-color: transparent #fab9d9 transparent transparent;
    position: absolute;
    left: 251px;
}
.senDetailBody{
    box-shadow: inset 0 7px 15px -7px rgba(33,33,33,0.7);
    grid-column-start: 2;
    grid-column-end: 3;
    background-color: #fab9d9; 
    padding-bottom: 50px;
}
.senSmallTitle{
    width: 90%;
    margin: 0 auto;
    margin-top: 50px;
    background-color: #800040;
    color: white;
    font-size: 27px;
    padding: 10px 0px 10px 30px;
    font-weight: bold; 
}
.senFooter{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    border-top: 3px #800040 solid;
    padding-top: 5px;
}
.senFooter input[type=submit]{
    width: 100px;
    font-size: 24px;
    background-color: #800040;
    color: white;
}
.senButton{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    padding-top: 5px;
}
.senButton input[type=button],
.senButton input[type=submit]{
    width: 150px;
    font-size: 24px;
    background-color: #800040;
    color: white;
}
.senButton input[type=button].long{
    width: 200px;
}
.senButton select{
    font-size: 20px;
    width: 180px;
    padding-left: 10px;
    height: 32px;
    line-height:32px;
    border-left: 5px solid #800040;
}
.senButton input[type=password]{
    border-right: 0;
    border-bottom: 0;
    border-top: 0;
}
.senButton input[type=text],
.senButton input[type=password]{
    font-size: 20px;
    width: 165px;
    padding-left: 10px;
    height: 32px;
    line-height:32px;
    border-left: 5px solid #800040;
}
.senButton input[type=text].long{
    width: 400px;
}
.senButton input[type=text].xxxlong{
    width: 100%;
}
.senTable{
    width: 100%;
    border-collapse: collapse;
    border-style: hidden;
}
.senTable td{
    background-color: white;
    border:3px solid #fab9d9;
}
.senTable td.true{
    background-color: #66FFB2 !important;
}
.senTable td.false{
    background-color: #FF6969 !important;
}
.senTable td.Y{
    background-color: #66FFB2 !important;
}
.senTable td.N{
    background-color: #FF6969 !important;
}
.senTable option.true{
    background-color: #66FFB2 !important;
}
.senTable option.false{
    background-color: #FF6969 !important;
}
.senTable td.seperate0{
    background-color: #00FFFF !important;
}
.senTable td.seperate1{
    background-color: white !important;
}
.senTableBackground{
    background-color: #800040 !important;
}
.senTableEmptyBackground{
    background-color: #fab9d9 !important;
}
.senTableTilteBackground{
    background-color: #800040 !important;
    color: white !important;
}
.senTableButton{
    background-color: #800040 !important;
    color: white;
}
.senTableButton:hover{
    background-color: lightgrey !important;
    cursor: pointer;
}
.senFileButton{
    width: 300px;
    font-size: 24px;
    background-color: #800040;
    color: white;
    padding-left: 20px;
}
.senFileButton label:hover{
    cursor: pointer;
}
.senInsertDataNOTable{
    width: 400px;
    border-collapse: collapse;
    border-style: hidden;
    background-color: white !important;
}
.senInsertDataTable{
    width: 600px;
    border-collapse: collapse;
    border-style: hidden;
    background-color: white !important;
}
.senPageIndex{
    width: 90%;
    margin: 0 auto;
    border-collapse: collapse;
    border-style: hidden;
    text-align: center;
}
.senPageIndex td{
    background-color: #800040;
    border:3px solid #fab9d9;
}
.senPageIndex td.unClickable{
    background-color: lightgrey;
}
.senPageIndex td.clickable{
    color: white;
}
.senPageIndex td.clickable:hover{
    background-color: lightgrey;
    cursor: pointer;
}
.senPageIndex td.chosen{
    font-weight: bold;
    background-color: white;
    color: black;
}
.senConfirm{
    background: #800040 !important;
    color: white;
}
.senConfirm:hover{
    background: lightgrey !important;
    cursor: pointer;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~admin~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.adminMenuSideBar{
    box-shadow: inset 0 7px 15px -7px rgba(33,33,33,0.7);
    grid-column-start: 1;
    grid-column-end: 2;
    background-color: #4472C4;
}
.adminMenuItem{
    width: 100%;
    font-size: 22px;
    font-weight: bold;
    padding: 15px 0px 15px 30px;
    color: white;
}
.adminMenuItem:hover{
    background-color: #D9E2F3;
    cursor: pointer;
}
.adminMenuItemChosen{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 22.5px 50px 22.5px 0;
    border-color: transparent #D9E2F3 transparent transparent;
    position: absolute;
    left: 251px;
}
.adminDetailBody{
    box-shadow: inset 0 7px 15px -7px rgba(33,33,33,0.7);
    grid-column-start: 2;
    grid-column-end: 3;
    background-color: #D9E2F3; 
    padding-bottom: 50px;
    color:#57585A;
}
.adminSmallTitle{
    width: 90%;
    margin: 0 auto;
    margin-top: 50px;
    background-color: #4472C4;
    color: white;
    font-size: 27px;
    padding: 10px 0px 10px 30px;
    font-weight: bold; 
}
.addInput{
    width: 90%;
    margin: 0 auto;
    padding-top: 20px;
}
.addInput input[type=button]{
    width: 200px;
    font-size: 24px;
    background-color: #4472C4;
    color: white;
}
.adminFooter{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    border-top: 3px #4472C4 solid;
    padding-top: 5px;
}
.adminFooter input[type=submit],
.adminFooter input[type=button]{
    width: 100px;
    font-size: 24px;
    background-color: #4472C4;
    color: white;
}
.adminFooter input[type=submit].long{
    width: 200px;
}
.adminButton{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    padding-top: 5px;
}
.adminButton input[type=button],
.adminButton input[type=submit]{
    width: 150px;
    font-size: 24px;
    background-color: #4472C4;
    color: white;
}
.adminButton input[type=button].long,
.adminButton input[type=date].long{
    width: 200px;
}
.adminButton input[type=checkbox]{
    width: 15px;
    height:15px;
}
.adminButton input[type=date],
.adminButton input[type=number]{
    border-style:none;
}
.adminFileButton{
    width: 300px;
    font-size: 24px;
    background-color: #4472C4;
    color: white;
    padding-left: 20px;
}
.adminFileButton label:hover{
    cursor: pointer;
}
.adminButton select{
    font-size: 20px;
    width: 164px;
    padding-left: 10px;
    height: 32px;
    line-height:32px;
    border-left: 5px solid #4472C4;
}
.adminButton input{
    font-size: 20px;
    width: 150px;
    padding-left: 10px;
    height: 30px;
    line-height:30px;
    border-left: 5px solid #4472C4 !important;
}
.adminTable{
    word-wrap: break-word;       
    overflow-wrap: break-word; 
    width: 100%;
    border-collapse: collapse;
    border-style: hidden;
}
.adminNotFullTable{
    word-wrap: break-word;       
    overflow-wrap: break-word; 
    border-collapse: collapse;
    border-style: hidden;
}
.adminTable td,
.adminNotFullTable td{
    background-color: white;
    border:3px solid #D9E2F3;
}
.adminTableBackground{
    background-color: #4472C4 !important;
    color: white;
}
.adminEmptyBackground{
    background-color: #D9E2F3 !important;
}
.adminDelete{
    background: #4472C4 !important;
    color: white;
}
.adminDelete:hover{
    background: red !important;
    cursor: pointer;
}
.adminConfirm{
    background: #4472C4 !important;
    color: white;
}
.adminConfirm:hover{
    background: lightgrey !important;
    cursor: pointer;
}
.adminDeleteConfirm{
    background: red !important;
    color: white;
}
.adminDeleteConfirm:hover{
    background: lightgrey !important;
    cursor: pointer;
}

/*new acaedmic year*/
.adminNewAcademicYear{
    width: 90%;
    margin: 0 auto;
    text-align: left;
    color:#57585A;
    font-weight: bold;
}
.adminNewAcademicYear input{
    font-size: 20px;
    width: 150px;
    padding-left: 10px;
    height: 30px;
    line-height:30px;
    border-left: 5px solid #4472C4;
}
.adminNewAcademicYearRecord{
    width: 90%;
    margin: 0 auto;
    border-collapse: collapse;
    border-style: hidden;
}
.adminNewAcademicYearRecord td{
    background-color: white;
    border:3px solid #D9E2F3;
}
.adminNewAcademicYearRecord input[type=button],
.adminNewAcademicYearRecord input[type=submit]{
    width: 150px;
    font-size: 24px;
    background-color: #4472C4;
    color: white;
}

/*new school calendar*/
.adminNewSchoolCalendarData{
    width: 500px;
    border-collapse: collapse;
    border-style: hidden;
}
.adminNewSchoolCalendarDetail{
    width: 750px;
    border-collapse: collapse;
    border-style: hidden;
}
.adminNewSchoolCalendarData td,
.adminNewSchoolCalendarDetail td{
    background-color: white;
    border:3px solid #D9E2F3;
}

/*~~~~~~~~~~~~~~~~~~~~~~~report~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.errButton{
    padding-top: 50px;
    width: 80%;
    margin: 0 auto;
    font-size: 22px; 
    font-family: Microsoft JhengHei;
}
.reportPrintButton{
    padding-top: 20px;
    width: 90%;
    margin: 0 auto;
    font-size: 14px; 
    font-family: Microsoft JhengHei;
}
.reportWidth{
    width: 750px;
}
/*~~~~~ effect ~~~~~~*/
/*container*/
.centerContainer{
    width: 100%;
    text-align: center;
}

.center{
    margin:0 auto;
}

.centerVertical{
    vertical-align: middle;
}

/* text color */
.fontWhite{
    color: white;
}

.fontRed{
    color: red;
}

.fontGreen{
    color: green;
}

/*text*/
.fontBold{
    font-weight: bold;
}
.fontItalic{
    font-style: italic;
}
.fontUnderline{
    text-decoration: underline;
}

/*line*/
.sameLine{
    display: inline-block;
}

.middleText{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

.floatRight{
    float: right;
}

.alignRight{
    width: 100%;
    text-align: right;
}
.alignLeft{
    text-align: left;
    padding-left: 10px;
}
/* background */
.redBackground{
    background-color: red !important;
}
.lightGreyBackground{
    background-color: lightgrey !important;
    -webkit-print-color-adjust: exact; 
}
.greenBackground{
    background-color: #affacd !important;
    -webkit-print-color-adjust: exact; 
}
.whiteBackground{
    background-color: white !important;
    -webkit-print-color-adjust: exact; 
}


/*table*/
.alignCenterTable{
    text-align: center;
    vertical-align: center;
}

.allBorderTable{
    border-collapse: collapse;
}
table.allBorderTable,
.allBorderTable th,
.allBorderTable td{
     border: 1px solid black;
}

table.width100{
    width: 100%;
}

table.width90{
    width: 90%;
}

/*input effect*/
input[type=text]{
    border-right: 0;
    border-bottom: 0;
    border-top: 0;
    font-family: Microsoft JhengHei;
}
input:focus{
    outline: none;
}

input[type=date]::-webkit-inner-spin-button, 
input[type=date]::-webkit-outer-spin-button{ 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

input[readonly] {
    background-color: #DDD;
    z-index:-1;
}

input[type=submit],
input[type=button]{
    border: 0;
    font-family: Microsoft JhengHei;
}
input[type=submit]:hover,
input[type=button]:hover{
    cursor: pointer;
    background-color: grey;
}

.selectDisable{
    background-color: #DDD;
    z-index:-1;
}

select {
    border: 0;
    font-family: Microsoft JhengHei;
}
select:focus{
    outline: none;
}

select:disabled{
    color: grey;
}

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.deleteConfirm{
    background-color: red !important;
}
.deleteConfirm:hover{
    background-color: lightgrey !important;
}

.isDisplaying{
    
}
.notDisplaying{
    
}

.modal {
    display: none;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width:100%;
    height: 100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    -webkit-transform: translate(-50%, -50%) ;
        -ms-transform: translate(-50%, -50%) ;
            transform: translate(-50%, -50%) ;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*link*/
/*normal hover */
a{
    text-decoration: none;
}

a.keepCursor{
    cursor: default;
}

a.keepCursor:hover{
    cursor: default;
}

a.blackLink:link,a.blackLink:visited{
    color:black;
}

a.blacklink:hover{
    color:black;
}

a.greyPurpleLink:link,a.greyPurpleLink:visited{
    color:grey;
}

a.greyPurpleLink:hover{
    color:purple;
}

a.redPurpleLink:link,a.redPurpleLink:visited{
    color:red;
}

a.redPurpleLink:hover{
    color:purple;
}

a.blackBlodLink:link,a.blackBlodLink:visited{
    color:black;
}

a.blackBlodLink:hover{
    font-weight: bold;
}

a.blackLightGreyLink:link,a.blackLightGreyLink:visited{
    color:black;
}

a.blackLightGreyLink:hover{
    color:lightgrey;
}

a.whitePurpleLink:link,a.whitePurpleLink:visited{
    color:white;
}

a.whitePurpleLink:hover{
    color:purple;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*trial*/
.trialData{
    color:red;
}

.noChangeData{
    color:#57585A;
    font-weight: 900;
    font-size: 21px;
}