body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  user-select: none;
  overflow: auto;
  scrollbar-width: none;
}

body * {
  font-family: "Montserrat-Regular";
}

body * ::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ededed;
}
body * ::-webkit-scrollbar {
  width: 8px;
  background-color: #F5F5F5;
}
body * ::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #e0dcdc;
}
body * ::-webkit-scrollbar-thumb:hover {
  border-radius: 10px;
  background-color: #ccc;
}

.main-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}

.registar-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  min-height: 130px;
}

.arena-logo {
  margin: 20px;
}

.logo-img {
  height: 60px;
}
@media (min-width: 768px) {
  .logo-img {
    height: 80px;
  }
}

/*Select language*/
.select-language-wrapper {
  margin: 20px;
}

.select-language {
  border: none !important;
  outline: none !important;
  -webkit-appearance: button;
  -moz-appearance: button;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-padding-end: 20px;
  -moz-padding-end: 20px;
  -webkit-padding-start: 2px;
  -moz-padding-start: 2px;
  background-color: #fff; /* Fallback color if gradients are not supported */
  border-radius: 5px !important;
  color: #7b7b7b;
  font-size: inherit;
  margin: 0;
  overflow: hidden;
  padding-top: 2px;
  padding-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 0 !important;
}

.sign-up-button {
  margin: 20px;
}

button {
  background: #00D4F9;
  outline: none;
  border-radius: 4px;
  border: none;
  color: #fff;
  padding: 3px 5px;
}
button:active, button:hover {
  background: #4A007A;
  cursor: pointer;
}
@media (min-width: 768px) {
  button {
    font-size: 16px;
    padding: 5px 7px;
  }
}

/* Style the form */
#regForm {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Hide all steps by default: */
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tab p {
  margin: 5px 0px;
}

.regstar-picture-wrapper {
  margin-bottom: 20px;
}

.registar-picture {
  height: 150px;
  width: 150px;
}
@media (min-width: 768px) {
  .registar-picture {
    height: 200px;
    width: 200px;
  }
}

.registar-text-wrapper {
  width: 272px;
  text-align: left;
  margin: 0px;
}
@media (min-width: 576px) {
  .registar-text-wrapper {
    width: 322px;
  }
}
@media (min-width: 768px) {
  .registar-text-wrapper {
    width: 372px;
  }
}
@media (max-width: 768px) {
  .registar-text-wrapper {
    font-size: 14px;
  }
}

.registar-text-finish {
  color: #14C65B;
  font-family: "Montserrat-Bold";
}

.step-number {
  font-family: "Montserrat-Bold";
  font-size: 10px;
}

.welcome {
  text-transform: uppercase;
  font-family: "Montserrat-Bold";
}

.final-info-wrapper {
  margin: 50px 0px;
}

.final-info {
  text-transform: uppercase;
  font-family: "Montserrat-Bold";
  color: #00D4F9;
  font-size: 16px;
}

.final-info-data {
  margin-top: 10px !important;
  font-family: "Montserrat-Medium";
  font-size: 14px;
  color: #7b7b7b;
  font-style: italic;
  font-size: 12px;
}

.final-info-data span {
  font-family: "Montserrat-Bold";
  color: #000;
  font-style: normal;
  padding-left: 5px;
}

/*Paying cards on registar form*/
.paying-cards-wrapper {
  margin-bottom: 50px;
  margin-top: 20px;
  text-align: center;
}

