body {
    padding: 0px;
    border: 0px;
    margin: 0px;
}

/* SPACES */
.space2   { height: 2px;   }
.space4   { height: 4px;   }
.space5   { height: 5px;   }
.space6   { height: 6px;   }
.space8   { height: 8px;   } 
.space10  { height: 10px;  }
.space12  { height: 12px;  }
.space16  { height: 16px;  }
.space18  { height: 18px;  }
.space20  { height: 20px;  }
.space24  { height: 24px;  }
.space30  { height: 30px;  }
.space32  { height: 32px;  }
.space36  { height: 36px;  }
.space42  { height: 42px;  }
.space48  { height: 48px;  }
.space50  { height: 50px;  }
.space60  { height: 60px;  }
.space100 { height: 100px; }
.space200 { height: 200px; }

/* WIDTH */
.w-30   { width: 30px;   }
.w-40   { width: 40px;   }
.w-50   { width: 50px;   }
.w-60   { width: 60px;   }
.w-70   { width: 70px;   }
.w-80   { width: 80px;   }
.w-100  { width: 100px;  }
.w-120  { width: 120px;  }
.w-150  { width: 150px;  }
.w-160  { width: 160px;  }
.w-180  { width: 180px;  }
.w-200  { width: 200px;  }
.w-220  { width: 220px;  }
.w-240  { width: 240px;  }
.w-250  { width: 250px;  }

/* MAX-WIDTH */
.mw-30   { max-width: 30px;   }
.mw-40   { max-width: 40px;   }
.mw-50   { max-width: 50px;   }
.mw-60   { max-width: 60px;   }
.mw-70   { max-width: 70px;   }
.mw-80   { max-width: 80px;   }
.mw-100  { max-width: 100px;  }
.mw-120  { max-width: 120px;  }
.mw-150  { max-width: 150px;  }
.mw-160  { max-width: 160px;  }
.mw-180  { max-width: 180px;  }
.mw-200  { max-width: 200px;  }
.mw-220  { max-width: 220px;  }
.mw-240  { max-width: 240px;  }
.mw-250  { max-width: 250px;  }
.mw-300  { max-width: 300px;  }
.mw-400  { max-width: 400px;  }
.mw-500  { max-width: 500px;  }
.mw-600  { max-width: 600px;  }
.mw-700  { max-width: 700px;  }
.mw-800  { max-width: 800px;  }
.mw-1000 { max-width: 1000px; }
.mw-1200 { max-width: 1200px; }
.mw-1400 { max-width: 1400px; }
.mw-1500 { max-width: 1500px; }
.mw-1600 { max-width: 1600px; }
.mw-1700 { max-width: 1700px; }
.mw-1800 { max-width: 1800px; }

.mw-30-nom   { max-width: 30px;   }
.mw-40-nom   { max-width: 40px;   }
.mw-50-nom   { max-width: 50px;   }
.mw-60-nom   { max-width: 60px;   }
.mw-70-nom   { max-width: 70px;   }
.mw-80-nom   { max-width: 80px;   }
.mw-100-nom  { max-width: 100px;  }
.mw-120-nom  { max-width: 120px;  }
.mw-150-nom  { max-width: 150px;  }
.mw-160-nom  { max-width: 160px;  }
.mw-180-nom  { max-width: 180px;  }
.mw-200-nom  { max-width: 200px;  }
.mw-220-nom  { max-width: 220px;  }
.mw-240-nom  { max-width: 240px;  }
.mw-250-nom  { max-width: 250px;  }
.mw-300-nom  { max-width: 300px;  }
.mw-400-nom  { max-width: 400px;  }
.mw-500-nom  { max-width: 500px;  }
.mw-600-nom  { max-width: 600px;  }
.mw-700-nom  { max-width: 700px;  }
.mw-800-nom  { max-width: 800px;  }
.mw-1000-nom { max-width: 1000px; }
.mw-1200-nom { max-width: 1200px; } 
.mw-1400-nom { max-width: 1400px; }
.mw-1500-nom { max-width: 1500px; }
.mw-1600-nom { max-width: 1600px; }
.mw-1700-nom { max-width: 1700px; } 
.mw-1800-nom { max-width: 1800px; }


