@charset "utf-8";
@import url("reset.css");
@import url("waiverform-icons.css");
/* ------------------------------------------------ FONTS
*/
@font-face {
    font-family: "lato-light";
    src: url("fonts/lato-light.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "lato-regular";
    src: url("fonts/lato-regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "lato-bold";
    src: url("fonts/lato-bold.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0;
}
/* ------------------------------------------------ CUSTOM SCROLLBARS
*/
* {
    scrollbar-width: thin;
    scrollbar-color: #989ba2 #ddd;
}

    *::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    *::-webkit-scrollbar-track {
        background: #ddd;
    }

    *::-webkit-scrollbar-thumb {
        background-color: #989ba2;
        border-radius: 20px;
        border: 3px solid #ddd;
    }

    *:focus {
        outline: none;
    }
/* ------------------------------------------------ C3 TEMPLATE EDITOR AREA
*/
#C3TemplateEditor {
    box-sizing: border-box;
    padding: 0;
    font-family: "lato-regular", sans-serif;
    text-align: left;
    background: #fff;
    margin: 0;
    color: #333;
    font-size: 14px;
    height: 100vh;
    overflow: hidden;
}
    /* ------------------------------------------------ C3 TEMPLATE EDITOR HEADER
*/
    #C3TemplateEditor #C3TemplateEditorHeader {
        background: #313949;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        padding: 10px;
        box-sizing: border-box;
    }

        #C3TemplateEditor #C3TemplateEditorHeader .column {
            flex: 1 0 auto;
        }

            #C3TemplateEditor #C3TemplateEditorHeader .column:last-of-type {
                text-align: right;
            }

#C3TemplateEditorHeader h2 {
    color: #fff;
    font-family: "lato-bold";
    background: #6f7580;
    padding: 4px;
    font-size: 16px;
    margin: 0 0 8px;
    padding: 0;
}

#C3TemplateEditorHeader h3 {
    color: #fff;
    font-size: 15px;
    padding: 0;
    margin: 0;
}

#C3TemplateEditorHeader ul {
    margin: -1px 0 0 0;
    padding: 0;
    list-style: none;
}

    #C3TemplateEditorHeader ul li {
        display: inline-block;
        margin-bottom: 5px;
    }

        #C3TemplateEditorHeader ul li:last-of-type {
            margin-bottom: 0;
        }

#C3TemplateEditorHeader .button {
    display: block;
    position: relative;
    color: #ccc;
    box-sizing: border-box;
    transition: 0.2s linear;
    text-decoration: none;
    padding: 3px 14px 3px 26px;
    border-radius: 2px;
    cursor: pointer;
    background: #5a616d;
    font-family: "lato-bold";
    font-size: 12px;
    text-align: left;
    min-width: 60px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    #C3TemplateEditorHeader .button i {
        font-size: 15px;
        position: absolute;
        left: 6px;
        top: 4px;
    }

    #C3TemplateEditorHeader .button:hover {
        color: #fff;
        background: #3c98de;
        border-color: #313949;
    }

#C3TemplateEditorHeader #C3TemplateEditorHeaderSave:hover {
    background: #ffbf00;
}

#C3TemplateEditorHeader #C3TemplateEditorHeaderCancel:hover {
    background: #990000;
}

#C3TemplateEditorHeader #C3TemplateEditorHeaderPublish:hover {
    background: #009900;
}

#C3TemplateEditorHeader .mobile-nav {
    display: none;
}

@media (max-width: 840px) {
    #C3TemplateEditor #C3TemplateEditorHeader .column:last-of-type {
        flex: 0 1 100px;
    }

    #C3TemplateEditorHeader .mobile-nav {
        display: block;
        position: absolute;
        right: 20px;
        top: 9px;
    }

        #C3TemplateEditorHeader .mobile-nav.open i:before {
            content: "\e903";
        }

    #C3TemplateEditorHeader ul {
        margin: 0;
        position: absolute;
        background: #313949;
        padding: 2px 0 0;
        width: 240px;
        z-index: 102;
        right: 20px;
        top: 34px;
        opacity: 0;
        transition: 0.2s linear;
        clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
    }

        #C3TemplateEditorHeader ul.open {
            display: block;
            clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
            opacity: 1;
        }

        #C3TemplateEditorHeader ul li {
            display: block;
            margin-bottom: 2px;
        }

    #C3TemplateEditorHeader .button {
        border-radius: 0;
    }

        #C3TemplateEditorHeader .button:hover {
            border-color: transparent;
        }
}

