@font-face {
    font-family: 'OpenSansRegular';
    src: url('OpenSans-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansSemiBold';
    src: url('OpenSans-SemiBold.ttf');
    font-weight: normal;
    font-style: normal;
}

:root {
/*Customizable Color Palette*/
/*Taking out css variables; not IE11 compatible
  Retaining this code for reference when we build
  the admin page
    --RRD-dark-blue: rgb(31, 43, 74); --
    --RRD-dark-blue-op11: rgb(31, 43, 74, 0.11); --
    --RRD-teal: rgb(0, 191, 179); --
    --RRD-teal-op4: rgba(0, 191, 179, 0.4); --
    --RRD-teal-op11: rgba(0, 191, 179, 0.11); --
    --white: #ffffff; --
    --medium-grey: #999999; --
    --RRD-red: #e03c31; --
    */
}
html,body {
    height: 100vh;
    padding: 0;
    margin: 0;
    line-height: 1;
}
main>p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #333333;
}

.shadow {
	z-index: 1;
}
.skippy-text {
	display: block;
	height: 50px;
	width: 100vw;
	display: table-cell;
	vertical-align: middle;
	background-color: #FFFFFF;
}

span.skippy-text {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #333333;
}

a.sr-only.sr-only-focusable:link {
	outline: none;
	color: #333333;
}


.container-bg {
  min-height: 100vh;
  background: {BGCOLOR};
  padding-top: 80px;
  background-image: url('/customerfiles/PROTOOLS/other/2025.06.20.03.49.42_ProTools-login-51225vK4.png'); 
  background-position: center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover; 
  background-size: cover;
}

.content {
	display:block;
	
}

.login-block {
	background: #4C4C4E;
	border-bottom-left-radius: .25rem;
    border-bottom-right-radius: .25rem;
    padding: 20px;
}

span.spanOR {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	color: #333333;
}

/* Links */
a.text-link:link {
	font-family: 'Open Sans', sans-serif;
    text-decoration: none;
    color: #333333;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    
}
a.text-link:hover, a.text-link:focus {
    text-decoration: underline;
    color: #333333;
}
a.text-link:active {
    border-radius: 4px;
    border: solid 1px #333333;
    background-color: #3333330f;
    text-decoration: none;
}

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

.btn {
	height: 3.125rem;
}

#linkRequestAccess {
    margin-bottom: 0rem;
}

.tooltip-main
{
	height: 40px;
	background-color: #D7D2CB;
  	border-radius: 0.25rem;
}
.tooltip-inner
{
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
  	font-size: 14px;
 	color: #1f2b4a;
 	background-color: #D7D2CB;
 	padding: 3px 8px;
}
.tooltip.show
{
	opacity: 1;
}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before 
{
	width: 1rem;
	border-bottom-color: #D7D2CB;
}

/*Input Fields*/
.bg-white {
    padding: 20px;
}
.form-group {
    margin-bottom: 1.5625rem;
}
.form-control {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	border: solid 1px #767676;
	color: #333333 !important;
	height: 3.5rem;
}
.form-control:focus {
	border: solid 1.5px #a6a8ab;
	box-shadow:none;
	color: #333333 !important;
}
.form-control:hover:not(:focus) {
	border: solid 1px #a6a8ab;
	color: #333333;
}
 .form-control:focus ~ label {
	color: #a6a8ab;
}
.form-control:focus::-webkit-input-placeholder { 
	color:transparent; 
}

.form-control.requiredError {
	border: solid 2px #DF3429;
}

.form-control:hover:not(:focus).requiredError {
	border: solid 1px rgb(223, 52, 41);
	color: #333333;
}

