/* You can add global styles to this file, and also import other style files */


/** TODO: Remove :Lato **/
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');
/**/

/* @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css');

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); */


.overlay-dialog-panel > .mat-dialog-container {
	background-color: #f1f1f1;
	-webkit-box-shadow: 0 0 25px #5A5A5A;
	        box-shadow: 0 0 25px #5A5A5A;
	border-radius: 10px;
	overflow: hidden;
	padding: 3vw 3vw 2vw 3vw;
	overflow: visible;
	border-radius: 10px;
}

.overlay-dialog-panel .mat-mdc-dialog-surface {
    border-radius: 10px;
}

#time-out-warning-overlay {
	border-radius: 10px;
	overflow: hidden;
	padding: 3vw 3vw 2vw 3vw;
}

#session-expired-overlay {
	border-radius: 10px;
	overflow: hidden;
	padding: 3vw 3vw 2vw 3vw;
}

#confirm-dialog-overlay {
	border-radius: 10px;
	overflow: hidden;
	padding: 2vw 3vw 4vw 3vw;
}
/* 
.overlay-dialog-panel p {
	width: 300px;
} */

/* NEW CSS - Secure Registration Phase 2 */
.iconText  {
	background-color: #ededed;
	float: left;
  	padding: 12px 4% 12px 4%;
}
.card-checkbox > .iconText{
	margin: 10px 0 0 0;
}
*:not(.card-checkbox) > .iconText{
	margin: 10px 0 10px 0;
}

/* Verification Code Cards */
.widget-section-container {
	margin-bottom: 24px;
}

/* default, before an option is selected*/
.card, 
.card-checkbox { 
	background: #FFFFFF 0% 0% no-repeat padding-box;
	/*
	-webkit-box-shadow: 0px 1px 3px #888;
	box-shadow: 0px 1px 3px #888;
	padding: 18px 19px 13px;
			*/
	padding: 18px;
	border: 1px solid #dbdbdb;
	border-radius: 5px;
	opacity: 1;
	margin: 10px 2px;
	clear: both;
}
.card-checkbox{
	overflow-y: hidden;
}
.card,
.card-checkbox .card-expandable{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.card-checkbox .card-expandable input[type=checkbox]{
	flex-shrink: 0;
}

.card-checkbox .errors label.error{ 
	float: none; 
	margin-left: 38px;
	width: initial;
}

.card .card-title {
	text-align: left;
	font-size: 16px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.01px;
	color: #000;
	opacity: 1;
}
.card .card-title-description {
	text-align: left;
	font-size: 14px;
	line-height: 17px;
	font-weight: 400;

	letter-spacing: 0px;
	color: #666666;
	opacity: 1;
	margin-top: 12px;
	margin-bottom: 0px;
}


/* when another card is focused */
.card.card-unfocused .card-title {
	color: #24242499;
}
.card.card-unfocused .card-title-description {
	color: #66666699;
}

.card.card-disabled {
	border: 1px solid #C9C9C9;
	border-radius: 5px;
	opacity: 1;
	-webkit-box-shadow: none;
	        box-shadow: none;
}
.card.card-disabled .card-title,
.card.card-disabled .card-title-description {
	color: #BEBCBC;
}
.card.card-disabled .card-error {
	color: #E10005;
}



/* when this card is focused */
.card.card-focused {
/* .card.selected { */
	/* background: var(--unnamed-color-ffffff00) 0% 0% no-repeat padding-box;
	 background: #FFFFFF 0% 0% no-repeat padding-box; 
	-webkit-box-shadow: 0px 1px 3px #888;
	        box-shadow: 0px 1px 3px #888; */
	border: 1px solid #006699;
	border-radius: 5px;
	opacity: 1;
}


.card-icon-container {
	display: inline-block;
	vertical-align: top;
	margin-right: 15px;
}

/*  */
.card .card-status-icon {
	/* border: 1px solid var(--unnamed-color-c9c9c9); */
	/*background: transparent url('assets/images/card-icon-default.svg') 0% 0% no-repeat padding-box;*/
	background: transparent url('assets/images/TimRadioUnselected.svg') 0% 0% no-repeat padding-box;
	/* border: 1px solid #C9C9C9; */
	opacity: 1;
	height: 25px;
	width: 25px;
}
.card.card-focused .card-status-icon {
	/*background: transparent url('assets/images/card-icon-selected.svg') 0% 0% no-repeat padding-box;*/
	background: transparent url('assets/images/TimRadioSelected.svg') 0% 0% no-repeat padding-box;
	opacity: 1;
}

/* disabled, shows grey ! icon, no error */
.card.card-disabled .card-status-icon {
	background: transparent url('assets/images/card-icon-disabled.svg') 0% 0% no-repeat padding-box;
	opacity: 1;
}

/* disabled and selected, shows errors */
.card.card-disabled.card-disabled-selected .card-status-icon, 
.card.card-disabled.card-focused .card-status-icon{
	background: transparent url('assets/images/card-icon-error.svg') 0% 0% no-repeat padding-box;
	opacity: 1;
}

/* step 3 password show */
#passwordSection span.show-password {
	color: gray;
    font-style: normal;
    /* float: right;
    margin-top: -23px;
    margin-right: 4px; */
    z-index: 1;
	font-size: 12px;
	position: absolute;
	right: 10px;
	bottom: 10px;
}

