* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
@font-face {
  font-family: "Barlock";
  src: url("../fonts/Barlock.otf") format("opentype");
}


:root {
     /* colors */
    /* Basingstoke Bison Red #ec2029
    Basingstoke Bison Grey #737377
    Basingstoke Bison Black */
    --primary-color: #A6192E;
    --primary-color-alpha: #A6192E70;
    --accent-color: #737377;
    --accent-color-alpha: #7373777e;
    --accent-color-alpha-dark:#737377e5;
    --secondary-color: #000;
    --secondary-color-alpha: #0000002c;
    /* --white: #FAFAFA; */
    --white: #fff;
    --white-alpha: #fafafa63;
    --white-alpha-15: hsla(0, 0%, 98%, 0.15);
    --pale-grey: #cbd3da;

      /* font-familys */
    /* --rubik: 'Rubik', sans-serif; */
    --rubik: 'Barlock', sans-serif;
    /* --lato: 'Lato', sans-serif; */
    --lato: "novecento-sans", sans-serif;
    --barlock: 'Barlock', sans-serif;
    --novecento-sans: "novecento-sans", sans-serif;
    /* TITLE: Rubik Bold
    SUB TITLE: Rubik Bold
    BODY TEXT: LATO REGULAR
    BUTTON: Rubik Bold */

    /* font-sizes */
    --small: 1rem;
    --body: 1.2rem;
    --heading-00: 12rem;
    --heading-01: 9rem;
    --heading-001: 7.5rem;
    --heading-0: 6rem;
    --heading-1: 4.2rem;
    --heading-2: 3.2rem;
    --heading-25: 2.8rem;
    --heading-3: 2.4rem;
    --heading-35: 2.2rem;
    --heading-4: 1.8rem;
    --heading-5: 1.6rem;
    --heading-6: 1.4rem;
}

/* SCROLLBARS */
/* width */
::-webkit-scrollbar {
  cursor: pointer;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--white);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border: 4px solid var(--accent-color);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
}

html {
    font-size: 62.5%;
    font-family: sans-serif;
    overflow: hidden;
    scroll-behavior: smooth;
}
body {
    font-size: 1.6rem;
    font-family: var(--lato);
}

a {
  text-decoration: none;
  cursor: pointer;
}

.accent-color {
  color: var(--accent-color);
}
.primary-color {
  color: var(--primary-color);
}
.secondary-color {
  color: var(--secondary-color);
}
.white-color {
  color: #fff;
}
.page-container {
    padding: 4rem;
    height: 100vh;
}

.page-flex {
    display: flex;
}

.spacer {
  padding: 1rem;
}

.form-container {
    width: 50%;
    padding: 12rem;
}
.logo-container {
    width: 100%;
    margin-bottom: 4rem;
}

.logo-container img {
    max-width: 150px;
}

.form-side-image-container {
    width: 50%;
    border-radius: 12px;
}

.form-side-image {
    border-radius: 12px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.form-input-container {
    position: relative;
    padding: 1rem 0;
}
.form-input {
    border: 4px solid var(--pale-grey);
    display: flex;
    border-radius: 12px;
    padding: 1.5rem 6rem 1.5rem 2rem ;
    justify-content: space-between;
}
.square-inputs-container {
    display: inline-flex;
    position: relative;
}
.square-input {
    border: 4px solid var(--pale-grey);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.5rem;
    height: 60px;
    width: 60px;
}
.square-input input {
    width: 100%;
    font-size: var(--heading-2);
    text-align: center;
    font-family: var(--rubik);
}
.verify-code-icon {
    position: absolute;
    right: -50px;
    top: 50%;
    transform: translateY(-50%);
}
.verify-code-icon img{
  width: 40px;
}

.input-warning {
    position: absolute;
    top: -4px;
    font-size: var(--body);
    color:  #cc0000;
}

.error {
  font-size: var(--body);
  color: #f34545;
  text-align: left;
  margin: 1rem 0;
}
.fail {
  color: #f34545;
  font-family: var(--lato);
}

#fail-message {
  margin-top: 0.5rem;
  color: #f34545;

}
.input-success {
    position: absolute;
    bottom: -4px;
    font-size: var(--body);
    color:  #1DB954;
}
.success {
    color:  #1DB954;
    font-family: var(--lato);
}
.input-left {
    display: flex;
    width: 90%;
}
.hidden {
    display: none;
}
.input-start-icon {
    width: 30px;
    margin: 0 0.5rem;
}
.input-end-icon {
    width: 25px;
}
.toggle-icon {
    cursor: pointer;
}
.form-input label {
    color: var(--pale-grey);
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}
.form-input label input, .square-input input{
    border: none;
}
.form-input label input:focus, .square-input input:focus{
    border: none;
    outline: none;
}

.form-start-text {
    margin-bottom: 2rem;
}
.form-start-text h1{
    font-family: var(--rubik);
    font-size: var(--heading-1);
}
.form-start-text p{
    font-size: var(--heading-4);
}

