/* Ensure Select2 elements take full width of their container */
.js-example-basic-multiple,
.js-example-basic-single {
	width: 100%; /* Adjust width as needed */
}
.select2-container {
    width: 100%; /* Full width */
}

.select2-container .select2-selection--multiple {
    min-height: 38px !important;
}

/* Style for multiple selection box */
.select2-container--default .select2-selection--multiple {
	border: 1px solid #ced4da; /* Border color */
	border-radius: .25rem; /* Border radius */
	min-height: 38px; /* Minimum height */
	padding: 6px 12px; /* Padding */
	display: flex;
	/*flex-direction: column;
	max-height: 100px; *//* Adjust as needed */
	overflow-y: auto;
	
	/*padding:15px;*/
	align-items: center; /* Align items vertically */
    flex-wrap: wrap; /* Allow wrapping */
}

/* Style for each selected item */
.select2-container--default .select2-selection__choice {
	background-color: #007bff; /* Background color */
	color: white; /* Text color */
	border: 1px solid #007bff; /* Border color */
	margin: 2px; /* Margin between items */
	border-radius: .25rem; /* Border radius */
	white-space: nowrap; /* Prevent text wrapping */
	overflow: hidden; /* Hide overflow text */
	text-overflow: ellipsis; /* Add ellipsis for overflow text */
	
	font-weight: normal; /* Ensure text is not bold */
    display: flex; /* Ensure text and remove button are aligned */
    align-items: center; /* Center align items vertically */
	padding-right: 20px; /* Space for remove button */
	padding-top:5px;
}

/* Remove button style */
.select2-container--default .select2-selection__choice__remove {
	color: white; /* Remove icon color */
	background: transparent; /* Remove background */
	border: none; /* Remove border */
	padding: 0; /* Remove padding */
	
	
}

/* Style the single selection box */
.select2-container--default .select2-selection--single {
	min-height: 38px; /* Adjust as needed */
	height: auto; /* Allows for dynamic height based on content */
	border: 1px solid #ced4da; /* Border color */
	border-radius: .25rem; /* Border radius */
	padding: 6px 12px; /* Padding */
}

/* Dropdown menu style */
.select2-container--default .select2-results {
	max-height: 200px; /* Maximum height of the dropdown */
	overflow-y: auto; /* Enable scroll if needed */
}

/* Ensure dropdown items are in column layout */
.select2-container--default.select2-container--open .select2-results {
	display: flex;
	flex-direction: column; /* Ensure dropdown content is in column layout */
}

/* Style each option in the dropdown */
.select2-container--default .select2-results__option {
	display: flex;
	align-items: center;
	padding: 5px 10px;
	margin: 2px;
	box-sizing: border-box;
}

/* Ensure the search box takes full width */
.select2-container .select2-search--inline {
	width: 100%; /* Ensure search input takes full width */
}

/* Remove list-style for selected items */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping */
    gap: 4px; /* Gap between items */
    padding: 0; /* Remove padding if causing issues */
}

/* Fix for selected item text visibility */
.select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    font-size: 14px; /* Adjust font size if necessary */
    line-height: 20px; /* Ensure line height accommodates text */
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Add ellipsis for overflow text */
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #f5f5f5 !important;
	color: #343a40 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    margin-top: 0px !imporatnt; 
    margin: 0px !important; 
    padding: 0px !important;
    width: 12px !important;
}

/*
.select2-container--default.select2-container--focus .select2-selection--multiple {
    padding: 5px;
}
*/
.select2-container--default .select2-search--inline .select2-search__field {
    height: 0px !important;
}

select {
    padding: 8px !important;
    border-radius: 4px !important;    
}
	
.pc-tab ul li {
	display: inline-block; /* Override default display */
	width: auto; 
}

#cbState {
	height: 38px; /* Adjust as needed */
	line-height: 36px; /* Ensures text aligns properly */
}

	

ul {
    list-style: none;
    display: flex;
    justify-content: flex-start !important;
    padding: 0;
    flex-direction: column;
	align-items:flex-start !important;
}

ul li {
    flex: 1;
    text-align: center;
    padding: 10 0px;
    margin: 0 auto;
    background-color: white ;
}

/* date picker */
 .date-range-container {
	margin-top: 10px;
	font-family: Arial, sans-serif;
	display: flex;
	flex-wrap: wrap; /* Allow items to wrap if necessary */
	gap: 10px; /* Space between inputs */
}

.date-range-input {
	flex: 1 1 25%; 
	padding: 8px !important;
	border: 1px solid #ccc;
	border-radius: 4px;
	margin-right: 4%;
	min-width: 100px;
	max-width: 20%;
}

