:root {
    --screen-width: 550px;
}

/* FontAwesome fallback styles */
.btn-stack {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
}

/* Show emoji fallback if FontAwesome icons are not loaded */
.fa-stack .fa-circle:not([class*="fa-"]) + .emoji-fallback,
.fa-stack .fa-solid:not([class*="fa-"]) + .emoji-fallback {
    display: block !important;
}

body {
    overflow: hidden !important;
}

body {
    /* overflow-x: hidden; */
    background: linear-gradient(45deg, #0000 calc(25%/3), #f1f1f1 0 calc(50%/3),
            #0000 0 calc(250%/3), #f1f1f1 0 calc(275%/3),
            #0000 0), linear-gradient(45deg, #f1f1f1 calc(25%/3), #0000 0 calc(50%/3),
            #f1f1f1 0 25%, #0000 0 75%,
            #f1f1f1 0 calc(250%/3), #0000 0 calc(275%/3),
            #f1f1f1 0),
        linear-gradient(-45deg, #0000 calc(25%/3), #f1f1f1 0 calc(50%/3),
            #0000 0 calc(250%/3), #f1f1f1 0 calc(275%/3),
            #0000 0), linear-gradient(-45deg, #f1f1f1 calc(25%/3), #0000 0 calc(50%/3),
            #f1f1f1 0 25%, #0000 0 75%,
            #f1f1f1 0 calc(250%/3), #0000 0 calc(275%/3),
            #f1f1f1 0) #ffffff;
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
    /* max-width: var(--screen-width) !important; */
}

::-webkit-scrollbar {
    width: 3px;
}

::-webkit-scrollbar-track {
    background-color: rgb(255, 255, 255);
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #4b4b4b;
}

::-webkit-scrollbar-thumb:hover {
    border-radius: 10px;
    background-color: #2f2f2f;
}

#root,
.App,
.controls,
.single-recipients-live-videos-screen,
.videos,
.recipients-videos,
.single-video-recipients-name {
    margin: auto;
    max-width: var(--screen-width) !important;
}

#root,
.App {
    position: relative;
}

.non-call-contents {
    background-color: rgb(191, 191, 191);
    width: 100vw;
    height: 100vh;
    display: none;
}

.non-call-container {
    background-color: white;
    height: 100vh;
    margin: auto;
    max-width: var(--screen-width) !important;
    overflow-y: scroll;
    overflow-x: hidden;
}
.otp-div{
    z-index: 99999999;
}
.otp-div .upper-div {
    text-align: center !important;
    background-color: rgb(106, 31, 255);
    color: white;
    padding: 20px 0px 20px 0px;
}
.otp-div .lower-div{
    background-color: white;
}
#brand-name{
    margin-bottom: 20px;
    font-size: 30px;
    font-weight: 800;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
#otp-icon img{
    width: 150px;
}
#heading-text .text-1{
    margin-top: 20px;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 500;
}

.otp-div .lower-div {
    color: rgb(66, 66, 66);
    padding: 30px 20px 20px 20px;
}

.otp-input label{
    color:rgb(57, 57, 57);
    font-size: 17px;
}
.otp-input .otp-input-field{
    border: 1px solid rgb(100, 100, 100);
    width: calc(100% - 150px);
    border-top-left-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
    padding: 8px 10px 8px 10px;
    color: #606060;
}
.otp-input .otp-input-field:focus{
    outline: None ;
    box-shadow: 0px 0px 5px 1px #5500ff;
}
.otp-input .btn{
    background: #6619ff;
    color: white;
    width: 150px;
    padding: 0px !important;
}
.otp-input .btn:hover {
    color: white;
    background: #5500ff;
}
.otp-input .btn:disabled {
    color: white;
    background: #4c00e4;
}

