@charset "utf-8";
/* CSS Document */


.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}



}

a, a:hover, a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}



ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
}





link{
color: #006b38ff;


}

.nav-tabs{

font-size: 20px;
font-family: Roboto;
}

.align-center{


margin-left: auto;
margin-right: auto;
}

.small-label{
font-size: 12px;


}

h1, h2, h3, h4, h5{
font-family: Roboto;


}


.ACT
{
background-color: #71bd56;

}

.AT
{
background-color: #dae029;


}

.BEE
{
background-color: #4bb9d5;


}

.BSINFOTECH
{
background-color: #C0392B;

}

.BSBM
{
background-color: #F39C12;

}

.BSCOS
{
background-color: #9607FF;

}

.BSCPE
{
background-color: #6096B2;

}

.BSE
{
background-color: #0719FF;

}

.BSEE
{
background-color: #FF0000;

}

.BSHRM
{
background-color: #00FF87;

}

.BSIE
{
background-color: #59FF00;

}

.BSIT
{
background-color: #000000;

}

.DHRM
{
background-color: #FF00AE;

}
.sidebar
{
color: #CCC;
font-family: Avenir;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;



}



.password-requirements {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-left: 4px solid #004d28;
}

.requirement {
    font-size: 0.75rem;
    margin: 0.25rem 0;
    transition: all 0.3s ease;
}


body {
background: url('../images/login.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
height: 100%;

}
.btn-login,
.btn-register {
background-color: #004d28;
border-color: #004d28;
box-shadow: none;border-radius: 5px;color:white;
}


.btn-login:hover {
border-color: #28a745;
background-color: #28a745;
color: white;
font-weight: bold;
}

.btn-login:active {
border-color: #28a745;
background-color: #28a745;
color: white;
font-weight: bold;
}

.field-icon {
float: right;
margin-left: 4px;
margin-right: 15px;
margin-top: -32px;
position: relative;
z-index: 4;
}

.uppercase
{
text-transform: uppercase;

}


#login-form
{
width: 230px;
/*height: auto;*/
/*position: relative;*/
/*margin-left: auto;*/
/*margin-right: auto;*/
font-family: Roboto;




}

#login-wrapper
{
    background-color: #101820;
    width: 350px;
    height: auto;
    border-radius: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
}

#register-wrapper
{
    background-color: #101820;
    width: 350px;
    height: auto;
    border-radius: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
}


.wrapper {
display: flex;
width: 100%;
}



#login-logo
{

position:relative;
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
margin-top: 20px;
padding-bottom: 20px;

}

.btn-default
{
border: 1px solid #CCC;
background-color: #ec3e3e;
border-radius: 90px;


}

.btn-default:hover
{
border: 1px solid #CCC;
background-color: #EEE;

}

.btn-primary
{
background-color: #006b38;
font-style: bold;
border-radius: 50px;
margin-top:5px;

}

.btn-primary:hover
{
background-color: #006b38e2;

}

.btn-primary:active,
.btn-primary:focus
{
background-color: #006b38e2;
}


.modal-content
{
border-radius: 10px;



}

.main-body
{
padding: +2%;
padding-top: 1%;
border-left: #DDD 1px solid;
border-right: #DDD 1px solid;


}

.icon
{

width: 30px;
height: 30px;
margin-left: auto;
margin-right: auto;



}

#sidebar-links > li > a
{
border-bottom: #EEE 1px solid;
text-align: left;
font-size: 13px;

}

@media only screen and (max-width: 800px) {

/* Force table to not be like tables anymore */
#no-more-tables table,
#no-more-tables thead,
#no-more-tables tbody,
#no-more-tables th,
#no-more-tables td,
#no-more-tables tr {
display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

#no-more-tables tr { border: 1px solid #ccc; }

#no-more-tables td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
}

#no-more-tables td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}

/*
Label the data
*/
#no-more-tables td:before { content: attr(data-title); }
}

