/*
	Editor stylesheet
	*****************
	Includes responsive
*/

h2 > span {
	color: #555;
}

h4.tip {
	color: #006699;
}

.well {
	border-color: #ddd;
	border-radius: 3px;
}

.label {
	font-weight: normal;
	text-decoration: none;
	margin: 0 1ex;
	padding: 3px 9px;
	border-radius: 15px;	/* Needs to be bigger than height, doesn't matter how much bigger */
	border: none;
}

.label.label-info:not(.plain):hover {
	background-color: #006699;
	cursor: pointer; 		/* So that <span> can be used instead of <a> (<a> causes style conflicts) */
}

/* Alignment of elements in radiobutton.xhtml */
.radio.with-long-text input[type="radio"], 
.checkbox.with-long-text input[type="checkbox"] {
	margin-right: 0;
}

.radio.with-long-text p, 
.checkbox.with-long-text p,
.radio.with-long-text span {
	margin-left: 5px;
}

.editor-panel {
	margin-top: 15px;
	margin-left: 0;
	/* background-color: #fcfcfc; */
	border: 1px solid #dddddd;
	border-radius: 3px;
	box-shadow: 0 0 2px 0 rgba(0,0,0,.05);
}

/* Enrollment, show white background */
/* .editor-panel.wizard-step {
	background: white;
} */

/* Remove default bootstrap padding, margin */
.editor-panel > [class*="span"] {
	margin: 0;
	padding: 20px 0;
}
		
/* Add right and left padding to columns in editor-panel */
.editor-panel > [class*="span"] > div:first-child {
	margin: 0;
	padding: 5px 20px;
}
		
/* 	Remove the right padding of the 
	last column in editor-panel.
 */
.editor-panel > [class*="span"]:last-child > div:first-child {
	margin: 0;
	padding-right: 0;
}
		
.editor-panel .sidebar {
	color: #555555;
	background-repeat:no-repeat;
	background-position: -20px -30px;
	padding: 5px 0 5px 20px;
}

.editor-panel .sidebar h4 {
	font-weight: bold;
}

.sidebar i#more-note {
	background: url("/National_Library/oe_/https://fundrazr.com/img/quickstart/more-note_61x54.png") no-repeat scroll 0 0 transparent;
    bottom: -10px;
    display: inline-block;
    height: 54px;
    margin: 0 -27px;
    position: relative;
    width: 61px;
    z-index: 10;
}

.sidebar span.handdrawn-underline {
	padding-bottom: .5em;
	background: url("/National_Library/oe_/https://fundrazr.com/img/quickstart/underline_106x9.png") no-repeat scroll 0 0 transparent;
    background-position: center bottom;
    background-size: 100% 9px;
}
		
.editor-panel .divider-right {
	border-right: 1px solid #ddd;
}
		
.editor-panel .divider-left {
	border-left: 1px solid #ddd;
}

.wizard-step .control-label {
	font-size: 16px; /* was 18px */
	color: #454545;
}

.editor-panel .control-group, 
.editor-modal .control-group {
	margin-bottom: 0;
	padding: 30px 25px; 					/* Layout with tabs on left requires padding on T, B, L, R. */
	border-bottom: 1px solid #eee;
}

/*	 Provide visual feedback on the section in use.
	 Hidden on tablet and smaller.
 */
/* CS: 2016-11-24 - Disabled until all problems have been resolved
  Keep in mind that editor.css is included on quite a few admin pages */
/*
/*
.editor-panel .control-group:hover {
	box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1) inset;
	transition: box-shadow 0.5s ease-in-out 0s;
}
*/
		
.editor-panel .control-group .nav-pills > li > a {
	margin-bottom: 0;
}

/* Master toggle control-group */
#community-master.control-group.on,
.control-group[data-dependent-on="community"],
#datacollection-master.control-group.on,
.control-group.datacollection-option,
#subcampaigns-master.control-group.on,
.control-group[data-dependent-on="subcampaigns"] {
	border-bottom: none;
	box-shadow: 5px 0 0 0 #eee inset;
}

.control-group.datacollection-option {
	padding-top: 15px;
}