/* COLORS */
.color-main { color: var(--color-main); }
.color-main-darker { color: var(--color-main-darker); }
.color-darker { color: #333333; }
.color-grey { color: #878787; }
.color-white { color: #FFFFFF; }
.color-error { color: #D30000; }
.color-success { color: #00A010; }
.color-warning { color: #EFAC53; }

.button {
    width: 100%;
    height: 40px;
    cursor: pointer;
    text-decoration: none;
    line-height: 40px;
    text-align: center;
} .button > a {
    text-decoration: none;
}

.button-c-main { 
    background-color: var(--color-main);
    color: white; 
} .button-c-main > a { 
    color: #FFFFFF;
} .button-c-main:hover { 
    background-color: var(--color-main-darker); 
}
.button-c-disabled { background-color: #565656; }
.button-c-accept { background-color: #00890D; }
.button-c-accept:hover { background-color: #007009; }
.button-c-delete { background-color: #A80000; }
.button-c-delete:hover { background-color: #870000; }
.button-c-grey { background-color: #878787; }
.button-c-blue { background-color: #878787; }

/* FORM */
form {
    padding: 0px;
    margin: 0px;
    border: 0px;
}

/* TEXT-ALIGN */
.ta-l { text-align: left;   }
.ta-c { text-align: center; }
.ta-r { text-align: right;  }

.ta-l-nom { text-align: left;   }
.ta-c-nom { text-align: center; }
.ta-r-nom { text-align: right;  }

/* PADDING */
.padding-2  { padding: 2px;  }
.padding-3  { padding: 3px;  }
.padding-4  { padding: 4px;  }
.padding-6  { padding: 6px;  }
.padding-8  { padding: 8px;  }
.padding-12 { padding: 12px; }
.padding-18 { padding: 18px; }
.padding-24 { padding: 24px; }
.padding-32 { padding: 32px; }

/* FONT-SIZE */
.fs-4  { font-size: 4px; }
.fs-8  { font-size: 8px; }
.fs-12 { font-size: 12px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-22 { font-size: 22px; }

/* ROW AND COLS */
.ecgc-row {
    display: flex;
}

.ecgc-row > * {
    flex: 1;
}

.ecgc-row-w {
    display: flex;
    flex-wrap: wrap; 
    justify-content: flex-start;
}

.ecgc-row-w > * {
    flex: 1 1 auto;
    min-width: 0;
    margin: 5px;
}

.ecgc-col-pa-l-nomob {
    padding-left: 24px;
}

.ecgc-col-pa-r-nomob {
    padding-right: 24px;
}

/* CONTAINER */
.ecgc-container {
    min-width: 80px;
    text-align: left;
    padding: 24px;
}

.ecgc-container-style-light {
    border: 1px solid #D3D3D3;
    box-shadow: 4 4px 5px #D3D3D3;
}

/* INPUT */
.ecgc-inputt {
    width: 100%;
    border: 1px solid #3D3D3D;
    height: 36px;
    font-size: 16px;
    padding-left: 12px;
    padding-right: 12px;
}

/* BUTTON */
.ecgc-button {
    width: 100%;
    height: 40px;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    border: 0px;
}

/* TABLE */
table {
    width: 100%;
}

table tr:first-child {
    background-color: var(--color-main-darker);
    color: white;
}

td {
    padding: 4px;
}

.ecgc-tr-even {
    background-color: var(--color-main);
}

.ecgc-tr-odd {
    background-color: transparent;
}

@media(max-width:450px) {
    /* MAX-WIDTH */    
    .mw-30-nom   { max-width: 100%; }
    .mw-40-nom   { max-width: 100%; }
    .mw-50-nom   { max-width: 100%; }
    .mw-60-nom   { max-width: 100%; }
    .mw-70-nom   { max-width: 100%; }
    .mw-80-nom   { max-width: 100%; }
    .mw-100-nom  { max-width: 100%; }
    .mw-120-nom  { max-width: 100%; }
    .mw-150-nom  { max-width: 100%; }
    .mw-160-nom  { max-width: 100%; }
    .mw-180-nom  { max-width: 100%; }
    .mw-200-nom  { max-width: 100%; }
    .mw-220-nom  { max-width: 100%; }
    .mw-240-nom  { max-width: 100%; }
    .mw-250-nom  { max-width: 100%; }
    .mw-300-nom  { max-width: 100%; }
    .mw-400-nom  { max-width: 100%; }
    .mw-500-nom  { max-width: 100%  }
    .mw-600-nom  { max-width: 100%; }
    .mw-700-nom  { max-width: 100%; }
    .mw-800-nom  { max-width: 100%; }
    .mw-1000-nom { max-width: 100%; }
    .mw-1200-nom { max-width: 100%; }
    .mw-1400-nom { max-width: 100%; }

    /* TEXT ALIGN */
    .ta-l-nom { text-align: center; }
    .ta-c-nom { text-align: center; }
    .ta-r-nom { text-align: center; }

    .ta-l-nod { text-align: left; }
    .ta-c-nod { text-align: center; }
    .ta-r-nod { text-align: right; }

    /* SPACES */
    .space4-nod   { height: 4px;  }
    .space6-nod   { height: 6px;  }
    .space8-nod   { height: 8px;  }
    .space10-nod  { height: 10px; }
    .space12-nod  { height: 12px; }
    .space20-nod  { height: 16px; }
    .space24-nod  { height: 24px; }
    .space30-nod  { height: 30px; }
    .space50-nod  { height: 50px; }
    .space60-mod  { height: 60px; }

    /* ROW AND COLS */
    .ecgc-row {
        width: 100%;
        display: inherit;
    }
    
    .ecgc-col {
        width: 100%;
        display: inherit;
    }

    .ecgc-row-w {
        width: 100%;
        display: inherit;
    }
    
    .ecgc-row-w > * {
        width: 100%;
        display: inherit;
    }

    .ecgc-col-pa-l-nomob {
        padding-left: 0px;
    }

    .ecgc-col-pa-r-nomob {
        padding-right: 0px;
    }

    /* CONTAINER */
    .ecgc-container {
        text-align: center;
    }
}