:root {

    --clr-primary-1: #136F63;
	/* --clr-primary-1: #F03A47; */
    --clr-primary-2: #EDDEA4;

    --clr-white: #FFFFFF;
	--clr-light-gray: #E3E6F2;
    --clr-light-gray-1: #F5F6FA;
    --clr-light-gray-2: #F6F6F6;
    --clr-light-gray-3: #FAFAFA;
    --clr-light-gray-4: #F9F7F3;
    --clr-light-gray-5: #E7E8EE;
    --clr-light-gray-6: #D4D5DE;
    --clr-light-gray-7: #A7A7A7;
    --clr-light-gray-8: #ABABAB;
    --clr-light-gray-9: #ACACAC;
	--clr-light-gray-10: #D9D9D9;
	--clr-light-gray-11: #A2A4AD;
	--clr-light-gray-12: #AAA;
    --clr-gray: #7A7A7A;
	--clr-medium-gray-1: #858585;
    --clr-medium-gray-2: #5A5D6E;
	--clr-medium-gray-3: #746F72;
	--clr-light-cyan: #C8EDE8;
	--clr-light-blue: #F6FBFF;
    --clr-light-blue-1: #DEEFFF;
	--clr-light-blue-2: #EDF1FF;
    --clr-light-blue-3: #B9D6F2;
	--clr-light-peach: #FBF4E6;
	--clr-light-pink-1: #ffc6d2;
    --clr-blue-1: #0082FF;
    --clr-blue-2: #5E6DF4;
    --clr-light-red-1: #F03A47;
    --clr-dark-gray-1: #4A4A4A;
    --clr-dark-gray-2: #0B0B0F;
    --clr-dark-blue: #22223B;
	--clr-dark-blue-2: #1D1E22;
    --clr-black: #000000;
	--clr-green-1: #136F63;
	/* --clr-primary-light-shade: rgb(240, 58, 71,0.1); */
	--clr-primary-light-shade: #F1F7FC;
  
    --ff-primary: "Roboto", sans-serif;
    --ff-secondary: "Satoshi", sans-serif;

	--fw-ultra-bold: 900;
	--fw-extra-bold: 800;
    --fw-bold: 700;
    --fw-semi-bold: 600;
	--fw-medium:500;
    --fw-regular: 400;
	--fw-lighter: 300; 

    /* --fs-300: 13px;
    --fs-400: 14px;
    --fs-500: 15px;
    --fs-600: 16px;
    --fs-700: 18px;
    --fs-800: 20px;
    --fs-900: 24px;
    --fs-1000: 25px;
    --fs-1100: 35px; */

	--fs-300: 0.8125rem; 	/* 13px */
    --fs-400: 0.875rem; 	/* 14px */
    --fs-500: 0.9375rem; 	/* 15px */
    --fs-600: 1rem; 		/* 16px */
	--fs-650: 1.063rem;		/* 17px */
    --fs-700: 1.125rem;		/* 18px */
    --fs-800: 1.25rem;	 	/* 20px */
    --fs-900: 1.5rem; 		/* 24px */
    --fs-1000: 1.5625rem; 	/* 25px */
	--fs-1050: 1.875rem;    /* 30px */
    --fs-1100: 2.1875rem; 	/* 35px */    

	--size-100: 0.25rem;	/* 4px */
	--size-200: 0.5rem;		/* 8px */
	--size-300: 0.75rem;	/* 12px */
	--size-400: 1rem;		/* 16px */
	--size-500: 1.5rem; 	/* 24px */
	--size-600: 2rem;		/* 32px */
	--size-700: 3rem;		/* 48px */
	--size-800: 4rem;		/* 64px */
	--size-900: 5rem;		/* 80px */

}

/* **** CSS RESET **** */

/* Box sizing rules */
*, *::before, *::after {
    box-sizing: border-box;
}
/* Remove default margin */
* {
    margin: 0;
}
html, body {
    height: 100%;
}
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
li,
ol {
    list-style: none;
}
img, picture, video, canvas, svg {
    max-width: 100%;
}
input, button, textarea, select {
    font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}


/* Utility class */
.h-100 {
	height: 100%;
}
.text-primary-1 {
    color: var(--clr-primary-1);
}
.text-primary-2 {
    color: var(--clr-primary-2);
}
.text-blue-1 {
    color: var(--clr-blue-1);
}
.text-blue-2 {
    color: var(--clr-blue-2);
}
.text-dark-blue-1 {
	color: var(--clr-dark-blue);
}
.text-dark-gray-1 {
    color: var(--clr-dark-gray-1);
}
.text-dark-gray-2 {
    color: var(--clr-dark-gray-2);
}
.text-gray {
    color: var(--clr-gray);
}
.text-medium-gray-2 {
    color: var(--clr-medium-gray-2);
}
.text-medium-gray-1 {
    color: var(--clr-medium-gray-1);
}
.text-light-gray-8 {
    color: var(--clr-light-gray-8);
}
.text-light-gray-9 {
    color: var(--clr-light-gray-9);
}
.text-light-gray-12 {
	color: var(--clr-light-gray-12);
}
.text-dark-blue-2 {
	color: var(--clr-dark-blue-2);
}
.text-black {
    color: var(--clr-black);
}

.bg-primary-1 {
    color: var(--clr-primary-1);
}
.bg-primary-2 {
    color: var(--clr-primary-2);
}
.bg-light-gray-2 {
    color: var(--clr-light-gray-2);
}
.bg-light-gray-3 {
    color: var(--clr-light-gray-3);
}
.bg-white {
    color: var(--clr-white);
}
.bg-light-cyan {
    color: var(--clr-light-cyan);
}
.bg-light-blue-1 {
    color: var(--clr-light-blue-1);
}


.fw-ultra-bold {
    font-weight: var(--fw-ultra-bold);
}
.fw-bold {
    font-weight: var(--fw-bold);
}
.fw-semi-bold {
    font-weight: var(--fw-semi-bold);
}
.fw-extra-bold {
    font-weight: var(--fw-extra-bold);
}
.fw-medium {
    font-weight: var(--fw-medium);
}
.fw-regular {
    font-weight: var(--fw-regular);
}
.fw-lighter {
    font-weight: var(--fw-lighter);
}

.fs-300 {
    font-size: var(--fs-300);
}
.fs-400 {
    font-size: var(--fs-400);
}
.fs-500 {
    font-size: var(--fs-500);
}
.fs-600 {
    font-size: var(--fs-600);
}
.fs-700 {
    font-size: var(--fs-700);
}
.fs-800 {
    font-size: var(--fs-800);
}
.fs-900 {
    font-size: var(--fs-900);
}
.fs-1000 {
    font-size: var(--fs-1000);
}
.fs-1050 {
    font-size: var(--fs-1050);
}
.fs-1100 {
    font-size: var(--fs-1100);
}
.pr-0 {
	padding-right: 0;
}
.pl-0 {
	padding-left: 0;
}
.pt-0 {
	padding-top: 0;
}
.pb-0 {
	padding-bottom: 0;
}


/**************************************************/
/*                  General/Body                  */
/**************************************************/