.form-extras {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.submit, .form-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 12px;
    padding: 1.5rem 2rem;
    height: 72px;
    font-size: var(--heading-3);
    font-family: var(--lato);
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 250ms ease-in;
}

.submit {
    color: var(--white);
    background-color: var(--primary-color);
    border: 4px solid var(--primary-color);
}
.form-btn {
    color: var(--pale-grey);
    border: 4px solid var(--pale-grey);
    text-decoration: none;
}

.full-width-btn {
    width: 100%;
}
.half-width-btn {
    width: 35%;
    margin-right: 2rem;
}

.form-btns-container {
    display: flex;
}

.submit:hover {
    background-color: var(--secondary-color);
}
.form-btn:hover {
    color:var(--grey);
    border: 4px solid var(--grey);
}

.link {
    color: var(--primary-color);
    cursor: pointer;
}
.link:hover {
    border-bottom: 1px solid var(--primary-color)
}

.active {
  border-bottom: var(--accent-color) solid 2px;
}
.form-message-small {
    font-size: var(--heading-6);
}
/* custom checkbox */
/* Customize the label (the container) */
.checkbox-container {
    display: block;
    position: relative;
    padding-left: 55px;
    /* margin-bottom: 25px; */
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 35px;
  }
  
  /* Hide the browser's default checkbox */
  .checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    width: 40px;
    border: 4px solid var(--pale-grey);
    border-radius: 12px;
  }
  
  /* On mouse-over, add a grey background color */
  .checkbox-container:hover input ~ .checkmark {
    background-color: #ccc;
  }
  
  /* When the checkbox is checked, add a blue background */
  .checkbox-container input:checked ~ .checkmark {
    background-color: var(--primary-color)
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .checkbox-container input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .checkbox-container .checkmark:after {
    left: 10px;
    top: 2px;
    width: 8px;
    height: 18px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  


  .password-strength {
    display: flex;
    width: 100%;
    border: solid 2px var(--pale-grey);
    border-radius: 12px;
    margin-bottom: 1rem;
  }
  
  .color-section {
    flex-grow: 1;
    height: 20px;
    visibility: hidden;
  }
  
  .color-section:nth-child(1) {
    background-color: #e74c3c;
    border-radius: 12px 0 0 12px;
  }
  
  .color-section:nth-child(2) {
    background-color: #f39c12;
  }
  
  .color-section:nth-child(3) {
    background-color: #f1c40f;
  }
  
  .color-section:nth-child(4) {
    background-color: #27ae60;
  }
  
  .color-section:nth-child(5) {
    background-color: var(--primary-color);
    border-radius: 0 12px 12px 0;
  }

  .margin-bottom {
    margin-bottom: 1rem;
  }

  #send-password-reset-btn.disabled-btn {
    background-color: var(--pale-grey);
    cursor: not-allowed;
  }

  .dashboard-container {
    display: flex;
    height: 100vh;
  }
  .dashboard-side-nav-outer {
    height: 100%;
    background-color: var(--primary-color);
    width: 220px;
    border-right: 6px solid var(--accent-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
    position: fixed;
  }
  .dashboard-side-nav {
    padding: 2rem;
  }
  .dashboard-side-menu--logo-container {
    width: 100%;
    margin-bottom: 6rem;
  }
  .dashboard-side-menu--logo {
    max-width: 150px;
  }

  .side-nav--items {
    display: flex;
    flex-direction: column;
    margin: 1rem;
  }

  .side-nav--items span, .side-nav--items a {
    display: block;
    color: var(--white);
    font-family: var(--rubik);
    margin: 1rem 0;;
    font-weight: bold;
    text-decoration: none;
    position: relative;
    cursor: pointer;
  }
  .side-nav--items .grey-link{
    position: relative;
    color: var(--grey-alpha);
  }
  .side-nav--items a{
    position: relative;
  }
  .side-nav--items .grey-link .coming-soon, .side-nav--items a .coming-soon{
    color: var(--secondary-color);
    background-color: var(--accent-color-alpha);
    position: absolute;
    right: -20px;
    width: 60px;
    top: 0;
    transform: translateY(-50%);
    font-size: var(--body);
    padding: 2px;
    text-align: center;
    z-index: 10;
  }

  .side-nav--items a[aria-current="page"] {
    pointer-events: none;
  }
  .side-nav--items a[aria-current="page"]::after {
    position: absolute;
    content: "";
    width: 80px;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    background-color: var(--secondary-color);
  }
  
  .nav-divider {
    padding: 2px;
    background-color: var(--secondary-color);
    margin: 1rem 0;
    width: 60%;
  }
  .side-nav--small-text {
    display: flex;
    flex-direction: column;
    color: var(--white);
    font-size: var(--body);
    font-family: var(--lato);
    margin-top: 3rem;
  }
  .side-nav--small-text p{
  line-height: 1.5;
  }

  .side-nav--small-text img {
    width: 10px;
  }

  .main-dashboard-content, .main-dashboard-content-wider {
    background-color: var(--secondary-color);
    border-left: var(--white) 4px solid;
    min-height: 100vh;
    color: white;
    padding: 8rem;
    flex-grow: 1;
    overflow-y: scroll;
    margin-left: 220px;
  }
  .main-dashboard-content {
    margin-right: 440px;

  }
  .main-dashboard-content h1, .main-dashboard-content-wider h1{
  font-size: var(--heading-1);
  font-family: var(--rubik);
  text-transform: uppercase;
  position: relative;
  }

  .main-dashboard-content-wider h1 a {
    position: absolute;
    right: 0;
    top: 0;
    width: unset;
  }
  .main-dashboard-content h1, h2, p, .main-dashboard-content-wider h2 p {
    margin-bottom: 2rem;
  }
  .main-dashboard-content-wider h1 {
    margin-bottom: 3rem;
  }

  .main-dashboard-content-wider p {
    font-size: var(--heading-4);
  } 

  .side-dashboard-content {
    position: fixed;
    top: 0;
    right: 0;
    width: 440px;
    height: 100%;
    background-color: var(--primary-color);
    padding: 4rem;
    color: var(--white);
    /* border-left: 6px solid var(--accent-color); */
    display: flex;
    justify-content: center;
    align-items: center;
    }

    .side-dashboard-content-inner {
      width: 100%;
    }
  

    .side-dashboard-content h3 {
      font-size: var(--heading-3);
      font-family: var(--lato);
    }

    .side-dashboard-content h4 {
      font-size: var(--heading-5);
      font-family: var(--lato);
    }
  .template-examples-container {
    display: flex;
    margin: 2rem 0 4rem;
  }
  .template-example-container {
    display: flex;
    flex-direction: column-reverse;
    cursor: pointer;
    margin-right: 1.5rem;
    margin-bottom: 2rem;
  }
  .side-by-side-container {
    cursor: pointer;
    padding-left: 30px;
    margin-bottom: 0.5rem;
    
  }


  .template-example-container img {
   width: 180px;
   height: 250px;
  border: 2px solid transparent;

  }
  .template-example-container:hover.template-example-container img {
    border: 2px solid var(--accent-color);
  }

  input[type="radio"]:checked ~ img {
    border: 2px solid var(--accent-color);
  }

  /* custom radio button */
  /* Customize the label (the container) */
.radio-container {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  position: relative;
  /* margin-bottom: 12px; */
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: var(--heading-5);
}

/* Hide the browser's default radio button */
.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.radio {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  height: 20px;
  width: 20px;
  background-color: var(--white);
  border: 2px solid var(--secondary-color);
  border-radius: 50%;
}
.radio-side-by-side {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 20px;
  width: 20px;
  /* background-color: var(--white); */
  border: 2px solid var(--secondary-color);
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio-container:hover input ~ .radio,.radio-container:hover input ~ .radio-side-by-side {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radio-container input:checked ~ .radio {
  background-color: var(--primary-color);
}
.radio-container input:checked ~ .radio-side-by-side {
  background-color: var(--secondary-color);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio:after, .radio-side-by-side::after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-container input:checked ~ .radio:after, .radio-container input:checked ~ .radio-side-by-side:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radio-container .radio:after{
    left: 5px;
    top: 2px;
    width: 2px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .dashboard-input {
    background-color: transparent;
    color: var(--white);
    border: none;
    font-size: var(--heading-5);

  }
  .flex-grow {
    flex-grow: 1;
  }
  .dashboard-input-more-elements {
    width: 90%;
    margin-right: auto;
  }

  textarea {
    width: 100%;
    height: fit-content;
  }
  .dashboard-input:focus {
    outline: none;
  }

  .char-count-container {
    font-size: var(--body);
    color: var(--accent-color);
    margin-left: 20px;
  }
  
  .charCount {
    color: var(--accent-color);
    text-align: right;
    margin-bottom: 1rem;
    margin-right: 4px;
    font-weight: bold;
  }

  .charCount.text-limit {
    color: #e74c3c;
  }
  .char-count-container.text-limit {
    color: #e74c3c;
  }

  .flex-input {
    display: flex;
    justify-content: flex-start;
    align-items: end;
  }

  #news-title, #player-first-name, #player-last-name, #player-height, #player-weight {
    flex-grow: 1;
  }

  .form-divider {
    padding: 2px;
    background-color: var(--primary-color-alpha);
    width: 100%;
    margin: 2rem 0;
  }
  .thin-divider {
    padding: 0.5px;
    background-color: var(--primary-color-alpha);
    width: 100%;
    margin: 2rem 0;
  }

  .password-reset-modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--secondary-color-alpha);
    backdrop-filter: blur(20px);
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
  } 

   .password-reset-modal-inner {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-color: var(--secondary-color);
    width: 50%;
    padding: 4rem;
  }
  .file-drop-area h2, .file-drop-area p {
    text-align: left;
  }
  #drop-area {

  }

  .drop-area {
    border: 4px dashed var(--accent-color);
    width: 600px;
    font-family: sans-serif;
    padding: 5rem;
    margin-bottom: 2rem;
    position: relative;
    text-align: left;
  }
  .drop-area.highlight {
    border-color: var(--primary-color);
  }
  p {
    margin-top: 0;
  }
  .my-form {
    margin-bottom: 10px;
    text-align: center;
  }
  #gallery {
    /* margin-top: 10px; */
    /* background-color: var(--white); */
    /* padding: 1rem; */
  }
  
  .gallery-container, .gallery-container-featured-image, .gallery-container-headshot-image, .gallery-container-sponsor-image {
    background-color: var(--white);
  
    justify-content: space-between;
    align-items: center;
    padding: 0 3rem;
    display: none;
    width: 600px;
    height: 100px;
  }
  .gallery img, .gallery-featured-image img, .gallery-headshot-image img, .gallery-sponsor-image img {
    width: 250px;
    height: 90px;
    object-fit: cover;
    vertical-align: middle;
  }
  .underlined {
   text-decoration: underline;
   cursor: pointer;
  }
  .underlined:hover {
   color: var(--accent-color);
  }
  .button:hover {
    background: #ddd;
  }
  #fileElem, #fileElemFeaturedImage, #fileElemHeadshotImage, #fileElemSponsorImage {
    display: none;
  }
  
  #tick-img {
    display: none;
  }
  
  .tick-img {
    
    width: 50px;
  }

  .custom-file-upload {
    display: flex;
    justify-content: space-between;
    align-items: end;
    cursor: pointer;
    color: var(--grey-alpha);
    position: relative;
  }
  .custom-file-upload img{
   width: 30px;
  }

  .close-img-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
  }

  .close-img-modal img {
    width: 30px;
  }

  .form-options-btns-container, .form-options-btns-container-left {
    display: flex;

  }
  .form-options-btns-container {

    justify-content: center;
  }
  .form-options-btn, .form-options-btn-no-bg, .large-btn, .small-btn, .medium-btn {
    text-transform: uppercase;
    color: var(--secondary-color);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    justify-content:center;
    align-items: center;
    font-family: var(--lato);
    font-weight: 700;
    padding: 0.5rem 1.5rem;
    position: relative;
  }

  .medium-btn.disabled, .large-btn.disabled {
    background-color: grey;
    color: var(--primary-color);
    opacity: 0.5;
    cursor: not-allowed;
  }

  .form-options-btn-no-bg {
    border: #fff solid 2px;
    background-color: transparent;
    color: #fff;
    width: 180px;
    font-size: var(--body);
  }
  .form-options-btn-margin-both {
    margin: 0 1rem;
  }
  .form-options-btn-margin-right {
    margin-right: 1rem;
  }

  .form-options-btn {
    background-color: #fff;
    width: 220px;
    font-size: var(--body);
    padding: 0.75rem 1.5rem;
  }

  .large-btn.btn-margin {
   margin-top: 2rem;
  }

  .large-btn{
    background-color: var(--primary-color);
    width: 100%;
    font-size: var(--heading-3);
    margin-top: 1rem;
  }

  .side-dashboard-content .large-btn {
    background-color:#fff;
  }

  .no-bg-btn-wide {
    width: 100%;
  }
  

  .medium-btn {
    padding: 1rem 2.5rem;
    background-color: var(--primary-color);
    font-size: var(--heading-4);
    margin: 2rem 0;
    display: inline-block;
  }

  .medium-btn.center {
    margin: 1rem auto;
  }

  .small-btn {
    background-color: var(--secondary-color);
    color: #fff;
    width: unset;
    font-size: var(--body);
  }

  .abs-form-btn {
    position: absolute; 
    top: -1rem; 
    left: 0; 
    right: 0; 
    background-color: var(--accent-color);
  }

  .form-options-btn img {
    width: 20px;
   position: absolute;
   left: 8px;
  }

  .side-by-side-flex{
    display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 1rem 0;
  }
  .side-by-side-flex img{
    width: 40px;
  }

  /* MODAL */
  #news-added-modal-container, #password-protected-modal-container, #news-protected-modal-container, #preview-news-added-modal-container, .file-drop-modal, .file-drop-modal-featured-image, .file-drop-modal-headshot-image, .file-drop-modal-sponsor-image {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--secondary-color-alpha);
    backdrop-filter: blur(20px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
  }
  #news-added-modal, #password-protected-modal, #news-protected-modal, #preview-news-added-modal, .file-drop-area {
    background-color: var(--secondary-color);
    color: var(--white);
    padding: 8rem;
    width: 50%;
    position: relative;
  }
  #news-added-modal h2, #preview-news-added-modal h2, #password-protected-modal h2, #news-protected-modal h2 {
   font-family: var(--rubik);
   font-size: var(--heading-2);
  }

