@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.gridpage-container {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.gridpage-head {
    flex: 0;
}

.gridpage-body {
    flex: 1;
    overflow-y: auto;
}

.gridpage-tail {
    flex: 0;
}

/* Show three dots for long texts cut in grid cells */
.custom-ellipsis {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.faicon-centered {
    display: inline-flex !important;
    align-items: center;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.ddbcontextmenu .k-menu.k-context-menu .k-item:focus > .k-link,
.ddbcontextmenu .k-menu.k-context-menu .k-item.k-focus > .k-link {
    box-shadow: none !important;
}

/*to add some padding for table data controls*/
td {
    text-align: left;
    padding: 10px;
    border-width: 1px;
}
/*to show the proper header and horizontal line*/
.infoheader {
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #4384B0;
    line-height: 0.1em;
    margin: 10px 0 20px;
}

    /*to show the header and horizontal line for any group*/
    .infoheader span {
        background: #fff;
        padding: 0 10px;
        font-size: 13px;
    }

/*to reduce the height of the gridrows*/
.k-grid th,
.k-grid td {
    padding-block: 0.2rem !important;
    font-size: 11px;
    padding-top: 33px
}

/*styling for the button of Send Invoice Form*/
.bottombutton {
    float: right;
    padding-top: 5px;
    padding-bottom: 0px;
}
/*applied styling for the labels controls of Send Invoice Form */
.lblcontrols {
    margin: auto;
}
/*styling of the box with oval border*/
.statusbox {
    height: 20px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 14px;
    padding-bottom: 3px;
    width: auto;
    white-space: nowrap;
    padding: 2px 10px;
}

/*styling of the navigation icon "back" in the title of the admin ui.*/
.nav-back {
    color: #0068b1 !important;
}

    .nav-back:hover {
        color: #02317f !important;
        cursor: pointer;
    }

.grid-btn-right {
    margin-left: auto;
}

.no-headers-form .k-form-legend {
    display: none;
}

.docpdf-review-custom-modal {
    height: calc(100vh - 10px);
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    margin-left: 15px !important;
    margin-right: 15px !important;
    padding: 5px !important;
}

.btnAction {
    border: 2px solid;
    border-radius: 20px;
    opacity: 1;
    margin-right: 0px;
    font-weight: bold;
    /*font-size: 0.85rem !important;*/
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: fit-content;
}

    .btnAction:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    .btnAction:disabled {
        color: white !important;
        background-color: #b6b5b5 !important;
        border: 2px solid #b6b5b5 !important;
        pointer-events: none;
    }

.btn-action-filled-blue {
    color: #fff !important;
    background-color: #006bb4 !important;
    border-color: #006bb4 !important;
}

    .btn-action-filled-blue:hover {
        color: #fff !important;
        background-color: #045a95 !important;
        border: 2px solid #045a95 !important;
    }

.btn-action-stroke-black {
    color: black;
    border-color: #707070;
    background-color: white;
}

    .btn-action-stroke-black:hover {
        color: white;
        border-color: #707070;
        background-color: #707070;
    }

.btn-action-stroke-blue {
    color: #006bb4;
    border-color: #006bb4;
    background-color: white;
}

    .btn-action-stroke-blue:hover {
        color: #045a95;
        border-color: #045a95;
        background-color: white;
    }

.btn-action-stroke-red {
    color: red;
    border-color: red;
    background-color: white;
}

    .btn-action-stroke-red:hover {
        color: white;
        border-color: red;
        background-color: red;
    }

.mt10 {
    margin-top: 10px;
}

.moderntab.k-tabstrip.telerik-blazor.k-tabstrip-top.ciptabstrip-tabstrip {
    height: 100%;
}

.moderntab.k-tabstrip-content.k-content.k-active {
    overflow-y: hidden;
    padding-bottom: 0px;
}

moderntab.bm-container.position-middle.fade-in {
    z-index: 10002;
}

/* remove focus shadow gray in the tab */
.moderntab.ciptabstrip-tabstrip .k-tabstrip-items-wrapper .k-item:focus,
.moderntab.ciptabstrip-tabstrip .k-tabstrip-items-wrapper .k-item.k-focus {
    box-shadow: none !important
}

.moderntab.ciptabstrip-tabstrip > .k-tabstrip-content.k-content.k-active {
    /*border-left: 0px solid red !important;
                   border-right: 0px solid red !important;
                   border-bottom: 0px solid red !important;
                   border-top: 1px solid red !important;*/
    border: 0px solid red !important;
}

.moderntab.ciptabstrip-tabstrip > .k-tabstrip-items-wrapper.k-hstack {
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    /*border-bottom-color: transparent !important;*/
    border-top-color: transparent !important;
    /*border-color: transparent !important;*/
}

.moderntab.ciptabstrip-tabstrip.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    margin-bottom: -1px;
}

    .moderntab.ciptabstrip-tabstrip.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:active,
    .moderntab.ciptabstrip-tabstrip.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active,
    .moderntab.ciptabstrip-tabstrip.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-selected {
        border-color: transparent !important;
        /*color: #ff0000 !important;*/
        background-color: #ffffff !important;
    }

.moderntab.ciptabstrip-tabstrip.k-tabstrip-content, .moderntab.k-tabstrip > .k-content {
    padding-left: 0px !important;
    padding-right: 0px !important;
    /*padding: 16px 16px;*/
}

    .moderntab.ciptabstrip-tabstrip.k-tabstrip-content:focus, 
    .moderntab.k-tabstrip > .k-content:focus { /* new ben since tab validation */
        outline: none !important;
    }


.moderntab.ciptabstrip-tabstrip > .k-tabstrip-content:focus,
.moderntab.ciptabstrip-tabstrip > .k-tabstrip-content.k-focus,
.moderntab.ciptabstrip-tabstrip > .k-tabstrip > .k-content:focus,
.moderntab.ciptabstrip-tabstrip > .k-tabstrip > .k-content.k-focus {  /* new ben since tab validation */
    outline: none !important;
}


.moderntab.ciptabstrip-tabstrip.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active {
    /*border-bottom-color: green !important;*/
    border-bottom: 2px solid #006bb4 !important;
}

    .moderntab.ciptabstrip-tabstrip.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active .k-link {
        font-weight: 600 !important;
        color: #006bb4 !important;
    }

.moderntab.ciptabstrip-tabstrip.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item .k-link {
    /*font-weight: 600 !important;*/
    color: #000000 !important;
}

/* remove not nice focus dotted around the whole area of the content of tabstrip*/
.moderntab.ciptabstrip > .k-tabstrip-content:focus,
.moderntab.ciptabstrip > .k-tabstrip-content.k-focus,
.moderntab.ciptabstrip > .k-tabstrip > .k-content:focus,
.moderntab.ciptabstrip > .k-tabstrip > .k-content.k-focus {
    outline-width: 0px !important;
    outline: none !important;
    /*outline-style: dotted;
                 outline-offset: -1px;
                 outline-color: red;*/
}

/* Remove bad shadow in selected tab - HMMM seems not working...*/
.moderntab.ciptabstrip > .k-tabstrip-items-wrapper .k-item:focus,
.moderntab.ciptabstrip > .k-tabstrip-items-wrapper .k-item.k-focus {
    box-shadow: none !important /*inset 0 0 0 2px rgb(0 0 0 / 12%);*/
}

.bm-header {
    padding: 0 0 .75rem 0 !important;
}

.login-with-google-btn {
    transition: background-color .3s, box-shadow .3s;
    padding: 8px 16px 8px 42px;
    border: none;
    border-radius: 3px;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
    color: #757575;
    font-size: 14px;
    font-weight: 500 !important;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
    background-color: white;
    background-repeat: no-repeat;
    background-position: 40px 10px;
    &:hover
    
    {
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25);
    }
    
    &:active {
        background-color: #eeeeee;
    }
    
    &:focus {
        outline: none;
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25), 0 0 0 3px #c8dafc;
    }
    
    &:disabled {
        filter: grayscale(100%);
        background-color: #ebebeb;
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
        cursor: not-allowed;
    }
}

