.form-submit,
 .card-body ul {
     margin-bottom: 0px
 }

 .ball,
 .balle {
     color: #fff;
     display: inline-block;
     width: 24px;
     height: 24px;
     border-radius: 50%;
     font-size: 14px;
     line-height: 24px;
     margin-right: 0.1rem;
     margin-left: 0.1rem;
     text-shadow: 1px 1px 2px black;
     text-align: center;
 }

 .red {
     background: radial-gradient(circle at 65% 15%, #ffe4e4d6 1px, #ff7272fa 1%, #db0000 60%, #660000 100%);
 }

 .green {
     background: radial-gradient(circle at 65% 15%, #f7fff6 1px, #83ff5c 1%, #1a9f02 60%, #0d2e00 100%);
 }

 .blue {
     background: radial-gradient(circle at 65% 15%, #e9f4ff 1px, #91cbff 1%, #00658d 60%, #004566 100%);
 }

 .orange {
     background: radial-gradient(circle at 65% 15%, #fffcf6 1px, #ffd45c 1%, #9f7702 60%, #684d00 100%);
 }

 .black {
     background: radial-gradient(circle at 65% 15%, #bdbdbd 1px, #858585 1%, #303030 60%, #000000 100%);
 }

 #depan th {
     min-width: 150px;
 }

 .sub-menu {
     min-width: 270px !important;
 }

 .dropdown-toggle::after {
     animation: 1s infinite blinker
 }

 .text-bg-other,
 .input-group-text {
     color: #eeeeee !important;
     background-image: linear-gradient(to bottom, #0093fc,
         color-mix(in srgb, #0093fc, black 60%)) !important;
     border-bottom: unset !important;
 }

 @media(max-width:767px) {
     .rball {
         min-width: 200px;
     }
 }

 /* ====== table ====== */
 #drawing-table {
     border-collapse: collapse;
     margin: 0;
     background-color: #fff;
 }

 #drawing-table td {
     border: 1px solid #d9d9d9;
     text-align: center;
     padding: 0px;
 }

 #drawing-table th {
     border: 1px solid #d9d9d9;
     text-align: center;
     font-weight: 500;
 }

 #drawing-table .tanggal {
     background: -webkit-linear-gradient(top, #ff110000 0%, #53060000 100%);
     color: #333;
 }

 #drawing-table .hari {
     background: -webkit-linear-gradient(top, #ff110000 0%, #53060000 100%);
     color: #333;
 }

 .numbx {
     color: #d7d1d1;
     font-weight: normal;
     font-style: italic;
 }

 .numb {
     color: black;
     font-weight: 400;
 }

 #drawing-table tr:nth-last-child(5n+1) {
     background: none repeat scroll 0 0 #EBEBEB !important;
 }

 /* ====== table ====== */

 /* ====== set warna ====== */
 .e1,
 .e2,
 .e3,
 .e4,
 .e5,
 .e6,
 .e7,
 .e8,
 .e9,
 .e0 {
     background-color: #ff4d4d !important;
     color: white !important;
 }

 .k1,
 .k2,
 .k3,
 .k4,
 .k5,
 .k6,
 .k7,
 .k8,
 .k9,
 .k0 {
     background-color: fuchsia !important;
     color: white !important;
 }

 .c1,
 .c2,
 .c3,
 .c4,
 .c5,
 .c6,
 .c7,
 .c8,
 .c9,
 .c0 {
     background-color: #707070 !important;
     color: white !important;
 }

 .a1,
 .a2,
 .a3,
 .a4,
 .a5,
 .a6,
 .a7,
 .a8,
 .a9,
 .a0 {
     background-color: orange !important;
     color: white !important;
 }

 .j1,
 .j2,
 .j3,
 .j4,
 .j5,
 .j6,
 .j7,
 .j8,
 .j9,
 .j0 {
     background-color: yellowgreen !important;
     color: white !important;
 }

 .ee1,
 .ee2,
 .ee3,
 .ee4,
 .ee5,
 .ee6,
 .ee7,
 .ee8,
 .ee9,
 .ee0 {
     background-color: #315dff !important;
     color: white !important;
 }

 .ed1,
 .ed2,
 .ed3,
 .ed4,
 .ed5,
 .ed6,
 .ed7,
 .ed8,
 .ed9,
 .ed0 {
     background-color: #00c19b !important;
     color: white !important;
 }

 .bolae1,
 .bolae2,
 .bolae3,
 .bolae4,
 .bolae5,
 .bolae6,
 .bolae7,
 .bolae8,
 .bolae9,
 .bolae0 {
     background: #00912d !important;
     color: white !important;
 }

 .bolak1,
 .bolak2,
 .bolak3,
 .bolak4,
 .bolak5,
 .bolak6,
 .bolak7,
 .bolak8,
 .bolak9,
 .bolak0 {
     background: fuchsia !important;
     color: white !important;
 }

 .bolac1,
 .bolac2,
 .bolac3,
 .bolac4,
 .bolac5,
 .bolac6,
 .bolac7,
 .bolac8,
 .bolac9,
 .bolac0 {
     background: #707070 !important;
     color: white !important;
 }

 .bolaa1,
 .bolaa2,
 .bolaa3,
 .bolaa4,
 .bolaa5,
 .bolaa6,
 .bolaa7,
 .bolaa8,
 .bolaa9,
 .bolaa0 {
     background: orange !important;
     color: white !important;
 }

 .bolaj1,
 .bolaj2,
 .bolaj3,
 .bolaj4,
 .bolaj5,
 .bolaj6,
 .bolaj7,
 .bolaj8,
 .bolaj9,
 .bolaj0 {
     background: yellowgreen !important;
     color: white !important;
 }

 .bolaee1,
 .bolaee2,
 .bolaee3,
 .bolaee4,
 .bolaee5,
 .bolaee6,
 .bolaee7,
 .bolaee8,
 .bolaee9,
 .bolaee0 {
     background: #315dff !important;
     color: white !important;
 }

 .bolaed1,
 .bolaed2,
 .bolaed3,
 .bolaed4,
 .bolaed5,
 .bolaed6,
 .bolaed7,
 .bolaed8,
 .bolaed9,
 .bolaed0 {
     background: #00c19b !important;
     color: white !important;
 }

 .highlight {
     padding: 1px 4px;
     margin: 0 -4px;
 }

 input.cari {
     width: 50px;
     text-align: center;
     color: red;
     background: #f0f7f2;
     font-size: small;
 }

 /* ====== set warna ====== */

 /* ====== box warna ====== */
 #colormenu.fixed {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%
 }

 .menu2 {
     position: relative;
     padding: 5px;
     width: 100%;
 }

 .menu2>table>tbody>tr>td {
     border: none;
     background: -webkit-linear-gradient(top, #ffffff 0%, #cfcfcf 100%);
     vertical-align: middle;
 }

 input.hue {
     width: 100%;
     height: 20px;
     border-radius: 10px;
     position: relative;
     -webkit-appearance: none;
     appearance: none;
     margin: .5rem 0 0 0;
 }

 input.hue::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     border: 2px solid white;
     background-color: hsl(var(--hue), 100%, 50%);
     cursor: pointer;
     position: relative;
     box-shadow: #fff 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px -1px 1px inset, rgba(0, 0, 0, 0.4) 0px 1px 4px 0px, rgba(0, 0, 0, 0.6) 0 0 2px;
 }

 @media screen and (max-width: 600px) {
     .menu2 {
         width: 100%;
     }
 }

 /* ====== box warna ====== */