/* form view */

/* wrap for add new form */

.staform-fieldgroup {
    border-top: 1px dashed #cecece;
}

.cpcommonajaxmodalpayload input.large {
    width: 100%;
    
}

.field-inactive {
      text-decoration: line-through;
      color: gray;
}

.formwrap {
	padding: 1rem;
	background-color: #f9f9fe;
	border: 1px solid #ececed;
}

.form-view-header {
	/*
	background-color: #1779ba;
	color: #fefefe;
	*/
	background-color: #efefef;
	color: #000000;
	padding: 0.5rem 0.5rem 0.5rem 1rem;
}

.form-view-header h1 {
	font-size: 1rem;
	margin: 0;
	/* color: #fefefe; */
	color: black;
}

.form-view-header .material-icons {
	vertical-align: bottom;
}

.staform-form .staform-fieldgroup-ingress {
    font-size: 1rem;
    color: #0a0a0a;
}
.editmode .staform-dynamicgroup .staform-fieldgroup-title:after {
    content: "\2795 \0020 DUPLISERBAR";
    letter-spacing: 0.03em;
    font-size: 0.6rem;
    font-weight: 500;
    background-color: #f2f2f2;
    color: #0a0a0a;
    margin-left: 0.813rem;
    padding: 3px 7px;
    border-radius: 3px;
    vertical-align: middle;
}
.question-toolbar {
    right: 0;
    position: absolute;
    display: none;
}
.question-toolbar.forceshow {
    display: block;
}
.staform-field-container {
    /* border: 1px solid #ffffff; */
}
.staform-field-container:hover {
    /* border: 1px solid #eeeeee; */
}
.staform-field-container:hover .question-toolbar {
    display: block;
}

.question-toolbar .question-toolbar-sub {
    right: 0;
    position: absolute;
    display: none;
}
.staform-field-container .question-toolbar:hover .question-toolbar-sub {
    display: block;
}


.option-toolbar {
    display: none;
    left: 0;
    bottom: 2px;
    position: absolute;

}
.option-toolbar.forceshow {
    display: block;
}
.staform-option-wrapper:hover .option-toolbar {
    display: block;
}


.content-toolbar {
	padding: 0.5rem;
	margin-bottom: 1rem;
	background-color: #f9f9fe;
	border: 1px solid #ececed;
}

.content-toolbar .button {
	margin-bottom: 0;
}

.content-toolbar .is-dropdown-submenu-parent > a {
}

.content-toolbar .is-dropdown-submenu-parent > a:hover {
	background-color: #fafafe;
}

.content-toolbar .is-dropdown-submenu-parent > a::after {
	right: 15px;
}

.content-toolbar .is-dropdown-submenu {
	width: 100%;
}


.flash-color {
	transition: background-color 2s ease;
	transition-delay: 1s;
}

.fade-from-yellow {
	background-color: #fed330;
}

.responsive-form-display .tabs-title > a,
.responsive-form-display .accordion-title {
	font-size: 0.95rem;
	border-bottom: 1px solid #e6e6e6;
	font-weight: 500;
	z-index: 10;
	padding-right: 3rem;
}

.responsive-form-display .tabs-title > a .material-icons,
.responsive-form-display .accordion-title .material-icons {
	font-size: 25px;
	/* vertical-align: bottom; */
}

.responsive-form-display .toolsadded .accordion-title {
	padding-right: calc(2.5rem + 50px);
}

.responsive-form-display .tabs-content {
	-webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
	width: 100%;
}




.responsive-form-display .form-content-list {
    padding-bottom: 50px;
}

.responsive-form-display form textarea,
.standalone textarea,
.responsive-form-display form input[type="file"],
.standalone input[type="file"] {
    	width: 100%;
}

.responsive-form-display .staform-field-container:not(.layout-horizontal) input:not([size]):not(.staform-field-checkbox) {
    width: 100%;
    display: block;
}

.responsive-form-display .staform-field-container.stafield_xzipcode input:not([size]) {
    width: 4em;
}

.responsive-form-display .staform-field-container.stafield_xphone input:not([size]) {
    width: 10em;
}

.responsive-form-display input.staform-field-date:not([size]) {
    width: 9em !important; 
}

.responsive-form-display fieldset {
	margin: 1rem 0;
	border: 0px;
	border-top: 1px solid #ccc;
	position: relative;
	padding: 0;
	padding-top: 53px;

}

.responsive-form-display fieldset legend {
	position: absolute;
    width: 100%;
    top: 0;
	padding-inline-start: 0;
    padding-inline-end: 0;
    margin-bottom: 0;
    padding: 0.5rem 0rem;
    /* background-color: #c3e0f3; */
    background-color: #ffffff;
    color: #0a0a0a;
    font-weight: 400;
	border-bottom: 1px solid #ccc;
}

.responsive-form-display .staform-field-container {
	/* border-bottom: 1px solid #efeffe; */
	/* padding: 0 0 1rem 0rem; */
}

.responsive-form-display .staform-field-container input {
    max-width: 100%;
}

.responsive-form-display .staform-field-container:last-child {
	border-bottom: 0;
}