@font-face {
	font-family: 'Satoshi';
	src: url('../fonts/Satoshi-Regular.eot');
	src: url('../fonts/Satoshi-Regular.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Satoshi-Regular.woff') format('woff'),
		 url('../fonts/Satoshi-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
  }
@font-face {
	font-family: 'Satoshi';
	src: url('../fonts/Satoshi-Medium.eot');
	src: url('../fonts/Satoshi-Medium.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Satoshi-Medium.woff') format('woff'),
		 url('../fonts/Satoshi-Medium.ttf') format('truetype');
	font-weight: medium;
	font-style: normal;
  }
@font-face {
	font-family: 'Satoshi';
	src: url('../fonts/Satoshi-Bold.eot');
	src: url('../fonts/Satoshi-Bold.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Satoshi-Bold.woff') format('woff'),
		 url('../fonts/Satoshi-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
  }
@font-face {
	font-family: 'Satoshi';
	src: url('../fonts/Satoshi-Black.eot');
	src: url('../fonts/Satoshi-Black.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Satoshi-Black.woff') format('woff'),
		 url('../fonts/Satoshi-Black.ttf') format('truetype');
	font-weight: black;
	font-style: normal;
  }

html {
	font-size: 16px;
}

body {
	font-family: var(--ff-primary);
	color: #4a4a4a;
	background-color: #f5f6fa;
	margin: 0;
	padding: 0;

}

.navbar {
    margin-bottom: 15px;
}

/* By default firefox wont display the placeholders for broken images without this rule*/
img:-moz-broken {
	-moz-force-broken-image-icon: 1;
}

ul {
	margin:0;
	padding:0;
}

pre {
	white-space: pre-wrap !important;      /* CSS 2.1 */
	white-space: pre-line !important;      /* CSS 3.0 */
	white-space: -pre-wrap !important;     /* Opera 4-6 */
	white-space: -o-pre-wrap !important;   /* Opera 7 */
	white-space: -moz-pre-wrap !important; /* Mozilla */
	white-space: -hp-pre-wrap !important;  /* HP Printers */
	word-wrap: break-word !important;      /* IE 5+ */
	white-space: pre !important;           /* CSS 2.0 */
}

:focus {
	outline:none;
}

/* **** The following css will affect the font-size in dashboard and create test page ****** */
@media (max-width: 1400px) {
	html, body{
	   font-size: 14px;
	}
}

/* ********** Button ************ */
button.button {
    background: var(--clr-primary-1);
    color: var(--clr-light-gray-4);
    font-weight: var(--fw-bold);
    font-size: var(--fs-600);
	padding: 0.8125em 2.875em;
	margin-right: 0;
	border-radius: 8px;
	border-width: 0px;
    text-align: center;
    white-space: nowrap;
	outline: none;
	-webkit-transition: all 0.5s;
    transition: all 0.5s;
}
/* button.button:hover {
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
} */
button.button-secondary {
	background: transparent;
	color: var(--clr-primary-1);
	border: 1px solid var(--clr-light-gray-1);
}
button.disabled-button {
	font-weight: var(--fw-semi-bold);
	font-size: var(--fs-500);
	padding: 0.8667em 2.8em;
	border-radius: 8px;
	background: var(--clr-light-gray-1);
	border: 1px solid var(--clr-light-blue-2);
	color: var(--clr-light-gray-11);
}

/* *************** Progess bar ************* */
progress {
	display: block;
	border-radius: 7px; 
	width: 55px;
	height: 6px;
	/* margin: 10px auto 0 auto; */
	margin-top: 10px;
  }
  progress::-webkit-progress-bar {
	background-color: var(--clr-light-gray-6);
	border-radius: 10px;
  }
  progress::-webkit-progress-value  {
	background-color: var(--clr-primary-1);
	border-radius: 10px;
  }

/* *************** Custome dropdown with submenu ************* */
.dropdown-wrapper {
	position: relative;
}
.cust-dropdown-menu .cust-dropdown-submenu>.cust-dropdown-menu {
	display: none;
}
.cust-dropdown-menu, 
.cust-dropdown-submenu {
	padding: 25px 0;
}
.cust-dropdown-menu li {
    padding: 10px 20px;
    /* margin-right: 20px; */
}
.cust-dropdown-menu {
    position: absolute;
	left: 20%;
    background-color: var(--clr-white);
    /* border-radius: 5px 0 0 5px; */
	border-radius: 5px;
	z-index: 100;
	border: 1px solid var(--clr-light-gray-5);
	min-width: 220px;
	min-height: 300px;
}
.cust-dropdown-menu:first-child {
	box-shadow: 0px 4px 6px -1px var(--clr-light-gray-5);
}
.cust-dropdown-submenu .cust-dropdown-menu {
	background: var(--clr-light-gray-3);
	left: 100%;
    top: -1px;
	left: 98%;
    top: 0;
	height: 100%;
	min-width: 300px;
	box-shadow: 0px 4px 6px 0px var(--clr-light-gray-5);
	border-radius: 0 5px 5px 0;
}
.submenu-name-block {
    display: flex;
    justify-content: space-between;
    gap: 5px;
}
.dropdown-header {
	color: var(--clr-light-gray-11);
	font-size: var(--fs-400);
	font-weight: var(--fw-bold);
}
.cust-dropdown-menu .filter-name {
	color: var(--clr-dark-gray-2);
	font-size: var(--fs-400);
	font-weight: var(--fw-medium);
}
.cust-dropdown-menu .cust-dropdown-submenu.active {
	cursor: pointer;
	background-color: var(--clr-primary-light-shade);
	transition: all 0.2s ease-in-out;
}
.cust-dropdown-menu .cust-dropdown-submenu.active .filter-name,
.cust-dropdown-menu .cust-dropdown-submenu.active .expand-icon {
	color: var(--clr-primary-1);
}
.cust-dropdown-menu .cust-dropdown-submenu.active .cust-dropdown-menu {
	display: block;
	transition: opacity 0.3s ease-in-out;
}
@media (min-width: 768px) {
	.submenu-name-block {
		gap: 20px;
	}
}


/* ******** Custom Checkbox ********** */
input.styled-checkbox[type="checkbox"] {
	display: none;
}

input.styled-checkbox[type="checkbox"] + *::before {
	content: "";
	display: inline-block;
	vertical-align: bottom;
	width: 1rem;
	height: 1rem;
	border-style: solid;
	border-width: 1px;
	border-radius: 2px;
	line-height: 1rem;
	border-color: var(--clr-light-gray-6);
}
input.styled-checkbox[type="checkbox"]:checked + *::before {
	content: "✓";
	color: white;
	text-align: center;
	background: var(--clr-primary-1);
	border-color: var(--clr-primary-1);
}

.styled-checkbox+.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
}
/**************************************************/
/*                     Form                       */
/**************************************************/
fieldset {
	border:none;
	width:100%;
	margin:0;
	padding:0;
}

legend {
	width:100%;
	font-size:30px;
	font-weight:bold;
	margin:20px 0px;
}

img {
	border:none;
}

input[disabled],
select[disabled],
textarea[disabled],
.disabled {
		color:grey;
		background:#C0c0c0 !important;
}
input[disabled],
textarea[disabled],
.disabled {
		border:1px solid white !important;
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
	padding:10px;
	cursor:text;
	width:100%;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	margin:0px;
	font-size:inherit;
}
input[type="file"] {
	padding:7px;
	width:245px;
}
select {
	padding:10px;
	margin:0;
}

input[type="text"],
input[type="email"],
input[type="password"],
input.text,
input.title,
select,
textarea {
	color:#7F7F7F;
	border: 1px solid #BBBBBB !important;
}

/***************************************************/
/* GENERAL CLASSES                                 */
/***************************************************/
span.multi-field{ 
	position: relative;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	min-height: 70px;
}

label.infield {
	position: absolute;
	top: 0px;
	left: 0px;
	cursor:text;
	width:100%;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding:11px;
	font-size: inherit;
	color:#8E8E8E;
	font-weight:normal;
	white-space: nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	text-align:left !important;
	display:none;
}

.page {
	width:100%;
	margin-left:auto;
	margin-right:auto;
	vertical-align:middle;
}

._clear {
	width:100%;
	clear:both;
	height:0;
}

.show-block {
	display:block;
	vertical-align:middle;
}

.show-inline-block {
	display:inline-block;
	vertical-align:middle;
}

.show-inline-top {
	display:inline-block;
	vertical-align:top;
}

.show-inline-bottom {
	display:inline-block;
	vertical-align:bottom;
}

.show-inline-block {
	display:inline-block;
	vertical-align:middle;
}

.instruction{
	font-size:13px;
	text-align:right;
	width:100%;
	color:#FF0000;
}

.hidden {
	display:none;
}

.error, .alert, .notice, .success, .info {
    padding: 0.4em;
    margin-bottom: 1em;
    border: 1px solid #ddd;
    text-align: center;
    opacity: 0.8;
    font-weight: 400;
}
/*.error, .alert {background:#fbe3e4;color:#8a1f11;border-color:#fbc2c4;}*/
.error, .alert {background: #FA8258;color: white;border-color: #FA5858;padding: 10px 20px;}
.notice {background:#fff6bf;color:#514721;border-color:#ffd324;}
.success {background:#e6efc2;color:#264409;border-color:#c6d880;}
.info {background:#d5edf8;color:#205791;border-color:#92cae4;}
.error a, .alert a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}
.info a {color:#205791;}
.container {margin:0 auto;}
.showgrid {background:url(src/grid.png);}
.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 {float:left;margin-right:7px;}
.last {margin-right:0;}
.span-1 {width:30px;}
.span-2 {width:70px;}
.span-3 {width:110px;}
.span-4 {width:150px;}
.span-5 {width:190px;}
.span-6 {width:230px;}
.span-7 {width:270px;}
.span-8 {width:310px;}
.span-9 {width:350px;}
.span-10 {width:390px;}
.span-11 {width:430px;}
.span-12 {width:470px;}
.span-13 {width:510px;}
.span-14 {width:550px;}
.span-15 {width:590px;}
.span-16 {width:630px;}
.span-17 {width:670px;}
.span-18 {width:710px;}
.span-19 {width:750px;}
.span-20 {width:790px;}
.span-21 {width:830px;}
.span-22 {width:870px;}
.span-23 {width:910px;}
.span-24 {width:950px;margin-right:0;}
input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 {border-left-width:1px;border-right-width:1px;padding-left:5px;padding-right:5px;}
input.span-1, textarea.span-1 {width:18px;}
input.span-2, textarea.span-2 {width:58px;}
input.span-3, textarea.span-3 {width:98px;}
input.span-4, textarea.span-4 {width:138px;}
input.span-5, textarea.span-5 {width:178px;}
input.span-6, textarea.span-6 {width:218px;}
input.span-7, textarea.span-7 {width:258px;}
input.span-8, textarea.span-8 {width:298px;}
input.span-9, textarea.span-9 {width:338px;}
input.span-10, textarea.span-10 {width:378px;}
input.span-11, textarea.span-11 {width:418px;}
input.span-12, textarea.span-12 {width:458px;}
input.span-13, textarea.span-13 {width:498px;}
input.span-14, textarea.span-14 {width:538px;}
input.span-15, textarea.span-15 {width:578px;}
input.span-16, textarea.span-16 {width:618px;}
input.span-17, textarea.span-17 {width:658px;}
input.span-18, textarea.span-18 {width:698px;}
input.span-19, textarea.span-19 {width:738px;}
input.span-20, textarea.span-20 {width:778px;}
input.span-21, textarea.span-21 {width:818px;}
input.span-22, textarea.span-22 {width:858px;}
input.span-23, textarea.span-23 {width:898px;}
input.span-24, textarea.span-24 {width:938px;}
.append-1 {padding-right:40px;}
.append-2 {padding-right:80px;}
.append-3 {padding-right:120px;}
.append-4 {padding-right:160px;}
.append-5 {padding-right:200px;}
.append-6 {padding-right:240px;}
.append-7 {padding-right:280px;}
.append-8 {padding-right:320px;}
.append-9 {padding-right:360px;}
.append-10 {padding-right:400px;}
.append-11 {padding-right:440px;}
.append-12 {padding-right:480px;}
.append-13 {padding-right:520px;}
.append-14 {padding-right:560px;}
.append-15 {padding-right:600px;}
.append-16 {padding-right:640px;}
.append-17 {padding-right:680px;}
.append-18 {padding-right:720px;}
.append-19 {padding-right:760px;}
.append-20 {padding-right:800px;}
.append-21 {padding-right:840px;}
.append-22 {padding-right:880px;}
.append-23 {padding-right:920px;}
.prepend-1 {padding-left:40px;}
.prepend-2 {padding-left:80px;}
.prepend-3 {padding-left:120px;}
.prepend-4 {padding-left:160px;}
.prepend-5 {padding-left:200px;}
.prepend-6 {padding-left:240px;}
.prepend-7 {padding-left:280px;}
.prepend-8 {padding-left:320px;}
.prepend-9 {padding-left:360px;}
.prepend-10 {padding-left:400px;}
.prepend-11 {padding-left:440px;}
.prepend-12 {padding-left:480px;}
.prepend-13 {padding-left:520px;}
.prepend-14 {padding-left:560px;}
.prepend-15 {padding-left:600px;}
.prepend-16 {padding-left:640px;}
.prepend-17 {padding-left:680px;}
.prepend-18 {padding-left:720px;}
.prepend-19 {padding-left:760px;}
.prepend-20 {padding-left:800px;}
.prepend-21 {padding-left:840px;}
.prepend-22 {padding-left:880px;}
.prepend-23 {padding-left:920px;}
.border {padding-right:4px;margin-right:5px;border-right:1px solid #ddd;}
.colborder {padding-right:24px;margin-right:25px;border-right:1px solid #ddd;}
.pull-1 {margin-left:-40px;}
.pull-2 {margin-left:-80px;}
.pull-3 {margin-left:-120px;}
.pull-4 {margin-left:-160px;}
.pull-5 {margin-left:-200px;}
.pull-6 {margin-left:-240px;}
.pull-7 {margin-left:-280px;}
.pull-8 {margin-left:-320px;}
.pull-9 {margin-left:-360px;}
.pull-10 {margin-left:-400px;}
.pull-11 {margin-left:-440px;}
.pull-12 {margin-left:-480px;}
.pull-13 {margin-left:-520px;}
.pull-14 {margin-left:-560px;}
.pull-15 {margin-left:-600px;}
.pull-16 {margin-left:-640px;}
.pull-17 {margin-left:-680px;}
.pull-18 {margin-left:-720px;}
.pull-19 {margin-left:-760px;}
.pull-20 {margin-left:-800px;}
.pull-21 {margin-left:-840px;}
.pull-22 {margin-left:-880px;}
.pull-23 {margin-left:-920px;}
.pull-24 {margin-left:-960px;}
.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float:left;position:relative;}
.push-1 {margin:0 -40px 1.5em 40px;}
.push-2 {margin:0 -80px 1.5em 80px;}
.push-3 {margin:0 -120px 1.5em 120px;}
.push-4 {margin:0 -160px 1.5em 160px;}
.push-5 {margin:0 -200px 1.5em 200px;}
.push-6 {margin:0 -240px 1.5em 240px;}
.push-7 {margin:0 -280px 1.5em 280px;}
.push-8 {margin:0 -320px 1.5em 320px;}
.push-9 {margin:0 -360px 1.5em 360px;}
.push-10 {margin:0 -400px 1.5em 400px;}
.push-11 {margin:0 -440px 1.5em 440px;}
.push-12 {margin:0 -480px 1.5em 480px;}
.push-13 {margin:0 -520px 1.5em 520px;}
.push-14 {margin:0 -560px 1.5em 560px;}
.push-15 {margin:0 -600px 1.5em 600px;}
.push-16 {margin:0 -640px 1.5em 640px;}
.push-17 {margin:0 -680px 1.5em 680px;}
.push-18 {margin:0 -720px 1.5em 720px;}
.push-19 {margin:0 -760px 1.5em 760px;}
.push-20 {margin:0 -800px 1.5em 800px;}
.push-21 {margin:0 -840px 1.5em 840px;}
.push-22 {margin:0 -880px 1.5em 880px;}
.push-23 {margin:0 -920px 1.5em 920px;}
.push-24 {margin:0 -960px 1.5em 960px;}
.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float:left;position:relative;}

.ui-widget {
	font-family: var(--ff-primary);
}
.active-button ,
.logged-in-apply-test-button,
.logged-out-apply-test-button,
.test-home-already-applied-button,
.ui-widget-content .active-button,
.ui-widget-header .active-button {
	outline: none;
    border-color: var(--clr-primary-1);
    background: var(--clr-primary-1);
    color: var(--clr-light-gray-4);
	font-weight: var(--fw-bold);
	font-size: var(--fs-600);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
	padding: 18px 32px !important;
	border-width: 0px;
    border-radius: 8px;
	text-align: center;
    white-space: nowrap;
}

/* .active-button:hover ,
.logged-in-apply-test-button:hover ,
.logged-out-apply-test-button:hover ,
.test-home-already-applied-button:hover ,
.ui-widget-content .active-button:hover ,
.ui-widget-header .active-button:hover {
	-webkit-box-shadow: 0 14px 26px -12px rgb(255 85 85 / 42%), 0 4px 23px 0px rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(255 85 85 / 20%) !important;
    box-shadow: 0 14px 26px -12px rgb(255 85 85 / 42%), 0 4px 23px 0px rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(255 85 85 / 20%) !important;
    opacity: 0.9;
} */

.active-button:hover ,
.logged-in-apply-test-button:hover ,
.logged-out-apply-test-button:hover ,
.test-home-already-applied-button:hover ,
.ui-widget-content .active-button:hover ,
.ui-widget-header .active-button:hover {
	-webkit-box-shadow: 0 14px 26px -12px rgb(19 111 99 / 42%), 0 4px 23px 0px rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(19 111 99 / 20%) !important;
    box-shadow: 0 14px 26px -12px rgb(19 111 99 / 42%), 0 4px 23px 0px rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(19 111 99 / 20%) !important;
    opacity: 0.9;
}


.inactive-button,
.ui-widget-content .inactive-button,
.ui-widget-header .inactive-button{
	border-top:2px solid #EEEEEE;
	border-right:1px solid #666666;
	border-bottom:1px solid #666666;
	border-left:1px solid #666666;
	font-size:24px;
	cursor:pointer;
	color: #E6E6E6;
	font-weight:bold;
	text-shadow: 1px 1px #292424;
	border-radius:6px;
	background-color: #808080;
	background-image: none;
	background: -moz-linear-gradient(center top , #999999 0%, #808080 100%) repeat scroll 0 0 transparent;
	background-image: -webkit-linear-gradient(top, #999999 0%, #808080 100%);
	background-image: -ms-linear-gradient(top, #999999 0%, #808080 100%);
}

.disabled-heading {
	font-size: var(--size-500);
	font-weight: var(--fw-bold);
	color: var(--clr-medium-gray-3);
}
.disabled-sub-heading {
	font-size: var(--fs-800);
	font-weight: var(--fw-semi-bold);
	color: var(--clr-medium-gray-3);
}
.progress-no {
	font-weight: var(--fw-semi-bold);
	color: var(--clr-white);
	font-size: var(--fs-700);
	display: inline-block;
    height: 1.375em;
    width: 1.375em;
	text-align: center;
	margin-right: 8px;
	border-radius: 50%;
	background-color: var(--clr-light-gray-10);
}


@media only screen and (max-width: 767px) {
	.active-button, .logged-in-apply-test-button, .logged-out-apply-test-button, .test-home-already-applied-button, .ui-widget-content .active-button, .ui-widget-header .active-button {
		padding: 12px 18px !important;
	}	
}

/* ******** Container*********** */
@media (min-width: 576px) {
	.container{
		max-width: 540px;
	}
}
@media (min-width: 768px) {
	.container {
		max-width: 720px;
	}
}
@media (min-width: 992px) {
	.container {
		max-width: 960px;
	}
}
@media (min-width: 1200px) {
	.container {
		min-width: 1225px;
	}
}
@media (min-width: 1400px) {
	.container {
		min-width: 1375px;
	}
}



/**************************************************/
/*                    Top Bar                     */
/**************************************************/
#top-bar {
	width:100%;
	color:white;
	position:relative;
	font-size:18px;
	margin: 0 !important;
	padding: 15px 0 0 0;
	z-index: 1000;
}

#top-bar-logo img {
	width: 100px;
	height: 40px;
}
#top-bar-logo .org-name-txt {
	font-size: 21px;
    position: relative;
    top: 3px;
    color: #f55;
    padding-left: 10px;
    padding-right: 10px;
    text-transform: uppercase;
    letter-spacing: 0px;
}
#top-bar-logo img {
    border-radius: 5px;
}
#top-bar-logo.no-logo:hover {
	opacity: 0.8;
	color: var(--clr-primary-1);
}

/* top-bar links */
#top-bar-links {
	color:#FFFFFF;
	list-style:none;
	font-size:15px;
	float:right;
	margin-top:12px;
	border:1px solid #AE2B01;
}
#top-bar #myNavbar {
	margin-left: auto;
}
#top-bar .nav>li>a
 {
	padding: 0.938em 1.563em;
}
#top-bar #myNavbar .logout-link a {
	color: var(--clr-gray);
	font-size: var(--fs-400);
	font-weight: var(--fw-semi-bold);
}
#top-bar #myNavbar .logout-link a:hover {
	color: var(--clr-primary-1);
}
#myNavbar .navbar-right {
	display: flex;
	align-items: center;
}
#myNavbar .navbar-right .user-name {
    text-overflow: ellipsis;
	overflow: hidden;
    white-space: nowrap;
}
#myNavbar .navbar-right .organisation-name{
	font-weight: var(--fw-regular);
	font-size: var(--fs-400);
	white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