.control-group[data-dependent-on="subcampaigns"] {
	padding-top: 5px;
}

/* Adjust the margin on help blocks */
.control-group[data-dependent-on="subcampaigns"] .help-block {
	margin-top: 10px !important;
}

.control-group[data-dependent-on="community"]:last-child,
.control-group[data-dependent-on="subcampaigns"]:last-child {
	border-bottom: 1px solid #ddd !important;
}

.control-group[data-dependent-on="community"] label,
.control-group[data-dependent-on="subcampaigns"] label,
.control-group.datacollection-option label,
.control-group.datacollection-option > .help-block,
#customfields-container {
	font-weight: normal;
	padding-left: 19px;			/* Left padding must be removed from .help-block and #customfields-container on mobile (< 480px) */
}

#customfields-container {
	padding-left: 0;
	margin-left: 19px; 
	overflow-x: auto; 
	/* box-shadow: inset 0 0 1px 0 rgba(0,0,0,.25); */
}

.control-group.h-divider[data-dependent-on='community'] {
	padding-top: 0;
	padding-bottom: 0;
}

table#datacollection-custom-fields {
	/* table-layout: fixed; */
}

table#datacollection-custom-fields th, 
table#datacollection-custom-fields td {
	font-weight: normal;
	vertical-align: middle;	
	/* padding: 10px 15px 10px 0; */
	padding: 10px 5px;
}

table#datacollection-custom-fields th:first-child, 
table#datacollection-custom-fields td:first-child {
	padding-left: 15px;
}

table#datacollection-custom-fields th:last-child, 
table#datacollection-custom-fields td:last-child {
	padding-right: 15px;
}

table#datacollection-custom-fields th {
	font-weight: bold;
	/* border-bottom: 2px solid #333; */
}

table#datacollection-custom-fields tr:nth-of-type(1) td {
	/* border-top: none !important; */
	border-top-width: 2px;
}

tr#datacollection-add-customfield-row > td {
	/* background-color: #f7f7f7; */
}

table#datacollection-custom-fields .customfield-label {
	display: inline-block;
	max-width: 160px;
	word-break: break-all;
}

table#datacollection-custom-fields .customfield-id {
	display: inline-block;
	max-width: 160px;
	word-break: break-all;
}

.editor-panel .form-actions {
    background-color: inherit;
    margin: 0;
    padding: 20px 0 0;
}

.editor-panel .help-block,
.editor-panel .highlight {
    margin-top: 15px !important;
}

.editor-panel .help-block:first-child {
	margin-top: 5px !important;
}

.editor-panel ul.help-block,
.editor-panel ol.help-block {
	margin-left: 15px;
}

.editor-panel .help-block h4 {
	font-size: 17px;
	color: #333;
	margin-bottom: 5px;
}

.editor-panel .help-block ul li, 
.editor-panel .help-block ol li {
	line-height: inherit;
	/* margin-bottom: 5px; */
	margin-bottom: .5em;
}

.editor-panel .help-block .help-block-title {
	display: block;
	color: #333; 
	font-size: 1.1em;
	font-weight: bold; 
	margin: 10px 0;
}


/* Nav & tabs */
/**************/

#navigation {
	/* position: absolute;
	top: 0;
	left: 0;
	bottom: 0; */
	width: 200px; /* Must be compatible width of #tab-panes defined below */
	margin: 0 -1px 0 0;
}


/* Modified Bootstrap styles for tabs */

.tabs-left > .nav-tabs {
	border-right: 1px solid #ddd;
}

.tabs-left > .nav-tabs > li > a,
.tabs-left > .nav-tabs > li > a:hover {
	margin-bottom: 0;
	margin-right: -1px;
	padding-top: 15px;
	padding-bottom: 15px;
	border-left: none;
    border-right: none;
    border-top: none;
	border-bottom: 1px solid #ddd;
	border-radius: 0 0 0 0;
	outline: none;
}

.tabs-left > .nav-tabs > li > a:hover,
.nav-pills > li > a:hover {
	color: white;
	background-color: #29abe2;
}
.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.nav-pills .active > a,
.nav-pills .active > a:hover {
	color: white;
	background-color: #0088cc;
}

