/* NOTE: blues-root or blues-root-spechiddenial will define our colours... */

html {
  overflow:                   hidden;
  width:                      100%;
  height:                     -webkit-fill-available;
}

body {
  height:                     100vh;
  min-height:                 100vh;
  min-height:                 -webkit-fill-available;

  display:                    flex;
  flex-direction:             column;
  justify-content:            center;
  -webkit-overflow-scrolling: touch;

  font-family:                Arial;

}

::-webkit-scrollbar {
  width:                      16px;
}
::-webkit-scrollbar-track {
  border-radius:              var(--border-radius);
  /*  background:                 var(--club-primary-color); */
}
::-webkit-scrollbar-thumb {
  border-radius:              var(--border-radius);
  /*  background-color:           var(--club-highlight-color); */
}

.centerh-items {
  display:                    grid;
  place-items:                center;
}

.center-flex {
  display:                    -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display:                    -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display:                    -ms-flexbox;      /* TWEENER - IE 10 */
  display:                    -webkit-flex;     /* NEW - Chrome */
  display:                    flex;
  align-items:                center;
  justify-content:            center;
}

.page-view {
  position:                   relative;
/*  margin:                     0 auto; */
  overflow-y:                 initial;
  overflow-x:                 hidden;
  height:                     100vh;
  min-height:                 100vh;

  /* grid container settings */
  display:                    grid;
  grid-template-columns:      1fr;
  grid-template-rows:         auto 1fr auto;
  grid-template-areas:
  'header'
  'content'
  'footer';
}

.header-section,
.content-section,
.main-content,
.footer-section {
  -webkit-box-sizing:     border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing:        border-box;    /* Firefox, other Gecko */
  box-sizing:             border-box;         /* Opera/IE 8+ */

  height:                 100%;
  min-height:             100%;
  max-height:             100%;
  width:                  100%;
}

.header-section {
  grid-area:                  header;
}

@media (max-width: 767px) {
  .header-section {
    padding:              0 0 0.25rem 0;
    margin:               0 !important;
  }
}

.content-section {
  overflow-y:             auto;
  overflow-x:             hidden;
  scrollbar-gutter:       initial;
  padding:                0 1rem 0 1rem;

  grid-area:              content;
}

@media (max-width: 767px) {
  .content-section {
    padding:              0 0 0.25rem 0 !important;
    margin:               0 0 0.25rem 0 !important;
  }
}

.footer-section {
  white-space:                nowrap;
  overflow:                   hidden;

  -ms-overflow-style:         -ms-autohiding-scrollbar;
  /* For WebKit implementations, provide inertia scrolling */
  -webkit-overflow-scrolling: touch;

  grid-area:                  footer;
}
/*
@media (max-width: 767px) {
  .footer-section {
    display:                  none;
  }
}
*/
 /* Remove the default scrollbar for WebKit implementations */
.footer-section::-webkit-scrollbar {
  display:                    none;
}

.modal-form-content .page-view-inner-no-header,
.modal-form-content .page-view-inner-no-footer {
  height:                     65vh !important;
  overflow-x:                 hidden !important;
  overflow-y:                 auto !important;
}

.page-view-inner,
.page-view-inner-no-header,
.page-view-inner-no-footer {
  position:                   relative;
/*  margin:                     0 auto; */
  overflow-y:                 initial !important;
  overflow-x:                 hidden;
  height:                     100%;
  width:                      100%;

  /* grid container settings */
  display:                    grid;
  grid-template-columns:      1fr;
}

.page-view-inner {
  grid-template-rows:         auto 1fr auto;
  grid-template-areas:
  'inner-header'
  'inner-content'
  'inner-footer';
}

.page-view-inner-no-header {
  grid-template-rows:         1fr auto;
  grid-template-areas:
  'inner-content'
  'inner-footer';
}

.page-view-inner-no-footer {
  grid-template-rows:         auto 1fr;
  grid-template-areas:
  'inner-header'
  'inner-content';
}

.page-view-inner-header-section,
.page-view-inner-content-section,
.page-view-inner-footer-section {
  -webkit-box-sizing:         border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing:            border-box;    /* Firefox, other Gecko */
  box-sizing:                 border-box;         /* Opera/IE 8+ */

  height:                     100%;
  min-height:                 100%;
  max-height:                 100%;
  width:                      100%;
}

.page-view-inner-content-section {
  overflow-y:                 auto;
  overflow-x:                 hidden;
  scrollbar-gutter:           initial;
  padding:                    0;

  grid-area:                  inner-content;
}

.page-view-inner-footer-section {
  white-space:                nowrap;
  overflow:                   hidden;

  -ms-overflow-style:         -ms-autohiding-scrollbar;
  /* For WebKit implementations, provide inertia scrolling */
  -webkit-overflow-scrolling: touch;
}