.date-range-input:last-child {
margin-right: 0;
}

.date-range-label {
display: inline-block;
margin-right: 10px;
font-weight: bold;
}

/* Radio style*/
 .radio-container {
      display: flex; /* Use flexbox for layout */
      flex-direction: row; /* Align items horizontally */
      flex-wrap: wrap; /* Allow wrapping if needed */
      gap: 20px; /* Larger gap between each radio button group */
      align-items: center; /* Center items vertically */
    }

    /* Style for each radio button and its label */
    .radio-item {
      display: flex; /* Flexbox for radio button and label */
      align-items: center; /* Center items vertically */
      gap: 5px; /* Smaller gap between radio button and label */
    }

    /* Style for radio buttons */
    .radio-item input[type="radio"] {
      margin: 0; /* Remove default margin */
      vertical-align: middle; /* Align radio button vertically */
    }

    .radio-item label {
      font-size: 16px; /* Adjust font size */
      margin: 0; /* Remove default margin */
    }
	
/* Search Wrapper */
.search-wrapper {
    display: flex; /* Flexbox layout for search box */
    flex: 1; /* Allow search box to expand */
}

/* Search Container */
.ksearch-container {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 25px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    flex: 1; /* Allow search box to expand within the container */
	padding: 0px !important;
}

/* Search Input */
.ksearch-container input[type="text"] {
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    outline: none;
    flex: 1; /* Input should take up available space */
	text-align: left; /* Center text horizontally */
    height: 100%; /* Ensure height fills the container */
    line-height: normal; /* Adjust line height to align text vertically */
    display: flex; /* Flexbox layout for vertical centering */
    align-items: center; 
	width: -webkit-fill-available;
	min-width: 100px; 
}

/* Search Button */
.ksearch-container .search-button {
    background-color: #00aff0 !important;
    border: none;
    border-left: 1px solid #ccc;
    padding: 15px 15px !important;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
	width: 45px !important;
	 flex-shrink: 0;
}

.ksearch-container .search-button svg {
    width: 20px;
    height: 20px;
    stroke: #fff;
}

.ksearch-container .search-button:hover {
    background-color: #0056b3 !important;
}

.pc-tab section div input {
	margin-bottom: 0px !important; 
}
	
/* Search */
.searchimgcolumn {
	flex-direction: column; /* Align content vertically */
	align-items: flex-start; /* Ensure content starts at the beginning of each column */
	width: 100vw;
	border-left-width: 0px !important;
	border-right-width: 0px !important;
}

.search-container {
margin-top: 20px;
/*max-width: 600px;*/
margin: auto;
}
.searchkwInput {
border-radius: 0.375rem 0 0 0.375rem; /* Match Bootstrap border radius */
}
.search_button {
border-radius: 0 0.375rem 0.375rem 0; /* Match Bootstrap border radius */
}

/* search Result */
.searchcontainer {
	/*display: flex;
	height: 100vh;*/
	overflow: hidden;
	position: relative;
}
.item-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3 columns */
	gap: 12px;
	padding: 10px;
	overflow-y: auto;
	box-sizing: border-box;
	flex: 1;
	transition: margin-right 0.3s;
}


.item {
	/*background: #f8f9fa;*/
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 12px;
	text-align: center;
	cursor: pointer;
	position: relative;
	height: 270px; /*315px*/
	overflow: hidden; /* Ensure content does not overflow */
	/*display: flex;  Use flexbox to center content */
	transition: border-color 0.3s, box-shadow 0.3s;
}

/*
p {
    padding: 0px !important; 
}
*/
.item.selected {
    border: 2px solid #d3d3d3; /* Light gray border color */
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.1), /* Subtle outer shadow for a raised effect */
        inset 0 2px 4px rgba(0, 0, 0, 0.05); /* Light inset shadow for depth */
    border-radius: 15px; /* Increased border radius for more rounding */
    background-color: #ffffff; /* White background color for clarity */
    z-index: 1; /* Ensure the selected item is on top of other items */
    transition: border-color 0.3s, box-shadow 0.3s; /* Smooth transition effects */
}
.sanitized-content p {
    padding: 0px !important;
}

.item {
    margin-bottom: 16px; /* Space between items */
}

.line1, .line3 {
    background-color: #e0e0e0; /* Very light gray background */
    padding: 4px; /* Adjust padding as needed */
    display: inline-block; /* Ensure spans act like blocks for padding */
    width: 100%; /* Ensure full-width for proper background color display */
}

