/*
	Copyright (C) 1999-2022 Empresa Limited - All Rights Reserved
	This resource is subject to the terms of the e-StudentTracker Full Code Access license.				
	A copy of this license can be found at:
		http://www.e-studenttracker.co.uk/Licenses/Full-Code-Access/
		licensing@e-studenttracker.co.uk
*/

.formEditor { clear: both; overflow: hidden; width: 100%; position: relative; }
    .formEditor .dragging { position: absolute; z-index: 100001; left: -9999px; top: -9999px; }

    .formEditor .editorToolbox { float: right; padding: 10px; box-sizing: border-box; box-shadow: 4px -6px 4px 4px rgba(0,0,0,0.6); }
        .formEditor .editorToolbox h3 { display: block; font-size: 13px; margin: 0 0 4px 0; text-align: center; padding: 5px 0 0 0; }
        .formEditor .editorToolbox img { display: block; }
        .formEditor .editorToolbox .drag { border: 1px dashed #cbcbcb; background-color: #eee; margin-bottom: 5px; padding: 5px 10px 5px 10px; overflow: hidden; clear: both; cursor: move; position: relative; height: auto; }
        
    
    .formEditor .editorToolbox .element { width: 100%; display: none; }

    .formEditor a.addFieldGroup {
        margin-left: 5px;
    }

    .drag .textbox,
    .drag .textarea,
    .drag .dropdown,
    .drag .date,
    .drag .time,
    .editorCanvas .textbox,
    .editorCanvas .dropdown,
    .editorCanvas .date,
    .editorCanvas .time,
    .editorCanvas .textarea { background: #fff; border: 1px solid #cbcbcb; }

    .drag .dropdown,
    .editorCanvas .dropdown { background: #fff url(../images/icons/dropdown-arrow.png) no-repeat right center; }

    .editorCanvas .textbox,
    .drag .textbox,
    .editorCanvas .dropdown,
    .drag .dropdown,
    .editorCanvas .date,
    .editorCanvas .time,
    .drag .date,
    .drag .time { height: 28px; }

    .editorCanvas .textarea,
    .drag .textarea { height: 100px; }

    .drag .textbox,
    .drag .textarea,
    .drag .dropdown,
    .drag p { width: 450px; }

    .drag .date, .drag .time { width: 100px; }
    .drag h3, .drag .dragImg { display: none; }    
    .drag .element span { display: none; }

    .formEditor .editorCanvas { position: relative; background: #f7eed2; float: left; box-sizing: border-box; padding: 10px; border: 1px solid #ede0b9; overflow-y: auto; }        
        .formEditor .editorCanvas.hideScroll { overflow: hidden !important; }
        .formEditor .editorCanvas .element input,
            .formEditor .editorCanvas .element select,
            .formEditor .editorCanvas .element textarea,
            .formEditor .editorCanvas .element p { float: none; }
            .formEditor .editorCanvas .element p { max-width: 600px; }
            .formEditor .editorCanvas .element img { margin: 0 auto 10px auto; display: block; max-width: 100%; }

        .formEditor .editorCanvas .element,
            .formEditor .editorCanvas .element input,
            .formEditor .editorCanvas .element select,
            .formEditor .editorCanvas .element textarea,
            .formEditor .editorCanvas .element p { position: relative; }

        .formEditor .editorCanvas .element.textarea,
        .formEditor .editorCanvas .element.textbox,
        .formEditor .editorCanvas .element.date,
        .formEditor .editorCanvas .element.time,
        .formEditor .editorCanvas .element.dropdown { color: #808080; x-font-family: Arial, sans-serif; padding: 7px 0 0 8px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

        .formEditor .editorCanvas .element { width: 95%; margin: 0 auto; }
        .formEditor .editorCanvas .element.date,
        .formEditor .editorCanvas .element.time { width: 300px; margin-left: 15px; }

        .formEditor .editorCanvas .element .fa { margin: -10px -50px 0 0; }

        .formEditor .editorCanvas p.intro select { margin: 20px 0 20px; float: left !important; }
        
        .formEditor .editorCanvas ul { margin: 0 0 10px 0; padding: 0; clear: both; overflow: hidden; }
            .formEditor .editorCanvas ul.ui-state-highlight { border: 1px dashed red; background: none; }
            .formEditor .editorCanvas ul li { list-style-type: none; margin: 0 0 10px 0; border: 1px dashed orange; padding: 10px; }
                .formEditor .editorCanvas ul li ul li { position: relative; }
                .formEditor .editorCanvas > ul > li { border: 1px dashed #808080; clear: both; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; }
                .formEditor .editorCanvas > ul > li.halfWidth { width: 49% !important; clear: none !important; }
                    .formEditor .editorCanvas > ul > li.halfWidth.first { float: left; clear: left !important; }
                    .formEditor .editorCanvas > ul > li.halfWidth.last { float: right; }
                .formEditor .editorCanvas > ul > li.thirdWidth { width: 32.3% !important; clear: none !important; }
                    .formEditor .editorCanvas > ul > li.thirdWidth.first { margin-right: 10px; clear: left !important; }
                    .formEditor .editorCanvas > ul > li.thirdWidth.first,
                    .formEditor .editorCanvas > ul > li.thirdWidth.middle { float: left; }
                    .formEditor .editorCanvas > ul > li.thirdWidth.last { float: right; }
                .noTouchEvents .formEditor .editorCanvas ul li:hover { border: 1px dashed green; padding: 10px; cursor: move; }
                .formEditor .editorCanvas ul li.ui-state-highlight { border: 1px dashed red; background: none; }
                .formEditor .editorCanvas ul li.ui-state-hover { border: 1px dashed green; background: none; }
                    .formEditor .editorCanvas ul li p { padding: 0; margin: 0; }

        .formEditor .editorCanvas li span { z-index: 100001; position: absolute; right: 9999px; top: 0; background: #ccc; padding: 2px 10px 2px 10px; border: 2px solid #fff; cursor: pointer; text-align: center; font-size: 13px; }
            .noTouchEvents .formEditor .editorCanvas li span:hover,
            .noTouchEvents .formEditor .editorCanvas > ul > li span.remove.group:hover { background: #000; color: #fff; }
            .noTouchEvents .formEditor .editorCanvas li:hover span { margin: 0 -8px -8px 0;  }
            
            .noTouchEvents .formEditor .editorCanvas ul li ul li:hover span.remove { right: 30px; font-weight: bold; }
            .noTouchEvents .formEditor .editorCanvas ul li ul li:hover span.edit { right: 60px; }

            .formEditor .editorCanvas > ul > li span.remove.group { background: #c40000; color: #fff; }
            .noTouchEvents .formEditor .editorCanvas > ul > li:hover span.remove.group { right: 0; }

        .formEditor .propertiesOverlay { background: rgba(0, 0, 0, 0.7); position: absolute; width: 100%; height: 100%; left: 0; z-index: 100003; }

        .formEditor .editorCanvas .propertiesWindow { width: 95%; background: #ccc; border: 1px solid #aaa; padding: 5px; margin-top: 5px; overflow: hidden; clear: both; position: absolute; left: 50%; -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 100004; }
            .formEditor .editorCanvas .propertiesWindow h3 { x-font-size: 14px; margin: 6px 0 12px 0; }
            .formEditor .editorCanvas .propertiesWindow hr { height: 1px; border: 0; border-bottom: 1px solid #aaa; background: none; margin: 10px 0 15px 0; }
            .formEditor .editorCanvas .propertiesWindow .iconButton { float: right; }
            .formEditor .editorCanvas .propertiesWindow input[type=checkbox] { position: relative; top: 2px; margin: 0 5px 0 5px; }
            .formEditor .editorCanvas .propertiesWindow input[type=text] { margin: 0 0 5px 0; }
            .formEditor .editorCanvas .propertiesWindow label { float: none; margin: 0; width: auto; cursor: pointer; }
            .formEditor .editorCanvas .propertiesWindow textarea { height: 40px; }
            .formEditor .editorCanvas .propertiesWindow .contentBox { height: 80px; }

        a.iconButton.toggleEditingMode { margin-top: 10px; float: right; }

        .formEditorHidden { display: none !important; }
        .formEditorShown { display: block !important; width: 100% !important; }