.otp-value-div{
    text-align: center;
}
.otp-value-div label{
    font-size: 20px;
    color:rgb(123, 123, 123)
}
.otp-value-div #otp-input-value {
    border: 1px solid rgb(100, 100, 100);
    border-top: None;
    border-left: none;
    border-right: none;
    letter-spacing: 35px;
    text-align: center !important;
    width: 200px;
    padding: 10px 0px 10px 0px !important;
    font-size: 20px;
    color: #606060;
}
.otp-value-div #otp-input-value:focus{
    outline: none;
    border: 2px solid #5500ff;
    border-top: none;
    border-left: none;
    border-right: none;
}
.otp-value-div #otp-input-value:disabled, .otp-input .otp-input-field:disabled{
    background: white !important;;
}
.otp-value-div #otp-input-value::placeholder{
    text-align: center !important;
    font-size: 20px !important;
}
.lower-div #verify-btn-div{
    margin-top: 5px;
    text-align: center;
}
.lower-div #verify-btn-div #verify-btn{
    background-color: rgb(107, 6, 214);
    color: white;
    width: 200px;
    border-radius: 20px;
}
.lower-div #verify-btn-div #verify-btn:hover {
    background-color: rgb(134, 48, 226);
}
.lower-div #verify-btn-div #verify-btn:disabled {
    background-color: rgb(124, 25, 230);
}

#otp_send_msg{
    margin-bottom: -5px;
}
#change-mobile{
    cursor: pointer;
    color: #4c00e4;
    visibility:hidden
}

.stick-header{
    position: sticky;
    top: 0;
    z-index: 9999999;
    /* width: 100%;
    max-width: var(--screen-width) !important; */
}
.stick-header .stick-header-content{
    background-color: #3d00baff;
    color: white;
    padding: 12px;
    font-size: 17px;
    font-weight: 600;
    font-family:Verdana, Geneva, Tahoma, sans-serif
}

.option-dropdown-items{
    z-index: 9999999;
    background-color: white;
    width: 110px;
    position: absolute;
    right: 1px;
    padding: 8px;
    box-shadow: 0px 0px 1px 1px rgb(199, 199, 199);
    border-radius: 2px;
    display: none;
}
.option-dropdown-items.show{
    display: block !important;
}

.non-call-container-items{
    display: none;
    min-height: 100vh;
}

.call-history-div{
    display: none;
    /* height: 100vh; */
}
.call-history-contents{
    background-color: white;
    padding: 10px;
    /* overflow-y: scroll; */
    /* height: 100vh; */
}
.call-histories{
    /* overflow-y: scroll;
    height: 100vh; */
    
}
.call-histories hr{
    margin: 10px !important;
}
.call-histories .profile-icon{
    height: 50px;
    width: 50px;
    border-radius: 100%;
}
.call-histories .call-info{
    line-height: 20px;
    margin-left: 5px;
}
.call-histories .call-info .user-name {
    font-weight: 500;
}
.call-histories .call-info .date-time {
    font-size: 13.5px;
    color: #606060;
}
.call-histories .call-status-icon{
    height: 27px;
}
.call-histories .call-status-icon-div{
    margin-right: 20px;
}

.call-details-div{
    background-color: rgb(226, 226, 226) !important;
}
.call-status-heading{
    padding: 15px 0px 15px 0px;
}
.call-status-heading .call-status-mark{
    color: white;
    font-size: 15px;
    padding: 1px 10px 1px 10px;
    border-radius: 20px;
    margin-right: 10px;
    font-weight: 400;
}

.call-status-heading .call-status-text {
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0.2px;
}
.call-status-heading .call-status-heading-box {
    margin: auto;
    width: fit-content;
    padding: 3px 8px 3px 4px;
    border-radius: 50px;
    
}

.call-status-heading.call-success {
    background-color: rgb(150, 255, 150);
}
.call-status-heading.call-success .call-status-mark{
    background-color: rgb(0, 114, 0);
}
.call-status-heading.call-success .call-status-text {
    color: rgb(0, 114, 0);
}
.call-status-heading.call-success .call-status-heading-box {
    border: 1px solid rgb(0, 114, 0);
}

.call-status-heading.call-failed {
    background-color: rgb(255, 142, 142);
}