/* ------------------------------------------------ C3 TEMPLATE EDITOR COMPONENT MENU
*/
#C3TemplateEditor #C3TemplateEditorComponentMenu {
    background: #fff;
    padding: 0;
    position: relative;
    box-sizing: border-box;
    flex: 0 0 210px;
    text-align: left;
    z-index: 101;
}

    #C3TemplateEditor #C3TemplateEditorComponentMenu h4 {
        font-size: 20px;
        color: #0479d8;
        font-family: "lato-light";
        display: inline-block;
        line-height: 30px;
        vertical-align: middle;
        margin: 0;
        padding: 0;
    }

    #C3TemplateEditor #C3TemplateEditorComponentMenu ul {
        padding: 20px;
        margin: 0;
        list-style: none;
        font-size: 0;
        position: absolute;
        z-index: 1;
        left: -999px;
        opacity: 0;
        transition: 0.1s ease-in opacity;
    }

        #C3TemplateEditor #C3TemplateEditorComponentMenu ul.active {
            z-index: 2;
            left: 0;
            opacity: 1;
        }

        #C3TemplateEditor #C3TemplateEditorComponentMenu ul li {
            display: inline-block;
            vertical-align: middle;
        }

            #C3TemplateEditor #C3TemplateEditorComponentMenu ul li.component-menu-title {
                display: block;
                width: 100%;
                padding-bottom: 20px;
            }

            #C3TemplateEditor #C3TemplateEditorComponentMenu ul li a {
                width: 80px;
                height: 80px;
                display: block;
                box-sizing: border-box;
                border: 1px solid #ddd;
                border-radius: 5px;
                padding: 15px 0 0;
                text-align: center;
                margin: 2px 2px 1px 1px;
                font-family: "lato-bold";
                text-transform: uppercase;
                font-size: 8px;
                text-decoration: none;
                transition: 0.1s linear;
                background: #f9f9f9;
                color: rgba(49, 57, 73, 0.8);
            }

                #C3TemplateEditor #C3TemplateEditorComponentMenu ul li a:hover {
                    background: #4da6ff;
                    color: #fff;
                }

                #C3TemplateEditor #C3TemplateEditorComponentMenu ul li a i {
                    display: block;
                    margin: 0 0 10px;
                    font-size: 24px;
                    line-height: 30px;
                    font-weight: 400;
                }

                #C3TemplateEditor #C3TemplateEditorComponentMenu ul li a:after {
                    content: "HINT: " attr(data-hint);
                    position: absolute;
                    bottom: -10px;
                    left: 20px;
                    font-size: 11px;
                    color: #666;
                    display: none;
                    text-align: left;
                    text-transform: uppercase;
                    width: auto;
                    border: 1px solid #ccc;
                    padding: 5px 18px 5px 18px;
                    box-sizing: border-box;
                    white-space: nowrap;
                    border-radius: 5px;
                    font-family: "lato-regular";
                    background: #fff;
                    z-index: 1;
                    text-indent: 0;
                }

                #C3TemplateEditor #C3TemplateEditorComponentMenu ul li a:before {
                    font-family: "waiverform-icons" !important;
                    content: "\e939";
                    font-size: 12px;
                    color: #4da6ff;
                    display: none;
                    position: absolute;
                    bottom: -5px;
                    left: 24px;
                    z-index: 2;
                    text-indent: 0;
                }

                #C3TemplateEditor #C3TemplateEditorComponentMenu ul li a:hover:before,
                #C3TemplateEditor #C3TemplateEditorComponentMenu ul li a:hover:after {
                    display: block;
                }

                #C3TemplateEditor #C3TemplateEditorComponentMenu ul li a.back {
                    display: inline-block;
                    vertical-align: middle;
                    height: 30px;
                    padding: 0;
                    width: 30px;
                    background: none;
                    border: 0;
                    text-indent: -9999px;
                    margin: 0 0 0 -10px;
                }

                    #C3TemplateEditor #C3TemplateEditorComponentMenu ul li a.back i {
                        text-indent: 0;
                        display: block;
                        position: absolute;
                        width: 30px;
                        color: #0479d8;
                    }

                    #C3TemplateEditor #C3TemplateEditorComponentMenu ul li a.back:hover {
                        color: rgba(49, 57, 73, 0.8);
                        background: none;
                        margin: 0 5px 0 -15px;
                    }

@media (max-width: 1080px) {
    #C3TemplateEditor #C3TemplateEditorComponentMenu {
        flex: 0 0 47px;
        padding: 0 10px;
        background: #fff;
        text-align: center;
        height: 47px;
    }

        #C3TemplateEditor #C3TemplateEditorComponentMenu ul {
            padding: 0 10px;
        }

            #C3TemplateEditor #C3TemplateEditorComponentMenu ul li.component-menu-title {
                padding-bottom: 0;
                display: inline-block;
                width: auto;
            }

            #C3TemplateEditor #C3TemplateEditorComponentMenu ul li a {
                width: 40px;
                height: 40px;
                font-size: 0;
                padding: 7px 0;
                background: #fff;
            }

                #C3TemplateEditor #C3TemplateEditorComponentMenu ul li a i {
                    margin: 0;
                    font-size: 24px;
                }

                #C3TemplateEditor #C3TemplateEditorComponentMenu ul li a:after {
                    bottom: -20px;
                }

                #C3TemplateEditor #C3TemplateEditorComponentMenu ul li a:before {
                    bottom: -15px;
                }

        #C3TemplateEditor #C3TemplateEditorComponentMenu h4 {
            margin-right: 10px;
            font-size: 18px;
        }

            #C3TemplateEditor #C3TemplateEditorComponentMenu h4:after {
                content: ":";
            }

        #C3TemplateEditor #C3TemplateEditorComponentMenu ul li a:after {
            bottom: -30px;
        }

        #C3TemplateEditor #C3TemplateEditorComponentMenu ul li a:before {
            bottom: -23px;
        }
}

@media (max-width: 520px) {
    #C3TemplateEditor #C3TemplateEditorComponentMenu ul li a {
        width: 24px;
    }

        #C3TemplateEditor #C3TemplateEditorComponentMenu ul li a i {
            font-size: 18px;
        }
}

/* ------------------------------------------------ C3 TEMPLATE EDITOR ROW
*/
#C3TemplateEditor .row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    box-sizing: border-box;
    height: calc(100% - 67px);
}

#C3TemplateEditor .stage-area {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

@media (max-width: 768px) {
    #C3TemplateEditor .row {
        height: calc(100% - 118px);
    }
}

@media (max-width: 1080px) {
    #C3TemplateEditor .row {
        flex-direction: column;
    }
}

@media (max-width: 400px) {
    #C3TemplateEditor .row {
        height: calc(100% - 237px);
    }
}

/* ------------------------------------------------ C3 TEMPLATE EDITOR DIALOG/ALERT POP-UP
*/
#C3TemplateEditorMergeFieldDialogWrapper,
#C3TemplateEditorDialogWrapper {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1050;
    justify-content: center;
    align-items: center;
    display: flex;
    opacity: 0;
    transition: 0.1s linear;
    pointer-events: none;
}

#C3TemplateEditorMergeFieldDialogWrapper {
    z-index: 1049;
}

    #C3TemplateEditorMergeFieldDialogWrapper.open,
    #C3TemplateEditorDialogWrapper.open {
        opacity: 1;
        pointer-events: auto;
    }

#C3TemplateEditorDialog {
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: #fff;
    background-clip: border-box;
    outline: 0;
    border-radius: 5px;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    padding: 20px;
    flex: 0 1 auto;
    text-align: center;
    margin: auto 20px;
}

    #C3TemplateEditorDialog div.dialog-content {
        display: block;
        padding: 0 0 30px;
    }

        #C3TemplateEditorDialog div.dialog-content * {
            display: inline-block;
            vertical-align: middle;
        }

        #C3TemplateEditorDialog div.dialog-content i {
            font-size: 32px;
            color: #4da6ff;
            margin: 20px 20px 0 0;
        }

    #C3TemplateEditorDialog span.message {
        padding-right: 20px;
        margin-top: 20px;
    }

    #C3TemplateEditorDialog .dialog-button {
        display: inline-block;
        padding: 5px;
        width: 120px;
        box-sizing: border-box;
        font-size: 14px;
        position: relative;
        color: #4da6ff;
        box-sizing: border-box;
        transition: 0.2s linear;
        text-decoration: none;
        border: 1px solid #4da6ff;
        border-radius: 5px;
        cursor: pointer;
        font-family: "lato-light";
        text-transform: uppercase;
    }

        #C3TemplateEditorDialog .dialog-button i {
            margin: 0 10px 0 -10px;
            position: relative;
            top: 0.2em;
        }

