/* Fonts */
 @font-face {
    font-family: 'SF UI Display Ultralight';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Ultralight'), url('https://dlifeinteriors.com/wp-content/themes/d-life/assets/fonts/sf-ui-display-ultralight-58646b19bf205.woff') format('woff');
    }
    

    @font-face {
    font-family: 'SF UI Display Thin';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Thin'), url('https://dlifeinteriors.com/wp-content/themes/d-life/assets/fonts/sf-ui-display-thin-58646e9b26e8b.woff') format('woff');
    }
    

    @font-face {
    font-family: 'SF UI Display Light';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Light'), url('https://dlifeinteriors.com/wp-content/themes/d-life/assets/fonts/sf-ui-display-light-58646b33e0551.woff') format('woff');
    }
    

    @font-face {
    font-family: 'SF UI Display Medium';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Medium'), url('https://dlifeinteriors.com/wp-content/themes/d-life/assets/fonts/sf-ui-display-medium-58646be638f96.woff') format('woff');
    }
    

    @font-face {
    font-family: 'SF UI Display Semibold';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Semibold'), url('https://dlifeinteriors.com/wp-content/themes/d-life/assets/fonts/sf-ui-display-semibold-58646eddcae92.woff') format('woff');
    }
    

    @font-face {
    font-family: 'SF UI Display Bold';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Bold'), url('https://dlifeinteriors.com/wp-content/themes/d-life/assets/fonts/sf-ui-display-bold-58646a511e3d9.woff') format('woff');
    }
    

    @font-face {
    font-family: 'SF UI Display Heavy';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Heavy'), url('(https://dlifeinteriors.com/wp-content/themes/d-life/assets/fonts/sf-ui-display-heavy-586470160b9e5.woff') format('woff');
    }
    

    @font-face {
    font-family: 'SF UI Display Black';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Black'), url('https://dlifeinteriors.com/wp-content/themes/d-life/assets/fonts/sf-ui-display-black-58646a6b80d5a.woff') format('woff');
    }
@font-face {
    font-family: 'SF UI Display Regular';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Regular'), url('https://dlifeinteriors.com/wp-content/themes/d-life/assets/fonts/sf_ui_display_regular.woff') format('woff');
    }
	@font-face {
  	  font-family: 'westack';
  	  font-style: normal;
  	  font-weight: normal;
  	  src: local('Westack'), url('https://dlifeinteriors.com/wp-content/themes/d-life/assets/fonts/Westack.ttf') format('truetype'), url("https://dlifeinteriors.com/wp-content/themes/d-life/assets/fonts/Westack.otf") format("otf"), url("https: //dlifeinteriors.com/wp-content/themes/d-life/assets/fonts/Westack.woff") format("woff");
  	}

	
	 .resume {
  margin-top: 0px;
  width: 210mm;
      height: fit-content;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 14px,
    rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 14px 56px;
}
			.non-clickable {
	display:none;
        }
			  .dis_none{
	     overflow: hidden;  /* Hide content during collapse */
      height: 0;  /* Start with 0 height */
      opacity: 0; /* Start as invisible */
      transition: height 0.5s ease, opacity 0.5s ease; /* Animate height and opacity */
      display: none; /* Initially hidden */
	  }
	.date-container {
    font-size: 16px;
    line-height: 15px;
    color: #000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid #606060;
    border-radius: 10px;
    transition: border-color 0.3s ease;
    font-size: 16px;
    font-family: 'SF UI Display Light';
    margin-bottom: 10px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.date-container:focus, .date-container:active{
  border-color: #814882;
    box-shadow: 0 0 0 0.5px #814882;
 }
.date-item {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}
.date-item svg {
  font-size: 24px;
  margin-right: 10px;
}
.date-item svg path {
    fill: #46637A;
  }
.date-item span {
  display: block;
  color: #b4b4b4;
  font-size: 10px;
  margin-bottom: 0px !important;
}


.date-item .fa-calendar-alt {
  margin-right: 10px;
  color: #46637a;
  font-size: 30px;
}
#picker-container {
  position: relative;
}
.datetext{
cursor: pointer;
    font-size: 12px !important;
    font-family: 'SF UI Display Medium';
    color: #000000 !important;
}
.datepicker {
  top: 46px !important;
  left: 0px !important;
      min-width: 150px;
}
.datepicker td, .datepicker th {
    text-align: center;
    width: 20px;
    height: 20px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: none;
    padding: 3px;
}
.datepicker-days thead{
background: #814882;
    color: white;
    font-size: 14px;
}
.datepicker-days tbody{font-size: 14px;}
.datepicker table tr td.active.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled.disabled, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover.active, .datepicker table tr td.active.disabled:hover.disabled, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active.disabled:hover[disabled], .datepicker table tr td.active.disabled[disabled], .datepicker table tr td.active:active, .datepicker table tr td.active:hover, .datepicker table tr td.active:hover.active, .datepicker table tr td.active:hover.disabled, .datepicker table tr td.active:hover:active, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active:hover[disabled], .datepicker table tr td.active[disabled],.datepicker table tr td span.active.active, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled.disabled, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active.disabled:hover.active, .datepicker table tr td span.active.disabled:hover.disabled, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active.disabled:hover:hover, .datepicker table tr td span.active.disabled:hover[disabled], .datepicker table tr td span.active.disabled[disabled], .datepicker table tr td span.active:active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active:hover.active, .datepicker table tr td span.active:hover.disabled, .datepicker table tr td span.active:hover:active, .datepicker table tr td span.active:hover:hover, .datepicker table tr td span.active:hover[disabled], .datepicker table tr td span.active[disabled] {
    background-color: #814882;
	background-image: linear-gradient(to bottom, #814882, #814882);
}
.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover {
    background: #0044cccc;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:'SF UI Display Light';
	font-weight:normal;
	font-size: 16px;
}


body{
   /* background-image: url(https://dlifeinteriors.com/wp-content/uploads/2024/01/Web-Banner-2.jpg);*/
    background-repeat: no-repeat;
    background-position-y: -118px;
    background-size: contain;
	font-size: 14px;
}
.mt-1 {
      margin-top: 10px !important;
}
.hero-section .content h2 {
 max-width: 600px;
    font-family: 'SF UI Display Light';
    font-weight: normal;
    font-size: 55px;
    line-height: 48px;
}

.hero-section .content p {
    max-width: 1200px;
    margin-top: 18px;
}
.swal2-html-container{
font-size:16px;
}
.swal2-actions button{
width: fit-content;
}
.hr_dlife{
background:#414042;
height:4px;
margin-bottom:-3px;
}
	.row>* {
	padding-left:5px;
	padding-right:5px;
	margin-right:0px;
	margin-left:0px;
	}
	.row {
	padding-left:5px;
	padding-right:5px;
	margin-right:0px;
	margin-left:0px;
	}
	.flex {
    display: flex;
	padding-bottom: 10px;
	align-items: baseline;
}
.head_sec {
   margin-top: -110px;
    margin-bottom: 80px;
    }
	.sub_head{
	font-family: 'SF UI Display Medium';
    font-size: 14px;
    color: #808080;
    letter-spacing: -0.3px;
	line-height: 12px;
    padding-bottom: 15px;
	}
<!-- crop img style -->
 
 label.cabinet{
	display: block;
	cursor: pointer;
}

label.cabinet input.file{
	position: relative;
	width: auto;
	opacity: 0;
	-moz-opacity: 0;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
  margin-top:-30px;
}
.center-block{
display: block;
    margin-right: auto;
    margin-left: auto;
}
.gambar{
width: 150px;
    height: 150px;
	border-radius: 50%;
  }
  figure{
  align-items: center;
  display: flex;
  justify-content: center;
  }

#upload-p_img{
	width: 250px;
	height: 250px;
  padding-bottom:25px;
}
.upload_plus{
background: url(https://dlifeinteriors.com/wp-content/uploads/2025/06/upload_plus.svg);
    position: absolute;
    width: 28px;
    height: 28px;
    display: inline-block;
    margin-top: 145px;
    background-size: contain;
}
<!-- end crop img style -->

.c_b_l{
margin-bottom: 4px;
    padding: 3px 0 3px 0;
}
.w_25{ width:25%!important;}
.w_50{ width:50%!important;}
.w_75{ width:75%!important;}
.w_1_3{ width:33.334%!important;}
	.row_dis{
	display: flex;
	}
	.row_dis > div:nth-child(1){     padding-right:5px} .row_dis > div:nth-child(1) .form__label{margin-left:5px; left:5px;}
	.row_dis > div:nth-child(2){     padding-left:5px;}  .row_dis > div:nth-child(2) .form__label{margin-left:10px !important;left:5px;}
	.row_dis > div:nth-child(3){    padding-left:10px} .row_dis > div:nth-child(3) .form__label{margin-left:5px;left:5px;}
	.fst_row_dis{
	display: flex;
	}


	.fst_row_dis > div:nth-child(1){     padding-right:5px;}
	.fst_row_dis > div:nth-child(2){    padding-left:5px;} .fst_row_dis > div:nth-child(2) .form__label{margin-left:5px;}
	.fst_row_dis > div:nth-child(3){    padding-left:10px}
	
	.flex_none{display: flex;}
	.flex_none > div:nth-child(1){     padding-right:5px; }
	.flex_none > div:nth-child(2){     padding-left:5px;}
	.row_dis #checkboxes, .row_dis #checkboxes1, .row_dis #checkboxes2{ display:flex;}
     #checkboxes label, #checkboxes1 label, #checkboxes2 label{
	 letter-spacing: -0.5px;
    word-spacing: 0.22px;
    color: #A3A3A3;
    font-size: 14px;
	    margin-left: 2px;
		text-align: left;
		line-height: 20px;
    margin-top: 0px;
	 }
		  #checkboxes span,  #checkboxes1 span,  #checkboxes2 span{
		   padding-right: 5px;
    letter-spacing: -1px;
    word-spacing: 0.22px;
    text-align: left;
    display: block;
	margin-bottom: 10px;
    }
	.label_text{
	width:95%;
	}
	.none{ display:none;}
