.layout-fixed .main-sidebar {background-color:#fff !important; box-shadow: none !important;}
body.layout-fixed {background-color:#f4f4f5;}
.main-header {border-bottom:1px solid #f4f4f5;}


/* Scrollbar width */
.sidebar::-webkit-scrollbar {width:8px;}

/* Track */
.sidebar::-webkit-scrollbar-track {background:#f4f4f5;}
 
/* Handle */
.sidebar::-webkit-scrollbar-thumb {background:#eee; border-radius:10px;}

/* Handle on hover */
.sidebar::-webkit-scrollbar-thumb:hover {background:#ccc;}


/* Scrollbar width */
.table-responsive::-webkit-scrollbar {height:8px;}

/* Track */
.table-responsive::-webkit-scrollbar-track {background:#f4f4f5;}
 
/* Handle */
.table-responsive::-webkit-scrollbar-thumb {background:#eee; border-radius:10px;}

/* Handle on hover */
.table-responsive::-webkit-scrollbar-thumb:hover {background:#e6e6e6;}

a {
    color:#38c6ef;
    text-decoration: none;
    background-color: transparent;}
a:hover {
    color: #000;
    text-decoration: underline;}

.swal2-styled.swal2-confirm {background-color:#38c6ef !important;}		
.swal2-styled.swal2-deny {background-color:#d9534f !important;}
.swal2-styled.swal2-cancel {background-color:#333 !important;}
.swal2-styled:focus {box-shadow:none !important;}

.badge-warning {
    color:#fff;
    background-color:#f0ad4e;}	
.badge {padding:0 .8em;
    font-size: 12px; 
	font-weight: 600;
    height: 26px;
    line-height: 24px;
	border-radius: 10rem;}
.badge-pill {
    padding-right: .8em;
    padding-left: .8em;
    border-radius: 10rem;}
.badge-danger {
    color: #fff;
    background-color: #d9534f;}	
.badge-success {
    color:#fff;
    background-color:#5cb85c;}	

.btn-outline-primary {
    color: #38c6ef;
    border-color: #38c6ef;}	
.btn-outline-primary:hover {
    color: #fff;
    background-color: #38c6ef;
    border-color: #38c6ef;}		

.btn-outline-success {
    color: #5cb85c;
    border-color: #5cb85c;}
.btn-outline-success:hover {
    color: #fff;
    background-color: #5cb85c;
    border-color: #5cb85c;}	

body.login-page .login-box, body.login-page .register-box {width:420px;}
.login-card-body h3 { 
    color: #000;
    font-weight: 600;
    margin-top:0;
    text-align: center;
    margin-bottom:0.3rem;}
.login-logo a {display:block;}
.login-logo a .app-logo {display:block;
    margin:0 auto;
    max-width:140px;
    text-align:center;}
	
body.login-page .login-box {
    border-radius:12px;
    margin: 20px auto;
    display: block;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);}	

.login-box .login-logo {
    padding:20px; 
	display:block;
    margin:0 auto; background-color:#fff;}
	
.login-page .login-box .card {
    box-shadow:none;
    border:none;
    margin:0 auto;
    padding:0; 
	background-color:rgba(255, 255, 255, 0.8);}	

body.login-page {
    background-color:#fff; 
}	

.login-wrapper {position:relative; display:block; width:100%; margin:0 auto; max-width:1170px;}
.login-wrapper:before {
    background: url('../img/immigration-bg.jpg') no-repeat 40px 80px;
    content: '';
    display: block;
    width: 100%;
    height: 600px;
    opacity: 0.45;
    position:absolute;
    left: 0;
    right: 0;
    z-index: -1;}

.login-card-body, .register-card-body {background:none;
    border-top:0;
    color:#333;
    padding:0 25px 20px;}

.forgot-pass {text-align:right; margin-top:4px;}	
.forgot-pass a {font-family: "Source Sans 3", sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #333;
    display: block;}
.forgot-pass a:hover {text-decoration:underline; color:#000;}

.remember-pass label {font-family: "Source Sans 3", sans-serif;
    font-weight: 600 !important;
    font-size: 14px;
    color: #333;
    display: inline-block;
    margin: 0;
    padding: 0;}

.login-box .btn-primary {
    color:#fff;
    background-color:#38c6ef;
    border-color:#38c6ef;
    box-shadow:none; height:44px;}
.login-box .btn-primary:hover {
    color:#fff;
    background-color:#1db5e1;
    border-color:#1db5e1;
    box-shadow:none;}
	
.login-box .btn-sign {display:block;
    max-width:100%;
    margin:10px auto 0;
    padding:0;}	

.remember-pass input#remember {
    top:2px;
    position:relative;}	
.login-box .login-box-msg {margin: 0;
    padding: 0 20px 20px;
    text-align: center;
    font-family: "Source Sans 3", sans-serif;
    font-weight: 500;
    font-size: 16px;}	
.login-box .form-group {
    margin-bottom: 1.2rem;}	
.login-box .input-group-text {border:1px solid #eee;}	
.login-box .form-control {border:1px solid #eee; height:calc(2.75rem + 2px);}
.login-card-body .input-group .input-group-text .fas, .login-card-body .input-group .input-group-text .fa, .register-card-body .input-group .input-group-text .fas, .register-card-body .input-group .input-group-text .fa {color:#62dbfe;}

.login-card-body .input-group .form-control:focus~.input-group-append .input-group-text, .register-card-body .input-group .form-control:focus~.input-group-append .input-group-text {border-color:transparent;}
.login-box .form-group .text-danger strong {font-weight:600;}
.login-box .form-group .text-danger {color:#e73224 !important;
    font-size: 13px; font-family: "Source Sans 3", sans-serif;
    font-weight:600;} 
	
.layout-fixed .brand-link {
    width: 250px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:10px;     
	border-bottom:1px solid #f4f4f5 !important;}	
.main-sidebar .sidebar-logo {
    display: block;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    position: relative;
    text-align: center;}	
.brand-link .brand-image {
    float: none;
    line-height: inherit;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    max-height: 85px;
    width: auto;}	
.sidebar-collapse .brand-link .brand-image {max-height: 50px;}	

.navbar {padding:1rem;}	

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active, .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {background-color: transparent;
    color:#38c6ef !important;
    box-shadow: none;}
.nav-pills .nav-link:not(.active):hover {
    color:#38c6ef !important;}	
[class*=sidebar-dark-] .nav-sidebar>.nav-item.menu-open>.nav-link, [class*=sidebar-dark-] .nav-sidebar>.nav-item:hover>.nav-link, [class*=sidebar-dark-] .nav-sidebar>.nav-item>.nav-link:focus {background-color: transparent;
    color: #000;}	

.info-box {box-shadow:0 1px 13px rgba(0,0,0,.05);     
	margin-bottom:2rem;
    min-height:100px;
    padding:1rem;}	
	
.navbar-expand .navbar-nav .nav-link i.fa-bars {
    font-size:23px; color:#222;}	
.navbar-light .navbar-nav .nav-link {
    color: #000;
    font-size: 14px;
    font-weight: 600;}
.navbar-light .navbar-nav .nav-link .img-circle {
    border-radius: 50%;}	
.layout-fixed .main-sidebar .sidebar {padding-top:1rem;}	
[class*=sidebar-dark-] .sidebar a {color:#000 !important; padding:.6rem 0;}

.btn-primary, .btn-info {
    color: #fff;
    background-color: #38c6ef;
    border-color: #38c6ef;}
.btn-primary:hover, .btn-info:hover {
    color: #fff;
    background-color: #000;
    border-color: #000;}	


.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #000;
    border-color: #000;}	
.btn-primary.focus, .btn-primary:focus {
    color: #fff;
    background-color: #000;
    border-color: #000;
    box-shadow: none;}	

.main-footer {
    background:#fff;
    border-top:1px solid #f4f4f5;
    color: #a1a1a1;
    padding: 1rem;     
	font-size:14px;}
.main-footer strong {
    font-weight: 600;     
	color: #a1a1a1;}	

.pagination .page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #a1a1a1;
    background-color: #fff;
    border: 1px solid #eee;}	
	
.pagination .page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #38c6ef;
    border-color: #38c6ef;}	

.pagination .page-item.disabled .page-link {
    color:#a1a1a1;
    pointer-events:none;
    cursor:auto;
    background-color:#fff;
    border-color:#eee;}	

div.dataTables_wrapper div.dataTables_info {padding-top:2em; padding-bottom:2em;}		
div.dataTables_wrapper div.dataTables_paginate {padding-top:1.5em; padding-bottom:1.5em;}		

.table thead th {
    vertical-align:bottom;
    border-bottom:1px solid #e1e1e1;
    font-size:15px; border-top:1px solid #f4f4f5;}
.table-striped tbody tr:nth-of-type(odd) {background-color:#f4f4f5;}

.card {border:none; 
box-shadow:0 0px 12px rgba(0,0,0,0.05);     
margin-bottom:2rem;}	
.card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: #fff;
    border-bottom:1px solid #f4f4f5;}
table.dataTable td a i.fa {
    padding-left:5px;}	
.del-row {color:#f94e37;}	

.card-title {
    float: left;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: #000;}
.status-bar {
    position:relative;
    display:flex;
    width:100%;
    text-align:center;
    justify-content: center;
    align-items: center;
    padding:10px 0;
    background: #fff;
    margin:0px auto 15px;
    border-radius:6px;
    box-shadow:0 0px 5px rgba(0,0,0,0.10);}
.form-control {border:1px solid #e7e7e7;     
	font-size:15px;
    font-weight:500;
	font-family: "Source Sans 3", sans-serif;
    color: #000;}	
.form-control:focus {
    color:#495057;
    background-color:#fff;
    border-color:#beecf9 !important;
    outline:0;
    box-shadow:none;}

.card-footer {
    padding:1.25rem;
    background-color:#fff;
    border-top:1px solid #eee;}
	
.card-footer .btn-info {
    margin-left:5px;
    float:right;}	
.card-primary:not(.card-outline)>.card-header {
    background-color:#fff;}	
.select2-container--default .select2-selection--single {border:1px solid #e7e7e7;}
.page-link:focus {box-shadow:none;}

.topic-box {border-radius:8px;
    margin:10px auto 25px;
    display:block;
    box-shadow:0 2px 8px rgba(0,0,0,0.12);
    padding:15px;}
.topic-box h5 {
    font-size:17px;
    font-weight:700;
    display:block;
    margin: 0 0 20px;
    padding: 0 0 10px;
    border-bottom: 1px solid #eee;}
.topic-box .form-group label {display: block;
    font-size: 15px;
    font-weight: 600;
    font-family: "Source Sans 3", sans-serif;}
.card .answer-text{
    font-size: 18px;
    text-align: justify;
    line-height: 2;
    padding: 10px;}		
.card .spn-answer-title {font-weight:600;}	
.card-primary.card-outline {
    border-top:3px solid #38c6ef;
    border-bottom:3px solid #38c6ef;}

button#btn-allow-retest {color: #fff;
    background-color: #000;
    border-color: #000;
    font-size: 14px;
    line-height: 1;
    border-radius: 8px;
    height: 38px;
    padding: 0 15px !important;}	
button#btn-allow-retest:hover {background-color:#38c6ef;
    border-color:#38c6ef;} 	

.box-profile p {font-size:14px; color:#999;}
.box-profile h6 {
    font-weight: 600;
    font-size: 14px;
    display: block;
    color: #0a2143;}	
.box-profile .left-sec-one {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 0 10px;}	
.box-profile .left-sec-one label {
    color: #000;
    font-weight: 600;}	
.box-profile .left-sec-one #spn-status {
padding: 0 .8em;
    font-size: 12px;
    font-weight: 600;
    height: 26px;
    line-height: 24px;
    border-radius: 10rem;}	

.anc-show-div {color:#fff;
    background-color:#38c6ef;
    border-color:#38c6ef;
    border-radius: 3px;
    padding: 0 16px;
    height: 36px;
    line-height: 34px;}	
.anc-show-div:hover {background-color:#000; color:#fff;
    border-color:#000;} 	
.breadcrumb-item+.breadcrumb-item::before {display: inline-block;
    padding-right: .5rem;
    color: #38c6ef;
    content: "/";}	

.breadcrumb-item.active {color:#000;}	
.breadcrumb-item+.breadcrumb-item {font-size:14px;}

.bg-info {background-color:#e9e9e9 !important; color:#000 !important;}
.bg-warning {background-color:#e9e9e9 !important;}

.step.active.highlighted {position:relative;}
.step.active.highlighted:after {
    content:"\f0d7";
    font-family:"Font Awesome 5 Free";
    margin: 0;
    padding: 0;
    width: 25px;
    height: 25px;
    color: #28a745;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-weight: 900;
    font-size: 22px;}	
.step.active.highlighted .step-name {
    font-weight: 600;}
.step-box {
    border-radius:8px;
    margin:10px auto 25px;
    display:block;
    box-shadow:0 2px 8px rgba(0,0,0,0.12);
    padding:15px; font-size:14px;}	
.step-box h5 {
    font-weight:bold;
    font-size:18px;
    display:block;}
.step-box hr {margin-top: 10px;}	
	

.form2-steps .steps .step {
    background: #fff;
    border-radius: 8px 8px 0 0;
    padding: 10px;
    min-width: 15%;
    font-size: 14px;
    font-weight: 500;
    color: #aaa;}	
.form2-steps .steps .step.active {
    background: #fff;
    border-radius: 8px 8px 0 0;
    padding: 10px;
    min-width: 15%;
    font-size: 14px;
    font-weight: 500;
    color: #000;
	position:relative;
	cursor: pointer;}	
.form2-steps .steps .step.active.highlighted {background:#f4f4f5;}	

.form2-steps .step.active.highlighted:after {
    content: "";
    margin: 0;
    padding: 0;
    width: 100%;
    height: 2px;
    color: #28a745;
    -webkit-font-smoothing: antialiased;
    display: block;
    background: #28a745;
    position: absolute;
    bottom: -2px;
    left: 0;}	
	
.form2-steps .steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom:0;
    border-bottom: 2px solid #e9e9e9;
    padding-bottom:0;}	
.upload-file {
    display: block;
    text-align: center;
    font-size: 14px;
    margin: 20px auto;
    padding: 0;}
.upload-file label {
    display: block;
    margin-bottom: 20px;}	
.upload-file a {
    display: flex;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 180px;
    height: 190px;
    border-radius: 8px;
    background: #fff;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e5e5;}	
.upload-file a img {
    max-width:170px;
    margin:0 auto;     
	max-height:170px;}	
.circle.active + .step-name  {font-weight:700;}
.div-status-filter .form-control {height:calc(1.5em + .5rem + 2px); font-size:14px;}

.card-tools .btn-primary {color:#fff;
    background-color:#222;
    border-color:#222;}
.card-tools .btn-primary:hover {color: #fff;
    background-color: #38c6ef;
    border-color: #38c6ef;}	

.anc-word-count {
    float:right;
    font-size:16px;
    font-weight:600;}
.input-group-text {background-color: #fff;
    border: 1px solid #e7e7e7; height: calc(1.5em + .75rem + 0px);}	
	



@media screen and (max-width:1024px) {

body.login-page {height: 60vh;}
.login-wrapper {max-width:100%;}
.login-wrapper:before {content: ''; 
	background-position:center center;
    display: block;
    width: 100%;
    height: 550px;
	background-size:cover;}
}


@media screen and (max-width:767px) {

body.login-page {height:auto;}
.login-wrapper {overflow-y:visible;}
body.login-page .login-box, body.login-page .register-box {width:320px; margin:30px auto 0;}
.login-card-body, .register-card-body {padding:0 20px 20px;}
.login-wrapper:before {
    content: '';
    background-position: -280px 60px;
    display: block;
    width: 100%;
    height: 600px;
    background-size:cover;}

.main-footer {font-size:12px; text-align: center; padding:.5rem 1rem;}
.card-body {padding:1rem;}
div.dataTables_wrapper div.dataTables_paginate {padding-top:.5em; padding-bottom:1.5em;}
div.dataTables_wrapper div.dataTables_paginate ul.pagination {margin:0 auto;
    white-space: nowrap;
    justify-content: flex-end; font-size:13px;}
div.dataTables_wrapper div.dataTables_info {
    padding-top:.5em;
    padding-bottom:.5em;
    text-align: right; font-size:13px;}
.form-control {font-size:12px;}	
.div-status-filter .form-control {font-size:12px;}	
div.dataTables_wrapper div.dataTables_filter label, div.dataTables_wrapper div.dataTables_length label {font-size:14px;}
.table thead th, table.dataTable td, table.dataTable th {font-size:13px;}
label:not(.form-check-label):not(.custom-file-label), .form-check-label {font-size:14px;}
.btn {font-size:14px;}
.input-group-text {
    height:calc(1.5em + .75rem + 2px);
    font-size:12px;}
.card .answer-text {
    font-size:14px;
    text-align:justify;
    line-height:24px;
    padding:0;}
.form2-steps .steps .step.active {padding:6px;
    min-width:40%; margin-right:5px;
    font-size:12px; line-height:16px;
    min-height:74px;}	
.form2-steps .steps {width:100%; overflow-x:scroll; overflow-y:hidden;}
.form2-steps .steps .step-name {font-size:12px; line-height:16px;}		
.form2-steps .steps .step {padding:6px; min-width:33%; font-size:12px; margin-right:5px;}
.form2-steps .step.active.highlighted:after {content:"";
    margin:0;
    padding:0;
    width:100%;
    height:2px;
    color:#28a745;
    -webkit-font-smoothing:antialiased;
    display:block;
    background:#28a745;
    position:absolute;
    bottom:0px;
    left:0;}	
#example1_length {display:block !important;}
.form2-container .step-content .col-sm-2 {width:50%; padding:0 5px;}
.upload-file label {margin-bottom:10px;}
	
}

.breadcrumb-sec{padding-top:5px; padding-bottom:5px;}

.step-box .row-bg:nth-child(odd) {
    background: #f4f4f5;
    margin-left: 0;
    margin-right: 0;
    border-bottom: 1px solid #dee2e6;
    vertical-align: middle;
    padding:10px 0 5px; 
	margin-bottom:0 !important;}
.step-box .row-bg:nth-child(even) {
    background: #fff;
    margin-left: 0;
    margin-right: 0;
    border-bottom: 1px solid #dee2e6;
    vertical-align: middle;
    padding: 10px 0 5px;
	margin-bottom:0 !important;}	
.step-box h6 {
    font-weight: 700;
    margin-bottom: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #dee2e6;}	
.step-box .row-btn {margin-top:15px;}	

#user-detail-modal .modal-title {
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 18px;
    font-weight: 700;}
.modal-body.user-detail-sec {padding-top:0;}
.user-detail-sec .row:nth-child(odd) {
    background: #f4f4f4;}
.user-detail-sec .row .col-sm-4 label {
    font-size: 14px;
    line-height: 1;}
.user-detail-sec .row .col-sm-8 {
    font-size: 14px;}	
.form2-container .step-content.active {
            display: block; background: #f4f4f5;
			border-bottom:1px solid #e9e9e9;
    border-left: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;}	

.user-detail-sec #progress-section {
    height: 228px;
    overflow-y: scroll;
    overflow-x: hidden;}	
/* Scrollbar width */
#progress-section::-webkit-scrollbar {width:8px;}

/* Track */
#progress-section::-webkit-scrollbar-track {background:#f4f4f5;}
 
/* Handle */
#progress-section::-webkit-scrollbar-thumb {background:#eee; border-radius:10px;}

/* Handle on hover */
#progress-section::-webkit-scrollbar-thumb:hover {background:#ccc;}	

.user-detail-sec .fa.green {color:#5cb85c;}
.user-detail-sec .fa {color:#ccc;}

/*-----css added 22/8/2024-----*/
.info-box .info-box-icon {
    border-radius: 10px;
    align-items: center;
    display: flex;
    font-size: 16px;
    justify-content: center;
    text-align: center;
    width: 40px;
    height: 40px;
    padding: 0;
}
.info-box .info-box-icon i {color: #fff!important;}
.info-box .info-box-content {
    flex: none;
    padding: 0 0 0 10px;
    display: block;
}
.info-box .info-box-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    font-size: 14px;
    font-weight: 600;
    color: #555;
}
.info-box .info-box-icon.bg-one {
    background-color: #3ec9d6 !important;
}
.info-box .info-box-icon.bg-two {
    background-color: #ffbb5a !important;
}
.info-box .info-box-icon.bg-three {
    background-color: #fc86a5 !important;
}
.info-box .info-box-icon.bg-four {
    background-color: #6ec481 !important;
}
.info-box .info-box-number {
    line-height: 1.3;
}