:root {
  --paab-blue-dark: #0056A8;
  --paab-blue-light: #00AEEF;
  --paab-green: #4CAF50;
  --paab-white: #FFFFFF;
  --cidb-lighter: #a8e1de;
  --cidb-main: #008491;
  --ppz-main: #00498e;
  --ppz-gold: #FFD700;
  --ppz-teal: #2cc3b4;
  
}

body {
   background-color: #F5F5F5;
   color: #333333
}

.required { color: #800000; /* Maroon highlight for required fields */ }

.row {
    /* background-color: rgb(229, 161, 141); */
    background-color: #f7b985;
}

@keyframes fadeInOpacity {
  0%   {opacity:0;transform: translate3d(0, -35%, 0)}

  100% {opacity:1;transform: none}
}

.fade-in-div {
    opacity: 0; /* Ensure the element is hidden initially */
    animation-name: fadeInOpacity;
    animation-duration: 0.3s; /* Duration of the fade effect */
    animation-iteration-count: 1; /* Run once */
    animation-timing-function: ease-in;
    animation-fill-mode: forwards; /* Keep the final state (opacity: 1) after the animation finishes */
}

.fade-standby {
    /* Initial state */
    opacity: 1;
    transition: opacity 2s ease-out, visibility 0s linear 0.5s; /* Fade out opacity over 0.5s, then immediately hide visibility */
    visibility: visible;
}

.fade-out {
    /* End state (when class is added) */
    opacity: 0;
    background-color: #800000;
    visibility: hidden; /* Hide the element visually and prevent interaction after the fade */
}

.paab .row {
    background-color: var(--paab-blue-light);  
}

.paab-color.text-light {
    border-bottom: 1px solid var(--paab-blue-dark);
    background-color: var(--paab-blue-dark);
}

.ppz .row {
    background-color: var(--ppz-teal); 
}

.ppz-color.text-light {
    border-bottom: 1px solid var(--ppz-teal);
    background-color: var(--ppz-main);
}


.cidb .row {
    background-color: var(--cidb-lighter);  
}

.cidb-color.text-light {
    border-bottom: 1px solid var(--cidb-main);
    background-color: var(--cidb-main);
}

.sabah .row {
    /* background-color: #77ccff; */
    background-color: #aed8f4    
}

.sabah-color.text-light {
    border-bottom: 1px solid #002b7f;
    background-color: #002b7f;  
}

.sabah-red-color.text-light {
    background-color: #f5362f
}

.penang .row {
    background-color: #b8d6ed   
}

.penang-yellow {
    background-color: yellow !important;
    border: 3px solid #2b3f67 
}

.penang-yellow.text-dark {
    color: #2b3f67 !important;
}

.penang-color.text-light {
    border-bottom: 1px solid #2b3f67;
    background-color: #2b3f67;  
}

.penang-red-color.text-light {
    background-color: #f5362f
}


.kenyalang .row {
    background-color: #ffd07e;
}

.kenyalang-color.text-light {
    border-bottom: 1px solid #f57349;
    background-color: #e8450e;  
}

.kenyalang-red-color.text-light {
    background-color: #ad3e3d
}

.bottom-bord {
    border-bottom: 1px solid crimson;
    background-color: crimson;
}

.agro-color {
    border-bottom: 1px solid #e51b24;
    background-color: #e51b24;
}

.row:has(.butang) {
    background-color: inherit;
}

.butang:hover { color: yellow;  }

.inputsRow.row:nth-child(odd) {
    background-color: #fed792;
}

.kenyalang .inputsRow.row:nth-child(odd) {
    background-color: #ffb636;
}

.hkm .row {
    background-color: #fbe9cb;
}

.hkm .head-hkm {
    background-color: rgb(152, 12, 40);
}

.hkm-color.text-light {
    border-bottom: 1px solid rgb(152, 12, 40);
    background-color: rgb(152, 12, 40);  
}

.hkm .inputsRow.row:nth-child(odd) {
    background-color: #fed792;
}


.container-md {
    background-color: darkmagenta;
}

.boddah {
    border: solid 1px blueviolet;
    background-color: blueviolet;
    border-collapse: collapse;
}







/* .remove, .add {
    background-color: lightblue
} */

.px50 {
    width: 50px
}

.px38 {
    width: 38px
}

input {
    width: 100%; 
    
}

.form-control, .form-select {
    background-color: #fcf6c6;
    border-color: transparent;
}

.form-control:hover, .form-control:focus {
    background-color: #ffef75;    
}


.more-yellow .form-control:not([disabled]), .more-yellow .form-select:not([disabled]) {
    background-color: #fee3a0;
    border-color: transparent;
}

#firstAddButton, #secondAddButton {
    color: rgb(8, 87, 185);
}
.sabah #firstAddButton, .sabah #secondAddButton {
    color: #002b7f;
}

.bi-x-circle-fill {
    color: crimson
}

i {
    font-size: large;
}

.smol {
    font-size:medium
}

.italic {
    font-style: italic;
    font-size: small;
}

@media (min-width: 768px) { 
    ::placeholder {
      color: transparent !important;
    }
    
    .holder-url::placeholder {
        color: #6c757d !important;
      }

    .inputsRow div:not(:first-child) {
        padding-right: 0px;
    } 
    
}

@media (max-width: 767.98px) { 

    /* #titleDate .inputsRow div:not(:first-child) {
        padding-right: 0px;
    }  */
    
}