/******************************************************************************************************
  GENERAL SITE STYLING
******************************************************************************************************/

.ts3-profile-container-web {
  margin: auto !important;
  width: 100%;
}

.ts3-form-field {
  width: 100%;
  max-width: 500px;
  margin-top: 5px;
}

.ts3-fica-registration-dialog {
  width: 85%;
  max-width: 400px !important;
}

.ts3-fica-upload-dialog {
  max-width: 100% !important;
  height: 100% !important;
}

.ts3-fica-reg-popup-body-txt {
  margin-top: 5px;
  margin-bottom: 5px;
  width: 50% !important;
  height: 80% !important;
}

.ts3-fica-reg-popup-buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-top: 5px;
}

.ts3-fica-reg-popup-container {
  display: flex;
  flex-direction: column;
  height: 100% !important;
  width: 100% !important;
}

/******************************************************************************************************
   Responsive Spacing
******************************************************************************************************/
/*  WEB  */
@media only screen and (min-width: 1200px) {
  .ts3-terms {
    position: inherit !important;
  }
  .ts3-profile-container {
    max-width: 1400px !important;
    padding-bottom: 0px !important;
    height: auto !important;
    top: 31px;
    position: relative;
  }
  .ts3-fica-container {
    padding-right: 90px;
    padding-left: 90px;
  }

  .ts3-buttons-container {
    float: right !important;
  }

  .ts3-buttons-container button {
    margin: 6px !important;
  }

  .ts3-footer-container {
    width: 80%;
  }

  .ts3-search-input {
    width: 320px !important;
  }
}

/* LAPTOP MAX SIZE */
@media only screen and (max-width: 1024px) {
  .ts3-profile-container {
    height: auto !important;
    padding-bottom: 20px !important;
    top: 31px;
    position: relative;
  }

  .ts3-draws {
    padding-top: 0px !important;
  }
}

@media only screen and (max-width: 1562px) and (min-width: 1242px) {
  .ts3-top-nav-inner {
    width: 96% !important;
  }

  .ts3-global-grid-container {
    max-width: 100% !important;
  }

  .ts3-sub-topnav-container {
    padding-left: 18px !important;
  }

  .ts3-clock {
    margin-right: 19px;
  }
  .ts3-footer-container {
    width: 80%;
  }
}

/*  MOBILE  small */
@media only screen and (max-width: 550px) {
  .ts3-secondary-topnav {
    justify-content: center !important;
    min-height: auto !important;
  }

  .ts3-market-container > .ts3-market-name {
    font-size: 12px !important;
  }

  .ts3-search-container {
    position: static !important;
    right: auto !important;
    top: auto !important;
  }

  .ts3-page-not-found {
    max-width: 280px;
  }

  .ts3-fixture-container > div.ts3-fixture-details,
  .ts3-fixture-details-spacer {
    flex-shrink: 2 !important;
  }

  .ts3-self-exclusion-container-info {
    flex-direction: column;
  }

  .ts3-sports-wrapper {
    display: block !important;
  }

  .ts3-side-menu-toggle-container {
    bottom: 50px !important;
  }

  .ts3-quickbet-item {
    max-width: none !important;
  }

  .ts3-quickbet-item:last-child {
    padding-bottom: 34px;
  }

  .ts3-full-width-container {
    background-color: #fff !important;
  }

  .ts3-draws {
    padding-left: 0px;
    display: unset !important;
  }

  .ts3-draws-column {
    width: 100%;
    max-width: 100% !important;
  }

  .ts3-draw-component {
    max-width: none !important;
  }

  .ts3-numbers-item {
    width: 40px !important;
    margin: 2.5px !important;
    height: 40px !important;
  }

  .ts3-add-button {
    width: 93.5px !important;
    margin-right: 2.5px !important;
    height: 40px !important;
  }

  .ts3-bottom-menu-container {
    max-width: none !important;
    position: fixed;
  }

  .ts3-profile-container {
    padding-bottom: 65px !important;
    top: 31px;
    position: relative;
  }
}

@media only screen and (min-width: 960px) {
  .ts3-punter-reg-dialog {
    width: 500px !important;
    border: 2px solid rgb(var(--auth-border-colour));
    border-radius: 4px;
  }

  .ts3-punter-help-dialog {
    width: 500px !important;
    max-height: 800px !important;
    margin-top: 100px !important;
  }

  .ts3-static-page-modal {
    width: 1200px !important;
    max-height: 700px !important;
    margin-top: 100px !important;
  }

  .ts3-punter-login-dialog {
    width: 500px !important;
    border: 2px solid rgb(var(--auth-border-colour));
    border-radius: 4px;
  }

  .ts3-full-height-betslip {
    height: auto !important;
  }

  .ts3-bet-groups {
    max-height: 350px !important;
  }

  .ts3-draw-button-custom {
    margin: 0px 4px 0px 5px !important;
  }

  /*login pop-up*/
  .ts3-punter-login-dialog .ts3-social-login,
  .ts3-punter-login-dialog .ts3-login-form,
  .ts3-punter-login-dialog .ts3-or {
    margin-top: 25px !important;
    margin-bottom: 25px;
  }

  .ts3-modal-footer-reset {
    padding: 10px 30px 0px 30px !important;
  }
  .ts3-modal-body-reset {
    padding: 10px 30px 0px 30px !important;
  }
  .ts3-modal-text-reset {
    text-align: center;
    padding: 10px 30px 0px 30px !important;
  }
  .ts3-terms {
    position: inherit !important;
  }
}

