.body {
  font-family: 'Cairo', sans-serif;
  font-size: 18px;
  background-color: white;
color: black;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  justify-self: center;
  width: 100%;
  height: 100%;
    text-align: center;
}

header {
width: 100%;
  background-color: #f5f5f5;
  color: black;
  border: none;
  margin: 0;
  padding: 0;
}

#main-content {
margin-top: 10px;
  font-weight: bold;
    text-align: center;
  background-color: transparent;
color: #0074D9;
}

.top_line {
  position: relative;
  display: flex;
  justify-content: space-between; /* Space them evenly on the horizontal axis */
  align-items: flex-start;
width: 100%;
  height: auto;
  margin: 0 auto;
}

.logo {
  display: block;
margin-top: 0;
  width: 450px;
  height: 200px;
}


.logo img {
  display: block;
  width: 450px;
  height: 200px;
}

.settings_toggle {
  display: block;
  text-align: center;
  width: 32px;
  height: 32px;
  padding: 20px;
}

.settings_toggle .activ {

}

.slogo {
display: none;
  border: none;
  text-align: center;
  font-weight: bold;
  font-size: 24px;
color: #0074D9;
margin-right: 0;
margin-top: 60px;
  width: auto;
  height: auto;
}



/* Style for the settings popup */
.settings {
    display: none;
    position: relative;
    margin-top: 10px;
    left: 0px; /* Adjust the left position to -300px to hide it off-screen initially */
  background-color: white;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  height: auto;
    overflow-y: scroll; /* Make the settings popup scrollable */
    max-height: 80%; /* Limit the height of the popup */
    transition: left 0.3s; /* Add a transition for smooth animation */
}

.settings.show {
    left: 0;
    display: block;
}

/* Style for headings */
.settings h2 {
    font-size: 24px;
    color: #333;
}

.settings h3 {
    font-size: 20px;
    color: #555;
}

/* Style for form elements */
.settings label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    color: #666;
}

.settings select {
    width: 100%;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    background-color: #f9f9f9;
    color: #333;
}

.settings .categories {
    margin-top: 10px;
}

.settings fieldset {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
}

.settings legend {
    font-weight: bold;
    color: #555;
}

.settings input[type="checkbox"] {
    margin-right: 5px;
}

/* Style for buttons */
.settings button {
margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
    cursor: pointer;
    margin-right: 10px;
}


/* Style for search form container */
#search-form-container {
  text-align: center;f
  align-items: center;
  justify-content: center;
  padding: 30px;
margin-top: 10px;
}

/* Style for search inputs container */
.search_inputs {
  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 10px;
}

/* Style for search input */
.search-input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 5px;
}

/* Style for search button */
.search-button {
  padding: 8px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
    margin-right: 10px;
}



/* Collapsible menu styles */
.menu-toggle-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.menu-toggle {
  display: none;
  @media (max-width: 768px) {
    display: block;
  }
  text-align: center;
  width: 50px; /* Adjust the width as needed */
  height: 32px; /* Adjust the height as needed */
  border: 2px solid white; /* Add white border */
  background-image: url(/images/nav_open.png?version=2); /* Default icon image */
  background-repeat: no-repeat;
  background-position: center;

}
.menu-toggle.active {
  width: 32px; /* Adjust the width as needed */
  height: 32px; /* Adjust the height as needed */
  background-image: url(/images/nav_close.png?version=1); /* Icon image when opened */
  background-position: center;
}


.top_nav {
  font-size: 18px;
    width: 100%;
    height: auto;
    margin-top: 10px;
  display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #87CEEB; /* Use the hex color code for sky blue */
}


nav ul {
  list-style: none;
  white-space: nowrap; /* Prevent text from wrapping */
  display: flex;
  justify-content: center; /* Align the navigation items to the center */
  flex-wrap: wrap; /* Allow items to wrap to the next line */
}

nav li {
  margin: 0 5px; /* Adjust spacing between items */
  text-align: center; /* Center-align the text */
  position: relative; /* Enable absolute positioning for the border */
}

nav a {
  text-decoration: none;
  color: #0074D9;
  font-weight: bold;
}

nav li::after {
  content: ''; /* Add an empty content */
  position: absolute; /* Position the border */
  right: -5px; /* Adjust the distance from the right edge of the item */
  top: 0; /* Align the border with the top of the item */
  bottom: 0; /* Align the border with the bottom of the item */
  width: 2px; /* Adjust the width of the border */
  background-color: #87CEEB;
}


