.table-div {
    padding: 1%;
    margin-top: 2%;
    background-color: #163020;
    color: white;
    border-radius: 7px;
    /* border-radius: 10px; */
}

table {
    color: white !important;
}

.navbar {
    background-color: white !important;
}

.main-cont {
    margin-top: 2%;
    padding: 0% 2%;
}

body {
    /* background: linear-gradient(135deg, #114232 0%, #114232 50%, #527853 100%); */
    background-color: #274934;
    /* background: linear-gradient(135deg, #114232 0%, #114232 50%, #527853 100%); */

    font-family: 'Poppins', sans-serif;
}

.total_users {
    font-size: 80pt;
    text-align: center;
    /* background: linear-gradient(135deg, #114232 0%, #114232 50%, #527853 100%); */
    background-color: #163020;
    padding: 30px;
    color: white !important;
    border-radius: 7px;
}

.analytics-div {
    background-color: white;
    padding: 2%;
    margin-top: 2%;

}

.device-div {
    background-color: #163020;
    padding: 2%;
    margin-top: 2%;
    color: white !important;
    border-radius: 7px;
}

.browser-div {
    background-color: #163020;
    padding: 2%;
    margin-top: 2%;
    border-radius: 7px;
}

.progress {
    height: 30px;
}

.table td,
th {
    text-align: left;
    font-size: 12pt !important;
}

.badge {
    font-size: 10pt;
}

.browser-div .badge {
    font-size: 9pt;
}

@keyframes flash {
    0% {
        background-color: #d0f3d0b0;
    }

    50% {
        background-color: transparent;
    }

}

.lastRoute {
    animation: flash 2s;
}

#progress {
    position: relative;
    margin-bottom: 4px;
}

#progress-bar {
    position: absolute;
    background: lightseagreen;
    height: 5px;
    width: 0%;
    top: 50%;
    left: 0;
}

#progress-num {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;

}

#progress-num::before {
    content: "";
    background-color: lightgray;
    position: absolute;
    top: 42%;
    left: 0;
    height: 5px;
    width: 100%;
    z-index: 1;
}

#progress-num .step {
    border: 3px solid lightgray;
    /* width: 10%; */
    padding: 0 2%;
    height: 100%;
    line-height: 25px;
    text-align: center;
    background-color: #fff;
    font-family: sans-serif;
    font-size: 14px;
    position: relative;
    z-index: 2;
}

#progress-num .icon-step {
    border: 3px solid lightgray;
    /* width: 10%; */
    height: 100%;
    line-height: 25px;
    text-align: center;
    background-color: #fff;
    font-family: sans-serif;
    font-size: 14px;
    position: relative;
    z-index: 2;
}

#progress-num .step.active {
    border-color: lightseagreen;
    background-color: lightseagreen;
    color: #fff;
}

#progress-num .icon-step.active {
    border-color: lightseagreen;
    background-color: lightseagreen;
    color: #fff;
}

#progress-num .step.active2 {
    border-color: navy;
    background-color: navy;
    color: #fff;
}

#progress-num .icon-step.active2 {
    border-color: navy;
    background-color: navy;
    color: #fff;
}

.checkout-device {
    width: 20px;
    height: 20px;
    margin-right: 0.8%;
    border-radius: 0.25rem !important;
}

.step {
    font-size: 12px !important;
    border-radius: 0.25rem !important;

}

.icon-step {
    font-size: 12px !important;
    border-radius: 50px !important;
    width: 45px;
}

.navbar-brand {
    font-size: 18pt;
}

#utc-time {
    min-width: 100px;
    padding-left: 6px;
    display: inline-block;
}

.hidden {
    display: none;
}

.sound-on,
.sound-off {
    cursor: pointer;
}

.table-head-center {
    width: 15%;
    text-align: center;
}






.breadcrumb {
    display: inline-block;
    padding: 0;
    margin-bottom: 10px;
    background: transparent;
    overflow: hidden;
}

.breadcrumb li {
    float: left;
    padding: 8px 10px 8px 25px;
    background: #e1edff;
    font-size: 14px;
    font-weight: bold;
    color: #777;
    position: relative;
}

/* .breadcrumb li:first-child{ background: #fdf9cc; } */
.breadcrumb li:last-child {
    background: #66a3ff;
    margin-right: 18px;
    color: white;
}

.breadcrumb .active {
    background-color: #66a3ff;

}

.breadcrumb li:before {
    display: none;
}

.breadcrumb li:after {
    content: "";
    display: block;
    border-left: 18px solid #e1edff;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    position: absolute;
    top: 0;
    right: -18px;
    z-index: 1;

}

/* .breadcrumb li:first-child:after{ border-left-color: #fdf9cc; } */
.breadcrumb li:last-child:after {
    border-left-color: #66a3ff;
}

@media only screen and (max-width: 479px) {
    .breadcrumb li {
        padding: 8px 4px 8px 22px;
    }

}

.tooltip1 {
    position: relative;
    display: inline-block;
}

.tooltip1 .tooltiptext {
    /* visibility: hidden; */
    display: none;
    width: max-content;
    background-color: gray;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 10pt;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;


    word-wrap: break-word;
}

.tooltip1:hover .tooltiptext {
    /* visibility: visible; */
    display: unset;
}

.categoryImg {
    width: 30px;
}

@media only screen and (max-width: 375px) and (max-height: 812px),
only screen and (max-width: 360px) and (max-height: 740px) {
    .categoryImg {
        width: 20px;
    }

    .tooltip1 .tooltiptext {
        width: fit-content;
    }

    .breadcrumb li {
        padding: 8px 4px 8px 22px;
    }

    .browser-div .badge {
        font-size: 8pt;
    }
}

#scrollBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    background-color: lightcoral;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    padding: 5px;
    font-size: 18px;
}

#scrollBtn:hover {
    background-color: #0056b3;
}

.checkout-browser {
    width: 20px;
    margin-top: 2px;
}

.bg-safari {
    background-color: #00a9ff;
}

.bg-chrome {
    background-color: #0F9D58;
}

.bg-firefox {
    background-color: #FF7139;
}

.bg-edge {
    background-color: #0078D7;
}

.bg-opera {
    background-color: #FF1B2D;
}

.bg-unknown {
    background-color: #dc3545;
}

.requestFlow {
    background-color: #f3ba84 !important;
    color: white;
    border-color: #f3ba84 !important;
}



.toast:not(.showing):not(.show) {
    opacity: unset !important;
}


table {
    border-collapse: collapse;
    width: 100%;

}

th,
td {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

th {
    background-color: #f2f2f2;
}

#tableContainer {
    padding: 1%;
    background-color: white;
    margin-top: 2%;
}