@charset "utf-8";

/* ===== Young Writers Teacher Accounts Styles =====


/* === GENERAL === */

.content { padding:50px 0; }
.content__login { padding:0;margin:0 auto;max-width:1366px; }
.content__login > div { padding:50px; }
.content__login > div:first-child { position:relative;overflow:hidden; }
.content__login > div:first-child::before {
    position:absolute;content:'';width:70%;height:150%;background-color:rgba(255,255,255,0.08);left:-25%;top:-25%;z-index:1;
    -webkit-transform:rotate(8deg);-ms-transform:rotate(8deg);transform:rotate(8deg);border-radius:0 50% 50% 0;
}
.content__login > div:first-child::after {
    position:absolute;content:'';width:200%;height:80%;background-color:rgba(0,0,0,0.03);left:-25%;bottom:-50%;z-index:2;
    -webkit-transform:rotate(-8deg);-ms-transform:rotate(-8deg);transform:rotate(-8deg);
}
.content__login > div:first-child > section { position:relative;z-index:3; }

.content__main { padding:0;margin:0 auto;max-width:1200px; }
.content__main > section { padding:30px 40px 40px; }
.content__main > section h1 { margin:20px auto; }

.content__main > .nav {
	display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;
	-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;
	-webkit-flex:0 0 300px;-ms-flex:0 0 300px;flex:0 0 300px;
	background-color:var(--colour-1);;color:#fff;padding:0;position:relative;overflow:hidden;justify-content:space-between;
}
.content__main > .nav::before { position:absolute;content:'';width:60%;height:120%;background-color:rgba(255,255,255,0.08);left:0;top:-10%;z-index:1;border-radius:0 10% 100% 0; }
.content__main > .nav::after {
    position:absolute;content:'';width:250%;height:60%;background-color:rgba(0,0,0,0.03);left:-25%;bottom:-30%;z-index:2;
    -webkit-transform:rotate(-4deg);-ms-transform:rotate(-4deg);transform:rotate(-4deg);
}
.content__main > .nav > * { position:relative;z-index:3; }
.content__main > .nav > * h3 { padding:23px 20px;background-color:rgba(0,0,0,.05);font-size:1.2em; }

.content__main > .nav .grid > a {
	display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;
	-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;
	-ms-transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;transition:all 0.5s;
	align-items:center;padding:10px 18px;color:#FFF;font-size:1.2em;
}
.content__main > .nav .grid > a > i { width:25px;margin-right:10px;text-align:center; }