/* Media query for small screens */
@media (max-width: 768px) {
.top_nav {
    width: 0;
    height: 0;
    margin-top: 10px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #87CEEB; /* Use the hex color code for sky blue */
}

.top_nav ul {
  list-style: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

  #top_nav.active {
    display: flex;
    width: 100%;
    height: auto;
}

nav a {
  text-decoration: none;
color: #0074D9;
  font-weight: bold;
}


  .nav-list li {
    margin: 0;
    font-size: 14px; /* Adjust the font size as needed */
    padding: 5px 0; /* Adjust the padding as needed */
    display: block;
    width: auto;
    height: auto;
    border-bottom: 1px solid #555;
    box-sizing: border-box;
    text-align: center;
  }

  .nav-list li:last-child {
    border-bottom: none;
  }
}

.screen-reader-text {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  background-color: transparent;
  color: transparent;
  overflow: hidden;
}


/* Submit button */
input[type="submit"] {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 3px;
  cursor: pointer;
}

/* Error message */
#error-message {
  color: #d9534f;
  margin-bottom: 10px;
  display: none;
}


/* Button styling */
button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.3s;
    margin: 10px;

}

button:hover {
  background-color: #0056b3;
}

        #breadcrumbs {
            margin: 10px 0;
            font-size: 16px;
            display: none;
        }

        #breadcrumbs ul {
            list-style: none;
            display: flex;
            padding: 0;
        }

        #breadcrumbs li {
            margin-right: 10px;
        }

        #breadcrumbs a {
            text-decoration: none;
            color: #007bff;
            transition: color 0.3s;
        }

        #breadcrumbs a:hover {
            color: #0056b3;
        }

        #breadcrumbs span {
            margin: 0 5px;
            color: #999;
        }

/* Flexible style for content div */
/* Style for #content div in big screens */
.content {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
    text-align: center;
margin-top: 10px;
}


/* Media query for small screens */


@media (max-width: 768px) {
    #content {
        width: 100%;
        padding: 15px;
    border: none;
    }
}

        /* Styles for the overlay */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
        
        /* Styles for the popup content */
        .popup {
            background-color: white;
            padding: 20px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
            text-align: center;
        }
        
        /* Styles for the buttons */
        .popup button {
            margin: 10px;
            padding: 5px 15px;
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
        }




/* Footer styling for computers */
footer {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  border: none;
margin-top: 30px;
  background-color: #f5f5f5;
color: black;
    padding: 20px 0;
    /* Set the footer to stick to the bottom */

        position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
}

/* Styling for links within a list */
footer ul {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

footer ul li {
    display: inline;
    margin-right: 15px;
}

footer ul li a {
    text-decoration: none;
}

/* Styling for individual links */
footer a {
    text-decoration: none;
    transition: color 0.3s;
}

footer a:hover {
    color: #007bff;
}

/* Styling for paragraphs */
footer p {
    margin: 5px 0;
    text-align: center;
}

/* Styling for images */
footer img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

    .copyright {
        text-align: center;
        font-size: 12px; /* Adjust the font size as needed */
        margin: 10px 0;
    }

/* Media query for small screens */

@media (max-width: 768px) {
    footer {
        padding: 15px 0;
        position: relative;
    }

    footer ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
    }

    footer ul li {
        margin-bottom: 10px;
    }

    footer ul li:last-child {
        margin-bottom: 0;
        font-size: 12px; /* Adjust the font size as needed */
    }

    footer a {
        display: inline-block;
        margin-right: 0;
    }

    .copyright {
        text-align: center;
        font-size: 12px; /* Adjust the font size as needed */
        margin: 10px 0;
    }
}

.body.darkmode {
    background-color: #202020;
    color: white;
}

.body.darkmode * {
  overflow: hidden;
  filter: invert(90%);
    transition: filter 0.5s;
}

.body.darkmode::-webkit-scrollbar {
    background-color: white;
}

.body.darkmode.settings {
    background-color: #202020;
}


/* Main Heading */
.main-heading {
    font-size: 24px;
    margin-bottom: 20px;
}

