/* @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200&family=Ubuntu+Mono&display=swap'); */


/* @import url('https://fonts.googleapis.com/css2?family=Anybody:wght@300&display=swap'); */

@import url('https://fonts.googleapis.com/css2?family=Anybody:wght@300;600&display=swap');
body {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1920' height='1080' preserveAspectRatio='none' viewBox='0 0 1920 1080'%3e%3cg clip-path='url(%26quot%3b%23SvgjsClipPath1116%26quot%3b)' fill='none'%3e%3crect width='1920' height='1080' x='0' y='0' fill='%2332325d'%3e%3c/rect%3e%3ccircle r='34.475' cx='1116.79' cy='154.19' fill='url(%23SvgjsLinearGradient1117)'%3e%3c/circle%3e%3ccircle r='106.495' cx='124.1' cy='1035.03' fill='url(%23SvgjsLinearGradient1118)'%3e%3c/circle%3e%3ccircle r='105.765' cx='819.31' cy='295.2' fill='url(%23SvgjsLinearGradient1119)'%3e%3c/circle%3e%3ccircle r='107.73' cx='399.7' cy='345.41' fill='url(%23SvgjsLinearGradient1120)'%3e%3c/circle%3e%3ccircle r='67.18' cx='1153.31' cy='162.72' fill='url(%23SvgjsLinearGradient1121)'%3e%3c/circle%3e%3ccircle r='94.3' cx='730.89' cy='767.93' fill='url(%23SvgjsLinearGradient1122)'%3e%3c/circle%3e%3ccircle r='53.865' cx='25.02' cy='746.61' fill='%2343468b'%3e%3c/circle%3e%3ccircle r='67.545' cx='1475.17' cy='450.63' fill='%2343468b'%3e%3c/circle%3e%3c/g%3e%3cdefs%3e%3cclipPath id='SvgjsClipPath1116'%3e%3crect width='1920' height='1080' x='0' y='0'%3e%3c/rect%3e%3c/clipPath%3e%3clinearGradient x1='1047.84' y1='154.19' x2='1185.74' y2='154.19' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1117'%3e%3cstop stop-color='%2384b6e0' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%23464a8f' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='-88.89000000000001' y1='1035.03' x2='337.09000000000003' y2='1035.03' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1118'%3e%3cstop stop-color='%23e298de' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%23484687' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='607.78' y1='295.2' x2='1030.84' y2='295.2' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1119'%3e%3cstop stop-color='%23e298de' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%23484687' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='184.23999999999998' y1='345.41' x2='615.16' y2='345.41' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1120'%3e%3cstop stop-color='%23ab3c51' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%234f4484' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='1018.9499999999999' y1='162.72' x2='1287.67' y2='162.72' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1121'%3e%3cstop stop-color='%23ab3c51' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%234f4484' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='542.29' y1='767.93' x2='919.49' y2='767.93' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1122'%3e%3cstop stop-color='%2384b6e0' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%23464a8f' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
    padding-bottom: 70px;
    /* font-family: 'Roboto Mono', monospace; */
    font-family: 'Anybody', cursive;
}

.logo {
    max-height: 200px;
}

.bg-main {
    --bs-bg-opacity: 1;
    background-color: rgba(145, 62, 95, var(--bs-bg-opacity))!important;
}

i.fa-solid.fa-bolt-lightning,
i.fa-solid.fa-plug-circle-exclamation,
.helptip {
    cursor: help;
}

.helptip.underline {
    text-decoration-line: underline;
    text-decoration-style: dotted;
}

.popover {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity))!important;
    --bs-text-opacity: 1;
    color: #fff;
    max-width: 800px;
}

.popover-header {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity))!important;
    --bs-text-opacity: 1;
    color: #fff;
}

h2 {
    text-transform: uppercase;
    /* font-family: 'Ubuntu Mono', monospace; */
    font-family: 'Anybody', cursive;
    font-weight: 600;
}

.btn-main {
    background-color: rgb(255, 38, 124);
}

.login-page {
    margin-top: 15vh;
}

.login-page .card {
    width: 50%;
    margin: auto;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper input {
    color: #fff;
}

.dataTables_wrapper select {
    color: #fff;
    background-color: black !important;
}


/* .form-floating>.form-control {
    background-color: rgb(71, 71, 71) !important;
    color: white !important;
} */

.form-floating>.form-control:-webkit-autofill {}

.rainbow-text {
    background-image: linear-gradient(to left, violet, rgb(176, 67, 253), rgb(0, 153, 255), green, yellow, orange, red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.lds-facebook {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-facebook div {
    display: inline-block;
    position: absolute;
    left: 8px;
    width: 16px;
    background: #fff;
    animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}

.lds-facebook div:nth-child(1) {
    left: 8px;
    animation-delay: -0.24s;
}

.lds-facebook div:nth-child(2) {
    left: 32px;
    animation-delay: -0.12s;
}

.lds-facebook div:nth-child(3) {
    left: 56px;
    animation-delay: 0;
}

@keyframes lds-facebook {
    0% {
        top: 8px;
        height: 64px;
    }
    50%,
    100% {
        top: 24px;
        height: 32px;
    }
}


/* input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    background-color: gray !important;
    color: white !important;
    border: 1px solid white;
    -webkit-text-fill-color: white;
    -webkit-box-shadow: 0 0 0px 1000px gray inset;
    transition: background-color 5000s ease-in-out 0s;
} */

.phone-li {
    cursor: pointer;
}

.phone-li:hover {
    color: red;
    text-decoration: underline;
}

@media screen and (max-width: 991px) {
    .login-page .card {
        width: 90%;
    }
}