.hide{
	display: none;
}

.form_input{
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid black;
}

.form_input label{
  min-width: 100px;
  display: inline-block;
}
.form_input select{
  width: 100%;
  padding:5px;
  margin:5px;
  height: 30px;
  text-align: right;
}

.form_input input[type=text]{
  border:0px;
  margin-bottom:5px;
  text-align: right;
}

.w-200{
  width: 200px;
}

.w-300{
  width: 300px;
}

.w-full{
  width: 100%;
}

#popup_wrapper_top{
	width:100%;
	height: 100%;
	background:#000000bd;
	position:fixed;top:0px;
	z-index: 999;
	    margin-left: auto;
    margin-right: auto;
        max-width: 441px;
}

#popup_bg_top{
	position: fixed;
    top: 0px;
    background: rgb(250 250 250 / var(--tw-bg-opacity));
    border:1px solid rgb(250 250 250 / var(--tw-bg-opacity));
    z-index: 1000;
    width: 100vw;
    padding: 15px 20px 5px 20px;
    text-align: center;
    border-radius: 0 0 20px 20px;
    max-width: 441px;
}

#popup_sign_top{
	background: #80808047;
		    height: 7px;
		    border-radius: 10px;
		    width: 100px;
		    margin: 24px auto 4px;
}

#popup_body_top{
	text-align: left;margin-top:10px;font-size:14px;
	max-height: 60vh; overflow-y: auto;
	padding: 0px 15px;
}

#popup_close_top{
	float: right;
    margin-top: -5px;
    border: 1px solid white;
    border-radius: 20px;
    padding: 2px 10px;
    background: darkorange;
    color: navajowhite;
    font-weight: lighter;
    cursor: pointer;
}

#popup_response_top{
	text-align: center;
    font-size: 17px;
    margin-top: 10px;
    color: orangered;
    padding: 10px 0px;
}

#popup_wrapper{
    width:100%;
    height: 100%;
    background:#000000bd;
    position:fixed;top:0px;
    z-index: 999;
        margin-left: auto;
    margin-right: auto;
        max-width: 441px;
}

#popup_bg{
    position: fixed;
    bottom: 0px;
    background: rgb(250 250 250 / var(--tw-bg-opacity));
    border:1px solid rgb(250 250 250 / var(--tw-bg-opacity));
    z-index: 1000;
    width: 100vw;
    padding: 5px 20px 30px 20px;
    text-align: center;
    border-radius: 20px 20px 0 0;
    max-width: 441px;
}

#popup_sign{
    background: #80808047;
            height: 7px;
            border-radius: 10px;
            width: 100px;
            margin: 4px auto 22px;
}

#popup_body{
    text-align: left;margin-top:10px;font-size:14px;
    max-height: 60vh; overflow-y: auto;
    padding: 0px 15px;
}

#popup_close{
    float: right;
    margin-top: -28px;
    border: 1px solid white;
    border-radius: 20px;
    padding: 2px 10px;
    background: darkorange;
    color: navajowhite;
    font-weight: lighter;
    cursor: pointer;
}

#popup_response{
    text-align: center;
    font-size: 17px;
    margin-top: 10px;
    color: orangered;
    padding: 10px 0px;
}
.profil_input{
	background: none;
    border-bottom: 1px solid black;
    width: 100%;
    margin-top: 10px;
}

ul#account_menu{
	z-index: 20;
          float: right;
          margin: 60px 20px;
          text-align: right;
}

ul#account_menu li {
	margin: 10px;
}

ul#account_menu li a{
	    background: #f78e0c;
    padding: 8px 15px;
    border-radius: 3px;
    border: 1px solid white;
    color:black;
}

#opsi_jawaban button{
	background:rgb(28 25 23 / var(--tw-bg-opacity));
}
#opsi_jawaban button:first-child{
	border-radius: 10px 10px 0 0;
}
#opsi_jawaban button:last-child{
	border-radius: 0 0 10px 10px;
}