/*Input field Labels*/
.border-label-float {
  display: block;
  position: relative;
}
.border-label-float label {
  position: absolute;
  left: 0;
  top: 0;
  cursor: text;
  font-size: 12px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  opacity: 1;
  -webkit-transition: all .2s;
          transition: all .2s;
  top: -.5em;
  left: 0.75rem;
  z-index: 1;
  padding: 0 1px;
  color: #4C4C4E;
}
.border-label-float label::after {
  content: " ";
  display: block;
  position: absolute;
  background: #ffffff;
  height: 2px;
  top: 50%;
  left: -.2em;
  right: -.2em;
  z-index: -1;
  color: #4C4C4E;
}
.border-label-float .form-control::-webkit-input-placeholder {
  opacity: 1;
  -webkit-transition: all .2s;
          transition: all .2s;
}
.border-label-float .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder {
  opacity: 0;
}
.border-label-float .form-control:placeholder-shown:not(:focus) + * {
  font-size: 100%;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  top: 1.2rem;
  color: #767676;
}
/*Input field Labels for FF*/
.border-label-float .form-control::-moz-placeholder {
  opacity: 1;
  -webkit-transition: all .2s;
          transition: all .2s;
}
.border-label-float .form-control:placeholder-shown:not(:focus)::-moz-placeholder {
  opacity: 0;
}
/*Input field Labels for IE11*/
.border-label-float .form-control::-ms-input-placeholder {
  opacity: 1;
  -webkit-transition: all .2s;
          transition: all .2s;
}
.border-label-float .form-control:-ms-input-placeholder:not(:focus) + * {
  font-size: 100%;
  font-family: 'Open Sans', sans-serif;
  font-weight: normal;
  opacity: -1.1;
  top: .6em;
  color: #767676;
}

.border-label-float label.requiredError  {
	color: #DF3429 !important;
}

:-ms-input-placeholder.form-control.requiredError {
	color: #DF3429 !important;
	opacity: 1;
}

/*Password Toggle Icon*/
.passwordToggleIcon {
	position: absolute;
    top: .25rem;
    right: 0;
    border: none;
    background: none;
}
.passwordToggleIcon:focus {
    outline: none;
}
.passwordToggleIcon:focus svg g circle {
    fill-opacity: 0.2;
}
.toggleVisible svg g circle, .toggleNotVisible svg g circle {
	fill-opacity: 0;
	fill: #4C4C4E;
}
.toggleVisible:hover svg g circle, .toggleNotVisible:hover svg g circle {
	fill-opacity: 0.06;
	fill: #4C4C4E;
}
.toggleVisible:focus svg g circle, .toggleNotVisible:focus svg g circle {
	fill-opacity: 0.2;
	fill: #4C4C4E;
}
.toggleVisible:active svg g circle, .toggleNotVisible:active svg g circle {
	fill-opacity: 0.1;
	fill: #4C4C4E;
}

.toggleVisible svg g path.passwordToggleIconPath, .toggleNotVisible svg g path.passwordToggleIconPath {
	fill: #4C4C4E;
}

/*Buttons*/
.primary-button {
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 1.1875rem;
	background-color: #a6a8ab;
	color: #FFFFFF;
}
.primary-button:hover, .primary-button:focus {
	border: solid 1px #a6a8ab;
  	background-color: #ffffff;
  	color: #a6a8ab;
  	box-shadow:none;
}
.primary-button:active {
	border: solid 1px #a6a8ab;
  	background-color: #a6a8ab0f;
  	box-shadow:none;
  	color: #a6a8ab;
}
.secondary-button {
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	background-color: #4C4C4E;
	color: #FFFFFF;
}
.secondary-button:hover, .secondary-button:focus {
	border: solid 1px #4C4C4E;
	color: #4C4C4E;
  	background-color: #ffffff;
  	box-shadow:none;
}
.secondary-button:active {
	border: solid 1px #4C4C4E;
  	background-color: #4C4C4E0f;
  	box-shadow:none;
  	color: #4C4C4E;
}
.close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover {
    opacity: 1;
}

/*modal overrides*/
.modal-title {
	font-size: 1.25rem;
}
.no-border {
	border: none;
}
.modal-content  {
  width: 75%;
  margin: 0 auto;
}
.modal-body>.container-fluid>.row>.col p {
	font-family: 'Open Sans', sans-serif;
	font-weight: normal;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #333333;
}
.modal-header {
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	background-color: #4C4C4E;
	color: #FFFFFF;
}
.modal-header-nocolor {
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	color: #ffffff;
}
.closeModal {
    opacity: 1;
}
.closeModal:focus {
    outline: none;
}
.closeModal:focus svg g circle {
    fill-opacity: 0.2;
    fill: #FFFFFF;
}
.closeModal svg g circle {
	fill-opacity: 0;
	fill: #FFFFFF;
}
.closeModal:hover svg g circle {
	fill-opacity: 0.06;
	fill: #FFFFFF;
}
.closeModal:focus svg g circle {
	fill-opacity: 0.2;
	fill: #FFFFFF;
}
.closeModal:active svg g circle {
	fill-opacity: 0.1;
	fill: #FFFFFF;
}
.modal-top-margin {
	margin-top: 200px;
}

