@media only screen and (min-width: 1024px) { /* LARGE */
    .ls1 { grid-column-start: 1; margin-left: 0 !important; }
    .ls2 { grid-column-start: 2; }
    .ls3 { grid-column-start: 3; }
    .ls4 { grid-column-start: 4; }
    .ls5 { grid-column-start: 5; }
    .ls6 { grid-column-start: 6; }
    .ls7 { grid-column-start: 7; }
    .ls8 { grid-column-start: 8; }
    .ls9 { grid-column-start: 9; }
    .ls10 { grid-column-start: 10; }
    .ls11 { grid-column-start: 11; }
    .ls12 { grid-column-start: 12; }
    .ls13 { grid-column-start: 13; }
    .ls14 { grid-column-start: 14; }
    .ls15 { grid-column-start: 15; }
    .ls16 { grid-column-start: 16; }
    .ls17 { grid-column-start: 17; }
    .ls18 { grid-column-start: 18; }
    .ls19 { grid-column-start: 19; }
    .ls20 { grid-column-start: 20; }
    .ls21 { grid-column-start: 21; }
    .ls22 { grid-column-start: 22; }
    .ls23 { grid-column-start: 23; }
    .ls24 { grid-column-start: 24; }
    .ls25 { grid-column-start: 25; }
    .ls26 { grid-column-start: 26; }
    .ls27 { grid-column-start: 27; }
    .ls28 { grid-column-start: 28; }
    .ls29 { grid-column-start: 29; }
    .ls30 { grid-column-start: 30; }
    .ls31 { grid-column-start: 31; }
    .ls32 { grid-column-start: 32; }
    .ls33 { grid-column-start: 33; }
    .ls34 { grid-column-start: 34; }
    .ls35 { grid-column-start: 35; }
    .ls36 { grid-column-start: 36; }
    .ls37 { grid-column-start: 37; }
    .ls38 { grid-column-start: 38; }
    .ls39 { grid-column-start: 39; }
    .ls40 { grid-column-start: 40; }
    .ls41 { grid-column-start: 41; }

    .lc1 { grid-template-columns: [start] repeat(1, 1fr) [end]; }
    .lc2 { grid-template-columns: [start] repeat(2, 1fr) [end]; }
    .lc3 { grid-template-columns: [start] repeat(3, 1fr) [end]; }
    .lc4 { grid-template-columns: [start] repeat(4, 1fr) [end]; }
    .lc5 { grid-template-columns: [start] repeat(5, 1fr) [end]; }
    .lc6 { grid-template-columns: [start] repeat(6, 1fr) [end]; }
    .lc7 { grid-template-columns: [start] repeat(7, 1fr) [end]; }
    .lc8 { grid-template-columns: [start] repeat(8, 1fr) [end]; }
    .lc9 { grid-template-columns: [start] repeat(9, 1fr) [end]; }
    .lc10 { grid-template-columns: [start] repeat(10, 1fr) [end]; }
    .lc11 { grid-template-columns: [start] repeat(11, 1fr) [end]; }
    .lc12 { grid-template-columns: [start] repeat(12, 1fr) [end]; }
    .lc13 { grid-template-columns: [start] repeat(13, 1fr) [end]; }
    .lc14 { grid-template-columns: [start] repeat(14, 1fr) [end]; }
    .lc15 { grid-template-columns: [start] repeat(15, 1fr) [end]; }
    .lc16 { grid-template-columns: [start] repeat(16, 1fr) [end]; }
    .lc17 { grid-template-columns: [start] repeat(17, 1fr) [end]; }
    .lc18 { grid-template-columns: [start] repeat(18, 1fr) [end]; }
    .lc19 { grid-template-columns: [start] repeat(19, 1fr) [end]; }
    .lc20 { grid-template-columns: [start] repeat(20, 1fr) [end]; }
    .lc21 { grid-template-columns: [start] repeat(21, 1fr) [end]; }
    .lc22 { grid-template-columns: [start] repeat(22, 1fr) [end]; }
    .lc23 { grid-template-columns: [start] repeat(23, 1fr) [end]; }
    .lc24 { grid-template-columns: [start] repeat(24, 1fr) [end]; }
    .lc25 { grid-template-columns: [start] repeat(25, 1fr) [end]; }
    .lc26 { grid-template-columns: [start] repeat(26, 1fr) [end]; }
    .lc27 { grid-template-columns: [start] repeat(27, 1fr) [end]; }
    .lc28 { grid-template-columns: [start] repeat(28, 1fr) [end]; }
    .lc29 { grid-template-columns: [start] repeat(29, 1fr) [end]; }
    .lc30 { grid-template-columns: [start] repeat(30, 1fr) [end]; }
    .lc31 { grid-template-columns: [start] repeat(31, 1fr) [end]; }
    .lc32 { grid-template-columns: [start] repeat(32, 1fr) [end]; }
    .lc33 { grid-template-columns: [start] repeat(33, 1fr) [end]; }
    .lc34 { grid-template-columns: [start] repeat(34, 1fr) [end]; }
    .lc35 { grid-template-columns: [start] repeat(35, 1fr) [end]; }
    .lc36 { grid-template-columns: [start] repeat(36, 1fr) [end]; }
    .lc37 { grid-template-columns: [start] repeat(37, 1fr) [end]; }
    .lc38 { grid-template-columns: [start] repeat(38, 1fr) [end]; }
    .lc39 { grid-template-columns: [start] repeat(39, 1fr) [end]; }
    .lc40 { grid-template-columns: [start] repeat(40, 1fr) [end]; }
    .lc41 { grid-template-columns: [start] repeat(41, 1fr) [end]; }

    .le1 { grid-column-end: 1; }
    .le2 { grid-column-end: 2; }
    .le3 { grid-column-end: 3; }
    .le4 { grid-column-end: 4; }
    .le5 { grid-column-end: 5; }
    .le6 { grid-column-end: 6; }
    .le7 { grid-column-end: 7; }
    .le8 { grid-column-end: 8; }
    .le9 { grid-column-end: 9; }
    .le10 { grid-column-end: 10; }
    .le11 { grid-column-end: 11; }
    .le12 { grid-column-end: 12; }
    .le13 { grid-column-end: 13; }
    .le14 { grid-column-end: 14; }
    .le15 { grid-column-end: 15; }
    .le16 { grid-column-end: 16; }
    .le17 { grid-column-end: 17; }
    .le18 { grid-column-end: 18; }
    .le19 { grid-column-end: 19; }
    .le20 { grid-column-end: 20; }
    .le21 { grid-column-end: 21; }
    .le22 { grid-column-end: 22; }
    .le23 { grid-column-end: 23; }
    .le24 { grid-column-end: 24; }
    .le25 { grid-column-end: 25; }
    .le26 { grid-column-end: 26; }
    .le27 { grid-column-end: 27; }
    .le28 { grid-column-end: 28; }
    .le29 { grid-column-end: 29; }
    .le30 { grid-column-end: 30; }
    .le31 { grid-column-end: 31; }
    .le32 { grid-column-end: 32; }
    .le33 { grid-column-end: 33; }
    .le34 { grid-column-end: 34; }
    .le35 { grid-column-end: 35; }
    .le36 { grid-column-end: 36; }
    .le37 { grid-column-end: 37; }
    .le38 { grid-column-end: 38; }
    .le39 { grid-column-end: 39; }
    .le40 { grid-column-end: 40; }
	.le41 { grid-column-end: 41; margin-right: 0 !important; }
}