#myNavbar .navbar-right .myaccount-link:after {
	content: "";
    display: block;
    height: 20px;
    width: 1px;
    background: var(--clr-light-gray-6);
    top: 30%;
    position: absolute;
    right: 0;
}
#myNavbar .navbar-right #user-initial-avatar {
	width: 3.125rem;
    height: 3.125rem;
    border: 4px solid var(--clr-light-blue-3);
	color: var(--clr-dark-blue);
    border-radius: 50%;
    display: flex;
    font-size: var(--fs-900);
    font-weight: var(--fw-semi-bold);
    margin: 0 0.625rem 0 1.5625rem;
    align-items: center;
    justify-content: center;
}
#myNavbar  .navbar-right .logout-link a {
	font-size: 18px;
}
#myNavbar  .navbar-right .logout-link a::after{
	content: none;
}
#myNavbar .navbar-right #logout-block {
	max-width: 120px;
} 

/* Timer Apples for Desktop View */
@media (max-width: 767px) {
	.navbar {
		margin-bottom: 0px;
	}
	.navbar .navbar-header {
		width: 100%;
	}
	#top-bar-logo img {
		border-radius: 5px;
		width: 100px;
		height: 40px;
	}
	#top-bar-logo .org-name img {
		width: 40px;
		height: 36px;
	}
	.navbar-toggle {
		margin-top: 3px;
		margin-right: 0px;
		margin-bottom: 0px;
	}
	#top-bar-logo .org-name-txt {
		font-size: 15px;
		top: 1px;
		padding-left: 7px;
		padding-right: 7px;
	}
	/*.timer {
		right: 0px;
		font-size: 22px !important;
	}*/
}
#top-bar-links li:first-child {
	border-left:none;
}

#top-bar-links li a {
	padding:7px 12px;
	display:block;
}

#top-bar-links  a{
	color:#FFFFFF;
}

#LogoutForm {
	display:none;
}

.navbar-header button{
	background-color:white !important;
}

.icon-bar{
	background-color:black !important;
}
#myNavbar .navbar-right a, 
#myNavbar .navbar-right div {
	color: var(--clr-dark-blue);
	font-size: var(--fs-600);
	font-weight: var(--fw-semi-bold);
	border-bottom: 1px solid transparent;
}
#myNavbar .navbar-right li a.active {
	font-weight: var(--fw-bold);
	color: var(--clr-primary-1);
}
#myNavbar .navbar-right a:hover, 
#myNavbar .navbar-right a:focus,
#myNavbar .navbar-right a:focus-visible,
#employer-dashboard .nav-tabs>li>a:hover,
#user-detail-page .nav-tabs>li>a:hover {
	background-color: transparent;
	color: var(--clr-primary-1);
	transition: color 0.3s ease;
}
#myNavbar .navbar-right a:hover:after {
	width: 100%;
}

#user-detail-page .tab-content {
	display: inline-block;
	padding: 50px 10px; 
	background: white;
	width: 100%;
	min-height: 300px;
}
/* #myNavbar .navbar-right a:after {
	content: '';
    display: block;
    width: 0;
    min-width: 0;
    height: 1.6px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--clr-primary-1);
    -webkit-transition: width .3s;
    transition: width .3s;
} */

@media (min-width: 768px) {
	/*#myNavbar .navbar-right {
		margin-right: -45px !important;
	}*/
	#top-bar .navbar .container-fluid {
		padding: 0;
		display: flex;
		align-items: center;
	}
}

/**************************************************/
/*     REGISTER/LOGIN/FORGOT PASSWORD DIALOGS     */
/**************************************************/
.dialog-links {
	font-size:14px; 
	cursor:pointer;
	color:#D95C1A;
}

#confirm-dialog-message-icon {
	float:left;
	margin:3px 7px 70px 0;
}

.forgotpassword-link:hover {
	text-decoration:none!important;
}

.dialogs {
	display:none;
	text-align:center;
}

.form-fields > * {
	margin:0;
	margin-top:5px;
}

.form-fields > span {
	width:100%;
}

.dialog-form textarea {
	height:120px;
}

.dialog-form button {
	padding:8px 14px !important;
	font-size:18px !important;
	color:#F25300 !important;
	margin:15px auto !important;
}

.dialog-title {
	text-align:center;
	color:#F25300;
}

.dialog-message-area {
	text-align:center;
	font-weight:bold;
	border:none;
	background-image:none;
	padding:10px;
	display:none;
}

.dialog-message-area > p {
	padding:10px;
}


/**************************************************/
/*               CENTER CONTAINER                 */
/**************************************************/
#main-container {
	position:relative;
	min-height:81.8vh;
}

#center-content {
	display:none;
}
@media only screen and (max-width: 991px) {
	#main-container {
		min-height:92vh;
	}
}


/**************************************************/
/*                     FOOTER                     */
/**************************************************/

#footer {
	background:url('../images/footer.jpg');
	width:100%;
	color: #FFFFFF;
	position:absolute;
	bottom:0px;
	font-size:11px;
}

#footer > div {
	padding:10px;
}

#footer-socialmedia-icons {
	float:left;
}

#footer-socialmedia-icons li > a > img {
	display:block;
	padding:5px;
	border:none;
}

#footer-website-info {
	float:right;
}

#footer-website-info > *{
	margin:0;
}
.footer {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	background-color: var(--clr-light-gray-2);
	font-size: var(--fs-400);
	font-weight: var(--fw-medium);
	padding: 35px 0;
	margin-top: auto;
    color: var(--clr-gray);
    justify-content: center;
}

/**************************************************/
/*                    UI STYLES                   */
/**************************************************/
.ui-state-error {
	background-image: none;
    display: inline-block;
    padding: 5px 15px;
    transition: all 0.5s;
	margin-right: 15px;
	margin-bottom: 15px;
	font-weight: 400;
	border: none;
	border-radius: 2px;
    box-shadow: 0px 0px 5px #f00;
}

.ui-state-highlight {
	background-image: none;
    display: inline-block;
    padding: 5px 15px;
    transition: all 0.5s;
    margin-right: 15px;
    margin-bottom: 15px;
    font-weight: 400;
    border: none;
    border-radius: 2px;
    box-shadow: 0px 0px 5px #beaf04;
}

.ui-dialog .ui-widget-header {
	background:none;
	border:none;
}

.ui-widget-content a,
a {
	color:#FF4100;
	border:none;
	text-decoration:none;
}

.ui-dialog .ui-dialog-buttonpane { 
	text-align: center;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { 
	float: none;
}

.ui-autocomplete-loading { 
	background: white url('static/images/loading.gif') right center no-repeat;
}

.ui-button {
	padding:11px 14px;
}

.ui-button-text{
	padding:0 !important;
}


.ui-dialog {
	z-index:999 !important;
}

.ui-tabs .ui-tabs-nav li a {
	padding:4px 6px;
	font-size:15px;
}

/**************************************************************/
/*                        BREADCRUMBS                         */
/**************************************************************/

.breadcrumb {
	padding-top:10px;
	padding-bottom:20px;
	text-align:left;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-khtml-border-radius: 4px;
}
.breadcrumb  a{
	display:inline-block;
}


/* # Error message for JQ VALIDATE  */
.error { 
	float: none; 
	vertical-align: top; 
	line-height:1.25em;
	margin-left:5px !important;
	/* background:var(--clr-primary-1) !important; */
}

.tab-button-active {
	background:#A0C1DA !important;
}

.hint{
	font-size:12px;
	font-style:italic;
	color:grey;
}

.light-text {
	color:#7F7F7F;
}

.highlight-text {
	-webkit-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
	-moz-box-shadow: 0 1px 0 #444444;
	outline:none;
}

td.seperator {
	background-color:lightgrey;
	padding:5px;
}

.flow-chart-content{
	width:100px;
	height:40px;
	background:#F25300;
	border:1px dotted white;
	color:white;
	border-radius:5px;
	text-align:center;
	padding:6px 12px;
}


/**************************************************/
/*                      Common                    */
/**************************************************/

#chart_div  > *{
	background:transparent !important;
}
.home-icon{
	opacity:.6;
	vertical-align:-4px;
	border:none;
}

.help-hint{
	font-size:12px;
	font-style:italic;
	color:grey;
}

/**************************************************/
/*                     Candidate                  */
/**************************************************/

/* #test-homepage-content {
	background: #FFFFFF url("../images/candidate_home_new2.jpg") center top no-repeat;
	background-size:200% 100% ;
	position:relative;
	height:480px;
	margin-left:auto;
	margin-right:auto;
} */
#CandidateTestForm {
	font-family: "Roboto", sans-serif;
}
#test-homepage-loading-area {
	display:none;
	color:#FFFFFF;
	margin-top:5px;
	height:80px;
	width:200px;
	margin:20px auto;
	text-align:center;
	background: rgba(0, 0, 0, 0.8);
	z-index:100px;
}

#test-homepage-loading-icon {
	padding-top:10px;
}

#test-homepage-welcome-div{
	/* height:500px;
	position:relative; */
    margin-bottom: 60px;
}

#test-homepage-apply-test-div{
	/* text-align:left;
	position:absolute;
	bottom:0px;
	width: 60%;
	height:350px; */
}

#test-homepage-apply-buttons-top{
	text-align:left;
	padding-top:20px;
	font-weight:bold;
}
#test-homepage-apply-buttons-bottom{
	padding-top:30px;
}

#test-homepage-error-message{
	color:#FFFFFF;
	font-size:16px;
	font-weight:bold;
}

#test-homepage-description-title,
#test-homepage-test-stats-title,
#test-homepage-title{
	text-align:left;
	font-size:38px;
	padding-bottom:30px;
}
.title-divider {
    margin: 15px 0;
    width: 100px;
    height: 4px;
    border-radius: 50px;
    background: #f55;
}
#test-homepage-test-stats-title{
	padding-bottom:0px;
}