@media
only screen
and (max-width: 760px), (min-device-width: 768px)
and (max-device-width: 1024px) {

/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

tr {
margin: 0 0 1rem 0;
}

tr:nth-child(odd) {
background: #ccc;
}

td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}

td:before {
/* Now like a table header */
position:block;
/* Top/left values mimic padding */
top: 0;
left: 6px;
width: 45%;
padding-right: 10px;

}


.notice
{
position: absolute;
width: 100%;
z-index: 2;

}

.glyphicon
{
margin-right: 15px;

}

.alert
{
border-radius: 5px;
text-align: center;
border: #555 2px solid;
}

.alert-warning
{
background-color: rgba(250, 0, 0, .5);



}

.alert-success
{
background-color: rgba(100, 100, 250, .5);
border: none;

}



/*para sa testing ng ajax sa name tagging*/

#container
{
margin:50px; padding:10px; width:60px
}
#contentbox
{
width:458px; height:50px;
border:solid 2px #333;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin-bottom:6px;
text-align:left;
}
#msgbox
{
border:solid 1px #dedede;padding:5px;
display:none;background-color:#f2f2f2
}
#display
{
display:none;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
overflow:hidden;
}
.display_box
{
padding:4px; border-top:solid 1px #dedede; font-size:12px; height:30px;
}
.display_box:hover
{
background:#3b5998;
color:#FFFFFF;
}
.image
{
width:25px; float:left; margin-right:6px
}

/* END of tagging test*/


#month-calendar
{
height: 350px;

}

.font-sm
{
font-size: 13px;


}

.font-xs
{
font-size: 11px;

}

ul.parsley-error-list
{
text-decoration: none;
list-style: none;
color: #FF0000;

}

.custom-nav > li > a
{
color: #000;
font-size: 12px;

}


.loading
{

position: absolute;

}


select.form-control
{
padding: 0%;
padding-left: 5%;
text-align: center;


}

.banner
{
padding: 0%;

}

.banner-img
{
width: 100%;
height: auto;

}

label
{
font-weight: normal;

}

.legend-icon
{
width: 10px;
height: 10px;

}

.area-slot{
width: auto;
height: 50px;

}

.free-slot
{
background-color: #FFF;

}

.user-img
{
border-radius: 50%;
width: 100px;
height: 100px;
margin-top: 10%;
border: 5px #FFF solid;


}

.sidebar-logo
{
width: inherit;
height: auto;
position: relative;
bottom: 0;
margin-top: 25%;

}

.slot
{

width: 10px;
height: 60px;

}



.icon-warning
{
color: #F00;
}

.pest-warning
{
color: #000;

}

.dis-warning
{
color: #F00;


}

.chosen-choices{
min-width: 100px;

}

.blank-slot
{

background-color: #555;

}

.sked
{
width: 15px;
height: 15px;
background-color: #999;

}

.done
{
width: 15px;
height: 15px;
background-color: #5AF;

}


.alert
{
border: none;

}
.alert-info
{

background-color: #0E9238;

}

.badge-custom
{
background-color: #FFF;
color: #111;
}





.form-label-group {
position: relative;
margin-bottom: 1rem;
}

.form-label-group input {
height: auto;
border-radius: 2rem;
}

.form-label-group>input,
.form-label-group>label {
padding: var(--input-padding-y) var(--input-padding-x);
}

.form-label-group>label {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
margin-bottom: 0;
/* Override default `<label>` margin */
    line-height: 1.5;
    color: #495057;
    border: 1px solid transparent;
    border-radius: .25rem;
    transition: all .1s ease-in-out;
    }

    .form-label-group input:not(:placeholder-shown) {
    padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
    padding-bottom: calc(var(--input-padding-y) / 3);
    }

    .form-label-group input:not(:placeholder-shown)~label {
    padding-top: calc(var(--input-padding-y) / 3);
    padding-bottom: calc(var(--input-padding-y) / 3);
    font-size: 12px;
    color: #777;
    }