/***************************************
********** UTILITY *********************
****************************************/
.saui-space-bottom {
	margin-bottom: 1rem;
}
.saui-space-top {
	margin-top: 1rem;
}
.saui-space-left {
	margin-left: 1rem;
}
.saui-space-right {
	margin-right: 1rem;
}
.saui-margin-top-none {
	margin-top: 0;
}
.saui-block {
	display: block;
}
.saui-display-none {
	display: none;
}
.saui-inline-block {
	display: inline-block;
}
.saui-relative {
	position: relative;
}
[data-aveditable-field] {
	pointer-events: auto !important;	
}
.xdebug-var-dump {
    text-align: left;
}
.pswp {
  display: none;	/* hide photoswipe, in case site doesn't use it, but Avtemplate::close() is asking for it (by default) */
}

/* ROWFIX - acts like .row (max-width, clearing) without the baggage of .row .row styling from foundation.
   USAGE - when we need to allow the grideditor to have .row/.column but need the container to act like a .row as well */
.saui-rowfix {
	margin-left: auto;
	margin-right: auto;
	max-width: 75em;
}
.saui-rowfix::before, .saui-rowfix::after {
  content: ' ';
  display: table; }

.saui-rowfix::after {
  clear: both; }

/***************************************
****** FORMS ****************
****************************************/
.is-initial-validation .is-invalid-input:not(:focus) {
    background-color: #fefefe;
    border-color: #cacaca;
}
.saui-othertext.is-hidden {
	display: none;
}
label > span .saui-othertext {
	/* has been appended inside of the label of the input, so js is active */
	display: inline-block;
	margin-bottom: 0;
}
label > span div.saui-othertext {
	margin-left: 1rem;
	vertical-align: middle;
}
label > span .saui-othertext .form-error {
	margin: 0.25rem 0 0 0;
}
/* make label clickable area only as big as text */
@media only screen and (min-width: 40em) {
	.checkbox label {
		width: auto;
		display: inline-block;
	}
}
/* using headers as labels, nice multi-task for complicated forms */
.checkbox label h5 {
	width: auto;
	display: inline-block;
}

