/* ######################## */
/* # Fonts                #*/
/* ######################## */
@font-face {
    font-family: "Assistant";
    src: url("/_Fonts/Assistant/Assistant-VariableFont_wght.ttf") format("opentype");
}

@font-face {
    font-family: "CosmoballScript";
    src: url('/_Fonts/CosmoballScript/font.woff2') format('woff2'), url('/_Fonts/CosmoballScript/font.woff') format('woff');
}

@font-face {
    font-family: "FuzzyBubbles";
    src: url('/_Fonts/Fuzzy_Bubbles/FuzzyBubbles-Regular.ttf') format('opentype');
}

/* ######################## */
/* # Root                 # */
/* ######################## */
:root {
    --lightgrey: #ececec;        
    --backgroundgrey: #f7f7f7;        
}

/* ######################## */
/* # Page Level CSS       # */
/* ######################## */
*                                                   {box-sizing: border-box;}
html                                                {scroll-behavior: smooth;}
html body                                           {border:0; margin:0; font-family: Assistant, sans-serif; font-size:1rem; letter-spacing: 0.06rem; background-color:white;}
body                                                {overflow-x: hidden; width:100vw; opacity: 0;transition: opacity 1.5s;}
.disablescroll                                      {height:400px; overflow-y:hidden; background-color:green}
h1                                                  {font-size:1.9rem; font-weight: 500;}
h2                                                  {font-size:1.4rem; font-weight: 400;}
h3                                                  {font-size:1.2rem; font-weight: 300;}
p                                                   {font-size:1rem; margin-top:20px; margin-bottom:20px}
a                                                   {text-decoration:none;}
a:hover                                             {text-decoration:none;}
a:visited                                           {color:unset}
a:link                                              {color:unset}

select                                              {border-radius: 5px;font-size:1rem; width:100%; padding:5px;-webkit-appearance: none; height:40px; border:1px solid gray; background-color: white;appearance: none;background-image: url('/Images/Backgrounds/Dropdown-Arrow.png');background-color: transparent;background-repeat: no-repeat;background-position: right;background-size: 20px;font-size:15px; color:black}
select[multiple="multiple"]                         {background-image:none}
select[multiple="multiple"] option                  {padding:5px}
input                                               {border-radius: 5px; font-size:1rem; width:100%; -webkit-appearance: none; height:40px; border:1px solid gray; background-color: white; appearance: none; color:black; padding:7px;}
input[type="checkbox"]                              {width:20px; height:20px; padding:0;  -webkit-appearance:checkbox;}
textarea                                            {font-family: proxima-nova, sans-serif; border-radius: 5px; font-size:1rem; width:100%; -webkit-appearance: none; height:40px; border:1px solid gray; background-color: white; appearance: none; color:black; padding:7px}
input[type="date"]                                  {font-size:1rem; width:100%; -webkit-appearance: none; height:40px; border:1px solid gray; background-color: white; appearance: none;background-image: url('/Images/Backgrounds/Dropdown-Arrow.png');background-repeat: no-repeat;background-position: right;background-size: 20px; color:black}
input[type="date"]::-webkit-inner-spin-button                   {opacity:0;}
input[type="date"]::-webkit-calendar-picker-indicator           {opacity:0}
input[type="datetime-local"]                                    {font-size:1rem; width:100%; -webkit-appearance: none; height:40px; border:1px solid gray; background-color: white; appearance: none;background-image: url('/Images/Backgrounds/Dropdown-Arrow.png');background-repeat: no-repeat;background-position: right;background-size: 20px; color:black}
input[type="datetime-local"]::-webkit-inner-spin-button         {opacity:0;}
input[type="datetime-local"]::-webkit-calendar-picker-indicator {opacity:0}

.icon                                               {cursor:pointer;}

/* Used to turn a tetx box into a cmobo */
.combo                                              {font-size:1rem; width:100%}
.combo                                              {-webkit-appearance: none; height:40px; border:1px solid gray; background-color: white;appearance: none;background-image: url('/Images/Backgrounds/Dropdown-Arrow.png');background-color: transparent;background-repeat: no-repeat;background-position: right;background-size: 20px;font-size:15px; color:black}

