.ThemePreview{
    margin: 1em;
}
:root{
    --scrollthbcolor: darkgray;
    --scrolltrkcolor: lightgray;
    --scrollwidth:0.2em;
    --scrollbtncolor: var(--scrollthbcolor);
    --scrollbtnheight: var(--srollwidth);
    --scrollthboutline:var(--scrolltrkcolor);
}
@keyframes marquee{
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0);
    }
}
.marqueeColumns {
    position: relative;
    animation: marquee 60s linear 0s infinite;
}
[__t="Grid"],[__t="Card"],[__t="Reel"],[__t="Carousel"]{
    tr{
        background: #FFF;
        border: none;
        box-shadow: none;
        overflow-x: hidden;
        overflow-y: hidden;
    }
    tr:hover{
    }
}

[__orientation="landscape"] [__t="Grid"],[__orientation="landscape"] [__t="GridExplorer"],[__orientation="landscape"] [__t="Card"],[__orientation="landscape"] [__t="Reel"],[__orientation="landscape"] [__t="Carousel"]{
    [__c]>tbody>tr{
        width:11.5%;
        margin-left:0.5%;
        margin-right:0.5%;
    }
    [__c="1"]>tbody>tr{
        width:100%;
        margin:0;
    }
    [__c="2"]>tbody>tr{
        width:49%;
        margin-left:0.5%;
        margin-right:0.5%;
    }
    [__c="3"]>tbody>tr{
        width:32.33%;
        margin-left:0.5%;
        margin-right:0.5%;
    }
    [__c="4"]>tbody>tr{
        width:24%;
        margin-left:0.5%;
        margin-right:0.5%;
    }
    [__c="5"]>tbody>tr{
        width:19%;
        margin-left:0.5%;
        margin-right:0.5%;
    }
    [__c="6"]>tbody>tr{
        width:15.66%;
        margin-left:0.5%;
        margin-right:0.5%;
    }
    [__c="7"]>tbody>tr{
        width:13.28%;
        margin-left:0.5%;
        margin-right:0.5%;
    }
    [__c="8"]>tbody>tr{
        width:11.5%;
        margin-left:0.5%;
        margin-right:0.5%;
    }
}
span[__l="M"], [__orientation="portrait"] [__t="Grid"],[__orientation="portrait"] [__t="Card"],[__orientation="portrait"] [__t="Reel"],[__orientation="portrait"] [__t="Carousel"]{
    [__c]>tbody>tr{
        width:19%;
        margin-left:0.5%;
        margin-right:0.5%;
    }
    [__c="1"]>tbody>tr{
        width:100%;
        margin:0;
    }
    [__c="2"]>tbody>tr{
        width:100%;
        margin:0;
    }
    [__c="3"]>tbody>tr{
        float: left;
        width:100%;
        margin:0;
    }
    [__c="4"]>tbody>tr{
        width:49%;
        margin-left:0.5%;
        margin-right:0.5%;
    }
    [__c="5"]>tbody>tr{
        width:49%;
        margin-left:0.5%;
        margin-right:0.5%;
    }
    [__c="6"]>tbody>tr{
        width:32.33%;
        margin-left:0.5%;
        margin-right:0.5%;
    }
    [__c="7"]>tbody>tr{
        width:32.33%;
        margin-left:0.5%;
        margin-right:0.5%;
    }
    [__c="8"]>tbody>tr{
        width:24%;
        margin-left:0.5%;
        margin-right:0.5%;
    }
    [__c="9"]>tbody>tr{
        width:32.33%;
        margin-left:0.5%;
        margin-right:0.5%;
    }
    [__c="10"]>tbody>tr{
        width:19%;
        margin-left:0.5%;
        margin-right:0.5%;
    }
    [__c="11"]>tbody>tr{
        width:19%;
        margin-left:0.5%;
        margin-right:0.5%;
    }
    [__c="12"]>tbody>tr{
        width:15.67%;
        margin-left:0.5%;
        margin-right:0.5%;
    }
    [__c="13"]>tbody>tr{
        width:15.67%;
        margin-left:0.5%;
        margin-right:0.5%;
    }
    [__c="14"]>tbody>tr{
        width:13.29%;
        margin-left:0.5%;
        margin-right:0.5%;
    }
    [__c="15"]>tbody>tr{
        width:13.29%;
        margin-left:0.5%;
        margin-right:0.5%;
    }
    [__c="16"]>tbody>tr{
        width:11.5%;
        margin-left:0.5%;
        margin-right:0.5%;
    }
}
[__t="Reel"]{
    table{
        table-layout: auto!important;
    }
    tbody{
        max-height: unset !important;
        width: auto !important;
        display: inline-flex !important;
    }
    
}
[__t="Grid"] *,[__t="Card"] *,[__t="Reel"] *,[__t="Carousel"] *{
    font-size: 1em;
}
[__orientation="portrait"][__t="Card"] *,[__orientation="portrait"][__t="Reel"] *,[__orientation="portrait"][__t="Grid"] *,[__orientation="portrait"][__t="Carousel"] *{
    font-size: 0.4em;
}
[__t="Card"],[__t="Reel"],[__t="Carousel"]{
    tbody{
        max-height: unset !important;
    }
    [__n="page_name"],[__n="page_content"]{
        filter:brightness(100%);
        text-align: right;
        overflow: hidden !important;
        float:right !important;
        margin-top: -24em;
        padding:1em;
    }
    [__n="page_name"]{
        font-size:1.2em;
    }
    [__n="page_content"]{
        font-size: 0.8em;
    }
    [__n="page_name"] *{
        color: inherit;
        font-size: 1.6em;
        font-weight: 700;
    }
    [__n="page_content"] *{
        color: inherit;
        font-size: 1.4em;
    }
    [__n="page_pic"] img{
        margin: 0;
        max-width: none !important;
        filter:brightness(75%);
    }
}
[__t="Card"],[__t="Reel"]{
    .CarouselButtons{
        display: none;
    }
}
[__orientation="portrait"]{
    table[__t] tbody{
        max-height: unset;
    }

    [__t="Carousel"],[__t="Card"],[__t="Reel"]{
        [__n="page_pic"] img, [__n="page_pic"] video{
        }
    }
}

