.promotions .content > app-widget-host {
    height: 100%;
}

.promotion-container {
    height: 100%;
}

#root .promotion-container > app-widget-host {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.promotion {
   font-size: 2.2rem;
   position: relative;
   margin-bottom: 2px;
   color: var(--c-white);
   flex:1;
   cursor:pointer;
}
.mobile .promotion {
    min-width:280px;
}
.promotion:nth-child(n+2) {
    margin-right: 2px;
}



.promotion > app-widget-host {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.promotion .promotion-content,
.promotion .promotion-details {
    padding: 10px;
    position: relative;
    z-index: 2;
}
.promotion .content-container {
    width:100%;
    height:100%;
   
}
.promotion .content-container > app-widget-host {
     display:flex;
    justify-content:center;
    width:100%;
    height:100%;
}
 .close-promotion {
    position:absolute;
    z-index:3;
    right:0px;
    top:0px;
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--c-white);
  border:1px solid var(--c-primary-b)
}
.promotion .promotion-image {
    /* position: absolute; */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--c-primary-b);
    z-index:1;
}
.promotion .promotion-image img {
   width:100%;
   height:auto;
  
}
.mobile .promotion {
    flex: 1;
}
.promotion-details, .close-promotion {
    display:none
}
#root.promotion-1 .promotion-1 .close-promotion,
#root.promotion-2 .promotion-2 .close-promotion,
#root.promotion-3 .promotion-3 .close-promotion,
#root.promotion-4 .promotion-4 .close-promotion,
#root.promotion-5 .promotion-5 .close-promotion ,
#root.promotion-6 .promotion-6 .close-promotion ,
#root.promotion-7 .promotion-7 .close-promotion ,
#root.promotion-8 .promotion-8 .close-promotion  {
    display:flex;
}
#root.promotion-1 .promotion-1 .promotion-content,
#root.promotion-2 .promotion-2 .promotion-content,
#root.promotion-3 .promotion-3 .promotion-content,
#root.promotion-4 .promotion-4 .promotion-content,
#root.promotion-5 .promotion-5 .promotion-content,
#root.promotion-6 .promotion-6 .promotion-content,
#root.promotion-7 .promotion-7 .promotion-content,
#root.promotion-8 .promotion-8 .promotion-content {
    display:none;
}
#root.promotion-1 .promotion:not(.promotion-1),
#root.promotion-2 .promotion:not(.promotion-2),
#root.promotion-3 .promotion:not(.promotion-3),
#root.promotion-4 .promotion:not(.promotion-4),
#root.promotion-5 .promotion:not(.promotion-5),
#root.promotion-6 .promotion:not(.promotion-6),
#root.promotion-7 .promotion:not(.promotion-7),
#root.promotion-8 .promotion:not(.promotion-8){
   flex:1 1 100%;;
   border-bottom:1px solid var(--c-primary-b)

}
#root.promotion-1 .promotion-1,
#root.promotion-2 .promotion-2,
#root.promotion-3 .promotion-3,
#root.promotion-4 .promotion-4,
#root.promotion-5 .promotion-5,
#root.promotion-6 .promotion-6,
#root.promotion-7 .promotion-7,
#root.promotion-8 .promotion-8{
    width:100%;
    height:100%;
    color:white;
    
}
#root.promotion-1 .promotion-1 .promotion-details,
#root.promotion-2 .promotion-2 .promotion-details,
#root.promotion-3 .promotion-3 .promotion-details,
#root.promotion-4 .promotion-4 .promotion-details,
#root.promotion-5 .promotion-5 .promotion-details,
#root.promotion-6 .promotion-6 .promotion-details,
#root.promotion-7 .promotion-7 .promotion-details,
#root.promotion-8 .promotion-8 .promotion-details  {
    display:flex;
    font-size:1.5rem
}
#root.promotion-1 .promotion-1 .promotion-image,
#root.promotion-2 .promotion-2 .promotion-image,
#root.promotion-3 .promotion-3 .promotion-image,
#root.promotion-4 .promotion-4 .promotion-image,
#root.promotion-5 .promotion-5 .promotion-image,
#root.promotion-6 .promotion-6 .promotion-image,
#root.promotion-7 .promotion-7 .promotion-image,
#root.promotion-8 .promotion-8 .promotion-image  {
    opacity:0
}

#root.promotion-1 .promotion-1 .promotion-content,
#root.promotion-2 .promotion-2 .promotion-content,
#root.promotion-3 .promotion-3 .promotion-content,
#root.promotion-4 .promotion-4 .promotion-content,
#root.promotion-5 .promotion-5 .promotion-content,
#root.promotion-6 .promotion-6 .promotion-content,
#root.promotion-7 .promotion-7 .promotion-content,
#root.promotion-8 .promotion-8 .promotion-content  {
    width:100%;
    padding:10px;
}

.promotion-page .left-content >app-widget-host {
    flex-direction:row;
}
.promotion-page .content {
    padding:20px;
    height:100%;
}
.promotion-page {
    height:100%;
    color:var(--c-text)
}

.promotion-page .left-sidebar {
    min-height:calc(100vh - 52px);
    max-width:220px;
    flex:2 1 100%
}

.promotion-page .promotion-menu ul{
    flex-direction:column;
}

.promotion-page .promotion-menu ul a {
    background-color:unset;
    color:var(--c-text);
    padding:15px;
    border-bottom:1px solid var(--c-primary-b)
}
.promotion-page .promotion-menu ul a.active {
    background-color:var(--c-text);
    color:var(--c-primary)
}
.promotion-page  table {
    border-collapse:collapse;
}
.promotion-page table td {
    padding:5px;
    border:1px solid var(--c-primary-d)
}

.promotion-page .promotion-page-image {
   text-align:center;
    background-color:var(--c-primary)
}
.promotion-page .promotion-page-image img {
    margin:0 auto;
   
}

.mobile .promotion-page .promotion-page-image img {
    width:100%;
    max-width:480px;
}