.bootbox-input-textarea{

}


.grayscale-100 {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}

.grayscale-90 {
    -webkit-filter: grayscale(90%);
    -moz-filter: grayscale(90%);
    -ms-filter: grayscale(90%);
    filter: grayscale(90%);
}

/* original value 9999 remark/base/assets/css/template site.min.css*/
.panel.is-fullscreen {
    z-index: 1500;
    overflow: auto
}

i.scm-main-menu-icon {
    font-size: 24px;
}

.scm-btn-min-width-200 {
    /*min-width: 200px;*/
    width: 100%;
}

.scm-btn-min-width-150 {
    min-width: 150px;
}

.scm-site-menu-title {
    text-transform: uppercase;
}
/* original value 1701  select2.min.css  under the side bar : 1400 */
/* last value 1500  21.11.2023 ( using full-screen option for scm-page-partial ) */
.modal-open .select2-container, .select2-container {
    z-index: 1390;
}


.jsgrid-load-shader {
    z-index: 1391;
}

.datepicker-dropdown {
    z-index: 1700 !important;
}

/*.datepicker-dropdown { z-index: 1500 !important }*/
/* original value 1600 bootstrap.min.css */
/*.modal-backdrop { z-index: 1690; }*/
.clockpicker-popover {
    z-index: 1800;
}

.page-content {
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
}

div.scm-page-container {
}

div.scm-page-partial {
}

div.scm-page-partial-heading {
}

div.scm-page-partial-body {
}

div.scm-page-partial-footer {
}

div.scm-planning-shift {
    border-bottom: 2px rgba(255, 255, 255, 0.00) solid
}

div.scm-planning-shift-clicked {
    border-bottom: 2px red solid;
}

div.scm-btn-scm-report {
    text-align: center;
    cursor: pointer;
    color: #686bee;
}



div.scm-header-top-sticky {
    position: sticky;
    /*66x is the site background -*/
    top: 66px;
    z-index: 1599 !important;
    /*use site background -*/
    background: #f3f7f9;
}


div.scm-page-title {
    padding-top: 5px;
    padding-bottom: 5px;
}

div.scm-loader-container-absolute-200 {
    position: absolute;
    width: 200px;
    height: 200px;
    top: calc(50% - 100px);
    left: calc(50% - 100px);
    z-index: 999999 !important;
}


div.scm-loader-container-fullscreen {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(125, 177, 250, 0.10);
    text-align: center;
    vertical-align: middle;
    z-index: 999999 !important;
}

div.scm-loader-container {
    text-align: center;
    display: none;
    height: 400px;
}


div.typewriter-container {
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid orange; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em; /* Adjust as needed */
    animation: typingEffect 3.5s steps(40, end), typingCursorCaretEffect .75s step-end infinite;
}

.scm-btn-pill-left {
    border-radius: 100% 0 0 100%;
}

.scm-btn-pill-right {
    border-radius: 0 100% 100% 0;
}


