/*Red-sample*/
.sample-red {
    background-color: rgba(255, 78, 78, 1) !important;
}

.sample-red input, .sample-red input::placeholder, .sample-red input:focus {
    background-color: transparent;
    border-color: #fffdf8 !important;
    color: #fffdf8;
}

.sample-red .error-color input, .sample-red .error-color input::placeholder {
    color: #DCFA6E !important;
    border-color: #DCFA6E !important;
    outline: 0 none;
    box-shadow: none;
}

.sample-red button {
    background-color: #fffdf8;
    border-color: #fffdf8;
    --bs-text-opacity: 1;
    color: rgba(var(--bs-red-rgb), var(--bs-text-opacity)) !important;
}

/*White-sample*/
.sample-white {
    background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
}

.sample-white input, .sample-white input::placeholder, .sample-white input:focus {
    border-color: #000000 !important;
    color: #212529;
    outline: 0 none;
    box-shadow: none;

}

.sample-white .error-color input, .error-color input::placeholder {
    color: #FF4E4E !important;
    border-color: #FF4E4E !important;
}

.sample-white button {
    background-color: #000000;
    border-color: #000000;
    --bs-text-opacity: 1;
    color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}

.sample-white input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
}

/*Green-sample*/
.sample-green {
    background-color: rgba(var(--bs-green-rgb), 1) !important;
}

.sample-green input, .sample-green input::placeholder, .sample-green input:focus {
    --bs-text-opacity: 1;
    background-color: rgba(var(--bs-green-rgb), var(--bs-bg-opacity)) !important;
    border-color: #000000 !important;
    color: #212529;
    outline: 0 none;
    box-shadow: none;

}

.sample-green .error-color input, .error-color input::placeholder {
    color: #FF4E4E !important;
    border-color: #FF4E4E !important;
}

.sample-green button {
    background-color: #000000;
    border-color: #000000;
    --bs-text-opacity: 1;
    color: rgba(var(--bs-green-rgb), var(--bs-text-opacity)) !important;
}

.sample-green input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
}

/*Beige-sample*/
.sample-beige {
    background-color: rgba(var(--bs-beige-rgb), var(--bs-bg-opacity)) !important;
}

.sample-beige input, .sample-beige input::placeholder, .sample-beige input:focus {
    background-color: transparent !important;
    border-color: #000000 !important;
    color: #212529;
    outline: 0 none;
    box-shadow: none;

}

.sample-beige .error-color input, .error-color input::placeholder {
    color: #FF4E4E !important;
    border-color: #FF4E4E !important;
}

.sample-beige button {
    background-color: #000000;
    border-color: #000000;
    --bs-text-opacity: 1;
    color: rgba(var(--bs-beige-rgb), var(--bs-text-opacity)) !important;
}

.sample-beige input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
}

/*Blue-sample*/
.sample-blue {
    background-color: rgba(var(--bs-blue-rgb), 1) !important;
    color: #fffdf8;
}

.sample-blue input, .sample-blue input::placeholder, .sample-blue input:focus {
    /*--bs-text-opacity: 1;*/
    background-color: transparent !important;
    border-color: #fffdf8;
    color: #fffdf8;
    outline: 0 none;
    box-shadow: none;

}

.sample-blue .error-color input, .error-color input::placeholder {
    color: #FF4E4E !important;
    border-color: #FF4E4E !important;
}

.sample-blue button {
    background-color: #fffdf8;
    border-color: #fffdf8;
    --bs-text-opacity: 1;
    color: rgba(var(--bs-blue-rgb), var(--bs-text-opacity)) !important;
}


.sample-blue input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
}

/*Purple-sample*/
.sample-purple {
    background-color: rgba(var(--bs-purple-rgb), var(--bs-bg-opacity)) !important;
}

.sample-purple input, .sample-purple input::placeholder, .sample-purple input:focus {
    background-color: transparent !important;
    border-color: #000000 !important;
    color: #212529;
    outline: 0 none;
    box-shadow: none;

}

.sample-purple .error-color input, .error-color input::placeholder {
    color: #FF4E4E !important;
    border-color: #FF4E4E !important;
}

.sample-purple button {
    background-color: #000000;
    border-color: #000000;
    --bs-text-opacity: 1;
    color: rgba(var(--bs-purple-rgb), var(--bs-text-opacity)) !important;
}

.sample-purple input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
}