.abion2000
{
    width: 100%;
}

.abion2000 .row{width:100%;clear: both;}
.abion2000 *[class~=col]{width:100%;float:left;min-height: 1px;}
.abion2000 .rowFlex{display: -webkit-flex;display: flex;-webkit-flex-direction: row;flex-direction: row;}
.abion2000 .rowFlex > .colFlex{-webkit-flex: auto;flex: auto;}
/* cal base 12 */
.abion2000 .col-1{width:8.333333%;max-width:8.333333%;-webkit-box-flex:0;-webkit-flex:0 0 8.333333%;-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;}
.abion2000 .col-2{width:16.666666%;max-width:16.666666%;-webkit-box-flex:0;-webkit-flex:0 0 16.666666%;-ms-flex:0 0 16.666666%;flex:0 0 16.666666;}
.abion2000 .col-3{width:25%;max-width:25%;-webkit-box-flex:0;-webkit-flex:0 0 25%;-ms-flex:0 0 25%;flex:0 0 25%;}
.abion2000 .col-4{width:33.333333%;max-width:33.333333%;-webkit-box-flex:0;-webkit-flex:0 0 33.333333%;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;}
.abion2000 .col-5{width:41.666666%;max-width:41.666666%;-webkit-box-flex:0;-webkit-flex:0 0 41.666666%;-ms-flex:0 0 41.666666%;flex:0 0 41.666666%;}
.abion2000 .col-6{width:50%;max-width:50%;-webkit-box-flex:0;-webkit-flex:0 0 50%;-ms-flex:0 0 50%;flex:0 0 50%;}
.abion2000 .col-9{width:75%;max-width:75%;-webkit-box-flex:0;-webkit-flex:0 0 75%;-ms-flex:0 0 75%;flex:0 0 75%;}
.abion2000 .col-12{width:100%;max-width:100%;-webkit-box-flex:0;-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;}

.abion2000 form
{
}

.abion2000 button
{


    display: inline;
    color: rgb(36,62,91);
    border: 1px solid rgb(200,200,200);
    border-radius: 3px;
    line-height: 200%;
    background: rgb(255,255,255) linear-gradient(to bottom,rgba(200,200,200,0.0), rgba(200,200,200,0.2), rgba(200,200,200,0.4));
}
.abion2000 button:hover
{
    cursor: pointer;
    background-color: rgb(240,240,240);
}

.abion2000 button:disabled:hover,
.abion2000 button:disabled
{
    cursor: no-drop;
    background: rgb(255,255,255) linear-gradient(to bottom,rgba(140,140,140,0), rgba(140,140,140,.05), rgba(140,140,140,.1));
    color: rgba(36,62,91,.1);
    border-color: rgba(200,200,200,.1);
}

.abion2000 button.active
{
	background-color: rgb(225,243,258);
	border-color: #fff;
}
/* ---------------------------------------------------------------------- */
/* ------------------------- apiInputNavigation ------------------------- */
/* ---------------------------------------------------------------------- */

.apiInputNavigation
{
    background-image: linear-gradient(to right, rgba(205,223,238,0.5), rgba(205,223,238,1.0), rgba(205,223,238,0.5));
    margin-bottom: 20px;
}

.apiInputNavigation button
{
	margin:4px;
}


/* ---------------------------------------------------------------------- */
/* ------------------------- apiInputSection ---------------------------- */
/* ---------------------------------------------------------------------- */

div.apiInputSection
{
    padding: 0 auto;
    background-color: #f5f5f5;
    position: relative;
    min-height: 1px;
    margin-top: 10px;
}

div.apiInputSection .card,
div.apiInputSection .menu
{
    margin: 10px auto;
    background-color: white;
    border: 1px solid grey;
    border-radius: 3px;
}
div.apiInputSection .menu
{
	padding: 10px;
}
div.apiInputSection .menu.sticky
{
	position: -webkit-sticky;
	position: sticky;
	top: 10.5px;
}


div.apiInputSection .card.rotation
{
    padding: 0;
}

