.dropdown-container {
position: relative;
}

[id^='dropdownBtn'] {
cursor: pointer;
padding: 15px 20px;
width: 100%;
text-align: left;
border: 1px solid #011d49;
background: #fff;
border-radius: 6px;
font-size: 16px;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.3s ease;
}

[id^='dropdownBtn']:hover {
background: #F0F1F1;
box-shadow: 0 2px 8px rgba(29, 74, 155, 0.1);
}

[id^='dropdownBtn']:after {
content: "\e964";
font-family: 'CUNY-Font-Icons';
display: inline-block;
float: inline-end;
margin-right: 15px;
}

.dropdown {
display: none;
position: absolute;
background-color: #fff;
border: 1px solid #011d49;
max-height: 250px;
overflow-y: auto;
z-index: 1000;
border-radius: 6px;
margin-top: 8px;
width: 100%;
}

/* Search bar styling */
.search-container {
display: flex;
align-items: center;
padding: 12px;
border-radius: 8px;
margin: 10px;
border: 1px solid #011d49;
}
.search-container:before {
content: "\e95b";
font-family: 'CUNY-Font-Icons';
display: inline-block;
float: inline-start;
color: #000;
}
.search-container label span {
display: none;
}
.search-container input {
flex: 1;
padding: 0;
border: none;
outline: none;
font-size: 15px;
background: transparent;
}
.search-container i {
color: #666;
margin-right: 8px;
}
input[type=text] {
margin-bottom: 0;
}

/* Category header styling */
.category-section {
margin: 20px 0 10px 0;
font-size: 14px;
color: #666;
font-weight: 600;
padding: 0 12px;
}

/* Unified list styling (multiple ULs share [id^='schoolList'] ID for simplicity) */
[id^='schoolList'] li {
display: flex;
margin: 10px;
}
[id^='schoolList'] li a {
padding: 12px 15px;
cursor: pointer;
display: flex;
align-items: center;
border-radius: 8px;
transition: all 0.2s ease;
margin: 2px 0;
border: 1px solid #011d49;
text-decoration: none;
width: 100%
}
[id^='schoolList'] li a:hover,
[id^='schoolList'] li a:focus,
[id^='schoolList'] li a:active {
/*background-color: #F0F1F1;*/
transform: translateX(5px);
text-decoration: none;
}

