/*custom*/
.dnn-8 .d-wrapper,
.dnn-9 .d-wrapper {
    min-height: 50px;
}

.dnn-9 #divCb>div,
.dnn-9 #divCb>svg {
    left: 80px;
    max-height: 100%;
}

.dnn-9.dnnEditState #divCb>div,
.dnn-9.dnnEditState #divCb>svg {
    max-height: calc(100% - 80px);
}

.dnn-8 #divCb>div,
.dnn-8 #divCb>svg {
    top: 54px;
    max-height: calc(100% - 54px);
}

#Body.dnn-8,
#Body.dnn-9 {
    overflow: visible !important;
}


.dnnEditState .d-wrapper.is-wrapper::before,
.dnn-8 .d-wrapper.is-wrapper::before,
.dnn-9 .d-wrapper.is-wrapper::before {
    content: "";
    position: absolute;
    pointer-events: none;
    outline: 2px solid #00da89;
    top: 2px;
    right: 2px;
    bottom: 2px;
    left: 2px;
    z-index: 5;
}

.d-wrapper>.d-placeholder {
    text-align: center;
    width: 800px !important;
    margin: 0 auto !important;
    float: none !important;
    max-width: 95%;
    display: none;
    cursor: pointer;
    padding: 12px 0;
    border: none;
    background: none !important;
    display: block;
}

.d-wrapper>.d-placeholder>div {
    border: 1px dashed #a9a9a9;
    background: rgba(255, 255, 255, 0.5);
    padding: 20px;

}

.d-wrapper>.d-placeholder span {
    margin: 0;
}

.dnnEditState .d-placeholder,
.dnn-8 .d-placeholder,
.dnn-9 .d-placeholder {
    display: block;
}



.ContentBuilderControl {
    position: fixed;
    left: 50%;
    bottom: 15px;
    z-index: 10000;
    width: 100px;
    height: 50px;
    text-align: center;
    margin-left: -50px;
}

.dnn-9 .ContentBuilderControl {
    margin: 0 0 0 15px;
}

#ContentBuilderSaveHTML {
    position: relative;
    display: block;
    width: 100px;
    height: 50px;
    margin: 0 auto;
    color: #fff;
    border-radius: 3px;
    outline: none;
    border: none;
    background-color: #2196f3;
    transition: 300ms ease all;
    display: inline-block;
}

#ContentBuilderSaveHTML:before {
    content: "SAVE";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
    letter-spacing: 1px;
}

#ContentBuilderSaveHTML:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

#ContentBuilderSaveHTML.loading:hover,
#ContentBuilderSaveHTML.success:hover,
#ContentBuilderSaveHTML[disabled]:hover {
    box-shadow: none;
}

#ContentBuilderSaveHTML[disabled] {
    background-color: #b9b9b9;
}

#ContentBuilderSaveHTML.loading {
    pointer-events: none;
    width: 50px;
    border-radius: 50%;
    background-color: #2196f3;
}

#ContentBuilderSaveHTML.loading:before {
    opacity: 0.75;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45);
    border: 2px solid transparent;
    border-top-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    animation: spin 0.35s linear infinite;
}

#ContentBuilderSaveHTML.success {
    pointer-events: none;
    background-color: #35c554;
    width: 50px;
    border-radius: 50%;
    animation: pop 260ms forwards 1;
}

#ContentBuilderSaveHTML.success:before {
    opacity: 0.75;
    content: "\f00c";
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



@keyframes spin {
    from {
        transform: translate(-50%, -50%) rotate(0);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes pop {
    0% {
        transform: scale(0);
    }

    85% {
        transform: scale(1.2);
        box-shadow: 0 1px 3px fade(#000, 40%);
    }

    100% {
        transform: scale(1);
        box-shadow: none;
    }
}

*[data-bottom-top]:not(.skrollable) {
    visibility: hidden;
}

#DnnMediaBox {
    position: fixed;
    top: 30px;
    left: 120px;
    right: 30px;
    bottom: 50px;
    background: #FFF;
    z-index: 10010;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
    border: 1px solid #e5e5e5;
    padding: 56px 0 65px;
    display: none;
}

.dnn-8  #DnnMediaBox{
    left: 30px;
    top: 30px;
    bottom: 30px;
}


#DnnMediaBox .media-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

#DnnMediaBox .media-header h4 {
    font-size: 18px;
}

