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

.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: 500px; 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; background: none; outline: none; border-bottom: 1px solid white; color: white; text-align: left; margin: 10px 30px 5px; border-radius:0 }
.register .box input, .register .box select { border: none; background: none; outline: none; border-bottom: 1px solid white; color: white; text-align: left; margin: 1px; border-radius:0; font-size:0.8em; }
.select-title { width:80%; background: rgba(0, 0, 0, 0.3);}
.login .box button, .register .box button { background: #258CF2; padding: 10px; padding-left: 30px; padding-right: 30px; color: white; cursor: pointer; outline: none; border: none; margin-top: 15px; /*width: -webkit-max-content; width: -moz-max-content; width: max-content;*/ border-radius: 31px; }
.login .box button:hover, .register .box button:hover { background: #75fd7c; border-radius: 10px; color: white; -webkit-transition: 0.5s; transition: 0.5s; }
.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; }
.registration-links { border:1px solid #258CF2; border-radius:10px; padding:0; margin: 15px 30px; }
.registration-links p { font-size: 13px;margin:0;padding:10px; }
p.registrationlink  { font-size: 14px;margin-top:10px; }
@-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: 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) {
    .login .box, .register .box  { min-width: 290px; }
    .login .box a, .register .box a { color: #258CF2; text-decoration: none; }
    .login .box input { border: none; background: none; outline: none; border-bottom: 1px solid #6e6e6e; color: #FFF; text-align: left; width: 88%; margin-top: 9px; font-size:10px }
    .hidemobile {display:none;}
    .register .box input  { border: none; background: none; outline: none; border-bottom: 1px solid #6e6e6e; color: #FFF; text-align: left; margin: 1px; font-size:10px  }
    .login .box button, .register .box button { background: #258CF2; padding: 5px; padding-left: 15px; padding-right: 15px; color: white; cursor: pointer; outline: none; border: none; margin-top: 10px; /*width: -webkit-max-content; width: -moz-max-content; width: max-content;*/ border-radius: 31px; }
    .registration-links { margin: 10px 10px; }
    .registration-links p { font-size: 8px; }
    p.registrationlink { font-size: 12px; }

    #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; }