.no-bootstrap { all: unset; font-family: inherit; margin: 0; padding: 0; font-size: inherit; } *{ 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: 0px 0px 0px 0px !important; } .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; } .view-btn{ background-color: #13a4d6; color: white; } .navigation-bar-mobile{ display: none; } @media (min-width: 300px) and (max-width: 767px){ .navigation-bar-mobile{ display: flex; position: relative; } .navigation-bar{ display: none; } .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: var(--gradient, linear-gradient(104deg, #00A2D9 0%, #004C9E 100%)) !important; 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: none !important; } a{ text-decoration: none; color: inherit; } } a{ text-decoration: none; color: inherit; } p{ margin: 0; } .nav-elements{ justify-content: center; align-items: center; } .nav-each-elements{ margin-bottom: 0; } .nav-p{ margin-bottom: 0; } .login-btn, .register-btn{ font-size: 13.33px; } a{ text-decoration: none; color: initial; } .container{ height: 80vh; margin-top: 20px; position: relative; height: max-content; } .row{ position: relative; height: max-content; } .column{ position: relative; height: 80vh; } .input-group { max-width: 600px; margin: 20px auto; } .form-control { height: 40px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; font-size:12px !important; } .form-control::placeholder{ font-size: 12px; } .btn-inside { background-color: inherit; border: transparent; } .input-group:focus, .input-group:hover, .input-group:active, .input-group::after{ border: none; outline: none; } .find-jobs-btn{ font-size: 12px !important; background-color: #13a4d6 !important; border: transparent !important; outline: none; } .job, .job * { box-sizing: border-box; } .job { background: linear-gradient(to left, #ffffff, #ffffff), linear-gradient(to left, #ffffff, #ffffff); border-radius: 8px; border-style: solid; border-color: var(--gray-100, #e4e5e8); border-width: 1px; padding: 20px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; justify-content: flex-start; position: relative; box-shadow: 0px 2px 18px 0px rgba(24, 25, 28, 0.03); } .post-heading { display: flex; flex-direction: row; gap: 6px; align-items: flex-start; justify-content: space-between; align-self: stretch; flex-shrink: 0; position: relative; } .job-title-card { color: var(--gray-900, #18191c); text-align: left; font-family: "Raleway", sans-serif; font-size: 16px; line-height: 28px; font-weight: 500; position: relative; align-self: stretch; margin: 0; } .card-tag { display: flex; flex-direction: row; gap: 4px; align-items: center; justify-content: flex-start; flex-wrap: wrap; flex-shrink: 0; position: relative; } .type { background: var(--success-50, #e7f6ea); border-radius: 3px; padding: 4px 8px 4px 8px; display: flex; flex-direction: row; gap: 10px; align-items: center; justify-content: center; flex-shrink: 0; position: relative; } .tag-text { color: var(--success-500, #0ba02c); text-align: left; font-family: "Raleway", sans-serif; font-size: 10px; line-height: 12px; font-weight: 600; text-transform: uppercase; position: relative; margin: 0; } .skill-flexer{ display: flex; flex-direction: row; gap: 4px; } .skills-type{ background: var(--success-50, #e7f6ea); border-radius: 3px; padding: 4px 8px 4px 8px; display: flex; flex-direction: row; gap: 10px; align-items: center; justify-content: center; flex-shrink: 0; position: relative; } .skills-text{ color: var(--success-500, #13a4d6); text-align: left; font-family: "Raleway", sans-serif; font-size: 10px; line-height: 12px; font-weight: 600; text-transform: uppercase; position: relative; margin: 0; } .salary-div { display: flex; flex-direction: row; gap: 10px; align-items: center; justify-content: center; flex-shrink: 0; width: fit-content; position: relative; } .salary-text { color: var(--gray-500, #767f8c); text-align: left; font-family: "Raleway", sans-serif; font-size: 12px; line-height: 20px; font-weight: 400; position: relative; flex: 1; } .frame-1984077818 { display: flex; flex-direction: row; gap: 10px; align-items: center; justify-content: center; flex-shrink: 0; width: 138px; position: relative; } .experience-1-3-years { color: var(--gray-500, #767f8c); text-align: left; font-family: "Raleway", sans-serif; font-size: 12px; line-height: 20px; font-weight: 400; position: relative; flex: 1; } .company { display: flex; flex-direction: row; gap: 12px; align-items: center; justify-content: center; align-self: stretch; flex-shrink: 0; position: relative; } .employers-logo { background: var(--gray-scale-50, #edeff5); border-radius: 4px; padding: 12px; display: flex; flex-direction: row; gap: 10px; align-items: flex-start; justify-content: flex-start; flex-shrink: 0; position: relative; } .employers-logo-img { flex-shrink: 0; width: 24px; height: 24px; position: relative; overflow: visible; } .info { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; justify-content: flex-start; flex: 1; position: relative; } .google-inc { color: var(--gray-900, #18191c); text-align: left; font-family: var(--body-medium-500-font-family, "Raleway", sans-serif); font-size: var(--body-medium-500-font-size, 14px); line-height: var(--body-medium-500-line-height, 24px); font-weight: var(--body-medium-500-font-weight, 500); position: relative; align-self: stretch; } .location { display: flex; flex-direction: row; gap: 8px; align-items: center; justify-content: flex-start; flex-wrap: wrap; flex-shrink: 0; position: relative; } .map-pin { flex-shrink: 0; width: 18px; height: 18px; position: relative; align-items: center; justify-content: center; display: flex; } .map-pin2 { width: 100%; height: 100%; position: absolute; right: 0%; left: 0%; bottom: 0%; top: 0%; overflow: visible; } .location-data { color: var(--gray-500, #767f8c); text-align: left; font-family: var(--body-small-400-font-family, "Raleway", sans-serif); font-size: var(--body-small-400-font-size, 12px); line-height: var(--body-small-400-line-height, 20px); font-weight: var(--body-small-400-font-weight, 400); position: relative; margin-bottom: 0; } .apply-now { color: #13a4d6; text-align: left; font-family: "Raleway", sans-serif; font-size: 14px; line-height: 24px; font-weight: 600; text-decoration: underline; position: relative; } .bookmark-simple { flex-shrink: 0; width: 24px; height: 24px; position: relative; } .bookmark-simple2 { width: 100%; height: 100%; position: absolute; right: 0%; left: 0%; bottom: 0%; top: 0%; overflow: visible; } #job-container{ display: flex; flex-direction: column; gap: 8px; } .middly{ } .col-12{ position: relative; } .middly{ height: fit-content; padding-bottom: 20px; } .ad-1, .ad-2{ width: 100%; } .ad-1 img, .ad-2 img{ width: 100%; } .ad-flexxer{ display: flex; flex-direction: column; gap: 12px; margin-block: 12px; position: sticky; } .righty{ height: fit-content; } .three-grid-column-section{ height: max-content; } .row{ height: 100%; } .filter-section{ display: flex; flex-direction: column; margin-top: 12px; gap: 20px; } .filter-head{ width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } label.btn.btn-outline-primary.filter-toggler-text{ font-size: 10px; justify-content: center; align-items: center; display: flex; flex-wrap: nowrap; } .label-header{ font-size: 12px; margin: 0; } .filter-field{ display: flex; flex-direction: column; gap: 20px; } .filter-text, .reset-text{ margin: 0; } .filter-text{ font-size: 16px; font-weight: 600; } .reset-text{ font-size: 12px; color: #13a4d6; } select.form-select{ font-size: 10px; } .btn-check:checked + .btn-outline-primary { background-color: #13a4d6 !important; color: white; border-color: #13a4d6; } .btn-check:not(:checked) + .btn-outline-primary { background-color: transparent; color: #13a4d6; border-color: #13a4d6; } .btn-outline-primary:hover { background-color: #13a4d6; color: white; } .btn-outline-primary:focus { box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } .form-select { width: 100%; padding: 8px 12px; font-size: 16px; border: 1px solid #007bff; border-radius: 4px; background-color: #fff; color: #333; transition: border-color 0.3s ease; } .form-select:focus { border-color: #0056b3; outline: none; } .form-select option { padding: 10px; font-size: 12px; background-color: #fff; color: #333; } .form-select option:checked { background-color: #007bff; color: white; } .form-select option:hover { background-color: #f0f0f0; } .slider-container { position: relative; width: 100%; } .slider-labels { display: flex; justify-content: space-between; position: relative; width: 100%; font-size: 8px; } #sliderValue{ font-size: 12px; } .small-input { width: 150px; font-size: 12px !important; height: 32px; } .filter-field{ height: fit-content; } .mt-5{ margin-top: 0px !important; } .leftie{ height: max-content; background: linear-gradient(to left, #ffffff, #ffffff), linear-gradient(to left, #ffffff, #ffffff); border-radius: 8px; border-style: solid; border-color: var(--gray-100, #e4e5e8); border-width: 1px; padding-bottom: 20px;} .filter-tags{ background: #f2f4f7; border-radius: 100px; padding: 8px 10px 8px 10px; display: flex; flex-direction: row; gap: 10px; align-items: center; justify-content: center; position: relative; width: fit-content; } .filter-tag { color: #4b4b4b; text-align: center; font-size: 12px; line-height: 12px; font-weight: 500; position: relative; display: flex; align-items: center; justify-content: center; margin: 0 !important; padding: 0 !important; } .tag-div{ display: flex; flex-wrap: wrap; gap: 8px; } .input-group .btn { position: relative; color: #fff !important; } @media(max-width:767px){ .filter-section{ display:flex; } .col-7 { flex: 0 0 auto; width: 105.333% !important; } .job { background: linear-gradient(to left, #ffffff, #ffffff), linear-gradient(to left, #ffffff, #ffffff); border-radius: 8px; border-style: solid; border-color: var(--gray-100, #e4e5e8); border-width: 1px; padding: 20px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; justify-content: flex-start; position: relative; box-shadow: 0px 2px 18px 0px rgba(24, 25, 28, 0.03); } .salary-text { color: var(--gray-500, #767f8c); text-align: left; font-family: "Raleway", sans-serif; font-size: 10px; line-height: 20px; font-weight: 400; position: relative; flex: 1; } .modal-dialog { max-width: 100%; margin: 0; } .modal-body { padding: 15px; } .modal-content { padding: 0; } .btn { font-size: 14px; } .filter-tags { display: inline-block; margin-right: 10px; margin-bottom: 10px; } .input-group .btn { position: relative; color: #fff !important; } .input-group i{ margin-right:-5px; background-color:#13a4d6; color:#fff; border-radius:8px; margin-top:2px; width:30px; display:flex; justify-content: center; align-items: center; } .label-header { font-size: 12px; margin: 0; margin-top: 16px; } .filter-field { display: flex; flex-direction: column; gap: 7px; } .form-control:disabled, .form-control[readonly] { background-color: #e9ecef; opacity: 1; margin-top: -7px; } .filter-tag{ font-size:10px; } .tag-div { display: flex ; flex-wrap: wrap; gap: 0px; } .ad-flexxer{ display: none; } .btn-check:checked + .btn-outline-primary { background-color: #13a4d6 !important; color: white !important; border-color: #007bff !important; } .btn-outline-primary { background-color: transparent !important; color: #13a4d6 !important; border: 1px solid #007bff !important; } .btn-outline-primary:hover { background-color: #13a4d6 !important; color: white !important; border-color: #0056b3 !important; } } .form-check label.form-check-label { font-size: 10px !important; } @media(max-width:767px){ .type { background: var(--success-50, #e7f6ea); border-radius: 3px; display: flex ; flex-direction: row; gap: 10px; align-items: center; justify-content: center; flex-shrink: 0; position: relative; } .card-tag { display: flex ; flex-direction: row; gap: 5px; align-items: center; justify-content: left; flex-shrink: 0; position: relative; flex-wrap: wrap; } .combined-search-box button { background-color: #007bff; color: white; border: none; padding: 5px 5px !important; font-size: 7px; cursor: pointer; transition: background-color 0.3s ease, transform 0.3s ease; border-radius: 8px; } .search-field i { font-size:12px !important; } .combined-search-box input::placeholder { color: #999; font-size: 13px !important; } .combined-search-box { display: flex; flex-direction: column; align-items: left !important; justify-content: space-between; border: 0px solid #ccc !important; border-radius: 8px; overflow: hidden; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); width: 100% !important; max-width: 900px; margin: 0 auto; padding: 5px; gap:10px !important; } .search-field { flex: 1; position: relative; } .search-field input { width: 100%; padding: 10px 10px 10px 35px; border-radius: 5px; font-size: 14px; outline: none; background-color: #fafafa; border: 1px solid #ccc !important; } .combined-search-box button { width:85% !important; height:40px !important; } .mobile-filter { position: absolute !important; right: 15px !important; top: 87% !important; transform: translateY(-50%) !important; font-size: 20px !important; cursor: pointer !important; z-index: 10 !important; background-color:#fff !important; height:40px !important; width:40px !important; padding:10px 10px !important; border:1px solid #13a4d6 !important; } } .combined-search-box { display: flex; align-items: left !important; border: 1px solid #ccc; border-radius: 8px; overflow: hidden; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); width: 100%; max-width: 900px; padding:3px; } .search-field { position: relative; flex: 1; } .combined-search-box input { width: 100%; border: none; border-right: 1px solid #ccc !important; outline: none; background-color: #fafafa; border-radius: 5px; padding-left: 34px; transition: background-color 0.3s ease, box-shadow 0.3s ease; } .combined-search-box input::placeholder { color: #999; font-size: 14px; } .combined-search-box input:focus { background-color: #fff; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); } .search-field i { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); color: #13a4d6; background-color: #fff; font-size:18px; } .combined-search-box button { background-color: #007bff; color: white; border: none; padding: 10px 20px; font-size: 10px; cursor: pointer; transition: background-color 0.3s ease, transform 0.3s ease; border-radius: 8px; } .combined-search-box button:focus { outline: none; } .form-check label.form-check-label { font-size: 10px !important; } .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control, .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select, .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-top-right-radius: 10px !important; border-bottom-right-radius: 10px !important; } .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { margin-left: calc(var(--bs-border-width)* -1); border-top-left-radius: 8px !important; border-bottom-left-radius: 8px !important; } @media(max-width:320px){ .combined-search-box button { width:82% !important; height:40px !important; } } .form-check{ display: flex !important; align-items: center !important; gap: 8px !important; } .app-flexer{ display: flex; width: 100%; justify-content: space-between; } @media (max-width: 767px) { .modal .btn-close { position: absolute; right: 10px; top: 10px; } }