@charset "utf-8";
/* CSS Document */

/*
    1.	Level 1 colour (Ascertia brand = Dark grey)- #2f2f2f
        The colour is used in:
        a.	(2016-04-20 added to color-level-11)Top bar background
        b.	Main menu background
        c.	Buttons background
        d.	Icon colour. For all icons excluding the ones mentioned in Level 2 and Level 4 below

    2.	Level 2 Colour (Call to action, Ascertia brand = Green) #55cf31
    Colour that is used only for important items/buttons/content in overall UI. Following specific areas below can fall under this:
        a.	Next and back links in top bar
        b.	Buttons background
        c.	Icons
            i.	Completed

    3.	Level 3
    Only used in SigningHub Desktop

    4.	Level 4 Colour
    Only used in SigningHub Desktop

    5.	Level 5 Colour (text only, Ascertia Brand = White) #ffffff
    The colour used for the text. e.g.
        a.	Main menu Items
        b.	Button labels
        c.	Headings in top bar
        d.	Icons labels – for menu icons only
            i.	    My Desk
            ii.	    Document
            iii.	Profile Info
            iv.	    Service Plan
            v.	    Logout

    6.	Level 6 Colour (line only, Ascertia Brand = Tint 1 of level 1 colour) #545454
        For line shown in the dashboard and menus

    7.	Level 7 Colour (form field Active border, Ascertia Brand =Yellow #ffb600
    8.	Level 8 Colour (form field Active fill colour, Ascertia Brand =Tint1 of Level 7 #f8da00
    9.	Level 9 Colour (form field Disabled border, Ascertia Brand =Grey #b3b3b3
    10.	Level 10 Colour (Dashboard background, Ascertia Brand =Tint 2 of Level 1 #363636 (2016-04-20 updated from #434343)
    11.	Level 11 Colour (All app title bars background color, Ascertia brand= Tint 2 of level 1 #232323) (2016-04-20 added)
*/

/*Mobile-Web custom styles*/

body {
    color: #000000;
    /*Overridden mobile-angular-ui #333*/
    font-family: roboto_regular;
    /*Overridden mobile-angular-ui*/
    font-weight: 400;
    /*Overridden mobile-angular-ui 200*/
    position: fixed;
    /* Added to Remove Safari Body elasticity and Footer Error*/
}

/* It defines a common padding for modal pages where needed.*/

.v-center {
    /*height: 60px;*/
    /* Firefox */
    vertical-align: middle;
    /*text-align: center;*/
    display: table-cell;
    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;
    /* Safari, Opera, and Chrome */
    display: -webkit-box;
    /*-webkit-box-pack: center;*/
    /*For horizental alignment*/
    -webkit-box-align: center;
    /*For vertical alignment*/
}

.select-dropdown > option {
    background-color: #ffffff !important;
}

    .select-dropdown > option:empty {
        display: none;
    }

.ng-invalid {
    border-color: #ff3b30;
}

.bg-gray {
    background-color: #f0f0f0 !important;
}

.no-border-radius {
    border-radius: 0 !important;
}

.input-group-addon {
    border-color: #d6d6d6;
    padding-bottom: 5px;
    padding-top: 6px;
}

/*#region #0 custom animations*/
@-moz-keyframes blink {
    50% {
        border-color: #000000;
        background-color: #ffffff;
    }
}

@-ms-keyframes blink {
    50% {
        border-color: #000000;
        background-color: #ffffff;
    }
}

@-webkit-keyframes blink {
    50% {
        border-color: #000000;
        background-color: #ffffff;
    }
}

@keyframes blink {
    50% {
        border-color: #000000;
        background-color: #ffffff;
    }
}

/*#endregion*/

/*#region #0a Checkbox*/

.checkbox > label {
    /*font-family: 'robotoregular' !important;*/
    display: inline-block;
    position: relative;
    padding-left: 26px;
    line-height: 22px;
}

    .checkbox > label:before {
        content: "";
        display: inline-block;
        position: absolute;
        height: 19px;
        width: 19px;
        left: 0;
        margin-top: 1px;
        border: 1px solid #cccccc;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        background-color: #fff;
        /*
        -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        -moz-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        transition: border 0.15s ease-in-out, color 0.15s ease-in-out;*/
    }

    .checkbox > label:after {
        display: inline-block;
        position: absolute;
        padding-left: 4px;
        font-size: 12px;
        height: 19px;
        width: 19px;
        color: #555;
        left: 0;
        top: 0;
    }

.register .checkbox > label:after {
    line-height: 20px;
}

.checkbox input[type=checkbox] {
    position: absolute;
    margin-left: 5px;
    opacity: 0;
    height: 0;
    width: 0;
}

    .checkbox input[type=checkbox]:focus + label:before {
        border-color: #5cb85c;
        -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
        outline: 0 none;
    }

    .checkbox input[type=checkbox]:checked + label:before {
        background-color: #5cb85c;
        border-color: #5cb85c;
    }

    .checkbox input[type=checkbox]:checked + label:after {
        font-family: 'FontAwesome';
        /*SigninghubV65AllPlatforms fontawesomeregular*/
        content: '\f00c';
        /*It is a trick to use icon-comment as bold check icon*/
        color: #fff;
    }

    .checkbox input[type=checkbox]:disabled + label {
        opacity: 0.50;
        cursor: not-allowed;
    }

        .checkbox input[type=checkbox]:disabled + label:before {
            background-color: #ccc;
            border-color: #7c7d82;
            cursor: not-allowed;
        }

        .checkbox input[type=checkbox]:disabled + label:after {
            color: #fff;
        }

/*#endregion*/

/*#region #buttons*/

.disabled {
    opacity: .5;
}

.btn-icon,
.btn-text,
.btn-text-transparent {
    border: 0;
    font-size: 1.5em;
    background-color: transparent;
    min-width: 10px;
    padding-top: 0;
    padding: 0;
}

    /*.btn-icon:active, .btn-text:active, .btn-text-transparent:active {
        opacity: 0.5;
    }*/

    /*.btn-icon:disabled, .btn-text:disabled, .btn-text-transparent:disabled {
        opacity: 0.5;
    }*/

    .btn-icon > span {
        display: block;
        white-space: nowrap;
        font-size: .9em;
        padding-left: 2px;
        padding-right: 2px;
    }

/*#endregion*/

/*#region #0b Radio Button*/

.radio > label {
    /*font-family: 'robotoregular' !important;*/
    display: inline-block;
    vertical-align: top;
    position: relative;
    padding-left: 26px;
}

    .radio > label:before {
        border: 1px solid;
        border-color: #55cf31;
        /* color-level-2: green, #55cf31 */
        background-color: #fff;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        position: absolute;
        height: 15px;
        content: "";
        width: 15px;
        top: 2px;
        left: 0;
    }

    .radio > label:after {
        /*-webkit-transition: opacity 0.25s ease;
        -moz-transition: opacity 0.25s ease;
        -o-transition: opacity 0.25s ease;
        transition: opacity 0.25s ease;*/
        background-color: #55cf31;
        /* color-level-2: green, #55cf31 */
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        position: absolute;
        content: " ";
        opacity: 0;
        height: 9px;
        width: 9px;
        left: 3px;
        top: 5px;
    }

.radio input[type=radio] {
    position: absolute;
    margin-left: 5px;
    opacity: 0;
    height: 0;
    width: 0;
}

    .radio input[type=radio]:checked + label:after {
        opacity: 1;
    }

    .radio input[type=radio]:disabled + label {
        opacity: 0.65;
    }

        .radio input[type=radio]:disabled + label:before {
            cursor: not-allowed;
        }

/*#endregion*/

/*#region #1 Items Colors*/

.selected {
    background: #ccf1c1 !important;
}

.icon {
    color: #2f2f2f;
    /* color-level-1: black, #2f2f2f*/
}

.page-header-2 .icon {
    color: #ffffff;
    /* color-level-5: black, #ffffff*/
}

.notifications-list .scrollable-content.custom-grid {
    padding-top: 0;
}

.notifications-list .custom-grid .row .icon-exclamation-circle {
    color: #FF0000;
}

.notifications-list .custom-grid .row .icon-exclamation-warning-circle {
    color: #ffb600;
}

.icon-check,
.icon-completed,
.icon-sh-favicon,
.page-header-2 .header-navbar .icon-bars,
.page-header-2 .icon-angle-left,
.page-header-2 .icon-check,
.page-header-2 .icon-check-circle,
.mydesk .all-document-link .icon-angle-right,
.page-field .icon-check-circle,
.processed .icon-check-circle {
    color: #55cf31;
    /* color-level-2: green, #55cf31 */
}

.nav-tabs-link > .btn-default {
    background-color: #ffffff;
    border-color: #55cf31;
    /* color-level-2: green, #55cf31 */
}

    .nav-tabs-link > .btn-default.active {
        background-color: #ccf1c1;
        /* color-level-2: green, #55cf31 */
        border-color: #55cf31;
        /* color-level-2: green, #55cf31 */
    }

.text-muted {
    color: #767676;
}

.signature-pad-note {
    margin-top: 5px;
    margin-left: 26px;
    font-size: 13px;
}

.text-water-mark {
    color: #e2e2e2;
    font-weight: 600;
}

*:focus {
    outline: 0 !important;
}

/*#endregion*/

.search-form .form-control {
    border-radius: 4px 0 0 4px;
    height: 34px;
}

.search-form .input-group-btn .btn {
    height: 34px;
}

/*#region #1a Alerts & Modals*/
.alert-success {
    display: block;
    position: absolute;
    bottom: .5em;
    left: .5em;
    margin-right: .5em;
    z-index: 99999;
    border: 2px solid;
    border-color: #55cf31;
    /* color-level-2: green, #55cf31 */
    background: #2f2f2f none repeat scroll 0 0;
    min-height: 3.5em;
    min-width: 250px;
    color: #ffffff;
    -webkit-transition: all 2s;
    /* Safari */
    -webkit-transition-timing-function: ease-out;
    /* Safari */
    -moz-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    opacity: 1;
}

    .alert-success .icon-check,
    .alert-text {
        padding-top: .8em;
        padding-bottom: .8em;
    }

    .alert-success .icon-check {
        padding: 1em .2em 1em 1em;
    }

    .alert-success .icon-times {
        padding: .3em;
        font-size: .8em;
        color: #ffffff;
    }

/*
.modal-error {
}
*/
.ui-widget-overlay {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
}

.modal-overlay {
    background: rgba(132, 131, 133, 0.80) none repeat scroll 0% 0%;
}

    .modal-overlay .modal-dialog {
        margin-top: 40vh;
        background: #ffffff none repeat scroll 0% 0%;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        /*padding: 7px;*/
    }

/*
.modal-body {
    padding: 0;
}

.modal-footer {
    border-top: 0;
    text-align: center;
}

.modal-header {
    border-bottom: 0;
    text-align: center;
}
*/
/*#endregion*/

/*#region #1b font-size*/

.font-1x {
    font-size: 1em;
}

.font-2x {
    font-size: 2em;
}

.font-3x {
    font-size: 3em;
}

.font-4x {
    font-size: 4em;
}

/*#endregion*/

/*#region #2 Message*/
.success {
    font-size: 0.9em;
}

.danger {
    font-size: 0.9em;
    color: #FF0000;
    display: table;
}

.display-inline-flex {
    display: inline-flex !important;
}

.danger .icon {
    display: none;
    /* Hide the icon with alert messages */
    padding: 0 .2em;
}

.warning {
    position: relative;
    font-size: 0.9em;
    color: #7c7d82;
    display: table;
    width: 100%;
}

    .warning .icon {
        font-size: .7em;
        /*margin-bottom: -5px;*/
    }

/*#endregion*/

/*#region #3 Borders*/
.border-red {
    background-color: red;
}

.border-gray {
    border: 1px solid #d6d6d6;
}

.border-radius-bottom {
    background-color: green;
}

.invalid-input {
    border: 1px solid;
    border-color: #FF0000;
}

/*#endregion*/

.custom-grid.add .body {
    border: 1px solid #e2e2e2;
    border-radius: 0.3em;
}

    .custom-grid.add .body .row + .row {
        border-top: 1px solid #e2e2e2;
    }

.certify-settings .btn {
    font-size: 14px;
}

/*#region #4 Dropdown Menu*/
/*Over-ridden from mobile-angular-ui*/
.dropdown {
}

    .dropdown a .pull-right {
        padding-left: 5px;
    }

.dropdown-menu {
    border: 0;
    margin-top: 0;
    min-width: 16em;
    overflow: scroll;
    position: absolute;
}

    .dropdown-menu > li {
        border-bottom: 1px solid;
        border-color: #e2e2e2;
        /* color-level-?: #e2e2e2 */
        padding: 0.5em 0.5em;
    }

        .dropdown-menu > li:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        .dropdown-menu > li > a {
            padding: .2em .2em .2em 0;
            /*text-transform: uppercase;*/
            font-size: 1.2em;
        }

            .dropdown-menu > li > a .icon {
                /*padding: 0 0.5em 0 0.5em;*/
                text-align: center;
                /*width: 2em;*/
            }

.dropdown-menu-span {
    width: 35px;
    display: inline-block;
    vertical-align: middle;
}

.timezone-dropdown-menu {
    margin-top: 0 !important;
    overflow-x: hidden;
    max-height: 216px;
    overflow-y: auto;
}



/*#region select input option*/
.input-group {
    margin-bottom: 0;
    padding: 10px 0;
}

    .input-group .dropdown-menu {
        padding: 0;
        margin-top: -10px;
    }

        .input-group .dropdown-menu > li {
            /*border-color: #e2e2e2; /* color-level-?: #e2e2e2 */
            padding: 0;
        }

            .input-group .dropdown-menu > li > a {
                padding: 5px;
                font-size: 1em;
            }

/*#endregion*/

/*#region select input option*/
.dropdown-full-width {
    margin-bottom: 0;
    padding: 10px 0;
}

    .dropdown-full-width .dropdown-menu {
        padding: 0;
        margin-top: -10px;
    }

        .dropdown-full-width .dropdown-menu > li {
            /*border-color: #e2e2e2; /* color-level-?: #e2e2e2 */
            padding: 0;
        }

            .dropdown-full-width .dropdown-menu > li > a {
                padding: 5px;
                font-size: 1em;
            }

/*#endregion*/

/*#region select input option*/
.caret {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px dashed;
    display: inline-block;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    width: 0;
}

/*#endregion*/

/*#endregion*/

