@import url('https://fonts.googleapis.com/css?family=Poppins');

/* BASIC */

html {
    background-image: url('image-ground/bg1.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

body {
    font-family: "Poppins", sans-serif;
    height: 100vh;
}

a {
    color: #92badd;
    display: inline-block;
    text-decoration: none;
    font-weight: 400;
}

h2 {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    margin: 40px 8px 10px 8px;
    color: #cccccc;
}


/* STRUCTURE */

.wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    padding: 0px;
}

#formContent {
    -webkit-border-radius: 15px 15px 15px 15px;
    border-radius: 15px 15px 15px 15px;
    background: #FAFAFA;
    opacity: 100%;
    padding: 30px;
    width: 90%;
    max-width: 420px;
    position: relative;
    padding: 0px;
    -webkit-box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.3);
    text-align: center;
}

#formFooter {
    background-color: #f6f6f6;
    border-top: 1px solid #dce8f1;
    padding: 25px;
    text-align: center;
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}


/* TABS */

h2.inactive {
    color: #cccccc;
}

h2.active {
    color: #0d0d0d;
    border-bottom: 2px solid #5fbae9;
}


/* FORM TYPOGRAPHY*/

input[type=button],
input[type=submit],
input[type=reset] {
    background-color: #0CD646;
    border: none;
    color: white;
    padding: 15px 80px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    font-size: 13px;
    -webkit-box-shadow: 0 10px 30px 0 rgba(95, 186, 233, 0.4);
    box-shadow: 0 10px 30px 0 rgba(95, 186, 233, 0.4);
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    margin: 5px 20px 40px 20px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
button.tombol {
    background-color: #0CD646;
    border: none;
    color: white;
    padding: 15px 0;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    font-size: 13px;
    -webkit-box-shadow: 0 10px 30px 0 rgba(54, 250, 6, 0.4);
    box-shadow: 0 10px 30px 0 rgba(54, 250, 6, 0.4);
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    margin: 15px 0 20px 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

button.tombol:hover {
    background-color: #09BD1F;
}

button.tombol:active {
    -moz-transform: scale(0.95);
    -webkit-transform: scale(0.95);
    -o-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
}
input[type=button]:hover,
input[type=submit]:hover,
input[type=reset]:hover {
    background-color: #09BD1F;
}

input[type=button]:active,
input[type=submit]:active,
input[type=reset]:active {
    -moz-transform: scale(0.95);
    -webkit-transform: scale(0.95);
    -o-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
}

select.form-control {
    background-color: #F8F7F7;
    color: black;
    padding: 15px 0;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 5px;
    width: 85%;
    border: 1px solid #D9D3D3;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}

select.form-control:focus {
 background-color: #fff;
 border-bottom: 1px solid #5fbae9;
}


input[type=text],
input[type=password] {
    background-color: #D9D3D3;
    border: none;
    color: black;
    padding: 15px 0;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 5px;
    width: 85%;
    border: 1px solid #D9D3D3;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}

input[type=text]:focus,
input[type=password]:focus {
    background-color: #fff;
    border-bottom: 1px solid #5fbae9;
}

input[type=text]:placeholder,
input[type=password]:placeholder {
    color: #cccccc;
}


/* ANIMATIONS */


/* Simple CSS3 Fade-in-down Animation */

.fadeIndown {
    -webkit-animation-name: fadeIndown;
    animation-name: fadeIndown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}


/* Simple CSS3 Fade-in Animation */

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeIn {
    opacity: 0;
    -webkit-animation: fadeIn ease-in 1;
    -moz-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
}

.fadeIn.seconds {
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.fadeIn.first {
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.fadeIn.second {
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.fadeIn.third {
    -webkit-animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

.fadeIn.fourth {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-delay: 1s;
}


/* Simple CSS3 Fade-in Animation */

.underlineHover:after {
    display: block;
    left: 0;
    bottom: -10px;
    width: 0;
    height: 2px;
    background-color: #56baed;
    content: "";
    transition: width 0.2s;
}

.underlineHover:hover {
    color: #0d0d0d;
}

.underlineHover:hover:after {
    width: 100%;
}


/* OTHERS */

*:focus {
    outline: none;
}

#icon {
    width: 60%;
}

* {
    box-sizing: border-box;
}

.alert{
    position:absolute;
    padding:.75rem 1.25rem;
    margin-bottom:1rem;
    border:1px solid transparent;
    border-radius:.25rem;
    z-index: 9999999 !important;
 }
 .alert-heading{color:inherit}
 .alert-link{font-weight:700}
 .alert-dismissible{padding-right:4rem}
 .alert-dismissible .close{position:absolute;top:0;right:0;padding:.75rem 1.25rem;color:inherit}
 .alert-primary{color:#213770;background-color:#d9e1f7;border-color:#c9d5f4}
 .alert-primary hr{border-top-color:#b4c5f0}
 .alert-primary .alert-link{color:#152449}
 .alert-secondary{color:#383d41;background-color:#e2e3e5;border-color:#d6d8db}
 .alert-secondary hr{border-top-color:#c8cbcf}.alert-secondary .alert-link{color:#202326}
 .alert-success{color:#1e6641;background-color:#d8f3e5;border-color:#c8eedb}
 .alert-success hr{border-top-color:#b5e8ce}.alert-success .alert-link{color:#123f28}
 .alert-info{color:#0b5885;background-color:#d0eeff;border-color:#bee7ff}
 .alert-info hr{border-top-color:#a5deff}.alert-info .alert-link{color:#073956}
 .alert-warning{color:#806013;background-color:#fdf1d3;border-color:#fdebc2}
 .alert-warning hr{border-top-color:#fce3a9}.alert-warning .alert-link{color:#543f0c}
 .alert-danger{color:#71132a;background-color:#f7d3dc;border-color:#f4c2ce}.alert-danger hr{border-top-color:#f0acbd}
 .alert-danger .alert-link{color:#450c1a}.alert-light{color:#7c7c7c;background-color:#fcfcfc;border-color:#fafafa}
 .alert-light hr{border-top-color:#ededed}.alert-light .alert-link{color:#636363}
 .alert-dark{color:#1b1e21;background-color:#d6d8d9;border-color:#c6c8ca}
 .alert-dark hr{border-top-color:#b9bbbe}
 .alert-dark .alert-link{color:#040505}
 .alert-focus{color:#23212c;background-color:#dad9dd;border-color:#cbcacf}
 .alert-focus hr{border-top-color:#bebdc3}
 .alert-focus .alert-link{color:#0c0b0f}
 .alert-alternate{color:#3f2848;background-color:#e4dbe8;border-color:#d9cdde}
 .alert-alternate hr{border-top-color:#cdbed4}
 .alert-alternate .alert-link{color:#221627}