.fa, .fad, .fal, .fas {
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-family: "Font Awesome 5 Free"
}

.fab {
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-family: "Font Awesome 5 Brands"
}

.far {
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-family: "Font Awesome 5 Regular"
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-weight: 400;
    src: url("https://d3n9fgnchfp64a.cloudfront.net/fonts/webfonts/fa-brands-400.eot") format("embedded-opentype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/webfonts/fa-brands-400.woff2") format("woff2"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/webfonts/fa-brands-400.woff") format("woff"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/webfonts/fa-brands-400.ttf") format("truetype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts//webfonts/fa-brands-400.svg") format("svg")
}

@font-face {
    font-family: "Font Awesome 5 Regular";
    font-style: normal;
    font-weight: 400;
    src: url("https://d3n9fgnchfp64a.cloudfront.net/fonts/webfonts/fa-regular-400.eot") format("embedded-opentype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/webfonts/fa-regular-400.woff2") format("woff2"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/webfonts/fa-regular-400.woff") format("woff"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/webfonts/fa-regular-400.ttf") format("truetype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts//webfonts/fa-regular-400.svg") format("svg")
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    src: url("https://d3n9fgnchfp64a.cloudfront.net/fonts/webfonts/fa-solid-900.eot") format("embedded-opentype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/webfonts/fa-solid-900.woff2") format("woff2"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/webfonts/fa-solid-900.woff") format("woff"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/webfonts/fa-solid-900.ttf") format("truetype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts//webfonts/fa-solid-900.svg") format("svg")
}

@font-face {
    font-family: icomoon;
    src: url("https://d3n9fgnchfp64a.cloudfront.net/icons/icomoon.eot?ofemce#iefix") format("embedded-opentype"),url("https://d3n9fgnchfp64a.cloudfront.net/icons/icomoon.woff2?ofemce") format("woff2"),url("https://d3n9fgnchfp64a.cloudfront.net/icons/icomoon.ttf?ofemce") format("truetype"),url("https://d3n9fgnchfp64a.cloudfront.net/icons/icomoon.woff?ofemce") format("woff"),url("https://d3n9fgnchfp64a.cloudfront.net/icons/icomoon.svg?ofemce#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block
}

body {
    font-family: "Open Sans",sans-serif;
    font-size: 14px;
    color: #242e3e;
    font-weight: 400;
    background: #eff3f6;
    margin: 0
}

*, ::after, ::before {
    box-sizing: border-box
}

:focus {
    outline: 0
}

.cf_navbar a:hover, .cf_navheader a:hover, .cf_maincontainer a:hover {
    outline: 0;
    text-decoration: none
}

.cf_navbar a, .cf_navheader a, .cf_maincontainer a {
    text-decoration: none
}

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: #f0f0f0
}

::-webkit-scrollbar-thumb {
    background-color: #9e9e9e;
    border-radius: 4px
}

::-webkit-input-placeholder {
    color: #afafaf
}

[class^="icon-"] {
    color: #777;
    font-size: 14px;
    cursor: pointer
}

[class^="cf_btn"] {
    border-radius: 4px;
    padding: 8px;
    color: #fff;
    font-size: 14px;
    cursor: pointer
}

[class^="cf_btn btn_close"] {
    background: #fff !important;
    color: #777 !important
}

[class^="cf_btn delete"] {
    background: #f00 !important
}

[class^="cf_btn customize"] {
    background: #1ba91a !important
}

[class^="cf_btn success"] {
    background: #71be35 !important
}

[class^="cf_btn warning"] {
    background: #ff7f12 !important
}

[class^="cf_btn alert"] {
    background: #00d0ff !important
}

[class^="cf_btn error"] {
    background: #f00 !important
}

[class^="icon_toolbox_gap"] .toolboxgap_span {
    margin: 0 2px !important
}

[class^="icon_gap"] .gap_a, [class^=" icon_gap"] .gap_a {
    margin: 0 2px !important
}


.i_gap i {
    padding-right: 4px
}

[class^="icon_text_gap"] .textgap_a, [class^="icon_text_gap"] .tab_label i, [class^="icon_text_gap"] .textgap_span, [class^="icon_button_gap"] .buttongap_a, [class^="icon_button_gap"] .buttongap_div {
    margin: 0 2px !important
}


[class^="cf_formcontrol readcls"], .cf_sectioncontent input:disabled, .cf_sectioncontent textarea:disabled, .cf_sectioncontent input[readonly], .cf_sectioncontent textarea[readonly], .cf_sectioncontent .select2-container.select2-container-disabled .select2-choice, .cf_sectioncontent .select2-container-multi.select2-container-disabled .select2-choices {
    background: #eff3f6 !important
}

.cf_sectioncontent input[type="checkbox"]:disabled ~ span {
    background: #eff3f6
}


.cf_sectionform .select2-search-field input:disabled {
    border: 0 !important
}

.cf_sectioncontent .cf_sectioncontent {
    width: 100%
}

.popup_body [class^="icon-excel"] {
    color: #008000 !important
}

.popup_body [class^="icon-word"] {
    color: #00f !important
}

.popup_body [class^="icon-pdf"] {
    color: #f00 !important
}

.popup_body [class^="icon-zip"] {
    color: #ff7a09 !important
}

.popup_body [class^="icon-image"] {
    color: #242e3e !important
}

.approved {
    color: #1ba40a !important
}

.rejected {
    color: #f00 !important
}

.pending {
    color: #ff7f12 !important
}

.completed {
    color: #1ba40a !important
}

.success i {
    color: #b6ee7e !important
}

.warning i {
    color: #ff7f12 !important
}

.alert i {
    color: #00d0ff !important
}

.error i {
    color: #f00 !important
}

.error_required {
    color: #f00
}

.cf_navbar {
    position: fixed;
    display: block;
    z-index: 1029;
    box-shadow: #455a64 0 2px 5px -2px;
    width: 220px;
    height: 100%;
    top: 0;
    background: #fff;
    color: #242e3e;
    transition: all .3s ease-in-out 0s
}

.cf_navlogo_container {
    display: inline-flex;
    text-align: center;
    width: 220px
}

.cf_navlogo_img img {
    width: 120px;
    height: 45px;
    margin-top: 8px
}

.cf_navcontent {
    width: 100%;
    height: 100%;
    overflow: hidden
}

.cf_navlisubmenu li > a::before {
    content: "";
    font-family: Icomoon;
    font-size: 13px;
    position: absolute;
    left: 40px
}

.cf_navcontent li:last-child {
    padding-bottom: 50px
}

.cf_navlisubmenu > a::after {
    transform: rotate(90deg)
}

.cf_navcontent::-webkit-scrollbar-track {
    box-shadow: none !important;
    background-color: transparent !important
}

.cf_navcontent::-webkit-scrollbar {
    background-color: transparent;
    width: 0 !important
}

.cf_navcontent:hover::-webkit-scrollbar {
    width: 6px !important
}

.cf_navcontent::-webkit-scrollbar-thumb {
    background-color: #acacac
}

.cf_navbarinner li > a {
    padding: 10px 10px 10px 16px;
    display: block;
    position: relative;
    color: #242e3e;
    line-height: 35px
}

.cf_navicon {
    padding: 0 6px !important
}

.cf_navlisubmenu li > a {
    padding: 4px 0 0 60px;
    margin: 0
}

.cf_navlisubmenu li + li > a {
    border-top: 1px solid #ced4da
}

.cf_navbar .cf_navbarinner li.cf_navlidropdown .cf_navlisubmenu li .cf_navlisubmenu > li > a::before {
    left: 55px
}

.cf_navbar.navbar-collapsed {
    width: 70px;
    height: 100%;
    transition: all .3s ease-in-out 0s
}

.cf_navheader .cf_navbar .cf_maincontainer {
    margin-left: 70px;
    width: calc(100vw - 70px)
}

.cf_navbar.navbar-collapsed .cf_navbarinner > li > a > .cf_navicontxt {
    transform: rotateY(-90deg);
    transform-origin: 0 0;
    opacity: 0
}

.cf_navbar.navbar-collapsed:hover .cf_btnbadge {
    display: none
}

.cf_navbar.navbar-collapsed .cf_btnbadge {
    display: block
}

.cf_navbar.navbar-collapsed:hover {
    width: 220px !important
}

    .cf_navbar.navbar-collapsed:hover .cf_navlogo_container {
        width: 220px
    }

    .cf_navbar.navbar-collapsed:hover .cf_navbarinner > li > a > .cf_navicontxt {
        transform: rotateY(0deg);
        opacity: 1
    }

        .cf_navbar.navbar-collapsed:hover .cf_navbarinner > li > a > .cf_navicontxt::after {
            opacity: 1;
            visibility: visible
        }

.cf_navbar.navbar-collapsed .cf_navbarinner > li.cf_navlidropdown > a::after {
    display: block
}

.cf_navbar.navbar-collapsed:hover .cf_navbarinner > li.cf_navlisubmenu::after {
    display: block
}

.cf_navbar.navbar-collapsed .cf_navbarinner > li.cf_navlisubmenu li > a {
    color: transparent;
    white-space: nowrap
}

.cf_navbar.navbar-collapsed .cf_navbarinner > li.cf_navlidropdown .cf_navlisubmenu {
    display: none
}

.cf_navbar.navbar-collapsed .cf_navlisubmenu li > a {
    display: none
}

.cf_navbar.navbar-collapsed:hover .cf_navlisubmenu li > a {
    display: block
}

.cf_mobilemenu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 60px;
    margin-left: 12px;
    padding: 0 10px
}

    .cf_mobilemenu span {
        position: relative;
        display: block;
        width: 100%;
        height: 2px;
        background-color: #fff;
        border-radius: 2px
    }

        .cf_mobilemenu span::after, .cf_mobilemenu span::before {
            content: "";
            position: absolute;
            left: 0;
            height: 2px;
            background-color: #fff;
            border-radius: 2px
        }

        .cf_mobilemenu span::after {
            top: 5px;
            width: 100%
        }

        .cf_mobilemenu span::before {
            top: -5px;
            width: 100%
        }

    .cf_mobilemenu:hover span {
        background-color: #fff
    }

    .cf_mobilemenu.on span::after, .cf_mobilemenu.on span::before {
        height: 2px;
        width: 100%
    }

.cf_navli .btn_badge {
    font-size: 10px;
    position: relative;
    line-height: 20px;
    left: 13px;
    top: 0;
    padding: 0 6px;
    border-radius: 2px;
    display: inline-block
}

.cf_navcontent:hover {
    overflow: auto;
    width: 100%
}

.cf_navicontxt {
    position: absolute;
    width: 160px;
    line-height: 18px;
    margin-top: 6px;
    align-items: center;
}

    .cf_navicontxt.clarify_text {
        margin-left: -5px;
    }

    .cf_navicontxt.supprt_text {
        margin-left: -10px;
        margin-top: 4px;
    }

.cf_navbarinner {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 4px 4px 20px;
    margin: 0
}

    .cf_navbarinner li.cf_navlidropdown > a::after {
        content: "";
        font-family: Icomoon;
        font-size: 16px;
        border: 0;
        position: absolute;
        top: 11px;
        right: 10px;
        transition: all .3s ease-in-out 0s
    }

.cf_navlisubmenu {
    list-style: none;
    padding: 6px 0;
    display: none
}

.cf_navlogo_container .cf_navcontent {
    float: left;
    display: inline-block
}

.cf_navbarinner li.cf_navlisubmenu > a::after {
    content: "";
    font-family: Icomoon;
    font-size: 13px;
    border: 0;
    position: absolute;
    top: 13px;
    right: 10px;
    transition: all .3s ease-in-out 0s
}

.cf_navlink:hover {
    color: #fff;
    box-shadow: rgba(0,0,0,0.25) 0 15px 8px -9px
}

    .cf_navlink:hover i {
        color: #fff
    }

.cf_navheader {
    z-index: 20;
    position: fixed;
    width: 100%;
    height: 60px;
    box-shadow: #e2e5e8 0 1px 0 0;
    text-align: left;
}

.cf_mobileheader, .cf_dropdownmenu {
    display: none
}

.cf_navheader .dropdown .cf_dropdownmenu {
    position: absolute;
    margin-left: -250px;
    background: #fff;
    border-radius: 4px;
    margin-top: 15px;
    min-width: 290px
}

.whatsnew_dropdown .whatsnew_dropdownmenu {
    position: absolute;
    background: #fff;
    border-radius: 4px;
    margin-top: 16px;
    word-break: break-word;
    display: none;
    width: 300px;
    margin-left: -276px;
    overflow: auto;
    box-shadow: rgba(0,0,0,0.15) 0 8px 16px;
    z-index: 1029;
    height: 380px
}

.whats_new_container {
    height: 100%;
    border: 1px solid #ccc;
    overflow: auto;
    border-radius: 4px 4px 0 0
}

.cf_help_container {
    padding: 10px 12px
}

.cf_helptitle {
    color: #242e3e;
    font-size: 16px;
    position: relative;
    margin-bottom: 15px;
    display: block
}

    .cf_helptitle::after {
        content: "";
        background-color: #4680ff;
        position: absolute;
        left: 0;
        bottom: -8px;
        width: 40px;
        height: 2px
    }

.cf_helpcontent {
    color: #242e3e
}

.cf_helplink {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 10px
}

    .cf_helplink a {
        color: #b0b5bd !important
    }

.cf_profile_iconimg {
    width: 25px;
    border-radius: 50%
}

.cf_navheader .dropdown .dropdown-toggle::after {
    content: "ﲦ";
    font-family: Icomoon;
    font-size: 10px;
    border: 0;
    position: absolute;
    top: 8px;
    left: 29px;
    color: #fff
}

.cf_profile_navicon a i {
    color: #fff !important;
    font-size: 20px !important
}

.topbar_user_name {
    display: flex;
    align-items: center
}

.signin_user_name {
    padding: 0 10px;
    color: #fff
}

.cf_profilenav {
    display: inline-flex;
    float: right;
    height: 60px;
    align-items: center;
    padding: 8px 0
}

    .cf_profilenav > div:nth-child(3) {
        display: inline-flex;
        padding: 0 20px 0 2px
    }

.cf_cflow_powerlogo {
    margin-right: 25px
}

    .cf_cflow_powerlogo img {
        height: 45px
    }

.cf_profilehead {
    border-radius: 4px 4px 0 0;
    padding: 15px;
    line-height: 35px
}

    .cf_profilehead span {
        height: 26px;
        width: 78%;
        display: inline-block;
        margin: 2px 0 0 2px;
        align-items: center;
        color: #fff;
        white-space: nowrap;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        max-width: 257px;
        overflow: hidden !important
    }

    .cf_profilehead img {
        width: 40px;
        height: 40px;
        margin-right: 8px;
        border-radius: 50%;
        float: left;
        box-sizing: border-box;
        border: none !important
    }

.cf_profilebody {
    border: 1px solid #ced4da;
    line-height: 35px
}

    .cf_profilebody li:active, .cf_profilebody li:focus, .cf_profilebody li:hover {
        background: rgba(70,128,255,0.1)
    }

    .cf_profilebody li:last-child:hover {
        background: 0
    }

    .cf_profilebody li:nth-child(4) {
        border-top: 1px solid #ced4da;
        margin-top: 15px
    }

.cf_profile_inner {
    list-style: none;
    padding: 0
}

.cf_profile_innerli a {
    padding: 0 10px;
    display: block;
    width: 100%
}

.cf_profile_innerli span {
    color: #242e3e
}

.theme_palette {
    padding: 4px 18px;
    line-height: 25px
}

    .theme_palette a {
        width: 23px;
        height: 23px;
        border-radius: 50%;
        display: inline-flex;
        margin: 0 10px
    }

    .theme_palette > a.blue {
        background: #1565c0
    }

    .theme_palette > a.blue_berry {
        background: #282863
    }

    .theme_palette > a.black {
        background: #151515
    }

    .theme_palette > a.green {
        background: #037037
    }

    .theme_palette > a.orange {
        background: #c94823
    }

    .theme_palette > a.pomegranate {
        background: #8a0a44
    }

    .theme_palette > a.raspberry {
        background: #8a258b
    }

    .theme_palette > a.red {
        background: #ff5252
    }

    .theme_palette > a.teal {
        background: #1f7f93
    }

    .theme_palette > a.violet {
        background: #381292
    }

.cf_maincontainer {
    margin-left: 220px;
    float: left;
    display: block;
    width: calc(100vw - 220px);
    position: relative;
    box-sizing: border-box;
    overflow-y: auto;
    background: #eff3f6;
    margin-top: 60px;
    padding: 5px 20px 20px;
    height: calc(100vh - 60px) !important
}

.cf_navbar.navbar-collapsed ~ .cf_maincontainer {
    margin-left: 70px;
    width: calc(100vw - 70px)
}

.cf_maincontainer::before {
    content: "";
    transition: all .3s ease-in-out 0s
}

.cf_navbar.mob-open ~ .cf_maincontainer::before, .cf_navbar.navbar-collapsed:hover ~ .cf_maincontainer::before {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.2);
    z-index: 100
}

.cf_pagetitle {
    display: flex;
    justify-content: space-between;
    margin: 20px 0 15px;
    font-size: 16px;
    color: #111 !important
}

.cf_pagetitleleft {
    display: flex;
    align-items: flex-end
}

.cf_pagetitleright {
    display: flex
}

.cf_pageback {
    padding: 0 8px 0 0;
    margin-bottom: 5px
}

.btn_back_round {
    background: #b1abab;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

    .btn_back_round i {
        color: #fff !important;
        font-size: 12px !important;
    }

.cf_workflownamecontainer, .cf_stagenamecontainer {
    display: flex;
    flex-direction: column
}

.cf_topheaderslash {
    font-size: 15px;
    color: #6c757d;
    margin: 0 4px
}

.wrkflow_nameheader, .stage_nameheader {
    color: #777;
    font-size: 12px
}

.wrkflow_name, .stage_name {
    font-size: 17px
}

.cf_pagesection {
    padding: 10px;
    border-radius: 2px;
    /*box-shadow: #455a64 0 2px 5px -4px;*/
    border: 0;
    margin-bottom: 10px;
    transition: all .5s ease-in-out 0s;
    background-color: #fff
}

.cf_sectiontitle {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    line-height: 30px;
    margin: 5px 8px;
    color: #111 !important
}

.cf_title_status {
    font-size: 14px;
    font-weight: 400
}

    .cf_title_status a {
        color: #ccc
    }

    .cf_title_status .cf_active {
        padding: 0 7px !important
    }

.cf_formheader {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #242e3e
}

.cf_formcontrol {
    display: block;
    width: 100%;
    height: 34px;
    font-weight: 400;
    line-height: 1.5;
    box-sizing: border-box;
    border: 1px solid #ced4da !important;
    border-radius: 4px;
    transition: border-color .15s ease-in-out 0s,box-shadow .15s ease-in-out 0s;
    padding: 0 10px;
    font-size: 13px;
    margin-bottom: 0 !important
}

    .cf_formcontrol.readcls.checkmark {
        width: 10px;
        border-radius: 0;
        height: 20px;
        padding: 0 9px
    }

    .cf_formcontrol:focus {
        color: #495057;
        background-color: #fff;
        border-color: #006cf7;
        outline: 0;
        box-shadow: #006cf7 0 0 0 0
    }

.cf_sectionform {
    width: 50%;
    box-sizing: border-box;
    padding: 10px;
    position: relative
}

.cf_sectioncontent {
    /*overflow: hidden;*/
    /*padding-top: 8px;*/
    display: flex;
    flex-wrap: wrap
}

.cf_sectionform_onerow {
    width: 100%;
    padding: 10px
}

.workflow_recorddiv span, .export_importdiv span {
    float: left;
    width: 37px;
    height: 37px;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 4px;
    background: #dee4e8 !important
}

.record_icon i {
    font-size: 20px !important
}

.workflow_recorddiv, .export_importdiv {
    box-sizing: border-box;
    cursor: pointer;
    margin-right: 5px;
    position: relative
}

.cf_formcontrol.txt_decimalval {
    text-align: right
}

textarea {
    font-family: "Open Sans",sans-serif !important
}

.cf_formcontrol.cf_largetextarea {
    height: 120px !important;
    overflow: auto;
    padding: 10px;
    border-radius: 4px;
    font-family: 'Open Sans',sans-serif;
    resize: none;
}

.radio-check-group .radbt-list {
    position: relative;
    display: block;
    float: left
}

.radio-check-group input[type="radio"] {
    position: absolute;
    opacity: 0
}

    .radio-check-group input[type="checkbox"]:disabled + .lab-chbx, .radio-check-group input[type="radio"]:disabled + .lab-radio {
        background-color: #eff3f6;
        pointer-events: none;
    }

.lab-chbx, .lab-radio {
    float: left;
    display: block;
    margin: 0 5px 0 0;
    border-radius: 4px;
    white-space: nowrap;
    word-break: break-word;
    height: auto !important
}

.radio-check-group input[type="radio"] + .lab-radio > span {
    font-size: 12px;
    padding: 4px 14px;
    border-radius: 4px;
    width: 100%;
    cursor: pointer;
    line-height: 15px;
    height: 25px !important
}

.radio-check-group label::after {
    content: "";
    background: transparent
}

.radio-check-group input[type="radio"]:checked + .lab-radio > span, .radio-check-fullwidth-group input[type="radio"]:checked + .lab-radio > span {
    color: #fff;
    cursor: pointer
}

    .radio-check-group input[type="radio"]:checked + .lab-radio > span::after {
        content: "劉";
        font-family: Icomoon;
        position: absolute;
        top: 0;
        left: -2px;
        pointer-events: none;
        padding: 4px;
        box-sizing: border-box;
        font-size: 12px;
        cursor: pointer
    }

.radio-check-group input[type="radio"]:checked + .appr span {
    color: #fff;
    background: #1ba40a !important
}

.radio-check-group input[type="radio"]:checked + .rej span {
    color: #fff;
    background: #f00 !important;
    border: 1px solid #e62f2d !important
}

.radio-check-group input[type="radio"]:checked + .pend span {
    color: #fff;
    background: #ff7f12 !important
}

.cf_sectionform_onerow .radio-check-group, .cf_sectionform .radio-check-group {
    width: 100%;
    margin: 0 !important
}

    .cf_sectionform_onerow .radio-check-group .chbx-list, .cf_sectionform .radio-check-group .chbx-list {
        margin-bottom: 0
    }

.cf_sectionform .eye {
    position: absolute;
    top: 43px;
    right: 15px;
    font-size: 18px;
    color: #242e3e
}

.cf_sectionform_onerow {
    position: relative
}

.cf_onetomanytable .onetomany_tablefield {
    /*position: relative*/
}

    .cf_onetomanytable .onetomany_tablefield .eye {
        position: absolute;
        top: -26px;
        right: 12px;
        color: #000
    }

.cf_sectionform_onerow .eye {
    color: #242e3e;
    position: absolute;
    top: 42px;
    right: 15px;
    font-size: 18px
}

.radio-check-group {
    display: flex;
    box-sizing: border-box
}

.chbx-list {
    height: 25px;
    float: left;
    position: relative;
    display: block
}

.radio-check-group input[type="checkbox"] {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 92%;
    bottom: 3px;
    border-bottom: 1px solid #fff;
    appearance: none;
    outline: 0;
    opacity: 0
}

    .radio-check-group input[type="checkbox"]:checked + .lab-chbx span, .radio-check-fullwidth-group input[type="checkbox"]:checked + .lab-chbx span {
        border: 1px solid #3575d3;
        color: #fff
    }

    .radio-check-group input[type="checkbox"] + .lab-chbx span {
        font-size: 12px;
        padding: 4px 14px;
        width: 100%;
        line-height: 15px;
        cursor: pointer;
        height: 25px !important;
    }

    .radio-check-group input[type="checkbox"]:checked + .lab-chbx span::after {
        content: "劉";
        font-family: Icomoon;
        position: absolute;
        top: 0;
        left: -2px;
        pointer-events: none;
        padding: 4px;
        box-sizing: border-box;
        font-size: 12px
    }

.cf_customcheckbox {
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    font-size: 14px
}

    .cf_customcheckbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 15px;
        width: 15px
    }

