.rightBtn {
    float: right;
    margin-bottom: 15px;
    margin-right: 15px;
}

.open>.dropdown-menu {
    max-height: 450px;
    overflow-y: auto;
}

.main-header .logo,
.main-header .logo>a {
    height: 60px;
}

.main-header .logo:hover,
.main-header .logo>a:hover {
    background-color: #11baba;
}

.main-sidebar,
.left-side {
    padding-top: 60px;
}

.main-header .logo>img,
.main-header .logo>a>img {
    height: 60px;
}

.sidebar-menu {
    overflow: visible;
}

.sidebar-menu>li {
    border-bottom: 1px solid #3B3B3B;
}

.sidebar-menu>li>a {
    font-weight: 900;
    font-size: 14px;
    text-transform: uppercase;
    padding: 20px 10px;
    border: 0;
}

.sidebar-menu>li:hover>a,
.sidebar-menu>li.active>a {
    text-decoration: none;
}

.sidebar-menu>li.active>a:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    right: -10px;
    top: 50%;
    margin-top: -10px;
    border-style: solid;
    border-width: 10px 0 10px 11px;
    border-color: transparent transparent transparent #1e282c;
}

nav.actions {
    margin-bottom: 20px;
}

nav.actions>ul {
    list-style: none;
    padding: 0;
}

nav.actions>ul>li {
    float: none;
    display: inline-block;
}

nav.actions>ul>li>a {
    font-size: 16px;
    text-transform: uppercase;
}

.scroll tbody {
    height: 550px;
    overflow-y: auto;
    overflow-x: hidden;
}

.scroll tbody,
.scroll thead {
    display: block;
}

.scroll tbody td:last-child,
.scroll thead th:last-child {
    border-right: none;
}

.nav-tabs-custom>.nav-tabs>li:first-of-type.active>a {
    font-weight: 900;
}

.nav-tabs-custom>.nav-tabs>li.active {
    margin-right: 0;
}

.table>thead:first-child>tr:first-child>td,
.table>thead:first-child>tr:first-child>th {
    border-top: 1px solid #e1e1e1;
}

table.table>thead>tr>th {
    background: #EDF0F0;
    color: #333;
}

table.table>thead>tr>th>a {
    color: #333;
}

table.table>tbody>tr>td.actions {
    background-color: transparent;
    border: 0;
}

table.table>tbody>tr>td.actions>.dropdown {
    display: inline-block;
}

table.table>tbody>tr>td.actions>.dropdown>button {
    background: transparent;
    border: 0;
    font-size: 20px;
}

table.table>tbody>tr>td.actions>.dropdown>.dropdown-menu {
    right: 0;
    left: auto;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

table.table-bordered {
    border: 0;
}

table.table-bordered.dataTable {
    border-collapse: collapse;
}

table.table-bordered>thead>tr>th,
table.table-bordered>tbody>tr>td {
    border: 1px solid #e1e1e1;
}

.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
    padding: 5px;
}

.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>th {
    background-color: #333;
    color: #fff;
}

.checkbox input[type="checkbox"].no-text {
    position: relative;
    margin: 0;
}

h1 {
    font-size: 2px !important;
    visibility: hidden !important;
    padding: 0px !important;
}

form>h1 {
    font-size: 28px;
    text-transform: uppercase;
    margin: 0 0 30px 0;
}

.timeline {
    background-color: #EEEEEE;
    border-top: 2px solid #FFF;
    border-bottom: 4px solid #DDDDDD;
    height: 20px;
    margin-bottom: 40px;
    padding: 0;
    position: relative;
}

.timeline:before {
    content: none;
}

.timeline>.stamp {
    position: absolute;
    top: 20px;
    font-size: 12px;
    line-height: 12px;
    z-index: 1;
}


.timeline>.stamp-text {
    position: absolute;
    top: 20px;
    font-size: 12px;
    line-height: 12px;
    z-index: 1;
}

.timeline>.stamp:before {
    content: '';
    width: 1px;
    height: 40px;
    border-left: 2px dotted #333;
    position: absolute;
    top: -20px;
}

.timeline>.work-shift.stamp:before {
    border-left: 2px dashed #333;
}

.timeline>.attendance.stamp {
    top: -15px;
}

.timeline>.attendance.stamp:before {
    border-left: 2px solid #333;
    top: -10px;
}

.timeline>.range {
    position: absolute;
    height: 20px;
    top: -2px;
}

.timeline>.range.work-shift {
    background-color: #fdfd96;
    border-top: 2px solid #FFF;
    border-bottom: 4px solid #fcfc75;
}

.timeline>.range.break {
    background-color: #44f;
    border-top: 2px solid #FFF;
    border-bottom: 4px solid #22f;
}

.timeline>.authorization.less {}

.timeline>.authorization.more {}

