body{
    margin:0;
    padding:0;
    background-color:#EFEFEF;
}

#container{
    top:170px;
    right:0;
    bottom:0;
    left:0;
    position:fixed;
    left:50%;
    transform:translate( -50%, 0% );
    -moz-transform:translate(-50%, 0% );
    -webkit-transform:translate(-50%, 0%);
    
    background-color:#EFEFEF;
    display:flex;
    background-image:url(../imgs/background_1.jpg);
    background-position:top;
    background-size:cover;
    background-repeat:no-repeat;
    max-width:1500px;
    width:100%;
}

h1{
    font-family: "Figtree", sans-serif;
    padding:15px;
    color:#777;
    font-weight:300;
    font-size:25px;
}

h1 #usernameField{
    font-weight:bold;
    font-size:40px;
}

h1 #otherUsername{
    font-weight:bold;
    font-size:40px;
}

.indexContainer{
    top:0 !important;
    background-color:#FFF !important;
}

#indexWhiteTint{
    background-color:rgba( 255, 255, 255, 0.9);
    position:fixed;
    width:100%;
    height:100%;
}

#login-form{
    position:absolute;
    left:50%;
    top:40%;
    transform: translate( -50%, -50% );
    -webkit-transform: translate( -50%, -50% );
    -moz-transform: translate( -50%, -50% );
}

#login-form input{
    border:none;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    padding:15px;
    font-size:15px;
}

#login-form input:focus-visible{
    outline:none;
    border:#007CC2 1px solid;
}

#login-form button{
    border:none;
    background-color:#007CC2;
    padding:15px;
    color:#FFF;
    font-size:15px;
}

#formDisclaimers{
    font-family: "Roboto", sans-serif;
    color:#007CC2;
    font-size:15px;
    margin-top:30px;
}

#formDisclaimers a{
    color:#007CC2;
}

#indexFooter{
    position:fixed;
    width:100%;
    bottom:0;
    display:flex;
    align-items: center;
}

.footerText{
    font-family: "Roboto", sans-serif;
    color:#000;
    font-size:10px;
    flex:8;
    margin:20px;
}

.footerLogo{
    margin:30px;
    flex:2;
    align-self: flex-end;
}

#contentFooter{
    width:100%;
    bottom:0;
    display:flex;
    align-items: center;
    margin:50px 0 50px 0;
}

.header{
    position:fixed;
    left:50%;
    transform:translate( -50%, 0% );
    -moz-transform:translate(-50%, 0% );
    -webkit-transform:translate(-50%, 0%);
    width:100%;
    height:170px;
    background-color:#007CC2;
    z-index:10;
    background-image:url(../imgs/main_header.jpg);
    background-size:cover;
    max-width:1500px;
}

#sidebar{
    flex:1;
    position:fixed;
    height:100%;
    width:20%;
    z-index:11;

}

#sidebar ul{
    list-style: none;
    padding:0;
    margin:0;
}

#sidebar li{
    font-family: "Roboto", sans-serif;
    background-color:#FFF;
    color:#007CC2;
    margin: 0px 0px 10px 0px;
    font-size:18px;
    padding:10px;
}

#sidebar li a{
    text-decoration:none;
    color:#007CC2;
}

#mobileMenuOpen{
    font-size:25px;
    color:#FFF;
    display:none;
    padding:20px;
    background-color:#007CC2;
    position:fixed;
    z-index:10;
    -webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
box-shadow: -1px 1px 6px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: -1px 1px 6px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 1px 6px 0px rgba(0,0,0,0.75);
}

#closeMobileMenu{
    display:none;
}

#content{
    flex:4;
    background-color:rgba(255, 255, 255 ,0.9);
    position:absolute;
    width:80%;
    left:20%;
    overflow-y:auto;
    scrollbar-gutter: stable;
    height:100%;
}

.contentHeader{
    width:100%;
    height:150px;
    background-color:#f69;
    z-index:10;
}

.contentHeaderSpacer{
    height:150px;
}

.overlay{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color: rgba( 0, 0, 0, 0.7 );
    font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  z-index:10000;
}

.overlayContent{
    position:absolute;
    left:50%;
    top:50%;
    max-width:1280px;
    max-height:800px;
    transform:translate( -50%, -50% );
    -moz-transform:translate( -50%, -50% );
    -webkit-transform:translate( -50%, -50% );
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    background-color:#FFF;
    padding:10px;
    display:flex;
    justify-content:end;
    flex-wrap: wrap;
    
}

.overlayContent a{
    text-decoration:none;
    color:#000;
    font-weight: 600;
}

.overlayText{
    width:100%;
    align-items: center;
    justify-content:center;
    display:flex;
    flex-direction: column;

}

