/* Root / Reset */

:root {
    --cas-theme-primary: #153e50;
    --cas-theme-primary-bg: rgba(21, 62, 80, 0.2);
    --cas-theme-primary-light: #006d85;
    --cas-theme-secondary: #74C163;
    --cas-theme-success: var(--cas-theme-secondary);
    --cas-theme-danger: var(--mdc-theme-error);
    --cas-theme-warning: #e6a210;
    --cas-theme-border-light: 1px solid rgba(0, 0, 0, .2);
    --cas-theme-twitter-color: #55acee;
    --cas-theme-vimeo-color: #1ab7ea;
    --cas-theme-vk-color: #587ea3;
    --cas-theme-yahoo-color: #720e9e;
    --cas-theme-google-color: #CC5445;
    --cas-theme-facebook-color: #3B5998;
    --atlassian-theme-primary: #0747a6;
    --mdc-theme-primary: var(--cas-theme-primary, #153e50);
}

.atlassian {
    --mdc-theme-primary: var(--atlassian-theme-primary, #0747a6);
}

/* body {
    display: flex;
    height: 100vh;
    margin: 0;
    padding: 0;
    flex-direction: column;
    justify-content: space-between;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background: #EFEFEF;
} */

a {
    color: #153e50;
    color: var(--cas-theme-primary, #153e50);
}

a:hover, a:visited, a:active {
    color: #006d85;
    color: var(--cas-theme-primary-light);
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
}

aside, section, main {
    display: block;
}

/* Material */

.mdc-drawer {
    top: 56px;
}

.mdc-drawer-app-content {
    flex: auto;
    overflow: auto;
    position: relative;
}

.main-content {
    display: flex;
}

.mdc-top-app-bar {
    z-index: 7;
}

/* widgets */

.notifications-count {
    position: absolute;
    top: 10px;
    right: 12px;
    background-color: #b00020;
    background-color: var(--cas-theme-danger);
    color: #fff;
    border-radius: 50%;
    padding: 1px 3px;
    font: 8px Verdana;
}

.cas-brand {
    height: 48px;
    width: auto;
}

header>nav .cas-brand path.cls-1 {
    fill: white;
}

header>nav .cas-brand .cas-logo {
    height: 100%;
}

.caps-check:not(.caps-on) .caps-warn, .caps-check:not(.caps-on)+.caps-warn {
    display: none;
}

.login-section {
    border-right: 1px solid rgba(0, 0, 0, .2);
    border-right: var(--cas-theme-border-light, 1px solid rgba(0, 0, 0, .2));
    flex: 1;
}

.login-section:last-child {
    border: none;
}

@media screen and (max-width: 767.99px) {
    .login-section {
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, .2);
        border-bottom: var(--cas-theme-border-light, 1px solid rgba(0, 0, 0, .2));
        max-width: none;
        padding: 0 1.5rem;
    }
}

.close {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    text-transform: none;
    text-decoration: none;
    ;
}

button.close {
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
}

.banner {
    padding: 0.1rem 0.5rem;
    border: 1px solid rgba(0, 0, 0, .2);
    border: var(--cas-theme-border-light, 1px solid rgba(0, 0, 0, .2));
    position: relative;
    border-radius: 4px;
}

.banner .banner-message {
    margin: 0.375rem 0;
}

.banner .banner-heading:first-child {
    margin-top: 0;
}

.banner .banner-message:first-child {
    margin-top: 0;
}

.banner .banner-message:last-child {
    margin-bottom: 0;
}

.banner-primary {
    border-color: #153e50;
    border-color: var(--cas-theme-primary, #153e50);
}

.banner-primary .mdi {
    color: #153e50;
    color: var(--cas-theme-primary, #153e50);
}

.banner-danger {
    border-color: #b00020;
    border-color: var(--cas-theme-danger, #b00020);
}

.banner-danger .mdi {
    color: #b00020;
    color: var(--cas-theme-danger, #b00020);
}

.banner-warning {
    border-color: #e6a210;
    border-color: var(--cas-theme-warning, #e6a210);
    color: #e6a210;
    color: var(--cas-theme-warning, #e6a210);
}

.banner-warning .mdi {
    color: #e6a210;
    color: var(--cas-theme-warning, #e6a210);
}

.banner-success {
    border-color: var(--cas-theme-success);
    color: #153e50;
    color: var(--cas-theme-primary, #153e50);
}

.banner-dismissible {
    padding-right: 4rem;
}

.banner-dismissible .close {
    position: absolute;
    top: 0;
    right: 0;
    padding: .75rem 1.25rem;
    color: inherit;
}

.login-provider-item .mdc-button .mdi {
    margin-right: 0.375rem;
}

@media screen and (max-width: 767.99px) {
    .logout-banner {
        width: 100%;
    }
}

.cas-footer {
    font-size: 0.75rem;
}

.cas-footer>* {
    margin-right: 0.25rem;
    display: inline-block;
}

.cas-footer>*:last-child {
    margin: 0;
}

.cas-notification-dialog .mdc-dialog__content>.cas-notification-message:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    border-bottom: var(--cas-theme-border-light, 1px solid rgba(0, 0, 0, .2));
}

.mdc-dialog__title::before {
    display: none;
}

.mdi {
    content: "";
}

.mdi:before {
    font-size: 24px;
}

/* custom components */

.custom-select {
    display: inline-block;
    min-width: 200px;
    height: 56px;
    padding: .375rem 1.75rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.87);
    vertical-align: middle;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    -webkit-appearance: none;
}

/* utilities */

.bg-primary {
    background-color: rgba(21, 62, 80, 0.2);
    background-color: var(--cas-theme-primary-bg, rgba(21, 62, 80, 0.2));
}

.border-bottom {
    border-color: #153e50;
    border-bottom: 1px solid var(--cas-theme-primary, #153e50);
}

.strong {
    font-weight: bold;
}

.text-warning {
    color: #e6a210;
    color: var(--cas-theme-warning, #e6a210);
}

.text-danger {
    color: #b00020;
    color: var(--cas-theme-danger, #b00020);
}

.text-secondary, .text-success {
    color: var(--cas-theme-secondary);
}

.progress-bar-danger .mdc-linear-progress__bar-inner {
    border-color: #b00020;
    border-color: var(--cas-theme-danger, #b00020);
}

.progress-bar-warning .mdc-linear-progress__bar-inner {
    border-color: #e6a210;
    border-color: var(--cas-theme-warning, #e6a210);
}

.progress-bar-success .mdc-linear-progress__bar-inner {
    border-color: var(--cas-theme-success);
}

.word-break-all {
    word-break: break-all;
}

.mdc-text-field {
    width: 100%;
}
.mdc-text-field>.mdc-text-field__input, .mdc-text-field:not(.mdc-text-field--disabled):not(.mdc-text-field--outlined):not(.mdc-text-field--textarea)>.mdc-text-field__input {
    border-color: #153e50;
    border: 1px solid var(--cas-theme-primary, #153e50);
    border-radius: 4px;
}

.mdc-input-group {
    display: flex;
    align-items: stretch;
}

.mdc-input-group .mdc-input-group-field {
    flex: 1 1 auto;
    order: 1;
}

.mdc-input-group .mdc-input-group-field .mdc-text-field {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.mdc-input-group .mdc-input-group-append {
    order: 2;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.mdc-input-group .mdc-input-group-prepend, .mdc-input-group .mdc-input-group-append {
    height: 56px;
}

.mdc-input-group .mdc-input-group-prepend {
    order: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.mdc-input-group .mdc-input-group-field.mdc-input-group-field-prepend .mdc-text-field>.mdc-text-field__input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.mdc-input-group .mdc-input-group-field.mdc-input-group-field-append .mdc-text-field>.mdc-text-field__input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.text-danger, .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon.text-danger, .mdc-text-field:not(.mdc-text-field--disabled)+.mdc-text-field-helper-line .mdc-text-field-helper-text.text-danger {
    color: #b00020;
    color: var(--cas-theme-danger);
}

.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: #153e50;
    color: var(--cas-theme-primary, #153e50);
}

.mdc-button--raised:not(:disabled) {
    background-color: var(--mdc-theme-primary, #153E50);
}

.mdc-button--raised.mdc-button-twitter:not(:disabled) {
    background-color: #55acee;
    background-color: var(--cas-theme-twitter-color, #55acee);
}

.mdc-button--raised.mdc-button-vimeo:not(:disabled) {
    background-color: #1ab7ea;
    background-color: var(--cas-theme-vimeo-color, #1ab7ea);
}

.mdc-button--raised.mdc-button-vk:not(:disabled) {
    background-color: #587ea3;
    background-color: var(--cas-theme-vk-color, #587ea3);
}

.mdc-button--raised.mdc-button-yahoo:not(:disabled) {
    background-color: #720e9e;
    background-color: var(--cas-theme-yahoo-color, #720e9e);
}

.mdc-button--raised.mdc-button-google:not(:disabled) {
    background-color: #CC5445;
    background-color: var(--cas-theme-google-color, #CC5445);
}

.mdc-button--raised.mdc-button-facebook:not(:disabled) {
    background-color: #3B5998;
    background-color: var(--cas-theme-facebook-color, #3B5998);
}

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.text-center {
    text-align: center;
}

.w-66 {
    width: 66%;
}

.w-33 {
    width: 33%;
}

.w-25 {
    width: 25%;
}

.w-50 {
    width: 50%;
}

.w-75 {
    width: 75%;
}

.w-100 {
    width: 100%;
}

.w-auto {
    width: auto;
}

.h-25 {
    height: 25%;
}

.h-50 {
    height: 50%;
}

.h-75 {
    height: 75%;
}

.h-100 {
    height: 100%;
}

.h-auto {
    height: auto;
}

.mw-100 {
    max-width: 100%;
}

.mh-100 {
    max-height: 100%;
}

.min-vw-100 {
    min-width: 100vw;
}

.min-vh-100 {
    min-height: 100vh;
}

.vw-100 {
    width: 100vw;
}

.vh-100 {
    height: 100vh;
}

.mw-50 {
    max-width: 50%;
}

.border-rounded {
    border-color: #153e50;
    border: 1px solid var(--cas-theme-primary, #153e50);
    border-radius: 4px;
}

.border-bottom {
    border-color: #153e50;
    border-bottom: 1px solid var(--cas-theme-primary, #153e50);
}

@media all and (min-width: 768px) {
    .w-md-50 {
        width: 50%;
    }
    .w-md-66 {
        width: 66%;
    }
}

@media all and (min-width: 992px) {
    .w-lg-50 {
        width: 50%;
    }
    .w-lg-66 {
        width: 66%;
    }
    
    .w-lg-35 {
        width: 35%;
    }
}

@media all and (max-width: 767.99px) {
    .w-md-50 {
        width: 100%;
    }
    .w-md-66 {
        width: 100%;
    }
    
    .w-md-35 {
        width: 35%;
    }
}

@media all and (max-width: 991.99px) {
    .w-lg-50 {
        width: 100%;
    }
    .w-lg-66 {
        width: 100%;
    }
    
    .w-lg-35 {
        width: 35%;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:active, .sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

*, ::after, ::before {
    box-sizing: border-box;
}

.text-justify {
text-align: justify;
}

/* legacy */

#duo_iframe {
    width: 100%;
    min-width: 304px;
    height: 330px;
    border: none;
    padding: 0;
    margin: 0;
}

#serviceui {
    background-color: #17a3b844;
    border-radius: 4px;
}


/* custom styles */

body{
		font-family: Roboto;
		font-style: normal;
		font-weight: normal;
		font-size: 16px;
		line-height: 24px;
		align-items: center;
		letter-spacing: 0.15px;
		color: rgba(0, 0, 0, 0.87);
		flex: none;
		order: 0;
		flex-grow: 0;
		margin: 0px 0px;
		background-color: #EFF1F5;
	}
	
	#right{
		background-color: #EFF1F5;
	}

	/* Create two equal columns that floats next to each other */
	.column {
	  float: left;
	  width: 50%;
	  min-height: 100vh;
	}

	/* Clear floats after the columns */
	.row:after {
	  content: "";
	  display: table;
	  clear: both;
	}
	
	#card{
		position: absolute;
		height: 327px;
		width: 456px;
		left: 795px;
		top: 170px;
		background: #FFFFFF;
		border: 1px solid #E0E0E0;
		box-sizing: border-box;
		border-radius: 4px;
	}
	label{
		position: static;
		width: 56px;
		height: 12px;
		left: 0px;
		top: 0px;
		font-family: Roboto;
		font-style: normal;
		font-weight: normal;
		font-size: 12px;
		line-height: 12px;
		display: flex;
		align-items: center;
		letter-spacing: 0.15px;
		color: rgba(0, 0, 0, 0.54);
		flex: none;
		order: 0;
		flex-grow: 0;
		margin: 0px 4px;
	}
	
	#username{
		position: static;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 10px;
		width: 408px;
		height: 56px;
		margin: 0px 20px;
		margin-top: 20px;
	}
	
	#password{
		position: static;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 10px;
		width: 408px;
		height: 56px;
		margin: 0px 20px;
		margin-top: 20px;
	}
	
	#eye{
		position: absolute;
		width: 28px;
		height: 28px;
		left: 392px;
		top: 126px;
	}
	
	input[type="submit"]{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 8px 175px;
		position: absolute;
		width: 408px;
		height: 42px;
		left: 24px;
		top: 196px;
		border-radius: 4px;
		background: #304E84;
	}
	
	input{
		font-family: Roboto;
		font-style: normal;
		font-weight: 500;
		font-size: 15px;
		line-height: 26px;
		letter-spacing: 0.3px;
		border: 1px solid #E0E0E0;
		box-sizing: border-box;
		border-radius: 4px;
	}
	
	
	
	
	
	
	
	

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

	/* Create a custom checkbox */
	.checkmark,.checkmarkCustom {
		position: absolute;
		top: 0;
		left: 0;
		height: 20px;
		width: 20px;
		background-color: #f1f1f1;
		border: 2px solid #CCC;
	}

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

	/* When the checkbox is checked, add a blue background */
	.checkbox-squire input:checked ~ .checkmark {
		background-color: #02B712;
		
	}

	.checkbox-squire input:checked ~ .checkmarkCustom{
		background-color: #304E84;
		
	}

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

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

	/* Style the checkmark/indicator */
	.checkbox-squire .checkmark:after ,.checkbox-squire .checkmarkCustom:after{
		left: 5px;
		top: 1px;
		width: 3px;
		height: 10px;
		border: 3px solid #eee;;
		border-width: 0 2px 2px 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	   
	}

	
	
	.eye {
		width: 22px;
		height: 22px;
		border: solid 2px #FFF;
		border-radius: 75% 15%;
		position: relative;
		transform: rotate(45deg);
		background: #304E84;
	}
	.eye:before {
		content: '';
		display: block;
		position: absolute;
		width: 10px;
		height: 10px;
		border: solid 2px #FFF;
		border-radius: 50%;
		background: #304e84;
		left: 4px;
		top: 4px;
	}
	.eye:after {
		content: '';
		display: block;
		position: absolute;
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: #fff;
		right: 7px;
		top: 5px;
	}
	
	
	
	#footer{
		clear: both;
	    padding: .5em;
	    height: 55px;
	    margin-top: 10rem;
    	margin-left: -22rem;
		position: absolute;
	    font-family: Roboto;
	    font-style: normal;
	    font-weight: normal;
	    font-size: 12px;
	    line-height: 14px;
	    letter-spacing: 0.4px;
	    color: #5E5E5E;
	    width: 316px;
	}
	
	#copyright{
		position: absolute;
		height: 14px;
		width: 410px;
		left: 895px;
		top: 463px;
	}
	
	#help{
		position: absolute;
		height: 14px;
		width: 340px;
		left: 928px;
		top: 435px;
	}
	
	#left{
		position: absolute;
		background: #1B3564;
	}
	#main{
		position: relative;
		background: #EFF1F5;
	}
	
	#maxInventory{
		position: absolute;
		right: 0.67%;
		height: 104px;
		width: 450px;
		left: 795px;
		top: 38px;
		border-radius: 0px;
		
	}
	
	#inventory{
		position: absolute;
		/*left: 41.71%;*/
		right: -1.19%; 
		top: 4.76%;
		bottom: 24.04%;
		height: 52.69px;
		width: 265.89px;
		left: 186.44px;
		top: 3.52px;
		border-radius: 0px;

	}
	
	#product{
		position: absolute;
		left: 0%;
		right: 62.74%;
		top: 5.69%;
		bottom: 24.12%;
	}
	
	.lgin-fm {
		position: absolute;
	    height: 327px;
	    width: 456px;
	    left: 795px;
	    top: 170px;
	    background: #FFFFFF;
	    border: 1px solid #E0E0E0;
	    box-sizing: border-box;
	    border-radius: 4px;
	}
	
	.lg-btn {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 8px 175px;
		position: absolute;
		width: auto;
		height: 42px;
		left: 24px;
		
		border-radius: 4px;
		text-transform: uppercase;
	}
	
	.lg-btn-smt{
		color: #FFFFFF;
		top: 196px;
		background: #304E84;
	}
	
	.lg-btn-cnl{
		color: #000000;
		border-color: rgba(0, 0, 0, 0.12);
		background:  #FFFFFF;
		top: 106%;
	}
	
	
	input:focus {
	 outline: 0 none !important;
	}
	
	a:link{
		color: #2db5c2;
	}
	
	.container, .container-lg, .container-md, .container-sm, .container-xl {
	    max-width: initial !important;
	}
	
	
  
    
    .offset-lg-3{
    	    margin-left: 32% !important;
    }
	
	
	.user-label{
		position: absolute;
	    width: 73px;
	    height: 12px;
	    left: 10px;
	    top: -3px !important;
	    font-family: Roboto;
	    font-style: normal;
	    font-weight: normal;
	    font-size: 12px;
	    line-height: 12px;
	    display: flex;
	    align-items: center;
	    letter-spacing: 0.15px;
	    color: rgba(0, 0, 0, 0.54);
	    flex: none;
	    order: 0;
	    flex-grow: 0;
	    margin: 0px 4px;
	    background: #FFF;
	    padding: 0px 4px;
	}
	
	.copyright{
		height: 14px;
		width: 330px;
		margin-top: 10px;
	}	
	
	.maxInventory{
		position: absolute;
		width: 450px;
		height: 104px;
		top: 48px;
	}
	
	.inventory{
		position: absolute;
		right: -1.19%; 
		top: 4.76%;
		bottom: 24.04%;
		height: 52.69px;
		width: 265.89px;
		left: 186.44px;
		top: 3.52px;
		border-radius: 0px;
	}
	
	.product{
		position: absolute;
		left: 0%;
		right: 62.74%;
		top: 5.69%;
		bottom: 24.12%;
	}
	
	.submit-button{
	    position: relative;
	    height: 42px;
	    width: 45%;
	    border-radius: 4px;
	    margin-top: -28px;
	    color: #FFFFFF;
	    background: #304E84;
	    text-transform: uppercase;
	    padding-left: 20px;
	    float: right;
	    outline-color: #304E84;
	    border-width: 0;
	}
	
	.submit-button{
		outline-color: #304E84;
	}
	
	.cancel-button{
		padding: 0px;
	    width: 45%;
	    position: relative;
	    height: 42px;
	    border-radius: 4px;
	    left: 24px;
	    margin-top: -30px;
	    color: #000000;
	    border-color: #ccc;
	    background: #FFFFFF;
	    margin-left: -25px;
	    float: left;
	    outline-color: #CCC;
	    border-width: 1px;
	}
	
	.cancel-button:focus{
		outline-color: #CCC;
	}
	
	.cancel-text{
		position: static;
	    width: 140px;
	    height: 26px;
	    left: 0px;
	    top: 0px;
	    font-family: Roboto;
	    font-style: normal;
	    font-weight: 500;
	    font-size: 15px;
	    line-height: 26px;
	    text-align: center;
	    letter-spacing: 0.3px;
	    text-transform: uppercase;
	    color: #304E84;
	    flex: none;
	    order: 1;
	    flex-grow: 0;
	    margin: 0px 8px;
	}
	
	.email-card{
		position: relative;
	    width: 450px;
	    float: left;
	    margin-top: 20px;
	    background: #FFFFFF;
	    border: 1px solid #E0E0E0;
	    box-sizing: border-box;
	    border-radius: 4px;
	}
	
	.reset{
		position: relative;
	    min-width: 400px;
	    left: 22px;
	    font-family: Roboto;
	    font-style: normal;
	    font-weight: normal;
	    font-size: 16px;
	    line-height: 24px;
	    letter-spacing: 0.15px;
	    color: #14264C;
    	margin-right: 22px;
    	margin-left: -21px;
    	margin-top: 0px;
	}
	
	.btn-rtn{
		display: flex;
	    flex-direction: row;
	    align-items: center;
	    position: absolute;
	    height: 42px;
	    width: 408px;
	    left: 20px;
   		top: 90px;
	    border-radius: 4px;
	    padding: 8px 18px 8px 120px;
	    right: 0%;
	    bottom: 0%;
	    background: #304E84;
	    box-shadow: 0px 2px 1px rgb(0 0 0 / 12%), 0px 2px 2px rgb(0 0 0 / 10%), 0px 1px 5px rgb(0 0 0 / 8%);
	    border-radius: 4px;
	    flex: none;
	    order: 0;
	    flex-grow: 0;
	    margin: 0px 0px;
		border-width: 0;
	}
	
	.rtn-text{
		position: static;
	    width: 131px;
	    height: 26px;
	    left: 122px;
	    top: 0px;
	    font-family: Roboto;
	    font-style: normal;
	    font-weight: 500;
	    font-size: 15px;
	    line-height: 26px;
	    letter-spacing: 0.3px;
	    text-transform: uppercase;
	    color: #FFFFFF;
	    flex: none;
	    order: 1;
	    flex-grow: 0;
	    margin: 0px 8px;
	}
	
	#input_user_field{
		position: relative;
	    width: 100%;
		height: 56px;
		left: 0;
		top: 2px;
		border: 1px solid #E0E0E0 !important;
		box-sizing: border-box;
		border-radius: 4px;	
		padding: 10px;
		font-family: Roboto;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 19px;
		letter-spacing: 0.15px;
		text-align: left;
	}

	.mdc-card{
		background-color: none !important;
		background: none !important;
		box-shadow: none !important;
	}
	
	.pwdChange{
		margin-left: 32%;
	}
	
	
	#confirmedPassword{
		position: absolute !important;
		font-family: Roboto !important;
	    font-style: normal !important;
	    font-weight: 500 !important;
	    font-size: 15px !important;
	    line-height: 26px !important;
	    letter-spacing: 0.3px !important;
	    border: 1px solid #E0E0E0 !important;
	    box-sizing: border-box !important;
	    border-radius: 4px !important;
	    width: 410px !important;
	    height: 52px !important;
	    margin-top: 112px !important;
	    padding : 10px !important
	}
	
	.pwd{
		margin-top: -98px !important;
   	    position: absolute !important;
	    margin-left: -16px !important;
	    font-family: Roboto !important;
	    font-style: normal !important;
	    font-weight: 500 !important;
	    font-size: 15px !important;
	    line-height: 26px !important;
	    letter-spacing: 0.3px !important;
	    border: 1px solid #E0E0E0 !important;
	    box-sizing: border-box !important;
	    border-radius: 4px !important;
	}
	
	.pwd-top{
		margin-top: -22px !important;
	}
	
	.pwd-label{
		margin-top: -153px;
   		width: 63px;
	    position: absolute;
	    padding: 2px;
	    height: 12px;
	    font-family: Roboto;
	    font-style: normal;
	    font-weight: normal;
	    font-size: 12px;
	    line-height: 12px;
	    display: flex;
	    align-items: center;
	    letter-spacing: 0.15px;
	    background: #FFF;
	}
	
	.conf-label{
		margin-top: 62px;
	    width: 110px;
	    position: absolute;
	    padding: 2px;
	    height: 12px;
	    font-family: Roboto;
	    font-style: normal;
	    font-weight: normal;
	    font-size: 12px;
	    line-height: 12px;
	    display: flex;
	    align-items: center;
	    letter-spacing: 0.15px;
	    background: #FFF;
	}
	
	.strength{
		margin-top: 4rem !important;
    	margin-left: 1rem;
	}
	
	.cas-field{
		margin-left: 1rem;
		margin-bottom: 1rem;
	}
	.banner{
		border: none !important;
	}
	
	
	.label-pwd-enter{
		margin-top: 2rem !important;
		top:90px !important;
	}
	
	.reset-eye {
		top: 75px !important;
	}
	
	.reset-eye-msg {
		top: 152px !important;
	}
	
	.reset-pwd{
		top: 34px !important;
	}
	
	.label-conf-pwd{
		margin-top: 1rem !important;
	}
	
	.label-conf-pwd-2rm {
		margin-top: 2.5rem !important;
	}
	
	.confirm_panel{
		position: relative;
	    min-height: auto;
	    width: 460px;
	    float: left;
	    background: #FFFFFF;
	    border: 1px solid #E0E0E0;
	    box-sizing: border-box;
	    border-radius: 4px;
	}
	
	
	.mdc-button--raised:not(:disabled) {
   		background: #304E84 !important;
	}
	
	.cancel_text {
		color:  #304E84 !important;
	}
	
	#loginFooter{
		width: 100%;
		text-align: center;
		position: absolute;
		font-family: Roboto;
		font-style: normal;
		font-weight: normal;
		font-size: 11px;
		line-height: 14px;
		letter-spacing: 0.4px;
		color: #5E5E5E;
		bottom: 0;
	}
	

	/*Login custom login css */
	.p0{
		padding:0px;
	}
	.max, .inventry{
		display: inline-block;
		width: 100%;
	}

	.maxInventory_logo {
		position: relative;
		width: 100%;
		float: left;
		max-width: 450px;
	}

	.logo-footer {
		display: block;
		
		max-width: 450px;
	}
	.float-right {
		float: right;
	}
	
	.p-relative{
		position: relative;
		float:left;
	}
	#mainEye {
		right: 38px;
		top: 38px;
		position: absolute;
		cursor: pointer;
	}
	label[for="username"] {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0px 4px;
		position: absolute;
		width: 62px;
		height: 22px;
		left: 25px;
		top: 8px;
		background: #FFFFFF;
		margin: 0px 10px;
	}

	label[for="password"] {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0px 4px;
		position: absolute;
		width: 62px;
		height: 25px;
		left: 25px;
		top: 8px;
		background: #FFFFFF;
		margin: 0px 10px;
	}

	.form-container-login {
		position: relative;
		float: left;
		width: 100%;
		margin-top: 18px;
		max-width: 450px;
		background: #fff;
		border: 1px solid #E0E0E0;
    	border-radius: 4px;
    	margin-bottom: 10%;
	}
	.form-container-login form{
		width:100%;
		float: left
	}
	.submit-btn-login {
		padding: 8px 0px;
		width: 91%;
		height: 42px;
		text-transform: uppercase;
		margin: 25px 20px;
		white-space: nowrap;
		border-radius: 5px;
		border: none;
		outline-color: #304E84;
	}
	
	.margin-top-10{
		margin-top:10px;
	}
	
	.submit-btn-reset {
		padding: 8px 0px;
		width: 100%;
		height: 42px;
		text-transform: uppercase;
		white-space: nowrap;
		border-radius: 5px;
		border: none;
		outline-color: #304E84;
	}
	
	.remember-me {
		position: relative;
		height: 30px;
		width: 50%;
		float: left;
		font-family: Roboto;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 24px;
		white-space: nowrap;
		letter-spacing: 0.15px;
		text-align: left;
		color: rgba(0, 0, 0, 0.87);
	}
	#checkmarkCust {
		position: absolute;
		left: 0px;
		top: -4px;
		width: 16px;
		height: 17px;
		border-radius: 4px;
	}
	input[type="checkbox"] {
		width: 17px;
		height: 24px;
		background: #DADADA;
		position: relative;
	}
	.pm_links {
		position: absolute;
		height: 30px;
		width: auto;
		right: 20px;
		bottom: 0px;
		font-family: Roboto;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 24px;
		letter-spacing: 0.15px;
		text-align: left;
		color: rgba(0, 0, 0, 0.87);
	}
	.powered, .firstlook{
		display: inline-block;
	}
	.powered {
		position: absolute;
		right: 33.33%;
		top: 10px;
	}
	
	.logo-footer {
		display: block;
		max-width: 450px;
		position: relative;
		width: 100%;
		float: left;
		text-align: right;
	}
	/* The checkbox-squire */
	.checkbox-squire {
		width: 20px;
		height: 10px;
		position: relative;
		cursor: pointer;
		font-size: 16px;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		margin:0px 20px;
		padding-left:22px;
	}
	.max-450
	{
		max-width: 450px;
		margin:auto;
	}
	.d-flex.align-items-center{
		display: flex;
		align-items: center;
	}
	.p-b-5{
		padding-bottom:5px;
	}
	.left-blue-bg{
		background: #1b3665;
	}

	.content-container {
		position: relative;
		width: 100%;
		max-width: 450px;
		margin: auto;
	}

	.reset_panel {
		position: relative;
		width: 450px;
		min-height: auto;
		float: left;
		margin-top: 20px;
		background: #FFFFFF;
		border: 1px solid #E0E0E0;
		box-sizing: border-box;
		border-radius: 6px;
	}
	.mdc-text-field {
		width: 100%;
		padding: 0;
		margin:0px;
	}
	.fullheight{
		min-height: 100vh;
	    padding-bottom: 100px;
	    position: relative;
	}
	.max-reset-height{
		min-height: 92vh !important;
	}
	
	.inventory {
		padding-left: 10px;
	}
	
	.pding-rt-10 {
		margin-bottom: 10px;
	}
	
	.padding-right-15 {
		padding-right:15px;
	}
	
	.pwd-success{
		padding: 20px 0 0 25px;
	}
	
	.login-error {
	    margin-top: 20px;
	    border: none;
	    font-size: 14px;
	    color: #ff0000;
	}
	
	#password-strength-notes{
		border: none !important;
	    font-size: 14px;
	    color: #ff0000;
	    margin-left: 0rem;
	    margin-bottom: 0rem !important;
	}
	
	.login-error p{
	    margin: 0 20px 0px 20px;
	}
	
	.padding-20{
		padding: 20px;
	}
	
	.padding-top-10{
		margin-top: 10px;
	}
	
	.reset-error-msg{
		font-size: 14px;
	    color: #ff0000;
	    border:  none !important;
	    padding-right: 0px !important;
	}
	
	
	.pwd-failed{
		margin-left: 1px;
	}
	
	.strength-hide{
		display:  none !important;
	}
	
	.submit-reset-button{
		position: relative;
	    height: 42px;
	    width: 45%;
	    border-radius: 4px;
	    color: #FFFFFF;
	    background: #304E84;
	    text-transform: uppercase;
	    padding-left: 10px;
	    float: right;
	    outline-color: #304E84;
	    left: -2px;
		margin-top: 12px;
		border-width: 0;
	}
	
	.cnl-reset{
		margin-top: 12px !important;
	}
	
	#button-reset{
		margin-left: -12px;
	}
	
	input::-ms-reveal, input::-ms-clear {
        display: none !important;
    }
      
   .email-card-return {
	    position: relative;
	    width: 450px;
	    min-height: 160px;
	    float: left;
	    margin-top: 20px;
	    background: #FFFFFF;
	    border: 1px solid #E0E0E0;
	    box-sizing: border-box;
	    border-radius: 4px;
	}
	
	.btn-link {
		color: #FFF !important;
	    align-items: center;
	    padding: 11px 165px;
	    text-decoration: none;
	    background: #304E84;
	    margin: 0;
	}
	
	#max_img {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 40%;
	}

	.margin-btm-20{
		margin-bottom: 20px;
	}
	
	.reset-fail-btn {
		padding: 10px 178px;
	}
	
	.error-btn {
		padding: 11px 147px;
	}
	
	.row {
		--bs-gutter-x: 0.5rem !important;
	}
	
	@media only screen and (max-width: 600px) {
 		#loginFooter {
			width: 100% !important;
			bottom:0%;
		}
		#login-banner {display : none !important;}
		.fullheight {min-height: 100vh !important; padding-bottom: 0;}
		.max-450 {        
			max-width: 100%;        
			margin: auto;
		}
		#passwordManagementForm, .p-4 {padding:0 !important;}
		#maxInventory_logo {
		    position: relative;
		    width: 100%;
		    float: none;
		    max-width: 100%;
		    display: flex;
		    padding: 0 25px;
   		}
   		#inv_img, #max_img {
   			max-width: 100%;
   		}
   		.inventry {
   			padding-left: 5px;
   		}
   		.form-container-login, .column, .reset_panel, .email-card-return,
   		 .email-card, .label-pwd-enter, .confirm_panel {
   			width: 100%;
   		}
   		.reset { min-width: 100%; }
		#username, #password, .submit-btn-login {width:88%;}
		 #confirmedPassword {
		 	width:88% !important;
		 	margin-left: -20px !important;
		 }
		#mainEye {right: 12%; top: 30%;}
		.logo-footer {
			display: block;
			max-width: 94%;
			position: relative;
			width: 100%;
			float: left;
			text-align: right;
			display: flex;
			justify-content: end;
			align-items: center;
		}
		#pwd-label, #unm-label {left:20px; top:-10px;}
		.powered {position: static;}
		.form-container-login .p-relative{float:none;}
		.btn-rtn {padding: 8px 18px; width: 100%; position:static}
		.rtn-text {width: 100%;margin:0;position: static;}
		.error-btn {padding: 4% 30%;}
		.reset-fail-btn {padding: 4% 42%;}
		
   		#reset-pwd{
   			padding: 0;
   			background: none;
   			width: 100%;
		}
		.conf-label { left: 10%; }
	}