/* Ad Container */
.ad_parent {
    border: 1px solid #ddd;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
}


    .type_icon {
        width: 64px; /* Adjust the width as needed */
        height: 64px; /* Adjust the height as needed */
        margin-right: 10px; /* Adjust the margin as needed */
        /* Add any additional styling you want for the type icons */
    }


/* Ad Title */
#ad_title a {
    text-decoration: none;
    color: #333;
    font-size: 20px;
}

/* Ad Info List */
.ad_info {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Ad Info Item */
.ad-info-item {
    margin-bottom: 10px;
}

/* Pagination */
#pages_nav {
    text-align: center;
}

#pages_nav_head {
    font-size: 18px;
}

#pages_nav_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.page-item {
    display: inline-block;
    margin-right: 5px;
}

.page-link {
    text-decoration: none;
    color: #333;
    font-size: 16px;
}

.current-page {
    font-weight: bold;
    color: #007bff;
}

/* Style the adview grid */
.adview_grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns */
    gap: 20px; /* Gap between items */
    margin: 20px;
}

/* Style each adview item */
.adview_item {
    display: flex;
    align-items: center;
}

/* Style the labels */
.adview_label {
    font-weight: bold;
    margin-right: 10px;
}

/* Style the content */
.adview_content {
    flex-grow: 1;
}

/* Style the adview options */
.adview_options {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

/* Style the buttons */
#ad_reserve, #report {
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #007bff; /* Your desired button background color */
    color: #fff; /* Text color */
    border: none;
    cursor: pointer;
}

/* Disable the buttons when needed */
#ad_reserve:disabled, #report:disabled {
    background-color: #ccc; /* Disabled button background color */
    cursor: not-allowed;
}


/* Add these styles to your existing CSS file */
.note {
  padding: 10px;
  text-align: center;
  font-size: 18px;
color: black;
}

.note-text {
  margin: 0;

}

.countdown {
  font-weight: bold;
  font-size: 24px;
}

/* general styling */
input[type="text"],
input[type="password"],
input[type="date"],
input[type="email"],
input[type="tel"],
textarea,
select {
  display: block;
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  direction: rtl; /* Right-to-left direction for RTL layout */
}

/* Style for radio buttons and checkboxes */
input[type="radio"],
input[type="checkbox"] {
  margin-right: 5px;
}

/* Style for submit buttons */
input[type="submit"],
button[type="submit"] {
  padding: 8px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  direction: ltr; /* Left-to-right direction for button text */
}

/* Style for select elements */
select {
  appearance: none;
  background-color: white;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 4 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 0.25L0.53033 1.71967C0.237436 2.01256 0.237436 2.48744 0.53033 2.78033C0.823223 3.07322 1.29811 3.07322 1.591 2.78033L2 2.37132L2.40899 2.78033C2.70188 3.07322 3.17677 3.07322 3.46967 2.78033C3.76256 2.48744 3.76256 2.01256 3.46967 1.71967L2 0.25ZM2 3.82843L0.53033 5.29709C0.237436 5.58998 0.237436 6.06486 0.53033 6.35776C0.823223 6.65065 1.29811 6.65065 1.591 6.35776L2 5.94875L2.40899 6.35776C2.70188 6.65065 3.17677 6.65065 3.46967 6.35776C3.76256 6.06486 3.76256 5.58998 3.46967 5.29709L2 3.82843Z' fill='%23333'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  padding-right: 30px;
  direction: rtl; /* Right-to-left direction for RTL layout */
}

/* Style for text area elements */
textarea {
  resize: vertical;
  height: auto;
}

/* Focus styles */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Style for tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 15px;
}

table, th, td {
  border: 1px solid #ccc;
}

th, td {
  padding: 8px;
  text-align: center;
}

/* Style for lists */
ul, ol {
  margin-left: 20px;
  margin-bottom: 10px;
}

/* Style for labels */
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}


/* Style for images */
img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

/* Style for audio and video */
audio,
video {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

/* Style for paragraphs */
p {
}

/* Style for bold text */
b {
  font-weight: bold;
}

/* Style for big text */
big {
  font-size: larger;
}

        .success {
            color: green;
        }
        .error {
            color: red;
        }

        .hidden {
            display: none;
        }

.current-page {
    /* Add your preferred styles for the current page link here */
    font-weight: bold;
    color: #ff6f61; /* Change to your preferred color */
    text-decoration: underline;
    /* Add any other styles you want to apply */
}