.call-status-heading.call-failed .call-status-mark {
    background-color: rgb(202, 0, 0);
}

.call-status-heading.call-failed .call-status-text {
    color: rgb(202, 0, 0);
}

.call-status-heading.call-failed .call-status-heading-box {
    border: 1px solid rgb(202, 0, 0);
}

.information-div{
    background-color: white;
    color: #434343;
    padding: 15px 15px 15px 15px;
    margin-bottom: 10px;
}

.call-information-div .call-information-title{
    font-weight: 500;
    font-size: 14px;
}

.call-information-div .call-info-title {
    font-weight: 500;
    font-size: 14px;
}
.call-information-div .call-info-animal {
    font-weight: 500;
    font-size: 14px;
    color: #3d00baff;
    background-color: #fed5ff;
    padding: 1px 5px 1px 5px;
    border-radius: 5px;
    letter-spacing: 0.5px;
}

.call-details-block{
    margin-top: 10px;
    box-shadow: 0px 0px 1px 1px rgb(177, 177, 177);
    border-radius: 10px;
    padding: 5px;
}
.call-details-block .user-photo img{
    height: 80px;
    width: 80px;
    border-radius: 5px !important;
}
.call-details-block hr{
    margin: 5px;
    color: #b0b0b0 !important;
}
.call-details-block .call-username{
    color: #000000;
    font-weight: 500;
    font-size: 16px;
}
.call-details-block .call-timestamp {
    color: #4a4a4a;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.5px;
}

.call-details-div .call-button-div{
    text-align: center;
    font-weight: 500;
    color: #000000;
}

.call-chat-btn, .call-back-btn{
    width: 100px;
    border-radius: 8px;
    margin: 10px 15px 5px 15px;
    outline: none !important;
    padding: 3px;
}
.call-chat-btn{
    border: 2px solid #da8ef8;
    background-color: #f4dafe;
    color: #2e008a;
    font-weight: 500;
}
.call-chat-btn path{
    fill: #2e008a;
}

.call-back-btn {
    border: 2px solid #7d02ae;
    background-color: #2e008a;
    color: white;
    font-weight: 500;
}

.prescription-img-div .prescription-img-title {
    font-weight: 500;
    font-size: 15px;
    color: #000000;
}

.prescription-img-div img{
    height: 60px;
    width: 60px;
    margin: 15px 15px 0px 15px;
    border: 1px solid #7d02ae;
    border-radius: 100%;
    padding: 5px;
}

.prescription-details-div .prescription-details-title{
    font-weight: 500;
    font-size: 15px;
    color: #000000;
}

.prescription-details-div label{
    font-weight: 500;
    font-size: 14px;
    color: #000000;
    margin: 15px 0px 5px 0px;
}
.prescription-details-div .prescription-details-input{
    width: 100% !important;
    padding: 5px;
    border-radius: 5px;
    outline: none !important;
    border: 1px solid #4d4d4d !important;
    color: #000000 !important;
    font-weight: 400;
}
.prescription-details-div .prescription-details-input:disabled{
    background-color: white !important;
}
.prescription-products-div{
    margin-top: 20px;
}
.prescription-products-div .product-img{
    height: 100px;
    text-align: center;
}

.prescription-details-div .prescription-product-item{
    box-shadow: 0px 0px 2px 1px rgb(167, 167, 167);
    height: 210px;
    padding: 10px;
    border-radius: 8px;
}

.prescription-details-div .prescription-product-item .product-title{
    color: #2e008a;
    font-weight: 500;
}
.prescription-details-div .prescription-product-item .product-desc {
    color: rgb(84, 84, 84);
    font-weight: 450;
}

.prescription-note-div{
    border-left: 5px solid #2e008a !important;
    margin: 15px;
    border-radius: 5px;
    box-shadow: 0px 0px 0px 1px rgb(174, 174, 174);
}
.prescription-note-div .fa-circle-info{
    color: #2e008a;
    font-size: 18px;
}
.prescription-note-div .prescription-note-title{
    font-size: 14px;
    font-weight: 600;
}
.prescription-note-div .prescription-note-text {
    font-size: 14px;
    font-weight: 400;
    margin-top: 10px;
}

