body{ 
	padding: 0; 
	margin: 0; 
	background: white;

	font-family: Verdana, Helvetica Neue, sans-serif;

}

body .content {
    display: flex;  
    flex: 1; 
    flex-direction: column;
    overflow-x: auto;
    max-height: 100vh; 
   	justify-content: flex-start;
  	align-items: flex-start;
  	padding-top:  0; 
  	font-family: Verdana, Helvetica Neue, sans-serif;
	width:  100%;

  
}


a {
	text-decoration: none;
	color: #2b88a0;
}
h1 {font-size: 36px;} 
footer {padding: 20px; text-align: right;}
@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('/fonts/glyphicons-halflings-regular.eot');
  src: url('/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('/fonts/glyphicons-halflings-regular.woff') format('woff'), url('/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
} 

.glyphicon{
	cursor: pointer;
	font-family: 'Glyphicons Halflings';
	font-style: normal;
	font-weight: normal;
	line-height: 1;  

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.glyphicon-plus:before {
  content: "\2b";
}
.glyphicon-cog:before {
  content: "\e019";
}

.glyphicon-option-vertical:before {
  content: "\e235";
}

.glyphicon-arrow-down:before {
  content: "\e094";
}
.glyphicon-arrow-up:before {
  content: "\e093";
}
.glyphicon-remove:before {
  content: "\e014";
}
.glyphicon-phone:before {
    content: "\e145";
}
.glyphicon-envelope:before {
    content: "\2709";
}
.glyphicon-pencil:before {
  content: "\270f";
}
.glyphicon-font:before {
    content: "\e047";
}
.glyphicon-triangle-bottom:before {
    content: "\e252";
}
.glyphicon-check:before {
    content: "\e067";
}
.glyphicon-move:before {
  content: "\e068";
}
.glyphicon-record:before {
    content: "\e165";
}
.glyphicon-calendar:before {
    content: "\e109";
}
.glyphicon-time:before {
    content: "\e023";
}
.glyphicon-usd:before {
    content: "\e148";
}
.glyphicon-link:before {
    content: "\e144";
}
.glyphicon-map-marker:before {
    content: "\e062";
}
.glyphicon-picture:before {
    content: "\e060";
}
.glyphicon-file:before {
    content: "\e022";
}
.glyphicon-open-file:before {
    content: "\e203";
}
.glyphicon-star:before {
    content: "\e006";
}
.glyphicon-hdd:before {
    content: "\e121";
}
.glyphicon-globe:before {
    content: "\e135";
}

header {
	display: flex;
	width: 100%;
	position:  sticky;
	top:  0;
	left: 0;
	z-index:  2;
	flex-direction: column;

	
}
header h1{
	display: flex;
	
}
header h1 > span {
	font-size: 14px;
	font-weight: normal;
	color: green;
	padding-left: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

header .header-menu{
	display: flex;
	width: calc(100% - 40px);
	background: #c4c4c4;
	padding: 10px 20px;
	justify-content: space-between;
	align-items: center;
}

header h1 {
	margin: 0 0 0 0; 
	font-size: 18px; 
	font-weight: bold;
}


.form-editor-wrapper {
	display: flex; 
	flex:  1;
	min-width: 100%; 
	
}
form-editor {
	display: block;
	width: 100%; 
	color: #413A41;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  
}


.controller-success-messages,
.controller-error-messages {
	border: 1px solid;
	margin:  15px;
	padding: 20px;
	background-repeat: no-repeat;
	background-position: 10px center;
	border-radius: 5px;
	width: 100%;
}
.controller-error-messages{
	color: #D8000C;
	background-color: #FFBABA; 
}
.controller-success-messages { 
	color: #4F8A10;
	background-color: #DFF2BF; 
}

form-editor  div.buttons {
	padding-left: 20px;
	padding-right: 20px; 
	display: flex;
	justify-content: flex-end;
	width: calc(100% - 40px); 
}
form-editor div.buttons button[type="submit"]{
	display: flex;
	margin: 10px; 
	background: #208199;
	height: 50px;
	border: 1px solid #208199;
	border-radius: 30px;
	min-width: 200px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: white;
	font-size: 20px
}
form-editor div.buttons a.cancel-button{
	display: flex;
	margin: 10px; 
	background: #ccc;
	height: 50px;
	border: 1px solid #ccc;
	border-radius: 30px;
	min-width: 150px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #413a40;
	font-size: 20px
}

 
form-editor .form-title {
	display:  none;
}



form-editor .form-table_name {
	display:  none;
} 

button.field-type {
	margin: 5px;
	border-radius: 5px;
	display: flex;
	width: 80px;
	height: 80px;
	align-items: center;
	justify-content: center;
	padding: 10px 5px;
	background: white;
	border: 1px solid #413a41;
	flex-direction: column;
	font-size: 10px;
}

button.field-type span {
	display: flex; 
	font-weight: bold;
	font-size: 20px;
	margin: 10px;
}


form cloudica-block {
	margin: 10px;
	display:  flex;
	flex-direction:  column;
	border:  2px solid transparent;
	position:  relative;

	font-family: inherit;
	color: inherit;
	font-style: inherit;
	text-decoration: inherit;
	text-align: inherit;
	font-size: inherit;
	font-weight: inherit;
} 
form cloudica-block.active,
 
form cloudica-block .layout{
	flex:  1;
	display:  flex;
	flex-direction: column;

	align-items: flex-start;
	justify-content: flex-start;

	
	font-family: inherit;
	color: inherit;
	font-style: inherit;
	text-decoration: inherit;
	text-align: inherit;
	font-size: inherit;
	font-weight: inherit;
}



form cloudica-block .layout { 
	margin-bottom: 10px;
	padding:  5px;
} 
form cloudica-block .block-content{
	display: flex; 	
	width:  100%;
	flex-direction:  row;
	border:  2px solid transparent;
	position:  relative;
	height:  calc(100% - 30px);
}

form cloudica-block[hide-title] .block-content{
	height:   calc(100% - 10px);
} 


/** FOR EMPTY BLOCKS **/
form cloudica-block   {  
	width: calc(100% - 20px);
}
 
/** css layouts **/ 

form cloudica-content {
	display: flex;
	flex-direction: column;
	flex:  1;
width: calc(100% - 10px);}

form cloudica-content label {
	color: #413a41;
    font-size: 14px;
	font-weight: bold;
	text-align: left;
    padding-top: 23px;
	padding-left: 10px;
}

form cloudica-content .field-input {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center; 
	width: calc(100% - 10px);
	padding-left: 10px;
	margin-top: 10px;
	position: relative; 
}
form cloudica-content .field-input > input,
form cloudica-content .field-input > textarea{
	display: flex;
	line-height: 20px;
    font-size: 17px;
    padding: 10px 10px;
    border-radius: 5px;
	border: 1px solid #ddd;
    color: #555;
    background: white;
	width: calc(100% - 30px);
}
form cloudica-content .field-input > textarea {
	min-height: 100px;
}

form cloudica-content .field-input i {
	position: absolute;
	right: 10px;
	
}
form cloudica-content .field-input i:before {
	color: #bb  
}
form cloudica-content .field-input i + input {
	padding-right: 25px;
	width: calc(100% - 40px);
}


form cloudica-content[field_type="checkbox"]{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
} 
form cloudica-content[field_type="checkbox"] checkbox-field.field-input input{
	width: auto ;  
	
	background: red;
}

form cloudica-content[field_type="checkbox"] checkbox-field.field-input  {
	width: 20px ;   
}

form cloudica-content[field_type="checkbox"]  label {  
	display: flex;
	align-items: center;
	justify-content: center; 
	padding-top: 10px;
	font-weight: normal;
}

form cloudica-content[field_type="yes-no"] {
	display: flex;
	flex-direction: column;
	align-items: center;
}
form cloudica-content[field_type="yes-no"] label {
	display: flex;
	margin-bottom: 5px;
}
form cloudica-content[field_type="yes-no"] yes-no-field {
	flex-direction: row;
}
form cloudica-content[field_type="yes-no"] yes-no-field button {
	margin: 5px;
	padding: 10px 20px;;
	background: white;
	border: #208199 2px solid;
	border-radius: 5px;
	color: #208199;
	font-weight: bold;
}

form cloudica-content[field_type="yes-no"] yes-no-field button.active { 
	background: #208199; 
	color: white;
}
form cloudica-content{
	display:  block;  	
	width:  calc(100% - 10px);
	border:  2px dashed transparent;
	position:relative;
	padding:  5px;
	box-sizing: border-box;

	font-family: inherit;
	color: inherit;
	font-style: inherit;
	text-decoration: inherit;
	text-align: inherit;
	font-size: inherit;
	font-weight: inherit;
} 
  

hr-break-field {
	width: 100%;
	display: flex;
	height: 1px;
	background: #ccc;
	margin-top: 10px;
	margin-bottom: 10px;
}

form cloudica-content number-field.field-input {
	align-items: flex-start; 
}
input[type='number'] {
	max-width: 100px;
}
 


droplist-field custom-select {
	width: 100%;
}

/** SWITCH BUTTON **/
switch-button  {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 16px;
  pointer-events: auto;
  cursor: pointer;
}
switch-button  input {
  opacity: 0;
  width: 16px;
  height: 16px;
  position: absolute;
  z-index:  5;
}
switch-button  .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
switch-button  .slider:before {
    position: absolute;
	content: "";
	height: 12px;
	width: 12px;
	left: 2px;
	top: 2px; 
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}
switch-button  input:checked + .slider {
  background-color: #208199;
}
switch-button  input:focus + .slider {
  box-shadow: 0 0 1px #208199;
}
switch-button  input:checked + .slider:before {
  -webkit-transform: translateX(14px);
  -ms-transform: translateX(14px);
  transform: translateX(14px);
}
switch-button  .slider.round {
  border-radius: 34px;
}
switch-button  .slider.round:before {
  border-radius: 50%;
} 


/** CUSTOM-SELECT **/
custom-select { 
        display: block;
        position: relative;
        width: fit-content;
    }
custom-select(.hide-label) .options-wrapper .input label { display: none; }
custom-select(:focus-within) .options-wrapper { border-color: #208199; }
custom-select(:focus-within) .options-wrapper .input label { color: #208199; }
custom-select(:focus-within) .options-wrapper .input:after { transform: rotate(180deg); }
custom-select(:focus-within) .options-wrapper .options,
custom-select .options-wrapper .options.active {
    display: flex;
    border-color: #ddd;
    height: auto;
}

custom-select .options-wrapper {
    position: relative;
    border: 1px solid #ddd;
    border-radius: 3px;

    transition: border-color 200ms;
}
custom-select .options-wrapper .input input {
    font-size: 18px;
    color: #413A41;
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
    padding: 10px 30px 10px 15px;
    border: none;
    border-radius: 5px;
    outline: none;
}
custom-select .options-wrapper .input:after {
    content: "\e252";
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Glyphicons Halflings";
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    color: #413A41;
    width: 30px;
    height: 100%;
    pointer-events: none;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    transition: transform 200ms;
}
custom-select .options-wrapper .input label {
    background-color: white;
    font-size: 14px;
    color: #ddd;
    position: absolute;
    top: -9px;
    left: 11px;
    padding: 0px 5px;
    text-transform: capitalize;

    transition: color 200ms;
}
custom-select .options-wrapper .options {
    position: absolute;
    margin-top: 5px;
    display: none;
    flex-direction: column;
    background-color: white;
    border: 1px solid transparent;
    border-radius: 3px;
    width: 100%;
    height: 0px;
    overflow: hidden auto;
    z-index: 2;
}
custom-select .options-wrapper .options .option {
    display: flex;
    flex-direction: column;
    font-size: 15px;
    color: #413A41;
    padding: 10px 15px;
    cursor: pointer;
    user-select: none;
    text-transform: capitalize;

    transition: background-color 200ms, color 200ms;
}
custom-select .options-wrapper .options .option span { pointer-events: none; }
custom-select .options-wrapper .options .option span.sub {
    font-size: 11px;
    margin-top: 5px;
    text-transform: lowercase;
    opacity: 0.5;
}
custom-select .options-wrapper .options .option:hover {
    background-color: #ddd;
    color: #000;
}
custom-select .options-wrapper .options .option.active {
    background-color: #208199;
    color: white;
} 

/** location field **/
location-field {
		display: flex;
	    flex-direction: column;
	    align-items: flex-start;
	    justify-content: center;
	    width: calc(100% - 30px);
	    padding-left: 10px;
	    margin-top: 10px;
	    position: relative;

	}
location-field  
	input {
		display: flex;
	    line-height: 20px;
	    font-size: 17px;
	    padding: 10px 10px;
	    border-radius: 5px;
	    border: 1px solid #ddd;
	    color: #555;
	    background: white;
	    width: calc(100% - 20px);
	}
location-field 
	label {
		font-size: 10px;
		display: flex;

		margin-bottom: 5px;
	}

location-field 	.row {
		display: flex;
	    flex: 1;
	    width: 100%; 
	    flex-direction: column;
	    margin-bottom: 10px;
	}

location-field 	.cols {
		display: flex;
		flex-direction: row;
	}

location-field 	.cols  .row:first-child input {
		width: calc(100% - 40px)
	} 


	

multiple-answers-field {
	display: flex;
	flex-direction: column 
	
}

multiple-answers-field button {
	display: flex;
	width: 100%;
	margin-top: 5px;
	margin-bottom: 5px; 
	padding: 10px 20px;;
	background: white;
	border: #208199 2px solid;
	border-radius: 5px;
	color: #208199;
	font-weight: bold;
}


multiple-answers-field button.active { 
	background: #208199; 
	color: white;
}

@media only screen and (max-width: 600px) {
	form cloudica-content .field-input {
		padding-left: 0;
	}
	form custom-select { width: 100%; }
	form cloudica-content .field-input > input, form cloudica-content .field-input > textarea { width: calc(100% - 20px); }
	form cloudica-content .field-input i + input { width: calc(100% - 35px); }
	form cloudica-content label { padding-left: 0; }
}