@font-face {
	font-family: "supersaad";
	src: url("icomoon.ttf") format("truetype");
}
/*Layout Styles*/
* {box-sizing: border-box;}
p,h1,h2,h3,h4,h5,img {margin: 0; padding: 0;}
li {padding-bottom: 10px;}
input::-ms-reveal,
input::-ms-clear {display: none;}
a {cursor: pointer;}
/*Form Elements*/
.blue {
    display: inline-block;
    padding: 10px;
    outline: none;
    border: none;
    border-radius: 5px;
    margin: 10px auto;
    background: #4A6EA3;
    color: #FFF;
    font-size: 1.1em;
    cursor: pointer;
    transition: color .15s;}
.blue span {
    font-family: "supersaad";
    margin-right: 5px;}
.fail,#fail {
    background: #CC3340;
    display: fit-content;
    color: #FFF0F1;
    border-radius: 4px;
    margin: 5px 0;
    padding: 5px;
    vertical-align: middle;
    font-size: .9em;}
.blue:hover {background: #0c469e;}
form input.error,textarea.error {border: 2px solid #C40233 !important;}
textarea {
    width: 100%;
    max-width: 350px;
    height: 100px;
    resize: none;}
p.error,#error {
    border: 1px solid #C40233;
    border-radius: 5px;
    background: #FFC0CB;
    color: #C40233;
    padding: 7px;
    margin-bottom: 5px;}
p#success {
    position: absolute;
    top: 80px; left: 50%;
    transform: translateX(-50%);
    border: 1px solid #006400;
    color: #043f04;
    padding: 15px;
    max-width: 480px;
    margin: 5px;
    font-size: 1.5em;
    font-weight: bold;
    border-radius: 10px;
    background: #90EE90;}
div.idcard {
    display: inline-block;
    color: #FFF;
    width: 170px;
    height: 230px;
    border-radius: 5px;
    box-shadow: 2px 2px 4px #666;
    margin: 0 5px 5px 0;
    background: radial-gradient(ellipse at right top,
      #107667 0%,
      #151419 47%,
      #151419 100%);}
div.idcard .flag2 {margin-right: 5px;}
div.idcard img {
    display: block;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    border: 1px solid #DDD;
    height: 90px;}
div.idcard h3 {
    text-align: center;
    text-transform: capitalize;
    margin: 7px 0;
    letter-spacing: .75px;
    font-size: .9em;
    color: #FFF;}
div.idcard .specs {margin-bottom: 5px;}
div.idcard .specs p {
    text-align: center;
    font-size: .73em;
    line-height: 1.4em;}
div.idcard .info {
    display: flex;
    width: 150px;
    margin: 0 auto;
    justify-content: space-between;}
div.idcard .info a {
    display: flex;
    flex-direction: column;
    padding-top: 4px;
    text-align: center;
    width: 48px;
    font-size: .65em;
    font-weight: bold;
    color: #107667;}
div.idcard .info a span {
    font-family: "supersaad";
    padding-bottom: 2px;
    font-size: 2.3em;
    font-weight: normal;}
div.idcard .info a.send_msg span {padding-bottom: 5px; font-size: 2em;}
/*Styling for header.php */
body {
    /* background: #E5EAF5; */
    background: #1d0835;
    color: #FFF;
    margin: 0 auto;
    max-width: 1920px;
    font: 16px Arial, Helvetica, sans-serif;}
body a {text-decoration: none;}
header {
    position: sticky;
    top: 0;
    height: 60px;
    z-index: 100;
    background: #000;
    transition: background-color .4s ease;}
header > div,footer > div {margin: 0 auto; position: relative;}
header a {color: #FFF;}
header #logo {
    display: inline-block;
    margin: 5px 0 0 30%;}
header #logo img {height: 50px;}
header #user {
    position: absolute;
    top: 15px; right: 7px;
    display: flex;
    align-items: center;}
header #user a {margin-left: 20px; font-size: 1.5em;}
header #user a span {font-family: "supersaad";}
header #unread {top: 157px; right: 167px;}
header #user #ivs {top: 0; left: 33px;}
header #user #ivs,header #unread {
    display: none;
    position: absolute;
    background: #F00;
    border: 2px solid #000;
    color: #FFF;
    width: 19px;
    height: 19px;
    font-size: 0.6em;
    align-items: center;
    justify-content: center;
    border-radius: 50%;}
header #user .profile {height: 35px;}
header #user #loginbtn {
    font-size: .9rem;
    background: linear-gradient(#4facfe, #0061ff);
    border-radius: 25px;
    font-weight: bold;
    padding: 6px 12px;}
header #user #loginbtn span {margin-right: 7px; font-weight: normal;}
header #user #logoutbtn {
    font-size: .8em;
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(#ff6c6c,#F00);
    padding: 5px 7px;
    border-radius: 15px;}
header nav {
    position: absolute;
    top: 60px; left: -800px;
    z-index: 1;
    width: 100%;
    background: #000;
    transition: all .5s;}
header nav.open {left: 0;}
header nav a {
    display: block;
    font-size: 1.2em;
    text-align: center;
    text-transform: capitalize;
    padding: 15px 10px;}
header #burger {
    position: absolute;
    top: 6px;
    left: 5px;
    appearance: none;
    background: none;
    outline: none;
    border: none;
    width: 50px;
    cursor: pointer;}
header #burger.open div {
    transform: translateX(-50px);
    background: transparent;}
header #burger div,
header #burger::before,
header #burger::after {
    display: block;
    content: "";
    width: 100%;
    height: 6px;
    margin: 7px 0;
    background: #FFF;
    border-radius: 3px;
    transition: all .5s;}
header #burger.open::before {transform: rotate(-45deg) translate(-8px,10px);}
header #burger.open::after {transform: rotate(45deg) translate(-8px,-10px);}
#bellslide {
    display: none;
    background: #333;
    color: #FFF;}
#container {
    min-height: calc(100vh - 70px);
    margin: 0 auto;
    padding: 0;}
#content.slideover {margin-left: -330px;}
#container,header > div {max-width: 1440px;}
/* Styling for complete.php*/
#complete input[type=text],
#complete input[type=email] {
    width: 100%;
    display: block;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;}
#complete input[type=text]:focus,
#complete input[type=email]:focus {
    background-color: lightblue;}
#complete select {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 4px;
    background-color: #f1f1f1;}
#complete input[type=button],
input[type=reset],#dispbox #iv {
    background-color: #04AA6D;
    font-size: 1rem;
    border: none;
    color: white;
    padding: 14px 28px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;}

/*styling for index.php*/
#banner {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 30px solid #905BC8;
    height: 329px;
    color: #FFF;}
#banner #cta {max-width: 90%;}
#banner h1 {text-shadow: 2px 2px 4px #000; font-size: 2.4em; line-height: 1.2em;}
section.home {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #FFF;
    color: #333;
    flex-direction: column;}
section.home:nth-child(odd){background: #ebe6f0;}
section.home img {
    width: 100%;
    max-width: 444px;
    margin: 15px 10px;}
section.home div {
    max-width: 480px;
    margin: 20px 5px;}
section.home p {line-height: 1.4em;}
section.home ul li::marker {
    color: #02ac02;
    font-size: 1.5rem;}
section.home h2 {
    margin: 10px 0 20px 15px;
    font-size: 2rem;
    color: #905BC8;}
#book {
    display: flex;
    flex-direction: column;
    margin: 60px;
    color: #555;}
#book div {padding: 10px 0; font-size: 1.2em;}
#book ul {margin: 15px auto;}
#trooper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 10px 0;
    background: #333;}
#trooper h2 {color: #FFF; margin-bottom: 20px;}
#trooper span {font-family: "supersaad"; font-size: 7em; padding-right: 15px;}
#trooper form {
    width: 100%;
    max-width: 320px;}
#trooper input {
    width: 100%;
    height: 50px;
    margin-bottom: 7px;
    border: none;
    font-size: 1.3em;
    border-radius: 25px;
    padding-left: 15px;}