.card-options-group {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.card-options-group-img {
  width: 50px;
  margin: 10px;
}

.card-options-group-method {
  flex-direction: column;
}

.card-options-group-method img {
  height: 35px;
}

.validation-text {
  font-size: 12px;
  font-family: "Montserrat-Bold";
  color: #DE1E23;
  text-align: left;
  width: 100%;
  margin: 5px 0px;
}
.validation-text ul {
  padding-left: 15px;
}
.validation-text ul li {
  font-family: "Montserrat-Bold";
  list-style-type: none;
}

/* Style the input fields */
input {
  padding: 7px;
  font-size: 17px;
  border: 1px solid #aaaaaa;
  border-color: #7b7b7b;
  outline: #7b7b7b;
  width: 250px;
}
input:active, input:focus {
  border-color: #00D4F9;
  outline: #00D4F9;
  background: #ffffff;
}
@media (min-width: 576px) {
  input {
    width: 300px;
    padding: 10px;
  }
}
@media (min-width: 768px) {
  input {
    width: 350px;
  }
}
@media (max-width: 768px) {
  input {
    font-size: 14px;
  }
}

.input1 {
  margin-bottom: -30px;
}

.input2 {
  margin-top: -30px;
}

/* Valid / Notvalid input classes*/
input-valid {
  background-color: #ffffff;
  border: 1px solid #00D4F9;
}

input-notvalid {
  background-color: #ededed;
  border: 1px solid #000;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #ccc;
  text-align: center;
}

::-moz-placeholder { /* Firefox 19+ */
  color: #ccc;
}

:-ms-input-placeholder { /* IE 10+ */
  color: #ccc;
}

:-moz-placeholder { /* Firefox 18- */
  color: #ccc;
}

.input-check {
  font-size: 14px;
  color: #7b7b7b;
  font-family: "Montserrat-Bold";
  position: relative;
  left: -140px;
  top: 10px;
}
@media (max-width: 768px) {
  .input-check {
    left: -115px;
  }
}
@media (max-width: 576px) {
  .input-check {
    left: -90px;
  }
}

input[type=checkbox] {
  border: 1px solid #000 !important;
  outline: none;
  width: 40px;
  margin-right: 10px;
}

.smart-tv-question {
  font-size: 20px;
  margin-top: 40px !important;
  font-family: "Montserrat-Medium";
  color: #00d4f9;
  text-align: center;
}

.smart-tv-question-price {
  margin-top: 10px !important;
  font-family: "Montserrat-Medium";
  font-size: 14px;
}

.smart-tv-question-price span {
  font-family: "Montserrat-Bold";
}

/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  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 */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: -7px;
  left: 0;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #2FC6F3;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #fff;
  border: 1px solid #7b7b7b;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #fff;
}

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

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
  top: 4px;
  left: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #00D4F9;
}

.steps {
  margin-top: 20px;
  display: none;
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

/* Mark the active step: */
.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #4CAF50;
}

.steps-buttons-wrapper {
  width: 100%;
}

.steps-buttons {
  display: flex;
  justify-content: center;
}

/*Smart TV choose checkbox*/
.input-agree {
  display: flex;
  margin: 10px 10px 40px 0px !important;
  color: #000;
  font-weight: bold;
  font-size: 12px;
  align-items: center;
  justify-content: center;
  /*Checkboxes styles*/
  /*input[type="checkbox"]:checked + label:before {
      width: 10px;
      top: -5px;
      left: 5px;
      border-radius: 0;
      border: 2px solid $aGreen;
      opacity: 1;
      border-top-color: transparent;
      border-left-color: transparent;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg) scale(1.5);
  }*/
}
.input-agree input[type=checkbox] {
  display: none;
}
.input-agree input[type=checkbox] + label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  font: 14px/20px "Open Sans", Arial, sans-serif;
  color: #ddd;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.input-agree input[type=checkbox] + label:last-child {
  margin-bottom: 0;
}
.input-agree input[type=checkbox] + label:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #000;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.6;
  -webkit-transition: all 0.12s, border-color 0.08s;
  transition: all 0.12s, border-color 0.08s;
}
.input-agree #tv-service-change:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  border: 2px solid #14C65B;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg) scale(1.5);
}
.input-agree #tv-service-box:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  border: 2px solid #14C65B;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg) scale(1.5);
}
.input-agree #terms-of-service-checkbox:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  border: 2px solid #14C65B;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.input-agree-terms-text {
  font-family: "Montserrat-Regular";
  margin-top: 10px !important;
  font-size: 14px;
}

.input-agree-terms-checked {
  color: #14C65B !important;
}

.input-agree-terms {
  margin-top: 50px !important;
  margin-bottom: 10px !important;
  color: #7b7b7b;
}

