:root {
    --primary-color: {
            {
            pref('primary_color')
        }
    }

    ;

    --secondary-color: {
            {
            pref('secondary_color')
        }
    }

    ;
}


.bg-theme {
    background-color: var(--primary-color) !important;
}
.btn-next-step:hover, .bg-theme:hover {
    color: white !important;
    transform: none !important;
    box-shadow: none !important;
    background-color: var(--primary-color) !important;
    opacity: 1 !important;
}

.btn-next-step:disabled, .bg-theme:disabled {
    background-color: var(--primary-color) !important;
    color: white !important;
    opacity: 0.65 !important;
    cursor: not-allowed !important;
}

.border-theme {
    border: 1px solid var(--primary-color)
}

.btn-outline-theme {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
.btn-outline-theme:hover {
    color: #fff !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-outline-secondary-theme {
    color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}
.btn-outline-secondary-theme:hover {
    color: #fff !important;
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

.text-theme {
    color: var(--primary-color) !important
}

body {
    background-color: #f8fafc;
}


* {
    font-family: "Noto Kufi Arabic", sans-serif;
}

.iti {
    width: 100% !important
}

.filepond--root {
    width: 120px;
    height: 120px;
}