.onoffswitchhoriz                                   {height:30px; width:50px; cursor:pointer;}

/* ######################## */
/* # Animation            # */
/* ######################## */
.animatein                                          {transform: translatey(50px); opacity:0; transition: transform 0.5s ease-in-out 300ms, opacity 0.5s ease-in 300ms}
.animateinright                                     {transform: translatex(-50px); opacity:0; transition: transform 0.5s ease-in-out 0s, opacity 0.5s ease-in 0s}
.animateinleft                                      {transform: translatex(50px); opacity:0; transition: transform 0.5s ease-in-out 0s, opacity 0.5s ease-in 0s}
.animateinpop                                       {-webkit-transform:scale(0.5); transform: scale(0.5); opacity:0; transition: transform 0.25s ease-in-out 300ms, opacity 0.25s ease-in 300ms}

/* ######################## */
/* # Buttons & Links      # */
/* ######################## */
.button                                             {border:1px black solid; display: inline-block; padding:10px 20px 10px 20px; cursor: pointer;}
.button.solid.dark                                  {background-color:black; color:white;}
.button.solid.dark:hover                            {background-color:white; color:black;}
.button.transparent.dark                            {background-color:transparent; color:black; }
.button.transparent.dark:hover                      {background-color:black; color:white; }
.button.solid.light                                 {background-color:white; color:black;}