#C3TemplateEditorDialogCancel {
    margin-left: 10px;
}

#C3TemplateEditorDialog .dialog-button:hover {
    background: #42a2eb;
    color: #fff;
    border-color: rgba(66, 162, 235, 0.7);
}

/* ------------------------------------------------ C3 TEMPLATE EDITOR STAGE
*/
#C3TemplateEditor #C3TemplateEditorStage {
    background: #f0f0f0;
    padding: 0 0 20px;
    box-sizing: border-box;
    flex: 1 0 auto;
    position: relative;
    overflow-y: auto;
}

    /* ------------------------------------------------ C3 TEMPLATE EDITOR CANVAS (PAGE)
*/
    #C3TemplateEditor #C3TemplateEditorStage #C3TemplateEditorCanvas {
        /*width:						595px;
        width: 800px;*/
        width:960px; /* Width of the editor seems to work better when at 960px*/
        position: absolute;
        left: 20px;
        right: 20px;
        box-sizing: border-box;
        transform-origin: left top;
        margin: 10px auto;
    }

#C3TemplateEditorCanvas div.page {
    background-color: #fff;
    /*	width: 						595px;
	height: 					842px;
    width: 800px;*/
    width: 960px; /* Width of the editor seems to work better when at 960px*/
    min-height: 1130px;
    margin: 10px auto;
    padding: 0;
    box-shadow: 0 0 18px -9px rgba(0, 0, 0, 0.5);
    position: relative; /*static;*/
    box-sizing: border-box;
}

.note-statusbar {
    display: none !important;
}

.note-placeholder {
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 90%;
    text-transform: uppercase;
    top: 40px;
    font-size: 14px;
    font-family: "lato-regular";
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 4px;
}

    .note-placeholder:before {
        font-family: "waiverform-icons" !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: "\e935";
        position: absolute;
        left: 5px;
        font-size: 20px;
        line-height: 14px;
    }

.note-modal-title {
    text-transform: uppercase;
    font-weight: 300;
}

.note-modal {
    font-family: "lato-light";
}

.note-modal-footer .note-btn {
    background: #4da6ff;
    font-family: "lato-bold";
    text-transform: uppercase;
}

    .note-modal-footer .note-btn:hover {
        background: #333;
    }

#C3TemplateEditor .note-editor.note-frame .note-editing-area,
#C3TemplateEditor .note-editor.note-airframe .note-editing-area {
    overflow: visible;
}

.auto-page-break {
    width: 100%;
    position: absolute;
}

.auto-page-break,
.component.pagebreak {
    page-break-before: always;
    height: 20px;
    box-sizing: border-box;
    cursor: not-allowed;
}

    .auto-page-break:before,
    .component.pagebreak:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 20px;
        background: linear-gradient( to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 12% );
        z-index: 2;
        filter: blur(3px);
        clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    }

    .auto-page-break p,
    .component.pagebreak p {
        width: calc(100% + 20px);
        height: 20px;
        display: block;
        font-size: 8px;
        color: #777;
        font-family: "lato-bold";
        text-transform: uppercase;
        line-height: 20px;
        position: absolute;
        text-align: center;
        left: -10px;
        background: #f0f0f0;
    }

        .auto-page-break p:after,
        .auto-page-break p:before,
        .component.pagebreak p:after,
        .component.pagebreak p:before {
            content: "";
            display: block;
            position: absolute;
            left: 10px;
            width: 45%;
            height: 10px;
            top: 0;
            border-bottom: 1px dotted #999;
        }

        .auto-page-break p:after,
        .component.pagebreak p:after {
            left: auto;
            right: 10px;
        }

div.note-modal-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    max-height: 360px;
}
/* ------------------------------------------------ C3 TEMPLATE EDITOR CANVAS (PAGE) ELEMENT TOOLS
*/
#C3TemplateEditor #C3TemplateEditorComponentTools,
#C3TemplateEditor #C3TemplateEditorComponentLabel {
    position: absolute;
    z-index: 2;
    transform: translate3d(0, 0, 0);
    transform-origin: left top;
    /*left:						-9999px;
	top:						0;
	z-index:					99;
	margin: 					0;*/
    display: none;
}

#C3TemplateEditor #C3TemplateEditorComponentTools {
    margin-top: -30px;
}

#C3TemplateEditor #C3TemplateEditorStage ul.component-widgets {
    display: flex;
    flex-direction: row nowrap;
    align-content: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
}

    #C3TemplateEditor #C3TemplateEditorStage ul.component-widgets li {
        margin: 0;
    }

    #C3TemplateEditor #C3TemplateEditorStage ul.component-widgets li {
        border-right: 1px solid #7dbaee;
    }

        #C3TemplateEditor #C3TemplateEditorStage ul.component-widgets li:first-of-type {
            border: 0;
        }

    #C3TemplateEditor #C3TemplateEditorStage ul.component-widgets a {
        display: block;
        width: 30px;
        height: 30px;
        background: #4da6ff;
        color: #fff;
        text-decoration: none;
        text-align: center;
        font-size: 0;
        transition: 0.1s linear background;
    }

        #C3TemplateEditor #C3TemplateEditorStage ul.component-widgets a i {
            font-style: normal !important;
        }

    #C3TemplateEditor #C3TemplateEditorStage ul.component-widgets li a:hover,
    #C3TemplateEditor #C3TemplateEditorStage ul.component-widgets ul li a:active {
        background: #1b78cd;
        cursor: pointer;
    }

    #C3TemplateEditor
    #C3TemplateEditorStage
    ul.component-widgets
    li
    a#C3TemplateEditorComponentDelete:hover,
    #C3TemplateEditor
    #C3TemplateEditorStage
    ul.component-widgets
    li
    a#C3TemplateEditorComponentDelete:active {
        background: #990000;
    }

    #C3TemplateEditor #C3TemplateEditorStage ul.component-widgets li a i {
        font-size: 16px;
        margin: 0;
        line-height: 30px;
    }

    #C3TemplateEditor #C3TemplateEditorStage ul.component-widgets li a:after {
        content: attr(data-hint);
        position: absolute;
        bottom: -30px;
        font-size: 11px;
        color: #666;
        display: none;
        text-align: left;
        text-transform: uppercase;
        width: auto;
        border: 1px solid #ccc;
        padding: 5px;
        box-sizing: border-box;
        white-space: nowrap;
        border-radius: 5px;
        font-family: "lato-regular";
        background: #fff;
        z-index: 1;
        text-indent: 0;
    }

    #C3TemplateEditor #C3TemplateEditorStage ul.component-widgets li a:hover:after {
        display: block;
    }