.Dlife_header {
    height: 9cm;
    background: #7A4183;
    margin-bottom: -8.2cm;
}
.hero-section {
     background: #ffffff;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	max-width: 950px;
    margin: 0 auto;
    margin-top: 85px;
	    margin-bottom: 5px;
}

.hero-section .content {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    color: #000;
    text-align: justify;
    padding: 100px 50px 50px 50px;
}
 
.hero-section .bg {
    background-size: 68%;
}
.hero-section .content {
    padding: 80px 70px 50px 70px;
}
.content .logo {
    right: 6%;
    position: absolute;
}
#progress-form__panel-1, #progress-form__panel-2, #progress-form__panel-3, #progress-form__panel-4{
    z-index: 99;
    position: relative;
	margin-top:-100px;
}
.dlife_logo{ margin-top:125px;text-align: end; margin-right:0%;}
.dlife_logo img{ width:195px;
        z-index: 999;
        position: relative;
}
.head_one{
 color: #211E1F;
    font-size: 50px;
    line-height: 28px;
    font-family: 'SF UI Display Regular';
    font-weight: normal;
    padding-top: 25px;
	letter-spacing: -2px;
    word-spacing: 0.15px;
}
.head_two{
color: #211E1F;
    font-size: 70px;
    line-height: 58px;
    font-family: 'SF UI Display Semibold';
    font-weight: normal;
    padding-top: 10px;
    letter-spacing: -1.8px;
}
.head_caption{
       font-size: 22px;
    color: #606060;
    font-family: 'SF UI Display Regular';
    padding-top: 22px;
    line-height: 20px;
    letter-spacing: -1px;
    word-spacing: 0.5px;
	text-align: left;
}
.hrForm{ margin-top:121px;
padding-left: 0px;
    padding-right: 0px;
}
form h6, .modal h6, .modal_exp h6{
       font-size: 18px;
    font-family: 'SF UI Display Medium';
    color: #000;
    margin-bottom: 6px;
    letter-spacing: -0.15px;
    word-spacing: 0.02px;
    line-height: 18px;
	margin-top: 25px;
	margin-bottom: 15px;

}
.dashed-2 {
  border: none;
  height: 1px;
  background: #000;
  margin-top: 2px;
  margin-bottom: 30px;
  background: repeating-linear-gradient(90deg,#000,#000 6px,transparent 6px,transparent 10px);
  margin-left:10px;
  margin-right:10px;
  width: 98%;
}
label {
      display: inline-block;
    line-height: 10px;
    font-size: 16px;
  font-family: 'SF UI Display Light';
    color: #808080;
    letter-spacing: -0.1px;
    word-spacing: 0.04px;
    margin-top: 5px;
		text-align: left;
		line-height: 15px;
		    padding-right:10px;
}
.form-control, .form-select{
    line-height: 25px;
    color: #101010;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
   border: var(--bs-border-width) solid #EAEAEA;
    border-radius: 7px;
	transition: border-color 0.3s ease;
	font-size: 18px;
  font-family: 'SF UI Display Light';
  margin-bottom: 15px;
      height: 45px;
	  padding-left: 10px;
  
}
.modal-content .form-control, .modal-content .form-select {
 margin-bottom: 14px;
}
.form-control_style2{
    border: 1px #000;
    border-style: none none solid none;
    border-radius: 0px;
    line-height: 0px;
    font-size: 16px;
    font-family: 'SF UI Display Light';
    padding: 0px;
    margin-left: 10px;
	display: block;
    width: 100%;
	padding-left: 5px;
	}
.form-select option{ 
    font-size: 16px;
    font-family: 'SF UI Display Light';
    color: #000;
    letter-spacing: -1px;
    word-spacing: 0.04px;}
	.form-control:disabled {
    background-color: unset;
}
  

input::-moz-selection{
  background: #814882;
}
.form-control:focus, .form-control:active, .form-select:focus, .form-select:active {
  border-color: #814882;
    box-shadow: 0 0 0 0.5px #814882;
 }
 .bootstrap-select:focus, .bootstrap-select:active{
   box-shadow: none;
 }
 .form-control_style2:focus, .form-control_style2:focus {border-color:#814882;
    box-shadow: 0 0 0 0 #814882;}
.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-size: 14px;
  font-family: 'SF UI Display Light';
  color: #606060;
  letter-spacing: -0.3px;
 
}

.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  opacity: 0.5; /* Firefox */
  font-size: 14px;
  font-family: 'SF UI Display Light';
  color: #606060;
  letter-spacing: -0.3px;
}

