/* Made by KodeWeb.NET with <3 */
:root {
    /* Button Root */
    --btn-height: max-content;
    --btn-padding: 10px 14px;
    --btn-md-roundness: 8px;
    --btn-lg-roundness: 13px;

    /* Button Outline */
    --btn-outline--text-color: #0063fb;
    --btn-outline--background-color: #fff;
    --btn-outline--border-thickness: 2px;
    --btn-outline--border-type: solid;
    --btn-outline--border-color: #0063fb;

    /* Button Filled */
    --btn-filled--text-color: #fff;
    --btn-filled--background-color: #2E3F55;
    --btn-filled--border-thickness: 0px;
    --btn-filled--border-type: solid;
    --btn-filled--border-color: #0063fb;

    /* Custom Button Properties */
    --btn-custom--secondary-color: #3eacc4;

    --btn-primary-hover: #274b69;
    --btn-secondary-hover: #63c0d8;
}

/* Buttons Container */
.buttons {
    display: flex;
    align-items: center;
    gap: 2em;
}

.btn {
    user-select: none;
    -moz-user-select: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-weight: normal;
    line-height: 1.5;
    height: var(--btn-height);
    margin-bottom: 0;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    vertical-align: middle;
    white-space: nowrap;
    padding: var(--btn-padding);
    font-size: 14px;
    background-color: var(--btn-filled--background-color);
    border-radius: 8px;
    font-family: 'OpenSansModern', sans-serif;
    font-weight: 400;
    letter-spacing: 0.5px;
    min-width: 150px;

    /* iPhone Padding */
    -webkit-appearance: initial;
}

.btn:hover {
    background-color: var(--btn-primary-hover);
}

.btn:active {
    background-color: darken(var(--btn-primary-hover), 60%);
    transform: scale(0.98);
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--btn-primary-hover);
}

.btn-wrap {
    width: max-content;
}

.btn.secondary {
    background-color: var(--btn-custom--secondary-color);
}

.btn.secondary:hover {
    background-color: var(--btn-secondary-hover);
}

.btn.secondary:active {
    background-color: darken(var(--btn-secondary-hover), 10%);
}

.btn.primary {
    background-color: #2E3F55;
}

.btn.primary.arrow-right {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' style='fill:%233EACC4'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 7.5px center !important;
    background-size: 15px !important;
    text-align: start;
    width: calc(100% + 1em);
}

.btn.secondary.arrow-right {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' style='fill:%232E3F55'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 7.5px center !important;
    background-size: 15px !important;
    text-align: start;
    width: calc(100% + 1em);
}

.btn.primary.arrow-left {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' style='fill:%233eacc4'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 7.5px center !important;
    background-size: 15px !important;
    text-align: end;
    width: calc(100% + 1em);
}

.btn.secondary.arrow-left {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' style='fill:%232E3F55'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 7.5px center !important;
    background-size: 15px !important;
    text-align: end;
    width: calc(100% + 1em);
}

/* OLD BUTTON CSS */
.btn--outline {
    color: var(--btn-outline--text-color);
    background-color: var(--btn-outline--background-color);
    border: var(--btn-outline--border-thickness) var(--btn-outline--border-type) var(--btn-outline--border-color);
}

.btn--filled {
    background-color: var(--btn-filled--background-color);
    color: var(--btn-filled--text-color);
    border: var(--btn-filled--border-thickness) var(--btn-filled--border-type) var(--btn-filled--border-color);
}


.btn--md-round {
    border-radius: var(--btn-md-roundness);
}

.btn--lg-round {
    border-radius: var(--btn-lg-roundness);
}