.reveal-overlay.dirty-warning,
.reveal.dirty-warning {
	z-index: 1020;
}
/***************************************
****** RICH TEXT EDITOR ****************
****************************************/
.saui-editor-container {
}
.saui-editor-container textarea {
	height: 30rem;	
}
.summary-input .saui-editor-container textarea {
	height: 10rem;
}
.summary-input .saui-editor-container .help-text {
	margin-top: .5rem;
}
@media screen and (min-width: 600px) {
	.mce-window[aria-label="Insert/edit image"] {
		min-width: 600px;
		width: 600px;
		left: 0 !important;
		right: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

.mce-menu-item-normal .mce-text,
.mce-menu-item-preview .mce-text {
	background-color: transparent !important;
}
.mce-menu-item-normal.mce-active,
.mce-menu-item-preview.mce-active  {
	background-color: rgba(45,138,199, .15) !important;
	color: #fff !important;
}
.mce-menu-item.mce-active:hover,
.mce-menu-item.mce-active:focus {
	background-color: rgb(45,138,199) !important;
}

.mce-menu-item:hover .mce-text, 
.mce-menu-item.mce-selected .mce-text, 
.mce-menu-item:focus .mce-text,
.mce-menu-item.mce-active:hover .mce-text,
.mce-menu-item.mce-active:focus .mce-text {
	color: #ffffff !important;
}
/***************************************
****** IMAGE FILE UPLOAD PREVIEW WIDGET ****************
****************************************/
.saui-preview {
	
}
.saui-preview .label {
	background-color: #f2a78d;
}
.saui-preview .saui-placeholder-wrapper {
	background-color: #e9e9e9;
	padding: .8rem;
}
.saui-preview .saui-placeholder {
	position: relative;
	padding-bottom: 50%;
  	height: 0;
}
.saui-preview .saui-placeholder img {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	max-height: 100%;
	max-width: 100%;
	margin: auto;
}
.saui-preview .saui-placeholder.saui-placeholder-empty img {
	display: none;
}
.saui-preview .saui-placeholder.saui-placeholder-empty a {
	font-size: 1.4em;
	display: block;
	text-align: center;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: 0;
    color: #999;
    background-color: #f0f0f0;
}
.saui-preview .saui-placeholder.saui-placeholder-empty a:hover,
.saui-preview .saui-placeholder.saui-placeholder-empty a:active,
.saui-preview .saui-placeholder.saui-placeholder-empty a:focus {
	background-color: #fafafa;
}
.saui-preview .saui-placeholder a span {
	display: none;
}
.saui-preview .saui-placeholder.saui-placeholder-empty a span {
	position: absolute; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%); 
	width: 100%	;
	display: block;
}
.saui-preview .saui-placeholder.saui-placeholder-empty a:hover span,
.saui-preview .saui-placeholder.saui-placeholder-empty a:active span,
.saui-preview .saui-placeholder.saui-placeholder-empty a:focus span {
	color: #E05B26;
}

/*** Stretchy images for grid image layouts ***/
[data-saui-stretchy-img] {
	display: block;
	background-size: cover;
	background-position: 50% 50%;
}
[data-saui-stretchy-img] .image-wrapper,
[data-saui-stretchy-img] .image-wrapper > a {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	padding: 0;
}
/*****************************************
******* DROPZONE.JS TWEAKS ***************
******************************************/

.saui-dropzone {
	position: relative;
}
@media screen and (max-width: 63.9375em) {
	.saui-dropzone {
		pointer-events: none;	/* don't want click on dropzone to trigger add files... only click on button */
	}
	.saui-dropzone * {
		pointer-events: auto;	/* all children can have pointer events */
	}
}
  .saui-dropzone .dz-preview {
    position: relative;
    display: inline-block;
    width: 120px;
    margin: 0.5em; }
    .saui-dropzone .dz-preview .dz-progress {
      display: block;
      height: 15px;
      border: 1px solid #aaa; }
      .saui-dropzone .dz-preview .dz-progress .dz-upload {
        display: block;
        height: 100%;
        width: 0;
        background: green; }
.saui-dropzone .dz-details {
	font-size: .8em;
}
.saui-dropzone .dz-filename {
	overflow: hidden;
}
.saui-dropzone .dz-filename > span {
    text-overflow: ellipsis;
    white-space: nowrap;
}
    .saui-dropzone .dz-preview .dz-error-message {
      color: red;
      display: none; }
    .saui-dropzone .dz-preview.dz-error .dz-error-message, .saui-dropzone .dz-preview.dz-error .dz-error-mark {
      display: block; }
    .saui-dropzone .dz-preview.dz-success .dz-success-mark {
      display: block; }
    .saui-dropzone .dz-preview .dz-error-mark, .saui-dropzone .dz-preview .dz-success-mark {
      position: absolute;
      display: none;
      left: 30px;
      top: 30px;
      width: 54px;
      height: 58px;
      left: 50%;
      margin-left: -27px; }
      
 
.saui-dropzone.up-2 .dz-preview {
    display: inline-block;
    margin: 5%;
    position: relative;
    width: 40%;
}

.dz-message {
	cursor: pointer;
}
.reveal.saui-dropzone {
	padding: 0;	/* no padding so whole reveal pop up is clickable as .dz-message */
	background-color: #f0f0f0;
}
.reveal.saui-dropzone .dz-preview {
	margin: 2rem;
}
.dropzone-previews {
	margin-bottom: -1rem;
}
.dz-message.full-width {
	display: inline-block;
	width: 100%;
}
.empty-no-items .dz-message.full-width {
	margin: 1rem 0 0 0;
}
.dz-message-container {
    display: inline-block;
    width: 100%;
}
.dz-message-container.rounded {
    border: 2px dotted rgba(240, 123, 84, 0.35);
    border-radius: 1rem;
	-moz-border-radius: 1rem;
	-webkit-border-radius: 1rem;
    display: inline-block;
    margin: 0;
    padding: 0 .5rem;
    text-align: center;
    width: 100%;
}
.dz-message-container.rounded span {
	color: #f07b54;
	font-size: .9rem;
	position: relative;
	top: -.7rem;
	line-height: 0;
}
.dz-message-container.rounded .fi-photo {
	display: block;
	color: #f07b54;
    font-size: 3rem;
}
.dz-message-container.rounded:hover,
.dz-drag-hover .dz-message-container.rounded {
	background-color: #f07b54;
	color: #fff;
	border: 2px solid #f07b54;
}
.dz-message-container.rounded:hover span,
.dz-drag-hover .dz-message-container.rounded span,
.dz-message-container.rounded:hover .fi-photo,
.dz-drag-hover .dz-message-container.rounded .fi-photo {
	color: #fff;
}
.add-photo-widget-single .dz-message-container.rounded {
    width: 100%;
    padding: 3.5rem;
}
.add-photo-widget-single .saui-thumbnails {
    background-color: #ddd;
    padding: 1rem;
    min-height: 19rem;
}
.add-photo-widget-single .dz-preview {
	position: absolute;
	bottom: 0;
	top: 1rem;
	right: 0;
	left: 0;
	margin: auto;
}
.dz-message-container .drg {
	display: none;
}
.dz-drag-hover .drg {
	display: inline-block;
}
.dz-drag-hover .not-drg {
	display: none;
}
@media screen and (min-width: 40em) {
	.dz-message-container.rounded {
		padding: 0 2rem;
		width: auto;
	}
	.dz-message-container.rounded span {
		font-size: 1.2rem;
	}
	.dz-message-container.rounded .fi-photo {
	    font-size: 3rem;
	    margin-right: .5rem;
	    display: inline-block;
	}
}
.dz-reveal .dz-message {
	color: #f07b54;
	text-align: center;
	min-height: 10rem;
	padding: 2rem 0;
	background-color: #fff;
}
.dz-reveal .dz-message .fi-photo {
	color: #f07b54;
    font-size: 8rem;
    margin-right: 0;
    line-height: 0;
    display: block;
}


/*********************************************
*********** IMAGE EFFECTS *******************
* http://zurb.com/building-blocks/image-hover-effects
************************************************/
.saui-thumbnails > .column {
	margin: 0 0 1.875rem;
	text-align: center;
}
.image-wrapper .button-group {
	position: absolute;
	bottom: 0;
	left: 0;	
	margin: 0;
}
.image-wrapper .button-group.at-top {
	bottom: auto;
	top: 0;
}
.image-wrapper .button-group .button {
	padding: .85em 1em;
}
.saui-thumbnails .close-button {
	color: #fff;
	padding: 0 .25rem;
	background-color: rgba(0,0,0, .6);
	top: 0;
	right: 0;
}
.saui-thumbnails .close-button:hover {
	background-color: rgba(0,0,0, .9);
}
.image-wrapper {
  border: 0;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  text-align: center; 
}
.image-wrapper.text-center {
	width: 100%;
}

.image-overlay-content {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
}
.image-overlay-content a {
	pointer-events: auto;	/* revert back to default pointer events for all links on overlay */
}
.showtools .image-overlay-content {
	display: block;
}

.overlay-showtools.image-wrapper {
	overflow: visible; /* to allow outline to show around image */
}
.overlay-showtools .button-group {
	opacity: 0;
	margin: .25rem;
}
.overlay-showtools:hover .button-group {
	opacity: 1;
	transition: all 0.4s ease-in-out .5s;
}
.overlay-showtools img {
	outline: 1px solid transparent;
}
.overlay-showtools:hover img {
	outline: 1px solid rgb(200,200,200);
	transition: all 0.4s ease-in-out .8s;
}

/*.image-wrapper .skip {
	position: absolute;
	right: 2%;
	bottom: 0;
}*/
.overlay-fade-in img {
  transition: all 0.2s linear; }
.overlay-fade-in:hover .image-overlay-content {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.4);
  transition: all 0.4s ease-in-out .3s; }
.overlay-fade-in .button {
    background-color: rgba(240,123,84, .6);
}
.overlay-fade-in:hover .button {
    background-color: rgba(240,123,84, .8);
}
.overlay-fade-in .button:hover {
    background-color: rgba(240,123,84, 1);
}
.overlay-fade-in:hover img {
  transform: scale(1.2); }
.overlay-fade-in:hover .image-overlay-content {
  opacity: 1; }

.image-wrapper .button.large-icon {
    font-size: 1.8rem;
    padding: 0.1rem 0.3rem;
}
.image-wrapper .button.large-icon.is-html-entity {
    font-size: 1.83rem;
}

/* customize image wrapper tools for touch */
[data-whatinput="touch"] .image-wrapper {
}
[data-whatinput="touch"] .overlay-fade-in .button {
    background-color: rgba(240,123,84, 1);
}
[data-whatinput="touch"] .image-overlay-content {
	opacity: 1;
}

/************ SPIN KIT ***********/
#saui-sk-body-wrapper {
	/* this is shown whenever a pjax/ajax request is needed, takes up the whole page */
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2020;
}
.saui-sk-circle-wrapper {
    background-color: rgba(63, 74, 89, .9);
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 100px;
}
.saui-sk-circle {
  margin: auto;
  width: 40px;
  height: 40px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
}
.saui-sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.saui-sk-circle .sk-child:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #f07b54;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
          animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.saui-sk-circle .saui-sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg); }