.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-size: 14px;
  font-family: 'SF UI Display Light';
  color: #606060;
  letter-spacing: -0.3px;
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
   font-size: 14px;
  font-family: 'SF UI Display Light';
  color:#606060;
  letter-spacing: -0.3px;
}

.form-control::-moz-placeholder { /* Firefox 19+ */
    font-size: 14px;
  font-family: 'SF UI Display Light';
  color: #606060;
  letter-spacing: -0.3px;
}

.form-control:-moz-placeholder { /* Firefox 18- */
  font-size: 14px;
  font-family: 'SF UI Display Light';
  color: #606060;
  letter-spacing: -0.3px;
}

.p_right::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  text-align:right;
}
.p_right::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
   text-align:right;
}

.p_right:-ms-input-placeholder { /* Internet Explorer 10-11 */
     text-align:right;
}

.p_right::-ms-input-placeholder { /* Microsoft Edge */
     text-align:right;
}

.p_right::-moz-placeholder { /* Firefox 19+ */
     text-align:right;
}

.p_right:-moz-placeholder { /* Firefox 18- */
     text-align:right;
}

.select-btn{
    display: flex;
   padding: .375rem .75rem;
    font-weight: 400;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    cursor: pointer;
	font-size: 16px;
    line-height: 1.7;
    color: #000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid #606060;
    border-radius: 10px;
    transition: border-color 0.3s ease;
    font-size: 16px;
    font-family: 'SF UI Display Light';
    margin-bottom: 10px;
}
.select-btn .btn-text{
    font-size: 17px;
    font-weight: 400;
    color: #333;
}
.select-btn .arrow-dwn{
    display: flex;
    height: 15px;
    width: 15px;
    color: #000000;
    font-size: 12px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}
