@charset "utf-8";
/* CSS Document */


/* || Application area */

.application-wrapper {position:relative;  background: rgb(30,54,100); background: linear-gradient(90deg, rgba(30,54,100,1) 50%, rgba(59,184,182,1) 50%); width: 100%; padding: 0px 50px;  }
.application-container {position:relative; display: flex; justify-content: space-between; background: rgb(30,54,100); background: linear-gradient(90deg, rgba(30,54,100,1) 10%, rgba(59,184,182,1) 90%); width:100%; max-width: 1240px; margin:0px auto;  padding: 15px 0px; border-top:1px solid #FFFFFF; }
.application-container a {display: inline-block; color: #FFFFFF; text-decoration: none; text-align:center;}
.application-container a:hover {text-decoration: underline}
.application-container a.active {font-weight: 700;}
@media screen and (max-width:1130px) {
    .application-wrapper { padding: 0 25px; }    
}
@media screen and (max-width:650px) {
	.application-container a.myAccount {display:none;}
}
.application-menu .title {font-size: 24px; font-weight: 700; display: block;}
.application-menu a .button {display: block; border-radius: 25px; text-align:center; border: 2px solid #fff; padding: 10px; font-size: 18px; font-weight: 700; transition: all linear 0.1s;}
.application-menu a:hover .button {background: #3bb8b6;}

.application-menu .items {position:relative; display: flex; flex-wrap:wrap; justify-content: space-between; margin:-12px}
.application-menu .items > div  {position:relative; width: 33.33%; padding: 12px; color: #FFF }
.application-menu .items > div > a {display: flex; justify-content: space-between; flex-direction: column; height: 260px; background-color: #1e3664; color: #fff; text-decoration: none; padding: 25px; }

.application-menu .items > div > a .status {position: relative; padding-left: 34px; }
.application-menu .items > div > a .status i {position: absolute; top: 50%; margin-top: -13px; left: 0; width: 26px; height: 26px; border: 2px solid #FFF; border-radius:50%}
.application-menu .items > div > a .status i:before {content: ""; position: absolute; display: block; width: 14px; height: 2px; left: 50%; top: 50%; margin-left: -7px; margin-top: -1px; background: #fff; transform: rotate(45deg);}
.application-menu .items > div > a .status i:after {content: ""; position: absolute; display: block; width: 14px; height: 2px; left: 50%; top: 50%; margin-left: -7px; margin-top: -1px; background: #fff; transform: rotate(-45deg);}

.application-menu .items > div > a.complete .status i {background: #3bb8b6;}
.application-menu .items > div > a.complete .status i:after {height: 6px; margin-top: -3px; background: none; border-left: 2px solid #fff; border-bottom: 2px solid #fff;}
.application-menu .items > div > a.complete .status i:before {display: none;}

.application-menu .items > div > a.inactive .status i:after {height: 6px; margin-top: -3px; background: none; border-left: 2px solid #fff; border-bottom: 2px solid #fff;}
.application-menu .items > div > a.inactive .status i:before {display: none;}

.application-menu .items > div > a.inactive {background-color: #a7a7a7; }
.application-menu .items > div > a.inactive .button {opacity: 0.5;}
.application-menu .items > div > a.inactive:hover .button {opacity: 1;}

.application-menu .submit {position:relative; display: block; margin: 24px 0; color: #FFF }
.application-menu .submit > a {display: flex; align-items: center; background-color: #1e3664; color: #fff; text-decoration: none; padding: 25px; }
.application-menu .submit > a .text {flex-grow: 1; padding-right: 20px; }
.application-menu .submit > a .button {padding-left: 25px; padding-right: 25px; ;}
.application-menu .submit > a.inactive {background: #a8a8a7;}
.application-menu .submit > a.inactive .button {border-color: #bdbdbc; color: #bdbdbc;}
.application-menu .submit > a.inactive:hover .button {background: none;}
.application-menu .submit a .text {flex-grow: 1;}

.application-menu .acceptDecline {position:relative; display: block; margin: 24px 0; color: #FFF; background-color: #1e3664; padding: 0 25px; }
.application-menu .acceptDecline h1 {color: #fff; font-size: 24px; font-weight: 700; margin: 1rem 0;}
.application-menu .acceptDecline h2 {color: #fff; font-size: 24px; font-weight: 700; margin: 1rem 0;}
.application-menu .acceptDecline .buttons {display: flex; align-items: center; justify-content: space-between; margin: 25px 0;}
.application-menu .acceptDecline .buttons a {display: block; border-radius: 25px; text-align:center; border: 2px solid #fff; color: #fff; text-decoration: none; padding: 10px 40px; ; font-size: 18px; font-weight: 700; transition: all linear 0.1s;}
.application-menu .acceptDecline .buttons a:hover {background: #3bb8b6;}
@media screen and (max-width:1130px) {
	.application-menu .items { margin: -5px}
	.application-menu .items > div {padding: 5px; }
	.application-menu .items > div > a {padding: 20px;}
	.application-menu .submit {margin: 20px 0; color: #FFF }
	.application-menu .submit > a {padding: 20px; }
	.application-menu .acceptDecline {margin: 20px 0; padding: 0 20px; }
}
@media screen and (max-width:700px) {
	.application-menu .items > div  {position:relative; width: 50%;}
	
}
@media screen and (max-width:650px) {
	.application-menu .submit a {display: block; text-align:center  }
	.application-menu .submit a .button {margin-top: 10px; }
}

@media screen and (max-width:500px) {
	.application-menu .items > div  {position:relative; width: 100%;}
	.application-menu .items > div > a {min-height: 200px; height: auto;  }
	
}
.xapplication-button-container {position: relative; width: 100%;  margin: 25px 0; display: flex; align-items:center; justify-content: space-between}
.xapplication-button-container a {position:relative; display:block; border-radius: 25px; background: #1e3664; border: 2px solid #1e3664; color: #fff; text-decoration: none; padding: 10px 50px; font-size: 18px; font-weight: 700; transition: all linear 0.1s;}
.xapplication-button-container button {position:relative; display:block; border-radius: 25px; background: #1e3664; border: 2px solid #1e3664; color: #fff; text-decoration: none; padding: 10px 50px; font-size: 18px; font-weight: 700; transition: all linear 0.1s;}
.xapplication-button-container a:hover { background-color: #FFF; color: #1e3664}
.xapplication-button-container button:hover { background-color: #FFF; color: #1e3664}
.xapplication-button-container .grey {border: 2px solid #aaa ; color: #aaa; background: #fff;  }
.xapplication-button-container .grey:hover { background-color: #1e3664; border-color: #1e3664; color: #FFF}
.xapplication-button-container .disabled {border: 2px solid #aaa ; color: #aaa; background: #fff; pointer-events: none; }

.progress-circle { position: relative; margin: 0 auto; max-width: 350px;}
.progress-circle > div { position: relative; border-radius: 50%; width: 100%; height: auto; padding-top: 100%; background: rgb(30,54,100); background: linear-gradient(90deg, rgba(30,54,100,1) 10%, rgba(59,184,182,1) 90%); }
.progress-circle > div canvas {position: absolute; top: 2.5%; left: 2.5%; width: 95%; height: 95%;}
.progress-circle > div > div {position: absolute; display:flex; align-items: center; top: 10%; left: 10%; border-radius: 50%; width: 80%; height: 80%; background: #fff;}
.progress-circle > div > div > div {color:#1e3664; font-size: 24px; text-align:center; width: 100%;}
.progress-circle > div > div > div > div  {font-size:50px; font-weight:700; }

.application-list {position: relative;  border-top: 1px solid #1e3664;}
.application-list > div {position:relative; display: flex; align-items: center; padding: 10px 0px; border-bottom: 1px solid #1e3664;}
.application-list > div > div {flex-grow: 1;}
.application-list > div .move {position: relative; flex-grow: 0; width: 40px; height: 58px;}
.application-list > div .move a {position:absolute; left: 0; width: 28px; height: 28px; border-radius: 50%; transition: background-color linear 0.1s}
.application-list > div .move a::after {content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-135deg); transition: all ease-in-out 0.0s}
.application-list > div .move a:first-child {top: 0;}
.application-list > div .move a:last-child {bottom: 0;}
.application-list > div .move a:first-child::after {transform: rotate(-135deg); margin-top: -3px; }
.application-list > div .move a:last-child::after {transform: rotate(45deg); margin-top: -6px;}
.application-list > div:first-child .move a:first-child {background: #ddd; pointer-events: none;}
.application-list > div:last-child .move a:last-child {background: #ddd; pointer-events: none;}
.application-list > div .move a {background-color:#1e3664;}
.application-list > div .move a:hover {background-color: #3bb8b6;}
.application-list > div .text {flex-grow: 1;}
.application-list > div .buttons {white-space: nowrap ;flex-grow: 0; }
.application-list > div .buttons a {position:relative; display: inline-block; border-radius: 18px; border: 2px solid rgb(30, 54, 100) ; color: #1e3664; text-decoration: none; padding:6px 10px; font-weight: 700; transition: all linear 0.1s;}
.application-list > div .buttons a:hover { background-color: rgba(30, 54, 100, 1); color: #FFFFFF}
.application-list > div .move i.arrow {background-color:#ddd;}

.application-table {border-collapse: collapse; border: #1e3664; margin: 1em 0; width: 100%;}
.application-table thead {font-size: 0.75em; color: #666;}
.application-table th {border-bottom: 1px solid #1e3664; padding: 0.5rem; text-align: left; font-weight: 400; }
.application-table td {border-bottom: 1px solid #1e3664; padding: 0.5rem; text-align: left;}
.application-table td h3 {margin: 0.5em 0; }
.application-table td h4 {margin: 0.5em 0; }
.application-table .alignC {text-align: center;}
.application-table .alignR {text-align: right;}
.application-table .textDisplay h1{font-size: 1.1rem; margin: 10px 0 0 0; }
.application-table .textDisplay h2{font-size: 1.1rem; margin: 10px 0 0 0; }
.application-table .textDisplay h2{font-size: 1.1rem; margin: 10px 0 0 0; }
.application-table .textDisplay h3{font-size: 1.1rem; margin: 10px 0 0 0; }
.application-table .textDisplay p{margin: 10px 0 0 0; }
.application-table .textDisplay hr{display: none;}

.application-table .course-extra {}
.application-table .course-extra {}
.application-table .course-extra h1{font-size: 1.4rem; margin: 0; }
.application-table .course-extra h2{font-size: 1.4rem; margin: 0; }
.application-table .course-extra h2{font-size: 1.4rem; margin: 0; }
.application-table .course-extra h3{font-size: 1.4rem; margin: 0; }
.application-table .course-extra p{margin: 0; }

.application-table tr th:first-child {padding-left: 0;}
.application-table tr td:first-child {padding-left: 0;}
.application-table tr th:last-child {padding-right: 0;}
.application-table tr td:last-child {padding-right: 0;}

.application-table td.icon > div {display:block; width: 40px; height: 60px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.application-table .title {font-size: 24px; font-weight: 700; color: #1e3664;  }
.application-table td.move {position: relative; width: 40px; height: 60px;}
.application-table td.move > div {position: relative; width: 40px; height: 58px;}
.application-table td.move > div a {position:absolute; left: 0; width: 28px; height: 28px; border-radius: 50%; transition: background-color linear 0.1s}
.application-table td.move > div a::after {content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-135deg); transition: all ease-in-out 0.0s}
.application-table td.move > div a:first-child {top: -2px;}
.application-table td.move > div a:last-child {bottom: -2px;}
.application-table td.move > div a:first-child::after {transform: rotate(-135deg); margin-top: -3px; }
.application-table td.move > div a:last-child::after {transform: rotate(45deg); margin-top: -6px;}
.application-table tbody tr:first-child .move a:first-child {background: #ddd; pointer-events: none;}
.application-table tbody tr:last-child .move a:last-child {background: #ddd; pointer-events: none;}
.application-table td.move > div a {background-color:#1e3664;}
.application-table td.move > div a:hover {background-color: #3bb8b6;}
.application-table hr {display:none;}
.application-table td.buttons a {position:relative; display: inline-block; border-radius: 18px; border: 2px solid rgb(30, 54, 100) ; color: #1e3664; text-decoration: none; padding:6px 10px; font-weight: 700; transition: all linear 0.1s;}
.application-table td.buttons a:hover { background-color: rgba(30, 54, 100, 1); color: #FFF}
.application-table td.buttons a.inactive {border-color: #aaa; color: #aaa;pointer-events: none;}

.application-table .requires-attention-Y {font-weight: 700;}
.application-table .requires-attention-N td.buttons a{border-color: #aaa; color: #aaa;}
.application-table .requires-attention-N td.buttons a:hover{border-color: rgba(30, 54, 100, 1); background-color: rgba(30, 54, 100, 1); color: #FFF}

.application-messages {}
.application-messages > div {position: relative; margin: 10px 0; border-radius: 22px; padding: 20px;  }
.application-messages > div.admin {margin-right: 20px; color: #fff; background: #1e3664;}
.application-messages > div.applicant {margin-left: 20px; color: #fff; background: #aaa;}
.application-messages > div.admin:after {content: ""; position:absolute; left: -15px; bottom: 20px; width: 0; height: 0; border-style: solid; border-width: 0 0 15px 15px; border-color: transparent transparent #1e3664 transparent; }
.application-messages > div.applicant:after {content: ""; position:absolute; right: -15px; bottom: 20px; width: 0; height: 0; border-style: solid; border-width: 15px 0 0 15px; border-color: transparent transparent transparent #aaa; }
.application-messages > div .by {margin-top: 10px; font-size: 0.8em; color: rgba(255,255,255,0.6);}



.application-overview {margin: 25px 0; background: #1e3664; padding: 0 25px; color: #fff;}
.application-overview:before {content: ""; position: relative; display: block; padding-top: 1px; margin-bottom: 25px; }
.application-overview:after {content: ""; position: relative; display: block; padding-bottom: 1px; margin-top: 25px; }
.application-overview .application-overview--top {display:flex; gap: 20px; align-items: flex-end; justify-content: space-between; }
.application-overview .name {font-size: 2em; margin-bottom: 1rem; font-weight: 700; line-height: 1; }
.application-overview a {color: #fff; text-decoration: underline}
.application-overview a:hover {color: #fff; text-decoration: none;}
.application-overview a.button {position:relative; display: inline-block; margin: 1em 0; border-radius: 25px; border: 2px solid rgb(255, 255, 255); color: #FFF; text-decoration: none; padding: 10px 30px; font-size: 18px; font-weight: 700; transition: all linear 0.1s; white-space: nowrap}
.application-overview a.button:hover { background-color: #3bb8b6; }
.application-overview a.button.disabled {opacity: 0.3; pointer-events: none;}

.application-overview span.button {position:relative; display: inline-block; margin: 1em 0; border-radius: 25px; border: 2px solid rgb(255, 255, 255); color: #FFF; background: #ccc; text-decoration: none; padding: 10px 30px; font-size: 18px; font-weight: 700; transition: all linear 0.1s; white-space: nowrap}
.application-overview .small {font-size: 0.85em;}

.application-warning {display: flex; align-items: center; gap: 20px; }
.application-warning i {flex-shrink: 0; width: 50px; height: 50px; background: url("/CDN/R3/godalming/images/icons/gc-warning.svg") center no-repeat; background-size: contain;}
.application-warning a {color: inherit;}

@media screen and (max-width:1130px) {
	.application-overview {margin: 20px 0; padding: 0 20px; }
	.application-overview .application-overview--top {display:block; }
}