@media only screen and (min-width: 481px) and (max-width: 1023px) { /* MEDIUM */
	.ms1 { grid-column-start: 1; margin-left: 0 !important; }
	.ms2 { grid-column-start: 2; }
	.ms3 { grid-column-start: 3; }
	.ms4 { grid-column-start: 4; }
	.ms5 { grid-column-start: 5; }
	.ms6 { grid-column-start: 6; }
	.ms7 { grid-column-start: 7; }
	.ms8 {	grid-column-start: 8; }
	.ms9 {	grid-column-start: 9; }
	.ms10 { grid-column-start: 10;	}
	.ms11 { grid-column-start: 11;	}
	.ms12 { grid-column-start: 12;	}
	.ms13 { grid-column-start: 13;	}
	.ms14 { grid-column-start: 14;	}
	.ms15 { grid-column-start: 15;	}
	.ms16 { grid-column-start: 16;	}
	.ms17 { grid-column-start: 17;	}
	.ms18 { grid-column-start: 18;	}
	.ms19 { grid-column-start: 19;	}
	.ms20 { grid-column-start: 20;	}
	.ms21 { grid-column-start: 21;	}

	.mc1 { grid-template-columns: [start] repeat(1, 1fr) [end]; }
	.mc2 { grid-template-columns: [start] repeat(2, 1fr) [end]; }
	.mc3 { grid-template-columns: [start] repeat(3, 1fr) [end]; }
	.mc4 { grid-template-columns: [start] repeat(4, 1fr) [end]; }
	.mc5 { grid-template-columns: [start] repeat(5, 1fr) [end]; }
	.mc6 { grid-template-columns: [start] repeat(6, 1fr) [end]; }
	.mc7 { grid-template-columns: [start] repeat(7, 1fr) [end]; }
	.mc8 { grid-template-columns: [start] repeat(8, 1fr) [end]; }
	.mc9 { grid-template-columns: [start] repeat(9, 1fr) [end]; }
	.mc10 { grid-template-columns: [start] repeat(10, 1fr) [end]; }
	.mc11 { grid-template-columns: [start] repeat(11, 1fr) [end]; }
	.mc12 { grid-template-columns: [start] repeat(12, 1fr) [end]; }
	.mc13 { grid-template-columns: [start] repeat(13, 1fr) [end]; }
	.mc14 { grid-template-columns: [start] repeat(14, 1fr) [end]; }
	.mc15 { grid-template-columns: [start] repeat(15, 1fr) [end]; }
	.mc16 { grid-template-columns: [start] repeat(16, 1fr) [end]; }
	.mc17 { grid-template-columns: [start] repeat(17, 1fr) [end]; }
	.mc18 { grid-template-columns: [start] repeat(18, 1fr) [end]; }
	.mc19 { grid-template-columns: [start] repeat(19, 1fr) [end]; }
	.mc20 { grid-template-columns: [start] repeat(20, 1fr) [end]; }
	.mc21 { grid-template-columns: [start] repeat(21, 1fr) [end]; }

	.me1 { grid-column-end: 1; }
	.me2 { grid-column-end: 2; }
	.me3 { grid-column-end: 3; }
	.me4 { grid-column-end: 4; }
	.me5 { grid-column-end: 5; }
	.me6 { grid-column-end: 6; }
	.me7 { grid-column-end: 7; }
	.me8 { grid-column-end: 8; }
	.me9 { grid-column-end: 9; }
	.me10 { grid-column-end: 10; }
	.me11 { grid-column-end: 11; }
	.me12 { grid-column-end: 12; }
	.me13 { grid-column-end: 13; }
	.me14 { grid-column-end: 14; }
	.me15 { grid-column-end: 15; }
	.me16 { grid-column-end: 16; }
	.me17 { grid-column-end: 17; }
	.me18 { grid-column-end: 18; }
	.me19 { grid-column-end: 19; }
	.me20 { grid-column-end: 20; }
	.me21 { grid-column-end: 21; margin-right: 0 !important; }
}

