@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;700&display=swap');

/* Your custom CSS rules go here */


/* For example: */

body {}

body {
    background-color: rgb(219, 214, 211);
    font-family: 'Comfortaa', cursive !important;
}

a {
    color: black;
}

a:hover {
    color: red;
    text-decoration: none;
}

.bgg {
    background-color: rgb(219, 214, 211);
}

.card {
    border-radius: 10px;
    background-color: white;
    padding: 10px;
}

ul>li {
    margin-top: 10px;
    padding-top: 15px;
    border-radius: 10px;
}

.nav-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}


/* Style for the user name */

.nav-username {
    margin-right: 10px;
}


/* Style for the logout icon */

.nav-logout {
    width: 24px;
    height: 24px;
}

.bottom-div {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 90%;
    padding: 40px;
    text-align: center;
    /* Add any other styles you want for the div */
}

#finalTranscriptionResult {
    overflow: auto;
    height: 80vh;
    margin-bottom: 40px;
}


/* Add custom CSS for animation */

@keyframes pulse {
    0% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(1.4);
    }
    100% {
        transform: scale(1.2);
    }
}


/* Add custom CSS for animation */

.pulse {
    animation: pulse 1s infinite;
    color: red;
}

svg,

/* img {
    display: block;
} */

html,

/* body {
    height: 100%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F8FFAE;
    background: -webkit-linear-gradient(-65deg, #43C6AC, #F8FFAE);
    background: linear-gradient(-65deg, #43C6AC, #F8FFAE);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
} */

.bgg {
    background-color: rgb(219, 214, 211);
}

@keyframes spin {
    from {
        transform: rotateZ(0);
    }
    to {
        transform: rotateZ(1turn);
    }
}

.btn-side {
    position: fixed;
    width: auto;
    min-width: 250px;
    height: 56px;
    /* box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .07); */
    display: flex;
    justify-content: left;
    align-items: start;
    /* padding-left: 24px; */
    /* padding-right: 24px; */
    border-radius: 4px;
    user-select: none;
    -webkit-user-select: none;
}

.custom-loader {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #000000;
    color: #000000;
    box-shadow: 0 0 0 3px;
    position: relative;
    animation: d2-0 2s infinite linear;
}

.custom-loader {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #000000;
    color: #000000;
    box-shadow: 0 0 0 6px;
    position: relative;
    animation: d2-0 2s infinite linear;
}

.custom-loader:before,
.custom-loader:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    inset: 0;
    background: #000000;
    transform: rotate(0deg) translate(36px);
    animation: d2 1s infinite;
}

.custom-loader:after {
    animation-delay: -.5s
}

@keyframes d2-0 {
    100% {
        transform: rotate(1turn)
    }
}

@keyframes d2 {
    100% {
        transform: rotate(1turn) translate(40px)
    }
}

.custom-loader {
    position: fixed;
    /* Fixed positioning makes the loader stay in the same place even if the page is scrolled */
    top: 50%;
    /* Position the loader at the center, vertically */
    left: 50%;
    /* Position the loader at the center, horizontally */
    transform: translate(-50%, -50%);
    /* Ensures the center of the loader is the point that's actually centered */
    z-index: 9999;
    /* Makes the loader appear on top of all other elements */
    /* Other styles... */
}

.bgg {
    background-color: rgb(219, 214, 211);
}

#tbody>tr:hover {
    cursor: pointer;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    background-color: black;
    color: white;
    border: none;
    border-radius: 5px;
    transition: box-shadow 0.3s ease;
}

.dataTable_filter {
    background-color: darkblue !important;
}

#dataTable tbody tr {
    padding: 10px;
    /* Adjust as needed */
}

#dataTable {
    border-radius: 10px;
    /* Adjust as needed */
}

#dataTable tbody tr td {
    padding: 10px 10px 10px 10px;
    /* Adjust as needed */
}

.fc-header-toolbar {
    background-color: #f8f9fa;
    border: none;
}


/* Customize the calendar event container */

.fc-event-container {
    background-color: #007bff;
    color: #fff;
}


/* Customize the calendar event title */

.fc-event-title {
    font-size: 14px;
}

.fc-event-title-container {
    background-color: rgb(48, 61, 78);
    color: white;
}

.fc-toolbar-title {
    font-size: 20px !important;
}

.card {
    /* From https://css.glass */
    /* background: rgba(255, 255, 255, 0.24) !important;
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5.8px);
    -webkit-backdrop-filter: blur(5.8px);
    border: 1px solid rgba(255, 255, 255, 0.4); */
    /* From https://css.glass */
    /* From https://css.glass */
    /* background: rgba(255, 255, 255, 0.07);    */
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    border: 1px solid rgba(255, 255, 255, 0.89);
}


/* upload proceedings accordian */