/*////////////// ROBOTO FONT //////////////*/
/*////////////// FORM & DROPDOWN //////////////*/
/* ////////// normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css //////////*/
/*/////// FONTS ///////*/
/*//// MODERN LOADER ////*/
/*/////// BUTTONS ///////*/
/*/////// NAVIGATION ///////*/
/*/////// PAGE HEADER ///////*/
/*/////// TEREFIC RESUME 4 BOXES ///////*/
/*/////// PDF DOCUMENTS ///////*/
/*/////// REFERENCE EMAIL ??? ///////*/
/*/////// REFERENCE MANAGER CARDS ///////*/
/*//// WELCOME PAGE FOR CANDIDATES ////*/
/*//////// WELCOME PAGE FOR REFERENCES ////////*/
/*///// THANK YOU PAGE /////*/
/*////// OVERLAY //////*/
/*////// OVERLAY OPEN FOR ONLINE REPORT //////*/
/*//// MOBILE FRIENDLY ///*/
/*///// ADD NEW REFERENCE /////*/
/*/// EMAIL PREVIEW ///*/
/*/// ACCOUNT SETTING ///*/
/*///// ACCOUNT SETTINGS EDIT PROFILE /////*/
/*//// PHOTO / AVATAR ///*/
/*///// YOUR RIGHTS /////*/
/*/// EMPLOYERS //*/
/*/// EMPLOYERS TABLE //*/
/*/// COUNTRY DROPDOWN //*/
/*/// VALIDATION ERROR MESSAGES //*/
/*/// iframe background //*/
/*/// PHOTO-ID INSTRUCTIONS //*/



/*////////////// ROBOTO FONT //////////////*/

@font-face {
	font-family: Roboto, Arial;
	src: url("/resources/fonts/Roboto-Light.ttf");
	font-weight: normal;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: Roboto, Arial;
	src: url("/resources/fonts/Roboto-Regular.ttf");
	font-weight: normal;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: Roboto, Arial;
	src: url("/resources/fonts/Roboto-Medium.ttf");
	font-weight: 500;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: Roboto, Arial;
	src: url("/resources/fonts/Roboto-Bold.ttf");
	font-weight: bold;
	font-style: normal;
	font-display: swap
}



/*////////////// FORM & DROPDOWN //////////////*/

.form-container {
	position: relative;
	margin: 0px 0px 0px 0px;
	max-width: 590px;
}


form .row {
	min-height: 36px;
	clear: both;
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 11px
}

form .row-subject,
form .row-message {
	min-height: 36px;
	clear: both;
	position: relative;
	align-items: center;
	margin-bottom: 11px
}

@media (min-width:740px) {
form .row-message {
	min-height: 36px;
	clear: both;
	position: relative;
	vertical-align: top;
	margin-bottom: 11px
	}}

form label,
.disabledInputFix label {
	white-space: nowrap
}

textarea,
form input[type="text"],
form input[type="password"],
form select,
textarea,
.disabledInputFix input[type="text"]:disabled,
.disabledInputFix select:disabled,
.disabledInputFix textarea:disabled,
#changeContactInformation input[type="text"],
.unlockReferences input[type="text"] {
	font-family: Roboto;
	color: #666;
	background-color: transparent;
	position: relative;
	padding: 0 8px;
	font-size: 15px;
	line-height: 21px;
	font-weight: normal;
	z-index: 2;
	cursor: text
}

textarea:hover,
form input[type="text"]:hover,
form input[type="password"]:hover,
select:hover,
textarea:hover,
.disabledInputFix input[type="text"]:disabled,
.disabledInputFix select:disabled,
.disabledInputFix textarea:disabled,
#changeContactInformation input[type="text"]:hover,
.unlockReferences input[type="text"]:hover {
	background-color: #F8FAFE;
	-webkit-transition: background 0.2s linear;
	-o-transition: background 0.2s linear;
	transition: background 0.2s linear;
}

form .row-subject u,
form .row-message u,
form .row u {
	font-weight: normal;
	color: #F00;
	text-decoration: none;
	display: inline-block;
	margin: 5px 0 0 8px;
	font-size: 18px;
	width: 8px
}


.marginLeft10 {
	margin-left: 10px !important
}

.inputNewLookSelect, 
.select,
.country-select {
	position: relative;
	border-radius: 5px;
	padding: 3px 5px 3px 5px;
	cursor: pointer;
	height: 18px;
	line-height: 18px;
	color: #666;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	text-align: left;
	background: url("/resources/images/professional/dashboard/DownArrow.svg") no-repeat calc(100% - 7px);
	background-size: 15px 15px;
	float: left;
	width: 93%;
	background-color: white;
	font-size: 15px;
	-moz-appearance: none;
	-webkit-appearance: none;
}


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

ul {list-style: square}

ul,
ol {
	margin: 0 0 0 0;
	padding-inline-start: 20px;
}

.ui-menu,
ul.listNewLookSelect {
	position: absolute;
	z-index: 1000;
	max-height: 250px;
	padding: 8px 0px;
	transform: translateY(4px);
	box-shadow: 0 0 0 1px rgba(77,101,117,0.1), 0 3px 10px 0 rgba(77,101,117,0.2);
	display: block;
	float: left;
	list-style: none outside none;
	margin: 0;
	border-radius: 4px;
	overflow-y: scroll
}

ul.listNewLookSelect a {
	white-space: nowrap
}

:-moz-any-link:focus {
	outline: none
}


/*Necessary for keypad interaction with jquery autocomplete combobox*/
.ui-state-hover,
.ui-state-active,
.ui-state-focus,
.ui-menu .ui-menu-item a:hover,
ul.listNewLookSelect a:hover{
	background: #e9effc;
	color: #25282B;
	margin: 0px;
	text-decoration: none;
}


.ui-menu .ui-menu-item a:active,
ul.listNewLookSelect a:active{
	background: #1058aa;
	color: #FFF;
	margin: 0px;
	text-decoration: none;
}

.ui-menu .ui-menu-item a.selected,
.ui-menu .ui-menu-item a.selected:hover,
ul.listNewLookSelect a.selected,
ul.listNewLookSelect a.selected:hover {
	background: #1058aa;
	color: #FFF;
	margin: 0px;
	text-decoration: none
}


.ui-widget-content,
.tagit-autocomplete.ui-menu {
	background-color: #FFF;
	color: #25282B
}

.ui-menu-item a,
.ui-widget,
.tagit-autocomplete.ui-menu {
	font-family: Roboto;
	font-size: 15px;
	line-height: 22px;
	color: #25282B
}



ul.listNewLookSelect li.ui-menu-item {
	display: block!important;
	width: 100%;
}

.ui-menu .ui-menu-item {
	clear: left;
	float: left;
	margin: 0;
	padding: 0;
	width: 100%;
	cursor: pointer;
}

li {
	line-height: 18px;
	color: #25282B
}

.ui-menu .ui-menu-item a {
	display: block;
	line-height: 28px;
	padding: 2px 20px 2px 8px;
	text-decoration: none
}


@media (min-width:740px){
	.mobile-only {display: none !important}
}

@media (max-width:739px){
	.desktop-only {display: none !important}
	.welcome-type-btn.vertical-align {
	 	display: inline-flex;
  		align-items: center; 
	}
}


.hidden {
	display: none!important
}

.flashMessage {
	font-family: Roboto;
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	line-height: 22px;
	display: none;
	overflow: hidden;
	color: #f00;
	text-align: right;
    margin: 0 19px 20px 0;
}


/* ////////// normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css //////////*/
html {
  scroll-behavior: smooth;
}

body {margin: 0}

main {display: block}


a {
	background-color: transparent;
	color: #0377B4;
	text-decoration: none
}

a:hover,
a:active {color: #1058aa}

a:hover {text-decoration: none}


abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted
}

b,
strong {font-weight: bolder}

medium {
	font-weight: bolder;
	font-weight: 500
}


img {border-style: none}


span,
button,
input {overflow: visible}

button,
select {text-transform: none}

button,
[type="button"],
[type="reset"],
[type="submit"] {-webkit-appearance: button}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText}

button span {
	margin-right: 0px;
	margin-left: 0px
}

legend {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal
}

progress {vertical-align: baseline}

[type="checkbox"],
[type="radio"] {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {height: auto}

[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px
}

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit
}


/*/////// FONTS ///////*/



sup {position: relative; font-weight: bold; font-size: large; top: 6px; line-height: 4px}


body {
	-webkit-font-smoothing: antialiased;
	cursor: default;
	font-family: Roboto, Arial;
	font-size: 13px;
	font-weight: normal;
	line-height: 18px;
	color: #25282B		
}

h1,
h2,
h3,
h4,
h5,
.heading1,
.heading2,
.heading3,
.heading4,
.heading5,
button {
	font-family: Roboto, Arial;
	color: #25282B;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	position: relative
}

h1 {
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 32px;
	line-height: 38px
}

h2 {
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 32px;
	line-height: 38px;
	font-weight: normal
}

.heading1 {
	font-weight: bold;
	font-size: 32px;
	line-height: 38px
}

.heading2 {
	font-weight: 500;
	font-size: 20px;
	line-height: 24px
}

h3, .heading3 {
	font-weight: 500;
	font-size: 22px;
	line-height: 26px;
	margin-top: 0px
}

h4, .heading4 {
	font-weight: normal;
	font-size: 16px;
	line-height: 40px
}

h5, .heading5 {
	font-weight: 500;
	font-size: 14px;
	line-height: 18px
}

span.strikethrough-on {text-decoration: line-through}

@media (min-width:740px){
.candidate-decline h1,
.landing.staffing-off h1,
.reference-landing h1 {
	margin-top: 0px;
	margin-bottom: 20px;
	font-size: 30px;
	line-height: 38px;
	overflow: visible;
    white-space: nowrap
	}}


@media (max-width:739px){
.candidate-decline h1,
.landing.staffing-off h1,
.reference-landing h1 {
	margin-top: 0px;
	margin-bottom: 20px;
	font-size: 26px;
	line-height: 32px;
	overflow: visible;
	}}

.resume-desc-text {
	font-family: Roboto;
	font-style: normal;
	font-size: 20px;
	line-height: 24px;
	text-align: center;
	color: #25282B
}

.resume-title-text {
	font-family: Roboto;
	font-style: normal;
	font-weight: normal;
	font-size: 40px;
	line-height: 24px;
	text-align: center;
	color: #D9D9D9;
	margin-top: 15px
}

.acc-swoosh,
.large-swoosh,
.swoosh {
	position: relative;
	display: inline-block}

.acc-swoosh::after,
.large-swoosh::after,
.swoosh::after {
	content: "";
	background: url("/resources/images/professional/dashboard/Swoosh.svg") no-repeat;
    position: absolute;
	top: 24px;
	left: 0;
	width: 30px;
	height: 10px;
	display: inline-block;
	animation: swoosh-animate 1s
	}
	
	
.swoosh.delay240::after {
	animation-delay: 2.4s;
	animation-fill-mode: forwards;	
	opacity: 0
}

.large-swoosh::after {
	transform: translateX(4px);
	animation: large-swoosh-animate 1s
}

.acc-swoosh::after {
	transform: translateY(-4px);
	animation: acc-swoosh-animate 1s
}

@keyframes swoosh-animate {
	from {transform: translate(-10px,10px);opacity: 0}
	to {transform: translate(0px,0px);opacity: 1}
}

@keyframes large-swoosh-animate {
	from {transform: translate(-6px,10px);opacity: 0}
	to {transform: translate(4px,0px);opacity: 1}
}

@keyframes acc-swoosh-animate {
	from {transform: translate(-10px,10px);opacity: 0}
	to {transform: translate(0px,-4px);opacity: 1}
}

.signature-confirmation-text {
	font-family: Roboto, Arial;
	color: #00cc66;
	margin: 0;
	padding: 16px 0 14px 0;
	border: 0;
	font-size: 100%;
	position: relative;
	font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    outline: none;
	text-align: center;
	margin-bottom: 20px;
	display: none;
	position: relative
		
}

.decline-text-wrapped {
	width: 100%;
	font-size: 18px;
    font-family: Roboto, Arial;
    line-height: 28px;
    text-align: left;
    display: block;
    margin-bottom: 15px
}

	
/*//// MODERN LOADER ////*/

#app-loader {
	display: block;
	width: 30px;
    height: 30px;
    margin-right: 24px;
    margin: auto;
    text-align: center;
}

.app-loader {
	display: none;
    width: 36px;
    height: 36px;
    margin-top: 7px;
    margin-left: 15px;
}

.app-loader.app-show {
	display: inline-block;
}

.app-loader.overlay-loader {
	float: right;
	margin: 2px 15px 0px 0
}


@media (max-width: 739px){
.app-loader.app-show {
	display: none;
}}

.app-loader-bars {
  display: inline-flex;
  position: relative;
  height: 100%;  
  width: 100%;
  justify-content: space-between;
}

