/*================================================================================
	Item Name: Materialize - Material Design Admin Template
	Version: 3.0
	Author: GeeksLabs
	Author URL: http://www.themeforest.net/user/geekslabs
================================================================================
NOTE:
------
PLACE HERE YOUR OWN CSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */



nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
    height: 64px;
    line-height: 64px
}

.dropdown-content li > a, .dropdown-content li > span {
    font-size: 1rem;
}


.nav-wrapper ul li a.alwaysShown {
    height: 64px;
    line-height: 64px;
    display: inline-block;
}

    .nav-wrapper ul li a.alwaysShown img {
        padding: 7px 0px 0px 0px;
        vertical-align: middle;
    }

.nav-wrapper ul a {
    color: #000;
}

.nav-wrapper i {
    color: #000;
}

#inner.container {
    background-color: #f0f3f2;
    padding: 17px;
}

#data-table-simple_length.dataTables_length {
    display: none;
}

.input-field div.error {
    position: relative;
    top: -1rem;
    left: 0rem;
    font-size: 0.8rem;
    color: #FF4081;
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);
}

.input-field-dropdown div.error {
    position: relative;
    /* top: -1rem; */
    left: 0rem;
    font-size: 0.8rem;
    color: #FF4081;
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);
}

.input-field div.errormessage {
    position: relative;
    top: -1rem;
    left: 0rem;
    font-size: 1.2rem;
    color: #FF4081;
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);
}

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

.left-alert input[type=text] + label:after,
.left-alert input[type=password] + label:after,
.left-alert input[type=email] + label:after,
.left-alert input[type=url] + label:after,
.left-alert input[type=time] + label:after,
.left-alert input[type=date] + label:after,
.left-alert input[type=datetime-local] + label:after,
.left-alert input[type=tel] + label:after,
.left-alert input[type=number] + label:after,
.left-alert input[type=search] + label:after,
.left-alert textarea.materialize-textarea + label:after {
    left: 0px;
}

.right-alert input[type=text] + label:after,
.right-alert input[type=password] + label:after,
.right-alert input[type=email] + label:after,
.right-alert input[type=url] + label:after,
.right-alert input[type=time] + label:after,
.right-alert input[type=date] + label:after,
.right-alert input[type=datetime-local] + label:after,
.right-alert input[type=tel] + label:after,
.right-alert input[type=number] + label:after,
.right-alert input[type=search] + label:after,
.right-alert textarea.materialize-textarea + label:after {
    right: 70px;
}

.input-field textarea {
    width: 100%;
    height: 3rem;
    background-color: transparent;
    margin-bottom: 10px;
}

.input-field label.text-area {
    color: #9e9e9e;
    position: absolute;
    top: 0.2rem;
    left: 1.10rem;
    font-size: 1rem;
    cursor: text;
    -webkit-transition: 0.2s ease-out;
    -moz-transition: 0.2s ease-out;
    -o-transition: 0.2s ease-out;
    -ms-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
}

div#btnUpldLogo {
    float: right;
    margin-top: -23px;
}

/*to make all the error divs red */
div.error {
    color: #FF4081;
}


.logotxt {
    font-size: 19px;
    font-weight: bold;
    color: #000;
}

.section {
    padding-top: 0rem;
    padding-bottom: 0rem;
}

.row {
    margin-bottom: 5px;
}

.input-field label {
    top: -7px;
    font-size: 1.2rem;
}

input:not([type]), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default), input[type=email]:not(.browser-default), input[type=url]:not(.browser-default), input[type=time]:not(.browser-default), input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default), input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default), input[type=search]:not(.browser-default), textarea.materialize-textarea {
    margin: 0 0 10px 0;
    height: 2rem;
    font-size: 1rem;
    padding-left: 5px;
    border: 1px solid #9e9e9e;
    border-radius: 3px;
    background-color: #fff;
}

#IEroot input:not([type]), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default), input[type=email]:not(.browser-default), input[type=url]:not(.browser-default), input[type=time]:not(.browser-default), input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default), input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default), input[type=search]:not(.browser-default), textarea.materialize-textarea {
    margin: 0 0 10px 0;
    height: 2rem;
    font-size: 1rem;
    padding-left: 5px;
    border: 1px solid #9e9e9e;
    border-radius: 3px;
    background-color: #fff;
}

.input-field.col label {
    padding-left: 5px;
}

    .input-field.col label.reason {
        color: #ff0000 !important;
    }


