html {
    position: relative;
    min-height: 100%;
}
body {
   padding:0;
   margin: 0 0 30px; /* bottom = footer height */
   _margin-left:5px;
   _margin-right:5px;
   background:whitesmoke;
   font-family:"Noto Sans","Gotham Rounded A","Gotham Rounded B",sans-serif;
   font-size:9pt;
   display: flex;
   color: #595959;
   flex-direction: column;
}
body.nosession.nonavigation {
   background: white;
}
body.no-scroll {
   overflow: hidden;
}
.tooltip {
   display: none;
}
.page-pre-loader {
   background: url(images/doxit-nosubscript.svg) center no-repeat #fff;
   background-size: 200px;
}
input,select,textarea {
   font-family: inherit;
}
body > header {
   background:linear-gradient(#4161BA, #25386B);
   background:white;
   background:linear-gradient(#FFFFFF,#D0D0D0);
   height:50px;
   color:black;
   padding-left:5px;
   padding-right:5px;
   _border-bottom-left-radius:5px;
   _border-bottom-right-radius:5px;
   border-bottom:2px solid #AA0000;
   border-top:0px;
   background: url('images/doxit-nosubscript.svg') no-repeat 10px center, linear-gradient(#FFFFFF,#D0D0D0);
   min-width:650px;
   width: 100%;
}
body > footer {
    position:absolute;
    left: 0;
    bottom: 0;
    height: 30px;
    width: 100%;
    background:linear-gradient(#FFFFFF,#D0D0D0);
    text-align:center;
    line-height:30px;
    box-shadow: 0px 5px 10px 0px #888888;
}
a {
   color: #595959;
}
a:hover {
   color: #AA0000;
}
a.nodecoration {
   color: inherit;
   text-decoration: none;
}
a.nodecoration:hover{
   color: inherit;
   text-decoration: none;
}
/*
 *  Styling of scrollbars
 */

 ::-webkit-scrollbar-track
 {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 5px;
    background-color: #F5F5F5;
 }

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

 ::-webkit-scrollbar-thumb
 {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #AAA;
 }

.login_banner {
   background-image: url('images/doxit-nosubscript.svg');
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
   height:130px;
   margin-top:0;
}
#banner_logo {
   float:left;
   background-image: url('images/doxit-nosubscript.svg');
   background-repeat: no-repeat;
   background-position: center center;
   width:110px;
   height:50px;
}
body > header a {
   color:white;
}
body > header #roles,
body > header #roles a{
   color:#595959;
}
main {
   margin-left:10px;
   margin-right:10px;
   margin-top: 50px;
   _margin:0;
}
/*
 * nosession template
 */
header.nosession {
   _position: absolute;
}
header.nosession .banner {
   background-repeat: no-repeat;
   background-position: 20px center;
   background-size: contain;
   height:50px;
}
main.nosession .content {
   /* width: fit-content; */
   margin: auto;
   overflow: auto;
   padding-left: 10px;
   padding-right: 10px;
}
main.nosession .content h1 {
   font-size:16pt;
   border-bottom:2px solid #D0D0D0;
   padding-bottom:5px;
}
/* ************************ */
/*
 * blank template
 */

main.blank .content {
   margin: auto;
   overflow: auto;
}
main.blank .content h1 {
   font-size:16pt;
   border-bottom:2px solid #D0D0D0;
   padding-bottom:5px;
}
/* ************************ */

/*
 * nosession nonavigation template
 */
body.nonavigation .overlay{
   /* NOTE: a stop-gap added for Doxit to "hide" the sometimes confusing messages
    * displayed prior to the user accepting documents when taken directly
    * to the doc_inoutbox/rcvrs_by_doc page.
    */
   opacity: 0.9;
}
header.nosession.nonavigation .banner {
   height:50px;
   background-size:contain;
   background-color: #eee;
   _margin-top:5px;
   _margin:5px;
}
/* ************************ */
.title-container h1,
.title-container h2,
.title-container h3,
.title-container h4,
.title-container h5,
.title-container h6 {
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
}

#page_heading {
   line-height:50px;
   font-style:italic;
   font-weight:bold;
   font-size:12pt;
   margin-left:110px;
   display:inline-block;
   _color:#595959;
   height: 20px;
   line-height: 20px;
   padding: 5px;
   border-radius: 15px;
   vertical-align: middle;
   top: 10px;
   position: absolute;
   padding-left: 10px;
   padding-right: 10px;
   _background:linear-gradient(#D0D0D0,#EEE);
   _min-width:400px;
   background-color:#555;
   color:white;
}
nav {
   background:#25386B;
   padding:10px;
   color: white;
   border-radius: 5px;
   background:linear-gradient(#D0D0D0, #8C8C8C);
   background:transparent;
   float:right;
}
nav a {
   color:white;
   vertical-align:middle;
}
#nav_login_user {
   float:left;
   _text-shadow: 1px 1px 2px #333;
   text-align:right;
   padding-right:10px;
   color:#595959;
   padding-top:3px;
}
#nav_login_user .user_name {
   font-weight:bold;
}
#nav_login_user .role_name {
   font-size:80%;
}
#nav_menu_container {
   float:right;
}
#nav_menu_doc  {
   background-image: url('images/navbar_doc.svg');
}
#nav_menu_admin  {
   background-image: url('images/navbar_admin.svg');
}
#nav_menu_account  {
   background-image: url('images/navbar_account.svg');
}
#nav_menu_assistant  {
   background-image: url('images/navbar_assistant.svg');
}
#nav_menu_directory  {
   background-image: url('images/navbar_directory.svg');
}
#nav_menu_report_type_index {
   background-image: url('images/navbar_reports.svg');
}

.login_container {
   margin:auto;
   _padding:10px;
   background:white;
   border: 2px solid #D0D0D0;
   border-top:0;
   border-bottom-left-radius:10px;
   border-bottom-right-radius:10px;
   display:table;
   font-size:15pt;
}
.login_container footer {
   margin-top:30px;
   background-color:#DDD;
   padding: 15px;
   text-align: center;
}
#login_form {
   text-align: center;
   margin-left: 50px;
   margin-right: 50px;
   width: 350px;
}
#login_select_user_role,
#activation_container {
   margin:auto;
   padding:10px;
   background:white;
   border: 2px solid #D0D0D0;
   border-top:0;
   border-bottom-left-radius:10px;
   border-bottom-right-radius:10px;
   display:table;
}
#user_activate_form,
#register_form_container,
#register_request_form_container,
#self_register_form_container,
#self_register_confirm_form_container,
#password_reset_form_container,
#report_abuse_doc_msg_form_container {
   font-size:8pt;
   margin-left: 30px;
   margin-right: 30px;
   width: 500px;
}
#user_activate_form,
#register_form_container,
#register_request_form_container,
#self_register_form_container,
#self_register_confirm_form_container,
#report_abuse_doc_msg_form_container {
   width:580px;
}
#register_form > table {
   width:100%;
}
.login_container h1
{
   text-align:center;
   font-size:16pt;
   border-bottom:2px solid #D0D0D0;
   padding-bottom:5px;
   font-weight:400;
   _font-style:italic;
}
.login_container .button_container {
   text-align:center;
   padding:5px;
}
.login_container .instructions {
   width:auto;
   /* min-width: 400px; */
   margin:10px;
}
#login_form .forgot_password {
   margin-top:10px;
   font-size:10pt;
}
#login_form .register {
   margin-top:10px;
   font-size:10pt;
}
button.login {
   font-size:12pt;
   _box-shadow: 0px 2px 2px 0px #555;
}
#activation_container {
   width:80%;
   max-width:500px;
}
#activation_instructions {
   margin:10px;
}
.otp_instructions {
   font-size:12pt;
}
.otp_timer {
   text-align:center;
   background-color: #FEEFB3;
   color: #9F6000;
   padding: 5px;
   border-radius: 5px;
   border: 1px solid #F7CF94;
}
button.otp_alt_actions {
   _background:none;
   border:0;
   font-weight:bold;
   color:white;
   margin:0px;
   font-size:9pt;
   cursor:pointer;
}
button.otp_alt_actions:hover {
   text-decoration:underline;
}

/*
 * generic terms container
 */
.terms_container {
   text-align:center;
   background-color:#DDD;
   border-radius:20px;
   width:50%;
   margin:auto;
   margin-top:20px;
   padding:20px;
}
.terms {
   _margin:auto;
   _margin-top:20px;
   _width:50%;
   text-align:left;
}

.pdf_container {
   border:5px solid #CCC;
   border-radius:5px;
}
.pdf_container a {
   margin:10px;
}
table.tabular-form {
  background:transparent;
}
input,select, textarea {
   font-size:10pt;
   background:#F7F7F7;
}
.role_added_user {
   color:green;
   text-decoration: none;
}
.role_deleted_user {
   text-decoration: line-through;
   color:red;
}
form.data_input,.form_container {
   border: 2px solid lightgray;
   border-top:0px;
   _display: table;
   margin: auto;
   padding: 10px;
   border-radius:10px;
   border-top-left-radius:0px;
   border-top-right-radius:0px;
   background:white;
}
form.data_input.noborder {
   border:0;
}
form.data_input .instructions,.form_container .instructions {
   /* an instructions container within a form container */
   _width:500px;
   margin:10px;
}
td > img {
   vertical-align:middle;
}

