:root {

    --color-primary: #ff5a6e;
    --color-secondary: #ff8a6e;

    --color-layout-1: #fff;
    --color-layout-2: #f6f6f6;
    --color-layout-3: #f1f1f1;
    --color-layout-4: #e6e6e6;

    --color-layout-border: #e6e6e6;
    --color-layout-border-2: #ccc;
    --color-layout-border-3: #bbb;

    --font-color: #333;
    --font-color-2: #999;
    --heading-color: #000;
    --heading-color-2: #161616;

    --layout-box-border-width: 0;

    --layout-shadow-out-horizontal: 3px;
    --layout-shadow-out-vertical: 3px;
    --layout-shadow-out-blur: 15px;
    --layout-shadow-out-spread: 0;
    --layout-shadow-out-color: rgb(0 0 0 / 6%);

    --layout-shadow-in-horizontal: 0;
    --layout-shadow-in-vertical: 0;
    --layout-shadow-in-blur: 0;
    --layout-shadow-in-spread: 0;
    --layout-shadow-in-color: rgb(255 255 255 / 6%);

    --layout-shadow-offset: var(--layout-shadow-out-horizontal)
        var(--layout-shadow-out-vertical) var(--layout-shadow-out-blur)
        var(--layout-shadow-out-spread) var(--layout-shadow-out-color);
    --layout-shadow-inset: inset var(--layout-shadow-in-horizontal)
        var(--layout-shadow-in-vertical) var(--layout-shadow-in-blur)
        var(--layout-shadow-in-spread) var(--layout-shadow-in-color);

    --layout-shadow: var(--layout-shadow-offset), var(--layout-shadow-inset);


    /* Typography */
    --global-font-size: 16;
    --global-font-line-height: 1.4;

    /* Custom editor font sizes */
    --font-size-small: 14px;
    --font-size-regular: 16px;
    --font-size-medium: 26px;
    --font-size-large: 40px;
    --font-size-larger: 50px;
    --font-size-1: 32px;
    --font-size-2: 26px;
    --font-size-3: 20px;
    --font-size-4: 16px;
    --font-size-5: 14px;

    /* Layout Border */
    --layout-bw: 1px;
    --layout-border: var(--layout-bw) solid var(--color-layout-border);
    --layout-border-2: var(--layout-bw) solid var(--color-layout-border-2);
    --layout-border-3: var(--layout-bw) solid var(--color-layout-border-3);

    /* Border Radius */
    --theme-border-radius: 5px;
    --theme-btn-border-radius: 5px;
    --border-radius-1: 3px;
    --border-radius-2: 4px;
    --border-radius-3: 5px;
    --border-radius-4: 10px;
    --border-radius-5: 20px;
    --border-radius-large: 50px;
    --border-radius-larger: 100px;
    --border-radius-full: 50%;

    /* Colors */
    --global-font-color: var(--font-color);

    /* Custom editor colors */
    --color-theme-primary: var(--color-primary);
    --color-theme-secondary: var(--color-secondary);
    --color-theme-red: #ff2b2b;
    --color-theme-green: #15d91d;
    --color-theme-blue: #178bf1;
    --color-theme-yellow: #f1c20f;
    --color-theme-orange: #eb6811;
    --color-theme-black: #000;
    --color-theme-grey: #95a5a6;
    --color-theme-white: #fff;
    --color-theme-success: #15d91d;
    --color-theme-danger: #ff2b2b;
    --color-theme-warning: #eb6811;
    --color-theme-info: #0dcaf0;
}

.z-embed-container { 
    position: relative; 
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.z-embed-container iframe,
.z-embed-container object,
.z-embed-container embed { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.z-image-crop-16-9 {
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
}

.z-image-crop-16-9 img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 0;
    min-height: 100%;
    width: auto;
    min-width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

/* Progress Bar */

.le-progress-bar {
    --progress: 0;
    position: relative;
    width: 100%;
}

.le-progress-bar-complete {
    height: 100%;
    width: var(--progress);
    transition: width .8s ease-out .5s;
    background: var(--color-primary);
}

/*Flex expand*/
.z-flex-expand {
    flex: 1;
}

.z-ellipsis {
    display: inline-block;
    width:100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.z-button,
button.z-button,
input[type="submit"].z-button {
    font-family: inherit;
    font-size: 15px;
    color: #fff;
    background: var(--color-primary);
    border-radius: 3px;
    padding: 10px 30px;
    font-weight: 600;
    font-style: normal;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    line-height: 1.3;
    border: 1px solid transparent;
    outline: none;
    vertical-align: middle;
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}

.z-button:active,
.z-button:focus,
.z-button:hover,
button.z-button:active,
button.z-button:focus,
button.z-button:hover,
input[type="submit"].z-button:active,
input[type="submit"].z-button:focus,
input[type="submit"].z-button:hover {
    outline: none;
    text-decoration: none;
    color: #fff;
    -webkit-box-shadow: inset 0 0 0 99999px rgb(0 0 0 / 10%);
    box-shadow: inset 0 0 0 99999px rgb(0 0 0 / 10%);
}