*{
margin: 0;
padding: 0;
}

body{
font-family: 'Roboto', sans-serif;
}

.sidebar a i{
color: white;
display: flex;
margin-left: 90%;
margin-top: 15px;
}

.sidebar{
height: 100%;
position: fixed;
z-index: 1;
width: 300px;
background-color: red;
overflow-x: hidden;
transition-duration: 700ms;
}


.brand{
display: flex;
margin: 10px 0px;
justify-content: center;
}

.brand-image{
border-radius: 50px;
}

.brand-name{
margin-left: 20px;
margin-top: 15px;
color: white;
}

.sidebar-links{
margin-top: 20%;
padding-left: 30%;
}


.sidebar-links li{
margin-bottom:40px;
list-style: none;
display: block;
}

.sidebar-links li a{
text-decoration: none;
color: white;
cursor: pointer;
font-size: 22px;
transition-duration: 700ms;
}

.sidebar-links li a:hover:not(.active){
margin-left: 5px;
transition-duration: 700ms;
}
.sidebar-links li a.active{
border: white 2px solid;
padding: 5px;
border-radius: 20px;
}


.main-content{
margin-left: 300px;
transition-duration: 700ms;
}

.topnav{
position: sticky;
top: 0;
height: 90px;
}
.topnav-header{
background-color: white;
display: flex;
align-items: center;
box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
padding: 10px;
justify-content: space-between;

}

img.user-image{
border: red 2px solid;
border-radius: 50px;
margin-left: 25px;
width: 50px;
height: 50px;
}

div .user{
display: flex;
align-items: center;
justify-content: space-evenly;
}

div .dashboard-name{
display: flex;
align-items: center;
}

.dashboard-name h3{
font-size: 120%;
color: red;
}


i.mobile{
display: none;
}

.user h4{
font-size: 100%;
color: red;
}

.content-section{
padding: 10px;
}

section.info-card{
display: grid;
grid-template-columns: auto auto auto auto;
gap: 10px;
justify-items: center;
}
div .card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 20px;
margin-top: 10px;
width: 90%;
border:2px red solid;
}

div .card:hover{
box-shadow: 0 0px 0px 0 rgba(0,0,0,0.2);
    
}

.card-icon{
color: red;
text-align: center;
padding: 10px 0px;
}
.card-body{
padding: 16px 16px;
}

.card-body h5{
margin: 10px 0px;
text-align: center;
}

.card-body h4{

text-align: center;
}

section.middle-section{
display: grid;
grid-template-columns: auto auto;
gap: 10px;
justify-items: center;
margin-top: 50px;
}

section.first-section{
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
justify-items: center;
margin-top: 50px;
}

/* Add hotels */
.add-hotel-form{
border-radius: 5px;
background-color: white;
padding: 20px;
}

input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
outline-color: red;
}

input[type=file]{
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
outline-color: red; 
}


input[type=number]{
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
outline-color: red; 
}

input[type=submit] {
background-color: red;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}

label{
color: red;
font-weight: bold;
}

input .onfocus{
border: 2px red solid;
}

select{
color: red;
}
/* Add hotels ends */

/* Add Ro0ms */
.add-room-form{
border-radius: 5px;
background-color: white;
padding: 20px;
}
/* Add Rooms ends */

/* Room_hotel_lists */
.room-hotels-container{
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
justify-items: center;
}
/* Room_hotel_lists_ends */

/* tables */
#table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
margin-top: 20px;
}
  
#table td, #table th {
border: 1px solid #ddd;
padding: 8px;
width: 2%;
text-align: center;
}

.disc{
  width: 10%!important;
}

.sidebar-container{
justify-content: center;
display: flex;
}

#table tr:nth-child(even){background-color: #f2f2f2;}

#table tr:hover {background-color: #ddd;}

#table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: red;
color: white;
}
/* tables end */

@media only screen and (max-width: 550px){
#main{
margin-left:0;
}

#sidebar{
width: 0;
}

i.desktop{
display:none;
}

i.mobile{
display: flex;
}
    
.dashboard-name h3{
display: none;
}

section.info-card{
display: grid;
grid-template-columns: auto;
gap: 10px;
justify-items: center;
}


section.middle-section{
display: grid;
grid-template-columns: auto;
gap: 10px;
justify-items: center;
margin-top: 50px;
}

section.first-section{
display: grid;
grid-template-columns: auto;
gap: 10px;
justify-items: center;
margin-top: 50px;
}
}