.saui-sk-circle .saui-sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg); }
.saui-sk-circle .saui-sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg); }
.saui-sk-circle .saui-sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg); }
.saui-sk-circle .saui-sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg); }
.saui-sk-circle .saui-sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg); }
.saui-sk-circle .saui-sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg); }
.saui-sk-circle .saui-sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg); }
.saui-sk-circle .saui-sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg); }
.saui-sk-circle .saui-sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); }
.saui-sk-circle .saui-sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); }
.saui-sk-circle .saui-sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; }
.saui-sk-circle .saui-sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; }
.saui-sk-circle .saui-sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; }
.saui-sk-circle .saui-sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; }
.saui-sk-circle .saui-sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; }
.saui-sk-circle .saui-sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; }
.saui-sk-circle .saui-sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; }
.saui-sk-circle .saui-sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s; }
.saui-sk-circle .saui-sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s; }
.saui-sk-circle .saui-sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s; }
.saui-sk-circle .saui-sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s; }

@-webkit-keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

/************************************
****** SORTABLE TWEAKS *************
***************************************/
body.dragging, body.dragging * {
  cursor: move !important;
}

.dragged {
  position: absolute;
  opacity: 0.5;
  z-index: 2000;
  top: 0;
  transform: translate(-50%, -50%);
}