#navigation li.invalid a {
	padding-right: 20px;
	background-image: url("/National_Library/oe_/https://fundrazr.com/img/icons/red-exclamation-dot_18x18.png");
    background-position: 95% center;
    background-repeat: no-repeat;
}

#navigation li.warning a {
	padding-right: 20px;
	background-image: url("/National_Library/oe_/https://fundrazr.com/img/icons/orange-alert-triangle_18x18.png");
    background-position: 95% center;
    background-repeat: no-repeat;
}

/* Info in tabs */
/****************/

#navigation li i.icon-ok {
	float: right;
}

#navigation li .tab-info,
button .tab-info {
	/* float: right; */
	opacity: .6;
}

#navigation li .tab-info:before {
	content: " (";
}

#navigation li .tab-info:after {
	content: ")";
}


/* Sets left offset of tab content - required when #navigation set to absolute position */
#tab-panes {
	margin-bottom: 1px;	/* Hack to show bottom border */
	background-color: white;
	border-left: 1px solid #DDDDDD;
	/* box-shadow: -1px 0 2px 0 rgba(0, 0, 0, 0.1); */
	box-shadow: -1px 0 2px 0 rgba(0, 0, 0, 0.05);
}


/* ----- Upload-box ----- */

.upload-box div.margin {
	margin-top: 5px;
}


/* ----- Basics aka Story ----- */


/* ----- Theme & background image ----- */

#theme-select {
	width: 330px;
}

.theme-swatch {
	float: left;
	width: 40px;
	height: 40px;
	margin: 0 5px 5px 0;
	box-shadow: 0 0 1px 1px rgba(0,0,0,.15) inset;
}


.theme-swatch.selected,
.sp-preview-inner.selected {
	background-image: url('/National_Library/oe_/https://fundrazr.com/img/editor/black-tick-dot_transparent_26x26.png');
	background-position: center center;
	background-repeat: no-repeat;
}


/* ----- Image, Snapshot & Video ----- */

/*	Also applied to snapshot, video, org logo, 
	perks, background image, and tax receipt 
	signature.
 */

/* .image-preview is a wrapper which contains the <img> */
.image-preview {
	position: relative;
	
	width: 320px;					/* Explicit height is required to center button rendered on top of image in quickstart. */
	max-width: 320px;				/* Prevents excessive image size in editor. */
    
    /* height: 180px; */			/* Causes issue with video preview. */
	margin: 10px 10px 5px 0;
	background-color: #eee;
	border: 1px solid #ccc;
	border-radius: 3px;
	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05) inset;
	overflow: hidden; 				/* Required for bg image preview. */
}

/* 	Width-constrained preview
	Fits the image to the container width. 
	This works for picture, snapshot, video, 
	logo, background image and perks but NOT 
	tax receipt signature.
 */
.image-preview img {
	display: block;
	height: auto;
   	width: 100%;
   	margin: 0 auto;
}

/* 	Height-constrained preview
	Fits the signature image to the container 
	height.
 */
.image-preview img#signature-preview-image {
	height: 100%;
   	width: auto;
}

#media-upload-progress img {
	display: inline;
	width: auto; /* To override width: 100% from .image-preview img */
	margin-right: 1ex;
}


/* 	Saved snapshot image is 320x320 full-size.
	A snapshot preview can also be generated from an uploaded campaign image or an added video.
	The preview is a background-image scaled to fit.
 */
.snapshot-image-preview {
	position: relative;
	width: 160px;
	height: 160px;
	margin: 10px 10px 10px 0;
	border: 1px solid #DDDDDD;
	border-radius: 3px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* 	IE8 and lower:
		-ms-behavior fixes background-size by creating a child img inside a child div.
		It also sets visibility, position and z-index of child img.
		N.B. URL for .htc is relative to root, not relative to css file.  */
	-ms-behavior: url(/National_Library/oe_/https://fundrazr.com/style/backgroundsize.min.htc);
	/* overflow: hidden; */
}

/* NOTE: Conflicting declarations for img commented out in reset.less. */
.snapshot-image-preview img {
	/* max-width: none; */
	/* visibility: visible !important; */
}


#media-no-image, 
#gallery-no-image {
	position: absolute;
	display: block;
	top: 42%;
	width: 100%;
	font-size: 20px;
	text-align: center;
	color: #fff;
}


