@font-face {
  font-family: "amatic";
  src: url("/fonts/Amatic_SC/AmaticSC-Regular.ttf");
}

@font-face {
  font-family: "amatic-bold";
  src: url("/fonts/Amatic_SC/AmaticSC-Bold.ttf");
}

@font-face {
  font-family: "special-elite";
  src: url("/fonts/Special_Elite/SpecialElite-Regular.ttf");
}

html {
    font-size: 62.5%;
}

:root {
    --color-dark : #313030;
    --color-light: #ffffff;
    --color-sun: #ffc300;
    --color-shadow: #f2f2f2;
    --color-sky: #0375FA;
    --night: #000000;
    --dark: #313030;
    --medium: #4D4D4D;
    --grayum: #838588;
    --gray: #C2C2C2;
    --min: #E5E5E5;
    --light: #FFFFFF;
    --sun: #FCEE21;
    --sky: #0375FA;
    --natural: #34D22C;
    --purple: #453d83;
    --danger: red;
    --darken: #0000008f;
    --shadow: 0px .4rem .4rem rgba(0, 0, 0, 0.12);
  }



.input-solicitud {
  font-size: 11px;
}

.my-header {
  background: #ffc300;
}

.pg-btn-dark {
    background-color: var(--color-dark);
    color: var(--color-light) !important;
}
.pg-btn-dark:hover {
    color: var(--color-light);
}

.shadow-row {
    background-color: var(--color-shadow);
}
.my-alert-msg {
    display: none;
}

.my-alert-msg--active {
    display: block;
}
.btn-dark {
  background-color: var(--dark);
  color: var(--light);
}
.btn-dark:hover {
  background-color: var(--night);
  color: var(--light);
}