/****************************************
********* CHARTJS TWEAKS *******
***************************************/
.chartjscanvas {
	min-height: 20rem;	
}
.chartjscanvas canvas {
	display: block;	
}
.chartjstable-table-container {
    overflow-y: auto;
    margin-bottom: 1rem;
}

/************************************
****** FOUNDATION TWEAKS *************
***************************************/
.round .switch-paddle {
	width: 5rem;
	border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
}
.round input:checked ~ .switch-paddle::after {
    left: 3.25rem;
}
.round .switch-paddle::after {
	border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
}
.round .switch-active {
	left: 15%;
}
/* mini - words only */
.mini .switch-paddle {
	font-size: 0.5rem;
    font-weight: normal;
    height: 1.4rem;
    line-height: 1.4rem;
    text-transform: uppercase;
    width: 1.4rem;
}
.mini .switch-paddle::after {
	display: none;
}
.mini .switch-inactive, 
.mini .switch-active {
	right: 0;
	left: 0;
	text-align: center;
	margin: auto;
}
/* green and red for published */
.attention .switch-paddle {
	background: #88132A none repeat scroll 0 0;
}
.attention input:checked ~ .switch-paddle {
	background: #367156 none repeat scroll 0 0;
}
/* additional button colors */
.button.green {
	background-color: #367156;
    color: #fff;
}
.button.green:hover, .button.green:focus {
    background-color: #2B5A45;
    color: #fff;
}
.button.red {
	background-color: #88132A;
    color: #fff;
}
.button.red:hover, .button.red:focus {
    background-color: #6A0A1D;
    color: #fff;
}
.button.orange,
.orange .button {
	background-color: #F07B54;
    color: #fff;
}
.button.orange:hover, .button.orange:focus,
.orange .button:hover, .orange .button:focus {
    background-color: #D75E36;
    color: #fff;
}
.button.cancel {
	background-color: #CACACA;
    color: #555;
}
.button.cancel:hover, .button.cancel:focus {
    background-color: #8A8A8A;
    color: #ddd;
}
div#flash-message {
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: .03rem;
    position: fixed;
    right: 0;
    left: 0;
    top: 10px;
    width: auto;
    display: inline-block;
    z-index: 55550001;
    text-align: center;
    pointer-events: none;
}
div#flash-message .fm-target {
	display: inline-block;
	margin: 0 auto;
	background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #00107a;
    color: #00107a;
	padding: 20px 30px 20px 40px;
	-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.44);
	-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.44);
	box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.44);
	pointer-events: all;
}
div#flash-message.success .fm-target {
	background-image: url(/avcore/img/icon-ok.png);
	background-position: 10px center;
	background-repeat: no-repeat;
	/*border-color: #4A9C42;
	color: #4A9C42;*/
}
div#flash-message.error .fm-target {
	background-image: url(/avcore/img/icon-fail.png);
	background-position: 10px center;
	background-repeat: no-repeat;
	border: 2px solid rgb(223,62,12);
	color: rgb(223,62,12);
	-webkit-box-shadow: 0 0px 30px 0px rgba(223, 62, 12, 0.44);
	-moz-box-shadow: 0 0px 30px 0px rgba(223, 62, 12, 0.44);
	box-shadow: 0 0px 30px 0px rgba(223, 62, 12, 0.44);
}
.pagination .disabled a {
	cursor: not-allowed;	/* cake tags the li as disabled, we need the a for foundation */
}

