
.ez-box{
    width:100%;
    position: relative;
    display: flex;
    flex-direction: column;
    -webkit-background-clip: padding;
    -moz-background-clip: padding;
    background-clip: padding-box;
    
    &.no-shadow{
        box-shadow: none;
    }
    &.no-border{
        border: none;
    }

    &.join-bottom{
        margin-bottom: 0px !important;
        & + .ez-box{
            border-top: none;
            border-top-right-radius: 0px;
            border-top-left-radius: 0px;
        }
    }

    &.join-right{
        & + .ez-box{
            border-left: none;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
        }
    }


    &:not(.ez-outside-header){
        background: var(--background-light);
        box-shadow: var(--shadow);
        border-radius: var(--border-radius);
        border: var(--border-width) solid var(--border);
        .ez-box-body{
          border: none;
          box-shadow: none;
          background: initial;
        }
    }
    &.sm{
        max-width: var(--sz-sm-width);
    }
    &.md{
        max-width: var(--sz-md-width);
    }
    &.lg{
        max-width: var(--sz-lg-width);
    }
    &.xl{
        max-width: var(--sz-xl-width);
    }

    &.center{
        margin: 0 auto;
    }

    &.circle{
        border-radius: 50%;
    }

    &.full{
        height: calc(100% - var(--box-spacing));
        .ez-box-body{
            height: 100%;
        }
    }

    .ez-box-head{
        padding: 30px; 
        padding-bottom: 10px;
        h2{
            margin-bottom: 0px;
        }
    }

    .ez-box-body{
        background: var(--background-light);
        box-shadow: var(--shadow);
        border-radius: var(--border-radius);
        border: var(--border-width) solid var(--border);
        padding: var(--box-padding);
    }
    
    .ez-box-footer {
        text-align: right;
        position: relative;
        padding: 0 var(--box-padding);
      
        border-top: 1px solid rgba(0,0,0,0.2);
        .small {
            max-width: 45%;
            white-space: pre-wrap;
            position: absolute;
            width: -moz-fit-content;
		    width: -webkit-fit-content;
            width: fit-content;
            left: 30px;
            text-align: left;
            top: 50%;
            transform: translateY(-50%);
        
        }
    }
}


@media (max-width: 768px){
    .ez-box{
        overflow-x: scroll;
        overflow-y: hidden;
    }
}