#toggle_search_form,
#toggle_report_filters_form {
   background: none;
   background-image: url('images/open_search_dialog.svg');
   background-repeat: no-repeat;
   background-position: center center;
   height: 33px;
   width:50px;
   padding:0;
}

/*
 * assistant management
 */
#existing_assistants {
   display:table;
   padding-top:20px;
   margin:auto;
}
#existing_assistants > h1 {
   margin:0;
}
img[id^="del_assistant_"] {
   cursor: pointer;
}
table.assistant_role_accept_terms td {
   padding-bottom:15px;
}
.role_terms {
   background: #EEE;
   padding: 10px;
   _max-width: 800px;
   border-radius: 7px;
}

table.manage_assistants {
   border-spacing: 0px;
   border-collapse: separate;
   background: none repeat scroll 0% 0% #DDD;
   padding: 5px;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
   min-width:440px;
}
table.manage_assistants caption {
   font-weight:bold;
   background: none repeat scroll 0% 0% #DDD;
   text-align:center;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   padding:5px;
}
table.manage_assistants tr {
   border-bottom:1px solid #CCC;
}
table.manage_assistants th {
   background:#EEE;
}
table.manage_assistants th,table.manage_assistants td {
   padding:5px;
}
table.manage_assistants td.selected {
  background:#D0D0D0;
}