.list-group-item {
	position: relative;
}

.list-item-tools {
    position: absolute;
    right: 2.5rem;
    top: calc(45% - 7px); /* absolute center hack */
    opacity: 0;    
}
.list-item-tools i {
    padding-left: 0.5rem;
}


/* .tabs-title > a:focus, .tabs-title > a[aria-selected="true"] */
/*
.list-group-item.is-active a, .list-group-item.is-active a:hover, .list-group-item.is-active a:visited {
    color: black;
    background-color: #c3e0f3 !important;
}
*/

.list-group-item:focus .list-item-tools {
/* .list-group-item.is-active .list-item-tools { */
	opacity: 1;
}

.list-item-tools .optools {
	margin-left: 0.25rem;
}

.list-item-tools .optools .op-move {
	cursor:  grab;
}

.list-group-item .draghandle {
	font-size: 16px;
    margin-right: 0.7rem;
    vertical-align: bottom;
}

.form-display-controls {
	margin-top: 1rem;
}

.form-display-controls .material-icons {
	font-size: 14px;
	vertical-align: bottom;
}

.accordion-content {
	font-size: 0.9rem;
}

.qgroupcontent .callout {
	font-size: 0.9rem;
}

/* edit */
.staform-fieldgroup .staform-field-container {
    position: relative;
}

/* Hide specific fields on sta element edit for specific classes */
.staelement-edit #stafoptionslayout { display: none; }
.staelement-edit #stafplaceholder { display: none; }

.staelement-edit.fieldtype-radio #stafoptionslayout,
.staelement-edit.fieldtype-checkbox #stafoptionslayout {
    display: block;
}
.staelement-edit.fieldtype-text #stafplaceholder,
.staelement-edit.fieldtype-email #stafplaceholder,
.staelement-edit.fieldtype-number #stafplaceholder,
.staelement-edit.fieldtype-password #stafplaceholder,
.staelement-edit.fieldtype-tel #stafplaceholder,
.staelement-edit.fieldtype-textarea #stafplaceholder {
    display: block;
}

/* hide some buttons in "edit mode" */
.responsive-form-display.editmode #sendbutton,
.responsive-form-display.editmode .form-display-controls:last-of-type {
    visibility: hidden;
}

/* mobile */
@media print, screen and (max-width: 40em) {
	.standalone-card {
	    margin: 0;
	    padding: 0;
	    border-radius: 0;
	    box-shadow: none;
	}
	.standalone-content {
		padding: 0
	}
}

@media print, screen and (min-width: 40em) {

	.responsive-form-display .tabs-content {
		background-color: #f9f9fe;
	}

	.responsive-form-display .tabs-title > a {
		background-color: #fefefe;
	}

	.responsive-form-display {
		min-height: 450px;
	}

	.main-form-view-and-editor {
		min-height: 250px;
	}

	.responsive-form-display .tabs-title {
		width: 100%;
		transition: border-bottom 0.15s ease;
	}

	.responsive-form-display .tabs-content {
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 auto;
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		width: 75%;

		border-top: 1px solid #e6e6e6;
		border-left: none;
	}

	.list-group-item:hover a {
		background-color: #f3f2f2;
	}

	.list-group-item:hover .list-item-tools {
		opacity: 1;
	}

	.list-item-tools {
		right: 0;
    top: 0;
		padding: 0.75rem;
		height: 100%;
		display: flex;
		align-items: center;
		text-align: center;
	}

	.list-item-tools .cppoplink {
	    cursor: pointer;
	}

	.list-item-tools .op-move {
	    cursor: grab;
	}

	.list-item-tools  i.material-icons {
	    padding-left: 0;
	    vertical-align: bottom;
	    font-size: 1rem !important;
	    color: #454545;
	}

    .responsive-form-display .form-content-list {
        padding-bottom: 50px;
    }

	.form-display-controls .button {
		padding: 0.7rem 2.5rem;
	}

	.responsive-form-display .tabs-content {
		position: relative;
	}

	.responsive-form-display .tabs-content:before {
		/* content: "Legg til flere spørsmålsgrupper ved å trykke på Legg til side/gruppe."; */
		text-align: center;
		display: block;
		font-weight: 500;
		color: #999;
		font-size: 0.9rem;
		position: absolute;
		width: 100%;
		top: calc(50% - 10px);
	}

	.responsive-form-display .qgroupcontent {
		background-color: #fefef9;
	}

	.responsive-form-display .form-group-content {
		padding: 1rem;
		background-color: #fefefe;
		border: 1px solid #ececed;
	}

	.responsive-form-display .layout-horizontal label {
    margin-right: 0.5rem;
  }

  .responsive-form-display .staform-fieldgroup .staform-field-container.layout-horizontal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .responsive-form-display .staform-fieldgroup .staform-field-container.layout-horizontal label {
      margin-bottom: 1rem;
  }
  .responsive-form-display .staform-fieldgroup .staform-field-container.layout-horizontal input {
      flex-grow: 1;
  }
  .responsive-form-display .staform-fieldgroup .staform-field-container.layout-horizontal p {
      width: 100%;
  }

}