.status {
    width: 20px;
    height: 20px;
    border-radius: 50px;
    /*position: absolute;*/
}

.status.ok {
    background-color: #77dd77;
}

.status.error {
    background-color: #ff6961;
}

.status.error>.inconsistencies {
    background: #ddd;
    position: absolute;
    width: 600px;
    z-index: 2;
    padding: 10px;
    font-size: 12px;
    line-height: 14px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
}

.status.error:hover>.inconsistencies {
    visibility: visible;
    opacity: 1;
}


/*** BUTTONS ***/

a.btn.btn-add-entity,
a.btn.btn-warning-circle,
span.btn.btn-add-entity,
span.btn.btn-warning-circle {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    color: #fff;
    font-size: 14px;
    line-height: 28px;
    text-align: center;
    padding: 0;
}

a.btn.btn-warning-circle-s,
span.btn.btn-warning-circle-s {
    width: 20px;
    height: 20px;
    border-radius: 30px;
    color: #fff;
    font-size: 11px;
    line-height: 20px;
    text-align: center;
    padding: 0;
}

a.btn.btn-warning-circle,
a.btn.btn-warning-circle-s,
span.btn.btn-warning-circle,
span.btn.btn-warning-circle-s {
    background-color: #f39c12;
}

a.btn.btn-add-entity,
span.btn.btn-add-entity {
    background-color: #11baba;
}

a.btn.btn-add-entity-xs,
span.btn.btn-add-entity-xs {
    width: 19px;
    height: 20px;
    border-radius: 30px;
    color: #fff;
    font-size: 10px;
    line-height: 20px;
    text-align: center;
    padding: 0;
    background-color: #11baba;
}

a.btn.btn-add-entity-xxs,
span.btn.btn-add-entity-xxs {
    width: 19px;
    height: 20px;
    border-radius: 30px;
    color: #fff;
    font-size: 11px;
    line-height: 20px;
    text-align: center;
    padding: 0;
    background-color: #11baba;
}


/*** pepepepe ***/

.profile-user-img {
    margin: 24px auto;
    width: 250px !important;
    border-radius: 50%;
    border: none;
}

.company-img {
    margin: 24px auto;
    width: 150px !important;
    padding: 3px;
    border: 3px solid #d2d6de;
}

.dashboard-img {
    margin: 24px auto;
    padding: 3px;
    width: 200px !important;
    border: 3px solid #d2d6de;
}

.profile-user-data {
    padding: 40px 0px;
}

.form-control.readonly {
    background-color: #eee;
}

.form-control:focus {
    border-color: #11BABA !important;
}


/*** EMPLOYEE HEADER ***/

.employee .employee-name {
    font-size: 25px;
    line-height: 25px;
    margin-bottom: 15px;
}

.employee .panel-body {
    padding: 0;
}

.employee .odd,
.employee .even {
    padding: 10px;
    border-bottom: 1px solid;
}

.employee .odd {
    background-color: #f7f7f7;
}

.panel-heading-body>a {
    position: relative;
    display: block;
    color: #333;
}

.panel-heading-body>a>.arrow {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 70px;
    margin-right: 15px;
}

.panel-heading-body>a>.arrow:before {
    content: "\f107";
    font-family: FontAwesome;
}

.panel-heading-body>a.collapsed>.arrow:before {
    content: "\f104";
}

.v-employee-name {
    margin-top: unset;
}

.v-chevron {
    font-size: 75px;
    cursor: pointer;
}

.v-chevron:hover {
    opacity: .7;
}

.date {
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 14px;
}


/*** RADIO GROUP ***/

.btn-group,
.btn-group-vertical {
    display: block;
}

.btn-group-vertical>.btn,
.btn-group>.btn {
    float: none;
    display: inline-block;
    margin: 0;
    width: auto;
}

.btn-group>.btn {}

.btn-group>.btn.active {}

select {
    height: 30px;
    margin-right: 5px;
}

.observations>.alert {
    padding: 2px 4px;
    margin: 0;
    line-height: 14px;
}

.container {
    width: 100% !important;
}

.status {
    font-family: FontAwesome;
}

.status.true:before {
    content: "\f00c";
}

.status.false:before {
    content: "\f00d";
}

label {
    margin-right: 10px;
}

.dashboard-header h3 {
    margin-top: 10px !important;
    margin-bottom: 5px !important;
    font-size: 18px;
    margin: 0;
    line-height: 1;
}

.attendaces-img img {
    cursor: zoom-in;
}

.poke-img>img {
    cursor: zoom-in;
}

#poke-image {
    width: 100%;
}

.error-message {
    color: red;
}

.disabled {
    background: red;
    color: white;
    padding: 0;
    /* font-size: 12px; */
    text-align: center;
}

.enabled {
    background: green;
    color: white;
    padding: 0;
    font-size: 12px;
    text-align: center;
}