#trooper input:focus {outline: none;}
/* Styling for messages.php */
#messages {
    padding-top: 20px;
    background: #FFF;
    color: #000;
    min-height: 100vh;}
#messages #nomsgs {background: #F7C29C; width: 90%; margin: 0 auto;}
#messages h2 {
    text-transform: capitalize;
    text-align: center;
    padding: 10px 0;}
#tabs {
    display: flex;
    justify-content: space-around;
    max-width: 250px;
    margin: 0 auto;}
#tabs a {
    font-size: 1.1em;
    font-weight: bold;
    padding: 5px 10px;
    display: inline-block;
    color: #000;
    border-radius: 5px;}
#tabs a.open {background: #F7C29C; color: #FFF; border-radius: 10px 10px 0 0;}
div.mlist {
    display: flex;
    font-size: .9em;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 768px;}
div.mlist:nth-of-type(even) {background: #f7c29c;} /* Soft White*/
div.mlist:nth-of-type(odd) {background: #faece3;} /* Soft White*/
div.mlist div {padding: 5px 7px;}
div.mlist div:nth-of-type(2) {width: 100%;}
div.mlist img {height: 60px;}
div.mlist .un {
    font-size: .8em;
    font-weight: bold;
    padding: 3px 5px 3px 7px;
    color: #FFF;
    text-transform: capitalize;
    background: linear-gradient(#162d41, #010D1C);
    display: inline-block;
    border-radius: 7px;
    margin: 2px 0 5px 0;
    letter-spacing: 2px;}
div.mlist .ago {font-size: .75em; color: #333; margin: 8px 0 3px 0;}
div.mlist .delete {
    border: 1px solid #F00;
    border-radius: 7px;
    margin: 5px 2px 5px 0;
    outline: none;
    background: linear-gradient(#f16262,#FF0000);
    color: #FFF;
    font-size: .95rem;}
div.mlist .delete span {font-family: "supersaad";}
/* Styling for packages.php */
table#packages {
    width: 100%;
    max-width: 500px;
    margin: 10px auto;
    border-collapse: collapse;}
table#packages th {
    background: #000;
    color: #FFF;}
table#packages td {
    border: 1px solid #999;
    padding: 2px 3px;}
/*Styling for members.php*/
form#narrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #905BC8;
    color: #FFF;
    border-radius: 2px;
    min-height: 25px;}
form#narrow p {
    font-size: 1.2em;
    line-height: 30px;
    margin-right: 10px;}
form#narrow input,
form#narrow select {
    height: 30px;
    border-radius: 15px;
    padding-left: 3px;
    outline: none;
    color: #905BC8;}
form#narrow #downup {margin-left: 10px;}
form#narrow input[name=username]{
    border: none;
    height: 27px;
    width: 140px;
    padding-left: 10px;}
#nfields {
    display: flex;
    flex-direction: column;
    gap: 5px; padding: 5px 0;}
#nfields.hide {display: none;}
/*Styling for members.php*/
#members {display: flex;flex-direction: column;}
#members #cardlist,#members #newbies {width: 100%;}
#members h2 {
    background-image: linear-gradient(#905BC8,#000000);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-align: center;
    margin: 7px 0;
    width: 100%;}
#members #cardlist .idcard:nth-child(1n) {
    background: radial-gradient(ellipse at right top,
      #107667 0%,
      #151419 47%,
      #151419 100%);}
#members #cardlist .idcard:nth-child(1n) .info a {color: #169481;}
#members #cardlist .idcard:nth-child(2n) {
    background: radial-gradient(ellipse at right top,
      #a63d2a 0%,
      #151419 47%,
      #151419 100%);}
#members #cardlist .idcard:nth-child(2n) .info a {color: #c95540;}
#members #cardlist .idcard:nth-child(3n) {
    background: radial-gradient(ellipse at right top,
      #00458f 0%,
      #151419 47%,
      #151419 100%);}
#members #cardlist .idcard:nth-child(3n) .info a {color: #398feb;}
#members #cardlist .idcard:nth-child(4n) {
    background: radial-gradient(ellipse at right top,
      #ffb741 0%,
      #151419 47%,
      #151419 100%);}
#members #cardlist .idcard:nth-child(4n) .info a {color: #ffb741;}
/*Styling for training.php*/
#training {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px auto;}
#training #types {
    display: flex;
    padding-bottom: 5px;
    justify-content: center;}
#training #types button.current {background: linear-gradient(#a367e4,#220e38);}
#training #types button {
    display: flex;
    width: 110px;
    align-items: center;
    justify-content: center;
    color: #FFF;
    padding: 5px;
    background: linear-gradient(#858485,#1b1b1b);
    border-radius: 10px;
    margin-right: 5px;}
#training #types button span {
    font: 1.5em "supersaad";
    margin-right: 10px;}
#training #thumbs {max-width: 1080px;}
#training #thumbs h3,#training h2 {
    text-align: center;
    text-transform: capitalize;
    padding: 5px 0;}
#training #thumbs .doc {
    background: linear-gradient(#AAA,#777);
    display: inline-block;
    border-radius: 5px;
    margin: 0 5px 5px 0;}
#training #thumbs .doc a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    padding: 3px;
    width: 265px;
    height: 70px;
    gap: 5px;}
#training #thumbs .doc img {height: 95%;}
#training #thumbs .doc:hover {background: #AFF;}
#training #thumbs .doc .specs {flex: 1; font-size: .7em;}
#training #thumbs .audiolink {
    display: inline-block;
    position: relative;
    border: 3px solid #000;
    width: 175px;
    aspect-ratio: 1 / 1;
    background-size: cover;
    color: #FFF;
    overflow: hidden;
    margin: 0 0 5px 5px;}
#training #thumbs .audiolink p {
    text-transform: capitalize;
    text-align: center;
    padding: 5px 0;
    margin: 0 5px;
    font-size: 1.3em;
    letter-spacing: 2px;
    border-radius: 5px;
    transform: translateY(40px);
    background: rgba(0,0,0,0.5);}
#training #thumbs .audiolink span {
    position: absolute;
    display: block;
    background: #000;
    font-size: 0.9em;
    border-radius: 5px;
    padding: 3px;
    bottom: 3px;}
#training #thumbs .audiolink span:nth-of-type(1){left: 5px;}
#training #thumbs .audiolink span:nth-of-type(2){right: 5px;}
#training #thumbs a.playlist {
    background: #000;
    border-radius: 10px;
    color: #FFF;
    margin: 0 0 5px 5px ;
    display: inline-block;}
#training #thumbs a.playlist .title {
    text-transform: capitalize;
    font-weight: bold;
    padding: 5px 0 0 10px;}
#training #thumbs .cards {
    width: 200px;
    aspect-ratio: 16 / 12;}
#training #thumbs a.playlist .cards img {
    position: absolute;
    border: 1px solid #AAA;
    border-radius: 3px;
    width: 88%;}
#training #thumbs a.playlist div {position: relative;}
#training #thumbs .cards h4 {text-transform: capitalize; text-align: center; padding: 5px 0;}
#training #thumbs .cards img:nth-of-type(1) {top: 25px; left: 5px;}
#training #thumbs .cards img:nth-of-type(2) {top: 32px; left: 12px;}
#training #thumbs .cards img:nth-of-type(3) {top: 39px; left: 19px;}
#training #thumbs .cards span {
    position: absolute;
    bottom: 25px;
    right: 15px;
    padding: 2px 5px;
    border-radius: 5px;
    background: #333;
    color: #FFF;}
