/* Global and main divs css */

/* Create Expensify Reg Font Family */
@font-face {
    font-family: 'ExpensifyNeueReg';
    src: url('../fonts/ExpensifyNeue-Regular.woff');
}
/* Create Expensify Bold Font Family */
@font-face {
    font-family: 'ExpensifyNeueBold';
    src: url('../fonts/ExpensifyNeue-Bold.woff');
}

/* Body object */
body {
    font-family: ExpensifyNeueReg;
    height: 100%;
    background: #0b1a0b;
    margin: 0px;
    padding: 0px;
}

/* Main Wrapper */
.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* Logo Object */
.logo {
    height: 35px;
}

/* Global Input */
.input {
    -webkit-appearance: none;
    padding: 10px;
    box-shadow: none;
    border: none;
    width: 100%;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.5;
    border-radius: 8px;
}

/* Global Input Invalid */
input:required:invalid,
input:focus:invalid {
    border: 2px solid #ff4d4d;
}

/* Global Button */
.button {
    margin: 10px 0px 0px 0px;
    background: #60d184;
    height: 40px;
    width: 100%;
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 20px;
    box-shadow: none;
    border: none;
}

/* Global Button Disabled */
.button:disabled {
    background: #798b7d;
    cursor: not-allowed;
}
.button:disabled:hover {
    background: #798b7d;
    cursor: not-allowed;
}

/* Global Button Hober */
.button:hover {
    background: #545151;
}

/* notification wrapper */
.notificationWrapper {
    display: none;
    flex-direction: row;
    align-items: center;
    position: fixed;
    top: 5%;
    right: 20px;
    padding: 20px 20px 20px 20px;
    width: 200px;
    border-radius: 8px;
    border: #798b7d 1px solid;
}

/* notification close Icon */
.notificationClose {
    background: none;
    border: none;
    color: #721c24;
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    height: 15px;
    right: 10px;
    top: 10px;
}

/* notification test */
.notificationText {
    display: flex;
    margin: 0px;
}

/* css for the add item form */

/* css add item form wrapper */
.dataTableForm  {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    background: #0f2820;
    padding: 20px 20px 20px 20px;
    width: 300px;
    border-radius: 8px;
    border: #798b7d 1px solid;
    z-index: 10;
}
/* css add item form Title */
.dataTableFormTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    font-size: 20px;
    margin-bottom: 20px;
    color: #798b7d;
}
/* css add item form Title */
.dataTableInputs {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
/* label for add form inputs*/
.addformLabel {
    font-size: 14px;
    margin-bottom: 3px;
    color: #798b7d;
}
/* label for add form inputs*/
.addFormInputDate {
    margin: 0px;
    width: 280px;
}
/* inputs for add form*/
.addFormInput {
    margin: 0px;
    width: 280px;
}
/* Add Form add button*/
.addItemButton {
    width: 100%;
}
/* Add Form Cancel button*/
.cancelItemButton {
    background: #798b7d;
    width: 100%;
}
.chatToAiButton {
    margin-left: 10px;
    width: auto;
    padding: 0px 10px 0px 10px;
}
.aiChatWrapper {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    background: #0f2820;
    padding: 20px 20px 20px 20px;
    width: 85vw;
    max-width: 400px;
    height: 600px;
    border-radius: 8px;
    border: #798b7d 1px solid;
    overflow: hidden;
    z-index: 10;
}
.aiChatClose {
    position: absolute;
    right: 5px;
    top: 10px;
    width: 30px;
    height: 30px;
    margin: 0px 10px 0px 0px;
    color: white;
    filter: invert(65%) sepia(13%) saturate(132%) hue-rotate(47deg) brightness(91%) contrast(85%);
    cursor: pointer;
}
.aiChatHeader {
    font-size: 20px;
    color: #798b7d;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.aiChatTitle{
    margin: 0px;
}
.aiChatMessages {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow-y: auto;
    flex-grow: 1;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #798b7d;
}
.aiChatInputWrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.aiChatInput {
    margin: 0px 0px 10px 0px;
    width: calc(100% - 20px);
}
.aiChatButtonWrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}
.aiChatSendButton {
    margin: 0px;
    margin-left: auto;
    right: 10px;
    width: 80px;
    background: #60d184;
}
.aiChatClearButton {
    margin: 0px;
    width: 80px;
    background: #ff4d4d;
}
.aiChatMessageContent {
    margin: 0px;
    padding: 10px;
    border-radius: 8px;
    width: 80%;
}
.userMessageContent {
    align-self: flex-end;
    background-color: #1ccd69;
    color: #000;
    margin: 5px;
}
.aiMessageContent {
    align-self: flex-start;
    background-color: #233c33;
    color: #fff;
    margin: 5px;
}

/* Css for the content */


/* content Wrapper */
.contentWrapper {
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: row;
}

/* actual content obj  */
/* Does not include mobile title */
.content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    margin: 20px;
    @media (max-width : 1042px) {
        width: calc(100% - 40px);
    }
}