textarea.materialize-textarea {
    padding: 1px 5px 1px 5px;
}

.card-panel {
    background-color: #fafafa !important;
    padding-bottom: 4px;
    padding-top: 10px;
}

table {
    font-size: 1rem;
}

.select-wrapper span.caret {
    color: #000;
    z-index: 99;
}

.select-wrapper ul.dropdown-content {
    width: 101% !important;
    padding: 0px 0px 0px 0px !important;
    border: 1px solid #9e9e9e;
    border-radius: 3px !important;
    margin-left: 0.2px !important;
    max-height: 20rem;
}

    .select-wrapper ul.dropdown-content li {
        min-height: 25px !important;
    }

        .select-wrapper ul.dropdown-content li:hover {
            background-color: #e2e2e2;
        }

.select-dropdown.dropdown-content li.selected {
    background-color: #e2e2e2;
}

.select-wrapper .dropdown-content li > a, .dropdown-content li > span {
    padding: 7.8px 16px 9.5px 5px !important;
    line-height: 12px !important;
    color: #000 !important;
    font-size: 1rem !important;
}

[type="checkbox"] + label:before {
    top: -10px;
    left: -28px;
}

[type="checkbox"]:checked + label:before {
    top: -14px;
    left: -35px;
}

.multiple-select-dropdown [type="checkbox"] + label {
    margin-left: 32px;
    padding-left: 0px;
}


.browser-default {
    height: 2rem !important;
    padding: 0px !important;
}

textarea {
    height: 2rem !important;
}

table.report-small {
    font-size: 0.9rem !important;
}


    table.report-small th.wrap {
        white-space: normal !important;
    }

    table.report-small tbody td.wrap {
        white-space: normal !important;
    }

table.tblSummary tr, table.tblSummary td {
    padding: 4px !important;
    border: 1px dashed #000;
    text-align: right;
    /* border-radius: 50%; */
    font-weight: bold;
}

table.report-small td.right-align {
    padding-right: 2.4%;
}

table.employee-detail {
    border: 1px solid #e0e0e0;
}

    table.employee-detail > tbody > tr > td, table.employee-detail > thead > tr > th {
        padding: 5px 5px;
        width: 25%;
    }

.bold {
    font-weight: bold
}

.sample {
    padding: 5px;
    text-align: left;
    border-radius: 6px;
    margin: 5px;
}

table.sampleforView > tbody > tr > td {
    padding: 5px;
    border-radius: 0px;
}

.sampleforView {
    border: 1px solid;
    border-color: #e0e0e0;
}

table.sampleforView > tbody tr:nth-child(odd) {
    background-color: #e0e0e0;
}

table.view-detail {
    border: 1px solid #e0e0e0;
}

    table.view-detail > tbody > tr > td, table.view-detail > thead > tr > th {
        padding: 7px 7px;
        width: 50%;
    }

table.ViewAttendance-detail {
    border: 1px solid #e0e0e0;
}

    table.ViewAttendance-detail > tbody > tr > td, table.employee-detail > thead > tr > th {
        padding: 5px 5px;
        width: 50%;
    }

@media only screen and (max-width: 480px) {
    #ProfileImage {
        max-width: 150px !important;
        max-height: 70px !important;
        margin-bottom: 25px;
    }
}


@media print {
    @page {
        size: A4 landscape !important;
        zoom: 50% !important;
        max-height: 100% !important;
        max-width: 100% !important;
    }
}

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

    .nav-wrapper ul li a, .dropdown-content li > a, .dropdown-content li > span {
        font-size: 0.9rem;
    }

        .nav-wrapper ul li a.alwaysShown {
            padding: 0px 8px;
        }

            .nav-wrapper ul li a.alwaysShown img {
                padding: 5px 0px;
            }

    table.dataTable thead th, table.dataTable thead td {
        /* font-size: 12px; */
    }


    table.report-very-small {
        font-size: 0.7rem !important;
    }
}

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

    .nav-wrapper ul li a.alwaysShown img {
        padding: 8px 0px;
    }

    .logotxt {
        font-size: 14px;
    }
}

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

    .nav-wrapper ul li a, .dropdown-content li > a, .dropdown-content li > span {
        font-size: 12px;
    }

        .nav-wrapper ul li a.alwaysShown {
            padding: 0px 6px;
        }

            .nav-wrapper ul li a.alwaysShown img {
                padding: 9px 0px;
            }

    .logotxt {
        font-size: 12px;
    }
}

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

    /*.nav-wrapper ul li a.alwaysShown {
        padding: 0px 4px;
    }*/

    .nav-wrapper ul li a.alwaysShown img {
        padding: 10px 0px;
    }
}

