/*CSS for unique styless that not can`t be named correctly*/
/*OB - OTBASY BANK*/
/* CSS NEED TO BE NAMED AS  OB-{{NAME OF CLASS OR ID}}-{{COLOR AND ETC.}} */


/* Margin */

/* Margin bottom*/
.ob-mb-40px {
    margin-bottom: 40px;
}

.ob-mb-35px {
    margin-bottom: 35px;
}

.ob-mb-30px {
    margin-bottom: 30px;
}

.ob-mb-25px {
    margin-bottom: 25px;
}

.ob-mb-20px {
    margin-bottom: 20px;
}

.ob-mb-15px {
    margin-bottom: 15px;
}

.ob-mb-10px {
    margin-bottom: 10px;
}

.ob-mb-5px {
    margin-bottom: 5px;
}



/* Margin top*/
.ob-mt-40px {
    margin-top: 40px;
}

.ob-mt-35px {
    margin-top: 35px;
}

.ob-mt-30px {
    margin-top: 30px;
}

.ob-mt-25px {
    margin-top: 25px;
}

.ob-mt-20px {
    margin-top: 20px;
}

.ob-mt-15px {
    margin-top: 15px;
}

.ob-mt-10px {
    margin-top: 10px;
}

.ob-mt-5px {
    margin-top: 5px;
}


/* Margin right*/
.ob-mr-40px {
    margin-right: 40px;
}

.ob-mr-35px {
    margin-right: 35px;
}

.ob-mr-30px {
    margin-right: 30px;
}

.ob-mr-25px {
    margin-right: 25px;
}

.ob-mr-20px {
    margin-right: 20px;
}

.ob-mr-15px {
    margin-right: 15px;
}

.ob-mr-10px {
    margin-right: 10px;
}

.ob-mr-5px {
    margin-right: 5px;
}


/* Margin left*/
.ob-ml-40px {
    margin-left: 40px;
}

.ob-ml-35px {
    margin-left: 35px;
}

.ob-ml-30px {
    margin-left: 30px;
}

.ob-ml-25px {
    margin-left: 25px;
}

.ob-ml-20px {
    margin-left: 20px;
}

.ob-ml-15px {
    margin-left: 15px;
}

.ob-ml-10px {
    margin-left: 10px;
}

.ob-ml-5px {
    margin-left: 5px;
}


/* Padding */

/* Padding bottom*/
.ob-pb-40px {
    padding-bottom: 40px;
}

.ob-pb-35px {
    margin-bottom: 35px;
}

.ob-pb-30px {
    padding-bottom: 30px;
}

.ob-pb-25px {
    padding-bottom: 25px;
}

.ob-pb-20px {
    padding-bottom: 20px;
}

.ob-pb-15px {
    padding-bottom: 15px;
}

.ob-pb-10px {
    padding-bottom: 10px;
}

.ob-pb-5px {
    padding-bottom: 5px;
}



/* Padding top*/
.ob-pt-40px {
    padding-top: 20px;
}

.ob-pt-35px {
    padding-top: 35px;
}

.ob-pt-30px {
    padding-top: 30px;
}

.ob-pt-25px {
    padding-top: 25px;
}

.ob-pt-20px {
    padding-top: 20px;
}

.ob-pt-15px {
    padding-top: 15px;
}

.ob-pt-10px {
    padding-top: 10px;
}

.ob-pt-5px {
    padding-top: 5px;
}


/* Padding right*/
.ob-pr-40px {
    padding-right: 40px;
}

.ob-pr-35px {
    padding-right: 35px;
}

.ob-pr-30px {
    padding-right: 30px;
}

.ob-pr-25px {
    padding-right: 25px;
}

.ob-pr-20px {
    padding-right: 20px;
}

.ob-pr-15px {
    padding-right: 15px;
}

.ob-pr-10px {
    padding-right: 10px;
}

.ob-pr-5px {
    padding-right: 5px;
}


/* Padding left*/
.ob-pl-40px {
    padding-left: 40px;
}

.ob-pl-35px {
    padding-left: 35px;
}

.ob-pl-30px {
    padding-left: 30px;
}

.ob-pl-25px {
    padding-left: 25px;
}

.ob-pl-20px {
    padding-left: 20px;
}

.ob-pl-15px {
    padding-left: 15px;
}

.ob-pl-10px {
    padding-left: 10px;
}

.ob-pl-5px {
    padding-left: 5px;
}

/* Padding */
.ob-pd-10px {
    padding: 10px;
}


/* Error */

.ob-error-text {
    color: #ED3A32;
}


html .row {
    margin-right: -15px;
    margin-left: -15px;
}



/*width in percent*/

.ob-w-10 {
    width: 10%;
}

.ob-w-15 {
    width: 15%;
}

.ob-w-20 {
    width: 20%;
}

.ob-w-25 {
    width: 25%;
}

.ob-w-30 {
    width: 30%;
}

.ob-w-32 {
    width: 32%;
}

.ob-w-35 {
    width: 35%;
}

.ob-w-40 {
    width: 40%;
}

.ob-w-45 {
    width: 45%;
}

.ob-w-49 {
    width: 49%;
}

.ob-w-50 {
    width: 50%;
}

.ob-w-55 {
    width: 55%;
}

.ob-w-60 {
    width: 60%;
}

.ob-w-66 {
    width: 66%;
}

.ob-w-75 {
    width: 75%;
}

.ob-w-80 {
    width: 80%;
}

/*width in px*/
.ob-w-22px {
    width: 22px;
}

.ob-w-56px {
    width: 56px;
}

.ob-w-max {
    width: max-content !important;
}

.ob-w-20px{
    width:20px;
}
/* HEIGHT */
/*height in px*/
.ob-h-36px {
    height: 36px;
}

.ob-h-48px {
    height: 48px;
}

.ob-h-22px {
    height: 22px;
}

.ob-h-56px {
    height: 56px;
}



/* GAP */
.ob-gap-2px {
    gap: 2px;
}

.ob-gap-5px {
    gap: 5px;
}

.ob-gap-10px {
    gap: 10px;
}

.ob-gap-15px {
    gap: 15px;
}

.ob-gap-20px {
    gap: 20px;
}

.ob-gap-25px {
    gap: 25px;
}

.ob-gap-30px {
    gap: 30px;
}

.ob-gap-40px {
    gap: 40px;
}


.cursor-pointer {
    cursor: pointer;
}


.ob-flex-to-column {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.ob-right-to-column {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    
}

.ob-light-blue {
    background: var(--Light-blue, #F5F6F8);
}

@media(max-width:768px) {
    .ob-flex-to-column, .ob-right-to-column {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
}