.terms-link {
  font-family: "Montserrat-Bold";
  color: #7b7b7b;
}

.terms-link:hover {
  color: #42384B;
}

.package-final-price {
  color: #000;
  margin-bottom: 30px !important;
}

.package-final-price-amount {
  color: #14C65B;
  font-family: "Montserrat-Bold";
  font-size: 18px;
  display: block;
  margin-top: 10px;
}

.subscription-package-text {
  margin-top: 10px !important;
  font-family: "Montserrat-Bold";
  font-size: 14px;
}

.next-button {
  text-transform: uppercase;
  width: 280px;
  text-align: center;
  padding: 10px 5px;
  margin: 30px 0px 50px 0px;
  border-radius: 5px;
}
.next-button:hover {
  cursor: pointer;
}
@media (min-width: 576px) {
  .next-button {
    width: 322px;
  }
}
@media (min-width: 768px) {
  .next-button {
    width: 372px;
  }
}

.step-text {
  font-size: 12px;
  width: 272px;
}
@media (min-width: 576px) {
  .step-text {
    width: 322px;
  }
}
@media (min-width: 768px) {
  .step-text {
    width: 372px;
  }
}

.payment-method {
  background: #F3F3F3;
  border-radius: 4px;
  padding: 5px 10px;
  width: 255px;
  font-size: 12px;
  margin: 10px 0px;
}
@media (min-width: 576px) {
  .payment-method {
    width: 305px;
  }
}
@media (min-width: 768px) {
  .payment-method {
    width: 355px;
  }
}

.payment-value {
  font-family: "Montserrat-Bold";
}

.change-method {
  color: #00D4F9;
  font-family: "Montserrat-Bold";
}

.card-type {
  text-transform: none;
  color: #c4c4c4;
  font-family: "Montserrat-Bold";
  margin: 5px 0px;
}

.card-type-price {
  font-size: 22px;
  font-family: "Montserrat-Bold";
  color: #00D4F9;
}

.card-type-price-promo {
  font-size: 16px;
  font-family: "Montserrat-Bold";
  color: #DE1E23;
  text-decoration: line-through;
}

/* Accordion styling start */
.accordion {
  width: 272px;
  display: flex;
}
@media (max-width: 992px) {
  .accordion {
    flex-direction: column;
  }
}
@media (min-width: 576px) {
  .accordion {
    width: 322px;
  }
}
@media (min-width: 768px) {
  .accordion {
    width: 372px;
  }
}

.web-packages {
  width: 100%;
}

/* Accordion item */
.accordion-item {
  margin: 30px 0px;
  background: #FFFFFF;
  box-shadow: 1px 1px 10px 2px rgba(86, 190, 208, 0.34);
  border-radius: 10px;
  /*min-height: 155px;*/
  display: flex;
  align-items: center;
  justify-content: center;
}

/*PROMO ACCORDION*/
.accordion-item-promo {
  box-shadow: 1px 1px 15px 2px rgba(27, 196, 226, 0.4901960784);
  transform: scale(1.05);
  background: #00D4F9;
}
.accordion-item-promo .accordion-content-top {
  background: #2FC6F3;
}
.accordion-item-promo .card-type {
  color: #fff !important;
}
.accordion-item-promo .card-type-explanation {
  color: #fff !important;
}
.accordion-item-promo .card-type-explanation .card-type-price, .accordion-item-promo .card-type-explanation .card-type-price-promo {
  color: #fff !important;
}
.accordion-item-promo .accordion-content-bottom .toggle-accordion-text {
  color: #00D4F9;
  border: #2FC6F3;
  background: #fff;
}
.accordion-item-promo .accordion-body-item-colorized {
  background: #2FC6F3 !important;
}
.accordion-item-promo .accordion-body-item {
  color: #fff !important;
}
.accordion-item-promo .accordion-body-item i {
  color: #fff !important;
}