.app-loader-bars div {
  display: inline-block;
  position: relative;
  width: 20%;
  background: #003365;
  animation: lds-animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.app-loader-bars div:nth-child(1) {
  animation-delay: -0.24s;
}
.app-loader-bars div:nth-child(2) {
  animation-delay: -0.12s;
}
.app-loader-bars div:nth-child(3) {
  animation-delay: 0;
}

@keyframes lds-animation {
  0% {
    top: 0%;
    height: 100%;
    background: #000000;
  }
  50%, 100% {
    top: 17%;
    height: 66%;
    background: #2196F3;   
  }
  
}



/*/////// BUTTONS ///////*/

.btn {
	padding-left: 19px;
	padding-right: 19px;
	padding-top: 15px;
	padding-bottom: 13px;
	border-width: 1px;
	border-style: solid;
	border-radius: 100px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-family: Roboto;
	font-size: 16px;
	line-height: 20px;
	outline: none;
	cursor: pointer
}


.btn span {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.btn strong {
	font-weight: 500
}

.btn .icon {
	display: block
}

#btn-add-resume.btn-fixed {
	min-width: 220px
}

.btn-fixed,
.btn-primary {
	min-width: 123px;
	margin-left: 10px
}

.btn-fluid {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 13px;
	margin-bottom: 12px;
	display: flex
}

.mobile-fluid-btn-container{
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: space-between;
	
}

.btn-mobile-half-fluid {
	width: 48%;	
	margin-top: 13px;
	margin-bottom: 12px;
	text-align: center;
	align-items: center
}


.btn-primary {
	border-color: #2196F3;
	background-color: #2196F3;
	color: white;
	fill: white
}


.btn-primary:hover {
	border-color: #1058aa;
	background-color: #1058aa;
	color: white;
}

.btn-primary:active {
	border-color: #1058aa;
	background-color: #1058aa;
	color: white;
	box-shadow: 0 0 0 4pt #C0D3F0
}

.btn-welcome-learn,
.btn-welcome-learn-more {
	padding-top: 9px;
    padding-bottom: 8px;
    margin: 0;
 	width: 123px;
    box-sizing: border-box;	
}

.btn-welcome-learn-more {width: 150px; margin-bottom: 30px}

.btn-add-sign {display: flex; margin: auto; justify-content: center; position: relative; z-index: 5}
.btn-add-sign.btn-add-large {width: 220px}

.btn-addSign {
	width: 14px; 
	height: 14px; 
    margin-right: 5px;}
    
.btn-editSign {
	width: 20px;
    height: 20px;
    display: inline-block;
    border: none;
    margin-right: 5px;
    stroke: #516675;
    stroke-width: 1.1px;
    fill: transparent;
    }  
    
.btn-default:hover .btn-editSign,
.btn-default:active .btn-editSign {
	stroke: #1058aa;
}    

@media ( min-width: 740px) {
.btn-notification-container {
	display: block;
	float: right !important;
	position: relative;
	width: 150px;
	margin-left: 20px
	}

.btn-notification-container.two-buttons {
    display: flex;
    float: right !important;
    position: relative;
    width: 150px;
    margin-left: 20px;
    flex-direction: column;
    justify-content: space-around;
	}

}

@media ( max-width: 739px) {
.btn-notification-container {
	display: none}
}

.notification-icon-container {
	float: left !important;
	position: relative;
	width: 28px;
	margin-left: -10px;
	margin-right: 10px
}
	
.notification-icon {
	position: absolute;               
    top: 50%;                       
   	transform: translate(0, -50%)
}
	

.btn-notification {
	border-color: #528EA7;
	background-color: #E7F6FC;
	color: #528EA7;	
	position: absolute;               
    top: 50%;                       
   	transform: translate(0, -50%)
}

.btn-notification.btn-undo {
	animation-name: notification-btn-blink;
    animation-duration: 1s;
    animation-iteration-count: 20;
}

@keyframes notification-btn-blink {
    0% {background-color: #E7F6FC}
    50% {background-color: #cef1ff;}
    100% {background-color: #E7F6FC;}
    }

.btn-notification:hover {
	border-color: #2F7593;
	background-color: #E7F6FC;
	color: #2F7593
}


.btn-notification:active {
	border-color: #2F7593;
	background-color: #E7F6FC;
	color: #2F7593;
	box-shadow: 0 0 0 4pt #C0D3F0
}

.btn-closetab {width: 150px}

.btn-notification.btn-undo {
	width: 105px;
	margin-left: 45px
}

.btn-closewindow,
.btn-copylogin {width: 150px; padding: 15px 8px 13px 8px}
.btn-notification.btn-add-refmissing {width: 180px; fill: #528EA7; position: absolute}

.btn-add-refmissing:hover,
.btn-add-refmissing:active {fill: #2F7593}


.notification-text-link {
	font-weight: 500;
    color: #2196F3;
    text-decoration: none;
    cursor: pointer;
}



@media ( min-width: 740px) {
.notification-text-container-closetab-withicon {
	width: calc(100% - 198px)	
}

.notification-text-container-closetab-noicon {
	width: calc(100% - 170px)	
}

.notification-text-container-undo {
	width: calc(100% - 198px)	
}

.notification-text-container-copylogin {
	width: calc(100% - 218px)	
	}

.notification-text-container-refmissing {
	width: calc(100% - 228px)
	}
}


@media ( max-width: 739px) {
.notification-text-container-closetab-withicon,
.notification-text-container-closetab-noicon,
.notification-text-container-undo,
.notification-text-container-copylogin,
.notification-text-container-refmissing	{
	width: 100%	}}



.btn-default:hover {
	border-color: #1058aa;
	background-color: #fff;
	color: #1058aa;
	fill: #1058aa
}

.btn-default:active {
	border-color: #1058aa;
	background-color: #fff;
	color: #1058aa;
	box-shadow: 0 0 0 4pt #C0D3F0
}

.btn-default {
	border: #B4C2CD 1px solid;
	background-color: #fff;
	color: #516675;
	fill: #516675
}


.btn-default .icon {fill: #516675}

.btn-default .icon-add {fill: #516675}

.btn-default .icon-remove {stroke: #516675}

.btn-add .icon,
.btn-remove .icon {margin-right: 5px}

.btn-more .icon {margin-left: 5px}

#btn-ask-reference span,
#btn-edit-reference span,
#btn-email-references span,
#btn-grant-access span {
	display: inline-block;
	text-align: center;
}

#btn-preview span,
#btn-cancel span {
	display: inline-block;
	text-align: center;
}


.image-verified {
	float: right;
	margin-top: -106px;
	margin-right: 20px;
	width: 110px;
	height: 110px
}


#btn-preview.btn-fixed,
#btn-cancel.btn-fixed,
#btn-edit-reference,
#btn-ask-reference,
#btn-email-references,
#btn-save,
#btn-send{
	width: 123px;
	min-width: 123px;
	margin-left: 10px;
	margin-bottom: 120px;
	font-size: 18px
}

#btn-grant-access {
	width: 150px;
	min-width: 150px;
	margin-left: 10px;
	margin-bottom: 120px;
	font-size: 18px
}

#btn-save-resend {
	min-width: 123px;
	margin-left: 10px;
	margin-bottom: 120px;
	font-size: 18px
}


@media (max-width:739px){
	#btn-preview.btn-fixed {
		display: none
	}
}

.btn-half-fluid
{
	width: 123px;
	min-width: 123px;
	margin-left: 10px;
	margin-bottom: 120px;
	margin-top: 30px;
	font-size: 18px
}


/*/////// NAVIGATION ///////*/

.header {
	position: fixed;
	left: 0px;
	top: 0px;
	background-color: #F2F6FF;
	z-index: 10
}


@media ( min-width: 1120px) {
	.header {
		width: 250px;
		bottom: 0;
		left:0px;
	}
}

@media ( max-width: 1119px) {
	.header {
		width: 100%;
		height: 55px;
		top:0px;
		position: relative
	}
}

@media ( max-width: 739px) {
	.header {border-bottom: 2px solid white}}


.header-brand {
	display: block
}

@media ( min-width: 1120px) {
	.header-brand {
		-ms-flex-item-align: start;
		align-self: flex-start;
		margin-top: 20px;
		margin-left: 0px;
		margin-bottom: 20px;
		text-align: center;
		height: 55px
	}
}

@media ( max-width: 1119px) {
	.header-brand {
		margin-top: 0px;
		margin-bottom: 0px;
		margin-left: 20px;
		position:absolute;
		top:5px;
	}
}

/*///////////////////////////////////////////////////////*/

@media ( min-width: 1120px) {
	.header-user {
	width: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 21px 0 23px 22px;
	background-color: #fcffff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
	}
	
	.header-user-image {
	margin: 0 10px 0 0;
	position: relative;
	width: 40px;
	height: 40px
}

}


@media ( max-width: 1119px) {
	.header-user {
	position: relative;
    float: right;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 8px 20px 0px 0px;
	}
	.header-user-image {
	margin: 0 0 0 10px;
	order: 2;
	width: 40px;
	height: 40px
}

}

.header-user-image .app-BCPhoto-user-image {
	height: 100px;
	width: 100px;
	display: block;
	border-radius: 50%;
	position: absolute;
	transform: scale(0.4);
}

@media ( min-width: 1120px) {
.wz-header-nav {
	padding: 30px 0px 30px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	}

.header-user-image .app-BCPhoto-user-image {
	top: -30px;
	left: -30px
}
}

@media ( max-width: 1119px) {

.header-user-image .app-BCPhoto-user-image {
	top: -30px;
	right: -30px;
	left: calc(100% - 40px);
    transform-origin: left;
}	
}




/*////////////////////////////////////////////////////*/

@media ( min-width: 1120px) {
	.header-user {
	width: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 21px 0 23px 22px;
	background-color: #fcffff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
	}
	
}


@media ( max-width: 1119px) {
	.header-user {
	position:relative;
	float: right;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin: 8px 20px 0px 0px
	}
	.header-user-image {
	margin: 0 0 0 10px;
	order: 2
}
}


.header-user-main {
	display: -webkit-box;
	display: -ms-flexbox;
	display: inline-block;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column
}

.header-user-name {
	display: block;
	font-weight: 500;
	font-size: 14px;
	line-height: 18px;
	text-decoration: none;
	color: #25282B;
	-webkit-transition: color 0.2s linear;
	-o-transition: color 0.2s linear;
	transition: color 0.2s linear
}

/* Sign-out box */
	.header-signout-container{
	padding: 4px 4px 2px 4px;
	white-space: nowrap;
	border-radius:3px;
	cursor: pointer
	}
	
	
	.header-signout-container:hover .header-user-signout-link {
	color: #25282B;
	text-decoration: none;
	cursor: pointer}
	
	.header-signout-container:active .header-user-signout-link {
	color: #306DCC;
	text-decoration: none;
	font-weight: 500;
	cursor: pointer}


	.icon-signout {
    width: 16px;
    height: 16px;
    display: inline-block;
    float: left;
	border: none;
	margin-top: 1px;
	margin-right: 5px;
	stroke: none;
	fill: #25282B}



	.header-signout-container:active .icon-signout {
	stroke: #306DCC;
	stroke-width: 0.5px;
	fill: #306DCC}


@media ( max-width: 1119px){
	.header-signout-container{
	float: right}
	
	.header-user-name {
	padding-right: 4px	
	}	
	.header-signout-container:hover{
	background-color:#d8eeff;
	white-space: nowrap
	}

	.header-signout-container:active{
	background-color:#F8FAFE;
	white-space: nowrap
	}
	.header-signout-container:active .icon-signout {
	margin-right: 4px
	}
}

@media ( min-width: 1120px){
	.header-signout-container{
		float: left}
	
	.header-user-name {
	padding-left: 4px	
	}
	.header-signout-container:hover{
	background-color:#d8eeff;
	white-space: nowrap
	}

	.header-signout-container:active{
	background-color:white;
	white-space: nowrap
	}
}




@media ( min-width: 740px) {
.mobile-bottom-overlay {
	display: none
	}}
	

@media ( max-width: 739px) {
.mobile-bottom-overlay {
	height: 75px;
	background-color: white;
	border-top: 1px solid #B4C2CD;
	display: block;
    width: 100vw;
    position: fixed;
    bottom: 0;
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
	z-index: 10
    }
}


.mobile-bottom-overlay button span {
margin-left:auto;
margin-right:auto
}

.icon-navigation {
    width: 24px;
    height: 24px;
    display: inline-block;
	border: none;
	margin-right: 10px;
	stroke: #516675;
	stroke-width: 1px;
	fill: transparent;
}

.icon-navigation.icon-selected,
.header-nav-item:active .icon-navigation {
	stroke: #306DCC;
	stroke-width: 1.5px;
	fill: transparent;
 }

.icon-hamburger {
	background: url("/resources/images/professional/dashboard/Icon-hamburger.svg") no-repeat;
    width: 20px;
    height: 20px;
    display: inline-block;
    border: none;
	position: absolute;
	top: 50%;
  	transform: translateY(-50%)
	}


.icon-close {
	background: url("/resources/images/professional/dashboard/Icon-close.svg") no-repeat;
    width: 20px;
    height: 20px;
    display: inline-block;
    border: none;
	position: absolute;
	top: 50%;
  	transform: translateY(-50%)
	}


.header-nav-item:active .icon-account {
	background: url("/resources/images/professional/dashboard/Icon-Account-Selected.svg") no-repeat
 }



@media ( min-width: 1120px) {
.header-nav {
	padding: 30px 0px 30px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
	}}

@media ( max-width: 1119px) {
	.header-nav {
	margin-right: 2%;
    float: right;
    position: relative;
	height:55px;
	top:0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-sizing: border-box;
	box-sizing: border-box

	}
	
	.header-nav.active {
		display: visible;
		pointer-events: auto;
		height: auto;
		padding: 40px 43px
	}
}

@media ( min-width: 740px) {
	.header-mobile-icon {
	display: none
	}}


@media ( max-width: 739px) {
	.header-content {
		display: none
	}
	
	.header-mobile-icon {
		width: 36px;
		height: 26px;
	position: absolute;
	right: 15px;
	cursor: pointer;
	margin-top: 10px;
		text-align: center;
			padding-top:10px
	
	}
	.header-mobile-icon:hover {
	background-color: #F8FAFE;
		width: 36px;
		height: 26px;
	position: absolute;
	right: 15px;
	cursor: pointer;
	margin-top: 10px;
			text-align: center;
		padding-top:10px
	}
	
	#add-employers-btn-desktop,
	#add-reference-btn-desktop {
		display: none
	}
}


.header-mobile-icon .icon-hamburger,
.header-mobile-icon:active .icon-close {
	display: block
}

.header-mobile-icon .icon-close,
.header-mobile-icon:active .icon-hamburger{
	display: none
}


/*Mobile Navigation Overlay*/


@media ( min-width: 740px) {
	.mobile-nav-overlay,
	.header-mobile-overlay-mask {
		display: none
	}}



.mobile-nav-overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: white;
  overflow-y: hidden;
  transition: 0.5s;
}

#mobile-more-actions {background-color: #f2f7ff}


.mobile-nav-overlay-content {
  position: relative;
  top: calc(50% - 38px);
  transform: translateY(-50%);
  text-align: left;
  width: 270px;
	margin-left: auto;
	margin-right: auto
}

.mobile-nav-overlay a {
  padding: 10px 15px;
  text-decoration: none;
  font-size: 20px;
  line-height: 24px;
  transition: 0.3s;
	margin-bottom: 20px
}

.mobile-nav-overlay  a:hover, .mobile-nav-overlay a:focus {
  background-color: #F8FAFE;
	text-decoration: none;
	border-radius: 5px
}

.mobile-nav-overlay  a:active {
  background-color: #F8FAFE;
	border-radius: 5px
}

.mobile-nav-overlay .closebtn,
.mobile-nav-overlay:hover .closebtn {
	color: #516675;
  	width: 36px;
	height: 26px;
	position: absolute;
	right: 15px;
	cursor: pointer;
	margin-top: 10px;
	text-align: center;
	padding: 5px 0 4px 0;
	font-size: 38px;
	border-radius: 0px
}


.header-nav-item {
	color: #516675
}

.header-nav-item-selected,
.header-nav-item-selected:hover,
.header-nav-item-selected:active,
.header-nav-item-selected:focus{
	color: #306DCC;
	font-weight: 500;
}

.header-nav-item:hover {
	color: #516675;
	text-decoration: none;
	background-color: #fcfdfd
}

.header-nav-item:active {
	color: #306DCC;
	font-weight: 500;
	text-decoration: none;
	background-color: #fcfdfd
}

.header-nav-item-selected:hover {
	color: #306DCC;
	text-decoration: none;
	background-color: #fcfdfd
}



@media ( max-width: 739px) {
	.icon-navigation,
	.icon-navigation.icon-selected{
		zoom:130%;
		float: left;
	}
	.header-nav-item,
	.header-nav-item-selected{
		position:relative;
		height:32px;
		display: flex;
		flex-direction: row
	}
	
	.header-nav-text{
		line-height: 32px
	}
	
	.header-mobile-overlay-mask {
		position:fixed;
		height: 55px;
		width: calc(95% - 36px);
		background-color: #F2F6FF;
		z-index: 3
	}
}

@media ( max-width: 1119px)and (min-width:740px) {
	.icon-navigation,
	.icon-navigation.icon-selected {
		position: relative;
		display: block;
		margin-right: auto;
		margin-left: auto;
		margin-top: 9px;
		zoom: 130%
	}
	
	.header-nav-item,
	.header-nav-item-selected {
	position: relative;
	align-items: center;
	text-decoration: none;
	color: #516675;
	font-size: 16px;
	line-height: 20px;
	text-align: center;
	box-sizing: border-box;
	padding: 0;
	background-color: transparent;
 	border-radius: 0px;	
	padding: 0px;
	white-space:nowrap;
	min-width: 55px
	}
	
	.header-nav-item-selected {
	color: #306DCC;
	font-weight: 500
	}
	
	.header-nav-item .header-nav-text,
	.header-nav-item-selected .header-nav-text {
		display: none;
	}
	
	.header-nav-item:hover .header-nav-text,
	.header-nav-item-selected:hover .header-nav-text {
		display: inline-block;
		position: fixed;
		background-color: #1058aa;
		width: 129px;
		padding: 10px;
		top:65px;
		border-radius: 5px;
		z-index: 10;
		font-size: 14px;
		font-weight: 500;
		color:white;
		box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4)
	}
	
	.header-nav-text {
		transform: translateX(-50%)
	}
	
}

@media ( min-width: 1120px) {
.header-nav-item,
.header-nav-item-selected {
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-decoration: none;
	font-size: 16px;
	line-height: 20px;
	padding-left: 30px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius: 3px;
	background-color: transparent;
	width: 220px}
	
.header-nav-item {
	color: #516675
		}
	
.header-nav-item-selected {
	color: #306DCC;
	font-size: 16px;
	font-weight: 500;
	}
}




/*/////// PAGE HEADER ///////*/

.container-new .container {
	width: 100%;
	max-width: 1440px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0px 20px 80px
}

.container {
	width: 940px;
	margin-left: auto;
	margin-right: auto;
	zoom: 1
}

#loading {
	display: none
}

@media ( min-width: 1120px) {
	.container-new .container {
		padding: 0px 100px 120px 350px
	}
}

.container-new .main-header {
	background-color: transparent
}

.container-new header {
	border-top: none
}

.main-header {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.app-welcome-title {
	text-align: center;
	width: 100%;
	margin-bottom: 90px
}


@media ( min-width: 740px) {
	.container-new .main-header-dashboard {
		margin-bottom: 45px
	}
	
	.page-top-margin {
	height: 45px}
	
	.container-new .main-header h1 {
		text-align: left
	}
}


@media ( max-width: 739px) {
	.container-new .main-header-dashboard,
	.app-welcome-title {
		margin-bottom: 45px
	}
	
	.page-top-margin {
	height: 75px}
	
	.container-new .main-header h1 {
		text-align: left
	}
	
}

.empty-manager .empty-manager-title {
	text-align: center;
    margin: auto;
}

.empty-manager .container-new .main-header h1 {
		text-align: center
		}
		

.main-header h1 {
	margin: 0;
	margin-right: auto
}

.app-welcome-title h1,
.container-new .main-header h1 {
	font-size: 32px;
	line-height: 38px
}

@media ( min-width: 1120px) {
	.sidebar_logo {
		height: 55px
	}
}

@media ( max-width: 1119px) {
	.sidebar_logo {
		height: 40px
	}
}

@media ( max-width: 739px) {
.app-welcome-title h1,
.app-welcome-title h2,	
.container-new 	.main-header h1,
	.container-new 	.main-header h2 {
		font-size: 26px;
		line-height: 32px
	}		
}

@media ( min-width: 740px) {
	.main-header-buttons {
		position: relative;
		right: 0px;
		margin-top: 10px
	}
}

@media ( max-width: 739px) {
	.main-header-buttons {
		position: fixed;
		display: none;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 0px 0px;
		margin-top: 10px
	}
}

@media ( min-width: 740px) {
	.main-header .btn {
		margin: 0;
		margin-left: 10px
	}
	.main-header .btn-first-of-type {
		margin-left: auto
	}
}


/*/////// TEREFIC HOMEPAGE / RESUME 4 BOXES ///////*/

html {
  scroll-behavior: smooth;}

#app-home-ready {margin-top: 45px; margin-bottom: 45px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out}


#app-home-ready.app-home-swipe{margin-top: -158px; opacity: 0%}

.step-cards {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 45px
}

.stage-cards {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 15px;
	background: white;
	z-index: 3;
	position: relative	
}

.stage-card,
.step-card {
		margin-right: 30px;
		background: #F8FAFE;
		border: 1px solid #B4C2CD;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		border-radius: 5px;
		position: relative;
		z-index: 2
	}
	
.stage-card,
.step-card {
		display: flex;
    	flex-direction: column;
    	justify-content: space-between;
		align-items: center;
		text-align: center	
	}
	
.stage-card {padding: 30px 12px;}
.stage-card.step-card-5 {padding: 0}
.stage-card .step-card-text, .resume-card .resume-card-text {margin-bottom: 15px; text-align: center}
.stage-card .step-card-title {text-align: center}
	
.stage-card:hover,
.stage-card.stage-card-selected:hover {
   	 	border: 1px #30cc9e solid;
    	background-color: #f3fffe;
	}
	
.step-card:hover, 	
.stage-card.stage-card-selected {
   	 	border: 1px #1058aa solid;
    	background-color: #ecf7ff;		
	}
	
.step-card:after {
		position: absolute;
		content: "";
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
   	 	right: -25px;
    	height: 44px;
    	width: 14px;
		clip-path: polygon(0 0, 100% 50%, 0% 100%);
		background-color: #25292c
	}

.step-card:last-of-type:after {
	display: none
}

.stage-card-title,
.step-card-title,
.call4action-title {
		text-align: center;
		font-size: 16px;		
		line-height: 24px;
    	color: #25292c;
		font-weight: bold;		
		margin: 0px 0px 8px 0px
	}	

.step-card-title, .call4action-title {margin: 0px}
.stage-card-img {width: 50%; margin-bottom: 20px}
.stage-explanation-img {width: 40%; margin: 20px auto}


.stage-card-text,
.step-card-text,
.call4action-text,
.resume-card-text {
		text-align: center;
		font-size: 16px;
		line-height: 24px;
		margin-top: 0;
		margin-bottom: 15px
}	

.resume-explanation-img {
	width: 60%;
	margin-bottom: 10px;
}

.resume-card .resume-card-text {margin: 0; line-height: 22px}

.stage-card-step-last,
.step-card-step-last {
	text-align: center;
	position: relative;
	margin: 0
}

.stage-card-text,
.step-card-text,
.call4action-text,
.resume-card-text {
		margin: 0
	}

.step-card-5  {width: 25%}
.stage-card-3 {width: 33%}	


.step-card-step-last .icon-star {
	position: absolute;
	top: -20px;
	right: -20px
	}

.app-home-text-container {margin-bottom: 15px}

@media ( max-width: 739px) {
	.stage-cards {flex-direction: column; margin-bottom: 0px}
	.stage-card, .step-card {margin: 0 0 20px 0}
	.stage-card-3 {width: 100%}
	#app-home-ready {padding-bottom: 40px}
	#app-home-ready button {display: none}
	#app-home-ready.app-home-swipe {margin-top: -172px}
	.step-cards {display: flex; flex-direction: column; margin-bottom: 20px}
	.step-card {display: flex; flex-direction: row; justify-content: end}
	.step-card-title, .step-card-text, .resume-card-text {text-align: left}
	.stage-explanation-img {width: 20%; margin: 20px 30px 20px 20px;}
	.stage-card .stage-explanation-img {width: 25%; margin: 20px;}
	.btn.desktop-only {display: none}
	
	.step-card:after {
    top: calc(100% + 12px);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: calc(50% - 7px);
    height: 12px;
    width: 14px;
    clip-path: polygon(0 0, 100% 0%, 50% 100%);
	background-color: #16288f
	}}



@media ( min-width: 740px) {

	p.step-card-text, p.call4action-text, p.resume-card-text {margin-bottom: 20px}

	.stage-explanation-text.mobile-margin-bottom {margin-bottom: 0px}	
}

@media ( max-width: 739px) {
.stage-explanation-text.mobile-margin-bottom {margin-bottom: 8px}
}

@media ( max-width: 739px) {
	.step-card-5 {width: 100%}}

.separation-line.separation-line-after {width: 100%; margin-top: 0px}

.separation-line.separation-line-after:after {
  	content: "";
 	position: relative;
	display: block;
  	clip-path: polygon(0 0, 100% 0%, 50% 100%);
	width: 20px;
    height: 15px;
    background-color: #25282B;
	top: 15px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out	
}


.separation-line.separation-line-after.stage-card1:after {left: calc(16.67% - 20px)}		
.separation-line.separation-line-after.stage-card2:after {left: calc(50% - 10px)}
.separation-line.separation-line-after.stage-card3:after {left: 83.33%}		

@media ( max-width: 739px) {
.separation-line.separation-line-after.stage-card1:after,		
.separation-line.separation-line-after.stage-card2:after, 
.separation-line.separation-line-after.stage-card3:after {left: calc(50% - 10px)}	
}


#stage-explanation {display: none;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out}

#stage-explanation { position: relative}

#stage-explanation-applying,
#stage-explanation-interviewing,
#stage-explanation-screening {opacity: 0%;
	position: absolute;
	top: 45px;
	width: 100%;
	padding-bottom: 90px;
	z-index: 0;
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-ms-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out}

#stage-explanation-applying.explanation-selected,
#stage-explanation-interviewing.explanation-selected,
#stage-explanation-screening.explanation-selected {opacity: 100%; z-index: 5; display: block}

#stage-explanation-applying.explanation-notselected,
#stage-explanation-interviewing.explanation-notselected,
#stage-explanation-screening.explanation-notselected {opacity: 0%; z-index: 0; margin-top: -2000%}

#stage-explanation-screening-terefic,
#stage-explanation-screening-phone,
#stage-explanation-screening-action {display: none}

.stage-explanation-bullet,
.stage-explanation-text {
		text-align: left;
		font-size: 16px;		
		line-height: 24px;
    	color: #25292c;	
		margin: 0px
	}	

.stage-explanation-square-bullets {
	  list-style-type: square;
}

.stage-explanation-text.margin-bottom-30px,
.margin-bottom-30px {margin-bottom: 30px}



.two-underline.green-underline:after {border-bottom: 2px solid #00cc66}

.stage-explanation-link {
	display: inline-block;
    font-family: Roboto;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #2196F3;
    text-decoration: none;
	cursor: pointer;
	margin: 0px
}


.stage-explanation-link:hover {
	color: #1058aa;
	text-decoration: none;
}

.stage-explanation-text {margin-bottom: 8px}
.stage-explanation-bullet {margin-left: 25px} 
.stage-explanation-bullet.last-text {margin-bottom: 30px} 
.stage-explanation-text.last-text {margin-bottom: 45px} 



/*/////// PDF DOCUMENTS ///////*/

.resume-cards {
	margin: 0px auto 30px auto;
	width: 75%;
	display: flex;
	align-items: center
}

.resume-card {
	width: 25%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	position: relative
}

.resume-equation {
	width: 14px; 
	height: 14px; 
	fill: #011685;
	transform: translateY(-16px)}

.power-resume-container {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 5px;
	position: relative;
	width: 100%;
	padding: 30px;
	background-color: #f2f7ff;
	margin-bottom: 40px;
	z-index: 5;
	border: 1px #B4C2CD solid
	}
	
.power-resume-title-container {
	display: flex;
	justify-content: center
}

.app-pdfpage-btnContainer {
	display: flex;
	justify-content: center;
	margin-bottom: 30px
}

.icon-pdf {
	width: 18px;
    transform: translateY(2px);
	height: 18px;
	margin-right: 5px;
	position: relative;
	z-index: 5}

.app-pdfpage-title,
.app-pdfpage-text {
	font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
	margin-bottom: 5px;
    color: #25292c;
	text-align: center;
	position: relative;
	z-index: 5
}

.app-pdfpage-warning-container {
	position: relative;
	text-align: center;
	overflow: visible}

.app-pdfpage-warning-text,
.app-pdfpage-limitations-text {
	font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
	color: red; 
	margin: 0; 
	position: absolute; 
	width: 380px;
	left: 50%;
    transform: translatex(-50%);
	opacity: 0;
	z-index: 4;
	 -webkit-transition: all 0.8s linear;
  	transition: all 0.8s linear;
}

#app-pdfpage-editSaveBtn,
#app-requestcopyBtn {
	display: block;
	margin: 0 auto 30px auto;
}
	
.app-pdfpage-limitations-text {
	transform: translate(-50%,22px);}

.app-pdfpage-warning-text.warning-selected,
.app-pdfpage-limitations-text.warning-selected {opacity: 1}

#app-pdfpage-warning-btnslider {
	position: relative; width: 100%; height: 0px;
  	-webkit-transition: all .4s ease;
  	transition: all .4s ease;}