.filter-checkbox-label {
    display: inline-block;
    position: relative;
    padding-left: 20px;
    cursor: pointer;
    user-select: none;
}
/* Hide the browser's default checkbox */
.filter-checkbox-label input {
    display: none !important;
}
/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 4px;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: #eee;
    border-radius: 2px;
}
.filter-checkbox-label input:checked~.checkmark {
    background-color: #2e008a;
}
/* Create the tick mark */
.filter-checkbox-label input:checked~.checkmark::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.text-error {
    color: rgb(255, 25, 0);
}
.text-done{
    color:rgb(2, 120, 2)
}

.modal-Prescription_image{
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(101, 101, 101, 0.616);
    z-index: 999999999;
    display: none;
}
.modal-dialog-Prescription_image{
    position: absolute;
    background-color: white;
    width: calc(var(--screen-width) - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px gray;
}
.modal-body-Prescription_image{
    text-align: center;
    padding: 10px;
}
.modal-body-Prescription_image img{
    width: 100%;
}
.modal-Prescription_image button{
    background-color: transparent !important;
    border: none;
    outline: none;
    margin: 5px 5px 0px 0px;
}
.modal-Prescription_image .fa-x {
    background-color: transparent !important;
}

.loader-common{
    position: relative;
    background-color: rgba(101, 101, 101, 0.616);
    width: 100vw;
    height: 100vh;
    z-index: 9999999999;
    display: none;
}
.loader-common-div {
    position: absolute;
    background-color: white;
    color: #007bb8;
    width: calc(var(--screen-width) - 20px);
    max-width: calc(100vw - 20px) !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px gray;
    text-align: center;
    padding: 8px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 3px;
}

.loader-container {
    background-color: white;
    width: 100vw;
    height: 100vh;
    z-index: 99999999999;
}

.loader-container .loader-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loader-container .footer-txt {
    color: #3d00baff;
    font-size: 25px;
    padding-top: calc(100vh - 100px);
    text-align: center !important;
    line-height: 25px;
}

.loader {
    color: #7d7d7d;
    position: relative;
    display: inline-block;
    margin-top: 40px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 48px;
    letter-spacing: 4px;
    box-sizing: border-box;
}

.loader::before {
    content: '';
    position: absolute;
    right: 70px;
    bottom: 10px;
    height: 28px;
    width: 5.15px;
    background: currentColor;
    box-sizing: border-box;
    animation: animloader1 1s linear infinite alternate;
}

.loader::after {
    content: '';
    width: 15px;
    height: 15px;
    position: absolute;
    left: 125px;
    top: 2px;
    border-radius: 50%;
    background: #3d00baff;
    box-sizing: border-box;
    animation: animloader 1s linear infinite alternate;
}

@keyframes animloader {
    0% {
        transform: translate(0px, 0px) scaleX(1);
    }

    14% {
        transform: translate(-12px, -16px) scaleX(1.05);
    }

    28% {
        transform: translate(-27px, -28px) scaleX(1.07);
    }

    42% {
        transform: translate(-46px, -35px) scaleX(1.1);
    }

    57% {
        transform: translate(-70px, -37px) scaleX(1.1);
    }

    71% {
        transform: translate(-94px, -32px) scaleX(1.07);
    }

    85% {
        transform: translate(-111px, -22px) scaleX(1.05);
    }

    100% {
        transform: translate(-125px, -9px) scaleX(1);
    }
}

@keyframes animloader1 {
    0% {
        box-shadow: 0 -6px, -122.9px -8px;
    }

    25%,
    75% {
        box-shadow: 0 0px, -122.9px -8px;
    }

    100% {
        box-shadow: 0 0px, -122.9px -16px;
    }
}


.calling-screen {
    z-index: 999999997;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-image: linear-gradient(to bottom, rgb(121, 77, 255), rgb(2, 15, 84));
    padding-top: 80px;
    width: 100%;
    height: 100vh;
}


.recipients-videos video {
    z-index: 999;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: black;
    width: 100%;
    height: 100vh;
}

.live-video-player-track-video {
    background-color: black;
    object-fit: cover;
}

.blank-remote-users-view {
    background-color: #2a2a2a;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 999;
    width: 100%;
    height: 100vh;
}

.blank-remote-users-view .play-icon {
    position: absolute;
    font-size: 10rem;
    color: rgb(192, 192, 192);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.blank-remote-users-view .loading-text {
    color: rgb(192, 192, 192);
    font-size: 22px;
}

.remote-volume-indicator {
    z-index: 9999;
    position: relative;
    height: 100px;
    bottom: 125px;
    right: 20px;
    top: calc(100vh - 220px);
}

.local-volume-indicator {
    z-index: 9999;
    position: relative;
    height: 100px;
    bottom: 125px;
    right: 5px;
    top: calc(100vh - 274px);
}

.off-background {
    z-index: 9999;
    position: absolute;
    width: 10px;
    height: 100%;
    background-color: rgb(192, 192, 192);
    border: 1px solid white;
    right: 0;
}

.on-background {
    z-index: 9989;
    position: absolute;
    width: 10px;
    height: 100%;
    background-image: linear-gradient(to top, green, yellow, red);
    border: 1px solid white;
    right: 0;
}

.controls {
    z-index: 999999999;
    position: fixed;
    /* top: 91.5vh; */
    bottom: 0px;
    left: 0;
    right: 0;
    /* padding-bottom: 3px; */
    /* background-color: rgb(177, 177, 177) !important; */
}

.control-top {
    padding-bottom: 20px;
}

.control-panels {
    background-color: rgb(177, 177, 177) !important;
    width: 100%;
    padding: 6px;
}

.btn-control {
    /* background-color: cadetblue; */
    color: white;
    margin-left: 20px;
    margin-right: 20px;
    cursor: pointer;
}

.btn-stack {
    font-size: 0.65cm;
}


.single-recipients-mute-videos-screen {
    z-index: 99;
    position: absolute;
    text-align: center !important;
    top: 0;
    left: 0;
    right: 0;
    background-image: linear-gradient(to bottom, rgb(204, 203, 203), rgb(112, 112, 112));
    padding-top: 80px;
    width: 100%;
    height: 100vh;
}

.single-recipients-mute-videos-screen #on-call {
    color: white;
    font-size: 18px;
    text-transform: uppercase;
    margin-bottom: -10px;
}

.calling-screen #text-calling {
    color: white;
    font-size: 25px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.calling-screen .avatar-icons,
.single-recipients-mute-videos-screen .avatar-icons {
    font-size: 130px;
    color: rgb(194, 194, 194);
    margin-top: 40px;
    margin-bottom: 20px;
}

.calling-screen .recipient_name,
.single-recipients-mute-videos-screen .recipient_name {
    font-weight: 500;
    color: white;
    font-size: 20px;
    text-transform: capitalize;
}

.single-recipients-live-videos-screen .single-video-recipients-name {
    position: fixed;
    bottom: 64px;
    left: 0;
    right: 0;
    width: 100%;
    background-color: cadetblue;
    color: white;
    font-size: 16px;
    text-transform: capitalize;
    padding-top: 2px;
    padding-bottom: 2px;
    text-align: center;
    z-index: 9999;
}



.two-user-video-sec .live-video-box {
    width: 100%;
    height: calc(50vh - 30px);
    background-color: #494949;
    color: white;
}

.two-user-video-sec .video-user-name {
    z-index: 890;
    color: white;
}

.two-user-live-video video {
    z-index: 999;
    background-color: black;
    width: 100%;
    height: calc(50vh - 30px);
}



.caller-video-full-screen video {
    z-index: 99999;
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background-color: rgb(5, 0, 106);
}

.caller-video video {
    z-index: 9999;
    position: absolute;
    top: 30px;
    right: 5px;
    height: 130px;
    width: 100px;
    border: 2px solid white;
    background-color: black;
}

.calling-screen-new-1 {
    z-index: 999999;
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    /* background-color: gray; */
    /* padding-top: 80px; */
    width: 100%;
    height: 100vh;
    padding: 10px;
}

.calling-screen-new-1 .top-bar {
    background-color: #3d00baff;
    color: white;
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: 500;
    text-align: center;
    width: 100%;
    border-radius: 18px;
    padding: 8px 0px 8px 0px;
}

.calling-screen-new-1 .calling-heading {
    text-align: center;
    color: white;
    font-weight: 500;
    font-size: 30px;
    letter-spacing: 1px;
}

.calling-screen-new-1 .calling-text {
    margin-top: 20px;
    text-align: center;
    color: white;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    padding: 5px 0px 5px 0px;
}

.calling-screen-new-1 .disclaimer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 90px;
    margin: 0 10px 0 10px;
    text-align: center !important;
}

