*{
  box-sizing: border-box;
}
.h-peserta{
  height: 85px;
  background:url('../img/1.jpg');
  width: 100%;
  color: white;
  padding: 10px;
  text-align: center;
  background-position: bottom left;
  background-size: cover;
}

form{
  margin: 10px 0;
  border-bottom: 1px solid #ccc;
}
.border-on{
  border: 1px solid black;

}
.padding-tb-30{
  padding: 30px 0;
}
label.col-form-label-sm.radio{
  margin-top:-1px;
  margin-bottom:-1px;
}
.padding-l-20{
  padding-left: 30px;
}
em{
  font-weight: bold;
}
tr.row{
  margin: auto;
}
.required-label:before{
  content: "* ";
  color: red;
}
.btn-login{
  background-color: #0312BB;
  color: white;
  display: block;
  border-radius: 30px;
  width: 125px;
  /* padding: 5px auto 10px auto; */
  margin-left: auto;
  margin-right: auto;
}
.btn-login:hover{
  background-color: #2d369e;
  color: rgba(255, 255, 255, 0.87);
  position: relative;
}

/* input#tgl_lahir:invalid + span.validity:after {
  content: '✖';
  position: relative;
  top: 3px;
  left: 5px;
}

input#tgl_lahir:valid + span.validity:after {
  content: '✓';
  position: relative;
  top: 3px;
  left: 5px;
} */

