/*FONT*/
@font-face {
    font-family: 'montserrat';
    src: url('font/montserrat-variablefont_wght.ttf') format('truetype');
}
/* to manage disable style */
.e-disable, textarea:read-only {
    opacity: .35 !important;
    background-image: none !important;
    font-weight: 500 !important;
    color: #000 !important;
    background-color: #f2f2f2 !important;
}

.e-chkbox-wrap.e-disable, .e-radiobtn-wrap.e-disable {
    background-color: transparent !important;
}

.e-mask.e-disable-wrap, .e-datewidget.e-disable, .e-ddl.e-widget .e-in-wrap.e-disable, .e-ddl.e-disable, .e-numeric.e-disable-wrap, .e-percent.e-disable-wrap, .e-currency.e-disable-wrap, .e-mask.e-disable-wrap {
    background-color: transparent !important;
    opacity: 1 !important;
}

    .e-numeric.e-disable-wrap .e-in-wrap, .e-percent.e-disable-wrap .e-in-wrap, .e-datewidget.e-disable .e-in-wrap, .e-currency.e-disable-wrap .e-in-wrap, .e-mask.e-disable-wrap .e-in-wrap, .e-ddl.e-widget .e-in-wrap.e-disable {
        border-color: #e6e6e6 !important;
    }

/* end */
.font-montserrant {
    font-family: 'montserrat' !important;
}

canvas {
    border: 2px solid #cecece;
}

label {
    margin-bottom: 0 !important
}

.card-header a {
    color: #0098aa !important
}

.arrow-border {
    border-radius: 50%;
    padding: 0.23rem 0.5rem;
    border: 1px solid #0098aa !important;
}

.resetIcon:hover {
    cursor: pointer !important;
}

.n2w-hr {
    border-color: #0098aa !important;
    margin: .5rem 0 !important
}

.e-chkbox-wrap .e-chk-image.e-checkmark {
    color: #0098aa !important
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    padding-right: .3rem !important;
    padding-left: .3rem !important
}

.right-0 {
    right: 0 !important
}

.border-danger-shadow {
    border: 1px solid #efa9b1 !important;
    box-shadow: 0 0rem 0.3rem #efa9b1 !important
}

.shadow-n2wLight {
    box-shadow: 0 0.15rem 1.75rem 0 #e6fcff !important
}

.shadow-n2wDark {
    box-shadow: 0 0.15rem 1.75rem 0 #0098aa !important
}

/* BORDER */
.border-n2wDark {
    border: 1px solid #0098aa
}

.border-rounded{
    border-radius:.4rem!important
}

/*TAB*/
.e-tab .e-header > .e-active a {
    color: #0098aa !important
}

/*TEXT COLOR*/
.n2w-darkColor {
    color: #0098aa !important
}

.n2w-color {
    color: #a1c43f !important
}

.n2w-lightColor {
    color: #e6fcff !important
}

.n2w-bgColor {
    color: #efefef !important
}

/*BUTTON*/
.btn-outline-lightSuccess {
    color: #1cc88a !important;
    border: 1px solid #1cc88a !important;
}

    .btn-outline-lightSuccess:hover {
        background-color: #e9fcf5 !important;
    }

.btn-outline-lightWarning {
    color: #ff9900 !important;
    border: 1px solid #ff9900 !important;
}

    .btn-outline-lightWarning:hover {
        background-color: #fff6e6 !important;
    }

.btn-outline-lightDanger {
    color: red !important;
    border: 1px solid red !important;
}

    .btn-outline-lightDanger:hover {
        background-color: #ffe6e6 !important;
    }

.btn-outline-n2wLight {
    color: #0098aa !important;
    border: 1px solid #0098aa !important;
}

    .btn-outline-n2wLight:hover {
        background-color: #e6fcff !important;
    }

.btn-outline-n2wDark {
    color: #0098aa !important;
    border: 1px solid #0098aa !important;
}

    .btn-outline-n2wDark:hover {
        background-color: #0098aa !important;
        color: #fff !important;
    }

.btn-lightSuccess {
    background-color: #e9fcf5 !important;
    color: #1cc88a !important;
    border: 1px solid #1cc88a !important;
}

    .btn-lightSuccess:hover {
        background-color: #1cc88a !important;
        color: #fff !important
    }

.btn-lightWarning {
    background-color: #fff6e6 !important;
    color: #ff9900 !important;
    border: 1px solid #ff9900 !important;
}

    .btn-lightWarning:hover {
        background-color: #ff9900 !important;
        color: #fff !important
    }

.btn-lightDanger {
    background-color: #ffe6e6 !important;
    color: red !important;
    border: 1px solid red !important;
}

    .btn-lightDanger:hover {
        background-color: red !important;
        color: #fff !important
    }

.btn-n2wLight {
    background-color: #e6fcff !important;
    color: #0098aa !important;
    border: 1px solid #0098aa !important;
}

    .btn-n2wLight:hover {
        background-color: #0098aa !important;
        color: #fff !important
    }