.checkmark {
    position: absolute;
    top: 0;
    padding: 0 9px;
    width: 10px;
    border-radius: inherit;
    display: block;
    border: 1px solid #ced4da;
    height: 20px !important
}

.cf_sectionform_onerow .cf_formcontrol.checkmark {
    margin-top: 5px
}

.checkmark::after {
    content: "";
    position: absolute;
    display: none
}

.cf_customcheckbox input:checked ~ .checkmark::after {
    display: block
}

.cf_customcheckbox input:disabled ~ .checkmark::after {
    left: 6px;
    top: 0;
    width: 6px;
    height: 13px;
    border-style: solid;
    border-color: #afafaf;
    border-image: initial;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg)
}

.cf_customcheckbox .checkmark::after {
    left: 6px;
    top: 0;
    width: 6px;
    height: 13px;
    border-style: solid;
    border-color: #fff;
    border-image: initial;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg)
}

.cf_sectionform_onerow .cf_customcheckbox {
    line-height: 0
}

.radio {
    position: relative;
    float: left;
    display: block
}

.tab_controls .tab_label {
    background-color: rgba(215,215,215,0.26);
    padding: 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center
}

.tab_controls label i {
    padding: 0 2px !important
}

.tab_controls > input:checked + label {
    cursor: pointer;
    border-radius: 4px;
    background-color: #ddd !important
}

.tab_controls > input {
    position: absolute;
    visibility: hidden
}

.tab_controls > label {
    cursor: pointer
}

.tab_controls > #tab_id1:checked ~ .tab_content1, #tab_id2:checked ~ .tab_content2, #tab_id3:checked ~ .tab_content3, #tab_id4:checked ~ .tab_content4, #tab_id5:checked ~ .tab_content5 {
    position: relative;
    visibility: visible;
    width: 100%;
    max-height: 305px
}

#tab_id1:checked ~ .tab_content2, #tab_id1:checked ~ .tab_content3, #tab_id1:checked ~ .tab_content4, #tab_id1:checked ~ .tab_content5 {
    display: none
}

#tab_id2:checked ~ .tab_content3, #tab_id2:checked ~ .tab_content4, #tab_id2:checked ~ .tab_content5, #tab_id2:checked ~ .tab_content1 {
    display: none
}

#tab_id3:checked ~ .tab_content4, #tab_id3:checked ~ .tab_content5, #tab_id3:checked ~ .tab_content1, #tab_id3:checked ~ .tab_content2 {
    display: none
}

#tab_id4:checked ~ .tab_content5, #tab_id4:checked ~ .tab_content1, #tab_id4:checked ~ .tab_content2, #tab_id4:checked ~ .tab_content3 {
    display: none
}

#tab_id5:checked ~ .tab_content1, #tab_id5:checked ~ .tab_content2, #tab_id5:checked ~ .tab_content3, #tab_id5:checked ~ .tab_content4 {
    display: none
}

.fileupload_container {
    height: 118px;
    overflow: auto;
    margin-top: 20px
}

.file_upload_tab_controls .tab_label {
    background-color: rgba(215,215,215,0.26);
    padding: 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center
}

.file_upload_tab_controls label i {
    padding: 0 2px !important
}

.file_upload_tab_controls > input:checked + label {
    cursor: pointer;
    border-radius: 4px;
    background-color: #ddd !important
}

.file_upload_tab_controls > input {
    position: absolute;
    visibility: hidden
}

.file_upload_tab_controls > label {
    cursor: pointer
}

.file_upload_tab_controls > #filetabid_1:checked ~ .filetab_content_1, #filetabid_2:checked ~ .filetab_content_2, #filetabid_3:checked ~ .filetab_content_3 {
    position: relative;
    visibility: visible;
    width: 100%
}

#filetabid_1:checked ~ .filetab_content_2, #filetabid_1:checked ~ .filetab_content_3 {
    display: none
}

#filetabid_2:checked ~ .filetab_content_3, #filetabid_2:checked ~ .filetab_content_1 {
    display: none
}

#filetabid_3:checked ~ .filetab_content_2, #filetabid_3:checked ~ .filetab_content_1 {
    display: none
}

.switch {
    position: relative;
    display: inline-flex;
    width: 25px;
    height: 15px;
    float: right;
    margin-top: 8px
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0
    }

        .switch input:checked + .slider {
            background-color: #3575d3 !important
        }

.slider.round {
    border-radius: 50px
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 1px;
    left: 0;
    right: 0;
    bottom: 0;
    transition: all .4s ease 0s;
    background-color: #ccc !important
}

.switch input:checked + .slider::before {
    transform: translateX(26px);
    left: -13px
}

.slider.round::before {
    border-radius: 50%
}

.slider::before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    left: 2px;
    bottom: 2px;
    background-color: #fff;
    transition: all .4s ease 0s
}

.cf_printcheck {
    display: flex
}

.print_btn {
    font-size: 13px !important;
    color: #b5b0b0 !important
}

.cf_submitdraftbtn {
    position: fixed;
    bottom: 100px;
    right: 20px;
    z-index: 99
}

    .cf_submitdraftbtn .btnSave {
        background: #1ba40a;
        width: 40px;
        height: 40px;
        display: block;
        margin: 10px 0;
        box-shadow: rgba(0,0,0,0.15) 0 8px 16px;
        text-decoration: none;
        border-radius: 50% !important
    }

        .cf_submitdraftbtn .btnSave i {
            font-size: 25px !important;
            color: #fff !important
        }

    .cf_submitdraftbtn .btnDraft {
        background: #ff7f12;
        width: 40px;
        height: 40px;
        display: block;
        margin: 10px 0;
        box-shadow: rgba(0,0,0,0.15) 0 8px 16px;
        text-decoration: none;
        border-radius: 50% !important
    }

        .cf_submitdraftbtn .btnDraft i {
            line-height: 25px;
            padding: 0 2px;
            font-size: 20px !important;
            color: #fff !important
        }

    .cf_submitdraftbtn .btn_addnew {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: block;
        margin: 10px 0;
        box-shadow: rgba(0,0,0,0.15) 0 8px 16px;
        text-decoration: none
    }

        .cf_submitdraftbtn .btn_addnew i {
            font-size: 23px !important;
            color: #fff !important
        }

    .cf_submitdraftbtn .btnClarfictn {
        background: #1565c0;
        width: 40px;
        height: 40px;
        display: block;
        margin: 10px 0;
        box-shadow: rgb(0 0 0 / 15%) 0 8px 16px;
        text-decoration: none;
        border-radius: 50% !important;
    }

        .cf_submitdraftbtn .btnClarfictn i {
            font-size: 20px !important;
            color: #fff !important;
            line-height: 25px;
            padding: 0px 2px;
        }

.comment_attachmnt {
    position: fixed;
    top: 40%;
    right: 0;
    padding: 10px;
    background: #fff;
    box-shadow: rgba(0,0,0,0.15) 0 8px 16px;
    width: 45px;
    line-height: 25px;
    border-radius: 4px;
    z-index: 1
}

.attachmnt, .comment, .clarification {
    text-align: center;
    z-index: 1;
    padding: 3px 0;
}

    .attachmnt a i {
        font-size: 18px !important
    }

    .comment a i {
        font-size: 18px !important
    }

    .clarification a i {
        font-size: 18px !important;
    }

    .attachmnt .cf_msg_count, .comment .cf_msg_count, .clarification .cf_msg_count {
        position: absolute;
        margin-top: -6px;
        left: 1px;
        font-size: 10px;
        background-color: #da0000;
        color: #fff;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        line-height: 15px;
        box-sizing: border-box;
        text-align: center;
        display: none;
        padding-top: 1px;
    }

.toTop {
    padding: 6px;
    width: 40px;
    border-radius: 50%;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    height: 40px;
    cursor: pointer;
    z-index: 22;
    background: #000 !important
}

    .toTop i {
        color: #fff !important;
        font-size: 26px !important
    }

.cf_new_popup {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1029;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.popup_container {
    background-color: #fff;
    box-shadow: rgba(0,0,0,0.15) 0 8px 16px;
    border: 2px solid #e6e9ef;
    border-radius: 8px;
    max-width: 800px;
    margin: 8% auto
}

.popup_header {
    padding: 16px;
    line-height: 10px;
    font-size: 20px !important
}

    .popup_header .helplink {
        float: right;
        font-size: 14px;
        color: #242e3e
    }

.popup_body {
    padding: 6px 16px
}

.popup_footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 16px 14px
}

.multipleapproval_popup .cf_sectionform_onerow {
    position: static !important
}

.cf_new_popup1 {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0
}

.popup1_container {
    background-color: #fff;
    box-shadow: rgba(0,0,0,0.15) 0 8px 16px;
    border: 2px solid #e6e9ef;
    border-radius: 8px;
    max-width: 450px;
    margin: 10% auto
}

.message_header {
    text-align: center;
    border-bottom: 1px solid #ced4da
}

    .message_header span {
        display: block;
        margin: 10px 0;
        font-size: 28px !important
    }

    .message_header i {
        display: block;
        margin: 10px;
        font-size: 40px !important
    }

.message_content {
    padding: 16px;
    text-align: center;
    min-height: 180px;
    box-sizing: border-box;
    word-break: break-word;
    height: 200px;
    overflow-y: scroll;
}

    .message_content span {
        font-size: 16px;
        line-height: 1.5
    }

.message_footer {
    margin: 20px 0 30px;
    width: 100%;
    text-align: center
}

[class*="hint--"] {
    position: relative;
    display: inline-block
}

    [class*="hint--"]::before, [class*="hint--"]::after {
        position: absolute;
        transform: translate3d(0px,0px,0px);
        visibility: hidden;
        opacity: 0;
        z-index: 1000000;
        pointer-events: none;
        transition: all .3s ease 0ms;
        border-radius: 4px
    }

    [class*="hint--"]:hover::before, [class*="hint--"]:hover::after {
        visibility: visible;
        opacity: 1
    }

    [class*="hint--"]:hover::before, [class*="hint--"]:hover::after {
        transition-delay: 100ms
    }

    [class*="hint--"]::before {
        content: "";
        position: absolute;
        background: transparent;
        border: 6px solid transparent;
        z-index: 1000001
    }

    [class*="hint--"]::after {
        color: #fff;
        padding: 2px 4px;
        font-size: 12px;
        line-height: 15px;
        word-break: normal;
        background: #111 !important
    }

    [class*="hint--"][aria-label]::after {
        content: attr(aria-label)
    }

    [class*="hint--"][data-hint]::after {
        content: attr(data-hint)
    }

[aria-label=""]::before, [aria-label=""]::after, [data-hint=""]::before, [data-hint=""]::after {
    display: none !important
}

.hint--top-left::before {
    border-top-color: #383838
}

.hint--top-right::before {
    border-top-color: #383838
}

.hint--top::before {
    border-top-color: #383838
}

.hint--bottom-left::before {
    border-bottom-color: #383838
}

.hint--bottom-right::before {
    border-bottom-color: #383838
}

.hint--bottom::before {
    border-bottom-color: #383838
}

.hint--left::before {
    border-left-color: #383838
}

.hint--right::before {
    border-right-color: #383838
}

.hint--top::before {
    margin-bottom: -11px
}

.hint--top::before, .hint--top::after {
    bottom: 100%;
    left: 50%
}

.hint--top::before {
    left: calc(50% - 6px)
}

.hint--top::after {
    transform: translateX(-50%)
}

.hint--top:hover::before {
    transform: translateY(-8px)
}

.hint--top:hover::after {
    transform: translateX(-50%) translateY(-8px)
}

.hint--bottom::before {
    margin-top: -11px
}

.hint--bottom::before, .hint--bottom::after {
    top: 100%;
    left: 50%
}

.hint--bottom::before {
    left: calc(50% - 6px)
}

.hint--bottom::after {
    transform: translateX(-50%)
}

.hint--bottom:hover::before {
    transform: translateY(8px)
}

.hint--bottom:hover::after {
    transform: translateX(-50%) translateY(8px)
}

.hint--right::before {
    margin-left: -11px;
    margin-bottom: -6px
}

.hint--right::after {
    margin-bottom: -10px
}

.hint--right::before, .hint--right::after {
    left: 100%;
    bottom: 50%
}

.hint--right:hover::before {
    transform: translateX(8px)
}

.hint--right:hover::after {
    transform: translateX(8px)
}

.hint--left::before {
    margin-right: -11px;
    margin-bottom: -6px
}

.hint--left::after {
    margin-bottom: -14px
}

.hint--left::before, .hint--left::after {
    right: 100%;
    bottom: 50%
}

.hint--left:hover::before {
    transform: translateX(-8px)
}

.hint--left:hover::after {
    transform: translateX(-8px)
}

.hint--top-left::before {
    margin-bottom: -11px
}

.hint--top-left::before, .hint--top-left::after {
    bottom: 100%;
    left: 50%
}

.hint--top-left::before {
    left: calc(50% - 6px)
}

.hint--top-left::after {
    transform: translateX(-100%)
}

.hint--top-left::after {
    margin-left: 12px
}

.hint--top-left:hover::before {
    transform: translateY(-8px)
}

.hint--top-left:hover::after {
    transform: translateX(-100%) translateY(-8px)
}

.hint--top-right::before {
    margin-bottom: -11px
}

.hint--top-right::before, .hint--top-right::after {
    bottom: 100%;
    left: 50%
}

.hint--top-right::before {
    left: calc(50% - 6px)
}

.hint--top-right::after {
    transform: translateX(0px)
}

.hint--top-right::after {
    margin-left: -12px
}

.hint--top-right:hover::before {
    transform: translateY(-8px)
}

.hint--top-right:hover::after {
    transform: translateY(-8px)
}

.hint--bottom-left::before {
    margin-top: -11px
}

.hint--bottom-left::before, .hint--bottom-left::after {
    top: 100%;
    left: 50%
}

.hint--bottom-left::before {
    left: calc(50% - 6px)
}

.hint--bottom-left::after {
    transform: translateX(-100%)
}

.hint--bottom-left::after {
    margin-left: 12px
}

.hint--bottom-left:hover::before {
    transform: translateY(8px)
}

.hint--bottom-left:hover::after {
    transform: translateX(-100%) translateY(8px)
}

.hint--bottom-right::before {
    margin-top: -11px
}

.hint--bottom-right::before, .hint--bottom-right::after {
    top: 100%;
    left: 50%
}

.hint--bottom-right::before {
    left: calc(50% - 6px)
}

.hint--bottom-right::after {
    transform: translateX(0px)
}

.hint--bottom-right::after {
    margin-left: -12px
}

.hint--bottom-right:hover::before {
    transform: translateY(8px)
}

.hint--bottom-right:hover::after {
    transform: translateY(8px)
}

.hint--small::after, .hint--medium::after, .hint--large::after {
    white-space: normal;
    line-height: 1.4em;
    overflow-wrap: break-word
}

.hint--small::after {
    width: 80px
}

.hint--medium::after {
    width: 150px
}

.hint--large::after {
    width: 300px
}

.hint--error::after {
    background-color: #b34e4d;
    text-shadow: #592726 0 -1px 0
}

.hint--error.hint--top-left::before {
    border-top-color: #b34e4d
}

.hint--error.hint--top-right::before {
    border-top-color: #b34e4d
}

.hint--error.hint--top::before {
    border-top-color: #b34e4d
}

.hint--error.hint--bottom-left::before {
    border-bottom-color: #b34e4d
}

.hint--error.hint--bottom-right::before {
    border-bottom-color: #b34e4d
}

.hint--error.hint--bottom::before {
    border-bottom-color: #b34e4d
}

.hint--error.hint--left::before {
    border-left-color: #b34e4d
}

.hint--error.hint--right::before {
    border-right-color: #b34e4d
}

.hint--warning::after {
    background-color: #c09854;
    text-shadow: #6c5328 0 -1px 0
}

.hint--warning.hint--top-left::before {
    border-top-color: #c09854
}

.hint--warning.hint--top-right::before {
    border-top-color: #c09854
}

.hint--warning.hint--top::before {
    border-top-color: #c09854
}

.hint--warning.hint--bottom-left::before {
    border-bottom-color: #c09854
}

.hint--warning.hint--bottom-right::before {
    border-bottom-color: #c09854
}

.hint--warning.hint--bottom::before {
    border-bottom-color: #c09854
}

.hint--warning.hint--left::before {
    border-left-color: #c09854
}

.hint--warning.hint--right::before {
    border-right-color: #c09854
}

.hint--info::after {
    background-color: #666;
    color: #fff !important
}

.hint--info.hint--top-left::before {
    border-top-color: #666
}

.hint--info.hint--top-right::before {
    border-top-color: #666
}

.hint--info.hint--top::before {
    border-top-color: #666
}

.hint--info.hint--bottom-left::before {
    border-bottom-color: #666
}

.hint--info.hint--bottom-right::before {
    border-bottom-color: #666
}

.hint--info.hint--bottom::before {
    border-bottom-color: #666
}

.hint--info.hint--left::before {
    border-left-color: #111
}

.hint--info.hint--right::before {
    border-right-color: #666
}

.hint--success::after {
    background-color: #458746;
    text-shadow: #1a321a 0 -1px 0
}

.hint--success.hint--top-left::before {
    border-top-color: #458746
}

.hint--success.hint--top-right::before {
    border-top-color: #458746
}

.hint--success.hint--top::before {
    border-top-color: #458746
}

.hint--success.hint--bottom-left::before {
    border-bottom-color: #458746
}

.hint--success.hint--bottom-right::before {
    border-bottom-color: #458746
}

.hint--success.hint--bottom::before {
    border-bottom-color: #458746
}

.hint--success.hint--left::before {
    border-left-color: #458746
}

.hint--success.hint--right::before {
    border-right-color: #458746
}

.hint--always::after, .hint--always::before {
    opacity: 1;
    visibility: visible
}

.hint--always.hint--top::before {
    transform: translateY(-8px)
}

.hint--always.hint--top::after {
    transform: translateX(-50%) translateY(-8px)
}

.hint--always.hint--top-left::before {
    transform: translateY(-8px)
}

.hint--always.hint--top-left::after {
    transform: translateX(-100%) translateY(-8px)
}

.hint--always.hint--top-right::before {
    transform: translateY(-8px)
}

.hint--always.hint--top-right::after {
    transform: translateY(-8px)
}

.hint--always.hint--bottom::before {
    transform: translateY(8px)
}

.hint--always.hint--bottom::after {
    transform: translateX(-50%) translateY(8px)
}

.hint--always.hint--bottom-left::before {
    transform: translateY(8px)
}

.hint--always.hint--bottom-left::after {
    transform: translateX(-100%) translateY(8px)
}

.hint--always.hint--bottom-right::before {
    transform: translateY(8px)
}

.hint--always.hint--bottom-right::after {
    transform: translateY(8px)
}

.hint--always.hint--left::before {
    transform: translateX(-8px)
}

.hint--always.hint--left::after {
    transform: translateX(-8px)
}

.hint--always.hint--right::before {
    transform: translateX(8px)
}

.hint--always.hint--right::after {
    transform: translateX(8px)
}

.hint--rounded::after {
    border-radius: 4px
}

.hint--no-animate::before, .hint--no-animate::after {
    transition-duration: 0ms
}

.hint--bounce::before, .hint--bounce::after {
    transition: opacity .3s ease 0s,visibility .3s ease 0s,transform .3s cubic-bezier(0.71,1.7,0.77,1.24) 0s
}

.cf_sectioncontent #ui-datepicker-div {
    z-index: 0
}

.cf_sectioncontent .ui-widget {
    font-size: 1.1em
}

    .cf_sectioncontent .ui-widget.ui-widget-content {
        border: 1px solid #d8dcdf
    }

.cf_sectioncontent .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #fcd3a1;
    background: url("images/ui-bg_glass_55_fbf8ee_1x400.png") 50% 50% repeat-x #fbf8ee;
    color: #444
}