#DnnMediaBox .media-body {
    height: 100%;
    display: block;
    width: 100%;
}


#DnnMediaBox .media-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
    background: #ECF0F1;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}



.SelectImageList {}

.SelectImageList .gallery-img {
    width: 150px;
    height: 150px;
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin: 0px 10px 10px 0;
}

.SelectImageList .gallery-img .wrap-image {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

.SelectImageList .gallery-img img {
    opacity: 0;
}

.SelectImageList .gallery-img .tools a {
    display: block;
    text-align: center;
    white-space: nowrap;
    margin: 0 3px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.SelectImageList .gallery-img .wrap-image::after {
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    top: 5px;
    right: 5px;
    background: #ffffff;
    text-align: center;
    cursor: pointer;
    border: 1px solid #DDDDDD;
    border-radius: 50%;
    display: none;
}

.SelectImageList .gallery-img .wrap-image:hover::after,
.SelectImageList .gallery-img .wrap-image.selected::after {
    display: block;
}

.SelectImageList .gallery-img .wrap-image.selected::before {
    display: block;
    content: "";
    width: 5px;
    height: 10px;
    position: absolute;
    top: 8px;
    right: 11px;
    cursor: pointer;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
    z-index: 11;
    transform: rotate(45deg);
}

.SelectImageList .gallery-img .title {
    display: block;
    position: absolute;
    text-align: center;
    bottom: 0;
    left: 0;
    right: 0;
    height: 34px;
    line-height: 34px;
    font-size: 12px;
    color: #fff;
    background-color: rgba(0, 0, 0, .5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



/* ---------------------------------------------------------------------- */
/*	Tabs
/* ---------------------------------------------------------------------- */
.SelectImage {
    padding: 0;
    margin: 0;
}
#SelectImageTabs.nav-tabs {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    margin-left: 0;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 8px 15px 0;
    background: #f9f9f9;
}

#SelectImageTabs.nav-tabs::after {
    content: "";
    display: table;
    clear: both;
}

#SelectImageTabs.nav-tabs>li {
    float: left;
    margin-bottom: -1px;
    position: relative;
    display: block;
    position: relative;
    z-index: 1;
}

#SelectImageTabs.nav-tabs>li>a,
#SelectImageTabs.nav-tabs>li>a:focus {
    background-color: #F9F9F9;
    color: #999999;
    line-height: 16px;
    margin-right: -1px;
    position: relative;
    border: 1px solid #DDDDDD;
    display: block;
    padding: 10px 15px;
    font-size: 13px;
    text-decoration: none;
}

#SelectImageTabs.nav-tabs>li>a:hover {
    background-color: #FFFFFF;
    border-color: #DDDDDD;
    color: #4C8FBD;
}

#SelectImageTabs.nav-tabs>li.active>a,
#SelectImageTabs.nav-tabs>li.active>a:focus,
#SelectImageTabs.nav-tabs>li.active>a:hover {
    background-color: #FFFFFF;
    border-bottom-color: #FFF;
}

.SelectImage .tab-pane {
    display: none;
}

.SelectImage .tab-pane.active {
    display: block;
}

.SelectImage .tab-content {
    padding: 16px 12px;
}

.is-builder.connectSortable.ui-sortable{
    position: relative;

}

