/* =============================================================================
 * Basic Layout
 * ========================================================================== */

/* =============================================================================
 * 	-- Typografy and basic elements
 * ========================================================================== */

figure{margin-bottom: 20px;}
img {max-width: 100%; height: auto;}

.btn{
	padding-left: 40px; padding-right: 40px;
}
.btn-lg{
	padding: 16px 16px;
}
.btn-lg .fa{padding-left: 8px;}

.link-button{
	color: #007bff;
	cursor: pointer;
}
.link-button:hover{
	color: #0056B5;
    text-decoration: underline;
}

/* =============================================================================
 * 	-- Content elements
 * ========================================================================== */

.donation, .insamlingskontroll, .disclaimer, .branding{
	text-align: center;
}
.disclaimer{
	font-size: 14px;
	color: rgb(120,120,120);
}
.branding{
	font-size: 12px;
	color: rgb(160,160,160);
}
.spacer{
	width: 80%;
    height: 1px;
    margin: 30px auto 30px auto;
    background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(left, rgb(255,255,255) 0%, rgb(225,225,235) 50%, rgb(255,255,255) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgb(255,255,255) 0%,rgb(225,225,235) 50%,rgb(255,255,255) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgb(255,255,255) 0%,rgb(225,225,235) 50%,rgb(255,255,255) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.tooltip-inner{
	max-width: 460px;
}
#Panel_Loading .fa {
    color: #6c757d;
}
#Panel_Error .fa {
    color: #ffc107;
}
#pageflow_body > .alert {
	max-width: 80%;
	margin: 0 auto 1.5rem auto;
}

/* =============================================================================
 * 	-- Forms
 * ========================================================================== */

 /**		-- Basic layout
-------------------------------------------------- **/
.form-section{
	margin-bottom: 30px;
}
.form-group label.minimizing-label{
	position: absolute; top: 12px; left: 28px;
	font-weight: normal;
	color: rgb(120,120,120);
	transition: 0.2s ease all;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"]
{
	padding-top: 18px;
}
.form-group input[type="text"]:disabled,
.form-group input[type="email"]:disabled,
.form-group input[type="tel"]:disabled,
.form-group input[type="number"]:disabled{
	background: #f5f5f5;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #ccc;
	border-radius: 0;
	box-shadow: none;
}
.form-group label.minimizing-label.minimized{
  top: 2px;
  font-size: 11px;
  opacity: 1;
}

.help-block{font-size: 12px; margin-bottom: 5px;}
.radio-inline+.radio-inline, .checkbox-inline+.checkbox-inline{
	margin-left: 0;
}
.radio-inline, .checkbox-inline{
	margin-right: 10px;
}
.form-section label{
	font-weight: normal;
}
.form-control.is-invalid, .form-control:invalid {
    border-color: #dc3545;
    background-color: #F8DBDB !important;
}
.label-readonly{
	margin-bottom: 0;
	font-size: 14px;
	color: rgb(120,120,120);
}
.form-group .form-control-plaintext{
	padding-top: 0!important;
}

 /**		-- Contact details
-------------------------------------------------- **/
.contact-ready{
	position: relative;
	color: rgb(120,120,120);
	display: none;
}
button#editContact{
	display: inline-block;
	position: absolute; top: 10px; right: 10px;
	color: #007bff;
	font-weight: bold;
	border: 0;
	background: transparent;
}
button#editContact:hover{
	color: #0056b3;
    text-decoration: underline;
}
button#edit-contact:focus{
	outline: none;
}
button#cancelEdit{
	display: none;
	margin-left: 4px;
}
.contact-input{
	display: none;
}
.contact-edit{
/* 	display: none; */
}


 /**		-- Donation
-------------------------------------------------- **/
/* Donation amount */
.min-amount{display: none;}

ul.donation-amount-options{
	font-size: 0;
	width: 100%;
	list-style: none;
	padding: 0;
}
ul.donation-amount-options li{
	font-size: 16px;
	display: inline-block;
	width:25%;
	background: rgb(250,250,250);
	border: 1px solid rgb(225,225,225);
	border-right: 0;
}
ul.donation-amount-options li:hover{
}
ul.donation-amount-options li.first{
	border-radius: 3px 0 0 3px;
	-moz-border-radius: 3px 0 0 3px;
	-webkit-border-radius: 3px 0 0 3px;
}