#C3TemplateEditor #C3TemplateEditorComponentLabel {
    text-transform: uppercase;
    font-family: "lato-bold";
    font-size: 11px;
    line-height: 16px;
    padding: 0 5px;
    background: #4da6ff;
    color: #fff;
    text-align: center;
    z-index: 99;
    margin-top: -16px;
    height: 16px;
    box-sizing: border-box;
    transform-origin: left bottom;
}

/* ------------------------------------------------ C3 TEMPLATE EDITOR TOOLBAR
*/
#C3TemplateEditorToolbar {
    height: 42px;
    box-sizing: border-box;
    width: auto;
    line-height: 40px;
    text-align: center;
    position: sticky;
    top: 0;
    display: flex;
    flex-flow: nowrap row;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-bottom: 1px solid #ccc;
}
/*
#C3TemplateEditorToolbar .note-toolbar {
		padding: 0;
		color: #333;
		background-color: transparent;
		border: none;

	//.note-modal-content { top: set to selected component top
}*/
#C3TemplateEditorStage .note-modal-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}

#C3TemplateEditorStage .note-toolbar {
    position: sticky;
    top: 0;
    margin: -62px 0 0;
    width: 100%;
    height: 41px;
    left: 0;
    transform: translate3d(0, 0, 0);
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    background: #f5f5f5;
    border-bottom: 1px solid #ccc;
    z-index: 100;
}

    #C3TemplateEditorStage .note-toolbar .note-btn-group {
        flex: 0 0 auto;
    }

.note-editable {
    margin: 20px 0 0;
    padding: 0 !important;
}
/*.note-editor.note-frame .note-editing-area .note-editable * { line-height: 1em; }*/
.note-editor.note-frame .note-editing-area .note-editable p {
    margin: 0 0 0.8em;
}

    .note-editor.note-frame .note-editing-area .note-editable p:last-of-type {
        margin: 0;
    }

div.component :last-child {
    margin-bottom: 0;
}

.note-editor.note-frame .note-editing-area .note-editable b {
    font-weight: bold !important;
}

.note-editor.note-frame .note-editing-area .note-editable i {
    font-style: italic !important;
}

.note-editor.note-frame .note-editing-area .note-editable img {
    max-width: 100%;
}

.note-editor.note-frame .note-editing-area .note-editable h1,
.note-editor.note-frame .note-editing-area .note-editable h2,
.note-editor.note-frame .note-editing-area .note-editable h3,
.note-editor.note-frame .note-editing-area .note-editable h4,
.note-editor.note-frame .note-editing-area .note-editable h5,
.note-editor.note-frame .note-editing-area .note-editable h6 {
    margin: 0;
    padding: 0;
}

.note-editor.note-frame .note-editing-area .note-editable ul {
    list-style: disc;
}

.note-editor.note-frame .note-editing-area .note-editable ol,
.note-editor.note-frame .note-editing-area .note-editable ul {
    margin: 1em 0 0.5em 1em;
    padding: 0;
}

    .note-editor.note-frame .note-editing-area .note-editable ol li,
    .note-editor.note-frame .note-editing-area .note-editable ul li {
        padding: 0;
        margin: 0 0 0.5em 0.5em;
    }

.note-editor.note-frame .note-editing-area .note-editable table img {
    position: relative;
}

#C3TemplateEditor .note-btn,
#C3TemplateEditor .note-dropdown-menu {
    font-family: "lato-regular";
}
    /*#C3TemplateEditor .note-btn:before,*/
    #C3TemplateEditor .note-dropdown-menu:before {
        font-size: 28px;
        position: absolute;
        top: -3px;
        right: 0;
        left: 0;
        margin: 0;
        text-align: center;
    }
/*#C3TemplateEditor .note-btn.icon-merge-field:before {
	font-size:24px;
	top:0;
}*/
#C3TemplateEditor .note-btn {
    text-decoration: none;
    height: 28px;
    overflow: hidden;
    padding: 0 8px;
    transition: 0.1s linear;
    z-index: 1;
    position: relative;
}

    #C3TemplateEditor .note-btn i::before,
    #C3TemplateEditor .note-btn::before {
        font-size: 15px !important;
    }

    #C3TemplateEditor .note-btn:hover {
        color: #4da6ff;
        border-color: #4da6ff;
        background: #fff;
        z-index: 2;
    }

.dropdown-caseConverter li {
    list-style: none;
    margin: 0;
}

.note-dropdown-menu.image-alignment {
    min-width: 94px !important;
}

.note-dropdown-item.tick:before {
    content: "\e902";
    font-family: "waiverform-icons";
    position: absolute;
    left: 5px;
    margin-top: 4px;
}

.note-dropdown-menu li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.note-dropdown-menu.column-gutter li a,
.note-dropdown-menu.column-widths li a,
.note-dropdown-menu.image-size li a {
    padding-left: 20px;
}

#C3TemplateEditor .note-dropdown-menu.dropdown-merge-fields {
    overflow-y: auto;
    left: -176px !important;
    width: 200px;
    font-size: 12px !important;
}

#C3TemplateEditor #addCustomMergeField {
    text-decoration: none;
    color: #333;
    padding: 5px 0;
    margin: 0 0 10px;
    transition: 0.1s linear;
    display: block;
    text-transform: uppercase;
}

    #C3TemplateEditor #addCustomMergeField i {
        visibility: visible;
        color: #333;
        margin-right: 5px;
    }

    #C3TemplateEditor #addCustomMergeField:hover i,
    #C3TemplateEditor #addCustomMergeField:hover {
        color: #fff;
        background: #4da6ff;
    }
/*
#C3TemplateEditor #addCustomMergeField::after {
	content: '';
	display:block;
	border-bottom: 1px dotted #999;
	height:5px;
	width:100%;
}*/

#C3TemplateEditor .note-para .note-dropdown-menu {
    min-width: 208px;
}

#C3TemplateEditor .note-dropdown-item:hover {
    background-color: #4da6ff;
    color: #fff;
}

#C3TemplateEditor .note-columns .note-btn i::before,
#C3TemplateEditor .note-imgfile .note-btn i::before,
#C3TemplateEditor .note-imgformat .note-btn i::before {
    font-size: 14px !important;
    position: relative;
    top: 0.1em;
}