@media only screen and (max-width: 480px) { /* SMALL */
	.ss1 { grid-column-start: 1; margin-left: 0 !important; }
	.ss2 { grid-column-start: 2; }
	.ss3 { grid-column-start: 3; }
	.ss4 { grid-column-start: 4; }
	.ss5 { grid-column-start: 5; }
	.ss6 { grid-column-start: 6; }
	.ss7 { grid-column-start: 7; }
	.ss8 { grid-column-start: 8; }
	.ss9 { grid-column-start: 9; }
	.ss10 { grid-column-start: 10; }
	.ss11 { grid-column-start: 11; }

	.sc1 { grid-template-columns: [start] repeat(1, 1fr) [end]; }
	.sc2 { grid-template-columns: [start] repeat(2, 1fr) [end]; }
	.sc3 { grid-template-columns: [start] repeat(3, 1fr) [end]; }
	.sc4 { grid-template-columns: [start] repeat(4, 1fr) [end]; }
	.sc5 { grid-template-columns: [start] repeat(5, 1fr) [end]; }
	.sc6 { grid-template-columns: [start] repeat(6, 1fr) [end]; }
	.sc7 { grid-template-columns: [start] repeat(7, 1fr) [end]; }
	.sc8 { grid-template-columns: [start] repeat(8, 1fr) [end]; }
	.sc9 { grid-template-columns: [start] repeat(9, 1fr) [end]; }
	.sc10 { grid-template-columns: [start] repeat(10, 1fr) [end]; }
	.sc11 { grid-template-columns: [start] repeat(11, 1fr) [end]; }

	.se1 { grid-column-end: 1; }
	.se2 { grid-column-end: 2; }
	.se3 { grid-column-end: 3; }
	.se4 { grid-column-end: 4; }
	.se5 { grid-column-end: 5; }
	.se6 { grid-column-end: 6; }
	.se7 { grid-column-end: 7; }
	.se8 { grid-column-end: 8; }
	.se9 { grid-column-end: 9; }
	.se10 { grid-column-end: 10; }
	.se11 { grid-column-end: 11; margin-right: 0 !important; }
}

