/*-- Imports --*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/*--General--*/

body {
    background-color: rgb(30, 37, 65);
}

/*--Fonts--*/

h1 {
    color: white;
    font-family: "Poppins", sans-serif;
    font-size: 3rem;
    text-align: center;
}

h2 {
    color: white;
    font-family: "Poppins", sans-serif;
    font-size: 3rem;
}

a{
    font-family: "Poppins", sans-serif;
    font-size: 2.0rem;
    color: white;
    text-decoration: none;
    margin: 0 10px 0 10px;
    transition: 0.5s;
}

a:hover {
    color: rgb(192, 192, 192);
}

/*--Sections--*/

header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#logo {
    width: 450px;
    height: auto;
    margin: 20px 0 0 20px;
}

main {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 5%;
}

.main-dashboard {
    margin-top: 3%;
}

.dashboard-content {
    display: flex;
    flex-direction: column;
    width: 80%;
    margin-bottom: 150px;
}

.returnButton{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 20px;
}

.returnButton a{
    justify-content: center;
    margin-right: 10px;
    margin-top: 1.5%;
    vertical-align: middle;
}


/*--Table--*/

table,
#roundEurosText{
    font-family: "Poppins", sans-serif;
    font-size: 1.3rem;
    color: white;
    width: 100%;
    border-collapse: collapse;
    margin-top: 80px;
    table-layout: fixed;
}


table, th, td {
    border: none;
    border-bottom: 1px solid #ffffff;
}

th, td {
    padding: 15px;
    text-align: left;
    width: 28%;
}

th {
    color: rgb(217, 185, 109);
    text-align: right;
}

#usersTableHeader{
    text-align: left;
}

#usersTableHeaderLeft{
    text-align: left;
    color: rgb(217, 185, 109);
    width: 10%;
}

.u-edit-table tr td {
    text-align: left;
}

.u-edit-table tr td input{
    width: auto;
    text-align: left;
    margin-right: 15px;
}

td {
    text-align: right;
    max-width: 100px;
    white-space: nowrap;
    /*overflow: hidden;*/
    text-overflow: ellipsis;

}

td p,
td a{
    /*max-width: 120px;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

thead {
    background-color: transparent;
}

#r_period,
#r_period input,
#r_period h3{
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#companyName{
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 180px;
}

#companyHeader{
    text-align: center;
    width: 180px;
}

#r_periodnoflow{
    text-align: center;
}

td input {
    /*width: 40px;*/
    width: 100%;
    background-color: transparent;
    color: white;
    box-sizing: border-box;
    padding: 0;
    border: none;
    font-family: "Poppins", sans-serif;
    font-size: 1.3rem;
    text-align: right;
    border-bottom: 1px dashed white;
}

td select,
select {
    width: 100%;
    max-height: 40px;
    max-width: 500px;
    background-color: transparent;
    color: white;
    opacity: 0.5;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: none;
    font-family: "Poppins", sans-serif;
    font-size: 1.3rem;
    text-align-last: center; /* Center the selected option */
    -webkit-appearance: none; /* Remove default select dropdown styling for Chrome */
    -moz-appearance: none; /* Remove default select dropdown styling for Firefox */
    appearance: none; /* Remove default select dropdown styling for other browsers */
}

select {
    margin: 60px auto 0 auto;
    border: 2px solid rgb(255, 255, 255, 0.3);
    vertical-align: middle;
}

.select-role{
    /*margin: auto 0 auto 15px;*/
    margin: 1.25% 0 0 15px;
    vertical-align: middle;
    width: 200px;
}

td input::placeholder {
    color: white;
    opacity: 0.5; /* Placeholder text will be half transparent */
}

.edit-select {
    color: white;
    opacity: 1;
}

#u_editInvestID {
    width: 9%;
}

#u_editRole {
    width: 9%;
}

#u_editNames{
    width: 15%;
}

.td-empty{
    color: #5a5a5a;
    text-align: center;
}


/*--Objects--*/

#wing {
    width: 45%;
    height: auto;
}

.ls-box {
    display: flex;
    justify-content: center;
    /*align-items: center;*/
    flex-direction: column;
    max-width: 450px;
    min-width: 350px;
}

.ls-header {
    display: flex;
    /*justify-content: space-around;*/
    flex-direction: row;
    margin-bottom: 50px;
}

