.box {
        width: 95%;
        margin: auto;
        margin-top: 25px;
        margin-bottom: 10px;
        border-radius: 5px;
        background-color: #36454F;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
        overflow-x: hidden;
    }
    
    .navbar-brand img{
        max-width: 70%;
        max-height: 50px;
    }
    
    .modal{
        z-index: 999999;
    }
    
    .main-content-wrapper{
        padding: 0;
    }
    
    .preload-content{
        margin-top: -10px;
    }
    
    .post-cta {
        background-color: #e1ecf4;
        border-radius: 3px;
        border: 1px solid #7aa7c7;
        box-shadow: rgba(255, 255, 255, .7) 0 1px 0 0 inset;
        box-sizing: border-box;
        color: #39739d;
        cursor: pointer;
        display: inline-block;
        font-family: -apple-system,system-ui,"Segoe UI","Liberation Sans",sans-serif;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.15385;
        margin: 0;
        outline: none;
        padding: 2px .4em;
        position: relative;
        text-align: center;
        text-decoration: none;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        vertical-align: baseline;
        white-space: nowrap;
    }
    
    .list{
        margin-bottom: 10px !important;
        border-radius: 5px !important;
    }
    
    .post-cta:hover,
    .post-cta:focus {
        background-color: #b3d3ea;
        color: #2c5777;
    }
    
    .post-cta:focus {
        box-shadow: 0 0 0 4px rgba(0, 149, 255, .15);
    }
    
    .post-cta:active {
        background-color: #a0c7e4;
        box-shadow: none;
        color: #2c5777;
    }
    
    .ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .extra img{
        min-height: 30vh;
    }
    
    .cover img{
        /*max-height: 37vh;*/
    }
    
    .filters{
        justify-content: space-between;
    }
    
    .radi, .radi img{
        border-radius: 5px;
    }
    
    .shareArticle {
        display: flex;
        flex-flow: column;
        align-items: center;
        width: 100%;
        padding: 15px;
    }
    
    .shareSocial {
        display: flex;
        flex-flow: row;
        align-items: center;
        padding-bottom: 30px;
        border-bottom: 1px solid white;
        @media (max-width: 767px) {
            flex-flow: column;
        }
    .socialTitle {
        margin: 0 15px 0 0;
        font-size: 20px;
        @media (max-width: 767px) {
            margin-bottom: 15px;
            text-align: center;
        }
    }
    .socialList {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: flex-start;
        justify-content: center;
        flex-flow: row wrap;
        li {
        margin: 5px;
        &:first-child {
        padding-left: 0;
    }
    a {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        border-radius: 100%;
        text-decoration: none;
        background-color: #999;
        color: #fff;
        transition: .35s;
        i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: top left;
        transform: scale(1) translate(-50%, -50%);
        transition: .35s;
    }
    &:hover {
        i {
            transform: scale(1.5) translate(-50%, -50%);
        }
    }
    }
    &:nth-child(1) a {
        background-color: #135cb6;
    }
    &:nth-child(2) a {
        background-color: #00aced;
    }
    &:nth-child(3) a {
        background-color: #BD081C;
    }
    &:nth-child(4) a {
        background-color: #111111;
    }
    &:nth-child(5) a {
        background-color: #1FB381;
    }
    }
    }
    }
    
    .selected{
        border: 2px solid green;
        border-radius: 5px;
    }
    
    @keyframes spinner {
        0% {
          transform: translate3d(-50%, -50%, 0) rotate(0deg);
        }
        100% {
          transform: translate3d(-50%, -50%, 0) rotate(360deg);
        }
    }
    .spin::before {
        animation: 0.5s linear infinite spinner;  
        animation-play-state: inherit;
        border: solid 5px #cfd0d1;
        border-bottom-color: #1c87c9;
        border-radius: 50%;
        content: "";
        height: 30px;
        width: 30px;
        position: absolute;
        /*top: 10%;*/
        /*left: 10%;*/
        transform: translate3d(-50%, -50%, 0);
        will-change: transform;
    }

    .wrapper-num {
        height: 100%;
        min-width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background: #f0ffff;
        border-radius: 5px;
        flex-wrap: nowrap;
        box-shadow: 0 5px 10px rgba(0,0,0,0.2);
        margin: auto;
    }
    .wrapper-num span{
        width: 20%;
        text-align: center;
        font-size: 45px;
        font-weight: 600;   
        cursor: pointer;
        user-select: none;
    }
    .wrapper-num input{
        width: 60%;
        font-size: 16px;
        font-weight: bold;
    }
    
    .wrapper-button{
        width: 97%;
        display: flex;
        flex-direction: row-reverse;
        background: #f0ffff;
        float: right;
        border-radius: 5px;
        box-shadow: 0 5px 10px rgba(0,0,0,0.2);
        padding: 10px;
        margin-bottom: 20px;
    }
    
    .payment{
        width: 97%;
    }
    
    .mode{
        width: 30%;
        min-height: 50px;
        border-width: 2px;
        border-style: solid;
        border-radius: 5px;
        border-color: transparent;
        margin-bottom: 10px;
    }
    
    .mselected{
        border-color: green;
    }
    
    .payfooter{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    
    .success{
        color: #155724;
        background-color: #d4edda;
        border-color: #c3e6cb;
    }
    .warning{
        color: #721c24;
        background-color: #f8d7da;
        border-color: #f5c6cb;
    }
    
    code{
        color: green;
    }
    
    .row{
        margin-right: 0px !important;
        margin-left: 0px !important;
    }
    
    .bg-1{
        background-color: #36454F;
        margin: 5px;
        border-radius: 4px;
        padding: 5px;
    }
    
    .imlink{
        color: #007bff !important;
    }
    
    .text-bold{
        font-weight: bold;
        text-align: center; 
    }