/*** Pending ***/

span[__v="true"] input[name="__edit"]{
}
span[__v="false"] input[name="__edit"]{
}
td input[type="button"][__n="__edit"], td button[__n="__edit"]{
    value:"Delete";
}
span input[type="button"][__n="__edit"], span button[__n="__edit"]{
    value:"Add More";
}
*[__r] i:after{
    content:"*";
    color:red;
    font-weight: bolder;
}
*[__r] i:empty:after{
    content:"";
}
/*
::-webkit-scrollbar {
    width: 0.15em;
}*/
.SearchLabel{
    box-sizing: border-box;
    background: #CCC;
    display:inline-block;
    padding:0.05em;
    margin-left:0.1em;
    width:auto;
}
.SearchLabel:hover:after{
    content:" x";
    color:red;
    font-size:0.75em;
    vertical-align:middle;
    text-align:right;
}
.SearchLabel:hover{
    border: #000 solid 0.01em;
}
.SearchRow{
    vertical-align: top;
}
tr[search=true]{
    empty-cells: hide;
}
tr[search=true] td{
    vertical-align: top;
    /*width:100% !important;*/
}
input.__GridFilter{
    float:right;
    width:2.4em;
    background-image: url(../../System/images/filter.png)!important;
    background-color: white!important;
    background-size: 100% auto;
    background-position: center center;
    background-repeat: no-repeat;
}
input.__Download{
    float:right;
    width:2.4em;
    background-image: url(../../System/images/upload-icon.png)!important;
    background-color: white!important;
    background-size: 100% auto;
    background-position: center center;
    background-repeat: no-repeat;
    transform: rotate(180deg);
}
input.__Upload{
    float:right;
    width:2.4em;
    background-image: url(../../System/images/upload-icon.png)!important;
    background-color: white!important;
    background-size: 100% auto;
    background-position: center center;
    background-repeat: no-repeat;
}
input.__GridFilter{
    display:none;
}

