/*
 * bootstrap-tagsinput v0.8.0
 * 
 */

/*
 * bootstrap-tagsinput v0.8.0
 * 
 */

/* Works on Chrome, Edge, and Safari */
.content-wrapper * {scrollbar-width: thin;scrollbar-color: #d6dee1 transparent;}
.content-wrapper *::-webkit-scrollbar {width: 20px;}
.content-wrapper *::-webkit-scrollbar-track {background-color: transparent;}
.content-wrapper *::-webkit-scrollbar-thumb {background-color: #d6dee1;border-radius: 20px;border: 6px solid transparent;background-clip: content-box;}
.content-wrapper *::-webkit-scrollbar-thumb:hover {background-color: #a8bbbf;}

.main-sidebar {
    height: 100vh !important;
}

.bootstrap-tagsinput {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    display: inline-block;
    padding: 4px 6px;
    color: #555;
    vertical-align: middle;
    border-radius: 4px;
    width: 100%;
    line-height: 22px;
    cursor: text;
}
.bootstrap-tagsinput input {
    border: none;
    box-shadow: none;
    outline: none;
    background-color: transparent;
    padding: 0 6px;
    margin: 0;
    width: auto;
    max-width: inherit;
}
.bootstrap-tagsinput.form-control input::-moz-placeholder {
    color: #777;
    opacity: 1;
}
.bootstrap-tagsinput.form-control input:-ms-input-placeholder {
    color: #777;
}
.bootstrap-tagsinput.form-control input::-webkit-input-placeholder {
    color: #777;
}
.bootstrap-tagsinput input:focus {
    border: none;
    box-shadow: none;
}
.bootstrap-tagsinput .badge {
    margin: 2px 0;
    padding:5px 8px;
}
.bootstrap-tagsinput .badge [data-role="remove"] {
    margin-left: 8px;
    cursor: pointer;
}
.bootstrap-tagsinput .badge [data-role="remove"]:after {
    content: "x";
    padding: 0px 6px 1px;
    background-color:rgba(0, 0, 0, 0.1);
    border-radius:50%;
    font-size:12px;
    vertical-align: 1px;
}
.bootstrap-tagsinput .badge [data-role="remove"]:hover:after {
    background-color:rgba(0, 0, 0, 0.62);
}
.bootstrap-tagsinput .badge [data-role="remove"]:hover:active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.tt-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
    cursor: pointer;
}
.tt-suggestion {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333333;
    white-space: nowrap;
}
.tt-suggestion:hover,
.tt-suggestion:focus {
    color: #ffffff;
    text-decoration: none;
    outline: 0;
    background-color: #428bca;
}


/*
 * bootstrap-tagsinput v0.8.0 ends
 * 
 */


tr.hide-table-padding td {
    padding: 0;
    background: #efefef;
}
.expand-button {
    position: relative;
}
.accordion-toggle {
    cursor: pointer;
}
.accordion-toggle .expand-button:after {
    position: absolute;
    left:.75rem;
    top: 50%;
    transform: translate(0, -50%);
    content: '-';
}
.accordion-toggle.collapsed .expand-button:after {
    content: '+';
}

#loader{width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;background: rgba(0,0,0,0.7);z-index: 11111;display: none;}
#loader > .spinner{left: calc(50% - 22px);position: relative;top: calc(50% - 22px);color: #fff;}

.notify{box-sizing:border-box;left:10px;position:fixed;top:20px;width:350px}
.notify-top-center{left:calc(50% - 175px);z-index: 1111112 !important;}

.form-control.error {width: 100%;border-color: #f42121;font-size: 14px;}
.input-group.date .form-control.error,.input-group-prepend~.form-control.error {width: auto;}
label.error {color: #f42121 !important;font-size: 13px !important;position: relative;top: 4px;margin: 0;width: 100%;}
.custom-file-input.error~.custom-file-label {width: 100%;border-color: #f42121;font-size: inherit;}

.color-code {display: inline-block;vertical-align: middle;padding: 15px;margin-right: 10px;}

.trumbowyg-box {margin: 0px auto !important;}

.custom-file .custom-file-input.error~.custom-file-label {border-color: #f42121;}
.form-control.error~.select2.select2-container .select2-selection {border-color: #f42121;}
.fit-image{width: 100%;object-fit: cover;max-height: 33.33vw;}
.file-container {position: relative;}
.file-container:hover:before {content: "";width: calc(100% - 1.5rem);height: 100%;position: absolute;top: 0;left: .75rem;background: rgba(0,0,0,0.3);}
.file-container .remove {position: absolute;top: 0; right: .8rem;padding: 5px 8px;background: rgba(0,0,0,0.6);color: #fafafa;cursor: pointer;display: none;}
.file-container:hover .remove{display: initial;}

select option:disabled {background-color: #dfdfdf;}

.select2-container--default .select2-selection--single {height: calc(2.25rem + 2px) !important;border-color: #ced4da !important;}
.select2-container--default .select2-selection--single .select2-selection__rendered {padding-left: 0px !important;margin-top: -5px !important;}
.select2-container--default .select2-selection--single .select2-selection__arrow {top: 5px !important;}

.cursor-pointer{
    cursor: pointer;
}

#userDetails form .col-form-label {font-weight: 600;color: #444444;font-size: 14px;}

.custom-file-label{z-index: 2;}
.custom-file-label > span {max-width: calc(100% - 70px);display: inline-block;}
.input-group.date[disabled] {cursor: not-allowed;pointer-events: none;}

.select2-container--default .select2-selection--multiple .select2-selection__choice{color: #495057;}

.dataTable tr.cursor-pointer.shown {background: #f1f1f1;}
.date-list{}
.date-list > td {padding: 0;}
.date-list table tr:last-of-type {border-bottom: 1px solid #333;}
.date-list table th {padding: 10px;text-align: center;border: 1px solid #333 !important;border-bottom: 0 none !important;}
.date-list table td {padding: 15px 10px 10px;text-align: center;border: 1px solid #333 !important;height: 90px;width: calc(100% / 7);vertical-align: middle;}
.date-list table td.empty {cursor: not-allowed;}
.date-list table td.work-day {background-color: #fff;position: relative;}
.date-list table td.work-day.action-container {padding-bottom: 30px;}
.date-list table td.work-day.correction {padding-bottom: 30px;}
.date-list table td.work-day .date {position: absolute;right: 3px;top: 3px;font-size: 12px;font-weight: 600;background-color: #34A853;color: #fff;padding: 4px 0;border-radius: 50%;width: 28px;text-align: center;}
.date-list table td.work-day.error .date,.date-list table td.work-day.abnormal .date {background-color: #EA4335;}
.date-list table td.work-day.action-container .actions {position: absolute;bottom: 5px;}
.date-list table td.work-day.holiday .date {background-color: #4285F4;}
.date-list table td.work-day.abnormal .date {background-color: #FBBC05;}
.date-list table td.work-day .time > label {font-weight: 400;font-size: 12px;color: #565656;display: block;text-align: left;margin: 0;}
.date-list table td.work-day .time > span {font-weight: 600;font-size: 12px;color: #5a5a5a;display: block;text-align: left;margin-bottom: 5px;}
.date-list table td.work-day .block-label-full {color: #3a3a3a;}
.date-list table td.work-day .note {font-size: 12px;text-align: left;margin-top: 5px;margin-bottom: 0;}

.content-header h1 {font-size: 22px;}
table.table-bordered.dataTable th,table.table-bordered.dataTable tbody td {font-size: 14px;}
h6,.form-control,.col-form-label,.select2-container--default .select2-selection--single {font-size: 14px;}
.custom-file-label{font-size: 15px;}
.page-item .page-link,div.dataTables_wrapper div.dataTables_info {font-size: 14px;}
div.dataTables_wrapper div.dataTables_info{padding-top: 0.65em;}
.page-link:focus {box-shadow: none;}

.salary {overflow: hidden;}
.salary table tr th,.salary table tr td {text-align: center;vertical-align: middle;}
.salary table {position: relative;}
.salary table tr > th,.salary table tr > td{min-width: 55px;padding: 6px;}
.salary table tr > td {padding: 3px 6px;}
.salary table tr > th {padding-right: 6px !important;}
.salary table tr > th:first-of-type,.salary table tr > td:first-of-type{width: 30px !important;min-width: 30px;padding: 6px;padding-right: 6px !important;background: #f1f1f1;}
.salary table tr > th.actions,.salary table tr > td.actions{width: 46px !important;min-width: 46px;padding: 6px;padding-right: 6px !important;background: #f1f1f1;}
.salary table tr > th.fixed-column-header{min-width: 160px;background: #f1f1f1;}
.salary table tr > th.fixed-column-first{min-width: 55px;background: #f1f1f1;}
.salary table tr > th.fixed-column-second{min-width: 105px;background: #f1f1f1;}
.salary .DTFC_LeftBodyWrapper {border-right: 1px solid #dee2e6;background: #f1f1f1;}
.salary .DTFC_LeftBodyWrapper table.DTFC_Cloned tr {background: #f1f1f1;}
.salary .DTFC_LeftBodyWrapper .DTFC_LeftBodyLiner {overflow: hidden;}
.salary .DTFC_LeftBodyWrapper .DTFC_LeftBodyLiner tr td:last-of-type {border-right: 0;}
.salary #dataTable input.edit {border: 0 none;border-bottom: 1px solid #999;text-align: center;min-width: 55px;padding: 5px 0;background: transparent;}
.salary #dataTable input.edit.error {border-bottom-color: #f42121;}
.salary table tr.dirty {background: #ffe1e4;}
.salary table tr.selected {background: #afd5ff;}
.salary table tr.locked td:not(:first-of-type) input,.salary #dataTable input.non-editable {pointer-events: none !important;border: 0 none !important;}

/*column colors*/
.salary table tr > .standard{background: #8EA9DB;}
.salary table tr > .attendance{background: #ffd966;}
.salary table tr > .earnings{background: #9BC2E6;}
.salary table tr > .deductions{background: #F4B084;}
.salary table tr > .netpayable{background: #C6E0B4;}
.salary table tr > .yearlypayable{background: #FFC000;}
.salary table tr > .remark{background: #DDEBF7;}

.salary .custom-update-buttons {position: absolute; top: 15px;z-index: 2;}

.home-container .data{background-color: #fff;border-radius: 8px;margin-top: 20px;padding: 15px;position: relative;padding-left: 115px;text-transform: uppercase;}
.home-container .data .photo{width: 80px;height: 80px;position: absolute;left: 16px;top: 14px;border-radius: 45px;overflow: hidden;}
.home-container .data h3{font-size: 17px;font-weight: 500;}
.home-container .data p{font-size: 15px;color: #999;line-height: 22px;margin: 0px;padding: 0px 0px 5px 0px;}
.home-container .data span{font-size: 14px;color: #0c92b5;text-transform: uppercase;font-weight: 600;}

.punch-time{font-size: 14px;}
.punch-time .emp-name{font-size: 14px;overflow: hidden;width: 200px;height: 25px;font-weight: bold;padding-bottom: 4px;}
.punch-time .box{width: 220px;}
.punch-time .box div.img-container{width: 220px;height: 280px;overflow: hidden;justify-content: center;display: flex;}
.punch-time .box img{height: 290px;transform: rotateY(180deg);}
.punch-time .box div.time{border: 1px solid #dee2e6;background-color: #fff;padding: 5px 0px;text-align: center;font-size: 14px;margin-bottom: 5px;}
.punch-time .box .time p{margin: 0px;font-size: 13px;}

.tc header{background-color: #FFF;padding: 25px 0px;text-align: center;}
.tc .description{background-color: #F5F5F5;color: #333;}
.tc .description div{width: 998px;margin: 0px auto;padding: 30px 0px;}
.tc .description h5{color: #000;}



.blocks-container {padding: 0;display: block;}
.blocks-container .block-tabs {float: left;border: 1px solid #ccc;background-color: #f1f1f1;width: 140px;padding: 0;margin: 0;display: table-cell;}
.blocks-container .block-tabs .tab-link {display: block;background-color: inherit;color: black;padding: 10px 5px;width: 100%;max-width: 140px;border: none;outline: none;text-align: left;cursor: pointer;position: relative;}
.blocks-container .block-tabs .tab-link > a {color: #333;max-width: 140px;display: block;font-size: 14px;}
.blocks-container .block-tabs .tab-link .block-actions {position: absolute;top: calc(50% - 8px);right: 5px;font-size: 11px;display: none;}
.blocks-container .block-tabs .tab-link:hover{background-color: #ddd;}
.blocks-container .block-tabs .tab-link.active {background-color: #ccc;padding-right: 35px;}
.blocks-container .block-tabs .tab-link.active .block-actions {display: initial;}
.blocks-container .tab-contents {display: none;float: left;padding: 0px 15px;border: 1px solid #ccc;width: calc(100% - 140px);border-left: none;min-height: 300px;}
.blocks-container .tab-contents.active {display: initial;}

.blocks-container .block-groups-container {margin: 15px 0 0;border-radius: 4px;}
.blocks-container .block-groups-container .block-group {background-color: #efefef;margin-bottom: 15px;}
.blocks-container .block-groups-container .block-group .group-details {padding: 5px 10px 0;font-size: 16px;cursor: move;}
.blocks-container .block-groups-container .block-group .group-details .group-name {width: fit-content;padding: 0 10px;text-align: justify;}
.blocks-container .block-groups-container .block-group .group-details .group-actions {text-align: right;}
.blocks-container .block-groups-container .block-group .block-unit {padding: 15px 25px;border: 1px dashed #bfbfbf;cursor: move;position: relative;}
.blocks-container .block-groups-container .block-group .block-unit .unit-action {position: absolute;right: 5px;top: 4px;font-size: 12px;display: flex;flex-direction: column};
/*.blocks-container .block-groups-container .block-group .block-unit:not(:last-of-type),
.blocks-container .block-groups-container .block-group .block-unit:not(:nth-of-type(4n)){border-right: 0 none;}*/

#parkingDesign .blocks-container .block-groups-container .block-group .block-unit {padding: 20px 10px 5px;flex: 0 0 10%;max-width: 10%;}
.blocks-container .block-groups-container .block-group .block-unit .unit-type {position: absolute;left: 5px;top: 2px;font-size: 10px;}
#parkingDesign .blocks-container .block-groups-container .block-group .block-unit .unit-action {top: 2px;}
.blocks-container .block-groups-container .block-group .block-unit .unit-action > :nth-child(2) { display: block; writing-mode: vertical-rl; margin-top: 5px; }
.blocks-container .block-groups-container .block-group .block-unit { padding: 15px 25px; border: 1px dashed #bfbfbf; cursor: move; position: relative; display: flex; flex-direction: column; justify-content: space-between;
}