/* buttons */
button.accept,
button.decline,
button.defer {
   color:white;
   font-weight:bold;
   cursor:pointer;
   height:24px;
   border-radius:12px;
   border:0;
   _line-height:20px;
   _vertical-align:middle;
   min-width: 50px;
   padding:0px 10px;
   font-size:10pt;
}
button.accept {
   background:#1B8C35;
}
button.decline {
   background:#BA3213;
}
button.defer {
   background:#666;
}
button.delete {
   border:0;
   height:25px;
   width:25px;
   background:none;
   background-image: url('images/delete_row.svg');
   background-repeat: no-repeat;
   background-position: center center;
   cursor:pointer;
}
.action_dialog button.calltoaction,
.action_dialog .button.calltoaction {
    min-width: 12em;
}
button.calltoaction,
.button.calltoaction {
   background-color: #AA0000;
   _border-radius:4px;
   color: #fff !important;
   text-decoration: none;
   cursor: pointer;
   border:none;
   font-weight:bold;
   _border: 1px solid #800;
   _box-shadow: 0px 2px 2px 0px #555;
   _background:linear-gradient(#AA0000,#750000);
   font-family: inherit;
   /* padding: 8px; */
}
button.calltoaction:hover,
.button.calltoaction:hover {
   transition: background-color .5s,color .5s,border-color .5s;
   background-color:#d10000;
}
button.calltoaction.disabled,
.button.calltoaction.disabled {
   background-color:#A0A0A0;
   cursor:default;
}
button.calltoaction.secondary,
.button.calltoaction.secondary {
    color: #A00 !important;
    background-color: white;
    border: solid 1px;
    width: auto;
}
button.calltoaction.secondary:hover,
.button.calltoaction.secondary:hover {
   transition: background-color .5s,color .5s,border-color .5s;
   background-color: #fbdddd;
}
button.calltoaction.secondary.disabled,
.button.calltoaction.secondary.disabled {
   background-color:#A0A0A0;
   cursor:default;
   color: #555 !important;
}
/* .button {
   background-color: rgb(85, 85, 85);
   color: white;
   font-weight: bold;
   display: inline-block;
   _width: 70px;
   text-align: center;
   padding: 2px;
   border-radius: 5px;
   margin: 3px;
   padding-left: 4px;
   padding-right: 4px;
   cursor:pointer;
} */

/*
 * messages
 */
.app_messages {
   font-size:9pt;
}
.app_messages>ul {
   list-style:none;
    padding:0;
}

.thumbnail {
   _border: 3px solid #CCC;
   border: 0;
   border-radius: 5px;
   background-color: white;
   background-repeat: no-repeat;
   background-position: center center;
   box-shadow: 0px 0px 5px 0px #555;
   min-width:100px;
   max-height: 185px;
   _min-height:100px;
   margin:5px;
   vertical-align:middle;
   z-index: 20;
   padding: 2px;
}
.hover_thumbnail{
   max-height: unset;
}
.process_text{
   text-align: center;
}
.loading,
.text_loading {
   background-image: url('images/Doxit_loading.gif');
   background-size: 30px;
   background-repeat: no-repeat;
   background-position: center center;
   min-height:30px;
}
h1.loading,
.text_loading {
   background-position: center right;
}
.loadinglogo {
   background-image: url('images/Doxit.gif');
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center center;
   min-height:35px;
}
.hidden{
   display: none !important;
}
/*
 * admin_security_module
 */
.form_container.security_module {
   text-align:center;
   min-width:300px;
}
.security_module_enter_pin {
   border-radius:10px;
   background-color:#F0F0F0;
   padding:20px;
}
.security_module_status {
   padding:10px;
   font-weight:bold;
   display:inline-block;
   margin:10px;
   color:white;
   background-color:#AA0000;
   width: 80px;
   height: 80px;
   border-radius: 80px;
   line-height: 65px;
}
.security_module_status.ok {
   background-color:green;
}

/*
 * doc
 */
#doc_shared_library table.mvc-report > tbody > tr > td,
#doc_index table.mvc-report > tbody > tr > td {
   white-space: normal !important;
}
#doc_shared_library table.mvc-report > tbody > tr > td .recipients_list,
#doc_index table.mvc-report > tbody > tr > td .recipients_list {
   _margin-left: 5px;
}
#doc_shared_library table.mvc-report > tbody > tr > td .recipients_list ul,
#doc_index table.mvc-report > tbody > tr > td .recipients_list ul {
   margin: 0px;
}
#doc_shared_library table.mvc-report > tbody > tr > td .type_name,
#doc_index table.mvc-report > tbody > tr > td .type_name {
   _font-size: 10pt;
}
#doc_shared_library table.mvc-report > tbody > tr > td img,
#doc_index table.mvc-report > tbody > tr > td img{
   border: solid 1px #AAA;
   _box-shadow: 0px 0px 5px 0px #555;
   height:50px;
   min-width:36px;
}
.doc_preview_link {
   cursor: pointer;
   vertical-align: middle;
   _background-color:white;
   _border:1px solid #DDD;
}
div.rcvrs_by_doc_container {
   overflow: auto;
   padding: 15px;
   padding-top: 0;
}
.content-container div.rcvrs_by_doc_container {
   overflow: unset;
   padding: 0px;
}
div.doc_preview_sidebar {
   float: right;
   width: 18%;
   background-color:white;
   padding: 5px;
   border-radius: 10px;
   overflow:auto;
   font-size:10px;
}
div.doc_preview_sidebar div.download_document a > img {
   margin:5px;
}
div.doc_preview_sidebar div.download_document a img:hover {
   -webkit-filter: drop-shadow(5px 5px 5px #555);
   filter: drop-shadow(0px 0px 3px #555);
}
div.doc_preview_sidebar table.mvc-report-attr-value-1col tr:nth-child(2n) > td {
   word-break: break-word;
}
#doc_preview_container {
   float:left;
   width:77%;
}
img.doc_preview_img {
   width: 100%;
   max-width: max-content;
   vertical-align: middle;
   box-shadow: 0px 0px 5px 0px #555;
}
div.doc_preview_details h2 {
   margin-bottom:0;
   margin-top:2px;
}
div.doc_preview_details > div {
    background-color: #fcfcfc;
    padding: 5px;
    margin-bottom: 5px;
    border-radius: 10px;
}
div.doc_preview_details .unviewed,
div.doc_preview_details .unaccepted {
   color: #AA0000;
}
div.doc_preview_details ul {
   margin:0;
}
.dialog.container.doc_preview {
   max-width: 1425px;
}
.dialog.container.doc_preview {
   max-width: 95%;
   border-radius: 0;
   border: 0;
}
.dialog.header {
   border:0;
}
.dialog.container.doc_preview .button_container {
   margin-bottom:5px;
}

/*
 * shared_library
 */

.shared_library_info .record {
   padding:10px;
   background-color: #F7F7F7;
   border-radius: 10px;
   margin-bottom: 3px;
   width: 270px;
   display: inline-block;
   margin: 5px;
}
.shared_library_info .record:last-child {
   border:0;
}
.shared_library_info .record .firstletter {
   display: inline-block;
   background-color: #E0E0E0;
   width: 50px;
   height: 50px;
   border-radius: 30px;
   text-align: center;
   line-height: 50px;
   font-weight: bold;
   font-size: 15pt;
   text-transform: capitalize;
   margin-right:10px;
   color:white;
}
.shared_library_info .record > * {
   vertical-align:middle;
}
.shared_library_info .record .firstletter {
   background-color: #EC9999;
   text-transform: uppercase;
}
.shared_library_info .record .details {
   display: inline-block;
   width: 180px;
}
.shared_library_info .record .details .shared_library_reason{
   font-style: italic;
}
.shared_library_info .record .details .user_name{
   font-weight: bold;
}

/*
 * directory_user
 */
.edit_invite,
.revoke_invite,
.resend_invite {
   background-repeat: no-repeat;
   background-position: center center;
   background-image: url('images/delete_row.svg');
   background-size: contain;
   height:20px;
   width:20px;
   cursor:pointer;
   padding:5px;
}
.revoke_invite {
   background-image: url('images/delete_row.svg');
}
.resend_invite {
   background-image: url('images/resend_invite.svg');
}
.edit_invite {
   background-image: url("images/edit.svg");
}

/*
 * doc_msg_accept (this was moved from docbox.css to here, as this element can be displayed anywhere in the application
 */
.doc_msg_accept {
   position:fixed;
   background-color:white;
   background-repeat: no-repeat;
   background-position: center 0;
   background-image: url("images/doxit-nosubscript.svg");
   background-size: 170px;
   _right:0px;
   top:-300px;
   display:inline-block;
   border-bottom-right-radius:10px;
   border-bottom-left-radius:10px;
   box-shadow: 0px 5px 10px 0px #888888;
   padding:10px;
   padding-top: 65px;
   overflow: none;
   right:0;
   left:0;
   width:400px;
   margin:auto;
   z-index:1001; /* must be larger than 10 for the overlay */
   text-align:center;
   _margin-top:50px;
}

/*
 * directory_accept_invite
 */
table.directory_accept_invite {
   border-collapse:collapse;
   width:100%;
   font-size: smaller;
}
table.directory_accept_invite > tbody > tr {
   box-shadow: 0px 0px 10px 1px #E0E0E0;
   background-color:white;
   border-radius: 5px;
   display:block;
   margin-bottom:10px;
}
table.directory_accept_invite td:first-child {
   width:100%;
   padding:5px 5px 10px 80px;
   background-repeat: no-repeat;
   background-position: 8px center;
   background-image: url('images/directory_user_thumbnail_blank.svg');
}
table.directory_accept_invite td {
   _border-bottom: 2px solid #CCC;
}
table.directory_accept_invite tr:last-child td {
   border:0;
}
table.directory_accept_invite tr:hover {
   _background-color:#EFDED9;
   box-shadow: 0 0 8px 3px #E6A5A5;
}
table.directory_accept_invite td fieldset {
   padding: 10px;
   border-radius: 4px;
   margin-top: 10px;
   color: #AA0000;
   font-style: italic;
   background-color: #F2F2F2;
}
table.directory_accept_invite td fieldset legend {
   _font-weight: bold;
   font-style: normal;
}
div.directory_accept_invite {
}
.invite_expiry_date.days_1 {
   color:#AA0000;
   font-weight:bold;
}
.invite_expiry_date.days_3 {
   color:#EF9329;
   font-weight:bold;
}
.invite_expiry_date.resend_success {
   padding:5px;
   color: #4F8A10;
   background-color: #DFF2BF;
   _border-radius: 5px;
   border: 1px solid;
   display: block;
}

/*
 * directory
 */
.directory {
   _width: 600px;
   margin: auto;
   background-color:white;
   padding:10px;
   border-bottom-left-radius:10px;
   border-bottom-right-radius:10px;
}
.directory h1 {
   font-weight: bold;
   font-size: 10pt;
   margin-top: 0;
   background-color: #8a8d91;
   padding: 5px 15px;
   color: white;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   color: white;
   text-transform: uppercase;
}
.directory div.my_roles,
.directory div.group_send,
.directory div.other_user_roles {
   background-color: #EEE;
   padding: 5px;
   border-radius: 10px;
   margin-bottom: 10px;
   max-height: 300px;
   overflow: auto;
}
.directory div.group_send,
.directory div.other_user_roles {
   max-height: 500px;
}

.directory .edit_group{
   background-image: url("images/edit2.svg");
   height: 20px;
   width: 20px;
   margin-left: 5px;
   cursor: pointer;
   vertical-align: bottom;
}

.directory .group_send .groups {
   display: flex;
   flex-wrap: wrap;
}
.directory .group_send .record .delete_group{
   background-image: url("images/delete2.svg");
   height: 20px;
   width: 20px;
   margin-left: 5px;
   cursor: pointer;
   vertical-align: bottom;
}
.directory .group_send .record ul {
   display: flex;
   flex-wrap: wrap;
   margin: 0;
   padding: 0;
}
.directory .group_send .record ul > li {
   display:inline-block;
   display: inline-block;
   width: 100px;
   margin-right: 5px;
   margin-bottom: 3px;
   font-size: 8pt;
}

.directory ul.my_roles {
   list-style-type: none;
   _display: inline-block;
   background-color: #EEE;
   padding: 5px;
   border-radius: 10px;
}
.directory ul.my_roles > li {
   background-repeat: no-repeat;
   background-position: 3px center;
   padding-left: 40px;
   cursor: pointer;
   height: 30px;
   line-height: 30px;
}
.directory ul.my_roles > li:hover {
   _opacity: 80%;
   border-radius:5px;
   background-color: #DDD;
}
.directory ul.my_roles > li.role.directory_role_hidden,
.directory ul.my_roles > li.public_directory.no {
   background-image: url('images/directory_role_hidden.svg');
   color:#9b9b9b;
}
.directory ul.my_roles > li.role.directory_role_visible,
.directory ul.my_roles > li.public_directory.yes {
   background-image: url('images/directory_role_visible.svg');
}
.directory ul.my_roles > li.role.directory_role_visible.delegate_status_text.active {
   color: green;
}
.directory .other_user_roles .record .public_directory {
   background-image: url('images/directory_public.svg');
   height:25px;
   width:25px;
}
.directory .other_user_roles .record .private_directory {
   background-image: url('images/directory_private.svg');
   height:25px;
   width:25px;
}
.directory .other_user_roles .record .billentity_group {
   background-image: url('images/directory_billentity_group.svg');
   height:25px;
   width:25px;
}
.directory .display_options {
   _background-color:#E0E0E0;
   padding:5px;
}
.directory .display_options > *{
   vertical-align:middle;
}
.directory .nav_menu {
   _text-align:right;
}
.directory .record {
   _border-bottom:1px solid #CCC;
   padding:10px;
   _display: inline-block;
   background-color: #F7F7F7;
   border-radius: 10px;
   margin-bottom: 3px;
   width: 370px;
   display: inline-block;
   margin: 5px;
}
.directory .record:last-child {
   border:0;
}
.directory .record .firstletter {
   display: inline-block;
   background-color: #E0E0E0;
   width: 50px;
   height: 50px;
   border-radius: 30px;
   text-align: center;
   line-height: 50px;
   font-weight: bold;
   font-size: 15pt;
   text-transform: capitalize;
   margin-right:10px;
   color:white;
}
.directory .record > * {
    vertical-align:middle;
}
.directory .record .firstletter {
   background-color: #EC9999;
   text-transform: uppercase;
}
.directory .record .firstletter.public_directory_no {
   background-color:#BA3213;
}
.directory .record .firstletter.public_directory_yes {
   background-color:#1B8C35;
}
.directory .record .details {
   display: inline-block;
   width: 275px;
}
.directory .record .details ul.roles {
   margin:0;
   display:none;
   font-size: 8pt;
}
.directory .record .details .view_roles {
   cursor: pointer;
   text-decoration:underline;
}
#invite_otp {
   margin-top:10px;
   margin-bottom:10px;
   background-color:#E0E0E0;
   border-radius:10px;
   padding:10px;
   text-align:center;
}
/* directory/send_invite */
#directory_current_invites {
   width: 600px;
}
#directory_invite tr.user_message {
   top: 0;
   right: 0;
   position: absolute;
   margin: 10px;
}
#edit_directory_invite {
   width: 100%;
   margin:0;
   background:transparent;
   box-shadow:none;
   padding: 5px;
   box-sizing: border-box;
}
#directory_invite {
   box-shadow: 0px 0px 10px 1px #E0E0E0;
   margin: 10px;
   border-radius: 0px;
   background: white;
   width: 1025px;
   min-height: 450px;
   position: relative;
}

#directory_invite table.tabular-form {
   width:500px;
}
#directory_invite table.tabular-form > tbody > tr > td:first-child {
   white-space:normal;
}