/* 	Preview of campaign bg image is aligned top left, 
	stretched horizontally to fit -- same as actual bg. 
*/
.image-preview#theme-preview-bgimage-box img {
	width: 100%;
	height: auto;    
}

/* Same rule required in create_organization.css */
.crop-wrapper {
	display: inline-block;
	background-color: #eeeeee;
	border: 1px solid #dddddd;
	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05) inset;
}

#media-crop-preview, 
#gallery-crop-preview, 
#signature-crop-preview {
	max-width: inherit;
}

#media-video-wrapper {
	margin-top: 20px;
}

#media-video-preview {
	margin-bottom: 0;
	border-radius: 3px 3px 0 0; 
}

/* New 20160915 */
#media-video-preview {
	width: 320px;
	margin-top: 25px;
	border: 1px solid #eee;
	border-radius: none;
	box-sizing: content-box;
}

/* Play button based on .carousel-play */
#media-video-preview .vjs-default-skin .vjs-big-play-button {
	position: absolute;
	bottom: 50%;
	right: 50%;
	height: 50px;
	width: 50px;
	color: white;
	font-size: 30px;
	font-weight: 100;
	line-height: 48px;
	text-align: center;
	margin: -30px;
	background-color: black;
	background-color: rgba(0, 0, 0, .66);
	border-radius: 50%;
	border: 5px solid white;
	box-shadow: 0 0 3px 0 rgba(0,0,0,.3);
	box-sizing: content-box !important;
}

#media-video-preview .vjs-default-skin .vjs-big-play-button:hover {
	text-decoration: none;
    background-color: red;
}

#media-video-preview .vjs-default-skin .vjs-big-play-button::before {
	font-family: fontAwesome;
	content: "\f04b";
	margin-right: -0.18em;
	left: .10em;
	line-height: 50px;
	text-shadow: none;
}

#media-video-stats {
	width: 320px;
	margin-top: 0;
	border-top: 0;
	border-radius: 0 0 3px 3px;
}

#gallery-video-stats {
	border-top: 0;
	border-radius: 0 0 3px 3px;
}

#media-video-stats ul, 
#gallery-video-stats ul {
	list-style-type: none;
	margin: 0 0 10px 0;
}


/* ----- Funding ----- */

#payment-amounts li {
	float: left;
	font-size: 16px;
	padding: 12px 15px;
	margin: 0 10px 10px 0;
}

li.payment-amount {
	position: relative;
	min-width: 75px;
	font-weight: normal;
	text-align: center;
	text-shadow: none;
	border-radius: 2px;
	/*background-color: #666633;*/
	/* background-color: #0088cc; */
	
	color: #333333;
	background-color: white;
	border: 1px solid #CCCCCC;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* "Remove amount" buttons */
li.payment-amount a {
	position: absolute;
	top: 0;
	right: 2px;
	color: #dddddd;
	color: rgba(0,0,0,.2);
	line-height: 1em;
	cursor: pointer;
}

/* For 'alerts' style */
.account-validation {
	margin-top: 10px;
}

/* For 'help' style */
.account-validation.help-inline {
	margin-top: 5px;
}

#payment-amounts {
	list-style: none;
	margin: 0;
}

li.payment-amount span {
	cursor: pointer;
}

/* Remove the left float on newly added amounts */
li.payment-amount span.displayed-amount.left {
	float: none !important;
}

#payment-amounts .icon-remove {
	/*margin-left: 5px;*/
}

#payment-add-amount input.amount {
	text-align: right;
	background-color: #fff;
}


/* ----- Descriptive amounts ----- */

#payment-amounts-type button {
	min-width: 10em;
}

/* 	Show an on/off indicator on 
	the active tab button.
	Hidden on landscape phone.
 */
#payment-amounts-type button.active .tab-info {
	display: inline;
}