.txt-format{
  position: relative;
  top: 1px;
  left: 5px;
}
.none{
  display:none;
}
.margin-off{
  margin:0px;
}
.nav-item.nav-link{
  font-size:15px;
}
.padding-data{
  padding:25px;
}
.margin-b-20{
  margin-bottom: 20px;
}
.margin-t-10{
  margin-top: 10px;
}
.table-border-saudara{
  border: 1px solid #58595a;
}
.btn-edit-done{
  width:25%; 
  margin-left:auto; 
  margin-right:auto; 
  color:white;
}
.ul-custom{
  position: relative;
  display: block;
  width : 80%;
  margin-left: auto;
  margin-right: auto;
}
.ul-custom>li>img{
  border-radius: 50%;
  width:50%;
  margin-left:auto;
  margin-right:auto;
  display: block;
}
.ul-custom>li>a{
  display:block;
  color: white;
  text-align: center;
}
.ul-custom>li>a:hover{
  color: #999999;
  text-decoration: none;
}
.btn-expand-custom{
  width: 100vw;
  display: block;
  background-color: #844388;
}
.toogler-icon-custom{
  margin:5px auto;
  display: block;
  width:50px !important;
  height:30px !important;
  background-image: url(../img/toogler.png);
  background-size : 37px 25px;
  background-repeat: no-repeat;

}
.navbar-custom{
  width:100%;
  background: url('../img/1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom left;
  border-radius:10%;
  position:relative;
}
.shadowing{
  box-shadow:  5px 0 7px 0 rgba(0, 0, 0, 0.3);

}
.toogler-icon-custom{
  margin:5px auto;
  display: block;
  width:50px !important;
  height:30px !important;
  background-image: url(../img/toogler.png);
  background-size : 37px 25px;
  background-repeat: no-repeat;
}
.logo-header{
  width: 50px; 
  
}
/*.clearfix{
  overflow: auto;
}*/
.copyright-header{
  font-size: 15px;
}
.bg-login{
  background:url('../img/1.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100vw;
}
.containerLogin{
  /*border:1px solid black;*/
  position: relative;
  top: 48%;
  transform: perspective(1px) translateY(-52%);
  width:600px;
  height: 350px;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  border-radius: 37px;
  font-size: 10px;
}
.btnRegisterWrapper{
  width: 270px;
  /*border: 1px solid black;*/
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  margin-bottom: 10px;
  height: 35px;
}
@media only screen and (min-width: 1400px) {
  .containerLogin{
    /*border:1px solid black;*/
    position: relative;
    top: 48%;
    transform: perspective(1px) translateY(-52%);
    width:750px;
    height: 450px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    border-radius: 37px;
    font-size: 13px;
  }
  .btnRegisterWrapper{
  width: 300px;
  /*border: 1px solid black;*/
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  margin-top: 20px;
  margin-bottom: 10px;
  height: 35px;
}
}
section.login{
  position: relative;
  width: 60%;
  margin-left: 0px;
  height: 100%;
  padding-top: 35px;
  color: #8d8b8b;
}
section.register{
  position: relative;
  width: 60%;
  margin-left: 0px;
  height: 100%;
  padding-top: 15px;
  color: #8d8b8b;
}
.containerLoginIcon{
  /*border: 1px solid black;*/
  width:40%;
  height: 100%;
  position: relative;
  float: left;
  border-radius: 37px 0 0 37px;
  background: url('../img/1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  margin-left:-2px;
}
.imgLoginLogo{
  width: 65%;
  margin-left: auto;
  margin-right: auto;
  top:50%;
  transform: perspective(1px) translateY(-50%);
  position: relative;
  display: block;
}

.login-text{
  width: 75%;
  text-align: center;
}

.iconLogin{
  width: 5%;
  float: left;
  display: inline-block;
}

.linkRegister{
  color: #6a467b;
}

.linkRegister:hover{
  color: #321a3e;
}

.input-group-text{
  width: 35px;
}

.loginTitle{
  margin-top: 20px;
  text-align: center;
  color: #6a467b;
}
section>section.bg-light{
  width: 100%;
  margin-left: 0;
}
@media only screen and (min-width: 600px) {
  .f-right{
    float : right;
  }
  .f-left{
    float : left;
  }
}

@media only screen and (max-width: 600px) {
  
  .containerLogin{
    /*border:1px solid black;*/
    position: relative;
    top: 48%;
    transform: perspective(1px) translateY(-52%);
    width:350px;
    height: 350px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    border-radius: 37px;
    font-size: 10px;
  }
  /* h3 {
    font-size: 15px;
  } */
  .btn-login{
    background-color: #0312BB;
    color: white;
    display: block;
    border-radius: 30px;
    width: 80px;
    /*padding: 5px auto 10px auto;*/
    margin-left: auto;
    margin-right: auto;
  }

  .btnRegisterWrapper {
    width: 100%;
  }

}


.title-login {
  text-align: center;
  color: white;
  margin-top: 30px;
  font-size: 16px;
}

.nama-kampus-login {
  color: white;
  text-align: center;
  margin-top: 100px;
  font-size: 15px;
  margin-top: 140px;
}

.containerLoginIcon img {
  margin-top: -80px;
}

.bg-navy { 
  background-image: linear-gradient(150deg, #3f51b5 32%, #7754af 71%);
}  

.copyright {
color: #FFF; 
}

body {
    overflow-x: hidden;
}

.shadow {
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

.form-control {
    padding: 19px!important;
}
.input-group-text {
    padding-left: 15px!important;
    width: 45px!important;
}

.nopad {
    padding:0px!important;

}
 
form { 
    border:none!important; 
}

form .form-control {
  border: none!important;
  background: #eae8ff!important;
  border-top-right-radius: 33px!important;
  border-bottom-right-radius: 33px!important;
}

.input-group-text { 
  color:#8470ff;
  background-color: #eae8ff!important;
  border: 1px solid #eae8ff!important; 
}

.tititel {   
  color:#9b94af;
}

.tittul {
  color:#9b94af;
}

form .input-group-text {
    border-top-left-radius: 33px!important;
    border-bottom-left-radius: 33px!important; 
}

.content {  
  background: #DDD;
}

.row-flex {
  display: flex;
  flex-wrap: wrap;
}

.nopad-right {
    background-size: 38vh  74vh; 
    background-repeat: no-repeat; 
    background-color: #FFF;
}
 
 

.row-eq-height {
    display: -webkit-box!important;
    display: -webkit-flex!important;
    display: -ms-flexbox!important;
    display: flex!important;
}

.carousel-item {
   
background: #7754af;
  height: 70vh;
}

.center-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 23%;
  position: relative;
  top: 66px;
}

.nopad-left {
  padding: 12px!important;
  background: #7754afb8;
}

.alert-error{
  color:#b94a48;
  background-color:#f2dede;
  border-color:#eed3d7
}

.alert-danger h4,.alert-error h4{
  color:#b94a48
}
/* .btn-primary {
color: #fff;
background-color: #7754af;
border-color: #7754af;
} */



  	/* Custom, iPhone Retina */ 
    @media only screen and (min-width : 220px) {
      .show-mobile {
        display:block;
      }
      .show-dekstop {
        display:none;
      }
      .page-header-fixed {
        padding-top: 4px;
      }
  
      .col-meow {
        display: none;
      } 
      footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: auto;
        width: 100%; 
        color: white;
        text-align: center;
      }
    }
  
    @media only screen and (min-width : 320px) {
      .show-mobile {
        display:block;
      }
      .show-dekstop {
        display:none;
      }
      .page-header-fixed {
        padding-top: 4px;
      }
  
      .col-meow {
        display: none;
      } 
      footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%; 
        color: white;
        text-align: center;
      }
    }
  
      /* Extra Small Devices, Phones */ 
      @media only screen and (min-width : 480px) {
      .show-mobile {
        display:block;
      }
      .show-dekstop {
        display:none;
      }
      .page-header-fixed {
        padding-top: 4px;
      }
      .col-meow {
        display: none;
      } 
      footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: auto;
        width: 100%; 
        color: white;
        text-align: center;
      }
      }
  
      /* Small Devices, Tablets */
      @media only screen and (min-width : 768px) {
          .flexs { 
        display: flex;
        justify-content: center; 
      }
      .show-mobile {
        display:block;
      }
      .show-dekstop {
        display:none;
      }
      .page-header-fixed {
        padding-top: 60px;
      }
      .col-meow {
        display: none;
      } 
      footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%; 
        color: white;
        text-align: center;
      }
      }
  
      /* Medium Devices, Desktops */
      @media only screen and (min-width : 992px) {
      .flexs { 
        display: flex;
        justify-content: center; 
      }
      .page-header-fixed {
        padding-top: 60px;
      }
      .show-mobile {
        display:none;
      }
      .show-dekstop {
        display:block;
      }
      .col-meow {
        display: block;
      }
      
      footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%; 
        color: white;
        text-align: center;
      }

      .bg-logins {
        padding-top:38px;
      }

      }
      
  
       /* Large Devices, Wide Screens */
       @media only screen and (min-width : 1024px) {
      .flexs { 
        display: flex;
        justify-content: center; 
      }
      .page-header-fixed {
        padding-top: 60px;
      }
    
      .show-mobile {
        display:none;
      }
      .show-dekstop {
        display:block;
      }
      .col-meow {
        display: block;
      }
  
      footer {
        position: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%; 
        color: white;
        text-align: center;
      }

      .bg-logins {
        padding-top:38px;
      }

      }

  
      /* Large Devices, Wide Screens */
      @media only screen and (min-width : 1200px) {
      .flexs { 
        display: flex;
        justify-content: center; 
      }
      .page-header-fixed {
        padding-top: 60px;
      }
    
      .show-mobile {
        display:none;
      }
      .show-dekstop {
        display:block;
      }
      .col-meow {
        display: block;
      }
  
      footer {
        position: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%; 
        color: white;
        text-align: center;
      }
      .bg-logins {
        padding-top:38px;
      }
  }

      
        /* Large Devices, Wide Screens */
        @media only screen and (min-width : 1440px) {
          .flexs { 
            display: flex;
            justify-content: center; 
          }
          .page-header-fixed {
            padding-top: 60px;
          }
        
          .show-mobile {
            display:none;
          }
          .show-dekstop {
            display:block;
          }
          .col-meow {
            display: block;
          }
      
          footer {
            position: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%; 
            color: white;
            text-align: center;
          }
          .bg-logins {
            padding-top:38px;
          }
      }
  
  
  
      /* Large Devices, Wide Screens */
      @media only screen and (min-width : 1517px) {
  
      footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%; 
        color: white;
        text-align: center;
      }
      .bg-logins {
        padding-top:38px;
      }
  
    }
    
      /* Large Devices, Wide Screens */
      @media only screen and (min-width : 2560px) {
  
      footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%; 
        color: white;
        text-align: center;
      }

      .bg-logins {
        padding-top:38px;
      }
  
  
    }
  
    .col-meow {
      width: 68.666667%;
      left: 15px;
      position: relative;
    }
  
    .logo-bro {
      background-color: #1fd1f9;
      background-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%);
     }
     .box-shadow {
      box-shadow: 0 6px 16px -12px rgb(0 0 0 / 56%),0 4px 25px 0 rgb(0 0 0 / 12%),0 8px 10px -5px rgb(0 0 0 / 20%)!important;
      border-radius: 17px;
     }
  
     .alert.alert-warning {
      border-radius: 0px;
     }

     .input-group {
       padding-left:22px;
       padding-right:22px;
     }

     .login-texts  { 
      border-top: 3px solid #DDD;
      padding-top: 9px;
     }

   

.bg-navy {
  padding-top:11px;
}

.shadow {
  box-shadow: 0 6px 16px -12px rgb(0 0 0 / 56%),0 4px 25px 0 rgb(0 0 0 / 12%),0 8px 10px -5px rgb(0 0 0 / 20%)!important;
}

.p-agkj {
  color: #FFF; margin: 0px; padding-top: 17px; font-weight: bold; font-size: 13px;
}
/* 
.rad {
  border-bottom-left-radius: 18px; border-top-left-radius: 18px;
}

.w-100 {
  border-radius: 13px;
} */