@font-face {
  font-family: 'Kozuka_Gothic_Pr6N_B';
  src: url(../fonts/kozuka_gothic_Pr6N_B.otf) format("opentype");
}
@font-face {
  font-family: 'Kozuka_Gothic_Pr6N_R';
  src: url(../fonts/kozuka_gothic_Pr6N_R.otf) format("opentype");
}

body {
  font-family: Kozuka_Gothic_Pr6N_R, Poppins, sans-serif !important;
  /* overflow-x: auto!important; */
}

.scrollbar-width-none {
  scrollbar-width: none;
}

:root {
  --primary: #3650bb;
  /* --bs-body-color: #000; */
}

[data-header-position="fixed"] .content-body {
  min-height: calc(100vh - 80px - 110px);
  padding-top: 80px;
  padding-bottom: 110px;
}

.app-content > .row,
.dashboard_content > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.h-5 {
  height: 5% !important; 
}
.h-10 {
  height: 10% !important; 
}
.h-15 {
  height: 15% !important; 
}
.h-20 {
  height: 20% !important; 
}
.h-30 {
  height: 30% !important; 
}
.h-35 {
  height: 35% !important; 
}
.h-40 {
  height: 40% !important; 
}
.h-45 {
  height: 45% !important; 
}
.h-55 {
  height: 55% !important; 
}
.h-60 {
  height: 60% !important; 
}
.h-65 {
  height: 65% !important; 
}
.h-70 {
  height: 70% !important; 
}
.h-80 {
  height: 80% !important; 
}
.h-85 {
  height: 85% !important; 
}
.h-90 {
  height: 90% !important; 
}
.h-95 {
  height: 95% !important; 
}

.rounded-my1 {
  border-radius: 0.8rem !important; 
}

p {
  color: #000;
}

.text-primary {
  color: #654ee1 !important;
}
.footer {
  z-index: 1000;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 110px;
  margin: 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
}
.footer .card {
  height: 70px;
}
.footer .card-body {
  padding: 1rem;
}

