* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    height: 100vh;
    width: 100vw;

    >.colorBox {
        width: 20vw;
        height: 100%;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        * {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 2px solid black;
            box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.271);

        }

        >div {
            &:nth-of-type(1) {
                background-color: rgba(209, 73, 73, 0.8);
            }

            &:nth-of-type(2) {
                background-color: rgba(229, 38, 38, 0.8);
            }

            &:nth-of-type(3) {
                background-color: rgba(209, 150, 73, 0.8);
            }

            &:nth-of-type(4) {
                background-color: rgba(168, 209, 73, 0.8);
            }

            &:nth-of-type(5) {
                background-color: rgba(73, 209, 123, 0.8);
            }

            &:nth-of-type(6) {
                background-color: rgba(73, 209, 186, 0.8);
            }

            &:nth-of-type(7) {
                background-color: rgba(73, 125, 209, 0.8);
            }

            &:nth-of-type(8) {
                background-color: rgba(65, 57, 219, 0.8);
            }

            &:nth-of-type(9) {
                background-color: rgba(173, 73, 209, 0.8);
            }

            &:nth-of-type(10) {
                background-color: rgba(220, 90, 144, 0.8);
            }


        }
    }

    >.phone-svg {
        width: 80vw;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        >div {
            /* background-color: aquamarine; */
            width: 300px;
            height: 500px;

            >svg {
                /* width: 100%;
                height: 100%; */
                fill: transparent;
                background-color: transparent;

                .phone-content {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100vw;
                    height: 100vh;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    /* padding-left: $sidebarWidth / 2; */
                    background: linear-gradient(white, #f2f2f2);
                }

                .phone-container {
                    display: block;
                    position: relative;
                    /* width: $phoneSize * $aspectRatio;
                    padding-top: 1 / $aspectRatio * 100%; */
                    visibility: hidden;
                    opacity: 0;
                }

                #phone-svg {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    overflow: visible !important;
                }

                #phone-mask-path {
                    fill: #fff;
                    stroke: #fff;
                    stroke-width: 4;
                }

                #phone-outline {
                    fill: white;
                    stroke: white;
                    stroke-width: 3;
                    /* vector-effect: non-scaling-stroke; */
                    opacity: 0;
                    stroke: rgba(0, 0, 0, 0.2);
                }

            }

        }
    }
}

/* #phone-bg{
    fill: rgb(219, 38, 38);
} */

.colorBox > div:active {
  cursor: grabbing !important;
}
.colorBox > div {
  cursor: grab;
}