@import url("fa.all.min.css");
@import url("fonts.css");
@import url("loader.css");
@import url("colorSchemes.css");





body {
  /* font-family: "Noto Sans"; */
  font-family: "Noto Sans JP"; 
  font-family: "Barlow"; 
  /* font-family: "Barlow Semi Condensed";  */
  
  /* line-height: 1.4; */
  /* font-weight: 300; */
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  /* font-weight: 300; */
}
.ff-condensed {
  font-family: "Barlow Condensed";
}

.ff-semi-condensed {
  font-family: "Barlow Semi Condensed";
}

a {
  text-decoration: none;
  color: var(--bs-body-color);
}

innerHTML {
  display: none;
}

.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
  --bs-offcanvas-transition: transform 0.25s linear;
}

.btn-group-xs>.btn, .btn-xs {
  --bs-btn-padding-y: 0.3rem;
  --bs-btn-padding-x: 0.6rem;
  --bs-btn-font-size: 0.75rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
}


.carousel-inner > .carousel-item {
  transition-duration: .4s;
}

.lead-xxl {
  font-weight: 700;
  font-size: 4rem;
}

.fw-100 {font-weight: 100 !important;}
.fw-200 {font-weight: 200 !important;}
.fw-300 {font-weight: 300 !important;}
.fw-400 {font-weight: 400 !important;}
.fw-500 {font-weight: 500 !important;}
.fw-600 {font-weight: 600 !important;}
.fw-700 {font-weight: 700 !important;}
.fw-800 {font-weight: 800 !important;}
.fw-900 {font-weight: 900 !important;}

@media (min-width: 576px) {
  .position-sm-relative { position: relative!important;}
  .position-sm-fixed { position: fixed!important;}
  .position-sm-absolute { position: absolute!important;}
  .position-sm-static { position: static!important;}
}
@media (min-width: 768px) {
  .position-md-relative { position: relative!important;}
  .position-md-fixed { position: fixed!important;}
  .position-md-absolute { position: absolute!important;}
  .position-md-static { position: static!important;}
}
@media (min-width: 992px) {
  .position-lg-relative { position: relative!important;}
  .position-lg-fixed { position: fixed!important;}
  .position-lg-absolute { position: absolute!important;}
  .position-lg-static { position: static!important;}
}
@media (min-width: 1200px) {
  .position-xl-relative { position: relative!important;}
  .position-xl-fixed { position: fixed!important;}
  .position-xl-absolute { position: absolute!important;}
  .position-xl-static { position: static!important;}
}
@media (min-width: 1400px) {
  .position-xxl-relative { position: relative!important;}
  .position-xxl-fixed { position: fixed!important;}
  .position-xxl-absolute { position: absolute!important;}
  .position-xxl-static { position: static!important;}
}

.smaller {
  font-size: 0.775em;
}

body.dashboard {
  margin-top: 80px;
  /* background-color: rgba(var(--bs-light-rgb)) !important; */
}

body.dashboard > nav {
  height: 80px;
  transition: box-shadow 300ms ease-in-out;
}
body.dashboard.scrolled > nav {
  box-shadow: var(--bs-box-shadow-sm);
}

body.dashboard > nav .logo {
  height: 50px;
}
body.dashboard > nav .offcanvas-header {
  height: 80px;
}
body.dashboard > nav .dropdown-menu {
  left: auto;
  right: 0px;
  /* margin-top: 1rem; */
}

@media (max-width: 575px) {
  nav div[data-action="logout"] {
    background-color: var(--bs-dark);
    border-radius: var(--bs-border-radius-pill) !important;
    color: #fff;
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
}

footer {
  height: 100px;
}

body.dashboard main {
  /* padding-bottom: 4rem; */
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--bs-tertiary-bg);
  --bs-dropdown-link-active-color: var(--bs-body-color);
}

@media (min-width: 1200px) {
  body.dashboard main {
    /* padding-top: 80px; */
  }
}


.leftColButton.disabled {
  pointer-events: none;
  opacity: .5;
}