[id^='schoolList'] li a:before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
margin-right: 10px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
vertical-align: bottom;
background-color: rgba(216, 215, 214, 0.5);
border-radius: 5px;
font-family: 'CUNY-Font-Icons';
color: #000;
font-size: 24px;
padding: 5px;
}
/*Baruch*/
li.college-bar a:hover,
li.college-bar a:focus,
li.college-bar a:active {
background-color: rgba(31, 55, 105, 0.25);
}
li.college-bar a:before {
content: "\e903" !important;
}
li.college-bar a:hover:before,
li.college-bar a:focus:before,
li.college-bar a:active:before {
background-color: rgba(31, 55, 105, 1.0) !important;
color: #fff !important;
}
/*Brooklyn*/
li.college-bk a:hover,
li.college-bk a:focus,
li.college-bk a:active {
background-color: rgba(139, 36, 71, 0.25);
}
li.college-bk a:before {
content: "\e906" !important;
}
li.college-bk a:hover:before,
li.college-bk a:focus:before,
li.college-bk a:active:before {
background-color: rgba(139, 36, 71, 1.0) !important;
color: #fff !important;
}
/*City*/
li.college-city a:hover,
li.college-city a:focus,
li.college-city a:active {
background-color: rgba(125, 92, 198, 0.25);
}
li.college-city a:before {
content: "\e90f" !important;
}
li.college-city a:hover:before,
li.college-city a:focus:before,
li.college-city a:active:before {
background-color: rgba(125, 92, 198, 1.0) !important;
color: #fff !important;
}
/*CSI*/
li.college-csi a:hover,
li.college-csi a:focus,
li.college-csi a:active {
background-color: rgba(106, 115, 123, 0.25);
}
li.college-csi a:before {
content: "\e912" !important;
}
li.college-csi a:hover:before,
li.college-csi a:focus:before,
li.college-csi a:active:before {
background-color: rgba(106, 115, 123, 1.0) !important;
color: #fff !important;
}
/*Hunter*/
li.college-hun a:hover,
li.college-hun a:focus,
li.college-hun a:active {
background-color: rgba(95, 51, 147, 0.25);
}
li.college-hun a:before {
content: "\e92d" !important;
}
li.college-hun a:hover:before,
li.college-hun a:focus:before,
li.college-hun a:active:before {
background-color: rgba(95, 51, 147, 1.0) !important;
color: #fff !important;
}
/*John Jay*/
li.college-jjay a:hover,
li.college-jjay a:focus,
li.college-jjay a:active {
background-color: rgba(37, 44, 99, 0.25);
}
li.college-jjay a:before {
content: "\e932" !important;
}
li.college-jjay a:hover:before,
li.college-jjay a:focus:before,
li.college-jjay a:active:before {
background-color: rgba(37, 44, 99, 1.0) !important;
color: #fff !important;
}
/*Lehman*/
li.college-lc a:hover,
li.college-lc a:focus,
li.college-lc a:active {
background-color: rgba(0, 103, 166, 0.25);
}
li.college-lc a:before {
content: "\e937" !important;
}
li.college-lc a:hover:before,
li.college-lc a:focus:before,
li.college-lc a:active:before {
background-color: rgba(0, 103, 166, 1.0) !important;
color: #fff !important;
}
/*Medgar*/
li.college-mec a:hover,
li.college-mec a:focus,
li.college-mec a:active {
background-color: rgba(35, 31, 32, 0.25);
}
li.college-mec a:before {
content: "\e942" !important;
}
li.college-mec a:hover:before,
li.college-mec a:focus:before,
li.college-mec a:active:before {
background-color: rgba(35, 31, 32, 1.0) !important;
color: #fff !important;
}
/*City Tech*/
li.college-tech a:hover,
li.college-tech a:focus,
li.college-tech a:active {
background-color: rgba(0, 127, 163, 0.25);
}
li.college-tech a:before {
content: "\e969" !important;
}
li.college-tech a:hover:before,
li.college-tech a:focus:before,
li.college-tech a:active:before {
background-color: rgba(0, 127, 163, 1.0) !important;
color: #fff !important;
}
/*Queens*/
li.college-qc a:hover,
li.college-qc a:focus,
li.college-qc a:active {
background-color: rgba(237, 25, 57, 0.25);
}
li.college-qc a:before {
content: "\e955" !important;
}
li.college-qc a:hover:before,
li.college-qc a:focus:before,
li.college-qc a:active:before {
background-color: rgba(237, 25, 57, 1.0) !important;
color: #fff !important;
}
/*York*/
li.college-york a:hover,
li.college-york a:focus,
li.college-york a:active {
background-color: rgba(239, 64, 53, 0.25);
}
li.college-york a:before {
content: "\e976" !important;
}
li.college-york a:hover:before,
li.college-york a:focus:before,
li.college-york a:active:before {
background-color: rgba(239, 64, 53, 1.0) !important;
color: #fff !important;
}
/*BMCC*/
li.college-bmcc a:hover,
li.college-bmcc a:focus,
li.college-bmcc a:active {
background-color: rgba(0, 81, 188, 0.25);
}
li.college-bmcc a:before {
content: "\e907" !important;
}
li.college-bmcc a:hover:before,
li.college-bmcc a:focus:before,
li.college-bmcc a:active:before {
background-color: rgba(0, 81, 188, 1.0) !important;
color: #fff !important;
}
/*BCC*/
li.college-bcc a:hover,
li.college-bcc a:focus,
li.college-bcc a:active {
background-color: rgba(20, 81, 64, 0.25);
}
li.college-bcc a:before {
content: "\e904" !important;
}
li.college-bcc a:hover:before,
li.college-bcc a:focus:before,
li.college-bcc a:active:before {
background-color: rgba(20, 81, 64, 1.0) !important;
color: #fff !important;
}
/*Guttman*/
li.college-gcc a:hover,
li.college-gcc a:focus,
li.college-gcc a:active {
background-color: rgba(0, 90, 170, 0.25);
}
li.college-gcc a:before {
content: "\e922" !important;
}
li.college-gcc a:hover:before,
li.college-gcc a:focus:before,
li.college-gcc a:active:before {
background-color: rgba(0, 90, 170, 1.0) !important;
color: #fff !important;
}
/*Hostos*/
li.college-hcc a:hover,
li.college-hcc a:focus,
li.college-hcc a:active {
background-color: rgba(0, 47, 109, 0.25);
}
li.college-hcc a:before {
content: "\e928" !important;
}
li.college-hcc a:hover:before,
li.college-hcc a:focus:before,
li.college-hcc a:active:before {
background-color: rgba(0, 47, 109, 1.0) !important;
color: #fff !important;
}
/*Kingsbrorough*/
li.college-kcc a:hover,
li.college-kcc a:focus,
li.college-kcc a:active {
background-color: rgba(27, 62, 112, 0.25);
}
li.college-kcc a:before {
content: "\e934" !important;
}
li.college-kcc a:hover:before,
li.college-kcc a:focus:before,
li.college-kcc a:active:before {
background-color: rgba(27, 62, 112, 1.0) !important;
color: #fff !important;
}
/*LaGuardia*/
li.college-lgcc a:hover,
li.college-lgcc a:focus,
li.college-lgcc a:active {
background-color: rgba(196, 38, 46, 0.25);
}
li.college-lgcc a:before {
content: "\e938" !important;
}
li.college-lgcc a:hover:before,
li.college-lgcc a:focus:before,
li.college-lgcc a:active:before {
background-color: rgba(196, 38, 46, 1.0) !important;
color: #fff !important;
}
/*Queensborough*/
li.college-qcc a:hover,
li.college-qcc a:focus,
li.college-qcc a:active {
background-color: rgba(0, 48, 109, 0.25);
}
li.college-qcc a:before {
content: "\e956" !important;
}
li.college-qcc a:hover:before,
li.college-qcc a:focus:before,
li.college-qcc a:active:before {
background-color: rgba(0, 48, 109, 1.0) !important;
color: #fff !important;
}
/*Journalism*/
li.college-gsj a:hover,
li.college-gsj a:focus,
li.college-gsj a:active {
background-color: rgba(254, 136, 7, 0.25);
color: #fff !important;
}
li.college-gsj a:before {
content: "\e926" !important;
}
li.college-gsj a:hover:before,
li.college-gsj a:focus:before,
li.college-gsj a:active:before {
background-color: rgba(254, 136, 7, 1.0) !important;
color: #fff !important;
}
/*Grad Center*/
li.college-grad a:hover,
li.college-grad a:focus,
li.college-grad a:active {
background-color: rgba(0, 57, 166, 0.25);
}
li.college-grad a:before {
content: "\e924" !important;
}
li.college-grad a:hover:before,
li.college-grad a:focus:before,
li.college-grad a:active:before {
background-color: rgba(0, 57, 166, 1.0) !important;
color: #fff !important;
}
/*SPH*/
li.college-sph a:hover,
li.college-sph a:focus,
li.college-sph a:active {
background-color: rgba(0, 120, 191, 0.25);
}
li.college-sph a:before {
content: "\e95e" !important;
}
li.college-sph a:hover:before,
li.college-sph a:focus:before,
li.college-sph a:active:before {
background-color: rgba(0, 120, 191, 1.0) !important;
color: #fff !important;
}
/*SLU*/
li.college-slu a:hover,
li.college-slu a:focus,
li.college-slu a:active {
background-color: rgba(196, 39, 46, 0.25);
}
li.college-slu a:before {
content: "\e95d" !important;
}
li.college-slu a:hover:before,
li.college-slu a:focus:before,
li.college-slu a:active:before {
background-color: rgba(196, 39, 46, 1.0) !important;
color: #fff !important;
}
/*Law*/
li.college-law a:hover,
li.college-law a:focus,
li.college-law a:active {
background-color: rgba(208, 216, 43, 0.25);
}
li.college-law a:before {
content: "\e936" !important;
}
li.college-law a:hover:before,
li.college-law a:focus:before,
li.college-law a:active:before {
background-color: rgba(208, 216, 43, 1.0) !important;
color: #000 !important;
}
/*Medicine*/
li.college-med a:hover,
li.college-med a:focus,
li.college-med a:active {
background-color: rgba(53, 180, 229, 0.25);
}
li.college-med a:before {
content: "\e90c" !important;
}
li.college-med a:hover:before,
li.college-med a:focus:before,
li.college-med a:active:before {
background-color: rgba(53, 180, 229, 1.0) !important;
color: #fff !important;
}
/*SPS*/
li.college-sps a:hover,
li.college-sps a:focus,
li.college-sps a:active {
background-color: rgba(0, 51, 102, 0.25);
}
li.college-sps a:before {
content: "\e960" !important;
}
li.college-sps a:hover:before,
li.college-sps a:focus:before,
li.college-sps a:active:before {
background-color: rgba(0, 51, 102, 1.0) !important;
color: #fff !important;
}
/*Macaulay*/
li.college-mhc a:hover,
li.college-mhc a:focus,
li.college-mhc a:active {
background-color: rgba(240, 69, 46, 0.25);
}
li.college-mhc a:before {
content: "\e945" !important;
}
li.college-mhc a:hover:before,
li.college-mhc a:focus:before,
li.college-mhc a:active:before {
background-color: rgba(240, 69, 46, 1.0) !important;
color: #fff !important;
}