/* The table */
#payment-descriptive-amounts {
	table-layout: fixed;
}

#payment-amounts li.preselected,
#payment-descriptive-amounts tr.preselected td {
	/* color: #fff;
	background-color: #29abe2;
	border-color: #0088CC; */
	background-color: #fdf8ba;
	border-color: #e7d604;
}

#payment-descriptive-amounts tr.preselected td {
	/* border-color: transparent; */
}

#payment-descriptive-amounts tr.preselected td:first-child {
	border-radius: 3px 0 0 3px;
}

#payment-descriptive-amounts tr.preselected td:last-child {
	border-radius: 0 3px 3px 0;
}

#payment-descriptive-amounts :not(tfoot) tr:first-child td {
	border-top-width: 2px;
}

#payment-descriptive-amounts tr:last-child td {
	border-bottom: none;
}

#payment-descriptive-amounts th,
#payment-descriptive-amounts td {
	vertical-align: middle;
	padding: 10px 5px;
}

#payment-descriptive-amounts th:first-child,
#payment-descriptive-amounts td:first-child {
	width: 120px; 	/* Wide enough to contain input-small, which has width of 90px */
	padding-left: 15px;
}

#payment-descriptive-amounts th:last-child,
#payment-descriptive-amounts td:last-child {
	width: 3em; 	/* Wide enough to contain add/X controls */
	padding-right: 15px;
}

#payment-descriptive-amounts tbody td:hover {
	cursor: pointer;
}

#payment-descriptive-amounts tr.preselected a {
	/* color: #fff; */
}

/* Disable the add descriptive amount UI */
#payment-descriptive-amounts #add-amount-ui.disabled {
	opacity: .3;
	pointer-events: none;
}

/* Prevent outline from persisting in disabled UI */
#payment-descriptive-amounts #add-amount-ui.disabled #add-payment-amount {
	outline: none;
}


/* ----- Data collection ----- */

.btn-group button.active {
	background-color: #0088cc;
	color: #fff;
}


/* ----- Incentives aka perks, rewards ----- */

#reward-grid {
	padding-top: 0;
}

#reward-grid:empty {
	margin-top: -1px;
	padding: 0;
	border-bottom: none;
	border-top: 1px solid #eee;
	/* display: none; */
}

.reward {
	padding: 25px 0;
}

.reward:last-child {
	border-bottom: medium none;
	padding-bottom: 0;
}

/* Table layout with .info as 2nd column. */
.reward .image-box {
	display: table-cell;
	width: 120px;
	padding-left: 20px;
	padding-right: 20px;
}

/* 	Force the image to be contained in its parent.
	There must be an equivalent rule in payment.css.
 */
.reward .image-box .image-wrapper .image {
    width: inherit;
}

/* Table layout with .image-box as 1st column. */
.reward .info {
	display: table-cell;
	vertical-align: top;
	padding-right: 20px;
}

.reward .actions {
	margin-top: 10px;
}

.reward .featured {
	text-align: center;
	color: white;
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	padding: 2px 10px 3px;
	background-color: #71b8d0; /* #0088cc; */
}

/* Same definition required in activity.css */
.reward .label.featured {
	/* display: inline-block; */
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	margin: 0 0 5px;
	border-radius: 5px;
	border: 3px solid rgba(255,255,255,.6);
	box-shadow: 0 0 3px 0 rgba(11, 11, 111, 0.1);
}

#reward-preview-image-box {
	width: 75px;
	height: 75px;
	margin-top: 0;
	border: 1px solid #dddddd;
}

#reward-preview-image {
	width: 100%;
	height: 100%;
}

#edit-reward-dialog {
	/* background-color: white; */
}

#edit-reward-dialog .control-label {
	font-weight: bold;
}

#edit-reward-dialog hr {
	margin: 0 0 20px 0;
}

#edit-reward-dialog table th, 
#edit-reward-dialog table td {
	padding: 10px;
	border: none;
}

#edit-reward-dialog table th {
	vertical-align: bottom;
	border-bottom: 3px solid;
}

#edit-reward-dialog table td {
	vertical-align: middle;
}

#edit-reward-dialog table tr:first-child td {
}