.promo-badge {
  color: #000;
  background: #FFD60D;
  position: absolute;
  right: 0px;
  padding: 5px 15px;
  border-bottom-left-radius: 15px;
  border-top-left-radius: 15px;
  font-size: 10px;
  font-family: "Montserrat-Medium";
  text-transform: uppercase;
}

.accordion-item-content {
  width: 100%;
}

/* Accordio content*/
.accordion-content-top {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: #f4f4f4;
  position: relative;
}

.accordion-content-top-text {
  text-transform: uppercase;
  font-size: 12px;
  padding-left: 10px;
}
.accordion-content-top-text .card-type {
  color: #000;
  font-size: 18px;
}

.card-type-explanation {
  padding: 0px 10px;
}

.accordion-content-app {
  display: flex;
  align-items: center;
  color: #DE1E23;
}
.accordion-content-app p {
  font-family: "Montserrat-Bold";
}

.app-card-list {
  list-style-type: none;
  padding: 0px 15px;
  display: flex;
  align-items: center;
}

.app-card-item {
  border-radius: 4px;
  height: 20px;
  width: 28px;
  border: 1px solid #DE1E23;
  background: #fff;
  text-align-last: center;
  margin-right: -10px;
  font-family: "Montserrat-Bold";
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.app-card-item:last-child {
  margin-right: 0px;
}

.accordion-content-bottom {
  display: flex;
  justify-content: flex-end;
  padding: 0px 10px 10px 10px;
}
.accordion-content-bottom:hover {
  cursor: pointer;
}
.accordion-content-bottom .toggle-accordion-text {
  font-size: 12px;
  font-family: "Montserrat-Medium";
  padding: 5px 10px;
  border-radius: 5px;
  color: #fff;
  background: #DE1E23;
}
.accordion-content-bottom .toggle-accordion-icon {
  margin-left: 3px;
  font-size: 9px;
  color: #7b7b7b;
}

.mobile {
  font-size: 26px !important;
  color: #00D4F9;
  margin: 5px 0px;
}

.accordion-body-list {
  list-style-type: none;
  padding-left: 0px;
  display: none;
}

.accordion-body-item {
  color: #000;
  font-family: "Montserrat-Medium";
  font-size: 12px;
  padding: 7px 10px;
}

.accordion-body-item-colorized {
  background: #f4f4f4 !important;
}

.accordion-body-item-check {
  color: #000;
  margin-right: 5px;
  font-size: 14px;
}

.stars {
  display: none;
}

.star {
  margin: 2px;
  color: #00D4F9;
  font-size: 14px !important;
}

.show-more {
  display: inline;
  font-family: "Montserrat-Medium";
}

.show-less {
  display: none;
  font-family: "Montserrat-Medium";
}

.toggle-up {
  display: none;
  margin-left: 5px;
}

.toggle-down {
  display: inline;
  margin-left: 5px;
}

.expanded .accordion-body-list {
  display: block;
}
.expanded .show-less {
  display: inline;
}
.expanded .show-more {
  display: none;
}
.expanded .toggle-up {
  display: inline;
}
.expanded .toggle-down {
  display: none;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 50px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: scroll; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  margin-bottom: 30px;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover, .close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-item {
  background: #FFFFFF;
  box-shadow: 1px 1px 10px 2px rgba(86, 190, 208, 0.34);
  border-radius: 10px;
  min-height: 255px;
  align-items: center;
  justify-content: center;
}

.kanali {
  padding-top: 30px;
}

.logo-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.logo-container img {
  max-height: 18%;
  max-width: 18%;
}

.title-bronze {
  text-align: center;
  text-transform: uppercase;
  color: #cd7f32 !important;
}

.title-silver {
  text-align: center;
  text-transform: uppercase;
  color: #aaa9ad !important;
}

.title-gold {
  text-align: center;
  text-transform: uppercase;
  color: #d4af37 !important;
}

.popup-trigger-gold a {
  color: #2fc6f3 !important;
  font-weight: bold;
}

.popup-trigger-bronze a {
  color: #2fc6f3 !important;
  font-weight: bold;
}

.popup-trigger-silver a {
  color: #575757 !important;
  font-weight: bold;
}