.closeModal svg g path.closeIcon {
	fill: #FFFFFF;
}

/*Messages*/
.errorMessage {
	font-family: 'Open Sans', sans-serif;
    font-size: 0.875rem;
    color: #DF3429;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
}

.errorMessageRequest{
	font-family: 'Open Sans', sans-serif;
	font-size: 0.75rem;
	color: #DF3429;
	display: none;
	font-weight: 600;
	line-height: 1.5;
	position: inherit;
	left: 0.75rem;
	top: 0.125rem;
}
.allFieldsReminderText {
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 75%;
	text-align: right;
	text-align: -webkit-right;
	color: #767676;
}
.errorText {
	color: #DF3429;
}

#logo-small {display: block;}

/* FOOTER - START CAP-28615*/
#copyright {
	font-family: 'Open Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 1.5;
    color: #000000;
}

footer {
  background: #D7D2CB;
  color: #000000;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  height: 4.4rem;
}

footer span, footer ul li:nth-child(n+2) {
    content: "";
    border-left: 0.063em solid #000000;
    height: 1.25em;
    top: 25%;
}

footer p {
	word-break: break-all;
}

footer .row {
	height: 50%;
}

footer .list-inline li a {
  color: #000000;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
}

/*  Greater than 768px - Tablets */
@media (min-width:48.0rem) {
	footer {
		font-size: 14px;
		height: 3.5rem;
	}
	footer .row {
		height: 100%;
	}
}

/*  Greater than 992px - Desktops */
@media (min-width:62.0rem) {
	footer {
		font-size: 16px;
		height: 2.875rem;
	}
	footer .row {
	  height: 100%;
	}
}

/*
#footer {
  margin-top: -2.875rem;
  background: #D7D2CB;
  color: #FFFFFF;
  line-height: 2.875rem;
  height: 2.875rem;

}

.list-inline li{
	position: relative;
	padding: 0 15px;
}
.list-inline li a {
	color: #000000;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 1rem;
}
.list-inline li a:hover, .list-inline li a:focus {
    text-decoration: underline;
    color: #000000;
}
.list-inline li a:active {
    border-radius: 4px;
    border: solid 1px rgb(31, 43, 74);
    color: #000000;
    background-color: #D7D2CB;
	text-decoration: none;
}

.list-inline-item:not(:last-child) {
	margin: 0 !important;
}
.list-inline li:not(:last-child):after{
    content: '';
    position: absolute;
    right: -2px;
    width:1px;
    height: 20px;
    top: 30%;
    background: #000000;
}
*/


.nopadding {
	padding: 0 !important;
	margin: 0 !important;
}
.rrd_small svg {
    fill: #000000;
    height: 100%;
    height: 1.3375em;
    width: 2.1125em;
    top: -0.125em;
    position: relative;
    cursor: pointer;
}

.footer-col {
	color: #000000;
	font-weight: 400;
	line-height: 1.5;
}

.footer-col a {
	color: #000000;
}

.footer-col a:hover, a:focus {
    text-decoration: underline;
    color: #000000;
}
/* FOOTER - END CAP-28615 */

.Alert {
	position: relative;
	z-index: 2;
	top: 20px;
	font-weight: bold;
	color: #660000;
	font-size: 12px;
}

.Legal {
	font-size: 10px;
	color: #660000;
}

.Forgot {
	font-size: 11px;
	color: #104075;
}

/* Login Banner */
.banner {
	height: 6.25rem;
	padding: 1.25rem 0rem 1.25rem 1.25rem;
	box-shadow: 0 0.125rem 0.625rem 0.1875rem rgba(0, 0, 0, 0.2);
	background-color: #FFFFFF;
	z-index: 3;
}

.navbar-brand {
	padding: 0 !important;
}

.banner-logo {
      max-width: 90%;
      max-height: 3.75rem;
}

/* Login block text */
.no-padding {
	padding: 0 !important;
	margin: 0 !important;
}