.dl-row > * {
	margin-left: var(--margin-blocks-horiz-half);
	margin-right: var(--margin-blocks-horiz-half);
}

.dl-column > :not(:only-child) {
	margin-bottom: var(--margin-blocks-vert);
}

.dl-row .dl-column > :last-child {
	margin-bottom: 0;
}


.dl-row, 
.dl-column,
.dl-formcontrol {
    display: grid;
    grid-template-rows: auto;
}

.dl-item-container {
    grid-auto-flow: row;
}

.dl-minimize{
	height: 25px;	
    width: 100px;
	background-image: url("/CORE/Public/img/minimize-dl.png");
	background-size: contain;
}

.dl-minimize>.dl-item,.dl-minimize>.panel-header,.dl-minimize>.as-table{
	display: none;
}

/* #region Grid templates*/
.grid-template-1 {
    display: grid !important;
    grid-template-rows: 48px calc(100% - 48px);
    grid-template-columns: auto minmax(0, 100%) minmax(0, min-content) minmax(0, min-content);
    grid-template-areas: 
        "nav header header header"
        "nav main details secondary";
    overflow: auto;
    height: 100%;
    position: relative;
}

.grid-nav {
    grid-area: nav;
    position: sticky;
    top: 0;
    left: 0;
}

.grid-header {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    background: var(--color-form-bar-bg);
    position: sticky;
    top: 0;
    left: 0;
    z-index: 5;
    border-bottom: 1px solid var(--color-tab-vert-border-right);
}

.grid-main {
    grid-area: main;
    padding: 10px;
    overflow: auto;
    background-color: var(--color-grid-main-bg);
}

.grid-secondary {
    grid-area: secondary;
    width: 450px;
    overflow: auto;
    padding: 10px;
    background-color: var(--color-grid-secondary-bg);
}

.grid-details {
    grid-area: details;
    width: 450px;    
    padding: 10px;
    overflow: auto;
    background-color: var(--color-grid-details-bg);
}

.grid-header-title {
    display: flex;
    align-self: center;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    color: rgb(var(--pcolor-text));
    margin-left: .75em;
}

.grid-header-toggles {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-right: calc(10px + var(--dl-col-padding-h-half));
}

.grid-header-toggle-btn:hover,
.grid-header-toggle-btn-active {
    color: var(--color-light-text) !important;
    background-color: var(--color-modal-confirm-bg) !important;
    border-color: var(--color-modal-confirm-bg) !important;
}