/* step 3 text */
p.registration-information,
h6.registration-help {
	color: #666;
	font-size: 14.4px;
	line-height: 21.6px;
	font-weight: 400;
	letter-spacing: 0px;
}

/* step 3 password requirements */
.registration-password-requirements {
	float: left;
	width: 100%;
	margin-top: 15px;
}
.registration-password-requirements .information-row {
	margin-top: 10px;
}
.registration-password-requirements .rule {
	display: inline-block;
	width: calc(100% - 30px);
	padding-left: 10px;
	padding-top: 0;
}


/* step 3 text */
p.registration-information,
h6.registration-help {
	color: #666;
	font-size: 14.4px;
	line-height: 21.6px;
	font-weight: 400;
	letter-spacing: 0px;
}
/*------------------------------------ */
/* -- registration-header-container -- */
/* --   registration-title  (h1)    -- */
/* --   registration-step   (h4)    -- */
/*------------------------------------ */
.registration-title, 
.registration-step{
	-webkit-font-smoothing: antialiased;
	margin: 0 0 6px 0;
}
.registration-header-container {
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: baseline;
	    -ms-flex-align: baseline;
	        align-items: baseline;
}
.registration-title {
	max-width: initial !important;
	width: auto;
	text-align: left;
	letter-spacing: 0px;
}

@media only screen and (max-width:640px) {
	.cp .registration-header-container{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		margin-left: 13px;
		margin-right: 13px;
	}
	.cp .registration-title,
	.cp .registration-step{
		font-size: 18.5px !important;
		color: #7b7f85 !important;
	}

	/* #okta-sign-in.auth-container .auth-content {
		display: flex;
	} */

	/* .form-view {
		display: flex;
	} */
}

@media only screen and (min-width:641px) {
	.cp .registration-header-container{
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		width: 100%
	}
	.cp .registration-title{
		margin: 15px auto 0 auto;
		color: #000000;
	}
	.cp .registration-step{
		display: none;
		color: #000000;
	}
	/* #okta-sign-in.auth-container .auth-content {
		display: inline-flex;
	} */
	
}