/*#region #5 Page Header*/
.page-header-2 {
    height: 60px;
    /*text-align: center;*/
    /*It sets the text alignment of the header title*/
    /*-webkit-box-pack: center; @ .page-header-2 .header-title > div > h4 */
    /*For horizental alignment in ios & chrom*/
    margin-top: 0;
    margin-bottom: 0;
    color: #FFFFFF;
    /* color-level-5: white, #FFFFFF */
    background-color: #232323;
    /* color-level-11: black, #232323*/
    /* 2016-04-20 #2f2f2f; /* color-level-1: black, #2f2f2f*/
    border: 0;
    padding: 0;
}

    .page-header-2 .header-navbar .dropdown-menu {
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
        overflow: hidden;
    }

        .page-header-2 .header-navbar .dropdown-menu > li {
            border-color: #545454;
            /* color-level-6: Tint 1 of level 1, #545454 */
        }

            .page-header-2 .header-navbar .dropdown-menu > li .badge {
                margin-left: -10px;
                margin-top: -8px;
            }

    .page-header-2 > div {
        padding: 0;
        height: 60px;
        /*border:1px solid #ffffff;*/
        min-width: 40px;
    }

    .page-header-2 .header-left {
        float: left;
    }

        .page-header-2 .header-left .btn-icon > span {
            /*margin-left: -5px;*/
        }

    .page-header-2 .header-right .btn-text > span,
    .page-header-2 .header-right .btn-text-transparent > span {
        margin-right: 10px;
    }

    .page-header-2 .header-right {
        float: right;
    }

    /*#region Header title */
    .page-header-2 .header-title {
        display: block;
        overflow: hidden;
        text-align: left;
    }

        .page-header-2 .header-title .document-title {
            max-width: 90%;
            overflow: hidden;
            display: inline-block;
            text-overflow: ellipsis;
        }

        .page-header-2 .header-title .document-name {
            font-size: 18px;
            font-weight: 600;
            padding-top: 18px;
            display:inline-block;
        }

            .page-header-2 .header-title .document-name > h4 {
                text-transform: inherit;
            }

    
            .page-header-2 .header-title > div > h4 {
                margin-bottom: 0;
                text-align: left;
                padding-top: 20px;
            }

        .page-header-2 .header-title h4 {
            -ms-text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            /* Required for text-overflow to do anything */
            white-space: nowrap;
            overflow: hidden;
        }

    /*#endregion*/

    /*#region Header buttons */
    .page-header-2 .btn-icon,
    .page-header-2 .btn-text,
    .page-header-2 .btn-text-transparent {
        height: 60px;
        border: 0;
        font-size: 1.5em;
        color: #55cf31;
        /* color-level-2: green, #55cf31 */
        background-color: transparent;
        /* color-level-11: black, #232323*/
        min-width: 40px;
        padding-top: 0;
        /*border:1px solid #ffffff;*/
        padding: 0;
    }

        .page-header-2 .btn-icon > span {
            display: block;
            white-space: nowrap;
            color: #55cf31;
            /* color-level-2: green, #55cf31 */
            font-size: .9em;
        }

        .page-header-2 .btn-text > span {
            display: block;
            white-space: nowrap;
            background-color: #55cf31;
            /* color-level-2: green, #55cf31 */
            color: #ffffff;
            /* color-level-5: White, #ffffff */
            border: 0;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            font-size: .7em;
            padding: 2px 10px 2px;
        }

        .page-header-2 .btn-text-transparent > span {
            display: block;
            white-space: nowrap;
            color: #55cf31;
            /* color-level-2: green, #55cf31 */
            border: 0;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            font-size: .7em;
            padding: 2px 10px 2px;
        }

    .page-header-2 .btn-text-old > span {
        display: block;
        white-space: nowrap;
        color: #55cf31;
        /* color-level-2: green, #55cf31 */
        border: 1px solid;
        -moz-border-radius: 16px;
        -webkit-border-radius: 16px;
        border-radius: 16px;
        font-size: .7em;
        padding: 2px 5px 2px;
    }

    /*#endregion*/

    /*#region Main Settings Menu Dorpdown */
    .page-header-2 .header-navbar ul {
        background-color: #2f2f2f;
        /* color-level-1: black, #2f2f2f*/
    }

        .page-header-2 .header-navbar ul li a {
            color: #FFFFFF;
            /* color-level-5: white, #FFFFFF */
        }

            .page-header-2 .header-navbar ul li a .icon {
                font-size: 1.4em;
                color: #ffffff;
                /* color-level-5: blue, #ffffff */
            }

            .page-header-2 .header-navbar ul li a .icon-sh-favicon {
                color: #55cf31;
                /* color-level-2: green, #55cf31 */
            }

/*#endregion*/

/*#endregion*/

/*#region #6 Title*/
.page-title {
    padding-top: 0.9em;
    padding-bottom: 0.1em;
}

.title label {
    font-weight: 600;
}

/*#endregion*/

/*#region #6a Modal*/

.alert-modal-window .modal-dialog {
    margin-top: 60px;
    width: 80%;
}

.viewer-modal-window .modal-dialog {
    margin: 60px 10px 10px 10px;
}

.autherised-signing-modal-window .modal-dialog {
    margin: 70px 10px 10px 10px;
}

.modal-dialog {
    margin: auto;
}

.modal-scrollable {
    margin: 10px;
}

.modal-dialog .modal-content {
    border: 0;
}

    .modal-dialog .modal-content .modal-header {
        -moz-border-radius: 6px 6px 0 0;
        -webkit-border-radius: 6px 6px 0 0;
        border-radius: 6px 6px 0 0;
    }

.modal-scrollable .modal-content .modal-header {
    min-height: inherit;
}

.modal-scrollable .modal-content > div {
    height: calc(100vh - 20px);
    flex-direction: column;
    display: flex;
}

.modal-scrollable .modal-content .modal-body {
    overflow: auto;
    flex-grow: 1;
}

    .modal-scrollable .modal-content .modal-body > div {
        padding: 20px;
    }

.modal-dialog .modal-content .modal-body .form-group .part {
    margin-right: 5px;
    margin-left: 5px;
}

.modal-dialog .modal-content .modal-body p {
  -ms-word-break: break-all;
  word-break: break-all;
}

.modal-dialog .modal-content .modal-footer {
    text-align: center;
}

.modal-header h4,
.modal-header h5,
.modal-header h6 {
    margin: 0;
}

/*#region #1 common-alert*/

.common-alert .modal-header,
.common-alert .modal-footer {
    border: 0;
}

.common-alert .modal-body {
    padding: 0 15px 0 15px;
}

    .common-alert .modal-body p {
        text-align: center;
    }

/*#endregion*/

/*#region #2 full-page-modal-window*/

.full-page-modal-window .modal-content {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    /*min-height: 100vh;*/
}

.full-page-modal-window .modal-body {
    padding: 10px 20px;
    /* Inspired by bootstrat .scrollable-content*/
}

.full-page-modal-window .modal-footer {
    border-top: 1px solid #e2e2e2;
    /* color-level-?: #e2e2e2 */
    background: #f0f0f0 none repeat scroll 0 0;
    padding: 10px 20px;
    /*height: 3.5em;*/
}

    .full-page-modal-window .modal-footer .btn {
        /*padding: 0 .5em;*/
    }

    .full-page-modal-window .modal-footer .icon {
        /*margin-top: .2em;*/
        font-size: 1.5em;
    }

    .full-page-modal-window .modal-footer label {
        font-size: 1.2em;
    }

.signing-options-modal .modal-content {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    min-height: 100vh;
}

.opacity-0-important {
    opacity: 0 !important;
}

.signing-options-modal .modal-body {
    padding: 10px 15px;
    /* Inspired by bootstrat .scrollable-content*/
}

.signing-options-modal .modal-footer {
    border-top: 1px solid #e2e2e2;
    /* color-level-?: #e2e2e2 */
    background: #f0f0f0 none repeat scroll 0 0;
    padding: 10px 15px;
    /*height: 3.5em;*/
}

    .signing-options-modal .modal-footer .btn {
        /*padding: 0 .5em;*/
    }

    .signing-options-modal .modal-footer .icon {
        /*margin-top: .2em;*/
        font-size: 1.5em;
    }

    .signing-options-modal .modal-footer label {
        font-size: 1.2em;
    }

.legal-notice-modal-window .modal-content {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.full-page-modal-body-padding {
    padding: 10px 15px;
    /* Inspired by bootstrat .scrollable-content*/
}

.verification-info {
}

    .verification-info .floating-width > div {
        -ms-word-break: normal;
        word-break: normal;
    }

.verification-info-modal .modal-content {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    min-height: 100vh;
}

.verification-info-modal .modal-body {
    padding: 10px 15px;
    /* Inspired by bootstrat .scrollable-content*/
}

.verification-info-modal .modal-footer {
    border-top: 1px solid #e2e2e2;
    /* color-level-?: #e2e2e2 */
    background: #f0f0f0 none repeat scroll 0 0;
    padding: 10px 15px;
    /*height: 3.5em;*/
}

    .verification-info-modal .modal-footer .btn {
        /*padding: 0 .5em;*/
    }

    .verification-info-modal .modal-footer .icon {
        /*margin-top: .2em;*/
        font-size: 1.5em;
    }

    .verification-info-modal .modal-footer label {
        font-size: 1.2em;
    }

/*#endregion*/

.break-all {
    display: block;
    -ms-word-break: break-all;
    word-break: break-all;
}

/*#endregion*/

/*#region Modal backdrop colors*/

/*Google Drive UI*/
.picker-dialog-bg {
    background-color: #000;
}

/*#endregion*/

/*#region #7 Button Style*/

.btn-level-2 {
    padding: 6px 12px 5px;
    background-color: #55cf31;
    /* color-level-2: green, #55cf31 */
}

.btn-level-1 {
    padding: 6px 12px 5px;
    background-color: #2f2f2f;
    /* color-level-1: black, #2f2f2f*/
    line-height: 24px;
}

.btn-level-3 {
    padding: 6px 12px 5px;
    background-color: #fff;
    /* color-level-?: #e2e2e2 */
    border: 1px solid #d6d6d6;
    /* color-level-?: #cccccc */
    border-radius: 3px;
    line-height: 24px;
    font-size: 12px;
    min-width: 75px;
}

    .btn-level-3 span {
        color: #2f2f2f;
        /* color-level-1: black, #2f2f2f*/
    }

button {
    min-width: 7.5em;
}

    button span {
        color: #FFFFFF;
        /* color-level-5: white, #FFFFFF */
        text-transform: uppercase;
        font-weight: 600;
    }

.modal-footer button {
    min-width: 30%;
    /*max-width: 45%;*/
}

/*#endregion*/

/*#region #8 Copyright Footer*/
.copy-rights-footer {
    background: #ffffff none repeat scroll 0 0;
    padding: 1em 0 0.5em;
    font-size: 12px;
}

/*#endregion*/

/*#region #9 Custom Grid*/
.custom-grid {
    padding: 10px 0;
}

    .custom-grid .header {
        padding: 9px;
        /*0.8em;*/
        font-size: inherit;
        font-weight: 600;
        text-align: center;
        border: 0;
    }

    .custom-grid .row {
        margin-left: 0;
        margin-right: 0;
    }

    .custom-grid .body {
        border: 1px solid;
        -moz-border-radius: 0.3em;
        -webkit-border-radius: 0.3em;
        border-radius: 0.3em;
        border-color: #e2e2e2;
        /* color-level-?: #e2e2e2 */
    }

        .custom-grid .body .row {
            padding: 10px;
            /*16px 20px;*/
            /*0.8em;*/
            /*font-size: 0.9em;*/
            border-top: 1px solid #e2e2e2;
            /* color-level-?: #e2e2e2 */
        }

            .custom-grid .body .row:first-child {
                border-top: 0;
            }

            .custom-grid .body .row:last-child {
            }

        .custom-grid .body .title {
            /*padding-top: 1.2em;
            padding-bottom: 1.2em;*/
            font-size: inherit;
        }

            .custom-grid .body .title label {
                font-size: 1.1em;
                margin-bottom: 0;
                text-transform: uppercase;
            }

/*#endregion*/

/*#region #9a custom-table*/
.custom-table-cell {
    display: table-cell;
    vertical-align: middle;
    -ms-word-break: break-all;
    word-break: break-all;
}

.custom-table {
    display: table;
    width: 100%;
    border: 1px solid;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    border-color: #e2e2e2;
    /* color-level-?: #e2e2e2 */
}

    .custom-table .custom-table-row {
        /*display: table-row;*/
        padding: 10px;
        border-top: 1px solid #e2e2e2;
        /* color-level-?: #e2e2e2 */
    }

        .custom-table .custom-table-row:first-child {
            border-top: 0;
        }

        .custom-table .custom-table-row:last-child {
        }

    .custom-table .custom-table-cell {
        padding: 0 5px;
    }

        .custom-table .custom-table-cell:first-child {
            padding-left: 0;
        }

        .custom-table .custom-table-cell:last-child {
            padding-right: 0;
        }

/*#endregion custom-table*/

/*#region #9b Login Page*/
/*.login .scrollable-footer {
    border: 0;
}*/

.btn-sso-login {
    color: #000000;
    border-width: 1px;
    border-style: solid;
    background-color: transparent;
    border-color: #ccf1c1;
    /* color-level-12: Ascertia Brand = Tint of Level 2, #ccf1c1 */
    margin: 10px auto;
    padding: 15px;
}

.login .btn-sso-login span {
    text-transform: capitalize;
}

.copy-rights-footer .dropup .caret {
    border-bottom: 4px dashed;
    border-top: 0 none;
    content: "";
}

.copy-rights-footer .dropdown-menu {
    max-height: 50vh;
    margin-bottom: 0;
    margin-left: 0;
    min-width: 10em;
    border: 1px solid;
    border-color: #cccccc;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    left: auto;
    right: 0;
}

    .copy-rights-footer .dropdown-menu > li {
        border: none;
    }

/*#endregion*/

/*#region #10 mydesk/Dashboard Page*/

.mydesk-grid {
    background-color: #363636;
    /* color-level-10: Tint 2 of Level 1 #363636 (2016-04-20 updated from #434343)*/
    color: #FFFFFF;
    /* color-level-5: white, #FFFFFF */
    border-color: #545454;
    /* color-level-6: Tint 1 of level 1, #545454 */
    text-align: center;
}

.mydesk {
}

    .mydesk .scrollable-content {
        /*padding: 0 10px;*/
    }

    .mydesk .padding {
        padding: 14px 0 14px 0;
        /*
        padding-top: 1.0em;
        padding-right: 0;
        padding-bottom: 1.0em;
        padding-left: 0;
        */
    }

    .mydesk .page-header-2 {
        border-bottom: 1px solid;
        border-color: #545454;
        /* color-level-6: Tint 1 of level 1, #545454 */
    }

    .mydesk .welcome-msg {
        font-size: 1.5em;
    }

    .mydesk .mydesk-grid .row {
        margin-left: 0;
        margin-right: 0;
    }

    .mydesk .row-pending-document {
        font-size: 1.2em;
        text-transform: uppercase;
        padding-bottom: 1.0em;
    }

        .mydesk .row-pending-document .count {
            font-size: 6.0em;
            color: #55cf31;
            /* color-level-2: green, #55cf31 */
        }

    .mydesk .row-document {
        text-transform: uppercase;
    }

        .mydesk .row-document .count {
            font-size: 3.0em;
        }

            .mydesk .row-document .count .font-9x {
                font-size: .9em;
            }

            .mydesk .row-document .count .font-8x {
                font-size: .8em;
            }

            .mydesk .row-document .count .font-7x {
                font-size: .7em;
            }

            .mydesk .row-document .count .font-6x {
                font-size: .6em;
            }

            .mydesk .row-document .count .font-5x {
                font-size: .5em;
            }

            .mydesk .row-document .count .font-4x {
                font-size: .4em;
            }

    .mydesk .border {
        border: 1px;
        border-style: solid;
        border-color: #545454;
        /* color-level-6: Tint 1 of level 1, #545454 */
    }

        .mydesk .border:first-child,
        .mydesk .border:last-child {
            border-left: 0;
            border-right: 0;
        }

    .mydesk .btn-level-1 {
        background-color: transparent;
    }

    .mydesk .btn-level-1,
    .mydesk .btn-level-2 {
        font-weight: 400;
        border: 0;
        padding: 10px 20px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }

        .mydesk .btn-level-1 span,
        .mydesk .btn-level-2 span {
            font-size: 1.1em;
            font-weight: 400;
        }

            .mydesk .btn-level-1 span .icon,
            .mydesk .btn-level-2 span .icon {
                font-size: 1.5em;
                color: #ffffff;
            }

/*#endregion*/

/*#region #11 Registration*/
.register {
}

    .register .page-title {
        color: #FFFFFF;
        /* color-level-5: white, #FFFFFF */
        background-color: #55cf31;
        /* color-level-2: green, #55cf31 */
    }

    /*Bug 8372 padding and margin is over-ridden*/
    .register fieldset > legend {
        padding: .2em 0 .4em 0;
    }

    .register .checkbox label {
        margin-bottom: .4em;
    }

/*#endregion*/

/*#region #12 Invitations*/
.invitation-grid {
    position: relative;
    padding: 0.5em 0;
}

    .invitation-grid .icon-angle-left,
    .invitation-grid .icon-angle-right {
        transform: translateY(-50%);
        color: #e2e2e2;
        /* color-level-?: #e2e2e2 */
        /*padding-top: 2.25em;*/
        position: absolute;
        top: 50%;
        left: -15px;
        z-index: 999;
    }

    .invitation-grid .icon-angle-right {
        left: auto;
        right: -15px;
    }

    .invitation-grid .row {
        margin-left: -.1em;
        margin-right: -.1em;
    }

        .invitation-grid .row > div {
            padding: 0;
        }

.invitation .custom-grid {
    max-width: 85%;
    margin: auto;
}

/*#endregion*/

/*#region #12a Login Page*/

.login {
}

    .login .remember-me {
        margin-top: -1.7em;
    }

        .login .remember-me label {
            font-weight: inherit;
        }

/*#endregion*/

/*#region #12b Document List*/

/*#region filter*/
.document-listing .filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 5px;
    padding-right: 0;
    border-bottom: 1px solid #ddd;
}
.document-listing .filter  .input-group {
    padding:0;
}

