html {
    height:100%;
}
@font-face {
    font-family:'Raleway';
    src:url('../fonts/Raleway.ttf'),
    url('../fonts/Raleway.ttf') format('truetype')
}
@font-face {
    font-family:'RalewayB';
    src:url('../fonts/RalewayB.ttf'),
    url('../fonts/RalewayB.ttf') format('truetype')
}
@font-face {
    font-family:'RalewayM';
    src:url('../fonts/RalewayM.ttf'),
    url('../fonts/RalewayM.ttf') format('truetype')
}
.bg h2
{

    font-size: 40px;
    font-weight: bolder;
    font-family: 'RalewayB';
    letter-spacing: 0.1em;
    text-align: center;
}
.bg p
{
    font-family: 'RalewayM';
}
.logodiv
{
    background:url("../img/logo.png") no-repeat center center;
    min-height: 300px;
}
.img-responsive {
    margin: 0 auto;
}
.user
{
    background-image: url("../img/icon/user-icon.png");
    background-repeat: no-repeat;
    padding-left: 50px;
    height: 50px;
    background-color: #000000;
    color: #ffffff;
    font-size: 18px;

}
.pass{
    background-image: url("../img/icon/pw-icon.png");
    background-repeat: no-repeat;
    padding-left: 50px;
    height: 50px;
    background-color: #000000;
    color: #ffffff;
    font-size: 18px;
}

@media print {
    .bg{
        background-image: url("../img/bg.png") !important;
        background-repeat: repeat-x;
        -webkit-print-color-adjust: exact;
    }

}
.btn1
{
    background-color: #A02A7E;
    color: #ffffff;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 20px;
    border: 1px solid #ffffff;
}
.payslip .btn
{
    margin-top: 10px;
}
.btn1:hover
{
    background-color: #000000;
    color: #ffffff;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 20px;
    border: 1px solid #ffffff;
}

.btn4
{
    background-color: #A02A7E;
    color: #ffffff;

    font-size: 10px;
}
.btn4:hover
{
    background-color: #000000;
    color: #ffffff;
}

.stbox .btn1
{
    font-size: 11px;
    padding-left: 5px;
    padding-right: 5px;

}

.st2box .btn1
{
    font-size: 11px;
}


.btn2
{
    background-color: #000000;
    color: #ffffff;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 20px;
    border: 1px solid #ffffff;
}
.btn2:hover
{
    background-color: #A02A7E;
    color: #ffffff;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 20px;
    border: 1px solid #ffffff;
}
.mark
{
    min-height: 70px;
    background-color: #A02A7E;
    color: #ffffff;
    font-size: 22px;
    margin-top: 10px;
    padding: 20px;
}
.menu
{
    background-color: #000000;
    height: 80px;
    margin: 10px;
    width: 100px;
    float: right;
    border-radius: 5px;
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    padding-top: 5px;
    position: relative;
    font-family: 'Raleway';

}
.menu span
{
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
}

.menu:hover
{
    background-color: #A02A7E;
    cursor: pointer;
}
.menu img
{
margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
}
.bright
{
    background-image: url("../img/banner.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 5px;
}
.menu2
{
    width: 180px;
    height: 80px;
    background-color: #000000;
    margin-top: 4px;
    margin-left: 0px;
    color: #ffffff;
    font-size: 25px;
    padding-left: 10px;

}
.menu2:hover
{
    background-color: #A02A7E;
    cursor: pointer;
}
.menu2 span
{
    display: block;
    padding-top: 25px;

}
.profile
{
    font-family: 'Raleway';
    font-size: 20px;
}
.profile span
{
    font-size: 25px;
    color: #A02A7E;
    text-transform: uppercase;
    font-weight: bold;
}
.profile hr
{
    background-color: #A02A7E;
    height: 1px;
}
hr
{
    background-color: #A02A7E;
    height: 1px;
}
.fileUpload, #uploadFile {
    position: relative;
    overflow: hidden;
    min-height: 50px;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
.foot
{
    background-color: #313031;;
    margin-top: 20px;
    text-align: center;
    padding-top: 20px;
    color: #ffffff;
}
.foot a:link, .foot a:active, .foot a:visited
{
    font-family: 'Raleway';
    font-size: 18px;
    margin: 20px;
    margin-left: 30px;
    color: #ffffff;
    text-transform: uppercase;

}
.foot a:hover
{
    color: #A02A7E;

}
.klas
{
    min-height: 70px; background-color: #313031;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    float: left;
    text-align: center;
    font-size: 30px;
    font-family: 'Raleway';
    color: #ffffff;
    text-transform: uppercase;
    padding-top: 13px;
    cursor: pointer;

}
.klas:hover
{
    background-color: #A02A7E;
}

.stbox
{
    text-align: center;
    margin-top: 20px;
    padding-bottom: 7px;
    padding-top: 10px;
    margin-left: 15px;
    margin-right: 15px;

    font-family: 'Raleway';
    background:  #8adbd2; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#f1faf9, #8adbd2); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#f1faf9, #8adbd2); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#f1faf9, #8adbd2); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#f1faf9, #8adbd2); /* Standard syntax (must be last) */
}
.stbox h3
{
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: bold;
    font-size: 23px;

}
.stbox h3 span
{
    color: #A02A7E;
}
.payslip .form-control
{
    background-color: #EDEDED;
    height: 50px;
}
 .btn1, .btn2
{

}
 .print-only
 {
     display: none;
 }
@media (max-width: 1000px) {
    .mark a:link
    {
        display: none;
    }
    .mark
    {
        text-align: center;
    }
    .menua{
        text-align: center;
        margin: 0px auto;
    }
    .menu
    {
        display: inline-block;
        float: none;
    }

    .stick
    {
        display: none;
    }
    .bright
    {
        display: none;
    }
    .logo
    {
        margin-left: auto;
        margin-right: auto;
    }
    .foot a:link, .foot a:active, .foot a:visited
    {

        margin: 5px;
        margin-left: 5px;
        font-size: 16px;

    }
    .mobi
    {
        display: block;
    }
    .desktop
    {
        display: none;
    }
}

@media (min-width: 1000px) {
    .mobi
    {
        display: none;
    }
    .desktop
    {
        display: block;
    }
    .stick
    {
        display: block;
    }
    .bright
    {
        display: block;
    }
    .menu
    {

        float: right;
    }
    .klas
    {
        width: 30%;
    }

}
.logout:link, .logout:hover, .logout:visited, .logout:active
{
    color: #ffffff;
    font-size: 18px;
    text-transform: uppercase;
}
.cdiv{

    height: 100%;
}
.tt
{
    text-transform: uppercase;
    padding-left: 0px;
    margin-left: 0px;
}
.noprint
{
    display: inherit;
}
@media print {
    .print-only
    {
        display: inherit;
    }
    .noprint
    {
        display: none;
    }
}