/*******************************************************
****** FANCY FORMS
********************************************************/
.saui-fancy-form div.input {
	padding: 1rem 0;
}

.saui-fancy-form label {
	font-size: 1.4rem;
	line-height: 1.2;
	padding: 0;
}

.saui-fancy-form label .input-label {
    display: inline;
    float: left;
    padding: 0 0 .5rem 0;
}

@media screen and (min-width: 40em) {
	.saui-fancy-form .input.text input:first-child,
	.saui-fancy-form .input textarea:first-child,
	.saui-fancy-form .input select:first-child {
		margin-top: .5rem; /* a little top padding for the inputs */
	}
}

/*** RADIO BUTTONS ***/

.saui-fancy-form .input.radio:not(.radio-grouped) > label,
.saui-fancy-form .input.radio-grouped .input-options > label {
	padding: .5rem .5rem 1rem 3rem;
	position: relative;
	line-height: 1.4;
	font-size: 1rem;
	display: block;
	cursor: pointer;
}

.saui-fancy-form .input.radio-grouped > label,
.saui-fancy-form .input.radio:not(.radio-grouped) > label:first-child
 {
	/* header for cakephp radio groups */
	padding: 0 0 .5rem 0;
	font-size: 1.4rem;
	line-height: 1.2;
}

/*** CHECKBOX MULTIPLES ***/

.saui-fancy-form .input.multicheckbox > label {
	font-size: 1.4rem;
	line-height: 1.2;
	padding: 0 0 0.5rem 0;
}

.saui-fancy-form .input.multicheckbox .checkbox label {
	padding: .5rem .5rem 1rem 3rem;
	position: relative;
	line-height: 1.4;
	display: block;
	cursor: pointer;
}


/*** 
**** Styling fancy checkbox and radios
***/

.saui-fancy-form .input.radio label > span,
.saui-fancy-form .input.multicheckbox .checkbox label > span  {
	font-size: 1.05rem;
}
.saui-fancy-form .small.input.radio label > span,
.saui-fancy-form .small.input.multicheckbox .checkbox label > span  {
	font-size: .85rem;
}
.saui-fancy-form .input.radio label > span::before,
.saui-fancy-form .input.multicheckbox .checkbox label > span::before {
	font-size: 1.65rem;
}


.saui-fancy-form .input.radio [type="radio"],
.saui-fancy-form .input.multicheckbox .checkbox [type="checkbox"] {
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px;
  margin: -1px; 
  overflow: hidden; 
  padding: 0; 
  position: absolute; 
  width: 1px;
}

/* One radio button per line */

.saui-fancy-form .input.radio [type="radio"] + span,
.saui-fancy-form .input.multicheckbox .checkbox  [type="checkbox"] + span {
  display: block;
  padding: 1rem;
  background-color: rgba(241,177,72, .04);
  border: 2px dotted rgba(16,84,177, .15);
}

