body {font-family: 'Roboto', sans-serif; font-weight: 300;}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-family: 'Roboto', sans-serif;}
h1, h2, h3, .h1, .h2, .h3 {font-weight: 900;}
.subhead {font-size: 0.75em; font-weight: 400; margin-top: 0.2em; margin-bottom: 1em;}
.logo span {font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 1.5em; position: relative;}
.logo span div.thin {font-family: 'Roboto Condensed', sans-serif; font-weight: 100; display: inline; font-style: italic;}
.logo-holder {display: inline-block; position: relative;}
.logo span div.beta {font-family: 'Roboto', sans-serif; font-weight: 100; font-size: 10px; position: absolute; right: 22px; bottom: -14px; opacity: 0.5;}
.main-header .navbar{height:50px;}
.church-name{line-height:50px;}
.logo, .x-brand.text {position: relative;}
#dev-stamp {position: absolute;}
.logo #dev-stamp {top: -4px; left: -6px;}
.x-brand.text #dev-stamp {top: -5px; left: 20px;}
/*.logo #dev-stamp {position: relative; display: block; margin: -54px 0 0 -20px;}*/
.monospace, .notifyjs-wrapper .notifyjs-container .notifyjs-bootstrap-base.notifyjs-bootstrap-monospace {font-family: 'Roboto Mono', monospace;}
.notifyjs-wrapper .notifyjs-container .notifyjs-bootstrap-base.notifyjs-bootstrap-monospace:first-line {font-family: 'Roboto', sans-serif;}
.padless {padding: 0;}
.remove-parent-padding-15 {margin: -14px;}
.remove-parent-padding-15 .dataTables_wrapper {padding: 15px;}
.sidebar-menu li.treeview a i.direct-link {opacity: 0.4; font-size: 0.9em; padding: 0.3em 1.0em 0.3em 0.5em;}
.sidebar-menu li.treeview a i.direct-link:hover {opacity: 0.8;}
.inline-block {display: inline-block;}

.at-panel .panel {margin-bottom: 5px;}