.ls-header h2 {
    margin-left: auto;
    margin-right: auto;
}

.ls-inactive a {
    color: rgb(157, 157, 157);
}

.ls-inactive a:hover {
    color: rgb(217, 185, 109);
}

.ls-active {
    border-bottom: 1px solid rgb(217, 185, 109);
    padding-bottom: 7px;
}

.ls-active a {
    color: rgb(217, 185, 109);
    padding: 0 10px;
}

.ls-form {
    display: flex;
    flex-direction: column;
}

.ls-form div {
    margin: 10px 0;
    margin-bottom: 40px;
}

.ls-form input {
    font-family: "Poppins", sans-serif;
    width: 80%;
    height: 30px;
    border: none;
    padding: 5px;
    color: white;
    background-color: transparent;
    border-bottom: 2px solid grey;
    font-size: 1.3rem;
    transition: 0.2s;
}

.ls-form input:focus {
    outline: none;
    border-bottom: 2px solid white;
}

.ls-form i {
    color: white;
    font-size: 2rem;
    margin: auto 10px auto 0;
    vertical-align: middle;
}

.ls-buttons {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin-top: 60px;
    padding: 0 20px;
}

button {
    font-family: "Poppins", sans-serif;
    border-radius: 20px;
    background-color: rgb(217, 185, 109);
    border: none;
    color: white;
    font-size: 1.3rem;
    cursor: pointer;
    transition: 0.5s;
}

.ls-buttons button {
    width: 45%;
    height: 40px;
}


button:hover {
    background-color: rgb(182, 154, 91);
    /*color: rgb(187, 187, 187);*/
}

#ls-fyp {
    background-color: transparent;
    font-size: 0.8rem;
    color: rgb(157, 157, 157);
    vertical-align: middle;
    margin: auto 0;
}

#ls-fyp:hover {
    color: rgb(255, 255, 255);
}

#signup-button {
    justify-content: flex-end;
}

.errorbar h3 {
    font-family: "Poppins", sans-serif;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    color: #d0d0d0;
    background-color: darkred;
    font-size: 1.3rem;
    margin: 0 auto;
    margin-bottom: 20px;
    width: fit-content;
    padding: 10px 20px;
}

.errorbarTable h3 {
    font-family: "Poppins", sans-serif;
    display: flex;
    border-radius: 20px;
    flex-direction: row;
    justify-content: center;
    color: #d0d0d0;
    background-color: darkred;
    font-size: 1.3rem;
    margin: 0 auto;
    margin-top: 60px;
    width: fit-content;
    padding: 10px 20px;
}

.successMessage h3 {
    font-family: "Poppins", sans-serif;
    display: flex;
    border-radius: 20px;
    flex-direction: row;
    justify-content: center;
    color: #ffffff;
    background-color: darkgreen;
    font-size: 1.3rem;
    margin: 0 auto;
    margin-top: 60px;
    width: fit-content;
    padding: 10px 20px;
}

.logout-form {
    margin: auto 15px;
    padding: 2px 5px;
}

#logout-button {
    width: 100%;
    border-radius: 15px;
    padding: 3px 15px;
}

#wing-dashboard {
    width: 45%;
    position: absolute;
    z-index: -1;
    margin: 40px auto 0 auto;
}

#welcome-message {
    text-align: center;
    margin-top: 1%;
}

.edit-button {
    padding-top: 16px;
    width: 57px;
}

.edit-button a {
    font-size: 1.3rem;
}

.edit-button i {
    transition: 0.4s;
}

.edit-button i:hover,
.reporting-button i:hover {
    color: #9d9d9d;
}


.reporting-button {
    background-color: transparent;
    font-size: 1.8rem;
    padding: 0;
    padding-right: 5px;
}

.reporting-button i {
    transition: 0.4s;
}

.reporting-button:hover {
    background-color: transparent;
}

.reporting-form td {
    padding: 7px 15px;
}

.edit-delete-button {
    text-align: center;
    justify-content: center;
}

.user-table td {
    text-align: left;
}

.admin-apps {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: transparent;
    margin-top: 60px;
}