.overlayText > *{
    text-align:center;
    height: fit-content;
    margin:10px;
}

.btn{
    text-align:center;
    align-items: center;
    justify-content: center;
    background-color:#007CC2;
    color:#FFF;
    padding:10px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

.overlayCloseBtn{
    width:35px;
    height:35px;
    right:10px;
}

.userListOverlayContent .overlayCloseBtn{
    position:absolute;
}

.overlayCloseBtn a{
    font-size:30px !important;
    color:#007CC2 !important;
}

.invisible{
    display:none;
}

.fadeOut{
    animation: fadeOut 0.5s forwards;
}

@keyframes fadeOut{
    0%{
        opacity:1.0;
    }
    100%{
       opacity:0.0; 
       display:none;
    }
}

.slideIn{
    animation: slideIn 0.5s forwards;
}

@keyframes slideIn{
    0%{
        transform: translateX( -100% );
    }
    100%{
       transform: translateX( 0% );
    }
}

.slideOut{
    animation: slideOut 0.5s forwards;
}

@keyframes slideOut{
    0%{
        transform: translateX( 0% );
    }
    100%{
       transform: translateX( -100% );
    }
}

.userListOverlay{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color: rgba( 0, 0, 0, 0.7 );
    font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  z-index:10000;
  
}

.userListOverlayContent{
    position:absolute;
    left:50%;
    top:50%;
    width:fit-content;
    max-width:500px;
    height:fit-content;
    max-height:800px;
    transform:translate( -50%, -50% );
    -moz-transform:translate( -50%, -50% );
    -webkit-transform:translate( -50%, -50% );
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    background-color:#FFF;
    padding:10px;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
}

.overlayTitle{
    width:100%;
    align-content: center;
    text-align:center;
    margin:40px 20px 20px 20px;
    font-weight:bold;
    font-size:25px;
    color:#007CC2;
}

.userListOverlayContent a{
    text-decoration:none;
    color:#000;
    font-weight: 600;
}

#overlaySearch{
    width:50%;
    align-content: center;
    text-align:center;
    display:flex;
    margin-bottom:20px;
}

#overlaySearch input{
    font-size:15px;
    padding:10px;
    border:1px solid #007CC2;
    border-radius:20px;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    margin:5px;
    margin-left:0px;
    flex:4;
    width:100%;
}

#overlaySearch input:focus{
    border:2px solid #007CC2;
    outline: #007CC2;
}

#overlaySearch i{
    color:#007CC2;
    font-size:18px;
    align-content: center;
    flex:1;
}

#overlayList{
    max-height:300px;
    width:50%;
    border:1px solid #007CC2;
    overflow:auto;
    margin-bottom:20px;
}

#overlayListTitle{
    color:#FFF;
    background-color:#007CC2;
    padding:10px;
}

#overlayListEls{
    overflow:auto;
}

#overlayListEls li{
    padding:5px;
    cursor:pointer;
}

#overlayListEls li:hover{
    background-color:#e6f2f9;
}

.tradeOverlay{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color: rgba( 0, 0, 0, 0.7 );
    font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  z-index:10000;
  
}

.tradeOverlayContent{
    position:absolute;
    left:50%;
    top:50%;
    width:fit-content;
    max-width:500px;
    height:fit-content;
    max-height:800px;
    transform:translate( -50%, -50% );
    -moz-transform:translate( -50%, -50% );
    -webkit-transform:translate( -50%, -50% );
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    background-color:#FFF;
    padding:10px;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
}

#overlayTradeListEls{
    overflow:auto;
}

#overlayTradeListEls li{
    padding:5px;
    cursor:pointer;
}

#overlayTradeListEls li:hover{
    background-color:#e6f2f9;
}

#overlayTradeList{
    max-height:300px;
    width:50%;
    border:1px solid #007CC2;
    overflow:auto;
    margin-bottom:20px;
}

.overlayWarning{
    margin-top:15px;
    font-size:13px;
    font-weight:300;
}

#tradeDescription{
    width:100%;
    text-align: center;
}

#tradeDescription *{
    font-weight:bold;
}

#tradeConfirm{
    margin-top:15px;
}

#tradeConfirm button{
    background-color:#007CC2;
    color:#FFF;
    padding:10px;
    border:none;
    outline:none;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    cursor: pointer;
}


.teamSection{
    width:100%;
    display:flex;
    flex-wrap: wrap;
    gap:40px;
    justify-content:left;
}

.teamCards{
    width:100%;
    display:flex;
    flex-wrap: wrap;
    gap:40px;
    align-items: stretch;
    justify-content:center;
    padding:0px 40px 0px 40px;
}