#report_content{
	border: 1px solid gray;
    width: 100%;
    margin-top: 15px;
    border-radius: 5px;
    height: 130px;
}

.lunas {
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
  font-weight: bold;
}

.blm-lunas {
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
  font-weight: bold;
}

input{
          background: none;
          border-bottom: 1px solid gray;
          width: 100%;
          margin: 5px 0px 15px 0px;
          height: 30px;
        }
        .add_soal{
          background: darkorange;
          padding: 5px 16px;
          color: white;
          border-radius: 5px;
          margin-bottom: 10px;
        }
        .cek_soal{
          background: darkorange;
          padding: 5px 16px;
          color: white;
          border-radius: 5px;
        }
        .copy_button{
          background: darkorange;
          padding: 2px 12px;
          color: white;
          border-radius: 5px;
          float: right;
          font-size: 12px;
        }
        .oren_kecil_btn{
          background: darkorange;
          padding: 2px 12px;
          color: white;
          border-radius: 5px;
          float: right;
          font-size: 12px;
        }
        .add_peserta_btn{
          background: darkorange;
          padding: 2px 12px;
          color: white;
          border-radius: 5px;
          float: right;
          font-size: 12px;
        }
        select{
          height: 25px;
        }
        .add_soal_satuan{
          margin-bottom: 3px;
        }
        .add_soal_wrapper .upload_soal_btn {
          background: darkorange;
          padding: 2px 12px;
          color: white;
          border-radius: 5px;
          font-size: 12px;
        }
        .dipilih{
          background: #cde1b6 !important;
        }
        .bg_gradien_black{
          background: linear-gradient(303deg, #c5c5c5, #e9e9e9);
        }
        .bg_gradien_green{
          background: linear-gradient(303deg, #bee7be, #ededed);
        }
        .bg_gradien_orange{
          background: linear-gradient(303deg, #f7deb2, #f5f0f0);
        }


        .cstm-font {
          font-weight: 100;
          font-style: italic;
          color: #dddddd;
        }

        .btn-custom {
          width: 100%;
          text-align: center;
          margin-top: 10px;
          background: #303030;
          padding: 8px 15px;
          border-radius: 0.5rem;
          border: 1px solid white;
          color: rgb(255, 255, 255);
        }

        .text-truncate {
          display: -webkit-box;
          display: -moz-box;
          display: box;
          -webkit-line-clamp: 2;
          -moz-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          -moz-box-orient: vertical;
          box-orient: vertical;
          overflow: hidden;
        }

        .nilai-container h3 {
          text-align: center;
          margin-bottom: 20px;
          color: #303030;
        }

        .statistics {
          display: flex;
          justify-content: space-between;
          margin-bottom: 30px;
          flex-wrap: wrap;
          gap: 15px;
        }

        .stat-item {
          background: #f8f9fa;
          padding: 15px;
          border-radius: 8px;
          text-align: center;
          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
          flex: 1;
          min-width: 150px;
        }

        .stat-item p {
          margin: 5px 0;
        }

        .stat-item .nilai_value {
          font-size: 24px;
          font-weight: bold;
          color: #303030;
        }

        .bg-lunas{
          background: #a4ff81;
        }
        .bg-blm-lunas{
          background: #ffa2a2;
        }


        #popup_table_poin {
          width: 100%;
          border-collapse: collapse;
          font-size: 12px;
      }
      
      #popup_table_poin th,
      #popup_table_poin td {
          border: 1px solid #ccc;
          padding: 8px;
          text-align: center;
      }
      
      #popup_table_poin th {
          background-color: #f5f5f5;
          font-weight: bold;
      }
      
      #popup_table_poin td:nth-child(4) {
          text-align: left;
      }
      
      #popup_table_poin .signature {
          color: #d32f2f;
          font-weight: bold;
      }
      
      #popup_table_poin tfoot td {
          background-color: #fafafa;
      }