:root {
	--AOE_ColorOne: rgb(0 122 160);
	--AOE_Dark_ColorOne: rgb(0 172 226);
	--AOE_ColorTwo: rgb(0 150 18);
	--AOE_Dark_ColorTwo: rgb(0 190 23);
	--AOE_ColorThree: rgb(140 0 90);
	--AOE_Dark_ColorThree: rgb(172 0 111);
	--AOE_ColorBlack: rgb(0 0 0);
	--AOE_ColorWhite: rgb(255 255 255);
	--AOE_FormInputs: rgb(240 240 240);

	
	
	--bs-progress-bar-color: var(--AOE_ColorTwo);

	--df-background-blur: blur(12px);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(180deg);
    }

}

@keyframes zero_percent {
  0% {
    width: 0%;
  }
  100% {
    width: 0%;
  }
}
@keyframes ten_percent {
  0% {
    width: 0%;
  }
  100% {
    width: 10%;
  }
}
@keyframes twenty_percent {
  0% {
    width: 10%;
  }
  100% {
    width: 20%;
  }
}
@keyframes thirty_percent {
  0% {
    width: 20%;
  }
  100% {
    width: 30%;
  }
}
@keyframes forty_percent {
  0% {
    width: 30%;
  }
  100% {
    width: 40%;
  }
}
@keyframes fifty_percent {
  0% {
    width: 40%;
  }
  100% {
    width: 50%;
  }
}
@keyframes sixty_percent {
  0% {
    width: 50%;
  }
  100% {
    width: 60%;
  }
}
@keyframes seventy_percent {
  0% {
    width: 60%;
  }
  100% {
    width: 70%;
  }
}
@keyframes eighty_percent {
  0% {
    width: 70%;
  }
  100% {
    width: 80%;
  }
}
@keyframes ninety_percent {
  0% {
    width: 80%;
  }
  100% {
    width: 90%;
  }
}
@keyframes hundred_percent {
  0% {
    width: 90%;
  }
  100% {
    width: 100%;
  }
}
.progress-bar-base p{
	margin: 0;
	width: 100%;
	font-size: 1rem!important;
	font-weight: 900;
}
@media (max-width: 768px) {
 .progress-bar-base p {
    font-size: 10px !important;
    text-align: center;
  }
}
.index .progress-container .progress-bar-base {
	animation: zero_percent 2s ease-in-out forwards;
}
.index .progress-container .progress-bar-base p::after {
	content: "0%";
}
.applicant-type-step1 .progress-container .progress-bar-base {
	animation: zero_percent 2s ease-in-out forwards;
}
.applicant-type-step1 .progress-container .progress-bar-base p::after {
	content: "0%";
}
.applicant-type-step2 .progress-container .progress-bar-base {
	animation: ten_percent 2s ease-in-out forwards;
}
.applicant-type-step2 .progress-container .progress-bar-base p::after{
	content: "10%";
}
.personal-details .progress-container .progress-bar-base {
	animation: twenty_percent 2s ease-in-out forwards;
}
.personal-details .progress-container .progress-bar-base p::after{
	content: "20%";
}
.alternative-personal-details .progress-container .progress-bar-base {
	animation: thirty_percent 2s ease-in-out forwards;
}
.alternative-personal-details .progress-container .progress-bar-base p::after {
	content: "30%";
}
.application-details-step1 .progress-container .progress-bar-base {
	animation: forty_percent 2s ease-in-out forwards;
}
.application-details-step1 .progress-container .progress-bar-base p::after{
	content: "40%";
}
.application-details-step2 .progress-container .progress-bar-base {
	animation: fifty_percent 2s ease-in-out forwards;
}
.application-details-step2 .progress-container .progress-bar-base p::after {
	content: "50%";
}
.application-details-step3 .progress-container .progress-bar-base {
	animation: sixty_percent 2s ease-in-out forwards;
}
.application-details-step3 .progress-container .progress-bar-base p::after {
	content: "60%";
}
.bank-statements .progress-container .progress-bar-base {
	animation: seventy_percent 2s ease-in-out forwards;
}
.bank-statements .progress-container .progress-bar-base p::after {
	content: "70%";
}
.other-documents .progress-container .progress-bar-base {
	animation: eighty_percent 2s ease-in-out forwards;
}
.other-documents .progress-container .progress-bar-base p::after {
	content: "80%";
}
.declaration .progress-container .progress-bar-base {
	animation: ninety_percent 2s ease-in-out forwards;
}
.declaration .progress-container .progress-bar-base p::after {
	content: "90%";
}
.application-complete .progress-container .progress-bar-base {
	animation: hundred_percent 2s ease-in-out forwards;
}
.application-complete .progress-container .progress-bar-base p::after{
	content: "Complete";
}

