/* insert */
.add_blueprint {
    position: relative;
    width: 16px;
    display: inline-block;
}

.add_blueprint li {
    background: white;
    transition: .3s;
    cursor: default;
}

[data-color-scheme="dark"] .add_blueprint li{
    background: #424448;
}

.add_blueprint li:not(:last-child) {
    border-bottom: 1px solid var(--border);
    margin-bottom: 2px;
}

.add_blueprint li:hover {
    background: var(--table-header);
}

.add_blueprint__item {
    display: block;
    width: 100%;
}

.add_blueprint__item__wrapper .add_blueprint__item{
    padding: 10px 25px;
}

.add_blueprint__item__wrapper {
    position: absolute;
    z-index: 999;
}

.add_blueprint__item__wrapper_outer {
    padding-top: 5px;
}

.add_blueprint .blueprint {
    left: 0;
    transform: translateX(-100%);
}

.add_blueprint__item__wrapper {
    opacity: 0;
    pointer-events: none;
    min-width: 100%;
    box-shadow: 0 0 15px #00000038;
}

.add_blueprint__item__wrapper.category {
    right: 0;
}

.add_blueprint__wrapper:hover > .add_blueprint__item__wrapper,
.add_blueprint__wrapper:hover > * > .add_blueprint__item__wrapper {
    opacity: 1;
    pointer-events: all;
}

/* preview */
.blueprint_article_preview__wrapper {
    position: sticky;
    top: 0;
    min-width: 500px;
    height: calc(100vh);
    overflow: auto;
    background: white;
}

[data-color-scheme="dark"] .blueprint_article_preview__wrapper {
    background: #1b1d21;
}

.viewport {
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    background-position: center;
    z-index: 2;
}

.viewport--desktop {
    background-image: url("imac.png");
    height: 358px;
}

.viewport--tablet {
    background-image: url("ipad.png");
    height: 358px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.viewport--smartphone {
    background-image: url("iphone.png");
    height: 358px;
}

.viewport--smartphone .viewport__wrapper {
    left: 169px;
    top: 2px;
    width: 400px;
    transform: scale(calc(162 / 400));
    height: 875px;
    z-index: -1;
    border-radius: 24px;
    overflow: hidden;
}

.viewport--tablet .viewport__wrapper {
    left: 145px;
    top: 39px;
    width: 768px;
    transform: scale(calc(209 / 768));
    height: 1020px;
}

.viewport--desktop .viewport__wrapper {
    left: 94px;
    top: 58px;
    width: 1920px;
    transform: scale(calc(314 / 1920));
    height: 1080px;
}

.viewport__wrapper {
    position: absolute;
    top: 50%;
    left: 0;
    transform: scale(calc(500 / 1920)) translateY(-50%);
    transform-origin: left top;
    display: flex;
}

.viewport__wrapper > * {
    width: 100%;
    flex-shrink: 0;
    height: 100%;
    border: none;
}

.viewport__wrapper > *:not(:first-child) {
    margin-left: -100%;
}

/*.viewport__content:not(.--active) {
    opacity: 0;
    pointer-events: none;
}*/

/*iframe content*/
.--blueprint_insert .mod_article.--inactive {
    display: none;
}

.--blueprint_insert .sf-toolbar,
.--blueprint_insert .cto-toolbar {
    display: none !important;
}

#tl_buttons .chzn-container{
    display: inline-flex;
    margin-top: 10px;
    margin-bottom: 10px;
}

#tl_buttons .chzn-container ~ [type="submit"]{
    height: 30px;
    margin-top: -3px;
}