@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
a {
    color: #ffffff;
    text-decoration: none;
}
.h-1px {
    height: 1px!important
}

.h-2px {
    height: 2px!important
}

.h-3px {
    height: 3px!important
}

.h-4px {
    height: 4px!important
}

.h-5px {
    height: 5px!important
}

.h-6px {
    height: 6px!important
}

.h-7px {
    height: 7px!important
}

.h-8px {
    height: 8px!important
}

.h-9px {
    height: 9px!important
}

.h-10px {
    height: 10px!important
}

.h-15px {
    height: 15px!important
}

.h-20px {
    height: 20px!important
}

.h-25px {
    height: 25px!important
}

.h-30px {
    height: 30px!important
}

.h-35px {
    height: 35px!important
}

.h-40px {
    height: 40px!important
}

.h-45px {
    height: 45px!important
}

.h-50px {
    height: 50px!important
}

.h-55px {
    height: 55px!important
}

.h-60px {
    height: 60px!important
}

.h-65px {
    height: 65px!important
}

.h-70px {
    height: 70px!important
}

.h-75px {
    height: 75px!important
}

.h-80px {
    height: 80px!important
}

.h-85px {
    height: 85px!important
}

.h-90px {
    height: 90px!important
}

.h-95px {
    height: 95px!important
}

.h-100px {
    height: 100px!important
}

.h-125px {
    height: 125px!important
}

.h-150px {
    height: 150px!important
}

.h-175px {
    height: 175px!important
}

.h-200px {
    height: 200px!important
}

.h-225px {
    height: 225px!important
}

.h-250px {
    height: 250px!important
}

.h-275px {
    height: 275px!important
}

.h-300px {
    height: 300px!important
}

.h-325px {
    height: 325px!important
}

.h-350px {
    height: 350px!important
}

.h-375px {
    height: 375px!important
}

.h-400px {
    height: 400px!important
}

.h-425px {
    height: 425px!important
}

.h-450px {
    height: 450px!important
}

.h-475px {
    height: 475px!important
}

.h-500px {
    height: 500px!important
}

.h-550px {
    height: 550px!important
}

.h-600px {
    height: 600px!important
}

.h-650px {
    height: 650px!important
}

.h-700px {
    height: 700px!important
}

.h-750px {
    height: 750px!important
}

.h-800px {
    height: 800px!important
}

.h-850px {
    height: 850px!important
}

.h-900px {
    height: 900px!important
}

.h-950px {
    height: 950px!important
}

.h-1000px {
    height: 1000px!important
}
.w-1px {
    width: 1px!important
}

.w-2px {
    width: 2px!important
}

.w-3px {
    width: 3px!important
}

.w-4px {
    width: 4px!important
}

.w-5px {
    width: 5px!important
}

.w-6px {
    width: 6px!important
}

.w-7px {
    width: 7px!important
}

.w-8px {
    width: 8px!important
}

.w-9px {
    width: 9px!important
}

.w-10px {
    width: 10px!important
}

.w-15px {
    width: 15px!important
}

.w-20px {
    width: 20px!important
}

.w-25px {
    width: 25px!important
}

.w-30px {
    width: 30px!important
}

.w-35px {
    width: 35px!important
}

.w-40px {
    width: 40px!important
}

.w-45px {
    width: 45px!important
}

.w-50px {
    width: 50px!important
}

.w-55px {
    width: 55px!important
}

.w-60px {
    width: 60px!important
}

.w-65px {
    width: 65px!important
}

.w-70px {
    width: 70px!important
}

.w-75px {
    width: 75px!important
}

.w-80px {
    width: 80px!important
}

.w-85px {
    width: 85px!important
}

.w-90px {
    width: 90px!important
}

.w-95px {
    width: 95px!important
}

.w-100px {
    width: 100px!important
}

.w-125px {
    width: 125px!important
}

.w-150px {
    width: 150px!important
}

.w-175px {
    width: 175px!important
}

.w-200px {
    width: 200px!important
}

.w-225px {
    width: 225px!important
}

.w-250px {
    width: 250px!important
}

.w-275px {
    width: 275px!important
}

.w-300px {
    width: 300px!important
}

.w-325px {
    width: 325px!important
}

.w-350px {
    width: 350px!important
}

.w-375px {
    width: 375px!important
}

.w-400px {
    width: 400px!important
}

.w-425px {
    width: 425px!important
}

.w-450px {
    width: 450px!important
}

.w-475px {
    width: 475px!important
}

.w-500px {
    width: 500px!important
}

.w-550px {
    width: 550px!important
}

.w-600px {
    width: 600px!important
}

.w-650px {
    width: 650px!important
}

.w-700px {
    width: 700px!important
}

.w-750px {
    width: 750px!important
}

.w-800px {
    width: 800px!important
}

.w-850px {
    width: 850px!important
}

.w-900px {
    width: 900px!important
}

.w-950px {
    width: 950px!important
}

.w-1000px {
    width: 1000px!important
}
.h-min-1px {
    min-height: 1px!important
}

.h-min-2px {
    min-height: 2px!important
}

.h-min-3px {
    min-height: 3px!important
}

.h-min-4px {
    min-height: 4px!important
}

