#map { height: 500px; width: 100%; } .leaflet-popup-content { font-size: 12px; } .leaflet-tooltip { font-size: 10px; } .location-button { border-radius: 12px; background-color: #13a4d6; color: white; padding: 4px 6px; border: none; cursor: pointer; font-size: 14px; } a.leaflet-popup-close-button { top: 20px; right: 10px; } *{ font-family: "Raleway"; font-feature-settings: 'lnum', 'tnum';} :root { --primary-color: #13a4d6; --white-text: #ffffff; --search-box-background: rgba(255, 255, 255, 0.30); --mini-map-background: #FBF9F6; } .navigation-bar{ position: relative; z-index: 1000; width: 100%; } .top-navigation{ height: 30px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; background-color: var(--primary-color); padding-inline: 2vw; border-radius: 20px 20px 0px 0px; } .socials{ margin-left: 2vw; display: flex; flex-direction: row; gap: 1vw; } .social-icon{ width: 12px; height: 12px; } .nav-contact{ display: flex; gap: 1vw; margin-right: 1vw; } .contacts{ position: relative; display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 1vw; } .nav-p{ font-size: 13px; color: var(--white-text); } .nav-left{ display: flex; margin-left: 1vw; } .nav-right{ margin-right: 1vw; } .main-navigation{ height: 48px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1.5px solid #EEF0F3; border-radius: 20px 20px 20px 20px; padding-inline: 2vw; background-color: var(--white-text); } .logo{ height: 24px; } .nav-elements{ display: flex; flex-direction: row; margin-left: 2vw; gap: 2vw; font-size: 13px; justify-content: center; align-items: center; } .login-btn, .register-btn{ padding: 8px; border-radius: 8px; border-color: transparent; } .login-btn{ background-color: #f0f0f0; } .register-btn{ background-color: var(--primary-color); color: var(--white-text); } .btn-arrow{ margin-left: 1vw; } .logo-container{ display: flex; align-items: center; justify-content: center; } #jobDetails{ display: flex; border: 1px solid red; } .view-btn{ background-color: #13a4d6; color: white; } .main { padding: 20px; background: #f9f9f9; } .main__title { text-align: center; margin-bottom: 20px; } .content { display: flex; gap: 20px; } .job-details { width: 300px; background: #fff; border: 1px solid #ddd; padding: 15px; border-radius: 5px; } .job-details__title { font-size: 18px; margin-bottom: 10px; } .job-details__content { font-size: 14px; line-height: 1.4; } .map { flex: 1; height: 500px; border: 1px solid #ddd; border-radius: 5px; } .coordinates { margin-top: 20px; text-align: center; } .coordinates label { margin-right: 10px; } .coordinates input { margin-right: 20px; padding: 5px; border: 1px solid #ddd; border-radius: 5px; width: 150px; } #job-details { display: none; } aside.job-details { display: none; width: 300px; transition: transform 0.3s ease-in-out; transform: translateX(100%); height: 500px; } aside.job-details.show { overflow-x: auto;display: block; transform: translateX(0); } aside.job-details .popper-closer { position: absolute; margin-bottom: 12px; font-size: 24px; cursor: pointer; margin-top: 1vh; margin-left: 1vw; } .main__title{ display: none; } .leaflet-popup{ display: block; } .job-description, .qualification{ font-size: 12px; } .button-block{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } .viewmapbtn{ background-color: white; border: 2px solid #13a4d6; padding-block: 8px; border-radius: 8px; } .viewmapbtn a{ text-decoration: none; color: var(--primary-color); font-weight: 600; } .applybtn{ background-color: var(--primary-color); padding-block: 8px; border-radius: 8px; border-color: transparent; } .applybtn a{ color: var(--white-text); text-decoration: none; } .job-details__content { height: 500px; overflow-y: auto; padding-right: 10px; } .job-details__content::-webkit-scrollbar { width: 2px; direction: rtl; } .job-details__content::-webkit-scrollbar-thumb { background-color: #888; border-radius: 10px; } .job-details__content::-webkit-scrollbar-thumb:hover { background-color: #555; } .job-details__content::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } .job-details{ position: absolute; z-index: 10000; } aside.job-details.show { transform: scale(0.97); margin-bottom: 1px; right: 4vw; } .comp-img-crossback{ position: relative; } .tag-head{ display: flex; flex-direction: row; align-items: center; gap: 12px; } .view-btn{ margin-top: 12px; width: 100%; padding: 4px; border: transparent; border-radius: 4px; } .leaflet-interactive{ stroke: #13a4d6; fill: #13a4d6; } .leaflet-control-search-filter { display: flex; align-items: center; background: white; padding: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); border-radius: 8px; } .search-bar { width: 150px; padding: 5px; border: 1px solid #ccc; border-radius: 5px; margin-right: 10px; } .search-bar:focus { outline: none; box-shadow: 0 0 3px rgba(0, 0, 255, 0.5); } .filter-btn { padding: 5px 10px; background-color: #fff; color: white; border: none; border-radius: 5px; cursor: pointer; } .filter-btn:hover { background-color: #eeeeee; } .modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .modal-content { background-color: white; margin-top: 120px; margin-left: 4%; padding: 20px; border: 1px solid #888; width: 890px; border-radius: 8px; border: 1px solid red; height: 400px; } .close-btn { color: #aaa; font-size: 28px; font-weight: bold; position: absolute; top: 10px; right: 25px; cursor: pointer; } .close-btn:hover, .close-btn:focus { color: black; text-decoration: none; cursor: pointer; } form { display: flex; flex-direction: column; } form label { margin-top: 10px; } form input, form select { padding: 8px; margin: 5px 0; border: 1px solid #ccc; border-radius: 5px; } #applyFilters{ padding: 10px; background-color: #13a4d6; color: white; border: none; border-radius: 5px; cursor: pointer; } #applyFilters:hover { background-color: #13b4d6; } .coordinates{ display: none; } .modal-content h2{ font-size: 12px; } .filterlabel{ font-size: 12px; } #applyFilters{ display: flex; align-items: center; justify-content: center; } .modal-content{ display: flex; flex-direction: column; justify-content: space-between; } #filterForm{ margin-bottom: 120px; } .input-group { display: flex; align-items: center; gap: 10px; } .search-input { padding: 8px; width: 300px; font-size: 14px; } .add-btn { padding: 8px 12px; background-color: #13a4d6; color: #fff; border: none; cursor: pointer; font-size: 14px; transition: background-color 0.3s; border-radius: 8px; } .tag-container { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; } .tag { padding: 5px 10px; background-color: #f0f0f0; border-radius: 15px; display: flex; align-items: center; gap: 5px; } .tag i { cursor: pointer; font-size: 12px; } .filter-first-row{ display: flex; flex-direction: row; justify-content: space-around; align-items: center; } .f-1, .filter-field{ display: flex; justify-content: space-between; align-items: start; flex-direction: column; } body, html { margin: 0; padding: 0; height: 100%; width: 100%; } #map { height: 80vh; width: 100vw; } .modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); } .modal-content { background-color: white; margin: auto; padding: 20px; border: 1px solid #888; width: 90%; max-width: 400px; border-radius: 10px; } .close-btn { float: right; font-size: 24px; cursor: pointer; } .filter-btn, .my-location-button, .viewmapbtn, .applybtn { cursor: pointer; } .my-location-button { position: fixed; bottom: 20px; right: 20px; z-index: 10000; } .navigation-bar-mobile{ display: none; } @media (min-width: 1025px) and (max-width: 1366px) { .search-bar { width: 60%; } .modal-content { width: 50%; } } @media (min-width: 1367px) { .search-bar { width: 50%; } .modal-content { width: 40%; } .my-location-button { bottom: 30px; right: 30px; } } @media (min-width: 300px) and (max-width: 767px){ aside.job-details.show{ bottom: 0px !important; position: fixed; padding:15px;width: 92vw;overflow-x:auto !important; } .navigation-bar-mobile{ display: flex; } .navigation-bar{ display: none; } .main{ margin-top: 40px; } #map{ height: 92vh; } } .navigation-bar-mobile{ position: relative; } .head-mob { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: #fff; color: #000; position: fixed; z-index: 1000; width: 100vw; } .logo-mob img { max-height: 30px; } .toggle-button-mob { font-size: 30px; cursor: pointer; } .side-menu-mob { position: fixed; top: 0; left: -80%; width: 80%; height: 100%; background-color: #fff; transition: left 0.3s ease-in-out; padding-top: 60px; color: black; z-index: 100000; } .side-menu-mob ul { list-style: none; padding: 0; height: 80%; } .side-menu-mob ul li { padding: 20px; text-align: left; padding-inline: 40px; } .side-menu-mob ul li a { text-decoration: none; color: black; font-size: 18px; display: flex; padding-inline: 12px; } .sdi{ margin-right: 12px } .side-menu-mob.open { left: 0; } .reglog-ul{ border-top: 1px solid #d9d9d9; } a{ text-decoration: none; color: inherit; } @media (max-width: 767px) { .drag-handle { display: block; } } @media (min-width: 768px) { .drag-handle { display: none; } } @media (max-width: 375px){ .leaflet-control-search-filter{ transform: scale(0.8); } } @media (max-width: 320px){ .leaflet-control-search-filter{ transform: scale(0.6); } } .filters { display: none; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); width: 450px; height: auto; max-height: 500px; z-index: 1050; background-color: rgba(255, 255, 255, 0.9); padding: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); overflow-y: auto; transition: opacity 0.3s ease; -webkit-overflow-scrolling: touch; } .filters .d-flex { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 15px; width: 100%; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } .filters.show { display: block; } .filters h4 { font-size: 1.15rem; font-weight: 600; color: #333; } .filters button#closeButton { font-size: 1.5rem; border: none; background: transparent; color: #dc3545; cursor: pointer; padding: 0; } .filters button#closeButton:hover { color: #ff6b6b; } .filters .mb-4 { margin-bottom: 20px; } .filters .mb-4 h5 { font-size: 1.1rem; color: #333; font-weight: 500; margin-bottom: 10px; } .filters input.form-control { font-size: 0.7rem; margin-bottom: revert-layer; width: 25vh; margin-left: 250px; margin-top: -40px; } .filters { display: flex; flex-wrap: wrap; gap: 15px; } .filters .form-range { width: 100%; flex-basis: 100%; } .filters .d-flex button { flex-shrink: 0; font-size: 0.65rem; overflow-x: auto; background-color: #fff; margin:2px; } .filters .d-flex button:hover { background-color: #13a4d6; color: #333; border: 1px solid grey; } .filters .d-flex.justify-content-between { display: flex; justify-content: space-between; margin:5px; } .filters .d-flex.justify-content-between span { font-size: 0.65rem; color: #555; margin:2px; } .filters button.btn-primary { font-size:12px; padding: 8px; background-color: #13a4d6; border: none; color: white; font-weight: bold; border-radius: 4px; transition: background-color 0.3s ease; margin-left:160px; } .filters button.btn-primary:hover { background-color: #13a4d6; } #filterModal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 1000; padding-top: 50px; overflow: auto; overflow-x: hidden; } #filterModal .modal-content { background-color: #fff; margin: 20px auto; padding: 20px; border-radius: 10px; width: 70%; max-width: 600px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); height: 80vh; overflow-y: auto; position: relative; overflow-x: hidden; } #filterModal .close-btn { color: #aaa; position: absolute; top: 0px !important; right: 20px; font-size: 30px; font-weight: bold; cursor: pointer; transition: color 0.3s ease; } #filterModal .close-btn:hover, #filterModal .close-btn:focus { color: #333; } #filterModal h2 { text-align: center; color: #13a4d6; margin-bottom: 20px; font-size: 22px; } #filterModal h6 { color: #13a4d6; font-weight: bold; margin-bottom: 8px; font-size: 14px; } #filterModal .form-control { width: 95%; padding: 10px; margin: 6px 0 12px 0; border-radius: 6px; border: 1px solid #ccc;   background-color: #f9f9f9; } #filterModal .form-range { width: 100%; margin-top: 5px; } #filterModal p { font-size: 12px; margin-bottom: 8px; } #filterModal .btn { margin: 5px 10px 10px 0; padding: 6px 12px; font-size: 12px; border-radius: 4px; border: 1px solid #ddd; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; } #filterModal .btn:hover { background-color: #13a4d6; color: white; } #filterModal button[type="submit"] { background-color: #13a4d6; color: white; border: none; padding: 10px 24px; font-size: 14px; cursor: pointer; border-radius: 6px; width: 100%; transition: background-color 0.3s ease; } #filterModal button[type="submit"]:hover { background-color: #1078a9; } #filterModal .d-flex { display: flex; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; } #filterModal .d-flex button { white-space: nowrap; padding: 6px 12px; font-size: 12px; border-radius: 4px; border: 1px solid #ddd; transition: background-color 0.3s ease; } #filterModal .d-flex button:hover { background-color: #13a4d6; color: white; } @media (max-width: 768px) { #filterModal .modal-content { width: 90%; padding: 18px; } #filterModal h2 { font-size: 20px; } #filterModal h6 { font-size: 14px; } #filterModal .form-control { font-size: 14px; padding: 8px; } #filterModal button[type="submit"] { font-size: 14px; padding: 8px 18px; } } #applyFilters{ margin-top: 4vh; } .range-labels span { font-size: 14px; font-weight: regular; position: relative; padding: 0 5px; background-color: #f8f8f8; border-radius: 5px; z-index: 1; display: inline-block; text-align: center; } .range-labels { width: 100%; position: relative; display: flex; justify-content: space-between; margin-bottom: 10px; } .form-range { width: 100%; height: 10px; background: #e0e0e0; border-radius: 5px; outline: none; transition: background 0.3s ease-in-out; } .my-location-button { margin-bottom: 325px; }