.pic-of-template {
    box-shadow: 0 0 3px 0 rgb(224, 224, 224);
}

.ltr .pic-of-template {
    transform: rotateY(180deg);
}

/********************* Define defaults class to tamplets*/

.grid-container {
    display: grid;
    background-color: transparent;
    margin: auto;
    position: relative;
    z-index: 1;
}

.area-of-slide {
    position: relative;
    overflow: hidden;
    padding-inline: 30px;
    padding-block: 10px;
    background: transparent;
}

.emptyClass, .emptyClass::after {
    background: transparent;
    height: unset;
    transition: background 0.5s ease-in-out;
}

.inArea,
.inAreaTask:after {
    content: "";
    background: transparent;
    width: 100%;
    margin: 0 auto;
    height: 0 !important;
    position: relative !important;
    overflow: hidden;
    display: block;
    border-radius: 10px;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.inArea.active, .areaForFirstTaskInAreaActive {
    margin: 1% auto;
    height: 15px !important;
    background: #568ee4
}

.place-tasks-in-slide {
    margin: 0 auto;
}

.iconMoveTask {
    height: 30px;
    width: 30px;
    position: absolute !important;
    z-index: 100;
    transform: translateY(-9%);
    float: left;
    left: 0;
    display: none;
}

.grab-icon-move {
    display: block !important;
}

.border-dashed-template:hover .iconMoveTask {
    display: block;
    visibility: visible;
}

.border-dashed-template:hover {
    border: 1px dashed black;
}

.areaForFirstTaskInArea {
    height: 90px;
    position: absolute;
    width: 98%;
    background: transparent;
    transform: translateY(-30%);
}

.areaForFirstTaskInAreaActive {
    background: #568ee4;
    width: 100%;
}


/*************** Class for slide_2 **/
.slide_2 .grid-container {
    grid-template-rows: minmax(36vh, auto) minmax(36vh, auto);
    grid-template-columns: 1fr 1fr;
}

.slide_0 .place-of-list-tasks, .slide_2 .place-of-list-tasks, .slide_4 .place-of-list-tasks, .slide_5 .place-of-list-tasks, .slide_6 .place-of-list-tasks, .slide_7 .place-of-list-tasks, .slide_8 .place-of-list-tasks {
    width: 95%;
    margin: 23px auto;
    position: relative;
    padding: 0;
}

.slide_0 .place-of-list-tasks {
    max-width: 1200px;
    width: 85%;
    z-index: 0;
}

@media only screen and (max-width: 767px) {
    .slide_0 .place-of-list-tasks {
        width: 100%;
        margin-top: 0;
    }

    .area-of-slide {
        padding: 20px;
    }
}

.slide_2 .place-of-list-tasks, .slide_4 .place-of-list-tasks, .slide_5 .place-of-list-tasks, .slide_6 .place-of-list-tasks, .slide_7 .place-of-list-tasks, .slide_8 .place-of-list-tasks {
    max-width: 1400px;
}

.slide_2 .area1, .slide_4 .area1, .slide_5 .area1 {
    grid-column-start: 1;
    grid-column-end: 3;
    border-bottom: 1px solid #d5d5d5;
}

.slide_2 .area2, .slide_4 .area2, .slide_5 .area2 {
    grid-column-start: 1;
    grid-column-end: 2;
    overflow-y: auto;
    border-left: 1px solid #d5d5d5;
    max-height: 75vh;
}

.ltr .slide_2 .area2, .ltr .slide_4 .area2, .ltr .slide_5 .area2 {
    border-left: 0 solid #d5d5d5;
    border-right: 1px solid #d5d5d5;
}

.slide_2 .area3, .slide_4 .area3, .slide_5 .area3 {
    grid-column-start: 2;
    grid-column-end: 3;
    overflow-y: auto;
    max-height: 75vh;
}

/*************** Class for slide_3 **/
.slide_3 .grid-container {
    grid-template-rows: minmax(36vh, auto) minmax(36vh, auto);
    grid-template-columns: 1fr minmax(400px, 1fr);
}

.slide_3 .place-of-list-tasks {
    width: 95%;
    margin: 30px auto;
    position: relative;
    padding: 0;
}

.slide_3 .area3 {
    grid-column-start: 1;
    grid-column-end: 3;
    border-top: 1px solid #d5d5d5;
}

.slide_3 .area1 {
    grid-column-start: 1;
    grid-column-end: 2;
    overflow-y: auto;
    border-left: 1px solid #d5d5d5;
    max-height: 75vh;
}

.ltr .slide_3 .area1 {
    border-left: 0 solid #d5d5d5;
    border-right: 1px solid #d5d5d5;
}

.slide_3 .area2 {
    grid-column-start: 2;
    grid-column-end: 3;
    overflow-y: auto;
    max-height: 75vh;
}

/*************** Class for slide_4 **/
.slide_4 .grid-container {
    grid-template-rows: minmax(36vh, auto) minmax(36vh, auto);
    grid-template-columns: 2fr minmax(400px, 1fr);

}

/*************** Class for slide_5 **/
.slide_5 .grid-container {
    grid-template-rows: minmax(36vh, auto) minmax(36vh, auto);
    grid-template-columns: minmax(400px, 1fr) 2fr;

}

/*************** Class for slide_6 **/
.slide_6 .grid-container {
    grid-template-rows: 72vh;
    grid-template-columns: minmax(400px, 1fr) minmax(400px, 1fr);
}

.slide_6 .area1 {
    overflow-y: auto;
    border-left: 1px solid #d5d5d5;
    max-height: 75vh;
}

.ltr .slide_6 .area1 {
    border-left: 0 solid #d5d5d5;
    border-right: 1px solid #d5d5d5;
}

.slide_6 .area2 {
    overflow-y: auto;
    max-height: 75vh;
}

/*************** Class for slide_7 **/
.slide_7 .grid-container {
    grid-template-rows: 72vh;
    grid-template-columns: minmax(400px, 1fr) 2fr;

}

.slide_7 .area1 {
    overflow-y: auto;
    border-left: 1px solid #d5d5d5;
    max-height: 75vh;
}

.ltr .slide_7 .area1 {
    border-left: 0 solid #d5d5d5;
    border-right: 1px solid #d5d5d5;
}

.slide_7 .area2 {
    overflow-y: auto;
    max-height: 75vh;
}

/*************** Class for slide_8 **/
.slide_8 .grid-container {
    grid-template-rows: 72vh;
    grid-template-columns: 2fr minmax(400px, 1fr);
}

.slide_8 .area1 {
    overflow-y: auto;
    border-left: 1px solid #d5d5d5;
    max-height: 75vh;
}

.ltr .slide_8 .area1 {
    border-left: 0 solid #d5d5d5;
    border-right: 1px solid #d5d5d5;
}

.slide_8 .area2 {
    overflow-y: auto;
    max-height: 75vh;
}

/*************** Class for slide_9 **/
.slide_9 .grid-container {
    grid-template-rows: minmax(36vh, auto) minmax(36vh, auto);
    grid-template-columns: minmax(400px, 1fr) 2fr;
}

.slide_9 .place-of-list-tasks {
    width: 95%;
    margin: 30px auto;
    position: relative;
    padding: 0;
}

.slide_9 .area3 {
    grid-column-start: 1;
    grid-column-end: 3;
    border-top: 1px solid #d5d5d5;
}

.slide_9 .area1 {
    grid-column-start: 1;
    grid-column-end: 2;
    overflow-y: auto;
    border-left: 1px solid #d5d5d5;
    max-height: 75vh;
}

.ltr .slide_9 .area1 {
    border-left: 0 solid #d5d5d5;
    border-right: 1px solid #d5d5d5;
}

.slide_9 .area2 {
    grid-column-start: 2;
    grid-column-end: 3;
    overflow-y: auto;
    max-height: 75vh;
}


/*************** Class for slide_10 **/

.slide_10 .grid-container {
    grid-template-rows: minmax(36vh, auto) minmax(36vh, auto);
    grid-template-columns: 2fr minmax(400px, 1fr);
}

.slide_10 .place-of-list-tasks {
    width: 95%;
    margin: 30px auto;
    position: relative;
    padding: 0;
}

.slide_10 .area3 {
    grid-column-start: 1;
    grid-column-end: 3;
    border-top: 1px solid #d5d5d5;
}

.slide_10 .area1 {
    grid-column-start: 1;
    grid-column-end: 2;
    overflow-y: auto;
    border-left: 1px solid #d5d5d5;
    max-height: 75vh;
}

.ltr .slide_10 .area1 {
    border-left: 0 solid #d5d5d5;
    border-right: 1px solid #d5d5d5;
}

.slide_10 .area2 {
    grid-column-start: 2;
    grid-column-end: 3;
    overflow-y: auto;
    max-height: 75vh;
}

/*************** Class for slide_0 **/
.slide_0 .grid-container {
    min-height: 72vh
}

@media only screen and  (max-width: 768px) {
    .grid-container {
        display: block;
    }

    .slide_2 .area1,
    .slide_3 .area1,
    .slide_4 .area1,
    .slide_5 .area1,
    .slide_6 .area1,
    .slide_7 .area1,
    .slide_8 .area1,
    .slide_2 .area2,
    .slide_3 .area2,
    .slide_4 .area2,
    .slide_5 .area2,
    .slide_6 .area2,
    .slide_7 .area2,
    .slide_8 .area2,
    .slide_2 .area3,
    .slide_3 .area3,
    .slide_4 .area3,
    .slide_5 .area3,
    .slide_6 .area3,
    .slide_7 .area3,
    .slide_8 .area3 {
        max-height: unset;
    }
}

@media only screen and  (max-width: 500px) {
    .area-of-slide {
        padding: 20px
    }
}


/********************** classes for areas - middle ***********/
@media only screen and (min-width: 770px) and  (max-width: 1024px) {
    .slide_2 .area2 .displayFilltersNone .filtersStatus,
    .slide_2 .area3 .displayFilltersNone .filtersStatus,
    .slide_3 .area1 .displayFilltersNone .filtersStatus,
    .slide_3 .area2 .displayFilltersNone .filtersStatus,
    .slide_6 .area1 .displayFilltersNone .filtersStatus,
    .slide_6 .area2 .displayFilltersNone .filtersStatus {
        display: none;
    }
}

/********************** classes for areas - small ***********/
.slide_4 .area3 .displayFilltersNone .filtersStatus,
.slide_5 .area2 .displayFilltersNone .filtersStatus,
.slide_7 .area1 .displayFilltersNone .filtersStatus,
.slide_8 .area2 .displayFilltersNone .filtersStatus,
.slide_9 .area1 .displayFilltersNone .filtersStatus,
.slide_10 .area2 .displayFilltersNone .filtersStatus {
    display: none;
}

@media only screen and (min-width: 770px) and  (max-width: 1024px) {
    .slide_4 .area3 .filtersStatus,
    .slide_5 .area2 .filtersStatus,
    .slide_7 .area1 .filtersStatus,
    .slide_8 .area2 .filtersStatus,
    .slide_9 .area1 .filtersStatus,
    .slide_10 .area2 .filtersStatus {
        display: none;
    }

    .slide_2 .grid-container, .slide_3 .grid-container, .slide_6 .grid-container {
        grid-template-columns: minmax(50%, 1fr) minmax(50%, 1fr);
    }

    .slide_4 .grid-container, .slide_8 .grid-container, .slide_10 .grid-container {
        grid-template-columns: minmax(50%, 2fr) minmax(50%, 1fr);
    }

    .slide_5 .grid-container, .slide_7 .grid-container, .slide_9 .grid-container {
        grid-template-columns: minmax(50%, 1fr) minmax(50%, 2fr);
    }

    .area-of-slide {
        padding: 30px 9px;
    }

    .place-tasks-in-slide {
        max-width: 800px;
    }
}