/* Styling for player.php */
#training #media {background: #010D19; padding: 10px 5px; width: 100%;}
#training #media h3 {text-transform: capitalize; text-align: center; padding-top: 10px;}
#training #media video {position: relative;}
#training #media #poster {
    background-color: rgba(0, 0, 0, 0.4);
    background-size: cover;
    background-blend-mode: darken;
    border-radius: 5px;
    position: relative;
    margin: 0 auto;
    aspect-ratio: 1 / 1;}
#training #media #poster canvas {
    position: absolute;
    left: 5px;
    bottom: 5px;}
#training #media #poster button {
    position: absolute;
    background: none;
    outline: none;
    color: #FFF;
    font-size: 1.2em;
    border: none;
    font-family: "supersaad";}
#training #media #poster #controls {
    position: absolute;
    bottom: 70px;
    left: 30px;
    width: 100%;}
#training #media #forward,#training #media #chap-btn,#training #media #rewind {bottom: 105px;}
#training #media #prev,#training #media #playpause,#training #media #next {bottom: 35px;}
#training #media #currtime,#training #media #duration {position: absolute; bottom: 10px; font-size: .9em;}
#training #media #prev,#training #media #rewind,#training #media #currtime {left: 20px;}
#training #media #next,#training #media #forward,#training #media #duration {right: 20px;}
#training #media #playpause,#training #media #chap-btn {left: 45%;}
#training #media #poster {display: flex; align-items: center; justify-content: center;}
#training #media #poster #trackinfo {
    padding: 5px 10px;
    color: #FFF;
    text-align: center;
    max-width: 95%;
    text-transform: capitalize;
    background: rgba(0,0,0,.5);
    transform: translateY(-60px);
    border-radius: 5px;}
#training #media #poster #trackinfo p:nth-of-type(1){
    text-shadow: 2px 2px 2px #000;
    font-size: 1.5em;
    font-weight: bold;}
#training #media #poster #trackinfo #trackname {font-size: .8em; padding-top: 5px;}
#training #media #poster #progress {
    position: relative;
    border-radius: 2px;
    width: 80%;
    transform: translate(7px,-10px);
    background: rgba(255,255,255, 0.3);
    height: 5px;}
#training #media #poster #progress #played {
    height: 5px;
    position: absolute;
    background: #F44336;}
#training #media #poster #progress #played #circle {
    position: absolute;
    top: -5px;
    right: 0;
    width: 15px;
    aspect-ratio: 1 / 1;
    background: #F44336;
    border-radius: 50%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);}
#training .vidstat {
    font-size: .85em;
    padding: 7px 3px 7px 5px;}
#training .vidstat div {
    display: flex;
    align-items: center;
    gap: 5px;}
#training .vidstat.current {background: #173550;}
#training .vidstat img {width: 33%;}
#player .vidstat p {flex: 1;}
#player {position: relative; overflow: hidden;}
#player #description {
    padding: 15px 20px;
    font-size: .85em;}
#player #comments {
    padding: 5px;
    background: #010D19;}
#player #comments a {color:#FFF; font-weight: bold;}
#player #comments button {
    border: none;
    outline: none;
    border-radius: 10px;
    padding: 5px;
    background: #905BC8;
    font-weight: bold;}
#player #comments button:disabled {
    background: #0D1E2E;
    color: #999;}
#player .comment {
    display: flex;
    font-size: .9em;
    max-width: 480px;
    gap: 10px;
    margin-top: 1px;
    overflow: hidden;}
#player .comment .body {margin-top: 5px;}
#player .comment .body p:nth-child(2) {font-size: .85em; margin: 3px 0;}
#player .comment textarea {font-size: .9em; color: #FFF;}
#player .comment.hidden {height: 0;}
#player .comment textarea {
    display: block;
    width: 200px;
    height:50px;
    margin: 2px 0 3px 0;
    font-size: .9em;
    color: #FFF;
    background: #010D19;}
#player .comment .avatar {width: 30px;}
#player .comment .comment .avatar {width: 35px;}
#player .comment .actions a {
    display: inline-block;
    border-radius: 10px;
    background: #0D1E2E;
    margin: 5px 5px 3px 0;
    padding: 5px;
    font-size: 1rem;
    cursor: pointer;}
#player .comment .like {font-family: "supersaad";}
#player .comment .usd{
    display: inline-block;
    transform: rotate(180deg);} /*USD = Up-Side-Down*/
#player #comments .showreplies {
    display: inline-block;
    color: #87CEEB;
    margin-top: 5px;}
#player #comments .showreplies .arrow {
    margin-right: 7px;
    font-family: "supersaad";
    font-size: .65em;}
#player #chapters {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    flex-shrink: 0;
    background: #010D19;
    padding: 0 5px 5px 5px;
    z-index: 100;}
#player #chapters h4 {
    text-align: center;
    padding: 3px 0;}
#player #chapters h3 {text-transform: capitalize; padding-bottom: 3px;}
#player #chapters #closechaps {
    display: flex;
    gap: 10px;
    align-items: center;
    padding-bottom: 5px;
    text-transform: capitalize;
    font-weight: bold;
    border-bottom: 2px solid #905BC8;}
#player #chapters.active {transform: translateY(0);}
#player #chapters .track {
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
    background: #0D1E2E;
    margin: 5px 0;
    padding: 7px 7px 7px 9px;
    font-size: .72em;
    font-weight: bold;
    width: 225px;
    text-transform: capitalize;
    line-height: 1rem;}
#player #chapters .track.current {background: #173550;}
#player #chapters .track span:nth-child(1) {width: 145px;}
#player #chapters a {
    position: relative;
    border-radius: 5px;
    margin: 5px 0;
    display: block; color: #FFF;}
#player #chapters a.current {background: #905BC8;}
/*Styling for community.php*/
#forumlinks {margin: 12px 0 12px 2px;}
#forumlinks a {
    color: #FFF;
    font-size: .84em;
    padding: 7px 5px;
    background: #905BC8;
    border-radius: 4px;}
#forumlinks a span {
    font-family: "supersaad";
    margin-right: 4px;}
#forums {
    display: flex;
    gap: 5px;
    justify-content: space-between;
    flex-direction: column;}
#forums #sects {flex-grow: 1;}
#forums section {
    margin-bottom: 10px;
    background: #905bc8;
    color: #FFF;
    padding: 0 5px 5px 5px;
    border-radius: 4px;}
#forums h3,#topics h3,#noreply h3 {
    padding-left: 2px;
    text-transform: capitalize;
    line-height: 32px;}
#forums .forum {
    border-bottom: 1px solid #999;
    border-top: 0; display: flex;
    background: #FFF;
    color: #555;
    font-size: .9em;}
#forums .forum:hover {background: #EEF;}
#forums .forum div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 80px;}
#forums .forum div a:hover {text-decoration: underline;}
#forums .forum div:nth-child(1){
    font: 2em "supersaad";
    color: #905bc8;
    width: 50px;
    display: none;}
#forums .forum div:nth-child(2){
    flex-grow: 1;
    padding-left: 5px;}
#forums .forum div:nth-child(2) p {max-width: 320px;}
#forums .forum div:nth-child(3),
#forums .forum div:nth-child(4){
    font-size: .8em;
    width: 55px;
    background: #E2CEF7;
    display: none;}
#forums .forum div:nth-child(5){
    padding: 0 5px 0 10px;
    display: none;
    width: 190px;}
#forums .forum .bighide {font-weight: bold; display: block;}
#forums .forum div span {font-size: 2em;}
#forums .forum div a.title {font-weight: bold; font-size: 1.1em; color: #905bc8;}
#forums #recent {min-width: 260px;}
#forums #recent div{
    background: #FFF;
    color: #333;
    height: 65px;
    padding-left: 5px;
    border-bottom: 1px solid #555;}