.cf_sectioncontent .ui-datepicker table {
    background: #fff;
    width: 100%;
    font-size: .9em;
    border-collapse: collapse;
    margin: 0 0 .4em
}

.cf_sectioncontent .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: 1px solid #3575d3;
    background: url("images/ui-bg_highlight-hard_100_eeeeee_1x100.png") 50% 50% repeat-x #eee
}

.cf_sectioncontent .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: 45%
}

.cf_sectioncontent .ui-datepicker th {
    padding: .7em .3em;
    text-align: center;
    font-weight: bold;
    border: 0
}

.cf_sectioncontent .ui-widget-header {
    border: 1px solid #3575d3;
    background: #3575d3;
    color: #fff
}

.cf_sectioncontent #ui-datepicker-div {
    position: absolute;
    left: 260px;
    top: 331.2px;
    z-index: 1;
    display: block
}

@media screen and (max-width:767px) {
    .cf_profilenav div a i {
        color: #000 !important
    }

    .fileupload_container {
        height: 120px
    }

    [class^="icon_toolbox_gap"] .toolboxgap_span {
        margin: 2px 3px !important
    }

    .cf_profilenav > div {
        align-items: center;
        padding: 4px 10px 0 0
    }

        .cf_profilenav > div:nth-child(2) {
            display: inline-flex;
            padding: 2px 20px 0 5px
        }

    .cf_headercollapse {
        display: flex;
        height: 60px;
        box-shadow: rgba(69,90,100,0.08) 0 1px 20px 0;
        position: fixed;
        width: 100%;
        background: #fff !important
    }

    .cf_navheader .dropdown .dropdown-toggle::after {
        content: "ﲦ";
        font-family: Icomoon;
        font-size: 10px;
        border: 0;
        position: absolute;
        top: 10px;
        left: 32px;
        color: #777
    }

    .cf_mobilelogo_img img {
        margin-left: 20px;
        width: 50%
    }

    .cf_navbar {
        margin-left: -250px;
        position: absolute;
        height: 100%;
        box-shadow: none
    }

    .cf_profilenav {
        margin-left: auto
    }

    .cf_navheader .dropdown .cf_dropdownmenu {
        margin-top: 16px;
        margin-left: -210px
    }

    .cf_navheader ~ .cf_maincontainer {
        padding-top: 130px
    }

    .whatsnew_dropdown .whatsnew_dropdownmenu {
        margin-left: -270px;
        margin-top: 22px
    }

    .cf_profile_iconimg {
        margin-top: 2px
    }

    .cf_mobtoggle {
        position: absolute;
        right: 20px;
        top: 0;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none
    }

    .cf_navlogo_container {
        display: none
    }

    .cf_navbar ~ .cf_maincontainer {
        margin-left: 0
    }

    .cf_navbar.navbar-collapsed ~ .cf_maincontainer {
        margin-left: 0
    }

    .cf_navheader {
        background: #3575d3;
        color: #fff;
        z-index: 2
    }

    .cf_navbar.mob-open {
        margin-left: 0;
        position: fixed
    }

    .cf_navcontent {
        width: 100%;
        height: 100%;
        overflow: auto
    }

    .cf_navheader .cf_mobileheader {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        height: 60px
    }

    #cf_mobilecollapse1 {
        right: 2px;
        position: absolute
    }

    .cf_navbar .cf_mobilemenu {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 37px;
        height: 60px
    }

    .cf_cflow_powerlogo {
        display: none
    }

    .cf_pagetitle {
        display: block
    }

    .cf_sectionform_onerow.mobile_content .radio-check-group {
        display: flex;
        flex-direction: column
    }

    .cf_pagetitleleft {
        padding-bottom: 12px
    }

    .icon_button_gap.cf_pagetitleright {
        display: flex
    }

    .popup_container {
        max-width: 300px;
        margin: 20% auto
    }

    .trigger_row {
        display: block
    }

    .trigger_number {
        display: block
    }

    .trigger_info {
        display: block;
        width: 100%
    }

    .trigger_review_cls {
        display: block
    }

    .radio-check-group .radbt-list {
        margin-top: 8px
    }

    .cf_pagetitleright {
        display: block;
        padding-bottom: 12px
    }

    .cf_sectionform {
        float: none;
        width: 100%
    }

    .popup1_container {
        background-color: #fff;
        box-shadow: rgba(0,0,0,0.15) 0 8px 16px;
        border: 2px solid #e6e9ef;
        border-radius: 8px;
        max-width: 450px;
        margin: 30% auto
    }

    .cf_btn.customize span {
        margin-top: 10px
    }

    .cf_navbar.mob-open ~ .cf_maincontainer::before, .cf_navbar.navbar-collapsed:hover ~ .cf_maincontainer::before {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.2);
        z-index: 1
    }

    [class^="icon_button_gap"] .buttongap_a, [class^="icon_button_gap"] .buttongap_div {
        margin: 0 1px !important
    }
}

@media screen and (max-width:1029px) and (min-width:768px) {
    #cf_mobilecollapse1 {
        margin-right: 10px
    }

    .cf_navbar .cf_mobilemenu {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 37px;
        height: 60px;
        top: 0;
        transition: all .3s ease-in-out 0s
    }

    .cf_pagetitle {
        display: block
    }

    .cf_pagetitleleft {
        padding-bottom: 12px
    }

    .popup1_container {
        background-color: #fff;
        box-shadow: rgba(0,0,0,0.15) 0 8px 16px;
        border: 2px solid #e6e9ef;
        border-radius: 8px;
        max-width: 450px;
        margin: 10% auto
    }

    .popup_container {
        background-color: #fff;
        box-shadow: rgba(0,0,0,0.15) 0 8px 16px;
        border: 2px solid #e6e9ef;
        border-radius: 8px;
        max-width: 700px;
        margin: 10% auto
    }
}

@media screen and (max-width:1366px) and (min-width:1030px) {
    #cf_mobilecollapse1 {
        margin-right: 10px
    }

    .cf_navcontent {
        overflow: auto;
        width: 100%
    }

        .cf_navcontent:hover {
            overflow: auto;
            width: 100%
        }

    .cf_navbar .cf_mobilemenu {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 37px;
        height: 60px;
        top: 0;
        transition: all .3s ease-in-out 0s
    }

    .cf_pagetitle {
        display: flex
    }

    .popup1_container {
        background-color: #fff;
        box-shadow: rgba(0,0,0,0.15) 0 8px 16px;
        border: 2px solid #e6e9ef;
        border-radius: 8px;
        max-width: 450px;
        margin: 7% auto
    }

    .popup_container {
        background-color: #fff;
        box-shadow: rgba(0,0,0,0.15) 0 8px 16px;
        border: 2px solid #e6e9ef;
        border-radius: 8px;
        max-width: 800px;
        margin: 7% auto
    }
}

.trigger_row {
    border-bottom: 1px solid #ced4da;
    display: flex;
    justify-content: space-between;
    line-height: 35px
}

.trigger_info {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 70%
}

.trigger_review_cls a {
    color: #242e3e
}

.triggers_container {
    height: 212px;
    overflow: auto;
    padding: 0 10px
}

.disabled_roundbtn {
    background: #eff3f6 !important
}

.popup_body .fo_table {
    border-collapse: collapse;
    width: 100%;
    font-size: 16px;
    text-align: center;
    border: 1px solid #f9f9f9
}

.warning_subtitle {
    font-size: 14px;
    padding-bottom: 15px
}

popup_tbl_container {
    width: 98%;
    margin: 0 auto;
    padding: 0 10px 25px;
    max-height: 300px;
    overflow: auto;
}

.disabled_bg {
    background: #eff3f6 !important
}

.form_file_upload {
    width: 100%;
    overflow: auto;
    height: 125px;
    padding: 0 15px
}

.form_file_upload_status {
    border-bottom: 1px solid #ececec;
    min-height: 25px;
    width: 100%;
    vertical-align: top;
    box-sizing: border-box;
    float: left;
    display: flex
}

.form_file_upload_filename {
    display: block;
    vertical-align: top;
    width: 50%;
    font-size: 14px;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #242e3e
}

.form_file_upload_file_size {
    display: block;
    vertical-align: top;
    width: 100px;
    margin-left: 10px;
    margin-right: 5px;
    font-size: .9em;
    float: left;
    color: #242e3e
}

@font-face {
    font-family: MyriadPro;
    src: url("https://d3n9fgnchfp64a.cloudfront.net/fonts/myriadpro-light.eot") format("embedded-opentype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/myriadpro-light.woff2") format("woff2"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/myriadpro-light.woff") format("woff"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/myriadpro-light.ttf") format("truetype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/myriadpro-light.svg#MyriadProLight") format("svg");
    font-style: normal;
    font-weight: 100
}

@font-face {
    font-family: MyriadPro;
    src: url("https://d3n9fgnchfp64a.cloudfront.net/fonts/myriadpro-regular.eot") format("embedded-opentype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/myriadpro-regular.woff2") format("woff2"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/myriadpro-regular.woff") format("woff"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/myriadpro-regular.ttf") format("truetype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/myriadpro-regular.svg#MyriadProRegular") format("svg");
    font-style: normal;
    font-weight: 300
}

@font-face {
    font-family: MyriadPro;
    src: url("https://d3n9fgnchfp64a.cloudfront.net/fonts/myriadpro-regular.eot") format("embedded-opentype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/myriadpro-regular.woff2") format("woff2"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/myriadpro-regular.woff") format("woff"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/myriadpro-regular.ttf") format("truetype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/myriadpro-regular.svg#MyriadProRegular") format("svg");
    font-style: normal;
    font-weight: 400
}

@font-face {
    font-family: MyriadPro;
    src: url("https://d3n9fgnchfp64a.cloudfront.net/fonts/myriadpro-semibold.eot") format("embedded-opentype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/myriadpro-semibold.woff2") format("woff2"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/myriadpro-semibold.woff") format("woff"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/myriadpro-semibold.ttf") format("truetype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/myriadpro-semibold.svg#MyriadProSemibold") format("svg");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: LatoLatin;
    src: url("https://d3n9fgnchfp64a.cloudfront.net/fonts/LatoLatin-Medium.eot?#iefix") format("embedded-opentype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/LatoLatin-Medium.woff2") format("woff2"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/LatoLatin-Medium.woff") format("woff"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/LatoLatin-Medium.ttf") format("truetype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/LatoLatin-Medium.svg#robotomedium") format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: LatoLatin;
    src: url("https://d3n9fgnchfp64a.cloudfront.net/fonts/LatoLatin-Regular.eot?#iefix") format("embedded-opentype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/LatoLatin-Regular.woff2") format("woff2"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/LatoLatin-Regular.woff") format("woff"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/LatoLatin-Regular.ttf") format("truetype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/LatoLatin-Regular.svg#robotomedium") format("svg");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: LatoLatin;
    src: url("https://d3n9fgnchfp64a.cloudfront.net/fonts/LatoLatin-Bold.eot?#iefix") format("embedded-opentype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/LatoLatin-Bold.woff2") format("woff2"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/LatoLatin-Bold.woff") format("woff"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/LatoLatin-Bold.ttf") format("truetype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/LatoLatin-Bold.svg#robotomedium") format("svg");
    font-weight: 600;
    font-style: normal
}

