/*Externa länkar*/
/*Copyright © 2011–2013 VisualEditor team*/
a[href^="http://"]:after,
a[href^="https://"]:after {
    content: url('/images/icons/external.svg');
    margin: 0 0 0 3px;
}


/* ------------------   SPINNER    */



.sk-fading-circle {
    margin: auto;
    width: 30px;
    height: 30px;
    position: relative;
    float:left;
}

.sk-fading-circle .sk-circle {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.sk-fading-circle .sk-circle:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: #333;
    border-radius: 100%;
    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
    animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    transform: rotate(300deg);
}
.sk-fading-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    transform: rotate(330deg);
}
.sk-fading-circle .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}
.sk-fading-circle .sk-circle3:before {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}
.sk-fading-circle .sk-circle4:before {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}
.sk-fading-circle .sk-circle5:before {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}
.sk-fading-circle .sk-circle6:before {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}
.sk-fading-circle .sk-circle7:before {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}
.sk-fading-circle .sk-circle8:before {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}
.sk-fading-circle .sk-circle9:before {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
    0%, 39%, 100% { opacity: 0; }
    40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
    0%, 39%, 100% { opacity: 0; }
    40% { opacity: 1; }
}


.complete{
    display:none;
}

.side_accordion li a img {
    margin-left: 1px;
}


.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

div.tipped {
    /* Safari */
    -webkit-transform: rotate(-60deg);

    /* Firefox */
    -moz-transform: rotate(-60deg);

    /* IE */
    -ms-transform: rotate(-60deg);

    /* Opera */
    -o-transform: rotate(-60deg);

    transform-origin: 20% 50% 0;
    width: 28px;
}






.ms-container{
    background: transparent url('../img/switch_right.svg') no-repeat 61% 50%;
}

.ms-selectable{
    width: 55%!important;
}


.ms-selection{
    width: 35%!important;
}



#paymentoptions_image{
    width:45%;
}

/*Adaptiv storlek YouTube-klipp*/
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.complete{
    display:none;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


#step_eighteen_radiobuttons p {
    padding-left: 25px;
    padding-bottom: 5px;
}


div.main_container {
    background: #FFFFFF;
}

.box .block {
    background: #F6F7F8;
}



/*Fix av utseende för markerade menyobjekt*/
li:last-child ul.drawer li {
    margin-bottom: 0px;
}


fieldset.radio_fieldset>label>span,fieldset.checkbox_fieldset>label>span{
    /*margin-top: -4px !important;*/
    font-weight:bold;
    font-size: 11px;
    color:#666;
    height:14px;
    line-height: 14px;
    vertical-align: middle;
    margin-top:-7px;
    display:inline-block;

}

/*Validerings varningar*/
label.error{
    position:inherit !important;
    bottom: 0px !important;
    right:0px !important;
}

/*Mörk bakrgund på avstängda textfält*/
input[readonly="readonly"]
{
    background-color:rgba(0, 0, 0, 0.15);
}

/*Hjälpbubblor*/
.tooltip-from-element.helpinfo {
	width:14px !important;
	height:14px !important;
    background-image:url('/images/icons/info.svg');
    background-size: 14px 15px;
	cursor:pointer;
	margin:0px 0px -3px 4px !important;
	display: inline-block !important;
}


/*Textinputs i dialogfönster för hjälp och feedback + Verksamhetsrapport*/
textarea#AssociationFeedback, textarea#ActivityReportDescription, textarea#ActivityReportMessage{
    width: 100%;
    resize: none;
}


/*Inloggningsbild Administratör*/
#image_adminlogin {
    background-image: url("../../images/login_keys.png");
    background-position: 90% 50%; /*Positioning*/
    background-size:15%; /*In relation to parent div*/
    background-repeat: no-repeat; /*Prevent showing multiple background images*/
}

/*Inloggningsbild vanlig användare*/
#image_login {
    background-image: url("../../images/login_key.png");
    background-position: 90% 50%; /*Positioning*/
    background-repeat: no-repeat; /*Prevent showing multiple background images*/
}


.block p {
	margin-bottom: 0px;
	padding-left: 5px;
    color: #333;

}

#freeimage {
border-radius: 2px;
box-shadow: 0 2px 0 1px rgba(0, 0, 0, 0.03);
border: 1px solid #ccc;
}

#wrapper {
width: 90%;
margin: auto;
padding-top:0px;
padding-bottom: 5px;
}


