@font-face {
	font-family: 'NunitoSans';
	src: url('../fonts/NunitoSans-Variable.woff2') format("woff2-variations");
	font-weight: 1 1000;
}
@font-face {
	font-family: 'NunitoSans';
	src: url('../fonts/NunitoSans-Italic-Variable.woff2') format("woff2-variations");
	font-weight: 1 1000;
	font-style: italic;
}

:root { 
    box-sizing: border-box;
    font-family: NunitoSans, sans-serif;
    font-weight: 300;
    line-height: 1.3;
    --action: #f2B272;
    --action-accent: #f26722;
    --blue-strong: #95b4d8;
    --blue-weak: #7686e5;
    --page-accent: #3f3f3f; 
    --page: #171717;
    --text: #eee;
    --subtle: #777777;
    --warning: #da5050;
    --warning-text: #5f1817;
    --success: #06d6a0;
    --success-text: #163116;
}

.light {
    --action: #f26722;
    --action-accent: #f2B272;
    --blue-strong: #4949b7;
    --blue-weak: #95b4d8;
    --page: #ffffff;
    --page-accent: #f5f5f5;
    --text: #333;
    --subtle: #cccccc;
    --warning: #f3a7a7;
    --warning-text: #a94442;
    --success: #d6efcc;
    --success-text: #3c763d;
}

.bg-action { background-color: var(--action); }
.bg-action-accent { background-color: var(--action-accent); }
.bg-page { background-color: var(--page); }
.bg-page-accent { background-color: var(--page-accent); }
.bg-text { background-color: var(--text); }

.action { color: var(--action); }
.action-accent { color: var(--action-accent); }
.page { color: var(--page); }
.page-accent { color: var(--page-accent); }
.text { color: var(--text); }
.blue-strong { color: var(--blue-strong); }
.blue-weak { color: var(--blue-weak); }

.b-subtle { border-color: var(--subtle); }

html {
    font-size: 16px;
}
body {
    background-color: var(--page);
    color: var(--text);
}
body,html,:root,input,button {font-family: NunitoSans, sans-serif;}

h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
}

a {
    color: var(--action);
    transition: all .2s;
}

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

a:hover, a:active {
    color: var(--action-accent);
}

.bg-pattern {
    background-image: url('Images/loginSplashTop.svg'), url('Images/loginSplashBottom.svg');
    background-repeat: no-repeat;
    background-position: top right, bottom left;
    background-size: auto 50vmin;
}



/*
    ===================
    COMPONENTS
    ===================
*/
.alert {
    border-radius: .5rem;
    margin-bottom: .5rem;
    margin-top: .5rem;
    padding: 1rem;
    color: #333;
    background-color: #ffdcac;
}
.alert-hidden,
.validation-summary:empty {
    display: none;
}
.alert-info { background-color: #ffdcac; }
.alert-danger { background-color: var(--warning); color: var(--warning-text);}
.alert-warning { background-color: var(--warning); color: var(--warning-text);}
.alert-error { background-color: var(--warning); color: var(--warning-text);}
.alert-success { background-color: var(--success); color: var(--success-text);}

.validation-summary,
.validation-invalid,
.validation-valid {
    padding: 8px;
    margin: 0 auto;
    border: 1px solid transparent;
    border-radius: 8px;
}
.validation-summary,
.validation-invalid{
    color: var(--warning-text);
    background-color: var(--warning);
}
.validation-valid{
    color: var(--success-text);
    background-color: var(--success);
}

.validation-summary > ul {
    margin: 0;
    padding-left: 1rem;
}

.close {
    border: 0;
    background: transparent;
    opacity: .5;
    cursor: pointer;
    transform: scale(2);
    vertical-align: middle;
    margin-top: -.5rem;
    transition: all .3s;
}
.close:hover {
    opacity: 1;
}




    
/*** FORMS ON PAGE ***/
.wrapper-input-loginpassword {
	position: relative;
	margin: 1rem 0.5rem 2rem;
}
.u-input-minimal {
	outline: 0;
	border: none;
	border-bottom: 1px solid #cccccc;
	background-color: transparent;
	color: #eee;
	color: var(--text);
	font-family: NunitoSans, sans-serif;
	line-height: 1.3;
	transition: all .3s;
}
.u-input-minimal:focus {
    border-bottom-color: var(--blue-strong);
    box-shadow: 0 3px var(--blue-strong);
}

.u-input~.label-slideup {
    color: var(--text);
    font-size: 1rem;
    font-weight: normal;
    left: 0;
    bottom: .5rem;
    opacity: .7;
    position: absolute;
    transition: all .3s;
    width: 100%;
}
.u-input:not([value=""])~.label-slideup, 
.u-input:focus~.label-slideup {
    font-size: .8rem;
    transform: translateY(-2rem);
}

.u-input-loginpassword {
	width: 100%;
	padding: .5rem .125rem;
	font-size: 110%;
}

.wrapper-rememberme {
	display: flex;
	position:relative;
	margin: 0 .5rem 1rem;
}


.btn {
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-block;
    font-weight: 300;
    font-size: 1rem;
    letter-spacing: .03125em;
    line-height: 1.42857143;
    overflow: hidden;
	position: relative;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    touch-action: manipulation;
    -ms-touch-action: manipulation;
    transition: all .3s;
    white-space: nowrap;
    border: 1px solid #f08231;
    border-radius: 6px;
    color: #f08231;
    padding: .25em 1em
}

.btn:hover,
.btn:active,
.btn.btn-primary:hover,
.btn.btn-primary:active {
    background-color: #FFF1C4;
    border-style: solid;
    border-width: 1px;
    box-shadow: 1px 1px 3px rgba(0,0,0,.15);
    color: #f08231;
    text-decoration: none;
}
.btn:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}
.btn:disabled,
.btn.disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: .65;
}