/* Registration Steps */
#RegProgression {
	overflow: auto;
}
@media only screen and (max-width: 640px) {
	#RegProgression {
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 15px;
	}
	#RegProgression .dividers,
	#RegProgression .circleContainerNum,
	#RegProgression .circleContainerText
	{ 
		Display: none;
	} 
	#RegProgression{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}
	#RegProgression .circleContainer{
		
		height: 5px;
		margin: 3px;
		width: 100%;
	}
	#RegProgression .circleContainer:not(.blue){
		background-color: #d8d8d8;
	}
	#RegProgression .circleContainer.blue{
		background-color: #ffc000;
	}
	
}
@media only screen and (min-width: 641px) {
	#RegProgression {
		margin-top: 22px;
		margin-bottom: 30px;
		margin-left: auto;
		margin-right: auto;
		
	}
	/*Registration Step Spacing*/
	#RegProgression{ 						width: 380px; }
	#RegProgression .circleContainer{ 		width:  81px; }
	#RegProgression .dividers{ 				width:  68px; }
	/*Password Reset Step Spacing*/
	#RegProgression.wide{ 					width: 470px; }
	#RegProgression.wide .circleContainer{ 	width: 120px; }
	#RegProgression.wide .dividers{ 		width:  55px; }
   
   #RegProgression .circleContainer {
	height: 64px;
	float: left;
	text-align: center;
   }
   #RegProgression .circleContainerNum {
	color: white;
	font-size: 20px;
	font-family: 'Poppins', sans-serif;
	line-height: 100%;
	width: 43px;
	height: 43px;
	background-color: #ccc;
	margin: 0 auto;
	padding: 9px;
	border-radius: 50%;
	font-weight: bold;
	font-size: 25px;
   }
   #RegProgression .circleContainerText {
	font-size: 12px;
	/* color: #ccc; */
	color:#6a6a6a;
	margin: 6px auto 0 auto;
	line-height: 1.25em;
   }
   #RegProgression .dividers {
	height: 4.25em;
	float: left;
	text-align: center;
	color: #bbb;
	font-weight: bold;
	line-height: 2.60em;
   }
   #RegProgression .migActive .circleContainerNum {
	background-color: #ffc000;
	color:#000000;
	/* background-color: #b59029; */
   }
   #RegProgression .migActive .circleContainerText {
    color: #000;
    font-weight: bold;
   }
   #RegProgression .dividers:after {
	content: '-\00a0\00a0\00a0-\00a0\00a0\00a0-\00a0\00a0\00a0-';
	position: relative;
   }
}

/* (i)  with toggled data*/
#policySection img.helpIcon{
	cursor: pointer;
	margin-bottom: -3px;
	margin-left: 1px;
}

#policySection label {
	width: 100%;
  max-width: inherit;
}

@media (min-width: 768px){
	#policySection input{
		width: 48%;
	}
}

.almost-done-overlay-container,
.reg-complete-overlay-container {
	width: 820px;
	height: 90vh;
	min-height: 520px;
	max-height: 930px;
}