.login-block-header-text {
	margin-top: 2.125rem;
	margin-bottom: 1.5625rem;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.625rem;
	font-weight: 600;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: normal;
	color: #FFFFFF;
}

.login-block-text {
	margin-top: -0.625rem;
	margin-bottom: 1.5625rem;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.1875rem;
	font-weight: 600;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: normal;
	color: #FFFFFF;
}

/* CAP-25939 To assist with flex issues on IE11 */
.banner-flex {
	flex:1 1 0px;
}

.text-block-holder {
	position: relative;
}

/* Login background container text block*/

.login-background-text {
	font-family: 'Open Sans', sans-serif;
	font-size: 2.5rem;
	font-weight: 600;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: normal;
	color: #1f2b4a;
}

/*mock modal containers*/
.mockmodal-container {
	font-family: 'Open Sans', sans-serif;
	font-weight: normal;
	background-color: #ffffff;
	color: #333333;
}

.mockmodal-title {
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	background-color:#4C4C4E; 
	color:#FFFFFF; 
}

.mockmodal-body p {
	line-height : 1.5;
}

.modal-backdrop.show {
    opacity: .6;
}

.subhead {
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 1rem;
	color: #4C4C4E;
}

/*reusable icon classes*/
.icon-dot {
  height: 6px;
  width: 6px;
  background-color: #333333;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  margin-bottom:1px;
}
.icon-pass {
  background-image: url("../../images/done.svg");
  height: 1.25em;
  width: 1.25em;
  display: inline-block;
}
.icon-fail {
  background-image: url("../../images/error.svg");
  height: 1.25em;
  width: 1.25em;
  display: inline-block;
}

/* MEDIA QUERIES */

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  
    .container-bg {
    padding-top: 90px;
	}
    .login-background-text {
	padding-bottom: 200px;
	}
	/* CAP-28615
	#copyright {
    position: absolute;
    top: -17px;
    left: 10px;
    width: 100vw;
	}
	*/
	
	.text-block {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
	
 }

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 993px to 1200px
*/
@media (min-width: 993px) and (max-width: 1200px) {
  	
    p.text-center {
		font-size: 0.875rem;
		color: red;
	}
	.list-inline li a {
		color: #000000;
		font-family: 'Open Sans', sans-serif;
		font-weight: 600;
		font-size: 0.875rem;
	}
	.login-background-text {
		font-size: 2.0rem;
	}
	a.text-link:link {
		font-family: 'Open Sans', sans-serif;
		font-weight: 600;
	    text-decoration: none;
	    color: #333333;
	    font-size: 0.875rem;
	    font-weight: 600;
	    line-height: 1.5;
	}

	/* CAP-28615
	#copyright {
	font-family: 'OpenSansRegular', sans-serif;
    font-size: 0.875rem;
	font-weight: normal;
	width: 300px;
    line-height: 1.5;
    position: absolute;
    top: -26px;
    left: 10px;
	}
	*/
	
	.text-block {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

}
 
/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 992px
*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 992px) 
and (orientation : portrait) {

.container-bg {
 background-image: url('/customerfiles/PROTOOLS/other/2025.06.20.03.49.42_ProTools-login-51225vK4.png');
}	
	
span.skippy-text {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #333333;
}	
	
/* CAP-28615
#copyright {
	font-family: 'Open Sans', sans-serif;
    font-size: 0.875rem;
	font-weight: normal;
	width: 300px;
    line-height: 1.5;
    position: absolute;
    top: -26px;
    left: 10px;
}
#footer {
	height: 55px;
}
*/

.banner {
	height: 5rem;
	padding: 0.9375rem 0rem 0.9375rem 1.25rem;
}

.navbar-brand {
	padding: 0 !important;
}

.banner-logo{
    max-width: 100%;
	max-height: 3.125rem;
}

.login-block-header-text {
	margin-top: 0rem;
	margin-bottom: 1.25rem !important;
	font-size: 1.25rem;
}

.login-block-text {
	margin-bottom: 1.25rem !important;
}

.login-background-text {
	font-size: 1.5rem !important;
	padding-bottom: 130px;
}
.list-inline li a {
	color: #000000;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 0.875rem;
} 
.justify-center {justify-content: center!important;}
 
.offset-md-1 {margin-left: 0 !important;} 

.list-inline li:not(:last-child):after{
    content: '';
    position: absolute;
    right: -2px;
    width:1px;
    height: 36px;
    top: 14%;
    background: #000000;
}

a.text-link:link {
	font-family: 'Open Sans', sans-serif;
    text-decoration: none;
    color: #333333;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
	}
	
	
span.spanOR {
	font-family: 'Open Sans', sans-serif;
	font-weight: normal;
	color: #333333;
	font-size: 0.875rem;
	}
.modal-top-margin {
	margin-top: 250px;
	}
	
} 
/*
==============================================
End of media Tablet (orientation : portrait)
==============================================
*/

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 992px
*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 992px) 
and (orientation : landscape) { 

.container-bg {
 background-image: url('/customerfiles/PROTOOLS/other/2025.06.20.03.49.42_ProTools-login-51225vK4.png');
}

span.skippy-text {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #333333;
}	
	
/* CAP-28615
#copyright {
    width: 100vw;
    line-height: 1.5;
    position: absolute;
    top: -16px;
    left: 10px;
}
*/
	
.requestAccessLink { font-size: 0.75rem; }

.login-block-header-text { font-size: 1.25rem; margin-top: 0rem; }

.login-background-text {
		font-family: 'Open Sans', sans-serif;
		font-size: 1.5rem;
		font-weight: 600;
		font-stretch: normal;
		font-style: normal;
		line-height: 1.5;
		letter-spacing: normal;
	}
.list-inline li a {
		color: #000000;
		font-family: 'Open Sans', sans-serif;
		font-weight: 600;
		font-size: 0.875rem;
	}
.list-inline li:not(:last-child):after{
		content: '';
		position: absolute;
		right: -2px;
		width:1px;
		height: 36px;
		top: 14%;
		background: #000000;
	}
		
	.banner {
		height: 5rem;
		padding: 0.9375rem 0rem 0.9375rem 1.25rem;
	}
	.navbar-brand {
		padding: 0 !important;
	}
	.banner-logo {
        max-width: 100%;
        max-height: 3.125rem;
	}
a.text-link:link {
	font-family: 'Open Sans', sans-serif;
    text-decoration: none;
    color: #333333;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
	}
span.spanOR {
	font-family: 'Open Sans', sans-serif;
	font-weight: normal;
	color: #333333;
	font-size: 0.875rem;
	}	
.modal-top-margin {
	margin-top: 120px;
	}
	
}
/*
==============================================
End of media Tablet (orientation : landscape)
==============================================
*/

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (max-width: 767px) {
  
	.banner-logo {
    	max-width: 90%;
    	max-height: 3.75rem;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
	}    
    
  }
    
