/* chef sd */

body 
{
font-family:Helvetica,sans-serif;
padding:0;
margin:0;
background:black;

}

footer
{
background:black;
}

a
{
text-decoration:none;
color:black;
}





.clear
{
clear:both;
}

/* divs */
.innercont
{
width:96%;
margin:auto;
max-width:1200px;
}

.next
{
display:inline-block;
vertical-align:top;
}

.col2
{
width:47%;
display:inline-block;
}

@media screen and (max-width:600px)
{
.col2
{
width:100%;
}
}


.col3
{
width:32%;
display:inline-block;
}
.col4
{
width:24%;
display:inline-block;
}
@media screen and (max-width:600px)
{
.col4
{
width:45%;
}
}

.center300
{
margin:auto;
text-align:center;
max-width:300px;
}

.center250
{
margin:auto;
text-align:center;
max-width:250px;
}





.container
{

background-image: url("style/h2.png");
height:500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;

}

.container2
{

background-image: url("style/h1.png");
height:500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;

}

.topleft 
{
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}

.img 
{ 
width: 100%;
height: auto;
opacity: 0.3;
}




/* input */
input[type=text]
{
width:100%;
padding:7px;
font-size:1vw;
box-sizing:border-box;
}
@media screen and (max-width:600px)
{
input[type=text]
{
font-size:4vw;
padding:9px;
}
}


input[type=password]
{
width:100%;
padding:7px;
font-size:1vw;
box-sizing:border-box;
}
@media screen and (max-width:600px)
{
input[type=password]
{
font-size:4vw;
padding:9px;
}
}


textarea
{
font-family:Helvetica;
width:100%;
font-size:1vw;
box-sizing:border-box;
}
@media screen and (max-width:600px)
{
textarea
{
font-size:4vw;
padding:9px;
}
}




/* buttons */
.redbutton
{
display:inline-block;
background:red;
padding:7px;
color:white;
text-align:center;
}

.greenbutton
{
display:inline-block;
background:green;
padding:7px;
color:white;
border:1px solid green;
text-align:center;
}

.lightgreenbutton
{
display:inline-block;
background:#ABE5AB;
padding:7px;
color:white;
border:1px solid green;
text-align:center;
}

.purplebutton
{
display:inline-block;
padding:8px;
border-radius:8px;
text-align:center;
background:purple;
color:white;
}




/* hiddenmenu */
#hiddenmenu
{
text-align:center;
}







/* menu */
.navbar 
{
overflow:hidden;
background-color:black;
}

.navbar a
{
float:left;
font-size:16px;
color:white;
text-align:center;
padding:14px 16px;
text-decoration:none;
}

.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: red;
}

.dropdown-content 
{
display:none;
position:absolute;
background-color:#f9f9f9;
min-width:160px;
box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
z-index:3;

color:black;
}

.dropdown-content img
{
float:none;

padding:12px 16px;
text-decoration:none;
display:block;
text-align:left;
}

.dropdown-content img:hover 
{
background-color:#ddd;
}

.dropdown:hover .dropdown-content 
{
display:block;

color:black;
}






.dd {
  position: relative;
  display: inline-block;
}

.dd-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 2;

height:200px;
}

.dd:hover .dd-content {
  display: block;
}







/* img */
.flagicon
{
height:30px;
}

.ofc100
{
width:100px;
height:100px;
object-fit: cover;
}

.ofc200
{
width:200px;
height:200px;
object-fit:cover;
}

.fit
{
max-width:100%;
width:100%;
}

#profileicon 
{
border-radius:50%;
object-fit:cover;
height:100px;
width:100px;
}

#usericon 
{
border-radius:50%;
object-fit:cover;
height:40px;
width:40px;
}

.dishicon 
{
border-radius:50%;
object-fit:cover;
height:40px;
width:40px;
}




/* uploading */
#uploading
{
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
background:#000000;
color:#ffffff;
padding:10px;
}

#uploadingmask
{
position:fixed;

width:100%; 
height:100%; 
top:0; 
left:0;
right: 0;
bottom: 0;

background:rgba(0,0,0,0.6);
}



/* confirm */
#confirm
{
background:green;
position:fixed;
top:0;
right:0;
color:white;
visibility:hidden;
display:inline-block;
padding:12px;
}












.circle 
{
width:50px;
height:50px;
border-radius:50%;
background-color:green;
display:flex;
justify-content:center;
align-items:center;
color:white;
}








/* text */
.g
{
color:#606060;
}

.w
{
color:white;
}

.herotext 
{
text-align:center;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
color:white;
}


.detail
{
font-size:1vw;
color:grey;
}

@media screen and (max-width:600px)
{
.detail
{
font-size:3vw;
}
}