* { 
  padding: 0px;
  margin: 0px; 
  box-sizing: border-box;
}
:after, :before {
    box-sizing: border-box;
}
a {
  text-decoration: none; 
}



ul, li {  
  list-style: none;
}
img {
  max-width: 100%;
}

h1 {
  font-size:6vw;
  font-weight: 500;
  text-align: center;
  color:#333;
  padding: 2vw 0;
  width: 100%;
}
h3 {
  font-size: 4vw;
color: #46515C;
font-weight: 700;
line-height: 3vw;
padding-bottom: 4vw;
padding-top: 2vw;
}
h4 {
  font-size: 4vw;
  text-transform: uppercase;
  color: #fff;
  font-weight: 800;
}
h5 {
  color: #000;
  font-size:5vw;
  padding: 0 1vw 3vw;
  font-weight: 700;
}
p {
  font-size:5vw;
  color:#888;
  font-weight:500;
  line-height:7vw;
}
h6 {
  font-size: 3vw;
  color: #fff;
  font-weight: 400;
  line-height: 4vw;
}
html, body{ margin:0px; padding:0px;}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  height:100vh;
}

body
{
  font-family: myriad-pro, sans-serif;
}

@font-face {
  font-family: 'montheavy';
  src: url('../fonts/mont-heavy.eot');
  src: url('../fonts/mont-heavy.eot?#iefix') format('embedded-opentype'), url('../fonts/mont-heavy.woff2') format('woff2'), url('../fonts/mont-heavy.woff') format('woff'), url('../fonts/mont-heavy.ttf') format('truetype');
  font-weight: 400;
  font-style: normal
}

h1, h2, h3, h4, h5, h6
{ font-family: "montheavy",serif;
font-weight:600;}
h2
{font-size:6vw;}
input:focus
{outline:none; border:none;}

.clearfix{clear:both;}
section{float:left; width:100%;}
header{height:10%; padding: 3vw 3vw 5vw; width: 100%;
  float: left;} 
section.main{height:80%;}
footer{height:10%; width:100%; float:left;}

header a
{display:block;}

header a img
{float:left;}

a{color: #57c5f2;
font-weight: 600;}
a:focus
{outline: none;
outline-offset: 0;
text-decoration: none;}

hr
{border: 1px solid #d9d9d9;
margin: 5vw 0;
float:left;
width:100%;}

strong
{font-size:4vw;
line-height:5vw;}

button:focus
{outline:none;
border:none;}

.bg-body h1{color:#fff;}
.page{float:left; width:100%; padding-bottom:15vw;}
.mt-20{margin-top:20px;}
/*Form Section*/
.bg-body{background-image:url('/assets/images/bg-login.jpg');
  background-size:cover;
}
.form
{width:96%;
background: #fff;
margin:0 2%;
padding:5%;
display:inline-block;
margin-bottom:10vw;}

.form form{width:100%;}

.bdr-10{border-radius:10px;}

.heading{padding: 0 3vw 5vw;
text-align: left;
font-weight: 600;}

input.input-text
{    width: 100%;
    padding: 3vw 0px;
    border: none;
    border-bottom: 1px solid #ddd;
    margin: 0 0 2vw 0;
    font-size:4vw;
    border-radius:0px;}

input.input-text:focus
{outline:none;
box-shadow:none;
background:none;
border-bottom:1px solid #ddd;
}

input.input-text::-webkit-input-placeholder { /* Edge */
  color:#888;
  font-weight:600;
}

input.input-text:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color:#888;
  font-weight:600;
}

input.input-text::placeholder {
  color:#888;
  font-weight:600;
}