/*  
==============================================
End of Media Queries
==============================================

*/

#confirmationModalContent {
	width: 80%;
	margin: 0em auto;
}
#confirmationModalTopper {
	padding: 0.3125em;
}
#confirmationModalBody {
	height: 11.25em; /* 180px base size 16px */
}
#confirmationModalFooter {
	display: inline-block;
	height: auto;
}

#confirmSlideDown {
	position: relative;
	height: 9.375em; /* 150px base size 16px */
	width: 9.375em;
	/* margin-left: 6.25em;  100px base size 16px */
	background-size: contain;
	background-color: #84bd00;
	border-radius: 50%;
	visibility: hidden;
}

.checkmark { 
  position: relative;
  width: 3em; /* The short bar of the mark is about half as long as the long bar */
  height: 6em;
  border: solid white;
  border-width: 0 0.75em 0.75em 0; /* creates the inverted "L" shape */
  left: 3.2em;
  top: 13%;
  -webkit-transform: rotate(45deg); /* tilts the shape */
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#confirmSlideUp {
	position: relative;
}

#confirmText {
    font-family: 'Open Sans', sans-serif;
    color: #333333;
	line-height: 1.5;
	letter-spacing: normal;
}


/*
==============================================
slideDown
==============================================
*/
.slideDown{
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	

	visibility: visible !important;
	position:absolute;
	margin: auto;
	z-index: 300;				
}

@keyframes slideDown {
	0% {
		transform: translateY(-100%);
	}
	50%{
		transform: translateY(8%);
	}
	65%{
		transform: translateY(-4%);
	}
	80%{
		transform: translateY(4%);
	}
	95%{
		transform: translateY(-2%);
	}			
	100% {
		transform: translateY(0%);
	}		
}

