body {
    /* background-color:white; */
    background-color: #00bad1;
  }
  .content {
    direction: rtl;
    align-items: center;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    padding-top: 10vh;
    margin: 12vh auto; /* 15% from the top and centered */
    /* margin-top: 10vh; */
    min-height: 45vh;
    color: #0f2c72;
    /* color:white; */
    width: 30vw;
    /* margin-right:20vw; */
    /* margin-left: 35vw; */
    /* border-radius: 10px; */
    background-color: white;
    /* box-shadow: 2px 2px 2px 2px #000000; */
  }
  .buttonStyle {
    border: none;
    background-color: #0f2c72;
    color: white;
    width: 12vw;
    height: 4vh;
    font-size: 25px;
    margin-top: 2vh;
  }
  .effect2 {
    position: relative;
  }
  .effect2:before,
  .effect2:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  .effect2:after {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
  }
  .userNumber {
    width: 20vw;
    height: 3vh;
    /* width: 100%; */
    padding: 5px 10px;
    margin: 4px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 20px;
  }
  
  .hiddenButton {
    background-color: transparent;
  }

  .i :hover {
    background-color: #00bad1;
  }
  #google {
    padding: 10vh 12.5vw 3vh 0vw;
  }
  .warnning {
    color: red;
    font-weight: bolder;
  }
  .header {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 40px;
    padding-top: 10px;
    padding-left: 1vw;
    /* color:#00bad1; */
    color: white;
position:relative;    }
  .logo {
    font-weight: bolder;
    color: #0f2c72;
    /* color:white; */
          /* color:#00bad1; */
font-size:50px;
  }
  .footer {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    text-align: center;
    height: 50px;
    color: #0f2c72;
    margin-top: 5vh;
    position:relative;
  }
  .name {
    font-weight: bolder;
  }
  .wrongInput {
    border: 1px solid red;
    color: red;
  }
  .wrongInput:focus{
    outline: none !important;
    border: 2px solid red;
  }
  .little {
    font-size: 20px;
  }
  .font-xs {
    color: red;
    font-size: 15px;
  }
  #activationNumber{
    font-size:20px;
    margin-top:3vh;
  }

  /* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* 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/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 25vw; /* Could be more or less, depending on screen size */
height:40vh;
border-radius: 10px;
}

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

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
#numberTitle{
/* color:#00bad1; */
/* font-size:25px; */
}

#createActivation{
margin-top: 4vh;
}

.btnSubmit{
/* background-color:#00bad1 ; */
background-color:#0f2c72 ;

color:white;
width:10vw;
height:3vh;
border:none;
/* margin-top:3vh; */
}

.displayNone{
display: none;
}
.displayBlock{
display: block;
}

.headerMobile{
display:none;
}
@media only screen and (max-width:600px) {
.content{
  width:90vw;
  font-size:20px;
}

.userNumber{
  width:60vw;
  height:5vh;
}

.buttonStyle{
  height:5vh;
  width:50vw;
}

.header{
  display:none;
}

.headerMobile{
  display:block;
  font-family: Arial, Helvetica, sans-serif;
  /* font-weight: bold; */
  text-align: center;
}
.icon{
  display:none;
}
#google{
  padding:8vh 30vw 0vh 0vw;
}
}