#footer_container {
background: none;
box-shadow: 0 0 0 0;
border:0;
}

#footer_container p span{
margin: 0 10px 0 0;
padding: 0 10px 0 0;	
}

button.tiny, a.button.tiny {
line-height: 15px;
padding: 1px 5px 1px 5px !important;
    border:1px solid black!important;
}



.second_logo{
	float:left;
	vertical-align:bottom;
}

span.steps{
    float:right;
}

.scrollbox{
    height: 250px;
    overflow:auto;
}

.section p {
    margin-bottom: 10px;

}


.menutopbox {
	margin-bottom: 10px;
	border-radius: 2px;
	padding-left: 5%;
	padding-right: 5%;

	border-width: 1px;
	border-style: solid;

	font-size: 10px;
	font-style:italic;
	color: white;
	line-height: 32px;
	text-align:right;
}

.menutopbox img{
	display:inline-block;
	vertical-align: middle;
}

/*.flat_area h2, .flat_area h3{
	padding-left: 5px;
}*/


/*Används som sidöverskrift*/
h2 {
	padding-left: 0px !important;
	font-size: 24px;	
}

p a {
    border-bottom: none !important;
}

.flat_area > p {
	padding-left: 0px;
    padding-right: 0px;
    color: #333;


}

.box .flat_area {
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 15px;
    padding-right: 15px;

}


.section > p {
	padding-left: 0px;
}

.news {
	margin-bottom: 0px !important;
	margin-top: 10px !important;	
}

.news_date {
	font-size: 10px;
	font-style:italic;
}

div.section li {
    line-height: 20px;
}

.columns {
    width: auto;
}


fieldset > div {
	padding-left:10px !important;	
}

fieldset > label {
	font-family: sans-serif;
	padding-left: 15px;
	font-size: 11px;
	font-weight: bold;
	margin-right:5px;
}


/*Etiketter som ligger direkt i ett block. Avsett för boxar med flertalet indata-fält*/
fieldset.label_side > label {
	width: 95px;
	padding-top: 8px;
	padding-left: 15px;
	padding-right: 10px;
	padding-bottom: 4px;
	margin-top: 0px;
	border-right:0px;
}

fieldset.label_side > div {
	margin-left: 115px;
	padding-right:15px;
}

/*För kortare etiketter*/
fieldset.label_side.short > label {
	width: 55px;

}

fieldset.label_side.short > div {
    margin-left: 75px;
    padding-right:15px;
}


/*För längre etiketter*/
fieldset.label_side.long > label {
    width: 155px;

}

fieldset.label_side.short > div {
    margin-left: 175px;
    padding-right:15px;
}

/*För enstaka indata-fält med etikett, placerad i en section*/
fieldset.label_side.single > label {
    width: 110px;
    padding-top: 8px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 4px;
    margin-top: 0px;
    border-right:0px;
}


fieldset.label_side.single > div {
    margin-left: 120px;
    padding-right:15px;
}


/*--------------*/




.box .section, fieldset > div {
	padding-top:6px !important;
	padding-bottom:6px !important;
}

input.text {
line-height: 19px;
height: 19px;
}

select.full_width {
margin-top: 5px;
margin-bottom: 5px;
}


/*Etiketter för radio-buttons*/
div.chooseone label{
    margin-left: 3px;
    margin-right: 13px;
    cursor: pointer;
    line-height: 20px;
}

div.chooseone span {
    display:inline-block;
}




/*MEDLEMSLISTOR*/

/*.member table td {
	padding-left:0px;
}

td.label {
	font-weight:bold;
}
*/

.ui-button {
	padding-left:3px;
	padding-right:3px;
}	
	
	
span.fullrow {
	width:100%;
	float:left;
}

span.label20 {
    font-weight:bold;
    width:20%;
    clear:left;
    float:left;
}

span.label37 {
	font-weight:bold;
	width:37%;
	clear:left;
	float:left;
}

span.label50 {
	font-weight:bold;
	width:50%;
	clear:left;
	float:left;
}

/*span.data65 {
	width:63%;
	float:left;
}

span.data50 {
	width:50%;
	float:left;
}*/

span.extraspace {
	margin-right:8px;
}


#yellow_marker {
	color:white;
	text-shadow: 0 1px 0 #000;
	background-color:#F98D35;
	border-radius: 3px;
	padding-left: 3px;
	padding-right: 3px;
	margin-left:-3px;
	float:none;
}