/* the basic, unchecked style */
.saui-fancy-form .input.radio [type="radio"] + span:before,
.saui-fancy-form .input.multicheckbox .checkbox  [type="checkbox"] + span:before {
  content: '';
  display: inline;
  float: left;
  width: 1em;
  height: 1em;
  vertical-align: -0.25em;
  border-radius: 1em;
  border: 0.125em solid #fff;
  box-shadow: 0 0 0 0.15em rgba(0,0,0,.18);
  transition: 0.5s ease all;
  position: absolute;
  left: .25rem;
  top: -.25rem;
  bottom: 0;
  margin: auto;
}
.saui-fancy-form .input.multicheckbox .checkbox  [type="checkbox"] + span:before {
	border-radius: .1em;
}
.saui-fancy-form .input.radio [type="radio"]:hover + span,
.saui-fancy-form .input.multicheckbox .checkbox  [type="checkbox"]:hover + span {
	background-color: rgba(241,177,72, .10);
	border: 2px dotted rgba(241,177,72, .3);
}
.saui-fancy-form .input.radio [type="radio"]:checked + span,
.saui-fancy-form .input.multicheckbox .checkbox  [type="checkbox"]:checked + span {
	background-color: rgba(241,177,72, .13);
	border: 2px dotted rgb(241,177,72);
}

/* the checked style using the :checked pseudo class for radio buttons */
.saui-fancy-form .input.radio [type="radio"]:checked + span:before,
.saui-fancy-form .input.multicheckbox .checkbox  [type="checkbox"]:checked + span:before {
  background: rgb(241,177,72);
  box-shadow: 0 0 0 0.25em rgb(16,84,177);
  top: -.4em;
}

/* the basic, unchecked style */
.saui-fancy-form .input.multicheckbox .checkbox  [type="checkbox"] + span:before {
  color: rgb(241,177,72);
}

/* the checked style using the :checked pseudo class */
.saui-fancy-form .input.multicheckbox .checkbox  [type="checkbox"]:checked + span:before {
  background: transparent;
  font-family: "foundation-icons";
  content: "\f126";
  line-height: .8;
  text-align: center;
}

/* never forget focus styling */
.saui-fancy-form .input.radio [type="radio"]:focus + span:after,
.saui-fancy-form .input.multicheckbox .checkbox  [type="checkbox"]:focus + span:after {
  content: '\0020\2190';
  float: right;
  font-size: 1.5em;
  line-height: 0.8;
}

/*** LABEL STYLING / GRID BOX ****/
@media screen and (min-width: 40em) {
	.saui-fancy-form .input.thirds > label {
	    display: inline;
	    float: left;
	    margin-right: 3%;
	    width: 30%;
	}
	.saui-fancy-form .input.thirds .checkbox {
	    display: inline;
	    float: left;
	    margin-right: 3%;
	    width: 30%;
	}
	.saui-fancy-form .input.thirds > label:first-child {
		display: block;
		width: 100%;
	}
	
	.saui-fancy-form .input.half > label {
	    display: inline;
	    float: left;
	    margin-right: 3%;
	    width: 47%;
	}
	.saui-fancy-form .input.half .checkbox {
	    display: inline;
	    float: left;
	    margin-right: 3%;
	    width: 47%;
	}
	
	.saui-fancy-form .input.half > label:first-child {
		display: block;
		width: 100%;
	}
	
	.saui-fancy-form .input.two-cols .input-options {
		-webkit-columns: 300px 2;
  		-moz-columns: 300px 2;
        columns: 300px 2;
	}
	
	.saui-fancy-form .input.three-cols .input-options {
		-webkit-columns: 200px 3;
   		-moz-columns: 200px 3;
        columns: 200px 3;
	}
	
	.saui-fancy-form .input.two-cols .input-options legend,
	.saui-fancy-form .input.three-cols .input-options legend {
		display: none;
	}
	
	.saui-fancy-form .input.two-cols .input-options .checkbox,
	.saui-fancy-form .input.three-cols .input-options .checkbox,
	.saui-fancy-form .input.radio-grouped .input-options > label {
		display: inline-block; /* so columns break appropriately */
		width: 100%;
	}
	
	.saui-fancy-form .input.half label > span div.saui-othertext,
	.saui-fancy-form .input.thirds label > span div.saui-othertext,
	.saui-fancy-form .input.two-cols label > span div.saui-othertext,
	.saui-fancy-form .input.three-cols label > span div.saui-othertext {
		/* no margin on inputs that will break to new line */
		margin-left: 0;
		display: block;
	}
	
}