*, *::after, *::before {
    box-sizing: border-box
}
:root {
    --white: #ffffff;
    --black: #000000;
    /*-- Default color --*/
    --lightpink: #FFF6F7;
    /*-- Top Notice --*/
    --lightpink2: #fff8e9;
    /*-- Tab content area --*/
    --lightgreen: #edfdf3;
    /*-- Upload file section,  Second menu bg color,   --*/
    --darkgreen: #01994F;
    /*-- Menu hover and active,  Notification View All button,  Main Title,  Submit button,  Table heading,  Pagination Next Prev Button,  Checkbox,  default button --*/
    --darkred: #99024c;
    --lightred: #fdedf7;
    --lightred-2: #FD7972;
    /*-- Discard button,  Reset Button,  Reject Button  --*/
    --blue: #1e4bee;
    --darkorange: #EEC11E;
    /*-- Accordion Active left border,  Accordion Up Down Active Arrow --*/
    --lightorange: #fdedc9;
    /*-- Accordion Active BG,  Accordion Up Down Arrow,  Taab active bg --*/
    --pink01: #FFE2E5;
    /*-- Cost Center :  By Percentage  --*/
    --pink02: #FA5A7D;
    /*-- Total Fuel Amount Amount color,  Cost Center :  By Percentage Value color --*/
    --orange01: #FFF4DE;
    /*-- Cost Center :  Amount  --*/
    --orange02: #FAAF00;
    /*-- Cost Center :  Amount Value color,  Tab active right border and arrow,    --*/
    --green01: #DCFCE7;
    /*-- Cost Center :  Total Percent,  Pagination Acive number bg,   --*/
    --green02: #19BC4F;
    /*-- Cost Center :  Total Percent Value color,  Pagination Acive number border,   --*/
    --purple01: #F3E8FF;
    /*-- Cost Center :  Total Amount  --*/
    --purple02: #7224DA;
    /*-- Cost Center :  Total Amount Value color  --*/
    --bordercolor: #E8E9EB;
    /*-- Form Fields Border Color --*/
    --bordercolor-2: #D9D9D9;
    --lightgray: #dbdbdb;
    --bgpopup: #FFF8E2;
    --bgtr1: #FFF8E2;
    /*-- Table odd row background color --*/
    --bgtr2: #FFFCF0;
    /*-- Table even row background color --*/
    --taskbg: #FFFCF4;
    --loginbg: #FFFCF0;
    /*-- Login Bg --*/
    --gray-1: #4d4d4d;
    --gray-2: #F9F9F9;
    /*-- Compare table heading bg --*/
    --gray-3: #3F434A;
    --orangeborder: #F7B61E;
    --transparent: transparent;
    --bgpage: #ffffff;
    --primary: #808080;
    --lightprimary: #F5F5F5;
    --secondary: #484444;
    --lightsecondary: #e7ecef;
    --tertiary: #6c757d;
    --fourth: #0e4da7;
    --fifth:;
    --color: #000;
    --bgBox: #F5F5F5;
    --disabled: #e9ecef;
}

/*-- 31 Jan --*/
body.color-1 * {
    --white: #ffffff;
    --black: #000000;
    --lightpink: #FFF6F7;
    --lightpink2: #e9ffea;
    --lightgreen: #edf0fd;
    --darkgreen: #010999;
    --darkred: #99024c;
    --lightred: #fdedf7;
    --lightred-2: #FD7972;
    --blue: #1e4bee;
    --darkorange: #1eee4b;
    --lightorange: #c9fdcb;
    --pink01: #FFE2E5;
    --pink02: #FA5A7D;
    --orange01: #FFF4DE;
    --orange02: #00fa0d;
    --green01: #dddcfc;
    --green02: #1b19bc;
    --purple01: #F3E8FF;
    --purple02: #7224DA;
    --bordercolor: #E8E9EB;
    --bordercolor-2: #D9D9D9;
    --lightgray: #dbdbdb;
    --bgpopup: #FFF8E2;
    --bgtr1: #e2ffef;
    --bgtr2: #f0fff7;
    --taskbg: #FFFCF4;
    --loginbg: #f0fff7;
    --gray-1: #4d4d4d;
    --gray-2: #F9F9F9;
    --gray-3: #3F434A;
    --orangeborder: #1ef73c;

    
--transparent : transparent;
--bgpage : #ffffff;
--primary : #083654;
--secondary : #484444;
--tertiary: #6c757d;
--fourth : #096fbf;
--fifth : ;
--color : #000;
--bgBox : #F5F5F5;
}

body.color-1 .navbar .menu-icon path {
    fill: var(--darkgreen);
}

body.color-1 .header-menu .top-menu li a:hover, body.color-1 .content-menu .content-menu-ul li a:hover, body.color-1 .content-menu .content-menu-ul li.active a {
    color: var(--darkgreen);
}

/* body.color-1 .file-upload-img svg path  {
   fill:  var(--darkgreen);
   stroke:  var(--darkgreen);
}
*/


body.color-2 * {
    --white: #ffffff;
    --black: #000000;
    --lightpink: #FFF6F7;
    --lightpink2: #e9f0ff;
    --lightgreen: #fdedf7;
    --darkgreen: #096fbf;
    --darkred: #99024c;
    --lightred: #fdedf7;
    --lightred-2: #FD7972;
    --blue: #1e4bee;
    --darkorange: #1e4bee;
    --lightorange: #c9d9fd;
    --pink01: #FFE2E5;
    --pink02: #FA5A7D;
    --orange01: #FFF4DE;
    --orange02: #004afa;
    --green01: #fcdcf1;
    --green02: #bd1c88;
    --purple01: #F3E8FF;
    --purple02: #7224DA;
    --bordercolor: #E8E9EB;
    --bordercolor-2: #D9D9D9;
    --lightgray: #dbdbdb;
    --bgpopup: #e2e9ff;
    --bgtr1: #e2e9ff;
    --bgtr2: #f0f3ff;
    --taskbg: #FFFCF4;
    --loginbg: #f0f3ff;
    --gray-1: #4d4d4d;
    --gray-2: #F9F9F9;
    --gray-3: #3F434A;
    --orangeborder: #1e5ef7;
    --transparent: transparent;
    --bgpage: #ffffff;
    --primary: #083654;
    --secondary: #484444;
    --tertiary: #6c757d;
    --fourth: #096fbf;
    --fifth:;
    --color: #000;
    --bgBox: #F5F5F5;
}

