/* === Everything from here until the grey button has been taken from the changed stylesheets === */
.theme-colour1, .colour7{
    background-color: #039BE5;
}

.blue-text{
    color: #039BE5;
}

.theme-colour2{
    background-color: #F0F0F0;
}

.standard-link, .standard-link:visited{
    color: #039BE5;
    cursor: pointer;
}

.standard-link:hover{
    color: #026799;
}

a.clear-button{
    background-color: #F0F0F0;
}

.white-text, .hover-white-text:hover{
    color: #F0F0F0;
}

a.clear-on-black-button, input.invisible-radio:checked + label.invisible-radio-label, .colour1, .colour2, .colour3, .colour4, .colour5, .colour6, .colour7, .colour8, .colour9, .colour10, .colour11{
    color: #F0F0F0;
}

.theme-colour3, .hover-theme-colour3:hover, a.clear-button:hover, a.sign-in-menu-button:hover{
    background-color: #ACBBC6;
}

.grey-text, .hover-grey-text:hover, label.standard-label, label.invisible-radio-label, #find-your-tutor-form span#add-subject li:hover{
    color: #ACBBC6;
}

.theme-colour4, .colour13{
    background-color: #0F1425;
}

.black-text, .hover-black-text:hover{
    color: #0F1425;
}

.blue-text{
    color: #0F1425;
}

a.clear-button{
    color: #0F1425;
}

#tasks-planner{
    color: #0F1425;
}

input.invisible-radio:checked + label.invisible-radio-label{
    background-color: #00A651;
}

input.invisible-radio:not(:checked) + label.invisible-radio-label:hover{
    color: #00A651;
}

.colour1{
    background-color: #D50000;
}

.colour2{
    background-color: #E67C73;
}

.colour3{
    background-color: #F4511E;
}

.colour4{
    background-color: #F6BF26;
}

.colour5{
    background-color: #0FB679;
}

.colour6{
    background-color: #0B8043;
}

.colour8{
    background-color: #3F51B5;
}

.colour9{
    background-color: #7986CB;
}

.colour10{
    background-color: #8E24AA;
}

.colour11{
    background-color: #616161;
}

.blue-border, .hover-blue-border:hover{
	border: 0.1vw solid #039BE5;
}

.black-border, .hover-black-border:hover{
    border: 0.1vw #0F1425 solid;
}

.black-border-top{
	border-top: 0.1vw #0F1425 solid;
}

.black-border-bottom{
	border-bottom: 0.1vw #0F1425 solid;
}

.grey-border, .hover-grey-border:hover{
	border: 0.1vw solid #ACBBC6;
}

.standard-link, a.clear-on-black-button, a.clear-button{
    text-decoration: none;
}

h1.standard{
    font-size: 4vw;
    font-weight: 350;
}

h2.standard{
    font-size: 3vw;
    font-weight: 350;
}

h3.standard{
    font-size: 2.2vw;
    font-weight: 350;
}

p.standard, .standard-text{
    font-size: 1.5vw;
    font-weight: 350;
    line-height: 2.5vw;
}

#tasks-planner{
    color: #0F1425;
}

label.invisible-radio-label{
    background-color: #F0F0F0;
}

.standard-link{
	transition: color 1s;
}

@media only screen and (max-device-width: 480px){
    .blue-border{
		border: 0.6vw solid #039BE5;
    }

    .black-border{
        border: 0.415vw solid #0F1425;
    }

    h1.standard{
	    font-size: 9vw;
	}

    h2.standard{
	    font-size: 6.5vw;
	}

    h3.standard{
	    font-size: 5vw;
	}
}


/* === Autocomplete Lists === */
ul.ui-autocomplete{
    background-color: #FFFFFF;
    border: 0.1vw #ACBBC6 solid;
    border-radius: 0.3vw;
    color: #0F1425;
    cursor: pointer;
    float: left;
    font-size: 1.2vw;
    line-height: 2vw;
	list-style: none;
    margin: 0 0 0 0;
    max-width: 30vw;
	padding: 0 0 0 0;
    z-index: 9 !important;
}

ul.ui-autocomplete li a{
    background-color: #FFFFFF;
    padding: 0 1vw 0 1vw;
    transition: background-color 0.5s;
}

ul.ui-autocomplete li a:hover, ul.ui-autocomplete li a.ui-state-hover{
    background-color: #DDDDDD;
}

