@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
html{
     background: transparent;
     min-height: 100%;
     margin: 0;
     padding: 0;
     color: auto;
}

 body {
         font-family: 'Tajawal';
         direction:rtl;
         background: transparent;
         //background: linear-gradient(140deg, #C02335 0%, #802B6E 90% 100%);
         min-height: 100%;
         margin: 0;
         padding: 0;
         text-align: initial;
    }
     a:link{
         text-decoration: none;
    }
.row{
         padding: 15px;
}
.error{
         width: 100%;

}
.error .alert  {
margin-top: 6px;
    padding: 2px;
}
     .stats{
         border-radius: 0.5rem;
         padding: 5px;
         text-align: right;
         margin:auto;
       margin-top:3px;
         display: none;
font-size: 0.8rem;

    }
     .table{
         border-radius: 0.5rem;
         width: 100%;
font-size: 0.8rem;
         padding: 10px;
         text-align: right;
         margin-bottom: 3px;
	   margin:auto;
       margin-top:3px;
    }
	

 @media (prefers-color-scheme: light) {
    
 body {
         color: #1D1D1D;
    }
     a{
         color: #1D1D1D;
    }
     a:link{

         color: #1D1D1D;
    }

     .stats{
         background: #FFFFFF;
         color: #1D1D1D;

    }

     .table{
         color: #1D1D1D;

    }
     .table tr{
         background: #FFFFFF;
    }
     .table tbody, td, tfoot, th, thead, tr{
         color: #1D1D1D !important;
    }
     .stats a{
         color: #DC8A8D;
    }
     #preloader {
         background: #ededed !important;
    }
.form-control {
         background: #d9d9d945;
border: 1px solid #d9d9d945;
         color: #1D1D1D;
}

::placeholder {
         color: #1D1D1D;
  opacity: 0.5;
}


.button {
    position: relative;
    background: #d9d9d945;
    border: 1px solid #d9d9d945;
    color: #1D1D1D;
    border: none;
    padding: 7px;
    width: 100%;
    text-align: center;
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

.button:after {
  content: "";
background: #1D1D1D;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px !important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}

.button:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}



}

 @media (prefers-color-scheme: dark) {
     body {
         color: #ffffff;
    }
     a{
         color: #ffffff;
    }
     a:link{
         color: #ffffff;
    }
     .stats{
         background: #6D7180;
         color: #ffffff;
    }
     .table{
         color: #ffffff;
    }
     .table tr{
         background: #6D7180;
    }
     .table tbody, td, tfoot, th, thead, tr{
         color: #ffffff !important;
    }
     .stats a{
         color: #ffffff;
    }
     #preloader {
         background: #4E5164 !important;
    }
.form-control {
         background: #FFFFFF24;
border: 1px solid #ced4da2e;
 color: #ffffff;
}