div.apiInputSection .menu input,
div.apiInputSection .menu select,
div.apiInputSection .menu option,
div.apiInputSection .menu button
{
    width: 100%;
}
div.apiInputSection .menu input,
div.apiInputSection .menu select,
div.apiInputSection .menu option
{
    color: rgb(36,62,91);
    border: 1px solid rgb(205,223,238);
    border-radius: 3px;
    line-height: 200%;
    padding: 4px;
    background: rgb(255,255,255) linear-gradient(to bottom,rgba(200,200,200,0.0), rgba(200,200,200,0.2), rgba(200,200,200,0.4));
}


div.apiInputSection .menu input[type="file"]
{
    width: calc(100% - 10px);
}

div.apiInputSection .menu option
{
    margin:0 0 4px 0;
}

div.apiInputSection .menu ul,
div.apiInputSection .menu ol
{
    list-style: none;
    margin: 0;
    padding: 0;
}
div.apiInputSection .menu li
{
    margin: 0;
    padding: 0;
}
div.apiInputSection .menu li button
{
    width: auto;
    margin: 0;
    padding: 0 4px;
}

div.apiInputSection .menu li button:nth-child(1){width: 80%;}
div.apiInputSection .menu li button:nth-child(2){width: 20%;}


/*
div.apiInputSection .menu input[type="file"]
{
    display: none;
}
.custom-file-upload
{
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}
*/
/* ---------------------------------------------------------------------- */
/* ------------------------- default ------------------------------------ */
/* ---------------------------------------------------------------------- */

/* https://stackoverflow.com/questions/18552336/prevent-contenteditable-adding-div-on-enter-chrome

document.execCommand('defaultParagraphSeparator', false, 'p');
*/
p[contenteditable="true"]{
	display: inline-block;
	width: 100%;
}

div.apiInputSection.default
{
    padding: 10px;
}
div.apiInputSection.default label
{
    display: block;
    width: 100%;
    border-bottom: 1px solid darkgrey;
    padding:10px 0;
}
div.apiInputSection.default label input,
div.apiInputSection.default label select,
div.apiInputSection.default label textarea
{
    margin-top: 10px;
    display: block;
    width: 60%;
    padding: 4px;
    border: 1px solid grey;
    border-radius: 3px;
    line-height: 16px;

}
div.apiInputSection.default label:last-child
{
    border-bottom: none;
}

button.abion_extension_switch.active
{}


/* ---------------------------------------------------------------------- */
/* ------------------------- abion -------------------------------------- */
/* ---------------------------------------------------------------------- */
div.apiInputSection.abion
{
}
div.apiInputSection.abion .card
{
}

/* ---------------------------------------------------------------------- */
/* ------------------------- stepstone ---------------------------------- */
/* ---------------------------------------------------------------------- */

/*
div.apiInputSection.stepstone
{
	background-color: #f5f5f5 !important;
}

div.apiInputSection.stepstone .card h2
{
    color: #000 !important;
}
*/

div.apiInputSection.stepstone .card
{
    max-width: 1142px;
    width: 846px;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;

    border: 1px solid rgba(220,223,226,0.8);
    background: #fff;
    border-radius: 3px;

    box-sizing: border-box;
}

div.apiInputSection.stepstone .card:hover
{
    /* background-color: rgba(0,0,0,0.05); */
}

div.apiInputSection.stepstone .card *:focus
{
    background-color: #00CCFF;
}

div.apiInputSection.stepstone .card .italic
{
    font-style: italic;
}
div.apiInputSection.stepstone .card .bold
{
    font-weight: bold;
}
div.apiInputSection.stepstone .card .underline
{
    text-decoration: underline;
}

div.apiInputSection.stepstone .card h2
{
    font-family: sans-serif;
    font-size: 1.4em;
    background-color: transparent;
    margin: 0 0;
    padding: 0;
    font-weight: 600;
}

div.apiInputSection.stepstone .card.rotation
{
    position: relative;
    width: 846px;
    height: calc(846px / 5 * 2 );
    overflow: hidden;
}