a.ui-corner-all{
	width: auto;
	display: block;
}

@media only screen and (max-device-width: 480px){
    ul.ui-autocomplete{
        border: 0.415vw #ACBBC6 solid;
        border-radius: 1.25vw;
        font-size: 3.9vw;
        line-height: 6.6vw;
        max-width: 85vw;
    }

    ul.ui-autocomplete li a{
        padding: 0 4.15vw 0 4.15vw;
    }
}

/* === Clear Button === */
a.clear-button{
    cursor: pointer;
    display: block;
    margin: 0;
    padding: 0;
    height: 2vw;
    line-height: 2vw;
    width: 17vw;
    font-size: 1.2vw;
    vertical-align: middle;
    text-align: center;
    border-radius: 0.3vw;
    border: 0.1vw #374255 solid;
    transition: background-color 1s;
}

/* === Standard Buttons === */
a.standard-button{
    border-radius: 0.3vw;
    cursor: pointer;
    display: block;
    font-size: 1.05vw;
    font-weight: 350;
    height: 2vw;
    line-height: 2vw;
    margin: 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
    transition: background-color 1s, box-shadow 1s;
    vertical-align: middle;
    width: 17vw;
}

a.standard-button:hover{
    background-color: #039BE5;
    box-shadow: 0 0 1vw 0.5vw rgba(51, 51, 51, 0.3);
}

a.standard-button.black-text{
    border: 0.1vw #0F1425 solid;
    color: #0F1425;
}

a.standard-button.white-text{
    border: 0.1vw #F0F0F0 solid;
    color: #F0F0F0;
}

a.standard-button.clear-grey{
    background-color: #ACBBC6;
    color: #F0F0F0;
}

a.standard-button.clear-grey:hover{
    background-color: #039BE5;
}

@media only screen and (max-device-width: 480px){
    a.standard-button{
        border-radius: 1.25vw;
        font-size: 3.6vw;
        font-weight: 350;
        height: 8.3vw;
        line-height: 8.3vw;
        width: 70vw;
    }

    a.standard-button:hover{
        box-shadow: 0 0 3vw 1.5vw rgba(51, 51, 51, 0.3);
    }

    a.standard-button.black-text{
        border: 0.415vw #0F1425 solid;
    }

    a.standard-button.white-text{
        border: 0.415vw #F0F0F0 solid;
    }
}

/* === Clear Button on Black === */
a.clear-on-black-button{
    cursor: pointer;
    display: block;
    margin: 0;
    padding: 0;
    height: 2vw;
    line-height: 2vw;
    width: 17vw;
    font-size: 1.2vw;
    vertical-align: middle;
    text-align: center;
    border-radius: 0.3vw;
    border: 0.1vw #ECECEC solid;
    transition: background-color 1s;
}

a.clear-on-black-button:hover{
    background-color: #039BE5;
}


@media only screen and (max-device-width: 480px){
    /* === Clear Button on Black === */
    a.clear-on-black-button{
        height: 8.3vw;
        line-height: 8.3vw;
        width: 70vw;
        font-size: 3.9vw;
        border-radius: 1.25vw;
        border: 0.415vw #ECECEC solid;
    }
}

/* === Button when it needs to fit on a line with text === */
a.inline-button{
    border-radius: 0.25vw;
    cursor: pointer;
    display: inline-block;
    font-size: 0.9vw;
    font-weight: 350;
    height: 1.8vw;
    line-height: 1.8vw;
    margin: 0 0 0 0;
    outline: none;
    padding: 0 0 0 0;
    text-align: center;
    text-decoration: none;
    transition: background-color 1s, border 1s, color 1s;
    vertical-align: top;
    width: 14.2vw;
}

a.inline-button.clear-grey{
    background-color: #ACBBC6;
    color: #F0F0F0;
}

a.inline-button.clear-grey:hover{
    background-color: #039BE5;
}

.glowing-text{
    animation: glowing-text 1s infinite alternate;
}

@keyframes glowing-text{
	to{
		color: #039BE5;
	}
}

div.inline-text{
    display: inline;
}

@media only screen and (max-device-width: 480px){
    a.inline-button{
        border-radius: 0.65vw;
        font-size: 3vw;
        height: 4.7vw;
        line-height: 4.7vw;
        width: 35vw;
    }
}