.calling-screen-new-1 .disclaimer-box {
    padding: 3px;
    border: 1px solid #ff8d00;
    border-radius: 5px;
    text-align: center !important;
}

.calling-screen-new-1 .disclaimer-text {
    color: #ff8d00;
    font-size: 14px;
    line-height: 15px;
    text-align: center !important;
}

.calling-screen-new-1 .credit {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 70px;
    margin: 0 10px 0 10px;
}

.calling-screen-new-1 .credit-text {
    color: blue;
    font-size: 14px;
    line-height: 15px;
}


.calling-screen-new {
    display: none;
    z-index: 999999997;
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    background-color: white;
    /* padding-top: 80px; */
    width: 100%;
    height: 100vh;
    padding: 10px;
}

.calling-screen-new .top-bar {
    background-color: #3d00baff;
    color: white;
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: 500;
    text-align: center;
    width: 100%;
    border-radius: 18px;
    padding: 8px 0px 8px 0px;
}

.calling-screen-new .calling-heading {
    text-align: center;
    color: #f10760ff;
    font-weight: 500;
    font-size: 30px;
    letter-spacing: 1px;
}

.calling-screen-new .calling-text {
    margin-top: 20px;
    text-align: center;
    color: black;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    background-color: white;
    border-radius: 5px;
    border: 1px solid rgb(243, 243, 243);
    padding: 5px 0px 5px 0px;
    box-shadow: 0px 2px 2px 0px rgb(241, 241, 241);
}