.select-btn.open .arrow-dwn{
    transform: rotate(-180deg);
}
.list-items{
    position: relative;
    margin-top: 0px;
    border-radius: 5px;
    padding: 2px;
    background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    max-height: 250px;
    overflow-y: scroll;
    overflow-x: hidden;
    display: none;
}
.select-btn.open ~ .list-items{
    display: block;
}

/* Always show the scrollbar of the dropdown */
.select-btn.open ~ .list-items::-webkit-scrollbar {
    width: 8px;
    height: 0;
}
.select-btn.open ~ .list-items::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.2);
    border-radius: 8px;
}
.select-btn.open ~ .list-items::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0,.3);
}

.list-items .item{
    display: flex;
    align-items: center;
    list-style: none;
    cursor: pointer;
    transition: 0.3s;
    padding: 10px 15px;
    border-radius: 2px;
}
.list-items .item:hover{
    background-color: #e7edfe;
}
.item .item-text{
    font-size: 16px;
    font-weight: 400;
    color: #333;
	letter-spacing: -1px;
    word-spacing: 0.04px;
}
.item .checkbox{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    width: 16px;
    border-radius: 0px;
    margin-right: 12px;
    border: 1.5px solid #c0c0c0;
    transition: all 0.3s ease-in-out;
}
.item.checked .checkbox {
    background-color: rgb(28 81 175);
    border-color: rgb(28 81 175);
}
.checkbox .check-icon{
    color: #fff;
    font-size: 11px;
    transform: scale(0);
    transition: all 0.2s ease-in-out;
}
.item.checked .check-icon{
    transform: scale(1);
}
.placeholder_color {
    font-family: 'SF UI Display Light' !important;
  color: #808080 !important;
   font-size: 16px !important;
}
.form-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
   /* -webkit-print-color-adjust: exact;
    color-adjust: exact;*/
    display: inline-block;
	vertical-align: sub;
    background-origin: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    flex-shrink: 0;
       color: #4299e100;
    background-color: #fff0;
    border-width: 1px;
    height: 17px;
    width: 17px;
    border-radius: 3px;
    margin-right: 4px;
    border: 1.5px solid #808080;
	border-radius: 3px;
    transition: all 0.3s ease-in-out;
}




.form-checkbox:checked {

  border: 1.5px solid #808080;
    background: #81498200;
   
}
[type="checkbox"]:checked + label {
    color: #000;
   
}
.form-checkbox:checked::before {
   content: " ";
    position: absolute;
    width: 20px;
    height: 20px;
    margin-top: -5px;
    margin-left: 2px;
    background: url("data:image/svg+xml,%3Csvg id='svg' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='150' height='150.50847457627117' viewBox='0, 0, 400,390.50847457627117'%3E%3Cg id='svgg'%3E%3Cpath id='path0' d='M242.874 136.269 C 177.709 211.198,123.709 273.024,122.874 273.660 C 121.918 274.388,100.889 262.789,66.059 242.323 C 5.345 206.647,0.000 204.599,0.000 217.005 C 0.000 219.266,113.846 379.804,120.396 386.780 C 124.635 391.295,133.591 391.983,138.031 388.136 C 142.138 384.575,372.881 10.052,372.881 6.945 C 372.881 3.169,369.267 -0.003,364.988 0.017 C 361.867 0.032,344.692 19.195,242.874 136.269 ' stroke='none' fill='%23814982' fill-rule='evenodd'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") 0px center no-repeat;
    background-size: 100% 100%;
}
input[type='checkbox']:disabled {
    color: #959495;
    cursor: not-allowed;
    border: 1px solid #959495;
}


input[type="date"] {
	text-align:right;
  cursor:pointer;
  color: #b8b8b8;
}

#working_c, #graduated_sec, #p_graduated_sec, #children_sec, #siblings_sec{display:none;}

.open_select{
opacity: .2;

}
.open_select input{ pointer-events: none;}