.login-with-microsoft-btn {
    transition: background-color .3s, box-shadow .3s;
    padding: 8px 16px 8px 42px;
    border: none;
    border-radius: 3px;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
    color: #757575;
    font-size: 14px;
    font-weight: 500 !important;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIyMSIgdmlld0JveD0iMCAwIDIxIDIxIj48dGl0bGU+TVMtU3ltYm9sTG9ja3VwPC90aXRsZT48cmVjdCB4PSIxIiB5PSIxIiB3aWR0aD0iOSIgaGVpZ2h0PSI5IiBmaWxsPSIjZjI1MDIyIi8+PHJlY3QgeD0iMSIgeT0iMTEiIHdpZHRoPSI5IiBoZWlnaHQ9IjkiIGZpbGw9IiMwMGE0ZWYiLz48cmVjdCB4PSIxMSIgeT0iMSIgd2lkdGg9IjkiIGhlaWdodD0iOSIgZmlsbD0iIzdmYmEwMCIvPjxyZWN0IHg9IjExIiB5PSIxMSIgd2lkdGg9IjkiIGhlaWdodD0iOSIgZmlsbD0iI2ZmYjkwMCIvPjwvc3ZnPg==);
    background-color: white;
    background-repeat: no-repeat;
    background-position: 40px 10px;
    &:hover {
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25);
    }

    &:active {
        background-color: #eeeeee;
    }

    &:focus {
        outline: none;
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25), 0 0 0 3px #c8dafc;
    }

    &:disabled {
        filter: grayscale(100%);
        background-color: #ebebeb;
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
        cursor: not-allowed;
    }
}

