body, html {
    padding: 0;
    margin: 0; /*background-color: #26619c;*/ /*background-color:#7b7b7b;*/
    background-color: ivory;
}

.main {
    height: 100%;
    width: 100%;
    position: absolute;
}

.main-container {
    margin-top: 100px;
}

.logo-container {
    padding-top: 20px;
    padding-bottom: 10px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    width: 380px;
    height: 90px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    background-color: #542120;
}

/*.logo-box {
    display: block;
    margin-left: auto;
    margin-right: auto;
}*/

/*DEFAULT PAGE*/

.login-container {
    margin-top: 10px;
    width: 380px;
    height: 480px;
    margin-left: auto;
    margin-right: auto;
}

.login-all {
    background-color: ivory;
    width: 380px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 5px 10px darkgrey;
    border: 1px solid #542120;
    border-radius: 20px;
    height: 500px;
}

.label-title {
    margin-top:10px;
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Oswald';
    font-weight: bold;
    font-size: 34px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #542120;
    letter-spacing: 4px;
}

.login-box {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

.login-detail {
    padding-top: 10px;
    padding-bottom: 10px;
}

.detail-label {
    display: inline-block;
    width: 25%;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    text-align: right;
    font-weight: bold;
}

.detail-text {
    display: inline-block;
    width: 70%;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
}

.cbo-class {
    border: 1px solid #a3a3a3;
    border-radius: 8px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    padding: 4px 8px;
    height: 35px;
    Width: 85%;
}

.text-class {
    border: 1px solid #a3a3a3;
    border-radius: 8px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    padding: 4px 8px;
    height: 25px;
    Width: 82%;
}

.login-button {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.btnForgot-class {
    background: none;
    color: black;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    font-weight: bold;
}

.btnLogin-class {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    background-color: #542120;
    color: white;
    padding: 8px 6px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    letter-spacing: 2px;
}

    .btnLogin-class:hover {
        background-color: #754140;
        color: /*black*/#ffdf00;
        font-weight: bold;
    }

/*FORgOT PASSWORD PAGE*/

.login-pwdtitle {
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: 'Oswald';
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #5a1b1a;
    color: white;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}


.login-pwdreq {
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    text-align: center;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

/*ADMIN MASTERPAGE*/

/*HEADER

.header {
    width: 230px;
    height: 100%;
    background-color: #542120;
    float: left;
    position: fixed;
}

.logo-box {
    margin-left: auto;
    margin-right: auto;
}

.header-box {
    line-height: 1.1;
    width: 227px;
    text-align: center;
    margin-top: 10px;
}

.header-top-text {
    font-family: 'Oswald';
    font-size: 30px;
    padding: 5px;
    width: 216px;
    color: white;
    border: 2px solid white;
}

.nav-box {
    margin-top: 20px;
    width: 230px;
    font-family: 'Roboto Condensed', sans-serif;
    background-color: #542120;
}

ul {
    list-style-type: none;
    padding: 0;
    overflow: hidden;
    margin: 0;
    width: 100%
}

li {
    float: left;
    width: 100%;
}

    li a {
        font-family: 'Roboto Condensed', sans-serif;
        font-weight: bold;
        display: inline-block;
        color: white;
        text-align: left;
        padding: 18px 20px;
        width: 100%;
        text-decoration: none;
        font-size: 14px;
        letter-spacing: 3px;
    }

        li a:hover:not(.active) { /*text-decoration: underline'
            background-color: #632f2e;
            color: yellow;
            font-weight: bold;
        }*/

/*HEADER*/

/*REGISTER PAGE*/

.main-box {
    margin-top: 10px;
    margin-left: 270px;
    height: 90%;
    width: 80%;
    position: fixed;
    display: inline-block;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: ivory;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.label-box {
    padding-left: 10px;
    color: #542120;
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: bold;
    font-size: 32px;
}

.reg-box {
    width: 100%;
    height: 80%;
    margin-left: auto;
    margin-right: auto;
}

.detail-box {
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    height: 30px;
}

.gen-label {
    display: inline-block;
    width: 8%;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    text-align: left;
}

.gen-text {
    display: inline-block;
    width: 45%;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
}

.button-box {
    text-align: center;
    margin-top: 10px;
    height: 50px;
    background-color: ivory;
}

.button-box-2 {
    margin-top: 10px;
    height: 50px;
    width: 700px;
    background-color: ivory;
}

.button-container {
    margin: auto;
    width: 530px;
}

.button-submit {
    width: 260px;
    display:inline-block;
}

.button-clear {
    width: 260px;
    display: inline-block;
}

.submit-button {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    background-color: #542120;
    color: white;
    padding: 8px 6px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    letter-spacing: 2px;
    height: 40px;
}

    .submit-button:hover {
        background-color: #632f2e;
        color: black;
        font-weight: bold;
    }

.clear-button {
    border-style: none;
    border-color: inherit;
    border-width: medium;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    background-color: #324788;
    color: white;
    padding: 8px 6px;
    border-radius: 5px;
    cursor: pointer;
    letter-spacing: 2px;
    }

    .clear-button:hover {
        background-color: #495e9f;
        color: black;
        font-weight: bold;
    }

/* DELETE WARNING POP UP*/

.div-warn-panel {
    width: 430px;
    height: 160px;
}

.modalBackground {
    height: 100%;
    background-color: lightgrey;
    filter: alpha(opacity=70);
    opacity: 0.7;
    overflow: hidden
}

.div-warn-panel {
    width: 430px;
    height: 160px;
    margin-left: auto;
    margin-right: auto;
}

.div-warning {
    width: 430px;
    height: 125px;
}

.panelClass-3 {
    position: absolute;
    width: 430px;
}

.warnBox {
    width: 435px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    height: 120px;
}

.warn-info {
    padding-top: 10px;
    height: 80px;
    width: 415px;
}

.warn-text {
    font-size: 18px;
    text-align: center;
}

.warn-button {
    margin-top: 10px;
    width: 420px;
    height: 40px;
}

.confirm-button-left {
    width: 200px;
    float: left;
    height: 45px;
}

.confirm-button-right {
    width: 200px;
    float: right;
    height: 45px;
}

.y-button {
    float: right;
    font-family: 'Roboto Condensed', sans-serif;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    width: 60px;
    background-color: #542120;
    color: white;
    padding: 6px 2px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.n-button {
    float: left;
    font-family: 'Roboto Condensed', sans-serif;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    width: 60px;
    background-color: #324788;
    color: white;
    padding: 6px 2px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.warnTitle {
    font-weight: bold;
    font-size: 18px;
    color: white;
    text-align: center;
    background-color: #542120;
    padding: 2px;
    width: 430px;
}

.warnContainer {
    height: 90px;
    font-size: 20px;
    background-color: white;
    padding-left: 10px;
    padding-top: 10px;
    width: 423px;
}

.div-warn {
    width: 410px;
    height: 90px;
}

.warnClosebutton {
    background-color: #542120;
    color: white;
    padding: 2px;
    text-align: center;
    width: 430px;
}

.btnclose {
    background-color: grey;
    color: black;
    width: 60px;
    cursor: pointer;
    border: none;
    padding: 2px 2px;
}

.btnhome {
    background-color: grey;
    color: black;
    width: 60px;
    cursor: pointer;
    border: none;
    padding: 2px 2px;
}

/*EDIT USER PAGE*/

.gridview-box {
    overflow-y: scroll;
    padding-left: 10px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    width: 1110px;
    height: 200px;
}

.btngv {
    width: 80px;
    cursor: pointer;
    border: none;
    background-color: #542120;
    color: white;
    padding: 4px 2px;
    font-size: 0.7em;
}

    .btngv:hover {
        background-color: #632f2e;
        color: black;
    }
.btngv-del {
    width: 80px;
    cursor: pointer;
    border: none;
    background-color: #324788;
    color: white;
    padding: 4px 2px;
    font-size: 0.7em;
}

    .btngv-del:hover {
        background-color: #495e9f;
        color: black;
    }

.prevent-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.edit-box {
    width: 700px;
    height: 560px;
    background-color: ivory;
}

.panel-box {
    height: 440px;
    width:700px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
}

.panel-title {
    font-weight: bold;
    font-size: 18px;
    color: white;
    text-align: center;
    background-color: #542120;
    padding-top: 5px;
    padding-bottom: 5px;
}

.panel-long-title {
    font-weight: bold;
    font-size: 18px;
    color: white;
    text-align: center;
    background-color: #542120;
    padding-top: 5px;
    padding-bottom: 5px;
}

.panel-mid {
    height: 420px;
    padding-left: 10px;
    background-color: ivory;
}

.panel-detail {
    padding-top: 10px;
    padding-bottom: 10px;
}

.panel-1{
    padding-top: 10px;
    padding-bottom: 10px;
    height: 30px;
}

.panel-1-label{
    display:inline-block;
    height: 30px;
    width: 90px;
}

.panel-1-text {
    display: inline-block;
    height: 40px;
    width: 550px;
}

.panel-1-cbo-class {
    border: 1px solid #a3a3a3;
    border-radius: 8px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    padding: 4px 8px;
    height: 30px;
    Width: 520px;
}

.panel-1-text-class {
    border: 1px solid #a3a3a3;
    border-radius: 8px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    padding: 4px 8px;
    height: 30px;
    Width: 500px;
}

.viewClosebutton {
    margin: auto;
    width:100%;
    background-color: #542120;
    color: white;
    text-align: center;
    padding-top: 5px;
    padding-bottom:5px;
}

.btnclose {
    background-color: grey;
    color: black;
    width: 60px;
    cursor: pointer;
    border: none;
    padding: 2px 2px;
}

.panel-button-box {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* UPDATE SCHOOL STATUS PAGE*/

.regSchool-box{
    width: 100%;
    height: 40px;
    padding-left: 10px;
    padding-top: 10px;
}

.regSchool-label {
    display: inline-block;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    font-weight: bold;
    width: 130px;
    height: 40px;
}
.add-button {
    display: inline-block;
    width: 50px;
    height: 40px;
}

.add-button-class {
    margin:auto;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 20px;
    text-align:center;
    font-weight: bold;
    width: 40px;
    background-color: #a6a7a0;
    color: white;
    padding: 6px 4px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    letter-spacing: 2px;
    height: 30px;
}

    .add-button-class:hover {
        background-color: #cdcecb;
        color: black;
    }

.panel-mid-2 {
    height: 100px;
    padding-left: 10px;
    background-color: ivory;
}

.panel-box-2 {
    height: 190px;
    width: 700px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
}

.edit-box-2 {
    width: 700px;
    height: 240px;
    background-color: ivory;
}

.update-label {
    width: 60px;
    display: inline-block;
    font-size: 18px;
    height: 40px;
}

.update-text {
    display: inline-block;
    height: 40px;
    width: 341px;
}

.panel-2-text-class {
    border: 1px solid #a3a3a3;
    border-radius: 8px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    padding: 4px 8px;
    height: 30px;
    Width: 300px;
}

.panel-2-cbo-class {
    border: 1px solid #a3a3a3;
    border-radius: 8px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    padding: 4px 8px;
    height: 30px;
    Width: 320px;
}

.update-button {
    margin-top: 10px;
    width: 310px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
}

.update-button-class {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    font-weight: bold;
    width: 310px;
    background-color: #542120;
    color: white;
    padding: 8px 6px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    letter-spacing: 2px;
    height: 40px;
}

    .update-button-class:hover {
        background-color: #632f2e;
        color: black;
        font-weight: bold;
    }

.update-info {
    padding-top: 10px;
    height: 175px;
    width: 415px;
}

.div-update {
    width: 410px;
    height: 188px;
}

.update-box {
    width: 435px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    height: 240px;
    background-color: ivory;
}

.div-update-panel {
    width: 430px;
    height: 264px;
    background-color: ivory;
}

.status-box {
    width: 100%;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
}

.status-label{
    width: 60px;
    display:inline-block;
    height: 30px;
}

.status-text{
    width: 200px;
    height: 30px;
    display:inline-block;
}

.status-button {
    width: 130px;
    display: inline-block;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    padding-left: 10px;
}

.panel-3-cbo-class {
    border: 1px solid #a3a3a3;
    border-radius: 8px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    padding: 4px 8px;
    height: 30px;
    Width: 200px;
}

.gen-button-class {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    background-color: #542120;
    color: white;
    padding: 8px 6px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    letter-spacing: 2px;
    height: 40px;
}

    .gen-button-class:hover {
        background-color: #632f2e;
        color: black;
        font-weight: bold;
    }

.updateContainer {
    height: 187px;
    font-size: 20px;
    background-color: white;
    padding-left: 10px;
    padding-top: 10px;
    width: 423px;
}

.update-detail{
    padding-top: 10px;
    padding-bottom: 5px;
    
}

.update-button-box{
    height: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.button-box-3 {
    margin-top: 10px;
    height: 50px;
    background-color: ivory;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
}



.mainFrame{width:980px;height:800px;margin-top:10px;margin-left:250px;position: fixed;}

.frameM{height:800px;}
.frame{width:400px;margin-left:auto;margin-right:auto;box-shadow:0px 5px 10px #808080;margin-top:50px;border-bottom-left-radius:5px;}
.frame1{width:380px;padding:15px;background-color:#b22222;color:#fff;border-top-left-radius:5px;border-top-right-radius:5px;}
.frame1In{width:90%;padding:15px;border-left:5px double white;border-bottom:3px double white;}
.frame2{text-align:center;width:400px;padding:5px;background-color:#dedede;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}
.fbox{margin-left:auto;margin-right:auto;}
.flabel{border-radius:5px;padding:7px;border:none;}
.ffield{width:280px;float:left;padding:3px 0px;}
.fbutton{border-radius:3px;width:130px;padding:5px 15px;border:none;background-color:#b22222;color:white;cursor:pointer;}
.fbutton:hover {background-color:#000;} 

.HframeSelection {float:left;width:auto;height:180px;margin-top:0px;}
.HTitle {width:485px;height:30px;margin-top:10px;margin-left:0px;font-size:large ;text-shadow: 1px 1px #d1d1d1;}
.Hgen0{float:left;width:960px;height:30px;margin-top:25px;border:0px solid black;}
.Htable {float:left;width:960px;height:550px;margin-top:15px;text-align:left;border:0px solid black;font-size:small;overflow-y:auto;}
.HboxLabel{width:900px;display:inline-block;padding-top:20px;float:none;}
.HboxLabel1{width:900px;display:inline-block;padding-top:10px;float:none;font-size:0.8em;}
.HboxLabel2{width:900px;display:inline-block;padding-top:20px;float:none;}
.Hdiv{width: 505px; margin-top: 10px;height:150px; }
.Hbox{width:850px;display:inline-block;padding-top:8px;}
.Hbox2{width: 880px;}
.Hbox1{width:350px;float:left;padding-top:8px;}
.HboxField{width:380px;float:left;padding-top:8px;}
.HboxField2{width:170px;display:inline-block;padding-top:5px;}
.HboxField3{width:510px;display:inline-block;padding-top:5px;}
.HboxField4{width:340px;display:inline-block;padding-top:5px;}
.Hfield{/*width:340px;float:left;*/ display:inline-block; padding-right: 5px; padding-top:8px;font-size:0.9em;}
.Hfield2{width:160px;float:left;padding-top:3px;font-size:0.9em;}
.Hfield3{width:500px;float:left;padding-top:3px;font-size:0.9em;}
.Hfield4{width:340px;float:left;padding-top:3px;font-size:0.9em;}
.Hlabel{width:150px;float:left;}
.Hlabel1 {float:left;width:650px;font-size:16px;float:left;padding:2px 0px;margin-left:0px;}
.Hlabel2{width:150px;float:left;}
.Hlabel3{width:450px;float:left;}
.Hlabel4{width:300px;float:left;}
.HboxBtnRight{float:right;}
.HboxBtnLeft{float:left;}
.lblerror{color:red;font-size:0.7em;font-style:oblique;}
.lblStyleInfo{background-color:#faf0e6;border-bottom:3px solid #321414;border-top:3px solid #321414;padding:3px 5px 3px 3px;float:left;}
.lblStyle{border-bottom:1px solid #321414;border-right:3px solid #321414;padding-bottom:2px;padding-left:3px;padding-right:5px;}
.lblTitleStyle {
    border-left: solid 5px #321414;
    border-right: solid 5px #321414;
    border-top: 1px solid #321414;
    border-bottom: 1px solid #321414;
    padding-top: 5px;
    padding-bottom: 2px;
    padding-left: 8px;
    padding-right: 8px;
    background-color:#faf0e6;
}
.lblStyleSubT{border-bottom:1px solid #321414;border-left:3px solid #321414;padding-bottom:3px;padding-left:3px;padding-right:5px;margin-bottom:5px;}

.HbtnSubmit{padding:4px 8px;background-color:#542120;color:white;border:none;cursor:pointer;border-radius:4px;border:1px solid #321414;}
.HbtnSubmit:hover{background-color:#ffdf00;color:#000;}
.HbtnSubmitHigh{padding:4px 8px;background-color:#ffdf00;color:#000;border:none;cursor:pointer;border-radius:4px;border:1px solid #321414;}
.HbtnSubmitHigh:hover{background-color:#542120;color:white;}
.btnGV{border-radius:3px;padding:3px 10px;border:none;cursor:pointer;color:blue;border-radius:4px;background-color:#ffdf00;color:#000;font-size:0.9em;}
.btnGV:hover{background-color:#321414;color:white;}
.btnGVDel{border-radius:3px;width:30px;padding:3px;border:none;cursor:pointer;border:1px solid #5f5f5f;border-radius:4px;background-color:#fbd1d1;font-size:0.9em;color:red;}
.btnGVDel:hover{background-color:red;color:white;}

.form-text {
    border: none;
    padding: 5px;
    border-radius: 3px;
    border: 1px solid #bdb9b9;
    border-bottom: 2px solid #bebebe;
    padding: 5px;
    height: 13px;
    font-size: 0.8em;
}
.form-text:hover{border-bottom: 2px solid #542120;}

.form-textMulti {
    border: none;
    padding: 5px;
    border-radius: 3px;
    border: 1px solid #bdb9b9;
    border-bottom: 2px solid #bebebe;
    padding: 5px;
    height: 15px;
    font-size: 1em;
}

.form-cbo{
    padding:5px;
    border-radius:3px;
    border:1px solid #bdb9b9;
    border-bottom: 2px solid #bdb9b9;
    /*margin-top:7px;
    margin-left:3px;*/
    height:25px;
    width:95%;
    font-size :0.8em;color:#555454;
}
.form-cbo:hover{border-bottom: 2px solid #542120;}

/*MODAL DIALOG*/
.frameModal{width:100%;height:100%;position:fixed;top:0;left:0;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);}
.contentModal{width:500px;height:auto;padding:10px;margin-left:auto;margin-right:auto;margin-top:70px;border:3px double rgb(0,0,0);background-color:#ffffff;border-radius:5px;}
.contentHeader{background-color:#542120;padding:5px;}
.contentHead{padding:5px;color:white;border-left:3px solid white;border-bottom:3px solid white;font-size:0.9em;}
.contentLabel{padding:10px 5px;display:inline-block;}
.contentFieldBox{width:480px;float:left;}
.contentFieldBox1{width:460px;float:left;padding:5px 0px;}
.contentField{float:left;}
.contentFont{font-size:0.8em;padding:2px 0px;}
.contentBoxBtn{width:100%;float:left;text-align:center;}
.contentError{width:300px;height:10px;color:red;font-size:0.8em;text-align:left;padding-bottom:5px;}        
.contentBtn{width:130px;padding:5px;border:none;cursor:pointer;background-color:#542120;color:white;border-radius:3px;}
.contentBtn:hover{background-color:#ffdf00;color:#000;}

.form-text {
    border: none;
    padding: 5px;
    border-radius: 3px;
    border: 1px solid #bdb9b9;
    border-bottom: 2px solid #bebebe;
    padding: 5px;
    height: 13px;
    font-size: 0.8em;
}
.form-text:hover{border-bottom: 2px solid #542120;}

.form-text-multi-1{border: none;padding: 5px; border-radius: 3px; border: 1px solid #bdb9b9; border-bottom: 2px solid #bebebe; padding: 5px; height: 40px; width:490px ; font-size: 0.8em; resize:none;}

.form-text-multi-1:hover{border-bottom: 2px solid #542120;}

.form-textMulti {
    border: none;
    padding: 5px;
    border-radius: 3px;
    border: 1px solid #bdb9b9;
    border-bottom: 2px solid #bebebe;
    padding: 5px;
    height: 15px;
    font-size: 1em;
}

.form-cbo{
    padding:5px;
    border-radius:3px;
    border:1px solid #bdb9b9;
    border-bottom: 2px solid #bdb9b9;
    /*margin-top:7px;
    margin-left:3px;*/
    height:25px;
    font-size :0.8em;color:#555454;
}
.form-cbo:hover{border-bottom: 2px solid #542120;}

/* STUDENT REPORT LIST */

.main-box {
    margin-top: 10px;
    margin-left: 270px;
    height: 100%;
    width: 90%;
    position: fixed;
    display: inline-block;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: ivory;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.label-box {
    padding-left: 10px;
    color: #542120;
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: bold;
    font-size: 32px;
}

.report-box {
    height: 350px;
    width: 90%;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    background-color: ivory;
}

.report-mid{
        height: 300px;
}

.filter-box {
    margin-top: 10px;
    width: 90%;
    height: 10%;
}

.btn-gen-class {
    display: inline-block;
    width: 130px;
    display: inline-block;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    padding-left: 10px;
}

.btn-dsg {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    background-color: #542120;
    color: white;
    padding: 8px 6px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    letter-spacing: 2px;
    height: 40px;
}

    .btn-dsg:hover {
        background-color: #632f2e;
        color: black;
        font-weight: bold;
    }

.cbo-class-long {
    display: inline-block;
    width: 470px;
}

.cbo-class-short {
    display: inline-block;
    width: 110px;
}

.cbo-long {
    border: 1px solid #a3a3a3;
    border-radius: 8px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    padding: 4px 8px;
    height: 35px;
    Width: 450px;
}

.cbo-short {
    border: 1px solid #a3a3a3;
    border-radius: 8px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    padding: 4px 8px;
    height: 35px;
    Width: 100px;
}

.txt-class-long {
    display: inline-block;
    width: 470px;
}

.txt-long {
    border: 1px solid #a3a3a3;
    border-radius: 8px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    padding: 2px 6px;
    height: 25px;
    Width: 450px;
}

.report-list {
    padding-top: 10px;
    height: 90%;
    width: 90%;
}

.print-report{
    height: 390px;
    width: 60%;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    background-color: ivory;
}

.printClosebutton {
    background-color: #542120;
    color: white;
    text-align: center;
    padding-top: 5px;
    padding-bottom:5px;
}

/* STUDENT REPORT LIST */