@font-face{font-family:Malgun;src:url(fonts/malgun-gothic.ttf);}

@font-face{font-family:Yantramanav;src:url(fonts/Yantramanav/Yantramanav-Regular.ttf);}

body{

  background: linear-gradient(135deg, #cfd9df, #e2ebf0);

  background-size: cover;

  background-position: center;

  background-image:url(../images/bg-login.jpg);

  background-size: cover;

}

main{

  min-height: 100vh;

  background-color: rgba(255,255,255,.8);

  padding: 20px;

  display: grid;

  background: rgba(255, 255, 255, 0.25);

}

input{

  font-family: Lexend;

  font-size: 0.8rem !important;

}



/* LOGIN */

#login-content {

  overflow: hidden;

  transition: height 0.5s ease;

}

.login-content{

  font-family: Malgun;

  max-width: 1000px;

  margin: auto;

  border-radius: 20px;

  align-self: center;

  background: rgba(255, 255, 255, 0.25);

  backdrop-filter: blur(12px);

  border-radius: 20px;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);



  .box-login{

    border-radius: 15px;

    grid-gap: 0;

    

    .box-text{

      background: linear-gradient(160deg, #2e3a59, #3e4b6d);

      border-top-left-radius: 15px;

      border-bottom-left-radius: 15px;

      color: #fff;

      display: flex;

      flex-direction: column;

      justify-content: space-between;

      padding: 2em;

      background: #0b668a;

      background: linear-gradient(90deg, rgba(11, 102, 138, 1) 11%, rgba(87, 199, 162, 1) 86%);

    }

    .box-login-form{

      font-size: 0.8rem;

      font-weight: 500;

      color: #515151;

      font-family: Lexend;

      justify-content: center;

      display: grid;

      background-color: #fff;

      border-top-right-radius: 15px;

      border-bottom-right-radius: 15px;

      padding: 100px 0;



      form{

        padding: 50px;



        input,select{

          font-weight: 500;

          color: #222;

          outline: none;

          border: solid 1px #e6e2e2;

          border-radius: 5px;

        }

        input[type="button"]{

          color: #fff;

          background-color: #0a82c4;

          border: none;

          border-radius: 6px;

          padding: 11px 23px;

          background: #0b668a;

          background: linear-gradient(90deg, rgba(11, 102, 138, 1) 11%, rgba(87, 199, 162, 1) 86%);

        }

        .xform-row{

          margin-bottom: 1.4rem;

        }

      }

    }

  }



}

.box-logo-fulltext{



  display: grid;

  width: 100%;

  color: #fff;



  .logo-text{

    font-family: Lexend;

    display: grid;

    font-size: 1.5rem;



    .logo-text-content{

      width: 380px;

      display: grid;

      grid-template-columns: 50px 1fr;



      img{

        width: 100%;

      }

      .logo-txt{

        font-size: 0.8rem;

      }

    }



    .h1{

      display: inline-block;

      font-size: 1.7rem;

    }

  }

}





.app-header p {

  margin: 0.5rem 0 0;

  font-size: 0.95rem;

  line-height: 1.5;

  color: #dbe3f0;

  padding-top: 20px;

}



.app-stats {

  margin-top: 2rem;

}



.stat-item {

  margin-bottom: 1.5rem;

}



.stat-label {

  font-size: 0.9rem;

  opacity: 0.8;

}



.stat-value {

  font-size: 2.8rem;

  font-weight: 700;

  line-height: 1;

}



.stat-value.small {

  font-size: 1.6rem;

  opacity: 0.9;

}

.subtitle{

  font-size: 1.4rem;

  font-family: Petit;

}

.xbox-shadow{

  background-color: #fff;

  margin: 40px;

}

.box-image img{

  max-width: 100%;

}

.btn{

  padding: 8px 30px;

  background-color: #84b9e8;

  border: solid 1px #87a5ec;

  color: #fff;

  cursor: pointer;

}

.btn:hover{

  background-color: #1f82e8;

}

.btn:focus{

  border: solid 1px #87a5ec !important;

}

.box-p{

  font-size: 0.8rem;

}

.box-p a{

  color: #2c86d7;

}

.box-login form{

  max-width: 350px;

}

.dashboard{

  font-family: Yantramanav;

  margin: auto;

  padding: 50px;



  .content{

    font-weight: 300;

    ul{

      list-style: none;

      padding: 0;

      margin: 0;



      li{



        ol{

          padding: 10px 40px;

        }

      }

    }

  }

}