[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + label
{
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #000;
	padding-right: 3%;
}
[type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #808080;
	padding-right: 3%;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
      width: 18px;
    height: 18px;
    border: 1.5px solid #808080;
    border-radius: 100%;
    background: #fff;
	
	
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
      content: '';
      width: 10px;
    height: 10px;
    background: #814982;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
	border: 1.5px solid #808080;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.button_close{
text-align: center;
    width: 40px;
    background: #814882;
    padding: 3px;
    border-radius: 10px;
    color: white;
    font-size: 40px;
    line-height: 30px;
    height: 40px;
    position: relative;
    float: right;
}
.button_remove{
text-align: center;
    padding: 2px;
    border-radius: 10px;
    color: #814882;
    font-size: 16px;
    line-height: 30px;
    position: relative;
    float: right;
    right: -20px;
    top: 12px;
    display: inline-block;
}

.button_remove:focus, .button_remove:active, .button_remove:hover{
color:red;
}
.add_exp_btn{
	padding: 7px;
    border-radius: 8px;
    color: #808080;
    width: 100%;
        border: var(--bs-border-width) solid #EAEAEA;
    background: #ffffff;
    letter-spacing: -1px;
    word-spacing: 0.04px;
    font-size: 16px;
    text-align: center;
    line-height: 30px;
    height: 45px;
    position: relative;
    margin-top: 5px;
    margin-bottom: 15px;
	float: right;

}
.add_remove_btn{
text-align: center;
    width: 45px;
    background: #814882;
    padding: 10px;
    border-radius: 10px;
    color: white;
    line-height: 15px;
    height: 40px;
    margin: 0px 0px 0px 10px;
    font-size: 30px;
}

.exp_desk_style{ margin-bottom:-70px;}
.btn_class{ margin-top: -40px;
    margin-bottom: 15px;
	}
	#efb-canvas{
	border: 1px dotted #CCCCCC !important;
  border-radius: 7px;
  cursor: crosshair;
	}
	
	/* drag and drop */
	.drop-zone {
  width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    border: 1px solid #EAEAEA;
    border-radius: 7px;
    min-height: 200px;
    padding-top: 30px;
    padding-bottom: 30px;
}
.drop-zone .drop_thunb_add{ margin-bottom:20px;margin: auto;}
.drop-zone .btn{     border: 1px solid #A3A3A3;
    padding: 0px 20px 0px 0px;
    margin-right: 10px;
    border-radius: 10px;
    align-items: center;
    vertical-align: bottom;
    word-wrap: break-word;
    display: flex;}
.drop-zone .btn i{    border: 2px solid #A3A3A3;
    padding: 6px;
    border-radius: 5px;
    font-size: 25px;
    color: #b3b3b3; margin-right:10px;
	border-radius: 10px;}

.drop-zone--over {
  border-style: solid;
}

.drop-zone__input {
 /* display: none; */
       width: 0px;
    display: block;
    height: 0px;
    visibility: hidden;
}

.drop-zone__thumb {
  width: 100%;
  height: 100%;
  border-radius: 7px;
  overflow: hidden;
  background-color: #cccccc;
  background-size: cover;
  position: relative;
    color: white;
    margin: auto;
    min-height: 175px;
}
.drop-area-logo {
      width: 80px;
    height: 80px;
    background: #EAEAEA 0% 0% no-repeat padding-box;
    border-radius: 50%;
   top: 35%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}
.uploadSecText{
    position: absolute;
    font-size: 18px;
    display: block;
    letter-spacing: -0.25px;
    color: #101010;
    text-transform: capitalize;
    font-family: SF UI Display Medium;
    margin-top: 20px;
    left: 0;
    right: 0;
}

.submit_btn{
padding: 0px 20px 0px 20px;
    border-radius: 10px;
    color: #fff;
    width: 80%;
    border: 1px solid #814882;
    background: #814882;
    margin-bottom: 10px;
    font-family: 'SF UI Display Semibold';
    letter-spacing: -1px;
    word-spacing: 0.04px;
    font-size: 14px;
    text-align: center;
    line-height: 25px;
    height: 40px;
	    margin: 0px auto;
    display: block;
	    max-width: 350px;
}
.progress-button{
    position: relative;
    margin: 0px;
    bottom: 0px;
    width: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 15px;
	margin-top: 40px;
}
.progress-button button{
width: 100%;
border-radius: 7px;
font-family: 'SF UI Display Light';
font-weight: 100;
etter-spacing: -0.1px;
font-size:18px;
}
.progress-button button[data-action="prev"] {
background-color:#D3D3D3;
color:#808080;
}
.progress-button button[data-action="next"] {
background-color:#7A4183;
color:white;
}
.progress-button button[data-action="prev"]:hover {
background-color:#808080;
color:#D3D3D3;
}
.progress-button button[data-action="next"]:hover {
background-color:#4c2951;
color:white;
}
.btn-primary{
background-color:#7A4183;
border:none;
}

.drop-zone__thumb::after {
  content: attr(data-label);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px 0;
  background: rgba(0, 0, 0, 0.75);
  font-size: 14px;
  text-align: center;
}


.signing{
    border: 2px dotted #CCCCCC;
    border-radius:7px;
    cursor: crosshair; 
	min-height:180px;
}
 ::-webkit-scrollbar {
     width: 10px;
     background-color: #F5F5F5;
     border-radius: 0 0 5px 0;
}
 ::-webkit-scrollbar-thumb {
     border-radius: 10px;
     background-color:#9E9E9E;
}

.error-message {
    color: red;
    margin-bottom: 20px;
    margin-top: -10px;
    font-size: 12px;
    height: 5px;
	text-align:left;
	min-width:120px;
	z-index:99;
}
.error {
    border: 1px solid #e3685f !important;
}
.error-msg{
color: red;
    position: absolute;
    margin-top: 42px;
    font-size: 12px;
	display:none;
}
.center-block .error-message{
width:100%;
text-align:center;
}
#checkboxes .error-message, #checkboxes1 .error-message, #checkboxes2 .error-message, #children_sec .error-message, #siblings_sec .error-message{
    position: absolute;
	     margin-top: -15px;
}
#error-for-lang_opt{position: absolute;}
#checkboxes #error-for-if_staff, #checkboxes #error-for-if_other{     margin-top: 10px;
    width: 60%;
    text-align: center;
    line-height: 36px;}
	#resume__error, #input_file_sign__error{ margin-top:0px;}