.no-require-attended {
    background: rgb(170, 170, 170);
    color: white;
    padding: 0;
    /* font-size: 12px; */
    text-align: center;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    margin: auto;
}


.navbar-nav>.notifications-menu>.dropdown-menu,
.navbar-nav>.messages-menu>.dropdown-menu,
.navbar-nav>.tasks-menu>.dropdown-menu {
    width: 550px;
}

.navbar-nav>.notifications-menu>.dropdown-menu>li .menu>li {
    padding: 5px;
    border-bottom: 1px solid;
}

.progress-bar.progress-bar-primary.progress-bar-striped {
    background-color: #11baba;
}

.navbar-nav>.user-menu>.dropdown-menu>li.user-header {
    height: auto;
}

.navbar-custom-menu>.navbar-nav>li>.dropdown-menu {
    right: 0px;
}

a.dropdown-toggle:hover {
    background: transparent !important;
}

img.user-image {
    width: 35px !important;
    height: 35px !important;
}

a#messages-notification {
    margin-top: 5px;
}

.fa-22px {
    font-size: 22px !important;
}

.fa-30px {
    font-size: 30px !important;
}

.fa-20px {
    font-size: 20px !important;
    margin-right: 15px;
}

span.label.label-warning {
    right: 9px !important;
}

.ul-alerts {
    margin-top: 2px !important;
}

.ul-user {
    margin-top: 13px !important;
    margin-right: 15px !important;
}

ul.dropdown-menu {
    width: 400px !important;
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    border-color: rgba(0, 0, 0, .2);
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.caret {
    border-color: #fff;
    border-style: dashed dashed solid;
    border-width: 0px 8.5px 11.5px;
    position: absolute;
    top: -11px;
    right: 17px;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid\9;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

li.user-header,
li.user-footer {
    background-color: #fff !important;
    /*border: 1px solid #ccc;
    border-color: rgba(0,0,0,.2);*/
}

li.user-header {
    border-bottom: 1px solid #ccc;
}

.p-header {
    text-align: left;
    font-weight: bold;
    color: #000;
    margin-bottom: 0px;
}

.p-header-email {
    text-align: left;
    margin-bottom: 0px;
    margin-bottom: 10px;
}

.btn-header {
    background-color: #11baba !important;
    color: #fff;
    font-weight: bold;
}

.btn-header:hover {
    color: #fff;
}

.btn-header>i {
    margin-right: 5px;
}

.sidebar {
    padding-top: 20px;
    padding-bottom: 70px;
}

.catalog-tabs {
    text-align: center;
    min-width: 110px;
}

ul.nav.nav-tabs {
    background-color: #F5F7F7;
    border: 1px solid #DDD;
    border-bottom: unset;
}

li.treeview.catalog-tabs {
    height: 100%;
    border-right: 1px solid #DDD;
    margin: 0px;
}

li.treeview.catalog-tabs.active {
    box-shadow: 3px 3px 5px rgba(0, 0, 0, .1);
    transition: all 200ms linear;
}

.tab-content {
    border: 1px solid #DDD;
    border-top: none;
}

li.active>a>.fa {
    color: #11baba;
    font-size: 18px;
}

.breadcrumb {
    background-color: #fff;
    border-bottom: 1px solid #CED7D7;
}

.tab-content {
    background-color: #fff;
    border: 1px solid #DDD;
    border-top: none;
    float: left;
    width: 100%;
    position: relative;
    padding-bottom: 20px;
}

.breadcrumb>li+li:before {
    content: "";
}

.btn {
    width: 110px;
    height: 40px;
    font-weight: 600;
    font-size: 16px;
}

.btn-small {
    width: 100px;
    height: 30px;
    font-weight: 400;
    font-size: 13px;
}

.btn-geo-fencing {
    width: 30px;
    height: 30px;
    font-weight: 400;
    font-size: 18px;
    background-color: Transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    color: #11baba;
}

.btn-check-true {
    width: 30px;
    height: 30px;
    font-weight: 400;
    font-size: 14px;
    background-color: Transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    color: #77dd77;
}

.btn-check-false {
    width: 30px;
    height: 30px;
    font-weight: 400;
    font-size: 14px;
    background-color: Transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    color: #E11E26;
}

.input-time {
    width: 90px;
}

.input-number {
    width: 80px;
}

.btn-confirm {
    background-color: #11baba;
    color: #fff;
}

.btn-cancel:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 1);
}

.btn-confirm:hover {
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 1);
}

.btn.btn-default:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 1);
}

input[type=radio] {
    margin-right: 4px;
}

td {
    vertical-align: middle !important;
}

#image-emp {
    width: 50px;
}

status {
    width: 100%;
    height: 100%;
    position: static;
    text-align: center;
}