/* The typing effect */
@keyframes typingEffect {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

/* The typewriter cursor effect */
@keyframes typingCursorCaretEffect {
    from, to {
        border-color: transparent
    }

    50% {
        border-color: orange;
    }
}


/*.site-menu-title::before {
    content: "♥";
}*/

/*.jsgrid-header-row > .jsgrid-header-cell {
    background-color: #86AEDA; 
    font-family:  'Open Sans';
    font-size: 1.2em;
    color: white;
    font-weight: normal;
    text-align: left;
}*/
/* rows */
/*.jsgrid-row > .jsgrid-cell {
    background-color: whitesmoke;
}*/
/* alternate rows */
/*.jsgrid-alt-row > .jsgrid-cell {
    background-color: #CCE6FF;
}*/
.jsgrid-edit-row > .jsgrid-cell {
    background-color: lightblue;
}
/* grid-body */
div.jsgrid-grid-body, tr.jsgrid-filter-row, tr.jsgrid-insert-row, tr.jsgrid-edit-row {
    font-size: 12px;
}

div.scmGrid-header-cadetblue .jsgrid-header-row > .jsgrid-header-cell {
    background-color: cadetblue;
    color: white;
}

div.scmGrid-header-mediumseagreen .jsgrid-header-row > .jsgrid-header-cell {
    background-color: mediumseagreen;
    color: white;
}

div.scmGrid-header-mediumorchid .jsgrid-header-row > .jsgrid-header-cell {
    background-color: mediumorchid;
    color: white;
}

div.scmGrid-header-mediumslateblue .jsgrid-header-row > .jsgrid-header-cell {
    background-color: mediumslateblue;
    color: white;
}

div.scm-gridToolbar {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

tr.highlight td.jsgrid-cell {
    background-color: lightgreen;
}

tr.highlight-delete td.jsgrid-cell {
    background-color: #ffaaf7;
}

tr.highlight-soft-red td.jsgrid-cell {
    background-color: #ffd9d9;
}

th.textright {
    text-align: right
}

.scm-jsgrid-row-warning td {
    background-color: #eef68c;
    color: #db5757;
}

.scm-jsgrid-row-danger td {
    background-color: #f88181;
    color: #ffffff;
}

.scm-jsgrid-row-text-warning td {
    color: #dc6e2e;
}

.scm-jsgrid-row-color-red td {
    color: #db5757;
}

.scm-jsgrid-row-color-green td {
    color: #43b978;
}

.scm-jsgrid-row-color-pink td {
    color: #6c6fe6;
}

.scm-jsgrid-row-color-gray td {
    color: #db5757;
}

.scm-jsgrid-row-depart td {
    background-color: #f7fcb9;
}

.toast-success {
    background-color: #42c242;
}

.toast-error {
    background-color: #db5757;
}

.toast-info {
    background-color: #4cb5d4;
}

.toast-warning {
    background-color: #fb782b;
}

img.scm-card-photo {
    border-radius: 12px;
    width: 128px;
    height: 128px;
}

img.scm-thumbnail-w128 {
    border-radius: 12px;
    width: 128px;
}

img.scm-card-logo {
    border-radius: 12px;
    width: 128px;
    height: 128px;
}

img.scm-avatar-40-pointer {
    border-radius: 6px;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

img.scm-avatar-40 {
    border-radius: 6px;
    width: 40px;
    height: 40px;
}

img.scm-avatar-80-pointer {
    border-radius: 9px;
    width: 80px;
    height: 80px;
    cursor: pointer;
}

img.scm-avatar-80 {
    border-radius: 9px;
    width: 80px;
    height: 80px;
}

.scm-avatar-60 {
    height: 60px;
    width: 60px;
}

.scm-avatar-140 {
    height: 140px;
    width: 140px;
}

.scm-btn-gray {
    background-color: #808080;
    color: #ffffff;
}

.scm-btn-red {
    background-color: #db5757;
    color: #ffffff;
}

.scm-pointer {
    cursor: pointer;
}

.scm-pre-warp {
    white-space: pre-wrap;
}

.scm-tab-menu {
    text-transform: uppercase;
}

.blink1second {
    animation: blinker0 1s ease-in-out infinite alternate;
}

.blink2second {
    animation: blinker0 2s ease-in-out infinite alternate;
}

@keyframes blinker0 {
    to {
        opacity: 0;
    }
}


.pie-progress {
    max-width: 150px;
    margin: 0 auto;
}

    .pie-progress svg {
        width: 100%;
    }

.pie-progress-xs {
    max-width: 50px;
}

.pie-progress-sm {
    max-width: 100px;
}

.pie-progress-lg {
    max-width: 200px;
}


/*fix thead gray color-profile confusion*/
.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover {
    color: #cbcbcb;
}

.datepicker table tr td span.disabled, .datepicker table tr td span.disabled:hover {
    color: #cbcbcb;
}

hr.scm-no-profileVisibilty {
    border-top: 1px solid #ff9e9e;
}