.box-form{

  margin: 0;

  background-color: rgba(255, 255, 255, 0.6);

  box-shadow: 0 5px 5px 0 rgba( 31, 38, 135, 0.37 );

  backdrop-filter: blur( 4px );

  -webkit-backdrop-filter: blur( 4px );

  border-radius: 10px;

  border: 1px solid rgba( 255, 255, 255, 0.18 );

  padding: 30px;

}

.logo{

  display: grid;

  grid-template-columns: 80px 1fr;

  gap: 10px;

}

.logo > div:nth-child(2){

  display: grid;

  align-content: center;

}

.logo-img img{

  max-width: 100%;

}

.logo-text{

  font-size: 1.5rem;

}

.menu{

  display: grid;

  justify-content: end;

  align-content: center;

}

.menu ul{

  padding:0;

  margin:0;

}

.menu ul li{

  float: left;

  padding-right: 40px;

  list-style: none;

}

.menu-list a{

  color: #2c86d7;

}

.menu-btn{

  display: none;

}

.content{

  margin-top: 50px;

  border-top: solid 10px #2c86d7;

  padding-top: 20px;

  line-height: 1.5rem;

}

.content a{

  color: #2c86d7;

}

.aktif,

.menunggu-verifikasi{

  padding: 5px 10px 3px;

  color: #fff;

  border-radius: 5px;

  font-size: 0.8rem;

  margin-left: 10px;

}

.aktif{

  background-color: #23c195;

}

.menunggu-verifikasi{

  background-color: #c1237c;

}

.label-activate{

  display: inline-block;

  background-color: #03bb03;

  padding: 5px 10px;

  border-radius: 10px;

  color: #fff !important;

  margin-top: -10px;

  font-size: 0.85rem;

}

.label-activate:hover{

  background-color: green;

}



/* SURAT */

.surat-content{

  display: grid;

  grid-template-columns: 200px 1fr;

  gap: 10px;

}

.surat-content aside{

  border-right: solid 2px aliceblue;

}

.surat-content aside ul{

  padding: 0;

  margin: 0;

}

.surat-content aside ul li{

  list-style: none;

  padding: 10px;

}

.surat-list{

  border-bottom: solid 1px #f4f3f3;

  padding: 5px 10px;

}

.surat-list:nth-child(even){

  background-color: #f4f4f4;

}

.surat-list:nth-child(odd){

  background-color: #fff;

}

.surat-list:hover{

  background-color: #c0e9ff;

}



/* REPLACE */

.xdatalist-selected{

  font-size: 0.8rem;

  background-color: #4fb8ef;

}

.xgrid-table{

  font-size: 0.9rem;

}

.xform-row input,

.xform-row textarea,

.xform-row select{

  font-family: Lexend;

  color: #6c767b;

  font-size: 0.8rem;

}

.box-warning {

  border: solid 1px #ffe7e7;

  padding: 20px;

  border-radius: 10px;

  font-size: 0.8rem;

  color: #e87777;

  background-color: #fff9f9;

  margin: 20px 0;

}

@media only screen and (max-width : 480px) {

  /* LOGIN */

  .login-content{



    .box-login{

      padding: 20px;



      .box-login-form{

        width: 100%;



        .box-logo-fulltext{



          .logo-text{

            font-size: 0.7rem;



            .logo-text-content{

              width: 310px;

            }

            .h1{

              font-size: 1.1rem;

            }

          }



        }

      }



      .box-text{

        text-align: center;



        .logo-text-content{

          width: 100%;

        }



        .box-image{

          text-align: center;



          img{

            width: 220px;

          }

        }

      }

    }

  }

  .xbox-shadow{

    margin: 20px;

  }

  .dashboard{

    margin: 0;

    padding: 10px;

  }

  .menu ul {

    width: 180px;

    position: absolute;

    z-index: 1;

  }

  .menu ul li {

    float: initial;

    list-style: none;

    text-align: right;

    border-bottom: solid 1px #094579;

    padding: 7px 10px;

    width: 100%;

    color: #fff;

  }

  .menu-list{

    background-color: #0e518c;

    font-size: 0.9rem;

    display: none;

  }

  .menu-list a{

    color: #fff;

  }

  .menu-btn{

    background-color: #073b68;

    display: block;

  }

  .surat-content{

    grid-template-columns: 1fr;

  }

}



/* SCRATCHY */

  .xpopup{

    .xpopup-box::before{

      background: #0b668a;

      background: linear-gradient(90deg, rgba(11, 102, 138, 1) 11%, rgba(87, 199, 162, 1) 86%);

    }

    .xbutton{

      background: #0b668a;

      background: linear-gradient(90deg, rgba(11, 102, 138, 1) 11%, rgba(87, 199, 162, 1) 86%);

      border: none;

    }

  }