@import "./styles.css";

.admin-console-content[content="salary"] {
    flex-direction: column;
    justify-content: flex-start;
}

.admin-salary-frame {
    grid-area: frame;
    justify-self: center;
    display: grid;
    grid-template-areas:
        "header header header"
        "left center right"
        "footer footer footer";
    grid-template-rows: auto 1fr auto;
    grid-template-columns: auto 1fr auto;
    color: var(--grey50);
    font-weight: 500;
    background-color: var(--grey50);
    background-color: var(--dm3);
    width: 100%;
    height: 100%;
    box-shadow: var(--boxShadow);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    /*background-color: #233659;
    color: #565b73;*/
    font-weight: 400;
    font-size: 0.7rem;
}

.admin-salary-frame-header {
    grid-area: header;
    display: grid;
    justify-content: space-between;
    align-items: center;
    grid-template-areas:
        "search month-select userListBtn exportbtn";
    grid-template-columns: 1fr auto auto auto;
    column-gap: 0.4rem;
    padding: 0.8rem;
    /*height: 3rem;*/
    border-bottom: 1px solid var(--grey900);
}

.admin-salary-userListBtn {
    grid-area: userListBtn;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.5rem 1rem;
    color: var(--grey50);
    background-color: var(--indigo500);
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: var(--boxShadow);
    transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-salary-userListBtn:hover {
    cursor: pointer;
    box-shadow: none;
    background-color: transparent;
    color: var(--grey50);
}

.admin-salary-exportBtn {
    grid-area: exportbtn;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.5rem 1rem;
    color: var(--grey50);
    background-color: var(--indigo500);
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: var(--boxShadow);
    transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-salary-exportBtn:hover {
    cursor: pointer;
    box-shadow: none;
    background-color: transparent;
    color: var(--grey50);
}

.admin-salary-frame-footer {
    grid-area: footer;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.8rem;
    column-gap: 0.4rem;
    border-top: 1px solid var(--grey900);
}

.admin-salary-smsBtn {
    grid-area: smsBtn;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.5rem 1rem;
    color: var(--grey50);
    background-color: var(--indigo500);
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: var(--boxShadow);
    transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-salary-smsBtn:hover {
    cursor: pointer;
    box-shadow: none;
    background-color: transparent;
    color: var(--grey50);
}

.admin-console-modal-frame[content="salary-modal-sms"] {}

.admin-console-modal-frame[content="salary-modal-sms"] {}

.admin-console-modal-center[content="salary-modal-sms"] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.admin-salary-modal-sms-table {
    display: flex;
    flex-direction: column;
    font-weight: 400;
    user-select: text;
    height: 100%;
    width: 100%;
    overflow: auto;
    row-gap: 0.4rem;
}

.admin-salary-modal-sms-table-userRow {
    display: grid;
    grid-template-columns: 12rem 8rem 6rem 4rem;
    column-gap: 0.4rem;
    padding: 0.8rem;
}

.admin-salary-modal-sms-table-userRow:not(:last-child) {
    border-bottom: 1px solid var(--grey200);
}


.admin-salary-modal-sms-table-userRow-infoEl {}

.admin-salary-userSearch {
    grid-area: search;
    display: flex;
    width: 20rem;
    justify-content: flex-start;
    align-items: center;
}

.admin-salary-userSearch::before {
    content: "search";
    font-family: "material symbols rounded";
    font-weight: 200;
    font-size: 1.3rem;
    color: var(--grey600);
    margin-right: 0.5rem;
    line-height: 1;
}

.admin-salary-userSearch-input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    color: var(--grey600);
    /* background: var(--grey50); */
}

.admin-salary-monthSelector {
    grid-area: month-select;
    display: flex;
    flex-direction: row;
    column-gap: 0.4rem;
    align-items: center;
    justify-content: flex-start;
    font-size: 0.7rem;
}

.admin-salary-monthSelector::before {
    content: 'Payment in month';
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.65rem;
    padding-right: 0.4rem;
}

.admin-salary-monthSelector-month {
    display: flex;
    font-weight: 600;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    border: 1px solid transparent;
    color: var(--grey50);
    transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear, border 0.2s linear;
}

.admin-salary-monthSelector-month:hover {
    cursor: pointer;
    color: var(--indigo500);
    background-color: var(--lightBlue);
    border: 1px solid var(--indigo500);
}

.admin-salary-monthSelector-month[focus=true] {
    color: var(--indigo500);
    background-color: var(--lightBlue);
    color: var(--grey50);
    background-color: var(--green500);
}

.admin-salary-frame-left {
    grid-area: left;
    display: flex;
    flex-direction: column;
    /* background-color: var(--grey100); */
    border-right: 1px solid var(--grey200);
    width: 20rem;
    height: 100%;
    overflow: hidden;
}

.admin-salary-frame-center {
    grid-area: center;
    display: grid;
    grid-template-areas:
        'actions'
        'table';
    grid-template-rows: auto 1fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
    row-gap: 0.5rem;
    padding: 1rem;
}

.admin-salary-frame-center-actions {
    grid-area: actions;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    column-gap: 0.6rem;
    font-size: 0.65rem;
    height: 100%;
    width: 100%;
}

.admin-salary-frame-center-actions-actionBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    font-weight: 500;
    font-size: 0.6rem;
    padding: 0.4rem 0.6rem;
    color: var(--grey50);
    background-color: var(--indigo500);
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: var(--boxShadow);
    transition: background-color 0.2s linear, color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
}

.admin-salary-frame-center-actions-actionBtn:hover {
    cursor: pointer;
    background-color: var(--green500);
    box-shadow: none;
}

.admin-salary-frame-center-actions-actionBtn[select=true] {
    background-color: var(--green500);
    box-shadow: none;
}

.admin-salary-table {
    grid-area: table;
    display: grid;
    grid-template-areas:
        'list';
    color: var(--grey900);
    background-color: var(--grey100);
    width: 100%;
    height: 100%;
    overflow: auto;
    user-select: text;
    border-radius: 6px;
}

.admin-salary-table-userList {
    grid-area: list;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 1rem;
    /* row-gap: 0.4rem; */
}

.admin-salary-table-userList-spacerRow {
    /* display: none; */
    padding: none;
    margin: none;
}

.admin-salary-table-userList-userDiv {
    display: grid;
    grid-template-areas:
        'header'
        'info'
        'agreement'
        'list';
    background-color: var(--lightBlue);
    border-radius: 4px;
}

.admin-salary-table-userList-userDiv:not(:last-child) {
    margin-bottom: 0.8rem;
}

.admin-salary-table-userList-userDiv[user-show=false] {
    display: none;
}

.admin-salary-table-userList-userDiv-header {
    grid-area: header;
    display: grid;
    grid-template-columns: 10rem 8rem 12rem 8rem 8rem 8rem 8rem 8rem 8rem 8rem;
    grid-template-rows: 1fr;
    column-gap: 0.4rem;
    padding: 0.4rem;
    font-weight: 500;
    /* border-bottom: 1px solid var(--grey200); */
}

.admin-salary-table-userList-userDiv-info {
    grid-area: info;
    display: grid;
    grid-template-columns: 10rem 8rem 12rem 8rem 8rem 8rem 8rem 8rem 8rem 8rem;
    grid-template-rows: 1fr;
    column-gap: 0.4rem;
    padding: 0.4rem;
    /* border-bottom: 1px solid var(--grey200); */
}

.admin-salary-table-userList-userDiv-agreement {
    grid-area: agreement;
    display: grid;
    grid-template-columns: 12rem 10rem 10rem;
    grid-template-rows: 1fr;
    column-gap: 0.4rem;
    padding: 0.4rem;
    border-bottom: 1px solid var(--grey200);
}

.admin-salary-table-userList-userDiv-agreement-infoEl[ref="pre-month-agreement-type"]:not([approve-status=""])::after {
    content: "(" attr(approve-status) ")";
    padding-left: 0.2rem;

}

.admin-salary-table-userList-userDiv-list {
    grid-area: list;
    display: flex;
    flex-direction: column;
    padding: 0.4rem;
}

.admin-salary-table-userList-userDiv-list-header {
    display: grid;
    grid-template-columns: 24rem 4rem 4rem 4rem;
    font-weight: 500;
}

.admin-salary-table-userList-userDiv-list-pre {
    grid-area: pre;
    display: flex;
    flex-direction: column;
}

.admin-salary-table-userList-userDiv-list-current {
    grid-area: current;
    display: flex;
    flex-direction: column;
}

.admin-salary-table-userList-userDiv-list-row {
    display: grid;
    grid-template-columns: 24rem 4rem 4rem 4rem;
}

/* export modal */
.admin-console-modal-frame[content="salary-modal-export"] {
    top: 5%;
    height: 90%;
    left: 10%;
    width: 80%;
    overflow: hidden;
}

.admin-console-modal-center[content="salary-modal-export"] {
    display: grid;
    grid-template-areas:
        'actions'
        'table';
    grid-template-rows: auto 1fr;
    overflow: hidden;
}

.admin-salary-modal-export-actions {
    grid-area: actions;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    column-gap: 0.6rem;
    font-size: 0.65rem;
    height: 100%;
    width: 100%;
    padding: 0.6rem;
    border-bottom: 1px solid var(--grey200);
}

.admin-salary-modal-export-actions-actionBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    font-weight: 500;
    font-size: 0.6rem;
    padding: 0.4rem 0.6rem;
    color: var(--grey50);
    background-color: var(--indigo500);
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: var(--boxShadow);
    transition: background-color 0.2s linear, color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
}

