@import url("controls.css"); /*Base control styles*/

/* Filter section */
.filters-homepage {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    gap: 20px;
    z-index: 10000;
    flex-wrap: wrap;
}

.filters-mappage {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.filter-item {
    display: flex;
    align-items: center;
}


.message-received{
    display: flex; 
    align-items: flex-start;
    text-align:left; 
    margin-bottom: 0px; 
    padding: 10px; 
    border-radius: 10px; 
    max-width: 70%; 
    background-color: var(--brand-color); 
    border:1px dashed var(--white);
    width:100%;

    color:var(--brand-color-light);font-size: 20px;
}
.message-received:hover{
    background-color: var(--brand-color-light); 
    color:var(--brand-color);
}

.message-sent{
    
    display: flex; 
    
    text-align:left; 
    margin-left:auto;
    margin-bottom: 0px; 

    padding: 10px; 
    border-radius: 10px; 
    max-width: 70%; 
    width:100%;
    background-color: var(--brand-color); 
    border:1px dashed var(--white);

    color:var(--white);
    font-size: 20px;
}


.message-sent:hover{
    background-color: var(--brand-color-light); 
    color:var(--brand-color);
}


.link{
    text-decoration: none; 
    color: inherit;
}
.link:hover{
    color: inherit;
    text-decoration: underline;
}



/* .filter-item select {
    border: 1px dashed green;
} */

/* .filter-item input {

    border: none;
} */

/* .filter-item i {
    margin-right: 10px;
} */



        /* Add CSS styles for interactivity and font size */
        .interactive-link {
            font-size: 23px; /* Set the initial font size */
            text-decoration: none; /* Remove underlines from the link */
            color:var(--brand-color); /* Change the link color if desired */
            cursor: pointer; /* Change the cursor on hover */
            transition: font-size 0.1s; /* Smooth transition effect on font size change */
            white-space: nowrap; /* Prevent text wrap */
            text-align: center; /* Center the text */
            display: inline-block; /* Ensure inline-block for centering */
        }

        .interactive-link:hover {
            font-size: 23px; /* Set the enlarged font size on hover */
            color:var(--brand-color); /* Change the link color if desired */
            white-space: nowrap; /* Prevent text wrap */
            text-align: center; /* Center the text */
            display: inline-block; /* Ensure inline-block for centering */
        }

        /* Add CSS styles for interactivity and font size */
        .interactive-small-link {
            font-size: 12px; /* Set the initial font size */
            text-decoration: none; /* Remove underlines from the link */
            color:var(--brand-color); /* Change the link color if desired */
            cursor: pointer; /* Change the cursor on hover */
            transition: font-size 0.1s; /* Smooth transition effect on font size change */
            white-space: nowrap; /* Prevent text wrap */
            text-align: center; /* Center the text */
            display: inline-block; /* Ensure inline-block for centering */
        }

        .interactive-small-link:hover {
            font-size: 12px; /* Set the enlarged font size on hover */
            color: var(--brand-color-light); /* Change the link color if desired */
            white-space: nowrap; /* Prevent text wrap */
            text-align: center; /* Center the text */
            display: inline-block; /* Ensure inline-block for centering */
        }

        /* Add CSS styles for interactivity and font size */
        .group_popup_content {
            font-size: 12px; /* Set the initial font size */
            text-decoration: none; /* Remove underlines from the link */
            color: var(--brand-color); /* Change the link color if desired */
            transition: font-size 0.1s; /* Smooth transition effect on font size change */
            display: none; /* Ensure inline-block for centering */
        }
        .group_popup_content:hover {
            color: var(--brand-color); /* Change the link color if desired */
            display: inline-block; /* Ensure inline-block for centering */
        }



        .side-panel {
            position: fixed;
            top: 0;
            right: 0;
            width: 300px;
            height: 100%;
            background-color:var(--brand-color);
            border-left: 1px solid var(--brand-color-light);
            padding: 10px;
            overflow-y: auto;
            box-shadow: -5px 0 5px -5px #999;
        }

        body {
            margin: 0;
            padding: 0;
        }

        /* #map {
            position: fixed;
            top: 0;
            left: 0;
            width: calc(100% - 300px);
            height: 100vh;
            z-index: 1;
        } */

        /* Add CSS styles for the search box and results */
        .search-section {
            margin-top: 20px;
        }

        .search-container {
            display: flex;
            align-items: center;
            background-color:var(--brand-color-light);
            width: 100%;
            max-width: 300px;
            border: 2px solid var(--brand-color-light);
            border-radius: 10px;
            overflow: hidden;
            transition: border-color 0.3s ease-in-out;
        }

       

        .search-suggestions-section {
            background-color:var(--brand-color);
            color:var(--brand-color-light);
            margin-top: 20px;
        }

        .search-result {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
            padding:3px;
            border-radius: 15px;
            cursor: pointer; /* Set cursor to hand on hover */
        }

        .search-result img {
            width: 24px;
            height: 24px;
            margin-right: 10px;
        }

        .search-result span {
            font-size: 16px;
        }

        .search-result:hover {
            background-color:var(--brand-color); /* Change background color as needed */
            cursor: pointer; /* Set cursor to hand on hover */
        }

        .center-horizontal {
            display: flex;
            align-items: center;
        }

        .bold-label {
            font-weight: bold;
        }

        .rounded-button {
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            text-align: center;
            align-items: center;
            text-decoration: none;
            cursor: pointer;
            border-radius: 25px;
            color:var(--white);
            background-color:var(--brand-color); 
            border:1px solid var(--brand-color);
            transition: background-color 0.3s;
        }

        .rounded-button:hover {
            background-color:var(--white);
            color:var(--brand-color); 
            border:1px solid var(--brand-color);
        }
        .rounded-button:active {
            background-color:var(--white);
            color:var(--brand-color); 
            border:1px solid var(--brand-color);
        }
        .rounded-button[disabled] {
            background-color: var(--theme-color-disabled-normal); /* Gray when disabled */
            color: var(--theme-color-disabled-dark); /* Gray when disabled */
            border:1px solid var(--theme-color-disabled-normal);
            cursor: not-allowed;
        }



        .rounded-button-inverted {
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            text-align: center;
            align-items: center;
            text-decoration: none;
            cursor: pointer;
            border-radius: 25px;
            border: 1px dashed var(--brand-color);
            background-color:var(--white);
            color:var(--brand-color); 
            transition: background-color 0.3s;
        }

        .rounded-button-inverted:hover {
            color:var(--brand-color-light);
            background-color:var(--brand-color); 
        }
        .rounded-button-inverted:active {
            background-color:var(--white);
            color:var(--brand-color); 
        }
        .rounded-button-inverted[disabled] {
            background-color: var(--theme-color-disabled-normal); /* Gray when disabled */
            color: var(--theme-color-disabled-dark); /* Gray when disabled */
            cursor: not-allowed;
        }
        
        /* job alert form */
        .group-section {
            margin-bottom: 20px;
        }
        .group-select {
            width: 70%;
            padding: 8px;
            border: 1px dashed var(--brand-color); /* Adds a green border */
            border-radius: 8px; /* Rounds the corners */
        }

        .select-option {
            width: 70%;
            padding: 8px;
            color:var(--brand-color);
            background-color: var(--white);
            
        }
        

        .button {
            display: inline-block;
            cursor: pointer;
            padding: 5px;
            margin: 3px;
            background-color:var(--white);
            color:var(--brand-color);
            border: 1px dashed var(--brand-color);
            border-radius: 10px;
        }

        .button:hover {
            background-color:var(--brand-color);
            color:var(--white);
        }

        .button-selected {
            display: inline-block;
            cursor: pointer;
            padding: 5px;
            margin: 3px;
            background-color: var(--brand-color);
            color: var(--white);
            border: 1px solid var(--brand-color);;
            border-radius: 10px;
        }

        .button-selected:hover {
            background-color:var(--white);
            color:var(--brand-color);
            border: 1px dashed var(--brand-color);
        }

        .group-list {
            list-style-type: none;
            padding: 1px;
        }

        .group-list-item {
            display: flex;
            align-items: left;
            margin: 1px 0;
        }

        .group-list-item:hover {
            background-color: var(--brand-color-light);
        }


        .section-break {
            margin: 20px 0;
            border-top: 1px dashed #ffffff;
            text-align: center;
        }

        .section-break-text {
        display: inline-block;
        padding: 5px;
        background-color: white;
        }
      
        
        .section-break-low-gap {
            margin: 1px 0;
            border-top: 1px dashed #ffffff;
            text-align: center;
            margin-top:20px;
            margin-bottom:20px;
        }


        .rounded-profile-button {
            display: inline-block;
            padding: 5px 5px;
            font-size: 16px;
            text-align: center;
            text-decoration: none;
            cursor: pointer;
            border-radius: 25px;
            color: var(--brand-color);
            background-color: transparent; /* Dark green */
            transition: background-color 0.3s;
        }

        .rounded-profile-button:hover {
            background-color: var(--brand-color); /* Ocean blue on hover */
            color: var(--brand-color-light);
        }
        .rounded-profile-button:active {
            background-color: var(--brand-color); /* Darker ocean blue on click */
            color: var(--brand-color-light);
        }


        
        .tile:hover {
            background-color: lightgray;
        }
              
        .profile-name {
            font-size: 12px;
            text-align: right;
            text-decoration: none;
        }

        .profile-icon {
            width: 30px; /* Adjust the size as needed */
            height: 30px; /* Adjust the size as needed */
            margin-right: 10px;
            border-radius: 50%; /* Make the image round */
            overflow: hidden; /* Hide any content that may overflow beyond the rounded corners */
            object-fit: cover; /* Ensure the image covers the entire container */
        }
        

        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 9999; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
        }
        
        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 80%; /* Could be more or less, depending on screen size */
        }
        
        /* Close Button */
        .close {
            color: var(--brand-color-middle);
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        
        .close:hover,
        .close:focus {
            color: var(--white);
            text-decoration: none;
            cursor: pointer;
        }      

        /* General form group styling */
        .form-group {
            display: flex;
            align-items: center;
            margin-bottom: 10px; /* Adjust as needed */
        }

        /* Label styling */
        .toggle-switch-label {
            width: 120px; /* Adjust the width of the labels */
            padding-right: 10px; /* Space between label and input */
            text-align: left;
        }

        /* Textbox styling */
        .form-control {
            flex: 1;
            border-radius:5px;
            border: 1px dashed var(--brand-color); /* Light border */
            color: var(--brand-color);
            background-color: var(--white);
            padding: 8px;
            transition: border-color 0.3s; /* Smooth border transition */
        }

        /* Highlight on hover */
        .form-control:hover {
            border: 1px dashed var(--brand-color-middle); /* Light border */
        }

        /* Highlight on focus */
        .form-control:focus {
            border-color: var(--brand-color); /* Focus border color */
            outline: none; /* Remove default outline */
        }

        /* Placeholder text styling */
        .form-control::placeholder {
            color: var(--brand-color); /* Grayed placeholder text */
        }



        .listitem {
            display: inline-block;
            cursor: pointer;
            padding: 2px 10px 2px 10px;
            margin: 2px;
            color: var(--white);
            background-color: var(--brand-color);
            border: 1px dashed var(--white);
            border-radius: 5px;
            width: '100%';
        }
        .listitem:hover {
            color: var(--brand-color);
            background-color: var(--brand-color-light);
            border: 1px solid var(--brand-color);
        }
        .listitem-selected {
            display: inline-block;
            cursor: pointer;
            padding: 5px;
            margin: 3px;
            background-color: var(--brand-color);
            color:var(--white);
            border: none;
            border-radius: 10px;
        }
        .listitem-selected:hover {
            background-color: var(--brand-color);
        }



        .full-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 9999;
            overflow-y: auto; 
            background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent overlay */
            /* Add any other styles you want for the full screen */
          }
          
          .gig-refs-text {
            display: inline-block;
            margin-left: 5px;
            margin-right: 5px;
            color: #777777;
            font-size: 0.7em;
          }

          /* .time-ago-text {
            display: inline-block;
            margin-left: 5px;
            margin-right: 5px;
            color: #777777;
            font-size: 0.7em;
          } */


          .notification-item {
            border: 1px dashed var(--white); /* Green border color */
            padding: 10px;
            margin-bottom: 5px;
            cursor: pointer;
            background-color: var(--brand-color); /* Light gray background color */
            color: var(--white); /* Dark text color */
            border-radius: 5px;
            font-size: 0.9em;
           }
           .notification-item:hover {
                background-color: var(--white);
                color: var(--brand-color);
                transition: background-color 0.3s ease;
           }

           .notification-item-seen {
                border: 1px dashed var(--white); /* Green border color */
                padding: 10px;
                margin-bottom: 5px;
                cursor: pointer;
                background-color: var(--brand-color); /* Light gray background color */
                color: var(--brand-color-light); /* Dark text color */
                border-radius: 5px;
           }
           .notification-item-seen:hover {
            background-color: var(--brand-color-light); 
            color: var(--brand-color); 
            transition: background-color 0.3s ease;
           }

           .notification-time-ago-text {
                display: inline-block;
                margin-left: 0px;
                margin-right: 5px;
                font-size: 0.7em;
           }

           .notification-time-ago-text:hover {
                font-weight: bold; /* Optional: make the text bold on hover */
                text-decoration: underline; /* Optional: add underline on hover */
                cursor: pointer; /* Changes cursor to pointer to indicate interactivity */
            }

           .notification-icon {
                display: inline-block;
                width: 32px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                border-radius: 50%;
                color: var(--white);
                font-size: 16px;
                font-weight: bold;
                padding:5px;
            }




            .toggle-switch2 {
                width: 60px;
                height: 30px;
                background-color:#1a7037;
                border-radius: 15px;
                position: relative;
                cursor: pointer;
                transition: background-color 0.3s;
            }
            
            .toggle-switch2.active {
                background-color: #1a7037;
            }
            
            .toggle-circle {
                width: 22px;
                height: 22px;
                background-color: #ffffff;
                border-radius: 50%;
                position: absolute;
                top: 4px;
                left: 4px;
                transition: left 0.3s;
            }
            
            .toggle-switch2.active .toggle-circle {
                left: 32px;
            }


            
           

            /* Nav link styling */
            .nav-link {
                font-family: 'Lilita One', sans-serif;
                color: var(--white);
                font-weight: bold;
                padding: 10px 15px;
                display: block;
                text-decoration: none;
                border-radius: 5px;
                transition: background-color 0.3s ease;
            }

            .nav-link:hover {
                background-color: var(--white);
                color: var(--brand-color);
            }

            .nav-link.active {
                background-color: var(--white); 
                color: var(--brand-color); 
            }