.sign-in-form__divider {
    display: flex;
    align-items: center;
}

.divider-line {
    flex-grow: 1;
    border-top: 1px solid grey; /* Adjust color as needed */
}

.sign-in-form__divider-text {
    margin: 0 2px !important; /* Adjust space between text and lines */
}

.copy-tooltip {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    z-index: 12000;
    font-size: 80%;
    position: absolute;
    background: #f5f5f5; /* Lightest grey background */
    color: #424242;
    padding: .5rem 1rem;
    border-radius: 4px;
    bottom: -40px; /* Position below the button */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
    font-weight: bolder;
    border: 1px solid #dcdcdc; /* Light grey border */
}

.copy-tooltip-textbox {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    z-index: 12000;
    font-size: 80%;
    position: absolute;
    background: #f5f5f5; /* Lightest grey background */
    color: #424242;
    padding: .5rem 1rem;
    border-radius: 4px;
    bottom: -40px; /* Position below the button */
    left: 95%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
    font-weight: bolder;
    border: 1px solid #dcdcdc; /* Light grey border */
}

    .copy-tooltip.active {
        opacity: 1;
    }

.copy-tooltip-textbox.active {
    opacity: 1;
}

.label-container {
    display: flex;
    align-items: center;
    float: left;
}

    .label-container .requiredField {
        margin-right: 5px; /* Adjust space between the asterisk and the text as needed */
    }

.fa-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Set asterisk color to red */
.requiredField.lblcontrols {
    color: red; 
}

.custom-hierarchy-icon .k-hierarchy-cell .k-svg-icon svg {
    display: none;
}

.custom-hierarchy-icon .k-hierarchy-cell .k-svg-icon.k-svg-i-plus:before {
    content: "\e005";
    font-family: "WebComponentsIcons";
}

.custom-hierarchy-icon .k-hierarchy-cell .k-svg-icon.k-svg-i-minus:before {
    content: "\e006";
    font-family: "WebComponentsIcons";
}

.disputed-status-style-def {
    color: white !important;
    background-color: #999999 !important;
    border-color: #ffeeba !important;
}

    .disputed-status-style-def:hover {
        background-color: #8c8c8c !important;
        color: #f0f0f0 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

.disputed-status-style0 {
    color: #fff3cd !important;
    background-color: #9e0142 !important;
    border-color: #ffeeba !important;
}

    .disputed-status-style0:hover {
        background-color: #8c003a !important;
        color: #fae6b2 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

.disputed-status-style1 {
    color: #fff3cd !important;
    background-color: #d53e4f !important;
    border-color: #ffeeba !important;
}

    .disputed-status-style1:hover {
        background-color: #cc3041 !important;
        color: #fae6b2 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    }

.disputed-status-style2 {
    color: #fff3cd !important;
    background-color: #f46d43 !important;
    border-color: #ffeeba !important;
}

    .disputed-status-style2:hover {
        background-color: #ed5f36 !important;
        color: #fce2a8 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

.disputed-status-style3 {
    color: #721c24 !important;
    background-color: #fdae61 !important;
    border-color: #ffeeba !important;
}

    .disputed-status-style3:hover {
        background-color: #fca151 !important;
        color: #61171e !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    }

.disputed-status-style4 {
    color: #721c24 !important;
    background-color: #fee08b !important;
    border-color: #ffeeba !important;
}

    .disputed-status-style4:hover {
        background-color: #f7d67b !important;
        color: #61171e !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    }

.disputed-status-style5 {
    color: #3c763d !important;
    background-color: #e6f598 !important;
    border-color: #ffeeba !important;
}

    .disputed-status-style5:hover {
        background-color: #daed88 !important;
        color: #2e622f !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

.disputed-status-style6 {
    color: #3c763d !important;
    background-color: #d2f2d2 !important;
    border-color: #ffeeba !important;
}

    .disputed-status-style6:hover {
        background-color: #c1e7c1 !important;
        color: #2e622f !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

.disputed-status-span-relative {
    position: relative;
    padding-right: 25px;
    display: inline-block;
}

.validation-status-style-def,
.reception-status-style-def {
    color: white !important;
    background-color: #999999 !important;
    border-color: #ffeeba !important;
}

.reception-status-stylePending {
    color: #004085 !important;
    background-color: #cce5ff !important;
    border-color: #b8daff !important;
}

.reception-status-styleTaskDone {
    color: #3c763d !important;
    background-color: #dff0d8 !important;
    border-color: #d6e9c6 !important;
}

.reception-status-styleCompleted {
    color: #3c763d !important;
    background-color: #dff0d8 !important;
    border-color: #d6e9c6 !important;
}

.reception-status-styleCancelled {
    color: #721c24 !important;
    background-color: #f8d7da !important;
    border-color: #f5c6cb !important;
}