/*Styling for topics.php*/
#topics {
    display: flex;
    flex-direction: column;
    justify-content: space-around;}
#topics span {
    font-size: 2.1em;
    padding-top: 5px;}
#topics #main h3 button {
    border-radius: 15px;
    color: #444;
    padding: 0 7px 2px 7px;
    margin: 5px 0;
    font-size: .8em;
    transform: translateX(10px);
    background: linear-gradient(#DDD, #AAA);}
#topics #main h3 button span {
    display: inline-block;
    padding-right: 3px;
    transform: translateY(1px);
    font-family: "supersaad";
    font-size: 1.1em;}
#topics #main,#noreply {flex-grow: 1;}
#topics section,#noreply section {
    background: #905bc8;
    color: #FFF;
    padding: 0 5px 5px 5px;
    border-radius: 5px;}
#topics .topic {
    display: flex;
    height: 65px;
    font-size: 0.9em;
    background: #FFF;}
#topics .topic:nth-child(odd){background: #DDD;}
#topics .topic div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #555;}
#topics .topic img {width: 50px; height: 50px;border-radius: 50%;}
#topics .topic div:nth-child(2) p:nth-child(2) {font-weight: bold;}
#topics .topic div a.title {
    font-weight: bold;
    font-size: 1rem;
    color: #905BC8;}
#topics .topic div:nth-child(1){width: 60px; padding-left: 5px;}
#topics .topic div:nth-child(2){
    width: 100%;
    max-width: 350px;
    padding-left: 15px;
    font-size: .8em;}
#topics .topic div:nth-child(3),
#topics .topic div:nth-child(4){
    font-size: .75em;
    width: 70px;
    align-items: center;
    background: #E2CEF7;
    display: none;}
#topics .topic div:nth-child(5){
    padding: 0 6px;
    flex: 0 0 135px;
    font-size: .9em;
    display: none;}

/* Noreply is used on topics.php and thread.php*/
#noreply section > div {
    display: flex;
    font-size: .9em;
    background: #FFF;
    color: #333;
    padding-left: 5px;}
#noreply section > div:nth-child(odd){background: #DDD;}
#noreply .title {font-weight: bold;}
#noreply div div:nth-child(1){flex-grow: 1; padding: 3px;}
#noreply div div:nth-child(2){
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: .8em;
    width: 70px;
    padding: 8px;
    background: #E2CEF7;}
#noreply div div:nth-child(2) span {font-size: 2em;}
/*Styling for thread.php*/
form#follow {display: inline-block;}
form#follow input {
    cursor: pointer;
    border-radius: 4px;
    border: none;}
#thread {flex-grow: 1;}
#thread #firstreply {
    background: #E8DBF6;
    padding: 5px;
    border: 1px solid #905BC8;
    border-radius: 10px;}
#thread #firstreply p {font-size: 1.2em; font-weight: bold; padding-bottom: 5px;}
#thread img {width: 100%; border-radius: 50%;}
#thread h3 {
    background: #905BC8;
    color: #FFF;
    font-size: 1.9em;
    text-align: center;
    text-shadow: 2px 2px 4px #000;
    padding: 10px 0;
    border-radius: 5px;
    margin: 2px;}
#thread .thread {
    display: flex;
    gap: 5px;
    margin: 10px 0;}
#thread .thread > div{
    background: #E8DBF6;
    border: 1px solid #905BC8;
    color: #000;
    border-radius: 10px;}
#thread #title {
    background: #905bc8;
    border-radius: 10px;
    margin-top: 10px;
    padding: 10px;}
#thread #title a {color: #FFF; text-decoration: none;}
#thread #title h2 {
    color: #FFF;
    padding-top: 5px;
    text-shadow: 2px 2px 4px #000;}
#thread #title span {font-family: "supersaad";}
#thread #title button {
    border-radius: 15px;
    padding: 5px;
    color: #444444;
    font-size: 1.1em;
    background: linear-gradient(#DDD, #AAA);
    margin-top: 10px;}
#thread #title button span {font-family: "supersaad";}
#thread .thread .left {width: 100%; padding: 5px; max-width: 75px;}
#thread .thread .left button {
    width: 63px;
    font-size: .71em;
    padding: 2px 0;
    border-radius: 16px;
    background: linear-gradient(#2b2a2a,#000000);
    color: #CCC;}
#thread .thread .left button span {
    display: inline-block;
    font-size: 1rem;
    font-family: "supersaad";
    margin-bottom: 2px;}
#thread .thread .right {flex-grow: 1; padding: 5px;}
#thread .thread .right p {padding: 5px 0;}
#thread .thread .right p:nth-child(1){
    font-size: .9em;
    color: #333;
    border-bottom: 1px solid #999;}
#thread .thread .right input:not(input[type=submit]),
#thread .thread .right textarea {
    display: block;
    padding: 5px 2px;
    border-radius: 5px;
    font-size: 1.03em;
    margin-bottom: 5px;
    width: 100%;
    max-width: 350px;}
/*Styling for profile.php*/
#profile {padding-bottom: 10px; color: #333;}
#profile h1 {
    color: #FFF;
    text-transform: capitalize;
    text-align: center;
    text-shadow: 2px 2px 4px #000;
    margin-bottom: 10px;
    padding: 10px 0;}
#profile h1 span {margin-right: 5px;}
#profile section > div {padding: 5px; background: #FFF;}
#profile #left {position: relative; color: #333; border-radius: 10px 10px 0 0;}
#profile #left #imgholder {width: 250px; margin: 35px auto 0 auto; position: relative;}
#profile #left #imgholder img {width: 100%;}
#profile #left #imgholder .camera{
    position: absolute;
    color: #333;
    font: normal 1.5em "supersaad";
    padding: 5px 7px 8px 7px;
    border: 3px solid #FFF;
    border-radius: 50%;
    background: #9e9e9e;
    box-shadow: 2px 2px 4px #666;
    right: 7px;
    bottom: 7px;}
#profile #left #button {
    position: absolute;
    top: 10px; right: 5px;}
#profile #left #button a,#profile #right #black a {
    font-size: .9em;
    background: #000;
    color: #FFF;
    padding: 5px 8px;
    border-radius: 15px;}
#profile #right {flex: 1; border-radius: 0 0 10px 10px;}
#profile #right h2 {
    text-align: center;
    text-transform: capitalize;
    margin: 10px 0;}
#profile #right #black a {display: inline-block;}
#profile #right #enrollments,#profile #right #protopics {
    max-height: 400px;
    overflow: auto;}
#profile #right .noresults {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 360px;
    aspect-ratio: 2 / 1;
    background: linear-gradient(#f5d584,#F7E0A7); 
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    margin: 10px auto;}
#profile #right table {width: 100%;}
#profile #right table th {background: #000; color: #FFF;}
#profile #right table td {padding: 5px;}
#profile #right table tr:nth-child(even) {background: #CCC;}
#profile #right table tr:nth-child(odd) {background: #EEE;}
#profile #left #button span {font-family: "supersaad"; margin-right: 6px;}
#profile #left form {
    margin: 10px auto 0 auto;;
    background: #c7d7f8;
    padding: 5px 15px;}
#profile #left label {
    margin-top: 10px;
    font-size: .75em;
    padding: 3px 0;
    font-weight: bold;
    display: block;}
#profile #left input:not(input[type=submit]),
#profile #left select {
    outline: none; /* Removes outline that appears on focus*/
    border: none; /* Removes default borders */
    border-radius: 5px;
    padding: 5px 3px;
    font-size: 1.1em;
    width: 100%;}
