/**
* Global CSS styles for the application 
* @author Jonh'son N'GOTTO
* @version 1.0.0
* @since 07-04-2024
*/

/********* Default Styles *********/
* {font-family: "Montserrat", sans-serif; scrollbar-width: thin; scrollbar-color: #cbd5e1 #f1f5f9;}
.fw-100 {font-weight: 100;}.fw-200 {font-weight: 200;}.fw-300 {font-weight: 300;}.fw-400 {font-weight: 400;}.fw-500 {font-weight: 500;}.fw-600 {font-weight: 600;}.fw-700 {font-weight: 700;}.fw-800 {font-weight: 800;}.fw-900 {font-weight: 900;}
.fs-1 {font-size: 1px !important;}.fs-2 {font-size: 2px !important;}.fs-3 {font-size: 3px !important;}.fs-4 {font-size: 4px !important;}.fs-5 {font-size: 5px !important;}.fs-6 {font-size: 6px !important;}.fs-7 {font-size: 7px !important;}.fs-8 {font-size: 8px !important;}.fs-9 {font-size: 9px !important;}.fs-10 {font-size: 10px !important;}.fs-11 {font-size: 11px !important;}.fs-12 {font-size: 12px !important;}.fs-13 {font-size: 13px !important;}.fs-14 {font-size: 14px !important;}.fs-15 {font-size: 15px !important;}.fs-16 {font-size: 16px !important;}.fs-17 {font-size: 17px !important;}.fs-18 {font-size: 18px !important;}.fs-19 {font-size: 19px !important;}.fs-20 {font-size: 20px !important;}
.pas-1{padding-left: 1px;}.pas-2{padding-left: 2px;} .pas-3{padding-left: 3px;} .pas-4{padding-left: 4px;} .pas-5{padding-left: 5px;} .pas-6{padding-left: 6px;} .pas-7{padding-left: 7px;} .pas-8{padding-left: 8px;} .pas-9{padding-left: 9px;} .pas-10{padding-left: 10px;}.pas-11{padding-left: 11px;} .pas-12{padding-left: 12px;} .pas-13{padding-left: 13px;} .pas-14{padding-left: 14px;} .pas-15{padding-left: 15px;} .pas-16{padding-left: 16px;} .pas-17{padding-left: 17px;} .pas-18{padding-left: 18px;} .pas-19{padding-left: 19px;} .pas-20{padding-left: 20px;}
.pae-1{padding-right: 1px;}.pae-2{padding-right: 2px;} .pae-3{padding-right: 3px;} .pae-4{padding-right: 4px;} .pae-5{padding-right: 5px;} .pae-6{padding-right: 6px;} .pae-7{padding-right: 7px;} .pae-8{padding-right: 8px;} .pae-9{padding-right: 9px;} .pae-10{padding-right: 10px;}.pae-11{padding-right: 11px;} .pae-12{padding-right: 12px;} .pae-13{padding-right: 13px;} .pae-14{padding-right: 14px;} .pae-15{padding-right: 15px;} .pae-16{padding-right: 16px;} .pae-17{padding-right: 17px;} .pae-18{padding-right: 18px;} .pae-19{padding-right: 19px;} .pae-20{padding-right: 20px;}
.pat-1{padding-top: 1px;}.pat-2{padding-top: 2px;} .pat-3{padding-top: 3px;} .pat-4{padding-top: 4px;} .pat-5{padding-top: 5px;} .pat-6{padding-top: 6px;} .pat-7{padding-top: 7px;} .pat-8{padding-top: 8px;} .pat-9{padding-top: 9px;} .pat-10{padding-top: 10px;}.pat-11{padding-top: 11px;} .pat-12{padding-top: 12px;} .pat-13{padding-top: 13px;} .pat-14{padding-top: 14px;} .pat-15{padding-top: 15px;} .pat-16{padding-top: 16px;} .pat-17{padding-top: 17px;} .pat-18{padding-top: 18px;} .pat-19{padding-top: 19px;} .pat-20{padding-top: 20px;}
.pab-1{padding-bottom: 1px;}.pab-2{padding-bottom: 2px;} .pab-3{padding-bottom: 3px;} .pab-4{padding-bottom: 4px;} .pab-5{padding-bottom: 5px;} .pab-6{padding-bottom: 6px;} .pab-7{padding-bottom: 7px;} .pab-8{padding-bottom: 8px;} .pab-9{padding-bottom: 9px;} .pab-10{padding-bottom: 10px;}.pab-11{padding-bottom: 11px;} .pab-12{padding-bottom: 12px;} .pab-13{padding-bottom: 13px;} .pab-14{padding-bottom: 14px;} .pab-15{padding-bottom: 15px;} .pab-16{padding-bottom: 16px;} .pab-17{padding-bottom: 17px;} .pab-18{padding-bottom: 18px;} .pab-19{padding-bottom: 19px;} .pab-20{padding-bottom: 20px;}
.mas-1{margin-left: 1px;}.mas-2{margin-left: 2px;} .mas-3{margin-left: 3px;} .mas-4{margin-left: 4px;} .mas-5{margin-left: 5px;} .mas-6{margin-left: 6px;} .mas-7{margin-left: 7px;} .mas-8{margin-left: 8px;} .mas-9{margin-left: 9px;} .mas-10{margin-left: 10px;}.mas-11{margin-left: 11px;} .mas-12{margin-left: 12px;} .mas-13{margin-left: 13px;} .mas-14{margin-left: 14px;} .mas-15{margin-left: 15px;} .mas-16{margin-left: 16px;} .mas-17{margin-left: 17px;} .mas-18{margin-left: 18px;} .mas-19{margin-left: 19px;} .mas-20{margin-left: 20px;}
.mae-1{margin-right: 1px;}.mae-2{margin-right: 2px;} .mae-3{margin-right: 3px;} .mae-4{margin-right: 4px;} .mae-5{margin-right: 5px;} .mae-6{margin-right: 6px;} .mae-7{margin-right: 7px;} .mae-8{margin-right: 8px;} .mae-9{margin-right: 9px;} .mae-10{margin-right: 10px;}.mae-11{margin-right: 11px;} .mae-12{margin-right: 12px;} .mae-13{margin-right: 13px;} .mae-14{margin-right: 14px;} .mae-15{margin-right: 15px;} .mae-16{margin-right: 16px;} .mae-17{margin-right: 17px;} .mae-18{margin-right: 18px;} .mae-19{margin-right: 19px;} .mae-20{margin-right: 20px;}
.mat-1{margin-top: 1px;}.mat-2{margin-top: 2px;} .mat-3{margin-top: 3px;} .mat-4{margin-top: 4px;} .mat-5{margin-top: 5px;} .mat-6{margin-top: 6px;} .mat-7{margin-top: 7px;} .mat-8{margin-top: 8px;} .mat-9{margin-top: 9px;} .mat-10{margin-top: 10px;}.mat-11{margin-top: 11px;} .mat-12{margin-top: 12px;} .mat-13{margin-top: 13px;} .mat-14{margin-top: 14px;} .mat-15{margin-top: 15px;} .mat-16{margin-top: 16px;} .mat-17{margin-top: 17px;} .mat-18{margin-top: 18px;} .mat-19{margin-top: 19px;} .mat-20{margin-top: 20px;}
.mab-1{margin-bottom: 1px;}.mab-2{margin-bottom: 2px;} .mab-3{margin-bottom: 3px;} .mab-4{margin-bottom: 4px;} .mab-5{margin-bottom: 5px;} .mab-6{margin-bottom: 6px;} .mab-7{margin-bottom: 7px;} .mab-8{margin-bottom: 8px;} .mab-9{margin-bottom: 9px;} .mab-10{margin-bottom: 10px;}.mab-11{margin-bottom: 11px;} .mab-12{margin-bottom: 12px;} .mab-13{margin-bottom: 13px;} .mab-14{margin-bottom: 14px;} .mab-15{margin-bottom: 15px;} .mab-16{margin-bottom: 16px;} .mab-17{margin-bottom: 17px;} .mab-18{margin-bottom: 18px;} .mab-19{margin-bottom: 19px;} .mab-20{margin-bottom: 20px;}
.pax-1{padding-left:1px; padding-right: 1px;}.pax-2{padding-left:2px; padding-right: 2px;} .pax-3{padding-left:3px; padding-right: 3px;} .pax-4{padding-left:4px; padding-right: 4px;} .pax-5{padding-left:5px; padding-right: 5px;} .pax-6{padding-left:6px; padding-right: 6px;} .pax-7{padding-left:7px; padding-right: 7px;} .pax-8{padding-left:8px; padding-right: 8px;} .pax-9{padding-left:9px; padding-right: 9px;} .pax-10{padding-left:10px; padding-right: 10px;}.pax-11{padding-left:11px; padding-right: 11px;} .pax-12{padding-left:12px; padding-right: 12px;} .pax-13{padding-left:13px; padding-right: 13px;} .pax-14{padding-left:14px; padding-right: 14px;} .pax-15{padding-left:15px; padding-right: 15px;} .pax-16{padding-left:16px; padding-right: 16px;} .pax-17{padding-left:17px; padding-right: 17px;} .pax-18{padding-left:18px; padding-right: 18px;} .pax-19{padding-left:19px; padding-right: 19px;} .pax-20{padding-left:20px; padding-right: 20px;}
.max-1{margin-left:1px; margin-right: 1px;}.max-2{margin-left:2px; margin-right: 2px;} .max-3{margin-left:3px; margin-right: 3px;} .max-4{margin-left:4px; margin-right: 4px;} .max-5{margin-left:5px; margin-right: 5px;} .max-6{margin-left:6px; margin-right: 6px;} .max-7{margin-left:7px; margin-right: 7px;} .max-8{margin-left:8px; margin-right: 8px;} .max-9{margin-left:9px; margin-right: 9px;} .max-10{margin-left:10px; margin-right: 10px;}.max-11{margin-left:11px; margin-right: 11px;} .max-12{margin-left:12px; margin-right: 12px;} .max-13{margin-left:13px; margin-right: 13px;} .max-14{margin-left:14px; margin-right: 14px;} .max-15{margin-left:15px; margin-right: 15px;} .max-16{margin-left:16px; margin-right: 16px;} .max-17{margin-left:17px; margin-right: 17px;} .max-18{margin-left:18px; margin-right: 18px;} .max-19{margin-left:19px; margin-right: 19px;} .max-20{margin-left:20px; margin-right: 20px;}
.pay-1{padding-top:1px; padding-bottom:1px}.pay-2{padding-top:2px; padding-bottom:2px} .pay-3{padding-top:3px; padding-bottom:3px} .pay-4{padding-top:4px; padding-bottom:4px} .pay-5{padding-top:5px; padding-bottom:5px} .pay-6{padding-top:6px; padding-bottom:6px} .pay-7{padding-top:7px; padding-bottom:7px} .pay-8{padding-top:8px; padding-bottom:8px} .pay-9{padding-top:9px; padding-bottom:9px} .pay-10{padding-top:10px; padding-bottom:10px}.pay-11{padding-top:11px; padding-bottom:11px} .pay-12{padding-top:12px; padding-bottom:12px} .pay-13{padding-top:13px; padding-bottom:13px} .pay-14{padding-top:14px; padding-bottom:14px} .pay-15{padding-top:15px; padding-bottom:15px} .pay-16{padding-top:16px; padding-bottom:16px} .pay-17{padding-top:17px; padding-bottom:17px} .pay-18{padding-top:18px; padding-bottom:18px} .pay-19{padding-top:19px; padding-bottom:19px} .pay-20{padding-top:20px; padding-bottom:20px;}
.may-1{margin-top:1px; margin-bottom:1px}.may-2{margin-top:2px; margin-bottom:2px} .may-3{margin-top:3px; margin-bottom:3px} .may-4{margin-top:4px; margin-bottom:4px} .may-5{margin-top:5px; margin-bottom:5px} .may-6{margin-top:6px; margin-bottom:6px} .may-7{margin-top:7px; margin-bottom:7px} .may-8{margin-top:8px; margin-bottom:8px} .may-9{margin-top:9px; margin-bottom:9px} .may-10{margin-top:10px; margin-bottom:10px}.may-11{margin-top:11px; margin-bottom:11px} .may-12{margin-top:12px; margin-bottom:12px} .may-13{margin-top:13px; margin-bottom:13px} .may-14{margin-top:14px; margin-bottom:14px} .may-15{margin-top:15px; margin-bottom:15px} .may-16{margin-top:16px; margin-bottom:16px} .may-17{margin-top:17px; margin-bottom:17px} .may-18{margin-top:18px; margin-bottom:18px} .may-19{margin-top:19px; margin-bottom:19px} .may-20{margin-top:20px; margin-bottom:20px;}

::-webkit-scrollbar {width: 3px; height: 3px;}
::-webkit-scrollbar-track{background: #f1f5f9; border-radius: 2px;}
::-webkit-scrollbar-thumb{background: #cbd5e1; border-radius: 2px; transition: background-color 0.2s ease;}
::-webkit-scrollbar-thumb:hover{background: #94a3b8;}
::-webkit-scrollbar-corner {background: #f1f5f9;}
.thin-scrollbar::-webkit-scrollbar {width: 3px; height: 3px;}
.thin-scrollbar::-webkit-scrollbar-track{background: #f1f5f9; border-radius: 2px;}
.thin-scrollbar::-webkit-scrollbar-thumb{background: #cbd5e1; border-radius: 2px; transition: background-color 0.2s ease;}
.thin-scrollbar::-webkit-scrollbar-thumb:hover{background: #94a3b8;}
.scrollbar-hide {scrollbar-width: none;}
.scrollbar-hide::-webkit-scrollbar {display: none;}

@media (min-width: 1024px) and (hover: hover) {
    .scrollbar-hide 
    {
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
        transition: scrollbar-color 0.3s ease;
    }

    .scrollbar-hide:hover { scrollbar-color: #cbd5e1 #f1f5f9;}
    .scrollbar-hide::-webkit-scrollbar 
    {
        display: block;
        height: 6px;
    }
    .scrollbar-hide::-webkit-scrollbar-track 
    {
        background: transparent;
        transition: background-color 0.2s ease;
    }
    .scrollbar-hide::-webkit-scrollbar-thumb 
    {
        background: transparent;
        border-radius: 3px;
        transition: background-color 0.3s ease;
    }
    .scrollbar-hide:hover::-webkit-scrollbar-track {background: #f1f5f9;}
    .scrollbar-hide:hover::-webkit-scrollbar-thumb {background: #cbd5e1;}
    .scrollbar-hide:hover::-webkit-scrollbar-thumb:hover {background: #94a3b8;}
}

/********* Drag and Drop Styles *********/
.drag-handle {
    transition: all 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.drag-handle:hover {
    color: #374151 !important;
    transform: scale(1.1);
}

[data-component-type]:hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
}

[data-component-type].dragging {
    opacity: 0.5;
    transform: scale(0.98);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

[data-component-type].drag-over-valid {
    background-color: #dbeafe !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

[data-component-type].drag-over-invalid {
    background-color: #fef2f2 !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}