@font-face {
    font-family: cflow-icon;
    src: url("https://d3n9fgnchfp64a.cloudfront.net/fonts/cflow-icon.eot?v5if2m#iefix") format("embedded-opentype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/cflow-icon.ttf?v5if2m") format("truetype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/cflow-icon.woff?v5if2m") format("woff"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/cflow-icon.svg?v5if2m#cflow-icon") format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: cflow-icon19;
    src: url("https://d3n9fgnchfp64a.cloudfront.net/fonts/cflow19.eot?v5if2m#iefix") format("embedded-opentype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/cflow19.ttf?v5if2m") format("truetype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/cflow19.woff?v5if2m") format("woff"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/cflow19.svg?v5if2m#cflow-icon19") format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: soscal-icon;
    src: url("https://d3n9fgnchfp64a.cloudfront.net/fonts/soscalv4.eot?v5if2m#iefix") format("embedded-opentype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/soscalv4.ttf?v5if2m") format("truetype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/soscalv4.woff?v5if2m") format("woff"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/soscalv4.svg?v5if2m#cflow-icon") format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-weight: 400;
    src: url("https://d3n9fgnchfp64a.cloudfront.net/fonts/webfonts/fa-brands-400.eot") format("embedded-opentype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/webfonts/fa-brands-400.woff2") format("woff2"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/webfonts/fa-brands-400.woff") format("woff"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/webfonts/fa-brands-400.ttf") format("truetype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts//webfonts/fa-brands-400.svg") format("svg")
}

@font-face {
    font-family: "Font Awesome 5 Regular";
    font-style: normal;
    font-weight: 400;
    src: url("https://d3n9fgnchfp64a.cloudfront.net/fonts/webfonts/fa-regular-400.eot") format("embedded-opentype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/webfonts/fa-regular-400.woff2") format("woff2"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/webfonts/fa-regular-400.woff") format("woff"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/webfonts/fa-regular-400.ttf") format("truetype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts//webfonts/fa-regular-400.svg") format("svg")
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    src: url("https://d3n9fgnchfp64a.cloudfront.net/fonts/webfonts/fa-solid-900.eot") format("embedded-opentype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/webfonts/fa-solid-900.woff2") format("woff2"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/webfonts/fa-solid-900.woff") format("woff"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts/webfonts/fa-solid-900.ttf") format("truetype"),url("https://d3n9fgnchfp64a.cloudfront.net/fonts//webfonts/fa-solid-900.svg") format("svg")
}

.client::before {
    content: ""
}

.refresh::before {
    content: ""
}

.i-radio::before {
    content: ""
}

.i-checkbox1::before {
    content: ""
}

.checkbox-list::before {
    content: ""
}

.Admin5::before {
    content: ""
}

.WF11::before {
    content: ""
}

.WF10::before {
    content: ""
}

.WF8::before {
    content: ""
}

.WF6::before {
    content: ""
}

.WF12::before {
    content: ""
}

.Admin62::before {
    content: ""
}

.Admin6::before {
    content: ""
}

.Reports2::before {
    content: ""
}

.WF5::before {
    content: ""
}

.WF4::before {
    content: ""
}

.WF3::before {
    content: ""
}

.WF1::before {
    content: ""
}

.parallel::before {
    content: ""
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #f0f0f0
}

::-webkit-scrollbar-thumb {
    background-color: #9e9e9e
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #7b7b7b
    }

a, button, input {
    font-family: "Open Sans",sans-serif
}

a {
    cursor: pointer
}

.tab {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    line-height: 1.3;
    color: #fff;
    -webkit-font-smoothing: antialiased
}

    .tab i {
        display: none;
        position: absolute;
        right: 10px;
        top: 12px
    }

.current a {
    color: #484d52;
    background: #fff
}

.wor-name-stage-top {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    line-height: 20px;
    float: left;
    font-size: 14px
}

.wor-id-btm {
    font-size: 13px;
    line-height: 22px;
    color: #afafaf;
    width: 100%;
    text-overflow: ellipsis;
    float: left;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    justify-content: flex-start
}

.workflow-data-value {
    float: left;
    width: 100%;
    margin: 10px
}

.workflow-data-value-field {
    float: left;
    width: 48%;
    position: relative;
    margin: 5px 0 0;
    vertical-align: top;
    min-height: 50px
}

    .workflow-data-value-field span:first-child {
        width: 35%;
        float: left;
        display: block;
        text-align: right;
        font-size: 14px;
        padding: 8px 10px;
        box-sizing: border-box;
        overflow-wrap: break-word;
        position: relative
    }

    .workflow-data-value-field input {
        width: 55%;
        float: left;
        display: block;
        text-align: left;
        font-size: 15px;
        padding: 3px;
        border-style: solid;
        border-color: #e0e0e0;
        border-image: initial;
        border-width: 0 0 1px;
        appearance: none;
        box-sizing: border-box;
        color: #1a1a1a
    }

    .workflow-data-value-field input {
        outline: 0
    }

.save-btn-btm {
    position: fixed;
    bottom: 12%;
    right: 1.5%;
    z-index: 99
}

    .save-btn-btm .save {
        background: #1ba40a;
        border-radius: 50%;
        width: 45px;
        height: 45px;
        display: block;
        margin: 10px 0;
        box-shadow: rgba(0,0,0,0.05) 0 2px 4px 0,rgba(0,0,0,0.05) 0 2px 10px 0;
        color: #fff
    }

        .save-btn-btm .save:hover {
            box-shadow: #ddd -4px 2px 3px
        }

        .save-btn-btm .save i {
            font-size: 25px;
            padding: 10px
        }

    .save-btn-btm .reset {
        border-radius: 50%;
        width: 45px;
        height: 45px;
        display: block;
        margin: 10px 0;
        box-shadow: rgba(0,0,0,0.05) 0 2px 4px 0,rgba(0,0,0,0.05) 0 2px 10px 0;
        color: #fff
    }

        .save-btn-btm .reset:hover {
            box-shadow: #ddd -4px 2px 3px
        }

        .save-btn-btm .reset i {
            font-size: 26px;
            padding: 10px
        }

.group {
    position: relative;
    float: left;
    width: 40%;
    margin: 3% 5% 0;
    height: 44px
}

    .group input {
        font-size: 16px;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 100%;
        border-top: 0;
        border-right: 0;
        border-left: none;
        border-image: initial;
        border-bottom: 1px solid #757575;
        box-sizing: border-box
    }

        .group input:focus {
            outline: 0
        }

    .group label {
        color: #999;
        font-size: 16px;
        font-weight: 400;
        position: absolute;
        pointer-events: none;
        left: 5px;
        top: 10px;
        transition: all .2s ease 0s
    }

    .group input:focus ~ label, .group input:valid ~ label {
        top: -20px;
        font-size: 14px;
        color: #5264ae
    }

@-webkit-keyframes inputHighlighter {
    0% {
        background: #5264ae
    }

    100% {
        width: 0;
        background: 0
    }
}

@keyframes inputHighlighter {
    0% {
        background: #5264ae
    }

    100% {
        width: 0;
        background: 0
    }
}

.trigger-data-cont {
    width: 100%;
    display: block;
    float: left;
    border-bottom: 1px solid #ddd;
    padding: 5px;
    box-sizing: border-box
}

.radio-check-group label::after {
    content: "";
    background: 0
}

.radio-check-group input[type="radio"] {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 91%;
    bottom: 3px;
    border-bottom: 1px solid #fff;
    appearance: none;
    outline: 0;
    opacity: 0
}

    .radio-check-group input[type="radio"] + .lab-radio > span {
        font-size: 12px;
        border: 1px solid #c5c4c4;
        padding: 5px 15px;
        line-height: 12px;
        border-radius: 4px;
        width: 100%;
        position: relative;
        text-align: left;
        color: inherit;
        cursor: pointer
    }

    .radio-check-group input[type="radio"]:checked + .lab-radio > span::after {
        content: "";
        font-family: "Material Design Icons";
        position: absolute;
        top: -1px;
        left: -3px;
        pointer-events: none;
        padding: 4px;
        box-sizing: border-box;
        font-size: 12px;
        cursor: pointer
    }

.lab-radio {
    float: left;
    display: block;
    margin: 0 5px 5px 0;
    height: 21px;
    border-radius: 4px;
    background-color: #fff
}

.workflow-approval-lab {
    border-radius: 3px;
    background-color: #fff;
    color: #4f5256;
    width: 90%;
    margin: 5px 5.35%;
    float: left;
    display: block;
    padding-bottom: 1%;
    position: relative;
    z-index: 4;
    box-shadow: rgba(0,0,0,0.05) 0 2px 4px 0,rgba(0,0,0,0.05) 0 2px 10px 0
}

    .workflow-approval-lab .title {
        width: 100%;
        display: block;
        cursor: pointer
    }

        .workflow-approval-lab .title h2 {
            padding: 8px;
            font-size: 15px;
            margin: 0;
            font-weight: 400;
            box-sizing: border-box
        }

.ap-title {
    width: 25%;
    float: left
}

    .ap-title h2 {
        padding: 6px 8px;
        font-size: 16px;
        margin: 0;
        font-weight: 400;
        box-sizing: border-box;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden
    }

.radio-check-group input[type="checkbox"] {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 92%;
    bottom: 3px;
    border-bottom: 1px solid #fff;
    appearance: none;
    outline: 0;
    opacity: 0
}

.radio-check-group input[type="radio"]:disabled + .lab-radio {
    background-color: #ddd;
    pointer-events: none;
}

.workflow-approval-field {
    width: 70%;
    margin: 0 10%;
    float: left;
    position: relative;
    top: 0
}

    .workflow-approval-field span {
        width: 20%;
        float: left;
        display: block;
        text-align: right;
        font-size: 15px;
        font-weight: 400;
        padding: 8px 10px;
        box-sizing: border-box
    }

.multiple-approval {
    float: left;
    background-color: #f5f5f5;
    background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
    border: 1px solid rgba(0,0,0,0.1);
    padding: 4.2px;
    border-radius: 2px;
    margin: 1px 0;
    color: #000;
    position: relative
}

    .multiple-approval i {
        font-size: 22px;
        position: absolute;
        display: block;
        float: left;
        right: 0;
        top: 3px
    }

    .multiple-approval span {
        font-size: 14px;
        float: left;
        display: block;
        padding-right: 18px
    }

.multiple-approval-drop-down {
    width: 110px;
    min-height: 100px;
    max-height: 200px;
    float: left;
    position: absolute;
    top: 35px;
    background: #fff;
    border: 1px solid #ddd;
    z-index: 6;
    padding: 5px;
    box-sizing: border-box;
    display: none;
    overflow: hidden auto
}

.drag-list {
    border: 1px solid #e8e8e8;
    background: #f6f6f6;
    font-weight: 400;
    color: #454545;
    cursor: move;
    border-radius: 2px
}

.workflow-save-btn {
    position: absolute;
    top: 8px
}

    .workflow-save-btn a {
        text-decoration: none;
        padding: 4px 8px;
        font-size: 16px;
        font-weight: 300;
        margin: 2px 5px;
        float: left;
        border-radius: 2px;
        box-shadow: rgba(0,0,0,0.2) 0 4px 9px 0,rgba(0,0,0,0.19) 3px 3px 1px 0;
        outline: 0;
        color: #fff
    }

        .workflow-save-btn a:active {
            position: relative;
            top: 3px;
            left: 3px
        }

.tooltip {
    position: absolute;
    z-index: 99999999;
    display: block;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.42857;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    overflow-wrap: normal;
    white-space: normal;
    opacity: 0;
    line-break: auto
}

    .tooltip.in {
        opacity: .9
    }

    .tooltip.top {
        padding: 5px 0;
        margin-top: -3px
    }

.hidden {
    display: none
}

.ss-role-table {
    width: 100%;
    background: #fff;
    max-height: 445px
}

    .ss-role-table table {
        margin: 0 auto 5px;
        float: left;
        width: 100%;
        border-collapse: collapse
    }

.ss-acc-perm-cont {
    width: 100%;
    display: block;
    float: left
}

.cadm_user_list.ss-acc-perm-cont a {
    width: 20%
}

.role-name-cont {
    width: 94%;
    float: left;
    margin: 3%;
    border-radius: 6px;
    box-shadow: rgba(0,0,0,0.16) 0 2px 5px 0,rgba(0,0,0,0.12) 0 2px 10px 0
}

    .role-name-cont:hover {
        box-shadow: rgba(0,0,0,0.18) 0 5px 11px 0,rgba(0,0,0,0.15) 0 4px 15px 0
    }

.ss-acc-perm-cont a:nth-child(10n+1) .role-name-cont {
    background-color: #4caf50;
    border: 1px solid #4caf50
}

.ss-acc-perm-cont a:nth-child(10n+2) .role-name-cont {
    background-color: #00bcd4;
    border: 1px solid #00bcd4
}

.ss-acc-perm-cont a:nth-child(10n+3) .role-name-cont {
    background-color: #03a9f4;
    border: 1px solid #03a9f4
}

.ss-acc-perm-cont a:nth-child(10n+4) .role-name-cont {
    background-color: #fca435;
    border: 1px solid #fca435
}

.ss-acc-perm-cont a:nth-child(10n+5) .role-name-cont {
    background-color: #ff4720;
    border: 1px solid #ff4720
}

.ss-acc-perm-cont a:nth-child(10n+6) .role-name-cont {
    background-color: #e0ad00;
    border: 1px solid #e0ad00
}

.ss-acc-perm-cont a:nth-child(10n+7) .role-name-cont {
    background-color: #673ab7;
    border: 1px solid #673ab7
}

.ss-acc-perm-cont a:nth-child(10n+8) .role-name-cont {
    background-color: #167abc;
    border: 1px solid #167abc
}

.ss-acc-perm-cont a:nth-child(10n+9) .role-name-cont {
    background-color: #a32dca;
    border: 1px solid #a32dca
}

.ss-acc-perm-cont a:nth-child(10n+10) .role-name-cont {
    background-color: #1658bc;
    border: 1px solid #1658bc
}

.role-name-in {
    width: 100%;
    height: 95px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    position: relative
}

.role-name-cont span {
    font-size: 14px;
    color: #fff;
    display: block;
    width: 174px;
    overflow-wrap: break-word
}

.ss-acc-workflow-listcont {
    width: 100%;
    display: block;
    margin: 10px 0
}

.acc-op-cl-gr-in {
    position: absolute;
    top: 4px;
    right: 5px;
    z-index: 1
}

    .acc-op-cl-gr-in i {
        font-size: 22px;
        padding: 2px;
        color: #676767
    }

.ss-acc-workflow-cont {
    width: 100%;
    float: left;
    display: block;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    margin-top: -2px;
    box-sizing: border-box;
    padding: 0 10px
}

    .ss-acc-lookup-cont h2, .ss-acc-report-cont h2, .ss-acc-support-cont h2, .ss-acc-workflow-cont h2, .ss-acc-arch-report-cont h2 {
        font-size: 15px;
        font-weight: 500;
        margin: 10px 0
    }

.aa-acc-li-cont {
    width: 100%;
    float: left
}

.wf-list-name {
    width: 100%;
    margin: 10px 0;
    padding: 8px 10px;
    box-sizing: border-box;
    background: #f1f1f1;
    height: 35px;
    border-radius: 2px;
    position: relative;
    color: #4c4c4c;
    cursor: pointer;
    z-index: 1
}

    .wf-list-name a {
        float: left;
        font-size: 12px;
        color: #fff;
        border-radius: 2px;
        padding: 2px;
        margin-right: 4px;
        outline: 0
    }

    .wf-list-name h4 {
        margin: 0;
        font-size: 15px;
        color: #464646;
        float: left;
        border: 0;
        z-index: 2;
        width: 96%;
        font-weight: 400 !important
    }

        .wf-list-name h4 i {
            position: relative;
            top: 2px;
            left: 4px;
            color: #1ba40a;
            font-size: 14px
        }

.lkup-list-name {
    width: 100%;
    margin: 8px 0;
    padding: 8px 10px;
    box-sizing: border-box;
    height: 35px;
    border-radius: 2px;
    position: relative;
    color: #4c4c4c
}

    .lkup-list-name h3 {
        margin: 0;
        font-size: 14px;
        font-weight: 500;
        color: #464646
    }

.reprt-list-name {
    width: 100%;
    margin: 8px 0;
    padding: 8px 10px;
    box-sizing: border-box;
    background: #f7f7f7;
    height: 40px;
    border-radius: 2px;
    position: relative;
    color: #4c4c4c
}

    .reprt-list-name h3 {
        margin: 0;
        font-size: 14px;
        font-weight: 500;
        color: #464646
    }

.ss-ac-group-list-cont {
    width: 100%;
    float: left;
    display: none;
    padding: 0 4%;
    box-sizing: border-box
}

.acc-prm-check {
    float: left;
    display: block;
    /*height: 20px*/
}

    .acc-prm-check[type="checkbox"]:checked, .acc-prm-check[type="checkbox"]:not(:checked) {
        position: absolute;
        left: -9999px;
        opacity: 0
    }

    .acc-prm-check [type="checkbox"] + label {
        position: relative;
        padding-left: 22px;
        cursor: pointer;
        display: inline-block;
        height: 20px;
        box-sizing: border-box;
        font-size: 15px;
        user-select: none;
        margin: 0
    }

        .acc-prm-check [type="checkbox"] + label::before {
            content: "";
            position: absolute;
            top: -0.5px;
            left: 0;
            width: 13px;
            height: 13px;
            z-index: 0;
            border: 2px solid #afafaf;
            border-radius: 1px;
            margin-top: 2px;
            transition: all .2s ease 0s
        }

    .acc-prm-check [type="checkbox"]:checked + label::before {
        top: -4px;
        left: -5px;
        width: 8px;
        height: 16px;
        border-top: 2px solid transparent;
        border-left: 2px solid transparent;
        transform: rotate(40deg);
        backface-visibility: hidden;
        transform-origin: 100% 100%
    }

    .acc-prm-check input[type="checkbox"] {
        display: none !important
    }

    .acc-prm-check [type="checkbox"] + label span {
        padding: 3px 5px;
        display: block
    }

.lookup-list-cont {
    width: 100%;
    display: block;
    margin: 10px 0;
    float: left
}

.ss-acc-lookup-cont {
    width: 100%;
    float: left;
    display: none;
    background-color: #fff;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    margin-top: -2px;
    box-sizing: border-box;
    padding: 0 10px
}

.report-list-cont {
    width: 100%;
    display: block;
    margin: 10px 0;
    float: left
}

.ss-acc-report-cont {
    width: 100%;
    float: left;
    display: none;
    background-color: #fff;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    margin-top: -2px;
    box-sizing: border-box;
    padding: 0 10px
}

.acc-prem-tab {
    width: 100%;
    float: left;
    box-shadow: rgba(0,0,0,0.16) 0 2px 5px 0,rgba(0,0,0,0.12) 0 2px 10px 0;
    background: #fff;
    margin-top: 15px
}

    .acc-prem-tab .acc-wrl-nam.active::after {
        font-family: "Material Design Icons";
        content: "";
        position: absolute;
        top: 16px;
        left: 45%;
        font-size: 40px
    }

    .acc-prem-tab .acc-wrl-nam {
        font-size: 16px;
        font-weight: 400;
        float: left;
        margin: 0;
        padding: 12px;
        width: 20%;
        text-align: center;
        box-sizing: border-box
    }

        .acc-prem-tab .acc-wrl-nam:hover {
            background: #f9f9f9
        }

        .acc-prem-tab .acc-wrl-nam.active {
            box-sizing: border-box;
            position: relative;
            background: #f9f9f9
        }

.acp-radio input[type="radio"]:checked, .acp-radio input[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
    opacity: 0
}

    .acp-radio input[type="radio"]:checked + label, .acp-radio input[type="radio"]:not(:checked) + label {
        position: relative;
        padding-left: 35px;
        cursor: pointer;
        display: inline-block;
        height: 25px;
        line-height: 25px;
        font-size: 1rem;
        transition: all .28s ease 0s;
        user-select: none
    }

.acp-radio input[type="radio"] + label::after, .acp-radio input[type="radio"] + label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    margin: 4px;
    width: 16px;
    height: 16px;
    z-index: 0;
    transition: all .28s ease 0s
}

.acp-radio input[type="radio"]:checked + label::after, .acp-radio input[type="radio"]:checked + label::before, .acp-radio input[type="radio"]:not(:checked) + label::after, .acp-radio input[type="radio"]:not(:checked) + label::before {
    border-radius: 50%
}

.acp-radio input[type="radio"]:not(:checked) + label::after, .acp-radio input[type="radio"]:not(:checked) + label::before {
    border: 2px solid #5a5a5a
}

.acp-radio input[type="radio"]:not(:checked) + label::after {
    z-index: -1;
    transform: scale(0)
}

.acp-radio input[type="radio"]:checked + label::before {
    border: 2px solid transparent
}

.acp-radio input[type="radio"]:checked + label::after {
    transform: scale(1.02)
}

.acp-radio input[type="radio"]:disabled:checked + label::before, .acp-radio input[type="radio"]:disabled:not(:checked) + label::before {
    background-color: transparent;
    border-color: rgba(0,0,0,0.26)
}

.acp-radio input[type="radio"]:disabled + label {
    color: rgba(0,0,0,0.26)
}

.acp-radio input[type="radio"]:disabled:not(:checked) + label::before {
    border-color: rgba(0,0,0,0.26)
}

.acp-radio input[type="radio"]:disabled:checked + label::after {
    background-color: rgba(0,0,0,0.26);
    border-color: #bdbdbd
}

.acp-rep-perm {
    float: right;
    width: 30%
}

    .acp-rep-perm .acp-rep-sp {
        font-size: 14px;
        float: left;
        padding: 3px;
        margin-right: 5px;
        font-weight: 400 !important
    }

.acp-wrk-lk-re-list {
    width: 100%;
    float: left;
    display: none;
    box-shadow: rgba(0,0,0,0.05) 0 2px 4px 0,rgba(0,0,0,0.05) 0 2px 10px 0;
    height: 64vh;
    overflow: auto
}

.user-set-cont h3 {
    font-size: 15px;
    font-weight: 500;
    float: left;
    margin: 10px 10px 5px;
    width: 50%
}

.user-set-cont h5 {
    float: left;
    font-size: 15px;
    padding: .6%;
    display: block;
    margin: 0;
    font-weight: 500;
    text-align: center;
    width: 100%;
    box-sizing: border-box
}

    .user-set-cont h5 span {
        color: #12ab00
    }

.user-set-cont {
    color: #4f5256;
    box-shadow: rgba(20,20,20,0.18) 0 0 2px;
    float: left;
    width: 100%;
    border-radius: 2px
}

.acp-wr-relist-in {
    width: 100%;
    float: left;
    background: #fff
}

.acp-lab {
    float: left;
    display: block;
    margin: 0 5px 5px 0
}

.acp-rep-radio {
    padding: 0
}

    .acp-rep-radio input[type="radio"] {
        display: none
    }

        .acp-rep-radio input[type="radio"] + .acp-rep-lab > span {
            font-size: 12px;
            border: 1px solid #c5c4c4;
            padding: 3px;
            line-height: 12px;
            border-radius: 4px;
            width: 100%;
            position: relative;
            text-align: left;
            color: inherit
        }

        .acp-rep-radio input[type="radio"]:checked + .acp-rep-lab > span {
            padding: 3px 3px 3px 13px
        }

            .acp-rep-radio input[type="radio"]:checked + .acp-rep-lab > span::after {
                content: "";
                font-family: "Material Design Icons";
                position: absolute;
                top: 1px;
                left: -4px;
                pointer-events: none;
                padding: 4px;
                box-sizing: border-box;
                font-size: 12px
            }

.acp-rep-lab {
    float: left;
    display: block;
    margin: 6px 10px 5px 0;
}

.parallel-check-cont {
    width: 100%;
    float: left
}

.parallel-check-cont-btm {
    width: 100%;
    float: left;
    height: 50px
}

    .parallel-check-cont-btm span {
        float: left;
        display: block;
        padding: 5px 20px;
        font-size: 12px;
        color: #8a8a8a
    }

@-webkit-keyframes beacon {
    0% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(0.5,0.5)
    }

    50% {
        opacity: 1;
        transform-origin: 50% 50%
    }

    100% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(1.5,1.5)
    }
}

@keyframes beacon {
    0% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(0.5,0.5)
    }

    50% {
        opacity: 1;
        transform-origin: 50% 50%
    }

    100% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(1.5,1.5)
    }
}

/*#title {
    width: 100%;
    position: absolute;
    padding: 0;
    margin: 0 auto;
    text-align: center;
    font-size: 27px;
    color: #fff;
    font-family: "Open Sans",sans-serif;
    z-index: 9999;
    text-shadow: rgba(0,0,0,0.33) 0 1px 2px,rgba(255,255,255,0) -1px 0 2px
}*/

.search-criteria-container-field #title {
    width: 27% !important
}

@-webkit-keyframes anim {
    0% {
        transform: scale(0)
    }

    50% {
        transform: scale(1.7)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes anim {
    0% {
        transform: scale(0)
    }

    50% {
        transform: scale(1.7)
    }

    100% {
        transform: scale(1)
    }
}

@-webkit-keyframes animwelcome {
    0% {
        transform: scale(0)
    }

    50% {
        transform: scale(0)
    }

    75% {
        transform: scale(1.4)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes animwelcome {
    0% {
        transform: scale(0)
    }

    50% {
        transform: scale(0)
    }

    75% {
        transform: scale(1.4)
    }

    100% {
        transform: scale(1)
    }
}

@-webkit-keyframes animuser {
    0% {
        transform: scale(0)
    }

    50% {
        transform: scale(0)
    }

    75% {
        transform: scale(1.4)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes animuser {
    0% {
        transform: scale(0)
    }

    50% {
        transform: scale(0)
    }

    75% {
        transform: scale(1.4)
    }

    100% {
        transform: scale(1)
    }
}

@-webkit-keyframes anim_wifeo {
    0% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(360deg)
    }

    100% {
        transform: rotate(720deg)
    }
}

@keyframes anim_wifeo {
    0% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(360deg)
    }

    100% {
        transform: rotate(720deg)
    }
}

@-webkit-keyframes ring {
    0% {
        transform: rotate(-15deg)
    }

    2% {
        transform: rotate(15deg)
    }

    4% {
        transform: rotate(-18deg)
    }

    6% {
        transform: rotate(18deg)
    }

    8% {
        transform: rotate(-22deg)
    }

    10% {
        transform: rotate(22deg)
    }

    12% {
        transform: rotate(-18deg)
    }

    14% {
        transform: rotate(18deg)
    }

    16% {
        transform: rotate(-12deg)
    }

    18% {
        transform: rotate(12deg)
    }

    100%,20% {
        transform: rotate(0deg)
    }
}

@keyframes ring {
    0% {
        transform: rotate(-15deg)
    }

    2% {
        transform: rotate(15deg)
    }

    4% {
        transform: rotate(-18deg)
    }

    6% {
        transform: rotate(18deg)
    }

    8% {
        transform: rotate(-22deg)
    }

    10% {
        transform: rotate(22deg)
    }

    12% {
        transform: rotate(-18deg)
    }

    14% {
        transform: rotate(18deg)
    }

    16% {
        transform: rotate(-12deg)
    }

    18% {
        transform: rotate(12deg)
    }

    100%,20% {
        transform: rotate(0deg)
    }
}

@-webkit-keyframes fa-spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(1turn)
    }
}

@keyframes fa-spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(1turn)
    }
}

@media(max-width:1450px) and (min-width:1261px) {
    .view_current_dashboard {
        top: 5px !important;
        right: 4.9% !important
    }
}

@media only screen and (max-width:1260px) {
    .view_current_dashboard {
        top: 5px !important;
        right: 4.6% !important
    }
}

.wf_li_list_cont {
    width: 27%;
    border-radius: 5px;
    margin-block-start: 0;
    margin-block-end: 0
}

.wf_li_details {
    width: 70%;
    background: #e8e8e8;
    height: 558px;
    border-radius: 5px
}

.wf_li_list {
    padding-inline-start: 0;
    background: #fff;
    height: 502px;
    overflow: hidden scroll;
    box-shadow: #dcdcdc 0 30px 18px -10px inset,#dcdcdc 0 -30px 18px -10px inset;
    margin-block-start: 0;
    margin-block-end: 0
}

    .wf_li_list::-webkit-scrollbar {
        width: 7px
    }

    .wf_li_list::-webkit-scrollbar-track {
        background: #f5f6fa
    }

    .wf_li_list::-webkit-scrollbar-thumb {
        background: #e2e2e2;
        border-radius: 8px
    }

    .wf_li_list li {
        list-style: none;
        padding: 10px 4px;
        font-size: 13px;
        border-bottom: 1px solid #e4e4e4;
        color: #626262;
        cursor: pointer
    }

        .wf_li_list li:hover {
            background: #f5f5f5
        }

.wf_li_active {
    background: #ddd;
    color: #000
}

.wf_li_title_name {
    font-size: 17px;
    font-weight: 500;
    padding: 0 10px 0 0
}

.wf_list_title {
    position: relative;
    top: -7px
}

.view_current_dashboard {
    position: absolute;
    top: 14px;
    right: 5.6%
}

.my_workflow_content {
    margin: 2px 0 10px 10px;
    font-style: italic;
    font-size: 13px;
    color: #777
}

.cflow_no_data {
    background: #f5f5f5;
    text-align: center
}

.cf_menu_section .cflow_no_value {
    font-size: 15px;
    padding: 16px
}

.cflow_no_value {
    font-size: 22px;
    padding: 25px;
    color: #909090
}

.cadm_user_list_container .cflow_no_data {
    background: #fff
}

.cadm_user_list_container .cflow_no_value {
    font-size: 14px
}

    .cadm_user_list_container .cflow_no_value a {
        color: #fff;
        border: 1px solid #e62f2d;
        padding: 2px 4px;
        border-radius: 3px;
        background: #e62f2d
    }

    .cadm_user_list_container .cflow_no_value span {
        line-height: 25px;
        padding: 0 15px
    }

.wid_text_align_center {
    text-align: center
}

#wi_elements_list .CC_widg_title {
    display: none
}

.drop-green {
    border: 1px solid green !important
}

.drop-red {
    border: 1px solid red !important
}

.ui-draggable-handle {
    cursor: move
}

.wi_dashboard_conatiner {
    display: flex;
    padding: 0;
    margin: 0;
    background: #eff3f6
}

.connectedSortable {
    list-style-type: none;
    border: 1px dotted #a5a5a5;
    float: left;
    box-sizing: border-box;
    width: 23.5%;
    height: 23.5%;
    margin: .25%;
    z-index: 1
}

.wi_elements_list_title {
    background: #eee;
    font-size: 15px;
    text-align: center;
    line-height: 30px;
    color: #525252;
    font-weight: 600
}

#wi_elements_list {
    width: 200px;
    margin: 3% auto;
    z-index: 1;
    box-shadow: #cdcdcd 0 1px 14px 0
}

    #wi_elements_list ul {
        list-style: none;
        padding-inline-start: 6px;
        margin-block-end: 6px;
        margin-block-start: 6px;
        height: 600px;
        overflow: auto
    }

        #wi_elements_list ul li {
            cursor: move
        }

    #wi_elements_list .wid_wf_list_container {
        width: 96%
    }

.DroppedElement {
    padding: 2px
}

.ui-sortable-helper .CC_widg_container, .ui-sortable-helper .wid_notification, .ui-sortable-helper .wid_one_three, .ui-sortable-helper .wid_one_four, .ui-sortable-helper .wid_one_two {
    width: 100% !important
}

.ui-sortable-helper .wid_two_two, .ui-sortable-helper .dash_two_isto_three, .ui-sortable-helper .wid_two_isto_three {
    width: 200% !important
}

.ui-sortable-helper .wid_wf_list_container, .ui-sortable-helper .wid_wf_list_container_large, .ui-sortable-helper .wid_metric_count {
    width: 300% !important
}

li.DroppedElement > div:first-child {
    position: absolute !important
}

#wi_elements_list .wi_dash_notification {
    width: 88%;
    position: initial
}

#wi_elements_list .ele_remove_small {
    display: none
}

.wi_elements_container {
    width: 80%;
    margin: 3% auto;
    height: auto
}

    .wi_elements_container li {
        cursor: move
    }

    .wi_elements_container .ele_remove_small {
        width: 45px;
        float: right;
        margin-top: 5px;
        text-align: right
    }