.enabled,
.disabled {
    border-radius: 50%;
    height: 15px;
    width: 15px;
    margin: auto;
}

.modal-title {
    color: #11baba;
}

.box.box-default {
    border-top-color: #11baba;
}

.profile-stats-data {
    text-align: center;
    margin-top: 10px;
}

.devices-count-info {
    text-align: center;
}

.devices-count {
    font-size: 36px;
}

.progress-bar {
    color: #000 !important;
}

.license-progress-bar {
    margin-top: 5px;
}

.license-progress-bar .progress {
    margin-bottom: 5px;
}

.login-page {
    background-image: url("../img/body-bckg-1.png");
    background-color: #cccccc;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.login-box-body {
    background: transparent !important;
}

.login-box-body>a {
    color: #000;
}

.btn-login {
    width: 100%;
    height: 40px;
    padding: 6px 12px;
    border-radius: 20px;
    background-color: #11baba;
    border-color: transparent;
    color: white;
    font-weight: bold;
    font-size: 15px;
}

.btn-personal {
    height: 40px;
    padding: 9px 12px;
    border-radius: 20px;
    background-color: #11baba;
    border-color: transparent;
    color: white;
    font-weight: bold;
    font-size: 15px;
}

.btn-login:hover,
.btn-personal:hover {
    background-color: #106969;
    color: white;
}

.login-box-body>input {
    border-radius: 20px;
}

.login {
    border-radius: 20px;
    height: 40px;
}

.login-subtitle {
    margin-top: unset;
    color: #ffffff;
}

.login-options {
    display: grid;
    color: #ffffff;
    border-top: 1px solid;
    margin-top: 10px;
}

.login-options>a {
    color: #ffffff;
    margin: 15px 0px 0px 0px;
}

.btn-auth {
    width: auto;
    height: auto;
    font-size: 14px;
    margin-bottom: 5px;
}

.warning-unresolved2 {
    color: red;
}

.warning-unresolved .inconsistency {
    color: red;
}

.warning-unresolved {
    margin-top: 5px;
}

.warning-unresolved p {
    margin-bottom: unset;
}

.warning-unresolved a:hover {
    text-decoration: underline !important;
}

.warning-unresolved i {
    margin-right: 5px;
}

th {
    text-align: center;
    vertical-align: middle !important;
}

.panel-heading-body a {
    color: #333 !important;
}

.alerts-icon {
    vertical-align: middle;
    text-align: center;
    margin-top: 10px;
    background: #f39c12;
    width: 45px;
    border-radius: 50%;
    padding: 6px;
    color: white;
}

.alerts-row {
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 2px;
    padding: 15px;
    /*background: #e5e6e8;*/
    border-top: 2px solid #d2d6de;
}

.header-alerts {
    font-weight: bold;
    padding: 10px;
    border-bottom: 1px solid #d2d6de;
}

.footer-alerts {
    background: #e5e6e8;
    padding: 5px;
    text-align: center;
}

.footer-alerts>a {
    color: black !important;
}


/* MOBILE */

.navbar-mobile {
    display: flex;
}

.navbar-bars {
    margin-top: 10px;
}

.navbar-logo {
    margin-left: auto;
}

@media (max-width: 374px) {
    .navbar-logo {
        margin-top: 10px;
    }

    .navbar-logo>img {
        height: 45px;
    }
}

.navbar-elements {
    margin-left: auto;
}

.user-image-mobile {
    margin-top: 0px !important;
}

.exit-mobile {
    width: 100%;
}

.exit-mobile>a {
    background-color: #F4F4F4 !important;
    width: 100%;
}

@media (max-width: 991px) {
    ul.dropdown-menu {
        width: unset !important;
        margin-left: 15px;
        min-width: 250px !important;
    }
}

@media (max-width: 767px) {
    .logo {
        width: unset !important;
    }
}

a:hover,
a:active {
    text-decoration: unset !important;
}

.messages-mobile {
    margin-right: 75px !important;
}

.tabs-grid {
    display: grid;
}

.tabs-grid>div>ul {
    list-style-type: none;
    padding-left: unset;
}

.tabs-grid>h3 {
    font-size: 20px !important;
    margin: 0px !important;
    border: 1px solid #dddddd;
    border-radius: 3px 3px 0px 0px;
}

.tabs-grid>h3>i {
    float: right;
}

.tabs-grid>div>ul>a>li {
    margin: 2px;
    padding: 5px;
    box-shadow: 3px 3px 20px rgba(0, 0, 0, .1) !important;
}

.tabs-grid>div>ul>a>li.active>i {
    color: #11BABA !important;
}

.box-center {
    width: 30%;
    margin-left: auto;
    margin-right: auto;
}

.image-size {
    width: 300px !important;
    height: 300px !important;
}

.night-hours {
    border: 1px solid #DCDCDC;
    border-radius: 1%;
    padding: 10px;
}

