.rojo{
	border: 2px solid red;
}
.verde{
	border: 2px solid green;
}
.azul{
	border: 2px solid blue;
}
@font-face {
            font-family: 'ArialMTBlack';
            src: url('fonts/Arial-MT-Black.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
@font-face {
            font-family: 'Montserrat';
            src: url('fonts/Montserrat-Thin.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
@font-face {
            font-family: 'Montserrat-Regular';
            src: url('fonts/Montserrat-Regular.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
@font-face {
            font-family: 'Montserrat-Medium';
            src: url('fonts/Montserrat-Medium.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
@font-face {
            font-family: 'Montserrat-Bold';
            src: url('fonts/Montserrat-Bold.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
@font-face {
            font-family: 'Montserrat-ExtraBold';
            src: url('fonts/Montserrat-ExtraBold.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

.montserrat-ebold{
	font-family: 'Montserrat-ExtraBold', Arial, sans-serif;
}	
.montserrat-bold{
	font-family: 'Montserrat-Bold', Arial, sans-serif;
}		
.montserrat-regular{
	font-family: 'Montserrat-Regular', Arial, sans-serif;
}	
.montserrat-medium{
	font-family: 'Montserrat-Medium', Arial, sans-serif;
}
.montserrat{
	font-family: 'Montserrat', Arial, sans-serif;
}	
.arialmt-b{
	font-family: 'ArialMTBlack', Arial, sans-serif;
}	

:root {
  --color-principal: #fa501e;
  --color-principal-2: #0c0d0f;
  --color-principal-3: #0B032E;
  --color-principal-4: #7b7b7b;
  --color-principal-5: #1b1c21;
  --color-principal-6: #1b1c21;
}
/* ---------- INICIO COLORES Y ESTILOS DE TEXTO ----------- */
.colort-1{
    color: var(--color-principal);
}
.colort-2{
    color: var(--color-principal-2);
}
.colort-3{
    color: var(--color-principal-3);
}
.colort-4{
    color: var(--color-principal-4);
}
.colort-5{
    color: var(--color-principal-5);
}
.colort-6{
    color: var(--color-principal-6);
}
.fondo-c1{
	background-color: var(--color-principal);
}
.fondo-c2{
	background-color: var(--color-principal-2);
}
.fondo-c3{
	background-color: var(--color-principal-3);
}
.fondo-c4{
	background-color: var(--color-principal-4);
}

.b-100{
	font-weight:100;
}
.b-200{
	font-weight:200;
}
.b-300{
	font-weight:300;
}
.b-400{
	font-weight:400;
}
.b-500{
	font-weight:500;
}
.b-600{
	font-weight:600;
}
.b-700{
	font-weight:700;
}
.b-800{
	font-weight:800;
}
.b-900{
	font-weight:900;
}

/* ---------- FIN COLORES Y ESTILOS DE TEXTO ----------- */

/* ---------- INICIO ESTILOS DE BOTONES ----------- */

.btn.btn-primary-uni-1{
	color: gray;
    border-color: var(--color-principal-5);
    background-color: var(--color-principal-5);
	border-radius:10px;
}
.btn.btn-primary-uni-1:hover{
	color:white;
    border-color: var(--color-principal);
    background-color: var(--color-principal);
}

.btn.btn-primary-uni-2{
	color: white;
    border-color: gray;
    background-color: gray;
	border-radius:10px;
}
.btn.btn-primary-uni-2:hover{
    border-color: var(--color-principal);
    background-color: var(--color-principal);
}


.btn.btn-primary-uni-3{
	color: gray;	
    border-color: white;
    background-color: white;
	border-radius:10px;
}
.btn.btn-primary-uni-3:hover{
	color: white;	
    border-color: gray;
    background-color: gray;
}
.btn.btn-primary-uni-4{
	color:white;
    border-color: var(--color-principal);
    background-color: var(--color-principal);
	border-radius:5px;
}
.btn.btn-primary-uni-4:hover{
	color:white;
    border-color: var(--color-principal);
    background-color: var(--color-principal);
	border-radius:5px;
}

/* ---------- FIN ESTILOS DE BOTONES ----------- */

/* ---------- INICIO ESTILOS DE FORMULARIOS ----------- */
/* ---------- INICIO ESTILOS DE RADIO ----------- */
.radio-naranja input[type="radio"] {
  /* Oculta el radio button original */
  opacity: 0;
  position: absolute;
}

.radio-naranja label {
  /* Estilos para el label */
  padding-left: 25px;
  cursor: pointer;
  position: relative;
}

.radio-naranja label::before {
  /* Crea un círculo naranja */
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: white;
  border:1px solid #fa501e;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.radio-naranja input[type="radio"]:checked + label::before {
  /* Agrega un borde naranja cuando se selecciona */
  border-color: #fa501e;
  background-color: #fa501e;
}

.radio-naranja input[type="radio"]:checked + label {
  /* Cambia el color del texto cuando se selecciona */
  color: #fa501e;
}
/* ---------- FIN ESTILOS DE RADIO ----------- */
/* ---------- INICIO ESTILOS DE TEXTAREA ----------- */
.textarea-uni {
    border: 1px solid #c4c4c4; /* Borde plomo */
    background-color: #FFFFFF; /* Fondo blanco */
    color: #666; /* Letras plomas */
}

.textarea-uni:focus {
    color: black;
	background-color:white;
    border-color: #fa501e;
    outline: 0;
    box-shadow: false, 0 0 0 .25rem rgba(27, 132, 255, .25);
}

/* ---------- FIN ESTILOS DE TEXTAREA ----------- */
/* ---------- INICIO ESTILOS DE ESCALA ----------- */
.scaled-response {
    /* Estilos para la escala */
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
	padding:0px 20px 0px 20px;
    background-color: #f5f5f5;
}

.scaled-response label {
    /* Estilos para los labels */
    display: block;
    margin-top: 2px;
    margin-bottom: 5px;
}

.scaled-response input[type="radio"] {
    /* Oculta el radio button original */
    opacity: 0;
    position: absolute;
}

.scaled-response label::before {
    /* Crea un círculo para los radios */
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #FFFFFF;
    border: 1px solid #666;
}

.scaled-response input[type="radio"]:checked + label::before {
    /* Agrega un borde azul cuando se selecciona */
    border-color: #fa501e;
    background-color: #fa501e;
}

.scaled-response input[type="radio"]:checked + label {
    /* Cambia el color del texto cuando se selecciona */
    color: #fa501e;
}
/* ---------- FIN ESTILOS DE ESCALA ----------- */

/* ---------- INICIO ESTILOS DE MULTISELECCION ----------- */

.custom-control-input.multi-form-uni {
  /* Oculta el checkbox original */
  opacity: 0;
  position: absolute;
}

.custom-control-label {
  /* Estilos para el label */
  display: inline-block;
  margin-bottom: 5px;
}

.custom-control-label::before {
  /* Crea un checkbox personalizado */
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #fa501e; /* Borde naranja */
  background-color: #FFFFFF; /* Fondo blanco */
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 5px;
}

.custom-control-input.multi-form-uni:checked + .custom-control-label::before {
  /* Cambia el fondo a naranja cuando se selecciona */
  background-color: #fa501e;
  /* Agrega el icono de checked */
  content: "\2713"; /* Unicode character for checked icon */
  text-align: center;
  color: #FFFFFF; /* Color del icono de checked */
  font-size: 10px; /* Tamaño del icono de checked */
}
/* ---------- FIN ESTILOS DE MULTISELECCION ----------- */

/* ---------- FIN ESTILOS DE FORMULARIOS ----------- */