.h-min-5px {
    min-height: 5px!important
}

.h-min-6px {
    min-height: 6px!important
}

.h-min-7px {
    min-height: 7px!important
}

.h-min-8px {
    min-height: 8px!important
}

.h-min-9px {
    min-height: 9px!important
}

.h-min-10px {
    min-height: 10px!important
}

.h-min-15px {
    min-height: 15px!important
}

.h-min-20px {
    min-height: 20px!important
}

.h-min-25px {
    min-height: 25px!important
}

.h-min-30px {
    min-height: 30px!important
}

.h-min-35px {
    min-height: 35px!important
}

.h-min-40px {
    min-height: 40px!important
}

.h-min-45px {
    min-height: 45px!important
}

.h-min-50px {
    min-height: 50px!important
}

.h-min-55px {
    min-height: 55px!important
}

.h-min-60px {
    min-height: 60px!important
}

.h-min-65px {
    min-height: 65px!important
}

.h-min-70px {
    min-height: 70px!important
}

.h-min-75px {
    min-height: 75px!important
}

.h-min-80px {
    min-height: 80px!important
}

.h-min-85px {
    min-height: 85px!important
}

.h-min-90px {
    min-height: 90px!important
}

.h-min-95px {
    min-height: 95px!important
}

.h-min-100px {
    min-height: 100px!important
}

.h-min-125px {
    min-height: 125px!important
}

.h-min-150px {
    min-height: 150px!important
}

.h-min-175px {
    min-height: 175px!important
}

.h-min-200px {
    min-height: 200px!important
}

.h-min-225px {
    min-height: 225px!important
}

.h-min-250px {
    min-height: 250px!important
}

.h-min-275px {
    min-height: 275px!important
}

.h-min-300px {
    min-height: 300px!important
}

.h-min-325px {
    min-height: 325px!important
}

.h-min-350px {
    min-height: 350px!important
}

.h-min-375px {
    min-height: 375px!important
}

.h-min-400px {
    min-height: 400px!important
}

.h-min-425px {
    min-height: 425px!important
}

.h-min-450px {
    min-height: 450px!important
}

.h-min-475px {
    min-height: 475px!important
}

.h-min-500px {
    min-height: 500px!important
}

.h-min-550px {
    min-height: 550px!important
}

.h-min-600px {
    min-height: 600px!important
}

.h-min-650px {
    min-height: 650px!important
}

.h-min-700px {
    min-height: 700px!important
}

.h-min-750px {
    min-height: 750px!important
}

.h-min-800px {
    min-height: 800px!important
}

.h-min-850px {
    min-height: 850px!important
}

.h-min-900px {
    min-height: 900px!important
}

.h-min-950px {
    min-height: 950px!important
}

.h-min-1000px {
    min-height: 1000px!important
}
.w-min-1px {
    min-width: 1px!important
}

.w-min-2px {
    min-width: 2px!important
}

.w-min-3px {
    min-width: 3px!important
}

.w-min-4px {
    min-width: 4px!important
}

.w-min-5px {
    min-width: 5px!important
}

.w-min-6px {
    min-width: 6px!important
}

.w-min-7px {
    min-width: 7px!important
}

.w-min-8px {
    min-width: 8px!important
}

.w-min-9px {
    min-width: 9px!important
}

.w-min-10px {
    min-width: 10px!important
}

.w-min-15px {
    min-width: 15px!important
}

.w-min-20px {
    min-width: 20px!important
}

.w-min-25px {
    min-width: 25px!important
}

.w-min-30px {
    min-width: 30px!important
}

.w-min-35px {
    min-width: 35px!important
}

.w-min-40px {
    min-width: 40px!important
}

.w-min-45px {
    min-width: 45px!important
}

.w-min-50px {
    min-width: 50px!important
}

.w-min-55px {
    min-width: 55px!important
}

.w-min-60px {
    min-width: 60px!important
}

.w-min-65px {
    min-width: 65px!important
}

.w-min-70px {
    min-width: 70px!important
}

.w-min-75px {
    min-width: 75px!important
}

.w-min-80px {
    min-width: 80px!important
}

.w-min-85px {
    min-width: 85px!important
}

.w-min-90px {
    min-width: 90px!important
}

.w-min-95px {
    min-width: 95px!important
}

.w-min-100px {
    min-width: 100px!important
}

.w-min-125px {
    min-width: 125px!important
}

.w-min-150px {
    min-width: 150px!important
}

.w-min-175px {
    min-width: 175px!important
}

.w-min-200px {
    min-width: 200px!important
}

.w-min-225px {
    min-width: 225px!important
}

.w-min-250px {
    min-width: 250px!important
}

.w-min-275px {
    min-width: 275px!important
}

.w-min-300px {
    min-width: 300px!important
}

.w-min-325px {
    min-width: 325px!important
}

.w-min-350px {
    min-width: 350px!important
}

.w-min-375px {
    min-width: 375px!important
}

.w-min-400px {
    min-width: 400px!important
}

.w-min-425px {
    min-width: 425px!important
}

.w-min-450px {
    min-width: 450px!important
}

.w-min-475px {
    min-width: 475px!important
}

