/* Body height/width override. */
body, html {
    margin: 0;
    padding: 0;
}

/* Background. */
html {
    background: #FFFFFF;
    background-size: cover;
}

/* The page header containing back links and brand logo. */
#header {
    height: 60px;
    text-align: center;
}

/* The back link in the header. */
#back_link {
    position: absolute;
    top: 35px;
    left: 30px;
    font-family: Muli, Arial, Helvetica, Verdana, Trebuchet MS, Courier, Times New Roman, Georgia;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

/* The image (left arrow) in the back link. */
#back_link img {
    margin-bottom: -4px;
    margin-right: 15px;
    height: 18px;
}

/* The brand logo in the header. */
#brand_logo {
    margin: auto;
    margin-top: 35px;
    margin-bottom: 5px;
}

/* The text below the brand logo. */
#brand_text {
    margin: auto;
    font-family: eduspot, Muli, Arial, Helvetica, Verdana, Trebuchet MS, Courier, Times New Roman, Georgia;
    font-weight: bold;
    font-size: 25px;
}

/* The Admin link in the header. */
#admin_link {
    position: absolute;
    top: 25px;
    right: 25px;
    font-family: Muli, Arial, Helvetica, Verdana, Trebuchet MS, Courier, Times New Roman, Georgia;
    font-size: 12px;
    cursor: pointer;
}

/* The content container - just a simple wrapper. */
#content_container {
    text-align: center;
}

/* The content of the login page which contains the logos and forms required for login. */
#content {
    text-align: center;
    background: white;
    margin: auto;
    box-shadow: 0px 0px 18px 6px #d0d0d0;
    border: 1px solid #d0d0d0;
    border-radius: 15px;
    padding: 30px;
    display: inline-block;
    width : 65em;
}

.support-text {
    font-family: Muli, Arial, Helvetica, Verdana, Trebuchet MS, Courier, Times New Roman, Georgia;
    clear : both;
    word-wrap: break-word;
    font-weight: bold;
    padding-top: 1em;
}

span.link {
    text-decoration: underline;
    cursor: pointer;
}

/* The content title. */
#content .title {
    font-family: Muli, Arial, Helvetica, Verdana, Trebuchet MS, Courier, Times New Roman, Georgia;
    font-size: 18px;
}

/*
The container for the app selectors.
Each app selector consists of:
div
   div (this is the part that highlights when selected
       img (this is the app logo)
       text (this is the app name)
   text (this is extra text that can be displayed under the highlightable selector)
*/
#app_selector_container {
    height: 250px;
    display: inline-block;
}

/* An individual app selector wrapper with the additional text. */
#app_selector_container > div {
    height: 150px;
    font-family: eduspot;
    width: 170px;
    text-align: center;
    float: left;
    margin-top: 40px;
    margin-right: 20px;
    margin-left: 20px;
}

/* The highlightable part of the app selector. */
#app_selector_container > div > div {
    font-size: 20px;
    height: 165px;
    width: 175px;
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    border: 1px solid white;
    transition: box-shadow 0.2s;
}
/* Hover mode for above content. */
#app_selector_container > div > div:hover {
    box-shadow: 0px 0px 10px 1px #c1c1c1;
}
/* Selected mode for above content. */
#app_selector_container > div > div.selected {
    box-shadow: 0px 0px 18px 6px #d0d0d0;
    border: 1px solid #d0d0d0;
}

/* The app logo. */
#app_selector_container > div > div > img {
    display: block;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 15px;
    width: 95px;
    height: 95px;
}

.logo-font {
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
}

/* The small area for displaying error messages. */
#error_message {
    font-family: Muli, Arial, Helvetica, Verdana, Trebuchet MS, Courier, Times New Roman, Georgia;
    height: 22px;
    font-size: 15px;
    color: #e85454;
}

#notice_container {
    border-radius  : 5px;
    box-shadow     : 0px 0px 18px 1px #d0d0d0;
    max-width      : 820px;
    word-break     : break-word;
    word-wrap      : break-word;
    text-align     : left;
    padding-left   : 20px;
    font-family    : muli;
    padding-bottom : 15px;
    margin         : 0 auto;
    margin-top     : 10px;
    margin-bottom  : 10px;
}