.admin-app {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*background-color: rgb(217,185,109);*/
    width: 320px;
    font-family: "Poppins", sans-serif;
    font-size: 2.0rem;
    color: white;
    margin: 25px;
    padding: 50px;
    -webkit-backdrop-filter: blur(35px);
    backdrop-filter: blur(35px);
    /*box-shadow: inset 0 0 0 2000px rgba(225, 225, 225, 0.3);*/
    border: 1px solid rgba(225, 225, 225, 0.09);
    border-radius: 40px;
    transition: 0.5s;
    cursor: pointer;
}

.admin-app:hover {
    box-shadow: inset 0 0 0 2000px rgb(217, 217, 217, 0.3);
}

.admin-app i {
    margin: auto;
    margin-bottom: 40px;
    font-size: 4.0rem;
}

.admin-app h3 {
    margin: auto;
}

.user-edit td {
    max-width: 300px;
}

.user-edit td input {
    text-align: left;
}

.u-edit-textareas {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#save-button {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 4px 70px;
    margin-top: 30px;
}

.u-edit-textareas textarea {
    width: 98%;
    height: 100px;
    background-color: transparent;
    color: white;
    border: 1px solid rgb(255, 255, 255);
    font-family: "Poppins", sans-serif;
    font-size: 1.3rem;
    padding: 10px;
    margin: 10px 0;
    resize: vertical;
}

.reminder-notes {
    width: 95%;
    min-height: 30px;
    height: 30px;
    background-color: transparent;
    color: white;
    border: 1px solid rgb(255, 255, 255);
    font-family: "Poppins", sans-serif;
    font-size: 1.3rem;
    padding: 10px;
    margin: 0;
    margin-bottom: 10px;
    resize: vertical;
}

.reminder-notes-form {
    display: flex;
    justify-content: center;
}

.reminder-notes-form button{
    margin: 10px 10px 24px 0;
}

.reminder-notes-td{
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.reminder-notes-tr {
    border-top: none;
}

.reminder-entries td{
    border-bottom: none;
}

.reminders-period-selector{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 20px;
}

.reminders-period-selector i{
    font-size: 30px;
    margin: 25px 0 0 20px;
    color: rgb(217, 185, 109);
    transition: 0.5s;
}

.reminders-period-selector i:hover{
    color:  rgb(182, 154, 91);
    cursor: pointer;
}

#u-edit-textareas-date {
    /*width: 98%;*/
    width: auto;
    height: 30px;
    background-color: transparent;
    color: white;
    border: 1px solid rgb(255, 255, 255);
    font-family: "Poppins", sans-serif;
    font-size: 1.3rem;
    /*padding: 10px;*/
    /*margin: 10px 0;*/
}

.logo-upload{
    display: flex;
    flex-direction: row;
    margin-top: 5px;
}

.logo-upload input{
    margin: auto 0 auto 20px;
    font-family: "Poppins", sans-serif;
    width: 80%;
    height: 30px;
    border: none;
    padding: 5px;
    color: white;
    background-color: transparent;
    /*border-bottom: 2px solid grey;*/
    font-size: 1.3rem;
    transition: 0.2s;
}

.logo-upload p{
    font-family: "Poppins", sans-serif;
    font-size: 1.8rem;
    color: white;
    text-decoration: none;
    margin: auto 10px;
}

#loadMoreButton {
    display: block;
    margin: 10px auto;
    padding: 10px 20px;
    border-radius: 20px;
    background-color: transparent;
    color: rgb(217, 185, 109);
    font-size: 1.3rem;
    cursor: pointer;
    transition: 0.5s;
}

#loadMoreButton:hover {
    color: rgb(182, 154, 91);
}

.s-form, .s-form h3, .s-form a{
    color: white;
    font-family: "Poppins", sans-serif;
    font-size: 1.5rem;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    line-height: 45px;
}

#u-role,
#u-sector{
    color: white;
    opacity: 1.0;
    text-align: left;
    text-align-last: left;
}



#companySelect{
    color: white;
    background-color: rgb(30, 37, 65);
    width: 30%;
    padding: 10px;
    border: 1px solid rgba(204, 204, 204, 0.5);
    border-radius: 4px;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    margin: 20px auto 0 auto;
}

footer{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 20px;
}

footer a{
    font-size: 1.4rem;
}

.index-footer{
    margin-top: 140px;
}