.themeToggle {
  background-color: var(--bs-body-color);
  color: var(--bs-body-bg);
}
[data-bs-theme="light"][data-box-style="gradiant"] .themeToggle.bg-gradiant-top-right {
  background-image: radial-gradient(at right top, rgba(255,255,255,.15), transparent 70%);
}
[data-bs-theme="dark"][data-box-style="gradiant"] .themeToggle.bg-gradiant-top-right {
  background-image: radial-gradient(at right top, rgba(255,255,255,1), transparent 70%);
}



[data-bs-theme="light"][data-box-style="gradiant"] .box.bg-gradiant-top-right-50 {
  background-image: radial-gradient(at right top, rgba(0,0,0,0.02), transparent 50%);
}
[data-bs-theme="dark"][data-box-style="gradiant"] .box.bg-gradiant-top-right-50 {
  background-image: radial-gradient(at right top, rgba(255,255,255,0.009), transparent 50%);
}

[data-bs-theme="light"][data-box-style="gradiant"] .box.bg-gradiant-top-right-100,
[data-bs-theme="light"][data-box-style="gradiant"] [role="button"].bg-gradiant-top-right-100 {
  background-image: radial-gradient(at right top, rgba(0,0,0,0.03), transparent 100%);
}


[data-bs-theme="dark"][data-box-style="gradiant"] .box.bg-gradiant-top-right-100 {
  background-image: radial-gradient(at right top, rgba(255,255,255,0.009), transparent 100%);
}

[data-bs-theme="dark"] .btn-outline-dark {
  --bs-btn-color: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f8f9fa;
  --bs-btn-hover-border-color: #f8f9fa;
  --bs-btn-focus-shadow-rgb: 248, 249, 250;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f8f9fa;
  --bs-btn-active-border-color: #f8f9fa;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #f8f9fa;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #f8f9fa;
  --bs-gradient: none;
}

[data-box-style="flat"] .box {
  padding: 0!important;
  border-radius: 0!important;
}

[data-box-style="flat"] .flat-no-padding {
  padding: 0!important;
  border-radius: 0!important;
  background-color: unset!important;
}

[data-box-style="boxed"] main,
[data-box-style="boxed"] .pageHead {
  background-color: rgba(var(--bs-tertiary-bg-rgb),1);
}
[data-box-style="boxed"] .box,
[data-box-style="boxed"] nav.navbar.bg-body-tertiary,
[data-box-style="boxed"] .box.bg-gradiant-top-right-100,
[data-box-style="boxed"] [role="button"].bg-gradiant-top-right-100 {
  background-color: var(--bs-body-bg)!important;
}

[data-bs-theme="light"][data-box-style="boxed"] .box,
[data-bs-theme="light"][data-box-style="boxed"] .box.bg-gradiant-top-right-100,
[data-bs-theme="light"][data-box-style="boxed"] [role="button"].bg-gradiant-top-right-100 {

  /* border: 1px solid var(--bs-border-color); */
}








[data-bs-theme="dark"] .bd-mode-toggle .theme-icon-active {
  fill: #fff;
}
.bd-mode-toggle .dropdown-menu .active .bi {
  display: block !important;
}


/* offcanvasContent */
body.dashboard main {
  min-height: calc(100dvh - 200px)
}


body.dashboard main,
body.dashboard > nav {
  transition: filter 300ms ease-out 0ms;
}

body.dashboard.offcanvasVisable main,
body.dashboard.offcanvasVisable > nav,
body.dashboard.offcanvasVisable .pageHead {
  filter: blur(5px) opacity(.5);
}

body.dashboard #offcanvasContent,
body.dashboard #offcanvasContentInline {
  width: 100dvw;
}


body.dashboard #offcanvasContent.full-width,
body.dashboard #offcanvasContent.full-width #offcanvasContentContainer > .loadingWrapper .loadingWrapper {
  max-width: unset !important;
}
body.dashboard #offcanvasContent.full-width #offcanvasContentContainer > .loadingWrapper {
  max-width: 80% !important;
}
body.dashboard #offcanvasContent.full-width #offcanvasContentContainer.justify-content-center {
  justify-content: flex-start !important;
  align-items: center;
  margin-top: 30vh;
}