section.attendance-topbar {padding: 10px 0; background-color: #D2E1E9;}
section.attendance-topbar h3 {margin: 0 0 3px; font-size: 20px;}
section.attendance-topbar strong {font-weight: 500;}
section.attendance-topbar a {color: #72AFD2;}
section.attendance-topbar a.btn, section.attendance-topbar a.btn:hover, section.attendance-topbar a.btn:focus, section.attendance-topbar a.btn:active {color: white;}
section.attendance-topbar a:hover, section.attendance-topbar a:active, section.attendance-topbar a:focus {color: #3c8dbc;}
section.attendance-topbar a i {opacity: .2;}
section.attendance-topbar:hover a i {opacity: 1;}
section.attendance-topbar a:hover i, section.attendance-topbar a:active i, section.attendance-topbar a:focus i {opacity: 1;}
section.attendance-topbar .reports {text-align: right;}
section.attendance-topbar .reports a i {opacity: 0.7; margin-right: 0;}
section.attendance-topbar .reports a.btn.btn-default, section.attendance-topbar .reports a.btn.btn-default:hover, section.attendance-topbar .reports a.btn.btn-default:focus, section.attendance-topbar .reports a.btn.btn-default:active {border: #8FB8CD solid 1px; color: #367fa9; background-color: #AFCEDF;}
section.attendance-topbar .reports a.btn.btn-default:hover, section.attendance-topbar .reports a.btn.btn-default:focus, section.attendance-topbar .reports a.btn.btn-default:active {border-color: #6FA1B9; background-color: #8fb8cd; color: #2C607E;}
a.click-to-copy {opacity: 0.4; margin-left: 0.2em;}
a.click-to-copy:hover {opacity: 1;}
.checkin-url-holder {margin-top: 9px; font-size: 0.85em; white-space: nowrap;}
section.attendance-topbar .checkin-url-holder a {color: #3c8dbc;}
section.attendance-topbar .checkin-url-holder a.click-to-copy {opacity: 0.6;}
section.attendance-topbar .checkin-url-holder a.click-to-copy:hover {opacity: 1;}

.tooltip {font-family: inherit; font-weight: 300;}
.tooltip.top .tooltip-arrow {bottom: 1px;}
.tooltip .tooltip-inner {
    background-color: #3c8dbc;
}
.tooltip.top .tooltip-arrow {
    border-top-color: #3c8dbc;
}
.tooltip.bottom .tooltip-arrow {
    border-bottom-color: #3c8dbc;
}
.tooltip.left .tooltip-arrow {
    border-left-color: #3c8dbc;
}
.tooltip.right .tooltip-arrow {
    border-right-color: #3c8dbc;
}
.tooltip.right .tooltip-inner {
    text-align: left;
}

.dataTable tbody {font-family: 'Roboto Condensed', sans-serif;}
table.dataTable thead tr th {font-weight: 500;}
section.sidebar li {font-weight: 400;}
section.sidebar .sidebar-menu .treeview-menu > li {margin-left: 1.5em;}
section.sidebar .sidebar-menu .treeview-menu li i.fa {display: none;}
section.sidebar li ul li {font-weight: 300;}
section.sidebar li i.fa {opacity: 0.7;}

section.content h3.page-title + p {float: right; margin-top: -3em;}

.panel-heading ul.list-inline {margin-bottom: 0;}
input, textarea, select {border: #cccccc solid 1px; font-weight: 300;}
input[type=file].form-control {border: none; height: auto;}
input:focus, textarea:focus {border-color: #3C8DBC;}
label {font-weight: 500;}
input.disabled, select.disabled, textarea.disabled {pointer-events: none; cursor: not-allowed; background-color: #eee; color: #999; opacity: 0.8;}

.new-button {float: right;}
.dt-buttons a.dt-button:hover {background-image: none;}

div.dt-buttons {margin-left: 1em;}
div.dt-buttons a.dt-button {padding: 3px 8px; margin-top: -2px; background-image: none; background-color: #f2f2f2;}
div.dt-buttons a.dt-button:hover, div.dt-buttons a.dt-button:active, div.dt-buttons a.dt-button:focus {background-color: #ffffff; background-image: none;}
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {background-position-y: bottom 10px !important;}
table.dataTable thead th {line-height: 1.1em;}
table.dataTable .label {font-weight: 500;}

.label {margin-right:5px;margin-bottom:5px !important;display:inline-block;}
#wrapper {position: relative;}

.panel.faux-shell {height: inherit; position: relative;}
.panel.faux-shell .panel-body {height: calc(100vh - 185px); margin-bottom: 0;}
.panel.faux-shell .panel-body:before {display: none;}
.panel.faux-shell #spinner {position: absolute; right: 5px; bottom: 0;}
.right-header-buttons {float: right; margin-top: 1em;}

sup.tm {vertical-align: sub; font-family: 'Roboto', sans-serif; font-weight: 100; opacity: 0.5}
.logo sup.tm {font-size: 0.7em;}

.skin-blue .panel-primary .panel-heading {background-color: rgba(60, 141, 188,0.9);}
.skin-blue .panel-primary {border-color: rgba(60, 141, 188,0.9);}

/* Interest profile */
#top-profile-box {position: relative; min-height: 300px; padding: 0 0 15px; background-color: transparent; background-image: linear-gradient(white,white); background-position-y: 60px; background-repeat: repeat-x;}
#avatar { position: relative; width: 100%; max-width: 250px; min-width: 180px; height: auto; margin: 0 auto; border-radius: 100%; overflow: hidden;}
#avatar img {width: 100%; height: auto;}
#avatar #change-overlay {display: none; position: absolute; height: 30%; width: 100%; bottom: 0; background-color: rgba(0,0,0,0.7); text-align: center;  color: #bbb; font-size: 14px;}
#avatar #change-overlay i.fa {margin-top: 10px; display: block; margin-bottom: 0;}
#avatar #change-overlay div {font-weight: 500;}
#avatar a:hover #change-overlay {display: block;}
#top-profile-box .page-title-holder {margin-left: 15px; margin-bottom: 1em;}
#top-profile-box .page-title-holder .page-title {display: inline-block; margin: 0 0 15px 0;}
.profile-data {margin: 25px auto;}
.address-data {margin-bottom: 1em;}
.address-data-line {margin-bottom: .5em; white-space: nowrap;}
.address-data-line div.data, .address-data-line .icon-holder {display: inline-block;}
.address-data-line a {color: #333333;}
.address-data-line a:hover, .address-data-line a:active {color: rgb(114,175,210);}
#top-profile-box .icon-holder i {opacity: 0.3; margin-right: 0.4em; width: 15px; text-align: right;}
.icon-holder {display: table-cell; vertical-align: top;}
.address-data .custom-fields {padding-left: 1.72em; margin-top: 2em;}
.edit-holder {display: inline-block; margin-left: 1em;}
.edit-holder a.btn.btn-default {color: #aaaaaa; margin-top: -9px;}
.edit-holder a.btn.btn-default:hover, .edit-holder a.btn.btn-default:active, .edit-holder a.btn.btn-default:focus {color: #555;}
.details-block {display: inline-block;}
.label.interest-tags {font-weight: 300; font-size: 1em; font-family: 'Roboto Condensed', sans-serif; background-color: #E6EBF1; padding: 4px 6px;}
.dataTable .label.interest-tags {background-color: #ebebeb; font-size: inherit; font-weight: 300; color: inherit;}
.profile-box label {display: block; margin-bottom: 0;}
.profile-box label + div {margin-bottom: 0.8em;}
.new-holder {float: right;}
.new-holder a.btn {opacity:0.5;}
.new-holder a.btn:hover {opacity: 0.8;}
.modal-body label {margin-top: 1em;}

/* thin profile box */
#top-profile-box.thin {min-height: 10px; background: none; padding-bottom: 0;}
#top-profile-box.thin #avatar {max-width: 80px; min-width: 50px; float:left;}
#top-profile-box.thin .profile-data {margin-top: 5px; margin-bottom: 5px; display: inline-block; min-height: 50px;}
#top-profile-box.thin .page-title-holder {margin-bottom: 0; display: inline-block; min-height: 80px; padding-top: 10px;}
#top-profile-box.thin .page-title-holder .page-title {margin-bottom: 0;}
#top-profile-box.thin .page-title-holder .phone.address-data-line {margin-left: 10px;}

/* text bubble page */
#text-bubble-wrapper.panel {height: inherit; position: relative;}
#text-bubble-wrapper.panel .panel-body {min-height: 300px; height: calc(100vh - 240px); margin-bottom: 0;}
#new-message-form-holder {margin-top: -53px; margin-bottom: -20px;}


#decisions {margin-top: 1.8em;}
#decisions a.btn i {color: #bbbbbb;}
#decisions .lwTable {margin-top: 6px;}
#decisions .lwTable tr td {padding: 0px 6px;}
#decisions .lwTable tr td:first-child {padding-left: 0;}
#decisions .lwTable tr td:last-child {padding-right: 0;}
#decisions .lwTable tr {border: 0;}
/* #decisions .lwTable tr:first-child {border-top: 1px #CCE2EF solid;} */

table.notes .edit-link {opacity: 0.2;}
table.notes th {color: #999999;}
table.notes tbody tr:hover .edit-link {opacity: 0.5;}
table.notes tbody tr .edit-link:hover, table.notes tbody tr .edit-link:active, table.notes tbody tr .edit-link:focus {opacity: 1;}
table.activities .edit-link {opacity: 0.2;}
table.activities th {color: #999999;}
table.activities tbody tr:hover .edit-link {opacity: 0.5;}
table.activities tbody tr .edit-link:hover, table.activities tbody tr .edit-link:active, table.activities tbody tr .edit-link:focus {opacity: 1;}
.lwTable .btn {opacity: 0.5;}
.lwTable .btn:hover, .lwTable .btn:active, .lwTable .btn:focus {opacity: 1;}

/* Larry's tables */
.lwTable td {vertical-align: top; font-family: "Roboto Condensed", sans-serif;}
.lwTable tr td, .lwTable tr th {padding: 4px 8px;}
.lwTable tr td:last-of-type {padding-right: 0;}
.lwTable tr th:last-of-type {padding-right: 0;}
.lwTable tbody tr {background-color: white; border-bottom: 6px #ECF0F5 solid;}
.lwTable tr td.force-wrap {overflow-wrap: break-word; word-wrap: break-word; word-break: break-word;}

table.phoneList tr {border: #d2d6de solid 1px; border-right: none; border-left: none;}
table.phoneList th, table.phoneList td {padding: 6px 0;}
table.phoneList thead tr {border-top-width: 2px; border-bottom-width: 2px;}

/* Style button correctly when in dropdown */
.dropdown-menu {padding: 0;}
.dropdown-menu > li > form > .btn-link {text-decoration: none; display: block; padding: 3px 20px; clear: both; font-weight: 400; line-height: 1.42857143; white-space: nowrap; color: #777; width: 100%; text-align: left;}
.dropdown-menu > li > form {width: 100%; text-align: left;}
.dropdown-menu > li > form > .btn-link:hover {background-color: #e1e3e9; color: #333;}
.nowrap {white-space: nowrap;}
.smallText, .small-text {font-size: 0.7em;}
.gray {opacity: 0.7; font-weight: 100;}
.align-center {text-align: center;}

#btn-import{
    position: relative;
    left: 8px;
    /*bottom: 30px;*/
}
#btn-import2{
    position: absolute;
    right: 30px;
    /*bottom: 30px*/
}

.btn i {opacity: 0.7; margin-right: 0.5em;}
.btn.icon-only {padding: 3px 6px;}
.btn i.icon-only {opacity: 1; margin-right: inherit;}
.btn i.icon-only.soft {opacity: 0.7;}
.btn i.icon-only.larger {font-size: 1.4em;}
.btn:hover i.icon-only.soft {opacity: 1;}
.icon-only-button {opacity: 0.3;}
.icon-only-button:hover {opacity: 1;}

.content-wrapper .content {padding-bottom: 40px;}
.footer {height: 20px; position: absolute; bottom: 10px; right: 0px; font-family: 'Roboto Condensed', sans-serif; font-weight: 300; color: #aaaaaa; font-size: 0.8em; text-align: center; width: 100%; padding: 0 20px; line-height: 1em;}
.content-wrapper {position: relative;}

.sort-order-row {margin-bottom: 10px;}
.sort-order-row:last-child {margin-bottom: 0;}

/* 3 dots bounce loading effect - https://codepen.io/danielmorosan/pen/XmYBVx */
.bouncing.ball.spinner {margin: 0 auto; width: 70px; text-align: center;}
.bouncing.ball.spinner > div {width: 10px; height: 10px; background-color: #6F9EB5; border-radius: 100%; display: inline-block;-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both;}
.bouncing.ball.spinner .bounce1 {-webkit-animation-delay: -0.32s; animation-delay: -0.32s;}
.bouncing.ball.spinner .bounce2 {-webkit-animation-delay: -0.16s; animation-delay: -0.16s;}
@-webkit-keyframes sk-bouncedelay {0%, 80%, 100% { -webkit-transform: scale(0) }  40% { -webkit-transform: scale(1.0) }}
@keyframes sk-bouncedelay {0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1.0); transform: scale(1.0); }}

#avatar-loading.spinner {opacity: 0.4; margin-top: -30px;}
#avatar-loading.spinner > div {background-color: #6F9EB5;}
#top-profile-box.thin #avatar-loading.spinner {margin-top: -20px;}
#top-profile-box.thin #avatar-loading.spinner > div {width: 7px; height: 7px;}

div.dataTables_wrapper {min-height: 180px;}
div.dataTables_wrapper div.dataTables_processing {top: 120px; height: 100%; background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)); }
div.dataTables_wrapper div.dataTables_processing .bouncing.ball.spinner {width: 150px; }
div.dataTables_wrapper div.dataTables_processing .bouncing.ball.spinner > div {margin: 5px; background-color: #aaa;}

.navbar-custom-menu .navbar-right {margin-right: 0;}
.main-header .navbar .navbar-custom-menu .navbar-nav > li > .dropdown-menu {background-color: #444444; border: none; border-radius: 0; right: 0; width: 100%;}
.main-header .navbar .navbar-custom-menu .navbar-nav > li > .dropdown-menu li.divider {background-color: #333333;}
.main-header .navbar .navbar-custom-menu .navbar-nav > li > .dropdown-menu li a {color: white; font-weight: 300;}
.main-header .navbar .navbar-custom-menu .navbar-nav > li > .dropdown-menu li a:hover {background-color: #333333;}
.main-header .navbar .navbar-custom-menu .navbar-nav > li > .dropdown-menu li:last-child a {padding-bottom: .4em;}

.skin-blue .main-header .navbar .navbar-custom-menu .navbar-nav > li > .dropdown-menu,
.skin-blue .btn-primary {background-color: #3C8DBC;}
.skin-blue .main-header .navbar .navbar-custom-menu .navbar-nav > li > .dropdown-menu li.divider,
.skin-blue .main-header .navbar .navbar-custom-menu .navbar-nav > li > .dropdown-menu li a:hover,
.skin-blue .btn-primary:hover, .skin-blue .btn-primary:focus, .skin-blue .btn-primary:active {background-color: #367FA9;}

.skin-purple .main-header .navbar .navbar-custom-menu .navbar-nav > li > .dropdown-menu,
.skin-purple .btn-primary {background-color: #605CA8;}
.skin-purple .main-header .navbar .navbar-custom-menu .navbar-nav > li > .dropdown-menu li.divider,
.skin-purple .main-header .navbar .navbar-custom-menu .navbar-nav > li > .dropdown-menu li a:hover,
.skin-purple .btn-primary:hover, .skin-purple .btn-primary:focus, .skin-purple .btn-primary:active {background-color: #555299;}

.main-header .navbar .nav > li.user-dropdown > a > .label {right: 15px;}
.main-header .navbar .nav > li.user-dropdown > a > .caret {}

/* Info box stuff */
.info-box .info-box-text {text-align: center;}
.info-box .info-box-number {font-size: 32px; text-align: center;}
.info-box .info-box-number-sa {font-size: 24px; text-align: left;}
.info-box .info-box-number-sa-hp {font-size: 24px; text-align: left; margin-left: 65px;}
.info-box.full-height {position: relative; height: 100%; min-height: 170px;}
.info-box.tall-icon .info-box-icon {position: absolute; left: 0; top: 0; height: 100%;}
.info-box.full-height .info-box-content {padding-bottom: 50px; font-size: 1em; min-height: 100%;}
.info-box.full-height .info-box-content a {position: absolute; bottom: 15px; left: 100px; font-weight: 500; font-size: 1.3em; line-height: 1em;}
a .info-box .info-box-icon {transition: 0.5s;}
a:hover .info-box .info-box-icon {opacity: 0.9;}
a .info-box .info-box-icon i {transition: 0.5s;}
a:hover .info-box .info-box-icon i {font-size: 1.1em;}
a .info-box .info-box-content {color: #555;}
.info-box .info-box-fine-print {font-size: 12px; margin-top: -10px; font-weight: 300; margin-bottom: -20px;}
.info-box .info-box-addl-number {float: right; margin-right: 20px;}
.info-box span {display: block;}
.info-box .row {padding-bottom: 0; margin-bottom: -10px;}

.delete-link .btn-link {color: #dd0000;}
.button-inline.delete-link {margin-top: -30px;}
.error {color: #dd0000;}
.warning {color: #cc6600;}
.green {color: #009900;}
.strong-error {color: #dd0000; font-weight: 900;}

body .ui-widget {font-family: inherit; font-weight: 300;}
body .ui-widget-content, body .ui-widget-content .ui-state-hover, body .ui-widget-content .ui-state-default {font-weight: 300;}
body .ui-datepicker th {font-weight: 500;}
body .ui-widget-header {font-weight: 900;}
form.form-horizontal .fixed-value {display: inline-block; margin-top: 6px;}

.add-attendance {font-size: 9px; color: #999999; opacity: .4;}
.add-attendance:hover, .add-attendance:focus, .add-attendance:active {opacity: 1.0; color: #888888;}
.panel-heading a i {opacity: 0.4; color: #bbb; font-size: 0.8em;}
.panel-heading a:hover i, .panel-heading a:active i, .panel-heading a:focus i {color: #888888;}
.panel-heading:hover a i {opacity: 1;}

/* Help pages */
.help-page.page-title {margin-left: 40px;}
.help-page.panel {font-size: 1.2em; margin-top: 20px;}
.help-page .panel-heading {padding: 15px 40px;}
.help-page .panel-body {padding: 40px;}
.help-page .summary {font-size: 1.2em;}
.help-page .details {opacity: 0.7; font-size: 0.8em;}
.help-page h1, .help-page h2, .help-page h3, .help-page h4, .help-page h5, .help-page h6 {margin-bottom: 3px; margin-top: 1.2em;}

i.fad {--fa-secondary-opacity: 0.8;}

/* interest pics */
#show-crop-image img {border-radius: 100%;}
img.small-thumb {height: 60px; width: auto;}

/* tabs */
.it-tabs .nav-tabs {margin: 0 4px 0 10px; border-bottom: 0;}
.it-tabs .tab-pane {background-color: white; border-radius: 4px; border: 1px solid #ddd; border-top-width: 1px; padding: 20px;}
#report-changed-notice, #report-changed-notice-standard {margin-top: 15px; line-height: 1.3em; color: #204d74;}
#report-changed-notice-standard {position: absolute; bottom: 0; left: 0; padding: 0 20px;}
#standard-reports-holder {position: relative; height: 130px;}

#report-settings-form-column {position: relative;}
.loading-overlay {display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(100,100,100,0.5); z-index: 200;}
.loading-overlay .bouncing.ball.spinner {margin: 150px auto; width: 400px; text-align: center;}
.loading-overlay .bouncing.ball.spinner > div {width: 15px; height: 15px; background-color: rgba(255,255,255,0.5); margin: 0 15px;}

.decision-chart {padding: 5px;}
.decision-chart:hover {cursor: pointer;}

.rounded-corners {border-radius: 12px;}
.help-row {background-color: #2c2a50; overflow: hidden; color: #ffffff;}
.help-row .help-excerpt {padding: 10px 30px 10px 35px;}
.help-row .help-excerpt .button-row {margin-top: 2em;}

@media (max-width: 767px) {
    div.dataTables_wrapper {min-height: 250px;}
    div.dataTables_wrapper div.dataTables_processing {top: 200px;}
    .info-box.full-height {position: relative; height: 100%; min-height: 90px;}
    .main-header a.logo {display: none;}
    aside.main-sidebar {padding-top: 50px;}
    .payment-page .main-panels .flex {width: 100%;}

    .main-header .navbar {min-height: 100px; }
}
@media (max-width: 991px) {
    .skin-blue .main-header .navbar #header-account-name .navbar-custom-menu .navbar-nav > li > .dropdown-menu {right: 0; left: auto; width: auto;}
    .skin-blue .main-header .navbar #header-church-name .navbar-custom-menu .navbar-nav > li > .dropdown-menu {right: auto; left: 50; width: auto;}
    .payment-page .row .last-col {padding-left: 15px !important;}
}
/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 28px;
    margin-bottom: 0;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 4px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #605ca8;
}
.skin-blue input:checked + .slider {
    background-color: #3c8dbc;

}

input:checked:focus + .slider, input:checked:focus + .sliders {
    background-color: #423F78;
}

.skin-blue input:checked:focus + .slider, .skin-blue input:checked:focus + .sliders {
    background-color: #204d74;
}

input:focus + .slider, input:active + .slider {
    background-color: #888;
    box-shadow: 0 0 1px #605ca8;
}

input:focus + .slider, input:active + .slider {
    background-color: #888;
    box-shadow: 0 0 1px #3c8dbc;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 28px;
}

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

/* Chippy checkbox inputs: https://codepen.io/quinlo/pen/ReMRXz
   (Uses "checkbox-toggle" class instead of "ks-cboxtags")
*/
.checkbox-toggle label {
    display: inline-block;
    background-color: rgb(242, 242, 242);
    border: 1px solid rgba(139, 139, 139, .3);
    color: #adadad;
    border-radius: 4px;
    white-space: nowrap;
    margin: 3px 0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: all .2s;

    padding: 0px 6px;
    cursor: pointer;
}

/* .checkbox-toggle label::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Pro";
  font-weight: 500;
  font-size: 12px;
  padding: 2px 6px 2px 2px;
  content: "\f111";
  transition: transform .3s ease-in-out;
}
.checkbox-toggle label::after {
  content: ": off";
}

.checkbox-toggle input[type="checkbox"]:checked+label::before {
  content: "\f192";
  font-weight: 900;
  transition: transform .3s ease-in-out;
}

.checkbox-toggle input[type="checkbox"]:checked+label::after {
  content: ": ON";
} */

.checkbox-toggle input[type="checkbox"]:checked+label {
    border: 1px solid #367fa9;
    background-color: #3c8dbc;
    color: #fff;
    transition: all .2s;
}

.checkbox-toggle input[type="checkbox"] {
    display: absolute;
}

.checkbox-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

/* .checkbox-toggle input[type="checkbox"]:focus+label {
  border: 1px solid #e9a1ff;
} */

#scanMode {cursor: pointer;}
#scanner-toggle {display: inline-block; margin-left: 10px; font-size: 16px;}
#scanner-mode-notice {color: #ffffff; display: inline-block; background-color: #606060; padding: 3px 10px;}
.notifyjs-wrapper .notifyjs-container .notifyjs-bootstrap-base {
    font-size: 1.5em;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    background-image: none !important;
    padding: .5em 1em !important;
    min-width: 400px;
}

.dup-alert {display: none; position: fixed; right: 10px; bottom: 10px; background-color: #dddddd; padding: 20px; font-weight: 400; z-index: 200; border-radius: 4px;}
.dup-alert.success {background-color: #dff0d8; color: #468847; border: #ABD599 solid 1px;}

/* .header-text-notice {padding: 10px 15px 0;} */
.header-text-notice .alert {margin-bottom: 0; padding: 7px 30px 7px 12px; border-radius: 0; border: 0;}
.header-text-notice .alert strong {opacity: 0.85; font-weight: 900;}
.header-text-notice .alert .close {top: 0;}
.header-text-notice .alert .btn.btn-default {color: #00a65a; text-decoration: none; margin-left: 1em;}
.header-text-notice .alert-warning .btn.btn-default {color: #df8900;}
.header-text-notice .alert-danger .btn.btn-default {color: #dd4b39;}
.header-text-notice .alert-info {background-color: #06AED7 !important;}
.header-text-notice .alert-info .btn.btn-default {color: #0697BB;}

.header-dropdown-holder {display: inline-block; white-space: nowrap; text-align: left; height: 50px;}
#header-church-name {max-width: 60%; color: white; font-size: 18px;}
.header-dropdown-holder ul.nav.navbar-nav, .header-dropdown-holder ul.nav.navbar-nav li.dropdown {float: left; width: 100%;}
#header-account-name {max-width: 30%; float: right; }
.header-dropdown-holder .navbar-dropdown-label {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: calc(100% - 5px); display: inline-block; padding-top: 0; margin-bottom: -5px; margin-right: 5px;}
.header-dropdown-holder span.caret {display: inline-block; margin-left: 0px;}
.header-dropdown-holder .dropdown-toggle { width: 100%}
.header-dropdown-holder .navbar-custom-menu {float: left; width: 100%;}
.header-dropdown-holder .dropdown-menu {width: auto; left: 0; right: none;}
.header-dropdown-holder .dropdown.open .dropdown-menu { display: table;}
#header-church-name ul.dropdown-menu
.main-header .navbar #header-church-name .navbar-custom-menu .navbar-nav>li>.dropdown-menu li:last-child {
    padding-bottom: 6px;
}

/* bug fix summertime text editor package - modal popup blocked */
.modal-backdrop.in {z-index:100;}

/* .main-header #header-church-name .navbar-custom-menu {float: left;} */

/* pricing display */
.price s {color:#72afd2; text-decoration: line-through;}
.price s span {color:#777;}
.price span.strong {color:#72afd2; font-weight: 800;}
label.checkbox-wrapper {font-weight: 300;}

i.active-state {color: #aaa;}
i.active-state.active {color: #00bb00;}
i.active-state.inactive {color: #bb0000;}

#nav_icon, #nav_icon option {font-family: "Roboto","Font Awesome 5 Pro";}
.default-hidden {display: none;}
table tr.grayed-out td {background-color: #ccc; border: none;}

a.delete-image {position: relative; min-height: 40px; width: auto;}
a.delete-image img {display: inline-block;}
a.delete-image:hover img {opacity: 0.5;}
a.delete-image i.fa {color: #bb0000; opacity: 0;}
a.delete-image:hover i.fa {opacity: 1;}
/* a.delete-image i.fa {display: block; margin: -30px auto 0; text-align: center;} */

.red {color: #dd4b39;}
#header-alert-icons .label.label-danger {right: 4px;}

.upgrade-page .plan-card-row {margin-right: 0; display: flex;}
.upgrade-page .module {padding-right: 0; padding-bottom: 20px; display: flex; flex-direction: column;}
.upgrade-page .module .module-text {background: white; padding: 15px; padding-bottom: 0; border-radius: 10px; overflow: hidden; text-align: left; height: 100%; display: flex; flex-direction: column; border: 1px #ccc solid; position: relative;}
.upgrade-page .module h4 {font-weight: 900; font-size: 21px;}
.upgrade-page .module img {width: calc(100% + 30px); height: auto; margin: -15px -15px 10px; border-bottom: 1px #ccc solid;}
.upgrade-page .module .plan-recommended {position: absolute; top: 0; left: -15px; width: calc(100% + 30px); height: 30px; background-color: #009900; z-index: 100; color: white; text-align: center; padding: 5px 15px; font-weight: 600; text-transform: uppercase;}
.upgrade-page .module .module-text h4 {text-align: center;}
.upgrade-page .module ul {list-style-type:none; padding-left: 20px;}
.upgrade-page .module ul li {text-indent: -20px; margin-left: 12px;}
.upgrade-page .module ul li:before {content:"\f00c"; font-weight: 900; font-family: "Font Awesome 5 Pro"; margin-right: 6px; color: #367fa9;}
.upgrade-page .options {margin-top: 20px; padding-top: 20px; margin-top: auto;}
.upgrade-page .option {margin-bottom: 20px; display: none;}
.upgrade-page .option .plan-name {font-size: 16px; font-weight: 500; line-height: 1.1em;}
.upgrade-page #term-toggle {min-height: 80px;}

.upgrade-page .sub-checkbox-wrapper .btn-primary {background-color: #d7e0e6; color: #1b6792;}
.upgrade-page .sub-checkbox-wrapper .btn-primary.active {background-color: #367FA9; color: white;}
.upgrade-page .sub-checkbox-wrapper .btn-primary:hover, .upgrade-page .sub-checkbox-wrapper .btn-primary:focus, .upgrade-page .sub-checkbox-wrapper .btn-primary:active, .upgrade-page .sub-checkbox-wrapper .btn-primary.inactive:hover, .upgrade-page .sub-checkbox-wrapper .btn-primary.inactive:focus, .upgrade-page .sub-checkbox-wrapper .btn-primary.inactive:active {background-color: #6ba0be; color: white;}
.upgrade-page .sub-checkbox-wrapper .btn-primary i.fad:before {content: "\10f0c8";}
.upgrade-page .sub-checkbox-wrapper .btn-primary.active i.fad {opacity: 1;}
.upgrade-page .sub-checkbox-wrapper .btn-primary.active i.fad:before {content: "\10f14a";}
.upgrade-page .sub-checkbox-wrapper .btn-primary.inactive {background-color: #e4e4e4; color: #9b9b9b; border-color: #bbb;}
.upgrade-page .sub-checkbox-wrapper .btn-primary.subscribed {background-color: #d5e6d5; color: #008800; border-color: #008000;}
.upgrade-page .sub-checkbox-wrapper .btn-primary.active.subscribed {background-color: #008800; color: white;}
.upgrade-page .sub-checkbox-wrapper .btn-primary.subscribed:hover, .upgrade-page .sub-checkbox-wrapper .btn-primary.subscribed:focus, .upgrade-page .sub-checkbox-wrapper .btn-primary.subscribed:active, .upgrade-page .sub-checkbox-wrapper .btn-primary.subscribed.inactive:hover, .upgrade-page .sub-checkbox-wrapper .btn-primary.subscribved.inactive:focus, .upgrade-page .sub-checkbox-wrapper .btn-primary.subscribed.inactive:active {background-color: #4da54d; color: white;}

.upgrade-page .sms-included-message {font-weight: 900; color: #367fa9; line-height: 1em; margin-top: 10px; margin-bottom: 18px; text-align: center; display: none;}

.upgrade-page {width: 100%; overflow: visible;}
.upgrade-page #checkout-bar {width: calc(100% + 40px); height: 68px; background-color: #1b6792; position: sticky; bottom: 0; left: 0; z-index: 900; padding: 10px; color: white; font-weight: 900; padding-right: 20px;}
.upgrade-page #checkout-bar .total-price {font-size: 32px; font-weight: 900; color: #ecf0f5; line-height: 40px;}
.upgrade-page #checkout-bar .total-price sup {font-size: 18px;}
.upgrade-page #checkout-bar .total-price #price-frequency {font-weight: 300; font-size: 18px;}
.upgrade-page #checkout-bar .total-header {text-transform: uppercase; font-weight: 400; font-size: 12px; line-height: 12px; opacity: 0.6;}
.upgrade-page #checkout-bar .old-total {margin-left: 30px; opacity: 0.8; vertical-align: top;}
.upgrade-page #checkout-bar .old-total .total-price {font-weight: 400; font-size: 20px; line-height: 25px;}
.upgrade-page #checkout-bar .total-block, .upgrade-page #checkout-bar .total-block div {text-align: center;}
.upgrade-page .next-button .btn.inactive {background-color: #999; color: #ccc;}
.upgrade-page .next-button a {color: white; opacity: 0.6; font-weight: 300; margin-right: 1.2em;}
.upgrade-page .next-button a:hover, .upgrade-page .next-button a:focus, .upgrade-page .next-button a:active {opacity: 1; text-decoration: underline;}



.payment-page .main-panels {display: flex; flex-wrap: wrap;}
.payment-page .main-panels .flex {display: flex; flex-direction: column;}

.payment-page .panel {text-align: left; font-size: 16px; margin-top: 15px; margin-bottom: 0;}
.payment-page .row .last-col {padding-left: 0;}
.payment-page .plans table {width: 100%;}
.payment-page .plans table th {text-transform: uppercase; font-weight: 600;}
.payment-page .plans table td, .payment-page .plans table th {text-align: left; vertical-align: top; line-height: 40px;}
.payment-page .plans table td:last-of-type, .payment-page .plans table th:last-of-type {text-align: right;}
.payment-page .plans .credits {font-size: 11px;}
.payment-page .plans table tr.total td:last-of-type {border-top: 1px solid #bbb;}
.payment-page .plans table tr.total td {font-weight: 900;}

.payment-page .panel.payment-method .checkbox-wrapper {font-size: 13px;}
.payment-page .payment-method #card-button {margin-top: 15px;}

.payment-page .recurring-agreement {margin-top: 0.8em;}

.payment-page .trust-column {text-align: center; padding-top: 12px; background-color: #cdd7e4; border-color: #abbed8; display: flex; flex-direction: column; height: 100%;}
.payment-page .trust-column strong {font-weight: 900;}
.payment-page .trust-column img {width: 100%; height: auto; display: block; margin: 8px auto;}

table.table tr.total-price td {font-weight: 500; border-top: 1px #999 solid; border-bottom: 1px #999 solid; border-collapse: separate;}

.add-church-button {margin-top: 1em;}
/*** custom checkboxes ***/
/* requires label containing <span class="ui"></span> immediately after checkbox input */
/* http://codepen.io/CreativeJuiz/pen/zqKtp */
/* linked from http://stackoverflow.com/questions/11223615/how-to-use-font-awesome-for-checkboxes-etc */

.toggle-checkbox [type="checkbox"]:not(:checked),
.toggle-checkbox [type="checkbox"]:checked {
    position: absolute; left: -9999px;
}
.toggle-checkbox [type="checkbox"]:not(:checked) + label,
.toggle-checkbox [type="checkbox"]:checked + label {
    position: relative; padding-left: 115px; cursor: pointer;
}
.toggle-checkbox [type="checkbox"]:not(:checked) + label:before,
.toggle-checkbox [type="checkbox"]:checked + label:before,
.toggle-checkbox [type="checkbox"]:not(:checked) + label:after,
.toggle-checkbox [type="checkbox"]:checked + label:after {
    content: ''; position: absolute;
}
.toggle-checkbox [type="checkbox"]:not(:checked) + label:before,
.toggle-checkbox [type="checkbox"]:checked + label:before {
    left:0; top: -3px; width: 115px; height: 40px; background: #3c8dbc; border-radius: 5px; transition: background-color .4s; border: 1px solid #3c8dbc;
}
.toggle-checkbox [type="checkbox"]:not(:checked) + label:after,
.toggle-checkbox [type="checkbox"]:checked + label:after {
    width: 32px; height: 32px; transition: all .4s; border-radius: 2px; background: #d7e0e6; top: 1px; left: 4px;
}

/* on checked */
.toggle-checkbox [type="checkbox"]:checked + label:before {
    background:#c5dae9;
}
.toggle-checkbox [type="checkbox"]:checked + label:after {
    background: #3c8dbc; top: 1px; left: 79px;
}

.toggle-checkbox [type="checkbox"]:checked + label .ui,
.toggle-checkbox [type="checkbox"]:not(:checked) + label .ui:before,
.toggle-checkbox [type="checkbox"]:checked + label .ui:after {
    position: absolute; left: 4px; width: 105px; border-radius: 4px; font-size: 14px; font-weight: 500;font-style: normal; line-height: 32px; transition: all .4s;
}
.toggle-checkbox [type="checkbox"]:not(:checked) + label .ui:before {
    content: "Monthly"; color: #d7e0e6; left: 20px; transition: all .4s;
}
.toggle-checkbox [type="checkbox"]:checked + label .ui:after {
    content: "Annually"; color: #3c8dbc; left: -15px; transition: all .4s;
}
/* .toggle-checkbox [type="checkbox"]:focus + label:before {
  border: 1px dashed #777; box-sizing: border-box; margin-top: -1px;
} */
.help-block.error {font-weight: 800;}

.fa-check.success {color: #009900}
.custom-check.fa-stack {position: relative;}
.custom-check.fa-stack .fa-check {display: block; position: absolute; left: 7px; top: -4px; text-shadow: -2px 0 #f5f5f5, 3px 0 #f5f5f5, 0 -3px #f5f5f5, 0 3px #f5f5f5;}
.setting-view h4 {margin: 0; font-size: 16px;}
.panel-heading.setting-view a.btn {float: right; margin-top: 18px;}


@media screen and (max-width: 667px) {
    .info-box .info-box-number {font-size: 24px; text-align: center; !important}
    .info-box .info-box-fine-print {font-size: 12px; margin-top: -10px; font-weight: 300; margin-bottom: -20px;}
}

/*
* Responsive text aligning
* http://ohryan.ca/2014/08/14/set-responsive-text-alignment-bootstrap-3/
*/
.text-xs-left { text-align: left; }
.text-xs-right { text-align: right; }
.text-xs-center { text-align: center; }
.text-xs-justify { text-align: justify; }
@media (max-width: 767px) {
    body div#sv-network-switcher {display: none;}
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .text-sm-left { text-align: left; }
    .text-sm-right { text-align: right; }
    .text-sm-center { text-align: center; }
    .text-sm-justify { text-align: justify; }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .text-md-left { text-align: left; }
    .text-md-right { text-align: right; }
    .text-md-center { text-align: center; }
    .text-md-justify { text-align: justify; }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .text-lg-left { text-align: left; }
    .text-lg-right { text-align: right; }
    .text-lg-center { text-align: center; }
    .text-lg-justify { text-align: justify; }
}

@media print {
    a[href]:after {
        content: none !important;
    }

    .no-print, .no-print *
    {
        display: none !important;
    }

    .edit-holder {
        display: none;
    }
}
.font-weight-bold{font-weight: bold;}

@media (max-width: 1280px) {
  .table-responsive-md {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-md > .table {
    margin-bottom: 0; /* matches Bootstrap behavior */
    white-space: nowrap;
  }
}

.table-always-scroll {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* for smooth scrolling on mobile */
}