input {
    border: none;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
}

.hoverBold:hover {
    font-weight: bold;
}

.main-app-container {
    display: grid;
    grid-template-columns: 5% 95%;
    height: 100vh;
}

.right-menu-container {
    display: grid;
    justify-content: center;
    margin-top: 20%;
}

.main-app-container-regular {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}

.main-body-container {
    /* padding: 3%;
    background: #F4F4F4; 
    display: grid;
    min-height: 100vh; */
    display: flex;
    flex-direction: column;
    /* align-items: flex-start; */
    gap: 24px;
    align-self: stretch;
}

.home-page-container {
    display: grid;
    justify-content: center;
    align-content: center;
    height: fit-content;
}

.home-page-flex {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-flow: row-reverse;
    gap: 5vw;
}

.loading-container {
    justify-content: center;
    display: flex;
    height: 84vh;
}

/* ----------------------------MAIN STRUCTURE---------------------------- */
.business-dashboard-main-container {
    display: flex;
    flex-direction: column;
    /* align-items: flex-start; */
    align-self: stretch;
}

/* ----------------------------BUSINESS TITLE---------------------------- */
.bsns-head-title {
    color: #00234D;
    white-space: nowrap;
}

.titleWithStatus {
    display: flex !important;
    column-gap: 1rem;
}

.head-section-main-container {
    display: flex;
    padding: 0px 59px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 40px;
    align-self: stretch;
}

/* ----------------------------CONTROLLER SECTION---------------------------- */

.action-controller-block {
    height: 62px;
    display: flex;              /* switch to flexbox */
    flex-direction: row;        /* lay children out in one row */
    align-items: center;        /* vertically center them */   /* horizontally center as a group */
    gap: 8px;                   /* space between icon and text */
}

/* ----------------------------MODAL SECTION---------------------------- */

.modal-add-employee-btn {
    background-color: #2B65F6;
    color: #FFFFFF;
    width: 187px;
    height: 46px;
    border: 1px solid #2B65F6;
}

.modal-add-employee-btn:hover {
    background-color: #FFFFFF;
    color: #2B65F6;
}

/* ----------------------------MODAL FORM---------------------------- */

.form-container {
    display: grid;
    grid-template-rows: 1fr;
    row-gap: 24px;
}

.form-container hr {
    width: 100%;
}

.modal-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.form-container-sal {
    display: grid;
    grid-template-rows: auto;
    row-gap: 10px;
}

.modal-row-sal-inp {
    display: grid;
    grid-template-columns: repeat(2, auto);
    width: 70%;
    justify-items: center;
    justify-self: center;
}

.el--2 {
    grid-column: 2;
}

/* ----------------------------INPUTS---------------------------- */
.answer-picker-yn {
    display: flex;
    justify-content: space-between;
}

.modal-error-message {
    font-size: 15px;
    color: rgb(228, 15, 15);
}

.overflowProtector {
    min-height: 46px;
}

/* ----------------------------TOAST---------------------------- */

/* for Internet Explorer, Edge */
/* for Firefox */
/* .coverToast{
    max-height: 100vh;
    -ms-overflow-style: none; 
    scrollbar-width: none; 
    overflow-y: auto;
} */
/* for Chrome, Safari, and Opera */
/* .coverToast::-webkit-scrollbar {
    display: none; 
} */

/* ----------------------------Shared Classes---------------------------- */

.input-container {
    display: flex;
    flex-direction: column;
    width: 237.19px;
}

.input-container label {
    font-size: 18px;
    line-height: 32px;
    letter-spacing: 0.25px;
}

.salary-input-container {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 237.19px;
}

.salary-input-container label {
    font-size: 17px;
    line-height: 32px;
    letter-spacing: 0.25px;
}

.input-container-agent {
    display: grid;
    width: 100%;
    grid-column: 1/3;
}

.block-box-shadow {
    -webkit-box-shadow: 0px 0px 4px 0px rgba(242, 242, 242, 0.5);
    box-shadow: 0px 0px 4px 0px rgba(242, 242, 242, 0.5);
}

.common-text {
    font-size: 16px;
    line-height: 31px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 38px;
}

.ready-to-upload {
    background-color: #2B65F6;
    color: white;
    cursor: pointer;
    border: 1px solid white;
    border-radius: 4px;
}

.ready-to-upload:hover {
    background-color: white;
    border: 1px solid #2B65F6;
    color: #2B65F6;
}

#cover-text-style-26 {
    font-size: 26px;
    line-height: 31px;
    letter-spacing: 1.48;
}

.cover-text-style-17 {
    font-size: 17px;
    line-height: 32px;
    letter-spacing: 0.25px;
    height: 32px;
    direction: ltr;
    text-align: center;
}

.cover-grey-text {
    font-size: 14px;
    line-height: 31px;
    letter-spacing: 0.8px;
    color: #9F9F9F;
    margin: 0 !important;
}

.cover-font-size22 {
    font-size: 22px;
    line-height: 26px;
    letter-spacing: 1.26px;
    text-align: center;
    color: #00234D;
}

.cover-font-size18 {
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 1.26px;
    text-align: center;
    color: #00234D;
}
.fntSz-22 {
    font-size: 22px;
}

.fntSz-26 {
    font-size: 26px;
}

.xy-center {
    align-self: center;
    justify-self: center;
}

.d-flx-just-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.d-flex-around {
    display: flex;
    justify-content: space-around;
    gap: 24px;
}

.d-flex-around-agent {
    display: flex;
    justify-content: space-around;
    gap: 16px;
}

.bk-DAE6F0 {
    background: #DAE6F0;
}

.bk-white {
    background: #FFFFFF;
}

.bk-greyOut {
    background: #fafafa;
}

.ta-center {
    text-align: center;
    /* overflow: hidden; */
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

input[type="text"].bk-clear {
    text-align: center;
    width: 100%;
    background: transparent;
    font-size: 18px !important;
    padding: 8px 0px;
    margin-left: 30px;
}

input[type="text"]:disabled.bk-clear {
    background: transparent;
    width: 100%;
    text-align: center; 
    padding: 8px;
    margin-left: 0px !important;
}

input[type="text"].bk-sal {
    caret-color: #2B65F6;
    font-size: 18px !important;
}

.cursPointer {
    cursor: pointer;
}

.hr-break-line {
    width: 100%;
    border-color: black;
    margin-top: 48px;
    display: flex;
    justify-self: center;
    border-color: black;
    margin-top: 36px;
    margin-bottom: 13px;
    display: flex;
    /* justify-self: center; */
    place-self: center;
}

.invisibleIcon {
    height: 18px;
    width: 25px;
}

.gap10prcnt {
    gap: 10%
}


/* ----------------------------SCROLL BAR---------------------------- */

.modal-grid-body::-webkit-scrollbar {
    width: 18px;
}

.modal-grid-body::-webkit-scrollbar-thumb {
    background-color: #9b9b9bcc;
    border-radius: 9px;
    /* width: 18px; */
    height: 200px;
    /* outline: 1px solid slategrey; */
}

.modal-grid-body::-webkit-scrollbar-thumb:hover {
    background-color: #9B9B9B;
}

/*----------------------------datalist arrow------------*/

.arrow-remove[list]::-webkit-calendar-picker-indicator {
    display: none !important;
}