#news-protected-modal p span img {
  width: 25px;
  margin-left: 10px;
}

#news-added-modal-text, #preview-news-added-modal-text{
    height: 145px;
    overflow: hidden;
  }
  .alpha-text {
    color: var(--grey-alpha)
  }

  /* on the add news form where buttons are pressed to add an element */
  .addBtnFlex {
    display: flex;
    justify-content: space-between;
  }
  .button-name-input {
    background-color: var(--accent-color);
    padding: 1.5rem;
    color: var(--secondary-color);
    width: 30%;
    text-transform: uppercase;
    text-align: center;
    outline: none;
    border: none;
    border-radius: 6px;
    font-family: var(--lato);
  }
  .button-url-input {
    width: 60%;
    background-color: transparent;
    outline: none;
    border: none;
    color: var(--white);
    font-family: var(--lato);

  }
  .button-name-input:focus,  .button-url-input:focus {
    outline: none;
    border: none;
  }

  .close-modal-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 0.5rem 1.5rem;
    color: var(--secondary-color);
    background-color: #e74c3c;
    border: none;
    text-transform: uppercase;
    border-radius: 6px;
    font-family: var(--rubik);
    font-size: var(--body);
    cursor: pointer;
    transition: transform 250ms ease-in;
  }
  .close-modal-btn:hover {
    transform: scale(1.1);
  }

  .open-gallery-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 50px;
    padding: 0.5rem 1.5rem;
    color: var(--secondary-color);
    background-color: #1DB954;;
    border: none;
    text-transform: uppercase;
    border-radius: 6px;
    font-family: var(--rubik);
    font-size: var(--body);
    cursor: pointer;
  }

  .gallery-heading {
    text-transform: uppercase; font-size: 2.4rem; position: relative; text-align: center; margin-bottom: 2rem; font-weight: bold
  }
  .gallery-close {
    position: absolute; top: 0; right: 10px; cursor:pointer; font-size: 2.4rem
  }
  #headshot-image-gallery, #featured-header-image-gallery, .image-gallery, #sponsor-image-gallery, #news-image-gallery {
    z-index: 1000000;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--secondary-color);
    padding: 4rem;
    overflow-y: scroll;
    display: none;
  }

  .image-gallery-inner {
    width: 100%;
    /* height: 80%; */
    overflow-y: scroll;
    display: flex;
    flex-wrap: wrap;
  }

  .gallery-img {
    margin: 1rem;
    cursor: pointer;
    border-radius: 8px;
    width: 150px; height: 100px;
  }

  .modal-absolute-img {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .sub-menu-link {
    margin-right: 2rem;
    font-family: var(--rubik);
    cursor: pointer;
  }
  
  /* ITEM  */
  .items-container {
    padding: 3rem 0;
    display: flex;
    flex-wrap: wrap;
  }
  .item-outer {
    border-bottom: var(--accent-color) solid 2px;
    width: 33%;
    padding: 3rem 0;
  }
  .item {
    width: 90%;
    position: relative;
    margin: 1rem 1rem 3rem;
    /* padding: 1rem; */
  }

  .item-image {
    width: 100%;
    height: 200px;
    object-fit:cover ;
  }

  .item-image-container {
    position: relative;
  }
  .overlay-fade-up {
    background-image: linear-gradient(to top, var(--secondary-color), transparent);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.item-btn {
  text-transform: uppercase;
  color: var(--secondary-color);
  border: none;
  padding: 0.5rem 1.5rem;
  font-family: var(--lato);
  font-size: var(--body);
  margin-right: 0.5rem;
  border-radius: 6px;
  width: 100px;
  cursor: pointer;
}

.btn-accent {
  background-color: var(--accent-color);
}
.btn-red {
  background-color: #e74c3c;
}


.sub-menu-links {
  margin-top: 2rem;
}

.item-title {
  margin: 1rem 0;
}
.item .item-subtitle, .item-views {
  font-size: var(--small);
  color: var(--accent-color);
  display: flex;
 align-items: center;
}
.item-views img{
  width: 20px;
  margin-right: 5px;
}

.item-further-details {
  display: flex;
  justify-content: space-between;
}

.border {
  border: 4px var(--accent-color) solid;
  padding: 1rem;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 70%;
}

.border label {
  color: var(--grey-alpha);
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  background-color: transparent;
  font-size: var(--small);
}
.border label input{
  color: var(--white);
  background-color: transparent;
  font-size: var(--body);
  border: none;
}
.border label input:focus{
  border: none;
  outline: none;
}

.border div {
  display: flex;
  width: 70%;
}

.border img {
  width: 40px;
  margin-right: 20px;
}
.border img:last-of-type {
  width: 30px;
}

#datetime-label {
  position: relative;
}

#datetime {
  position: absolute;
  top: 0;
  right: 0;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Hide the default radio buttons */
input[type='radio'] {
  display: none;
}

/* Styling for the label */
label.radio-button {
  display: inline-block;
  padding: 5px 20px;
  border: none;
  background-color: var(--accent-color-alpha);
  color: var(--secondary-color);
  font-family: var(--lato);
  cursor: pointer;
  margin: 0;
}

label.radio-button-left {
  border-radius: 6px 0 0 6px;
  margin-right: -2px;
}
label.radio-button-right {
  border-radius: 0 6px 6px 0;
  margin-left: -2px;
}

/* Styling for the checked state */
input[type='radio']:checked + label.radio-button {
  background-color: var(--accent-color);
}

/* Styling for the "left" button */
input[value='left'] + label.radio-button::before {
  content: 'Left ';
}

/* Styling for the "right" button */
input[value='right'] + label.radio-button::before {
  content: 'Right ';
}

.radio-buttons-div {
  display: flex;
  justify-content: space-between;
  margin: 2rem 0;
}

.radio-buttons-div-label {
  text-align: left;
  flex-grow: 1;
  color: var(--grey-alpha)
}

.textarea {
  overflow:hidden; 
  font-family: var(--lato);
}

.deleteBtn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.5rem 1.5rem;
  background-color: #e74c3c;
  border-radius: 6px;
  color: var(--secondary-color);
  text-transform: uppercase;
  font-family: var(--lato);
  font-size: var(--body);
  cursor: pointer;
}

