body {
  font-family: Verdana, sans-serif;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  background-color: #109136c2;
  padding: 10px;

}

#top {
  border: 5px solid #ccc;
}

#close {
  position: fixed;
  top: 0%;
  left: 88%;
  /*transform: translate(-102%, -50%);*/
  background: white;
}

.dashboard_Iframe {
    width: 100%;
    height: 1500px;
}
.no-list-style {
    list-style: None;
}

.form-group textarea {
    width: 100%;
    height: 150px;
}

@media (max-width: 576px) {
    .media {
        width: 100%;
        display: block;
    }
    .container-fluid {
        position: 200px;
    }
    .media img {
        width: 270px;
    }

    .media-body {
        width: 100%;
        display: block;
    }

}

.api_request_container #payload {
    width: 100%;
    height: 250px;
}
.containerle {
            display: flex; /* Use flexbox for layout */
            justify-content: flex-end; /* Align items to the right */
            padding-top: 80px; /* Space below the navbar */
            padding-right: 30px; /* Space from the right edge */

        }

.right-top-block {
            background-color: #e0e0e0; /* Example block color */
            padding: 15px;
            border-radius: 5px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow */
            /* Add any other styling you want for the block */
            max-width: 450px; /* Example max width, adjust as needed*/
            display: None;
        }

/* Responsive adjustments (example) */
@media (max-width: 768px) {
    .containerle {
        padding: 10px; /* Adjust padding on smaller screens */
    }

    .right-top-block {
        max-width: 90%; /* Make block take more width on smaller screens */
        margin: 0 auto; /* Center the block */
    }
}


.chessboard {
    display: grid;
    grid-template-columns: repeat(8, 1fr); /* 8 columns */
    grid-template-rows: repeat(8, 1fr); /* 8 rows */
    width: 100vw; /* Occupy full viewport width */
    height: 80vh; /* Occupy full viewport height */
}

.square {
    display: flex; /* Optional: Center content within squares */
    justify-content: center;
    align-items: center;
    font-size: 20px; /* Example font size */
}

.light {
    background-color: #fff; /* Light square color */
}

.dark {
    background-color: #3734406e; /* Dark square color */
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden; /* To contain the box-shadow and border-radius */
}

.data-table th, .data-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.data-table th {
    background-color: #f2f2f2;
    font-weight: bold;
    color: #333;
}

.data-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.data-table tbody tr:hover {
    background-color: #e6f7ff;
    cursor: pointer;
}