.edit_group div.selected_roles td.delete,
.create_group div.selected_roles td.delete {
   background-image: url('images/app-table_row-delete-2.svg');
   background-position: center center;
   background-repeat:no-repeat;
   width:15px;
   cursor:pointer;
}
.edit_group .group_name,
.create_group .group_name{
   padding: 10px 0px;
}
.create_group .search_role,
.edit_group .search_role {
   padding: 10px;
   background: #eee;
   margin-bottom: 10px;
   border-radius: 10px;
   font-size:8pt;
}
.edit_group #search_role_input,
.create_group #search_role_input{
   padding: 0px 0px 10px 0px;
}
.edit_group div.search_result,
.edit_group div.selected_roles,
.create_group div.search_result,
.create_group div.selected_roles{
   _background-color:#F7F7F7;
   display:none;
   max-height:250px;
   overflow:auto;
   _padding-right:4px;
   width: 100%;
}
.create_group div.selected_roles tr:hover{
   background: #F0F0F0;
}
.edit_group div.search_result table,
.edit_group div.selected_roles table,
.create_group div.search_result table,
.create_group div.selected_roles table{
   width:100%;
   border-collapse: collapse;
}
.edit_group div.search_result th,
.edit_group div.selected_roles th,
.create_group div.search_result th,
.create_group div.selected_roles th {
   padding:5px;
   padding-right:20px;
   white-space:nowrap;
}
.edit_group div.search_result thead tr,
.edit_group div.selected_roles thead tr,
.create_group div.search_result thead tr,
.create_group div.selected_roles thead tr {
   position: sticky;
   top: 0;
}
.edit_group div.search_result thead tr,
.create_group div.search_result thead tr {
   background:#eee;
}
.edit_group div.selected_roles thead tr,
.create_group div.selected_roles thead tr {
   background:white;
}



/*
 * template
 */
#template_subs_ref {
   background-color: #F0F0F0;
   padding: 10px;
}
#entity_search_results.template #entity_report> tbody > tr > td:nth-child(3) > div {
   white-space:normal;
   min-height:200px;
   max-height:400px;
   overflow-y:auto;
   border: 1px dashed #E0E0E0;
   padding: 5px;
   background-color: ivory;
}

/*
 * email_queue
 */
#entity_search_results.email_queue #entity_report> tbody > tr > td.data_html > div {
   white-space:normal;
   max-height:300px;
   overflow-y:auto;
   border: 1px dashed #E0E0E0;
   padding: 5px;
   background-color: ivory;
   width:600px;
   font-size:80%;
}
#entity_search_results.email_queue #entity_report> tbody > tr > td.data_html > div td,
#entity_search_results.email_queue #entity_report> tbody > tr > td.data_html > div th {
   padding:2px;
}
#entity_search_results.email_queue #entity_report> tbody > tr > td.subject {
   white-space:normal;
}

/*
 * report and report_type views
 */
#update_report_type {
   width: auto;
}
#report_type_run div.header {
   padding:0;
   padding-left:10px;
   padding-right:10px;
   overflow:unset;
   border:0;
   background:none;
   margin:0;
}
#report_type_run div.header h1 {
   margin-top:10px;
   margin-bottom:10px;
   float:none;
}
a.run_report {
   background-image: url('images/run_report.svg');
   background-repeat: no-repeat;
   background-position: center right;
   background-size: contain;
   display:block;
   text-decoration:none;
   height:25px;
   width:25px;
}
#report_type_run .warning.nodata {
   margin:auto;
   text-transform:uppercase;
   font-weight:bold;
   text-align:center;
}
#form_report_filters {
   width: 99%;
   margin: auto;
}
#form_report_filters div.pager.top {
   margin: 0;
}
#container_report_filters_form table tr {
   display: inline-block;
}
#container_report_filters_form table tr td {
   display: block;
   padding: 3px;
   font-size: 8pt;
}
#container_report_filters_form table tr td input,
#container_report_filters_form table tr td select {
   padding: 4px;
   font-size: 8pt;
}

/*
 * jquery.tablesorter override
 */
.tablesorter-default {
   font:inherit;
}
.tablesorter-default th, .tablesorter-default thead td {
   background-color: initial;
   color: white;
}
.tablesorter-default thead .headerSortUp,
.tablesorter-default thead .tablesorter-headerSortUp,
.tablesorter-default thead .tablesorter-headerAsc {
   border-bottom: initial;
   background-image: url('images/tablesorter/asc.png');
   background-color: forestgreen;
}
.tablesorter-default .header,
.tablesorter-default .tablesorter-header {
   background-image: url('images/tablesorter/bg.png');
   padding: 8px 20px 8px 8px;
}
.tablesorter-default thead .headerSortDown,
.tablesorter-default thead .tablesorter-headerSortDown,
.tablesorter-default thead .tablesorter-headerDesc {
   background-image: url('images/tablesorter/desc.png');
   border-bottom: initial;
   background-color: forestgreen;
}
.tablesorter-default th{
   position: sticky;
   position: -webkit-sticky;
   position: -moz-sticky;
   position: -ms-sticky;
   position: -o-sticky;
   top: 0;
   border-top: 0;
   border-bottom: 0;
   margin: 0;
}
.tablesorter-default td {
   vertical-align:middle;
}
.tablesorter-default .header, .tablesorter-default .tablesorter-header {
   white-space: nowrap;
}

/*
 * jquery overrides
 */
.ui-widget {
   font-family:"Noto Sans","Gotham Rounded A","Gotham Rounded B",sans-serif;
   font-size:10pt;
}
.ui-autocomplete-input {
   _width:20em;
   _background-color:#EFF6FF !important;
}
.ui-widget-overlay {
/*
   opacity: .40;
   filter: Alpha(Opacity=40);
*/
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
   margin-bottom: 0px;
   padding-bottom: 0px;
}
#tabs .ui-corner-all {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
}
.ui-dialog.ui-widget {
   box-shadow: 0px 5px 10px 0px #888888;
   border-radius: 0;
}
.ui-dialog-titlebar {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
}
.ui-widget-content {
   color: #595959;
   border: 1px solid #e6e6e6;
}
.ui-widget-header {
   background: #e3e3e3;
}
.ui-widget input {
   font-family:"Noto Sans","Gotham Rounded A","Gotham Rounded B",sans-serif;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
   font-family: inherit;
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
   color: #a00;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
   border: 1px solid #a00;
}
/* CSS for buttons within a jQuery dialog */
.ui-dialog-buttonset button.ui-button {
   border: 0;
   background: #324F7B;
}

.z-index-200 {
   z-index: 200;
}

.tox-promotion{
   display:none;
}

.tox .tox-listboxfield .tox-listbox--select,
.tox .tox-textarea,
.tox .tox-textfield,
.tox .tox-toolbar-textfield,
.tox .tox-tbtn--select,
.tox .tox-button--secondary,
.tox .tox-icon,
.tox .tox-mbtn{
   color: #222f3e !important;
}

.tox.tox-tinymce{
   min-height: 350px;
   width: 100%;
}

.template_note .tox-edit-area__iframe,
.document_note .tox-edit-area__iframe,
.doc_send_note .tox-edit-area__iframe{
   background-color: #FCE655;
}

.doc_send_note {
   width: 100%;
   margin-bottom: 10px;
}

/*
 * Bulk Send FIXME: move to separate CSS file
 */

#type_of_bulk_send {
   border-radius: 30px;
   padding: 10px;
   padding-left: 20px;
   padding-right: 20px;
   background: #a00;
   color: white;
   text-align: center;
}
#excel_file_upload {
   padding: 10px;
   padding-left: 20px;
   border-radius: 30px;
   background-color: #A00;
   color: white;
}

.bulk_send {
   background-color:white;
   overflow: auto;
}
.bulk_send input,
.bulk_send select,
.bulk_send textarea {
   padding: 7px;
   border: 0;
   border-radius: 6px;
   background: #EAEAEA;
}
.bulk_send input[name="title_of_bulk_send"] {
   background-color: #FFEDED;
   border: 2px solid #ffd4d4;
}
.bulk_send .purchase_check_status {
   margin: 0;
   border-radius: 0;
}

.bulk_send #advanced_config_template,
.bulk_send #advanced_config_document {
   margin-bottom: 20px;
}

.bulk_send .select_type,
.bulk_send .name_of_new_template_format,
.bulk_send .name_of_new_existing_format,
.bulk_send .name_of_new_document_format{
   padding: 0px 0px 10px 0px;
}

.bulk_send .select_type_template,
.bulk_send .select_type_documents{
   padding: 1px;
   text-align: center;
   margin: auto;
   margin-bottom: 10px;
   background-color: white;
}

.bulk_send .template_section input,
.bulk_send .template_section select,
.bulk_send .correlation input,
.bulk_send .correlation select {
   width: 100%;
   font-size:9pt;
}
.bulk_send .template_section .rows_of_spreadsheet {
   width: auto;
}
.bulk_send .correlation.template_correlation input,
.bulk_send .correlation.template_correlation select,
.bulk_send .correlation.document_correlation input,
.bulk_send .correlation.document_correlation select {
   font-size:9pt;
}

.bulk_send .document_correlation{
   max-height: 82.8vh;
   overflow: auto;
}

.bulk_send .input_info_format{
   padding: 0px 0px 6px 0px;
}

.bulk_send .text_replace_format_default{
   padding: 170px 0px 6px 0px;
}

