@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('/asset/css/materialize.css');
@import url('/asset/css/sweetalert.css');
@import url('/asset/css/fullcalendar.min.css');

body {
    background-color: #f3f3f3;
    color: #616161;
}

nav .brand-logo {
    font-size: 1.3rem;
    text-transform: uppercase;
}

#login-page{
    margin-top: 5%;
}

.brand-logo {
    padding: 0 32px;
}


.fc-toolbar h2 {
    font-size: 1.26rem !important;
}

.input-field label {
    width: 100%;
}

.login-box {
    margin-top: 5%;
}

table.dataTable thead>tr>th:active, table.dataTable thead>tr>td:active {
    outline: none
}

table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
    cursor: pointer;
    position: relative
}

table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
    position: absolute;
    bottom: 16px;
    left: -15px;
    display: block;
    font-family: 'Material Icons';
    opacity: 0.5;
}

table.dataTable thead .sorting:after {
    opacity: 0.2;
    content: "filter_list"
}

table.dataTable thead .sorting_asc:after {
    content: "arrow_downward"
}

table.dataTable thead .sorting_desc:after {
    content: "arrow_upward"
}

.label {
    margin-left: 5px;
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

header, main, footer {
    padding-left: 300px;
}

@media only screen and (max-width: 992px) {
    header, main, footer {
        padding-left: 0;
    }
}

@media only screen and (min-width: 993px) {
    .container {
        width: 85%;
    }
}

@media only screen and (min-width: 993px) {
    .container {
        width: 80%;
    }
}

@media only screen and (min-width: 601px) {
    .container {
        width: 85%;
    }
}

.container {
    margin: 0 auto;
    max-width: 1280px;
    width: 90%;
}