/* TABLET  LANDSCAPE */
@media only screen and (min-width: 960px) and (max-height: 850px) {
  .ts3-static-page-modal {
    width: 70% !important;
    max-height: 600px !important;
    margin-top: 80px !important;
  }
}

/*  TABLET  */
@media only screen and (min-width: 600px) and (max-width: 959px) {
  .ts3-secondary-topnav {
    justify-content: center !important;
  }

  .ts3-menu-buttons {
    display: none !important;
  }

  .ts3-punter-reg-dialog {
    width: 500px !important;
    border: 2px solid rgb(var(--auth-border-colour));
    border-radius: 4px;
    padding: 0 !important;
  }

  .ts3-punter-help-dialog {
    width: 500px !important;
    max-height: 500px !important;
    margin-top: 100px !important;
  }

  .ts3-static-page-modal {
    width: 600px !important;
    max-height: 700px !important;
    margin-top: 100px !important;
  }

  .ts3-punter-login-dialog {
    width: 500px !important;
  }

  .ts3-punter-login-dialog .ts3-social-login,
  .ts3-punter-login-dialog .ts3-login-form,
  .ts3-punter-login-dialog .ts3-or {
    margin-top: 25px !important;
    margin-bottom: 25px;
  }

  .ts3-top-navigation {
    border: none !important;
  }

  .ts3-draw-button-custom {
    margin: 0px 4px 0px 5px !important;
  }

  .ts3-modal-footer-reset {
    padding: 10px 30px 0px 30px !important;
  }
  .ts3-modal-body-reset {
    padding: 10px 30px 0px 30px !important;
  }
  .ts3-modal-text-reset {
    padding: 10px 30px 0px 30px !important;
  }

  .ts3-terms {
    position: inherit !important;
  }
}

/*  MOBILE  LANDSCAPE */
@media only screen and (max-height: 500px) {
  .ts3-secondary-topnav {
    justify-content: center !important;
    min-height: auto !important;
  }

  .ts3-search-container {
    position: static !important;
    right: auto !important;
    top: auto !important;
    justify-content: center !important;
  }

  .ts3-static-page-modal {
    height: 100% !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin-top: 0px !important;
  }

  .ts3-clock {
    padding: 10px;
  }

  .ts3-profile-container {
    padding-bottom: 65px !important;
    top: 31px;
    position: relative;
  }

  .ts3-numbers-container {
    width: 100% !important;
    position: relative;
    top: 10px;
  }
}

/*  MOBILE  */
@media only screen and (max-width: 599px) {
  .ts3-secondary-topnav {
    justify-content: center !important;
    min-height: auto !important;
  }

  .ts3-search-container {
    position: static !important;
    right: auto !important;
    top: auto !important;
  }

  .ts3-numbers-container {
    width: 100% !important;
    position: relative;
    top: 10px;
  }

  .ts3-footer-bottom-container {
    margin-top: -260px !important;
    grid-row-gap: 18px;
    flex-direction: column !important;
  }

  .ts3-mobile-icon-container {
    width: auto !important;
  }

  .ts3-mobile-balance-button {
    cursor: pointer;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
      0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

  .ts3-chatScript__dialog,
  .ts3-punter-reg-dialog,
  .ts3-punter-login-dialog,
  .ts3-punter-help-dialog,
  .ts3-static-page-modal {
    height: 100%;
    width: 100%;
    max-width: 100vw !important;
    border-radius: 4px;
  }

  .ts3-punter-login-dialog .ts3-social-login,
  .ts3-punter-login-dialog .ts3-login-form,
  .ts3-punter-login-dialog .ts3-or {
    margin-top: 25px !important;
    margin-bottom: 25px;
  }

  .ts3-betslip-container {
    max-height: none !important;
    position: fixed !important;
    bottom: 0 !important;
    padding-left: 20px !important;
    margin-left: 0px !important;
    padding-bottom: 0px;
    width: 100% !important;
    z-index: 400;
  }

  .ts3-content-footer {
    padding-bottom: 252px !important; /* match .ts3-footer-bottom-container's margin-top*/
  }

  .ts3-powered-by-img {
    margin-top: 25px !important;
  }

  .ts3-page-not-found {
    max-width: 280px;
  }

  .ts3-no-scroll {
    overflow: hidden;
    position: fixed;
  }

  .ts3-mode-selector {
    width: 95% !important;
  }

  .ts3-top-navigation {
    border: none !important;
  }

  .ts3-logo {
    background-size: contain !important;
  }
  .ts3-button-standard {
    height: 45px !important;
    width: 100% !important;
  }

  top-navigation button-with-notification button {
    max-width: 40px !important;
  }
}

@media only screen and (max-width: 330px) {
  .ts3-secondary-topnav {
    justify-content: center !important;
    min-height: auto !important;
  }

  .ts3-search-container {
    position: static !important;
    right: auto !important;
    top: auto !important;
  }

  .ts3-terms {
    bottom: 12px !important;
    font-size: 0.643em !important;
  }

  .ts3-proof-container {
    padding: 10px 0px 10px 0px !important;
    height: 100% !important;
  }

  .ts3-fica-container {
    padding: 0px 10px !important;
  }

  .ts3-button-standard {
    height: 45px !important;
    width: 100% !important;
  }
}

.ts3-bank-details-modal {
  height: 100%;
  width: 100%;
  max-width: 400px !important;
  max-height: 700px !important;
  margin-top: 100px;
}

.ts3-loader-container {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ts3-disable-zooming {
  font-size: 16px !important;
}

.ts3-secondary-topnav {
  position: relative;
  min-height: 48px;
}