.bulk_send .text_info_format{
   padding: 0px 0px 6px 0px;
}
.bulk_send .text_info_format_default{
   text-align: center;
   padding: 0px;
   white-space: nowrap;
   overflow: clip;
}
.bulk_send .w3-row.template,
.bulk_send .w3-row.document {
   width:95%;
   margin:auto;
}
.bulk_send .w3-row.template > .w3-bar,
.bulk_send .w3-row.document > .w3-bar{
   margin-bottom: 0;
   margin-top: 10px;
   border-radius: 10px;
   background-color: #fff;
   box-shadow: 0 0px 6px 2px #dbdbdb;
   height: 46px;
   width: 98%;
   margin-left: auto;
   margin-right: auto;
}
.bulk_send .w3-row.template > .w3-container,
.bulk_send .w3-row.document > .w3-container {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   _background-color: #eee;
   margin-bottom:10px;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
   padding-bottom:20px;
}
.bulk_send .w3-row .help {
   height: 20px;
   width: 20px;
   margin: 0;
   vertical-align: middle;
}
.bulk_send .template{
   overflow-y: auto;
}
.bulk_send .preview,
.bulk_send .preview_document_with_row{
   display: inline;
}
.bulk_send .button.next,
.bulk_send .button.back {
   background-color: white;
   color: #A00 !important;
   border-radius: 20px;
   padding: 3px 9px;
   border: 1px solid #A00;
}
.bulk_send .button.next {
   background-color: #A00;
   color: white !important;
}
.bulk_send .template_signature_info,
.bulk_send .document_signature_info{
   padding: 8px 0px 10px 15px;
   background: white;
   border-radius: 10px;
   margin-top: 5px;
}
.bulk_send #template_require_signature h2,
.bulk_send #document_require_signature h2 {
   background-color: #eaeaea;
   padding: 5px;
   padding-left: 16px;
   border-radius: 30px;
   border:0 !important;
   margin-bottom: 2px;
   font-size: 11pt;
}
.bulk_send #template_require_signature input[name="require_signature"],
.bulk_send #document_require_signature input[name="require_signature"] {
   margin-left:17px;
}
.bulk_send #document_require_signature select.sequence_selector,
.bulk_send #template_require_signature select.sequence_selector{
   padding: 2px;
   border-radius: 3px;
   margin: 2px;
   font-size: 10px;
}
.bulk_send button.document_prepared_sign,
.bulk_send .template_prepared_sign {
   margin:0;
}
.bulk_send button.document_prepared_sign.completed,
.bulk_send .template_prepared_sign.completed {
   background-color: #080;
   color: white;
}
.bulk_send button.document_prepared_sign.completed:hover,
.bulk_send .template_prepared_sign.completed:hover {
   background-color: rgb(28, 158, 28);
}
.bulk_send button.document_prepared_sign.partial,
.bulk_send .template_prepared_sign.partial {
   background-color: #F60;
   color: white;
}
.bulk_send button.document_prepared_sign.partial:hover,
.bulk_send .template_prepared_sign.partial:hover {
   background-color: rgb(207, 103, 43);
}
.bulk_send .document_signing_checkboxes .switch-field label,
.bulk_send .template_signing_checkboxes .switch-field label {
   border: 0;
   margin-top:5px;
   text-transform: uppercase;
   letter-spacing: 1px;
}
.bulk_send #send_document h1.options_section_open_close,
.bulk_send #send_template h1.options_section_open_close{
   border:0;
}
.bulk_send #send_document h1,
.bulk_send #send_document h2,
.bulk_send #send_document h3,
.bulk_send #send_template h1,
.bulk_send #send_template h2,
.bulk_send #send_template h3 {
   border-bottom: 2px solid #dbdbdb;
}

.bulk_send .template_section{
   border-radius: 10px;
   box-shadow: 0px 0px 10px 2px #dfdfdf;
   width: 98%;
   margin: auto;
   margin-top:10px;
}
.bulk_send .options_section_open_close,
.bulk_send .template_section_open_close {
   background-repeat: no-repeat;
   background-position: 5px center;
   padding-left: 35px !important;
   cursor:pointer;
}
.bulk_send .options_section_open_close.closed,
.bulk_send .template_section_open_close.closed {
   background-image: url('images/region_closed.svg');
}
.bulk_send .options_section_open_close.open,
.bulk_send .template_section_open_close.open {
   background-image: url('images/region_open.svg');
}
.bulk_send .add_template_section {
   border-radius: 15px;
}
.bulk_send .remove_template_section {
   float: right;
}

.bulk_send #final_preview_container {
   /* overflow: auto; */
}
.bulk_send .modalframe {
   height: 780px;
   box-shadow: 0 0px 2px 2px #c6c6c6;
}

@media only screen and (max-width: 1200px) {
   .bulk_send,
   .bulk_send input,
   .bulk_send select,
   .bulk_send textarea {
      font-size: 80%;
   }
   .bulk_send h1 {
      font-size:10pt !important;
   }
   .bulk_send h2 {
      font-size:9pt !important;
   }
   .bulk_send #send_template h1.options_section_open_close {
      border-radius: 5px;
      padding: 5px;
   }
}

@media only screen and (max-width: 860px) {
   .bulk_send .text_info_format_default > h2{
      padding: 3px;
   }
}

@media only screen and (max-width: 600px) {
   .bulk_send .text_info_format_default > h2{
      padding: 0px;
   }
}

.bulk_send .doc_to_select,
.bulk_send .doc_to_select_checkbox{
   list-style: none;
   display: inline-block;
}

.bulk_send .select_document #doc_uploadbox_index .doc .num_pages,
.bulk_send .select_document #doc_uploadbox_index .doc .toggle_doc_attr,
.bulk_send .select_document #doc_uploadbox_index .doc .grabber{
   display:none;
}
.bulk_send .select_document #doc_uploadbox_index {
   background:none;
}

.bulk_send #doc_uploadbox_index_container{
   background-image: none;
}

.bulk_send .select_document{
   list-style-type: none;
}

.bulk_send .menu{
   display: inline-block;
   padding: 0px;
}

.bulk_send .step {
   display: inline-block;
   height: 30px;
   width: 30px;
   background-color: #e3e3e3;
   color: #595959;
   font-size: 18px;
   border-radius: 50%;
   line-height: 30px;
   font-weight: bold;
   text-align: center;
}

.bulk_send div.bulk_send_attachments_list {
   list-style-type: none;
   padding: 5px;
}
.bulk_send div.bulk_send_attachments_list > a {
   padding: 10px;
   cursor: pointer;
   height: 30px;
   line-height: 12px;
   display: block;
   text-decoration: none;
}
.bulk_send div.bulk_send_attachments_list > a:hover {
   _opacity: 80%;
   border-radius:5px;
   background-color: #DDD;
}

table.mvc-report.bulk_send td .progress_indicator {
   min-width:2px;
   _height:100%;
   padding:2px;
   text-align:center;
   border-radius:20px;
   background-color:#c1dcff;
   display: inline-flex;
   height: 0px;
   translate: 0 12px;
}
table.mvc-report.bulk_send td .progress_indicator .progress_value {
   translate: 0px -17px;
}
table.mvc-report.bulk_send td #progress.progress_indicator {
   background-color:#d0eca6;
   color:darkgreen;
}

.update_users .edit_users{
   margin-left: 40%;
   max-width: 20%;
}

.update_users .edit_users,
.update_users .edit_user{
   background-color: #AA0000;
}

.update_users .edit_users.disabled,
.update_users .edit_user.disabled{
   background-color: lightgray;
   cursor: default;
}

/*
 * Stationery
 */
form#user_stationery {
   width:95%;
   border: 0;
   background: none;
}
#role_stationery_index,
#billentity_stationery_index,
#stationery_index {
   list-style-type: none;
   margin: 0;
   padding: 0;
}
#role_stationery_index > li{
   background: white;
   border-radius:10px;
   border:0;
   margin:5px;
   padding:10px 15px;
   display:inline-block;
   position:relative;
   box-shadow: 0px 0px 5px 0px #b7b7b7;
}
#billentity_stationery_index > li{
   background: white;
   border-radius:10px;
   border:0;
   margin:5px;
   padding:10px 15px;
   display:inline-block;
   position:relative;
   box-shadow: 0px 0px 5px 0px #b7b7b7;
   width: 80%;
}
#stationery_index > li {
   background: white;
   border-radius:10px;
   border:0;
   margin:5px;
   padding:5px;
   /* min-height:240px; */
   display:inline-block;
   position:relative;
/*   width: 260px;
   height: 260px;*/
   /* box-shadow: 0px 0px 5px 0px #b7b7b7; */
   cursor:pointer;
   font-size: initial;
   text-align: center;
   vertical-align: middle;
   background-color: #ececec;
   min-width: 250px;
}
/*#stationery_index > li:hover {
   background: #CDCDCD;
}*/
#stationery_index li.image {
   display: inline-table;
   height: 100px;
   width: 200px;
   box-shadow: 0px 0px 5px 0px #b7b7b7;
   border-radius: 10px;
   margin: 5px;
   background: white;
   padding: 2px;
}
#billentity_stationery_index .type_container,
#stationery_index .type_container{
   float: left;
   width: 100%;
}
#stationery_index .type_container{
   height: 115px;
}
#stationery_index .stationery_image_container{
   padding: 0px;
   width: inherit;
   _height: 215px;
}
#stationery_index .stationery_image_container > li {
   position: relative;
}
#stationery_index .stationery_image{
   -webkit-user-select: none;
   -webkit-touch-callout: none;
