/* 
    ZieglerSoft (C) 2017
    CSS For ZieglerSoft templates
    Full responsive design
*/

/* Buttons */

.z-btn { margin: 0; padding: 9px 20px; font-size: 17px; box-shadow: 0px 2px 4px 0px rgba(0,76,130,0.2); }
.z-btn, .z-btn:hover { text-decoration: none; }
.z-btn { font-weight: 500; text-align: center; border-radius: 4px; border: none; cursor: pointer; }
.z-btn.noshadow { box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; }
.z-btn.bold { font-weight: 600; }
.z-btn.light { font-weight: 300; }
.z-btn.stdfont { font-weight: 500; }
.z-btn.nopadding {padding:0px;}
.z-btn.nopadheight { padding: 0px 8px; }
.z-btn.nopadwidth { padding: 8px 0px; }
.z-btn.xsmallpadwidth { padding: 8px 2px; }
.z-btn.xxsmallpadwidth { padding: 8px 1px; }
.z-btn.xsmallpadheight { padding: 2px 8px; }
.z-btn.xxsmallpadheight { padding: 1px 8px; }
.z-btn.smallpadwidth { padding: 8px 4px; }
.z-btn.mediumpadwidth { padding: 8px 8px; }
.z-btn.stdpadding, .z-btn.stdpadwidth { padding: 8px 16px; }
.z-btn.textpadding{padding: 0.25em 0.5em;}
.z-btn.textpaddinglarge { padding: 0.65em 0.5em; }
.z-btn.xsmallpadding { padding: 2px 5px; }
.z-btn.smallpadding { padding: 4px 10px; }
.z-btn.largepadding { padding: 18px 40px; }
.z-btn.xlargepadding { padding: 28px 60px; }
.z-btn.small {font-size:12px;}
.z-btn.medium { font-size: 14px; }
.z-btn.standard { font-size: 17px; }
.z-btn.large {font-size: 22px; }
.z-btn.xlarge { font-size: 27px; }
.z-btn.roundxl {border-radius:8px}
.z-btn.roundxxl { border-radius: 12px }
.z-btn.roundxxxl { border-radius: 50% }
.z-btn.square {border-radius:0px;}