#profile #left input[type=submit]{
    background: #905BC8;
    border-radius: 3px;
    border: none;
    padding: 12px;
    color: #FFF;
    font-weight: bold;
    margin-right: 15px;}
#profile #left textarea {
    padding: 3px;
    border: 1px solid #999;
    outline: none;
    resize: none;
    width: 100%;}
#conversation #chat {
    min-height: 100px;
    max-height: 200px;
    margin: 3px 0;
    overflow-y: auto;}
#conversation #chat .msg {
    position: relative;
    padding: 10px;
    border-radius: 7px;
    font-size: .9em;
    min-height: 50px;
    margin-bottom: 5px;
    max-width: 350px;}
#chat .msg.me {border: 1px solid #C40233; background: #F06E6E;}
#chat .msg.them {border: 1px solid #006400; background: #72c572;}
#chat .msg .when {
    position: absolute;
    font-weight: bold;
    color: #333;
    bottom: 3px; right: 3px;
    font-size: .9em; text-align: right;}
#conversation {width: 280px;}
#conversation [name=sendmsg] {display: flex; gap: 3px;}
#conversation [name=sendmsg] .blue {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "supersaad";
    font-size: 1.4rem;
    aspect-ratio: 1 / 1;
    margin: 0;}
#conversation .idcard {
    position: relative;
    width: 280px;
    height: 120px;}
#conversation .idcard h3 {transform: translateX(12px);}
#conversation .idcard img{
    position: absolute;
    top: 15px; left: 7px;
    height: 88px;}
#conversation .idcard p {text-align: left;}
#conversation .idcard .specs {
    position: absolute;
    top: 27px; left: 115px;}
#conversation .idcard .info  {
    position: absolute;
    top: 63px;
    left: 115px;
    font-size: .8em;}
#conversation .idcard .info a {
    background: #107667;
    color: #FFF;
    width: 45px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;}
#conversation textarea {
    display: block;
    height: 60px;
    border-radius: 3px;}
#profile #left #userspecs div {
    display: flex;
    font-size: .9em;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #999; 
    margin-bottom: 5px;}
#profile #left #userspecs div:last-child {display: block;}
#profile #left #userspecs p:nth-child(1) {font-weight: bold;}
form label[for=photo]:hover {background: #999;}
#lb.cropper #canvas_header {
    display: flex;
    padding: 0 10px;
    align-items: center;
    justify-content: space-between;
    height: 45px;}
#preferences  {
    margin: auto;
    padding: 10px 0;}
#preferences .pref {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid #eee;}
#preferences .pref span:nth-child(1) {font-size: .83em; max-width: 85%;}
#preferences .pref .slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;}
#preferences .pref input:checked + .slider {
  background-color: #4caf50;}
#preferences .pref input:checked + .slider:before {
  transform: translateX(22px);}
#preferences .pref .slider{
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;}
#preferences .pref .switch input{
    opacity: 0;
    width: 0;
    height: 0;}
#preferences .pref .switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;}
#lb.cropper #canvas_header h3{text-align: center;}
#lb.cropper #canvas_header #apply {
    outline: none;
    border: none;
    padding: 0 10px;
    background: #000;
    font-size: 1.1em;
    color: #FFF;
    border-radius: 15px;
    padding: 7px 10px;}
#lb.cropper #perc {
    position: absolute;
    top: 22%;
    left: 37%;
    color: #FFF;
    font-size: 6em;
    z-index: 2;
    background: #905bc8;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    padding: 1px;
    width: 250px;
    height: 250px;
    text-align: center;
    line-height: 2.5em;
    border-radius: 50%;
    display: none;}
#flashy {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #905BC8;
    padding: 5px;
    color: #FFF;}
#flashy img {height: 50px; margin-right: 5px;}
/* Styling for edit_profile.php */
#edit_profile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: url("../images/chairs_1920.jpg");
    background-size: cover;}
#edit_profile p.success {
    border: 1px solid #006400;
    color: #006400;
    padding: 5px;
    font-size: 1.1em;}
#edit_profile form {
    flex-direction: column;
    justify-content: center;
    max-width: 420px;
    max-height: 400px;
    margin-bottom: 100px;
    border-radius: 10px;
    padding: 15px;
    background: #FFF; color: #000;}
#edit_profile form h3 {margin: 5px 0 15px 0;}
#edit_profile label {
    color: #1c3a53;
    font: .9em "Arial Black", Gadget, sans-serif;
    display: block;}
#edit_profile form .eye {
    position: absolute;
    top: 25px;
    right: 7px;
    display: inline-block;
    font-size: 1.2em;
    font-family: "supersaad";
    cursor: pointer;}
#edit_priflle form label {
    margin: 10px 0 1px 1px;
    color: #1c3a53;
    font-size: .7em;
    font-family: 'Arial Black', Gadget, sans-serif;
    font-weight: 700;}
#edit_profile input {
    display: block;
    width: 100%;
    margin-bottom: 5px;
    font-size: .85em;
    font-weight: bold;
    border-radius: 3px;
    outline: none;
    border: 2px solid #BBB;
    padding: 7px 30px 7px 4px;
    transition: border-color 0.3s;}
#edit_profile input:focus {border: 2px solid #007BFF;}
#edit_profile form img {width: 220px;}
#edit_profile form #pw_specs {display: none; margin: 0 0 5px 0;}
#edit_profile #green {
    border: 2px solid #333;
    border-radius: 10px;}
#edit_profile #green span {font-size: 3em;}
#edit_profile h2 {text-align: center;}
/* Styling for login.php */
#login_div {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 0 0 0;
    background: url(../images/chairs_1920.jpg);
    background-size: cover;}
#login_div form {
    width: 100%;
    max-width: 400px;
    border-radius: 15px;
    background: #FFFFFF;
    padding: 20px;}
#login_div h1 {color: #905BC8; margin-bottom: 10px; text-align: center;}
#login_div label {
    display: block;
    color: #1c3a53;
    font-size: .85em;
    font-family: 'Arial Black', Gadget, sans-serif;
    margin: 8px 0 0 1px;}
#login_div input {
    border: 2px solid #666;
    padding: 5px;
    width: 100%;
    border-radius: 3px;
    font-size: 1.1em;}
#login_div input[type=submit]{
    padding: 15px 0;
    width: 30%;}
#login_checkbox {font-size: .9em; font-weight: bold;}
#login_checkbox input[type=checkbox]{
    width: auto;
    margin-right: 3px;}
#login_div #lower_links {
    display: flex;
    font-size: .9rem;
    justify-content: space-between;
    padding: 10px 70px 0 0;}
/*Styling for logout.php*/
#logout {
    display: flex;
    background: linear-gradient(#7624C7, #FFF);
    min-height: 100vh;
    padding-top: 50px;
    justify-content: center;}
#logout div {
    padding-top: 40px;
    max-width: 500px;
    height: 400px;
    border-radius: 15px;
    background: rgba(255,255,255, 0.7);
    color: #000;
    box-shadow: 2px 2px 4px #1a0431}
#logout div span {font-family: "supersaad";}
#logout h2,#logout p {
    margin: 15px auto;
    width: 75%;
    text-align: center;}
#logout div span {
    font-size: 5em;
    display: block;
    text-align: center;}
#logout button {
    display: block;
    padding: 10px 30px;
    outline: none;
    border: none;
    border-radius: 5px;
    margin: 10px auto;
    background: #4a6ea3;
    color: #FFF;
    font-size: 1.2em;}
/* Styling for dialing.php */
[name=goal] {
    padding: 2px;
    font-size: 1.1em;
    border: none;
    outline: 0;
    border-radius: 5px;}
#leads {
    display: flex;
    flex-direction: column;
    padding-left: 5px;
    align-items: center;
    background: #FFF;
    color: #333;
    min-height: 800px;}