.filter-format {
    font-weight: normal;
}

.circle-check {
    color: #00B255;
}

.circle-uncheck {
    color: #E13B33;
}

.box-company-center {
    width: 50%;
    margin-right: auto;
    margin-left: auto;
}

.m-1 {
    margin: 15px;
}

.btn-bin {
    width: 49% !important;
    height: 34px !important;
}

.btn-tri {
    width: 32% !important;
    height: 34px !important;
}

.company-hr {
    margin-top: 10px;
    margin-bottom: 2px;
}

.btn-clock,
.btn-clock:active,
.btn-clock:hover,
.btn-clock:not(:hover) {
    color: #FFFFFF;
    background-color: #11BABA;
    border-color: #11BABA;
}

.btn-clock:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 1);
}

.btn-clock-classic,
.btn-clock-classic:active,
.btn-clock-classic:hover,
.btn-clock-classic:not(:hover) {
    color: #FFFFFF;
    background-color: #11BABA;
    border-color: #11BABA;
    width: unset;
}

.btn-clock-classic:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 1);
}

.btn-gns,
.btn-gns,
.btn-gns:active,
.btn-gns:hover,
.btn-gns:not(:hover) {
    color: #FFFFFF;
    background-color: #E11E26;
    border-color: #E11E26;
    width: unset;
}

.btn-gns:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 1);
}

.btn-gns>i {
    margin-left: 10px;
}

.btn-upgrade,
.total-input {
    width: 100%;
}

@media (min-width: 768px) {
    .pull-right {
        float: right !important;
    }
}

@media (min-width: 768px) {
    .pull-left {
        float: left !important;
    }
}

.btn-minus {
    width: unset;
    height: unset;
}

.box-title-dashboard,
.box-title-dashboard>a {
    color: #000000 !important;
}

.datatable-actions {
    background: transparent !important;
    border: unset !important;
}

.absences-total>td,
.absences-sub-total>td,
.absences-grand-total>td {
    font-weight: 700;
}

.absences-sub-total>td:not(:last-child),
.absences-sub-total>td:not(:last-child):hover {
    background-color: #EDF0F0 !important;
}

.absences-grand-total>td:not(:last-child),
.absences-grand-total>td:not(:last-child):hover {
    background-color: #11BABA !important;
    color: #FFFFFF;
}

.absences-sub-total>td:hover,
.absences-grand-total>td:hover {
    opacity: .9;
}

.attendances-total {
    font-weight: 700;
}

.attendances-inconsistencies,
.attendances-inconsistencies a {
    color: #ef8181;
}

.attendances-normal a:hover,
.attendances-inconsistencies a:hover {
    text-decoration: underline !important;
}

.attendances-grand-total {
    background-color: #11BABA !important;
    color: #FFFFFF;
    font-weight: 700;
}

.attendances-grand-total-without-cc {
    background-color: #cccccc !important;
    color: #FFFFFF;
    font-weight: 600;
}

.settings-date {
    margin-left: 10px;
}

.radio-button-clock,
.radio-button-clock-sm {
    height: 34px;
    font-size: 14px;
}

.radio-button-clock {
    width: 48% !important;
}

.radio-button-clock-sm {
    width: 47% !important;
}

.break-icon {
    cursor: pointer;
}

.table-settings>thead>tr>th {
    background-color: #333333 !important;
    color: #FFFFFF !important;
}

.table-settings>tbody>tr>td {
    text-align: center;
}

#old-data {
    margin-top: 50px;
    padding: 5px;
}

.disabled-events {
    pointer-events: none;
}

.disabled-events>label {
    color: #414141 !important;
    background-color: #DDDDDD !important;
    border-color: #DDDDDD !important;
}

.warning-message {
    margin-left: 5px;
    cursor: pointer;
    color: rgb(243, 156, 18);
}

.title-info {
    cursor: pointer;
}

.btn-excel {
    float: right;
    margin-left: 10px;
}

.btn-excel>i {
    margin-right: 10px;
}