.app-upload-btn-container {position: relative}

#red-arrow1,
#red-arrow2 {
	position: absolute;
	left: calc(50% - 130px);
    width: 40px;
    height: 15px;
	top: 3px;
	display: none
}

#red-arrow1 {
animation: animation-red-arrow1 1s 5; animation-timing-function: linear;
}

#red-arrow2 {
	transform: scaleX(-1); 
	left: calc(50% + 90px);
	animation: animation-red-arrow2 1s 5; animation-timing-function: linear;
}

@keyframes animation-red-arrow1 {
    0% {transform: translateX(0px)}
	50% {transform: translateX(-8px)}
    100% {transform: translateX(0px)}
}

@keyframes animation-red-arrow2 {
    0% {transform: translateX(0px) scale(-1)}
	50% {transform: translateX(8px) scale(-1)}
    100% {transform: translateX(0px) scale(-1)}
}

.app-pdfpage-title {font-size: 20px; font-weight: 600}

.app-pdfpage-separation-line {
	border-bottom: 1px #B4C2CD solid;
	margin: 20px auto 30px auto;
	max-width: 816px;
	position: relative;
	z-index: 5;}

#Resume {
	margin: auto;
    position: relative;
    width: 176px;
    display: block;
	margin-bottom: 20px;
	z-index: 5
}

.diamond {
	position: absolute;
	fill: #001585;
	width: 18px;
	height: 18px;
	}

.diamond1 {top: 5%; left: 1.5%; animation: diamond-animation1 4000ms infinite; animation-timing-function: linear;}
.diamond2 {top: 15%; left: 5%; animation: diamond-animation2 3500ms infinite; animation-timing-function: linear;}
.diamond3 {top: 9%; left: 12%; animation: diamond-animation3 3800ms infinite; animation-timing-function: linear;}
.diamond4 {top: 12%; right: 7%; animation: diamond-animation4 4000ms infinite; animation-timing-function: linear;}
.diamond5 {top: 30%; left: 15%; animation: diamond-animation4 3800ms infinite; animation-timing-function: linear;}
.diamond6 {top: 25%; right: 15%; animation: diamond-animation2 4200ms infinite; animation-timing-function: linear;}
.diamond7 {top: 5%; left: 20%; animation: diamond-animation1 3500ms infinite; animation-timing-function: linear;}
.diamond8 {top: 11%; right: 16%; animation: diamond-animation3 3800ms infinite; animation-timing-function: linear;}
.diamond9 {top: 45%; left: 9%; animation: diamond-animation1 3800ms infinite; animation-timing-function: linear;}


@keyframes diamond-animation1 {
    0% {transform: rotate(20deg) translate(0px, 0px) scale(1)}
	20% {transform: rotate(20deg) translate(2px, 3px) scale(1.2)}
	30% {transform: rotate(20deg) translate(0px, 1px) scale(1)}	
	50% {transform: rotate(20deg) translate(-2px, 0px) scale(1)}
	80% {transform: rotate(20deg) translate(1px, -1px) scale(1.1)}	
    100% {transform: rotate(20deg) translate(0px, 0px) scale(1)}
}


@keyframes diamond-animation2 {
    0% {transform: rotate(0deg) translate(0px, 0px) scale(1.1)}
	20% {transform: rotate(0deg) translate(3px, 1px) scale(0.9)}
	30% {transform: rotate(0deg) translate(1px, 0px) scale(1)}	
	50% {transform: rotate(0deg) translate(-1px, 2px) scale(1.2)}
	80% {transform: rotate(0deg) translate(1px, -1px) scale(1)}	
    100% {transform: rotate(0deg) translate(0px, 0px) scale(1.1)}
}

@keyframes diamond-animation3 {
    0% {transform: rotate(0deg) translate(0px, 0px) scale(1)}
	20% {transform: rotate(0deg) translate(1px, -1px) scale(1.15)}
	30% {transform: rotate(0deg) translate(1px, 0px) scale(1.1)}	
	50% {transform: rotate(0deg) translate(3px, 2px) scale(1)}
	80% {transform: rotate(0deg) translate(1px, -1px) scale(1.2)}	
    100% {transform: rotate(0deg) translate(0px, 0px) scale(1)}
}

@keyframes diamond-animation4 {
    0% {transform: rotate(10deg) translate(0px, 0px) scale(1.5)}
	20% {transform: rotate(10deg) translate(1px, -1px) scale(1.65)}
	30% {transform: rotate(10deg) translate(1px, 0px) scale(1.6)}	
	50% {transform: rotate(10deg) translate(3px, 2px) scale(1.4)}
	80% {transform: rotate(10deg) translate(1px, -1px) scale(1.8)}	
    100% {transform: rotate(10deg) translate(0px, 0px) scale(1.5)}
}


iframe{
	border-width: 0px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
}


/*/////// DROPDOWN ///////*/

.downArrow-path,
.employers-table-btn span,
.btn span {
    pointer-events: none; 
}

.app-editProfile-dropdown,
.app-employers-dropdown {
	list-style: none;
    box-sizing: border-box;
    margin: 0;
    text-align: left;
    position: absolute;
    top: 110%;
    z-index: 1000;
    min-width: 180px;
    padding: 8px 0;
    border-radius: 4px;
    color: #1c252c;
    background-color: white;
    box-shadow: 0 0 0 1px rgba(77,101,117,0.1), 0 3px 10px 0 rgba(77,101,117,0.2);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    overflow: hidden;
	visibility: hidden;
	-webkit-transition: all 150ms linear;
	-o-transition: all 150ms linear;
	transition: all 150ms linear;	
	height: 0;
}

.app-editProfile-dropdown {
    box-sizing: border-box;
    width: 320px;
	margin-left: 25px
}

.employers-table-row_actions .app-employers-dropdown {top: 32px; right: -15px}

.app-editProfile-dropdown.is-open {visibility: visible; height: 152px}
.app-employers-dropdown.is-open {visibility: visible; height: 128px}
.app-employers-dropdown.small-dropdown.is-open {visibility: visible; height: 50px}

@media (max-width:1119px){
.employers-table-row_actions .app-employers-dropdown {right: -2px}	
}

.app-editProfile-dropdown > li {
	display: block;
    line-height: 20px;
	text-align: left
}

.app-editProfile-dropdown-link, 
.app-dropdown-link {
    display: block;
    padding: 4px 16px;
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    outline: none;
    color: #25292c;
    background-color: transparent;
	font-family: Roboto, Arial;
	font-size: 16px;
	line-height: 26px
}

.separation-line-dropdown {
	border-bottom: 1px #B4C2CD solid;
	margin: 5px 0;
	width: 100%
}


.app-editProfile-dropdown-link:hover,
.app-dropdown-link:hover {
    background-color: #e9effc;
	color: #25282B;
}

.app-editProfile-dropdown-link:active,
.app-dropdown-link:active {
	background: #1058aa;
	color: white}

.tips {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	margin-bottom: 59px
}

.portfolio {
	display: relative;
	max-width: 990px		
}

#portfolio-scale {transform-origin: top left}

@media ( max-width: 739px) {
	.portfolio {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap
	}
	
.app-pdfpage-warning-text,
.app-pdfpage-limitations-text {
	font-size: 14px; 
	width: 330px;}

.app-editProfile-dropdown {margin-left: 0; width: calc(100vw - 56px)}	
}


.portfolio-cover {
	width: 816px;
	height: 1057px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	overflow: hidden;
	border: 0.42px solid #B4C2CD;
	background-color: white
}

.portfolio-body,
.portfolio-edit {
	width: 816px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 60px;
	overflow: hidden;
	border: 0.42px solid #B4C2CD;
	background-color: white;
	position: relative;
}

.portfolio-banner {
	position: absolute;
	top: 0;
	width: 100%;
	height: 22px;
	background-color: #001586;
	font-family: Roboto;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    color: white;
    font-weight: 500
}

.portfolio-cover.active,
.portfolio-body.active,
.portfolio-edit.active {
	animation-name: portfolio-blink-bckg;
  	animation-duration: 0.8s;
    animation-iteration-count: 1;
	}
	