@media only screen and (max-width: 1023px) { /* MEDIUM AND SMALL*/
    .grid-toggleable {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;  
        z-index: 20;
    }
}
/* #endregion Grid templates*/


/* #region NEW DL */
:root {
    --dl-col-padding-h: 1em;
    --dl-col-padding-h-half: calc(var(--dl-col-padding-h) / 2);
    --dl-col-padding-v: 1em;
    --dl-col-padding-v-half: calc(var(--dl-col-padding-v) / 2);
}

.as-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    box-sizing: border-box;
    width: 100%;
}

.as-row > * {
    width: 100%; /* for as-row children, col-XX-XX classes will override width, 100% by default if not any col- class*/
}

.as-col {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.as-col > :not(.as-row),
.as-row > :not(.as-col) {
    box-sizing: border-box;
    padding-top: var(--dl-col-padding-v-half);
    padding-right: var(--dl-col-padding-h-half);
    padding-bottom: var(--dl-col-padding-v-half);
    padding-left: var(--dl-col-padding-h-half);
}

.overflow-auto{ overflow: auto !important;}
.overflow-hidden{ overflow: hidden !important;}
.overflow-x-auto{ overflow-x: auto !important;}
.overflow-x-hidden{ overflow-x: hidden !important;}
.overflow-y-auto{ overflow-y: auto !important;}
.overflow-y-hidden{ overflow-y: hidden !important;}

.no-padding { padding: 0!important; }
.no-padding-top { padding-top: 0!important; }
.no-padding-right { padding-right: 0!important; }
.no-padding-bottom { padding-bottom: 0!important; }
.no-padding-left { padding-left: 0!important; }
.no-padding-h { padding-left: 0!important; padding-right: 0!important; }
.no-padding-v { padding-top: 0!important; padding-bottom: 0!important; }

.no-margin { margin: 0!important; }
.no-margin-top { margin-top: 0!important; }
.no-margin-right { margin-right: 0!important; }
.no-margin-bottom { margin-bottom: 0!important; }
.no-margin-left { margin-left: 0!important; }
.no-margin-h { margin-left: 0!important; margin-right: 0!important; }
.no-margin-v { margin-top: 0!important; margin-bottom: 0!important; }

.col-grow{
    flex-grow: 1;
}

.col-all-1{ width: 4.1666666667%; }
.col-all-2{ width: 8.3333333333%; }
.col-all-3{ width: 12.5000000000%; }
.col-all-4{ width: 16.6666666667%; }
.col-all-5{ width: 20.8333333333%; }
.col-all-6{ width: 25.0000000000%; }
.col-all-7{ width: 29.1666666667%; }
.col-all-8{ width: 33.3333333333%; }
.col-all-9{ width: 37.5000000000%; }
.col-all-10{ width: 41.6666666667%; }
.col-all-11{ width: 45.8333333333%; }
.col-all-12{ width: 50.0000000000%; }
.col-all-13{ width: 54.1666666667%; }
.col-all-14{ width: 58.3333333333%; }
.col-all-15{ width: 62.5000000000%; }
.col-all-16{ width: 66.6666666667%; }
.col-all-17{ width: 70.8333333333%; }
.col-all-18{ width: 75.0000000000%; }
.col-all-19{ width: 79.1666666667%; }
.col-all-20{ width: 83.3333333333%; }
.col-all-21{ width: 87.5000000000%; }
.col-all-22{ width: 91.6666666667%; }
.col-all-23{ width: 95.8333333333%; }
.col-all-24{ width: 100.0000000000%; }
.col-all-auto { width: auto!important; flex: 1 1 0; }

@media only screen and (min-width: 1200px) { /* LARGE */
    .col-lg-1{ width: 4.1666666667%; }
    .col-lg-2{ width: 8.3333333333%; }
    .col-lg-3{ width: 12.5000000000%; }
    .col-lg-4{ width: 16.6666666667%; }
    .col-lg-5{ width: 20.8333333333%; }
    .col-lg-6{ width: 25.0000000000%; }
    .col-lg-7{ width: 29.1666666667%; }
    .col-lg-8{ width: 33.3333333333%; }
    .col-lg-9{ width: 37.5000000000%; }
    .col-lg-10{ width: 41.6666666667%; }
    .col-lg-11{ width: 45.8333333333%; }
    .col-lg-12{ width: 50.0000000000%; }
    .col-lg-13{ width: 54.1666666667%; }
    .col-lg-14{ width: 58.3333333333%; }
    .col-lg-15{ width: 62.5000000000%; }
    .col-lg-16{ width: 66.6666666667%; }
    .col-lg-17{ width: 70.8333333333%; }
    .col-lg-18{ width: 75.0000000000%; }
    .col-lg-19{ width: 79.1666666667%; }
    .col-lg-20{ width: 83.3333333333%; }
    .col-lg-21{ width: 87.5000000000%; }
    .col-lg-22{ width: 91.6666666667%; }
    .col-lg-23{ width: 95.8333333333%; }
    .col-lg-24{ width: 100.0000000000%; }
    .col-lg-auto { width: auto!important; flex: 1 1 0; }
}

@media only screen and (min-width: 769px) and (max-width: 1199px){ /* MEDIUM */
    .col-md-1{ width: 4.1666666667%; }
    .col-md-2{ width: 8.3333333333%; }
    .col-md-3{ width: 12.5000000000%; }
    .col-md-4{ width: 16.6666666667%; }
    .col-md-5{ width: 20.8333333333%; }
    .col-md-6{ width: 25.0000000000%; }
    .col-md-7{ width: 29.1666666667%; }
    .col-md-8{ width: 33.3333333333%; }
    .col-md-9{ width: 37.5000000000%; }
    .col-md-10{ width: 41.6666666667%; }
    .col-md-11{ width: 45.8333333333%; }
    .col-md-12{ width: 50.0000000000%; }
    .col-md-13{ width: 54.1666666667%; }
    .col-md-14{ width: 58.3333333333%; }
    .col-md-15{ width: 62.5000000000%; }
    .col-md-16{ width: 66.6666666667%; }
    .col-md-17{ width: 70.8333333333%; }
    .col-md-18{ width: 75.0000000000%; }
    .col-md-19{ width: 79.1666666667%; }
    .col-md-20{ width: 83.3333333333%; }
    .col-md-21{ width: 87.5000000000%; }
    .col-md-22{ width: 91.6666666667%; }
    .col-md-23{ width: 95.8333333333%; }
    .col-md-24{ width: 100.0000000000%; }
    .col-md-auto { width: auto!important; flex: 1 1 0; }
}

@media only screen and (max-width: 768px) { /* SMALL */
    .col-sm-1{ width: 4.1666666667%; }
    .col-sm-2{ width: 8.3333333333%; }
    .col-sm-3{ width: 12.5000000000%; }
    .col-sm-4{ width: 16.6666666667%; }
    .col-sm-5{ width: 20.8333333333%; }
    .col-sm-6{ width: 25.0000000000%; }
    .col-sm-7{ width: 29.1666666667%; }
    .col-sm-8{ width: 33.3333333333%; }
    .col-sm-9{ width: 37.5000000000%; }
    .col-sm-10{ width: 41.6666666667%; }
    .col-sm-11{ width: 45.8333333333%; }
    .col-sm-12{ width: 50.0000000000%; }
    .col-sm-13{ width: 54.1666666667%; }
    .col-sm-14{ width: 58.3333333333%; }
    .col-sm-15{ width: 62.5000000000%; }
    .col-sm-16{ width: 66.6666666667%; }
    .col-sm-17{ width: 70.8333333333%; }
    .col-sm-18{ width: 75.0000000000%; }
    .col-sm-19{ width: 79.1666666667%; }
    .col-sm-20{ width: 83.3333333333%; }
    .col-sm-21{ width: 87.5000000000%; }
    .col-sm-22{ width: 91.6666666667%; }
    .col-sm-23{ width: 95.8333333333%; }
    .col-sm-24{ width: 100.0000000000%; }
    .col-sm-auto { width: auto!important; flex: 1 1 0; }
}
/* #endregion NEW DL */