/* GENERAL */
body {
    font-family: 'Inter', sans-serif;
}

.border-bottom-blue {
    position: relative;
}

.border-bottom-blue::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px; 
    background: linear-gradient(to right, transparent, #0CAAB7, transparent);
}

/* COMPONENTS LAYOUT */
#blue-element-01 {
    position: absolute;
    left: 0;
    margin-top: 2%;
    width: 8%;
}

#yellow-element-01 {
    position: absolute;
    right: 0;
    width: 17%;
}

#yellow-ball-01 {
    position: absolute;
    left: 0;
    margin-top: 35%;
    width: 2%;
}

#blue-element-02 {
    position: absolute;
    right: 0;
    margin-top: 22%;
    width: 10%;
}

#blue-ball-01 {
    position: absolute;
    margin: 0 0 0 -5%;
    width: 7%;
}

#mixter-element {
    position: absolute;
    right: 0;
    width: 12%;
}

#yellow-ball-02 {
    position: absolute;
    margin-left: 30%;
    width: 3%;
}

/* LOGO */
#logo-container {
    width: 60%;
    
}

#logo {
    width: 40%;
    margin-top: 3%;
    transition: transform 0.5s ease;
}
#logo:hover {
    transform: scale(1.1);
    cursor: pointer;
}

/* TEXT PAGE */
#describe {
    width: 85%;
    margin-left: 8%;
}
#describe-container {
    margin-top: 2%;
}

p {
    font-size: 1.3rem;  
    font-weight:500;
    margin: 0 auto;
    text-align: center;
    width: 50%;
    border: 4px solid #0CAAB7;
    border-radius: 20px;
    padding: 2%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.411);
}

/* BUTTONS */
#buttons {
    margin-top: 3%;
}

.img-buttons {
    width:400px;
    transition: transform 0.5s ease;
}

.img-buttons:hover {
    transform: scale(1.1);
    cursor: pointer;
}

/* SEARCH */
#search {
    display: none;
    margin-top: 1%;
}

/* DROPDOWN */
.custom-btn-dropdown {
    font-size: 28px;
    font-family: 'exo 2', sans-serif;
    border: none;
    border-bottom: 4px solid #0CAAB7; 
    background-color: transparent; 
    padding: 0.375rem 0.75rem; 
    width: 105%;
}

.custom-btn-dropdown:focus {
    box-shadow: none; 
}

.custom-dropdown-menu {
    font-size: 20px;
    max-height: 280px;
    overflow-y: auto; 
    padding: 5%;
    margin-left: -65%;
    max-width: 950px;
    min-width: 950px;
    border-radius: 20px;
    margin-top: 5%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

#institution-search {
    border-radius: 20px;
    font-size: 20px;
    height: 50px;
}

.search-icon {
    font-size: 28px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    pointer-events: none; 
}

/* SELECTED INSTITUTION */
#spreedsheet-container {
    display: none;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    height: 200px;
    margin-bottom: -25%;
}

#selected-institution {
    border-radius: 20px;
}

.url-spredsheet {
    font-size: 20px;
}