#test-homepage-test-stats-container {
    display: inline-block;
}

#test-homepage-test-stats-container #chart_div {
	height:400px;
}

#test-homepage-test-ranking-table-container {
	padding-top:20px;
	float:right;
}

#test-homepage-ranking-table-container {
	text-align: center;
}

#test-homepage-test-ranking-table {
	width:400px;
	border:1px solid;
	border-radius:0px;
}

#test-homepage-test-table {
	width: 100%;
	border: 1px solid #ddd;
	border-radius: 6px;
}

#test-homepage-test-ranking-table th:first-child , #test-homepage-test-table th:first-child ,
#test-homepage-test-ranking-table td:first-child , #test-homepage-test-table td:first-child {
	border-right:1px solid #ddd;
}

#test-homepage-test-ranking-table td , #test-homepage-test-table td {
	font-size:12px;
	border-top:1px solid #ddd;
}

#test-homepage-description-container {
	background-image: linear-gradient(0deg,rgb(245,246,250),rgb(255,255,255));
	text-align:left;
}

#test-homepage-description-content {
	text-align:left;
}

#test-homepage-test-ranking-table caption, #test-homepage-test-table caption,
#test-homepage-test-ranking-table th , #test-homepage-test-table th {
	/* font-size:12px;
	font-weight:bold; */
	background:none;
}

#success-pg-message-area {
	padding: 5em 4.5em;
    background: var(--clr-white);
    border-radius: 20px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
#success-pg-container {
	display: flex;
    justify-content: center;
    align-items: center;
    background: var(--clr-light-peach);
    height: calc(100vh - 80px);
}
#all-passed-back-to-home{
	position:relative;
	width:60px;
	margin:auto;
	height:30px;
}
#all-passed-back-to-home a:hover{
	background: none;
	border-radius:0px;
	color:#FF4100;
	padding:0px;
}

#all-passed-back-to-home-icon{
	position:absolute;
	top:4px;
	left:0px;
}

#all-passed-back-to-home-text{
	position:absolute;
	color: #FF4100;
	top:0px;
	right:0px; 
}

.test-home-already-applied-button {
	padding: 15px 42px !important;
}

.logged-in-apply-test-button ,
.logged-out-apply-test-button {
	padding: 15px 50px;
}

#test-homepage-details-link{
    font-weight: normal;
    font-size: 12px;
    text-align: right;
    display: inline-block;
}
#test-homepage-details-link a {
    padding: 15px;
}
#test-homepage-message-area{
	width:80%;
	padding:10px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	font-weight:bold;
}

#test-homepage-apply-test-error-message{
	color: #FFFF66;
}

#test-homepage-apply-test-success-message{
	color:#C2FFA3
}

.test-homepage-content-separation{
	padding-top:50px;
	padding-bottom:50px;
}

#language option:selected{
	font-weight:bold;
}
#language option.available_lang{
	font-weight:bold !important;
}




/**************************************************/
/*               Employer Home page               */
/**************************************************/

#homepage-content {
	font-family: "Nexa Bold",sans-serif;
    position: relative;
    margin: auto;
    padding-top: 50px;
    padding-bottom: 50px;
    color: #444F60;
    text-align: center;
    overflow: hidden;
    /* background-image: url(../images/circles-and-shapes-w.png); */
    background-size: initial;
    background-repeat: repeat;
    /* background-color: #f55; */
    background-position: bottom;
}

#homepage-content > h2 {
	margin-top: 40px;
	font-size: 42px;
	font-weight: normal;
}

#homepage-content > h3 {
	font-size: 21px;
    margin-bottom: 0px;
    position: relative;
    display: inline-block;
    line-height: 1.5;
    color: #f55;
}

#send-email-form  fieldset{
	margin-bottom:0px;
}

#homepage-loading-icon {
	padding-top:10px;
}

#homepage-loading-area {
	color:#000000;
	display:none;
}

#homepage-message-area{
	clear:both;
	display:none;
	text-align:center;
	width: 100%;
	min-height:20px;
	margin:auto;
	font-size:15px;
	font-weight:bold;
	text-shadow: 0px 0px 1px #FFFFFF;
}

@media only screen and (max-width: 767px) {
	#homepage-content {
		padding-top: 0px;
	}
	#homepage-content > h2 {
		font-size: 35px;
	}
}

/* Signup Area */

#homepage-signup-box {
	position:relative;
	margin:auto;
	border-radius: 6px;
    padding: 30px;
	font-size:16px;
	background:#FFFFFF;
	display:inline-block;
	-webkit-box-shadow: 0px 5px 25px 0px rgb(0 0 0 / 20%);
    box-shadow: 0px 5px 25px 0px rgb(0 0 0 / 20%);
}

/*#employer-signup-form input ,
#employer-signup-form label {
	text-align:left;
	padding:16px;
	min-width:160px;
}*/

#employer-signup-form input.ui-state-error {
	background-image:none;
}

#employer-signup-form > span{
	margin-right:10px;
}

#company-signup-button {
	padding:11px;
}

@media only screen and (max-width: 991px) {
	#homepage-signup-box {
		padding: 30px;
		width: 85%;
		font-size: 15px;
	}
	/*#employer-signup-form > span {
		margin-right: 0;
		margin-bottom: 15px;
	}*/
}

/* Flowchart */
section#how-it-works, div#test-homepage-flowchart {
	background-image: url(../images/circles-and-shapes-w.png);
	background-size: initial;
	background-repeat: repeat;
	background-color: #f55;
	background-position: center;
}

#homepage-flowchart{
	padding:40px 0px;
	margin:auto;
	margin-bottom: 35px;
}
.flowchart-process.table-responsive {
	border: none;
}

#homepage-flowchart table, #test-homepage-flowchart table{
	margin:25px auto;
}

#homepage-flowchart table td > p, #test-homepage-flowchart table td > p {
	margin:6px;
	width:0;
	height:0;
	border-top:10px solid transparent;
	border-bottom:10px solid transparent;
	border-left:10px solid rgb(255, 255, 255);
}

#homepage-flowchart h1, #test-homepage-flowchart-title h1 {
	font-family: "Nexa Bold",sans-serif;
	text-align:center;
	background:none;
	color:#fff;
	display: block;
	font-weight: bold;
	font-size: 34px;
	text-shadow: 0px 1px 3px #6d5757;
}

#homepage-flowchart h3.centext {
	font-weight: 300;
    color: white;
	text-shadow: 0 2px 4px #977272;
	padding: 0 15px;
}

#homepage-flowchart table tr, #test-homepage-flowchart table tr {
	display: flex;
	align-items: center;
    justify-content: center;
	flex-wrap: wrap;
	margin: 0 10px;
}

.homepage-flowchart-content,
.test-homepage-flowchart-content{
	display: flex;
    align-self: stretch;
    background: white;
    color: #F55;
    align-items: center;
    justify-content: center;
    width: 110px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    text-shadow: 0px 0px 2px #eee;
    text-align: center;
    padding: 15px;
    margin: 10px 0;
    border-radius: 5px;
    -webkit-box-shadow: 0px 5px 25px 0px rgb(0 0 0 / 20%);
    box-shadow: 0px 5px 25px 0px rgb(0 0 0 / 20%);
}

@media only screen and (max-width: 991px) {
	section#how-it-works {
		background-size: cover;
	}
}
/*********************************************************/
/*                   FEATURES TABLE                      */
/*********************************************************/

#homepage-features-list{
	list-style:none;
	display: flex;
}

#homepage-features-list .seperate-feature{
	text-align: center;
    line-height: 2em;
    width: 100%;
    padding: 20px;
    margin: 30px;
    background: white;
    border-radius: 7px;
    box-shadow: 0px 5px 25px 0px rgb(0 0 0 / 20%);
    -webkit-box-shadow: 0px 5px 25px 0px rgb(0 0 0 / 20%);
}

#homepage-features-list div.demo-im {
    font-size: 55px;
    padding: 30px 0px 20px 0px;
}

#homepage-features-list h1 {
	font-weight: 400;
}

#homepage-features-list .im {
    color: #f55;
}
@media only screen and (max-width: 991px) {
	#homepage-features-list {
		flex-wrap: wrap;
	}
	#homepage-features-list .seperate-feature {
		line-height: 1.7em;
		padding: 20px 15px;
		margin: 20px;
	}
}


/***************************************************************************/
/*                          EMPLOYER DASHBOARD                             */
/***************************************************************************/
#employer-dashboard .highlight-text {
	box-shadow: none;
}
#employer-hero-section {
	position: relative;
	font-family: var(--ff-secondary);
}
#employer-hero-text {
	position: absolute;
	top: 35%;
	left: 95px;
}
#employer-hero-text {
	font-weight: var(--fw-regular);
}
#employer-hero-text .org-name {
	font-size: var(--fs-700);
	color: var(--clr-black);
}
#employer-hero-text .tagline {
	font-size: var(--fs-1000);
	color: var(--clr-dark-blue);
}
#search-test-input {
	font-family: var(--ff-primary),FontAwesome;
}
#dashboard-tests-table .card-heading {
	font-size: var(--fs-700);
    color: var(--clr-dark-gray-2);
    font-weight: var(--fw-bold);
	padding: 0;
	margin-top: 5px;
}
#dashboard-tests-table tr.main-tr {
	display: flex;
    flex-direction: column;
    background: var(--clr-white);
    border-radius: 15px;
	position: relative;
	margin: 0;
}

#dashboard-tests-table tbody {
	display: flex;
    flex-direction: row;
    width: auto;
    flex-wrap: wrap;
    column-gap: 45px;
    row-gap: 40px;
    margin-bottom: 35px;
}
#dashboard-tests-table.table-card .main-tr.inactive_test {
	background-color: var(--clr-light-gray);
	color: var(--clr-medium-gray-1);
}
#dashboard-tests-table .inactive_test .program-icon {
	background-color: var(--clr-white);
}
#dashboard-tests-table.table-card .main-tr.inactive_test .badge.test-id {
	background-color: var(--clr-light-gray-4);
	color: var(--clr-light-gray-8);
}
#dashboard-tests-table .main-tr.inactive_test .card-heading,
#dashboard-tests-table .main-tr.inactive_test .card-language .label-default,
#dashboard-tests-table .main-tr.inactive_test .test-info {
	color: var(--clr-medium-gray-1);
}

@media only screen and (max-width: 767px) {
	.org-name::before {
		width: 25px;
		margin-right: 6px;
	}

	.tagline-base {
		font-size: 12px;
	}

	.col-xs-12.create-test {
		top: 0;
	}
}

select#test-language_id,
select#test-expertise_level {
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: transparent !important;
}

select#test-language_id::-ms-expand,
select#test-expertise_level::-ms-expand {
	display: none;
}
/* 
input#webcam,
input#tab-switch-restriction {
	width: 15px;
	height: 15px
} */

.parent-container2 .container-fluid {
	padding: 0;
}

.test-container {
	flex-grow: 1;
	background-color: var(--clr-light-gray-2);
	overflow: hidden;
}

#search-create-test-row {
	display: flex;
	padding-top: 40px;
	padding-bottom: 20px;
}

.create-test {
	margin-left: auto;
}


.create-test-button {
	padding: 0.8125em 1.5625em !important;
}
#active-test-default-container .create-test-button,
#create-test-container .create-test-button {
	margin-top: 44px;
}
.test-container .test-info,
.test-container .test-basic-info,
.test-container .card-language {
	padding: 0 20px;
}

.test-container .input-container {
	width: 415px;
	position: relative;
}
.test-container .input-container .search-icon {
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
}
.test-container .fa-search {
	font-size: var(--fs-500);
	font-weight: var(--fw-regular);
	color: var(--clr-medium-gray-2);
}
.test-container .input-container input {
	padding-top: 11px;
	padding-left: 40px;
	padding-bottom: 11px;
	border-radius: 8px;
	border: none !important;
	background-color: var(--clr-white);
}

.test-container .input-container input::placeholder {
	font-size: var(--fs-400);
	font-weight: var(--fw-medium);
	color: var(--clr-medium-gray-2);
}


.test-container .main-tr .test-report {
	padding: 0px;
}

.test-report-link {
	display: block;
	border-radius: 0 0 15px 15px;
	width: 100%;
	padding: 15px 0;
	background-color: var(--clr-light-blue-1);
}

.test-report-link .test-report-text {
	font-size: var(--fs-500);
	font-weight: var(--fw-bold);
	color: var(--clr-green-1);
}

.parent-container1 .row {
	display: flex;
	align-items: center;
}

.org-name::before {
	display: inline-block;
	content: "";
	border-top: 3px solid var(--clr-primary-1);
	width: 28px;
	transform: translateY(-5px);
	margin-right: 10px;
}

