@font-face {
    font-family: 'MyriadPro';
    src: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/myriadpro-light.eot);
    src: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/myriadpro-light.eot) format("embedded-opentype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/myriadpro-light.woff2) format("woff2"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/myriadpro-light.woff) format("woff"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/myriadpro-light.ttf) format("truetype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/myriadpro-light.svg#MyriadProLight) format("svg");
    font-style: normal;
    font-weight: 100
}

@font-face {
    font-family: 'MyriadPro';
    src: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/myriadpro-regular.eot);
    src: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/myriadpro-regular.eot) format("embedded-opentype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/myriadpro-regular.woff2) format("woff2"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/myriadpro-regular.woff) format("woff"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/myriadpro-regular.ttf) format("truetype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/myriadpro-regular.svg#MyriadProRegular) format("svg");
    font-style: normal;
    font-weight: 300
}

@font-face {
    font-family: 'MyriadPro';
    src: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/myriadpro-regular.eot);
    src: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/myriadpro-regular.eot) format("embedded-opentype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/myriadpro-regular.woff2) format("woff2"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/myriadpro-regular.woff) format("woff"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/myriadpro-regular.ttf) format("truetype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/myriadpro-regular.svg#MyriadProRegular) format("svg");
    font-style: normal;
    font-weight: 400
}

@font-face {
    font-family: 'MyriadPro';
    src: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/myriadpro-semibold.eot);
    src: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/myriadpro-semibold.eot) format("embedded-opentype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/myriadpro-semibold.woff2) format("woff2"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/myriadpro-semibold.woff) format("woff"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/myriadpro-semibold.ttf) format("truetype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/myriadpro-semibold.svg#MyriadProSemibold) format("svg");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: 'LatoLatin';
    src: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/LatoLatin-Medium.eot);
    src: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/LatoLatin-Medium.eot?#iefix) format("embedded-opentype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/LatoLatin-Medium.woff2) format("woff2"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/LatoLatin-Medium.woff) format("woff"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/LatoLatin-Medium.ttf) format("truetype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/LatoLatin-Medium.svg#robotomedium) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'LatoLatin';
    src: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/LatoLatin-Regular.eot);
    src: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/LatoLatin-Regular.eot?#iefix) format("embedded-opentype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/LatoLatin-Regular.woff2) format("woff2"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/LatoLatin-Regular.woff) format("woff"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/LatoLatin-Regular.ttf) format("truetype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/LatoLatin-Regular.svg#robotomedium) format("svg");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: 'LatoLatin';
    src: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/LatoLatin-Bold.eot);
    src: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/LatoLatin-Bold.eot?#iefix) format("embedded-opentype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/LatoLatin-Bold.woff2) format("woff2"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/LatoLatin-Bold.woff) format("woff"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/LatoLatin-Bold.ttf) format("truetype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/LatoLatin-Bold.svg#robotomedium) format("svg");
    font-weight: 600;
    font-style: normal
}

@font-face {
    font-family: 'cflow-icon';
    src: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/cflow-icon.eot?v5if2m);
    src: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/cflow-icon.eot?v5if2m#iefix) format("embedded-opentype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/cflow-icon.ttf?v5if2m) format("truetype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/cflow-icon.woff?v5if2m) format("woff"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/cflow-icon.svg?v5if2m#cflow-icon) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'cflow-icon19';
    src: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/cflow19.eot?v5if2m);
    src: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/cflow19.eot?v5if2m#iefix) format("embedded-opentype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/cflow19.ttf?v5if2m) format("truetype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/cflow19.woff?v5if2m) format("woff"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/cflow19.svg?v5if2m#cflow-icon19) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'soscal-icon';
    src: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/soscalv4.eot?v5if2m);
    src: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/soscalv4.eot?v5if2m#iefix) format("embedded-opentype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/soscalv4.ttf?v5if2m) format("truetype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/soscalv4.woff?v5if2m) format("woff"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/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://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/webfonts/fa-brands-400.eot) format("embedded-opentype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/webfonts/fa-brands-400.woff2) format("woff2"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/webfonts/fa-brands-400.woff) format("woff"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/webfonts/fa-brands-400.ttf) format("truetype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/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://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/webfonts/fa-regular-400.eot) format("embedded-opentype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/webfonts/fa-regular-400.woff2) format("woff2"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/webfonts/fa-regular-400.woff) format("woff"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/webfonts/fa-regular-400.ttf) format("truetype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/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://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/webfonts/fa-solid-900.eot) format("embedded-opentype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/webfonts/fa-solid-900.woff2) format("woff2"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/webfonts/fa-solid-900.woff) format("woff"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts/webfonts/fa-solid-900.ttf) format("truetype"),url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/fonts//webfonts/fa-solid-900.svg) format("svg")
}

.icon {
    font-family: 'cflow-icon','soscal-icon','cflow-icon19' !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block
}

.client:before {
    content: "\e948"
}

.i-settings:before {
    content: "\e946"
}

.refresh:before {
    content: "\e945"
}

.i-bam:before {
    content: "\e943"
}

.i-excexport:before {
    content: "\e942"
}

.i-history:before {
    content: "\e940"
}

.i-showhide:before {
    content: "\e941"
}

.i-newrecord:before {
    content: "\e93c"
}

.i-newrecord1:before {
    content: "\e93f"
}

.i-createplus:before {
    content: "\e938"
}

.i-ticket:before {
    content: "\e934"
}

.i-calendar + :before {
    content: "\e93d"
}

.i-newfile:before {
    content: "\e93e"
}

.i-tourd:before {
    content: "\e93b"
}

.i-tour:before {
    content: "\e939"
}

.i-helpq:before {
    content: "\e93a"
}

.i-multiselect2:before {
    content: "\e937"
}

.i-multiselect1:before {
    content: "\e935"
}

.i-dropdown1:before {
    content: "\e936"
}

.i-radio:before {
    content: "\e92e"
}

.i-chekboxlist:before {
    content: "\e92f"
}

.i-chekbox:before {
    content: "\e930"
}

.i-htmledit:before {
    content: "\e931"
}

.i-multiselect:before {
    content: "\e932"
}

.i-dropdown:before {
    content: "\e92c"
}

.i-textarea:before {
    content: "\e92a"
}

.i-checkbox1:before {
    content: "\e928"
}

.i-fileupload:before {
    content: "\e929"
}

.i-textbox:before {
    content: "\e92b"
}

.i-approve:before {
    content: "\e92d"
}

.checkbox-list:before {
    content: "\e933"
}

.Dash9:before {
    content: "\e904"
}

.Dash8:before {
    content: "\e90c"
}

.Dash7:before {
    content: "\e90f"
}

.Dash6:before {
    content: "\e910"
}

.Admin5:before {
    content: "\e911"
}

.WF11:before {
    content: "\e912"
}

.WF10:before {
    content: "\e913"
}

.Secu3:before {
    content: "\e914"
}

.WF8:before {
    content: "\e915"
}

.WF6:before {
    content: "\e916"
}

.Dash4:before {
    content: "\e917"
}

.WF12:before {
    content: "\e918"
}

.Dash3:before {
    content: "\e919"
}

.Dash2:before {
    content: "\e91a"
}

.Admin62:before {
    content: "\e91b"
}

.Admin6:before {
    content: "\e91c"
}

.Hist2:before {
    content: "\e91d"
}

.ConCen1:before {
    content: "\e91e"
}

.WFAna2:before {
    content: "\e91f"
}

.WFAna1:before {
    content: "\e920"
}

.Reports2:before {
    content: "\e921"
}

.WF5:before {
    content: "\e922"
}

.WF4:before {
    content: "\e923"
}

.WF3:before {
    content: "\e924"
}

.WF1:before {
    content: "\e925"
}

.Hist5:before {
    content: "\e926"
}

.Hist4:before {
    content: "\e927"
}

.create-plus:before {
    content: "\e90a"
}

.single-row:before {
    content: "\e900"
}

.auto-arg:before {
    content: "\e90b"
}

.creat-plus1:before {
    content: "\e90d"
}

.create-plus2:before {
    content: "\e90e"
}

.i-help:before {
    content: "\e909"
}

.adduser:before {
    content: "\e907"
}

.parallel:before {
    content: "\e905"
}

.i-tick:before {
    content: "\e908"
}

.pencil:before {
    content: "\e906"
}

.i-pencil1:before {
    content: "\e903"
}

.i-pencil:before {
    content: "\e901"
}

.i-link:before {
    content: "\e902"
}

.icon-sos:before {
    content: "\e2901"
}

.icon-schcalendar:before {
    content: "\e2902"
}

.icon-spinner:before {
    content: "\2903"
}

.icon-reload-alt:before {
    content: "\e2904"
}

.icon-reload:before {
    content: "\e2905"
}

.icon-repeat:before {
    content: "\e2906"
}

.icon-file-text:before {
    content: "\e2907"
}

.icon-barcode:before {
    content: "\e2908"
}

.icon-mail4:before {
    content: "\e2911"
}

.icon-telegram:before {
    content: "\e2912"
}

.icon-table:before {
    content: "\e2913"
}

.icon-table2:before {
    content: "\e2914"
}

.icon-objmove-up:before {
    content: "\e2917"
}

.icon-objmove-down:before {
    content: "\e2918"
}

.icon-obj-label:before {
    content: "\f824"
}

.icon-qrcode:before {
    content: "\e96a"
}

.icon-obj-incspace:before {
    content: "\f6bc"
}

.icon-obj-decspace:before {
    content: "\f6be"
}

.icon-insert-template:before {
    content: "\e96c"
}

.icon-obj-right:before {
    content: "\e969"
}

.icon-obj-left:before {
    content: "\e968"
}

.icon-obj-top:before {
    content: "\e96b"
}

.icon-obj-bottom:before {
    content: "\e2923"
}

.icon-grp1:before {
    content: "\e2924"
}

.icon-grp_pre:before {
    content: "\e2925"
}

.icon19-noti-1:before {
    content: "\e801"
}

.icon19-noti-2:before {
    content: "\e802"
}

.icon19-schdemo-1:before {
    content: "\e803"
}

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

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

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

:-moz-placeholder {
    font-size: 12px
}

::-moz-placeholder {
    font-size: 12px
}

:-ms-input-placeholder {
    font-size: 12px
}

body {
    padding: 0;
    margin: 0;
    background: #f5f6fa;
    font-family: 'Open Sans',sans-serif
}

input[readonly], textarea[readonly], select[readonly], input[readonly]:focus, textarea[readonly]:focus, select[readonly]:focus {
    color: #5a5858 !important;
    cursor: default;
    border-bottom: 1px solid #e0e0e0 !important;
    background-color: #fbfbfb
}

input.dial {
    border-bottom: 0 !important
}

input, select, textarea, a, button {
    font-family: 'Open Sans',sans-serif
}

a {
    cursor: pointer
}

.requir-mark {
    font-style: normal;
    color: #db4437;
    font-size: 16px;
    left: 2px;
    right: 2px;
    top: 3px;
    margin-left: 2px
}

.required {
    font-style: normal;
    color: #db4437;
    font-size: 16px;
    position: relative;
    left: 2px
}

header {
    position: fixed;
    min-height: 60px;
    text-align: center;
    color: #fff;
    z-index: 99999;
    width: 100%
}

textarea {
    font-family: 'Open Sans',sans-serif
}

main {
    float: left;
    display: block;
    width: 100%;
    top: 60px;
    overflow: hidden
}

.top-menu a:hover aside {
    display: block
}

aside {
    position: fixed;
    top: 60px;
    bottom: 0;
    width: 65px;
    float: left;
    overflow-y: auto;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    background-color: #FFF;
    color: rgba(255,255,255,.75);
    z-index: 1000;
    box-shadow: -3px -1px 4px 0 rgba(0,0,0,0.16),-3px -4px 10px 0 rgba(0,0,0,0.12);
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease
}

section.main-container {
    float: left;
    margin-left: 66px;
    display: block;
    width: calc(100vw - 66px);
    height: calc(100vh - 60px);
    margin-top: 60px;
    padding-bottom: 20px;
    position: relative;
    box-sizing: border-box;
    overflow-y: auto
}

.main-containertwo {
    width: 100% !important;
    margin-left: 0 !important
}

.top-menu {
    float: left;
    width: 3.8%
}

    .top-menu a {
        width: 30px;
        height: 30px;
        float: left;
        margin: 15px 10px;
        color: #fff
    }

        .top-menu a:hover aside {
            display: block
        }

        .top-menu a i {
            font-size: 22px;
            margin: 3px 0 0 10px
        }

.customer-logo-head {
    width: 10%;
    height: 60px;
    text-align: center;
    color: #fff;
    z-index: 9999;
    float: left;
    box-sizing: border-box
}

    .customer-logo-head img {
        margin: 4px;
        width: 130px;
        height: 50px;
        border-radius: 2px;
        box-sizing: border-box;
        border: none !important;
        background: none !important
    }

.top-profile-options {
    display: block;
    float: left;
    height: 60px;
    width: 86.1%
}

.top-profile-search-box {
    float: left;
    position: relative
}

    .top-profile-search-box input {
        background-color: #054a98;
        border-radius: 2px;
        border: 1px solid #054a98;
        padding: 8px 35px 8px 8px;
        margin: 14px;
        display: block;
        width: 200px;
        color: #fff;
        box-sizing: border-box;
        transition: width 1s ease 0
    }

        .top-profile-search-box input:focus {
            outline: 0;
            width: 300px
        }

    .top-profile-search-box:after {
        content: '\f349';
        font-family: Material Design Icons;
        font-size: 26px;
        position: absolute;
        top: 19px;
        right: 20px;
        color: #2d73c1
    }

.top-profile-options #dvStarPerf {
    display: none !important
}

.strper {
    float: left;
    margin: 0 auto;
    background: #fff;
    height: 46px;
    margin-top: 4px;
    border-radius: 5px;
    width: 340px;
    position: absolute;
    right: 0;
    left: 0;
    top: 2px;
    box-shadow: 3px 3px 1px 0 rgba(0,0,0,0.22),0 0 0 1px rgba(0,0,0,0.22)
}

.strpertxt {
    padding: 5px 0;
    font-size: 19px;
    box-sizing: border-box;
    font-family: 'Raleway';
    height: 7vh;
    display: flex;
    justify-content: center;
    align-items: flex-end
}

    .strpertxt span {
        font-size: 19px
    }

.strperprof {
    text-align: center
}

.dash_profile_pic_container {
    color: #757171;
    width: 80px;
    padding: 0 18px
}

.you_are_dash_profile_pic_container {
    color: #525456;
    font-weight: 600;
    font-size: 13px
}

    .you_are_dash_profile_pic_container .strperprof img {
        width: 65px;
        min-height: 50px;
        border-radius: 50px;
        background: #ddd
    }

@media only screen and (max-width:1420px) {
    .dash_profile_pic_container {
        padding: 0 5px !important
    }

    .strperprof img {
        width: 57px !important;
        min-height: 57px !important
    }
}

.strperprof img {
    width: 60px;
    min-height: 60px;
    border-radius: 50px;
    background: #ddd
}

.str {
    position: absolute;
    color: #ffa200
}

.profile-option-right {
    float: right;
    height: 60px;
    width: 475px
}

.profile-option-right_flex {
    display: flex;
    justify-content: flex-end
}

.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;
    background: rgba(255,255,255,0.15) !important;
    cursor: pointer;
    border-radius: 20px
}

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

.top-prowerd-by {
    width: 23%;
    float: right;
    margin-right: 10px
}

    .top-prowerd-by img {
        width: 100%;
        margin: 5px
    }

.profile-dropdown {
    width: 80%;
    min-height: 80px;
    float: left;
    background-color: #07376e;
    margin-top: 3px;
    margin-left: 30px;
    display: none;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)
}

    .profile-dropdown ul {
        margin: 0;
        padding: 0;
        list-style: none
    }

        .profile-dropdown ul li a {
            display: block;
            padding: 0 10px;
            text-align: center;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            color: #fff;
            text-decoration: none;
 
            line-height: 35px;
            font-size: 15px;
            opacity: .7
        }

            .profile-dropdown ul li a:hover {
                opacity: 1
            }

.profile-dd-themes {
    text-align: left;
    color: #fff;
    width: 100%
}

    .profile-dd-themes h6 {
        padding: 5px;
        margin: 0;
        font-size: 12px;
        font-weight: 500
    }

.theme-palette {
    width: 90%;
    margin: 0 auto
}

    .theme-palette a {
        float: left;
        margin: 5px
    }

        .theme-palette a:hover {
            background-color: #fff
        }

        .theme-palette a i {
            border: 1px solid #fff;
            padding: 0;
            font-size: 24px;
            box-sizing: border-box
        }

            .theme-palette a i.blue-thme {
                color: var(--primary-color)
            }

            .theme-palette a i.blue-berry-thme {
                color: #282863
            }

            .theme-palette a i.black-thme {
                color: #151515
            }

            .theme-palette a i.green-thme {
                color: #037037
            }

            .theme-palette a i.orange-thme {
                color: #c94823
            }

            .theme-palette a i.pomegranate-thme {
                color: #8a0a44
            }

            .theme-palette a i.raspberry-thme {
                color: #8a258b
            }

            .theme-palette a i.red-thme {
                color: #d62c32
            }

            .theme-palette a i.teal-thme {
                color: #1f7f93
            }

            .theme-palette a i.violet-thme {
                color: #381292
            }

.a-side-menu {
    float: left;
    width: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding-bottom: 40px;
    overflow-x: hidden
}

    .a-side-menu ul {
        padding: 0;
        margin: 2px 0;
        list-style: none
    }

        .a-side-menu ul li {
            width: 220px;
            overflow-x: hidden
        }

            .a-side-menu ul li a {
                font-size: 14px;
                padding: 5px;
                float: left;
                width: 100%;
                display: flex;
                box-sizing: border-box;
                text-decoration: none;
                position: relative;
                color: #7a7a7a;
                transition: .2s
            }

                .a-side-menu ul li a:hover {
                    background: var(--primary-color);
                    color: #fff
                }

                .a-side-menu ul li a .fa-file-invoice {
                    margin: 10px 21px 10px 20PX !important
                }

.add-new-wrkflw li:first-child a:hover {
    background: #c54535 !important
}

div#leftmenusos ul li a:hover {
    background-color: transparent !important;
    color: #7a7a7a
}

.sos-img {
    width: 54px;
    height: 54px;
    margin: 2px 21px 0 0;
    display: block;
    float: left;
    box-sizing: border-box
}

.menu-sec-i-o {
    position: absolute;
    font-size: 10px !important;
    left: 25px;
    top: 24px
}

.menu-sec-i-s {
    position: absolute;
    font-size: 10px !important;
    left: 27px;
    top: 13px
}

.fl-icon {
    position: absolute;
    font-size: 12px !important;
    top: 11px;
    left: 9px
}

.em-icon {
    position: absolute;
    font-size: 12px !important;
    top: 15px;
    left: 20px
}

.a-side-menu ul li a span {
    font-size: 14px;
    line-height: 42px
}

.a-side-menu ul li a i {
    font-size: 24px;
    margin: 10px 22px 10px 15PX;
    display: block;
    float: left
}

.newlable {
    font-size: 10px !important;
    background: red;
    color: #fff;
    height: 6px;
    line-height: 6px !important;
    padding: 3px;
    border-radius: 2px;
    position: absolute;
    left: 28px;
    top: 0;
    box-sizing: unset
}

.a-side-menu ul li a:hover .newlable {
    background: transparent;
    color: #ffeb3b;
    left: 0
}

.suptkt {
    font-size: 14px !important;
    position: relative;
    top: 5px
}

.add-new-wrk-btn {
    background: #d00;
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 8px 10px;
    font-size: 16px;
    font-weight: 300;
    border-radius: 4px;
    border-bottom: 0 solid #900;
    margin: 18px;
    float: left;
    box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2),2px 1px 1px 0 rgba(0,0,0,0.19)
}

    .add-new-wrk-btn:active {
        position: relative;
        top: 1px;
        box-shadow: none
    }

.sub-menu-in {
    display: none
}

.sub-menu-in-an {
    display: none
}

.add-new-wrkflw {
    position: relative;
    top: 5px
}

    .add-new-wrkflw li:first-child a {
        color: #fff !important;
        background-color: #d14836;
        background-image: linear-gradient(to bottom, #dd4b39, #d14836);
        border: solid #b0281a;
        border-width: 1px 0
    }

.page-title {
    padding: 0 16px;
    box-shadow: 0 1px 0 rgba(20,20,20,.075);
    background-color: #fff;
    margin-bottom: 10px;
    width: 100%;
    position: relative;
    height: 50px;
    box-sizing: border-box;

}

.cc-page-title h1 {
    width: 99% !important
}

.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
}

.page-title .process-stage {
    width: 400px;
    margin: 0 auto;
    position: relative;
    top: 10px;
    display: none
}

    .page-title .process-stage > a {
        float: left;
        position: absolute;
        top: 5px;
        right: -35px;
        font-size: 22px
    }

.page-title .back-btn {
    float: left;
    display: block;
    position: absolute
}

    .page-title .back-btn a {
        float: left;
        opacity: .5
    }

        .page-title .back-btn a:hover {
            opacity: 1
        }

    .page-title .back-btn i {
        font-size: 28px;
        padding: 2px;
        box-sizing: border-box;
        margin: 10px 0;
        color: #000
    }

.page-title .export-btn {
    display: block;
    position: absolute;
    right: 30px;
    top: -2px
}

    .page-title .export-btn a {
        float: left;
        outline: 0;
        position: relative;
        color: gray
    }

        .page-title .export-btn a:hover {
            color: #000
        }

        .page-title .export-btn a > span {
            position: absolute;
            font-size: 12px;
            right: 5px;
            top: 7px;
            color: #fff
        }

            .page-title .export-btn a > span > i {
                font-size: 9px;
                color: #fff
            }

    .page-title .export-btn i.bgcoltree {
        font-size: 25px !important;
        background-color: grey;
        color: #fff;
        border-radius: 2px;
        position: relative;
        top: 4px
    }

        .page-title .export-btn i.bgcoltree:hover {
            background-color: #171616
        }

    .page-title .export-btn a.highbtn {
        background-color: #1ba91a;
        border: 1px solid #b9bcbf;
        box-shadow: 2px 2px #d4d7da;
        border-radius: 3px;
        color: #fff;
        padding: 6px 12px;
        box-sizing: border-box;
        position: relative;
        top: 8px;
        left: 10px;
        opacity: .8 !important
    }

.chgapproval {
    position: absolute;
    right: 0
}

    .chgapproval a {
        font-size: 15px;
        background-color: #1ba91a;
        padding: 5px;
        box-sizing: border-box;
        color: #fff;
        margin-right: 15px;
        top: 15px;
        position: relative
    }

        .chgapproval a i {
            font-size: 18px;
            padding-right: 5px;
            position: relative;
            top: 2px
        }

.ref-align {
    color: #fff;
    background: gray;
    width: 25px;
    height: 25px;
    display: block;
    font-size: 20px !important;
    padding: 3px !important;
    border-radius: 3px;
    margin: 15px 6px !important
}

.page-title .export-btn i {
    font-size: 32px;
    box-sizing: border-box;
    margin: 10px 0
}

#dvTrialDash .perf1 {
    width: 48.5% !important;
    height: 24% !important;
    position: absolute;
    top: .25%;
    left: .25%;
    margin: .25%;
    box-shadow: none
}

#dvTrialDash .perf2 {
    width: 24.75% !important;
    height: 24.5% !important;
    position: absolute;
    top: .25%;
    left: 49.25%;
    margin: .25%
}

#dvTrialDash .perf3 {
    position: absolute;
    top: .25%;
    left: 74.5%;
    margin: .25%
}

.perf1 {
    border-radius: 3px;
    color: #4f5256;
    width: 24%;
    height: 25vh;
    min-height: 100px;
    margin: .75% .375% .375% .75%;
    float: left;
    display: block;
    box-shadow: 0 1px 0 0 rgba(0,0,0,0.05),0 2px 3px 0 rgba(0,0,0,0.05)
}

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

.tabs {
    display: table;
    position: relative;
    overflow: hidden;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    -webkit-padding-start: 0;
    border-radius: 3px 3px 0 0
}

    .tabs li {
        float: left;
        line-height: 30px;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: calc(100% / 5)
    }

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

.tabs a {
    border-bottom: 1px solid #fff;
    color: #fff;
    font-weight: 500;
    display: block;
    letter-spacing: 0;
    outline: 0;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.tabs_item {
    display: none;
    padding: 10px;
    height: calc(25vh - 72px);
    min-height: 50px;
    background: #fff;
    border-radius: 0 0 3px 3px;
    color: #484d52
}

    .tabs_item h4 {
        margin: 0 0 3px;
        font-size: 16px
    }

    .tabs_item p {
        margin: 0;
        font-size: 14px
    }

    .tabs_item:first-child {
        display: block
    }

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

.cmpltd {
    background: #4caf50
}

.schdl-dmo, .invt-btn {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 170px
}

@media(max-width:1380px) and (min-width:1158px) {
    .schdl-dmo, .invt-btn {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 130px
    }

        .schdl-txt p, .invt-btn p {
            line-height: 18px;
            font-size: 16px
        }

        .schdl-txt h3, .invt-btn h3 {
            line-height: 17px !important;
            font-size: 16px
        }

    .schdl-txt {
        margin-right: 12% !important
    }
}

.schdl-txt h3, .invt-btn h3 {
    line-height: 20px;
    font-size: 17px
}

.schdl-txt p, .invt-btn p {
    line-height: 16px
}

.schdl-dmo img, .invt-btn img {
    width: 23%;
    min-width: 90px;
    padding: 25px 0 0 20px;
    box-sizing: border-box
}

.schdl-dmo a, .invt-btn a {
    position: relative;
    display: block;
    font-size: 15px;
    background: #4baffe;
    padding: 6px 10px;
    align-self: flex-end;
    text-align: center;
    border-radius: 22px;
    width: 150px;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2);
    transition: background-color .3s
}

.invt-btn a {
    width: 100px
}

.schdl-txt {
    margin-right: 20%
}

.invt-txt {
    margin: 0 2% 0 5%
}

.schdl-dmo a:hover {
    background: #26bdb1;
    box-shadow: 0 1px 3px rgba(0,0,0,.50)
}

.invt-btn a:hover {
    background: #26bdb1;
    box-shadow: 0 1px 3px rgba(0,0,0,.50)
}

.schdl-dmo a:before, .invt-btn a:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0;
    padding-top: 0;
    border-radius: 100%;
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.07),0 1px 7px 0 rgba(0,0,0,0.02),0 3px 1px -1px rgba(0,0,0,0.1);
    background-color: rgba(236,240,241,.3);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.schdl-dmo a:active:before, .invt-btn a:active:before {
    width: 120%;
    padding-top: 120%;
    transition: width .2s ease-out,padding-top .2s ease-out
}

.your-perf {
    width: 70%;
    height: 100%;
    float: left;
    position: relative
}

.your-perf-val {
    color: #fff;
    font-size: 25px;
    font-weight: 300;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px
}

.your-perf-val1 {
    color: #fff;
    font-size: 17px;
    font-weight: 100;
    padding-left: 10px
}

.your-perf-val2 {
    color: #fff;
    font-size: 23px;
    font-weight: 100;
    padding-left: 10px
}

.your-perf-img {
    width: 30%;
    height: 100%;
    float: left;
    position: relative;
    display: table
}

.your-perf-note {
    color: #fff;
    font-size: 11px;
    font-style: italic;
    font-weight: 100;
    padding-left: 10px;
    bottom: 0;
    position: absolute;
    padding-bottom: 5px
}

.perf-img {
    bottom: 0;
    width: 100%;
    position: relative;
    display: table-cell;
    vertical-align: middle
}

    .perf-img img {
        height: auto;
        width: 100%;
        float: right;
        padding: 5px;
        box-sizing: border-box
    }

.perf2 {
    border-radius: 3px;
    background-color: #fff;
    color: #525252;
    width: 23.9%;
    height: 25vh;
    min-width: 205px;
    min-height: 100px;
    margin: .75% .375% .375%;
    float: left;
    position: relative;
    display: block;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05),0 2px 10px 0 rgba(0,0,0,0.05)
}

#dvMainDash #dvTodayTask {
    display: flex;
    align-items: center !important
}

.perf3 {
    margin-right: .75%
}

.perf2 .title h2 {
    margin: 10px;
    font-size: 16px;
    font-weight: 600
}

.perf-chart, .perf-chart-val {
    width: 50%;
    height: 100%;
    float: left;
    position: relative;
    text-align: center;
    display: table
}

.task-val {
    text-align: center;
    margin: 1.5%;
    font-size: 24px;
    display: block;
    line-height: 25px;
    font-weight: 600
}

.task-val-main {
    display: table-cell;
    vertical-align: middle
}

.donut-chart {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 125px !important
}

.cal-list {
    margin: 10px;
    font-size: 14px;
    overflow: hidden;
    height: calc(100% - 69px)
}

.cal-no-item img {
    width: 67%;
    margin: 0 auto;
    display: block
}

.dashfield_value {
    font-size: 12px;
    color: #169204;
    line-height: 16px
}

.cal-item {
    padding-bottom: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.cal-list .first, .cal-list .second {
    padding-right: 10px
}

.cal-list .nth-chi {
    color: var(--primary-color)
}

.cal-view a {
    border-top: 1px solid #e0e0e0;
    text-align: center;
    bottom: 0;
    width: 100%;
    position: absolute;
    font-size: 12px;
    color: #afafaf;
    padding: 5px;
    box-sizing: border-box
}

.notification {
    border-radius: 3px;
    background-color: #fff;
    color: #4f5256;
    width: 24%;
    height: calc(100% - 29.6vh);
    margin: .375% .375% .75% .75%;
    float: left;
    display: block;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05),0 2px 10px 0 rgba(0,0,0,0.05)
}

    .notification .title {
        width: 100%;
        display: block;
        position: relative
    }

        .notification .title h2 {
            margin: 10px;
            font-weight: 600;
            font-size: 16px
        }

        .notification .title span {
            font-size: 13px;
            color: #9c9c9c;
            margin: 0 10px 5px;
            display: block
        }

    .notification .noti-information {
        width: 100%;
        display: block;
        height: calc(100% - 48px);
        overflow-y: auto
    }

.noti-info-slice {
    width: 100%;
    padding: 5px 5px 5px 10px;
    display: flex;
    float: left;
    box-sizing: border-box;
    font-size: 14px;
    position: relative;
    border-bottom: 1px solid #e2e2e2;
    flex-direction: column
}

    .noti-info-slice:hover::after {
        content: 'Open Now';
        background-color: #b9b9b9;
        color: #fff;
        font-size: 14px;
        position: absolute;
        top: 34%;
        left: 50%;
        padding: .2% 1%;
        border-radius: 10px;
        opacity: .5
    }

    .noti-info-slice:hover {
        cursor: pointer;
        background-color: #f8f8f8
    }

.name-info {
    width: 80%;
    display: block;
    float: left
}

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

.noti-information .appr-info-bottom {
    width: 90% !important
}

.name-info-top, .appr-info-bottom {
    width: 100%;
    display: block;
    float: left
}

.name-info-top {
    width: 90px;
    display: flex;
    align-items: flex-start
}

    .name-info-top .first {
        font-weight: 500;
        font-size: 15px;
        float: left
    }

    .name-info-top .second {
        font-size: 14px;
        font-weight: 400;
        color: #717171;
        padding: 0 5px
    }

    .name-info-top .sec-val {
        float: left;
        font-size: 15px;
        line-height: 22px;
        margin: 0 5px 0 0;
        width: 80%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap
    }

        .name-info-top .sec-val .fir-chi {
            color: #717171;
            margin-right: 4px
        }

        .name-info-top .sec-val .nth-chi {
            font-weight: 500
        }

.date-info-top {
    width: 100px;
    line-height: 16px;
    justify-content: space-around;
    position: absolute;
    right: 5px;
    top: 5px
}

    .date-info-top span {
        font-size: 11px;
        padding: 2px;
        display: block;
        color: #afafaf;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        text-align: right
    }

.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
}

    .wor-id-btm .first {
        font-weight: 600;
        color: #525252;
        float: left;
        font-size: 13px;
        display: inline-block;
        width: 100%;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
        line-height: 21px
    }

    .wor-id-btm .second {
        color: #777;
        font-size: 12px;
        line-height: 18px
    }

.sched-property {
    width: 100%;
    margin: 0;
    float: left;
    padding: 10px 5px;
    box-sizing: border-box
}

    .sched-property:before {
        content: 'Drag and drop fields from the toolbox to this section';
        float: left;
        font-size: 20px;
        text-align: center;
        font-weight: 200;
        color: #cccaca;
        margin: 5px 24%
    }

    .sched-property h3 {
        font-size: 20px;
        text-align: center;
        font-weight: 300;
        color: #9c9c9c
    }

.workflow-list-dash {
    border-radius: 3px;
    background-color: #fff;
    color: #4f5256;
    width: 73.5%;
    height: calc(100% - 29.6vh);
    margin: .375% .75% .75% .375%;
    float: left;
    display: block;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05),0 2px 10px 0 rgba(0,0,0,0.05)
}

    .workflow-list-dash .title {
        width: 100%;
        display: block
    }

        .workflow-list-dash .title h2 {
            margin: 10px;
            font-size: 15px;
            font-weight: 600
        }

        .workflow-list-dash .title span {
            font-size: 13px;
            color: #bbb;
            margin: 0 10px 5px;
            display: block
        }

.workflow-list-contianer {
    width: 100%;
    float: left;
    height: calc(100% - 48px);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box
}

.workflow-cart-li {
    width: 31.5%;
    height: 120px;
    float: left;
    display: block;
    margin: 0 5px 15px 10px;
    position: relative;
    background-position: -16% 25%;
    box-shadow: 2px 3px 4px 0 rgba(0,0,0,0.05),1px 1px 2px 0 rgba(0,0,0,0.05)
}

.req-status img {
    width: 20px
}

.go img {
    width: 30px;
    padding-right: 6px
}

.workflow-cart-li .top-title {
    height: 120px;
    width: 88%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    box-sizing: border-box;
    text-align: left;
    position: relative
}

.workflow-cart-li:nth-child(10n+1) {
    background-color: #f6f8fc
}

.workflow-cart-li:nth-child(10n+2) {
    background-color: #fcf6f6
}

.workflow-cart-li:nth-child(10n+3) {
    background-color: #f6fbfc
}

.workflow-cart-li:nth-child(10n+4) {
    background-color: #fcfaf6
}

.workflow-cart-li:nth-child(10n+5) {
    background-color: #fcf9f6
}

.workflow-cart-li:nth-child(10n+6) {
    background-color: #f8fcf6
}

.workflow-cart-li:nth-child(10n+7) {
    background-color: #f9f6fc
}

.workflow-cart-li:nth-child(10n+8) {
    background-color: #fcf6f6
}

.workflow-cart-li:nth-child(10n+9) {
    background-color: #fcf6f6
}

.workflow-cart-li:nth-child(10n+10) {
    background-color: #f6f9fc
}

.workflow-cart-li .top-title .name {
    font-size: 14px;
    color: #525456;
    font-weight: 600
}

.workflow-cart-li .top-title .first {
    position: absolute;
    font-size: 70px;
    top: 0;
    left: 18px;
    opacity: .1;
    transform: rotate(-25deg);
    color: #717171
}

.workflow-cart-li .bottom-initate {
    height: 100%;
    width: 35px;
    background-color: rgba(255,250,250,0.16);
    display: block;
    cursor: pointer;
    top: 0;
    right: 0;
    position: absolute
}


    .workflow-cart-li .bottom-initate:hover .go, .workflow-cart-li .bottom-initate:hover .view {
        opacity: 1
    }

    .workflow-cart-li .bottom-initate .go {
        font-size: 12px;
        position: relative;
        float: right;
        text-decoration: none;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 2px;
        color: #fff;
        box-sizing: border-box
    }

        .workflow-cart-li .bottom-initate .go i {
            font-size: 30px;
            padding-right: 6px
        }

    .workflow-cart-li .bottom-initate .view {
        font-size: 15px;
        margin: 9px;
        display: block;
        float: left;
        text-decoration: none;
        border-radius: 2px;
        opacity: .526501;
        color: #fff;
    }

.req-status {
    position: absolute;
    float: right;
    left: 5px;
    z-index: 99;
    display: block;
    bottom: 5px
}

.workflow-cart-li:hover .req-status {
    display: block
}

.wkf-library-li:hover .req-status {
    display: block
}

.req-status a:first-child {
    color: #fff;
    padding: 5px;
    font-size: 20px
}

.req-status a:last-child {
    color: #fff;
    font-size: 20px;
    padding: 5px;
    position: relative
}

    .req-status a:last-child > i:last-child {
        font-size: 8px;
        position: absolute;
        right: -3px;
        top: 4px
    }

.req-status a:hover {
    opacity: 1
}

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

.workflow-html-edtior {
    border-radius: 3px;
    background-color: #fff;
    color: #4f5256;
    box-shadow: 0 0 2px rgba(20,20,20,0.18);
    width: 98%;
    margin: 5px .35%;
    float: left;
    display: block;
    z-index: 4;
    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-html-edtior .title {
        background-color: #fff
    }

        .workflow-detail-cont .title h2, .workflow-html-edtior .title h2 {
            margin: 8px;
            font-size: 16px;
            font-weight: 600;
            float: left
        }

.status-msg {
    background-color: #e37211;
    padding: 1px 3px;
    font-size: 13px;
    border-radius: 2px;
    color: #fff;
    display: block;
    float: right;
    margin: 10px 5px
}

.status-msg1 {
    background-color: #da0000;
    padding: 1px 3px;
    font-size: 13px;
    border-radius: 2px;
    color: #fff;
    display: block;
    float: right;
    margin: 10px 5px
}

.dup_app_min_btn {
    position: absolute;
    top: 10px;
    right: 1%;
    color: #fff
}

.dup_status_lbl {
    position: absolute !important;
    top: 0 !important;
    right: 3% !important
}

.excel-exp-btn {
    display: block;
    float: left
}

    .excel-exp-btn a {
        color: #ddd;
        font-size: 26px;
        padding: 0;
        display: block;
        box-sizing: border-box;
        position: relative;
        top: 2px;
        left: 5px;
        float: left
    }

        .excel-exp-btn a:focus {
            outline: 1px solid #c1deff
        }

        .excel-exp-btn a:hover {
            color: #108701
        }

        .excel-exp-btn a:active {
            top: 4px;
            color: #108701
        }

div.otm-print-ck {
    border-radius: 2px;
    float: right;
    width: 145px;
    display: block;
    padding: 8px 0 0;
    box-sizing: border-box;
    margin: 0 10px
}

.otm-print-ck input[type="checkbox"] {
    display: none
}

    .otm-print-ck input[type="checkbox"] + .otm-chbx span {
        font-size: 11px;
        border: 1px solid #c5c4c4;
        padding: 3px 15px;
        line-height: 12px;
        float: left;
        border-radius: 2px;
        width: 100%;
        position: relative;
        box-sizing: border-box
    }

    .otm-print-ck input[type="checkbox"]:checked + .otm-chbx span {
        color: #fff;
        display: block;
        float: left;
        box-sizing: border-box
    }

        .otm-print-ck input[type="checkbox"]:checked + .otm-chbx span:after {
            content: "\f12c";
            font-family: Material Design Icons;
            position: absolute;
            top: -1px;
            left: -3px;
            pointer-events: none;
            padding: 4px;
            box-sizing: border-box;
            font-size: 12px
        }

.otm-print-ck .otm-chbx {
    margin: 2px 0 0;
    cursor: pointer;
    float: right
}

.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 {
        width: 35%;
        float: left;
        display: block;
        text-align: right;
        font-size: 14px;
        padding: 8px 10px;
        box-sizing: border-box;
        word-wrap: break-word;
        position: relative
    }

    .workflow-data-value-field select {
        width: 100%;
        float: left;
        display: block;
        text-align: left;
        font-size: 12px;
        padding: 8px;
        border: solid #e0e0e0;
        border-width: 0 0 1px;
        -webkit-appearance: none;
        color: #636367
    }

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

    .workflow-data-value-field textarea {
        width: 55%;
        height: 40px;
        resize: none;
        float: left;
        display: block;
        text-align: left;
        font-size: 14px;
        padding: 5px;
        border: solid #e0e0e0;
        border-width: 0 0 1px;
        -webkit-appearance: none;
        box-sizing: border-box;
        color: #1a1a1a
    }

    .workflow-data-value-field .select-with-search {
        width: 55%;
        float: left;
        display: block
    }

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

    .workflow-data-value-field option {
        font-size: 14px;
        line-height: 20px
    }

    .workflow-data-value-field .selabel {
        position: relative;
        float: left;
        width: 55%
    }

        .workflow-data-value-field .selabel:after {
            content: "\F140";
            font-family: Material Design Icons;
            position: absolute;
            right: 0;
            bottom: 16px;
            font-size: 18px;
            pointer-events: none;
            width: 30px;
            height: 22px;
            background: #fff;
            padding: 4px 7px;
            box-sizing: border-box
        }

    .workflow-data-value-field .one-to-mani-chk {
        margin: 8px
    }

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

    .workflow-data-value-field-fullwidth span {
        width: 100%;
        float: left;
        display: block;
        text-align: left;
        font-size: 15px;
        padding: 8px 2%;
        box-sizing: border-box;
        word-wrap: break-word;
        position: relative
    }

    .workflow-data-value-field-fullwidth select {
        width: 100%;
        float: left;
        display: block;
        text-align: left;
        font-size: 12px;
        padding: 8px;
        border: solid #e0e0e0;
        border-width: 0 0 1px;
        -webkit-appearance: none;
        color: #636367
    }

    .workflow-data-value-field-fullwidth input {
        width: 90%;
        float: left;
        display: block;
        text-align: left;
        font-size: 14px;
        margin: 0 2% 2%;
        padding: 5px;
        border: solid #e0e0e0;
        border-width: 0 0 1px;
        -webkit-appearance: none;
        box-sizing: border-box;
        color: #1a1a1a
    }

.workflow-record-table table td textarea {
    width: 250px;
    height: 40px;
    float: left;
    display: block;
    text-align: left;
    font-size: 14px;
    padding: 6px;
    border: solid #e0e0e0;
    border-width: 1px;
    -webkit-appearance: none;
    margin: 0;
    box-sizing: border-box;
    color: #636367
}

.workflow-data-value-field-fullwidth .select-with-search {
    width: 97%;
    float: left;
    display: block;
    margin: 0 2%
}

.workflow-data-value-field-fullwidth select, .workflow-data-value-field-fullwidth input, .workflow-data-value-field-fullwidth textarea {
    outline: 0
}

.workflow-data-value-field-fullwidth option {
    font-size: 14px;
    line-height: 20px
}

.workflow-data-value-field-fullwidth .selabel {
    position: relative;
    float: left;
    width: 98%
}

    .workflow-data-value-field-fullwidth .selabel:after {
        content: "\F140";
        font-family: Material Design Icons;
        position: absolute;
        right: 0;
        bottom: 16px;
        font-size: 18px;
        pointer-events: none;
        width: 30px;
        height: 22px;
        background: #fff;
        padding: 4px 7px;
        box-sizing: border-box
    }

.workflow-data-value-field-fullwidth .one-to-mani-chk {
    margin: 8px
}

.workflow-data-value-field-fullwidth .attachment-fields {
    margin: 0 2%
}

div.radio-check-fullwidth-group {
    border-radius: 2px;
    float: left;
    width: 97%;
    display: block;
    margin: 0 2%;
    padding: 8px 0 0;
    box-sizing: border-box
}

.radio-check-fullwidth-group .radbt-list {
    position: relative;
    display: block;
    float: left;
    margin: 0 5px 0 0
}

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

    .radio-check-fullwidth-group input[type="checkbox"] + .lab-chbx span {
        font-size: 12px;
        border: 1px solid #c5c4c4;
        padding: 3px 15px;
        line-height: 12px;
        float: left;
        border-radius: 4px;
        width: 100%;
        position: relative;
        color: inherit
    }

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

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

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

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

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

.workflow-record-table {
    float: left;
    width: 99%;
    overflow-x: auto;
    box-sizing: border-box;
    margin: 5px
}

    .workflow-record-table table {
        border-spacing: 0
    }

        .workflow-record-table table tr th {
            background-color: #f0f0f0;
            vertical-align: middle;
            border-width: 1px;
            border-bottom: 1px solid #f0f0f0;
            padding: 5px 10px;
            line-height: 1.42857143;
            font-weight: 500;
            font-size: 14px;
            position: relative;
            text-align: left
        }

        .workflow-record-table table td {
            height: 40px;
            border-bottom: 1px solid #f4f4f4;
            padding: 0 5px;
            position: relative;
            min-width: 60px
        }

            .workflow-record-table table td > a > i {
                font-size: 25px;
                opacity: .4;
                margin: 0 15px;
                color: #000
            }

        .workflow-record-table table th span.req-star {
            color: #dc3520;
            font-size: 16px;
            position: absolute;
            margin: 0 5px
        }

        .workflow-record-table table td i:hover {
            opacity: 1
        }

        .workflow-record-table table td input {
            width: auto;
            float: left;
            display: block;
            text-align: left;
            font-size: 14px;
            padding: 6px 30px 6px 6px;
            border: solid #e0e0e0;
            border-width: 0 0 1px;
            -webkit-appearance: none;
            margin: 0;
            box-sizing: border-box;
            color: #636367
        }


        .workflow-record-table table td .select-and-multi-tab {
            width: 250px;
            float: left;
            display: block
        }

        .workflow-record-table table td textarea:focus, .workflow-record-table table td input:focus {
            border-right: solid #fff;
            border-left: solid #fff;
            border-top: solid #fff;
            border-width: 0 0 2px;
            outline: 0
        }

.one-to-many-add-row {
    width: 100%;
    float: left;
    position: relative;
    height: 58px
}

    .one-to-many-add-row a {
        background-color: #d14836;
        background-image: -webkit-linear-gradient(top,#dd4b39,#d14836);
        background-image: linear-gradient(top,#dd4b39,#d14836);
        border: solid #b0281a;
        border-width: 1px 0;
        display: block;
        box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
        float: left;
        padding: 5px;
        border-radius: 3px;
        color: #fff;
        margin: 10px 5px;
        font-size: 14px;
        min-width: 60px;
        text-align: center
    }

        .one-to-many-add-row a:focus {
            outline: 1px solid #c1deff
        }

.pre-alt {
    left: -50px !important
}

.workflow-pre a {
    color: #ddd;
    font-size: 50px;
    padding: 12px 0 12px 53px;
    position: fixed;
    top: 55%;
    left: -5px;
    width: 100px;
    height: 100px;
    background: #fff;
    box-shadow: 3px 1px 4px #ddd;
    box-sizing: border-box;
    z-index: 5;
    transition: left .1s ease-in .1s
}

    .workflow-pre a i {
        position: relative;
        top: 4px;
        left: -6px
    }

.workflow-nxt a i {
    position: relative;
    top: 1px;
    left: -25px
}

.workflow-nxt a {
    color: #ddd;
    font-size: 50px;
    padding: 14px 0 12px 23px;
    position: fixed;
    top: 55%;
    right: -62px;
    width: 100px;
    height: 100px;
    background: #fff;
    box-shadow: -3px 1px 4px #ddd;
    box-sizing: border-box;
    z-index: 5;
    transition: right .1s ease-in .1s
}

.com-att-div {
    position: fixed;
    top: 35%;
    right: 0;
    padding: 10px;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    z-index: 7;
    transition: right .1s ease-in .1s;
    width: 30px;
    border-top-left-radius: 5px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 5px
}

.com-cont, .att-cont {
    width: 100%;
    display: block;
    float: left;
    position: relative;
    text-align: center
}

    .com-cont a, .att-cont a {
        float: left;
        color: gray;
        outline: 0
    }

        .com-cont a:hover, .att-cont a:hover {
            color: #000;
            opacity: 1
        }

        .com-cont a i, .att-cont a i {
            font-size: 24px
        }

    .att-cont .msg-count, .com-cont .msg-count {
        position: absolute;
        top: -4px;
        left: -5px;
        font-size: 10px;
        background-color: #da0000;
        color: #fff;
        padding: 2px 3px;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        box-sizing: border-box;
        box-shadow: 0 0 2px 0 #8e8e8e;
        text-align: center;
        display: none
    }

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

.save-btn-btm-dup {
    position: absolute !important;
    bottom: 0 !important
}

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

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

    .save-btn-btm .add-new i {
        font-size: 30px;
        padding: 7px
    }

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

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

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

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

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

    .save-btn-btm .cc-add-btn i {
        font-size: 30px;
        padding: 7px
    }

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

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

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

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

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

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

.alink {
    z-index: 100;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: block;
    margin: 8px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05),0 2px 10px 0 rgba(0,0,0,0.05);
    color: #fff;
    float: left
}

    .alink i {
        padding: 4px;
        font-size: 28px;
        display: block
    }

        .alink i:hover {
            color: #fff
        }

.help-hide-toggle {
    position: relative;
    display: none
}

.wf-cr-sav-btn-alt {
    right: 20% !important
}

.wf-cr-sav-btn {
    position: fixed;
    bottom: 10%;
    right: 2%;
    z-index: 99
}

    .wf-cr-sav-btn .sav-bt {
        background: #ff7f12;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        display: block;
        margin: 10px 0;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05),0 2px 10px 0 rgba(0,0,0,0.05);
        color: #fff
    }

        .wf-cr-sav-btn .sav-bt:hover {
            box-shadow: -4px 2px 3px #ddd
        }

        .wf-cr-sav-btn .sav-bt i {
            font-size: 30px;
            padding: 10px
        }

    .wf-cr-sav-btn .add-nw-bt {
        background: #f4543c;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        display: block;
        margin: 10px 0;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05),0 2px 10px 0 rgba(0,0,0,0.05);
        color: #fff;
        outline: 0
    }

        .wf-cr-sav-btn .add-nw-bt:hover {
            box-shadow: -4px 2px 3px #ddd
        }

        .wf-cr-sav-btn .add-nw-bt i {
            font-size: 30px;
            padding: 10px
        }

    .wf-cr-sav-btn .pub-wkf {
        border-radius: 50%;
        width: 50px;
        height: 50px;
        display: block;
        margin: 10px 0;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05),0 2px 10px 0 rgba(0,0,0,0.05);
        color: #fff;
        outline: 0
    }

        .wf-cr-sav-btn .pub-wkf:hover {
            box-shadow: -4px 2px 3px #ddd
        }

        .wf-cr-sav-btn .pub-wkf i {
            font-size: 30px;
            padding: 10px
        }

.gtop-cont {
    position: fixed;
    bottom: 0;
    right: 7%;
    z-index: 99
}

    .gtop-cont .gtop {
        background: #272626;
        width: 45px;
        height: 45px;
        display: none;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05),0 2px 10px 0 rgba(0,0,0,0.05);
        color: #fff
    }

        .gtop-cont .gtop:hover {
            box-shadow: -4px 2px 3px #ddd
        }

        .gtop-cont .gtop i {
            font-size: 30px;
            padding: 8px
        }

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

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

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

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

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

    .save-btn-btm .pub-wrk i {
        font-size: 30px;
        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: 0;
        border-bottom: 1px solid #757575;
        box-sizing: border-box
    }

    .group textarea {
        font-size: 16px;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 100%;
        height: 50px;
        border: 0;
        border-bottom: 1px solid #757575;
        box-sizing: border-box
    }

        .group input:focus, .group textarea:focus {
            outline: 0
        }

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

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

    .group .bar {
        position: relative;
        display: block;
        width: 100%
    }

        .group .bar:before, .group .bar:after {
            content: '';
            height: 2px;
            width: 0;
            bottom: 1px;
            position: absolute;
            background: #5264ae;
            transition: .2s ease all;
            -moz-transition: .2s ease all;
            -webkit-transition: .2s ease all
        }

        .group .bar:before {
            left: 50%
        }

        .group .bar:after {
            right: 50%
        }

    .group input:focus ~ .bar:before, .group input:focus ~ .bar:after, .group textarea:focus ~ .bar:before, .group textarea:focus ~ .bar:after {
        width: 50%
    }

    .group .highlight {
        position: absolute;
        height: 60%;
        width: 100px;
        top: 25%;
        left: 0;
        pointer-events: none;
        opacity: .5
    }

    .group input:focus ~ .highlight {
        -webkit-animation: inputHighlighter .3s ease;
        -moz-animation: inputHighlighter .3s ease;
        animation: inputHighlighter .3s ease
    }

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

    to {
        width: 0;
        background: transparent
    }
}

@-moz-keyframes inputHighlighter {
    from {
        background: #5264ae
    }

    to {
        width: 0;
        background: transparent
    }
}

@keyframes inputHighlighter {
    from {
        background: #5264ae
    }

    to {
        width: 0;
        background: transparent
    }
}

textarea.large-textbox {
    margin: 8px;
    border: 1px solid transparent;
    resize: none;
    width: 98%;
    height: 70px;
    font-size: 14px
}

    textarea.large-textbox:focus {
        border-width: 0 0 1px !important;
        outline: 0
    }

.attachment-popup {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0,0,0,.7);
    top: 0;
    left: 0;
    z-index: 1049;
    display: none
}

.attachment-content {
    width: 885px;
    height: 500px;
    background: #fff;
    border-radius: 2px;
    position: relative;
    padding: 5px 0;
    margin: 5% auto;
    border: 1px solid rgba(0,0,0,.12);
    box-sizing: border-box
}

    .attachment-content .header {
        width: 100%;
        display: block;
        border-bottom: 1px solid rgba(221,221,221,0.36);
        float: left
    }

        .attachment-content .header h2 {
            margin: 5px 8px;
            font-size: 18px;
            width: 93%;
            float: left;
            font-weight: 400
        }

        .attachment-content .header .close-btn {
            float: left
        }

            .attachment-content .header .close-btn a {
                margin: 3px 10px;
                display: block;
                font-weight: 500;
                font-size: 22px;
                color: #9e9e9e
            }

                .attachment-content .header .close-btn a:hover {
                    color: #515151
                }

.attachments-cont {
    width: 100%;
    float: left;
    position: relative
}

.file-upload-descrip-overlay {
    width: 100%;
    background: rgba(99,99,99,0.31);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9
}

.file-descr-overlay-inner {
    width: 80%;
    margin: 10%;
    background-color: #fff;
    float: left
}

.file-descr-title {
    width: 100%;
    float: left
}

    .file-descr-title h1 {
        margin: 5px 8px;
        font-size: 16px;
        width: 93%;
        float: left;
        font-weight: 500
    }

.file-descr-body {
    width: 100%;
    float: left
}

    .file-descr-body textarea {
        width: 93%;
        height: 100px;
        float: left;
        margin: 2% 3%;
        font-size: 14px;
        color: #484848;
        border: solid #ddd;
        border-width: 0 0 1px;
        outline: 0
    }

    .file-descr-body a {
        padding: 7px 15px;
        font-size: 16px;
        text-decoration: none;
        float: right;
        color: #fff;
        margin: 20px 25px 15px 0;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
        outline: 0;
        background: var(--primary-color)
    }

        .file-descr-body a:active {
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
            position: relative;
            top: 2px;
            left: 1px
        }

.attachment-menu-inner {
    width: 180px;
    height: 456px;
    float: left;
    border-right: 1px solid #ddd;
    background-color: rgba(215,215,215,0.26)
}

    .attachment-menu-inner ul {
        list-style: none;
        margin: 5px;
        padding: 0;
        float: left;
        width: 95%
    }

        .attachment-menu-inner ul li a {
            font-size: 14px;
            color: #525252;
            width: 100%;
            float: left;
            padding: 5px;
            box-sizing: border-box
        }

        .attachment-menu-inner ul li {
            display: block;
            float: left;
            width: 100%
        }

            .attachment-menu-inner ul li:hover, .attachment-menu-inner ul li.active {
                background-color: #ddd
            }

        .attachment-menu-inner ul a i {
            font-size: 25px;
            float: left;
            opacity: .5
        }

        .attachment-menu-inner ul a span {
            float: left;
            padding: 5px 9px;
            box-sizing: border-box
        }

.att-menu-upload {
    float: left;
    width: 100%
}

    .att-menu-upload > span {
        font-size: 14px;
        padding: 10px 10px 0;
        display: block;
        font-weight: 500;
        opacity: .4
    }

.att-menu-trash {
    float: left;
    width: 180px;
    position: absolute;
    bottom: 0;
    border-top: 1px solid #c7c7c7
}

    .att-menu-trash > span {
        font-size: 14px;
        padding: 10px 10px 0;
        display: block;
        font-weight: 500;
        opacity: .4
    }

.att-nofile-msg {
    position: absolute;
    top: 25%;
    left: 10%;
    right: 10%;
    text-align: center;
    width: 80%
}

    .att-nofile-msg i {
        font-size: 50px;
        color: #a0a0a0;
        color: #d0d0d0
    }

    .att-nofile-msg span {
        font-size: 18px;
        line-height: 35px;
        font-weight: 300;
        display: block;
        color: #d0d0d0
    }

    .att-nofile-msg .upl-btn {
        padding: 7px 15px;
        font-size: 15px;
        color: #fff;
        text-decoration: none;
        float: left;
        margin: 15px 39.5% 10px;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
        display: block
    }

        .att-nofile-msg .upl-btn:active {
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
            position: relative;
            top: 3px;
            left: 3px
        }

.deleted-file-list {
    width: 700px;
    float: left;
    background-color: rgba(242,242,242,0.25);
    height: 450px;
    display: none;
    overflow-y: auto;
    overflow-x: hidden
}

    .deleted-file-list .del-file-grid-list {
        background-color: #fff;
        transition: box-shadow .25s;
        border-radius: 2px;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
        width: 200px;
        height: 130px;
        margin: 1% 2%;
        box-sizing: border-box;
        float: left
    }

    .deleted-file-list h1 {
        font-size: 16px;
        font-weight: 400;
        color: #4f5256;
        margin: 15px;
        padding: 0;
        display: block;
       margin-top:0;
       margin-bottom:0;
    }

.att-file-list {
    width: 700px;
    float: left;
    background-color: rgba(242,242,242,0.25);
    height: 440px;
    position: relative
}

.att-file-list-def {
    float: left;
    width: 100%;
    overflow-y: auto;
    height: 450px
}

    .att-file-list-def h1 {
        font-size: 16px;
        font-weight: 400;
        color: #4f5256;
        margin: 15px;
        padding: 0;
        display: block;
        margin-top: 0;
        margin-bottom: 0;
    }

    .att-file-list-def .att-file-grid-list {
        background-color: #fff;
        transition: box-shadow .25s;
        border-radius: 2px;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
        width: 200px;
        height: 130px;
        margin: 1% 2%;
        box-sizing: border-box;
        float: left
    }

.att-file-name {
    width: 100%;
    float: left;
    display: block;
    height: 90px;
    border-bottom: 1px solid rgba(221,221,221,0.35);
    position: relative;
    overflow: hidden
}

.file-desc-fild-container {
    width: 100%;
    float: left;
    height: 91px;
    position: absolute;
    top: -95px;
    transition: .1s;
    z-index: 9
}

.file-desc-edi-fild {
    width: 100%;
    float: left;
    height: 90px
}

    .file-desc-edi-fild textarea, .file-desc-edi-fild label {
        width: 95%;
        padding: 2px;
        margin: 5px;
        box-sizing: border-box;
        resize: none;
        height: 80px;
        outline: 0;
        background-color: transparent;
        color: #fff;
        display: block;
        font-size: 13px;
        overflow: auto
    }

.att-file-name:hover .file-desc-fild-container {
    transition: .3s;
    top: 0
}

.bg-txt {
    background: rgba(27,45,175,0.83)
}

.bg-excl {
    background: rgba(15,157,88,0.7)
}

.bg-wrd {
    background: rgba(66,133,244,0.84)
}

.bg-pdf {
    background: rgba(219,68,55,0.81)
}

.att-icon {
    width: 40px;
    height: 90px;
    float: left;
    display: block;
    z-index: 5
}

    .att-icon i {
        font-size: 24px;
        float: left;
        display: block;
        padding: 34px 0 34px 10px;
        color: #fff
    }

.att-name {
    width: 160px;
    height: 90px;
    display: table-cell;
    text-align: center;
    vertical-align: middle
}

    .att-name span {
        display: block;
        box-sizing: border-box;
        overflow: hidden;
        font-size: 13px;
        line-height: 16px;
        color: #fff;
        padding: 0 5px;
        width: 160px;
        word-wrap: break-word;
        height: 33px
    }

.att-file-action {
    width: 100%;
    float: left;
    display: block;
    position: relative;
    padding: 0 0 0 15px;
    box-sizing: border-box
}

    .att-file-action a {
        display: block;
        float: left;
        opacity: .5;
        font-size: 14px;
        padding: 5px;
        margin: 0;
        color: #000;
        box-sizing: border-box
    }

        .att-file-action a > span {
            padding: 7px 0;
            float: left;
            box-sizing: border-box;
            display: block;
            font-size: 14px
        }

        .att-file-action a i {
            padding: 5px;
            font-size: 20px;
            float: left;
            box-sizing: border-box
        }

            .att-file-action a i.mdi-download {
                position: relative;
                top: 2px
            }

            .att-file-action a i.mdi-history {
                position: relative;
                top: 2px
            }

.att-from-comp {
    float: left;
    width: 100%;
    height: 450px;
    display: none
}

    .att-from-comp h1 {
        font-size: 16px;
        font-weight: 400;
        color: #4f5256;
        margin: 15px;
        padding: 0;
        display: block;
        margin-top: 0;
        margin-bottom: 0;
    }

.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: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
        outline: 0
    }

        .file_upload_div a.cancel {
            background-color: #fff;
            color: #000;
            outline: 1px solid rgba(191,191,191,0.47);
            box-sizing: border-box
        }

        .file_upload_div a.upload {
            color: #fff
        }

        .file_upload_div a:active {
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,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: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
    color: #fff
}

.log-up-msg {
    font-size: 12px;
    display: block;
    text-align: center;
    margin-top: -14px;
    color: #797979
}

.ver-lnk {
    display: block
}

    .ver-lnk:hover + .ver-dropdown {
        display: block
    }

.ver-dropdown {
    background-color: #fff;
    width: 175px;
    min-height: 40px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    position: absolute;
    right: 0;
    top: 30px;
    display: none;
    z-index: 99
}

    .ver-dropdown ul {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0
    }

        .ver-dropdown ul li {
            padding: 10px;
            font-size: 14px;
            display: block;
            float: left;
            width: 100%;
            box-sizing: border-box
        }

        .ver-dropdown ul > li > a {
            display: block;
            float: left;
            opacity: .5;
            font-size: 14px;
            padding: 0;
            margin: 0 2px;
            color: #000;
            box-sizing: border-box
        }

            .ver-dropdown ul > li > a > i {
                padding: 0;
                font-size: 20px;
                float: left;
                box-sizing: border-box
            }

            .ver-dropdown ul > li > a:first-child {
                width: 60%
            }

        .ver-dropdown ul > li > .profile-time {
            font-size: 10px;
            float: left;
            width: 100%;
            margin: 8px 0 0;
            color: gray
        }

            .ver-dropdown ul > li > .profile-time .proname {
                float: left;
                width: 45px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap
            }

            .ver-dropdown ul > li > .profile-time .prodate {
                float: right
            }

.att-from-drive {
    width: 100%;
    display: none;
    float: left;
    height: 500px
}

    .att-from-drive h1 {
        font-size: 16px;
        font-weight: 400;
        color: #4f5256;
        margin: 15px;
        padding: 0;
        display: block;
        float: left;
        margin-top: 0;
        margin-bottom: 0; 
    }

.google-drv-insert {
    float: right;
    margin: 5px
}

    .google-drv-insert a {
        padding: 5px 10px;
        font-size: 14px;
        text-decoration: none;
        float: left;
        color: #fff;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
    }

        .google-drv-insert a:active {
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
            position: relative;
            top: 3px;
            left: 3px
        }

.att-drive-tbl {
    width: 100%;
    background: #fff;
    display: block;
    max-height: 405px
}

    .att-drive-tbl table {
        margin: 0;
        border-collapse: collapse;
        font-size: 12px;
        width: 100%
    }

    .att-drive-tbl tr > th {
        background-color: #f0f0f0;
        vertical-align: middle;
        color: #333;
        border-width: 1px;
        text-transform: uppercase;
        border-bottom: 1px solid #f0f0f0;
        padding: 10px;
        line-height: 1.42857143;
        font-weight: 500;
        font-size: 12px;
        z-index: 0
    }

    .att-drive-tbl tr th:first-child {
        width: 5% !important;
        box-sizing: border-box
    }

        .att-drive-tbl tr th:first-child label {
            left: -4px
        }

    .att-drive-tbl tr th:nth-child(2) {
        width: 15% !important
    }

    .att-drive-tbl tr td:nth-child(2) i {
        font-size: 22px
    }

    .att-drive-tbl tr th:nth-child(3) {
        width: 15% !important
    }

    .att-drive-tbl tr td:nth-child(3) img {
        width: 35px;
        height: 35px;
        border: 0;
        outline: 0
    }

    .att-drive-tbl tr th:nth-child(4) {
        width: 65% !important
    }

    .att-drive-tbl table tr > td {
        vertical-align: middle;
        color: #333;
        border-width: 1px;
        border-bottom: 1px solid #f0f0f0;
        padding: 8px 2px;
        line-height: 1.42857143;
        text-align: center;
        font-size: 13px;
        font-weight: 400;
        box-sizing: border-box
    }

        .att-drive-tbl table tr > td a {
            color: #333;
            float: left
        }

.att-drive-check {
    cursor: pointer;
    position: relative;
    top: 4px;
    left: 4px;
    float: left
}

.att-drive-check-input {
    position: relative;
    top: -.375rem;
    margin: 0 .5rem 0 0;
    cursor: pointer
}

    .att-drive-check-input:before {
        transition: all .3s ease-in-out;
        content: "";
        position: absolute;
        left: 0;
        z-index: 1;
        width: .8rem;
        height: .8rem;
        border: 2px solid #e6e6e6
    }

    .att-drive-check-input:after {
        content: "";
        position: absolute;
        left: 0;
        width: 1rem;
        height: 1rem;
        background: #fff;
        cursor: pointer
    }

    .att-drive-check-input:checked:before {
        transform: rotate(-45deg);
        height: .5rem;
        border-color: #3aacf1;
        border-top-style: none;
        border-right-style: none
    }

.att-drive-check-input {
    position: relative;
    top: -.125rem
}

.comment-popup {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0,0,0,.7);
    top: 0;
    left: 0;
    z-index: 9999;
    display: none
}

.comment-content {
    width: 700px;
    height: 480px;
    background: #fff;
    border-radius: 2px;
    position: relative;
    padding: 5px 0;
    margin: 10% auto;
    border: 1px solid rgba(0,0,0,.12);
    box-sizing: border-box
}

    .comment-content .header {
        width: 100%;
        display: block;
        border-bottom: 1px solid rgba(221,221,221,0.36);
        float: left
    }

        .comment-content .header h2 {
            margin: 5px 8px;
            font-size: 20px;
            width: 91%;
            float: left;
            font-weight: 400
        }

        .comment-content .header .close-btn {
            float: left
        }

            .comment-content .header .close-btn a {
                margin: 3px 10px;
                display: block;
                font-weight: 500;
                font-size: 22px;
                color: #9e9e9e
            }

                .comment-content .header .close-btn a:hover {
                    color: #515151
                }

.chat-box {
    list-style: none;
    background: #f7f7f7;
    margin: 0;
    padding: 0 0 50px;
    height: 278px;
    overflow-y: auto;
    float: left;
    width: 100%
}

    .chat-box > div {
        padding: .5rem;
        overflow: hidden;
        display: flex
    }

    .chat-box .avatar-icon {
        width: 40px;
        position: relative
    }

        .chat-box .avatar-icon img {
            display: block;
            width: 100%;
            background-color: #1469a6
        }

.another .avatar-icon:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border: 5px solid #fff;
    border-left-color: transparent;
    border-bottom-color: transparent
}

.me {
    justify-content: flex-end;
    align-items: flex-end
}

    .me .messages {
        order: 1;
        border-bottom-right-radius: 0
    }

    .me .avatar-icon {
        order: 2
    }

        .me .avatar-icon:before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 0;
            border: 5px solid #fff;
            border-right-color: transparent;
            border-top-color: transparent;
            box-shadow: 1px 1px 2px rgba(0,0,0,0.2)
        }

.messages {
    background: #fff;
    padding: 10px;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2)
}

    .messages p {
        font-size: .8rem;
        margin: 0 0 .2rem
    }

    .messages span {
        font-size: .7rem;
        color: #ccc
    }

.setting {
    background-color: #e5e5e5;
    height: 32px;
    padding-top: 2px;
    border-bottom: 1px solid rgba(0,0,0,.1)
}

    .setting .left {
        float: left
    }

    .setting .right {
        float: right
    }

.iconicstroke-user {
    font-size: 22px;
    position: relative;
    top: 4px;
    left: 10px;
    color: #414141;
    cursor: pointer
}

.comment-textbox-cont {
    width: 100%;
    height: 100px;
    float: left;
    background-color: #e5e5e5
}

.textbox {
    position: relative
}

.comment-textbox-cont .textbox textarea {
    width: 84.5%;
    height: 55px;
    margin: 5px;
    background: #fff;
    padding: 10px;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    resize: none;
    border: 0;
    position: relative
}

    .comment-textbox-cont .textbox textarea:focus {
        outline: 0
    }

.comment-textbox-cont .textbox:after {
    content: '';
    position: absolute;
    top: 5px;
    right: 70px;
    width: 0;
    height: 0;
    border: 15px solid #fff;
    border-color: #fff transparent transparent
}

.comment-textbox-cont .submit {
    width: 60px;
    position: relative;
    top: 3px;
    float: right
}

    .comment-textbox-cont .submit a {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #1ba40a;
        float: left;
        box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
        color: #fff
    }

        .comment-textbox-cont .submit a i {
            font-size: 30px;
            padding: 11px
        }

.recall-content {
    width: 885px;
    height: 500px;
    background: #fff;
    border-radius: 2px;
    position: relative;
    padding: 5px 0;
    margin: 20% auto;
    border: 1px solid rgba(0,0,0,.12);
    box-sizing: border-box
}

    .recall-content .header {
        width: 100%;
        display: block;
        border-bottom: 1px solid rgba(221,221,221,0.36);
        float: left
    }

        .recall-content .header h2 {
            margin: 5px 8px;
            font-size: 20px;
            width: 93%;
            float: left;
            font-weight: 400
        }

        .recall-content .header .close-btn {
            float: left
        }

            .recall-content .header .close-btn a {
                margin: 3px 10px;
                display: block;
                font-weight: 500;
                font-size: 22px;
                color: #9e9e9e
            }

                .recall-content .header .close-btn a:hover {
                    color: #515151
                }

.recall-cont {
    width: 100%;
    background: #fff;
    display: block;
    max-height: 470px;
    margin-bottom: 5px
}

    .recall-cont table {
        margin: 0 auto;
        border-collapse: collapse;
        font-size: 12px
    }

        .recall-cont table tr > th {
            background-color: #f0f0f0;
            vertical-align: middle;
            color: #484848;
            border-width: 1px;
            text-transform: uppercase;
            border-bottom: 1px solid #f0f0f0;
            padding: 10px;
            line-height: 1.42857143;
            font-weight: 500;
            font-size: 12px;
            z-index: 0
        }

        .recall-cont table tr > td {
            vertical-align: middle;
            color: #333;
            border-width: 1px;
            border-bottom: 1px solid #f0f0f0;
            padding: 8px 2px;
            line-height: 1.42857143;
            text-align: left;
            min-width: 105px;
            font-size: 14px;
            font-weight: 400;
            box-sizing: border-box;
            z-index: 0
        }

            .recall-cont table tr > td.int {
                text-align: right
            }

        .recall-cont table > tbody > tr:nth-of-type(odd) {
            background-color: #fefefe
        }

        .recall-cont table tr > td:first-child a {
            color: #888;
            font-size: 20px;
            margin-left: 15px
        }

            .recall-cont table tr > td:first-child a:hover {
                color: #000
            }

.signature-content {
    width: 885px;
    height: 350px;
    background: #fff;
    border-radius: 2px;
    position: relative;
    padding: 5px 0;
    margin: 20% auto;
    border: 1px solid rgba(0,0,0,.12);
    box-sizing: border-box
}

    .signature-content .header {
        width: 100%;
        display: block;
        border-bottom: 1px solid rgba(221,221,221,0.36);
        float: left
    }

        .signature-content .header h2 {
            margin: 5px 8px;
            font-size: 20px;
            width: 93%;
            float: left;
            font-weight: 400
        }

        .signature-content .header .close-btn {
            float: left
        }

            .signature-content .header .close-btn a {
                margin: 3px 10px;
                display: block;
                font-weight: 500;
                font-size: 22px;
                color: #9e9e9e
            }

                .signature-content .header .close-btn a:hover {
                    color: #515151
                }

.signature-cont {
    width: 100%;
    background: #fff;
    display: block;
    max-height: 440px
}

    .signature-cont table {
        margin: 0 auto;
        border-collapse: collapse;
        font-size: 12px
    }

        .signature-cont table tr > th {
            background-color: #f0f0f0;
            vertical-align: middle;
            color: #333;
            border-width: 1px;
            text-transform: uppercase;
            border-bottom: 1px solid #f0f0f0;
            padding: 10px;
            line-height: 1.42857143;
            font-weight: 500;
            font-size: 12px;
            z-index: 0
        }

        .signature-cont table tr > td {
            vertical-align: middle;
            color: #333;
            border-width: 1px;
            border-bottom: 1px solid #f0f0f0;
            padding: 8px 2px;
            line-height: 1.42857143;
            text-align: left;
            min-width: 105px;
            font-size: 14px;
            font-weight: 400;
            box-sizing: border-box;
            z-index: 0
        }

            .signature-cont table tr > td.int {
                text-align: right
            }

        .signature-cont table > tbody > tr:nth-of-type(odd) {
            background-color: #fefefe
        }

        .signature-cont table tr > td:first-child a {
            color: #888;
            font-size: 20px;
            margin-left: 15px
        }

            .signature-cont table tr > td:first-child a:hover {
                color: #000
            }

.recflow-content {
    width: 75%;
    height: 500px;
    background: #fff;
    border-radius: 2px;
    position: relative;
    padding: 5px 0;
    margin: 5% auto;
    border: 1px solid rgba(0,0,0,.12);
    box-sizing: border-box
}

    .recflow-content .header {
        width: 100%;
        display: block;
        border-bottom: 1px solid rgba(221,221,221,0.36);
        height: 40px
    }

        .recflow-content .header h2 {
            margin: 5px 8px;
            font-size: 20px;
            width: 93%;
            float: left;
            font-weight: 400
        }

        .recflow-content .header .close-btn {
            position: relative;
            left: 1.5%
        }

            .recflow-content .header .close-btn a {
                margin: 3px 10px;
                display: block;
                font-weight: 500;
                font-size: 22px;
                color: #9e9e9e
            }

.recflow-cont {
    width: 100%;
    background: #fff;
    display: block;
    position: absolute;
    top: 50px
}

.maingrid-import-cont {
    width: 500px;
    height: 200px;
    background: #fff;
    border-radius: 2px;
    position: relative;
    padding: 5px 0;
    margin: 5% auto;
    border: 1px solid transparent;
    -webkit-box-shadow: 0 4px 8px rgba(0,0,0,.32),0 8px 40px rgba(0,0,0,.4);
    box-shadow: 0 4px 8px rgba(0,0,0,.32),0 8px 40px rgba(0,0,0,.4);
    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-cont .title .close-btn a:hover {
                    color: #515151
                }

.maingrid-import-btn {
    float: left;
    display: block;
    width: 100%;
    padding: 5% 10%;
    box-sizing: border-box
}

.maingrid-import-input {
    width: 400px;
    height: 40px
}

.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: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
    outline: 0
}

    .maingrid-import-btn a.cancel {
        background-color: #fff;
        color: #000;
        outline: 1px solid rgba(191,191,191,0.47);
        box-sizing: border-box
    }

    .maingrid-import-btn a.upload {
        color: #fff
    }

    .maingrid-import-btn a:active {
        position: relative;
        top: 3px;
        left: 3px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0)
    }

.main-grid-trigger-from-to-cont {
    width: 500px;
    min-height: 200px;
    background: #fff;
    border-radius: 2px;
    padding: 5px 0 10px;
    margin: 5% 25%;
    border: 1px solid transparent;
    -webkit-box-shadow: 0 4px 8px rgba(0,0,0,.32),0 8px 40px rgba(0,0,0,.4);
    box-shadow: 0 4px 8px rgba(0,0,0,.32),0 8px 40px rgba(0,0,0,.4);
    box-sizing: border-box;
    float: left
}

    .main-grid-trigger-from-to-cont .title {
        width: 100%;
        display: block;
        border-bottom: 1px solid rgba(221,221,221,0.36);
        float: left
    }

        .main-grid-trigger-from-to-cont .title h2 {
            margin: 5px 8px;
            font-size: 20px;
            width: 88%;
            float: left;
            font-weight: 400
        }

        .main-grid-trigger-from-to-cont .title .close-btn {
            float: left
        }

            .main-grid-trigger-from-to-cont .title .close-btn a {
                margin: 3px 10px;
                display: block;
                font-weight: 500;
                font-size: 22px;
                color: #9e9e9e
            }

                .main-grid-trigger-from-to-cont .title .close-btn a:hover {
                    color: #515151
                }

.trigger-main-container {
    width: 100%;
    display: block;
    float: left;
    padding-top: 10px
}

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

.trigger-data-first {
    display: block;
    float: left;
    width: 60%
}

    .trigger-data-first label {
        font-size: 12px;
        color: #333;
        font-weight: 500;
        padding: 0 5px
    }

.trigger-data-second {
    display: block;
    float: left;
    width: 20%
}

    .trigger-data-second label {
        font-size: 12px;
        color: #333;
        font-weight: 500
    }

.trigger-data-third {
    display: block;
    float: left;
    width: 20%
}

    .trigger-data-third a {
        font-size: 12px;
        color: #333;
        font-weight: 500
    }

        .trigger-data-third a:hover {
            text-decoration: underline
        }

.trigger-data-first-title {
    display: block;
    float: left;
    width: 60%
}

    .trigger-data-first-title label {
        font-size: 14px;
        color: #333;
        font-weight: 500;
        padding: 0 5px
    }

.trigger-data-second-title {
    display: block;
    float: left;
    width: 20%
}

    .trigger-data-second-title label {
        font-size: 14px;
        color: #333;
        font-weight: 500
    }

.trigger-data-third-title {
    display: block;
    float: left;
    width: 20%
}

    .trigger-data-third-title label {
        font-size: 14px;
        color: #333;
        font-weight: 500
    }

.advsearch-cont {
    width: 660px;
    height: 300px;
    background: #fff;
    border-radius: 2px;
    padding: 0 0 10px;
    border: 1px solid transparent;
    -webkit-box-shadow: 0 4px 8px rgba(0,0,0,.32),0 8px 40px rgba(0,0,0,.4);
    box-shadow: 0 4px 8px rgba(0,0,0,.32),0 8px 40px rgba(0,0,0,.4);
    box-sizing: border-box;
    display: none;
    position: absolute;
    top: 45px;
    right: 80px;
    z-index: 99
}

    .advsearch-cont:before {
        content: '\f360';
        position: absolute;
        font-family: Material Design Icons;
        color: #f9f9f9;
        font-size: 50px;
        top: -34px;
        right: -3px
    }

    .advsearch-cont > .atitle {
        width: 100%;
        display: block;
        border-bottom: 1px solid rgba(221,221,221,0.36);
        float: left;
        height: 33px
    }

        .advsearch-cont > .atitle > .hea-tag {
            margin: 5px 8px;
            font-size: 16px;
            width: 91%;
            float: left;
            font-weight: 400
        }

        .advsearch-cont > .atitle > .close-btn {
            float: left
        }

            .advsearch-cont > .atitle > .close-btn a {
                margin: 3px 10px;
                display: block;
                font-weight: 500;
                font-size: 22px;
                color: #9e9e9e
            }

        .advsearch-cont > .atitle .close-btn a:hover {
            color: #515151
        }

.adv-search-cont {
    display: block;
    float: left;
    width: 100%;
    overflow-y: auto;
    height: 260px;
    padding: 5px;
    overflow-x: hidden;
    box-sizing: border-box
}

    .adv-search-cont table {
        display: block;
        width: 100%;
        float: left
    }

        .adv-search-cont table tr {
            display: block;
            padding-bottom: 4px
        }

        .adv-search-cont table td {
            padding-right: 0
        }

            .adv-search-cont table td .adv-search-select {
                width: 190px
            }

            .adv-search-cont table td input {
                width: 150px;
                border: solid #ddd;
                border-width: 0 0 1px;
                outline: 0;
                font-size: 14px;
                height: 30px;
                margin-bottom: 0;
                font-weight: 400
            }

            .adv-search-cont table td a {
                color: #888;
                font-size: 22px
            }

                .adv-search-cont table td a:hover {
                    color: #000
                }

.lookup-mainkey-add-btn {
    width: 100%;
    float: left;
    position: relative;
    height: 58px
}

.advance-dropdown {
    position: absolute;
    top: 100%;
    display: none;
    margin: 0;
    list-style: none;
    width: 30px;
    padding: 0;
    margin-top: -29px
}

.adv_sea_box {
    position: absolute;
    width: 158px;
    height: 29px;
    border: 1px solid #419aff;
    border-radius: 2px;
    left: 130px;
    top: 35px;
    display: none;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border linear .2s,box-shadow linear .2s;
    -moz-transition: border linear .2s,box-shadow linear .2s;
    -ms-transition: border linear .2s,box-shadow linear .2s;
    -o-transition: border linear .2s,box-shadow linear .2s;
    transition: border linear .2s,box-shadow linear .2s;
    z-index: 8
}

    .adv_sea_box:before {
        content: '\f360';
        font-family: 'Material Design Icons';
        font-size: 45px;
        position: absolute;
        top: -30px;
        right: -2px
    }

    .adv_sea_box a {
        font-size: 14px !important;
        text-indent: 4px;
        padding: 5px;
        display: block;
        float: left;
        color: #fff !important
    }

    .adv_sea_box i {
        font-size: 15px
    }

.adv-search-cont table td .add-row-btn {
    display: block;
    float: left;
    padding: 5px;
    border-radius: 2px;
    color: #fff;
    margin: 10px 5px;
    font-size: 14px;
    box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
    background-color: #d14836;
    background-image: -webkit-linear-gradient(top,#dd4b39,#d14836);
    background-image: linear-gradient(top,#dd4b39,#d14836);
    border: solid #b0281a;
    border-width: 1px
}

.adv-search-cont table td:nth-child(2) .adv-search-select {
    width: 300px
}

.adv-search-cont table td:nth-child(3) .adv-search-select {
    width: 85px
}

.adv-search-cont table td:nth-child(5) .adv-search-select {
    width: 70px
}

.adv-search-cont table td .add-row-btn:active {
    position: relative;
    top: 3px;
    left: 3px;
    color: #fff
}

.adv-search-cont table td .add-row-btn:hover {
    color: #fff
}

.adv-search-cont table td .search-btn {
    display: block;
    float: left;
    border-radius: 3px;
    color: #fff;
    margin: 10px 5px;
    padding: 6px 5px;
    font-size: 14px;
    box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
}

    .adv-search-cont table td .search-btn:active {
        position: relative;
        top: 3px;
        left: 3px
    }

div.radio-check-group {
    border-radius: 2px;
    float: left;
    width: 55%;
    display: block;
    padding: 8px 0 0;
    box-sizing: border-box;
    margin-left: 31px
}

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



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

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

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

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

    .radio-check-group input[type="radio"] + .lab-radio > span {
        font-size: 12px;
        border: 1px solid #c5c4c4;
        padding: 3px 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: "\f12c";
        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
    }

.workflow-full-width-checkbox {
    float: left;
    width: 100%;
    position: relative;
    margin: 5px 0 0 5px;
    vertical-align: top;
    min-height: 50px
}

    .workflow-full-width-checkbox span {
        width: 20%;
        float: left;
        display: block;
        text-align: right;
        font-size: 12px;
        font-weight: 500;
        padding: 8px 10px;
        box-sizing: border-box;
        word-wrap: break-word
    }

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

.lab-chbx, .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: 0 2px 4px 0 rgba(0,0,0,0.05),0 2px 10px 0 rgba(0,0,0,0.05)
}

    .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
        }

.approval-approved-stage-label {
    float: left;
    width: 100%
}

    .approval-approved-stage-label .approval-lab-stg {
        width: 100%
    }

#ApprovalForm div.approval-review-status-cont:last-child {
    margin: 5px 5.35% 25px !important
}

.approval-review-status-cont {
    border-radius: 3px;
    background-color: #fff;
    color: #4f5256;
    border: 1px solid rgba(0,0,0,.12);
    width: 90%;
    margin: 5px 5.35%;
    float: left;
    display: block;
    position: relative;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05),0 2px 10px 0 rgba(0,0,0,0.05)
}

.appaudit {
    display: block;
    font-size: 20px;
    float: right;
    margin: 5px;
    color: gray
}

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

.app-msg-cont {
    float: left;
    width: 60%
}

.due-msg {
    float: left;
    width: 15%
}

    .due-msg span {
        background-color: #e46900;
        padding: 1px 3px;
        font-size: 12px;
        border-radius: 2px;
        color: #fff;
        display: block;
        float: right;
        margin: 10px 5px
    }

.app-msg-cont .app-msg {
    width: 100%;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    padding: 10px 0 0;
    box-sizing: border-box;
    font-style: italic
}

.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
}

.app-new {
    color: #dd4b39
}

.app-rej {
    color: #de0b0b
}

.app-pend {
    color: #195396
}

.app-close {
    color: #d8437a
}

.app-complete {
    color: #1ba40a
}

.app-msg .usr-nam {
    padding: 0 10px
}

.app-msg .stage i {
    position: relative;
    top: 2px;
    font-size: 18px;
    padding: 0 5px
}

.app-msg .usr-nam i {
    position: relative;
    top: 2px;
    font-size: 18px;
    padding: 0 5px;
    color: #4f5256
}

.app-msg .do-time i {
    position: relative;
    top: 2px;
    font-size: 18px;
    padding: 0 5px;
    color: #4f5256
}

.approval-comt {
    position: relative;
    top: 5px;
    padding: 0 0 5px;
    font-style: italic;
    text-align: center
}

    .approval-comt > span {
        margin: 8px 10px 5px;
        font-size: 12px
    }

    .approval-comt > blockquote p {
        display: inline
    }

    .approval-comt .mdi-format-quote {
        font-size: 18px
    }

.approval_placeholder_cont {
    padding-bottom: 170px
}

.approval_placeholder {
    position: fixed;
    bottom: 0;
    width: 60%;
    left: 20%;
    margin: 0;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: 0 -1px 13px 7px rgba(0,0,0,0.31),0 2px 10px 0 rgba(0,0,0,0.61);
    background: #fff;
}

    .approval_placeholder .title h2 {
        background-color: #706a82;
        color: #fff !important;
        margin-bottom: 10px;
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0
    }

.approval_placeholder_title_h2_min {
    margin-bottom: 0 !important
}

.approval_placeholder_min {
    padding: 0 !important
}

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

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

div.appr-radio-group {
    border-radius: 2px;
    float: left;
    width: 75%;
    padding: 5px
}

.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"]:disabled + .lab-chbx, .radio-check-group input[type="radio"]:disabled + .lab-radio {
        background-color: #ddd
    }

.aprval-rdo-list {
    height: 30px;
    float: left;
    position: relative;
    display: block
}

    .aprval-rdo-list input[type="radio"] {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 95%;
        bottom: 1px;
        border-bottom: 1px solid #fff;
   
        appearance: none;
        outline: 0;
        opacity: 0
    }

.appr-radio-group input[type="checkbox"] + .lab-chbx span {
    font-size: 12px;
    border: 1px solid #c5c4c4;
    padding: 2px 15px;
    float: left;
    border-radius: 4px;
    width: 100%;
    position: relative
}

.appr:hover span {
    border: 1px solid #1ba40a;
    color: #fff;
    background: #1ba40a
}

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


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

.rej:hover span {
    border: 1px solid #b90707;
    color: #fff;
    background: #b90707
}

.appr-radio-group input[type="radio"]:checked + .pros span {
    border: 1px solid #e46900 !important;
    color: #fff;
    background: #e46900 !important
}

.pros:hover span {
    border: 1px solid #e46900;
    color: #fff;
    background: #e46900
}

.appr-radio-group input[type="radio"]:checked + .canc span {
    border: 1px solid #d8437a !important;
    color: #fff;
    background: #d8437a !important
}

.canc:hover span {
    border: 1px solid #d8437a;
    color: #fff;
    background: #d8437a
}

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

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

.appr-radio-group input[type="radio"] + .lab-radio span {
    font-size: 13px;
    border: 1px solid #c5c4c4;
    padding: 4px 15px;
    float: left;
    border-radius: 4px;
    width: 100%;
    position: relative;
    color: inherit
}

.appr-radio-group input[type="radio"]:checked + .rej span:after {
    content: "\f156";
    font-family: Material Design Icons;
    position: absolute;
    top: 1px;
    left: -2px;
    pointer-events: none;
    padding: 4px;
    box-sizing: border-box;
    font-size: 14px
}

.appr-radio-group input[type="radio"]:checked + .appr span:after {
    content: "\f12c";
    font-family: Material Design Icons;
    position: absolute;
    top: 1px;
    left: -2px;
    pointer-events: none;
    padding: 4px;
    box-sizing: border-box;
    font-size: 14px
}

.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
    }

    .workflow-approval-field textarea {
        width: 75%;
        height: 40px;
        resize: none;
        float: left;
        display: block;
        text-align: left;
        font-size: 14px;
        padding: 5px;
        border: solid #e0e0e0;
        border-width: 0 0 1px;
        -webkit-appearance: none;
        box-sizing: border-box;
        color: #636367
    }

.review-lab-stg {
    width: 100%;
    float: left
}

    .review-lab-stg .rapp-msg {
        width: 80%;
        margin: 0 auto 10px;
        font-size: 14px;
        text-align: center
    }

.review-succ {
    color: #1ba40a
}

.review-rej {
    color: #de0b0b
}

.review-close {
    color: #1ba40a
}

.review-complete {
    color: #1ba40a
}

.rapp-msg .review-nam {
    padding: 0 10px
}

    .rapp-msg .review-nam i {
        position: relative;
        top: 2px;
        font-size: 22px;
        padding: 0 5px;
        color: #4f5256
    }

.rapp-msg .rdo-time i {
    position: relative;
    top: 2px;
    font-size: 22px;
    padding: 0 5px;
    color: #4f5256
}

.review-comt {
    width: 80%;
    margin: 0 auto;
    font-size: 16px;
    text-align: left
}

    .review-comt > blockquote {
        background: #f9f9f9;
        border-left: 1px solid #ccc;
        margin: 8px 10px 0;
        padding: .5em 10px;
        quotes: "\201C""\201D""\2018""\2019"
    }

        .review-comt > blockquote:before {
            color: #ccc;
            content: open-quote;
            font-size: 4em;
            line-height: .1em;
            margin-right: .25em;
            vertical-align: -.4em
        }

        .review-comt > blockquote p {
            display: inline
        }

.work-selection-dropdown {
    padding: 0 16px;
    border-bottom: 1px solid #f1f1f1;
    background-color: #fff;
    width: 98%;
    height: 50px
}

.wrkflo-list {
    float: left;
    display: block;
    position: relative;
    margin-right: 15px
}

    .wrkflo-list span {
        border: 1px solid #ddd;
        padding: 5px;
        display: block;
        width: 98px;
        margin: 5px auto;
        font-size: 20px;
        border-radius: 4px;
        border-bottom: 4px solid #ddd
    }

.mast-list {
    float: left;
    display: block;
    position: relative;
    margin-right: 15px
}

    .mast-list span {
        border: 1px solid #ddd;
        padding: 5px;
        display: block;
        width: 70px;
        margin: 5px auto;
        font-size: 20px;
        border-radius: 4px;
        border-bottom: 4px solid #ddd
    }

        .mast-list span:active, .wrkflo-list span:active {
            border-bottom: 1px solid #ddd;
            margin-top: 6px
        }

.wrkflo-drop-list {
    background-color: #fff;
    width: 125px;
    height: 100px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    position: absolute;
    display: none;
    z-index: 99
}

    .wrkflo-drop-list ul {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0
    }

        .wrkflo-drop-list ul li {
            padding: 7px;
            font-size: 14px
        }

.workmain-grid-container {
    border-radius: 3px;
    background-color: #fff;
    color: #4f5256;
    width: 98%;
    margin: 0 1%;
    float: left;
    display: block;
    z-index: 4;
    position: relative
}

    .workmain-grid-container .title {
        width: 100%;
        display: block;
        float: left;
        padding: 0 5px;
        box-sizing: border-box;
        position: absolute;
        z-index: 1
    }

    .workmain-grid-container .customcntl {
        width: 100%;
        display: block;
        float: left;
        padding: 0 5px;
        box-sizing: border-box
    }

    .workmain-grid-container .cus {
        width: 20%;
        float: left
    }

    .workmain-grid-container .tbleinfo {
        width: 77%;
        float: left
    }

    .workmain-grid-container .recall {
        width: 3%;
        float: left
    }

    .workmain-grid-container .title h2 {
        margin: 12px;
        font-size: 16px;
        float: left;
        font-weight: 400
    }

.main-grid-search {
    float: left;
    display: block;
    width: 35%;
    margin: 2px 0;
    position: relative
}

    .main-grid-search input {
        outline: 0;
        box-shadow: none;
        border-width: 0 0 2px;
        font-size: 14px;
        float: left;
        padding: 5px 2px;
        box-sizing: border-box;
        margin: 0;
        width: 80%
    }

    .main-grid-search a {
        font-size: 22px;
        margin: 5px;
        color: #000;
        display: block;
        float: left;
        outline: 0
    }

    .main-grid-search .lis a {
        color: #000
    }

    .main-grid-search .lis:hover > .adv_sea_box {
        display: block !important
    }

.main-grid-adv-src {
    position: relative;
    float: left;
    display: block;
    cursor: pointer
}

    .main-grid-adv-src i {
        position: absolute;
        top: 5px;
        right: -2px;
        font-size: 24px;
        color: #7b7b7b
    }

        .main-grid-adv-src i:hover {
            color: #000
        }

.delete-grid-top a {
    float: left;
    padding: 2px;
    border: solid #ddd;
    border-width: 1px;
    color: #888;
    height: 23px;
    border-radius: 2px;
    background: #f5f5f5;
    position: relative;
    top: 1px
}

    .delete-grid-top a i {
        font-size: 22px
    }

.recall-btn {
    background-color: #f5f5f5;
    border: 1px solid #dbdbdb;
    padding: 4px 3px;
    color: #888 !important;
    margin: 3px 0 !important;
    border-radius: 2px;
    height: 20px;
    float: left
}

    .recall-btn:hover {
        color: #000
    }

    .recall-btn i {
        font-size: 22px
    }

.advance-option a {
    font-size: 14px
}

.advance-option:hover {
    display: block
}

.main-grid-check {
    cursor: pointer;
    position: relative;
    top: 4px;
    left: 4px;
    float: left
}

.main-grid-check-input {
    position: relative;
    top: -.375rem;
    margin: 0 .5rem 0 0;
    cursor: pointer
}

    .main-grid-check-input:before {
        transition: all .3s ease-in-out;
        content: "";
        position: absolute;
        left: 0;
        z-index: 1;
        width: .8rem;
        height: .8rem;
        border: 2px solid #e6e6e6
    }

    .main-grid-check-input:after {
        content: "";
        position: absolute;
        left: 0;
        width: 1rem;
        height: 1rem;
        background: #fff;
        cursor: pointer
    }

    .main-grid-check-input:checked:before {
        transform: rotate(-45deg);
        height: .5rem;
        border-color: #3aacf1;
        border-top-style: none;
        border-right-style: none
    }



.main-gr-check {
    float: left;
    display: block;
    height: 20px
}

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

    .main-gr-check [type="checkbox"] + label {
        position: relative;
        padding-left: 21px;
        cursor: pointer;
        display: inline-block;
        height: 20px;
        box-sizing: border-box;
        font-size: .9rem;
        -webkit-user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -ms-user-select: none;
        margin: 0
    }

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

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

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

.one-to-mani-chk {
    float: left;
    display: block;
    height: 20px;
    position: relative
}

    .one-to-mani-chk[type="checkbox"]:not(:checked), .one-to-mani-chk[type="checkbox"]:checked {
        position: absolute;
        left: -9999px;
        opacity: 0
    }

    .one-to-mani-chk [type="checkbox"] + label {
        position: relative;
        padding-left: 19px;
        cursor: pointer;
        display: inline-block;
        height: 20px;
        box-sizing: border-box;
        font-size: .9rem;
        -webkit-user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -ms-user-select: none;
        margin-left: 25px;
        background-color: #fff
    }

        .one-to-mani-chk [type="checkbox"] + label:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 13px;
            height: 13px;
            z-index: 0;
            border: 2px solid #afafaf;
            border-radius: 1px;
            margin-top: 2px;
            transition: .2s
        }

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

    .one-to-mani-chk input[type="checkbox"] {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 80%;
        bottom: 2px;
        border-bottom: 1px solid #fff;
        opacity: 0
    }

        .one-to-mani-chk input[type="checkbox"]:focus + label {
            -webkit-transform: scale(1);
            transform: scale(1);
            border: 0;
            border-radius: 50%;
            outline: 0;
            box-shadow: 0 0 0 10px rgba(21,101,193,0.26);
            background-color: #c1d7ef
        }

        .one-to-mani-chk input[type="checkbox"]:focus {
            border: 0
        }

.one-to-manifull-chk {
    float: left;
    display: block;
    height: 20px;
    position: relative;
    margin: 0 2.4%
}

    .one-to-manifull-chk[type="checkbox"]:not(:checked), .one-to-manifull-chk[type="checkbox"]:checked {
        position: absolute;
        left: -9999px;
        opacity: 0
    }

    .one-to-manifull-chk [type="checkbox"] + label {
        position: relative;
        padding-left: 19px;
        cursor: pointer;
        display: inline-block;
        height: 20px;
        box-sizing: border-box;
        font-size: .9rem;
        -webkit-user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -ms-user-select: none;
        margin: 0;
        background-color: #fff
    }

        .one-to-manifull-chk [type="checkbox"] + label:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 13px;
            height: 13px;
            z-index: 0;
            border: 2px solid #afafaf;
            border-radius: 1px;
            margin-top: 2px;
            transition: .2s
        }

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

    .one-to-manifull-chk input[type="checkbox"] {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 80%;
        bottom: 2px;
        border-bottom: 1px solid #fff;
        opacity: 0
    }

        .one-to-manifull-chk input[type="checkbox"]:focus + label {
            -webkit-transform: scale(1);
            transform: scale(1);
            border: 0;
            border-radius: 50%;
            outline: 0;
            box-shadow: 0 0 0 10px rgba(21,101,193,0.26);
            background-color: #c1d7ef
        }

        .one-to-manifull-chk input[type="checkbox"]:focus {
            border: 0
        }

.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: solid #ddd;
        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;
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px
        }

        .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 i:hover {
            color: #000
        }

.multiple-app-container {
    float: left;
    width: 125px
}

.multiple-approval {
    float: left;
    background-color: #f5f5f5;
    background-image: linear-gradient(to bottom, #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;
    overflow-y: auto;
    float: left;
    position: absolute;
    top: 35px;
    background: #fff;
    border: 1px solid #ddd;
    z-index: 6;
    padding: 5px;
    box-sizing: border-box;
    display: none;
    overflow-x: hidden;

}

div.multiple-approval-chk {
    border-radius: 2px;
    float: left;
    width: 100%;
    display: block
}

.multiple-approval-chk input[type="checkbox"] {
    display: none
}

    .multiple-approval-chk input[type="checkbox"] + .multi-la-radio span {
        font-size: 12px;
        border: 1px solid #c5c4c4;
        padding: 3px 15px;
        line-height: 12px;
        float: left;
        border-radius: 4px;
        width: 100%;
        position: relative
    }

    .multiple-approval-chk input[type="checkbox"]:checked + .multi-la-radio span:after {
        content: "\f12c";
        font-family: Material Design Icons;
        position: absolute;
        top: -1px;
        left: -3px;
        pointer-events: none;
        padding: 4px;
        box-sizing: border-box;
        font-size: 12px
    }

.multiple-approval-chk label:after {
    content: "";
    background: transparent
}

.multiple-approval-chk input[type="radio"] {
    display: none
}

    .multiple-approval-chk input[type="radio"] + .multi-la-radio > span {
        font-size: 12px;
        border: 1px solid #c5c4c4;
        padding: 3px 15px;
        line-height: 15px;
        border-radius: 4px;
        width: 100%;
        position: relative;
        text-align: left;
        display: block;
        box-sizing: border-box;
        font-weight: 500
    }

    .multiple-approval-chk input[type="radio"]:checked + .multi-la-radio.apprv span {
        border: 1px solid #1ba40a;
        color: #fff;
        background: #1ba40a
    }

    .multiple-approval-chk input[type="radio"]:checked + .multi-la-radio.rej span {
        border: 1px solid #b90707;
        color: #fff;
        background: #b90707
    }

.multi-la-radio.apprv:hover span {
    border: 1px solid #1ba40a;
    color: #fff;
    background: #1ba40a
}

.multi-la-radio.rej:hover span {
    border: 1px solid #b90707;
    color: #fff;
    background: #b90707
}

.multiple-approval-chk input[type="radio"]:checked + .multi-la-radio span:after {
    content: "\f12c";
    font-family: Material Design Icons;
    position: absolute;
    top: -1px;
    left: -3px;
    pointer-events: none;
    padding: 4px;
    box-sizing: border-box;
    font-size: 12px
}

.multi-la-radio {
    float: left;
    display: block;
    margin: 0 5px 5px 0;
    width: 95px;
    position: relative
}

.grid-left-right-arrow {
    float: left;
    border-radius: 2px;
    font-size: 12px;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #f5f5f5;
    background-image: linear-gradient(to bottom, #f5f5f5, #f1f1f1);
    color: #444;
    border: 1px solid rgba(0,0,0,0.1);
    margin: 8px
}

    .grid-left-right-arrow a {
        -webkit-box-shadow: none;
        box-shadow: none;
        width: 35px;
        font-size: 12px;
        height: 26px;
        padding: 5px 8px;
        float: left;
        background-color: #f5f5f5;
        background-image: linear-gradient(to bottom, #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 i {
            margin: 0;
            font-size: 20px
        }

        .grid-left-right-arrow a:hover {
            background: #fff;
            color: #000
        }

    .grid-left-right-arrow .gri-goto-page {
        -webkit-box-shadow: none;
        box-shadow: none;
        width: 50px;
        height: 26px;
        float: left;
        background-color: #f5f5f5;
        background-image: linear-gradient(to bottom, #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: "\F140";
                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 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: "\F140";
            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: transparent;
            box-shadow: none;
            width: 60px;
            height: 27px;
            float: left;
            background-color: #f5f5f5;
            background-image: linear-gradient(to bottom, #f5f5f5, #f1f1f1);
            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
    }

.master-drop-list {
    background-color: #fff;
    width: 200px;
    height: 200px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    position: absolute;
    display: none;
    z-index: 99
}

    .master-drop-list ul {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0
    }

        .master-drop-list ul li {
            padding: 7px 10px;
            font-size: 14px
        }

.workflow-main-grid {
    width: 100%;
    background: #fff;
    display: block;
    border-radius: 2px;
    box-shadow: 0 0 2px rgba(20,20,20,0.18)
}

    .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: 1px solid #f0f0f0;
        padding: 10px 5px;
        line-height: 1.42857143;
        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: 1px solid #f0f0f0;
        padding: 8px 5px;
        line-height: 1.42857143;
        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
        }

.payment-subscription-container {
    width: 97.5%;
    min-height: 500px;
    margin: .75%;
    position: relative;
    float: left;
    display: none;
    border-radius: 3px;
    background-color: #f2f2f2;
    color: #4f5256;
    margin-bottom: 8px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05),0 2px 10px 0 rgba(0,0,0,0.05)
}

.payment-top-title {
    display: block;
    width: 100%;
    float: left;
    height: 42px;
    border-bottom: 1px solid rgba(221,221,221,0.36);
    background-color: #fff
}

    .payment-top-title h1 {
        font-size: 16px;
        font-weight: 400;
        padding: 2px 15px;
        float: left;
        box-sizing: border-box;
        margin: 0;
        line-height: 40px
    }

.plan-payment-box-close a {
    color: #9e9e9e;
    font-size: 22px;
    margin: 10px;
    float: right
}

    .plan-payment-box-close a:hover {
        color: #515151
    }

.payment-subdcr-left-menu {
    background-color: #f2f2f2;
    width: 15%;
    min-height: 500px;
    float: left;
    box-sizing: border-box
}

.plan-option-list {
    margin: 20px 0;
    padding: 0;
    list-style: none
}

    .plan-option-list li a {
        color: #000;
        outline: 0
    }

    .plan-option-list li {
        padding: 15px;
        box-sizing: border-box;
        font-size: 14px;
        cursor: pointer
    }

        .plan-option-list li.active {
            margin-right: -1px;
            background-color: #e4e4e4;
            color: #000;
            font-weight: 400
        }

        .plan-option-list li:hover {
            margin-right: -1px;
            background-color: #e4e4e4;
            color: #000;
            font-weight: 400
        }

.payment-subdcr-right-container {
    background-color: #fff;
    width: 85%;
    min-height: 500px;
    float: left;
    box-sizing: border-box;
    z-index: 5
}

    .payment-subdcr-right-container h3 {
        font-size: 15px;
        font-weight: 500;
        float: left;
        width: 100%;
        margin: 10px 10px 5px
    }

.payemnt-user-info {
    margin: 15px 0;
    float: left
}

.plan-option, .billing-info, .payment-hist {
    display: none
}

.bill-info-field {
    width: 78%;
    margin: 2% 11%;
    height: 50px;
    float: left;
    position: relative
}

    .bill-info-field span {
        width: 100%;
        float: left;
        display: block;
        text-align: left;
        font-size: 12px;
        font-weight: 500;
        margin-bottom: 5px
    }


    .bill-info-field a {
        padding: 7px 15px;
        font-size: 16px;
        color: #fff;
        text-decoration: none;
        float: left;
        margin: 2px 20px 0 0;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
    }

        .bill-info-field a.ac-can-btn {
            background-color: #fff;
            color: #000;
            outline: 1px solid rgba(191,191,191,0.47);
            box-sizing: border-box
        }

        .bill-info-field a:active {
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
            position: relative;
            top: 3px;
            left: 3px
        }

    .bill-info-field input {
        width: 98%;
        float: left;
        display: block;
        text-align: left;
        font-size: 14px;
        padding: 5px;
        border: solid #e0e0e0;
        border-width: 0 0 1px;
        box-shadow: none
    }

        .bill-info-field input.mnt, .bill-info-field input.yre, .bill-info-field input.cvv {
            width: 20%;
            float: left;
            margin-right: 20px
        }

.what-cvv {
    float: left !important;
    display: block !important;
    width: 77px !important;
    margin: 5px 5px 0;
    font-size: 12px !important;
    color: #6c6c6c !important;
    padding: 5px;
    box-sizing: border-box
}

    .what-cvv:hover {
        background: #ddd
    }

.what-dropdown {
    background: #fff;
    position: absolute;
    top: -95px;
    left: 215px;
    z-index: 100;
    width: 200px;
    display: none;
    margin-left: 10px;
    padding: 5px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.45)
}

    .what-dropdown img {
        width: 200px
    }

.bill-info-field select {
    width: 100%;
    float: left;
    display: block;
    text-align: left;
    font-size: 14px;
    padding: 5px;
    border: solid #e0e0e0;
    border-width: 0 0 1px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none
}

.bill-info-field select, .bill-info-field input {
    outline: 0
}

.bill-info-field option {
    font-size: 14px;
    line-height: 20px
}

.bill-info-field label {
    position: relative;
    float: left;
    width: 100%
}

    .bill-info-field label:after {
        content: "\f35d";
        font-family: Material Design Icons;
        position: absolute;
        right: 4px;
        bottom: 12px;
        font-size: 18px;
        pointer-events: none;
        width: 30px;
        height: 25px;
        background: #fff;
        padding: 4px 7px;
        box-sizing: border-box
    }

.pay-history-table {
    width: 100%;
    background: #fff;
    display: block;
    max-height: 480px
}

    .pay-history-table table {
        margin: 5px auto;
        float: left;
        width: 100%;
        border-collapse: collapse
    }

        .pay-history-table table tr > th {
            background-color: #f0f0f0;
            vertical-align: middle;
            color: #333;
            border-width: 1px;
            text-transform: uppercase;
            border-bottom: 1px solid #f0f0f0;
            padding: 10px;
            line-height: 1.42857143;
            font-weight: 500;
            font-size: 12px;
            text-align: left
        }

        .pay-history-table table tr > td {
            vertical-align: middle;
            font-weight: 400;
            color: #333;
            border-width: 1px;
            border-bottom: 1px solid #f0f0f0;
            padding: 10px;
            line-height: 1.42857143;
            text-align: left;
            font-size: 14px
        }

            .pay-history-table table tr > td.int {
                text-align: right
            }

            .pay-history-table table tr > td a {
                outline: 0;
                color: #000
            }

                .pay-history-table table tr > td a:hover {
                    text-decoration: underline
                }

        .pay-history-table table > tbody > tr:nth-of-type(odd) {
            background-color: #fefefe
        }

.pricing-table {
    float: left;
    width: 100%
}

.pricing-table-container {
    margin: .5% 0;
    width: 100%;
    float: left;
    padding: 0 0 0 1%;
    box-sizing: border-box
}

.bliss-detail {
    width: 23.75%;
    float: left;
    margin-right: 1%
}

.smile-bg {
    background: #eafaf9;
    color: #3e3d3e
}

.smile-bg-img {
    background-image: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/images/smile.png);
    background-size: 70px;
    background-repeat: no-repeat;
    display: block;
    width: 70px;
    height: 70px;
    margin: 0 auto;
    margin-top: 45px
}

.bliss-bg {
    background: #fbe6eb;
    color: #3e3d3e
}

.bliss-bg-img {
    background-image: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/images/bliss.png);
    background-size: 115px;
    background-repeat: no-repeat;
    display: block;
    width: 115px;
    height: 115px;
    margin: 0 auto
}

.bliss-bg-sm {
    background-image: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/images/Cart.png);
    background-size: 100px;
    background-repeat: no-repeat;
    display: block;
    width: 110px;
    height: 110px;
    position: absolute;
    top: 40%;
    left: 65%;
    opacity: .5
}

.joy-detail {
    width: 24.25%;
    float: left;
    margin-right: 1%
}

.joy-bg {
    background: #a2d2e0;
    color: #3e3d3e
}

.joy-bg-img {
    background-image: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/images/joy.png);
    background-size: 100px;
    background-repeat: no-repeat;
    display: block;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    margin-top: 15px
}

.happy-detail {
    width: 24.25%;
    float: left;
    margin-right: 1%
}

.happy-bg {
    background: #ebd7d8;
    color: #3e3d3e
}

.happy-bg-img {
    background-image: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/images/happy.png);
    background-size: 80px;
    background-repeat: no-repeat;
    display: block;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    margin-top: 35px
}

.happy-bg-sm {
    background-image: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/images/hap.png);
    background-size: 70px;
    background-repeat: no-repeat;
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 9%;
    left: 10%;
    opacity: .5;
    transform: rotate(-30deg)
}

.top-plan-detail {
    width: 100%;
    height: 180px;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05),0 2px 10px 0 rgba(0,0,0,0.05)
}

    .top-plan-detail .plan-name {
        display: block;
        font-size: 35px;
        margin: 14px 0;
        z-index: 8
    }

    .top-plan-detail .plan-quote {
        display: block;
        font-size: 16px;
        z-index: 8;
        position: relative;
        font-weight: 100
    }

    .top-plan-detail .plan-price {
        display: block;
        font-size: 30px;
        font-weight: 500;
        z-index: 8;
        position: relative;
        margin-top: 18px
    }

    .top-plan-detail .per-user-msg {
        display: block;
        font-size: 12px;
        font-weight: 500;
        z-index: 8;
        position: relative
    }

.user-process-detail {
    display: block;
    float: left;
    width: 100%;
    text-align: center;
    color: #fff
}

.sm-bg {
    background: #63a7a1;
    border-top: 1px solid #63a7a1;
    height: 130px;
    padding: 4px;
    box-sizing: border-box;
    font-weight: 100
}

.bls-bg {
    background: #de6a85;
    border-top: 1px solid #de6a85;
    height: 130px;
    padding: 4px;
    box-sizing: border-box;
    font-weight: 100
}

.jo-bg {
    background: #589baf;
    border-top: 1px solid #589baf;
    height: 130px;
    padding: 4px;
    box-sizing: border-box;
    font-weight: 100
}

.hp-bg {
    background: #bd8f90;
    border-top: 1px solid #bd8f90;
    height: 130px;
    padding: 4px;
    box-sizing: border-box;
    font-weight: 100
}

.user-process-detail .plan-user {
    display: block;
    font-size: 15px;
    line-height: 24px;
    z-index: 8;
    position: relative
}

.user-process-detail .plan-process {
    display: block;
    font-size: 15px;
    line-height: 24px;
    z-index: 8;
    position: relative
}

.bottom-plan-detail {
    background-color: #fff;
    float: left;
    width: 100%;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05),0 2px 10px 0 rgba(0,0,0,0.05)
}

.smht {
    float: left;
    height: 6px;
    width: 100%
}

.btnholder {
    margin: 10px auto;
    width: 100%;
    float: left
}

.bottom-plan-detail ul {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: left
}

    .bottom-plan-detail ul li {
        padding: 10px;
        font-size: 14px;
        color: gray;
        line-height: 18px;
        height: 38px;
        box-sizing: border-box;
        float: left;
        width: 100%
    }

.bottom-plan-detail .plan-sel-btn {
    background-color: #37b57a;
    padding: 6px 15px;
    border-radius: 4px;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05),0 2px 10px 0 rgba(0,0,0,0.05);
    cursor: pointer;
    border: 0;
    outline: 0;
    margin: 0 auto;
    display: block
}

    .bottom-plan-detail .plan-sel-btn:disabled {
        background-color: #bfbfbf;
        color: #757575
    }

    .bottom-plan-detail .plan-sel-btn:active {
        position: relative;
        top: 3px;
        left: 3px
    }

.happy-spn1 {
    text-align: center;
    padding: 9px 5px;
    display: block;
    background-color: #99ceca;
    box-sizing: border-box;
    color: #fff;
    border-radius: 5px;
    font-size: 16px;
    margin: 12px auto;
    width: 170px
}

.joy-spn1 {
    text-align: center;
    padding: 9px 5px;
    display: block;
    background-color: #714493;
    box-sizing: border-box;
    color: #fff;
    border-radius: 5px;
    font-size: 16px;
    margin: 12px auto;
    width: 170px
}

.bliss-spn1 {
    text-align: center;
    padding: 9px 5px;
    display: block;
    background-color: #6ca3b3;
    box-sizing: border-box;
    color: #fff;
    border-radius: 5px;
    font-size: 16px;
    margin: 12px auto;
    width: 170px
}

.add-span2 {
    text-align: center;
    margin: 10px auto;
    padding: 10px;
    display: block;
    box-sizing: border-box;
    color: #000;
    border-radius: 5px;
    font-size: 30px;
    font-weight: 500
}

.select-plan-first {
    width: 100%;
    display: block;
    float: left;
    text-align: center
}

    .select-plan-first span {
        font-size: 24px;
        font-weight: 500;
        display: block;
        padding: 5% 0;
        color: rgba(109,109,109,0.58)
    }

    .select-plan-first a {
        padding: 12px;
        background-color: #37b57a;
        color: #fff;
        text-decoration: none;
        font-size: 18px;
        border-radius: 5px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
    }

        .select-plan-first a:active {
            position: relative;
            top: 3px;
            left: 3px
        }

.plan-detail-after {
    width: 90%;
    display: block;
    height: 250px;
    float: left;
    margin: 20px 4.8%;
    border: 1px solid rgba(224,224,224,0.34)
}

.plan-detail-title {
    float: left;
    width: 100%;
    border-bottom: 1px solid #ddd
}

    .plan-detail-title h2 {
        font-weight: 400;
        font-size: 16px;
        padding: 10px;
        box-sizing: border-box;
        margin: 0
    }

.no-user-detail-cont {
    display: block;
    float: left;
    width: 100%
}

.user-cont-contaier {
    width: 30%;
    float: left;
    text-align: center;
    padding: 5px;
    margin: 5px;
    box-sizing: border-box
}

    .user-cont-contaier span:first-child {
        font-size: 50px;
        font-weight: 500;
        color: rgba(189,83,20,0.75);
        display: block
    }

    .user-cont-contaier span:last-child {
        display: block;
        font-size: 12px;
        font-weight: 500;
        color: #4a4a4a
    }

.plan-option-btn-contaier {
    width: 65%;
    float: left
}

.plan-option-btn {
    float: right;
    border-radius: 2px;
    font-size: 14px;
    background-color: #f5f5f5;
    background-image: linear-gradient(to bottom, #f5f5f5, #f1f1f1);
    color: #444;
    border: 1px solid rgba(0,0,0,0.1);
    margin: 15px 5px
}

    .plan-option-btn a {
        padding: 8px 6px;
        float: left;
        background-color: #f5f5f5;
        background-image: linear-gradient(to bottom, #f5f5f5, #f1f1f1);
        color: #333;
        border-right: 1px solid #dcdcdc;
        outline: 0;
        text-decoration: none
    }

        .plan-option-btn a:last-child {
            border-right: 0
        }

        .plan-option-btn a:hover {
            background: #fff
        }

        .plan-option-btn a i {
            font-size: 18px;
            position: relative;
            top: 2px
        }

.plan-start-end-msg {
    width: 80%;
    margin: 10px 10%;
    font-size: 14px;
    text-align: center;
    float: left
}

.plan-start {
    padding: 0 10px;
    color: #1ba40a
}

    .plan-start i {
        position: relative;
        top: 7px;
        font-size: 28px;
        padding: 0 5px;
        color: #4f5256
    }

.plan-end {
    padding: 0 10px;
    color: #bf0000
}

    .plan-end i {
        position: relative;
        top: 7px;
        font-size: 28px;
        padding: 0 5px;
        color: #4f5256
    }

.price-info-cont {
    width: 90%;
    margin: 0 5%;
    font-size: 12px;
    text-align: left;
    float: left
}

    .price-info-cont > blockquote {
        background: #f9f9f9;
        border-left: 1px solid #ccc;
        margin: 8px 10px 0;
        padding: .5em 10px;
        quotes: "\201C""\201D""\2018""\2019"
    }

        .price-info-cont > blockquote:before {
            color: #ccc;
            content: open-quote;
            font-size: 4em;
            line-height: .1em;
            margin-right: .25em;
            vertical-align: -.4em
        }

        .price-info-cont > blockquote a {
            text-decoration: underline;
            outline: 0
        }

.cancel-subsrib {
    width: 800px;
    height: 405px;
    background-color: #fff;
    float: left;
    margin: 0 8%
}

.cancel-subsrib-title {
    display: block;
    width: 100%;
    float: left;
    height: 42px;
    border-bottom: 1px solid rgba(221,221,221,0.36);
    background-color: #fff
}

    .cancel-subsrib-title h2 {
        font-size: 16px;
        font-weight: 400;
        padding: 2px;
        float: left;
        box-sizing: border-box;
        margin: 8px;
        width: 40%
    }

.cancel-subsrib-close {
    width: 58%;
    float: left;
    color: #4f5256
}

    .cancel-subsrib-close a {
        float: right;
        color: #9e9e9e;
        padding: 8px;
        font-size: 20px
    }

        .cancel-subsrib-close a:hover {
            color: #515151
        }

.payment-invoice-cancel {
    padding: 2%;
    float: left
}

    .payment-invoice-cancel p {
        margin: 0 5px;
        font-size: 14px;
        line-height: 24px
    }

        .payment-invoice-cancel p span {
            display: block;
            padding: 3px;
            text-indent: 10px
        }

    .payment-invoice-cancel ul {
        font-size: 14px;
        line-height: 24px
    }

    .payment-invoice-cancel .cnl-sub-btn {
        padding: 7px 15px;
        font-size: 16px;
        color: #fff;
        text-decoration: none;
        float: left;
        margin: 15px 5px 10px;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
    }

        .payment-invoice-cancel .cnl-sub-btn:active {
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
            position: relative;
            top: 3px;
            left: 3px
        }

    .payment-invoice-cancel .dntcnl-sub-btn {
        background-color: #fff;
        padding: 7px 15px;
        font-size: 16px;
        color: #333;
        text-decoration: none;
        float: left;
        margin: 15px 5px 10px;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
    }

.sub-clkh-btn {
    text-decoration: underline
}

    .sub-clkh-btn:hover {
        text-decoration: none
    }

.payment-invoice-cancel .dntcnl-sub-btn:active {
    box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
    position: relative;
    top: 3px;
    left: 3px
}

.profile-setting-container {
    width: 83%;
    min-height: 500px;
    margin: 1% 8%;
    position: relative;
    float: left;
    display: none;
    border-radius: 3px;
    background-color: #fff;
    color: #4f5256;
    border: 1px solid rgba(0,0,0,.12);
    margin-bottom: 8px
}

.profile-top-title {
    display: block;
    width: 100%;
    float: left;
    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: #f2f2f2;
    width: 20%;
    min-height: 500px;
    float: left;
    box-sizing: border-box
}

.profile-option-list {
    margin: 20px 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: 7px 15px;
        font-size: 16px;
        text-decoration: none;
        float: left;
        margin: 2px 10px 2px 0;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
        outline: 0
    }

        .change-password-field a:last-child {
            background-color: #fff;
            color: #000;
            outline: 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: solid #e0e0e0;
        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;
        border: 1px solid #dadada !important;
        width: 110px;
        height: 110px;
        display: block;
        box-shadow: 2px 2px 2px #ddd;
        box-sizing: border-box
    }

.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: 7px 15px;
        font-size: 16px;
        text-decoration: none;
        float: left;
        margin: 20px 10px 2px 0;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
        outline: 0
    }

        .change-profile-picture-btn a.cancel {
            background-color: #fff;
            color: #000;
            outline: 1px solid rgba(191,191,191,0.47);
            box-sizing: border-box
        }

        .change-profile-picture-btn a:active {
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,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%;
    position: relative;
    float: left;
    display: none;
    border-radius: 3px;
    background-color: #fff;
    color: #4f5256;
    margin-bottom: 8px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05),0 2px 10px 0 rgba(0,0,0,0.05)
}

.signature-top-title {
    display: block;
    width: 100%;
    float: left;
    height: 42px;
    border-bottom: 1px solid rgba(221,221,221,0.36)
}

    .signature-top-title h1 {
        font-size: 18px;
        font-weight: 500;
        padding: 2px 15px;
        float: left;
        box-sizing: border-box;
        margin: 0;
        line-height: 40px
    }

.signature-box-close a {
    color: #9e9e9e;
    font-size: 22px;
    margin: 10px;
    float: right;
    outline: 0
}

    .signature-box-close a:hover {
        color: #515151
    }

.singature-setting-contaier {
    background-color: #fff;
    width: 100%;
    min-height: 500px;
    float: left;
    box-sizing: border-box
}

    .singature-setting-contaier h3 {
        font-size: 14px;
        font-weight: 400;
        float: left;
        margin: 10px
    }

.signature-area h2 {
    font-size: 18px;
    font-weight: 400;
    float: left;
    margin: 10px 8px 20px;
    width: 100%
}

.signature-area {
    display: block;
    width: 100%;
    float: left;
    padding: 1%;
    box-sizing: border-box
}

    .signature-area a {
        padding: 7px 15px;
        font-size: 16px;
        text-decoration: none;
        float: left;
        margin: 20px 10px 2px 0;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
        outline: 0;
        color: #000
    }

        .signature-area a.save-re {
            color: #fff
        }

            .signature-area a.save-re:active {
                position: relative;
                top: 3px;
                left: 3px
            }

        .signature-area a.cancel {
            background-color: #fff;
            color: #000;
            outline: 1px solid rgba(191,191,191,0.47);
            box-sizing: border-box
        }

    .signature-area iframe {
        border: 0;
        height: 400px;
        width: 100%;
        float: left
    }

    .signature-area img {
        width: 250px;
        height: 70px;
        border: 1px solid #e0dbdb
    }

.setting-page-title {
    background-color: #fff;
    width: 100%;
    border-bottom: 1px solid #ddd;
    float: left;
    margin-bottom: 10px;
    text-align: center
}

    .setting-page-title h1 {
        font-size: 20px;
        font-weight: 500;
        padding: 1%;
        margin: 0
    }

.setting-main-container {
    width: 85%;
    padding: 0 .375%
}

.setting-menu-box {
    width: 31%;
    height: 170px;
    float: left;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    margin: .75% .375%;
    background-color: #fff;
    transition: box-shadow .25s;
    border-radius: 2px
}

.setting-menu-icon {
    width: 100%;
    height: 120px;
    overflow: hidden;
    border-bottom: 1px solid rgba(0,0,0,0.14)
}

.setting-menu-title {
    float: left;
    display: block;
    height: 50px;
    width: 100%;
    text-align: center
}

    .setting-menu-title i {
        position: absolute;
        right: 10px;
        bottom: 10px;
        color: #fff;
        font-size: 26px
    }

    .setting-menu-title span {
        color: #fff;
        font-size: 18px;
        padding: 13px;
        display: block
    }

.bg-pro-set-men {
    background-color: #2f5a78;
    box-sizing: border-box;
    float: left;
    border-radius: 4px;
    position: relative;
    outline: 0;
    width: 100%
}

.bg-pric-set-men {
    background-color: #9ccb5b;
    box-sizing: border-box;
    float: left;
    border-radius: 4px;
    position: relative;
    outline: 0;
    width: 100%
}

.bg-sign-set-men {
    background-color: #0cd0b9;
    box-sizing: border-box;
    float: left;
    border-radius: 4px;
    position: relative;
    outline: 0;
    width: 100%
}

.bg-pro-set-men img {
    width: 85px;
    margin: 16px auto;
    display: block;
    border: 0
}

.bg-pric-set-men img {
    width: 100px;
    margin: 16px auto;
    display: block;
    border: 0
}

.bg-sign-set-men img {
    width: 90px;
    margin: 10px auto;
    display: block;
    border: 0
}

.payment-reciept-confirmation {
    border-radius: 3px;
    background-color: #fff;
    color: #4f5256;
    border: 1px solid rgba(0,0,0,.12);
    width: 90%;
    margin: 15px 5.35%;
    float: left;
    display: block;
    z-index: 11;
    position: relative
}

    .payment-reciept-confirmation .header-title {
        width: 100%;
        display: block;
        border-bottom: 1px solid rgba(221,221,221,0.36)
    }

        .payment-reciept-confirmation .header-title h2 {
            margin: 10px;
            font-size: 16px;
            font-weight: 500
        }

    .payment-reciept-confirmation .reciept-body {
        float: left;
        width: 100%
    }

.payment-amount-detail {
    width: 100%;
    padding: 5% 20% 3%;
    box-sizing: border-box
}

.payment-info {
    width: 100%;
    padding: 5% 15% 7%;
    box-sizing: border-box;
    text-align: right
}

    .payment-info:last-child {
        border-top: 2px solid #ddd
    }

    .payment-info span:first-child {
        float: left;
        display: block;
        color: #737373;
        width: 50%;
        font-weight: 400;
        font-size: 16px;
        padding-right: 15px;
        box-sizing: border-box
    }

    .payment-info span:last-child {
        float: left;
        display: block;
        color: #737373;
        width: 50%;
        box-sizing: border-box
    }

.payment-reciept-footer {
    width: 100%
}

.process-link {
    float: right;
    width: 50%
}

    .process-link .suce {
        background-color: #37b57a;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 16px;
        color: #fff;
        text-decoration: none;
        text-align: center;
        float: left;
        margin: 5px 5px 20px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
    }

        .process-link .suce:active, .process-link .cancl:active {
            position: relative;
            top: 3px;
            left: 3px
        }

    .process-link .cancl {
        background-color: #e4e4e4;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 16px;
        color: #000;
        text-decoration: none;
        text-align: center;
        float: left;
        margin: 5px 5px 20px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
    }

.payment-note {
    padding: 0 9% 5%
}

    .payment-note h3 {
        font-size: 18px;
        font-weight: 500;
        float: left;
        width: 100%;
        margin: 10px 0;
        border-bottom: 0
    }

    .payment-note p {
        font-size: 16px;
        line-height: 25px;
        color: #6b6b6b
    }

.invoice-top-title {
    display: block;
    width: 85%;
    height: 42px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(221,221,221,0.36);
    background-color: #fff
}

    .invoice-top-title h2 {
        font-size: 16px;
        font-weight: 400;
        float: left;
        margin: 0;
        width: 83%;
        box-sizing: border-box;
        padding: 1.4% 1.5%
    }

.invoice-top-title-close {
    width: 17%;
    position: relative;
    float: left;
    border-radius: 3px;
    color: #4f5256;
    text-align: right;
    padding: 0;
    font-size: 22px
}

    .invoice-top-title-close .ac-stn-close-btn {
        color: #000;
        font-size: 22px;
        margin: 10px;
        float: left
    }

    .invoice-top-title-close .print {
        float: left;
        padding: 2px 10px;
        font-size: 15px;
        color: #fff;
        margin: 10px 5px;
        border-radius: 1px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
    }

        .invoice-top-title-close .print:active {
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
            position: relative;
            top: 3px;
            left: 3px
        }

        .invoice-top-title-close .print i {
            font-size: 20px;
            position: relative;
            top: 2px
        }

    .invoice-top-title-close .ac-stn-close-btn:hover {
        color: #515151
    }

.wrk-reciept {
    background-color: #fff;
    padding: 1% 2%;
    box-sizing: border-box;
    width: 85%;
    margin: 0 auto
}

    .wrk-reciept .rep-address, .wrk-reciept .rep-user-detail, .wrk-reciept .rep-bill-detail {
        width: 100%;
        margin: 0 0 5px;
        border-collapse: collapse;
        font-size: 14px
    }

        .wrk-reciept .rep-address td strong {
            display: block;
            font-weight: 500;
            font-size: 16px
        }

        .wrk-reciept .rep-address td:first-child {
            text-align: left
        }

        .wrk-reciept .rep-address td:last-child {
            text-align: right
        }

        .wrk-reciept .rep-address td {
            vertical-align: top
        }

        .wrk-reciept .rep-bill-detail th:first-child, .wrk-reciept .rep-bill-detail td:first-child {
            text-align: left
        }

        .wrk-reciept .rep-bill-detail th:last-child, .wrk-reciept .rep-bill-detail td:last-child {
            text-align: right
        }

        .wrk-reciept .rep-bill-detail th {
            font-weight: 500;
            font-size: 16px
        }

        .wrk-reciept .rep-user-detail td label {
            font-weight: 500
        }

    .wrk-reciept p {
        font-size: 14px
    }

    .wrk-reciept .rep-user-detail td strong {
        display: block;
        font-weight: 500;
        font-size: 16px
    }

.workflow-listing-container {
    background-color: #fff;
    width: 100%;
    float: left
}

.wkf-listing-tab {
    width: 100%;
    float: left;
    border-bottom: 1px solid rgba(172,172,172,0.14)
}

    .wkf-listing-tab .tab-name {
        font-size: 16px;
        font-weight: 400;
        float: left;
        margin: 0;
        padding: 15px;
        color: #777
    }

        .wkf-listing-tab .tab-name.active {
            box-sizing: border-box;
            position: relative;
            background: #f9f9f9
        }

.wkf-lookup-tab-menu {
    width: 50%;
    float: left
}

.wkf-listing-search {
    float: left;
    display: block;
    margin: 0 4px
}

    .wkf-listing-search input {
        outline: 0;
        box-shadow: none;
        border-width: 0 0 2px !important;
        font-size: 15px;
        width: 300px;
        float: left;
        padding: 5px 2px;
        box-sizing: border-box;
        margin: 10px 0
    }

    .wkf-listing-search span {
        font-size: 26px;
        margin: 5px 15px;
        color: #000;
        display: block;
        float: left
    }

.wkf-main-list-cont {
    display: block;
    float: left;
    width: 100%;
    background-color: #f9f9f9
}

.lookup-main-list-cont {
    display: none;
    float: left;
    width: 100%
}

.workflow-library-container {
    background-color: #fff;
    width: 100%;
    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-search {
    float: right;
    display: block;
    margin: 4px
}

    .wkf-library-search input {
        outline: 0;
        box-shadow: none;
        border-width: 0 0 2px !important;
        font-size: 14px;
        width: 300px;
        float: left;
        padding: 5px 2px;
        box-sizing: border-box;
        margin: 10px 0
    }

    .wkf-library-search span {
        font-size: 26px;
        margin: 5px 15px;
        color: #000;
        display: block;
        float: left
    }

.wkf-library-wf-list-cont {
    display: block;
    float: left;
    width: 100%;
    background-color: #f5f6fa;
    margin: 0 auto
}

.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
    }

.cwficon {
    font-size: 50px;
    display: block;
    width: 50px;
    height: 50px;
    margin: 20px auto;
    font-weight: 100;
    margin-top: 30px;
    border-radius: 50%;
    background: #5a9aeb;
    color: #fff
}

.wkf-library-li {
    width: 23%;
    height: 160px;
    float: left;
    display: block;
    margin: 1%;
    position: relative;
    border-radius: 10px;
    background-image: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/images/pat1.png);
    background-position: -16% 25%;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05),0 2px 10px 0 rgba(0,0,0,0.05)
}

.create-own-wkf {
    font-size: 18px;
    color: #000;
    font-weight: 500;
    text-decoration: none;
    padding: 36px;
    display: block;
    text-align: center
}

    .create-own-wkf i {
        display: block;
        font-size: 30px
    }

.wkf-library-li .top-title {
    height: 121px;
    width: 100%;
    display: block;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 10px 10px 0 0
}

.wfk-imgs {
    margin: 3px 5px 0 0;
    color: #5d5d5d;
    font-size: 18px;
    position: absolute;
    right: 40px;
    z-index: 1;
    line-height: 36px;
    opacity: .5
}

    .wfk-imgs:hover {
        opacity: 1
    }

.wfdesovly {
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    background: rgba(0,0,0,0.85);
    width: 100%;
    height: 100%;
    position: absolute;
    top: auto;
    bottom: 0;
    opacity: 0;
    transition: opacity .5s ease
}

.deshw:hover .wfdesovly {
    opacity: 1
}

.wkf-des {
    font-weight: 100;
    color: #fff;
    font-size: 15px;
    line-height: 18px
}

.create-workflow-btn {
    width: 100%;
    background-color: #fff;
    float: left;
    text-align: center;
    border-bottom: 3px solid var(--primary-color)
}

    .create-workflow-btn span {
        color: #000;
        font-size: 26px;
        padding: 35px;
        display: block
    }

        .create-workflow-btn span:last-child {
            color: #000;
            font-size: 20px;
            padding: 18px;
            display: block;
            font-weight: 300
        }

    .create-workflow-btn .start-create {
        background: #d00;
        color: #fff;
        text-decoration: none;
        display: inline-block;
        padding: 10px;
        font-size: 20px;
        font-weight: 300;
        border-radius: 4px;
        border-bottom: 0 solid #900
    }

    .create-workflow-btn .lookup-create {
        display: block;
        padding: 7px;
        color: #000;
        font-size: 14px;
        font-weight: 400;
        text-decoration: underline
    }

.wkf-library-li:nth-child(8n+1) {
    opacity: .8;
    background: #ed5565;
    background: -moz-linear-gradient(-45deg,#ed5565 1%,#d62739 100%);
    background: -webkit-linear-gradient(-45deg,#ed5565 1%,#d62739 100%);
    background: linear-gradient(135deg,#ed5565 1%,#d62739 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed5565',endColorstr='#d62739',GradientType=1)
}

.wkf-library-li:nth-child(8n+2) {
    opacity: .8;
    background: #a0d468;
    background: -moz-linear-gradient(-45deg,#a0d468 1%,#6eaf26 100%);
    background: -webkit-linear-gradient(-45deg,#a0d468 1%,#6eaf26 100%);
    background: linear-gradient(135deg,#a0d468 1%,#6eaf26 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a0d468',endColorstr='#6eaf26',GradientType=1)
}

.wkf-library-li:nth-child(8n+3) {
    opacity: .8;
    background: #fc6e51;
    background: -moz-linear-gradient(-45deg,#fc6e51 1%,#db391e 100%);
    background: -webkit-linear-gradient(-45deg,#fc6e51 1%,#db391e 100%);
    background: linear-gradient(135deg,#fc6e51 1%,#db391e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fc6e51',endColorstr='#db391e',GradientType=1)
}

.wkf-library-li:nth-child(8n+4) {
    opacity: .8;
    background: #4fc1e9;
    background: -moz-linear-gradient(-45deg,#4fc1e9 1%,#0b9bd0 100%);
    background: -webkit-linear-gradient(-45deg,#4fc1e9 1%,#0b9bd0 100%);
    background: linear-gradient(135deg,#4fc1e9 1%,#0b9bd0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4fc1e9',endColorstr='#0b9bd0',GradientType=1)
}

.wkf-library-li:nth-child(8n+5) {
    opacity: .8;
    background: #48cfad;
    background: -moz-linear-gradient(-45deg,#48cfad 1%,#19a784 100%);
    background: -webkit-linear-gradient(-45deg,#48cfad 1%,#19a784 100%);
    background: linear-gradient(135deg,#48cfad 1%,#19a784 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#48cfad',endColorstr='#19a784',GradientType=1)
}

.wkf-library-li:nth-child(8n+6) {
    opacity: .8;
    background: #ac92ec;
    background: -moz-linear-gradient(-45deg,#ac92ec 1%,#7455c3 100%);
    background: -webkit-linear-gradient(-45deg,#ac92ec 1%,#7455c3 100%);
    background: linear-gradient(135deg,#ac92ec 1%,#7455c3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ac92ec',endColorstr='#7455c3',GradientType=1)
}

.wkf-library-li:nth-child(8n+7) {
    opacity: .8;
    background: #5d9cec;
    background: -moz-linear-gradient(-45deg,#5d9cec 1%,#0d65d8 100%);
    background: -webkit-linear-gradient(-45deg,#5d9cec 1%,#0d65d8 100%);
    background: linear-gradient(135deg,#5d9cec 1%,#0d65d8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5d9cec',endColorstr='#0d65d8',GradientType=1)
}

.wkf-library-li:nth-child(8n+8) {
    opacity: .8;
    background: #ec87c0;
    background: -moz-linear-gradient(-45deg,#ec87c0 1%,#bf4c90 100%);
    background: -webkit-linear-gradient(-45deg,#ec87c0 1%,#bf4c90 100%);
    background: linear-gradient(135deg,#ec87c0 1%,#bf4c90 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ec87c0',endColorstr='#bf4c90',GradientType=1)
}

.wkf-library-li .top-title .user-cre-wkf {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 20px;
    color: #fff;
    opacity: .6
}

.wkf-library-li:hover .top-title .user-cre-wkf {
    opacity: 1
}

.wkf-library-li .top-title .name {
    font-size: 16px;
    color: #fff;
    display: block;
    padding: 10px;

}

.preview-i {
    line-height: normal;
    right: 10px;
    margin-left: 11px;
    padding: 5px;
    position: absolute;
    font-size: 28px;
    color: #fff
}

.wkf-library-li .top-title .first {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    line-height: 43px;
    text-align: center;
    position: absolute;
    font-size: 70px;
    font-weight: 400;
    top: 38px;
    left: 12px;
    transform: rotate(-25deg);
    color: rgba(255,255,255,0.11)
}

.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::after {
        content: "";
        clear: both;
        display: table
    }

    .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, .wkf-library-li .bottom-initate .view {
        opacity: .5
    }

    .wkf-library-li .bottom-initate:hover .go, .wkf-library-li .bottom-initate:hover .view {
        opacity: 1
    }

    .wkf-library-li .bottom-initate .go i {
        font-size: 25px
    }

    .wkf-library-li .bottom-initate .view {
        font-size: 14px;
        margin: 11px;
        display: block;
        float: left;
        text-decoration: none;
        border-radius: 2px;
        color: #777
    }

.add-section-contup {
    width: 900px;
    min-height: 100px;
    background-color: #fff;
    padding-bottom: 10px;
    float: left;
    border-radius: 4px;
    box-shadow: 1px 1px 12px 7px #4f5256,3px 3px 1px 0 rgba(0,0,0,0.19)
}

    .add-section-contup .sec-title {
        width: 100%;
        display: block;
        border-bottom: 1px solid rgba(221,221,221,0.36);
        float: left
    }

        .add-section-contup .sec-title h2 {
            margin: 5px 8px;
            font-size: 18px;
            width: 93%;
            float: left;
            font-weight: 500
        }

        .add-section-contup .sec-title .close-btn {
            float: left
        }

            .add-section-contup .sec-title .close-btn a {
                margin: 3px 10px;
                display: block;
                font-weight: 500;
                font-size: 22px;
                color: #9e9e9e
            }

                .add-section-contup .sec-title .close-btn a:hover {
                    color: #515151
                }

        .add-section-contup .sec-title .escl-btn {
            float: left;
            margin: 5px 10px 0;
            display: block;
            font-weight: 500;
            font-size: 22px;
            color: #9e9e9e
        }

    .add-section-contup .sec-container {
        width: 100%;
        float: left;
        margin-top: 15px
    }

        .add-section-contup .sec-container h3 {
            margin: 15px;
            margin: 1% 10%;
            font-size: 15px;
            font-weight: 400 !important;
            margin-bottom: 25px
        }

        .add-section-contup .sec-container h4 {
            font-weight: 300;
            font-size: 18px;
            margin: 15px 5%;
            text-align: left
        }

.sec-cont-save-btn {
    width: 86%;
    margin: 1% 10%;
    display: block;
    float: left
}

    .sec-cont-save-btn a {
        padding: 7px 15px;
        font-size: 16px;
        text-decoration: none;
        float: right;
        margin: 20px 10px 2px 0;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
        outline: 0
    }

    .sec-cont-save-btn .can {
        background-color: #fff;
        color: #000;
        outline: 1px solid rgba(191,191,191,0.47);
        box-sizing: border-box
    }

    .sec-cont-save-btn a:active {
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
        position: relative;
        top: 3px;
        left: 3px
    }

.section-select-cont {
    width: 80%;
    float: left;
    margin: 5px 10%;
    margin-top: -15px
}

.section-select-btn {
    width: 25%;
    float: left;
    cursor: pointer
}

.sec-sel-inner .oneclm.active ~ i, .sec-sel-inner .twoclm.active ~ i, .sec-sel-inner .tblclm.active ~ i, .sec-sel-inner .largebox.active ~ i {
    display: block;
    position: absolute;
    font-size: 20px;
    right: 3px;
    top: 8px
}

.sec-sel-inner .oneclm {
    background-image: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/images/One-Colum-Section-Small.png);
    background-repeat: no-repeat;
    width: 140px !important;
    height: 140px;
    background-size: cover
}

.sec-sel-inner .twoclm {
    background-image: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/images/Two-Colum-Section-Small.png);
    background-repeat: no-repeat;
    width: 140px !important;
    height: 140px;
    background-size: cover
}

.sec-sel-inner .tblclm {
    background-image: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/images/Table-Column-Small.png);
    background-repeat: no-repeat;
    width: 140px !important;
    height: 140px;
    background-size: cover
}

.sec-sel-inner .largebox {
    background-image: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/images/One-Column-Multiline-Default.png);
    background-repeat: no-repeat;
    width: 140px !important;
    height: 140px;
    background-size: cover
}

.sec-sel-inner i {
    display: none
}

.section-select-btn .sec-sel-inner {
    width: 140px;
    height: 160px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    border-radius: 5px;
    padding: 5px;
    position: relative
}

    .section-select-btn .sec-sel-inner img {
        width: 140px;
        float: left
    }

    .section-select-btn .sec-sel-inner span {
        width: 100%;
        float: left;
        font-size: 14px;
        text-align: center
    }

.design-formsel-btn {
    width: 50%;
    float: left;
    cursor: pointer
}

    .design-formsel-btn .sec-sel-inner {
        width: 140px;
        height: 160px;
        margin: 0 auto;
        background-color: #fff;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
        border-radius: 5px;
        padding: 5px;
        position: relative
    }

        .design-formsel-btn .sec-sel-inner:hover {
            box-shadow: 0 2px 5px 0 #74adef
        }

        .design-formsel-btn .sec-sel-inner img {
            width: 140px;
            float: left
        }

        .design-formsel-btn .sec-sel-inner span {
            width: 100%;
            float: left;
            font-size: 12px;
            text-align: center
        }

.field-section-cont {
    width: 65%;
    margin: 1% 17.5%;
    float: left
}

.field-section-cont-tog {
    width: 85%;
    margin: 1% 5% 1% 10%;
    float: left
}

.field-section-cont .sec-head-title {
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px
}

    .field-section-cont .sec-head-title h2 {
        font-size: 18px;
        font-weight: 500;
        padding: 10px;
        display: block;
        margin: 0
    }

.field-section-cont h4 {
    font-weight: 200;
    font-size: 22px;
    text-align: center;
    margin: 40px 0;
    color: #9c9c9c
}

.field-section-cont .sec-container {
    width: 100%;
    float: left
}

.sec-acc-header {
    float: left;
    width: 100%;
    cursor: move;
    background: #f5f5f5
}

.sec-acc-fir-ic {
    font-size: 24px !important;
    color: #888;
    float: left;
    padding: 8px
}

.sec-acc-header .mdi-view-grid {
    color: #8bc34a
}

.sec-acc-header .mdi-view-stream {
    color: #00bcd4
}

.sec-acc-header .mdi-table {
    color: #ff9800
}

.sec-acc-title {
    float: left;
    width: 30%;
    margin-top: 9px;
    margin-bottom: 0 !important;
    font-size: 14px;
    outline: 0;
    color: #4e4e4e;
    background: 0;
    border: 0;
    border-bottom: 1px solid #eaeaea
}

.sec-acc-add-btn {
    width: 30%;
    float: left;
    margin: 2px 0 0
}

    .sec-acc-add-btn a i {
        color: #888;
        font-size: 22px;
        padding: 5px
    }

        .sec-acc-add-btn a i:hover {
            color: #000
        }

.sec-acc-del-btn {
    width: 50%;
    float: left;
    margin: 2px 0 0
}

    .sec-acc-del-btn a i {
        color: #888;
        font-size: 22px;
        padding: 5px
    }

        .sec-acc-del-btn a i:hover {
            color: #000
        }

.sec-acc-op-cl {
    width: 50%;
    float: left;
    color: #888
}

    .sec-acc-op-cl i {
        font-size: 24px !important;
        color: #888;
        padding: 5px
    }

        .sec-acc-op-cl i:hover {
            color: #000
        }

.sec-acc-ctl {
    float: right;
    width: 8%
}

.add-sec-tool-bar {
    width: 165px;
    position: fixed;
    top: 25%;
    background: #fff;
    border-width: 1px 1px 1px 0;
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px;
    z-index: 1;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
}

    .add-sec-tool-bar i {
        font-weight: 600
    }

.twocol {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    float: left;
    min-height: 60px
}

.acc-sor {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    float: left
}

    .acc-sor .accordion-cont {
        margin: 3px 0;
        padding: 5px;
        font-size: 14px;
        width: 100%;
        float: left;
        min-height: 37px
    }

.twocol li {
    font-size: 14px;
    width: 47%;
    float: left;
    height: 37px;
    line-height: 27px;
    box-sizing: border-box
}

.tablcol {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    float: left;
    min-height: 60px
}

    .tablcol li {
        margin: .5% 1.2%;
        padding: .5%;
        font-size: 14px;
        width: 30.9%;
        float: left;
        height: 37px;
        line-height: 27px;
        box-sizing: border-box
    }

.lrgtext {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    float: left;
    min-height: 60px
}

    .lrgtext li {
        margin: .5% 1.5%;
        padding: .5%;
        font-size: 14px;
        width: 97%;
        float: left;
        height: 37px;
        line-height: 27px;
        box-sizing: border-box
    }

.onecol {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    float: left;
    min-height: 60px
}

    .onecol li {
        margin: .5% 1.5%;
        padding: .5%;
        font-size: 14px;
        width: 97%;
        float: left;
        height: 37px;
        line-height: 27px;
        box-sizing: border-box
    }

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

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

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

.ui-sortable-handle {
    -ms-touch-action: none;
    touch-action: none
}

.ui-state-highlight {
    border: 1px solid #0973ec;
    background: #8bc0fc;
    color: #777620;
    position: relative;
    float: left;
    width: 100%;
    line-height: 1.2em
}

.ui-state-checked {
    border: 1px solid #0973ec;
    background: #8bc0fc;
    color: #777620;
    position: relative
}

.ui-draggable, .ui-droppable {
    background-position: top
}

.add-textfield, .add-checkbox, .add-radiobox, .add-checklist, .add-radiolist, .add-multitext, .add-multisel, .add-filefield, .add-codebtn {
    float: left;
    width: 152px;
    height: 30px;
    margin: 5px;
    border: 1px solid #dadada;
    background: #fff;
    border-radius: 2px;
    font-size: 13px;
    line-height: 30px;
    cursor: move
}

.tool-btn-dis {
    background: #fdfdfd;
    border: 1px solid #efefef;
    box-shadow: none
}

.add-textfield i, .add-checkbox i, .add-radiobox i, .add-checklist i, .add-radiolist i, .add-multitext i, .add-multisel i, .add-filefield i, .add-codebtn i {
    font-size: 22px;
    float: left;
    padding: 5px;
    cursor: move
}

.add-sec-tool-bar h3 {
    margin: 0;
    padding: 5px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: #444;
    border-bottom: 1px solid #ddd
}

.add-sec-btn {
    width: 90px;
    float: left;
    height: 50px
}

    .add-sec-btn i {
        font-size: 20px;
        color: #000
    }

.add-sect-field {
    width: 80%;
    margin: 1% 10%;
    height: 50px;
    float: left;
    position: relative
}

    .add-sect-field span {
        width: 100%;
        float: left;
        display: block;
        text-align: left;
        font-size: 15px;
        margin-bottom: 5px
    }

    .add-sect-field input {
        width: 98%;
        float: left;
        display: block;
        text-align: left;
        font-size: 15px;
        padding: 5px;
        border: solid #e0e0e0;
        border-width: 0 0 1px;
        box-shadow: none;
        outline: 0
    }

.add-sec-det-field {
    width: 40%;
    margin: 1% 5%;
    height: 50px;
    float: left;
    position: relative
}

    .add-sec-det-field span {
        width: 100%;
        float: left;
        display: block;
        text-align: left;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 5px
    }

    .add-sec-det-field input {
        width: 98%;
        float: left;
        display: block;
        text-align: left;
        font-size: 14px;
        padding: 5px;
        border: solid #e0e0e0;
        border-width: 0 0 1px;
        box-shadow: none;
        outline: 0
    }

.sec-two-info {
    width: 80%;
    float: left
}

    .sec-two-info i {
        font-size: 18px;
        margin: 5px;
        color: #888;
        float: left
    }

    .sec-two-info span {
        width: 87%;
        float: left;
        font-size: 14px;
        margin-right: 5px;
        font-weight: 500;
        color: #888;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

.sec-two-ctrl {
    width: 20%;
    float: right
}

    .sec-two-ctrl a i {
        font-size: 18px;
        color: #888;
        padding: 0 10%
    }

        .sec-two-ctrl a i:hover {
            color: #000
        }

.sec-one-info {
    width: 90%;
    float: left
}

    .sec-one-info i {
        font-size: 18px;
        margin-right: 5px;
        color: #888
    }

    .sec-one-info span {
        font-size: 14px;
        margin-right: 5px;
        font-weight: 500;
        color: #888
    }

.sec-one-ctrl {
    width: 10%;
    float: left
}

    .sec-one-ctrl a i {
        font-size: 18px;
        color: #888;
        padding: 0 10%
    }

        .sec-one-ctrl a i:hover {
            color: #000
        }

.sec-tbl-info {
    width: 75%;
    float: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

    .sec-tbl-info i {
        font-size: 18px;
        margin: 5px 3px;
        color: #888;
        float: left;
        display: block
    }

    .sec-tbl-info span {
        font-size: 14px;
        font-weight: 500;
        color: #888
    }

.sec-tbl-ctrl {
    width: 25%;
    float: left
}

    .sec-tbl-ctrl a i {
        font-size: 18px;
        color: #888;
        padding: 0 5%;
        box-sizing: border-box
    }

        .sec-tbl-ctrl a i:hover {
            color: #000
        }

.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: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
        outline: 0;
        color: #fff
    }

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

.workflow-setps-btn {
    margin: 5px 40px 15px;
    float: left
}

    .workflow-setps-btn .fill {
        -webkit-transition: all 425ms cubic-bezier(0.680,-0.550,0.265,1.550)
    }

        .workflow-setps-btn .fill span {
            color: #000 !important
        }

    .workflow-setps-btn .point {
        width: 12px;
        height: 12px;
        float: left;
        border-radius: 50%;
        margin: 7px 0;
        border: 1px solid #d3d3d3;
        position: relative;
        outline: 0;
        text-decoration: none;
        box-sizing: border-box
    }

        .workflow-setps-btn .point::after {
            content: " ";
            width: 8px;
            height: 8px;
            position: absolute;
            top: 3px;
            left: 3px;
            border-radius: 50px;
            transition: all 1s ease
        }

        .workflow-setps-btn .point span {
            position: absolute;
            top: 15px;
            font-size: 13px;
            width: 115px;
            left: -50px;
            text-align: center;
            color: #d3d3d3;
            -webkit-transition: all 425ms cubic-bezier(0.680,-0.550,0.265,1.550)
        }

    .workflow-setps-btn .point-connect {
        width: 136px;
        height: 1px;
        float: left;
        background-color: #d3d3d3;
        margin: 13px 1px;
        border-radius: 1px;
        -webkit-transition: all 425ms cubic-bezier(0.680,-0.550,0.265,1.550)
    }

    .workflow-setps-btn .empty-connect {
        width: 130px;
        height: 10px;
        float: left;
        background-color: #d3d3d3;
        margin: 15px -1px;
        -webkit-transition: all 425ms cubic-bezier(0.680,-0.550,0.265,1.550)
    }

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

    .tooltip.in {

        opacity: .9
    }

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

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

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

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

    .tooltip.right-o {
        padding: 0 5px;
        margin-left: 3px;
        width: 200%
    }

    .tooltip.left-o {
        padding: 0 5px;
        margin-left: 3px;
        width: 200%
    }

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

.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid
}

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

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

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

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

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

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

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

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

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

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

.cc-form-field-save {
    padding: 7px 30px;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    float: left;
    border-radius: 2px;
    box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
    margin: 20px 0
}

.cc-check {
    cursor: pointer;
    position: relative;
    top: 4px;
    left: 4px;
    float: left
}

.cc-check-input {
    position: relative;
    top: -.375rem;
    margin: 0 .5rem 0 0;
    cursor: pointer
}

    .cc-check-input:before {
        transition: all .3s ease-in-out;
        content: "";
        position: absolute;
        left: 0;
        z-index: 1;
        width: .9rem;
        height: .9rem;
        border: 3px solid #e6e6e6
    }

    .cc-check-input:after {
        content: "";
        position: absolute;
        left: 0;
        width: 1rem;
        height: 1rem;
        background: #fff;
        cursor: pointer
    }

    .cc-check-input:checked:before {
        transform: rotate(-45deg);
        height: .5rem;
        border-top-style: none;
        border-right-style: none
    }



.mat-radio-labl {
    position: relative;
    display: block;
    height: 20px;
    width: 44px;
    background: #b7b7b7;
    border-radius: 100px;
    cursor: pointer;
    transition: all .3s ease
}

    .mat-radio-labl:after {
        position: absolute;
        left: -2px;
        top: -3px;
        display: block;
        width: 26px;
        height: 26px;
        border-radius: 100px;
        background: #898989;
        box-shadow: 0 3px 3px rgba(0,0,0,0.29);
        content: '';
        transition: all .3s ease
    }

    .mat-radio-labl:active:after {
        transform: scale(1.15,0.85)
    }

.mat-radio:checked ~ label {
    background: #82a4cb
}

    .mat-radio:checked ~ label:after {
        left: 20px
    }

.mat-radio:disabled ~ label {
    background: #d5d5d5;
    pointer-events: none
}

    .mat-radio:disabled ~ label:after {
        background: #bcbdbc
    }

.hidden {
    display: none
}

.cc-add-row {
    display: block;
    box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
    float: left;
    padding: 3px 2px;
    border-radius: 3px;
    color: #fff !important;
    margin: 10px 5px;
    font-size: 14px !important;
    background-color: #d14836;
    background-image: linear-gradient(to bottom, #dd4b39, #d14836);
    border: 1px solid #b0281a
}


.add-lookup-btn {
    display: block;
    width: 85%;
    float: left;
    padding: 10px 12%;
    box-sizing: border-box
}

    .add-lookup-btn a {
        display: inline-block;
        font-size: 20px;
        line-height: 25px;
        font-weight: 300;
        color: #fff;
        padding: 8px 15px;
        box-sizing: border-box;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
        margin: 15px 10px
    }

        .add-lookup-btn a:active {
            position: relative;
            top: 3px;
            left: 3px
        }

.message-popup-contaier {
    width: 400px;
    min-height: 400px;
    border-radius: initial;
    margin: 0 auto;
    left: 27%;
    margin-top: 8%;
    float: left;
    position: relative;

    background-color: #fff;
    -webkit-border-radius: 2px;
    border: 0 solid transparent;
    -webkit-box-shadow: 0 4px 8px rgba(0,0,0,.32),0 8px 40px rgba(0,0,0,.4);
    box-shadow: 0 4px 8px rgba(0,0,0,.32),0 8px 40px rgba(0,0,0,.4)
}

.message-ico {
    display: block;
    text-align: center;
    float: left;
    width: 100%;
    height: 180px;
    border-radius: 5px 5px 0 0
}

.iwarning {
    color: #fff;
    background: #ffa647
}

.ialert {
    color: #fff;
    background: #33b5e5
}

.isuccess {
    color: #fff;
    background: #79d173
}

.ierror {
    color: #fff;
    background: #d43834
}

.message-ico i {
    font-size: 60px;
    display: block
}

.message-ico span {
    font-size: 28px;
    display: block;
    margin-top: 28px;
    margin-bottom: 20px;
    font-weight: 700
}

.message-msg {
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 16px;
    float: left;
    text-align: center;
    min-height: 110px;
    box-sizing: border-box
}

    .message-msg span {
        font-size: 17px;
        color: #6c6c6c;
        line-height: 1.5
    }

.message-close-btn {
    display: block;
    float: left;
    width: 100%;
    text-align: center;
    height: 45px
}

    .message-close-btn a {
        font-size: 16px;
        padding: 7px 20px;
        text-decoration: none;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
        outline: 0;
        color: #000;
        border: 1px solid #bdbdbd
    }

        .message-close-btn a:active {
            position: relative;
            top: 3px;
            left: 3px
        }

.choose-slt {
    width: 70%;
    float: left
}

    .choose-slt span {
        font-size: 10px;
        width: 100%;
        float: left;
        padding: 5px 0;
        text-align: center
    }

.collapse {
    display: none
}

    .collapse.in {
        display: block;
        width: 100%;
        float: left
    }

tr.collapse.in {
    display: table-row
}

tbody.collapse.in {
    display: table-row-group
}

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition-duration: .35s;
    -o-transition-duration: .35s;
    transition-duration: .35s;
    -webkit-transition-property: height,visibility;
    -o-transition-property: height,visibility;
    transition-property: height,visibility
}

.accordin {
    margin-bottom: 10px;
    background-color: #fff;
    border: 1px solid transparent;
    width: 100%;
    float: left
}

.accordin-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px
}

    .accordin-heading > .accordin-title > a > i {
        font-size: 24px;
        position: absolute;
        top: 8px;
        right: 5px
    }

    .accordin-heading > .dropdown .dropdown-toggle {
        color: inherit
    }

.accordin-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit
}

    .accordin-title a {
        position: absolute;
        top: 0;
        border: 0;
        left: 0;
        right: 35px;
        padding: 9px;
        font-size: 16px;
        font-weight: 400;
        color: #313131
    }

.accordin-default {
    border-color: #ddd
}

    .accordin-default > .accordin-heading {
        color: #333;
        background-color: #f5f5f5;
        border-color: #ddd;
        position: relative;
        height: 40px;
        box-sizing: border-box
    }

        .accordin-default > .accordin-heading + .accordin-collapse > .accordin-body {
            border-top-color: #ddd
        }

.move-record-cont {
    width: 700px;
    height: 400px;
    background: #fff;
    border-radius: 2px;
    position: relative;
    padding: 5px 0;
    margin: 5% auto;
    border: 1px solid rgba(0,0,0,.12);
    box-sizing: border-box
}

.move-record-title {
    width: 100%;
    display: block;
    border-bottom: 1px solid rgba(221,221,221,0.36);
    float: left
}

    .move-record-title h2 {
        margin: 5px 8px;
        font-size: 20px;
        width: 91%;
        float: left;
        font-weight: 400
    }

    .move-record-title .close-btn {
        float: left
    }

        .move-record-title .close-btn a {
            margin: 3px 10px;
            display: block;
            font-weight: 500;
            font-size: 22px;
            color: #9e9e9e
        }

            .move-record-title .close-btn a:hover {
                color: #515151
            }

.mov-rec-sel-option {
    text-align: center;
    width: 70%;
    margin: 5% 15% 2%;
    display: block;
    float: left
}

    .mov-rec-sel-option span {
        font-size: 20px;
        line-height: 35px;
        font-weight: 300;
        display: block
    }

    .mov-rec-sel-option .s-arr {
        position: relative
    }

        .mov-rec-sel-option .s-arr select {
            font-size: 18px;
            border-width: 0 0 1px;
            padding: 2px;
            margin: 16px 5px 14px;
            outline: 0;
            width: 100%;
            font-weight: 300
        }

        .mov-rec-sel-option .s-arr:after {
            content: "\F140";
            font-family: Material Design Icons;
            position: absolute;
            right: -7px;
            bottom: 18px;
            font-size: 18px;
            pointer-events: none;
            width: 30px;
            height: 25px;
            background: #fff;
            padding: 0 7px;
            box-sizing: border-box
        }

.move-recor-btn {
    width: 24%;
    margin: 2% 38%;
    float: left
}

    .move-recor-btn a {
        padding: 7px 15px;
        font-size: 16px;
        text-decoration: none;
        float: left;
        margin: 20px 10px 2px 0;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
        outline: 0
    }

        .move-recor-btn a.cancel {
            background-color: #fff;
            color: #000;
            outline: 1px solid rgba(191,191,191,0.47);
            box-sizing: border-box
        }

        .move-recor-btn a:active {
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
            position: relative;
            top: 3px;
            left: 3px
        }

.move-record-tab {
    float: left;
    border-bottom: 1px solid rgba(172,172,172,0.14);
    width: 100%
}

    .move-record-tab ul {
        list-style: none;
        margin: 0;
        padding: 0;
        float: left;
        width: 95%
    }

        .move-record-tab ul li {
            display: block;
            float: left;
            padding: 10px
        }

            .move-record-tab ul li.active {
                box-sizing: border-box;
                position: relative;
                background: #f9f9f9
            }

.security-setting-container {
    width: 90%;
    min-height: 500px;
    margin: 1% 5%;
    position: relative;
    float: left;
    display: block;
    border-radius: 3px;
    background-color: #f2f2f2;
    color: #4f5256;
    border: 1px solid rgba(0,0,0,.12);
    margin-bottom: 8px
}

.sec-set-iner-cont {
    margin: 5px 0;
    float: left;
    width: 100%;
    height: 400px;
    overflow-x: auto
}

.sec-set-field {
    width: 40%;
    margin: 1% 5%;
    height: 50px;
    float: left;
    position: relative
}

    .sec-set-field span {
        width: 100%;
        float: left;
        display: block;
        text-align: left;
        font-size: 15px;
        margin-bottom: 5px
    }

.bill-info-field span.total-sum {
    font-size: 22px;
    font-weight: 500;
    color: #e56920;
    margin: 10px 0
}

.sec-set-field .ss-sv-bt {
    padding: 7px 15px;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    float: left;
    margin: 2px 0;
    border-radius: 2px;
    box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
}

    .sec-set-field .ss-sv-bt:active {
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
        position: relative;
        top: 3px;
        left: 3px
    }

.sec-set-field .can-btn {
    background-color: #fff;
    padding: 7px 15px;
    font-size: 16px;
    color: #303030;
    text-decoration: none;
    float: left;
    margin: 2px 10px;
    border-radius: 2px;
    box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
}

    .sec-set-field .can-btn:active {
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
        position: relative;
        top: 3px;
        left: 3px
    }

.sec-set-field input[type="checkbox"] {
    display: none
}

.sec-set-field input {
    width: 98%;
    float: left;
    display: block;
    text-align: left;
    font-size: 15px;
    padding: 5px;
    border: solid #e0e0e0;
    border-width: 0 0 1px;
    box-shadow: none
}

.sec-set-field select {
    width: 100%;
    float: left;
    display: block;
    text-align: left;
    font-size: 14px;
    padding: 5px;
    border: solid #e0e0e0;
    border-width: 0 0 1px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none
}

.sec-set-field select, .sec-set-field input {
    outline: 0
}

.sec-set-field option {
    font-size: 14px;
    line-height: 20px
}



.add-ar-form {
    margin-right: 50px;
    width: 38px;
    height: 38px;
    background-color: #f1533c;
    border-radius: 50%;
    display: block;
    float: right;
    margin-top: 20px;
    text-align: center;
    line-height: 40px;
    color: #fff
}

.ssmat-check-box tr {
    display: inline
}

.ssmat-check-box {
    float: left;
    display: block;
    margin: 0 10px 0 0;
    padding: 2px;
    box-sizing: border-box;
    height: 30px;
    position: relative
}

    .ssmat-check-box [type="checkbox"]:not(:checked), .ssmat-check-box [type="checkbox"]:checked {
        position: absolute;
        width: 5px;
        opacity: 0
    }

    .ssmat-check-box [type="checkbox"] + label {
        position: relative;
        padding-left: 35px;
        cursor: pointer;
        display: inline-block;
        height: 25px;
        line-height: 25px;
        font-size: 14px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -ms-user-select: none;
        margin: 0
    }

        .ssmat-check-box [type="checkbox"] + label:before {
            content: '';
            position: absolute;
            top: 2px;
            left: 0;
            width: 14px;
            height: 14px;
            z-index: 0;
            border: 2px solid #8a8a8a;
            border-radius: 1px;
            margin-top: 2px;
            transition: .2s
        }

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

.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-role-table table tr > th {
            background-color: #f0f0f0;
            vertical-align: middle;
            color: #333;
            border-width: 1px;
            text-transform: uppercase;
            border-bottom: 1px solid #f0f0f0;
            padding: 10px 2px;
            line-height: 1.42857143;
            font-weight: 500;
            font-size: 15px;
            text-align: left;
            z-index: 9;
            cursor: pointer;
            min-width: 100px
        }

        .ss-role-table table tr > td {
            vertical-align: middle;
            font-weight: 400;
            color: #333;
            border-width: 1px;
            border-bottom: 1px solid #f0f0f0;
            padding: 5px 10px;
            line-height: 1.42857143;
            text-align: left;
            font-size: 15px
        }

            .ss-role-table table tr > td .cntlink {
                color: #333;
                text-decoration: underline;
                outline: 0
            }

                .ss-role-table table tr > td .cntlink:hover {
                    color: #000;
                    text-decoration: none
                }

            .ss-role-table table tr > td.int {
                text-align: right
            }

        .ss-role-table table > tbody > tr:nth-of-type(odd) {
            background-color: #fefefe
        }

        .ss-role-table table tr > td a.insrt {
            padding: 5px 10px;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            float: left;
            margin: 2px 0;
            border-radius: 2px;
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
        }

            .ss-role-table table tr > td a.insrt:active {
                box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
                position: relative;
                top: 3px;
                left: 3px
            }

        .ss-role-table table tr > td a i {
            font-size: 20px;
            color: gray;
            margin: 0 5px 0 0
        }

            .ss-role-table table tr > td a i:hover {
                color: #000
            }

        .ss-role-table table tr > td input {
            width: 70%;
            float: left;
            text-align: left;
            font-size: 14px;
            padding: 5px;
            border-width: 0 0 1px;
            box-shadow: none;
            outline: 0
        }

        .ss-role-table table tr.notact {
            background-color: #fff2f1 !important
        }

.ss-rol-tbl-edit {
    font-size: 14px !important;
    font-weight: 500;
    width: 50px;
    display: inline
}

    .ss-rol-tbl-edit i {
        float: left;
        display: block;
        margin: 3px;
        font-size: 18px
    }

    .ss-rol-tbl-edit span {
        float: left;
        display: block
    }

.ss-user-tha-role-cont {
    width: 885px;
    height: 480px;
    background: #fff;
    border-radius: 2px;
    position: relative;
    padding: 5px;
    margin: 5% auto;
    border: 1px solid rgba(0,0,0,.12);
    box-sizing: border-box
}

    .ss-user-tha-role-cont .popheader {
        width: 100%;
        display: block;
        border-bottom: 1px solid rgba(221,221,221,0.36);
        float: left
    }

        .ss-user-tha-role-cont .popheader h2 {
            margin: 5px 8px;
            font-size: 18px;
            width: 95%;
            float: left;
            font-weight: 400
        }

        .ss-user-tha-role-cont .popheader .close-btn {
            float: left
        }

            .ss-user-tha-role-cont .popheader .close-btn a {
                margin: 3px 2px;
                display: block;
                font-weight: 500;
                font-size: 22px;
                color: #9e9e9e
            }

                .ss-user-tha-role-cont .popheader .close-btn a:hover {
                    color: #515151
                }

.ss-user-in-th-role {
    width: 100%;
    height: 500px
}

.users-action-cntl {
    display: block;
    width: 26%;
    height: 38px;
    position: absolute;
    right: 0
}

.user-add-edit-btn {
    display: block;
    float: left
}

    .user-add-edit-btn a {
        padding: 3px 10px;
        font-size: 14px;
        color: #000;
        text-decoration: none;
        margin: 4px 8px 0;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
        position: relative;
        top: 5px;
        background-color: #ddd
    }

.users-action-cntl .excel {
    background-color: #fff;
    box-shadow: none;
    font-size: 26px;
    padding: 0;
    margin: 5px 8px;
    position: relative;
    color: #636363
}

.user-add-edit-btn a.active {
    color: #fff
}

.user-add-edit-btn a:active {
    box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
    position: relative;
    top: 3px;
    left: 3px
}

.user-add-edit-btn span {
    float: left;
    font-size: 15px;
    padding: 2px;
    display: block;
    margin: 5px;
    font-weight: 500
}

.ss-addusr-cont {
    width: 885px;
    background: #fff;
    border-radius: 2px;
    position: relative;
    padding: 5px 0;
    margin: 0 auto;
    border: 1px solid rgba(0,0,0,.12);
    box-sizing: border-box;
    float: left
}

    .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
        }

        .ss-addusr-cont .header .close-btn {
            float: left
        }

            .ss-addusr-cont .header .close-btn a {
                margin: 3px 10px;
                display: block;
                font-weight: 500;
                font-size: 22px;
                color: #9e9e9e
            }

                .ss-addusr-cont .header .close-btn a:hover {
                    color: #515151
                }

.ss-add-us-iner-cont {
    margin: 15px 0;
    float: left;
    width: 100%
}

.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 span.pix {
            position: absolute;
            bottom: 0;
            right: 0;
            top: 0;
            width: 50px
        }

    .sec-set-user-field input {
        width: 98%;
        float: left;
        text-align: left;
        font-size: 15px;
        padding: 5px;
        border: solid #e0e0e0;
        border-width: 0 0 1px;
        box-shadow: none
    }

    .sec-set-user-field textarea {
        width: 98%;
        float: left;
        display: block;
        text-align: left;
        font-size: 14px;
        padding: 5px;
        border: solid #e0e0e0;
        border-width: 0 0 1px;
        box-shadow: none;
        height: 25px;
        outline: 0;
        resize: none
    }

    .sec-set-user-field select {
        width: 100%;
        float: left;
        display: block;
        text-align: left;
        font-size: 14px;
        padding: 5px;
        border: solid #e0e0e0;
        border-width: 0 0 1px;
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        appearance: none;
        height: 32px
    }

    .sec-set-user-field select, .sec-set-user-field input, .sec-set-user-field textarea {
        outline: 0
    }

    .sec-set-user-field option {
        font-size: 14px;
        line-height: 20px
    }

    .sec-set-user-field .ss-sel-drop {
        position: relative;
        float: left;
        width: 100%
    }

    .sec-set-user-field > .sve-btn {
        padding: 5px 10px;
        font-size: 16px;
        color: #fff;
        text-decoration: none;
        float: left;
        margin: 6px 8px 0;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
    }

        .sec-set-user-field > .sve-btn:active {
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
            position: relative;
            top: 3px;
            left: 3px
        }

    .sec-set-user-field > .can-btn {
        background-color: #fff;
        padding: 5px 10px;
        font-size: 16px;
        color: #000;
        text-decoration: none;
        float: left;
        margin: 6px 8px 0;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
    }

        .sec-set-user-field > .can-btn:active {
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
            position: relative;
            top: 3px;
            left: 3px
        }

.sec-set-user-larg-field {
    width: 90%;
    min-height: 50px;
    margin: 1% 5%;
    float: left;
    position: relative
}

    .sec-set-user-larg-field span {
        width: 100%;
        float: left;
        display: block;
        text-align: left;
        font-size: 12px;
        font-weight: 500;
        margin-bottom: 5px
    }

    .sec-set-user-larg-field .ss-sel-larg-drop {
        position: relative;
        float: left;
        width: 100%
    }

.choose-option {
    width: 60%;
    min-height: 500px;
    margin: 1% 20%;
    position: relative;
    float: left;
    display: block;
    border-radius: 4px;
    background-color: #fff;
    color: #4f5256;
    border: 1px solid rgba(0,0,0,.12);
    margin-bottom: 8px
}

.choose-image-container {
    width: 100%;
    height: 310px;
    overflow: hidden
}

    .choose-image-container img {
        width: 100%;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px
    }

.info-img-two, .info-img-three, .info-img-four {
    display: none
}

.choose-btn-container {
    width: 100%;
    height: 50px;
    box-shadow: 0 -2px 4px #ddd
}

.choose-btn-lnk {
    float: left;
    margin: 10px 42%;
    display: block
}

    .choose-btn-lnk a {
        width: 15px;
        height: 15px;
        float: left;
        background-color: #ddd;
        display: block;
        margin: 0 5px;
        border-radius: 50%
    }

.version-selection {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/images/Bankground-Img.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 5% 0
}

.choose-theme-new-msg {
    float: left;
    margin: 0 5%
}

    .choose-theme-new-msg p {
        font-weight: 300;
        line-height: 30px;
        text-align: center;
        font-size: 22px;
        margin: 10px 0;
        padding: 0
    }

    .choose-theme-new-msg .yes-no-btn {
        float: right
    }

        .choose-theme-new-msg .yes-no-btn a {
            text-decoration: none
        }

            .choose-theme-new-msg .yes-no-btn a.ybtn {
                color: #fff;
                font-weight: 300;
                font-size: 20px;
                padding: 5px;
                border-radius: 2px;
                margin: 0 15px;
                text-decoration: none
            }

.wf-em-condition-op {
    width: 100%;
    float: left
}

    .wf-em-condition-op .na-lbl {
        font-size: 14px;
        padding: 8px;
        display: block;
        float: left;
        box-sizing: border-box
    }

    .wf-em-condition-op select {
        width: 100%;
        float: left;
        display: block;
        text-align: left;
        font-size: 16px;
        padding: 5px;
        border: solid #e0e0e0;
        border-width: 0 0 1px;
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        appearance: none;
        outline: 0;
        margin: 5px
    }

    .wf-em-condition-op .sel-field {
        position: relative;
        float: left;
        width: 60%
    }

        .wf-em-condition-op .sel-field:after {
            content: "\f35d";
            font-family: Material Design Icons;
            position: absolute;
            right: -2px;
            bottom: 13px;
            font-size: 25px;
            pointer-events: none;
            width: 30px;
            height: 22px;
            background: #fff;
            padding: 3px 7px;
            box-sizing: border-box
        }

.cost-emil-not-cont {
    margin: 15px 0;
    float: left;
    width: 100%
}

.cost-emil-not-field {
    width: 78%;
    margin: .5% 11%;
    float: left;
    position: relative
}

    .cost-emil-not-field .lab-spn {
        width: 100%;
        float: left;
        display: block;
        text-align: left;
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 5px
    }


.cost-emil-not-field input[type="checkbox"] {
    display: none
}

.cost-emil-not-field input {
    width: 98%;
    float: left;
    display: block;
    text-align: left;
    font-size: 14px;
    padding: 5px;
    border: solid #e0e0e0;
    border-width: 0 0 1px;
    box-shadow: none
}

.cost-emil-not-field select {
    width: 100%;
    float: left;
    display: block;
    text-align: left;
    font-size: 14px;
    padding: 5px;
    border: solid #e0e0e0;
    border-width: 0 0 1px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none
}

.cost-emil-not-field select, .cost-emil-not-field input {
    outline: 0
}

.cost-emil-not-field option {
    font-size: 14px;
    line-height: 20px
}

.cost-emil-not-field > .Editor-container {
    float: left;
    width: 100%
}

.cost-emil-not-field.link-gen a {
    position: absolute;
    right: 5px;
    font-size: 12px;
    top: 19px;
    padding: 5px;
    border-radius: 2px;
    color: #fff;
    box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
}

    .cost-emil-not-field.link-gen a:active {
        box-shadow: none
    }

.cost-emil-not-field em {
    font-style: normal;
    font-size: 14px;
    float: left;
    display: block;
    margin-right: 15px
}

.tbl-email-monitor {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.mat-checkbox {
    float: left;
    display: block;
    width: 100%
}

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

    .mat-checkbox [type="checkbox"] + label {
        position: relative;
        padding-left: 35px;
        cursor: pointer;
        display: inline-block;
        height: 25px;
        line-height: 25px;
        font-size: .9rem;
        -webkit-user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -ms-user-select: none
    }

        .mat-checkbox [type="checkbox"] + label:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 15px;
            height: 15px;
            z-index: 0;
            border: 2px solid #5a5a5a;
            border-radius: 1px;
            margin-top: 2px;
            transition: .2s
        }

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

.em-monitor-container {
    width: 100%;
    display: block
}

.em-monit-contdi-op {
    width: 33.3%;
    float: left
}

    .em-monit-contdi-op .na-lbl {
        font-size: 14px;
        padding: 8px;
        display: block;
        float: left;
        box-sizing: border-box
    }

    .em-monit-contdi-op select {
        width: 100%;
        float: left;
        display: block;
        text-align: left;
        font-size: 16px;
        padding: 5px;
        border: solid #e0e0e0;
        border-width: 0 0 1px;
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        appearance: none;
        outline: 0;
        margin: 5px
    }

    .em-monit-contdi-op input {
        width: 55%;
        float: left;
        display: block;
        text-align: left;
        font-size: 16px;
        padding: 5px;
        border: solid #e0e0e0;
        border-width: 0 0 1px;
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        appearance: none;
        outline: 0;
        margin: 5px
    }

    .em-monit-contdi-op .sel-field {
        position: relative;
        float: left;
        width: 55%
    }

        .em-monit-contdi-op .sel-field:after {
            content: "\f35d";
            font-family: Material Design Icons;
            position: absolute;
            right: -2px;
            bottom: 13px;
            font-size: 25px;
            pointer-events: none;
            width: 30px;
            height: 22px;
            background: #fff;
            padding: 3px 7px;
            box-sizing: border-box
        }

.ss-em-monitor-cont, .cust-email-not {
    display: none
}

.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,.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
        }

.acc-rad-cont {
    float: right;
    margin: 5px
}

.mat-rad {
    float: left;
    margin: 0 10px 0 0
}

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

        .mat-rad input[type="radio"]:not(:checked) + label, .mat-rad input[type="radio"]:checked + label {
            position: relative;
            cursor: pointer;
            display: inline-block;
            height: 25px;
            line-height: 25px;
            font-size: 14px;
            transition: .28s ease;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            font-weight: 400;
            margin: 0;
            padding: 2px 5px 2px 30px;
            border-radius: 2px
        }

            .mat-rad input[type="radio"]:not(:checked) + label i, .mat-rad input[type="radio"]:checked + label i {
                position: relative;
                top: 1px;
                font-size: 18px
            }

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

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

    .mat-rad input[type="radio"]:not(:checked) + label:before, .mat-rad input[type="radio"]:not(:checked) + label:after {
        border: 2px solid #8a8a8a
    }

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

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

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

    .mat-rad input[type="radio"].with-gap:checked + label:after {
        -webkit-transform: scale(0.5);
        transform: scale(0.5)
    }

    .mat-rad input[type="radio"].with-gap:disabled:checked + label:before {
        border: 2px solid rgba(0,0,0,0.26)
    }

    .mat-rad input[type="radio"].with-gap:disabled:checked + label:after {
        border: 0;
        background-color: rgba(0,0,0,0.26)
    }

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

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

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

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

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

.acc-permis-top {
    width: 100%;
    height: 40px;
    float: left
}

.acc-permis-select {
    width: 50%;
    float: left
}

    .acc-permis-select .acc-lab-spn {
        float: left;
        display: block;
        padding: 8px;
        font-size: 14px;
        font-weight: 500
    }

.acc-premis-drop {
    float: left;
    position: relative;
    width: 350px
}

    .acc-premis-drop .acc-drop-cont select {
        width: 100%;
        float: left;
        display: block;
        text-align: left;
        font-size: 14px;
        padding: 5px;
        border: solid #e0e0e0;
        border-width: 0 0 1px;
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        appearance: none;
        height: 32px;
        outline: 0;
        margin: 0
    }

    .acc-premis-drop:after {
        content: "\F140";
        font-family: Material Design Icons;
        position: absolute;
        right: -4px;
        bottom: 2px;
        font-size: 18px;
        pointer-events: none;
        width: 25px;
        height: 25px;
        background: #fff;
        padding: 4px 2px;
        box-sizing: border-box
    }

.acc-permis-top-btn {
    float: right
}

    .acc-permis-top-btn input {
        display: block;
        padding: 7px;
        border-radius: 2px;
        color: #f5f5f5;
        text-align: center;
        text-decoration: none;
        font-size: 14px;
        margin: 3px 5px;
        border: 0;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
        outline: 0;
        float: left
    }

        .acc-permis-top-btn input:active {
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
            position: relative;
            top: 3px;
            left: 3px
        }

.cansub-check-box tr {
    display: inline
}

.cansub-check-box {
    float: left;
    display: block;
    margin: -4px 5px 0 0;
    padding: 2px;
    box-sizing: border-box;
    height: 30px
}

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

    .cansub-check-box [type="checkbox"] + label {
        position: relative;
        padding-left: 20px;
        cursor: pointer;
        display: inline-block;
        height: 25px;
        line-height: 25px;
        font-size: 14px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -ms-user-select: none;
        margin: 0
    }

        .cansub-check-box [type="checkbox"] + label:before {
            content: '';
            position: absolute;
            top: 2px;
            left: 0;
            width: 14px;
            height: 14px;
            z-index: 0;
            border: 2px solid #8a8a8a;
            border-radius: 1px;
            margin-top: 2px;
            transition: .2s
        }

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

.jcrop-holder {
    top: 40px;
    margin: auto
}

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

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

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

.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: 186px;
    height: 95px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    position: relative
}

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

.ss-perm-list-conot {
    width: 100%;
    display: block;
    float: left;
    margin: .5% 0
}

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

.acc-op-cl-arr {
    position: absolute;
    top: 6px;
    right: 5px
}

    .acc-op-cl-arr i {
        font-size: 25px;
        padding: 3px;
        color: #676767
    }

.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
}

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

.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;
        font-weight: 400 !important;
        color: #464646;
        float: left;
        border: 0;
        z-index: 2;
        width: 96%
    }

        .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
}

.ss-acprm-gr-name {
    width: 55%;
    float: left
}

.group-list-row {
    margin: 3px 0;
    float: left;
    width: 100%;
    border-bottom: 1px solid #c2c2c2
}

.ss-acprm-gr-name span {
    float: left;
    font-size: 15px;
    padding: 5px 10px;
    color: #464646;
    width: 50%
}

    .ss-acprm-gr-name span i {
        position: relative;
        top: 1px;
        left: 4px;
        color: #1ba40a;
        margin-right: 5px;
        font-size: 14px;
        float: right
    }

.ss-acprm-vw-per {
    width: 45%;
    float: left
}

.ss-acprm-all {
    width: 50%;
    float: left
}

    .ss-acprm-all .nam-lab {
        float: left;
        font-size: 15px;
        padding: 5px
    }

    .ss-acprm-all .val-lab {
        float: left;
        font-size: 13px;
        font-weight: 500;
        padding: 5px;
        color: #333
    }

.acc-grp-radi {
    float: left;
    display: block;
    height: 20px;
    margin-right: 5px
}

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

    .acc-grp-radi [type="checkbox"] + label {
        position: relative;
        padding-left: 21px;
        cursor: pointer;
        display: inline-block;
        height: 20px;
        box-sizing: border-box;
        font-size: .9rem;
        -webkit-user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -ms-user-select: none;
        margin: 0
    }

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

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

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

.acc-grop-che {
    float: left;
    display: block;
    height: 25px
}

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

    .acc-grop-che [type="checkbox"] + label {
        color: #464646;
        position: relative;
        padding-left: 21px;
        cursor: pointer;
        display: inline-block;
        height: 24px;
        box-sizing: border-box;
        font-size: .9rem;
        -webkit-user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -ms-user-select: none;
        margin: 0
    }

        .acc-grop-che [type="checkbox"] + label span {
            margin: 0 !important;
            color: #464646
        }

        .acc-grop-che [type="checkbox"] + label:before {
            content: '';
            position: absolute;
            top: 2px;
            left: 0;
            width: 11px;
            height: 11px;
            z-index: 0;
            border: 2px solid #afafaf;
            border-radius: 1px;
            margin-top: 2px;
            transition: .2s
        }

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

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

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

    .acc-prm-check[type="checkbox"]:not(:checked), .acc-prm-check[type="checkbox"]: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;
        -webkit-user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -ms-user-select: none;
        margin: 0
    }

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

    .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;
        -webkit-transform: rotate(40deg);
        transform: rotate(40deg);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform-origin: 100% 100%;
        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
}

.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
}

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

    .acc-prem-tab .acc-wrl-nam.active:after {
        font-family: Material Design Icons;
        content: '\f360';
        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
        }

.acc-prem-search {
    float: right;
    display: block;
    margin: 2px
}

    .acc-prem-search input {
        outline: 0;
        box-shadow: none;
        border-width: 0 0 2px;
        font-size: 14px;
        width: 300px;
        float: left;
        padding: 5px 2px;
        box-sizing: border-box;
        margin: 10px 0
    }

    .acc-prem-search span {
        font-size: 26px;
        margin: 5px 15px;
        color: #000;
        display: block;
        float: left
    }

.aco-wrk-sv-cont {
    width: 100%;
    display: block;
    float: left;
    border-top: 1px solid #ddd
}

.wrk-set-btn {
    width: 20%;
    display: block;
    float: right
}

    .wrk-set-btn .ap-sub-btn {
        padding: 4px 10px;
        font-size: 14px;
        color: #fff;
        text-decoration: none;
        float: left;
        margin: 8px 5px 10px;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
    }

        .wrk-set-btn .ap-sub-btn:active {
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
            position: relative;
            top: 3px;
            left: 3px
        }

    .wrk-set-btn .ap-can-btn {
        background-color: #fff;
        padding: 4px 10px;
        font-size: 14px;
        color: #333;
        text-decoration: none;
        float: left;
        margin: 8px 5px 10px;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
    }

        .wrk-set-btn .ap-can-btn:active {
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
            position: relative;
            top: 3px;
            left: 3px
        }

.acp-popup-edit {
    width: 885px;
    height: 500px;
    background: #fff;
    border-radius: 2px;
    position: relative;
    padding: 5px 0;
    margin: 5% auto;
    border: 1px solid rgba(0,0,0,.12);
    box-sizing: border-box
}

    .acp-popup-edit .acp-pop-hed {
        width: 100%;
        display: block;
        border-bottom: 1px solid rgba(221,221,221,0.36);
        float: left
    }

        .acp-popup-edit .acp-pop-hed h2 {
            margin: 5px 8px;
            font-size: 20px;
            width: 93%;
            float: left;
            font-weight: 400
        }

        .acp-popup-edit .acp-pop-hed .close-btn {
            float: left
        }

            .acp-popup-edit .acp-pop-hed .close-btn a {
                margin: 3px 10px;
                display: block;
                font-weight: 500;
                font-size: 22px;
                color: #9e9e9e
            }

.acc-perm-content {
    float: left;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    height: 405px;
    overflow-y: auto
}

    .acc-perm-content table {
        float: left;
        width: 100%;
        border-collapse: collapse
    }

        .acc-perm-content table tr:nth-child(odd) {
            background-color: #f4f4f4
        }

        .acc-perm-content table th {
            background: #f1f1f1;
            padding: 8px;
            box-sizing: border-box;
            font-size: 14px;
            font-weight: 500;
            color: #464646
        }

            .acc-perm-content table th:first-child {
                width: 50%
            }

        .acc-perm-content table td {
            padding: 5px 10px;
            box-sizing: border-box;
            font-size: 12px;
            font-weight: 400;
            color: #464646
        }

            .acc-perm-content table td:first-child .acp-pop-lbl {
                padding: 2px;
                display: block;
                font-size: 15px;
                font-weight: 400;
                color: #464646
            }

        .acc-perm-content table th h3 {
            margin: 0;
            font-size: 15px;
            font-weight: 500;
            color: #464646;
            float: left;
            top: 8px;
            left: 40px;
            right: 0;
            border: 0
        }

            .acc-perm-content table th h3 i {
                position: relative;
                top: 2px;
                left: 4px;
                color: #1ba40a
            }

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

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

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

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

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

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

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

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

.acp-radio input[type="radio"].with-gap:checked + label:after {
    -webkit-transform: scale(0.5);
    transform: scale(0.5)
}

.acp-radio input[type="radio"].with-gap:disabled:checked + label:before {
    border: 2px solid rgba(0,0,0,0.26)
}

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

.acp-radio input[type="radio"]:disabled:not(:checked) + label:before, .acp-radio input[type="radio"]:disabled: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
}

.ss-acp-sel {
    display: inline-block;
    width: 100px;
    margin-bottom: 2px;
    font-weight: 500;
    position: relative
}

    .ss-acp-sel select {
        width: 100%;
        float: left;
        display: block;
        text-align: left;
        font-size: 12px;
        padding: 3px;
        border: solid #e0e0e0;
        border-width: 0 0 1px;
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        appearance: none;
        outline: 0;
        margin: 0;
        height: 25px
    }

    .ss-acp-sel:after {
        content: "\f35d";
        font-family: Material Design Icons;
        position: absolute;
        right: -3px;
        bottom: 2px;
        font-size: 18px;
        pointer-events: none;
        width: 20px;
        height: 22px;
        background: #fff;
        padding: 2px 0;
        box-sizing: border-box
    }

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

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

.ss-fir-menu {
    width: 100%;
    float: left
}

.ssperset {
    width: 100%;
    float: left;
    display: none
}

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

.ss-menu-cont {
    width: 98%;
    margin: 1%;
    float: left;
    box-sizing: border-box
}

.ss-menu-lnk {
    display: block;
    width: 13.65%;
    text-align: center;
    float: left;
    margin: 1.5%
}

    .ss-menu-lnk a {
        display: block;
        width: 100%;
        height: 22vh;
        min-height: 100px;
        color: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05),0 2px 10px 0 rgba(0,0,0,0.05)
    }

        .ss-menu-lnk a:hover {
            box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15)
        }

        .ss-menu-lnk a i {
            display: block;
            width: 100%;
            height: 14vh;
            font-size: 4em;
            line-height: 14vh;
            padding-top: 10px;
            min-height: 55px;
            opacity: .8
        }

        .ss-menu-lnk a span {
            display: block;
            width: 100%;
            font-size: 15px;
            line-height: 35px
        }

        .ss-menu-lnk a img {
            display: block;
            width: 7vh;
            padding-top: 5.5vh;
            padding-bottom: 3vh;
            opacity: .8;
            margin: 0 auto
        }

.ss-menu-view {
    width: 97%;
    margin: .375% 1.5%;
    position: relative;
    float: left;
    display: block;
    border-radius: 3px;
    background-color: #fff;
    margin-bottom: 8px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05),0 2px 10px 0 rgba(0,0,0,0.05)
}

.ss-menu-lnk:first-child a {
    background-color: #4caf50
}

.ss-menu-lnk:nth-child(2) a {
    background-color: #00bcd4
}

.ss-menu-lnk:nth-child(3) a {
    background-color: #03a9f4
}

.ss-menu-lnk:nth-child(4) a {
    background-color: #fca435
}

.ss-menu-lnk:nth-child(5) a {
    background-color: #ff4720
}

.ss-menu-lnk:nth-child(6) a {
    background-color: #e0ad00
}

.ss-menu-lnk:nth-child(7) a {
    background-color: #673ab7
}

.ss-menu-lnk:nth-child(8) a {
    background-color: #167abc
}

.ss-menu-lnk:nth-child(9) a {
    background-color: #468014
}

.ss-menu-lnk:nth-child(10) a {
    background-color: #e76f23
}

.ss-menu-lnk:nth-child(11) a {
    background-color: #6a699a
}

.ss-menu-lnk:nth-child(12) a {
    background-color: #355d80
}

.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
    }

.ss-close-top a i {
    color: #9e9e9e;
    font-size: 22px;
    margin: 9px 10px 0;
    float: left;
    position: absolute;
    left: 0
}

    .ss-close-top a i:hover {
        color: #000
    }

.ss-gen-cont h3 {
    font-size: 15px;
    font-weight: 500;
    float: left;
    padding: 8px 10px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    margin: 0
}

.ss-top-header {
    border-bottom: 1px solid #ddd;
    float: left;
    width: 100%;
    position: relative
}

.api-set-field {
    width: 80%;
    margin: 2% 10% 1%;
    height: 50px;
    float: left;
    position: relative
}

    .api-set-field span {
        width: 100%;
        float: left;
        display: block;
        text-align: left;
        font-size: 15px;
        margin-bottom: 5px
    }

    .api-set-field input {
        width: 98%;
        float: left;
        display: block;
        text-align: left;
        font-size: 14px;
        padding: 5px;
        border: solid #e0e0e0;
        border-width: 0 0 1px;
        box-shadow: none;
        outline: 0
    }

    .api-set-field .ss-sv-bt {
        padding: 7px 15px;
        font-size: 16px;
        color: #fff;
        text-decoration: none;
        float: left;
        margin: 2px 0;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
    }

        .api-set-field .ss-sv-bt:active {
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
            position: relative;
            top: 3px;
            left: 3px
        }

    .api-set-field .can-btn {
        background-color: #fff;
        padding: 7px 15px;
        font-size: 16px;
        color: #303030;
        text-decoration: none;
        float: left;
        margin: 2px 10px;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
    }

        .api-set-field .can-btn:active {
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
            position: relative;
            top: 3px;
            left: 3px
        }

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

.ssperset, .ssuset, .ssrolset, .sspasset, .ssmlset, .ssmsset, .ssapiset, .sswebset, .ssenckey, .ssteamset {
    display: none
}


.page-title .ss-back-btn {
    float: left;
    display: none;
    position: absolute
}

    .page-title .ss-back-btn a {
        float: left;
        opacity: .5
    }

        .page-title .ss-back-btn a:hover {
            opacity: 1
        }

    .page-title .ss-back-btn i {
        font-size: 30px;
        padding: 2px;
        box-sizing: border-box;
        margin: 10px 0;
        color: #000
    }

.sms-tst-btn {
    width: 100%;
    margin: 1% 5%;
    height: 40px;
    float: left;
    position: relative
}

    .sms-tst-btn a {
        padding: 7px 15px;
        font-size: 16px;
        color: #fff;
        text-decoration: none;
        float: left;
        margin: 2px 0;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
    }

        .sms-tst-btn a:active {
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
            position: relative;
            top: 3px;
            left: 3px
        }

.sms-test-title {
    display: block;
    float: left;
    font-size: 16px;
    font-weight: 500;
    margin: 30px 0 0 20px
}

.ss-insert-user {
    width: 650px;
    min-height: 200px;
    background: #fff;
    border-radius: 2px;
    margin: 10% 15%;
    border: 1px solid transparent;
    box-shadow: 0 0 0 rgba(0,0,0,.32),0 0 6px rgba(0,0,0,.4);
    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: solid #e0e0e0;
    border-width: 0 0 1px;
    box-shadow: none;
    outline: 0
}

    .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: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
        outline: 0;
        float: left;
        color: #fff
    }

        .ss-insert-user-btn a:active {
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
            position: relative;
            top: 3px;
            left: 3px
        }

.ss-insert-teamuser-btn {
    text-align: center;
    width: 27%;
    margin: 0 44.5%;
    float: left
}

    .ss-insert-teamuser-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: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
        outline: 0;
        float: left;
        color: #fff;
        background-color: var(--primary-color)
    }

        .ss-insert-teamuser-btn a:active {
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
            position: relative;
            top: 3px;
            left: 3px
        }

.ss-bef-msg {
    text-align: center;
    margin: 5% 30%
}

.ss-insert-user-btn > .sve-btn {
    padding: 5px 10px;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    float: left;
    margin: 6px 8px 0;
    border-radius: 2px;
    box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
}

    .ss-insert-user-btn > .sve-btn:active {
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
        position: relative;
        top: 3px;
        left: 3px
    }

.ss-insert-user-btn > .can-btn {
    background-color: #fff;
    padding: 5px 10px;
    font-size: 16px;
    color: #000;
    text-decoration: none;
    float: left;
    margin: 6px 8px 0;
    border-radius: 2px;
    box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
}

    .ss-insert-user-btn > .can-btn:active {
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
        position: relative;
        top: 3px;
        left: 3px
    }

.ss-bef-msg span {
    font-size: 20px;
    line-height: 35px;
    font-weight: 300;
    display: block
}

.ss-bef-msg a {
    display: inline-block;
    line-height: 35px;
    font-weight: 300;
    color: #fff;
    padding: 8px 15px;
    box-sizing: border-box;
    border-radius: 2px;
    box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
    margin: 15px 10px
}

    .ss-bef-msg a:active {
        position: relative;
        top: 3px;
        left: 3px
    }

.ss-insert-user .ss-insert-user-field .help {
    top: 90%
}

.role-srch {
    display: none;
    margin: 4px;
    position: absolute;
    right: 0;
    top: 0
}

    .role-srch input {
        outline: 0;
        box-shadow: none;
        border-width: 0 0 2px !important;
        font-size: 14px;
        width: 300px;
        float: left;
        padding: 5px 2px;
        box-sizing: border-box;
        margin: 10px 0
    }

    .role-srch a {
        font-size: 26px;
        margin: 5px 15px;
        color: #000;
        display: block;
        float: left
    }

.ss-usr-act {
    position: relative;
    width: 55px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none
}

    .ss-usr-act input[type=checkbox] {
        display: none
    }

.ss-usr-act-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border-radius: 50px
}

.ss-usr-act-inner {
    width: 200%;
    margin-left: -100%;
    -webkit-transition: margin .3s ease-in 0;
    -moz-transition: margin .3s ease-in 0;
    -ms-transition: margin .3s ease-in 0;
    -o-transition: margin .3s ease-in 0;
    transition: margin .3s ease-in 0
}

    .ss-usr-act-inner:before, .ss-usr-act-inner:after {
        float: left;
        width: 50%;
        height: 16px;
        padding: 0;
        line-height: 16px;
        font-size: 12px;
        color: #fff;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }

    .ss-usr-act-inner:before {
        content: "Yes";
        padding-left: 8px;
        color: #FFF
    }

    .ss-usr-act-inner:after {
        content: "No";
        padding-right: 10px;
        background-color: #d8d8d8;
        color: #888;
        text-align: right
    }

.ss-usr-act-switch {
    width: 14px;
    height: 14px;
    margin: -5px;
    background: #f5f5f5;
    border: 2px solid #0d79f5;
    border-radius: 50%;
    position: absolute;
    top: 4px;
    bottom: 0;
    right: 45px;
    -webkit-transition: all .3s ease-in 0;
    -moz-transition: all .3s ease-in 0;
    -ms-transition: all .3s ease-in 0;
    -o-transition: all .3s ease-in 0;
    transition: all .3s ease-in 0
}

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

.ss-usr-act-cb:checked + .ss-usr-act-label .ss-usr-act-inner {
    margin-left: 0
}

.ss-usr-act-cb:checked + .ss-usr-act-label .ss-usr-act-switch {
    right: 5px
}

.rol-tbl {
    display: none
}

.send-test-sms {
    font-size: 13px;
    text-decoration: underline;
    color: #5a5a5a;
    padding: 12px;
    display: block;
    float: left;
    outline: 0
}

    .send-test-sms:hover {
        text-decoration: none
    }

.acp-tbl-radio {
    padding: 5px;
    width: 240px
}

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

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

        .acp-tbl-radio input[type="radio"]:checked + .acp-lab > span {
            padding: 3px 3px 3px 13px;
            color: #fff
        }

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

.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: "\f12c";
                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: 0 10px 5px 0
}

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

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

        .ss-roleuser-table table tr > th {
            background-color: #f0f0f0;
            vertical-align: middle;
            color: #333;
            border-width: 1px;
            text-transform: uppercase;
            border-bottom: 1px solid #f0f0f0;
            padding: 10px;
            line-height: 1.42857143;
            font-weight: 500;
            font-size: 12px;
            text-align: left;
            z-index: 9;
            cursor: pointer
        }

        .ss-roleuser-table table tr > td {
            vertical-align: middle;
            font-weight: 400;
            color: #333;
            border-width: 1px;
            border-bottom: 1px solid #f0f0f0;
            padding: 5px 10px;
            line-height: 1.42857143;
            text-align: left;
            font-size: 12px
        }

            .ss-roleuser-table table tr > td.int {
                text-align: right
            }

        .ss-roleuser-table table > tbody > tr:nth-of-type(odd) {
            background-color: #fefefe
        }

        .ss-roleuser-table table tr > td a.insrt {
            padding: 5px 10px;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            float: left;
            margin: 2px 0;
            border-radius: 2px;
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
        }

            .ss-roleuser-table table tr > td a.insrt:active {
                box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
                position: relative;
                top: 3px;
                left: 3px
            }

        .ss-roleuser-table table tr > td a i {
            font-size: 20px;
            color: gray;
            margin: 0 5px 0 0
        }

            .ss-roleuser-table table tr > td a i:hover {
                color: #000
            }

        .ss-roleuser-table table tr > td input {
            width: 70%;
            float: left;
            text-align: left;
            font-size: 14px;
            padding: 5px;
            border-width: 0 0 1px;
            box-shadow: none;
            outline: 0
        }

        .ss-roleuser-table table tr.notact {
            background-color: #fff2f1 !important
        }

.process-step-tool-con {
    width: 170px;
    float: left;
    display: block;
    margin: 10px 5px;
    cursor: move;
    position: relative
}

    .process-step-tool-con div {
        float: left
    }

    .process-step-tool-con label {
        cursor: move
    }

    .process-step-tool-con span:first-child {
        width: 60px;
        height: 25px;
        float: left;
        display: block;
        background-color: #e2e2e2;
        border-radius: 2px;
        border: 1px solid #b0afaf
    }

        .process-step-tool-con span:first-child i {
            padding: 0 18px;
            font-size: 25px;
            color: #636363
        }

    .process-step-tool-con span:nth-child(2) {
        display: block;
        float: left;
        font-size: 14px;
        margin-left: 5px;
        line-height: 28px;
        color: #464646
    }

.wrk-gri-sho-che {
    float: left;
    display: block;
    height: 25px;
    margin: 13px 40px
}

    .wrk-gri-sho-che[type="checkbox"]:not(:checked), .wrk-gri-sho-che[type="checkbox"]:checked {
        position: absolute;
        left: -9999px;
        opacity: 0
    }

    .wrk-gri-sho-che [type="checkbox"] + label {
        color: #464646;
        position: relative;
        padding-left: 21px;
        cursor: pointer;
        display: inline-block;
        height: 24px;
        box-sizing: border-box;
        font-size: 16px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -ms-user-select: none;
        margin: 0
    }

        .wrk-gri-sho-che [type="checkbox"] + label span {
            margin: 0 !important;
            color: #464646;
            position: relative;
            top: 2px
        }

        .wrk-gri-sho-che [type="checkbox"] + label:before {
            content: '';
            position: absolute;
            top: 2px;
            left: 0;
            width: 11px;
            height: 11px;
            z-index: 0;
            border: 2px solid #afafaf;
            border-radius: 1px;
            margin-top: 2px;
            transition: .2s
        }

    .wrk-gri-sho-che [type="checkbox"]:checked + label:before {
        top: -2px;
        left: -5px;
        width: 8px;
        height: 14px;
        border-top: 2px solid transparent;
        border-left: 2px solid transparent;
        -webkit-transform: rotate(40deg);
        transform: rotate(40deg);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform-origin: 100% 100%;
        transform-origin: 100% 100%
    }

    .wrk-gri-sho-che input[type="checkbox"] {
        display: none !important
    }

.wrk-lok-no-msg {
    width: 60%;
    text-align: center;
    margin: 15% auto
}

    .wrk-lok-no-msg span {
        color: #da4a38;
        font-size: 20px
    }

.wrk-lok-srn-msg {
    background-image: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/images/no+workflows.jpg);
    background-size: cover;
    width: 100%;
    height: 520px;
    float: left
}

.wrk-chart-parallel-cont {
    width: 800px;
    height: 500px;
    background-color: #fff;
    margin: 0 auto
}

.wrk-chart-parallel-head {
    width: 100%;
    display: block;
    border-bottom: 1px solid rgba(221,221,221,0.36);
    float: left
}

    .wrk-chart-parallel-head h2 {
        margin: 6px 8px;
        font-size: 18px;
        min-width: 20%;
        float: left;
        font-weight: 500
    }

    .wrk-chart-parallel-head .close-btn {
        float: right
    }

        .wrk-chart-parallel-head .close-btn a {
            margin: 5px 10px 0;
            display: block;
            font-weight: 500;
            font-size: 22px;
            color: #9e9e9e
        }

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

.paralle-chek-cont {
    width: 100%;
    float: left;
    padding: 10px;
    box-sizing: border-box;
    padding-left: 50px
}

.parallel-check-cont-inner {
    width: 100%;
    float: left;
    height: 380px;
    overflow-y: auto;
    overflow-x: hidden
}

.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
    }

.parallel-check-sav-btn {
    float: left;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box
}

    .parallel-check-sav-btn .sav-btn {
        padding: 7px 15px;
        font-size: 14px;
        text-decoration: none;
        float: right;
        margin: 15px 10px 2px 0;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
        outline: 0;
        color: #fff
    }

    .parallel-check-sav-btn .can-btn {
        background-color: #fff;
        color: #000;
        outline: 1px solid rgba(191,191,191,0.47);
        box-sizing: border-box;
        padding: 7px 15px;
        font-size: 14px;
        text-decoration: none;
        float: left;
        margin: 15px 10px 2px 0;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
    }

.paral-chk-bx {
    float: left;
    display: block;
    height: 20px;
    position: relative;
    min-height: 20px;
    width: 20px
}

    .paral-chk-bx input[type="checkbox"] {
        display: none
    }

        .paral-chk-bx input[type="checkbox"] + label {
            display: block;
            cursor: pointer;
            padding-left: 60px
        }

            .paral-chk-bx input[type="checkbox"] + label:before {
                content: "";
                display: block;
                position: relative;
                top: 7px;
                border: 1px solid #333 !important;
                border-radius: 0;
                width: 15px;
                height: 15px;
                float: left;
                margin: 0 15px 0 -55px
            }

        .paral-chk-bx input[type="checkbox"]:checked + label:before {
            content: "\2713";
            font-size: 17px;
            line-height: 15px;
            text-align: center
        }

.paral-chk-bx-span {
    float: left;
    font-size: 14px;
    margin-left: 30px;
    width: 270px;
    min-height: 20px;
    margin-top: 7px
}

.paral-chk-bx-ddl {
    float: left;
    font-size: 15px;
    margin-left: 30px;
    width: 310px;
    min-height: 20px;
    text-align: center
}

.wrk-lib-filter {
    width: 100%;
    float: left;
    padding: 0 18px;
    box-sizing: border-box
}

    .wrk-lib-filter a {
        display: block;
        padding: 10px;
        color: #000;
        font-size: 14px;
        font-weight: 400;
        text-decoration: underline;
        float: left
    }

        .wrk-lib-filter a.active {
            font-weight: 500;
            text-decoration: none
        }

        .wrk-lib-filter a:hover {
            text-decoration: none
        }

.wrkcr-add-role {
    width: 650px;
    min-height: 200px;
    background: #fff;
    border-radius: 2px;
    margin: 5% 15%;
    border: 1px solid transparent;
    -webkit-box-shadow: 0 4px 8px rgba(0,0,0,.32),0 8px 40px rgba(0,0,0,.4);
    box-shadow: 0 4px 8px rgba(0,0,0,.32),0 8px 40px rgba(0,0,0,.4);
    box-sizing: border-box;
    float: left
}

.wrkcr-add-rol-title {
    width: 100%;
    border-bottom: 1px solid #ddd;
    float: left
}

    .wrkcr-add-rol-title h2 {
        margin: 0;
        font-weight: 400;
        float: left;
        width: 85%;
        font-size: 20px;
        padding: 5px
    }

.wrkcr-add-rol-close a {
    margin: 3px 10px;
    display: block;
    font-weight: 500;
    font-size: 22px;
    color: #9e9e9e;
    float: right
}

.wrkcr-add-rol-cont {
    display: block;
    width: 90%;
    float: left;
    padding-bottom: 2%;
    margin: 2% 5%
}

.wrkcr-add-rol-field {
    padding: 10px 20px;
    float: left;
    width: 100%;
    box-sizing: border-box;
    height: 85px
}

    .wrkcr-add-rol-field .fldnam-span {
        display: block;
        text-align: left;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 5px
    }

    .wrkcr-add-rol-field .rol-fldmsg {
        display: block;
        text-align: center;
        font-size: 12px;
        line-height: 25px;
        font-weight: 500;
        margin-bottom: 5px;
        color: #888
    }

    .wrkcr-add-rol-field input {
        width: 98%;
        float: left;
        display: block;
        text-align: left;
        font-size: 14px;
        padding: 5px;
        border: solid #e0e0e0;
        border-width: 0 0 1px;
        box-shadow: none;
        outline: 0
    }

.wrkcr-add-rol-btn {
    text-align: center;
    padding: 28px 20px 0;
    float: left;
    width: 100%;
    box-sizing: border-box
}

    .wrkcr-add-rol-btn a {
        padding: 7px;
        border-radius: 2px;
        text-decoration: none;
        font-size: 14px;
        margin: 3px 5px;
        border: 0;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
        outline: 0;
        color: #fff
    }

        .wrkcr-add-rol-btn a:active {
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
            position: relative;
            top: 3px;
            left: 3px
        }

.mat-goo-rad {
    float: left;
    margin: 0 10px 0 0
}

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

        .mat-goo-rad input[type="radio"]:not(:checked) + label, .mat-goo-rad input[type="radio"]:checked + label {
            position: relative;
            cursor: pointer;
            display: inline-block;
            height: 25px;
            line-height: 25px;
            font-size: 14px;
            transition: .28s ease;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            font-weight: 400;
            margin: 0;
            padding: 2px 5px 2px 30px;
            border-radius: 2px
        }

        .mat-goo-rad input[type="radio"]:not(:checked) + label {
            border: 1px solid #8a8a8a
        }

            .mat-goo-rad input[type="radio"]:not(:checked) + label i, .mat-goo-rad input[type="radio"]:checked + label i {
                position: relative;
                top: 1px;
                font-size: 18px
            }

    .mat-goo-rad input[type="radio"] + label:before, .mat-goo-rad input[type="radio"] + label:after {
        content: '';
        position: absolute;
        left: 0;
        top: 2px;
        margin: 4px;
        width: 14px;
        height: 14px;
        z-index: 0;
        transition: .28s ease
    }

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

    .mat-goo-rad input[type="radio"]:not(:checked) + label:before, .mat-goo-rad input[type="radio"]:not(:checked) + label:after {
        border: 2px solid #8a8a8a
    }

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

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

.mat-goo-radinput[type="radio"]:checked + label:after {
    -webkit-transform: scale(1.02);
    transform: scale(1.02)
}

.mat-goo-rad input[type="radio"].with-gap:checked + label:after {
    -webkit-transform: scale(0.5);
    transform: scale(0.5)
}

.mat-goo-rad input[type="radio"].with-gap:disabled:checked + label:before {
    border: 2px solid rgba(0,0,0,0.26)
}

.mat-goo-rad input[type="radio"].with-gap:disabled:checked + label:after {
    border: 0;
    background-color: rgba(0,0,0,0.26)
}

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

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

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

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

.desin-pral-cont {
    width: 900px;
    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-size: 13px !important;
    color: #f44336 !important;
    font-weight: 500;
    padding: 5px;
    border-radius: 4px
}

.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
    }

        .des-cont-cond table td .adv-search-select {
            width: 190px
        }

        .des-cont-cond table td input {
            width: 215px;
            border: solid #ddd;
            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;
    font-size: 16px !important;
    line-height: 25px;
    font-weight: 300;
    color: #fff !important;
    padding: 5px 15px;
    box-sizing: border-box;
    border-radius: 2px;
    box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
    margin: 10px
}

    .des-add-prall-new:active {
        position: relative;
        top: 3px;
        left: 3px
    }

.chck-des-wrk {
    padding: 5px 30px;
    box-sizing: border-box;
    width: 100%;
    float: left
}

.chck-aprv-span {
    color: #5a5a5a;
    font-size: 14px;
    font-weight: 400;
    float: left;
    margin-top: 6px
}

.gogle-usr-sel {
    position: relative;
    float: left;
    width: 96%;
    height: 25px;
    padding-top: 5px;
    padding-left: 18px
}

    .gogle-usr-sel a {
        color: #000;
        font-size: 14px;
        float: left;
        width: 145px;
        text-decoration: underline;
        background: #dadada;
        padding: 5px 2px
    }

        .gogle-usr-sel a i {
            width: 25px;
            float: left;
            height: 20px;
            display: block
        }

            .gogle-usr-sel a i.mdi-check:before {
                display: none
            }

        .gogle-usr-sel a.active i.mdi-check:before {
            display: block;
            float: left;
            padding: 0 2px;
            font-size: 20px
        }

.sec-set-user-field-ful {
    float: left;
    width: 100%;
    padding: 1% 5%;
    box-sizing: border-box
}

    .sec-set-user-field-ful span {
        width: 100%;
        float: left;
        display: block;
        text-align: left;
        font-size: 12px;
        font-weight: 500;
        margin-bottom: 5px
    }

.des-sect-add-cond {
    width: 96%;
    float: left;
    margin: 0 2%;
    box-sizing: border-box;
    background: #fff;
    border-radius: 2px
}

    .des-sect-add-cond table {
        display: block;
        width: 100%;
        float: left;
        padding-bottom: 5px
    }

        .des-sect-add-cond table tr {
            display: block;
            padding-bottom: 4px
        }

        .des-sect-add-cond table td {
            padding-right: 0
        }

            .des-sect-add-cond table td .adv-search-select {
                width: 190px
            }

            .des-sect-add-cond table td input {
                width: 250px;
                border: solid #ddd;
                border-width: 0 0 1px;
                outline: 0;
                font-size: 14px;
                height: 15px;
                margin-bottom: 0;
                font-weight: 400;
                float: left;
                padding: 5px 0
            }

            .des-sect-add-cond table td a {
                color: #888;
                font-size: 20px
            }

                .des-sect-add-cond table td a:hover {
                    color: #000
                }

            .des-sect-add-cond table td span {
                float: left;
                font-size: 14px;
                width: 110px;
                text-align: right;
                padding: 0 10px 0 0
            }

            .des-sect-add-cond table td .desi-edit-sel {
                float: left;
                font-size: 14px;
                width: 270px
            }

.des-wrk-title {
    width: 100%;
    float: left;
    margin-top: 15px
}

    .des-wrk-title span {
        font-size: 14px;
        font-weight: 500
    }

.des-sect-edi-del {
    width: 100%;
    float: left
}

    .des-sect-edi-del a {
        float: right;
        color: #888;
        font-size: 22px
    }

        .des-sect-edi-del a:hover {
            color: #000
        }

.des-sect-add-cond .table-bordered {
    display: block;
    width: 100%;
    float: left;
    padding-bottom: 10px
}

    .des-sect-add-cond .table-bordered tr {
        display: block;
        padding-bottom: 8px
    }

    .des-sect-add-cond .table-bordered td {
        padding-right: 0
    }

        .des-sect-add-cond .table-bordered td .adv-search-select {
            width: 190px
        }

        .des-sect-add-cond .table-bordered td input {
            width: 215px;
            border: solid #ddd;
            border-width: 0 0 1px;
            outline: 0;
            font-size: 14px;
            height: 20px;
            margin-bottom: 0;
            font-weight: 400;
            float: left
        }

        .des-sect-add-cond .table-bordered td a {
            color: #888;
            font-size: 20px
        }

            .des-sect-add-cond .table-bordered td a:hover {
                color: #000
            }

        .des-sect-add-cond .table-bordered td span {
            float: left;
            font-size: 14px
        }

        .des-sect-add-cond .table-bordered td:nth-child(2) {
            width: 200px
        }

        .des-sect-add-cond .table-bordered td:nth-child(3) {
            width: 200px
        }

        .des-sect-add-cond .table-bordered td:nth-child(4) {
            width: 200px
        }

        .des-sect-add-cond .table-bordered td:nth-child(5) {
            width: 200px
        }

.inventor-lst-tbl {
    width: 100%;
    background: #fff;
    display: block;
    float: left;
    height: 440px;
    overflow-y: auto
}

    .inventor-lst-tbl table {
        margin: 0 5px;
        border-collapse: collapse;
        font-size: 12px;
        width: 99%
    }

    .inventor-lst-tbl tr > th {
        background-color: #f0f0f0;
        vertical-align: middle;
        color: #333;
        border-width: 1px;
        text-transform: uppercase;
        border-bottom: 1px solid #f0f0f0;
        padding: 10px;
        line-height: 1.42857143;
        font-weight: 500;
        font-size: 12px;
        z-index: 0
    }

    .inventor-lst-tbl table tr > td {
        vertical-align: middle;
        color: #333;
        border-width: 1px;
        border-bottom: 1px solid #f0f0f0;
        padding: 8px 2px;
        line-height: 1.42857143;
        text-align: left;
        min-width: 105px;
        font-size: 13px;
        font-weight: 400;
        box-sizing: border-box;
        z-index: 0
    }

        .inventor-lst-tbl table tr > td.int {
            text-align: right
        }

    .inventor-lst-tbl table > tbody > tr:nth-of-type(odd) {
        background-color: #fefefe
    }

    .inventor-lst-tbl table tr > td:first-child a {
        color: #888;
        font-size: 20px;
        margin-left: 15px
    }

        .inventor-lst-tbl table tr > td:first-child a:hover {
            color: #000
        }

.sec-set-user-field .tblrange {
    width: 100%
}

    .sec-set-user-field .tblrange span {
        color: #696969
    }

.take-tour {
    float: left;
    text-align: center;
    width: 100%;
    position: relative
}

    .take-tour a {
        font-size: 14px;
        background-color: #6aad49;
        border-radius: 20px;
        margin: 0 4% 0 8%;
        display: block;
        float: none;
        padding: 8px 18px 8px 2px;
        color: #fff
    }

        .take-tour a:active {
            position: relative;
            top: 1px;
            left: 1px
        }

.hotspot {
    position: absolute;
    right: 18px;
    top: 11px;
    width: 13px;
    height: 13px;
    cursor: pointer;
    z-index: 999999
}

.beacon-inner {
    background: #ff602d;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -2px;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 50%;
    border: 2px solid #FFF;
    z-index: 10
}

.beacon-outer {
    width: 120%;
    height: 120%;
    background: rgba(0,0,0,0.15);
    border-radius: 50%;
    -webkit-animation: beacon 1s infinite;
    -o-animation: beacon 1s infinite;
    animation: beacon 1s infinite;
    z-index: 9;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto
}

@-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)
    }
}

@-o-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)
    }
}

@-moz-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)
    }
}

.help {
    display: none;
    width: 80%;
    background-color: rgba(51,51,51,0.91);
    color: #fff;
    text-align: center;
    position: absolute;
    z-index: 1;
    top: 130%;
    left: 0;
    padding: 5px 0;
    border: 1px solid #383838;
    border-radius: 3px
}

    .help:after {
        content: '\f360';
        font-family: Material Design Icons;
        font-size: 50px;
        position: absolute;
        top: -31px;
        left: 0;
        color: #454545;
        padding: 0;
        margin: 0
    }

ul.helper-text {
    display: block;
    margin: 6px;
    font-size: 12px;
    line-height: 22px;
    color: #fff;
    list-style: none;
    padding: 5px
}

    ul.helper-text li {
        text-align: left
    }

        ul.helper-text li.notvalid:before {
            content: '\f156';
            font-family: Material Design Icons;
            font-size: 18px;
            width: 30px;
            height: 30px;
            position: relative;
            top: 2px;
            color: red
        }

        ul.helper-text li.valid:before {
            content: '\f12c';
            font-family: Material Design Icons;
            font-size: 18px;
            width: 30px;
            height: 30px;
            position: relative;
            top: 2px;
            color: #1fd34a
        }

.valid input {
    border: 2px solid #1fd34a
}

.rec-det-tri-to {
    width: 35px
}

    .rec-det-tri-to i:first-child {
        font-size: 24px;
        position: relative;
        top: 5px
    }

    .rec-det-tri-to i:nth-child(2) {
        font-size: 12px;
        position: absolute;
        top: 2px;
        left: 17px
    }

.rec-det-tri-from {
    width: 35px
}

    .rec-det-tri-from i:first-child {
        font-size: 12px;
        position: absolute;
        top: 2px;
        right: 26px
    }

    .rec-det-tri-from i:nth-child(2) {
        font-size: 24px;
        position: relative;
        top: 5px
    }

.cu-conf-set-cont {
    margin: 5px 0;
    float: left;
    width: 100%
}

.cu-conf-set-field {
    width: 50%;
    padding: 1% 5%;
    height: 75px;
    float: left;
    position: relative;
    box-sizing: border-box
}

    .cu-conf-set-field span {
        width: 100%;
        float: left;
        display: block;
        text-align: left;
        font-size: 15px;
        margin-bottom: 5px;
        position: relative
    }

        .cu-conf-set-field span i.info-i {
            font-size: 18px !important;
            padding: 0;
            box-sizing: border-box;
            position: relative;
            top: 2px;
            color: #e04a00
        }

        .cu-conf-set-field span input {
            width: 98.5%;
            float: left;
            display: block;
            text-align: left;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 5px;
            border: solid #ddd;
            border-width: 0 0 1px;
            padding: 5px;
            outline: 0
        }

.cu-conf-check-box {
    float: left;
    display: block;
    margin: 0 10px 0 0;
    padding: 2px;
    box-sizing: border-box;
    height: 30px;
    position: relative
}

    .cu-conf-check-box [type="checkbox"]:not(:checked), .cu-conf-check-box [type="checkbox"]:checked {
        position: absolute;
        width: 5px;
        opacity: 0
    }

    .cu-conf-check-box [type="checkbox"] + label {
        position: relative;
        padding-left: 35px;
        cursor: pointer;
        display: inline-block;
        height: 25px;
        line-height: 25px;
        font-size: 14px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -ms-user-select: none;
        margin: 0
    }

        .cu-conf-check-box [type="checkbox"] + label:before {
            content: '';
            position: absolute;
            top: 2px;
            left: 0;
            width: 14px;
            height: 14px;
            z-index: 0;
            border: 2px solid #8a8a8a;
            border-radius: 1px;
            margin-top: 2px;
            transition: .2s
        }

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

.cu-conf-btn-field {
    width: 100%;
    margin: 15px 0;
    float: left;
    padding: 10px 36px;
    box-sizing: border-box
}

    .cu-conf-btn-field .ss-sv-bt {
        padding: 7px 15px;
        font-size: 16px;
        color: #fff;
        text-decoration: none;
        float: right;
        margin: 2px 0;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
    }

        .cu-conf-btn-field .ss-sv-bt:active {
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
            position: relative;
            top: 3px;
            left: 3px
        }

    .cu-conf-btn-field .can-btn {
        background-color: #fff;
        padding: 7px 15px;
        font-size: 16px;
        color: #303030;
        text-decoration: none;
        float: left;
        margin: 2px 10px;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
    }

        .cu-conf-btn-field .can-btn:active {
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
            position: relative;
            top: 3px;
            left: 3px
        }

.des-flow-check {
    float: left;
    display: block;
    margin: 0 10px 0 0;
    padding: 2px;
    box-sizing: border-box;
    height: 30px;
    position: relative
}

    .des-flow-check input[type="checkbox"] {
        display: none
    }

        .des-flow-check input[type="checkbox"] + label {
            display: block;
            cursor: pointer
        }

            .des-flow-check input[type="checkbox"] + label:before {
                content: "";
                display: block;
                position: relative;
                top: 7px;
                border: 1px solid #333 !important;
                border-radius: 0;
                width: 15px;
                height: 15px;
                float: left;
                margin: 0 10px 0 0
            }

        .des-flow-check input[type="checkbox"]:checked + label:before {
            content: "\2713";
            font-size: 17px;
            line-height: 15px;
            text-align: center
        }

.cu-conf-radio-box {
    display: inline-block;
    padding-right: 20px;
    font-size: 14px;
    line-height: 30px;
    cursor: pointer
}

    .cu-conf-radio-box input {
        width: 1px;
        height: 1px;
        opacity: 0
    }

        .cu-conf-radio-box input:checked + .ccr-outer .ccr-inner {
            -webkit-transform: scale(.5);
            -ms-transform: scale(.5);
            transform: scale(.5);
            opacity: 1
        }

    .cu-conf-radio-box .ccr-outer {
        width: 18px;
        height: 18px;
        display: block;
        float: left;
        margin: 5px;
        border: 2px solid #8a8a8a;
        border-radius: 50%;
        background-color: #fff;
        position: relative;
        box-sizing: border-box;
        padding: 0
    }

    .cu-conf-radio-box .ccr-inner {
        -webkit-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out;
        width: 16px;
        height: 16px;
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        display: block;
        margin: 2px;
        border-radius: 50%;
        opacity: 0;
        position: absolute;
        top: -4px;
        left: -4px
    }

.extend-attac-popup {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0,0,0,.7);
    top: 0;
    left: 0;
    z-index: 1049;
    display: none
}

.extend-attac-content {
    width: 885px;
    min-height: 500px;
    background: #fff;
    border-radius: 2px;
    position: relative;
    padding: 5px 0;
    margin: 5% auto;
    border: 1px solid rgba(0,0,0,.12);
    box-sizing: border-box;
    float: left
}

    .extend-attac-content .header {
        width: 100%;
        display: block;
        border-bottom: 1px solid rgba(221,221,221,0.36);
        float: left
    }

        .extend-attac-content .header h2 {
            margin: 5px 8px;
            font-size: 20px;
            width: 93%;
            float: left;
            font-weight: 400
        }

        .extend-attac-content .header .close-btn {
            float: left
        }

            .extend-attac-content .header .close-btn a {
                margin: 3px 10px;
                display: block;
                font-weight: 500;
                font-size: 22px;
                color: #9e9e9e
            }

                .extend-attac-content .header .close-btn a:hover {
                    color: #515151
                }

.extend-attac-cont {
    width: 100%;
    float: left
}

.extend-attac-menu-inner {
    width: 180px;
    height: 456px;
    float: left;
    border-right: 1px solid #ddd;
    background-color: rgba(215,215,215,0.26)
}

.ext-file-upload-div {
    width: 55%;
    margin: 5% auto;
    display: block
}

    .ext-file-upload-div .uphe-msg {
        font-weight: 300;
        font-size: 20px;
        margin: 12% auto;
        display: block;
        text-align: center
    }

    .ext-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: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
        outline: 0
    }

        .ext-file-upload-div a.cancel {
            background-color: #fff;
            color: #000;
            outline: 1px solid rgba(191,191,191,0.47);
            box-sizing: border-box
        }

        .ext-file-upload-div a.upload {
            color: #fff
        }

        .ext-file-upload-div a:active {
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
            position: relative;
            top: 3px;
            left: 3px
        }

.extat-file-uploader label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 500
}

.extat-file-uploader .name-dis {
    display: inline-block;
    background-color: transparent;
    color: #4b4b4b;
    padding-left: 8px;
    margin-right: 6px;
    width: 415px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 30px;
    line-height: 36px;
    font-size: 16px;
    font-weight: 400;
    border-bottom: 2px solid var(--primary-color)
}

.extat-file-uploader input[type=file] {
    position: absolute;
    left: -9999px
}

.extat-file-uploader .select {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: block;
    padding: 5px 10px;
    font-size: 30px;
    box-sizing: border-box;
    box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
    color: #fff
}

.exfile-uploaded-container {
    width: 80%;
    float: left;
    margin: 2% 10%;
    background: #fff;
    box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
}

.exfileup-title {
    width: 100%;
    float: left
}

    .exfileup-title h1 {
        font-size: 16px;
        font-weight: 400;
        padding: 5px 10px;
        margin: 0;
        line-height: 30px;
        border-bottom: 1px solid #ddd
    }

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

    .exfileup-cont .ex-file-list {
        width: 96%;
        float: left;
        padding: 10px;
        margin: .5% 2%;
        box-sizing: border-box;
        border: 1px solid #ddd;
        border-radius: 2px
    }

        .exfileup-cont .ex-file-list i {
            font-size: 22px;
            color: #0d6f00;
            float: left;
            display: block
        }

        .exfileup-cont .ex-file-list .ex-file-lst-nam {
            font-size: 15px;
            color: #272727;
            float: left;
            display: block;
            padding: 0 10px;
            box-sizing: border-box;
            width: 90%
        }

        .exfileup-cont .ex-file-list .exfile-del i {
            color: #797979;
            float: left;
            font-size: 22px
        }

            .exfileup-cont .ex-file-list .exfile-del i:hover {
                color: #000
            }

.ext-form-save {
    width: 90%;
    margin: 5px 5.35%
}

.ext-form-inner {
    width: 30%;
    float: right;
    margin: 8px
}

    .ext-form-inner a {
        color: #fff;
        padding: 5px 10px;
        border-radius: 2px;
        margin: 5px;
        display: block;
        float: left;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
    }

        .ext-form-inner a:active {
            position: relative;
            top: 1px;
            left: 1px;
            box-shadow: none
        }

.ext-uplo-status {
    font-size: 12px;
    display: block;
    float: left;
    width: 60%;
    margin: 2% 20%;
    text-align: center;
    color: #fff;
    padding: 5px;
    border-radius: 2px
}

footer {
    float: left;
    margin-left: 56px;
    display: block;
    width: 95.8%;
    margin-top: 15px;
    height: 50px;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    color: #fff
}

    footer .copyright {
        font-size: 12px;
        font-weight: 300;
        float: left
    }

        footer .copyright a {
            font-weight: 500;
            color: #fff;
            border-bottom: 1px dotted #fff
        }

    footer .footer-info {
        font-size: 12px;
        font-weight: 300;
        float: right;
        margin-right: 100px
    }

        footer .footer-info a {
            color: #fff;
            font-weight: 500;
            border-bottom: 1px dotted #fff
        }

        footer .footer-info .cli-id {
            font-weight: 500;
            color: #fff;
            border-bottom: 1px dotted #fff
        }

.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: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
        outline: 0
    }

        .signature-save-btn a.cancle-bt {
            background-color: #fff;
            color: #000;
            outline: 1px solid rgba(191,191,191,0.47);
            box-sizing: border-box
        }

        .signature-save-btn a.sav-bt {
            color: #fff
        }

.rtov-setting {
    width: 100%;
    float: left;
    display: none
}

    .rtov-setting h2 {
        font-size: 15px;
        font-weight: 500;
        float: left;
        padding: 10px 10px 20px;
        width: 100%;
        margin: 0;
        box-sizing: border-box
    }

.user-license {
    position: absolute;
    left: 0
}

    .user-license span {
        color: #12ab00;
        padding: 8px;
        display: block;
        font-size: 15px;
        font-weight: 500
    }

.wkf-library-li:hover .document-list-hover {
    transition: .3s;
    top: 0
}

.document-list-hover {
    position: absolute;
    top: -220px;
    width: 100%;
    height: 115px;
    background-color: rgba(0,0,0,0.28);
    transition: .1s;
    margin: 0;
    padding: 5px;
    box-sizing: border-box
}

.document-list-dtil {
    width: 100%;
    overflow: hidden;
    color: #fff;
    margin: 0 0 5px
}

    .document-list-dtil i {
        float: left;
        display: block;
        padding: 2px;
        font-size: 16px
    }

    .document-list-dtil span {
        float: left;
        display: block;
        overflow: hidden;
        width: 80%;
        text-overflow: ellipsis;
        text-align: left;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 400;
        padding: 1px 2px
    }

.document-go-option {
    display: block;
    float: right;
    text-decoration: none;
    border-radius: 2px;
    color: #fff;
    box-sizing: border-box;
    opacity: .5;
    padding: 10px
}

.bottom-initate:hover .document-go-option {
    opacity: 1
}

.verson-drop {
    position: absolute;
    right: 0;
    top: 30px;
    z-index: 5555;
    display: none;
    background-color: #fff;
    -webkit-box-shadow: 0 0 8px 0 #5e5e5e;
    -moz-box-shadow: 0 0 8px 0 #5e5e5e;
    box-shadow: 0 0 8px 0 #5e5e5e;
    width: 100px
}

.document-go-option:hover .verson-drop {
    display: block
}

.verson-drop ul {
    padding: 0;
    margin: 0;
    list-style: none
}

    .verson-drop ul li {
        padding: 5px 5px 5px 10px;
        border-bottom: 1px solid #f1f1f1;
        color: #696969;
        font-size: 16px
    }

        .verson-drop ul li a {
            color: #696969;
            font-size: 12px
        }

            .verson-drop ul li a i {
                float: right;
                color: #696969;
                font-size: 18px;
                padding-top: 5px
            }

                .verson-drop ul li a i:hover {
                    float: right;
                    color: #000
                }

.disablecntl {
    background-color: #dfdfdf !important;
    cursor: wait !important;
    box-shadow: none !important
}

.loadmore {
    position: absolute;
    right: 40px;
    padding: 9px
}

    .loadmore a {
        padding: 5px 10px;
        font-size: 14px;
        border-radius: 2px;
        color: #000
    }

.weekend-container {
    width: 100%;
    float: left
}

    .weekend-container h1 {
        font-size: 16px;
        font-weight: 500;
        padding: 10px 2%;
        margin: 3% 0 1%;
        float: left;
        width: 100%;
        box-sizing: border-box;
        border-top: 8px solid #f5f6fa
    }

.weekend-day-btn {
    width: 100%;
    float: left;
    padding: 1% 5%;
    box-sizing: border-box
}

.weekend-selection {
    width: 100%;
    float: left;
    padding: 0 5%;
    box-sizing: border-box
}

.weekend-option-select {
    padding: 1% 0;
    float: left;
    width: 100%;
    box-sizing: border-box
}

    .weekend-option-select .cu-conf-check-box {
        float: left;
        padding: 5px;
        box-sizing: border-box
    }

.weekend-option-label {
    width: 12.5%;
    padding: 0;
    box-sizing: border-box;
    float: left;
    text-align: left
}

    .weekend-option-label span {
        color: #4f5256;
        font-size: 15px;
        line-height: 35px
    }

        .weekend-option-label span i.info-i {
            font-size: 18px !important;
            padding: 0;
            box-sizing: border-box;
            position: relative;
            top: 2px;
            color: #e04a00
        }

.weekend-option-dropdown {
    width: 29%;
    float: left
}

    .weekend-option-dropdown select {
        width: 40%
    }

.holiday-add-section {
    width: 100%;
    padding: 2px 5%;
    box-sizing: border-box;
    float: left
}

.stgused {
    font-size: 35px;
    opacity: .7
}

.stglim {
    display: block;
    margin-top: 15px
}

.day-select-field {
    float: left;
    width: 50%;
    margin: 1% 0;
    height: 35px
}

.day-select-field-full {
    float: left;
    width: 100%;
    margin: 1% 0;
    height: 35px
}

    .day-select-field-full span {
        width: 10%;
        display: block;
        float: left;
        color: #4f5256;
        text-align: left;
        padding: 3px 0 0 3%;
        box-sizing: border-box;
        font-size: 15px
    }

    .day-select-field-full input {
        outline: 0;
        border: solid #ddd;
        border-width: 0 0 1px;
        margin-bottom: 0 !important;
        width: 81%;
        padding: .5%;
        font-size: 15px
    }

        .day-select-field-full input:focus {
            border-bottom: 2px solid var(--primary-color)
        }

.day-select-field span {
    width: 20%;
    display: block;
    float: left;
    color: #4f5256;
    text-align: right;
    padding: 3px 2%;
    box-sizing: border-box;
    font-size: 15px
}

.day-select-field input {
    outline: 0;
    border: solid #ddd;
    border-width: 0 0 1px;
    margin-bottom: 0 !important;
    width: 60%;
    padding: .5%
}

    .day-select-field input:focus {
        border-bottom: 2px solid var(--primary-color)
    }

.day-select-field .add-weekend-btn {
    color: #fff;
    padding: 5px 20px;
    border-radius: 2px;
    float: left;
    box-sizing: border-box;
    font-size: 15px;
    margin: 0 14%;
    box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
}

    .day-select-field .add-weekend-btn:active {
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
        position: relative;
        top: 1px;
        left: 1px
    }

.holiday-add-section table {
    width: 100%;
    border-collapse: collapse;
    float: left
}

    .holiday-add-section table th, .holiday-add-section table td {
        border-bottom: 1px solid #ddd
    }

    .holiday-add-section table th {
        text-align: left;
        font-weight: 400;
        padding: 4px 8px
    }

    .holiday-add-section table td {
        font-size: 14px;
        padding: 7px 8px
    }

        .holiday-add-section table td:first-child {
            width: 15%
        }

        .holiday-add-section table td a {
            color: #252525;
            margin: 5%;
            font-size: 18px
        }

.holiday-edit-pop {
    width: 800px;
    height: 240px;
    background-color: #fff;
    float: left;
    margin: 0 8%
}

.holiday-edit-pop-title {
    display: block;
    width: 100%;
    float: left;
    height: 42px;
    border-bottom: 1px solid rgba(221,221,221,0.36);
    background-color: #fff
}

    .holiday-edit-pop-title h2 {
        font-size: 16px;
        font-weight: 400;
        padding: 2px;
        float: left;
        box-sizing: border-box;
        margin: 8px;
        width: 40%
    }

.holiday-edit-pop-close {
    width: 58%;
    float: left;
    color: #4f5256
}

    .holiday-edit-pop-close a {
        float: right;
        color: #9e9e9e;
        padding: 8px;
        font-size: 20px
    }

        .holiday-edit-pop-close a:hover {
            color: #515151
        }

.weekend-check-group .radbt-list {
    position: relative;
    display: block;
    float: left;
    margin: 0 5px 0 0
}

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

    .weekend-check-group input[type="checkbox"] + .wek-lab-chbx span {
        font-size: 13px;
        border: 1px solid #c5c4c4;
        padding: 5px 15px;
        line-height: 12px;
        float: left;
        border-radius: 2px;
        position: relative;
        color: inherit;
        margin: 5px
    }

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

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

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

.weekend-check-group input[type="checkbox"]:checked + .wek-lab-chbx span {
    border: 1px solid #1ba40a;
    color: #fff;
    background: #1ba40a
}

.new-holiday {
    font-size: 14px;
    background: #dc4b39;
    color: #fff;
    padding: 3px 5px;
    box-sizing: border-box;
    border-radius: 3px;
    box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
    outline: 0;
    float: right
}

    .new-holiday:active {
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0),3px 3px 1px 0 rgba(0,0,0,0);
        position: relative;
        top: 3px;
        left: 3px
    }

.menu-head-top {
    width: 150px;
    height: 45px;
    float: left;
    background-color: #fff;
    margin-top: 9px;
    position: relative;
    left: 40px;
    border-radius: 3px;
    box-shadow: 3px 3px 1px 0 rgba(0,0,0,0.22),0 0 0 1px rgba(0,0,0,0.22)
}

    .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 0 2px;
        display: block;
        float: left;
        color: #000;
        margin: 0 auto;
        width: 100%
    }

        .menu-head-top span a {
            padding: 3px 5px;
            background-color: #e00505;
            border-radius: 2px;
            color: #fff;
            box-sizing: border-box;
            font-size: 11px;
            margin: 0 6px
        }

#lblDaystoGo {
    color: #d14836;
    font-weight: 700
}

.del-rpt {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #fff;
    padding: 3px 4px;
    border-radius: 50%;
    background: #fff
}

    .del-rpt i {
        color: rgba(255,0,0,0.83);
        font-size: 20px
    }

.info-i {
    font-size: 18px !important;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    top: 2px;
    color: #e04a00
}

.no-connection {
    position: fixed;
    top: 0;
    z-index: 999999;
    font-size: 15px;
    font-weight: 300;
    width: 100%;
    text-align: center
}

    .no-connection span {
        background-color: #dfa941;
        color: #fff;
        padding: 5px;
        border-radius: 0 0 3px 3px;
        border: solid #ccbc9e;
        border-width: 0 1px 1px
    }

.integrated-app-list {
    display: none;
    width: 100%;
    padding: 60px;
    box-sizing: border-box;
    float: left
}

    .integrated-app-list a {
        display: block;
        float: left;
        outline: 0
    }

.app-box {
    width: 175px;
    height: 120px;
    float: left;
    border-radius: 2px;
    margin: 10px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
}

.slack {
    background-color: #4d394b
}

.app-box i {
    color: #fff;
    font-size: 60px;
    margin: 10px auto;
    display: block;
    text-align: center
}

.app-box span {
    color: #fff;
    text-align: center;
    display: block;
    font-weight: 500;
    font-size: 20px
}

.slack-intergration-cont, .zapier-intergration-cont {
    width: 80%;
    float: left;
    margin: 2% 10%;
    display: none;
    box-shadow: 0 0 2px rgba(20,20,20,0.18)
}

.zapier-intergration-cont {
    padding: 10px
}

.integration-header {
    width: 100%;
    float: left;
    border-bottom: 1px solid rgba(0,0,0,.12)
}

    .integration-header h1 {
        margin: 8px;
        font-size: 18px;
        font-weight: 400;
        float: left
    }

.slacck-not-athantication {
    float: left;
    width: 100%;
    position: relative
}

    .slacck-not-athantication h1 {
        font-size: 16px;
        font-weight: 400;
        padding: 5px 30px;
        width: 100%;
        float: left;
        box-sizing: border-box
    }

    .slacck-not-athantication .info-msg {
        font-style: italic;
        font-size: 12px;
        padding: 0 30px;
        position: relative;
        top: -15px;
        color: #909090
    }

.intgra-logo {
    float: right;
    position: absolute;
    right: 0
}

    .intgra-logo img {
        width: 50%;
        float: right
    }

.slacck-not-athantication table {
    width: 80%;
    margin: 1% 10% 0
}

    .slacck-not-athantication table tr th {
        font-weight: 500;
        border-bottom: 1px solid #e0e0e0;
        padding: 10px
    }

    .slacck-not-athantication table tr td {
        font-weight: 400;
        padding: 10px;
        font-size: 14px;
        border-bottom: 1px solid #f5f5f5
    }

.slack-int-chek {
    width: 100%;
    float: left;
    padding: 5px 30px;
    box-sizing: border-box
}

    .slack-int-chek span {
        font-size: 15px;
        line-height: 30px
    }

.slack-athantication {
    margin: 0 0 4%;
    float: left;
    width: 100%
}

.zapier {
    background-color: #ff4a00
}

.app-box img {
    width: 60px;
    margin: 10px auto;
    display: block
}

.integrate-save-canl-btn-cont {
    width: 80%;
    margin: 1% 10%;
    float: left;
    height: 40px
}

    .integrate-save-canl-btn-cont .integrat-sav-btn {
        padding: 7px 15px;
        font-size: 16px;
        color: #fff;
        text-decoration: none;
        float: left;
        margin: 2px 0;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
    }

    .integrate-save-canl-btn-cont .integrat-can-btn {
        background-color: #fff;
        padding: 7px 15px;
        font-size: 16px;
        color: #303030;
        text-decoration: none;
        float: left;
        margin: 2px 10px;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
    }

        .integrate-save-canl-btn-cont .integrat-can-btn:active, .integrate-save-canl-btn-cont .integrat-sav-btn:active {
            position: relative;
            top: 3px;
            left: 3px
        }

.integrate-btn-inr-cont {
    width: 90%;
    padding: 0;
    float: left
}

.delegate-container {
    display: none;
    width: 100%;
    float: left
}

.delegate-add-options {
    position: absolute;
    top: 25%;
    left: 10%;
    right: 10%;
    text-align: center;
    width: 80%
}

    .delegate-add-options span {
        font-size: 20px;
        line-height: 35px;
        font-weight: 300;
        display: block
    }

    .delegate-add-options a {
        display: inline-block;
        font-size: 20px;
        line-height: 35px;
        font-weight: 300;
        color: #fff;
        padding: 8px 15px;
        box-sizing: border-box;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
        margin: 15px 10px
    }

        .delegate-add-options a:active {
            position: relative;
            top: 3px;
            left: 3px
        }

.user-delegate-setting {
    width: 80%;
    float: left;
    margin: 2% 10%;
    border: 1px solid #d6d6d6;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
}

.user-delegate-st-hd {
    width: 100%;
    float: left;
    border-bottom: 1px solid rgba(0,0,0,.12)
}

    .user-delegate-st-hd h1 {
        margin: 8px;
        font-size: 16px;
        font-weight: 500;
        float: left
    }

.user-delegate-st-cont {
    width: 80%;
    float: left;
    border: 1px solid #f5f5f5;
    margin: 3% 10%;
    border-radius: 4px
}

.daleg-date {
    width: 80%;
    margin: 1% 10%;
    float: left;
    height: 35px
}

.delg-str-dt {
    float: left;
    width: 50%
}

.delg-end-dt {
    float: left;
    width: 50%
}

    .delg-str-dt span, .delg-end-dt span {
        width: 35%;
        float: left;
        display: block;
        text-align: right;
        font-size: 12px;
        font-weight: 500;
        padding: 8px 10px;
        box-sizing: border-box;
        word-wrap: break-word;
        position: relative
    }

    .delg-str-dt input, .delg-end-dt input {
        width: 55%;
        float: left;
        display: block;
        text-align: left;
        font-size: 14px;
        padding: 5px;
        border: solid #e0e0e0;
        border-width: 0 0 1px;
        -webkit-appearance: none;
        box-sizing: border-box;
        color: #1a1a1a;
        outline: 0
    }

        .delg-str-dt input:focus, .delg-end-dt input:focus {
            border-bottom: 2px solid var(--primary-color)
        }

.delg-user-select {
    width: 80%;
    margin: 1% 10%;
    float: left;
    height: 40px
}

    .delg-user-select span {
        width: 17%;
        float: left;
        display: block;
        text-align: right;
        font-size: 12px;
        font-weight: 500;
        padding: 8px 10px;
        box-sizing: border-box;
        word-wrap: break-word;
        position: relative
    }

    .delg-user-select .user-del-opt {
        width: 79%;
        float: left;
        position: relative
    }

        .delg-user-select .user-del-opt select {
            width: 100% !important;
            float: left;
            position: relative
        }

.del-wrf-select-cont {
    width: 100%;
    float: left
}

.delg-wrk-sel {
    width: 80%;
    margin: 1% 10%;
    float: left;
    height: 40px
}

    .delg-wrk-sel span {
        width: 30%;
        float: left;
        display: block;
        text-align: right;
        font-size: 12px;
        font-weight: 500;
        padding: 8px 10px;
        box-sizing: border-box;
        word-wrap: break-word;
        position: relative
    }

        .delg-wrk-sel span.title, .delg-wrk-sel .user-del-wrk span.title {
            font-size: 16px;
            line-height: 8px
        }

    .delg-wrk-sel .user-del-wrk {
        width: 68%;
        float: left
    }

    .delg-wrk-sel .del-sav-btn {
        padding: 7px 15px;
        font-size: 16px;
        color: #fff;
        text-decoration: none;
        float: left;
        margin: 2px 0;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
    }

    .delg-wrk-sel .del-can-btn {
        background-color: #fff;
        padding: 7px 15px;
        font-size: 16px;
        color: #303030;
        text-decoration: none;
        float: left;
        margin: 2px 10px;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
    }

        .delg-wrk-sel .del-can-btn:active, .delg-wrk-sel .del-sav-btn:active {
            position: relative;
            top: 3px;
            left: 3px
        }

.delgat-btn {
    width: 90%;
    padding: 0 0 0 10%;
    float: left
}

.delgate-main-tbl {
    width: 80%;
    float: left;
    margin: 2% 10%;
    box-shadow: 0 0 2px rgba(20,20,20,0.18);
    border-radius: 3px
}

    .delgate-main-tbl table {
        width: 100%;
        float: left;
        border-collapse: collapse
    }

        .delgate-main-tbl table tr th {
            font-weight: 400;
            border-bottom: 1px solid #e0e0e0;
            padding: 10px;
            font-size: 18px
        }

        .delgate-main-tbl table tr td {
            font-weight: 400;
            padding: 10px;
            font-size: 15px;
            text-align: center;
            border-bottom: 1px solid #f3f3f3
        }

            .delgate-main-tbl table tr td a {
                font-size: 18px;
                color: #000
            }

.delgte-tbl-check {
    float: left;
    height: 25px;
    margin: 5px 0 0
}

.delgte-tbl-hidden {
    outline: 0
}

.delgte-tbl-radio-labl {
    position: relative;
    display: block;
    height: 14px;
    width: 35px;
    top: -19px;
    background: #d2d2d2;
    border-radius: 100px;
    cursor: pointer;
    transition: all .3s ease;
    border: 2px solid #d2d2d2;
    box-sizing: border-box
}

    .delgte-tbl-radio-labl:after {
        position: absolute;
        left: -2px;
        top: -5px;
        display: block;
        width: 19px;
        height: 19px;
        border-radius: 100px;
        background: #bf2828;
        box-shadow: 0 3px 3px rgba(0,0,0,0.29);
        content: '';
        transition: all .3s ease
    }

    .delgte-tbl-radio-labl:active:after {
        transform: scale(1.15,0.85)
    }

.delgte-tbl-radio:checked ~ label:after {
    left: 16px;
    background: #1ba40a
}

.delgte-tbl-radio:disabled ~ label {
    background: #d5d5d5;
    pointer-events: none
}

    .delgte-tbl-radio:disabled ~ label:after {
        background: #bcbdbc
    }

.delgte-tbl-radio:focus ~ .delgte-tbl-radio-labl {
    border: 2px solid #8e8e8e;
    box-sizing: border-box
}

.bulk-appr-popup-over {
    width: 100%;
    float: left
}

.bulk-appr-popup-over-comt {
    width: 100%;
    float: left;
    margin: 20px 0 0
}

    .bulk-appr-popup-over-comt span {
        width: 20%;
        display: block;
        text-align: right;
        font-size: 14px;
        font-weight: 400;
        padding: 8px 10px;
        float: left;
        box-sizing: border-box
    }

    .bulk-appr-popup-over-comt textarea {
        width: 65%;
        display: block;
        float: left;
        border-width: 0 0 1px;
        outline: 0
    }

.bulk-multiple-chck {
    border-radius: 2px;
    float: left;
    width: 80%;
    display: block;
    margin: 2% 10%
}

    .bulk-multiple-chck label:after {
        content: "";
        background: transparent
    }

    .bulk-multiple-chck input[type="radio"] {
        display: none
    }

        .bulk-multiple-chck input[type="radio"] + .bulk-multiple-radio > span {
            font-size: 12px;
            border: 1px solid #c5c4c4;
            padding: 3px 15px;
            line-height: 15px;
            border-radius: 4px;
            position: relative;
            float: left;
            text-align: left;
            display: block;
            box-sizing: border-box;
            font-weight: 500;
            margin-right: 5px
        }

        .bulk-multiple-chck input[type="radio"]:checked + .bulk-multiple-radio.apprv span {
            border: 1px solid #1ba40a;
            color: #fff;
            background: #1ba40a
        }

        .bulk-multiple-chck input[type="radio"]:checked + .bulk-multiple-radio.rej span {
            border: 1px solid #b90707;
            color: #fff;
            background: #b90707
        }

.bulk-multiple-radio.apprv:hover span {
    border: 1px solid #1ba40a;
    color: #fff;
    background: #1ba40a
}

.bulk-multiple-radio.rej:hover span {
    border: 1px solid #b90707;
    color: #fff;
    background: #b90707
}

.bulk-multiple-chck input[type="radio"]:checked + .bulk-multiple-radio span:after {
    content: "\f12c";
    font-family: Material Design Icons;
    position: absolute;
    top: -1px;
    left: -3px;
    pointer-events: none;
    padding: 4px;
    box-sizing: border-box;
    font-size: 12px
}

.bulk-multiple-chck input[type="radio"]:checked + .bulk-multiple-radio.new span {
    border: 1px solid var(--primary-color);
    color: #fff
}

.bulk-multiple-apr-grid {
    width: 660px;
    height: 300px;
    background: #fff;
    border-radius: 2px;
    padding: 0 0 10px;
    border: 1px solid transparent;
    -webkit-box-shadow: 0 4px 8px rgba(0,0,0,.32),0 8px 40px rgba(0,0,0,.4);
    box-shadow: 0 4px 8px rgba(0,0,0,.32),0 8px 40px rgba(0,0,0,.4);
    box-sizing: border-box;
    display: none;
    position: absolute;
    top: 45px;
    left: 80px;
    z-index: 99
}

    .bulk-multiple-apr-grid:before {
        content: '\f360';
        position: absolute;
        font-family: Material Design Icons;
        color: #f9f9f9;
        font-size: 50px;
        top: -34px;
        left: -3px
    }

    .bulk-multiple-apr-grid > .atitle {
        width: 100%;
        display: block;
        border-bottom: 1px solid rgba(221,221,221,0.36);
        float: left;
        height: 33px
    }

        .bulk-multiple-apr-grid > .atitle > .hea-tag {
            margin: 5px 8px;
            font-size: 16px;
            width: 91%;
            float: left;
            font-weight: 400
        }

        .bulk-multiple-apr-grid > .atitle > .close-btn {
            float: left
        }

            .bulk-multiple-apr-grid > .atitle > .close-btn a {
                margin: 3px 10px;
                display: block;
                font-weight: 500;
                font-size: 22px;
                color: #9e9e9e
            }

        .bulk-multiple-apr-grid > .atitle .close-btn a:hover {
            color: #515151
        }

.bulk-multiple-apr-container {
    display: block;
    float: left;
    width: 100%;
    overflow-y: auto;
    height: 215px;
    padding: 5px;
    overflow-x: hidden;
    box-sizing: border-box
}

.bulk-multiple-apr-aply-btn {
    display: block;
    float: left;
    width: 100%;
    padding: 5px 15px;
    border-top: 1px solid #ddd
}

    .bulk-multiple-apr-aply-btn a.bul-mul-apl-btn {
        padding: 5px 15px;
        font-size: 14px;
        text-decoration: none;
        float: left;
        margin: 5px 10px 2px 0;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
        color: #fff;
    }

    .bulk-multiple-apr-aply-btn a.bul-mul-canl-btn {
        padding: 5px 15px;
        font-size: 14px;
        text-decoration: none;
        float: left;
        margin: 5px 10px 2px 0;
        border-radius: 2px;
        box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
        background-color: #fff;
        color: #000;
        outline: 1px solid rgba(191,191,191,0.47);
        box-sizing: border-box
    }

        .bulk-multiple-apr-aply-btn a.bul-mul-apl-btn:active, .bulk-multiple-apr-aply-btn a.bul-mul-canl-btn:active {
            position: relative;
            top: 2px;
            left: 2px
        }

.eye {
    position: absolute;
    top: 5px;
    right: 30px;
    font-size: 18px;
    color: #000
}

.tbl-eye {
    position: absolute;
    top: 7px;
    right: -8px;
    color: #000
}

    .tbl-eye i {
        font-size: 18px !important;
        color: #000
    }

.support-lnk {
    position: relative;
    overflow-x: hidden;
    float: left;
    width: 100%
}

    .support-lnk ul li a {
        border-top: 1px solid rgba(0,0,0,.05);
        border-bottom: 1px solid rgba(0,0,0,.05);
        background: #ffc90a !important;
        color: #000 !important;
        margin-top: 8px
    }

        .support-lnk ul li a:hover {
            background: #e4b200 !important;
            color: #000 !important
        }

.wrk-ser-view-cont {
    float: right
}

.table-calendar-view {
    display: block;
    float: right;
    margin: 0
}

    .table-calendar-view a {
        color: gray;
        padding: 14px;
        display: block;
        height: 50px;
        box-sizing: border-box
    }

        .table-calendar-view a:hover {
            color: #3e3e3e
        }

        .table-calendar-view a i {
            font-size: 20px;
            float: left
        }

        .table-calendar-view a span {
            font-size: 14px;
            padding: 3px 4px 0;
            display: block;
            float: left
        }

.workflow-calender-title {
    width: 100%;
    float: left;
    height: 40px;
    border-bottom: 1px solid #efefef
}

.workflow-calender-container {
    width: 100%;
    background: #fff;
    display: block;
    border-radius: 2px;
    min-height: 500px;
    box-shadow: 0 0 2px rgba(20,20,20,0.18);
    float: left;
    box-sizing: border-box
}

.workflow-calender-dropdown {
    width: 150px;
    min-height: 80px;
    float: left;
    background-color: #fff;
    display: none;
    border-radius: 2px;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    position: absolute;
    top: 45px;
    left: 5px;
    z-index: 999
}

    .workflow-calender-dropdown ul {
        margin: 0;
        padding: 0;
        list-style: none
    }

        .workflow-calender-dropdown ul li a {
            display: block;
            padding: 0 10px;
            text-align: left;
            color: #353535;
            text-decoration: none;
  
            line-height: 35px;
            font-size: 14px;
            border-bottom: 1px solid #e0e0e0
        }

.workflow-calender-link {
    float: left;
    position: relative
}

    .workflow-calender-link a {
        color: #4f5256;
        font-size: 15px;
        padding: 10px 5px;
        display: block
    }

        .workflow-calender-link a i {
            font-size: 26px;
            position: absolute;
            right: -20px;
            top: 10px;
            float: left
        }

.workflow-calender-viewer {
    display: block;
    float: left;
    width: 100%
}

.calender-value-popup {
    width: 600px;
    height: 300px;
    background: #fff;
    border-radius: 2px;
    position: relative;
    padding: 5px 0;
    margin: 5% auto;
    border: 1px solid transparent;
    -webkit-box-shadow: 0 4px 8px rgba(0,0,0,.32),0 8px 40px rgba(0,0,0,.4);
    box-shadow: 0 4px 8px rgba(0,0,0,.32),0 8px 40px rgba(0,0,0,.4);
    box-sizing: border-box
}

    .calender-value-popup .title {
        width: 100%;
        display: block;
        border-bottom: 1px solid #ddd;
        float: left
    }

        .calender-value-popup .title h2 {
            margin: 5px 8px;
            font-size: 20px;
            width: 88%;
            float: left;
            font-weight: 400
        }

        .calender-value-popup .title .close-btn {
            float: left
        }

            .calender-value-popup .title .close-btn a {
                margin: 3px 10px;
                display: block;
                font-weight: 500;
                font-size: 22px;
                color: #9e9e9e
            }

                .calender-value-popup .title .close-btn a:hover {
                    color: #515151
                }

.calender-value-popup-inner {
    float: left;
    width: 100%;
    height: 200px;
    overflow-y: auto;
    min-height: 140px;
    border-bottom: 1px solid rgba(221,221,221,0.36)
}

.calender-pop-value {
    width: 80%;
    margin: 0 10%;
    float: left;
    border-bottom: 1px solid #d2d2d2;
    padding-bottom: 2%
}

    .calender-pop-value:last-child {
        border-bottom: 0
    }

.calender-value-popup-inner .cale-label-value {
    float: left;
    display: block;
    width: 80%;
    margin: 3% 10% 0;
    font-size: 14px;
    font-weight: 500
}

.calender-value-popup-inner .cale-value-label {
    float: left;
    display: block;
    width: 80%;
    margin: 2% 10% 0;
    font-size: 14px;
    word-wrap: break-word
}

.calender-popup-sav-btn {
    width: 100%;
    float: left;
    border-top: 1px solid #ddd
}

    .calender-popup-sav-btn .calender-btn-set {
        float: right
    }

        .calender-popup-sav-btn .calender-btn-set a {
            padding: 7px 15px;
            font-size: 16px;
            text-decoration: none;
            color: #fff;
            float: left;
            margin: 10px 10px 2px 0;
            border-radius: 2px;
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0.27),3px 3px 1px 0 rgba(0,0,0,0.27);
            outline: 0
        }

            .calender-popup-sav-btn .calender-btn-set a.cal-pop-can {
                color: #333
            }

            .calender-popup-sav-btn .calender-btn-set a:focus {
                position: relative;
                top: 2px
            }

.dragandrop-upload {
    border: 2px dashed #d4d4d4;
    width: 96%;
    height: 260px;
    color: #d4d4d4;
    vertical-align: middle;
    font-size: 2em;
    margin: 2%;
    text-align: center;
    font-weight: 300;
    background: #f9f9f9;
    box-sizing: border-box
}

.drop-icon-cont {
    width: 100px;
    height: 100px;
    margin: 2% auto 1%
}

    .drop-icon-cont .mdi-file {
        font-size: 2.5em;
        margin: 15px 0
    }

    .drop-icon-cont .mdi-upload {
        color: #fff;
        position: relative;
        top: -65px;
        font-size: 1em
    }

.drop-to-add {
    font-size: 1em;
    display: block;
    float: left;
    text-align: center;
    width: 100%
}

.click-to-add {
    font-size: .5em;
    display: block;
    float: left;
    text-align: center;
    width: 100%
}

.drop-over-before {
    background-color: #e8f0fe;
    border-color: #a1c3fb;
    color: #888
}

.drop-over-after {
    background-color: #f3f9f6;
    border-color: #e6f5ef;
    color: #cecece
}

.progressBar {
    width: 230px;
    height: 12px;
    overflow: hidden;
    display: inline-block;
    margin: 0 10px;
    vertical-align: top;
    float: left;
    padding: 4px;
    background: rgba(0,0,0,0.17);
    border-radius: 3px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.07),0 1px rgba(255,255,255,0.12)
}

    .progressBar div {
        height: 12px;
        border-radius: 4px;
        background-color: #86e01e;
        background-image: linear-gradient(to bottom,rgba(255,255,255,0.3),rgba(255,255,255,0.05));
        transition: .4s linear;
        transition-property: width,background-color;
        box-shadow: 0 0 1px 1px rgba(0,0,0,0.25),inset 0 1px rgba(255,255,255,0.1);
        font-size: .6em;
        text-align: center;
        text-shadow: 1px 0 1px #e6e6e6
    }

.file-upload-list {
    height: 155px;
    width: 100%;
    overflow: auto;
    border-top: 1px solid #ececec
}

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

    .statusbar:nth-child(odd) {
        background: #ebeff0
    }

    .statusbar .success {
        float: left;
        color: #1ba40a;
        font-size: 20px;
        position: relative;
        top: -2px;
        height: 20px
    }

    .statusbar .error {
        float: left;
        font-size: .7em;
        padding: 0;
        margin: 0;
        color: #b50000
    }

.upload-filename {
    display: block;
    vertical-align: top;
    width: 250px;
    font-size: .9em;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis
}

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

.abort {
    display: block;
    position: relative;
    top: -2px;
    float: left;
    color: #c52119;
    font-size: 20px;
    cursor: pointer
}

.search-notify {
    float: right;
    position: absolute;
    top: 0;
    right: 0
}

    .search-notify input {
        float: left;
        border: 0;
        border-bottom: 1px solid var(--primary-color);
        outline: 0;
        margin: 4px 0 0
    }

        .search-notify input:focus {
            border-bottom: 2px solid var(--primary-color)
        }

    .search-notify span {
        float: left;
        display: block;
        margin: 4px 4px 0
    }

        .search-notify span i {
            font-size: 23px;
            padding-top: 2px
        }

.search-notify-error {
    width: 100%;
    text-align: center;
    padding-top: 15%
}

    .search-notify-error span {
        color: #da4a38
    }

.refresh-grid i {
    font-size: 23px;
    position: relative;
    top: 4px;
    left: 5px;
    color: #888 !important
}

.save-fields {
    float: left;
    width: 100%
}

.attachment-fields {
    background-color: #fbfbfb;
    float: left;
    width: calc(90% - 35%);
    position: relative;
    border-bottom: 1px solid #e0e0e0
}

.attachment-field-name {
    width: 73%;
    float: left;
    height: 30px
}

    .attachment-field-name span {
        font-size: 15px;
        color: #565656 !important;
        text-align: left;
        padding: 7px 10px 7px 5px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        width: 100%;
        display: block
    }

.attachment-field-option {
    width: 27%;
    float: left;
    height: 30px
}

.urlfld_onecol {
    position: absolute;
    top: 35px;
    right: 0
}

.urlfld_otm {
    position: absolute;
    right: 5px
}

.attachment-field-option a {
    font-size: 18pt;
    color: gray
}

.attachment-upload-dropdown {
    position: absolute;
    width: 400px;
    height: 200px;
    right: 0;
    top: 40px;
    display: none;
    background-color: #fff;
    border: 1px solid #ddd;
    z-index: 99;
    box-shadow: 0 0 8px 0 rgba(94,94,94,0.27)
}

    .attachment-upload-dropdown:before {
        border-bottom: 11px solid rgba(0,0,0,0.2);
        border-left: 11px solid transparent;
        border-right: 11px solid transparent;
        content: "";
        display: inline-block;
        position: absolute;
        right: 60px;
        top: -11px
    }

    .attachment-upload-dropdown:after {
        border-bottom: 11px solid #FFF;
        border-left: 11px solid transparent;
        border-right: 11px solid transparent;
        content: "";
        display: inline-block;
        position: absolute;
        right: 60px;
        top: -10px
    }

.attachment-upload-dropdown1 {
    position: fixed;
    width: 400px;
    height: 200px;
    left: 40%;
    top: 40%;
    display: none;
    background-color: #fff;
    border: 1px solid #ddd;
    z-index: 99;
    box-shadow: 0 0 8px 0 rgba(94,94,94,0.27)
}

.attachment-upload-title {
    width: 100%;
    float: left;
    text-align: center
}

    .attachment-upload-title a {
        padding: 8px;
        font-size: 14px;
        width: 50%;
        float: left;
        box-sizing: border-box;
        border-bottom: 1px solid #ddd;
        color: #545454
    }


.attachment-pcupload-file-list, .attachment-gdriveupload-file-list, .attachment-onedriveupload-file-list {
    width: 100%;
    float: left;
    height: 165px;
    display: block
}

.attachment-gdriveupload-file-list, .attachment-onedriveupload-file-list {
    display: none
}

.attachment-upload-title a.active {
    padding: 7px 8px;
    background: #f7f7f7;
    border-bottom: 2px solid #ddd;
}

.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: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
        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: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
        display: block;
        float: left;
        font-size: 12px;
        margin: 13px 42.8%
    }

        .upload-btn-cont a:active {
            top: 2px;
            position: relative;
            box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
        }

.att-clos-field {
    position: absolute;
    right: 4px
}

    .att-clos-field a {
        font-size: 18px;
        color: gray
    }

.att-field-drop-tbl {
    width: 100%;
    background: #fff;
    display: block;
    height: 160px;
    overflow-y: auto
}

    .att-field-drop-tbl table {
        margin: 0;
        border-collapse: collapse;
        font-size: 12px;
        width: 100%
    }

    .att-field-drop-tbl tr > th {
        background-color: #f0f0f0;
        vertical-align: middle;
        color: #333;
        border-width: 1px;
        text-transform: uppercase;
        border-bottom: 1px solid #f0f0f0;
        padding: 10px;
        line-height: 1.42857143;
        font-weight: 500;
        font-size: 12px;
        z-index: 0
    }

    .att-field-drop-tbl tr th:first-child {
        width: 5% !important;
        box-sizing: border-box
    }

        .att-field-drop-tbl tr th:first-child label {
            left: -4px
        }

    .att-field-drop-tbl tr th:nth-child(2) {
        width: 20% !important
    }

    .att-field-drop-tbl tr td:nth-child(2) i {
        font-size: 22px
    }

    .att-field-drop-tbl tr th:nth-child(3) {
        width: 75% !important
    }

    .att-field-drop-tbl tr td:nth-child(3) img {
        width: 35px;
        height: 35px;
        border: 0;
        outline: 0
    }

    .att-field-drop-tbl tr td a {
        color: #545454
    }

    .att-field-drop-tbl table tr > td {
        vertical-align: middle;
        color: #333;
        border-width: 1px;
        border-bottom: 1px solid #f0f0f0;
        padding: 8px 2px;
        line-height: 1.42857143;
        text-align: center;
        font-size: 13px;
        font-weight: 400;
        box-sizing: border-box
    }

.att-field-drop-check {
    cursor: pointer;
    position: relative;
    top: -4px;
    left: 4px;
    float: left
}

.att-field-drop-check-input {
    position: relative;
    top: -.375rem;
    margin: 0 .5rem 0 0;
    cursor: pointer
}

    .att-field-drop-check-input:before {
        transition: all .3s ease-in-out;
        content: "";
        position: absolute;
        left: 0;
        z-index: 1;
        width: .8rem;
        height: .8rem;
        border: 2px solid #e6e6e6
    }

    .att-field-drop-check-input:after {
        content: "";
        position: absolute;
        left: 0;
        width: 1rem;
        height: 1rem;
        background: #fff;
        cursor: pointer
    }

    .att-field-drop-check-input:checked:before {
        transform: rotate(-45deg);
        height: .5rem;
        border-color: #3aacf1;
        border-top-style: none;
        border-right-style: none
    }


.upload-error {
    float: left;
    width: 100%;
    height: 25px
}

.file-error-msg {
    width: 100% !important;
    text-align: center !important;
    color: #e21818 !important;
    font-size: 12px;
    font-weight: 500;
    padding: 8px 10px;
    box-sizing: border-box;
    word-wrap: break-word;
    position: relative;
    float: left
}

.att-field-drop-tbl .gdr-off-insert {
    position: absolute;
    bottom: 8px;
    right: 15px;
    font-size: 12px;
    color: #fff;
    padding: 4px 10px;
    border-radius: 2px;
    box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24)
}

    .att-field-drop-tbl .gdr-off-insert:active {
        box-shadow: none;
        bottom: 9px
    }

.custome-design-file-box {
    width: 18%;
    height: 135px;
    margin: 3.4%;
    float: left;
    position: relative;
    border-radius: 2px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05),0 2px 10px 0 rgba(0,0,0,0.05)
}

.custome-design-icon {
    width: 100%;
    float: left;
    height: 85px;
    text-align: center;
    background-image: url(https://cflow-test-cflowapps-com.s3.ap-south-1.amazonaws.com/images/cus-top.png)
}

    .custome-design-icon i {
        font-size: 40px;
        margin: 18px 0;
        color: #f9f9f9
    }

.custome-design-name {
    text-align: center;
    float: left;
    height: 50px;
    padding: 0 5px;
    background: rgba(0,0,0,0.25);
    width: 100%;
    box-sizing: border-box
}

    .custome-design-name span {
        font-size: 15px;
        padding: 10px 0;
        color: #fff;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 30px;
        overflow: hidden;
        text-overflow: ellipsis
    }

.custome-des-control {
    position: absolute;
    top: 5px;
    right: 5px;
    display: none
}

    .custome-des-control a i {
        color: #fff;
        font-size: 22px
    }

.custome-design-file-box:hover .custome-des-control {
    display: block
}

.custome-design-file-box:nth-child(10n+1) {
    background-color: #607d8b
}

.custome-design-file-box:nth-child(10n+2) {
    background-color: #03a9f4
}

.custome-design-file-box:nth-child(10n+3) {
    background-color: #00bcd4
}

.custome-design-file-box:nth-child(10n+4) {
    background-color: #fca435
}

.custome-design-file-box:nth-child(10n+5) {
    background-color: #4caf50
}

.custome-design-file-box:nth-child(10n+6) {
    background-color: #ff5722
}

.custome-design-file-box:nth-child(10n+7) {
    background-color: #ec407a
}

.custome-design-file-box:nth-child(10n+8) {
    background-color: #ab47bc
}

.custome-design-file-box:nth-child(10n+9) {
    background-color: #ff4f8e
}

.custome-design-file-box:nth-child(10n+10) {
    background-color: #673ab7
}

.custome-pdf-dropdown-container {
    float: left;
    position: relative
}

.custom-pdf-dropdown {
    background-color: #fff;
    width: 300px;
    border: 1px solid #ddd;
    border-radius: 2px;
    position: absolute;
    right: -5px;
    top: 55px;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.125);
    z-index: 999;
    display: none
}

    .custom-pdf-dropdown:before {
        border-bottom: 11px solid rgba(0,0,0,0.2);
        border-left: 11px solid transparent;
        border-right: 11px solid transparent;
        content: "";
        display: inline-block;
        position: absolute;
        right: 12px;
        top: -11px
    }

    .custom-pdf-dropdown:after {
        border-bottom: 11px solid #FFF;
        border-left: 11px solid transparent;
        border-right: 11px solid transparent;
        content: "";
        display: inline-block;
        position: absolute;
        right: 12px;
        top: -10px
    }

    .custom-pdf-dropdown ul {
        list-style: none;
        width: 100%;
        float: left;
        padding: 0;
        margin: 10px 0
    }

    .custom-pdf-dropdown li {
        display: block;
        float: left;
        width: 100%
    }

        .custom-pdf-dropdown li a {
            padding: 4px 10px;
            width: 100%;
            box-sizing: border-box
        }

            .custom-pdf-dropdown li a i {
                float: left;
                font-size: 20px !important;
                margin: 2px 5px !important;
                padding: 0 !important;
                display: block
            }

            .custom-pdf-dropdown li a span {
                background-color: #fff;
                font-size: 14px !important;
                font-weight: 400;
                margin: 0;
                box-sizing: border-box;
                text-decoration: none;
                color: #333 !important;
                position: relative !important;
                float: left;
                display: block;
                top: 0 !important;
                right: 0 !important;
                overflow: hidden;
                text-overflow: ellipsis;
                width: calc(100% - 35px)
            }

.invtry-btn {
    float: right;
    margin: 8px;
    padding: 2px 10px;
    font-size: 13px;
    border-radius: 3px;
    color: #fff;
    cursor: pointer
}

.workflow-data-value-field .select-alternate-span {
    width: 53%;
    float: left;
    border: solid #e0e0e0;
    border-width: 0 0 1px
}

    .workflow-data-value-field .select-alternate-span span {
        display: block;
        width: 98%;
        text-align: left;
        cursor: pointer;
        color: #1a1a1a !important;
        font-size: 14px;
        font-weight: 400;
        padding: 6px
    }

    .workflow-data-value-field .select-alternate-span i {
        font-size: 22px;
        position: absolute;
        margin: 8px -15px;
        cursor: pointer
    }

.workflow-data-value-field-fullwidth .select-alternate-span {
    width: 97%;
    float: left;
    margin-left: 30px
}

    .workflow-data-value-field-fullwidth .select-alternate-span span {
        display: block;
        width: 100%;
        text-align: left;
        cursor: pointer;
        color: #1a1a1a !important;
        font-size: 14px;
        font-weight: 400;
        border: solid #e0e0e0;
        border-width: 0 0 1px;
        padding: 8px 0
    }

    .workflow-data-value-field-fullwidth .select-alternate-span i {
        font-size: 22px;
        position: absolute;
        margin: 8px -20px;
        cursor: pointer
    }

.post-approval-field {
    width: 78%;
    margin: 2% 11%;
    height: 50px;
    float: left;
    position: relative
}

    .post-approval-field span {
        width: 100%;
        float: left;
        display: block;
        text-align: left;
        font-size: 12px;
        font-weight: 500;
        margin-bottom: 5px
    }

.sec-set-user-cc-toggle-check {
    float: left;
    height: 20px;
    margin: 10px 0 0
}

.sec-set-user-checkbox-lbl {
    position: relative;
    display: block;
    height: 14px;
    width: 35px;
    background: #d2d2d2;
    border-radius: 100px;
    top: -19px;
    left: 2px;
    cursor: pointer;
    transition: all .3s ease;
    border: 2px solid #d2d2d2;
    box-sizing: border-box;
    margin: 16px 0 0
}

    .sec-set-user-checkbox-lbl:after {
        position: absolute;
        left: -2px;
        top: -4px;
        display: block;
        width: 19px;
        height: 19px;
        border-radius: 100px;
        background: #bf2828;
        box-shadow: 0 3px 3px rgba(0,0,0,0.29);
        content: '';
        transition: all .3s ease
    }

    .sec-set-user-checkbox-lbl:active:after {
        transform: scale(1.15,0.85)
    }

.sec-set-user-checkbox:checked ~ label:after {
    left: 16px;
    background: #1ba40a
}

.sec-set-user-checkbox:disabled ~ label {
    background: #d5d5d5;
    pointer-events: none
}

    .sec-set-user-checkbox:disabled ~ label:after {
        background: #bcbdbc
    }

.sec-set-user-checkbox {
    outline: 0;
    opacity: 0;
    width: 20px !important;
}

    .sec-set-user-checkbox:focus ~ .sec-set-user-checkbox-lbl {
        border: 2px solid #8e8e8e;
        box-sizing: border-box
    }

.rec-btn {
    float: left;
    position: absolute;
    right: 180px;
    display: block;
    top: 0
}

    .rec-btn i {
        font-size: 30px;
        padding: 2px;
        box-sizing: border-box;
        margin: 10px 0;
        color: #000;
        opacity: .7;
        background-color: #e0dcdc;
        border-radius: 50%
    }

.rec-nxt {
    right: 120px
}

.rec-btn a i:hover {
    opacity: 1
}

.ss-dvteamuser {
    width: 100% !important
}

.ss-spteamuser {
    width: auto !important
}

.hlp-note {
    background: #fafafa;
    border-radius: 5px;
    width: 100%;
    float: left;
    padding: 7px;
    line-height: 20px;
    margin: 10px 0;
    box-sizing: border-box;
    font-size: 14px;
    min-height: 30px;
    text-indent: 29px;
    position: relative;
    border: 1px solid #eeecec
}

.hlp-note-i {
    font-size: 25px;
    font-weight: 500;
    color: #ff5722;
    position: absolute;
    left: -28px;
    top: 2px
}

.histrec {
    width: 96%;
    margin: 2% 2% 0;
    float: left;
    box-sizing: border-box;
    box-shadow: 0 0 1px 1px #d2d2d2;
    color: #717171
}

.histdate {
    width: 100%;
    float: left;
    line-height: 30px;
    box-sizing: border-box;
    padding: 2px 10px
}

    .histdate span {
        float: right
    }

.histappby {
    width: 100%;
    float: left;
    box-sizing: border-box;
    padding: 2px 10px
}

    .histappby span {
        display: block;
        text-align: center;
        font-size: 14px;
        padding-top: 5px;
        line-height: 1.5
    }

.splash-cont {
    width: 900px;
    height: 500px;
    box-sizing: border-box;
    margin: 0 auto;
    background-color: #030078;
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.2)
}

.spls-img {
    width: 45%;
    height: 500px;
    float: left;
    background: #fff
}

.spls-cont {
    width: 55%;
    float: left;
    height: 500px;
    background-color: #030078;
    box-sizing: border-box;
    padding: 50px 20px
}

.txt_welcome {
    font-size: 30px;
    font-weight: 300;
    color: #fff;
    padding: 15px 0 0;
    text-align: center
}

.txt_user {
    color: #fff;
    line-height: 1.7;
    font-weight: 100;
    font-size: 16px;
    margin-top: 20%
}

    .txt_user p {
        font-family: 'Open Sans',sans-serif;
        text-indent: 25px;
        text-align: justify
    }

    .txt_user span {
        display: block;
        margin-bottom: 10px
    }

.clearfix {
    overflow: auto
}

.imprt-page {
    margin: 0 auto;
    width: 75%;
    background: #fff;
    padding: 30px;
    box-sizing: border-box;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05),0 2px 10px 0 rgba(0,0,0,0.05)
}

.app-icon {
    width: 120px;
    height: 120px;
    margin: 10px 0;
    text-align: center;
    line-height: 170px;
    float: left;
    border-radius: 2px
}

    .app-icon i {
        font-size: 55px;
        text-align: center;
        color: #037037
    }

    .app-icon img {
        width: 100%;
        height: 100%
    }

.app-name-ct {
    float: left;
    width: calc(100% - 325px);
    height: 120px;
    margin: 10px;
    padding: 5px;
    color: #2b2b2b;
    box-sizing: border-box
}

.app-name {
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 10px
}

.app-inst-btn {
    float: left;
    margin: 10px 0;
    width: 185px;
    height: 120px
}

    .app-inst-btn a {
        display: inline-block;
        margin-top: 95px;
        color: #8e8b8b
    }

.inst-btn {
    float: right;
    background-color: #1ba40a;
    color: #fff;
    width: 125px;
    font-size: 17px;
    text-align: center;
    padding: 10px 0;
    cursor: pointer;
    margin-top: 80px;
    border-radius: 2px;
    box-shadow: 1px 1px 5px rgba(88,88,88,0.5)
}

    .inst-btn:focus {
        outline: 0
    }

.scrnsht {
    padding-bottom: 20px;
    border-top: 1px solid #d4d4d4;
    border-bottom: 1px solid #d4d4d4
}

.scrnsht-head, .desc-head {
    font-size: 20px;
    font-weight: 600;
    margin: 10px 0 15px
}

.app-desc p {
    line-height: 1.5
}

.carousel {
    position: relative;
    box-shadow: 0 1px 6px rgba(0,0,0,0.64)
}

.carousel-inner {
    position: relative;
    overflow: hidden;
    width: 100%
}

.carousel-open:checked + .carousel-item {
    position: static;
    opacity: 100
}

.carousel-item {
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity .6s ease-out;
    transition: opacity .6s ease-out
}

    .carousel-item img {
        display: block;
        height: auto;
        max-width: 100%
    }

.carousel-control {
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: none;
    font-size: 20px;
    font-weight: 100;
    height: 46px;
    line-height: 60px;
    position: absolute;
    bottom: 0;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    transform: translate(0,-50%);
    text-align: center;
    width: 40px;
    z-index: 30;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none
}

    .carousel-control.next {
        right: 2%
    }

    .carousel-control:hover {
        color: #aaa
    }

#carousel-1:checked ~ .control-1, #carousel-2:checked ~ .control-2, #carousel-3:checked ~ .control-3, #carousel-4:checked ~ .control-4, #carousel-5:checked ~ .control-5 {
    display: block
}

.carousel-indicators {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 4%;
    left: 45%;
    right: 0;
    text-align: center;
    z-index: 10
}

    .carousel-indicators li {
        display: inline-block;
        margin: 0 5px
    }

.carousel-bullet {
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 35px;
    opacity: .5
}

    .carousel-bullet:hover {
        color: #aaa
    }

#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet, #carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet, #carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet, #carousel-4:checked ~ .control-4 ~ .carousel-indicators li:nth-child(4) .carousel-bullet, #carousel-5:checked ~ .control-5 ~ .carousel-indicators li:nth-child(5) .carousel-bullet {
    opacity: 1
}

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

.nowf {
    display: flex;
    justify-content: center
}

    .nowf img {
        width: 96%;
        height: 100%
    }

    .nowf span {
        position: absolute;
        align-self: center;
        text-align: center;
        color: #656666;
        top: 25%
    }

.nowftxt {
    font-size: 18px;
    line-height: 2
}

.nowf a {
    text-decoration: underline;
    color: #656666 !important
}

.sos-cont {
    width: 475px;
    background: #fff;
    padding: 16px;
    height: 500px;
    position: relative;
    margin: 0 auto;
    border-radius: 5px;
    box-shadow: 0 0 8px rgba(0,0,0,0.5);
    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
    }

.no-btn {
    position: absolute;
    bottom: 30px;
    font-size: 16px;
    text-align: center;
    margin: 0 auto;
    left: 40%;
    color: #4a90e2
}

    .no-btn:hover {
        color: #529aef
    }

.hvng-prbm .btn, .atmt .btn, .cntfrm .btn {
    font-size: 16px;
    background: #4a90e2;
    padding: 10px 15px;
    color: #fff;
    width: 32%;
    left: 32%;
    bottom: 35px;
    position: absolute;
    text-align: center;
    box-shadow: 0 0 2px rgba(0,0,0,0.5)
}

    .hvng-prbm .btn:hover, .atmt .btn:hover, .cntfrm .btn:hover {
        background-color: #529aef
    }

.atmt {
    margin-top: 50px
}

.atmt-frm {
    width: 90%;
    margin: 25px 5%
}

.atmt-frm-fld {
    margin: 10px 0
}

.atmt textarea {
    max-height: 100px;
    min-height: 100px;
    max-width: 98%;
    min-width: 98%;
    background: #f7f7f7;
    border-radius: 3px;
    border: 1px solid #e6e7f0
}

.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 .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
}

.wf-upld {
    margin: 7px;
    color: #4e5056
}

.cntfrm {
    margin-top: 50px
}

    .cntfrm .atmt-frm-fld {
        margin: 15px 0
    }

    .cntfrm p {
        font-size: 20px;
        text-align: center;
        margin-bottom: 50px
    }

    .cntfrm label {
        width: 33%;
        display: inline-block
    }

    .cntfrm input {
        width: 62.5%;
        padding: 5px
    }

    .cntfrm .btn {
        width: 18%;
        left: 38%
    }

.wb-api {
    margin-top: 10px
}

    .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: 1px solid #f0f0f0;
            padding: 5px 10px;
            line-height: 1.42857143;
            font-weight: 500;
            font-size: 14px;
            position: relative;
            text-align: unset
        }

    .wb-api .select-with-search {
        width: 235px
    }

    .wb-api .workflow-record-table .select2-container {
        width: 235px
    }

.fetch-btn {
    background: var(--primary-color);
    padding: 1px 3px;
    color: #fff;
    border-radius: 4px;
    font-weight: 200
}

.wb-api .one-to-many-grid .wdth {
    width: 50%
}

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

    50% {
        -webkit-transform: scale(1.7)
    }

    100% {
        -webkit-transform: scale(1)
    }
}

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

    50% {
        -moz-transform: scale(1.7)
    }

    100% {
        -moz-transform: scale(1)
    }
}

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

    50% {
        -ms-transform: scale(1.7)
    }

    100% {
        -ms-transform: scale(1)
    }
}

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

    50% {
        transform: scale(1.7)
    }

    100% {
        transform: scale(1)
    }
}

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

    50% {
        -webkit-transform: scale(0)
    }

    75% {
        -webkit-transform: scale(1.4)
    }

    100% {
        -webkit-transform: scale(1)
    }
}

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

    50% {
        -moz-transform: scale(0)
    }

    75% {
        -moz-transform: scale(1.4)
    }

    100% {
        -moz-transform: scale(1)
    }
}

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

    50% {
        -ms-transform: scale(0)
    }

    75% {
        -ms-transform: scale(1.4)
    }

    100% {
        -ms-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% {
        -webkit-transform: scale(0)
    }

    50% {
        -webkit-transform: scale(0)
    }

    75% {
        -webkit-transform: scale(1.4)
    }

    100% {
        -webkit-transform: scale(1)
    }
}

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

    50% {
        -moz-transform: scale(0)
    }

    75% {
        -moz-transform: scale(1.4)
    }

    100% {
        -moz-transform: scale(1)
    }
}

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

    50% {
        -ms-transform: scale(0)
    }

    75% {
        -ms-transform: scale(1.4)
    }

    100% {
        -ms-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% {
        -webkit-transform: rotate(0deg)
    }

    50% {
        -webkit-transform: rotate(360deg)
    }

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

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

    50% {
        -moz-transform: rotate(360deg)
    }

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

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

    50% {
        -ms-transform: rotate(360deg)
    }

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

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

    50% {
        transform: rotate(360deg)
    }

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

#dvRecordDetails .select2-choice, .twoline-select2-choice {
    overflow: unset !important;
    white-space: unset !important;
    text-overflow: clip !important
}

#dvRecordDetails .select2-chosen, .twoLine-select2-chosen {
    white-space: unset !important;
    float: left !important
}

.prf-pas {
    width: 116px;
    height: 150px;
    border: 1px solid #c2c2c2;
    border-radius: 3px;
    position: relative;
    float: left;
    margin-left: 22px
}

    .prf-pas img {
        width: 116px;
        height: 150px
    }

.prf-upld {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 55px;
    text-align: center;
    display: none;
    cursor: pointer
}

.prf-pas:hover .prf-upld, .prf-pas:hover .del-dwn {
    background: rgba(194,194,194,0.5);
    display: block
}

.prf-upld button {
    margin: 15px auto;
    display: block
}

.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%
}

.prf-upld .btn {
    border: 1px solid gray;
    color: gray;
    background-color: #fff;
    padding: 4px 10px;
    border-radius: 5px
}

.upload-btn-wrapper input[type=file] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0
}

.del-dwn {
    position: absolute;
    right: 0;
    background: rgba(194,194,194,0.5);
    display: none
}

    .del-dwn span {
        width: 25px;
        display: inline-block;
        padding: 3px;
        text-align: center;
        font-size: 16px;
        cursor: pointer
    }

.btm-mnu {
    overflow-x: hidden;
    float: left;
    width: 100%;
    background: #eff0f1
}

.scdl-i {
    margin-top: 8px !important
}

    .scdl-i, .scdl-i + span {
        color: #c02d15
    }

.cl-pop {
    width: 950px;
    border-radius: 7px;
    border: 0;
    margin: auto
}

.cl-pop-cont {
    width: 98%;
    margin: 0 auto;
    padding: 0 10px 25px
}

.cl-pop-heading h2 {
    padding: 14px 29px;
    color: var(--primary-color) !important;
    font-weight: 500;
    font-size: 28px
}

.cl-pop-heading {
    background: #fff;
    border-radius: 7px 7px 0 0;
    border-bottom: 0
}

.cl-pop-wel-cont {
    padding: 0 0 5px 30px;
    clear: both;
    color: #5a5b5d;
    font-family: "Assistant",sans-serif
}

.cl-pop-forms {
    display: flex;
    margin-bottom: 20px
}

.cl-pop-form-col2 {
    width: 50%
}

.cl-pop-sub-btn {
    width: 9%;
    margin: 15px auto;
    float: none
}

.cl-pop-place-color::-webkit-input-placeholder {
    color: #cfcfcf
}

.cl-pop-place-color::-moz-placeholder {
    color: #cfcfcf
}

.cl-pop-place-color:-ms-input-placeholder {
    color: #cfcfcf
}

.cl-pop-place-color:-moz-placeholder {
    color: #cfcfcf
}

.cl-pop-place-color {
    padding: 7px 4px !important
}

.cl-pop-field {
    color: var(--primary-color) !important
}

.cl-pop-btn {
    background: var(--primary-color) !important;
    padding: 5px 10px;
    font-size: 16px;
    color: #fff;
    border-radius: 2px;
    box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19)
}

.helplink {
    background: #9e9e9e;
    color: #fff;
    box-sizing: border-box;
    padding: 3px 10px;
    font-size: 13px !important;
    border-radius: 3px
}

.name-wkf-tit .helplink {
    float: right;
    position: relative;
    top: -32px;
    right: 8px;
    text-indent: 0 !important
}

.column.frmdesign .helplink {
    position: relative;
    float: right;
    top: -10px
}

.argmt-btn .helplink {
    position: relative;
    top: -9px;
    left: 10px;
    color: #fff !important
}

    .argmt-btn .helplink:hover {
        color: #fff !important
    }

.wfe-popup-del.des-sect-del .helplink, .desin-pral-cont .des-cont-tit .helplink {
    position: relative;
    top: 7px;
    left: 10px
}

.des-wrk-title .helplink {
    position: relative;
    left: 10px
}

.wrk-chart-parallel-head .helplink {
    top: 6px;
    position: relative
}

.wkf-library-title .helplink {
    position: relative;
    top: 16px
}

.page-title.cc-page-title .helplink {
    position: absolute;
    top: 13px;
    right: 1%
}

#dvMailNotificEditForm .cc-accordin-heading .helplink {
    position: relative;
    left: 20px;
    top: -12px
}

#dashrecords-preview-popup .cl-pop-heading .helplink {
    position: relative;
    top: -5px;
    left: 20px
}

.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-radius: 7px;
    border: 0;
    margin: auto;
    background-color: #fff;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);

    position: relative;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    box-sizing: border-box;
    float: left;
    min-height: 200px;

}

.mini-pop-cont {
    width: 96%;
    margin: 0 auto;
    padding: 0 10px 25px
}

.mini-pop-heading h2 {
    padding: 14px 29px;
    color: var(--primary-color) !important;
    font-weight: 500;
    font-size: 20px;
    width: 85%;
    margin: 0
}

.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::-moz-placeholder {
    color: #cfcfcf
}

.mini-pop-place-color:-ms-input-placeholder {
    color: #cfcfcf
}

.mini-pop-place-color:-moz-placeholder {
    color: #cfcfcf
}

.mini-pop-place-color {
    padding: 7px 4px !important
}

.mini-pop-field {
    color: var(--primary-color) !important
}

.mini-pop-btn {
    background: var(--primary-color) !important;
    padding: 5px 10px;
    font-size: 16px;
    color: #fff;
    border-radius: 2px;
    box-shadow: 0 4px 9px 0 rgba(0,0,0,0.2),3px 3px 1px 0 rgba(0,0,0,0.19);
    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, textarea {
    width: 98%;
    float: left;
    display: block;
    text-align: left;
    font-size: 14px;
    padding: 5px;
    border: solid #e0e0e0;
    border-width: 0 0 1px;
    box-shadow: none;
    outline: 0
}

.mp-field span {
    display: block;
    text-align: left;
    font-size: 15px;
    margin-bottom: 5px
}

.signature-fields {
    background-color: #fff;
    float: left;
    min-width: 250px;
    width: calc(90% - 35%);
    position: relative;
    height: 100px;
    margin: 5px 0 0 25px
}

.signature-field-option {
    width: 100%;
    float: left;
    height: 50px;
    position: relative
}

a[name="lnksignatureCapture"] {
    color: #807979;
    position: relative;
    top: 7px;
    padding-top: 3px;
    display: block;
    width: 95%;
    height: 20px;
    border-top: 1px solid #9d9b9b;
    font-size: 14px;
    text-indent: 5px
}

a[name="lnkSignClear"] {
    position: absolute;
    top: 70px;
    right: 0;
    color: #807979
}

.signature-field-option img {
    padding: 5px;
    height: 50px;
    display: block
}

.locationdatacflow {
    color: red;
    position: absolute;
    font-size: 20px;
    margin-top: -5px;
    cursor: pointer
}

.an_annotation_cont {
    width: 95%;
    top: 75px;
    margin: 0 auto
}

.an_modal-dialog {
    position: relative;
    margin: 0 auto;
    top: 0
}

.an_modal_cont {
    height: 600px;
    background-color: #fff;
    margin: 0 auto;
    padding: 4px;
    border-radius: 5px;
    box-sizing: border-box
}

    .an_modal_cont h2 {
        float: left;
        width: 96%;
        margin: 5px 0 6px 8px
    }

.an_container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    margin-top: 5px
}

.an_menu_bar {
    display: flex;
    padding: 3px 10px
}

.an_menu_bar_first_icon_sec {
    display: flex
}

.an_menu_bar_second_icon_sec {
    display: flex;
    margin-left: 30px
}

.an_menu_bar_icon_cont {
    padding: 5px 2px;
    border: 1px solid #ccc;
    text-align: center;
    width: 52px;
    height: 40px
}

.an_menu_bar_icon {
    color: #4e4949
}

.an_menu_bar_icon_text {
    font-size: 12px
}

.an_img_side_cont {
    display: flex;
    padding: 10px
}

.an_img_cont {
    width: 100%;
    height: 402px;
    overflow-y: scroll
}

.an_img {
    border: 1px dashed #ccc;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    color: #ccc
}

.an_comment_title {
    font-size: 18px;
    text-align: center;
    background: #ccc;
    color: #fff;
    padding: 5px
}

.an_button_pad {
    padding-right: 10px
}

.an_svclose {
    height: 30px !important;
    margin-top: 0 !important
}

.an_comment textarea {
    resize: none
}

.an_color_picker {
    width: 55px;
    height: 52px;
    border: 7px solid #717171;
    background: #35b500;
    cursor: pointer;
    border-radius: 1px
}

.an_menu_bar_zoom {
    border: 1px solid #ccc;
    text-align: center;
    margin-left: 30px
}

.an_menu_zoom_txt_size {
    font-size: 12px
}

.an_menu_zoom_icons {
    display: flex
}

.an_zoom_inc_icon {
    padding: 0 25px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc
}

.an_zoom_dec_icon {
    border-bottom: 1px solid #ccc;
    padding: 0 25px;
    border-top: 1px solid #ccc
}

.an_menu_bar_font {
    display: flex;
    margin-left: 30px
}

.an_menu_font_size {
    padding: 5px 2px;
    border: 1px solid #ccc;
    text-align: center;
    width: 52px;
    height: 40px
}

.an_menu_fot_size_txt {
    margin-bottom: 4px;
    margin-top: -4px
}

.an_comment {
    width: 200px;
    border: 1px solid #ccc;
    height: 402px;
    overflow-y: scroll;
    margin-left: 6px
}

    .an_comment ul {
        list-style: none;
        padding-inline-start: 6px
    }

        .an_comment ul li {
            width: 150px
        }

.an_comment_list {
    border: 1px solid #ccc
}

    .an_comment_list:focus {
        outline: 0
    }

.disabled_button {
    pointer-events: none;
    opacity: .4
}

.not_dropdownContainer {
    width: 15%;
    float: left;
    margin-top: 20px
}

.not_dropdown-toggle {
    cursor: pointer
}

.not_dropdown {
    min-height: 140px;
    display: none;
    position: absolute;
    width: 400px;
    right: 232px;
    padding: 0;
    border: 1px solid #dcd9d9;
    background-color: #fff;
    border-radius: 5px;
    z-index: 1;
    margin-top: 12px
}

    .not_dropdown ul {
        padding-inline-start: 0;
        margin-block-start: 0;
        margin-block-end: 0
    }

    .not_dropdown .not_list ul {
        overflow-y: auto;
        min-height: 140px;
        max-height: 280px;
        padding-inline-start: 0
    }

.not_list_top_cont {
    padding: 6px 30px;
    border-bottom: 1px solid #ccc
}

.not_list_top_txt {
    color: #999;
    font-size: 13px
}

.not_list_bottom_cont {
    background: #eee
}

.not_list_bottom_txt {
    display: block;
    padding: 6px 30px;
    color: #999;
    font-size: 13px
}

.not_dropdown:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 129px;
    border-width: 0 10px 10px;
    border-style: solid;
    border-color: #fff transparent
}

.not_dropdown .not_list li {
    height: 55px;
    list-style-type: none;
    border-top: 1px solid #d3d3d3
}

li.not_list {
    list-style-type: none
}

.not_dropdown li:first-child {
    list-style-type: none;
    border-top: 0
}

.not_dropdown .not_list li a {
    text-decoration: none;
    padding: 0 3px 0 0;
    display: block
}

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

    2% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }

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

    6% {
        -webkit-transform: rotate(18deg);
        transform: rotate(18deg)
    }

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

    10% {
        -webkit-transform: rotate(22deg);
        transform: rotate(22deg)
    }

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

    14% {
        -webkit-transform: rotate(18deg);
        transform: rotate(18deg)
    }

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

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

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

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

    2% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }

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

    6% {
        -webkit-transform: rotate(18deg);
        transform: rotate(18deg)
    }

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

    10% {
        -webkit-transform: rotate(22deg);
        transform: rotate(22deg)
    }

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

    14% {
        -webkit-transform: rotate(18deg);
        transform: rotate(18deg)
    }

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

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

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

.faa-ring.animated {
    -webkit-animation: ring 60s ease infinite;
    animation: ring 60s ease infinite;
    font-size: 25px
}

.not_badge {
    background-color: #fa3e3e;
    color: #fff;
    border-radius: 50%;
    top: 10px;
    position: absolute;
    font-size: 11px;
    margin-left: 33px;
    width: 22px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center
}

.not_li_container {
    display: flex
}

.not_li_first_col {
    color: #fff;
    display: flex;
    align-items: center;
    width: 60px
}

.no_li_sec_col {
    text-align: left;
    padding-left: 10px;
    width: 100%
}

.not_first_content {
    font-size: 15px;
    color: #252525
}

.not_sec_content {
    font-size: 13px;
    color: #5d5d5d
}

.not_thr_content {
    font-size: 12px;
    color: #989898;
    text-align: right
}

.not_txt_slice {
    display: inline-block;
    max-width: 315px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis
}

.not_num_slice {
    display: inline-block;
    width: 50px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    color: #2f2f2f;
    font-weight: 500
}

.before-add-options {
    position: absolute;
    top: 25%;
    left: 15%;
    right: 15%;
    text-align: center;
    width: 70%;
    background: #fff;
    padding: 20px 5px;
    border-radius: 4px;
    box-shadow: 0 0 10px 1px #ccc
}

.discover_container {
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 1000;
    bottom: 60px;
    right: 105px
}

.dis_pop {
    width: 450px !important;
    border: 0;
    margin: auto !important
}

.dis_pop_min_height {
    height: 405px
}

.dis_container {
    padding: 10px 15px 0 15px
}

.dis_heading {
    font-size: 20px;
    margin-bottom: 5px
}

.dis_subcontent {
    font-size: 14px;
    color: #777
}

.dis_content {
    font-size: 17px;
    color: #797979
}

.dis_per_container {
    display: flex;
    margin-top: 12px;
    padding-bottom: 11px;
    border-bottom: 1px solid #f1f1f1
}

.dis_percent {
    width: 13%;
    font-weight: 700;
    font-size: 17px;
    color: var(--primary-color)
}

.meter {
    width: 100%;
    height: 20px;
    position: relative;
    background: #e6e6e6;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px
}

    .meter > span {
        display: block;
        height: 100%;
        border-radius: 20px;
        position: relative;
        overflow: hidden;
        background-color: #6ac259
    }

.dis_pop table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 16px
}

.dis_cicle_active ~ .dis_content {
    text-decoration: line-through
}

.dis_cicle_active img {
    width: 26px
}

.dis_circle img {
    width: 27px
}

.dis_close_btn {
    float: right;
    padding-right: 16px
}

.dis_content a {
    color: #797979;
    width: 100%;
    display: block;
    height: 25px
}

.dis_content:hover a {
    text-decoration: underline
}

.dis_close_btn a {
    color: gray;
    text-decoration: underline
}

.dis_get_btn {
    position: fixed;
    bottom: 14px;
    right: 105px;
    z-index: 100;
    display: none
}

    .dis_get_btn a {
        display: flex;
        align-items: center;
        background: #0277ed;
        color: #fff;
        padding: 5px;
        border-radius: 5px;
        opacity: .5;
        font-size: 14px
    }

    .dis_get_btn img {
        width: 20px;
        padding-right: 10px
    }

.dataTables_scroll {
    overflow: auto
}

.recall-cont .dataTables_scroll {
    height: 350px
}

#dashrecords-preview-popup .cl-pop {
    width: 1050px
}

.help_icon {
    width: 10%;
    float: left;
    margin-top: 19px
}

    .help_icon a {
        color: #fff;
        font-size: 19px
    }

.we_cflow_logo img {
    width: 170px
}



.dis_btn_cont {
    display: flex;
    justify-content: space-between
}

    .dis_btn_cont a {
        color: #797979;
        font-size: 14px;
        text-decoration: underline
    }

.dis_dont_show {
    padding-left: 10px
}

.fo_new_contcent {
    position: absolute;
    right: 69px;
    top: 13px;
    background: #9e9e9e;
    color: #fff;
    box-sizing: border-box;
    padding: 3px 10px;
    font-size: 13px !important;
    border-radius: 3px
}

#ApprovalForm .approval_placeholder {
    z-index: 5
}

.dash_wf_title {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    color: #5a5a5a;
    font-weight: 500
}

    .dash_wf_title a {
        color: #797979;
        font-size: 21px
    }

.dash_wf_drop {
    width: 150px;
    position: absolute;
    top: 30px;
    right: 17px;
    box-shadow: 1px 1px 8px 3px #e4e4e4;
    background: #fff
}

    .dash_wf_drop ul {
        list-style: none;
        padding-inline-start: 0;
        margin-block-start: 5px;
        margin-block-end: 5px;
        margin-inline-start: 5px;
        margin-inline-end: 5px;
        font-size: 15px
    }

        .dash_wf_drop ul li:first-child {
            border-bottom: 1px solid #ccc
        }

.dash_wf_drop_cont {
    display: block !important
}

.dash_wf_drop li {
    padding: 5px
}

    .dash_wf_drop li a {
        text-decoration: none;
        color: #545454
    }

.dash_wf_init {
    position: absolute;
    bottom: 10px;
    right: 20px
}

    .dash_wf_init a {
        text-decoration: none;
        color: #8c8b8b;
        font-size: 14px
    }

.dash_wf_name_circle {
    width: 30px;
    border: 1px solid;
    height: 30px;
    font-size: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px
}

.workflow-cart-li:nth-child(10n+1) .dash_wf_name_circle {
    border-color: #9c73ee;
    color: #9c73ee;
    background: #eee8f9
}

.workflow-cart-li:nth-child(10n+2) .dash_wf_name_circle {
    border-color: #adad61;
    color: #adad61;
    background: #ffffda
}

.workflow-cart-li:nth-child(10n+3) .dash_wf_name_circle {
    border-color: #ee8f64;
    color: #ee8f64;
    background: #fdece5
}

.workflow-cart-li:nth-child(10n+4) .dash_wf_name_circle {
    border-color: #7dbf80;
    color: #7dbf80;
    background: #e8ffe9
}

.workflow-cart-li:nth-child(10n+5) .dash_wf_name_circle {
    border-color: #ea7190;
    color: #ea7190;
    background: #fff1f4
}

.workflow-cart-li:nth-child(10n+6) .dash_wf_name_circle {
    border-color: #b86db6;
    color: #b86db6;
    background: #ffe7fe
}

.workflow-cart-li:nth-child(10n+7) .dash_wf_name_circle {
    border-color: #ee7673;
    color: #ee7673;
    background: #ffe1e0
}

.workflow-cart-li:nth-child(10n+8) .dash_wf_name_circle {
    border-color: #73a0ee;
    color: #73a0ee;
    background: #d3e3ff
}

.workflow-cart-li:nth-child(10n+9) .dash_wf_name_circle {
    border-color: #eab559;
    color: #eab559;
    background: #fff6e5
}

.workflow-cart-li:nth-child(10n+10) .dash_wf_name_circle {
    border-color: #65abc5;
    color: #65abc5;
    background: #e3f7ff
}

.dash_wf_init i {
    position: relative;
    top: 1.4px
}

#dvArchiveList .select2_field_error_message {
    width: 150px;
    margin-top: -5px
}

.margin_left_27_px {
    margin-left: 27px
}

table .attachment-fields {
    width: 275px !important
}

.dash_wf_title .name {
    overflow: hidden;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

#dvMainContent .ui-state-highlight {
    border: 1px dashed #ccc !important;
    background-color: #f3f3f3 !important;
    height: 45px
}

.set_plan_btn {
    width: 110px
}

.sm_plan_downgraded {
    font-size: 16px;
    padding: 15px 15px 25px;
    color: gray;
    text-align: center
}

    .sm_plan_downgraded span {
        padding: 3px;
        border-radius: 5px;
        line-height: 25px
    }

.set_plan_flex {
    display: flex;
    justify-content: center
}

.sm_plan_downgraded div {
    display: inline-flex;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    margin-top: 10px
}

#dvRecordDetails .workflow-data-value-field-fullwidth textarea {
    width: 90% !important;
    margin: 0 2% 2% !important
}

@media only screen and (max-width:1200px) {
    .dis_pop {
        width: 325px !important
    }

    .dis_container {
        padding: 10px 15px
    }

    .dis_heading {
        font-size: 22px;
        margin-bottom: 0
    }

    .dis_pop table {
        border-spacing: 0 12px
    }

    .dis_pop_min_height {
        height: 390px
    }

    .discover_container {
        right: 45px
    }
}

.fa, .fad, .fal, .fas {
    -moz-osx-font-smoothing: grayscale;
    -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 {
    -moz-osx-font-smoothing: grayscale;
    -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 {
    -moz-osx-font-smoothing: grayscale;
    -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'
}

.fa-lg {
    font-size: 1.33333em;
    line-height: .75em;
    vertical-align: -.0667em
}

.fa-xs {
    font-size: .75em
}

.fa-sm {
    font-size: .875em
}

.fa-1x {
    font-size: 1em
}

.fa-2x {
    font-size: 2em
}

.fa-3x {
    font-size: 3em
}

.fa-4x {
    font-size: 4em
}

.fa-5x {
    font-size: 5em
}

.fa-6x {
    font-size: 6em
}

.fa-7x {
    font-size: 7em
}

.fa-8x {
    font-size: 8em
}

.fa-9x {
    font-size: 9em
}

.fa-10x {
    font-size: 10em
}

.fa-fw {
    text-align: center;
    width: 1.25em
}

.fa-ul {
    list-style-type: none;
    margin-left: 2.5em;
    padding-left: 0
}

    .fa-ul > li {
        position: relative
    }

.fa-li {
    left: -2em;
    position: absolute;
    text-align: center;
    width: 2em;
    line-height: inherit
}

.fa-border {
    border: .08em solid #eee;
    border-radius: .1em;
    padding: .2em .25em .15em
}

.fa-pull-left {
    float: left
}

.fa-pull-right {
    float: right
}

.fa.fa-pull-left, .fab.fa-pull-left, .fal.fa-pull-left, .far.fa-pull-left, .fas.fa-pull-left {
    margin-right: .3em
}

.fa.fa-pull-right, .fab.fa-pull-right, .fal.fa-pull-right, .far.fa-pull-right, .fas.fa-pull-right {
    margin-left: .3em
}

.fa-spin {
    -webkit-animation: fa-spin 2s linear infinite;
    animation: fa-spin 2s linear infinite
}

.fa-pulse {
    -webkit-animation: fa-spin 1s steps(8) infinite;
    animation: fa-spin 1s steps(8) infinite
}

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

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

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

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.fa-rotate-90 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.fa-rotate-180 {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.fa-rotate-270 {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg)
}

.fa-flip-horizontal {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

.fa-flip-vertical {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1)
}

.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical {
    -webkit-transform: scale(-1);
    transform: scale(-1)
}

:root .fa-flip-both, :root .fa-flip-horizontal, :root .fa-flip-vertical, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-rotate-90 {
    -webkit-filter: none;
    filter: none
}

.fa-stack {
    display: inline-block;
    height: 2em;
    line-height: 2em;
    position: relative;
    vertical-align: middle;
    width: 2.5em
}

.fa-stack-1x, .fa-stack-2x {
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%
}

.fa-stack-1x {
    line-height: inherit
}

.fa-stack-2x {
    font-size: 2em
}

.fa-inverse {
    color: #fff
}

.fa-500px:before {
    content: "\f26e"
}

.fa-accessible-icon:before {
    content: "\f368"
}

.fa-accusoft:before {
    content: "\f369"
}

.fa-acquisitions-incorporated:before {
    content: "\f6af"
}

.fa-ad:before {
    content: "\f641"
}

.fa-address-book:before {
    content: "\f2b9"
}

.fa-address-card:before {
    content: "\f2bb"
}

.fa-adjust:before {
    content: "\f042"
}

.fa-adn:before {
    content: "\f170"
}

.fa-adobe:before {
    content: "\f778"
}

.fa-adversal:before {
    content: "\f36a"
}

.fa-affiliatetheme:before {
    content: "\f36b"
}

.fa-air-freshener:before {
    content: "\f5d0"
}

.fa-airbnb:before {
    content: "\f834"
}

.fa-algolia:before {
    content: "\f36c"
}

.fa-align-center:before {
    content: "\f037"
}

.fa-align-justify:before {
    content: "\f039"
}

.fa-align-left:before {
    content: "\f036"
}

.fa-align-right:before {
    content: "\f038"
}

.fa-alipay:before {
    content: "\f642"
}

.fa-allergies:before {
    content: "\f461"
}

.fa-amazon:before {
    content: "\f270"
}

.fa-amazon-pay:before {
    content: "\f42c"
}

.fa-ambulance:before {
    content: "\f0f9"
}

.fa-american-sign-language-interpreting:before {
    content: "\f2a3"
}

.fa-amilia:before {
    content: "\f36d"
}

.fa-anchor:before {
    content: "\f13d"
}

.fa-android:before {
    content: "\f17b"
}

.fa-angellist:before {
    content: "\f209"
}

.fa-angle-double-down:before {
    content: "\f103"
}

.fa-angle-double-left:before {
    content: "\f100"
}

.fa-angle-double-right:before {
    content: "\f101"
}

.fa-angle-double-up:before {
    content: "\f102"
}

.fa-angle-down:before {
    content: "\f107"
}

.fa-angle-left:before {
    content: "\f104"
}

.fa-angle-right:before {
    content: "\f105"
}

.fa-angle-up:before {
    content: "\f106"
}

.fa-angry:before {
    content: "\f556"
}

.fa-angrycreative:before {
    content: "\f36e"
}

.fa-angular:before {
    content: "\f420"
}

.fa-ankh:before {
    content: "\f644"
}

.fa-app-store:before {
    content: "\f36f"
}

.fa-app-store-ios:before {
    content: "\f370"
}

.fa-apper:before {
    content: "\f371"
}

.fa-apple:before {
    content: "\f179"
}

.fa-apple-alt:before {
    content: "\f5d1"
}

.fa-apple-pay:before {
    content: "\f415"
}

.fa-archive:before {
    content: "\f187"
}

.fa-archway:before {
    content: "\f557"
}

.fa-arrow-alt-circle-down:before {
    content: "\f358"
}

.fa-arrow-alt-circle-left:before {
    content: "\f359"
}

.fa-arrow-alt-circle-right:before {
    content: "\f35a"
}

.fa-arrow-alt-circle-up:before {
    content: "\f35b"
}

.fa-arrow-circle-down:before {
    content: "\f0ab"
}

.fa-arrow-circle-left:before {
    content: "\f0a8"
}

.fa-arrow-circle-right:before {
    content: "\f0a9"
}

.fa-arrow-circle-up:before {
    content: "\f0aa"
}

.fa-arrow-down:before {
    content: "\f063"
}

.fa-arrow-left:before {
    content: "\f060"
}

.fa-arrow-right:before {
    content: "\f061"
}

.fa-arrow-up:before {
    content: "\f062"
}

.fa-arrows-alt:before {
    content: "\f0b2"
}

.fa-arrows-alt-h:before {
    content: "\f337"
}

.fa-arrows-alt-v:before {
    content: "\f338"
}

.fa-artstation:before {
    content: "\f77a"
}

.fa-assistive-listening-systems:before {
    content: "\f2a2"
}

.fa-asterisk:before {
    content: "\f069"
}

.fa-asymmetrik:before {
    content: "\f372"
}

.fa-at:before {
    content: "\f1fa"
}

.fa-atlas:before {
    content: "\f558"
}

.fa-atlassian:before {
    content: "\f77b"
}

.fa-atom:before {
    content: "\f5d2"
}

.fa-audible:before {
    content: "\f373"
}

.fa-audio-description:before {
    content: "\f29e"
}

.fa-autoprefixer:before {
    content: "\f41c"
}

.fa-avianex:before {
    content: "\f374"
}

.fa-aviato:before {
    content: "\f421"
}

.fa-award:before {
    content: "\f559"
}

.fa-aws:before {
    content: "\f375"
}

.fa-baby:before {
    content: "\f77c"
}

.fa-baby-carriage:before {
    content: "\f77d"
}

.fa-backspace:before {
    content: "\f55a"
}

.fa-backward:before {
    content: "\f04a"
}

.fa-bacon:before {
    content: "\f7e5"
}

.fa-balance-scale:before {
    content: "\f24e"
}

.fa-balance-scale-left:before {
    content: "\f515"
}

.fa-balance-scale-right:before {
    content: "\f516"
}

.fa-ban:before {
    content: "\f05e"
}

.fa-band-aid:before {
    content: "\f462"
}

.fa-bandcamp:before {
    content: "\f2d5"
}

.fa-barcode:before {
    content: "\f02a"
}

.fa-bars:before {
    content: "\f0c9"
}

.fa-baseball-ball:before {
    content: "\f433"
}

.fa-basketball-ball:before {
    content: "\f434"
}

.fa-bath:before {
    content: "\f2cd"
}

.fa-battery-empty:before {
    content: "\f244"
}

.fa-battery-full:before {
    content: "\f240"
}

.fa-battery-half:before {
    content: "\f242"
}

.fa-battery-quarter:before {
    content: "\f243"
}

.fa-battery-three-quarters:before {
    content: "\f241"
}

.fa-battle-net:before {
    content: "\f835"
}

.fa-bed:before {
    content: "\f236"
}

.fa-beer:before {
    content: "\f0fc"
}

.fa-behance:before {
    content: "\f1b4"
}

.fa-behance-square:before {
    content: "\f1b5"
}

.fa-bell:before {
    content: "\f0f3"
}

.fa-bell-slash:before {
    content: "\f1f6"
}

.fa-bezier-curve:before {
    content: "\f55b"
}

.fa-bible:before {
    content: "\f647"
}

.fa-bicycle:before {
    content: "\f206"
}

.fa-biking:before {
    content: "\f84a"
}

.fa-bimobject:before {
    content: "\f378"
}

.fa-binoculars:before {
    content: "\f1e5"
}

.fa-biohazard:before {
    content: "\f780"
}

.fa-birthday-cake:before {
    content: "\f1fd"
}

.fa-bitbucket:before {
    content: "\f171"
}

.fa-bitcoin:before {
    content: "\f379"
}

.fa-bity:before {
    content: "\f37a"
}

.fa-black-tie:before {
    content: "\f27e"
}

.fa-blackberry:before {
    content: "\f37b"
}

.fa-blender:before {
    content: "\f517"
}

.fa-blender-phone:before {
    content: "\f6b6"
}

.fa-blind:before {
    content: "\f29d"
}

.fa-blog:before {
    content: "\f781"
}

.fa-blogger:before {
    content: "\f37c"
}

.fa-blogger-b:before {
    content: "\f37d"
}

.fa-bluetooth:before {
    content: "\f293"
}

.fa-bluetooth-b:before {
    content: "\f294"
}

.fa-bold:before {
    content: "\f032"
}

.fa-bolt:before {
    content: "\f0e7"
}

.fa-bomb:before {
    content: "\f1e2"
}

.fa-bone:before {
    content: "\f5d7"
}

.fa-bong:before {
    content: "\f55c"
}

.fa-book:before {
    content: "\f02d"
}

.fa-book-dead:before {
    content: "\f6b7"
}

.fa-book-medical:before {
    content: "\f7e6"
}

.fa-book-open:before {
    content: "\f518"
}

.fa-book-reader:before {
    content: "\f5da"
}

.fa-bookmark:before {
    content: "\f02e"
}

.fa-bootstrap:before {
    content: "\f836"
}

.fa-border-all:before {
    content: "\f84c"
}

.fa-border-none:before {
    content: "\f850"
}

.fa-border-style:before {
    content: "\f853"
}

.fa-bowling-ball:before {
    content: "\f436"
}

.fa-box:before {
    content: "\f466"
}

.fa-box-open:before {
    content: "\f49e"
}

.fa-boxes:before {
    content: "\f468"
}

.fa-braille:before {
    content: "\f2a1"
}

.fa-brain:before {
    content: "\f5dc"
}

.fa-bread-slice:before {
    content: "\f7ec"
}

.fa-briefcase:before {
    content: "\f0b1"
}

.fa-briefcase-medical:before {
    content: "\f469"
}

.fa-broadcast-tower:before {
    content: "\f519"
}

.fa-broom:before {
    content: "\f51a"
}

.fa-brush:before {
    content: "\f55d"
}

.fa-btc:before {
    content: "\f15a"
}

.fa-buffer:before {
    content: "\f837"
}

.fa-bug:before {
    content: "\f188"
}

.fa-building:before {
    content: "\f1ad"
}

.fa-bullhorn:before {
    content: "\f0a1"
}

.fa-bullseye:before {
    content: "\f140"
}

.fa-burn:before {
    content: "\f46a"
}

.fa-buromobelexperte:before {
    content: "\f37f"
}

.fa-bus:before {
    content: "\f207"
}

.fa-bus-alt:before {
    content: "\f55e"
}

.fa-business-time:before {
    content: "\f64a"
}

.fa-buysellads:before {
    content: "\f20d"
}

.fa-calculator:before {
    content: "\f1ec"
}

.fa-calendar:before {
    content: "\f133"
}

.fa-calendar-alt:before {
    content: "\f073"
}

.fa-calendar-check:before {
    content: "\f274"
}

.fa-calendar-day:before {
    content: "\f783"
}

.fa-calendar-minus:before {
    content: "\f272"
}

.fa-calendar-plus:before {
    content: "\f271"
}

.fa-calendar-times:before {
    content: "\f273"
}

.fa-calendar-week:before {
    content: "\f784"
}

.fa-camera:before {
    content: "\f030"
}

.fa-camera-retro:before {
    content: "\f083"
}

.fa-campground:before {
    content: "\f6bb"
}

.fa-canadian-maple-leaf:before {
    content: "\f785"
}

.fa-candy-cane:before {
    content: "\f786"
}

.fa-cannabis:before {
    content: "\f55f"
}

.fa-capsules:before {
    content: "\f46b"
}

.fa-car:before {
    content: "\f1b9"
}

.fa-car-alt:before {
    content: "\f5de"
}

.fa-car-battery:before {
    content: "\f5df"
}

.fa-car-crash:before {
    content: "\f5e1"
}

.fa-car-side:before {
    content: "\f5e4"
}

.fa-caret-down:before {
    content: "\f0d7"
}

.fa-caret-left:before {
    content: "\f0d9"
}

.fa-caret-right:before {
    content: "\f0da"
}

.fa-caret-square-down:before {
    content: "\f150"
}

.fa-caret-square-left:before {
    content: "\f191"
}

.fa-caret-square-right:before {
    content: "\f152"
}

.fa-caret-square-up:before {
    content: "\f151"
}

.fa-caret-up:before {
    content: "\f0d8"
}

.fa-carrot:before {
    content: "\f787"
}

.fa-cart-arrow-down:before {
    content: "\f218"
}

.fa-cart-plus:before {
    content: "\f217"
}

.fa-cash-register:before {
    content: "\f788"
}

.fa-cat:before {
    content: "\f6be"
}

.fa-cc-amazon-pay:before {
    content: "\f42d"
}

.fa-cc-amex:before {
    content: "\f1f3"
}

.fa-cc-apple-pay:before {
    content: "\f416"
}

.fa-cc-diners-club:before {
    content: "\f24c"
}

.fa-cc-discover:before {
    content: "\f1f2"
}

.fa-cc-jcb:before {
    content: "\f24b"
}

.fa-cc-mastercard:before {
    content: "\f1f1"
}

.fa-cc-paypal:before {
    content: "\f1f4"
}

.fa-cc-stripe:before {
    content: "\f1f5"
}

.fa-cc-visa:before {
    content: "\f1f0"
}

.fa-centercode:before {
    content: "\f380"
}

.fa-centos:before {
    content: "\f789"
}

.fa-certificate:before {
    content: "\f0a3"
}

.fa-chair:before {
    content: "\f6c0"
}

.fa-chalkboard:before {
    content: "\f51b"
}

.fa-chalkboard-teacher:before {
    content: "\f51c"
}

.fa-charging-station:before {
    content: "\f5e7"
}

.fa-chart-area:before {
    content: "\f1fe"
}

.fa-chart-bar:before {
    content: "\f080"
}

.fa-chart-line:before {
    content: "\f201"
}

.fa-chart-pie:before {
    content: "\f200"
}

.fa-check:before {
    content: "\f00c"
}

.fa-check-circle:before {
    content: "\f058"
}

.fa-check-double:before {
    content: "\f560"
}

.fa-check-square:before {
    content: "\f14a"
}

.fa-cheese:before {
    content: "\f7ef"
}

.fa-chess:before {
    content: "\f439"
}

.fa-chess-bishop:before {
    content: "\f43a"
}

.fa-chess-board:before {
    content: "\f43c"
}

.fa-chess-king:before {
    content: "\f43f"
}

.fa-chess-knight:before {
    content: "\f441"
}

.fa-chess-pawn:before {
    content: "\f443"
}

.fa-chess-queen:before {
    content: "\f445"
}

.fa-chess-rook:before {
    content: "\f447"
}

.fa-chevron-circle-down:before {
    content: "\f13a"
}

.fa-chevron-circle-left:before {
    content: "\f137"
}

.fa-chevron-circle-right:before {
    content: "\f138"
}

.fa-chevron-circle-up:before {
    content: "\f139"
}

.fa-chevron-down:before {
    content: "\f078"
}

.fa-chevron-left:before {
    content: "\f053"
}

.fa-chevron-right:before {
    content: "\f054"
}

.fa-chevron-up:before {
    content: "\f077"
}

.fa-child:before {
    content: "\f1ae"
}

.fa-chrome:before {
    content: "\f268"
}

.fa-chromecast:before {
    content: "\f838"
}

.fa-church:before {
    content: "\f51d"
}

.fa-circle:before {
    content: "\f111"
}

.fa-circle-notch:before {
    content: "\f1ce"
}

.fa-city:before {
    content: "\f64f"
}

.fa-clinic-medical:before {
    content: "\f7f2"
}

.fa-clipboard:before {
    content: "\f328"
}

.fa-clipboard-check:before {
    content: "\f46c"
}

.fa-clipboard-list:before {
    content: "\f46d"
}

.fa-clock:before {
    content: "\f017"
}

.fa-clone:before {
    content: "\f24d"
}

.fa-closed-captioning:before {
    content: "\f20a"
}

.fa-cloud:before {
    content: "\f0c2"
}

.fa-cloud-download-alt:before {
    content: "\f381"
}

.fa-cloud-meatball:before {
    content: "\f73b"
}

.fa-cloud-moon:before {
    content: "\f6c3"
}

.fa-cloud-moon-rain:before {
    content: "\f73c"
}

.fa-cloud-rain:before {
    content: "\f73d"
}

.fa-cloud-showers-heavy:before {
    content: "\f740"
}

.fa-cloud-sun:before {
    content: "\f6c4"
}

.fa-cloud-sun-rain:before {
    content: "\f743"
}

.fa-cloud-upload-alt:before {
    content: "\f382"
}

.fa-cloudscale:before {
    content: "\f383"
}

.fa-cloudsmith:before {
    content: "\f384"
}

.fa-cloudversify:before {
    content: "\f385"
}

.fa-cocktail:before {
    content: "\f561"
}

.fa-code:before {
    content: "\f121"
}

.fa-code-branch:before {
    content: "\f126"
}

.fa-codepen:before {
    content: "\f1cb"
}

.fa-codiepie:before {
    content: "\f284"
}

.fa-coffee:before {
    content: "\f0f4"
}

.fa-cog:before {
    content: "\f013"
}

.fa-cogs:before {
    content: "\f085"
}

.fa-coins:before {
    content: "\f51e"
}

.fa-columns:before {
    content: "\f0db"
}

.fa-comment:before {
    content: "\f075"
}

.fa-comment-alt:before {
    content: "\f27a"
}

.fa-comment-dollar:before {
    content: "\f651"
}

.fa-comment-dots:before {
    content: "\f4ad"
}

.fa-comment-medical:before {
    content: "\f7f5"
}

.fa-comment-slash:before {
    content: "\f4b3"
}

.fa-comments:before {
    content: "\f086"
}

.fa-comments-dollar:before {
    content: "\f653"
}

.fa-compact-disc:before {
    content: "\f51f"
}

.fa-compass:before {
    content: "\f14e"
}

.fa-compress:before {
    content: "\f066"
}

.fa-compress-arrows-alt:before {
    content: "\f78c"
}

.fa-concierge-bell:before {
    content: "\f562"
}

.fa-confluence:before {
    content: "\f78d"
}

.fa-connectdevelop:before {
    content: "\f20e"
}

.fa-contao:before {
    content: "\f26d"
}

.fa-cookie:before {
    content: "\f563"
}

.fa-cookie-bite:before {
    content: "\f564"
}

.fa-copy:before {
    content: "\f0c5"
}

.fa-copyright:before {
    content: "\f1f9"
}

.fa-cotton-bureau:before {
    content: "\f89e"
}

.fa-couch:before {
    content: "\f4b8"
}

.fa-cpanel:before {
    content: "\f388"
}

.fa-creative-commons:before {
    content: "\f25e"
}

.fa-creative-commons-by:before {
    content: "\f4e7"
}

.fa-creative-commons-nc:before {
    content: "\f4e8"
}

.fa-creative-commons-nc-eu:before {
    content: "\f4e9"
}

.fa-creative-commons-nc-jp:before {
    content: "\f4ea"
}

.fa-creative-commons-nd:before {
    content: "\f4eb"
}

.fa-creative-commons-pd:before {
    content: "\f4ec"
}

.fa-creative-commons-pd-alt:before {
    content: "\f4ed"
}

.fa-creative-commons-remix:before {
    content: "\f4ee"
}

.fa-creative-commons-sa:before {
    content: "\f4ef"
}

.fa-creative-commons-sampling:before {
    content: "\f4f0"
}

.fa-creative-commons-sampling-plus:before {
    content: "\f4f1"
}

.fa-creative-commons-share:before {
    content: "\f4f2"
}

.fa-creative-commons-zero:before {
    content: "\f4f3"
}

.fa-credit-card:before {
    content: "\f09d"
}

.fa-critical-role:before {
    content: "\f6c9"
}

.fa-crop:before {
    content: "\f125"
}

.fa-crop-alt:before {
    content: "\f565"
}

.fa-cross:before {
    content: "\f654"
}

.fa-crosshairs:before {
    content: "\f05b"
}

.fa-crow:before {
    content: "\f520"
}

.fa-crown:before {
    content: "\f521"
}

.fa-crutch:before {
    content: "\f7f7"
}

.fa-css3:before {
    content: "\f13c"
}

.fa-css3-alt:before {
    content: "\f38b"
}

.fa-cube:before {
    content: "\f1b2"
}

.fa-cubes:before {
    content: "\f1b3"
}

.fa-cut:before {
    content: "\f0c4"
}

.fa-cuttlefish:before {
    content: "\f38c"
}

.fa-d-and-d:before {
    content: "\f38d"
}

.fa-d-and-d-beyond:before {
    content: "\f6ca"
}

.fa-dashcube:before {
    content: "\f210"
}

.fa-database:before {
    content: "\f1c0"
}

.fa-deaf:before {
    content: "\f2a4"
}

.fa-delicious:before {
    content: "\f1a5"
}

.fa-democrat:before {
    content: "\f747"
}

.fa-deploydog:before {
    content: "\f38e"
}

.fa-deskpro:before {
    content: "\f38f"
}

.fa-desktop:before {
    content: "\f108"
}

.fa-dev:before {
    content: "\f6cc"
}

.fa-deviantart:before {
    content: "\f1bd"
}

.fa-dharmachakra:before {
    content: "\f655"
}

.fa-dhl:before {
    content: "\f790"
}

.fa-diagnoses:before {
    content: "\f470"
}

.fa-diaspora:before {
    content: "\f791"
}

.fa-dice:before {
    content: "\f522"
}

.fa-dice-d20:before {
    content: "\f6cf"
}

.fa-dice-d6:before {
    content: "\f6d1"
}

.fa-dice-five:before {
    content: "\f523"
}

.fa-dice-four:before {
    content: "\f524"
}

.fa-dice-one:before {
    content: "\f525"
}

.fa-dice-six:before {
    content: "\f526"
}

.fa-dice-three:before {
    content: "\f527"
}

.fa-dice-two:before {
    content: "\f528"
}

.fa-digg:before {
    content: "\f1a6"
}

.fa-digital-ocean:before {
    content: "\f391"
}

.fa-digital-tachograph:before {
    content: "\f566"
}

.fa-directions:before {
    content: "\f5eb"
}

.fa-discord:before {
    content: "\f392"
}

.fa-discourse:before {
    content: "\f393"
}

.fa-divide:before {
    content: "\f529"
}

.fa-dizzy:before {
    content: "\f567"
}

.fa-dna:before {
    content: "\f471"
}

.fa-dochub:before {
    content: "\f394"
}

.fa-docker:before {
    content: "\f395"
}

.fa-dog:before {
    content: "\f6d3"
}

.fa-dollar-sign:before {
    content: "\f155"
}

.fa-dolly:before {
    content: "\f472"
}

.fa-dolly-flatbed:before {
    content: "\f474"
}

.fa-donate:before {
    content: "\f4b9"
}

.fa-door-closed:before {
    content: "\f52a"
}

.fa-door-open:before {
    content: "\f52b"
}

.fa-dot-circle:before {
    content: "\f192"
}

.fa-dove:before {
    content: "\f4ba"
}

.fa-download:before {
    content: "\f019"
}

.fa-draft2digital:before {
    content: "\f396"
}

.fa-drafting-compass:before {
    content: "\f568"
}

.fa-dragon:before {
    content: "\f6d5"
}

.fa-draw-polygon:before {
    content: "\f5ee"
}

.fa-dribbble:before {
    content: "\f17d"
}

.fa-dribbble-square:before {
    content: "\f397"
}

.fa-dropbox:before {
    content: "\f16b"
}

.fa-drum:before {
    content: "\f569"
}

.fa-drum-steelpan:before {
    content: "\f56a"
}

.fa-drumstick-bite:before {
    content: "\f6d7"
}

.fa-drupal:before {
    content: "\f1a9"
}

.fa-dumbbell:before {
    content: "\f44b"
}

.fa-dumpster:before {
    content: "\f793"
}

.fa-dumpster-fire:before {
    content: "\f794"
}

.fa-dungeon:before {
    content: "\f6d9"
}

.fa-dyalog:before {
    content: "\f399"
}

.fa-earlybirds:before {
    content: "\f39a"
}

.fa-ebay:before {
    content: "\f4f4"
}

.fa-edge:before {
    content: "\f282"
}

.fa-edit:before {
    content: "\f044"
}

.fa-egg:before {
    content: "\f7fb"
}

.fa-eject:before {
    content: "\f052"
}

.fa-elementor:before {
    content: "\f430"
}

.fa-ellipsis-h:before {
    content: "\f141"
}

.fa-ellipsis-v:before {
    content: "\f142"
}

.fa-ello:before {
    content: "\f5f1"
}

.fa-ember:before {
    content: "\f423"
}

.fa-empire:before {
    content: "\f1d1"
}

.fa-envelope:before {
    content: "\f0e0"
}

.fa-envelope-open:before {
    content: "\f2b6"
}

.fa-envelope-open-text:before {
    content: "\f658"
}

.fa-envelope-square:before {
    content: "\f199"
}

.fa-envira:before {
    content: "\f299"
}

.fa-equals:before {
    content: "\f52c"
}

.fa-eraser:before {
    content: "\f12d"
}

.fa-erlang:before {
    content: "\f39d"
}

.fa-ethereum:before {
    content: "\f42e"
}

.fa-ethernet:before {
    content: "\f796"
}

.fa-etsy:before {
    content: "\f2d7"
}

.fa-euro-sign:before {
    content: "\f153"
}

.fa-evernote:before {
    content: "\f839"
}

.fa-exchange-alt:before {
    content: "\f362"
}

.fa-exclamation:before {
    content: "\f12a"
}

.fa-exclamation-circle:before {
    content: "\f06a"
}

.fa-exclamation-triangle:before {
    content: "\f071"
}

.fa-expand:before {
    content: "\f065"
}

.fa-expand-arrows-alt:before {
    content: "\f31e"
}

.fa-expeditedssl:before {
    content: "\f23e"
}

.fa-external-link-alt:before {
    content: "\f35d"
}

.fa-external-link-square-alt:before {
    content: "\f360"
}

.fa-eye:before {
    content: "\f06e"
}

.fa-eye-dropper:before {
    content: "\f1fb"
}

.fa-eye-slash:before {
    content: "\f070"
}

.fa-facebook:before {
    content: "\f09a"
}

.fa-facebook-f:before {
    content: "\f39e"
}

.fa-facebook-messenger:before {
    content: "\f39f"
}

.fa-facebook-square:before {
    content: "\f082"
}

.fa-fan:before {
    content: "\f863"
}

.fa-fantasy-flight-games:before {
    content: "\f6dc"
}

.fa-fast-backward:before {
    content: "\f049"
}

.fa-fast-forward:before {
    content: "\f050"
}

.fa-fax:before {
    content: "\f1ac"
}

.fa-feather:before {
    content: "\f52d"
}

.fa-feather-alt:before {
    content: "\f56b"
}

.fa-fedex:before {
    content: "\f797"
}

.fa-fedora:before {
    content: "\f798"
}

.fa-female:before {
    content: "\f182"
}

.fa-fighter-jet:before {
    content: "\f0fb"
}

.fa-figma:before {
    content: "\f799"
}

.fa-file:before {
    content: "\f15b"
}

.fa-file-alt:before {
    content: "\f15c"
}

.fa-file-archive:before {
    content: "\f1c6"
}

.fa-file-audio:before {
    content: "\f1c7"
}

.fa-file-code:before {
    content: "\f1c9"
}

.fa-file-contract:before {
    content: "\f56c"
}

.fa-file-csv:before {
    content: "\f6dd"
}

.fa-file-download:before {
    content: "\f56d"
}

.fa-file-excel:before {
    content: "\f1c3"
}

.fa-file-export:before {
    content: "\f56e"
}

.fa-file-image:before {
    content: "\f1c5"
}

.fa-file-import:before {
    content: "\f56f"
}

.fa-file-invoice:before {
    content: "\f570"
}

.fa-file-invoice-dollar:before {
    content: "\f571"
}

.fa-file-medical:before {
    content: "\f477"
}

.fa-file-medical-alt:before {
    content: "\f478"
}

.fa-file-pdf:before {
    content: "\f1c1"
}

.fa-file-powerpoint:before {
    content: "\f1c4"
}

.fa-file-prescription:before {
    content: "\f572"
}

.fa-file-signature:before {
    content: "\f573"
}

.fa-file-upload:before {
    content: "\f574"
}

.fa-file-video:before {
    content: "\f1c8"
}

.fa-file-word:before {
    content: "\f1c2"
}

.fa-fill:before {
    content: "\f575"
}

.fa-fill-drip:before {
    content: "\f576"
}

.fa-film:before {
    content: "\f008"
}

.fa-filter:before {
    content: "\f0b0"
}

.fa-fingerprint:before {
    content: "\f577"
}

.fa-fire:before {
    content: "\f06d"
}

.fa-fire-alt:before {
    content: "\f7e4"
}

.fa-fire-extinguisher:before {
    content: "\f134"
}

.fa-firefox:before {
    content: "\f269"
}

.fa-first-aid:before {
    content: "\f479"
}

.fa-first-order:before {
    content: "\f2b0"
}

.fa-first-order-alt:before {
    content: "\f50a"
}

.fa-firstdraft:before {
    content: "\f3a1"
}

.fa-fish:before {
    content: "\f578"
}

.fa-fist-raised:before {
    content: "\f6de"
}

.fa-flag:before {
    content: "\f024"
}

.fa-flag-checkered:before {
    content: "\f11e"
}

.fa-flag-usa:before {
    content: "\f74d"
}

.fa-flask:before {
    content: "\f0c3"
}

.fa-flickr:before {
    content: "\f16e"
}

.fa-flipboard:before {
    content: "\f44d"
}

.fa-flushed:before {
    content: "\f579"
}

.fa-fly:before {
    content: "\f417"
}

.fa-folder:before {
    content: "\f07b"
}

.fa-folder-minus:before {
    content: "\f65d"
}

.fa-folder-open:before {
    content: "\f07c"
}

.fa-folder-plus:before {
    content: "\f65e"
}

.fa-font:before {
    content: "\f031"
}

.fa-font-awesome:before {
    content: "\f2b4"
}

.fa-font-awesome-alt:before {
    content: "\f35c"
}

.fa-font-awesome-flag:before {
    content: "\f425"
}

.fa-font-awesome-logo-full:before {
    content: "\f4e6"
}

.fa-fonticons:before {
    content: "\f280"
}

.fa-fonticons-fi:before {
    content: "\f3a2"
}

.fa-football-ball:before {
    content: "\f44e"
}

.fa-fort-awesome:before {
    content: "\f286"
}

.fa-fort-awesome-alt:before {
    content: "\f3a3"
}

.fa-forumbee:before {
    content: "\f211"
}

.fa-forward:before {
    content: "\f04e"
}

.fa-foursquare:before {
    content: "\f180"
}

.fa-free-code-camp:before {
    content: "\f2c5"
}

.fa-freebsd:before {
    content: "\f3a4"
}

.fa-frog:before {
    content: "\f52e"
}

.fa-frown:before {
    content: "\f119"
}

.fa-frown-open:before {
    content: "\f57a"
}

.fa-fulcrum:before {
    content: "\f50b"
}

.fa-funnel-dollar:before {
    content: "\f662"
}

.fa-futbol:before {
    content: "\f1e3"
}

.fa-galactic-republic:before {
    content: "\f50c"
}

.fa-galactic-senate:before {
    content: "\f50d"
}

.fa-gamepad:before {
    content: "\f11b"
}

.fa-gas-pump:before {
    content: "\f52f"
}

.fa-gavel:before {
    content: "\f0e3"
}

.fa-gem:before {
    content: "\f3a5"
}

.fa-genderless:before {
    content: "\f22d"
}

.fa-get-pocket:before {
    content: "\f265"
}

.fa-gg:before {
    content: "\f260"
}

.fa-gg-circle:before {
    content: "\f261"
}

.fa-ghost:before {
    content: "\f6e2"
}

.fa-gift:before {
    content: "\f06b"
}

.fa-gifts:before {
    content: "\f79c"
}

.fa-git:before {
    content: "\f1d3"
}

.fa-git-alt:before {
    content: "\f841"
}

.fa-git-square:before {
    content: "\f1d2"
}

.fa-github:before {
    content: "\f09b"
}

.fa-github-alt:before {
    content: "\f113"
}

.fa-github-square:before {
    content: "\f092"
}

.fa-gitkraken:before {
    content: "\f3a6"
}

.fa-gitlab:before {
    content: "\f296"
}

.fa-gitter:before {
    content: "\f426"
}

.fa-glass-cheers:before {
    content: "\f79f"
}

.fa-glass-martini:before {
    content: "\f000"
}

.fa-glass-martini-alt:before {
    content: "\f57b"
}

.fa-glass-whiskey:before {
    content: "\f7a0"
}

.fa-glasses:before {
    content: "\f530"
}

.fa-glide:before {
    content: "\f2a5"
}

.fa-glide-g:before {
    content: "\f2a6"
}

.fa-globe:before {
    content: "\f0ac"
}

.fa-globe-africa:before {
    content: "\f57c"
}

.fa-globe-americas:before {
    content: "\f57d"
}

.fa-globe-asia:before {
    content: "\f57e"
}

.fa-globe-europe:before {
    content: "\f7a2"
}

.fa-gofore:before {
    content: "\f3a7"
}

.fa-golf-ball:before {
    content: "\f450"
}

.fa-goodreads:before {
    content: "\f3a8"
}

.fa-goodreads-g:before {
    content: "\f3a9"
}

.fa-google:before {
    content: "\f1a0"
}

.fa-google-drive:before {
    content: "\f3aa"
}

.fa-google-play:before {
    content: "\f3ab"
}

.fa-google-plus:before {
    content: "\f2b3"
}

.fa-google-plus-g:before {
    content: "\f0d5"
}

.fa-google-plus-square:before {
    content: "\f0d4"
}

.fa-google-wallet:before {
    content: "\f1ee"
}

.fa-gopuram:before {
    content: "\f664"
}

.fa-graduation-cap:before {
    content: "\f19d"
}

.fa-gratipay:before {
    content: "\f184"
}

.fa-grav:before {
    content: "\f2d6"
}

.fa-greater-than:before {
    content: "\f531"
}

.fa-greater-than-equal:before {
    content: "\f532"
}

.fa-grimace:before {
    content: "\f57f"
}

.fa-grin:before {
    content: "\f580"
}

.fa-grin-alt:before {
    content: "\f581"
}

.fa-grin-beam:before {
    content: "\f582"
}

.fa-grin-beam-sweat:before {
    content: "\f583"
}

.fa-grin-hearts:before {
    content: "\f584"
}

.fa-grin-squint:before {
    content: "\f585"
}

.fa-grin-squint-tears:before {
    content: "\f586"
}

.fa-grin-stars:before {
    content: "\f587"
}

.fa-grin-tears:before {
    content: "\f588"
}

.fa-grin-tongue:before {
    content: "\f589"
}

.fa-grin-tongue-squint:before {
    content: "\f58a"
}

.fa-grin-tongue-wink:before {
    content: "\f58b"
}

.fa-grin-wink:before {
    content: "\f58c"
}

.fa-grip-horizontal:before {
    content: "\f58d"
}

.fa-grip-lines:before {
    content: "\f7a4"
}

.fa-grip-lines-vertical:before {
    content: "\f7a5"
}

.fa-grip-vertical:before {
    content: "\f58e"
}

.fa-gripfire:before {
    content: "\f3ac"
}

.fa-grunt:before {
    content: "\f3ad"
}

.fa-guitar:before {
    content: "\f7a6"
}

.fa-gulp:before {
    content: "\f3ae"
}

.fa-h-square:before {
    content: "\f0fd"
}

.fa-hacker-news:before {
    content: "\f1d4"
}

.fa-hacker-news-square:before {
    content: "\f3af"
}

.fa-hackerrank:before {
    content: "\f5f7"
}

.fa-hamburger:before {
    content: "\f805"
}

.fa-hammer:before {
    content: "\f6e3"
}

.fa-hamsa:before {
    content: "\f665"
}

.fa-hand-holding:before {
    content: "\f4bd"
}

.fa-hand-holding-heart:before {
    content: "\f4be"
}

.fa-hand-holding-usd:before {
    content: "\f4c0"
}

.fa-hand-lizard:before {
    content: "\f258"
}

.fa-hand-middle-finger:before {
    content: "\f806"
}

.fa-hand-paper:before {
    content: "\f256"
}

.fa-hand-peace:before {
    content: "\f25b"
}

.fa-hand-point-down:before {
    content: "\f0a7"
}

.fa-hand-point-left:before {
    content: "\f0a5"
}

.fa-hand-point-right:before {
    content: "\f0a4"
}

.fa-hand-point-up:before {
    content: "\f0a6"
}

.fa-hand-pointer:before {
    content: "\f25a"
}

.fa-hand-rock:before {
    content: "\f255"
}

.fa-hand-scissors:before {
    content: "\f257"
}

.fa-hand-spock:before {
    content: "\f259"
}

.fa-hands:before {
    content: "\f4c2"
}

.fa-hands-helping:before {
    content: "\f4c4"
}

.fa-handshake:before {
    content: "\f2b5"
}

.fa-hanukiah:before {
    content: "\f6e6"
}

.fa-hard-hat:before {
    content: "\f807"
}

.fa-hashtag:before {
    content: "\f292"
}

.fa-hat-wizard:before {
    content: "\f6e8"
}

.fa-haykal:before {
    content: "\f666"
}

.fa-hdd:before {
    content: "\f0a0"
}

.fa-heading:before {
    content: "\f1dc"
}

.fa-headphones:before {
    content: "\f025"
}

.fa-headphones-alt:before {
    content: "\f58f"
}

.fa-headset:before {
    content: "\f590"
}

.fa-heart:before {
    content: "\f004"
}

.fa-heart-broken:before {
    content: "\f7a9"
}

.fa-heartbeat:before {
    content: "\f21e"
}

.fa-helicopter:before {
    content: "\f533"
}

.fa-highlighter:before {
    content: "\f591"
}

.fa-hiking:before {
    content: "\f6ec"
}

.fa-hippo:before {
    content: "\f6ed"
}

.fa-hips:before {
    content: "\f452"
}

.fa-hire-a-helper:before {
    content: "\f3b0"
}

.fa-history:before {
    content: "\f1da"
}

.fa-hockey-puck:before {
    content: "\f453"
}

.fa-holly-berry:before {
    content: "\f7aa"
}

.fa-home:before {
    content: "\f015"
}

.fa-hooli:before {
    content: "\f427"
}

.fa-hornbill:before {
    content: "\f592"
}

.fa-horse:before {
    content: "\f6f0"
}

.fa-horse-head:before {
    content: "\f7ab"
}

.fa-hospital:before {
    content: "\f0f8"
}

.fa-hospital-alt:before {
    content: "\f47d"
}

.fa-hospital-symbol:before {
    content: "\f47e"
}

.fa-hot-tub:before {
    content: "\f593"
}

.fa-hotdog:before {
    content: "\f80f"
}

.fa-hotel:before {
    content: "\f594"
}

.fa-hotjar:before {
    content: "\f3b1"
}

.fa-hourglass:before {
    content: "\f254"
}

.fa-hourglass-end:before {
    content: "\f253"
}

.fa-hourglass-half:before {
    content: "\f252"
}

.fa-hourglass-start:before {
    content: "\f251"
}

.fa-house-damage:before {
    content: "\f6f1"
}

.fa-houzz:before {
    content: "\f27c"
}

.fa-hryvnia:before {
    content: "\f6f2"
}

.fa-html5:before {
    content: "\f13b"
}

.fa-hubspot:before {
    content: "\f3b2"
}

.fa-i-cursor:before {
    content: "\f246"
}

.fa-ice-cream:before {
    content: "\f810"
}

.fa-icicles:before {
    content: "\f7ad"
}

.fa-icons:before {
    content: "\f86d"
}

.fa-id-badge:before {
    content: "\f2c1"
}

.fa-id-card:before {
    content: "\f2c2"
}

.fa-id-card-alt:before {
    content: "\f47f"
}

.fa-igloo:before {
    content: "\f7ae"
}

.fa-image:before {
    content: "\f03e"
}

.fa-images:before {
    content: "\f302"
}

.fa-imdb:before {
    content: "\f2d8"
}

.fa-inbox:before {
    content: "\f01c"
}

.fa-indent:before {
    content: "\f03c"
}

.fa-industry:before {
    content: "\f275"
}

.fa-infinity:before {
    content: "\f534"
}

.fa-info:before {
    content: "\f129"
}

.fa-info-circle:before {
    content: "\f05a"
}

.fa-instagram:before {
    content: "\f16d"
}

.fa-intercom:before {
    content: "\f7af"
}

.fa-internet-explorer:before {
    content: "\f26b"
}

.fa-invision:before {
    content: "\f7b0"
}

.fa-ioxhost:before {
    content: "\f208"
}

.fa-italic:before {
    content: "\f033"
}

.fa-itch-io:before {
    content: "\f83a"
}

.fa-itunes:before {
    content: "\f3b4"
}

.fa-itunes-note:before {
    content: "\f3b5"
}

.fa-java:before {
    content: "\f4e4"
}

.fa-jedi:before {
    content: "\f669"
}

.fa-jedi-order:before {
    content: "\f50e"
}

.fa-jenkins:before {
    content: "\f3b6"
}

.fa-jira:before {
    content: "\f7b1"
}

.fa-joget:before {
    content: "\f3b7"
}

.fa-joint:before {
    content: "\f595"
}

.fa-joomla:before {
    content: "\f1aa"
}

.fa-journal-whills:before {
    content: "\f66a"
}

.fa-js:before {
    content: "\f3b8"
}

.fa-js-square:before {
    content: "\f3b9"
}

.fa-jsfiddle:before {
    content: "\f1cc"
}

.fa-kaaba:before {
    content: "\f66b"
}

.fa-kaggle:before {
    content: "\f5fa"
}

.fa-key:before {
    content: "\f084"
}

.fa-keybase:before {
    content: "\f4f5"
}

.fa-keyboard:before {
    content: "\f11c"
}

.fa-keycdn:before {
    content: "\f3ba"
}

.fa-khanda:before {
    content: "\f66d"
}

.fa-kickstarter:before {
    content: "\f3bb"
}

.fa-kickstarter-k:before {
    content: "\f3bc"
}

.fa-kiss:before {
    content: "\f596"
}

.fa-kiss-beam:before {
    content: "\f597"
}

.fa-kiss-wink-heart:before {
    content: "\f598"
}

.fa-kiwi-bird:before {
    content: "\f535"
}

.fa-korvue:before {
    content: "\f42f"
}

.fa-landmark:before {
    content: "\f66f"
}

.fa-language:before {
    content: "\f1ab"
}

.fa-laptop:before {
    content: "\f109"
}

.fa-laptop-code:before {
    content: "\f5fc"
}

.fa-laptop-medical:before {
    content: "\f812"
}

.fa-laravel:before {
    content: "\f3bd"
}

.fa-lastfm:before {
    content: "\f202"
}

.fa-lastfm-square:before {
    content: "\f203"
}

.fa-laugh:before {
    content: "\f599"
}

.fa-laugh-beam:before {
    content: "\f59a"
}

.fa-laugh-squint:before {
    content: "\f59b"
}

.fa-laugh-wink:before {
    content: "\f59c"
}

.fa-layer-group:before {
    content: "\f5fd"
}

.fa-leaf:before {
    content: "\f06c"
}

.fa-leanpub:before {
    content: "\f212"
}

.fa-lemon:before {
    content: "\f094"
}

.fa-less:before {
    content: "\f41d"
}

.fa-less-than:before {
    content: "\f536"
}

.fa-less-than-equal:before {
    content: "\f537"
}

.fa-level-down-alt:before {
    content: "\f3be"
}

.fa-level-up-alt:before {
    content: "\f3bf"
}

.fa-life-ring:before {
    content: "\f1cd"
}

.fa-lightbulb:before {
    content: "\f0eb"
}

.fa-line:before {
    content: "\f3c0"
}

.fa-link:before {
    content: "\f0c1"
}

.fa-linkedin:before {
    content: "\f08c"
}

.fa-linkedin-in:before {
    content: "\f0e1"
}

.fa-linode:before {
    content: "\f2b8"
}

.fa-linux:before {
    content: "\f17c"
}

.fa-lira-sign:before {
    content: "\f195"
}

.fa-list:before {
    content: "\f03a"
}

.fa-list-alt:before {
    content: "\f022"
}

.fa-list-ol:before {
    content: "\f0cb"
}

.fa-list-ul:before {
    content: "\f0ca"
}

.fa-location-arrow:before {
    content: "\f124"
}

.fa-lock:before {
    content: "\f023"
}

.fa-lock-open:before {
    content: "\f3c1"
}

.fa-long-arrow-alt-down:before {
    content: "\f309"
}

.fa-long-arrow-alt-left:before {
    content: "\f30a"
}

.fa-long-arrow-alt-right:before {
    content: "\f30b"
}

.fa-long-arrow-alt-up:before {
    content: "\f30c"
}

.fa-low-vision:before {
    content: "\f2a8"
}

.fa-luggage-cart:before {
    content: "\f59d"
}

.fa-lyft:before {
    content: "\f3c3"
}

.fa-magento:before {
    content: "\f3c4"
}

.fa-magic:before {
    content: "\f0d0"
}

.fa-magnet:before {
    content: "\f076"
}

.fa-mail-bulk:before {
    content: "\f674"
}

.fa-mailchimp:before {
    content: "\f59e"
}

.fa-male:before {
    content: "\f183"
}

.fa-mandalorian:before {
    content: "\f50f"
}

.fa-map:before {
    content: "\f279"
}

.fa-map-marked:before {
    content: "\f59f"
}

.fa-map-marked-alt:before {
    content: "\f5a0"
}

.fa-map-marker:before {
    content: "\f041"
}

.fa-map-marker-alt:before {
    content: "\f3c5"
}

.fa-map-pin:before {
    content: "\f276"
}

.fa-map-signs:before {
    content: "\f277"
}

.fa-markdown:before {
    content: "\f60f"
}

.fa-marker:before {
    content: "\f5a1"
}

.fa-mars:before {
    content: "\f222"
}

.fa-mars-double:before {
    content: "\f227"
}

.fa-mars-stroke:before {
    content: "\f229"
}

.fa-mars-stroke-h:before {
    content: "\f22b"
}

.fa-mars-stroke-v:before {
    content: "\f22a"
}

.fa-mask:before {
    content: "\f6fa"
}

.fa-mastodon:before {
    content: "\f4f6"
}

.fa-maxcdn:before {
    content: "\f136"
}

.fa-medal:before {
    content: "\f5a2"
}

.fa-medapps:before {
    content: "\f3c6"
}

.fa-medium:before {
    content: "\f23a"
}

.fa-medium-m:before {
    content: "\f3c7"
}

.fa-medkit:before {
    content: "\f0fa"
}

.fa-medrt:before {
    content: "\f3c8"
}

.fa-meetup:before {
    content: "\f2e0"
}

.fa-megaport:before {
    content: "\f5a3"
}

.fa-meh:before {
    content: "\f11a"
}

.fa-meh-blank:before {
    content: "\f5a4"
}

.fa-meh-rolling-eyes:before {
    content: "\f5a5"
}

.fa-memory:before {
    content: "\f538"
}

.fa-mendeley:before {
    content: "\f7b3"
}

.fa-menorah:before {
    content: "\f676"
}

.fa-mercury:before {
    content: "\f223"
}

.fa-meteor:before {
    content: "\f753"
}

.fa-microchip:before {
    content: "\f2db"
}

.fa-microphone:before {
    content: "\f130"
}

.fa-microphone-alt:before {
    content: "\f3c9"
}

.fa-microphone-alt-slash:before {
    content: "\f539"
}

.fa-microphone-slash:before {
    content: "\f131"
}

.fa-microscope:before {
    content: "\f610"
}

.fa-microsoft:before {
    content: "\f3ca"
}

.fa-minus:before {
    content: "\f068"
}

.fa-minus-circle:before {
    content: "\f056"
}

.fa-minus-square:before {
    content: "\f146"
}

.fa-mitten:before {
    content: "\f7b5"
}

.fa-mix:before {
    content: "\f3cb"
}

.fa-mixcloud:before {
    content: "\f289"
}

.fa-mizuni:before {
    content: "\f3cc"
}

.fa-mobile:before {
    content: "\f10b"
}

.fa-mobile-alt:before {
    content: "\f3cd"
}

.fa-modx:before {
    content: "\f285"
}

.fa-monero:before {
    content: "\f3d0"
}

.fa-money-bill:before {
    content: "\f0d6"
}

.fa-money-bill-alt:before {
    content: "\f3d1"
}

.fa-money-bill-wave:before {
    content: "\f53a"
}

.fa-money-bill-wave-alt:before {
    content: "\f53b"
}

.fa-money-check:before {
    content: "\f53c"
}

.fa-money-check-alt:before {
    content: "\f53d"
}

.fa-monument:before {
    content: "\f5a6"
}

.fa-moon:before {
    content: "\f186"
}

.fa-mortar-pestle:before {
    content: "\f5a7"
}

.fa-mosque:before {
    content: "\f678"
}

.fa-motorcycle:before {
    content: "\f21c"
}

.fa-mountain:before {
    content: "\f6fc"
}

.fa-mouse-pointer:before {
    content: "\f245"
}

.fa-mug-hot:before {
    content: "\f7b6"
}

.fa-music:before {
    content: "\f001"
}

.fa-napster:before {
    content: "\f3d2"
}

.fa-neos:before {
    content: "\f612"
}

.fa-network-wired:before {
    content: "\f6ff"
}

.fa-neuter:before {
    content: "\f22c"
}

.fa-newspaper:before {
    content: "\f1ea"
}

.fa-nimblr:before {
    content: "\f5a8"
}

.fa-node:before {
    content: "\f419"
}

.fa-node-js:before {
    content: "\f3d3"
}

.fa-not-equal:before {
    content: "\f53e"
}

.fa-notes-medical:before {
    content: "\f481"
}

.fa-npm:before {
    content: "\f3d4"
}

.fa-ns8:before {
    content: "\f3d5"
}

.fa-nutritionix:before {
    content: "\f3d6"
}

.fa-object-group:before {
    content: "\f247"
}

.fa-object-ungroup:before {
    content: "\f248"
}

.fa-odnoklassniki:before {
    content: "\f263"
}

.fa-odnoklassniki-square:before {
    content: "\f264"
}

.fa-oil-can:before {
    content: "\f613"
}

.fa-old-republic:before {
    content: "\f510"
}

.fa-om:before {
    content: "\f679"
}

.fa-opencart:before {
    content: "\f23d"
}

.fa-openid:before {
    content: "\f19b"
}

.fa-opera:before {
    content: "\f26a"
}

.fa-optin-monster:before {
    content: "\f23c"
}

.fa-osi:before {
    content: "\f41a"
}

.fa-otter:before {
    content: "\f700"
}

.fa-outdent:before {
    content: "\f03b"
}

.fa-page4:before {
    content: "\f3d7"
}

.fa-pagelines:before {
    content: "\f18c"
}

.fa-pager:before {
    content: "\f815"
}

.fa-paint-brush:before {
    content: "\f1fc"
}

.fa-paint-roller:before {
    content: "\f5aa"
}

.fa-palette:before {
    content: "\f53f"
}

.fa-palfed:before {
    content: "\f3d8"
}

.fa-pallet:before {
    content: "\f482"
}

.fa-paper-plane:before {
    content: "\f1d8"
}

.fa-paperclip:before {
    content: "\f0c6"
}

.fa-parachute-box:before {
    content: "\f4cd"
}

.fa-paragraph:before {
    content: "\f1dd"
}

.fa-parking:before {
    content: "\f540"
}

.fa-passport:before {
    content: "\f5ab"
}

.fa-pastafarianism:before {
    content: "\f67b"
}

.fa-paste:before {
    content: "\f0ea"
}

.fa-patreon:before {
    content: "\f3d9"
}

.fa-pause:before {
    content: "\f04c"
}

.fa-pause-circle:before {
    content: "\f28b"
}

.fa-paw:before {
    content: "\f1b0"
}

.fa-paypal:before {
    content: "\f1ed"
}

.fa-peace:before {
    content: "\f67c"
}

.fa-pen:before {
    content: "\f304"
}

.fa-pen-alt:before {
    content: "\f305"
}

.fa-pen-fancy:before {
    content: "\f5ac"
}

.fa-pen-nib:before {
    content: "\f5ad"
}

.fa-pen-square:before {
    content: "\f14b"
}

.fa-pencil-alt:before {
    content: "\f303"
}

.fa-pencil-ruler:before {
    content: "\f5ae"
}

.fa-penny-arcade:before {
    content: "\f704"
}

.fa-people-carry:before {
    content: "\f4ce"
}

.fa-pepper-hot:before {
    content: "\f816"
}

.fa-percent:before {
    content: "\f295"
}

.fa-percentage:before {
    content: "\f541"
}

.fa-periscope:before {
    content: "\f3da"
}

.fa-person-booth:before {
    content: "\f756"
}

.fa-phabricator:before {
    content: "\f3db"
}

.fa-phoenix-framework:before {
    content: "\f3dc"
}

.fa-phoenix-squadron:before {
    content: "\f511"
}

.fa-phone:before {
    content: "\f095"
}

.fa-phone-alt:before {
    content: "\f879"
}

.fa-phone-slash:before {
    content: "\f3dd"
}

.fa-phone-square:before {
    content: "\f098"
}

.fa-phone-square-alt:before {
    content: "\f87b"
}

.fa-phone-volume:before {
    content: "\f2a0"
}

.fa-photo-video:before {
    content: "\f87c"
}

.fa-php:before {
    content: "\f457"
}

.fa-pied-piper:before {
    content: "\f2ae"
}

.fa-pied-piper-alt:before {
    content: "\f1a8"
}

.fa-pied-piper-hat:before {
    content: "\f4e5"
}

.fa-pied-piper-pp:before {
    content: "\f1a7"
}

.fa-piggy-bank:before {
    content: "\f4d3"
}

.fa-pills:before {
    content: "\f484"
}

.fa-pinterest:before {
    content: "\f0d2"
}

.fa-pinterest-p:before {
    content: "\f231"
}

.fa-pinterest-square:before {
    content: "\f0d3"
}

.fa-pizza-slice:before {
    content: "\f818"
}

.fa-place-of-worship:before {
    content: "\f67f"
}

.fa-plane:before {
    content: "\f072"
}

.fa-plane-arrival:before {
    content: "\f5af"
}

.fa-plane-departure:before {
    content: "\f5b0"
}

.fa-play:before {
    content: "\f04b"
}

.fa-play-circle:before {
    content: "\f144"
}

.fa-playstation:before {
    content: "\f3df"
}

.fa-plug:before {
    content: "\f1e6"
}

.fa-plus:before {
    content: "\f067"
}

.fa-plus-circle:before {
    content: "\f055"
}

.fa-plus-square:before {
    content: "\f0fe"
}

.fa-podcast:before {
    content: "\f2ce"
}

.fa-poll:before {
    content: "\f681"
}

.fa-poll-h:before {
    content: "\f682"
}

.fa-poo:before {
    content: "\f2fe"
}

.fa-poo-storm:before {
    content: "\f75a"
}

.fa-poop:before {
    content: "\f619"
}

.fa-portrait:before {
    content: "\f3e0"
}

.fa-pound-sign:before {
    content: "\f154"
}

.fa-power-off:before {
    content: "\f011"
}

.fa-pray:before {
    content: "\f683"
}

.fa-praying-hands:before {
    content: "\f684"
}

.fa-prescription:before {
    content: "\f5b1"
}

.fa-prescription-bottle:before {
    content: "\f485"
}

.fa-prescription-bottle-alt:before {
    content: "\f486"
}

.fa-print:before {
    content: "\f02f"
}

.fa-procedures:before {
    content: "\f487"
}

.fa-product-hunt:before {
    content: "\f288"
}

.fa-project-diagram:before {
    content: "\f542"
}

.fa-pushed:before {
    content: "\f3e1"
}

.fa-puzzle-piece:before {
    content: "\f12e"
}

.fa-python:before {
    content: "\f3e2"
}

.fa-qq:before {
    content: "\f1d6"
}

.fa-qrcode:before {
    content: "\f029"
}

.fa-question:before {
    content: "\f128"
}

.fa-question-circle:before {
    content: "\f059"
}

.fa-quidditch:before {
    content: "\f458"
}

.fa-quinscape:before {
    content: "\f459"
}

.fa-quora:before {
    content: "\f2c4"
}

.fa-quote-left:before {
    content: "\f10d"
}

.fa-quote-right:before {
    content: "\f10e"
}

.fa-quran:before {
    content: "\f687"
}

.fa-r-project:before {
    content: "\f4f7"
}

.fa-radiation:before {
    content: "\f7b9"
}

.fa-radiation-alt:before {
    content: "\f7ba"
}

.fa-rainbow:before {
    content: "\f75b"
}

.fa-random:before {
    content: "\f074"
}

.fa-raspberry-pi:before {
    content: "\f7bb"
}

.fa-ravelry:before {
    content: "\f2d9"
}

.fa-react:before {
    content: "\f41b"
}

.fa-reacteurope:before {
    content: "\f75d"
}

.fa-readme:before {
    content: "\f4d5"
}

.fa-rebel:before {
    content: "\f1d0"
}

.fa-receipt:before {
    content: "\f543"
}

.fa-recycle:before {
    content: "\f1b8"
}

.fa-red-river:before {
    content: "\f3e3"
}

.fa-reddit:before {
    content: "\f1a1"
}

.fa-reddit-alien:before {
    content: "\f281"
}

.fa-reddit-square:before {
    content: "\f1a2"
}

.fa-redhat:before {
    content: "\f7bc"
}

.fa-redo:before {
    content: "\f01e"
}

.fa-redo-alt:before {
    content: "\f2f9"
}

.fa-registered:before {
    content: "\f25d"
}

.fa-remove-format:before {
    content: "\f87d"
}

.fa-renren:before {
    content: "\f18b"
}

.fa-reply:before {
    content: "\f3e5"
}

.fa-reply-all:before {
    content: "\f122"
}

.fa-replyd:before {
    content: "\f3e6"
}

.fa-republican:before {
    content: "\f75e"
}

.fa-researchgate:before {
    content: "\f4f8"
}

.fa-resolving:before {
    content: "\f3e7"
}

.fa-restroom:before {
    content: "\f7bd"
}

.fa-retweet:before {
    content: "\f079"
}

.fa-rev:before {
    content: "\f5b2"
}

.fa-ribbon:before {
    content: "\f4d6"
}

.fa-ring:before {
    content: "\f70b"
}

.fa-road:before {
    content: "\f018"
}

.fa-robot:before {
    content: "\f544"
}

.fa-rocket:before {
    content: "\f135"
}

.fa-rocketchat:before {
    content: "\f3e8"
}

.fa-rockrms:before {
    content: "\f3e9"
}

.fa-route:before {
    content: "\f4d7"
}

.fa-rss:before {
    content: "\f09e"
}

.fa-rss-square:before {
    content: "\f143"
}

.fa-ruble-sign:before {
    content: "\f158"
}

.fa-ruler:before {
    content: "\f545"
}

.fa-ruler-combined:before {
    content: "\f546"
}

.fa-ruler-horizontal:before {
    content: "\f547"
}

.fa-ruler-vertical:before {
    content: "\f548"
}

.fa-running:before {
    content: "\f70c"
}

.fa-rupee-sign:before {
    content: "\f156"
}

.fa-sad-cry:before {
    content: "\f5b3"
}

.fa-sad-tear:before {
    content: "\f5b4"
}

.fa-safari:before {
    content: "\f267"
}

.fa-salesforce:before {
    content: "\f83b"
}

.fa-sass:before {
    content: "\f41e"
}

.fa-satellite:before {
    content: "\f7bf"
}

.fa-satellite-dish:before {
    content: "\f7c0"
}

.fa-save:before {
    content: "\f0c7"
}

.fa-schlix:before {
    content: "\f3ea"
}

.fa-school:before {
    content: "\f549"
}

.fa-screwdriver:before {
    content: "\f54a"
}

.fa-scribd:before {
    content: "\f28a"
}

.fa-scroll:before {
    content: "\f70e"
}

.fa-sd-card:before {
    content: "\f7c2"
}

.fa-search:before {
    content: "\f002"
}

.fa-search-dollar:before {
    content: "\f688"
}

.fa-search-location:before {
    content: "\f689"
}

.fa-search-minus:before {
    content: "\f010"
}

.fa-search-plus:before {
    content: "\f00e"
}

.fa-searchengin:before {
    content: "\f3eb"
}

.fa-seedling:before {
    content: "\f4d8"
}

.fa-sellcast:before {
    content: "\f2da"
}

.fa-sellsy:before {
    content: "\f213"
}

.fa-server:before {
    content: "\f233"
}

.fa-servicestack:before {
    content: "\f3ec"
}

.fa-shapes:before {
    content: "\f61f"
}

.fa-share:before {
    content: "\f064"
}

.fa-share-alt:before {
    content: "\f1e0"
}

.fa-share-alt-square:before {
    content: "\f1e1"
}

.fa-share-square:before {
    content: "\f14d"
}

.fa-shekel-sign:before {
    content: "\f20b"
}

.fa-shield-alt:before {
    content: "\f3ed"
}

.fa-ship:before {
    content: "\f21a"
}

.fa-shipping-fast:before {
    content: "\f48b"
}

.fa-shirtsinbulk:before {
    content: "\f214"
}

.fa-shoe-prints:before {
    content: "\f54b"
}

.fa-shopping-bag:before {
    content: "\f290"
}

.fa-shopping-basket:before {
    content: "\f291"
}

.fa-shopping-cart:before {
    content: "\f07a"
}

.fa-shopware:before {
    content: "\f5b5"
}

.fa-shower:before {
    content: "\f2cc"
}

.fa-shuttle-van:before {
    content: "\f5b6"
}

.fa-sign:before {
    content: "\f4d9"
}

.fa-sign-in-alt:before {
    content: "\f2f6"
}

.fa-sign-language:before {
    content: "\f2a7"
}

.fa-sign-out-alt:before {
    content: "\f2f5"
}

.fa-signal:before {
    content: "\f012"
}

.fa-signature:before {
    content: "\f5b7"
}

.fa-sim-card:before {
    content: "\f7c4"
}

.fa-simplybuilt:before {
    content: "\f215"
}

.fa-sistrix:before {
    content: "\f3ee"
}

.fa-sitemap:before {
    content: "\f0e8"
}

.fa-sith:before {
    content: "\f512"
}

.fa-skating:before {
    content: "\f7c5"
}

.fa-sketch:before {
    content: "\f7c6"
}

.fa-skiing:before {
    content: "\f7c9"
}

.fa-skiing-nordic:before {
    content: "\f7ca"
}

.fa-skull:before {
    content: "\f54c"
}

.fa-skull-crossbones:before {
    content: "\f714"
}

.fa-skyatlas:before {
    content: "\f216"
}

.fa-skype:before {
    content: "\f17e"
}

.fa-slack:before {
    content: "\f198"
}

.fa-slack-hash:before {
    content: "\f3ef"
}

.fa-slash:before {
    content: "\f715"
}

.fa-sleigh:before {
    content: "\f7cc"
}

.fa-sliders-h:before {
    content: "\f1de"
}

.fa-slideshare:before {
    content: "\f1e7"
}

.fa-smile:before {
    content: "\f118"
}

.fa-smile-beam:before {
    content: "\f5b8"
}

.fa-smile-wink:before {
    content: "\f4da"
}

.fa-smog:before {
    content: "\f75f"
}

.fa-smoking:before {
    content: "\f48d"
}

.fa-smoking-ban:before {
    content: "\f54d"
}

.fa-sms:before {
    content: "\f7cd"
}

.fa-snapchat:before {
    content: "\f2ab"
}

.fa-snapchat-ghost:before {
    content: "\f2ac"
}

.fa-snapchat-square:before {
    content: "\f2ad"
}

.fa-snowboarding:before {
    content: "\f7ce"
}

.fa-snowflake:before {
    content: "\f2dc"
}

.fa-snowman:before {
    content: "\f7d0"
}

.fa-snowplow:before {
    content: "\f7d2"
}

.fa-socks:before {
    content: "\f696"
}

.fa-solar-panel:before {
    content: "\f5ba"
}

.fa-sort:before {
    content: "\f0dc"
}

.fa-sort-alpha-down:before {
    content: "\f15d"
}

.fa-sort-alpha-down-alt:before {
    content: "\f881"
}

.fa-sort-alpha-up:before {
    content: "\f15e"
}

.fa-sort-alpha-up-alt:before {
    content: "\f882"
}

.fa-sort-amount-down:before {
    content: "\f160"
}

.fa-sort-amount-down-alt:before {
    content: "\f884"
}

.fa-sort-amount-up:before {
    content: "\f161"
}

.fa-sort-amount-up-alt:before {
    content: "\f885"
}

.fa-sort-down:before {
    content: "\f0dd"
}

.fa-sort-numeric-down:before {
    content: "\f162"
}

.fa-sort-numeric-down-alt:before {
    content: "\f886"
}

.fa-sort-numeric-up:before {
    content: "\f163"
}

.fa-sort-numeric-up-alt:before {
    content: "\f887"
}

.fa-sort-up:before {
    content: "\f0de"
}

.fa-soundcloud:before {
    content: "\f1be"
}

.fa-sourcetree:before {
    content: "\f7d3"
}

.fa-spa:before {
    content: "\f5bb"
}

.fa-space-shuttle:before {
    content: "\f197"
}

.fa-speakap:before {
    content: "\f3f3"
}

.fa-speaker-deck:before {
    content: "\f83c"
}

.fa-spell-check:before {
    content: "\f891"
}

.fa-spider:before {
    content: "\f717"
}

.fa-spinner:before {
    content: "\f110"
}

.fa-splotch:before {
    content: "\f5bc"
}

.fa-spotify:before {
    content: "\f1bc"
}

.fa-spray-can:before {
    content: "\f5bd"
}

.fa-square:before {
    content: "\f0c8"
}

.fa-square-full:before {
    content: "\f45c"
}

.fa-square-root-alt:before {
    content: "\f698"
}

.fa-squarespace:before {
    content: "\f5be"
}

.fa-stack-exchange:before {
    content: "\f18d"
}

.fa-stack-overflow:before {
    content: "\f16c"
}

.fa-stackpath:before {
    content: "\f842"
}

.fa-stamp:before {
    content: "\f5bf"
}

.fa-star:before {
    content: "\f005"
}

.fa-star-and-crescent:before {
    content: "\f699"
}

.fa-star-half:before {
    content: "\f089"
}

.fa-star-half-alt:before {
    content: "\f5c0"
}

.fa-star-of-david:before {
    content: "\f69a"
}

.fa-star-of-life:before {
    content: "\f621"
}

.fa-staylinked:before {
    content: "\f3f5"
}

.fa-steam:before {
    content: "\f1b6"
}

.fa-steam-square:before {
    content: "\f1b7"
}

.fa-steam-symbol:before {
    content: "\f3f6"
}

.fa-step-backward:before {
    content: "\f048"
}

.fa-step-forward:before {
    content: "\f051"
}

.fa-stethoscope:before {
    content: "\f0f1"
}

.fa-sticker-mule:before {
    content: "\f3f7"
}

.fa-sticky-note:before {
    content: "\f249"
}

.fa-stop:before {
    content: "\f04d"
}

.fa-stop-circle:before {
    content: "\f28d"
}

.fa-stopwatch:before {
    content: "\f2f2"
}

.fa-store:before {
    content: "\f54e"
}

.fa-store-alt:before {
    content: "\f54f"
}

.fa-strava:before {
    content: "\f428"
}

.fa-stream:before {
    content: "\f550"
}

.fa-street-view:before {
    content: "\f21d"
}

.fa-strikethrough:before {
    content: "\f0cc"
}

.fa-stripe:before {
    content: "\f429"
}

.fa-stripe-s:before {
    content: "\f42a"
}

.fa-stroopwafel:before {
    content: "\f551"
}

.fa-studiovinari:before {
    content: "\f3f8"
}

.fa-stumbleupon:before {
    content: "\f1a4"
}

.fa-stumbleupon-circle:before {
    content: "\f1a3"
}

.fa-subscript:before {
    content: "\f12c"
}

.fa-subway:before {
    content: "\f239"
}

.fa-suitcase:before {
    content: "\f0f2"
}

.fa-suitcase-rolling:before {
    content: "\f5c1"
}

.fa-sun:before {
    content: "\f185"
}

.fa-superpowers:before {
    content: "\f2dd"
}

.fa-superscript:before {
    content: "\f12b"
}

.fa-supple:before {
    content: "\f3f9"
}

.fa-surprise:before {
    content: "\f5c2"
}

.fa-suse:before {
    content: "\f7d6"
}

.fa-swatchbook:before {
    content: "\f5c3"
}

.fa-swimmer:before {
    content: "\f5c4"
}

.fa-swimming-pool:before {
    content: "\f5c5"
}

.fa-symfony:before {
    content: "\f83d"
}

.fa-synagogue:before {
    content: "\f69b"
}

.fa-sync:before {
    content: "\f021"
}

.fa-sync-alt:before {
    content: "\f2f1"
}

.fa-syringe:before {
    content: "\f48e"
}

.fa-table:before {
    content: "\f0ce"
}

.fa-table-tennis:before {
    content: "\f45d"
}

.fa-tablet:before {
    content: "\f10a"
}

.fa-tablet-alt:before {
    content: "\f3fa"
}

.fa-tablets:before {
    content: "\f490"
}

.fa-tachometer-alt:before {
    content: "\f3fd"
}

.fa-tag:before {
    content: "\f02b"
}

.fa-tags:before {
    content: "\f02c"
}

.fa-tape:before {
    content: "\f4db"
}

.fa-tasks:before {
    content: "\f0ae"
}

.fa-taxi:before {
    content: "\f1ba"
}

.fa-teamspeak:before {
    content: "\f4f9"
}

.fa-teeth:before {
    content: "\f62e"
}

.fa-teeth-open:before {
    content: "\f62f"
}

.fa-telegram:before {
    content: "\f2c6"
}

.fa-telegram-plane:before {
    content: "\f3fe"
}

.fa-temperature-high:before {
    content: "\f769"
}

.fa-temperature-low:before {
    content: "\f76b"
}

.fa-tencent-weibo:before {
    content: "\f1d5"
}

.fa-tenge:before {
    content: "\f7d7"
}

.fa-terminal:before {
    content: "\f120"
}

.fa-text-height:before {
    content: "\f034"
}

.fa-text-width:before {
    content: "\f035"
}

.fa-th:before {
    content: "\f00a"
}

.fa-th-large:before {
    content: "\f009"
}

.fa-th-list:before {
    content: "\f00b"
}

.fa-the-red-yeti:before {
    content: "\f69d"
}

.fa-theater-masks:before {
    content: "\f630"
}

.fa-themeco:before {
    content: "\f5c6"
}

.fa-themeisle:before {
    content: "\f2b2"
}

.fa-thermometer:before {
    content: "\f491"
}

.fa-thermometer-empty:before {
    content: "\f2cb"
}

.fa-thermometer-full:before {
    content: "\f2c7"
}

.fa-thermometer-half:before {
    content: "\f2c9"
}

.fa-thermometer-quarter:before {
    content: "\f2ca"
}

.fa-thermometer-three-quarters:before {
    content: "\f2c8"
}

.fa-think-peaks:before {
    content: "\f731"
}

.fa-thumbs-down:before {
    content: "\f165"
}

.fa-thumbs-up:before {
    content: "\f164"
}

.fa-thumbtack:before {
    content: "\f08d"
}

.fa-ticket-alt:before {
    content: "\f3ff"
}

.fa-times:before {
    content: "\f00d"
}

.fa-times-circle:before {
    content: "\f057"
}

.fa-tint:before {
    content: "\f043"
}

.fa-tint-slash:before {
    content: "\f5c7"
}

.fa-tired:before {
    content: "\f5c8"
}

.fa-toggle-off:before {
    content: "\f204"
}

.fa-toggle-on:before {
    content: "\f205"
}

.fa-toilet:before {
    content: "\f7d8"
}

.fa-toilet-paper:before {
    content: "\f71e"
}

.fa-toolbox:before {
    content: "\f552"
}

.fa-tools:before {
    content: "\f7d9"
}

.fa-tooth:before {
    content: "\f5c9"
}

.fa-torah:before {
    content: "\f6a0"
}

.fa-torii-gate:before {
    content: "\f6a1"
}

.fa-tractor:before {
    content: "\f722"
}

.fa-trade-federation:before {
    content: "\f513"
}

.fa-trademark:before {
    content: "\f25c"
}

.fa-traffic-light:before {
    content: "\f637"
}

.fa-train:before {
    content: "\f238"
}

.fa-tram:before {
    content: "\f7da"
}

.fa-transgender:before {
    content: "\f224"
}

.fa-transgender-alt:before {
    content: "\f225"
}

.fa-trash:before {
    content: "\f1f8"
}

.fa-trash-alt:before {
    content: "\f2ed"
}

.fa-trash-restore:before {
    content: "\f829"
}

.fa-trash-restore-alt:before {
    content: "\f82a"
}

.fa-tree:before {
    content: "\f1bb"
}

.fa-trello:before {
    content: "\f181"
}

.fa-tripadvisor:before {
    content: "\f262"
}

.fa-trophy:before {
    content: "\f091"
}

.fa-truck:before {
    content: "\f0d1"
}

.fa-truck-loading:before {
    content: "\f4de"
}

.fa-truck-monster:before {
    content: "\f63b"
}

.fa-truck-moving:before {
    content: "\f4df"
}

.fa-truck-pickup:before {
    content: "\f63c"
}

.fa-tshirt:before {
    content: "\f553"
}

.fa-tty:before {
    content: "\f1e4"
}

.fa-tumblr:before {
    content: "\f173"
}

.fa-tumblr-square:before {
    content: "\f174"
}

.fa-tv:before {
    content: "\f26c"
}

.fa-twitch:before {
    content: "\f1e8"
}

.fa-twitter:before {
    content: "\f099"
}

.fa-twitter-square:before {
    content: "\f081"
}

.fa-typo3:before {
    content: "\f42b"
}

.fa-uber:before {
    content: "\f402"
}

.fa-ubuntu:before {
    content: "\f7df"
}

.fa-uikit:before {
    content: "\f403"
}

.fa-umbrella:before {
    content: "\f0e9"
}

.fa-umbrella-beach:before {
    content: "\f5ca"
}

.fa-underline:before {
    content: "\f0cd"
}

.fa-undo:before {
    content: "\f0e2"
}

.fa-undo-alt:before {
    content: "\f2ea"
}

.fa-uniregistry:before {
    content: "\f404"
}

.fa-universal-access:before {
    content: "\f29a"
}

.fa-university:before {
    content: "\f19c"
}

.fa-unlink:before {
    content: "\f127"
}

.fa-unlock:before {
    content: "\f09c"
}

.fa-unlock-alt:before {
    content: "\f13e"
}

.fa-untappd:before {
    content: "\f405"
}

.fa-upload:before {
    content: "\f093"
}

.fa-ups:before {
    content: "\f7e0"
}

.fa-usb:before {
    content: "\f287"
}

.fa-user:before {
    content: "\f007"
}

.fa-user-alt:before {
    content: "\f406"
}

.fa-user-alt-slash:before {
    content: "\f4fa"
}

.fa-user-astronaut:before {
    content: "\f4fb"
}

.fa-user-check:before {
    content: "\f4fc"
}

.fa-user-circle:before {
    content: "\f2bd"
}

.fa-user-clock:before {
    content: "\f4fd"
}

.fa-user-cog:before {
    content: "\f4fe"
}

.fa-user-edit:before {
    content: "\f4ff"
}

.fa-user-friends:before {
    content: "\f500"
}

.fa-user-graduate:before {
    content: "\f501"
}

.fa-user-injured:before {
    content: "\f728"
}

.fa-user-lock:before {
    content: "\f502"
}

.fa-user-md:before {
    content: "\f0f0"
}

.fa-user-minus:before {
    content: "\f503"
}

.fa-user-ninja:before {
    content: "\f504"
}

.fa-user-nurse:before {
    content: "\f82f"
}

.fa-user-plus:before {
    content: "\f234"
}

.fa-user-secret:before {
    content: "\f21b"
}

.fa-user-shield:before {
    content: "\f505"
}

.fa-user-slash:before {
    content: "\f506"
}

.fa-user-tag:before {
    content: "\f507"
}

.fa-user-tie:before {
    content: "\f508"
}

.fa-user-times:before {
    content: "\f235"
}

.fa-users:before {
    content: "\f0c0"
}

.fa-users-cog:before {
    content: "\f509"
}

.fa-usps:before {
    content: "\f7e1"
}

.fa-ussunnah:before {
    content: "\f407"
}

.fa-utensil-spoon:before {
    content: "\f2e5"
}

.fa-utensils:before {
    content: "\f2e7"
}

.fa-vaadin:before {
    content: "\f408"
}

.fa-vector-square:before {
    content: "\f5cb"
}

.fa-venus:before {
    content: "\f221"
}

.fa-venus-double:before {
    content: "\f226"
}

.fa-venus-mars:before {
    content: "\f228"
}

.fa-viacoin:before {
    content: "\f237"
}

.fa-viadeo:before {
    content: "\f2a9"
}

.fa-viadeo-square:before {
    content: "\f2aa"
}

.fa-vial:before {
    content: "\f492"
}

.fa-vials:before {
    content: "\f493"
}

.fa-viber:before {
    content: "\f409"
}

.fa-video:before {
    content: "\f03d"
}

.fa-video-slash:before {
    content: "\f4e2"
}

.fa-vihara:before {
    content: "\f6a7"
}

.fa-vimeo:before {
    content: "\f40a"
}

.fa-vimeo-square:before {
    content: "\f194"
}

.fa-vimeo-v:before {
    content: "\f27d"
}

.fa-vine:before {
    content: "\f1ca"
}

.fa-vk:before {
    content: "\f189"
}

.fa-vnv:before {
    content: "\f40b"
}

.fa-voicemail:before {
    content: "\f897"
}

.fa-volleyball-ball:before {
    content: "\f45f"
}

.fa-volume-down:before {
    content: "\f027"
}

.fa-volume-mute:before {
    content: "\f6a9"
}

.fa-volume-off:before {
    content: "\f026"
}

.fa-volume-up:before {
    content: "\f028"
}

.fa-vote-yea:before {
    content: "\f772"
}

.fa-vr-cardboard:before {
    content: "\f729"
}

.fa-vuejs:before {
    content: "\f41f"
}

.fa-walking:before {
    content: "\f554"
}

.fa-wallet:before {
    content: "\f555"
}

.fa-warehouse:before {
    content: "\f494"
}

.fa-water:before {
    content: "\f773"
}

.fa-wave-square:before {
    content: "\f83e"
}

.fa-waze:before {
    content: "\f83f"
}

.fa-weebly:before {
    content: "\f5cc"
}

.fa-weibo:before {
    content: "\f18a"
}

.fa-weight:before {
    content: "\f496"
}

.fa-weight-hanging:before {
    content: "\f5cd"
}

.fa-weixin:before {
    content: "\f1d7"
}

.fa-whatsapp:before {
    content: "\f232"
}

.fa-whatsapp-square:before {
    content: "\f40c"
}

.fa-wheelchair:before {
    content: "\f193"
}

.fa-whmcs:before {
    content: "\f40d"
}

.fa-wifi:before {
    content: "\f1eb"
}

.fa-wikipedia-w:before {
    content: "\f266"
}

.fa-wind:before {
    content: "\f72e"
}

.fa-window-close:before {
    content: "\f410"
}

.fa-window-maximize:before {
    content: "\f2d0"
}

.fa-window-minimize:before {
    content: "\f2d1"
}

.fa-window-restore:before {
    content: "\f2d2"
}

.fa-windows:before {
    content: "\f17a"
}

.fa-wine-bottle:before {
    content: "\f72f"
}

.fa-wine-glass:before {
    content: "\f4e3"
}

.fa-wine-glass-alt:before {
    content: "\f5ce"
}

.fa-wix:before {
    content: "\f5cf"
}

.fa-wizards-of-the-coast:before {
    content: "\f730"
}

.fa-wolf-pack-battalion:before {
    content: "\f514"
}

.fa-won-sign:before {
    content: "\f159"
}

.fa-wordpress:before {
    content: "\f19a"
}

.fa-wordpress-simple:before {
    content: "\f411"
}

.fa-wpbeginner:before {
    content: "\f297"
}

.fa-wpexplorer:before {
    content: "\f2de"
}

.fa-wpforms:before {
    content: "\f298"
}

.fa-wpressr:before {
    content: "\f3e4"
}

.fa-wrench:before {
    content: "\f0ad"
}

.fa-x-ray:before {
    content: "\f497"
}

.fa-xbox:before {
    content: "\f412"
}

.fa-xing:before {
    content: "\f168"
}

.fa-xing-square:before {
    content: "\f169"
}

.fa-y-combinator:before {
    content: "\f23b"
}

.fa-yahoo:before {
    content: "\f19e"
}

.fa-yammer:before {
    content: "\f840"
}

.fa-yandex:before {
    content: "\f413"
}

.fa-yandex-international:before {
    content: "\f414"
}

.fa-yarn:before {
    content: "\f7e3"
}

.fa-yelp:before {
    content: "\f1e9"
}

.fa-yen-sign:before {
    content: "\f157"
}

.fa-yin-yang:before {
    content: "\f6ad"
}

.fa-yoast:before {
    content: "\f2b1"
}

.fa-youtube:before {
    content: "\f167"
}

.fa-youtube-square:before {
    content: "\f431"
}

.fa-zhihu:before {
    content: "\f63f"
}

.sr-only {
    border: 0;
    clip: rect(0,0,0,0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.sr-only-focusable:active, .sr-only-focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto
}

.pop_warning {
    background: #fff;
    border-radius: 7px 7px 0 0;
    border-bottom: 0
}

    .pop_warning h2 {
        padding: 14px 10px;
        color: #e04a00 !important;
        font-weight: 500;
        font-size: 24px
    }

.pop_warning_subtitle {
    padding: 10px;
    font-size: 14px
}

@media screen and (min-width:948px) {
    .fo_table-card {
        display: none !important
    }
}

@media(max-width:567px) {
    .fo_table {
        display: none
    }
}

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

    .fo_table td, .fo_table th {
        padding: 5px
    }

    .fo_table th {
        color: #333
    }

.gogle-usr-sel a.active {
    background: #fff;
    padding: 4px 2px;
    border: 1px solid #ccc
}

.dash_start_perf {
    display: flex;
    justify-content: center;
    font-size: 14px;
    align-items: center;
    height: 60%
}

.wid_text_align_center {
    text-align: center
}

#wi_elements_list ul {
    -ms-overflow-style: none;
    scrollbar-width: none
}

#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: #f5f6fa
}

.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: 0 1px 14px 0 #cdcdcd
}


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

    #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 {
    width: 100% !important
}

.ui-sortable-helper .wid_two_two, .ui-sortable-helper .dash_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_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: 0 6px 6px 0 #c5c5c5
}

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

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

@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 {
            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.6% !important;
        height: 112px !important
    }

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

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

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

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

    .wid_wf_list_container_large {
        width: 57% !important;
        height: 349px !important
    }

    .wid_metric_count {
        width: 57% !important;
        height: 112px !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: 89px !important
    }

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

    .DroppedElement .dash_graphic_img_2_3 {
        height: 323px !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: 18.6% !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
    }


    .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 {
        height: 120px !important
    }

    .CC_widg_content img {
        width: 166px !important
    }

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

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

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

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

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

    .wid_wf_list_container_large {
        height: 354px !important;
        width: 57% !important
    }

    .wid_metric_count {
        height: 115px !important;
        width: 57% !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: 19.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.65%;
    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.65%;
    height: 306px;
    float: left;
    display: block;
    margin-top: -2px;
    margin-left: -2px
}

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

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

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

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

.wid_metric_count {
    border-radius: 3px;
    background-color: #fff;
    width: 57%;
    height: 147px;
    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: 437px
}

.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: 13px;
    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: 1px 0 5px 1px #ccc;
    float: right
}

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

        .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-x: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    box-shadow: inset 0 30px 18px -10px #dcdcdc,inset 0 -30px 18px -10px #dcdcdc;
    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;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    position: absolute !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

@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;
    overflow: hidden !important;
    text-overflow: ellipsis
}

.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: 37.8%;
    height: 305px;
    float: left;
    display: block;
    margin-top: -2px;
    margin-left: -2px
}

.wid_two_isto_three {
    border-radius: 3px;
    background-color: #fff;
    width: 37.8%;
    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: 10;
    width: 400px;
    height: 100%;
    right: 5px;
    float: right;
    position: fixed;
    top: 60px;
    background: #fff;
    border: 1px solid #efefef;
    box-shadow: none;
    display: none;
    border-color: #c8c8c8;
    box-sizing: border-box;
    background-color: #f9f9f9
}

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

.wi_sidebar_title {
    font-size: 15px;
    padding: 5px 0 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 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
}

@media only screen and (max-width:1400px) {
    .wi_metric_name {
        padding: 2px 0 !important;
        font-size: 11px !important
    }


    .wi_report_metric {
        margin: .25% 1% !important;
        height: 55px !important;
        width: 17%
    }

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

    .wi_metric_count {
        font-size: 16px !important;
        padding: 2px !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: 24px;
        padding: 0 14px;
        cursor: pointer
    }

.wi_sidebar_list_active {
    border-bottom: 3px solid var(--primary-color)
}

.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
}

.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 var(--primary-color)
}

.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
}

.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 {
    padding: 4px 0;
    font-size: 14px
}

.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: 16.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
    }

.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 {
        width: 100% !important;
        height: auto;
        margin: 0 auto
    }

    .wi_cur_modal_data .ele_remove_small {
        display: none !important
    }

    .wi_cur_modal_data .CC_widg_title {
        padding: 2px !important
    }

#dvNotifications .name-info-top .first {
    color: #777;
    font-size: 12px;
    font-weight: 700
}

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

.date-info-top .icon-calendar6 {
    width: 16px;
    display: none
}



.wfl_textarea_container {
    width: 98%;
    margin: 0
}

    .wfl_textarea_container textarea, .wfl_textarea_container textarea:focus {
        border: 1px solid #e0e0e0 !important;
        border-radius: 3px !important
    }

aside::-webkit-scrollbar, .noti-information::-webkit-scrollbar, .workflow-list-contianer::-webkit-scrollbar {
    width: 4px
}

aside::-webkit-scrollbar-thumb, .noti-information::-webkit-scrollbar-thumb, .workflow-list-contianer::-webkit-scrollbar-thumb {
    background: #9f9f9f
}

.crt_workflow_cont {
    width: 100%;
    border: 0;
    height: 42px;
    border-radius: 4px;
    margin: 0 0 12px 0;
    align-items: center;
    display: flex;
    justify-content: center;
    background: #fff;
    box-shadow: 0 0 3px 0 #e6e6e6;
    cursor: pointer
}

    .crt_workflow_cont:hover {
        box-shadow: 0 0 6px 0 #c9c9c9
    }

.crt_wficon {
    font-size: 26px;
    display: block;
    width: 26px;
    height: 26px;
    margin: 0;
    font-weight: 100;
    border-radius: 50%;
    background: #5a9aeb;
    color: #fff
}

.crt_wf_content {
    font-size: 14px;
    font-weight: 600;
    padding: 0 10px;
    color: #4c4c4c
}

.cflow_alt_user {
    width: 30%;
    margin: 0 auto
}

.agi_cs_re_cont {
    border-radius: 3px;
    background-color: #fff;
    color: #4f5256;
    float: left;
    display: block;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05),0 2px 10px 0 rgba(0,0,0,0.05)
}

    .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-y: hidden;
    overflow-x: 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;
    height: 30px !important;
    text-indent: 4px;
    color: #4b5768;
    width: 90%
}

.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 0
}

.wrkcr-add-rol-field #lblAssUserErr {
    font-size: 13px;
    color: #ea0101
}

.role_assign_container {
    display: block;
    position: relative;
    padding-left: 15px;
    margin-bottom: 16px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

    .role_assign_container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0
    }

    .role_assign_container .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 20px;
        width: 20px;
        background-color: #b5b5b5;
        border-radius: 3px
    }

    .role_assign_container input:checked ~ .checkmark {
        background-color: #2196f3
    }



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


    .role_assign_container .checkmark:after {
        content: "";
        position: absolute;
        display: none;
        left: 7px;
        top: 3px;
        width: 3px;
        height: 9px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg)
    }

.amu_btn {
    text-align: right;
    padding: 16px 0;
    font-size: 14px
}

.amu_cancel {
    text-decoration: none;
    color: #5e5e5e;
    padding: 5px 10px
}

.amu_save {
    padding: 6px 20px;
    color: #fff;
    text-decoration: none;
    border-radius: 2px
}

.amu_container {
    padding: 15px
}

.amu_role_name {
    font-size: 20px;
    padding: 10px 0
}

.assign_muli_user_table {
    font-size: 14px;
    border-collapse: collapse;
    width: 100%;
    color: #525252
}

    .assign_muli_user_table td, .assign_muli_user_table th {
        border: 1px solid #eaeaea;
        padding: 10px
    }

    .assign_muli_user_table th {
        background: #ccc
    }

.amu_table_container {
    height: 475px;
    overflow-y: auto
}

.amu_td_wi_small {
    width: 3%;
    background: #f0f0f0 !important
}

.amu_td_wi_medium {
    width: 20%;
    background: #f0f0f0 !important
}

.amu_td_wi_large {
    width: 34%;
    background: #f0f0f0 !important
}

.page-title#dvTabRecords h1 {
    width: 72%
}

    .page-title#dvTabRecords h1 .lblWorkFlow {
        padding-left: 250px
    }

.workflow-detail-cont input[type="checkbox"]:disabled ~ label {
    background: #ddd;
    padding-left: 17px
}

.workflow-detail-cont .chbx-list input[type="checkbox"]:disabled ~ label {
    padding-left: 0 !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;
    -webkit-transition: .4s;
    transition: .4s;
    border: 1px solid #fb4f37
}

    .dash_design_switch_slider:before {
        position: absolute;
        content: "";
        height: 10px;
        width: 10px;
        left: 2px;
        bottom: 2px;
        background-color: #fff;
        -webkit-transition: .4s;
        transition: .4s;

    }

.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;
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(16px)
    }

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

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

.NotificationSearch-error, .WorkflowSearch-error {
    text-align: center;
    margin: 10px 0;
    width: 100%
}

#dvEmBasInit a {
    height: 25vh !important
}

    #dvEmBasInit a span {
        line-height: 20px !important
    }