div.apiInputSection.stepstone .menu ul.fileBackgroundListStack button[data-action-used="1"],
div.apiInputSection.stepstone .menu ul.fileRotationListStack button[data-action-used="1"]
{
    background-color: #00CC00;
}

div.apiInputSection.stepstone .card .head,
div.apiInputSection.stepstone .card .body
{
	padding: 24px;
	font-size: 16px;
}
div.apiInputSection.stepstone .card .head
{
	padding-bottom: 12px;
}
div.apiInputSection.stepstone .card .body
{
	padding-top: 12px;
}

div.apiInputSection.stepstone .card .body ol,
div.apiInputSection.stepstone .card .body ul
{
	padding-left: 1.6em;
	box-sizing: border-box;
	font-size: 16px;
	font-family: "Helvetica Neue",Arial,sans-serif;
	line-height: 1.5;
	color: #3a434f;
	margin: 0 0 12px 0;
}

div.apiInputSection.stepstone .card .body p
{
	margin:0 0 12px 0;
}

div.apiInputSection.stepstone .card .body li,
div.apiInputSection.stepstone .card .body p
{
	list-style-type: disc;
	font-family: "Helvetica Neue",Arial,sans-serif;
	line-height: 1.5;
	color: #3a434f;
}

div.apiInputSection.stepstone .card .body ol li {list-style-type: decimal;}
div.apiInputSection.stepstone .card .body ul li {list-style-type: disc;}

div.apiInputSection.stepstone .card .head
{
	font-family: sans-serif;
	font-size: 1.4em;
	font-weight: 600;
	color: #000000;
	line-height: 1.3;
}

div.apiInputSection.stepstone .card .head *:hover,
div.apiInputSection.stepstone .card .body .dropzone:hover,
div.apiInputSection.stepstone .card .head *:focus,
div.apiInputSection.stepstone .card .body .dropzone:focus
{
    background-color: rgba(200,200,200,.5);
}
div.apiInputSection.stepstone .card .head a[href],
div.apiInputSection.stepstone .card .body a[href]
{
	text-decoration: none;
}


div.apiInputSection.stepstone .card .body.dropzoneBlink,
div.apiInputSection.stepstone .card .body .dropzoneBlink
{
	line-height: 30px;

	box-sizing: content-box;
	border:1px solid grey;
	border-radius: 3px;
}
div.apiInputSection.stepstone .card .body li.dropzoneBlink
{
	border-bottom:none;
}
div.apiInputSection.stepstone .card .body li.dropzoneBlink:last-child
{
	border:1px solid grey;
}

div.apiInputSection.stepstone .menu .dragElementTemplateBox li,
div.apiInputSection.stepstone .menu .dragElementTemplateBox p
{
	color: rgb(36,62,91);
	border: 1px solid rgb(200,200,200);
	border-radius: 3px;
	line-height: 200%;
	background: rgb(255,255,255) linear-gradient(to bottom,rgba(200,200,200,0.0), rgba(200,200,200,0.2), rgba(200,200,200,0.4));
	padding: 2px;
	margin: 0;
}




div.stepstoneBackground
{
    background-size: auto;
    background: no-repeat top center;
}


.validationSave {
	animation: validationSaveAnimation 1s 1 !important;
}
@keyframes validationSaveAnimation {
	0% {
		color: rgb(36,62,91);
		border-color: rgb(205,223,238);
	}
	50% {
		color: lightgreen;
		border-color: lightgreen;
	}
	100% {
		color: rgb(36,62,91);
		border-color: rgb(205,223,238);
	}
}



.validationError
{}
.validationError option,
.validationError {
    animation: validationErrorAnimation 1s 1 !important;
}

@keyframes validationErrorAnimation {
    0% {
        color: rgb(36,62,91);
		border-color: grey;
        background-color: white;
    }
    50% {
        color: red;
		border-color: red;
        background-color: orange;
    }
    100% {
        color: rgb(36,62,91);
		border-color: grey;
        background-color: white;
    }
}