.style-tutorial {
    background: linear-gradient(#11baba, #11baba, #035253);
    color: white;
}

.tutorial {
    margin-top: 10px;
}

.btn-tutorial {
    cursor: pointer;
    width: unset !important;
    margin-left: 10px;
    border-radius: 999rem;
}

.btn-tutorial:hover {
    box-shadow: 0 2px 4px rgb(255, 255, 255);
}

.btn-tutorial>i {
    margin-left: 10px;
}

.icon-link>i {
    margin-right: 5px;
}

.select2 {
    width: 100% !important;
}

.map-trash-parent {
    margin-top: 25px;
}

.attendance-warning {
    background-color: #ef8181;
    color: #ffffff;
}

.attendance-warning:hover,
.attendance-warning:active {
    background-color: #f16f6f !important;
}

.live-attendances {
    font-size: 16px;
    margin-left: 5px;
    vertical-align: middle;
    -webkit-animation: la-color-animation 1s infinite alternate;
    -moz-animation: la-color-animation 1s infinite alternate;
    -ms-animation: la-color-animation 1s infinite alternate;
    -o-animation: la-color-animation 1s infinite alternate;
    animation: la-color-animation 1s infinite alternate;
}

@keyframes la-color-animation {
    from {
        color: #e1e1e1;
    }

    to {
        color: #11baba;
    }
}

.live-count {
    -webkit-animation: lc-color-animation 1s infinite alternate;
    -moz-animation: lc-color-animation 1s infinite alternate;
    -ms-animation: lc-color-animation 1s infinite alternate;
    -o-animation: lc-color-animation 1s infinite alternate;
    animation: lc-color-animation 1s infinite alternate;
}

@keyframes lc-color-animation {
    from {
        color: #d2d6de;
    }

    to {
        color: rgba(0, 0, 0, 0.1);
    }
}

.animation-icon {
    animation-name: spin;
    animation-duration: 500ms;
    animation-direction: reverse;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.pepepe-animation {
    animation-name: spin;
    animation-duration: 750ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.live-title>span:not(:first-child)::before {
    content: '|';
    padding-right: 7px;
}

.live-navtop {
    width: 100% !important;
}

.live-navtop .sidebar-toggle {
    padding: 5px 0px;
    color: #ffffff;
}

@media (min-width: 768px) {
    .live-time>h1 {
        float: right;
    }

    .live-navtop {
        margin-bottom: 20px;
    }
}

.nav-tabs-scroll {
    width: 100%;
    white-space: nowrap;
    overflow-x: scroll;
}

.nav-tabs-scroll>li {
    display: inline-block;
    float: unset;
    zoom: 1;
}

.nav-tabs-scroll::-webkit-scrollbar {
    height: 5px;
    background-color: white;
    border-left: 1px solid #ddd;
}

.nav-tabs-scroll::-webkit-scrollbar-thumb {
    background-color: #d2d6de;
}

.alert-clock {
    color: #fff !important;
    background-color: #11baba;
    border-color: #11baba;
}


/* ATTENDANCES RECORDS */

.conteiner-attendances-records {
    display: grid;
    grid-template-columns: 100%;
    padding-left: 5px;
}

.btn-more-time-line {
    background-color: transparent;
    border: none;
    font-size: 50px;
}

.box-records .box-header {
    padding-top: 25px;
}

.box-records .box-body {
    padding: unset;
}

.box-records .box-body .odd,
.box-records .box-body .even {
    padding: 15px;
}

.box-records .box-body .odd:not(:last-child),
.box-records .box-body .even:not(:last-child) {
    border-bottom: 1px solid;
}

.box-body .odd {
    background-color: #f7f7f7;
}

.box-records .table-bordered>tbody label {
    margin-bottom: unset;
}

.box-records .table-bordered>tbody label:after {
    content: ':';
}


/* TIMELINE */

.records-timeline-header {
    font-weight: 700;
    margin-bottom: 50px;
    font-size: 14px;
    line-height: 14px;
}

.records-timeline-header>a>i {
    margin-right: 5px;
}

.records-timeline {
    position: relative;
    height: 30px;
    background-color: #eee;
    border-top: 2px solid transparent;
    border-bottom: 4px solid rgb(114, 114, 114);
    margin-bottom: 20px;
}

.records-timeline:before {
    content: none;
}

.records-timeline>.stamp-text {
    position: absolute;
    top: -50px;
    font-size: 12px;
    line-height: 12px;
    z-index: 1;
}

.records-timeline>.stamp {
    position: absolute;
    top: -20px;
    font-size: 12px;
    line-height: 12px;
    z-index: 1;
}

.records-timeline>.stamp:before {
    content: '';
    position: absolute;
    top: -15px;
    height: 50px;
    width: 1px;
    padding-right: 1px;
    border-left: 2px solid #333;
}

.records-timeline>.stamp_authorization {
    position: absolute;
    top: 30px;
    font-size: 12px;
    line-height: 12px;
    z-index: 1;
}

.records-timeline>.stamp_authorization:before {
    content: '';
    position: absolute;
    top: -15px;
    height: 25px;
    width: 1px;
    padding-right: 1px;
    border-left: 2px dotted #333;
}

.records-timeline>.stamp.stamp_cost_center:before {
    border-left: 2px dotted #333;
}

.records-timeline>.stamp.assumed:before {
    border-left: 2px solid #ddd;
}

.records-timeline>.stamp.authorization:before {
    top: 10px;
    border-left: 2px dotted #333;
}

.records-timeline>.stamp.work-shift,
.records-timeline>.stamp.break-work-shift {
    top: 25px;
}

.records-timeline>.stamp.work-shift:before,
.records-timeline>.stamp.break-work-shift:before {
    top: -25px;
    height: 40px;
    border-left: 2px dashed #333;
}

.records-timeline>.stamp.work-shift:first-child:before,
.records-timeline>.stamp.break-work-shift:first-child:before {
    top: -40px;
    height: 55px;
    border-left: 2px solid rgb(114, 114, 114);
    border-width: 3px;
}

.records-timeline>.stamp.work-shift:last-child:before,
.records-timeline>.stamp.break-work-shift:last-child:before {
    top: -40px;
    height: 55px;
    border-left: 2px solid rgb(114, 114, 114);
    border-width: 3px;
}

.records-timeline>.stamp:first-child {
    line-height: 45px;
    position: absolute;
}

.records-timeline>.stamp.range.work-shift {
    top: 0px;
    background-color: #fdfd96;
    border-bottom: 4px solid #fcfc75;
    border-top: 2px solid #fff;
    margin-top: -2px;
    margin-left: 2px;
    height: 20px;
}

.records-timeline>.stamp.range.break-work-shift {
    top: 0px;
    background-color: #44f;
    border-bottom: 4px solid #22f;
    border-top: 2px solid #fff;
    margin-top: -2px;
    margin-left: 2px;
    height: 20px;
}

.records-timeline>.stamp.range.work-shift:before,
.records-timeline>.stamp.range.break-work-shift:before {
    border-left: unset !important;
}


#ws-error {
    color: red;
}

#weekly-break-error {
    color: red;
}

.header-input {
    margin-top: 15px;
}

.text-overflow {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.box-grey {
    background: #f9f9f9;
}

.weekly-break-description {
    cursor: pointer;
}

.weekly-break-description>label {
    margin-bottom: unset;
}

.weekly-break-description>span {
    white-space: unset;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
}

.span-textarea {
    height: auto;
    word-break: break-word;
}

.tag-chevron {
    cursor: pointer;
    margin: 0 0 0 10px;
}

.export-list {
    padding: unset;
    margin: 0 2px;
}

.export-list .even {
    background: #ffffff;
    box-shadow: 16px 0px #ffffff, -14px 0px #ffffff;
}

.export-list .odd {
    background: #f7f7f7;
    box-shadow: 16px 0px #f7f7f7, -14px 0px #f7f7f7;
}

.export-list>.export-list-item {
    list-style-type: none;
}

.export-list>.export-list-item>div {
    border-top: 1px solid #ecf0f5;
    padding-top: 15px;
}

.export-list>.export-list-item-placeholder {
    list-style-type: none;
    background: #ecf0f5;
    border-bottom: 1px solid #ecf0f5;
    box-shadow: 16px 0px #ecf0f5, -15px 0px #ecf0f5;
    padding-top: 5px;
    height: 78px;
}

.export-list>.export-list-item-active>div {
    border: 1px solid;
}

.img-circle,
.img-circle-s,
.img-circle-m,
.img-circle-b {
    border-radius: 50%;
    background-color: #eeeeee;
    background-size: cover !important;
    background-position: center !important;
}

.img-circle-s {
    margin: 0px auto;
    width: 50px;
    height: 50px;
}

.img-circle-m {
    margin: 5px auto;
    width: 100px;
    height: 100px;
}

.img-circle-b {
    margin: 5px auto;
    width: 150px;
    height: 150px;
}

.img-circle {
    margin: 20px auto;
    width: 250px;
    height: 250px;
}

.img-zoom {
    cursor: zoom-in;
}

#img-zoom-src {
    width: 100%;
}

.percentage-number {
    font-size: 18px;
    font-weight: 700;
}

.scrollable-y {
    height: 600px;
    overflow-y: scroll;
    overflow-x: hidden;
}

#items {
    overflow-x: scroll;
    width: auto;
    white-space: nowrap;
}