.layout-container > .row > div[contenteditable]::before{
    content: "";
    position: absolute;
    top: -53px;
    left: 79px;
    width: 47px;
    height: 47px;
    line-height: 47px;
    z-index: 10000;
    font-size: 18px;
    background: #fff;
    border: 1px solid rgb(199, 199, 199);
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition:opacity 100ms ease-in;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='145' viewBox='0 0 220 145'%3E %3Cpath fill='currentColor' d='M169.918,62.205c-0.436-0.571-1.005-0.911-1.711-1.019l-14.909-2.281c-0.815-2.607-1.929-5.268-3.341-7.984 c0.977-1.358,2.443-3.272,4.398-5.744c1.955-2.472,3.34-4.277,4.155-5.418c0.435-0.598,0.651-1.222,0.651-1.874 c0-0.76-0.189-1.357-0.57-1.792c-1.955-2.771-6.436-7.387-13.443-13.851c-0.65-0.543-1.33-0.814-2.035-0.814 c-0.815,0-1.467,0.244-1.956,0.732l-11.568,8.718c-2.228-1.141-4.672-2.146-7.333-3.015l-2.281-14.99 c-0.054-0.706-0.367-1.29-0.937-1.752c-0.571-0.462-1.235-0.692-1.997-0.692H98.955c-1.575,0-2.553,0.76-2.933,2.281 c-0.706,2.715-1.494,7.766-2.363,15.153c-2.553,0.816-5.024,1.848-7.414,3.097l-11.243-8.718c-0.706-0.543-1.412-0.814-2.118-0.814 c-1.195,0-3.761,1.941-7.699,5.825c-3.938,3.884-6.612,6.803-8.025,8.758c-0.489,0.706-0.733,1.331-0.733,1.874 c0,0.652,0.271,1.304,0.814,1.955c3.639,4.4,6.545,8.147,8.718,11.244c-1.358,2.498-2.417,4.997-3.177,7.495L47.628,60.86 c-0.597,0.109-1.113,0.462-1.548,1.06c-0.435,0.597-0.652,1.222-0.652,1.873v18.087c0,0.707,0.217,1.344,0.652,1.914 c0.435,0.571,1.005,0.912,1.711,1.02l14.91,2.2c0.76,2.661,1.873,5.349,3.34,8.064c-0.977,1.358-2.444,3.272-4.399,5.744 s-3.341,4.277-4.155,5.418c-0.435,0.599-0.652,1.222-0.652,1.874c0,0.706,0.19,1.33,0.57,1.873 c2.118,2.934,6.599,7.497,13.443,13.688c0.598,0.598,1.277,0.896,2.037,0.896c0.815,0,1.494-0.244,2.037-0.732l11.488-8.719 c2.228,1.141,4.672,2.146,7.333,3.016l2.281,14.99c0.055,0.706,0.367,1.29,0.937,1.752c0.57,0.463,1.236,0.692,1.996,0.692h18.087 c1.577,0,2.554-0.76,2.935-2.281c0.705-2.716,1.492-7.766,2.361-15.153c2.553-0.815,5.025-1.848,7.414-3.097l11.244,8.8 c0.76,0.488,1.467,0.732,2.118,0.732c1.194,0,3.747-1.927,7.657-5.784c3.912-3.856,6.6-6.79,8.065-8.8 c0.489-0.543,0.734-1.167,0.734-1.873s-0.271-1.387-0.815-2.037c-3.91-4.78-6.816-8.527-8.718-11.243 c1.086-2.01,2.146-4.481,3.178-7.414l15.072-2.28c0.651-0.109,1.196-0.463,1.63-1.061s0.65-1.223,0.65-1.874V64.119 C170.57,63.413,170.354,62.776,169.918,62.205z M122.747,87.746c-4.073,4.074-8.989,6.111-14.747,6.111s-10.673-2.037-14.747-6.111 c-4.073-4.073-6.11-8.988-6.11-14.746s2.036-10.673,6.11-14.747c4.074-4.073,8.99-6.11,14.747-6.11 c5.758,0,10.674,2.037,14.747,6.11c4.073,4.074,6.11,8.989,6.11,14.747S126.82,83.673,122.747,87.746z' /%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
}
.layout-container > .row > div[contenteditable]:hover::before{
    opacity: 1;
}
#divCustomModuleTool{
    margin-left: -70px;
}