@media only screen and (max-width: 601px) {
    nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
        height: 64px;
        line-height: 64px
    }

    .nav-wrapper ul li a.alwaysShown {
        height: 64px;
        line-height: 64px
    }

        .nav-wrapper ul li a.alwaysShown img {
            padding: 7px 0px 0px 0px;
            vertical-align: middle;
        }
}


ul.dropdown-content li a {
    border-bottom: 1px solid #e4e4e4;
}

.pencilColor {
    color: red !important;
}

.priority-high {
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-bottom: 10px solid red;
    position: relative;
    top: -6px;
}

    .priority-high:after {
        content: '';
        position: absolute;
        left: -8px;
        top: 10px;
        width: 0;
        height: 0;
        border: 8px solid transparent;
        border-top: 10px solid red;
    }

.priority-immediate {
    width: 16px;
    height: 10px;
    background: red;
}

.priority-low {
    width: 15px;
    height: 15px;
    background: #52d726;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

.priority-normal {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 16px solid #ffdd49;
}

.file-field .btn, .file-field .btn-large {
    height: 2.5rem;
    line-height: 2.5rem;
    margin-top: -5px;
    margin-left: 12px;
}

.CommentsKeyword {
    text-decoration: none;
    font-size: 14px;
    font-family: Calibri;
    color: #29131b;
    background: #ffedcd;
    border: 1px solid;
    padding-left: 6px;
    border-color: #e2aea8;
    display: inline-block;
    padding: 0px 0px 0px 5px;
    margin-bottom: 3px;
}

    .CommentsKeyword:hover {
        text-decoration: none;
        font-size: 14px;
        font-family: Calibri;
        color: #29131b;
        background: #ffffff;
        border: 1px solid;
        padding-left: 6px;
        border-color: #e2aea8;
        display: inline-block;
        padding: 0px 0px 0px 5px;
    }

.CommentsKeyword-Close {
    color: #29131b;
    background: #fbdfb5;
    border: 1px solid;
    border-color: #826532;
}

.innerTable .comment-in-grid tr:last-child {
    border-bottom: 1px solid #ededed !important;
}

.btn-primary-action {
    margin-left: 12px;
    padding: 0px 5px;
    letter-spacing: 1px;
    font-size: 13px;
    border-radius: 7px;
    position: relative;
    top: 0px;
}

.btn-primary-action-link {
    margin-left: 12px;
    padding: 0px 5px;
    letter-spacing: 1px;
    font-size: 13px;
    border-radius: 7px;
    position: relative;
    top: 0px;
}

.btn-primary-action-disabled {
    color: #000000;
    margin-left: 12px;
    padding: 0px 5px;
    letter-spacing: 1px;
    font-size: 13px;
    border-radius: 7px;
    position: relative;
    top: 0px;
    background: #a09f9f;
    border-color: #4d4d4d;
    cursor: default;
}

.btn-primary-action-disabled:hover {
    color: #000000;
    margin-left: 12px;
    padding: 0px 5px;
    letter-spacing: 1px;
    font-size: 13px;
    border-radius: 7px;
    position: relative;
    top: 0px;
    background: #a09f9f;
    border-color: #4d4d4d;
    cursor: default;
}

.error-message {
    font-size: 16px;
    color: #ff0000;
    font-weight: 600;
}

/*CSS treeview*/
.collapse_expand {
    /*display: inline-block;*/
    cursor: pointer;
    /*top: 14px;
    font-size: 18px;*/
    /*position: relative;*/
    /*left: -2px;*/
    color: #3187bf;
}

.treeview ul {
    font: 14px Arial;
    margin: 0px;
    padding-left: 20px;
    list-style: none;
}

.treeview > li > a {
    font-weight: bold;
}

.treeview li {
    padding: 2px;
    margin: 0px;
}

    /*.treeview li:nth-child(odd) {
        background: #ffffff;
    }

    .treeview li:nth-child(even) {
        background: #f9f9f9;
    }*/

    /*.treeview li:hover {
        background: #ececec;
    }*/


    .treeview li a {
        padding: 4px;
        display: inline-block;
        text-decoration: none;
        width: auto;
    }