html, body {
    color: var(--primary-color);
}

body {
    overflow: hidden;
    background-color: rgb(255, 255, 255);
    background-image: url("../images/tvadugnadbg.jpg?v=1");
    background-size:cover;
    background-repeat: no-repeat;
}

h1 {
    color: var(--primary-color);  
    font-size: 4vw;
    font-weight: bold;
}


.dugnad-intro {margin-bottom:60px;}
.dugnad-intro h1.page-section-title {font-size:6vh;margin-bottom:15px;}
.dugnad-intro .teaser {font-size:2.5vh;margin-bottom:15px;}

h2 {color: #333;}

.wrapper-inner {
    height:calc(100vh - 150px);
    display:flex;
    align-items:center;
}

.scroll-container {
    bottom: 0;
    position: fixed;
    width: 100%;

}

.simply-scroll {
    color: #777;
    background-color: white !important;
}

.simply-scroll span {
    color: #000;
    background-color: white !important;
}


/*
=======================================================================
	Create Dugnad
=======================================================================
*/

.panel--dugnad {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-bottom: 30px;
}

.panel--dugnad .bttn {width:100%;}
.panel--dugnad .panel-body {padding:30px;}
.panel--dugnad .panel-body > * {margin-bottom:30px;}
.panel--dugnad .panel-body > :last-child {margin-bottom:0;}

.panel--dugnad .panel-body h2 {color:var(--primary-color);position:relative;text-align:left;padding-left:70px;font-size:25px;font-weight:lighter;}
.single-col .panel--dugnad .panel-body h2 {padding-left:0;}

.panel--dugnad .panel-body h2:before {
    width:50px;
    height:50px;
    display:block;
    color:#fff;
    border-radius:50px;
    text-align:center;
    line-height:50px;
    background: var(--primary-color);
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
}
.single-col .panel--dugnad .panel-body h2:before {display:none;}

.panel--dugnad.panel--select-dugnad .panel-body h2:before {content:"a";}
/*.panel--dugnad.panel--create-dugnad .panel-body h2:before {content:"b";}*/


.bttn--create-dugnad:after {
	font-family: Font Awesome\ 5 Pro;
	content: "\f4d2";
	margin-left:15px;
    font-weight:100;
}
.single-col .bttn--create-dugnad:after {display:none;}

.bttn--see-total {
    border: 2px solid var(--primary-color);
    background:none;
    color:var(--primary-color);
    width:100%;
}

.bttn--see-total:hover,
.bttn--see-total:focus {
    border: 2px solid #fff;
    background:#fff;
    color:var(--primary-color);
    width:100%;
}

.bttn--see-total:after {
	font-family: Font Awesome\ 5 Pro;
	content: "\f8e5";
	margin-left:15px;
    font-weight:100;
}


/*
=======================================================================
	Frontpage
=======================================================================
*/

.wrapper--frontpage .bttn {border:3px solid #fff;}

.wrapper--frontpage .bttn--register {
    background: #fff;
    color:var(--primary-color);
}

.wrapper--frontpage .bttn--register:after {
	font-family: Font Awesome\ 5 Pro;
	content: "\f178";
	margin-left:15px;
    font-weight:100;
}

.wrapper--frontpage .bttn--dashboard {
    background-color:none;
    color:#fff;
}

.wrapper--frontpage .bttn--dashboard:after {
	font-family: Font Awesome\ 5 Pro;
	content: "\f8e5";
	margin-left:15px;
    font-weight:100;
}


/*
=======================================================================
	Dashboard
=======================================================================
*/

#wrapper {
    position:fixed;
    width:100%;
    height:100%;
}

.main-info.dugnad {
    width:80%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    height:100%;
    display:grid;
    grid-template-columns: 3fr 6fr 2fr;
    grid-gap:4rem;
    justify-content: center;
    align-items:center
}

.main-info__text {
    font-size:4rem;
    font-weight:bold;
    line-height:1.35;
    text-align:center;
    margin-right:3rem;
}




.main-info__county {
    display:flex;
    flex-direction:column;
    gap:3rem;
    background:#fff;
    padding:8rem;
    border-radius:3rem;
    text-align:center;
    position:relative;
}

.main-info__county .main-info__county__logo img {
    max-width:12rem;
}

.main-info__county__meta {
    display:flex;
    flex-direction:column;
    gap:2rem;
}

.main-info__county__meta__name {
    font-size:3rem;
    font-weight:bold;
}

.main-info__county__meta__distributed {
    font-size:3rem;
    font-weight:bold;
}

.main-info a.main-info__county__target {
    position:absolute;
    bottom:-5rem;
    left:50%;
    transform:translateX(-50%);
    width:8rem;
    height:8rem;
    border-radius:10rem;
    border:1rem solid #c5e5fa;
    background-color: #fff;
}

.main-info a.main-info__county__target::after {
    font-family: Font Awesome\ 5 Pro;
    content: "\f649";
    display: inline-block;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

.main-info a.main-info__county__target:hover {
    background-color: #0a2343;
}

.main-info a.main-info__county__target:hover::after {
    color:#fff;
}


.main-info__county__target__wrapper {
    background: #aed0e7;
    padding:1rem;
    border-radius: 1rem;
    display:inline-flex;
    gap:1rem;
}

.main-info__county__target input {
    border:0;
    padding:.5rem 1.25rem;
    border-radius: .75rem;
}

.main-info__county__target input[type="submit"] {
    background-color: #0a2343;
    color:#fff;
}

.main-info .main-info__target svg .highcharts-series-group {
    outline: 10px solid #aed0e7;
    border-radius: 30px;
}

.main-info .main-info__target svg .highcharts-label {
}



.dugnad-value {position:relative;}
.dugnad-value h3 {margin:0;}

/*.dugnad-value--result:before {
    position:absolute;
    top:-30px;
    left: 50%;
    transform: translate(-50%);
    content:"Sammen har vi gitt";
    font-size: 2vw;
    width:100%;
}*/

/*#amount, #goals {font-size: 80px;font-size: 6vw;}*/
.sub-text {font-size: 2vw;}

@media (min-width:1600px) {
  /*  #amount, #goals {font-size: 100px;}*/
    .dugnad-value--result:before,
    .sub-text {font-size: 35px;}

}

.logo {
    position:fixed;
    top:5rem;
    left:5rem;
    height:150px;
    width: 100%;
}

.footer-logo{
    height: 90px;
    margin:30px;
    float:left;
}

#no-network {
    font-size: 500px;
    color: rgb(255, 178, 10);
    position: fixed;
    top: calc(50vh - 250px);
    left: calc(50vw - 250px);
    animation: blinker 5s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.loading {
    position: absolute;
    top: 5px;
    left: 5px;
}

/*
=======================================================================
	Bootstrap
=======================================================================
*/

/*
=======================================================================
	Header
=======================================================================
*/

.logo-section.logo-section-registration-form .row {
    width: 100%;
}

.logo-section.logo-section-registration-form .logo {
    max-width: 270px;
    float: right;
}


/*
=======================================================================
	Page Section
=======================================================================
*/

.page-section {
    padding-top: 80px;
    padding-bottom: 60px;
}


/*
=======================================================================
	Form
=======================================================================
*/

.form-group {
    margin-bottom: 50px;
    position: relative;
}

.form-group label {
    position: absolute;
    top: -30px;
}

@media (min-width: 991px) {
    .form-group {
        margin-bottom: 30px;
        position: relative;
    }

    .form-group label {
        position: absolute;
        top: -38px;
    }
}

.form-group .required {
    color: #c52424;
}

.form-group .btn {
    width: 100%;
}


.ddlType {
    width: auto;
}

select {
    width: auto;
}

.form-group {
    position: relative;
}

.form-control {border: 1px solid var(--primary-color);}
.form-control.input-lg {height:62px;font-size:20px;}
.form-control.input-lg::placeholder {font-size:20px;}

.validateText {
    position: absolute;
    top: 120%;
    z-index: 2;
    background: #c52424;
    color: #fff;
    padding: 5px 10px;
    font-size: .9em;
}

.validateText:before {
    content: "";
    position: absolute;
    top: -10px;
    left: 30px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #c52424;
}

select {
    width: 100%;
    padding: 15px;
    margin: 0;
    background: none;
    border: 0;
    outline: none;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
    color:#999;
}

select option {color:#000;}

.select-wrapper {
    position: relative;
    background: #fff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid var(--primary-color);
}

.select-wrapper:before {
    content: "";
    background: url(../images/vinkel-ned.png);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 18px;
    height: 10px;
    position: absolute;
    top: 25px;
    right: 25px;
    z-index: 1;
}