/* Coloured buttons */
.button.solid.red                                   {background-color:#b41818; color:white; border:1px solid white;font-weight: 600; }
.button.solid.red:hover                             {border:1px solid #b41818}
.button.solid.purple                                {background-color:#b482d2; color:white; border:1px solid white; font-weight: 600; }
.button.solid.purple:hover                          {border:1px solid #b482d2}
.button.solid.orange                                {background-color:#fb9a37; color:white; border:1px solid white; font-weight: 600; }
.button.solid.orange:hover                          {border:1px solid #fb9a37}
.button.solid.yellow                                {background-color:#edc402; color:white; border:1px solid white; font-weight: 600; }
.button.solid.yellow:hover                          {border:1px solid #edc402}
.button.solid.jade                                  {background-color:#2da3a8; color:white; border:1px solid white;font-weight: 600; }
.button.solid.jade:hover                            {border:1px solid #2da3a8}
.button.solid.green                                 {background-color:#84cb54; color:white; border:1px solid white;font-weight: 600; }
.button.solid.green:hover                           {border:1px solid #84cb54}

/* ######################## */
/* # UI Styles            # */
/* ######################## */
.tabs .icon                                        {height:35px; width:30px; cursor: pointer; overflow:hidden;padding-bottom:5px; box-sizing: border-box; border-bottom:2px solid transparent;}
.tabs .icon.selected                               {-webkit-filter: contrast(0) sepia(100%) hue-rotate(190deg) saturate(2000%) brightness(100%);filter: contrast(0) sepia(100%) hue-rotate(201deg) saturate(2000%) brightness(100%);opacity: 1;border-bottom:2px solid black;}

/* ######################## */
/* # Footer               # */
/* ######################## */
.footer                                            {position:fixed; bottom:0; left:0; right:0; z-index: 15; height:50px; background-color:white; border-top:1px silver solid; display:flex; align-items: center; justify-content:space-between; padding:0px 30px 0 30px;}
.footer .iconcontainer                             {height:40px; width:25px; display:flex; flex-direction: column; align-items: center;}
.footer .icon                                      {height:35px; width:30px; transform: scale(1); opacity:1; transition: transform .15s ease, opacity .15s ease; cursor: pointer; overflow:hidden;padding-top:5px; box-sizing: border-box;border-top:2px solid transparent;}
.footer .icon.selected                             {-webkit-filter: contrast(0) sepia(100%) hue-rotate(190deg) saturate(2000%) brightness(100%);filter: contrast(0) sepia(100%) hue-rotate(201deg) saturate(2000%) brightness(100%);opacity: 1;border-top:2px solid black;}
.footer .profileiconcontainer                      {height:35px; width:35px; border:2px white solid; border-radius: 50%; overflow:hidden; padding:0; margin:0; position:relative;box-shadow: 0px 0px 2px 0px black; box-sizing: content-box;}
.footer .profileiconimg                            {height:35px; width:35px; position:absolute; left:0; top:0; margin-left:px; border:0px red solid;}

.mobilemenupopout .icon                            {height:25px; width:25px;}

.icon:hover                                         {scale:1.03}
.iconsurround                                       {padding-bottom:5px}
.iconsurround.selected                              {border-bottom:2px solid black}
.statsicon                                          {width:50px; height:50px; opacity:0.7}

/* ######################## */
/* # Navigation           # */
/* ######################## */
.icon.hamburger                                     {display:block;}
.icon.close                                         {display:none;}
.navicon                                            {opacity:1; border-bottom:2px solid white;}
.navicon.selected                                   {opacity:1; border-bottom:2px solid black}
.mobilemenupopout                                   {display:block; position:fixed; width:90%; height:100%; top:0; left:0; border:1px white solid; z-index:3; background-color:rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(5px); backdrop-filter:blur(5px); overflow-x:hidden; transition: 0.25s ease-in-out; padding: 105px 10px 10px 10px;}
.mobilemenupopout .navoption                        {height:50px; border-bottom:1px var(--lightgrey) solid; border-top:0px white solid; display:flex; align-items: center;}
.mobilemenupopout .navoption p                      {border:0px red solid; margin-left:10px;}
.mobilemenupopout .navoption:first-child            {border-top:0px; }
.mobilemenupopout .navoption:last-child             {border-bottom:0px; }
.mobilemenupopout .bottom                           {bottom:70px; position:absolute; left:10px; right:10px;}

/* ######################## */
/* # Header               # */
/* ######################## */
.welcome                                            {height:38px; display:flex; align-items: center; justify-content: center;border-bottom:1px solid var(--lightgrey);position:relative; z-index:5; background-color:white;}
.header                                             {position:sticky; top:0;background-color:white;z-index:5; border:0px red solid}
.header .container                                  {height:85px; border-bottom:1px solid var(--lightgrey);}
.header .container .desktopcontent                  {border:0px red solid; width:1000px; height:100%; margin-left:auto; margin-right:auto; display:flex; align-items: center; justify-content:space-between;}                
.header .container .desktopcontent .contentleft     {width:75%;border:0px red solid; display:flex; align-items: center; justify-content:flex-start; padding: 0 0 0 0px;}
.header .container .desktopcontent .contentright    {width:25%;border:0px red solid; display:flex; align-items: center; justify-content:flex-end; padding: 0 20px 0 0;}
.header .container .desktopcontent .icon            {border:0px solid silver; width:20px; height:20px; margin: 0 0 0 20px;}
.header .container .desktopcontent .logo            {width:70px; height:70px;}
.header .container .desktopcontent ul               {list-style-type: none; margin: 0;padding: 0;}
.header .container .desktopcontent li               {float:left; margin: 0 0 0 30px; border:0px solid green}
.header .container .mobilecontent                   {display:none;}
.mobilemenupopout                                   {display:none;}

/* ######################## */
/* # Hero                 # */
/* ######################## */
.herocontainer h1                                   {color:white; font-size:2.5rem;}

/* ######################## */
/* # Tabs                 # */
/* ######################## */
#tabanchor                                          {visibility:hidden; border:0px red solid; height:50px; width:100px; position:absolute; transform: translateY(-80px);}
.tabs                                               {position:sticky; top:84px; width:100%; left:0; right:0; z-index: 1; height:50px; background-color:white; border-top:1px var(--lightgrey) solid; border-bottom:1px var(--lightgrey) solid;display:flex; align-items: center; justify-content:space-evenly; padding:0px}

/* ######################## */
/* # Lists                # */
/* ######################## */
.listitemimage                                      {position:sticky; top:84px; width:100%; left:0; right:0; z-index: 2; height:50px; background-color:white; border-top:1px var(--lightgrey) solid; border-bottom:1px var(--lightgrey) solid;display:flex; align-items: center; justify-content:space-evenly; padding:0px}

.listcontainer                                      {width:1000px;border:0px red solid; display:flex; align-items: flex-start; justify-content:space-around; flex-wrap: wrap; padding:70px 0 20px 0; gap:20px}
.listitem                                           {width:230px;  border:0px red solid;}
.listitem .image                                    {border:0px red solid; padding:0px; width:230px; height:230px;border:0px solid silver; border-radius: 10px; padding:0px}
.listitem h4                                        {margin:10px 0 20px 5px; font-weight: 400; font-size:0.9rem;}

/* ######################## */
/* # Page Footer          # */
/* ######################## */
.pagefootercontainer                                {height:auto;display:flex; flex-wrap: nowrap; justify-content: space-evenly; gap:20px; border-top: 1px solid var(--lightgrey); margin-bottom:50px;}
.pagefootercontainer                                {height:300px; width:1000px; background-color: white; display:flex; padding:30px 0 30px 0;}
.pagefootercontainer h1                             {font-size:1rem; margin:0 0 5px 0; font-weight: 700;}
.pagefootercontainer p                              {margin:0px 0 15px 0; }
.pagefootercontainer ul                             {list-style: none; margin:0 0 15px 0; padding:0}
.pagefootercontainer li                             {line-height:1.5rem;}
.pagefootercontainer select                         {padding:5px;}
.pagefootercontainer .icon                          {width:40px; margin-right:10px}
.pagefootercontainer .section1                      {border:0px red solid; width:30%;}
.pagefootercontainer .section2                      {border:0px red solid; width:20%;}
.pagefootercontainer .section3                      {border:0px red solid; width:25%;}
.pagefootercontainer .section4                      {border:0px red solid; width:25%;}
.pagefootercontainer .button                        {width:150px; border:0px solid red; padding:0; margin-bottom:10px}

/* ######################## */
/* # Alert/Popup          # */
/* ######################## */
#alertbg					                        {font-size:15px; position: fixed;left: 0px;top: 0px; z-index:1000; background-color:rgba(0, 0, 0, 0.7); width:100%; height:100%; border:0px red solid; text-align:center; display:flex; align-items:center; justify-content: center;}
#alertbg a				                            {text-decoration: underline;}
#alertbox_yn				                        {position: fixed;left: auto; top:50px; width:75%; background-color:white; border:1px solid black; border-radius:10px; }
#alertboxtitle_yn			                        {border:0px red solid; font-weight:bold; text-align:center; padding:20px 20px 10px 20px;}
#alertboxmessage_yn			                        {border:0px green solid; text-align:center;padding:10px 20px 20px 20px;}
#alertboxbuttons_yn			                        {border-top:1px silver solid;}
#alertbox_yn td				                        {text-align:center;}
#alertbox_yn .leftbutton	                        {border-right:1px solid silver; cursor:pointer; padding:20px;}
#alertbox_yn .rightbutton	                        {cursor:pointer; padding:20px;}

#alertbox_ok        				                {position: fixed;left: auto; top:50px; max-height:calc(90vh - 50px); overflow-y:auto; width:75%; background-color:white; border:1px solid black; border-radius:10px; }
#alertboxtitle_ok       			                {border:0px red solid; font-weight:bold; text-align:center; padding:20px 20px 10px 20px;}
#alertboxmessage_ok                                 {border:0px green solid; text-align:center;padding:10px 20px 20px 20px; }
#alertboxbuttons_ok         		                {border-top:1px silver solid;}
#alertbox_ok td         			                {text-align:center;}
#alertbox_ok .leftbutton        	                {border-right:1px solid silver; cursor:pointer; padding:20px;}
#alertbox_ok .rightbutton	                        {cursor:pointer; padding:20px;}

#alertbox_ync				                        {position: fixed;left: auto; top:50px; width:75%; background-color:white; border:1px solid black; border-radius:10px; }
#alertboxtitle_ync			                        {border:0px red solid; font-weight:bold; text-align:center; padding:20px 20px 10px 20px;}
#alertboxmessage_ync		                        {border:0px green solid; text-align:center;padding:10px 20px 20px 20px;}
#alertboxbuttons_ync		                        {border-top:1px silver solid;}
#alertbox_ync td			                        {text-align:center;}
#alertbox_ync .leftbutton	                        {border-right:1px solid silver; cursor:pointer; padding:20px;}
#alertbox_ync .midbutton	                        {border-right:1px solid silver; cursor:pointer; padding:20px;}
#alertbox_ync .rightbutton	                        {cursor:pointer; padding:20px;}
#alertboxmessage_generalinfo a                      {text-decoration:underline;}

/* ######################## */
/* Search Popup           # */
/* ######################## */
.searchpopup                                        {height:calc(100vh - 110px); transform: translateY(130%); overflow-y:hidden;}
.searchpopup .searchresultscontainer                {border:0px red solid; height:calc(100vh - 290px); overflow-y:auto;background-image:url('/Images/Backgrounds/Search.png'); background-size:60%; background-repeat: no-repeat; background-position:center center; background-color:rgba(255,255,255,0.98); background-blend-mode: lighten;}
.searchpopup .field                                 {position:relative; border:0px red solid; padding-bottom:3px; width:100%}
.searchpopup .combo                                 {font-size:1rem; width:100%;-webkit-appearance: none; height:40px; border:1px solid gray; background-color: white;appearance: none;background-image: url('/Images/Backgrounds/Dropdown-Arrow.png');background-color: transparent;background-repeat: no-repeat;background-position: right;background-size: 20px;font-size:15px; color:black}
.searchpopup .searchresult                          {border-bottom:1px var(--lightgrey) solid; width:100%; display:flex; flex-direction: row; gap:10px; padding:5px 0px 5px 0px; align-items: center; justify-content: space-between;}
.searchpopup .searchresult .membername              {border:1px red solid; flex-grow: 1; }
.searchpopup .searchresult .buttons                 {border:1px red solid; width:100px display:flex; justify-content: flex-end; text-align:right}
.searchpopup .searchresult .friends                 {color:gray}
.searchpopup .searchresult .profilepic              {box-shadow: 0px 0px 2px 0px #888888;border:2px white solid; width:80px; height:80px; border-radius: 50%; background-color:white; flex-shrink: 0; overflow:hidden; box-sizing: border-box;}
.searchpopup .searchresult .profilepic img          {width:76px; height:76px;}
.searchpopup .searchresult .tick                    {width:30px; padding-right:10px;}

.searchpopup .optiontabs                            {min-width:100%; border:0px rgb(175, 175, 175) inset; background-color:var(--lightgrey); border-radius: 8px; padding:5px 0 5px 0px; display:flex; flex-direction: row; justify-content:stretch; gap:0px; overflow:hidden; position:relative;}
.searchpopup .optiontab                             {height:100%; width:100%; border:0px red solid; border-radius: 8px; padding:2px; flex-grow: 1; position:relative; z-index:10; cursor:pointer;}
.searchpopup .selector                              {background-color:white; height:calc(100% - 6px);  position:absolute; top:3px; left:3px; border-radius: 7px; box-shadow: 0px 0px 7px rgb(127, 127, 127); cursor:pointer; transition: transform 0.25s;}
.searchpopup .optiondivider                         {width:1px; border-right:1px solid silver;}
.searchpopup .panels                                {border:0px red solid; margin-top:0px; position:relative}
.searchpopup .panel                                 {border:0px blue solid; width:100%; height:calc(100vh - 200px); position:absolute; display:flex; flex-direction: row; gap:0; justify-content: space-evenly; flex-wrap: wrap; align-items: flex-start; overflow-y:hidden; padding:0;}
.searchpopup .panel p                               {padding:0; margin:0 0 10px 0}
.searchpopup .content                               {padding:10px 20px 0 20px; border:0px green solid; height:calc(100% - 110px)}

::-webkit-scrollbar {width: 5px; height:2px;}
::-webkit-scrollbar-track {box-shadow: inset 0 0 5px grey;border-radius: 10px;}
::-webkit-scrollbar-thumb {background: lightgrey;border-radius: 10px;}
::-webkit-scrollbar-thumb:hover {background: #5e8cae;}

@media only screen and (max-width: 1000px){ 
    /* ######################## */
    /* # Header               # */
    /* ######################## */
    .header .container                                      {height:65px;}        
    .header .container .desktopcontent                      {display:none;}
    .header .container .mobilecontent                       {width:100%; height:100%; display:flex; align-items: center; justify-content:space-between; padding:0 30px 0 30px;}
    .header .container .mobilecontent .menuiconcontainer    {margin:0 0 0 0; width:30%;}
    .header .container .mobilecontent .logocontainer        {margin:0 0 0 0; width:30%; display:flex; align-items: center; justify-content:center;}
    .header .container .mobilecontent .iconcontainer        {display:flex; align-items: center; justify-content:flex-end; width:30%; gap:15px; }
    .header .container .mobilecontent .logo                 {width:55px; height:55px;}
    .header .container .mobilecontent .icon                 {border:0px solid silver; width:20px; height:20px; margin: 0 0 0 0;}

    .mobilemenupopout                                       {display:block; position:fixed; width:90%; height:100%; top:0; left:0; border:1px white solid; z-index:3; background-color:rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(5px); backdrop-filter:blur(5px); overflow-x:hidden; transition: 0.25s ease-in-out; padding: 105px 10px 10px 10px;}
    .mobilemenupopout .navoption                            {height:50px; border-bottom:1px var(--lightgrey) solid; border-top:0px white solid; display:flex; align-items: center;}
    .mobilemenupopout .navoption p                          {border:0px red solid; margin-left:10px;}
    .mobilemenupopout .navoption:first-child                {border-top:0px; }
    .mobilemenupopout .navoption:last-child                 {border-bottom:0px; }
    .mobilemenupopout .bottom                               {bottom:70px; position:absolute; left:10px; right:10px;}
    
    /* ######################## */
    /* # Footer               # */
    /* ######################## */
    .footer                                                 {position:fixed; bottom:0; left:0; right:0; z-index: 15; height:60px; background-color:white; border-top:1px silver solid; display:flex; align-items: flex-start; justify-content:space-between; padding:5px 30px 10px 30px;}
    .footer .iconcontainer                                  {height:40px; width:25px; display:flex; flex-direction: column; align-items: center;}
    .footer .profileiconcontainer                           {height:30px; width:30px; margin-top:4px; border:1px solid white;}
    .footer .profileiconimg                                 {height:30px; width:30px;}

    .tabs                                                   {position:sticky; top:64px;}
    #tabanchor                                              {transform: translateY(-60px);}

    .listcontainer                                          {width:100%; padding:50px 20px 20px 20px;}
    .listitem                                               {width:150px;}
    .listitem .image                                        {width:150px; height:150px;}

    .pagefootercontainer                                    {flex-wrap: wrap; gap:20px; padding:50px; width:100%; margin:0 0px 0 0px; }
    .pagefootercontainer                                    {height:300px;width:100%; background-color: white; display:flex; padding:30px 0 30px 0;}
    .pagefootercontainer .section1                          {width:calc(50% - 30px); border:0px red solid;}
    .pagefootercontainer .section2                          {width:calc(50% - 30px); border:0px red solid;}
    .pagefootercontainer .section3                          {width:calc(50% - 30px); border:0px red solid;}
    .pagefootercontainer .section4                          {width:calc(50% - 30px); border:0px red solid;}

    .searchpopup                                            {max-width:100% !important; height:100% !important; border-radius: 0px !important; margin:0 !important;box-sizing: border-box !important; width:100% !important}
    .searchpopup .searchresultscontainer                    {background-size:90%;height:calc(100vh - 230px)}
    .searchpopup .panel                                     {height:calc(100vh - 180px);}
    

    .onoffswitchhoriz                                       {height:35px; width:60px; cursor:pointer;}
}