.card{
    width:300px;
    background-color:#FFF;
    perspective:1000px;
    display:flex;
    transform-style:preserve-3d;
    transform:rotateY(180deg);
    transition:transform .6s;
    box-shadow: 3px 2px 14px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 3px 2px 14px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 2px 14px 0px rgba(0,0,0,0.75);
}

.card.flipped{
    transform: rotateY(0deg);
}

.teamHeader{
    width:100%;
    text-align:center;
    font-size:25px;
    font-weight:bold;
    margin:20px 0px 10px 0px;
}

.teamHeader img{
    width:100%;
}

.cardName{
    font-family: "Elms Sans", sans-serif;
    font-size:33px;
    color:#777;
    text-transform: uppercase;
    font-weight:900;
    padding:15px;
    line-height:32px;
}

.cardData{
    font-family: "Elms Sans", sans-serif;
    margin:0px 0px 5px 0px;
    padding:15px 15px 0px 15px;
    font-size:13px;
    color:#777;
}

.cardBigText{
    font-size:18px;
}



.cardBack{
    display:flex;
    flex-wrap: wrap;
    align-items:stretch;
    flex-direction:column;
    flex:1;
    height:399px;
    background-color:#FFF;
    transform:
    rotateY(180deg) 
    translateZ(1px);
    opacity:0.4;
}

.cardPhrase{
    background-color:#F409;
    color:#FFF;
    font-family: "Elms Sans", sans-serif;
    line-height:18px;
    padding:10px;
    margin-top:auto;
    font-size:15px;
}

sup{
     line-height: 0;
}

.cardFront{
    position:absolute;
    transform:
    rotateY(0deg) 
    translateZ(1px);

}

.cardFront img{
    width:100%;
}

.cardInteractions{
    font-family: "Figtree", sans-serif;
    color:#FFF;
    padding:10px;
    background-color:#007CC2;
    display:flex;
    -webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
justify-content: space-around;
align-items: center;
}

#menuUsername{
    font-weight:bold;
    font-size:22px;
}

.reqTradeBtn{
    background-color:#FFF;
    color:#007CC2;
    padding:2px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    font-size:13px;
}



.reqTradeBtn a{
    text-decoration:none;
    color:#007CC2;
}

#requests{
    display:flex;
    font-family: "Roboto", sans-serif;
}

.requestSection{
    flex:1;
    border:1px solid #007CC2;
    margin:10px;
    padding:10px;
    display:flex;
    flex-direction: column;
    background-color:#FFF;
}

.requestTitle{
    background-color:#007CC2;
    color:#FFF;
    font-weight:bold;
    font-size:35px;
    padding:10px;
    text-align: center;
}

.requestContainer{
    border:1px solid #CACACA;
    margin:10px 0 10px 0;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}

.requestText{
    width:100%;
    padding:10px;
}

.requestTable{
    width:100%;
    border-collapse: collapse;
}

.requestTable td{
    padding:10px;
    font-size:18px;
}

.requestTable tr td:first-child{
    text-align:right;
    background-color:#888;
    color:#FFF;
    font-size:12px;
    width:40%;
}

.rejectBtn{
    border:1px solid #F00;
    padding:15px;
    color:#000;
    margin:10px;
    cursor: pointer;
}

.acceptBtn{
    border:1px solid #0F0;
    padding:15px;
    color:#000;
    margin:10px;
    cursor: pointer;
}

#loadingOverlay{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color:rgba( 0, 0, 0, 0.8 );
    display:flex;
    justify-content: center;
    align-items: center;
    z-index:10000;
}

#error{
    font-family: "Roboto", sans-serif;
    color:#F00;
    font-weight:bold;
}

@media (max-width: 800px) {

  h1{
    margin-top:80px;
  }
  #sidebar{
    position:fixed;
    height:100%;
    transform:translateX(-100%);
    width:50%;
    background-color:#007CC2;
    box-shadow: -1px 1px 6px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: -1px 1px 6px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 1px 6px 0px rgba(0,0,0,0.75);
  }

  #content{
    width:100%;
    left:0%;
  }

  #mobileMenuOpen{
    display:block;
  }

  #closeMobileMenu{
    display:block;
}

.userListOverlayContent{
    width:100%;
}

.header{
    height:100px;
}
.contentHeader{
    height:80px;
}

.contentHeaderSpacer{
    height:80px;
}

#container{
    top:100px;
}

#indexFooter{
    flex-direction: column;
}

#contentFooter{
    flex-direction: column;
}

.footerText{
    width:98%;
    flex:1;
    margin:0 1% 0 1%;
    text-align: center;
}

.footerLogo{
    width:40%;
    flex:1;
    margin:0 0 20px 0;
    align-self: center;
}

#requests{
    flex-wrap:wrap;
}

}