.page-view-inner-header-section {
  grid-area:                  inner-header;
}

.page-view-inner-footer-section {  
  grid-area:                  inner-footer;
}

.navbar-brand,
.navbar-primary,
.dropdown-item,
.dropdown-menu {
    background-color: var(--club-primary-color) !important;
    color: #fff !important;
}

.dropdown-header,
.dropdown-divider {
  color: var(--club-secondary-color) !important;
}

.nav-item,
.nav-link,
.dropdown-item {
    background-color: var(--club-primary-color) !important;
    color: #fff !important;
    font-size: larger;
}

.nav-item.active,
.nav-link.active,
.dropdown-item.active {
    background-color: var(--club-highlight-color) !important;
    color: #fff !important;
}

.nav-item:hover,
.nav-link:hover,
a.dropdown-item:hover {
    background-color: var(--club-highlight-color) !important;
    color: #fff !important;
}

a.no-underline {
  text-decoration: none;
}

form {
	padding: 10px 0;
}

.row {
	margin-top:10px;
	margin-bottom: 10px;
}

.row>h1 {
	display: inline;
}

ul.clubRegIncludes {
  list-style:  circle;
}

.form-content {
  padding: 25px 25px 30px 25px;
  background-color: var(--form-content);
  border: 1px solid var(--club-highlight-color) !important;
  text-align: left;
  transition: all .4s ease-in-out;
}

.form-content:hover {
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

form .form-content .input-error {
  border-color: var(--club-primary-color);
  color: var(--form-error);
}

.btn-primary {
  background-color: var(--club-primary-color) !important;
  color: #fff;
}

.event-game {
  background-color: var(--club-secondary-color) !important;
  color: #fff;
}

.event-game .fc-daygrid-event-dot,
.event-game .fc-list-event-dot {
  background-color: var(--club-primary-color) !important;
  border-color:     var(--club-primary-color) !important;
}

.event-game:hover {
  background-color: var(--club-highlight-color) !important;
  color:            #ffffff !important;
}

.event-fixture {
  background-color: var(--club-primary-color) !important;
  color: #fff;
}

.event-fixture .fc-daygrid-event-dot,
.event-fixture .fc-list-event-dot {
  background-color: var(--club-secondary-color) !important;
  border-color:     var(--club-secondary-color) !important;
}

.event-fixture:hover {
  background-color: var(--club-highlight-color) !important;
  color:            #ffffff !important;
}

.badge.bg-info,
.event-training {
  background-color: var(--club-highlight-color) !important;
  color:          #fff;
}

.event-training .fc-daygrid-event-dot,
.event-training .fc-list-event-dot {
  background-color: var(--club-primary-color) !important;
  color:            var(--club-primary-color) !important;
}

.event-training:hover {
  background-color: var(--club-secondary-color) !important;
  color:            #ffffff !important;
}

.event-other {
  background-color: orange !important;
  color: #fff;
}

.event-other .fc-daygrid-event-dot,
.event-other .fc-list-event-dot {
  background-color: orange !important;
  border-color:     red !important;
}

.event-other:hover {
  background-color: var(--club-highlight-color) !important;
  color:            #ffffff !important;
}

.btn-secondary {
	background-color: var(--club-secondary-color) !important;
  color: #fff;
}

.event-training .fc-daygrid-event-dot,
.event-training .fc-list-event-dot {
  background-color: var(--club-primary-color) !important;
  border-color:     var(--club-primary-color) !important;
}

.fc-button.fc-button-primary {
    background-color: var(--club-primary-color) !important;
    color: #fff !important;
}

.fc-button.fc-button-primary.fc-button-active {
    background-color: var(--club-highlight-color) !important;
    color: #fff !important;
}

a.active {
	background-color: var(--club-highlight-color) !important;
	color: #fff !important;
}

button:hover {
	background-color: var(--club-highlight-color) !important;
	color: var(--club-secondary-color) !important;
}

button:hover.active {
	background-color: var(--club-highlight-color) !important;
	color: var(--club-secondary-color) !important;
}

.progress-bar.animate {
	width: 100%;
}

.roundedImage {
	border-radius: 30px;
	vertical-align: middle;
}

.page-title,
.page-title-alt {
	font-size:      2.5em;
	font-weight:    bold;
}

.post-title,
.post-title-alt {
	font-size:      2.0em;
	font-weight:    700;
}

.page-title, .post-title {
	color:          var(--club-primary-color);
}

.page-title-alt, .post-title-alt {
	color:          var(--club-secondary-color);
}

.post-excerpt {
  text-align:     justify;
  text-justify:   inter-word;
  color:          var(--post-excerpt);
  font-size:      16px;
}

.post-content {
	text-align:     justify;
	color:          var(--post-content);
  font-size:      1.2em;
}

.error-highlight {
  color:        red;
  font-weight:    bold;
}

.post-sub-title,
.post-sub-title-alt {
  font-size:      1.5em;
	font-weight:    700;
}

.post-sub-title {
	color:          var(--club-secondary-color);
}

.post-sub-title-alt {
	color:          var(--club-primary-color);
}

p {
	margin-bottom: 10px;
} 

a[disabled], a[disabled]:hover {
  pointer-events: none;
  color: grey !important;
}

.table tr {
  transition: background 0.2s ease-in;
}

.table tr:nth-child(even) {
  background: var(--club-primary-color);
  color: #fff;
}

.table tr:nth-child(even) a {
  color: #fff;
}

.table tr:hover {
  background: var(--club-highlight-color);
  cursor: pointer;
}

.table tr:nth-child(odd) a:hover i {
  background: var(--club-secondary-color);
  cursor: pointer;
}

.regTitle {
  background-color: var(--club-primary-color);
  color: #fff;
  padding: 5px;
  line-height: 1.0em;
  font-size: 1.0em;
}
    
.regHeader {
  text-align: left;
  background-color: var(--club-secondary-color) !important;
  color: #fff !important;
  padding: 10px;
  font-size: 15px;
}

@media (min-width: 1023px) {
  .mobile-only {
    display: none !important;
  }
}

@media (max-width: 1023px) {
	.hide-col-mobile {
		display: none !important;
	}
  
  .mobile-top-padding {
    padding-top: 5px;
  }
}

.row.regHeader, .row.regTitle {
  margin-top: 0px;
  margin-bottom: 0px;
}
      
input.currency, label.currency {
  text-align: right;
  padding-right: 15px;
  float: right;
}

label.tabular {
  text-align: left;
  float: left;
}

article h1 {
  font-size: 2.5em;
  font-family: sans-serif;
  font-weight: 500;
  color: var(--post-article);  
}

.center,
.center-space-around {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  vertical-align:   middle;
}

.center {
  justify-content:  center;
}

.center-space-around {
  justify-content:  space-around;
}

.app-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  opacity: 0.5;
  background-color: var(--club-secondary-color);
}