body.color-2 .navbar .menu-icon path {
    fill: var(--darkgreen);
}

body.color-2 .header-menu .top-menu li a:hover, body.color-2 .content-menu .content-menu-ul li a:hover, body.color-2 .content-menu .content-menu-ul li.active a {
    color: var(--darkgreen);
}

/*-- End 31 Jan --*/

body {
    font-weight: normal;
    font-family: "Poppins", sans-serif;
    font-weight: normal;
    color: var(--black);
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}

body {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-weight: normal;
    color: var(--black);
    font-size: 14px;
    line-height: 1.3;
    text-align: left;
    background: #F5F5F5;
}

    body.darkred .navbar .menu-icon path {
        fill: var(--darkred);
    }

    body.darkred .header-menu .top-menu li a:hover, body.darkred .content-menu .content-menu-ul li a:hover, body.darkred .content-menu .content-menu-ul li.active a {
        color: var(--darkred);
    }

    body.darkred .notification-count, body.darkred .btn-part .save-btn {
        background: var(--darkred);
    }

    body.darkred .form-control:focus {
        border-color: var(--darkred);
    }

    body.darkred .content-menu {
        background: var(--lightred);
    }

        body.darkred .content-menu .content-menu-ul li.active a::after {
            background: var(--blue);
        }

    body.darkred .main-header {
        border-color: var(--blue);
    }

.error-text {
    font-weight: 400;
    font-size: 12px;
    line-height: 25px;
    color: #7D2D3E;
}

.note-text {
    font-weight: bold;
    font-size: 13px;
    line-height: 20px;
    /*color: #BE002A;*/
    color: var(--black);
    background: url(../images/high-importance-24.png) no-repeat 0 0;
    padding-left: 25px;
    background-size: 20px;
}

.error-msg {
    background: var(--lightpink);
    padding: 3px 10px;
}

.note-msg  {
   /* background:  #FFF6F7;
   */background:  none;
   padding:  3px 30px;
  /* border-bottom:  1px solid var(--lightpink);*/
}

.msg-icon {
    margin-right: 10px;
}


/*-- Header part --*/
.main-header {
    background: white;
    padding: 15px 0;
    border-bottom: 2px solid var(--orangeborder);
}

    .main-header .logo {
        flex: 0 0 13%;
        max-width: 13%;
    }

.header-right {
    justify-content: space-between;
    display: flex;
    align-items: center;
    flex: 0 0 87%;
    max-width: 87%;
    position: static;
}

/* .top-dropdown  {
   float:  left;
}

.top-notification  {
   float:  left;
}

.top-user  {
   float:  left;
}
*/
.header-right-last  {
   align-self:  center;
   align-items:  center;
   display:  inline-flex;
}

