/* start bootstrap overrides */
.btn {
font-weight: bold;
}
.close {
font-size: 24px;
opacity: 0.4;
}
.enlargedtext {
font-size: 130%;
}
.link-btn{
color: #8a6d3b;
background: #EFEFEF;
}
.link-btn:hover{
color: #333;
}
button,
input[type="reset"],
input[type="submit"] {
font-weight: normal;
}
.table th.cellalignright, .table td.cellalignright {
text-align: right;
}
.table td.markaspaid {
width: 120px;
}
.table th.cellaligncenter, .table td.cellaligncenter {
text-align: center;
}
.table th.listview, .table td.listview, .table tr.listview td {
vertical-align: middle;
}
.table.noborder td {
border-top-style: none;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: white;
}
}
/* membermeister alert overrides */
.alert {
margin-top: 10px;
}
.alert.mm-alert {
background: none;
border-bottom-style: solid;
border-right-style: solid;
border-top-style: solid;
border-left-width: 6px;
border-radius: 0;
}
.alert.alert-danger.mm-alert {
color: #d2322d;
border-color: #d2322d;
}
.alert.alert-warning.mm-alert {
color: #c37b15;
border-color: #f0ad4e;
}
.alert.alert-danger.mm-alert.smallalert {
margin-top: 0px;
margin-bottom: 5px;
}
.alert-payment {
color: initial;
background-color: none;
border-color: #5cb85c;
border-width: 3px;
}
/* todo - sort these out, they appear to be generated by Devise or smthg, can't find style refs in our code */
.alert-notice {
background-color: #D9EDF7;
color: #3A87AD;
border-color: #3A87AD;
border-style: solid;
}
.alert-alert {
color: #c09853;
background-color: #fcf8e3;
border-color: #c09853;
border-style: solid;
}
/* end todo - sort these out, they appear to be generated by Devise or smthg, can't find style refs in our code */
/* space lines inside horiz descriptions a bit more */
dt, dd {
line-height: 24px;
}
/* make in-page tabs more visible by overriding background colors */
.nav.in-page > li > a:hover {
background-color: #e4e4e4;
}
.nav.in-page > li > a {
background-color: #eee;
}
.nav.in-page > li.active > a, .nav.in-page > li.active > a:hover {
background-color: #fff;
}
.uneditable-input.normalcursor {
cursor: default;
}
.emailwarningalert div {
color: #000;
padding-top: 5px;
padding-bottom: 13px;
}
.emailwarningalert h4:last-of-type {
padding-top: 10px;
}
.emailwarningalert .member {
padding-top: 3px;
padding-bottom: 3px;
}
/* ------------- NAVBAR START ------------ */
.nav {
margin-bottom: 0px;
}
.navbar-brand {
margin-top: 10px;
}
.helpimage {
margin-top: 10px;
margin-bottom: 10px;
}
.navbar {
color: #555555;
background-color: #3887AE;
margin-bottom: 0px;
min-height: 80px;
}
.navbar-topheader {
min-height: 25px;
}
.navbar-custom {
border-style: none;
border-radius: 0;
}
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
background-color: #C6C6C6;
color: #304985;
box-shadow: none;
font-weight: bold;
font-size: 15px;
}
/* remove little arrow on main nav menu flyout/subnav */
.navbar .nav > li > .dropdown-menu::before {
display: none;
}
.navbar .nav > li > .dropdown-menu::after {
display: none;
}
/* open dropdowns on hover, see http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click */
ul.nav li.dropdown:hover ul.dropdown-menu{
display: block;
}
a.menu:after, .dropdown-toggle:after {
content: none;
}
.navbar .dropdown-menu, .nav .dropdown-menu {
margin-top: 0px;
}
/* .navbar .dropdown-menu, .nav .dropdown-menu {
margin-top: 0px;
} */
.navbar .dropdown-menu {
border-top: none;
border-left: none;
}
input.navsearch {
padding: 5px 5px 5px 25px;
font-size: 12px;
vertical-align: middle;
border: none;
background-color: #fff;
background-repeat: no-repeat;
background-position: 7px 50%;
background-image: url(/images/icon-search.png);
}
/* move the mobile nav toggle button to the left */
.navbar-toggle {
float: left;
margin-left: 15px;
}
.navbar-collapse {
border-top: 0px;
box-shadow: none;
}
.navbar-form {
border-top: 0;
border-bottom: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
/*.navbar .nav.mobilenav > li a {
color: #FFF;
}*/
.mobilenav.nav-pills > li > a {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.mobilenav .mainnavtab {
margin-right: 2px;
}
.mobilenav .mainnavtab a {
padding: 9px 12px;
}
/* ------------- NAVBAR END ------------ */
.btn-action {
padding: 14px 20px;
font-size: 20px;
line-height: 1.4;
border-radius: 6px;
}
.vue-alert-bootstrap-container {
position: sticky;
top: 20px;
z-index: 10;
}
/* used for alert at the top of the page - reduce margin as to not push content too far down */
.alertcontainer .alert {
margin-bottom: 2px;
}
/* Field name input error state */
.form-control.field-name-error {
border-color: #d9534f;
}
/* Error messages styling */
.custom-field-editor .error-messages {
color: #d9534f;
margin-top: 5px;
}
.custom-field-editor .error-messages .error-message {
color: #d9534f;
}
.vue-alerts-container {
position: fixed;
max-width: 400px;
bottom: 0;
right: 0;
z-index: 1000;
padding: 10px;
}
.vue-alerts-container .alert .close {
position: relative;
top: -2px;
margin-left: 12px;
}
/* square off the top left corner */
.dropdown-menu {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
/* page header row for consistent styling of main section headers */
.page-header-row {
margin-top: 24px;
margin-bottom: 18px;
}
.page-header-row.noborder {
border-bottom: none;
}
/* reduce margin on all form items */
.form-horizontal .form-group {
margin-bottom: 10px;
}
form .form-group.tighter {
margin-bottom: 5px;
}
/* prevent empty dd from collapsing > http://stackoverflow.com/questions/10566451/prevent-twitter-bootstrap-empty-dd-filling-with-next-dd-value */
.dl-horizontal > dd:after {
display: table;
content: "";
clear: both;
}
/* reset col- padding */
.paddingreset {
padding-left: 0;
padding-right: 0;
}
/* start - various forms - bring some form items onto one line */
.inlineformgroup .cost_structure {
width: 100px;
float: left;
}
.inlineformgroup .post-form-label {
font-weight: bold;
padding-left: 10px;
float: left;
line-height: 2;
}
.inlineformgroup .input-group.cost {
float: left;
width: 120px;
}
.inlineformgroup .inline-80 {
float: left;
width: 80px;
}
.inlineformgroup .inline-60pc {
float: left;
width: 60%;
}
.inlineformgroup .inline-60 {
float: left;
width: 60px
}
.inlineformgroup.datefield {
width: 100px;
}
.inlineformgroup .costseparator {
float: left;
margin-left: 10px;
margin-right: 10px;
margin-top: 7px;
}
/* end - inline forms */
.control-label-link {
padding-top: 7px;
margin-bottom: 0;
}
.widthfull {
width: 100%;
}
.leftmargin-1 {
margin-left: -1px;
}
.leftmargin-2 {
margin-left: -2px;
}
.leftmargin1 {
margin-left: 1px;
}
.leftmargin2 {
margin-left: 2px;
}
.leftmargin3 {
margin-left: 3px;
}
.leftmargin5 {
margin-left: 5px;
}
.leftmargin8 {
margin-left: 8px;
}
.leftmargin10 {
margin-left: 10px;
}
.leftmargin15 {
margin-left: 15px;
}
.leftmargin18 {
margin-left: 18px;
}
.leftmargin20 {
margin-left: 20px;
}
.leftmargin25 {
margin-left: 25px;
}
.leftmargin30 {
margin-left: 30px;
}
.leftmargin50 {
margin-left: 50px;
}
.rightmargin2 {
margin-right: 2px;
}
.rightmargin5 {
margin-right: 5px;
}
.rightmargin6 {
margin-right: 6px;
}
.rightmargin10 {
margin-right: 10px;
}
.rightmargin15 {
margin-right: 15px;
}
.rightmargin20 {
margin-right: 20px;
}
.topmargin2, input.topmargin2 {
margin-top: 2px;
}
.topmargin3 {
margin-top: 3px;
}
.topmargin5 {
margin-top: 5px;
}
.topmargin-5 {
margin-top: -5px;
}
.topmargin0 {
margin-top: 0px;
}
.topmargin10 {
margin-top: 10px;
}
.topmargin-10 {
margin-top: -10px;
}
.topmargin7 {
margin-top: 7px;
}
.topmargin8 {
margin-top: 8px;
}
.topmargin9 {
margin-top: 9px;
}
.topmargin15 {
margin-top: 15px;
}
.topmargin20 {
margin-top: 20px;
}
.topmargin25 {
margin-top: 25px;
}
.topmargin30 {
margin-top: 30px;
}
.topmargin40 {
margin-top: 40px;
}
.topmargin50 {
margin-top: 50px;
}
.bottommargin0 {
margin-bottom: 0;
}
.bottommargin3 {
margin-bottom: 3px;
}
.bottommargin5 {
margin-bottom: 5px;
}
.bottommargin10 {
margin-bottom: 10px;
}
.bottommargin15, .form-group.bottommargin15 {
margin-bottom: 15px;
}
.bottommargin20, .form-group.bottommargin20 {
margin-bottom: 20px;
}
.bottommargin30, .form-group.bottommargin30 {
margin-bottom: 30px;
}
.bottommargin40 {
margin-bottom: 40px;
}
.bottommargin50 {
margin-bottom: 50px;
}
.bottompadding0 {
padding-bottom: 0;
}
.margin0{
margin: 0px;
}
.rightpadding2 {
padding-right: 2px;
}
.leftpadding0 {
padding-left: 0;
}
.rightpadding6 {
padding-right: 6px;
}
.rightpadding20 {
padding-right: 20px;
}
.rightpadding25 {
padding-right: 25px;
}
.rightpadding30 {
padding-right: 30px;
}
.leftpadding2 {
padding-left: 2px;
}
.leftpadding10,
.table .leftpadding10 {
padding-left: 10px;
}
.leftpadding20 {
padding-left: 20px;
}
.xpadding15{
padding-left: 15px;
padding-right: 15px;
}
.xpadding20{
padding-left: 20px;
padding-right: 20px;
}
.xpadding30{
padding-left: 30px;
padding-right: 30px;
}
.ypadding10{
padding-top: 10px;
padding-bottom: 10px;
}
.padding30{
padding: 30px;
}
.fontsize16{
font-size: 16px;
}
.fontsize20{
font-size: 20px;
}
.fontsize30{
font-size: 30px;
}
.fontweight400{
font-weight: 400;
}
.fontweight500{
font-weight: 500;
}
@media (max-width: 991px) {
.leftmargin20-lg {
margin-left: 20px;
}
.topmargin25-lg {
margin-top: 25px;
}
}
.noleftpadding {
padding-left: 0;
}
.topborder0,
.table .topborder0 {
border-top: 0;
}
.table > tbody > tr > td.padded-td-25 {
padding-left: 25px;
padding-right: 25px;
}
.table > tbody > tr > td.padded-td-25-right {
padding-right: 25px;
}
.form-inline .input-prepend .search-query {
border-radius: 0 4px 4px 0;
}
.pagination {
margin: 0;
}
.mainnav {
background-color: #8FB0FF;
width: 100%;
}
.addnewlabel {
float: right;
}
li.infotext {
color: #BBBBBB;
font-size: 13px;
margin-top: -3px;
}
.topnavcontainer-fixed a {
color: #304985;
}
.formfieldinline, .form-control.formfieldinline {
width: 110px;
display: inline;
}
.formfieldinline-sm, .form-control.formfieldinline-sm {
width: 80px;
display: inline;
}
.form-control.formfieldinline-xs, .formfieldinline-xs {
width: 60px;
display: inline;
}
.size225px {
width: 225px;
}
.size10pc {
width: 10%;
}
.size15pc {
width: 15%;
}
.size20pc {
width: 20%;
}
.inlinecontrol {
display: inline;
}
.bold {
font-weight: bold;
}
.form-horizontal .custom-help-block, .form-inline .custom-help-block , form .custom-help-block{
margin-bottom: 0;
margin-top: 3px;
color: #737373;
display: block;
font-size: 13px;
line-height: 15px;
}
/* whiteheader encompasses the top nav for logged out users */
.whiteheader {
background-color: #FFFFFF;
}
/* styles for navbar when logged out */
.home .navbar {
background-color: #FFF;
}
.whiteheader ul.nav-pills {
margin-top: 25px;
}
.navbar .whiteheader .nav > li > a {
color: #304985;
}
.navbar .whiteheader .nav > li > a:hover {
background-color: #EEEEEE;
}
.navbar .whiteheader .nav > .active > a, .navbar .whiteheader .nav > .active > a:hover, .navbar .whiteheader .nav > .active > a:focus {
background-color: #0088CC;
color: white;
}
/* public timetablepage */
.nav.nav-tabs.timetable li.active {
font-weight: bold;
font-size: 16px;
}
/* start homepage styles and layout */
/*.jumbotron h1.homeheader {
font-size: 40px;
margin-bottom: 14px;
text-shadow: 2px 2px 0 rgba(66, 66, 66, 0.5);
} */
.homepage {
background: #0088cc; /* Old browsers */
background: -moz-linear-gradient(top, #0088cc 0%, #0075af 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0088cc), color-stop(100%,#0075af)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0088cc 0%,#0075af 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0088cc 0%,#0075af 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0088cc 0%,#0075af 100%); /* IE10+ */
background: linear-gradient(to bottom, #0088cc 0%,#0075af 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0088cc', endColorstr='#0075af',GradientType=0 ); /* IE6-9 */
padding: 35px;
border-radius: 0px;
color: white;
text-shadow: 1px 1px 0 rgba(66, 66, 66, 0.5);
line-height: 25px;
}
.homepage .btn-lg {
margin-bottom: 15px;
font-size: 22px;
padding: 18px 30px;
}
.textaligncenter.tour {
margin-bottom: 12px;
color: white;
font-size: 15px;
}
.textaligncenter.tour a {
margin-bottom: 15px;
color: white;
font-size: 15px;
text-decoration: underline;
}
.homebenefits img {
margin-top: 8px;
}
.homebenefits .col-md-5 {
margin-left: 3px;
margin-right: 15px;
padding-right: 1px;
}
.homebenefits .row {
padding-bottom: 12px;
}
/* end homepage styles and layout */
.jumbotron.landingpages {
background-color: #fff;
padding-top: 0px;
padding-bottom: 0px;
}
.jumbotron.landingpages.topsection {
padding-left: 0px;
padding-right: 0px;
height: 700px;
background: radial-gradient(ellipse at center center , #304985 0px, #002553 100%) repeat scroll 0% 0% transparent;
background-position: bottom;
min-height: 584px;
color: #fff;
border-bottom: 1px solid #CCC;
position: relative;
}
.jumbotron.landingpages.topsection.gocardless {
height: 300px;
min-height: 200px;
}
.quotewell {
background-color: #FFFFFF;
color: #000000;
}
.quotewell blockquote {
padding-bottom: 1px;
margin-bottom: 6px;
border-left: none;
position: relative;
}
.quotewell img {
margin-right: 35px;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 20px;
}
.quotewell .authorline {
font-size: 80%;
line-height: 1.4;
display: block;
}
/* used to float a span next to an image without wrapping text around it. See ayment options well for example */
.flowpara {
margin-left: 0px;
overflow:auto;
display:block;
}
.well-img {
float: left;
margin-right: 25px;
margin-bottom: 15px;
}
/* color picker */
.pickerbutton {
float: left;
margin-left: -1px;
margin-top: -1px;
}
.simpleColorDisplay {
float: left;
}
.simpleColorChooser {
margin: 0px;
height: 29px;
border: none;
}
/* reset line height to align dropdown btn-group with normal buttons inside H1 headers */
h1 .btn-group.contextbutton {
line-height: 0px;
}
.topnavcontainer-fixed {
background-color: #555555;
color: #FFFFFF;
height: 24px;
left: 0;
position: fixed;
right: 0;
top: 0px;
z-index: 905;
}
.accountname {
font-weight: bold;
font-size: 15px;
padding-top: 5px;
padding-left: 15px;
color: #fff;
}
.mainnavcontainer {
background-color: #3887AE;
background-image: -moz-linear-gradient(center top , #31789C, #3887AE);
background-repeat: repeat-x;
width: 100%;
min-height: 40px;
height: 40px;
left: 0;
right: 0;
position: fixed;
top: 24px;
padding-top: 8px;
margin-right: 8px;
z-index: 901;
}
.mainnavtab {
border-style: none;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-width: 0px;
background-color: #1C93CA;
margin-right: 8px;
margin-top: 10px;
}
.tabactive #tablink {
background-color: #fff;
color: #307598;
font-weight: bold;
}
#tablink {
background-color: #307598;
color: #fff;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-style: solid;
border-width: 0px;
}
#navlinks li.mainnavtab a {
color: #ffffff;
}
#navlinks li.mainnavtab:hover {
background-color: #1EA0DC;
}
/* all nav tabs — white ring visible against both the blue tab and navbar backgrounds */
li.mainnavtab > a:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 2px;
border-radius: 3px;
}
.navbar .nav > li > a {
text-shadow: none;
color: #BBBBBB;
}
/* add space between main content containers and footer */
.container.maincontent, .container-fluid.maincontent {
margin-bottom: 50px;
padding-bottom: 60px;
}
/* make caret in main nav dropdown white */
.nav.navbar-nav li.dropdown > .dropdown-toggle .caret {
border-top-color: white;
border-bottom-color: white;
}
/* unless tab is active */
.nav.navbar-nav li.dropdown.tabactive > .dropdown-toggle .caret {
border-top-color: #777;
border-bottom-color: #777;
}
.navbar-default .navbar-nav.accountnav > li > a {
color: #fff;
background-color: transparent;
padding-top: 3px;
padding-bottom: 3px;
margin-top: 1px;
border-radius: 5px;
}
.navbar-default .navbar-nav.accountnav > li > a:focus {
color: #fff;
background-color: transparent;
}
.navbar-default .navbar-nav.accountnav > li > a:focus:not(:focus-visible) {
outline: none;
}
.navbar-default .navbar-nav.accountnav > li > a:focus-visible {
outline: 2px solid rgba(91, 155, 213, 0.7);
outline-offset: 2px;
border-radius: 5px;
}
.navbar-default .navbar-nav.accountnav > li > a:hover {
color: #fff;
background-color: #307598;
}
.navbar-default .navbar-nav.accountnav .dropdown-menu > li > a:focus:not(:focus-visible),
.navbar-default .navbar-nav.accountnav .dropdown-menu > li > a:active:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.navbar-default .navbar-nav.accountnav .dropdown-menu > li > a:focus-visible {
outline: 2px solid rgba(91, 155, 213, 0.7);
outline-offset: 2px;
border-radius: 3px;
}
.navbar-nav.accountnav {
margin-top: 5px;
margin-right: 5px;
}
.navbar-nav.accountnav .fa-question-circle {
margin-top: 7px;
margin-right: 5px;
color: white;
}
.navbar-right.searchnav {
margin-top: 5px;
padding-right: 0;
margin-right: 20px;
}
.tabactive a#subnavtabactive {
padding-bottom: 6px;
background-color: #eee;
background: url(/images/subnavtab_active.png) no-repeat scroll center bottom transparent;
}
.subnav {
background-color: #fff;
background-image: -moz-linear-gradient(center top , #eeeeee, #dddddd);
background-repeat: repeat-x;
height: 31px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #BBBBBB;
}
.subnav .navbar {
color: #555555;
background-color: transparent;
margin-bottom: 0px;
}
.subnavloggedout {
left: 0;
right: 0;
position: fixed;
top: 61px;
}
.nav-pills .dropdown-toggle .caret {
border-bottom-color: #BBBBBB;
border-top-color: #BBBBBB;
margin-top: 6px;
}
.nav li.dropdown.open .caret, .nav li.dropdown.open.active .caret, .nav li.dropdown.open a:hover .caret {
border-bottom-color: #FFFFFF;
border-top-color: #FFFFFF;
opacity: 1;
}
#navlinks .mainnavtab a.dropdown-toggle{
background-color: #1C93CA;
border-style: none;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
#navlinks .mainnavtab.open a.dropdown-toggle{
background-color: #1EA0DC;
}
#navlinks .mainnavtab a:hover.dropdown-toggle{
background-color: #1EA0DC;
}
#navlinks ul.dropdown-menu > li.mainnavtab {
margin-right: 0;
}
#navlinks ul.dropdown-menu > li.mainnavtab a {
color: #eeeeee;
}
#navlinks li.dropdownnavtab a {
color: #304985;
}
#navlinks li.dropdownnavtab a:hover {
color: white;
}
/* top nav search forms */
.input-mini {
height: 25px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
form.navbar-form .input-mini {
padding-right: 0;
border-style: none;
}
form.navbar-form {
padding: 0;
border-style: none;
}
.col-sm-6 form.navbar-form {
padding-top: 5px;
border-style: none;
}
.pageactionsbar {
margin-bottom: 15px;
}
/*
$INVOICES
*/
/* keep the text inside a dropdown menu inside an H1 header to normal size */
.dropdown-menu.contextgroup {
font-size: 13px;
font-weight: normal;
}
.invoicerowheader {
padding-left: 20px;
/*line-height: 2.0;*/
}
.row.invoicerowheader div.checkbox input[type="checkbox"] {
margin-left: 0;
}
#invoicebatch a.btn {
display: block;
}
#invoicebatch.affix {
top: 10px;
}
.editinvoice .affix {
top: 10px;
}
.memberedit .affix {
top: 38px;
}
.newbatch.affix {
top: 20px;
}
.eventedit .affix {
top: 38px;
}
#invoicebatch .btn {
margin-bottom: 10px;
}
/* #invoicebatch .btn-success {
margin-bottom: 0px;
} */
.lead.invoicelead {
font-size: 30px;
}
/*
search on page, invoices review page
*/
.pagesearch {
margin-top: 30px;
}
.pagesearch .searchpageinput {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.pagesearch .btnnext {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.pagesearch .col1 {
padding-right: 0;
}
.pagesearch .col2 {
padding-left: 0;
}
.pagesearch .btn-group > .btn:first-child {
margin-left: -1px;
}
.invoiceswrapper mark {
background: yellow;
padding-left: 0;
padding-right: 0;
}
.invoiceswrapper mark.current {
background: orange;
padding-right: 0;
padding-left: 0;
}
/* used on search results for invoices */
.searchresults .invoicecontainer {
box-shadow: none;
margin-bottom: 0;
}
.invoicecontainer-small-body {
font-size: 12px;
margin-bottom: 12px;
}
.invoicecontainer .bottomrow select.form-control {
display: inline-block;
}
.invoicecontainer .row.tablerow {
padding-left: 30px;
padding-right: 30px;
}
.searchresults .invoicecontainer a.btn {
margin-top: 7px;
margin-bottom: 1px;
}
.searchresults .invoicecontainer h5, .searchresults .invoicecontainer h4 {
margin-bottom: 0;
margin-top: 0;
}
.searchresults .invoice-small-header {
font-size: 16px;
font-weight: bold;
margin-bottom: 7px;;
}
.searchresults .invoice-small-header small {
font-size: 12px;
font-weight: normal;
line-height: 12px;
}
.searchresults .list-group {
margin-top: 13px;
}
.paymentscontainer .paymentitem {
margin-left: 0;
margin-right: 0;
}
.paymentscontainer .table {
margin-bottom: 5px;
margin-top: 5px;
}
.paymentscontainer .table td {
padding: 3px;
border-top: none;
line-height: 14px;
}
.paymentspanel .table td {
border-top: none;
line-height: 14px;
}
.paymentscontainer .wellheader {
margin-bottom: 0;
/*margin-left: -3px;
margin-right: -3px;*/
display: block;
}
.paymentscontainer span.wellheader {
padding-left: 20px;
}
.paymentscontainer.well {
background-color: #fff;
}
.paymentscontainer .table tr.bottomrow td {
border-bottom: 1px solid #dddddd;
}
.paymentscontainer .table tr.bottomrow:last-child td{
border-bottom: none;
padding-bottom: 0;
}
.paymentscontainer .table tr.bottomrow td {
padding-bottom: 10px;
}
.paymentscontainer tr.toprow td {
padding-top: 14px;
}
.paymentscontainer tr.toprow:first-child td {
padding-top: 0;
}
.paymentscontainer tr.toprow {
background-color: inherit;
}
.paymentscontainer .pull-right {
margin-top: -6px;
}
.payment-form-wrapper {
background-color: #f3f3f3;
margin-bottom: 15px;
padding: 20px;
border-style: solid;
border-width: 2px;
border-color: #e4e4e4;
border-radius: 4px;
/* box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08), inset 0 1px 0 #ffffff; */
}
.payment-form-wrapper .payment-btn {
margin-top: 10px;
}
.payment-form-wrapper .payment-btn {
outline: none !important;
box-shadow: none;
}
.payment-form-wrapper .card-element {
padding: 5px;
}
.payment-form-wrapper fieldset {
background-color: #FFFFFF;
padding-left: 5px;
border-radius: 4px;
border-width: 1px;
border-style: solid;
border-color: #ccc;
}
.payment-header {
color: #636363;
margin-bottom: 12px;
font-weight: bold;
font-size: 16px;
}
.paymentsection .sr-field-error {
margin-bottom: 25px;
color: #eb1c26;
}
.paymentrequestsection .sr-field-error {
margin-bottom: 25px;
color: #eb1c26;
}
.apple-pay-button,
.apple-pay-button:hover,
.apple-pay-button:focus,
.apple-pay-button:active {
color: white;
background-color: #000;
border-color: #000;
}
.apple-pay-button:hover,
.apple-pay-button:focus {
color: white;
background-color: #111;
border-color: #111;
text-decoration: none;
}
.apple-pay-button:focus,
.apple-pay-button:active:focus {
outline: 2px solid #636363;
outline-offset: 2px;
box-shadow: none;
}
/* totals at top of page */
.detailswell h3 {
display: inline;
}
.detailswell {
background: transparent;
}
#invoicesdatatable tr {
height: 57px;
}
#bookingsdatatable tr {
height: 57px;
}
@media (max-width: 991px) {
#bookingsfilterwrapper{
text-align: left;
}
}
/* last row/cells in datatables need a bottom border */
table.dataTable tr:last-child td {
border-bottom: 1px solid #dddddd;
}
div.dataTables_paginate.paging_simple_numbers {
min-height: 34px;
}
/* datatables paging margin override */
div.dataTables_paginate ul.pagination {
margin: 0;
}
/* EMBEDDABLE TIMETABLE PAGE - Edit Mode (not live widget */
/* add shadowy border to make it appear a bit like a paper invoice */
.timetablecontainer {
box-shadow: 0 0 16px rgba(0, 0, 0, 0.23);
padding-bottom: 30px;
padding-top: 25px;
margin-bottom: 30px;
border-top-style: none;
border-top-width: 5px;
}
.mmtimetablecontainer-neutral {
border-top-style: solid;
border-top-color: #666;
}
/*
$NEW-INVOICE-PAGE
*/
.tableinvoiceitems {
margin-top: 15px;
width: 100%;
}
.table.tableinvoiceitems.newinvoice {
width: 100%;
}
/* make the first row of a table a consistent color */
/* .tableinvoiceitems tr.toprow, .tableinvoiceitems tr.bottomrow {
background-color: #F3F3F3;
} */
.tableinvoiceitems tr.bottomrow td {
border-top: 2px solid #333;
}
/* prevent text from wrapping but collapse table cell to width of content */
.collapsecell {
width:1%;
white-space:nowrap;
}
.nowrap {
white-space:nowrap;
}
/* add shadowy border to make it appear a bit like a paper invoice */
.invoicecontainer {
box-shadow: 0 0 16px rgba(0, 0, 0, 0.23);
padding-bottom: 30px;
padding-top: 25px;
margin-bottom: 30px;
border-top-style: none;
border-top-width: 5px;
}
.invoicecontainer-neutral {
border-top-style: solid;
border-top-color: #666;
}
.invoicecontainer-paid {
border-top-style: solid;
border-top-color: #5cb85c;
}
.invoicecontainer-draft {
border-top-style: solid;
border-top-color: #999999;
}
.invoicecontainer-open {
border-top-style: solid;
border-top-color: #f0ad4e;
}
.invoicecontainer-overdue {
border-top-style: solid;
border-top-color: #d9534f;
}
.invoicetotal {
font-weight: bold;
font-size: 120%;
vertical-align: middle;
}
.invoicecontainer.noshadow {
box-shadow: none;
}
.invoicecontainer .label {
margin-right: 3px;
}
.invoicerowheader h3.invoicestatuslabel {
margin-top: 0;
}
.invoicerowheader h4 {
margin-bottom: 0;
}
/* removes bottom border which is standard on headers normally */
.page-header.newinvoiceheader {
padding-bottom: 5px;
border-bottom: none;
}
.newinvoiceheader {
margin-bottom: 20px;
}
.newinvoiceheader span.label {
font-size: 14px;
padding: 8px 12px;
display: inline;
vertical-align: middle;
margin-left: 12px;
}
.preview-invoice .well h3 {
margin-top: 5px;
}
/* .invoiceform .btn[type='submit'] {
margin-right: 15px;
}*/
/* specifies width of last column input invoice items table */
.closebuttoncolumn {
width: 15px;
}
/* specifies width of qty column, invoice items table */
.qtycolumn {
width: 80px;
}
.pricecolumn {
width: 150px;
}
/* keep price input field at a minimum width */
.ratecolumn input[type="number"] {
min-width: 81px;
}
.vatcolumn {
width: 80px;
}
.totalcolumn {
min-width: 60px;
}
/* used on search results page */
.searchresults .userthumb {
margin-right: 10px;
margin-top: -4px;
border-color: #BEBEBE;
}
.searchresults i.fa, .searchresults i.far, .searchresults i.fas {
display: inline;
margin-right: 5px;
}
.searchresults small {
color: #999;
}
.paymentForm small {
color: #000;
}
.bluebadge {
background-color: #3887AE;
}
/* set a top margin for search results well */
.searchresults .well.results {
margin-top: 25px;
}
.searchresults .listheader {
background-color: #ECECEC;
}
small.overpaid {
color: #3c763d;
}
table.printregister span.badge {
margin-top: 6px;
}
table.printregister h3 {
margin-top: 6px;
margin-bottom: 6px;
}
table.printregister td.toprow, .table-condensed > tbody > tr > td.toprow {
border-top: none;
border-bottom: none;
background: none;
}
table.printregister a.selectallBtn {
margin-left: 6px;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
.printregisterpage .form-horizontal .radio, .form-horizontal .checkbox, .form-horizontal .radio-inline, .form-horizontal .checkbox-inline {
padding-top: 0;
}
.form-horizontal label.checkbox-inline {
padding-top: 2px;
padding-bottom: 4px;
}
.paymentheaderitem {
margin-top: 5px;
}
.paymentheaderitem:first-child {
margin-top: 0;
}
.paymentscontainer .paymentitem .pull-right {
margin-top: 0px;
}
.paymentscontainer .paymentitem .pull-right .close {
margin-top: -6px;
}
.paymentitem {
margin-left: 5px;
margin-right: 5px;
}
.paymentitem .paymentnotes {
clear: left;
margin-top: 5px;
}
.paymentitem .close {
opacity: .35;
}
.paymentitem .close:hover {
opacity: .9;
}
.paymentitemactions {
display: block;
clear: both;
padding-top: 3px;
}
.infotooltip {
margin-left: 5px;
}
.infotooltip .fa.fa-question-circle {
color: #777777;
}
.nohandcursor a[data-toggle='tooltip'] {
cursor:default;
}
/* medical red */
.tooltip-red .tooltip-inner {
background-color: #d2322d;
}
.tooltip-red .tooltip.top .tooltip-arrow {
border-top-color: #d2322d;
}
/* consent icons */
.tooltip-warning .tooltip-inner {
/* background-color: #999; */
background-color: #8a6d3b;
}
.tooltip-warning .tooltip.top .tooltip-arrow {
border-top-color: #8a6d3b;
}
.tooltip {
font-size: 13px;
}
/* make tooltips blue */
.tooltip-inner {
background-color: #336699
}
.tooltip.top .tooltip-arrow {
border-top-color: #336699;
}
/* override tooltip opacity */
.tooltip.in {
filter: alpha(opacity = 100);
opacity: 1;
}
/* darker blue for online booking card symbol */
.onlinebooking {
color: #264865;
}
/* payment popover */
.receivepaymentBtn {
line-height: 45px;
}
form.receivepayment a {
margin-top: 10px;
}
form.receivepayment .row {
margin-top: 5px;
}
/* simplify the header section in popovers */
.popover .popover-title {
border-bottom: none;
padding: 0px 5px;
}
/* modify popover shadow to make it more visible */
.popover {
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
box-shadow: 3px 4px 12px 2px rgba(0, 0, 0, 0.3);
}
/* payment page */
.paymentheader {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3c5ca7), color-stop(100%, #304985));
background: -webkit-linear-gradient(top, #3c5ca7 0%, #304985 100%);
background: -o-linear-gradient(top, #3c5ca7 0%, #304985 100%);
background: -ms-linear-gradient(top, #3c5ca7 0%, #304985 100%);
background: linear-gradient(top, #3c5ca7 0%, #304985 100%);
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.25);
box-shadow: 0 2px 4px rgba(0,0,0,0.25);
padding: 1em 0 1.2em 0;
color: white;
margin-bottom: 8px;
}
.paymentheader h3, .paymentheader h4 {
margin-bottom: 2px;
margin-top: 2px;
}
.preview-invoice .invoicecontainer h3 {
margin-top: 0;
}
.bookingpanel {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #833ca7), color-stop(100%, #7d3085));
background: -webkit-linear-gradient(top, #833ca7 0%, #7d3085 100%);
background: -o-linear-gradient(top, #833ca7 0%, #7d3085 100%);
background: -ms-linear-gradient(top, #833ca7 0%, #7d3085 100%);
background: linear-gradient(top, #833ca7 0%, #7d3085 100%);
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.25);
box-shadow: 0 2px 4px rgba(0,0,0,0.25);
padding: 1em 1em 1.2em 1em;
color: white;
margin-bottom: 20px;
}
.bookingpanel h3, .bookingpanel h4 {
margin-bottom: 2px;
margin-top: 2px;
}
.bookingtitletext {
color: #6748d4;
}
/* booking setup wizard breadcrumbs */
.breadcrumb.bookingsetup {
background-color: #fff;
padding-left: 0;
margin-bottom: 0;
}
.breadcrumb.bookingsetup li.active {
font-weight: bold;
color: #4b4b4b;
}
.breadcrumb.bookingsetup li {
font-weight: normal;
color: #7f7f7f;
}
.videoplayer {
background-color: #336699;
padding: 2px;
}
.panel-group.bookingnotifications .panel-title {
font-size: 16px;
font-weight: normal;
}
.panel-group.bookingnotifications .panel-heading {
background-color: transparent;
}
.panel-group.bookingnotifications .panel-heading .panel-subtitle {
font-size: 14px;
}
.panel-group.bookingnotifications .panel-title > a {
color: #337ab7;
}
/* dashboard well headers */
.dashboardwell h3 {
line-height: 0px;
padding-bottom: 15px;
font-size: 20px;
}
/* dashboard loading animations */
#dashboardpage .loader-inner.ball-pulse {
padding-top: 50px;
padding-bottom: 50px;
}
.dashboardicons li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
.activitystream {
margin-top: 15px;
}
.list-group.emaillist {
margin-bottom: 5px;
}
/* used on dashboard */
h5.panellist {
margin-top: 20px;
margin-bottom: 0;
}
.panellist .avatar-colored.avatar-md {
margin-right: 10px;
}
.panellist .avatarcontainer {
width: 30px;
}
.panellist .list-group-item-text {
line-height: 0.9;
}
.panellist ul.horizontalList {
padding-left: 0;
}
.panellist ul.horizontalList li {
margin-bottom: 2px;
vertical-align: middle;
}
/*
.panellist .list-group-item {
padding-bottom: 0;
}
.list-group.panellist {
margin-bottom: 5px;
}*/
ul.horizontalList.nopadding {
padding-left: 0;
}
.horizontalList {
display:table;
width:100%;
}
.horizontalList li {
display:table-cell;
}
/* Term show page: keep stats pills close together when some items are hidden */
.termsheadercontent.termsshowpage ul.term-stats-list {
display: flex;
justify-content: flex-end;
gap: 20px;
width: 100%;
clear: both;
}
.termsheadercontent.termsshowpage ul.term-stats-list li {
display: block;
}
ul.horizontalList.nomargin {
margin-bottom: 0;
}
/* alphabet letters on member list */
h4 .alphabetpills {
font-size: 22px;
}
.alphabetpills.nav-pills > li {
position: relative;
display: block;
cursor: pointer;
padding-right: 10px;
padding-left: 10px;
padding-top: 12px;
padding-bottom: 12px;
border-radius: 4px;
color: #337ab7;
text-decoration: none;
}
.alphabetpills.nav-pills > li.disabled, .alphabetpills.nav-pills > li.disabled:hover {
cursor: default;
color: #999;
background-color: #ffffff;
}
.alphabetpills.nav-pills > li.active, .alphabetpills.nav-pills > li.active:hover {
color: #ffffff;
background-color: #337ab7;
}
.alphabetpills.nav-pills > li:hover, .alphabetpills.nav-pills > li:focus {
text-decoration: none;
background-color: #eee;
}
.nav.nav-pills.mm-sub-tabs {
display: inline-block;
border-bottom: 1px solid #e0e0e0;
}
.nav.nav-pills.mm-sub-tabs > li > a {
color: #999;
background-color: transparent;
border-radius: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.nav.nav-pills.mm-sub-tabs > li > a > .badge {
background-color: #999;
color: white;
}
.nav.nav-pills.mm-sub-tabs > li.active > a {
color: #337ab7;
border-bottom-color: #337ab7;
}
.nav.nav-pills.mm-sub-tabs > li.active > a:hover {
cursor: default;
}
.nav.nav-pills.mm-sub-tabs > li.active > a > .badge {
background-color: #337ab7;
}
.firstUpper {
text-transform: capitalize;
}
[class*="span"].centered,
img.centeredimage {
margin-left: auto;
margin-right: auto;
float: none;
}
.maxHeight400 {
max-height: 400px;
}
.maxHeight350 {
max-height: 350px;
}
.maxHeight200 {
max-height: 200px;
}
.maxHeight250 {
max-height: 250px;
}
.divalignright {
text-align: right;
}
.textaligncenter {
text-align: center;
}
.userimage {
margin-left: 36px;
border-style: solid;
border-width: 1px;
border-color: #999999;
margin-top: 10px;
}
@media (max-width: 767px) {
.userimage {
margin-left: 0px;
margin-top: 0px;
}
}
.userthumb {
border-style: solid;
border-width: 1px;
border-color: #CFCFCF;
float: left;
}
.memberdetails .userimage {
margin-top: 0px;
margin-left: 0px;
}
.memberdetails .membername {
margin-bottom: 8px;
}
.memberdetails .well {
margin-top: 10px;
}
.panel-title {
font-size: 20px;
}
.panel-primary {
border-color: #307598;
}
.panel-primary > .panel-heading {
background-color: #307598;
border-color: #307598;
}
.panel-heading.panel-heading-collapsible {
cursor: pointer;
}
.panel-heading.panel-heading-collapsible .fa {
float: right;
}
.panel-heading-collapsible .panel-title {
float: left;
}
.panel-heading-collapsible:hover {
background-color: #E6E6E6;
}
/* PBS added: panel body on the members profile page, for when customers add lots of text to custom_fields */
.panel-body.wordbreak {
word-break:break-all
}
/* fine tuning padding on panels that contain tabs, for example on members profile page */
.panel-body.tab-content {
padding-top: 0px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}
.attendancethumb {
float: left;
border-color: #d3d3d3;
}
.table.eventtable tr:first-child > td {
border-top: 0;
}
.table.eventtable tr:last-child > td {
border-bottom: 0;
}
.table.eventtable small.note {
margin-left: 5px;
}
.table.eventtable td {
padding-bottom: 4px;
padding-top: 4px;
padding-left: 6px;
padding-right: 6px;
}
#eventdetail div.wellheader {
margin-bottom: 8px;
}
/* .eventdetail .panel-title {
min-height: 30px;
} */
/* -------------------------------------------------------------------------- Start Footer ---------------- */
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 155px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
/*height: 165px;*/
background: none repeat scroll 0 0 #FFFFFF;
background-color: #F5F5F5;
border-top: 1px solid #C6C6C6;
padding-bottom: 15px;
padding-top: 15px;
}
.footer.loggedin {
height: 85px;
}
.footer p {
color: #666666;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 11px;
line-height: 18px;
}
.footer .copyrightnote {
padding-left: 15px;
padding-top: 15px;
}
.footer .copyrighttext {
font-size: 11px;
color: #888;
}
.footernav li {
font-size: 12px;
line-height: 15px;
}
.footer .nav > li > a {
position: relative;
display: block;
padding: 3px 15px;
}
.footernav .nav-header {
text-transform: uppercase;
color: #999999;
display: block;
padding: 3px 15px;
font-weight: bold;
font-size: 12px;
line-height: 15px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.footercontainer {
padding-left: 20px;
}
/* -------------------------------------------------------------------------- End Footer --------------- */
/* small print on some forms */
.footernote {
font-size: 11px;
color: #999999;
}
/* used to hide the first border at the top of a table */
td.toprow {
border-top: none;
}
td.overdue {
color: #CA1D1D;
}
td.closed {
color: #65A20B;
}
td.open {
color: #F28C00;
}
td.draft {
color: #800000;
}
.well.h200 {
min-height: 200px;
}
.well.h250 {
min-height: 250px;
}
.benefitlist {
text-align: left;
}
.benefitlist ul {
border-top: none;
}
.benefitlist li {
list-style: none;
border-top: none;
border-bottom: none;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 15px;
}
.benefitlist li:last-child {
padding-top: 6px;
border-bottom: none;
}
/*.calendar_small {
width: 270px;
margin-left: 30px;
}*/
.spacer10px {
margin: 10px 0;
padding-bottom: 10px;
}
.form-group.marginbottom30 {
margin-bottom: 30px;
}
.groupbadge {
float: right;
font-size: 14px;
padding: 2px 8px;
margin-left: 2px;
background-color: #1873A0;
}
.accordion-inner.quickmemberform {
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 10px;
}
.quickmemberform .form-control {
margin-bottom: 10px;
}
.text-field-with-attention {
background-color: #58bb3540;
}
.addParentModal {
text-align: center;
}
.parent_token_btn {
padding-left: 0;
}
.quickmember {
margin-top: 5px;
margin-bottom: 0;
}
.quickmember span.custom-help-block {
display: inline-block;
padding-left: 15px;
}
.form-horizontal .accordion-inner .help-block{
margin-top: 3px;
margin-bottom: 6px;
margin-left: 1px;
}
/* start timeline display items, for example activity stream on dashboard */
.timelineleft{
position:absolute;
left:0;
width: 40%;
padding: 8px 25px 7px 7px;
text-align: right;
min-height: 100%;
height:100%;
}
.timelineright {
width: 60%;
border-left-width: 2px;
border-left-color: #ccc;
border-left-style: solid;
padding: 7px 7px 7px 25px;
}
.timeline-group {
padding-left: 0;
margin-bottom: 20px;
position:relative;
}
.timeline-group-item {
position: relative;
display: block;
padding: 0;
margin-bottom: -1px;
border: none;
}
.smallcircle {
border-radius: 50%;
width: 16px;
height: 16px;
float: left;
background-color: #47a447;
margin-left: -34px;
margin-top: 3px;
margin-bottom: 5%;
border-color: #fff;
border-width: 3px;
border-style: solid;
}
/* end timeline display items */
/* PBS added this for Subscription timeline */
.activepaymentcircle {
border-radius: 50%;
width: 20px;
height: 20px;
float: left;
background-color: #47a447;
margin-left: -36px;
margin-top: 3px;
margin-bottom: 5%;
border-color: #fff;
border-width: 3px;
border-style: solid;
}
.amendedpaymentcircle {
border-radius: 50%;
width: 20px;
height: 20px;
float: left;
background-color: #f0ad4e;
margin-left: -36px;
margin-top: 3px;
margin-bottom: 5%;
border-color: #fff;
border-width: 3px;
border-style: solid;
}
.redpaymentcircle {
border-radius: 50%;
width: 20px;
height: 20px;
float: left;
background-color: #d9534f;
margin-left: -36px;
margin-top: 3px;
margin-bottom: 5%;
border-color: #fff;
border-width: 3px;
border-style: solid;
}
.futurepaymentcircle {
border-radius: 50%;
width: 20px;
height: 20px;
float: left;
background-color: #d4d4d4;
margin-left: -36px;
margin-top: 3px;
margin-bottom: 5%;
border-color: #fff;
border-width: 3px;
border-style: solid;
}
/* End: PBS - subscription timeline */
.parentcircle {
border-radius: 50%;
width: 17px;
height: 17px;
background-color: #c6c6c6;
color: #585858;
position: absolute;
margin-left: -17px;
margin-top: 20px;
}
.parentcircle.dd { /* parent icon for Direct Debit in datatable */
background-color: #c6c6c6;
position: absolute;
margin-left: -18px;
margin-top: 17px;
}
.parentcircle a:hover, a:focus {
text-decoration: none;
}
/* colored header on top of various form containers such as new member */
.wellheader {
margin-left: -19px;
margin-right: -19px;
margin-top: -19px;
margin-bottom: 16px;
background-color: #ececec;
color: #3f3f3f;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
border-bottom-color: #e3e3e3;
border-bottom-style: solid;
border-bottom-width: 1px;
padding-left: 19px;
padding-right: 19px;
padding-bottom: 7px;
padding-top: 7px;
font-weight: bold;
font-size: 130%;
}
.wellheader .subwellheader {
font-size: 14px;
font-weight: normal;
}
/* reports */
.reportswell {
min-height: 140px;
}
.reportswell .label {
margin-right: 12px;
font-size: 90%;
}
.reportswell .report-hidden {
margin-top: 15px;
}
.reportswell .btn {
display: block;
margin-top: 20px;
}
.financereports .checkbox input[type="checkbox"] {
vertical-align: top;
}
.reportsdisplayoptions .dropdown-menu {
min-width: 200px;
}
.reportsdisplayoptions .dropdown-menu .checkbox {
margin-top: 3px;
margin-bottom: 4px;
margin-left: 8px;
}
.reportsconfigpanel .panel-body .checkbox {
margin-top: 0;
margin-bottom: 0;
}
.reportsconfigpanel .panel-body .form-group {
margin-bottom: 7px;
}
.reportsconfigpanel .panel-body .form-group.filtercategory:first-of-type {
margin-top: 10px;
}
.reportspanel {
min-height: 90px;
}
/* applies padding to all content underneath groupswell header */
.groupswellcontent {
padding-top: 5px;
padding-bottom: 13px;
padding-left: 10px;
padding-right: 10px;
}
.groupswellsmall {
margin-left: 0px;
margin-right: 15px;
margin-bottom: 12px;
font-size: 0.75rem;
min-height: 110px;
padding: 0px;
border: 1px solid #cccccc;
width: 170px;
}
.groupname {
background-color: #1C93CA;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
border-style: none;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.groupname a {
font-size: 15px;
font-weight: bold;
line-height: 16px;
color: white;
}
.groupswelldetail .groupname a {
font-size: 18px;
font-weight: bold;
line-height: 16px;
color: white;
}
.groupswellsmall .bodytext {
font-size: 12px;
line-height: 16px;
padding: 9px;
}
.groupswelldetail {
padding: 0px;
background-color: whiteSmoke;
border: 1px solid #cccccc;
box-shadow: 4px 3px 8px #cccccc;
}
.panel.birthdaypanel table {
margin-bottom: 0;
}
/* member notes section */
.note-body {
margin-left: -5px;
margin-top: 5px;
margin-bottom: 10px;
padding: 5px;
}
.note-body:hover {
background-color: aliceblue
}
/* edit custom fields */
.custom-field-body {
display: flex;
align-items: center;
justify-content: space-between;
margin: 5px 0px 10px 0px;
padding: 10px 15px;
border-radius: 4px;
}
.custom-field-name {
font-size: 16px;
}
.custom-field-data-type {
font-size: 12px;
color: #777;
}
.custom-field-actions .dropdown {
display: inline-block;
margin-left: 4px;
}
.custom-field-editor {
padding: 10px 15px;
}
.input-counter-container {
position: relative;
}
.char-counter {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 0.9em;
color: #666;
pointer-events: none;
user-select: none;
}
.char-counter-warning {
color: #f0ad4e;
}
.stickysubmit{
position: sticky;
top: 38px;
}
/* Compose Form - Assign fields to a form */
.stickysubmit.composesettingssubmit {
font-weight: 400;
}
/* Compose Form - equal height columns so sticky has full container height */
@media (min-width: 992px) {
#compose-page .compose-fields-row {
display: table;
table-layout: fixed;
}
/* Disable Bootstrap clearfix pseudo-elements on table rows */
#compose-page .compose-fields-row::before,
#compose-page .compose-fields-row::after {
display: none;
content: none;
}
/* Convert columns to table cells for equal height */
#compose-page .compose-fields-row > .col-md-3,
#compose-page .compose-fields-row > .col-md-7,
#compose-page .compose-fields-row > .col-md-2 {
display: table-cell;
float: none;
vertical-align: top;
}
}
/* Compose Form - keep available fields in view */
#compose-page #assigned-form-items-panel {
position: sticky;
top: 38px;
/* Make heading fixed and body scrollable */
display: flex;
flex-direction: column;
/* Cap to viewport minus sticky offset (38px top + 38px bottom = 76px) */
max-height: calc(100vh - 76px);
/* Ensure it layers above neighboring content if needed */
z-index: 2;
}
#compose-page #assigned-form-items-panel .panel-body {
overflow-y: auto;
min-height: 0; /* required for flex children to allow scrolling */
overscroll-behavior: contain;
}
/* Avoid odd sticky behavior on stacked mobile columns */
@media (max-width: 991px) {
#compose-page #assigned-form-items-panel {
position: static;
max-height: none;
}
#compose-page #assigned-form-items-panel .panel-body {
overflow-y: visible;
overscroll-behavior: auto;
}
}
#assigned-form-items-panel .form-item {
display: flex;
align-items: flex-start;
margin-bottom: 10px;
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 4px;
position: relative;
}
#assigned-form-items-panel .form-item.disabled {
opacity: 0.5;
background: #f5f5f5;
}
#assigned-form-items-panel .form-item .drag-handle {
margin-left: 5px;
padding: 20px 10px;
color: #999;
align-self: center;
}
#assigned-form-items-panel .form-item .form-item-content {
flex: 1;
padding: 10px;
user-select: none;
}
#assigned-form-items-panel .form-item .form-item-info {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 4px;
}
#assigned-form-items-panel .form-item .form-item-name {
font-weight: 500;
color: #333;
}
#assigned-form-items-panel .form-item .form-item-required {
margin-top: 4px;
}
#assigned-form-items-panel .form-item .form-item-remove {
position: absolute;
top: 4px;
right: 4px;
background: none;
border: none;
padding: 4px 6px;
cursor: pointer;
color: #999;
font-size: 14px;
line-height: 1;
}
#assigned-form-items-panel .form-item .form-item-remove:hover {
color: #d9534f;
}
/* Headless UI Switch styling for Bootstrap 3 compatibility */
#assigned-form-items-panel .form-item .form-item-required .switch-container {
display: flex;
align-items: center;
flex-direction: row;
}
#assigned-form-items-panel .form-item .form-item-required .headless-switch {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
background-color: #ccc;
border-radius: 11px;
cursor: pointer;
transition: background-color 0.2s ease;
border: 1px solid #bbb;
outline: none;
}
#assigned-form-items-panel .form-item .form-item-required .headless-switch[aria-checked="false"]:focus {
box-shadow: 0 0 0 2px #bbb;
}
#assigned-form-items-panel .form-item .form-item-required .headless-switch[aria-checked="true"]:focus {
box-shadow: 0 0 0 2px #4cae4c;
}
#assigned-form-items-panel .form-item .form-item-required .headless-switch[aria-checked="true"] {
background-color: #5cb85c;
border-color: #4cae4c;
}
#assigned-form-items-panel .form-item .form-item-required .headless-switch[aria-checked="false"] {
background-color: #ccc;
border-color: #bbb;
}
#assigned-form-items-panel .form-item .form-item-required .switch-thumb {
position: absolute;
top: 50%;
left: 2px;
width: 14px;
height: 14px;
background-color: #fff;
border-radius: 50%;
transition: transform 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
transform: translateY(-50%);
pointer-events: none;
}
#assigned-form-items-panel .form-item .form-item-required .headless-switch[aria-checked="true"] .switch-thumb {
transform: translateY(-50%) translateX(16px);
}
#assigned-form-items-panel .form-item .form-item-required .headless-switch[aria-checked="false"] .switch-thumb {
transform: translateY(-50%) translateX(0);
}
#assigned-form-items-panel .form-item .form-item-required .switch-label {
font-size: 14px;
color: #333;
cursor: pointer;
user-select: none;
margin-right: 8px;
}
.empty-state {
text-align: center;
margin: 10px 0px 20px 0px;
font-size: 14px;
color: #999;
}
.add-field-button-container {
text-align: center;
margin: 20px 0px 10px 0px;
}
/* Form Item Selection Modal Content */
.field-selection-section {
margin-bottom: 20px;
}
.field-selection-section:last-child {
margin-bottom: 0;
}
.field-selection-section .field-list {
display: flex;
flex-direction: column;
}
.field-selection-section .field {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
display: flex;
justify-content: space-between;
align-items: center;
}
.field-selection-section .field:last-child {
margin-bottom: 0;
}
.field-selection-section .field:hover {
background-color: #f5f5f5;
border-color: #bbb;
}
.field-selection-section .field.selected {
background-color: #e8f5e9;
border-color: #4caf50;
}
.field-selection-section .field.selected:hover {
background-color: #d4edda;
border-color: #28a745;
}
.field-selection-section .field .field-content {
flex: 1;
}
.field-selection-section .field .fa-check {
color: #28a745;
font-size: 16px;
margin-left: 10px;
}
.field-selection-section .field-name {
font-size: 14px;
font-weight: 500;
color: #333;
margin-right: 10px;
}
.field-selection-section .field-empty {
padding: 12px;
font-size: 13px;
color: #999;
font-style: italic;
text-align: center;
}
/* Available field items in panel */
.available-field {
padding: 8px 12px;
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 6px;
cursor: grab;
display: flex;
align-items: center;
gap: 8px;
}
.available-field:active {
cursor: grabbing;
}
.available-field .drag-hint {
color: #999;
font-size: 14px;
}
.available-field-list {
margin-bottom: 15px;
}
.field-selection-section h5 {
font-size: 14px;
font-weight: 600;
color: #333;
margin-bottom: 10px;
margin-top: 0;
}
/* Form preview container */
.form-preview-container {
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
padding: 20px;
}
.form-preview-header {
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.form-preview-header h4 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #333;
}
.form-preview-page {
padding: 20px;
background: #fff;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.23);
}
/* Form preview drop zone */
.form-preview-drop-zone-container {
position: relative;
margin-top: 20px;
}
.form-preview-drop-zone-container.drop-zone-empty {
padding: 20px;
border: 2px dashed #ddd;
border-radius: 8px;
box-shadow: none;
}
.form-preview-drop-zone {
position: relative;
z-index: 1;
min-height: 200px;
}
/* Ghost element styling - shows where the dragged item will land */
.form-preview-drop-zone .sortable-ghost {
min-height: 115px;
background: aliceblue;
border: 2px dashed #d7ebfd;
border-radius: 4px;
opacity: 1;
}
/* Hide the ghost's content so it appears as an empty placeholder */
.form-preview-drop-zone .sortable-ghost > * {
visibility: hidden;
}
/* Fallback element styling (element being dragged with forceFallback) */
.form-preview-drop-zone .sortable-fallback {
background-color: aliceblue !important;
border-color: #d7ebfd !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
opacity: 1 !important;
}
.available-field-list .sortable-fallback {
background-color: aliceblue !important;
border-color: #d7ebfd !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
opacity: 1 !important;
}
/* Prevent text selection during drag */
.form-preview-drop-zone,
.available-field-list,
.form-field-wrapper {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.drop-zone-placeholder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
padding-left: 5px;
padding-right: 5px;
color: #999;
white-space: nowrap;
}
.drop-zone-placeholder p {
margin-top: 10px;
}
/* Form field wrapper - entire item is draggable */
.form-field-wrapper {
position: relative;
margin-bottom: 15px;
padding: 15px;
padding-top: 20px;
border: 1px solid transparent;
border-radius: 4px;
transition: border-color 0.2s, background-color 0.2s;
cursor: grab;
}
.form-field-wrapper:active {
cursor: grabbing;
}
.form-field-wrapper:hover {
border-color: #d7ebfd;
background-color: aliceblue;
}
/* Remove button - top right corner */
.form-field-wrapper .field-remove-btn {
position: absolute;
top: 5px;
right: 5px;
background: none;
border: none;
padding: 4px 6px;
cursor: pointer;
color: #ccc;
font-size: 14px;
line-height: 1;
transition: opacity 0.2s;
}
.form-field-wrapper .field-remove-btn:hover {
color: #aaa;
}
/* Top-level flex container for drag handle + field content */
.form-field-wrapper .form-field-content {
display: flex;
align-items: flex-start;
gap: 15px;
}
.form-field-wrapper .field-drag-handle {
color: #ccc;
font-size: 16px;
}
/* Main content area grows to fill space */
.form-field-wrapper .form-field-main {
flex: 1;
}
.form-field-wrapper .form-field-description {
display: block;
margin-top: 5px;
font-size: 13px;
line-height: 15px;
color: #737373;
}
/* Required toggle below input */
.form-field-wrapper .field-required-toggle {
margin-top: 15px;
}
/* Required toggle styling in form preview */
.form-field-wrapper .field-required-toggle .switch-container {
display: flex;
align-items: center;
gap: 8px;
}
.form-field-wrapper .field-required-toggle .switch-label {
font-size: 14px;
color: #333;
}
.form-field-wrapper .field-required-toggle .headless-switch {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
background-color: #ccc;
border-radius: 11px;
cursor: pointer;
transition: background-color 0.2s ease;
border: 1px solid #bbb;
outline: none;
}
.form-field-wrapper .field-required-toggle .headless-switch[aria-checked="true"] {
background-color: #5cb85c;
border-color: #4cae4c;
}
.form-field-wrapper .field-required-toggle .headless-switch[aria-checked="false"] {
background-color: #ccc;
border-color: #bbb;
}
.form-field-wrapper .field-required-toggle .headless-switch[aria-checked="false"]:focus {
box-shadow: 0 0 0 2px #bbb;
}
.form-field-wrapper .field-required-toggle .headless-switch[aria-checked="true"]:focus {
box-shadow: 0 0 0 2px #4cae4c;
}
.form-field-wrapper .field-required-toggle .switch-thumb {
position: absolute;
top: 50%;
left: 2px;
width: 14px;
height: 14px;
background-color: #fff;
border-radius: 50%;
transition: transform 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
transform: translateY(-50%);
pointer-events: none;
}
.form-field-wrapper .field-required-toggle .headless-switch[aria-checked="true"] .switch-thumb {
transform: translateY(-50%) translateX(16px);
}
.form-field-wrapper .field-required-toggle .headless-switch[aria-checked="false"] .switch-thumb {
transform: translateY(-50%) translateX(0);
}
.field-required-warning {
display: flex;
align-items: flex-start;
gap: 6px;
margin-top: 10px;
font-size: 12px;
}
/* Dummy field styles for form preview */
.form-field-wrapper .dummy-field {
pointer-events: none;
background-color: #fff;
}
/* Dummy dropdown with placeholder text and chevron */
.form-field-wrapper .dummy-dropdown {
display: flex;
align-items: center;
justify-content: space-between;
}
.form-field-wrapper .dummy-dropdown span {
color: #999;
}
.form-field-wrapper .dummy-dropdown i {
color: #999;
font-size: 12px;
}
/* Dummy checkbox */
.form-field-wrapper .dummy-checkbox {
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 3px;
background-color: #fff;
pointer-events: none;
}
/* Dummy textarea for medical notes */
.form-field-wrapper .dummy-textarea {
min-height: 80px;
height: auto;
resize: vertical;
}
/* Read-only form field preview (no hover, no cursor change) */
.form-field-wrapper.form-field-readonly {
cursor: default;
padding: 0px;
}
.form-field-wrapper.form-field-readonly:hover {
border-color: transparent;
background-color: #fff;
}
.form-actions {
display: flex;
flex-direction: column;
gap: 15px;
}
/*
Styles for elements added by the Sortable.js (VueDraggable) drag and drop feature
Used for custom field dropdown options drag/drop UI
*/
#custom-field-dropdown-options .sortable-chosen,
#custom-field-dropdown-options .sortable-drag {
opacity: 1;
}
#custom-field-dropdown-options .sortable-ghost {
opacity: 0.5;
}
/* in the detail view add a bit more padding underneath the header */
.groupswelldetail .groupswellcontent {
padding-top: 10px;
}
/* hr to separate sections inside groupswelldetail */
.groupswelldetail hr {
border-top: 1px solid #C7C4C4;
border-bottom: 1px solid white;
}
/* formats the buttons at the bottom and inside of the group details panel */
#groupoptions a.btn {
width: 85%;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 7px;
}
.groupswellsmall:hover {
/*border: 1px solid #1C93CA;*/
background-color: #eeeeee;
}
.selectedgroup {
background-color: #eeeeee;
border: 1px solid #1C93CA;
box-shadow: 4px 3px 8px #cccccc;
}
.groupscontainer {
min-height: 500px;
}
.groupscontainer .groupswellsmall h4 {
font-size: 16px;
line-height: 18px;
}
#groupdetails.affix {
top: 110px;
width: inherit;
}
.offscreen {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.contextbutton {
margin-left: 10px;
font-weight: bold;
margin-top: 10px;
}
.contextbutton select {
margin-top: 9px;
margin-right: 10px;
}
.morebutton {
margin-left: 10px;
}
.page-header-row .btn {
margin-left: 10px;
font-weight: bold;
margin-top: 14px;
}
.page-header-row .btn-group .btn {
margin-left: -1px;
}
.boldtext, .checkbox label.boldtext{
font-weight: bold;
}
.invoicealltable .checkbox.tableheader {
padding-left: 5px;
color: inherit;
}
/* Align select-all checkbox with DataTables sort headers */
.invoicealltable.table.dataTable > thead > tr > th {
vertical-align: middle;
padding-top: 4px;
padding-bottom: 8px;
}
/* DataTables condensed adds padding-right: 20px for sort icons; that
shifts the centered header checkbox left of the row checkboxes. */
.invoicealltable.table.dataTable.table-condensed > thead > tr > th:first-child {
padding-left: 5px;
padding-right: 5px;
}
.invoicealltable.table.dataTable > thead > tr > th:first-child .toggleall {
margin-left: 3px;
}
.invoicealltable.table.dataTable > thead > tr > th label {
margin-bottom: 0;
line-height: 1;
}
.invoicealltable.table.dataTable thead .sorting:after,
.invoicealltable.table.dataTable thead .sorting_asc:after,
.invoicealltable.table.dataTable thead .sorting_desc:after {
top: 4px;
bottom: auto;
}
.invoicealltable input[type="checkbox"].toggleall,
.invoicealltable input[type="checkbox"].invoices_select {
width: 1.25em;
height: 1.25em;
vertical-align: middle;
margin: 0;
}
.invoicealltable .term-name {
font-size: 16px; /* body is typically 14px; try +2px on class names */
}
/* Table inset inside the Create invoices panel (avoid Bootstrap .row
negative margins pulling the table outside the panel). */
.batchinvoiceform .invoice-terms-panel-body {
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
margin-bottom: -1px;
/* margin-top: -1px; */
}
.batchinvoiceform .invoice-terms-panel-body > .row {
margin-left: 0;
margin-right: 0;
}
.batchinvoiceform .invoice_term_list {
padding-left: 0;
padding-right: 0;
}
.batchinvoiceform .invoicealltable.table.dataTable {
margin-top: 0 !important;
margin-bottom: 0 !important;
width: 100% !important;
}
/* No extra left/right cell borders (global DataTables accent rule) */
.invoicealltable.table.dataTable td:first-child,
.invoicealltable.table.dataTable th:first-child {
border-left: none;
}
.invoicealltable.table.dataTable td:last-child,
.invoicealltable.table.dataTable th:last-child {
border-right: none;
}
/*
$FORMS
*/
/* 2 digit form entry */
.input-tiny {
width: 35px;
}
/* text without a form field in a form (such as invoice number) */
.formtextinline {
line-height: 10px;
}
.form-progressbar {
width: 150px;
}
.lineheight1-8 {
line-height: 1.8;
}
.lineheight2 {
line-height: 2;
}
.discount_fields .form-control {
width: 80px;
}
/*.batchinvoiceform .col-md-12 {
padding-left: 0;
}*/
.discount_outer_wrapper .alert {
margin-top: 0;
margin-bottom: 3px;
border-style: none;
}
.batchinvoiceform .section label.checkbox{
padding-top: 2px;
padding-bottom: 0px;
margin-bottom: 2px;
}
.batchinvoiceform .discount_fields {
padding-top: 15px;
padding-bottom: 0px;
}
.batchinvoiceform .row.commentsrow {
padding-top: 20px;
}
.discount_wrapper {
padding-top: 5px;
padding-bottom: 5px;
margin-top: 5px;
background-color: #FFE8DE;
}
.commentslist .list-group {
margin-left: -16px;
margin-right: -16px;
}
.commentslist .list-group .list-group-item:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top-style: none;
}
.commentswell .wellheader {
margin-bottom: 0;
}
.commentbyline {
color: #777;
padding-bottom: 3px;
}
/* fixes wrap issue in forms with Rails error class and prepended currency sign etc */
.field_with_errors { display: inline; }
/* space page action buttons inside headers by 10px */
.btn.pull-right {
margin-left: 10px;
}
/* place parent icon in the bottom right corner of member thumb */
.membercolumn .parents.parents-small, #membersdatatable .parents.parents-small {
position: absolute;
margin-left: 2px;
margin-top: 0;
}
/* placement inside quick member add form */
.quickmember .panel-heading .parents.parents-small {
position: relative;
margin-left: 0px;
margin-top: -6px;
}
.parents.parents-small {
transform:scale(0.6,0.6);
-ms-transform:scale(0.6,0.6); /* IE 9 */
-moz-transform:scale(0.6,0.6); /* Firefox */
-webkit-transform:scale(0.6,0.6); /* Safari and Chrome */
-o-transform:scale(0.6,0.6); /* Opera */
}
.affixedform .affix {
top: 15px;
}
/* when using affix make buttons non-affixed on smaller screens */
@media (max-width: 992px) {
.affix {
position: static;
}
}
.token-input-input-token input {
height: 34px;
}
@media (max-width: 767px) {
.panel-body {
padding-top: 10px;
padding-bottom: 10px;
/* removed Oct 2018, not sure what this was for
padding-left: 0;
padding-right: 0; */
}
}
/* HTML:
*/
/* used for member list overview */
.inlinelisttable {
margin-bottom: 0;
}
.table.inlinelisttable th, .table.inlinelisttable td {
padding: 1px;
line-height: inherit;
}
.table.inlinelisttable th, .table.inlinelisttable td {
padding: 1px;
text-align: left;
border-top: none;
}
.glyphiconphone {
margin-right: 4px;
margin-left: 4px;
}
/* tokenizer styles */
.token-input-input-token input {
width: 80px;
}
li.token-input-token span.token-detail {
color: #4e4e4e;
font-weight: normal;
}
.token-input-delete-token {
font-size: 18px;
}
.termstokenizer .token-input-delete-token {
font-size: 22px;
margin-top: -15px;
}
.termstokenizer li.token-input-token .termcolourborder {
width: 4px;
height: 40px;
margin-left: -5px;
margin-bottom: 0;
margin-right: 9px;
padding-bottom: 3px;
}
.termstokenizer li.token-input-token {
padding-bottom: 3px;
}
.termstokenizer .token-input-list {
border-top: none;
border-left: none;
border-right: none;
border-radius: 0;
}
.termstokenizer li.token-input-token {
background-color: #F5F5F5;
padding-left: 10px;
}
.termstokenizer li.token-input-token span {
padding-left: 10px;
color: #505050;
}
.termstokenizer.waitinglist .token-input-list {
border-bottom: none;
}
/* when we use an icon overlay on a form we need to move the tokenizer elements in a bit so the remove 'x' does not overlay the icon */
.form-group.has-feedback ul.token-input-list li {
margin-right: 32px;
}
/* since this accordion needs an id anyway for the collapse I may as well hook my styling into it */
#listaccordion li
{
list-style-type: none;
display: table-cell;
float: none;
vertical-align: middle;
}
#listaccordion .token-input-list-facebook li {
float: left;
}
#listaccordion li.avatarcolumn
{
width: 40px;
}
#listaccordion li.namecolumn
{
min-width: 150px;
max-width: 200px;
}
#listaccordion ul li:first-child {
width: 45px;
}
#listaccordion ul
{
display: table;
table-layout: fixed;
width: 100%;
padding: 4px;
margin: 0;
}
#listaccordion .panel-heading .accordion-toggle {
padding: 0px;
}
/* used for the name/title column on main accordion lists */
.header16 {
font-size: 16px;
font-weight: bold;
padding-left: 5px;
}
.panel-heading div.header16 {
margin-top: 5px;
margin-bottom: 5px;
}
.accordion-group {
background-color: #ececec;
margin-bottom: 6px;
}
.openaccordioncolumn .btn {
outline: none;
background-color: #ebebeb;
}
.panel-heading.noborder {
border-bottom: none;
}
/* remove default browser focus ring on mouse click, keep keyboard focus visible */
.btn:focus:not(:focus-visible),
.btn:active:focus:not(:focus-visible),
.btn.active:focus:not(:focus-visible),
.btn.focus:not(:focus-visible),
.btn:active.focus:not(:focus-visible),
.btn.active.focus:not(:focus-visible),
a.btn:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.btn:focus-visible,
a.btn:focus-visible {
outline: 2px solid rgba(91, 155, 213, 0.7);
outline-offset: 2px;
border-radius: 3px;
box-shadow: none;
}
/* explicit opt-out class for legacy views where focus styling is intentionally hidden */
.btn.nofocus {
outline: none;
}
/* Chrome 130+ changed -webkit-focus-ring-color rendering so that Bootstrap 3's
outline-offset: -2px now renders as a solid blue box over focused elements (links,
file/radio/checkbox inputs). Suppress on mouse/touch; restore a clean ring for
keyboard navigation. */
a:focus:not(:focus-visible),
input[type="file"]:focus:not(:focus-visible),
input[type="radio"]:focus:not(:focus-visible),
input[type="checkbox"]:focus:not(:focus-visible) {
outline: none;
}
a:focus-visible,
input[type="file"]:focus-visible,
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
outline: 2px solid rgba(91, 155, 213, 0.7);
outline-offset: 2px;
border-radius: 3px;
}
/* round button, currently used for attendance */
.btn.listbtn {
font-size: 20px;
width: 32px;
height: 32px;
padding-right: 6px;
padding-left: 6px;
padding-bottom: 3px;
padding-top: 1px;
border-radius: 3px;
border-style: solid;
color: #000;
border-color: #2f2f2f;
}
.halfopacity {
opacity: 0.5;
}
.btn.listbtn.attendanceindicator {
background-color: #FFF;
color: #C6C6C6;
}
.btn.listbtn.attendanceindicator:hover {
color: #787878;
border-style: solid;
border-color: #999;
border-width: 2px;
}
.btn.listbtn.attendanceindicator.green {
padding-right: 6px;
padding-left: 6px;
color: #FFF;
border-style: none;
background-color: #5FD605;
}
.btn.listbtn.attendanceindicator.green:hover {
border-style: solid;
border-color: #409500;
border-width: 2px;
}
.btn.attendance-all {
margin-bottom: 0;
margin-left: 5px;
margin-right: 10px;
margin-top: 0;
width: 42px;
height: 42px;
color: #000000;
background-color: #FFFFFF;
border-style: solid;
}
.btn.attendance-all.fullyattended {
color: #FFFFFF;
background-color: #5FD605;
border-style: none;
}
.btn.attendance-all:hover {
border-width: 2px;
border-color: #999;
border-style: solid;
}
.btn.attendance-all.fullyattended:hover {
border-width: 2px;
border-color: #409500;
border-style: solid;
}
/* the two countbtn classes are just there to de-buttonfy the waiting list counter button - needs changing for a simple class */
.btn.listbtn.countbtn:hover {
background-color: #FFF;
}
.btn.listbtn.countbtn:active {
box-shadow: none;
border-color: #000;
}
.panelseperator {
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid;
border-color: #DDD;
}
.panel.accordion-look {
border-left-width: 6px;
}
.accordion-look.panel-default > .panel-heading {
padding: 0;
}
.accordion-look .openaccordioncolumn button {
width: 40px;
height: 36px;
}
.accordion-look [class*="col-md"] {
padding-right: 5px;
padding-left: 5px;
}
.accordion-look .tagfield {
text-decoration: none;
}
.accordion-look .tagfield {
text-decoration: none;
}
.accordion-look .tagfield .label.label-default:hover {
background-color: #666;
text-decoration: none;
}
.tagfield {
padding-left: 3px;
margin-bottom: 3px;
}
dd a.tagfield {
padding-left: 0;
padding-right: 3px;
}
.dataTable .tagfield {
display: inline-block;
margin-bottom: 3px;
margin-top: 3px;
}
a.tagfield:hover {
text-decoration: none;
}
a.tagfield > span.label:hover {
opacity: 0.8;
}
.tagtoggle {
cursor: pointer;
}
.cursordefault {
cursor: default;
}
#btnTagSave {
margin-top: 3px;
}
.tagslist .list-group-item .horizontalList {
padding-left: 0;
padding-top: 5px;
padding-bottom: 5px;
}
.fitwidth {
width: 1px;
white-space: nowrap;
}
.inline {
display: inline-block;
*display:inline;/*for IE 7 */
*zoom:1;/*for IE 7 */
vertical-align:top;
}
.accordion-inner .well {
margin-bottom: 2px;
}
.accordion-inner {
padding: 6px 0 0 0;
}
.accordion-inner [class*="span"]{
margin-left: 10px;
}
.panel-heading span.label-danger, .termslist span.label-danger.overdue {
position: absolute;
margin-left: -2px;
margin-top: -6px;
}
/* start bootstrappify file input controls */
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
/* end bootstrappify file input controls */
/* style for labels inside wells that are loaded into terms datatable */
.statswell span.label {
margin-right: 5px;
padding-bottom: 3px;
}
.statswell {
padding-left: 15px;
}
.well.statswell {
margin-bottom: 9px;
}
.well.financewell {
padding-top: 0;
padding-left: 16px;
padding-bottom: 10px;
}
.termslist .well.well-sm.statswell {
border-style: none;
background-color: #fff;
}
/* childrow inserted into datatable */
.dataTable tr.childrow>td {
padding-top: 0;
}
/* pad the well inside a childrow in a datatable */
tr.childrow>td .well.statswell {
margin-top: 9px;
}
/* add border to first and last cell */
.dataTable td:last-child {
border-right: 1px solid #dddddd;
}
.dataTable td:first-child {
border-left: 5px solid #dddddd;
}
.dataTable td.highlight:first-child {
border-left: 5px solid #FF0000;
}
.termslist tr.childrow td {
padding-left: 12px;
padding-bottom: 0px;
}
.termslist .btn.chevron {
border-style: none;
}
.termslist .btn.chevron:hover {
color: #3c3c3c;
}
.termslist .btn-link:hover, .btn-link:focus {
color: #999;
text-decoration: none;
outline: none;
}
/* checkboxes in first table cell - modify padding to make entire cell a large clickable area
https://stackoverflow.com/questions/20223132/fill-a-table-cell-with-input-type-checkbox
*/
.table > tbody > tr > td.checkboxcell {
border-left-width: 6px;
border-left-style: solid;
padding: 0;
}
.table > tbody > tr > td.checkboxcell label {
padding-top: 18px;
padding-bottom: 14px;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 0;
display: block;
}
.table > thead > tr > th.checkboxcell {
padding-left: 6px;
padding-bottom: 0;
padding-right: 0;
}
.table > thead > tr > th.checkboxcell label {
margin-bottom: 0;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
}
.checkboxcell input[type="checkbox"], .checkboxcell input[type="checkbox"] {
width: 1.2em;
height: 1.2em;
}
.largecheckboxes input[type="checkbox"] {
width: 1.2em;
height: 1.2em;
margin-top: 2px;
margin-left: -22px;
}
.extralargecheckboxes input[type="checkbox"] {
width: 1.5em;
height: 1.5em;
margin-top: 2px;
margin-left: -22px;
}
.dataTables_length {
padding-top: 2px;
}
/* override bootstrap border setting which is 2px */
.table > thead > tr > th {
border-bottom: 1px solid #ddd;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 6px;
padding-top: 6px;
}
.table > tbody > tr.toprow > td {
border-top: none;
}
/* datatable footer, used on invoices and reports */
.table.dataTable tfoot tr th {
text-align: right;
}
.vatrow {
font-size: 18px;
padding-top: 5px;
padding-bottom: 0px;
margin-bottom: 0;
margin-top: 0;
}
.vatrow.nettotal {
padding-top: 15px;
}
.vatrow.totalvat {
padding-bottom: 35px;
}
.pagetotal {
font-size: 18px;
padding-top: 15px;
padding-bottom: 5px;
}
.fulltotal {
font-size: 24px;
font-weight: bold;
padding-top: 15px;
padding-bottom: 5px;
}
/* used on members index page, warning triangle */
#membersdatatable i.medicalicon {
position: absolute;
margin-left: -15px;
margin-top: -5px;
}
.nowrap {
white-space: nowrap;
}
/* move accordion inline with normal span[n]s */
.row>.accordion {
margin-left: 20px;
}
/* Added by Paul - not 100% sure this is how you create a style for certain accordions */
.panel-heading-inactive-term {
background-color: #ffffdd;
}
.panel-heading .badge, .termslist .badge {
margin-right: 4px;
margin-left: 10px;
font-size: 16px;
padding-left: 12px;
padding-right: 12px;
padding-top: 8px;
padding-bottom: 8px;
}
.badge.smallbadge.rounded {
color: white;
background-color: #9ca3af;
border: none;
border-radius: 12px;
min-width: 30px;
font-size: 12px;
font-weight: 600;
padding: 5px 10px;
}
.badge.mediumbadge.rounded {
margin-right: 2px;
margin-left: 0px;
font-size: 14px;
padding: 6px 10px;
border-radius: 16px;
background-color: #777;
}
.badge.mediumbadge.rounded.green {
background-color: #5cb85c;
}
.badge.mediumbadge.rounded.orange {
background-color: #f0ad4e;
}
/* used to keep the message send button in groups index a minimum size */
.accordion-inner form button {
min-width: 60px;
}
.accordion-inner span.label {
margin-right: 5px;
padding-bottom: 3px;
margin-bottom: -3px;
}
.accordion-inner h4 {
margin-bottom: 5px;
}
/* messages */
#newmessageeditor {
overflow:scroll;
max-height:450px;
height: 350px;
background-color: white;
border-collapse: separate;
border: 1px solid rgb(204, 204, 204);
padding: 4px;
box-sizing: content-box;
-webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
overflow: scroll;
outline: none;
}
.newmessage-toolbar {
margin-bottom: 6px;
}
.newmessage .panel-footer {
margin-top: 20px;
}
/* horizontal dividers on new message page, make them same color as panel border */
.newmessage .panel hr {
border-color: #ddd;
margin-top: 15px;
margin-bottom: 15px;
}
.newmessage ul.list-group {
margin-bottom: 0;
}
.table.messageactivity > tbody > tr > td:first-child {
padding-left: 2px;
line-height: 1.42857143;
vertical-align: top;
border-top: none;
}
.pointer {
cursor: pointer;
}
/* ------------- CENTERED DIV START ------------
needed to center a div within another, see http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally */
.centeredOuter {
width: 100%;
text-align: center;
}
.centeredInner {
display: inline-block;
}
/* ------------- CENTERED DIV END ------------ */
.centered{
margin: 0 auto;
float: none !important;
}
/* ------------- MODALS START ------------ */
.cancellink {
margin-right: 12px;
}
.remindermodal h4 {
margin-bottom: 12px;
padding-top: 10px;
}
.modal-content label {
font-size: 16px;
}
@media screen and (min-width: 768px) {
/* increase modal size on some pages */
.modal-dialog.large-modal {
width: 700px;
margin: 30px auto;
}
}
/* ------------- MODALS END ------------ */
/* override table padding to use a table row as headers for accordion list */
.memberstable {
margin-bottom: 0px;
}
.toprow.firstlabel {
font-weight: bold;
margin-left: 20px;
}
/* .toprow {
background-color: #F3F3F3;
} */
/* this makes the header row unselectable (avoids blue highlight) when clicked to sort */
table.sortable th {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.dropdownfilter label {
font-weight: normal;
}
.row.filterrow {
margin-top: 25px;
}
.filterrowelement {
padding-bottom: 10px;
}
#invoicesdatatable_wrapper .row.filterrow {
margin-top: 0;
}
select.form-control.dropdown_filter_option {
width: inherit;
display: inline-block;
}
.termsheadercontent h1 {
margin-bottom: 24px;
padding-left: 12px;
}
.termsheadercontent .page-header-row .btn {
margin-top: 30px;
}
.termsheadercontent.termsshowpage .page-header-row .btn {
margin-top: 5px;
}
.teacherinfo {
font-size: 16px;
font-weight: normal;
}
/* give tables contained within a div with class .with-table more top space - see terms show page */
.with-table table {
margin-top: 13px;
}
.dataTable .labelfield {
padding-left: 5px;
line-height: 24px;
}
/* padding for terms label */
.termslistcontainer .dataTable .labelfield {
padding-left: 0;
line-height: 24px;
}
/* padding for members label */
.memberindexpage .dataTable .labelfield {
padding-left: 10px;
line-height: 24px;
margin-left: 42px;
margin-top: 3px;
}
/* vertically center all labels in any datatables */
.table.dataTable td {
vertical-align: middle;
}
.table.dataTable th {
color: #777;
}
.table.dataTable .membercolumn {
min-width: 195px;
}
.control-label.label-grey {
color: #777777;
}
/* custom label colours */
.mmlabel {
display: inline;
padding: .3em .8em .4em;
font-size: 77%;
border-radius: 15px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.22)
}
.col_tags .mmlabel {
display: inline-block;
margin: 2px 4px 2px 0;
}
.label.label-grey {
background-color: #777777;
}
.label.label-blue {
background-color: #5584EE;
}
.label.label-green {
background-color: #259e21;
}
.label.label-orange {
background-color: #FF8100;
}
.label.label-red {
background-color: #AD191D;
}
.label.label-purple {
background-color: #A37CBB;
}
.label.label-black {
background-color: #000000;
}
.label.label-bright-purple {
background-color: #A635EC;
}
.label.label-pink {
background-color: #FF26FF;
}
.label.label-brown {
background-color: #B25901;
}
.label.label-dark-brown {
background-color: #8A4500;
}
.label.label-light-green {
background-color: #20ED06;
}
.label.label-dark-green {
background-color: #03811A;
}
.label.label-dark-blue {
background-color: #0800FF;
}
.label.label-yellow {
background-color: #EBC944;
}
/* system type label styles */
.systemlabel {
display: inline;
padding: .3em .8em .4em;
font-size: 90%;
font-weight: 500;
border-radius: 9999px;
border-width: 1px;
border-style: solid;
cursor: default;
}
.systemlabel.green {
background-color: #effcf3;
border-color: #91c8a5;
color: #268b4a;
}
.systemlabel.orange {
background-color: #fcf6de;
border-color: #f4e9c8;
color: #6c5228;
}
.systemlabel.blue {
background-color: #eff5ff;
border-color: #a6bffa;
color: #2651d5;
}
.systemlabel.red {
background-color: #fdf2f8;
border-color: #f9c2dd;
color: #c54578;
}
.systemlabel.purple {
background-color: #fbf5ff;
border-color: #dec8fd;
color: #8b36d1;
}
.systemlabel.yellow {
background-color: rgba(234, 179, 8, 0.05);
border-color: #ca8a04;
color: #ca8a04;
}
.systemlabel.lightgrey {
background-color: #f5f5f5;
border-color: #dcdcdc;
color: #777777;
}
/* Panel title counter badge */
.panel-title-counter {
color: white;
background-color: #9ca3af;
border: none;
border-radius: 12px;
min-width: 30px;
font-size: 12px;
font-weight: 600;
margin-top: 5px;
padding: 2px 10px;
}
/* Term colour indicator used on dashboard panel table rows */
.term-colour-border {
border-left: 4px solid;
}
.label.outline {
border-style: solid;
border-width: 1px;
}
.label.label-orange.mmlabel.outline {
background-color: #e3903d;
border-color: #FF8100;
}
.label.label-success.mmlabel.outline {
background-color: #24b411;
border-color: #126c06;
}
.avatar-colored {
background: white;
border-radius: 60px;
background-clip: padding-box;
text-align: center;
font-weight: bold;
float: left;
color: white;
}
.avatar-colored.avatar-md {
font-size: 12px;
width: 30px;
height: 30px;
line-height: 32px;
background-size: 30px 30px;
color: white;
}
.avatar-colored.avatar-sm {
font-size: 10px;
width: 20px;
height: 20px;
line-height: 20px;
background-size: 20px 20px;
color: white;
}
.avatar-colored.avatar-lg {
font-size: 36px;
width: 90px;
height: 90px;
line-height: 90px;
background-size: 90px 90px;
color: white;
}
li.token-input-token > p > span.avatar-colored.avatar-sm {
margin-right: 4px;
float: left;
color: white;
}
.reportstable .avatar-colored {
margin-right: 8px;
margin-top: 4px;
}
.reportstable .label {
margin-top: 3px;
margin-right: 3px;
padding-top: 0.2em;
padding-bottom: 0.3em;
display: inline-block;
}
/* for some reason datatables has an !important style that sets a 6px margin on top of the table, this resets it for the reports */
table.reportstable.table-condensed.dataTable {
margin-top: 0 !important;
}
/* the first blue results grouping header does not need top margins */
.reportpage h3.groupedreports:first-of-type {
margin-top: 0;
}
.reportpage .groupedresults {
margin-top: 20px;
}
.reportpage .groupedresults:first-of-type {
margin-top: 0;
}
/* used on terms show page, invoice well */
.avatar-membername {
font-weight: bold;
padding-left: 8px;
line-height: 30px;
}
.avatar-membername-nobold {
padding-left: 8px;
line-height: 30px;
}
#repeatOn .form-group label {
margin-right: 7px;
}
/* overrides for tag manager styles */
.tm-tag {
color: #fff;
background-color: #3887AE;
}
.warningtext {
color: #d9534f;
}
.orangetext {
color: #ffa114;
}
.redtext {
color: #d2322d;
}
.greentext {
color: #47a447;
}
.greytext {
color: #666666;
}
.lightgreytext {
color: #999;
}
.darkgreytext {
color: #3c3c3c;
}
.smalltext {
font-size: small;
}
.mediumtext {
font-size: medium;
}
.lightgreybg {
background-color: #999;
}
.midgreybg {
background-color: #bbbbbb;
}
.greybg {
background-color: #666666;
}
/* ------------- CASE STUDY STYLES START ------------ */
.case-study .well blockquote {
border-left: none;
margin-bottom: 2px;
}
.case-study .casestudylogo {
margin-top: 15px;
margin-bottom: 15px;
}
.case-study .well.quotewell {
margin-top: 30px;
}
.case-study .well.quotewell img {
margin-right: 25px;
}
.case-study .casestudyinterview h4 {
margin-top: 35px;
margin-bottom: 10px;
}
.case-study .actionitem {
text-align: center;
margin-top: 30px;
}
/* ------------- CASE STUDY STYLES END ------------ */
.warning-color {
border-left-color: #d9534f;
}
/* ----------------- MESSENGER OVERRIDES START--------------- */
ul.messenger.messenger-fixed .messenger-message.alert {
margin-bottom: 10px;
}
ul.messenger.messenger-fixed.messenger-on-bottom {
bottom: 0px;
}
ul.messenger.messenger-fixed.messenger-on-bottom.messenger-on-right {
right: 10px;
}
ul.messenger .message-error {
background-color: #d9534f;
color: white;
}
/* ----------------- MESSENGER OVERRIDES END--------------- */
/* export print styles */
.table-font-sm {
font-size: 12px;
}
.exportconfigtable {
margin-bottom: 0;
}
.table.exportconfigtable tr > td {
border-top: 0;
}
/* progress bar styles */
.progress {
background-color: #D8D8D8;
}
.dataTable .progress {
height: 11px;
margin-bottom: 0;
}
/* progress bar on dashboard */
.dashboardwell .progress {
margin-bottom: 5px;
margin-top: 10px;
}
/* this allows loists to sit tight inside a panel but still have content above. The list sits outside the panel body. */
.list-group.panellist {
margin-bottom: 0;
}
.list-group.panellist .list-group-item {
border-width: 1px 0;
border-radius: 0;
margin-bottom: -1px;
}
/* terms progress */
.progressrow {
margin-bottom: 35px;
margin-top: 30px;
}
.progress-justified {
display: table;
width: 100%;
border-collapse: separate;
table-layout: fixed;
}
.progress-justified > div {
display: table-cell;
float: none;
width: 1%;
text-align: center;
}
.progress-justified > div > a.btn {
color: #999;
}
.progress-justified > div > a.btn.active {
color: #428bca;
background-color: #EEEEEE;
box-shadow: none;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.progress-justified > div.bordered.active {
height: 2px;
background-color: #5cb85c;
}
.progress-justified > div.bordered {
height: 2px;
background-color: #d4d4d4;
}
.progress-justified > div.bordered:first-child {
height: 2px;
background-color: #ffffff;
}
.progress-justified > div.bordered:last-child {
height: 2px;
background-color: #ffffff;
}
.progress-justified .circlewrapper {
margin-bottom: -9px;
}
.circlewrapper .circle {
margin-right: auto;
margin-left: auto;
}
.circle {
border-radius: 50%;
width: 16px;
height: 16px;
}
.circlewrapper .circle.greencircle {
background-color: #5cb85c;
margin-top: -9px;
}
.circlewrapper .circle.greycircle {
background-color: #d4d4d4;
margin-top: -9px;
}
.circlewrapper .circle.redcircle {
background-color: #d2322d;
margin-top: -9px;
}
.circlewrapper .circle.orangecircle {
background-color: #FF8100;
margin-top: -9px;
}
.progressrow a.btn.eventbtn {
width: 99%;
min-height: 33px;
background-color: transparent;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.progressrow a.btn.eventbtn:focus {
outline: none;
}
.progressrow a.btn.eventbtn:active {
-webkit-box-shadow: none;
box-shadow: none;
}
.progressrow a.btn.eventbtn:hover {
background-color: #eeeeee;
}
a.btn.eventbtn {
font-size: 12px;
}
/* end terms progress */
/* New Timeline Cards */
.timeline-container {
position: relative;
margin: 15px 0 0 0;
padding-bottom: 0;
}
.timeline-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 15;
width: 40px;
height: 40px;
padding: 0;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.timeline-nav-btn.left {
left: -20px;
}
.timeline-nav-btn.right {
right: -20px;
}
.timeline-nav-btn.hidden {
display: none;
}
.timeline-scroll-wrapper {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
opacity: 0;
transition: opacity 0.2s ease-in;
}
.timeline-scroll-wrapper.ready {
opacity: 1;
}
.timeline-scroll-wrapper::-webkit-scrollbar {
display: none;
}
.timeline-container::before,
.timeline-container::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 60px;
pointer-events: none;
z-index: 10;
opacity: 0;
transition: opacity 0.3s;
}
.timeline-container::before {
left: 0;
background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
.timeline-container::after {
right: 0;
background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
.timeline-container.fade-left::before {
opacity: 1;
}
.timeline-container.fade-right::after {
opacity: 1;
}
.timeline-cards {
display: flex;
gap: 12px;
padding: 10px 0px 8px 10px;
min-width: min-content;
position: relative;
}
/* horizontal line connecting the cards */
.timeline-cards::before {
content: '';
position: absolute;
top: 50%;
left: 25px;
width: var(--line-width, calc(100% - 50px));
height: 4px;
background-color: #ddd;
z-index: 0;
transform: translateY(-50%);
}
.event-card {
flex-shrink: 0;
width: 95px;
border: 4px solid #ddd;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: all 0.2s;
background: white;
margin-left: 0;
margin-right: 0;
position: relative;
z-index: 1;
}
.event-card:not(.event-card-static):hover {
border-color: #767676;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transform: translateY(-2px);
}
.event-card-static {
cursor: default;
}
.event-card.past {
opacity: 1;
transform: scale(0.85);
}
.event-card.active {
border-color: #777777;
border-width: 4px;
box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.15),
0 2px 10px rgba(51, 122, 183, 0.4);
position: relative;
transform: scale(1.05);
margin-left: 13px;
margin-right: 13px;
}
.event-card.active.disabled {
border-color: #d9534f;
}
.event-card.active:hover {
transform: scale(1.05);
}
.event-card-month {
color: #777777;
text-align: center;
padding: 5px 4px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.event-card.past .event-card-month {
color: #a9a9a9;
}
.event-card.past .event-card-day {
color: #cacaca;
}
.event-card.disabled .event-card-month {
background: #d9534f;
color: white;
}
/* .event-card.trial-disabled .event-card-month {
background: #f0ad4e;
color: white;
} */
.event-card.disabled .event-card-count .fa-ban {
margin-top: 2px;
}
.event-card-body {
text-align: center;
background: white;
}
.event-card-day {
font-size: 32px;
font-weight: bold;
line-height: 1;
color: #333333;
margin-bottom: 4px;
margin-top: 4px;
}
.event-card-weekday {
font-size: 11px;
color: #777;
text-transform: uppercase;
margin-bottom: 4px;
margin-top: 4px;
}
.event-card-counts {
display: flex;
justify-content: space-between;
gap: 6px;
margin-top: 6px;
margin-bottom: 0;
}
.event-card-count {
font-weight: 600;
font-size: 10px;
padding: 2px 6px;
border-radius: 10px;
min-width: 22px;
text-align: center;
border: 1px solid;
display: inline-flex;
align-items: center;
gap: 3px;
}
.event-card.active .event-card-counts {
transform: translateY(2px);
}
.event-card .event-card-count.students {
background-color: rgba(21, 128, 61, 0.05);
color: #15803d;
border-style: none;
}
.event-card .event-card-count.trials {
background-color: rgba(249, 115, 22, 0.05);
color: #f97316;
border-style: none;
}
/* Stats pill styling */
.stats-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 15px 25px;
border-radius: 8px;
font-weight: 600;
font-size: 24px;
border: 1px solid;
}
.stats-pill-wrapper {
display: block;
text-align: right;
margin-bottom: 5px;
}
.stats-pill.students-pill {
background-color: #15803d0d;
border-color: #15803d;
color: #15803d;
}
.stats-pill.trials-pill {
background-color: #f973160d;
border-color: #f97316;
color: #f97316;
}
.stats-pill.grey-pill {
background-color: #f5f5f5;
border-color: #6b7280;
color: #374151;
}
/* Connector bracket */
.timeline-connector {
position: relative;
height: 30px;
overflow: visible;
margin-top: -1px;
margin-bottom: -1px;
}
.connector-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(100% + 1px);
pointer-events: none;
z-index: 15;
}
.connector-line {
stroke: #f5f5f5;
stroke-width: 3;
stroke-linecap: round;
}
.connector-border {
stroke: #ddd;
stroke-width: 1;
}
.connector-path {
fill: #f5f5f5;
stroke-linejoin: miter;
stroke-linecap: square;
}
.event-content-area {
border-radius: 4px;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 20px;
background: white;
}
.event-counts-header {
display: inline-block;
margin-left: 15px;
margin-top: 7px;
vertical-align: middle;
}
.event-counts-header .event-card-count {
font-size: 13px;
padding: 4px 10px;
display: inline-block;
margin-right: 8px;
}
.event-card-counts.large {
justify-content: flex-start;
gap: 10px;
margin-top: 10px;
margin-bottom: 6px;
color: #15803d;
}
.event-card-counts.large .event-card-count {
font-size: 16px;
padding: 6px 12px;
display: inline-block;
border-radius: 10px;
border: 1px solid;
}
/* Event Attendance Header Layout
display: flex with justify-content: space-between - Pushes buttons to the right
align-items: center - Vertically centers all items
flex-wrap: nowrap - Keeps everything on one line
gap: 15px - Consistent spacing
*/
.event-attendance-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
flex-wrap: nowrap;
}
/* display: flex with horizontal layout
flex: 1 - Allows it to grow and take available space
min-width: 0 - Prevents flex items from overflowing
*/
.event-attendance-header-left {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: nowrap;
flex: 1;
min-width: 0;
}
/* white-space: nowrap - Prevents text from wrapping to the next line */
.event-attendance-title {
white-space: nowrap;
}
.event-attendance-title.smalltext {
font-size: 16px;
}
.event-attendance-header .event-card-counts {
margin-top: 0;
margin-bottom: 0;
}
.event-card-counts.mobile {
margin-top: 4px;
margin-bottom: 0;
color: #15803d;
}
.event-card-counts.mobile .event-card-count {
padding: 2px 8px;
font-size: 13px;
}
/* End New Timeline Cards */
/* Removal Option Panels */
.removal-option-panel {
border: 2px solid #ddd;
border-radius: 6px;
padding: 10px;
cursor: pointer;
transition: all 0.2s;
}
.removal-option-panel:hover {
border-color: #337ab7;
background: #f0f8ff;
}
.removal-option-panel:has(input:checked) {
border-color: #337ab7;
border-width: 3px;
background: #e6f2ff;
box-shadow: 0 2px 8px rgba(51, 122, 183, 0.2);
}
.removal-option-helper-text {
margin-left: 18px;
margin-top: 5px;
}
.removal-option-label {
display: block;
margin: 0;
cursor: pointer;
width: 100%;
}
.removal-radio {
margin-right: 10px;
cursor: pointer;
}
.removal-option-content {
display: inline-block;
font-size: 16px;
font-weight: normal;
}
.removal-option-bold {
font-weight: bold;
}
/* End Removal Option Panels */
.btn.noborder {
border-width: 0;
}
.btn.noborder:hover {
color: #3c3c3c;
}
.btn.noborder:active {
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-group.open.noborder .dropdown-toggle.noborder {
-webkit-box-shadow: none;
box-shadow: none;
}
.modify-term-container .progressimg {
margin-top: 15px;
margin-bottom: 15px;
margin-left: 10px;
}
.duplicate-term-well {
min-height: 330px;
position: relative;
}
.duplicate-term-well .btn.btn-success {
position: absolute;
left: 10px;
bottom: 10px;
}
#term-duplicate-datestable {
margin-top: 20px;
}
.table > thead > tr > th.rightpad20 {
padding-right: 20px;
}
.width60pc {
width: 60%;
}
.width35pc {
width: 35%;
}
.width80px {
width: 80px;
}
.batchlineitemform label {
line-height: 31px;
}
.circle-icon {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
white-space: nowrap;
vertical-align: middle;
padding:0;
border-radius: 50%;
background-color: #cccccc;
}
.circle40 {
font-size: 18px;
width: 40px;
height: 40px;
line-height: 40px; /* adjust line height to align vertically*/
}
.circle25 {
font-size: 14px;
width: 25px;
height: 25px;
line-height: 25px; /* adjust line height to align vertically*/
}
.circle-primary {
background-color: #337ab7;
color: #FFFFFF;
}
.circle-warning {
background-color: #f0ad4e;
color: #FFFFFF;
}
.circle-feedback {
background-color: #A37CBB;
color: #FFFFFF;
}
.circle-booking {
background-color: #f75c03;
color: #FFFFFF;
}
.circle-danger {
background-color: #d9534f;
color: #FFFFFF;
}
.circle-success {
background-color: #5cb85c;
color: #FFFFFF;
}
.circle-white {
background-color: #FFFFFF;
color: #337ab7;
}
/* fix to get font awesome to align properly over form fields in has-feedback form control */
.fa.form-control-feedback {
line-height: 34px;
}
.form-control-feedback {
color: #626262;
}
.form-control-feedback.redtext {
color: #d2322d;
}
/* sometimes I need a row inside a col- and do not want the -15 margins it sets */
.rowmarginreset {
margin-left: 0;
}
/* hide un-compiled mustache bindings until the Vue instance is ready */
[v-cloak] {
display: none;
}
#advancedsendoptions .checkbox-inline:not(:first-child) {
margin-left: 20px;
}
.disablingPicker .datepicker table tr td.active:active:hover, .datepicker table tr td.active.highlighted:active:hover, .datepicker table tr td.active.active:hover, .datepicker table tr td.active.highlighted.active:hover, .datepicker table tr td.active:active:focus, .datepicker table tr td.active.highlighted:active:focus, .datepicker table tr td.active.active:focus, .datepicker table tr td.active.highlighted.active:focus, .datepicker table tr td.active:active.focus, .datepicker table tr td.active.highlighted:active.focus, .datepicker table tr td.active.active.focus, .datepicker table tr td.active.highlighted.active.focus {
background-color: #d2322d;
color: #ffffff;
border-width: 0;
}
.disablingPicker .datepicker table tr td.active:active, .datepicker table tr td.active.highlighted:active, .datepicker table tr td.active.active, .datepicker table tr td.active.highlighted.active {
color: #ffffff;
background-color: #d2322d;
border-width: 0;
}
.disablingPicker .datepicker table tr td.day:hover {
background-color: #FCE8E7;
}
.disablingPicker .datepicker table tr td.day.active:hover {
background: #d2322d;
}
.disablingPicker .datepicker table tr td, .datepicker table tr th {
border-radius: 15px;
}
.buttonDialogue {
margin-top: 25px;
margin-bottom: 25px;
}
.buttonDialogue .btn {
margin-right: 15px;
margin-left: 15px;
}
/* start divider */
.anv {
position: relative;
font-size: 12px;
line-height: 20px;
text-align: center;
text-transform: uppercase;
}
.anw {
position: relative;
z-index: 2;
display: inline-block;
padding-left: 1em;
padding-right: 1em;
color: #6f7890;
vertical-align: middle;
background-color: #252830;
}
.anx {
margin-top: 0;
margin-bottom: 0;
font-size: 100%;
color: inherit;
}
.anv:before {
position: absolute;
top: 50%;
display: block;
content: "";
width: 100%;
height: 1px;
background-color: #434857;
}
/* end divider */
.dropzone {
border: 2px dashed #0087F7;
padding: 30px;
margin-bottom: 0;
font-size: 20px;
}
/* used on timetable page */
.sectionlink {
font-size: 14px;
margin-left: 10px;
}
/* used when an area contains no data for example no students added yet - call tp action */
.emptydata {
margin-top: 10px;
margin-bottom: 35px;
padding: 10px;
}
/* green panel headers and borders */
.panel.green {
border: none;
border-radius: 10px;
}
.panel.green > .panel-heading {
background-color: #58bb35;
color: #fff;
border-bottom: none;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
text-align: center;
}
.panel.green > .panel-heading > .panel-title {
font-size: 24px;
}
.panel.green .panel-body {
background-color: #ececec;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
padding-top: 25px;
padding-bottom: 30px;
}
.panel.green .panel-body label {
font-size: 16px;
color: #797979;
}
.panel.green .panel-body .form-group {
margin-bottom: 11px;
margin-top: 5px;
}
.input-group.browse .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
background-color: #ffffff;
opacity: 1;
}
.panel.processed-mapping {
background-color: #f8fdf7;
border-color: #58bb35;
}
.panel.processed-mapping .panel-body {
color: #777;
}
/* styling for bootstrap select to remove dropdown styling (ie on terms/show page) */
.bootstrap-select-jumper .dropdown.bootstrap-select .btn.dropdown-toggle {
margin: 0px 0px 0px 5px;
padding: 0;
border-style: none;
font-size: 36px;
font-weight: 500;
}
.bootstrap-select-jumper .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
width: 100%;
}
.minheight50 {
min-height: 50px;
}
.bootstrap-select-jumper .dropdown.bootstrap-select .btn-default:hover {
background-color: #f5f5f5;
}
.bootstrap-select-jumper .btn-default:active, .bootstrap-select-jumper .btn-default.active, .bootstrap-select-jumper .open > .dropdown-toggle.btn-default {
background-color: #f5f5f5;
}
/* we need different font sizes depending on class name length */
.bootstrap-select-jumper.sm .bootstrap-select .filter-option-inner-inner {
font-size: 24px;
margin-top: 6px;
}
/* overrides bootstrap-select style which makes it look as if the control is disabled with nothing selected */
.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.bootstrap-select > .dropdown-toggle.bs-placeholder:active {
color: inherit;
}
.termsheadercontent .bootstrap-select .filter-option-inner-inner {
color: #333;
font-size: 32px;
margin-right: 30px;
}
/* dropdown for class selection on newmessage page, make selected item light green */
.bootstrap-select.btn-group .dropdown-menu li.selected, .bootstrap-select .dropdown-menu li.selected {
background-color: #47a44721;
}
/* reset for modal select (edit class etc) */
.modal .bootstrap-select .filter-option-inner-inner {
font-size: 14px;
}
/* styles for members profile selectpicker to go to next member name */
/*.page-header-row .dropdown.bootstrap-select .btn.dropdown-toggle {
margin-left: 0;
font-weight: bold;
margin-top: -5px;
}*/
.membernames button.btn.dropdown-toggle.btn-default {
border-style: none;
}
#bookingFormManuallySelectTerms .bootstrap-select .dropdown-menu [role="listbox"] ul li a span.text {
max-width: 500px;
width: max-content;
display: inline-block;
word-wrap: break-word;
white-space: normal;
overflow-wrap: break-word;
}
.ddimg-lg {
margin-left:15px;
}
/* alignment for inline checkboxes on creating team member dialogue */
.form-group.access-level .checkbox-inline {
padding-left: 0;
padding-top: 6px;
}
.form-group.access-level .alert.alert-warning {
margin-top: 20px;
}
.fa-layers-counter.success {
background-color: #5cb85c;
}
.fa-layers-counter.warning {
background-color: #f0ad4e;
}
.invoicechart {
min-height: 250px;
}
.floatcontainer {
width: 100%;
overflow: hidden;
}
.floatcontainerleft, .floatcontainerright {
float: left;
width: 40%;
}
.width15pc {
width: 15%;
}
select.btn-mini {
height: auto;
line-height: 14px;
font-weight: bold;
width: 100%;
color: #337ab7;
font-size: 12px;
}
.panel.with-nav-tabs .datefield {
color: #777777;
font-weight: bold;
padding-right: 10px;
}
.panel.with-nav-tabs div.outstanding {
font-size: 12px;
color: #666666;
margin-top: -2px;
}
.panel.with-nav-tabs div.outstanding.text-success {
color: #3c763d;
}
.panel.with-nav-tabs .table > thead > tr > th, .panel.with-nav-tabs .table > tbody > tr > th, .panel.with-nav-tabs .table > tfoot > tr > th, .panel.with-nav-tabs .table > thead > tr > td, .panel.with-nav-tabs .table > tbody > tr > td, .panel.with-nav-tabs .table > tfoot > tr > td {
border-top: none;
}
.panel.with-nav-tabs table {
margin-top: 5px;
margin-bottom: 5px;
}
/* START custom styles for panels with tabs */
.panel.with-nav-tabs{
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.panel.with-nav-tabs .panel-heading{
background-color: transparent;
padding: 0px;
border: none;
}
.panel.with-nav-tabs .panel-heading .nav-tabs li a{
border: 1px solid #ddd;
padding: 10px 15px;
margin-right: 4px;
color: #333;
background-color: #f5f5f5;
}
.panel.with-nav-tabs .panel-heading .nav-tabs li.active a{
background-color: #fff;
border-bottom-color: #fff;
}
/*
JOSH NOTE: This restyling required adding in another div.
mm-panel-main is not a regular part of the bootstrap
structure, I just used it to group the panel-body and
panel-footer together in order to add a border to them
as one.
*/
.panel.with-nav-tabs > .mm-panel-main{
border: 1px solid #ddd;
border-radius: 0px 4px 4px 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
/* END custom styles for panels with tabs */
/* START custom styles for coupon code display */
.coupon-code {
display: inline-block;
padding: 2px 6px;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
font-size: 90%;
font-weight: 600;
border-radius: 4px;
}
.coupon-code.coupon-code-active {
color: #268b4a;
background-color: #effcf3;
}
.coupon-code.coupon-code-inactive {
color: #666666;
background-color: #eeeeee;
}
.coupon-code.coupon-code-lg {
padding: 3px 8px;
font-size: 30px;
font-weight: 500;
}
/* END custom styles for coupon code display */
/* Match the bottom padding other booking form settings panels get from
their submit button's margin-bottom collapsing into the panel-body;
the extra tab-content/tab-pane nesting here blocks that collapse. */
.discount-settings-panel .panel-body {
padding-bottom: 30px;
}
/* Description/amount fields stack on mobile since they only get col-md-*
widths; add a gap between them below the md breakpoint where they stack. */
@media (max-width: 991px) {
.discount-settings-panel .row > .col-md-6 {
margin-bottom: 10px;
}
}
/* Coupon table: fold Status/Discount/Expires/Usage columns into a summary
line under the code/description on mobile, since a 6-column fixed-width
table has no room to lay them out side by side on narrow screens. */
.coupon-table {
table-layout: fixed;
}
@media (max-width: 767px) {
.coupon-table {
table-layout: auto;
}
}
/* Column widths are set here (rather than a ) so that hiding the
whole via hidden-xs also removes these width hints on mobile;
elements don't reliably respond to display:none, which left the
hidden columns still reserving their share of the table's width. */
.coupon-table th.coupon-col-name {
width: 38%;
}
.coupon-table th.coupon-col-status {
width: 14%;
}
.coupon-table th.coupon-col-discount {
width: 12%;
}
.coupon-table th.coupon-col-expires {
width: 12%;
}
.coupon-table th.coupon-col-usage {
width: 10%;
}
.coupon-table th.coupon-col-actions {
width: 14%;
}
.coupon-mobile-view {
display: none;
margin-top: 5px;
color: #777777;
font-size: 12px;
}
@media (max-width: 767px) {
.coupon-mobile-view {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
}
.coupon-mobile-view .label {
white-space: nowrap;
}
.coupon-mobile-view-item {
white-space: nowrap;
}
.coupon-actions {
white-space: nowrap;
}
@media (max-width: 767px) {
.coupon-actions {
width: 1%;
}
}
.dropdown-menu > li > a.text-danger,
.dropdown-menu > li > a.text-danger:hover,
.dropdown-menu > li > a.text-danger:focus {
color: #d9534f;
}
/* START GoCardless flow styles (instant bank pay etc */
.gocardlessflow h3.userprompt {
font-weight: 300;
line-height: 1.5;
}
.gocardlessflow .btn-primary.paybutton {
border-radius: 40px;
background-color: #154BE5;
border-color: #2e6da4;
margin-bottom: 15px;
}
.gocardlessflow .btn-primary.paybutton:hover {
border-radius: 40px;
background-color: #0336C7;
border-color: #2e6da4;
}
/* END GoCardless flow styles (instant bank pay etc */
.disabled-inputs {
pointer-events:none;
}
.confirmationcontainer .form-group.checkboxgroup .checkboxclass {
margin-top: 8px;
}
/* more margin on confirmation page */
.confirmationcontainer div.form-group {
margin-bottom: 15px;
}
/* override for bootstrap 3 to make it show the browser's built-in clear icon for text field's of type='search' */
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
/* horrible typeahead style override
https://stackoverflow.com/questions/27704296/when-changing-typeahead-tt-input-background-color-tt-hint-not-shown
*/
.tagInput.tt-query {
background-color: white !important;
}
/* hide links when printing
https://stackoverflow.com/questions/7301989/need-to-remove-href-values-when-printing-in-chrome
*/
@media print {
a[href]:after {
content: none !important;
}
}
/* enlarge selected radio buttons */
input[type=radio].largeradio {
border: 0px;
width: 100%;
height: 1.2em;
}
.radio label.boldtext, .checkbox label.boldtext {
font-weight: bold;
}
/* bootbox.js style overrides */
.bootbox.modal .modal-dialog.modal-sm {
width: 400px;
}
.bootbox.modal .modal-title {
font-size: 18px;
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
margin-top: 10px;
margin-bottom: 5px;
}
.bootbox.modal .modal-title .danger {
color: #d9534f;
}
.overflow-auto {
overflow: auto;
}
.display-block {
display: block
}
/* locales --------------------- */
.fa-chf:before {
content: 'CHF';
}
/* CHF was overlapping the value that followed */
.fa-chf {
margin-right: 12px;
}
.fa-sfr:before {
content: 'sFr.';
}
.fa-en-in:before {
content: 'Rs.';
}
.fa-za:before {
content: 'R';
}
.fa-pl:before {
content: 'PNL';
}
.fa-ft:before {
content: 'Ft';
}
.fa-zh:before {
content: 'S$';
}
.fa-hk:before {
content: 'HK$';
}
.fa-hk {
margin-right: 8px;
}
.fa-ar:before {
content: 'SAR';
}
.fa-ar {
margin-right: 8px;
}
/* ----------------------------
temporary classes for introducing tailwind
these are the same utility classes as would be used by tailwind, but being included in mm.css with
a prefix of 'mm-tw-' to make it obvious that any of these classes will work with tailwind after the
prefix is removed
---------------------------- */
.mm-tw-relative{
position: relative;
}
.mm-tw-absolute{
position: absolute;
}
.mm-tw-top-\[1px\]{
top: 1px;
}
.mm-tw-top-\[15px\]{
top: 15px;
}
.mm-tw-left-\[15px\]{
left: 15px;
}
.mm-tw-inline-block{
display: inline-block;
}
.mm-tw-flex{
display: flex;
}
.mm-tw-justify-end{
justify-content: flex-end;
}
.mm-tw-items-center{
align-items: center;
}
.mm-tw-grow{
flex-grow: 1;
}
.mm-tw-flex-wrap{
flex-wrap: wrap;
}
.mm-tw-gap-\[2px\]{
gap: 2px;
}
.mm-tw-gap-4{
gap: 1rem;
}
.mm-tw-w-\[19\%\]{
width: 19%;
}
.mm-tw-w-\[56\%\]{
width: 56%;
}
.mm-tw-w-full{
min-width: 100%;
}
.mm-tw-min-w-\[70px\]{
min-width: 70px;
}
.mm-tw-overflow-x-scroll{
overflow-x: scroll;
}
.mm-tw-\[overflow-wrap\:anywhere\]{
overflow-wrap: anywhere;
}
.mm-tw-mt-2{
margin-top: 0.5rem;
}
.mm-tw-mt-0{
margin-top: 0px;
}
.mm-tw-mr-6{
margin-right: 1.5rem;
}
.mm-tw-mr-\[10px\]{
margin-right: 10px;
}
.mm-tw-mb-\[15px\]{
margin-bottom: 15px;
}
.mm-tw-mb-4{
margin-bottom: 1rem;
}
.mm-tw-my-0{
margin-top: 0px;
margin-bottom: 0px;
}
.mm-tw-my-\[10px\]{
margin-top: 10px;
margin-bottom: 10px;
}
.mm-tw-p-0{
padding: 0px;
}
.mm-tw-p-\[15px\]{
padding: 15px;
}
.mm-tw-px-\[5px\]{
padding-left: 5px;
padding-right: 5px;
}
.mm-tw-pt-\[5px\]{
padding-top: 5px;
}
.mm-tw-pt-0{
padding-top: 0px;
}
.mm-tw-pl-\[44px\]{
padding-left: 44px;
}
.mm-tw-py-4{
padding-top: 1rem;
padding-bottom: 1rem;
}
.mm-tw-px-6{
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.mm-tw-pr-0{
padding-right: 0px;
}
.mm-tw-bg-transparent{
background-color: transparent;
}
.mm-tw-bg-white{
background-color: rgb(255, 255, 255);
}
.mm-tw-bg-\[\#f5f5f5\]{
background-color: rgb(245, 245, 245);
}
.mm-tw-bg-\[\#dddddd\]{
background-color: rgb(221, 221, 221);
}
.hover\:mm-tw-bg-\[\#dddddd\]:hover{
background-color: rgb(221, 221, 221);
}
.mm-tw-text-\[\#777777\]{
color: rgb(119, 119, 119);
}
.mm-tw-text-\[\#337ab7\]{
color: rgb(51, 122, 183);
}
.mm-tw-text-\[\#5cb85c\]{
color: rgb(92, 184, 92);
}
.mm-tw-text-\[\#d2322d\]{
color: rgb(210, 50, 45);
}
.hover\:mm-tw-text-\[\#23527c\]:hover{
color: rgb(35, 82, 124);
}
.mm-tw-border-solid{
border-style: solid;
}
.mm-tw-border-\[\#dddddd\]{
border-color: rgb(221, 221, 221);
}
.mm-tw-border-\[0px\]{
border: 0px;
}
.mm-tw-border-x-\[0px\]{
border-left-width: 0px;
border-right-width: 0px;
}
.mm-tw-border-x-\[1px\]{
border-left-width: 1px;
border-right-width: 1px;
}
.mm-tw-border-t-\[1px\]{
border-top-width: 1px;
}
.mm-tw-border-b-\[0px\]{
border-bottom-width: 0px;
}
.mm-tw-border-b-\[1px\]{
border-bottom-width: 1px;
}
.mm-tw-rounded-t-\[4px\]{
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.hover\:mm-tw-underline:hover{
text-decoration: underline;
}
.tabbed-content-tab {
cursor: pointer;
}
/* ----------------------------
override for fontawesome icons, prevents layout shift on some buttons, for example the search icon
---------------------------- */
.fa-fw {
display: inline-block;
line-height: 1;
width: 1.25em;
}
/* ---------------------------- */
.pulse-button {
position: relative;
box-shadow: 0 0 0 0 rgba(92,184,92, 0.7);
background-color: #5cb85c;
background-size:cover;
background-repeat: no-repeat;
cursor: pointer;
-webkit-animation: pulse 1.25s 3 cubic-bezier(0.66, 0, 0, 1);
-moz-animation: pulse 1.25s 3 cubic-bezier(0.66, 0, 0, 1);
-ms-animation: pulse 1.25s 3 cubic-bezier(0.66, 0, 0, 1);
animation: pulse 1.25s 3 cubic-bezier(0.66, 0, 0, 1);
}
.pulse-button:hover
{
-webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none;
}
@-webkit-keyframes pulse {to {box-shadow: 0 0 0 25px rgba(92,184,92, 0);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 25px rgba(92,184,92, 0);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 25px rgba(92,184,92, 0);}}
@keyframes pulse {to {box-shadow: 0 0 0 25px rgba(92,184,92, 0);}}
/* Consent icon selector styles */
.icon-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.icon-option {
position: relative;
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #ddd;
border-radius: 4px;
background-color: #fff;
transition: all 0.2s ease;
}
.icon-option:hover {
border-color: #337ab7;
background-color: #f5f5f5;
}
.icon-option.icon-selected {
border-color: #5cb85c;
background-color: #dff0d8;
}
.icon-wrapper {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.icon-wrapper i {
font-size: 24px;
color: #333;
}
.icon-selected .icon-wrapper i {
color: #5cb85c;
}
/* Layered consent icon: base icon with ban overlay (replaces fa-layers due to FA rendering bug) */
.consent-icon-layered {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.consent-icon-layered .consent-icon-base {
transform: scale(0.65);
position: relative;
z-index: 0;
}
.consent-icon-layered .consent-icon-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.1);
color: #d9534f !important; /* Override .icon-wrapper i which has higher specificity */
z-index: 1;
}
.consent-icon-layered.lg .consent-icon-base {
transform: scale(0.85);
}
.consent-icon-layered.lg .consent-icon-overlay {
transform: translate(-50%, -50%) scale(1.35);
}
.consent-icon-layered.xl .consent-icon-base {
transform: scale(1);
}
.consent-icon-layered.xl .consent-icon-overlay {
transform: translate(-50%, -50%) scale(1.5);
}
.icon-selected .icon-wrapper .consent-icon-overlay {
color: #d9534f;
}
.consent-icon-dropdown .icon-dropdown-btn {
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
text-align: left;
}
.consent-icon-dropdown .icon-dropdown-menu {
width: 100%;
}
.consent-icon-dropdown .icon-dropdown-item {
display: flex !important;
align-items: center;
gap: 15px;
padding: 10px 16px !important;
}
.consent-icon-dropdown .icon-dropdown-selected {
display: inline-flex;
align-items: center;
gap: 15px;
font-weight: 400;
}
/* ==========================================================================
Family billing page (members#billing)
Each member is a row of: member, billable, then a block of mandate rows
(status, created, id, actions). From 992px up the header, rows and mandate
rows all share the one page-level grid, so the columns line up with the
headings. Below that everything stacks.
========================================================================== */
.billing-table .billing-mandates-block .ddimg {
margin-right: 0;
width: 26px;
height: auto;
}
.billing-table .billing-mandate-status-cell {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.billing-table .billing-mandate-created-cell,
.billing-table .billing-mandate-gocardless-id-cell {
white-space: nowrap;
}
/* Bootstrap 3 gives .media-body width: 10000px so it fills the row. In the page grid that
makes the member column's content infinitely wide and it takes all the spare space. */
.billing-table .media-body {
width: auto;
}
/* Stacked: the member, how they are billed and their mandates, one under the other. The
mandate columns are spread across the width and line up within each member. */
@media (max-width: 991px) {
.billing-table .billing-table-row > * + * {
margin-top: 10px;
}
.billing-table .billing-mandates-block {
display: grid;
grid-template-columns: repeat(4, max-content);
justify-content: space-between;
align-items: center;
column-gap: 12px;
row-gap: 6px;
}
.billing-table .billing-mandate-row {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: center;
}
.billing-table .billing-no-mandates-cell {
grid-column: 1 / -1;
}
}
/* Below 576px each mandate is three lines: status with the menu beside it, then created, then
id. Created and id span both columns so a long id does not have to wrap. */
@media (max-width: 575px) {
.billing-table .billing-mandates-block {
display: block;
}
.billing-table .billing-mandate-row {
grid-template-columns: 1fr auto;
grid-template-areas: "status actions" "created created" "id id";
row-gap: 2px;
padding: 6px 0;
}
.billing-table .billing-mandate-row + .billing-mandate-row {
border-top: 1px solid #eee;
}
.billing-table .billing-mandate-status-cell { grid-area: status; }
.billing-table .billing-mandate-actions-cell { grid-area: actions; }
.billing-table .billing-mandate-created-cell { grid-area: created; }
.billing-table .billing-mandate-gocardless-id-cell { grid-area: id; }
}
/* Wide: one six-column grid. Each column is as wide as its content needs (shrinking only
when the page is too narrow) and the spare width is shared out equally between them.
The mandates block takes columns 3-6 as a subgrid, so it sits in the same grid row as the
member and billable cells and they centre against it. Do NOT set justify-content or
column-gap on the block or its rows here: a nested subgrid that sets its own spacing
re-spreads the parent's columns and pushes them away from the headings. */
@media (min-width: 992px) {
.billing-table {
display: grid;
grid-template-columns: repeat(6, minmax(min-content, max-content));
justify-content: space-between;
column-gap: 12px;
}
.billing-table .billing-table-header,
.billing-table .billing-table-rows,
.billing-table .billing-table-row {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: center;
}
.billing-table .billing-mandates-block {
display: grid;
grid-column: 3 / span 4;
grid-template-columns: subgrid;
row-gap: 6px;
align-items: center;
}
.billing-table .billing-mandate-row {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: center;
}
.billing-table .billing-no-mandates-cell {
grid-column: 1 / -1;
}
}
/* Move mandate modal (members#billing): a radio list of the family. The holder of the mandate
being moved is hidden and the recommended person is labelled by members.js. */
.move-mandate-option {
display: flex;
align-items: center;
gap: 12px;
font-weight: normal;
cursor: pointer;
}
.move-mandate-option input {
margin: 0;
}
.move-mandate-option .ddimg {
width: 22px;
height: auto;
margin: 0;
display: block;
}
.move-mandate-option.is-current-holder {
display: none;
}
.move-mandate-option .move-mandate-recommended-label {
display: none;
}
.move-mandate-option.is-recommended .move-mandate-recommended-label {
display: inline;
}
.move-mandate-no-options {
display: none;
}