.w-min-500px {
    min-width: 500px!important
}

.w-min-550px {
    min-width: 550px!important
}

.w-min-600px {
    min-width: 600px!important
}

.w-min-650px {
    min-width: 650px!important
}

.w-min-700px {
    min-width: 700px!important
}

.w-min-750px {
    min-width: 750px!important
}

.w-min-800px {
    min-width: 800px!important
}

.w-min-850px {
    min-width: 850px!important
}

.w-min-900px {
    min-width: 900px!important
}

.w-min-950px {
    min-width: 950px!important
}

.w-min-1000px {
    min-width: 1000px!important
}
.h-max-1px {
    max-height: 1px!important
}

.h-max-2px {
    max-height: 2px!important
}

.h-max-3px {
    max-height: 3px!important
}

.h-max-4px {
    max-height: 4px!important
}

.h-max-5px {
    max-height: 5px!important
}

.h-max-6px {
    max-height: 6px!important
}

.h-max-7px {
    max-height: 7px!important
}

.h-max-8px {
    max-height: 8px!important
}

.h-max-9px {
    max-height: 9px!important
}

.h-max-10px {
    max-height: 10px!important
}

.h-max-15px {
    max-height: 15px!important
}

.h-max-20px {
    max-height: 20px!important
}

.h-max-25px {
    max-height: 25px!important
}

.h-max-30px {
    max-height: 30px!important
}

.h-max-35px {
    max-height: 35px!important
}

.h-max-40px {
    max-height: 40px!important
}

.h-max-45px {
    max-height: 45px!important
}

.h-max-50px {
    max-height: 50px!important
}

.h-max-55px {
    max-height: 55px!important
}

.h-max-60px {
    max-height: 60px!important
}

.h-max-65px {
    max-height: 65px!important
}

.h-max-70px {
    max-height: 70px!important
}

.h-max-75px {
    max-height: 75px!important
}

.h-max-80px {
    max-height: 80px!important
}

.h-max-85px {
    max-height: 85px!important
}

.h-max-90px {
    max-height: 90px!important
}

.h-max-95px {
    max-height: 95px!important
}

.h-max-100px {
    max-height: 100px!important
}

.h-max-125px {
    max-height: 125px!important
}

.h-max-150px {
    max-height: 150px!important
}

.h-max-175px {
    max-height: 175px!important
}

.h-max-200px {
    max-height: 200px!important
}

.h-max-225px {
    max-height: 225px!important
}

.h-max-250px {
    max-height: 250px!important
}

.h-max-275px {
    max-height: 275px!important
}

.h-max-300px {
    max-height: 300px!important
}

.h-max-325px {
    max-height: 325px!important
}

.h-max-350px {
    max-height: 350px!important
}

.h-max-375px {
    max-height: 375px!important
}

.h-max-400px {
    max-height: 400px!important
}

.h-max-425px {
    max-height: 425px!important
}

.h-max-450px {
    max-height: 450px!important
}

.h-max-475px {
    max-height: 475px!important
}

.h-max-500px {
    max-height: 500px!important
}

.h-max-550px {
    max-height: 550px!important
}

.h-max-600px {
    max-height: 600px!important
}

.h-max-650px {
    max-height: 650px!important
}

.h-max-700px {
    max-height: 700px!important
}

.h-max-750px {
    max-height: 750px!important
}

.h-max-800px {
    max-height: 800px!important
}

.h-max-850px {
    max-height: 850px!important
}

.h-max-900px {
    max-height: 900px!important
}

.h-max-950px {
    max-height: 950px!important
}

.h-max-1000px {
    max-height: 1000px!important
}
.w-max-1px {
    max-width: 1px!important
}

.w-max-2px {
    max-width: 2px!important
}

.w-max-3px {
    max-width: 3px!important
}

.w-max-4px {
    max-width: 4px!important
}

.w-max-5px {
    max-width: 5px!important
}

.w-max-6px {
    max-width: 6px!important
}

.w-max-7px {
    max-width: 7px!important
}

.w-max-8px {
    max-width: 8px!important
}

.w-max-9px {
    max-width: 9px!important
}

.w-max-10px {
    max-width: 10px!important
}

.w-max-15px {
    max-width: 15px!important
}

.w-max-20px {
    max-width: 20px!important
}

.w-max-25px {
    max-width: 25px!important
}

.w-max-30px {
    max-width: 30px!important
}

.w-max-35px {
    max-width: 35px!important
}

.w-max-40px {
    max-width: 40px!important
}

.w-max-45px {
    max-width: 45px!important
}

.w-max-50px {
    max-width: 50px!important
}

.w-max-55px {
    max-width: 55px!important
}

.w-max-60px {
    max-width: 60px!important
}

.w-max-65px {
    max-width: 65px!important
}

.w-max-70px {
    max-width: 70px!important
}

.w-max-75px {
    max-width: 75px!important
}

.w-max-80px {
    max-width: 80px!important
}

.w-max-85px {
    max-width: 85px!important
}

.w-max-90px {
    max-width: 90px!important
}

.w-max-95px {
    max-width: 95px!important
}

.w-max-100px {
    max-width: 100px!important
}