/* ----- Sub-campaigns ----- */

.controls > .radio:first-child, 
.controls > .checkbox:first-child, 
.controls > ul:first-child {
	padding-top: 5px;
}

.control-group.with-divider {
	border-bottom: 1px solid #dddddd;
}

.control-group.with-divider + .control-group {
	padding-top: 30px;
}

.control-group.h-divider {
	padding-bottom: 20px;
}

.control-group.h-divider > div {
	border-top: 1px solid #eee;
}


/* ----- Buttons ----- */

.form-actions .btn,
.form-actions .btn-small,
.form-actions .btn-large {
	margin-left: 16px;
}

.btn.right + .btn.right {
	margin-right: 10px;
}

.btn.left + .btn.left {
	margin-left: 10px;
}


/* ----- Validation & Alerts ----- */

.validation-message {
	display: none;
}

/* Lists */
.editor-panel span.help-block ol,
.editor-panel span.help-block ul {
	margin-left: 15px;
}

/* Form validation error messages */
.alert.alert-error,
.alert.alert-success {
	margin: 15px 0 0;
	padding-right: 14px;
}

/* Special layout in .form-actions */
.editor-panel .form-actions .alert.alert-error,
.editor-modal .modal-footer .alert.alert-error,
.form-actions .alert.alert-error {
	margin: 0 0 15px;
}

.form-error {
	text-align: center;
}

.editor-panel .alert.alert-warning {
	margin: 15px 0 0;
	padding: 12px 12px 12px 40px;
	background-image: url("/National_Library/oe_/https://fundrazr.com/img/icons/orange-alert-triangle_18x18.png");
    background-position: 15px 15px;
    background-repeat: no-repeat;
}

.editor-panel .alert.alert-warning .message {
	font-weight: bold;
}

.editor-panel .alert-error ul li {
	margin-top: 5px;
}

.editor-panel .alert-error ul li:first-child {
	margin-top: 8px;
}



/* Tax Receipt Config */
#tax-control-group .controls {
	margin-bottom: 10px;
}

#tax-control-group .locked {
	color: #666666;
	overflow: hidden;
	padding-left: 14px;
	background: url('/National_Library/oe_/https://fundrazr.com/img/lock-grey_9x11.png') no-repeat;
	background-position: left center;
}

.crop-preview {
	margin: 20px 0;
}

#signature-preview-image {
	margin: 0;
}

.org-picture {
	float: left;
	width: 50px;
	height: 50px; 
	margin-right: 10px;
	border: 1px solid #dddddd;
}

/* Location picker */
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
	margin-bottom: 0;
}

.twitter-typeahead .tt-hint {
	width: 100%;
	height: 100%;
}

.tt-dropdown-menu {
	min-width: 320px;
	margin-top: 2px;
	padding: 5px 0;
	background-color: #fff;
	border: 1px solid #ccc;
	border: 1px solid rgba(0,0,0,.2);
	*border-right-width: 2px;
	*border-bottom-width: 2px;
	
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	
	-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
	-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
	box-shadow: 0 5px 10px rgba(0,0,0,.2);
	
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding;
	background-clip: padding-box;
}

.tt-suggestion {
	display: block;
	padding: 3px 20px;
}

.tt-suggestion.tt-is-under-cursor {
	color: #fff;
	background-color: #0081c2;
	background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
	background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
	background-image: -o-linear-gradient(top, #0088cc, #0077b3);
	background-image: linear-gradient(to bottom, #0088cc, #0077b3);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}

.tt-suggestion.tt-is-under-cursor a {
	color: #fff;
}

.tt-suggestion p {
	margin: 0;
	font-size: 14px; /* Required for typeahead input within button group */
}

/* 	Use to indicate a selected option 
	e.g. funding type in edit_payment.xhtml */
.btn.btn-selected {
	color: white;
	text-shadow: none;
	background: #0088cc; /* same as active tab */
	opacity: 1;
}

/* Edit rewards - incentive details */
#edit-reward-lock-panel {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	cursor: not-allowed;
}

.reward-details .show-on-details {
	display: block;
}

.show-on-details {
	display: none;
}

.reward-details .hide-on-details {
	display: none;
}

/* Edit rewards - modified appearance for form inputs */
#edit-reward-dialog.reward-details input, 
#edit-reward-dialog.reward-details select, 
#edit-reward-dialog.reward-details textarea {
	border-color: #dddddd;
	box-shadow: none;
	cursor: not-allowed;
}

#edit-reward-dialog.reward-details input[type="checkbox"] {
	opacity: .4;
}


