html, body {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
}

:root {
   --fs-sm: 0.8rem; 
   --fs-base: 0.975rem;
   /*--fs-lg: 1.25rem;*/
   --fs-radio: 0.85rem;
   --fs-button: 0.9rem;
   --fs-label: 0.95rem;
   --text-primary: #212529;
   --text-secondary: #6c757d;
   --text-title:  #1f4160;
}


.float-left {
   float: left;
}

.float-right {
   float: right;
}


/*********************   Horizontal Line  *************************/
.bold-horizontal-line {
   border-top: solid #BBB 4px;
}

.normal-horizontal-line {
   border-top: solid #DDD 2px;
}



/******************** Form *****************************************/

.custom-button {
   border-radius: 3em;
   text-align: center;
   font-weight: 600;
   text-shadow: none;
   padding: .3em;
   font-size: var(--fs-button);
   background-color: #318841;
   color: #FFF;
   border-width: 0px;
   width: 160px;
}
.custom-button:hover {
   color: #eee;
   background-color: #217831;
}
.disabled {
   border: 1px solid #ddd !important;
   opacity: 0.3;
}

.checkbox-group {
   width: 100%;
   padding: 4px;
   border-radius: 8px;
   box-sizing: border-box;
}

.radio-group {
   display: flex;
   width: 100%;
   padding: 4px;
   border-radius: 8px;
   box-sizing: border-box;
   gap: 12px; 
}

.custom-radio {
   flex: 1; 
   position: relative;
}

.custom-radio input {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
}

.custom-radio label {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #f6f6f6;
   border: 1px solid #ddd;
   border-radius: 3em;
   font-weight: 600;
   font-size: var(--fs-radio);
   text-shadow: none;
   color: var(--text-secondary);
   padding: .5em .5em;
   width: 100%;
   margin-bottom: 0;
   white-space: nowrap;
}

.custom-radio input + label:hover {
  color: #333;
  background-color: #f2f2f2;
}

.custom-radio input:checked + label {
   background: #39519f;
   border-color: #39519f;
   color: #fff;
}

.custom-input {
   border: 1px solid #ddd;
   border-radius: 3em;
   color: var(--text-secondary);
   font-size: var(--fs-label);
   font-weight: 400;
   text-align-last: center;
   height: 38px;
   width: 100%;
}

.custom-input:hover {
   background-color: #f6f6f6;
}

.radioDisabled {
   opacity: 0.5;
}

.custom-select {
   border: 1px solid #ddd;
   border-radius: 3em;
   text-align-last: center;
   color: var(--text-secondary);
   box-shadow: none !important;
   padding: 8px;
   width: 100%;
}

.custom-select:hover {
   color: #333;
   background-color: #f6f6f6;
}

/******************** Form End **************************************/


/******************** Collapsible **************************************/

.collapsible-wrapper {
  display: grid;
  grid-template-rows: 0fr; 
  transition: grid-template-rows 0.5s ease-in-out;
  overflow: hidden;
}

.collapsible-content {
  min-height: 0;
  padding: 0;
}


.collapsible-wrapper.expanded {
  grid-template-rows: 1fr; /* Acts like height: 100% */
}

/******************** Collapsible End **********************************/