.tagline-base {
	font-weight: 400;
	color: #3D3D3D;
	margin-top: 5px;
}

#dashboard-summary-table td {
	padding: 30px 60px;
	text-align: center;
	position: relative;
}
/*#dashboard-summary-table td:nth-child(2) {
	padding-left: 45px;
	padding-right: 45px;
}
/*#dashboard-summary-table td:nth-child(1) {
	padding-right: 45px;
}
#dashboard-summary-table td:nth-child(3) {
	padding-left: 45px;
}*/
#dashboard-summary-table td:nth-child(-n+2):after {
	content: "";
	width: 1px;
	height: 66px;
	background: var(--clr-light-blue-3);
	position: absolute;
	right: 0px;
	top: 50%;
	transform: translateY(-50%);
}

.table-card .test-dropdown-action {
	cursor: pointer;
	min-width: 120px;
	border: none;
	border-radius: 10px;
	padding: 5px 0px;
	transform: translateX(-80%);
}

.share-test-link,
.archive-test {
	display: block;
	padding: 7px 30px;
	cursor: pointer;
	font-size: var(--fs-500);
	font-weight: var(--fw-semi-bold);
	color: var(--clr-medium-gray-2);
	letter-spacing: 0.5px;
}

.share-test-link:hover,
.archive-test:hover {
	color: var(--clr-primary-1);
	background-color: #E7E7E73D;
}

#dashboard-tests-table .inactive_test {
	visibility: hidden;
}

#active-test-link,
#completed-test-link,
#user-detail-page .nav-tabs li a {
	font-weight: var(--fw-bold);
	font-size: var(--fs-600);
	line-height: 2;
	color: var(--clr-dark-gray-2);
	margin-right: 0px;
	padding: 0;
	border: none;
	border-bottom: 0 solid transparent;
	transition: border-bottom 0.3s ease;
}

#employer-dashboard .nav-tabs,
#user-detail-page .nav-tabs {
	margin-top: 100px;
	border-bottom: none;
}

#employer-dashboard .nav-tabs .active a,
#user-detail-page .nav-tabs .active a {
	color: var(--clr-primary-1);
	font-weight: var(--fw-extra-bold);
	border-bottom: 3px solid var(--clr-primary-1);
	transition: border-bottom 0.3s ease;
}

#dashboard-tests-table {
	border-top-right-radius: 0px;
	border-top-left-radius: 0px;
}

#employer-dashboard .nav-tabs li,
#user-detail-page .nav-tabs li{
	margin-right: 40px;
	z-index: 10;
}

.ui-tooltip.emp-tooltip {
	max-width: 400px;
	width: fit-content;
	background: black;
	color: white;
	font-weight: var(--fw-medium);
	font-size: var(--fs-500);
	border: none !important;
	box-shadow: none;
	padding: 0;
	opacity: 0.9;
}

.emp-tooltip .ui-tooltip-content {
	position: relative;
	padding: 1em;
	border: none;
	box-shadow: none;
}

.emp-tooltip .arrow {
	content: '';
	position: absolute;
	border-style: solid;
	display: block;
	width: 0;
    top: 50%;
    transform: translateY(-50%);
	border-color: transparent black;
	border-width: 10px 10px 10px 0;
	opacity: 0.9;
}
.emp-tooltip .arrow.left {
	left: -6px;
}
.emp-tooltip .arrow.right {
	right: -6px;
	border-width: 10px 0px 10px 10px;
	left: unset;
}
.emp-tooltip .arrow.bottom {
	top: 95%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 10px 10px 0px 10px;
	border-color: black transparent;
}

#tab-switch-restriction-block .tool-tip {
	cursor: pointer;
	padding: 7px;
}

#test-card-layout {
	width: 260px;
	height: 150px;
}

#create-test-container,
#active-test-default-container,
#inactive-test-default-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	min-height: 500px;
	height: auto;
	padding: 0 15px;
}

#create-test-intro {
	margin-top: 44px;
}
@media (min-width: 1400px) {
	#dashboard-tests-table.table-card tbody tr.main-tr {
		width: 418px;
		height: 240px; 
	}
	.test-container .input-container {
		width: 418px;	
	}
	#create-test-container,
	#active-test-default-container,
	#inactive-test-default-container {
		min-height: 700px;
	}

}
@media (min-width:992px) and (max-width: 1400px) {
	#dashboard-tests-table.table-card tbody tr.main-tr {
		width: 368px;
		height: 225px; 
	}
	.test-container .input-container {
		width: 368px;	
	}

}
@media (min-width: 768px) and (max-width: 992px) {
	#dashboard-tests-table.table-card tbody tr.main-tr:nth-child(2n) {
		margin-right: 0;
	}
}

@media only screen and (min-width: 992px) {
	#dashboard-tests-table.table-card tbody tr.main-tr:nth-child(3n) {
		margin-right: 0;
	}
}
@media (max-width: 768px) {
	#top-bar #logout-block>div {
		padding: 0.938em 1.563em;
	}
	#center-content #top-bar .container-fluid {
		display: block;
	}
	#myNavbar .navbar-right #user-initial-avatar {
		display: none;
	}
	#center-content #employer-hero-text {
		left: 35px;
		top: 10%;
	}
	#center-content #employer-dashboard .nav-tabs {
		margin-top: 25px;
	}
	#center-content #employer-hero-text .org-name {
		font-size: var(--fs-300)
	}
	#center-content #employer-hero-text .tagline {
		font-size: var(--fs-300);
	}
	#center-content #dashboard-summary-table .dashboard-summary-value {
		font-size: var(--fs-800);
	}
	#center-content #dashboard-summary-table td {
		padding: 10px 30px;
	}
	#center-content #dashboard-summary-table .summary-heading {
		font-size: var(--fs-300);
	}
	#center-content .test-container .input-container {
		width: 200px;
	}
	#center-content #dashboard-summary-table {
		position: relative;
		left: 0;
		top: 0;
		transform: none;
	}
	#employer-dashboard #dashboard-tests-table .test-basic-info {
		margin-top: 10px;
	}
	#employer-dashboard #create-test-intro > h3{
		font-size: var(--fs-800);
	}
	#employer-dashboard #create-test-intro > p{
		font-size: var(--fs-500);
	}
	.footer #first-vertical-bar {
		display: none;
	}
	.footer div:nth-child(1) {
		flex-basis: 100%;
	}
	#employer-dashboard #create-test-container h3,
	#active-test-default-container h3,
	#inactive-test-default-container h3 {
		font-size: var(--fs-700);
	}
	.emp-tooltip .ui-tooltip-content::after {
		display: none !important;
	}
}
@media (min-width: 1200px) {
	#employer-dashboard #create-test-container,
	#active-test-default-container,
	#inactive-test-default-container  {
		padding: 0 400px;
	}
}
/********************************************************/
/*              DASHBOARD SUMMARY TABLE                 */
/********************************************************/
#employer-dashboard{
	display: flex;
	flex-direction: column;
	height:auto;
	min-height:700px;
	text-align:center;
}
#dashboard-summary-table {
    border-radius: 16px;
    background: var(--clr-white);
	font-weight: var(--fw-ultra-bold);
	border-radius: 16px;
	position: absolute;
	left: 50%;
	top: 75%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
    box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.15);
}
#dashboard-summary-table .summary-heading {
	font-size: var(--fs-800);
}
#dashboard-summary-table .dashboard-summary-value {
	font-size: var(--fs-1000);
	font-weight: var(--fw-medium);
	padding-top: 2px;
}

#dashboard-summary-table td p{
	margin: 0 5px;
}

@media (min-width: 768px) and (max-width: 991px) {
	#dashboard-summary-table {
		width: 75%;
	}
	#top-bar .container-fluid {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}

@media only screen and (max-width: 767px) {
	#dashboard-summary-table {
		font-size: 1em;
		margin: 25px auto;
		width: 100%;
		border-spacing: 12px 0;
	}
}
/******************************************************/
/*                     TESTS TABLE                    */
/******************************************************/

#dashboard-tests-table caption {
	margin:10px 0px;
	text-align:left;
}


#dashboard-tests-table caption > span{
	font-weight: 400;
    font-size: 2em;
    margin-top: 0em;
    margin-left: 10px;
    color: #f55;
}

#dashboard-tests-table thead th{
	padding:10px;
	font-size:16px;
	color:#FFFFFF;
	background:#F25300;
}

a:focus, a:hover {
    text-decoration: none;
}

.column-reports a {
	border:1px solid transparent;
	margin: 10px 0 5px 0;
}
.table-card .column-reports a:first-child {
	margin-right: 6px;
}

.column-reports a:hover {
	border:1px solid #AE2B01;
}

.big-button{
	padding: 25px 40px 25px;
}

/********************************************************/
/*                   PROMOTE TEST                       */
/********************************************************/
#promote-test.ui-tabs .ui-tabs-nav li a {
	font-size: 16px;
	padding:6px;
}

.message-box {
	width:100%;
	border: 1px solid #B6C0CD;
	border-radius: 5px;
	background-color: #F7F8FA;
	-moz-box-shadow: 0 2px 2px #e8eaeb;
	-webkit-box-shadow: 0 2px 2px #E8EAEB;
	box-shadow: 0 2px 2px #E8EAEB;
	margin: 10px auto;
	text-align:center;
	padding:10px;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
._left{
	float:left;
	margin-top: 15px;
}
._right{
	float:right;
}
.message-box > *{
	margin: 10px 0px;
}

.social-media-share-buttons{
	margin:10px;
	background:none !important;
}


#edit-test-form > div.tabs > div ,
#edit-test-form > div.tabs > div > span {
	width:100%;
	margin:5px auto;
}

#edit-test > button {
	margin:5px auto;
	display:block;
}

#send-email-tab span{
	width:100%;
	text-align:left;
}

#send-email-tab .tinymce{
	width:100%;
}

#email_message {
	width:100%;
	height:100px;
	padding: 7px;
	resize: vertical; 
}

/****************************** MYACCOUNT ******************************/
#userUpdateForm h1{
	text-align:left;
	font-size:34px;
	margin-bottom:40px;
}

#userUpdateForm input[type="text"],
#userUpdateForm input[type="password"]{
	font-size:16px;
	padding:14px;
	width:300px;
}

#userUpdateForm .myaccount-label{
	padding-top:10px;
	font-size:16px;
	font-weight:bold;
}

#userUpdateForm .myaccount-input-container{
	padding-bottom:15px;
}

#select-country {
	width:160px;
}

#jobsites-table-container, 
.jobsites-table {
	display:none;
	width:100%;
}

table.jobsites-table tr td,
table.jobsites-table tr th {
	text-align:center;
}

.jobsites-table a:hover{
	background:none;
	opacity:.5;
}

.jobsites-table img{
	background:#B6C0CD;
	border:1px dotted #000000;
}
#question-container {
	font-size:14px;
	padding:20px;
}

#center-content-loading{
	position:absolute;
	top:40%;
	left:50%;
	z-index:12000;
	text-align:center;
}

#loading-modal{
	position:absolute;
	top:0;
	width:100%;
	height:100%;
	background:#000000;
	opacity:.5;
	-moz-opacity:.5;
	-khtml-opacity:.5;
	z-index:100;
	display:none;
}

#selected-country-flag {
	vertical-align:middle;
	display:none;
}

.mce-panel {
	-moz-box-sizing:border-box !important;
	box-sizing:border-box !important;
}
.button-container{
	margin:15px auto;
	text-align:center;
	width:100%;
}

.ace_editor, .ace_editor * {
	font-family: "Monaco", "Menlo", "Ubuntu Mono", "Droid Sans Mono", "Consolas", monospace !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
}

#user-notes {
	list-style:circle;
}
#user-notes li{
	margin-left:20px;
	padding:3px 0px;
}
.test-link-box{
	display:none;
}
#test-page-topbar {
	text-align:center;
}

.loading-message {display:none;}

.centext {
	text-align: center;
	font-size: 1.30em;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
}

#pricingpage-content {
	/*background: #FFFFFF;  url("../images/Peoplex900.png") no-repeat;
	background-position: 0;
	background-size:100% 100%;
	min-height:271px;
	border-bottom: 1px solid #D9DEE1;
	overflow:hidden;
	position:relative;*/
	margin:auto;
	padding-bottom:30px;
	color:#000000;
	text-align:center;
	width: 900px;
}

#pricingpage-content h2{
	color: black;
	margin-top: 80px;
	font-size: 42px;
	font-weight: normal;
	margin-bottom: 10px;
}

#pricingpage-content h4{
	margin-top: 0px;
}