.w-max-125px {
    max-width: 125px!important
}

.w-max-150px {
    max-width: 150px!important
}

.w-max-175px {
    max-width: 175px!important
}

.w-max-200px {
    max-width: 200px!important
}

.w-max-225px {
    max-width: 225px!important
}

.w-max-250px {
    max-width: 250px!important
}

.w-max-275px {
    max-width: 275px!important
}

.w-max-300px {
    max-width: 300px!important
}

.w-max-325px {
    max-width: 325px!important
}

.w-max-350px {
    max-width: 350px!important
}

.w-max-375px {
    max-width: 375px!important
}

.w-max-400px {
    max-width: 400px!important
}

.w-max-425px {
    max-width: 425px!important
}

.w-max-450px {
    max-width: 450px!important
}

.w-max-475px {
    max-width: 475px!important
}

.w-max-500px {
    max-width: 500px!important
}

.w-max-550px {
    max-width: 550px!important
}

.w-max-600px {
    max-width: 600px!important
}

.w-max-650px {
    max-width: 650px!important
}

.w-max-700px {
    max-width: 700px!important
}

.w-max-750px {
    max-width: 750px!important
}

.w-max-800px {
    max-width: 800px!important
}

.w-max-850px {
    max-width: 850px!important
}

.w-max-900px {
    max-width: 900px!important
}

.w-max-950px {
    max-width: 950px!important
}

.w-max-1000px {
    max-width: 1000px!important
}
[data-indicator=on]>.indicator-label {
    display: none;
}
[data-indicator=on]>.indicator-progress {
    display: inline-block;
}
.indicator-progress {
    display: none;
}
.border-dashed {
    border-style: dashed!important;
    border-color: var(--jb-border-dashed-color)
}

.border-top-dashed {
    border-top-style: dashed!important
}

.border-bottom-dashed {
    border-bottom-style: dashed!important
}

.border-start-dashed {
    border-left-style: dashed!important
}

.border-end-dashed {
    border-right-style: dashed!important
}
* {
    transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}
html {
    transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}
body {
	font-family: 'Poppins', sans-serif;
	background: #FFFFFF;
    background-size: cover;
    background-repeat: no-repeat;
	color: #4378BA;
	font-size: 14px;
    transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
/*    overflow: hidden !important;*/
    position: relative;
}
header {
    width: 100%;
    position: fixed;
    top:0;
    left: 0;
    z-index: 1001;
    background-color: #6DC3F1;
    box-shadow: 0px 20px 20px 10px rgb(252 146 182 / 5%);
}
header.messages {
    background: transparent;
}
div:where(.swal2-container) div:where(.swal2-popup) {
    background: #FFFFFF !important;
    border-radius: 50px !important;
}
div:where(.swal2-container) .swal2-html-container,div:where(.swal2-container) h2:where(.swal2-title) {
    color: #ffffff !important;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
    border: 0;
    border-radius: .25em;
    background: initial;
    background-color: #333 !important;
    color: #fff;
    font-size: 1em;
}
.dropdown-item:focus, .dropdown-item:hover {
    color: var(--bs-dropdown-link-hover-color);
    background-color: #FFFFFF;
}
.jb-content {
    margin: 0;
    overflow: hidden;
    min-height: 100vh;
    width: 100%;
    padding: 0;
}
.jb-load-content{
    margin-top:65px;
/*    margin-bottom:130px;*/
/*    height: calc(100vh - 140px);*/
/*    overflow-y: auto;*/
/*    overflow-x: hidden;*/
    width: 100wh;
}
.dropdown-menu-dark {
    --bs-dropdown-color: #dee2e6;
    --bs-dropdown-bg: #1d1d1d;
    --bs-dropdown-border-color: var(--bs-border-color-translucent);
    --bs-dropdown-box-shadow: ;
    --bs-dropdown-link-color: #dee2e6;
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.15);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: #fe93b7;
    --bs-dropdown-link-disabled-color: #adb5bd;
    --bs-dropdown-header-color: #adb5bd;
}
.nav-underline .nav-link.active, .nav-underline .show>.nav-link {
    font-weight: 700;
    color: #2E446F !important;
    border-bottom-color: #2E446F;
}
.view-card-bg {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    top: 0;
    position: absolute;
    left: 0;
}
.offcanvas-create-character {
    height: 100% !important;
}
.offcanvas-create-character .offcanvas-body {
    overflow-y: auto;
    max-height: calc(100vh - 55px);
}
.avatar-img {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}
.modal-content {
    background-color: #496779;
}
@media screen and (display-mode: standalone) {
    header {
        padding-top: env(safe-area-inset-top) !important;
    }
    .jb-load-content{
        padding-top:env(safe-area-inset-top);
    }

    .jb-load-content.jb-content-chat {
        margin: 0 !important;
        height: 100vh;
/*        overflow: hidden;*/
    }
    .messages .messages-header {
        padding-top: env(safe-area-inset-top) !important;
        position: fixed;
        width: 100%;
        top:0;
        left: 0;
        z-index: 9999;
    }
    .messages .messages-footer {
        position: fixed;
        width: 100%;
        bottom:0;
        left: 0;
    }
    .messages .messages-body {
        padding-top: env(safe-area-inset-top) !important;
        position: fixed;
        width: 100%;
        top:env(safe-area-inset-top);
        margin-top: 66px;
        left: 0;
        height:calc(100vh - 270px) !important;
    }
    .modal-full .modal-content {
        padding-top:env(safe-area-inset-top);
    }
    .standalone {
        padding-top:env(safe-area-inset-top);
    }
}
@media all and (max-width: 992px) {
    .modal.show.modal-full .modal-dialog {
        max-width: 100%;
        left: 0;
        margin: 0;
        min-height: 100vh;
    }
    .modal-full .modal-content {
        min-height: 100vh;
        border-radius: 0 !important; 
    }
    .messages .rounded-5 {
        border-radius: 0 !important;
    }
    .messages .messages-footer .rounded-5 {
       border-radius: var(--bs-border-radius-xxl)!important;
    }
    .messages-chat {
/*        height: calc(100vh - 0px) !important;*/
    }
    .messages .messages-header {
        position: fixed !important;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 100;
    }
    .messages-body {
        top: 66px !important;
/*        position: fixed !important;*/
/*        overflow-y: auto;*/
        height:calc(100vh - 270px) !important;
        margin-top:66px;
    }
       .chat-body {
          overflow-y: auto;
        /*    overflow-x: hidden;*/
        /*    max-height: 600px;*/
            height: calc(100vh - 355px);
    }
    .messages .messages-footer {
        position: fixed !important;
        width: 100%;
        bottom: 0;
        left: 0;
    }
    .jb-load-content.jb-content-chat {
        margin: 0 !important;
/*        height: 100vh;*/
/*        overflow: hidden;*/
    }
    .messages-bg {
        position: fixed !important;
        left:0;
    }
}
.messages-mobile {
    background: transparent;
}
.avatar-characters {
    position: absolute;
    bottom:0px;
    left:0;
}
.avatar-characters-img {
    top:-20px;
}
.messages-body {
    overflow-y: auto;
/*    overflow-x: hidden;*/
/*    max-height: 600px;*/
    height: calc(100vh - 355px);
}
.messages-body .messages-body-list{
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    align-content: flex-end;
    min-height: 100%;

}
.messages .messages-content-input:focus-visible {
    outline: 0px ;
    background-color: rgb(0, 0, 0, 0.9);
}
.messages .messages-content-input {
    max-height: 150px;
    overflow-y: auto;
    background-color: rgb(0, 0, 0, 0.3);
}
.messages .messages-header {
    position: relative;
    width: 100%;
    top:0;
    left: 0;
}
.messages .messages-footer {
    position: relative;
    width: 100%;
    bottom:0;
    left: 0;
}
.messages .messages-body {
    position: sticky;
    width: 100%;
    top:0;
    left: 0;
}
body::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #000000;
}

