@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

:root {
     --lilk: #7C3AED;
     --Hlilk: #8b5fe4;
     --black: #000000;
     --pink: #ED3AAB;
}

* {
     font-family: 'Open Sans', sans-serif;
     --bs-box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 9%);
     --bs-dropdown-border-color: transparent !important;
}

.text-lilk {
     color: var(--lilk) !important;
     text-decoration: none;
}

.text-lilk:hover {
     color: var(--Hlilk) !important;
}

.btn-lilk {
     color: white !important;
     background: var(--lilk) !important;
     height: 36px !important;
     text-decoration: none;
}

.btn-lilk:hover {
     background: var(--Hlilk) !important;
     color: white !important;
}

.btn-a {
     color: rgb(0, 0, 0);
     height: 36px !important;
}
.btn-a:hover {
     background: #ededed;
     color: rgb(0, 0, 0);
}

.btn-s {
     background: #DEDEDE;
     height: 36px !important;
     pointer-events: none;
     color: white !important;
}
.btn-s:hover {
     background: #c2c2c2;
     color: rgb(0, 0, 0);
}


.fw-sexy {
     font-weight: 600;
     font-size: 18px;
     color: #212121;
}

.fw-20 {
     font-size: 20px;
     color: #212121;
}

.fw-p {
     font-weight: 500;
     font-size: 16px;
     color: #212121;
}

.fw-14 {
     font-weight: 600;
     font-size: 14px;
     color: #212121;
}

.fw-12 {
     font-weight: 600;
     font-size: 12px;
     color: #212121;
}

.fw-10 {
     font-size: 10px;
     font-weight: 600;
     color: #212121;
}

.text-decoration-none:hover {
     color: #505050;
}

.mask:hover {
     opacity: 0.8;
}

.carousel-indicators [data-bs-target] {
     background-color: var(--lilk);
}

.tols {
     background: #000000ab
}

.tols:hover {
     background: #000000cc
}

.fw-hafef {
     font-weight: 600;
}

.profile-active,
.profile-active:hover {
     background: var(--lilk);
     border-radius: 20px;
     color: white !important;
}

.btn-opacity:hover {
     background: var(--lilk);
     border-radius: 20px;
}

.fw-10 {
     font-size: 10px;
}

.Hover-lilk:hover {
     color: var(--lilk) !important;
}

.opacity:hover {
     background: rgb(200 200 200 / 10%);
}


.activs {
     position: relative;
}

.activs::before {
     content: '';
     position: absolute;
     bottom: -6.5px;
     left: 0;
     right: 0;
     height: 1.2px;
     background-color: var(--Hlilk);
     transform-origin: center;
     transform: scaleX(0);
     transition: transform 0.5s ease;
}

.activs:hover::before {
     transform-origin: center;
     transform: scaleX(1);
}

.activs:hover {
     color: var(--Hlilk) !important;
}

a.active{
     color: var(--lilk) !important;
}

a.active::after {
     content: '';
     position: absolute;
     bottom: -6.5px;
     left: 0;
     right: 0;
     height: 1.4px;
     background-color: var(--lilk);
     transform-origin: center;
     transform: scaleX(0);
     transition: transform 0.5s ease;
     transform-origin: center;
     transform: scaleX(1);

}

#search:focus {
     outline: none;
}

#bottom {
     position: absolute;
     bottom: 0;
     left: 50%;
     width: 100%;
     height: 1px;
     opacity: 0;
     background-color: var(--lilk);
     transform-origin: center;
     transform: translate(-50%, 0) scaleX(0);
     transition: all 0.4s ease;
}

#search:focus~#bottom {
     transform: translate(-50%, 0) scaleX(1);
     opacity: 1;
}

.invalid-feedback strong {
     color: #ED3AAB;
     margin-left: 21px;
     font-size: 12px;
     font-weight: 400 !important;
     padding-top: 4px;
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
     box-shadow: 0 0 0 0.25rem #ED3AAB, 0.25;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
     border-color: #ED3AAB !important;
     background-image: url("/images/ui/triangle-exclamation-solid.png");
     background-position: right 16px center;
     background-size: 19px 19px;
     background-repeat: no-repeat;
     padding-right: 44px;
}

.was-validated .form-control:valid, .form-control.is-valid{
     border-color:rgb(222, 222, 222);
     background-image: url("/images/ui/check-solid.png");
     background-position: right 16px center;
     background-size: 19px 19px;
     background-repeat: no-repeat;
     padding-right: 44px;
}

.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
     border-color: #86b7fe  !important;
     box-shadow: 0 0 0 0.25rem rgb(13, 110, 253,   25%) !important;
}
.form-control-lg {
     font-size: 16px !important;
     height: 47px !important;
}


.opacity-hover-100:hover {
     opacity: 1 !important;
}

.dropdown-item:focus, .dropdown-item:hover {
     color: white !important;
     background-color: var(--lilk) !important;
}

.border-lilk {
     border-color: var(--lilk) !important;
}
 
.form-check-input{
     border-color: #000000 !important;
}
   
textarea , input{opacity:1 !important;}
textarea::-webkit-input-placeholder , input::-webkit-input-placeholder {
     opacity: 0.3 !important; /*Change the opacity between 0 and 1*/
}
   
.active-link-side{
     text-decoration: none;
     color: var(--lilk);
     border-left: 2px solid var(--lilk) !important;
}

.link-side{
     text-decoration: none;
     border-left: 2px solid rgba(255, 255, 255, 0);
}

.active-link-side:hover , .link-side:hover{
     text-decoration: none;
     color: var(--Hlilk);
}

.disabled{
     color: #70707054;
}

/* عند تحديد الراديو */
input[type="radio"].form-check-input:checked {
     outline: solid 2px var(--lilk);
     padding: 4px !important;
     border: white 1.5px solid !important; 
     background-color: var(--lilk);
     --bs-form-check-bg-image: unset !important;
 }
 
 .form-check-input[type=checkbox]{
     border-radius: 2px !important;
}
/* عند تحديد الشيك بوكس */
input[type="checkbox"].form-check-input:checked {
     outline: solid 1px var(--lilk);
     border: var(--lilk) 1px solid !important; 
     background-color: var(--lilk);
}

.form-check-input:focus{
     box-shadow: 0 0 0 0.25rem #7c3aed5b;
}