/*
Copyright 2011-2021 Skyway Networks, LLC.  All rights reserved.  This software, in whole or any part, may only be licensed for use by written permission exclusively by Skyway Networks, LLC.  Any other infringing use, or removal of this copyright statement, is prohibited and will be prosecuted to the full extent of United States of America and international copyright law.
*/

a
{
     color: #694495;
     text-decoration: none;
}

a:hover
{
     text-decoration: underline;
}

a:visited
{
     color: #cc4499;
}

fieldset
{
     border-radius: 1rem;
}

fieldset legend
{
	font-size: 2.3rem;
	font-family: 'WeblySleek UI Semibold',Arial,Helvetica,sans-serif;
	font-weight: normal;
	font-style: normal;
	color: #000000;
}

input,
button,
select
{
     border-radius: 0.5rem;
}

main
{
     margin-top: 4rem;
}

.SmallTextField
{
     width: 10rem;
}

.MedTextField
{
     width: 15rem;
}

.LargeTextField
{
     width: 20rem;
}

.XLargeTextField
{
     width: 25rem;
}

/* Admin Navigation Styles */

@media (width >= 1145px)
{
	#AdminHeader
	{
		position: fixed;
		top: 0rem;
		width: 100%;
		height: auto;
		display: flex;
		flex-flow: row nowrap;
		gap: 0rem 3.5rem;
		flex-basis: max-content;
		background-color: #13a89e;
		min-height: 3.5rem;
		box-shadow: 0.1rem 0.2rem 0.4rem rgba(0, 0, 0, .5);
		animation-name: InPlaceFadeIn;
		animation-duration: 0.5s;
		animation-timing-function: linear;
		z-index: 15;
	}

	#AdminHeader > div:first-child
	{
		margin-left: 1rem;
	}

	#AdminHeader > div
	{
		font-size: 1.65rem;
		font-family: 'WeblySleek UI Semibold',Arial,Helvetica,sans-serif;
		font-weight: normal;
		font-style: normal;
		color: #FFFFFF;
		text-decoration: none;
		cursor: pointer;
		margin: 1rem 0rem 1rem 0rem;
	}

	#SmallScreenNavHeader
	{
		display: none;
	}
}

@media (width < 1145px)
{
	#SmallScreenNavHeader
	{
		display: block;
		position: fixed;
		top: 0rem;
		width: 100%;
		height: 4rem;
		background-color: #13a89e;
		box-shadow: 0.1rem 0.2rem 0.4rem rgba(0, 0, 0, .5);
		animation-name: InPlaceFadeIn;
		animation-duration: 0.5s;
		animation-timing-function: linear;
		z-index: 15;
	}

	#SmallScreenNavHeader > a
	{
		font-size: 2.1rem;
		font-family: 'WeblySleek UI Semibold',Arial,Helvetica,sans-serif;
		font-weight: normal;
		font-style: normal;
		color: #FFFFFF;
		text-decoration: none;
		cursor: pointer;
		margin-left: 1rem;
	}

	#AdminHeader
	{
		position: fixed;
		top: 3rem;
		width: 100%;
		height: auto;
		display: none;
		flex-flow: column nowrap;
		gap: 0.5rem 0rem;
		flex-basis: max-content;
		background-color: #13a89e;
		padding-bottom: 1.5rem;
		box-shadow: 0.1rem 0.2rem 0.4rem rgba(0, 0, 0, .5);
		animation-name: InPlaceFadeIn;
		animation-duration: 0.5s;
		animation-timing-function: linear;
		z-index: 10;
	}

	#AdminHeader > div
	{
		font-size: 1.8rem;
		font-family: 'WeblySleek UI Semibold',Arial,Helvetica,sans-serif;
		font-weight: normal;
		font-style: normal;
		color: #FFFFFF;
		text-decoration: none;
		cursor: pointer;
		margin: 2rem 0rem 1rem 1rem;
	}
}

#SignOutLink
{
	color: #FFFFFF;
	text-decoration: none;
}