#file_signing .error-message{
position: absolute;
    margin-top: 55px;
}
#language_field__error{
margin-top:-20px;
}
.date-item .error-message{
    margin-top: 2px!important;
    margin-left: -30px!important;
    color: red;
    letter-spacing: 0px !important;
}
.drop_thunb_add .error-message{
width:100%;
text-align:center;
    margin-top: 0px;
}
#file_photo__error{
text-align: center;
    margin-top: 12px;
}
fieldset .form__error-text{
margin-top: -40px;
    position: absolute;
}
#job_open .form__error-text {
    margin-top: -50px;
    margin-left: 10px;
}


.card fieldset .form__error-text {
    margin-top: 13px;
    position: absolute;
}

.form__label {
	position: absolute;
	    font-size: 16px;
    font-family: 'SF UI Display Light';
	    top: 5px;
    left: 5px;
	color: #808080;
	cursor: text;
	transition: all .15s ease-in-out 0s;
	z-index: 9;
	padding-left:5px !important;
	margin-left:5px !important;
	line-height: 25px;
}
.form__label_select{
	position: absolute;
	    font-size: 16px;
    font-family: 'SF UI Display Light';
	    top: 5px;
    left: 10px;
	color: #808080;
	cursor: text;
	transition: all .15s ease-in-out 0s;
	z-index: -9;
	display:none;
}
/*.form-control:focus ~ .form__label,
.form-control:not(:placeholder-shown) ~ .form__label {
	top: -12px;
	left: 10px;
	cursor: pointer;
  padding-right: 2px;
    padding-left: 1px;
    font-size: 15px;
	    background: white;
		    line-height: 14px;
}*/
.form-control:focus ~ .form__label,
.form-control:valid ~ .form__label {
	top: -12px;
	left: 10px;
	cursor: pointer;
  padding-right: 2px;
    padding-left: 1px;
    font-size: 15px;
	    background: white;
		    line-height: 14px;
}
.form-select:focus ~ .form__label_select,
.form-select:valid ~ .form__label_select {
	top: -12px;
	cursor: pointer;
  padding-right: 2px;
    padding-left: 1px;
	margin-left:5px;
    font-size: 15px;
	    background: white;
		z-index:9;
		display:inline-block;
		    padding-bottom: 0px;
			line-height: 14px;
}
/* Basic settings */


.form__group {
  position: relative;
}
.add_sec_btn{
  padding: 7px;
    border-radius: 8px;
    color: #808080;
    width: 100%;
        border: var(--bs-border-width) solid #EAEAEA;
    background: #ffffff;
    letter-spacing: -1px;
    word-spacing: 0.04px;
    font-size: 16px;
    text-align: center;
    line-height: 30px;
    height: 45px;
    position: relative;
    margin-top: 5px;
    margin-bottom: 15px;
}
.card{
    font-size: 16px;
    line-height: 23px;
    color: #000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid #EAEAEA;
    border-radius: 7px;
    transition: border-color 0.3s ease;
    font-family: 'SF UI Display Light';
    margin-bottom: 10px;
    min-height: 45px;
}
.card-body {
padding-bottom:0px;
}
.modal_exp {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    padding-top: 100px;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}
.modal_exp .modal-content {
    background-color: #fff;
    margin: auto;
    padding: 20px;
    width: 96%;
    border-radius: 7px;
	max-width:550px;
}
.modal_exp .close {
    float: right;
    font-size: 28px;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 10px;
}
.experience-block {
position:relative;
margin-bottom: 10px;
    padding: 10px !important;
    border: 1px solid #EAEAEA;
	border-radius: 7px;
    line-height: 18px;
	background: #ffffffd9;
}
.floating-label {
    position: relative;
    margin-bottom: 5px;
}

.floating-label input,
.floating-label select {
    width: 100%;
  padding: 5px 5px 5px 10px;
    font-size: 18px;
    border: 1px solid #EAEAEA;
    border-radius: 4px;
    outline: none;
	line-height: 20px;
}

.floating-label label {
    position: absolute;
    top: 5px;
    left: 10px;
    color: #808080;
    font-size: 16px;
    background: white;
    padding: 0px;
    transition: 0.2s ease all;
    pointer-events: none;
	line-height: 26px;
	letter-spacing: -0.3px;
}

.floating-label input.filled + label,
.floating-label input:focus + label,
.floating-label select.filled + label,
.floating-label select:focus + label {
    top: -10px;
    left: 8px;
    font-size: 14px;
    line-height: 12px;
   
}
.expe{
font-size: 18px;
    font-family: 'SF UI Display Medium';
    margin-top: 0px;
	margin:0px;
	padding-bottom:5px;
}
.exp-actions {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  gap: 2px;
}

.exp-actions a {
width: 30px;
    height: 30px;
    border: none;
    background-color: #e0e0e000;
    border-radius: 4px;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    color: #808080;
	    text-decoration: none;
}
.exp-actions a:hover, .exp-actions a:focus{
color:#81558c;
}