.line2 {
    display: -webkit-box; /* Create a flexible box layout for the text */
    -webkit-box-orient: vertical; /* Orient the box vertically */
    -webkit-line-clamp: 6; /* Limit the text to 6 lines */
    overflow: hidden; /* Hide overflowed text */
    text-overflow: ellipsis; /* Add ellipsis when text overflows */
    padding: 4px; /* Add padding if needed */
	margin: 8px 0px;
}
.line4 {
    display: -webkit-box; /* Create a flexible box layout for the text */
    -webkit-box-orient: vertical; /* Orient the box vertically */
    -webkit-line-clamp: 6; /* Limit the text to 6 lines */
    overflow: hidden; /* Hide overflowed text */
    text-overflow: ellipsis; /* Add ellipsis when text overflows */
    padding: 4px; /* Add padding if needed */
	margin: 8px 0px;
	text-align: left;
}
.sidebar {
	width: 29%;
	background: #fff;
	border-left: 1px solid #ddd;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	transform: translateX(100%);
	transition: transform 0.3s;
	overflow: auto;
	z-index: 1000;
	padding: 20px;
	background-color: #f4f4f4;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
}
.sidebar.active {
	transform: translateX(0);
}
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: #333;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: color 0.3s;
}

.close-btn:hover {
    color: #007bff;
}

#sidebar-content {
    margin-top: 40px; /* Space for the close button */
    flex: 1;
    overflow-y: auto;
}

/* Styling for the action buttons */
.sidebar-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.more-btn {
	width: 100%;
	background: #007bff;
	color: #fff;
	border: none;
	padding: 10px;
	cursor: pointer;
	border-radius: 4px;
	text-align: center;
	margin-top: 10px;
	height:40px
}

.more-btn:hover {
	background: #0056b3;
}

 #moreButtonContainer {
        border: none !important; /* Remove border from the container */
    }

@media (min-width: 2060px) {
	.item-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr); 
	}
	.searchimgleft-column {
		width: 22%;
	}
	.sidebar {
    width: 29%;}
}

@media (min-width: 1600px) and (max-width: 2060px) {
	.item-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr); 
	}	
	.sidebar {
    width: 35%;}
}

@media (min-width: 1260px) and (max-width: 1600px) {
	.searchimgleft-column {
		width: 24%;
	}
	
	.sidebar {
    width: 38%;}
}

@media (max-width: 1260px) {
	.item-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr); 
	}
	.searchimgleft-column {
		width: 30%;
	}
	.sidebar {
    width: 42%;}
	
	
}
@media (max-width: 960px) {
	.item-container {
		display: grid;
		grid-template-columns: repeat(1, 1fr); 
	}
	.searchimgleft-column {
		width: 42%;
	}
	.sidebar {
		width: 48%;
	}
	
	.popup-container label {
		font-size: 14px;
	}
	
	select {
		font-size: 0.9rem;
	}
	.pc-tab section div input {
		font-size: 0.9rem;
	}
	.radio-item label {
		font-size: 0.9rem;
	}
}
/* start from here*/
.story-column {
	width: 400px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	section.article {
		/*cursor:pointer;*/
		min-height:auto;
		padding: 20px 0px;
	}
}

#home_title{
		display: flex;
		padding: 0px  !important;
		background:auto;
		border:none;
		
	div.home_title{
		padding: 0px  !important;
		background:auto;
		border:none;		
	}
	
	h2.clrskybl{
		margin: 0;
		font-family: 'Raleway';
		letter-spacing: 1px;
		color: #00aff0;
		background-color: white;
		padding-left: 25px;		
	}
}
div.article{
	background-color: rgb(255, 255, 255);
	/*padding:10px;*/
	p{
		padding-left: 0px;
		padding-right: 0px;
	}
	i.fa-times{float: right; margin-right: 10px;color: red;}
	.article_body{
		padding-left: 0px;
		padding-right: 0px;
	}
	div.article_body p:first-child {Padding-top: 0px;}
	div {border: none !important;}
}

.div_reset{
	border: none !important;
}

.no_padding{
	padding: 0px !important;
}
.title{
	color: black;
}
.byline{
	margin-top:5px;
}

body{
	background-color: #fff;
	padding-bottom: 60px important;
}

.ad_wrapper{
	max-width:1590px;
	display: flex;
	flex-direction: row;
	margin: 0 auto;	
}

.center_photo{
	max-width: 40%;
	min-width: 300px;
	margin: 0 auto;
	padding: 10px;
}
.tease{
	color: #666;
	font-family: Times, serif;
	font-style: italic;
}

.captionText{
	padding: 5px 0px !important;
	font-family: Times, serif;
	font-style: italic;	
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  
  z-index: 999;
  
  div.footernonbld:first-child{
	  Padding-top: 8px;
  }
  
  div.footernonbld:last-child{
	 Padding-bottom: 8px;
  }  
}