/* Title for the content */
.contentTitle {
    height: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    color: #fff;
    margin: 5px 0px 20px 0px;
    width: 100%;
}
/* Title Img for the content */
.contentTitleImg {
    width: 40px;
    margin: 0px 10px 0px 0px;
    color: #fff;
}
/* Title Text for the content */
.contentTitleText {
    margin: 0px;
    font-size: 25px;
    font-weight: 550;
    @media (max-width : 1042px) {
        font-size: 20px;
    }
}
/* Left Content for mobile title */
.contentTitleLeft {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0px;
}
/* Right content for mobile title*/
.contentTitleRight {
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: end;
    margin: 0px;
    width: 100%;
}

/* Mobile menu toggle img */
.contentTitleImgRight {
    display: none;
    flex-direction: row;
    align-items: end;
    justify-content: start;
    margin: 0px;
    height: 35px;
    filter: invert(65%) sepia(13%) saturate(132%) hue-rotate(47deg) brightness(91%) contrast(85%);
    @media (max-width : 1042px) {
        display: flex;
    }
}

/* Css for the loading icon */

/* .loading Wrapper */
.loadingWrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* Loader div with css animation */
.loader {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    border: 4px solid #0000;
    border-radius: 50%;
    border-right-color: #1ccd69;
    animation: l15 1s infinite linear;
  }
  .loader::before,
  .loader::after {    
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
    animation: l15 2s infinite;
  }
  .loader::after {
    margin: 8px;
    animation-duration: 3s;
  }
  @keyframes l15{ 
    100%{transform: rotate(1turn)}
  }

  /* css for login screen */

/* Info text above inputs */
.infoText {
    color: #a9b4aa;
    font-size: 12px;
    margin-bottom: 10px;
}

/* Error wrapper for when there is an error */
.loginError {
    color: #ff0000;
    font-size: 12px;
}

/* Login content wrapper */
.loginContent {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* password wrapper for hide and see password icons */
.passwordWrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0px;
}

/* password lock icon */
.passwordLock {
    display: flex;
    padding: 10px;
    width: 23px;
    height: 23px;
    margin-bottom: 20px;
    background: #b1b8c7;
    border-radius: 0px 8px 8px 0px;
}

/* password unlock icon */
.passwordLockOpen {
    display: flex;
    padding: 10px;
    width: 20px;
    height: 23px;
    margin-bottom: 20px;
    background: #b1b8c7;
    border-radius: 0px 8px 8px 0px;
}

/* password input */
.passwordInput {
    width: 100%;
    margin-bottom: 20px;
    border-radius: 8px 0px 0px 8px;
}

/* username wrapper */
.usernameWrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0px;
}

/* username input */
.usernameInput {
    width: 100%;
}

/* login logo */
.loginLogo {
    height: 80px;
    margin-bottom: 20px;
}

/* Css for the menu and mobile menu items */

/* main menu wrapper */
.menu {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: start;
    border-right: #192e23 1px solid;
    width: 300px;
    @media (max-width : 1042px) {
        display: none;
    }
}
/* menu title */
.menuTitle {
    height: 80px;
    display: flex;
    flex-direction: row;
    color: #fff;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 0px 10px;
}
/* menu title text */
.menuTitleText {
    font-family: ExpensifyNeueBold;
    margin: 0px 0px 0px 10px;
    font-size: 25px;
}

/* menu item */
.menuItem {
    padding: 0px 0px 0px 10px;
    margin: 0px;
    height: 40px;
    display: flex;
    flex-direction: row;
    color: #fff;
    font-size: 15px;
    justify-content: start;
    align-items: center;
    cursor: pointer;
    width: 90%;
    border-radius: 5px;
}
/* menu item hover */
.menuItem:hover {
    background: #233c33;
}
/* menu item img hover */
.menuItem:hover .menuItemImg {
    filter: invert(76%) sepia(47%) saturate(468%) hue-rotate(82deg) brightness(90%) contrast(86%);
}

/* menu item img */
.menuItemImg {
    width: 20px;
    height: 20px;
    margin: 0px 10px 0px 0px;
    color: white;
    filter: invert(65%) sepia(13%) saturate(132%) hue-rotate(47deg) brightness(91%) contrast(85%);
}

/* menu Item Text */
.menuItemText {
    margin: 0px;
    font-size: 16px;
    font-weight: 500;
}

/* menu Toggle */
.menuToggle {
    margin: 0px 0px 0px 40px;
    cursor: pointer;
}

/* mobile menu wrapper */
.mobileMenu {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    background: #0f2820;
    padding: 0px 20px 20px 20px;
    width: 300px;
    border-radius: 8px;
    border: #798b7d 1px solid;
    z-index: 10;
}

/* mobile menu title */
.mobileTitle{
    height: 30px;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    color: #fff;
    margin: 5px 0px 20px 0px;
    width: 100%;
    @media (max-width : 1042px) {
        display: flex;
    }
}

/* mobile meny title text */
.mobileMenuTitleText {
    font-family: ExpensifyNeueBold;
    margin: 0px 0px 0px 5px;
    font-size: 20px;
}