.content__main > .nav .grid > a:hover { background-color:#782b91; }
.content__main > .nav .grid > a::after { height:3px;top:100%; }

.content__main > .nav .nav__account-trigger { display:none; }
.content__main > .nav .nav__account-trigger.active > a:not(:hover) { background-color:#252525; }
.content__main > .nav .nav__account-links { -ms-transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;transition:all 0.5s; }
.content__main > .nav .nav__account-socials { padding:20px;align-items:center;margin-top:1em; }
.content__main > .nav .nav__account-socials a { font-size:1.25em; }
.content__main > .nav .nav__account-socials a:not(:hover) { color:#FFF; }
.content__main > .nav .nav__account-socials > .flex__spacer { -webkit-flex:0 1 30px;-ms-flex:0 1 30px;flex:0 1 30px; }

.content-divide { margin-bottom:20px; }

.bg-blue p,
.bg-blue p a:not(:hover) { color:#FFF; }
.bg-blue p a { font-weight:bold; }

a.dashboard-item {
	text-align:center;padding:20px;align-items:center;justify-content:center;position:relative;z-index:1;border-radius:5px;
	display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;
	-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;
	-ms-transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;transition:all 0.5s;
}
a.dashboard-item::before,
a.dashboard-item::after {
    content:'';position:absolute;bottom:0;left:0;height:100%;width:100%;z-index:-2;border-radius:5px;
    -ms-transition:all 0.4s ease-out;-moz-transition:all 0.4s ease-out;-webkit-transition:all 0.4s ease-out;transition:all 0.4s ease-out;
}
a.dashboard-item::before {
    background-color:#FFF;z-index:-1;border-radius:0;
    -webkit-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);
    -webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;
}
a.dashboard-item > i { font-size:3em;color:#FFF;-ms-transition:color 0.5s;-moz-transition:color 0.5s;-webkit-transition:color 0.5s;transition:color 0.5s; }
a.dashboard-item > h3 { margin:10px auto 0;color:#FFF; }
a.dashboard-item > p { margin:0;color:#FFF;-ms-transition:color 0.3s;-moz-transition:color 0.3s;-webkit-transition:color 0.3s;transition:color 0.3s; }

a.dashboard-item:nth-child(6n + 1)::after { background-color:#782b91; }
a.dashboard-item:nth-child(6n + 2)::after { background-color:#8dc121; }
a.dashboard-item:nth-child(6n + 3)::after { background-color:#ea8923; }
a.dashboard-item:nth-child(6n + 4)::after { background-color:#f7c333; }
a.dashboard-item:nth-child(6n + 5)::after { background-color:var(--colour-1);; }
a.dashboard-item:nth-child(6n + 6)::after { background-color:#e83577; }

a.dashboard-item.active > i,
a.dashboard-item:hover > i { color:var(--colour-1);; }
a.dashboard-item.active > h3,
a.dashboard-item:hover > h3,
a.dashboard-item.active > p,
a.dashboard-item:hover > p { color:#252525; }
a.dashboard-item:hover::before { -webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1); }

a.dashboard-item.active::after { background-color:#f7f6f6; }

.expandable__trigger { margin:0;padding:20px;background-color:#f7f6f6;border-top:2px solid #FFF;border-bottom:2px solid #FFF;cursor:pointer; }
.expandable__body { display:none;margin:0;padding:15px; }

.expandable__body > *:first-child { margin-top:0; }
.expandable__body > *:last-child { margin-bottom:0; }

.book-list .expandable__trigger { padding:10px 15px; }
.book-list__cover { background-size:210% 100%;width:180px;height:250px;background-position:100% 50%;margin-right:10px;-webkit-flex:0 0 180px;-ms-flex:0 0 180px;flex:0 0 180px; }

.text-dark-yellow { color:#f7c333; }

.alert-box { border:3px solid #252525;padding:20px;margin:40px auto 0;border-radius:5px; }

.display-images figure { position:relative;margin:5px 0;z-index:1;line-height:0; }
.display-images figure::after {
    position:absolute;top:0;left:0;right:0;bottom:0;content:'';z-index:2;
    -webkit-box-shadow:inset 0px 0px 15px 0px rgba(0,0,0,0.15);-moz-box-shadow:inset 0px 0px 15px 0px rgba(0,0,0,0.15);box-shadow:inset 0px 0px 15px 0px rgba(0,0,0,0.15);
}

.banner__logo { margin:0 auto;-webkit-flex:0 1 280px;-ms-flex:0 1 280px;flex:0 1 280px;min-width:180px; }

/* === BUTTONS === */

.content .btn,
.content a.btn,
.content input[type="submit"].btn { height:50px;max-width:300px;padding:9px 20px 11px;border-radius:40px;border:3px solid #8dc121;overflow:hidden; }

.content .btn:not(.file-label):not(.radio-label):not(.checkbox-label)::before { border-radius:0;background-color:initial;right:5px;color:#FFF; }

.content .btn:not(.file-label):not(.radio-label):not(.checkbox-label)::after {
	content:"\f061";height:100%;width:50px;border-radius:0;background-color:initial;color:#252525;position:absolute;top:0;left:-100px;opacity:1;font-family:"Font Awesome 5 Free";font-size:1.3em;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;align-items:center;justify-content:center;
	-moz-transform:scale(0.9,0.9);-webkit-transform:scale(0.9,0.9);transform:scale(0.9,0.9);
	-ms-transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;transition:all 0.5s;
}

.content .btn:not(.selected):not(.btn--disabled):not(.btn--error):hover,
.content a.btn:not(.selected):not(.btn--disabled):not(.btn--error):hover,
.content input[type="submit"].btn:not(.btn--disabled):not(.btn--error):hover { border:3px solid #252525;color:#252525;background-color:initial;padding:9px 10px 11px 50px; }
.content .btn.btn--dark:not(.selected):not(.btn--disabled):not(.btn--error):hover,
.content a.btn.btn--dark:not(.selected):not(.btn--disabled):not(.btn--error):hover,
.content input[type="submit"].btn.btn--dark:not(.btn--disabled):not(.btn--error):hover { border-color:#FFF;color:#FFF; }

.content .btn:not(.file-label):not(.radio-label):not(.checkbox-label):not(.selected):not(.btn--disabled):not(.btn--standard):hover::before { background-color:initial;right:-100px; }
.content .btn:not(.file-label):not(.radio-label):not(.checkbox-label):not(.selected):not(.btn--disabled):not(.btn--standard):hover::after { background-color:initial;left:2px;width:50px; }
.content .btn.btn--dark:not(.file-label):not(.radio-label):not(.checkbox-label):not(.selected):not(.btn--disabled):not(.btn--standard):hover::after { color:#FFF; }

.content .btn.btn--secondary:not(:hover),
.content a.btn.btn--secondary:not(:hover) { border:3px solid var(--colour-1);; }

.content .btn.btn--secondary:not(.file-label):not(.radio-label):not(.checkbox-label):not(:hover)::before,
.content a.btn.btn--secondary:not(:hover)::before { background-color:initial; }

.content .btn.btn--small,
.content a.btn.btn--small { font-size:1em;padding:8px 40px 8px 15px;border-radius:30px;height:40px;max-width:200px; }
.content .btn.btn--small:not(.selected):not(.btn--standard):hover,
.content a.btn.btn--small:hover { padding:8px 5px 8px 45px !important; }

.content .btn.btn--small:not(.file-label):not(.radio-label):not(.checkbox-label)::before,
.content a.btn.btn--small::before { border-radius:0;right:0; }

.content .btn.btn--disabled,
.content a.btn.btn--disabled { background-color:#909090 !important;cursor:not-allowed; }
.content .btn.btn--disabled::before,
.content a.btn.btn--disabled::before { background-color:initial !important; }

.content .btn.btn--error,
.content a.btn.btn--error { background-color:#ea4823 !important;cursor:not-allowed;border:3px solid #ea4823 !important;color:#FFF; }
.content .btn.btn--error::before,
.content a.btn.btn--error::before { background-color:initial !important; }

.content .btn--display,
.content a.btn--display { height:80px;max-width:400px;font-size:1.6em;padding:8px 25px 12px; }

.content .btn--display:not(.file-label):not(.radio-label):not(.checkbox-label)::before { right:20px; }

.content .btn--display:not(.selected):not(.btn--disabled):hover,
.content a.btn--display:not(.selected):not(.btn--disabled):hover { padding:8px 10px 12px 70px; }

.content .btn--display:not(.file-label):not(.radio-label):not(.checkbox-label):not(.selected):not(.btn--disabled):hover::before { right:-100px; }
.content .btn--display:not(.file-label):not(.radio-label):not(.checkbox-label):not(.selected):not(.btn--disabled):hover::after { left:10px; }

.content .btn.radio-label:not(.selected),
.content .btn.file-label:not(.selected),
.content .btn.checkbox-label:not(.selected) { border-color:var(--colour-1);; }
.content .btn.radio-label.selected,
.content .btn.file-label.selected,
.content .btn.checkbox-label.selected { border-color:#252525; }
.content .btn.radio-label,
.content .btn.file-label,
.content .btn.checkbox-label,
.content .btn.radio-label:hover,
.content .btn.file-label:hover,
.content .btn.checkbox-label:hover { padding:8px 15px !important;font-size:1em;height:40px; }

.pupil-list { padding:15px 17px;border:1px solid #f7f6f6; }
.book-list { padding:20px 22px;border:1px solid #f7f6f6; }

.icon-label { position:relative;display:block; }
.icon-label__i { position:absolute;bottom:12px;right:10px;cursor:pointer; }

.inline-submit { display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex; }
.inline-submit > input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="image"]),
.inline-submit > select { -webkit-flex:auto;-ms-flex:auto;flex:auto;border-radius:30px 0 0 30px;padding:5px 13px;margin-right:2px;height:40px; }
.inline-submit > button.btn.btn--standard,
.inline-submit > input[type="submit"].btn.btn--standard {
    -webkit-flex:0 0 80px;-ms-flex:0 0 80px;flex:0 0 80px;border-radius:0 30px 30px 0 !important;padding:0;
    display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;align-items:center;justify-content:center;
}
.inline-submit > button.btn.btn--standard::before,
.inline-submit > button.btn.btn--standard::after,
.inline-submit > input[type="submit"].btn.btn--standard::before,
.inline-submit > input[type="submit"].btn.btn--standard::after { display:none !important; }

.inline-submit > button.btn.btn--standard:hover,
.inline-submit > input[type="submit"].btn.btn--standard:hover { padding:0 !important; }

.email-template { min-width:202px;max-width:none !important; }

@media screen and (max-width:1100px) {
	.content__main > .nav { -webkit-flex:0 0 250px;-ms-flex:0 0 250px;flex:0 0 250px; }
    .book-list__cover { margin-right:5px; }
}
@media screen and (max-width:950px) {
	.content { padding:40px 0; }
	.content__main > section { padding:20px 30px 30px; }
	.content__main > .nav { -webkit-flex:0 0 210px;-ms-flex:0 0 210px;flex:0 0 210px; }
	.content__main > .nav > * h3 { font-size:1.1em;padding:20px 15px; }
	.content__main > .nav .grid > a { padding:10px 15px; }
	.content__login > div { padding:40px; }
}
@media screen and (max-width:900px) {
    .content__login > div:first-child::before { border-radius:0;width:50%; }
    .content__main > .nav .nav__account-socials { justify-content:center; }
}
@media screen and (max-width:800px) {
	.content__main > .nav { -webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;text-align:center; }
    .content__main > .nav::before { border-radius:0;width:50%;left:-25%; }
    .content__main > .nav::after { bottom:-37.5%; }
	.content__main > .nav .nav__account-trigger { display:-ms-grid;display:grid; }
	.content__main > .nav .nav__account-links:not(.open) { display:none; }
    .content__main > .nav .nav__account-socials { margin-top:0.5em; }
	.content__main > .nav .grid > a { justify-content:center; }
	.content__main > section h1 { text-align:center; }
	.content__main > section h1.icon-title > i { margin-right:5px; }
}
@media screen and (max-width:600px) {
    .pupil-list { padding:15px 17px 14px; }
	.book-list { padding:20px 20px 15px; }
    .book-list__cover { -webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;margin-right:0; }
    .book-list form > button { margin:0 auto !important; }
    .banner__logo { -webkit-flex:0 1 130px;-ms-flex:0 1 130px;flex:0 1 130px;max-width:260px;width:100%; }
}
@media screen and (max-width:550px) {
	.content__login > div { padding:30px; }
	.btn--display,
	a.btn--display { height:60px;max-width:350px;font-size:1.4em; }
	.btn--display:not(.selected):not(.btn--disabled):hover,
	a.btn--display:not(.selected):not(.btn--disabled):hover { padding-left:50px; }
	.btn:not(.file-label):not(.radio-label):not(.checkbox-label)::before { right:5px; }
	.btn:not(.file-label):not(.radio-label):not(.checkbox-label):not(.selected):not(.btn--disabled):hover::after { left:5px; }
}
@media screen and (max-width:400px) {
	.content__login > div { padding:30px 20px; }
	.btn--display,
	a.btn--display { height:50px;max-width:300px;font-size:1.2em; }
    .banner__logo { -webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;max-width:215px; }
}