small{color:#333;}

#loading1{width:100%; text-align:center;}

.check {
  display: block;
  position: relative;
  padding-left:10vw;
  margin-bottom:0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  line-height:7vw;
}

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

/* Create a custom checkbox */

/* On mouse-over, add a grey background color */
.check:hover input ~ .checkmark {
  background-color:none;
  border:2px solid #eee;
}

/* When the checkbox is checked, add a blue background */
.check input:checked ~ .checkmark {
  background-color:#58c5c6;
  border-color:#58c5c6;
}

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

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

/* Style the checkmark/indicator */
.check .checkmark:after {
  left:2vw;
top:1vw;
width: 2vw;
height: 4vw;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}





.btn-sub{margin-top:2vw;
float:left; width:100%; line-height:10vw;
font-size:4vw;}
.submit-arrwo{/*float: right;
width: 52px;
height: 52px;
border-radius: 100%;
border: none;
background-color: #0090a3;
cursor:pointer;
line-height:60px;
*/
float: right;
width: 12vw;
height: 12vw;
border-radius: 100%;
border: none;
background-color: #64c5b1;
cursor: pointer;
line-height: 14vw;

}

.submit-arrwo:focus
{outline:none; border:none;}

.sortby .submit-arrwo {float:left;}
.sortby .submit-sort {float: right;}

/*Form Section*/
.text-left{text-align:left;}
.text-right{text-align:right;}
.text-center{text-align:center;}
.heading-inner{padding:5vw 0vw 3vw; font-weight:400;
}
.container{padding:0 5%;}
.heading-inner span{font-weight:600;}
/*.page{box-shadow:-10px -11px 20px -10px #CCC; }*/
.page-welcome{/*margin-top:17%;*/
  margin-top:5vw;
position:relative;
box-shadow:-10px -11px 20px -10px #CCC;}

.employee-dashboard .box-first
{
  width:100%;
  min-height:inherit;
  max-height:inherit;
  border-radius:0px;
  padding:2vw 3vw;
  margin-bottom:0vw;
/*   margin-top:2vw; */
}

.employee-dashboard .steps
{
  padding:0vw 4vw 4vw 4vw;
  margin-top:0px;
}

.employee-dashboard .steps h4
{padding:2vw 0 2vw 0;}


.employee-dashboard #accordion .box-first p
{padding:0px;}

.employee-dashboard #accordion h3
{ padding:2vw 4vw;
margin: 0;
border: none;
font-size:4vw;
font-family: "montheavy",serif;
font-weight: 600;
color:#fff;
line-height:8vw;
border-top:5vw solid #fff;
float:left;
width:100%;
position:relative;
cursor:pointer;
}
.employee-dashboard .accordion h3
{ padding:2vw 4vw;
margin: 0;
border: none;
font-size:4vw;
font-family: "montheavy",serif;
font-weight: 600;
color:#fff;
line-height:8vw;
/*float:left;
width:100%;
position:relative;*/
cursor:pointer;
 background-image:url('/assets/images/arrow-right.png');
 background-repeat:no-repeat;
 background-position:98%;
}

.employee-dashboard .accordion.activebutton h3
{
  background-image:url('/assets/images/arrow-bottom.png');
}


.employee-dashboard #accordion h3.title-training
{
   background-color:#64c5b1;
}

.employee-dashboard .accordion h3.title-application
{
   background-color:#34d3eb;
}

.employee-dashboard .accordion h3.title-initial
{
   background-color:#4489e4;
}

.employee-dashboard .accordion h3.title-training
{
   background-color:#64c5b1;
}


.employee-dashboard .accordion h3.title-training span
{display:inline-block;}

.employee-dashboard.page-welcome
{
  padding-top:6vw;
}

.fa-graduation-cap {background-color: #00a99d!important;}


.employee-dashboard #accordion h3 span.ui-accordion-header-icon
{display:none;}

.employee-dashboard #accordion h3 span
{padding:0;
font-family: "montheavy",serif;
font-weight: 600;
font-size:5vw;
display:block;}

.employee-dashboard .accordion h3 span
{padding:0;
font-family: "montheavy",serif;
font-weight: 600;
font-size:5vw;
display:block;}

.heading-inner.welcome-title span.wel-text
{color:#333;}

/*.mt-minus{margin-top: -15%;}*/

.box-first
{width:46%;
float: left;
margin-right: 2%;
border-radius:0px;
padding:5vw;
position:relative;
min-height:40vw;
/*
color: #fff;
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:cover;*/
max-height:40vw;
margin-bottom:5vw;
border-radius:2vw;
background:#fff;}


.page .box-first p
{
font-weight:700;
color:#333;
/*
color:#fff;
position:absolute;
left:5vw;
bottom:20vw;*/
padding-bottom:0px;
line-height:6vw;
}



.page-welcome .activity p
{padding-bottom:0;
color:#333;}

.box-second
{margin-right: 0;
margin-left: 2%;
float:right;}

.activity{float: left;
width: 100%;
margin-top: 5%;}

.activity h2
{font-size: 4vw;
font-weight: 400;
color:#000;
border-bottom: 2px solid #ddd;
padding-bottom: 5%;
font-weight: 600;
line-height:4vw;
text-transform:uppercase;}

.noti{margin-top:10vw;
width:100%;
float:left;
position:relative;
padding-left:20%;}

.noti p{font-weight:600;}
.icon-noti{width: 15%;
float: left;
background: #0090a2;
color: #fff;
text-align: center;
line-height: 15vw;
border-radius: 6px;
margin-right: 5%;
position: absolute;
left: 0;
top: 0;
min-height: 15vw;
font-size: 7vw;
}

.noti small
{font-weight:600;
color:#888;
font-size:3vw;}


.activity h2 .fa-clock-o{float: left;
padding-right: 3%;
color: #888;
font-size: 5vw;}

.bold-txt{font-weight:700;}


.page-account{padding-bottom:10%;}
.menu-list li{padding:4vw;}

.menu-list li a
{font-weight:400;}

.menu-first
{    margin-bottom: 8vw;
    margin-top: 8vw;
    background: #fff;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;}
.menu-first li
{background:#fff;
    margin:0;
    padding:0vw 0vw;}

.menu-first li.bdr-no a
{border-bottom:border-bottom: 1px solid #ddd;}
.menu-first li:last-child a{border-bottom:0;}
.menu-first li a
{font-weight:400;
display:block;
margin: 0 4vw;
padding:4vw 0vw;
border-bottom: 1px solid #ddd;
}
.con-bg.refer i {background-color: #00a99d!important;}

.menu-first li a:hover
{text-decoration:none;}

.menu-first li a:click
{background:none;}
.menu-first li a:focus
{background:none;}

.menu-list li a
{color: #333;
    font-size: 4.5vw;}

.menu-list li i{color: #fff;
width: 8vw;
background:#003471;
text-align: center;
padding: 0vw;
height: 8vw;
line-height: 8vw;
border-radius: 1vw;
font-size: 4vw;
margin-right:3vw;}

.menu-list li.change-pas i
{background-color:#00a99d;}
.menu-list li.find-bg i
{background-color:#f7b727;}
.menu-list li.acceptable-bg i
{background-color:#ff351b;}
.menu-list li.con-bg i
{background-color:#e61;}
.menu-list li.faq-bg-icon i
{background-color:#00aeef;}
.menu-list li.priv-bg i
{background-color:#3188e6;}
.menu-list li.cooke-bg-icon i
{background-color:#18c60a;}

.sign-btn{width:100%; float:left;}
.btn-solid{
display: inline-block;
padding: 2vw 6vw;
font-size:4vw;
background:#64c5b1;
color:#fff;
}

input[type="submit"].btn-solid
{cursor:pointer;
border:none;
outline:none;
    display: inline-block;
    padding: 2vw 6vw;
    font-size: 4vw;
    background:#0090a3;
    color: #fff;
  border-radius: 0;
   -webkit-appearance:none;}

.btn-solid-color
{border-color:#301e44;
color:#301e44;}

.btn{border-radius:25vw;
display: inline-block;
padding: 1vw 7vw;
background: #64c5b1;
color: #fff;
font-size: 5vw;
border:none;
outline:none;}

.page-edit-profile{box-shadow:none;}
.profile{float: left;
width: 100%;
text-align:center;
margin:0 0 6vw 0;}

.img-box
{width:32%;
  display:inline-block;
border-radius: 100%;
border: 1px solid #f2f2f2;
margin-right:0;
padding: 1vw;
background:#f2f2f2;}

.img-box img
{border-radius: 100%;
padding: 0px;
float: left;
border: 1px solid #f2f2f2;
width:100%;}

.ni-ui-number{padding:5vw 0; width:100%; float:left;
border-top:1px solid #ddd; border-bottom:1px solid #ddd; margin-bottom:5vw;}
.ui-num{float:left; width:50%;}
.ui-num small{color: #888;
font-weight: 600;
padding-bottom: 5%;
display: block;
font-size:4vw;
}

.ui-num strong
{
color: #333;
font-weight: 600;
}

.page-edit-profile .activity h2
{font-size:5vw; border:none; color:#333;}

.page-edit-profile .activity .noti p
{line-height:12vw;}

.page-edit-preferences
{padding:10vw 0px;}

.label-txt{
  float:left;
  width:70%;
}

.noti-switch
{
  float:left;
  width:100%;
  margin:0 0 10vw 0;
}

.pt-3-p{padding-top: 3%;}


.page-edit-profile .edit-detail .tip-detail span
{color: #000;
float: left;
width: 100%;
font-size: 4.5vw;
font-weight: 700;
display: block;
margin-bottom: 2vw;}

.page-edit-profile .edit-detail .tip-detail a
{display:block;}

.page-edit-profile .edit-detail .tip-detail a img
{border-radius: 100%;
border: 1vw solid;}

.page-edit-profile .edit-detail .tip-detail.btn-cv-view
{float:right; width:auto; padding-top:0;} 

.page-edit-profile .edit-detail .tip-detail.btn-cv-view span a
{background: #64c5b1;
text-align: center;
display: inline-block;
color: #fff;
padding: 3vw 5vw;}


/*check-box*/

.switch {
  position: relative;
  width:60px;
  height:30px;
  float:right;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height:24px;
  width:24px;
  left:7px;
  bottom:3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color:#0090a3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.save-btn
{background: none;
    border: none;
/*    float: right;*/

    color:#fff;
    font-weight: 600;
    font-size: 4vw;
    line-height: 6vw;
    cursor: pointer;
    background:#64c5b1;
padding:2vw 6vw;}

.save-btn .submit-arrwo
{margin-left: 4vw;
    width: 6vw;
    height: 6vw;
    line-height:5vw;}

.heading-desc{font-size: 4vw;
line-height: 6vw;}

.page-change-password
{
/* margin: 8vw 0 0 0; */
padding:5vw 0;}


.StickyHeader
{ position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color:#fff;
  left:0;
  width:100%;
  height:auto;
  z-index:2;
  padding-bottom:4vw;

}


.StickyFooter2{
  width:100%;
  padding:2vw 0px;
  margin:0px;
  bottom:0;
  left:0;
  height:18vw;
  background:#fff;
  text-align:center;
  z-index:9;
position:fixed;
}



.StickyFooter{
  width:100%;
  padding:2vw 0px;
  margin:0px;
position:fixed;
  bottom:0;
  left:0;
  height:15vw;
  background:#fff;

}
.StickyFooter:before
{position: absolute;
top:0;
left: 0;
width: 100%;
box-shadow: -10px -11px 20px -10px #CCC;
content: '';
height: 10vw;}


.box-shdow{box-shadow:10px 11px 20px -10px #CCC;}
.box-shdow-none{box-shadow:none;}

.page p
{padding-bottom:7vw;
color:#888;}


.page-faq{margin:0;
padding-top:2vw;
}

.page-faq ul li a
{display: block;
border-bottom: 2px solid #ddd;
padding: 6vw 0;
color: #333;}

.page-contact
{margin:8vw 0 0 0;}
.page-contact .activity
{margin-top:0;}

.page-contact .activity .noti strong
{
  line-height:10vw;
  font-size:4vw;
  color:#333;
} 

.page-contact .activity .noti 
{margin-bottom:5vw;
margin-top:0;}

.page-contact .activity .detail-contact.border-no
{padding-top:10vw;}

.page-contact .activity .detail-contact p
{
  font-weight:600;
  font-size:4.5vw;
}

.detail-contact
{border-bottom:2px solid #ddd;}

.page-contact .activity .detail-contact a
{color:#888; font-size:5vw;}

.border-no{border:none;}

/*jops*/

.scroll-no{overflow:hidden;}
.page-jobs{padding-bottom:0px;
margin-top:6vw;}

.page-jobs #tabs .jobs-container {
   height: 75vh;
overflow: auto;
padding:6vw;
width: 100%;
}

.page-jobs .ui-tabs
{position:relative;}

.page-jobs .ui-tabs ul
{position: absolute;
top:-8vw;
width: 100%;
text-align: center;}
.page-jobs .ui-tabs ul li
{display:inline-block; margin: 0 3vw;
position: relative;}
.page-jobs .ui-tabs ul li a
{color:#b5b1c0;
font-weight: 700;
font-size:4vw;} 


.page-jobs .ui-tabs ul li.ui-tabs-active a
{color:#301e44;
font-size:4vw;}

.page-jobs .ui-tabs ul li.ui-tabs-active:before
{width: 100%;
height: 1vw;
background: #301e44;
content: '';
position: absolute;
bottom: -3vw;
z-index: 1;}


.jobs-main{padding-top:60px;}

.jobs-main .heading-inner
{padding-top:5vw;}

.jobs-header
{position:sticky;
width: 100%;
background: #fff;
top:0;
left:0;
height: 10vw;
line-height:60px;
box-shadow: -10px -11px 20px -10px #CCC;
}

.job-sel{float: left;
font-weight: 600;
font-size: 4vw;
line-height:15vw;
}
.sort-by{float:right;
font-weight: 600;
font-size: 4vw;
line-height:15vw;
}

.sort-by a{color:#7a838a;}

.sort-by img
{float: right;
width: 5vw;
padding: 0vw;
margin-top: 5vw;
margin-left: 2vw;}

.jobs-container{background: #f4f4f4;
height: 100%;
padding:5%;
float: left;}

.job-box{width: 100%;
background: #fff;
border-radius:5vw;
float: left;
box-shadow:0 6px 8px 0 rgba(0,0,0,0.2),0 2px 8px 0 rgba(0,0,0,0.19);
margin-bottom:10vw;}

.job-img{width:100%;
position:relative;
float:left;
height:100%;}

.job-img img{float:left;
border-radius:5vw 5vw 0 0;
width:100%;}

.content-box{display: block;
width: 100%;
float: left;
text-align: center;
padding:5vw;}

.content-box p{text-align:left;
padding-bottom:3vw;
font-weight:600;
position:relative;
padding-left:8vw;}

.content-box .btn-solid
{padding:2vw 6vw;
margin-top:4vw;
border-color: #301e44;
color:#fff;}

.icon-job{width:8vw;
float: left;
font-size:5vw;
line-height:7vw;
position:absolute;
left:0;}

.job-box .price{position: absolute;
top: 4vw;
right: 4vw;}

.job-box .price h3
{color: #333;
font-size: 6vw;
font-weight: 600;
line-height: 7vw;
text-align:center;}

.job-box .price h3 small
{display: block;
font-size: 3vw;
color: #333;}

/*.position
{position: absolute;
bottom: 4vw;
left: 4vw;
color:#fff;}*/
.job-box .position {margin-top:2vw;}
.job-box .content-box p {padding-bottom: 1vw;}
.job-box .content-box {padding: 4vw 5vw;}
.position
{
  float:left;
  width: 100%;
padding: 0 5vw;
}


.position h4
{font-weight: 600;
text-transform: none;
font-size: 5vw;
line-height: 8vw;
color:#64c5b1;
font-style:italic;
margin:0px;
padding:0px;
}

.position h3
{margin: 5vw 0 0vw 0;
padding-bottom: 0;
font-size: 5vw;
font-weight: 400;
line-height:5vw;}



.position h6
{color: #34d3eb;
padding: 0;
margin: 0px;
font-size: 4vw;} 

.position h4 small
{font-size: 4vw;
display: block;
color: #fff;
font-weight: 400; line-height:5vw;}

.position h5
{
color:#32c861;
padding:0px;}


.job-detail-img .position h3
{
  margin-top:1vw;
}

/*poupu*/

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top:50%; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(255,255,255,0.9); /* Black w/ opacity */
  padding:10vw !important;
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding:8vw;
  width:85%;
  border-radius:3vw;
  box-shadow: 2px 2px 12px #ddd;
  position:absolute;
  top:auto;
  transform:translate(-50%);
  left:50%;
/*  height:100vw;*/
height:auto;
  border:none;
}

.modal-content p

{font-size:4vw;
line-height:6vw;}

.modal-backdrop
{
  position:inherit;
}

/* The Close Button */
.close {
  color:#0090a2;
float: right;
font-size:8vw;
position: absolute;
top:2vw;
right:4vw;
cursor:pointer;
opacity:1;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.sort-modal h3{border-bottom: 2px solid #ddd;
margin-bottom: 5vw;
padding-bottom: 5vw;
font-size:4.5vw;}

.sort-modal .sort-poup{padding:5vw 0;
font-weight: 600;
color: #2c2c2c;
font-size:4vw;}

.sort-modal .sort-poup input[type="checkbox"]
{float:right;}

.modal-content .circle-check {margin-top: 8vw; margin-bottom: 2vw;}
.modal-content .cel-content-pop a {color:#fff;}
/*.right-arrwo
{position: absolute;
bottom: 5vw;
right: 5vw;
line-height:15vw;}
*/

.jobs-container h2{font-size: 4.5vw;
padding-bottom: 5vw;
color: #303030;
margin: 0;
font-weight: 600;}


.job-box .edit-btn
{position: absolute;
left: 5vw;
top: 5vw;
background:#301e46;
padding: 2vw 5vw;
border-radius: 10vw;
color: #fff;
text-transform: uppercase;
font-size: 3vw;}


.map-icon{background:#301e46;
padding: 5vw;
text-align: center;
font-size: 10vw;
border-radius: 3vw 3vw 0 0;
color: #fff;}

.cancel-modal{padding:0; text-align:center;}

.cel-content-pop{padding:0vw 0 8vw; display:inline-block;
width:100%;}
.cel-content-pop h5{color:#333;}
.cel-content-pop p{margin:5vw;}
.cel-content-pop a
{float: left;
padding: 1vh 0vh;
color:#301e46;
}
.cel-content-pop a.btn-solid{float:right;
padding:1vh 5vh;
border-color:#301e46;}

.cel-content-pop a.close
{font-size:4vw; position:inherit;
opacity:1;}

.accepted-job h6
{margin: 5vw 0 0 0;
color: #333;
font-size: 5vw;
font-weight: 700;}

.accepted-job h6 small
{display:block;
font-size:4vw;
line-height:10vw;
font-weight:500;}

.accepted-job a.btn-solid
{float:none;}

.job-detail-img
{background-repeat:no-repeat;
background-size:cover;
height:60vw;
position:relative;}

section.main.job-detail-main
{height:50%;}


.price-detail-box {
    width: 100%;
    float: left;
    display: block;
    border-bottom: 1vw solid #d8d8d8;
    margin-bottom: 5vw; padding-bottom: 5vw;
}
.price-detail-box .position{width: auto; float:none; padding: 0;}
.price-detail-box .position h4 small { color:#313a46; line-height:7vw;}
.price-detail{float:right;}
.price-detail h3
{color: #333;
font-size: 6vw;
font-weight: 600;
line-height: 7vw;
text-align:center;}

.price-detail h3 small
{display: block;
font-size: 3vw;
color: #313a46;}

.page-job-detail ul{margin:6vw 0;}
.page-job-detail ul li
{color:#7b858b;
padding:2vw 0;
font-weight:600;
font-size:4vw;}

.page-job-detail ul li a
{font-size:}

.page-job-detail ul li .icon
{width:7vw; float:left;}

.detail-job-txt{border-top: 1vw solid #d8d8d8;
padding-top: 5vw;}

.page-job-detail ul li a
{color:#7b858b;}

.detail-job-txt h3{line-height:9vw;}
.detail-job-txt h3 .icon-box
{width: 10vw;
height: 10vw;
float: left;
background: #d8d8d8;
line-height: 10vw;
text-align: center;
color: #fff;
border-radius: 2vw;
margin-right:4vw;}

.job-detail-footer
{text-align:center;}
.job-detail-footer .btn-solid-color {
	border-color: #fff!important;
	color: #fff!important;
}
.sticky-title
{padding:5vw 0 0 0;
margin:0px;
float:left;
width:100%;}

.StickyHeader .heading-desc
{float:left;
width:100%;
padding:3vw 1vw;}


.application-box
{position:relative;
width:100%;
float:left;
margin:5vw 0;}


.application-box img
{float:left;
object-fit:cover;
height:145px;
width:100%;}

.application-box h4
{position: absolute;
top: 5vw;
left: 5vw;
font-weight: 600;
text-transform: none;
font-size: 5vw;
line-height: 7vw;}

.application-box .complete
{position: absolute;
bottom: 5vw;
left: 5vw;
color: #fff;}

.StickyHeader .heading-desc .fa-check{width: 6vw;
height: 6vw;
line-height: 6vw;
text-align: center;
border-radius: 100%;
color: #333;
-webkit-box-shadow:0px 3px 7px 2px rgba(221,221,221,1);
-moz-box-shadow:0px 3px 7px 2px rgba(221,221,221,1);
box-shadow:0px 3px 7px 2px rgba(221,221,221,1);
margin-right: 2vw;
font-size: 3vw;}

.StickyHeader:after
{position: absolute;
bottom: -10vw;
left: 0;
width: 100%;
box-shadow: -10px -11px 20px -10px #CCC;
content: '';
height: 10vw;}

.StickyHeader.job-header
{padding-bottom:0;}
.StickyHeader.job-header:after
{display:none;}

header.heg-auto
{height:auto;}

.page-edit-preferences p
{padding-bottom:0; color:#333;}


.notification
{float:right;}

.notification ul li{display:inline-block; margin:0 1vw;}
.notification ul li a
{display:block;}
 header .notification ul li a img
{width:100%;} 

.notification1
{float:left;padding-top:1vw;width:100%;border:1px #CCC solid;}

.notification1 ul li{display:inline-block; width:25%;float:left;margin:0 0;}
.notification1 ul li a
{display:block;border-right:1px #CCC solid; text-align:center;font-size: 3vw;}
header .notification1 ul li a img
{width:20px;}

#notification_show {	position: relative; }
.noti_count {
	background: #ff3d00;
    color: #fff;
    /* padding: 1vw; */
    border: 100%;
    border-radius: 100%;
    height: 4vw;
    width: 4vw;
    position: absolute;
    font-size: 2.8vw;
    text-align: center;
    top: -2vw;
    left: 2vw;
    line-height: 4vw;
	display:none;
}

.page-notification .activity .noti
{margin-top:0; margin-bottom:8vw;}

.page-notification .activity .noti p
{padding-bottom: 0;
color: #333;
line-height: 4vw;
font-weight: 700;
font-size: 3vw;
float:left;
width:100%; margin-bottom:1vw; }

.bg-purple
{background:#301e46;}

#iconshow
{display:none;
position: absolute;
right: 0;
top: 0;
font-size: 10vw;
color:#0090a2;}

/* 3-JUL-2020 */

.boder-no{border:none;}
.btn-main
{padding:2vw 6vw; margin:5vw 0;}

.site-form
{margin-top:5vw;
height:auto;
padding-bottom:1vw;}

.site-form label
{display: block;
margin-bottom:2vw;}

.site-form input[type="text"]
{border: 1px solid #eee;
  width: 100%;
  padding: 3vw;
  border-radius: 2vw;
font-size:2.5vw;}


.site-form input[type="email"]
{border: 1px solid #eee;
  width: 100%;
  padding: 3vw;
  border-radius: 2vw;}

  .site-form select
{border: 1px solid #eee;
  width: 100%;
  padding: 3vw;
  border-radius: 2vw;
font-size:3vw;}

  .site-form .form-input
  {margin-top:3vw;;}


  .btn-edit
  {background: #fff;
    padding: 2vw 5vw;
    border-radius: 10vw;
    color: #301e44;
    text-transform: uppercase;
    font-size: 3vw;
    }

.page-sites{margin-top:0;}

.page-site-detail ul
{margin:0vw 0 5vw;}


.job-emp
{margin-top: 8vw;
width: 100%;
float: left;}

.job-emp h3
{
background:#64c5b1;
padding: 3vw;
text-transform:uppercase;
color:#fff;
margin-top:7vw;
display:inline-block;
width:100%; line-height: 5vw;}

.job-emp .emp
{position:relative;
background: #eee;
padding:2vw;
border-bottom:1px solid #ddd;
font-size:4vw;
line-height:7vw;}

.job-emp .text-emp
{font-weight:600;
width:35%;
float:left;}

.job-emp .emp:nth-child(even)
{background:#f2f2f2;}

.row-emp
{margin-top:5vw;}

.job-emp .view-btn{background: #301e44;
text-align: center;
padding: 2vw;}

.view-btn .btn-solid
{border-color:#fff;
padding:2vw 6vw;
color:#fff;
margin:0 2vw;}

/*9-JUL*/

.signup-tip{    text-align: center;
    float: left;
    width: 100%;
    padding: 5vw 0 0;
    font-size:4vw;
    color:#888;}

.page-wel-emp{margin-top:0; background:#f4f4f4;
box-shadow:none;
padding:12vw 0;}

.box-tip
{background: #fff;
padding: 5vw;
border-radius: 1vw;
color: #000;
margin-bottom:5vw;
float:left;
width:100%;}

.box-tip h5
{padding: 0vw 0 2vw 0;
margin: 0;
text-transform: uppercase;}

.box-tip p
{color:#000;
font-size:10vw;
padding:0;
line-height:12vw;}

.notification 
{width:100%;
text-align:right;}
.pb-0{padding-bottom:0;} 
.box-tip .noti-tip p
{font-size:4vw; line-height:7vw; display:block;}
.box-tip .noti-tip
{padding:5vw 0;}
.box-tip .noti-tip span
{display: block;
text-align: right;
padding: 2vw 0;
font-weight: 600;
color: #301e44;
font-size:3vw;}

.box-tip .noti-tip p em
{display:block;}
.box-tip .noti-tip .txt-box{display: inline-block;
background: #64c5b1;
color: #fff;
padding: 1vw 2vw;
border-radius: 1vw;
font-size: 3vw;
font-weight: 700;}

.box-tip .job-emp
{margin-top:3vw;}
.box-tip .job-emp .row-emp{margin-top:0; margin-bottom:5vw;}

.id-text
{color:#b0b0b0;
font-size: 4vw;
font-weight: 400;
line-height: 7vw;}

.edit-detail
{float:left; width:100%;
padding:5vw 0;}

.edit-detail h5
{color: #b0b0b0;
padding: 0 0 2vw 0;
border-bottom: 1px solid #ddd;
float: left;
width: 100%;
line-height:9vw;
margin-bottom:5vw;}

.edit-detail h5 span
{float:left;}

.edit-detail h5 .edit-icon
{float: right;
width:8vw;
height:8vw;
background:#ffa500;
border-radius: 100%;
line-height:9vw;
text-align: center;
color: #fff;
font-size: 4vw;}

.tip-detail
{float:left; width:100%; padding:2vw 0;
font-size:4vw;}
.tip-detail h4 {text-transform:inherit;}
.tip-detail span
{color:#0090a2; float:left; width:40%;}

.edit-body-bg
{position:relative;}

.edit-body-bg:before
{
 content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height:32vw;
background-image: linear-gradient(#f2f2f2, #f2f2f2);
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
z-index: -1;
}

.employees-page
{margin-top: 0;
background: #f4f4f4;
box-shadow: none;
padding:5vw 0 12vw 0;}

.employees-page .job-emp
{margin-top:0px;}

.form-box{float: left;
width: 100%;
margin: 5vw 0;}

.form-box label
{float: left;
width: 100%;
font-size: 5vw;
padding-bottom: 2vw;
font-weight:600;}

.form-box textarea
{width: 100%;
min-height: 20vw;
border-radius: 2vw;
border: 1px solid #ddd;}


.page-quations
{padding-bottom:20vw;}

.page-site-detail .job-emp
{margin-top:0;}

#accordion h3{display: block;
border-bottom: 2px solid #ddd;
padding:5vw 0;
color: #333;
font-family: myriad-pro, sans-serif;
font-size:5vw;
line-height:10vw;

}

#accordion p
{padding:5vw 0;}


/*14-JUL*/

.page-learner-agreement
{padding-bottom:0;}

.welcome-box
{background: #fff;
padding:8vw 8vw 5vw 8vw;
border-radius:4vw;
margin:0vw 0 5vw 0;
display:inline-block;
width:100%;} 

.welcome-box h2
{padding:5vw 0;}

.welcome-box strong
{display:block;
color: #000;}

.tip-wel
{text-align:left; padding:2vw 0;
padding: 2vw 0;
font-size: 4vw;
color: #888;
float: left;
width: 100%;}

.tip-wel strong
{float: left;
width: 40%;
text-align: left;
font-weight: 700;
color: #000;}

.welcome-box strong.btm-txt
{text-align:left; padding:3vw 0;
position:relative;
padding-left:5vw;
float:left;
width:100%; color:#f96a74 !important}

.welcome-box strong.btm-txt:before
{position:absolute;
top:5.5vw;
left:0;
width:2vw;
height:2vw;
content:'';
background:#f96a74 !important;
border-radius:5vw;}

.welcome-box .save-btn
{margin: 5vw 0 0 0;}

.learner-header h1
{margin-bottom:0;
font-size:7vw;
padding-bottom:3vw;
padding-top:5vw;}

#details_form fieldset:not(:first-of-type) {
    display: none;
  }

#skill_form fieldset:not(:first-of-type) {
    display: none;
  }

#personal_form fieldset:not(:first-of-type) {
    display: none;
  }

#learning_form fieldset:not(:first-of-type) {
    display: none;
  }




.page-learner-form fieldset strong
{color:#757474;
font-size:4.5vw;}
.page-learner-form fieldset h3
{
  font-size:5vw;
  line-height:6vw;
  padding-top:0;
  margin-top:2vw;
}
.title-check
{padding:4vw 0 2vw 0;
float:left;
width:100%;
}

.title-check strong
{color:#000;}
.page-learner-form fieldset .title-check span
{color:#888; font-weight:500; display:block;}

.next-step
{height:17vw;}


.page-learner-form fieldset .checkbox-group
{border-bottom: 1px solid #ddd;
padding:4vw 0;
float:left;
width:100%;
position:relative;}





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

/* Create a custom checkbox */
.checkmark {
 position: absolute;
top:0; 
    left: 0;
 height:7vw;
width:7vw;
/*    background: url(../images/grey.png) no-repeat;
        background-position-x: 0%;
        background-position-y: 0%;
background-position: -120px 0;
        */
    border-radius:100%;
    border:2px solid #d3cfc8;

}


.checkmark:after {
    left: 2vw;
top: 0.7vw;
    width:2vw;
    height:4vw;
    border: solid white;
    border-width:0 1vw 1vw 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
    position: absolute;
    display: none;
}

.radio_inp input:checked ~ .checkmark:after {
    display: block;
  }

.radio_inp input:checked ~ .checkmark {
    background-color:#73716e;
    border-color:#73716e;
}


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

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

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

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

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

.text-area
{background: #f9f9f9;
border-radius: 5vw;
width: 100%;
border: none;
min-height: 25vw;
resize: none;
padding:5vw;
font-size:5vw;}


.page-learner-form fieldset .checkbox-group small
{display: block;
width: 80%;
font-size: 4vw;
color: #888;
padding-top: 1vw;
line-height: 6vw;}


.hed-txt
{float:left; width:85%;}
.qut-icon
{float: right;
width: 5vw;
height: 5vw;
font-size: 3vw;
line-height: 5vw;
text-align: center; 
font-weight: 400;
border: 1px solid #0090a3;
border-radius: 100%;}

#myModal4 .cel-content-pop strong
{color:#888;
font-size:3.5vw;}
#myModal4 .cel-content-pop strong span{color: #301e46;}

#myModal4 .modal-content .map-icon
{min-height:25vw;
position:relative;}

#myModal4 .modal-content .map-icon .img-box
{
  position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width:28%;
border:none;
padding:0;
}

#myModal4 .cel-content-pop {padding:10vw 8vw 5vw;}


#myModal4 .submit-arrwo
{width:42px; height:42px; line-height:42px; margin-left:5vw;}
#myModal4 .cel-content-pop .next-link
{float:right; line-height:14vw;
color:#0090a3;}

#myModal5 .modal-content
{font-size:5vw; line-height:7vw;
padding:14vw;}

.thank-tick
{display:block;
margin:5vw;}


.page-learner-agreement .submit-arrwo
{text-align:center;}


/*progressbar*/

.pos-rel
{position:relative;
padding-top:15vw;}
.progress
{height:12vw;
width:12vw;
border:2px solid #fff;
background:#000;
font-size:5vw;
/*position: absolute;*/
position:fixed;
top:24vw;
left: 50%;
transform: translateX(-50%);
border-radius: 100%;
text-align: center;
line-height: 12vw;
z-index:1;
}

.progress .progress-value
{width:12vw;
text-align: center;
float: left;
line-height:11vw;
font-weight: 700;
font-size:4vw;
}


#details_form .StickyFooter
{height:18vw;}


.form-btn
{margin: 5vw 0;
text-align: center;}

.form-btn .btn-solid
{background:none;
color:#0090a3;
font-size:5vw;
cursor:pointer;}

.contact-form p
{font-size:4vw; line-height:6vw;}


.job-emp .attendance-job .emp
{width:100%;
float:left;}

.job-emp .attendance-job .emp .present
{float:left;
width:65%;
color:green; font-weight:700;}

.job-emp .attendance-job .emp .absent
{float:left;
width:65%;
color:red; font-weight:700;}

.job-emp .attendance-job .emp .absent span
{display:block;
font-weight:400;
font-size:4vw;}

.btn-add
{float:left;
width:65%;
}

#myModalapply .sort-modal h3
{
  padding-top:0;
}

#myModalapply .sort-modal h3 strong
{display: block;
padding-top: 2vw;
font-weight: 400;
font-family: myriad-pro, sans-serif;}


#myModalapply .form-radio
{margin: 0 0 5vw 0;}

#myModalapply .form-radio input[type="radio"]
{float: left;
margin-right: 2vw;}

#myModalapply .form-radio label
{font-size: 4vw;
font-weight: 700;}

.attendance-job .emp .btn-add .btn-solid
{
display: inline-block;
padding: 1vw 8vw;
font-size: 4vw;}


/*30-JUL*/
.logo
{text-align:center; margin-bottom:10vw;}

.logo a
{display:block;}

.bg-forgot
{background-image:url('/assets/images/bg-forget-password.jpg');
background-size: 100%;
background-position: bottom;
background-repeat: no-repeat;
background-color: #dedfe1;}

.bg-signup
{
background-image:url('/assets/images/employee-signup.jpg');
background-position: bottom;
background-repeat: no-repeat;
/*height:100vh;*/
height:100%;
background-size:cover;
} 

#notification_list .noti p
{font-size:4vw; line-height:5vw;}

.fl-right
{float:right;}
.fl-left
{float:left;}

.page-notification .activity .noti a img
{width:15%;
float:left;
margin-right:5vw;
border-radius:100%;}

.page-notification .activity .noti
{padding-left:0;}


.btn-confirm
{margin-left:15%;}

.btn-confirm .btn
{ display:inline-block; margin-top:5vw;}
.btn-red
{background:#f96a74;}

.page-notification .activity .noti span
{display:block;}

.job-sel #jobcount, #jobcount1
{float:left; margin-right:2vw;}

.heading-inner.welcome-title span
{display:inline; 
color:#333;}

.width-auto
{width:auto;}
.mt-10{margin-top:10vw;}

.mt-5{margin-top:5vw;}

.heg-auto
{height:auto;}

.logo-small
{margin-right:5vw;}

/*5-AUG*/


/*-------- 2.3 Wizard quote--------*/
input#website {
    display: none;
}

#wizard_container {
    position: relative;
}

h3.main_question {
    margin: 0 0 10vw 0;
    padding: 0;
    font-weight: 400;
    font-size:7vw;
    line-height:7vw;
}

h3.main_question strong {
    display: block;
    color: #999;
    margin-bottom:1vw;
    font-weight: 400;
}

/* Wizard Buttons*/

button.backward {
    padding: 10px 20px 10px 30px;
/*    display:none;*/
}

button.forward{
    padding:0;
    width: 15vw;
height: 15vw;
border: none;
cursor:pointer;
font-size:inherit;
}

button[disabled] {
    display: none;
}



#top-wizard {
    margin-left:0;
    padding:5vw 0;
}

#middle-wizard {
    padding:0px;
}

#bottom-wizard {
    text-align: right;
    margin-right:0px;
    margin-top:5vw;
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {}

.ui-widget-content {
  height:auto !important;
}

.ui-widget-content a {
    color: #222222;
}

.ui-widget-header {
    background:#3e8ea1;
}

.ui-widget-header a {
    color: #222222;
}

.ui-progressbar {
  height: 5vw;
width: 25%;
margin: 0 auto;
background: #ddd;
/*border-radius: 5vw;*/
}

.ui-progressbar .ui-progressbar-value {
    height: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.rating {
    display: inline-block;
    font-size: 0;
    float: right;
    position: relative;
    margin-top: 8px;
}

.rating_type {
    float: left;
    font-size: 18px;
    color: #0072bc;
    margin-top: 8px;
    font-weight: normal;
}

.rating-input {
    float: right;
    padding: 0;
    margin: 0 0 0 0;
    opacity: 0;
}

.rating:hover .rating-star:hover,
.rating:hover .rating-star:hover~.rating-star,
.rating-input:checked~.rating-star {
    background-position: 0 0;
}

.rating-star,
.rating:hover .rating-star {
    cursor: pointer;
    float: right;
    display: block;
    width: 25px;
    height: 24px;
    background: url(../img/stars.png) 0 -23px;
}

span.error {
    font-size: 12px;
    position: absolute;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    top: -20px;
    right: -15px;
    z-index: 2;
    height: 25px;
    line-height: 1;
    background-color: #e34f4f;
    color: #fff;
    font-weight: normal;
    display: inline-block;
    padding: 6px 8px;
}

span.error:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 6px 6px 0;
    border-color: transparent #e34f4f;
    display: block;
    width: 0;
    z-index: 1;
    bottom: -6px;
    left: 20%;
}

.radio_input span.error {
    top: -30px;
}

.styled-select span.error {
    top: -20px;
}

.terms span.error {
    top: -30px;
}

.form-group {
    position: relative;
    float:left;
    width:100%;
}

.form-group i {
    font-size: 20px;
    position: absolute;
    right: 0;
    top: 10px;
    color: #ccc;
}

.form-group label {
    font-weight: 400;
    color: #222;
}

.form-group.radio_questions label {
    border: 2px solid #e8ebed;
    display: block;
    font-weight: 400;
    padding: 15px 45px 15px 15px;
    box-sizing: content-box;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    color: #555;
    background-color: #fff;
}

.form-group.checkbox_questions label {
    font-weight: 400;
    cursor: pointer;
    color: #555;
}

.form-group.radio_questions .iradio_square-yellow {
    position: absolute;
    top: 17px;
    right: 15px;
}

.form-group.checkbox_questions .icheckbox_square-yellow {
    margin-right: 10px;
}

.form-group.radio_questions label:hover {
    border: 2px solid #ffcc33;
}

.form-group.select {
    margin-bottom: 30px;
}

.styled-select select {
    background: transparent;
    width: 100%;
    padding:0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    height:12vw;
    color: #000;
    margin: 0;
    font-weight: 400;
    -moz-appearance: window;
 -webkit-appearance: none; 
    cursor: pointer;
    outline: none;
    font-size: 4vw;
	
}
@-moz-document url-prefix() {
  select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: "";
  }
}
select#ethnicity_status {
    padding-right: 10vw;
}

.styled-select select:focus {
    color: #555;
}

.styled-select {
    width: 100%;
    overflow: hidden;
    height:12vw;
    box-sizing: border-box;
    background: #fff url('../images/arrow_down.svg') no-repeat right center;
    border: 0;
    border-bottom: 2px solid #e8ebed;
    border-radius: 0;
    font-size:4vw;
    outline: none;
box-shadow: none;
background-size: 6vw;
}

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

.styled-select select:focus {
    outline: none;
    box-shadow: none;
}

.form-control::-moz-placeholder {
    color: #999;
    opacity: 1;
}

.form-control::-webkit-input-placeholder {
    color: #999;
}


input.form-control#check_in,
input.form-control#check_out {
    background: #fff url(../img/calendar.svg) no-repeat right center;
}

.radio_input {
    margin-top: 10px;
}


.wizard-step h4
{color: #46515c;
font-weight: 300;
padding-bottom: 5vw;}

button.submit
{border-radius: 0;
font-size: 4vw;
line-height: 8vw;
border: 1px solid #64c5b1;
background:#64c5b1;
color:#fff;
font-weight: 600;
cursor:pointer;
margin:2vw 0;}

#frmiag #middle-wizard
{padding:10vw 0 0 0;}

h4.main_question
{text-transform:inherit; font-size:5vw; line-height:5vw;}
.step .ques-ti
{color: #999;
display: block;
padding: 0vw 0 2vw 0;}

#frmiag #bottom-wizard
{margin:3vw 0 3vw 0;
float:left;}

.page-job-detail #msg {
	margin: 10px 0px;
} 
/*-------- 3.1 Other pages --------*/

.min-heg-50
{min-height:50vw;}

.radio_input
{
  border-bottom:2px solid #ddd;
  margin-bottom:5vw;
  padding:0vw 5vw 0vw 0vw;
  float:left;
  width:100%;
}

.radio_input.yes-radio
{width:50%;}

.form-group label.radio_inp
{font-weight:600;
line-height:7vw;}


.icheckbox_input
{border-bottom:2px solid #ddd;
  margin-bottom:5vw;
  padding:0vw 3vw 0vw 0vw;}

input.form-control {
    width: 100%;
    padding: 3vw 0px;
    border: none;
        border-bottom-color: currentcolor;
        border-bottom-style: none;
        border-bottom-width: medium;
    border-bottom: 1px solid #ddd;
    margin: 0 0 2vw 0;
    font-size: 4vw;
    border-radius: 0px;
    height: auto;
    line-height: inherit;
    box-shadow: none;
    color: inherit;
    background-color: inherit;
    background-image: inherit;
}

.bdr-no
{border:none;}


.signature
{padding: 3vw;
margin-top: 10vw;
border: 1px solid #ccc;
border-radius: 1vw;
font-weight: 600;
text-transform: uppercase;}

fieldset{border:none;}

.icheckbox_input label small {
    display: block;
} 

#dvPassport, #dvYes
{/*margin-top:5vw;*/}

#dvPassport label, #dvYes label
{font-size:4vw;
font-weight:500;}

/*18-SEP-2020*/

.identity-verification
{float: left;
width: 100%;
margin-bottom:0vw;}

.upload-dv
{padding: 5vw;
background: #f4f4f4;
width:100%;
float:left;
margin-bottom:5vw;}


.upload-dv input[type="file"]
{max-width:32vw;}


.upload-dv .btn
{outline: none;
border: none;
float: right;
border-radius: 0;
padding: 2vw 3vw;
line-height: 5vw;
font-weight: 300;
font-size: 3.5vw;
background: #000;} 


.group-head
{background: #46515c;
padding: 3vw;
margin:0 0 4vw 0;
color: #fff;
width:100%;
float:left;}


.list-style
{
  margin-bottom:4vw;
}

.list-style ul li
{font-size:4vw;
line-height: 4vw;
padding: 1vw 0;
font-weight: 600;}


.icheckbox_input .radio_inp .checkmark
{
  border-radius:0;
}

.radio_inp {
    display: block;
    position: relative;
    padding-left:10vw;
    margin-bottom:5vw;
    cursor: pointer;
    font-size: .8rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 400;
    color: #222;
cursor: pointer;
font-size:5vw;
z-index:1;
}

.radio_inp input
{position: absolute;
opacity: 0;
cursor: pointer;}

.radio_inp span.checkmark {
    padding-left: 0px;
}


.radio_inp input:checked ~ .checkmark {
    background-position: -168px 0;
}


.strong-tit
{float: left;
margin: 3vw 0;
width:100%;}

.required-txt
{
font-size: 4vw;
padding: 2vw 0;
font-weight: 700;
float:left;}



.form-group label.label-txt
{margin: 5vw 0 2vw 0;
float: left;
font-weight: 600;
font-size: 4.5vw;}

.required-star
{color:red;}

/*21-SEP-2020*/

.ans-text-box
{margin-bottom:5vw;}

.ans-text-box textarea
{width: 100%;
min-height: 20vw;
border-radius: 2vw;
border: 1px solid #ddd;
padding: 3vw;
font-size: 5vw;
outline:none;
}

.ans-text-box textarea:focus
{
  border: 1px solid #ddd;
}

#msg
{
font-size:4vw;}
  
.back-btn{background: #0090a3;
color: #fff;
padding: 3vw;
font-size: 4vw;
border-radius:0vw;}



/*#newSignature
{width:100%;}*/


.radio-math
{border-bottom:none; margin-bottom:0px;}


#ques_hint{padding:4vw 0 2vw 0;}
#ques_hint p{font-weight:700; color:#a3a3a3;}

.save-btn .submit-arrwo img
{width:3vw;}

.page-jobs .ui-widget-header
{background:none;}

button.forward img
{width:6vw;}

.width-100
{width:100%;}

.h4-title
{float: left;
width: 100%;
margin-top: 8vw;
padding-bottom:0; text-transform:inherit;}
.mr-3
{margin-right:3vw;}

.bottom-right
{float:left; width:100%;}


.bg-signup #bottom-wizard button.backward
{padding: 5vw 0vw;
float: left;
color: #0090a3;
background: no-repeat;
border: none;
font-weight: 700;
font-size: 4vw;
text-decoration: underline;
outline:none;
cursor:pointer;}


#notification_list .noti-tip
{float: left;
width: 100%;
margin-bottom: 5vw;}

#notification_list .noti-tip img
{width: 20vw;
height: 20vw;
border-radius: 100%;
float: left;
margin-right: 5vw;
margin-top: 5vw;}

#notification_list .noti-tip p em
{display:block;}

.bg-body.bg-forgot h1.heading
{color:#000;}

.steps
{    float: left;
    width: 100%;
    background: #34d3eb;
    padding: 4vw 4vw 0 4vw;
    margin:5vw 0 0 0;}

.steps h4
{padding:2vw 0 4vw 0;
font-size: 5vw;}

.steps .text-muted
{font-size: 4vw;}

.step-2{background:#4489e4;}

.step-3{background:#64c5b1;}


.box-tip .noti-emp-list .noti-tip p
{width:55vw;
float:left;} 

.box-tip .noti-emp-list .noti-tip strong
{display:block;}

.box-tip .noti-emp-list .noti-tip img
{margin-top:2vw;}


.box-tip .noti-emp-list .noti-tip
{border-bottom:1px solid #ddd;}


.job-emp #employees_list .emp a.btn_edit
{padding: 2vw 4vw;
background: #0090a3;
color: #fff;}

.employer-tip .box-tip
{font-size:8vw;}

.employer-profile .attendance-box
{float: left;
width: 100%;
padding: 5vw;
background: #f8f8f8;
margin: 0 0 5vw 0;}

.employer-profile .attendance-box .card-box h4 span
{display:block;}

.employer-profile .attendance-box .card-box h5.absent
{color: red;
font-weight: 40;
padding:0vw 0;
font-size: 4vw;}

.employer-profile .attendance-box .card-box .btn
{margin:2vw 0;}

.employer-profile .attendance-box .card-box .hour-mesg
{color:#777;}

.employer-profile .attendance-box .card-box h4{padding:2vw 0;}

.radio-switch__inner
{padding:2vw 0 2vw 0;}

#show_date
{float: left;
margin: 5vw 0 0 5vw;
font-size: 6vw;}


/*
    get rid of the fieldset styling and keep
    this all on a single line
*/
.radio-switch {
    border: none;
    margin-bottom:1em; /* demo value */
    padding: 0;
    white-space: nowrap;
}

/**
 * Inner wrapper to set a position relative for the inputs
 * that need to be position absolute.
 * display inline-block kees the wrapper only as wide
 * as the radio switch within.
 */
.radio-switch__inner {
    display: inline-block;
    position: relative;
    min-height: 40px;
        cursor: pointer;
}

/*
    radio button groups often benefit from a legend to
    provide context as to what the different
    options pertain to. Ideally this would be visible to all
    users, but you know...
*/
.radio-switch--hide-legend legend {
    font-size: 2px;
    opacity: 0;
    position: absolute;
}

/*
    relative labels to help position the pseudo elements
    the z-index will be handy later, when the labels that
    overlap the visual switch UI need to be adjusted
    to allow for a user to toggle the switch without
    having to move their mouse/finger to the different
    sides of the UI
*/
.radio-switch label {
    display: inline-block;
    line-height: 2;
    position: relative;
    z-index: 2;
    min-height:25px;
    cursor:pointer;
}


.account-title
{display: inline-block;
    margin: 0;
    line-height:13vw;}

.text-danger{width: 100%;
line-height: 12vw;
color: #f96a74;
float: left;
text-decoration:underline;}


/*
    inputs set to opcacity 0 are still accessible.
    Apparently there can be issues targetting inputs with
    Dragon speech recognition software if you use the typical
    'visually-hidden' class...so might as well just avoid that issue...
*/
.radio-switch input {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    height: 100%;
    opacity: .00001;
    position: absolute;
    top: 0;
    width: 30%;
    z-index: 3;
}

.radio-switch input:first-of-type {
    left: 0;
}

.radio-switch input:last-of-type {
    right: 0;
}

.radio-switch input:not(:checked):hover + label {
    text-decoration: underline;
}

/*
    a 2 option toggle can only have 2 options...so instead of
    adding more classes, i'm just going to use some
    structural pseudo-classes to target them...
    cause why let all that good work go to waste?!

  the large padding is used to position the labels
  on top of the visual UI, so the switch UI itself
  can be mouse clicked or finger tapped to toggle
  the current option
*/
.radio-switch label:first-of-type {
    padding-right: 5em;
}

.radio-switch label:last-child {
    margin-left: -4.25em;
    padding-left: 5em;
}

/*
    oh focus within, I can't wait for you to have even more support.
    But you'll never be in IE11, so we're going to need a
    polyfill for you for a bit...
 */
.radio-switch:focus-within label:first-of-type:after {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2196f3;
}

/* polyfill class*/
.radio-switch.focus-within label:first-of-type:after {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2196f3;
}

/* making the switch UI.  */
.radio-switch label:first-of-type:before,
.radio-switch label:first-of-type:after {
    border: 1px solid #aaa;
    content: "";
    height: 2em;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    vertical-align: middle;
}

.radio-switch label:first-of-type:before {
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 100%;
    position: absolute;
    right: 0;
    transition: right .2s ease-in-out;
    width: 2em;
    z-index: 2;
}

/* IE11 has some weirdness in how it's calculating the right positioning
   of the switch knob.  this hacky workaround is fitting for the hacky browser :) */
_:-ms-fullscreen, :root .radio-switch label:first-of-type:before {
    right: -.2em;
}

.radio-switch label:first-of-type:after {
    background:#efefef;
    border-radius: 1em;
    margin: 0 1em;
    transition: background .2s ease-in-out;
    width: 4em;
}

/*
    Visually change the switch UI to match the
    checked state of the first radio button
*/
.radio-switch input:first-of-type:checked ~ label:first-of-type:after {
    background:#64c5b1;
}

.radio-switch input:first-of-type:checked ~ label:first-of-type:before {
    right: 2em;
}

/* IE11 hack for correct positioning */
_:-ms-fullscreen, :root .radio-switch input:first-of-type:checked ~ label:first-of-type:before {
    right: 1.8em;
}

/* Move the 2nd label to have a lower z-index, so when that
   option is toggled, the first label will overlay on top of the
   Switch ui, and the switch can be pressed again to toggle back
   to the prevoius state. */
.radio-switch input:last-of-type:checked ~ label:last-of-type {
    z-index: 1;
}


/* 'color in' the switch knob in high contrast mode by giving it
   a large border */
@media screen and (-ms-high-contrast: active) {
    .radio-switch label:first-of-type:before {
        background-color: windowText;
        border: 1em solid transparent;
        /* firefox doesn't respect the bg color,
           so the border fills the knob */
    }

    .radio-switch:focus-within label:first-of-type:after {
        outline: 2px solid;
        outline-offset: 3px;
    }

    /* polyfill class*/
    .radio-switch.focus-within label:first-of-type:after {
        outline: 2px solid;
        outline-offset: 3px;
    }
}

.bg-light
{background:#f4f4f4;}


.site-form input[type="date"]
{border: 1px solid #eee;
width: 100%;
padding: 3vw;
border-radius: 2vw;}


.working-day .form-group label.radio_inp
{
  font-size:4vw;
}

#current_employees .row-emp .emp a.btn_edit
{
background: #0090a3;
color: #fff;
padding: 1.5vw 5vw;
}

.StickyHeader.job-header
{
  padding-bottom:2vw;   
}


.page-notification .activity #notification .noti
{margin-top: 0;
margin-bottom: 0;
border-bottom: .5vw solid #ddd;
padding: 3vw 0; width: 100%;}

.page-notification .activity #notification .noti span.noti-img
{/* float:left; */
/* margin-right:5vw; */
width:12%;
/* min-height:30vw; */ display: inline-block;
vertical-align: top;}

.page-notification .activity #notification .noti-detail {
	/* float: left; */
	display: inline-block !important;
	width: 88%;
	padding-left: 5vw;
}
.page-notification .activity #notification .noti span img
{
  border-radius:100%;
  width:100%;
  height:auto;
}

.page-notification .activity #notification .noti small
{
  padding:1vw 0;
  font-size:3vw;
  display:block; 
  float: left;
  width: 100%;
}

.page-notification .activity .noti p a
{
  color:#000;
  text-decoration:underline;
}

.page-notification .activity .noti p a.text-success
{color:#32c861;
text-decoration:none;}


/*9-OCT-2020*/

.modal-content.site-form .form-input
{margin-top:0px;
margin-bottom:2vw;}

.modal-content .form-group label.label-txt
{margin:0vw 0 1vw 0;
font-size:3vw;}

.modal-content.site-form .form-input .form-group
{margin-top:5px;}

.modal
{padding-top:30%;}
.modal-content.site-form
{margin-top:0vw;}


body.modal-open
{
  overflow-y:hidden;
}


.manage-site-pop
{padding:25vw 10vw !important;}

.page-notification .btn-confirm
{margin-left:0;}

.page-notification .btn-confirm .btn
{padding: 1vw 4vw;
margin-bottom: 0vw;
margin-top: 0px;
font-size: 3vw;
border-radius: 0;}
.activity #msg {line-height:6vw;}
.submit-sort .submit
{
  margin:0px;
  padding:1vw 4vw;
}

.notification-pop .cancel-modal
{
  padding:8vw;
  text-align:left;
}


.notification-pop .cancel-modal .modal-title
{color:#000;
font-size:4.5vw;}

.notification-pop .cancel-modal .modal-body
{
  padding:2vw 0;
}

.notification-pop .modal-content p
{padding-top:2vw;
padding-bottom:2vw;}

.notification-pop .close
{font-size:10vw;}

.notification-pop
{padding:35vw 10vw !important;}

/*12-OCT*/

.page-learner-agreement .welcome-box
{
  font-size:4vw;
}

.page-learner-agreement .welcome-box p
{padding-bottom:4vw;
word-break:break-word;
}

.page-contact .form-box textarea
{
  padding:4vw;
  font-size:4vw;
}

.page-contact .form-box textarea:focus
{border:1px solid #ddd;}

.page-contact .detail-contact
{
  padding-bottom:5vw;
  float:left;
}

.detail-contact #msg {line-height:6vw;}
.page-contact .icon-noti
{
  min-height:10vw;
  font-size:5vw;
  font-weight:300;
  line-height:10vw;
}


.employees-page h2
{font-size:5vw;
margin-bottom:3vw;}

.employees-page input.input-text
{padding:3vw;}


.employees-page button.submit
{padding:2vw 5vw;
display:inline-block;}

/*12-DEC-2020*/
#phase_list .card-box
{    float: left;
    width: 100%;
    padding: 5vw;
    margin-bottom: 20px;
    color:#fff;
    border-radius:2vw;
    background-color:#f96a74;}
.bg-warning
{background-color:#ffa91c !important;}

#form_container h3#phase_name
{font-size:5vw; line-height:5vw; border-bottom:1px solid #ddd; margin-bottom:5vw;}

.apprenticeship-unit #phase_list
{background: #f3f3f3;
    padding: 6vw;}

.apprenticeship-unit #phase_list h4.text-muted
{    margin-bottom: 5vw;
    font-family: myriad-pro, sans-serif;
    font-weight: 500;
    text-transform: initial;
    font-size: 4.5vw;}

.apprenticeship-unit #phase_list .sitemap li
{
list-style-type: disc;
    font-size: 4vw;
    margin-left: 4vw;
    line-height: 6vw;
    color: #0090a3;
}


.employee-apprenticeship .pagination-bx
{float:right;}


.employee-apprenticeship #paging ul li { float:left; padding:0 0 0 1vw;}

.employee-apprenticeship #paging ul li a{color: #313a46;
    background-color: #fff;
    border: 1px solid #dee2e6;
    padding:1vw 2vw;
    font-size: 4vw;}


.employee-apprenticeship #anslist h3.main_question
{    margin: 5vw 0;
    padding: 0;
    font-weight: 400;
    font-size: 7vw;
    line-height: 7vw;
    border-bottom: 1px solid #ddd;}

.employee-apprenticeship #anslist h4
{    color: #000;
    margin-bottom: 4vw;}

.employee-apprenticeship #anslist .form-group strong
{    display: block;
    padding: 0vw 0 5vw 0;}

.employee-apprenticeship #anslist .form-group p strong
{padding-bottom:2vw;}


.employee-apprenticeship #anslist .form-group
{
      background: #f1f1f1;
    padding: 5vw;
}

.employee-apprenticeship #anslist .form-group textarea.form-control
{    width: 100%;
    border: none;
    padding:2vw;
    font-size:4vw;}

.employee-apprenticeship #anslist .form-group textarea.form-control:focus
{outline:none;}


/*datepicker*/

#ui-datepicker-div .ui-datepicker-header.ui-widget-header
{text-align: center;
position: relative;
color:#297284;
font-weight: 600;}

#ui-datepicker-div .ui-datepicker-header.ui-widget-header a.ui-corner-all
{position: absolute;
width: 8vw;
height: 8vw;
background:#297284;
color:#297284;
background-repeat:no-repeat;
background-position:center;
text-indent:999vw;
cursor:pointer;}

#ui-datepicker-div .ui-datepicker-header.ui-widget-header a.ui-datepicker-prev.ui-corner-all
{left:0;
background-image:url('/assets/images/datepicker-prev.png');
}

#ui-datepicker-div .ui-datepicker-header.ui-widget-header a.ui-datepicker-next.ui-corner-all
{right:0;
background-image:url('/assets/images/datepicker-next.png');
}


#ui-datepicker-div .ui-datepicker-title
{min-height: 8vw;
line-height:8vw;
/* border-bottom: 2px solid #ddd; */}


table.ui-datepicker-calendar
{width: 70vw;
background: #eee;
padding:1vw;
text-align:center;
font-size:4vw;}

table.ui-datepicker-calendar thead tr th
{background: #fff;
padding: 1vw 0;}


table.ui-datepicker-calendar .ui-datepicker-today {
    border:1px solid #dad55e;
    background: #fffa90;
    color: #777620;
}

table.ui-datepicker-calendar .ui-datepicker-current-day
{
  background:#3e8ea1;
  color:#fff;
}

table.ui-datepicker-calendar .ui-datepicker-current-day a
{
  color:#fff;
}

.bg-signup .form .wizard-step h4
{
  font-size: 5vw;
  padding-bottom: 2vw;
  border-bottom:0.5vw solid #ddd;
}

.detail-contact #msg11,  .detail-contact #msg2 , .detail-contact #msg3
{font-size: 3.5vw;
line-height:5vw;
color: red;
font-weight: 700;
background-image:url('/assets/images/error-icon.png');
background-position:left;
background-repeat:no-repeat;
background-size:5vw;
padding-left:6vw;
color:#ff0000 !important;
}

#msg1
{font-size: 3.5vw;
line-height:5vw;
color: red;
font-weight: 700;
background-image:url('/assets/images/error-icon.png');
background-position:left;
background-repeat:no-repeat;
background-size:5vw;
padding-left:6vw;
color:#ff0000 !important;
}


#msg
{font-size: 3.5vw;
line-height:5vw;
color:green;
font-weight: 700;
background-image:url('/assets/images/success-icon.png');
background-position:top left;
background-repeat:no-repeat;
background-size:5vw;
padding-left:6vw;
color:#4bb543 !important;
}


.page-edit-profile #message
{font-size: 3.5vw;
line-height:5vw;
color:green;
font-weight: 700;
}

#email_result
{font-size: 3.5vw;
line-height:5vw;
color:green;
font-weight: 700;
background-image:url('/assets/images/success-icon.png');
background-position:left;
background-repeat:no-repeat;
background-size:5vw;
padding-left:6vw;
color:#4bb543 !important;
}


#email_result1 , #c_email_result

{font-size: 3.5vw;
line-height:5vw;
color: red;
font-weight: 700;
background-image:url('/assets/images/error-icon.png');
background-position:left;
background-repeat:no-repeat;
background-size:5vw;
padding-left:6vw;
color:#ff0000 !important;}


#cpass 
{font-size: 3.5vw;
line-height:5vw;
color: red;
font-weight: 700;
background-image:url('/assets/images/error-icon.png');
background-position:left;
background-repeat:no-repeat;
background-size:5vw;
padding-left:6vw;
color:#ff0000 !important;
}


#npass 
{font-size: 3.5vw;
line-height:5vw;
color: red;
font-weight: 700;
background-image:url('/assets/images/error-icon.png');
background-position:left;
background-repeat:no-repeat;
background-size:5vw;
padding-left:6vw;
color:#ff0000 !important;
}

#ccpassp 
{font-size: 3.5vw;
line-height:5vw;
color: red;
font-weight: 700;
background-image:url('/assets/images/error-icon.png');
background-position:left;
background-repeat:no-repeat;
background-size:5vw;
padding-left:6vw;
color:#ff0000 !important;
}

#ematchpass, #checkterm
{font-size: 3.5vw;
line-height:5vw;
color: red;
font-weight: 700;
background-image:url('/assets/images/error-icon.png');
background-position:left bottom;
background-repeat:no-repeat;
background-size:5vw;
padding-left:6vw;
color:#ff0000 !important;}

#error
{font-size: 3.5vw;
line-height:5vw;
color: red;
font-weight: 700;
background-image:url('/assets/images/error-icon.png');
background-position:left;
background-repeat:no-repeat;
background-size:5vw;
padding-left:6vw;
color:#ff0000 !important;}


#ccpassp1
{font-size: 3.5vw;
line-height:5vw;
color:green;
font-weight: 700;
background-image:url('/assets/images/success-icon.png');
background-position:left;
background-repeat:no-repeat;
background-size:5vw;
padding-left:6vw;
color:#4bb543 !important;
}


.page-learner-form #middle-wizard #group1
{font-size:4vw;
line-height:5vw;
color: red;
font-weight: 700;
background-image:url('/assets/images/error-icon.png');
background-position:left;
background-repeat:no-repeat;
background-size:5vw;
padding-left:6vw;
width:100%;
float:left;
color:#ff0000 !important;
}

.page-learner-form #middle-wizard #group3
{font-size:4vw;
line-height:5vw;
color: red;
font-weight: 700;
background-image:url('/assets/images/error-icon.png');
background-position:left;
background-repeat:no-repeat;
background-size:5vw;
padding-left:6vw;
width:100%;
float:left;
color:#ff0000 !important;
}

.page-learner-form #middle-wizard #b_group3
{font-size:4vw;
line-height:5vw;
color: red;
font-weight: 700;
background-image:url('/assets/images/error-icon.png');
background-position:left;
background-repeat:no-repeat;
background-size:5vw;
padding-left:6vw;
width:100%;
float:left;
color:#ff0000 !important;
}

.page-learner-form #b_group1, #b_group4 , .page-learner-form #b_group3
{font-size:4vw;
line-height:5vw;
color: red;
font-weight: 700;
background-image:url('/assets/images/error-icon.png');
background-position:left;
background-repeat:no-repeat;
background-size:5vw;
padding-left:6vw;
width:100%;
float:left;
color:#ff0000 !important;
}




#moved_file_a1, #moved_file_a2, #moved_file_a3, #moved_file_a4, #moved_file_a5, 
#moved_file_b1, #moved_file_b2, #moved_file_b3, #moved_file_b4, #moved_file_b5, #moved_file_b6, #moved_file_b7,
#moved_file_c1, #moved_file_c2, #moved_file_c3, #moved_file_c4, #moved_file_c5, #moved_file_c6,
#moved_file_c7, #moved_file_c8, #moved_file_c9, #moved_file_c10, #moved_file_c11, #moved_file_c12,
#moved_file_c13, #moved_file_c14, #moved_file_c15
{font-size:4vw;
line-height:5vw;
color:green;
font-weight: 700;
background-image:url('/assets/images/success-icon.png');
background-position:left;
background-repeat:no-repeat;
background-size:5vw;
padding-left:6vw;
width:100%;
float:left;
margin-top:2vw;
color:#4bb543 !important;
}


.error-msg
{font-size:4vw;
line-height:5vw;
color: red;
font-weight: 700;
background-image:url('/assets/images/error-icon.png');
background-position:left;
background-repeat:no-repeat;
background-size:5vw;
padding-left:6vw;
color:#ff0000 !important;
float:left;
width:100%;
}


.success-msg
{font-size:4vw;
line-height:5vw;
color:green;
font-weight: 700;
background-image:url('/assets/images/success-icon.png');
background-position:left;
background-repeat:no-repeat;
background-size:5vw;
padding-left:6vw;
color:#4bb543 !important;
float:left;
width:100%;
}




label.label-txt.profile-picture
{width:100%;}
label.file-user
{
background-image: url('/assets/images/camera.png');
background-repeat: no-repeat;
background-size:8vw;
float: left;
background-position: center;
width:15vw;
height:15vw;
background-color:#0090a3;
border-radius: 100%;
position:relative;
}

label.file-user span.cam-icon
{width:6vw;
height:6vw;
position:absolute;
right:0;
top:0;
background:#666;
text-align:center;
border-radius:100%;
z-index:9;}

label.file-user span.cam-icon img
{
  max-width:3.5vw;
}

.page-iag-sign #middle-wizard .form-group input.form-control
{
  border-bottom:none;
}



label.file-user input[type="file"]
{width:15vw; height:15vw; opacity:0; z-index:9; position:absolute;}


.label-txt-front
{margin: 5vw 0 2vw 0;
float: left;
font-weight: 600;
font-size: 4.5vw;
width:100%;} 


.heading-h5
{display: block;
float: left;
width: 100%;
margin-top: 5vw;}
/*animation-*/


.circle-check
{/*width:22vw;
height:22vw;
display:inline-block;
text-align:center;
line-height:25vw;
background:#eee;
border-radius:100%;
margin:0 auto 3vw 0;
border:1vw solid #0090a3;*/
float:left;
width:100%;
margin-bottom:5vw;
text-align:center;}


.circle-wrapper {
  position: relative;
  width:22vw;
  height:22vw;
  margin:0 auto;
}


.circle-wrapper .icon {
  position: absolute;
top:54%;
left: 50%;
transform: translate(-50%, -50%);
}

.circle {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 2.5px;
  background-clip: content-box;
  animation: spin 10s linear infinite;
}

.circle-wrapper:active .circle {
  animation: spin 2s linear infinite;
}

.success {
background-color:#4BB543;
border:0.7vw dashed #4BB543;
}

.warning {
  background-color: #F0D500;
  border: 2.5px dashed #F0D500;
}

@keyframes spin { 
  100% { 
    transform: rotateZ(360deg);
  }
}

.choose-btn
{padding:2vw 4vw;
background:#0090a3;
position: relative;
color: #fff;
text-align: center;
float: left;
cursor: pointer;
font-size:4vw;}

.choose-btn input[type="file"]
{
  position: absolute;
z-index: 1000;
opacity: 0;
cursor: pointer;
right: 0;
top: 0;
height: 100%;
width: 100%;
}

#loading
{display: block;
position: absolute;
width: 100%;
height: 100%;
background:#fff;
text-align: center;
left:0;
top:0;
z-index:9;}

#loading img
{position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);}

#profilephoto, #profilephoto1, #front_cover, #front_cover1, #rear_cover, #rear_cover1, #rear_cover1, #pass_cover, #pass_cover1
{float:left;
position:absolute;
left:0;
top:45%;
background:#fff;}


#profilephoto img, #profilephoto1 img, #front_cover1 img, #rear_cover1 img, #pass_cover1 img, #front_cover img, #rear_cover img, #pass_cover img
{border-radius: 100%;
margin-left:0;
border:0.5vw solid #0090a3;
    width: 15vw;
    height: 15vw;}
#profilephoto img, #profilephoto1 img {border:none!important;}
.page-edit-profile .form-group #profilephoto1 {
    top: 0;
}


#ui-datepicker-div .ui-datepicker-header.ui-widget-header a.ui-datepicker-prev.ui-corner-all span.ui-icon
{
  display:none;
}


.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span.ui-icon
{display:none;}

.page-learner-form .col-md-12 h5
{float: left;
width: 100%;
margin-top: 2vw;}


#cv_name1
{display: block;
float: left;
width: 100%;
color: #666;
font-size: 5vw;
margin-top: 2vw;
font-weight: 500;}


/*custom-button*/

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

textarea:focus
{outline:none;
border:none;}

.light-color
{color:#c8c8c8;}


.width-50
{width:50%;}
.mt-2
{margin-top:2vw;}

.upload-cv-sign label.label-txt
{float:left;
margin-top:2vw;
width:auto;}

.upload-cv-sign .choose-btn{float:left;
margin-left:4vw;}


.page-account-bg
{background:#f8f8f8;}
.account-StickyHeader h1.bold-txt
{color:#000;}

.mt-2
{margin-top:2vw;}
.mb-2
{margin-bottom:2vw;}


.page-edit-profile .form-group #profilephoto
{top:0;}

.page-edit-profile .form-group label
{font-weight:600;}

.delete-account
{font-size:4vw; line-height:6vw;}


.edit-detail h5.name-cv
{width:auto;}

.page-learner-agreement .submit-arrwo
{width:15vw; height:15vw; line-height:17vw;}

.page-learner-agreement .submit-arrwo img
{width:6vw;}

.form-group #ques_title
{
  font-size: 5vw;
    margin-bottom: 0;
    font-weight: 600;
    line-height: 7vw;
}

.form-group #ques_title strong
{    color: #a3a3a3;
    font-size: 7vw;
    line-height:7vw;}

.col-md-12 #bottom-wizard
{text-align:center;
display:inline-block;
width:100%;
margin-top:0px;}

.page-iag-quesion #middle-wizard .col-md-12#msg
{
  text-align:center;
  margin:5vw 0;
  background-image:none;
  font-size: 5vw;
  line-height: 8vw;
color:#000 !important;
}


.math-page #middle-wizard .col-md-12#msg
{
  text-align:center;
  margin:5vw 0;
  background-image:none;
  font-size: 5vw;
  line-height: 8vw;
  color:#000 !important;
  float:left;
  width:100%;
  padding:0px;
}

.math-page #middle-wizard .step
{float:left; width:100%;}

.english-page #middle-wizard .col-md-12#msg
{
  text-align:center;
  margin:5vw 0;
  background-image:none;
  font-size: 5vw;
  line-height: 8vw;
  color:#000 !important;
}

.clear-sign{ 
    font-size: 5vw;
    line-height: 8vw;
    background: #ff0000;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    margin: 2vw 0;
    border: none;
    padding: 2vw 4vw;}

.page-iag-sign #frmiag #bottom-wizard
{float: left;
    width: 100%;
    text-align: center;}


.welcome-box .success-msg
{text-align:left; margin-bottom:4vw; background-position:top left;}
.text-ass{    text-align: left;
    padding: 2vw 0;
    font-size: 5vw;}
.text-ass span
{display:inline-block; font-weight:700;}

.text-ass div
{display:inline-block;}

.success-msg-circle
{
    color: #4bb543;
    font-weight: 600;
    margin-bottom: 3vw;
}

#canvas canvas#newSignature
{float:left;
border-bottom:0.5vw solid #0090a3;
padding-bottom:2vw;
margin-bottom:8vw;}

input[type="checkbox"].cehckbox-condition
{    width: 3vw;
    height: 3vw;}


.page-learner-agreement .welcome-box #aig_agreement p span
{display:block;
font-size:3vw !important;
line-height:4vw !important;
margin:2vw 0;}

.apprenticeship-unit #bottom-wizard
{text-align:center;}

section.main.apprenticeship-unit
{height:auto;} 
.apprenticeship-unit #phase_list
{margin-bottom:6vw;}
.apprenticeship-unit #phase_list h3 {padding-bottom:2vw; line-height:6vw;}
.employee-apprenticeship #msg
{text-align:center; background:none; padding:0px;}  
.employee-apprenticeship #msg .success-msg-circle
{color:#000;}

#phase_list a.card-box h4
{font-weight:400; line-height:6vw; word-break:break-word; letter-spacing: .4vw;}


.upload-img
{color: #666;
    margin: 4vw 0 0 0;
    float: left;
    width: 100%;}


.form-group.terms-text label
{font-size:3.5vw;}  

.form-group.terms-text label input[type="checkbox"]
{width:4vw; height:3vw;}


.thankprofile
{font-size:5vw; line-height:6vw;}

#que_display
{float:left; width:100%;}


.math-page #top-wizard
{float:left; width:100%;}

.math-qua-form
{float:left;
width:100%;}

.math-page #form_container
{float:left; width:100%;}


.english-page #top-wizard
{float:left; width:100%;}

.english-qua-form
{float:left;
width:100%;}

.english-page #form_container
{float:left; width:100%;}


/*16-12-2020*/
.menu-first.my-jobs-menu
{
  margin-top:0;
  margin-bottom:0;
}


.menu-first.my-jobs-menu li a.pending-bg i
{
  background:#f87a2e;
}


.menu-first.my-jobs-menu li a.current-bg i
{
  background:#26b300;
}


.menu-first.my-jobs-menu li a.upcoming-bg i
{
  background:#008ffd;
}

.menu-first.my-jobs-menu li a.declined-bg i
{
  background:#a2262e;
}

.menu-first.my-jobs-menu li a.cancelled-bg i
{background:#ff0018;}

/*18-12-2020*/

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.resend-otp
{background:none;
    text-decoration:underline;
    border:none;
    margin-top:2vw;
    font-size:3vw;
    cursor:pointer;} 


#otp {
   padding-left:3.6vw; 
    letter-spacing:10.5vw;
    border: 0;
    background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
    background-position: bottom;
    background-size:15vw 1vw; 
    background-repeat: repeat-x;
    background-position-x: 11vw;
    width: 90vw;
    min-width: 95vw;
    padding-bottom:2.5vw;
    font-size:8vw;
    font-weight:700;
}


@-moz-document url-prefix() { 
  #otp {
    padding-left:3vw; 
    letter-spacing:10vw;
  }
}



#divInner{
  left: 0;
  position: sticky;
}

#divOuter{
    width: 86vw;
    overflow: hidden;
    margin:5vw 0;
    padding: 0;
}
div#cv_name {
    display: block;
    float: left;
    width: 100%;
    margin-top: 2vw;
}

.label-txt
{margin: 5vw 0 2vw 0;
    float: left;
    font-weight: 600;
    font-size: 4.5vw;}


.form h2 {
    line-height: 7vw;
    font-size: 5vw;
    color: #46515C;
  }

/* Dec-30 */
.font-grey { color: #b0b0b0; }
.refer-accept{
font-size: 4vw;
font-weight: bold;
margin-top: 4vw; color: #7a838a;
}

.refer-btn {
	background: #64c5b1;
	text-align: center;
	display: inline-block;
	color: #fff;
	padding: 3vw 5vw;
	margin-bottom:2vw;
	font-size:4vw;
}

.refer-details-box {
	border: .1vw solid #eaeaea; margin-bottom: 4vw; color:#333; font-size: 4vw;
}
.refer-details-box ul li {padding: 0.5vw 0;
border-bottom: .1vw solid #eaeaea;
width: 100%;}
.refer-details-box ul li:last-child{border-bottom:0;}
.refer-details-box ul li i {padding: 1vw 2vw; font-size: 4vw; }
div#refferal-count {
    margin-bottom: 15px;
    font-weight: bold;
    font-size: 15px;
}

p.thnx-msg{
    color: #4bb543;
    font-weight: 600;
    margin-bottom: 3vw; font-size: 4vw;
}
.step-tooltip {
	position: relative;
	width: 100%;
	float: left;
	margin-bottom:2vw;
	background-color:#fff;
}

.tooltip-link {
    width: 90%;
   float:left
}


.tooltip-sign {
	position: absolute;
	display: block;
	border-radius: 100%;
	height: auto;
	color: gray;
    margin-top:1vw;
	font-size:7vw;
	
}
.tooltip {
  position: relative;
  display: inline-block;
  width:10%;
  text-align:center;
  vertical-align:top;
}

.tooltip .tooltiptext {
  visibility: hidden;
    width: 75vw;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 2vw;
    position: absolute;
    z-index: 1;
    bottom:2vw;
    left: 10%;
    margin-left: -65vw;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 3.2vw;
    line-height: 4.2vw;
	padding: 2vw;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -1vw;
  border-width: 2vw;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

#step-tooltip-health1, #step-tooltip-health { margin-bottom: 0;}
.cv-img {width:100%; display:block; float:left; margin-bottom:0; margin-top:1vw;}
.cwo-signin .submit-arrwo,.bg-signup .btn{background-color: #0090a3;} 
.signup-tip a {text-decoration:underline;}
ul.sitemap li a {color:#64c5b1 !important;}
.modal-content.sort-modal .check input:checked ~ .checkmark {
	background-color: #64c5b1;
	border-color: #64c5b1;
}
.modal-content.sort-modal .close { color: #64c5b1; }

#msg_thanks {    padding: 3vw 2vw 3vw 2vw; margin:0;}
#msg_thanks .thankprofile {color: #4bb543;
    font-weight: 600; font-size:4vw;}
	#msg_thanks  h2 { font-size:6vw; border:none; text-transform:inherit;
    padding: 2vw 0;
}
#msg_thanks .circle-check {margin-bottom:3vw;}
.conf-otp #msg_thanks {padding:0 2vw;}
.confirm-otp #msg {padding-left:0; background-image:none;}
.cwo-signin #msg {padding-left:0; background-image:none;}

/* 16-FEB-2021 */

.app-btn-info
{
	 background-color: #34d3eb;
   padding: 1.5vw 3Vw;
    color: #fff;
    font-size: 3vw;
    line-height: 4vw;
	display:inline-block;
	margin-top:1vw;
}

.app-btn-danger
{
	 background-color:red;
  padding: 1.5vw 3Vw;
    color: #fff;
    font-size: 3vw;
    line-height: 4vw;
	display:inline-block;
	margin-top:1vw;
}


.employee-apprenticeship .form-group i
{
	    position: inherit;
		color:inherit;
		font-size:inherit;
}


@media only screen and (max-width:767px)
{
  .bg-signup
  {height:inherit; background-attachment:fixed;}

  .bg-body.bg-forgot
  {background-attachment:fixed; height:inherit;}

}