/* customise summernote buttons */
#C3TemplateEditor .note-icon-link::before {
    content: "\e95f";
}

#C3TemplateEditor .note-icon-bold::before {
    content: "\e93d";
}

#C3TemplateEditor .note-icon-italic::before {
    content: "\e93e";
}

#C3TemplateEditor .note-icon-underline::before {
    content: "\e942";
}

#C3TemplateEditor .note-icon-strikethrough::before {
    content: "\e93f";
}

#C3TemplateEditor .note-icon-superscript::before {
    content: "\e941";
}

#C3TemplateEditor .note-icon-subscript::before {
    content: "\e940";
}

#C3TemplateEditor .note-icon-eraser::before {
    content: "\e93c";
}

#C3TemplateEditor .note-icon-picture::before {
    content: "\e91f";
}

#C3TemplateEditor .note-icon-align-left::before {
    content: "\e945";
}

#C3TemplateEditor .note-icon-align-right::before {
    content: "\e946";
}

#C3TemplateEditor .note-icon-align-center::before {
    content: "\e943";
}

#C3TemplateEditor .note-icon-align-justify::before {
    content: "\e944";
}

#C3TemplateEditor .note-icon-align-outdent::before {
    content: "\e95c";
}

#C3TemplateEditor .note-icon-align-indent::before {
    content: "\e95b";
}

#C3TemplateEditor .note-icon-unorderedlist::before {
    content: "\e95d";
}

#C3TemplateEditor .note-icon-orderedlist::before {
    content: "\e95e";
}

#C3TemplateEditor .note-icon-float-left::before {
    content: "\e962";
}

#C3TemplateEditor .note-icon-float-right::before {
    content: "\e961";
}

#C3TemplateEditor .note-icon-rollback::before {
    content: "\e960";
}

#C3TemplateEditor .note-icon-text-height::before {
    content: "\e963";
}

#C3TemplateEditor .note-icon-trash::before {
    content: "\e907";
}

#C3TemplateEditor .note-icon-float-left::before,
#C3TemplateEditor .note-icon-float-right::before,
#C3TemplateEditor .note-icon-rollback::before,
#C3TemplateEditor .note-icon-text-height::before,
#C3TemplateEditor .note-icon-trash::before,
#C3TemplateEditor .note-icon-link::before,
#C3TemplateEditor .note-icon-unorderedlist::before,
#C3TemplateEditor .note-icon-orderedlist::before,
#C3TemplateEditor .note-icon-align-indent::before,
#C3TemplateEditor .note-icon-align-outdent::before,
#C3TemplateEditor .note-icon-align-justify::before,
#C3TemplateEditor .note-icon-align-center::before,
#C3TemplateEditor .note-icon-align-right::before,
#C3TemplateEditor .note-icon-align-left::before,
#C3TemplateEditor .note-icon-bold::before,
#C3TemplateEditor .note-icon-italic::before,
#C3TemplateEditor .note-icon-underline::before,
#C3TemplateEditor .note-icon-strikethrough::before,
#C3TemplateEditor .note-icon-superscript::before,
#C3TemplateEditor .note-icon-subscript::before,
#C3TemplateEditor .note-icon-eraser::before,
#C3TemplateEditor .note-icon-picture::before {
    font-family: "waiverform-icons";
}

/* ------------------------------------------------ C3 TEMPLATE EDITOR CANVAS SCALE MARKER
*/
#C3TemplateEditor #C3TemplateEditorCanvasScale {
    position: sticky;
    right: 0px;
    top: 100%;
    height: 24px;
    line-height: 24px;
    box-sizing: border-box;
    padding: 0 5px;
    background: #fff;
    font-size: 11px;
    z-index: 10;
    box-shadow: 0 10px 5px -6px rgba(0, 0, 0, 0.2);
    border: 1px solid #ddd;
    width: 80px;
    opacity: 0.8;
    text-transform: uppercase;
    float: right;
}

/* ------------------------------------------------ C3 TEMPLATE EDITOR CANVAS PAGE SELECT
*/
#C3TemplateEditorCanvasPageSelect {
    flex: 0 0 60px;
    position: relative;
    border-top: 1px solid #ddd;
    background: #fff;
    text-align: center;
    box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.12);
    overflow-x: scroll;
    justify-content: center;
}

    #C3TemplateEditorCanvasPageSelect ul {
        display: flex;
        flex-flow: row nowrap;
        margin: 0;
        padding: 0 10px;
        transition: 0.2s linear;
        position: relative;
        justify-content: flex-start;
        height: 50px;
        max-width: 0;
    }

        #C3TemplateEditorCanvasPageSelect ul li {
            width: 32px;
            display: inline-block;
            margin: 0;
            flex: 1 0 auto;
        }

            #C3TemplateEditorCanvasPageSelect ul li a {
                display: block;
                text-align: center;
                position: relative;
                text-decoration: none;
                transition: 0.2s linear;
                color: #999;
                width: 100%;
                height: 100%;
            }

            #C3TemplateEditorCanvasPageSelect ul li.current a:hover,
            #C3TemplateEditorCanvasPageSelect ul li.current a {
                color: #000;
            }

            #C3TemplateEditorCanvasPageSelect ul li a i {
                position: absolute;
                font-size: 32px;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                line-height: 50px;
            }

            #C3TemplateEditorCanvasPageSelect ul li a span {
                position: absolute;
                font-size: 11px;
                letter-spacing: -1px;
                font-family: "lato-bold";
                line-height: 50px;
                top: 0;
                left: -2px;
                right: 0;
                bottom: 0;
            }

            #C3TemplateEditorCanvasPageSelect ul li a:hover {
                color: #0479d8;
            }

/* ------------------------------------------------ C3 TEMPLATE EDITOR CANVAS (PAGE) COMPONENTS GENERAL
*/
#C3TemplateEditorCanvas .component {
    position: static;
    box-sizing: border-box;
    width: 100%;
    border: 1px dotted #fafafa;
    padding: 0; /*10px;*/
    transition: 0.1s linear border;
    overflow: hidden;
}

    #C3TemplateEditorCanvas .component.fixed {
        height: 100%;
    }

    #C3TemplateEditorCanvas .component:hover {
        border-color: #1b78cd;
        cursor: pointer;
    }

    #C3TemplateEditorCanvas .component.selected {
        border: 1px solid #4da6ff;
        margin-bottom: 30px; /* make space for the widgets */
    }

    #C3TemplateEditorCanvas .component.fixed.selected {
        margin-bottom: 0; /* no widgets on fixed components */
    }

    #C3TemplateEditorCanvas .component.selected.delete {
        border: 1px solid #990000;
    }

