﻿#widget_layoutoptions_showcase {
    display: flex;
    text-align: center;
    justify-content: center;
}

#widget_layoutoptions_showcase_left {
    width: 45%;
    margin-right: 10%;

}
#widget_layoutoptions_showcase_right {
    width: 45%;
}

#widget_layoutoptions_showcase_left_svgs,
#widget_layoutoptions_showcase_right_svgs {
    display: flex;
    max-height: 90px;
    height: 90px;
    text-align: center;
    justify-content: center;
}

#svg_widgetmodal {
    width: 140px;
}
#svg_widgetmobile {
    width: 70px;
}
#svg_widgetembedded {
    width: 140px;
}

#widget_layoutoptions_showcase_left_separator {
    width: 3px;
    height: 100%;
    margin-left: 5px;
    margin-right: 5px;
    background-color: #F15A24;
}

.widget_layoutoptions_showcase_h1 {
    color: #F15A24;
    font-size: large;
    font-weight: bold;
}

.widget_layoutoptions_showcase_item {
    cursor: pointer;
    padding: 6px;
}

.widget_layoutoptions_showcase_item:hover {
    background-color: #f3f0f0;
}

.widget_layoutoptions_detail_svgitem {
    display: flex;
}

@media (min-width: 768px) {
    .widget_layoutoptions_detail_svgitem svg {
        width: 140px;
        height: 90px;
        max-width: 140px;
        min-width: 140px;
        margin-right: 15px;
    }
}
@media (max-width: 767px) {
    .widget_layoutoptions_detail_svgitem svg {
        display: none;
    }
}




    /* SVG Styling */
    .svg_widgetembedded_st0 {
        fill: none;
        stroke: #666666;
        stroke-width: 12;
        stroke-miterlimit: 10;
    }

.svg_widgetembedded_st1 {
    fill: none;
    stroke: #F15A24;
    stroke-width: 12;
    stroke-miterlimit: 10;
}
.svg_widgetmobile_st0 {
    fill: #FFFFFF;
}

.svg_widgetmobile_st1 {
    fill: none;
    stroke: #000000;
    stroke-width: 9;
    stroke-miterlimit: 10;
}

.svg_widgetmobile_st2 {
    fill: none;
    stroke: #F15A24;
    stroke-width: 9;
    stroke-miterlimit: 10;
}

.svg_widgetmodal_st0 {
    fill: #999999;
}

.svg_widgetmodal_st1 {
    fill: none;
    stroke: #666666;
    stroke-width: 12;
    stroke-miterlimit: 10;
}

.svg_widgetmodal_st2 {
    fill: #FFFFFF;
    stroke: #F15A24;
    stroke-width: 12;
    stroke-miterlimit: 10;
}

.svg_widgetmodal_st3 {
    fill: none;
    stroke: #F15A24;
    stroke-width: 12;
    stroke-miterlimit: 10;
}