/* ----- Responsive design ----- */

/* 	FIXME: rules below may conflict 
	with responsive-phone.css.
 */

/* 	Tablet, embed, small desktop
	Breakpoint width is unusual 
	because of left-floated editor 
	tabs and control labels.
 */
@media (max-width: 990px) {
	
	.form-horizontal .control-label {
		float: none !important;
		width: auto !important;
		margin-bottom: 10px !important;
		padding-left: 0 !important;
		overflow: hidden;
	}
	
	.form-horizontal .controls {
		margin-left: 0 !important;
	}
	
	/* 	Layout without tabs on left requires 
		padding on L, R to be removed.
	 */
	.editor-modal .control-group {
		padding: 15px 0 30px;
	}
	
	.form-horizontal .control-label:first-of-type, 
	.form-horizontal .control-group:first-of-type .control-label {
		margin-top: 0;
	}
	
	.editor-panel .control-label {
		overflow: hidden;
	}
	
	.editor-panel .control-label h4 {
		margin-bottom: 15px;
	}
	
	#add-reward {
		margin-bottom: 20px;
	}
	
}

/* Tablet */
@media (max-width: 759px) {
	/* Handled by rules for max-width 990px above. */
	/* CS: 2016-11-24 - Disabled until all problems have been resolved
	   Keep in mind that editor.css is included on quite a few admin pages */
	/*
	.editor-panel .control-group:hover {
		box-shadow: none;
		transition: none;
	}
	*/
}

/* TODO: Explain */
@media (min-width: 561px) and (max-width: 650px) {
	#basics-story-placeholder {
		top: 85px !important;
	}
}

@media (min-width: 463px) and (max-width: 560px) {
	#basics-story-placeholder {
		top: 115px !important;
	}
}

@media (min-width: 376px) and (max-width: 462px) {
	#basics-story-placeholder {
		top: 85px !important;
	}
}

@media (max-width: 375px) {
	#basics-story-placeholder {
		top: 115px !important;
	}
}

/* Landscape phone */
@media (max-width: 480px) {
	
	#tab-panes {
		box-shadow: none;
	}
	
	.editor-panel {
		margin-top: 0;
		background-color: transparent;
		border: 0 none;
		box-shadow: none;
	}
	
	/* Override the columns padding set both above,
	 * and in quickstart.css.
	 */
	.editor-panel > [class*="span"] > div:first-child {
		padding: 0 !important;
	}
	
	/* 	Layout without tabs on left requires 
		padding on L, R to be removed.
	 */
	.editor-panel .control-group,
	.editor-modal .control-group {
		padding: 25px 0;
	}
	
	.editor-panel .control-group:first-of-type,
	.editor-modal .control-group:first-of-type {
		padding-top: 0;
	}
	
	.form-horizontal .control-label {
		/* font-size: 18px; */
	}
	
	.control-group.datacollection-option > .help-block,
	#customfields-container {
		margin-left: 0; 			/* Overriden from above */
		padding-left: 0;			/* Overriden from above */
	}
	
	#customfields-container {
		border-radius: 2px;			/* Creates a h-scrollbar on mobile */
	}
	
	#shipping-locations-wrapper {
		width: auto;
		margin-bottom: -25px;		/* Offsets control-group padding ... */
		padding-botom: 25px;		/* ... And replaces it with padding here to 
									   make this element more easily scrollable. */
		overflow-x: auto;
	}
	
	table#shipping-locations {
		position: relative;
	}
	
	#payment-amounts-type button {
		width: 50%;
		min-width: initial;
	}
	
	#payment-amounts-type button.active .tab-info {
		display: none;
	}
}


/* ----- END ----- */