@media (min-width: 576px) { body.dashboard #offcanvasContent, body.dashboard #offcanvasContentInline { max-width: 500px;} }

@media (max-width: 767px) {
  body.dashboard > nav .dropdown-menu {
    display: block;
    box-shadow: none!important;
    padding: 0;
  }
  body.dashboard > nav .dropdown-menu .dropdown-header {
    font-weight: 900;
    color: inherit;
    
    padding-left: 0;
    padding-right: 0;
  }
  body.dashboard > nav .dropdown-menu .dropdown-item {
    padding-left: 0;
    padding-right: 0;
  }
  
}

body.dashboard .leftCol {
  padding-top: 2rem;
}
@media (min-width: 1200px) {
  body.dashboard main > .container > .row .col-12[class*="col-xl"] > p:first-child{
    margin: 0!important;
    padding-bottom: 3rem!important;
    min-height: 4.625rem;
  }
  body.dashboard .leftCol {
    padding-top: 4.625rem;
  }
}


/* https://clamp.font-size.app/ */

/* .dh1 {
  font-size: clamp(1.25rem, 0.7885rem + 1.2821vw, 1.75rem);
}
.dh2 {
  font-size: clamp(1rem, 0.7692rem + 0.641vw, 1.25rem);
}
.btn {
  font-size: clamp(0.625rem, 0.3942rem + 0.641vw, 0.875rem);
} */
/* p {
  font-size: clamp(0.95rem, 0.8115rem + 0.3846vw, 1.1rem);
} */



.g-10,.gx-10 {
  --bs-gutter-x: 6rem
}
.g-10,.gy-10 {
  --bs-gutter-y: 6rem
}
@media (min-width: 576px) {
  .g-sm-10,.gx-sm-10 {
    --bs-gutter-x: 6rem
  }

  .g-sm-10,.gy-sm-10 {
      --bs-gutter-y: 6rem
  }
}
@media (min-width: 768px) {
  .g-md-10,.gx-md-10 {
    --bs-gutter-x: 6rem
  }

  .g-md-10,.gy-md-10 {
      --bs-gutter-y: 6rem
  }
}
@media (min-width: 992px) {
  .g-lg-10,.gx-lg-10 {
    --bs-gutter-x: 6rem
  }

  .g-lg-10,.gy-lg-10 {
      --bs-gutter-y: 6rem
  }
}
@media (min-width: 1200px) {
  .g-xl-10,.gx-xl-10 {
    --bs-gutter-x: 6rem
  }

  .g-xl-10,.gy-xl-10 {
      --bs-gutter-y: 6rem
  }
}
@media (min-width: 1400px) {
  .g-xxl-10,.gx-xxl-10 {
    --bs-gutter-x: 6rem
  }

  .g-xxl-10,.gy-xxl-10 {
      --bs-gutter-y: 6rem
  }
}

@media (min-width: 1200px) {
  .leftCol {
    position: -webkit-sticky !important;
    position: sticky !important;
    height: calc(100dvh - 300px);
    top: 200px;
  }
}


.vh-100 {
  height: 100vh !important;
  height: 100dvh !important;
}

.btn {
  font-weight: 600;
}


div.login-logo:before {
  content: "";
  position: absolute;
  pointer-events: none;
  background-image: url("/assets/img/bg.svg");
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

div.login-logo:before {
  width: 100%;
  height: 100%;
  z-index: 1;
  filter: blur(50px) opacity(0.5);
}

div.login-logo svg {
  width: 150px;
  height: 150px;
}


img.login-logo {
  height: 75px;
  position: relative;
  z-index: 2;
}

@media (min-width: 576px) {
  img.login-logo {
    height: 100px
  }
}

@media (min-width: 768px) {
  img.login-logo {
    height: 200px
  }
  div.login-logo svg {
    width: 300px;
    height: 300px;
  }
}


.form-control:focus {
  /* color: var(--bs-body-color); */
  /* background-color: var(--bs-body-bg); */
  border-color: rgb(200 201 203);
  /* outline: 0; */
  /* box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25); */
  box-shadow: 0 0 0 .25rem rgb(33 37 41 / 25%);
}

.was-validated .form-control:valid {
  border-color: var(--bs-border-color);
}

.form-floating>label {
  font-weight: 300;
  color: var(--bs-secondary-color);
}

.form-control.pin {
  height: calc(3.5rem + calc(var(--bs-border-width)* 2));
  width: calc(3.5rem + calc(var(--bs-border-width)* 2));
  font-weight: 800;
  font-size: 1.5rem;
  display: inline-block;
  text-align: center;
}

.form-control.pin::-webkit-inner-spin-button {
  display: none;
}

@media (min-width: 768px) {
  .form-control.pin {
    font-size: 2rem;
    
    height: calc(4.5rem + calc(var(--bs-border-width)* 2));
    width: calc(4.5rem + calc(var(--bs-border-width)* 2));

  }
}






.custom-tooltip {
  --bs-tooltip-bg: var(--bs-gray-600);
  --bs-tooltip-color: var(--bs-white);
  --bs-tooltip-font-size: 0.7rem;
  --bs-tooltip-padding-x: 0.4rem;
  --bs-tooltip-padding-y: 0.2rem;
  --bs-tooltip-border-radius: .2rem;
}


[data-box-style="boxed"] [data-js-action="setBoxStyle"][data-js-var="boxed"] span
,[data-box-style="flat"] [data-js-action="setBoxStyle"][data-js-var="flat"] span
,[data-box-style="gradiant"] [data-js-action="setBoxStyle"][data-js-var="gradiant"] span {
  display: inline!important;
}
[data-box-style="boxed"] [data-js-action="setBoxStyle"][data-js-var="boxed"] 
,[data-box-style="flat"] [data-js-action="setBoxStyle"][data-js-var="flat"] 
,[data-box-style="gradiant"] [data-js-action="setBoxStyle"][data-js-var="gradiant"]  {
  font-weight: 600!important;
}

.form-floating .choices[data-type*=select-one]:after {
  right: 1rem;
}
.form-floating .choices > .form-control {
  padding-top: 1.625rem;
  padding-bottom: .625rem;
}
.form-floating .choices > .form-control .choices__list--single {
  padding: 0;
}
.form-floating .choices ~ label {
  color: rgba(var(--bs-body-color-rgb), .65);
  transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

.form-switch {
  padding-left: 3em;
  /* filter: grayscale(1); */
}
.form-switch .form-check-input {
  margin-left: -3em;
  width: 2.25em;
  height: 1.25em;
}

.form-check-input {
  filter: grayscale(1);
}

.form-switch .form-check-input:checked + label[data-checked]:after {
  content: attr(data-checked);
}
.form-switch .form-check-input:not(:checked) + label[data-unchecked]:after {
  content: attr(data-unchecked);
}




.form-floating .selectpicker + button {
  
  min-height: calc(3.5rem + calc(var(--bs-border-width)* 2));
  line-height: 1.25;
  padding: 1.625rem .75rem .625rem!important;
  /* padding: 1 .75rem; */

}
.form-floating .bootstrap-select>.dropdown-toggle.bs-placeholder, 
.form-floating .bootstrap-select>.dropdown-toggle.bs-placeholder:active, 
.form-floating .bootstrap-select>.dropdown-toggle.bs-placeholder:focus, 
.form-floating .bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
  font-weight: 300;
  color: var(--bs-secondary-color)!important;
}
.form-floating .bootstrap-select .dropdown-toggle:focus, 
.form-floating .bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
  outline: 0 !important;
}


.selectpicker[data-style-base*='bg-body-tertiary'] ~ div.dropdown-menu {
  /* border-color: rgba(var(--bs-tertiary-bg-rgb),1);;
  border: unset;
  box-shadow: var(--bs-box-shadow-lg) !important; */
  border-color: rgba(var(--bs-tertiary-bg-rgb),1);;
  border-width: 1px!important;
  border-style: solid!important;
  box-shadow: unset!important;
  outline: 1px solid rgba(var(--bs-tertiary-bg-rgb),1);;
}

.selectpicker ~ div.dropdown-menu.show {
  width: 100%;
}

.selectpicker ~ div.dropdown-menu .bs-searchbox {
  margin-bottom: .5rem;
}

.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
  top: 50%!important;
  transform: translateY(-50%);
}
.bootstrap-select .dropdown-menu span.text {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.dropdown-toggle.no-dropdown-toggle:after {
  content: unset;
}

.was-validated .form-floating .bootstrap-select select:invalid+.dropdown-toggle {
  border-color: var(--bs-form-invalid-border-color);
  padding-right: calc(1.5em + .75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(.375em + .1875rem) center;
  background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.was-validated .form-floating .bs-searchbox .form-control:valid {
  background-image: none!important;
}

.form-floating>.form-control-plaintext~label, 
.form-floating>.form-control:focus~label, 
.form-floating>.form-control:not(:placeholder-shown)~label, 
.form-floating>.form-select~label,
.form-floating .bootstrap-select + label {
  color: rgba(var(--bs-body-color-rgb), .65);
  transform: scale(.7) translateY(-0.3rem) translateX(.35rem)
}


.form-floating>.form-control-plaintext~label::after, .form-floating>.form-control:focus~label::after, .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after {
  background-color: unset;
} 




#logo_em .cls-1,
[data-bs-theme="light"] #logo_em .cls-1,
[data-bs-theme="dark"] #logo_em .cls-3,
#logo_em_compact .cls-1,
[data-bs-theme="light"] #logo_em_compact .cls-1,
[data-bs-theme="dark"] #logo_em_compact .cls-3 {
  fill: var(--bs-dark);
}
#logo_em .cls-3,
[data-bs-theme="dark"] #logo_em .cls-1,
[data-bs-theme="light"] #logo_em .cls-3,
#logo_em_compact .cls-3,
[data-bs-theme="dark"] #logo_em_compact .cls-1,
[data-bs-theme="light"] #logo_em_compact .cls-3 {
  fill: var(--bs-light);
}



























.svg-box-2{
  width: 150px;
  height: 150px;
  position: relative;
  left: -20px;
}


.svg-box {
  display: block;
  margin: 0;
  position: absolute;
  width: 150px;
  bottom: 2rem;
  left: -1.4rem;

}

.green-stroke {
  stroke:#7CB342;
}

.red-stroke {
  stroke: #FF6245;
}

.yellow-stroke {
  stroke: #FFC107;
}

.circular {
  width: 100%;
}

.circular circle.path {
  
  stroke-dasharray: 330;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  opacity: 0.4;
  animation: 0.7s draw-circle ease-out;
}

/*------- Checkmark ---------*/
.checkmark{
stroke-width: 6.25;
  stroke-linecap: round;
position:absolute;
  top: 56px;
  left: 49px;
  width: 52px;
  height: 40px;
}

.checkmark path {
  animation: 1s draw-check ease-out;
}

@keyframes draw-circle {
  0% {
      stroke-dasharray: 0,330;
      stroke-dashoffset: 0;
      opacity: 1;
  }

  80% {
      stroke-dasharray: 330,330;
      stroke-dashoffset: 0;
      opacity: 1;
  }

  100%{
      opacity: 0.4;
  }
}

@keyframes draw-check {
  0% {
      stroke-dasharray: 49,80;
      stroke-dashoffset: 48;
      opacity: 0;
  }

  50% {
      stroke-dasharray: 49,80;
      stroke-dashoffset: 48;
      opacity: 1;
  }

  100% {
      stroke-dasharray: 130,80;
      stroke-dashoffset: 48;
  }
}

/*---------- Cross ----------*/

.cross {
  stroke-width:6.25;
  stroke-linecap: round;
  position: absolute;
  top: 54px;
  left: 54px;
  width: 40px;
  height: 40px;
}

.cross .first-line {
  animation: 0.7s draw-first-line ease-out;
}

.cross .second-line {
  animation: 0.7s draw-second-line ease-out;
}

@keyframes draw-first-line {
  0% {
      stroke-dasharray: 0,56;
      stroke-dashoffset: 0;
  }

  50% {
      stroke-dasharray: 0,56;
      stroke-dashoffset: 0;
  }

  100% {
      stroke-dasharray: 56,330;
      stroke-dashoffset: 0;
  }
}

@keyframes draw-second-line {
  0% {
      stroke-dasharray: 0,55;
      stroke-dashoffset: 1;
  }

  50% {
      stroke-dasharray: 0,55;
      stroke-dashoffset: 1;
  }

  100% {
      stroke-dasharray: 55,0;
      stroke-dashoffset: 70;
  }
}

.alert-sign {
  stroke-width:6.25;
  stroke-linecap: round;
  position: absolute;
  top: 40px;
  left: 68px;
  width: 15px;
  height: 70px;
  animation: 0.5s alert-sign-bounce cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.alert-sign .dot {
  stroke:none;
  fill: #FFC107;
}

@keyframes alert-sign-bounce {
  0% {
      transform: scale(0);
      opacity: 0;
  }

  50% {
      transform: scale(0);
      opacity: 1;
  }

  100% {
      transform: scale(1);
  }
}


[contenteditable="true"]:hover {
  cursor: text;
}

[contenteditable="true"]:focus-visible {
  outline: unset;
}

.editable-box {
  /* margin-left: -1.5rem;; */
}
.editable-box .editable {
  position: relative;
  overflow: hidden;
  transition: all 200ms ease-in-out;
  cursor: pointer;
}

.editable-box .editable:after,
.editable-box .editable:before {
  
  font-weight: 400;
  font-family: "Font Awesome 6 Pro";
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  position: absolute;
  top: 50%;
  right: 0;
  
  opacity: 0;
  pointer-events: none;
  transition: all 200ms ease-in-out;
}
.editable-box .editable:after {
  content: "\f304";
  transform: translate(2rem, -50%);
}
.editable-box .editable:before {
  content: "\f058";
  transform: translate(-2rem, -50%);
  color: #198758;
  font-weight: 700;
}

.editable-box .editable:hover {
  /* background-color: var(--bs-secondary-bg); */
  background-color: rgba(var(--bs-secondary-bg-rgb), .25)!important;
}
.editable-box .editable:hover:after {
  transform: translate(-2rem, -50%);
  opacity: 1;
}

.editable-box .editable.saved:before {
  animation: 3s saved_op ease-in-out;
}



.editable-box .editable.saved {
  animation: 3s saved_bg ease-in-out;
  background-color: transparent;
}

[data-box-style="flat"] .flat-ms--3 {
  margin-left: -1rem;
}


@keyframes saved_bg {
  10% {
    background-color: var(--bs-secondary-bg);
  }

  100% {
    background-color: transparent;
  }
}
@keyframes saved_op {
  10% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.company_logo {
  max-height: 100px;
}
.editable .company_logo {
  max-width: 200px;
}

.navbar .company_logo {
  height: 50px;
  max-width: 200px;
  object-fit: contain;
}
.navbar .company_logo[src] {
  margin-left: 1rem;
}

.filepond--root {
  font-family: inherit!important;
  transition: height 200ms ease-in-out;
}
.filepond--panel-root {
  background-color: unset!important;
}
.filepond--drop-label {
  font-size: .9rem!important;
  font-weight: 300!important;
  padding: 5rem 0;
  color: inherit!important;
}




select[name="dlid"] + button .filter-option-inner-inner > div:nth-child(2),
select[name="dlid"] ~ .dropdown-menu .dropdown-item .text > div:nth-child(1) {
  display: none;
}

.nav-pills .nav-link.active, 
.nav-pills .show>.nav-link {
  color: var(--bs-body-text);
  background-color: var(--bs-secondary-bg);
  font-weight: 600;
}
.nav-pills .nav-link {
  color: var(--bs-body-text);

}

/* .commit_row_checkboxes {
  opacity: 0%;
  transition: all 100ms ease-in-out;
  pointer-events: none;
  display: none;
}
.commit_row_checkboxes.opacity-100 {
  pointer-events: all;
} */

.btn-check:checked + i::before {
  content: "\f058";
  font-weight: 600;
  color: rgba(var(--bs-body-color-rgb), 1) !important;
}

[class*="fixed-box"] > div:first-child  {
  height: 40px;
}
[class*="fixed-box"] > div:last-child  {
  height: 50px;
}
[class*="fixed-box"] > div {

}
[class*="fixed-box"] > .center {
  width: calc(100% - 90px);
  height: calc(100% - 90px);
  margin: 0 auto;
  
}
.fixed-box-250 {
  width: 250px;
  height: 250px;
}




.admin-top-nav {

}
.admin-top-nav > span:not(:first-child)::before{
  content: "\f105";
  font-family: "Font Awesome 6 Pro";
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  font-weight: 300;
    font-size: 1rem;
    padding: 0 1rem;
 }
.admin-top-nav > span:last-child{
 font-weight: 700; 
}



.newsletter-template-box {
  width: 270px;
  /* height: 450px; */
  aspect-ratio: 1/1.5;
}

.newsletter-template-box iframe {
  width: 640px;
  height: 268%;
  transform: scale(0.372);
  transform-origin: top left;
  /* pointer-events: none; */
}



.newsletter-template-box .iframe:after {
  content: "";
  display: block;
  position: absolute;
  background: linear-gradient(0deg, rgb(255 255 255) 5%, rgba(255, 221, 4, 0) 35%);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}


.newsletter-template-container .iframe[data-viewport="desktop"] {
  height: 73.25rem;
}
.newsletter-template-container .iframe[data-viewport="mobil"] {
  width: 26.75rem;
  height: 35.6rem;
}

.newsletter-template-container iframe {
  width: 100%;
  height: 100%;
}
.newsletter-template-viewport-switch > div.selected {
background-color: rgba(var(--bs-secondary-bg-rgb),1);
}

.newsletter-template-container #cursor_edit {
  position: absolute; 
  top: 0; 
  left: 0px; 
  z-index: 1000;
  opacity: 0;
  
}
.newsletter-template-container #cursor_edit.show {
  opacity: 1;
  pointer-events: none;
}

.newsletter-template-container [data-key]:empty:before {
  content: "- leer -";
  font-style: italic;
  color: var(--bs-tertiary-color);
}



.checkboxAll,
.row_checkbox {
  cursor: pointer;
}


kbd:empty:before,
div.field span[data-key]:empty:before {
  content: '- noch kein Wert hinterlegt -';
  font-style: italic;
  color: var(--bs-tertiary-color);
  font-size: 0.775em;
  font-weight: 300;
}
kbd.danger:empty:before,
div.danger.field span[data-key]:empty:before {
  color: rgba(var(--bs-danger-rgb),1);
}


.widgetBox > div {
  aspect-ratio: 1/1;
}

.widgetBox .fs-xxl.drop-shadow {
  -webkit-box-reflect: below -4rem linear-gradient(transparent 50%, #ffffff45 100%)!important;
}
.widgetBox .fs-xxl {
  font-size: 6rem;
  font-weight: 600;
}

.widgetBox .body i {
  font-size: initial;
}
.widgetBox .body img {
  max-height: 70px;
}

.widgetBox .body .drop-shadow {
  -webkit-box-reflect: below 0 linear-gradient(transparent 60%, #ffffff45 100%);
}


.widgetBox .box.theme-bg-color,
.widgetBox .box.theme-bg-color.bg-gradiant-top-right-100 {
  background-color: var(--custom-primary-color)!important;
}

.widgetBox .head i {
  color: var(--custom-primary-color);
}




#logo_em .cls-1,
[data-bs-theme="light"] #logo_em .cls-1,
[data-bs-theme="dark"] #logo_em .cls-3,
#logo_em_compact .cls-1,
[data-bs-theme="light"] #logo_em_compact .cls-1,
[data-bs-theme="dark"] #logo_em_compact .cls-3 {
  fill: var(--bs-dark);
}

#logo_em .cls-3,
[data-bs-theme="dark"] #logo_em .cls-1,
[data-bs-theme="light"] #logo_em .cls-3,
#logo_em_compact .cls-3,
[data-bs-theme="dark"] #logo_em_compact .cls-1,
[data-bs-theme="light"] #logo_em_compact .cls-3 {
  fill: var(--bs-light);
}