/* Colores */
/* .color-black-gray { color: #707070; } */
.color-black-gray { color: #4D4D4D; }
.fill-blue { background-color: #3D7AB8; }
.fill-yellow { background-color: #F59A18; }
.fill-light-yellow { background-color: #FCD307; }
.fill-red { background-color: #E94F51; }
.fill-purple { background-color: #B981D1; }
.fill-dark-purple { background-color: #8231A6; }
.fill-dark-blue { background-color: #1E293B; }
.fill-light-purple { background-color: #F6EFF9; }
.fill-light-gray { background-color: #EDEDED; }
.fill-light-gray-2 { background-color: #F1F1F1; }
.fill-light-gray-3 { background-color: #E2E8F0; }

.komorebi-color-black-gray { color: #1E293B; }
.komorebi-fill-light-gray { background-color: #F9FAFC; }
.komorebi-fill-yellow { background-color: #F59E0B; }
.komorebi-fill-accents { background-color: #F6EFF9; }

/* Navbar */
#header li {
  font-size: 22px;
  font-weight: bold;
}
#header li a:active,
#header li a:focus,
#header li a:hover {
  text-decoration: underline;
}
#header button.btn-komorebi {
  font-size: 22px;
  position: relative;
  bottom: 2px;
}
.komorebi-logo {
  width: 180px;
}

/* Round form */
form.round-form input {
  border: 1px solid #707070;
  border-radius: 10px;
  color: #707070;
  font-size: 20px;
}

form.round-form button {
  font-size: 21px;
}

form.round-form a {
  text-decoration: none;
}

form.round-form a:active,
form.round-form a:focus,
form.round-form a:hover
{
  text-decoration: underline;
}

form .form-select {
  border-radius: 100px;
}

/* hr */
hr.komorebi-hr {
  border-color: #FDCC48;
  border-width: 2px;
  opacity: 1;
}
/* Botones */
.btn.btn-purple {
  background-color: #8231A6;
  border-color: #641b89;
  /* border-radius: 100px; */
}

.btn.btn-purple:active,
.btn.btn-purple:focus,
.btn.btn-purple:hover {
  background-color: #641b89;
}

button.btn-komorebi-alt {
  border-radius: 100px;
  font-size: 22px;
}

button.btn-komorebi {
  border: 3px solid #FDCC48;
  border-radius: 100px;
  font-size: 22px;
}

button.btn-komorebi:active,
button.btn-komorebi:focus,
button.btn-komorebi:hover {
  background: #FDCC48;
  border: 3px solid #FDCC48;
  color: #FFFFFF;
}

/* Card */
.komorebi-card {
  background: #FFFFFF;
  border-radius: 10px;
}

.komorebi-card-bordered {
  border-radius: 10px;
  border: 1px solid #000;
}

/* Icon */
.komorebi-circle-icon {
  border: 3px solid #FDCC48;
  border-radius: 100%;
  color: #FDCC48;
  font-size: 40px;
  padding: 15px 17px;
}
.komorebi-gift-icon {
  font-size: 60px;
}
.komorebi-cc-icon {
  font-size: 40px;
}

/* Contenido */
#contenido {
  font-size: 20px;
}

/* Avatar */
.avatar {
  border-radius: 100%;
}

/* Grupo */
#contenido.grupo .progress {
  font-size: 20px;
  height: 30px;
}

div.popover .popover-body {
  padding-top: 0.25rem!important;
  padding-bottom: 0.25rem!important;
  padding-right: 1.5rem!important;
  padding-left: 1.5rem!important;
}

.test-date.test-date-01 {
  left: 46%;
}

.test-date.test-date-02 {
  left: 96%;
}

.test-date span.test-circle {
  border: 1px solid #000;
  background: #FFF;
  border-radius: 100%;
  text-align: center;
  height: 33px;
  width: 33px;
  position: relative;
  top: -2px;
}

.test-date span.test-text {
  font-size: 14px;
}

.fs-35 {
  font-size: 35px;
}

.komorebi-navbar ul.nav {
  z-index: 2;
}

.komorebi-navbar .nav-underline .nav-link {
  color: #1E293B;
}

.komorebi-navbar .nav-underline .nav-link.active,
.komorebi-navbar .nav-underline .nav-link:focus,
.komorebi-navbar .nav-underline .nav-link:hover,
.komorebi-navbar .nav-underline .show>.nav-link {
  color: #1E293B;
  border-color: #FDCC48;
  border-width: 7px;
}

.komorebi-navbar:after {
  border-bottom: 1px solid #1E293B;
  content: "";
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  z-index: 1;
}

.komorebi-card-group.komorebi-card-bordered:after {
  content: "";
  position: absolute;
  height: 90%;
  width: 1px;
  left: -3px;
  top: 5%;
  border-left: 5px solid #FDCC48;
}

.komorebi-card-group img.avatar {
  max-width: 80px;
}

.bordered-right:after {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 1px;
  border-right: 3px solid #FDCC48;
  top: 0;
  right: 0;
}

li.nav-item a {
  font-size: 1em;
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  li.nav-item a {
    font-size: 0.7em;
  }
}