.select-list {
 margin-bottom: 5px;
}
.content-body{

  margin-left: 2.1875rem;
}
#results {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }
  
  #results td, #results th {
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  #results tr:nth-child(even){background-color: #f2f2f2;}
  
  #results tr:hover {background-color: #ddd;}
  
  #results th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #04AA6D;
    color: white;
  }

  #saringan {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }
  
  #saringan td, #saringan th {
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  #saringan tr:nth-child(even){background-color: #f2f2f2;}
  
  #saringan tr:hover {background-color: #ddd;}
  
  #saringan th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #1f58c2;
    color: white;
  }

 /* Customize the modal dialog */
 .custom-modal .modal-dialog {
  max-width: 500px; /* Adjust the maximum width as needed */
}

/* Customize the modal content */
.custom-modal .modal-content {
  background-color: #f5f5f5; /* Change the background color */
  border: 2px solid #333; /* Add a border */
  border-radius: 10px; /* Add rounded corners */
}

/* Customize the modal title */
.custom-modal .modal-title {
  color: #333; /* Change the title text color */
}

/* Customize the modal body */
.custom-modal .modal-body {
  padding: 20px; /* Add padding to the body */
}

/* Customize the modal footer */
.custom-modal .modal-footer {
  background-color: #f5f5f5; /* Change the footer background color */
}

.custom-button {
  background-color: #cc9c00;
  border-color: #cc9c00;
  color: #fff; /* Text color */
 
}

/* Hover and active states for the button */
.custom-button:hover,
.custom-button:focus,
.custom-button:active {
  background-color: #e5af00; /* Change the color on hover/focus/active */
  border-color: #e5af00;
  color: #fff; /* Text color */
}

.utama-button {
  background-color: #44bec7;
  border-color: #44bec7;
  color: #fff; /* Text color */
 
}

/* Hover and active states for the button */
.utama-button:hover,
.utama-button:focus,
.utama-button:active {
  background-color: #36989f; /* Change the color on hover/focus/active */
  border-color: #36989f;
  color: #fff; /* Text color */
}


.vertical-text {
  white-space: nowrap; /* Prevent text from wrapping */
  transform: rotate(-90deg); /* Rotate the text 90 degrees counterclockwise */
  transform-origin: left top; /* Set the origin to the top-left corner */
  position: absolute; /* Position absolutely to move it outside the table */
  right: -30px; /* Adjust the right distance as needed */
  top: 50%; /* Center vertically */
}

#eventTable {
  border: 1px solid #cccccca4;
  border-collapse: collapse;
}

/* Style the table header (th) with background color and text color */
#eventTable th {
  background-color: green;
  color: white;
  padding: 5px; /* Add padding for better styling */
}

/* Style the table cells (td) with padding */
#eventTable td {
  padding: 5px;
}

#saringan {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#saringan td, #saringan th {
  border: 1px solid #ddd;
  padding: 8px;
}

#saringan tr:nth-child(even){background-color: #f2f2f2;}

#saringan tr:hover {background-color: #ddd;}

#saringan th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #1f58c2;
  color: white;
}

    .navbar {
    height: 5rem;  
    background: #7571f9;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
    transition: all .2s ease;
    font-size: large;

  
}

.brand-logo {
    color: white;   /* Set text color to white */
    font-weight: bold;  /* Set font weight to bold */
    font-size: 18px;   /* Set font size to 18 pixels */
}

  .user-info {
        background-color: #f8f9fa;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        text-align: left;
        padding: 20px;
    }

    .user-info-header {
        background-color: #7a76efbd;
        color: #fff;
        padding: 10px 20px;
      
        margin: -20px -20px 20px -20px;
    }

    .user-info p {
        margin: 8px 0;      
        color: #333;
    }

    .info-label {
        font-weight: 600;
        color: #7571f9;
    }
     .user-info-header p {
        margin: 0;
        color: #fff;
    }
.rowUtama {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: 200px;
  }

  .nk-sidebar {
    margin-top: 20px;
  }



.nk-sidebar .metismenu > li.active > a {
    background: #7571f9b5;
    color: #fff;
}
.nk-sidebar .metismenu > li.active > a .nav-text {
    color: #fff; /* White font color for active menu items */
}

  input[type="checkbox"]:after {
   
    border: 1px solid #162336;
   
}
  #saringan {
        font-family: Arial, Helvetica, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }

    #saringan td,
    #saringan th {
        border: 1px solid #ddd;
        padding: 8px;
    }

    #saringan tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    #saringan tr:hover {
        background-color: #ddd;
    }

    #saringan th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #1f58c2;
        color: white;
    }

    #results {
        font-family: Arial, Helvetica, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }

    #results td,
    #results th {
        border: 1px solid #ddd;
        padding: 8px;
    }

    #results tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    #results tr:hover {
        background-color: #ddd;
    }

    #results th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #04AA6D;
        color: white;
    }

        #regForm {
        background-color: #ffffff;
        margin: 10px auto;
        padding: 10px;
        width: 100%;
        min-width: 300px;
    }

    h1 {
        text-align: center;
    }

    input {
        padding: 10px;
        width: 100%;
        font-size: 17px;
        font-family: Raleway;
        border: 1px solid #aaaaaa;
    }

    /* Mark input boxes that gets an error on validation: */
    input.invalid {
        background-color: #ffdddd;
    }

    /* Hide all steps by default: */
    .tab {
        display: none;
    }

    button {
        background-color: #04AA6D;
        color: #ffffff;
        border: none;
        padding: 10px 20px;
        font-size: 18px;

        cursor: pointer;
    }

    button:hover {
        opacity: 0.8;
    }

    #prevBtn {
        background-color: #bbbbbb;
    }

    /* Make circles that indicate the steps of the form: */
    .step {
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbbbbb;
        border: none;
        border-radius: 50%;
        display: inline-block;
        opacity: 0.5;
    }

    .step.active {
        opacity: 1;
    }

    /* Mark the steps that are finished and valid: */
    .step.finish {
        background-color: #04AA6D;
    }

    /* HIDE RADIO */
    [type=radio] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        margin-left: 100px;
        margin-bottom: -50px;
    }

    /* IMAGE STYLES */
    [type=radio]+img {
        cursor: pointer;
        margin-left: 20px;
        margin-bottom: 2rem;
        margin-left: 100px;

    }

    /* CHECKED STYLES */
    [type=radio]:checked+img {
        outline: 2px solid #000000;
    }

    .kad-header {
        background-color: #8e599f;
        /* Header background color */
        color: #fff;
        /* Header text color */
        padding: 10px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        font-weight: bold;
    }

    .custom-step {
        font-size: 18px;
        padding: auto;
        color: #333;
        margin: 10px 50px 10px 180px;
        text-align: left;
    }

    .image {
        width: 50px;
        /* Set the desired width in pixels */
        height: 50px;
        /* Set the desired height in pixels */
    }

  /* Gaya untuk ikon hamburger */
.hamburger-menu {
    display: none; /* Sembunyikan secara asal */
}

.hamburger-icon {
    width: 30px; /* Ukuran ikon hamburger */
    height: 2px;
    background-color: #333; /* Warna ikon hamburger */
    margin: 6px 0; /* Ruang antara garis-garis */
}
@media screen and (max-width: 768px) {
    .hamburger-menu {
        display: block; /* Tunjukkan ikon hamburger */
    }

    .metismenu {
        display: none; /* Sembunyikan menu utama */
    }
}