.wid_fixed_btn {
    position: fixed;
    bottom: 60px;
    right: 20px;
    z-index: 99;
    flex-direction: column;
    align-items: flex-end !important;
    width: 4% !important;
}

    .wid_fixed_btn .wid_cancel i, .wid_fixed_btn .wid_save_btn i {
        font-size: 23px !important;
        color: #fff !important
    }

    .wid_fixed_btn .wid_cancel {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: block;
        margin: 3px 0;
        box-shadow: rgba(0,0,0,0.15) 0 8px 16px;
        text-decoration: none;
        background: #f44336;
        padding: 8px
    }

    .wid_fixed_btn .wid_save_btn {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: block;
        margin: 3px 0;
        box-shadow: rgba(0,0,0,0.15) 0 8px 16px;
        text-decoration: none;
        padding: 8px;
        background: #449220
    }

.wid_save_container {
    display: flex;
    justify-content: flex-end;
    width: 94%;
    align-items: center;
    margin-top: -30px
}

.wid_save_btn {
    width: 60px;
    padding: 7px 15px;
    text-align: center;
    color: #fff;
    border-radius: 3px;
    font-size: 14px
}

.ele_remove_small a {
    color: #626262;
    font-size: 15px;
    padding-right: 7px
}

.wi_dis_flex {
    display: flex
}

#wi_elements_list .dash_drag_element, #wi_elements_list .dash_graphic_img_wf_list_large {
    height: 120px;
    width: 97%;
    margin-bottom: 15px;
    box-shadow: #c5c5c5 0 6px 6px 0
}

#wi_elements_list .dash_graphic_img_metric_three_isto_one {
    height: 120px;
    width: 97%;
    margin-bottom: 15px;
    box-shadow: #c5c5c5 0 6px 6px 0
}

#wi_elements_list .dash_drag_element:hover {
    box-shadow: #9a9a9a 0 5px 3px 0
}

@media(max-width:1450px) and (min-width:1261px) {
    #wi_elements_list {
        width: 190px;
        margin: 3% auto;
        background: #f3f3f3;
        z-index: 1;
        box-shadow: none;
        border-radius: 3px
    }

        #wi_elements_list ul {
            height: 444px
        }

        #wi_elements_list .dash_drag_element {
            width: 97% !important
        }

        #wi_elements_list .CC_widg_container, #wi_elements_list .wid_notification, #wi_elements_list .wid_wf_list_container, #wi_elements_list .wid_two_two, #wi_elements_list .wid_one_three, #wi_elements_list .wid_one_four, #wi_elements_list .wid_wf_list_container_large, #wi_elements_list .wid_two_isto_three, #wi_elements_list .wid_metric_count, #wi_elements_list .wid_one_four, #wi_elements_list .wid_one_two {
            height: 122px !important
        }

    .CC_widg_content img {
        width: 170px !important
    }

    .wi_cur_modal_data .CC_widg_container {
        width: 23.6% !important;
        height: 118px !important
    }

    .CC_widg_container {
        width: 18% !important;
        height: 112px !important
    }

    .wid_notification {
        width: 18% !important;
        height: 231px !important
    }

    .wid_one_two {
        width: 18% !important;
        height: 231px !important
    }

    .wid_one_three {
        width: 18% !important;
        height: 350px !important
    }

    .wid_one_four {
        width: 18% !important;
        height: 470px !important
    }

    .wid_wf_list_container {
        width: 55.25% !important;
        height: 231px !important
    }

    .wid_wf_list_container_large {
        width: 55.25% !important;
        height: 350px !important
    }

    .wid_metric_count {
        width: 55.25% !important;
        height: 111px !important
    }

    .DroppedElement .dash_graphic_img {
        height: 80px !important
    }

    .DroppedElement .dash_graphic_img_wf_list_large {
        height: 325px !important
    }

    .DroppedElement .dash_graphic_img_metric_three_isto_one {
        height: 85px !important
    }

    .DroppedElement .dash_graphic_img_wf_list, .DroppedElement .dash_graphic_img_2_4 {
        height: 206px !important
    }

    .DroppedElement .dash_graphic_img_2_3 {
        height: 320px !important
    }

    .DroppedElement .dash_graphic_img_1_3 {
        height: 324px !important
    }

    .DroppedElement .dash_graphic_img_1_4 {
        height: 432px !important
    }

    .wid_two_two {
        height: 231px !important
    }

    .wid_two_isto_three {
        height: 350px !important
    }

    .view_current_dashboard {
        top: 5px !important;
        right: 4.9% !important
    }

    .update_all_users_widgets {
        right: 21% !important;
        top: 9px !important
    }
}

@media only screen and (max-width:1260px) {
    #wi_elements_list {
        width: 185px;
        margin: 34px 10px 40px
    }

        #wi_elements_list .dash_drag_element {
            width: 97%
        }

        #wi_elements_list ul {
            height: 444px
        }

    .DroppedElement .dash_graphic_img {
        height: 82px !important
    }

    #wi_elements_list .dash_drag_element {
        width: 97% !important
    }

    .DroppedElement .dash_graphic_img_2_4, .DroppedElement .dash_graphic_img_wf_list {
        height: 210px !important
    }

    .DroppedElement .dash_graphic_img_2_3 {
        height: 340px !important
    }

    .DroppedElement .dash_graphic_img_1_3 {
        height: 337px !important
    }

    .DroppedElement .dash_graphic_img_1_4 {
        height: 450px !important
    }

    #wi_elements_list .CC_widg_container, #wi_elements_list .wid_notification, #wi_elements_list .wid_wf_list_container, #wi_elements_list .wid_two_two, #wi_elements_list .wid_one_three, #wi_elements_list .wid_one_four, #wi_elements_list .wid_wf_list_container_large, #wi_elements_list .wid_two_isto_three, #wi_elements_list .wid_metric_count, #wi_elements_list .wid_one_two {
        height: 120px !important
    }

    .CC_widg_content img {
        width: 166px !important
    }

    .CC_widg_container {
        width: 17%;
        height: 116px !important
    }

    .wid_notification {
        width: 17.5% !important;
        height: 239px !important
    }

    .wid_one_two {
        width: 17.5% !important;
        height: 239px !important
    }

    .wid_one_three {
        width: 17.5% !important;
        height: 362px !important
    }

    .wid_one_four {
        width: 17.5% !important;
        height: 480px !important
    }

    .wid_wf_list_container {
        height: 237px !important;
        width: 53% !important
    }

    .wid_wf_list_container_large {
        height: 353px !important;
        width: 53% !important
    }

    .wid_metric_count {
        height: 115px !important;
        width: 53% !important
    }

    .DroppedElement .dash_graphic_img_wf_list_large {
        height: 330px !important
    }

    .DroppedElement .dash_graphic_img_metric_three_isto_one {
        height: 91px !important
    }

    .wid_two_two {
        height: 237px !important
    }

    .wid_two_isto_three {
        height: 363px !important
    }

    .view_current_dashboard {
        top: 5px !important;
        right: 4.6% !important
    }

    .update_all_users_widgets {
        right: 23.6% !important;
        top: 10px !important
    }
}

.wi_cur_modal_data .CC_widg_container {
    width: 24.65%
}

.CC_widg_container {
    background: #fff;
    border-radius: 4px;
    width: 18.1%;
    margin-top: -2px;
    margin-left: -2px;
    height: 148px
}

.CC_widg_container_hover {
    width: 300px
}

.wi_elements_container .CC_widg_title {
    font-size: 14px;
    padding: 4px 2px 2px 35px;
    margin-top: 0;
    color: #525252;
    display: flex;
    justify-content: center
}

.CC_widg_content {
    height: 122px;
    background: #f6f5f5;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

    .CC_widg_content img {
        width: 180px;
        height: 100px
    }

.wi_elements_container .CC_widg_content {
    width: 206px;
    height: 146px
}

.wid_top_per {
    border-radius: 3px;
    width: 37.7%;
    height: 147px;
    float: left;
    display: block;
    background: #fff
}

.wid_notification {
    border-radius: 3px;
    background-color: #fff;
    width: 18.20%;
    height: 306px;
    float: left;
    display: block;
    margin-top: -2px;
    margin-left: -2px
}

.wid_one_two {
    border-radius: 3px;
    background-color: #fff;
    width: 18.2%;
    height: 306px;
    float: left;
    display: block;
    margin-top: -2px;
    margin-left: -2px
}

.wid_one_three {
    border-radius: 3px;
    background-color: #fff;
    width: 18.2%;
    height: 465px;
    float: left;
    display: block;
    margin-top: -2px;
    margin-left: -2px
}

.wid_one_four {
    border-radius: 3px;
    background-color: #fff;
    width: 18.20%;
    height: 616px;
    float: left;
    display: block;
    margin-top: -2px;
    margin-left: -2px
}

.wid_wf_list_container {
    border-radius: 3px;
    background-color: #fff;
    width: 55.5%;
    height: 306px;
    float: left;
    display: block;
    margin-top: -2px;
    margin-left: -2px
}

.wid_wf_list_container_large {
    border-radius: 3px;
    background-color: #fff;
    width: 55.5%;
    height: 455px;
    float: left;
    display: block;
    margin-top: -2px;
    margin-left: -2px
}

.wid_metric_count {
    border-radius: 3px;
    background-color: #fff;
    width: 55.5%;
    height: 145px;
    float: left;
    display: block;
    margin-top: -2px;
    margin-left: -2px
}

.wid_top_innercontainer {
    width: 70%;
    height: 100%;
    float: left;
    position: relative
}

.dash_graphic_img, .dash_graphic_img_wf_list, .dash_graphic_img_4_2, .dash_graphic_img_2_4, .dash_graphic_img_1_3, .dash_graphic_img_1_4, .dash_graphic_img_wf_list_large, .dash_graphic_img_2_3, .dash_graphic_img_metric_three_isto_one {
    display: none
}

.DroppedElement .CC_widg_content {
    display: none
}

.DroppedElement .dash_graphic_img {
    display: block;
    width: 100%;
    height: 121px
}

.DroppedElement .dash_graphic_img_4_2 {
    display: block;
    width: 100%;
    height: 120px
}

.DroppedElement .dash_graphic_img_2_4, .DroppedElement .dash_graphic_img_wf_list {
    display: block;
    width: 100%;
    height: 278px
}

.DroppedElement .dash_graphic_img_2_3 {
    display: block;
    width: 100%;
    height: 434px
}

.DroppedElement .dash_graphic_img_1_3 {
    display: block;
    width: 100%;
    height: 437px
}

.DroppedElement .dash_graphic_img_1_4 {
    display: block;
    width: 100%;
    height: 583px
}

.DroppedElement .dash_graphic_img_wf_list_large {
    display: block;
    width: 100%;
    height: 435px
}

.DroppedElement .dash_graphic_img_metric_three_isto_one {
    display: block;
    width: 100%;
    height: 123px
}

.dash_graphic_img img, .dash_graphic_img_wf_list img, .dash_graphic_img_4_2 img, .dash_graphic_img_2_4 img, .dash_graphic_img_1_3 img, .dash_graphic_img_1_4 img, .dash_graphic_img_wf_list_large img, .dash_graphic_img_2_3 img, .dash_graphic_img_metric_three_isto_one img {
    width: 100%;
    height: 100%
}

.dash_wid_size {
    font-size: 12px;
    font-weight: 600;
}

.wi_li_con {
    width: 90%;
    top: 75px;
    margin: 50px auto
}

.wf_li_container {
    font-family: "Open Sans",sans-serif;
    display: flex;
    justify-content: space-evenly;
    margin-top: 25px
}

.wf_li_create_workflow {
    width: 175px;
    margin-top: 5px;
    margin-right: 25px;
    border: 2px solid #10d089;
    padding: 5px 0;
    border-radius: 4px;
    background: #10d089;
    text-align: center;
    box-shadow: #ccc 1px 0 5px 1px;
    float: right
}

    .wf_li_create_workflow a {
        font-weight: 600;
        font-size: 15px;
        display: inline-flex;
        letter-spacing: 1px;
        color: #fff !important
    }

        .wf_li_create_workflow a span {
            font-size: 20px
        }

.wf_li_form_image {
    width: 100%;
    height: 95%;
    background-color: #fff;
    position: relative
}

.wf_li_list_cont {
    width: 27%;
    border-radius: 5px;
    margin-block-start: 0;
    margin-block-end: 0
}

.wf_li_details {
    width: 70%;
    background: #e8e8e8;
    height: 558px;
    border-radius: 5px
}

.wf_li_list {
    padding-inline-start: 0;
    background: #fff;
    height: 502px;
    overflow: hidden scroll;
    box-shadow: #dcdcdc 0 30px 18px -10px inset,#dcdcdc 0 -30px 18px -10px inset;
    margin-block-start: 0;
    margin-block-end: 0
}

    .wf_li_list::-webkit-scrollbar {
        width: 7px
    }

    .wf_li_list::-webkit-scrollbar-track {
        background: #f5f6fa
    }

    .wf_li_list::-webkit-scrollbar-thumb {
        background: #e2e2e2;
        border-radius: 8px
    }

    .wf_li_list li {
        list-style: none;
        padding: 10px 4px;
        font-size: 13px;
        border-bottom: 1px solid #e4e4e4;
        color: #626262;
        cursor: pointer
    }

        .wf_li_list li:hover {
            background: #f5f5f5
        }

.wf_li_active {
    background: #ddd;
    color: #000
}

.wi_li_header {
    display: flex;
    padding: 10px 15px;
    align-items: center
}

.wf_li_title_name {
    font-size: 17px;
    font-weight: 500;
    padding: 0 10px 0 0
}

.wi_li_template_link {
    font-size: 14px
}

    .wi_li_template_link a {
        color: #fff;
        padding: 4px;
        border-radius: 3px;
        background: #a40d13;
        font-size: 12px
    }

.wi_li_desc_cont {
    background: #fff;
    padding: 15px;
    min-height: 50px;
    font-size: 14px;
    color: #777
}

.wi_li_sub_heading {
    padding: 10px 0 0 15px;
    color: #212121;
    font-size: 14px;
    font-weight: 500;
    font-family: Muli,sans-serif
}

.wi_li_img_cont {
    display: flex;
    justify-content: space-evenly;
    padding: 5px 15px
}

.wi_li_img {
    text-align: center
}

.wf_li_form_image .csslider > .arrows {
    z-index: 2;
    left: 6.5%;
    width: 85%;
    margin: -153px auto;
    padding: 0;
    box-sizing: content-box;
    user-select: none;
    position: absolute !important
}

@media(max-width:1750px) and (min-width:992px) {
    .nowf span {
        width: 405px
    }

    #dvNoWflow .nowf span, #dvNoNotif .nowf span, #dvNotifications .nowf span {
        width: 250px !important
    }
}

.dash_profile_pic_container div {
    display: inline-block;
    width: 80px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden !important
}

.you_are_dash_profile_pic_container div {
    width: 200px
}

.dah_buckup_width {
    width: 49% !important
}

    .dah_buckup_width .perf-img img {
        width: 140px !important
    }

.dash_start_perf span {
    display: block;
    line-height: 38px
}

.wf_list_title {
    position: relative;
    top: -7px
}

.wf_list_icons {
    color: #000;
    font-size: 35px;
    padding: 0 10px 0 5px
}

.workflow_tool_bar_header .cwf_fields_name {
    font-weight: 600
}

.cwf_fields_name {
    padding-left: 10px;
    font-family: "Open Sans",sans-serif;
    font-size: 14px
}

.wid_two_two {
    border-radius: 3px;
    background-color: #fff;
    width: 36.8%;
    height: 305px;
    float: left;
    display: block;
    margin-top: -2px;
    margin-left: -2px
}

.wid_two_isto_three {
    border-radius: 3px;
    background-color: #fff;
    width: 36.7%;
    height: 464px;
    float: left;
    display: block;
    margin-top: -2px;
    margin-left: -2px
}

.dash_show_wid {
    position: absolute !important;
    margin: .25% !important
}

.dash_one_four {
    width: 24.5% !important;
    height: 23.5% !important
}

.dash_one_four_two {
    width: 24.5% !important;
    height: 48.5% !important
}

.dash_one_isto_three {
    width: 24.5% !important;
    height: 73.5% !important
}

.dash_three_two {
    width: 74.5% !important;
    height: 48.5% !important
}

.dash_three_isto_three {
    width: 74.5% !important;
    height: 73.5% !important
}

.dash_two_isto_three {
    width: 49.5% !important;
    height: 73.5% !important
}

.dash_half_width {
    width: 49.5% !important;
    height: 48.5% !important
}

.wi_sidebar_container {
    z-index: 100;
    width: 400px;
    height: 100%;
    right: 5px;
    float: right;
    position: fixed;
    top: 60px;
    background: #f9f9f9;
    border: 1px solid #c8c8c8;
    box-shadow: none;
    display: none;
    box-sizing: border-box
}

.wi_sidebar_container_close {
    float: right;
    position: absolute;
    top: 8px;
    right: 10px;
    color: #a9a9a9
}

.wi_sidebar_title {
    font-size: 15px;
    padding: 5px 0 0;
    margin: 0;
    border-bottom: 1px solid #bebdbf;
    color: #4a4a4a;
    font-family: Muli,sans-serif;
    display: flex;
    align-items: center;
    height: 30px;
    letter-spacing: .5px
}

.wi_sidebar_widname {
    font-size: 14px;
    padding: 5px 0;
    color: #525252;
    font-weight: 600
}

.wi_sidebar_wid_details {
    padding: 5px 15px
}

.wi_sidebar_desc {
    font-size: 13px;
    color: #777;
    line-height: 18px
}

.wi_show_sidebar {
    display: block !important
}

.hidden_field_container {
    text-align: right
}

    .hidden_field_container i {
        padding-right: 5px
    }

.ext_api_container {
    width: 97% !important;
    margin: 30px auto !important
}

#dvMyWorkflows.dash_two_isto_three {
    left: 50.25% !important
}

.dash_design_switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 16px
}

    .dash_design_switch input {
        opacity: 0;
        width: 0;
        height: 0
    }

.dash_design_switch_slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    transition: all .4s ease 0s;
    border: 1px solid #fb4f37
}

    .dash_design_switch_slider::before {
        position: absolute;
        content: "";
        height: 10px;
        width: 10px;
        left: 2px;
        bottom: 2px;
        transition: all .4s ease 0s;
        background-color: #fb4f37
    }

.dash_design_switch input:checked + .dash_design_switch_slider {
    border: 1px solid #00731f
}

    .dash_design_switch input:checked + .dash_design_switch_slider::before {
        background-color: #00731f
    }

    .dash_design_switch input:checked + .dash_design_switch_slider::before {
        transform: translateX(16px)
    }

.dash_design_switch_slider.dash_design_round {
    border-radius: 34px
}

    .dash_design_switch_slider.dash_design_round::before {
        border-radius: 50%
    }

.tooltip.bottom {
    padding: 5px 0;
    margin-top: 3px
}

    .tooltip.bottom .tooltip-arrow {
        top: 0;
        left: 50%;
        margin-left: -5px;
        border-width: 0 5px 5px;
        border-bottom-color: #2c2c2c
    }

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: left;
    background-color: #2c2c2c;
    border-radius: 4px
}

@media only screen and (max-width:1400px) {
    .wi_metric_name {
        padding: 2px 0 !important;
        font-size: 11px !important;
        line-height: 13px;
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-word;
        max-height: 40px;
        line-height: 12px !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    .wi_report_metric {
        overflow: hidden;
        width: 13%;
        border: 1px solid #e6e6e6;
        border-radius: 8px;
        text-align: center;
        margin: .5% 1% !important;
        height: 90px !important;
    }

    /*.wi_report_metric {
        margin: .25% 1% !important;
        height: 55px !important
    }*/

    .wi_report_title {
        margin: 5px 0 0 5px !important
    }

    .wi_metric_count {
        font-size: 16px !important;
        padding: 0px !important
    }

    .wi_chart_medium svg {
        max-height: 170px
    }

    .wi_chart_parameter {
        padding: 3px !important
    }
}

.wi_sidebar_title_list {
    display: inline-flex;
    list-style: none;
    justify-content: space-between;
    padding-inline-start: 0;
    margin-block-start: 8px;
    margin-block-end: 0
}

    .wi_sidebar_title_list li {
        height: 25px;
        padding: 0 14px;
        cursor: pointer
    }

.wi_sidebar_list_active {
    border-bottom: 3px solid #1565c0
}

.wid_cancel {
    color: #777;
    padding-right: 10px;
    text-decoration: underline;
    font-size: 14px
}

.wid_sid_select {
    width: 100%;
    height: 35px;
    border-radius: 3px;
    font-size: 14px;
    color: #777
}

.wi_sid_label {
    font-size: 14px;
    line-height: 30px;
    color: #525252;
    font-weight: 6
}

#wi_sid_properties {
    display: none
}

.new_dash_one_isto_two .wi_report_metric {
    width: 46%;
    height: 65px !important
}

.new_dash_one_isto_two .wi_metric_name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.new_dash_one_isto_two .wi_report_metric_flex {
    width: 100%;
    float: left;
    height: calc(100% - 28px);
    overflow: hidden auto;
}

