/* width */

::-webkit-scrollbar {
    height: 7px;
    width: 7px;
}


/* Track */

::-webkit-scrollbar-track {
    background: #f1f1f1;
}


/* Handle */

::-webkit-scrollbar-thumb {
    background: #888;
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
    background: #555;
}


/* Add Animation */

@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}



.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.payers {
    color: black;
    font-size: 14px;
}

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1038;
    display: none;
    /* opacity: 0; */
}

.overlay:target {
    visibility: visible;
    opacity: 1;
}
.popup-body {
    margin: 70px auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    width: 35%;
    position: relative;
    animation-name: popup-body;
    transition: all 5s ease-in-out;
}

.popup .header {
    padding: 0 10px;
}

.popup-lg .popup-body {
    width: 50% !important;
}

.popup-body:after {
    content: ' ';
    position: absolute;
    top: 100%;
    width: 0;
    height: 0;
    border: solid transparent;
    border-top-color: white;
    border-width: 20px;
    left: 50%;
}

.overlay:target .popup-body {
    animation: popup-body 0.7s;
}

.popup-body h2 {
    margin-top: 0;
    color: #333;
}

.popup-body .foot {
    position: sticky;
}

.popup-body .close:hover {
    color: #06d85f;
}

.popup-body .content {
    max-height: 60vh;
    overflow-y: auto;
}

.popup.show:not(.hide) {
    display: inline-block;
}

.pointer {
    cursor: pointer;
}

@media screen and (max-width: 700px) {
    .box {
        width: 70%;
    }

    .popup-body {
        width: 70%;
    }

    .popup-lg .popup-body {
        width: 80% !important;
    }
}

@keyframes popup-body {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }

    60% {
        transform: scale(1.1);
    }

    70% {
        transform: scale(1.2);
    }

    80% {
        transform: scale(1);
    }

    90% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.section-name,
label.switch,
td>.btn {
    margin: 0px !important;
}

.dropbox {
    position: relative;
}

.dropbox-menu {
    display: none;
    background-color: white;
    /* margin: 20px; */
    opacity: 1;
    padding: 0;
    z-index: 4;
    box-shadow: 0px 5px 20px 3px grey;
    position: absolute;
    left: 110%;
    top: 0%;
}

.dropbox-menu .dropbox-item {
    font-size: .9rem;
    text-align: left !important;
}

.dropbox-item {
    min-width: 200px;
    padding: 2px 10px 2px 10px;
}

.dropbox-item:not(a) {
    padding: 10px 5% 10px 5% !important;
}

.dropbox-item:hover {
    background-color: grey;
}

.dropbox-item:first-child,
.dropbox-item:only-child {
    border-bottom: none !important;
}

.dropbox-menu::after {
    border: solid transparent;
    border-right-color: white;
    border-width: 8px;
    content: ' ';
    height: 0;
    pointer-events: none;
    position: absolute;
    right: 100%;
    top: 15%;
    width: 0%;
    z-index: inherit;
}

.dropbox-link a {
    padding: 0 !important;
    text-decoration: none;
    color: black;
    display: block;
    width: 100% !important;
}

.popup-input {
    color: #888;
    font-size: 12px;
    text-align: left;
}

.popup-select {
    color: #888;
    font-size: initial;
    text-align: left;
    margin-bottom: 10px;
}

.svg {
    width: 40px;
    height: 40px;
    margin-left: 50%;
    color: white;
    cursor: pointer;
    border-radius: 50% !important;
}

.foot .svg {
    display: inline-block;
    min-width: 40px;
    min-height: 40px;
    margin-left: 50%;
    color: white;
    cursor: pointer;
    border-radius: 50% !important;
}

@media(min-width: 575px) {
    .dropbox-menu .dropbox-menu::after {
        top: 5%;
    }
}

@media(max-width: 575px) {
    #darkdiv {
        position: absolute;
        top: 100;
        left: 0;
        z-index: 2;
        overflow-y: auto;
        max-height: 98vh;
    }

    .dropbox-menu {
        box-shadow: none;
        position: absolute;
        left: 5%;
        top: 100%;
    }

    .dropbox-menu::after {
        border: solid transparent;
        border-bottom-color: white;
        border-width: 8px;
        content: ' ';
        height: 0;
        pointer-events: none;
        position: absolute;
        right: 50%;
        top: -20%;
        width: 0%;
        z-index: inherit;
    }
}

[data-dismiss],
[data-close] {
    cursor: pointer;
}

.page-title {
    text-align: center;
    text-transform: capitalize;
}

td:not(.text-center),
th {
    text-align: left;
}

.badge.alert {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50%;
    text-align: center;
    line-height: 16px;
    padding: initial !important;
}

th {
    text-align: left;
}


/* Remove default checkbox */

[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
    /* position: absolute; */
    pointer-events: initial;
    opacity: 1;
}


/* Remove default checkbox */

.form-check-input[type="checkbox"]:not(:checked),
.form-check-input[type="checkbox"]:checked {
    position: absolute;
    pointer-events: initial;
    opacity: 0;
    display: none;
}

.select2 {
    width: 100%;
}

.content-wrapper {
    position: relative;
}

.content-wrapper .table-responsive {
    /* min-height: 65vh; */
}

.callout-modal.modal .modal-dialog::after {
    content: '';
    position: relative;
    width: 0;
    height: 0;
    border: solid transparent;
    border-top-color: white;
    border-width: 20px;
}

.callout-modal.modal .modal-dialog-centered.modal-dialog::after {
    position: absolute;
    left: calc(50% - 20px);
    bottom: 2.55rem;
}

.callout-modal.modal .modal-sm.modal-dialog-centered.modal-dialog::after {
    position: absolute;
    left: calc(50% - 20px);
    bottom: 1.75rem;
}

.card-delete {
    display: none;
    position: absolute;
    right: 5px;
    z-index: 10;
}

.card-detail {
    display: none;
    position: absolute;
    bottom: 5px;
    right: 5px;
    z-index: 11;
}

.showable:hover .card-delete {
    display: block;
}

.showable:hover .card-detail {
    display: block;
}

.showable img {
    height: 66px !important;
}

.flex-center .font-italic.small {
    display: none;
}

a.dropdown-link {
    display: block !important;
}

.callout-modal.modal .modal-dialog {
    position: relative;
}

.callout-modal.modal .modal-dialog:not(.modal-dialog-centered):after {
    bottom: -40px;
    left: calc(50% - 20px);
    position: absolute;
}

@media print {
    thead {
        display: table-header-group;
    }

    tfoot {
        display: table-row-group;
    }

    tr {
        break-inside: avoid !important;
    }
}

.modal-content .footer {
    text-align: center;
}

.modal-content .footer button {
    background-color: #4285f4 !important;
    border-radius: 50%;
    padding: 7px 10px;
    border: none;
    outline: none;
    color: white;
}

.select2-selection__choice {
    background-color: var(--dark);
    color: white !important;
}
.jFiler-jProgressBar{
    height: 12px;
}
.jFiler-jProgressBar > div {
    padding-bottom: 1px;
    height: 100%;
    text-align: center;
    color: white;
    font-size: 10px;
    background-color: #4285f4;
}

.jFiler-items-list {
    display: flex;
    flex-wrap: wrap;
}

.jFiler-items-list li {
    margin-right: 10px
}
.flex-center .font-italic.small {
    display: none;
}
thead > th{
    /* font-weight: 900; */
    text-transform: uppercase !important;
}

.btn-floating i {
    font-size: 1.25rem;
    line-height: initial;
}
.fixed-action-btn{
    padding-top: 11px;
}

button {
    cursor: pointer;
}