#C3TemplateEditorCanvas .page {
    color: #000;
}
/* ------------------------------------------------ C3 TEMPLATE EDITOR COMPONENTS: PLACEHOLDER TEXT
*/

.component.image .image-caption:before,
.component.heading:before,
.component.text:before {
    content: "Click to add your text...";
    color: #999;
    font-size: 10px;
    text-transform: uppercase;
    font-family: "lato-regular";
    display: block;
    position: absolute;
    pointer-events: none;
    padding: 0 0 0 5px;
    opacity: 0;
    transition: 0.2s linear opacity;
}

.component.heading:before {
    font-size: 14px;
    content: "Type your H" attr(data-hsize) " heading here...";
}

.component.image .image-caption:before {
    content: "Enter an optional caption for your image...";
    font-style: normal;
    text-align: center;
    width: 100%;
}

.component.image .image-caption.empty:before,
.component.heading.empty:before,
.component.text.empty:before {
    opacity: 1;
}

.component.columns .image-caption:before,
.component.columns .component.heading:before,
.component.columns .component.text:before {
}

.component.columns[data-columns="2"] .component.image .image-caption:before {
    width: 48%;
}

.component.columns[data-columns="3"] .component.image .image-caption:before {
    width: 31%;
}

.component.columns[data-columns="4"] .component.image .image-caption:before {
    width: 23%;
}

/* ------------------------------------------------ C3 TEMPLATE EDITOR COMPONENTS: IMAGES & QUESTIONNAIRE PLACEHOLDERS
*/
.component.questionnaire .questionnaire-placeholder,
.component.image .image-placeholder {
    width: 100%;
    height: 240px;
    background: #ddd !important;
    position: relative;
    display: block;
    transition: 0.2s linear;
    margin: 0 auto;
    min-width: 120px;
}

    .component.questionnaire .questionnaire-placeholder:hover,
    .component.image .image-placeholder:hover {
        background: #bbb !important;
    }

    .component.questionnaire .questionnaire-placeholder i,
    .component.image .image-placeholder i {
        margin: auto;
        color: #fff;
        font-size: 96px;
        height: 40%;
        width: 100%;
        text-align: center;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        position: absolute;
    }

.note-editor.note-frame
.note-editing-area
.note-editable
.component.questionnaire
.questionnaire-placeholder
i,
.note-editor.note-frame
.note-editing-area
.note-editable
.component.image
.image-placeholder
i {
    font-style: normal !important;
}

.component.questionnaire .questionnaire-placeholder span,
.component.image .image-placeholder span {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    margin: auto;
    color: #fff;
    font-family: "lato-bold";
    text-transform: uppercase;
    display: block;
    text-align: center;
    font-size: 16px;
}

.component.image .image-caption {
    margin: 10px 0;
    font-style: italic;
    color: #999;
    width: 100%;
    padding: 10px 0;
    border: 1px dotted #ccc;
}

    .component.image .image-caption.focus {
        border: 1px solid #4da6ff;
    }

.component.image img {
    max-width: 100%;
}

/* ------------------------------------------------ C3 TEMPLATE EDITOR COMPONENTS: QUESTIONNAIRE
*/

.component.questionnaire .questionnaire-placeholder i {
    font-size: 48px;
}

/* ------------------------------------------------ C3 TEMPLATE EDITOR COMPONENTS: COLUMN LAYOUTS
*/
#C3TemplateEditorCanvas .component.columns {
    /*position:					relative;*/
    display: flex;
    align-items: stretch;
    flex-flow: row nowrap;
    overflow: visible;
}

    #C3TemplateEditorCanvas .component.columns .column {
        flex: 1;
        border: 1px dotted #ddd;
        margin-right: 10px;
        margin-top: 5px;
        margin-bottom: 5px;
    }

        #C3TemplateEditorCanvas .component.columns .column:last-of-type {
            margin-right: 0;
        }
/* ------------------------------------------------ C3 TEMPLATE EDITOR COMPONENTS: TABLE
*/
#C3TemplateEditorCanvas .component.table table {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #aaa;
}

#C3TemplateEditorCanvas .component.table th {
    color: #000;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    background: #eee;
}

#C3TemplateEditorCanvas .component.table td {
    padding: 10px;
    border-bottom: 1px solid #f2f2f2;
    color: #333;
}

#C3TemplateEditorCanvas .component.table tr:last-of-type td {
    border-bottom: 0;
}

#C3TemplateEditorCanvas .component.table tr:nth-of-type(even) td {
    background: #fbfbfb;
}
/* ------------------------------------------------ C3 TEMPLATE EDITOR COMPONENTS: HEADER
*/
#C3TemplateEditorCanvas .component.header {
    background-image: linear-gradient( 45deg, #f0f0f0 8.33%, #fff 8.33%, #fff 50%, #f0f0f0 50%, #f0f0f0 58.33%, #fff 58.33%, #fff 100% );
    background-size: 8px 8px;
    min-height: 80px;
    text-align: center;
}
/* ------------------------------------------------ C3 TEMPLATE EDITOR COMPONENTS: FOOTER
*/
#C3TemplateEditorCanvas .component.footer {
    position: absolute;
    width: calc(100% - 20px);
    min-height: 60px;
    background-image: linear-gradient( 45deg, #f0f0f0 8.33%, #fff 8.33%, #fff 50%, #f0f0f0 50%, #f0f0f0 58.33%, #fff 58.33%, #fff 100% );
    background-size: 8px 8px;
    text-align: center;
}

/* ------------------------------------------------ C3 TEMPLATE EDITOR COMPONENT: CUSTOM MERGEFIELD TAG
*/
#C3TemplateEditorCanvas mergefield {
    color: #313949;
    background: #cdd5e1;
    padding: 0.05em 0.25em 0.1em;
    margin: 0 3px;
    border-radius: 3px;
    transition: 0.2s linear;
    position: relative;
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 0;
    font-size: 0.8em;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    font-weight: bold;
    font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
    font-size: 0.875em;
    line-height: 1.25em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    #C3TemplateEditorCanvas mergefield:hover {
        background: #727d8f;
        color: #fff;
        cursor: pointer;
    }

    #C3TemplateEditorCanvas mergefield:focus {
        background: #347cc0;
        color: #fff;
        cursor: pointer;
    }

    #C3TemplateEditorCanvas mergefield:hover::after {
        content: "Double click to edit merge field properties";
        position: absolute;
        z-index: 999;
        left: calc(100% + 5px);
        top: 0;
        font-size: 9px;
        color: #666;
        text-align: left;
        text-transform: uppercase;
        width: auto;
        border: 1px solid #ccc;
        padding: 5px;
        box-sizing: border-box;
        white-space: nowrap;
        border-radius: 5px;
        font-family: "lato-regular";
        background: #fff;
        letter-spacing: 0;
    }

