/* ==========================
   RESET
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Segoe UI",Arial,sans-serif;
}


/* ==========================
   BODY PREMIUM BACKGROUND
========================== */
/* ==========================
   BLUE GREEN HD BACKGROUND
========================== */

body {

  min-height:100vh;

  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;

  padding:20px;


  background:

  radial-gradient(
    circle at top left,
    rgba(0,198,255,0.45),
    transparent 35%
  ),

  radial-gradient(
    circle at bottom right,
    rgba(0,230,118,0.35),
    transparent 40%
  ),

  linear-gradient(
    135deg,
    #004E92 0%,
    #0077B6 45%,
    #00B894 100%
  );

}


/* ==========================
   LOGIN BOX
========================== */

.login-container{

    width:100%;
    max-width:430px;

    padding:4px;

    border-radius:26px;


    background:

    linear-gradient(
        135deg,
        #00C6FF,
        #0072FF,
        #00E676
    );


    box-shadow:

    0 30px 80px rgba(0,0,0,.55),
    0 0 35px rgba(0,198,255,.25);

}


/* ==========================
   INNER CARD
========================== */

.login-inner{


    background:#ffffff;


    border-radius:22px;


    padding:42px 32px;


    text-align:center;


    box-shadow:

    inset 0 0 25px rgba(0,198,255,.08);

}



/* ==========================
   LOGO
========================== */

.login-inner img{

    max-width:220px;

    margin-bottom:20px;


    filter:

    drop-shadow(
        0 10px 18px rgba(0,0,0,.25)
    );

}



/* ==========================
   TITLE
========================== */

.login-inner h1{


    font-size:25px;

    font-weight:800;

    margin-bottom:20px;


    color:#0072FF;


}



/* ==========================
   MESSAGE
========================== */

.login-inner div{

    font-size:14px;

    color:#008FA3;

    margin-bottom:12px;

}



/* ==========================
   LABEL
========================== */

.login-inner label{


    display:block;

    text-align:left;


    font-size:13px;

    font-weight:700;


    color:#003B4A;


    margin:12px 0 7px;

}



/* ==========================
   INPUT
========================== */


.login-inner input[type="text"],
.login-inner input[type="password"]{


    width:100%;


    padding:14px 15px;


    border-radius:12px;


    border:1px solid #B8E3E8;


    background:#F5FCFF;


    font-size:14px;


    transition:.3s;


}



.login-inner input:focus{


    outline:none;


    background:#fff;


    border-color:#00C6FF;


    box-shadow:

    0 0 0 4px rgba(0,198,255,.15);

}



/* ==========================
   BUTTON
========================== */


.login-inner button{


    width:100%;


    padding:15px;


    margin-top:20px;


    border:none;


    border-radius:14px;


    font-size:16px;


    font-weight:800;


    color:white;


    cursor:pointer;



    background:


    linear-gradient(
        135deg,
        #00C6FF,
        #0072FF,
        #00E676
    );



    box-shadow:


    0 15px 35px rgba(0,114,255,.35);


    transition:.3s;

}



.login-inner button:hover{


    transform:

    translateY(-3px);


    box-shadow:


    0 20px 45px rgba(0,198,255,.45);


}



/* ==========================
   FOOTER
========================== */

.footer{


    position:fixed;


    bottom:12px;


    width:100%;


    text-align:center;


    font-size:12px;


    color:rgba(255,255,255,.85);


}



/* ==========================
   MOBILE
========================== */


@media(max-width:500px){


.login-inner{

    padding:30px 20px;

}


.login-inner img{

    max-width:200px;

}


.login-inner h1{

    font-size:21px;

}


}