@font-face { font-family: font_app; src: url("fonts/aff-font.ttf"); }
@font-face { font-family: font_app_second; src: url("fonts/pdv-font.ttf"); }

:root
{
  --main-color: #061B48; /*  */
  --alter-main-color: #FAC879;

  --primary-background: #FFFFFF; /*  */
  --secondary-background: #F4F4F6; /*  */
  --tertiary-background: #E6E6EB; /*  */

  --transparent-background: rgba(0, 0, 0, .6);

  --primary-color: #051434; /* 606060 - 404040 */
  --secondary-color: #999999; /*  */
  --tertiary-color: #FFFFFF; /*  */

  --primary-border: #DADCE0; /* E6E6EB */
}

html, body, a, span { color: var(--primary-color); }
i, svg { color: var(--main-color); height: 20px; }
* input:checked { accent-color: var(--main-color); }

.font-app { font-family: font_app; }
.font-app-second { font-family: font_app_second; }
.fc-left > span { font-family: font_medium; font-size: 18px; }

/* BACKGROUND COLOR */
.main-bg { background-color: var(--main-color); }
.alter-main-bg { background-color: var(--alter-main-color); }
.main-bg > span, .main-bg > p { color: var(--tertiary-color); }
.alter-main-bg > span, .alter-main-bg > p { color: #000000; }
.primary-bg { background-color: var(--primary-background); }
.secondary-bg { background-color: var(--secondary-background); }
.tertiary-bg { background-color: var(--tertiary-background); }
.transparent-bg { background-color: var(--transparent-background); }

/* BUTTONS */
.active-btn { background-color: var(--main-color); }
.active-btn > span { color: var(--tertiary-color) !important; }
.active-btn > div > span { color: var(--tertiary-color) !important; }

.hover-btn:hover { background-color: var(--main-color); }
.hover-btn > div > span { color: var(--primary-color); }
.hover-btn:hover > span { color: var(--tertiary-color); }
.hover-btn:hover > div > span { color: var(--tertiary-color); }

.disable-btn { background-color: var(--transparent-background); }
.disable-btn > div > span { color: var(--secondary-color); }

/* FONT COLOR */
.main-fc { color: var(--main-color); }
.primary-fc { color: var(--primary-color); }
.secondary-fc { color: var(--secondary-color); }
.tertiary-fc { color: var(--tertiary-color); }
.fourth-fc { opacity: .7; }

/* BORDER */
.app-1-border { border: 1px solid var(--primary-border); }
.app-1-border-top { border-top: 1px solid var(--primary-border); }
.app-1-border-right { border-right: 1px solid var(--primary-border); }
.app-1-border-bottom { border-bottom: 1px solid var(--primary-border); }
.app-1-border-left { border-left: 1px solid var(--primary-border); }

.app-2-border { border: 2px solid var(--primary-border); }
.app-2-border-top { border-top: 2px solid var(--primary-border); }
.app-2-border-right { border-right: 2px solid var(--primary-border); }
.app-2-border-bottom { border-bottom: 2px solid var(--primary-border); }
.app-2-border-left { border-left: 2px solid var(--primary-border); }

/* INPUT AUTOCOMPLETE */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active 
{
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: var(--primary-color) !important;
}