.element-container {
  position: relative;
  display: flex;
}
.accent-text {
  color: var(--accent-color);
  margin: 0 4px;
}

.accent-text-small {
  color: var(--accent-color);
  font-size: var(--heading-6);
  margin-top: 10px;
  display: block;
}

#datetime-text {
  font-size: var(--heading-5);
  font-weight: normal;
}


/* custom select dropdown */
/* The container must be positioned relative: */
.custom-select {
  position: relative;
}

.custom-select select {
  display: none; /*hide original SELECT element: */
}

.select-selected {
  background-color: var(--primary-color);
}

/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}
/* Style the arrow inside the select element: */
.dashboard-select .select-selected:after {
  border-color: var(--accent-color) transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}
.dashboard-select .select-selected.select-arrow-active:after {
  border-color: transparent transparent var(--accent-color) transparent;
}

/* style the items (options), including the selected item: */
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 0.5rem;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  background-color: var(--primary-color);
}

.dashboard-select .select-selected {
  background-color: var(--secondary-color);
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: var(--primary-color);
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}


/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.option-image {
  width: 20px; /* Adjust the size as needed */
  height: 20px;
  margin-right: 8px; /* Add spacing between image and text */
}

.select-items div:hover, .same-as-selected {
  background-color: var(--accent-color);
  color: var(--secondary-color);
}