.btn.btn-primary {
    background-color: #fdcb26;
    border-color: #fdcb26;
    color: #333;
    letter-spacing: 1px;
}

.btn-wrapper-wide .btn {
    width: 100%;
}

.wrapper-btn-loginpassword {
	padding-left: .5rem;
	padding-right: .5rem;
}
.wrapper-forgot-register {
	padding-left: .5rem;
	padding-right: .5rem;
	margin: 0.5rem 0 1rem;
	font-size: 90%;
}

/* handling when oauth is enforced so using username and password is to be discouraged*/
.deprioritize-loginpassword,
.deprioritize-loginpassword + .wrapper-forgot-register {
	opacity: 50%;
	transition: all .2s;
	margin-left: 10%; 
	margin-right: 10%;
	margin-bottom: 0;
}
.deprioritize-loginpassword {
	margin-top: 3rem;
}
.deprioritize-loginpassword:hover,
.deprioritize-loginpassword + .wrapper-forgot-register:hover {
	opacity: 100%;
}
.deprioritize-loginpassword .wrapper-input-loginpassword {
	margin: 0 0 .75rem;
}
.deprioritize-loginpassword .u-input-loginpassword {
	font-size: 90%;
	padding: .25rem .125rem;
}
.deprioritize-loginpassword .u-input-loginpassword~.label-slideup{
	bottom: 0;
}
.deprioritize-loginpassword .u-input-loginpassword:not([value=""]) ~ .label-slideup,
.deprioritize-loginpassword .u-input-loginpassword:focus ~ .label-slideup {
	font-size: .7rem;
	transform: translateY(-1.5rem);
}
.deprioritize-loginpassword .wrapper-rememberme {
	margin: 0 0 0.25rem;
}
.deprioritize-loginpassword .wrapper-rememberme label {
	font-size: 0.9rem;
}
.deprioritize-loginpassword .wrapper-btn-loginpassword {
	padding: 0;
}
.deprioritize-loginpassword .wrapper-btn-loginpassword .btn {
	width: 6rem;
	background-color: transparent;
	color: #fdcb26;
}
.deprioritize-loginpassword .wrapper-btn-loginpassword .btn:hover,
.deprioritize-loginpassword .wrapper-btn-loginpassword .btn:active {
	background-color: #FFF1C4;
	color: #f08231;
}
.deprioritize-loginpassword  + .wrapper-forgot-register {
	margin-left: 10%;
	margin-right: 10%;
	padding: 0;
}


/*button group - including nested groups (eg for dropdowns)*/
.btn-group {
	display: inline-block;
	display: inline-flex;
	flex-wrap: wrap;
}
.btn-group > *:not(:last-child),
.btn-group > *:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.btn-group > *:not(:first-child),
.btn-group > *:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.btn-group > *:not(:first-child) {
    margin-left: -1px;
}

/*fallback for old IE*/
.btn-group:before, .u-btn-group:after { content: " "; display: table; }
.btn-group:after { clear: both; }
.btn-group { *zoom: 1; }
.btn-group > * { float: left; }

/* One-time password entry */
.otp {
	background-color: var(--page);
	border-top: 0;
	border-right: 0;
	border-left: 0;
	border-bottom: 2px solid #eee;
	color: var(--text);
	display: block;
	font-size: 1.5rem;
	font-family: monospace;
	letter-spacing: 1rem;
	padding-bottom: .25rem;
	padding-left: 1rem;
	width: 12.5rem; /*adds the half rem to make sure all characters display after typing in the 6th character on Firefox and Safari*/
}

/* bootstrap-switch custom styling*/
.bootstrap-switch
{
    border-color: #e0e0e0;
}
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-label
{
    padding: 3px 9px;
}
.DataGrid .bootstrap-switch .bootstrap-switch-handle-off,
.DataGrid .bootstrap-switch .bootstrap-switch-handle-on,
.DataGrid .bootstrap-switch .bootstrap-switch-label
{
    padding: 2px 9px;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary 
{
    color: #555;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary 
{
    background: #DFF0D8 none repeat scroll 0% 0%
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default
{
    background: #f5f5f5 none repeat scroll 0% 0%
}
    
/*** small device specific ***/   
@media (max-width: 666px) {
    .alert 
    {
        font-size: 0.9em;
        line-height: 1em;
    }
}