.button {
    position: relative;
         background: #FFFFFF24;
border: 1px solid #ced4da2e;
    color: #ffffff;
    border: none;
    padding: 7px;
    width: 100%;
    text-align: center;
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}
.button:after {
  content: "";
background: #1D1D1D;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px !important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}

.button:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

::placeholder {
 color: #ffffff;
  opacity: 0.5;
}
}
 .badys{
     padding: 3px;
}
 .w48{
     // width:48%;
}
 .wall{
     width: 48%;
     float: right;
     text-align: center;
}
 .img-thumbnail{
     padding: 0.25rem;
     border-radius: 1rem;
     max-width: 50px;
     height: auto;
     background: none !important;
     border: none;
     float: right;
}
 .sname{
     font-size: 0.8rem;
}
 .card-body{
     height: 50px;
     text-align: right;
     padding: 0.1rem 0.1rem !important;
}
 .card-description{
     width: 100%;
     padding: 1.25rem;
     float: right;
     display: none;
}
 .clear{
     clear:both;
}
 h2{
     padding: 0.25rem;
     margin:0.25rem;
     font-size: large;
}
 .svgs{
     width: 250px;
     height: 250px;
}
 .imge2{
     background-position:center center;
     background-repeat:no-repeat;
     width:100%;
     height:250px 
}
 .loader, .loader:after {
     border-radius: 50%;
     width: 10em;
     height: 10em;
}
 .loader {
     margin: 60px auto;
     font-size: 10px;
     position: relative;
     text-indent: -9999em;
     border-top: 1.1em solid rgba(255, 255, 255, 0.2);
     border-right: 1.1em solid rgba(255, 255, 255, 0.2);
     border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
     border-left: 1.1em solid #ffffff;
     -webkit-transform: translateZ(0);
     -ms-transform: translateZ(0);
     transform: translateZ(0);
     -webkit-animation: load8 1.1s infinite linear;
     animation: load8 1.1s infinite linear;
}
 @-webkit-keyframes load8 {
     0% {
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
    }
     100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
    }
}
 @keyframes load8 {
     0% {
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
    }
     100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
    }
}
 #loadingDiv {
     position:absolute;
     ;
     top:0;
     left:0;
     width:100%;
     height:100%;
     background:#ffffff00;
}
 .animate-box {
     opacity: 0;
}
 @-webkit-keyframes fadeIn{
     from{
         opacity:0;
         -webkit-transform:translate3d(0,150%,0);
         -ms-transform:translate3d(0,150%,0);
         transform:translate3d(0,150%,0);
    }
     to{
         opacity:1;
         -webkit-transform:translate3d(0,0,0);
         -ms-transform:translate3d(0,0,0);
         transform:translate3d(0,0,0);
    }
}
 @keyframes fadeIn{
     from{
         opacity:0;
         -webkit-transform:translate3d(0,150%,0);
         -ms-transform:translate3d(0,150%,0);
         transform:translate3d(0,150%,0);
    }
     to{
         opacity:1;
         -webkit-transform:translate3d(0,0,0);
         -ms-transform:translate3d(0,0,0);
         transform:translate3d(0,0,0);
    }
}
 @-webkit-keyframes fadeOut{
     from{
         opacity:1;
    }
     to{
         opacity:0;
         -webkit-transform:translate3d(0,-150%,0);
         -ms-transform:translate3d(0,-150%,0);
         transform:translate3d(0,-150%,0);
    }
}
 @keyframes fadeOut{
     from{
         opacity:1;
    }
     to{
         opacity:0;
         -webkit-transform:translate3d(0,-150%,0);
         -ms-transform:translate3d(0,-150%,0);
         transform:translate3d(0,-150%,0);
    }
}
 ::-webkit-input-placeholder{
     color:#828282;
}
 :-moz-placeholder{
     color:#828282;
}
 ::-moz-placeholder{
     color:#828282;
}
 :-ms-input-placeholder{
     color:#828282;
}
 .placeholder{
     color:#828282!important;
}
 input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus input:-webkit-autofill,textarea:-webkit-autofill,textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus{
     -webkit-text-fill-color:#e3b523;
     transition:background-color 5000s ease-in-out 0s;
}
 #preloader{
     position:fixed;
     top:0;
     right:0;
     left:0;
     bottom:0;
     background:#ffffff00;
     z-index:800;
     height:100%;
     width:100%;
     display:table;
}
 .no-js #preloader,.oldie #preloader{
     display:none 
}
 #loader{
     display:table-cell;
     text-align:center;
     vertical-align:middle;
}
 .line-scale-pulse-out>div{
     width:4px;
     height:35px;
     border-radius:2px;
     margin:2px;
     -webkit-animation-fill-mode:both;
     animation-fill-mode:both;
     display:inline-block;
     -webkit-animation:line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(.85,.25,.37,.85);
     animation:line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(.85,.25,.37,.85);
}
 .line1{
     background-color:#468d80;
}
 .line2{
     background-color:#2b6d7c;
}
 .line3{
     background-color:#7c2b2b;
}
 .line4{
     background-color:#e3b523;
}
 .line-scale-pulse-out>div:nth-child(2),.line-scale-pulse-out>div:nth-child(4){
     -webkit-animation-delay:-0.4s!important;
     animation-delay:-0.4s!important;
}
 .line-scale-pulse-out>div:nth-child(1),.line-scale-pulse-out>div:nth-child(5){
     -webkit-animation-delay:-0.2s!important;
     animation-delay:-0.2s!important;
}
 @-webkit-keyframes line-scale-pulse-out{
     0%{
         -webkit-transform:scaley(1);
         transform:scaley(1) 
    }
     50%{
         -webkit-transform:scaley(.4);
         transform:scaley(.4) 
    }
     100%{
         -webkit-transform:scaley(1);
         transform:scaley(1) 
    }
}
 @keyframes line-scale-pulse-out{
     0%{
         -webkit-transform:scaley(1);
         transform:scaley(1) 
    }
     50%{
         -webkit-transform:scaley(.4);
         transform:scaley(.4) 
    }
     100%{
         -webkit-transform:scaley(1);
         transform:scaley(1) 
    }
}
 .back{
     position: fixed;
     top: 20px;
     left: 20px;
     width: 50px;
     height: 50px;
     border: none;
     border-radius: 50%;
     font-size: 18px;
     color: #fff;
     background-color: #000;
     outline: none;
     cursor: pointer;
     transition: .4s linear;
     padding: 15px;
}
 .back:hover{
     transform: rotate(180deg);
}

.forms{
display: none;
}

.answers
{
border-radius: 0.25rem;
text-align: center;
}


 .caption {
       min-height: 60px;
    margin-bottom: 11px;
font-size: 0.8rem;
}
 .caption .caption-content {
  color: #fff;
margin: auto;
}
 .caption a{
  color: #fff;
}
.caption .caption-content h2, .caption .caption-content .h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
}
 .caption .caption-content p {
  font-weight: 300;
  font-size: 1.2rem;
}


.color1{
background-color:#0193db;
margin-bottom: 10px;
    padding: 10px;
border-radius: 0.25rem;
}
.color2{
background-color:#f3a62b;
margin-bottom: 10px;
    padding: 10px;
border-radius: 0.25rem;
}
.color3{
background-color:#8a0f65;
margin-bottom: 10px;
    padding: 10px;
border-radius: 0.25rem;
}
.color4{
background-color:#6cdde3;
margin-bottom: 10px;
    padding: 10px;
border-radius: 0.25rem;
}
.uls{
padding: 0;
    margin: 0;
}
.uls li{
padding: 0;
    margin: 0;
    list-style: none;
}
.raw2{
padding: 5px;
}


.trs{
text-align: left;
    direction: ltr;
}