.header-menu {
    align-items: center;
    align-self: center;
}

    .header-menu .top-menu li {
        float: left;
        width: auto;
        list-style: none;
        margin: 0;
        padding: 15px 10px;
        position: relative;
    }

    .header-menu .top-menu {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .header-menu .top-menu li a {
            font-size: 14px;
            text-decoration: none;
            color: var(--black);
            display: inline-flex;
            align-items: center;
            font-weight: 600;
            font-family: "Poppins", sans-serif;
        }

            .header-menu .top-menu li a:hover svg path {
                fill: #0e4da7;
                /*    color: var(--darkgreen);*/
            }

        .header-menu .top-menu li:hover a .menu-text {
            color: var(--darkgreen)!important;
        }

.menu--con {
    margin-right: 10px;
}

.header-search {
    max-width: 170px;
}

    .header-search input,.dashboard-search input {
        width: 100%;
        background: #FFFFFF url("../images/search.svg") no-repeat scroll 15px center;
        box-shadow: 0px 2px 5px rgba(38, 51, 77, 0.2);
        border-radius: 30px;
        border: 0;
        padding: 10px 10px 10px 40px;
        line-height: 1; /* border: 1px solid #eee; */
        font-size: 14px;
        color: var(--primary);
        height: 40px;
    }

.top-notification,.top-logout {
    margin: 0 20px;
    position: relative;
}

.part-notification,.part-logout {
    position: relative;
    width: 35px;
    height: 35px;
    background: #FFFFFF;
    box-shadow: 0px 2px 5px rgba(38, 51, 77, 0.2);
    border-radius: 100px;
    display: inline-flex;
    justify-content: center;
    cursor: pointer;
}

    .part-notification img, .part-logout img {
        width: 16px;
    }
/*
.notification-count {
    position: absolute;
    right: -12px;
    top: -10px;
    width: 23px;
    height: 23px;
    background: var(--black);
    text-align: center;
    color: var(--white);
    border-radius: 100%;
    font-size: 10px;
    padding-top: 5px
}
*/
/*JG - Dynamic width and height for content*/
.notification-count {
    position: absolute;
    right: -12px;
    bottom: 57%;
    min-width: 20px;
    min-height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 4px;
    color: #FFF;
    font-size: 11px;
    font-weight: bold;
    background: #000;
    aspect-ratio: 1/1;
    border-radius: 100%;
}

.active-menu {
    display: none;
}

/*-- Main Menu Dropdown --*/
.header-menu .top-menu li .main-dropdown {
    opacity: 0;
    visibility: hidden;
    width: 480px;
    background: var(--white);
    border-radius: 10px;
    padding: 15px;
    position: absolute;
    z-index: 999;
    box-shadow: 0px 0px 12px #ccc;
}

    .header-menu .top-menu li .main-dropdown::before {
        content: "";
        position: absolute;
        top: -8px;
        left: 30px;
        width: 14px;
        height: 14px;
        border-top: 2px solid #f0f0f0;
        transform: rotate(45deg);
        background: var(--white);
        border-left: 2px solid #f0f0f0;
        box-shadow: -2px -2px 3px #e6e6e6;
    }

.header-menu .top-menu li:hover .main-dropdown {
    opacity: 1;
    visibility: visible;
    top: 50px;
}

.main-dropdown-ul {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
}

.header-menu .top-menu li .main-dropdown-ul li {
    float: left;
    width: 48%;
    padding: 10px 10px 10px 20px;
    margin: 0;
    border-bottom: 1px solid #eee;
}

    .header-menu .top-menu li .main-dropdown-ul li::before {
        content: "";
        position: absolute;
        width: 7px;
        height: 7px;
        border-top: 1px solid var(--darkgreen);
        border-right: 1px solid var(--darkgreen);
        transform: rotate(45deg);
        left: 0;
        top: 16px;
    }

    .header-menu .top-menu li .main-dropdown-ul li:nth-child(2n) {
        float: right;
    }

    .header-menu .top-menu li .main-dropdown-ul li ul {
        float: left;
        width: 100%;
        padding: 0;
        margin: 5px 0 0;
    }

        .header-menu .top-menu li .main-dropdown-ul li ul li {
            width: 100%;
            border-bottom: 0;
            padding: 3px 15px 3px 15px;
        }

            .header-menu .top-menu li .main-dropdown-ul li ul li::before {
                transform: none;
                height: 1px;
                border-radius: 0;
            }

    .header-menu .top-menu li .main-dropdown-ul li:last-child /* , .header-menu .top-menu li .main-dropdown-ul li:nth-last-child(2) */ {
        border-color: transparent;
    }
.header-menu .top-menu li .main-dropdown.singleli .main-dropdown-ul li {
    
    padding-bottom: 0;
    margin-top: -10px;
}
/*-- Footer --*/
.copyright-part {
    padding: 35px 0px;
    text-align: center;
    font-size: 13px;
    line-height: 16px;
    color: var(--black);
}



/*-- notification --*/
.notification-menu, .top-menu-dropdown, .user-menu-dropdown {
    position: absolute;
    top: 50px;
    right: 0px;
    background-color: var(--white);
    border: #989898;
    padding: 0px;
    list-style: none;
    width: 250px;
    display: none;
    text-align: left;
    z-index: 9;
    box-shadow: 4px 8px 10px #e4e4e4;
    border: 2px solid var(--lightorange);
    border-radius: 5px;
}

.top-notification:hover .notification-menu {
    display: block !important
}

.notification-menu {
    box-shadow: 0px 7px 18px #15153e4d;
    border: none;
    width: 300px;
}

    .notification-menu::after {
        content: "";
        position: absolute;
        top: -25px;
        right: 0;
        width: 50%;
        height: 25px;
        background: transparent;
        z-index: 9;
    }

.top-menu-dropdown {
    position: absolute;
    top: 50px;
    width: calc(100% - 30px);
    border: 0;
    border-top: 0px solid var(--lightorange);
    padding: 20px 0;
    box-shadow: 0px 0px 12px #ccc;
    left: 15px;
    z-index: 9999;
}

    .top-menu-dropdown::before {
        content: "";
        position: absolute;
        top: -8px;
        right: 95px;
        width: 14px;
        height: 14px;
        border-top: 2px solid #f0f0f0;
        transform: rotate(45deg);
        background: var(--white);
        border-left: 2px solid #f0f0f0;
        box-shadow: -2px -2px 3px #e6e6e6;
    }

.top-menu-dropdown-list {
    padding: 0px;
    list-style: none;
    margin: 0;
}

.top-menu-dropdown::after {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 100%;
    height: 25px;
    background: transparent;
}

.top-menu-dropdown .top-menu-dropdown-list-ul {
    float: left;
    width: 100%;
    padding: 0;
    margin: 10px 0 0;
}

    .top-menu-dropdown .top-menu-dropdown-list-ul li {
        float: left;
        width: 100%;
        padding: 8px 10px 8px 20px;
        margin: 0;
        border-bottom: 1px solid #eee;
        list-style: none;
        position: relative;
    }

        .top-menu-dropdown .top-menu-dropdown-list-ul li::before {
            content: "";
            position: absolute;
            width: 7px;
            height: 7px;
            border-top: 1px solid var(--darkgreen);
            border-right: 1px solid var(--darkgreen);
            transform: rotate(45deg);
            left: 0;
            top: 14px;
        }

        .top-menu-dropdown .top-menu-dropdown-list-ul li:nth-child(2n) {
            float: right;
        }

        .top-menu-dropdown .top-menu-dropdown-list-ul li ul {
            float: left;
            width: 100%;
            padding: 0;
            margin: 0;
        }

            .top-menu-dropdown .top-menu-dropdown-list-ul li ul li {
                width: 100%;
                border-bottom: 0;
                padding: 6px 15px 6px 15px;
            }

                .top-menu-dropdown .top-menu-dropdown-list-ul li ul li::before {
                    transform: none;
                    height: 1px;
                    border-radius: 0;
                }

.top-menu-dropdown .top-menu-dropdown-list {
    margin-bottom: 25px;
    float: left;
    width: 100%;
}

    .top-menu-dropdown .top-menu-dropdown-list:last-child {
        margin-bottom: 0;
    }

    .top-menu-dropdown .top-menu-dropdown-list li a .menu-text {
        font-weight: 500;
    }

.hide-in-desk {
    display: none
}

.notification-menu::before, /* .top-menu-dropdown::before, */ .user-menu-dropdown::before {
    content: "";
    position: absolute;
    top: -8px;
    right: 10px;
    width: 12px;
    height: 12px;
    border-top: 2px solid #f0f0f0;
    transform: rotate(45deg);
    background: var(--white);
    border-left: 2px solid #f0f0f0;
}

.user-menu-dropdown::before {
    right: 30px;
}

.notification-menu li, .top-menu-dropdown li {
    background-color: var(--white);
    padding: 15px 10px;
    margin-bottom: 0px;
    border-bottom: 1px solid #e4e4e4;
}

    .notification-menu li:last-child, .top-menu-dropdown li:last-child {
        margin-bottom: 0px;
        border-bottom: 0;
    }

.notification-menu .avatar {
    padding: 2px 0;
}

.notification-menu h3 {
    font-size: 15px;
    margin: 0 0 5px 0;
    display: inline;
}

.notification-menu p {
    margin-bottom: 0;
    font-size: 14px;
}

.notification-date {
    font-size: 12px;
    color: var(--gray);
}

.top-user {
    position: relative;
    cursor: pointer;
}

    .top-user:hover .user-menu-dropdown {
        display: block !important
    }

        .top-user:hover .user-menu-dropdown::after {
            content: "";
            position: absolute;
            top: -25px;
            right: 0;
            width: 50%;
            height: 25px;
            background: transparent;
            z-index: 9;
        }

.top-dropdown > img {
    cursor: pointer;
}

.top-menu-dropdown li a, .user-menu-dropdown li a {
    color: var(--black);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500
}

    .top-menu-dropdown li a:hover, .user-menu-dropdown li a:hover {
        color: var(--darkgreen);
        text-decoration: none;
    }


    .user-menu-dropdown li .menu--con {
        width: 40px;
        height: 40px;
        border: 1px solid #e1e1e1;
        display: inline-block;
        margin: 0 auto 5px;
        border-radius: 100%;
        padding-top: 7px;
    }

    .user-menu-dropdown li .user-link a { /* background-color: var(--darkgreen); */
        color: var(--darkgreen);
        padding: 0px 10px 5px;
        font-size: 14px;
        font-weight: 400;
        border-radius: 5px;
        line-height: 1;
        display: inline-block;
        text-decoration: underline;
    }


.user-link-other {
    margin: auto 20px;
      
}
.user-link-other:hover{
    color: var(--darkgreen);
}
.userLogout {
    margin: auto 20px;
}

    .userLogout:hover {
      color:var(--darkgreen);
    }

.user-menu-text {
   /* margin: 10px 0 5px;*/
    font-weight: 500;
}

.user-menu-dropdown li .user-logout a {
    background-color: var(--darkgreen);
    color: var(--white);
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 400;
    border-radius: 5px;
    line-height: 1;
    display: inline-block;
}

.user-logout {
    border-top: 1px solid var(--darkorange);
    padding: 10px;
    margin-top: 10px;
}

.user-menu-dropdown {
    box-shadow: 0px 7px 18px #15153e4d;
    border: none;
    padding-top: 20px;
    right: -20px;
    display: none;
}

.user--icon img {
    width: 80px;
}

.header-navheading {
    padding: 10px 10px 10px;
    text-align: center;
    font-size: 12px;
}

.notification-menu li.noti-top {
    padding: 0;
    background: var(--white);
    border-bottom: 1px solid var(--darkorange);
    border-radius: 5px 5px 0 0;
}

.notification-menu .main-notification-text {
    font-size: 13px;
}

.notification-menu .badge {
    background-color: var(--darkgreen) !important;
    color: var(--white);
    padding: 6px 10px;
    line-height: 1;
    font-size: 12px;
    font-weight: 400;
    margin-left: 5px;
}

.notification-menu li:hover {
    background-color: var(--lightpink2);
}

.dropdown-footer {
    text-align: center;
    padding: 0;
    font-size: 13px;
}

.notification-menu li.noti-bottom {
    border-top: 1px solid var(--darkorange);
    background: var(--white);
    padding: 10px;
    border-radius: 0 0 5px 5px;
}

.noti-bottom-link {
    color: var(--green02);
}

    .noti-bottom-link:hover {
        color: var(--green02);
    }

.notification-menu li.noti-bottom:hover, .notification-menu li.noti-top:hover {
    background-color: none;
}

.notification-menu li {
    background: transparent url("../images/bell.svg") no-repeat scroll 10px 14px;
    background-size: 25px;
    padding-left: 45px;
}

.mobile-search-dropdown1 {
    position: absolute;
    top: 35px;
    right: 0px;
    background-color: var(--white);
    border: #989898;
    padding: 20px;
    list-style: none;
    width: 250px;
    display: none;
    text-align: left;
    z-index: 9;
    box-shadow: 0px 7px 18px #15153e4d;
    border: none;
    right: -100px;
    border-radius: 5px;
}

.mobile-search-dropdown::before  {
   content:  "";
   position:  absolute;
   top:  -8px;
   right:  105px;
   width:  12px;
   height:  12px;
   border-top:  2px solid #f0f0f0;
   transform:  rotate(45deg);
   background:  var(--white);
   border-left:  2px solid #f0f0f0;
}


*, *::after, *::before {
  box-sizing: border-box;
}
:root {
    --white: #ffffff;
    --black: #000000;
    /*-- Default color --*/
    --lightpink: #FFF6F7;
    /*-- Top Notice --*/
    --lightpink2: #fff8e9;
    /*-- Tab content area --*/
    --lightgreen: #edfdf3;
    /*-- Upload file section,  Second menu bg color,   --*/
    /* --darkgreen: #0078d4;*/
    --darkgreen: #0e4da7;
    /*-- Menu hover and active,  Notification View All button,  Main Title,  Submit button,  Table heading,  Pagination Next Prev Button,  Checkbox,  default button --*/
    --darkred: #99024c;
    --lightred: #fdedf7;
    --lightred-2: #FD7972;
    /*-- Discard button,  Reset Button,  Reject Button  --*/
    --blue: #1e4bee;
    --darkorange: #EEC11E;
    /*-- Accordion Active left border,  Accordion Up Down Active Arrow --*/
    --lightorange: #fdedc9;
    /*-- Accordion Active BG,  Accordion Up Down Arrow,  Taab active bg --*/
    --pink01: #FFE2E5;
    /*-- Cost Center :  By Percentage  --*/
    --pink02: #FA5A7D;
    /*-- Total Fuel Amount Amount color,  Cost Center :  By Percentage Value color --*/
    --orange01: #FFF4DE;
    /*-- Cost Center :  Amount  --*/
    --orange02: #FAAF00;
    /*-- Cost Center :  Amount Value color,  Tab active right border and arrow,    --*/
    --green01: #DCFCE7;
    /*-- Cost Center :  Total Percent,  Pagination Acive number bg,   --*/
    --green02: #19BC4F;
    /*-- Cost Center :  Total Percent Value color,  Pagination Acive number border,   --*/
    --purple01: #F3E8FF;
    /*-- Cost Center :  Total Amount  --*/
    --purple02: #7224DA;
    /*-- Cost Center :  Total Amount Value color  --*/
    --bordercolor: #E8E9EB;
    /*-- Form Fields Border Color --*/
    --bordercolor-2: #D9D9D9;
    --lightgray: #dbdbdb;
    --bgpopup: #FFF8E2;
    --bgtr1: #FFF8E2;
    /*-- Table odd row background color --*/
    --bgtr2: #FFFCF0;
    /*-- Table even row background color --*/
    --taskbg: #FFFCF4;
    --loginbg: #FFFCF0;
    /*-- Login Bg --*/
    --gray-1: #4d4d4d;
    --gray-2: #F9F9F9;
    /*-- Compare table heading bg --*/
    --gray-3: #3F434A;
    --orangeborder: #F7B61E;
}

/*-- 31 Jan --*/
body.color-1 *  {
  
--white:  #ffffff;
  
--black:  #000000;
  
--lightpink:  #FFF6F7;
  
--lightpink2:  #e9ffea;
  
--lightgreen:  #edf0fd;
  
--darkgreen:  #010999;
  
--darkred:  #99024c;
  
--lightred:  #fdedf7;
  
--lightred-2:  #FD7972;
  
--blue:  #1e4bee;
  
--darkorange:  #1eee4b;
  
--lightorange:  #c9fdcb;
  
--pink01:  #FFE2E5;
  
--pink02:  #FA5A7D;
  
--orange01:  #FFF4DE;
  
--orange02:  #00fa0d;
  
--green01:  #dddcfc;
  
--green02:  #1b19bc;
  
--purple01:  #F3E8FF;
  
--purple02:  #7224DA;
  
--bordercolor:  #E8E9EB;
  
--bordercolor-2:  #D9D9D9;
  
--lightgray:  #dbdbdb;
  
--bgpopup:  #FFF8E2;
  
--bgtr1:  #e2ffef;
  
--bgtr2:  #f0fff7;
  
--taskbg:  #FFFCF4;
  
--loginbg:  #f0fff7;
  
--gray-1:  #4d4d4d;
  
--gray-2:  #F9F9F9;
  
--gray-3:  #3F434A;
  
--orangeborder:  #1ef73c;
  
}
body.color-1 .navbar .menu-icon path  {
   fill:  var(--darkgreen);
}

body.color-1 .header-menu .top-menu li a:hover,  body.color-1 .content-menu .content-menu-ul li a:hover,  body.color-1 .content-menu .content-menu-ul li.active a  {
   color:  var(--darkgreen);
}

/* body.color-1 .file-upload-img svg path  {
   fill:  var(--darkgreen);
   stroke:  var(--darkgreen);
}
*/


body.color-2 *  {
  
--white:  #ffffff;
  
--black:  #000000;
  
--lightpink:  #FFF6F7;
  
--lightpink2:  #e9f0ff;
  
--lightgreen:  #fdedf7;
  
--darkgreen:  #99014b;
  
--darkred:  #99024c;
  
--lightred:  #fdedf7;
  
--lightred-2:  #FD7972;
  
--blue:  #1e4bee;
  
--darkorange:  #1e4bee;
  
--lightorange:  #c9d9fd;
  
--pink01:  #FFE2E5;
  
--pink02:  #FA5A7D;
  
--orange01:  #FFF4DE;
  
--orange02:  #004afa;
  
--green01:  #fcdcf1;
  
--green02:  #bd1c88;
  
--purple01:  #F3E8FF;
  
--purple02:  #7224DA;
  
--bordercolor:  #E8E9EB;
  
--bordercolor-2:  #D9D9D9;
  
--lightgray:  #dbdbdb;
  
--bgpopup:  #e2e9ff;
  
--bgtr1:  #e2e9ff;
  
--bgtr2:  #f0f3ff;
  
--taskbg:  #FFFCF4;
  
--loginbg:  #f0f3ff;
  
--gray-1:  #4d4d4d;
  
--gray-2:  #F9F9F9;
  
--gray-3:  #3F434A;
  
--orangeborder:  #1e5ef7;
  
}
body.color-2 .navbar .menu-icon path  {
   fill:  var(--darkgreen);
}

body.color-2 .header-menu .top-menu li a:hover,  body.color-2 .content-menu .content-menu-ul li a:hover,  body.color-2 .content-menu .content-menu-ul li.active a  {
   color:  var(--darkgreen);
}


/*-- End 31 Jan --*/

body {
    font-weight: normal;
    font-family: "Poppins", sans-serif;
    font-weight: normal;
    color: var(--black);
}


html  {
  
font-family:  sans-serif;
  
line-height:  1.15;
  
-webkit-text-size-adjust:  100%;
  
-webkit-tap-highlight-color:  rgba(0,  0,  0,  0);
}


article,  aside,  figcaption,  figure,  footer,  header,  hgroup,  main,  nav,  section  {
  
display:  block;
}


body {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-weight: normal;
    color: var(--black);
    font-size: 15px;
    line-height: 1.3;
    text-align: left;
    background: #F5F5F5;
}


body.darkred .navbar .menu-icon path  {
   fill:  var(--darkred);
}

body.darkred .header-menu .top-menu li a:hover,  body.darkred .content-menu .content-menu-ul li a:hover,  body.darkred .content-menu .content-menu-ul li.active a  {
   color:  var(--darkred);
}

body.darkred .notification-count,  body.darkred .btn-part .save-btn  {
  background:  var(--darkred);
}

body.darkred .form-control:focus  {
   border-color:  var(--darkred);
}

body.darkred .content-menu  {
   background:  var(--lightred);
}

body.darkred .content-menu .content-menu-ul li.active a::after   {
   background:  var(--blue);
}

body.darkred .main-header   {
   border-color:  var(--blue);
}


.error-text  {
   font-weight:  400;
   font-size:  12px;
   line-height:  25px;
   color:  #7D2D3E;
}



.error-msg  {
   background:  var(--lightpink);
   padding:  3px 10px;
}

.note-msg  {
   /* background:  #FFF6F7;
   */background:  none;
   padding:  3px 30px;
   /*border-bottom:  1px solid var(--lightpink);*/
}

.msg-icon  {
   margin-right:  10px;
}



/*-- Header part --*/
.main-header {
    background: white;
    padding: 10px 0;
    border-bottom: 2px solid var(--orangeborder);
    box-shadow: 0px 2px 5px #dedede;
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0;
    left: 0;
    z-index: 99; /* JG*/
     
}

.main-header .logo  {
   flex:  0 0 13%;
   max-width: 13%;
}

.header-right  {
   justify-content:  space-between;
   display:  flex;
   align-items:  center;
   flex:  0 0 87%;
   max-width: 87%;
   position:  static;
}

/* .top-dropdown  {
   float:  left;
}

.top-notification  {
   float:  left;
}

.top-user  {
   float:  left;
}
*/
.header-right-last  {
   align-self:  center;
   align-items:  center;
   display:  inline-flex;
}

.header-menu  {
   align-items:  center;
   align-self:  center;
}

.header-menu .top-menu li  {
   float:  left;
   width:  auto;
   list-style:  none;
   margin:  0;
   padding:  15px 8px;
   position:  relative;
}

.header-menu .top-menu  {
   list-style:  none;
   margin:  0;
   padding:  0;
}



    .header-menu .top-menu li a:hover {
        color: var(--darkgreen)!important;
    }

    .header-menu .top-menu li:hover a .menu-text  {
   color:  var(--black);
}

.menu--con  {
   margin-right:  10px;
}

.header-search  {
   max-width:  170px;
   visibility: hidden;
}

.header-search input  {
   width:  100%;
   background:  #FFFFFF url("../images/search.svg") no-repeat scroll 15px center;
   box-shadow:  0px 2px 5px rgba(38,  51,  77,  0.2);
   border-radius:  30px;
   border:  0;
   padding:  10px 10px 10px 40px;
   line-height:  1;
   /* border:  1px solid #eee;
   */ font-size:  14px;
   color:  #BFBFBF;
   height:  40px;
}

.top-notification  {
   margin:  0 20px;
   position:  relative;
}

.part-notification  {
   position:  relative;
   width:  35px;
   height:  35px;
   background:  #FFFFFF;
   box-shadow:  0px 2px 5px rgba(38,  51,  77,  0.2);
   border-radius:  100px;
   display:  inline-flex;
   justify-content:  center;
   cursor:  pointer;
}

.part-notification img  {
  width: 16px;
}



.active-menu  {
  display: none;
}


/*-- Main Menu Dropdown --*/
.header-menu .top-menu li .main-dropdown  {
  opacity: 0;
   visibility: hidden;
   width: 250px;
   background: var(--white);
   border-radius: 6px;
   padding: 15px;
    position:  absolute;
   z-index:  999;
   box-shadow:  0px 0px 12px #ccc;
}

.header-menu .top-menu li .main-dropdown::before  {
   content:  "";
   position:  absolute;
   top:  -8px;
   left:  30px;
   width:  14px;
   height:  14px;
   border-top:  2px solid #f0f0f0;
   transform:  rotate(45deg);
   background:  var(--white);
   border-left:  2px solid #f0f0f0;
   box-shadow:  -2px -2px 3px #e6e6e6;
}

.header-menu .top-menu li:hover .main-dropdown  {
  opacity: 1;
   visibility: visible;
   top:  50px;
}

.main-dropdown-ul  {
   float:  left;
   width:  100%;
   padding:  0;
   margin:  0;
}

.header-menu .top-menu li .main-dropdown-ul li  {
   float:  left;
   width:  100%;
   padding:  10px 10px 10px 20px;
   margin:  0;
   border-bottom:  1px solid #eee;
}

.header-menu .top-menu li .main-dropdown-ul li::before  {
   content:  "";
   position:  absolute;
   width:  7px;
   height:  7px;
   border-top:  1px solid var(--tertiary);
   border-right:  1px solid var(--tertiary);
   transform:  rotate(45deg);
   left:  0;
   top:  16px;
}

.header-menu .top-menu li .main-dropdown-ul li:nth-child(2n)  {
   float:  right;
}

.header-menu .top-menu li .main-dropdown-ul li ul  {
   float:  left;
   width:  100%;
   padding:  0;
   margin:  5px 0 0;
}

.header-menu .top-menu li .main-dropdown-ul li ul li  {
   width:  100%;
   border-bottom:  0;
   padding:  3px 15px 3px 15px;
}

.header-menu .top-menu li .main-dropdown-ul li ul li::before  {
   transform:  none;
   height:  1px;
   border-radius:  0;
}

.header-menu .top-menu li .main-dropdown-ul li:last-child/* ,  .header-menu .top-menu li .main-dropdown-ul li:nth-last-child(2) */  {
   border-color:  transparent;
}

/*-- Footer --*/
.copyright-part  {
   padding:  15px 0px;
   text-align:  center;
   font-size:  13px;
   line-height:  16px;
   color:  var(--black);
}




/*-- notification --*/
.notification-menu,  .top-menu-dropdown,  .user-menu-dropdown  {
   position:  absolute;
   top:  50px;
   right:  0px;
   background-color:  var(--white);
   border:  #989898;
   padding:  0px;
   list-style:  none;
   width:  250px;
   display:  none;
   text-align:  left;
   z-index: 9;
   box-shadow:  4px 8px 10px #e4e4e4;
   border:  2px solid var(--lightorange);
   border-radius:  5px;
}

.top-notification:hover .notification-menu  {
  display: block !important;
}
.notification-menu  {
   box-shadow:  0px 7px 18px #15153e4d;
   border:  none;
   width:  300px;
}

.notification-menu::after  {
   content:  "";
   position:  absolute;
   top:  -25px;
   right:  0;
   width:  50%;
   height:  25px;
   background:  transparent;
   z-index:  9;
}

.top-menu-dropdown {
    position: absolute;
    top: 50px;
    width: calc(100% - 30px);
    border: 0;
    border-top: 0px solid var(--lightorange);
    padding: 20px 0;
    box-shadow: 0px 0px 12px #ccc;
    left: 15px;
    z-index: 9999;
    cursor: pointer;
}

.top-menu-dropdown::before  {
  content:  "";
   position:  absolute;
   top:  -8px;
   right:  124px;
   width:  14px;
   height:  14px;
   border-top:  2px solid #f0f0f0;
   transform:  rotate(45deg);
   background:  var(--white);
   border-left:  2px solid #f0f0f0;
   box-shadow:  -2px -2px 3px #e6e6e6;
}

.top-menu-dropdown-list  {
   padding:  0px;
   list-style:  none;
   margin:  0;
}

.top-menu-dropdown::after  {
   content:  "";
   position:  absolute;
   top:  -25px;
   left:  0;
   width:  100%;
   height:  25px;
   background:  transparent;
}

.top-menu-dropdown .top-menu-dropdown-list-ul  {
   float:  left;
   width:  100%;
   padding:  0;
   margin:  10px 0 0;
}

.top-menu-dropdown .top-menu-dropdown-list-ul li  {
   float:  left;
   width:  100%;
   padding:  8px 10px 8px 20px;
   margin:  0;
   border-bottom:  1px solid #eee;
   list-style: none;
   position:  relative;
}

.top-menu-dropdown .top-menu-dropdown-list-ul li::before  {
   content:  "";
   position:  absolute;
   width:  7px;
   height:  7px;
   border-top:  1px solid var(--darkgreen);
   border-right:  1px solid var(--darkgreen);
   transform:  rotate(45deg);
   left:  0;
   top:  14px;
}

.top-menu-dropdown .top-menu-dropdown-list-ul li:nth-child(2n)  {
   float:  right;
}

.top-menu-dropdown .top-menu-dropdown-list-ul li ul  {
   float:  left;
   width:  100%;
   padding:  0;
   margin:  0;
}

.top-menu-dropdown .top-menu-dropdown-list-ul li ul li  {
   width:  100%;
   border-bottom:  0;
   padding:  6px 15px 6px 15px;
}

.top-menu-dropdown .top-menu-dropdown-list-ul li ul li::before  {
   transform:  none;
   height:  1px;
   border-radius:  0;
}

.top-menu-dropdown .top-menu-dropdown-list  {
   margin-bottom:  25px;
   float:  left;
   width:  100%;
}

.top-menu-dropdown .top-menu-dropdown-list:last-child  {
   margin-bottom:  0;
}

.top-menu-dropdown .top-menu-dropdown-list li a .menu-text  {
  font-weight: 500;
}

.hide-in-desk  {
  display: none;
}

.notification-menu::before,  /* .top-menu-dropdown::before,  */ .user-menu-dropdown::before  {
   content:  "";
   position:  absolute;
   top:  -8px;
   right:  10px;
   width:  12px;
   height:  12px;
   border-top:  2px solid #f0f0f0;
   transform:  rotate(45deg);
   background:  var(--white);
   border-left:  2px solid #f0f0f0;
}

.user-menu-dropdown::before  {
  right: 30px;
}

.notification-menu li,  .top-menu-dropdown li  {
   background-color:  var(--white);
   padding:  15px 10px;
   margin-bottom:  0px;
   border-bottom:  1px solid #e4e4e4;
}

.notification-menu li:last-child,  .top-menu-dropdown li:last-child  {
   margin-bottom:  0px;
   border-bottom:  0;
}

.notification-menu .avatar  {
   padding:  2px 0;
}

.notification-menu h3  {
   font-size:  15px;
   margin:  0 0 5px 0;
   display:  inline;
}

.notification-menu p  {
   margin-bottom:  0;
   font-size:  12px;
}

.notification-date  {
   font-size:  12px;
   color:  var(--gray);
}

.top-user  {
   position:  relative;
   cursor: pointer;
}

/*.top-user:hover .user-menu-dropdown  {
  display: block !important;

}*/
.top-user:hover .user-menu-dropdown::after  {
   content:  "";
   position:  absolute;
   top:  -25px;
   right:  0;
   width:  50%;
   height:  25px;
   background:  transparent;
   z-index:  9;
}

.top-dropdown > img  {
   cursor: pointer;
}



.top-menu-dropdown li a:hover,  .user-menu-dropdown li a:hover  {
  color: var(--darkgreen);
   text-decoration:  none;
}

.user-menu-dropdown li  {

}

.user-menu-dropdown li .menu--con  {
   width:  40px;
   height:  40px;
   border:  1px solid #e1e1e1;
   display:  inline-block;
   margin:  0 auto 5px;
   border-radius:  100%;
   padding-top:  7px;
}

.user-menu-dropdown li .user-link a  {
   /* background-color:  var(--darkgreen);
   */ color:  var(--darkgreen);
   padding:  0px 10px 5px;
   font-size:  14px;
   font-weight:  400;
   border-radius:  5px;
   line-height:  1;
   display:  inline-block;
   text-decoration:  underline;
}

.user-link,  .user-menu-text,  .user-logout  {
   float: inherit;
   width:  100%;
   /*text-align:  center;*/
}

.user-menu-text {
    font-weight: 600;
    font-size: 16px;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
    max-width: 10.5em;
}

.user-menu-email {
    font-weight: 300;
    font-size: 14px;
    margin-top: 2px;
    color: #959595;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
    max-width: 12.5em;
}

.user-menu-dropdown li .user-logout a {
    background-color: var(--darkgreen);
    color: var(--white);
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 400;
    border-radius: 5px;
    line-height: 1;
    display: inline-block;
}

.user-logout  {
   border-top:  1px solid var(--darkorange);
   padding:  10px;
   margin-top:  10px;
}

.user-menu-dropdown {
    box-shadow: 0px 7px 18px #15153e4d;
    border: none;
    padding: 15px 0px 15px 0px;
    right: -20px;
    display:none;
    position: absolute;
   width: 300px;
 
}

.user--icon img {
    width:60px;
}

.user-menu__details {
        display: flex;
    flex-direction: column;
    margin: auto 15px;
}
.profile-highlight {
    display: flex;
    border-bottom: 1px solid #E0E0E0;
    padding: 12px 16px;
    margin-bottom: 6px;
}
.header-navheading {
    padding: 10px 10px 10px;
    text-align: center;
    font-size: 12px;
}
.user-menu-link {
    display: flex;
    text-decoration: none;
    color: #333333;
    font-weight: 400;
    font-size: 14px;
    padding: 6px 30px;
}

.notification-menu li.noti-top {
    position:sticky;top:0;
    padding: 0;
    background: var(--white);
    border-bottom: 1px solid var(--darkorange);
    border-radius: 5px 5px 0 0;
}

.notification-menu .main-notification-text  {
   font-size:  13px;
}

.notification-menu .badge  {
   background-color:  var(--primary) !important;
   color:  var(--white);
   padding:  6px 10px;
   line-height:  1;
   font-size:  12px;
   font-weight:  400;
   margin-left:  5px;
}

.notification-menu li:hover  {
   background-color:  var(--transparent);
}

.dropdown-footer  {
   text-align:  center;
   padding:  0;
   font-size:  13px;
}

.notification-menu li.noti-bottom  {
   border-top:  1px solid var(--darkorange);
    background:  var(--white);
   padding:  10px;
   border-radius:  0 0 5px 5px;
}

.noti-bottom-link  {
   color:  var(--green02);
}

.noti-bottom-link:hover  {
   color:  var(--green02);
}

.notification-menu li.noti-bottom:hover,  .notification-menu li.noti-top:hover  {
  background-color: none;
}

.notification-menu li  {
   background:  transparent url("../images/bell.svg") no-repeat scroll 10px 14px;
   background-size:  25px;
   padding-left:  45px;
}

.notification-menu li img {
     width:20px;
     height:20px;
}

.mobile-search-dropdown1  {
   position:  absolute;
   top:  35px;
   right:  0px;
   background-color:  var(--white);
   border:  #989898;
   padding:  20px;
   list-style:  none;
   width:  250px;
   display:  none;
   text-align:  left;
   z-index: 9;
   box-shadow:  0px 7px 18px #15153e4d;
   border:  none;
   right:  -100px;
   border-radius:  5px;
}

.mobile-search-dropdown1::before  {
   content:  "";
   position:  absolute;
   top:  -8px;
   right:  105px;
   width:  12px;
   height:  12px;
   border-top:  2px solid #f0f0f0;
   transform:  rotate(45deg);
   background:  var(--white);
   border-left:  2px solid #f0f0f0;
}

.breadcrumb {
    background-color: var(--lightprimary);
    padding: 0px !important;
    border-radius: 0rem !important;
    line-height: 0px;
    padding-top: 25px;
    top: 10px;
    margin-top: 14px;
}
 
/*<!-- The Modal -->*/
.modal-header {
    border-bottom: 1px solid var(--bordercolor);
    padding: 0px 30px;
    height: 30px;
}
.modal-footer {
    border-top: 1px solid var(--bordercolor) !important;
    height: 60px;
    padding: 0px 14px;
}
#btnClose {
    float: right;
    justify-items: self-end;
    margin-right: 0px!important;
}