.wi_report_metric:nth-child(10n+1) .wi_metric_count {
    background-image: linear-gradient(to right,#ff5255,#ff786c)
}

.wi_report_metric:nth-child(10n+2) .wi_metric_count {
    background-image: linear-gradient(to right,#2c5ef5,#8062fc)
}

.wi_report_metric:nth-child(10n+3) .wi_metric_count {
    background-image: linear-gradient(to right,#13b7b1,#1de0bd)
}

.wi_report_metric:nth-child(10n+4) .wi_metric_count {
    background-image: linear-gradient(to right,#fe607f,#f33366)
}

.wi_report_metric:nth-child(10n+5) .wi_metric_count {
    background-image: linear-gradient(to right,#ff681a,#ffbe1f)
}

.wi_report_metric:nth-child(10n+6) .wi_metric_count {
    background-image: linear-gradient(to right,#07a3b7,#00defa)
}

.wi_report_metric:nth-child(10n+7) .wi_metric_count {
    background-image: linear-gradient(to right,#0487e8,#0ba5ee)
}

.wi_report_metric:nth-child(10n+8) .wi_metric_count {
    background-image: linear-gradient(to right,#af3ac1,#ef79f4)
}

.wi_report_metric:nth-child(10n+9) .wi_metric_count {
    background-image: linear-gradient(to right,#d89001,#ffad31)
}

.wi_report_metric:nth-child(10n+10) .wi_metric_count {
    background-image: linear-gradient(to right,#525252,#818181)
}

.DroppedElement .selected_widget {
    border: 1px solid #1565c0
}

.wid_prop_hide {
    display: none
}

.wid_prop_show {
    display: block !important
}

.wi_chart_medium {
    width: 96%;
    margin: 0 auto
}

.wi_chart_container {
    background: #fff;
    width: 74%;
    height: 48%;
    overflow-x: auto;
    display: flex;
    flex-direction: column
}

.wi_report_count {
    width: 100%;
    float: left;
    min-height: 80px
}

.wi_dash_report_container {
    background: #fff;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.wi_report_metric_container {
    background: #fff;
    width: 74%;
    height: 24%;
    top: .25%;
    left: .25%;
    position: absolute;
    margin: .5%
}

/*.wi_report_metric_flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    border-radius: 3px;
    height: calc(100% - 28px) !important;
    overflow: hidden auto !important;
}*/

.wi_report_title {
    font-size: 16px;
    margin: 10px
}

.wi_report_metric {
    width: 13%;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    text-align: center;
    margin: .5% 3%;
    height: 60px
}

.wi_metric_name {
    width: 100%;
    padding: 2px !important;
    text-overflow: ellipsis;
    font-size: 10px !important;
    overflow: hidden;
    word-break: break-word;
    max-height: 40px;
    line-height: 12px !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.wi_metric_count {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 5px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px
}

.dash_three_isto_three .wi_chart_medium svg {
    max-height: 260px
}

.wi_chart_medium svg {
    max-height: 200px
}

.wi_full_chart_container {
    overflow-x: auto
}

.wi_chart_parameter {
    display: flex;
    align-items: center;
    padding: 10px
}

    .wi_chart_parameter .chart-notava {
        text-align: center
    }

        .wi_chart_parameter .chart-notava img {
            width: 75%;
            height: 200px
        }

    .wi_chart_parameter .graph-sample-screen {
        display: none
    }

.wi_parameter {
    padding: 0 5px;
    display: flex;
    align-items: center
}

.wi_color_indicator {
    width: 20px;
    height: 10px;
    background: red;
    margin: 0 5px
}

.wi_sid_btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 10px
}

.wi_sid_cancel_btn {
    color: #777;
    text-decoration: underline;
    margin-right: 10px
}

.wi_sid_save_btn {
    padding: 2px 10px;
    color: #fff;
    border-radius: 3px
}

.view_current_dashboard {
    position: absolute;
    top: 14px;
    right: 5.6%
}

.update_all_users_widgets {
    position: absolute;
    top: 18px;
    right: 18.5%;
    font-size: 13px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: #676767
}

    .update_all_users_widgets .lab {
        padding: 0 10px 0 0
    }

.view_curr_dash_btn {
    padding: 3px 8px;
    background: #06921e;
    color: #fff;
    border-radius: 2px;
    display: inline-flex;
    font-size: 14px
}

    .view_curr_dash_btn span {
        padding-right: 5px;
        font-size: 20px;
        color: #fff
    }

.wi_cur_modal_container {
    width: 100%;
    height: 100%;
    background-color: #fff;
    float: left;
    min-height: 450px
}

.wi_cur_modal_title {
    display: block;
    width: 100%;
    float: left;
    height: 32px;
    border-bottom: 1px solid rgba(221,221,221,0.36);
    background-color: #fff
}

    .wi_cur_modal_title h2 {
        font-size: 18px;
        font-weight: 500;
        padding: 2px;
        float: left;
        box-sizing: border-box;
        margin: 4px 8px;
        width: 45%
    }

.wi_cur_modal_close {
    width: 53%;
    float: left;
    color: #4f5256
}

    .wi_cur_modal_close a {
        float: right;
        color: #9e9e9e;
        padding: 8px;
        font-size: 20px
    }

.wi_cur_modal_data {
    width: 100%;
    padding: 2px 10px;
    box-sizing: border-box;
    float: left
}

    .wi_cur_modal_data .connectedSortable {
        width: 24.5% !important;
        height: 125px !important
    }

    .wi_cur_modal_data .wi_elements_container {
        height: auto;
        margin: 0 auto;
        width: 100% !important
    }

    .wi_cur_modal_data .ele_remove_small {
        display: none !important
    }

    .wi_cur_modal_data .CC_widg_title {
        padding: 2px !important
    }

.show_profile_section#dvResetPassword .cadm_field_container {
    position: relative
}

.show_profile_section .help {
    top: 58% !important
}

#dvResetPassword .help {
    top: 112% !important
}

.help {
    display: none;
    width: 100%;
    background-color: rgba(51,51,51,0.91);
    color: #fff;
    text-align: center;
    position: absolute;
    z-index: 1;
    top: 112%;
    left: 0;
    padding: 5px 0;
    border: 1px solid #383838;
    border-radius: 3px
}

ul.helper-text {
    display: block;
    margin: 6px;
    font-size: 12px;
    line-height: 22px;
    color: #fff;
    list-style: none;
    padding: 5px
}

.help::after {
    content: "";
    font-family: "Material Design Icons";
    font-size: 50px;
    position: absolute;
    top: -31px;
    left: 0;
    color: #454545;
    padding: 0;
    margin: 0
}

ul.helper-text li {
    text-align: left
}

    ul.helper-text li.notvalid::before {
        content: "";
        font-family: Icomoon;
        font-size: 18px;
        width: 30px;
        height: 30px;
        position: relative;
        top: 2px;
        color: red
    }

    ul.helper-text li.valid::before {
        content: "ﶣ";
        font-family: Icomoon;
        font-size: 18px;
        width: 30px;
        height: 30px;
        position: relative;
        top: 2px;
        color: #1fd34a
    }

.required {
    font-style: normal;
    color: #db4437;
    font-size: 16px;
    position: relative;
    left: 2px
}

.profile-option-right {
    float: right;
    height: 60px;
    width: 475px
}

.profile-name {
    text-align: left
}

    .profile-name span {
        margin: 9px 0;
        display: inline-block;
        font-size: 15px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden
    }

.profile-pic {
    float: left;
    width: 45%;
    height: 40px;
    margin: 10px 0;
    cursor: pointer;
    border-radius: 20px;
    background: rgba(255,255,255,0.15) !important
}

    .profile-pic img {
        width: 40px;
        height: 40px;
        margin-right: 5px;
        border-radius: 50%;
        float: left;
        box-sizing: border-box;
        border: none !important
    }

.current a {
    color: #484d52;
    background: #fff
}

.com-cont {
    width: 100%;
    display: block;
    float: left;
    position: relative;
    text-align: center
}

    .com-cont a {
        float: left;
        color: gray;
        outline: 0
    }

        .com-cont a:hover {
            color: #000;
            opacity: 1
        }

        .com-cont a i {
            font-size: 24px
        }

.file_upload_div {
    width: 55%;
    margin: 15% auto;
    display: block
}

    .file_upload_div a {
        padding: 7px 15px;
        font-size: 16px;
        text-decoration: none;
        float: left;
        margin: 20px 10px 2px 0;
        border-radius: 2px;
        box-shadow: rgba(0,0,0,0.2) 0 4px 9px 0,rgba(0,0,0,0.19) 3px 3px 1px 0;
        outline: 0
    }

        .file_upload_div a.cancel {
            background-color: #fff;
            color: #000;
            outline: rgba(191,191,191,0.47) solid 1px;
            box-sizing: border-box
        }

        .file_upload_div a.upload {
            color: #fff
        }

        .file_upload_div a:active {
            box-shadow: transparent 0 4px 9px 0,transparent 3px 3px 1px 0;
            position: relative;
            top: 3px;
            left: 3px
        }

.cf-file-uploader label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 500
}

.cf-file-uploader .name-dis {
    display: inline-block;
    background-color: transparent;
    color: #4b4b4b;
    padding-left: 8px;
    margin-right: 6px;
    width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 30px;
    line-height: 36px;
    font-size: 16px;
    font-weight: 400
}

.cf-file-uploader input[type="file"] {
    position: absolute;
    left: -9999px
}

.cf-file-uploader .select {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: block;
    padding: 5px 10px;
    font-size: 30px;
    box-sizing: border-box;
    box-shadow: rgba(0,0,0,0.12) 0 1px 1.5px 0,rgba(0,0,0,0.24) 0 1px 1px 0;
    color: #fff
}

.setting {
    background-color: #e5e5e5;
    height: 32px;
    padding-top: 2px;
    border-bottom: 1px solid rgba(0,0,0,0.1)
}

    .setting .left {
        float: left
    }

    .setting .right {
        float: right
    }

.signature-cont {
    width: 100%;
    background: #fff;
    display: block;
    max-height: 440px
}

.profile-setting-container {
    width: 100%;
    min-height: 500px;
    margin: 20px 0 8px;
    position: relative;
    float: left;
    border-radius: 0;
    background-color: #fff;
    color: #4f5256
}

.profile-top-title {
    display: block;
    width: 100%;
    height: 42px;
    border-bottom: 1px solid rgba(221,221,221,0.36);
}

    .profile-top-title h1 {
        font-size: 16px;
        font-weight: 400;
        padding: 2px 15px;
        float: left;
        box-sizing: border-box;
        margin: 0;
        line-height: 38px
    }

.profile-box-close a {
    color: #9e9e9e;
    font-size: 22px;
    margin: 7px;
    float: right;
    outline: 0
}

    .profile-box-close a:hover {
        color: #515151
    }

.profile-subdcr-left-menu {
    background-color: #f7f7f7;
    width: 20%;
    min-height: 500px;
    float: left;
    box-sizing: border-box
}

.profile-option-list {
    margin: 0;
    padding: 0;
    list-style: none
}

    .profile-option-list li {
        padding: 15px;
        box-sizing: border-box;
        font-size: 14px;
        cursor: pointer
    }

        .profile-option-list li.active {
            background-color: #e4e4e4;
            margin-right: -1px;
            color: #000;
            font-weight: 400
        }

        .profile-option-list li:hover {
            background-color: #e4e4e4;
            margin-right: -1px;
            color: #000;
            font-weight: 400
        }

.profile-subdcr-right-container {
    background-color: #fff;
    width: 80%;
    min-height: 500px;
    float: left;
    box-sizing: border-box;
    z-index: 5
}

    .profile-subdcr-right-container h3 {
        font-size: 14px;
        font-weight: 400;
        float: left;
        margin: 10px 10px 35px
    }

.change-password-field {
    width: 78%;
    margin: 2% 11%;
    /*height: 50px;*/
    float: left;
    position: relative
}

    .change-password-field span {
        width: 100%;
        float: left;
        display: block;
        text-align: left;
        font-size: 12px;
        font-weight: 500;
        margin-bottom: 5px
    }

    .change-password-field a {
        padding: 8px;
        font-size: 14px;
        text-decoration: none;
        float: left;
        margin: 2px 10px 2px 0;
        border-radius: 4px;
        outline: 0
    }

        .change-password-field a:last-child {
            background-color: #fff;
            color: #000;
            border: 1px solid rgba(191,191,191,0.47);
            box-sizing: border-box
        }

        .change-password-field a:active {
            position: relative;
            top: 3px;
            left: 3px
        }

    .change-password-field input {
        width: 98%;
        float: left;
        display: block;
        text-align: left;
        font-size: 14px;
        padding: 5px;
        border-style: solid;
        border-color: #e0e0e0;
        border-image: initial;
        border-width: 0 0 1px;
        box-shadow: none
    }

.change-pro-picture {
    display: none
}

.change-profile-picture-container {
    float: left;
    display: block;
    width: 100%;
    padding: 2% 4%;
    box-sizing: border-box
}

.change-profile-picture-pic {
    float: left;
    display: block;
    margin-right: 4px;
    width: 110px;
    height: 110px;
    overflow: hidden
}

    .change-profile-picture-pic img {
        background: #fff;
        width: 110px;
        height: 110px;
        display: block;
        box-shadow: #ddd 2px 2px 2px;
        box-sizing: border-box;
        border: 1px solid #dadada !important
    }

.change-profile-picture-btn {
    float: left;
    display: block;
    width: 80%;
    padding: 0 5%;
    box-sizing: border-box
}

    .change-profile-picture-btn input {
        display: block;
        width: 90%
    }

    .change-profile-picture-btn a {
        padding: 8px;
        font-size: 14px;
        text-decoration: none;
        float: left;
        margin: 20px 10px 2px 0;
        border-radius: 4px;
        outline: 0
    }

        .change-profile-picture-btn a.cancel {
            background-color: #fff;
            color: #000;
            border: 1px solid rgba(191,191,191,0.47);
            box-sizing: border-box
        }

        .change-profile-picture-btn a:active {
            box-shadow: transparent 0 4px 9px 0,transparent 3px 3px 1px 0;
            position: relative;
            top: 3px;
            left: 3px
        }

.change-profile-crop {
    width: 500px;
    height: 350px;
    background-size: 100% 100%;
    float: left;
    margin: 5px 19.6%
}

    .change-profile-crop h3 {
        font-size: 16px;
        font-weight: 500;
        float: left;
        display: block;
        width: 100%;
        margin: 10px 10px 20px;
        border-bottom: 2px solid #30a8e6
    }

.signature-setting-container {
    width: 83%;
    min-height: 500px;
    margin: 1% 8% 8px;
    position: relative;
    float: left;
    border-radius: 3px;
    background-color: #fff;
    color: #4f5256;
    box-shadow: rgba(0,0,0,0.05) 0 2px 4px 0,rgba(0,0,0,0.05) 0 2px 10px 0
}

.signature-setup {
    width: 100%;
    float: left;
    display: none
}

.signature-container {
    width: 98%;
    float: left;
    margin: 1%
}

    .signature-container h2 {
        font-size: 15px;
        font-weight: 500;
        float: left;
        margin: 10px 10px 20px
    }

.signature-save-btn {
    width: 98%;
    float: left;
    margin: 1%
}

    .signature-save-btn a {
        padding: 7px 15px;
        font-size: 16px;
        text-decoration: none;
        float: left;
        margin: 2px 10px 2px 0;
        border-radius: 2px;
        box-shadow: rgba(0,0,0,0.2) 0 4px 9px 0,rgba(0,0,0,0.19) 3px 3px 1px 0;
        outline: 0
    }

.file-upload-list {
    height: 155px;
    width: 100%;
    overflow: auto;
    border-top: 1px solid #ececec
}

.upload-filename {
    display: block;
    vertical-align: top;
    width: 250px;
    font-size: .9em;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis
}

.field-file-upload-btn {
    width: 90%;
    float: left;
    margin: 0 5%
}

    .field-file-upload-btn label {
        display: inline-block;
        width: 390px;
        margin: 5px;
        height: 100px;
        font-weight: 500;
        float: left;
        position: absolute;
        z-index: 9999;
        left: 0;
        cursor: pointer
    }

    .field-file-upload-btn .name-dis {
        display: block;
        background-color: transparent;
        color: #4b4b4b;
        padding-left: 2px;
        width: 280px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 30px;
        font-size: 14px;
        font-weight: 400;
        text-align: left;
        margin-left: 40px;
        margin-top: 60px
    }

    .field-file-upload-btn input[type="file"] {
        position: absolute;
        left: -9999px
    }

    .field-file-upload-btn .select {
        width: 100px;
        height: 30px;
        display: block;
        padding: 4px 8px;
        font-size: 16px;
        box-sizing: border-box;
        box-shadow: rgba(0,0,0,0.12) 0 1px 1.5px 0,rgba(0,0,0,0.24) 0 1px 1px 0;
        color: #fff;
        font-weight: 400;
        text-align: left
    }

.upload-btn-cont {
    width: 100%;
    display: block;
    float: left;
    text-align: center
}

    .upload-btn-cont a {
        color: #fff;
        padding: 7px 10px;
        border-radius: 2px;
        box-shadow: rgba(0,0,0,0.2) 0 4px 9px 0,rgba(0,0,0,0.19) 3px 3px 1px 0;
        display: block;
        float: left;
        font-size: 12px;
        margin: 13px 42.8%
    }

        .upload-btn-cont a:active {
            top: 2px;
            position: relative;
            box-shadow: rgba(0,0,0,0.2) 0 4px 9px 0,rgba(0,0,0,0.19) 3px 3px 1px 0
        }

.no-btn {
    position: absolute;
    bottom: 30px;
    font-size: 16px;
    text-align: center;
    margin: 0 auto;
    left: 40%;
    color: #4a90e2
}

    .no-btn:hover {
        color: #529aef
    }

.cf_maincontainer .back-btn i {
    font-size: 20px !important
}

.cf_maincontainer .back-btn {
    margin-top: 4px;
    margin-left: 15px;
    z-index: 1
}

.maingrid-import-cont {
    width: 500px;
    height: 200px;
    background: #fff;
    border-radius: 2px;
    position: relative;
    padding: 5px 0;
    margin: 5% auto;
    border: 1px solid transparent;
    box-shadow: rgba(0,0,0,0.32) 0 4px 8px,rgba(0,0,0,0.4) 0 8px 40px;
    box-sizing: border-box
}

    .maingrid-import-cont .title {
        width: 100%;
        display: block;
        border-bottom: 1px solid rgba(221,221,221,0.36);
        float: left
    }

        .maingrid-import-cont .title h2 {
            margin: 5px 8px;
            font-size: 20px;
            width: 88%;
            float: left;
            font-weight: 400
        }

        .maingrid-import-cont .title .close-btn {
            float: left
        }

            .maingrid-import-cont .title .close-btn a {
                margin: 3px 10px;
                display: block;
                font-weight: 500;
                font-size: 22px;
                color: #9e9e9e
            }

.maingrid-import-btn {
    float: left;
    display: block;
    width: 100%;
    padding: 5% 10%;
    box-sizing: border-box
}

.cf-file-uploader label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 500
}

.cf-file-uploader .select {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: block;
    padding: 5px 10px;
    font-size: 30px;
    box-sizing: border-box;
    box-shadow: rgba(0,0,0,0.12) 0 1px 1.5px 0,rgba(0,0,0,0.24) 0 1px 1px 0;
    color: #fff
}

.cf-file-uploader input[type="file"] {
    position: absolute;
    left: -9999px
}

.cf-file-uploader .name-dis {
    display: inline-block;
    background-color: transparent;
    color: #4b4b4b;
    padding-left: 8px;
    margin-right: 6px;
    width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 30px;
    line-height: 36px;
    font-size: 16px;
    font-weight: 400
}

.log-up-msg {
    font-size: 12px;
    display: block;
    margin-top: -15px;
    text-align: center;
    color: rgba(255,0,0,0.7)
}

.maingrid-import-btn a.upload {
    color: #fff
}

.maingrid-import-btn a {
    padding: 7px 15px;
    font-size: 16px;
    text-decoration: none;
    float: left;
    margin: 15px 10px 2px 0;
    border-radius: 2px;
    box-shadow: rgba(0,0,0,0.2) 0 4px 9px 0,rgba(0,0,0,0.19) 3px 3px 1px 0;
    outline: 0
}

.ss-addusr-cont .header {
    width: 100%;
    display: block;
    border-bottom: 1px solid rgba(221,221,221,0.36);
    float: left
}

    .ss-addusr-cont .header h2 {
        margin: 5px 8px;
        font-size: 20px;
        width: 93%;
        float: left;
        font-weight: 400
    }

.sec-set-user-field {
    width: 40%;
    margin: 1% 5%;
    height: 70px;
    float: left;
    position: relative
}

    .sec-set-user-field span {
        width: 100%;
        float: left;
        display: block;
        text-align: left;
        font-size: 15px;
        margin-bottom: 5px
    }

    .sec-set-user-field input {
        width: 98%;
        float: left;
        text-align: left;
        font-size: 15px;
        padding: 5px;
        border-style: solid;
        border-color: #e0e0e0;
        border-image: initial;
        border-width: 0 0 1px;
        box-shadow: none
    }

div.radio-check-group {
    border-radius: 2px;
    float: left;
    width: 55%;
    display: block;
    padding: 8px 0 0;
    box-sizing: border-box;
    margin-left: 31px
}

.sec-set-user-field {
    width: 40%;
    margin: 1% 5%;
    height: 60px;
    float: left;
    position: relative
}

.workflow-detail-cont {
    border-radius: 8px;
    background-color: #fff;
    color: #4f5256;
    box-shadow: rgba(0,0,0,0.05) 0 2px 4px 0,rgba(0,0,0,0.05) 0 2px 10px 0;
    width: 99%;
    margin: 5px;
    float: left;
    display: block;
    padding-bottom: .2%;
    position: relative
}

    .workflow-detail-cont .title, .workflow-html-edtior .title {
        width: 100%;
        display: block;
        border-bottom: 1px solid rgba(221,221,221,0.36);
        float: left
    }

        .workflow-detail-cont .title h2, .workflow-html-edtior .title h2 {
            margin: 8px;
            font-size: 16px;
            font-weight: 600;
            float: left
        }

.wb-api .select-with-search {
    width: 235px
}

.workflow-data-value-field .select-with-search {
    width: 55%;
    float: left;
    display: block
}

.workflow-record-table {
    float: left;
    width: 99%;
    overflow-x: auto;
    box-sizing: border-box;
    margin: 5px
}

.wb-api .workflow-record-table table {
    border-spacing: 0;
    width: 90%;
    margin: 5px auto
}

    .wb-api .workflow-record-table table tr th {
        background-color: #f0f0f0;
        vertical-align: middle;
        border-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #f0f0f0;
        padding: 5px 10px;
        line-height: 1.42857;
        font-weight: 500;
        font-size: 14px;
        position: relative;
        text-align: unset
    }

.workflow-record-table table td {
    height: 40px;
    border-bottom: 1px solid #f4f4f4;
    padding: 0 5px;
    position: relative;
    min-width: 60px
}

.one-to-many-add-row {
    width: 100%;
    float: left;
    position: relative;
    height: 58px
}

    .one-to-many-add-row a {
        background-color: #d14836;
        border-style: solid;
        border-color: #b0281a;
        border-image: initial;
        border-width: 1px 0;
        display: block;
        float: left;
        padding: 5px;
        border-radius: 3px;
        color: #fff;
        margin: 10px 5px;
        font-size: 14px;
        min-width: 60px;
        text-align: center
    }

.workflow-record-table table td input {
    width: auto;
    float: left;
    display: block;
    text-align: left;
    font-size: 14px;
    padding: 6px 30px 6px 6px;
    border-style: solid;
    border-color: #e0e0e0;
    border-image: initial;
    border-width: 0 0 1px;
    appearance: none;
    margin: 0;
    box-sizing: border-box;
    color: #636367
}

.workflow-record-table table td i:hover {
    opacity: 1
}

.workflow-record-table table td > a > i {
    font-size: 25px;
    opacity: .4;
    margin: 0 15px;
    color: #000
}

.sos-cont {
    width: 475px;
    background: #fff;
    padding: 16px;
    height: 500px;
    position: relative;
    margin: 0 auto;
    border-radius: 5px;
    box-shadow: rgba(0,0,0,0.5) 0 0 8px;
    box-sizing: border-box
}

.sos-cls {
    display: block;
    float: right;
    color: #1d1d1d;
    font-size: 25px;
    margin-top: -15px;
    margin-right: -5px
}

.hvng-prbm {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    font-size: 20px;
    line-height: 1.5
}

    .hvng-prbm img {
        width: 65%;
        height: 50%
    }

    .hvng-prbm p, .atmt-frm p {
        font-weight: 600;
        color: #383838
    }

    .hvng-prbm .btn, .atmt .btn, .cntfrm .btn {
        font-size: 14px;
        background: #4a90e2;
        padding: 10px 15px;
        color: #fff;
        width: 32%;
        left: 32%;
        bottom: 35px;
        position: absolute;
        text-align: center;
        box-shadow: rgba(0,0,0,0.5) 0 0 2px
    }

.atmt {
    margin-top: 50px
}

.atmt-frm {
    width: 90%;
    margin: 25px 5%
}

.atmt-frm-fld {
    margin: 10px 0
}

.atmt .btn {
    width: 20%;
    left: 37%
}

.upld {
    width: 66%;
    float: left
}

.upld-img {
    float: left;
    width: 34%;
    text-align: right;
    padding-top: 18px;
    box-sizing: border-box
}

.atmt-frm-fld .select {
    padding: 15px;
    border: 2px solid #e6e7f0;
    border-radius: 50%;
    font-size: 20px;
    width: 28px;
    height: 28px;
    margin-right: 10px;
    text-align: center;
    display: inline-block;
    color: #4a90e2;
    cursor: pointer
}

.atmt textarea {
    max-height: 100px;
    min-height: 100px;
    max-width: 98%;
    min-width: 98%;
    background: #f7f7f7;
    border-radius: 3px;
    border: 1px solid #e6e7f0;
    font-family: "Open Sans",sans-serif !important
}

.cntfrm {
    margin-top: 50px
}

    .cntfrm .btn {
        width: 18%;
        left: 38%
    }

    .cntfrm p {
        font-size: 20px;
        text-align: center;
        margin-bottom: 50px
    }

    .cntfrm .atmt-frm-fld {
        margin: 15px 0
    }

    .cntfrm label {
        width: 33%;
        display: inline-block
    }

    .cntfrm input {
        margin: 5px 0;
        display: block;
        width: 93%;
        height: 35px;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: 4px;
        transition: border-color .15s ease-in-out 0s,box-shadow .15s ease-in-out 0s;
        padding: 0 10px;
        font-size: 13px
    }

.Dash6::before {
    content: ""
}

.wkf-library-li:nth-child(8n+1) {
    opacity: .8;
    background: linear-gradient(135deg,#ed5565 1%,#d62739 100%)
}

.wkf-library-li:nth-child(8n+2) {
    opacity: .8;
    background: linear-gradient(135deg,#a0d468 1%,#6eaf26 100%)
}

.wkf-library-li:nth-child(8n+3) {
    opacity: .8;
    background: linear-gradient(135deg,#fc6e51 1%,#db391e 100%)
}

.wkf-library-li:nth-child(8n+4) {
    opacity: .8;
    background: linear-gradient(135deg,#4fc1e9 1%,#0b9bd0 100%)
}

.wkf-library-li:nth-child(8n+5) {
    opacity: .8;
    background: linear-gradient(135deg,#48cfad 1%,#19a784 100%)
}

.wkf-library-li:nth-child(8n+6) {
    opacity: .8;
    background: linear-gradient(135deg,#ac92ec 1%,#7455c3 100%)
}

.wkf-library-li:nth-child(8n+7) {
    opacity: .8;
    background: linear-gradient(135deg,#5d9cec 1%,#0d65d8 100%)
}

.wkf-library-li:nth-child(8n+8) {
    opacity: .8;
    background: linear-gradient(135deg,#ec87c0 1%,#bf4c90 100%)
}

.wkf-btmbar {
    height: 39px;
    width: 100%;
    background: #fff;
    border-radius: 0 0 10px 10px
}

.wkf-library-li .bottom-initate {
    display: block;
    cursor: pointer;
    position: relative
}

    .wkf-library-li .bottom-initate .go, .wkf-library-li .bottom-initate .view {
        opacity: .5
    }

    .wkf-library-li .bottom-initate .go {
        font-size: 12px;
        margin: 8px 6px 0;
        display: block;
        float: right;
        text-decoration: none;
        border-radius: 2px;
        color: #5d5d5d;
        box-sizing: border-box
    }

        .wkf-library-li .bottom-initate .go i {
            font-size: 25px
        }

.ss-insert-user {
    width: 650px;
    min-height: 200px;
    background: #fff;
    margin: 10% 15%;
    border: 1px solid transparent;
    border-radius: 5px;
    box-shadow: rgba(0,0,0,0.32) 0 0 0,rgba(0,0,0,0.4) 0 0 6px;
    box-sizing: border-box;
    float: left
}

.ss-inert-title {
    width: 100%;
    float: left
}

    .ss-inert-title h2 {
        margin: 0;
        font-weight: 400;
        float: left;
        width: 85%;
        font-size: 20px;
        padding: 5px
    }

.ss-ins-close a {
    margin: 3px 10px;
    display: block;
    font-weight: 500;
    font-size: 22px;
    color: #9e9e9e;
    float: right
}

.ss-insert-user-cont {
    display: block;
    width: 90%;
    float: left;
    padding-bottom: 2%;
    margin: 2% 5%
}

.ss-insert-user-field {
    padding: 10px 20px;
    float: left;
    width: 100%;
    box-sizing: border-box;
    height: 72px;
    position: relative
}

.ss-insert-user-field-role {
    padding: 10px 20px;
    width: 100%;
    box-sizing: border-box;
    height: 72px;
    display: block;
    position: relative
}

.ss-insert-user-field span {
    display: block;
    text-align: left;
    font-size: 15px;
    margin-bottom: 5px
}

.ss-insert-user-field input, textarea {
    width: 98%;
    float: left;
    display: block;
    text-align: left;
    font-size: 14px;
    padding: 5px;
    border-style: solid;
    border-color: #e0e0e0;
    border-image: initial;
    border-width: 0 0 1px;
    box-shadow: none;
    outline: 0;
    font-family: "Open Sans",sans-serif !important
}

    .ss-insert-user-field input::placeholder {
        color: #cccaca
    }

.ss-insert-user-btn {
    text-align: center;
    width: 30%;
    margin: 9px 36.5%;
    float: left
}

    .ss-insert-user-btn a {
        display: block;
        padding: 7px;
        border-radius: 2px;
        text-align: center;
        text-decoration: none;
        font-size: 14px;
        margin: 3px 5px;
        border: 0;
        box-shadow: rgba(0,0,0,0.2) 0 4px 9px 0,rgba(0,0,0,0.19) 3px 3px 1px 0;
        outline: 0;
        float: left;
        color: #fff
    }

        .ss-insert-user-btn a:active {
            box-shadow: rgba(0,0,0,0) 0 4px 9px 0,rgba(0,0,0,0) 3px 3px 1px 0;
            position: relative;
            top: 3px;
            left: 3px
        }

.pop_warning_subtitle {
    padding: 10px;
    font-size: 14px
}

.page-title {
    padding: 0 16px;
    background-color: #fff;
    margin-bottom: 10px;
    width: 100%;
    position: relative;
    height: 50px;
    box-sizing: border-box;
    box-shadow: rgba(0,0,0,0.05) 0 2px 4px 0,rgba(0,0,0,0.05) 0 2px 10px 0
}

    .page-title h1 {
        width: 99%;
        line-height: 40px;
        font-size: 18px;
        font-weight: 400;
        margin: 0 auto;
        padding: 5px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        text-align: center;
        float: left
    }

.wkf-library-title {
    width: 100%;
    float: left;
    border-bottom: 1px solid rgba(172,172,172,0.14)
}

    .wkf-library-title h1 {
        font-size: 18px;
        font-weight: 400;
        float: left;
        margin: 0;
        padding: 15px
    }

.wkf-library-create {
    width: 23%;
    height: 160px;
    float: left;
    display: block;
    margin: 1%;
    color: #b1b1b1;
    position: relative;
    border: 2px dashed #b1b1b1;
    box-sizing: border-box;
    text-align: center;
    border-radius: 25px;
    font-size: 20px;
    cursor: pointer
}

    .wkf-library-create a {
        color: #a0a0a0
    }

.create-plus::before {
    content: ""
}

.i-chekbox::before {
    content: ""
}

.i-textarea::before {
    content: ""
}

.cwficon {
    font-size: 50px;
    display: block;
    width: 50px;
    height: 50px;
    margin: 30px auto 20px;
    font-weight: 100;
    border-radius: 50%;
    background: #5a9aeb;
    color: #fff
}

.SummHeadWFDashBoard {
    margin: -23px 0 18px 28px !important
}

    .SummHeadWFDashBoard span {
        font-size: 16px;
        top: 7px
    }

.post-approval-field {
    width: 78%;
    margin: 2% 11%;
    height: 50px;
    float: left;
    position: relative
}

.nowf {
    display: flex;
    justify-content: center
}

    .nowf img {
        width: 96%;
        height: 100%;
        display: none
    }

    .nowf span {
        position: absolute;
        align-self: center;
        text-align: center;
        color: #656666;
        top: 30%
    }

.nowftxt {
    font-size: 18px;
    line-height: 2
}

.nowf a {
    text-decoration: underline;
    color: #656666 !important
}

.menu-head-top {
    width: 250px;
    height: 45px;
    float: left;
    background-color: #fff;
    margin-top: 9px;
    position: relative;
    left: 40px;
    border-radius: 3px;
    box-shadow: rgb(0 0 0 / 22%) 3px 3px 1px 0, rgb(0 0 0 / 22%) 0 0 0 1px;
    margin-left: 200px;
}

    .menu-head-top h1 {
        font-size: 22px;
        font-weight: 400;
        margin: 2.3% 0;
        padding: 0;
        text-align: right;
        float: left;
        width: 100%;
        text-transform: uppercase
    }

    .menu-head-top span {
        font-size: 11px;
        padding: 4px 4px 2px;
        display: block;
        float: left;
        color: #4b4b4b;
        margin: 0 auto;
        width: 100%
    }

        .menu-head-top span a {
            padding: 2px 5px;
            background-color: #e00505;
            border-radius: 2px;
            color: #fff;
            box-sizing: border-box;
            font-size: 11px;
            margin: 0 6px
        }

.i-newrecord::before {
    content: ""
}

.i-newrecord1::before {
    content: ""
}

#lnkWorkflowEngine a:hover, #liLookupEngine a:hover, .support-lnk a:hover, #lnkWorkflowEngine a:hover i, #liLookupEngine a:hover i, .support-lnk a:hover i {
    color: #fff !important
}

#lnkWorkflowEngine a, #liLookupEngine a, #lnkWorkflowEngine a i, #liLookupEngine a i {
    color: #f82f54 !important
}

.support-lnk a, .support-lnk a i {
    font-weight: 600;
    color: rgba(246,150,6,0.82) !important
}

.agi_cs_re_cont {
    border-radius: 3px;
    background-color: #fff;
    color: #4f5256;
    float: left;
    display: block;
    box-shadow: rgba(0,0,0,0.05) 0 2px 4px 0,rgba(0,0,0,0.05) 0 2px 10px 0
}

    .agi_cs_re_cont .title {
        width: 100%;
        display: block
    }

        .agi_cs_re_cont .title h2 {
            margin: 10px;
            font-size: 15px;
            font-weight: 600
        }

.agi_cs_re_data_cont {
    width: 100%;
    float: left;
    height: calc(100% - 48px);
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 10px
}

.agi_cs_re_filter_cont {
    font-size: 14px;
    display: flex;
    align-items: center
}

.agi_filter_flex {
    display: flex;
    flex-grow: 4;
    justify-content: space-between;
    padding: 0 7px
}

.agi_filter_btn {
    text-align: right;
    margin: 13px 6px 0 0
}

    .agi_filter_btn a {
        padding: 5px 10px;
        color: #fff;
        border-radius: 3px
    }

.agi_re_field {
    width: 25%
}

.agi_date_filter {
    outline: 0;
    border: 1px solid #ccc;
    border-radius: 2px;
    font-size: 13px;
    text-indent: 4px;
    color: #4b5768;
    width: 90%;
    height: 30px !important
}

.agi_drop_down_filter {
    outline: 0;
    border: 1px solid #ccc;
    border-radius: 2px;
    font-size: 14px;
    height: 35px;
    color: #4b5768;
    width: 90%
}

.agi_cs_re_data_cont .report-table table tr th {
    font-size: 13px !important
}

.agi_cs_re_data_cont .report-table table tr td {
    font-size: 13px !important
}

.agi_re_field div {
    padding: 0 0 3px
}

.agi_cs_re_cont .report-table table thead .sorting {
    border-bottom: 0 !important
}

.mp-main {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999
}

.mini-pop {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    width: 500px;
    border: 0;
    box-shadow: rgba(0,0,0,0.2) 0 8px 16px 0,rgba(0,0,0,0.19) 0 6px 20px 0;
    border-radius: 10px;
    position: relative;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    box-sizing: border-box;
    float: left;
    min-height: 200px;
    background: #fff
}

.mini-pop-cont {
    width: 96%;
    margin: 0 auto;
    padding: 0 10px 25px
}

.mini-pop-heading h2 {
    padding: 14px 29px;
    font-weight: 500;
    font-size: 20px;
    width: 85%;
    margin: 0;
    color: #1565c0 !important
}

.mini-pop-heading {
    background: #fff;
    border-radius: 7px 7px 0 0;
    border-bottom: 0;
    clear: both;
    width: 100%;
    float: left
}

.mini-pop-wel-cont {
    padding: 0 0 5px 30px;
    clear: both;
    color: #ff5722;
    font-family: Assistant,sans-serif
}

.mini-pop-forms {
    display: block;
    margin-bottom: 20px
}

.mini-pop-form-col2 {
    width: 50%
}

.mini-pop-sub-btn {
    width: 9%;
    margin: 15px auto;
    float: none
}

.mini-pop-place-color::-webkit-input-placeholder {
    color: #cfcfcf
}

.mini-pop-place-color {
    padding: 7px 4px !important
}

.mini-pop-field {
    color: #1565c0 !important
}

.mini-pop-btn {
    padding: 5px 10px;
    font-size: 16px;
    color: #fff;
    border-radius: 2px;
    box-shadow: rgba(0,0,0,0.2) 0 4px 9px 0,rgba(0,0,0,0.19) 3px 3px 1px 0;
    background: #1565c0 !important;
    margin-top: 20px !important
}

.close-mini-pop {
    position: absolute;
    right: 6px;
    top: 6px
}

    .close-mini-pop i {
        color: #616365;
        font-size: 18px
    }

.heigth-auto {
    height: auto
}

.mini-modal-dialog {
    width: 500px
}

.mp-field {
    padding: 10px 20px;
    float: left;
    width: 100%;
    box-sizing: border-box;
    height: 72px;
    position: relative
}

.mp-btn {
    padding: 20px 20px 0;
    float: right;
    width: 100%;
    box-sizing: border-box;
    text-align: center
}

    .mp-btn a {
        text-align: right
    }

.mp-field input {
    width: 98%;
    float: left;
    display: block;
    text-align: left;
    font-size: 14px;
    padding: 5px;
    border-style: solid;
    border-color: #e0e0e0;
    border-image: initial;
    border-width: 0 0 1px;
    box-shadow: none;
    outline: 0
}

.mp-field span {
    display: block;
    text-align: left;
    font-size: 15px;
    margin-bottom: 5px
}

.dash-initate-popup {
    width: 885px;
    height: 500px;
    background: #fff;
    border-radius: 2px;
    position: relative;
    padding: 5px;
    margin: 5% auto;
    border: 1px solid rgba(0,0,0,0.12);
    box-sizing: border-box
}

.dash-initiate-pop-cont {
    width: 100%;
    height: 400px
}

.dash-initiate-pop-con-empty {
    width: 100%;
    display: block;
    margin: 20% 0;
    text-align: center;
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    color: #9a9898
}

.dash-initiate-popup .header {
    width: 100%;
    display: block;
    border-bottom: 1px solid rgba(221,221,221,0.36);
    float: left
}

.dash-initate-popup .header h2 {
    margin: 5px 8px;
    font-size: 18px;
    width: 93%;
    float: left;
    font-weight: 400
}

.dash-initate-popup .header .close-btn {
    float: left
}

    .dash-initate-popup .header .close-btn a {
        margin: 3px 10px;
        display: block;
        font-weight: 500;
        font-size: 22px;
        color: #9e9e9e
    }

        .dash-initate-popup .header .close-btn a:hover {
            color: #515151
        }

.main-grid-pagination {
    float: left;
    margin: 2px 0;
    width: 100%
}

.main-grid-pagination-btm {
    float: right
}

.main-grid-delete {
    float: left;
    margin: 1px 5px 0 0;
    width: 90px
}

    .main-grid-delete a {
        float: left;
        padding: 2px;
        border-style: solid;
        border-color: #ddd;
        border-image: initial;
        border-width: 1px 1px 1px 0;
        height: 23px;
        background: #f5f5f5
    }

        .main-grid-delete a i {
            font-size: 22px;
            color: #888
        }

        .main-grid-delete a:last-child {
            border-right: 1px solid #ddd
        }

        .main-grid-delete a:first-child {
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
            border-left: 1px solid #ddd
        }

        .main-grid-delete a:last-child {
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px
        }

        .main-grid-delete a i:hover {
            color: #000
        }

.grid-left-right-arrow {
    float: left;
    border-radius: 2px;
    font-size: 12px;
    box-shadow: none;
    background-color: #f5f5f5;
    background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
    color: #444;
    border: 1px solid rgba(0,0,0,0.1);
    margin: 8px
}

    .grid-left-right-arrow a {
        box-shadow: none;
        width: 35px;
        font-size: 12px;
        height: 26px;
        padding: 5px 8px;
        float: left;
        background-color: #f5f5f5;
        background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
        color: #333;
        border-right: 1px solid #dcdcdc;
        outline: 0;
        box-sizing: border-box
    }

        .grid-left-right-arrow a:last-child {
            border-right: 0
        }

    .grid-left-right-arrow a {
        color: #888
    }

        .grid-left-right-arrow a i {
            margin: 0;
            font-size: 20px
        }

        .grid-left-right-arrow a:hover {
            background: #fff;
            color: #000
        }

    .grid-left-right-arrow .gri-goto-page {
        box-shadow: none;
        width: 50px;
        height: 26px;
        float: left;
        background-color: #f5f5f5;
        background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
        color: #333;
        border-right: 1px solid #dcdcdc;
        outline: 0
    }

        .grid-left-right-arrow .gri-goto-page .main-grid-top-select select {
            border: 0;
            font-size: 12px;
            background: transparent;
            outline: 0;
            width: 100%;
            margin: 0;
            height: 26px
        }

        .grid-left-right-arrow .gri-goto-page:hover, .grid-left-right-arrow div .main-grid-top-select select:hover {
            background: #fff
        }

        .grid-left-right-arrow .gri-goto-page option {
            font-size: 14px;
            line-height: 20px
        }

        .grid-left-right-arrow .gri-goto-page > .main-grid-top-select {
            position: relative;
            float: left;
            width: 100%;
            margin: 0;
            height: 26px
        }

            .grid-left-right-arrow .gri-goto-page > .main-grid-top-select::after {
                content: "";
                font-family: "Material Design Icons";
                position: absolute;
                right: 0;
                bottom: 0;
                font-size: 18px;
                pointer-events: none;
                width: 20px;
                height: 26px;
                background: #f5f5f5;
                padding: 4px 1px;
                box-sizing: border-box
            }

    .grid-left-right-arrow div > .main-grid-top-select:hover::after {
        background-color: #fff
    }

.grid-no-record {
    float: left;
    display: block
}

    .grid-no-record .main-grid-rpp select {
        border: 0;
        font-size: 16px;
        background: transparent;
        outline: 0;
        margin: 2px 0 0
    }

    .grid-no-record div:hover, .grid-left-right-arrow div .main-grid-top-select select:hover {
        background: #fff
    }

    .grid-no-record option {
        font-size: 14px;
        line-height: 20px
    }

    .grid-no-record .main-grid-rpp {
        position: relative;
        float: left;
        width: 35%
    }

        .grid-no-record .main-grid-rpp::after {
            content: "";
            font-family: "Material Design Icons";
            position: absolute;
            right: -5px;
            bottom: 9px;
            font-size: 18px;
            pointer-events: none;
            width: 22px;
            height: 25px;
            background: #f5f5f5;
            padding: 5px 1px;
            box-sizing: border-box
        }

        .grid-no-record .main-grid-rpp:hover::after {
            background-color: #fff
        }

        .grid-no-record .main-grid-rpp select:hover {
            background: #fff
        }

        .grid-no-record .main-grid-rpp select {
            font-size: 12px;
            background: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1) #f5f5f5;
            box-shadow: none;
            width: 60px;
            height: 27px;
            float: left;
            color: #333;
            border: 1px solid #dcdcdc;
            outline: 0;
            margin: 8px 5px;
            border-radius: 2px
        }

.recrd-per-page {
    float: left;
    display: block;
    margin: 13px 3px;
    font-size: 12px
}

.page-no-info-cont {
    display: block;
    float: left;
    font-size: 12px
}

    .page-no-info-cont span:first-child {
        padding: 13px 5px;
        display: block;
        float: left
    }

    .page-no-info-cont span:last-child {
        margin: 8px 2px;
        display: block;
        float: left;
        padding: 4.5px;
        background: #f2f2f2;
        border: 1px solid #ddd;
        border-radius: 2px;
        font-size: 12px
    }

.record-no-info-cont {
    display: block;
    float: left;
    margin-right: 15px;
    font-size: 12px
}

    .record-no-info-cont span:first-child {
        padding: 13px 5px;
        display: block;
        float: left
    }

    .record-no-info-cont span:last-child {
        margin: 8px 5px;
        display: block;
        float: left;
        padding: 4.5px;
        background: #f2f2f2;
        border: 1px solid #ddd;
        border-radius: 2px;
        font-size: 12px
    }

.workflow-main-grid {
    width: 100%;
    background: #fff;
    display: block;
    border-radius: 2px;
    box-shadow: rgba(20,20,20,0.18) 0 0 2px
}

    .workflow-main-grid table {
        margin: 0 auto;
        border-collapse: collapse;
        font-size: 13px;
        width: 100%
    }

    .workflow-main-grid tr > th {
        background-color: #f0f0f0;
        vertical-align: middle;
        color: #333;
        border-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #f0f0f0;
        padding: 10px 5px;
        line-height: 1.42857;
        font-weight: 500;
        font-size: 14px;
        z-index: 0;
        text-align: left
    }

        .workflow-main-grid tr > th:first-child .main-grid-check {
            left: 6px
        }

    .workflow-main-grid table tbody tr:hover {
        background-color: rgba(247,247,247,0.74)
    }

    .workflow-main-grid table tr > td {
        vertical-align: middle;
        color: #333;
        border-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #f0f0f0;
        padding: 8px 5px;
        line-height: 1.42857;
        text-align: left;
        min-width: 110px;
        font-size: 14px;
        font-weight: 400;
        box-sizing: border-box;
        cursor: pointer
    }

        .workflow-main-grid table tr > td.int {
            text-align: right;
            position: relative;
            float: left
        }

        .workflow-main-grid table tr > td:first-child {
            width: 100px;
            z-index: 0
        }

        .workflow-main-grid table tr > td:nth-child(2) {
            z-index: 0
        }

        .workflow-main-grid table tr > td:first-child a {
            color: #888;
            outline: 0;
            float: left
        }

            .workflow-main-grid table tr > td:first-child a:hover {
                color: #000
            }

            .workflow-main-grid table tr > td:first-child a i {
                float: left;
                font-size: 18px;
                padding: 2px 3px 0 0;
                box-sizing: border-box
            }

                .workflow-main-grid table tr > td:first-child a i.mdi-attachment {
                    transform: rotate(-90deg)
                }

            .workflow-main-grid table tr > td:first-child a.spanlik {
                width: 17px;
                height: 17px;
                display: block;
                float: left;
                font-size: 12px;
                position: relative;
                top: 2px;
                left: 5px;
                color: #888;
                border-radius: 50%
            }

            .workflow-main-grid table tr > td:first-child a:hover.spanlik {
                background-color: #ea6100;
                color: #fff;
                border-radius: 50%;
                width: 17px;
                height: 17px;
                left: 5px
            }

            .workflow-main-grid table tr > td:first-child a span {
                color: #888
            }

            .workflow-main-grid table tr > td:first-child a:hover span {
                color: #fff
            }

            .workflow-main-grid table tr > td:first-child a.tri-fr {
                display: block;
                float: left;
                width: 25px;
                height: 25px;
                position: relative
            }

            .workflow-main-grid table tr > td:first-child a.tri-to {
                display: block;
                float: left;
                width: 25px;
                height: 25px;
                position: relative
            }

                .workflow-main-grid table tr > td:first-child a.tri-to i:first-child {
                    font-size: 14px;
                    position: absolute;
                    top: 4px
                }

                .workflow-main-grid table tr > td:first-child a.tri-to i:nth-child(2) {
                    position: absolute;
                    font-size: 10px;
                    top: -1px;
                    left: 5px
                }

            .workflow-main-grid table tr > td:first-child a.tri-fr i:first-child {
                font-size: 10px;
                position: absolute;
                top: -1px;
                left: 1px
            }

            .workflow-main-grid table tr > td:first-child a.tri-fr i:nth-child(2) {
                position: absolute;
                font-size: 14px;
                top: 4px;
                left: 10px
            }

        .workflow-main-grid table tr > td:first-child input {
            float: left
        }

.desin-pral-cont {
    min-height: 100px;
    background-color: #fff;
    padding-bottom: 10px;
    float: left
}

    .desin-pral-cont .des-cont-tit {
        width: 100%;
        display: block;
        border-bottom: 1px solid rgba(221,221,221,0.36);
        float: left
    }

        .desin-pral-cont .des-cont-tit h2 {
            margin: 5px 8px;
            font-size: 18px;
            min-width: 20%;
            float: left;
            font-weight: 500
        }

.delproc {
    font-weight: 500;
    padding: 5px;
    border-radius: 4px;
    font-size: 13px !important;
    color: #f44336 !important
}

.desin-pral-cont .des-cont-tit .close-btn {
    float: right
}

    .desin-pral-cont .des-cont-tit .close-btn a {
        margin: 5px 10px 0;
        display: block;
        font-weight: 500;
        font-size: 22px;
        color: #9e9e9e
    }

.desin-pral-cont .des-cont-cond {
    width: 92%;
    float: left;
    margin: 1% 4%;
    box-sizing: border-box;
    padding: 10px;
    background: #fff;
    border-radius: 2px
}

.des-cont-cond table {
    display: block;
    width: 100%;
    float: left
}

    .des-cont-cond table tr {
        display: block;
        padding-bottom: 4px
    }

    .des-cont-cond table td {
        padding-right: 0;
        min-width: 60px
    }

        .des-cont-cond table td .adv-search-select {
            width: 190px
        }

        .des-cont-cond table td input {
            width: 215px;
            border-style: solid;
            border-color: #ddd;
            border-image: initial;
            border-width: 0 0 1px;
            outline: 0;
            font-size: 14px;
            height: 30px;
            margin-bottom: 0;
            font-weight: 400
        }

        .des-cont-cond table td a {
            color: #888;
            font-size: 20px
        }

            .des-cont-cond table td a:hover {
                color: #000
            }

.des-sect-del {
    width: 100%;
    float: left
}

    .des-sect-del a {
        float: right;
        color: #888;
        font-size: 22px
    }

        .des-sect-del a:hover {
            color: #000
        }

.des-cont-cond table td:nth-child(2) {
    max-width: 300px;
    width: 300px
}

.des-cont-cond table td:nth-child(3) {
    width: 160px
}

.des-add-prall-new {
    display: inline-block;
    line-height: 25px;
    font-weight: 300;
    padding: 5px 15px;
    box-sizing: border-box;
    border-radius: 2px;
    box-shadow: rgba(0,0,0,0.2) 0 4px 9px 0,rgba(0,0,0,0.19) 3px 3px 1px 0;
    margin: 10px;
    font-size: 16px !important;
    color: #fff !important
}

    .des-add-prall-new:active {
        position: relative;
        top: 3px;
        left: 3px
    }

.cf_checkbox .formError {
    left: 60px !important
}

.cf_menu_section .hint--info::after {
    min-width: 90px
}

.popup_body .recall_table_container .dataTables_scrollBody {
    max-height: 300px !important
}

.containment-wrapper .field-section.ui-widget-content {
    z-index: 1 !important
}

.cf_pagesection input#title {
    position: initial !important;
    z-index: 1 !important;
    padding: 0 10px !important;
    font-size: 14px !important;
    color: #242e3e !important;
    text-shadow: none !important;
    text-align: left !important
}

.cadm_user_list_container .role-name-cont {
    height: 95px
}

.cadm_user_list_container .role-name-in {
    align-items: center;
    justify-content: center;
    overflow: auto;
    display: flex !important
}

.accordin-collapse .drag-list {
    border: 0;
    background: #fff
}

.span_value {
    font-size: 14px;
    color: #868686 !important;
    padding: 0 13px !important
}

.onetomany_tablefield .span_value {
    padding: 0 !important
}

.signature_form .span_value {
    display: none
}

.archivebtn {
    margin-top: 10px;
    margin-left: 10px
}

#dvArchiveList {
    padding: 0 5px
}

    #dvArchiveList .select2.select2-container {
        width: 100% !important
    }

.arc_wf_name #dvArchiveList {
    width: 200px
}

    .arc_wf_name #dvArchiveList .dropdown-wrapper {
        left: 94% !important
    }

#dvArchiveList .select2-container.Single_select {
    border-radius: 4px;
    width: 125px;
    border: 1px solid #ced4da !important
}

#dvArchiveList .select2-container .select2-choice > .select2-chosen {
    padding: 4px !important;
    line-height: 28px !important
}

#dvArchiveList .select2-container .select2-choice .select2-arrow {
    line-height: 32px !important
}

div.dataTables_wrapper div.dataTables_length select {
    border-color: #ced4da
}

#arch_rec_back i {
    margin-left: -25px
}

.form_iniatator_details {
    position: relative;
    font-size: 13px;
    display: inline-flex;
    width: 100%;
    margin-left: auto;
    float: right;
    justify-content: flex-end;
    align-items: center;
    overflow: hidden;
}

.lmargin_4 {
    margin-left: 4px !important;
}

.google_drive {
    margin-top: 15px
}

.new_cus_maincontainer {
    width: calc(100vw - 0px) !important;
    margin-left: 0 !important
}

.cf_navbar.navbar-collapsed ~ .new_cus_maincontainer .create_workflow_heading, .cf_navbar.navbar-collapsed ~ .new_cus_maincontainer .wkf-cre-page-title {
    width: calc(100vw - 20px) !important
}

.new_cus_maincontainer .create_workflow_heading, .new_cus_maincontainer .wkf-cre-page-title {
    width: calc(100vw - 20px) !important
}

.new_cus_maincontainer .pbw_back {
    width: calc(100vw - 20px) !important
}

.select2-container--default .select2-selection--single, .select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid #ced4da !important
}

.select2-container .select2-selection--single, .select2-container--default.select2-container--focus .select2-selection--multiple {
    min-height: 34px;
    height: auto
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-block !important;
    padding: 0 !important;
    margin: 5px 1px 0 2px !important;
    position: relative !important;
    line-height: 15px !important;
    font-size: 13px !important;
    cursor: default !important;
    border-radius: 4px !important;
    color: #fff !important;
    top: 1px;
    border: 0 !important;
    word-break: break-all
}

.select2-container--default .select2-search--inline .select2-search__field {
    border: 0 !important
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid #ced4da !important;
    padding-bottom: 0 !important;
    height: auto
}

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        color: #fff !important;
        border: 0 !important
    }

