body {
          background-color: #f0f0f0 !important; /* Light gray */
        }

        table.dataTable {
        width: 100% !important;  /* Ensure the table takes full width */
        table-layout: fixed;  /* Prevent columns from being too wide */
        }

        table.dataTable thead th,
        table.dataTable tfoot th {
        white-space: nowrap;  /* Prevent header/footer text from wrapping */
        }

        table.dataTable tbody , table.dataTable thead , .dataTables_info , .dataTables_paginate {
            font-size: 12px;
        }
        
        table.dataTable td {
            max-height: 50px!important;
            overflow: hidden;
        }


        table.dataTable tr:hover {
            cursor: pointer;
        }





        #eggrafes-xarti {
            font-weight: 700;
            /*font-size: 18px!important;*/
            /* text-align: center; */
            background-color: #283A48;
            color: white;
            padding: 0px 0px 0px 0px;
            height: 70px;
             display: flex;
            align-items: center; /* vertical alignment */
            justify-content: center; /* optional: horizontal alignment */


        }



        .ast-footer-copyright {
            display: none;
        }
        
        #map-records-cotainer { 
            background-color:  white;
            margin-top: 50px;
            width: 100%;
        }

	   
       #details_text {
	        height: 68vh;
            width: 100%;
            margin-bottom: 15px;
            overflow: hidden;
	   }

        #map {
            height: 68vh;
            width: 100%;
            margin-bottom: 15px;
            overflow: hidden;
        }

        #markers_data {
            height: 85vh;
            overflow-y: auto;           /* enables vertical scroll when needed */
            overflow-x: hidden;
        }


        /* Custom styles to adjust the form layout */
        .form-container {
            background-color: #fff;
            padding: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            margin-top: 30px;
        }



            .input-with-icon {
              position: relative;
            }

            .input-with-icon input {
              padding-left: 40px!important; /* space for the icon */
            }

            .input-with-icon i {
              position: absolute;
              top: 68%;
              left: 4px;
              transform: translateY(-50%);
              color: #aaa;
            }

            #address-input {

            }

/*         .form-inline {
            display: flex;
            gap: 10px; 
            align-items: center;
            flex-wrap: wrap; 
          }*/

          .form-group {
            display: flex;
            flex-direction: column;
            margin-bottom: 4px;
          }



        .form-group label {
            font-size: 14px;
            color: #333;
            display: block;
            margin-bottom: 8px;
        }


        .input-group input {
                    padding: 5px;
                    font-size: 14px;
                    margin-bottom: 0px;
                    border-radius: 4px;
                    border: 1px solid #ccc;
            
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 4px;
            font-size: 14px;
            border-radius: 4px;
            border: 1px solid #ccc;
            margin-bottom: 4px;
        }

        .form-group textarea {
            resize: vertical;
        }

        .form-group input[type="file"] {
            padding: 4px;
        }
        

        .action-block label {
            font-size: 14px;
        }


        .form-group button {
            background-color: #007bff;
            color: white;
            padding: 4px 4px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

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

        div.modal-content {
            width: 40vw;
            align-items: center;
        }

        .mmp-admin-modal {
            background-color: rgba(0,0,0,.4);
            bottom: 0;
            display: none;
            left: 0;
            margin: 0;
            padding: 5% 0;
            position: fixed;
            right: 0;
            top: 0;
            z-index: 1000001;
        }

        .address-search {
            position: relative;
            max-width: 300px;
        }

        #address-input {
            width: 100%;
            padding: 8px;
        }

        .suggestions {
            position: relative;
            top: 10px;
            width: inherit;
            border: 1px solid #ccc;
            background-color: #fff;
            max-height: 200px;
            overflow-y: auto;
            display: none; /* Initially hidden */
            z-index: 10;
        }

        .suggestion-item {
            padding: 8px;
            cursor: pointer;
            
            font-size: clamp(0.7rem, 2vw, 1rem);
        }

        .suggestion-item:hover {
            background-color: #f0f0f0;
        }

        .table-row { 
            height: 40px;
            font-size: 14px;
         }

         .table-row > * {
           font-size: clamp(0.6rem, 1vw, 0.8rem);
         }

        .table-row:hover { 
            opacity: 0.7;
/*            cursor: pointer;*/
            cursor: zoom-in;
         }

        .success-message {
          position: relative;
          background-color: #d4edda;
          color: #155724;
          padding: 15px 40px 15px 15px; /* Extra right padding for button */
          border: 1px solid #c3e6cb;
          border-radius: 4px;
          margin-top: 10px;
        }

        .dismiss-btn {
          position: absolute;
          top: 5px;
          right: 10px;
          background: transparent;
          border: none;
          font-size: 20px;
          color: #155724;
          cursor: pointer;
          line-height: 1;
        }

        .action-block input[type="text"] {
          padding: 4px;
          border: 1px solid #ccc;
          border-radius: 4px;
        }

        .inline-radio label {
            display: inline-block;
            margin-right: 15px;
          }

        nav {
            background-color: #283A48!important;
            color: white;
        }
        .city_title , #eggrafes-xarti {
            color: white;
        }

        .floating-save {
                background-color: #283A48!important;
                color: white!important;
                border:2px solid white!important;
        }

        .floating-save:hover {
            opacity: 0.7;
        }




.select2-container .select2-selection--single {
  font-size: 14px; /* Adjust as needed */
}
.select2-container .select2-results__option {
  font-size: 14px; /* Adjust as needed */
}
.select2-container .select2-selection--multiple {
  font-size: 14px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  font-size: 14px;
}

		@media (max-width: 420px) {
			img.me-2 {
				display:none;
			}
			nav {
				min-height:65px!important;
			}
			
		}

        /* Responsive styles */
        @media (max-width: 768px) {


			
			
			#map {
                height: 40vh;
                width: 100%;
                margin-bottom: 15px;
                overflow: hidden;
            }

            nav {
                background-color: #283A48!important;
                color: white;
            }
            #content > div > nav > a > img {
                width: 80px;
            }
            div.city_title , #eggrafes-xarti {
                font-size: 14px!important;
            }

            span .navbar-text h5 {
                color: white!important;
            }

            .floating-save {
              background-color: #283A48!important;
              color: white;
              width: 60px;
              height: 60px;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 24px;
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
              transition: transform 0.3s ease;
              font-size: 0; /* Hide text */
              z-index: 3;
              border:2px solid white!important;
            }

            table#markers_data {
                width: 100%!important;
                max-width:100%!important;
            }


            .order-1 {
                order: 1;
            }

            .order-2 {
                order: 2;
            }
            .order-3 {
                order: 3;
            }

            .order-4 {
                order: 4;
            }

            div.modal-content {
                width: 100%;
                align-items: center;
            }
            .form-container {
                padding: 8px;
                align-content: center;
            }


            #eggrafes-xarti {
                font-size: 18px!important;
            }

        }