ul.donation-amount-options li.last{
	border-right: 1px solid #ccc;
	border-radius: 0 3px 3px 0;
	-moz-border-radius: 0 3px 3px 0;
	-webkit-border-radius: 0 3px 3px 0;
}
ul.donation-amount-options li.active{
	background: rgb(245,245,245);
}
ul.donation-amount-options li label{
	width: 100%;
	padding-top: 15px;
	padding-bottom: 15px;
	margin-bottom: 0;
}
ul.donation-amount-options li label span{
	display: block;
}
ul.donation-amount-options li label:hover{
	cursor: pointer;
}
ul.donation-amount-options li input[type="radio"]{
}
.donation-amount{
	position: relative;
	margin-bottom: 20px;
	font-size: 0;
}
.donation-amount-input{
	display: inline-block;
	font-size: 56px;
	text-align: center;
	font-weight: bold;
	padding: 0; margin: 0;
	border: 0;
	background: transparent;
}
.donation-amount-input:focus{outline: none;}
.donation-amount-currency{
	display: inline-block;
	font-size: 46px;
}

.donation-cause .form-group{
	margin-bottom: 0;
}
.donation-cause-choose{
	display: none;
}

 /**		-- Membership
-------------------------------------------------- **/
/*
.membership-options{
	opacity: 0.2;
}
*/

 /**		-- Payment
-------------------------------------------------- **/
/*
.payment{
	opacity: 0.2;
}
*/
.payment-options-accordion{
	margin-bottom: 30px;
}
.payment-options .card{
	margin-bottom: -5px;
	box-shadow: none;
	border-bottom-width: 0;
	border-radius: 0;
}
.payment-options .card.first{
	border-radius: 4px 4px 0 0;
}
.payment-options .card.last{
	border-radius: 0 0 4px 4px;
	border-width: 1px;
}
.payment-options .card-header{
	padding: 0;
	background: rgb(250,250,250);
	background: #fff;
}
.payment-options .card-header.active, .payment-options .card-header:hover{
	background: rgb(245,245,245);
}
.payment-options .card-title{
	margin-bottom: 0;
}
.payment-options .card-title label{
	width: 100%;
	padding: 15px 15px 11px 15px;
	font-weight: bold;
}
.payment-options .card-title label:hover{
	cursor: pointer;
}
.payment-options .card-title label:after{
	display: inline-block;
	font-family: "fontAwesome";
	float: right;
	font-size: 20px; line-height: 20px;
	color: rgb(140,140,140);
}
.payment-options .payment-option-card .card-title > label:after{content: "\f09d";}
.payment-options .payment-option-swish .card-title > label:after{content: "\f10b"; font-size: 30px; margin-right: 4px;}
.payment-options .payment-option-avi .card-title > label:after{content: "\f0f6"; margin-right: 2px;}
.payment-options .payment-option-autogiro .card-title > label:after{content: "\f133"; margin-right: 2px;}
.payment-options .first.last .card-title label:hover, .payment-options .first.last a{cursor:default;}
.payment-options .card-title input[type="radio"]{
	position: static;
	margin-right: 10px;
	padding-bottom: 4px;
}
.payment-options .card-body{
	padding: 30px 44px 20px 44px;
}
.payment-options .card-body {
	background: rgb(250,250,250);
}

ul.option-logos{
	text-align: center;
	list-style: none;
	margin: 0; padding: 0;
	margin-bottom: 10px;
}
ul.option-logos li{display: inline-block; margin-right: 4px;}
ul.option-logos img{
	width: auto; height: 30px;
}
h5.order-total{
	margin: 0 0 30px 0;
}

/* =============================================================================
 * 	--	Page styles
 * ========================================================================== */
 /**		-- page_autogiroagreement
-------------------------------------------------- **/
.agreement-print{
	padding: 1.25rem;
}

/**		-- Donation confirmation
-------------------------------------------------- **/
ul.social-share{
	list-style-type: none;
	margin-top: 20px; padding: 0;
}
ul.social-share li{
	display: inline-block;
	margin-right: 10px;
}
ul.social-share li.last{
	margin-right: 0;
}
ul.social-share li a{
	display: inline-block;
	width: 70px; height: 70px; line-height: 70px;
	border-radius: 35px;
	font-size: 28px;
	color: #fff;
}
ul.social-share li a:hover{
	opacity: 0.9;
}
ul.social-share li a.facebook {
	background: #4267B2;
}
ul.social-share li a.twitter {
	background: #1DA1F2;
}

/* =============================================================================
 * 	--	Media queries
 * ========================================================================== */
 @media only screen and (max-width: 768px) {
	 #pageflow_body > .alert {
	 	max-width: 90%;
	}
}