.workflow-data-value-field .select-with-search .dropdown-wrapper {
    width: 0 !important
}

.workflow-data-value-field .select-with-search span {
    width: 100% !important;
    padding: 0 !important
}

.workflow-data-value-field .select2-selection.select2-selection--single {
    padding: 0 !important
}

.workflow-data-value-field .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 0 0 5px !important;
    text-align: left !important
}

.select2-container--default .select2-results > .select2-results__options {
    overflow-x: hidden
}

.select2-selection {
    font-size: 14px
}

    .select2-selection ul {
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 0
    }


.profile-subdcr-right-container .select2.select2-container.select2-container--default {
    margin-top: 10px;
    width: 250px !important;
}

.select2-container .select2-search--inline .select2-search__field {
    margin-top: 0 !important
}

.select2-container .select2-selection--multiple {
    min-height: 34px !important
}

.dropdown-wrapper {
    border-color: #888 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    left: 97%;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    width: 0 !important
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important
}

.cc-history-field-sec .dropdown-wrapper {
    top: 39% !important;
    left: 91% !important
}

[class*="width_15_per"] .dropdown-wrapper {
    left: 92% !important
}

[class*="width_10_per"] .dropdown-wrapper {
    left: 89% !important
}

[class*="width_5_per"] .dropdown-wrapper {
    left: 77% !important
}