/* === Invisible Radio Buttons === */
input.invisible-radio{
    -webkit-appearance: none;
    appearance: none;
    background-color: #FFFFFF;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
}

label.invisible-radio-label{
    display: block;
    height: 2vw;
    width: 10vw;
    cursor: pointer;
    text-align: center;
    margin: 0;
    padding: 0;
    line-height: 2vw;
    font-size: 1.05vw;
    vertical-align: top;
    border-radius: 0.3vw;
    outline: none;
    border: 0.1vw #ACBBC6 solid;
    position: relative;
    top: 0;
    left: 0;
    transition: background-color 1s, border-color 1s, color 1s;
}

input.invisible-radio:not(:checked) + label.invisible-radio-label:hover{
    border-color: #00A651;
}

@media only screen and (max-device-width: 480px){
    /* === Invisible Raido Buttons === */
    label.invisible-radio-label{
        height: 8.3vw;
        width: 40vw;
        line-height: 8.3vw;
        font-size: 3.9vw;
        border-radius: 1.2vw;
        border: 0.415vw #ACBBC6 solid;
    }
}


/* === Slider Switches === */
.switch{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 4.086vw;
	height: 2.2vw;
    margin: 0 0 0 0;
}

.switch input{
	opacity: 0;
	width: 0;
	height: 0;
}

.slider{
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #CCCCCC;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before{
	position: absolute;
	content: "";
	height: 1.886vw;
	width: 1.886vw;
	left: 0.157vw;
	bottom: 0.16vw;
	background-color: #ECECEC;
	transition: 0.4s;
}

input:checked + .slider{
	background-color: #00A651;
}

input:checked + .slider:before{
	-webkit-transform: translateX(1.875vw);
	-ms-transform: translateX(1.875vw);
	transform: translateX(1.875vw);
}

.slider.round{
	border-radius: 2.2vw;
}

.slider.round:before{
	border-radius: 50%;
}

@media only screen and (max-device-width: 480px){
    /* === Slider Switches === */
	.switch{
        width: 17.025vw;
        height: 9.13vw;
		margin: 0 0 0 0;
	}

    .switch.mobile-small{
        width: 11.35vw;
        height: 6.06vw;
	}

	.slider:before{
		height: 7.858vw;
        width: 7.858vw;
		left: 0.654vw;
		bottom: 0.66vw;
		transition: transform 0.4s;
	}

    .slider.mobile-small:before{
		height: 5.23vw;
        width: 5.23vw;
		left: 0.436vw;
		bottom: 0.44vw;
		transition: transform 0.4s;
	}

	input:checked + .slider:before{
        -webkit-transform: translateX(7.8125vw);
		-ms-transform: translateX(7.8125vw);
		transform: translateX(7.8125vw);
	}

    input:checked + .slider.mobile-small:before{
        -webkit-transform: translateX(5.208vw);
		-ms-transform: translateX(5.208vw);
		transform: translateX(5.208vw);
	}

	.slider.round{
		border-radius: 4.565vw;
	}

    .slider.round.mobile-small{
		border-radius: 3.043vw;
	}

	.slider.round:before{
		border-radius: 50%;
	}
}

/* === Admin pages container === */
div.admin-container{
    width: 90vw;
    margin: 0 0 0 0;
    padding: 2vw 5vw 2vw 5vw;
}

@media only screen and (max-device-width: 480px){
    div.admin-container{
        width: 100vw;
        margin: 0 0 0 0;
        padding: 1vw 0 1vw 0;
    }
}

/* === Paragraph Separation Lines === */
.paragraph-separator{
    display: block;
    height: 0.08vw;
    width: 8vw;
}

@media only screen and (max-device-width: 480px){
    .paragraph-separator{
        height: 0.332vw;
        width: 30vw;
    }
}

/* === General Separation Lines === */
.content-separator{
    display: block;
    height: 0.08vw;
    transition: height 1s, margin 1s;
}

.content-separator.invisible{
    height: 0;
}

@media only screen and (max-device-width: 480px){
    .content-separator{
        height: 0.332vw;
    }
}

/* === Admin Messages === */
article.admin-messages p{
    font-size: 1.5vw;
    font-weight: 350;
    line-height: 2.5vw;
    margin: 1vw 10vw 1vw 10vw;
    text-align: center;
    width: 80vw;
}