/*    width: inherit; */
   height: inherit;
   border-radius: 10px;
}
#billentity_stationery_index .stationery_type_name,
#stationery_index .stationery_type_name{
   text-align: center;
   font-size: initial;
}
#billentity_stationery_index > li .error,
#stationery_index > li .error {
   max-height: 180px;
}
#stationery_index .remove_item {
   top: 0;
   position: absolute;
   right: 0;
   padding: 7px;
   border-radius: 0px 10px 0px 10px;
   background-color: #bf3f3f;
   color: white;
   line-height: 10px;
   transition: background-color .5s,color .5s,border-color .5s;
}
#stationery_index .remove_item:hover{
   background-color: #e72626;
}

#selected_initials_image_container .edit_item,
#selected_signature_image_container .edit_item,
#stationery_index .edit_item {
   width: 20px;
   height: 20px;
   bottom: 5px;
   position: absolute;
   right: 1px;
   background-repeat: no-repeat;
   background-image: url('images/edit.svg');
   line-height: 10px;
   transition: background-color .5s,color .5s,border-color .5s;
   background-size: contain;
   background-position: center;
   border: 2px solid white;
   border-radius: 20px;
}

#billentity_stationery_index .stationery_type,
#role_stationery_index .stationery_type {
   width:100%;
}

#billentity_stationery_index .billentity_stationery_container{
   overflow-x: auto;
}

#billentity_stationery_index .billentity_stationery_container img{
   max-width: 850px;
}

.phone_upload .options{
   display: grid;
   width: 80%;
   _margin: 5%;
   margin:auto;
}
.phone_upload .button{
   padding: 20px;
   margin: 10px 0;
   background: #a00;
   border: 5px solid #a00;
   border-radius: 35px;
   width: 100%;
}
.phone_upload .take_picture{
   border: 5px solid #a00;
   border-radius: 35px;
}
.phone_upload h4{
   text-transform: uppercase;
   font-size: 10pt;
   text-align: center;
}

.tiny_thumbnail {
   max-height: 35px;
}
.tiny_thumbnail_list {
   float: left;
   margin: 0px 2px 0px 2px !important;
}
.tiny_thumbnail_list:hover {
   transition: background-color .5s,color .5s,border-color .5s;
   background-color:#AAA;
}
.icontext-menu {
   display: none;
   position: absolute;
   z-index: 101;
   padding: 5px 5px;
   _max-width: 200px;
   background-color: #fff;
   border: solid 1px #dfdfdf;
   box-shadow: 1px 1px 2px #cfcfcf;
}
.icontext-menu-active {
   display: block;
}
.icontext-menu_items {
   list-style: none;
   margin: 0;
   padding: 0;
}
.icontext-menu_item {
   display: block;
   margin-bottom: 4px;
}
.icontext-menu_item:last-child {
   margin-bottom: 0;
}
.icontext-menu_link {
   display: block;
   padding: 4px 12px;
   color: #0066aa;
   text-decoration: none;
}
.icontext-menu_link:hover {
   color: #fff;
   background-color: #0066aa;
}

.slidecontainer .rotate_explanation,
.edit_stationery_image .preview_button{
   justify-content: center;
   margin: 0px 0px 0px 11%;
   width: 33%;
   margin-top:5px;
}
.edit_stationery_image .save_button{
   justify-content: center;
   margin: 0px 0px 0px 11%;
   width: 33%;
   margin-top:5px;
   background-color: #A00;
}
.edit_stationery #preview_img_complete #preview_image {
   height: 200px;
   max-width: 150px;
   object-fit: contain;
}
.edit_stationery #preview_img_complete {
   height:100%;
   width: 100%;
}
.edit_stationery_image .img_container{
   position: relative;
}
.edit_stationery_image .img_container .button_icon_edit_image.zoom_in_button{
   position: absolute;
   width: 50px;
   background-image: url('images/zoom_in.svg');
   bottom: 55%;
   right: 5px;
}
.edit_stationery_image .img_container .button_icon_edit_image.zoom_out_button{
   position: absolute;
   background-image: url('images/zoom_out.svg');
   bottom: 35%;
   width: 50px;
   right: 5px;
}
.button_icon_edit_image:hover{
   _background-color: #CCC;
   _border-color: #CCC;
   opacity: 60%;
   background-color:transparent;
}
.button_icon_edit_image{
   height: 50px;
   background-color: transparent;
   border: solid white 0;
   background-size: contain;
   border-radius: 5px;
   width: 22.5%;
   background-repeat: no-repeat;
   background-position: center center;
   margin: 3px 0px 0px 18%;
}
.button_icon_edit_image::after {
   display: block;
   margin-top:45px;
   color:#595959;
   font-size: 7pt;
}
.button_icon_edit_image.rotate_button{
   background-image: url('images/rotate_grey.svg');
}
.button_icon_edit_image.rotate_button::after {
   content: "Rotate";
}
.button_icon_edit_image.reset_button{
   background-image: url('images/reset_image_manipulation.svg');
}
.button_icon_edit_image.reset_button::after {
   content: "Reset";
}
.signature-pad .signature-pad--body .draw_area{
   border: 1px solid #000;
}
#preview_img_complete{
   text-align: center;
}

#preview_img_complete .save_preview,
#preview_img_complete .cancel_preview{
   width: 100px;
}
#preview_img_complete .save_preview {
   background-color: #A00;
}

#billentity_stationery_index .div_buttons_billentity{
   display:flex;
   justify-content:center;
   width: 100%;;
}

#delegate_roles table {
   _border-collapse: collapse;
}
#delegate_roles table > tbody > tr.pending {
   background-color: palegoldenrod;
   border-bottom: 2px solid white;
}
#delegate_roles table > tbody > tr.pending input {
   border-color:#bcb786;
}
#delegate_roles table > tbody > tr.pending td:first-child {
   color:#5a5740;
}
#delegate_roles table > tbody > tr.active {
   background-color: #dff2bf;
   border-bottom: 2px solid white;
}
#delegate_roles table > tbody > tr.active input {
   border-color:#83ac83;
}
#delegate_roles table > tbody > tr.active td:first-child {
   color:#415641;
}
#delegate_roles table > tbody > tr.current {
}
#delegate_roles table > tbody td .update_status {
   padding: 0 !important;
   height: 25px;
   width: 25px;
   margin: 0;
   border: 0;
   background-color: transparent;
   background-position: center center;
   background-size: contain;
}
#login_select_user_role table.tabular-form td:nth-child(2) {
   display:none;
}
#login_select_user_role table.tabular-form > tbody > tr > td:first-child {
   white-space:normal;
   width:auto;
}
#login_select_user_role .role_name > a {
   display:block;
   background-color:#f0f5ff;
   padding:10px;
   text-decoration: none;
   background-image: url('images/login_role.svg');
   background-repeat: no-repeat;
   background-position: right;
   background-size: 20px;
   background-origin: content-box;
}
#login_select_user_role .role_name > a:hover {
   opacity: 80%;
}
#login_select_user_role .delegate_status.pending > a {
   background-color:#edb;
   _color:white;
}
#login_select_user_role .delegate_status.pending {
   _border-bottom: 2px solid darkorange;
}
#login_select_user_role .delegate_status.active > a {
   background-color:#cdc;
   _color:white;
}
#login_select_user_role .delegate_status.active {
   _border-bottom: 2px solid green;
}
#login_select_user_role .delegate_status_text {
   display: inline-block;
   text-transform: initial;
   font-size: 8pt;
   padding: 5px;
   padding-right: 5px;
   padding-left: 5px;
   padding-right: 5px;
   padding-left: 5px;
   background-color: #FF9595;
   padding-left: 10px;
   padding-right: 10px;
   border: solid 1px white;
   border-radius: 15px;
   color: white;
   left: 10px;
   top: -10px;
   position: relative;
   box-shadow: 0px 1px 4px 0px #aaa;
}
#login_select_user_role .delegate_status_text.pending {
   background-color: darkorange;
}
#login_select_user_role .delegate_status_text.active {
   background-color: green;
}
body > header > section.bottom > .right .delegate_status {
   text-decoration:none;
}
body > header > section.bottom > .right .delegate_status.pending {
   color:orange;
}
body > header > section.bottom > .right .delegate_status.active {
   color:chartreuse;
}
span.delete_delegation {
   background-image: url('images/delete_role_delegation.svg');
   background-repeat: no-repeat;
   background-position: center center;
   height:20px;
   width:30px;
   display:block;
   cursor:pointer;
}
#login_select_user_role .tabular-form {
   width: 100%;
}
#login_select_user_role .tabular-form  td:last-child {
   width: 10px;
}
#login_select_user_role .delegate_status.default_role > a {
   /* background-color:#2989DD;;
   color:white; */
}
#login_select_user_role .default_role {
   _border-bottom: 2px solid #00539B;
}
#login_select_user_role .section.billentity .chat_notification,
#login_select_user_role .section.billentity .notification {
   float: right;
   background: #A00;
   color: white;
   border-radius: 10px;
   width: 20px;
   height: 20px;
   line-height: 25px;
   text-align: center;
   margin-right: 5px;
   border: 2px solid white;
   margin-top: 2px;
}
#login_select_user_role .section.billentity .chat_notification {
   background: #f9d745;
}
#login_select_user_role .user_role .chat_notification,
#login_select_user_role .user_role .notification {
   padding: 0px 2px;
   border-radius: 12px;
   display: inline-block;
   min-width: 24px;
   text-align: center;
   margin-right: 5px;
   border: 2px solid white;
}
#login_select_user_role .user_role .notification{
   background: #A00;
   color: white;
}
#login_select_user_role .user_role .chat_notification{
   background: #f9d745;
   color: #A00;
}
#login_select_user_role .region_open_close {
   padding: 5px;
}
#login_select_user_role .roles_section .user_role {
   margin: 5px;
}
#login_select_user_role .section.region_open_close:hover {
   box-shadow: 0 0px 0px 0 rgba(0,0,0,0.2),0 0px 5px 0 rgba(0,0,0,0.19);
}
div.default_role_text {
   display: inline-block;
   text-transform:initial;
   font-size:8pt;
   padding:5px;
   background-color: #FF9595;
   padding-left: 10px;
   padding-right: 10px;
   border-radius: 15px;
   color: #510707;
   left: 10px;
   top: -10px;
   position: relative;
   box-shadow: 0px 1px 4px 0px #aaa;
}
/*
 * User
 */