@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(-100%);
	}
	50%{
		-webkit-transform: translateY(8%);
	}
	65%{
		-webkit-transform: translateY(-4%);
	}
	80%{
		-webkit-transform: translateY(4%);
	}
	95%{
		-webkit-transform: translateY(-2%);
	}			
	100% {
		-webkit-transform: translateY(0%);
	}	
}

/*
==============================================
slideUp
==============================================
*/
.slideUp {
	animation-name: slideUp;
	-webkit-animation-name: slideUp;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;

	visibility: visible !important;
	position: absolute;
  	z-index: 301;
}

@keyframes slideUp {
	0% {
		transform: translateY(100%);
	}
	50%{
		transform: translateY(-8%);
	}
	65%{
		transform: translateY(4%);
	}
	80%{
		transform: translateY(-4%);
	}
	95%{
		transform: translateY(2%);
	}			
	100% {
		transform: translateY(0%);
	}	
}

@-webkit-keyframes slideUp {
	0% {
		-webkit-transform: translateY(100%);
	}
	50%{
		-webkit-transform: translateY(-8%);
	}
	65%{
		-webkit-transform: translateY(4%);
	}
	80%{
		-webkit-transform: translateY(-4%);
	}
	95%{
		-webkit-transform: translateY(2%);
	}			
	100% {
		-webkit-transform: translateY(0%);
	}	
}

/*
==============================================
toast
==============================================
*/
.toast-container {
	position: fixed;
	top: 2.25em;
	left: 50%;
	margin-left:-14.1875em;
	z-index:2000
}

.toast-success {
	background-color: #ffffff;
	font-size: 1em;
	width: 28.375em;
	max-width: 28.375em;
	border: solid 0.0625em #767676;
	box-shadow: 0 0.125em 0.25em 0 rgba(0, 0, 0, 0.3);
}

.toast-success-header {
	height: 0.625em;
	background-color: #4C4C4E;
}

.toast-success-body {
	margin: 0.9375em 1em 1em;
	overflow: hidden
}

.toast-success-icon {
	float:left;
	width: 2.25em;
	margin-right: 0.9375em;
	height: 2.25em;
}

.toast-success-icon svg path {
	fill: #84BD00;
}

.toast-success-text {
	float:left;
	width: 23.0625em
}

.toast-text {
	font-family: Open Sans; 
	font-size: 1em;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: normal;
	color: #333333;
	margin: 0;
}

.toast-error {
	background-color: #ffffff;
	font-size: 1em;
	width: 28.375em;
	max-width: 28.375em;
	border: solid 0.0625em #df3429;
	box-shadow: 0 0.125em 0.25em 0 rgba(0, 0, 0, 0.3);
}

.toast-error-header {
	height: 0.625em;
	background-color: #df3429
}

.toast-error-body {
	margin: 0.1875em 0.3125em 1em 1em;
	overflow: hidden;
}

.toast-error-icon {
	float:left;
	width: 2.25em;
	margin-right:
	0.9375em;
	margin-top: 0.75em;
}

.toast-error-text {
	float:left;
	width: 20.75em;
	margin-top: 0.75em;
}

.toast-close-icon {
	float:left;
	width: 3em;
}

.toast-close-icon button svg g path:nth-of-type(2) {
	fill: #4C4C4E;
}

@font-face {
    font-family: primeicons;
    font-display: block;
    src: url(primeicons.eot);
    src: url(primeicons.eot?#iefix) format("embedded-opentype"),url(primeicons.woff2) format("woff2"),url(primeicons.woff) format("woff"),url(primeicons.ttf) format("truetype"),url(primeicons.svg?#primeicons) format("svg");
    font-weight: 400;
    font-style: normal
}

.pi {
    font-family: primeicons;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.pi:before {
    --webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.pi-fw {
    width: 1.28571429em;
    text-align: center
}

.pi-spin {
    animation: fa-spin 2s infinite linear
}

@keyframes fa-spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(359deg)
    }
}

.pi-eye-slash:before {
    content: "\e965"
}

.pi-eye:before {
    content: "\e966";
}

.pi.icon {
    padding: 0 12px;
    height: 24px;
    font-size: 24px;
    cursor: pointer;
    color: #000;
    margin-top: 12px;
}