@keyframes portfolio-blink-bckg {
    0% {background-color: white}
   	50% {background-color: #d8eaff}
   	70% {background-color: #d8eaff}
    100% {background-color: white}
}	
		
@media ( max-width: 739px) {
	.portfolio-cover,
	.portfolio-body {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		margin-right: 0;
	}
	
	.header{
		position: fixed
	}
	
	.image-verified{
		width: 65px;
		height: 65px;
		margin-top:-74px
	}
	
	.resume-desc-text{
		font-size: 14px;
		line-height: 18px
	}
	.resume-title-text {
		font-size: 26px;
		margin-top: 10px
	}
	
}


.portfolio iframe {
	width: 100%;
	margin-bottom: 55px
}



@media (min-width:740px){
	.resume-cards.mobile-only {display: none}
}

@media (max-width:739px){
	.resume-cards.desktop-only {display: none}
	
	.resume-cards {
	margin: 0px auto 30px auto;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
	}
	
	.resume-cards-mobile-row1 {
	display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
	}
	
	.resume-cards-mobile-row2 {
	display: flex;
    justify-content: center;
    width: 100%;
	}
	
	.resume-card {
	width: 33%;
    display: flex;
    flex-direction: row;
    justify-content: center;
	}
	
	.resume-explanation-img {
    width: 60%;
	margin-bottom: 10px;}
	
	.resume-cards-mobile-row1 .resume-equation {
    transform: translateY(25px);}

	.resume-cards-mobile-row2 .resume-equation {
	transform: translate(-40px, 30px);}
	
	.resume-explanation-img {width: 70%;}

	.resume-card .resume-card-text {
	text-align: left;
    margin-left: 20px;
	}
}


/*/////// REFERENCE EMAIL ??? ///////*/


.ref-email {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 130px 1fr;
	grid-template-columns: 130px 1fr;
	-ms-grid-rows: max-content 15px max-content 15px max-content;
	grid-template-rows: max-content max-content max-content;
	grid-row-gap: 15px
}

.ref-email .label-first {
	-ms-grid-column: 1;
	-ms-grid-row: 1;
	grid-row: 1/2;
	grid-column: 1/2
}

.ref-email .label-second {
	-ms-grid-column: 1;
	-ms-grid-row: 3;
	grid-row: 2/3;
	grid-column: 1/2
}

.ref-email .email-subject {
	grid-row: 1/2;
	grid-column: 2/3;
	position: relative;
	-ms-grid-column: 2;
	-ms-grid-row: 1
}

.ref-email .email-body {
	grid-row: 2/3;
	grid-column: 2/3;
	position: relative;
	-ms-grid-column: 2;
	-ms-grid-row: 3
}

.ref-email .email-buttons {
	grid-row: 3/4;
	grid-column: 2/3;
	-ms-grid-column: 1;
	-ms-grid-column-span: 2;
	-ms-grid-row: 3
}

.directRefCheckField .curent-label {
	float: left;
	margin-left: 10px;
	margin-top: -5px
}

.ref-email input[type="checkbox" i] {
	float: left;
	background-color: initial;
	cursor: default;
	-webkit-appearance: checkbox;
	box-sizing: border-box;
	margin: 3px 0.5ex;
	padding: initial;
	border: initial
}

/*/////// REFERENCE MANAGER CARDS ///////*/


.reference-box {
	float: left;
	background: #FFF;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 1px 5px rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	width: 278px;
	height: 270px;
	margin-right: 18px;	
	margin-bottom: 18px;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px
}

.reference-box:hover {
	background: #F8FAFE;
}

.reference-box.timer-on .timer-on {display: inline-block}
.reference-box.timer-on .timer-over {display: none}

.reference-box.timer-over .timer-on {display: none}
.reference-box.timer-over .timer-over {display: inline-block}

.reference-box.timer-over.undo-on .undo-on {display: inline-block}
.reference-box.timer-over.undo-on .undo-off {display: none}

.reference-box.timer-over.undo-off .undo-on {display: none}
.reference-box.timer-over.undo-off .undo-off {display: inline-block}
.reference-box.timer-over.undo-off .undo-off.timer-on {display: none}

.reference-box.timer-on.processing .reference-rating-title.timer-on {display: inline-block}
.reference-box.timer-on.processing .reference-rating-title.timer-over {display: none}
.reference-box.timer-over.processing .reference-rating-title.timer-on {display: inline-block}
.reference-box.timer-over.processing .reference-rating-title.timer-over {display: none}

.mobile-bottom-overlay.timer-on .timer-on {display: block}
.mobile-bottom-overlay.timer-on .timer-over {display: none}

.mobile-bottom-overlay.timer-over .timer-on {display: none}
.mobile-bottom-overlay.timer-over .timer-over {display: block}

.notification-box.timer-on .timer-on {display: block}
.notification-box.timer-on .timer-over {display: none}

.notification-box.timer-over .timer-on {display: none}
.notification-box.timer-over .timer-over {display: block}

.empty-manager-content {
	display:none; 
	text-align: center;
    margin: 12vh auto 0 auto;}
    
.empty-manager-content .stage-explanation-img {width: 32%}
    
.empty-manager .empty-manager-content {display: block}
.empty-manager .power-resume-container {display:none}
.empty-manager .hide-button {display:none}


@media ( min-width: 694px) {
.references-container {
	width: calc(100% + 18px);
	display: flex;
	flex-wrap: wrap;
	}
.reference-box {
	float: left;
	width: 278px;
}
}


@media ( max-width: 693px) {
.references-container {
	width: calc(100%);
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	}
.reference-box {
	width: calc(100% - 40px);
	margin-right: 0px;
}
	}



.reference-rating-title-wrapper {
	display: block
}

.reference-rating-title {
	padding-top: 4px;
	padding-bottom: 2px;
	padding-left: 5px;
	padding-right: 5px;
	font-family: Roboto;
	font-style: normal;
	font-weight: 500;
	font-size: 10px;
	line-height: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.87);
	mix-blend-mode: normal;
	display: inline-block
}

.reference-box .data span {
	display: block;
	font-family: Roboto;
	font-style: normal;
	font-size: 14px;
	line-height: 20px;
	color: #25282B 
}


.links {
	display: inline-block;
	font-family: Roboto;
	font-style: normal;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: #2196F3;
	text-decoration: none;
	letter-spacing: 1.25px;
	margin-right: 10px;
	padding-top: 2px;
	cursor: pointer
}


.links:hover {
	color: #1058aa;
	text-decoration: none;
}


.reference-box .trash {
	background: url("/resources/images/professional/dashboard/Trash20H (June20).svg") no-repeat;
    width: 22px;
    height: 22px;
    display: inline-block;
    float: right;
	cursor: pointer;
}

.reference-box .trash:hover {
	background: url("/resources/images/professional/dashboard/Trash20H Hover (June20).svg") no-repeat;
}


.reference-box .data span.full_name {
	font-weight: bold
}

.reference-box .data {
	margin-bottom: 16px;
	height: 160px;
}

.reference-box .status {
	margin-bottom: 56px
}

.employers-sent,
.employers-opened,
.employers-granted,
.employers-blocked,
.employers-bounced {
	-webkit-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}


.employers-opened,
.bright-green-background-color {
	background: #66FFA6
}

.bright-orange-background-color {
	background: #FF9E40
}



.bright-green-background-color.processing,
.bright-orange-background-color.processing {
	animation-name: green-blink;
  	animation-duration: 1s;
    animation-iteration-count: 20;
}

@keyframes green-blink {
    0% {background-color: #66FFA6}
    50% {background-color: #38FF8B;}
    100% {background-color: #66FFA6;}
    }
    

.employers-sent,
.employers-granted,
.bright-yellow-background-color {
	background: #FFD600
}

.bright-yellow-background-color.timer-on {
	animation-name: yellow-blink;
  	animation-duration: 1s;
    animation-iteration-count: 20;
}

@keyframes yellow-blink {
    0% {background-color: #FFD600}
    50% {background-color: #ffbb00;}
    100% {background-color: #FFD600;}
    }

.employers-blocked,
.employers-bounced {
	background: #FEA701;
}

.bright-red-background-color {
	background: #F00;	
}	

.processing .bright-red-background-color {
	animation-name: red-blink;
  	animation-duration: 1s;
    animation-iteration-count: 20;
}

@keyframes red-blink {
    0% {background-color: #F00}
    50% {background-color: #eb0000;}
    100% {background-color: #F00;}
    }
    
	
.icon-clean-references-black {
	width: 26px;
	height: 26px;
	background: #25282B;
	border: 1px solid #25282B;
	box-sizing: border-box
}

.icon-clean-references-gray {
	width: 26px;
	height: 26px;
	background: #FFF;
	border: 1px solid #25282B;
	box-sizing: border-box
}

.icon-clean-references-white {
	width: 26px;
	height: 26px;
	background: #FFF;
	border: 1px solid #25282B;
	box-sizing: border-box
}

.icon-clean-references-empty {
	width: 26px;
	height: 26px;
	border: 1px solid #B4C2CD;
	box-sizing: border-box
}

textarea,
form input[type="text"],
form input[type="password"],
select {
	border: 1px solid #B4C2CD;
	box-sizing: border-box;
	border-radius: 4px;
	margin-left: 25px
}

.form-input-box.app-email-glass-box {
    font-family: Roboto;
    color: #66666670;
    background-color: #F8FAFE;
    position: relative;
    padding: 0 0 0 8px;
    font-size: 15px;
    font-weight: normal;
    line-height: 32px;
    text-overflow: ellipsis;
    overflow: overlay;
}
    
/*bug with Chrome. 3px extra margin-left for some reasons*/
textarea,
#subject {margin-left: 22px; white-space: pre-line}


#copy-password textarea {
	border: none;
	box-sizing: border-box;
	border-radius: 4px;
	background-color: #dcffeb;
	animation: greenblink-bacground-animation 0.9s 1; 
	animation-timing-function: linear;
}

@keyframes greenblink-bacground-animation {
    0% {background-color: #dcffeb}
	25% {background-color: #caffe1}
    50% {background-color: #dcffeb}	
	75% {background-color: #caffe1}	
    100% {background-color: #dcffeb}
}

.inputNewLookSelect {
	border: 1px solid #B4C2CD;
	box-sizing: border-box;
	border-radius: 4px
}

form label {
	font-family: Roboto;
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	line-height: 20px;
	text-align: right;
	color: #25282B;
	display:inline-block;
	width: 150px
}

.form-input-box {
	width: 320px;
	height: 40px
}

#zip.form-input-box {
	width: 80px
}

#typeStateId .inputNewLookSelectV2 {
	background-color: #FFF;
	width: 230px;
	height: 40px;
	padding: 0px 8px;
	line-height: 38px
}


#typeStateId .inputNewLookSelectV2:hover {
	background-color: #F8FAFE;
	-webkit-transition: background-color 0.2s linear;
	-o-transition: background-color 0.2s linear;
	transition: background-color 0.2s linear;
}

.edit-reference h3,
.add-reference h3,
.add-employer h3{
	font-family: Roboto;
	font-style: normal;
	font-weight: 500;
	font-size: 22px;
	line-height: 30px;
	color: #25282B
}



.notification-box {
	width: 100%;
	background: #E3F4FB;
	border: 2px solid #C2E7F6;
	box-sizing: border-box;
	border-radius: 4px;
	display: flex;
    flex-wrap: nowrap;
	position: relative;
	margin-bottom: 20px;
	z-index: 5;
}

@media ( min-width: 740px) {

.notification-text {
	font-family: Roboto;
	font-style: normal;
	font-weight: normal;
	font-size: 18px;
	line-height: 24px;
	color: #2F7593;
	}
	
.notification-box,
.preview-email .notification-box-hidden {
	padding: 30px;
}

li.notification-text-bullet {
	font-family: Roboto;
	font-style: normal;
	font-weight: normal;
	font-size: 18px;
	line-height: 22px;
	color: #2F7593;
	margin-top:5px;
	margin-left: 0px;
}
}


@media ( max-width: 739px) {
.notification-text {
	font-family: Roboto;
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	line-height: 22px;
	color: #2F7593;
	}
.notification-box,
.preview-email .notification-box-hidden {
	padding: 20px;
}
	li.notification-text-bullet {
	font-family: Roboto;
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	line-height: 22px;
	color: #2F7593;
	margin-top:5px;
	margin-left: 0px;
}}


.preview-frame-box {
	width: 940px;
	height: 96px;
	background: #E3F4FB;
	border: 3px solid #C2E7F6;
	box-sizing: border-box;
	border-radius: 4px
}

.preview-frame-text {
	font-family: Roboto;
	font-style: normal;
	font-weight: normal;
	font-size: 20px;
	line-height: 24px;
	color: #2F7593
}

.preview-reference-email #btn-cancel {
	width: 162px
}

.preview-subject {
	font-family: Roboto;
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	line-height: 20px;
	margin-bottom: 15px;
	color: #25282B;
	display: block;
}

.preview-body {
	width: 940px;
	height: 529px;
	border: 1px solid #B4C2CD;
	box-sizing: border-box;
	border-radius: 4px;
	padding-left: 160px;
	padding-right: 160px;
	background: #F8FAFE
}

.preview-body-content {
	width: 620px;
	height: 527px;
	background: white
}

.preview-body-custom-content {
	white-space: pre-wrap
}


.inlineBlock {
	display: inline-block
}

.floatLeft {
	float: left;
	position: relative
}

.floatRight {
	float: right;
	position: relative;
}



.stars-row {
	display: block;
	margin-top: 8px;
}


.star-22H-full {
    background: url("/resources/images/professional/dashboard/Stars Full 22H (June20).svg") no-repeat;
    width: 24px;
    height: 22px;
    display: inline-block;
    float: left;
	margin-right: 3px;
}

.star-22H-empty {
    background: url("/resources/images/professional/dashboard/Stars Empty 22H (June20).svg") no-repeat;
    width: 24px;
    height: 22px;
    display: inline-block;
    float: left;
	margin-right: 3px;
}

.reference-box.ref-hidden .star-22H-full,
.reference-box.ref-hidden .star-22H-empty {
    background: url("/resources/images/professional/dashboard/Stars Dots 22H (June20).svg") no-repeat;
}

.reference-box.ref-visible .ref-visible {display: inline-block}
.reference-box.ref-hidden .ref-hidden {display: inline-block}

.reference-box.ref-hidden .ref-visible {display: none}
.reference-box.ref-visible .ref-hidden {display: none}


.star-22H-sealed {
	background: radial-gradient(#2077ff 35%, transparent 35%);
    background-color: #bbd6ff;
    background-position: 0 0, 50px 50px;
    background-size: 4px 4px;
    height: 24px;
    width: 24px;
    display: inline-block;
    margin-right: 2px;
    margin-top: -1px;
	float: left
}

@media ( min-width: 740px) {
	h4.info-container {
	font-size: 16px;
	margin: 0 0 0 10px;
	display: visible
}
}

@media ( max-width: 739px) {
	h4.info-container {
	font-size: 16px;
	margin: 0 0 0 10px;
	display: none
}
}


h4.info-container a{
	color: #2196F3
}

h4.info-container a:hover{
	color: #1058aa;
	text-decoration: none
}


.tooltip-element:hover .tooltip {
    display: inline-block;
}

.tooltip-element:hover{
	cursor: pointer
}


.tooltip {
    display: none;
    background: #18347B;
	opacity: 70%;
    margin-left: 28px;
    padding: 20px;
    position: absolute;
    z-index: 1000;
    width:208px;
    min-height: 40px;
	color: #FFF;
	font-family: Roboto;
	line-height: 20px;	
}

.tooltip.tooltip-large {
	width:300px;
    min-height: 40px;
	margin-bottom: 5px
}

/*//// WELCOME PAGE FOR CANDIDATES ////*/


.welcome-user-title-candidate {display: none}
.welcome-text-selection {display: none}
.welcome-candidate-text {display: none}
.welcome-candidate-text-wrapped {display: none}
.welcome-video-message {display: none}
.landing-welcome-text {display: none}

body.staffing-off .landing.staffing-on {display: none}
body.staffing-off .welcome-text-container.staffing-on {display: none}


@media (min-width:900px){
	body.staffing-on .landing.staffing-on {display: block}
	body.staffing-on .landing.staffing-off {display: none}	
}

@media (max-width:899px){
	body.staffing-on .landing.staffing-on {display: none}
	body.staffing-on .landing.staffing-off {display: block}	
	body.staffing-on .welcome-text-container.staffing-on {display: block}
}

body.staffing-on .welcome-text-container.staffing-off {display: none}

body.share-on.stopFlow-on .welcome-text-selection.share-on.stopFlow-on {display: block}
body.share-off.stopFlow-on .welcome-text-selection.share-off.stopFlow-on {display: block}
body.share-on.stopFlow-off .welcome-text-selection.share-on.stopFlow-off {display: block}
body.share-off.stopFlow-off .welcome-text-selection.share-off.stopFlow-off {display: block}

body.link-direct.txt-english .welcome-video-message.link-direct.txt-english {display: block}
body.link-email.txt-english  .welcome-video-message.link-email.txt-english  {display: block}
body.link-direct.txt-french .welcome-video-message.link-direct.txt-french {display: block}
body.link-email.txt-french  .welcome-video-message.link-email.txt-french  {display: block}

body.link-direct.txt-english .landing-welcome-text.link-direct.txt-english {display: block}
body.link-email.txt-english .landing-welcome-text.link-email.txt-english {display: block}
body.link-direct.txt-french .landing-welcome-text.link-direct.txt-french {display: block}
body.link-email.txt-french .landing-welcome-text.link-email.txt-french {display: block}

body.user-new .welcome-text-container.user-existing {display: none}
body.user-new .landing-logo-user-existing {display: none}

body.user-existing .landing-logo.user-new {display: none}
body.user-existing .welcome-text-container.user-new {display: none}
body.user-existing .welcome-text-container.user-existing {display: block}
body.user-existing .landing-logo-user-existing {display: inline-block}
body.user-existing .landing.user-new {display: none}
body.user-existing .landing.user-all {display: block}

body.txt-english .welcome-user-title-candidate.txt-english {display: block}
body.txt-french .welcome-user-title-candidate.txt-french {display: block}
body.txt-english .welcome-text-selection.txt-english .welcome-candidate-text {display: inline-block}
body.txt-french .welcome-text-selection.txt-french .welcome-candidate-text {display: inline-block}
body.txt-english .welcome-text-selection.txt-english .welcome-candidate-text-wrapped {display: inline-block}
body.txt-french .welcome-text-selection.txt-french .welcome-candidate-text-wrapped {display: inline-block}

body.txt-english .welcome-candidate-text-wrapped.txt-english {display: block}
body.txt-french .welcome-candidate-text-wrapped.txt-french {display: block}

body.txt-english .btnNext.txt-french {display: none}
body.txt-english .btnNext.txt-english {display: block}
body.txt-french .btnNext.txt-french {display: block}
body.txt-french .btnNext.txt-english {display: none}


@media (min-width:740px){
.main-container {
	margin-left: calc(50vw - 398px - 25px);
	margin-right: calc(50vw - 398px + 25px);
   	justify-content: center;	
	width: 796px;
	min-height: 100%;
	margin-top: 45px;
	margin-bottom: 30px;
	}
}


@media (max-width: 739px){
.main-container {
	width: 100%;
	min-height: 100%;
	margin-top: 0px;
	margin-left: 0px
	}
}

.main-container-parent {
	display: flex;
 	flex-direction: column;
 	justify-content: center;
  	align-items: center;
  	text-align: center;
  	min-height: 100vh;
  	height: 100vh;
  	position: relative
	}

.main-container-child {
	position: absolute;
	top: 10%
}

@media ( max-width: 739px) {	
#photoID-welcome .main-container-child {width: 100vw;}
#photoID-welcome .welcome-type-btn {width: 90px}
}	

@media ( min-width: 740px) {	
.landing-background-box {
	width:590px;
	height: 260px;
    flex-wrap: nowrap;
	align-content: center;
	position: relative;
	margin: auto;
	background-color: #F2F6FF;
	padding: 40px;
	box-sizing:border-box;
	padding-top: 40px 55px 70px 55px;
	margin-bottom: 30px;
	z-index: 5
	}	
	
.photoID-background-box	{
	width:590px;
    flex-wrap: nowrap;
	align-content: center;
	position: relative;
	margin: auto;
	background-color: #F2F6FF;
	padding: 40px;
	box-sizing:border-box;
	padding-top: 40px 55px 70px 55px;
	margin-bottom: 30px;
	z-index: 5	
}

}


@media ( max-width: 739px) {
.landing-background-box,
.photoID-background-box {
	width:100%;
    flex-wrap: nowrap;
	align-content: center;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	background-color: #F2F6FF;
	padding: 40px;
	box-sizing:border-box;
	padding-top: 20px;
	padding-left: 35px;
	padding-right: 35px;
	padding-bottom: 30px;
	margin-bottom: 30px;
	z-index: 5
	}

}

.welcome-photo-text-container{
	width:100%;
	display: flex;
	box-sizing: border-box;
    flex-wrap: nowrap;
	position: relative;
}


.landing.staffing-off .welcome-photo-text-container {
	width:100%;
	box-sizing: border-box;
    flex-wrap: nowrap;
	position: relative;
	background-color: #F2F6FF;
	box-sizing:border-box;
	min-height: 120px;
	margin-top:30px;
	display:flex
}

@media (max-width:739px){
.landing.staffing-off .welcome-photo-text-container {
	flex-direction: column;
	background: #F2F6FF;
	height: 100%;		
	}
}
	

.welcome-title-language-container {
	width:100%;
	line-height: 30px
}


@media (min-width:740px){
.welcome-text-container {
	width: calc(100% - 140px);
	}	
.welcome-photo-text-container {
		height: 120px
}	
}

@media (max-width:739px){
.welcome-text-container {
	width: 100%;
	}}

	
.welcome-btn-signature-container{
	margin-left: 120px;
	position: relative
}

.preview-email .welcome-btn-signature-container,
.landing.staffing-off .welcome-btn-signature-container,
.reference-landing .welcome-btn-signature-container{
	margin-left: 0px
}


.welcome-user-title-candidate {
	width: calc(100% - 60px);	
	font-family: Roboto, Arial;
	font-weight: 600 !important;
	line-height: 30px;
	float: left !important;
	position: relative;
}

.landing.staffing-off .welcome-language,
.reference-landing .welcome-language{
	float: right !important;
	position: relative;
	width: 50px;	
	line-height: 30px;
	text-align: right;
	font-size: 16px
}


.welcome-language{
	float: right !important;
	position: relative;
	width: 50px;
	margin-left: 10px;
	line-height: 30px;
	text-align: right;
	font-size: 16px;
	display: flex;
    justify-content: space-between;
    flex-direction: row;
}

.switch-english, .switch-french {color: #2196F3; cursor: pointer}
.switch-english:hover, .switch-french:hover {color: #1058aa; text-decoration: underline}
body.txt-english .switch-english {color: #25282B; cursor: default; text-decoration: none}
body.txt-french .switch-french {color: #25282B; cursor: default; text-decoration: none}
body.txt-french .welcome-language {flex-direction: row-reverse}


.welcome-candidate-text {
	width: 100%;
	font-size: 16px;
	font-family: Roboto, Arial;
	line-height: 28px;
	overflow: visible;
	white-space: nowrap;
	text-align: left;
	float:none;
}

.welcome-candidate-text-wrapped {
	width: 100%;
	font-size: 16px;
	font-family: Roboto, Arial;
	line-height: 28px;
	text-align: left;
}

.landing.staffing-off .welcome-candidate-text-wrapped {
	line-height: 23px;
}

@media (min-width: 740px){
.landing.staffing-off .welcome-candidate-text-wrapped {
	position: absolute;
    width: 370px;
    top: 50%;
    transform: translateY(-50%);
	}
	
}
	
	
	



@media (max-width: 739px){
.landing.staffing-off .welcome-candidate-text-wrapped {
	text-align: center
	}}


.marginTop40 {
	margin-top: 40px !important
}



.welcomeLogoImage {
	display: inline-block;
	width: 100%;
	height: auto;
	text-align: left;
	margin-bottom: 20px
}

.landing-logo,
.landing-logo-user-existing{
    max-height: 110px;
}

.landing.staffing-off .landing-logo,
.landing.staffing-off .landing-logo-user-existing {
	margin-left: 32px;}
	
.landing.staffing-off .landing-logo.cst-logo {
	margin-left: 0px;}	

.reference-landing .welcomeLogoImage,
.landing.staffing-off .welcomeLogoImage,
.candidate-decline .welcomeLogoImage {
	display: inline-block;
	width: 100%;
	height: auto;
	text-align: center;
	margin-bottom: 20px
}

.terefic-center{
	transform: translateX(10px)
}

@media (max-width:739px){
.welcomeLogoImage {
	zoom: 0.8
	}}




.employer-signature {
	font-size: 14px;
	font-family: Roboto, Arial;
	display: block;
	margin: auto;
	position: relative;
	text-align: center;
	line-height: 22px
}

.employer-signature-container {
	text-align: center
}



@media ( min-width:740px ){
.welcome-profile-photo {
	float: left !important;
	position: relative;
	width: 120px;
	margin-right: 20px;
	background: #F2F6FF
}
	.welcome-profile-photo img {
	position: absolute;
	max-width: 120px;
	max-height: 120px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}}

@media ( max-width:739px ){
.welcome-profile-photo {
	float: left !important;
	position: relative;
	width: 120px;
	margin-right: 0px;
	margin-bottom: 15px;
	align-self: center;
	background: #F2F6FF
}
	.welcome-profile-photo img {
	width: 120px;
	height: 120px
}}


.welcome-user-video {
	margin-left: 120px;
	margin-bottom: 25px;
	position: relative;
	width: 676px;
	height: 380px
}


.welcome-user-video .welcome-user-overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: white;
	background-image: url("/resources/images/professional/dashboard/video-overlay.jpg");
}

 .welcome-user-video .welcome-user-overlay:hover {cursor: pointer}

.video-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	opacity: 60%;
	width: 110px;
    height: 110px;
	background-color: #25282B;
	clip-path: circle(47%);
}


.welcome-user-video .welcome-user-overlay:hover .video-circle {
	opacity: 70%;
}


.welcome-user-video .welcome-user-overlay .video-circle:hover {
	clip-path: circle(50%);
	opacity: 80%;
}

.welcome-user-video .welcome-user-overlay .video-circle.mouse-over {
	clip-path: circle(50%);
	opacity: 80%;
}

.video-triangle{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: white;		
	width: 100px;
    height: 100px;
	clip-path: polygon(40% 30%, 70% 50%, 40% 70%);	
}

.welcome-user-video .welcome-user-overlay h3 {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	font-family: Roboto, Arial;
	text-transform: uppercase;
	font-size: 35px;
	text-align: center;
	line-height: 48px;
	font-weight: 400;
}


.welcome-user-video .welcome-user-overlay img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9
}


.largeBtn {
	padding: 15px 19px 13px 19px;
	border-width: 1px;
	border-style: solid;
	border-radius: 100px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	outline: none;
	width: 250px;
	font-family: Roboto, Arial;
	text-align: center;
	text-decoration: none;
	display: block;
	margin: 0 auto 20px auto;
	cursor: pointer
}


.employer-signature-container {
	margin-top: 17px;
	line-height: 22px
}


.btn-custom-color {
	color: #ffffff !important; 
	border: 1px solid #2196F3;
	background: #2196F3;
	-webkit-transition: width 0.25s ease-out;
	-moz-transition: width 0.25s ease-out;
	-ms-transition: width 0.25s ease-out;
	-o-transition: width 0.25s ease-out;
	transition: width 0.25s ease-out
}

.btn-custom-color:hover {
	filter: brightness(108%);
	text-decoration: none;
}

.btn-custom-color:active {
	
	filter: brightness(108%);
	box-shadow: 0 0 0 4pt #C0D3F0
}


.btn-std-color {
	color: #ffffff !important; 
	border: 1px solid #2196F3;
	background: #2196F3;
	-webkit-transition: width 0.25s ease-out;
	-moz-transition: width 0.25s ease-out;
	-ms-transition: width 0.25s ease-out;
	-o-transition: width 0.25s ease-out;
	transition: width 0.25s ease-out
}

.btn-std-blink {
animation: btn-std-blink-animation 1s infinite linear;
}

@keyframes btn-std-blink-animation {
	0% {background: #2080ed; border: 1px solid #2080ed;}
	50% {background: #3ba5f9; border: 1px solid #3ba5f9;}
	100% {background: #2080ed; border: 1px solid #2080ed;}
}


.btn-std-color:hover{
	border: 1px solid #1058aa !Important;
	background: #1058aa !important;
	text-decoration: none
}

.btn-std-color:active {
	border: 1px solid #1058aa !Important;
	background: #1058aa !important;
	text-decoration: none;
	box-shadow: 0 0 0 4pt #C0D3F0
}


.btn-green-color {
	color: #ffffff !important; 
	border: 1px solid #00cc66;
	background: #00cc66;
	-webkit-transition: width 0.25s ease-out;
	-moz-transition: width 0.25s ease-out;
	-ms-transition: width 0.25s ease-out;
	-o-transition: width 0.25s ease-out;
	transition: width 0.25s ease-out
}

.btn-green-color:hover{
	border: 1px solid #00994d !Important;
	background: #00994d !important;
	text-decoration: none
}

.btn-green-color:active {
	border: 1px solid #00994d !Important;
	background: #00994d !important;
	text-decoration: none;
	box-shadow: 0 0 0 4pt #C0D3F0
}


/*//////// WELCOME PAGE FOR REFERENCES ////////*/
.decline-comment{
	font-size: 18px;
	line-height: 24px;
	margin-top: 10px
	}	
	
	

.btn-pointer {
    clip-path: polygon(0px 7px, 30px 7px, 30px 0px, 60px 14px, 30px 28px, 30px 21px, 0px 21px);
    height: 32px;
    width: 70px;
    position: absolute;
	top: 12px;    
    display: inline-block;
    background-color: #fa5efb;
    padding-top: 17px;
    padding-left: 15px;
    box-shadow: 0 6px 4px -4px #8f8f8f;
    opacity: 1;
    transition: 0.5s opacity linear;		
}


.btn-pointer.pointer-left {
	left: 105px;
    animation: pointer-shake 1s infinite linear;
}

.btn-pointer.pointer-right {
	right: 105px;
    animation: pointer-shake-reverse 1s infinite linear;
}

@keyframes pointer-shake {
	0% {transform: translateX(0px); background-color: #fa5efb;}
	50% {transform: translateX(-10px); background-color: #f900fb;}
	100% {transform: translateX(0px); background-color: #fa5efb;}
}

@keyframes pointer-shake-reverse {
	0% {transform: translateX(0px) scaleX(-1); background-color: #fa5efb;}
	50% {transform: translateX(+10px) scaleX(-1); background-color: #f900fb;}
	100% {transform: translateX(0px) scaleX(-1); background-color: #fa5efb;}
}

.btn-pointer-green,
.input-pointer-green {
    clip-path: polygon(0px 7px, 30px 7px, 30px 0px, 60px 14px, 30px 28px, 30px 21px, 0px 21px);
    height: 32px;
    width: 70px;
    position: absolute;
	top: 12px;    
    display: inline-block;
    background-color: #00CC66;
    padding-top: 17px;
    padding-left: 15px;
    opacity: 0;
    transition: 0.6s opacity linear;		
}

.btn-pointer-green.pointer-left,
.input-pointer-green {
	left: 115px;
    background-color: #00CC66;
	opacity: 0;
    transition: 0.6s opacity linear;		
}

.input-pointer-green.input-pointer1 {
	left: -70px;
	top: 40px;
	transform: translateX(-5px)
}

.input-pointer-green.input-pointer2 {
	left: -70px;
	top: 30px;
	transform: translateX(-5px)
}

.btn-pointer-green.pointer-left.active,
.input-pointer-green.active {
    animation: pointer-shake-green 1s infinite linear;
    opacity: 1;
    transition: 0.6s opacity linear;		
    background-color: #00CC66;
}

.btn-pointer-green.pointer-right {
	right: 115px;
    background-color: #00CC66;
    opacity: 0;
    transition: 0.6s opacity linear;		
    transform: scaleX(-1)
}

.btn-pointer-green.pointer-right.active {
    animation: pointer-shake-green-reverse 1s infinite linear;
    opacity: 1;
    transition: 0.6s opacity linear;		
    background-color: #00CC66;
    transform: scaleX(-1)
}

@keyframes pointer-shake-green {
	0% {transform: translateX(0px); background-color: #00CC66;}
	50% {transform: translateX(-10px); background-color: #00e666;}
	100% {transform: translateX(0px); background-color: #00CC66;}
}

@keyframes pointer-shake-green-reverse {
	0% {transform: translateX(0px) scaleX(-1); background-color: #00CC66;}
	50% {transform: translateX(+10px) scaleX(-1); background-color: #00e666;}
	100% {transform: translateX(0px) scaleX(-1); background-color: #00CC66;}
}


@media (max-width:740px) {
.btn-pointer,
.btn-pointer-green {
	display: none
}}	
	
#fileUploadForm{
	text-align: left
}	
.thankyou-question {
	color: #25282B;
    font-size: 18px;
    font-family: Roboto;
    line-height: 24px;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 10px;
    text-align: left
}
		
	
@media ( min-width:740px ){
.reference-landing .welcome-reference-text-wrapped{
	width: 100%;
	font-size: 18px;
	font-family: Roboto, Arial;
	line-height: 28px;
	overflow: visible;
	text-align: left;
	float:none;
	margin-bottom: 6px;
	position: relative;
	top:50%;
	transform: translateY(-50%)
	}
	
.welcome-add-text {
	font-size: 18px;
	font-family: Roboto, Arial;
	line-height: 28px;
	overflow: visible;
	text-align: left;
	float:none;
	margin-bottom: 6px;
}	
}


@media ( max-width:739px ){
.reference-landing .welcome-reference-text-wrapped{
	width: 100%;
	font-size: 18px;
	font-family: Roboto, Arial;
	line-height: 28px;
	overflow: visible;
	text-align: left;
	float:none;
	margin-bottom: 6px;
	text-align: center
	}
}

.thankyou-container-typewriter {
    font-size: 18px;
    font-family: Roboto, Arial;
    line-height: 28px;
    position: relative;
    text-align: left
}

.typewriter-container {
  position: absolute;
  left: 0;
  height: 40px;  
}

.typewriter-container.container1 {top: 18px;}
.typewriter-container.container2 {top: 46px;}
.typewriter-container.container3 {top: 74px;}
.typewriter-container.container5 {top: 4px;}
.typewriter-container.container6 {top: 32px;}
.typewriter-container.container7 {top: 60px;}
.typewriter-container.container8 {top: 88px;}


.typewriter-text1 {
  overflow: hidden; 
  border-right: .15em solid transparent; 
  white-space: nowrap; 
  animation: 
    typing 0.6s steps(40, end),
    blink-caret .6s step-end 1;
  display: inline-block;
  width: 0;
  animation-fill-mode: forwards;
  
}

.typewriter-text2 {
  overflow: hidden; 
  border-right: .15em solid transparent; 
  white-space: nowrap; 
  animation: 
    typing 1.2s steps(40, end),
    blink-caret .6s step-end 2;
  display: inline-block;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  width: 0;
}

.typewriter-text3 {
  overflow: hidden; 
  border-right: .15em solid transparent; 
  white-space: nowrap; 
  animation: 
    typing 0.6s steps(40, end),
    blink-caret .6s step-end 4;
  display: inline-block;
  animation-delay: 1.8s;
  animation-fill-mode: forwards;
  width: 0
}

.typewriter-text4 {
  overflow: hidden; 
  border-right: .15em solid transparent; 
  white-space: nowrap; 
  animation: 
    typing 0.4s steps(40, end),
    blink-caret .6s step-end 1;
  display: inline-block;
  animation-fill-mode: forwards;
  width: 0
}

.typewriter-text5 {
  overflow: hidden; 
  border-right: .15em solid transparent; 
  white-space: nowrap; 
  animation: 
    typing 1.2s steps(40, end),
    blink-caret .6s step-end 2;
  display: inline-block;
  animation-delay: 0.4s;
  animation-fill-mode: forwards;
  width: 0
}

.typewriter-text6 {
  overflow: hidden; 
  border-right: .15em solid transparent; 
  white-space: nowrap; 
  animation: 
    typing 1s steps(40, end),
    blink-caret .6s step-end 4;
  display: inline-block;
  animation-delay: 1.6s;
  animation-fill-mode: forwards;
  width: 0
}


.typewriter-text7 {
  overflow: hidden; 
  border-right: .15em solid transparent; 
  white-space: nowrap; 
  animation: 
    typing 1.2s steps(40, end),
    blink-caret .6s step-end 2;
  display: inline-block;
  animation-delay: 1.8s;
  animation-fill-mode: forwards;
  width: 0
}

.typewriter-text8 {
  overflow: hidden; 
  border-right: .15em solid transparent; 
  white-space: nowrap; 
  animation: 
    typing 1s steps(40, end),
    blink-caret .6s step-end 4;
  display: inline-block;
  animation-delay: 3s;
  animation-fill-mode: forwards;
  width: 0
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

.reference-landing .welcome-photo-text-container{
	width:100%;
	box-sizing: border-box;
    flex-wrap: nowrap;
	position: relative;
	background-color: #F2F6FF;
	box-sizing:border-box;
	min-height: 120px;
	display:flex
}

@media (max-width:739px){
.reference-landing .welcome-photo-text-container{
	flex-direction: column
	}
}

/*///// THANK YOU PAGE /////*/

.thankyou-container-parent {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden
}

.thankyou-container-child {
	position: absolute;
    top: 10vh;
    text-align: center;
    left: calc(50vw - 295px);
    -moz-transition: top 0.4s;
  	-webkit-transition: top 0.4s;
  	transition: top 0.4s;
}

.typ-special-container{
	position: absolute
}


#clientsSlider{
	height: 180px;
	width: 3840px;
	position: absolute;
	background-color:transparent;
	background-image:url('/resources/images/professional/dashboard/Slider-Logos.svg');
	background-repeat:repeat-x;
	background-position:0 100%;
}

#clientsSliderThumbs{
	height: 180px;
	width: 3840px;
	position: absolute;
	background-color:transparent;
	background-image:url('/resources/images/professional/dashboard/Slider-Thumbs.svg');
	background-repeat:repeat-x;
	background-position:0 100%;
}

#clientsSliderRobots{
	height: 180px;
	width: 3840px;
	position: absolute;
	background-color:transparent;
	background-image:url('/resources/images/professional/dashboard/Slider-Robots.svg');
	background-repeat:repeat-x;
	background-position:0 100%;
}

#clientsSliderRobots2{
	height: 180px;
	width: 3840px;
	position: absolute;
	background-color:transparent;
	background-image:url('/resources/images/professional/dashboard/Slider-Robots2.svg');
	background-repeat:repeat-x;
	background-position:0 100%;
	margin-top: 10px
}

#clientsSliderRobots3{
	height: 180px;
	width: 3840px;
	position: absolute;
	background-color:transparent;
	background-image:url('/resources/images/professional/dashboard/Slider-Robots3.svg');
	background-repeat:repeat-x;
	background-position:0 100%;
	margin-top: 10px
}

.app-link.thankyou-link {
	display: block;
	margin: 0 auto 20px auto;
	position: relative;
	text-align: center;
	font-size: 12px
}

#job-opportunities-opt-in.largeBtn {
	margin-bottom: 10px
}

.thankyou-btn-container .largeBtn {
	height: 50px
}

.thankyou-btn-signature-container {
	position: relative
}

@media (min-width:740px){
	.clientsSlider-mask{
	height: 200px;
	width: 100vw;
	overflow: hidden;
	position: absolute;
	transform: translateX(calc(-50vw + 295px));
	margin-top: 40px
}
.thankyou-btn-container {
	display: inline-flex;
	width: 480px;
	justify-content: space-around;
}

.thankyou-btn-container.thankyou-single-btn {
display: block;
width: 100%;
position: relative;
}
}


/*//// TAG-IT // JOB TITLES // LOCATIONS // SKILLS ///*/


ul.tagit {
	max-height: 126px;
	overflow-y: auto;
	width: 590px;
    box-sizing: border-box;
    margin: 0 0 40px 0;
    margin-left: 0px;
	padding: 1px 4px;
	min-height: 28px;
	background: #fff;
	border-style: solid;
	border-width: 1px;
	border-color: #B4C2CD;
	border-radius: 4px;
	float:left;
	cursor: pointer
}

ul.tagit.submitted,
#talent-request-input.submitted,
#job-opportunities-input.submitted,
#thank-you-form .thankyou-Linkedin-input.submitted {
	animation: blink-submitted-animation 1s 1; 	
}

@keyframes blink-submitted-animation {
    0% {background-color: white}
    25% {background-color: #d8eaff}
    100% {background-color: white}
}

ul.tagit:hover,
#talent-request-input:hover,
#job-opportunities-input:hover,
#thank-you-form .thankyou-Linkedin-input:hover {
	background-color: #F2F6FF
}


ul.tagit li {
	float: left;
	margin: 1px 5px 1px 0
}

/*TEXT - Add a title*/
ul.tagit input[type="text"] {
	box-sizing: border-box;
	position: relative;
    color: #666;
    font-size: 17px;
    font-family: Roboto;
    line-height: 30px;
    font-weight: 400;
	margin: 0;
	padding: 1px 0;
	box-shadow: none;
	outline: none;
	border: none;
	background-color: transparent;
	width: 230px
}

ul.tagit li.tagit-new {
	padding: 2px 4px 2px 2px;
	float: left;
	margin: 1px 5px 1px 0
}


/*TEXT - Data entered*/
ul.tagit li.tagit-choice .tagit-label:not(a) {
	position: relative;
	color: #24549E;
	font-family: Roboto;
    font-weight: 400;
    font-size: 17px;
	line-height: 30px;
}

ul.tagit li.tagit-choice-editable {
	padding: 2px 21px 2px 5px !important
}


ul.tagit li.tagit-choice {
	border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 1px solid #CAD8F3;
	background: none;
	background-color: #DEE7F8;
	font-weight: normal;
	box-sizing: border-box;
	height: 36px;
	position: relative;
	list-style: none
}

/*CLOSE ICON */
ul.tagit li.tagit-choice .tagit-close .text-icon {
	display: inline;
	font-family: Roboto;
	font-size: 17px;
	line-height: 30px;
	color: #24549E;
	font-weight: bold
}

ul.tagit li.tagit-choice .tagit-close {
	cursor: pointer;
	position: absolute;
	line-height: 30px;
	right: .4em;
	z-index: 10
}


#thank-you-form .thankyou-Linkedin-input,
#talent-request-input,
#job-opportunities-input {
	display: block;
	width: 590px;
	box-sizing: border-box;
	padding: 1px 4px 1px 6px;
	border-radius: 4px;
	border: 1px solid #B4C2CD;
	margin-bottom: 40px;
	margin-left: 0px;
	background: #FFF;
	color: #666;
	font-family: Roboto;
	line-height: 30px;
	font-weight: 400;
	font-size: 17px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	cursor: initial
}

#thank-you-form .thankyou-Linkedin-input{
	height: 42px;
}

.tagit-autocomplete.ui-menu {
	max-width: 300px
}

.thankyou-resume-input {
	margin-bottom: 40px;
	width: 190px
}


@media (min-width:740px){
.thankyou-btn-container .largeBtn{
	width: 220px
	}}

@media (max-width:739px){
	.largeBtn{width: 90vw;}
	.thankyou-container-child {left: 0; width: 100vw}
	#thank-you-form,
	#talent-request-form {
	width: 90vw;
    position: relative;
    margin: auto;
    }	
    
    ul.tagit,
	#thank-you-form .thankyou-Linkedin-input,
	#talent-request-input,
	#job-opportunities-input {
	width: 90vw; 	
	}    
	
	}


.thank-you-image {
	content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 250px;
    height: 1080px;
    display: block;
    transform: translateY(-50%);
}

@media (max-width: 1240px) {
	.thank-you-image {	
	display: none;
	}
}

.thank-you-image.fuse {    
    background: url("/resources/images/cities/LibertyBanner.jpg") no-repeat;
	top: 0%;
    transform: translateY(-0%);
}

.thank-you-image.resource1 {    
    background: url("/resources/images/cities/Resource1AllCities.png") no-repeat;
	top: 50%;
    transform: translateY(-50%);
}

.thank-you-image.city594 {    
    background: url("/resources/images/cities/594Baltimore.jpg") no-repeat;
	top: 100%;
    transform: translateY(-100%);
    filter: brightness(1);
}



.thank-you-image.city649 {		    
    background: url("/resources/images/cities/649BayArea.jpg") no-repeat;
  	top: 0%;
    transform: translateY(-0%);  
}

.thank-you-image.city617 {    
    background: url("/resources/images/cities/617Cleveland.jpg") no-repeat;
	top: 0%;
    transform: translateY(-0%);
    filter: brightness(1.1);
}


.thank-you-image.city624 {    
    background: url("/resources/images/cities/624Milwaukee.jpg") no-repeat;
	top: 25%;
    transform: translateY(-25%);
}

.thank-you-image.city630 {    
    background: url("/resources/images/cities/630Boise.jpg") no-repeat;
	top: 50%;
    transform: translateY(-50%);
}


.thank-you-image.city593 {    
    background: url("/resources/images/cities/593WashingtonDC.jpg") no-repeat;
	top: 50%;
    transform: translateY(-50%);
    filter: brightness(1.1);
}

.thank-you-image.city638 {             
    background: url("/resources/images/cities/638Houston.jpg") no-repeat;
	top: 70%;
    transform: translateY(-70%);
    filter: contrast(1.5);
}

.thank-you-image.city653 {
    background: url("/resources/images/cities/653Seattle.jpg") no-repeat;
	top: 10%;
    transform: translateY(-10%);
}

.thank-you-image.city644 {    
    background: url("/resources/images/cities/644Phoenix.jpg") no-repeat;
	top: 25%;
    transform: translateY(-25%);
    filter: brightness(1.05);    
}

.thank-you-image.city652 {    
    background: url("/resources/images/cities/652Portland.jpg") no-repeat;
	top: 25%;
    transform: translateY(-25%);
    filter: contrast(1.2);
}

.thank-you-image.city602 {   
    background: url("/resources/images/cities/602Jacksonville.jpg") no-repeat;
	top: 50%;
    transform: translateY(-50%);
    filter: brightness(1);
}

.thank-you-image.city615 {   
    background: url("/resources/images/cities/615Louisville.jpg") no-repeat;
	top: 40%;
    transform: translateY(-40%);
    filter: brightness(1);
}


.thank-you-image.city616 {   
    background: url("/resources/images/cities/616Columbus.jpg") no-repeat;
	top: 40%;
    transform: translateY(-40%);
    filter: brightness(1);
}

.thank-you-image.city641 {   
    background: url("/resources/images/cities/641Denver.jpg") no-repeat;
	top: 50%;
    transform: translateY(-50%);
    filter: brightness(1);
}


.thank-you-image.city672 {    
    background: url("/resources/images/cities/672Toronto.jpg") no-repeat;
	top: 90%;
    transform: translateY(-90%);
}

.thank-you-image.city674 {    
    background: url("/resources/images/cities/674Montreal.jpg") no-repeat;
	top: 40%;
    transform: translateY(-40%);
}

.thank-you-image.city584 {   
    background: url("/resources/images/cities/584Burlington.jpg") no-repeat;
	top: 40%;
    transform: translateY(-40%);
    filter: brightness(1);
}

.thank-you-image.city587 {   
    background: url("/resources/images/cities/587Buffalo.jpg") no-repeat;
	top: 40%;
    transform: translateY(-40%);
    filter: brightness(1);
}

.thank-you-image.city590 {    
    background: url("/resources/images/cities/590NYC.jpg") no-repeat;
	top: 20%;
    transform: translateY(-20%);
    filter: brightness(1);
}

.thank-you-image.city613 {    
    background: url("/resources/images/cities/613NewOrleans.jpg") no-repeat;
	top: 50%;
    transform: translateY(-50%);
    filter: brightness(1);
}

.thank-you-image.city647,
.thank-you-image.city662 {    
    background: url("/resources/images/cities/662LosAngeles.jpg") no-repeat;
	top: 10%;
    transform: translateY(-10%);
    filter: brightness(1);
}

.thank-you-image.city592 {    
    background: url("/resources/images/cities/592PhiladelphiaBest.jpg") no-repeat;
	top: 10%;
    transform: translateY(-10%);
    filter: brightness(1.1);
}

.thank-you-image.city595 {   
    background: url("/resources/images/cities/595RichmondSun.jpg") no-repeat;
	top: 50%;
    transform: translateY(-50%);
    filter: brightness(1);
}


.thank-you-image.city627 {    
    background: url("/resources/images/cities/627Minneapolis.jpg") no-repeat;
	top: 100%;
    transform: translateY(-100%);
    filter: contrast(1.5);
}

.thank-you-image.city637 {	
    background: url("/resources/images/cities/637Dallas.jpg") no-repeat;
	top: 50%;
    transform: translateY(-50%);
    filter: contrast(1.1);
}

.thank-you-image.city639 {    
    background: url("/resources/images/cities/639SanAntonio.jpg") no-repeat;
	top: 20%;
    transform: translateY(-20%);
    filter: brightness(1.1);
}

.thank-you-image.city640 {   
    background: url("/resources/images/cities/640AustinBridge.jpg") no-repeat;
	top: 100%;
    transform: translateY(-100%);
    filter: brightness(1.2);

}

.thank-you-image.city644 {    
    background: url("/resources/images/cities/644Phoenix.jpg") no-repeat;
	top: 10%;
    transform: translateY(-10%);
    filter: contrast(1);
}

.thank-you-image.city581 {    
    background: url("/resources/images/cities/581Boston.jpg") no-repeat;
	top: 0%;
    transform: translateY(-0%);
    filter: brightness(1.1);
}

.thank-you-image.city650,
.thank-you-image.city654,
.thank-you-image.city659,
.thank-you-image.city663 {    
    background: url("/resources/images/cities/654Irvine.jpg") no-repeat;
	top: 60%;
    transform: translateY(-60%);
    filter: brightness(1.3) contrast(1.2);
}

.thank-you-image.city651 {    
    background: url("/resources/images/cities/651Sacramento.jpg") no-repeat;
	top: 20%;
    transform: translateY(-20%);
    filter: brightness(1);
}

.thank-you-image.city600 {    
    background: url("/resources/images/cities/600Atlanta.jpg") no-repeat;
	top: 20%;
    transform: translateY(-20%);
    filter: brightness(1.1);
}

.thank-you-image.city603 {    
    background: url("/resources/images/cities/603Orlando.jpg") no-repeat;
	top: 80%;
    transform: translateY(-80%);
    filter: brightness(1.1);
}


.thank-you-image.city607 {    
    background: url("/resources/images/cities/607Tampa.jpg") no-repeat;
	top: 20%;
    transform: translateY(-20%);
    filter: brightness(1.1);
}

.thank-you-image.city610 {    
    background: url("/resources/images/cities/610Nashville.jpg") no-repeat;
	top: 50%;
    transform: translateY(-50%);
    filter: brightness(1.1);
}

.thank-you-image.city611 {    
    background: url("/resources/images/cities/611Memphis.jpg") no-repeat;
	top: 50%;
    transform: translateY(-50%);
    filter: brightness(1.1);
}

.thank-you-image.city618 {    
    background: url("/resources/images/cities/618Cincinnati.jpg") no-repeat;
	top: 60%;
    transform: translateY(-60%);
    filter: brightness(1.1);
}

.thank-you-image.city621 {    
    background: url("/resources/images/cities/621Detroit.jpg") no-repeat;
	top: 20%;
    transform: translateY(-20%);
    filter: brightness(1.1);
}


.thank-you-image.city631 {    
    background: url("/resources/images/cities/631StLouis.jpg") no-repeat;
	top: 0%;
    transform: translateY(-0%);
    filter: brightness(1.1);
}

.thank-you-image.city635 {    
    background: url("/resources/images/cities/635OklahomaCity.jpg") no-repeat;
	top: 0%;
    transform: translateY(-0%);
    filter: brightness(1.1);
}

.thank-you-image.city646 {    
    background: url("/resources/images/cities/646LasVegas.jpg") no-repeat;
	top: 30%;
    transform: translateY(-30%);
    filter: brightness(1.1);
}

.thank-you-image.city660 {    
    background: url("/resources/images/cities/660SanJose.jpg") no-repeat;
	top: 50%;
    transform: translateY(-50%);
    filter: brightness(1.1);
}

.thank-you-image.city667 {    
    background: url("/resources/images/cities/667Vancouver.jpg") no-repeat;
	top: 50%;
    transform: translateY(-50%);
    filter: brightness(1.1);
}


.thank-you-image.city598 {        
    background: url("/resources/images/cities/598Charlotte.jpg") no-repeat;
	top: 50%;
    transform: translateY(-50%);
    filter: brightness(1.2);
}

.thank-you-image.city648 {    
    background: url("/resources/images/cities/648SanDiego.jpg") no-repeat;
	top: 0%;
    transform: translateY(-0%);
    filter: brightness(1);
}

.thank-you-image.city619 {    
    background: url("/resources/images/cities/619Indianapolis.jpg") no-repeat;
	top: 50%;
    transform: translateY(-50%);
    filter: brightness(1.1) contrast(1.2);
}

.thank-you-image.city591 {               
    background: url("/resources/images/cities/591Pittsburgh.jpg") no-repeat;
	top: 0%;
    transform: translateY(-0%);
    filter: contrast(1.15) brightness(1.1);
}

.thank-you-image.city597 {    
    background: url("/resources/images/cities/597Raleigh.jpg") no-repeat;
	top: 30%;
    transform: translateY(-30%);
    filter: contrast(1.15);
}

.thank-you-image.city633 {    
    background: url("/resources/images/cities/633KansasCity.jpg") no-repeat;
	top: 70%;
    transform: translateY(-70%);
    filter: contrast(1.15);
}

.thank-you-image.city606 {    
    background: url("/resources/images/cities/606Miami.jpg") no-repeat;
	top: 100%;
    transform: translateY(-100%);
    filter: contrast(1);
}

.thank-you-image.city620 {
    background: url("/resources/images/cities/620Chicago.jpg") no-repeat;
	top: 10%;
    transform: translateY(-10%);
    filter: brightness(1.2);
}

.thank-you-image.city667 {
    background: url("/resources/images/cities/667Vancouver.jpg") no-repeat;
	top: 100%;
    transform: translateY(-100%);
    filter: brightness(1);
}


/*////// OVERLAY //////*/


#overlay-onlineReport,
#overlay-share,
#overlay {
  position: fixed;
  width: 100vw;
  top: 0;
  left: 0;
  right: 0;
  bottom: 100%;
  opacity: 0%;
  background-color: #18347B;
  z-index: 20;
  cursor: pointer;
  -moz-transition: opacity 0.4s;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}


#overlay-background {
  position: fixed;
  width: 100vw;
  top: 0;
  left: 0;
  bottom: 100%;
  opacity: 0%;
  background-color: #18347B;
  z-index: 20;
  cursor: pointer;
}

#overlay-background.overlay-on,
#confirm-adverseAction.overlay-on {
	bottom: 0%; 
	opacity: 35%;
  -moz-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}	


#overlay-background.overlay-off,
#confirm-adverseAction.overlay-off {
	bottom: 100%; 
	opacity: 0%;
}

#trash-reference, #copy-password {display: none}

.overlay-box{
	background-color: white;
	position:fixed;
	max-width: 640px;
	width: 90vw;
	margin: 0 auto;
	top: 15%;
	opacity: 100%;
	z-index: 30;
	left: calc(50vw - 320px);
	border-radius: 8px;
}

#access-granted, #access-denied, #access-revoked, #access-owner {display: none; opacity:0}	

.overlay-header{
	position: relative;
	top: 0px;
	left: 0px;
	border-radius: 8px 8px 0 0
}

.overlay-header.yellow-background{
	background-color: #FFD600;	
}

.overlay-header.orange-background{
	background-color: #fea701;	
}

.overlay-header.green-background{
	background-color: #66FFA6;	
}

.overlay-header.red-background{
	background-color: #F00;
}

.overlay-header h3{
	padding: 12px 0 12px 20px;
	font-size: 20px;
	font-weight: 500;
	display: inline-block
}

.overlay-header.red-background h3,
.overlay-header.orange-background h3 {
	color:#FFF
}

.overlay-header.yellow-background h3{
	color:#25282B
}

.overlay-bodytext {
	font-family: Roboto;
	color: #25282B;	
    font-size: 16px;
    line-height: 22px;
	font-weight: normal;
	text-align: center	
}

#closeacc-overlay .overlay-bodytext {
	text-align: left;
	margin-left: 20px		
}

@media (max-width:739px){
	#copy-password {display:none}
	#overlay-password {display:none}
	.overlay-box {
	top: 0;
    left: 0;
    border-radius: 0;
    width: 100vw;
    height: 100vh;
    max-width: 740px
	}
	.overlay-header {
	border-radius: 0;
	}
}

.icon-close16px{
	position: relative;
	float: right;
	margin-right: 20px;
	width: 16px;
	height: 16px;
	padding: 6px;
	margin-top: 11px;
	background-color: transparent;
	cursor: pointer;
	border-radius: 6px
}

.yellow-background .icon-close16px:hover{
	background-color: #ffc933
}

.red-background .icon-close16px:hover{
	background-color: #cc0000
}

.yellow-background .icon-close16px:active{
	background-color: #ffbb00
}

.red-background .icon-close16px:active{
	background-color: #b30000
}

.overlay-title-container{
	position: relative;
	text-align: center;
	margin: 28px 0 19px 0;
	display: flex;
	height: 26px;
}
.swipe-image{
	width: 26px;
	height: 26px;
	position: absolute;
	background: url("/resources/images/professional/dashboard/Icon-YellowCheck.svg") no-repeat 100%;
	left: calc(50% - 87px)
}

.swipe-image-green{
	width: 26px;
	height: 26px;
	position: absolute;
	background: url("/resources/images/professional/dashboard/Icon-GreenCheck.svg") no-repeat 100%;
	left: calc(50% - 87px);
}


#employers-swipe-image,
.edit-contacts-swipe-image {
	width: 26px;
	height: 26px;
	display: none;
	position: absolute;
	background: url("/resources/images/professional/dashboard/Icon-GreenCheck.svg") no-repeat 100%;
	animation: blink-text-animation 2s 1; 	
}

.row .edit-contacts-swipe-image {
	width: 22px;
	height: 22px;
	right: -8px;
	z-index: 10
}

.edit-contacts-swipe-mask {
	width: 0px;
	height: 26px;
	background-color: white;
	position: absolute;
	display: none;
	animation: swipe-left 0.9s;
	transform: translateX(28px);
	right: 6px;
	z-index: 10;
}

.swipe-image-red{
	width: 32px;
	height: 32px;
	position: absolute;
	background: url("/resources/images/professional/dashboard/Icon_Warning.svg") no-repeat 100%;
	left: calc(50% - 91px);
    top: -4px;	
}

.swipe-image-orange{
	width: 28px;
	height: 28px;
	position: absolute;
	background: url("/resources/images/professional/dashboard/Icon-lock.svg") no-repeat 100%;
	left: calc(50% - 91px);
    top: -4px;	
}

.swipe-mask{
	width: 0px;
	height: 26px;
	background-color: #FFF;
	position: absolute;
	left: calc(50% - 87px);
	animation: swipe-left 0.9s;
	transform: translateX(28px);
}

#employers-swipe-mask{
	width: 0px;
	height: 26px;
	background-color: #f2f7ff;
	position: absolute;
	display: none;
	animation: swipe-left 0.9s;
	transform: translateX(28px);
}

@keyframes swipe-left {
	from {width: 28px;transform: translateX(0px)}
	to {width: 0px;transform: translateX(28px)}
}
	
.overlay-title {
	font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    color: #25282B;	
}

#editemail-overlay .overlay-title,
#changepswd-overlay .overlay-title,
#closeacc-overlay .overlay-title {
	margin: 28px 0px 20px 20px
}

#access-granted .overlay-title, 
#access-owner .overlay-title,
#access-denied .overlay-title,
#access-revoked .overlay-title,
#copy-password .overlay-title {
	position: absolute;
	left: calc(50% - 58px)
}

#share-with-recruiter .overlay-title,
#trash-reference .overlay-title {
	position: relative;
	margin: auto
}


.overlay-row{
	display: block;
	margin-left: 20px;
	margin-bottom: 5px
}

.overlay-box textarea{
	padding-top: 21px;
	margin-left: 20px;
	font-size: 16px;
	line-height: 21px;
	height: 105px;
	max-width: 600px;
	width: calc(90vw - 40px);
	resize: none;
 	overflow:hidden	
}


.overlay-separation-line{
	border-bottom: 1px #B4C2CD solid;
	position: relative;
	margin: 30px 0 15px 0
}

.overlay-LG-btn,
.overlay-LG-btn:visited,
.overlay-btn,
.overlay-btn:visited{
	width: 100px;
	height: 40px;
	border-radius: 50px;
	border: none;
	position: relative;
	float: right;
	margin-right: 20px;
	font-size: 16px;
    line-height: 20px;
	text-align: center;
	margin-bottom: 15px;
	cursor: pointer;
	outline: none;
	font-weight: 500
}

.overlay-btn.closeacc-btn {
	width: 150px;	
}

@media (min-width:740px){
.overlay-LG-btn,
.overlay-LG-btn:visited {
	width: 120px;
	}}

.overlay-LG-btn.white-background,
.overlay-LG-btn.white-background:visited,
.overlay-btn.white-background,
.overlay-btn.white-background:visited{
	border: 1px #B4C2CD solid;
	background-color: transparent;
	color: #516675;
	margin-right: 10px
}

@media (max-width:739px) {
	.overlay-LG-btn,
	.overlay-LG-btn:visited,
	.overlay-btn,
	.overlay-btn.closeacc-btn,
	.overlay-btn:visited,
	.overlay-btn.white-background{
	width: 44%;
	margin-right: 4%;
	margin-left: 0px;
	}
	#access-granted .overlay-btn,
	#access-denied .overlay-btn,
	#access-owner .overlay-btn,
	#access-revoked .overlay-btn,	
	#copy-password .overlay-btn {
	width: calc(90vw - 40px);
	margin-left: 20px !important;
	margin-right: 20px !important;
	max-width: 600px	
	}
	
}

.overlay-btn.yellow-background,
.overlay-btn.yellow-background:visited{
		background-color: #FFD600;
}

.overlay-btn.orange-background,
.overlay-btn.orange-background:visited{
		background-color: #fea701;
		color: #FFF
}

.overlay-btn.green-background,
.overlay-btn.green-background:visited{
		background-color: #66FFA6;
}

.overlay-LG-btn.red-background,
.overlay-btn.red-background,
.overlay-btn.red-background:visited {
	background-color: #F00;
	color: #FFF
}

.overlay-btn.yellow-background:hover{
	background-color: #ffc933;
}

.overlay-btn.orange-background:hover{
	background-color: #f09d00;
}

.overlay-btn.green-background:hover{
		background-color: #2cf981;
}

.overlay-btn.yellow-background:active{
	background-color: #ffc933;
	box-shadow: 0 0 0 4pt #C0D3F0;
	outline: none
}

.overlay-LG-btn.red-background:hover,
.overlay-btn.red-background:hover{
	background-color: #cc0000;
	color: #FFF
}

.overlay-LG-btn.red-background:active,
.overlay-btn.red-background:active{
	background-color: #cc0000;
	box-shadow: 0 0 0 4pt #C0D3F0;
	outline: none;
	color: #FFF
}

.overlay-LG-btn.white-background:hover,
.overlay-btn.white-background:hover{
	background-color: #F8FAFE;
}

.overlay-LG-btn.white-background:active,
.overlay-btn.white-background:active{
	background-color: #F8FAFE;
	box-shadow: 0 0 0 4pt #C0D3F0;
	outline: none;
}


/*////// OVERLAY OPEN FOR ONLINE REPORT //////*/

#overlay-onlineReport.OnlineReport-open {
	display: block;
	opacity: 0.35;
	bottom: 0%;
	cursor: default
}

#access-granted.OnlineReport-open {
	opacity: 100%;
	display: block
}


/*//// MOBILE FRIENDLY ///*/
.combo-fields {
		display: inline-flex;
		align-items: center;
	}

@media (min-width: 740px) {
	#contactInformation {
	margin-bottom: 40px
}
}


@media (max-width: 739px) {
form .row {
    width: calc(100vw - 40px);
	display: block;
	height: 70px
}

form .row-subject {
	height: 70px
}
	
form .row-message {
	display: block;
	}	
	
form .row .combobox {
		display: inline-flex
	}	

form label {
	font-size: 16px;
	display:block;
	margin-bottom: 4px;
	text-align: left;
	width: 100%
}

.form-container {
	display: block;
	width: calc(100vw - 40px);
    flex-wrap: wrap;
    margin-bottom: 30px;
	}
	
.form-input-box,	
textarea,	
form input[type="text"], 
form input[type="password"],
select,
#subject {
    width: calc(100vw - 56px);
/*	margin-bottom: 5px; Was creating glitch for edit-reference*/
	margin-left: 0px;
}


.overlay-box form .row {width: 100vw;}
.overlay-box .form-input-box {width: calc(100vw - 56px); margin-left: 20px;}

.row .combo-fields .state-select {
    width: calc(100vw - 161px);
    margin-left: 25px;
} 
	
form .row u {
	transform: translateY(3px)	
	}

form .row.u-country u {
	transform: translateY(8px)	
	}	
	
form .row .combo-fields u {
	transform: translateY(-2px)
}	
		
#typeStateId,
#typeStateId .inputNewLookSelectV2 {
	width: calc(100vw - 146px);
	}	
	

#btn-cancel.btn-fixed, 
#btn-ask-reference,	
#btn-edit-reference,
#btn-email-references,
#btn-grant-access {
	width: calc(50vw - 25px);
	margin: 30px 0 0 0
	}	
	
.floatRight	{
	float: none;
	justify-content: space-between;
	display: inline-flex;
	width: 100%
	}
	
.form-container {
	max-width: 100%}
	
}


