@font-face {
	font-family: joy-bold;
	src: url("../fonts/Joy-Bold.ttf"); }
  @font-face {
	font-family: joy-heavy;
	src: url("../fonts/Joy-Heavy.ttf"); }
  @font-face {
	font-family: joy-medium;
	src: url("../fonts/Joy-Medium.ttf"); }
  html, body {
	width: 100%;
	height: 100%; }

  body {
	padding: 0;
	font-family: joy-medium !important;
	/* font-family: 'Courier New', Courier, monospace; */
	background-image: url("../img/bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
  }

  a:hover{
	  text-decoration: none !important;
  }

  .btn:hover{
	  cursor:pointer;
  }

  .hand-cursor:hover {
	cursor: pointer; }

  .text-white{
	  color:#fff !important;
  }

  .border-bottom-white{
	  border-bottom:1px solid #fff !important;
  }
  .btn-primary { 
	  background :#ff9000;
	  border-radius: 60px;
	  border:1px solid #ff9000;
	  width:154px;
	  font-family: joy-bold;
	  font-size: 16px;
	  padding:9px 5px 9px;
  }


  .btn-primary:hover{
	  background:#ff9000;
	  border:1px solid #ff9000;
  }

  .btn-info{
	  background-color:#3cb2b2;
	  border:1px solid #3cb2b2;
	  border-radius: 60px;
	  width:159px;
	  padding: 9px 6px 8px;
	  font-family: joy-bold;
	  padding: 9px 5px 9px;
  }

  .btn-info:hover {
	  background-color: #3cb2b2;
	  border:1px solid  #3cb2b2;

  }

  .btn-info-outline{
	  background-color: #fff;
	  border:1px solid#3cb2b2;
	  border-radius: 60px;
	  width:159px;
	  padding: 9px 6px 8px;
	  color:#019ed5;
	  margin-right: 5px;
  }

  .btn-info-outline:hover{
	  background-color:#3cb2b2;
	  color:#fff;
  }

	  .btn-primary-outline{
		  background-color: #fff;
		  border:1px solid #ff9000;
		  border-radius: 60px;
		  width:159px;
		  padding: 9px 6px 8px;
		  color :#ff9000;
	  }

	  .btn-primary-outline:hover{
		  background-color: #ff9000;
		  color:#fff;
	  }

  .more-info{
	  width: 119px !important;
	  padding: 6px 5px 3px!important;
	  font-size: 14px;
  }

  @font-face {
	font-family: joy-bold;
	src: url("../fonts/Joy-Bold.ttf"); }
  @font-face {
	font-family: joy-heavy;
	src: url("../fonts/Joy-Heavy.ttf"); }
  @font-face {
	font-family: joy-medium;
	src: url("../fonts/Joy-Medium.ttf"); }
  html, body {
	width: 100%;
	height: 100%; }

  body {
	padding: 0;
	font-family: joy-medium !important;
	/* font-family :'Courier New', Courier, monospace; */
	background-image: url("../img/bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
  }

  a:hover{
	  text-decoration: none !important;
  }

  .btn:hover{
	  cursor:pointer;
  }

  .hand-cursor {
	cursor: pointer; }

  .text-white{
	  color:#fff !important;
  }

  .btn-primary {
	  background:#ff9000;
	  border-radius: 60px;
	  border:1px solid #ff9000;
	  width:154px;
	  font-family: joy-bold;
	  font-size: 16px;
	  padding:9px 5px 9px;
  }

  .btn-primary:hover{
	  background:#fff;
	  border:1px solid #ff9000;
	  color:#ff9000;
  }

  .btn-info{
	  background-color:#3cb2b2;
	  border:1px solid #3cb2b2;
	  border-radius: 60px;
	  width:134px;
	  padding: 9px 6px 8px;
	  font-family: joy-bold;
  }

  .btn-info:hover {
	  background-color: #fff;
	  border:1px solid #3cb2b2;
	  color:#019ed5;
  }

  .btn-info-outline{
	  background-color: #fff;
	  border:1px solid #3cb2b2;
	  border-radius: 60px;
	  width:159px;
	  padding: 9px 6px 8px;
	  color:#019ed5;
	  font-family: joy-bold;
  }

  .btn-info-outline:hover{
	  background-color: #3cb2b2;
	  color:#fff;
  }


  .btn-primary-outline{
	background-color: #fff;
	border:1px solid #ff9000;
	border-radius: 60px;
	width:159px;
	padding: 9px 6px 8px;
	color:#E16148;
	  font-family: joy-bold;
}

.btn-primary-outline:hover{
	background-color: #ff9000;
	color:#fff;
}




  .more-info{
	  width: 119px !important;
	  padding: 6px 5px 3px!important;
	  font-size: 14px;
  }

  .btn-secondary{
	  background-color:#7b2a83;
	  border:#7b2a83;
	  border-radius: 60px;
	  font-family: joy-bold;
	  /* width: 134px; */
	  /* padding: 9px 6px 8px; */
  }

  .btn-secondary:hover{
	background-color:#7b2a83;

}
.btn-secondary-outline{
	background-color: #fff;
	border:1px solid#7b2a83;
	border-radius: 60px;
	width:159px;
	padding: 9px 6px 8px;
	color: #7b2a83;
}

.btn-secondary-outline:hover{
	background-color: #7b2a83;
	color:#fff;
}

  .btn-delete{
	width: 119px !important;
	padding: 6px 5px 3px!important;
	font-size: 14px;
  }


  .page-action{
	margin-top: 58px;
    margin-bottom: 20px;
  }

  .logo{
	  width:29%;
	  margin:17px;
  }

  .back{
	  position: absolute;
	  top: 270px;
      left: 28px;

  }
  .retrieve-app{
	  background: #00A7E2;
	  color:#fff;
	  text-align: center;
	  padding:8px;
	  border-radius: 0;
  }

  .retrieve-text{
	  display: inline-block;
	  color:#fff !important;
	  font-size: 14px;
  }

  .retrieve-app .close-icon{
	  float: right;
	  line-height: 24px;
  }


  .healthplus-content img{
	  margin-bottom: 12px;
  }

  .plus{
	  margin-top: 8px;
	  margin-left: -2px;
  }


  .healthplus-content p{
	  font-size: 17px;
	  color:#7b2a83;
  }

  .heading{
	  font-family: joy-bold;
	  color:#7b2a83;
	  font-size: 21px;
	  margin-bottom: 33px;
  }





  .retrieve{
	  position: fixed;
	  right:0;
	  top:24%;
	  background: #00a7e2;
	  width:50px;
	  height:50px;
  }

  .people{
	  margin: 0 29px;
	  color:#7b2a83;
	  font-size: 21px;
  }

  .btn-addmember{
	  background-color:#7b2a83;
	  border:1px solid #7b2a83;
  }

  .btn-addmember:hover {
	  background-color: #7b2a83;
	  border:1px solid #7b2a83;

  }

  .round-input {
	  height: 40px !important;
	  border: 1px solid #C7C6C1;
	  border-radius: 22.4px;
	  background-color: #FFFFFE;
	  padding: 5px 20px;
	  font-size: 14px;
  }

  .field-label{
	  font-family: joy-bold;
	  font-size: 13px;
	  text-transform:uppercase;
	  color:#6E6E6E;
	  margin-bottom: 0;
  }

  .contact-label{
	  font-family: joy-bold;
	  color:#7b2a83;
	  font-size: 18px;
	  /*margin-top: 10px;*/
	  margin-bottom: 0;
  }

  .input-dropdown-btn-left {
	  border-top-right-radius: 0px;
	  border-bottom-right-radius: 0px;
	  border-top-left-radius: 22.4px;
	  border-bottom-left-radius: 22.4px;
	  height: 40px;
	  width: 69px;
	  border: 1px solid #C7C6C1;
	  border-right: 0 !important;
	  font-size: 14px !important;
  }
  .input-title {
    font-family: Quicksand-Bold;
    font-size: 11px;
    margin-bottom: 3px !important;
    text-transform: uppercase; }
  .btn-male {
	border-top-left-radius: 22.4px !important;
	border-bottom-left-radius: 22.4px !important;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	border-right: 0 !important;
	font-size: 12px;
	width: 50%;
	height: 34px;
	line-height: 17px;
	border: 1px solid #C7C6C1; }

	.btn-male-visatype {
		border-top-left-radius: 22.4px !important;
		border-bottom-left-radius: 22.4px !important;
		border-top-right-radius: 22.4px !important;
		border-bottom-right-radius: 22.4px !important;
		border-right: 0 !important;
		font-size: 12px;
		width: 50%;
		height: 34px;
		line-height: 17px;
		border: 1px solid #C7C6C1; }
  .btn-female {
	border-top-right-radius: 22.4px;
	border-bottom-right-radius: 22.4px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	font-size: 12px;
	width: 50%;
	height: 34px;
	line-height: 17px;
	border: 1px solid #C7C6C1; }

  .btn-male.active, .btn-female.active {
	background-color: #7b2a83!important;
	color: #fff !important; }

	.btn-male.disable, .btn-female.disable{
		/* background-color: #7b2a83!important; */
		pointer-events: none; 
		color: #fff !important; }
	
	.btn-male-visatype.active {
		background-color: #364B8C !important;
		color: #fff !important; }
  .yes-no{
	  width:117px;
  }

  .dropdown-toggle::after {
	  display: inline-block;
	  width: 0;
	  height: 0;
	  margin-left: 6px;
	  vertical-align: 0;
	  content: "\f107";
	  font-family: 'FontAwesome';
	  border-top: 0;
	  border-right: none !important;
	  border-left: none !important;
  }


  .dropdown-menu {
	border-radius: 16px;
	background-color: #fff;
	font-family: joy-medium;
	font-size: 13px;
	padding: 0;
	border:1px solid #841D80;
	margin: 0;
	margin-top: 10px; }

	.dropdown-menu .dropdown-item {
	  border-bottom: 1px solid #841D80; }

	.dropdown-menu .dropdown-item:last-child {
	  border-bottom: 0px solid #dcdcdc; }

	.dropdown-menu .dropdown-item:hover {
	  background-color: #841d80;
	  color: #fff;
	  cursor: pointer; }

	.dropdown-menu .dropdown-item:first-child:hover {
	  background-color: #841D80;
	  color: #fff	;
	  border-top-left-radius: 16px;
	  border-top-right-radius: 16px; }

	.dropdown-menu .dropdown-item:last-child:hover {
	  background-color: #841D80;
	  color: #fff;
	  border-bottom-left-radius: 16px;
	  border-bottom-right-radius: 16px; }

  .input-group-preppend .dropdown-menu, .input-group-append .dropdown-menu {
	min-width: auto !important; }


  .btn-outline-secondary:hover, .show .btn-outline-secondary:focus  {
	  color: #fff;
	  background-color: #841D80;
	  border-color: #841D80;
  }


  .contact-detail-question{
	  font-size: 16px;
	  margin-bottom: 4px;
  }

  .btn-input-dropdown{
	  border-radius: 60px;
	  color: #868e96;
	  background-color: transparent;
	  background-image: none;
	  border-color: #c7c6c1;
	  width: 100%;
	  text-align: left;
  }

  .table-responsive{
    border: 2px solid #841d80;
      border-radius: 15px;
  }

  .btn-input-dropdown:after{
	  float:right;
	  margin-right: 10px;
  }

  .input-dropdown{
	  right: 26px;
  }

  .upload-emeratesid{
	  border:2px dashed #00A7E2;
	  text-align: center;
	  border-radius: 14px;
  }

  .upload{
	   margin:0 auto;
  	   padding:15px;
  }

  .upload p{
	  color:#949494;
	  font-size:14px;
	  margin: 13px;
  }

  /*****************************************************  radio button  *************************************************/


  .radio-rpt
   {
	  cursor: pointer;
	  user-select: none;
	  -webkit-user-select: none;
	  -webkit-touch-callout: none;
  }

  .radio-rpt > input
   {
	  /* HIDE ORG RADIO & CHECKBOX */
	  visibility: hidden;
	  position: absolute;
  }




  .radio-rpt > i
   {
	  /* DEFAULT <i> STYLE */
	  display: inline-block;
	  vertical-align: middle;
	  width: 16px;
	  height: 16px;
	  border-radius: 50%;
	  transition: 0.2s;
	  box-shadow: inset 0 0 0 8px #fff;
	  border: 1px solid gray;
	  background: gray;
  }


  .radio-rpt:hover > i {
	  /* HOVER <i> STYLE */
	  box-shadow: inset 0 0 0 3px #fff;
	  background: #f16749;
  }

  .radio-rpt > input:checked + i {
	  /* (RADIO CHECKED) <i> STYLE */
	  box-shadow: inset 0 0 0 3px #fff;
	  background: #f16749;
  }

  /*****************************************************  radio button  *************************************************/

  .confirm-detail{
	  color:#7b2a83;
  }


  .role{
	  color:#E95C47;
  }

  .role-grey{
	color:#838383;
	font-size:11px;
  }

  .error {
	  color: #ec077e;
	  font-family: joy-bold;
	  font-size: 12px;
		 }

  .applicant{
	  border:2px solid #841D80;
	  width:100%;
	  border-radius:21px;
	  padding:20px;
	  margin-bottom: 32px;
  }

  .applicant-name{
	  font-size:16px;
	  color:#364B8C !important;
	  font-family: joy-bold;

  }

  .applicant-name span{
	  color:#949494;
	  font-size: 14px !important;
	  font-family: joy-medium !important;
  }

  .plan-name{
	  font-family: joy-bold !important;
	  color:#F16648;
	  text-align: left;
	  font-size:19px;
	  width:50%;
	  margin-bottom: 0px;
  }

  .plan-amount{
	  font-family: joy-bold !important;
	  color:#F16648;
	  text-align: right;
	  font-size:19px;
	  width:50%;
	  margin-bottom: 0px;
  }

  .modal-body{
	  padding:32px 21px;
  }



 /*  .modal-dialog{
	  max-width: 800px;
  } */

  .modal-plan-name{
	  font-family: joy-bold;
	  font-size:27px;
	  color:#F16648;
	  margin-bottom:2px;
  }

  .modal-applicant-name{
	  font-family: joy-bold;
	  font-size:15px;
	  color:#364B8C;

  }

  .modal-applicant-name span{
	  font-size:13px;
	  color:#949494;
	  font-family: joy-medium;
  }

  .modal-plan-amount{
	  font-family: joy-bold;
	  font-size:38px;
	  color:#364B8C;
	  text-align: right;
  }

  .text-title{
	  color:#364B8C;
	  font-family: joy-bold;
	  margin-bottom: 8px;
	  text-transform: uppercase;
	  font-size: 16px;
  }

  .text-description{
	  color:#727272;
	  font-family: joy-medium;
	  font-size: 15px;

  }

  .details{
	  margin-top: 42px;
  }

  .details-1{
	  margin-top: 25px;
  }

  .links span a{
	  color:#00A7E2;
	  font-family: joy-bold;
	  font-size:16px;
	  vertical-align: sub;
  }

  .links:hover{
	  cursor:pointer;
  }

  .text-mail{
	  color: #7b2a83;
	  font-family: joy-bold;
  }


  .mat-accent .mat-slider-thumb, .mat-accent .mat-slider-thumb-label, .mat-accent .mat-slider-track-fill {
    background-color: #364B8C !important;
	}

  .modal-header{
	background-color: #7b2a83 !important;
	color:#fff;
  }

  .modal-footer{
	  border-top:none !important;
  }


  .modal-x{
	  width:14px;
  }

  .modal-x:hover {
	cursor: pointer; }

	.modal-heading {
		color: #fff;
		font-family: joy-medium;
		font-size: 18px;
		margin-bottom: 0px; }

	.hand-cursor:hover{
		cursor: pointer;
	}


	.modal-heading {
		color: #fff;
		font-family: joy-medium;
		font-size: 18px;
		margin-bottom: 0px; }

	.hand-cursor:hover{
		cursor: pointer;
	}

	.sub-heading{
		color: #7b2a83;
		margin-bottom: 42px;
	}

.applicant-role{
	color:#949494;
	font-size: 14px;
}

.datefield{
	position: relative;
}

.datefield img{
	position: absolute;
	top:10px;
	right:0;
}

.extention span{
	position: absolute;
	top:9px;
	right:17px;
	color: #a1a1a1;
}

.extention{
	position:relative;
}


.btn-reset{
	position: absolute;
    right: 0;
    top: 103px;
    z-index: -1;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.que-heading{
	border:1px solid #841D80;
	margin-bottom: 14px;
	border-radius: 12px;
}
.card-header{
    background-color:#7b2a83;
    color:#fff;
    font-family: joy-medium !important;
    font-size: 18px;
    padding:13px 20px;
   /*  height:65px;
    line-height: 65px; */
    box-shadow: 0px 5px 16px 0px #E5E6E3 !important;
    border-radius:5px !important;

    a{
        color:#fff !important;
        /* font-family: Quicksand-Bold; */
        /* font-size: 16px; */
    }
}
.que-heading .card-header{
	border:none !important;
	padding: 10px 5px;
}

.que-heading .card-body{
	padding-top: 5px;
}


.btn-link:focus, .btn-link:hover{
	text-decoration: none !important;
}

.btn-link{
	color: #364B8C !important;
	font-family: joy-bold;
}

  @media (max-width:414px){

	  .yourself{
		  padding:21px 10px;
	  }
	  .yourself .label-yourself{
		  font-size: 15px;
	  }
	  .yourself img {
		  width:36px;
	  }
	  .yourself .family{
		  width:78px;
	  }
	  .yourself img{
		  margin-bottom: 10px;
	  }

	  .back{
		  position: absolute;
		  top:15px;
		  left:15px;
	   }

	  .modal-btn{
		  width:130px !important;
	  }

  }
  @media (max-width:360px){

	  .yourself .label-yourself{
		  font-size: 14px;
	  }

	  .back img{
		  width:77%;
	  }
  }

  @media (max-width:320px){

	  .yourself .label-yourself{
		  font-size: 12px;
	  }
  }
  .page-action{
	  margin-top: 58px;
  }


  .retrieve-app{
	  background: #00A7E2;
	  color:#fff;
	  text-align: center;
	  padding:8px;
	  border-radius: 0;
  }

  .retrieve-text{
	  display: inline-block;
	  color:#fff !important;
	  font-size: 14px;
  }

  .retrieve-app .close-icon{
	  float: right;
	  line-height: 24px;
  }

  .healthplus-content{
	  text-align: center;
	  /* margin-top: 20px; */

  }

  .healthplus-content img{
	  margin-bottom: 12px;
  }

  .plus{
	  margin-top: 8px;
	  margin-left: -2px;
  }


  .healthplus-content p{
	  font-size: 17px;
	  color: #7b2a83;
  }

  .heading{
	  font-family: joy-bold;
	  color:#7b2a83;
	  font-size: 21px;
	  /* margin-bottom: 33px; */
	  margin-bottom: 15px;

  }

  .yourself{
	  text-align: center;
	  padding: 46px 0;
	  border:4px solid #ccc; /*#841D80*/
	  border-radius:21px;
	  background: #fff;
	  transition: all 0.5s;
  }


  .yourself.active{

	border:4px solid #841D80 !important;

}

  .yourself:hover{
	  cursor: pointer;
  }

  .yourself img{
	  margin-bottom: 17px;
  }

  .yourself .label-yourself{
	  font-family: joy-bold;
	  font-size: 22px;
	  color:#7b2a83;
	  margin-bottom:0;
  }

  .yourself:hover{
	  cursor: pointer;
	  box-shadow: 6px 6px 12px #757373;
	  border:4px solid #841D80;
  }

  .retrieve{
	  position: fixed;
	  right:0;
	  top:24%;
	  background: #00a7e2;
	  width:50px;
	  height:50px;
  }



  .people{
	  margin: 0 29px;
	  color:#7b2a83;
	  font-size: 21px;
  }

  .btn-addmember{
	  background-color:#7b2a83;
	  border:1px solid#7b2a83;
  }

  .btn-addmember:hover {
	  background-color:#7b2a83;
	  border:1px solid #7b2a83;

  }

  .round-input {
	  height: 40px !important;
	  border: 1px solid #C7C6C1;
	  border-radius: 22.4px;
	  background-color: #FFFFFE;
	  padding: 5px 20px;
	  font-size: 14px;
  }

  .field-label{
	  font-family: joy-bold;
	  font-size: 13px;
	  text-transform:uppercase;
	  color:#6E6E6E;
	  margin-bottom: 0;
  }

  .contact-label{
	  font-family: joy-bold;
	  color:#7b2a83;
	  font-size: 18px;
	  /*margin-top: 10px;*/
	  margin-bottom: 0;
  }

  .input-dropdown-btn-left {
	  border-top-right-radius: 0px;
	  border-bottom-right-radius: 0px;
	  border-top-left-radius: 22.4px;
	  border-bottom-left-radius: 22.4px;
	  height: 40px;
	  width: 69px;
	  border: 1px solid #C7C6C1;
	  border-right: 0 !important;
	  font-size: 14px !important;
  }

  .btn-male {
	border-top-left-radius: 22.4px;
	border-bottom-left-radius: 22.4px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	border-right: 0 !important;
	font-size: 12px;
	width: 50%;
	height: 34px;
	line-height: 17px;
	border: 1px solid #C7C6C1; }

  .btn-female {
	border-top-right-radius: 22.4px;
	border-bottom-right-radius: 22.4px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	font-size: 12px;
	width: 50%;
	height: 34px;
	line-height: 17px;
	border: 1px solid #C7C6C1; }

  .btn-male.active, .btn-female.active {
	background-color: #7b2a83 !important;
	color: #fff !important; }

  .yes-no{
	  width:117px;
  }

  .dropdown-toggle::after {
	  display: inline-block;
	  width: 0;
	  height: 0;
	  margin-left: 6px;
	  vertical-align: 0;
	  content: "\f107";
	  font-family: 'FontAwesome';
	  border-top: 0;
	  border-right: none !important;
	  border-left: none !important;
  }


  .dropdown-menu {
	border-radius: 16px;
	background-color: #fff;
	font-family: joy-medium;
	font-size: 13px;
	padding: 0;
	border:1px solid #841D80;
	margin: 0;
	margin-top: 10px; }

	.dropdown-menu .dropdown-item {
	  border-bottom: 1px solid #841D80; }

	.dropdown-menu .dropdown-item:last-child {
	  border-bottom: 0px solid #dcdcdc; }

	.dropdown-menu .dropdown-item:hover {
	  background-color: #841d80;
	  color: #fff;
	  cursor: pointer; }

	.dropdown-menu .dropdown-item:first-child:hover {
	  background-color: #841D80;
	  color: #fff	;
	  border-top-left-radius: 12px;
	  border-top-right-radius: 12px; }

	.dropdown-menu .dropdown-item:last-child:hover {
	  background-color: #841D80;
	  color: #fff;
	  border-bottom-left-radius: 12px;
	  border-bottom-right-radius: 12px; }

  .input-group-preppend .dropdown-menu, .input-group-append .dropdown-menu {
	min-width: auto !important; }


  .btn-outline-secondary:hover, .show .btn-outline-secondary:focus  {
	  color: #fff;
	  background-color: #841D80;
	  border-color: #841D80;
  }


  .contact-detail-question{
	  font-size: 16px;
	  margin-bottom: 4px;
  }

  .btn-input-dropdown{
	  border-radius: 60px;
	  color: #495057;
	  background-color: transparent;
	  background-image: none;
	  border-color: #c7c6c1;
	  width: 100%;
	  text-align: left;
	  font-size:14px;
  }

  .btn-input-dropdown:after{
	  float:right;
	  margin-right: 10px;
  }

  .input-dropdown{
	  right: 26px;
  }

  .upload-emeratesid{
	  border:2px dashed #00A7E2;
	  text-align: center;
	  border-radius: 14px;
	  margin-right: 14px;
  }

  .upload{
	  margin:0 auto;
  }

  .upload p{
	  color:#949494;
	  font-size:14px;
	  margin: 13px;
  }

  /*****************************************************  radio button  *************************************************/


  .radio-rpt
   {
	  cursor: pointer;
	  user-select: none;
	  -webkit-user-select: none;
	  -webkit-touch-callout: none;
  }

  .radio-rpt > input
   {
	  /* HIDE ORG RADIO & CHECKBOX */
	  visibility: hidden;
	  position: absolute;
  }




  .radio-rpt > i
   {
	  /* DEFAULT <i> STYLE */
	  display: inline-block;
	  vertical-align: middle;
	  width: 16px;
	  height: 16px;
	  border-radius: 50%;
	  transition: 0.2s;
	  box-shadow: inset 0 0 0 8px #fff;
	  border: 1px solid gray;
	  background: gray;
  }


  .radio-rpt:hover > i {
	  /* HOVER <i> STYLE */
	  box-shadow: inset 0 0 0 3px #fff;
	  background: #f16749;
  }

  .radio-rpt > input:checked + i {
	  /* (RADIO CHECKED) <i> STYLE */
	  box-shadow: inset 0 0 0 3px #fff;
	  background: #f16749;
  }

  /*****************************************************  radio button  *************************************************/

  .confirm-detail{
	  color:#7b2a83;
  }


  .role{
	  color:#E95C47;
  }



  .applicant{
	  border:2px solid #841D80;
	  width:100%;
	  border-radius:21px;
	  padding:20px;
	  margin-bottom: 32px;
  }



  .applicant-name span{
	  color:#949494;
	  font-size: 14px !important;
	  font-family: joy-medium !important;
  }

  .plan-name{
	  font-family: joy-bold !important;
	  color:#F16648;
	  text-align: left;
	  font-size:19px;
	  width:50%;
  }

  .modal-body{
	  padding:30px;
  }



 /*  .modal-dialog{
	  max-width: 800px;
  } */

  .modal-plan-name{
	  font-family: joy-bold;
	  font-size:27px;
	  color:#F16648;
	  margin-bottom:2px;
  }

  .modal-applicant-name{
	  font-family: joy-bold;
	  font-size:15px;
	  color:#364B8C;

  }

  .modal-applicant-name span{
	  font-size:13px;
	  color:#949494;
	  font-family: joy-medium;
  }

  .modal-plan-amount{
	  font-family: joy-bold;
	  font-size:38px;
	  color:#364B8C;
	  text-align: right;
  }

  .text-title{
	  color:#364B8C;
	  font-family: joy-bold;
	  margin-bottom: 8px;
	  text-transform: uppercase;
	  font-size: 16px;
  }

  .text-description{
	  color:#727272;
	  font-family: joy-medium;
	  font-size: 15px;

  }

  .details{
	  margin-top: 42px;
  }

  .details-1{
	  margin-top: 25px;
  }

  .links span{
	  color:#00A7E2;
	  font-family: joy-bold;
	  font-size:16px;
	  vertical-align: sub;
  }

  .links:hover{
	  cursor:pointer;
  }

  .text-mail{
	  color: #7b2a83;
	  font-family: joy-bold;
  }

  .modal-header{
	background-color: #7b2a83 !important;
	color:#fff;
  }

  .modal-footer{
	  border-top:none !important;
  }


  .modal-x{
	  width:14px;
  }

  .modal-x:hover {
	cursor: pointer; }

	.modal-heading {
		color: #fff;
		font-family: joy-medium;
		font-size: 18px;
		margin-bottom: 0px; }

	.hand-cursor:hover{
		cursor: pointer;
	}

	.sub-heading{
		color: #7b2a83;
		margin-bottom: 42px;
	}

.applicant-role{
	color:#949494;
	font-size: 14px;
}

.datefield{
	position: relative;
}

.datefield img{
	position: absolute;
	top:10px;
	right:0;
}

.extention span{
	position: absolute;
	top:9px;
	right:17px;
	color: #a1a1a1;
}

.extention{
	position:relative;
}

.btn-blue-outline{
	background-color:#fff !important;
	border:1px solid #364B8B !important;
	color:#364B8B !important;
	padding: 9px 23px 8px;
    font-size: 14px;
    width: auto;
	font-family: joy-medium !important;
}

.btn-blue-outline.active{
	background-color:#364B8B !important;
	border:1px solid #364B8B !important;
	color:#fff !important;
}

.info{
	width:15px;
}

.popover.bs-popover-auto[x-placement^=right] .arrow::before, .popover.bs-popover-right .arrow::before{
	border-right-color: #9C27B0 !important;
}

.popover{
	border: 1px solid #9C27B0 !important;
}

input[type="checkbox"]:checked + label{
	background-color: #7b2a83 !important;
	border:1px solid  #7b2a83 !important;
	color:#fff !important;
}

.btn-save-application{
	background-color : #7b2a83 !important;
	border:1px solid #7b2a83 !important;
	color:#fff !important;
	padding: 6px 5px 5px;
    font-size: 14px;
    width: 140px;
	font-family: joy-medium !important;
	border-radius: 60px;
}


/************************************************************ checkbox style ********************************************/
.control-group {
  display: inline-block;
  vertical-align: top;
  background: #fff;
  text-align: left;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  padding: 30px;
  width: 200px;
  height: 210px;
  margin: 10px; }

.control {
  /*display: block;*/
  position: relative;
  padding-left: 22px;
  margin-bottom: 17px;
  cursor: pointer;
  font-size: 15px;
  line-height: 31px;
  font-weight: normal; }

.control input {
  position: absolute;
  z-index: -1;
  opacity: 0; }

.control__indicator {
  position: absolute;
  top: 2px;
  left: 0px;
  height: 18px;
  width: 18px;
  /*background: #e6e6e6;*/
  border: 1px solid #00A7E2;
  border-radius: 5px; }

.control__indicator1 {
  position: absolute;
  top: 2px;
  left: 0px;
  height: 37px;
  width: 37px;
  /*background: #e6e6e6;*/
  border: 1px solid #000;
  border-radius: 0px; }

.control--radio .control__indicator {
  border-radius: 50%; }

.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
  /* background: #ccc;*/
  border: 1px solid #00A7E2;
  border-radius: 5px; }

.control input:checked ~ .control__indicator {
  background: #fff !important; }

/* .control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
  /*background:#167fbb;*/
 /* border:1px solid #0d5781;
  border-radius:3px;
} */
.control input:disabled ~ .control__indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none; }

.control__indicator:after {
  content: '';
  position: absolute;
  display: none; }

.control input:checked ~ .control__indicator:after {
  display: block; }

.control--checkbox .control__indicator:after {
  left: 6px;
  top: 3px;
  width: 5px;
  height: 9px;
  border: 1px solid #00A7E2;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg); }

.control--checkbox input:disabled ~ .control__indicator:after {
  border-color: #7b7b7b; }

.control--radio .control__indicator:after {
  left: 7px;
  top: 7px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: #fff; }

.control--radio input:disabled ~ .control__indicator:after {
  background: #7b7b7b; }

.select {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
  width: 100%; }

.select select {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  padding: 10px 15px;
  outline: 0;
  border: 0;
  border-radius: 0;
  background: #e6e6e6;
  color: #7b7b7b;
  /*  appearance: none; */
  -webkit-appearance: none;
  -moz-appearance: none; }

.select select::-ms-expand {
  display: none; }

.select select:hover,
.select select:focus {
  color: #000;
  background: #ccc; }

.select select:disabled {
  opacity: 0.5;
  pointer-events: none; }

.select__arrow {
  position: absolute;
  top: 16px;
  right: 15px;
  width: 0;
  height: 0;
  pointer-events: none;
  border-style: solid;
  border-width: 8px 5px 0 5px;
  border-color: #7b7b7b transparent transparent transparent; }

.select select:hover ~ .select__arrow,
.select select:focus ~ .select__arrow {
  border-top-color: #000; }

.select select:disabled ~ .select__arrow {
  border-top-color: #ccc; }

/***************************************************** checkbox style ***************************************************/
.checkbox p{
	vertical-align:bottom;
}

.loader-content {
	display: inline-block;
	position: fixed;
	top: 50%;
	left: 50%;
	text-align: center;
	margin: -60px -60px;
	background: #fff;
	border-radius: 73px;
	padding: 14px 21px;
	box-shadow: 0 0 15px #ccc;
	z-index:99999;
}

.plan-info{
	margin:15px 0;
}



.plan-info .table-heading{
	font-size: 13px;
	color:#7b2a83;;
}

.plan-info .selected-text{
	font-size: 14px;
	color:#585858;
}

.summary-plan-amount{
	color:#F16648;
	font-family: joy-bold;
}

.divider{
	border-top:1px solid #e8e8e8;
	margin: 14px -20px;
}

.action label,
.action span{
	font-size: 14px;
}

.btn-action-sm{
	background-color :#7b2a83;
	border:1px solid #7b2a83;
	color:#fff;
	margin-top: 12px;
	font-size:12px;
	width: 78px;
    padding: 5px;
	border-radius: 60px;
}

.summary-applicant-name{
	font-size: 18px;
    color: #364B8C;
    font-family: joy-bold;
}

.summary-applicant-name span{
    color: #949494;
    font-size: 16px !important;
    font-family: joy-medium !important;
}

.btn-upload{
	width: 140px;
    padding: 7px 2px 4px;
    font-size: 14px;
}

.benefits{
	padding-left:2px;
	margin-top: 20px;
}

.benefits li{
	margin-bottom: 20px;
	list-style: none;
	line-height: 23px;
}

.bullets{
	width:8px;
	height:8px;
	border-radius:50%;
	background-color:#364B8C;
	margin-top: 8px;
    margin-right: 10px;
}

.heading-2{
	font-size: 17px;
    color: #7b2a83;
	font-family: joy-medium;
}

.upload-img img{
	width:100%;
	height:147px;
	margin-bottom: 12px;
}

.upload-img pdf-viewer{
	width:100%;
	height:250px;
	margin-bottom: 12px;
	display: inline-grid;
}

/* .form-control.ng-touched.ng-invalid{
	border: 1px solid #ec077eed;
} */

.form-control:disabled, .form-control[readonly]{
	background-color: #FFFFFE !important;
}

.truncate{
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.truncate-networkname{
	max-width: 119px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	float:right;
}

header{
	border-bottom:1px solid #dcdcdc;
}

.basic-que{
	margin-bottom: 18px;
}

.product-logo{
	position: absolute;
	top:32px;
	left:20px;
	width:30%;
}

.payment-summary{
	border:2px solid #841D80;
	border-radius: 21px;
	background: #fff;
}



.payment-summary table td label{
	font-size:15px;
	font-family: joy-bold;
	color:#757575;
	margin-bottom: 0px;
}

.total-amount{
	  font-family: joy-bold !important;
	  color:#F16648 !important;
	  font-size:16px;
	  margin-bottom: 0px;
	  /* float: right; */
  }

.payment-summary table td .applicant-name{
	float: right;
}

.payment-summary table td, .payment-summary table th  {
	border: 1px solid #e9ecef;
	padding: 14px 20px;
}


.payment-summary table td:first-child,
.payment-summary table th:first-child {
	border-left:none !important;
}

.payment-summary table td:last-child,
.payment-summary table th:last-child {
	border-right:none !important;

}

.payment-summary table td:last-child{
	padding-right: 7%;
}

.payment-summary table th{
	border-top:none !important;
}



.payment-summary table th{
	font-size: 11px;
	text-transform: uppercase;
	font-family: joy-bold;
	color:#757575;
	background: #f8f6f6;

}


.text-small{
	font-size: 11px !important;
}

.member-name{
	/* font-family: joy-bold; */
	color:#4f4f4f;

}

.member-name span {
    color: #949494;
    font-size: 14px !important;
    font-family: joy-medium !important;
}


.quotation-details{
	font-family: joy-bold;
    font-size: 16px;
    color: #7d7d7d;
    margin-bottom: 15px;
}

.vatnote{
	  font-family: joy-medium;
	  font-size: 14px;
	  line-height: 16px;
	  margin-top: 10px;
	  color:#5C5E5C;
}

.terms-conditions {
  font-family: joy-bold;
  color: #00A7E2 !important;
}

.acceptance-note{
	font-size:14px;
	color: #5C5E5C;
}

.btn-payment{
	width:217px !important;
}

.transaction-id{
	font-size: 11px;
    text-transform: uppercase;
    font-family: joy-bold;
    color: #757575;
	margin-bottom: 0px;


}

.btn-newappilcation{
	width:315px !important;
}

.transaction-number{
	font-size: 23px;
    text-transform: uppercase;
    font-family: joy-bold;
    color: #F16648;


}

.order-summary{
	margin-top: 50px;
	margin-bottom: 50px;
}

.continuity-note{
	font-size: 14px;
    color: #364B8C;
    font-family: joy-medium;
}

.questions ul li{
	font-size: 14px;
}

.text-que{
	line-height:21px;
}

.btn-visa {
    width: 280px !important;
}

.btn-visa.active, .btn-primary-outline.active {
	color:#fff !important;
	background-color:#7b2a83;
	border:1px solid#7b2a83 !important;
}

/* .dropdown-menu.show {
    width: 100%;
} */

.fixwidth{
	width:223px;
	margin: 0 auto !important;

}

.product-name{
	font-family: joy-medium;
    color: #364B8C;
    font-size: 18px;
    margin-bottom: 33px;
}

input::-ms-clear {
    display: none;
}


/*.dropdown-search {
    width: 100%;
    height: 30px !important;
    border: 1px solid #C7C6C1;
    border-radius: 22.4px;
    background-color: #FFFFFE;
    padding: 5px 10px;
    font-size: 14px;
    margin-bottom: 5px;
}*/



ng-select > div{
	height: 40px !important;
    border: 1px solid #C7C6C1;
    border-radius: 22.4px;
    background-color: #FFFFFE;
    padding: 5px 20px;
    font-size: 14px;
}


select-dropdown .above{
	border:1px solid #841D80;
	border-radius:10px;

}
select-dropdown > div .filter input{
	border-radius:10px;
}

.ng-select-container {
	height: 40px !important;
	border: 1px solid #C7C6C1 !important;
	border-radius: 22.4px !important;
	background-color: #FFFFFE !important;
	padding: 5px 20px !important;
	font-size: 14px !important; }


	.ng-dropdown-panel {
		border-radius: 16px !important;
		background-color: #fff;
		font-family: joy-medium;
		font-size: 13px;
		padding: 3px;
		border: 1px solid rgb(132, 30, 129);
		margin: 0;
		margin-top: 10px !important;
		left: 0; }

	  .dropdown-search {
		width: 100%;
		height: 30px !important;
		border: 1px solid #C7C6C1;
		border-radius: 22.4px;
		background-color: #FFFFFE;
		padding: 5px 10px;
		font-size: 14px;
		margin-bottom: 5px; }

	  .ng-select-container::after {
		display: inline-block;
		/* width: 0;
		height: 0; */
		margin-left: .255em;
		vertical-align: 0;
		content: "\f107";
		font-family: 'FontAwesome';
		border-top: 0;
		border-right: none !important;
		border-left: none !important;
		cursor: pointer;
		font-size: 16px; }

	  .ng-option:hover {
		background-color: #e8e8e8 !important;
		color: #000 !important;
		cursor: pointer !important; }

	  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
		/* background-color: #e8e8e8 !important */
		background-color: #841d80 !important;
		color:#fff !important;
		  }

	  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected {
		/* background-color: #e8e8e8 !important; */
		background-color: #841d80 !important;
		color:#fff !important;
		 }


		 /* country dropdown without search box */

		 .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked:last-child,
		 .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected:last-child {
			border-bottom-left-radius: 12px;
			border-bottom-right-radius: 12px;
		 }

		 .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked:first-child,
		 .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected:first-child {
			border-top-left-radius: 12px;
			border-top-right-radius: 12px;
		 }


		 .no-search  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked:first-child,
		 .no-search  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected:first-child {
			border-top-left-radius: 12px;
			border-top-right-radius: 12px;
		 }


		 .no-search .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked:last-child,
		 .no-search .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected:last-child {
			border-bottom-left-radius: 12px;
			border-bottom-right-radius: 12px;
		 }
		 .no-search .ng-dropdown-panel{
			 padding: 0px !important;
		 }


		 /* country dropdown without search box */




	  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
		border-bottom: 1px solid #841e81;
		border:blue
	   }

	  .ng-select .ng-arrow-wrapper .ng-arrow {
		display: none !important; }

	  .ng-select .ng-clear-wrapper {
		left: 20px !important;
		width: 5px !important; }


		.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{
			padding:5px;
		}

		.ng-select .ng-select-container .ng-value-container {
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			padding-left: 1px;
		}

		.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input {
			left: 0;
			padding-left: 10px;
			padding-right: 50px;
			top: 5px;
		}

		.ng-select-container::after {
			display: inline-block;
			margin-left: .255em;
			vertical-align: 0;
			content: "\f107";
			font-family: 'FontAwesome';
			border-top: 0;
			border-right: none !important;
			border-left: none !important;
			cursor: pointer;
			font-size: 16px;
		}

		.ng-select .ng-clear-wrapper {
			color: #999;
		}

input[type="radio"]:checked + label{
	background-color : #7b2a83 !important;
	border:1px solid #7b2a83 !important;
	color:#fff !important;
}

.additionalque-form .field-label{
	font-family: joy-medium;
	margin-bottom: 10px;
}

.mandatory:after{
	content:"*";
	color:#ec077e;
	font-size: 17px;
	font-family: joy-bold;
}

.card-header.collapsed .down-arrow{
	border-top: 3px solid #7b2a83;
    border-right: 3px solid #7b2a83;
    width: 15px;
    height: 15px;
    float: right;
    transform: rotate(135deg);
    margin-right: 16px;
	border-radius: 1px;
	margin-top: 10px;
	transition:all 0.2s;
}

.card-header .down-arrow{
	border-top: 3px solid #7b2a83;
    border-right: 3px solid#7b2a83;
    width: 15px;
    height: 15px;
    float: right;
    transform: rotate(-45deg);
    margin-right: 16px;
	border-radius: 1px;
	margin-top: 14px;
	transition:all 0.2s;
}

.que-heading .card-header:hover{
	cursor: pointer;
}



.file-name{
	display: inline-flex;
    border: 1px solid #01a7e2;
    border-radius: 21px;

    font-size: 15px;
}

.loader-bg{
	position: fixed;
	top:0;
	bottom:0;
	right:0;
	left:0;
	/*background: rgba(0, 0, 0, 0.65);*/

}

.truncate-applicant{
	max-width: 200px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


.modal-terms {
	height: 500px;
	overflow: auto;
	margin-bottom: 10px;
	margin-top: 3px;
	font-size:13px;
}

.heading2{
	font-family: joy-bold;
	font-size: 15px !important;
}

/*main{
	padding-top: 75px;
}*/

.wrapper{
	padding-top: 75px;
}


.btn-payment {
    width: 217px !important;
}

.btn-primary:disabled{
	background:#f4b86a;
	border-radius: 60px;
	border:1px solid #f4b86a;
	font-family: joy-bold;
	font-size: 16px;
	padding:9px 5px 9px;
	color:#fff;
	pointer-events: none;
}

btn:disabled{
	opacity: 0.65;
	cursor: not-allowed;
}

.tooltip-inner {
	text-align: left !important;
	/* max-width: 247px !important; */
	max-width: 350px !important;
	font-size: 12px;
	padding: 14px;
	font-family: joy-medium; }

.form_datetime {
	background-image: url("../img/calendar.png");
	background-position: right;
	background-repeat: no-repeat;
}

.dropdown-100 .dropdown-menu.show {
	width:100%;
}

.ng-clear-wrapper{
	display:none;
}

.popover.bs-popover-auto[x-placement^=top] .arrow::before, .popover.bs-popover-top .arrow::before{
	border-top-color: #9C27B0 !important;
}

btn:disabled{
	opacity: 0.65;
	cursor: not-allowed;
}

.btn-primary:disabled{
	background:#f4b86a;
	border-radius: 60px;
	border:1px solidrgba(185, 134, 105, 0.92);
	font-family: joy-bold;
	font-size: 16px;
	padding:9px 5px 9px;
	color:#fff;
	pointer-events: none;
}

.additional-info{
border:1px solid #841D80;
padding:12px;
border-radius:12px;
margin: 0px;
margin-bottom: 30px;
}




.new-section{
margin-top: 84px;
}

.visa-type{
width:433px;
}

.continuity-abudhabi{
line-height: 25px;
}

.rangebar{
	position: relative;
}

.rangebar ul{
	padding-left: 0px;
	position: absolute;
	top: 22px;
    left: 7px;
    width: 100%;
}

.rangebar ul li{
	float:left;
	/* margin-right: 22.5%; */
	list-style: none;
	display: table-cell;
    width: 23.5%;
}

.rangebar ul li:last-child{
	margin-right: 0;
	width:0;
}



.circle{
	width:4px;
	height:4px;
	background: black;
	border-radius: 50px;
}

input[type="radio"][disabled] + label{
	background-color:rgba(59, 82, 160, 0.38);
	cursor: not-allowed;
}

@media (min-width:1025px){

}

@media (max-width:1024px){
	.product-logo img{
		width:16%;
	}
	.product-logo label{
		font-size:16px;
	}



}
  @media (max-width:414px){

	  .yourself{
		  padding:21px 10px;
	  }
	  .yourself .label-yourself{
		  font-size: 15px;
	  }
	  .yourself img {
		  width:36px;
	  }
	  .yourself .family{
		  width:78px;
	  }
	  .yourself img{
		  margin-bottom: 10px;
	  }

	  .btn-upload{
		width: 130px;

	  }

	  .page-action{
		margin-top: 30px;

	  }
	  .upload-emeratesid{
		  margin-bottom: 40px;
		  margin-right: 0px;
	  }

	   .back{
		  position: absolute;
	  	  top:22px;
	      left:15px;
	  }
	  .payment-summary table td label{
		  font-size:12px;
	  }

	  .payment-summary table td, .payment-summary table th{
		  padding:14px 9px;
	  }

	  input{
		font-size: 16px !important;
	  }

	  .btn-visa {

		margin-bottom:10px;
	  }

	  .btn-delete{
		width:112px !important;
		}

	.btn-info{

		width: 126px;
	}

	.btn-info-outline{
		margin-right: 0px;
	}

	.wrapper{
		padding-top:40px;
	}

	.more-info{
		width:108px !important;
	}

	.yes-no, .visa-type{
		width:100% !important;
		}



  }
  @media (max-width:360px){

	  .yourself .label-yourself{
		  font-size: 14px;
	  }

	  .back img{
		  width:77%;
	  }
	  .rangebar ul li{
		width:22.9%;
	}
  }

  @media (max-width:320px){

	  .yourself .label-yourself{
		  font-size: 12px;
	  }
	  .btn-upload{
		width: 102px;

	  }

	  .more-info{
		width:92px !important;
	}

	.btn-delete{
		width:92px !important;
	}

  }
  @media (max-width:1024px) and (min-width:768px){

	.product-logo img{
		width:35% !important;
	}

	.product-logo{
		top:27px !important;
	}

  }


  .retrieve-fail{
	width: 220px;
		margin: 0 auto;
	border-radius: 10px;
	background: #ec077e !important;
	border-color: #ec077e !important;
	}

	.gender{
		height:40px;
		line-height: 25px !important;
		}

  /*scrollbar styles ***************************************************************************************************/
::-webkit-scrollbar {
	width: 10px;
	/*for vertical scroll*/
	height: 10px;
	/*for horiziontal scroll*/ }

  /* this targets the default scrollbar (compulsory) */
  ::-webkit-scrollbar-track {
	/*  background-color: #cecece; */
	background-color: transparent;
	border-radius: 0px; }

  /* the new scrollbar will have a flat appearance with the set background color */
  ::-webkit-scrollbar-thumb {
	background-color:#7b2a83;
	border-radius: 0px; }

  /* this will style the thumb, ignoring the track */
  ::-webkit-scrollbar-button {
	/*background-color: #fff;*/ }

  /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
  ::-webkit-scrollbar-corner {
	background-color: #000; }

  /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
  /*scrollbar styles end***************************************************************************************************/
  /* div.dropdown-menu::-webkit-scrollbar-corner{
	  border-top-right-radius:20px;
  } */

  @media (max-height:768px){
	.wrapper-landing{
	padding-top: 0px !important;
	}
	  }


/************************************************************************ responsive table ***************************************************************/
.responsive-table {
	/* Stack rows vertically on small screens */
	/* Stack labels vertically on smaller screens */ }

	.responsive-table table {
	  border-collapse: collapse;
	  background-color: #fff;
	  border-radius: 15px;
	  width: 100%; }
	.responsive-table th {
	  /*  background-color: #eee; */
	  font-weight: bold; }
	.responsive-table th,
	.responsive-table td {
	  border: 0.125em solid #E5E6E3;
	  line-height: 1.5;
	  /* padding: 10px 20px; */
	  text-align: left; }

	.responsive-table th{
		font-size: 14px;
		/* text-transform: uppercase;  */
		font-family: joy-bold;
		color:#757575;
		background: #f8f6f6;
		text-align: center;
	}

	 .responsive-table table th:first-child{
		border-top-left-radius: 15px;

	}

	.responsive-table table th:last-child{
		border-top-right-radius: 15px;
	}

	@media (max-width: 48em)/*576px*/ {
	  .responsive-table {
		/* Hide column labels */
		/* Leave a space between table rows */
		/* Get table cells to act like rows */
		/* Add data labels */ }
		.responsive-table thead tr {
		  position: absolute;
		  top: -9999em;
		  left: -9999em; }
		.responsive-table tr {
		  border: 0.125em solid #841D80;
		  border-radius: 18px;
		  /* border-bottom: 0; */ }
		.responsive-table tr + tr {
		  margin-top: 1.5em; }

		/* .responsive-table tr,
		.responsive-table td {
		  display: block; } */

		.responsive-table td {
		  border: none;
		  border-bottom: 0.125em solid  #E5E6E3;
		  /* Leave a space for data labels */
		  padding-left: 50%; }
		/* .responsive-table td:before {
		  content: attr(data-label);
		  display: inline-block;
		  font-size: 11px;
			text-transform: uppercase;
			font-family: joy-bold;
			color:#757575;
			background: #f8f6f6;
		  line-height: 1.5;
		  margin-left: -100%;
		  width: 100%;
		font-size: 12px;} */

		.responsive-table table td:last-child{
			border-bottom: 15px;
		}


	}

	@media (width: 1024px){
		.responsive-table table td:last-child{
			width:253px;
		}
	}

	@media (min-width: 1024px){
		.responsive-table {
			border:2px solid #841D80;
			border-radius:18px;
		}
		.total-amount,
		.responsive-table .applicant-name{
			float:right;
		}
		.responsive-table tr td:last-child{
			/* padding-right: 43px;
		} */
	     }
		.responsive-table tr th:last-child{
			width:298px;
		}

	}

	@media (max-width: 20em)/*240px*/ {
	  .responsive-table td {
		padding-left: 0.75em; }
	  .responsive-table td:before {
		display: block;
		margin-bottom: 0.75em;
		margin-left: 0; } }
	  /* .responsive-table tr td:last-child, .responsive-table tr th:last-child{
	  border-right: none !important; }
	  .responsive-table tr td:first-child, .responsive-table tr th:first-child{
	  border-left: none !important; } */

  /************************************************************************************ responsive table **********************************************************************/


  .ng-select .ng-select-container .ng-value-container .ng-input>input{
		color:transparent;
  }

  .dummy-pdf{
	  height:auto !important;
  }

  .tick::after{
	content:"";
	display: inline-block;
	width: 10px;
	height: 20px;
	border: solid #000;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
  }

  .tick-white::after{
	content:"";
	display: inline-block;
	width: 10px;
	height: 20px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
  }

  .cross{
	  font-size: 24px;
	  font-weight: 800;
  }

  /* .cross:before, .cross:after {

	content: ' ';
	height: 33px;
	width: 2px;
	background-color: #333;
  }
  .cross:before {
	transform: rotate(45deg);
  }
  .cross:after {
	transform: rotate(-45deg);
  } */

  .compare-table{
	background-color:#e8e8e8;
	font-size: 13px;
	border-radius: 15px;


  }



  .compare-table tr td{
	  text-align:center;
	  padding: 7px 2px;
	  width: 18%;
	  vertical-align: middle;
	  border-top:0 !important;

  }

  .compare-table tr th{
	  vertical-align: middle;
	  border-top: 0px;
	  border-bottom:0px;
  }

  .iradium-plan{
	color: #fff !important;
	font-family: joy-bold;
	background-color:#393339 !important;/* iridium */
  }

  .compare-table tr th, .compare-table tr td.plan {

	color: #364B8C !important;
	font-family: joy-bold;
	font-size: 15px;
  }

  .rodium{
	  background-color:#d6e1d4 !important;/* rodium */
  }

  .platinum{
	  background-color:#b5b5b5 !important;/* platinum */
  }

  .gold{
	background-color:#ffdc73 !important;/* gold */
}

  .iridium{
	background-color:#393339 !important;/* iridium */
	color:#fff !important;
}
  .silver{
	background-color:#C0C0C0 !important;/* silver */

}


.Rhodium, .Rhodium-AD{
	background-color:#d6e1d4 !important;/* rodium */
	border:1px solid #d6e1d4 !important;/* rodium */
	color:#000 !important;
	padding:5px 10px;
	font-size: 14px;
	height: 50px;
	width:130px;
}

.Platinum, .Platinum-AD{
	background-color:#b5b5b5 !important;/* platinum */
	border:1px solid #b5b5b5 !important;/* platinum */
	color:#000 !important;
	padding:5px 10px;
	font-size: 14px;
	height: 50px;
	width:130px;
}

.Gold, .Gold-AD{
	background-color:#ffdc73 !important;/* platinum */
	border:1px solid #ffdc73 !important;/* rodium */
	color:#000 !important;
	 padding:5px 10px;
	 height: 50px;
	font-size: 14px;
	width:130px;
}

.prod5{
	background-color:#393339 !important;/* platinum */
	border:1px solid #393339 !important;/* rodium */
	color:#fff !important;
	 padding:5px 10px;
	 height: 50px;
	font-size: 14px;
	width:130px;
}

.Silver, .Silver-AD{
	background-color:#C0C0C0 !important;/* platinum */
	border:1px solid #C0C0C0 !important;/* rodium */
	color:#000 !important;
	padding:5px 10px;
	height: 50px;
	font-size: 14px;
	width:130px;
}

.Zumurrod, .Zumurrod-AD{
	background-color:#d6e1d4 !important;/* rodium */
	border:1px solid #d6e1d4 !important;/* rodium */
	color:#000 !important;
	padding:5px 10px;
	font-size: 14px;
	width:130px;
	height: 50px;
}

.Diamond, .Diamond-AD{
	background-color:#b5b5b5 !important;/* platinum */
	border:1px solid #b5b5b5 !important;/* platinum */
	color:#000 !important;
	padding:5px 10px;
	font-size: 14px;
	width:130px;
	height: 50px;
}

.Yaqoot, .Yaqoot-AD{
	background-color:#ffdc73 !important;/* platinum */
	border:1px solid #ffdc73 !important;/* rodium */
	color:#000 !important;
	 padding:5px 10px;
	 height: 50px;
	font-size: 14px;
	width:130px;
}

.Opal, .Opal-AD{
	background-color:#393339 !important;/* platinum */
	border:1px solid #393339 !important;/* rodium */
	color:#fff !important;
	 padding:5px 10px;
	 height: 50px;
	font-size: 14px;
	width:130px;
}

.Marjan, .Marjan-AD{
	background-color:#C0C0C0 !important;/* platinum */
	border:1px solid #C0C0C0 !important;/* rodium */
	color:#000 !important;
	padding:5px 10px;
	height: 50px;
	font-size: 14px;
	width:96px;
}

.prod4{
	background-color: #22438a !important;/* platinum */
	border:1px solid #22438a !important;/* rodium */
	color: white !important;
	padding:5px 10px;
	height: 50px;
	font-size: 14px;
	width:130px;
}
.prod0{
	background-color:#ffe80a !important;/* platinum */
	border:1px solid #ffe80a !important;/* rodium */
	color:#000 !important;
	padding:5px 10px;
    height: 50px;
	font-size: 14px;
	width:130px;
}
.prod1{
	background-color:#e81d76 !important;/* platinum */
	border:1px solid #e81d76 !important;/* rodium */
	color: white !important;
	padding:5px 10px;
	height: 50px;
	font-size: 14px;
	width:130px;
}
.prod2{
	background-color:#7a2582 !important;/* platinum */
	border:1px solid #7a2582 !important;/* rodium */
	color: white !important;
	padding:5px 10px;
	height: 50px;
	font-size: 14px;
	width:130px;
}
.prod3{
	background-color:#C0C0C0 !important;/* platinum */
	border:1px solid #C0C0C0 !important;/* rodium */
	color:#000 !important;
	padding:5px 6px;
	height: 50px;
	font-size: 14px;
	width:130px;
}

.btn-active
{
	border:3px solid #841d80 !important;
}

.table-responsive{
	border: 2px solid #841d80;
    border-radius: 15px;
}
.border-bottom-right-15{
	border-bottom-right-radius: 15px;
}

.hyperlinks, .hyperlinks:hover{
	color: #000;
	/* font-family: joy-bold; */
	border-bottom:1px solid #000;
    /* font-size: 16px; */
}

.uploaded-doc{
	margin-top: 9px;
}



.uploaded-doc li a{
	font-size: 12px;
	cursor: pointer;
	color: #00a7e2;

}

.progress {
	height: 8px;
	margin: 40px auto;
	display: flex;
	max-width: 680px;
	position: relative;
}

@media iPadLDown {
	.progress {
		margin: 50px 15px 0 10px;
	}
}

.progress .item {
	display: flex;
	position: relative;
	flex-basis: 0;
	flex-grow: 1;
}

.progress .item:before {
    content: attr(data-label);
	display: block;
    color: #333;
    font-size: 14px;
    position: absolute;
    top: -30px;
    width: 100%;
    text-align: center;
  }

/* .progress .item:before {
    content: attr(data-label);
    display: block;
    color: #333;
    font-size: 14px;
    position: absolute;
    top: -30px;
    width: 100%;
    text-align: center;
} */

.progress .item:after {
	width: 24px;
    height: 24px;
    content: '';
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: -12px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border: 1px solid #dadada;
    background-color: #f5f5f5;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 100%;
    z-index: 9;
}

.progress .item.completed:after {
	background-color:#3cb2b2;
	background-image: url("../assets/images/icon-check.svg");
	border-color: #3cb2b2;
}


.progress .item.completed .step {
	background:#3cb2b2;
	border-color:#3cb2b2;
	border-right-color:#3cb2b2;
	border-left-color:#3cb2b2;
}

.progress .item .step {
	display: flex;
	flex-basis: 0;
	flex-grow: 1;
	border:1px solid #dadada;
	background: #f5f5f5
}

.progress .item .step.completed {
	background : #ff9000 ;
	border-color: #ff9000 ;
	border-right-color: #ff9000;
	border-left-color: #ff9000;
}

.progress .item .step.completed + .step {
	border-left-color: #ff9000;
}

.progress .item:first-child .step:first-child {
	border-radius: 45px 0 0 45px;
}


div.item.ng-star-inserted ::before
{
    display: block;
    color: #333;
    font-size: 14px;
    position: absolute;
    top: -30px;
    width: 100%;
    text-align: center;
}
.text-highlight {
	font-family: fontMedium;
	display: block;
	margin-bottom: 7px;
  }
  .progress .item::after, ::before
  {

	box-sizing: inherit;
  }

  .custome-card {
	box-shadow: 0px 5px 16px 0px #E5E6E3 !important; }
  
  .custome-card-header {
	background-color: #364B8C;
	color: #fff;
	font-family: "Quicksand-Bold";
	font-size: 16px;
	padding: 13px 20px;
	border-radius: 5px 5px 0 0 !important; }
  
   .card-body {
	background-color: #fff;
	border-radius: 0 0 5px 5px !important;
	border: none !important; }

	.card-header-font{
    font-size: 18px;
	}
	.card-header::after {
		content: "\f078";
		font-family: "FontAwesome";
		position: absolute;
		top: 12px;
		right: 19px; }

		.card-header.active::after {
			content: "\f077";
			font-family: "FontAwesome";
			position: absolute;
			top: 12px;
			right: 19px; }
		.loader-img {
			width: 10%; }

			.modal-xxl .modal-lg {
				max-width: 90%;
			}

			.form-group{
				margin-bottom:20px !important;
			}



			.plan-header {
				background-color: #00A7E2;
				color: #fff;
				font-size: 18px;
				border-radius: 5px 5px 0px 0px;
				padding: 5px 5px;
				font-family: Quicksand-Bold;
				transition: ease-out 0.8s;
				padding-top: 0px;
				padding-bottom: 0px; 
				height: 25px;
			  }
			  
			  .div.plan-header [aria-expanded=true] {
				background-color: #fff; }
			  
			  
			  a .plan-header::after {
				font-family: "FontAwesome";
				position: absolute;
				top: 12px;
				right: 19px;
				/* content: "\f077"; */
				content: "";
			   }
			  
			  a.collapsed .plan-header::after {
				content: "\f078";
				font-family: "FontAwesome";
				position: absolute;
				top: 12px;
				right: 19px; }




				.select-plan-heading{
					color:    #006699;	
					font-family: "Quicksand-bold";	
					font-size: 14px;
					font-weight:bold; 
					text-transform: uppercase;
					margin-bottom: 0px; 
				}
				
				.plan-details{
					color: "bodytext-color";	
					font-family: "Quicksand-Regular";	
					font-size: 13px;
					font-weight:bold;
					line-height: 18px;
					margin-bottom: 0px;
					
				}
				
				.plan-details-link, a.plan-details-link:hover{
					color:l#00A7E2 !important;
					text-decoration: underline !important;
					font-size: 14px;
					font-weight:bold;
					line-height: 18px;	
					cursor: pointer;
				}
				
				.select-plan-title{
					color: "bodytext-color";	
					font-family: joy-medium !important;	
					font-size: 14px;
					margin-bottom: 0px;	
					text-transform: uppercase;  
				}
				
				.selected-plan-name{
					color: "secondary-color";	
					font-family: joy-medium !important;
					font-size: 16px;
					margin-bottom: 0px;
				}
				
				.plan-details-group{
					border:1px solid #00A7E2;
					border-radius:0px 0px 5px 5px;
					padding: 5px;
				}



				.plan-details-link, a.plan-details-link:hover {
					color: #00A7E2 !important;
					text-decoration: underline !important;
					font-size: 14px;
					font-weight: bold;
					line-height: 18px;
					cursor: pointer; }




					.select-plan-title {
						color:#7b2a83;;
						font-family:joy-medium !important;;
						font-size: 14px;
						margin-bottom: 0px;
						text-transform: uppercase;
						font-weight: bolder;

					 }
					  
					  .selected-plan-name {
						color: #F16648;
						font-family: joy-medium !important;
						font-size: 16px;
						margin-bottom: 0px; }
			
						.vat {
							font-family: Quicksand-Bold;
							font-size: 10px;
							margin-bottom: 0px;
							color: #5C5E5C !important; }

							.bulbicon{
								font-size: 16px;
							}

							.responsive-table1 {
								overflow-x: auto;
								border: 0.125em solid #841D80;
								border-radius: 18px;
							}

							.responsive-table1 table {
								border-collapse: collapse;
								background-color: #fff;
								border-radius: 15px;
								width: 100%; }
							  .responsive-table1 th {
								/*  background-color: #eee; */
								font-weight: bold; }
							  .responsive-table1 th,
							  .responsive-table1 td {
								border: 0.125em solid #E5E6E3;
								line-height: 1.5;
								/* padding: 10px 20px; */
								text-align: left; }
						  
							  .responsive-table1 th{
								  font-size: 14px;
								  /* text-transform: uppercase;  */
								  font-family: joy-bold;
								  color:#757575;
								  background: #f8f6f6;
								  text-align: center;
							  }
							  .whatsapp-container {
								position: fixed;
								bottom: 20px;
								right: 5px;
								text-align: center;
								display: flex;
								flex-direction: column;
								align-items: center;
							  }
							  
							  .whatsapp-logo {
								width: 150px; /* Adjust size as needed */
								height: 100px;
								bottom: 20px;
								right: 5px;
								cursor: pointer;
							  }
							  
							  .whatsapp-message {
								font-size: 15px;
								color: #6a1b9a; /* Purple color */
								text-align: center;
								font-weight: bold;
								margin-top: 3px;
								width: 200px; /* Adjust width to control line break */
								white-space: normal; /* Allow text wrapping */
								line-height: 1.3; /* Improve readability */
							  }