@font-face {
   font-family: "Tit";
   font-weight: normal;
   src: url(../fonts/TitR.ttf) format("truetype");
}

@font-face {
   font-family: "Tit";
   font-weight: bold;
   src: url(../fonts/TitB.ttf) format("truetype");
}

@font-face {
   font-family: "Tit";
   font-style: italic;
   src: url(../fonts/TitI.ttf) format("truetype");
}

@font-face {
   font-display: block;
   font-family: bootstrap-icons;
   src: url("../fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6") format("woff2")
 }

* {
   font-family: Tit;
}

html:not([data-bs-theme="dark"]) body {
   background-color: #ededeb;
   color: #666;
}

html:not([data-bs-theme="dark"]) body.white {
   background-color: #fff;
}

.box-bg {
   background-color: #2b3035;
}

html:not([data-bs-theme="dark"]) .box-bg {
   background-color: #fff;
}

.theme-switch-box {
   top: 1rem;
   right: 1rem;
}

.logo-box {
   width: 8rem;
}

.wrapper {
   min-height: 100vh;
   min-height: 100dvh;
   max-height: 100vh;
   max-height: 100dvh;
}

.top-box {
   height: 18%;
}

.keyboard-box {
   height: 10rem;
}

.flex-fill {
   min-width: 0;
   min-height: 0;
}

.img-fit {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.rounded-small {
   border-radius: .5rem;
}

.rounded-mid {
   border-radius: .75rem;
}

.rounded-big {
   border-radius: 1rem;
}

.overflow-xy {
   overflow-x: hidden;
   overflow-y: auto;
}

.counter-box {
   top: 1rem;
   right: 0;
   border-top: #f2f2f2 solid .3rem;
   border-left: #f2f2f2 solid .3rem;
   border-bottom: #f2f2f2 solid .3rem;
   border-bottom-left-radius: 1rem;
   border-top-left-radius: 1rem;
}

.keyboard-key-box {
   display: grid;
   grid-template-columns: repeat(10, 1fr);
   grid-gap: .2rem;
}

.keyboard-key {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.1rem;
   font-weight: bold;
   padding: 0;
   border: .13rem solid #b2b2b2;
   border-radius: .3rem;
}

.keyboard-key.empty {
   opacity: 0;
}

.img-key {
   width: 1rem;
}

.cursor-pointer {
   cursor: pointer;
}

.cursor-disabled {
   cursor: not-allowed;
}

.w-5-rem {
   width: 5rem;
}

.w-9-rem {
   width: 9rem;
}

.btn-plus {
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
   font-weight: bold;
   width: 1.5rem;
   height: 1.5rem;
   border: .15rem solid #0d6efd;
   border-radius: .3rem;
   color: #0d6efd;
}

.btn-plus.inactive {
   border: .3rem solid #ccc;
   color: #ccc;
   cursor: not-allowed;
}

.btn-plus.active {
   background-color: #0d6efd;
   color: #fff;
}

.btn {
   font-weight: bold;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.btn-warning,
.btn-info {
   color: #fff;
}

.btn-purple {
   --bs-btn-color: #fff;
   --bs-btn-bg: var(--bs-purple);
   --bs-btn-border-color: var(--bs-purple);
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: #6238ac;
   --bs-btn-hover-border-color: #573199;
   --bs-btn-focus-shadow-rgb: 49, 132, 253;
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: #573199;
   --bs-btn-active-border-color: #6238ac;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: var(--bs-purple);
   --bs-btn-disabled-border-color: var(--bs-purple);
}

.btn-close {
   background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
   opacity: 1;
}

.modal-content {
   box-shadow: 0 1rem 3rem rgba(var(--bs-body-color-rgb), 0.175);
   border-radius: .6rem;
}

html:not([data-bs-theme="dark"]) .modal-header {
   background-color: var(--bs-teal);
   color: #fff;
}

.modal-header {
   background-color: var(--bs-indigo);
   padding: 1rem 1.5rem;
   border-top-left-radius: .55rem;
   border-top-right-radius: .55rem;
}

.list-group-item:first-child {
   border-top-left-radius: .5rem;
   border-top-right-radius: .5rem;
}

@media (min-width: 768px) {
   .top-box {
      height: 30%;
   }

   .keyboard-key-box {
      grid-gap: .4rem;
   }

   .keyboard-key {
      font-size: 1.5rem;
      font-weight: bold;
      padding: .5rem 0;
      border: .16rem solid #b2b2b2;
      border-radius: .5rem;
   }

   .img-key {
      width: 1.5rem;
   }

   .btn-plus {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      font-weight: bold;
      width: 2.5rem;
      height: 2.5rem;
      border: .3rem solid #0d6efd;
      border-radius: .5rem;
      color: #0d6efd;
   }

   .btn-plus.inactive {
      border: .3rem solid #ccc;
      color: #ccc;
      cursor: not-allowed;
   }
}