#green_marker, .green_marker {
	color:white;
	text-shadow: 0 1px 0 #000;
	background-color:#3d8336;
	border-radius: 3px;
	padding-left: 3px;
	padding-right: 3px;
	margin-left:-3px;
	float:none;
}

#red_marker, .red_marker {
	color:white;
	text-shadow: 0 1px 0 #000;
	background-color:#9e253b;
	border-radius: 3px;
	padding-left: 3px;
	padding-right: 3px;
	margin-left:-3px;
	float:none;
}

/*td.ok {
	color:white;
	text-shadow: 0 1px 0 #000;
	background-color:#3d8336;
	border-radius: 3px;
}*/

.section.member {
	padding-top:2px !important;
	padding-bottom:2px !important;
}

.columns.shade.clearfix {
	border-bottom:0px !important;
	margin-bottom:0px;
}

#memberlist_break_upper {
	padding-top:6px;
	padding-bottom:3px;
}

#memberlist_break_lower {
	 border-bottom: 1px solid #8D949E !important;
	 padding-bottom:6px;
}

#memberlist_break_last {
	 padding-bottom:6px;
}


#footer_container span{
	white-space:nowrap;
}




#multichoiches span{ 
    float: left;
}


#multichoiches label{
    margin: 0 15px 0 5px !important;
    float: none !important;
    cursor: pointer;
    white-space:normal;
}


/* ==========================================================================
   Media Queries
   ========================================================================== */


/* Smartphones (portrait and landscape) ----------- */
@media screen and (max-width: 440px) {

    #lower_button_mobile{
        margin-right: 0px;
        margin-top: 5px;
        margin-left: 15px;
    }

}


/* Smartphones (portrait and landscape) ----------- */
@media screen and (max-width: 500px) {


    .hide_on_phone {
        display: none!important;
    }

.dropdown_menu #mobile_nav{
    display: none !important;
}

#association_logo{
    margin-top: 7px;
}

#paymentoptions_image{
    width:100%;
}

#image_uppgifter {
	background-image: none !important;
}

#image_login {
    background-image: none !important;
}

#image_adminlogin {
    background-image: none !important;
}

span.label37 {
	width:41%;
}

span.label50 {
	width:41%;
}
	
	
.box .section {
	padding:5px;	
}

.main {
	display:none;
}

#nav_top {
margin: 0px 0px 15px;
}

.dropdown_menu #mobile_nav {
padding: 55px 5px 15px 5px;
}

#address {
margin-bottom: 45px !important;
}

#AnnualMeetingReportDate {
width: 65px;
}

.second_logo{
        float: none;
        margin-left: auto ;
        margin-right: auto ;
        vertical-align:bottom;
}

img#association_logo{
    max-width: 100%!important;
}

    #recaptcha_challenge_image{
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
    }
    #recaptcha_response_field
    {
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
    }
    .recaptchatable #recaptcha_image {
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
    }
    .recaptchatable .recaptcha_r1_c1,
    .recaptchatable .recaptcha_r3_c1,
    .recaptchatable .recaptcha_r3_c2,
    .recaptchatable .recaptcha_r7_c1,
    .recaptchatable .recaptcha_r8_c1,
    .recaptchatable .recaptcha_r3_c3,
    .recaptchatable .recaptcha_r2_c1,
    .recaptchatable .recaptcha_r4_c1,
    .recaptchatable .recaptcha_r4_c2,
    .recaptchatable .recaptcha_r4_c4,
    .recaptchatable .recaptcha_image_cell {

        margin: 0 !important;
        width: 100% !important;
        background: none !important;
        height: auto !important;
    }


}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {

}



@media only screen and (min-width: 1140px) {

#sidebar {
	border-top:0px;
	margin-top:124px;
	padding-top:0px;
	border:0;
	box-shadow:none;
	background:none;		
}

div.main_container {
	margin-left: 0px;
	margin-right: 0px;
}


div.clearfix > p {
	margin-top: -1px;
}

fieldset.label_side > div.clearfix {
	margin-bottom:0px !important;
}

}

.banner{
    background: #ff0000;

    border-radius: 8px;
    border-style: solid;
    border-width: 3px;
    padding:10px;
}



div.checkbox{

    clear:both;
}

.checkbox>label{
    /* här borde vi göra något för att rätta till labels för checkboxar*/
}

#captcha_image{
    border: #000000 1px solid;
}

