body {
	font-family: font-1;
    font-size: 14px;
    line-height: 1.42857143;
    color: #000;
	/*background: rgb(238,174,202);*/
	background: radial-gradient(circle, #a7fff3 0%, #4fc5cb 100%);
	/* #f8a8af;*/
	/*#fa4251;*/
}

.form-horizontal .form-group
{
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
}
  
  .has-float-label input:focus,
  .has-float-label textarea:focus, 
  .has-float-label select:focus{
	border-color: #2CA8B3;
	box-shadow: none;
  }
  .has-float-label .form-control:placeholder-shown:not(:focus) + * {
	font-size: 8px;
	margin-top: 18px;
	
  }

.nav-header{
	background-color: #fff;
    border-radius: 0;
	font-family: font-1;
}

.title-page{
	font-family: font-1;
    font-size: 60px;
    color: #363034;
    line-height: 1.2;
    text-transform: uppercase;
    margin: 60px;
	text-align: center;
}
input, label {
    display:block;
}
.control-label{
	font-size: 12px;
}

@font-face {
	font-family: font-1;
	src: url('fonts/font1/7.otf');
}

@font-face {
	font-family: font-2;
	src: url('fonts/font2/font2.otf');
}

@font-face {
	font-family: font-3;
	src: url('fonts/newfont.otf');
}

.subscriptiontbl td,th{
	border: 1px solid #000000;
	padding:10px;
}

.text-ar{
	direction: rtl;
    font-family: tahoma;
    text-align: right;
}

td, th{
	padding: 10px;
    border: 1px solid #000000;
}

.card_form{
    color: #505050;
}

.card_form .wpwl-control-expiryform{
  margin: 0px;
}



.join_btn{
   	font-family: font-1;
	font-size: 24px;
	margin-bottom: 18px;
	width: 400px;
	color: #363034;
	background: transparent;
	border: 2px solid #363034;
	border-radius: 5px;
	padding: 20px;
	font-weight: 600;
	display: inline-block;
	line-height: 1.42857143;
	text-align: center;
}

.join_btn:hover, .join_btn:focus{
	background: #363034;
    text-decoration: none;
    color: #4efff7
}

.join_btn_ar{
	font-family: 'Tajawal', sans-serif;
	font-weight: 500;
}

.signup_ar{
	font-family: 'Tajawal';
	font-weight: 500;    
	float: right !important;
}

.register-btn{
    float: right;
	margin-top: 20px;
}

.signup_ar .register-btn{
    float: left!important;
}

.drop-box {
    background: #F8F8F8;
    border: 5px dashed #DDD;
    width: 180px;
    height: 90px;
	text-align: center;
	padding-top: 10px;	
}

.signup-mobile{
    float: left;
	padding: 10px 16px 10px 13px;
    margin-top: 15px;
    margin-left: 13px;
    background: #ddd;
    font-size: 14px;
    border: none;
	width: auto;
}

  /* ==========================================================================
	 #GRID
	 ========================================================================== */
  .row {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
  }
  
  .row-space {
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-moz-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
  }
  
  .col-2 {
	width: -webkit-calc((100% - 60px) / 2);
	width: -moz-calc((100% - 60px) / 2);
	width: calc((100% - 60px) / 2);
  }
  
  @media (max-width: 767px) {
	.col-2 {
	  width: 100%;
	}
  }
  
  /* ==========================================================================
	 #BOX-SIZING
	 ========================================================================== */
  /**
   * More sensible default box-sizing:
   * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
   */
  html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
  }
  
  * {
	padding: 0;
	margin: 0;
  }
  
  *, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
  }
  
  /* ==========================================================================
	 #RESET
	 ========================================================================== */
  /**
   * A very simple reset that sits on top of Normalize.css.
   */
  body,
  h1, h2, h3, h4, h5, h6,
  blockquote, p, pre,
  dl, dd, ol, ul,
  figure,
  hr,
  fieldset, legend {
	margin: 0;
	padding: 0;
  }
  
  /**
   * Remove trailing margins from nested lists.
   */
  li > ol,
  li > ul {
	margin-bottom: 0;
  }
  
  /**
   * Remove default table spacing.
   */
  table {
	border-collapse: collapse;
	border-spacing: 0;
  }
  
  /**
   * 1. Reset Chrome and Firefox behaviour which sets a `min-width: min-content;`
   *    on fieldsets.
   */
  fieldset {
	min-width: 0;
	/* [1] */
	border: 0;
  }
  
  button {
	outline: none;
	background: none;
	border: none;
  }
  
  /* ==========================================================================
	 #PAGE WRAPPER
	 ========================================================================== */
  .page-wrapper {
	min-height: 100vh;
  }
  
 
  h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
  }
  
  h1 {
	font-size: 36px;
  }
  
  h2 {
	font-size: 30px;
  }
  
  h3 {
	font-size: 24px;
  }
  
  h4 {
	font-size: 18px;
  }
  
  h5 {
	font-size: 15px;
  }
  
  h6 {
	font-size: 13px;
  }
  

  /* ==========================================================================
	 #SPACING
	 ========================================================================== */
  .p-t-100 {
	padding-top: 100px;
  }
  
  .p-t-180 {
	padding-top: 180px;
  }
  
  .p-t-20 {
	padding-top: 20px;
  }
  
  .p-t-30 {
	padding-top: 30px;
  }
  
  .p-b-100 {
	padding-bottom: 100px;
  }
  
  /* ==========================================================================
	 #WRAPPER
	 ========================================================================== */
  .wrapper {
	margin: 0 auto;
  }

  .help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373;
	font-size: 12px;
}
  
  .wrapper--w980 {
	max-width: 960px;
  }
  
  .wrapper--w680 {
	max-width: 680px;
  }
  
 
  /* ==========================================================================
	 #BUTTON
	 ========================================================================== */
  .btn {
	line-height: 40px;
	padding: 0 25px;
	cursor: pointer;
	color: #000;
	font-family: "Roboto", "Arial", "Helvetica Neue", sans-serif;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	transition: all 0.4s ease;
	font-size: 14px;
	font-weight: 700;
	margin-left: 20px;
	
  }
  
  .btn--radius {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
  }
  
  
  
  /* ==========================================================================
	 #DATE PICKER
	 ========================================================================== */
  td.active {
	background-color: #2c6ed5;
  }
  
 
  
  .table-condensed td, .table-condensed th {
	font-size: 14px;
	font-family: "Roboto", "Arial", "Helvetica Neue", sans-serif;
	font-weight: 400;
  }

  legend{ color:#000000; padding-bottom:15px;}
  .ar_homepg legend{ color:#000000; padding-bottom:30px;}
  /* ==========================================================================
	 #FORM
	 ========================================================================== */
  input {
	margin: auto;
	width: 50%;
	outline: none;
	margin-top: 15px;
	border: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	font-size: 14px;
	font-family: inherit;
  }
  input[type="checkbox"], input[type="radio"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    width: 15;
}
  .wpwl-form.wpwl-form-card input {
    margin-top: 0!important;
    margin-left: 0!important;
  }

  label{
	margin-top: 15px;
	display:block;
  }
  
  /* input group 1 */
  /* end input group 1 */
  .input-group {
	position: relative;
/*	border-bottom: 1px solid #e5e5e5;*/
  }
  
  .input-icon {
	position: absolute;
	font-size: 18px;
	color: #ccc;
	right: 8px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	cursor: pointer;
  }
  
  .input--style-2 {
	padding: 9px 0;
	color: #666;
	font-size: 12px;
	font-weight: 500;
  }
  
  .input--style-2::-webkit-input-placeholder {
	/* WebKit, Blink, Edge */
	color: #808080;
  }
  
  .input--style-2:-moz-placeholder {
	/* Mozilla Firefox 4 to 18 */
	color: #808080;
	opacity: 1;
  }
  
  .input--style-2::-moz-placeholder {
	/* Mozilla Firefox 19+ */
	color: #808080;
	opacity: 1;
  }
  
  .input--style-2:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	color: #808080;
  }
  
  .input--style-2:-ms-input-placeholder {
	/* Microsoft Edge */
	color: #808080;
  }
  

  .has-float-label{display:block;position:relative}
  .has-float-label label,.has-float-label>span
  
  { margin-left: 30px;
	  position:absolute;cursor:text;font-size:12px;opacity:1;-webkit-transition:all .2s;transition:all .2s;top:-.5em;left:.75rem;z-index:3;line-height:1;padding:0 1px}
  .has-float-label label::after,.has-float-label>span::after{content:" ";display:block;position:absolute;background:#fff;height:2px;top:50%;left:-.2em;right:-.2em;z-index:-1}
  .has-float-label .form-control::-webkit-input-placeholder{opacity:1;-webkit-transition:all .2s;transition:all .2s}
  .has-float-label .form-control::-moz-placeholder{opacity:1;transition:all .2s}
  .has-float-label .form-control:-ms-input-placeholder{opacity:1;transition:all .2s}
  .has-float-label .form-control::placeholder{opacity:1;-webkit-transition:all .2s;transition:all .2s}
  .has-float-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder{opacity:0}
  .has-float-label .form-control:placeholder-shown:not(:focus)::-moz-placeholder{opacity:0}
  .has-float-label .form-control:placeholder-shown:not(:focus):-ms-input-placeholder{opacity:0}
  .has-float-label .form-control:placeholder-shown:not(:focus)::placeholder{opacity:0}
  .has-float-label .form-control:placeholder-shown:not(:focus)+*
  {font-size: 12px;
    font-weight: bold;

	text-align: center;
    opacity: .5;
    top: .6em;}
  .input-group .has-float-label{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;margin-bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.input-group
   .has-float-label .form-control{width:100%;border-radius:.25rem}.input-group 
   .has-float-label:not(:last-child),.input-group .has-float-label:not(:last-child)
	.form-control{border-bottom-right-radius:0;border-top-right-radius:0;border-right:0}
	.input-group .has-float-label:not(:first-child),
	.input-group .has-float-label:not(:first-child)
	 .form-control{border-bottom-left-radius:0;border-top-left-radius:0}


  /* ==========================================================================
	 #SELECTl
	 ========================================================================== */
 	
	 select  { font-size: 1.3em;
	   -webkit-appearance: none;
	   -moz-appearance: none;
		appearance: none;
		margin-top: 15px;
		color: white;
		outline: none;
	  }


	  #el01 option {width:20em; font-weight:100%; font-size: 18px;} /* Width */

	  .signup_ar .select-css {
		text-align: left;
		color: #444;
		font-family: 'Tajawal';
	  }
	  .signup_ar .col-md-3{
		width: 27%;
	  }
	  .signup_ar .col-md-4{
		width: 40%;
	  }
	  .signup_ar .card-bill{
		width: 206px;
	  }
	  .signup_ar .select-css>option{
		font-family: sans-serif!important;
	  }

	  /* class applies to select element itself, not a wrapper element */
	  .m-4{
		margin-left:4em;
	  }
	  .signup_ar .m-4{
		margin-right:4em;
	  }
.select-css {
    display: block;
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 200;
    color: #444;
    line-height: 1.3;
    padding: .8em 0em .5em .5em;
    width: 100%;
    max-width: 100%; /* useful when width is set to anything other than 100% */
    box-sizing: border-box;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: .5em;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
        for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
        
    */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    background-repeat: no-repeat, repeat;
    /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
    background-position: right .7em top 50%, 0 0;
    /* icon size, then gradient */
    background-size: .65em auto, 100%;
}
/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
    display: none;
}
/* Hover style */
.select-css:hover {
    border-color: #888;
}
/* Focus style */
.select-css:focus {
    border-color: #aaa;
    /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    box-shadow: 0 0 0 3px -moz-mac-focusring;
    color: #222; 
    outline: none;
}


/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {
    background-position: left .7em top 50%, 0 0;
    padding: .6em .8em .5em 1.4em;
}

/* Disabled styles */
.select-css:disabled, .select-css[aria-disabled=true] {
    color: graytext;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}

.select-css:disabled:hover, .select-css[aria-disabled=true] {
    border-color: #aaa;
}

  /* ==========================================================================
	 #TITLE
	 ========================================================================== */
  
  .title {
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 37px;
  }
  
  /* ==========================================================================
	 #CARD
	 ========================================================================== */
  .card {
	overflow: hidden;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background: #fff;
  }
  
  .card-2 {
	-webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
	box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	width: 100%;
	display: table;
  }
  
  .card-2 .card-heading {
	background: url("/assets/img/healthcare-2.jpg") top left/auto no-repeat;
	width: 30%;
	display: table-cell;
	background-size: 100% 100%;
	background-position: center center; 

  }
  .card-2 .card-body {
	display: table-cell;
	padding: 80px 90px;
	padding-bottom: 88px;
	float: left;
  }
  
  #nav-default-dark {
	background-color: #222;
    border:0;
  }

  .navlinks-dark > li > a {
    color: #fff!important;
  }

  @media (max-width: 767px) {
	.card-2 {
	  display: block;
	}
	.card-2 .card-heading {
	  width: 100%;
	  display: block;
	  padding-top: 300px;
	  background-position: left center;
	  background-size:  100% 100%;
	}
	.card-2 .card-body {
	  display: block;
	  padding: 60px 50px;
	}
  }
  

  
  .title {
	color: grey;
	font-size: 18px;
  }
  
  * {
	box-sizing: border-box;
  }
  
  /* Create three columns of equal width */
  .columns {
	width: 100%;
	padding: 15px 100px 15px 100px;
  }
  
  /* Style the list */
  .price {
	list-style-type: none;
	border: 1px solid #eee;
	margin: 0;
	padding: 0;
	-webkit-transition: 0.3s;
	transition: 0.3s;
  }
  
  /* Add shadows on hover */
  .price:hover {
	box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
  }
  
  /* Pricing header */
  .price .header {
	background-color: #111;
	color: white;
	font-size: 14px;
  }
  
  /* List items */
  .price li {
	border-bottom: 1px solid #eee;
	padding: 14px;
	text-align: center;
  }
  
  /* Grey list item */
  .price .grey {
	background-color: #eee;
	font-size: 20px;
  }
  
  /* The "Sign Up" button */
  .button {
	background-color: #4CAF50;
	border: none;
	color: white;
	padding: 10px 25px;
	text-align: center;
	text-decoration: none;
	font-size: 18px;
  }
  
  /* Change the width of the three columns to 100%
  (to stack horizontally on small screens) */
  @media only screen and (max-width: 600px) {
	.columns {
	  width: 100%;
	}
  }
  
/*  a {
	text-decoration: none;
	font-size: 22px;
	color: black;
  }*/
  

/*
  
@media (max-width: 480px) {
    .container {
		background-image: url(/assets/img/medicine_b.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left center; 

    }
}

@media (min-width: 481px) and (max-width: 1024px) {
    .container {
		background-image: url(/assets/img/medicine_b.png);
		background-size: contain;
		background-repeat: no-repeat;
    }
}

@media (min-width: 1025px) {
    .container {
		background-image: url(/assets/img/medicine_b.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		 
   }
}
*/

@media (max-width: 767px) {
	.card-2 {
	  display: block;
	}
	.card-2 .card-heading {
	  width: 100%;
	  display: block;
	  padding-top: 300px;
	  background-position: left center;
	}
	.card-2 .card-body {
	  display: block;
	  padding: 60px 50px;
	}

}