/*Tranparent colors*/
.color_trans {
    backdrop-filter: blur(30px);
    background-color: rgba(0, 0, 0, 0.7);
}

/*Black colors*/
.color_black_1 {
    background-color: #12171a;
}

.color_black_2 {
    background-color: #263238;
}

.color_black_3 {
    background-color: #37474f;
}

.color_black_4 {
    background-color: #455a64;
}

.color_black_5 {
    background-color: #546e7a;
}

/*Variable colors*/
.color_variable_1 {
    background-color: #fff;
}

.color_variable_2 {
    background-color: #fff;
}

.color_variable_3 {
    background-color: #fff;
}

.color_variable_4 {
    background-color: #fff;
}

/*White colors*/
.color_white_1 {
    background-color: #90a4ae;
}

.color_white_2 {
    background-color: #b0bec5;
}

.color_white_3 {
    background-color: #cfd8dc;
}

.color_white_4 {
    background-color: #eceff1;
}

.color_white_4_5 {
    background-color: #f5f7f8;
}

.color_white_5 {
    background-color: #fff;
}

/*Text color*/
.color_black_txt {
    color: #000;
}

.color_grey_txt {
    color: #232e33;
}

.color_grey_txt_1 {
    color: #758992;
}

.color_grey_txt_2 {
    color: #546e7a;
}

.color_white_txt {
    color: #ffffff;
}

.special_text_1 {
    background-color: #fff;
    color: #fff;
    padding: 0px 5px;
    font-weight: 900;
}

/*Variable colors*/
.color_variable_txt_1 {
    color: #fff;
}

.color_variable_txt_2 {
    color: #fff;
}

.color_variable_txt_3 {
    color: #fff;
}

.color_variable_txt_4 {
    color: #fff;
}

/* Para navegadores basados en Gecko (Firefox) antiguos */
::-moz-selection {
    color: #ffffff;
    background: #fff;
}

/* Para el resto de navegadores */
::selection {
    color: #ffffff;
    background: #fff;
}

/*Videogame keyword*/
.keyword {
    background-color: #fff;
}

/*CHECKBOXES*/
[type="checkbox"].filled-in:checked + span:not(.lever)::after {
    border: 2px solid #fff !important;
    background-color: #fff !important;
}

/*SELECTOR SEPIA*/
.noUi-base {
    background-color: #fff !important;
}

.noUi-connect {
    background-color: #fff !important;
}

.noUi-tooltip {
    background-color: #fff !important;
    color: #ffffff !important;
}

.noUi-tooltip::after {
    border-bottom: 20px solid #fff; /* Color y altura del triángulo */
}

/*Gradiente para la card de about me*/
.gradientCardColor {
    background: linear-gradient(to bottom right, #fff 0%, #ffffff 100%);
    background-attachment: fixed;
}

/*Badges design*/
.variableBadge {
    background: linear-gradient(to bottom right, #fff 0%, #003796 100%);
    color: #1957c2;
}

.bronze {
    background: linear-gradient(to bottom right, #cd7f32 0%, #8c4a2f 100%);
    color: #805a3b;
}

.silver {
    background: linear-gradient(to bottom right, #bdbdbd 0%, #9e9e9e 100%);
    color: #9e9e9e;
}

.gold {
    background: linear-gradient(to bottom right, #e6ce6a 0%, #b7892b 100%);
    color: #b7892b;
}

/*Colores del loader*/
.loader {
    background: linear-gradient(#fff 30px, transparent 0) no-repeat;
    background-size: 2px 40px;
}
@keyframes lqt {
    0%,
    100% {
        background-image: linear-gradient(#fff 40px, transparent 0);
        background-position: 0% 0px;
    }
    50% {
        background-image: linear-gradient(#fff 40px, transparent 0);
        background-position: 0% 40px;
    }
    50.1% {
        background-image: linear-gradient(#fff 40px, transparent 0);
        background-position: 0% -40px;
    }
}
@keyframes lqb {
    0% {
        background-image: linear-gradient(#fff 40px, transparent 0);
        background-position: 0 40px;
    }
    100% {
        background-image: linear-gradient(#fff 40px, transparent 0);
        background-position: 0 -40px;
    }
}