/*! HTML5 Boilerplate v5.1.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
    width: 100%;
    height: 100%;
}

.d-none {display:none;}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
.TotalPrice{
	font-size:18px;
		font-weight:bold;
	}
::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}
label{
	font-weight:normal;
}
input.serverQTY.dis {
    border: none;
    background: transparent!important;
    text-align: left;
}
/*
 * A better looking default horizontal rule
 */
tfoot tr{
border-top:2px solid #333;
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */
/*
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}*/

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
input[readonly] {
	background-color:#f7f7f7;
	cursor:default;
}
input[readonly].active {
	background-color:#f7f7f7;
	cursor:not-allowed;
}
/*uni*/
.right{
    float: right;
    text-align: right;
}
.left {
    float: left;
}
.tcenter {
    text-align: center
}
nopadtop{
    padding-top:0;
}
.hundrede{
    max-width: 100%;
    vertical-align: middle;
    margin-right: auto;
    margin-left: auto;
}
.form-group{
	    width: 48%;
    margin: 10px 1%;
    float: left;
		}
.col-xs-12 .form-group {
	width:30%
}
.col-xs-12 .form-group input[type=text]{
	width:100% !important;
}
#theOtherAdress {display:none;}
.modal-body .form-control {
    border-radius: 0;
    border: 1px solid #333;
    font-size: 14px;
    padding: 0px !important;
    line-height: 16px;
    height: 25px;
}
.halv {
    max-width: 32%;
    vertical-align: middle;
    margin-right: auto;
    margin-left: auto; 
	margin-bottom:20px;
}
button.knap, a.knap, input.knap {
    color: #000;
    background-color: #fff;
    border: 2px solid #00b388;
	
    padding: 10px 20px;
 
}
a.knap:hover, input.knap:hover{
    text-decoration: none;
    border: 2px solid #00b388;
	outline:2px solid #00b388;
}
a.knap-negativ  {
    color: #fff;
    background-color:none;
    border: 2px solid #fff;
    padding: 10px 20px;
    line-height: 70px;
}
a.knap-negativ:hover {
    text-decoration: none;
    border: 4px solid #fff;
}
a.knap-green:hover {
    text-decoration: none;
	 outline: 2px solid #00b388;
}
a.knap-green {
    color: #fff;
  background-color:#00b388;
   
    padding: 10px 20px;
}
table{
	width: 100%;
}

.negativ{
    color:#fff;
}
.mtop30 {
    margin-top: 25px;
}
.hvidbox{
    background: #fff;
    margin-top: 30px;
    padding: 20px;
    float: left;
}
.hvidbox-t{
    font-family: Metric, Arial, sans-serif;
    font-weight: 100;
    font-size: 18px;
        height: 180px;
    padding: 20px;
}
.hvidbox table td:first-child {
    width: 80px;
    padding-right:5px;
}
.hvidbox table td:last-child {
}

.hvidbox.nytaar {
			border: 4px solid #00B388;
			text-align: center; 
			background: url(http://hpedanmark.dk/media/66261/confetti_bronze_bg.png) no-repeat #FFF;
			
			
		}
		
.hvidbox.nytaar table tr {
			vertical-align: middle;
					
				}

/*uni end*/
.container.padtop20 {
    padding-top: 30px;
}
footer p {
    color:#6a6a6a;
    font-size: 12px;
    font-weight: 400;
}
.sporg p {
    line-height: 18px;
}
.sporg a {
    color:#00b388;
}
.top{
    position: relative;
}
.topbillede{
    height: 500px;
    background: url(../img/topbillede.jpg) no-repeat;
    background-size:cover;
    background-position: left top;
}
.log-ind{
    color: #FFF;
    /*padding-top: 15px;
    padding-bottom: 0;*/
    line-height: 15px;
    font-size: 13px;
	
	border: 1px solid #fff;
	padding: 10px 15px 5px 15px;
	margin:15px 0;
	display: inline-block;
}
.log-ind:hover, .log-ind:active, .log-ind:focus {
    background-color:#fff;
	color:rgb(66,85,99);
	text-decoration: none;
}
.tonegl{
    background-color: red;
    color: white;
    width: 50px;
    height: 50px;
    display: inlineblock;
}
label {


   margin-bottom: 0px;

}
.hpe-header{
    background-color: rgba(66,85,99,.8);
    margin-bottom: 0;
    position: relative;
    top: 0;
    width: 100%;
    z-index: 999;
    height: 90px;
}
.logo{
    margin: 20px 0;
    width: 145px;
    float: left;
}
.container {
    /* width: 1600px;*/
    padding-top: 30px;
    padding-bottom: 45px;
}
.container.containerdivider, .container-fluid.containerdivider{
    padding-top: 0;
    padding-bottom: 0;
}

.pos-rel{
    position: relative;
    z-index: 10;
    top: 0px;
}
.playButtonHero{
    background-image: url(../img/playButtonFrame.png);
    background-repeat: no-repeat;
    height: 70px;
    width: 70px;
    background-size: cover;
    display: block;
    position: absolute;
    top:50%;
    left: 50%;
    margin-left: -35px;
    cursor: pointer;

}
.playButtonHeroPhone{
    background-image: url(../img/playButtonFrame.png);
    background-repeat: no-repeat;
    height: 70px;
    width: 70px;
    background-size: cover;
    display: block;
    position: absolute;
    top:20%;
    left: 50%;
    margin-left: -35px;
    cursor: pointer;
}
.style-bg-gray-3 {
    background-color: #F6F6F6;
}
.style-bg-green {
    background-color: #00b388;
}
.style-bg-alsogreen {background-color:#69b145; color:#fff !important;}
.style-bg-alsogreen a {color:#fff;}
.heading-h1{
 
}
.inline-lnk{
    color:#000;
}
.inline-lnk:hover{
    color:rgba(0,0,0,.6);
    text-decoration: none;
}
.inline-lnk span{
    background-image: url(../img/arrow-circle.png);
    background-size: cover;
    display: block;
    width: 18px;
    height: 18px;
    overflow: hidden;
    float: left;
    margin-right: 10px;
    margin-top: 2px;
}
.inline-lnk:hover span{
    background-position: 0px 18px;
}
.heading-h1.smallbottomgap{
   
}
.divider{
    background: #000;
    height: 1px;
    opacity: .2;
    filter: alpha(opacity=20);
    margin: 0px 0;
}
.mtop40{
    margin-top: 40px;
}
.playButtonHero:hover{
    background-position: 0 -70px;
}
.heroText{
    position: absolute;
    z-index: 9999;
    top: 100px;
    width: 100% !important;
    color: #fff;
}
.scroll-down{
    position: absolute;
    bottom: 0;
    width: 70px;
    left:50%;
    margin-left: -35px;
    cursor: pointer;
}
nav ul li a{
    color:#C6C9CA;
}
nav ul li a:hover{
    color:#fff;
    background-color: transparent!important;
}
.form-control {
    border-radius: 0;
    border: 1px solid #000;
    font-size: 25px;
    padding: 10px;
    line-height: 23px;
    height: 40px;
}
.form-control:focus{
		border:1px solid #00B388;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

input:focus:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
.ui-tabs{
	margin:0px;
	padding:0px;
	width:100%;
}
.ui-tabs-nav{
	list-style:none;	
	    width: 70%;
	float:left;
	padding:0;
	margin:0;
}
.ui-tabs-nav li {
   
    background-color: #778e6b;
    margin: 0;
   
    color: #fff;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    margin-right: 3px;
}
.ui-tabs-active {background-color: #69b145 !important;}
.ui-tabs-nav li a {
    color: #fff;
    font-size: 20px;
    display: block;
    width: 218px;
    padding: 10px 10px 6px 10px;
    float: left;
    text-decoration: none;
	outline:none;
}
.ui-state-hover {
   background-color:#7ac753!important;
	
}

/* ==========================================================================
   ALSO Form styles
   ========================================================================== */
.p-category {font-weight:bold; color:#666; border-collapse:collapse; border-bottom:2px solid #c6c9ca;}
.p-category td {padding:15px 10px 2px 0;}
.p-entry td {padding:5px 10px 0 0;}
.also-form-table {border: 1px solid #69b145; vertical-align:top;}
.also-form-table tr {vertical-align:top;}
/*.also-form-table thead tr th {padding:10px 10px 0 0; background-color:#5f7a76; color:#fff;}*/
.also-form-table thead tr th {padding:10px 10px 0 0; background-color:#69b145; color:#fff;}
.also-form-table thead tr th:first-child {padding-left:10px;}
.also-form-table td {text-align:left; padding-right:10px;}
.also-form-table td:first-child {padding-left:10px; width:110px;}
.also-form-table tr:last-child td {padding-bottom:15px;}
.also-form-table tr.p-entry td:nth-child(3), .also-form-table tr.p-entry td:nth-child(4) {white-space: nowrap;}
.also-form-table th:nth-child(3), .also-form-table th:nth-child(4), .also-form-table th:nth-child(5) {width:50px;}
.also-form-table th {white-space: nowrap;}
.also-form-table th:nth-child(2) {width:540px;}
.also-form-table th:nth-child(3), .also-form-table th:nth-child(4), .also-form-table th:nth-child(6), .also-form-table td:nth-child(3), .also-form-table td:nth-child(4), .also-form-table td:nth-child(6) {text-align:right; width:71px;}
.also-form-table th:nth-child(6) {width:71px;}
.also-form-table input[type=number] {width:50px;}

.modal-content {border-radius:0 !important;}
.modal-header {background: #69b145; color: #fff;}
.btn-primary {background-color: #69b145; border-color:#69b145;}
.btn-primary:hover {background-color:#506663; border-color:#506663;}
.btn-primary.focus, .btn-primary:focus, .btn-primary.active, .btn-primary:active, .open>.dropdown-toggle.btn-primary {background-color:#506663; border-color:#506663;}
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {background-color:#506663; border-color:#506663;}

.masthead {padding: 15px 0;}


.bundle {
	    background-color: #e5e5e5;
    color: #000 !important;
    border-bottom: 2px solid #69b145;
}
.bundle:nth-child(even) {
    background-color: #eee!important;
}
.bundle .p-category {
    color: #000;
        border-color: #5dbc2d;
	border-bottom: 0px!important;
}
.bundleTotal {font-weight:bold;}
.bundleTotal input[type=number] {color:#000; font-weight:normal;}

#ssd {position:relative;}
/*.basket {position:absolute; left: 100%; top: 130px; width: 200px;}*/
.basket {    margin-top: 217px; width:260px;}
.basket.affix {margin-top:0; width:260px; top:20px; position:fixed !important;}
.basket .panel-heading {background-color: #69b145; color: #fff;}
.basket .panel-heading.slate {background-color:rgba(66,85,99,1);}

.serverAmount, .storageAmount, .networkingAmount {
	font-weight:bold;
	text-align:right !important;
}

#orderConfirmation tr td:nth-child(2) {
    width: 416px;
	height: 50px;

}
#orderConfirmation tbody tr{
	border-top:1px dashed #e5e5e5;
}

.error {
    color: red;
    font-size: 15px;
    line-height: 12px;
    width: 100%;
    display: block;
}

.fremhaev {
	color: #00b388;
	text-transform: uppercase;
	font-weight: bold;
}
.p-category.fremhaev {
	color: #000000;
	background: transparent;
	text-transform: uppercase;
	font-weight: bold;
	border:0;
	font-size:125%;
}

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets,  and up) */
@media (min-width: 768px) {
h1 span {
   font-size: 45px;
}  
.lead{
    font-family: Metric, Arial, sans-serif;
    font-weight: 100;
    margin-top: 10px;
    font-size: 28px;
}
h1 {
    font-size: 40px;
    /*=32px*/
    line-height: 32px;
    line-height: 3rem;
    /*=32px*/
    margin-bottom: 9px;
    margin-bottom: 0.5625rem;
    /*=9px*/
}   
.modal-dialog {
    width: 1000px;
    margin: 30px auto;
}
}

/* Medium devices (desktops,  and up) */
@media (min-width: 992px) {
  .hpe-header {
      background-color: rgba(66,85,99,.93);
      margin-bottom: 0;
      position: relative;
      top: 0;
      width: 100%;
      z-index: 999;
      height: 90px;
}
    
.container {
    /* width: 1600px;*/
    padding-top: 40px;
    padding-bottom: 55px;
}

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1600px) {
    .container {
       /* width: 1600px;*/
        padding-top: 60px;
        padding-bottom: 75px;
    }

}




/* ==========================================================================
   Helper classes
   ========================================================================== */


.talign-r{
    text-align:right;
 }
 .flex-image{
    vertical-align:bottom;
    max-width:100%;
    height:auto !important;
    width: auto\9; /* ie8 */
}
 .flex-image.strtc{
    margin:-0.1%;
    max-width:100.5%;
    margin-bottom: 15px;
 }

/*
 * Hide visually and from screen readers:
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}
 fieldset {
    border: 1px solid #c0c0c0!important;
    margin: 10px 2px;
    padding: 0.35em 1.625em 0.75em;
}
legend {
    display: block;
    width: inherit;
    padding: 0 20px;
}
.p-earned{
    background-color: #6CAB2E;
    padding:20px;
    color:#fff;
    font-size: 20px;
    text-align: center;
}
/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */