@font-face {
  font-family: 'Rubik';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Rubik-LightItalic.ttf") format('truetype');
}
/* latin */
@font-face {
  font-family: 'Rubik';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Rubik-Italic.ttf") format('truetype');
}
/* latin-ext */
@font-face {
  font-family: 'Rubik';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Rubik-MediumItalic.ttf") format('truetype');
}
/* latin */
@font-face {
  font-family: 'Rubik';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Rubik-BlackItalic.ttf") format('truetype');
}
/* latin */
@font-face {
  font-family: 'Rubik';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Rubik-SemiBoldItalic.ttf") format('truetype');
}

/* latin-ext */
@font-face {
  font-family: 'Rubik';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/Rubik-BlackItalic.ttf") format('truetype');
}
/* latin */
@font-face {
  font-family: 'Rubik';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/Rubik-ExtraBoldItalic.ttf") format('truetype');
}
/* latin-ext */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Rubik-Light.ttf") format('truetype');
}
/* latin */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Rubik-Regular.ttf") format('truetype');
}
/* latin-ext */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Rubik-Black.ttf") format('truetype');
}
/* latin */
@font-face {
  font-family: 'Rubik';
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Rubik-Medium.ttf") format('truetype');
}
/* latin-ext */
@font-face {
  font-family: 'Rubik';
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Rubik-SemiBold.ttf") format('truetype');
}
/* latin */
@font-face {
  font-family: 'Rubik';
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Rubik-Bold.ttf") format('truetype');
}

@font-face {
  font-family: 'Rubik';
  font-weight: 900;
  font-display: swap;
  src: url("fonts/Rubik-ExtraBold.ttf") format('truetype');
}
html{width: 100%;}
body{
	font-size: 15px;
  font-weight: 400;
	padding:0px;
	margin:0px;
	overflow-x: hidden;
	font-family:  'Rubik'; /*'Raleway' , */
  background-color: #040404;
}
strong { font-weight: 600; }
h1, h2 { margin-top: 10px; font-size: 38px; font-weight: 300; color: #555; line-height: 50px; }
h3 { font-size: 22px; font-weight: 300; color: #555; line-height: 30px; }
img { max-width: 100%; }
a { color:#673496; text-decoration: none; transition: all .3s; }
a:hover, a:focus { color: #a365bc; border: 0; text-decoration: none; }
.shadow-sm {
    box-shadow: 0 .05rem .1rem rgba(0,0,0,.075) !important;
}
header{
  position: fixed; top:0;width: 100%;
  transition: all .5s;
  z-index: 9999;
  background-color: transparent;
}
.header-logo{text-align: center; width: 100%;}
.logo{width:70%; margin: auto !important; max-width: 200px; display: block;}
.logo-larger{width:80%; margin: auto !important; max-width: 300px; display: block;}

.getstarted{  text-align: right;padding: 0px;margin: 0px;}
.getstarted a{
  background: rgb(239 127 11);
    background: linear-gradient(90deg, rgb(239 127 11) 0%, rgb(201 0 75) 100%);
    padding: 10px 16px;
    color: #FFF;
    display: inline-block;
    font-weight: 600;
    font-size: 13px;
    width: 100px;
    text-align: center;
    margin-top: 4px;
    border-radius: 15px;
}
.arrow_up{ position: fixed; left:5%; bottom: 10px;}
.arrow_up img {width: 45px;}
.padding-no{padding: 0px; margin: 0px;}
.hr{
  background-color: #A2E2FF;
  height: 1px;    border:none;
  width: 80%;     margin: 30px auto 40px;
}
.margin-bottom{margin-bottom: 200px;}

.breadcrumb{
  background-color: transparent;
  margin-top: 36px;
}
ol.breadcrumb{
  background-color: #f7f7f7;
border: none;
border-radius: 0px;
}
.breadcrumb a{ font-weight: 600; color:#333; font-size: 15px;}
.breadcrumb-item + .breadcrumb-item::before {color:#333; font-weight: 600;}
.breadcrumb .active a{ font-weight: 600; color:#A2E2FF; font-size: 15px;}

.title-page{
  margin: auto;           margin-top: 85px;
  text-align: center;     width: 80%;
}
.title-page h1:before{
  content:"";  	width:40px;	       top:0px;
	height:2px; 	background-color:#673496;	display: block;		position: relative;
	position: relative;margin: auto;
  margin-bottom: 10px;
}
.title-page h1{color:#000000; font-weight: 400; 
  font-size: 28px; margin-bottom: 50px;}
.title-page h1 b{
  color: #ee7c11;
}
.title-page h3{color: #ACDFF6;
    font-weight: 500;         font-size: 14px;
    margin-left: 45%;         margin-bottom: 10px;
    width: 50%;               text-align: left;
    line-height: 24px;
    margin-top: -15px;
}
.title-page hr{background-color: #EEEEEE; border: none; height: 0px; display: block; width:60%; margin: auto; margin-bottom: 0px;}
.page-forms{  padding: 0px 0px; }
.Forms{
  background-color: #F3F8FB;
  border: 1px solid #DBF4FF;
  padding-top:20px;
}
.forms-dark{
  background-color: #040404;
  border:none;
}
.forms-white{
  background-color: #FFF;
  border:none;
}
.forms-blue{
  background-color: #9AE3FF;
  border:none;
}
.Forms form{width: 80%; margin: auto; max-width: 500px;}
.Forms .message{  text-align: center;}
.Forms .message img{width: 100px; margin-bottom: 20px;}
.Forms .message h2{ color:#673496; font-weight: 600; 
  text-align: center; 
  font-size: 22px;
}
.Forms .message p{
  color:#C9C9C9; 
  font-size: 15px; 
  width: 80%; 
  margin: auto; 
  font-weight: 600; 
  margin-top: 20px; 
  text-align: center;
}
.Forms label{  
  color:#8b8b8b; 
  font-weight: normal; 
  font-size: 14px; 
  text-align: left; 
  width: 100%; 
  display: block;
  margin: auto;
  margin-bottom: 10px;
}
.Forms p{color:#707070; 
  text-align: justify; 
  font-weight: 600;
font-size: 13px;
line-height: 28px;
display: block;
width: 90%;
margin: auto;
}
.data .Forms label{
  color:#000000; text-align: right;
}
.data .Forms .download{
  border:2px solid #673496;
  text-align: center; padding: 6px 20px;
  width: auto;        display: inline-block;
  font-weight: 600;   font-size: 12px;
}
.data .Forms .download img{margin-left:10px; }
.Forms input[type="text"] , 
.Forms textarea , 
.Forms select , 
.Forms input[type="password"]{
  border:1px solid #3f3f3f;
  background-color: #1e1e1e;
  width: 80%;
  padding: 12px 15px;
  margin-bottom: 10px;
  background-position: 3% center; 
  background-repeat: no-repeat; 
  background-size: 19px;
  font-size: 13px;
  font-weight: 400;
  margin: auto;
  display: block;
  border-radius: 15px;
  margin-bottom: 20px;
  color:#FFF;
}
.Forms input[type="password"]:focus{
  background-color: #1e1e1e;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.Forms .name{ background-image: url('../img/ic_user.png');      padding-left: 40px !important; }
.Forms .email{ background-image: url('../img/ic_email.png');    padding-left: 40px !important;}
.Forms .password{ background-image: url('../img/ic_password.png');  padding-left: 40px !important; }
.Forms .phone{ background-image: url('../img/ic_phone_2.png');    padding-left: 40px !important; }
.Forms textarea{ min-height: 100px; width: 100%;}
.Forms input[type="submit"]{
  border:1px solid #673496;
  background: #673496;
  background: linear-gradient(90deg, #673496 0%, #673496 100%);
  padding: 10px 45px;       color: #FFF;
  display: inline-block;    font-weight: 400;
  font-size: 15px;          text-align: center;
  margin: auto;
  margin-top: 40px;
  margin-bottom: 40px;
  width: 80%;
  border-radius: 15px;
}
.form_a_lnk{
  border:1px solid #673496;
  background: #673496;
  background: linear-gradient(90deg, #673496 0%, #673496 100%);
  padding: 10px 45px;       color: #FFF !important;
  display: inline-block;    font-weight: 500;
  font-size: 13px;          text-align: center;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 40px;
  border-radius: 14px;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}
.Forms .txt-blue{  color:#673496;  font-weight: 600;}
.Forms .green{
  border:1px solid rgb(113,243,104) !important;
  background: rgb(113,243,104) !important;
  background: linear-gradient(90deg, rgba(113,243,104,1) 0%, rgba(42,187,32,1) 100%) !important;
}
.Forms .btn_drak{
  border:1px solid #323232;
  background: #171717 !important;
  padding: 10px 45px;       color: #FFF;
  display: inline-block;    font-weight: 700;
  font-size: 15px;          text-align: center;
  margin: auto;
  margin-top: 40px;
  margin-bottom: 40px;
  width: 100%;
}
/* IE11 hide native button (thanks Matt!) */
select::-ms-expand {display: none;}
.Forms select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #FFF;
  background-image: url("../img/down-arrow.png"); /* url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>"); */
  background-repeat: no-repeat;
  background-position-x: 95%;
  background-position-y: center;
  background-size: 16px;
}

.input-file-container {
  position: relative;
  margin-bottom: 50px;
}
.js .input-file-trigger {
  cursor: pointer;
  margin:auto;
  display: block;
  padding: 16px 45px;
  border:1px solid #EEEEEE;
  background-color:#FFF;
  padding:13px 45px 13px 15px;
  outline:none;
  margin-bottom:20px;
  width:100%;
  font-weight:bold;
  text-align:left;
  font-size: 11px;
  transition: all .4s;
  cursor: pointer;
  background-image:url("../img/ic_attach.png");
  background-position:95% center;
  background-repeat:no-repeat;
  color:#929292;
}
.js .input-file {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  opacity: 0;
  padding: 14px 0;
  cursor: pointer;
}
.js .input-file:hover + .input-file-trigger,
.js .input-file:focus + .input-file-trigger,
.js .input-file-trigger:hover,
.js .input-file-trigger:focus {
   background: #673496;
   color: #333;
   background-image:url("../img/ic_attach.png");
   background-position:95% center;
   background-repeat:no-repeat;
   cursor: pointer;
}

.file-return {
  margin: 0;
}
.file-return:not(:empty) {
  margin: 1em 0;
}
.js .file-return {
  font-style: italic;
  font-size: .9em;
  font-weight: bold;
}
.js .file-return:not(:empty):before {
  content: "الملفات المختاره: ";
  font-style: normal;
  font-weight: normal;
}
.err_input{
  color:#000;
  border:1px solid #ca0000 !important;
}
.err_p{
  color:#ca0000 !important;
  padding: 0px;
  text-align: center;
  margin: 0px !important;
}

.bg_login_team{
  background-image: url("../img/bg-login-team.webp");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 999999999;
}

.bg_register_team{
  background-image: url("../img/bg-register-team.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 999999999;
}

.bg_login_admin{
  background-image: url("../img/bg-login-admin.webp");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 999999999;
}

.bg_login_financial{
  background-image: url("../img/bg-login-team.jpg");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  z-index: 999999999;
}

.forms-dark .title-page h1 {
    color: #eae7e7 !important;
}
@media (max-width: 480px) {
  .logo {padding-top: 50px;padding-bottom: 50px;}
}

.en{
  direction:ltr;
  text-align:left;
}
.en .Forms label{
  text-align: left;
}
.ar{
  direction:rtl;
  text-align:right;
}
.ar label{
  text-align: right !important;
}
.ar .forgetpass{text-align: left !important;}

.label-img{
  padding: 20px 30px;
  width: 120px !important;
  border: 2px solid #3f3f3f;
  border-radius: 15px;
  margin-bottom: 0px !important;
  position: relative;
  margin-top: 20px !important;
  cursor: pointer;
}
.label-img img{
  width: 70px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.hidden{
  display: none;
}
.ico-upload{
  position: absolute;
  float: right;
  top: -10px;
  right: 0;
  background-color: #f8f8f8;
  padding:8px;
  border-radius: 10px;
  width: 40px !important;
}
.small-center{
  font-size: 12px;
    color: #898989;
    margin: auto;
    display: block;
    text-align: center;
    font-weight: 300;
    margin-bottom: 15px;
    margin-top: 5px;
}

.p_err{
  color:#cb1d4d !important;
  text-align: center !important;
  display: block;
  width: 100%;
  padding: 0px;
  border-radius: 15px;
  margin-top: 0px;
}
.p_agree{
  color:#0a6c45;
  text-align: center;

  display: block;
  background-color: #e3f5d4;
  width: 100%;
  padding: 10px;
  border-radius: 15px;
  margin-top: 20px;
  font-size: 12px;
}

/* Reem */
/* Customize the label (the container) */
.contain_radio {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  border: 1px solid #3f3f3f !important;
  background-color: #1e1e1e !important;
  padding: 10px 40px !important;
  border-radius: 15px !important;

}

/* Hide the browser's default radio button */
.contain_radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.contain_radio .checkmark {
  position: absolute;
  top: 7px;
  left: 8px;
  height: 25px;
  width: 25px;
  background-color: #585858;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.contain_radio:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.contain_radio input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.contain_radio .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.contain_radio input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.contain_radio .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

.contain_check {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  border: 1px solid #3f3f3f !important;
  background-color: #1e1e1e !important;
  padding: 10px 40px !important;
  border-radius: 15px !important;
}

/* Hide the browser's default checkbox */
.contain_check input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.contain_check .checkmark {
  position: absolute;
  top: 7px;
  left: 10px;
  height: 25px;
  width: 25px;
  background-color: #585858;
  border-radius: 6px;
}

/* On mouse-over, add a grey background color */
.contain_check:hover input ~ .checkmark {
  background-color: #585858;
}

/* When the checkbox is checked, add a blue background */
.contain_check input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.contain_check .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  border-radius: 6px;
}

/* Show the checkmark when checked */
.contain_check input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.contain_check .checkmark:after {
  left: 10px;
  top: 7px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  border-radius: 6px;
}

@media (min-width: 768px) and (max-width: 991px) {
  .forms-dark {
    height: auto !important;
  }
  .bg_register_team{
    background-position: top center;
    height: 300px !important;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .forms-dark {
    height: auto !important;
  }
  .bg_register_team{
    background-position: top center;
    height: 300px !important;
  }
}

@media (max-width: 479px) {
  .forms-dark {
    height: auto !important;
  }
  .bg_register_team{
    background-position: top center;
    height: 300px !important;
  }
}


.p_err{
  color:#cb1d4d;
  text-align: center;
  display: block;
  background-color: #e3f5d4;
  width: 100%;
  padding: 10px;
  border-radius: 15px;
  margin-top: 20px;
}
.p_agree{
  color:#0a6c45;
  text-align: center;

  display: block;
  background-color: #e3f5d4;
  width: 100%;
  padding: 10px;
  border-radius: 15px;
  margin-top: 20px;
  font-size: 12px;
}