.calling-screen-new .calling-icon {
    padding: 20px 50px 20px 50px;
}

.calling-screen-new .calling-icon img {
    width: 100%;
    max-width: 300px;
}

.calling-screen-new .disclaimer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 90px;
    margin: 0 10px 0 10px;
    text-align: center !important;
}

.calling-screen-new .disclaimer-box {
    padding: 3px;
    border: 1px solid #ff8d00;
    border-radius: 5px;
    text-align: center !important;
}

.calling-screen-new .disclaimer-text {
    color: #ff8d00;
    font-size: 14px;
    line-height: 15px;
    text-align: center !important;
}

.calling-screen-new .credit {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 70px;
    margin: 0 10px 0 10px;
}

.calling-screen-new .credit-text {
    color: blue;
    font-size: 14px;
    line-height: 15px;
}

.top-fixed-bar {
    z-index: 9999;
    position: fixed;
    top: 0px;
    width: 100%;
    text-align: center;
    color: white;
    background-color: rgb(90, 6, 224);
    max-width: var(--screen-width) !important;
}

.mute-audio-msg {
    position: fixed;
    text-align: center;
    font-size: 14px;
    z-index: 9999;
    bottom: 95px;
    width: 100%;
    color: black;
    background-color: rgba(159, 159, 159, 0.574);
    max-width: var(--screen-width) !important;
}

/* The Modal (background) */
.alert-container {
    padding: 10px !important;
    z-index: 999999998 !important;
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: none;
    /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.6);
    /* Black w/ opacity */
}