/*///// ADD NEW REFERENCE /////*/

.separation-line {
	border-bottom: 1px #B4C2CD solid;
	margin: 30px 0;
}


@media (min-width:740px){
.form-email-container .floatRight {
	margin-right: 8px
	}}


.form-recipient-text {	
	margin-left: 25px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
	padding: 10px 0;
    line-height: 20px;
    color: #25282B;
	display: inline-block;
	}

@media (min-width:740px){
form .row-message u, 
form label.textarea-label {
	transform: translateY(10px);
	vertical-align: top
	}
}

@media (max-width:739px){
	form .row-message u {
		float: right;
		transform: translateY(10px)
	}
	.form-recipient-text {margin-left: 0}
}

#noBusinessCardNotification {
	width: 100%;
	text-align: right;
	display: block;
	transform: translateX(-14px);
	margin-bottom: 15px
}

@media (max-width:739px){
	#noBusinessCardNotification {
	text-align: center	
	}
}

.notificationText {
	font-family: Roboto;
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	line-height: 22px;
	color: #F00;
}

a .notificationTitle {
	font-family: Roboto;
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	line-height: 22px;
	color: #2196F3;
}

a .notificationTitle:hover {
	color: #1058aa;
	text-decoration: underline
}

/* TEXTAREA AUTO RESIZE STYLES BEGIN */
/* TEXTAREA AUTO RESIZE STYLES BEGIN */
/* https://www.impressivewebs.com/textarea-auto-resize/
The .hiddendiv styles are added with JS.
You can remove the JS lines and use CSS instead*/

