:root {
    --primary-rgb: #000;
    --secondary-rgb: #ca0505;
}

/* Password toggle eye icon */
.form-outline.form-white {
    position: relative;
}

.password-toggle {
    position: absolute;
    top: 38px;
    right: 12px;
    cursor: pointer;
    color: var(--secondary-rgb);
    z-index: 10;
    font-size: 18px;
}

.password-toggle:hover {
    color: #000;
}

.iti {
    display: block
}

/* Fix input alignment with flag and dial code */
.iti input.form-control {
    padding-left: 70px !important;
    /* or adjust to ~70-80px */
}

.iti__flag-container {
    z-index: 5;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list--dropdown .choices__item--selectable:hover,
.choices__list--dropdown .choices__item--selectable {
    background: var(--secondary-rgb) !important;
    color: #fff !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list--dropdown .choices__item--selectable:hover {
    background: var(--secondary-rgb) !important;
    color: #fff !important;
}

.bg-purple {
    background: var(--secondary-rgb) !important;
    color: #fff !important;
}

/* Purple for dropdowns and inputs */
select.form-control,
select.form-control:focus,
input.form-control:focus {
    border-color: var(--secondary-rgb) !important;
    box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.15) !important;
}

input.form-control:focus {
    border-color: var(--secondary-rgb) !important;
}

/* Purple registration button */
#reg,
.btn-primary,
.btn.btn-primary {
    background: var(--secondary-rgb) !important;
    color: #fff !important;
    border: none !important;
}

#reg:hover,
.btn-primary:hover,
.btn.btn-primary:hover {
    background: #000 !important;
}

/* Purple background for video section */
.right-section,
.right-video,
.sticky-video {
    background: var(--primary-rgb) !important;
}



/* Optional: style the scrollbar for Webkit browsers */
.card-registration::-webkit-scrollbar {
    width: 8px;
}

.card-registration::-webkit-scrollbar-thumb {
    background: var(--secondary-rgb);
    border-radius: 4px;
}

.card-registration::-webkit-scrollbar-track {
    background: #f3f3f3;
}

body {
    overflow-y: auto!important;
}