#C3TemplateEditorCanvas .macro-text {
    position: relative;
}

/* ------------------------------------------------ C3 TEMPLATE EDITOR MERGE FIELD PROPERTIES DIALOG
*/
#C3TemplateEditorMergeFieldDialogWrapper {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: -1;
    justify-content: center;
    align-items: center;
    display: flex;
    opacity: 0;
    transition: 0.1s linear;
    pointer-events: none;
}

    #C3TemplateEditorMergeFieldDialogWrapper.open {
        opacity: 1;
        pointer-events: auto;
        z-index: 1049;
    }

#C3TemplateEditorMergeFieldDialog {
    width: 500px;
    max-width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: #fff;
    box-sizing: border-box;
    border-radius: 5px;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    padding: 20px;
    flex: 0 1 auto;
    text-align: center;
    margin: auto 20px;
    position: relative;
}

    #C3TemplateEditorMergeFieldDialog h4 {
        font-size: 20px;
        color: #0479d8;
        font-family: "lato-light";
        margin: 0 0 30px;
        padding: 0;
        text-align: left;
    }

        #C3TemplateEditorMergeFieldDialog h4 i {
            font-size: 30px;
            display: inline-block;
            vertical-align: middle;
            margin: -5px 5px 0 0;
        }
/* ------------------------------------------------ MERGE FIELD PROPERTIES DIALOG SAVE BUTTON
*/
#MergeFieldSaveProperties {
    background: #fff;
    color: #0479d8;
    padding: 5px 10px;
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    font-size: 14px;
    transition: 0.2s linear;
    text-decoration: none;
    border: 1px solid #4da6ff;
    border-radius: 5px;
    cursor: pointer;
    font-family: "lato-light";
    text-transform: uppercase;
}

    #MergeFieldSaveProperties i {
        margin: 0 10px 0 -10px;
        position: relative;
    }

    #MergeFieldSaveProperties:hover {
        background: #42a2eb;
        color: #fff;
        border-color: rgba(66, 162, 235, 0.7);
    }
/* ------------------------------------------------ MERGE FIELD PROPERTIES DIALOG CANCEL BUTTON
*/
#MergeFieldDialogCancel {
    position: absolute;
    right: 15px;
    top: 15px;
    text-decoration: none;
    transition: 0.2s linear;
    color: #333;
    font-size: 20px;
}

    #MergeFieldDialogCancel:hover {
        color: #4da6ff;
    }
/* ------------------------------------------------ MERGE FIELD PROPERTIES DIALOG TABS
*/
#C3TemplateEditorMergeFieldDialog #MergeFieldDialogTabs {
    width: 100%;
    height: 40px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-end;
    z-index: 2;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

    #C3TemplateEditorMergeFieldDialog #MergeFieldDialogTabs a {
        flex: 0 1 auto;
        height: 100%;
        display: block;
        padding: 10px 15px;
        text-decoration: none;
        border: 1px solid #ddd;
        border-radius: 5px 5px 0 0;
        box-sizing: border-box;
        transition: 0.1s linear;
        color: #999;
        font-weight: 700;
        background: #fff;
        z-index: 1;
        height: 35px;
    }

        #C3TemplateEditorMergeFieldDialog #MergeFieldDialogTabs a.active {
            border-bottom: 1px solid #fff;
            margin-top: 0;
            box-shadow: 0 10px 16px -5px rgb(0, 0, 0, 1);
            color: #222;
            z-index: 2;
            height: 40px;
        }

        #C3TemplateEditorMergeFieldDialog #MergeFieldDialogTabs a:hover {
            color: #0479d8;
        }
/* ------------------------------------------------ MERGE FIELD PROPERTIES DIALOG TABBED AREA
*/
#C3TemplateEditorMergeFieldDialog .tabbed-area-wrapper {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 0 5px 5px 5px;
    min-height: 290px;
    width: 100%;
    display: flex;
    align-items: stretch;
    margin: -1px 0 10px;
}

#C3TemplateEditorMergeFieldDialog .tabbed-area {
    opacity: 0;
    padding: 20px;
    z-index: 1;
    transition: 0.2s linear;
    pointer-events: none;
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    text-align: left;
    box-sizing: border-box;
}

    #C3TemplateEditorMergeFieldDialog .tabbed-area.active {
        display: block;
        opacity: 1;
        pointer-events: auto;
        position: relative;
    }

    #C3TemplateEditorMergeFieldDialog .tabbed-area fieldset {
        height: calc(100% - 20px);
    }
/* ------------------------------------------------ MERGE FIELD PROPERTIES DIALOG FORM ELEMENTS (GLOBAL)
*/
#C3TemplateEditorMergeFieldDialog input,
#C3TemplateEditorMergeFieldDialog select {
    width: 100%;
    border: 1px solid #999;
    padding: 5px;
    box-sizing: border-box;
    font-family: "lato-regular";
    height: 32px;
    transition: 0.1s linear;
}

    #C3TemplateEditorMergeFieldDialog input:focus,
    #C3TemplateEditorMergeFieldDialog select:focus {
        border-color: #0479d8;
    }

#C3TemplateEditorMergeFieldDialog label {
    display: block;
    width: 100%;
    text-transform: uppercase;
    margin: 0 0 2px;
    font-size: 12px;
}

#C3TemplateEditorMergeFieldDialog legend {
    display: none;
}

#C3TemplateEditorMergeFieldDialog .mergefield-hint {
    font-style: italic;
    color: #666;
    text-transform: none;
    margin-left: 1em;
}

#C3TemplateEditorMergeFieldDialog .mergefield-error {
    font-style: italic;
    color: #c00;
    text-transform: none;
    font-size: 0.875em;
    margin-left: 1em;
    margin-top: 0;
}

    #C3TemplateEditorMergeFieldDialog .mergefield-error[aria-hidden="true"] {
        display: none;
    }

#C3TemplateEditorMergeFieldDialog .field {
    margin: 0 0 10px;
    position: relative;
}