body::-webkit-scrollbar
{
    width: 5px;
    background-color: #000000;
}

body::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #fff;
}
.form-switch .form-check-input {
    width: 3em;
    height: 1.5em;
}
.form-check-input:checked {
    background-color: #000;
    border-color: #000;
}
.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #333;
}
.modal-content {
    border-radius: 30px ;
}
.bg-ai {
    background-size: cover;
/*    background-position: top center;*/
    background-position: center;
    background-repeat: no-repeat;
    height: 300px;
}
@media all and (max-width: 1330px) {
    footer .footer-nav .btn{
        padding:0;
    }
    .bg-ai {
        height: 180px;
    }
}
.btn-check:checked+.btn, .btn.active, .btn.show{
    color: #fff !important;
    background-color: #2E446F;
    border-color: #2E446F;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: solid #dee2e6 1px;
    outline: 0;
}
.select2-container .select2-selection--multiple {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    min-height: 50px;
    user-select: none;
    -webkit-user-select: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #e2e3e5;
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
    display: inline-block;
    margin-left: 5px;
    margin-top: 5px;
    padding: 9px;
    padding-left: 20px;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    background-color: transparent;
    border: none;
    border-right: 1px solid #cfcfcf;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    color: #999;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    padding: 9px 4px;
    position: absolute;
    left: 0;
    top: 0;
}
.select2-container--default .select2-selection--multiple {
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: text;
    padding-bottom: 5px;
    padding-right: 5px;
    position: relative;
}
.select2-container--default .select2-selection--single {
    background-color: #000000;
    border: none;
/*    border-radius: 40px;*/
}
.select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 50px;
    user-select: none;
    -webkit-user-select: none;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 50px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff;
    line-height: 50px;
}
.messages-list {
    overflow-y: auto;
}
.messages-list {
    height: calc(100vh - 175px);
}
.messages-chat {
    position: relative;
}
.messages-avatar {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}
.messages-bg {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    height: 100%;
    position: absolute;
    width: 100%;
    top: 0;
    z-index: -1;
}
.bg-yellow {
    background-color: #f97327;
}
.z-index-1000 {
    z-index: 1000;
}
footer {
    width: 100%;
    position: fixed;
    background: #6DC3F1;
    bottom: 0px;
    left: 0;
    z-index: 1000;
    border-radius: 0 20px;
    box-shadow: 0px -20px 20px 10px rgb(252 146 182 / 5%);
}
footer .footer-nav {
    flex-direction: row;
    background-color: #6DC3F1;
}
footer .footer-nav .btn{
    padding:0;
}
footer .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    color:#fff !important;
}
footer .btn.active {
/*    border-radius: 100%;*/
/*    transform: translate(0, -30%);*/
    color:#2e446f !important;
    background:transparent !important;
/*    border:5px solid #FFFFFF !important;*/
/*    background-image: radial-gradient( circle farthest-corner at 10% 20%, rgb(231 84 128) 0%, rgb(231 84 128) 90% );*/
}
.bg-card-bottom {
    background: rgb(249,141,179);
    background: linear-gradient(0deg, rgb(67,120,186) 19%, rgba(255,255,255,0) 100%);
    padding-top: 80px !important;
}
.card-hover:hover {
    transform: scale(1.05);
}
.swiper {
  width: 100%;
/*  padding-top: 50px;*/
/*  padding-bottom: 50px;*/
}
.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 80%;
}
.swiper-slide img {
  display: block;
  width: 100%;
}
.swiper-3d .swiper-slide-shadow-right {
     background-image: none; 
}
.swiper-3d .swiper-slide-shadow-left {
    background-image: none;
}
.btn-pink {
    color: #ffffff !important;
    background:#5072B9;
    border-color: #5072B9;
}
.btn-pink:hover {
    color: #ffffff !important;
    background:#2E446F ;
    border-color: #2E446F;
}
.bg-pink {
    background-color: #6DC3F1;
}
.text-pink {
    color: #2E446F;
}
.messages-content-chat .bg-pink{
    background-color: rgb(53 130 182 / 80%);
}
.small, small {
    font-size: 0.675em;
}
.fs-7 {
    font-size: 12px;
}
.text-bg-dark {
    color: #fff !important;
    background-color: #6DC3F1 !important;
}
.dice {
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
}
.dice-small {
  position: relative;
  width: 70px;
  height: 70px;
  transform-style: preserve-3d;
}
.dice-one {
  transition: transform 2s; 
}
.dice-two {
  transition: transform 3s; 
}
.dice-three {
  transition: transform 4s; 
}
.dot {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: -10px 5px 5px -10px;
  border-radius: 20px;
  background-color: #ef233c;
  box-shadow: inset 2px 2px #d90429;}
.side {
  position: absolute;
  background-color: #ffF;
  border-radius:5px;
  width: 100px;
  height: 100px;
  border: 1px solid #e5e5e5;
  text-align: center;
  line-height: 2em;
}
.side-small {
  width: 70px !important;
  height: 70px !important;
}
.side:nth-child(1) {
  transform: translateZ(3.1em); }
.side:nth-child(6) {
  transform: rotateY(90deg) translateZ(3.1em); }
.side:nth-child(3) {
  transform: rotateY(-90deg) translateZ(3.1em); }
.side:nth-child(4) {
  transform: rotateX(90deg) translateZ(3.1em); }
.side:nth-child(5) {
  transform: rotateX(-90deg) translateZ(3.1em); }
.side:nth-child(2) {
  transform: rotateY(-180deg) translateZ(3.1em); }
.two-1, .three-1, .four-1, .five-1, .six-1 {
  top: 20%;
  left: 20%; 
}
.four-3, .five-3, .six-4 {
  top: 20%;
  left: 80%; 
}
.one-1, .three-2, .five-5 {
  top: 50%;
  left: 50%; 
}
.four-2, .five-2, .six-3 {
  top: 80%;
  left: 20%; 
}
.two-2, .three-3, .four-4, .five-4, .six-6 {
  top: 80%;
  left: 80%; 
}
.six-2 {
  top: 50%;
  left: 20%; 
}
.six-5 {
  top: 50%;
  left: 80%; 
}
.show-1 {
  transform: rotateX(720deg) rotateZ(-720deg); }

.show-2 {
  transform: rotateX(-900deg) rotateZ(1080deg); }

.show-6 {
  transform: rotateY(-450deg) rotateZ(-1440deg); }

.show-3 {
  transform: rotateY(810deg) rotateZ(720deg); }

.show-4 {
  transform: rotateX(-810deg) rotateZ(-1080deg); }

.show-5 {
  transform: rotateX(450deg) rotateZ(-720deg); }
.roulette {
    display: flex;
    flex-direction: row;
    width: 100%;
    position: relative;
    margin: 0 auto;
    text-align: center;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
}
.roulette .wheel img {
    transition: transform 10s cubic-bezier(0.3, 1, 0.7, 1),
      10s filter cubic-bezier(0.1, 1, 0.8, 1),
      10s -webkit-filter cubic-bezier(0.1, 1, 0.8, 1);
    will-change: transform;
    border-radius: 50%;
/*    box-shadow: 0 0 100px rgba(0, 0, 0, 0.5);*/
    width: 100%;
    max-width: 600px;
}
.roulette .arrow {
    width: 0;
    height: 0;
    border: 15px solid transparent;
    border-top: 30px solid #ffffff;
    position: absolute;
    /* left: 0; */
    top: -25px;
    z-index: 20;
    border-radius: 0.35em;
}
.roulette .arrow:after {
}
.roulette .spin {
    cursor: crosshair;
}
:root {
  --glow: rgba(255, 195, 26, 0.4);
}
.lucky-box-games {
  transform: scale(1.5);
  position: relative;
}
.lucky-box-games .hexagon {
  z-index: -2;
  position: relative;
  width: 160px;
  height: 92.38px;
  background-color: var(--glow);
  margin: 46.19px 0;
  filter: blur(20px);
}
.lucky-box-games .hexagon:before,
.lucky-box-games .hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
}
.lucky-box-games .hexagon:before {
  bottom: 100%;
  border-bottom: 46.19px solid var(--glow);
}
.lucky-box-games .hexagon:after {
  top: 100%;
  width: 0;
  border-top: 46.19px solid var(--glow);
}
.lucky-box-games .back {
  background-image: url("../../img/LuckyBoxBackground_2x.png");
  background-size: cover;
  background-position: center;
  z-index: -1;
}
.lucky-box-games .top {
  background-image: url("../../img/LuckyBoxTopFlap_2x.png");
  background-size: cover;
  background-position: center;
  z-index: 1;
}
.lucky-box-games .left {
  background-image: url("../../img/LuckyBoxLeftFlap_2x.png");
  background-size: cover;
  background-position: center;
  z-index: 1;
}
.lucky-box-games .right {
  background-image: url("../../img/LuckyBoxRightFlap_2x.png");
  background-size: cover;
  background-position: center;
  z-index: 1;
}
.lucky-box-games #cube {
  animation: hover 1.5s ease-in-out infinite alternate;
  transition: transform 300ms;
  animation-play-state: running;
}
@keyframes hover {
  from {
    transform: translateY(-0.5rem);
  }
  to {
    transform: translateY(0.5rem);
  }
}
.lucky-box-games .powerup {
  background-image: url("");
  background-size: cover;
  border-radius: 50%;
  z-index: 100;
  overflow: hidden;
  height: 48px;
  width: 48px;
  z-index: -5;
}
.jb-load-content { position: relative } /* parent element where switch will be made */