/* Modal Content/Box */
.alert-box {
    z-index: 99999 !important;
    /* position: fixed; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    box-shadow: 0px 0px 5px 2px #333333;
    border: 1px solid black;
    border-radius: 10px;
    background-color: #f6f4f4;
    width: calc(100vw - 50px);
    max-width: calc(var(--screen-width) - 50px);
    margin: auto !important;
    /* margin-left: 10px !important;
  margin-right: 20px !important; */
    margin-top: 200px !important;
    padding: 5px 10px 10px 10px;
    text-align: center;
}

.alert-box .alert-heading {
    font-size: 18px;
    color: coral;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: -5px;
}

.alert-box .alert-content {
    font-size: 15px;
    color: black;
    font-weight: normal;
}

.alert-box .close-div {
    margin: 0px !important;
}

.alert-box .close-div .close-icon {
    color: black;
    font-size: 20px;
    cursor: pointer;
}

.alert-box .alert-box-btn {
    display: none;
    margin: 7px -7px -7px -7px;
}

.alert-box .alert-txt-btn {
    display: none;
    margin: 3px 0px -3px 0px;
}

.alert-box .alert-txt-btn .alert-footer-flex {
    gap: 40px;
}

.alert-box .alert-box-btn .footer-button-1 {
    width: 100%;
    background-color: green;
    color: white;
    text-align: center;
    padding: 10px 0px 10px 0px;
    border-bottom-left-radius: 10px;
    cursor: pointer;
}

.alert-box .alert-box-btn .footer-button-2 {
    width: 100%;
    background-color: red;
    color: white;
    text-align: center;
    padding: 10px 0px 10px 0px;
    border-bottom-right-radius: 10px;
    cursor: pointer;
}

.alert-box .alert-txt-btn .footer-button-1 {
    color: red;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
}

.alert-box .alert-txt-btn .footer-button-2 {
    color: green;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
}


.local-signal-icon {
    z-index: 9999;
    position: relative;
    top: 0;
    left: 8px;
    height: 18px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 2px;
    width: 90px;
    margin-top: -100px;
}

.remote-signal-icon {
    z-index: 9999;
    position: relative;
    top: 0;
    left: 8px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 2px;
    width: 90px;
    margin-top: -70px;
}

.local-signal-icon .arrow-down-icon,
.local-signal-icon .arrow-up-icon {
    size: 16px;
    opacity: 3%;
    color: #d8db00;
}

.remote-signal-icon .arrow-down-icon,
.remote-signal-icon .arrow-up-icon {
    size: 16px;
    opacity: 3%;
    color: #300090;
}

.local-signal-icon .download,
.local-signal-icon .upload,
.remote-signal-icon .download,
.remote-signal-icon .upload {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 3px;
}

.local-signal-icon .upload,
.local-signal-icon .download,
.remote-signal-icon .upload,
.remote-signal-icon .download {
    height: 18px;
}

.local-signal-icon .download .signal-bar,
.local-signal-icon .upload .signal-bar {
    width: 3px;
    opacity: 3%;
    background: #dbd000;
}

.remote-signal-icon .download .signal-bar,
.remote-signal-icon .upload .signal-bar {
    width: 3px;
    opacity: 3%;
    background: #2e008a;
}

.local-signal-icon .signal-bar:nth-child(1) {
    height: 20%;
}

.local-signal-icon .signal-bar:nth-child(2) {
    height: 40%;
}

.local-signal-icon .signal-bar:nth-child(3) {
    height: 60%;
}

.local-signal-icon .signal-bar:nth-child(4) {
    height: 80%;
}

.local-signal-icon .signal-bar:nth-child(5) {
    height: 100%;
}

.remote-signal-icon .signal-bar:nth-child(1) {
    height: 20%;
}

.remote-signal-icon .signal-bar:nth-child(2) {
    height: 40%;
}

.remote-signal-icon .signal-bar:nth-child(3) {
    height: 60%;
}

.remote-signal-icon .signal-bar:nth-child(4) {
    height: 80%;
}

.remote-signal-icon .signal-bar:nth-child(5) {
    height: 100%;
}