[id^='schoolList'] li a[target=_blank]:after {
display: none;
}

.college-info {
flex: 1;
}

.college-name {
color: #000;
font-size: .75rem;
line-height: 1rem;
}

/* Custom scrollbar for the dropdown */
.dropdown::-webkit-scrollbar {
width: 8px;
}
.dropdown::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.dropdown::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
.dropdown::-webkit-scrollbar-thumb:hover {
background: #a1a1a1;
}
/* Styling the entire scrollbar */
::-webkit-scrollbar {
width: 10px; /* Width of the scrollbar */
height: 10px; /* Height of the scrollbar (horizontal scrollbar) */
}

/* Styling the scrollbar track (background) */
.dropdown::-webkit-scrollbar-thumb,
.dropdown::-webkit-scrollbar-track,
.dropdown::-webkit-scrollbar {
border-radius: 6px;
}
.dropdown::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1; /* Light gray background */
border-radius: 10px; /* Optional rounded corners */
}
/* Styling the scrollbar thumb (the draggable part) */
::-webkit-scrollbar-thumb {
background: #888; /* Darker gray */
border-radius: 10px; /* Optional rounded corners */
border: 3px solid #f1f1f1; /* Optional border to create space around the thumb */
}
/* Styling the scrollbar when hovered */
::-webkit-scrollbar-thumb:hover {
background: #555; /* Darker when hovered */
}