#AdminDebug{
	display: none!important;
	/*position: fixed;
	top: 0;
	z-index: 999999;
	background-color: aquamarine;
	width:100%;
	padding: 30px;
	color: #000000;*/
}
#cookie-notice-container{
  position: fixed;
	width:100vW;
	height:100vH;
	top: 0;
	z-index: 9999;
}
.cookie-notice-background{
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(1.5px);
  background-color: rgba(0, 0, 0, 0.85);
}

#cookie-notice{
	position: fixed;
	bottom: 1vW;
	left: 1vW;
	padding: 30px;
	background-color: #ffd43b;
	color: rgb(24 49 83);
	border-color:#fab005;
	border-width: 2px;
	border-style: solid;
	border-radius: 30px;
}
@media (max-width: 768px) {
	#cookie-notice{
		left:3vW;
		right:3vW;
		bottom: 3vW;
	}	
}
#cookie-notice p{
	margin:40px 0;
}
#cookie-notice p a{
	color:  rgb(24 49 83);
	text-decoration: none; border-bottom: 2px dotted rgb(24 49 83);
}
#cookie-notice p a:hover{
	border-bottom-style: solid;
}
#cookie-notice h3 i{
	margin-right:15px;
}

@media (max-width: 768px) {
	#cookie-notice h3{
		text-align: center;
		font-size: 2.0rem;
	}	
}

.cookie-primary-container{
	display: flex;
	flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
	margin-top: 20px;
}
.cookie-secondary-container{
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 768px) {
	.cookie-secondary-container{display: block;}	
}

.cookie-primary-container #cookiesAllAccept, #cookiesMinimumAccept, #cookiesCustomise, #cookiesCustomiseAccept{
	padding: 20px;
	border-radius: 20px;
	border-style: solid;
	border-width: 2px;
	border-color:  rgb(24 49 83);
	color:  rgb(24 49 83);
	background-color:  #ffd43b;
}
.cookie-primary-container #cookiesAllAccept{
	/*background-color:  #FFFFFF;*/
}
.cookie-primary-container #cookiesAllAccept:hover, #cookiesMinimumAccept:hover, #cookiesCustomise:hover, #cookiesCustomiseAccept:hover{
	background-color:  rgba(0, 0, 0, 0.15);
}
.cookie-primary-container button i, #cookiesMinimumAccept i, #cookiesCustomise i, #cookiesCustomiseAccept i{
	margin-right:8px;
}

.cookie-primary-container button{
	width:100%;
	font-weight: bold;
	border-bottom-width: 6px;
	font-size: 1.2rem;
}
#cookiesMinimumAccept, #cookiesCustomise, #cookiesCustomiseAccept{
	/*width:45%;*/
}
@media (max-width: 768px) {
	#cookiesMinimumAccept{margin-top:20px;}	
}

/*#cookiesCustomise:focus + .cookie-customisation-container, .cookie-secondary-container:hover .cookie-customisation-container{
	display:block!important;
}
*/

#cookie-notice #cookiesCustomiseAccept{
	display: none;
}
#cookie-notice.customise #cookiesCustomiseAccept{
	display:block;
}
#cookie-notice #cookiesCustomise{
	text-align: center;
	cursor: pointer;
	transition: all 0.3s;
}
#cookie-notice.customise #cookiesCustomise{
	display: none;
}
#cookie-notice .cookie-customisation-container{
	height: 1px;
  	overflow: hidden;
	transition: all 0.3s;
}
#cookie-notice.customise .cookie-customisation-container{
	height: 100px;
}
@media (max-width: 768px) {
	#cookie-notice.customise .cookie-customisation-container{
	margin-bottom:20px;
}
}
/*
.cookie-customisation-container #cookiesCustomise:hover ~ .cookie-customisation-container{
	display:block!important;
}
#cookiesCustomise:hover + .cookie-customisation-container{
	display:block!important;
}
*/
.cookie-customisation-container ul{
	list-style: none;
    margin: 0;
    padding: 0;
}
.cookie-customisation-container ul li{
	padding:10px 0;
}
.cookie-customisation-container ul li + li{
	border-top: 1px dotted rgb(24 49 83);
}
.cookie-customisation-container ul li i, .cookie-customisation-container ul li input[type="checkbox"]{
	margin-right:15px; width: auto;
}