.price-box-container{
	width:900px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.plan-box{
	float: left;
	cursor: default;
}
.price-box {
	width: 250px;
	height: 200px;
	margin-left:20px;
	margin-right:10px;
	background-color: #222;
	color: white;
	font-size: 20px;
	padding-top: 40px;
}

.price-rate {
	font-size: 78px;
}

.plan-name {
	font-size: 23px;
	letter-spacing: 2px;
	font-weight: bold;
	margin-bottom: 10px;
}

.plan-credits {
	font-size: 17px;
	font-style: italic;
	margin-top: 10px;
}

.plan-box ul{
	list-style: none;
	text-align: left;
	width: 250px;
	margin-left:20px !important;
}

.plan-box ul li{
	line-height: 20px;
	padding: 20px 30px;
	background: #f7f7f7;
	border-bottom: solid 1px #e9e9e9;
	text-align: center;
	color: #222;
}

.wide-button {
	padding: 20px 55px;
	margin-left: 10px;
	margin-top: 15px;
}

.active-box {
	color: #FFD5AD;
}

.cls {
	clear: both;
}

.faq-background{
	background-color: white;
	width: 100%;
	margin-top: 30px;
	border-top: 1px solid #d9dee1;
	overflow: auto;
	padding-bottom: 50px;
}

.faq-container {
	width: 900px;
	margin: auto;
	text-align: center;
	margin-top: 20px;
}

.faq{
	float: left;
	width: 450px;
}

.faq-question {
	text-transform: uppercase;
	font-weight: bold;
	text-align: left;
	margin-bottom: 10px;
	margin-top: 20px;
}

.faq-answer {
	text-align: left;
	line-height: 21px;
}

.first-col {
	padding-right: 30px;
	width: 420px;
}	

.faq-spacer{
	margin-bottom: 20px;
}
.paypal-button {
	margin-top:20px;
}

#have-a-question {
		position: fixed;
		bottom: 0px;
		right: 20px;
		padding: 7px 10px;
		max-width: 300px;
		text-decoration: none;
		letter-spacing: 0.5px;
		height:20px;
		color: white;
		border: 1px solid orange;
		background:rgb(246, 136, 17);
		font:16px novalight,Arial, Helvetica, sans-serif;
}

a:hover #have-a-question {
				color:grey;
}

#have-a-question img {
				vertical-align:middle;
				padding-right:5px;
}

/********** Animated Waves ***********/

.has-animated-waves.waves-top .animated-waves {
	top: 0
}

.has-animated-waves.waves-bottom .animated-waves {
	/*bottom:0*/
}

.has-animated-waves .animated-waves {
	/* position: absolute;
	left: 0; */
	width: 100%
}

.has-animated-waves .animated-waves.is-reversed {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg)
}

.waves-primary .animated-waves .parallax>use:first-child {
	fill: rgba(255, 85, 85, 0.7) !important
}

.waves-primary .animated-waves .parallax>use:nth-child(2) {
	fill: rgba(255, 85, 85, 0.5) !important
}

.waves-primary .animated-waves .parallax>use:nth-child(3) {
	fill: rgba(255, 85, 85, 0.3) !important
}

.waves-primary .animated-waves .parallax>use:nth-child(4) {
	fill: #f55 !important
}

/* .waves-primary .animated-waves .parallax>use:last-child {
	fill: rgba(255, 85, 85, 0.7) !important
} */

.animated-waves .waves {
	position: relative;
	width: 100%;
	height: 15vh;
	margin-bottom: -7px;
	min-height: 100px;
	max-height: 250px
}

.animated-waves .parallax>use {
	-webkit-animation: move-forever 18s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
	animation: move-forever 18s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite
}

.animated-waves .parallax>use:nth-child(1) {
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
	-webkit-animation-duration: 7s;
	animation-duration: 7s;
}

.animated-waves .parallax>use:nth-child(2) {
	-webkit-animation-delay: -3s;
	animation-delay: -3s;
	-webkit-animation-duration: 10s;
	animation-duration: 10s
}

.animated-waves .parallax>use:nth-child(3) {
	-webkit-animation-delay: -4s;
	animation-delay: -4s;
	-webkit-animation-duration: 13s;
	animation-duration: 13s
}

.animated-waves .parallax>use:nth-child(4) {
	-webkit-animation-delay: -5s;
	animation-delay: -5s;
	-webkit-animation-duration: 20s;
	animation-duration: 20s
}

@-webkit-keyframes move-forever {
	0% {
		-webkit-transform: translate3d(-90px, 0, 0);
		transform: translate3d(-90px, 0, 0)
	}
	100% {
		-webkit-transform: translate3d(85px, 0, 0);
		transform: translate3d(85px, 0, 0)
	}
}

@keyframes move-forever {
	0% {
		-webkit-transform: translate3d(-90px, 0, 0);
		transform: translate3d(-90px, 0, 0)
	}
	100% {
		-webkit-transform: translate3d(85px, 0, 0);
		transform: translate3d(85px, 0, 0)
	}
}

@media (max-width: 768px) {
	.animated-waves .waves {
		height: 40px;
		min-height: 40px
	}
	.animated-waves .content {
		height: 30vh
	}
	.animated-waves h1 {
		font-size: 24px
	}
}

@keyframes gradientBG {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

/* **********  Table UI  *********** */
.table-responsive table.table {
    color: #333;
	background: #fff;
    min-width: 300px;
    max-width: 100%;
	margin: auto;
	margin-bottom: 11px !important;
    border-collapse: collapse;
    border-radius: 5px;
    overflow: hidden;
    -webkit-box-shadow: -1px 3px 10px 0 rgb(0 0 0 / 6%);
    box-shadow: -1px 3px 10px 0 rgb(0 0 0 / 6%);
}

.table tr th {
	padding: 10px !important;
	background-color: #f55 !important;
	border-bottom: 1px solid #ddd !important;
	font-weight: 400;
}

.table tr {
	transition: all .3s;
}
.table-card tr {
	transition: all .3s;
}

.table tr:hover {
	background-color: #f2f2f2;
}

.table tr th:first-child {
	border-radius: 5px 0 0 0;
}

.table tr th:last-child {
	border-radius: 0 5px 0 0;
}


.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
	padding-top: 10px;
	padding-bottom: 10px;
}

.table-card .badge,
.table-card .label-default {
	font-family: var(--ff-secondary),sans-serif;
}
.table-card .card-detail img.inactive-webcam {
	filter: hue-rotate(135deg);
	/* filter: grayscale(1); */
}
table.table-card .inactive_test .card-language .label-default {
    background-color: var(--clr-white);
}

table.table-card .inactive_test .card-detail {
	filter: grayscale(.1);
}
table.table-card td.card-detail > div {
	margin-top: 3px;
}
table.table-card tr.main-tr:hover {
	box-shadow: 6px 8px 18px 0px #0000001C;																																																																																																																																																																																								
}
table.table-card thead tr {
	display: none;
}
table.table-card tbody {
	display: flex;
    flex-direction: row;
    width: auto;
    flex-wrap: wrap;
}
table.table-card tbody tr.main-tr {
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 23.5%;
    background: #3C6CBE;
    margin: 0 2% 2% 0;
    border-radius: 10px;
}

table.table-card tbody td {
	border-top: none;
}

table.table-card .badge.test-id {
    font-size: 10px;
    background-color: var(--clr-light-blue-3);	
    color: var(--clr-dark-gray-2);
    border-radius: 5px;
    padding: 5px;
}

table.table-card .card-more .badge {
    border-radius: 15px;
    position: relative;
    top: 8px;
    border: 0px solid;
    background: #f55;
    font-weight: 400;
    padding: 7px 15px 6px;
    vertical-align: bottom;
    font-size: 11px;
    letter-spacing: .03em;
} 
table.table-card td.card-language {
	opacity: 0;
	transition: opacity 0.3s ease;
	display: flex;
    flex-wrap: wrap;
	row-gap: 5px;
	text-align: left;
    margin-bottom: auto;
}
table.table-card .card-language .label-default {
	display: inline-block;
	margin-right: 5px;
    border-radius: 8px;
    background-color: var(--clr-light-cyan);
    font-weight: var(--fw-bold);
	font-size: var(--fs-300);
    padding: 4px 8px;
    color: var(--clr-dark-gray-2);
}
table.table-card .card-language .label-default:last-child {
	margin-right: 0;
}
table.table-card .first-td-card {
	text-align: left;
}
table.table-card .im-icon-Webcam {
	position: relative;
    font-weight: 600;
    top: 1px;
    font-size: 16px;
}
table.table-card .first-td-card .card-more {
	float: right;
}
table.table-card .first-td-card .card-more a.dropdown-toggle {
	cursor: pointer;
    font-size: 10px;
    clear: both;
    padding: 7px;
    color: #fff;
    position: relative;
    right: 0px;
    top: 5px;
}

table.table-card .first-td-card .dropdown a.dropdown-item {
    color: #666;
    padding: 5px 10px;
    display: block;
    font-weight: 400;
    font-size: 14px;
	letter-spacing: initial;
}

table.table-card .card-heading {
    font-size: 25px;
    color: #fff;
    text-align: left;
    font-weight: 400;
    padding: 0 13px 5px 13px;
}
table.table-card .card-report a:hover {
    border: 1px solid transparent;
}

table.table-card .card-report .report-block {
	padding: 8px 21px;
    border: 0px solid #fff;
    border-radius: 20px;
    background-color: #EAF5FF;
}

table.table-card .column-reports.card-report {
	text-align: center;
}

table.table-card .card-report .report-name {
    font-size: 12px;
    vertical-align: text-bottom;
    padding-left: 0px;
    color: #000;
    font-weight: 500;
}

table.table-card .card-detail {
	color: #717171;
    background-color: #fff;
    text-align: left;
	padding: 10px 15px 20px 13px;
    margin: 0;
    border-radius: 0 0 10px 10px;
    border: 1px solid #E7F3FF;
}
#dashboard-tests-table .test-basic-info {
	display: flex;
    align-items: center;
	gap: 15px;
	padding-bottom: 15px;
	margin-top: auto;
}
#dashboard-tests-table .test-id-heading {
	width: 100%;
}
#dashboard-tests-table .test-id-heading,
#dashboard-tests-table .test-info {
	text-align: left;
}
#dashboard-tests-table .test-disable-label {
	margin-left: auto;
	background-color: var(--clr-light-gray-8);
	font-size: var(--fs-300);
	font-weight: var(--fw-bold);
	border-radius: 5px;
}
#dashboard-tests-table .label-block {
	display: flex;
	justify-content: space-between;
}
#dashboard-tests-table .dropdown.card-more {
	cursor: pointer;
	align-self: flex-start;
	margin-left: auto;
	margin-top: 10px;
	display: none;
}
#dashboard-tests-table .dropdown.card-more .dropdown-toggle {
	color: var(--clr-dark-gray-2);
}
#dashboard-tests-table .program-icon {
	min-width: 70px;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--clr-light-gray-4);
	border-radius: 9px;
}
#dashboard-tests-table .program-icon img{
	width: 47px;
	height: 47px;
}
#dashboard-tests-table .test-info {
	font-size: var(--fs-400);
	font-weight: var(--fw-medium);
	color: var(--clr-dark-gray-1);
	padding-bottom: 15px;
}


@media (min-width: 768px) and (max-width: 991px) {
	table.table-card tbody tr.main-tr {
		width: 322px;
		height: 200px;
		margin: 0 2% 2% 0;
	}
	table.table-card .card-report .report-block {
		padding: 7px 20px;
	}
}

@media only screen and (max-width: 767px) {
	table.table-card tbody {
		flex-direction: column;
	}
	table.table-card tbody tr.main-tr {
		min-width: 285px;
		margin: 10px auto !important;
		max-width: 300px;
	}
	table.table-card .first-td-card .dropdown-menu.show {
		min-width: 100px;
		left: auto !important;
		right: 0;
	}
	#dashboard-tests-table caption > span {
		font-size: 1.3em;
		margin-top: 0px;
		padding: 14px;
	}
}

/* Webcam slider CSS start */
.modalimg {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
@media (min-width: 1400px) {
	.modalimg {
		padding-top: 5%; /* Location of the box */
	}
}
.mymodalimg {
    z-index: 1; /* Sit on top */ 
    left: 0;
    top: 0;
    margin-left: 10%;
    margin-bottom: 10%;
    max-width: 80%; /* Full width */
    height: 80%; /* Full height */
    /*overflow: auto;
   */ background-color: #181818; /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-contentimage {
    margin: auto;
    display: block;
    width: 50%;
   
}
.pause{
	position: absolute;
    right: 52%;
    bottom: 10px;
	border: none !important;
}
.play{
	position: absolute;
    right: 42%;
    bottom: 10px;
}

.play:hover,
.play.active,
.pause:hover,
.pause.active {
	opacity: 0.7;
}
/* The Close Button */
.modalimg .close {
    position: absolute;
    top: 35px !important;
    right: 35px;
    color: var(--clr-primary-1);
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    vertical-align: middle;
	opacity: 0.8;
	text-shadow: none;
}
#prev{
	position: absolute;
    margin-top: 25%;
    left:35px;
    background: transparent;
    color: var(--clr-primary-1);
    font-size: 20px;
    font-weight: bold;
    transition: 0.3s;
    border-width:0px;
    vertical-align: middle;
}
#next{
	position: absolute;
     margin-top: 25%;
    right:35px;
    font-size: 20px;
    font-weight: bold;
    transition: 0.3s;
    border-width:0px;
	background: transparent;
    color: var(--clr-primary-1);
}
.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