.item {
    width: 200px;
    height: 150px;
    display: inline-block;
}

#clone-click {
    margin-left: 10px;
    cursor: pointer;
}

#clone-click:hover {
    opacity: .5;
}

.popover {
    max-width: 100%;
}

.ui-tooltip {
    /* tooltip container box */
    white-space: pre-line;
}

.imputation-message {
    color: #ef8181;
}

.nopadding-right {
    padding-right: 0;
}

.nopadding-left {
    padding-left: 0;
}

h2>span {
    font-size: 12pt;
}

.records-timeline>.stamp.range.work-shift:before,
.records-timeline>.stamp.range.break-work-shift:before {
    border-left: unset !important;
}

#ws-error {
    color: red;
}

#weekly-break-error {
    color: red;
}

.header-input {
    margin-top: 15px;
}

.text-overflow {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.box-grey {
    background: #f9f9f9;
}

.weekly-break-description {
    cursor: pointer;
}

.weekly-break-description>label {
    margin-bottom: unset;
}

.weekly-break-description>span {
    white-space: unset;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
}

.span-textarea {
    height: auto;
    word-break: break-word;
}

.tag-chevron {
    cursor: pointer;
    margin: 0 0 0 10px;
}

.export-list {
    padding: unset;
    margin: 0 2px;
}

.export-list .even {
    background: #ffffff;
    box-shadow: 16px 0px #ffffff, -14px 0px #ffffff;
}

.export-list .odd {
    background: #f7f7f7;
    box-shadow: 16px 0px #f7f7f7, -14px 0px #f7f7f7;
}

.export-list>.export-list-item {
    list-style-type: none;
}

.export-list>.export-list-item>div {
    border-top: 1px solid #ecf0f5;
    padding-top: 15px;
}

.export-list>.export-list-item-placeholder {
    list-style-type: none;
    background: #ecf0f5;
    border-bottom: 1px solid #ecf0f5;
    box-shadow: 16px 0px #ecf0f5, -15px 0px #ecf0f5;
    padding-top: 5px;
    height: 78px;
}

.export-list>.export-list-item-active>div {
    border: 1px solid;
}

.img-circle,
.img-circle-s,
.img-circle-m,
.img-circle-b {
    border-radius: 50%;
    background-color: #eeeeee;
    background-size: cover !important;
    background-position: center !important;
}

.img-circle-s {
    margin: 0px auto;
    width: 50px;
    height: 50px;
}

.img-circle-m {
    margin: 5px auto;
    width: 100px;
    height: 100px;
}

.img-circle-b {
    margin: 5px auto;
    width: 150px;
    height: 150px;
}

.img-circle {
    margin: 20px auto;
    width: 250px;
    height: 250px;
}

.img-zoom {
    cursor: zoom-in;
}

#img-zoom-src {
    width: 100%;
}

