/* flex styles*/
.flex-row {
    display: flex;
    flex-direction: row;
}
.flex-row-center-center {
    display: flex!important;
    flex-direction: row!important;
    justify-content: center!important;
    align-items: center;
}
.flex-row-start-center {
    display: flex!important;
    flex-direction: row!important;
    justify-content: start!important;
    align-items: center!important;
}
.flex-row-center-start {
    display: flex!important;
    flex-direction: row!important;
    justify-content:center!important;
    align-items:  start!important;
}
.flex-row-between-start {
    display: flex!important;
    flex-direction: row!important;
    justify-content: space-between!important;
    align-items: start;
}
.flex-row-between-center {
    display: flex!important;
    flex-direction: row!important;
    justify-content: space-between!important;
    align-items: center;
}
.flex-row-end-center {
    display: flex!important;
    flex-direction: row!important;
    justify-content: end!important;
    align-items: center!important;
}
.flex-row-center-end {
    display: flex!important;
    flex-direction: row!important;
    justify-content: center!important;
    align-items: end!important;
}
.flex-row-start-end {
    display: flex!important;
    flex-direction: row!important;
    justify-content: start!important;
    align-items: end!important;
}
.flex-row-between-end {
    display: flex!important;
    flex-direction: row!important;
    justify-content: space-between!important;
    align-items: end!important;
}
.flex-row-end-end {
    display: flex!important;
    flex-direction: row!important;
    justify-content: end!important;
    align-items: end!important;
}
.flex-column {
    display: flex;
    flex-direction: column;
}
.flex-column-center-center {
    display: flex!important;
    flex-direction: column!important;
    justify-content: center!important;
    align-items: center!important;
}
.flex-column-start-center {
    display: flex!important;
    flex-direction: column!important;
    justify-content: start!important;
    align-items: center!important;
}
.flex-column-end-start {
    display: flex!important;
    flex-direction: column!important;
    justify-content: end!important;
    align-items: start!important;
}
.flex-column-between-center {
    display: flex;
    flex-direction: column!important;
    justify-content: space-between!important;
    align-items: center!important;
}
.flex-column-end-center {
    display: flex;
    flex-direction: column!important;
    justify-content: end!important;
    align-items: center!important;
}
.flex-column-center-end {
    display: flex;
    flex-direction: column!important;
    justify-content: center!important;
    align-items: end!important;
}
.flex-column-start-end {
    display: flex;
    flex-direction: column!important;
    justify-content: start!important;
    align-items: end!important;
}
.flex-column-between-end {
    display: flex;
    flex-direction: column!important;
    justify-content: space-between!important;
    align-items: end!important;
}
.flex-column-end-end {
    display: flex;
    flex-direction: column!important;
    justify-content: end!important;
    align-items: end!important;
}

.flex-column-start-start {
    display: flex;
    flex-direction: column!important;
    justify-content: start!important;
    align-items: start!important;
}
.flex-row-start-start {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
}
.flex-row-between-start {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
}

.flex-column-center-start {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}

/* Font styles*/

.font-12-14-normal {
    font-size: 12px;
    line-height: 14px;
    font-weight: normal;
}
.font-12-14-500 {
    font-size: 12px;
    line-height: 14px;
    font-weight: 500;
}
.font-12-14-bold {
    font-size: 12px;
    line-height: 14px;
    font-weight: bold;
}

.font-13-16-normal {
    font-size: 13px;
    line-height: 16px;
    font-weight: normal;
}
.font-13-16-500 {
    font-size: 13px;
    line-height: 16px;
    font-weight: 500;
}
.font-13-16-bold {
    font-size: 13px;
    line-height: 16px;
    font-weight: bold;
}

.font-14-16-normal {
    font-size: 14px;
    line-height: 16px;
    font-weight: normal;
}
.font-14-16-500 {
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
}
.font-14-16-bold {
    font-size: 14px;
    line-height: 16px;
    font-weight: bold;
}

.font-16-20-normal {
    font-size: 16px;
    line-height: 20px;
    font-weight: normal;
}
.font-16-20-500 {
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
}
.font-16-20-bold {
    font-size: 16px;
    line-height: 20px;
    font-weight: bold;
}

.font-16-24-normal {
    font-size: 16px;
    line-height: 24px;
    font-weight: normal;
}
.font-16-24-500 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}
.font-16-24-bold {
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
}

.font-18-24-normal {
    font-size: 18px;
    line-height: 24px;
    font-weight: normal;
}
.font-18-24-500 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
}
.font-18-24-bold {
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
}

.font-16-24-normal {
    font-size: 16px;
    line-height: 24px;
    font-weight: normal;
}
.font-16-24-500 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}
.font-16-24-bold {
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
}

.font-18-20-normal {
    font-size: 18px!important;
    line-height: 20px;
    font-weight: normal;
}
.font-18-20-500 {
    font-size: 18px!important;
    line-height: 20px;
    font-weight: 500;
}
.font-18-20-bold {
    font-size: 18px!important;
    line-height: 20px;
    font-weight: bold;
}

.font-24-26-normal {
    font-size: 24px;
    line-height: 26px;
    font-weight: normal;
}