#user_profile {
   width: 600px;
}
#user_profile table {
   margin: auto;
}
#user_profile table tr td:first-child{
   text-align: right;
}
#user_profile .button_container > button.red {
   background-color: #A00;
   border-color: #A00;
}
.session_terminated .button_container{
   text-align: center;
   margin: 20px 0px;
 }
.session_terminated .button_container .button{
   border-color: #A00;
   background-color: #A00;
   border-radius: 20px;
 }
/* Nested lists */
/* Note this remove the functionality of start and reversed */
.nested_lists {
   counter-reset: section;
}
.nested_lists .section::before {
   counter-increment: section;
   content: counter(section)". ";
 }
.nested_lists ol {
   counter-reset: item;
}
.nested_lists ol li {
   display: block;
   position: relative;
}
.nested_lists ol li:before {
   content: counters(section, ".")"."counters(item, ".")".";
   counter-increment: item;
   position: absolute;
   margin-right: 100%;
   right: 10px; /* space between number and text */
}

/*
 * billevent stuff
 */
#entity_search_results.billevent_transaction,
#entity_search_results.bundle_purchased {
   width: 80%;
   margin: auto;
   border: 0px solid #e0e0e0;
   padding: 20px;
   padding-top: 0;
   box-shadow: 0 5px 5px 0 #e0e0e0;
   background: white;
}
.bundle_products_purchased.balance {
    margin-bottom: 35px;
}
.bundle_products_purchased > h1 {
   color: #555;
   margin:5px;
}
.bundle_products_purchased .billevent,
.bundle_products_purchased ._details,
.bundle_products_purchased .bundle {
   border: 1px solid white;
   border-radius: 5px;
   padding: 7px;
   padding-bottom: 7px;
   margin-bottom: 5px;
   padding-bottom: 0;
   position: relative;
}
.bundle_products_purchased.available,
.bundle_products_purchased.balance {
   background-color: #e6e6e6;
   padding: 5px;
   padding-bottom: 1px;
   border-radius: 7px;
   font-size: 8pt;
}
.bundle_products_purchased .details:last-child {
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
}
.bundle_products_purchased .bundle {
   padding:0;
   background-color: white;
   margin-top: 15px;
}
.bundle_products_purchased .bundle .active_subscription {
   font-size: 9pt;
   background-color: #f2f2f2;
   padding: 5px;
}
.bundle_products_purchased.available .bundle > h1 {
   _margin-bottom: 10px;
   background-color: #c4c4c4;
   padding: 5px;
   font-size: 10pt;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   margin:0;
}
.bundle_products_purchased .status {
   border-radius: 10px;
   color: white;
   padding-left:10px;
   padding-right:10px;
   height:20px;
   position: absolute;
   top: 8px;
   right: 8px;
   font-size: 10pt;
}
.bundle_products_purchased .details {
   border-top: 1px solid white;
   padding: 5px;
}
.bundle_products_purchased .ok {
   _border-color: #91d591;
   background-color: #DFF2BF;
   color: green;
   position: relative;
}
.bundle_products_purchased .ok .status {
   background-color: green;
}
.bundle_products_purchased .warn_low,
.bundle_products_purchased .warn_expired {
   _border-color: #fc0;
   background-color: #fff2bc;
   color: #9F6000;
   position: relative;
}
.bundle_products_purchased .warn_low .status,
.bundle_products_purchased .warn_expired .status {
   background-color: #fc0;
}
.bundle_products_purchased .zero {
   _border-color: #F7B5B5;
   background-color: #FBEAEA;
   color: #D92E2E;
   position: relative;
   opacity: 60%;
}
.bundle_products_purchased .zero .status {
   background-color: #A00;
}
.confirmation_container {
   margin-top: 20px;
}
.confirmation_container .back_btn_container{
   margin:auto;
   width: 150px;
   margin-top: 20px;
   margin-bottom: 20px;
}
.confirmation_container .back_btn_container .button{
   width: 100%;
   margin:0;
}
.button.update_card,
.button.cancel_bundle {
   /* border-radius: 20px; */
}
.button.update_card:hover,
.button.cancel_bundle:hover{
   background: #A00;
   color: white !important;
}
.button.payfast_continue,
button.process_payment {
   padding: 10px;
   border-radius: 20px;
   background-color: #A00;
   min-width: 160px;
}
.button.payfast_continue:hover,
button.process_payment:hover {
   background-color: #B62E2E;
   /* opacity:80%; */
}
.payfast_feedback_container {
  width: 320px;
  margin: 40px auto;
  text-align: center;
}

.payfast_feedback_container_header {
  padding: 1em;
  display: block;
  color: #fff;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  border: solid 1px;
}
.payfast_feedback_container_header.success_header {
   color: #4F8A10;
   background-color: #dff2bf;
}
.payfast_feedback_container_header.warning_header {
   color: #9F6000;
   background-color: #FEEFB3;
}
.payfast_feedback_container_header.error_header {
   color: #D8000C;
   background-color: seashell;
}
.payfast_feedback_image {
   width: 50px;
   height: 50px;
   background-size: contain;
   margin: auto;
   margin-bottom: 15px;
}
.payfast_feedback_image.success_image {
   background-image:url('images/feedback_success.svg');
}
.payfast_feedback_image.warning_image {
   background-image: url('images/feedback_warning.svg');
}
.payfast_feedback_image.error_image {
   background-image: url('images/feedback_error.svg');
}
.payfast_feedback_message {
   padding: 1em;
   background: #fff;
   display: block;
   border-bottom-right-radius: 8px;
   border-bottom-left-radius: 8px;
   margin-bottom: 20px;
   border: solid 1px;
   border-top: none;
}
.payfast_form_container {
   padding: 20px;
   max-width: 400px;
   margin: auto;
   border-radius: 10px;
   background-color: #E8E8E8;
   text-align: center;
}
.payfast_form_container .description_container {
   max-width: 500px;
   margin: auto;
}
.payfast_form_container .description_container .bundle_descr {
   border-bottom: solid 1px;
   margin-bottom: 10px;
}
.payfast_form_container .total {
   font-size: 15pt;
   text-align: center;
}
.payfast_form_container .recurring_suffix {
   line-height: 9pt;
   font-size: 9pt;
}
.payfast_form_description {
   margin-top: 20px;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}
.payfast_form_description > span {
   width: 100%;
   text-align: center;
   font-size: 7pt;
}
.payfast_logo {
   margin-top: 5px;
   height: 30px;
   width: 70px;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   background-image: url('images/payfast_by_network_logo.png');
   _border-radius: 10px;
}
.payfast_logo.white {
   background-image: url('images/payfast_logo_white.svg');
   background-color: #042d2d !important;
}
.payfast_logo.light {
   background-image: url('images/payfast_logo_light.svg');
   background-color: #042d2d !important;
}
.payfast_logo.dark {
   background-image: url('images/payfast_logo.png');
   background-color: #dfe966 !important;
}

.purchase_check_status {
   border: 0;
   margin: 0;
   margin-bottom: 2px;
   padding: 7px 12px 7px 30px !important;
   background-repeat: no-repeat;
   background-position: 5px center;
   border-radius: 30px;
   background-size: 20px;
   width: 100%;
   font-size: 8pt;
}
.purchase_check_status.success {
   background-image: url('images/navbar_bundle_products_purchased_balance_ok.svg');
   background-color: #DFF2BF !important;
   color: green !important;
}
.purchase_check_status.warning {
   background-image: url('images/navbar_bundle_products_purchased_balance_warn2.svg');
   background-color: #FFE683 !important;
   color: #FF3C00 !important;
}

