.zu-bg {
    background-color: var(--zu-color-background);
}

.zu-bg-gray {
    background-color: var(--bs-content-bg-color);
}

.zu-cp,
.zu-color-primary,
.zu-color,
.zcp {
    color: var(--zu-color-primary) !important;
}

.zfb,
.zu-font-bg,
.zfs-36 {
    font-size: 36px !important;
}

.zfs-48 {
    font-size: 48px !important;
}

.zfs-50 {
    font-size: 50px !important;
}

.zfs-60 {
    font-size: 60px !important;
}

.zfs-70 {
    font-size: 70px !important;
}

.zfs-80 {
    font-size: 80px !important;
}

.zfs-90 {
    font-size: 90px !important;
}


.zfs-100 {
    font-size: 100px !important;
}

.zfm,
.zu-font-medium,
.zfs-24 {
    font-size: 24px !important;
}

.zfw-700 {
    font-weight: 700;
}

.zfw-500 {
    font-weight: 500;
}

.zfw-400 {
    font-weight: 400;
}

.zlu {
    text-decoration: underline !important;
}

.zic {
    object-fit: cover;
}

.zic-200 {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

.zfc-g500 {
    color: var(--bs-gray-500)
}

.zfc-g100 {
    color: var(--bs-gray-100)
}

.zfc-g700 {
    color: var(--bs-gray-700)
}

.zfs-10 {
    font-size: 10px !important;
}

.zfs-14 {
    font-size: 14px !important;
}

.zfs,
.zu-font-small,
.zfs-12 {
    font-size: 12px !important;
}

.zfw,
.zu-font-white {
    color: var(--zu-color-background);
}

.zs,
.zu-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--bs-scrollbar-color) transparent;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.zsh,
.zs-hidden,
.zu-scroll-hidden {
    overflow: hidden;
}

.zsy {
    overflow-y: auto;
    overflow-x: hidden;
}

.zsx {
    overflow-y: hidden;
    overflow-x: auto;
}

.zu-center {
    margin: auto;
}


.zu-radius-5,
.zbr-5 {
    border-radius: 5px;
}

.zbr,
.zu-radius,
.zu-radius-10,
.zbr-10 {
    border-radius: 10px;
}

.zu-radius-15,
.zbr-15 {
    border-radius: 15px;
}

.zu-radius-20,
.zbr-20 {
    border-radius: 20px;
}

.zu-show,
.zds {
    display: block;
}

.d-flex.zds,
.d-flex.zu-show {
    display: flex !important;
}

.zu-hidden,
.zdh {
    display: none !important;
}

.zdh.zto {
    transition: opacity 1s ease-out;
}

@media (max-width: 768px) {

    .zu-mob-show,
    .zdms {
        display: block !important;
    }

    .zu-mob-hidden,
    .zdmh {
        display: none !important;
    }

    .d-flex.zdms,
    .d-flex.zu-mob-show {
        display: flex !important;
    }
}


.zu-text-left,
.ztl {
    text-align: left;
}

.zu-text-right,
.ztr {
    text-align: right;
}

.zu-text-center,
.ztc {
    text-align: center;
}

.btn.input {
    margin-top: 3px;
    border: 1px solid var(--bs-gray-300) !important;
    height: calc(3.75rem + 2px);
    min-height: calc(3.75rem + 2px);
    line-height: 1.25;
}

.btn.input:hover,
.btn.input:active,
.btn.input:focus {
    border-color: var(--zu-color-border-primary) !important;
    box-shadow: var(--zu-shadow-primary);
}


.zu-height-100,
.zh-100 {
    height: 100%;
}

.zu-height-100.m-50,
.zh-100.m-50 {
    height: calc(100% - 50px);
}

.zu-height-100.m-40,
.zh-100.m-40 {
    height: calc(100% - 40px);
}

.zu-height-100.m-30,
.zh-100.m-30 {
    height: calc(100% - 30px);
}

.zu-height-100.m-20,
.zh-100.m-20 {
    height: calc(100% - 20px);
}