/* close button for mobile menu */
.mobileMenuClose {
    position: absolute;
    right: 5px;
    top: 8px;
    width: 20px;
    height: 20px;
    margin: 0px 10px 0px 0px;
    color: white;
    filter: invert(65%) sepia(13%) saturate(132%) hue-rotate(47deg) brightness(91%) contrast(85%);
}

/* CSS for the table and paginiation */

.table {
    display: flex;
    flex-direction: column;
    width: calc(100% - 20px);
    justify-content: center;
}

/* Row for table header */
.tableHeadRow {
    height: 10px;
    padding: 10px;
    margin: 0px 0px 10px 0px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    color: #798b7d;
    width: 100%;
}

/* Cells for table headers */
.tableHeadCell {
    display: flex;
    justify-content: start;
    font-size: 14px;
    font-weight: 500;
    margin: 0px 20px 0px 0px;
    min-width: 100px;
}

/* Rows for table body */
.tableRow {
    height: 30px;
    padding: 10px;
    margin: 0px 0px 15px 0px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    color: #fff;
    background: #0f2820;
    border-radius: 8px;
    width: 100%;
}

/* cells for table body */
.tableCell {
    display: flex;
    justify-content: start;
    font-size: 14px;
    font-weight: 500;
    margin: 0px 20px 0px 0px;
    min-width: 100px;
    text-overflow: ellipsis;
    overflow:scroll;
}

/* Pagination wrapper */
.paginationWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0px 0px 0px;
    width: 100%;
    @media (max-width : 640px) {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

/* pagination left wrapper, page buttons and page count */
.paginationLeftWrapper {
    display: flex;
    justify-content: start;
    align-items: center;
    margin: 0px;
    font-size: 14px;
    font-weight: 500;
    color: #798b7d;
    width: 350px;
    @media (max-width : 640px) {
        margin-bottom: 10px;
        align-items: center;
        justify-content: center;
    }
}

/* pagination right wrapper, item count */
.paginationRightWrapper {
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    margin: 0px;
    font-size: 14px;
    font-weight: 500;
    color: #798b7d;
    width: 100%;
    @media (max-width : 640px) {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}
/* page counter, dispalys what page of total pages */
.pageCounter{
    display: flex;
    justify-content: end;
    align-items: center;
    margin: 0px 10px 0px 10px;
    font-size: 14px;
    font-weight: 500;
    color: #798b7d;
    @media (max-width : 640px) {
        margin-bottom: 10px;
    }
}
/* wrapper for the page buttons */
.pageButtonWrapper{
    display: flex;
    justify-content: end;
    align-items: center;
    margin: 0px;
    width: 280px;
    @media (max-width : 640px) {
        justify-content: center;
    }
}

/* page button */
.pageButton{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 0px 5px;
    background: none;
    color: #798b7d;
    height: 40px;
    width: auto;
    min-width: 25px;
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: none;
    border: #798b7d 1px solid;
}
/* page button disabled */
.pageButton:disabled {
    color: #000;
    border: #000 1px solid;
}
/* page button hover */
.pageButton:hover{
    background: #3f8a57;
}
/* space item between last/first page buttons and the rets of the buttons */
.pageSpacer{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 5px 0px 0px;
    background: none;
    color: #454f47;
    height: 40px;
    width: auto;
    min-width: 25px;
    border-radius: 10px;
    box-shadow: none;
}

/* action wrappper for choosing dates and searching and add button */
.actionsWrapper {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    margin: 0px 0px 20px 0px;
    width: 100%;
    @media (max-width : 800px) {
        justify-content: center;
        align-items: end;
    }
}
/* action wrapper left choosing dates and searching */
.actionsWrapperLeft {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    margin: 0px;
    width: 100%;
    @media (max-width : 800px) {
        flex-direction: column;
        align-items: start;
        justify-content: start;
    }
}
/* wrapper around the date picker and labe; */
.dateActionWrapper{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    @media (max-width : 800px) {
        margin-bottom: 10px;
    }
}
/* action wrapper right for the add button */
.actionsWrapperRight {
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    margin: 0px 0px 0px 0px;
    width: 118px;
}
/* label for the date pickers */
.actionLabel{
    display: flex;
    margin: 0px 10px 0px 0px;
    font-size: 18px;
    font-weight: 500;
    color: #798b7d;
    width:auto;
}
/* date picker */
.actionDateInput{
    -webkit-appearance: none;
    padding: 10px;
    box-shadow: none;
    border: none;
    display: flex;
    margin: 0px 10px 0px 0px;
    width:auto;
    border-radius: 8px;
    color: #798b7d;
}

/* add button */
.addButton{
    margin: 0px;
    width: 80px;
}

/* search input */
.searchInput{
    border-radius: 8px;
    height: 20px;
    margin: 0px 0px 0px 20px;
    width: 200px;
    @media (max-width : 800px) {
        margin: 0px;
    }
}
/* to label for date picker */
.toLabel{
    @media (max-width : 800px) {
        margin-right: 33px;
    }
}

/* save button for date pickers */
.saveButton{
    margin: 0px 0px 0px 20px;
    width: 80px;
}

/* data table body */
.dataTableBody {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: start;
    align-items: center;
    margin: 0px 0px 20px 0px;
    color: #798b7d;
}