@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,200;1,400;1,700;1,900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap);
/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
  from {
    background: #5264ae;
  }
  to {
    width: 0;
    background: transparent;
  }
}
@keyframes inputHighlighter {
  from {
    background: #5264ae;
  }
  to {
    width: 0;
    background: transparent;
  }
}
@-webkit-keyframes pureScaleFilter {
  0% {
    transform: translateY(-50%) scale(1.4);
  }
  100% {
    transform: translateY(-50%) scale(1);
  }
}
@keyframes pureScaleFilter {
  0% {
    transform: translateY(-50%) scale(1.4);
  }
  100% {
    transform: translateY(-50%) scale(1);
  }
}
@-webkit-keyframes pureScaleFilter {
  0% {
    transform: translateY(-50%) scale(1.4);
  }
  100% {
    transform: translateY(-50%) scale(1);
  }
}
@-webkit-keyframes pureScale {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes pureScale {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem);
  }
  80% {
    transform: translateX(1rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem);
  }
  80% {
    transform: translateX(1rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@-webkit-keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(10rem);
  }
  80% {
    transform: translateX(-1rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(10rem);
  }
  80% {
    transform: translateX(-1rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@-webkit-keyframes startOpacity {
  0% {
    transform: rotateY(180deg);
    opacity: 0;
  }
  20% {
    transform: rotateY(0deg);
    opacity: 0;
  }
  100% {
    transform: rotateY(0);
    opacity: 1;
  }
}
@keyframes startOpacity {
  0% {
    transform: rotateY(180deg);
    opacity: 0;
  }
  20% {
    transform: rotateY(0deg);
    opacity: 0;
  }
  100% {
    transform: rotateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes moveInTop {
  0% {
    opacity: 0;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -100%);
  }
  80% {
    top: 5%;
    left: 50%;
    transform: translate(-50%, -52%);
  }
  100% {
    opacity: 1;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
@keyframes moveInTop {
  0% {
    opacity: 0;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -100%);
  }
  80% {
    top: 5%;
    left: 50%;
    transform: translate(-50%, -52%);
  }
  100% {
    opacity: 1;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
@-webkit-keyframes moveInBottom {
  0% {
    opacity: 0;
    transform: translateY(5rem);
  }
  80% {
    transform: translateY(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveInBottom {
  0% {
    opacity: 0;
    transform: translateY(5rem);
  }
  80% {
    transform: translateY(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
._animated-easy-out--top {
  -webkit-animation-name: moveInBottom;
          animation-name: moveInBottom;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}

._animated-easy-out--bottom {
  -webkit-animation-name: moveInTop;
          animation-name: moveInTop;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}

._animated-easy-out--right {
  -webkit-animation-name: moveInRight;
          animation-name: moveInRight;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

._animated-easy-out--left {
  -webkit-animation-name: moveInLeft;
          animation-name: moveInLeft;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}

html {
  display: block;
  box-sizing: border-box;
  font-size: 62.5%;
  scrollbar-width: thin;
  font-family: "Manrope", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smooth: auto;
  scroll-behavior: smooth;
  text-shadow: 0 0 0 rgba(119, 76, 76, 0.1);
  font-style: normal;
  line-height: 1.5;
}
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  overflow: hidden;
}

ul,
li,
input,
div,
a,
span,
small,
button,
svg {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

form {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  flex: 1;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: none;
  -webkit-text-fill-color: inherit !important;
  -webkit-box-shadow: none;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

::-webkit-scrollbar {
  width: 4px;
  height: 8px;
  background-color: #989898;
}

::-webkit-scrollbar-track {
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #5b63ff;
}

body {
  background-color: #f1f5f8;
  display: flex;
  flex-direction: column;
}

.app {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.main {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  opacity: 1;
  transition: all 0.2s ease;
}
.main.box-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 37.5em) {
  .main.box-center {
    padding: 0 1rem;
  }
}

.page_content {
  position: absolute;
  top: 68px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}
.page_content__aside, .page_content__main {
  display: inline-block;
  padding: 8px;
}
@media only screen and (max-width: 37.5em) {
  .page_content__main {
    padding: 0;
  }
}
.page_content__aside {
  width: 300px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  transition: left 0.4s ease-in-out;
}
@media only screen and (max-width: 62.5em) {
  .page_content__aside {
    left: -300px;
  }
}
@media only screen and (max-width: 37.5em) {
  .page_content__aside {
    width: 100%;
    left: -150%;
    padding: 8px;
  }
}
.page_content__main {
  position: absolute;
  top: 0;
  left: 300px;
  right: 0;
  bottom: 0;
  transition: left 0.4s ease-in-out;
  overflow: hidden;
}
@media only screen and (max-width: 62.5em) {
  .page_content__main {
    left: 0;
    overflow: hidden;
  }
}

.side .page_content__aside {
  left: -300px;
}
@media only screen and (max-width: 62.5em) {
  .side .page_content__aside {
    left: 0;
  }
}

.side .page_content__main {
  left: 0;
}

.t-h1 {
  font-size: 3.5rem;
}

.t-h2 {
  font-size: 3.2rem;
}

.t-h3 {
  font-size: 2.9rem;
}

.t-h4 {
  font-size: 2.6rem;
}

.t-h5 {
  font-size: 2.3rem;
}

.t-h6 {
  font-size: 2rem;
}

.t-paragraph {
  font-size: 1.6rem;
  color: #454545;
  line-height: 1.2;
}

.t-paragraph.bold {
  font-weight: 600;
}

.t-small {
  font-size: 1.3rem;
  color: #454545;
}

.t-h1, .t-h2, .t-h3, .t-h4, .t-h5, .t-h6 {
  font-weight: 400;
  color: #000;
}

.t-h1.bold, .t-h2.bold, .t-h3.bold, .t-h4.bold, .t-h5.bold, .t-h6.bold {
  font-weight: 600;
  color: #000;
}

.login {
  background-color: #fff;
  width: 100%;
  max-width: 420px;
  height: auto;
  box-shadow: 1px 1px 10px rgba(37, 61, 255, 0.3);
  border-radius: 2rem;
  padding: 3rem;
}
.login-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}
@media only screen and (min-width: 37.5em) {
  .login-group {
    top: 58%;
  }
}

.containerX {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 1px 1px 10px rgba(0, 0, 255, 0.15);
  overflow: hidden;
}
@media only screen and (max-width: 37.5em) {
  .containerX {
    border-radius: 0;
  }
}
.containerX__header {
  order: 0;
  padding-top: 1rem;
  box-shadow: 1px 1px 5px rgba(0, 0, 255, 0.2);
  overflow: hidden;
}
.containerX__main {
  order: 1;
  flex-grow: 1;
  overflow: auto;
  scrollbar-width: thin;
  overflow: auto;
}
.containerX__footer {
  min-height: 6rem;
  order: 2;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.table-container {
  display: block;
  width: 100%;
  scrollbar-width: thin;
  overflow-x: auto;
}

.blockX {
  display: block;
  padding: 1rem;
}

.blockX-header {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 1rem 3rem;
}
@media only screen and (max-width: 37.5em) {
  .blockX-header {
    padding: 1rem 5px;
  }
}

.flex-wrap {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 1rem 3rem;
}
@media only screen and (max-width: 37.5em) {
  .flex-wrap {
    padding: 1rem 5px;
  }
}
.flex-wrap__row {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
}

.create-header {
  padding: 2rem 1rem;
  box-shadow: 1px 1px 5px rgba(20, 0, 255, 0.1);
  border-radius: 5px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

.create-middle {
  display: block;
  position: relative;
  height: 100%;
  margin-top: 3rem;
  padding: 0 1rem;
}

.flex-row {
  display: flex;
  align-items: center;
}

.tooltip {
  position: absolute;
  top: 110%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  width: 100%;
  transform: translateX(-50%);
  background: #fff;
  box-shadow: 1px 1px 10px rgba(0, 0, 255, 0.15);
  padding: 1rem;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
  z-index: 10;
}
.tooltip:after, .tooltip:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.tooltip:before {
  border-color: rgba(136, 183, 213, 0);
  border-bottom-color: #fff;
  border-width: 10px;
  margin-left: -10px;
}

.tooltips:hover ~ .tooltip {
  visibility: visible;
  opacity: 1;
}

.page_header {
  background-color: #ffffff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
  position: fixed;
  left: 8px;
  right: 8px;
  height: 68px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
@media only screen and (max-width: 37.5em) {
  .page_header {
    background-color: #1c19c7;
    left: 0;
    right: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
  }
}
.page_header__content {
  display: grid;
  grid-template-columns: [header-start] auto [header-logo] 1fr [header-end];
  grid-template-rows: 1fr;
  grid-auto-flow: row;
  grid-column-gap: 0.8rem;
  align-items: center;
  height: 100%;
}
.page_header__logo {
  position: relative;
  grid-row: 1;
  grid-column: header-start/header-logo;
  width: 30rem;
  overflow: hidden;
  display: grid;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 37.5em) {
  .page_header__logo {
    margin-left: 20px;
    width: auto;
  }
}
.page_header__logo img {
  display: block;
  width: 30%;
  margin: 0 auto;
}
@media only screen and (max-width: 37.5em) {
  .page_header__logo img {
    display: block;
    width: 90px;
  }
}
.page_header__breadcrumb {
  /* Auto Layout */
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px;
}
@media only screen and (max-width: 37.5em) {
  .page_header__breadcrumb {
    display: none;
  }
}
.page_header__breadcrumb p {
  padding: 2px;
  color: #454545;
}

.toggle-wrap {
  position: fixed;
  top: 0;
  right: 2rem;
  align-self: center;
  justify-self: end;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 20;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0.2rem 1rem 0 rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(18%);
}
.toggle-bar,
.toggle-bar::before,
.toggle-bar::after,
.toggle-wrap.active .toggle-bar,
.toggle-wrap.active .toggle-bar::before,
.toggle-wrap.active .toggle-bar::after {
  transition: all 0.2s ease-in-out;
}

.toggle-bar {
  width: 22px;
  height: 4px;
  position: relative;
  border-top: 4px solid #dc3545;
  display: block;
  cursor: pointer;
  z-index: 10;
  overflow: initial;
}
@media only screen and (max-width: 62.5em) {
  .toggle-bar {
    border-top: 6px solid transparent;
    transform: translateX(12%);
  }
}
.toggle-bar::after, .toggle-bar::before {
  content: "";
  display: block;
  background: #dc3545;
  height: 4px;
  width: 22px;
  position: absolute;
  top: -13px;
  transform: rotate(0deg);
  transform-origin: -1px;
}
@media only screen and (max-width: 62.5em) {
  .toggle-bar::before {
    transform: rotate(45deg);
  }
}
.toggle-bar::after {
  top: 4px;
}
@media only screen and (max-width: 62.5em) {
  .toggle-bar::after {
    transform: rotate(-45deg);
  }
}

.toggle-wrap.active .toggle-bar {
  border-top: 6px solid transparent;
  transform: translateX(12%);
}
@media only screen and (max-width: 62.5em) {
  .toggle-wrap.active .toggle-bar {
    border-top: 4px solid #dc3545;
    transform: translateX(0);
  }
}

.toggle-wrap.active .toggle-bar::before {
  transform: rotate(45deg);
}
@media only screen and (max-width: 62.5em) {
  .toggle-wrap.active .toggle-bar::before {
    transform: rotate(0deg);
  }
}

.toggle-wrap.active .toggle-bar::after {
  transform: rotate(-45deg);
}
@media only screen and (max-width: 62.5em) {
  .toggle-wrap.active .toggle-bar::after {
    transform: rotate(0deg);
  }
}

.menu-left {
  background-color: #1c3faa;
  height: 100%;
  overflow-y: scroll;
  scrollbar-width: none;
  padding: 1.5rem 0 1rem 1rem;
  border-radius: 8px;
}
@media only screen and (max-width: 62.5em) {
  .menu-left {
    box-shadow: 6px 0px 10px 4px rgba(24, 94, 224, 0.15);
  }
}
.menu-left__list {
  list-style: none;
}
.menu-left__item {
  display: grid;
  grid-template-columns: 3rem 1fr 2rem;
  align-items: center;
  grid-column-gap: 8px;
  padding: 1rem 2rem 1rem 1rem;
  cursor: pointer;
}
.menu-left__item.actived {
  background-color: #1a389f;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  box-shadow: 18px 2px 2px rgba(5, 250, 250, 0.7);
}
.menu-left__item.open {
  -webkit-animation: pureScale 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
          animation: pureScale 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.menu-left__svg {
  grid-column: 1;
  max-width: 2.5rem;
  max-height: 2.5rem;
  width: 100%;
  fill: #fff;
}
.menu-left__link:visited, .menu-left__link:link {
  grid-column: 2;
  text-decoration: none;
  font-size: 1.8rem;
  color: #f1f5f8;
}
.menu-left__link:visited h6, .menu-left__link:link h6 {
  color: #f1f5f8;
}
.menu-left__link:visited:focus, .menu-left__link:link:focus {
  outline: none;
}
.menu-left__arrowD {
  grid-column: 3;
  position: relative;
  display: grid;
  align-items: center;
}
.menu-left__arrowD::before, .menu-left__arrowD::after {
  content: "";
  position: absolute;
  background-color: #f1f5f8;
  width: 1.1rem;
  height: 2px;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}
.menu-left__arrowD::before {
  transform: rotate(45deg);
}
.menu-left__arrowD::after {
  transform: rotate(-45deg);
  left: 0.6rem;
}
.menu-left__divider {
  grid-column: 1/-1;
  height: 2px;
  background-color: #577edf;
  margin-top: 1rem;
}
.menu-left__item.dash.active {
  background-color: #f1f5f8;
  border-top-left-radius: 3rem;
  border-bottom-left-radius: 3rem;
}
.menu-left__item.dash.active .menu-left__svg {
  fill: #1c3faa;
}
.menu-left__item.dash.active .menu-left__link {
  color: #000;
}

.menu-sub {
  list-style: none;
  grid-column: 1/-1;
  background-color: #1a389f;
  border-radius: 6px;
  overflow-y: auto;
  scrollbar-width: none;
  max-height: 0;
  opacity: 0;
  transition: all 0.8s linear;
}
.menu-sub__item {
  display: grid;
  grid-template-columns: 3rem 1fr 2rem;
  align-items: center;
  grid-column-gap: 2px;
  padding: 3px;
}
.menu-sub__svg {
  grid-column: 1;
  max-width: 2.5rem;
  max-height: 2.5rem;
  width: 100%;
  fill: #ffd439;
}
.menu-sub__link {
  grid-column: 2;
  text-decoration: none;
  font-size: 1.4rem;
  color: #ffd439;
}
.menu-sub__link h6 {
  color: #f1f5f8;
}

.menu-sub__item:hover .menu-sub__link,
.menu-sub__item:hover .menu-sub__svg {
  color: #fff;
  fill: #fff;
}

.menu-left__item.open .menu-left__arrowD::before {
  transform: rotate(-45deg);
}

.menu-left__item.open .menu-left__arrowD::after {
  transform: rotate(45deg);
}

@-webkit-keyframes openSub {
  0% {
    height: 0;
    transform: translateY(-100%);
  }
  80% {
    height: 50%;
    transform: translateY(-50%);
  }
  100% {
    height: 100%;
    transform: translateY(0);
  }
}

@keyframes openSub {
  0% {
    height: 0;
    transform: translateY(-100%);
  }
  80% {
    height: 50%;
    transform: translateY(-50%);
  }
  100% {
    height: 100%;
    transform: translateY(0);
  }
}
.main-row {
  padding: 3rem 3rem;
  border: 1px solid rgba(173, 173, 173, 0.3);
  border-radius: 10px;
}
@media only screen and (max-width: 37.5em) {
  .main-row {
    border: none;
  }
}

.row-search {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(173, 173, 173, 0.3);
  border-radius: 10px;
  margin-bottom: 2rem;
  padding: 1rem;
}

.btn-row {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  white-space: none;
  overflow: initial;
}
@media only screen and (max-width: 37.5em) {
  .btn-row.mob-wrap {
    flex-wrap: wrap;
    flex-direction: column;
  }
}
.btn-row__btn {
  display: flex;
  align-items: center;
  margin: 0 2px;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  transform-origin: 0 0 0 0;
  transform: translateY(-20%);
}
.btn-row__btn:focus {
  outline: none;
}
.btn-row__btn:active {
  -webkit-animation: pureScale 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
          animation: pureScale 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.btn-row img {
  pointer-events: none;
  max-height: 3.5rem;
}
@media only screen and (max-width: 37.5em) {
  .btn-row img {
    max-height: 3.4rem !important;
  }
}
@media only screen and (max-width: 37.5em) {
  .btn-row__btn.mb img {
    max-height: 4rem !important;
  }
}
.btn-row__btn:disabled {
  -webkit-animation: none;
          animation: none;
  cursor: not-allowed;
  opacity: 0.3;
}

.row {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  overflow: initial;
}
.row__absolutebutton {
  position: absolute;
  right: 5px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  z-index: 1;
  top: 50%;
  transform: translateY(-45%);
}
.row__absolutebutton img {
  max-height: 3rem;
  pointer-events: none;
}
.row__absolutebutton:active {
  -webkit-animation: pureScaleFilter 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
          animation: pureScaleFilter 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.row__absolutebutton:focus {
  outline: none;
}
.row__absolutebutton:disabled {
  cursor: not-allowed;
  -webkit-animation: none;
          animation: none;
}
.row__absolutebutton:disabled img {
  opacity: 0.3;
}
.row.title {
  padding-left: 1rem;
  padding-right: 1rem;
  margin-top: 5px;
}

.group-title {
  font-size: 1.5rem;
  color: #d77979;
  width: 100%;
  margin-bottom: 2.5rem;
  border: 2px solid rgba(255, 216, 216, 0.3);
  padding: 5px;
  border-radius: 5px;
  background-color: #d7d7d71c;
  position: relative;
}
.group-title.b5 {
  margin-bottom: 5px;
}

.group-subtitle {
  width: 100%;
  font-size: 1.5rem;
  margin-bottom: 20px;
  padding: 0 5px;
  color: #5a6bb1;
}

.group-accordion {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: unset;
  cursor: pointer;
  padding: 0 8px;
}
.group-accordion__remove {
  max-width: 3rem;
  max-height: 3rem;
  position: absolute;
  top: 3px;
  right: 18px;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
.group-accordion__remove img {
  width: 100%;
  pointer-events: none;
}
.group-accordion__header {
  padding: 8px 1rem;
  font-size: 1.2rem;
  color: #5a6bb1;
  background-color: #fdfdfd;
}
.group-accordion__header label {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.group-accordion__content {
  background: rgba(255, 255, 255, 0.2);
  font-size: 1rem;
  height: 0;
  overflow: hidden;
  transition: all 0.5s ease;
  padding: 0 1rem;
  background-color: #fdfdfd;
  font-size: 1.2rem;
  color: #5c5c5c;
  border-bottom: 1px solid #eee;
}
.group-accordion__content p {
  padding: 5px 0;
  font-size: inherit;
  color: inherit;
}

.group {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 1.7rem;
  justify-content: flex-end;
  padding: 0 1rem;
  overflow: unset;
  /* BOTTOM BARS ================================= */
  /* active state */
  /* HIGHLIGHTER ================================== */
  /* active state */
}
@media only screen and (max-width: 75em) {
  .group {
    padding: 0 5px;
  }
}
.group__chip {
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
}
.group__chip span {
  position: relative;
  margin: 0 5px;
  margin: 0 3px;
  background-color: #1c3faa;
  color: #fff;
  padding: 0px 20px 0 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  cursor: pointer;
}
.group__chip span::before, .group__chip span::after {
  content: "";
  position: absolute;
  background-color: #ffffff;
  width: 1.1rem;
  height: 2px;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}
.group__chip span::before {
  transform: rotate(-45deg);
  right: 5px;
}
.group__chip span::after {
  transform: rotate(45deg);
  right: 5px;
}
.group.bottom {
  margin-bottom: 1rem;
}
.group__img-logo {
  width: 150px;
  align-self: center;
}
.group__accordion {
  position: relative;
  width: 100%;
  box-shadow: 1px 1px 8px white;
  margin-top: 2px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 1px 1px 8px #ececec;
  border-radius: 2px;
  color: #7376a2;
  cursor: pointer;
}
.group__content {
  background: rgba(255, 255, 255, 0.2);
  font-size: 1rem;
  height: 0;
  overflow: hidden;
  transition: all 1s ease;
  border-radius: 0 0 5px 5px;
}
.group__impdefault {
  background-color: unset;
  color: #718096;
  border-radius: 5px;
  box-shadow: none;
  outline: none;
  border: 1px solid #718096;
  height: 3.2rem;
  padding: 0 8px;
}
@media only screen and (max-width: 37.5em) {
  .group__impdefault {
    font-size: 1.4rem;
  }
}
.group__lbdefault {
  color: #718096;
  margin-left: 5px;
  font-size: 1.2rem;
}
.group__svgdefault {
  position: absolute;
  width: 2rem;
  height: 2rem;
  bottom: 30%;
  right: 18px;
  fill: #718096;
  stroke: transparent;
  stroke-width: 0%;
  transform: translateY(50%);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.group__svgdefault.input {
  width: 2.5rem;
  height: 2.5rem;
  bottom: 18px;
}
.group__hidden {
  position: absolute;
  width: 0;
  background-color: unset;
  box-shadow: none;
  border: none;
}
.group__input {
  background-color: unset;
  font-size: 15px;
  padding: 5px 10px 5px 5px;
  display: block;
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: none;
  border-radius: none;
  box-shadow: none;
  color: #7376a2;
  font-weight: 100;
  text-transform: uppercase;
}
.group__input:focus {
  outline: none;
}
.group__textarea {
  background-color: transparent;
  font-size: 13px;
  padding: 0px 10px 0px 5px;
  display: block;
  border: none;
  border-bottom: 1px solid #757575;
  color: #7376a2;
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
  margin-top: 10px;
  text-transform: uppercase;
  padding-bottom: 5px;
}
.group__textarea:focus {
  outline: none;
}
.group__btnbadage {
  position: absolute;
  top: 50%;
  transform: translateY(-60%);
  right: 15px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.group__btnbadage img {
  max-height: 3rem;
  pointer-events: none;
}
.group__btnbadage:active {
  -webkit-animation: pureScaleFilter 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
          animation: pureScaleFilter 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.group__btnbadage:focus {
  outline: none;
}
.group__btnbadage:disabled {
  cursor: not-allowed;
  -webkit-animation: none;
          animation: none;
}
.group__btnbadage:disabled img {
  opacity: 0.3;
}
.group__label {
  width: 100%;
  color: #999;
  font-size: 18px;
  width: 100%;
  font-weight: normal;
  position: absolute;
  left: 20px;
  pointer-events: none;
  transform-origin: 0 0;
  transition: 0.4s ease all;
  -moz-transition: 0.4s ease all;
  -webkit-transition: 0.4s ease all;
  bottom: 4px;
  overflow: unset;
}
.group__label.svgico {
  padding-left: 2rem;
  display: flex;
}
.group__label.svgico.x2 {
  padding-left: 3rem;
  display: flex;
  align-items: center;
}
.group__svg {
  position: absolute;
  left: 0;
  width: 2rem;
  height: 2rem;
  bottom: 4px;
  fill: currentColor;
  transform-origin: 0 0;
  transition: 0.4s ease all;
  -moz-transition: 0.4s ease all;
  -webkit-transition: 0.4s ease all;
}
.group__svg.x2 {
  width: 2.5rem;
  height: 2.5rem;
}
.group__input::-moz-placeholder {
  color: transparent;
}
.group__input:-ms-input-placeholder {
  color: transparent;
}
.group__input::placeholder {
  color: transparent;
}
.group__input:not(:-moz-placeholder-shown) ~ .group__label {
  bottom: 23px;
  font-size: 14px;
  color: #5264ae;
  left: 15px;
}
.group__input:not(:-ms-input-placeholder) ~ .group__label {
  bottom: 23px;
  font-size: 14px;
  color: #5264ae;
  left: 15px;
}
.group__input:not(:placeholder-shown) ~ .group__label {
  bottom: 23px;
  font-size: 14px;
  color: #5264ae;
  left: 15px;
}
.group__input.chiped ~ .group__label {
  bottom: 23px;
  font-size: 14px;
  color: #5264ae;
  left: 15px;
}
.group__input:focus ~ .group__label .group__svg {
  width: 1.5rem;
  height: 1.5rem;
  bottom: 6px;
  left: 3px;
}
.group__input:valid ~ .group__label .group__svg {
  width: 1.5rem;
  height: 1.5rem;
  bottom: 3px;
  left: 3px;
}
.group__textarea ~ .group__label {
  bottom: 2px;
}
.group__textarea:not(:-moz-placeholder-shown) ~ .group__label {
  top: -10px;
  font-size: 14px;
  color: #5264ae;
  left: 15px;
}
.group__textarea:not(:-ms-input-placeholder) ~ .group__label {
  top: -10px;
  font-size: 14px;
  color: #5264ae;
  left: 15px;
}
.group__textarea:not(:placeholder-shown) ~ .group__label {
  top: -10px;
  font-size: 14px;
  color: #5264ae;
  left: 15px;
}
.group__textarea:focus ~ .group__label .group__svg, .group__textarea:valid ~ .group__label .group__svg {
  width: 1.5rem;
  height: 1.5rem;
}
.group__textarea:focus ~ .group__label.svgico.x2, .group__textarea:valid ~ .group__label.svgico.x2 {
  padding-left: 2rem;
}
.group__textarea:focus ~ .group__label.svgico.x2 .group__svg.x2, .group__textarea:valid ~ .group__label.svgico.x2 .group__svg.x2 {
  width: 2rem;
  height: 2rem;
}
.group__bar {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  transform: translateY(-2px);
  border-bottom: 1px solid #cecece;
}
.group__bar:before, .group__bar:after {
  content: "";
  height: 2px;
  width: 0;
  position: absolute;
  background: #2305b4;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}
.group__bar:before {
  left: 50%;
}
.group__bar:after {
  right: 50%;
}
.group__input:focus {
  border: none;
}
.group__input:focus ~ .group__bar, .group__input:focus ~ .group__bar {
  border-bottom: none;
}
.group__input:focus ~ .group__bar:before, .group__input:focus ~ .group__bar:after {
  width: 50%;
}
.group__textarea:focus ~ .group__bar:before, .group__textarea:focus ~ .group__bar:after {
  width: 50%;
}
.group__highlight {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  pointer-events: none;
  opacity: 0.15;
}
@media only screen and (max-width: 37.5em) {
  .group:last-child .group__highlight {
    height: 100%;
  }
}
.group__input:focus ~ .group__highlight {
  -webkit-animation: inputHighlighter 0.6s ease;
  animation: inputHighlighter 0.6s ease;
}
.group__textarea:focus ~ .group__highlight {
  -webkit-animation: inputHighlighter 0.6s ease;
  animation: inputHighlighter 0.6s ease;
}
.group__button {
  border: none;
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-size: 1.8rem;
}
.group__button.round {
  padding: 10px 40px;
  border-radius: 36px;
}
.group__button.round.md {
  padding: 8px 26px;
}
.group__button:active {
  -webkit-animation: pureScale 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
          animation: pureScale 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.group__btnsvg {
  width: 2rem;
  height: 2rem;
  fill: currentColor;
  margin-left: 1rem;
}
.group__arrowS {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
}
.group__arrowS::before, .group__arrowS::after {
  content: "";
  position: absolute;
  background-color: #1c3faa;
  width: 1.1rem;
  height: 2px;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}
.group__arrowS::before {
  transform: rotate(45deg);
  left: 1px;
}
.group__arrowS::after {
  transform: rotate(-45deg);
  right: 1px;
}
.group__input:focus ~ .group__arrowS::before {
  transform: rotate(-45deg);
}
.group__input:focus ~ .group__arrowS::after {
  transform: rotate(45deg);
}
.group__datalist {
  background-color: #fff;
  position: absolute;
  top: 105%;
  left: 0;
  width: 100%;
  height: 0;
  max-height: 24rem;
  overflow-y: scroll;
  z-index: 100;
  -moz-appearance: none !important;
  scrollbar-width: none;
  scrollbar-color: #1c3faa #577edf;
  box-shadow: 0 0 2px 0 rgba(24, 94, 224, 0.4), 0 6px 12px 0 rgba(24, 94, 224, 0.15);
  border-radius: 5px;
  border: 1px solid rgba(28, 63, 170, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: height 0.4s ease-in-out, opacity 0.2s 0.1s ease-out;
  will-change: height, opacity;
}
.group__datalist::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}
.group__datalist::-webkit-scrollbar {
  width: 0;
  background-color: #f5f5f5;
}
.group__datalist::-webkit-scrollbar-thumb {
  border-radius: 0;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #555;
}
.group__datalist input {
  width: 100%;
  border-bottom: 1px solid #08f;
  box-shadow: none;
  border-left: none;
  border-top: none;
  border-right: none;
  padding: 5px;
  text-transform: uppercase;
}
.group__datalist li {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  padding: 2px 2px 2px 5px;
  cursor: pointer;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
     supported by Chrome, Edge, Opera and Firefox */
}
.group__datalist li:hover {
  background-color: #1c3faa;
  color: #fff;
}
.group__datalist li.closed {
  display: none;
}
.group__datalist.open {
  opacity: 1;
  visibility: visible;
  height: 430%;
  transform: translateY(0);
}
.group__input:active ~ .group__datalist, .group__input:focus ~ .group__datalist {
  opacity: 1;
  visibility: visible;
  height: 430%;
  transform: translateY(0);
}

.control-title {
  color: #718096;
  margin-left: 5px;
  margin-bottom: 5px;
  font-weight: normal;
}

.control-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: unset;
  overflow: initial;
}

.control {
  display: flex;
  flex-direction: row;
  white-space: nowrap;
  margin: 3px;
  cursor: pointer;
  overflow: initial;
}
.control__radio {
  position: absolute;
  visibility: hidden;
  opacity: 0;
}
.control__radiospan {
  border: 1px solid #5063f0;
  padding: 5px 2rem;
  font-family: inherit;
  font-weight: 500;
  color: #757575;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 2rem;
  box-shadow: 0 0 2px 0 rgba(24, 94, 224, 0.4), 0 6px 12px 0 rgba(24, 94, 224, 0.15);
}
.control__radio:checked + .control__radiospan {
  color: #fff;
  background: linear-gradient(60deg, #5567f0, #1127c9);
  -webkit-animation: checkScaleAnimate 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  animation: checkScaleAnimate 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  -webkit-animation-name: checkScaleAnimate;
          animation-name: checkScaleAnimate;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
          animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.tab-content {
  display: block;
  height: auto;
}

.tab-list {
  position: relative;
  pointer-events: none;
  display: flex;
  align-items: center;
  list-style: none;
  flex-wrap: nowrap;
  -moz-appearance: none !important;
  scrollbar-width: none;
  padding: 1rem 0;
}
.tab-list.scrollable {
  overflow: hidden;
  cursor: -webkit-grab;
  cursor: grab;
}
.tab-list__item {
  position: relative;
  padding: 1rem 4rem;
  pointer-events: all;
  font-family: inherit;
  font-weight: 600;
  margin: 5px;
  font-size: 1.5rem;
  letter-spacing: 2px;
  white-space: nowrap;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: box-shadow, transform;
  color: #5264ae;
  -webkit-font-smoothing: subpixel-antialiased;
  transition: background-color 0.2s 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), color 0.2s 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: initial;
}
.tab-list__item.active {
  -webkit-animation: pureScale 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
          animation: pureScale 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.tab-list__item sup {
  color: #fe3e3f;
}
.tab-list__item--title {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transform: translateY(5px);
}
.tab-list__item--sub {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  top: 5px;
  font-size: 10px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
@media only screen and (max-width: 50em) {
  .tab-list__item--sub {
    font-size: 8px;
  }
}
@media only screen and (max-width: 50em) {
  .tab-list__item {
    font-size: 1.4rem;
    margin: 0 20px;
  }
}
.tab-list__line {
  position: absolute;
  width: 4rem;
  height: 2px;
  left: 5px;
  background-color: #fe3e3f;
  transition: 0.5s cubic-bezier(0.17, 0.67, 0.17, 1.33);
  z-index: 2;
  transform: translateY(900%);
}

.tab-container {
  position: absolute;
  top: 5.5rem;
  right: 0;
  left: 0;
  bottom: 1rem;
  padding: 1rem;
  overflow: auto;
}

.tab-display {
  list-style: none;
  border: 1px solid rgba(173, 173, 173, 0.3);
  border-radius: 10px;
  margin-bottom: 2rem;
}
.tab-display__item {
  position: relative;
  padding: 0 2rem;
  display: none;
  flex-direction: column;
  -webkit-animation-name: content;
  animation-name: content;
  -webkit-animation-direction: normal;
  animation-direction: normal;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  overflow: auto;
}
@media only screen and (max-width: 37.5em) {
  .tab-display__item {
    padding: 0 5px;
  }
}
.tab-display__item.active {
  display: flex;
}

.article-display {
  margin: 5px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.article-display__day {
  font-size: 1.4rem;
  color: rgba(254, 62, 63, 0.7);
}
.article-display__header, .article-display__list {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
}
.article-display__list {
  margin-bottom: 1rem;
}

.displayed {
  display: block;
  position: relative;
  height: 100%;
  list-style: none;
  overflow: hidden;
  box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15);
  background-color: #fff;
  border-radius: 1rem;
}
.displayed__item {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  scrollbar-width: thin;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-animation-name: content;
  animation-name: content;
  -webkit-animation-direction: normal;
  animation-direction: normal;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
.displayed__item.active {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  font-size: 1.3rem;
  padding: 2rem 2rem;
  border-radius: 5px;
  color: #454545;
}
.displayed__item--action {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 5px 4rem;
}
.displayed__action {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 5px 4rem;
}

.tab-row {
  padding: 0rem 1rem 0 1rem;
}
.tab-row.scrollable {
  overflow: hidden;
  cursor: -webkit-grab;
  cursor: grab;
}
@media only screen and (max-width: 37.5em) {
  .tab-row {
    padding: 0rem 1rem 0 1rem;
  }
}

.border-none {
  border: none;
  border-radius: 0;
}

@-webkit-keyframes content {
  from {
    opacity: 0;
    transform: translateY(5%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes content {
  from {
    opacity: 0;
    transform: translateY(5%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
.col {
  flex: 1;
}

.col1 {
  width: calc(100% / 12 * 1);
}

.col2 {
  width: calc(100% / 12 * 2);
}

.col3 {
  width: calc(100% / 12 * 3);
}

.col4 {
  width: calc(100% / 12 * 4);
}

.col5 {
  width: calc(100% / 12 * 5);
}

.col6 {
  width: calc(100% / 12 * 6);
}

.col7 {
  width: calc(100% / 12 * 7);
}

.col8 {
  width: calc(100% / 12 * 8);
}

.col9 {
  width: calc(100% / 12 * 9);
}

.col10 {
  width: calc(100% / 12 * 10);
}

.col11 {
  width: calc(100% / 12 * 11);
}

.col12 {
  width: calc(100% / 12 * 12);
}

@media only screen and (max-width: 86.25em) {
  .col2-lg {
    width: calc(100% / 12 * 1);
  }

  .col2-lg {
    width: calc(100% / 12 * 2);
  }

  .col3-lg {
    width: calc(100% / 12 * 3);
  }

  .col4-lg {
    width: calc(100% / 12 * 4);
  }

  .col5-lg {
    width: calc(100% / 12 * 5);
  }

  .col6-lg {
    width: calc(100% / 12 * 6);
  }

  .col7-lg {
    width: calc(100% / 12 * 7);
  }

  .col8-lg {
    width: calc(100% / 12 * 8);
  }

  .col9-lg {
    width: calc(100% / 12 * 9);
  }

  .col10-lg {
    width: calc(100% / 12 * 10);
  }

  .col11-lg {
    width: calc(100% / 12 * 11);
  }

  .col12-lg {
    width: calc(100% / 12 * 12);
  }
}
@media only screen and (max-width: 75em) {
  .col2-md {
    width: calc(100% / 12 * 1);
  }

  .col2-md {
    width: calc(100% / 12 * 2);
  }

  .col3-md {
    width: calc(100% / 12 * 3);
  }

  .col4-md {
    width: calc(100% / 12 * 4);
  }

  .col5-md {
    width: calc(100% / 12 * 5);
  }

  .col6-md {
    width: calc(100% / 12 * 6);
  }

  .col7-md {
    width: calc(100% / 12 * 7);
  }

  .col8-md {
    width: calc(100% / 12 * 8);
  }

  .col9-md {
    width: calc(100% / 12 * 9);
  }

  .col10-md {
    width: calc(100% / 12 * 10);
  }

  .col11-md {
    width: calc(100% / 12 * 11);
  }

  .col12-md {
    width: calc(100% / 12 * 12);
  }
}
@media only screen and (max-width: 50em) {
  .col1-md,
.col2-md,
.col3-md,
.col4-md,
.col5-md,
.col6-md,
.col7-md,
.col8-md,
.col9-md,
.col10-md,
.col11-md,
.col12-md {
    width: 100%;
  }

  .col2-xs {
    width: calc(100% / 12 * 1);
  }

  .col2-xs {
    width: calc(100% / 12 * 2);
  }

  .col3-xs {
    width: calc(100% / 12 * 3);
  }

  .col4-xs {
    width: calc(100% / 12 * 4);
  }

  .col5-xs {
    width: calc(100% / 12 * 5);
  }

  .col6-xs {
    width: calc(100% / 12 * 6);
  }

  .col7-xs {
    width: calc(100% / 12 * 7);
  }

  .col8-xs {
    width: calc(100% / 12 * 8);
  }

  .col9-xs {
    width: calc(100% / 12 * 9);
  }

  .col10-xs {
    width: calc(100% / 12 * 10);
  }

  .col11-xs {
    width: calc(100% / 12 * 11);
  }

  .col12-xs {
    width: calc(100% / 12 * 12);
  }
}
@media only screen and (max-width: 37.5em) {
  .col1,
.col2,
.col3,
.col4,
.col5,
.col6,
.col7,
.col8,
.col9,
.col10,
.col11,
.col12 {
    width: 100%;
  }
}
.col-span1 {
  width: calc(100% / 12 * 1);
}

.col-span2 {
  width: calc(100% / 12 * 2);
}

.col-span6 {
  width: calc(100% / 12 * 6);
}

@media only screen and (max-width: 37.5em) {
  .col-span1,
.col-span2,
.col-span6 {
    width: calc(100% / 12 * 12);
  }
}
.loading {
  position: fixed;
  z-index: -1;
  opacity: 0;
}
.loading.open {
  background-color: blue;
  width: 100%;
  height: 100%;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading.open .main {
  z-index: -1;
  visibility: hidden;
  opacity: 0;
}

.loading.open .lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.loading.open .lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  -webkit-animation: lds-ripple 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
          animation: lds-ripple 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.loading.open .lds-ripple div:nth-child(2) {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}

@-webkit-keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}

@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}
.overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  display: none;
  background: rgba(0, 0, 0, 0.1);
}
.overlay.open {
  background: rgba(0, 0, 0, 0.1);
  display: block;
}

.modal-open .overlay {
  display: block;
}

.modal {
  display: block;
  position: fixed;
  top: 7rem;
  right: -45rem;
  width: 35rem;
  bottom: 8px;
  opacity: 1;
  z-index: 100;
  background-color: #1916b3;
  box-shadow: 0 1px 2rem 1px rgba(0, 4, 255, 0.1);
  border-radius: 2rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  transition: right 0.4s ease-in-out;
}
@media only screen and (max-width: 37.5em) {
  .modal {
    width: 100%;
    bottom: 0;
    border-radius: 0;
  }
}
.modal__header {
  color: #fff;
  padding: 1rem 2rem;
  font-size: 1.7rem;
  display: flex;
  align-items: center;
  width: 100%;
}
.modal__header--svg {
  max-height: 4rem;
  max-width: 4rem;
  width: 100%;
  fill: #fff;
  margin-right: 1rem;
  border-radius: 50%;
  padding: 0.5rem;
}
.modal__header--svg:hover {
  background-color: rgba(0, 0, 255, 0.1);
  box-shadow: 0 0.2rem 0.5rem 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.modal__content {
  width: 97%;
  height: calc(100% - 6.5rem);
  overflow: auto;
  padding: 2rem;
  border-radius: 2rem;
  background-color: #fff;
  scrollbar-width: none;
}
.modal__content::-webkit-scrollbar {
  width: 12px;
}
.modal__content::-webkit-scrollbar:vertical {
  width: 5px;
}
.modal__content::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.modal__content::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
@media only screen and (max-width: 37.5em) {
  .modal__content {
    padding: 2rem 1rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
.modal.open {
  right: 8px;
}
@media only screen and (max-width: 37.5em) {
  .modal.open {
    right: 0;
  }
}

.modal .close-button {
  position: absolute;
  /* don't need to go crazy with z-index here, just sits over .modal-guts */
  z-index: 1;
  top: 10px;
  /* needs to look OK with or without scrollbar */
  right: 20px;
  border: 0;
  background: black;
  color: white;
  padding: 5px 10px;
  font-size: 1.3rem;
}

/* Adicionando uma class collapse ao tr faz se um acordion da linha */
.absolute-table {
  display: none;
  flex: 1;
  position: absolute;
  top: 91px;
  left: 8px;
  bottom: 16px;
  right: 8px;
}
@media only screen and (max-width: 37.5em) {
  .absolute-table {
    position: relative;
    padding: 0;
    top: initial;
    left: initial;
    bottom: initial;
    right: initial;
  }
}

.tab-master {
  border: 2px solid rgba(40, 0, 181, 0.18);
  border-radius: 10px;
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.table-header {
  border: 1px solid rgba(173, 173, 173, 0.3);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.table-header {
  padding-top: 5px;
  margin-left: 8px;
  margin-right: 8px;
  order: 1;
  margin-bottom: 1rem;
}

.table-main {
  margin-left: 2px;
  margin-right: 2px;
  overflow: auto;
  scrollbar-width: thin;
  order: 2;
  flex: 1;
}

.table-footer {
  box-shadow: 0px -1px 0rem rgba(0, 0, 0, 0.1);
  padding-top: 8px;
  order: 3;
  flex-shrink: 5;
}

table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

th,
td {
  text-align: left;
}

.table-notfound {
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  color: rgba(4, 0, 34, 0.59);
  display: none;
}
.table-notfound.open {
  display: flex;
}

.table {
  display: none;
  width: 100%;
  display: table;
  border-spacing: 0 1px;
}
@media only screen and (max-width: 37.5em) {
  .table {
    display: block;
    border-spacing: 0;
  }
}
.table__thead, .table__tbody {
  display: table-header-group;
}
@media only screen and (max-width: 37.5em) {
  .table__thead, .table__tbody {
    display: block;
  }
}
@media only screen and (max-width: 37.5em) {
  .table__thead {
    padding: 0 1rem;
    background-color: #577edf;
  }
}
@media only screen and (max-width: 37.5em) {
  .table__tbody {
    background-color: #fff;
  }
}
.table__tbody .table__row {
  padding: 1rem;
}
.table__row {
  display: table-row;
  background-color: #1c3faa;
  color: #fff;
}
@media only screen and (max-width: 37.5em) {
  .table__row {
    display: block;
    background-color: #577edf;
    margin-bottom: 5px;
  }
}
.table__row.content {
  line-height: inherit;
  background-color: #fff;
  box-shadow: 1px 1px 0rem rgba(0, 0, 0, 0.1);
  color: #6e7799;
  transition: all 0.6s ease-in-out;
}
.table__row.content:hover {
  background-color: #1c3faa;
  color: #fff;
  cursor: pointer;
}
@media only screen and (max-width: 37.5em) {
  .table__row.content:hover {
    background-color: #fff;
    color: #6e7799;
  }
}
.table__row.collapse {
  line-height: 0;
  visibility: collapse;
  transition: all 0.4s ease-in-out;
}
.table__row.colspan {
  transform: translateY(-9px);
  box-shadow: -2px 2px 0rem #bfbfbf45;
  color: #f9a5a5;
}
.table__absolute {
  position: absolute;
  visibility: hidden;
  transition: all 0.52 ease-in-out;
}
.table__arrow {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.table__arrow::before, .table__arrow::after {
  content: "";
  position: absolute;
  background-color: #1c3faa;
  width: 1.1rem;
  height: 2px;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}
.table__arrow::before {
  transform: rotate(45deg);
  left: 1px;
}
.table__arrow::after {
  transform: rotate(-45deg);
  right: 1px;
}
.table__row.content:hover .table__arrow::before {
  background-color: #ffffff;
}
.table__row.content:hover .table__arrow::after {
  background-color: #ffffff;
}
.table__row.content.active .table__arrow::before {
  transform: rotate(-45deg);
}
.table__row.content.active .table__arrow::after {
  transform: rotate(45deg);
}
.table__item {
  display: table-cell;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: currentColor;
  position: relative;
}
.table__item.center {
  text-align: center;
}
.table__item.left {
  text-align: left;
}
.table__item.right {
  text-align: right;
}
.table__item.action {
  display: flex;
  align-content: center;
  justify-content: center;
}
@media only screen and (max-width: 37.5em) {
  .table__item.action {
    justify-content: flex-start;
  }
}
.table__item.action svg,
.table__item.action use {
  pointer-events: none;
}
@media only screen and (max-width: 37.5em) {
  .table__item {
    display: block;
    text-align: left !important;
  }
}
.table__thead .table__row .table__item {
  padding: 0 1rem;
  color: currentColor;
  font-weight: normal;
  font-size: 1.4rem;
  padding: 1rem;
}
@media only screen and (max-width: 37.5em) {
  .table__thead .table__row .table__item {
    padding: 2px 4px;
    color: #fff;
  }
}
.table__tbody .table__row .table__item {
  padding: 1rem 1rem;
  font-size: 1.4rem;
  color: currentColor;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.table__tbody .table__row .table__item.colspan {
  padding: 1rem 1px;
}
@media only screen and (max-width: 37.5em) {
  .table__tbody .table__row .table__item {
    padding: 2px 4px;
    border: 1px solid rgba(113, 128, 150, 0.1);
  }
}
.table__link, .table__link:link, .table__link:visited {
  display: flex;
  align-items: center;
  margin-left: 1rem;
  color: currentColor;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.table__link.center, .table__link:link.center, .table__link:visited.center {
  justify-content: center;
}
@media only screen and (max-width: 37.5em) {
  .table__link.center, .table__link:link.center, .table__link:visited.center {
    justify-content: flex-start;
    padding: 0;
    margin: 0;
  }
}
.table__svg {
  max-width: 1.5rem;
  min-width: 1.5rem;
  max-height: 1.5rem;
  width: 100%;
  margin: 0 5px;
  fill: currentColor;
  pointer-events: none;
}
.table__svg.x2 {
  max-width: 2rem;
  min-width: 2rem;
  max-height: 2rem;
}
.table__svg.x3 {
  max-width: 2.5rem;
  min-width: 2.5rem;
  max-height: 2.5rem;
}
.table__svg.x4 {
  max-width: 4rem;
  min-width: 4rem;
  max-height: 3rem;
}
@media only screen and (max-width: 37.5em) {
  .table__svg.x4 {
    margin: 0;
    max-width: 3rem;
    max-height: 3rem;
    min-width: 3rem;
  }
}
.table__tbody .table__row.pad0 .table__item {
  padding: 0 2px;
}
.table__tbody .table__row.pad0 .table__svg {
  max-height: 2rem;
  margin: 0;
}

.table-pagination {
  display: flex;
  align-items: center;
  padding: 5px 1rem;
}
.table-pagination__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
  background-color: #fff;
  box-shadow: 0 2px 1rem rgba(0, 0, 0, 0.2);
  border-radius: 2rem;
  padding: 1rem 1rem;
  cursor: pointer;
  width: 30px;
  height: 30px;
}
@media only screen and (max-width: 37.5em) {
  .table-pagination__item {
    box-shadow: 0 2px 1rem rgba(80, 41, 255, 0.1);
    padding: 2px 10px;
  }
}
.table-pagination__item:hover {
  background-color: #f1f5f8;
  color: #718096;
}
.table-pagination__item.active {
  background-color: #1c3faa;
  color: #fff;
}
.table-pagination__link {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 1rem 1rem;
  color: currentColor;
}
.table-pagination__svg {
  max-height: 2rem;
  fill: currentColor;
  cursor: pointer;
  border: none;
}

.table-list {
  display: flex;
  background-color: #fafaff;
  overflow: hidden;
  border-bottom: 3px solid #fff;
  padding-bottom: 5px;
}
.table-list span {
  display: flex;
  padding: 5px 10px;
  font-size: 1.2rem;
  color: #6e7799;
}

.fullrow {
  display: flex;
  background-color: #ffd43921;
  overflow: hidden;
  padding-bottom: 2px;
}
.fullrow__content {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  height: 0;
  transition: all 0.5s ease;
}
.fullrow__content span {
  padding: 5px 10px;
  font-size: 1.2rem;
  color: #6e7799;
}

.flex {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
}
.flex.center {
  justify-content: center;
}

@media only screen and (max-width: 37.5em) {
  .table-list {
    overflow: hidden;
    flex-wrap: wrap;
  }
  .table-list span {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: "----";
  }
}
.color-primary {
  color: #0003aa !important;
  fill: #0003aa !important;
  stroke: #0003aa !important;
}

.button-primary {
  background-color: #0003aa;
  box-shadow: 0 2px 10px rgba(0, 3, 170, 0.3);
}
.button-primary:hover {
  background-color: #000144;
}

._btn-primary {
  background-image: linear-gradient(to right, #000011, #000277);
  box-shadow: 0 0.5rem 3rem rgba(0, 3, 170, 0.5);
  color: #fff;
}
._btn-primary::after {
  background-image: linear-gradient(to right, #000011, #000277);
}
._btn-primary:hover {
  background-image: linear-gradient(to right, #000277, #000011);
}
._btn-primary:disabled {
  background-image: linear-gradient(to right, black, black);
  opacity: 0.3;
  transform: scale(1);
  cursor: not-allowed;
}

.color-gray {
  color: #cecece !important;
  fill: #cecece !important;
  stroke: #cecece !important;
}

.button-gray {
  background-color: #cecece;
  box-shadow: 0 2px 10px rgba(206, 206, 206, 0.3);
}
.button-gray:hover {
  background-color: #9b9b9b;
}

._btn-gray {
  background-image: linear-gradient(to right, #828282, #b5b5b5);
  box-shadow: 0 0.5rem 3rem rgba(206, 206, 206, 0.5);
  color: #fff;
}
._btn-gray::after {
  background-image: linear-gradient(to right, #828282, #b5b5b5);
}
._btn-gray:hover {
  background-image: linear-gradient(to right, #b5b5b5, #828282);
}
._btn-gray:disabled {
  background-image: linear-gradient(to right, black, black);
  opacity: 0.3;
  transform: scale(1);
  cursor: not-allowed;
}

.color-gray-light {
  color: #f1f5f8 !important;
  fill: #f1f5f8 !important;
  stroke: #f1f5f8 !important;
}

.button-gray-light {
  background-color: #f1f5f8;
  box-shadow: 0 2px 10px rgba(241, 245, 248, 0.3);
}
.button-gray-light:hover {
  background-color: #adc4d6;
}

._btn-gray-light {
  background-image: linear-gradient(to right, #8bacc5, #cfdde7);
  box-shadow: 0 0.5rem 3rem rgba(241, 245, 248, 0.5);
  color: #fff;
}
._btn-gray-light::after {
  background-image: linear-gradient(to right, #8bacc5, #cfdde7);
}
._btn-gray-light:hover {
  background-image: linear-gradient(to right, #cfdde7, #8bacc5);
}
._btn-gray-light:disabled {
  background-image: linear-gradient(to right, black, black);
  opacity: 0.3;
  transform: scale(1);
  cursor: not-allowed;
}

.color-white {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

.button-white {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.3);
}
.button-white:hover {
  background-color: #cccccc;
}

._btn-white {
  background-image: linear-gradient(to right, #b3b3b3, #e6e6e6);
  box-shadow: 0 0.5rem 3rem rgba(255, 255, 255, 0.5);
  color: #fff;
}
._btn-white::after {
  background-image: linear-gradient(to right, #b3b3b3, #e6e6e6);
}
._btn-white:hover {
  background-image: linear-gradient(to right, #e6e6e6, #b3b3b3);
}
._btn-white:disabled {
  background-image: linear-gradient(to right, black, black);
  opacity: 0.3;
  transform: scale(1);
  cursor: not-allowed;
}

.color-blue {
  color: #2540dc !important;
  fill: #2540dc !important;
  stroke: #2540dc !important;
}

.button-blue {
  background-color: #2540dc;
  box-shadow: 0 2px 10px rgba(37, 64, 220, 0.3);
}
.button-blue:hover {
  background-color: #152686;
}

._btn-blue {
  background-image: linear-gradient(to right, #0e195a, #1c32b2);
  box-shadow: 0 0.5rem 3rem rgba(37, 64, 220, 0.5);
  color: #fff;
}
._btn-blue::after {
  background-image: linear-gradient(to right, #0e195a, #1c32b2);
}
._btn-blue:hover {
  background-image: linear-gradient(to right, #1c32b2, #0e195a);
}
._btn-blue:disabled {
  background-image: linear-gradient(to right, black, black);
  opacity: 0.3;
  transform: scale(1);
  cursor: not-allowed;
}

.color-indigo {
  color: #6610f2 !important;
  fill: #6610f2 !important;
  stroke: #6610f2 !important;
}

.button-indigo {
  background-color: #6610f2;
  box-shadow: 0 2px 10px rgba(102, 16, 242, 0.3);
}
.button-indigo:hover {
  background-color: #3d0894;
}

._btn-indigo {
  background-image: linear-gradient(to right, #290564, #510bc4);
  box-shadow: 0 0.5rem 3rem rgba(102, 16, 242, 0.5);
  color: #fff;
}
._btn-indigo::after {
  background-image: linear-gradient(to right, #290564, #510bc4);
}
._btn-indigo:hover {
  background-image: linear-gradient(to right, #510bc4, #290564);
}
._btn-indigo:disabled {
  background-image: linear-gradient(to right, black, black);
  opacity: 0.3;
  transform: scale(1);
  cursor: not-allowed;
}

.color-purple {
  color: #9561e2 !important;
  fill: #9561e2 !important;
  stroke: #9561e2 !important;
}

.button-purple {
  background-color: #9561e2;
  box-shadow: 0 2px 10px rgba(149, 97, 226, 0.3);
}
.button-purple:hover {
  background-color: #6022bb;
}

._btn-purple {
  background-image: linear-gradient(to right, #4a1a90, #7836da);
  box-shadow: 0 0.5rem 3rem rgba(149, 97, 226, 0.5);
  color: #fff;
}
._btn-purple::after {
  background-image: linear-gradient(to right, #4a1a90, #7836da);
}
._btn-purple:hover {
  background-image: linear-gradient(to right, #7836da, #4a1a90);
}
._btn-purple:disabled {
  background-image: linear-gradient(to right, black, black);
  opacity: 0.3;
  transform: scale(1);
  cursor: not-allowed;
}

.color-pink {
  color: #ee0f5a !important;
  fill: #ee0f5a !important;
  stroke: #ee0f5a !important;
}

.button-pink {
  background-color: #ee0f5a;
  box-shadow: 0 2px 10px rgba(238, 15, 90, 0.3);
}
.button-pink:hover {
  background-color: #8e0936;
}

._btn-pink {
  background-image: linear-gradient(to right, #5e0624, #be0c48);
  box-shadow: 0 0.5rem 3rem rgba(238, 15, 90, 0.5);
  color: #fff;
}
._btn-pink::after {
  background-image: linear-gradient(to right, #5e0624, #be0c48);
}
._btn-pink:hover {
  background-image: linear-gradient(to right, #be0c48, #5e0624);
}
._btn-pink:disabled {
  background-image: linear-gradient(to right, black, black);
  opacity: 0.3;
  transform: scale(1);
  cursor: not-allowed;
}

.color-red {
  color: #e3342f !important;
  fill: #e3342f !important;
  stroke: #e3342f !important;
}

.button-red {
  background-color: #e3342f;
  box-shadow: 0 2px 10px rgba(227, 52, 47, 0.3);
}
.button-red:hover {
  background-color: #981814;
}

._btn-red {
  background-image: linear-gradient(to right, #6b110e, #c51f1a);
  box-shadow: 0 0.5rem 3rem rgba(227, 52, 47, 0.5);
  color: #fff;
}
._btn-red::after {
  background-image: linear-gradient(to right, #6b110e, #c51f1a);
}
._btn-red:hover {
  background-image: linear-gradient(to right, #c51f1a, #6b110e);
}
._btn-red:disabled {
  background-image: linear-gradient(to right, black, black);
  opacity: 0.3;
  transform: scale(1);
  cursor: not-allowed;
}

.color-orange {
  color: #f68710 !important;
  fill: #f68710 !important;
  stroke: #f68710 !important;
}

.button-orange {
  background-color: #f68710;
  box-shadow: 0 2px 10px rgba(246, 135, 16, 0.3);
}
.button-orange:hover {
  background-color: #9a5306;
}

._btn-orange {
  background-image: linear-gradient(to right, #693804, #cb6d08);
  box-shadow: 0 0.5rem 3rem rgba(246, 135, 16, 0.5);
  color: #fff;
}
._btn-orange::after {
  background-image: linear-gradient(to right, #693804, #cb6d08);
}
._btn-orange:hover {
  background-image: linear-gradient(to right, #cb6d08, #693804);
}
._btn-orange:disabled {
  background-image: linear-gradient(to right, black, black);
  opacity: 0.3;
  transform: scale(1);
  cursor: not-allowed;
}

.color-yellow {
  color: #ffed4a !important;
  fill: #ffed4a !important;
  stroke: #ffed4a !important;
}

.button-yellow {
  background-color: #ffed4a;
  box-shadow: 0 2px 10px rgba(255, 237, 74, 0.3);
}
.button-yellow:hover {
  background-color: #e3cc00;
}

._btn-yellow {
  background-image: linear-gradient(to right, #b09e00, #ffe817);
  box-shadow: 0 0.5rem 3rem rgba(255, 237, 74, 0.5);
  color: #fff;
}
._btn-yellow::after {
  background-image: linear-gradient(to right, #b09e00, #ffe817);
}
._btn-yellow:hover {
  background-image: linear-gradient(to right, #ffe817, #b09e00);
}
._btn-yellow:disabled {
  background-image: linear-gradient(to right, black, black);
  opacity: 0.3;
  transform: scale(1);
  cursor: not-allowed;
}

.color-green {
  color: #379249 !important;
  fill: #379249 !important;
  stroke: #379249 !important;
}

.button-green {
  background-color: #379249;
  box-shadow: 0 2px 10px rgba(55, 146, 73, 0.3);
}
.button-green:hover {
  background-color: #1b4824;
}

._btn-green {
  background-image: linear-gradient(to right, #0d2311, #296d36);
  box-shadow: 0 0.5rem 3rem rgba(55, 146, 73, 0.5);
  color: #fff;
}
._btn-green::after {
  background-image: linear-gradient(to right, #0d2311, #296d36);
}
._btn-green:hover {
  background-image: linear-gradient(to right, #296d36, #0d2311);
}
._btn-green:disabled {
  background-image: linear-gradient(to right, black, black);
  opacity: 0.3;
  transform: scale(1);
  cursor: not-allowed;
}

.color-teal {
  color: #4dc0b5 !important;
  fill: #4dc0b5 !important;
  stroke: #4dc0b5 !important;
}

.button-teal {
  background-color: #4dc0b5;
  box-shadow: 0 2px 10px rgba(77, 192, 181, 0.3);
}
.button-teal:hover {
  background-color: #2c7b74;
}

._btn-teal {
  background-image: linear-gradient(to right, #1e5650, #39a197);
  box-shadow: 0 0.5rem 3rem rgba(77, 192, 181, 0.5);
  color: #fff;
}
._btn-teal::after {
  background-image: linear-gradient(to right, #1e5650, #39a197);
}
._btn-teal:hover {
  background-image: linear-gradient(to right, #39a197, #1e5650);
}
._btn-teal:disabled {
  background-image: linear-gradient(to right, black, black);
  opacity: 0.3;
  transform: scale(1);
  cursor: not-allowed;
}

.color-cyan {
  color: #6cb2eb !important;
  fill: #6cb2eb !important;
  stroke: #6cb2eb !important;
}

.button-cyan {
  background-color: #6cb2eb;
  box-shadow: 0 2px 10px rgba(108, 178, 235, 0.3);
}
.button-cyan:hover {
  background-color: #1d82d4;
}

._btn-cyan {
  background-image: linear-gradient(to right, #1766a7, #3f9ae5);
  box-shadow: 0 0.5rem 3rem rgba(108, 178, 235, 0.5);
  color: #fff;
}
._btn-cyan::after {
  background-image: linear-gradient(to right, #1766a7, #3f9ae5);
}
._btn-cyan:hover {
  background-image: linear-gradient(to right, #3f9ae5, #1766a7);
}
._btn-cyan:disabled {
  background-image: linear-gradient(to right, black, black);
  opacity: 0.3;
  transform: scale(1);
  cursor: not-allowed;
}

.color-green-primary {
  color: #91c714 !important;
  fill: #91c714 !important;
  stroke: #91c714 !important;
}

.button-green-primary {
  background-color: #91c714;
  box-shadow: 0 2px 10px rgba(145, 199, 20, 0.3);
}
.button-green-primary:hover {
  background-color: #4d6a0b;
}

._btn-green-primary {
  background-image: linear-gradient(to right, #2c3c06, #6f990f);
  box-shadow: 0 0.5rem 3rem rgba(145, 199, 20, 0.5);
  color: #fff;
}
._btn-green-primary::after {
  background-image: linear-gradient(to right, #2c3c06, #6f990f);
}
._btn-green-primary:hover {
  background-image: linear-gradient(to right, #6f990f, #2c3c06);
}
._btn-green-primary:disabled {
  background-image: linear-gradient(to right, black, black);
  opacity: 0.3;
  transform: scale(1);
  cursor: not-allowed;
}

.swal2-popup {
  width: 35em !important;
}

.swal2-popup.swal2-toast {
  padding: 1.2em;
}

.swal2-popup.swal2-toast.swal2-icon-success.swal2-show {
  font-size: 100% !important;
}

.swal2-header {
  font-size: 150% !important;
}

.swal2-content {
  font-size: 200% !important;
}

.swal2-actions {
  font-size: 130% !important;
}

.swal2-title {
  font-size: 150% !important;
}

.swal2-icon.swal2-error.swal2-icon-show,
.swal2-x-mark,
.swal2-x-mark-line-left,
.swal2-x-mark-line-right {
  font-size: 100% !important;
}

.swal2-icon.swal2-success.swal2-icon-show,
.swal2-success-circular-line-left,
.swal2-success-line-tip,
.swal2-success-line-long,
.swal2-success-ring,
.swal2-success-fix,
.swal2-success-circular-line-right {
  font-size: 100% !important;
}

.swal2-html-container {
  font-size: 16px !important;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.padtb0lr3 {
  padding: 0 3rem;
}
@media only screen and (max-width: 37.5em) {
  .padtb0lr3 {
    padding: 0 1rem;
  }
}

.deskmgtp2 {
  margin-top: 2rem;
}

@media only screen and (max-width: 37.5em) {
  .mgtp2 {
    margin-top: 2rem;
  }
}

.padd2 {
  padding: 2rem;
}
@media only screen and (max-width: 37.5em) {
  .padd2 {
    padding: 2rem 0;
  }
}

.brdnone {
  border: none;
}

.mgtb0lr5px {
  margin: 0 5px;
}

@media only screen and (max-width: 37.5em) {
  .fixed-right-btn {
    position: fixed;
    right: -90px;
  }
}

.bbtm01 {
  border-bottom: 1px solid #cecece3b;
}

@media only screen and (max-width: 37.5em) {
  .mobiletp2 {
    margin-top: 2rem;
  }
}

@media only screen and (max-width: 37.5em) {
  .mobilentp2 {
    margin-right: 4rem;
  }
}

.truck {
  background-color: #f1f5f8 !important;
}
.truck td {
  color: #6e7799 !important;
}

.flex4566 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6e7799;
}

.bgnone {
  background-color: transparent;
  border: none;
}

.mainbox {
  width: 100%;
  height: 100vh;
  background-color: #aba4ff;
  display: flex;
}

.leftbox {
  order: 1;
  width: calc(100% - 50rem);
  background-color: #081490;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 50em) {
  .leftbox {
    display: none;
  }
}

.logobox {
  width: 40rem;
  margin-bottom: 2rem;
}
.logobox img {
  display: block;
  width: 100%;
}

.infobox {
  width: 35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
.infobox img {
  display: block;
  width: 100%;
}
@media only screen and (max-width: 62.5em) {
  .infobox {
    width: 35rem;
  }
}
.infobox p {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

.rightbox {
  order: 2;
  width: 50rem;
  min-width: 40rem;
  background-image: linear-gradient(180deg, #ffec44, #edb329);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 1rem;
}
@media only screen and (max-width: 50em) {
  .rightbox {
    width: 100%;
    box-shadow: none;
  }
}
.rightbox__logotipo {
  width: 30rem;
  margin-bottom: 1rem;
  display: none;
}
@media only screen and (max-width: 50em) {
  .rightbox__logotipo {
    display: block;
  }
}
.rightbox h2 {
  font-weight: 300;
  font-size: 3.5rem;
  color: #4b4b4d;
}
.rightbox p {
  font-weight: 700;
  font-size: 2rem;
  color: #d51434;
  margin-bottom: 1rem;
}

.formbox {
  display: flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  width: calc(100% - 5rem);
  border-radius: 2rem;
  box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.2);
  padding: 5rem 0 3rem 0;
}
@media only screen and (max-width: 50em) {
  .formbox {
    max-width: 38rem;
    box-shadow: none;
  }
}

.controlbox {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(100% - 2rem);
  margin: 1.5rem 0;
  color: #a4a4a4;
}
.controlbox.center {
  justify-content: center;
}
.controlbox input {
  position: relative;
  display: inline-flex;
  background-color: #f1f4fa;
  width: 100%;
  font-family: inherit;
  font-size: 1.5rem;
  border: none;
  color: currentColor;
  padding: 1rem;
  border: 1px solid #cecece;
  border-radius: 1rem;
  text-transform: uppercase;
  z-index: 1;
  box-shadow: none;
  border: 0;
  outline: none;
}
.controlbox input:focus {
  outline: none;
}
.controlbox input:hover {
  border: 1px solid #2f00ff;
}
.controlbox__svg {
  position: absolute;
  left: 5px;
  width: 3rem;
  height: 2.5rem;
  fill: currentColor;
  color: currentColor;
  z-index: 2;
}
.controlbox__inputsvg {
  padding: 1rem 1rem 1rem 3.5rem !important;
}
.controlbox__forgot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: calc(100% - 1rem);
}
.controlbox__forgot a {
  color: #686868;
  font-size: 1.4rem;
}

.buttonbox {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 2rem);
  margin: 1rem 0;
  color: #fff;
  overflow: initial;
}
.buttonbox__svg {
  width: 3rem;
  height: 2.5rem;
  fill: currentColor;
  color: currentColor;
  position: absolute;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  z-index: 2;
}
.buttonbox__svg.right {
  right: 2rem;
}

.formbutton {
  display: flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(100% - 5rem);
  padding: 2rem 0;
}
.formbutton button {
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 6rem;
  display: flex;
  align-items: center;
  border-radius: 10rem;
  transition: all 0.2s;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
  position: relative;
  font-size: 2rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 0.5rem 3rem rgba(213, 20, 52, 0.7);
  color: #fff;
}
.formbutton button:hover {
  transform: translateY(-0.3rem);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2);
}
.formbutton button::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all 0.4s;
}
.formbutton button:hover::after {
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}
.formbutton button:disabled {
  background-image: linear-gradient(to right, #f2f2f2, #c8c8c8);
  color: #868686;
  box-shadow: none;
  opacity: 0.5;
}

.socialbox {
  position: relative;
  width: calc(100% - 6rem);
  display: flex;
  flex-wrap: wrap;
  border-radius: 2rem;
  margin-bottom: 4rem;
  color: #4b4b4d;
  align-items: center;
  justify-content: space-around;
  overflow: initial;
}
.socialbox__social, .socialbox__social:link, .socialbox__social:visited {
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  text-decoration: none;
  color: currentColor;
  font-weight: 700;
  transition: 0.1s ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.socialbox__social svg, .socialbox__social:link svg, .socialbox__social:visited svg {
  width: 2rem;
  height: 2rem;
  fill: currentColor;
  margin-left: 1rem;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.socialbox__social:hover, .socialbox__social:link:hover, .socialbox__social:visited:hover {
  background-color: #d51231;
  color: #fff;
  padding: 0 3rem;
  border-radius: 0.4rem;
  margin-right: 0.2rem;
  transform: skew(-10deg);
  -webkit-animation-name: skelScale;
  animation-name: skelScale;
  -webkit-animation-direction: normal;
  animation-direction: normal;
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
.socialbox__social:active, .socialbox__social:link:active, .socialbox__social:visited:active {
  transform: skew(-10deg) scale(0.8);
}

.primary {
  background-image: linear-gradient(to right, #d51434, #d50415);
  box-shadow: 0 0.5rem 3rem rgba(213, 20, 52, 0.7);
  color: #fff;
}

.primary::after {
  background-image: linear-gradient(to right, #d51434, #d50415);
}

@-webkit-keyframes skelScale {
  0% {
    transform: skew(-10deg) scale(1.3);
  }
  100% {
    transform: skew(-10deg) scale(1);
  }
}

@keyframes skelScale {
  0% {
    transform: skew(-10deg) scale(1.3);
  }
  100% {
    transform: skew(-10deg) scale(1);
  }
}