.nav .nav-treeview .nav-link {
    padding: 0.4rem 1rem;
}
.nav-treeview > .nav-item > .nav-link > .nav-icon{
    width: 1.4rem;
    font-size: 14px;
    vertical-align: middle;
}

.nav .nav-treeview .nav-link p{
    font-size: 14px;
}
.nav .nav-treeview{
    padding-bottom: 48px;
}
/* loader */
.loader,
.loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
    z-index: 9999999999;
}
.loader {
    left:50%;
    top:50%;
    margin-left:-5em;
    margin-top:-5em;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid #eee;
    border-right: 1.1em solid #eee;
    border-bottom: 1.1em solid #eee;
    border-left: 1.1em solid #f5b237;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.preloader {
    background-color: rgba(0,0,0,0.4);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999999;
    opacity:1;
}

.dataTables_length, .dt-buttons{
    width: 20%;
    float: left;
}


/* This CSS was inspired by the blue pulsing dot in Grammarly */
:root {
    --pulseSize: 28px;
    --green: #1fb538;
    --transparentgreen: rgba(95,139,250,0);
}

.ring-center {
    display: flex;
    align-items: first;
    justify-content: left;
    height: 50px;
    padding: 10px;
    margin: 0 auto;
}

.ring-pulse {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 var(--green);
    animation: pulsing 2s infinite;
    transition: all 0.2s;
    cursor: pointer;
    margin: 0 auto;
}

/*.ring-pulse:hover {
    --green: rgba(209, 167, 160,.65);
    --transparentgreen: rgba(209, 167, 160,0);
}*/

.ring-pulse:active {
    transform: scale(1.5);
}

@keyframes pulsing {
    from {
        box-shadow: 0 0 0 0 var(--green);
    }
    70% {
        box-shadow: 0 0 0 var(--pulseSize) var(--transparentgreen);
    }
    to {
        box-shadow: 0 0 0 0 var(--transparentgreen);
    }
}



@keyframes pulse {
    from {
        box-shadow: 0 0 0 0 red;
    }
    70% {
        box-shadow: 0 0 0 var(--pulseSize) var(--transparentgreen);
    }
    to {
        box-shadow: 0 0 0 0 var(--transparentgreen);
    }
}

.stopped-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: red;
    box-shadow: 0 0 0 red;
    animation: pulse 2s infinite;
    transition: all 0.2s;
    cursor: pointer;
    margin: 0 auto;
}

/*.ring-pulse:hover {
    --green: rgba(209, 167, 160,.65);
    --transparentgreen: rgba(209, 167, 160,0);
}*/

.stopped-dot:active {
    transform: scale(1.5);
}

/*.stopped-dot {
    width: 28px;
    height: 28px;
    background-color: red;
    border-radius: 50%;
    animation: pulse 2s infinite;
}*/
.thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
}
.thumbnail img{
    border-radius: 4px;
}


.thumbnail .caption {
    padding: 9px;
    color: #333;
}

.fit-image{
    width: 100%;
    object-fit: cover;
    height: 100px;
}

.scrollable{
  overflow-y: auto;
  height:120vh;
}
#ui-datepicker-div{
    z-index: 9999999 !important;
}
.shiftName{
    white-space: initial;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-bottom: 0;
    /*width: 100px;*/
}
.fc-event-main{
     word-wrap: break-word;
}
.fc-daygrid-event-harness{
    cursor: pointer;
    margin-bottom: 5px !important;
    margin-top: 5px !important;
}