.admin-salary-modal-export-actions-actionBtn:hover {
    cursor: pointer;
    background-color: var(--green500);
    box-shadow: none;
}

.admin-salary-modal-export-actions-actionBtn[select=true] {
    background-color: var(--green500);
    box-shadow: none;
}

.admin-salary-modal-export-table {
    grid-area: table;
    display: flex;
    flex-direction: column;
    user-select: text;
    overflow: auto;
    height: 100%;
    width: 100%;
}

.admin-salary-modal-export-table-row {
    display: flex;
    flex-direction: row;
}

.admin-salary-modal-export-exportBtn {
    grid-area: exportbtn;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.5rem 1rem;
    /* width: 12rem; */
    color: var(--grey50);
    background-color: var(--indigo500);
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: var(--boxShadow);
    transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-salary-modal-export-exportBtn:hover {
    cursor: pointer;
    box-shadow: none;
    background-color: transparent;
    color: var(--indigo500);
}

.admin-salary-modal-export-table-userRow {
    display: grid;
    grid-template-areas:
        'selector info'
        '. lines';
    grid-template-columns: auto 1fr;
    column-gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    font-weight: 400;
    user-select: text;
    transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-salary-modal-export-table-userRow[select="true"] {
    /* background-color: var(--lightGreen); */
}

.admin-salary-modal-export-table-userRow[select="false"] {
    background-color: var(--grey100);
}

.admin-salary-modal-export-table-userRow:hover {
    background-color: var(--lightBlue);
}

.admin-salary-modal-export-table-userRow-selector {
    grid-area: selector;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-family: "material symbols rounded";
    font-weight: 300;
    font-size: 1.3rem;
    color: var(--indigo500);
    line-height: 1;
    width: fit-content;
    transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-salary-modal-export-table-userRow-selector:hover {
    cursor: pointer;
}

.admin-salary-modal-export-table-userRow-selector[select="true"] {
    color: var(--green500);
}

.admin-salary-modal-export-table-userRow-selector[select="true"]:hover {
    color: var(--indigo500);
}

.admin-salary-modal-export-table-userRow-selector[select="false"] {}

.admin-salary-modal-export-table-userRow-selector[select="false"]:hover {
    color: var(--green500);
}

.admin-salary-modal-export-table-userRow-userInfo {
    grid-area: info;
    display: grid;
    justify-content: flex-start;
    align-items: center;
    grid-template-columns: 10rem 4rem;
    column-gap: 0.4rem;
    font-weight: 500;
    font-size: 0.7rem;
}

.admin-salary-modal-export-table-userRow-infoEl {}

.admin-salary-modal-export-table-userRow:not(:last-child) {
    border-bottom: 1px solid var(--grey200);
}

.admin-salary-modal-export-table-userRow-userLines {
    grid-area: lines;
}

.admin-salary-modal-export-table-userRow-salaryLine {
    display: grid;
    grid-template-columns: 14rem 6rem 6rem 6rem 6rem 8rem 1fr;
    flex-direction: row;
    column-gap: 0.4rem;
    font-size: 0.7rem;
    /* color: var(--grey700); */
}

.admin-salary-modal-export-table-salaryLine-data {}

.admin-salary-modal-export-table-salaryLine-data[ref="description"] {
    font-style: italic;
}

/* custom export modal */
.admin-salary-customBtn {
    grid-area: smsBtn;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.5rem 1rem;
    color: var(--grey50);
    background-color: var(--indigo500);
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: var(--boxShadow);
    transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-salary-customBtn:hover {
    cursor: pointer;
    box-shadow: none;
    background-color: transparent;
    color: var(--grey50);
}

.admin-console-modal-frame[content="salary-modal-custom"] {
    width: 70%;
    left: 17.5%;
    display: grid;
}

.admin-console-modal-center[content="salary-modal-custom"] {
    display: grid;
    grid-template-areas:
        'userList salaryList';
    grid-template-columns: 14rem 1fr;
    overflow: hidden;
}

.admin-salary-modal-custom-userList {
    grid-area: userList;
    display: flex;
    flex-direction: column;
    font-size: 0.7rem;
    font-weight: 400;
    user-select: text;
    height: 100%;
    width: 100%;
    overflow: auto;
    border-right: 1px solid var(--grey200);
}

.admin-salary-modal-custom-userList-userDiv {
    display: flex;
    transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear, border 0.2s linear;
    padding: 0.4rem 0.6rem;
}

.admin-salary-modal-custom-userList-userDiv[user-salary=true] {
    color: var(--green500);
}

.admin-salary-modal-custom-userList-userDiv:hover {
    cursor: pointer;
    background-color: var(--lightBlue);
}

.admin-salary-modal-custom-salaryList {
    grid-area: salaryList;
    display: flex;
    flex-direction: column;
    font-weight: 400;
    height: 100%;
    width: 100%;
    overflow: auto;
}

.admin-salary-modal-custom-salaryList-salaryLine {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    grid-template-columns: 25rem 5rem 5rem 5rem 5rem 12rem 8rem;
    column-gap: 0.4rem;
    padding: 0.4rem;
    font-size: 0.7rem;
    width: 100%;
}

.admin-salary-modal-custom-salaryList-salaryLine:hover {
    background-color: var(--lightBlue);
}

.admin-salary-modal-custom-salaryList-salaryLine:not(:last-child) {
    border-bottom: 1px solid var(--grey200);
}

.admin-salary-modal-custom-salaryList-salaryLine-infoEl {}

.admin-salary-modal-custom-salaryList-salaryLine-input {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear, border 0.2s linear;
}

.admin-salary-modal-custom-salaryList-salaryLine-input[ref="user-ref"] {
    text-align: start;
}

.admin-salary-modal-custom-salaryList-salaryLine-input[ref="description"] {
    text-align: start;
}

.admin-salary-modal-custom-salaryList-salaryLine-input:hover {
    /* background-color: var(--grey50); */
    border: 1px solid var(--indigo500);
}

.admin-salary-modal-custom-salaryList-salaryLine-input:focus {
    /* background-color: var(--lightBlue); */
    background-color: var(--grey50);
    border: 1px solid var(--indigo500);
}

.admin-salary-modal-custom-exportRef-input {
    grid-area: input;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
    font-size: 0.65rem;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    border: 1px solid var(--lightBlue);
    color: var(--indigo500);
    background-color: var(--lightBlue);
    transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear, border 0.2s linear;
}

.admin-salary-modal-custom-exportRef-input:hover {
    /* background-color: var(--lightBlue); */
    border: 1px solid var(--indigo500);
}

.admin-salary-modal-custom-exportRef-input:focus {
    background-color: var(--lightBlue);
    /* background-color: var(--grey50); */
    border: 1px solid var(--indigo500);
}

.admin-salary-modal-custom-exportBtn {
    grid-area: exportBtn;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.4rem 0.8rem;
    color: var(--grey50);
    background-color: var(--indigo500);
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: var(--boxShadow);
    transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-salary-modal-custom-exportBtn:hover {
    cursor: pointer;
    box-shadow: none;
    background-color: transparent;
    color: var(--indigo500);
}

.admin-salary-modal-custom-exportBtn[active="false"] {
    background-color: var(--grey200);
    color: var(--grey500);
    box-shadow: none;
    pointer-events: none;
}

.admin-salary-modal-custom-salaryList-salaryLine-deleteBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 0.65rem;
    padding: 0.4rem 0.8rem;
    color: var(--grey50);
    background-color: var(--indigo500);
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: var(--boxShadow);
    transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-salary-modal-custom-salaryList-salaryLine-deleteBtn:hover {
    cursor: pointer;
    box-shadow: none;
    background-color: transparent;
    color: var(--indigo500);
}

/* salary userlist modal */
.admin-console-modal-frame[content="salary-modal-users"] {
    width: 90%;
    left: 5%;
    height: 90%;
    top: 5%;
    display: grid;
}

.admin-salary-modal-users-table {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: auto;
    font-size: 0.65rem;
    font-weight: 400;
}

.admin-salary-modal-users-table-userDiv {
    display: grid;
    grid-template-areas: 'info type num rates hours';
    grid-template-columns: 14rem 4rem auto auto 1fr;
    padding: 0.4rem;
    column-gap: 0.8rem;
    width: 100%;
    transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-salary-modal-users-table-userDiv:not(:last-child) {
    border-bottom: 1px solid var(--grey200);
}

.admin-salary-modal-users-table-userDiv:hover {
    background-color: var(--lightBlue);
}

.admin-salary-modal-users-table-userDiv-info {
    grid-area: info;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.admin-salary-modal-users-table-userDiv-type {
    grid-area: type;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.admin-salary-modal-users-table-userDiv-salaryNum {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.4rem;
    row-gap: 0.4rem;
}

.admin-salary-modal-users-table-userDiv-salaryNum-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: 500;
    /* color: var(--grey200); */
}

.admin-salary-modal-users-table-userDiv-salaryNum-input {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.65rem;
    padding: 0.4rem 0.4rem;
    border-radius: 4px;
    width: 4rem;
    /* border: 1px solid transparent; */
    border: 1px solid var(--grey200);
    transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear, border 0.2s linear;
}

.admin-salary-modal-users-table-userDiv-salaryNum-input:hover {
    /* background-color: var(--grey50); */
    border: 1px solid var(--indigo500);
}

.admin-salary-modal-users-table-userDiv-salaryNum-input:focus {
    /* background-color: var(--lightBlue); */
    background-color: var(--grey50);
    border: 1px solid var(--indigo500);
}

.admin-salary-modal-users-table-userDiv-rates {
    grid-area: rates;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    column-gap: 0.4rem;
}

.admin-salary-modal-users-table-userDiv-rates-field {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.4rem;
    row-gap: 0.4rem;
}

.admin-salary-modal-users-table-userDiv-rates-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: 500;
    /* color: var(--grey200); */
}

.admin-users-info-profile-agreement-rates-input {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.65rem;
    padding: 0.4rem 0.4rem;
    border-radius: 4px;
    width: 4rem;
    /* border: 1px solid transparent; */
    border: 1px solid var(--grey200);
    transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear, border 0.2s linear;
}

.admin-users-info-profile-agreement-rates-input:hover {
    /* background-color: var(--grey50); */
    border: 1px solid var(--indigo500);
}

.admin-users-info-profile-agreement-rates-input:focus {
    /* background-color: var(--lightBlue); */
    background-color: var(--grey50);
    border: 1px solid var(--indigo500);
}

.admin-salary-modal-users-table-userDiv-hours {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.4rem;
    font-weight: 500;
    white-space: nowrap;
}

.admin-salary-modal-users-table-userDiv-hours-field-input {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.65rem;
    padding: 0.4rem 0.4rem;
    border-radius: 4px;
    width: 4rem;
    /* border: 1px solid transparent; */
    border: 1px solid var(--grey200);
    transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear, border 0.2s linear;
}

.admin-salary-modal-users-table-userDiv-hours-field-input:hover {
    /* background-color: var(--grey50); */
    border: 1px solid var(--indigo500);
}

.admin-salary-modal-users-table-userDiv-hours-field-input:focus {
    /* background-color: var(--lightBlue); */
    background-color: var(--grey50);
    border: 1px solid var(--indigo500);
}