/* tipografía */
@font-face {
    font-family: 'sana-sans';
    src: url('../fonts/sana sans/d676911db6699aa6748801b8ef3cd8b9.woff2') format('woff2'),
        url('../fonts/sana sans/d676911db6699aa6748801b8ef3cd8b9.woff') format('woff');

}

:root {
    --base-font-family:     'sana-sans', sans-serif;
    --title-font-family:    'sana-sans', sans-serif;
    --font-bold-family:     'sana-sans', sans-serif;
    --font-weight-bold:     bold;

    --h1-font-size:         50px;
    --h2-font-size:         32px;
    --h3-font-size:         24px;
    --p-font-size:          18px;
    --base-font-size:       16px;
    --menu-font-size:       14px;

    --verde-clinkin : #03aa9c;
    --orange-clinkin : #f78c00;
    --radio-color-test3: var(--verde-clinkin);

    --btn-success-alerts : var(--verde-clinkin);
    --btn-danger-alerts : var(--orange-clinkin);
    --icons-success-alerts : var(--verde-clinkin);
    --icons-danger-alerts : var(--orange-clinkin);
    --btn-warning-alerts : var(--orange-clinkin);
    --icons-warning-alerts : var(--orange-clinkin);
}

body {
    background-color: #fff !important;
}

/* navbar */
.nav_background {
    background: #4fb7b2 !important;
}

.logo {
    height: 70px;
}

/* background */
.bg_index, .bg_login, .bg_forgot_password, .bg_reset_password {
    background-image: url("../images/fondo_auth.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
}

.bg_register {
    background-image: url("../images/fondo_auth.png");
    background-repeat: no-repeat;
    height: 100vh;
}

.bg_continue_test, .bg_welcome, .bg_carreras_index, .bg_carreras_test_1, .bg_carreras_test_2, .bg_carreras_familias,
.bg_satisfaction_test {
    background-image: url("../images/fondo_azul.png");
}

.bg_aptitudes_index, .bg_aptitudes_test, .bg_aptitudes_results {
    background-image: url("../images/colores1.grande.png");
}

.bg_intereses_index, .bg_intereses_test {
    background-image: url("../images/fondolargo.png");
}

.bg_intereses_results {
    background-image: url("../images/fondo.png");
}

.bg_areas_results {
    background-image: url("../images/colores2.png");
}

.bg_areas_tests {
    background-image: url("../images/coloreslarga2.png");
}

.bg_carreras_familias_test {
    background-image: url("../images/fondo azul largo.png");
}

.bg_carreras_results_carreras, .bg_premium_test_ambiente, .bg_premium_test_aptitudes, .bg_premium_test_campo_aplicacion,
.bg_premium_test_importancia, .bg_premium_test_intereses, .bg_premium_test_materias, .bg_premium_test_objetivos,
.bg_premium_test_personalidad {
    background-image: url("../images/rombos.png");
}

.bg_premium_results_report_index {
    background-image: url("../images/fondo premium.png");
}

/* botones */
.btn-submit {
  background-color: #80bfff !important;
  width: 200px !important;
  color: #fff !important;
}

.btn-menu {
    color: #ffffff;
    font-size: 30px;
}

.btn-print {
    color: #ffffff;
}

.whatsapp-template {
    background-color: rgb(89, 190, 85);
}

/* textos */
.text-header {
    color: #ffffff !important;
}

.text-title {
    color: #ffffff;
}

.text-subtitle {
    color: #ffffff;
}

.text-bottom-fase1-test4 {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    color: #ffffff;
}

.text-title-modal-premium {
    color: #009999;
}

/* dots */
.dot_test{
	height: 20px;
	width: 20px;
	background-color: white;
	border-radius: 50%;
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px
}

.dot_selected{
	background-color: #ffcc00 !important;
}

.dot-ideal-careers-color {
    background-color:#009999;
}

/* progress bar */
progress::-webkit-progress-value {
  background: #ffcc00;
  border-radius: 50px !important;
}

.background-opacity{
  font-size: 16px;
  background-color: rgba(0, 0, 0, .7);
  padding: 2em;
  border-radius: 10px;
}

/* alerts */

.bi.alert {
  font-size: 100px;
  font-weight: bold;
}

.bi.alert.success {
  color: var(--icons-success-alerts);
}

.bi.alert.question {
  color: var(--grey-light-color);
}

.bi.alert.error {
  color: var(--icons-danger-alerts);
}

.btn-alert-success {
  background-color: var(--btn-success-alerts) !important;
}

.btn-alert-danger {
  background-color: var(--btn-danger-alerts) !important;
}