body{
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
position: relative;
top: 0;
left: 0;
font-family: sans-serif;
}
#main_frame div{
margin: 0;
padding:0;
}
#nav_bar_up{
height: 50px;
width: 100%;
background-color: rgb(68,71,145);
}
#content{
height: auto;
width: auto;
}
#content{
width: 100%;
height: 100%;
display:flex;
flex-direction: row;
}
#nav_bar_left{
width: 75px;
height: 100%;
background-color: rgb(228,228,228);
}
#team_main_box{
width: 100%;
height: 100%;
background-color:rgb(245,245,245);
display: sticky;
top:0;
flex-direction: column;
}
#teams_join{
height: 75px;
width: 100%;
display:flex;
flex-direction: row;
}
#teams{
height: 100%;
width: 100%;
background-color: green;
}
#teams_in_teamsjoin{
height: auto;
width: auto;
justify-self: flex-start;
padding-left:40px;
}
#items_in_teamsjoin{
height: 100%;
width: 30%;
margin-left:75%;
display:flex;
flex-direction: row;
align-items: center;
}
#bby_menu{
height: auto;
width: auto;
}
#cogwheel{
height: auto;
width: auto;
position: relative;
right:10px;
z-index: 0;
}
#bby_menu i, #cogwheel i{
height: 50px;
width: 50px;
margin-top: 30px;
}
#join_team_button{
display:flex;
flex-direction: row;
height: 40%;
width: 50%;
border: solid;
border-width: 1px;
border-color: grey;
background-color: white;
box-shadow: 0 4px 2px -2px grey;
}
#join_team_button:hover{background-color: rgb(237,235,233);}
#add_team{
height: auto;
width: auto;
align-self: center;
margin:5px;
}
#join_team_button p{
align-self: center;
font-size: 0.9em;
}
.clsnav{
font-size: 15px;
margin: 0;
color: white;
padding-inline-start: 0;
list-style: none;
display: flex;
align-items: center;
flex-direction: row;
background-color: rgb(68,71,145);
justify-content: flex-start;
font-family: sans-serif;
gap: 20px;
position: fixed;
top: 0;
right: 0;
left: 0;
}
.div7{
display: flex;
justify-content: stretch;
height: 60%;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: rgb(68,71,145);
}
.dropdown-content {
display: none;
height: 100vh;
position: absolute;
background-color: #f9f9f9;
color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: rgb(68,71,145);;
}
.dropdown:hover .dropdown-content {
display: block;
}
table{
height: 50%;
width: 100%;
}
.topnav {
font-family: sans-serif;
padding-left: 15%;
overflow: hidden;
justify-content: center;
background-color: rgb(68,71,145);
height: 100%;
position: relative;
justify-self: center;
width: 60%;
}
.topnav a {
font-family: sans-serif;
float: left;
display: block;
color: rgb(111, 56, 201);
text-align: center;
padding: 14px 14px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
font-family: sans-serif;
background-color: rgb(68,71,145);
color: black;
}
.topnav a.active {
font-family: sans-serif;
background-color: rgb(68,71,145);
color: rgb(68,71,145);;
}
.topnav input[type="text"] {
font-family: sans-serif;
float: center;
margin-top: 8px;
margin-right: 8px;
border: none;
font-size: 17px;
}
@media screen and (max-width: 600px) {
.topnav a, .topnav input[type=text] {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
}
input{
background-color: rgb(211, 198, 233);
width: 60%;
font-family: sans-serif;
}
.hs {
display: none;
position: absolute;
right: 10px;
background-color: #f9f9f9;
color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 2;
}
.hs a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.hs a:hover {
background-color: rgb(68,71,145);;
}
.dropdown:hover .hs {
display: block;
}
.div6{
bottom: 10px;
}