button.refund_button {
   border-radius: 25px;
   padding: 5px 5px;
}
.refund.icon {
   background-repeat: no-repeat;
   background-position: left;
   background-size: 30px;
   display: inline-block;
   width: 80px;
   height: 30px;
   vertical-align: middle;
   margin-right: 5px;
   background-image: url('images/refund.svg');
   padding-left: 35px;
   line-height: 22pt;
   text-decoration: none;
   color: #324F7B;
}
.refund.icon:hover {
   color: #595959;
}

.payfast_response_success,
.payfast_response_info,
.payfast_response_warning {
   font-size: 8pt;
   padding: 5px 10px;
   color: #4F8A10;
   background-color: #DFF2BF;
   border-radius: 20px;
   border: none;
   display: inline-block;
}
.payfast_response_info {
   color: #336fbd;
   background-color: #e5f2ff;
}
.payfast_response_warning {
   color: #9F6000;
   background-color: #FEEFB3;
}

.payfast_refund_info .pf_data,
.payfast_refund_info .itn_data {
   border: solid 1px #CCC;
   border-top: none;
   padding-top: 20px;
   top: -5px;
   position: relative;
   border-radius: 0px 0px 15px 15px;
}

/*
 * MFA stuff
 */
#validate_mfa_input {
   margin: 10px;
}
.setup_mfa .button_container {
   text-align: center;
   margin: 20px 0px;
}
.setup_mfa .button_container > a.button,
.setup_mfa .button_container > button{
   border-color: #A00;
   background-color: #A00;
   padding: 10px 25px;
}
.setup_mfa .button_container > a.button.secondary,
.setup_mfa .button_container > button.secondary {
   background-color: #e9e9e9;
   border-color: #002B5C;
   color: #002B5C !important;
}
.setup_mfa .button_container > a.button.secondary:hover,
.setup_mfa .button_container > button.secondary:hover {
   background-color: #002B5C;
   color: white !important;
}
.setup_mfa .secret_mfa{
   inline-size: 100%;
   overflow-wrap: break-word;
}
.explanation_of_mfa .img_setup_mfa{
   width: 100%;
   height: 100px;
   margin-top: 10px;
}
.explanation_of_mfa .mfa_info{
   padding: 1px 25px;
}
.qrcode{
   display: flex;
   justify-content: center;
   padding-bottom: 10px;
}

.otc {
	position: relative;
	width: 100%;
	margin: 0 auto;
}
.otc fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}
.otc fieldset div {
	display: flex;
	align-items: center;
   justify-content: center;
   margin-top: 10px;
}
.otc legend {
	margin: 0 auto 1em;
}
.otc input[type="number"] {
	width: .82em;
	line-height: 1;
	margin: .1em;
	padding: 0px 0 2px;
	font-size: 2.65em;
	text-align: center;
	appearance: textfield;
	-webkit-appearance: textfield;
	border: 2px solid #002B5C;
	color: #002B5C;
	border-radius: 4px;
}
.otc input::-webkit-outer-spin-button,
.otc input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* 2 group of 3 items */
.otc input[type="number"]:nth-child(n+4) {
	order: 2;
}
.otc div::before {
	content: '';
	height: 2px;
	width: 24px;
	margin: 0 .25em;
	order: 1;
	background: #BBBBFF;
}

/* From: https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034 */
.otc label {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;
}

.data_input .button_align_center{
   text-align: center;
}

.confirm_dialog button,
.confirm_input_dialog button,
.get_input_dialog button{
   border-color: #A00;
   background-color: #A00;
   padding: 10px 25px;
}
.get_input_dialog button.secondary,
.confirm_input_dialog button.secondary,
.confirm_dialog button.secondary{
   background-color: white;
   border-color: #002B5C;
   color: #002B5C !important;
}
.get_input_dialog button.secondary:hover,
.confirm_input_dialog button.secondary:hover,
.confirm_dialog button.secondary:hover {
   background-color: #002B5C;
   color: white !important;
}
.get_input_dialog .dialog_input,
.confirm_input_dialog #confirm_info_response{
   padding: 10px;
   margin: 10px 5px;
   width:90%;
   width: -webkit-fill-available; 
   width: -moz-available;
   width: fill-available;
}

.signature-pad {
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: block;
   width: 100%;
   height: 100%;
   max-width: 700px;
   max-height: 460px;
   border: 1px solid #e8e8e8;
   background-color: #fff;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
   border-radius: 4px;
   padding: 16px;
}

.signature-pad::before,
.signature-pad::after {
   position: absolute;
   z-index: -1;
   content: "";
   width: 40%;
   height: 10px;
   bottom: 10px;
   background: transparent;
   box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}

.signature-pad::before {
   left: 20px;
   -webkit-transform: skew(-3deg) rotate(-3deg);
   transform: skew(-3deg) rotate(-3deg);
}

.signature-pad::after {
   right: 20px;
   -webkit-transform: skew(3deg) rotate(3deg);
   transform: skew(3deg) rotate(3deg);
}

.signature-pad--body {
   position: relative;
   height:200px;
   border: 1px solid #f4f4f4;
}

.signature-pad--body
canvas {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   border-radius: 4px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
}

.signature-pad--footer {
   color: #C3C3C3;
   text-align: center;
   font-size: 1.2em;
   margin-top: 8px;
}

.signature-pad--actions {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: justify;
      -ms-flex-pack: justify;
         justify-content: space-between;
   margin-top: 8px;
}
.signature-pad--actions button.save {
   background-color: #A00;
}

#draw_execute #signature-pad-testing{
   width: 700px;
}

/************************************
 * BREAKPOINT
 ************************************/
@media only screen and (max-width: 860px) {
   body.login {
      background:white;
   }
   h1,h2,h3,h4, h5, h6 {
      _font-size: initial;
   }
   .login_container {
      padding-left: 10px;
      padding-right: 10px;
      font-size: 10pt;
   }
   .login_container .instructions {
      min-width:auto;
   }
   .otp_instructions {
      font-size: 10pt;
      padding: 10px;
   }
   #login_form {
      max-width: 350px;
      margin: auto;
   }
   .doc_preview_link {
      /* width: 70%; */
   }
   .w3-modal-content .doc_preview_link {
      width:auto;
   }
   .thumbnail {
      min-width: 90px;
      max-height: 130px;
   }
   .doc_verify_signature .thumbnail {
      max-width: 300px;
      max-height: none;
   }
   div.doc_preview_sidebar,
   #doc_preview_container {
      float: none;
      width: auto;
   }
   #password_reset_form_container,
   #user_activate_form,
   #register_form_container,
   #register_request_form_container,
   #self_register_form_container,
   #self_register_confirm_form_container,
   #report_abuse_doc_msg_form_container {
      width: auto;
   }
   #directory_invite,
   #directory_current_invites {
      width: 100%;
      margin:0;
      background:transparent;
      box-shadow:none;
      padding: 5px;
      box-sizing: border-box;
      height: auto;
   }
   #directory_invite table.tabular-form {
      width: 100%;
   }
   #directory_invite tr.user_message {
      position: relative;
      margin: 0;
      display: block;
   }
   table.directory_accept_invite td:first-child {
      width:auto;
   }
   #user_profile {
      width: 100%;
   }
   #user_profile table tr td:first-child{
      text-align: left;
   }
   table.directory_accept_invite {
      width:auto;
   }
   .login_container footer {
      background-color:transparent;
   }
   #entity_search_results table.mvc-report > tbody > tr > td {
      white-space: normal !important;
    }
   #entity_search_results.billevent_transaction,
   #entity_search_results.bundle_purchased {
      width:auto;
      padding: 0;
   }
   header.nosession .banner,
   header.nosession.nonavigation .banner {
      height:30px;
      margin:0;
      background-position: 10px center;
   }
   #stationery_index li.image {
      height: 60px;
      width: 120px;
   }
   #stationery_index .type_container{
      height: 73px;
   }
   button, .button, a.button, span.button {
      font-size: 8pt;
      padding: .2rem 1rem;
   }
   .action_dialog button.calltoaction, .action_dialog .button.calltoaction {
      min-width: auto;
   }
   .bulk_send .w3-row.template > .w3-bar,
   .bulk_send .w3-row.document > .w3-bar{
      height:auto;
   }
   .bulk_send .w3-bar .w3-bar-item {
      float: none;
      text-align:left;
   }
   .bulk_send .w3-bar .w3-bar-item:last-child{
      width: 100%;
   }   
}
@media only screen and (max-width: 730px) {
   #draw_execute #signature-pad-testing{
      width: 600px;
   }
}
@media only screen and (max-width: 600px) {
   .login_container {
      width: auto;
   }
   .payfast_form_container {
      margin: 25px;
   }
}
@media only screen and (max-width: 525px) {
   body > header > section.bottom > .right .login_user .user_name{
      display: none;
   }
   .button_icon_edit_image{
      width: 20%;
   }
   .edit_stationery_image .img_container .button_icon_edit_image.zoom_in_button{
      left: 5px;
      bottom: 5px;
   }
   .edit_stationery_image .img_container .button_icon_edit_image.zoom_out_button{
      right: 5px;
      bottom: 5px;
   }
}