.hiddendiv {
  display: none;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* the styles for 'txta' are applied to both the textarea and the hidden clone */
/* these must be the same for both */

.txta {
  min-height: 251px;
  font-family: Roboto;
  font-size: 15px;
  overflow: hidden;
  line-height: 21px;
  color: #666;
  padding: 10px 8px 0px 8px;
  resize: none;
	}


@media (min-width:740px){
	.txta, #subject {width: calc(100% - 200px); max-width: 640px;}
	.form-email-container label.app-checkbox-container {width: calc(100% - 220px); max-width: 640px;}
}

@media (max-width:739px){
	.txta {width: calc(100vw - 56px)}
}

/* TEXTAREA AUTO RESIZE STYLES END */

.form-email-container {
	max-width: 831px
}

@media (max-width:739px){
.vertical-reorder{display: flex; flex-direction: column-reverse; padding: 20px 0px }
.overlay-btn.three-mobile-btns {width: calc(100vw - 30px); margin-left:15px}	
.overlay-LG-btn.three-mobile-btns {width: calc(100vw - 30px); margin-left:15px}	
.form-email-container label.app-checkbox-container  {display: none}	
}

@media (min-width:740px){
.form-email-container label.app-checkbox-container,
.app-checkbox-container{
	display: inline-block;
    position: relative;
    padding-left: 26px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: Roboto;
    font-size: 16px;
	text-align: left;
	margin-left: 25px;
	margin-bottom: 29px
	}}

/* CUSTOM CHECKBOX */
.app-checkbox-checkmark {
	position: absolute;
  	top: 1px;
  	left: 0;
  	height: 16px;
  	width: 16px;
  	border-radius: 4px;
	border: 1px #B2C2CD solid;
	transform:translateY(-1px);
	background-color: white
}

.app-checkbox-container:active input ~ .app-checkbox-checkmark{
  	border: 1px #2196F3 solid;
	box-shadow: 0 0 0 2px #C0D3F0;
}

/* When the checkbox is checked, add a blue background */
.app-checkbox-container input:checked ~ .app-checkbox-checkmark{
  	background-color: #2196F3;
	border: 1px #2196F3 solid	
}

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

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

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

/* Hide the browser's default radio button */
.app-checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/*/// EMAIL PREVIEW ///*/
@media ( min-width: 740px) {
	.email-preview-logo {
		height: 55px}
}

.preview-email {
	max-width: 990px;
	margin: auto
}

.preview-email .page-top-margin{
	height: 45px
}

.preview-body-parent {
	width: 100%;
	min-height: 500px;
	background-color: #F8FAFE;
	border: 1px #B4C2CD solid;
	margin-bottom: 120px
}

.preview-body-child {
	width: 600px;
	margin: 0 auto;
	height: 100%;
	min-height: 500px;
	background-color: #FFF;
	padding-bottom: 30px
}

.email-preview-logo {
	margin: 0px auto;
	padding: 20px 0;
	display: block
}

.preview-body-text {
	white-space: pre-wrap;
	font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 21px;
    padding: 0px 30px;
    color: #25282B;
	margin: 0px 0px 20px 0px
}

.preview-email .largeBtn{
	width: 200px;
	padding-left: 19px;
	padding-right: 19px;
	padding-top: 11px;
	padding-bottom: 9px;
	border-radius: 5px;	
}

@media (max-width:739px){
.preview-email #all-notification-boxes-container {
	margin-bottom: 30px
	}}