#notice_container > #notice_title {
    padding-top : 15px;
    font-weight : bold;
    font-size   : 19px;
}

#notice_container > #notice_content {
    padding-top    : 15px;
    overflow-y     : auto;
    max-height     : 10vh;
}

#notice_content::-webkit-scrollbar {
    width: 0.5em;
}

#notice_content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

#notice_content::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
  border-radius: 10px;
}

div.schoolmoney_notice_colours, div.schoolmoney_parent_notice_colours{
    background-color : #24BD9A;
    color            : white;
}

div.teachers2parents_notice_colours {
    background-color : #FFD400;
    color            : black;
}

div.schoolpod_notice_colours {
    background-color : #5FCDF9;
    color            : white;
}

div.schoolawards_notice_colours {
    background-color : #FCA311;
    color            : black;
}

div.behaviourwatch_notice_colours {
    background-color : #FF7676;
    color            : white;
}

div.all_notice_colours {
    background-color : #dedede;
    color            : black;
}

/*
The container for the app login forms.
Each login consists of a wrapper div and then a form below that.
*/
#app_login_container {

}

/* The login wrapper for each app. */
#app_login_container > div {
    display: none;
}
/* Selected mode for the above content. */
#app_login_container > div.selected {
    display: block;
}

/* The form itself. */
#app_login_container > div > form {

}

/* The input elements of the login form. */
#app_login_container > div > form input {
    border-radius: 22px;
    border: 2px solid #dedede;
    padding-top: 5px;
    padding-right: 11px;
    padding-bottom: 5px;
    padding-left: 11px;
    margin-bottom: 16px;
    font-family: Muli;
    outline: none;
}
/* The pin elements of the above. */
#app_login_container > div > form input.pin_field {
    width: 50px;
}
/* The fake pin elements of the above used as a placeholder to maintain positioning. */
#app_login_container > div > form input.pin_field.fake {
    visibility: hidden;
}

/* The submit button for each login. */
#app_login_container > div > form button {
    font-weight: bold;
    font-size: 19px;
    border-radius: 22px;
    width: 130px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 5px;
    border: 0;
    cursor: pointer;
    outline: none;
    font-family: Muli, Arial, Helvetica, Verdana, Trebuchet MS, Courier, Times New Roman, Georgia;
}

/* The app-specific colour for the submit button (SchoolPod). */
#app_login_container > div > form button.schoolpod {
    background-color: #5FCDF9;
    color: white;
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
}
/* The app-specific colour for the submit button (SchoolAwards). */
#app_login_container > div > form button.schoolawards {
    background-color: #FCA311;
    color: black;
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
}
/* The app-specific colour for the submit button (BehaviourWatch). */
#app_login_container > div > form button.behaviourwatch {
    background-color: #FF7676;
    color: white;
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
}
/* The app-specific colour for the submit button (SchoolMoney). */
#app_login_container > div > form button.schoolmoney {
    background-color: #24BD9A;
    color: white;
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
}
/* The app-specific colour for the submit button (Teachers2Parents). */
#app_login_container > div > form button.teachers2parents {
    background-color: #FFD400;
    color: #363535;
}

/* Help message on the login. */
.help_message {
    font-family: Muli, Arial, Helvetica, Verdana, Trebuchet MS, Courier, Times New Roman, Georgia;
    font-size: 11px;
    padding-top: 11px;
    width: 200px;
    margin: auto;
}

/* Custom response error */
#server_response_error {
    text-align: center;
    background: white;
    margin: auto;
    box-shadow: 0px 0px 18px 6px #d0d0d0;
    border: 1px solid #d0d0d0;
    border-radius: 15px;
    padding: 30px;
    display: inline-block;
    height: auto;
    max-height: auto;
    width: 20%;
    margin-left: 37%;
    margin-top: 4%;
}

/* error text */
#server_response_error_message {
    font-family: Muli, Arial, Helvetica, Verdana, Trebuchet MS, Courier, Times New Roman, Georgia;
    height: 100%;
    font-size: 14px;
    color: #e85454;
    text-align: center;
}

/* custom server response button */
#server_response_error > #server_response_button {
    font-weight: bold;
    font-size: 12px;
    border-radius: 22px;
    width: 85px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 0;
    cursor: pointer;
    outline: none;
    font-family: Muli, Arial, Helvetica, Verdana, Trebuchet MS, Courier, Times New Roman, Georgia;
    background-color: #5FCDF9;
    color: white;
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
}