@media (min-width: 768px) {
	.container{max-width: 80vW!important;}	
}


body{
	background-color: #FFF;
	color:#000;
	padding-bottom:100px;
	font-family: 'Open Sans', 'Droid Sans', Helvetica, Arial, Verdana, sans-serif;
}

.index fieldset{
	background-color: var(--AOE_ColorOne);
	color: var(--AOE_ColorWhite);
	border: none;
	font-size: 1.28rem!important;
}
.index fieldset ul lh{
	font-weight:bold;
	margin-left:-17px;
}

.index .dark-mode fieldset{
	background-color: var(--AOE_Dark_ColorOne);
}
@media (max-width: 768px) {
	.index fieldset p, .index fieldset ul{font-size: 5vW!important; text-align: left;}	
}
.index input[type="submit"]{
	width:100%;
}

.dark-mode {
  background-color: black;
  color: white;
}

.navbar{
	background-color: #f5f5f5 !important;
	border-top: 8px solid var(--AOE_ColorThree);
}
.dark-mode .navbar{
	background-color: #535353 !important;
	border-top: 8px solid var(--AOE_Dark_ColorThree);

}
.navbar-brand {
	font-size: 1.5rem;
}
@media (min-width: 768px) {
	/*.navbar-brand {font-size: calc(1.5rem + 0.9vw);}	*/
}
.navbar-brand span{
	color: var(--AOE_ColorTwo);
}
.dark-mode .navbar-brand {
	color: white!important;
}
.dark-mode .navbar-brand span{
	color: var(--AOE_Dark_ColorTwo);
}



.navbar button{
	border-radius: 50px;
	border-width: 1px;
	border-style: solid;
    border-color: white;
    background: white;
    color: black;
    padding: 10px 30px;
}

.dark-mode .navbar button{
    border-color: black;
    background: black;
    color: white;
}

.navbar button:hover{
	    color: var(--AOE_ColorThree);
}
.dark-mode .navbar button:hover{
	    color: var(--AOE_Dark_ColorThree);
}

.stage-indicator p span{
	font-weight: 900;
}
@media (max-width: 768px) {
	.stage-indicator{
	text-align: center;
}
}

fieldset{
	border: 1px dashed #CCC;
    border-radius: 20px;
    padding: 40px;
    /*margin-bottom: 40px;*/
}

input, textarea, button, label{
	transition: all 0.3s;
}
@media (max-width: 768px) {
	input, textarea, button, label{
	width: 100%;
}
}
input[type=submit]{
	background-color: var(--AOE_ColorTwo);
	color: var(--AOE_ColorWhite);
	border-color:  var(--AOE_ColorTwo);
	border-radius: 50px;
	padding: 15px 100px;
	outline: none;
	border-style:none;
	margin-top: 50px;
	transition: all 0.3s;
}

input[type=submit]:hover{
		background-color: var(--AOE_ColorThree);
		border-color:  var(--AOE_ColorThree);
}

input[type=radio]{
	height: 1.5rem;
    width: 1.5rem;
	margin-right: 1rem;
}

.uploaded input[type=file]{
	/*margin:0px 0px 20px 0px;
	background: var(--AOE_FormInputs);
	color: var(--AOE_ColorOne);
	border: 1px solid var(--AOE_ColorOne);
	border-radius:30px;
	width:100%;
	padding:10px 15px 10px 15px;*/

}
/* Hide the "Browse..." button */
::file-selector-button {
  display: none!important;
}
input[type=file] {
  /*position: absolute;
  z-index: -1;
  left: 77px;*/
  
  top: 5px;
}
#bankStatements input[type=file] {
	left: 110px!important;
}
@media (max-width: 768px) {
	input[type=file]{
	display:none;
}
}
.button-wrap {
	position: relative;
	border: 1px solid var(--AOE_ColorOne);
	border-radius: 50px;
	margin: 20px 0;
	width: 100%;
	transition: all 0.3s;
	font-size: 20px;
}
.light-mode .button-wrap{
	background-color: #00000015;
	color: var(--bs-black);
	background-blend-mode: difference;
}
.dark-mode .button-wrap{
	background-color: #FFFFFF25;
	color: var(--bs-white);
	background-blend-mode: difference;
}