.btn-n2wDark {
    background-color: #0098aa !important;
    color: #fff !important;
    border: 1px solid #0098aa !important;
}

    .btn-n2wDark:hover {
        background-color: #00454d !important;
        color: #fff !important;
        border-color: #00454d !important;
    }


@media (max-width: 767px) { /*"xxx" the width of window*/
    .btn-mobile {
        width: 100% !important;
        border-radius: 2em !important
    }
}

/*ICON*/

.iconMenu {
    width: 20pt !important;
    text-align: center !important
}
/* for filter icon on header grid */
.e-grid .e-headercellfilter .e-headercelldiv {
    padding: 0 1.7em !important
}

.e-grid .e-headercell .e-filtericon, .e-grid .e-headercell .e-filteredicon {
    float: left !important;
    margin: -17px -4px !important
}

.e-grid .e-gridcontent .e-ejinputtext {
    border-radius: 4px !important;
    height: 34px !important;
}
/*.e-rowcell {
    padding-left: 1.5rem !important;
}*/

.e-grid td.e-active, .e-grid .e-form-titlebar {
    background: linear-gradient(to bottom, #f6f6f6)!important;
    color:#333!important;
    font-weight:500!important
}


/*MENU*/
.sidebar {
    width: 13rem !important;
    background-image: -webkit-linear-gradient( 335deg, #0098aa 15%, #545454 90%) !important;
}

    .sidebar #divUsername {
        display: flex !important;
        align-items: center !important;
        cursor: default !important
    }

        .sidebar #divUsername span {
            font-size: 1rem !important;
            margin-left: 13px !important;
        }

    .sidebar .sidebar-heading {
        color: rgba(255,255,255,.8) !important;
        padding: 0.3rem 0.2rem !important;
    }

    .sidebar hr.sidebar-divider {
        border-top: 1px solid rgba(255,255,255,.8);
        margin: .5rem 0!important
    }

    .sidebar #sidebarToggle {
        background-color: rgba(245,245,245,.3);
        margin-bottom: 0 !important;
        border: 0 !important;
        border-radius: 50% !important
    }

        .sidebar #sidebarToggle::after {
            color: #0098aa !important
        }

    .sidebar .nav-item {
        margin: 0 0.5rem !important;
    }

        .sidebar .nav-item .nav-link {
            width: 12rem !important;
            padding: 0.4rem !important;
        }

            .sidebar .nav-item .nav-link span {
                font-size: .85rem !important;
                margin-left: 10px !important
            }

        .sidebar .nav-item a.nav-link:hover, .sidebar .nav-item .collapse .collapse-inner .collapse-item:hover {
            background-color: rgb(245, 245, 245, .3) !important;
            border-radius: .35rem !important
        }

        .sidebar .nav-item a.nav-link[aria-expanded=true], .sidebar .nav-item .collapse .collapse-inner .collapse-item:active, a.nav-link:active {
            background-color: #e6fcff !important;
            color: #0098aa !important;
            border-radius: .35rem !important
        }

        .sidebar .nav-item .collapse {
            margin: 0 0 0 1rem !important
        }

            .sidebar .nav-item .collapse .collapse-inner .collapse-item, .sidebar .nav-item .collapsing .collapse-inner .collapse-item {
                margin-right: 0 !important;
                font-size: .8rem !important;
                padding: .2rem .7rem;
            }

    .sidebar.toggled {
        width: 7rem !important;
        background-image: -webkit-linear-gradient( 335deg, #0098aa 15%, #545454 90%) !important;
    }

        .sidebar.toggled .sidebar-divider {
            border-color: #0098aa !important;
        }

        .sidebar.toggled #divUsername {
            display: block !important;
        }

            .sidebar.toggled #divUsername span {
                margin-left: 0 !important
            }

        .sidebar.toggled .sidebar-heading {
            color: #0098aa !important;
            text-align: left !important;
        }

        .sidebar.toggled .nav-item {
            margin: 0 .5rem !important;
        }

            .sidebar.toggled .nav-item .nav-link {
                width: 6rem !important;
                margin: 0 !important;
                padding: .5rem 0 !important
            }

                .sidebar.toggled .nav-item .nav-link span {
                    margin-left: 0 !important;
                    font-size: .65rem !important
                }

            .sidebar.toggled .nav-item .collapse {
                left: 6rem !important
            }

                .sidebar.toggled .nav-item .collapse .collapse-inner {
                    padding: 0.5rem !important;
                    background: #fff !important;
                }

                    .sidebar.toggled .nav-item .collapse .collapse-inner .collapse-item {
                        margin-left: 0 !important;
                        color: #0098aa !important;
                    }

                        .sidebar.toggled .nav-item .collapse .collapse-inner .collapse-item:hover {
                            background-color: rgb(245, 245, 245) !important;
                        }

/*GRID*/


