body {
    font-family: sans-serif !important;
    margin: 0 !important;
    color: #494b4d !important;
    font-size: 14px !important;
    line-height: 20px !important;
    background-color: #F6F6F6;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
    position: absolute;
    width: 99% !important;
    top: 52px;
    left: 0px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}
.countdown {
    padding-top: 25px;
    margin-top: 0px !important;
    text-align: left;
    font-size: 16px;
     
    color: #087c22;
}
.countdown-red {
   
    color: orangered;
    font-size: 24px;
    font-weight: bold;
}
.countdown-time {
    color: #087c22;
    font-size: 24px;
    font-weight: bold;
}
.rtable,
.rtable--flip tbody {
    -webkit-overflow-scrolling: touch;
    background: radial-gradient(left, ellipse, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(right, ellipse, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
    background-size: 10px 100%, 10px 100%;
    background-attachment: scroll, scroll;
    background-repeat: no-repeat;
    /*overflow-x:auto!important; */
}

    .rtable td:first-child,
    .rtable--flip tbody tr:first-child {
        /* background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, white), to(rgba(255, 255, 255, 0)));
        background-image: linear-gradient(to right, white 50%, rgba(255, 255, 255, 0) 100%);
        */
        background-repeat: no-repeat;
        background-size: 20px 100%;
    }

    .rtable td:last-child,
    .rtable--flip tbody tr:last-child {
        background-image: -webkit-gradient(linear, right top, left top, color-stop(50%, white), to(rgba(255, 255, 255, 0)));
        background-image: linear-gradient(to left, white 50%, rgba(255, 255, 255, 0) 100%);
        background-repeat: no-repeat;
        background-position: 100% 0;
        background-size: 20px 100%;
    }

    .rtable:last-child tr:nth-child(odd) {
        background-color: #fff;
    }

    .rtable th {
        font-size: 11px;
        text-align: left;
        text-transform: uppercase;
        background: #204384;
        color: white;
    }

    .rtable th {
        padding: 6px 12px;
        border: 1px solid #cfe3f5;
    }

    .rtable td {
        padding: 6px 12px;
        border: 1px solid #cfe3f5;
        word-break: break-word;
    }

        .rtable td a {
            color: #2154fc !important;
        }

.rtable--flip {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    background: none;
}

    .rtable--flip thead {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        min-width: -webkit-min-content;
        min-width: -moz-min-content;
        min-width: min-content;
    }

    .rtable--flip tbody {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .rtable--flip tr {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        min-width: -webkit-min-content;
        min-width: -moz-min-content;
        min-width: min-content;
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }

    .rtable--flip td,
    .rtable--flip th {
        display: block;
    }

    .rtable--flip td {
        background-image: none !important;
        border-left: 0;
    }

        .rtable--flip th:not(:last-child),
        .rtable--flip td:not(:last-child) {
            border-bottom: 0;
        }

.rtable .hottask {
    color: red !important;
}

    .rtable .hottask a {
        color: red;
    }

select, input[type="text"], input[type="password"], input[type="email"], input[type="date"] {
    border: 1px solid #b1a3e9;
    height: 34px !important;
    border-radius: 4px;
    width: 100%;
    max-width: 100%
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    border: 1px solid #b1a3e9;
    height: 34px !important;
    border-radius: 4px;
    width: 100%;
    max-width: 100%
}
#createInfo  textarea{
    height:auto!important;
}
textarea {
    height: auto !important;
}
.form-control {
    border: 1px solid #b1a3e9 !important;
}

label {
    font-weight: 500;
    color: #204384;
    padding-bottom: 1px;
    margin-bottom: 1px !important;
}
/*!
// CodePen house keeping
*/
body {
    margin: 0;
    padding: 25px;
    color: #494b4d;
    font-size: 14px;
    line-height: 20px;
    background-color: #F6F6F6;
}

h1, h2, h3 {
    margin: 30px 0 10px 0;
    color: #208eb2;
}

h1 {
    font-size: 25px;
    line-height: 30px;
}

h2 {
    font-size: 18px;
    line-height: 25px;
}

h3 {
    font-size: 16px;
    line-height: 20px;
}

table {
    margin-bottom: 30px;
}

.tableDyagram {
}

    .tableDyagram td {
        width: 50%;
    }

a {
    color: #2154fc;
}

.code {
    background: #fffbcc;
    font-size: 12px;
}

.formContent {
    margin-top: 50px !important;
}

#departmentPie canvas {
    height: 300px;
}

.textAlign-right {
    text-align: right !important
}

.btnAddnewColor {
    color: #204384;
}

.btnMoveDataColor {
    color: #f19f2b;
}

.btnSearchColor {
    color: #EB2A27;
}

.btnSearchBackgroundColor {
    background-color: #EB2A27 !important;
    border: none;
}

.btnUploadBackgroundColor {
    background-color: #f0ad4e;
    border: none;
}

.btnDownloadColor {
    color: #f7a530 !important;
}

.btnSaveColor {
    background-color: #EB2A27 !important;
    border: none;
}

.btnRefreshColor {
    background-color: #5cb85c;
    border: none;
}

.buttonSpace {
    margin-left: 10px;
    margin-right: 10px;
}

.modal-body select {
    border-radius: 5px;
}

.selectDepartment {
    height: 38px;
}

.btnEditColor {
    color: #5cb85c;
}

.btnBackColor {
    padding-top: 20px;
    color: #ec971f;
}

.link-goback a {
    color: #2154fc !important;
}

    .link-goback a:hover {
        text-decoration: underline;
    }

.pageTitle {
    padding-top: 25px;
    margin-top: 0px !important;
    text-align: left;
    font-size: 16px;
    color: #222222;
    text-transform: uppercase;
}

.bellNotification {
    padding: 10px;
    height: auto;
}

.nextDepartSelection {
}

    .nextDepartSelection select {
        width: 300px;
    }

.bellNotification:hover {
    background-color: #e6e5e5;
}

.pageTitle_Notification {
    margin-top: 10px;
    padding-top: 10px;
    padding-left: 20px;
    text-align: left;
    color: #337ab7;
    font-size: 16px;
}

.popup-display label {
    font-weight: bold;
}

.control-padding-bottom-10 {
    padding-bottom: 10px;
}

.control-padding-top-10 {
    padding-top: 10px;
}

.form_edit {
    padding: 0 30px 0 30px !important;
}

    .form_edit .form_edit_group {
        background-color: #fff !important;
        border-radius: 18px !important;
        padding: 30px;
        border: 1px solid #DDDDDD;
        box-shadow: 0 0 4px rgb(0 0 0 / 70%) !important;
    }

    .form_edit .form_display_group {
        background-color: #fff !important;
        border-radius: 18px !important;
        padding: 30px;
        border: 1px solid #DDDDDD;
        box-shadow: 0 0 4px rgb(0 0 0 / 70%) !important;
    }

        .form_edit .form_display_group a {
            color: #204384;
        }

.form-horizontal form_edit a {
    color: #204384;
}

.form_edit .form_edit_group_title {
    color: #222222;
    text-transform: uppercase;
    font-weight: bold;
    padding-bottom: 15px;
    padding-top: 20px;
}

.form_edit .form_display_group label {
    font-weight: bold !important;
}

.content-notification {
    width: 80%;
    float: left;
}

    .content-notification a {
        color: #222 !important;
    }

        .content-notification a:hover {
            color: red !important;
        }

.createTitle {
    padding-top: 25px;
    text-align: right;
    font-size: 15px;
}

    .createTitle a {
        color: #204384;
        font-size: 16px;
       
    }
    .createTitle a:hover {
        text-decoration: underline;
    }
        .createTitle button:hover {
            text-decoration: underline;
        }
    #mytable a:hover {
        text-decoration: underline;
    }
