/* mexitlan */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');


body
{
margin:0;
padding:0;

background:#e4d5b7;

color:#333;
font-family:sans-serif;

box-sizing:border-box;
}




/* a */
a
{
text-decoration:none;
color:white;
}




header
{

}

footer
{
background:black;
margin:auto;
max-width:1200px;
}









/* divs */
#content
{
width:100%;

max-width:1200px;
background:white;
}

.innercont
{
max-width:1200px;
width:90%;
margin:auto;
border:2px solid black;
}



.next
{
display:inline-block;
}

.player
{
background:black;
color:white;
max-width:300px;
padding:5px;
border-radius:5px;
}




.center
{
margin:auto;
text-align:center;
}

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




.loading
{
color: #888; 
font-style: italic;
}

.clear
{
clear:both;
}

.col3
{
display:inline-block;
vertical-align:top;
width:32%;
}






/* nodes */
.node
{
display:inline-block;
width:46%;
min-height:200px;
box-sizing:border-box;
}


@media screen and (max-width:600px)
{
.node
{
width:98%;

}
}

.blacknode
{
background:black;
color:white;
}

.rednode
{
background:#B50804;
color:white;

}

.orangenode
{

background:#F98800;
color:white;

}

.olivenode
{

background:#85860F;
color:white;

}

.drabpurplenode
{

background:#3E4079;
color:white;

}

.limenode
{
background:#87D37C;
color:white;
}

.dodgerbluenode
{
background:#2B8FEF;
color:white;
}

.drabcyannode
{
background:#83BCC3;
color:white;
}

.pinknode
{
background:#FE6FC7;
color:white;
}







/* img */
img
{
display:block;
}

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

.mapsymbol
{
transition:.2s;
}
.mapsymbol:hover
{
transform:scale(1.5);
}



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

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










/* input */
input
{
padding:9px;
border-radius:5px;
border:2px solid black;
}

select
{
padding:9px;
border-radius:5px;
border:2px solid black;
}

textarea
{
padding:9px;
border-radius:5px;
border:2px solid black;
}

input[type=radio]
{

height:2em;
}

input[type=checkbox]
{
transform:scale(2.5);
}








/* menu */
#menucont
{
width:100%;
/*
background-color:#4C0082;*/
background-color:black;
}



ul {
list-style-type: none;
margin:0;
padding:0;
overflow:hidden;
/*background-color:#4C0082;*/
background-color:black;
font-size:20px;
}

li 
{
float: left;
}

li a, .dropbtn 
{
display:inline-block;
padding:12px;
color:white;
text-align:center;

text-decoration:none;
}

li a:hover, .dropdown:hover .dropbtn 
{
background-color:red;
}

li.dropdown 
{
display:inline-block;
}

li>a:after 
{ 
content:' ▼'; 
}

li>a:only-child:after 
{ 
content:''; 
}






/* dropdown*/
.dropdown-content 
{
display: none;
position: absolute;
/*background-color: #4C0082;*/
background:white;

min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a 
{
color:black;
padding:12px 16px;
text-decoration:none;
display:block;
text-align:left;
}

.dropdown-content a:hover 
{
background-color: red;
color:white;
}

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
















/* sidenav */
#sidenav
{
display:none;
}
/* Fixed sidenav, full height */
.sidenav 
{


height:100%;
width:200px;
position:fixed;
z-index:1;
top:0;
left:0;
background-color:green;
overflow-x:hidden;
padding-top:20px;
}

/* Style the sidenav links and the dropdown button */
.sidenav a,.dropdown-btn 
{
padding:6px 8px 6px 16px;
text-decoration:none;
font-size:20px;
color:white;
display:block;
border:none;
background:none;
width:100%;
text-align:left;
cursor:pointer;
outline:none;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover 
{
color: #f1f1f1;
}





/* Main content???? */
.mainxxx
{
margin-left:200px;/* Same as the width of the sidenav */
font-size:20px;/* Increased text to enable scrolling */
padding:0px 10px;
}

/* Add an active class to the active dropdown button */
.active 
{
background-color:green;
color:white;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container 
{
display:none;
background-color:#262626;
padding-left:8px;
}

/* Optional: Style the caret down icon */
.fa-caret-down 
{
float: right;
padding-right: 8px;
}

/* Some media queries for responsiveness */
@media screen and (max-height: 450px) 
{
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}







/* buttons */
.blackbutton
{
display:inline-block;
background:black;
color:white;
padding:9px;
}

.redbutton
{
display:inline-block;
background:red;
color:white;
padding:9px;
}









/* text */
.w
{
color:white;
}

.anton
{
font-family:Anton;
}

.poppins2
{
font-family:Poppins;
font-weight:700;
font-size:2vw;
}

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

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





.calendar-container {
  width: 350px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  font-family: sans-serif;
  padding: 20px;
}
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.calendar-header button {
  background: #007bff;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
}
.calendar-weekdays, .calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}
.calendar-weekdays div {
  font-weight: bold;
  color: #666;
  padding-bottom: 10px;
}
.calendar-days div {
  padding: 10px 0;
  margin: 2px;
  border-radius: 5px;
  color: #333;
}
.calendar-days .empty-day {
  color: #ccc;
}
.calendar-days .today {
  background: #007bff;
  color: white;
  font-weight: bold;
}