#Grandform{position:relative; overflow-y: auto; min-height: 100svh;max-height: 100svh;   overflow: scroll;
}
#Grandform p{ font-weight: 0; }
.Grand_titlemobile{display:none}
#Grand_title{position:relative;margin-top: 9svh ;height:7svh;left:50%;transform:translateX(-50%);z-index:110;opacity:1}

#GrandTitleHp{display:none;opacity:0}
#GrandTitleDesk{display:none;position:relative;height:10svh;left:50%;transform:translateX(-50%);z-index:110;opacity:1}
#Grand-container  { margin-top: 9svh; margin-bottom: 9svh;
background-color:#fff;border-radius:15px;box-shadow:0 4px 6px rgba(0,0,0,.1);padding:20px;border:4px solid #026E46;position:relative;width:47dvw;left:50%;transform:translateX(-50%);z-index:110;opacity:1}
#registrationGrand{position:relative;height:auto;padding-left:10svh;padding-right:10svh}
#registrationGrand input,#registrationGrand select{position:relative;background:0 0;width:100%;margin-bottom:10px;padding: 18px; border:none;border-bottom:2px solid #026E46;transition:border-color .3s ease;text-align:left; color: black;font-size:14px;}
#registrationGrand input::placeholder{opacity:.5;text-transform:capitalize;padding-top: 19px;}
#Grandform #textMax2MB{margin-bottom: 1svh; position: relative;top:5px; justify-self:left!important;font-size:14px!important;color:#000!important}

#checkboxGrand{font-size:13px; /* Changed from small/x-small to 13px */}
#checkboxGrand input{justify-self:left;width:20px;height:20px;border-radius:50%;border:2px solid #000;appearance:none;outline:0;background-color:#fff;cursor:pointer;vertical-align:middle}
#checkboxGrand input:checked{background-color:#727373; border-color: #727373;}
.center-container{display:flex;align-items:center}
.custom-file-input{position:relative}
.fileinput{position:absolute;opacity:0;z-index:-1;display:none}
.desktop-upload{display:block;cursor:pointer;width:100%}
.image-preview-container{margin-top:20px;}
.image-preview{max-width:50%;max-height:100px; position: relative; transform: translateX(-50%); left: 50%;}
.submit-container{display: block;
    width: 24svw;
    left: 50%;
    transform: translateX(-50%);
    object-fit: contain;
    position: relative; padding-top: 10px;}
.submit-button{background:0 0;border:none;cursor:pointer}
.submit-image{width:100%}
#Grand_Terms{display:block;position:relative;text-align:center;top:5dsvh;height:10svh;left:50%;transform:translateX(-50%);z-index:111;opacity:1;color:#000}
#Grand_Termsmobile{display:none}

#Grandform #checkboxGrand {
    font-size: 13px !important; /* Changed from small to 13px */
    /* font-weight: bold !important; */
    color: black !important;
}

#Grandform #checkboxGrand input {
    justify-self: left !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    border: 2px solid #000 !important;
    appearance: none !important;
    outline: 0 !important;
    background-color: #fff !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    color: black    !important;
}

#Grandform #checkboxGrand input:checked {
    background-color: #727373 !important;
    border-color: #727373 !important;
}

#Grandform #checkboxGrand label {
    font-size: 13px !important; /* Changed from x-small to 13px */
    color: #000000 !important; /* Match the color scheme */
    position: relative;
    top: -3px;
}

.radio-container {
    display: flex;
    flex-direction: row;
    gap: 90px;
    left: 2svh;
    position: relative;
}

.radio-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.radio-item input {
    width: 30px;
    height: 30px;
    border-radius: 50%; /* Membuat bentuk bulat */
    border: 10px solid black;
    appearance: none; /* Menghapus gaya bawaan browser */
    outline: 1;
    background-color: #000000; /* Warna latar belakang */
    cursor: pointer;
    position: relative; /* Untuk pseudo-element */
    margin-right: 10px;
    vertical-align: middle;
}

.radio-item input::before {
    content: '';
    position: absolute;
    top: 70%;
    left: 90%;
    border: 3px solid black;

    transform: translate(-50%, -50%);
    width: 15px; /* Ukuran titik di dalam radio button */
    height: 15px;
    border-radius: 50%;
    background-color: transparent; /* Tidak terlihat saat tidak dipilih */
    transition: background-color 0.3s ease;
}

.radio-item input:checked::before {
    background-color: #727373; /* Warna titik saat dipilih */
}

.radio-item label {
    font-size: 13px; /* Changed from medium to 13px */
    /* font-weight: bold; */
    color: #727373;
    margin-left: 5px;
    }

#multiple-item {
    position: relative;
    top: 0.5svh;
    display: flex;
        justify-self: left;
        gap: 1px;
        flex-direction: row;
}

#multiple-item label {
    font-size: 13px; /* Changed from medium to 13px */
    /* font-weight: bold; */
    place-content: center;
    align-self: center;
    color: #727373;
  
}
#multiple-item input {
    width: 20px;
    height: 20px;
    border-radius: 3%;
    border: 2px solid #727373;
    appearance: none;
    outline: 0;
    background-color: #fff;
    cursor: pointer;
    margin-right: 10px;
    vertical-align: middle;
}