#leads h2 {margin: 5px 0;}
.button,#filterbtn {
    display: inline-block;
    background: #C5B4E3;
    font-size: 1.1em;
    padding: 5px 10px;
    margin: 15px 0 0 5px;
    color: #333;
    border: 1px solid #333;
    border-radius: 15px;}
.button span,#filterbtn span {font-family: "supersaad";}
#leads .packlist {display: block; min-height: 100px;}
#leads .manila h3 {
    padding-bottom: 5px;
    text-transform: capitalize;
    text-align: center;
    font-size: .98em;}
#leads [name=packlist] {
    font-size: 1.2em;
    padding: 3px;}
#leads .manila {
    display: inline-block;
    font-size: .9em;
    margin: 0 10px 10px 0;
    padding: 3px;
    border-radius: 5px;
    width: 230px;
    height: 80px;
    background: linear-gradient(#F7E0A7,#f5c959);
    border: 1px solid #CCC;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
    color: #000;}
#leads .manila div {
    display: flex;
    align-items: center;
    gap: 7px;}
#leads .manila a {color: #333;}
#leads .manila .specs {
    display: inline-block;
    flex: 0 0 147px;
    font-size: .85em;}
#leads .manila .icon { 
    font-size: 2.7em;
    font-family: "supersaad";}
#leads .manila .icon img {width: 40px;}
#leads .manila .trash,#leads .manila .restore {
    font-size: 1.7em;
    font-family: "supersaad";}
#leads .manila .restore {transform: translateX(-7px); font-size: 1.6em;}
/*Styling for store.php*/
#store {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-top: 10px;
    background: #FFF;
    min-height: 100vh;
    color: #000;}
#store #purchase a {display: inline-block;}
#store .pack {
    display: flex;
    align-items: center;
    background: #F1A380;
    border-radius: 5px;
    padding: 5px;
    width: 270px;
    margin: 5px;}
#store .pack.current {background: #333; color: #FFF;}
#store a {color: #000;}
#store .pack div {padding: 5px;}
#store .pack img {height: 80px}
#store .pack .specs {font-size: .9em; text-transform: capitalize;}
/*styling for purchase.php*/
#store #purchase.purchase {display: none;}
#store #details {margin: 5px; color: #222;}
#store #details p {font-size: .8em; margin: 10px 0; line-height: 1.33em;}
#store #details img {float: left; width: 140px; margin: 0 10px 10px 2px;}
#store #details .button {width: 80px; height: 33px; margin-top: 0;}
#store #details #buybutton {
    background: #4CAF50;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    margin: 5px;
    font-size: 1.1em;
    font-weight: bold;}
#store #details #buybutton a {color: #FFF;}
#store #details #buybutton:hover {background: #45A049;}
#store #details h1 {
    text-transform: capitalize;
    text-align: center;
    padding-left: 10px;
    font-size: 1.8em;}
/*Styling for list.php*/
#list {
    display: flex;
    background: #FFF;
    color: #000;
    flex-direction: column;}
#list > div {
    margin: 5px 0;
    padding: 5px;
    border-radius: 10px;}
#list #menu {
    display: flex;
    border-radius: 10px;
    overflow: hidden; /* Solves the border-radius problem on 'current' at the top and bottom*/
    width: 100%;
    background: #333;}
#list #menu a {
    display: block;
    color: #F5c959;
    flex: 1;
    font-size: .65em;
    padding: 2px;
    text-align: center;}
#list #menu a.current {
    background: #F5c959;
    color: #333;
    border-radius: 7px;}
#list #menu a span {
    display: block;
    font-size: 2.5em;
    font-family: "supersaad";
    padding: 6px 0 4px 0;}
#list #results {flex: 1;}
#list #results #goal {
    position: relative;
    background: #c3c98d;
    border-radius: 5px;
    width: 85%;
    max-width: 400px;
    margin: 10px auto;
    font-size: .9em;
    font-weight: bold;
    padding: 7px;}
#list #results #goal #changegoal {
    background: linear-gradient(#4CAF50, #143d16);
    color: #FFF;
    padding: 3px 5px;
    font-size: .9em;
    border-radius: 10px;
    display: inline-block;
    transform: translateX(20px);}
#list #results #goal p {text-align: center; margin-bottom: 10px;}
#list #results #goal #percbox {
    position: absolute;
    top: 40px;
    left: 40%;
    color: #FFF;}
#list #results #goal progress {
    width: 100%;
    height: 20px;
    /* Required to make border-radius work */
    -webkit-appearance: none;
    appearance: none;}
#list #results progress::-webkit-progress-bar {
    border-radius: 10px;
    background: linear-gradient(#4d4c4c,#999);}
#list #results progress::-webkit-progress-value {
    border-radius: 10px;
    background: linear-gradient(#4facfe, #0061ff);}
#list #results #goal a {color: #5050bb;}
#list #results #sform #shareckd {
    font-family: "supersaad","Helvetica","Arial",sans-serif;
    background-image: linear-gradient(#42A1EC, #0070C9);
    border: 1px solid #0077CC;
    border-radius: 4px;
    box-sizing: border-box;
    color: #FFFFFF;
    cursor: pointer;
    direction: ltr;
    font-weight: 400;
    letter-spacing: -.022em;
    line-height: 1.27059;
    min-width: 20px;
    overflow: visible;
    padding: 4px 10px;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;}
#list #results #goal input {
    border: none;
    outline: none;
    width: 60%;
    display: block;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    padding: 3px 5px;
    margin: 0 auto;}
#list #results select {
    background: #333;
    border: none;
    outline: none;
    font-family: "supersaad";
    color: #FFF;}
#list #results option {
    background: #FFF;
    color: #000;
    font-size: 1rem;}
#list #results h2 {
    text-align: center;
    text-transform: capitalize;}
#list #results h2 span {font-family: "supersaad"; font-weight: normal;}
#list #results table {
    width: 100%;
    max-width: 480px;
    font-size: .9em;
    border-collapse: collapse;
    margin: 10px auto;}
#list #results table caption {
    font-size: 1.2rem;
    font-weight: bold;
    padding: 3px 0;
    text-transform: capitalize;}
#list #results table tr th {
    background: #333;
    color: #FFF;
    font-size: .9em;
    font-weight: bold;
    height: 30px;}
#list #results table tr th:first-child {
    border-radius: 10px 0 0 0;
    width: 10px;}
#list #results table tr th:last-child {
    border-radius: 0 10px 0 0;}
#list #results table th [name=dfilter],
#list #results table th [name=dialtime] {
    width: 3.8em; /* Just enough for "disp" */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;}
#list #results table tr:nth-child(even){background: #F5C959;}
#list #results table tr:nth-child(odd){background: #F7E0A7;}
#list #results table td {font-size: .85em; text-align: center;}
#list #results table td:nth-child(1) {padding-right: 5px;}
#list #results table td:nth-child(2) {text-align: left;}
#list #results table td:nth-child(5),
#list #results table td:nth-child(6) {font-size: 1.4rem; font-family: "supersaad";}
#list #results table tr:hover {background: #BEE1F0;}
#list #results table .fullname {font-size: .85rem; font-weight: bold;}
#list #results table .state {font-size: .9em;}
#list #results table .call {
    display: block;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    background: linear-gradient(#026602,#013a01);
    color: #FFF;
    margin: 10px 0;
    font-weight: bold;}
#dispbox {width: 270px;color: #000;}
#dispbox h3,#dispbox #state {text-align: center;}
#dispbox #state {font-size: .85em;}
#dispbox #time {
    margin: 5px auto;;
    padding: 3px;
    width: 145px;
    font-size: 1.3em;
    border-radius: 5px;
    background: #333;
    color: #FFF;}
