.preview-main {
	position: fixed;
	width: 46vh;
	height:36vh;
	padding: 4.5vh 5vh;
}

.layout-container {
	display:flex;
    flex-wrap: wrap;
	width: 9vh;
	height:9vh;
}

.layout {
	flex: 0 0 33.333333%;
    max-width: 33.333333%;
	border: 1px solid black;
}

#u-container {
	position:absolute;
	top:4.5vh;
	left:calc(14vh + 5px);
	border-top: 1px solid black;
	border-right: 1px solid black;
	border-left: 1px solid black;
}
#l-container {
	position:absolute;
	top: calc(13.5vh + 5px);
	right:32vh;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	border-left: 1px solid black;
}
#f-container {
	position:absolute;
	top: calc(13.5vh + 5px);
	left:calc(14vh + 5px);
}
#r-container {
	position:absolute;
	top: calc(13.5vh + 5px);
	left: calc(23vh + 10px);
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}
#b-container {
	position:absolute;
	top: calc(13.5vh + 5px);
	left:calc(32vh + 15px);
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	border-right: 1px solid black;
}
#d-container {
	position:absolute;
	top:22.5vh;
	left:14vh;
	top: calc(22.5vh + 10px);
    left:calc(14vh + 5px);
	border-left: 1px solid black;
	border-bottom: 1px solid black;
	border-right: 1px solid black;
}

/***************/
/*MODAL PREVIEW*/
/***************/

.preview-modal {
	bottom: 0;
	right: 0;
	width: 83.5vh;
	height:65vh;
	padding: 5vh 5vh;
}

.modal-layout-container {
	display:flex;
    flex-wrap: wrap;
	width: 18vh;
	height:18vh;
}

.modal-layout {
	flex: 0 0 33.333333%;
    max-width: 33.333333%;
	border: 1px solid black;
}

#modal-u-container {
	position: absolute;
	top:5vh;
	left:23.5vh;
	border-top: 1px solid black;
	border-right: 1px solid black;
	border-left: 1px solid black;
}

#modal-l-container {
	position: absolute;
	top:23.5vh;
	left:5vh;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	border-left: 1px solid black;
}

#modal-f-container {
	position: absolute;
	top:23.5vh;
	left:23.5vh;
}

#modal-r-container {
	position: absolute;
	top:23.5vh;
	left:42vh;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}

#modal-b-container {
	position: absolute;
	top:23.5vh;
	left:60.5vh;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	border-right: 1px solid black;
}

#modal-d-container {
	position: absolute;
	top:42vh;
	left:23.5vh;
	border-left: 1px solid black;
	border-bottom: 1px solid black;
	border-right: 1px solid black;
}

@media (max-width: 330px) {
    .preview-main {
        display: none;
    }
}

/* Extra small devices (phones, less than 576px)  */
@media (max-width: 575.98px) {
    .preview-main {
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);
        width: 112px;
        height:86px;
    }

    .layout-container {
    	width: 24px;
    	height: 24px;
    }

    #u-container {
    	top: 5px;
    	left: 31px;
    }
    #l-container {
    	top: 31px;
        left: 5px;
    }
    #f-container {
    	top: 31px;
        left: 31px;
    }
    #r-container {
    	top: 31px;
        left: 57px;
    }
    #b-container {
    	top: 31px;
        left: 83px;
    }
    #d-container {
    	top: 57px;
        left: 31px;
    }
}

/* Small devices (landscape phones, 576px and up)  */
@media (min-width: 576px) and (max-width: 767.98px) {
    .preview-main {
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);
        width: 179px;
        height:139px;
    }

    .layout-container {
        width: 40px;
        height: 40px;
    }

    #u-container {
        top: 5px;
        left: 48px;
    }
    #l-container {
        top: 48px;
        left: 5px;
    }
    #f-container {
        top: 48px;
        left: 48px;
    }
    #r-container {
        top: 48px;
        left: 91px;
    }
    #b-container {
        top: 48px;
        left: 134px;
    }
    #d-container {
        top: 91px;
        left: 48px;
    }
}

/* Medium devices (tablets, 768px and up)  */
@media (min-width: 768px) and (max-width: 991.98px) {
    .preview-main {
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);
        width: 240px;
        height:180px;
    }

    .layout-container {
        width: 54px;
        height: 54px;
    }

    #u-container {
        top: 5px;
        left: 63px;
    }
    #l-container {
        top: 63px;
        left: 5px;
    }
    #f-container {
        top: 63px;
        left: 63px;
    }
    #r-container {
        top: 63px;
        left: 121px;
    }
    #b-container {
        top: 63px;
        left: 179px;
    }
    #d-container {
        top: 121px;
        left: 63px;
    }
}

/* Large devices (desktops, 992px and up)  */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .preview-main {
        bottom: 0;
        right: 0;
    }
}

/* Extra large devices (large desktops, 1200px and up)  */
@media (min-width: 1200px) {
    .preview-main {
        bottom: 0;
        right: 0;
    }
}

@media (max-height: 380px) {
    .preview-main {
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);
        width: 112px;
        height:86px;
    }

    .layout-container {
        width: 24px;
        height: 24px;
    }

    #u-container {
        top: 5px;
        left: 31px;
    }
    #l-container {
        top: 31px;
        left: 5px;
    }
    #f-container {
        top: 31px;
        left: 31px;
    }
    #r-container {
        top: 31px;
        left: 57px;
    }
    #b-container {
        top: 31px;
        left: 83px;
    }
    #d-container {
        top: 57px;
        left: 31px;
    }
}