.exp-actions button:hover {
 color: black;
}
.childrenCount{
    display: flex;
    align-items: center;
    gap: 10px;
    border: var(--bs-border-width) solid #EAEAEA;
    border-radius: 7px;
    width: 40%;
    max-width: 160px;
	padding: 5px;
}
.childrenCount button{
background: none;
    padding: 0px;
    margin: 0px;
	color:#7A4183;
	font-weight: 100;
    line-height: 10px;
    font-size: 25px;
	 width: 40%;
}
.childrenCount span{
 width: 40%;
min-width: 20px;
text-align: center;
font-size:18px;
}
#siblings_sec_add .form__error-text{
position:absolute;
}
.navbtn {
    position: fixed;
    top: 40%;
    right: -10px;
    transform: translate(-40%, -4%);
    height: 30px;
    width: 30px;
    border-radius: 50%;
    transition: 300ms ease-in-out;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
	padding: 0px;
	z-index:9999;
	background: #7a418394;
	line-height:10px;
	line-height: 28px;
    text-align: center;
    color: white;
}
.navbtn:hover, .navbtn:focus{
    background: #7a4183;
}
.navbtn i{font-size:12px;}
@media (min-width: 1500px) {
    .hero-section {
	max-width: 1080px;
}

  
}
@media (max-width: 980px) {
.drop-area-logo
 {
    top: 30%;
}
.uploadSecText {
    margin-top: 85px;
}
label {
    font-size: 16px;
	padding-right: 10px;
  
}
#error-for-lang_opt{position: relative;}
.drop-zone { display:inline-block;}
.row>* {
	padding-left:5px;
	padding-right:5px;
	margin-right:0px;
	margin-left:0px;
	}
	.row {
	padding-left:0px;
	padding-right:0px;
	margin-right:0px;
	margin-left:0px;
	}
    .hero-section {
        margin: 30px 30px 30px 30px;
    }
	.dashed-2 {
    width: 100%;
}

	.Dlife_header{
display:none;
}
.row_dis #checkboxes{
    display: inline;
}
.row_dis > div:nth-child(1){     padding-right:5px;}
	.row_dis > div:nth-child(2){     padding-left:5px;}
	.fst_row_dis > div:nth-child(1){     padding-right:5px;}
	.fst_row_dis > div:nth-child(2){     padding-left:5px;}
	
	.progress-button{
    position: fixed;
    margin: 0px;
    bottom: 0px;
    width: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
   padding: 10px 25px 20px 25px;
}
.progress-button button{
font-size:16px;
}
}
@media (max-width: 768px) {
.floating-label input,
.floating-label select {
    font-size: 16px;
}

.mt-1 {
      margin-top: 30px !important;
}
#progress-form__panel-1, #progress-form__panel-2, #progress-form__panel-3, #progress-form__panel-4 {
    z-index: 99;
    position: relative;
    margin-top: -30px;
}
.modal-content .error-msg {
    margin-top: 43px;
	font-size: 11px;
}
	.sub_head{
    font-size: 12px;
	}
#job_open .form__error-text {
    margin-top: -70px;
    margin-left: 0px;
}
input[type="date"] {
    color: #ffffff;
}
.card-body {
padding-bottom:10px;
}
.form__label {
	    top: 5px;

}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
      width: 16px;
    height: 16px;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    top: 3px;
    left: 3px;
}
.fst_row_dis > div:nth-child(2) .form__label{margin-left:0px;}
row_dis > div:nth-child(2) .form__label{margin-left:0px;}
.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-size: 12px;
  font-family: 'SF UI Display Light';
  color: #606060;
  letter-spacing: -0.3px;
 
}
.dlife_logo img {
    width: 165px;
    margin-right: 50px;
}

.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  opacity: 0.5; /* Firefox */
  font-size: 12px;
  font-family: 'SF UI Display Light';
  color: #606060;
  letter-spacing: -0.3px;
}

.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-size: 12px;
  font-family: 'SF UI Display Light';
  color: #606060;
  letter-spacing: -0.3px;
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
   font-size: 12px;
  font-family: 'SF UI Display Light';
  color:#606060;
  letter-spacing: -0.3px;
}

.form-control::-moz-placeholder { /* Firefox 19+ */
    font-size: 12px;
  font-family: 'SF UI Display Light';
  color: #606060;
  letter-spacing: -0.3px;
}

.form-control:-moz-placeholder { /* Firefox 18- */
  font-size: 12px;
  font-family: 'SF UI Display Light';
  color: #606060;
  letter-spacing: -0.3px;
}
.form-control, .form-select {
    line-height: 16px;
    color: #101010;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border-radius: 7px;
    transition: border-color 0.3s ease;
    font-size: 16px;
    font-family: 'SF UI Display Regular';
    margin-bottom: 15px;
    height: 45px;
	letter-spacing: -0.1px;
}
form h6, .modal h6, .modal_exp h6 {
    font-size: 16px;
    line-height: 16px;
	 margin-top: 10px;
}
.gambar {
    width: 110px;
    height: 110px;
}
.upload_plus{
    width: 24px;
    height: 24px;
    margin-top: 105px;
}
.img-thumbnail {
    padding: .15rem;
}
.drop-zone { display:inline-block;}
.row>* {
	padding-left:0px;
	padding-right:0px;
	margin-right:0px;
	margin-left:0px;
	}
	.row {
	padding-left:0px;
	padding-right:0px;
	margin-right:0px;
	margin-left:0px;
	}
    .hero-section {
        margin: 30px 30px 30px 30px;
    }
	.dashed-2 {
    width: 100%;
}
.p_right::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  text-align:left;
}
.p_right::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
   text-align:left;
}