#myModal{
	display: none;
}
/* Webcam slider CSS End */

label.validate-error {
	display: block;
	color: red;
	font-size: 12px;
	text-align: left;
	max-width: fit-content;
	font-weight: normal;
}
label.field-label {
    text-align: left;
    display: block;
    font-weight: 500;
    margin-bottom: 2px;
}
span.red {
    color: red;
}
#candidate-signup-form span.multi-field,
#homepage-signup-box span.multi-field {
	min-height: 80px;
}

/***************** Employer Signup *****************/

#onboard-wizard.main {
    background: var(--clr-light-peach);
    min-height: 100vh;
	background-image: url(../images/circles-and-shapes-w.png);
    background-size: initial;
    background-repeat: repeat;
    background-position: center;
	background-blend-mode: overlay;
  }

  #onboard-wizard .alert.error {
    background: #ffdddd !important;
    color: #D8000c;
    border-color: #D8000C;
  }
  #onboard-wizard .highlight-text {
	outline: 2px solid var(--clr-primary-1);
  } 
  #onboard-wizard input.auth-code-input-item-field.highlight-text {
	border: none !important;
  }
  .auth-tooltip {
    line-height: 1.6;
    left: calc(100% + 10px) !important;
    width: 260px;
    background: #333;
    color: white;
    font-weight: bold;
    padding: 14px 8px;
    font-size: 13px;
    border-radius: 4px;
    display: none;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  }
  .preview-tooltip {
	line-height: 1.6;
	top: 46% !important;
    left: calc(70% + 10px) !important;
    width: 205px;
    background: #333;
    color: white;
    font-weight: bold;
    padding: 5px 5px;
    font-size: 13px;
    border-radius: 4px;
    display: none;
  }
  .auth-tooltip[data-show],
  .preview-tooltip[data-show] {
    display: block;
  }

  #onboard-wizard .arrow,
  #onboard-wizard .arrow::before {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
  }

  #onboard-wizard .arrow {
    visibility: hidden;
    top: 10px !important;
  }

  #onboard-wizard .arrow::before {
    visibility: visible;
    content: '';
    transform: rotate(45deg);
  }

  .auth-tooltip[data-popper-placement^='top'] > .arrow,
  .preview-tooltip[data-popper-placement^='top'] > .arrow {
    bottom: -4px;
  }

  .auth-tooltip[data-popper-placement^='bottom'] > .arrow,
  .preview-tooltip[data-popper-placement^='bottom'] > .arrow{
    top: -4px;
  }

  .auth-tooltip[data-popper-placement^='left'] > .arrow,
  .preview-tooltip[data-popper-placement^='left'] > .arrow {
    right: -4px;
  }

  .auth-tooltip[data-popper-placement^='right'] > .arrow{
    left: -4px;
  }
  .preview-tooltip[data-popper-placement^='right'] > .arrow,
  .login-container .auth-tooltip[data-popper-placement^='right'] > .arrow{
	left: -7px;
  }

  #onboard-wizard .form-group label.error {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    background: #ffdddd !important;
    color: #D8000c;
    border-color: #D8000C !important;
    border-radius: 3px;
  }

  #onboard-wizard .form-group input.error {
    border-color: #D8000C !important;
	background: white;
    color: black;
    text-align: left;
  }

  #test-homepage-content #loading-icon,
  #onboard-wizard.main #loading-icon,
  #report-table-block #loading-icon,
  #mobile-verify-modal #loading-icon,
  .emp-dashboard-loading-icon,
  #user-detail-page #loading-icon {
    position: fixed;
    background: rgba(255, 255, 255, 0.5);
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 1000;
  }

  #onboard-wizard input[disabled="disabled"] {
    background-color: #eee !important;
  }

  #test-homepage-content .fa-spinner,
  .main .fa-spinner,
  #report-table-block .fa-spinner,
  #mobile-verify-modal .fa-spinner,
  .emp-dashboard-loading-icon .fa-spinner,
  #user-detail-page .fa-spinner {
    font-size: 40px;
    position: absolute;
    left: 48%;
    top: 50%;
    z-index: 10;
    background: #fff;
    padding: 6px;
    border-radius: 50%;
    box-shadow: 0 0px 6px 1px #eee;
  }

  .grey-txt {
    color: #f0f0f0;
  }

  #onboard-wizard .form-group .error {
    margin-bottom: 0;
    opacity: 1;
  }

  #onboard-wizard .hirenix-logo img {
    border-radius: 5px;
  }

  .email-auth-container .form-group label.error {
    font-weight: 500;
  }

  .email-auth-container,
  .mob-auth-container,
  .login-container,
  .forgot-pass-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }

  #email-auth-block,
  #login-block,
  #forgot-pass-block {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
	max-width: 500px;
    background-color: white;
    border-radius: 16px;
    box-shadow: 0px 5px 25px 0px rgb(0 0 0 / 15%);
	padding: 60px;
	margin: 25px 0 25px 0;
  }

  #email-auth-section,
  #email-login-section,
  #forgot-pass-section {
    display: flex;
    align-items: center;
    flex-direction: column;
    color: #444F60;
  }

  #email-auth-section .hirenix-logo,
  .login-container .hirenix-logo,
  .forgot-pass-container .hirenix-logo {
    margin-bottom: 40px;
  }

  #email-auth-form #email-auth-intro,
  #email-otp-form #verify-otp-intro,
  .login-container #login-otp-intro {
    margin: 20px 0 40px 0;
  }

  #email-auth-form #email-btn-block {
    margin-bottom: 0;
  }

  #email-auth-form #email-auth-intro,
  #email-otp-form #verify-otp-intro,
  .forgot-pass-container #forgot-pass-intro {
    font-size: 15px;
    text-align: center;
    line-height: 1.6;
  }

  #email-auth-form #email-auth-intro,
  #forgot-pass-form #forgot-pass-intro {
    font-weight: 400;
  }

  #email-otp-form #verify-otp-intro,
  #email-login-section #login-otp-intro,
  #forgot-pass-section #forgot-pass-intro-block>div {
    margin-bottom: 25px;
  }

  #signup-step3-form #signup-form-message-area {
    font-weight: 400;
    margin-top: 10px;
  }

  #email-auth-section #email-auth-message-area,
  #final-signup-form #mob-auth-message-area {
    font-weight: 400;
    line-height: 1.6;
    font-size: 13px;
  }

  #onboard-wizard button.secondary {
    width: 100%;
    padding: 12px 10px !important;
    background: #eee;
    border: 1px solid #d8dcdf;
    color: #4a4a4a;
    font-weight: 500;
  }

  #onboard-wizard button.primary {
    padding: 16px 10px !important;
    width: 100%;
  }

  #onboard-wizard button.secondary:hover,
  #onboard-wizard button.primary:hover {
    opacity: 0.93;
  }

  #hr-line {
    color: #aaa;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    position: relative;
  }

  #hr-line::before {
    content: "";
    background: #ccc;
    height: 1px;
    position: absolute;
    bottom: 50%;
    right: 60%;
    width: 25%;
  }

  #hr-line::after {
    content: "";
    background: #ccc;
    height: 1px;
    position: absolute;
    bottom: 50%;
    left: 60%;
    width: 25%;
  }

  form#email-auth-form>div,
  form#email-otp-form>div,
  form#email-pass-login-form>div,
  form#email-otp-login-form>div,
  form#forgot-pass-form>div {
    margin: 0 0 20px 0;
  }

  #email-submit-btn,
  #email-otp-form .otp-verify-btn,
  #email-pass-submit-btn,
  #email-otp-login-btn,
  #forgot-pass-submit-btn {
    margin-top: 15px;
  }

  #onboard-wizard .form-fields input {
    height: 50px;
  }

  .auth-form .auth-code-container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto 0 auto;
  }

  #onboard-wizard .auth-code-container input:nth-child(3),
  #mobile-verify-modal .auth-code-container input:nth-child(3){
    margin-right: 20px;
  }

  #onboard-wizard input.auth-code-input-item-field,
  .test-homepage-block input.auth-code-input-item-field {
    border: 1px solid #ccc !important;
    border-radius: 6px;
    width: 13%;
    height: 70px;
    margin: 2px;
    text-align: center;
    font-size: 35px;
  }

  #mobile-verify-modal input.auth-code-input-item-field {
	border: 1px solid #ccc !important;
    border-radius: 6px;
    width: 11%;
    height: 60px;
    margin: 2px;
    text-align: center;
    font-size: 35px;
  }

  #mobile-verify-modal input[disabled] {
	background: var(--clr-light-gray-1) !important;
  }
  .mobile-verify-modal input {
	border-radius: 5px;
	border: 1px solid var(--clr-medium-gray-2) !important;
	height: 50px;
  }
  
  #email-otp-form .form-fields {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 0;
  }

  #email-auth-section .resend-otp-block {
    margin-top: 15px;
  }

  .signup-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .signup-container .hirenix-logo {
    margin-top: 35px;
  }	

  .signup-container .hirenix-logo .dashboard-link {
    padding: 20px 0 20px 0;
  }

  #signup-form-block {
    display: flex;
    align-items: stretch;
    margin-top: 40px;
    background-color: white;
    box-shadow: 0px 5px 25px 0px rgb(0 0 0 / 15%);
    border-radius: 10px;
  }

  .signup-container #signup-org-details {
    color: var(--clr-medium-gray-2);
    width: 100%;
	padding: 50px 58px;
    background: var(--clr-light-peach);
    border-radius: 10px;
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
	background-image: url(../images/circles-and-shapes-w.png);
    background-size: initial;
    background-repeat: repeat;
    background-position: top;
    background-blend-mode: overlay;
  }

  .lg-font {
    font-size: 30px;
    font-weight: 700;
  }

  .md-font {
    font-size: 15px;
    font-weight: 500;
  }

  #signup-org-details .form-fields {
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
  }

  #signup-org-details .form-group {
    margin-bottom: 15px;
  }

  #signup-org-details #signup-next-btn {
    width: 100px;
    background-color: var(--clr-primary-1);
    color: var(--clr-white);
  }

  #mob-no-block #mob-otp-send-btn {
    padding: 15px 10px !important;
    width: 100px;
  }

  #mob-no-block #mob-otp-send-btn,
  #mob-auth-section #signup-back-btn {
    background: white;
    color: var(--clr-primary-1);
    border-width: 2px;
    border-color: var(--clr-primary-1);
  }

  #signup-org-details #signup-nxt-btn-block {
    text-align: right;
  }
  #signup-org-details .toggle-password,
  .login-container .toggle-password {
    position: absolute;
    top: 18px;
    right: 20px;
    color: #7F7F7F;
    cursor: pointer;
  }

  #signup-block #live-preview {
    width: 0;
    overflow-x: hidden;
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
    position: relative;
    border-radius: 0 10px 10px 0;
  }

  #signup-org-details #signup-step3-form {
    width: fit-content;
    margin: 0 auto;
  }

  #onboard-wizard .org-details-form .form-fields input:focus {
	border: none !important;
	outline: 1px solid var(--clr-primary-1);
  }

  .signup-container .signup-animate #signup-org-details {
    width: 40%;
    position: relative;
    border-radius: 10px 0 0 10px;
  }

  #signup-block.signup-animate #live-preview {
    width: 60%;
    overflow: hidden;
  }

  #signup-block #live-preview-block {
    margin: 30px;
    padding: 15px;
    background: white;
    border-radius: 10px;
    text-align: center;
    line-height: 1.6;
  }

  #signup-block #org-dashboard-preview-block {
    margin: 30px;
  }

  #signup-block #emp-name-preview {
    margin-top: 30px;
  }

  #signup-block #org-logo-preview {
    width: 100px;
    height: 40px;
    border-radius: 5px;
  }

  #signup-block #org-logo-block {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  #live-preview .preview-sm-font {
    font-size: 15px;
  }

  #live-preview .preview-md-font {
    font-size: 20px;
    font-weight: 500;
  }

  #live-preview .preview-lg-font {
    font-size: 25px;
    font-weight: 700;
  }

  #live-preview #org-name-preview:before {
    display: inline-block;
    content: "";
    border-top: 2px solid var(--clr-primary-1);
    width: 100px;
    transform: translateY(-3px);
    margin-right: 10px;
  }

  #live-preview #org-name-preview:after {
    display: inline-block;
    content: "";
    border-top: 2px solid var(--clr-primary-1);
    width: 100px;
    transform: translateY(-3px);
    margin-left: 10px;
  }

  #live-preview div#hirenix-intro-block,
  #live-preview div#emp-welcome-block {
    margin-top: 30px;
  }

  #live-preview div#emp-welcome-block {
    text-align: center;
  }

  #live-preview div#hirenix-intro-block>div,
  #live-preview div#emp-welcome-block>div {
    margin-top: 10px;
  }

  #live-preview .btn {
    padding: 10px 15px;
    background-color: var(--clr-primary-1);
    color: white;
    font-weight: 600;
    margin-top: 20px !important;
  }

  #mob-auth-block {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
	margin: 25px 0 25px 0;
	max-width: 500px;
  }

  #mob-auth-section {
    position: relative;
    border-radius: 10px;
    background: white;
    color: #444F60;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 5px 25px 0px rgb(0 0 0 / 15%);
  }

  #mob-auth-section #final-signup-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }

  #mob-auth-section #final-signup-intro {
    text-align: center;
  }

  #mob-auth-section #mob-auth-form {
    margin: auto 0 auto 0;
  }

  #mob-auth-form #reg-mob-no.disabled {
    background: #eee;
  }

  #mob-auth-section .nav-btn-block {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  #mob-auth-section #signup-submit-btn {
    width: 100px;
  }

  #mob-auth-section #signup-back-btn {
    width: 70px;
  }

  #mob-auth-section .auth-form {
    margin: 30px 0 auto 0;
  }

  #final-signup-form #signup-submit-btn[disable="disable"] {
	opacity: 0.8;
	pointer-events: none;
}

 #resend-otp,
  #mob-auth-section #change-mob-no {
    cursor: pointer;
  }

  .login-container #email-pass-login-form,
  .login-container #email-otp-login-form,
  .forgot-pass-container #forgot-pass-form {
    text-align: center;
  }

  .login-container #email-pass-btn-block .form-group {
    margin-top: 10px;
  }
   .onboard-success-modal {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	border: none;
	max-width: 35%;
	box-shadow:  0px 0px 10px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
  }
  .onboard-success-modal::backdrop {
	background: #a6a6a6 url(images/ui-bg_dots-small_65_a6a6a6_2x2.png) 50% 50% repeat;
    opacity: .4;
  }

  @media only screen and (min-width:767px) {
	
    #signup-org-details .form-fields {
      width: 350px;
    }

	#signup-form-block {
		min-width: 1200px;
		max-width: 1200px;
	}

    #mob-auth-block #mob-auth-section {
      padding: 60px;
    }

    #mob-auth-section .resend-otp-block {
      margin-left: auto;
    }

    #mob-auth-section #final-signup-intro {
      margin-bottom: 30px;
    }

    #mob-auth-section .hirenix-logo {
      margin-bottom: 30px;
    }

    #mob-no-block .form-group:first-child {
      width: 70%;
      margin-right: 7px;
    }
	#email-pass-submit-btn {
		width: 400px !important;
	}

	.auth-tooltip {
		animation: tooltipMovement 2s infinite alternate ease-in-out;
	}

	@keyframes tooltipMovement {
		0% {
			transform: translateX(0);
		}
		50% {
			transform: translateX(5px); /* Move 5 pixels to the right */
		}
		100% {
			transform: translateX(0);
		}
	}
	
  }

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

    #email-auth-block,
	#login-block,
	#forgot-pass-block {
	  padding: 60px 20px;
	  margin: 0 20px;
    }
	.main .fa-spinner {
		left: 40%;
	}
    .auth-tooltip {
      position: relative !important;
      left: 0 !important;
      margin-top: 15px !important;
      transform: none !important;
      flex: 1;
    }
    .arrow, .arrow::before {
      bottom: 13px;
      left: 130px;
    }

    #mob-auth-section {
      padding: 50px 20px;
    }

    #mob-auth-form #mob-no-block {
      flex-direction: column;
    }

    #mob-auth-section .hirenix-logo {
      margin-bottom: 40px;
    }

    #mob-auth-form #otp-send-btn-block {
      width: 300px;
    }

    #mob-no-block {
      gap: 15px;
    }

    #mob-no-block #mob-otp-send-btn {
      width: 50%;
    }

    .signup-container .hirenix-logo {
      margin-left: 0;
    }

    .signup-container .hirenix-logo img {
      width: 165px;
      height: 45px;
    }

    #signup-block #live-preview {
      display: none;
    }

    .signup-container #signup-org-details {
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .signup-container #signup-step3-form {
      flex-grow: 1;
    }
	.mob-auth-container {
		padding: 0 10px;
	}
	.lg-font {
		font-size: 25px;
	}
  }