/* Slider Style*/
[__t="Carousel"] .fixedHeader{
    display:none;
}
@keyframes left-slider{
    from{
        margin-left:-100%;
    }
    to{
        margin-left:unset;
    }
}
[__t="Carousel"] tr{
    background-color: transparent;
    /*animation: left-slider;
    animation-duration: 2s;*/
}
table[carousel] img{
    object-fit: cover;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
table[carousel] td{
    float:left !important;
}
.slider-grid span[__dataSpan=true]{
    max-height:none !important
}
span[__carousel] *{
    /*border:0 !important;*/
    padding:0;
    background-color:transparent;
    tr:not([selected]){
        display:none;
    }
}
.CarouselButtons{
    margin:auto;
    width:100%;
    height:5%;
    text-align: center;
    position:absolute;
    bottom:0;
    left:0;
}
.carousel-grid span[__dataSpan=true]{
    max-height:none !important
}
.CarouselButtons input[type="button"],.CarouselButtons button{
    margin-left:1%;
    background: #ccc;
    color:#ccc;
    width: 1em !important;
    height: 1em !important;
    min-height: 1em !important;
    display: inline;
    float:none;
    border-radius: 50%;
    border:0;
    cursor: pointer;
}
.CarouselButtons input[type="button"]:hover,.CarouselButtons button:hover{
    cursor:pointer;
    background: #fff;
    color:#fff;
}
.video_title{
    font-size: 2.4em;
    padding: 0 1em 0 1em!important;
}
.video_content{
    padding: 0 2.4em 0 2.4em !important;
}
.gallery-title{
    font-size: 1.2em;
}
input[__t="__MB"]{
    width:2.4em;
}
.__rtIcons{
    width:25px;
    margin:2px;
    padding:3px;
    background: #eee;
    border: 1px solid #aaa;
}
.__rtIcons:hover{
    background:#ccc;
    cursor:pointer;
}
.__DLList{
    position:absolute !important;
    background-color: #f9f9f9;
    z-index: 10;
}
[__t="tlbl"]{
    font-size: 0.67em;
    color:#888;
}
table td *:last-child{
    /*margin-top: -0.67em;*/
}
tr[search] td *:last-child{
    margin-top: 0;
}
.Card tr {
    border:0.05em solid darkgray;
    /* Add shadows to create the "card" effect */
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
    transition: 0.1s;
    margin-right:0.5%;
    margin-bottom: 10px;
    border-radius: 5px;
    padding: 0!important;
}

/* On mouse-over, add a deeper shadow */
.Card tr:hover {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
}
.card_img{
    background-color: darkgray;
}
.card_img img{
    margin-left: auto;
    margin-right: auto;
    display: block !important;
    float:none !important;
    width:60%!important;
}
/*div[__orientation="portrait"] .card_img{
    width:100%!important;
}
div[__orientation="portrait"] .card_img img{
    width:60%!important;
}*/
.card_title{
    background-color:#ddd;
    text-align: center;
    font-size: 1.4em;
    height:1.8em!important;
}
.card_button{
    float:right!important;
}
.card_button input{
    border: black solid 1px !important
}
.card_content div{
    overflow:hidden !important;
}
.page-title{
    text-shadow: 1px 1px 10px white, 1px 1px 10px white, 1px 1px 10px white, 1px 1px 10px white, 1px 1px 10px white, 1px 1px 10px white;
    /*height:3em;
    font-size: 1.6em;
    font-family: monospace;
    color:#0db7c4;*/
}
.page-image{
    max-height:8em;
    /*width:auto !important;*/
}
.page-content{
    height:8em !important;
    padding: 0 1em 0 1em !important;
    text-shadow: 1px 1px 10px white, 1px 1px 10px white, 1px 1px 10px white, 1px 1px 10px white, 1px 1px 10px white, 1px 1px 10px white;
}
.page-icon{
    color:#0db7c4;
    overflow:hidden!important;
}

.CartPicDesc{
    max-width: 50%;
}
.CartDescription {
    height:12em!important;
}
.carousel_title, .carousel_content{
    text-shadow: 1px 1px 10px white, 1px 1px 10px white, 1px 1px 10px white, 1px 1px 10px white, 1px 1px 10px white, 1px 1px 10px white;
}

.deactivate-addition{
}
.deactivate-addition input[value="Add"]{
    display: none !important;
}
.PromoCode input{
    border: 0 !important;
    box-shadow: 0 0 black !important;
}
.vm-p6>.vm_s {
    top: 2.1%;
    left: 35%;
    width: 29.7%;
    transform: perspective(100px) rotateZ(-59.8deg) skewY(27deg) skewX(.5deg) scaleY(1.15);
}
/*.p6{position:relative;padding:25% 7%}.p6-ls{padding:3.5% 12.2%}.p6_b{position:absolute;top:0;right:1%;bottom:0;left:1%;background:linear-gradient(to top,#b9bbbb 0,#f4f6f6 100%);border-radius:14%/7%;box-shadow:inset 0 0 4px rgba(0,0,0,.5)}.p6-shadow>.p6_b{box-shadow:inset 0 0 4px rgba(0,0,0,.5),0 0 10px rgba(0,0,0,.2)}.p6-ls>.p6_b{top:1%;right:0;bottom:1%;left:0;border-radius:7%/14%}.p6-grey>.p6_b{background:linear-gradient(to top,#707175 0,#a3a4a9 100%)}.p6-gold>.p6_b{background:linear-gradient(to top,#c4af9a 0,#fceeda 100%)}.p6_b:before{content:'';position:absolute;top:.7%;right:1.4%;bottom:.7%;left:1.4%;background-color:#e7e8e8;border-radius:13%/7%}.p6-ls>.p6_b:before{top:1.4%;right:.7%;bottom:1.4%;left:.7%;border-radius:7%/13%}.p6-grey>.p6_b:before{background-color:#373737}.p6-gold>.p6_b:before{background-color:#e7e8e8}.p6_b:after{content:'';position:absolute;top:1%;right:2.3%;bottom:1%;left:2.3%;background-color:#f5f5f5;border-radius:13%/6.5%}.p6-ls>.p6_b:after{top:2.3%;right:1%;bottom:2.3%;left:1%;border-radius:6.5%/13%}.p6-grey>.p6_b:after{background-color:#090808}.p6-gold>.p6_b:after{background-color:#f5f5f5}.p6_b_sp,.p6_b_ca,.p6_b_se{position:absolute;z-index:1;background-color:#333;transform:translate(-50%,-50%)}.p6_b_sp{top:6.25%;left:50%;width:16.5%;height:.8%;border-radius:5px}.p6-ls .p6_b_sp{top:50%;left:6.25%;width:.8%;height:16.5%}.p6_b_ca{top:6.3%;left:33.9%;width:3.5%;height:1.7%;border-radius:50%}.p6-ls .p6_b_ca{top:66.1%;left:6.3%;width:1.7%;height:3.5%}.p6_b_se{top:3.2%;left:50%;width:2.2%;height:1.1%;border-radius:50%}.p6-ls .p6_b_se{top:50%;left:3.2%;width:1.1%;height:2.2%}.p6_b_m,.p6_b_u,.p6_b_d,.p6_b_r{position:absolute;background-color:#b5b8ba;box-shadow:inset 0 5px 5px -3px rgba(0,0,0,.5),inset 0 -5px 5px -3px rgba(0,0,0,.5);transform:translate(0,-50%)}.p6-ls .p6_b_m,.p6-ls .p6_b_u,.p6-ls .p6_b_d,.p6-ls .p6_b_r{box-shadow:inset 5px 0 5px -3px rgba(0,0,0,.5),inset -5px 0 5px -3px rgba(0,0,0,.5);transform:translate(-50%,0)}.p6-grey>.p6_b>.p6_b_m,.p6-grey>.p6_b>.p6_b_u,.p6-grey>.p6_b>.p6_b_d,.p6-grey>.p6_b>.p6_b_r{background-color:#6a6b71}.p6-gold>.p6_b>.p6_b_m,.p6-gold>.p6_b>.p6_b_u,.p6-gold>.p6_b>.p6_b_d,.p6-gold>.p6_b>.p6_b_r{background-color:#c8b5a2}.p6-ls .p6_b_r{background-color:#f4f6f6}.p6-grey.p6-ls .p6_b_r{background-color:#a3a4a9}.p6-gold.p6-ls .p6_b_r{background-color:#fceeda}.p6_b_m{top:14.7%;left:-.7%;width:.7%;height:4%;border-radius:1px 0 0 1px}.p6-ls .p6_b_m{top:auto;left:14.7%;bottom:-.7%;width:4%;height:.7%;border-radius:0 0 1px 1px}.p6_b_u,.p6_b_d{left:-1%;width:1%;height:7.5%;border-radius:2px 0 0 2px}.p6-ls .p6_b_u,.p6-ls .p6_b_d{bottom:-1%;width:7.5%;height:1%;border-radius:0 0 2px 2px}.p6_b_u{top:25%}.p6-ls .p6_b_u{top:auto;left:25%}.p6_b_d{top:34%}.p6-ls .p6_b_d{top:auto;left:34%}.p6_b_r{top:25%;right:-1%;width:1%;height:7.5%;border-radius:0 2px 2px 0}.p6-ls .p6_b_r{top:-1%;right:auto;left:25%;width:7.5%;height:1%;border-radius:2px 2px 0 0}.p6_b_btn{position:absolute;z-index:1;bottom:6.5%;left:50%;width:16%;height:7.6%;background:linear-gradient(10deg,#222 0,#f5f5f5 50%,#222 100%);border-radius:50%;transform:translate(-50%,50%)}.p6-ls .p6_b_btn{top:50%;right:6.5%;bottom:auto;left:auto;width:7.6%;height:16%;transform:translate(50%,-50%)}.p6-grey>.p6_b>.p6_b_btn{background:linear-gradient(10deg,#050708 0,#46484e 50%,#050708 100%)}.p6-gold>.p6_b>.p6_b_btn{background:linear-gradient(10deg,#432a1d 0,#fbe8d5 50%,#432a1d 100%)}.p6_b_btn:before{content:'';position:absolute;top:5%;right:5%;bottom:5%;left:5%;background-color:#ebecec;border-radius:50%}.p6-grey>.p6_b>.p6_b_btn:before{background-color:#000}.p6-gold>.p6_b>.p6_b_btn:before{background-color:#ebecec}.p6_s{position:relative;z-index:1}.p6_s:before{content:'';position:absolute;z-index:-1;top:-.5%;right:-1%;bottom:-.5%;left:-1%;background-color:#333;border-radius:2px}.p6-ls>.p6_s:before{top:-1%;right:-.5%;bottom:-1%;left:-.5%}.p6_s_{position:relative;padding-bottom:178%;background-color:#888}.p6-ls .p6_s_{padding-bottom:56%}.p6_s_f{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}
<div class="p6   p6-grey p6-gold">
<div class="p6_b">
<div class="p6_b_sp"></div>
<div class="p6_b_ca"></div>
<div class="p6_b_se"></div>
<div class="p6_b_m"></div>
<div class="p6_b_u"></div>
<div class="p6_b_d"></div>
<div class="p6_b_r"></div>
<div class="p6_b_btn"></div>
</div>
<div class="p6_s">
<div class="p6_s_">
<div class="p6_s_f">
</div>
</div>
</div>
</div>*/

.modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0 0 0 / 50%);
    box-shadow: 0 5px 15px rgba(0 0 0 / 50%);
    position: relative;
    background-color: #fff;
    border: 1px solid #999;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .5em;
    -webkit-box-shadow: 0 3px 9px rgba(0 0 0 / 50%);
    box-shadow: 0 3px 9px rgba(0 0 0 / 50%);
    background-clip: padding-box;
    outline: 0;
}
.tree{
    padding-left:0.5em;
}
button{
    
}
[__t="Preview"]{
    height:100vh;
}
.RaisedCard{

}
.RaisedCard span[__c] table{
    width:98%;
}
.RaisedCard span[__c] td {
    padding-top: 0.5%;
}
.RaisedCard span[__c] td *{
    padding-left: 0.25em;
}
.RaisedCard span[__c] tr td{
    padding:0.1em;
}
.RaisedCard span[__c] tr{
    margin:0.5em 0.25em 0.5em 0.25em !important;
    box-shadow: 0px 0px 5px -1px darkgray !important;
    border:none !important;
    padding:0.2em;
/*    background: transparent;*/
}
.RaisedCard span[__c] td *:nth-child(2){
    font-size: 0.8em;
    height: 2em;
}
.RaisedCard span[__c] td div{
    min-height: 2em;
    height: auto!important;
}
.RaisedCard span[__c] .info-btn{
    margin-left:-2em;
}
.RaisedCard span[__c] img{
    height:auto !important;
    border-radius: 1em!important;
}
.RaisedCard .CardName{
    
}
/*-webkit-box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%), 0 0 1px 0 rgb(0 0 0 / 20%);
 box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%), 0 0 1px 0 rgb(0 0 0 / 20%);*/

.skeleton_loader {
  animation: skeleton-loading 1s linear infinite alternate;
}

@keyframes skeleton-loading {
  0% {
    background-color: hsl(200, 20%, 80%);
  }
  100% {
    background-color: hsl(200, 20%, 95%);
  }
}
/*input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;  Removes default margin 
  opacity: 1;
}*/