.document-listing .filter .doc-search {
    width: 100%;
}

    .document-listing .filter .icon-angle-down {
        font-size: .7em;
    }

    .document-listing .filter .sorting-dropdown .dropdown-menu {
        min-width: 180px;
        right: 10px;
    }

.document-listing .filter .dropdown-menu {
    min-width: 18em;
    font-size: 1.1em;
    margin-top: -10px;
    margin-left: -2px;
}

    .document-listing .filter .dropdown-menu > li {
    /*border-color: #e2e2e2; /* color-level-?: #e2e2e2 */
    }

    .document-listing .filter .dropdown-menu > li > a {
        text-transform: inherit;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .document-listing .filter .dropdown-menu .icon-stack {
        top: -5px !important;
    }

/*#endregion*/

.document-listing .document-name {
    /*height: 3em;*/
    font-size: 1em;
    padding-bottom: 1px;
    margin-top: -2px;
    font-weight: 500;
    word-break: normal;
}

.document-listing .unread {
    /*background-color: #f4f5f2;*/
}

    .document-listing .unread .document-name {
        font-weight: 600;
    }

.document-listing .btn {
    min-width: 1em;
}

.document-listing .scrollable,
.document-listing .scrollable-content {
    height: inherit;
    /*It is done in order make drop-down menu visible, and scroll event*/
}

.document-listing .scrollable-content {
    /*padding: 0 10px;*/
}

/*#region List Borders*/
.document-listing .custom-grid .body {
    border: 0;
}

    .document-listing .custom-grid .body .row {
        border-top: 0;
        border-bottom: 1px solid #e2e2e2;
        /* color-level-?: #e2e2e2 */
        padding-left: 5px;
    }

        .document-listing .custom-grid .body .row:first-child {
            /*border-top: 1px solid #e2e2e2; /* color-level-?: #e2e2e2 */
        }

        .document-listing .custom-grid .body .row:last-child {
            border-bottom: 1px solid #e2e2e2;
            /* color-level-?: #e2e2e2 */
        }

/*#endregion*/

/*#region Alignment of record attributes displayed in list row*/
.document-listing .custom-grid .row > div {
    /*border-top: 1px dashed green;*/
}

/*#region checkbox*/
.document-listing .custom-grid .row .checkbox-cell {
    /*width: 2em;*/
    padding-left: 5px;
}

    .document-listing .custom-grid .row .checkbox-cell .checkbox {
        /*padding: 0;*/
        /*margin: 0;*/
        /*margin-top: -4px !important; /*margin decides the top alignment*/
    }

/*#endregion*/

/*#region icon*/
.document-listing .custom-grid .row .icon-cell {
    width: 2.3em;
}

    .document-listing .custom-grid .row .icon-cell .icon {
        /*width: 2em;*/
        font-size: 1.4em;
    }

/*#endregion*/

/*#region date*/
.document-listing .custom-grid .row .date-cell > div {
    width: 5em;
    margin-top: -2px !important;
    /*margin decides the top alignment*/
}

/*#endregion*/

/*#region document name*/
.document-listing .custom-grid .row .floating-width > div > div:first-child {
    /*margin-top: -2px !important;*/
}

.document-listing .custom-grid .row .floating-width > div > div:last-child {
    margin-bottom: -2px !important;
}

/*#endregion*/

/*#endregion*/

/*#region scrollable-footer*/
.scrollable-footer .list-inline {
    margin-bottom: 7px;
}

    .scrollable-footer .list-inline li {
        position: relative;
    }

        .scrollable-footer .list-inline li + li:before {
            transform: translateY(-50%);
            background-color: #dcdcdc;
            position: absolute;
            height: 16px;
            content: '';
            left: -2px;
            width: 1px;
            top: 50%;
        }

.scrollable-footer .footer-holder {
    overflow: hidden;
}

/*#endregion*/
/*#endregion*/

/*#region #13 Element Alignment*/

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

/*#endregion*/

/*#region #14 Text Over-flow Style*/
.ellipsis {
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    /* Required for text-overflow to do anything */
    white-space: nowrap;
    overflow: hidden;
}

/*option1*/
/* styles for '...' */
.ellipsis-2-line {
    /* hide text if it more than N lines  */
    overflow: hidden;
    /* for set '...' in absolute position */
    position: relative;
    /* use this value to count block height */
    line-height: 1.5em;
    /* max-height = line-height (1.2) * lines max number (3) */
    max-height: 3em;
    /* fix problem when last visible word doesn't adjoin right side  */
    /*text-align: justify;  */
    /* place for '...' */
    margin-right: -2em;
    padding-right: 2em;
}

    /* create the ... */
    .ellipsis-2-line:before {
        /* points in the end */
        content: '...';
        /* absolute position */
        position: absolute;
        /* set position to right bottom corner of block */
        right: 0;
        bottom: 0;
    }

    /* hide ... if we have text, which is less than or equal to max lines */
    .ellipsis-2-line:after {
        /* points in the end */
        content: '...';
        /* absolute position */
        position: absolute;
        /* set position to right bottom corner of text */
        right: 0;
        /* set width and height */
        width: 1em;
        height: 1em;
        margin-top: 0.2em;
        /* bg color = bg color under block */
        background: white;
    }

/*option2*/
.container1 {
    /*font-size: 18px;*/
    /*height: 40px;*/
    height: 3em;
    overflow: hidden;
    position: relative;
    background: white;
    /*margin-bottom: 1em;*/
}

    .container1:after {
        content: '...';
        position: absolute;
        bottom: 0;
        right: 0;
        /*padding: 0 0.3em;*/
        background: inherit;
    }

    .container1 span:after {
        content: '\0000a0';
        position: absolute;
        /*width: 1000px;*/
        z-index: 1;
        /*background: white;*/
    }

/*#endregion*/

/*#region #15 Floating-Width-Element*/
.floating-width {
    display: block;
    overflow: hidden;
}

.floating-width > div {
    position: relative;
}
.header-title .floating-width > div {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}


    .viewer .page-indicator {
        display: block;
        position: absolute;
        padding: 5px 10px;
        /* height: 40px; */
        z-index: 2000;
        top: 100px;
        /*border: 2px solid #55cf31; /* color-level-2: green, #55cf31 */
        background: #2f2f2f none repeat scroll 0 0;
        color: #ffffff;
        -webkit-transition: all 2s;
        /* Safari */
        -webkit-transition-timing-function: ease-out;
        /* Safari */
        -moz-transition: all 2s;
        -o-transition: all 2s;
        transition: all 2s;
        -moz-transition-timing-function: ease-out;
        -o-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
        opacity: 1;
    }

    /*#region #1 header*/
    /*#endregion*/

    /*#region #2 scrollable-footer2*/
    .viewer .scrollable,
    .viewer .scrollable-content {
        height: inherit;
        /*It is done in order make drop-down menu visible, and scroll event*/
    }

    .viewer .scrollable-content {
        padding: 0 10px;
    }

    /*#endregion */

    /*#region #3 viewer options*/
    .viewer .viewer-options {
    }

        .viewer .viewer-options .icon {
            padding-left: 5px;
            padding-right: 5px;
            font-size: 2em;
        }


    .viewer .viewer-options .icon.icon-comment {
        margin-top:5px;
    }


    .viewer .viewer-options .icon.icon-upload {
        margin-top: 3px;
    }



/*#endregion */
/*#region #3 document fields*/
    .viewer .document-page {
        margin-top: 5px;
        margin-bottom: 5px;
        margin-right: 5px;
        border: 1px solid;
        border-color: #e2e2e2;
        /* color-level-?: #e2e2e2 */
        width: 100%;
        -moz-box-shadow: 2px 2px 2px grey;
        -webkit-box-shadow: 2px 2px 2px grey;
        box-shadow: 2px 2px 2px grey;
        overflow: auto;
        position: relative;
        left: 0px;
        top: 0px;
    }

        .viewer .document-page.current_page {
            border-color: #55cf31;
            /* color-level-2: Green #55cf31 */
        }

        .viewer .document-page .loading-page {
            padding-top: 10px;
            width: 25px;
        }

        /*#region #3a document fields*/
        .viewer .document-page .resizeable {
            z-index: 90;
            cursor: se-resize;
            width: 14px;
            height: 14px;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            background-color: #007aff;
            /* color-level-?: ????, #007aff */
        }

        .viewer .document-page .page-field {
            padding-top: 0;
            padding-bottom: 0;
            padding-left: 0px;
            padding-right: 0px;
            -moz-border-radius: 0px;
            -webkit-border-radius: 0px;
            border-radius: 0px;
            border: 0.25px solid;
            border-color: black;
            color: black;
            max-width: none;
            /*line-height: normal; */
            margin-top: 0px;
            min-height: 1px;
            min-width: 1px;
        }

            .viewer .document-page .page-field .signature-field-invisible {
                position: absolute;
                left: 5px;
                top: 5px;
            }

            .viewer .document-page .page-field .vertical-align-date {
                margin: auto;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
            }

            .viewer .document-page .page-field.draft-embedded {
                border: 1px solid;
                border-color: #007aff;
                /* color-level-?: ????, #007aff */
            }

            .viewer .document-page .page-field > div,
            .viewer .document-page .page-field > div > span {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

        .viewer .document-page .form-field {
            background-color: white;
            overflow: hidden;
        }

        .viewer .document-page .page-field.bringToTop {
            z-index: 10000;
        }

    .viewer .document-page .page-field.attachment-field.processed {
        border: none;
        background: #EBEBEB;
    }

    .viewer .document-page .form-field::-moz-placeholder {
      color: #767676;
    }

        .viewer .document-page .form-field:-webkit-input-placeholder {
            color: #767676;
        }

        /* firefox 19+ */
        .viewer .document-page .form-field:-ms-input-placeholder {
            color: #767676;
        }

        .viewer .document-page .form-field::placeholder {
            /* Chrome, Firefox, Opera, Safari 10.1+ */
            color: #767676;
            opacity: 1;
            /* Firefox */
        }

        .viewer .document-page .form-field .placeholder {
            color: #767676;
            /*opacity: 0.8;*/
        }

        .viewer .document-page .mandatory-icon {
            color: #e03500;
            /* color-level-3: Yellow, #e03500 */
            /*font-size: 12px;*/
            position: absolute;
            /* z-index: 1; */
        }

            .viewer .document-page .mandatory-icon.signature-field {
                right: -1px;
                /*top: 2px;*/
                margin-right: 2px;
            }

            .viewer .document-page .mandatory-icon.digital-signature-field {
                right: -1px;
                top: 3px;
                margin-right: 2px;
            }

            .viewer .document-page .mandatory-icon.mandatory-form-field {
                line-height: 1em;
                right: 2px;
                /*top: 2px;*/
                /*margin-top: -3px;*/
            }

            .viewer .document-page .mandatory-icon.mandatory-radio {
                right: -2px;
                top: -1px;
            }

        .viewer .document-page .disabled .mandatory-icon,
        .viewer .document-page .processed .mandatory-icon {
            display: none;
        }

        .viewer .document-page .assigned {
            border-color: #ffb600;
            /* color-level-7: Yellow, #ffb600 */
            background-color: #F9DA00;
            /* color-level-8: Tint1 of Level 7, #f8da00 */
        }

        /*
        .viewer .document-page .animate:focus, .viewer .document-page .active:focus {
            -moz-animation-name: blink;
            -o-animation-name: blink;
            -webkit-animation-name: blink;
            animation-name: blink; /*TO TO: animation in web-kit etc iOS5*/
        /*
            -moz-animation-duration: 0.7s;
            -o-animation-duration: 0.7s;
            -webkit-animation-duration: 0.7s;
            animation-duration: 0.7s;
            -moz-animation-iteration-count: 3;
            -o-animation-iteration-count: 3;
            -webkit-animation-iteration-count: 3;
            animation-iteration-count: 3;
            -moz-animation-direction: alternate;
            -o-animation-direction: alternate;
            -webkit-animation-direction: alternate;
            animation-direction: alternate;
        }
    */
        .viewer .document-page .highlight {
            -moz-animation-name: blink;
            -o-animation-name: blink;
            -webkit-animation-name: blink;
            animation-name: blink;
            -moz-animation-duration: 0.7s;
            -o-animation-duration: 0.7s;
            -webkit-animation-duration: 0.7s;
            animation-duration: 0.7s;
            -moz-animation-iteration-count: 3;
            -o-animation-iteration-count: 3;
            -webkit-animation-iteration-count: 3;
            animation-iteration-count: 3;
            -moz-animation-direction: alternate;
            -o-animation-direction: alternate;
            -webkit-animation-direction: alternate;
            animation-direction: alternate;
        }

        /*
        .viewer .document-page .active {
            border-color: #FFB600;
            background-color: #F9DA00;
        }
        */
        .viewer .document-page .disabled {
            border-color: #808080;
            background-color: #E6E6E6;
            opacity: 1;
        }

        .viewer .document-page .unprocessed {
            display: table;
            font-size: 1em;
            /*padding: 5px;*/
        }

            .viewer .document-page .unprocessed .icon {
                display: none;
                /* Hide icon for an unprocessed field */
            }

            .viewer .document-page .unprocessed > div {
                display: flex;
                justify-content: center;
                height: 100%;
                align-items: center;
                flex-direction: column;
                text-align: center;
            }

            .viewer .document-page .unprocessed.sh-initial > div,
            .viewer .document-page .unprocessed.sh-hand-signature > div {
                /* padding-bottom: 2px;*/
            }

                .viewer .document-page .unprocessed.sh-signature > div > span,
                .viewer .document-page .unprocessed.sh-hand-signature > div > span {
                    border-bottom: 1px dotted;
                }

            .viewer .document-page .unprocessed div span {
                text-align: center;
            }

        .viewer .document-page .processed.verification {
            border: 1px solid;
        }

        .viewer .document-page .processed {
            display: table;
            font-size: 1em;
        }

            .viewer .document-page .processed .icon {
                /*float: right;
                padding: 2px;*/
                position: absolute;
                right: 2px;
                top: 2px;
            }

                .viewer .document-page .processed .icon.icon-certify-document,
                .viewer .document-page .processed .icon.icon-check-circle,
                .viewer .document-page .processed .icon.icon-exclamation-triangle {
                    font-size: 8px;
                }

            .viewer .document-page .processed div {
                display: none;
                /* Hide div containing place holder */
            }

.attachment-caption {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
}

.attachment-caption span {
    display:flex;
    justify-content:center;
    align-items:center;
    height:100%;
    width:100%;
}
.attachment-caption span svg.download {
    margin-left: 3px;
}


.viewer .document-page .declined {
    display: table;
    font-size: 1em;
    padding: 5px;
}

.viewer .document-page .declined div {
    opacity: 0.3;
    /*border:1px solid red;*/
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    -moz-background-origin: content-box;
    -webkit-background-origin: content-box;
    background-origin: content-box;
    background-position: center;
    /*background-size: auto;*/
    background-repeat: no-repeat;
    line-height: 20px;
    background-image: url("/Content/themes/default/icons/svg/ban.svg");
    /*                background-size: 15px auto;*/
}

.viewer .document-page .declined span {
    opacity: 0;
}

        /*#region #3a1 - new*/
        .viewer .document-page .radiobox {
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            border: 1px solid;
            background-color: #fff;
            border-color: #000;
            display: block;
            line-height: 0;
        }

            .viewer .document-page .radiobox > label {
                width: 100%;
                height: 100%;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
                /*display: table-cell;*/
                background-color: #fff;
                /*border: 1px solid #fff;*/
            }

                .viewer .document-page .radiobox > label.fill-color {
                    background-color: #000;
                }

            .viewer .document-page .radiobox.current-signer {
                border-color: #ffb600;
            }

                .viewer .document-page .radiobox.current-signer > label {
                    background-color: #F9DA00;
                    border-color: #F9DA00;
                }

            .viewer .document-page .radiobox.resizeable-radio-checkbox {
                border: 1px solid;
                border-color: #007aff;
            }

            /* Disabled Radio Boxes*/
            .viewer .document-page .radiobox.disabled {
                background-color: #ccc;
            }

                .viewer .document-page .radiobox.disabled > label.fill-color {
                    background-color: #7c7d82 !important;
                    border-color: #cccccc !important;
                }

        /*#endregion*/

        /*#region #3a2*/
        .viewer .document-page .checkbox {
            border: 1px solid;
            background-color: white;
        }

            .viewer .document-page .checkbox.resizeable-radio-checkbox {
                border: 1px solid;
                border-color: #007aff;
                /* color-level-7: Yellow, #ffb600 */
            }

            .viewer .document-page .checkbox.disabled {
                background-color: #ccc;
                border-color: #7c7d82;
            }

            .viewer .document-page .checkbox > label {
                padding-left: 14px;
                left: 50%;
                top: 50%;
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                position: absolute;
                min-height: 10px;
                line-height: 10px;
            }

                .viewer .document-page .checkbox > label:before {
                    height: 8px;
                    /*14px;*/
                    width: 8px;
                    /*14px;*/
                    content: "";
                    display: inline-block;
                    position: absolute;
                    left: 1px;
                    /*0;*/
                    margin-top: -1px;
                    /*3px;*/
                    border: 0;
                    background-color: transparent;
                    /*white;*/
                }

            .viewer .document-page .checkbox input[type=checkbox]:focus + label:before {
                -moz-box-shadow: none;
                -webkit-box-shadow: none;
                box-shadow: none;
                border: none;
            }

            .viewer .document-page .checkbox input[type=checkbox]:checked + label:before {
                background-color: transparent;
                /*white;*/
            }

            .viewer .document-page .checkbox label:after {
                /*padding-left: 3px;*/
                padding-top: 0;
                font-size: 6px;
                /*12px;*/
                height: 8px;
                width: 8px;
                /*15px;*/
                left: 0;
                /*-2px;*/
                top: 0;
            }

            .viewer .document-page .checkbox input[type=checkbox]:checked + label:after {
                color: #232323;
            }

            .viewer .document-page .checkbox input[type=checkbox]:disabled + label {
                /*opacity: 1;*/
            }

                .viewer .document-page .checkbox input[type=checkbox]:disabled + label:before {
                    background-color: transparent;
                }

            /*#endregion*/

            /*#region #3a3*/

            .viewer .document-page .radio.current-signer,
            .viewer .document-page .checkbox.current-signer {
                /*background-color: rgba(248, 218, 0, 0.5);*/
                border-color: #ffb600;
                /* color-level-7: Yellow, #ffb600 */
            }

/*#endregion*/

/*#endregion*/

/*#endregion*/
/*#endregion */

/*#region #17 modals*/

/*#region #1 modal-header background-color*/
.recipient-options-modal .modal-header,
.document-source-selection-modal .modal-header,
.add-contact-modal .modal-header,
.document-decline .modal-header,
.warning-modal .modal-header,
.document-otp .modal-header,
.add-field-options-window .modal-header,
.document-password .modal-header,
.ui-widget-header {
    background-color: #e2e2e2;
    /* color-level-?: #e2e2e2 */
}

/*#endregion*/

/*#region #2 document-otp*/

.document-otp .modal-body {
    padding: 0;
}

    .document-otp .modal-body .custom-grid .body {
        border: 0;
    }

        .document-otp .modal-body .custom-grid .body .form-group {
            text-align: center;
        }

/*#endregion*/

/*#region #3 document-info*/

/*#endregion*/

/*#region #4 legal-notice*/

.legal-notice .scrollable-footer {
    border-top: 0px solid #e2e2e2;
    /* color-level-?: #e2e2e2 */
    background: none;
    text-align: center;
    padding: 20px 0;
}

.legal-notice .scrollable-content {
    border: 0px solid red;
    padding-top: 30px;
    padding-bottom: 30px;
}

/*#endregion*/

/*#region #5 fields-options*/

.fields-options .modal-body {
    /*padding: 0;*/
}

    .fields-options .modal-body .custom-grid .body {
        border: 0;
    }

/*#region #5a fields-options header*/
.fields-options .page-header .btn {
    color: #55cf31;
    /* color-level-2: green, #55cf31 */
    background-color: #232323;
    /* color-level-11: black, #232323*/
    /*border: 1px solid;*/
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    min-width: inherit;
    padding-top: 3px;
    padding-bottom: 2px;
}

    .fields-options .page-header .btn > span {
        color: #55cf31;
        /* color-level-2: green, #55cf31 */
    }

/*#endregion*/

/*#region #5b fields-options dropdown-menu*/

/*#region filter*/
.fields-options {
    padding: .8em 0;
}

    .fields-options .icon-angle-down {
        font-size: .7em;
    }

    .fields-options .dropdown-menu {
        margin-top: 0;
        min-width: 18em;
    }

        .fields-options .dropdown-menu > li {
            /*border-color: #e2e2e2; /* color-level-?: #e2e2e2 */
            padding: .2em 0.5em;
        }

            .fields-options .dropdown-menu > li > a {
                text-transform: inherit;
                white-space: inherit;
            }

        .fields-options .dropdown-menu .icon-stack {
            top: -5px !important;
        }

    /*#endregion*/

    /*#endregion*/

    /*#region #5c fields-options hand-signature*/
    .fields-options .modal-body .custom-grid .hand-signature.body {
        border-width: 1px;
        border-style: solid;
    }

.hand-signature.body > button {
    border-top: 1px dashed;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
}

/*#region #5c1 fields-options hand-signature-text*/

.hand-signature-method-text {
    width: 100%;
    height: 100%;
    display: table;
}

    .hand-signature-method-text > div {
        clear: both;
        overflow: hidden;
        white-space: nowrap;
        font-family: phontphreaks_handwritingRg;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        padding: 0 10px;
    }

/*#endregion*/

/*#region #5c2 fields-options hand-signature-upload*/
.hand-signature-method-upload {
    width: 100%;
    height: 100%;
    display: table;
}

    .hand-signature-method-upload > div {
        clear: both;
        overflow: hidden;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

/*#endregion*/

/*#region #5c3 fields-options hand-signature-draw*/
.hand-signature-method-draw {
    width: 100%;
    height: 100%;
    display: table;
}

    .hand-signature-method-draw > canvas {
        display: table-cell;
        margin-left: 1px;
        margin-top: 1px;
    }

    .hand-signature-method-draw > div {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

/*#endregion*/

/*#endregion*/

/*#endregion*/

/*#region #6 crop-image-modal */
.crop-image-modal {
}

    .crop-image-modal .crop-area {
        overflow: hidden;
        height: 228px;
    }

/*#endregion*/

/*#region #2 add field options*/
.add-field-options-window {
}

    .add-field-options-window .modal-dialog {
        margin: 20px 10px 10px;
    }

    .add-field-options-window .modal-body {
        overflow-y: scroll;
        -webkit-border-bottom-left-radius: 4px;
        border-bottom-left-radius: 4px;
        -webkit-border-bottom-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }

        .add-field-options-window .modal-body .dropdown-menu {
            width: 100%;
            -moz-border-radius: 0;
            -webkit-border-radius: 0;
            border-radius: 0;
            top: 0;
        }

            .add-field-options-window .modal-body .dropdown-menu > li {
                /*border-color: #e2e2e2; /* color-level-?: #e2e2e2 */
            }

            .add-field-options-window .modal-body .dropdown-menu .icon {
                color: #ffb600;
                /* color-level-7: Yellow, #ffb600 */
                text-align: left;
                margin-left: 5px;
            }

/*#endregion*/

/*#endregion*/

/*#region #18 Notifications*/

.badge {
    border: 1px solid;
    background-color: #f8da00;
    /* color-level-8: Tint1 of Level 7, #f8da00 */
    border-color: #ffb600;
    /* color-level-7: Yellow, #ffb600 */
    color: #000000;
    /*-moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    height: 18px;
    width: 18px;*/
    position: absolute;
    /*font-size: .8em;*/
    /*margin-top: -8px;*/
    padding: 1px;
    font-family: roboto_regular;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    display: inline-block;
    min-width: 16px;
    height: 16px;
    line-height: 1;
    text-align: center;
}

.badge-header {
    padding: 2px 0;
}

.badge-nav-menu {
    padding: 2px 0;
}

.badge-header-2 {
    padding: 3px 0;
    font-size: .5em;
}

.badge-nav-menu-2 {
    padding: 3px 0;
    font-size: .6em;
}

.badge-header-3 {
    padding: 4px 0;
    font-size: .4em;
}

.badge-nav-menu-3 {
    padding: 4px 0;
    font-size: .5em;
}

.notifications-list .icon {
}

.notifications-list .btn {
    text-transform: uppercase;
    margin-top: 5px;
    padding: 0 5px;
}

body.android.firefox .notifications-list .btn,
body.windows.firefox .notifications-list .btn {
    padding: 1px 5px 0;
    /*background-color: #f00;*/
}

body.andriod.chrome .notifications-list .btn,
body.windows.chrome .notifications-list .btn {
    padding-top: 3px;
    /*background-color: #f00;*/
}

.notifications-list .not-h1 {
    margin-bottom: 3px;
    font-weight: bold;
    font-size: 16px;
}

.notifications-list .not-h2 {
    margin-bottom: 3px;
}

.notifications-list .not-h3 {
}

.notifications-list .custom-grid .body .row {
    padding: 16px 100px 16px 20px;
    position: relative;
}

.notifications-list .body .pull-right {
    transform: translateY(-50%);
    position: absolute;
    right: 20px;
    top: 50%;
}

/*#endregion*/

/*#region #19 iOS specific styles*/
select,
select:focus,
textarea,
textarea:focus,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
    font-size: 16px;
}

input[type="datetime-local"] {
    display: block;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/*#endregion*/

/*#region #20 workflow*/
.workflow .scrollable-content {
    padding: 0;
}

.workflow .custom-grid {
    padding: 0;
}

    .workflow .custom-grid .body {
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
        border: none;
    }

    .workflow .custom-grid .header-row {
        text-transform: uppercase;
        font-weight: 600;
    }

    .workflow .custom-grid .row .floating-width {
        padding: 5px 10px 0;
        -ms-word-wrap: break-word;
        word-wrap: break-word;
    }

    .workflow .custom-grid .row .font-level-2 {
        font-size: 14px;
    }

    .workflow .custom-grid .recipient-area .row .font-level-2 {
        margin-bottom: 4px;
    }

    .workflow .custom-grid .dropdown-menu {
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        border-radius: 0px;
        min-width: 13em;
        opacity: 1;
    }

        .workflow .custom-grid .dropdown-menu > li {
            font-size: 12px;
            /*border-color: #e2e2e2; /* color-level-?: #e2e2e2 */
        }

            .workflow .custom-grid .dropdown-menu > li > a {
                padding: .3em 0.3em;
            }

.workflow .document-area {
    border-top: 1px solid #d6d6d6;
    padding: 0 20px 10px;
    background: #fff;
}

    .workflow .document-area .row {
        border: none;
        border-bottom: 1px solid #d6d6d6;
        padding: 11px 0;
    }

        .workflow .document-area .row.no-record {
            border-bottom: none;
            padding-bottom: 0;
        }

        .workflow .document-area .row .pull-left .btn-icon,
        .workflow .recipient-area .row .pull-left .btn-icon .workflow .document-area .row .pull-left .btn-icon > span,
        .workflow .recipient-area .row .pull-left .btn-icon > span {
            font-size: 14px;
        }

            .workflow .document-area .row .pull-left .btn-icon > span {
                padding-top: 7px;
            }

            .workflow .document-area .row .pull-left .btn-icon span,
            .workflow .recipient-area .row .pull-left .btn-icon span {
                font-weight: normal;
            }

.workflow .recipient-area {
    border-top: 1px solid #d6d6d6;
    background-color: #fff;
    padding: 0 20px 20px;
}

    .workflow .recipient-area .row {
        border: none;
        border-bottom: 1px solid #d6d6d6;
        padding: 11px 0;
    }

        .workflow .recipient-area .row .user-name {
            font-size: 15px;
        }

    .workflow .recipient-area .recipient-holder {
        width: 65%;
    }

.workflow .recipient-area .recipient-holder .user-drop {
    max-width: 250px;
}
    .workflow .recipient-area .recipient-holder .user-drop.delivery-btn a {
        border: 1px solid #2b7af0 !important;
        box-shadow: none;
        border-radius: 50px;
        display: inline-block;
        padding: 6px 10px 5px;
        color: #2b7af0;
    }


/*#endregion*/

/*#region #21 library documents list*/

.library-documents-list-modal .custom-grid .body .row {
}

    .library-documents-list-modal .custom-grid .body .row:first-child {
        /*border-top: 1px solid #e2e2e2;*/
    }

    .library-documents-list-modal .custom-grid .body .row:last-child {
        border-bottom: 1px solid #e2e2e2;
    }

/*#endregion*/

/*#region #22 nav-tabs*/
.nav-header {
    border-bottom: 1px solid #e2e2e2;
    padding-left: 15px;
    padding-right: 15px;
    height: 88px;
}

    .nav-header .nav-tabs-link {
    }

.nav-tabs-body .custom-grid .body .row {
    padding: 10px 15px;
}

    .nav-tabs-body .custom-grid .body .row .icon-check-container {
        min-width: 20px;
    }

/*#endregion*/

.loading-more {
    width: 30px;
}

.border-none {
    border: 0;
}

/*#region #23 contact-list-modal */

.contact-list-modal {
}

    .contact-list-modal .custom-grid .body .row:first-child {
        border-top: 1px solid #e2e2e2;
    }

    .contact-list-modal .btn-group > .btn-default.active {
        background-color: #ccf1c1;
        /* color-level-2: light-green, #ccf1c1 */
        color: #fff;
        border-color: #55cf31;
        /* color-level-2: green, #55cf31 */
    }

    .contact-list-modal .custom-grid .body .row {
        padding-right: 15px;
        padding-left: 15px;
    }

/*#endregion*/

/*#region #24 group-list-modal */

.group-list-modal {
}

    .group-list-modal .custom-grid .body .row:first-child {
        border-top: 1px solid #e2e2e2;
    }

    .group-list-modal .btn-group > .btn-default.active {
        background-color: #ccf1c1;
        /* color-level-12: light-green, #ccf1c1 */
        color: #fff;
        border-color: #55cf31;
        /* color-level-2: green, #55cf31 */
    }

    .group-list-modal .custom-grid .body .row {
        padding-right: 15px;
        padding-left: 15px;
    }

/*#endregion*/

/*#region #25 document-list-modal */
.document-list-modal .modal-body {
    padding: 0px;
}

.document-list-modal .custom-grid .body .row {
    font-size: 1.2em;
}

    .document-list-modal .custom-grid .body .row .icon {
        margin: 5px 10px 5px 5px;
    }

/*#endregion*/

/*#region #26 No Select*/
.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Chrome/Safari/Opera */
    -khtml-user-select: none;
    /* Konqueror */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  not supported by any browser */
}

.disableSave {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/*#endregion*/

/*#region 27 */
.truncate-ellipsis {
    display: table;
    table-layout: fixed;
    width: 100%;
    white-space: nowrap;
}

    .truncate-ellipsis > * {
        display: table-cell;
        overflow: hidden;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

.content-middle-align {
    transform: translateY(-50%);
    display: block !important;
    position: absolute;
    width: auto;
    right: 10px;
    left: 10px;
    top: 50%;
}

/*#endregion*/
/*#region 28 Processing*/
.circle-processing {
    padding: 0 !important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    border: 4px solid rgba(100, 100, 100, 0.2);
    border-top-color: #55cf31;
    -moz-animation: spin 1s infinite linear;
    -o-animation: spin 1s infinite linear;
    -webkit-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
    float: left;
}

    .circle-processing.circle-processing-center {
        /*width: 32px !important;*/
        position: absolute;
        /*top: 45%;*/
        left: 47%;
    }

    .circle-processing.circle-processing-center-top {
        /*width: 32px !important;*/
        position: absolute;
        top: 2%;
        left: 47%;
    }

    .circle-processing + span {
        padding-left: 10px;
        overflow: hidden;
        display: block;
    }

.circle-processing-center {
    position: absolute;
    /*top: 45%;*/
    left: 47%;
    /*width: 0 !important;*/
}

@keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/*#endregion*/

/*#region 29 Session Expiry Dialog*/
.ui-button-text-only.btn-level-1,
.ui-button-text-only.btn-level-3 {
    padding: 0;
}

/*#endregion*/

/*#region 29 Session Expiry Dialog*/

#smartbanner.android {
    /*border-color: #55cf31;*/
    background: #2f2f2f;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

    #smartbanner.android .sb-close {
        color: #fff;
        font-size: 14px;
        width: 20px;
        height: 20px;
        line-height: 20px;
    }

    #smartbanner.android .sb-button {
        background-image: none;
        border: 1px solid transparent;
        white-space: nowrap;
    }

        #smartbanner.android .sb-button span {
            padding: 1px 12px 0;
            background-color: #55cf31;
            color: #fff;
            background-image: none;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px;
        }

/*#endregion*/

/*#region 30 About Screen*/

/*#endregion*/

.no-top-bottom-padding {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.background-loader-image {
    background: url(/Content/themes/default/images/ajax-loader-small.gif) no-repeat;
    background-size: 30px;
    background-position: center center;
    margin-left: 10px;
    padding-left: 0px;
}

.error-wrapper-background {
    background-image: url(/Content/themes/default/images/404-Error-Message.png);
    background-size: 65%;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position-y: 25%;
}

.error-wrapper {
    position: absolute;
    margin: -20px 0 0;
    left: 35%;
    top: 35%;
}

    .error-wrapper .text {
        line-height: 50px;
        font-size: 30px;
        color: #8b8b8b;
    }

.viewer .document-page .radiobox.disabled > label {
    background-color: #cccccc;
    border-color: #cccccc;
}

/*#region Cookies Information styles*/
.cookies-info-bar {
    transition: transform 0.5s linear;
    padding: 12px 22px;
    background-color: #237afc;
    transform: translateY(0);
    position: fixed;
    z-index: 1000;
    color: #fff;
    top: 100%;
    right: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .cookies-info-bar.activate {
        transform: translateY(-100%);
    }

    .cookies-info-bar .cookies-btn {
        margin-left: 30px;
        background: #237afc;
        border: 2px solid white;
        border-radius: 0;
        color: white;
        padding: 5px 35px;
        white-space: nowrap;
    }

    .cookies-info-bar a {
        color: #d3e4fe;
        text-decoration: underline;
        padding: 0 5px;
    }

/*#endregion*/

/*#region Cookies Information styles*/
.terms-and-conditions-page {
    background-color: #f0f0f0;
}

    .terms-and-conditions-page .page-heading {
        padding: 15px 0;
        margin: 0;
    }

    .terms-and-conditions-page .scrollable-content {
        background-color: #fff;
    }

.terms-and-conditions-login .content-holder {
    padding: 20px;
}

.terms-and-conditions-login .modal-footer {
    text-align: center;
}

/*#endregion*/
.eye-slah-field-icon {
    transform: translateY(-50%);
    position: absolute;
    font-size: 15px;
    cursor: pointer;
    z-index: 2;
    right: 5px;
    top: 50%;
}

.notes {
    line-height: 16px;
    font-size: 12px;
    color: #767676;
}

/*#region iPad Resolution Styles*/
.bg {
    position: fixed;
    transform: translateX(-50%);
    left: 50%;
    opacity: 0.3;
    top: -40px;
    display: none;
}

.title-info {
    padding: 10px 20px 16px;
    text-align: center;
    line-height: 24px;
    font-size: 16px;
    color: #767676;
}

.mydesk .columns-area {
    display: none;
}

.list-upload-source {
    padding: 0;
    margin: 0;
}

    .list-upload-source > li {
        vertical-align: bottom;
        padding: 0;
    }

        .list-upload-source > li .icon-upload-cloud {
            vertical-align: bottom;
        }

        .list-upload-source > li .gdrive {
            width: 28px;
        }

        .list-upload-source > li .dropbox {
            width: 29px;
        }

        .list-upload-source > li + li {
            padding-left: 20px;
        }

/*#region custom button group Styles*/
.custom-btn-group {
    border: 1px solid #55cf31;
    text-transform: none;
    border-radius: 5px;
}

    .custom-btn-group .btn {
        line-height: 22px;
        padding: 5px 10px;
        border: none;
        height: 31px;
    }

        .custom-btn-group .btn .icon {
            line-height: 22px;
            font-size: 18px;
        }

        .custom-btn-group .btn.active {
            background: #ccf1c1;
            color: #000;
        }

        .custom-btn-group .btn + .btn {
            border-left: 1px solid #55cf31;
            margin: 0;
        }

/*#endregion*/
/*#region iPad Resolution Styles*/
.list-recipient-type {
    margin: 0;
}

    .list-recipient-type li {
        vertical-align: bottom;
        padding: 0;
    }

        .list-recipient-type li + li {
            padding-left: 20px;
        }

    .list-recipient-type .icon {
        line-height: 30px;
        font-size: 25px;
        cursor: pointer;
    }

/*#endregion*/
/*#region Count holder Styles*/
.count-holder {
    border: 1px solid #d6d6d6;
    background-color: #f0f0f0;
    vertical-align: middle;
    display: inline-block;
    margin: 0 0 3px 3px;
    border-radius: 3px;
    line-height: 18px;
    overflow: hidden;
    font-size: 12px;
    padding: 0 5px;
    color: #767676;
    height: 20px;
}

/*#endregion*/

.document-listing .filter-drop .static-icon-filter {
    margin: 3px 7px 0 2px;
    line-height: 30px;
    font-size: 26px;
    display: none;
    float: left;
}

.document-listing .filter-drop .active-filter {
    display: none;
}

.document-listing .custom-grid .body .row .btn-holder,
.document-listing .custom-grid .body .row .icon-cell .document-info {
    display: none;
}

.scrollable-content {
    /*background-color: #f0f0f0;*/
}

.content-box {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.13);
    padding: 17px 20px 39px;
    background: #fff;
}

.login .form-control,
.register .form-control {
    height: 43px;
}

.content-holder {
    margin-right: -13px;
    margin-left: -13px;
}

.btn-forgot-password {
    min-width: inherit;
    padding-right: 0;
    padding-left: 0;
    font-size: 16px;
}

.register .page-title {
    margin: -17px -20px 4px;
    padding: 14px 20px 2px;
}

    .register .page-title h5 {
        line-height: 28px;
        text-align: left;
        font-size: 20px;
    }

.register .info-text,
.info-text {
    line-height: 18px;
    text-align: left;
    font-size: 12px;
    color: #979797;
}

    .register .info-text .icon {
        color: #979797;
    }

.register .checkbox label {
    padding-left: 34px;
    line-height: 16px;
    font-size: 12px;
    color: #767676;
}

.modal-header h5,
.modal-header .h5 {
    font-size: 16px;
}

.btn-register {
    margin: 15px 0 5px;
    min-width: 10em;
}

.btn-login {
    font-size: 16px;
}

.notifications-list .body {
    background-color: #fff;
    font-size: 15px;
}

.notifications-list .floating-width .date-time {
    font-size: 13px;
}

.workflow .custom-grid .header-row {
    border-bottom: 1px solid #d6d6d6;
    padding: 17px 20px 16px;
    margin-bottom: 4px;
}

    .workflow .custom-grid .header-row .heading {
        margin-bottom: 10px;
    }

.workflow .custom-grid .row {
    background-color: #fff;
}

.workflow .custom-grid .header-row .pull-left {
    padding: 0 !important;
    line-height: 24px;
    font-size: 16px;
}

.workflow .recipient-area .row .user-drop .font-level-2 {
    padding: 6px 25px 6px 8px;
    border: 1px solid #d6d6d6;
    position: relative;
    border-radius: 4px;
    font-size: 14px;
    display: block;
    color: #000;
}

    .workflow .recipient-area .row .user-drop .font-level-2 .icon {
        transform: translateY(-50%);
        position: absolute;
        right: 10px;
        top: 50%;
    }

.workflow .heading-holder {
    padding-bottom: 10px;
}

.account-activation .custom-grid .body {
    border: 1px solid #e2e2e2;
    border-radius: 0.3em;
}

    .account-activation .custom-grid .body .row + .row {
        border-top: 1px solid #e2e2e2;
    }

/*#region Settings styles*/
.settings .scrollable-content {
    padding: 0;
}

    .settings .scrollable-content .content-holder {
        /*background-color: #f0f0f0;*/
        max-width: inherit;
        /*padding-top: 5px;*/
        margin: 0;
    }

    .settings .custom-grid-area,
    .settings .scrollable-content .custom-grid {
        border-top: 1px solid #d6d6d6;
        background-color: #fff;
        /*font-size: 16px;*/
        padding: 0 20px;
    }

.settings .custom-grid-area {
    padding: 20px;
}

    .settings .custom-grid-area .custom-grid-area {
        padding: 10px 25px;
        border-top: none;
    }

    .settings .custom-grid-area .custom-grid {
        border-top: none;
        padding: 0 0 15px;
    }

        .settings .custom-grid-area .custom-grid + .custom-grid {
            border-top: 1px solid #d6d6d6;
            padding-top: 16px;
        }

.settings .custom-grid .body {
    border: none;
}

    .settings .custom-grid .body .row {
        padding: 12px 0 !important;
    }

.settings .custom-grid-area .custom-grid .body .row {
    padding: 3px 0 !important;
    border-top: none;
}

    .settings .custom-grid-area .custom-grid .body .row.title {
        padding-bottom: 10px !important;
    }

.settings .custom-grid-area .custom-grid .row .btn-link {
    text-decoration: none !important;
    padding: 5px 17px !important;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
    margin-left: 27px;
    font-weight: bold;
    line-height: 18px;
    font-size: 12px;
    color: #000;
}

.settings .profile-image-area + .custom-grid {
    padding-top: 20px;
}

.settings .profile-image-area .row {
    vertical-align: middle;
    display: inline-block;
}

    .settings .profile-image-area .row:last-child {
        border-bottom: none !important;
    }

.settings .profile-image-area .body {
    padding: 15px 0;
}

.settings .input-group .input-group-btn .btn {
    line-height: 23px;
}

/*#endregion*/

.scrollable-footer {
    border-top: 1px solid #d6d6d6;
    background-color: #fff;
    padding: 15px 20px;
}

.about .scrollable-footer,
.viewer .scrollable-footer {
    border-top: 1px solid #d6d6d6 !important;
}

.viewer .scrollable-footer {
    padding: .3em 0;
}

.image-holder {
    border: 1px solid #c8c7cc;
    display: inline-block;
    vertical-align: top;
    /*    margin-left: 32px;*/
}

#login-options-modal .modal-header {
    padding-left: 25px;
    padding-right: 25px;
}

#login-options-modal .close {
    font-size: 35px;
    margin-top: -6px;
    text-shadow: unset;
    opacity: 1;
    cursor: pointer;
}

.login-options-list {
    margin-bottom: 0;
}

    .login-options-list > li.list-group-item {
        border-bottom: unset;
    }

    .login-options-list .image-holder,
    .login-options-list .text-holder {
        vertical-align: middle;
        display: inline-block;
        border: unset;
        margin-left: 0;
    }

    .login-options-list .text-holder {
        white-space: normal;
        padding-left: 5px;
        max-width: 81%;
    }

    .login-options-list .image-holder {
        max-height: 35px;
        width: 30px;
    }

        .login-options-list .image-holder img {
            max-height: 35px;
            max-width: 100%;
            height: auto;
        }

.login-back-icon {
    margin-left: -24px;
    padding-right: 10px;
}

.scrollable-footer .dropup {
    float: right;
}

    .scrollable-footer .dropup .btn {
        border: 1px solid #d6d6d6;
        font-size: 14px;
    }

@media all and (min-width: 420px) {
    .workflow .recipient-area .recipient-holder {
        width: 70%;
    }
}

@media only screen and (max-width: 767px) {
    .mydesk .row-new-workflow .btn-level-2.btn {
        padding-right: 20px;
    }
}

@media only screen and (min-width: 768px) {
    button {
        min-width: 10em;
    }

    fieldset {
        padding-bottom: 1.8em;
    }

    .form-control {
        font-size: 17px;
        height: 41px;
    }

    .input-group-addon {
        height: 41px;
    }

    .radio > label {
        padding-left: 32px;
    }

        .radio > label:before {
            height: 18px;
            width: 18px;
        }

        .radio > label:after {
            height: 8px;
            width: 8px;
            left: 5px;
            top: 7px;
        }

    button span {
        font-weight: normal;
    }

    .btn-level-2,
    .btn-level-1 {
        padding-bottom: 7px;
        padding-top: 7px;
    }

    .title-info {
        font-size: 17px;
    }

    .scrollable-footer {
        background-color: #f0f0f0;
    }

    .scrollable-footer {
        padding-bottom: 15px;
        padding-right: 30px;
        padding-left: 30px;
        border-top: none;
    }

    .title-info,
    .custom-btn-group .btn {
        display: block;
    }

    .content-holder {
        max-width: 580px;
        margin: 0 auto;
    }

    .content-box {
        padding: 17px 73px 87px;
    }

    .register .content-box {
        padding-bottom: 17px;
    }

    fieldset legend {
        padding-bottom: 0.9em;
        line-height: 30px;
        text-align: left;
        font-size: 24px;
    }

    .btn-login,
    .btn-register {
        line-height: 24px;
        min-width: 6.1em;
        font-size: 18px;
    }

    .btn-register {
        padding: 10px 28px;
        margin-bottom: 8px;
    }

    .btn-forgot-password {
        font-size: 17px;
    }

    .register .page-title {
        margin: -17px -73px 20px;
        padding: 25px 73px 10px;
    }

        .register .page-title h5 {
            line-height: 30px;
            font-size: 24px;
        }

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

    .register .notes {
        margin-bottom: 25px;
    }

    .notifications-list .body {
        padding: 0 28px;
    }

    .notifications-list .row {
        padding-bottom: 15px !important;
        padding-top: 15px !important;
    }

    .notifications-list .body .pull-left {
        font-size: 1.4em !important;
    }

    .notifications-list .body .pull-right {
        right: 0;
    }

    .notifications-list .btn {
        border: 1px solid #d6d6d6;
        background-color: #fff;
        padding: 6px 15px !important;
        line-height: 18px;
        min-width: 86px;
        font-size: 12px;
    }

        .notifications-list .btn span {
            font-weight: bold;
        }

    .notifications-list .floating-width {
        padding: 1px 14px;
    }

        .notifications-list .floating-width .not-h1 {
            -ms-text-overflow: inherit;
            -o-text-overflow: inherit;
            text-overflow: inherit;
            white-space: normal;
            word-break: normal;
            line-height: 23px;
            padding-right: 7%;
            line-height: 21px;
            font-size: 17px;
            float: left;
            width: 49%;
            margin: 0;
        }

        .notifications-list .floating-width .info-holder {
            overflow: hidden;
        }

        .notifications-list .floating-width .status {
            font-size: 16px;
            color: #000;
            margin: 0;
        }

        .notifications-list .floating-width .date-time {
            font-size: 14px;
        }

    .dashboard-container {
        max-width: 457px;
        margin: 0 auto;
    }

    .mydesk .welcome-msg-holder {
        padding-top: 15px;
    }

    .mydesk .welcome-msg {
        -ms-text-overflow: inherit;
        -o-text-overflow: inherit;
        text-overflow: inherit;
        white-space: normal;
        font-size: 1.9em;
        display: inline;
    }

    .mydesk .row-pending-document {
        padding-bottom: 0.7em;
        padding-top: 2em;
    }

        .mydesk .row-pending-document .count {
            line-height: 1.35em;
            font-size: 5em;
        }

    .mydesk .row-document {
        font-size: 1.2em;
    }

        .mydesk .row-document .padding {
            padding: 9px 0;
        }

        .mydesk .row-document .count {
            line-height: 1.5em;
            font-size: 3em;
        }

    .scrollable-footer .dropup {
        float: left;
    }

        .scrollable-footer .dropup .btn {
            font-size: 16px;
        }

    .mydesk .btn-level-1 {
        padding: 18px 20px;
    }

    .mydesk .row-new-workflow {
        padding-bottom: 40px !important;
        padding-top: 40px !important;
        text-align: center;
    }

        .mydesk .row-new-workflow .btn-level-2 {
            display: inline-block;
            vertical-align: top;
            padding: 13px 40px;
            width: inherit;
        }

            .mydesk .row-new-workflow .btn-level-2 span {
                font-weight: bold;
                font-size: 1.2em;
                display: block;
                width: inherit;
            }

    .mydesk .columns-area {
        background-color: #fff;
        margin: 0 -15px -10px;
        line-height: 24px;
        text-align: left;
        overflow: hidden;
        font-size: 17px;
        display: block;
        padding: 45px;
        color: #000;
    }

        .mydesk .columns-area .column {
            padding-right: 10px;
            width: 37.33%;
            float: left;
        }

            .mydesk .columns-area .column ul li {
                padding-bottom: 8px;
            }

        .mydesk .columns-area .avatar {
            padding: 7px 0 18px;
        }

            .mydesk .columns-area .avatar img {
                border-radius: 100%;
            }

        .mydesk .columns-area h4 {
            margin-bottom: 18px;
            text-align: left;
            font-size: 17px;
        }

    /*#region Start New Workflow Styles*/
    .list-upload-source {
        display: block;
    }

        .list-upload-source > li .icon-upload-cloud {
            font-size: 26px;
        }

    .workflow .custom-grid .header-row {
        padding: 22px 25px 16px;
    }

        .workflow .custom-grid .header-row .heading {
            margin-bottom: 21px;
        }

        .workflow .custom-grid .header-row .pull-left {
            font-size: 18px;
        }

    .workflow .document-area {
        padding: 0 25px 10px;
    }

        .workflow .document-area .row .pull-left .btn-icon,
        .workflow .recipient-area .row .pull-left .btn-icon .workflow .document-area .row .pull-left .btn-icon span,
        .workflow .recipient-area .row .pull-left .btn-icon span {
            font-size: 1em;
        }

            .workflow .document-area .row .pull-left .btn-icon > span {
                padding-top: 9px;
            }

    .workflow .recipient-area .row .pull-left .btn-icon > span {
        padding-top: 13px !important;
    }

    .workflow .document-area .row .pull-right .btn-icon,
    .workflow .recipient-area .row .pull-right .btn-icon {
        font-size: 1.7em;
    }

    .workflow .document-area .floating-width {
        padding-top: 7px !important;
    }

        .workflow .document-area .floating-width > div {
            font-size: 15px;
        }

    .workflow .heading-holder {
        padding-bottom: 20px;
    }

    .workflow .custom-btn-group {
        margin-top: 5px;
    }

    .workflow .recipient-area {
        padding: 0 25px 20px;
    }

        .workflow .recipient-area .recipient-holder {
            padding: 2px 0 0 !important;
            width: 88%;
        }

            .workflow .recipient-area .recipient-holder .user-drop {
                max-width: inherit;
            }

        .workflow .recipient-area .btn-group {
            padding-top: 2px;
        }

        .workflow .recipient-area .row .user-name,
        .workflow .recipient-area .row .user-info {
            padding: 8px 13px 0 8px;
            line-height: 20px;
            float: left;
        }

        .workflow .recipient-area .row .user-name {
            width: 30% !important;
        }

        .workflow .recipient-area .row .user-info {
            width: 30% !important;
            font-size: 14px;
            margin: 0;
        }

        .workflow .recipient-area .row .delivery-btn {
            margin-top:0;
            padding-left:10px;
            padding-right:10px;
        }
  

            .workflow .recipient-area .row .user-drop {
                float: right;
                width: 20%;
            }

            .workflow .recipient-area .row .user-drop .dropdown-menu {
                left: auto;
                right: 0;
            }

            .workflow .recipient-area .row .user-drop .font-level-2 {
                padding: 6px 25px 6px 8px;
                border: 1px solid #d6d6d6;
                position: relative;
                border-radius: 4px;
                font-size: 14px;
                display: block;
                color: #000;
            }

                .workflow .recipient-area .row .user-drop .font-level-2 .icon {
                    transform: translateY(-50%);
                    position: absolute;
                    right: 10px;
                    top: 50%;
                }

    .list-recipient-type .icon {
        line-height: 40px;
        font-size: 30px;
    }

    /*#endregion*/
    /*#region Contact Styles*/
    .group-list-modal .nav-header,
    .contact-list-modal .nav-header,
    .library-documents-list-modal .nav-header {
        height: auto !important;
        padding: 30px 25px;
        overflow: hidden;
    }

    .full-page-modal-body-padding {
        padding-top: 0 !important;
    }

    .custom-grid-holder {
        background: #f0f0f0;
    }

        .custom-grid-holder .custom-nav-header,
        .custom-grid-holder .custom-grid-body {
            background-color: #fff;
        }

        .custom-grid-holder .custom-grid-body {
            border-top: 1px solid #d6d6d6;
        }

        .custom-grid-holder .custom-grid .body .row {
            border: none !important;
            border-bottom: 1px solid #d6d6d6 !important;
            padding: 11px 50px 11px 0;
            position: relative;
        }

            .custom-grid-holder .custom-grid .body .row .icon-check-container {
                transform: translateY(-50%);
                position: absolute;
                right: 5px;
                top: 50%;
            }

    .custom-nav-header {
        border-bottom: 1px solid #d6d6d6 !important;
        margin-bottom: 5px;
    }

        .custom-nav-header .input-group {
            float: right;
            padding: 0;
            width: 53%;
        }

        .custom-nav-header .btn-group {
            max-width: 45%;
            display: block;
            width: auto;
            float: left;
        }

            .custom-nav-header .btn-group .btn,
            .custom-nav-header .btn-group .btn.active {
                color: #000;
            }

    /*.custom-nav-header .btn-group .btn.active {
                background: #ccf1c1;
            }*/
    /*#endregion*/

    .btn-misc-settings,
    .btn-contact {
        display: none;
    }

    .listing-body {
        padding: 0 25px !important;
    }

        .listing-body .floating-width div:nth-child(1) {
            font-size: 15px;
            float: left;
            width: 40%;
        }

        .listing-body .floating-width div:nth-child(2) {
            text-align: right;
            float: right;
            width: 60%;
        }

    /*#region Document Listing Styles*/
    .document-listing .scrollable-header {
        background-color: #f0f0f0;
        padding-bottom: 5px;
    }

    .document-listing .scrollable-header .header-holder {
        border-bottom: 1px solid #d6d6d6;
        background-color: #fff;
    }


    .document-listing .filter {
        padding-right:12px;
    }
        .document-listing .filter .doc-search {
            margin:0 15px;
        }
        .document-listing .filter-drop {
            display: flex;
            align-items: center;
        }

        .document-listing .filter-drop .static-icon-filter {
            display: block;
        }

        .document-listing .filter-drop .drop-icon-filter {
            display: none;
        }

        .document-listing .filter-drop .input-group {
            min-width: 180px;
            float: left;
            padding: 0;
        }

        .document-listing .filter-drop .active-filter {
            display: inline;
        }

        .document-listing .filter-drop .input-group .btn {
            padding: 5px 25px 5px 10px !important;
            border: 1px solid #d6d6d6;
            width: auto !important;
            position: relative;
            border-radius: 4px;
            line-height: 22px;
            text-align: left;
            font-size: 15px;
            display: block;
            color: #000;
        }
   

    .document-listing .filter-drop .input-group .btn .icon {
        transform: translateY(-50%);
        position: absolute;
        right: 10px;
        top: 50%;
    }

    .document-listing .filter .dropdown-menu {
        margin-top: 0;
    }

    .document-listing .scrollable-content {
        border-top: 1px solid #d6d6d6;
        background-color: #fff;
    }

    .document-listing .custom-grid .body .row {
        border: none !important;
        border-bottom: 1px solid #d6d6d6 !important;
        padding: 16px 25px 17px 50px;
    }

        .document-listing .custom-grid .body .row .btn-holder {
            padding-left: 10px;
            padding-top: 4px;
            display: block;
            width: 14%;
        }

            .document-listing .custom-grid .body .row .btn-holder .btn {
                border: 1px solid #d6d6d6;
                background-color: #fff;
                line-height: 18px;
                font-size: 12px;
                display: block;
                color: #000;
                width: 100%;
            }

                .document-listing .custom-grid .body .row .btn-holder .btn span {
                    font-weight: bold;
                    color: #000;
                }

        .document-listing .custom-grid .body .row .floating-width .date-cell {
            display: none;
        }

        .document-listing .custom-grid .body .row .floating-width .document-name {
            font-weight: normal;
            line-height: 22px;
            font-size: 16px;
        }

        .document-listing .custom-grid .body .row .icon-cell {
            float: right !important;
            margin: 0 !important;
            position: relative;
            padding-left: 35px;
            width: 22%;
        }

            .document-listing .custom-grid .body .row .icon-cell label {
                position: absolute;
                font-size: 18px;
                top: 4px;
                left: 0;
            }

            .document-listing .custom-grid .body .row .icon-cell .document-info {
                display: block;
            }

            .document-listing .custom-grid .body .row .icon-cell .document-status {
                margin-bottom: 2px;
                font-weight: bold;
            }

            .document-listing .custom-grid .body .row .icon-cell .date-cell {
                float: none !important;
                line-height: 18px;
                text-align: left;
                font-size: 12px;
                color: #767676;
            }

        .document-listing .custom-grid .body .row .circle-processing + span {
            padding-bottom: 5px !important;
        }

    /*#endregion*/

    /*#region Settings styles*/
    .settings .scrollable-content {
        background-color: #fff;
        padding: 0;
    }

        /*.settings .scrollable-content .content-holder {
            background-color: #f0f0f0;
            max-width: inherit;
            padding-top: 5px;
            margin: 0;
        }*/
        .settings .custom-grid-area,
        .settings .scrollable-content .custom-grid {
            /*border-top: 1px solid #d6d6d6;
        background-color: #fff;*/
            font-size: 16px;
            padding: 0 25px;
        }

    .settings .custom-grid-area {
        padding: 21px 25px;
    }

        .settings .custom-grid-area .custom-grid-area {
            padding: 10px 25px;
            border-top: none;
        }

        .settings .custom-grid-area .custom-grid {
            /*border-top: none;*/
            padding: 0 0 25px;
        }

            .settings .custom-grid-area .custom-grid + .custom-grid {
                /*border-top: 1px solid #d6d6d6;*/
                padding-top: 21px;
            }

    .settings .custom-grid .body {
        border: none;
    }

        .settings .custom-grid .body .row {
            padding: 15px 0 !important;
        }

    .settings .custom-grid-area .custom-grid .body .row {
        padding: 3px 0 !important;
        border-top: none;
    }

        .settings .custom-grid-area .custom-grid .body .row.title {
            padding-bottom: 18px !important;
        }

    .settings .custom-grid-area .custom-grid .row .btn-link {
        /*text-decoration: none !important;*/
        padding: 6px 17px !important;
        /*border: 1px solid #d6d6d6;
        border-radius: 4px;*/
        margin-left: 33px;
        /*font-weight: bold;
        line-height: 18px;
        font-size: 12px;
        color: #000;*/
    }

    .settings .content-frame {
        width: 65%;
    }

    .settings .profile-image-area + .custom-grid {
        padding-top: 20px;
    }

    .settings .profile-image-area .row {
        vertical-align: middle;
        display: inline-block;
    }

        .settings .profile-image-area .row:last-child {
            border-bottom: none !important;
        }

    .settings .profile-image-area .body {
        padding: 15px 0;
    }

    .settings .input-group .input-group-btn .btn {
        line-height: 27px;
    }

    /*#endregion*/
    .scrollable-footer .footer-holder {
        text-align: right;
        padding-top: 10px;
        line-height: 20px;
        font-size: 14px;
        color: #979797;
    }

    .scrollable-footer .list-inline,
    .scrollable-footer .copyrights {
        vertical-align: bottom;
        display: inline-block;
    }

        .scrollable-footer .list-inline li {
            padding-right: 10px;
            padding-left: 10px;
        }

            .scrollable-footer .list-inline li + li:before {
                background-color: #aaa;
                height: 20px;
            }

    .scrollable-footer .copyrights {
        position: relative;
        padding-left: 10px;
        margin-left: 3px;
    }

        .scrollable-footer .copyrights:before {
            transform: translateY(-50%);
            background-color: #aaa;
            position: absolute;
            height: 20px;
            content: '';
            width: 1px;
            top: 50%;
            left: 0;
        }

    .copy-rights-footer .dropdown-menu {
        right: auto;
        left: 0;
    }

    .scrollable-footer .list-inline {
        margin-bottom: 0;
    }
}

/*#endregion*/

/*#region Inline CSS moved*/

.profile-locale .input-group.disable .marker,
.profile-locale .input-group.disable .btn {
    background-color: #eeeeee;
    color: #999999;
    opacity: 1;
}

.ease {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.viewer .cubicEase {
    transition: all cubic-bezier(0, 0, .5, 1) 0.1s;
    -webkit-transition: all cubic-bezier(0, 0, .5, 1) 0.1s;
}

.docZoom {
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    /* Standard syntax */
}

.viewer select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

.drag {
    background-color: #e2e2e2;
}

.header-image {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

/*#endregion*/
.margin-left-10 {
    margin-left: 10px !important;
}

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

.pointer-event-none {
    pointer-events: none;
}

.background-disabled-color {
    background: #eee;
}

.margin-top-10px {
    margin-top: 10px;
}
.margin-top-15px {
    margin-top: 15px;
}
.mt-auto {
    margin-top: auto;
}

.mb-auto {
    margin-bottom: auto;
}

.ml-auto {
    margin-left: auto;
}

.mr-auto {
    margin-right: auto;
}

.remove-margin-top {
    margin-top: 0px !important;
}

.remove-margin-bottom {
    margin-bottom: 0px !important;
}

.remove-margin-left {
    margin-left: 0px !important;
}

.remove-margin-right {
    margin-right: 0px !important;
}

.disable .icon {
    color: #b3b3b3 !important;
    cursor: pointer;
    opacity: 1;
}

.ui-dialog {
    transform: translateX(-50%);
    width: 90% !important;
    max-width: 600px;
    left: 50%;
}

.border-danger {
    border-color: #e03500;
}

.no-scroll {
    touch-action: none;
    overflow: hidden;
}

.no-padding {
    padding: 0 !important;
}

.no-border {
    border: 0 !important;
}

.no-resize {
    resize: none;
}

.scrollable-y {
    overflow-x: unset;
    overflow-y: auto;
}

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

.padding-bottom-15px {
    padding-bottom: 15px !important;
}

.padding-bottom-60px {
    padding-bottom: 60px !important;
}

.padding-bottom-50px {
    padding-bottom: 50px !important;
}

.padding-left-35px {
    padding-left: 35px !important;
}

.padding-right-35px {
    padding-right: 35px !important;
}

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

.padding-top-15px {
    padding-top: 15px !important;
}

.padding-top-40px {
    padding-top: 40px !important;
}

.remove-padding-bottom {
    padding-bottom: 0 !important;
}

.font-size-20px {
    font-size: 20px !important;
}

.font-size-13px {
    font-size: 13px !important;
}

.font-size-26px {
    font-size: 26px !important;
}

.padding-top-3px {
    padding-top: 3px !important;
}

.padding-left-2px {
    padding-left: 2px !important;
}

.full-width {
    width: 100% !important;
}

.full-min-width {
    min-width: 100%;
}

.account-locked-alert .modal-header {
    background: #e2e2e2;
}

.account-locked-alert .modal-footer {
    border-top: 1px solid #e2e2e2;
}

/*#region Materialize Form*/
.materialize-form .material-form-group {
    position: relative;
}

    .materialize-form .material-form-group label {
        transition: all 0.25s ease;
        font-family: 'roboto_regular';
        position: absolute;
        color: #adadad;
        margin: 0;
        top: 25px;
        left: 5px;
        pointer-events: none;
    }

    .materialize-form .material-form-group .form-control {
        transition: border-color ease-in-out .15s;
        border-width: 0 0 1px;
        padding-bottom: 0;
        padding-top: 22px;
        border-radius: 0;
        box-shadow: none;
        padding-left: 0;
    }

        .materialize-form .material-form-group .form-control:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 1000px white inset !important;
        }

        .materialize-form .material-form-group .form-control:focus {
            box-shadow: 0 1px 0 0 #232323, 0 0 0 1000px white inset !important;
            border-color: #232323;
        }

        .materialize-form .material-form-group .form-control.disable + label,
        .materialize-form .material-form-group.focused label,
        .materialize-form .focused label {
            font-size: 12px;
            color: #232323;
            top: 0px;
        }

        .materialize-form .material-form-group .form-control.disable + label {
            top: -20px;
        }

.materialize-form fieldset {
    padding-bottom: 1.0em !important;
}

/*#endregion*/

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

    .static-email label {
        font-family: 'roboto_regular', Arial, sans-serif;
        font-size: 12px;
    }

.dropup .workflow-menu {
    box-shadow: unset;
    -webkit-box-shadow: unset;
    margin-bottom: 0;
}

.workflow-menu {
    min-width: unset;
    width: 100%;
    overflow: unset;
}

    .workflow-menu > li > a {
        font-size: 1.1em;
        padding-left: 15px
    }

.dropdown-submenu-c {
    list-style: none;
}

    .dropdown-submenu-c > li {
        padding: 0.5em 0.5em;
    }

.canvasDiv-wrapper {
    position: relative;
}

    .canvasDiv-wrapper .dotted-border {
        position: absolute;
        border-bottom: 2px dotted #f9da00;
        bottom: 15px;
        width: calc(100% - 55px);
        left: 25px;
    }

.ui-select-bootstrap .ui-select-choices-row > a {
    display: block;
    padding: 3px;
    margin-left: 0px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}


.other-login-list {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
    align-items: center;
    margin-top: 10px;
}

.other-login-item {
    flex: 0 0 50%;
    max-width: 50%;
    padding-right: 15px;
    padding-left: 15px;
}

.other-login-body {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    height: 100px;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    margin-bottom: 20px;
    cursor: pointer;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}

.other-login-body.selected {
    border: 1px solid #55cf31;
}

.other-login-body:hover {
    border: 1px solid #55cf31;
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.24);
    background-color: rgba(0, 0, 0, 0.01);
}

.other-login-item label {
    display: block;
    height: 100px;
    margin-bottom: 15px;
    cursor: pointer;
}

.other-login-item .provider-img {
/*    height: 40px;
*/    width: 100%;
}

.other-login-item .provider-img img {
    max-height: 40px;
    max-width: 80%;
}

.other-login-item .provider-title {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    font-size: 12px;
    padding: 0 15px;
    line-height: 14px;
    margin-top:10px;
}

.other-login-item input[type="radio"] {
    display: none;
}

.other-login-list.one-row-item .other-login-item {
    flex: 0 0 100%;
    max-width: 100%;
}

.other-login-list.one-row-item .other-login-body {
    flex: 0 0 100%;
    max-width: 100%;
    margin: auto;
    margin-bottom: 15px;
}

.bulk-signing-list .time-from {
    display: flex;
    justify-content: space-between;
}

.bulk-signing-list .document-name {
    font-weight: 600;
}

    .bulk-signing-list .document-name .text-danger {
        font-weight: normal;
        font-size: 12px;
        line-height: 16px;
    }

.bulk-signing-list .reinitiate-error-message {
    color: #7b7b7b !important;
    font-weight: 500;
}

.bulk-signing-list .padding-left-23px {
    padding-left: 23px;
}

.bulk-signing-list .custom-grid .body .row {
    border-top: 0;
    border-bottom: 1px solid #e2e2e2;
    padding-left: 5px;
    min-height: 52px;
}

.bulk-signing-list .icon-cell {
    margin-right: 20px;
}

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

.label-text-icon > div {
    font-size: 12px;
    color: #000000;
}

.sp-loader-container {
    margin-top: calc(100vh / 5);
    align-items: center;
    position: relative;
    flex-direction: column;
}

    .sp-loader-container h2 {
        text-transform: none;
        font-size: 28px;
        font-weight: 400;
        margin-bottom: 20px;
    }

.sp-loader {
    max-width: 240px;
    margin: auto;
}

pc-container {
    position: relative;
    width: 100%;
}

.pc-border {
    position: relative;
    text-align: center;
    width: 100%;
    padding-top: 100%;
    border-radius: 100%;
}

.recipient-area .row.noselect,
.page-field.noselect,
.checkbox.form-field-selector,
[fieldtype="RADIO"] {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}

.pc-circle {
    /*    position: relative;
    margin-top: -90%;
    margin-left: 10%;
    width: 80%;
    padding-top: 80%;
    border-radius: 100%;*/

    position: relative;
    margin-top: -95%;
    margin-left: 5%;
    width: 90%;
    padding-top: 90%;
    border-radius: 100%;
}

.pc-percent {
    font-family: Arial, sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3em;
}

.custom-has-error {
    border-color: red;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.qr-code-border-color {
    border-color: #e1e1e1 !important;
}

.viewer-lang-picker {
    margin-right: 15px;
    padding: 0 !important;
    margin-top: 10px;
}

    .viewer-lang-picker .dropdown-menu {
        max-height: 50vh;
        min-width: 10em;
        left: auto !important;
        right: 0px !important;
    }

.lang-picker-btn {
    margin-right: 10px;
    position: absolute;
    right: 0;
}

    .lang-picker-btn .btn {
        border: none !important;
        padding: 0 !important;
        margin-top: 6px;
    }


    .lang-picker-btn .dropdown-menu {
        top: -42px;
    }

.modal-inner-body {
    padding: 20px;
}

.auth-rec-option .item {
    padding: 10px;
    height: 48px;
    display: flex;
    align-items: center;
}

    .auth-rec-option .item.active,
    .auth-rec-option .item:hover {
        background: #e7e7e7;
    }

    .auth-rec-option .item .icon-holder {
        display: flex;
        margin-right: 10px;
    }

        .auth-rec-option .item .icon-holder svg {
            width: 30px;
        }

.pointer {
    cursor: pointer;
}

.text-blue {
    color: #007aff;
}

.color-unset {
    color: unset !important;
}

.delegate-signing {
    padding: 0 !important;
    margin-top: 10px;
}

.delegate-list .delegate-list-item {
    border: 1px solid #ddd;
    border-radius: 7px;
    padding: 5px 0;
    box-shadow: 1px 1px 5px #ddd;
    margin-bottom: 15px;
}

.delegate-list .action-column ul {
    list-style: none;
    display: inline-flex;
    padding: 0;
}

    .delegate-list .action-column ul li {
        width: 20px;
        height: 20px;
        margin-left: 10px;
    }

.delegate-list .danger {
    margin-top: 10px;
}

.delegate-list .dropdown-menu li a {
    font-size: 14px;
}

.delegate-list .dropdown-btn {
    margin-top: 4px;
    margin-right: -8px;
}

.gatekeeper-setting .placholder-text {
    margin-top: 3px;
}

.gatekeeper-setting .has-email .edit-btn {
    margin-top: 6px;
}

.delegate-email strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.delegate-email span {
    word-break: break-all;
}

.delegate-duration {
    padding: 10px 15px;
    font-size: 13px;
    border-top: 1px solid #ddd;
    margin-top: 5px;
}

    .delegate-duration .from {
        margin-bottom: 7px;
    }

.delegation-header {
    padding: 0 0px 10px;
}

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

.delegate-duration .action-column {
    margin-top: 7px;
}

.delegate-duration div[class*="col-"] {
    padding: 0;
}

.delegation-header div[class*="col-"] {
    padding: 0;
}

.add-delegate-modal {
    height: calc(100vh - 60px);
    background: #fff;
}

    .add-delegate-modal .delegated-to {
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

.add-delegate-btn {
    margin-right: 6px;
}

.add-delegate-modal .delegated-to .text-muted {
    word-break: break-all;
}

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

.appearance-dropdown-disabled {
    background-color: #f0f0f0 !important;
    cursor: default;
}

.charaters-count {
    z-index: 1099;
    color: #ffffff;
    padding: 4px;
    font-size: 11px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
    position: absolute;
    right: 4px;
}

.valid-character-limit {
    background-color: #55cf31 !important;
    /* color-level-2: green, #55cf31 */
}

.invalid-character-limit {
    background-color: rgb(234, 21, 55) !important;
}

.position-relative {
    position: relative;
}

.dropdown-disabled {
    background-color: #f0f0f0 !important;
    cursor: default;
}

.repeat-reminder-sub-sections {
    padding: 12px 35px 15px !important;
}

.reminder-duration {
    padding: 15px !important;
}

.border-none-important {
    border: 0 !important;
}

.display-none {
    display: none !important;
}

.height-100vh {
    height: 100dvh;
}

.height-20vh {
    height: 20vh;
}

.document-package-rename {
    position: absolute;
    top: 12px;
    float: right;
    right: 12px;
}

.document-list-item {
    display: flex;
    align-items: center;
    height: 50px;
    background: #e3e3e3dd;
    padding: 10px;
}

    .document-list-item .accordion-btn {
        margin-left: auto;
    }

    .document-list-item .document-name {
        margin-left: 10px;
    }

.attachment-accordion {
    padding-top: 10px;
}

    .attachment-accordion .attachment-heading {
        display: flex;
        align-items: center;
        height: 36px;
        padding: 10px;
    }

    .attachment-accordion .attachment-sec-heading {
        text-transform: uppercase;
        font-weight: 800;
        margin-left: 10px;
    }

    .attachment-accordion .add-attachment-icon {
        margin-left: auto;
    }

    .attachment-accordion ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

.attachment-accordion ul li {
    border-bottom: 1px solid #ddd;
    padding: 9px 0;
    padding-right: 2px;
    color: #9b9b9b;
}

.attachment-accordion ul li .action-column {
    margin-left: auto;
}
.attachment-accordion ul li .action-column a {
    margin-left:7px;
}

.attachment-accordion .attachment-list {
    padding: 10px;
}

.attachment-list-item {
    display: flex;
}

.required-attachment {
    padding-left: 24px;
    padding-top: 5px;
}

    .required-attachment .note {
        padding-left: 30px;
    }

        .required-attachment .note label {
            padding-left: 0 !important;
            font-weight: 600;
        }

.comment-wrapper {
    height: 100%;
    position: relative;
}

.comment-modal {
    overflow: hidden !important;
}

.conversation-wrapper {
    position: absolute;
    top: 0;
    bottom: 70px;
    overflow-y: auto;
    left: 0;
    right: 0;
}

.comment-wrapper .message-box {
    display: flex;
    padding: 10px;
    font-size: 14px;
}

.comment-wrapper .conversation {
    display: flex;
    flex-direction: column;
    justify-content: end;
    min-height: 100%;
}

.comment-wrapper .user-avatar {
    width: 35px;
    height: 35px;
}

    .comment-wrapper .user-avatar img {
        width: 100%;
        border-radius: 50%;
    }

.comment-wrapper .message {
    background: #4ECD36;
    color: #fff;
    border-radius: 10px;
    padding: 15px;
    margin-left: 15px;
    margin-right: 15px;
    width: 75%;
    flex-direction: row-reverse;
    position: relative;
    padding-right: 25px;
}

.comment-wrapper .message .private-comment {
    position: absolute;
    top: 10px;
    right: 10px;
}

.comment-wrapper .message .username {
    margin-bottom: 7px;
}

.comment-wrapper .message svg {
    margin-left: 3px;
    fill: #fff;
}

.comment-wrapper .message .chat-time {
    color: #fff;
    font-size: 13px;
}

.comment-wrapper .message-box.receive .chat-time {
    color: #979797;
}

.comment-wrapper .message-box.receive {
    flex-direction: row-reverse;
}

    .comment-wrapper .message-box.receive svg {
        margin-right: 3px;
        fill: #a7a7a7;
    }

    .comment-wrapper .message-box.receive .message {
        background: #F1F1F1;
        color: #000;
        word-break: break-word;
    }


.comment-wrapper .message h5 {
    font-size: 14px;
    margin-bottom: 0;
}

.comment-wrapper .message p {
    margin-bottom: 5px;
    color: #fff;
    word-break: break-word;
}

.comment-wrapper .message-box.receive .message p {
    color: #6c6c6c;
}


.comment-wrapper .message-send-box {
    border-top: 1px solid #ddd;
    display: flex;
    padding: 15px;
    background: #fff;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
}

    .comment-wrapper .message-send-box textarea {
        background: #E9E9E9;
        border: none;
        resize: none;
        border-radius: 30px;
        height: 42px;
        padding: 11px 14px;
        font-size: 14px;
    }

        .comment-wrapper .message-send-box textarea:focus {
            box-shadow: none;
        }

.message-input {
    width: 100%;
}

.comment-wrapper .message-send-box button {
    border: none;
    background: #555555;
    height: 42px;
    width: 42px;
    border-radius: 50%;
    line-height: 10px;
    margin-left: 10px;
    min-width: 42px;
}

.comment-btn button span {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
}

    .comment-btn button span a {
        text-transform: none;
        font-weight: normal;
        color: #fff;
        margin-right: 5px;
        display: inline;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.bottom-sheet-modal .modal-content {
    border-radius: 0;
    padding: 15px;
    padding-bottom: 0;
    padding-top: 7px;
}

.bottom-sheet-modal .modal-dialog {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.multiselect-list hr {
    margin: 0;
}

.multiselect-list .recipient-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.multiselect-list .recipient-list .checkbox {
    margin: 0;
}

.multiselect-list .recipient-list ul li {
    border-bottom: 1px solid #eeeeee;
    padding: 7px 0;
}

    .multiselect-list .recipient-list ul li:last-child {
        border: none;
    }

.multiselect-list .username {
    font-weight: 600;
}

.multiselect-list .username,
.multiselect-list .useremail {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

.multiselect-list .useremail {
    color: #8D8D8D;
}

.required-attachment-count {
    font-weight: 100;
    font-size: 12px;
    color: #a1a1a1;
    position: relative;
    top: -1px;
    left: 3px;
}

.info-box.activation h4 {
    text-align: left;
    margin-top: 20px;
    margin-bottom: 20px;
}

.form-group-holder.isReadOnly {
    margin-top: 20px;
}

    .form-group-holder.isReadOnly .form-control {
        padding: 6px 12px !important;
    }

    .form-group-holder.isReadOnly label {
        top: -15px !important;
    }

.alert-banner {
    background: #007AFF;
    z-index: 9999;
    text-align: center;
    width: 100%;
    padding: 10px;
}

    .alert-banner .close {
        opacity: 0.5;
        color: #fff;
        text-shadow: none;
    }

    .alert-banner a {
        color: #fff;
        text-decoration: underline;
    }

.model-min-height {
    min-height: 100vh !important;
}

.properties-wrapper .document-item {
    background: #ccf1c1;
    height: 50px;
    padding: 10px;
}

    .properties-wrapper .document-item .document-name {
        margin-top: 6px;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

.properties-wrapper .btn-icon {
    color: #333;
}

.property-item {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

    .property-item > label {
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 7px;
    }

    .property-item p {
        color: #7A7A7A;
    }

.inline-radio {
    display: flex;
    align-items: center;
}

    .inline-radio .radio + .radio,
    .inline-radio .checkbox + .checkbox {
        margin: 0;
        margin-left: 15px;
    }

    .inline-radio .radio > label {
        padding-left: 22px;
    }

.property-item .inline-radio {
    justify-content: end;
}

.property-item .radio-label {
    margin-top: 4px;
}

.property-item .item-label {
    font-weight: bold;
    margin-top: 5px;
}

.properties-wrapper .according-dropdwon {
    display: flex;
    justify-content: end;
}

.properties-wrapper .according-dropdwon .accordion-btn {
    margin-left: 15px;
    margin-top: 4px;
}

.has-properties {
    position: absolute;
    top: 2px;
    right: 0;
}

.package-item .ellipsis {
    padding-right: 30px;
}

.filter-row {
    padding: 0 10px;
    border-bottom: 1px solid #ddd;
}

.filter-menu li a {
    padding: 7px 10px !important;
}
.nav-tabs-link > .btn-default.active {
    color: #387D20;
}
.add-comments-btn {
    float: right;
    margin-right: 10px;
    margin-top: 20px;
}
.comment-field {
    position: absolute;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: #BCBCBC;

}

    .comment-field .counter {
        background: #FADE19;
        height: 18px;
        width: 18px;
        display: inline-flex;
        position: absolute;
        top: 0;
        right: -6px;
        border-radius: 50%;
        font-size: 10px;
        justify-content: center;
        align-items: center;
    }
    .comment-field .comment-icon {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
.bottom-sheet .modal-content {
    border-radius:0;
}
.bottom-sheet .modal-dialog {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
}
.post-comments {
    padding:15px;
}
.comments-wrapper textarea {
    min-height: 80px;
    max-height: 150px;
    resize: none;
    font-size: 13px;
    border-radius: 0;
    border: 1px solid #E9E9E9;
}
.comments-wrapper textarea:focus {
    border: 1px solid #E9E9E9;
}
.comments-wrapper .recpients-list {
    border: 1px solid #ddd;
    margin-bottom: 10px;
    max-height: 200px;
    overflow: auto;
}

.comments-wrapper .recpients-list ul {
    margin: 0;
    padding: 0;
}
.comments-wrapper .recpients-list ul li {
    border-bottom: 1px solid #ddd;
    padding: 5px 10px;
    position: relative;
}
.comments-wrapper .recpients-list ul li .checked {
    display:none;
}
.comments-wrapper .recpients-list ul li.selected {
    background: none !important;
}
.comments-wrapper .recpients-list ul li.selected  .checked {
    display: block;
    position: absolute;
    top: 13px;
    right: 0;
}
.comments-wrapper .recpients-list ul li:last-child {
    border:none;
}
.comments-wrapper .recpients-list ul li a h4 {
    text-transform: none;
    font-size: 13px;
    text-align: left;
    margin: 0;
    color: #000;
}
.comments-wrapper .recpients-list p {
    font-size: 13px;
    color: #898989;
    margin:0;
}
.comments-wrapper .recpient-list-wrap .list-header {
    display: flex;
    margin: 9px 0;
}
.comments-wrapper .recpient-list-wrap .list-header h5 {
    text-transform: none;
    color: #989898;
    font-size: 13px;
}
.comments-wrapper .recpient-list-wrap .list-header .done-btn{
    margin-left: auto;
}
.comments-wrapper .recpient-list-wrap .everyone-btn {
    background: none !important;
    position: relative;
    margin-bottom: 5px;
}
.comments-wrapper .recpient-list-wrap .everyone-btn .checked {
    display: none;
}

.comments-wrapper .recpient-list-wrap .everyone-btn.selected .checked {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
}
.edit-comment {
    padding: 15px;
}
.comments-wrapper .recpient-list-wrap .recpients-list, 
.comments-wrapper .recpient-list-wrap .recpients-list  ul li  {
    border: none;
    padding: 0;
}
.recpient-list-wrap .recpients-list  ul li  {
    margin-bottom: 5px;
}

.comment-footer {
    display: flex;
    margin-top: 10px;
    align-items: end;
}
.comment-footer .action-btns .btn,
.reply-footer .btn {
    height: 28px;
    min-width: 70px;
    font-size: 11px;
    font-weight: bold;
    padding: 0;
    text-transform: uppercase;
}
.comment-footer .action-btns .btn:focus,
.reply-footer .btn:focus {
    color: #fff;
}
.reply-footer .comment-type .private .tag-icon  {
    margin-right: 5px;
    padding-right: 3px;
    border-right: 1px solid #a1a1a1;
}
.comment-footer .footer-options {
    margin-left:auto;
}
.comment-footer .footer-options ul {
    list-style:none;
    margin:0;
    padding:0;
    display:inline-flex;
}
.comment-footer .footer-options ul li a{
    margin-left:7px
}
.comments-conversation .comment-item{
    padding:15px;
    display: flex;
}
.comments-conversation .comment-item .user-avtar {
    width: 35px;
    margin-right: 10px;
}
.comments-conversation .comments {
    width: calc(100% - 40px);
}
.comments-conversation .comments .action-dropdown {
    margin-left: auto;
    width: 25px;
}
.comments-conversation .comments .action-dropdown .dropdown-menu {
    right: 40px;
    left: auto;
    top: 7px;
    overflow: hidden;
    min-width: 117px;
    font-size: 12px;
    padding: 0;
}
.comments-conversation .comments .action-dropdown .dropdown-menu > li {
    padding: 0;
}
.comments-conversation .comments .action-dropdown .dropdown-menu > li > a {
    padding: 7px 12px;
    font-size: 12px;
}
.comments-conversation .comment-header {
    display: flex;
}
.comments-conversation .comment-item .user-avtar span {
    background: #C4C4C4;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}
.comments-conversation .comment-header .user-info {
    width: 100%;
    font-size: 12px;
}
.comments-conversation .comment-header .user-info .username {
    font-weight: bold;
    line-height: 18px;
}
.comments-conversation .comment-header .user-info .useremail {
    color: #8f8f8f;
}
.comments-conversation .comment-header .user-info .time {
    font-size: 12px;
    color: #8f8f8f;
}
.comments-conversation .comment-body {
    font-size: 12px;
    margin-top: 10px;
    white-space: normal;
    word-wrap: break-word;
    padding-right: 15px;
}
.reply-comment {
    background: #F3F3F3;
    padding: 15px;
    position: relative;
}
.reply-footer {
    display: flex;
    align-items: center;
    margin-top: 10px;
    align-items: center;
    font-size: 12px;
    color: #686868;
}
.reply-comment .reply-btn {
    width: 70px;
    margin-left: auto;
}
.reply-comment .everyone span {
    margin-left: 3px;
    border-left: 1px solid #a1a1a1;
    padding-left: 6px;
    position: relative;
    top: -2px;
}
.reply-comment textarea {
    min-height: auto;
    max-height: 68px;
}
.reply-comment .recpients-list {
    background: #fff;
    position: absolute;
    bottom: 100%;
    left: 15px;
    right: 15px;
    border-radius: 4px;
    box-shadow: 2px 2px 11px #b1b1b1;
}
.comment-list {
    max-height: 370px;
    overflow: auto;
}





.list-header-notify {
    display: flex;
    margin: 9px 0;
    padding: 0 0 0 10px;
}

    .list-header-notify h5 {
        text-transform: none;
        color: #989898;
        font-size: 13px;
    }

.recipient-selected {
    display: block;
    position: absolute;
    right: 10px;
    top: 0;
}

.white-space-unset {
    white-space : unset !important;
}
.menu-text {
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    text-overflow: ellipsis;
}
.sidebar-menu > li > a {
    display: flex;
    align-items: center;
}

.reminder-settings-dropdown {
    padding-left: 10px !important;
    padding-right: 0px !important;
}

.reminder-settings-dropdown-options{
    width: 100% !important;
    height: 37px !important;
    padding: 7px 12px !important;
}

.or-divider {
    position: relative;
    text-align: center;
    margin: 20px 0;
}

    .or-divider:before {
        content: "";
        border-bottom: 1px solid #ddd;
        position: absolute;
        left: 0;
        right: 0;
        top: 9px;
    }

    .or-divider span {
        background: #fff;
        padding: 0 20px;
        position: relative;
        color: #b7b7b7;
        font-weight: 600;
    }

.recent-login-options {
    margin-bottom: 20px;
}

.recent-login-options .login-options-item {
    border: 1px solid #ddd;
    display: flex;
    padding: 7px;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 5px;
    align-items: center;
    max-height:45px;
}

.recent-login-options .login-options-item:hover {
    border: 1px solid #c9c5c5;
}

.recent-login-options .login-options-item.selected {
    border: 1px solid #55cf31;
    background: #fff !important;
}

.recent-login-options .login-options-item.only-logo {
    justify-content: center;
}

.recent-login-options .login-options-item.only-logo .auth-name {
    display: none;
}

.recent-login-options .login-options-item .auth-logo {
margin-right: 10px;
}

.recent-login-options .login-options-item .auth-logo img {
    max-height: 30px;
    max-width:30px;
}
    .recent-login-options .login-options-item.only-logo .auth-logo img {
        max-height: 30px;
        max-width: 100%;
    }

.recent-login-options .login-options-item .auth-name {
font-weight: 600;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.custom-grid.delivery-method .body {
    padding: 15px;
}
.custom-grid.delivery-method .body .btn {
    width:100%;
}
    .custom-grid.delivery-method .body label {
        margin-bottom: 5px;
    }
    .custom-grid.delivery-method .body .form-control,
    .custom-grid.delivery-method .dropdown-menu > li > a {
        font-size: 14px;
    }
    .custom-grid.delivery-method .body .form-control {
        height:34px;
    }

.replicate-update-doc-text {
    color: #237afc !important;
    cursor: pointer;
    font-size:12px;
}

.float-right{
    float: right !important;
}

.notification-bar {
    -moz-transition: transform 0.3s linear;
    -o-transition: transform 0.3s linear;
    -webkit-transition: transform 0.3s linear;
    transition: transform 0.3s linear;
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    background: #007aff;
    text-align: center;
    overflow: hidden;
    color: #fff;
    z-index: 150;
    right: 0;
    left: 0;
    top: 60;
    padding-top:20px;
    padding-bottom:5px;
    padding-left:5px;
    padding-right:5px;
    position:absolute;
}

.notification-bar.active {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.notification-bar-cross-icon {
    color: #ffffff;
    float: right;
    margin-top: -11px;
    margin-right: 13px;
    cursor:pointer;
}
.mobile-input-field .input-group {
    padding:0 !important;
}

.mobile-input-field .input-group .form-control {
    border-radius: 4px!important
}

.toggle-type-icon {
    position: relative;
    top: -15px;
    float: right;
    margin-right: 15px;
    cursor: pointer;
}

.branding-logo-maxheight {
    max-height: 33px;
}

.qr-code-logo-upload-btn {
    font-size: 12px;
    float: right;
    margin-top: -26px;
}

.qr-code-logo-upload-img {
    display: inline-block;
    float: right;
    margin-right: 20px;
    margin-top: 5px;
}

.qr-code-logo-cross-icon {
    margin-top: -16px;
    position: absolute;
    font-size: 16px;
    cursor: pointer;
    margin-left:2px;
}

.qr-code-logo-preview-btn {
    width: -webkit-fill-available;
    background: #d6d6d6;
}

.preview-qr-field-div {
    display: flex;
    justify-content: center;
}

.preview-qr-field-image {
    width: 200px;
    border: 1px solid #d6d6d6;
}

.logo-only-options {
    margin-top: 10px;
}

.logo-only-options .login-options-item {
    border: none;
    justify-content: center;
}

.logo-only-options .login-options-item:hover {
    border: none;
}

.logo-only-options .login-options-item .logo img {
    max-height: 30px;
    max-width: 100%;
}