*,
html,
body {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

:root {
    --purple-color-8A2BE2: #8A2BE2;
    --purple-color-8A2BE2-hover: #7b24cc;
    --purple-color-37024a: #37024a;
    --dark-purple-color-2d013d: #2d013d;
    --dark-lightpurple-color-81017f: #81017f;
    --medium-purple-color-614881: #614881;

    --gray-color-333: #333;
    --gray-color-111: #111;
    --gray-color-666: #666;
    --gray-color-999: #999;
    --gray-color-FAFAFA: #FAFAFA;
    --gray-color-f7f7f7: #f7f7f7;

    --white-color-FFF: #FFF;

    --red-color-fd5a3e: #fd5a3e;
    --darkred-color-f15034: #f15034;

    --green-color-32CD32: #32CD32;
    --darkgreen-color-24c424: #24c424;
    
    --blue-color-0099ff: #0099ff;
    
    --orange-color-ff9900: #ff9900;
}

/* ====================== */
/* ===== BACKGROUND ===== */
/* ====================== */
.bg_dark_purple {
    background: var(--dark-purple-color-2d013d);
}

.bg_dark_lightpurple {
    background: var(--dark-lightpurple-color-81017f);
}

.bg_medium_purple {
    background: var(--medium-purple-color-614881);
}

.bg_light_purple {
    background: #7888BE;
}

.bg_blue {
    background-color: #2391db;
}

.bg_media_blue {
    background: #588be9;
    /* background: #5dabf5; */
}

.bg_light_blue {
    background: #68C2E6;
}

.bg_gree {
    background-color: #16af68;
}

.bg_light_gree {
    background-color: #5ecf9b;
}

.bg_green_water {
    background: #4AF8FF;
}

.bg_light_gray {
    background-color: #f0f1f3;
}

.bg_orange {
    background-color: #ce6504;
}

.bg_light_orange {
    background-color: #e29750;
}

.bg_red {
    background-color: #d60e0e;
}

.bg_light_red {
    background-color: #f74c4c;
}

/* ============================ */
/* ========== BORDER ========== */
/* ============================ */
.border_light_blue {
    border-bottom: 10px solid #68C2E6
}

.border_light_green {
    border-bottom: 10px solid #5ecf9b
}

.border_light_orange {
    border-bottom: 10px solid #e29750
}

.border_light_red {
    border-bottom: 10px solid #f74c4c
}

/* ======================= */
/* ===== COLORS TEXT ===== */
/* ======================= */
.color_dark_purple {
    color: #3E023D;
}

.color_medium_purple {
    color: #614881;
}

.color_light_purple {
    color: #7888BE;
}

.color_light_blue {
    color: #68C2E6;
}

.color_green_water {
    color: #4AF8FF;
}

/* ============================ */
/* =========== LOGO =========== */
/* ============================ */
.logo span {
    display: inline-flex;
    padding: 5px 8px 5px 8px;
    background-color: var(--purple-color-8A2BE2);
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.logo i {
    font-size: 24px;
    color: var(--white-color-FFF);
}

.logo p {
    display: inline;
    font-size: 18px;
    font-weight: 500;
    color: var(--gray-color-666);
}

/* ============================ */
/* ========== BUTTON ========== */
/* ============================ */

.button_dark_lightpurple {
    background: var(--purple-color-8A2BE2);
}
.button_dark_lightpurple:hover {
    background: var(--purple-color-8A2BE2-hover);
}

button.btn_start_free {
    padding: 10px 26px;
    border-radius: 6px;
    background-color: var(--purple-color-8A2BE2);
    color: #fff;
}

button.btn_start_free:hover {
    color: #fff;
}

button.button_and_icon {
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.3s ease;
    width: 100%;
}

button.button_and_icon i {
    left: -10px;
    position: relative;
}

button.bg_color_success {
    background: var(--green-color-32CD32);
    color: var(--white-color-FFF);
}

button.bg_color_success:hover {
    background-color: var(--darkgreen-color-24c424);
}

button.bg_color_error {
    background: var(--red-color-fd5a3e);
    color: var(--white-color-FFF);
}

button.bg_color_error:hover {
    background-color: var(--darkred-color-f15034);
}

/* ============================ */
/* ========== ALERTS ========== */
/* ============================ */

.alert_error {
    font-size: 14px;
    font-weight: 400;
    color: var(--red-color-fd5a3e);
}

/* ================================= */
/* ========== FULL SCREEN ========== */
/* ================================= */
.vertical_center {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.horizontal_center {
    width: 100%;
    text-align: center;
}

.horizontal_center .icon,
.horizontal_center .icon_alert {
    font-size: 4rem;
}

.horizontal_center .icon {
    color: var(--green-color-32CD32);
}

.horizontal_center .icon_alert {
    color: var(--red-color-fd5a3e);
}

.horizontal_center h3,
.horizontal_center h4 {
    font-size: 28px;
    font-weight: 900;
}

.horizontal_center h3 {
    color: var(--green-color-32CD32);
}

.horizontal_center h4 {
    color: var(--red-color-fd5a3e);
}

.horizontal_center p {
    font-size: 15px;
    font-weight: 300;
    color: var(--gray-color-666);
}

.horizontal_center p strong {
    font-weight: 700;
    font-size: 13px;
}

.horizontal_center a {
    font-weight: 700;
    color: var(--purple-color-8A2BE2);
}


@media (max-width: 768px) {

    /* ============================ */
    /* ========== BUTTON ========== */
    /* ============================ */
    button.button_and_icon {
        margin-bottom: 20px;
    }

}