.font-20-26-500 {
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
}
.font-20-26-bold {
    font-size: 20px;
    line-height: 26px;
    font-weight: bold;
}
.font-20-26-normal {
    font-size: 20px;
    line-height: 26px;
    font-weight: normal;
}

.font-28-34-500 {
    font-size: 28px;
    line-height: 34px;
    font-weight: 500;
}
.font-28-34-bold {
    font-size: 28px;
    line-height: 34px;
    font-weight: bold;
}
.font-28-34-normal {
    font-size: 28px;
    line-height: 34px;
    font-weight: normal;
}

.font-30-36-500 {
    font-size: 30px!important;
    line-height: 36px!important;
    font-weight: 500;
}
.font-30-36-bold {
    font-size: 30px!important;
    line-height: 36px!important;
    font-weight: bold;
}
.font-30-36-normal {
    font-size: 30px!important;
    line-height: 36px!important;
    font-weight: normal;
}

.font-48-54-500 {
    font-size: 48px!important;
    line-height: 54px!important;
    font-weight: 500;
}
.font-48-54-bold {
    font-size: 48px!important;
    line-height: 54px!important;
    font-weight: bold;
}
.font-48-54-normal {
    font-size: 48px!important;
    line-height: 54px!important;
    font-weight: normal;
}


.font-24-26-500 {
    font-size: 24px;
    line-height: 26px;
    font-weight: 500;
}
.font-24-26-bold {
    font-size: 24px;
    line-height: 26px;
    font-weight: bold;
}
.font-12-11-normal {
    font-size: 12px;
    line-height: 11px;
    font-weight: normal;
}

/* Color styles */
.color-white {
    color: #FFFFFF!important;
}
.bk-color-white {
    background-color: #FFFFFF!important;
}
.color-black {
    color: #000000!important;
}
.bk-color-black {
    background-color: #000000!important;
}
.color-dark-green {
    color: #234034!important;
}
.bk-color-dark-green {
    background-color: #234034!important;
}
.color-dark {
    color: #333333!important;
}
.bk-color-dark {
    background-color: #333333!important;
}

.color-green {
    color: #089880!important;
}
.bk-color-green {
    background-color: #089880!important;
}

.color-orange {
    color: #FB8366!important;
}
.bk-color-orange {
    background-color: #FB8366!important;
}

.color-grey {
    color: #59666E!important;
}
.bk-color-grey {
    background-color: #59666E!important;
}

.color-ligth-green {
    color: #D9EAE2!important;
}
.bk-color-ligth-green {
    background-color: #D9EAE2!important;
}

.color-ligth-grey {
    color: #B8BDC0!important;
}
.bk-color-ligth-grey {
    background-color: #B8BDC0!important;
}
.color-neutral {
    color: #999999;
}

.color-neutral-500 {
    color: #B8BDC0;
}
.color-light {
    color: #F7F5F7;
}
.bk-color-light {
    background-color: #F7F5F7;
}
.color-menu {
    color: #000000;
}
.color-menu:hover, .color-menu.active {
    color: #499777;
}

.bk-color-green-grey {
    background-color: #4E645C;
}

.color-neutral_grey {
    color: #8E979C!important;
}
.bk-color-neutral_grey {
    background-color: #8E979C!important;
}


.gap-20{
    gap: 20px;
}
.gap-10 {
    gap: 10px;
}
.gap-5 {
    gap: 5px;
}

.white_box {
    background-color: #FFFFFF!important;
    border-radius: 16px!important;
    padding: 24px!important;
}
.white_box_checkout {
    background-color: #FFFFFF!important;
    border-radius: 16px!important;
    padding: 36px 30px!important;
}
@media (max-width: 1094px){
    .wrapper .font-24-26-normal {
        font-size: 20px!important;
        line-height: 23px;
    }
}
@media (max-width: 767px){
    .wrapper .font-24-26-normal {
        font-size: 18px!important;
        line-height: 20px;
    }
    .wrapper .font-28-34-500 {
        font-size: 20px!important;
        line-height: 24px!important;
    }
    .wrapper .font-14-16-normal {
        font-size: 12px;
        line-height: 14px;
        font-weight: normal;
    }
    .wrapper .font-16-20-normal {
        font-size: 12px;
        line-height: 16px;
        font-weight: normal;
    }
    .wrapper .font-16-20-normal p {
        font-size: 14px;
        line-height: 16px;
        font-weight: normal;
    }
    .wrapper .font-30-36-500 {
        font-size: 20px !important;
        line-height: 24px !important;
        font-weight: 500;
    }
    .wrapper .font-30-36-normal {
        font-size: 20px !important;
        line-height: 24px !important;
        font-weight: normal;
    }
    .wrapper .font-18-24-500 {
        font-size: 14px;
        line-height: 16px;
        font-weight: 500;
    }
    .font-16-24-normal {
        font-size: 14px;
        line-height: 16px;
        font-weight: normal;

    }
    .wrapper .font-20-26-500{
        font-size: 16px;
        line-height: 20px;
        font-weight: 500;
    }
}