.app-loading .logo {
  width: 140px;
  height: 140px;
}
  
.app-loading .spinner {
  height: 200px;
  width: 200px;
  animation: rotate 2s linear infinite;
  transform-origin: center center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.app-loading .spinner .path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite;
  stroke-linecap: round;
  stroke: var(--club-highlight-color);
}

.accordion-button.btn-primary {
  color:            #ffffff;
  background-color: var(--site-primary-color);
  box-shadow:       none;
}

.accordion-button.btn-secondary {
  color:            #ffffff;
  background-color: var(--site-secondary-color);
  box-shadow:       none;
  padding:          0;
}

.back-clublogo {
  position:             relative;
  height:               100%;
}

.back-clublogo::before {
  content:              "";
  position:             absolute;
  top:                  0;
  left:                 0;
  right:                0;
  bottom:               0;
  background-color:     var(--club-highlight-color);
  background-size:      128px;
  opacity:              0.05;
}

.img-large {
  width:                256px;
  height:               128px;
}

.img-medium {
  width:                128px;
  height:               64px;
}

.img-small {
  width:                64px;
  height:               32px;
}

.bannerCollapse:hover {
  background-color: var(--club-highlight-color) !important;
  color:            var(--club-secondary-color) !important;
}

.bannerCollapse {
  justify-content:  space-between;
  display:          inline-flex;
  flex-direction:   row;
  align-items:      center;
  vertical-align:   middle;
}

.collapse-icon::before {
  font:             var(--fa-font-solid);    
  content:          '\f077';
}

.bannerCollapse.collapsed .collapse-icon::before {
  content:          '\f078';
}

.toolbar-flex,
.toolbar-flex-between {
  display:          inline-flex;
  flex-direction:   row;
  align-items:      center;
  vertical-align:   middle;
  padding:          10px 0;
}

.toolbar-flex {
  justify-content:  space-around;
}

.toolbar-flex-between {
  justify-content:  space-between;
}

.calendar-list-venue:hover a {
  color:          var(--club-primary-color);
}

.calendar-list-item-content.hide-event {
  display:        none;
}

@media (max-width: 767px) {
  .img-large,
  .img-medium,
  .img-small {
    width:          64px;
    height:         32px;
  }

  .post-title,
  .post-title-alt {
	  font-size:      1.0em;
  }
  
  .page-title,
  .page-title-alt {
    font-size:      1.5em;
  }

  .post-excerpt,
  .post-content {
    font-size:      14px;
  }
    
  .post-sub-title,
  .post-sub-title-alt {
    font-size:      1.2em;
  }
  
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
  
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}