.cc-math-table_common td:nth-child(2) .select2 .dropdown-wrapper {
    left: 77% !important
}

.cc-math-table_common td:nth-child(3) .select2 .dropdown-wrapper {
    left: 95% !important
}

.cc-math-table_common td:nth-child(4) .select2 .dropdown-wrapper {
    left: 95% !important
}

.cc-math-table_common td:nth-child(6) .select2 .dropdown-wrapper {
    left: 77% !important
}

.cc-math-table_common td:nth-child(7) .select2 .dropdown-wrapper {
    left: 86% !important
}

.str-cont-tbl td:nth-child(3) .select2 .dropdown-wrapper {
    left: 94% !important
}

.str-cont-tbl td:nth-child(4) .select2 .dropdown-wrapper {
    left: 90% !important
}

.date-oper-tbl td:nth-child(3) .select2 .dropdown-wrapper {
    left: 94% !important
}

.field-cond-man td:nth-child(2) .select2 .dropdown-wrapper {
    left: 84% !important
}

.field-cond-man td:nth-child(3) .select2 .dropdown-wrapper {
    left: 92% !important
}

.field-cond-man td:nth-child(4) .select2 .dropdown-wrapper {
    left: 92% !important
}

.field-cond-man td:nth-child(6) .select2 .dropdown-wrapper {
    left: 84% !important
}

.field-cond-man td:nth-child(7) .select2 .dropdown-wrapper {
    left: 92% !important
}

.select2-container .select2-selection--single .select2-selection__rendered {
    white-space: nowrap !important;
    word-break: break-word;
    user-select: all;
}

.wi_sid_input .select2.select2-container.select2-container--default {
    width: 100% !important;
}

.full_length_input_tbl table td input {
    width: 100% !important;
}

.full_length_input_tbl table td {
    border: 0px !important;
    padding: 5px !important;
}

.encry_container {
    position: relative;
}

.cadm_show_field {
    display: flex;
    justify-content: space-between;
}

.cf_navbar a:hover svg path {
    fill: #fff !important;
}

.cf_new_popup.warning_popup .popup_body {
    max-height: 300px;
    overflow: auto;
}

.before-add-options-form {
    text-align: right;
    width: 100%;
    margin: 10px 0;
}


.fo_col_exp_btn {
    background-color: rgb(122, 115, 115);
    cursor: pointer;
    color: rgb(255, 255, 255);
    white-space: nowrap;
    font-size: small;
    box-shadow: rgb(69, 90, 100) 0px 2px 7px -4px !important;
    margin-right: 2px;
    padding: 2px 5px;
    border-style: none;
    border-radius: 3px;
}

.sec_acc_row {
    margin-bottom: 10px;
    width: 100%;
}

.sec_acc_head {
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 5px;
}

.sec_accordion {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    background: #f7f6f6;
    height: 40px;
    border-radius: 2px;
    position: relative;
    color: #4c4c4c;
    cursor: pointer;
    z-index: 0;
    border: 1px solid #ddd;
}

.sec_acc_heading {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    height: 35px;
}

.fo_sec_acc_title {
    display: flex;
    align-items: center;
}

.sec_acc_heading h4 {
    margin: 0;
    font-size: 15px;
    color: #111 !important;
    border: 0;
    z-index: 2;
    font-weight: 600;
    display: inline-block;
    width: 550px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

.sec_acc_head_right {
    display: flex;
}

.sec_acc_right_cont_div {
    display: flex;
    align-items: center;
    padding-right: 10px;
    font-size: 14px;
}

.sec_acc_radio_btn {
    padding-right: 5px;
    padding-left: 5px;
}


div.sec_acc_body_content {
    display: none;
    background: #fff;
    width: 100%;
    /*padding: 20px 30px;*/
    font-size: 14px;
}

    div.sec_acc_body_content.show {
        display: block !important;
        border: 1px solid #d8d8d8;
        border-top: none;
    }

.fo_sec_acc_options {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 10px;
    width: 100% !important;
    flex-direction: column;
    padding: 5px 0px 5px 7px;
    border-radius: 0px;
    border: 1px solid #d8d8d8;
    background: #fff !important;
}

.sec_nav_btn_container {
    word-break: break-all;
    width: 100%;
    margin-bottom: 6px;
}

    .sec_nav_btn_container a {
        float: left;
        cursor: pointer;
        padding: 2px 5px;
        border: none;
        color: #454545;
        background: #dee4e8;
        border-radius: 3px;
        margin-right: 2px !important;
        margin-top: 2px !important;
        white-space: nowrap;
        font-size: small;
    }

        .sec_nav_btn_container a:hover {
            color: #fff;
            background-color: #1565c0;
        }

#dvSecAccOption {
    margin-top: 4px
}

.cf_progres_container {
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    position: absolute;
    border: 1px solid #ccc;
    padding: 3px;
    border-radius: 4px;
    height: 28px;
    width: 25%;
    z-index: 1;
    left: 10%;
    top: 59px;
    right: 15%;
    bottom: 0;
    margin: 0px auto;
    background-size: 70px 70px;
    animation: 9s shine linear infinite;
    background-color: #8e8b8c;
    display: none;
    text-align: center;
}

.progresbar_div {
    color: #ffffff;
    text-align: center;
}

@keyframes shine {
    to {
        background-position-x: -200%;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .cf_progres_container {
        flex-basis: auto;
        position: relative;
        height: 40px;
        width: 20%;
        z-index: 1;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: 0px auto;
    }
}

@media (min-width: 1025px) and (max-width: 1280px) {
    .cf_progres_container {
        flex-basis: auto;
        position: relative;
        height: 40px;
        width: 20%;
        z-index: 1;
        left: 0;
        top: 0;
        right: 25%;
        bottom: 0;
        margin: 0px auto;
    }
}

.bgloader_formcontnr .hide_text {
    background: #ededed;
    color: transparent;
    position: relative;
    overflow: hidden;
    margin: 1%;
    border-radius: 4px;
    height: 35px;
    width: 48%;
}

.user_textarea.hide_text {
    height: 80px !important;
}

.bgloader_formcontnr {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    flex-wrap: wrap;
    box-shadow: 0 1px 2px 1px rgb(0 0 0 / 8%), 0 -1px 3px 0 rgb(0 0 0 / 6%);
    background: #fff;
    top: 10px;
    margin-top: 15px;
}

.name_loadbox .hide_text {
    width: 50%;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
}

.user_checkbox.hide_text {
    width: 3% !important;
}

.user_single.hide_text {
    width: 100% !important;
}

.user_signature.hide_text {
    width: 100% !important;
    height: 80px !important;
}

.user_radio.hide_text {
    background: none !important;
    display: flex;
}

.user_radio1.hide_text {
    width: 20% !important;
    background: #ededed !important;
    position: relative;
    display: block;
    overflow: hidden;
    margin-top: 0px !important;
    margin-left: 0px !important;
}

.user_radio2.hide_text {
    width: 20% !important;
    background: #ededed !important;
    position: relative;
    display: block;
    overflow: hidden;
    margin-top: 0px !important;
}

.bgloader_formcontnr .hide_text::before {
    content: "";
    position: absolute;
    left: 0%;
    top: 0;
    height: 100%;
    width: 50px;
    background: linear-gradient(to right, #e2e2e2 25%, #d5d5d5 50%, #e2e2e2 100%);
    animation-name: gradient-animation;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    filter: blur(5px);
}

@keyframes gradient-animation {
    from {
        left: 0%;
    }

    to {
        left: 100%;
    }
}

.sec_opt_header {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 5px;
}

.sec_opt_header_title {
    color: #111;
    font-size: 15px;
    font-weight: bold;
    margin-left: 2px;
}

.t_margin_2 {
    margin-top: 2px;
}

.clrfctn_snd_cntr {
    display: flex;
}

.nowf span {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

span .nowftxt {
    font-size: 17px;
    color: #454545;
    margin-top: 13px;
}

.no_notify {
    margin-top: 20px;
}

    .no_notify a {
        color: #fff !important;
        padding: 5px 15px;
        text-decoration: none;
        border-radius: 3px;
        font-weight: 400;
    }

.nowftxt {
    font-size: 17px !important;
    color: #454545;
    margin-top: 13px;
    font-weight: 600;
    line-height: 25px !important;
}

.notify_botm_txt {
    color: #707173 /*#7e7f81*/;
    font-weight: 500;
    font-size: 14px;
    padding-top: 4px;
}

.clrfctn_imag_marg {
    margin: 5% auto !important
}

.un_comment {
    display: none !important;
}

.un_comment_icons {
    position: absolute;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    bottom: 10px;
}

.no_wflow {
    background: #fff;
    padding: 20px;
    width: 100%;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 195px);
    flex-direction: column;
}

.no_wf_img {
    height: 70%;
}

.no_wf_btn {
    padding: 8px 13px;
    color: #fff;
    border-radius: 3px;
    margin-top: 15px;
    font-weight: 400;
    font-size: 15px;
}

.no_wf_mrg {
    margin-top: 0 !important;
}

.int_wf_no_rec {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0 0 25px 0;
}

.no_imgee {
    opacity: 0.6;
    margin-bottom: 20px;
}

.approver_head_cntr {
    display: flex;
    align-items: center;
}

.steps_head {
    font-size: 14px;
    font-weight: 600;
    color: #5e5873;
}