.password-reset-complete-container {
	width: 100%;
	height: 100%;
	max-width: 100vw !important;
	max-height: 100vh;
}

	/* --------------------------------------------------- */
	/* -- START Full Page Cover Splash Screens          -- */
  	/* --                                               -- */
	/* -- Reg4 :: .almost-done-overlay-container		-- */
  	/* -- Reg5 :: .reg-complete-overlay-container       -- */
	/* --------------------------------------------------- */
	@media screen and (max-width: 768px) {
		/* dialog fullscreen on mobile */
		.almost-done-overlay-container,
		.reg-complete-overlay-container {
			width: 100%;
			height: 100%;
			max-width: 100vw !important;
			max-height: 100vh;
		}
	}

	/* --------------------------------------------------- */
	/* --   END Full Page Cover Splash Screens          -- */
	/* --------------------------------------------------- */


	/* -------------------------- */
	/* -- START: EQUAL SPACING -- */
	/* -------------------------- */
	
	/* A little Math to make sure spacing is totally consistent:
	   ----------   ------------    -------------    ------------------------------------------------------------
	   Variable     Mobile Value    Desktop Value    Description...
	   ----------   ------------    -------------    ------------------------------------------------------------
	   whiteSqr   = 		26px ||          60px :: Spacing on all sides around edge of white page ( .left-container )
	   whiteVert  =         20px ||          20px :: Vertical Spacing between elements inside white page ( .left-container )
	   whiteVhalf =         10px ||          10px :: whiteVert/2 
	   whiteSqrR  =         16px ||          50px :: whiteSqr - whiteVhalf 
		 
		 Math/Styles *assume* there is no other possible elements that exist between:
		    .left-container --to-- <form> besides these:
				.left-container
					.section-cap
					.form-view
						.section
						<form
							* <-- all items that want space between them need to be here, not nested deeper.
	*/
	@media screen{
		#content-container .left-column .left-container .section-cap,
		#content-container .left-column .left-container .form-view > section,
		#content-container .left-column .left-container .form-view form > *{
			overflow: auto;
		}
		.card .card-expandable, 
		.form-view *:not(.warning) > h6:not(:first-child),
		.form-view *:not(.warning) > p:not(:first-child){
				margin-top:  16px; /* amount between paragraphs/h6: a bit less than whiteVert */
		}
	}
	@media only screen and (max-width:640px) {
		#content-container .left-column .left-container {
			padding-top:    16px;	/* whiteSqrR  Mobile */
			padding-bottom: 16px;	/* whiteSqrR  Mobile */
			padding-left:   26px;	/* whiteSqr   Mobile */
			padding-right:  26px;	/* whiteSqr   Mobile */
		}
		#content-container .left-column .left-container .section-cap,
		#content-container .left-column .left-container .form-view > section,
		#content-container .left-column .left-container .form-view form > *{
			padding-top:    10px;	/* whiteVhalf Mobile */
			padding-bottom: 10px; /* whiteVhalf Mobile */
		}
		/* when side-by-side <button> start to Stack Up*/
		section .btn-right:not(:first-child),
		section .btn-left:not(:first-child){
			margin-top:     20px;	/* whiteVert  Mobile */
		}
		/* when side-by-side <label> start to Stack Up*/
		section.wrap-right label:not(:first-of-type) {
			margin-top: 		20px; /* whiteVert  Mobile */
		}
	}
	@media (max-width: 768px) and (min-width: 641px){
		section.wrap-right label:not(:first-of-type) {
			margin-top: 		20px; /* whiteVert  Desktop */
		}
	}
	@media only screen and (min-width:641px) {
		#content-container .left-column .left-container {
			padding-top: 	50px;	/* whiteSqrR  Desktop */
			padding-bottom: 40px;	/* whiteSqrR -10 Desktop */
			padding-left: 	60px;	/* whiteSqr   Desktop */
			padding-right: 	60px;	/* whiteSqr   Desktop */
		}
		#content-container .left-column .left-container .section-cap,
		#content-container .left-column .left-container .form-view > section,
		#content-container .left-column .left-container .form-view form > *{
			padding-top: 	10px;	/* whiteVhalf Desktop */
			padding-bottom: 10px;	/* whiteVhalf Desktop */
		}
	}
	/* -------------------------- */
	/* -- END: EQUAL SPACING   -- */
	/* -------------------------- */


	/* ------------------------- */
	/* --        START        -- */
	/* ------------------------- */
	/* -- #content-container  -- */
	/* --   .left-column      -- */
	/* --     .left-container -- */
	/* --       .section-cap  -- */
	/* --         p           -- */
	/* --       .form-view    -- */
	/* --         form        -- */
	/* ------------------------- */
	
	#content-container .left-column{
		margin-right: auto;
		margin-left: auto;
	}
	@media only screen and (min-width:769px) {
		#content-container .left-column{
			width: 728px;
		}
	}
	
	#content-container .left-column .left-container{
		webkit-box-shadow: 0 5px 10px #E6E6E6;
		-webkit-box-shadow: 0 5px 10px #E6E6E6;
		        box-shadow: 0 5px 10px #E6E6E6;
		background: white;
		float: left;
		width: 100%;
	}
	
	/* ------------------------- */
	/* --         END         -- */
	/* ------------------------- */
	/* -- #content-container  -- */
	/* --   .left-column      -- */
	/* --     .left-container -- */
	/* --       .section-cap  -- */
	/* --         p           -- */
	/* --       .form-view    -- */
	/* --         form        -- */
	/* ------------------------- */
	.okta-form-title.o-form-head {
		display: none !important;
	}

	.o-form-content.o-form-theme.clearfix {
		padding-top: 0px !important;
		padding-bottom: 0px !important;
		overflow: unset !important;
	}

	#okta-sign-in {
		margin-top: 26px !important;
		margin-bottom: 20px !important;
	}

	#okta-sign-in .o-form .o-form-fieldset:last-child {
		margin-bottom: 1px !important;
	}

	.form-view {
		padding-bottom: 50px;
	}

	.form-view a {
		text-decoration: none;
		border-bottom: 1px dotted #267da8;
		color: rgb(0, 102, 153);
		font-size: 14.4px;
	}

	#okta-sign-in {
		overflow: hidden !important;
	}

	#okta-sign-in.no-beacon .auth-content {
		padding-top: 0px !important;
		padding-bottom: 37px !important;
	}

	#okta-sign-in .auth-content {
		padding-bottom: 0px !important;
	}

	#okta-sign-in .o-form-fieldset {
		margin-bottom: 10px !important;
	}

	#okta-sign-in .auth-content .o-form-button-bar .button.button-primary{
		content: 'Log In' !important;
	}

	#okta-sign-in .o-form-input-error .icon-16 {
		left: -1px !important;
	}

	#okta-sign-in .o-form-button-bar .button {
		width: 134px !important;
	}

	.forgot-password-email-section {
		position: relative;
		/* display: flex;
		flex-direction: row;
		flex-wrap: wrap; */
		/* align-items: flex-end; */
		/* background-color: #5A5A5A; */
	}

	/* #okta-sign-in .auth-content .auth-content-inner .siw-main-footer .auth-footer  */
	
	/* maybe might use okta forget password in future */
	.link.js-forgot-password {
		/* padding: 0px !important;
		font-size: 14px !important; */
		display: none;
		/* padding-bottom: 0px !important;
		position: absolute !important;
		left: 0%;
		bottom: -36px;
		white-space: nowrap; */
	}

	.link.js-cancel {
		padding: 0px !important;
		font-size: 14px !important;
		padding-bottom: 0px !important;
		position: absolute !important;
		right: 50%;
		bottom: -36px;
		white-space: nowrap;
	}

	/* #sign-in-widget #okta-sign-in .authfooter {
		align-items: stretch;
		display:inline-block !important;
	} */

	#sign-in-widget .auth-container.main-container {
		margin-top: 0px;
	}
	#sign-in-widget .okta-sign-in-header {
		display: none !important;
	}
	#sign-in-widget #okta-sign-in {
		width: auto;
		border: 0;
		box-shadow: unset;
	}

	#sign-in-widget + p {
		margin-top: 0px;
	}

	/* .auth-content {
		padding-bottom: 0;
	} */

	.link.js-unlock, .link.js-help {
		display: none;
	}

	.auth-content {
		padding: 0 !important;
	}

	.beacon-container {
		display: none !important;
	}

	.custom-checkbox {
		display: none !important;
	}

	input[type=password]::-ms-reveal {
		display : none !important ;
	}

	/* #okta-sign-in {
		min-width: fit-content !important;
	} */
	/* .auth-footer {
		padding-bottom: 0;
		margin-bottom: 0;
	} */

	/* @media only screen and (max-width: 1050){
		.forgot-email {
			right: 12%;
		}
	}

	@media only screen and (max-width: 1000){
		.forgot-email {
			right: 6%;
		}
	} */

	@media only screen and (min-width: 768px){
		#okta-sign-in {
			min-width: fit-content !important;
		}
		/* .forgot-email { */
			/* right: calc(40% - 48px); */
			/* left: calc(0% + 120px);
			width: 100%;
		} */
	}

	@media only screen and (max-width: 767px){
		#okta-sign-in {
			min-width: max-content !important;
		}
		.link.js-forgot-password { 
			/* right: 50%; */
			left: 0%;
		}
		.link.js-cancel { 
			right: 50%;
		}
		/* .forgot-email {
			right: calc(40% + 0px);
		} */
	}

	@media only screen and (max-width: 600px){
		#okta-sign-in.auth-container .auth-content {
			max-width: 100% !important;
		}
	}

	@media only screen and (max-width: 640px){
		#okta-sign-in {
			min-width: 100px !important;
		}
	
		/* .forgot-email {
			right: calc(80% - 235px) !important;
		} */
	}

	@media only screen and (max-device-width: 480px) {
		/* styles for mobile browsers smaller than 480px; (iPhone) */
		
		/* .form-view {
			width: 100% !important;
		} */
		#okta-sign-in {
			min-width: fit-content !important;
		}
		.link.js-forgot-password { 
			right: 20%;
		}
		.link.js-cancel { 
			right: 20%;
		}
		.content-row {
			display: block !important;
		}

		#okta-sign-in .o-form-button-bar .button {
			width: 100% !important;
		}
		#remember-me-label {
			font-size: 14.4px !important;
			padding-top: 20px !important;
			padding-bottom: 16px !important;
		}
		
		/* .form-view {
			width: 100% !important;
		} */
		/* .forgot-email {
			right: calc(40% - 170px);
		} */
	 }

	/* @media(min-width: 750px){
		#okta-sign-in {
			max-width:fit-content;
		}

	} */
	
	/* ------------------------- */
	/* --         START       -- */
	/* ------------------------- */
	/* --         form        -- */
	/* --           section   -- <- if error add class .highlight */
	/* --             p       -- */
	/* --             h6      -- */
	/* --             label   -- */
	/* --               h4    -- */
	/* --                 span.side-heading -- */
	/* --               input -- */
	/* --             label.error*/
	/* ------------------------- */

	section label {
		display: block;
	}

	@media only screen and (max-width:640px) {
		/*--- START form elements ----------- */
		 label.check-option {
			font-size: .9em;
		}
	}
	@media only screen and (min-width:641px) {
		section.clean-form-section > label,
		section.input-row > label {
			width: 48%;
			margin-right: 4%;
			max-width: 320px;
		}
		section.input-row label:last-of-type {
			margin-right: 0;
		}
		section.white {
			padding: 15px 5%;
		}
	}
	@media only screen and (min-width:641px) and (max-width:768px) {
		section.wrap-right label,
		section.wrap-right label select, 
		section.wrap-right label input {
			width: 100%;
			max-width: 100%;
		}
	}
	/* ------------------------ */
	/* -- END : input fields -- */
	/* ------------------------ */
	.cp.mi-safari input[type=radio]:focus{
	  outline: 5px solid Highlight;
	  outline: 5px solid #8BB4FA !important;
	}
	.cp.mi-safari input[type=checkbox]:focus{
	  outline: 5px solid Highlight;
	  outline: 5px solid #8BB4FA !important;
	}
	
	.cp.mi-safari .button.green{
		margin-right:5px !important;
	}
	.cp.mi-safari .button.grey{
		margin-left:5px !important;
	}
	@media (max-width: 767px){
		.cp.mi-safari .button.green{
			margin-right:0px !important;
		}
		.cp.mi-safari .button.grey{
			margin-left:0px !important;
		}
	}
	.screen-reader-only{
		position:absolute;
		width:1px;
		clip:rect(0 0 0 0);
		overflow:hidden;
		white-space: nowrap;
		display:block;
	}



	.cancel-dialog-panel .mat-mdc-dialog-surface.mdc-dialog__surface {
		padding: 10px;
	}
	.cancel-dialog-panel #confirm-form {
		justify-content: space-around;
	}