/***** EMPLOYER DASHBOARD DAILOG ******/
  .archive-confirm-modal,
  .notify-message-modal {
  	border-radius: 20px;
  	background: #FFF;
  	box-shadow: 0px 4px 4px 0px rgb(0 0 0 / 25%);
  	background-color: #FBF4E6;
  	padding: 0;
  }
  .notify-message-modal .ui-dialog-buttonpane {
	border-radius: 0px 0px 20px 20px;
	margin-top: 0px;
	border-width: 0;
	padding: 15px 10px;
  }
  .notify-message-modal .ui-dialog-content {
	padding: 35px 25px;
	font-weight: var(--fw-medium);
	font-size: var(--fs-800);
  }

  .archive-confirm-modal .ui-dialog-buttonpane{
  	border-radius: 0px 0px 20px 20px;
  	margin-top: 0px;
  	border-width: 0;
  	padding: 25px 10px;
  }

  .archive-confirm-modal .ui-dialog-content {
  	padding: 0;
  }

  .archive-confirm-modal .archive-img-block {
  	padding-bottom: 40px;
  }

  .archive-confirm-modal .archive-text-block {
  	background-color: white;
  	padding: 30px 15px 0px 15px;
  }

  .archive-confirm-modal .question-text {
  	color: var(--clr-dark-gray-2);
  	text-align: center;
  	font-size: var(--fs-700);
  	font-weight: var(--fw-bold);
  	margin-bottom: 5px;
  }

  .archive-confirm-modal .note-text {
  	color: #737373;
  	text-align: center;
  	font-size: var(--fs-600);
  	font-weight: var(--fw-medium);
  	line-height: 28px;
  }

  .archive-confirm-modal .ui-dialog-titlebar-close,
  .mobile-verify-modal  .ui-dialog-titlebar-close,
  .notify-message-modal .ui-dialog-titlebar-close{
  	transform: rotate(45deg);
  	background: none;
  	border: none;
  	right: 0.2em;
  	top: 50%;
  	z-index: 2;
  	font-size: 25px;
  	color: gray;
  	font-weight: 100;
  }

  .archive-confirm-modal .ui-dialog-buttonpane button,
  .notify-message-modal .ui-dialog-buttonpane button{
  	border-radius: 8px;
  	padding: 10px 35px;
  	margin: 0px 0px 0px 15px;
  	font-size: var(--fs-600);
  	font-weight: var(--fw-bold);
  	width: 120px;
  }

  .archive-confirm-modal .ui-dialog-buttonpane .yes-primary-button,
  .notify-message-modal .ui-dialog-buttonpane button{
  	background: var(--clr-primary-1);
  	color: var(--clr-white);
  }

  .archive-confirm-modal .ui-dialog-buttonpane .yes-secondary-button {
  	background: var(--clr-light-red-1);
  	color: var(--clr-white);
  }
 
  .archive-confirm-modal .ui-dialog-buttonpane .cancel-button {
  	background: var(--clr-white);
  	color: var(--clr-primary-1);
  	border: 1px solid #E2E9F3;
  }
  /***********/

  /* ****** Toggle switch ********* */
  .toggle-switch {
	position: relative;
	display: inline-block;
	width: 40px !important;
	height: 20px;
  }
  .toggle-switch input{
	opacity: 0;
	width: 0;
	height: 0;
  }
  .toggle-switch .slider.round {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--clr-light-gray-5);
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 34px;
}
.toggle-switch .slider.round::before {
	border-radius: 50%;
	position: absolute;
	content: "";
	height: 16px;
	width: 16px;
	left: 2px;
	bottom: 2px;
	background-color: var(--clr-light-gray-12);
	-webkit-transition: .4s;
	transition: .4s;
}
.toggle-switch input:checked + .slider:before {
	-webkit-transform: translateX(20px);
	-ms-transform: translateX(20px);
	transform: translateX(20px);
}
.toggle-switch input:checked + .slider {
	background-color: var(--clr-light-red-1) !important;
}
.toggle-switch input:checked + .slider.round::before {
	background-color: var(--clr-white) !important;
}

/* ********** Bootstrap datepicker *********** */
.datepicker table tr td.disabled, 
.datepicker table tr td.disabled:hover {
    background: var(--clr-light-gray-4) !important;
}

/* *********** Test acknowledge modal *********** */
.test-ins-ack-modal .ui-dialog-titlebar {
	display: none;
}
.test-ins-ack-modal .test-instructions-block ul li {
	list-style: decimal;
	margin-bottom: 5px;
	font-size: var(--fs-600);
	color: var(--clr-dark-gray-2);
	font-weight: var(--fw-medium);
}
.test-ins-ack-modal .test-instructions-block ul {
	padding-left: 17px;
}
.test-ins-ack-modal .instruction-heading {
	margin-bottom: 30px;
}
.test-ins-ack-modal .test-instructions-block ul li input {
	margin: 6px 8px 0px 0px;
}
.test-ins-ack-modal .test-instructions-block input.styled-checkbox[type="checkbox"] + *::before {
	content: "";
	display: inline-block;
	vertical-align: bottom;
	width: 22px;
	height: 22px;
	border-style: solid;
	border-width: 1px;
	line-height: 23px;
	border-color: var(--clr-light-gray-6);
	background-color: white;
	/*border: none;*/
	border-radius: 3px;
	margin-right: 10px;
	border: 1px solid #ccc;
}
.test-ins-ack-modal .test-instructions-block input.styled-checkbox[type="checkbox"]:checked + *::before {
	content: "✓";
	color: white;
	text-align: center;
	background: var(--clr-primary-1);
	border-color: var(--clr-primary-1);
	font-size: 22px;
}
.test-ins-ack-modal .test-instructions-block .checkbox-label {
	font-weight: var(--fw-semi-bold);
	font-size: var(--fs-500);
	color: var(--clr-dark-gray-2);
}
.test-ins-ack-modal .test-instructions-block .checkbox-label {
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
	position: relative;
}
.test-ins-ack-modal .agree-text{
	color: #030304;
	font-size: 16px;
	font-weight: 600;
}
.test-ins-ack-modal #acknowledge-btn.disabled-btn {
    opacity: 0.5;
}
.test-ins-ack-modal #acknowledge-btn {
	background: var(--clr-primary-1);
    color: var(--clr-white);
    border: none !important;
}
#test-instruction {
	text-align: left;
	padding: 30px 40px;
}
.test-ins-ack-modal {
	border-radius: 20px;
}
#test-instruction .instructions-heading {
	margin-bottom: 20px;
}
#test-instruction a:focus {
	outline: none;
}

#main-container .payment-link,
.ui-dialog .payment-link {
	color: var(--clr-blue-1);
	font-weight: var(--fw-semi-bold);
	font-size: var(--fs-650);
}

@keyframes ellipsis {
	0% 	 {content: ".";}
	33%  {content: "..";}
	66%  {content: "...";}
	100% {content: ".";}
}

.ellipsis::after {
	content: ".";
	display: inline-block;
	animation: ellipsis 1.5s infinite;
	width: 12px;

}


/**************************************************/
/*                Redirect message                */
/**************************************************/

.redirect-home-msg {
	padding-top: 15%;
    margin-top: 0 !important;
    padding-bottom: 10%;
    background: white;
}
.redirect-home-msg .notify-message {
    padding: 15px;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 50%;
    border-radius: 10px;
    background: var(--clr-light-peach);
    border: none;
    color: var(--clr-dark-gray-2);
    font-weight: var(--fw-medium);
    font-size: var(--fs-1000);
}

/**************************************************/
/*                Success Modal                */
/**************************************************/

.success-modal .ui-dialog-titlebar {
	display: none;
}
.success-modal .ui-dialog-buttonpane {
	border: none;
}
.success-modal .ui-dialog-buttonpane { 
	padding: 0.5em 0.5em 0.5em 0.5em;
}
.success-modal .success-level-heading {
	font-weight: 600;
	font-size: 20px;
	color: #0B0B0F;
	margin: auto 0;
}
.success-modal .success-level-text,
.success-modal .success-module-text {
	font-weight: 600;
	font-size: 15px;
	color: #656565;
}
.success-modal .success-module-text {
	padding: 0 20px;
	margin-top: 10px;
}
.success-modal {
	padding: 15px 0;
	border-radius: 20px;
}
.success-modal .ui-dialog-buttonpane button {
	color: #F8F5F0 !important;
	background: #136F63 !important;
}
.success-modal .ui-dialog-content > * {
	line-height: 33px;
}

.warning-img-block {
	display: flex;
	justify-content: center;
	margin-bottom: 30px;
}