/**************************************************/
/* Inputs texto e textarea */
/**************************************************/
.TDexonGUI_Input,
.TDexonGUI_Textarea
{
   background-color: #FFFFFF;
   border: 1px solid #A6C7FF;
   border-radius: 4px;
   color: #1E293B;
   padding: 1px 10px;
   font-size: 13px;
   line-height: 1.4;
   transition: all 0.3s ease;
   width: 100%;
   resize: vertical;
   max-width: 450px;
   max-height: 24px;
   box-sizing: border-box;
   user-select: text;
}

.TDexonGUI_Input:hover,
.TDexonGUI_Textarea:hover
{
   border-color: #1E73FF;
   background-color: #F0F7FF;
   color: #1E40AF;
   outline: none;
}

.TDexonGUI_Input:focus,
.TDexonGUI_Textarea:focus
{
   border-color: #1E73FF;
   background-color: #F0F7FF;
   color: #1E40AF;
   outline: none;
}

.TDexonGUI_Textarea
{
   min-height: 80px;
   max-height: 240px;
}

/**************************************************/
/* Select */
/**************************************************/
.TDexonGUI_Select
{
   background-color: #FFFFFF;
   border: 1px solid #A6C7FF;
   border-radius: 4px;
   color: #1E293B;
   padding: 2px 10px;
   font-size: 12px;
   line-height: 1.4;
   transition: all 0.3s ease;
   min-width: 140px;
   max-width: 240px;
   max-height: 24px;
   cursor: pointer;
   box-sizing: border-box;
   user-select: none;
}

.TDexonGUI_Select:hover
{
   border-color: #1E73FF;
   background-color: #F0F7FF;
   color: #1E40AF;
   outline: none;
}

.TDexonGUI_Select:focus
{
   border-color: #1E73FF;
   background-color: #F0F7FF;
   color: #1E40AF;
   outline: none;
}

/**************************************************/
/* Radio Button customizado */
/**************************************************/
.TDexonGUI_Radio
{
   position: relative;
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   user-select: none;
   gap: 6px;
   font-size: 13px;
   color: #1E293B;
}

.TDexonGUI_Radio input[type="radio"]
{
   position: absolute;
   opacity: 0;
   cursor: pointer;
   width: 0;
   height: 0;
}

.TDexonGUI_Radio .RadioMark
{
   width: 16px;
   height: 16px;
   border: 2px solid #A6C7FF;
   border-radius: 50%;
   box-sizing: border-box;
   transition: border-color 0.3s ease;
   position: relative;
}

.TDexonGUI_Radio input[type="radio"]:checked + .RadioMark
{
   border-color: #178BFF;
   background-color: #178BFF;
}

.TDexonGUI_Radio .RadioMark::after
{
   content: "";
   position: absolute;
   top: 3px;
   left: 3px;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: transparent;
   transition: background-color 0.3s ease;
}

.TDexonGUI_Radio input[type="radio"]:checked + .RadioMark::after
{
   background-color: white;
}

/**************************************************/
/* Checkbox customizado */
/**************************************************/
.TDexonGUI_Checkbox
{
   position: relative;
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   user-select: none;
   gap: 6px;
   font-size: 13px;
   color: #1E293B;
}

.TDexonGUI_Checkbox input[type="checkbox"]
{
   position: absolute;
   opacity: 0;
   cursor: pointer;
   width: 0;
   height: 0;
}

.TDexonGUI_Checkbox .CheckboxMark
{
   width: 16px;
   height: 16px;
   border: 2px solid #A6C7FF;
   border-radius: 4px;
   box-sizing: border-box;
   transition: border-color 0.3s ease, background-color 0.3s ease;
   position: relative;
}

.TDexonGUI_Checkbox input[type="checkbox"]:checked + .CheckboxMark
{
   background-color: #178BFF;
   border-color: #178BFF;
}

.TDexonGUI_Checkbox .CheckboxMark::after
{
   content: "";
   position: absolute;
   display: none;
   left: 4px;
   top: 0;
   width: 4px;
   height: 10px;
   border: solid white;
   border-width: 0 2.5px 2.5px 0;
   transform: rotate(45deg);
}

.TDexonGUI_Checkbox input[type="checkbox"]:checked + .CheckboxMark::after
{
   display: block;
}

/**************************************************/
/* Toggle
/**************************************************/
.TDexonGUI_Toggle
{
   display: flex;
   align-items: center;
   gap: 6px;
   color: #354A6A;
   cursor: pointer;
   user-select: none;
   font-size: 13px;
   padding: 4px 6px;
   border-radius: 4px;
   transition: background-color 0.2s ease;
}

.TDexonGUI_Toggle:hover
{
   background-color: #1F5FD1;
   color: #fff;
}

.TDexonGUI_Toggle .Panel
{
   position: relative;
   display: inline-block;
   width: 36px;
   height: 20px;
   background-color: #CBD5E1;
   border-radius: 12px;
   transition: background-color 0.3s ease;
   box-sizing: border-box;
   padding: 0;
}

.TDexonGUI_Toggle .Panel input
{
   opacity: 0;
   width: 0;
   height: 0;
   position: absolute;
   top: 0;
   left: 0;
   cursor: pointer;
   z-index: 2;
}

.TDexonGUI_Toggle .Panel span
{
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #CBD5E1;
   border-radius: 12px;
   transition: background-color 0.3s ease;
}

.TDexonGUI_Toggle .Panel span:before
{
   position: absolute;
   content: "";
   height: 16px;
   width: 16px;
   left: 2px;
   bottom: 2px;
   background-color: #FFFFFF;
   border-radius: 50%;
   transition: transform 0.3s ease, background-color 0.3s ease;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.TDexonGUI_Toggle .Panel input:checked + span
{
   background-color: #178BFF;
}

.TDexonGUI_Toggle .Panel input:checked + span:before
{
   transform: translateX(16px);
   background-color: #fff;
}

.TDexonGUI_Toggle > i
{
   font-size: 16px;
   color: inherit;
   transition: color 0.2s ease;
}

.TDexonGUI_Toggle:hover > i
{
   color: #fff;
}