#multiple-item input:checked {
    background-color: #727373;
    border-color: #727373;
}

 
#Grandform label, 
#Grandform input::placeholder, 
#Grandform select, 
#Grandform option {
    color: #727373;
    font-size: 14px; /* Changed from medium to 13px */
}

#Grandform input::placeholder {    
    opacity: 1; /* Ensure visibility */
}

#Grandform input {
    position: relative;
    background: 0 0;
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    border: none;
    border-bottom: 2px solid #026E46;
    transition: border-color .3s ease;
    text-align: left;
    color: black;
}

input[type="date"]::placeholder {
    color: black !important;
    opacity: 1; /* Ensure visibility */
}

.video-preview-container {
    margin-top: 20px;
    text-align: center;
}

.video-preview {
    max-width: 50%;
    max-height: 17svh;
    position: relative;
    transform: translateX(-50%);
    left: 50%;
    border-radius: 10px;
    display: none;
    margin-bottom: 13px;
}

@media print,screen and (max-width:40em){
    #Grandform{position:relative; overflow-y: auto; height: 100svh;  
    }


#Grand_title{width:80%;height:auto;position: inherit;}
#GrandTitleHp{display: none; position:relative;top:14svh;height:10dsvh;left:75%;transform:translateX(-50%);z-index:110;opacity:1}
#GrandTitleDesk{display:none}
#Grand-container{margin-top: 4svh;width:90svw;background-color:#fff;border-radius:15px;box-shadow:0 4px 6px rgba(0,0,0,.1);padding-left:20px;padding-right:20px;padding-top:20px;padding-bottom:5px;border:4px solid #026E46;position:relative;z-index:112;opacity:1}
#registrationGrand{ width:100%;max-height:auto;padding-left:0svh;padding-right:0svh}
#registrationGrand input,#registrationGrand select{position:relative;background:0 0;width:100%;margin-bottom:10px;border:none;border-bottom:2px solid #026E46;transition:border-color .3s ease;text-align:left; color: black;}
#registrationGrand input::placeholder{opacity:.5;text-transform:capitalize; color: black;}
#Grandform #textMax2MB {
    text-align: left;
    justify-self: left !important;
    font-size: 12px !important; /* Changed from xx-small to 13px */
    color: black !important; /* Ensure the color is applied */
}
#checkboxGrand{font-size:12px; /* Changed from x-small to 13px */}
#checkboxGrand input{justify-self:left;width:20px;height:20px;border-radius:50%;border:2px solid #000;appearance:none;outline:0;background-color:#fff;cursor:pointer;vertical-align:middle}
#checkboxGrand input:checked{background-color:#727373}
.center-container{display:flex;align-items:center}
.custom-file-input{position:relative}
.fileinput{position:absolute;opacity:0;z-index:-1;display:none}
.desktop-upload{display:block;cursor:pointer;width:100%}
.image-preview-container{margin-top:20px;text-align:center}
.image-preview{max-width:25%;max-height:50px;border-radius:10px;display:none;    place-items: center;
transform: translateX(-50%);left: 50%;position: relative;}
.submit-container{    display: flex;
    justify-content: center; /* Agar tombol di tengah */
    width: 100%;
    margin-top: 20px; /* Beri jarak dari atas */}
.submit-button{background:0 0;border:none;cursor:pointer}
.submit-image{width:100%}

}

#tncTextgrandsubmit{
    position: relative !important;
    left: 50%;
    top: 24svh;
    transform: translateX(-50%);
    bottom: 30px;
    color: white !important;
    width: 45svw;
    font-size: 14px;
    text-align: center;

}
@media print,screen and (max-width:40em){

    #tncTextgrandsubmit{
        position: absolute;
        left: 50%;
        /* top: 130svh; */
        transform: translateX(-50%);
        color: white;
        text-align: center;
        font-size: 10px;
        width: 80svw;
        padding-bottom: 10svh;
    
    }

}





#tncapplygrandsubmit{
    position: relative;
    width: 45svw;
    left: 50%;
    top: 20svh;
    font-size: 15px;
    color: white;
    text-align: center;
    transform: translateX(-50%);
    padding-bottom: 50px;
  }
  

  .grandDate {display: flex; flex-direction: row;  border-bottom: solid 2px #026E46;margin-bottom:20px;}
  .grandDate div:nth-child(1) {width: 220px;float:left;padding:5px 0px 0px 10px;}
  .grandDate div:nth-child(2) {width: calc(100% - 220px);float:left;}
  .grandDate div:nth-child(2) input {border:none !important;margin-bottom:0 !important;padding:5px !important;text-align: right !important;}

  @media print,screen and (max-width:40em){
    .grandDate {display: flex; flex-direction: column;}
    .grandDate div:nth-child(1) {width: 100%;}
    .grandDate div:nth-child(2) {width: 100%;}
    .grandDate div:nth-child(2) input {padding-left:12px !important;}
    
      #tncapplygrandsubmit{
          position: relative;
          width: 77svw;
          left: 50%;
          top: 20svh;
          font-size: 12px;
          color: white;
          text-align: center;
          transform: translateX(-50%);
          padding-bottom: 50px;
        }
  
  }