.preview-email .notification-box {
	width: 100%;
	max-width: 990px;
	background: #E3F4FB;
	border: 2px solid #C2E7F6;
	box-sizing: border-box;
	border-radius: 4px;
	display: flex;
    flex-wrap: nowrap;
	position: absolute;
	margin-bottom: 20px;
	z-index: 0;
}

.preview-email .notification-box-hidden {
	width: 100%;
	background: #E3F4FB;
	border: 2px solid #C2E7F6;
	box-sizing: border-box;
	border-radius: 4px;
	display: flex;
    flex-wrap: nowrap;
	position: relative;
	margin-bottom: 20px;
	visibility: hidden;
	z-index: 0
}

@media (max-width:1000px){
	.ep-container {
	box-sizing: border-box;
    padding: 0px 20px;	
	}
	.preview-email .notification-box {
	width: calc(100vw - 40px)	
	}
}

@media (max-width:739px){
	.email-preview-logo {
		height: 40px
	}
	.preview-body-child {width: 80vw}
}

.preview-email .btn-std-color:active,
.preview-email .btn-default:active {
	box-shadow: 0 0 0 3pt #C0D3F0
}

/*/// ACCOUNT SETTING ///*/


.acc-aboutyou {
	display: inline-flex;
	margin-bottom: 15px}

.acc-user-image {
	position: relative;
	height: 100px;
	width: 100px
}


.acc-body-text {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    color: #25282B;
	display: block;
	margin: 0 0 15px 0
}

.acc-aboutyou .acc-body-text {
	margin: 0px 0px 0px 20px;
}

.acc-hyperlinks-container {display: block}

.acc-link {
    display: inline-block;
    font-family: Roboto;
    font-style: normal;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #2196F3;
    text-decoration: none;
    letter-spacing: 1.25px;
}

.acc-link.disabled,
.acc-link.disabled:hover,
.acc-link.disabled:active {
	color: #B4C2CD;
	cursor: default
}

.acc-link-first{
	width: 120px
}

.acc-link:hover {
    color: #1058aa;
    text-decoration: none;
}

.acc-separation-line {
	border-bottom: 1px #B4C2CD solid;
	margin: 20px 0 30px 0;
}

.app-bottom-footer {
	padding-top: 120px
}

.acc-credits-label,
.acc-credits-left {display: inline}

.acc-credits-left{
    padding-top: 5px;
    padding-bottom: 0px;
    padding-left: 7px;
    padding-right: 7px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.87);
    mix-blend-mode: normal;
    display: inline-block;
    transform: translateY(-1px);
    margin-left: 4px;
}

.row.login-email-row {
	margin: 30px 0px 11px 0px
}

.acc-overlay-form label {
	text-align: left;
	width: 130px;
	margin-left: 20px;
}

#changepswd-overlay .flashMessage,
#editemail-overlay .flashMessage {
	font-family: Roboto;
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	line-height: 22px;
	display: none;
	overflow: hidden;
	color: #f00;
	margin: 0 0 0 170px;
	text-align: left;
}

.account-settings form input[type="text"],
.account-settings form input[type="password"] {
	width: calc(90vw - 56px);
	margin-left: 20px;
	margin-right: 0px
}

@media (min-width:710px){
.account-settings form input[type="text"],
.account-settings form input[type="password"]  {
	max-width: 320px;
	}}

#changepswd-overlay .acc-link {
	position: absolute;
	margin: 10px 0px 0px 20px
}


/*///// ACCOUNT SETTINGS EDIT PROFILE /////*/

.app-editProfile-container {
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
	}


@media (max-width: 739px) {
	.app-editProfile-container {	
	width: calc(100vw - 40px);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-bottom: 30px;
	}
}
	
.app-editProfile-container form label {text-align: left} 
	
.app-link {
	display: inline-block;
	font-family: Roboto;
	font-style: normal;
	font-size: 14px;
	font-weight: 500;
	color: #2196F3;
	text-decoration: none;
	letter-spacing: 1.25px;
	cursor: pointer
}

.app-link:hover {
	color: #1058aa;
	text-decoration: none;
}

.app-show-password-row {
    height: 20px;
    display: flex;
    justify-content: space-between;
    margin-left: 175px;
    width: 320px
}

@media (max-width: 739px) {
.app-show-password-row {width: calc(100vw - 56px); margin-left: 20px;}
}

.app-link.app-BCPhoto-link {margin-bottom: 15px; display: block}

.app-status {
    position: relative;
    box-sizing: border-box;	
	width: 320px;
    height: 40px;	
    padding: 0 8px;
    margin-left: 25px;
	border: 1px solid #B4C2CD;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
	font-family: Roboto;
    font-size: 15px;
	line-height: 40px;
    font-weight: normal;	
    color: #666;
    text-align: left;
	background-color: #fff;
    z-index: 1;
}

.app-status .downArrow-path {
	position: absolute;
    right: 6px;
    top: 17px;
	transform: none;
	left: auto
}

.app-status:hover {
	    background-color: #F8FAFE;
    -webkit-transition: background 0.2s linear;
    -o-transition: background 0.2s linear;
    transition: background 0.2s linear;
}

.app-status-container {
	width: 361px;
    display: flex;
    box-sizing: border-box;
}

form .row .app-status-container u {margin-top: 13px}


#editProfile-company,
#editProfile-title,	
#editProfile-clientCompany,
#editProfile-contractorTitle,
#editProfile-targetTitle,
#editProfile-school, 
#editProfile-degree,
#editProfile-field,
#stateZip-row.animated input {
	animation: blink-status-animation 2s 1; 
	animation-timing-function: linear;	
}

@keyframes blink-status-animation {
    0% {background-color: transparent}
    25% {background-color: #d8eaff}
    100% {background-color: transparent}
}


.app-gender-container {
	font-family: Roboto;
    color: #666;
    position: relative;
    font-size: 15px;
    font-weight: normal;
    z-index: 1;
    box-sizing: border-box;
    border-radius: 4px;
	height: 34px;	
	margin-left: 25px
}

form .row u.app-gender {margin-top: 0; transform: translateY(8px)}


.app-gender-container label {
	width: 40px
}

#btn-editProfile-save {font-size: 18px}

@media (max-width: 739px) {
.app-gender-container {margin-left: 0 }
.app-status {margin-left: 0; width: calc(100vw - 56px); }
form .row.row-gender-mobile {height: 58px}	
.app-status-container {width: 100%}	 
#btn-editProfile-save {width: calc(50vw - 25px);}
	
}
	
.app-BCPhoto-container #BCPhotoChooseFile {margin-bottom: 15px}


/*//// RADIO BUTTONS ///*/


.app-radio-container {
  	display: inline-block;
  	position: relative;
  	padding-left: 26px;
  	cursor: pointer;
  	font-size: 22px;
  	-webkit-user-select: none;
  	-moz-user-select: none;
  	-ms-user-select: none;
  	user-select: none;
  	font-family: Roboto;
  	font-size: 16px;
	top: 50%;
    transform: translateY(-50%);
}

/* Hide the browser's default radio button */
.app-radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.app-radio-checkmark {
  	position: absolute;
  	top: 0;
  	left: 0;
  	height: 18px;
  	width: 18px;
  	border-radius: 50%;
	border: 1px #B2C2CD solid;
	transform: translateY(-1px);
}

.app-radio-container:active input ~ .app-radio-checkmark {
  	border: 1px #2196F3 solid;
	box-shadow: 0 0 0 2px #C0D3F0;
}


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

/* Show the indicator (dot/circle) when checked */
.app-radio-container input:checked ~ .app-radio-checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.app-radio-container .app-radio-checkmark:after {
 	top: 6px;
	left: 6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: white;
}


.app-checkbox-container {
  	display: inline-block;
  	position: relative;
  	padding-left: 26px;
  	cursor: pointer;
  	font-size: 22px;
  	-webkit-user-select: none;
  	-moz-user-select: none;
  	-ms-user-select: none;
  	user-select: none;
  	font-family: Roboto;
  	font-size: 16px;
	width: 230px
}


/* Hide the browser's default radio button */
.app-checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* On mouse-over, add a light blue background color */
/*.container:hover input ~ .checkmark {
  	background-color: #F8FAFE;
}*/

/* When the radio button is checked, add a blue background */
.app-radio-container input:checked ~ .app-radio-checkmark {
  	background-color: #2196F3;
	border: 1px #2196F3 solid	
}

/* Create a custom checkbox */
.app-checkbox-checkmark {
	position: absolute;
  	top: 1px;
  	left: 0;
  	height: 16px;
  	width: 16px;
  	border-radius: 4px;
	border: 1px #B2C2CD solid;
	transform:translateY(-1px);
	background-color: white
}

.app-checkbox-container:active input ~ .app-checkbox-checkmark {
  	border: 1px #2196F3 solid;
	box-shadow: 0 0 0 2px #C0D3F0;
}

/* When the checkbox is checked, add a blue background */
.app-checkbox-container input:checked ~ .app-checkbox-checkmark {
  	background-color: #2196F3;
	border: 1px #2196F3 solid	
}

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

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

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

/*////  BUTTONS PHOTO-ID ///*/
.welcome-type-btn-container {
	display: flex;
    width: 100%;
    justify-content: space-evenly;
    margin-top: 30px;
    }
    
.welcome-type-btn {
	padding: 15px 10px 13px 10px;
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    outline: none;
    width: 150px;
    font-family: Roboto, Arial;
    text-align: center;
    text-decoration: none;
    display: block;
    /* margin: 0 auto 20px auto; */
    cursor: pointer;
	
}

.welcome-type-btn.selected {
	background-color: #727272;
	border-color: #727272;
	color: white;
}

.welcome-type-btn.selected:hover,
.welcome-type-btn.selected:active {
	background-color: #464444;
	border-color: #464444;	
}






/*//// PHOTO / AVATAR ///*/

#BCPhoto {position: relative;
	width: 100px;
    height: 100px;
    display: block;
	margin: 0;
    display: block;
    margin-bottom: 15px;}

#BCLogo {
    position: relative;
    width: 360px;
    height: 100px;
    display: block;
    margin: 0 0 20px 0;
}

.app-BCPhoto-container {
    background-color: #f2f7ff;
    padding: 20px;
    box-sizing: border-box;
    margin: 0px 0 0 50px;
	max-height: 264px;
	max-width: 429px;
	width: calc(100vw - 1114px)
}


@media ( min-width: 1120px) and ( max-width: 1350px){
	.app-BCPhoto-container {width: 495px; margin: 20px 0 0 0; max-width: 495px}
}

@media ( min-width: 860px) and ( max-width:1119px){
	.app-BCPhoto-container {width: calc(100vw - 602px)}
}

@media ( min-width: 740px) and ( max-width:859px){
	.app-BCPhoto-container {width: 495px; margin: 20px 0 0 0; max-width: 495px}
}

@media ( max-width: 739px) {
	.app-BCPhoto-container {width: calc(100vw - 56px); max-width: 100%; margin-left: 0}
}