.key-color {
  height: 10px;
  width: 10px;
  display: inline-block;
  margin: 0 3px 0 6px;
}
.green {
  background-color: #1DB954;
}
.red {
  background-color: #b91d1d;
}
.yellow {
  background-color: #b9ae1d;
}

.filter-container {
  position: relative;
  display: inline;
}

.filter-btn {
  margin-left: 1rem;
  margin-right: 1rem;
  cursor: pointer;
  display: inline;
}
.filter-btn img {
  width: 40px;
}

.filter-modal {
  background-color: var(--secondary-color);
  border: solid 4px var(--accent-color);
  display: flex;
  flex-direction: column;
  padding: 1rem 2rem;
  width: 350px;
  position: absolute;
  display: none;;
  z-index: 100;
  right: -175px;
}

.toggle-modal {
  display: block;
}

/* filter modal checkboxes*/
/* The container */
.filter-radio-container {
  display: block;
  position: relative;
  padding-right: 35px;
  margin: 6px 0;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.filter-radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.toggle-modal .filter-radio {
  position: absolute;
  top: 0;
  right: 0;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  background-color: var(--secondary-color);
  border: var(--accent-color) 4px solid;
}

/* On mouse-over, add a grey background color */
.filter-radio-container:hover input ~ .filter-radio {
  background-color: var(--primary-color);
}

/* When the radio button is checked, add a blue background */
.filter-radio-container input:checked ~ .filter-radio {
  background-color: var(--accent-color)
}
.search-bar-container-flex {
  display: flex; 
  justify-content: space-between;
  align-items: baseline;
}


.search-bar-container {
  display: flex;
  width: 40%;
}

.search-bar-container img{
  width: 40px;

}
.search-bar {
  width: 100%;
  background-color: transparent;
  border: none;
  outline: none;
  border-bottom: 2px solid var(--accent-color);
  color: #fff;
}

.element-container-inner-flex {
  display: flex; 
  justify-content: space-between;
  align-items: flex-start;
}

.span-margin-right {
  margin-right: 2rem;
}

/* PLAYERS FORMS  */
.players-flex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.player {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  align-items:  center;
  text-align: center;
  text-align: center;
  margin: 0 2rem;
  transition: transform 250ms ease-in;
}
.player:hover {
  transform: scale(1.1);
}
.player:hover .player-profile-link::after {
  height: 4px;
}

.player img {
  width: 300px;
  
}
.player-img {
  position: relative;
}
.player-img-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient(to top, 
  rgba(9, 31,48, 1) 0%, 
  rgba(9, 31,48, 1) 5%, 
  rgba(9, 31,48, 0) 15%, 
  rgba(9, 31,48, 0) 40%,
  rgba(9, 31,48, 0) 60%,  
  rgba(9, 31,48, 0) 75.5%, 
  rgba(9, 31,48, 0) 82.85%, 
  rgba(9, 31,48, 0) 88%, 
  rgba(9, 31,48, 0) 100%);
  width: 300px;

}
.player-number {
  background-color: var(--accent-color);
  height: 80px;
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--heading-1);
  color: var(--secondary-color);
  font-family: var(--rubik);
  margin:  0 auto;
  position: relative;
  z-index: 10;
}
.player-info {
  margin-top: -4.5rem;
  color: var(--white);
  z-index: 6;
}