#C3TemplateEditorMergeFieldDialog fieldset {
    display: block;
    box-sizing: border-box;
    padding: 0;
    width: 100%;
    display: block;
    border: 0;
}
/* ------------------------------------------------ MERGE FIELD PROPERTIES DIALOG FORM CUSTOM CHECKBOX
*/
#C3TemplateEditorMergeFieldDialog input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid #777;
    border-radius: 3px;
    transition: 0.1s linear;
    display: inline-block;
    outline: none;
    vertical-align: middle;
}

    #C3TemplateEditorMergeFieldDialog input[type="checkbox"]:checked {
        background: #0479d8;
    }

        #C3TemplateEditorMergeFieldDialog
        input[type="checkbox"]:checked + label:before {
            content: "\e904";
            font-family: "waiverform-icons";
            color: #fff;
            position: absolute;
            left: -24px;
            font-size: 14px;
            line-height: 19px;
        }

#C3TemplateEditorMergeFieldDialog .field.date-tickbox label {
    width: auto;
    display: inline-block !important;
    position: relative;
    transition: 0.1s linear;
}

#C3TemplateEditorMergeFieldDialog input[type="checkbox"]:hover + label {
    color: #0479d8;
}

#C3TemplateEditorMergeFieldDialog .field.date-tickbox input[type="checkbox"],
#C3TemplateEditorMergeFieldDialog .field.date-tickbox label {
    vertical-align: middle;
    cursor: pointer;
}

/* ------------------------------------------------ MERGE FIELD PROPERTIES DIALOG FORM CUSTOM RADIO
*/
#C3TemplateEditorMergeFieldDialog input[type="radio"] {
    
    width: 20px;
    height: 20px;
    border: 1px solid #777;
    border-radius: 3px;
    transition: 0.1s linear;
    display: inline-block;
    outline: none;
    vertical-align: middle;
}

    #C3TemplateEditorMergeFieldDialog input[type="radio"]:checked {
        background: #0479d8;
    }

#C3TemplateEditorMergeFieldDialog .field.tickbox {
    display: flex;
    flex-flow: row nowrap;
    gap: 5px;
    align-items: center;	
}
    

#C3TemplateEditorMergeFieldDialog .field.tickbox label {
    width: auto;
    display: inline-block;
    position: relative;
    transition: 0.1s linear;
    margin: 0;
}

#C3TemplateEditorMergeFieldDialog input[type="radio"]:hover + label {
    color: #0479d8;
}

#C3TemplateEditorMergeFieldDialog .field.tickbox input[type="radio"],
#C3TemplateEditorMergeFieldDialog .field.tickbox label {
    vertical-align: middle;
    cursor: pointer;
    margin-right:5px;
}

/* ------------------------------------------------ MERGE FIELD PROPERTIES DIALOG VALIDATION AREA
*/
#C3TemplateEditorMergeFieldDialog .field.min-max {
    display: flex;
    flex-flow: row nowrap;
    align-content: stretch;
    align-items: center;
    margin: 15px 0;
}

    #C3TemplateEditorMergeFieldDialog .field.min-max label,
    #C3TemplateEditorMergeFieldDialog .field.min-max input {
        flex: 0 1 auto;
    }

    #C3TemplateEditorMergeFieldDialog .field.min-max input {
        margin-left: 5px;
    }

    #C3TemplateEditorMergeFieldDialog .field.min-max label {
        min-width: 110px;
    }

/* ------------------------------------------------ MERGE FIELD PROPERTIES DIALOG OPTIONS AREA
*/
#C3TemplateEditorMergeFieldDialog .dataTypeOptions {
	display: none;
	padding: 20px 0 0;
}
#C3TemplateEditorMergeFieldDialog #MergeFieldDialogAreaOptions #dataTypeOptionsDate label,
#C3TemplateEditorMergeFieldDialog #MergeFieldDialogAreaOptions #dataTypeOptionsString label,
#C3TemplateEditorMergeFieldDialog .dataTypeOptions.active {
	display: block;
}
#C3TemplateEditorMergeFieldDialog #MergeFieldDialogAreaOptions #dataTypeOptionsString select {
	margin: 10px 0 0 0;
}


#C3TemplateEditorMergeFieldDialog #MergeFieldDialogAreaOptions label {
    display: none;
}

#C3TemplateEditorMergeFieldDialog .mergeFieldOptionsFieldset {
    max-height: 350px;
    overflow: auto;
    padding-right: 10px;
}

#C3TemplateEditorMergeFieldDialog .field.option {
    display: flex;
    flex-flow: row nowrap;
    flex: 0 1 auto;
}

    #C3TemplateEditorMergeFieldDialog .field.option * {
        flex: 0 1 auto;
    }

    #C3TemplateEditorMergeFieldDialog .field.option input {
        width: calc(100% - 110px);
    }

    #C3TemplateEditorMergeFieldDialog .field.option a {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: 0 0 0 5px;
        border: 1px solid #ddd;
        width: 32px;
        height: 32px;
        box-sizing: border-box;
        border-radius: 5px;
        text-decoration: none;
        background: #f9f9f9;
        color: rgba(49, 57, 73, 0.8);
    }

        #C3TemplateEditorMergeFieldDialog .field.option a:hover {
            background: #4da6ff;
            color: #fff;
        }

        #C3TemplateEditorMergeFieldDialog .field.option a i {
            flex: 1;
        }

        #C3TemplateEditorMergeFieldDialog .field.option a.hide {
            display: none;
        }

#C3TemplateEditorMergeFieldDialog #MergeFieldDialogAreaOptions fieldset {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
}

#C3TemplateEditorMergeFieldDialog #MergeFieldDialogAddOption {
    margin: auto auto 0;
    width: 40%;
    min-width: 160px;
    border: 1px solid #ddd;
    height: 32px;
    box-sizing: border-box;
    border-radius: 5px;
    text-decoration: none;
    background: #f9f9f9;
    color: rgba(49, 57, 73, 0.8);
    align-items: center;
    justify-content: center;
    display: flex;
    text-transform: uppercase;
    transition: 0.1s linear;
    flex: 0 0 auto;
}

    #C3TemplateEditorMergeFieldDialog #MergeFieldDialogAddOption i {
        margin-right: 5px;
    }

    #C3TemplateEditorMergeFieldDialog #MergeFieldDialogAddOption:hover {
        background: #4da6ff;
        color: #fff;
    }
.hidden {
    display: none;
    text-indent: none;
}

li.nolist {
    list-style: none;
}

li code {
    background-color: lightgray;
    border-radius: .25rem;
    color: black;
    font-size: .875em;
    font-weight: 500;
    padding: .15rem .3rem;
    line-height: 25px;
    ;
}