body{
    overflow-x: hidden;
}
.diterima{
    padding: 2px;
    background: #07db1f;
    color: #000;
    border-radius: 4px;

}
.img-thumbnail{
    width: 100px;
    border-radius: 100px;
    position: relative;
}
@media screen and (min-width: 360px) {
    .img-portofolio{
        width: 100px;
        height: 100px;
        border-radius: 100px;
        text-align: center;
    }
}
@media screen and (min-width: 1200px) {
    .img-portofolio{
        width: 150px;
        height: 150px;
        border-radius: 150px;
        text-align: center;
    }
}



.span-portofolio{
    color: #2e699b;
    font-size: 12px;
}

.has-error{
    padding: 2px;
    background: #ffbf00;
    color: #000;
    border-radius: 4px;

}
.formnotlp{
    width: 80px;
    padding: 12px;
}
.title-login{
    color: #337ab7;
}
.thumbnail-image{
    width: 40px;
    height: 40px;
}
.p-text{
    float: right;
}
.btn-login{
    background: #428bca;
    color: #fff;
}

/*FORM WIZARD*/
.bg-mage{
    background-image: url(../images/wizard-v3.jpg);
    background-image: url(../images/wizard-v3.jpg);
    position: relative;
    top: -30px
}
@media screen and (min-width: 360px) {
  .bg-mage{
        padding: 15px;
    }
}
@media screen and (min-width: 1200px) {
  .bg-mage{
        padding: 100px;
  }
}

.top-content { padding: 40px 0 170px 0; }

.top-content .text { color: #fff; }
.top-content .text h1 { color: #fff; }
.top-content .description { margin: 20px 0 10px 0; }
.top-content .description p { opacity: 0.8; }
.top-content .description a { color: #fff; }
.top-content .description a:hover, 
.top-content .description a:focus { border-bottom: 1px dotted #fff; }

/*.form-box { padding-top: 40px; }*/

.f1 {
    padding: 15px; background: #fff;
    -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
    text-align: center;
}
.f1 h3 { margin-top: 0; margin-bottom: 5px; text-transform: uppercase; }

.f1-steps { overflow: hidden; position: relative; margin-top: 20px; }

.f1-progress { position: absolute; top: 24px; left: 0; width: 100%; height: 1px; background: #ddd; }
.f1-progress-line { position: absolute; top: 0; left: 0; height: 1px; background: #428bca; }


.f1-step { position: relative; float: left; width: 32.333333%; padding: 0 5px; }

.f1-step-icon {
    display: inline-block; width: 40px; height: 40px; margin-top: 4px; background: #ddd;
    font-size: 16px; color: #fff; line-height: 40px;
    -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}
.f1-step.activated .f1-step-icon {
    background: #fff; border: 1px solid #11ce17; color: #11ce17; line-height: 38px;
}
.f1-step.active .f1-step-icon {
    width: 48px; height: 48px; margin-top: 0; background: #428bca; font-size: 22px; line-height: 48px;
}

.f1-step p { color: #ccc; }
.f1-step.activated p { color: #11ce17; }
.f1-step.active p { color: #428bca; }

.f1 fieldset { display: none; text-align: left; }

.f1-buttons { text-align: right; }

.f1 .input-error { border-color: #db0347; }

@media (max-width: 415px) {
    
    h1, h2 { font-size: 32px; }
    
    .f1 { padding-bottom: 20px; }
    .f1-buttons button { margin-bottom: 5px; }

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx),
.f1 {
    padding: 15px; background: #fff;
    -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
    text-align: center;
}
.error{
    color: #db0347;
}
.geterror{
   border-color: #db0347; 
}
.qui{
    color: #555;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;

}
.nav-tabs>li>a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    background: #fff;
}
.nav-tabs>li>a:hover {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    background: #2e6da4;
}
.profile{
    padding: 6px 12px;
}
@media screen and (min-width: 1200px) {
  .notlp{
        width: 148%;
  }
}
@media screen and (min-width: 360px) {
  .notlp{
        width: 280%;
  }
}
@media screen and (min-width: 360px) {
  .imgprof{
        width: 48%;
  }
}
@media screen and (min-width: 1200px) {
  .imgprof{
        width: 81%;
  }
}
.tengah{
    text-align: center;
}

.bg-info, .bg-info>a {
    color: #fff!important;
}
.bg-info {
    background-color: #17a2b8!important;
}
.small-box {
    border-radius: 0.25rem;
    box-shadow: 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);
    display: block;
    margin-bottom: 20px;
    margin-top: 20px;
    position: relative;
}
.small-box>.inner {
    padding: 10px;
}
.small-box>.small-box-footer {
    background: rgba(0,0,0,.1);
    color: rgba(255,255,255,.8);
    display: block;
    padding: 6px 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    z-index: 10;
}
.small-box>.small-box-footer:hover {
    background: rgba(0,0,0,.1);
    color: rgba(255,255,255,.8);
    display: block;
    padding: 6px 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    z-index: 10;
}
.bg-success, .bg-success>a {
    color: #fff!important;
}
.bg-success {
    background-color: #28a745!important;
}
.bg-warning, .bg-warning>a {
    color: #1f2d3d!important;
}
.bg-warning {
    background-color: #ffc107!important;
}
.image-views{
    text-align: center;
}

@media screen and (min-width: 360px) {
  .nama-atas{
       text-align: center;
  }
}
@media screen and (min-width: 1200px) {
  .nama-atas{
       text-align: left;
  }
}
.label-form {
    font-weight: 600;
    padding-bottom: 15px;
    font-size: 15px;
}
.form-check-input{
    margin: 4px;
    width: 16px;
    height: 16px;
    left: 0;
    top: 0;
    z-index: 0;
    transition: .28s ease;
    cursor: pointer;
}
.form-check-label{
    padding-left: 5px;
    font-weight: 600;
}
.form-check-inline{
    padding-bottom: 25px;
}
.php-email-form {
    box-shadow: 0 0 30px rgb(214 215 216 / 40%);
    padding: 30px;
}
section {
    padding: 90px 0;
    overflow: hidden;
}