.modal-header1 {
    padding: 7px;
    height: 35px !important;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom: 1px solid #e5e5e5;
    background-color: #0078ca;
    color: #fff;
}

    .modal-header1 h5 {
        color: #fff;
    }

.modal-content {
    border: none!important;
    border-radius:6px;
}

.loginImage {
    min-height: 100%;
    max-width: 100%;
    /* Set up proportionate scaling */
    width: 100%;
    height: 100%;
    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
    background: url('../Images/login-bg.png') no-repeat center center fixed;
    /* Center and scale the image nicely */
    background-position: center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.logincontainer {
    margin-top: 0 auto !important;
    border-radius: 18px;
    padding: 0px;
    background-color: #fff;
    width: 300px;
    height: auto;
}

.loginpadding-0 {
    padding: 0px;
}

.login_header {
    width: 300px;
    height: 224px;
    position: relative;
}

.login_header_text {
    position: absolute;
    z-index: 1000;
    top: 45%;
    left: 0;
    font-size: 24px;
    color: #fff;
    font-weight: bold;
    padding-left: 10px;
    line-height: 30px;
}

.login_contain {
    border-radius: 18px;
    width: 300px;
    height: auto;
    padding-top: 30px;
}

.divOrganizationMain {
    position: relative;
}

.divOrganizationDetail {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    min-width: 400px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
}
/*Treeview*/
.tree, .tree ul {
    margin: 0;
    padding: 0;
    list-style: none
}

    .tree ul {
        margin-left: 1em;
        position: relative;
    }

        .tree ul ul {
            margin-left: .5em
        }

        .tree ul:before {
            content: "";
            display: block;
            width: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            border-left: 1px solid
        }

    .tree li {
        margin: 0;
        padding: 0 1em;
        line-height: 2em;
        color: #fbd85d;
        font-weight: 500;
        position: relative;
    }

        .tree li a:hover {
            background-color: lightgrey;
        }

    .tree ul li:before {
        content: "";
        display: block;
        width: 10px;
        height: 0;
        border-top: 1px solid;
        margin-top: -1px;
        position: absolute;
        top: 1em;
        left: 0;
    }

    .tree ul li:last-child:before {
        background: #fff;
        height: auto;
        top: 1em;
        bottom: 0
    }

.indicator {
    margin-right: 5px;
}

.tree li a {
    text-decoration: none;
    color: #369;
}

.tree li button, .tree li button:active, .tree li button:focus {
    text-decoration: none;
    color: #369;
    border: none;
    background: transparent;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    outline: 0;
}
/*End Tree View*/
.modal-header-center {
    text-align: center !important;
}

.padding-10 {
    padding: 10px !important;
}

.padding-5 {
    padding: 5px !important;
}

.padding-25 {
    padding: 30px !important;
}

.padding-20 {
    padding: 20px !important;
}

.dateControlHeight {
    height: 34px !important;
    padding-bottom: 4px;
}

.dateControlHeightWidth {
    height: 34px !important;
    padding-bottom: 4px;
}

.btnSearchAdvance {
    color: #ec971f;
}



.label-left {
    padding-top: 3px;
    font-weight: 600;
}

.fullControlWidth {
    max-width: 100% !important;
}

.fullControlWidth2 {
    max-width: 80% !important;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.modal-success {
    padding: 10px;
    color: white;
    border: 1px solid #e5e5e5;
    background-color: #5cb85c;
}

.modal-message {
    padding: 10px;
    color: white;
    border: 1px solid #e5e5e5;
    background-color: #5cb85c;
}

.modal-error {
    padding: 10px;
    color: white;
    border: 1px solid #e5e5e5;
    background-color: #f84742;
}

    .modal-error h4 {
        color: #fff !important;
        font-size: 14px;
    }

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

.taskDashboard {
    /*background-color: #f2f5f9;*/
    /*  background-color: #fff;*/
    /*box-shadow: inset 0 4px 3px -4px rgb(0 0 0 / 50%);*/
    /* border-top: 2px solid #e7eaeb;*/
}

    .taskDashboard .searchTask {
        background-color: #0078ca;
        margin: 20px;
    }


    .taskDashboard .taskHeader {
        height: 23px;
        width: 100%;
        margin-bottom: 35px;
        text-align: center;
    }

        .taskDashboard .taskHeader ul {
            border: 1px solid #ccc;
            border-radius: 2px;
            padding: 10px;
            width: 15%;
            height: auto;
            margin: 0 0.5%;
            display: inline-block;
            vertical-align: top;
            background-color: #4694fc;
            color: #fff;
        }

        .taskDashboard .taskHeader li {
            list-style: none;
            background-color: #4694fc;
            margin: 0;
        }

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

        .taskDashboard .contentBoard li {
            list-style: none;
            padding: 8px;
            border-radius: 5px;
            margin: 0 0 5px;
            box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
            border: 1px solid #dddddd;
            cursor: pointer;
        }

.contentBoard ul {
    /*border: 1px solid #ccc;
        border-radius: 2px;*/
    padding: 15px;
    width: 99%;
    height: auto;
    vertical-align: top; /*
    border: 1px solid #dddddd;*/ /*
    box-shadow: 0 6px 12px rgb(0 0 0 / 10%);*/
}

.contentBoard .taskTitle {
    color: #fff;
    font-size: 14px;
    padding-top: 8px;
    padding-bottom: 5px;
}

.contentBoard .hottask {
    padding-right: 2px;
    border-radius: 5px;
    background-color: #EB5A47;
}

.contentBoard .waitingTask {
    padding-right: 2px;
    border-radius: 5px;
    background-color: #FFA01A;
}

.contentBoard .inprogressTask {
    padding-right: 2px;
    border-radius: 5px;
    background-color: #007ABF;
}

.contentBoard .returnedTask {
    padding-right: 2px;
    border-radius: 5px;
    background-color: #717171;
}

.contentBoard .reviewTask {
    padding-right: 2px;
    border-radius: 5px;
    background-color: #C378E0;
}

.contentBoard .doneTask {
    border-radius: 5px;
    background-color: #62BE4F;
}

.contentBoard ul li {
    color: #222222;
    background-color: #fff;
}


.contentBoard .hotTitle {
    color: #fff;
}

.taskDashboard .contentBoard ul.over {
    padding-bottom: 55px;
}

    .taskDashboard .contentBoard ul.over li {
        background: #fff;
    }

.top-menu {
    background-color: #204384;
    height: 57px;
    padding-top: 5px;
    text-align: left !important;
}

    .top-menu .logo {
        padding: 0px 5px 10px 1px;
    }

    .top-menu .menuItem {
        color: #F6F6F6 !important;
    }

        .top-menu .menuItem .parentmenu {
        }

            .top-menu .menuItem .parentmenu:hover {
                background-color: #DDDDDD;
            }

        .top-menu .menuItem ul li a:hover {
            color: #EDB925 !important;
        }

        .top-menu .menuItem ul li div a:hover {
            color: #F6F6F6 !important;
        }

.navbar-inverse .navbar-nav > li > a {
    color: #F6F6F6 !important;
    text-align: left !important;
    font-weight: 500;
    font-size: 15px;
    font-family: Arial;
}

.navbar-inverse .navbar-nav > li > a {
    color: #F6F6F6 !important;
    text-align: left !important;
    font-weight: 500;
    font-size: 15px;
    font-family: Arial;
}

.nav > li > a {
    padding: 10px 8px;
}

.navbar {
    border: 1px solid #DDDDDD;
}

#board div h3 {
    display: inline-block;
    background-color: #6e8af6;
    height: 35px;
    width: 22%;
    margin: 1%;
    text-align: center;
}

.taskContent {
    text-align: left;
}

.taskcontentDescription {
    word-wrap: break-word; /* IE 5.5-7 */
    white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
    "margin-bottom:5px;
}

.taskDashboard h2 {
    margin-top: 7px;
    /*color: #2154fc;*/
    color: #515254 !important;
    font-weight: bold;
    font-size: 14px !important;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #204384;
    min-width: 220px;
    border-radius: 8px;
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
    z-index: 1;
    top: 40px;
}

    .dropdown-content a:first-child {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .dropdown-content a:last-child {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }
    /* Links inside the dropdown */
    .dropdown-content a {
        color: #fff;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

        /* Change color of dropdown links on hover */
        .dropdown-content a:hover {
            background-color: #EDB925;
            color: #204384 !important;
        }

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #d8dad8;
}

.profiles {
    border: none;
    outline: 0px !important;
    background-color: #fff;
}

    .profiles button {
        padding-top: 7px;
        outline: 0px !important;
        border: none;
        background-color: #204384;
    }

.profile-notification {
    color: #6e8af6;
    width: 15%;
    text-align: center;
    height: 40px;
    float: left;
}

.profile {
    border-radius: 50%;
}

#notification .dropdown-menu {
    top: 85%;
    word-wrap: break-word;
    border-radius: 4px !important;
    width: 380px;
    overflow-y: auto;
    overflow-x: hidden;
    height: 500px;
}

.bellColor {
    color: #fff;
    text-align: center;
    background-image: url('../Images/bell.png');
    width: 21px;
    height: 22px;
    background-repeat: no-repeat;
}

.bellColor-notification {
    z-index: 1111;
    top: -12px;
    left: 10px;
    position: absolute;
    width: auto;
    height: auto;
}

.bellColor-span {
    padding-top: 3px;
    padding-left: 3px;
    padding-right: 4px;
    text-align: center;
    font-size: 11px;
    background-color: red;
    line-height: 1;
    border-radius: 50%;
    display: inline-flex;
    width: auto;
    height: auto;
    color: #fff;
    font-weight: 500;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.dashboard-tasktitle {
    font-size: 18px;
    color: #222222;
    font-weight: bold;
    margin-top: 20px;
}

.dashboard-paddingleff-20 {
    padding-left: 20px;
}

.dashboard-paddingleff-hot {
    width: 120px;
    height: 32px;
    background-color: #EB5A47;
    color: #fff;
    border-radius: 8px;
    padding-top: 4px;
    text-align: center;
}

.dashboard-paddingleff-open {
    width: 120px;
    height: 32px;
    background-color: #FFA01A;
    color: #fff;
    border-radius: 8px;
    font-weight: bold;
    padding-top: 4px;
    text-align: center;
}

.dashboard-paddingleff-done {
    width: 120px;
    height: 32px;
    background-color: #62BE4F;
    color: #fff;
    border-radius: 8px;
    padding-top: 4px;
    text-align: center;
}

.dashboard-paddingleff-inprogress {
    width: 120px;
    height: 32px;
    background-color: #007ABF;
    color: #fff;
    border-radius: 8px;
    padding-top: 4px;
    text-align: center;
}

.header_dashboard {
    padding: 5px;
    color: #FFF;
    border-radius: 18px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 15px 0 rgba(0, 0, 0, 0.19);
    height: 100% !important;
}

.header_dashboard_one {
    background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%) !important;
}

.header_dashboard_two {
    background-image: linear-gradient(to left, #B4EC51 0%, #89CE33 100%) !important;
}

.header_dashboard_three {
    background-image: radial-gradient(circle 248px at center, #EDB925 0%, #EDB925 47%, #EDB925 100%) !important;
}

.header_dashboard_four {
    background-image: linear-gradient( -20deg, #F5515F 0%, #F5515F 100%) !important;
}

.header_dashboard .reg1 {
    font-weight: bold !important;
    color: #fff;
    font-size: 38px !important;
    float: left;
    margin-right: 20px;
}

.header_dashboard .reg2 {
    font-size: 16px;
    padding: 5px 13px 5px 13px;
    height: 60px;
    margin-right: 8px;
    background-color: #89CE33;
    border-radius: 5px;
}

.header_dashboard .reg3_text {
    color: #fff;
}

.boder-none {
    border: none;
}

.charBox {
    background-color: #fff;
    border: 1px solid #DDDDDD;
    border-radius: 18px
}

.barCharText h1 {
    text-transform: uppercase;
    text-align: left;
    font-weight: bold;
    padding-left: 15px;
    color: #222222;
    font-size: 16px;
}

.barChar {
    min-height: 330px;
}

.header-username {
    font-weight: bold;
    padding-top: 10px;
}

.header-notification {
    color: #858585;
    padding-top: 10px;
    padding-left: 15px;
}
.header-create-new {
    margin-left:10px;
    padding-top: 10px;
    padding-left: 15px;
}
.header-create-new a{
    color: #2154fc;
    text-decoration: underline;
}
    .header-notification-num {
    color: #3b4ab5;
}

.margin-30 {
    margin-top: 30px;
}

.quixnav {
    background-color: #204384 !important;
    color: #fff !important;
}

.nav-header {
    background-color: #204384 !important;
    color: #fff !important;
}

.header-left .search_bar .search_icon {
    padding: 12px 15px !important;
}

.nav-header .logo-abbr {
    max-width: 100% !important;
}
.notification_scroll {
    max-height: 750px!important;
    overflow-y: auto!important;
}
.notification_dropdown .dropdown-menu-right {
    min-width: 380px !important;
}

input[type="checkbox"]:after {
    background: #fff !important;
    border: 1px solid #605f5f !important;
}

input[type="checkbox"]:checked:after {
    color: #fff;
    background: blue !important;
    border: none !important;
}

.hamburger .line {
    background: #000 !important;
    margin-top: 5px;
    margin-bottom: 5px;
}

    .hamburger .line:nth-child(1) {
        width: 26px;
    }

    .hamburger .line:nth-child(3) {
        width: 26px;
    }

[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .nav-header .nav-control .hamburger .line {
    background-color: #000 !important;
}

.quixnav .metismenu a {
    color: #bdbdc7 !important;
}

.quixnav .metismenu ul a:hover, .quixnav .metismenu ul a:focus, .quixnav .metismenu ul a.mm-active {
    text-decoration: none;
    color: #fff !important;
}

.btn-success {
    color: #fff !important;
    background-color: #5cb85c !important;
    border-color: #4cae4c !important;
}

.btn-primary {
    border: none !important;
}

.btn-warning {
    color: #fff !important;
    background-color: #f0ad4e !important;
    border-color: #eea236 !important;
}

.btn-secondary {
    color: #fff !important;
    background-color: #6c757d !important;
}

[data-header-position="fixed"] .content-body {
    padding-top: 4rem !important;
}

.tabs-buttom {
    border-bottom: none !important;
}

    .tabs-buttom li {
        margin-top: 10px;
        padding: 5px 0px 5px 0px;
    }

    .tabs-buttom .active {
        box-shadow: 0 0 4px rgb(0 0 0 / 90%) !important;
        border: 2px solid #b1a3e9;
    }

    .tabs-buttom li a {
        color: #fff !important;
    }

    .tabs-buttom .margin-right-30 {
        margin-right: 5px;
    }

.lead-color-1 {
    background-color: #EB2A27;
}

.lead-color-2 {
    background-color: #18a90b;
}

.lead-color-3 {
    background-color: #e79b00;
}

.lead-color-4 {
    background-color: #9543cd;
}

.lead-color-5 {
    background-color: #2232c7;
}

.lead-color-6 {
    background-color: #3db9ef;
}

.lead-color-7 {
    background-color: #c1c04d;
}

.lead-color-8 {
    background-color: #4b608d;
}

.lead-color-9 {
    background-color: #848891;
}

.lead-color-10 {
    background-color: #2f6fff;
}
.lead-color-11 {
    background-color: #ad810b;
}
.search-advance {
    padding-top: 5px;
    border: 1px solid #b1a3e9;
    border-radius: 4px;
    height: 34px;
    text-align: center;
}

.search-advance-clear {
    text-align: left;
    height: 34px;
}

.search-customer {
    text-align: left;
    padding-top: 8px;
}

.search-advance a {
    color: #204384;
}

.ui-autocomplete {
    position: absolute;
    cursor: default;
    z-index: 3000 !important;
}

#divError {
    background-color: #eb8057 !important;
    color: #fff !important;
}

    #divError p {
        font-family: sans-serif !important;
        color: #fff !important;
    }

#modalCustomerDuplicate .modal-lg {
    max-width: 100% !important;
}

#modelAdvanceSearch .Zebra_DatePicker_Icon_Wrapper {
    display: unset !important;
}

.quixnav .metismenu > li > ul > li:hover {
    background-color: #2665d9 !important;
}

.quixnav {
    width: 14.1875rem !important;
}

.nav-header {
    width: 14.1875rem !important;
}

.menu-toggle .nav-header {
    width: 3.75rem !important;
}

.menu-toggle .quixnav {
    width: 3.75rem !important;
}

.content-body {
    margin-left: 14.1875rem !important;
}

[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .content-body {
    margin-left: 3.75rem !important;
}

.width-50 {
    width: 50px;
}

.export-color {
    color: #204384 !important;
}

input:focus {
    border-color: #e38d8d !important;
}
textarea:focus {
    border-color: #e38d8d !important;
}
.content-body .container-fluid {
    padding-right: 20px;
    padding-left: 20px;
}

.required:after {
    content: "*";
    margin-top: 10px !important;
    color: red;
}

.freeze-grid {
    overflow: scroll;
    clear: both;
    position: relative;
}

#leadTab div {
    color: #fff;
}

#leadTab li {
    cursor: pointer;
}
    #leadTab li:hover {
        background-color: #204384;
    }

#leadTab .lead-number {
    height: 23px;
    color: #fff;
}

#leadTab li {
    text-align: center;
    padding: 1px 10px 0px 15px !important;
    border-radius: 5px;
}

#attactTab li {
    border-radius: 5px;
}

#DataTypeTab a {
    padding: 4px 10px 4px 10px !important;
    color: #fd7e14;
}

.header {
    height: 4rem !important;
}