@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap");
html,
body {
    overflow-x: hidden;
    background-color: #eef1f8;
    font-family: "Roboto", sans-serif;
}

.circle1,
.circle2 {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background-color: rgba(46, 139, 245, 0.418);
    overflow: hidden;
    z-index: 1;
}

.circle1 {
    position: fixed;
    right: -100px;
    top: -80px;
}

.circle2 {
    position: fixed;
    left: -100px;
    bottom: -100px;
}

.login header {
    padding: 4px 10px;
    width: auto;
    margin: 30px;
    background: rgba(153, 179, 245, 0.9);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.login header span {
    font-size: 36px;
    color: #474747;
    font-weight: 600;
}
.login .login-inputs {
    gap: 30px;
    background-color: #fff;
    border-radius: 20px;
    padding: 50px;
    margin: 30px;
    max-width: 760px;
    position: relative;
    z-index: 2;
}
.login .login-inputs span {
    background: #5138ee;
    width: 0%;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    transition: 0.5s;
}
.login .login-inputs ::-moz-placeholder {
    color: rgb(48, 48, 48);
}
.login .login-inputs ::placeholder {
    color: rgb(48, 48, 48);
}
.login .login-inputs input,
.login .login-inputs select {
    width: 100%;
    padding: 20px;
    border: none;
    border-bottom: 1px solid #ced4da;
    color: rgb(48, 48, 48);
    border-width: 0%;
    position: relative;
}
.login .login-inputs input:hover,
.login .login-inputs select:hover {
    border-bottom: 1px solid #5138ee;
}
.login .login-inputs :focus {
    outline: none;
}
.login .login-inputs input:focus ~ span,
.login .login-inputs select:focus ~ span {
    width: 100% !important;
    transition: 0.5s ease;
}
.login .login-inputs input:after,
.login .login-inputs select:after {
    content: "";
    position: absolute;
    height: 2px;
    background-color: #5138ee;
    width: 0%;
    bottom: 0;
    left: 0;
}
.login .login-inputs .input-group {
    width: 100%;
    position: relative;
    border: 2px solid #9e9da3;
    border-radius: 8px;
    font-weight: 500;
}
.login .login-inputs .input-group input,
.login .login-inputs .input-group select {
    padding: 16px 24px;
    border: none;
    background-color: transparent;
    width: 100%;
    color: #1a1a1a;
    font-size: 16px;
}
.login .login-inputs .input-group:hover,
.login .login-inputs .input-group:focus-within {
    border-color: #5138ee;
}
.login .login-inputs .input-group input:focus,
.login .login-inputs .input-group select:focus,
.login .login-inputs .input-group:hover input,
.login .login-inputs .input-group:hover select {
    color: #1a1a1a;
}
.login .login-inputs .input-group label {
    position: absolute;
    background-color: transparent;
    padding: 16px 24px;
    top: 0;
    left: 0;
    bottom: 0;
    color: #525252;
    cursor: text;
}
.login .login-inputs .input-group:hover label {
    color: #5138ee;
    font-weight: 500;
}
.login .login-inputs .input-group input:not(:-moz-placeholder-shown) ~ label,
.login .login-inputs .input-group select:not(:-moz-placeholder-shown) ~ label {
    padding: 0px 8px;
    background-color: #ffffff;
    top: -12px;
    left: 16px;
    bottom: auto;
    color: rgb(48, 48, 48);
    -moz-transition: 0.2s ease;
    transition: 0.2s ease;
}
.login .login-inputs .input-group:focus-within label,
.login .login-inputs .input-group input:not(:placeholder-shown) ~ label,
.login .login-inputs .input-group select:not(:placeholder-shown) ~ label {
    padding: 0px 8px;
    background-color: #ffffff;
    top: -12px;
    left: 16px;
    bottom: auto;
    color: rgb(48, 48, 48);
    transition: 0.2s ease;
}
.login .login-inputs :focus {
    outline: none;
}
.login .login-inputs button {
    background: #0040e6;
    border-radius: 50px;
    cursor: pointer;
    border: none;
    padding: 7px 50px;
    color: #fff;
    font-weight: 500;
    font-size: 18px;
}
.login .login-inputs button:hover {
    background: #0032b3;
}

.patient-registration header {
    padding: 4px 10px;
    width:auto;
    overflow-x: visible;
    margin: 30px;
    background: rgba(153, 179, 245, 0.9);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
    max-width: 760px;
}
.patient-registration header span {
    font-size: 36px;
    color: #474747;
    font-weight: 600;
}
.patient-registration .patient-inputs {
    gap: 30px;
    background-color: #fff;
    border-radius: 20px;
    padding: 50px;
    margin: 30px;
    width: 100%;
    max-width: 760px;
    position: relative;
    z-index: 2;
}
.patient-registration .patient-inputs .box {
    width: 100%;
    justify-content: space-between;
    gap: 30px;
}
.patient-registration .patient-inputs span {
    background: #5138ee;
    width: 0%;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    transition: 0.5s;
}
.patient-registration .patient-inputs .countrycode {
    width: 20%;
}
.patient-registration .patient-inputs .phone {
    width: 80%;
}

.patient-registration .patient-inputs .input-group {
    width: 100%;
    position: relative;
    border: 2px solid #9e9da3;
    border-radius: 8px;
    font-weight: 500;
}
.patient-registration .patient-inputs .input-group input,
.patient-registration .patient-inputs .input-group select {
    padding: 16px 24px;
    border: none;
    background-color: transparent;
    width: 100%;
    color: #1a1a1a;
    font-size: 16px;
}
.patient-registration .patient-inputs .input-group:hover,
.patient-registration .patient-inputs .input-group:focus-within {
    border-color: #5138ee;
}
.patient-registration .patient-inputs .input-group input:focus,
.patient-registration .patient-inputs .input-group select:focus,
.patient-registration .patient-inputs .input-group:hover input,
.patient-registration .patient-inputs .input-group:hover select {
    color: #1a1a1a;
}
.patient-registration .patient-inputs .input-group label {
    position: absolute;
    background-color: transparent;
    padding: 16px 24px;
    top: 0;
    left: 0;
    bottom: 0;
    color: #525252;
    cursor: text;
}
.patient-registration .patient-inputs .input-group:hover label {
    color: #5138ee;
    font-weight: 500;
}
.patient-registration
    .patient-inputs
    .input-group
    input:not(:-moz-placeholder-shown)
    ~ label,
.patient-registration
    .patient-inputs
    .input-group
    select:not(:-moz-placeholder-shown)
    ~ label {
    padding: 0px 8px;
    background-color: #ffffff;
    top: -12px;
    left: 16px;
    bottom: auto;
    color: rgb(48, 48, 48);
    -moz-transition: 0.2s ease;
    transition: 0.2s ease;
}
.patient-registration .patient-inputs .input-group:focus-within label,
.patient-registration
    .patient-inputs
    .input-group
    input:not(:placeholder-shown)
    ~ label,
.patient-registration
    .patient-inputs
    .input-group
    select:not(:placeholder-shown)
    ~ label {
    padding: 0px 8px;
    background-color: #ffffff;
    top: -12px;
    left: 16px;
    bottom: auto;
    color: rgb(48, 48, 48);
    transition: 0.2s ease;
}
.patient-registration .patient-inputs :focus {
    outline: none;
}
.patient-registration .patient-inputs button {
    background: #0040e6;
    border-radius: 50px;
    cursor: pointer;
    border: none;
    padding: 7px 50px;
    color: #fff;
    font-weight: 500;
    font-size: 18px;
}
.patient-registration .patient-inputs button:hover {
    background: #0032b3;
}
.patient-registration .patient .input-group {
    width: 360px;
    position: relative;
    border: 3px solid #bbbbbb;
    border-radius: 8px;
    margin: 32px;
}
.patient-registration .patient .input-group input {
    padding: 16px 24px;
    border: none;
    background-color: transparent;
    width: 100%;
    color: #363636;
    font-size: 16px;
    line-height: 24px;
}
.patient-registration .patient .input-group:hover,
.patient-registration .patient .input-group:focus-within {
    border-color: #1bbeff;
}
.patient-registration .patient .input-group input:focus,
.patient-registration .patient .input-group:hover input {
    color: #1bbeff;
}
.patient-registration .patient .input-group label {
    position: absolute;
    background-color: transparent;
    padding: 16px 24px;
    line-height: 24px;
    top: 0;
    left: 0;
    bottom: 0;
    color: #898989;
    cursor: text;
}
.patient-registration .patient .input-group:hover label {
    color: #1bbeff;
}
.patient-registration
    .patient
    .input-group
    input:not(:-moz-placeholder-shown)
    ~ label {
    padding: 0px 8px;
    background-color: #ffffff;
    top: -12px;
    left: 16px;
    bottom: auto;
    color: #363636;
}
.patient-registration .patient .input-group:focus-within label,
.patient-registration
    .patient
    .input-group
    input:not(:placeholder-shown)
    ~ label {
    padding: 0px 8px;
    background-color: #ffffff;
    top: -12px;
    left: 16px;
    bottom: auto;
    color: #363636;
}
.patient-registration .patient :focus {
    outline: none;
}

.patient-image header {
    padding: 4px 8px;
    width: auto;
    background: rgba(153, 179, 245, 0.9);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
    max-width: 760px;
}
.patient-image header span {
    font-size: 36px;
    color: #474747;
    font-weight: 600;
}
.patient-image .patient-profile {
    background: #ffffff;
    box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.205);
    padding: 20px 40px;
    min-width: 165px;
    width: 100%;
    max-width: 760px;
    min-height: 120px;
    border-radius: 10px;
    font-weight: 500;
    position: relative;
    z-index: 2;
}
.patient-image .patient-profile .name {
    font-size: 30px;
    color: rgb(54, 54, 54);
}
.patient-image .patient-profile .sex {
    color: #3366eb;
}
.patient-image .patient-profile .dob {
    font-size: 16px;
    color: #3366eb;
}
.patient-image .patient-profile .age {
    font-size: 20px;
    color: #3366eb;
}
.patient-image .patient-profile .phone {
    font-size: 22px;
    font-weight: 600;
    color: rgb(54, 54, 54);
}
.patient-image .basic-info {
    width: 100%;
    max-width: 760px;
    position: relative;
    z-index: 2;
}
.patient-image .basic-info .row {
    width: 100%;
    gap: 16px;
}
.patient-image .basic-info .info-box {
    background: #ffffff;
    box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.205);
    padding: 20px;
    min-width: 165px;
    width: 218px;
    height: 120px;
    justify-content: space-between;
    border-radius: 10px;
}
.patient-image .basic-info .info-box .key {
    font-size: 16px;
    font-weight: 500;
    color: rgb(54, 54, 54);
}
.patient-image .basic-info .info-box .values {
    font-size: 18px;
    font-weight: 500;
    color: #3366eb;
}
.patient-image .eye-image {
    width: 100%;
    max-width: 760px;
    min-height: 320px;
    gap: 8px;
    background: #ffffff;
    box-shadow: 0px 0px 15px 8px rgba(155, 155, 155, 0.25);
    border-radius: 20px;
    padding: 30px;
    margin: 30px;
    position: relative;
    z-index: 2;
}
.patient-image .eye-image .right-eye,
.patient-image .eye-image .left-eye,
.patient-image .eye-image img {
    width: 300px;
    height: 300px;
    -o-object-fit: contain;
    object-fit: contain;
    background: transparent;
    text-align: center;
    font-weight: 500;
    font-size: 32px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.patientReportOptions header {
    padding: 4px 10px;
    width: 110px;
    margin: 30px;
    background: rgba(153, 179, 245, 0.63);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.patientReportOptions header span {
    font-size: 36px;
    color: #474747;
    font-weight: 600;
}
.patientReportOptions .btn {
    gap: 10px;
}
.patientReportOptions .btn button {
    background: #0040e6;
    border-radius: 50px;
    cursor: pointer;
    border: none;
    padding: 7px 50px;
    color: #fff;
    font-weight: 500;
    font-size: 18px;
}
.patientReportOptions .btn button:hover {
    background: #0032b3;
}

.report header {
    padding: 4px 8px;
    width: auto;
    background: rgba(204, 218, 253, 0.9);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.report header span {
    font-size: 34px;
    color: #474747;
    font-weight: 600;
}
.report .print-btn {
    width: 100%;
}
.report .print-btn button {
    background: #0040e6;
    border-radius: 50px;
    cursor: pointer;
    border: none;
    padding: 7px 20px;
    color: #fff;
    font-weight: 500;
    font-size: 18px;
}
.report .print-btn button:hover {
    background: #0032b3;
}
.report .print-btn :focus {
    outline: none;
}
.report .patient-profile {
    background: #ffffff;
    padding: 20px 40px;
    min-width: 165px;
    width: 100%;
    min-height: 120px;
    border-radius: 10px;
    font-weight: 500;
    position: relative;
    z-index: 2;
    color: rgb(54, 54, 54);
    font-weight: 500;
    font-size: 18px;
}
.report .patient-profile .id,
.report .patient-profile .date {
    font-size: 14px;
}
.report .eye-image {
    width: 100%;
    min-height: 320px;
    background: #ffffff;
    border-radius: 20px;
    padding: 30px;
    margin: 30px;
    position: relative;
    z-index: 2;
    gap: 30px;
}
.report .eye-image .image-box {
    gap: 30px;
}
.report .eye-image hr {
    margin: 5px 0px;
    border: none;
    height: 0.5px;
    background-color: rgb(122, 122, 122);
}
.report .eye-image .right-eye,
.report .eye-image .left-eye,
.report .eye-image img {
    width: 100%;
    max-width: 400px;
    -o-object-fit: contain;
    object-fit: contain;
}
.report .eye-image .diagnostics {
    gap: 20px;
}
.report .eye-image .diagnostics span {
    color: rgb(54, 54, 54);
    font-weight: 600;
    font-size: 14px;
}
.report .eye-image .diagnostics .report-eye-inputs {
    font-size: 18px;
    font-weight: 500;
    gap: 15px;
}
.report .eye-image .diagnostics .report-eye-inputs .check {
    width: 14px;
    height: 14px;
}
.report .eye-image .diagnostics .report-eye-inputs label {
    gap: 5px;
}
.report .eye-image .result {
    color: rgb(54, 54, 54);
    font-weight: 600;
    font-size: 16px;
}
.report .eye-image .result p,
.report .eye-image .result li,
.report .eye-image .result ul {
    margin: 5px;
    color: rgb(97, 97, 97);
    font-size: 12px;
}
.report .eye-image .remarks {
    color: rgb(54, 54, 54);
    font-weight: 600;
    font-size: 16px;
}
.report .eye-image .remarks .remarks-input {
    width: 100%;
}
.report .eye-image .sign {
    color: rgb(54, 54, 54);
    font-weight: 600;
    font-size: 16px;
}
.report footer .foot-text {
    font-size: 14px;
}
.report footer hr {
    margin: 5px 0px;
    border: none;
    height: 0.5px;
    background-color: rgb(122, 122, 122);
}

.display-uploads header {
    padding: 4px 10px;
    width: 110px;
    margin: 30px;
    background: rgba(153, 179, 245, 0.63);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.display-uploads header span {
    font-size: 36px;
    color: #474747;
    font-weight: 600;
}
.display-uploads .data-container {
    width: 100%;
    max-width: 760px;
    gap: 20px;
    position: relative;
    z-index: 2;
}
.display-uploads .data-container .info-box {
    background: #ffffff;
    box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.205);
    padding: 20px;
    width: 100%;
    height: 120px;
    justify-content: space-between;
    border-radius: 10px;
}
.display-uploads .data-container .info-box .key {
    font-size: 16px;
    font-weight: 500;
    color: rgb(54, 54, 54);
}
.display-uploads .data-container .info-box .values {
    font-size: 32px;
    font-weight: 500;
    color: #3366eb;
    text-align: right;
}

.dashboard header {
    padding: 4px 10px;
    width: auto;
    margin: 30px;
    background: rgba(153, 179, 245, 0.9);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.dashboard header span {
    font-size: 36px;
    color: #474747;
    font-weight: 600;
}
.dashboard .basic-info {
    width: 100%;
    position: relative;
    z-index: 2;
}
.dashboard .basic-info .row {
    width: 100%;
    position: relative;
}
.dashboard .basic-info .info-box {
    background: #ffffff;
    box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.205);
    padding: 20px;
    min-width: 165px;
    height: 120px;
    justify-content: space-between;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}
.dashboard .basic-info .info-box .key {
    font-size: 16px;
    font-weight: 500;
    color: rgb(54, 54, 54);
}
.dashboard .basic-info .info-box .values {
    font-size: 32px;
    font-weight: 500;
    color: #3366eb;
    line-height: 1;
}
.dashboard .basic-info .info-box .icon-border {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 48px;
    height: 48px;
    padding: 12px;
    border-radius: 50%;
    background-color: #e6efff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dashboard .btn-inputs {
    border-radius: 20px;
    margin: 30px;
    max-width: 760px;
    position: relative;
    z-index: 2;
}
.dashboard .btn-inputs button {
    background: #0040e6;
    border-radius: 50px;
    cursor: pointer;
    border: none;
    padding: 7px 50px;
    color: #fff;
    font-weight: 500;
    font-size: 18px;
}
.dashboard .btn-inputs button:hover {
    background: #0032b3;
}
.dashboard .patient-profile,
.dashboard .installation-guide,
.dashboard .data-table {
    background: #ffffff;
    box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.205);
    padding: 20px 40px;
    min-width: 165px;
    width: 100%;
    min-height: 120px;
    border-radius: 10px;
    font-weight: 500;
    position: relative;
    z-index: 2;
    font-size: 20px;
    color: #363636;
}
.dashboard .patient-profile p,
.dashboard .installation-guide p,
.dashboard .data-table p {
    font-size: 16px;
}
.dashboard .tablecontainer {
    border-radius: 4px;
    border: none;
    box-shadow: 0px 0px 15px rgba(144, 144, 144, 0.3);
    padding: 0;
}
.dashboard .data-table {
    min-height: 100px;
    overflow-y: auto;
    padding: 0;
    background-color: white !important;
    /* Hide scrollbar for Firefox, IE and Edge */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.dashboard .data-table::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #ffffff;
}
.dashboard .data-table::-webkit-scrollbar-thumb {
    width: 5px;
    background-color: #838383; /* color of the scroll thumb */
    border-radius: 10px; /* roundness of the scroll thumb */
    border: 3px solid #838383; /* creates padding around scroll thumb */
}

.image-upload header {
    padding: 4px 10px;
    width: 180px;
    margin: 30px;
    background: rgba(153, 179, 245, 0.63);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.image-upload header span {
    font-size: 36px;
    color: #474747;
    font-weight: 600;
}
.image-upload .image-upload-inputs {
    gap: 30px;
    background-color: #fff;
    border-radius: 20px;
    padding: 50px;
    margin: 30px;
    max-width: 760px;
    position: relative;
    z-index: 2;
    box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.205);
}
.image-upload .image-upload-inputs span {
    background: #5138ee;
    width: 0%;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    transition: 0.5s;
}
.image-upload .image-upload-inputs ::-moz-placeholder {
    color: rgb(48, 48, 48);
}
.image-upload .image-upload-inputs ::placeholder {
    color: rgb(48, 48, 48);
}
.image-upload .image-upload-inputs input,
.image-upload .image-upload-inputs select {
    width: 100%;
    padding: 20px;
    border: none;
    border-bottom: 1px solid #ced4da;
    color: rgb(48, 48, 48);
    border-width: 0%;
    position: relative;
}
.image-upload .image-upload-inputs input:hover,
.image-upload .image-upload-inputs select:hover {
    border-bottom: 1px solid #5138ee;
}
.image-upload .image-upload-inputs :focus {
    outline: none;
}
.image-upload .image-upload-inputs input:focus ~ span,
.image-upload .image-upload-inputs select:focus ~ span {
    width: 100% !important;
    transition: 0.5s ease;
}
.image-upload .image-upload-inputs input:after,
.image-upload .image-upload-inputs select:after {
    content: "";
    position: absolute;
    height: 2px;
    background-color: #5138ee;
    width: 0%;
    bottom: 0;
    left: 0;
}
.image-upload .image-upload-inputs .file-input {
    background-color: rgba(196, 196, 196, 0.2823529412);
}
.image-upload .image-upload-inputs button {
    background: #0040e6;
    border-radius: 50px;
    cursor: pointer;
    border: none;
    padding: 7px 50px;
    color: #fff;
    font-weight: 500;
    font-size: 18px;
}
.image-upload .image-upload-inputs button:hover {
    background: #0032b3;
}

@media (max-width: 767px) {
    .patient-image .patient-profile .name {
        font-size: 24px;
    }
    .patient-image .patient-profile .dob {
        font-size: 14px;
    }
    .patient-image .patient-profile .age {
        font-size: 16px;
    }
    .patient-image .patient-profile .phone {
        font-size: 18px;
    }
    .patient-image .basic-info .info-box {
        width: 100%;
    }
    .patient-image .eye-image .right-eye,
    .patient-image .eye-image .left-eye,
    .patient-image .eye-image img {
        width: 100%;
        height: unset;
    }
    .report .eye-image .diagnostics .report-eye-inputs {
        font-size: 16px;
        font-weight: 500;
        gap: 8px;
    }
    .report .eye-image .diagnostics .report-eye-inputs .check {
        width: 15px;
        height: 15px;
    }
    .report .eye-image .diagnostics .report-eye-inputs label {
        gap: 5px;
    }
}
@media (max-width: 389px) {
    .report .patient-profile {
        font-size: 14px;
    }
    .report .patient-profile .id,
    .report .patient-profile .date {
        font-size: 10px;
    }
    .report .eye-image .diagnostics .report-eye-inputs {
        font-size: 14px;
        font-weight: 500;
        gap: 5px;
    }
    .report .eye-image .diagnostics .report-eye-inputs .check {
        width: 12px;
        height: 12px;
    }
    .report .eye-image .diagnostics .report-eye-inputs label {
        gap: 3px;
    }
    .report .eye-image .result {
        font-size: 12px;
    }
    .report .eye-image .result p,
    .report .eye-image .result li,
    .report .eye-image .result ul {
        font-size: 8px;
    }
    .report .eye-image .sign {
        font-size: 14px;
    }
}
table.dataTable.display > tbody > tr.odd > .sorting_1,
table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_1 {
    box-shadow: none !important;
}

table.dataTable.stripe > tbody > tr.odd > *,
table.dataTable.display > tbody > tr.odd > * {
    box-shadow: none !important;
}

table.dataTable.display > tbody > tr.even > .sorting_1,
table.dataTable.order-column.stripe > tbody > tr.even > .sorting_1 {
    box-shadow: none !important;
}

.table-hover tbody tr:hover {
    color: #212529;
    background-color: rgba(157, 198, 247, 0.5);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: white !important;
    background: #0040e6 !important;
    border-radius: 50%;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border-radius: 50%;
    color: black !important;
    background: #9dc6f7;
    border: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous {
    border-radius: 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    border-radius: 0;
}

select:focus-visible {
    outline: none;
}

.dataTables_wrapper .dataTables_length select {
    width: 6rem;
}

.image-upload header {
    padding: 4px 10px;
    width: 150px;
    overflow-x: visible;
    margin: 30px;
    background: rgba(153, 179, 245, 0.63);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.image-upload header span {
    font-size: 36px;
    color: #474747;
    font-weight: 600;
}
.image-upload .image-upload-inputs {
    gap: 30px;
    background-color: #fff;
    border-radius: 20px;
    margin: 30px;
    width: 100%;
    max-width: 760px;
    position: relative;
    z-index: 2;
}
.image-upload .image-upload-inputs .box {
    width: 100%;
    justify-content: space-between;
    gap: 30px;
}
.image-upload .image-upload-inputs span {
    background: #5138ee;
    width: 0%;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    transition: 0.5s;
}
.image-upload .image-upload-inputs .countrycode {
    width: 20%;
}
.image-upload .image-upload-inputs .phone {
    width: 80%;
}
.image-upload .image-upload-inputs .input-group {
    width: 100%;
    position: relative;
    border: 2px solid #9e9da3;
    border-radius: 8px;
    font-weight: 500;
}
.image-upload .image-upload-inputs .input-group input,
.image-upload .image-upload-inputs .input-group select {
    padding: 16px 24px;
    border: none;
    background-color: transparent;
    width: 100%;
    color: #1a1a1a;
    font-size: 16px;
}
.image-upload .image-upload-inputs .input-group:hover,
.image-upload .image-upload-inputs .input-group:focus-within {
    border-color: #5138ee;
}
.image-upload .image-upload-inputs .input-group input:focus,
.image-upload .image-upload-inputs .input-group select:focus,
.image-upload .image-upload-inputs .input-group:hover input,
.image-upload .image-upload-inputs .input-group:hover select {
    color: #1a1a1a;
}
.image-upload .image-upload-inputs .input-group label {
    position: absolute;
    background-color: transparent;
    padding: 16px 24px;
    top: 0;
    left: 0;
    bottom: 0;
    color: #525252;
    cursor: text;
}
.image-upload .image-upload-inputs .input-group:hover label {
    color: #5138ee;
    font-weight: 500;
}
.image-upload
    .image-upload-inputs
    .input-group
    input:not(:-moz-placeholder-shown)
    ~ label,
.image-upload
    .image-upload-inputs
    .input-group
    select:not(:-moz-placeholder-shown)
    ~ label {
    padding: 0px 8px;
    background-color: #ffffff;
    top: -12px;
    left: 16px;
    bottom: auto;
    color: rgb(48, 48, 48);
    -moz-transition: 0.2s ease;
    transition: 0.2s ease;
}
.image-upload .image-upload-inputs .input-group:focus-within label,
.image-upload
    .image-upload-inputs
    .input-group
    input:not(:placeholder-shown)
    ~ label,
.image-upload
    .image-upload-inputs
    .input-group
    select:not(:placeholder-shown)
    ~ label {
    padding: 0px 8px;
    background-color: #ffffff;
    top: -12px;
    left: 16px;
    bottom: auto;
    color: rgb(48, 48, 48);
    transition: 0.2s ease;
}
.image-upload .image-upload-inputs :focus {
    outline: none;
}
.image-upload .image-upload-inputs button {
    background: #0040e6;
    border-radius: 50px;
    cursor: pointer;
    border: none;
    padding: 7px 50px;
    color: #fff;
    font-weight: 500;
    font-size: 18px;
}
.image-upload .image-upload-inputs button:hover {
    background: #0032b3;
}
.image-upload .image-upload .input-group {
    width: 360px;
    position: relative;
    border: 3px solid #bbbbbb;
    border-radius: 8px;
    margin: 32px;
}
.image-upload .image-upload .input-group input {
    padding: 16px 24px;
    border: none;
    background-color: transparent;
    width: 100%;
    color: #363636;
    font-size: 16px;
    line-height: 24px;
}
.image-upload .image-upload .input-group:hover,
.image-upload .image-upload .input-group:focus-within {
    border-color: #1bbeff;
}
.image-upload .image-upload .input-group input:focus,
.image-upload .image-upload .input-group:hover input {
    color: #1bbeff;
}
.image-upload .image-upload .input-group label {
    position: absolute;
    background-color: transparent;
    padding: 16px 24px;
    line-height: 24px;
    top: 0;
    left: 0;
    bottom: 0;
    color: #898989;
    cursor: text;
}
.image-upload .image-upload .input-group:hover label {
    color: #1bbeff;
}
.image-upload
    .image-upload
    .input-group
    input:not(:-moz-placeholder-shown)
    ~ label {
    padding: 0px 8px;
    background-color: #ffffff;
    top: -12px;
    left: 16px;
    bottom: auto;
    color: #363636;
}
.image-upload .image-upload .input-group:focus-within label,
.image-upload .image-upload .input-group input:not(:placeholder-shown) ~ label {
    padding: 0px 8px;
    background-color: #ffffff;
    top: -12px;
    left: 16px;
    bottom: auto;
    color: #363636;
}
.image-upload .image-upload :focus {
    outline: none;
} /*# sourceMappingURL=style.css.map */

.btns {
    width: 100% !important;
}

.btns .btn-inputs {
    width: 48% !important;
}

.cta {
    background: #0040e6;
    border-radius: 50px;
    cursor: pointer;
    border: none;
    padding: 7px 50px;
    color: #fff;
    font-weight: 500;
    font-size: 18px;
    margin-left: 50%;
    transform: translateX(-50%);
    width: max-content;
}

.cta:hover {
    color: white !important;
}

#report-table th,
#report-table td {
    padding: 0.75rem 0.5rem;
    font-size: 95%;
}