#dispbox #inotes {display: none;}
#dispbox #icancel {
    color: #FFF;
    border-radius: 5px;
    margin-left: 10px;
    padding: 14px;
    background: #333;}
#dispbox #dispbuttons button {
    display: inline-block;
    font-size: .8em;
    padding: 5px 0;
    width: 130px;
    margin: 0 5px 5px 0;
    background: linear-gradient(#76aaf8,#4A6EA3);
    border: none;
    border-radius: 5px;
    color: #FFF;
    cursor: pointer;}
#dispbox #dispbuttons button::first-letter {
    font-family: "supersaad";
    font-size: 1.2em;
    margin-right: 5px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7), /* Subtle shadow for depth */
               -1px -1px 2px rgba(255, 255, 255, 0.5);}
#dispbox #dispbuttons button.current {background: linear-gradient(#103d36,#37d1ba);}
#dispbox input:checked + label {background: #A5DC86;
    box-shadow: none;}
#list #filter {
    display: none;
    background: lightblue;
    padding: 5px;
    border-radius: 5px;
    margin: 5px 0;}
/* Styling for performance.php */
#performance {background: #FFF; color: #000; display: flex;}
#performance #charts #weekmth {padding: 3px 0; text-align: center;}
#performance #charts #weekmth span {font-family: "supersaad";}
#performance #charts #labelkeys {
    width: 100%;
    max-width: 480px;
    border: 2px solid #905BC8;
    border-radius: 10px;
    padding: 15px;
    background: #c6a6e9;
    color: #4b1188;
}
#performance #charts #labelkeys p {margin: 7px 0;}
#performance #charts #labelkeys dt {
    background: #4B1188;
    color: #FFF;
    padding: 5px;
    margin-bottom: 5px;}
#ranges {
    display: flex;
    margin-right: 3px;}
#ranges .weeklink {
    border: 1px solid #333;
    border-radius: 5px;
    margin: 5px 0;
    padding: 5px 0 5px 2px;
    display: block;
    font-size: .83em;
    width: 105px;}
#ranges .weeklink.current {background: #42A1EC; color: #FFF;}
#ranges p .month {line-height: 1.3em; padding-left: 5px;}
#charts canvas {border: 1px solid #999;}
#charts #period {text-transform:lowercase;}
#charts #legend {
    margin-left: 30px;
    display: none;
    justify-content: space-around;
    width: 200px;}
#charts #legend span {
    font-size: .9em;
    font-weight: bold;
    padding: 5px 0 5px 13px;
    border-radius: 10px;}
#charts #legend span:nth-child(1) {background: radial-gradient(circle at 13px center,#69C 13px, transparent 10px);}
#charts #legend span:nth-child(2) {background: radial-gradient(circle at 13px center,#FC7700 13px, transparent 10px);}
#charts #legend span:nth-child(3) {background: radial-gradient(circle at 13px center,#CCEE00 13px, transparent 10px);}
#nocalls {
    border: 1px solid #905BC8;
    background: #d4b8f1;
    color: #481480;
    font-size: 1.8em;
    padding: 3px;
    margin: 5px;
    border-radius: 5px;}
#barchart {
    display: none;
    margin: 1px 0 20px 0;
    padding: 5px 0;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    background: #DDD;
    width: 252px;
    height: 150px;}
#barchart .day {
    margin: 0 3px;
    width: 30px;
    position: relative;
    font-size: .75em;}
#barchart div {
    position: absolute;
    bottom: 0;
    text-align: center;}
#barchart span {
    display: block;
    font-weight: bold;
    position: absolute;
    bottom: -20px;}
#barchart .day div {width: 100%; color: #FFF;}
#barchart .day .calls {background: linear-gradient(to right,#69C,#2A5580);}
#barchart .day .appts {background: linear-gradient(to right,#FC7700,#A86B35);}
#barchart .day .sales {background: linear-gradient(to right,#CCEE00,#8B9C2C);}
/*Styling for appointments.php*/
#appointments > div {
    margin: 5px 0;
    max-width: 350px;
    border-radius: 10px;
    min-height: 70px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #555 #222;
    padding: 3px;}
#appointments > div::-webkit-scrollbar {
    width: 6px;
    height: 6px;}
#appointments > div::-webkit-scrollbar-track {background: #222;}
#appointments > div::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 10px;
    border: 2px solid #222;}
#appointments .appt {
    border-radius: 10px;
    background: linear-gradient(#CCC, #999);
    color: #000;
    margin: 10px 5px;
    padding: 3px;
    width: 100%;
    height: 92px;
    overflow: hidden;}
#appointments .appt .prospect {
    position: relative;
    display: flex;
    gap: 5px;
    transition: margin .3s;}
#appointments .appt .call {
    margin: 0 5px;
    font-size: .85em;
    padding: 3px 5px;
    border-radius: 5px;
    background: linear-gradient(#026602,#013a01);
    color: #FFF;
}
#appointments .appt .prospect.slideup {margin-top: -65px;}
#appointments .appt select {
    position: absolute;
    bottom: 1px; right: 3px;
    font-family: "supersaad";
    padding: 3px;}
#appointments .appt img {width: 50px;}
#appointments .appt .delappt {font-family: "supersaad"; font-size: 1.5em; padding: 3px;}
#appointments .appt .delappt:hover {background: #AAA;}
#appointments .appt .notes {height: 70px;}
#appointments .appt .notebtn {display: inline-block; margin-top: 26px;}
#appointments .appt .notes, #appointments .appt .notebtn {
    padding: 3px;
    background: #333;
    color: #FFF;}
#appointments .appt .notebtn span {font-family: "supersaad";}
#lb #notes {width: 300px; height: 200px; overflow: auto;}
/*Styling for register.php*/
#register {
    color: #1C3A53;
    min-height: 100vh;
    padding-top: 15px;
    background: url("../images/chairs_1920.jpg");
    background-size: cover;}
#register #login_link {
    border: 2px solid #999;
    color: #666;
    font-size: 1.2em;
    margin-left: 20px;
    border-radius: 5px; padding: 7px 9px;}
#register #sponsbox {
    display: flex;
    margin: 5px auto;
    width: 350px;
    background: linear-gradient(#444,#000);
    color: #FFF;
    align-items: center;
    border: 1px solid #333;
    border-radius: 5px;
    padding: 5px;
    gap: 10px;
    height: 110px;}
#register #sponsbox img {
    height: 75%;
    border-radius: 50%;
    border: 1px solid #DDD;}
#register #sponsbox h4 {font-size: 1.05em; text-transform: capitalize;}
#register #sponsbox p {font-size: .75em; line-height: .9rem;}
#register a#yes {
    background: linear-gradient(#9c82fa,#3d0deb);
    color: #FFF;
    padding: 5px;
    display: inline-block;
    margin: 5px 10px 5px 100px;
    border-radius: 3px;}
#register a#reset {
    background: linear-gradient(#f08585,#eb0d0d);
    color: #FFF;
    padding: 5px;
    display: inline-block;
    margin: 5px 0;
    border-radius: 3px;}
#register .fail {margin: 0; border-radius: 0;}
#register a#reset:hover {background: #eb0d0d;}
#register h2,#register h3 {margin: 0 auto;}
#register form {
    display: flex;
    flex-direction: column;
    padding: 0 0 20px 20px;
    margin: 0 auto 10px auto;
    border-radius: 5px;
    max-width: 470px;
    padding: 10px;
    background: #d1d0cb;}
#register form .group {display: flex; gap: 5px;}
#register form .group div {flex: 1;}
#register form .group input,
#register form .group select {width: 100%;}
#register label {
    display: block;
    margin: 8px 0 0 1px;
    color: #1c3a53;
    font-size: .7em;
    font-family: 'Arial Black', Gadget, sans-serif;
    font-weight: 700;}
