/* Smooth scrolling effect */
html {
  scroll-behavior: smooth;
}

body {
  font-size: 1.25rem;
}

/* Fix the footer at the bottom of the screen */
footer {
  position: fixed;
  left: 0;
  bottom: -50px;
  width: 100%;
}


.btn {
    border-radius: 10px;
}

.btn.btn-primary {
    background: #0073e6;
}

.btn.btn-primary:hover, .btn.btn-primary:focus {
    background: #0073e6;
}

 /*b, strong {
    font-weight: 400;
} */

 /* Job Highlights Section */
.section-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.section-title,
.highlight-item,
.info-item,
.job-description-content,
.recruiter-info-content,
.job-details {
  margin-bottom: 15px; /* Increase margin between sections */
}


.highlight-label {
    font-weight: 700;
    color: #000;
    margin-right: 6px;
    display: inline-block;
    width: 100px; /* Adjust the width as needed */
}

.highlight-value {
    color: #000;
}

/* Individual Information Items */
.info-item {
    margin-bottom: 10px;
}

.info-label {
    font-weight: 700;
    color: #000;
    margin-right: 8px;
    display: inline-block;
    width: 120px; /* Adjust the width as needed */
}

.info-value {
    color: #333;
}

/* Job Description Content */
.job-description-content {
    line-height: 1.6;
    color: #333;
}

.job-description-content p {
    margin-bottom: 10px;
}

/* Recruiter Information Content */
.recruiter-info-content {
    line-height: 1.6;
    color: #333;
}

.recruiter-info-content p {
    margin-bottom: 10px;
}