@media (width >= 1145px)
{
	#SignOutLink:hover
	{
		color: #fded29;
	}

	.AdminSubNavRow
	{
		display: flex;
		flex-flow: row nowrap;
		gap: 0rem 3.5rem;
		flex-basis: max-content;
	}

	.AdminSubNavHeader1
	{
		font-size: 1.65rem;
		font-family: 'WeblySleek UI Semibold',Arial,Helvetica,sans-serif;
		font-weight: bold;
		font-style: normal;
		color: #fb831b;
		text-decoration: none;
		padding: 0.5rem 0rem 0.5rem 0.5rem;
	}

	.AdminSubNavHeader2
	{
		font-size: 1.45rem;
		font-family: 'WeblySleek UI Semibold',Arial,Helvetica,sans-serif;
		font-weight: bold;
		font-style: normal;
		text-decoration: none;
		padding: 0.5rem 0rem 0.5rem 0.5rem;
	}

	.AdminSubNavColumn > div a:link,
	.AdminSubNavColumn > div a:visited
	{
		display: block;
		font-size: 1.65rem;
		font-family: 'WeblySleek UI Semibold',Arial,Helvetica,sans-serif;
		font-weight: normal;
		font-style: normal;
		text-decoration: none;
		color: #694495;
		padding: 0.5rem 0rem 0.5rem 0.5rem;
	}

	.AdminSubNavColumn > div a:hover
	{
		text-decoration: underline;
	}

	#CloseCMSSubNavMenu,
	#CloseBoxOfficeSubNavMenu,
	#CloseReportingSubNavMenu
	{
		display: none;
	}
}

@media (width < 1145px)
{
	.AdminSubNavRow
	{
		display: flex;
		flex-flow: column nowrap;
		gap: 3.5rem 0rem;
		flex-basis: max-content;
	}

	.AdminSubNavHeader1
	{
		font-size: 1.8rem;
		font-family: 'WeblySleek UI Semibold',Arial,Helvetica,sans-serif;
		font-weight: bold;
		font-style: normal;
		color: #fb831b;
		text-decoration: none;
		padding: 0.5rem 0rem 0.5rem 0.5rem;
	}

	.AdminSubNavHeader2
	{
		font-size: 1.6rem;
		font-family: 'WeblySleek UI Semibold',Arial,Helvetica,sans-serif;
		font-weight: bold;
		font-style: normal;
		text-decoration: none;
		padding: 0.5rem 0rem 0.5rem 0.5rem;
	}

	.AdminSubNavColumn > div a:link,
	.AdminSubNavColumn > div a:visited,
	#CloseCMSSubNavMenu,
	#CloseBoxOfficeSubNavMenu,
	#CloseReportingSubNavMenu
	{
		display: block;
		font-size: 1.8rem;
		font-family: 'WeblySleek UI Semibold',Arial,Helvetica,sans-serif;
		font-weight: normal;
		font-style: normal;
		text-decoration: none;
		color: #694495;
		padding: 0.5rem 0rem 0.5rem 0.5rem;
	}
}

.AdminSubNavColumn
{
	display: flex;
	flex-flow: column nowrap;
	padding-top: 1rem;
}

#CMSSubNavGroup,
#BoxOfficeSubNavGroup,
#ReportingSubNavGroup
{
     display: none;
     position: absolute;
     float: left;
     top: 3.8rem;
     left: 0rem;
     background-color: #FFFFFF;
}

.SubNavGroupFadeIn
{
     animation-name: FadeInFromLeft;
     animation-duration: 0.25s;
     animation-timing-function: ease-out;
}

.SubNavGroupFadeOut
{
     animation-name: InPlaceFadeIn;
     animation-duration: 0.25s;
     animation-timing-function: linear;
     animation-direction: reverse;
     animation-fill-mode: forwards;
}

/* Login Page Styles */

@media (width >= 1145px)
{
	#LoginFormFieldsBox
	{
		display: flex;
		flex-direction: column;
		width: 36rem;
		height: auto;
		align-items: center;
		justify-content: center;
		padding-top: 2rem;
		margin-left: auto;
		margin-right: auto;
		animation-name: FadeInFromBottom;
		animation-duration: 0.5s;
		animation-timing-function: ease-out;
	}

	#LoginSiteLogo
	{
		width: 25rem;
		height: auto;
	}

	.LoginFormFieldValue
	{
		display: inline-block;
		width: 34rem;
		margin-top: 0.2rem;
		padding: 1rem 1rem 1rem 1rem;
	}

	#LoginBtn
	{
		width: 36rem;
		padding: 1rem 1rem 1rem 1rem;
		color: #FFFFFF;
		background-color: #13a89e;
	}

	#ErrorBox
	{
		width: 36rem;
		height: auto;
		border: 0.2rem dashed #F00F00;
		margin-top: 1.5rem;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 2rem;
	}
}