.player-info * {
  margin-bottom: 0.75rem;
}
.player-pos-heading {
  text-transform: uppercase;
  font-family: var(--lato);
  font-size: var(--heading-3);
  color: var(--accent-color)
}
.player-pos-row {
 display: flex; 
 flex-wrap: wrap; 
 margin-bottom: 4rem; 
 padding-bottom: 4rem;  
 border-bottom: 2px solid var(--accent-color-alpha);
}

.player-name {
  text-transform: uppercase;
  font-family: var(--rubik);
  font-size: var(--heading-4);
}
.player-position {
  text-transform: capitalize;
  font-size: var(--heading-6);
}
.player-profile-link {
  text-transform: uppercase;
  font-family: var(--lato);
  position: relative;
  display: inline-block;
  font-size: var(--heading-4);
}

.player-profile-link::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--accent-color);
  left: 0;
  bottom: -5px;
  transition: height 250ms ease-in;
}


/* .mce-content-body {
  background: var(--secondary-color);
  color: var(--white);
} */

.existing-gallery-image-container {
  display: flex;
  justify-content: space-between;
  position: relative;
}
/* SPONSORS PAGES */
.dashboard-sponsor {
  width: 30%;
  margin: 1rem;
  background-color: var(--grey-alpha);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  position: relative;

}