.language_list_heading {
    font-size: 25px;
    font-weight: bold;
    color: rgb(2, 2, 158);
    text-align: center;
    width: 100%;
    border-bottom: 1px solid rgb(154, 154, 207);
}

.language_list_sub_heading {
    font-size: 16px;
    color: rgb(112, 112, 112);
    margin-top: 3px;
    margin-bottom: 20px;
}

.language-list {
    padding: 30px;
}

.language-list .language-list-item,
.animal-list .animal-list-item {
    padding: 5px;
    border-radius: 20px;
    width: 100%;
    color: white;
    background-color: rgb(90, 6, 224);
    border: 1px solid white;
    margin-bottom: 7px;
    cursor: pointer;
}

.language-list .language-list-item:hover,
.animal-list .animal-list-item:hover {
    background-color: white;
    color: rgb(90, 6, 224);
    border: 1px solid rgb(90, 6, 224);
}

.animal_list_heading {
    font-size: 25px;
    font-weight: bold;
    color: rgb(2, 2, 158);
    text-align: center;
    width: 100%;
    border-bottom: 1px solid rgb(154, 154, 207);
}

.animal_list_sub_heading {
    font-size: 16px;
    color: rgb(112, 112, 112);
    margin-top: 3px;
    margin-bottom: 10px;
}

.animal-list {
    padding: 30px;
}

.animal-list-type {
    color: blue;
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 3px;
    font-weight: bold;
}

#user-form-div {
    z-index: 9999999999999;
    background-color: white;
    color: black;
    position: absolute;
    top: 0;
    left: 0;
    height: calc(100vh + 50px);
    width: 100%;
}

#user-form {
    padding: 70px 20px 0px 20px;
}

#user-form-box {
    padding: 10px;
}

.user-form-section {
    margin-bottom: 40px;
    text-align: left !important;
}

.user-form-label {
    font-size: 20px;
    margin: 0px 0px 0px 15px;
}

.user-form-input {
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px rgb(73, 73, 221);
    border: none !important;
    outline: none !important;
    padding: 10px;
    width: calc(100% - 30px);
    margin: 10px 15px 0px 15px;
}

.user-form-input:focus {
    box-shadow: 0px 0px 7px 1px rgb(73, 73, 221);
}

.user-form-submit {
    width: calc(100% - 30px);
    margin: 10px 15px 0px 15px;
    color: white;
    background-color: rgb(90, 6, 224);
    border-radius: 20px;
    margin-top: 18px;
    border: none !important;
    outline: none !important;
    padding: 10px 2px 10px 2px;
}

.user-form-submit:hover {
    background-color: rgb(134, 61, 253);
}

#permission_text {
    margin-top: 5px;
    color: red;
}

.contact-us-link {
    text-decoration: none !important;
    color: white;
}

.contact-us-link-div {
    text-align: center;
    margin: auto;
    background-color: green;
    padding: 5px;
    border-radius: 20px;
    width: 110px;
    margin-top: 5px;
}

.start-ivr-call-btn,
start-support-call-btn {
    margin-bottom: 40px;
}

.start-ivr-call-btn .fa-stack,
.start-support-call-btn .fa-stack {
    font-size: 20px;
}

.start-ivr-call-btn-popover {
    display: none;
}

.start-ivr-call-btn-popover.arrow-box .box {
    border: 1px solid gray;
    margin: 0px 5px 0px 5px;
    width: 300px;
    max-width: calc(100vw - 30px);

}

.start-ivr-call-btn-popover.arrow-box .box .box-heading {
    background-color: rgb(255, 226, 187);
    color: black;
    font-weight: bold;
    padding: 1px;
    text-align: center;
}

.start-ivr-call-btn-popover.arrow-box .box .box-content {
    background-color: rgb(255, 243, 220);
    color: black;
    font-weight: normal;
    padding: 5px;
}

.start-ivr-call-btn-popover.arrow-box .arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid #494949;
    margin: 0px 5px 5px 25px;
}