@media (width < 1145px)
{
	#LoginFormFieldsBox
	{
		display: flex;
		flex-direction: column;
		width: 30rem;
		height: auto;
		align-items: center;
		justify-content: center;
		padding-top: 2rem;
		margin-left: auto;
		margin-right: auto;
		animation-name: FadeInFromBottom;
		animation-duration: 0.5s;
		animation-timing-function: ease-out;
	}

	#LoginSiteLogo
	{
		width: 15rem;
		height: auto;
	}

	.LoginFormFieldValue
	{
		display: inline-block;
		width: 28rem;
		margin-top: 0.2rem;
		padding: 1rem 1rem 1rem 1rem;
	}

	#LoginBtn
	{
		width: 28rem;
		padding: 1rem 1rem 1rem 1rem;
		color: #FFFFFF;
		background-color: #13a89e;
	}

	#ErrorBox
	{
		width: 30rem;
		height: auto;
		border: 0.2rem dashed #F00F00;
		margin-top: 1.5rem;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 2rem;
	}
}

#LoginGreetingText
{
	font-size: 3rem;
	font-family: 'WeblySleek UI Semibold',Arial,Helvetica,sans-serif;
	font-weight: bold;
	font-style: normal;
	color: #000000;
	margin-bottom: 2rem;
}

#ErrorBoxMargins
{
	padding: 0.4rem 1rem 0.4rem 1rem;
}

.LoginFormFieldLabel
{
     display: inline-block;
     width: 20rem;
     margin: 1rem 0.5rem 0rem 0rem;
}

.ResetPassphraseFormFieldsBox
{
     width: 52rem;
     height: auto;
     margin-top: 2rem;
     margin-left: auto;
     margin-right: auto;
     animation-name: FadeInFromBottom;
     animation-duration: 0.5s;
     animation-timing-function: ease-out;
}

#GenPassphraseBtn
{
	width: 30rem;
	padding: 1rem 0.8rem 1rem 0.8rem;
	color: #FFFFFF;
	background-color: #72397a;
	margin-left: 0.5rem;
}

#GenPassphraseTips > li
{
	margin-bottom: 0.5rem;
}

@keyframes FadeInFromTop
{
    0%
    {
        transform: translateY(-1rem);
        opacity: 0;
    }

    25%
    {
        transform: translateY(-0.75rem);
        opacity: 0.25;
    }

    50%
    {
        transform: translateY(-0.5rem);
        opacity: 0.5;
    }

    75%
    {
        transform: translateY(-0.25rem);
        opacity: 0.75;
    }

    100%
    {
        transform: translateY(0rem);
        opacity: 1;
    }
}

@keyframes FadeInFromBottom
{
    0%
    {
        transform: translateY(1rem);
        opacity: 0;
    }

    25%
    {
        transform: translateY(0.75rem);
        opacity: 0.25;
    }

    50%
    {
        transform: translateY(0.5rem);
        opacity: 0.5;
    }

    75%
    {
        transform: translateY(0.25rem);
        opacity: 0.75;
    }

    100%
    {
        transform: translateY(0rem);
        opacity: 1;
    }
}

@keyframes FadeInFromLeft
{
    0%
    {
        transform: translateX(-1rem);
        opacity: 0;
    }

    25%
    {
        transform: translateX(-0.75rem);
        opacity: 0.25;
    }

    50%
    {
        transform: translateX(-0.5rem);
        opacity: 0.5;
    }

    75%
    {
        transform: translateX(-0.25rem);
        opacity: 0.75;
    }

    100%
    {
        transform: translateX(0rem);
        opacity: 1;
    }
}

@keyframes FadeInFromRight
{
    0%
    {
        transform: translateX(1rem);
        opacity: 0;
    }

    25%
    {
        transform: translateX(0.75rem);
        opacity: 0.25;
    }

    50%
    {
        transform: translateX(0.5rem);
        opacity: 0.5;
    }

    75%
    {
        transform: translateX(0.25rem);
        opacity: 0.75;
    }

    100%
    {
        transform: translateX(0rem);
        opacity: 1;
    }
}