.button-wrap.uploaded {
	border: 1px solid var(--AOE_ColorTwo)!important;
	color: var(--AOE_ColorTwo)!important;
}
.button-wrap.upload-error {
	border: 1px solid var(--bs-form-invalid-color);
	color: var(--bs-form-invalid-color);
}

#button_wrap1 i::before, #button_wrap2 i::before, #button_wrap3 i::before{
	content: "\e494";
	font-size: 20px;
}

#button_wrap1.uploaded i::before, #button_wrap2.uploaded i::before, #button_wrap3.uploaded i::before{
	content: "\e5a0";
	font-size: 20px;
}
.button-wrap.uploaded .button{
	background-color: var(--AOE_ColorTwo)!important;
}

#button_wrap1.upload-error i::before, #button_wrap2.upload-error i::before, #button_wrap3.upload-error i::before{
	content: "\e5a0";
	font-size: 20px;
}
.button-wrap.upload-error .button{
	background-color: var(--bs-form-invalid-color);
}


.button {
	display: inline-block;
	padding: 12px 18px;
	cursor: pointer;
	border-radius: 50px 0 0 50px;
	background-color: var(--AOE_ColorOne);
	font-size: 16px;
	width: 200px;
 	text-align: center;
	font-weight: bold;
	color: var(--bs-white);
	transition: all 0.3s;
}
@media (max-width: 768px) {
	.button{
	border-radius: 50px 50px;
	width: 100%;
}
}
.uploaded {
	/*background-color: var(--AOE_ColorTwo);*/
}
.button:hover{
	background-color: var(--bs-gray-700);
}

input[type=text], input:-webkit-autofill{
	margin:0px 0px 20px 0px;
	background: var(--AOE_FormInputs);
	color: var(--AOE_ColorOne);
	border: 1px solid var(--AOE_ColorOne);
	border-radius:30px;
	width:100%;
	padding:10px 15px 10px 15px;
}
@media (max-width: 768px) {
	input[type=text], input:-webkit-autofill{
	font-size: 5vW;
}
}

input[type=text]+input[type=text]{
	/*margin:0 0 0 0;*/
}

input[type=text]:focus, input:-webkit-autofill:focus{
	outline: none;
    border-color:var(--AOE_ColorTwo);
    box-shadow: 0 0 10px var(--AOE_ColorTwo);
	color: var(--AOE_ColorTwo);
}

.file-text{
  position: absolute;
  left: 200px;
  width: -moz-available;
  background: #eaeaea;
  top: 7px;
  padding: 0 7px;
  margin-right: 30px;
}

.dark-mode .file-text{
  background: #252525;
} 


textarea{
	outline: none;
	margin:0px 0px 20px 0px;
	background: var(--AOE_FormInputs);
	color: var(--AOE_ColorOne);
	border: 1px solid var(--AOE_ColorOne);
	border-radius:30px;
	width:100%;
	height: 20vH;
	padding:10px 15px 10px 15px;
}

textarea:focus{
	outline: none;
    border-color:var(--AOE_ColorTwo);
    box-shadow: 0 0 10px var(--AOE_ColorTwo);
	color: var(--AOE_ColorTwo);
}

label{
	/*width:250px;*/
	font-weight:600;
}
label+input[type=text]{
	
}

.progress-container {
	display: flex;
  width: 100%;
  background-color: #ddd;
	border-radius: 50px;
	margin-bottom: 30px;
	overflow: hidden;
	position: relative;
}

.progress-container .progress-bar-base, .progress-container .progress-bar-max {
		display: flex;
  width: 0%;
min-width: 30px;
height: 30px;
  background-color: var(--AOE_ColorTwo);
  text-align: center;
  line-height: 30px;
  color: white;
  border-radius: 50px;
	transition-duration: 1s linear infinite;
	animation: width .6s ease;
	transition: all 0.3s;
}

.dark-mode .progress-container .progress-bar-base, .dark-mode .progress-container .progress-bar-max {
  background-color: var(--AOE_Dark_ColorTwo);
  color: black;
}
.progress-container .progress-bar-base{position: relative; z-index: 2;}
.progress-container .progress-bar-max{position: absolute; z-index: 1; /*background-color: #868686;*/}

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgb(221, 221, 221) 25%, transparent 0%, rgb(221, 221, 221) 25%, transparent 25%, transparent 50%, rgb(221, 221, 221) 50%, rgb(221, 221, 221) 75%, transparent 75%, transparent) !important;
	background-size: 20px 20px;
}