.e-gridtoolbar {
    border: none !important;
    border-radius: 0 !important
}


    .e-gridtoolbar .e-ul.e-horizontal {
        float: none !important
    }

        .e-gridtoolbar .e-ul.e-horizontal li[id$=search] {
            float: right !important
        }

.e-grid {
    border: 1px solid #cecece !important
}

    .e-grid .e-gridheader .e-headercell, .e-grid .e-rowcell {
        border-left: 0 !important
    }

    .e-grid tr.e-hover {
        cursor: pointer;
    }

    .e-grid div.e-field-validation-error {
        background-color: #fee7e7 !important;
        border: 1px solid #cd0a0a !important;
    }

    .e-grid div.e-error .e-toparrow {
        border-bottom-color: #cd0a0a !important;
    }

/*.e-grid .e-rowcell {
        padding: .4rem .4rem .4rem 1.5rem !important
    }*/

.e-rowcell.e-gridtooltip.e-templatecell, .e-rowcell.e-gridtooltip.e-boolrowcell {
    padding: 0.4rem !important;
}

.e-grid .e-unboundcell .e-unboundcelldiv {
    display: flex;
    justify-content: center;
}

    .e-grid .e-unboundcell .e-unboundcelldiv .e-button {
        border-radius: 0.35rem;
        /*width: 30px !important;
        height: 10px !important;*/
        padding: 5px !important;
        align-items: center;
        display: flex;
        justify-content: center;
    }

/*CARD*/
/*.card-body {
    padding-top: 0 !important
}
*/
.card-header {
    padding: 1rem 1.25rem 0 1.25rem !important;
    font-weight: 500 !important;
    color: #0098aa !important
}

/*TREE VIEW4*/
.e-treeview a.e-node-hover, .e-treeview a.e-active {
    background: none !important;
    border: none !important
}

/*ADAPTIVE*/

/*sm*/
@media (min-width: 576px) {
    .w-sm-25 {
        width: 25% !important
    }

    .w-sm-50 {
        width: 50% !important
    }

    .w-sm-75 {
        width: 75% !important
    }

    .w-sm-100 {
        width: 100% !important
    }
}
/*md*/
@media (min-width: 768px) {
    .w-md-25 {
        width: 25% !important
    }

    .w-md-50 {
        width: 50% !important
    }

    .w-md-75 {
        width: 75% !important
    }

    .w-md-100 {
        width: 100% !important
    }
}
/*lg*/
@media (min-width: 992px) {
    .w-lg-25 {
        width: 25% !important
    }

    .w-lg-50 {
        width: 50% !important
    }

    .w-lg-75 {
        width: 75% !important
    }

    .w-lg-100 {
        width: 100% !important
    }
}
/*xl*/
@media (min-width: 1200px) {
    .w-xl-25 {
        width: 25% !important
    }

    .w-xl-50 {
        width: 50% !important
    }

    .w-xl-75 {
        width: 75% !important
    }

    .w-xl-100 {
        width: 100% !important
    }
}

/*ALERT LABEL*/
.alertLabel {
    padding: 0.2em .5em;
    border-radius: 4px;
    margin-bottom: 0;
}

.alertLaber:hover{
    cursor:pointer;
}

.alertLabelSecondary {
    background-color: #f2f2f2 !important;
    color: grey !important;
}

.alertLabelSuccess {
    background-color: #e9fcf5 !important;
    color: #1cc88a !important;
}

.alertLabelDanger {
    background-color: #ffe6e6 !important;
    color: red !important;
}
.alertLabelNeutro {
    background-color: #e6e6e6 !important;
    color: #404040 !important;
}

.alertLabelWarning {
    background-color: #fff6e6 !important;
    color: orange !important;
}

.alertLabelPrimary {
    background-color: #e6fcff !important;
    color: #0098aa !important;
}

/*GRID LINK*/
.gridLink {
    border-bottom: 1px solid #0098aa !important;
    color: #0098aa !important
}

    .gridLink:hover {
        text-decoration: none !important;
        background-color: #e6fcff !important;
    }

/*DOT*/
.dot-md {
    height: 23px !important;
    width: 23px !important;
    border-radius: 50%;
    display: inline-block;
    padding-left: 0.48rem !important;
    padding-top: 0.18rem !important;
}

.dot {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
    padding: 5px !important;
}

.dot-lightPrimary {
    background-color: #e6fcff !important;
    color: #0098aa !important
}

.dot-lightSuccess {
    background-color: #e9fcf5 !important;
    color: #1cc88a !important;
}

.dot-lightDanger {
    background-color: #ffe6e6 !important;
    color: red !important;
}

.dot-lightWarning {
    background-color: #fff6e6 !important;
    color: #ff9900 !important;
}

.dot-lightSecondary {
    background-color: #e4e4e7 !important;
    color: #858796 !important;
}

.dot-primary {
    background-color: #0098aa !important;
    color: #e6fcff !important
}

.dot-success {
    background-color: #1cc88a !important;
    color: white !important;
}

.dot-danger {
    background-color: red !important;
    color: white !important;
}