.z-btn select { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; outline: 0; box-shadow: none; border: 0; background: #2c3e50; background-image: none }
.z-btn select { width: 100%; height: 100%; margin: 0; padding: 0 0 0 .05em; color: #fff; cursor: pointer; background: transparent; text-align: left !important }
.z-btn select::-ms-expand { display: none }
.z-btn.text { width: 100%; margin: 0; background: transparent; text-align: left !important; cursor:text; }
.z-btn.textarea { width: 100%; margin: 0; background: transparent; text-align: left !important; cursor: text; resize: none;  overflow:auto }
.z-selectbox { position: relative; display: block; background-color: transparent; overflow: hidden; border-radius: 4px; padding: 0px;  }
.z-selectbox::after { content: '\25BC'; position: absolute; top: 0; right: 0; bottom: 0; padding: 0em 0.5em; background-color: rgba(0,0,0,0.2); pointer-events: none; display: flex; flex-direction: column; justify-content: center }
.z-selectbox.samecolor::after { background-color: rgba(0,0,0,0) }
.z-selectbox.changearrowhover1:hover::after { content: '\25b2'; }
.z-selectbox.changearrowhover2:hover::after { content: '\2191'; }
.z-selectbox.changearrowhover3:hover::after { content: '\25c0'; }
.z-selectbox.changearrow2::after { content: '\2193'; }
.z-selectbox.changearrow3::after { content: '\25b6'; }
.z-selectbox.changearrow4::after { content: '\2630'; }
.z-selectbox.changearrow5::after { content: '\1f50d'; }

/*Checkbox + Radiobutton*/
.z-radiocheckboxlarge, .z-radiocheckboxmedium, .z-radiocheckboxsmall { display: block; position: relative; padding-left: 1.8em !important; margin-bottom: 0.2em; cursor: pointer; font-size: 1.4em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: left !important; }
.z-radiocheckboxlarge input, .z-radiocheckboxmedium input, .z-radiocheckboxsmall input { position: absolute; opacity: 0; }
.z-marklarge, .z-markmedium, .z-marksmall { position: absolute; top: 0; left: 0; height: 1.5em; width: 1.5em; background-color: rgba(0,0,0,0.1) }
.z-radiocheckboxlarge:hover input ~ .z-marklarge, .z-radiocheckboxmedium:hover input ~ .z-markmedium, .z-radiocheckboxsmall:hover input ~ .z-marksmall { background-color: rgba(0,0,0,0.2) } /*hover*/
.z-radiocheckboxlarge input:checked ~ .z-marklarge, .z-radiocheckboxmedium input:checked ~ .z-markmedium, .z-radiocheckboxsmall input:checked ~ .z-marksmall { background-color: rgba(0,0,0,0.5) } /*checked*/
.z-marklarge:after, .z-markmedium:after, .z-marksmall:after { content: ""; position: absolute; display: none; }
.z-radiocheckboxlarge input:checked ~ .z-marklarge:after, .z-radiocheckboxmedium input:checked ~ .z-markmedium:after, .z-radiocheckboxsmall input:checked ~ .z-marksmall:after { display: block; }
.z-radiocheckboxlarge .z-marklarge:after, .z-radiocheckboxmedium .z-markmedium:after, .z-radiocheckboxsmall .z-marksmall:after { left: 0.35em; top: 0; content: '\2713'; font-weight: 900; }

.z-radiocheckboxmedium { font-size: 0.85em }
.z-radiocheckboxsmall { font-size: 0.75em }

.z-marklarge.x:after, .z-markmedium.x:after, .z-marksmall.x:after { left: 0.35em; top: 0; content: '\2718'; font-weight: 300; background: transparent; }
.z-marklarge.check:after, .z-markmedium.check:after, .z-marksmall.check:after { left: 0.35em; top: 0; content: '\2713'; font-weight: 900; background: transparent; }
.z-marklarge.dot:after { left: 0.06em; top: 0; margin-top: -0.439em; content: '\25CF'; font-size: 2em; font-weight: 300; background: transparent; }
.z-marklarge.circledot:after { left: 0.3em; top: 0.06em;  content: '\29BF'; font-weight: 300; background: transparent; }
.z-marklarge.star:after { left: 0.3em; top: 0; margin-top: -0.05em; content: '\2605'; font-weight: 300; background: transparent; }
.z-marklarge.aster:after { left: 0.3em; top: 0; content: '\2731';  font-weight: 300; background: transparent; }

.z-markmedium.dot:after { left: 0.08em; top: 0; margin-top: -0.4099em; content: '\25CF'; font-size: 1.9em; font-weight: 300; background: transparent; }
.z-markmedium.star:after, .z-marksmall.star:after { left: 0.33em; top: 0; margin-top: -0.04em; content: '\2605'; font-weight: 300; background: transparent; }
.z-markmedium.aster:after, .z-marksmall.aster:after { left: 0.3em; top: 0; content: '\2731'; font-weight: 300; background: transparent; }

.z-marksmall.dot:after { left: 0.06em; top: 0; margin-top: -0.4em; content: '\25CF'; font-size: 2em; font-weight: 300; background: transparent; }


.z-markmedium.samecolor, .z-marklarge.samecolor, .z-marksmall.samecolor { background-color: transparent }


.z-btn.bordernone { border: 0px none }
.z-btn.bordersmall { border: 1px solid }
.z-btn.borderlarge { border: 2px solid }
.z-btn.borderxlarge { border: 3px solid }

/*Knapfarver - med farveforløb*/

.z-btn-lightblue { background: linear-gradient(180deg,#02afef,#00a3df)!important}
.z-btn-blue { background: linear-gradient(180deg,#5A7BBD,#002673) !important }
.z-btn-lightred { background: linear-gradient(180deg,#FF6A6A,#FF0000) !important }
.z-btn-red { background: linear-gradient(180deg,#C00000,#800000) !important }
.z-btn-amber, .z-btn-yellow { background: linear-gradient(180deg,#FFD75F,#FFC107) !important }
.z-btn-brown { background: linear-gradient(180deg,#795548,#5B4036) !important }
.z-btn-cyan { background: linear-gradient(180deg,#00BCD4,#008EA0) !important }
.z-btn-gray { background: linear-gradient(180deg,#607D8B,#485E69) !important }
.z-btn-lightgreen { background: linear-gradient(180deg,#BBD6BB,#5A9C5A) !important }
.z-btn-green { background: linear-gradient(180deg,#84B584,#004D00) !important }
.z-btn-indigo { background: linear-gradient(180deg,#798496,#243146) !important }
.z-btn-khaki { background: linear-gradient(180deg,#CFC88E,#88803C) !important }
.z-btn-lime { background: linear-gradient(180deg,#CDDC39,#9AA62B) !important }
.z-btn-orange { background: linear-gradient(180deg,#FF9800,#C07300) !important }
.z-btn-deeporange { background: linear-gradient(180deg,#FF5722,#C0421A) !important }
.z-btn-pink { background: linear-gradient(180deg,#E91E63,#B0174B) !important }
.z-btn-purple { background: linear-gradient(180deg,#BF73CC,#761D85) !important }
.z-btn-teal { background: linear-gradient(180deg,#07889B,#056675) !important }
.z-btn-white { background: linear-gradient(180deg,#FFFFFF,#C0C0C0) !important }
.z-btn-black { background: linear-gradient(180deg,#5A5A5A,#000000) !important }
.z-btn-darkgray { background: linear-gradient(180deg,#808080,#2C2C2C) !important }
.z-btn-tangerine { background: linear-gradient(180deg,#EDA470,#AB561A) !important }
.z-btn-powder { background: linear-gradient(180deg,#6689BF,#4D6790) !important }
.z-btn-embers { background: linear-gradient(180deg,#B82601,#8B1D01) !important }
.z-btn-sky { background: linear-gradient(180deg,#C0F2F7,#76B1B6) !important }
.z-btn-carbon { background: linear-gradient(180deg,#C7C7C7,#7F7F7F) !important }
.z-btn-watermellon { background: linear-gradient(180deg,#FF3B3F,#C02C2F) !important }
.z-btn-oxblood { background: linear-gradient(180deg,#76323F,#59262F) !important }
.z-btn-navyblue { background: linear-gradient(180deg,#0F1626,#0B111D) !important }
.z-btn-gunmetal { background: linear-gradient(180deg,#233237,#1A2629) !important }
.z-btn-rustyred { background: linear-gradient(180deg,#984B43,#733932) !important }
.z-btn-warmyellow { background: linear-gradient(180deg,#EAC67A,#B0955C) !important }
.z-btn-peach { background: linear-gradient(180deg,#FEDCD2,#BFA69E) !important }
.z-btn-lemon { background: linear-gradient(180deg,#DCB239,#A6862B) !important }
.z-btn-papaya { background: linear-gradient(180deg,#E24E42,#AA3B32) !important }
.z-btn-mustard { background: linear-gradient(180deg,#E9B000,#B08500) !important }
.z-btn-blush { background: linear-gradient(180deg,#EB6E80,#B15360) !important }
.z-btn-aqua2 { background: linear-gradient(180deg,#008F95,#006C70) !important }
.z-btn-grape { background: linear-gradient(180deg,#94618E,#70496B) !important }
.z-btn-eggplant { background: linear-gradient(180deg,#49274A,#371D38) !important }
.z-btn-sand2 { background: linear-gradient(180deg,#F4DECB,#B8A799) !important }
.z-btn-shell { background: linear-gradient(180deg,#F8EEE7,#BBB3AE) !important }
.z-btn-aluminium { background: linear-gradient(180deg,#D9D9D9,#A4A4A4) !important }
.z-btn-silver { background: linear-gradient(180deg,#C0C0C0,#919191) !important }
.z-btn-gold2 { background: linear-gradient(180deg,#DAA520,#A47C18) !important }
.z-btn-darkgold { background: linear-gradient(180deg,#B8860B,#8B6508) !important }
.z-btn-skyblue { background: linear-gradient(180deg,#328CC1,#266A91) !important }
.z-btn-marine { background: linear-gradient(180deg,#57BC90,#428E6D) !important }
.z-btn-forrest { background: linear-gradient(180deg,#015249,#013E37) !important }
.z-btn-blueberry { background: linear-gradient(180deg,#6B7A8F,#515C6C) !important }
.z-btn-apricot { background: linear-gradient(180deg,#F7882F,#BA6623) !important }
.z-btn-citrus { background: linear-gradient(180deg,#F7C331,#BA9325) !important }
.z-btn-coral { background: linear-gradient(180deg,#FF533D,#C03F2E) !important }
.z-btn-indigo { background: linear-gradient(180deg,#30415D,#243146) !important }
.z-btn-violet { background: linear-gradient(180deg,#6E3667,#53294E) !important }
.z-btn-electricgreen { background: linear-gradient(180deg,#88D317,#669F11) !important }
.z-btn-deepplum { background: linear-gradient(180deg,#1A0315,#140210) !important }
.z-btn-butter { background: linear-gradient(180deg,#FEE882,#FEDC3D) !important }
.z-btn-ice { background: linear-gradient(180deg,#99D3DF,#739FA8) !important }
.z-btn-salmon2 { background: linear-gradient(180deg,#C98474,#976357) !important }
.z-btn-buttermilk { background: linear-gradient(180deg,#FFFAD6,#FFF7C0) !important }
.z-btn-terracotta { background: linear-gradient(180deg,#945D60,#704648) !important }
.z-btn-chilli { background: linear-gradient(180deg,#AF473C,#84362D) !important }
.z-btn-hotpink { background: linear-gradient(180deg,#FE6587,#BF4C66) !important }
.z-btn-grass { background: linear-gradient(180deg,#8FC33A,#6C932C) !important }
.z-btn-stem { background: linear-gradient(180deg,#636B46,#4B5135) !important }
.z-btn-stormy { background: linear-gradient(180deg,#494E6B,#373B51) !important }
.z-btn-palm { background: linear-gradient(180deg,#1B7B34,#145D27) !important }
.z-btn-mountain { background: linear-gradient(180deg,#3F3250,#2F263C) !important }
.z-btn-bluebell { background: linear-gradient(180deg,#155765,#10424C) !important }
.z-btn-olive2 { background: linear-gradient(180deg,#57652A,#424C20) !important }
.z-btn-ornate { background: linear-gradient(180deg,#AB9353,#816F3F) !important }
.z-btn-ochre { background: linear-gradient(180deg,#C06014,#91480F) !important }
.z-btn-coffeepot { background: linear-gradient(180deg,#5C4E4E,#453B3B) !important }
.z-btn-marsala { background: linear-gradient(180deg,#964F4C,#713C39) !important }