.search-btn[data-toggle='collapse']:after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    font-style: normal;
    font-variant: normal;
    display: inline-block;
    margin-left: auto;
    content: '\f105';
    transition: all .15s ease;
    color: #ced4da;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    padding: 0 10px 0 10px;
}
.search-btn[data-toggle='collapse-dashboard']:after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    font-style: normal;
    font-variant: normal;
    display: inline-block;
    margin-left: auto;
    content: '\f105';
    transition: all .15s ease;
    color: #ced4da;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    padding: 0 10px 0 10px;
}
.form-control, .input-group-text {
    height: 38px !important;
}
.field-validation-error {
    color: red !important;
    font-size: 12px !important;
}
.input-group-merge .form-control:not(:last-child) {
    border-right: 1px solid #80808070 !important;
    border-bottom-right-radius: 5px !important;
    border-top-right-radius: 5px !important;
}
.focused .input-group {
    box-shadow: none !important;
}

.search-btn[data-toggle='collapse'][aria-expanded='true']:after {
    transform: rotate(90deg);
}
.search-btn[data-toggle='collapse-dashboard'][aria-expanded='true']:after {
    transform: rotate(90deg);
}
.search-btn {
    display: flex;
    align-items: center;
}
.nav-item,th,td{
    cursor:pointer;
}

.link-edit-setting{
    text-decoration:underline;
}
    .link-edit-setting:hover {
        text-decoration: underline;
    }

.bg-card-new {
    background: linear-gradient(87deg, #1C80AB 0, #009DE0 100%) !important;
}
.font-card-title {
    font-size: 16px !important;
    font-style: normal !important;
}
.font-card-body {
    font-size: 36px !important;
}
.bg-card-processing {
    background: linear-gradient(87deg, #F4762D 0, #EFB442 100%) !important;
}

.bg-card-sucess {
    background: linear-gradient(87deg, #3DAE07 0, #03D02B 100%) !important;
}

.bg-card-error {
    background: linear-gradient(87deg, #f5365c 0, #f56036 100%) !important;
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 320px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

input[type="number"] {
    min-width: 50px;
}

.load-spinner-gif{
    width: 40px;
    height: 40px;
}
#driver-datatable_filter {
    position: relative;
    left: -60px;
}
.btn-edit {
    font-size: .875rem;
    position: relative;
    transition: all .15s ease;
    letter-spacing: .025em;
    text-transform: none;
    will-change: transform;
    padding: 0.625rem 1.25rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}
.btn-edit:hover {
    box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
}

#toaster {
    position: fixed;
    right: 0%;
    width: 280px;
    padding: 16px;
    background-color: #18A558;
    color: white;
    font-size: 16px;
}

    #toaster.show {
        transform: translateX(0);
    }
.cert-detail-span{
    padding:10px
}
ul li {
    margin-top: 10px;
    
}
ul {
    list-style-type: none;
    padding-inline-start: 0 !important;
}
.hr-cdetails {
    background-color: #11cdef !important;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}
.card {
    border-radius: 2rem;
}
.justify-evenly {
    justify-content: space-evenly ;
}

td {
    vertical-align: middle!important;
}


.btn-primary:disabled {
    color: #fff !important;
    border-color: transparent !important;
    background-color: #049DD8 !important;
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08) !important;
}
.btn-primary:disabled {
    color: #fff !important;
    border-color: transparent !important;
    background-color: #049DD8 !important;
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08) !important;
}


.pagination > li.active > span.current {
    box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
}

.pagination > li.active > span.current {
    z-index: 1;
    color: #fff;
    border-color: #5e72e4;
    border: 1px solid #5e72e4 !important;
    background-color: #5e72e4;
}
.simple-pagination{
    display:flex !important;
}

.paging-footer {
    padding: 0.5rem ;
    border-top: 1px solid rgba(0, 0, 0, .05);
    background-color: #fff;
}
.table-paging {
    background-color: #fff !important;
}

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.earth-banner {
    display: flex;
    width: 100%;
    min-height: 80vh;
}

.left-column {
    flex: 1;
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: flex-start;
    color: #fff;
    padding: 20px;
    gap: 1rem;
    padding-left:60px;
}

.right-column {
    flex: 1;
    position: relative;
    width: 100%;
    background-image: linear-gradient(#f8f9fe, #f8f9fe);
    box-shadow: inset 0 0 100px hsla(0,0%,0%,.4);
}

.background-lights {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

#globeCanvas {
    width: 100%;
    height: 100%;
}


.earth-body {
    display: flex;
    width: 100%;
    min-height: 100vh; /* Changed from height to min-height */
}

.animation {
    --size: 400px;
    position: absolute;
    top: 12vh;
    left: 21vh;
    font-size: calc(var(--size)/100);
    width: var(--size);
    height: var(--size);
    isolation: isolate;
    opacity: 0;
    transition: opacity 2.4s;
    pointer-events: none;
}

    .animation .earth {
        position: absolute;
        top: -15%;
        left: -15%;
        width: 130%;
        height: 130%;
    }

.halo, .edge {
    width: 100em;
    height: 100em;
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(-52deg);
    border-radius: 50%;
    box-shadow: #1e85db52 -0.8em 0 5.8em -1.5em inset;
    pointer-events: all;
}

.halo {
    font-size: 106%;
    margin: -3em;
    box-shadow: #2172ffe0 -2.2em 0 3.1em -0.5em inset, #001426d9 -2.9em 0 3.8em -0.9em inset, #0084ff30 -59em 0 18em -41em inset;
    mix-blend-mode: color-dodge;
    color: #5291ff9e;
    filter: drop-shadow(0.4em 0 4.6em) blur(0.25em);
    touch-action: none;
}

    .halo::before, .halo::after {
        content: '';
        display: block;
        height: 100%;
        border-radius: 50%;
        box-shadow: #309bff -1.3em 0 0.9em -0.8em inset;
        mix-blend-mode: color-dodge;
    }

    .halo::after {
        margin-top: -100%;
    }

#waitingListModal {
    z-index: 99999 !important;
}

.modal-backdrop {
    z-index: 9999 !important;
}
.span-text {
    color: #FF6600 !important;
}

@media (max-width: 992px) {
    .earth-banner {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    .left-column {
        padding: 40px 20px !important;
        text-align: center;
        align-items: center !important;
    }

    .right-column {
        min-height: 50vh;
    }

    .animation {
        --size: 300px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 768px) {
    .left-column {
        padding: 30px 15px !important;
    }

    h2 {
        font-size: 1.75rem !important;
    }

    pre {
        font-size: 0.9rem;
    }

    .animation {
        --size: 250px;
    }
}

@media (max-width: 576px) {
    .animation {
        --size: 200px;
    }

    .halo, .edge {
        width: 80em;
        height: 80em;
    }
}