#resetPwdButton{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.logoDisplayer{
    width: min-content;
    height: auto;
    padding: 20px;
    background-color: white;
    border-radius: 45px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.logoDisplayer img{
    max-width: 300px;
}

#roundEurosText{
    font-size: 1.1rem;
    margin-top: 25px;
}

.pdfGenerateButton{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
}

.glow {
    background-color: rgb(182, 154, 91); /* Green background */
    border: 4px solid rgba(182, 154, 91, 1);
    /*border: none; !* Remove borders *!*/
    /*color: white; !* White text *!*/
    padding: 25px 42px; /* Some padding */
    /*text-align: center; !* Centered text *!*/
    /*text-decoration: none; !* Remove underline *!*/
    /*display: inline-block; !* Make the container inline-block *!*/
    /*font-size: 16px; !* Increase font size *!*/
    /*margin: 4px 2px; !* Some margin *!*/
    cursor: pointer; /* Pointer/hand icon */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 0 20px rgba(182, 154, 91, 0.5); /* Initial box shadow */
    animation: glow 1.5s infinite alternate; /* Animation */
    margin-bottom: 200px;
}

@keyframes glow {
    from {
        box-shadow: 0 0 5px rgba(182, 154, 91, 0.5);
    }
    to {
        box-shadow: 0 0 20px rgba(182, 154, 91, 1);
    }
}

.glow:hover {
    border: 4px solid rgb(205, 173, 100);
    background-color: rgb(205, 173, 100);
}

.button-transparent{
    background-color: transparent;
    border: 1px solid rgb(205, 173, 100);
}

.button-transparent:hover{
    background-color: rgb(205, 173, 100);
}

#generatepdfbutton{
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 100px;
    margin-top: 30px;
    font-size: 1.5rem;
    border-radius: 20px;
}

/* Add this CSS to your stylesheet */
#custom-upload-button {
    padding: 15px 30px;
    margin: 50px auto;
    width: 300px;
    border-radius: 20px;
    background-color: rgb(30, 37, 65);
    color: white;
    font-size: 1.3rem;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
    /*Border white and 1px*/
    border: 0.5px solid white;
}

#custom-upload-button:hover {
    background-color: rgb(50, 60, 90);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

#file-name{
    font-family: "Poppins", sans-serif;
    font-size: 1.0rem;
    color: white;
    text-decoration: none;
    text-align: center;
    margin-top: 20px;
}

.save-success {
    background-color: #28a745 !important; /* Bootstrap's success color */
    border-color: #28a745 !important;
    color: #fff !important;
}

.save-success:hover {
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
}

.csvFileDownloader{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.csvFileDownloader button{
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin: 10px auto;
}

#rating-category{
    text-align: left;
    text-align-last: left;
    color: white;
}

.table-sm{
    margin-top: 15px;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
}

/* Table container for horizontal scrolling */
.table-responsive {
    overflow-x: auto;
    position: relative;
}
/* Sticky first column */
#ratings-table th:first-child,
#ratings-table td:first-child {
    position: sticky;
    left: 0;
    min-width: 250px; /* Adjust this value as needed */
    max-width: 300px; /* Optional, prevents excessive widening */
    width: 250px; /* Ensures browsers respect the min-width */
    background: rgb(30, 37, 65);
    z-index: 2;
    white-space: nowrap; /* Prevents text from wrapping */
    overflow: hidden; /* Prevents unwanted stretching */
    text-overflow: ellipsis; /* Truncates text with "..." if needed */
}

#ratings-table th:not(:first-child),
#ratings-table td:not(:first-child) {
    min-width: 150px; /* Adjust this value as needed */
    width: 150px; /* Ensures browsers respect the min-width */
    max-width: 200px; /* Optional: Prevents excessive widening */
}

/* Basic table styling (adjust as needed) */
#ratings-table {
    width: 100%;
    border-collapse: collapse;
}
#ratings-table th, #ratings-table td {
    border: 1px solid #ddd;
    padding: 8px;
    white-space: nowrap;
    text-align: center;
}
/* Optional: style the company name column differently */
#ratings-table th:first-child,
#ratings-table td:first-child {
    text-align: left;
}


/* iPad horizontal design */
@media only screen and (max-width: 1500px) {
    .admin-apps{
        flex-direction: column;
    }

    .admin-app-container{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
}