.recruiter-info-content strong {
    color: #000;
}


    .cardFooter {
        border-top: 1.5px solid #f4f4f5;
        display: flex;
        justify-content: space-between;
     
    }
    
    .cardFooter .placeAtLeft {
        display: flex;
    }
    
    .cardFooter .menuContainer {
        align-items: center;
        display: flex;
        display: none;
    }
    
    .cardFooter .menuContainer .circle {
        background: gray;
        border-radius: 2px;
        height: 5px;
        margin-left: 2px;
        width: 5px;
    }
    
    .cardFooter .placeAtLeft .jobAddedTime {
        align-items: center;
        display: flex;
       font-size: 1.25rem;
    }
    
    .cardFooter .placeAtLeft .jobAddedTime .timeText {
        color: #000;
        margin-left: 6px;
        font-weight:600;
    }
    
     .cardFooter .placeAtRight {
        align-items: center;
        display: flex;
        gap: 8px;
    }
    
     .cardFooter .placeAtRight .cardApplyLabel {
        align-items: flex-start;
        background: #53f0d1;
        border-radius: 20px;
        color: #2ba682;
        display: inline-flex;
       font-size: 1.25rem;
        gap: 4px;
        line-height: 16px;
        padding: 4px 8px 4px 4px;
		margin-top: 12px;
    } 
    
    .cardContainer .bigFontSize {
       font-size: 1.25rem;
    }  
    
    .mqfiseo-skill:before {
        content: "";
    }
    [class*=" mqfiseo-"]:before, [class^=mqfiseo-]:before {
        speak: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        display: inline-block;
        font-family: fonticonsseo;
        font-style: normal;
        font-weight: 400;
    } 
    
    .badge {   
        color: #777585;   
        background-color: #f4f4f5;    
        font-size: 10px;
        font-weight: 400;
    }
    
    .selected-job-item {
        border: 2px solid #007bff; /* Change the border style as needed */
        border-radius: 10px; /* Adjust the border radius if desired */
    }


    
	/* Custom CSS for active pagination link */
	  .page-item .page-link.active {
    	  background-color: #000; /* Change the background color to your preferred color */
    	  color: #fff; /* Change the font color to your preferred color */
    	  pointer-events: none; 
	  }
	  /* Custom CSS for hover effect on pagination link */
	  .page-item .page-link:hover {
    	  background-color: #a0a4a7; /* Change the background color to your preferred color */
    	  color: #fff; /* Change the font color to white */
	  }
  
	.job-list{
		width: 30%;
	}
	
   .job-list {
	  border-radius: 0px;
	  box-shadow: 0 0 0px rgba(0, 0, 0, 0.0);
	  padding: 20px;
	  position: fixed;
	  top: 140px;
	  left: 5px;
	  overflow-y: auto;
	  height: calc(90vh - 90px); /* Adjusted height calculation */
	  scrollbar-width: thin; /* For Firefox */
	  z-index:9;
	}

	/* Hide scrollbar for Webkit browsers (Chrome, Safari) */
	.job-list::-webkit-scrollbar {
	  width: 2px; /* Adjust the width of the scrollbar */
	}

	
    .job-list ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .cardHead {
        border-bottom: 1.5px solid #f4f4f5;
        display: flex;
        gap: 10px;
        justify-content: space-between;
        padding: 0px 14.5px 12px 0px;
    	cursor: pointer;
    }
    
    .cardHead .headerContent {
        display: flex;
        gap: 8px;
        justify-content: flex-start;
    }
    
    .cardHead .headerContent .infoSection {
        display: flex;
        flex-direction: column;
        justify-content: center;
        word-break: break-word;
    }
    
    .cardHead .headerContent .infoSection .jobTitle a{
        color: #1a0dab;
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 4px;
        font-weight: 800;
        text-decoration: none;
    }
    
    .headerContent .infoSection>h3 {
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
    }
    

    
    /*.cardHead .headerContent .infoSection .companyName {
        color: #777585;
    }*/


    .job-item {
      cursor: pointer;  
      margin-bottom: 15px;
      padding: 20px;
      border-radius: 10px;
      transition: background-color 0.3s;
      background-color: #fff;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transform: scale(1);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
	.job-item {
		width:100%; /* Set a fixed width for the job items */
		box-sizing: border-box; /* Include padding and border in the element's total width */
		margin-bottom: 20px; /* Adjust margin as needed */
	}

	.job-box h3 {
		color: #007bff;
		margin-bottom: 10px;
		word-wrap: break-word; /* Add this line to make the text wrap */
	}

    .job-item:hover {
       background-color: #f1f1f1;
    }

    .job-item.active {
      background-color: #007bff0f;
		color: #000000f2;
    }

    .job-box {
      flex-grow: 1;
    }

 
	#resultJobDetail{
		margin-left:100px;
	}
	
	.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
		font-weight: 600;
	}
	 
	 h2 {
         font-size: 1.25rem;
        line-height: 48px;
     }
	
	h3 {
	    font-size: 1.25rem;
	}

    .job-box p {
      margin: 5px 0;
      color: #000;
    }
	
	.job-details-header {
	    margin-top: 65px;  
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff; /* Add your desired background color */
		padding: 10px; /* Add padding as needed */
		border-top-left-radius: 10px; /* Round only the top-left corner */
		border-top-right-radius: 10px; /* Round only the top-right corner */
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add box shadow */
	}
	
	.company-info {
		display: flex;
		align-items: center;
	}

	.company-logo {
		width: 50px;
		height:50px;
		margin-right: 10px;
	}

	.company-name h2 {
		margin: 0;
	}
	
	.company-name h2 {
      margin-bottom: 3px; /* Reduce margin between company name and job title */
    }

	.company-name p {
		margin: 5px;
        color: #666;
        margin-top: -7px;
        font-weight: 700;
	}
	

	.apply-button-container {
		margin-left: auto;
	}

	.job-details {
		background-color: #ffffff;
		border-bottom-left-radius: 10px; /* Round only the top-left corner */
		border-bottom-right-radius: 10px; /* Round only the top-right corner */
		box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
		padding: 20px;
		margin-bottom: 20px;
	}

	/* Your existing styles for job details go here */


    .job-details h2 {
      color: #007bff;
      margin-bottom: 10px;
    }

    .job-details p {
      color: #555;
      margin-bottom: 15px;
    }

    .job-details p#jobDescription {
      max-width: 100%;
    }


    .apply-icon,
    .favorite-icon {
      margin-right: 4px;
    }
	


	.favorite-icon.favorited {
		color: gold; /* Change the color to your preferred style */
	}

	 /* Show the favorite icon on desktop screens */
      .favorite-icon {
        display: inline-block;       
        margin-left: 5px; /* Add some space between the text and the icon */
        cursor: pointer;
        font-size: 2rem;
      }
      
	
	/* Add a border and label for premium jobs */


	.premium-job .job-box::before {
	  content: "Premium";
	  display: block;
	  background-color: #ffc107; /* Adjust the color as needed */
	  color: #212529; /* Adjust the color as needed */
	  padding: 5px;
	  border-radius: 5px;
	  margin-bottom: 10px;
	  text-align: center;
	  font-weight: bold;
	}

	/* Add a box shadow with the same color as the border for premium jobs */
	.premium-job .job-box {
	  border: 2px solid #ffc107; /* Adjust the color as needed */
	  box-shadow: 0 0 10px #ffc107; /* Adjust the color as needed */
	}

	/* Add a smaller font for the premium label */
	.premium-badge {
	font-size: 1.25rem;
	}
	

      
      
     /* Modern and Professional design for tab buttons */
    .tab-buttons {
        display: flex;
        background-color: #f8f9fa; /* Light background color */
        border-radius: 5px;
        overflow: hidden;
    }
    
    .tab-buttons {
      margin-bottom: 15px; /* Increase margin below tab buttons */
    }
    
 
      .tab-button {
       font-size: 1.25rem;
      }
    
    .tab-button {
        flex: 1;
        padding: 12px 20px;
        color: #495057; /* Dark text color */
        font-size: 1.25rem;
        cursor: pointer;
        transition: background-color 0.3s, color 0.3s;
        border: none; /* Remove border */
        outline: none; /* Remove outline */
        background: none; /* Remove default background */
    }
    
    .tab-button:hover {
        background-color: #e2e6ea; /* Slightly darker background on hover */
    }
    
    .tab-button.active {
        background-color: #007bffba; /* Accent color for the active tab */
        color: #fff; /* Light text color for the active tab */
    }
    
    /* Professional design for tab content with auto-scroll */
    /* Professional design for tab content with auto-scroll and hidden scrollbar */
    .tab-content {
        margin-top:2px;
        height: 50vh; /* Set a maximum height for the content container */
        overflow-y: auto; /* Enable vertical scrollbar when content exceeds the container height */
        padding: 20px; /* Add padding for better aesthetics */
        border: 0px solid #ddd; /* Add a subtle border for separation */
        border-radius: 5px; /* Add border-radius for rounded corners */
        background-color: #fff; /* Set a white background color */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow for depth */
    }
    
    /* Hide scrollbar for Webkit browsers (Chrome, Safari) */
    .tab-content::-webkit-scrollbar {
        width: 0.5em;
    }
    
    .tab-content::-webkit-scrollbar-thumb {
        background-color: #ddd; /* Set the color of the scrollbar thumb */
    }
    
    .tab-content::-webkit-scrollbar-track {
        background: none; /* Set the background color of the scrollbar track to transparent */
    }
    
    .loading-skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
        min-height: 20px;
        border-radius: 2px;
        padding: 4px;
        margin-bottom: 10px;
    }
    
	@keyframes loading {
        0% {
            background-position: 200% 0;
        }
        100% {
            background-position: -200% 0;
        }
    }
	
    .company-icon-gallery {
        display: block;
        grid-template-columns: repeat(3, 1fr); /* Three icons in a row */
        gap: 10px; /* Adjust the gap between icons as needed */
    }
    
    .company-icon-gallery img {
      	width: 44px; /* Fixed width */
		height: 44px; /* Fixed height */
        border-radius: 8px; /* Optional: Add border-radius for rounded corners */
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle box shadow for depth */
        object-fit: cover; /* Maintains aspect ratio without stretching */
		margin-bottom: 10px; /* Adds spacing between images */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds shadow for depth */
		transition: transform 0.3s ease-in-out; /* Adds a smooth hover effect */
		margin-left: 12px;
    }
  
	.company-icon:hover {
		transform: scale(1.05); /* Increases size on hover */
	}
    
    	.styles_fcc__header__UDGdE {
				font-style: normal;
				font-weight: 700;
				font-size: 16px;
				line-height: 22px;
				margin-left: 10px;
				margin-bottom: 12px;
				color: var(--N800);
			}

			 .styles_fcc__header__UDGdE p {
				font-size: 14px;
			}
			
			
	.showPhoneNumber,
    .showEmailAddress {
        font-weight: bold;
     }
        
    .showPhoneNumber,
    .showEmailAddress {
            cursor: pointer;
            color: #3498db;
     }
		
		
   

	#top-filter-section {
      display: flex;
      justify-content: flex-start;
      padding: 10px;
      background-color: #ffffff;
      position: fixed;
      margin-top: -22px;
      width: 100%;
      z-index: 99;
      left: 0px;
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Adding bottom shadow */
    }


	.mf-filter-section {
	  list-style: none;
	  display: flex;
	  align-items: center;
	}

	.mf-filter-pill {
	  background: #FFFFFF;
	  color: #383838;
	  border: 1px solid #DADCE0;
	  padding: 8px 25px;
	  border-radius: 20px;
	  cursor: pointer;
	  position: relative;
	  transition: background-color 0.3s;
	  margin:2px;
	}
	.mf-filter-pill {
	  font-weight:400;
      font-size: 12px;
    }

	.mf-filter-pill.active {
	  border: 1px solid #007bff;;
	  color: #383838;
	}

	.mf-filter-pill:hover {
	  border: 1px solid #007bff;;
	}

	.down-arrow {
	  margin-left: 8px;
	}

	.mf-filter-overlay {
	  position: absolute;
	  top: 78px; /* Adjust the value as needed */
	  left: 0;
	  background-color: #fff;
	  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
	  display: none;
	  opacity: 0;
	  transition: opacity 0.3s, transform 0.3s;
	  transform-origin: top center;
	  border-radius: 8px;
	  width: auto; /* Set a fixed width for the overlay */
	  top: 3px;
	}

	.mf-filter-pill.active,
	.mf-filter-overlay.active {
	  z-index: 99;
	  /* other styles */
	}

	.mf-filter-overlay.active {
	  display: block; /* Change this line to make the overlay visible */
	  opacity: 1;
	  /* other styles */
	  visibility: visible;
	}

	.mf-filter-options {
	  padding: 15px;
	}

	.mf-checkbox label {
	  position: relative;
	  padding-left: 35px;
	  cursor: pointer;
	  display: inline-block; /* Change to inline-block to allow side-by-side */
	  margin-bottom: 10px;
	}

	.mf-checkbox input[type="checkbox"] {
	  display: none;
	}

	.mf-checkbox label:before {
	  content: '';
	  position: absolute;
	  left: 0;
	  top: 50%;
	  transform: translateY(-50%);
	  width: 20px;
	  height: 20px;
	  border: 2px solid #007bff;
	  background-color: #fff;
	  border-radius: 5px;
	  transition: background-color 0.3s, border-color 0.3s;
	}

	.mf-checkbox input[type="checkbox"]:checked+label:before {
	  background-color: #007bff;
	  border-color: #007bff;
	  /* Add the following to prevent wrapping */
	  white-space: nowrap;
	  margin-right: 5px;
	}

	.mf-filter-options span {
	  color: #007bff;
	  margin-left: 8px;
	}
	
	.result-container {
		overflow-y: overlay; /* Use "overlay" for automatic scrollbar behavior */
		max-height: 250px;
	}

	/* Custom styling for WebKit browsers */
	.result-container::-webkit-scrollbar {
		width: 10px; /* Adjust the width of the scrollbar as needed */
	}

	.result-container::-webkit-scrollbar-thumb {
		background-color: #007bff; /* Adjust the color of the scrollbar thumb */
		border-radius: 5px; /* Adjust the border-radius for rounded corners */
	}

	.result-container::-webkit-scrollbar-track {
		background-color: #f0f0f0; /* Adjust the color of the scrollbar track */
	}

	.mf-checkbox-container {
	  display: flex;
	  align-items: normal; /* Align items vertically in the center */
	  margin-top:5px;
	}
	
	.mf-checkbox-container {
      margin-top: 3px; /* Reduce margin between checkboxes */
    }


	.mf-checkbox {
	  margin-right: 10px; /* Adjust the margin as needed */
	}

	.mf-checkbox label {
	  position: relative;
	  cursor: pointer;
	  margin-bottom: 5px;
	}

	.mf-checkbox input[type="checkbox"]:checked+label:before {
	  background-color: #007bff;
	  border-color: #007bff;
	}

	.mf-checkbox-container span {
	  white-space: nowrap; /* Prevent wrapping of the span */
	}



	.search-box {
	  margin-bottom: 10px; /* Adjust as needed */
	}

	.input-group {
	  width: 100%; /* Adjust as needed */
	}

	.filter-search {
	  border-radius: 4px; /* Adjust as needed */
	}

	.input-group-append {
	  cursor: pointer;
	}

	.input-group-text {
	  background-color: #f8f9fa; /* Background color, adjust as needed */
	  border: none;
	}

	.search-box {
	  position: relative;
	}

	.search-icon {
		position: absolute;
		transform: translateY(-315%);
		right: 24px;
		cursor: pointer;
		z-index: 99;
	}

	.filter-search {
	  padding-right: 30px; /* Adjust to leave space for the icon */
	}

	.search-input {
		border: 2px solid #007bff;
		border-radius: 6px;
		padding: 10px 10px 10px 6px;
		width: 100%;
	}
	
	.search-input {
      font-size: 1.25rem;
    }
    
	input {
		line-height: normal;
	}
	

      /* Add some basic styling to the button */
      .open-popup-button {
        display: inline-block;
        padding: 10px 20px;
        background-color: #3498db; /* Set your desired background color */
        color: #ffffff; /* Set your desired text color */
        text-decoration: none;
        border-radius: 5px;
        font-size: 1.25rem;
		float: inline-end;
		margin: 10px;
      }
    
      /* Add some styling for the icon inside the button */
      .open-popup-button i {
        margin-right: 5px; /* Adjust the spacing between the icon and text */
      }
    
      /* Add a hover effect to make it interactive */
      .open-popup-button:hover {
        background-color: #2980b9; /* Set your desired hover background color */
      }

	
	@media only screen and (max-width: 767px) {
	  .mf-filter-section, .top-filter-section{
		display: none; /* Hide the filter section on mobile screens */
	  }
	  
	   .job-details, .job-details-header, .tab-buttons, .tab-content {
        display: none;
      }
	  
	  .job-list{
	  
		width: 100%;
		height: calc(90vh - 90px);
		box-shadow: 0 0 0px rgba(0, 0, 0, 0);
		top: 115px;
		left:0px;
		 padding: 10px;
	  }
	  .job-item {
	      padding: 5px;
		  width: 100%; /* Set a fixed width for the job items */	
	   }
	   
	   .result-container {			
			max-height: 100%;
		}
		
		footer {
		 display:none;
		}
	}

	@media only screen and (min-width: 768px) {
	  .mf-filter-section, .top-filter-section {
		display: flex; /* Show the filter section on desktop screens */
	  }
	}