.modalbody-xl {
    overflow-x: auto;
    /*height: 460px !important;*/
    height: calc(100vh - 200px) !important; /*JG-ADD*/
    overflow: auto !important;
    overflow: hidden;
    margin-top: 0px !important;
    padding: 30px;
    /*padding-top: 14px;JG*/
    box-sizing: border-box;
}

@media (max-width:420px) {
    .modalbody-xl {
        padding: 10px;
    }
}

.container {
    width: 100%;
    max-width: none !important;
    padding-left: 25px !important;
    padding-right: 25px !important;
}

/*.modal-dialog {
    padding-top: 60px !important;
   
}*/



/*JG - Dynamic width and height for content*/
.inbox-count {
    position: absolute;
    right: 42px;
    bottom: 57%;
    min-width: 20px;
    min-height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 5px 4px 3px;
    color: #FFF;
    font-size: 11px;
    font-weight: bold;
    background: #000;
    aspect-ratio: 1/1;
    border-radius: 100%;
}


/*
.inbox-count {
    position: absolute;
    right: 42px;
    top: -1px;
    width: 23px;
    height: 23px;
    background: var(--primary);
    text-align: center;
    color: var(--white);
    border-radius: 100%;
    font-size: 10px;
    padding-top: 5px;
}
*/
.the-count {
    font-size: 12px;
    color: var(--tertiary);
    
}

 /*Begining of addition by JG*/
.selectize-dropdown, .selectize-dropdown.form-control { z-index:2}
    /*End of addition by JG*/


/*6-6-2023|JG| :- Class added to highlight unread notification*/
/*
.unread_notif, .noti-actionable {
    background: pink !important;
    // please give styling of your choice
}
*/



/*JG - Added for view more in notification */
.hidden {
    display:none !important
}
.view_more {
       
        width:auto;
        margin:10px auto;
        text-align:center;
        cursor:pointer !important;
}
.view_more span {
    background:#000;
    color:#FFF;
    border-radius:5px;
    padding:5px 10px; 
    cursor: pointer !important;
    font-size:80%;
}

@media print { 
    .hidden {
        display:none;
        visibility:hidden;
    }
    @page {
        size: A4;
    }
    html, body {
        page-break-after: avoid;
        page-break-inside: avoid;
        margin-bottom: 0px;
        padding: 0;
        height: 95%;
    }
    
}

.visCols{
    display:none;
}

.text-center{
    text-align:center;
}