.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
html {
position: relative;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-bottom: 0px !important;
margin-top: 0px !important;
font-size: 13.5px;
}
/* noto-sans-regular - latin_latin-ext */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
src: url('../fonts/noto-sans-v39-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
body {
margin-bottom: 0px !important;
margin-top: 0px !important;
color: rgba(0, 0, 0, 0.2);
background-color: white;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 100;
font-size: 13px;
letter-spacing: 1px;
padding: 0;
}
/* General Styles */
.footer-col {
position: relative;
}
/* Accordion Header Styles */
.accordion-header {
cursor: pointer;
font-size: 14px;
padding-right: 30px; /* Adjust for space for the sign */
position: relative;
margin-bottom: 45px; /* Gap between header and items */
padding-bottom: 18px;
font-weight: 600;
}
/* Accordion Sign Styles */
.accordion-sign {
font-size: 24px; /* Larger + sign */
/* position: absolute;*/
/* padding-right: 100px;*/
top: 50%;
transform: translateY(-50%);
transition: all 0.3s ease;
}
.dropdown-menu-options a:hover {
background-color: red;
}
.dropdown-toggle::after {
display: none;
}
.dropdown-menu-options {
border: none;
}
.dropdown-menu-options a {
border: none;
}
.dropdown-footer:hover .dropdown-menu {
display: block;
border: 0px;
border-color: white;
background-color: white;
}
/* Main Menu Links */
.navbar .navbar-nav .nav-link {
font-size: 13px;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
letter-spacing: 0.5px;
color: #413f3f;
margin-right: 10px; /*Apply margin only to main menu links*/
margin-left: 10px;
margin-top: 10px;
/* padding-left: 10px;
padding-right: 10px;*/
}
/* Dropdown Menu Items */
.navbar-nav .dropdown-item {
font-size: 13px;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 600;
letter-spacing: 1px;
color: #413f3f;
margin-top: 8px;
align-content: start;
align-items: start;
justify-content: start;
justify-items: start;
text-align: start;
}
/* Hover effect for Main Menu Links */
.navbar .navbar-nav .nav-link:hover {
/* background-color: white;*/
/* color: #000;*/
}
/* Hover effect for Dropdown Menu Items */
.navbar-nav .dropdown-item:hover {
background-color: #E8F0FE;
/*color: #000;*/ /* Optional: change text color on hover */
/*padding-left: 10px;*/ /* Ensure padding keeps hover effect inside borders */
/*padding-right: 10px;*/
/*margin-left: 0;*/ /* Remove margin to keep background inside the container */
/*margin-right: 0;*/
align-content: start;
align-items: start;
justify-content: start;
justify-items: start;
text-align: start;
}
.navbar .navbar-nav .nav-item:hover::after {
}
.navbar .navbar-nav .nav-item:hover::after {
}
.bg-navy {
background-color: white;
}
.bg-grey {
background-color: #f4f4f4;
}
.icon-with-bg {
/* background-color: #28587B;*/
background-color: #28587B;
padding: 5px;
border-radius: 50%; /* For a circular background */
color: white; /* Icon color */
}
/* Nav Bar*/
.nav-menu-item:hover {
border-bottom: 2px solid black;
}
/* Style for the black boxes */
.box {
background-color: black;
color: black;
padding: 20px;
margin-bottom: 10px;
border-radius: 5px;
text-align: center;
font-size: 30px;
}
.btn-black {
color: white;
background-color: black;
border-color: black;
font-size: 26px;
}
.btn-black:hover {
color: #fff;
background-color: #333;
border-color: #333;
}
hr {
margin-top: 86px;
margin-bottom: 1px;
color: black;
background-color: black;
border: 2px;
border-color: aqua;
}
a {
color: #258cfb;
text-decoration: none;
}
.a-footer-link {
color: black;
font-size: 13px;
font-weight: 600;
text-decoration: none !important;
}
.a-footer-link:hover {
color: #3e3e3e;
text-decoration: none !important; /* Optionally reinforce no underline on hover */
}
.a-link-index-page {
color: #4f4f4f;
font-size: 13px;
font-weight: 200;
text-decoration: none !important;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/*Highlight effect*/
p {
position: relative;
}
p::before {
content: "";
position: absolute;
/* top: -8px;
left: -20px;
width: 105%;
height: 125%;*/
background-color: lightblue;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 20px;
}
p:hover::before {
opacity: 3;
}
.p-highlight {
position: relative;
}
.p-highlight::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #2D2E34;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.p-highlight:hover::before {
opacity: 3;
}
.custom-height-top {
margin-top: 142px;
}
.custom-height-bottom {
margin-bottom: 240px;
}
.no-underline:hover {
text-decoration: none;
}
.custom-p-font-color {
color: black;
}
.navbar {
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
/* Expand navbar sub menu items */
.navbar {
margin-bottom: 0; /* Remove any default margin */
}
.nav-item.dropdown:hover .dropdown-menu {
display: block; /* Show the dropdown menu on hover */
}
header + #content-wrapper {
margin-top: 0px; /* Remove the gap between the menu bar and content */
}
/* Add a background color for the sub-menu dropdown */
/*.dropdown-menu {
background-color: #f8f9fa;
}*/
.dropdown-menu {
/*position: absolute;*/
border: 1px solid #ccc;
border-radius: 0.25rem;
padding: 0.5rem;
margin-top: 0.5rem;
background-color: white;
}
.custom-row {
display: flex;
flex-wrap: wrap;
margin: -1px;
}
.row {
font-size: 0.92rem;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.custom-col {
padding: 1px; /* Set the padding to create a 1px gap between columns */
}
footer .list-unstyled li a {
color: black !important; /* Add !important to force the white color to apply */
}
/* Reduce the vertical gap between items in the footer menu */
footer ul li {
margin-bottom: 2px; /* Adjust the value as per preference */
}
/* Reduce the vertical gap between items in the footer menu */
footer ul {
padding-left: 0;
}
/* Left-align the menu items within the footer */
footer .custom-list-style li {
display: inline-block;
margin-right: 0px; /* Adjust the value as per preference */
}
footer {
font-size: 13px; /* Adjust the value as per preference */
}
.footer-divider {
border-top: 1px solid #ff0000; /* Replace "#ff0000" with the desired color for the footer
*/
}
.bg-colour-footer {
background-color: #ECF2FF;
}
.very-large-text {
font-size: 30px;
color: black;
font-weight: 900; /* Make the text bolder */
letter-spacing: 1px; /* Increase the spacing between characters */
line-height: 2; /* Optional: Adjust line height for better readability */
}
.custom-error-message {
color: red; /* Set the color for the error messages */
font-size: 13px;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
letter-spacing: 1.2px;
}
#comments {
resize: vertical; /* Allow vertical resizing */
height: auto; /* Set height to auto to adjust based on content */
}
/*These below is used in job search*/
.filter-form {
display: flex;
align-items: flex-start;
}
.filter-item {
border-radius: 6px;
padding: 1px;
margin-right: 1px;
flex: 1;
min-width: 200px;
}
.filter-form label {
margin-right: 1px;
}
.filter-form {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.filter-row {
display: flex;
flex-wrap: wrap;
justify-content: left;
align-items: self-start;
gap: 20px;
}
.filter-input {
border: 1px solid blue;
border-radius: 6px;
width: 100%;
}
.select-option {
width: 100%;
}
.select-option {
font-size: 13px;
}
/* Apply custom styles to table rows and cells */
.table th,
.table td {
border-width: 2px;
border-color: #dee2e6;
}
/* Make table rows thinner */
.table tbody tr {
border-top: 3px solid #dee2e6;
}
/* Override card CSS to remove border */
.card {
border: none;
}
/*upload button wrapper. Used form language conversion*/
.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
background-color: #fff;
border: 0px solid #cdcdcd;
border-radius: 3px;
padding: 8px 12px;
height: 39px !important;
width: calc(100% - 26px);
}
.upload-btn-wrapper .btnr {
border: 1px solid gray;
color: gray;
background-color: #eee;
padding: 5px 10px;
border-radius: 1px;
font-size: 13.5px;
font-weight: bold;
position: relative;
}
.upload-btn-wrapper .btnr + span {
padding: 5px;
font-weight: normal;
}
.upload-btn-wrapper input[type=file] {
font-size: 42px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
/* Add a bottom border to job rows except for the last one */
.job-row:not(:last-child) {
border-bottom: 1px solid #dee2e6;
}
/* Add some spacing between job description and actions */
.job-description, .job-actions {
padding-top: 5px;
}
/* Change the color of the logged-in icon to green */
.logged-in-icon .bi {
color: #1C8CFE;
}
.logged-in-icon-grid .bi {
color: black;
}
/* Cookies banner */
#cookieConsentdiv {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
background-color: black;
color: gray;
text-align: center;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000; /* Ensure it's above other content */
}
#cookieConsentdiv button {
background-color: red;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
font-size: 11px;
}
#cookieConsentdiv button:hover {
background-color: #28587B;
}
#cookieConsentdiv h3 {
font-size: 10px;
}
#cookieConsentdiv p {
font-size: 11px;
}
#cookieConsentdiv a {
text-decoration: underline;
}
.info-link {
position: relative; /* Required for positioning the message */
text-decoration: none; /* Remove underline from the link */
}
.info-icon {
cursor: help; /* Change cursor to a question mark */
margin-left: 4px; /* Add some spacing between icon and text */
}
.info-message {
display: none; /* Hide the message by default */
position: absolute; /* Position it relative to the link */
background-color: #f9f9f9; /* Background color of the message */
border: 1px solid #ccc; /* Border around the message */
padding: 5px; /* Spacing inside the message */
z-index: 1; /* Ensure the message appears above other content */
width: 320px; /* Adjust width as needed */
top: 100%; /* Position below the link */
left: 0; /* Align with the left edge of the link */
}
.info-link:hover .info-message {
display: block; /* Show the message when hovering over the link */
}
.blue-icon {
color: #28587B;
}
.green-icon {
color: green !important;
}
.black-icon {
color: black !important;
}
.red-icon {
color: red;
}
/* Style the Facebook login button */
fb\:login-button {
font-size: 13.5px; /* Adjust the font size */
padding: 20px 40px; /* Adjust padding as needed */
/* Add other CSS rules for size and styling */
}
/* horizontal line under the navigation menu*/
.separator-line {
border-top: 1px solid #ccc;
margin-top: 1px;
}
/* Small Mobile (Up to 320px) */
@media (max-width: 320px) {
/* CSS rules for devices up to 320px */
.slogan{
color:#0c315a;
}
.dotlogo {
display: none;
}
.search-box-container {
padding: 0px 0px 0px 0px;
border-radius: 12px;
}
.search-box-container-candidate {
padding: 30px 0px 30px 0px;
border-radius: 12px;
}
.combined-input {
flex-direction: column;
border: none;
padding: 0;
position: relative;
background-color: white;
}
.progress {
width: 100%;
height: 6px !important;
background-color: darkred !important;
}
.form-group {
text-align: left;
align-content: start !important;
align-items: start !important;
width: 100%;
}
.search-box {
flex: none;
width: 100%;
margin-bottom: 4px;
border-bottom: none;
border: 2px solid #28587B;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding-top: 6px;
}
.search-input,
.location-input {
flex: none;
border: none;
padding: 0 5px;
font-size: 13.5px;
background-color: transparent;
width: 100%;
outline: none;
height: 40px;
}
.search-button {
background-color: #28587B;
width: 100%;
color: white;
font-weight: 500;
border: none;
padding: 5px 20px 10px 20px;
height: 35px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
cursor: pointer;
}
.icon-container {
padding-left: 6px;
padding-top: 0px;
}
.navbar-nav .nav-item {
border-bottom: 2px solid #ccc;
padding-bottom: 5px;
margin-bottom: 5px;
margin-left: 10px
}
/* Add some margin to the hamburger menu button */
.navbar-toggler {
margin-top: 10px;
margin-left: 10px;
font-weight: 600;
}
.count-badge {
background-color: #007bff; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 3px 6px; /* Adjust padding as needed */
margin-left: 3px; /* Adjust margin as needed */
}
.count-badge-green {
background-color: green; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 3px 6px; /* Adjust padding as needed */
margin-left: 3px; /* Adjust margin as needed */
}
.count-badge-orange {
background-color: orange; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 3px 6px; /* Adjust padding as needed */
margin-left: 3px; /* Adjust margin as needed */
}
.count-badge-red {
background-color: red; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 3px 6px; /* Adjust padding as needed */
margin-left: 3px; /* Adjust margin as needed */
}
.cv-score-circle {
width: 30px;
height: 30px;
border: 2px solid black;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}
.footer-col {
display: inline-flex;
flex-direction: column;
align-items: center; /* Center items horizontally */
text-align: center; /* Center text horizontally */
}
.footer-col ul {
align-content: center;
justify-content: center;
align-items: center;
text-align: center;
display: none; /* Hide by default on small screens */
}
.footer-col li {
align-content: center;
justify-content: center;
align-items: center;
text-align: center;
padding-right: 40px;
}
.footer-col ul.show {
display: block; /* Show when open */
}
.accordion-sign {
font-size: 28px; /* Larger + sign */
position: absolute;
padding-left: 10%;
top: 50%;
transform: translateY(-50%);
transition: all 0.3s ease;
}
.accordion-header.open .accordion-sign::before {
content: "-";
}
.accordion-header:not(.open) .accordion-sign::before {
content: "+";
}
.btn-check-matches {
font-size: 12.5px; /* Smaller font size */
background-color: #67895a;
color: #e1f2c1; /* White text */
border: none; /* No border */
border-radius: 14px; /* Circular shape */
width: 100%; /* Button width */
height: 40px; /* Button height */
display: inline-block;
text-align: center; /* Center the text inside */
padding: 4px; /* No padding inside */
cursor: pointer;
font-weight: 500;
}
.btn-check-matches:hover {
background-color: #ecf2ff; /* Darker blue on hover */
}
.btn-check-matches:focus {
outline: none; /* Remove outline on focus */
}
.payment-grid {
grid-template-columns: 1fr; /* Falls back to 1 column for very small screens */
}
.grid-header span, .grid-row span {
text-align: left; /* Ensure left alignment */
}
.dropdown:hover .dropdown-menu {
display: block;
border-color: white;
background-color: white;
border: 0px;
}
.custom-border {
border-radius: 0.5rem; /* More rounded corners */
border: 1px solid #6c757d; /* Slightly darker border */
box-shadow: 2px 2px 4px #28587B; /* Optional: Adds a subtle shadow for depth */
max-width: 90%;
}
/* Tooltip custom styling */
.tooltip-inner {
max-width: 300px; /* Ensure max-width fits your requirement */
min-width: 200px; /* Minimum width if the content is short */
white-space: pre-wrap; /* Wrap text as needed */
word-wrap: break-word; /* Avoid text overflow */
font-size: 13px; /* Optional: adjust text size */
text-align: left; /* Ensure text is aligned correctly */
background-color: white !important; /* Set a custom background color */
color: black !important; /* Set the font color */
border-radius: 5px !important;
border: 1px solid black !important;
padding: 5px 5px 5px 5px !important;
}
.job-entry-applicant {
border-radius: 10px;
border: 0px solid lightgrey;
font-size: 13px;
font-family: 'Noto Sans',HelveticaNeue,Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: 400;
font-size: 13px;
color: #2d2d2d;
background-color: ghostwhite;
margin-top: 3em;
padding:0 0 0 20px;
}
}
/* Mobile (Between 321px and 480px) */
@media (min-width: 321px) and (max-width: 480px) {
.slogan {
color: #0c315a;
}
.dotlogo {
display: none;
}
.search-box-container {
padding: 0px 0px 0px 0px;
border-radius: 12px;
}
.search-box-container-candidate {
padding: 30px 0px 30px 0px;
border-radius: 12px;
}
.combined-input {
flex-direction: column;
border: none;
padding: 0;
position: relative;
background-color: white;
}
.progress {
width: 100%;
height: 6px !important;
background-color: darkred !important;
}
.form-group {
text-align: left;
align-content: start !important;
align-items: start !important;
width: 100%;
}
.search-box {
flex: none;
width: 100%;
margin-bottom: 4px;
border-bottom: none;
border: 2px solid #28587B;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding-top: 6px;
}
.search-input,
.location-input {
flex: none;
border: none;
padding: 0 5px;
font-size: 13.5px;
background-color: transparent;
width: 100%;
outline: none;
height: 40px;
}
.search-button {
background-color: #28587B;
width: 100%;
color: white;
font-weight: 500;
border: none;
padding: 5px 20px 10px 20px;
height: 35px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
cursor: pointer;
}
.icon-container {
padding-left: 6px;
padding-top: 0px;
}
.navbar-nav .nav-item {
border-bottom: 2px solid #ccc;
padding-bottom: 5px;
margin-bottom: 5px;
margin-left: 10px
}
/* Add some margin to the hamburger menu button */
.navbar-toggler {
margin-top: 10px;
margin-left: 10px;
font-weight: 600;
}
.count-badge {
background-color: #007bff; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 3px 6px; /* Adjust padding as needed */
margin-left: 3px; /* Adjust margin as needed */
}
.count-badge-green {
background-color: green; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 3px 6px; /* Adjust padding as needed */
margin-left: 3px; /* Adjust margin as needed */
}
.count-badge-orange {
background-color: orange; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 3px 6px; /* Adjust padding as needed */
margin-left: 3px; /* Adjust margin as needed */
}
.count-badge-red {
background-color: red; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 3px 6px; /* Adjust padding as needed */
margin-left: 3px; /* Adjust margin as needed */
}
.cv-score-circle {
width: 30px;
height: 30px;
border: 2px solid black;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}
.footer-col {
display: inline-flex;
flex-direction: column;
align-items: center; /* Center items horizontally */
text-align: center; /* Center text horizontally */
}
.footer-col ul {
align-content: center;
justify-content: center;
align-items: center;
text-align: center;
display: none; /* Hide by default on small screens */
}
.footer-col li {
align-content: center;
justify-content: center;
align-items: center;
text-align: center;
padding-right: 40px;
}
.footer-col ul.show {
display: block; /* Show when open */
}
.accordion-sign {
font-size: 28px; /* Larger + sign */
position: absolute;
padding-left: 10%;
top: 50%;
transform: translateY(-50%);
transition: all 0.3s ease;
}
.accordion-header.open .accordion-sign::before {
content: "-";
}
.accordion-header:not(.open) .accordion-sign::before {
content: "+";
}
.btn-check-matches {
font-size: 12.5px; /* Smaller font size */
background-color: #67895a;
color: #e1f2c1; /* White text */
border: none; /* No border */
border-radius: 14px; /* Circular shape */
width: 100%; /* Button width */
height: 40px; /* Button height */
display: inline-block;
text-align: center; /* Center the text inside */
padding: 4px; /* No padding inside */
cursor: pointer;
font-weight: 500;
}
.btn-check-matches:hover {
background-color: #ecf2ff; /* Darker blue on hover */
}
.btn-check-matches:focus {
outline: none; /* Remove outline on focus */
}
.payment-grid {
grid-template-columns: 1fr; /* Falls back to 1 column for very small screens */
}
.grid-header span, .grid-row span {
text-align: left; /* Ensure left alignment */
}
.dropdown:hover .dropdown-menu {
display: block;
border-color: white;
background-color: white;
border: 0px;
}
.custom-border {
border-radius: 0.5rem; /* More rounded corners */
border: 1px solid #6c757d; /* Slightly darker border */
box-shadow: 2px 2px 4px #28587B; /* Optional: Adds a subtle shadow for depth */
max-width: 90%;
}
/* Tooltip custom styling */
.tooltip-inner {
max-width: 300px; /* Ensure max-width fits your requirement */
min-width: 200px; /* Minimum width if the content is short */
white-space: pre-wrap; /* Wrap text as needed */
word-wrap: break-word; /* Avoid text overflow */
font-size: 13px; /* Optional: adjust text size */
text-align: left; /* Ensure text is aligned correctly */
background-color: white !important; /* Set a custom background color */
color: black !important; /* Set the font color */
border-radius: 5px !important;
border: 1px solid black !important;
padding: 5px 5px 5px 5px !important;
}
.job-entry-applicant {
border-radius: 10px;
border: 0px solid lightgrey;
font-size: 13px;
font-family: 'Noto Sans',HelveticaNeue,Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: 400;
font-size: 13px;
color: #2d2d2d;
background-color: ghostwhite;
margin-top: 3em;
padding: 0 0 0 20px;
}
}
/* Mobile (Between 481px and 576px) */
@media (min-width: 481px) and (max-width: 576px) {
.slogan {
color: #0c315a;
}
.dotlogo {
display: none;
}
.search-box-container {
padding: 0px 0px 0px 0px;
border-radius: 12px;
}
.search-box-container-candidate {
padding: 30px 0px 30px 0px;
border-radius: 12px;
}
.combined-input {
flex-direction: column;
border: none;
padding: 0;
position: relative;
background-color: white;
}
.progress {
width: 100%;
height: 6px !important;
background-color: darkred !important;
}
.form-group {
text-align: left;
align-content: start !important;
align-items: start !important;
width: 100%;
}
.search-box {
flex: none;
width: 100%;
margin-bottom: 4px;
border-bottom: none;
border: 2px solid #28587B;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding-top: 6px;
}
.search-input,
.location-input {
flex: none;
border: none;
padding: 0 5px;
font-size: 13.5px;
background-color: transparent;
width: 100%;
outline: none;
height: 40px;
}
.search-button {
background-color: #28587B;
width: 100%;
color: white;
font-weight: 500;
border: none;
padding: 5px 20px 10px 20px;
height: 35px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
cursor: pointer;
}
.icon-container {
padding-left: 6px;
padding-top: 0px;
}
.navbar-nav .nav-item {
border-bottom: 2px solid #ccc;
padding-bottom: 5px;
margin-bottom: 5px;
margin-left: 10px
}
/* Add some margin to the hamburger menu button */
.navbar-toggler {
margin-top: 10px;
margin-left: 10px;
font-weight: 600;
}
.count-badge {
background-color: #007bff; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 3px 6px; /* Adjust padding as needed */
margin-left: 3px; /* Adjust margin as needed */
}
.count-badge-green {
background-color: green; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 3px 6px; /* Adjust padding as needed */
margin-left: 3px; /* Adjust margin as needed */
}
.count-badge-orange {
background-color: orange; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 3px 6px; /* Adjust padding as needed */
margin-left: 3px; /* Adjust margin as needed */
}
.count-badge-red {
background-color: red; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 3px 6px; /* Adjust padding as needed */
margin-left: 3px; /* Adjust margin as needed */
}
.cv-score-circle {
width: 30px;
height: 30px;
border: 2px solid black;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}
.footer-col {
display: inline-flex;
flex-direction: column;
align-items: center; /* Center items horizontally */
text-align: center; /* Center text horizontally */
}
.footer-col ul {
align-content: center;
justify-content: center;
align-items: center;
text-align: center;
display: none; /* Hide by default on small screens */
}
.footer-col li {
align-content: center;
justify-content: center;
align-items: center;
text-align: center;
padding-right: 40px;
}
.footer-col ul.show {
display: block; /* Show when open */
}
.accordion-sign {
font-size: 28px; /* Larger + sign */
position: absolute;
padding-left: 10%;
top: 50%;
transform: translateY(-50%);
transition: all 0.3s ease;
}
.accordion-header.open .accordion-sign::before {
content: "-";
}
.accordion-header:not(.open) .accordion-sign::before {
content: "+";
}
.btn-check-matches {
font-size: 12.5px; /* Smaller font size */
background-color: #67895a;
color: #e1f2c1; /* White text */
border: none; /* No border */
border-radius: 14px; /* Circular shape */
width: 100%; /* Button width */
height: 40px; /* Button height */
display: inline-block;
text-align: center; /* Center the text inside */
padding: 4px; /* No padding inside */
cursor: pointer;
font-weight: 500;
}
.btn-check-matches:hover {
background-color: #ecf2ff; /* Darker blue on hover */
}
.btn-check-matches:focus {
outline: none; /* Remove outline on focus */
}
.payment-grid {
grid-template-columns: 1fr; /* Falls back to 1 column for very small screens */
}
.grid-header span, .grid-row span {
text-align: left; /* Ensure left alignment */
}
.dropdown:hover .dropdown-menu {
display: block;
border-color: white;
background-color: white;
border: 0px;
}
.custom-border {
border-radius: 0.5rem; /* More rounded corners */
border: 1px solid #6c757d; /* Slightly darker border */
box-shadow: 2px 2px 4px #28587B; /* Optional: Adds a subtle shadow for depth */
max-width: 90%;
}
/* Tooltip custom styling */
.tooltip-inner {
max-width: 300px; /* Ensure max-width fits your requirement */
min-width: 200px; /* Minimum width if the content is short */
white-space: pre-wrap; /* Wrap text as needed */
word-wrap: break-word; /* Avoid text overflow */
font-size: 13px; /* Optional: adjust text size */
text-align: right; /* Ensure text is aligned correctly */
background-color: white !important; /* Set a custom background color */
color: black !important; /* Set the font color */
border-radius: 5px !important;
border: 1px solid black !important;
padding: 5px 5px 5px 5px !important;
}
.job-entry-applicant {
border-radius: 10px;
border: 0px solid lightgrey;
font-size: 13px;
font-family: 'Noto Sans',HelveticaNeue,Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: 400;
font-size: 13px;
color: #2d2d2d;
background-color: ghostwhite;
margin-top: 3em;
padding: 0 0 0 20px;
}
}
/* Tablets and small devices (Between 577px and 768px) */
@media (min-width: 577px) and (max-width: 768px) {
/* CSS rules for devices up to 320px */
.slogan {
color: #0c315a;
}
.dotlogo {
display: none;
}
.search-box-container {
padding: 0px 0px 0px 0px;
border-radius: 12px;
}
.search-box-container-candidate {
padding: 30px 0px 30px 0px;
border-radius: 12px;
}
.combined-input {
flex-direction: column;
border: none;
padding: 0;
position: relative;
background-color: white;
}
.progress {
width: 100%;
height: 6px !important;
background-color: darkred !important;
}
.form-group {
text-align: left;
align-content: start !important;
align-items: start !important;
width: 100%;
}
.search-box {
flex: none;
width: 100%;
margin-bottom: 4px;
border-bottom: none;
border: 2px solid #28587B;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding-top: 6px;
}
.search-input,
.location-input {
flex: none;
border: none;
padding: 0 5px;
font-size: 13.5px;
background-color: transparent;
width: 100%;
outline: none;
height: 40px;
}
.search-button {
background-color: #28587B;
width: 100%;
color: white;
font-weight: 500;
border: none;
padding: 5px 20px 10px 20px;
height: 35px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
cursor: pointer;
}
.icon-container {
padding-left: 6px;
padding-top: 0px;
}
.navbar-nav .nav-item {
border-bottom: 2px solid #ccc;
padding-bottom: 5px;
margin-bottom: 5px;
margin-left: 10px
}
/* Add some margin to the hamburger menu button */
.navbar-toggler {
margin-top: 10px;
margin-left: 10px;
font-weight: 600;
}
.count-badge {
background-color: #007bff; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 3px 6px; /* Adjust padding as needed */
margin-left: 3px; /* Adjust margin as needed */
}
.count-badge-green {
background-color: green; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 3px 6px; /* Adjust padding as needed */
margin-left: 3px; /* Adjust margin as needed */
}
.count-badge-orange {
background-color: orange; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 3px 6px; /* Adjust padding as needed */
margin-left: 3px; /* Adjust margin as needed */
}
.count-badge-red {
background-color: red; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 3px 6px; /* Adjust padding as needed */
margin-left: 3px; /* Adjust margin as needed */
}
.cv-score-circle {
width: 30px;
height: 30px;
border: 2px solid black;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}
.footer-col {
display: inline-flex;
flex-direction: column;
align-items: center; /* Center items horizontally */
text-align: center; /* Center text horizontally */
}
.footer-col ul {
align-content: center;
justify-content: center;
align-items: center;
text-align: center;
display: none; /* Hide by default on small screens */
}
.footer-col li {
align-content: center;
justify-content: center;
align-items: center;
text-align: center;
padding-right: 40px;
}
.footer-col ul.show {
display: block; /* Show when open */
}
.accordion-sign {
font-size: 28px; /* Larger + sign */
position: absolute;
padding-left: 10%;
top: 50%;
transform: translateY(-50%);
transition: all 0.3s ease;
}
.accordion-header.open .accordion-sign::before {
content: "-";
}
.accordion-header:not(.open) .accordion-sign::before {
content: "+";
}
.btn-check-matches {
font-size: 12.5px; /* Smaller font size */
background-color: #67895a;
color: #e1f2c1; /* White text */
border: none; /* No border */
border-radius: 14px; /* Circular shape */
width: 100%; /* Button width */
height: 40px; /* Button height */
display: inline-block;
text-align: center; /* Center the text inside */
padding: 4px; /* No padding inside */
cursor: pointer;
font-weight: 500;
}
.btn-check-matches:hover {
background-color: #ecf2ff; /* Darker blue on hover */
}
.btn-check-matches:focus {
outline: none; /* Remove outline on focus */
}
.payment-grid {
grid-template-columns: 1fr; /* Falls back to 1 column for very small screens */
}
.grid-header span, .grid-row span {
text-align: left; /* Ensure left alignment */
}
.dropdown:hover .dropdown-menu {
display: block;
border-color: white;
background-color: white;
border: 0px;
}
.custom-border {
border-radius: 0.5rem; /* More rounded corners */
border: 1px solid #6c757d; /* Slightly darker border */
box-shadow: 2px 2px 4px #28587B; /* Optional: Adds a subtle shadow for depth */
max-width: 90%;
}
/* Tooltip custom styling */
.tooltip-inner {
max-width: 300px; /* Ensure max-width fits your requirement */
min-width: 200px; /* Minimum width if the content is short */
white-space: pre-wrap; /* Wrap text as needed */
word-wrap: break-word; /* Avoid text overflow */
font-size: 13px; /* Optional: adjust text size */
text-align: right; /* Ensure text is aligned correctly */
background-color: white !important; /* Set a custom background color */
color: black !important; /* Set the font color */
border-radius: 5px !important;
border: 1px solid black !important;
padding: 5px 5px 5px 5px !important;
}
}
/* Larger tablets (Between 769px and 992px) */
@media (min-width: 769px) and (max-width: 991px) {
/* CSS rules for devices between 769px and 992px */
.slogan {
color: #bed6d7;
}
.dotlogo {
display: none;
}
.search-box-container {
padding: 30px 0px 30px 0px;
border-radius: 12px;
background-color: #28587b;
}
.search-box-container-candidate {
padding: 30px 0px 30px 0px;
border-radius: 12px;
background-color: #89A8AE;
}
.combined-input {
border: 1px solid navy;
display: flex;
justify-content: space-between;
flex-wrap: wrap; /* Wrap items to the next row on smaller screens */
padding: 2px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
position: relative;
width: 70%;
align-items: center; /* Align items vertically in the center */
justify-content: center; /* Center items horizontally */
text-align: center; /* Center the content horizontally */
margin: 0 auto; /* Center the container itself horizontally */
align-items: center; /* Center the content vertically */
justify-content: center; /* Center the content horizontally */
background-color: #ECF2FF;
}
.progress {
width: 100%;
height: 6px !important;
background-color: darkred !important;
}
.form-group {
text-align: left;
align-content: start !important;
align-items: start !important;
width: 100%;
}
.separator {
border-right: 10px solid #ccc;
height: 34px;
margin: 0 4px; /* Add some margin for spacing */
width: 1px;
border: 1px solid #ccc;
}
.search-box {
flex: 1;
padding: 0 5px;
display: flex;
align-items: center;
margin-bottom: 4px;
height: 50px;
border: none;
outline: none;
width: 70%;
align-items: center; /* Align items vertically in the center */
justify-content: center; /* Center items horizontally */
}
.icon-container {
padding-left: 4px;
padding-top: 5px;
}
.navbar-nav .nav-item {
border-bottom: 2px solid #ccc;
padding-bottom: 5px;
margin-bottom: 5px;
margin-left: 10px
}
/* Add some margin to the hamburger menu button */
.navbar-toggler {
margin-top: 10px;
margin-left: 10px;
font-weight: 600;
}
/* Additional styling for search-input and location-input as needed */
.search-input,
.location-input {
flex: 1;
border: none;
padding: 0 5px;
font-size: 13.5px;
background-color: transparent;
width: 80%;
outline: none;
height: 40px;
}
.search-button {
background-color: #28587B;
color: white;
font-weight: 500;
border: none;
padding: 5px 20px 10px 20px;
height: 35px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
cursor: pointer;
}
.count-badge {
background-color: #007bff; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 5px 10px; /* Adjust padding as needed */
margin-left: 5px; /* Adjust margin as needed */
}
.count-badge-green {
background-color: green; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 5px 10px; /* Adjust padding as needed */
margin-left: 5px; /* Adjust margin as needed */
}
.count-badge-orange {
background-color: orange; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 5px 10px; /* Adjust padding as needed */
margin-left: 5px; /* Adjust margin as needed */
}
.count-badge-red {
background-color: red; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 5px 10px; /* Adjust padding as needed */
margin-left: 5px; /* Adjust margin as needed */
}
.cv-score-circle {
width: 40px;
height: 40px;
border: 2px solid black;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}
.btn-check-matches {
font-size: 12.5px; /* Smaller font size */
background-color: #67895a; /* Blue background or any other color */
color: #e1f2c1;
border: none; /* No border */
border-radius: 14px; /* Circular shape */
width: 100%; /* Button width */
height: 80px; /* Button height */
display: inline-block;
text-align: center; /* Center the text inside */
padding: 4px; /* No padding inside */
cursor: pointer;
font-weight: 500;
}
.btn-check-matches:hover {
background-color: #ecf2ff; /* Darker blue on hover */
}
.btn-check-matches:focus {
outline: none; /* Remove outline on focus */
}
.footer-col {
display: inline-flex;
flex-direction: column;
align-items: center; /* Center items horizontally */
text-align: center; /* Center text horizontally */
}
.footer-col ul {
align-content: center;
justify-content: center;
align-items: center;
text-align: center;
display: none; /* Hide by default on small screens */
}
.footer-col li {
align-content: center;
justify-content: center;
align-items: center;
text-align: center;
padding-right: 40px;
}
.footer-col ul.show {
display: block; /* Show when open */
}
.accordion-sign {
font-size: 28px; /* Larger + sign */
position: absolute;
padding-left: 10%;
top: 50%;
transform: translateY(-50%);
transition: all 0.3s ease;
}
.accordion-header.open .accordion-sign::before {
content: "-";
}
.accordion-header:not(.open) .accordion-sign::before {
content: "+";
}
.position-relative {
position: relative;
}
.vertical-line {
width: 2px; /* Thickness of the line */
height: 10px; /* Height of the vertical line (adjust as needed) */
background-color: #28587B; /* Color of the line */
margin: 0 auto; /* Centers the line horizontally */
}
.dropdown:hover .dropdown-menu {
display: block;
border-color: white;
background-color: white;
border: 0px;
}
.custom-border {
border-radius: 0.5rem; /* More rounded corners */
border: 1px solid #6c757d; /* Slightly darker border */
box-shadow: 2px 2px 4px #28587B; /* Optional: Adds a subtle shadow for depth */
max-width: 90%;
}
/* Tooltip custom styling */
.tooltip-inner {
max-width: 400px; /* Ensure max-width fits your requirement */
min-width: 300px; /* Minimum width if the content is short */
white-space: pre-wrap; /* Wrap text as needed */
word-wrap: break-word; /* Avoid text overflow */
font-size: 13px; /* Optional: adjust text size */
text-align: left; /* Ensure text is aligned correctly */
background-color: white !important; /* Set a custom background color */
color: black !important; /* Set the font color */
border-radius: 5px !important;
border: 1px solid black !important;
padding: 5px 5px 5px 5px !important;
}
}
/* Small Laptops (Between 993px and 1200px) */
@media (min-width: 992px) and (max-width: 1200px) {
/* CSS rules for devices between 993px and 1200px */
.slogan {
color: #bed6d7;
}
.search-box-container {
padding: 30px 0px 30px 0px;
border-radius: 12px;
background-color: #28587b;
}
.search-box-container-candidate {
padding: 30px 0px 30px 0px;
border-radius: 12px;
background-color: #89A8AE;
}
.custom-gradient-navbar {
background-color: #ECF2FF;
}
.combined-input {
/* border: 1px solid #ccc;*/
border: 2px solid navy;
display: flex;
justify-content: space-between;
flex-wrap: wrap; /* Wrap items to the next row on smaller screens */
padding: 2px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
position: relative;
width: 70%;
align-items: center; /* Align items vertically in the center */
justify-content: center; /* Center items horizontally */
text-align: center; /* Center the content horizontally */
margin: 0 auto; /* Center the container itself horizontally */
align-items: center; /* Center the content vertically */
justify-content: center; /* Center the content horizontally */
background-color: #ECF2FF;
}
.progress {
width: 100%;
height: 6px !important;
background-color: darkred !important;
}
.form-group {
text-align: left;
align-content: start !important;
align-items: start !important;
width: 100%;
}
.separator {
border-right: 10px solid #ccc;
height: 34px;
margin: 0 4px; /* Add some margin for spacing */
width: 1px;
border: 1px solid #ccc;
}
.search-box {
flex: 1;
padding: 0 5px;
display: flex;
align-items: center;
margin-bottom: 4px;
height: 50px;
border: none;
outline: none;
width: 70%;
align-items: center; /* Align items vertically in the center */
justify-content: center; /* Center items horizontally */
}
.icon-container {
padding-left: 4px;
padding-top: 5px;
}
/* Add some margin to the hamburger menu button */
.navbar-toggler {
margin-top: 10px;
margin-left: 10px;
font-weight: 600;
}
/* Additional styling for search-input and location-input as needed */
.search-input,
.location-input {
flex: 1;
border: none;
padding: 0 5px;
font-size: 13.5px;
background-color: transparent;
width: 80%;
outline: none;
height: 40px;
}
.search-button {
background-color: #28587B;
color: white;
font-weight: 500;
border: none;
padding: 5px 20px 10px 20px;
height: 35px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
cursor: pointer;
}
.count-badge {
background-color: #007bff; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 5px 10px; /* Adjust padding as needed */
margin-left: 5px; /* Adjust margin as needed */
}
.count-badge-green {
background-color: green; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 5px 10px; /* Adjust padding as needed */
margin-left: 5px; /* Adjust margin as needed */
}
.count-badge-orange {
background-color: orange; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 5px 10px; /* Adjust padding as needed */
margin-left: 5px; /* Adjust margin as needed */
}
.count-badge-red {
background-color: red; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 5px 10px; /* Adjust padding as needed */
margin-left: 5px; /* Adjust margin as needed */
}
.cv-score-circle {
width: 40px;
height: 40px;
border: 2px solid black;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}
.btn-check-matches {
font-size: 12.5px; /* Smaller font size */
background-color: #67895a; /* Blue background or any other color */
color: #e1f2c1;
border: none; /* No border */
border-radius: 14px; /* Circular shape */
width: 100%; /* Button width */
height: 80px; /* Button height */
display: inline-block;
text-align: center; /* Center the text inside */
padding: 4px; /* No padding inside */
cursor: pointer;
font-weight: 500;
}
.btn-check-matches:hover {
background-color: #ecf2ff; /* Darker blue on hover */
}
.btn-check-matches:focus {
outline: none; /* Remove outline on focus */
}
.footer-col {
display: inline-flex;
flex-direction: column;
align-items: center; /* Center items horizontally */
text-align: center; /* Center text horizontally */
}
.footer-col ul {
align-content: center;
justify-content: center;
align-items: center;
text-align: center;
display: none; /* Hide by default on small screens */
}
.footer-col li {
align-content: center;
justify-content: center;
align-items: center;
text-align: center;
padding-right: 40px;
}
.footer-col ul.show {
display: block; /* Show when open */
}
.accordion-sign {
font-size: 28px; /* Larger + sign */
position: absolute;
padding-left: 10%;
top: 50%;
transform: translateY(-50%);
transition: all 0.3s ease;
}
.accordion-header.open .accordion-sign::before {
content: "-";
}
.accordion-header:not(.open) .accordion-sign::before {
content: "+";
}
.position-relative {
position: relative;
}
.vertical-line {
width: 2px; /* Thickness of the line */
height: 10px; /* Height of the vertical line (adjust as needed) */
background-color: #28587B; /* Color of the line */
margin: 0 auto; /* Centers the line horizontally */
}
.dropdown:hover .dropdown-menu {
display: block;
border-color: white;
background-color: white;
border: 1px solid #6c757d; /* Slightly darker border */
border-radius: 10px; /* Rounded corners */
/*box-shadow: 0 2px 5px rgba(0,0,0,0.2);*/ /* Shadow for better visibility */
box-shadow: 1px 2px 4px #28587B;
z-index: 1000; /* Ensure it appears on top of other elements */
padding: 10px 16px 16px 10px;
}
.custom-border {
border-radius: 0.5rem; /* More rounded corners */
border: 1px solid #6c757d; /* Slightly darker border */
box-shadow: 2px 2px 4px #28587B; /* Optional: Adds a subtle shadow for depth */
max-width: 90%;
}
/* Tooltip custom styling */
.tooltip-inner {
max-width: 800px; /* Ensure max-width fits your requirement */
min-width: 400px; /* Minimum width if the content is short */
white-space: pre-wrap; /* Wrap text as needed */
word-wrap: break-word; /* Avoid text overflow */
font-size: 13px; /* Optional: adjust text size */
text-align: left; /* Ensure text is aligned correctly */
background-color: white !important; /* Set a custom background color */
color: black !important; /* Set the font color */
border-radius: 5px !important;
border: 1px solid black !important;
padding: 5px 5px 5px 5px !important;
}
}
/* Large Laptops and Desktops */
@media (min-width: 1201px) and (max-width: 1400px) {
/* CSS rules for devices 1201px and above */
.slogan {
color: #bed6d7;
}
.search-box-container {
padding: 30px 0px 30px 0px;
border-radius: 12px;
background-color: #28587b;
}
.search-box-container-candidate {
padding: 30px 0px 30px 0px;
border-radius: 12px;
background-color: #89A8AE;
}
.custom-gradient-navbar {
background-color: #ECF2FF;
}
.combined-input {
border: 2px solid navy;
display: flex;
justify-content: space-between;
flex-wrap: wrap; /* Wrap items to the next row on smaller screens */
padding: 2px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
position: relative;
width: 60%;
align-items: center; /* Align items vertically in the center */
justify-content: center; /* Center items horizontally */
text-align: center; /* Center the content horizontally */
margin: 0 auto; /* Center the container itself horizontally */
align-items: center; /* Center the content vertically */
justify-content: center; /* Center the content horizontally */
background-color: #ECF2FF;
}
.progress {
width: 100%;
height: 6px !important;
background-color: darkred !important;
}
.form-group {
text-align: left;
align-content: start !important;
align-items: start !important;
width: 100%;
}
.separator {
border-right: 10px solid #ccc;
height: 34px;
margin: 0 4px; /* Add some margin for spacing */
width: 1px;
border: 1px solid #ccc;
}
.search-box {
flex: 1;
padding: 0 5px;
display: flex;
align-items: center;
margin-bottom: 4px;
height: 50px;
border: none;
outline: none;
width: 70%;
align-items: center; /* Align items vertically in the center */
justify-content: center; /* Center items horizontally */
}
.icon-container {
padding-left: 4px;
padding-top: 5px;
}
/* Add some margin to the hamburger menu button */
.navbar-toggler {
margin-top: 10px;
margin-left: 10px;
font-weight: 600;
}
/* Additional styling for search-input and location-input as needed */
.search-input,
.location-input {
flex: 1;
border: none;
padding: 0 5px;
font-size: 13.5px;
background-color: transparent;
width: 80%;
outline: none;
height: 40px;
}
.search-button {
background-color: #28587B;
color: white;
font-weight: 500;
border: none;
padding: 5px 20px 10px 20px;
height: 35px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
cursor: pointer;
}
.count-badge {
background-color: #007bff; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 5px 10px; /* Adjust padding as needed */
margin-left: 5px; /* Adjust margin as needed */
}
.count-badge-green {
background-color: green; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 5px 10px; /* Adjust padding as needed */
margin-left: 5px; /* Adjust margin as needed */
}
.count-badge-orange {
background-color: orange; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 5px 10px; /* Adjust padding as needed */
margin-left: 5px; /* Adjust margin as needed */
}
.count-badge-red {
background-color: red; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 5px 10px; /* Adjust padding as needed */
margin-left: 5px; /* Adjust margin as needed */
}
.cv-score-circle {
width: 40px;
height: 40px;
border: 2px solid black;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}
.btn-check-matches {
font-size: 13px; /* Smaller font size */
background-color: #67895a;
color: #e1f2c1;
border: none; /* No border */
border-radius: 14px; /* Circular shape */
width: 100%; /* Button width */
height: 50px; /* Button height */
display: inline-block;
text-align: center; /* Center the text inside */
padding: 4px; /* No padding inside */
cursor: pointer;
font-weight: 500;
}
.btn-check-matches:hover {
background-color: #ecf2ff; /* Darker blue on hover */
}
.btn-check-matches:focus {
outline: none; /* Remove outline on focus */
}
.position-relative {
position: relative;
}
.vertical-line {
width: 2px; /* Thickness of the line */
height: 10px; /* Height of the vertical line (adjust as needed) */
background-color: #28587B; /* Color of the line */
margin: 0 auto; /* Centers the line horizontally */
}
.dropdown:hover .dropdown-menu {
display: block;
border-color: white;
background-color: white;
border: 1px solid #6c757d; /* Slightly darker border */
border-radius: 10px; /* Rounded corners */
/*box-shadow: 0 2px 5px rgba(0,0,0,0.2);*/ /* Shadow for better visibility */
box-shadow: 1px 2px 4px #28587B;
z-index: 1000; /* Ensure it appears on top of other elements */
padding: 10px 16px 16px 10px;
}
.custom-border {
border-radius: 0.5rem; /* More rounded corners */
border: 1px solid #6c757d; /* Slightly darker border */
box-shadow: 2px 2px 4px #28587B; /* Optional: Adds a subtle shadow for depth */
max-width: 90%;
}
/* Tooltip custom styling */
.tooltip-inner {
max-width: 800px; /* Ensure max-width fits your requirement */
min-width: 400px; /* Minimum width if the content is short */
white-space: pre-wrap; /* Wrap text as needed */
word-wrap: break-word; /* Avoid text overflow */
font-size: 13px; /* Optional: adjust text size */
text-align: left; /* Ensure text is aligned correctly */
background-color: white !important; /* Set a custom background color */
color: black !important; /* Set the font color */
border-radius: 5px !important;
border: 1px solid black !important;
padding: 5px 5px 5px 5px !important;
}
}
/* Very Large Laptops and Desktops */
@media (min-width: 1401px) {
/* CSS rules for devices 1201px and above */
.slogan {
color: #bed6d7;
}
.search-box-container {
padding: 30px 0px 30px 0px;
border-radius: 12px;
background-color: #28587b;
}
.search-box-container-candidate {
padding: 30px 0px 30px 0px;
border-radius: 12px;
background-color: #89A8AE;
}
.custom-gradient-navbar {
background-color: #ECF2FF;
}
.combined-input {
border: 2px solid navy;
display: flex;
justify-content: space-between;
flex-wrap: wrap; /* Wrap items to the next row on smaller screens */
padding: 2px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
position: relative;
width: 60%;
align-items: center; /* Align items vertically in the center */
justify-content: center; /* Center items horizontally */
text-align: center; /* Center the content horizontally */
margin: 0 auto; /* Center the container itself horizontally */
align-items: center; /* Center the content vertically */
justify-content: center; /* Center the content horizontally */
background-color: #ECF2FF;
}
.progress {
width: 100%;
height: 6px !important;
background-color: darkred !important;
}
.form-group {
text-align: left;
align-content: start !important;
align-items: start !important;
width: 100%;
}
.separator {
border-right: 10px solid #ccc;
height: 34px;
margin: 0 4px; /* Add some margin for spacing */
width: 1px;
border: 1px solid #ccc;
}
/* Add some margin to the hamburger menu button */
.navbar-toggler {
margin-top: 10px;
margin-left: 10px;
font-weight: 600;
}
.search-box {
flex: 1;
padding: 0 5px;
display: flex;
align-items: center;
margin-bottom: 4px;
height: 50px;
border: none;
outline: none;
width: 70%;
align-items: center; /* Align items vertically in the center */
justify-content: center; /* Center items horizontally */
}
.icon-container {
margin-right: 2px; /* Adjust the margin as needed */
}
/* Additional styling for search-input and location-input as needed */
.search-input,
.location-input {
flex: 1;
border: none;
padding: 0 5px;
font-size: 13.5px;
background-color: transparent;
width: 80%;
outline: none;
height: 40px;
}
.search-button {
background-color: #28587B;
color: white;
font-weight: 500;
border: none;
padding: 5px 20px 10px 20px;
height: 35px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
cursor: pointer;
}
.count-badge {
background-color: #007bff; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 5px 10px; /* Adjust padding as needed */
margin-left: 5px; /* Adjust margin as needed */
}
.count-badge-green {
background-color: green; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 5px 10px; /* Adjust padding as needed */
margin-left: 5px; /* Adjust margin as needed */
}
.count-badge-orange {
background-color: orange; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 5px 10px; /* Adjust padding as needed */
margin-left: 5px; /* Adjust margin as needed */
}
.count-badge-red {
background-color: red; /* Badge background color */
color: white; /* Text color */
border-radius: 50%; /* Make it circular */
padding: 5px 10px; /* Adjust padding as needed */
margin-left: 5px; /* Adjust margin as needed */
}
.cv-score-circle {
width: 40px;
height: 40px;
border: 2px solid black;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}
.btn-check-matches {
font-size: 13px; /* Smaller font size */
background-color: #67895a;
color: #e1f2c1;
border: none; /* No border */
border-radius: 14px; /* Circular shape */
width: 100%; /* Button width */
height: 50px; /* Button height */
display: inline-block;
text-align: center; /* Center the text inside */
padding: 4px; /* No padding inside */
cursor: pointer;
font-weight: 500;
}
.btn-check-matches:hover {
background-color: #ecf2ff; /* Darker blue on hover */
}
.btn-check-matches:focus {
outline: none; /* Remove outline on focus */
}
.position-relative {
position: relative;
}
.vertical-line {
width: 2px; /* Thickness of the line */
height: 10px; /* Height of the vertical line (adjust as needed) */
background-color: #28587B; /* Color of the line */
margin: 0 auto; /* Centers the line horizontally */
}
.dropdown:hover .dropdown-menu {
display: block;
border-color: white;
background-color: white;
border: 1px solid #6c757d; /* Slightly darker border */
border-radius: 10px; /* Rounded corners */
/*box-shadow: 0 2px 5px rgba(0,0,0,0.2);*/ /* Shadow for better visibility */
box-shadow: 1px 2px 4px #28587B;
z-index: 1000; /* Ensure it appears on top of other elements */
padding: 10px 16px 16px 10px;
}
.custom-border {
border-radius: 0.5rem; /* More rounded corners */
border: 1px solid #6c757d; /* Slightly darker border */
box-shadow: 2px 2px 4px #28587B; /* Optional: Adds a subtle shadow for depth */
max-width: 90%;
}
/* Tooltip custom styling */
.tooltip-inner {
max-width: 800px; /* Ensure max-width fits your requirement */
min-width: 400px; /* Minimum width if the content is short */
white-space: pre-wrap; /* Wrap text as needed */
word-wrap: break-word; /* Avoid text overflow */
font-size: 13px; /* Optional: adjust text size */
text-align: left; /* Ensure text is aligned correctly */
background-color: white !important; /* Set a custom background color */
color: black !important; /* Set the font color */
border-radius: 5px !important;
border: 1px solid black !important;
padding: 5px 5px 5px 5px !important;
}
}
.search-box {
position: relative; /* Make the container a positioning reference for its children */
display: flex;
align-items: center; /*Vertically center the icon and input */
width: 100%;
}
.icon-container {
margin-right: 10px; /*Adjust spacing between the icon and input */
}
.location-input {
flex-grow: 1; /* Allow the input to take up available space */
padding-right: 30px; /*Add padding to avoid overlap with the clear icon */
}
#clearIconLocation, #clearIconTitlesKeywords {
position: absolute;
right: 15px; /*Position the icon to the right */
cursor: pointer;
}
/*default styling */
#filter-dropdown-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#filter-dropdown-container .col-12 {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}
/* Custom styles for dropdown */
.custom-dropdown {
font-size: 16px;
background-color: rgba(0, 0, 0, 0.2);
}
/*Location Search & TitleKeywordsSearch text box & results in home page*/
/*it is a autocomplete Jquery input box*/
.autocomplete-italic {
font-style: normal; /* Apply italic font style */
font-weight: 100;
font-size: 12.8px;
color: #727171;
letter-spacing: 1.2px;
}
.autocomplete-bold {
font-weight: bold; /* Apply bold font style */
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12.8px;
letter-spacing: 1.2px;
}
.ui-autocomplete {
position: absolute;
left: 0;
z-index: 1000;
display: none;
min-width: 160px;
padding: 0px 20px;
list-style: none;
background-color: #ffffff;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 100;
font-size: 13.5px;
letter-spacing: 1.2px;
}
.ui-menu-item > a.ui-corner-all {
display: block;
padding: 0px 20px;
clear: both;
font-weight: normal;
/*line-height: 18px;*/
color: #555555;
white-space: nowrap;
text-decoration: none;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 100;
font-size: 13.5px;
letter-spacing: 1.2px;
}
.ui-state-hover {
color: white;
text-decoration: none;
background-color: white;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
background-image: none;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 100;
font-size: 13.5px;
letter-spacing: 1.2px;
}
.ui-state-active {
color: white;
text-decoration: none;
background-color: white;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
background-image: none;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 100;
font-size: 13.5px;
letter-spacing: 1.2px;
}
.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
background: white !important;
font-weight: bold !important;
color: black !important;
border: none;
}
.ui-menu-item {
margin-top: 1px !important;
padding: 0px 10px;
}
.ui-menu-item:first-child {
margin-top: 15px !important;
}
/* Custom CSS for Toggle Buttons with Checkboxes */
.custom-toggle .btn.custom-button {
border-radius: 14px; /* Adjust the border radius as needed */
background-color: #ccc; /* Set the initial background color to grey */
cursor: pointer;
font-size: 12.5px;
font-weight: 400;
padding: 4px 10px;
}
.custom-form-check {
display: flex;
flex-direction: row;
align-items: flex-start !important;
}
.custom-toggle .btn.custom-button.active {
background-color: #ccc !important; /* Change the background color to green when checked */
border: 1px solid #4CAF50 !important;
font-size: 12.5px; /* Add a border when checked, adjust the color as needed */
}
/* Make the checkbox oval */
.custom-toggle .btn.custom-button input[type="checkbox"] {
width: 20px; /* Adjust the width as needed */
height: 20px; /* Adjust the height as needed */
border-radius: 50%; /* Set border-radius to 50% to make it circular (oval) */
margin-right: 2px;
background-color: white;
border: 1px solid green !important;
}
/* Style the checkbox when it is checked */
.custom-toggle .btn.custom-button input[type="checkbox"]:checked {
width: 20px; /* Adjust the width as needed */
height: 20px; /* Adjust the height as needed */
border-radius: 50%; /* Set border-radius to 50% to make it circular (oval) */
margin-right: 2px;
background-color: #28587B;
border: 5px solid green !important;
}
/* Style the radio button label when it is checked */
.custom-toggle-radio .btn.custom-button input[type="radio"]:checked {
width: 20px; /* Adjust the width as needed */
height: 20px; /* Adjust the height as needed */
border-radius: 50%; /* Set border-radius to 50% to make it circular (oval) */
margin-right: 2px;
background-color: green !important;
border: 1px solid green !important;
}
/* Style the radio button label when it is deselected */
.custom-toggle-radio .btn.custom-button input[type="radio"]:not(:checked) {
width: 20px; /* Adjust the width as needed */
height: 20px; /* Adjust the height as needed */
border-radius: 50%; /* Set border-radius to 50% to make it circular (oval) */
margin-right: 4px;
background-color: gray !important;
border: 1px solid green !important;
}
/* Style the radio button label when it is selected */
.custom-toggle-radio .btn.custom-button input[type="radio"]:checked + label.selected {
width: 20px; /* Adjust the width as needed */
height: 20px; /* Adjust the height as needed */
border-radius: 50%; /* Set border-radius to 50% to make it circular (oval) */
margin-right: 4px;
background-color: green !important;
border: 1px solid green !important;
}
.form-wizard-bg {
background-image: url('/images/form-wizard-bg.jpg'); /* Adjust the path and image file name as needed */
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.form-container {
background-color: white;
padding: 0px;
width: 100% !important;
align-content: start !important;
align-items: start !important;
margin-top: 20px;
margin-bottom: 50px; /* Adjust the value as needed for the desired gap */
/* border: thin solid darkgray;*/
}
.form-control {
width: 100% !important;
margin-bottom: 0px;
align-content: start !important;
align-items: start !important;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
}
/*.form-group {
text-align: left;
align-content: start !important;
align-items: start !important;
}*/
.form-control.border-bottom {
/* border-bottom: 1px dotted #333 !important;*/
border-radius: 5px;
border: 1px solid #333 !important;
width: 100%;
background: none;
font-weight: 400;
font-size: 13.5px;
}
.form-control.border-bottom:focus {
box-shadow: none;
}
/* Hide labels visually but keep them for accessibility */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.custom-select.my-custom-select {
width: 100% !important;
padding: 10px 16px;
background-color: #f0f0f0;
color: #333;
border: 1px solid black;
border-radius: 5px;
}
.bold-placeholder::placeholder {
font-weight: 400;
font-size: 13.5px;
overflow: hidden !important;
}
.custom-search-box {
margin-bottom: 0px;
width: 80% !important;
height: 35px;
border-radius: 5px;
}
.address-search-box {
width: 60% !important;
padding-bottom: 8px;
padding-top: 5px;
align-content: start !important;
align-items: start !important;
border-radius: 5px;
border: 1px solid black;
padding-left: 15px;
}
.custom-dropdown {
margin-top: 0px;
}
.country-item:hover {
cursor: pointer;
}
.col-md-1 button,
.col-md-6 input {
margin: 0;
padding-right: 30px;
padding-left: 17px;
}
/* CSS for floating labels */
.input-container {
position: relative;
margin-bottom: 10px;
width: 100%;
}
.floating-label {
position: absolute;
pointer-events: none;
left: 10px;
top: 50%;
transform: translateY(-50%);
transition: 0.2s ease all;
font-size: 13.5px;
color: #555;
}
/* Style the input fields and textareas */
.input-container input,
.input-container textarea {
border: none;
border-bottom: 1px solid #000;
width: 100%;
padding: 25px;
font-size: 13.5px;
outline: none; /* Remove the default outline */
}
/* Style the input fields and textareas when they have focus or contain text */
.input-container input:focus + .floating-label,
.input-container input:valid + .floating-label,
.input-container textarea:focus + .floating-label,
.input-container textarea:valid + .floating-label {
top: 10px;
font-size: 12.5px;
color: #000;
font-weight: 700;
}
.lbl-sm-heading {
font-size: 13px;
color: #373636;
font-weight: 700;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.lbl-md-heading {
font-size: 15px;
color: black;
font-weight: 800;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
lbl-md-heading {
font-size: 16px;
color: #373636;
font-weight: 800;
}
.lbl-xs-sm-text {
font-size: 10.5px;
color: #000;
font-weight: 400;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.red-asterisk {
color: red;
font-size: 16px;
}
#slider {
width: 100%; /* Make the slider full width of its container */
height: 10px; /* Adjust the height of the slider track */
background-color: #0d6efd;
border: solid 1px #28587B; /* Change the border color */
}
/* Customize the slider handle */
.ui-slider-handle {
border: solid 1px green !important; /* Change the handle color */
width: 10px; /* Adjust the handle width */
height: 10px; /* Adjust the handle height */
}
/* Customize the slider tooltip */
#sliderValueText {
color: #0d6efd; /* Change the text color */
font-weight: bold; /* Apply bold font style */
padding-top: 10px;
}
/* Custom CSS to add padding to the image container */
.image-container {
padding-top: 5rem; /* Adjust the padding as needed */
text-align: center; /* Center the image horizontally */
}
.icon-red {
color: red;
}
.hidden-smiley {
opacity: 0; /* Hide the smiley by default */
font-size: 24px; /* Adjust the font size */
transition: opacity 0.3s; /* Add a smooth transition effect */
}
.hidden-smiley:hover {
opacity: 1; /* Show the smiley on hover */
}
.int-code-custom-button {
border-radius: 5px; /* Adjust the border radius as needed */
background-color: white;
font-size: 12.5px;
font-weight: 400;
padding-right: 1px;
padding-left: 1px;
text-decoration: none;
color: black;
}
.int-phone-custom-box {
border-radius: 5px;
}
.job-details-container {
border-radius: 7px;
border: 1px solid lightgrey;
font-size: 13px;
font-family: 'Noto Sans',HelveticaNeue,Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: 400;
font-size: 13px;
padding: 30px 80px 30px 30px;
color: #2d2d2d;
background-color: white;
}
job-details-container-applicant {
border-radius: 7px;
border: 0px solid lightgrey;
font-size: 13px;
font-family: 'Noto Sans',HelveticaNeue,Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: 400;
font-size: 13px;
padding: 10px 20px 20px 20px;
color: #2d2d2d;
background-color: white;
}
.job-entry {
border-radius: 7px;
border: 1px solid lightgrey;
font-family: 'Noto Sans',HelveticaNeue,Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12.8px;
padding: 30px 80px 30px 30px;
color: #2d2d2d;
background-color: white;
}
.job-entry h5 {
text-transform: capitalize;
}
.clickable-job:hover {
cursor: pointer;
}
.selected {
border: 0px solid grey;
background-color: #ECF2FF;
border-radius: 7px;
padding: 30px 80px 30px 30px;
}
.job-labels {
display: inline-block;
background-color: #dfe2e8;
border: 1px solid #f0f0f0;
border-radius: 6px;
padding: 5px 5px 5px 5px;
margin-right: 5px;
color: #5c5b5b;
font-weight: 600;
font-size: 11.6px;
letter-spacing: 1px;
}
.search-result-icons {
display: inline-block;
background-color: #DCECDF;
border: 0px solid #f0f0f0;
margin-right: 5px;
margin-left: 2px;
}
.btn-pagination_link {
display: inline-block;
background-color: #ccc;
border: 1px solid #f0f0f0;
border-radius: 5px;
padding: 12px 15px 12px 15px;
color: #000;
font-weight: 600;
}
.active-page {
/* Styles for the selected page number */
background-color: #007bff;
color: #fff;
display: inline-block;
background-color: #686767;
border: 1px solid #f0f0f0;
border-radius: 5px;
padding: 12px 15px 12px 15px;
font-weight: 600;
}
.unselected-page {
/* Styles for unselected page numbers */
background-color: #ccc;
color: #000;
display: inline-block;
border: 1px solid #f0f0f0;
border-radius: 5px;
padding: 12px 15px 12px 15px;
font-weight: 600;
}
#custom-file-upload {
cursor: pointer;
}
#custom-file-upload::after {
content: 'Choose a file';
display: inline-block;
margin-left: 10px;
}
#cvFile {
display: none;
}
.LoginLandingPageHeader {
font-size: 36px;
}
.LoginLandingPageSubtitle {
font-size: 24px;
margin-top: 20px;
}
.LoginLandingPage-button-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
.LoginLandingPage-button {
width: 200px;
height: 60px;
margin: 0 10px;
border: 2px solid #28587B;
border-radius: 14px;
background-color: #28587B;
color: #ffffff;
font-size: 18px;
cursor: pointer;
}
.LoginLandingPage-disclaimer {
font-size: 12.3px;
margin-top: 20px;
}
.LoginLandingPage-checkbox-container {
margin-top: 10px;
}
#LoginLandingPage-marketing-checkbox {
margin-right: 5px;
}
.dashboard-container {
align-items: center;
justify-content: flex-start;
margin-left: 0px;
background-color: #d9e3fb;
color: black !important;
font-size: 12.5px;
padding-bottom: 120px;
}
.text-center {
text-align: center;
}
.verification-code-container {
display: flex;
justify-content: center; /* Centers input boxes horizontally */
align-items: center; /* Centers them vertically */
gap: 10px; /* Adjusts spacing between boxes */
}
.verification-code-container-1 {
display: flex;
justify-content: left;
gap: 5px; /* Adjust the spacing between boxes as needed */
}
.verification-code-box {
width: 60px;
height: 60px;
display: flex;
/*justify-content: center;
align-items: center;*/
text-align: center;
font-size: 1.5em;
border: 2px solid #ccc;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
/* Ensure consistent behavior */
line-height: normal;
padding: 0;
}
.verification-code-container input {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.error-messages {
margin-top: 1rem;
}
.button-custom {
/* Ensure button styles are consistent */
padding: 2px 6px !important;
font-size: 1em;
border: none;
border-radius: 6px;
background-color: #007bff;
color: white;
cursor: pointer;
transition: background-color 0.3s;
font-size: 12.5px;
}
.button-custom:hover {
background-color: #28587B;
}
.d-flex {
display: flex;
}
.justify-content-end {
justify-content: flex-end;
}
/*Product Information page*/
.options {
display: flex;
justify-content: space-between;
}
.option {
width: 25%;
border: 0px solid #ccc;
padding: 0px;
margin-bottom: 0px;
background-color: white;
}
.option-box {
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
padding-top: 20px;
padding-left: 0px;
padding-right: 0px;
}
.option-details {
margin-top: 10px;
}
.bundles {
/* margin-top: 10px;*/
margin-left: 20px;
/* text-align: left;*/
}
.bundle {
margin-bottom: 0px;
text-align: left;
}
.price {
font-size: 24px;
font-weight: bold;
color: #333;
}
ul {
list-style-type: none;
padding: 0;
text-align: left;
}
li {
margin-bottom: 5px;
}
input[type="checkbox"] {
margin-right: 5px;
}
.feature-list {
text-align: left;
padding: 15px;
font-size: 12.5px;
}
.planfontdetail {
padding: 6px;
font-size: 13.5px;
}
.continue-button {
background-color: #28587B;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 20px;
}
.upload-logo {
display: flex;
align-items: center;
justify-content: center;
width: 220px;
height: 220px;
border: 2px dashed #ccc;
border-radius: 14px;
text-align: center;
cursor: pointer;
}
.logo-preview {
display: none;
width: 200px;
height: 200px;
border: 0px solid #ccc;
border-radius: 14px;
overflow: hidden;
}
.logo-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.job-entry-applicant {
border-radius: 10px;
border: 0px solid lightgrey;
font-size: 13px;
font-family: 'Noto Sans',HelveticaNeue,Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: 400;
font-size: 13px;
color: #2d2d2d;
background-color: ghostwhite;
margin-top: 3em;
}
.job-entry-applicant:hover {
background-color: #f0f0f0;
}
.header-row {
background-color: #EFEFEF;
border-radius: 3px;
padding: 5px;
color: #000;
font-weight: 600;
font-size: 16px;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/**/
.hidden {
display: none;
}
.button-custom {
background-color: #28587B;
color: #fff;
padding: 2px 6px !important;
border-radius: 6px;
border: 0px solid lightgrey;
font-size: 12.5px;
font-family: 'Noto Sans',HelveticaNeue,Arial, Helvetica, sans-serif;
font-weight: 600;
width: 180px;
height: 35px;
}
.login-button-custom {
background-color: #28587B;
color: #fff;
padding: 2px 6px !important;
border-radius: 6px;
border: 0px solid lightgrey;
font-size: 12.5px;
font-family: 'Noto Sans',HelveticaNeue,Arial, Helvetica, sans-serif;
font-weight: 600;
width: 100%;
height: 34px;
}
button[type="button"].button-custom-back {
padding: 0px !important;
border: none !important;
background-color: white !important;
color: #0d6efd !important;
cursor: pointer;
outline: none !important;
}
.button-custom-currency {
background-color: #28587B;
color: white !important;
border-radius: 14px;
border: 0px solid lightgrey;
font-size: 13px;
font-family: 'Noto Sans',HelveticaNeue,Arial, Helvetica, sans-serif;
font-weight: 600;
width: 117px;
height: 38px;
}
/* Updated CSS for tabs */
#myTabs .nav-link {
border: 0;
font-size: 13px;
font-weight: 400;
position: relative;
padding-bottom: 20px; /* Adjust padding as needed */
padding-top: 20px; /* Remove top padding */
font-family: 'Noto Sans',HelveticaNeue,Arial, Helvetica, sans-serif;
}
#myTabs .nav-item:first-child .nav-link {
border-top-left-radius: 10px;
}
#myTabs .nav-item:last-child .nav-link {
border-top-right-radius: 10px;
}
#myTabs .nav-link.active {
border-color: transparent;
}
#myTabs .nav-link.active::after {
content: "";
position: absolute;
bottom: -6px;
left: 0;
width: 100%;
height: 4px; /* Thickness of underline */
background-color: #28587B; /* Color of underline */
font-family: 'Noto Sans',HelveticaNeue,Arial, Helvetica, sans-serif;
}
#myTabs .nav-link.active::before {
content: "";
position: absolute;
bottom: -12px; /* Adjust as needed */
left: calc(50% - 10px); /* Center the arrow */
border-width: 6px 6px 0;
border-style: solid;
border-color: red transparent transparent;
}
#myTabs.nav.nav-tabs {
border-bottom: solid 1px !important; /* Remove the grey line */
padding-top: 0px !important;
padding-bottom: 0px !important;
color: #ECF2FF !important;
}
.tab-links {
margin-bottom: 20px;
}
.tab-links a {
display: inline-block;
padding: 10px 10px 10px 10px;
margin-right: 10px;
background-color: #f0f0f0;
color: #333;
text-decoration: none;
border-radius: 10px 10px 0 0;
}
.tab-links a.active-tab {
background-color: #007bff;
color: #fff;
}
.pagination {
margin-top: 20px; /* Add some spacing above pagination */
}
.pagination .page-item {
display: inline-block;
margin-right: 5px; /* Add some spacing between pagination links */
}
.pagination .page-link {
background-color: #ccc;
border: 1px solid #f0f0f0;
border-radius: 5px;
padding: 10px 14px;
color: #000;
font-weight: 600;
}
.pagination .page-link.active {
background-color: #007bff; /* Color for the active page */
color: #fff;
border-color: #007bff;
}
.search-container {
max-width: 400px; /* Adjust as needed */
position: relative;
}
.icon-container-applicant {
padding: 10px;
background-color: white;
cursor: pointer;
}
.search-input-applicant {
flex: 1;
border: none;
outline: none;
padding: 10px;
font-size: 16px;
}
.search-button-applicant {
border: none;
background-color: #007bff;
color: white;
padding: 10px 20px;
cursor: pointer;
}
/* Clearfix to ensure proper wrapping of messages */
.clearfix::after {
content: "";
clear: both;
display: table;
}
.no-message {
color: #666;
font-style: italic;
}
textarea.custom-textarea {
border-radius: 12px; /* Adjust the border-radius to make it oval */
height: 100px; /* Adjust the height to make the textarea smaller */
width: 50%; /* Adjust the width to fit layout */
max-width: 70%; /* Ensure the textarea doesn't exceed its container */
background-color: #f0f0f0; /* White for outgoing messages */
padding: 10px; /* Add padding for better visual appearance */
margin-bottom: 10px; /* Add margin for spacing */
border: 1px solid #ccc; /* Add a border for better visibility */
}
/* If you want to align text within the textarea */
textarea.custom-textarea:focus {
outline: none; /* Remove the default focus outline */
}
.message-heading {
font-size: 20px;
margin-bottom: 10px;
}
.message-container {
padding: 10px;
/*overflow-y: auto; */
max-width: 75%;
}
.message {
display: flex;
flex-direction: column;
max-width: 100%; /* Limiting message width */
clear: both;
margin-bottom: 15px;
position: relative;
font-size: 13px;
font-weight: 400;
padding: 8px 12px;
border-radius: 12px;
font-family: 'Noto Sans', HelveticaNeue, Arial, Helvetica, sans-serif;
}
.incoming {
background-color: #d0eec0; /* Light green for incoming messages */
float: right;
color: black;
}
.outgoing {
background-color: #ccc; /* White for outgoing messages */
float: left;
border: 1px solid #ccc;
color: black;
border-radius: 12px;
}
.timestamp {
font-size: 12px;
margin-top: 5px;
color: #262424;
float: right;
margin-right: 5px; /* Adjust margin for better alignment */
}
.attachments {
margin-top: 5px;
background-color: #f0f0f0;
padding: 5px;
border-radius: 5px;
}
.attachments ul {
list-style-type: none;
padding: 0;
}
.attachments ul li {
margin-bottom: 5px;
}
.oval-box {
background-color: #d0eec0; /* Green background color */
border-radius: 13.5px; /* Adjust the border-radius to create an oval shape */
padding: 12px; /* Add padding to the box */
margin-bottom: 12px; /* Add margin to separate each box */
}
.time-select {
width: 200px; /* Adjust the width as needed */
}
.current-day {
background-color: lightblue; /* Color for the current day */
}
.selected-day {
background-color: #dddcdc; /* Or any other color you prefer */
}
.calendar-icon-text-container {
display: flex;
align-items: center;
}
.calendar-icon-text-container a {
display: flex;
align-items: center;
text-decoration: none;
}
.calendar-icon-text-container i {
margin-right: 5px; /* Adjust as needed */
}
.event {
border: 1px solid black; /* Light border */
border-radius: 8px; /* Rounded corners */
padding: 12px; /* Padding for spacing */
background-color: #cce8cc; /* Light background color */
margin-bottom: 5px; /* Margin between events */
}
.clockpicker-popover {
z-index: 999999; /* Adjust z-index to ensure the clock is displayed on top */
/* Additional customizations */
background-color: #fff; /* Background color of the clock popover */
border: 1px solid #ccc; /* Border color of the clock popover */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Box shadow for the clock popover */
}
.clockpicker-dropdown {
width: 200px; /* Adjust the width of the clock dropdown */
}
.clockpicker-span {
color: #333; /* Font color of the clock numbers */
}
.clockpicker-plate {
background-color: #f8f9fa; /* Background color of the clock plate */
border: 1px solid #ccc; /* Border color of the clock plate */
}
.clockpicker-canvas {
background-color: #fff; /* Background color of the clock canvas */
}
.clockpicker-tick {
background-color: #333; /* Color of the ticks on the clock */
}
.clockpicker-dial {
background-color: #fff; /* Background color of the clock dial */
border: 1px solid #ccc; /* Border color of the clock dial */
}
.clockpicker-canvas line {
stroke: #333; /* Color of the lines on the clock */
}
.clockpicker-canvas .clockpicker-tick {
background-color: #333; /* Color of the ticks on the clock */
}
.clockpicker-canvas .clockpicker-tick.active {
background-color: #555; /* Color of the active tick on the clock */
}
.error-message {
color: red;
}
.question-row {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.question-text {
flex: 1;
}
.toggle-switch {
width: 40px;
height: 20px;
position: relative;
margin-left: 10px;
}
.toggle-switch input[type="checkbox"] {
display: none;
}
.toggle-switch label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red; /* Off color */
border-radius: 14px;
cursor: pointer;
transition: background-color 0.3s;
}
.toggle-switch label::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background-color: white;
border-radius: 50%;
transition: left 0.3s;
}
.toggle-switch input:checked + label {
background-color: #28587B; /* On color */
}
.toggle-switch input:checked + label::after {
left: calc(100% - 18px);
}
.toggle-switch label.checked::after {
left: calc(100% - 18px);
}
.category-header {
background-color: #f1f1f1;
padding: 5px;
cursor: pointer;
}
.accordion-btn {
float: left;
margin-right: 10px;
background-color: #ddd;
color: #333;
border: none;
cursor: pointer;
}
.question-category {
padding: 10px;
display: none;
}
.active-screener-question-category {
color: #2456a6; /* Change to the color you want for the active header */
}
.custom-select {
position: relative;
margin-bottom: 0.5rem; /* Reduced margin */
}
.select-button {
width: 160px; /* Adjust width */
height: 40px; /* Adjust height */
font-size: 12.5px; /* Adjust font size */
background-color: #ECF2FF;
padding: 0.5rem 1rem;
border: 1px solid #caced1;
border-radius: 12px;
cursor: pointer;
display: flex;
align-items: center;
position: relative; /* To position arrow absolutely */
justify-content: space-between; /* Ensures items are spaced out */
}
.selected-value {
text-align: left;
font-size: 12.5px; /* Adjust font size */
flex-grow: 1; /* Take up remaining space */
white-space: nowrap; /* Prevent line break */
overflow: hidden; /* Prevent overflow */
text-overflow: ellipsis; /* Add ellipsis for long text */
}
.remove-filter {
margin-right: 15px; /* Adjust this value to bring X closer */
cursor: pointer;
font-weight: bold;
color: red;
display: none; /* Initially hidden */
}
.arrow {
position: relative;
margin-left: auto; /* Pushes the arrow to the right end */
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #000;
transition: transform ease-in-out 0.3s;
}
.select-dropdown {
position: absolute;
list-style: none;
/*width: 150px;*/ /* Adjust width */
/*width: 50%;*/ /* Adjust width */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
background-color: #fff;
border: 1px solid #caced1;
border-radius: 12px;
padding: 0;
margin-top: 10px;
max-height: 200px;
overflow-y: auto;
transition: 0.5s ease;
z-index: 1000; /* Ensure dropdown appears above other elements */
top: 100%; /* Position dropdown below select button */
left: 0; /* Align dropdown with select button */
visibility: hidden; /* Hide dropdown by default */
opacity: 0; /* Hide dropdown by default */
}
.select-dropdown li {
padding: 0.5rem 1rem;
cursor: pointer;
width: 100%; /* Adjust width */
}
.select-dropdown li:hover {
background-color: #f2f2f2;
width: 100%; /* Adjust width */
}
.select-dropdown li:focus {
outline: none;
background-color: #dfdfdf;
width: 100%; /* Adjust width */
}
.select-dropdown::-webkit-scrollbar {
width: 5px;
}
.select-dropdown::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 25px;
width: 100%; /* Adjust width */
}
.select-dropdown::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 25px;
width: 100%; /* Adjust width */
}
.custom-select.active .arrow {
transform: rotate(180deg);
}
.custom-select.active .select-dropdown {
opacity: 1;
visibility: visible;
transform: scaleY(1);
width: 100%; /* Adjust width */
}
.dropdown-container {
display: none;
}
.select-dropdown li.selected {
background-color: #ECF2FF;
width: 100%; /* Adjust width */
}
.other-filters {
display: none;
}
.default-value {
font-weight: bold;
color: #007bff; /* Example color */
}
.socialMediaLogo {
width: 16px;
height: 16px;
}
.youTubeLogo {
width: 24px;
height: 16px;
}
.dotLogo {
width: 24px;
height: 24px;
}
.searchIconOpacity {
opacity: 0.7;
}
.clearIcon {
color: red;
}
.displayNone {
display: none;
}
.marginRightAndColor {
margin-right: 5px;
color: #28587B;
}
.btn-radio {
display: inline-block;
position: relative;
cursor: pointer;
font-size: 18px;
padding: 15px 20px;
border: 2px solid #007bff;
border-radius: 5px;
margin: 10px 0;
width: 100%;
text-align: center;
transition: all 0.3s;
background-color: #F1F1F1;
}
.btn-radio input {
display: none;
}
.btn-radio .checkmark {
display: none;
font-size: 24px;
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
color: #28587B;
}
.btn-radio .text {
display: inline-block;
margin-left: 10px;
}
.btn-radio:hover {
background-color: #F1F1F1;
border-color: #0056b3;
}
.btn-radio input:checked + .checkmark {
display: inline-block;
}
.btn-radio input:checked + .checkmark + .text {
font-weight: bold;
color: #28587B;
}
.btn-link {
color: #ffffff !important; /* Set text color to white for better contrast */
text-decoration-line: none;
background-color: #2456a6; /* Set a blue background color */
border: none;
padding: 10px 20px; /* Increase padding for better spacing */
cursor: pointer;
font-weight: 600;
border-radius: 6px;
margin: 0px 0;
align-items: center;
justify-content: center;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.btn-link:hover {
background-color: #edf3ff; /* Darken the background color on hover */
color: #000000 !important; /* Keep text color white on hover */
text-decoration: none; /* Remove underline on hover */
font-weight: 600;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.custom-dropdown-menu {
display: none; /* Start hidden */
position: absolute; /* Position relative to parent */
background-color: #ffffff; /* Background color */
border: 1px solid #dddddd; /* Border color */
border-radius: 4px; /* Rounded corners */
box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Shadow for better visibility */
z-index: 1000; /* Ensure it appears on top of other elements */
max-height: 300px; /* Limit the height */
overflow-y: auto; /* Add scroll if needed */
width: 50%; /* Match the width of the input */
}
.custom-dropdown-menu .dropdown-item {
padding: 6px 10px; /* Spacing inside items */
cursor: pointer; /* Pointer cursor on hover */
border-bottom: 1px solid #eeeeee; /* Separator line */
}
.custom-dropdown-menu .dropdown-item:hover {
background-color: #f1f1f1; /* Background color on hover */
}
#paymentDropdownContainer {
display: flex;
align-items: center;
min-height: 40px;
position: relative;
}
.custom-select {
position: relative;
margin: 1px 1px;
width: auto;
margin-top: 8px;
}
/*.select-button {
position: relative;
margin: 10px 10px;
width: auto;
}*/
.dropdown-connector {
width: 22px;
height: 6px;
flex-shrink: 0;
margin: 0 0px;
align-self: center;
}
/* Custom Dropdown Styles */
.dropdown-custom {
position: relative;
border: 1px solid lightgray;
border-radius: 8px;
padding: 10px 0;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
background-color: #ffffff;
margin-top: 8px;
min-width: 80%;
}
/* Horizontal line at the top of the dropdown */
.dropdown-custom::before {
content: "";
position: absolute;
top: -8px; /* Position the line above the dropdown */
left: 0;
/*width: 10%;
height: 2px;*/ /* Thickness of the line */
/*background-color: lightgray;*/ /* Color of the line */
z-index: 1;
}
.dropdown-custom .dropdown-item {
padding: 10px 18px;
transition: background-color 0.2s ease;
}
.dropdown-custom .dropdown-item:hover {
background-color: #f5f5f5; /* More prominent hover color */
}
/* Centering the logo */
.navbar-brand {
left: 50%;
position: absolute;
transform: translateX(-50%);
}
/* Remove line under the navbar */
nav.navbar {
border-bottom: none;
box-shadow: none;
}
.nav-link.dropdown-toggle::after {
display: none !important;
}
.italic-quote {
color: #5e3803;
font-size: 13px;
font-weight: 400;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.expressionBy-bold {
color: black;
font-size: 12px;
font-weight: 600;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: italic;
}
#navbar-toggler-icon {
/*margin-left: 5px;*/
}
.navbar-toggler-icon {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"%3E%3Cpath stroke="%2328587B" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/%3E%3C/svg%3E');
/* margin-left: 5px;*/
}
.payment-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
margin-top: 20px;
}
.grid-header {
background-color: #f8f9fa;
padding: 10px;
border-radius: 5px;
display: contents;
font-size: 12px;
font-weight: 600;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.grid-header span, .grid-row span {
text-align: left; /* Left-aligned */
}
.grid-row {
display: contents;
padding: 10px 0;
}
.grid-row span {
padding: 10px;
border-bottom: 1px solid #e0e0e0;
}
.grid-row span a {
text-align: center;
display: inline-block;
width: 100%;
}
.grid-empty {
grid-column: span 12;
text-align: center;
padding: 20px 0;
font-size: 1.2em;
color: #777;
}
.grid-header span {
padding: 10px;
}
.hidden {
display: none;
}
#job-details-container-long {
padding-top: 1px !important; /* Optional: Add space at the top */
height: auto !important; /* Ensure it automatically adjusts based on content */
overflow: visible !important; /* Prevent scroll bars by ensuring overflow is visible */
max-height: none !important; /* Remove any height constraints */
min-height: 0 !important; /* Prevent minimum height constraints (if set elsewhere) */
padding-bottom: 10px !important; /* Optional: Add space at the bottom */
}
/* Remove background color for active tab */
.nav-pills .nav-link.active {
background-color: transparent !important; /* Remove background */
border: none; /* Optionally remove the border as well */
}
/* Optional: Customize the active tab's text color */
.nav-pills .nav-link.active {
color: #000 !important; /* Set text color */
}
.navbar-light .navbar-nav .nav-link {
color: black !important; /* Also customize other properties if needed */
background-color: white !important;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 500;
}
.dropdown-label {
display: block;
margin-bottom: 5px;
font-weight: bold;
font-size: 14px;
color: #333;
}
.large-icon {
font-size: 26px;
}
.text-on-hr {
display: inline-block;
position: relative;
top: 5px; /* Adjust this value to sit the text flush with the
*/
background-color: #fff; /* Match page background */
padding: 0 0px; /* Optional: Add spacing around the text */
}
/* Styling the question mark icon (User icon in this case) */
.question-icon {
cursor: pointer;
font-size: 24px;
color: black;
margin-left: 10px;
vertical-align: middle;
}
/* Optional: Make the tooltip arrow more subtle */
.tooltip-arrow {
border-top-color: rgba(0, 0, 0, 0.2); /* Adjust the color for a more subtle effect */
}
/* Optional: Styling for tooltip hover */
.tooltip:hover .tooltip-inner {
background-color: white;
color: black;
}
.attachments ul {
list-style-type: none; /* Remove default bullet points */
padding: 0; /* Remove default padding */
margin: 0; /* Remove default margin */
}
.redact-file-link {
text-align: right; /* Align the text to the right */
padding-left: 15px; /* Add padding on the left for better visibility */
font-size: 0.9em; /* Make the font slightly smaller */
}
.redact-file-link a {
color: red; /* Optional: Use a color for better visibility */
text-decoration: none; /* Remove underline */
}
.redact-file-link a:hover {
text-decoration: underline; /* Add underline on hover for accessibility */
}
.highlight-dropdown {
border: 2px solid red; /* Red border to draw attention */
border-radius: 12px; /* Optional: Rounded corners */
box-shadow: 0 0 4px rgba(255, 0, 0, 0.8); /* Optional: Glow effect */
transition: border 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}
.dropdown-alert {
display: none; /* Hidden by default */
position: absolute;
color: black; /* Dark text */
border: 2px solid red;
border-radius: 12px;
font-size: 11px;
z-index: 9999; /* Ensure it appears above other elements */
margin-top: 11px;
background-color: white;
padding: 5px 10px;
font-size: 10px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
white-space: nowrap;
}
/* Ensure the dropdown container is positioned correctly */
.country-dropdown-container {
position: relative;
}
.country-dropdown-content {
display: none; /* Hide by default */
position: absolute;
top: 100%; /* Align below the trigger link */
left: 0;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 10px;
z-index: 1000;
min-width: 200px;
border-radius:12px;
}
.country-dropdown-content a {
text-decoration: none;
color: #000;
display: block;
padding: 5px 10px;
}
.country-dropdown-content a:hover {
background-color: #f0f0f0;
}
/* Show dropdown content on hover */
.country-dropdown-container:hover .country-dropdown-content {
display: block;
}
#messagesTab:focus {
outline: none; /* Removes focus outline for messagesTab */
box-shadow: none; /* Removes additional focus styling */
}
.custom-gradient-navbar {
display: flex;
align-items: center;
justify-content: space-between;
}
.expression-of-the-day {
flex: 1;
text-align: center;
}
.italic-quote {
font-style: italic;
}
.expressionBy-bold {
font-weight: bold;
}
.btn-primary{
background-color:#28587B !important;
}
.cookie-preferences-modal {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
/*background: rgba(44, 62, 80, 0.95);*/ /* Slight transparency */
background: white;
color: black;
padding: 15px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.4s ease-in-out;
transform: translateY(100%);
gap: 20px;
font-size: 11.5px;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
flex-wrap: wrap; /* Allows wrapping on small screens */
}
.cookie-banner-active {
transform: translateY(0);
}
.cookie-preferences-modal button {
background-color: #27ae60;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
transition: background 0.3s ease-in-out, transform 0.2s;
}
.cookie-preferences-modal .decline-policy {
background: #e74c3c;
color: black;
}
.cookie-preferences-modal .decline-policy:hover {
background: #c0392b; /* Slightly darker red */
color: black;
transform: scale(1.05); /* Slight zoom effect */
}
.cookie-preferences-modal .accept-policy {
background: #19ec19;
color: black;
}
.cookie-preferences-modal .accept-policy:hover {
background: #19ec19; /* Slightly darker red */
color: black;
transform: scale(1.05); /* Slight zoom effect */
}
.cookie-preferences-modal .close-banner {
position: absolute;
top:3px;
left: 95%;
background: none;
color: white;
font-size: 13px;
border: none;
cursor: pointer;
padding: 1px;
}
.cookie-preferences-modal button:hover {
background-color: #2ecc71;
transform: scale(1.02);
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.cookie-preferences-modal a {
color: #f1c40f;
text-decoration: underline;
}
.cookie-preferences-modal a:hover {
color: #ffeb99;
}
.initials {
display: inline-flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
border-radius: 50%; /* Makes it a circle */
background-color: #007bff;
color: white; /* Text color */
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
}
.alert-danger {
background-color: #F8D7DA !important;
color: #28587B !important;
font-size: 13px !important;
font-weight: 500;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
border: 1px solid #CD5C5C;
border-radius: 5px;
padding: 12px;
}
.container:last-child, .row:last-child, .col-md-8:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.browser-language-alert {
padding: 10px;
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
border-radius: 5px;
position: relative;
margin: 10px 0;
font-size: 13.5px;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
height:10%;
text-align:center;
justify-items:center;
align-content:center;
align-items:center;
}
.browser-language-alert a {
font-size: 13.5px;
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
color: #007bff;
text-decoration: none;
text-align: center;
justify-items: center;
align-content: center;
align-items: center;
}
.browser-language-alert a:hover {
text-decoration: underline;
}
.browser-language-alert .close {
position: absolute;
right: 10px;
top: 5px;
background: none;
border: none;
font-size: 2rem;
cursor: pointer;
color: #721c24;
}
.browser-language-alert .close:hover {
color: #000;
}
.success-icon {
font-size: 40px;
color: #28a745;
animation: fadeInBounce 1s ease-in-out;
}
@keyframes fadeInBounce {
0% {
opacity: 0;
transform: scale(0.5);
}
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.a-subfooter-link {
color: #6f6e6e;
font-size: 12px;
font-weight: 600;
text-decoration: none !important;
margin-left: 20px;
font-style: italic;
}
.a-subfooter-link:hover {
color: #3e3e3e;
text-decoration: none !important; /* Reinforce no underline on hover */
}
.close {
position: absolute !important;
top: 10px !important;
right: 10px !important;
}
.container {
min-height: 20px !important;
}
#logo-placeholder {
width: 240px;
height: 45px;
background: url('/Images/Jobsophy-new-logo-3.webp') no-repeat center;
background-size: contain;
}
/* Optional Custom CSS */
li.m-lg-4 {
margin-left: 1.5rem; /* Adds a bit of space between tabs and the dropdown */
margin-right: 1.5rem;
}
li.m-lg-4 .form-label {
font-weight: bold;
margin-bottom: 0.5rem; /* Adjust space between label and select */
}
/* Custom width for the dropdown */
li.m-lg-4 .form-select {
width: 200px; /* adjust the width */
max-width: 100%; /* Prevent it from exceeding the container width */
padding: 0.375rem 0.75rem; /* Padding for a consistent look */
font-size: 1rem; /* Adjust font size */
}
.table-container {
width: 100%;
}
.job-list {
min-height: 400px; /* Prevents layout shift */
display: flex;
flex-direction: column;
gap: 2px;
}
/* Increase the touch area for accordion headers */
.accordion-header {
cursor: pointer;
font-size: 14px; /* Increase font size for better readability */
padding: 0px 0px; /* Increase padding to make it easier to tap */
display: block;
min-height: 28px; /* Ensure minimum touch target size */
}
/* Add more spacing between links */
ul.list-unstyled li {
margin-bottom: 6px; /* Ensure 6px spacing between items */
}
/* Make sure links have enough padding */
ul.list-unstyled li a {
display: inline-block;
padding: 3px 0; /* Makes links easier to tap */
min-height: 3px; /* Minimum touch area */
}
/* Adjust country dropdown touch targets */
.country-dropdown-container a {
padding: 4px 10px;
display: block;
min-height: 4px; /* Ensures better touch target size */
}
#video {
background-color: #000; /* Black background */
border: 2px solid #ccc; /* Light gray border */
border-radius: 8px;
text-align:center;
align-content:center;
justify-content:center;
}
.spinner-border {
width: 2rem;
height: 2rem;
}
#uploadingIndicator p {
font-weight: 500;
margin-top: 10px;
}
.mt-custom {
margin-top: 3.25rem; /* Adjust the value as needed */
}
.mb-custom {
margin-bottom: 3.25rem; /* Adjust the value as needed */
}
.autocomplete-item {
display: flex;
align-items: center;
padding: 8px 12px;
line-height: 1.3;
}
.autocomplete-item .icon {
margin-right: 10px;
color: #6c757d;
flex-shrink: 0;
}
.text-content {
flex: 1;
min-width: 0;
}
.main-text {
font-weight: 500;
}
.sub-text {
color: #6c757d;
font-size: 0.85em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.separator {
margin: 0 12px;
border: 0;
border-top: 1px solid #f0f0f0;
}
.text-gold-dark {
color: #b8860b !important;
}
.textarea-left-align {
text-align: left;
}
.mt-custom {
margin-top: 3.80rem; /* Adjust the value as needed */
}
.mb-custom {
margin-bottom: 3.80rem; /* Adjust the value as needed */
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
even-row {
background-color: #e8f1fa;
}
.odd-row {
background-color: #ffffff;
}
.dropdown-fix-right {
right:-5px !important;
left: auto !important;
transform: translateY(0px);
transform: translateX(2px);
}
#editor {
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
}
/* Custom DatePicker Styling */
.ui-datepicker {
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
background: #fff;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 10px;
}
/* Target month/year dropdowns explicitly */
.ui-datepicker .ui-datepicker-title select {
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-size: 14px;
border: 1px solid #ddd;
border-radius: 4px;
padding: 3px;
margin: 0 2px;
background: #fff;
color: #333;
}
/* Hide default dropdown arrows */
.ui-datepicker .ui-datepicker-title select::-ms-expand {
display: none;
}
.ui-datepicker .ui-datepicker-title select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 5px center;
background-size: 12px;
padding-right: 20px;
}
.ui-datepicker-header {
background: #f8f9fa;
border: none;
border-radius: 5px 5px 0 0;
padding: 8px 0;
}
.ui-datepicker-title {
font-weight: bold;
color: #333;
}
.ui-datepicker-prev, .ui-datepicker-next {
cursor: pointer;
top: 8px;
}
.ui-datepicker-prev:hover, .ui-datepicker-next:hover {
background: #e9ecef;
border-radius: 3px;
}
.ui-datepicker-calendar th {
color: #6c757d;
font-weight: normal;
padding: 5px;
}
.ui-datepicker-calendar td {
padding: 2px;
}
.ui-datepicker-calendar td a {
text-align: center;
padding: 5px;
border-radius: 3px;
transition: background 0.2s;
}
.ui-datepicker-calendar td a:hover {
background: #e9ecef;
}
.ui-datepicker-calendar .ui-state-active {
background: #007bff;
color: white;
font-weight: bold;
}
.date-picker-container {
position: relative;
display: inline-block;
}
.date-picker {
padding-right: 25px; /* Space for the clear button */
}
.btn-clear-date {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
color: #999;
font-size: 16px;
padding: 0;
opacity: 0; /* Hidden by default */
transition: opacity 0.2s;
}
.btn-clear-date:hover {
color: #333;
}
/* Show the clear button only when input has a value */
.date-picker:not(:placeholder-shown) + .btn-clear-date {
opacity: 1;
}
/* Replace PNG arrows with inline SVG */
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
display: none; /* Hide default text */
}
.ui-datepicker .ui-datepicker-prev:before {
content: "\21D0";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.ui-datepicker .ui-datepicker-next:before {
content: "\21D2";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.btn-clear-date {
position: absolute;
right: 25px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
opacity: 0;
transition: opacity 0.3s;
padding: 0 5px;
font-size: 16px;
color: #999;
}
.btn-clear-date:hover {
color: #333;
}
/* Prevent link from swallowing all taps */
.job-entry .stretched-link {
pointer-events: none;
}
.job-entry .stretched-link * {
pointer-events: auto;
}
/* 3-dot menu stays interactive */
.job-entry .three-dot-menu,
.job-entry .three-dot-menu *,
.job-entry .three-dot-menu i,
.job-entry .three-dot-menu button {
pointer-events: auto !important;
z-index: 20;
position: relative;
}
/* Optional: visual feedback for entire card on hover/tap */
.job-entry {
transition: background-color 0.2s;
}
.job-entry:hover {
background-color: #f8f9fa; /* subtle gray for feedback */
cursor: pointer;
}