.scrollable-y {
    height: 600px;
    overflow-y: scroll;
    overflow-x: hidden;
}

#items {
    overflow-x: scroll;
    width: auto;
    white-space: nowrap;
}

.item {
    width: 200px;
    height: 150px;
    display: inline-block;
}

#clone-click {
    margin-left: 10px;
    cursor: pointer;
}

#clone-click:hover {
    opacity: .5;
}

.popover {
    max-width: 100%;
}

.ui-tooltip {
    /* tooltip container box */

    white-space: pre-line;
}

.imputation-message {
    color: #ef8181;
}

.nopadding-right {
    padding-right: 0;
}

.nopadding-left {
    padding-left: 0;
}

h2>span {
    font-size: 12pt;
}

.img-responsive {
    padding: 2%;
    padding-left: 5%;
    padding-right: 5%;
}

.error-message-rut {
    position: relative;
    top: 10;
    left: 0;
    width: auto;
    height: auto;
    padding: 2px;
    margin-top: 2px;
    margin-left: 2px;
    margin-right: 2px;
    margin-bottom: 0px;
    line-height: 1.8;
    border-radius: 5px;
    cursor: hand;
    cursor: pointer;
    font-family: sans-serif;
    font-weight: 400;
}

.error-message-rut-text {
    display: table;
    margin: 0 auto;
    text-align: center;
    font-size: 10px;
}

.error-message-rut-success {
    background-color: #EFE;
    border: 1px solid #DED;
    color: #9A9;
}

.error-message-rut-warning {
    background-color: #FDF7DF;
    border: 1px solid #FEEC6F;
    color: #C9971C;
}

.spinner-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centrar horizontalmente */
    align-items: center;
    /* Centrar verticalmente */
    height: 200px;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    border-top-color: #11BABA;
    animation: spin 1s linear infinite;
    /* Animación de rotación */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text {
    margin-top: 10px;
    /* Espacio entre el spinner y el texto */
}

.conteiner-view-geo-fencing {
    display: grid;
    grid-template-columns: 500px auto;
}

.img-absence {
    width: 400px;
    height: 57vh;
}

.pdf-absence {
    width: 400px;
    height: 57vh;
}

#absences-info {
    font-size: 16px;
}

#button-container {
    position: absolute;
    width: 100%;
    top: 360px;
}

.conteiner-cost-center-att {
    width: 300px !important;
    display: grid;
    grid-template-columns: 90% 10%;
    align-items: center;
}

.badge-clock-mod {
    position: absolute;
    /* posición absoluta dentro del td */
    top: 50%;
    /* lo centramos verticalmente */
    right: 8px;
    /* ajusta la posición horizontal */
    background: linear-gradient(#11baba, #11baba, #035253);
    /* rojo estilo Bootstrap */
    color: white;
    padding: 2px 6px;
    border-radius: 999px;
    /* redondeado total tipo "pill" */
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
}