.p_right:-ms-input-placeholder { /* Internet Explorer 10-11 */
     text-align:left;
}

.p_right::-ms-input-placeholder { /* Microsoft Edge */
     text-align:left;
}

.p_right::-moz-placeholder { /* Firefox 19+ */
     text-align:left;
}

.p_right:-moz-placeholder { /* Firefox 18- */
     text-align:left;
}

.row_dis > div:nth-child(1){     padding-right:5px; width:50%;}
	.row_dis > div:nth-child(2){     padding-left:5px;width:50%;}
	.fst_row_dis{ display:inline;}
	.fst_row_dis > div:nth-child(1){     padding-right:0px; width:100%;}
	.fst_row_dis > div:nth-child(2){     padding-left:0px; width:100%;}
	.fst_row_dis > div:nth-child(3) {
	display:inline;
	 padding-right:0px;
	 padding-left:0px; width:100%;
}
	.flex_none{display: inline-block;width: 100%;}
	.flex_none > div:nth-child(1){     padding-right:0px; }
	.flex_none > div:nth-child(2){     padding-left:0px;}
	.flex_none > div:nth-child(3){     padding-left:0px;}
	.Dlife_header, .mob_dis{
display:none;
}
.row_dis #checkboxes, .row_dis #checkboxes1, .row_dis #checkboxes2{
    display: inline;
}
 .label_text{
	width:65%;
	}
	.ref_mob{
	 display: flex;
  align-items: end;
  vertical-align: bottom;
  word-wrap: break-word;
	}
	#graduated_sec input{ margin-bottom:15px;}
	.exp_desk_style{ margin-bottom:0px;}
	.add_exp_btn{
	width: 100%;
        margin-top: 5px;
}
.btn_class{ margin-top:0px;
    margin-bottom:5px;
	padding-left:0px;}
	#exp_button{padding-left: 0px;}
	.floating-label label{
    left: 5px;
	line-height: 25px;
}
	.form-control:focus ~ .form__label,
.form-control:valid ~ .form__label {
    left: 5px;
	line-height: 15px;
	font-size: 12px;
     top: -12px;
}

.floating-label input.filled + label, .floating-label input:focus + label, .floating-label select.filled + label, .floating-label select:focus + label
 {
         top: -10px;
        font-size: 12px;
}
.form-select:focus ~ .form__label_select, .form-select:valid ~ .form__label_select
 {

    font-size: 12px;
}
}
@media (max-width: 580px) {
.expe {
    font-size: 16px;
}
#job_open .form__error-text {
    margin-top: -85px;
    margin-left: 0px;
}
.head_sec {
        margin-top: -55px;
        margin-bottom:55px;
    }
.none{ display:block;}
    .hero-section {
      margin: 0px 0px 0px 0px;
    }
	.hero-section .content {
    padding: 20px 20px 50px 20px;
}
.dlife_logo {
            margin-top: 60px;
        text-align: end;
        margin-right: 8%;
        padding-right: 20px;
}

.dlife_logo img {
    width: 120px;
	margin-right: 0px;
}
.head_one {
    color: #000;
    font-size: 32px;
    line-height: 20px;
    font-family: 'SF UI Display Regular';
    font-weight: normal;
    padding-top: 20px;
}
.head_two {
    color: #000;
    font-size: 40px;
    line-height: 15px;
    font-family: 'SF UI Display Semibold';
    font-weight: normal;
    padding-top: 10px;
}
.head_caption {
               font-size: 16px;
        color: #808080;
        font-family: 'SF UI Display Regular';
        padding-top: 20px;
        line-height: 15px;
        text-align: left;
       letter-spacing: -.65px;
}
.hrForm{ margin-top:60px;
padding-left: 0px;
    padding-right: 0px;
}
}
@media (max-width: 400px) {
label {
        font-size: 14px;
        padding-right: 0px;
    }
    .head_sec {
        margin-top: -70px;
        margin-bottom: 45px;
    }
}

@media (max-width: 380px) {
    #job_open .form__error-text
 {
        margin-top: -112px;
        margin-left: 0px;
    }
}
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: var(--bs-btn-active-color);
    background-color: #ffffff;
    border-color: var(--bs-btn-active-border-color);
}
.bootstrap-select>.dropdown-toggle {
    line-height: 25px;
    color: #000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid #606060;
    border-radius: 10px;
    transition: border-color 0.3s ease;
    font-size: 16px;
    font-family: 'SF UI Display Light';
    margin-bottom: 10px;
    height: 40px;
}
.bootstrap-select .dropdown-toggle:focus, .bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
    outline: none !important;
    outline: 0px auto -webkit-focus-ring-color !important;
    outline-offset: 0px;
	 border-color: #814882;
    box-shadow: 0 0 0 0.5px #814882;
}