@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

body { overflow:hidden}
#registerBox { margin: auto; padding: 10vh 2vw; }
#loginBox { margin: auto; padding: 25vh 2vw; }
.download-box {padding: 10px; background-color: #FFF; border-radius:10px; }
.login, .register { -webkit-box-flex: 0.3; -ms-flex: 0.3; flex: 0.3; text-align: left; margin-right: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 100%; }
.login .box, .register .box { padding: 10px; min-width: 400px; text-align: center; background: rgba(0, 0, 0, 0.747); text-align: center; color: white; }
.login .box h3, .register .box h3 { color: white; }
.login .box a, .register .box a { color: #258CF2; text-decoration: none; }
.login .box a:hover, .register .box a:hover { color: #75fd7c; }
.login .box input, .login .box select { border: none; outline: none; border-bottom: 1px solid white; text-align: left; border-radius: 0; margin: 10px 25px !important; background: #FFF; color: #000; }
.register .box input, .register .box select { border: none; outline: none; border-bottom: 1px solid white; text-align: left; border-radius: 0; font-size: 0.8em; margin: 3px 0; padding-left: 5px; background: #FFF; color: #000; }
.select-title { width:100%; background: rgba(0, 0, 0, 0.3);}
.register .form-control { padding:1px; }
option { background-color: rgba(0,0,0,0.3); }
.register .input-no-left-padding { padding-left:0;}
.register .input-no-right-padding { padding-right:0;}
#mainDiv { width: 300px; height: 300px; margin: 150px auto; -webkit-perspective: 600px; perspective: 600px; -webkit-box-flex: 0.5; -ms-flex: 0.5; flex: 0.5; }
#boxDiv { width: 300px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: rotate 15s linear infinite; animation: rotate 15s linear infinite; }
#boxDiv div { position: absolute; width: 300px; height: 300px; color: white; }
#front { -webkit-transform: translateZ(150px); transform: translateZ(150px); background: black; border-radius: 20px; background-position: center; background-repeat: no-repeat; background-size: cover; background-position: center; }
#back { -webkit-transform: rotateY(180deg) translateZ(150px); transform: rotateY(180deg) translateZ(150px); background: #101010; background-position: center; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 20px; }
#left { -webkit-transform: rotateY(-90deg) translateX(-150px); transform: rotateY(-90deg) translateX(-150px); -webkit-transform-origin: left; transform-origin: left; background: black; background-position: center; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 20px; }
#right { -webkit-transform: rotateY(90deg) translateX(150px); transform: rotateY(90deg) translateX(150px); -webkit-transform-origin: right; transform-origin: right; background: #101010; background-position: center; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 20px; }
#top { -webkit-transform: rotateX(-90deg) translateY(-150px); transform: rotateX(-90deg) translateY(-150px); -webkit-transform-origin: top; transform-origin: top; background: #45679d; background-position: center; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 20px; }
#bottom { -webkit-transform: rotateX(90deg) translateY(150px); transform: rotateX(90deg) translateY(150px); -webkit-transform-origin: bottom; transform-origin: bottom; background: #45679d; background-position: center; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 20px; }
.btn-download { color: #fff; background-color: #08ab7c; padding: 3px 10px; border-radius: 13px; }
@-webkit-keyframes rotate {
    0% { -webkit-transform: rotateY(0); transform: rotateY(0); }
    100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); }
}
.text-message { text-align: left; padding-left:25px; }
.link-message { text-align: right }
@keyframes rotate {
    0% { -webkit-transform: rotateY(0); transform: rotateY(0); }
    100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); }
}
.shadow { width: 400px; height: 400px; background: rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 50px 50px rgba(0, 0, 0, 0.5); box-shadow: 0 0 50px 50px rgba(0, 0, 0, 0.5); -webkit-transform: rotateX(90deg) translateZ(-250px) rotateY(180deg) translateX(0px); }
.hidemobile {display:flex;}

@media only screen and (max-width: 800px) {
    #registerBox { margin: auto; padding: 3vh; }
    #loginBox { margin: auto; padding:26vh 2vw }
    .login .box, .register .box  { min-width: 290px; }
    .hidemobile {display:none;}
    .text-message { font-size:12px; text-align:left }
    .link-message { font-size: 12px; text-align: right }
    input, select, button { max-height:20px; }
    #mainDiv { width: 200px;height: 200px; margin: 90px 50px; -webkit-perspective: 600px; }
    #boxDiv { width: 200px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: rotate 15s linear infinite; animation: rotate 15s linear infinite; }
    #boxDiv div { position: absolute; width: 200px; height: 200px; color: white; }
    #front { -webkit-transform: translateZ(100px); transform: translateZ(100px); background: black; border-radius: 20px; background-position: center; background-repeat: no-repeat; background-size: cover; background-position: center; }
    #back { -webkit-transform: rotateY(180deg) translateZ(100px); transform: rotateY(180deg) translateZ(100px); background: #101010; background-position: center; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 20px; }
    #left { -webkit-transform: rotateY(-90deg) translateX(-100px); transform: rotateY(-90deg) translateX(-100px); -webkit-transform-origin: left; transform-origin: left; background: black; background-position: center; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 20px; }
    #right { -webkit-transform: rotateY(90deg) translateX(100px); transform: rotateY(90deg) translateX(100px); -webkit-transform-origin: right; transform-origin: right; background: #101010; background-position: center; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 20px; }
    #top { -webkit-transform: rotateX(-90deg) translateY(-100px); transform: rotateX(-90deg) translateY(-100px); -webkit-transform-origin: top; transform-origin: top; background: #45679d; background-position: center; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 20px; }
    #bottom { -webkit-transform: rotateX(90deg) translateY(100px); transform: rotateX(90deg) translateY(100px); -webkit-transform-origin: bottom; transform-origin: bottom; background: #45679d; background-position: center; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 20px; }
    @-webkit-keyframes rotate {
        0% { -webkit-transform: rotateY(0); transform: rotateY(0); }
        100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); }
    }
    @keyframes rotate {
        0% { -webkit-transform: rotateY(0); transform: rotateY(0); }
        100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); }
    }
    .shadow { width: 100px; height: 100px; background: rgba(0, 0, 0, 0.082); -webkit-box-shadow: 0 0 50px 50px rgba(0, 0, 0, 0.082); box-shadow: 0 0 50px 50px rgba(0, 0, 0, 0.082); -webkit-transform: rotateX(90deg) translateZ(-250px) rotateY(180deg) translateX(0px); }
}
input { text-align: left; margin-left: 0px; font-size: 1em; }
label { display: flex; padding-left: 30px; margin-top: 10px; }
.errorlist { color: red; }
.login form input { width: 85% !important; }
.terms { cursor: pointer; }
.intl-tel-input { padding: 5px 0 }
.submitbutton { background-color: #f0f0f0; border: none; color: #000; padding: 5px 15px; text-align: center; text-decoration: none; display: inline-block; margin: 10px 5px 0; border-radius: 15px; max-height:35px; font-size:12px }
.country-name {color:#FFF}
.login .flag-container {margin-left:25px;}
#interestDiv.displayError div.ms-options-wrap button { border:1px solid red; }