@font-face {
    font-family: "Montserrat-Light";
    src: url(../lib/bootstrap/fonts/Montserrat/Montserrat-Light.ttf);
}

@font-face {
    font-family: "Montserrat-Semibold";
    src: url(../lib/bootstrap/fonts/Montserrat/Montserrat-SemiBold.ttf);
}


/* untuk mengatur background warna body*/
body {
    background-color: #f5f6fa;
}

/* untuk mengatur style card*/
.card {
    background-color: #384149;
    padding: 0px 22px 3px;
    margin: auto;
    display: block;
    position: relative;
    top: 50px;
    box-shadow: 0 5px 10px rgba(0,0,0,0), 0 2px 7px rgba(0,0,0,0.1);
}

.btn-back {
    width: 100%;
    margin: 20px 0 0
}

/* untuk mengatur button-submit*/
.button-submit {
    width: 100%;
    background-color: #4183d7;
    border-color: #4183d7;
    opacity: 0.9;
    color: white;
    font-weight: bold;
    font-size: 12pt;
}

.button-submit:focus {
   background-color: #4183d7;
   border-color: #4183d7;
   color: white;
}

/* mengatur style button register*/
.button-register {
    width: 100%;
    background-color: orange;
    border-color: orange;
    color: white;
    font-weight: bold;
    font-size: 12pt;
}

.button-register:hover {
    background-color: darkorange;
    border-color: darkorange;
    color: white;
}

.button-register:focus {
    background-color: orange;
    border-color: orange;
    color: white;
}


/* untuk mengatur title apm cloud*/
.title-APM-CLOUD {
    text-align: center;
    color: white;
    font-family: Montserrat-Light;
    font-size: 30pt;
}

/* untuk mengatur title 'cloud' */
.text-cloud {
    font-family: Montserrat-Semibold;
}


/* untuk mengatur warna validasi text*/
.text-danger {
    color: #e3e9be !important;
    font-size: 10pt;
}


/* untuk mengatur style tulisan please complete */
.textPleaseComplete {
    margin-bottom: 7%;
    color: white;
    text-align: center;
    position: relative;
    bottom: 10px;
}

.error-msg {
    font-size: 14px;
    color: #f7fbc7;
    font-weight: 500;
}

/* untuk mengatur style form input*/
.form-control {
    background-color: transparent;
    color: white;
}

/* untuk focus inputan field*/
.form-control:focus {
    background-color: transparent;
    color: white;
}

/* untuk merubah bg color autofill chrome*/
@-webkit-keyframes autofill {
    to {
        color: white;
        background: transparent;
    }
}

/* untuk merubah bg color autofill chrome*/
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

select option {
    color: black;
}

/* untuk mengatur tag a pada nav item*/
.nav-item> a{
    text-decoration: none;
}

/* untuk mengatur style label secara global*/
label{
    color: white;
    margin-bottom: 0;
}

/* untuk mengatur style card change password*/
.cardChangePassword {
    padding-bottom: 20px;
    width: 35%;
}

.negativeBar {
    background-color: #E8E8E8;
}

.hideBar .positiveBar {
    display: none;
    width: 0%;
}

.hideBar .negativeBar {
    display: none;
    width: 100%;
}

.pwdBlankBar .positiveBar {
    width: 0%;
}

.pwdBlankBar .negativeBar {
    width: 100%;
}

.pwdWeakBar .positiveBar {
    background-color: Red;
    width: 30%;
}

.pwdWeakBar .negativeBar {
    width: 70%;
}

.pwdFairBar .positiveBar {
    background-color: #FFCC33;
    width: 65%;
}

.pwdFairBar .negativeBar {
    width: 35%;
}

.pwdStrengthBar .positiveBar {
    background-color: Green;
    width: 100%;
}

.pwdStrengthBar .negativeBar {
    width: 0%;
    color: yellow;
    padding: 0;
}