.text-footer{
	color: var(--AOE_ColorOne)!important;
}
.dark-mode .text-footer{
	color: var(--AOE_Dark_ColorOne)!important;
}

h1{
	margin: 50px 0;
	text-align: center;
	font-size:4rem;
	color: var(--AOE_ColorOne)!important;
}
.dark-mode h1{
	color: var(--AOE_Dark_ColorOne)!important;
}
@media (max-width: 768px) {
	h1{font-size:3rem!important; text-align: center;}	
}
h2{
	margin: 0 0 20px 0;
	font-size:3rem!important;
	color: var(--AOE_ColorTwo)!important;
}
@media (max-width: 768px) {
	h2{font-size:2.5rem!important; text-align: center;}	
}
.dark-mode h2{
	color: var(--AOE_Dark_ColorTwo)!important;
}
@media (max-width: 768px) {
	p{font-size: 5vW!important; text-align: center;}	
}
#formContainer{
	font-size:1.5rem;
}
#formContainer .container{
	display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
	padding: 0!important;
}

.application-nav{
	background-color: var(--AOE_ColorThree)!important;
	border-radius: 20px;
	padding: 20px;
}
.dark-mode .application-nav{
	background-color: var(--AOE_Dark_ColorThree)!important;
}

.application-nav ul, .application-nav li{
	margin:0;
	padding:0;
	list-style: none;
	font-size: 1.2em;
}

.application-nav li{
	display: block ruby;
}

.application-nav li:hover{
	/*background-color: aquamarine;*/
}

.application-nav li i{
	color: var(--AOE_ColorWhite);
}
.application-nav li:hover i{
	/*color: #000;*/
}

.application-nav span{
	padding:10px;
	color: var(--AOE_ColorWhite);
	text-decoration: none;
	display: block;	
}

.application-nav span:hover{
	/*color:#000;*/
}

.application-nav .section-todo{
	opacity: 0.6!important;
}
.application-nav .section-inprogress{}
.application-nav .section-complete span{
	text-decoration: line-through;
}

.applicationOtherOrganisation{
	display: none;
}

.error-message{
	color: var(--bs-form-invalid-color);
}
@media (max-width: 768px) {
	.error-message{font-size: 5vW!important;}	
}

button.back-button{
	background-color: var(--AOE_ColorOne);
    border-color: var(--AOE_ColorOne);
    border-radius: 50px;
    padding: 15px 100px;
    outline: none;
    border-style: none;
	margin-bottom: 50px;
	transition: all 0.3s;
}
@media (max-width: 768px) {
	button.back-button{width:100%;}	
}
button.back-button:hover{
	background-color: var(--AOE_ColorThree);
    border-color: var(--AOE_ColorThree);
}
.dark-mode button.back-button{
	background-color: var(--AOE_Dark_ColorOne);
    border-color: var(--AOE_Dark_ColorOne);
}
.dark-mode button.back-button:hover{
	background-color: var(--AOE_Dark_ColorThree);
    border-color: var(--AOE_Dark_ColorThree);
}
button.back-button a{
	text-decoration: none!important;
    color: var(--AOE_ColorWhite)!important;
}


.application-reference{
	color:#FFF; background: #007aa0;  text-align: center; padding: 20px 0 10px; margin: 40px 0;
}

.application-reference .account-ref{
	font-weight:bold;
	color: #ffd43b;
}
.dark-mode .application-reference .account-ref{
	color: #ffd43b;
}

.application-cycle{
	background: #F5F5F5;
	padding: 30px;
	margin: 30px 0;
	border-radius: 15px;
}

.mandatory-icon{
	
}

#miniThemeSelector{
	position: fixed;
	bottom: 5vW;
	right:0;
	font-size: 25px;
}

#miniThemeSelector button{
	color:#FFF;
	background-color: rgba(124,124,124,1.00);
	padding: 5px 20px 5px 10px !important;
	border-radius: 50px 0 0 50px!important;
	border-width: 1px 0 1px 1px;
}
.dark-mode #miniThemeSelector button{
	color:#000;
}
#miniThemeSelector button i{
	transition: transform 0.5s ease-in-out;
	color: #FFF;
}
#miniThemeSelector button:hover i{
	transform: rotate(180deg);
}
#miniThemeSelector button:not(:hover) i{
	transform: rotate(0deg);
}

.dark-mode #miniThemeSelector button:hover i{
	transform: rotate(0deg);
}
.dark-mode #miniThemeSelector button:not(:hover) i{
	transform: rotate(180deg);
}