@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;
}

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

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

    .page-header-2 .header-title > div {
      padding: 0;
      width: 100%;
    }

      .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*/
.document-listing {
}

  /*#region filter*/
  .document-listing .filter {
    padding: 0;
  }

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

    .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 {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

/*#endregion*/

/*#region #16 Viewer*/

.viewer {
}

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

  /*#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 .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 */
      }

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

    .viewer .document-page .sh-signature {
    }

    .viewer .document-page .sh-hand-signature {
    }

    .viewer .document-page .sh-initial {
    }

    .viewer .document-page .sh-inperson {
    }

    /*#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;
    }

/*#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 !important;
  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(-170%);
  }

  .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: 40% !important;
      font-size: 14px;
      margin: 0;
    }

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

      .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-area {
    padding: 15px 20px 20px !important;
    border: none !important;
  }

    .document-listing .filter-area > .floating-width {
      float: right;
      width: 52%;
    }

  .document-listing .filter-drop {
    padding: 10px 0 0;
  }

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

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

  .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%;
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
}

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

.other-login-item .provider-title {
  height: 30px;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  font-size: 12px;
  padding: 0 15px;
  line-height: 14px;
}

.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,
.document-page,
[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;
}

.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: 100vh;
}

.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 a {
        margin-left: auto;
      }

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