[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .copyright, [data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .plus-box {
  display: block !important;
}

.nav-header
{
  background-color: transparent !important;
}
.nav-header .logo-abbr {
  max-width: 100px !important;
}
@media (max-width: 575.98px) {
  .nav-header
  {
      background-color: transparent !important;
      background-image: none !important;
  }
  .nav-header .logo-abbr {
    width: 100% !important;
  }
}

.header
{
  background-color: transparent !important;
  background-position: top center;
  height: 80px !important;
  border-bottom: none;
  z-index: 1000;
}

.header-content{
  margin-top: 1.5rem;
  height: 80px !important;
}
@media only screen and (max-width: 47.9375rem) {
  .header .header-content {
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin-top: 0;
  }
}

.datepicker.datepicker-dropdown,
.dlabnav {
  z-index: 1500 !important;
}

.dlabnav {
  top: 0 !important;
  height: 100% !important;
}
@media only screen and (max-width: 87.5rem) {

}

.dlabnav{
  background: linear-gradient(To right, rgba(148,91,255,0.94), rgba(114,93,228,0.94) 60%, rgba(74,95,195,0.94)) !important;
  border: 0 !important;
}
.app-background-gradient {
  background-image: linear-gradient(135deg, #e8daff, #e7e1ff 30%, #e6e4ff 70%, #e5e9ff);
}

.card {
  border-radius: 2.2rem;
  background-image: linear-gradient(135deg, #e8daff, #e7e1ff 30%, #e6e4ff 70%, #e5e9ff);
  box-shadow: -5px -5px 24px 4px #ffffff, 0px 0px 18px 5px #00000050; /* -8px -8px 17px 6px #fff, 0px 0px 18px 5px #00000050; */
}
.card-opactiy{
  background: linear-gradient(135deg, #e8dbffcc, #e7deffcc 30%, #e6e4ffcc 70%, #e5e9ffcc);
  box-shadow: none !important;
}

.box-custom {
  border-radius: 2.2rem;
  background-image: linear-gradient(135deg, #e8daff, #e7e1ff 30%, #e6e4ff 70%, #e5e9ff);
  box-shadow: -5px -5px 24px 4px #ffffff, 0px 0px 18px 5px #00000050;
}
.box-custom label {
  color: #000 !important;
}

[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .dlabnav .profile-content {
  display: none;
}

.dlabnav .metismenu > li.mm-active > a svg path,
.dlabnav .metismenu a:hover svg path {
  fill: #fff;
  fill-opacity: 0.5;
  stroke: #fff;
  stroke-opacity: 0.5;
}

.background-modal {
  background-color: rgba(0,0,0, 0.45);
}

.btn {
  border-radius: 0.8rem;
}
.btn-success {
  background-color: #e8dbff !important;
  border: 0px;
  color: #000;
}
.btn-primary {
  background-color: #884cfd !important;
  border: 0px;
}
.btn-gradient {
  background-image: linear-gradient(To right, #884cfd, #5f4edc, #3950bd);
}
.btn-gradient-2 {
  background-image: linear-gradient(135deg, #e8dbff, #e7deff 30%, #e6e4ff 70%, #e5e9ff);
}
.shadow.btn-primary {
  -webkit-box-shadow: 0.6125rem 0.6125rem 1.375rem 0 #ffffff88, -0.6125rem -0.6125rem 0.875rem 0 #ffffff88 !important;
  box-shadow: 0.6125rem 0.6125rem 1.375rem 0 #ffffff88, -0.6125rem -0.6125rem 0.875rem 0 #ffffff88 !important;
}

.form-control-custom {
  border: none !important;
  border-bottom: 2px #b9b9b9 solid !important;
  border-radius: 50px !important;
  background-image: linear-gradient(to right, #fff, #fbfbfb 70%, #e9e9e9);
  color: #45454e;
  text-align: center;
}
.form-control-custom:hover,
.form-control-custom:focus, 
.form-control-custom.active {
    color: #45454e;
}
.form-control-custom::placeholder {
  color: #b9b9b9;
}

.form-control-custom-2 {
  border: none !important;
  border-bottom: 2px #b9b9b9 solid !important;
  border-radius: 12px !important;
  background-image: linear-gradient(to right, #fff, #fbfbfb 70%, #e9e9e9);
  color: #45454e;
  box-shadow: inset -2px 0px 8px #00000020;
}
.form-control-custom-2:hover,
.form-control-custom-2:focus, 
.form-control-custom-2.active {
  color: #45454e !important;
}
.form-control-custom-2::placeholder {
  color: #b9b9b9;
}

.form-control-custom-3 {
  padding: 10px 14px;
  background-color: #c2171f !important;
  border-radius: 20px !important;
  box-shadow: inset 4px 6px 2px #00000060, inset -3px -4px 1px #ffffff30;
}

.form-control-custom-3:hover,
.form-control-custom-3:focus, 
.form-control-custom-3.active {
  padding: 10px 14px;
  background-color: #c2171f !important;
  border-radius: 20px !important;
  box-shadow: inset 4px 6px 2px #00000060, inset -3px -4px 1px #ffffff30
}

[data-theme-version="light"] .bootstrap-select .btn:active, 
[data-theme-version="light"] .bootstrap-select .btn:focus, 
[data-theme-version="light"] .bootstrap-select .btn:hover {
  color: #45454e !important;
}

.nav-tabs .nav-link {
    border: none;
    color: var(--primary);
}

[data-theme-version="light"] .nav-tabs .nav-link:hover, 
[data-theme-version="light"] .nav-tabs .nav-link.active {
    border: none;
    /* border-bottom: 2px solid #fff; */
    background-image: linear-gradient(To right, #884cfd, #5f4edc, #3950bd);
    color: #fff;
}

.app-background {
  /* background-image: url("../images/background_app.png"); */
  background-size: cover;
  background-color: #e5e7ff!important;
}

/* .background-content {
  padding-top: 0px !important;
  background: url("../images/background.png") repeat-y center top / contain;
} */
#main-wrapper {
  background: transparent !important;
}

.dlabnav .metismenu > li > a {
  color: #fff !important;;
}
.dlabnav .metismenu > li > a > img {
  width: 16px;
}
.dlabnav .metismenu > li:hover > a, .dlabnav .metismenu > li:focus > a {
  color: rgba(255, 255, 255, 0.6) !important;;
}
/*
.dlabnav .metismenu > li.mm-active > a {
  background: #9E7050 !important;
}
*/

[data-theme-version="light"] .datepicker.datepicker-dropdown {
    background-image: linear-gradient(135deg, #e8daff, #e7e1ff 30%, #e6e4ff 70%, #e5e9ff);
    box-shadow: -5px -5px 24px 4px #ffffff, 0px 0px 18px 5px #00000050;
    border-radius: 1rem;
    border: none;
}

/* 
[data-theme-version="light"] .nav-pills .nav-link-text:hover,
[data-theme-version="light"] .nav-pills .nav-link-text.active, 
[data-theme-version="light"] .nav-pills:hover .show > .nav-link-text {
  background: linear-gradient(To bottom, #751016, #c2171f);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
} 
*/

[data-theme-version="light"] .nav-pills .nav-link:not(.nav-link-text).active {
  background-image: linear-gradient(135deg, #e8daff, #e7e1ff 30%, #e6e4ff 70%, #e5e9ff);
  box-shadow: -5px -5px 24px 4px #ffffff, 0px 0px 18px 5px #00000050;
}

/************ authincation pages css custom ***********/
.authincation-background {
  background-image: url("../images/background.png");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}
.authincation-content {
  background: none !important;
  box-shadow: none !important;
}

.read-content-register {
  height: 100px;
  overflow-y: auto;
  border: 1px solid #fff;
  padding: 0.7rem;
}

.read-content-register p {
  line-height: 1.5 !important;
}

.footer-auth {
  left: 0;
  padding-left: 0 !important;
  height: 40px;
}

.auth-form .nav-header {
  width: calc(100% - 5.8rem);
  background: transparent !important;;
}
@media (min-width: 576px){
  .auth-form .nav-header {
    width: 422px;
  }
}
@media (min-width: 768px){
  .auth-form .nav-header {
    width: 242px;
  }
}
@media (min-width: 992px){
  .auth-form .nav-header {
    width: 362px;
  }
}
@media (min-width: 1200px){
  .auth-form .nav-header {
    width: 400px;
  }
}

.page-r-logo img {
  width: 80%;
}

/**** text custom ****/
/*
.text-custom-group,
.text-custom {
  font-weight: 900;
  font-size: 18px;
  font-family: 'Kozuka_Gothic_Pr6N_B';
  display: inline-grid;
  grid-template-areas: "text";
  place-items: center;
  height: 28px;
}

.text-custom span{
  background: linear-gradient(To bottom, #f8c100, #ffff5b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.03em rgba(255, 255, 56, 1);
  z-index: 3;
}
.text-custom-group > *,
.text-custom > *,
.text-custom::before,
.text-custom::after {
  grid-area: text;
}

.text-custom-group::after{
  content: attr(data-text);
  color: #000;
  -webkit-text-stroke: 0.95rem;
  position: relative;
  top: -28px;
  z-index: 1;
}
*/
@supports not (-webkit-touch-callout: none) {
  /* CSS for other than iOS devices */ 
  /* .text-custom-group::after{
    text-shadow: -4px 9px 2px black, -3px 9px 2px black, -2px 9px 2px black, -1px 9px 2px black, 0px 9px 2px black, 1px 9px 2px black, 2px 9px 2px black, 3px 9px 2px black, 4px 9px 2px black,5px 9px 2px black, 6px 9px 2px black
  } */
}
/*
.text-custom::before,
.text-custom::after {
  content: attr(data-text);
  color: #fff;
}

.text-custom::before {
  background: linear-gradient(To bottom, #6f3c00, #090000, #ffff63, #754200);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.4em rgba(0, 0, 0, 0.4);
  z-index: 3;
}

.text-custom::after {
  background: white;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.48em rgba(255,255,255, 0.8);
  z-index: 2;
}
*/

.text-custom2 {
  font-family: 'Kozuka_Gothic_Pr6N_B';
  grid-template-areas: "text";
  place-items: center;
  background: linear-gradient(30deg, #884cfd, #3950bd);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* -webkit-text-stroke: 0.03em #3950bd; */
}
.text-custom2 .title {
  letter-spacing: 2px;
  font-size: 20px;
  /* text-shadow: 1px 0px 0px #884cfd, -1px 0px 0px #3950bd; */
  margin-bottom: -7px;
  width: 100%;
}
.text-custom2 .subtext {
  font-size: 8px;
  letter-spacing: -0.06rem;
}

/**** btn checkbox ***/
.btn-check:checked + .btn-outline-primary, 
.btn-check:active + .btn-outline-primary, 
.btn-outline-primary:active, 
.btn-outline-primary.active, 
.btn-outline-primary.dropdown-toggle.show {
  background-image: linear-gradient(135deg, #e8daff, #e7e1ff 30%, #e6e4ff 70%, #e5e9ff);
  box-shadow: -5px -5px 24px 4px #ffffff, 0px 0px 18px 5px #00000050;
  border:none;
  background-color: transparent;
  border-color: transparent;
}

/**** toggle checkbox custom button ***/
.toggle-custom .toggle {
  background: transparent !important;
  border: 0;
  padding: 0;
}
.toggle-custom .toggle.btn {
  width: 96px !important;
  height: 42px !important;
  border-radius: 1rem;
  background-image: linear-gradient(to right, #884cfd, #3950bd) !important;
  box-shadow: -5px -5px 24px 4px #ffffff, 0px 0px 18px 5px #00000050;
}
.toggle-custom .toggle.btn.off {
  /* background-color: #bc2a42 !important; */
  background-image: linear-gradient(135deg, #e8daff, #e7e1ff 30%, #e6e4ff 70%, #e5e9ff) !important;
}

.toggle-custom .toggle-group {
  left: 0;
  top: 7px !important;
  height: 30px;
  font-family: 'Kozuka_Gothic_Pr6N_B';
}
.toggle-custom .toggle.off .toggle-group {
  left: -100%;
}

.toggle-custom .toggle-on,
.toggle-custom .toggle-off {
  height: 33px;
  padding: 0;
  margin: 0;
  top: -2px;
  background-color: transparent !important;
  border-color: transparent !important;
}
.toggle-custom .toggle-on.btn,
.toggle-custom .toggle-off.btn,
.toggle-custom .toggle-on.btn:hover,
.toggle-custom .toggle-off.btn:hover{
  padding: 0;
  margin: 0;
  font-size: 18px;
}

.toggle-custom .toggle-on.btn,
.toggle-custom .toggle-on.btn:hover {
  color: #fff !important;
}
.toggle-custom .toggle-off.btn,
.toggle-custom .toggle-off.btn:hover {
  color: #69696E !important;
}

.toggle-custom .toggle-handle {
  display: none;
}

/**** toggle checkbox custom1 ***/
.toggle-custom1 .toggle {
  background: transparent !important;
  border: 0;
  padding: 0;
}
.toggle-custom1 .toggle.btn {
  width: 96px !important;
  height: 42px !important;
  border-radius: 42px;
  /* background-color: #1a823a !important; */
  background-image: linear-gradient(to right, #884cfd, #3950bd) !important;
  box-shadow: -5px -5px 24px 4px #ffffff, 0px 0px 18px 5px #00000050;
}
.toggle-custom1 .toggle.btn.off {
  /* background-color: #bc2a42 !important; */
  background-image: linear-gradient(135deg, #e8daff, #e7e1ff 30%, #e6e4ff 70%, #e5e9ff) !important;
}

.toggle-custom1 .toggle-group {
  left: -24%;
  top: 7px !important;
  height: 30px;
  font-family: 'Kozuka_Gothic_Pr6N_B';
}
.toggle-custom1 .toggle.off .toggle-group {
  left: -76%;
}

.toggle-custom1 .toggle-on,
.toggle-custom1 .toggle-off {
  height: 33px;
  padding: 0;
  margin: 0;
  top: -2px;
  background-color: transparent !important;
  border-color: transparent !important;
}
.toggle-custom1 .toggle-on.btn,
.toggle-custom1 .toggle-off.btn,
.toggle-custom1 .toggle-on.btn:hover,
.toggle-custom1 .toggle-off.btn:hover{
  padding: 0;
  margin: 0;
  font-size: 18px;
}

.toggle-custom1 .toggle-on.btn,
.toggle-custom1 .toggle-on.btn:hover {
  padding-left: 14px;
  color: #fff !important;
}
.toggle-custom1 .toggle-off.btn,
.toggle-custom1 .toggle-off.btn:hover {
  padding-right: 14px;
  color: #fff !important;
}

.toggle-custom1 .toggle-handle {
  border-radius: 50%;
  height: 30px;
  width: 30px;
  padding: 0;
  background: linear-gradient(to right, #884cfd, #3950bd) !important;
  background-size: 30px !important;
  box-shadow: inset 0px 0px 0px 5px #ededed !important;
  border: none !important;
}
/* .toggle-custom1 .toggle.off .toggle-handle {
  background: #fff !important;
  box-shadow: 2px 1px 4px 1px #00000080, -1px -1px 4px 1px #ffffff30;
} */

@media (min-width: 1601px){
  .checkbox-warning .form-check-input:checked[type="radio"]:after {
      top: 0.415rem;
      left: 0.415rem;
  }
}

/**** toggle checkbox custom2 ***/
.toggle-custom2 .toggle {
  background: transparent !important;
  border: 0;
}
.toggle-custom2 .toggle.btn {
  width: 57px !important;
  height: 36px !important;
}

.toggle-custom2 .toggle-group {
  left: -18% !important;
}
.toggle-custom2 .toggle.off .toggle-group {
  left: -82% !important;
}

.toggle-custom2 .toggle-on,
.toggle-custom2 .toggle-off {
  box-sizing: border-box;
  height: 2px;
  padding: 0;
  margin: 0;
  top: 10px;
  color: transparent !important;
}
.toggle-custom2 .toggle-on.btn,
.toggle-custom2 .toggle-off.btn,
.toggle-custom2 .toggle-on.btn:hover,
.toggle-custom2 .toggle-off.btn:hover{
  color: transparent !important;
}

.toggle-custom2 .toggle-handle {
  border-radius: 50%;
  height: 20px;
  width: 20px;
  padding: 0;
  /* background-color: #d0a568 !important; */
  background-image: url("../images/checkbox_on_2.png") !important;
  background-size: 18px !important;
}
.toggle-custom2 .toggle.off .toggle-handle {
  /* background-color: #767676 !important; */
  background-image: url("../images/checkbox_off_2.png") !important;
}

/* ========================== pc style =========================== */
@media only screen and (min-width: 480px) {
  .header .header-content {
    height: auto !important;
  }
  
  .footer .page-r-logo,
  .authincation-background.container-fluid {
    max-width: calc(100vh * 1290 / 2796) !important;
    min-width: 480px;
  }

  .app-background .container-fluid {
    max-width: calc(100vh * 1290 / 2800) !important;
    min-width: 480px;
  }
}