@keyframes InPlaceFadeIn
{
    0%
    {
        opacity: 0;
    }

    25%
    {
        opacity: 0.25;
    }

    50%
    {
        opacity: 0.5;
    }

    75%
    {
        opacity: 0.75;
    }

    100%
    {
        opacity: 1;
    }
}

#LoginBtnBox
{
     margin-top: 1.5rem;     
}

#TroubleLoggingInBox
{
     margin-top: 2.5rem;
     animation-name: FadeInFromBottom;
     animation-duration: 0.5s;
     animation-timing-function: ease-out;
}

.ValidationError
{
     border: 0.2rem solid red;
}

#BreadCrumbNav
{
     font-size: 1.6rem;
     font-family: 'WeblySleek UI Semibold',Arial,Helvetica,sans-serif;
     font-weight: normal;
     font-style: normal;
     color: #000000;
     padding: 1rem 0rem 1rem 1rem;
     animation-name: FadeInFromLeft;
     animation-duration: 0.25s;
     animation-timing-function: ease-out;
}

#BGShade
{
     display: none;
     position: fixed;
     left: 0rem;
     top: 0rem;
     width: 100vw;
     height: 100vh;
     z-index: 2;
     background-color: #CCCCCC;
     opacity: 0.4;
}

#SaveStatusModal
{
     display: none;
     position: fixed;
     top: 45%;
     left: 40%;
     width: auto;
     max-width: 20vw;
     height: auto;
     max-height: 20vh;
     padding: 0rem 3rem 0rem 3rem;
     z-index: 3;
     background-color: #FFFFFF;
     border: 0.1rem solid #000000;
     animation-name: FadeInFromTop;
     animation-duration: 0.25s;
     animation-timing-function: ease-out;
}

#ValidationErrorModal
{
     display: none;
     position: fixed;
     top: 20%;
     left: 33%;
     width: auto;
     max-width: 33vw;
     height: auto;
     max-height: 60vh;
     padding: 0rem 3rem 0rem 3rem;
     scroll-behavior: smooth;
     overflow-y: auto;
     z-index: 3;
     background-color: #FFFFFF;
     border: 0.1rem solid #000000;
     animation-name: FadeInFromTop;
     animation-duration: 0.5s;
     animation-timing-function: ease-out;
}

#SessionExpirationModal
{
     display: none;
     position: fixed;
     top: 45%;
     left: 37.5%;
     width: auto;
     max-width: 25vw;
     height: auto;
     max-height: 20vh;
     padding: 0rem 3rem 1rem 3rem;
     z-index: 3;
     background-color: #FFFFFF;
     border: 0.1rem solid #000000;
     animation-name: FadeInFromTop;
     animation-duration: 0.5s;
     animation-timing-function: ease-out;
}

input.ToggleSwitch:empty
{
	margin-left: -900rem;
}

input.ToggleSwitch:empty ~ label
{
	position: relative;
	float: left;
	line-height: 1.6rem;
	text-indent: 4rem;
	margin: 0.2rem 0rem 0.2rem 0rem;
	cursor: pointer;
	user-select: none;
}

input.ToggleSwitch:empty ~ label:before, 
input.ToggleSwitch:empty ~ label:after
{
	position: absolute;
	display: block;
	top: 0rem;
	bottom: 0rem;
	left: 0rem;
	content: ' ';
	width: 3.6rem;
	background-color: #c33c33;
	border-radius: 0.3rem;
	box-shadow: inset 0rem 0.2rem 0rem rgba(0,0,0,0.3);
	transition: all 100ms ease-in;
}

input.ToggleSwitch:empty ~ label:after
{
	width: 1.4rem;
	top: 0.1rem;
	bottom: 0.1rem;
	margin-left: 0.1rem;
	background-color: #ffffff;
	border-radius: 0.15rem;
	box-shadow: inset 0rem -0.2rem 0rem rgba(0,0,0,0.2);
}

input.ToggleSwitch:checked ~ label:before
{
	background-color: #339933;
}

input.ToggleSwitch:checked ~ label:after
{
	margin-left: 2rem;
}