.dashboard-sponsor .row {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 40px;
  height:  40px;
  background-color: var(--accent-color-alpha);
  color: var(--secondary-color);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dashboard-sponsor img {
  width: 100%;
  max-height: 150px;
  object-fit: contain;
  margin: 1rem 0;

}
.dashboard-sponsor h4 {
  text-transform: uppercase;
  color: var(--secondary-color);
}

/* LEAGUE TABLE */

.league-table {
  background-color: var(--secondary-color);
  width: 100%;
  margin: 2rem auto 3rem;
  border-spacing: 0;
  border: 1px solid white;
}
.league-table tr th {
  border: none;
  outline: none;
  border: var(--white) 1px solid;
  border-collapse: collapse;
}
.league-table th {
  background-color: var(--primary-color);
  border: 1px solid white;
  color: var(--secondary-color);
  padding: 1rem;
}
.league-table tr td{
  text-align: center;
  padding: 1rem 0;  
  border-right: 1px solid white;
  border-left: 1px solid white;
}

.league-table tr td:focus {
  background-color: #1DB954;
}
.league-table tr:nth-child(odd){
  background-color: var(--accent-color-alpha);
}
.league-table img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  margin-right: 1rem;
}
.league-table .team-name {
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
}
/* Override the general rule for odd rows */
.league-table tr.bison-row:nth-child(odd) {
  background-color: var(--primary-color-alpha);
}

/* Additional selector to style even rows with the bison-row class */
.league-table tr.bison-row:nth-child(even) {
  background-color: var(--primary-color-alpha); /* Adjust as needed */
}

.league-table input {
  background-color: transparent;
  outline: none;
  border: none;
  border-bottom: 2px var(--accent-color) solid;
  color: var(--white);
  text-align: center;
  font-size: var(--heading-4);
  width: 80px;
}

/* FIXTURES */

.fixture-page--featured-fixture, .fixture-page--fixture {
  background-color: var(--accent-color-alpha);
  padding: 2rem;
  display: flex;
  justify-content: center;
  margin: 1rem auto;
}

.fixture-page--fixture.home-bg {
  background-color: var(--primary-color-alpha);
}

.fixture-page--featured-fixture {
  flex-direction: column;
  align-items: center;
}

.fixture-page--fixture{
  justify-content: space-between;
  padding: 2rem  4rem;
  position: relative;
}

.fixture-page--home-or-away {
  padding: 0.5rem 1rem;
  text-transform: uppercase;
  display: inline-block;
  font-family: var(--rubik);
}

.fixture-page--home {
  background-color: var(--primary-color);
  color: var(--white);
}
.fixture-page--away {
  background-color: var(--secondary-color);
  color: #fff;
}


.fixture-page--season {
 color: var(--white);
 text-transform: uppercase;
 
}
.fixture-page--date {
font-family: var(--lato);
 
}
.fixture-page--featured-fixture-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.fixture-page--featured-fixture-date,  .fixture-page--featured-fixture-venue {
  text-transform: uppercase;
  font-size: var(--heading-3);
  margin-bottom: 1rem;
  font-family: var(--lato);
}
.fixture-page--featured-fixture-venue {
  color: var(--white);
}
.fixture-page--featured-fixture-date {
  color: var(--accent-color);
  
}
.fixture-page--fixture-info-left  {
  display: flex;
  flex-direction: column;
 align-items: flex-start;
  width: 25%;
}
.fixture-page--fixture-info-left * {
  margin-bottom: 0.5rem;
}
.fixture-page--fixture-vs, .fixture-page--featured-fixture-vs, .home-page--fixture-vs {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
}