.app-BCPhoto-user-image {
	max-width: 100px;
    max-height: 100px;
    display: block;
	margin: 0;
	position: absolute
}


.btn.app-upload {
	font-size: 15px;
    line-height: 21px;
    font-weight: 500;
    padding-top: 9px;
    padding-bottom: 7px;
    padding-left: 22px;
    padding-right: 22px;
    display: block;
    width: 95px;
	margin-left: 0;
	box-sizing: border-box;
	min-width: 95px
}

.avatar-he {
	background: url('/resources/images/professional/dashboard/BlueAvatar100x100He.svg') no-repeat;
    width: 100px;
    height: 100px;
    display: inline-block;
	border: none;
	opacity: 1;
}

.avatar-she {
	background: url("/resources/images/professional/dashboard/BlueAvatar100x100She.svg") no-repeat;
    width: 100px;
    height: 100px;
    display: inline-block;
	border: none;
	opacity: 0;
}

.avatar-they {
	background: url("/resources/images/professional/dashboard/BlueAvatar100x100They.svg") no-repeat;
    width: 100px;
    height: 100px;
    display: inline-block;
	border: none;
	opacity: 0;
}

.user-photo.background {
	background-color: white;
    width: 100px;
    height: 100px;
    display: inline-block;
	border: none;
	opacity: 0;
}

.acc-aboutyou .user-photo.background,
#BCPhoto .user-photo.background {
	background-color: #66FFA6;
}	

.user-photo {
    max-width: 100px;
    max-height: 100px;
    display: inline-block;
	border: none;
	opacity: 0;
	background-color: white;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%)
}

.app-BCPhoto-user-image.animated {
	opacity: 0;
	transition: all 0.5s linear;	
}


/*///// YOUR RIGHTS /////*/

.legal-fluid-box {
    display: block;
    clear: both;
    background-color: #F8FAFE;
    padding: 30px 30px 20px 30px;
    width: 100%;
    box-sizing: border-box;
    margin: 10px 0 24px 0;
    position: relative;
}

h3.app-legal {
font-size: 16px;
    line-height: 21px;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0 0 14px 0;
    font-family: Roboto, Arial;
    color: #25282B;
    padding: 0px;
    border: 0px;
    position: relative;
    }
    
ul.app-legal {
	list-style: square;
	margin: 0 0 0 0;
    padding-inline-start: 20px;
}    

.app-legal-text {
font-family: Roboto, Arial;
    color: #25282B;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    text-align: left;
    margin: 0 0 8px 0;
    padding: 0;
    border: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    align-items: center;
    
}

.legal-animated-text,
.legal-animated-text2,
.legal-animated-text3 {
	margin-right: 5px;
    position: relative;
    overflow: hidden;
}    

@media (min-width: 740px){

.legal-animated-text::before,
.legal-animated-text2::before,
.legal-animated-text3::before {
    display: inline-block;
    background-color: #b6f2ff;
    content: "";
    position: absolute;
    transition: all 0.4s ease-out;
    width: 0px;
    height: 24px;
    margin-top: -2px;
    animation: legal-text-animation 12s ease-in-out infinite;
}

.legal-animated-text2::before {animation-delay: 3s}
.legal-animated-text3::before {animation-delay: 6s}
}
    
@keyframes legal-text-animation {
	0% {left: 0; width: 0px}
	15% {width: 200px}
	35% {left: 100%; width: 0px}
	100% {left: 100%; width: 0px}	
}    
    
/*/// EMPLOYERS //*/

.terefic-link-box {
	margin-right: 30px;
    background: #f2f7ff;
    border: 1px solid #B4C2CD;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 5px;
    position: relative;
	width: 100%;
	display: flex;
    flex-wrap: nowrap;
	padding: 30px 30px 26px 30px;
	margin-bottom: 45px
}

.notification-text.app-employers {
	margin-bottom: 6px;
	color: #25292c
}

#employers-copied-text,
.links.app-employers-link {
	font-size: 16px;
    line-height: 22px;
	letter-spacing: normal;
	margin-left: -4px;
	margin-right: 4px;
	padding: 4px
}

.edit-contacts-copied-text {
	font-size: 16px;
    line-height: 20px;
	letter-spacing: normal;
	margin-left: -4px;
	margin-right: 4px;
	padding: 4px;
	position: absolute;
	display: inline-block;
	right: 12px
}

#employers-copied-text,
.edit-contacts-copied-text {
	color: #00CC66;
	display: none;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    text-decoration: none;
	animation: blink-text-animation 2s 1; 
	animation-timing-function: linear;	
}

@keyframes blink-text-animation {
    0% {opacity: 0}
	50% {opacity: 1}
	80% {opacity: 1}	
    100% {opacity: 0}
}

#terefic-link.link-selected {
	animation: blink-bckg-animation 2s 1; 
	animation-timing-function: linear;
}

@keyframes blink-bckg-animation {
    0% {background-color: transparent}
	50% {background-color: #bdfada}
	90% {background-color: #bdfada}	
    100% {background-color: transparent}
}

.savedata.field-selected {
	animation: lightblink-bckg-animation 2s 1; 
	animation-timing-function: linear;
}

@keyframes lightblink-bckg-animation {
    0% {background-color: transparent}
	50% {background-color: #ebfff5}
	90% {background-color: #ebfff5}	
    100% {background-color: transparent}
}




.btn.two-button-btn {width: 150px}

.icon-lock {
	width: 18px;
    transform: translateY(1px);
	height: 18px;}


@media (min-width: 740px){
.employers-copylink-container {
    width: calc(100% - 168px);
	}}

/*/// EMPLOYERS TABLE //*/


.employers-table{
	width: 100%;
    border-collapse: collapse;
	font-size: 16px;
	line-height: 20px;
	font-family: Roboto;
	color: #25282B;
	font-weight: 400;
}


.employers-table-header {
	display: table-header-group;
	vertical-align: middle;
}

.employers-table-header .employers-table-row {
	border-bottom: 1px solid #25282B
}

.employers-table-header .employers-table-row:hover {
	background-color: transparent}

.employers-table-row {
	border-color: #b2c2cd;
	border-bottom: 1px solid #d4dde3
}

.employers-table-row:hover {
	background-color: #f2f7ff
}


.employers-table-header .employers-table-cell {
	padding-top: 20px;
    padding-bottom: 8px;
    font-weight: bold;
    vertical-align: bottom;
}


.employers-table-cell {
	padding-top: 8px;
    padding-bottom: 8px;
	text-align: left;
}


.employers-table-header-row_status {width: 85px}
.employers-table-header-row_date  {width: 100px}
.employers-table-header-row_views {width: 60px}

.employers-table-header-row_actions {width: 60px; text-align: center}


.employers-table-dropdown{
	text-align: center; 
	align-items: center;
	position: relative}


.employers-table-btn {
	width: 32px;
    height: 32px;
    background-color: white;
    border: 1px solid #b2c2cd;
    border-radius: 100%;
	cursor: pointer;
	padding: 0;
	position: relative
}

.downArrow-path{
	clip-path: polygon(0 0, 100% 0%, 50% 100%);
	width: 12px;
    height: 8px;
    background-color: #25282B;
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
}

.employers-table-btn:hover {
	border: 1px solid #136acd;	
}

.employers-table-btn:active .downArrow-path{
	background-color: #136acd;}

.employers-table-btn:focus {
	outline: none
}

.employers-table-btn:active {
	border-color: #1058aa;
    background-color: #fff;
    box-shadow: 0 0 0 2pt #C0D3F0;
}

.employers-status {
	padding-top: 4px;
    padding-bottom: 2px;
    padding-left: 5px;
    padding-right: 5px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 18px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.87);
    mix-blend-mode: normal;
    display: inline-block;
	width: 55px;
    text-align: center;
}

#form-email-hide {
	margin-top: -417px; 
	overflow: hidden;
	-webkit-transition: all 0.6s linear;
	-o-transition: all 0.6s linear;
	transition: all 0.6s linear;
	position: relative;
	z-index: 0
} 

.editcontact-separation-line {
	position: relative;
	margin: 30px 0;
	z-index: 5;
	border-bottom: 1px #B4C2CD solid;
}

.editcontact-separation-line::before {
	content: "";
    background-color: white;
    width: 100%;
    height: 200vh;
    z-index: 4;
    position: absolute;
    bottom: 0;
} 


@media (max-width: 739px){
	.employers-table-row{
	display: flex;
    flex-direction: column;}
	
	.employers-table-cell {padding: 1px 0}

	.employers-table-row_status{margin: 7px 0}
	
	.employers-table-header-row_date,
	.employers-table-header-row_company,
	.employers-table-header-row_name,
	.employers-table-header-row_email,
	.employers-table-header-row_views,
	.employers-table-header-row_actions,
	.employers-table-row_actions {display: none}
	
	.employers-table-row_views {margin-bottom: 7px}
	
	.terefic-link-box, .legal-fluid-box {display: block}
}

/*/// COUNTRY DROPDOWN //*/

.inputNewLookSelectV2, 
.country-select,
.state-select {
	position: relative;
	border: 1px solid #B4C2CD;
	border-radius: 5px;
	padding: 3px 8px;
	cursor: pointer;
	color: #666;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	text-align: left;
	background: url("/resources/images/professional/dashboard/DownArrow.svg") no-repeat calc(100% - 5px);
	background-size: 15px 15px;
	float: left;
	background-color: white;
	font-size: 15px;
	-webkit-appearance: none
}
	
 .state-select {width: 215px;}
 
#setLocationCountry option[value="9"] {display: none;}
 


/*/// VALIDATION ERROR MESSAGES //*/

/*text*/
.row span.error,
.row span.error-cover,
.row-subject span.error.error-subject,
.row-message span.error.error-message {
	font-family: Roboto;
	color: red;
    padding: 0 8px;
    font-size: 15px;
    line-height: 40px;
    font-weight: normal;
    z-index: 0;		
}

/*box size & position*/
.row span.error,
.row span.error-cover,
.row-subject span.error.error-subject,
.row-message span.error.error-message {
    position: absolute;	
	border: 1px solid transparent;
    box-sizing: border-box;
    border-radius: 4px;
    margin-left: 25px;
    background-color: rgba(255, 0, 0, 0.1);
    z-index: 0;
	width: 320px;
    height: 40px;
	left: 150px;
}

.row-subject span.error.error-subject,
.row-message span.error.error-message {
	width: calc(100% - 200px);
    max-width: 640px;
}    
    
/*zip code exception*/
.row .combo-fields span.error,
.row .combo-fields span.error-cover {
	width: 80px;
}

@media (max-width:739px) {
.row span.error,
.row span.error-cover,
.row-subject span.error.error-subject,
.row-message span.error.error-message {	
	margin-left: 0px;
	width: calc(100vw - 56px);
	left: 0	
	}
	
.overlay-box .row span.error {margin-left: 20px;}
}

.row span.error-cover {
	background-color: white;
	z-index: 1;
}

/*/// iframe background //*/
.iframe-background {
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}

.paper-sheet  {
  position: absolute;
  background-repeat: no-repeat;
  border-radius: 5px;
  height: 100vh;
  width: 100vw;
  clip-path: polygon(0 0, calc(100% - 285px) 0%, 100% 237px, 100% 100%, 0% 100%);
  background-color: white;
  transition: 0.6s clip-path linear; 
}

.paper-sheet.pulled  {
  clip-path: polygon(0 0, calc(100% - 382px) 0%, 100% 373px, 100% 100%, 0% 100%);
  transition: 0.6s clip-path linear; 
}



.paper-sheet-corner,
.paper-mouseover {
	content: '';
    height: 319px;
    width: 191px;
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    border-bottom-left-radius: 5px;
    transition: 0.6s all linear;
}

.paper-sheet-corner {
	transform: translatex(-100px);
    background: linear-gradient(to left bottom, transparent 50%, #f2f9ff 10%, #FFFFFF, #eaedf1 100%);
    box-shadow: 0 6px 4px -4px #8f8f8f;
    z-index: 2
}

.paper-mouseover {
	background: none;
	background-color: transparent;
	transform: translate(51px, -57px) rotate(-19deg);	
	width: 291px;
	cursor: pointer
}

.paper-mouseover:hover {
	transform: translate(77px, -30px) rotate(-7deg);
    width: 336px;
    width: 436px;
    height: 419px;
    transition: 0.6s all linear;
}

.paper-mouseover:hover .paper-sheet-corner {
    width: 336px;
    height: 419px;
    transition: 0.6s all linear;
}

.paper-arrow {
	clip-path: polygon(0px 10px, 80px 10px, 80px 0px, 128px 26px, 80px 52px, 80px 42px, 0px 42px);
    height: 52px;
    width: 128px;
    position: absolute;
	top: 170px;
    right: 225px;
    display: inline-block;
    background-color: #fa5efb;
    padding-top: 17px;
    padding-left: 15px;
    box-shadow: 0 6px 4px -4px #8f8f8f;
    animation: shake 1s infinite linear;
    opacity: 1;
    transition: 0.5s opacity linear;
}


@media (max-width:1200px) {
.paper-arrow {
	display: none
}}

@media (max-width:900px) {
.paper-mouseover {
	display: none
}
.paper-sheet  {
  clip-path: polygon(0 0, 100% 0%, 100% 0%, 100% 100%, 0% 100%);
}
}

.paper-arrow.pulled {
	opacity: 0;
    transition: 0.5s opacity linear;
}

@keyframes shake {
	0% {transform: translateX(0px); background-color: #fa5efb;}
	50% {transform: translateX(-10px); background-color: #f900fb;}
	100% {transform: translateX(0px); background-color: #fa5efb;}
}


.paper-arrow-text {
    font-size: 15px;
    font-family: Roboto, Arial;
    text-align: left;
    font-weight: 500;
    color: white
}


/*/// FUSE COOPERATIVE //*/


@media (min-width: 740px){
	
#fuse-welcome .landing.staffing-off .welcome-candidate-text-wrapped {
    width: 100%;
    transform: translateY(-50%);
    font-size: 18px;
	line-height: 30px;
	}	
	
#fuse-welcome .largeBtn {
	font-size: 18px;
}
	
#fuse-welcome .employer-signature {
	font-size: 15px;
	line-height: 24px;
	}
	
#fuse-welcome a.employer-signature {
color: #2196F3
}

}


/*/// PHOTO-ID INSTRUCTIONS //*/

.main-container-child.photoID-second {	top: 5%}

/*
@media  ( min-width:740px ){
.photoID-instructions {
	width: 100%;
	font-size: 18px;
	font-family: Roboto, Arial;
	line-height: 28px;
	overflow: visible;
	text-align: left;
	float:none;
	margin-bottom: 6px;
	position: relative;
	top:50%;
	transform: translateY(-50%)
	}
	
.welcome-add-text {
	font-size: 18px;
	font-family: Roboto, Arial;
	line-height: 28px;
	overflow: visible;
	text-align: left;
	float:none;
	margin-bottom: 6px;
}	
}


@media ( max-width:739px ){
.photoID-instructions {
	width: 100%;
	font-size: 18px;
	font-family: Roboto, Arial;
	line-height: 28px;
	overflow: visible;
	text-align: left;
	float:none;
	margin-bottom: 6px;
	text-align: center
	}
} */

.photoID-instructions {
	width: 100%;
	font-size: 16px;
	font-family: Roboto, Arial;
	line-height: 24px;
	overflow: visible;
	text-align: left;
	}
	
.photoID-title {
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
    font-size: 20px;
	}
	
.photoID-subtitle {
	font-weight: bold;
	margin-top: 20px;
    margin-bottom: 10px;
}	
	
.photoID-list {
    list-style: square;
    margin: 0;
    padding-inline-start: 20px;
}
.photoID-list-item {
    margin-bottom: 14px;
}


/*/// WELCOME WITH STATE //*/

.welcome-state-btn {
    width: 500px;    
}

.welcome-state-btn.disabled,
.welcome-state-btn.disabled:hover,
.welcome-state-btn.disabled:active {
    border-color: #d8dee3;
    background-color: #d8dee3;
} 

.state-container {
    box-sizing: border-box;
    position: relative;
    width: 500px;
    margin: auto;
}

.emp-state {
position: relative;
    box-sizing: border-box;
    width: 500px;
    height: 50px;
    padding: 0 8px;
    border: 1px solid #B4C2CD;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    line-height: 50px;
    font-weight: 400;
    color: #25282B;
    text-align: left;
    background-color: #fff;
    z-index: 1;
    margin: auto;
    text-align: center;
    margin-bottom: 20px;
}

.photoID-background-box .emp-state {
	width: 480px;
    margin-bottom: 0;
    margin-top: 20px;
	}
	

#state-box.error {
	background-color: #ffe5e4;
}

#state-box.error #state-text {color: red; font-weight: 500;}

.state-dropdown-list  {
	list-style: none;
    box-sizing: border-box;
    margin: 0;
    text-align: left;
    z-index: 1000;
    min-width: 180px;
    padding: 8px 0;
    border-radius: 4px;
    color: #1c252c;
    background-color: white;
    box-shadow: 0 0 0 1px rgba(77,101,117,0.1), 0 3px 10px 0 rgba(77,101,117,0.2);
	position: absolute;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    overflow: hidden;
	-webkit-transition: height 150ms linear;
	-o-transition: height 150ms linear;
	transition: height 150ms linear;
}

.state-downArrow-path {
    clip-path: polygon(0 0, 100% 0%, 50% 100%);
    width: 16px;
    height: 10px;
    background-color: #25282B;
    position: absolute;
    top: 20px;
    right: 10px;
    
}

.state-dropdown-list {
	height: 0;
    visibility: hidden; 
    top: 110%;  
    width: 500px
}

.state-dropdown-list.is-open {
	visibility: visible; 
	height: 185px; 
	overflow-y: auto;
	}





.state-dropdown-list::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 14px;
}

.state-dropdown-list::-webkit-scrollbar-thumb {
  border-radius: 4px;
  border: #A5D0E2 1px solid;
  background-color: #E7F6FC;
  min-height: 30px 
}

.state-dropdown-list::-webkit-scrollbar-thumb:hover,
.state-dropdown-list::-webkit-scrollbar-thumb:active {
  background-color: #c7efff;
}

.state-dropdown-list .app-dropdown-link {
	padding: 8px 16px;
}

#error-select-type {
    width: 480px;
    background-color: #ffe5e4;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    margin-top: 30px;
    color: red;
    font-weight: 500;
    border-radius: 5px;
    margin: 30px auto 0 auto;
    display: none;
}

.photoID-background-box.error #error-select-type {
	display: block;
}

.photoID-background-box.error .welcome-type-btn-container {
	margin-top: 20px;
}



@media (max-width:739px) {
.welcome-state-btn, .state-container, .state-dropdown-btn, .state-dropdown-list,
.photoID-background-box .emp-state {
width:90vw;
	}
.photoID-background-box .state-container, 
.photoID-background-box .state-dropdown-btn, 
.photoID-background-box .state-dropdown-list,
.photoID-background-box .emp-state {
width:100%;
	}	
	
	
	}