#register input,
#register select {
    font-size: .85em;
    font-weight: bold;
    border-radius: 3px;
    outline: none;
    border: 2px solid #BBB;
    padding: 7px 4px;
    transition: border-color 0.3s;}
#register input:focus {border: 2px solid #007BFF;}
/* Used on register.php and reset_password.php */
#pw_specs {
    flex: 0 0 175px;
    margin-top: 10px;
    padding: 5px 2px 5px 8px;
    border: 1px solid #AAA;
    background-color: #f9f9f9;
    content: "";
    border-radius: 5px;}
#pw_specs p {margin: 5px 0; font-size: .71em;}
#pw_specs p.invalid {color: red;}
#pw_specs p.invalid::before {content: "✖ ";}
#pw_specs p.valid {color: green;}
#pw_specs p.valid::before {content: "✔ ";}
#register form #tos {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 15px 0;
    font-size: .9em;}
#register form #tos input {
    width: 20px;
    aspect-ratio: 1 / 1;
    margin: 0;}
#register form .eye {
    font-family: "supersaad";
    position: absolute;
    right: 5px;
    font-size: 1.2em;
    cursor: pointer;
    transform: translateY(8px);}
#register form .pw input {padding-right: 28px;}
/*Styling for footer.php*/
footer {
    padding: 10px 0;
    min-height: 70px;
    background: #905BC9;}
footer > div {max-width: 600px;}
footer a {padding: 10px; color: #FFF;}
footer a:hover {text-decoration: underline;}
footer p {font-size: .9em; text-align: center;}
footer p:nth-of-type(1) {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;}
/* Styling for bottomlinks.php */
.bottomdiv {min-height: 100vh; padding: 90px 10px 0 10px;}
.bottomdiv h1 {text-align: center;}
.bottomdiv p {margin: 20px auto; max-width: 600px;}
/***** Media Query Styles *****/
@media screen and (min-width: 480px){
    #container {display: flex; overflow: hidden;}
    /** register.php **/
    #register form .group {gap: 10px;}
    header > div,footer > div {padding: 0 5px;}
    /** header.php **/
    header {height: 85px;}
    header #logo {margin-left: 0;}
    header #logo img {height: 45px;}
    header #burger {display: none;}
    header #unread {top: 5px; right: -19px;}
    header nav {
        position: static;
        display: flex;
        background: none;
        padding: 0 5px;
        justify-content: space-between;}
    header nav a {
        position: relative;
        padding: 5px 0px;
        display: inline-block;}
    header nav a::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 0;
        height: 3px;
        background: #905BC8;
        transition: width 0.2s ease, left 0.2s ease;
        transform: translateX(-50%);}
    header nav a:hover::after {width: 100%; left: 50%;}
    header nav a.current {color: #905BC8;}
    /** index.php **/
    #banner {height: 340px;}
    #banner h1 {font-size: 3.2em;}
    section.home div {font-size: 1.3em;}
    /** entire site **/
    #content {
        width: 100%;
        flex-shrink: 0;
        transition: margin-left 0.3s ease;}
    #bellslide {
        display: block;
        width: 100%;
        max-width: 330px;
        overflow: hidden;
        flex-shrink: 0;}
    /** player.php **/
    #player {display: flex;}
    #player .vidstat {width: 255px;}
    #training .vidstat p {font-size: .8em;}
    #player #chapters {
        position: static;
        z-index: auto;
        transform: none;
        transition: none;
        box-shadow: none;
        height: auto;}
    #player #chap-btn,#player #chapters #closechaps {display: none;}
    #training #player .open .doc {width: 100%;}
    /** stats.php **/
    #stats .charts {
        display: flex;
        align-items: center;
        gap: 20px;}
    #stats table {width: 200px;}    
    /** list.php **/
    #list {min-height: 100vh; padding: 5px; flex-direction: row;}
    #list div {margin: 5px 2px;}
    #list #menu {
        flex-direction: column;
        padding: 0;
        min-width: 135px;
        max-width: 155px;}
    #list #menu a {
        display: flex;
        align-items: center;
        flex: 0;
        width: 100%;
        height: auto;
        margin: 0;
        font-size: 1.1rem;
        text-align: left;
        border-radius: 0;}
    #list #menu a.current {border-radius: 0;}
    #list #menu a span {
        display: inline-block;
        width: 30px;
        text-align: center;
        font-size: 1.4rem;
        padding: 7px 0;}
    /** community.php**/
    #forums .forum div {height: 65px;}
    #forums .forum div:nth-child(1){
        display: flex;
        align-items: center;
        justify-content: center;}
    #forums .forum div:nth-child(1),
    #forums .forum div:nth-child(3),
    #forums .forum div:nth-child(4){
        display: flex;
        align-items: center;
        justify-content: center;}
    #forums .forum .bighide {display: none;}
    /** topics.php **/
    #topics .topic div:nth-child(2) p:nth-child(2) {display: none;}
    #topics .topic div:nth-child(3),
    #topics .topic div:nth-child(4) {display: flex;}
    /** profile.php **/
    #profile h1 {font-size: 2.5em;}
    #profile section {display: flex; gap: 10px; padding: 0 5px;}
    #profile #left {max-width: 240px;}
    #profile #left #imgholder {width: 100%;}
    #profile #left form {padding: 5px;}
    /** performance.php **/
    #charts .backbtn {display: none;}
    .backbtn span {font-family: "supersaad";}
    #performance {display: flex;}
    #charts .button {display: none;}
    /** purchase.php **/
    #store #details h1 {font-size: revert;}
    /** members.php **/
    #nfields {flex-direction: row;}
    /** messages.php **/
    div.mlist {align-items: center;}
    div.mlist .delete{
        width: 110px;
        margin: 5px 5px 5px 0;
        padding: 5px 0;}
    div.mlist .delete span::after {content: " Delete"; font-family: sans-serif; font-weight: bold;}}
@media screen and (min-width: 768px){
    /* header.php */
    header {height: 70px;}
    header #logo img {height: 60px;}
    header #user #loginbtn{transform: translateY(6px);}
    header nav {
        max-width: 520px;
        margin: -49px auto 0 auto;}
    /* index.php */
    #banner {
        align-items: normal;
        height: 500px;}
    #banner #cta {
        margin-top: 40px;
        max-width: 660px;}
    #banner h1 {transform: translateY(65px); font-size: 4em;}
    section.home {flex-direction: row;}
    section.home div {margin-right: 20px;}
    section.home:nth-child(odd){flex-direction:row-reverse;}
    #book {flex-direction: row;}
    #book div {padding: 10px 20px;}
    #book ul {width: 80%;}
    /* profile.php */
    #profile h1 {font-size: 3em;}
    #profile section > div {padding: 5px 10px;}
    #profile section #left {min-width: 220px; max-width: 260px;}
    /* community.php */
    #forums {flex-direction: row;}
    #forums .forum div:nth-child(5){display: flex;}
    /* topics.php*/
    #topics {flex-direction: row;}
    #topics .topic div:nth-child(5){display: flex;}
    /* thread.php */
    #singlethread {display: flex;}
    /* members.php */
    #members {flex-direction: row; gap: 10px;}
    #members #newbies {flex: 0 0 360px;}
    #members #cardlist {flex: 1; max-width: auto; /*auto overrides 100% from earlier*/} 
    form#narrow {
        flex-direction: row;
        justify-content: center;} 
    form#narrow #downup {display: none;}
    form#narrow #nfields {display: flex;}
    /* player.php */
    #player #single {display: flex;}
    
    /* list.php */
    #list #menu {max-width: 200px;}
    /* purchase.php */
    #store #purchase.purchase {display: block;}
    #store #details .button {display: none;}
}