.home-page--fixture-vs .vs {
  font-size: var(--heading-3);
  font-family: var(--rubik);
}

.fixture-page--result-vs{
  margin-right: 25%;
}
.fixture-page--featured-fixture-vs {
  margin-bottom: 1rem;
}
.fixture-page--fixture-vs img {
  width: 100px;
  max-height: 100px;
  object-fit: contain;
  margin:  0 2rem;
}
.home-page--fixture-vs img {
  width: 150px;
  max-height: 150px;
  object-fit: contain;
  margin:  0 2rem;
}
.fixture-page--featured-fixture-vs img {
  width: 120px;
  margin:  0 2rem;
}
.fixture-page--featured-fixture a {
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: var(--heading-4);
 text-transform: uppercase;
 font-family: var(--lato);
 text-decoration: underline;
 color: var(--white);
 pointer-events: all;
}

.fixture-page--featured-fixture .fixture-page--button-secondary {
  padding: 0 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-size: var(--body);
  color: var(--secondary-color);
  background-color: var(--white);
  margin: 0.5rem 0;
  width: auto;
  text-decoration: none;
}
.fixture-page--featured-fixture .fixture-page--button-secondary  img {
  width: 30px;
  margin-right: 10px;
}
.fixture-page--featured-fixture a img {
  width: 40px;
  margin-right: 10px;
}
.fixture-page--fixture-vs span,.fixture-page--featured-fixture-vs span {
  font-size: var(--heading-3);
  font-family: var(--rubik)
}
.fixture-page--button-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 25%;
}

.fixture-page--button-container a {
  font-family: var(--lato);
}
.fixture-page--button {
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-size: var(--body);
  color: var(--primary-color);
  background-color: #fff;
  margin: auto 0;
  width: 160px;
  height: 50px;
  font-family: var(--lato);
  cursor: pointer;
}
.fixture-page--button-secondary {
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-size: var(--body);
  color: var(--secondary-color);
  background-color: var(--white);
  margin: 0.5rem 0;
  width: 160px;
}
.fixture-page--button-grey {
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-size: var(--body);
  color: var(--white-alpha);
  border: 2px  var(--white-alpha) solid;
  text-align: center;
}


.fixture-page--button img,  .fixture-page--button-secondary img {
  width: 20px;
  margin-right: 0.5rem;
}
.fixture-page--featured-fixture-vs-schedule {
  display: flex;
  align-items: center;
}

.fixture-page--featured-fixture-date-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 4px;
}

.fixture-page--featured-fixture-vs .fixture-page--featured-fixture-date-number {
  color: var(--accent-color);
  font-size: var(--heading-2);
  font-family: var(--rubik);
}
.fixture-page--featured-fixture-vs .fixture-page--featured-fixture-date-word {
  color: var(--accent-color);
  font-size: var(--body);
  font-family: var(--lato);
}
.fixture-page--featured-fixture-vs .fixture-page--featured-fixture-vs-schedule-colon {
  font-size: var(--heading-2);
  font-family: var(--rubik);
  color: var(--accent-color);
  margin: 0 4px;
}
.fixture-page--fixture-vs-score {
  color: var(--accent-color);
  font-size: var(--heading-2);
  font-family: var(--rubik);
}
.fixture-page--fixture-vs-score *{
  margin: 0 4px;
}
.fixture-page--fixture-end-deco {
  background-color: var(--accent-color);
  color: var(--secondary-color);
  text-transform: uppercase;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  writing-mode:vertical-rl;
  padding: 0 10px;
  font-family: var(--lato);
  text-align: center;
  pointer-events: all;
}
.fixture-page--fixture-end-deco.link-disabled {
  background-color: var(--white-alpha-15);
  color: var(--secondary-color-alpha);
  cursor: not-allowed;
  pointer-events: none;
  display: none;
}
.form-input-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
  margin-right: 1rem;
}

.flex-input-logo {
  display: flex;
 align-items: center;
 margin-bottom: 1rem;
}

#image-gallery {
  display: none;
}

.side-nav--small-text #imp-logo {
  width: 60px;
}

.ticket-prices-table {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.ticket-prices-table * {
  flex: 1;
}

.ticket-prices-table input, .ticket-prices-table p {
  display: block;
  width: 100%;
 
  padding: 1rem;

  margin-bottom: 1rem;
}

.ticket-prices-table input {
  border-radius: 1rem;
  background-color: transparent;
  border: var(--accent-color) 2px solid;
  color: #fff;
  text-align: right;
}
.ticket-prices-table h3 {
  margin-bottom: 1rem;
}

#ticket-price-error.error {
  font-size: var(--heading-5);
  font-weight: bold;
}

.display-current-img {
  width: 100%;
  max-width: 450px;
}