/* Stuff for the loading spinner: */
.loading_spinner {
    font-size: 10px;
    margin: 0 auto;
    text-indent: -9999em;
    width: 11em;
    height: 11em;
    border-radius: 50%;
    background: #ffffff;
    position: relative;
    -webkit-animation: load3 1.4s infinite linear;
    animation: load3 1.4s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}
.loading_spinner.schoolpod {
    background: -moz-linear-gradient(left, #5FCDF9 10%, rgba(255, 255, 255, 0) 42%);
    background: -webkit-linear-gradient(left, #5FCDF9 10%, rgba(255, 255, 255, 0) 42%);
    background: -o-linear-gradient(left, #5FCDF9 10%, rgba(255, 255, 255, 0) 42%);
    background: -ms-linear-gradient(left, #5FCDF9 10%, rgba(255, 255, 255, 0) 42%);
    background: linear-gradient(to right, #5FCDF9 10%, rgba(255, 255, 255, 0) 42%);
}
.loading_spinner.schoolawards {
    background: -moz-linear-gradient(left, #FCA311 10%, rgba(255, 255, 255, 0) 42%);
    background: -webkit-linear-gradient(left, #FCA311 10%, rgba(255, 255, 255, 0) 42%);
    background: -o-linear-gradient(left, #FCA311 10%, rgba(255, 255, 255, 0) 42%);
    background: -ms-linear-gradient(left, #FCA311 10%, rgba(255, 255, 255, 0) 42%);
    background: linear-gradient(to right, #FCA311 10%, rgba(255, 255, 255, 0) 42%);
}
.loading_spinner.behaviourwatch {
    background: -moz-linear-gradient(left, #FF7676 10%, rgba(255, 255, 255, 0) 42%);
    background: -webkit-linear-gradient(left, #FF7676 10%, rgba(255, 255, 255, 0) 42%);
    background: -o-linear-gradient(left, #FF7676 10%, rgba(255, 255, 255, 0) 42%);
    background: -ms-linear-gradient(left, #FF7676 10%, rgba(255, 255, 255, 0) 42%);
    background: linear-gradient(to right, #FF7676 10%, rgba(255, 255, 255, 0) 42%);
}
.loading_spinner.schoolmoney {
    background: -moz-linear-gradient(left, #24BD9A 10%, rgba(255, 255, 255, 0) 42%);
    background: -webkit-linear-gradient(left, #24BD9A 10%, rgba(255, 255, 255, 0) 42%);
    background: -o-linear-gradient(left, #24BD9A 10%, rgba(255, 255, 255, 0) 42%);
    background: -ms-linear-gradient(left, #24BD9A 10%, rgba(255, 255, 255, 0) 42%);
    background: linear-gradient(to right, #24BD9A 10%, rgba(255, 255, 255, 0) 42%);
}
.loading_spinner.teachers2parents {
    background: -moz-linear-gradient(left, #FFD400 10%, rgba(255, 255, 255, 0) 42%);
    background: -webkit-linear-gradient(left, #FFD400 10%, rgba(255, 255, 255, 0) 42%);
    background: -o-linear-gradient(left, #FFD400 10%, rgba(255, 255, 255, 0) 42%);
    background: -ms-linear-gradient(left, #FFD400 10%, rgba(255, 255, 255, 0) 42%);
    background: linear-gradient(to right, #FFD400 10%, rgba(255, 255, 255, 0) 42%);
}
.loading_spinner:before {
    width: 50%;
    height: 50%;
    border-radius: 100% 0 0 0;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
}
.loading_spinner.schoolpod:before {
    background: #5FCDF9;
}
.loading_spinner.behaviourwatch:before {
    background: #FF7676;
}
.loading_spinner.schoolawards:before {
    background: #FCA311;
}
.loading_spinner.schoolmoney:before {
    background: #24BD9A;
}
.loading_spinner.teachers2parents:before {
    background: #FFD400;
}
.loading_spinner:after {
    background: #ffffff;
    width: 75%;
    height: 75%;
    border-radius: 50%;
    content: '';
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
@-webkit-keyframes load3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes load3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}