.page-content { width: 100% }
/* position for the elements that will be removed */
.js-Pjax-remove {
  position: absolute;
  left: 50%;
  /* transform: translateX(-50%) */
  /* transform can't be used since we already use generic translate for the remove effect (eg animate.css) */
  /* margin-left: -width/2; // made with js */
  /* you can totally drop the margin-left thing from switchesOptions if you use custom animations */
}

/* CSS animations */
.Animated {
  animation-fill-mode: both;
  animation-duration: 1s;
}

.Animated--reverse { animation-direction: reverse }

.Animate--fast { animation-duration: .5s }
.Animate--noDelay { animation-delay: 0s !important;  }

.Animate--slideInRight { animation-name: Animation-slideInRight }

@keyframes Animation-slideInRight {
  0% {
    opacity: 0;
    transform: translateX(100rem);
  }

  100% {
    transform: translateX(0);
  }
}

.Animate--slideInLeft { animation-name: Animation-slideInLeft }

@keyframes Animation-slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100rem);
  }

  100% {
    transform: translateX(0);
  }
}
.tossing-games .coin{
    height: 150px;
    width: 150px;
    position: relative;
    margin: 32px auto;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.tossing-games .heads,.tossing-games .tails{
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
.tossing-games .tails{
    transform: rotateX(180deg);
}
@keyframes spin-tails{
    0%{
        transform: rotateX(0);
    }
    100%{
        transform: rotateX(1980deg);
    }
}
@keyframes spin-heads{
    0%{
        transform: rotateX(0);
    }
    100%{
        transform: rotateX(2160deg);
    }
}
.select2-container--default .select2-selection--multiple {
    background-color: #212529;
    border: none !important;
    border-radius: 4px;
    cursor: text;
    padding-bottom: 5px;
    padding-right: 5px;
    position: relative;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #2E446F;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    background-color: transparent;
    border: none;
    border-right: none;
    color:#fff;
}
.select2-container--default .select2-search--inline .select2-search__field {
    color: #fff;
}
.select2-dropdown {
    background-color: #212529;
    border: none;
}
.select2-container--default .select2-results__option--selected {
    background-color: #2E446F;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #0a0a11;
    color: white;
}
.create-character .btn-check+.btn.btn-img i{
    display: none;
}
.create-character .btn-check:checked+.btn.btn-img i{
    position: absolute;
    opacity: 1;
    display: flex;
    align-content: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    flex-direction: column;
    font-size: 3rem;
    color: #fff;
    z-index: 1;
}
.create-character .btn-check:checked+.btn.btn-img{
    color: #fff !important;
    background-color: #2E446F;
    border-color: #2E446F;
    position: relative;
}
.create-character .btn-check:checked+.btn.btn-img:after {
    content: '';
    background-color: #2E446F;
    opacity: 0.5;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.create-character .btn-check:checked+.btn.btn-img:after {
    content: '';
    background-color: #2E446F;
    opacity: 0.5;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: var(--bs-border-radius-lg) !important;
}

.create-ai-test .btn-check+.btn.btn-img i{
    display: none;
}
.create-ai-test .btn-check:checked+.btn.btn-img i{
    position: absolute;
    opacity: 1;
    display: flex;
    align-content: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    flex-direction: column;
    font-size: 3rem;
    color: #fff;
    z-index: 1;
}
.create-ai-test .btn-check:checked+.btn.btn-img{
    color: #fff !important;
    background-color: #2E446F;
    border-color: #2E446F;
    position: relative;
}
.create-ai-test .btn-check:checked+.btn.btn-img:after {
    content: '';
    background-color: #2E446F;
    opacity: 0.5;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.create-ai-test .btn-check:checked+.btn.btn-img:after {
    content: '';
    background-color: #2E446F;
    opacity: 0.5;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: var(--bs-border-radius-lg) !important;
}
/* Ẩn nút radio mặc định */
.custom-radio input[type="radio"] {
    display: none;
}

/* Kiểu dáng khi chưa chọn */
.custom-radio .custom-radio-label {
    display: inline-block;
    padding: 10px 20px;
    position: relative;
    border: 2px solid #fff;
    background-color: black;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}

/* Thay đổi màu sắc khi được chọn */
.custom-radio input[type="radio"]:checked + .custom-radio-label {
    background-color: #2E446F;
    border-color: #2E446F;
    color: #fff;
}

/* Hiệu ứng mờ hoặc thay đổi vị trí nếu cần */
.custom-radio input[type="radio"]:checked + .custom-radio-label:after {
    content: '';
    background-color: #2E446F;
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 5px;
}
.info-box {
    display: none; 
    width: 100%; 
}

.radio input:checked+.custom-radio{
    background-color: pink; /* Màu nền khi được chọn */
    color: black; /* Màu chữ khi được chọn */
}

.my-textarea.bg-dark::placeholder {
    color: lightgray !important; 
    opacity : 0.7;
}

.table-dark-custom th, .table-dark-custom td {
    border: none;
    background-color: black !important; /* Đặt màu nền của bảng */
    color: white !important;            /* Đặt màu chữ của bảng */
}
/* Cấu hình cho thẻ input */
.table-dark-custom input[type="number"] {
    background-color: black; /* Màu nền của input */
    color: white;            /* Màu chữ của input */
    border: none;            /* Xóa viền của input */
}
/*.bg-dark { 
    border : var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    background: #FFFFFF !important;
    color: #4378BA !important;
}*/

.bg-blue { 
    border : var(--bs-border-width) var(--bs-border-style) #11a1f3 !important;
    background: #FFFFFF !important;
    color: #4378BA !important;
}
.text-blue{
    color: #4378BA !important;
}
@media (max-width: 390px) {
    .bg-blue { 
        border : var(--bs-border-width) var(--bs-border-style) #11a1f3 !important;
        background: #FFFFFF !important;
        color: #4378BA !important;
    }
   /* .bg-dark { 
        border : var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
        background: #FFFFFF !important;
        color: #4378BA !important;
    } /* Giảm padding để tiết kiệm không gian */ /* padding: 8px; */*/
    .mobile-stack { font-size: 13px; } /* Kích thước chữ nhỏ hơn */
    .mobile-stack p { margin-bottom: 2px; } /* Giữ khoảng cách tối thiểu giữa các đoạn văn */
    .mobile-stack strong { font-size: 14px; } /* Giữ kích thước chữ đậm nhỏ */
    .mobile-stack .btn { padding: 4px 8px; font-size: 13px; } /* Giảm kích thước và padding của nút */
}

    

.fixed-action-btn {
  position: fixed;
/*  right: 20px;*/
  bottom: 100px;
  padding-top: 15px;
  margin-bottom: 0;
  z-index: 998;
  padding: 0 0 0 15px;
}
.fixed-action-btn .btn {
    display: flex;
    color: #fff;
    position: relative;
    overflow: hidden;
    z-index: 1;
    width: 40px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    border-radius: 50%;
    transition: .5s;
    cursor: pointer;
    vertical-align: middle;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    justify-content: center;
}
.fixed-action-btn .btn.btn-large {
  width: 60px;
  height: 60px;
} 
.fixed-action-btn .btn:hover {
  box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);
}
.fixed-action-btn .btn i {
  width: inherit;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-size: 20px;
  line-height: 40px;
}
.fixed-action-btn .btn.btn-large i {
  line-height: 70px;
  font-size: 25px;
}
.fixed-action-btn ul {
  text-align: right;
  right: 70px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 100%;
  left: auto;
  width: 500px;
  position: absolute;
  bottom: 64px;
  margin: 0;
  visibility: hidden;
  list-style: none;
}
.fixed-action-btn ul li {
    display: inline-block;
    margin: 10px 5px 0 0;
}
.fixed-action-btn:hover ul{
  visibility: visible;
}
.fixed-action-btn ul li a {
  transform: scaleY(1) scaleX(1) translateY(0px) translateX(0px);
  opacity: 0;
}
.fixed-action-btn:hover ul li a {
  transform: scaleY(1) scaleX(1) translateY(0px) translateX(0px);
  opacity: 1;
}