@font-face {
  font-family: 'GTWalsheimPro';
  src: url("../fonts/GTWalsheimPro.ttf"), url("../fonts/GTWalsheimPro.otf"); }

@font-face {
  font-family: 'GTWalsheimPro-Medium';
  src: url("../fonts/GTWalsheimPro-Medium.ttf"), url("../fonts/GTWalsheimPro-Medium.otf"); }

@font-face {
  font-family: 'GTWalsheimPro-MediumOblique';
  src: url("../fonts/GTWalsheimPro-MediumOblique.ttf"), url("../fonts/GTWalsheimPro-Medium.otf"); }

@font-face {
  font-family: 'GTWalsheimProBold';
  src: url("../fonts/GTWalsheimPro-Bold.ttf"), url("../fonts/GTWalsheimPro-Medium.otf"); }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }

input[type=number] {
  -moz-appearance: textfield;
  /* Firefox */ }

.mainContainerArea {
  position: relative;
  display: flex; }
  .mainContainerArea .leftContainer {
    display: flex;
    flex-direction: column-reverse;
    background-image: url("/images/home/cloudsRight.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 115% 28%;
    position: relative;
    right: 45px;
    z-index: -1; }
    .mainContainerArea .leftContainer .flowerpotArea {
      height: calc(20vh);
      background-size: contain;
      background-repeat: no-repeat;
      width: 100%;
      background-position: bottom;
      background-image: url("/images/home/flowerpot.png"); }
  .mainContainerArea .rightContainer {
    display: flex;
    flex-direction: column-reverse;
    background-image: url("/images/home/cloudsLeft.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
    z-index: 1; }
    .mainContainerArea .rightContainer .characterArea {
      flex-grow: 1;
      background-size: contain;
      background-repeat: no-repeat;
      width: 75%;
      background-position: bottom;
      height: calc(30vh);
      max-width: 550px;
      background-image: url("/images/home/skateboardCharacter.png"); }
  .mainContainerArea .sideContainers {
    flex-grow: 1; }
  .mainContainerArea .midContainer {
    width: 600px !important; }
    .mainContainerArea .midContainer .progressStepsArea {
      position: relative;
      width: 100%;
      margin-top: 46px;
      margin-bottom: 60px; }
      @media (min-width: 767px) and (max-width: 1029px) {
        .mainContainerArea .midContainer .progressStepsArea {
          margin-bottom: 0px; } }
      @media (max-width: 766px) {
        .mainContainerArea .midContainer .progressStepsArea {
          position: relative;
          top: -0px;
          margin-top: 0px;
          margin-bottom: 0px; } }
      .mainContainerArea .midContainer .progressStepsArea #stepProgressBar {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        width: 492px;
        margin: 0 auto;
        margin-bottom: 40px;
        position: relative;
        /*left: -5.5px;*/ }
        @media (max-width: 766px) {
          .mainContainerArea .midContainer .progressStepsArea #stepProgressBar {
            width: 92vw;
            position: absolute;
            left: 4vw;
            top: 29px; } }
        @media (max-width: 327px) {
          .mainContainerArea .midContainer .progressStepsArea #stepProgressBar {
            width: 295px; } }
        @media (max-height: 414px) and (max-width: 736px) {
          .mainContainerArea .midContainer .progressStepsArea #stepProgressBar {
            /*left: 27%;*/ } }
        @media (max-height: 375px) and (max-width: 667px) {
          .mainContainerArea .midContainer .progressStepsArea #stepProgressBar {
            /*left: 24.5%;*/ } }
        @media (max-height: 736px) and (max-width: 414px) {
          .mainContainerArea .midContainer .progressStepsArea #stepProgressBar {
            /*left: 12%;*/ } }
        @media (max-height: 640px) and (max-width: 360px) {
          .mainContainerArea .midContainer .progressStepsArea #stepProgressBar {
            /*left: 2.5%;*/ } }
        @media (max-height: 450px) and (max-width: 600px) {
          .mainContainerArea .midContainer .progressStepsArea #stepProgressBar {
            /*left: 22%;*/ } }
        @media (max-height: 320px) and (max-width: 568px) {
          .mainContainerArea .midContainer .progressStepsArea #stepProgressBar {
            /*left: 20%;*/ } }
        @media (max-height: 823px) and (max-width: 411px) {
          .mainContainerArea .midContainer .progressStepsArea #stepProgressBar {
            /*left: 11%;*/ } }
        @media (max-height: 600px) and (max-width: 450px) {
          .mainContainerArea .midContainer .progressStepsArea #stepProgressBar {
            /*left: 14%;*/ } }
        @media (max-height: 812px) and (max-width: 375px) {
          .mainContainerArea .midContainer .progressStepsArea #stepProgressBar {
            /*left: 8%;*/ } }
      .mainContainerArea .midContainer .progressStepsArea .step {
        text-align: center; }
        @media (max-width: 766px) {
          .mainContainerArea .midContainer .progressStepsArea .step {
            z-index: 1; } }
      .mainContainerArea .midContainer .progressStepsArea .circleStep {
        border: 1.4px solid #ede9e6;
        width: 65px;
        height: 65px;
        border-radius: 100%;
        color: #9c9c9c;
        font-weight: bold;
        display: inline-block;
        position: relative;
        transition: background-color 500ms;
        font-size: 30px;
        z-index: 1000;
        background-color: #fff;
        display: block;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ede9e6; }
        @media (max-width: 766px) {
          .mainContainerArea .midContainer .progressStepsArea .circleStep {
            width: 50px;
            height: 50px;
            font-size: 24px; } }
        .mainContainerArea .midContainer .progressStepsArea .circleStep .stepNumber {
          position: relative; }
      .mainContainerArea .midContainer .progressStepsArea .circleStep.completed {
        color: white;
        background-color: #004495; }
        .mainContainerArea .midContainer .progressStepsArea .circleStep.completed::after {
          content: '';
          position: absolute;
          right: -152px;
          height: 5px;
          width: 156px;
          bottom: 26px;
          background-color: #004495; }
          @media (max-width: 766px) {
            .mainContainerArea .midContainer .progressStepsArea .circleStep.completed::after {
              bottom: 23px;
              right: -146px; } }
          @media (max-width: 375px) {
            .mainContainerArea .midContainer .progressStepsArea .circleStep.completed::after {
              width: 130px;
              bottom: 23px;
              right: -120px; } }
      .mainContainerArea .midContainer .progressStepsArea .circleStepLast {
        color: white;
        background-color: #004495;
        font-size: 30px; }
      .mainContainerArea .midContainer .progressStepsArea .lastCircle {
        position: relative;
        bottom: 5px; }
      .mainContainerArea .midContainer .progressStepsArea .hidden {
        display: none; }
      .mainContainerArea .midContainer .progressStepsArea .contentAreaButton {
        width: 502px;
        height: 50px;
        border-radius: 25px;
        background-color: #0074ff;
        display: block;
        margin: 0 auto;
        color: #fff;
        border: 0px !important;
        font-size: 16px;
        margin-bottom: 22px;
        font-size: 16px;
        box-shadow: 5px 6px 1px #004598, inset 0px 0px 0px #004599; }
        @media (max-width: 766px) {
          .mainContainerArea .midContainer .progressStepsArea .contentAreaButton {
            margin-left: 20px;
            width: 90%; } }
        .mainContainerArea .midContainer .progressStepsArea .contentAreaButton i {
          float: right;
          position: relative;
          right: 7px;
          top: 3px; }
        .mainContainerArea .midContainer .progressStepsArea .contentAreaButton:disabled:hover {
          opacity: 0.6;
          cursor: not-allowed; }
      .mainContainerArea .midContainer .progressStepsArea .contentAreaButtonMargin {
        bottom: 110px; }
      .mainContainerArea .midContainer .progressStepsArea .contentAreaRegisteredButton {
        width: 502px;
        height: 50px;
        border-radius: 25px;
        border: solid 1px #0074ff;
        display: block;
        margin: 0 auto;
        background-color: transparent;
        color: #0074ff;
        margin-top: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        text-decoration: none; }
        @media (max-width: 766px) {
          .mainContainerArea .midContainer .progressStepsArea .contentAreaRegisteredButton {
            margin-left: 20px;
            width: 90%; } }
        .mainContainerArea .midContainer .progressStepsArea .contentAreaRegisteredButton i {
          float: right;
          position: absolute;
          right: 14px;
          top: 15px; }
      .mainContainerArea .midContainer .progressStepsArea .progressBorderBottom {
        content: '';
        position: relative;
        right: -60px;
        bottom: 32px;
        height: 5px;
        width: 156px;
        background-color: transparent;
        border-bottom: 1px solid #ede9e6;
        border-top: 1px solid #ede9e6;
        background-color: #ede9e6; }
        @media (max-width: 766px) {
          .mainContainerArea .midContainer .progressStepsArea .progressBorderBottom {
            right: -50px;
            height: 5px;
            width: 149px;
            bottom: 29px; } }
        @media (max-width: 375px) {
          .mainContainerArea .midContainer .progressStepsArea .progressBorderBottom {
            width: 124px; } }
      .mainContainerArea .midContainer .progressStepsArea .mainContentArea {
        width: 100%;
        border-radius: 8px;
        border: solid 1px #ede9e6;
        background-color: #fbfbfb;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative; }
        .mainContainerArea .midContainer .progressStepsArea .mainContentArea .registrationCodeArea {
          display: flex;
          align-items: center;
          justify-content: center; }
        @media (max-width: 766px) {
          .mainContainerArea .midContainer .progressStepsArea .mainContentArea {
            width: 100%;
            height: auto; } }
        .mainContainerArea .midContainer .progressStepsArea .mainContentArea .contentAreaTitle {
          width: 200px;
          height: 32px;
          font-family: "GTWalsheimPro-Medium";
          font-size: 32px;
          font-weight: 500;
          color: #494949;
          display: block;
          margin: 0 auto;
          margin-top: 12px;
          margin-bottom: 27px;
          text-align: center; }
          @media (max-width: 766px) {
            .mainContainerArea .midContainer .progressStepsArea .mainContentArea .contentAreaTitle {
              margin-top: -41px; } }
        .mainContainerArea .midContainer .progressStepsArea .mainContentArea .contentAreaTitleEN {
          width: 350px; }
        .mainContainerArea .midContainer .progressStepsArea .mainContentArea .contentAreaDescription {
          width: 502px;
          /*height: 54px;*/
          font-family: "GTWalsheimPro";
          font-size: 18px;
          line-height: 1.5;
          color: #494949;
          display: block;
          margin: 0 auto;
          margin-bottom: 20px; }
          @media (max-width: 766px) {
            .mainContainerArea .midContainer .progressStepsArea .mainContentArea .contentAreaDescription {
              width: 92%;
              font-size: 14px;
              font-weight: bold; } }
        .mainContainerArea .midContainer .progressStepsArea .mainContentArea .contentAreaDescriptionEN {
          margin-bottom: 46px !important; }
        .mainContainerArea .midContainer .progressStepsArea .mainContentArea .contentAreaInput {
          width: 503px;
          height: 50px;
          border-radius: 4px;
          border: solid 1px #ede9e6;
          background-color: #ffffff;
          display: block;
          margin: 0 auto;
          padding-left: 20px;
          line-height: 50px; }
          .mainContainerArea .midContainer .progressStepsArea .mainContentArea .contentAreaInput:focus {
            outline: none; }
          @media (max-width: 766px) {
            .mainContainerArea .midContainer .progressStepsArea .mainContentArea .contentAreaInput {
              width: 93%; } }
        .mainContainerArea .midContainer .progressStepsArea .mainContentArea .contentAreaInputSmall {
          width: 251px;
          height: 50px;
          border-radius: 4px;
          border: solid 1px #ede9e6;
          background-color: #ffffff;
          display: block;
          margin: 0 auto;
          padding-left: 20px;
          float: left;
          line-height: 51px; }
          .mainContainerArea .midContainer .progressStepsArea .mainContentArea .contentAreaInputSmall:focus {
            outline: none; }
          @media (max-width: 766px) {
            .mainContainerArea .midContainer .progressStepsArea .mainContentArea .contentAreaInputSmall {
              width: 46.6%; } }
        .mainContainerArea .midContainer .progressStepsArea .mainContentArea .contentAreaInputSmallLast {
          width: 244px;
          height: 50px;
          border-radius: 4px;
          border: solid 1px #ede9e6;
          background-color: #ffffff;
          display: block;
          margin: 0 auto;
          padding-left: 20px;
          float: left;
          line-height: 51px; }
          .mainContainerArea .midContainer .progressStepsArea .mainContentArea .contentAreaInputSmallLast:focus {
            outline: none; }
          @media (max-width: 766px) {
            .mainContainerArea .midContainer .progressStepsArea .mainContentArea .contentAreaInputSmallLast {
              width: 87%;
              margin-left: 13px !important; } }
        .mainContainerArea .midContainer .progressStepsArea .mainContentArea .contentAreaSelect {
          width: 503px;
          height: 50px;
          border-radius: 4px;
          border: solid 1px #ede9e6;
          background-color: #ffffff;
          display: block;
          margin: 0 auto;
          padding-left: 16px;
          color: #827979; }
          .mainContainerArea .midContainer .progressStepsArea .mainContentArea .contentAreaSelect:focus {
            outline: none; }
          @media (max-width: 766px) {
            .mainContainerArea .midContainer .progressStepsArea .mainContentArea .contentAreaSelect {
              width: 93%; } }
        .mainContainerArea .midContainer .progressStepsArea .mainContentArea .contentAreaSelectSmall {
          width: 234px;
          height: 50px;
          border-radius: 4px;
          border: solid 1px #ede9e6;
          background-color: #ffffff;
          display: block;
          margin: 0 auto;
          padding-left: 16px;
          color: #827979;
          margin-right: 17px;
          float: left; }
          .mainContainerArea .midContainer .progressStepsArea .mainContentArea .contentAreaSelectSmall:focus {
            outline: none; }
          @media (max-width: 766px) {
            .mainContainerArea .midContainer .progressStepsArea .mainContentArea .contentAreaSelectSmall {
              width: 87%;
              margin-left: 14px; } }
        .mainContainerArea .midContainer .progressStepsArea .mainContentArea .confirmationArea {
          width: 100%;
          position: relative;
          bottom: 1px; }
          @media (max-width: 766px) {
            .mainContainerArea .midContainer .progressStepsArea .mainContentArea .confirmationArea {
              margin-top: 14px; } }
          .mainContainerArea .midContainer .progressStepsArea .mainContentArea .confirmationArea .contentAreaCheckbox {
            margin-top: 15px;
            float: left;
            position: relative;
            bottom: 15px; }
            @media (max-width: 766px) {
              .mainContainerArea .midContainer .progressStepsArea .mainContentArea .confirmationArea .contentAreaCheckbox {
                margin-left: 16px; } }
          .mainContainerArea .midContainer .progressStepsArea .mainContentArea .confirmationArea .contentAreaCheckboxText {
            font-size: 12px;
            float: left;
            width: 84%;
            position: relative;
            bottom: 3px;
            left: 5px; }
        .mainContainerArea .midContainer .progressStepsArea .mainContentArea .prevButton {
          position: absolute;
          font-size: 24px;
          left: 16px;
          cursor: pointer;
          top: 24px; }
          @media (max-width: 766px) {
            .mainContainerArea .midContainer .progressStepsArea .mainContentArea .prevButton {
              top: 97px;
              right: -21px; } }
      .mainContainerArea .midContainer .progressStepsArea .registerButtons {
        margin-top: 20px;
        margin-bottom: 40px; }
        @media (max-width: 766px) {
          .mainContainerArea .midContainer .progressStepsArea .registerButtons {
            width: 100%; } }
      @media (max-width: 766px) {
        .mainContainerArea .midContainer .progressStepsArea .stepArea {
          margin-top: 125px; } }
      @media (max-width: 766px) {
        .mainContainerArea .midContainer .progressStepsArea .firstStepArea {
          margin-top: 55px !important; } }

.informationVideo {
  width: 480px;
  height: 60px;
  border-radius: 8px;
  background-color: #fce5dc;
  display: block;
  margin: 0 auto;
  margin-bottom: 15px;
  margin-top: 30px; }
  @media (max-width: 766px) {
    .informationVideo {
      width: 100%;
      border-radius: 0px; } }
  .informationVideo .informationVideoArea {
    text-align: center; }
    .informationVideo .informationVideoArea .informationVideoIcon {
      font-size: 37px;
      position: relative;
      top: 11px;
      color: #494949;
      right: 9px; }
    .informationVideo .informationVideoArea .informationVideoText {
      font-size: 18px;
      font-weight: bold;
      color: #494949;
      font-family: "GTWalsheimPro";
      position: relative;
      right: -7px;
      top: 3px; }
    .informationVideo .informationVideoArea .informationVideoLink {
      text-decoration: none; }
    .informationVideo .informationVideoArea .informationVideoLink:focus, .informationVideo .informationVideoArea .informationVideoLink:active {
      outline: none !important;
      box-shadow: none; }

.registerHelpIcon {
  position: absolute;
  right: -284px;
  top: -29px; }
  @media (max-width: 1366px) {
    .registerHelpIcon {
      right: -196px;
      top: 11px;
      width: 80px;
      height: 72px; } }
  @media (max-width: 1200px) {
    .registerHelpIcon {
      right: -80px;
      top: -25px; } }
  @media (min-width: 992px) and (max-width: 1029px) {
    .registerHelpIcon {
      right: 21px !important;
      /*top: -25px;*/ } }
  @media (min-width: 767px) and (max-width: 1029px) {
    .registerHelpIcon {
      right: -125px; } }
  @media (max-width: 766px) {
    .registerHelpIcon {
      right: -20px;
      top: 5px;
      width: 60px;
      height: 52px; } }
  @media (max-width: 375px) {
    .registerHelpIcon {
      right: -17px;
      top: 9px;
      width: 50px;
      height: 44px; } }

.close {
  opacity: 1; }

.close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover {
  opacity: 1; }

.packageHelpIcon {
  position: absolute;
  right: -12px;
  top: 20px; }
  @media (min-width: 1030px) {
    .packageHelpIcon {
      top: -2px; } }

.modalArea {
  padding: 27px; }
  .modalArea .modalTitle {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    font-weight: 500;
    color: #494949;
    padding-bottom: 21px; }
  .modalArea .modalContent {
    font-size: 20px;
    color: #494949; }
    .modalArea .modalContent .modalContentPDF {
      width: 100%;
      height: 80vh; }

@media (max-width: 766px) {
  .packageCloseButton {
    z-index: 100;
    position: relative;
    right: 4px;
    top: -2px; } }

@media (min-width: 767px) and (max-width: 1029px) {
  .packageCloseButton {
    z-index: 100;
    position: relative;
    right: 2px;
    top: -1px; } }

@media (max-width: 766px) {
  .registerCloseButton {
    z-index: 100;
    position: relative;
    right: 4px;
    top: -30px; } }

@media (min-width: 767px) and (max-width: 1029px) {
  .registerCloseButton {
    z-index: 100;
    position: relative;
    right: 2px;
    top: -30px; } }

::placeholder {
  color: #494949;
  opacity: 1; }

.cloudLeftImage {
  width: 97%; }
  @media (max-width: 1211px) {
    .cloudLeftImage {
      width: 43%; } }
  @media (max-width: 766px) {
    .cloudLeftImage {
      display: none; } }

.cloudRightTopImage {
  width: 38%;
  float: right;
  margin-top: 13px; }
  @media (max-width: 1211px) {
    .cloudRightTopImage {
      display: none; } }

.mobileCloudRightTopImage {
  display: none;
  width: 16%;
  float: right;
  margin-top: 2px;
  position: relative;
  top: 72px; }
  @media (max-width: 1211px) {
    .mobileCloudRightTopImage {
      display: block; } }

.cloudRight {
  position: absolute;
  top: 208px;
  width: 98%;
  right: -444px;
  z-index: -3; }
  @media (max-width: 1211px) {
    .cloudRight {
      top: 208px;
      width: 27%;
      right: 68px; } }
  @media (max-width: 766px) {
    .cloudRight {
      display: none; } }

.character {
  width: 500px;
  position: absolute;
  bottom: -72px;
  right: 0; }
  @media (max-width: 1449px) {
    .character {
      width: 442px; } }
  @media (max-width: 1362px) {
    .character {
      display: none; } }

.flowerpot {
  position: absolute;
  left: 131px;
  bottom: -71px;
  width: 134px; }
  @media (max-width: 1211px) {
    .flowerpot {
      display: none; } }

.mobileFlowerpot {
  display: none;
  left: 28px;
  bottom: -71px;
  width: 134px;
  position: relative; }
  @media (max-width: 1211px) {
    .mobileFlowerpot {
      display: block; } }
  @media (min-width: 1200px) {
    .mobileFlowerpot {
      display: none; } }
  @media (max-width: 766px) {
    .mobileFlowerpot {
      display: none; } }

input::placeholder {
  line-height: 50px; }

.modalHelpVideo {
  position: absolute;
  z-index: -1;
  outline: none;
  left: 11%;
  top: 35px;
  border: 2px #ff5757 solid; }
  @media (min-width: 767px) and (max-width: 1029px) {
    .modalHelpVideo {
      position: relative;
      z-index: 1;
      height: auto; } }
  @media (max-width: 766px) {
    .modalHelpVideo {
      position: relative;
      z-index: 1;
      height: auto; } }
  @media (max-width: 480px) and (min-width: 376px) {
    .modalHelpVideo {
      top: 72px; } }

.modalRegisterVideo {
  position: absolute;
  z-index: -1;
  outline: none; }
  @media (min-width: 767px) and (max-width: 1029px) {
    .modalRegisterVideo {
      position: relative;
      z-index: 1;
      height: auto; } }
  @media (max-width: 766px) {
    .modalRegisterVideo {
      position: relative;
      z-index: 1;
      height: auto; } }

.inputArea {
  position: relative;
  width: 100%; }
  .inputArea .errorInput {
    border: solid 1px #db0000 !important; }
  .inputArea .errorIcon {
    position: absolute;
    right: 9px;
    top: 17px;
    color: #db0000; }
    @media (max-width: 766px) {
      .inputArea .errorIcon {
        right: 23px; } }
  .inputArea .errorText {
    font-size: 12px;
    color: #db0000;
    font-weight: bold;
    margin-top: 6px;
    width: 502px; }
    @media (max-width: 766px) {
      .inputArea .errorText {
        padding-left: 15px;
        font-size: 11px;
        width: 100%; } }
  .inputArea .errorIconSmall {
    position: relative;
    top: 16px;
    color: #db0000;
    right: 35px; }
  .inputArea .errorTextSmall {
    font-size: 11px;
    color: #db0000;
    float: left;
    font-weight: bold;
    padding-top: 2px;
    clear: both;
    position: absolute;
    left: 0;
    top: 59px; }
    @media (max-width: 766px) {
      .inputArea .errorTextSmall {
        left: 21px; } }

.inputLastStep {
  clear: both; }

.lastStepParentNameInput {
  margin-left: 47px !important; }

@media (max-width: 766px) {
  .mobileMargin {
    margin-top: 16px !important; } }

.errorStepText {
  display: block;
  margin-top: 9px;
  color: #db0000;
  font-size: 12px;
  clear: both;
  text-align: center; }
  @media (max-width: 766px) {
    .errorStepText {
      padding-left: 14px; } }

.errorStepTwo {
  clear: both;
  padding-left: 41px;
  position: relative;
  color: #db0000;
  font-size: 12px;
  top: 5px; }
  @media (max-width: 766px) {
    .errorStepTwo {
      padding-left: 16px; } }

.smallInputAreaLast {
  float: left;
  width: 50%; }

.lastStepErrorIcon {
  position: absolute !important;
  top: 25px !important;
  color: #db0000 !important;
  right: 24px !important; }

.lastStepError {
  right: 60px !important; }
  @media (max-width: 766px) {
    .lastStepError {
      right: 29px !important; } }

.lastStepSurnameErrorIcon {
  position: absolute !important;
  top: 25px !important;
  color: #db0000 !important;
  right: 60px !important; }
  @media (max-width: 766px) {
    .lastStepSurnameErrorIcon {
      right: 30px !important; } }

.createAccountWrapper .createAccountTitle {
  margin-left: 48px;
  font-weight: bold;
  font-family: "GTWalsheimPro-Medium";
  font-size: 18px; }
  @media (max-width: 766px) {
    .createAccountWrapper .createAccountTitle {
      margin-left: 16px; } }

.createAccountWrapper .passwordInput {
  padding-right: 86px;
  margin-left: 47px !important; }
  @media (max-width: 766px) {
    .createAccountWrapper .passwordInput {
      margin-left: 14px !important; } }

.passwordInfoText {
  display: block;
  margin: 0 auto;
  width: 100%;
  font-size: 14px;
  padding-left: 48px;
  clear: both;
  position: relative;
  bottom: 24px;
  padding-right: 25px;
  margin-top: 35px; }
  @media (max-width: 766px) {
    .passwordInfoText {
      margin-top: 0px;
      padding-left: 15px;
      padding-right: 0;
      bottom: 0; } }

/* Select2 Custom */
.select2-container {
  width: 503px !important;
  height: 50px !important;
  border-radius: 4px !important;
  border: solid 1px #ede9e6 !important;
  background-color: #ffffff !important;
  display: block !important;
  margin: 0 auto !important;
  padding-left: 16px !important;
  color: #827979 !important;
  margin-bottom: 15px !important; }
  @media (max-width: 766px) {
    .select2-container {
      width: 93% !important; } }

.select2-container--default .select2-selection--single {
  background-color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  position: relative !important;
  left: -5px !important;
  top: 11px !important; }
  .select2-container--default .select2-selection--single:focus {
    outline: none !important; }

.select2-dropdown {
  border: solid 1px #d6d6d6 !important; }

.select2-search__field:focus {
  outline: none !important; }

.select2-results__option {
  color: #494949 !important; }

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #827979 !important; }

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: solid 1px #c8c8c8 !important; }

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  color: #fff !important; }

/* Select2 Custom End */
@media (max-width: 766px) {
  .pincode-input {
    width: 35px !important;
    font-size: 16px !important;
    line-height: 0 !important; } }

@media (max-width: 375px) {
  .pincode-input {
    width: 30px !important;
    height: 45px !important; } }

@media (max-width: 766px) {
  .pincode-input:not(:last-child) {
    margin-right: 8px !important; } }

@media (max-width: 375px) {
  .pincode-input:not(:last-child) {
    margin-right: 6px !important; } }

.videoContainer {
  position: absolute;
  top: 350px;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -10; }
  @media (max-width: 1366px) {
    .videoContainer {
      width: 1190px;
      height: 650px; } }
  @media (max-width: 1200px) {
    .videoContainer {
      display: none; } }

.registerPopupInformationBox {
  position: absolute;
  text-align: center;
  color: #494949;
  font-size: 16px;
  top: 420px; }
  @media (min-width: 992px) and (max-width: 1029px) {
    .registerPopupInformationBox {
      top: 450px !important; } }
  @media (min-width: 767px) and (max-width: 1029px) {
    .registerPopupInformationBox {
      top: 300px;
      font-size: 14px; } }
  @media (max-width: 766px) {
    .registerPopupInformationBox {
      top: 280px;
      font-size: 12px; } }
  @media (max-width: 375px) {
    .registerPopupInformationBox {
      top: 200px; } }
  .registerPopupInformationBox .registerPopupInformationBoxTitle {
    color: #ff5757;
    font-size: 25px;
    font-weight: 600; }
    @media (min-width: 767px) and (max-width: 1029px) {
      .registerPopupInformationBox .registerPopupInformationBoxTitle {
        font-size: 20px; } }
    @media (max-width: 766px) {
      .registerPopupInformationBox .registerPopupInformationBoxTitle {
        font-size: 18px; } }
  .registerPopupInformationBox .registerPopupInformationBoxButton {
    background: #ff5757;
    width: 60%;
    color: white;
    font-size: 18px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    padding: 15px 5px 15px 5px; }
    @media (min-width: 767px) and (max-width: 1029px) {
      .registerPopupInformationBox .registerPopupInformationBoxButton {
        font-size: 14px; } }
    @media (max-width: 766px) {
      .registerPopupInformationBox .registerPopupInformationBoxButton {
        font-size: 12px; } }

.modal-content {
  border: 0;
  background-color: transparent; }

.KVKK {
  background-color: #fff; }

/*
.popupBackground {
    @include large {
        position: absolute;
        top: 370px;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -10;
        background-color: #fce5dc;
        width: 900px;
        height: 700px;
        border-radius: 50px;
    }

    @media (min-width: 992px) and (max-width: 1029px) {
        position: absolute;
        top: 370px!important;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -10;
        background-color: #fce5dc;
        width: 900px;
        height: 700px!important;
        border-radius: 50px;
    }

    @include mSmall {
        position: absolute;
        top: 320px;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -10;
        background-color: #fce5dc;
        width: 700px;
        height: 600px;
        border-radius: 50px;
    }

    @include mXSmall {
        position: absolute;
        top: 260px;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -10;
        background-color: #fce5dc;
        width: 500px;
        height: 450px;
        border-radius: 50px;
    }

    @media (max-width: 572px) {
        width: 100%;
    }

    @include mXXSmall {
        position: absolute;
        top: 220px;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -10;
        background-color: #fce5dc;
        width: 100%;
        height: 400px;
        border-radius: 50px;
    }
}*/
.popupBackground {
  display: none;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -10;
  background-color: #fce5dc;
  border-radius: 50px; }
  @media (max-width: 1200px) {
    .popupBackground {
      display: block;
      top: 370px;
      width: 900px;
      height: 700px; } }
  @media (min-width: 992px) and (max-width: 1029px) {
    .popupBackground {
      top: 370px !important;
      height: 700px !important; } }
  @media (min-width: 767px) and (max-width: 1029px) {
    .popupBackground {
      top: 320px;
      width: 700px;
      height: 600px; } }
  @media (max-width: 766px) {
    .popupBackground {
      top: 260px;
      width: 500px;
      height: 450px; } }
  @media (max-width: 572px) {
    .popupBackground {
      width: 100%; } }
  @media (max-width: 375px) {
    .popupBackground {
      border-radius: 30px;
      top: 220px;
      width: 97%;
      height: 400px; } }

input[name="studentName"] {
  color: #827979; }
  input[name="studentName"]::placeholder {
    color: #827979; }

input[name="studentSurname"] {
  color: #827979; }
  input[name="studentSurname"]::placeholder {
    color: #827979; }

input[name="schoolNumber"] {
  color: #827979; }
  input[name="schoolNumber"]::placeholder {
    color: #827979; }

@media (max-width: 766px) {
  .kvkkWrapper {
    margin-left: 30px;
    top: 5px; } }

.select2-container {
  -o-transform: none !important;
  -moz-transform: none !important;
  -ms-transform: none !important;
  -webkit-transform: none !important;
  transform: none !important; }

@media (max-width: 766px) {
  .close-image {
    width: 200% !important;
    max-width: 200% !important;
    position: relative;
    right: 88%; } }

/*# sourceMappingURL=register.css.map */