/*
         ==============================================================
         Geizkragen CSS
         ==============================================================
*/

/* Einstellungen */
:root {
         --main-font: 'Roboto';

         --main-color: #961228;
         --main-color-light: #9f1831;
         --main-color-dark: #790813;

         --second-color: #ffcc04;
         --second-color-light: #fdf0a9;
         --second-color-dark: #eeb111;

         --blue-color: #16a4f6;
         --blue-color-light: #ddf1ff;
         --blue-color-dark: #0c88d0;

         --grey-color: #e5e7eb;
         --grey-color-light: #f3f3f3;
         --grey-color-dark: rgba(0,0,0,0.3);

         --bg-color: #fef3b9;
         --bg-color2: #ddf1ff;
         --bg-color3: #f3f8fe;

         --bg-grey: #f3f3f3;
         --bg-grey2: #f8f8f8;

         --font-color: #000000;
         --font-color2: #2c2c2c;
         --font-color-highlight: #16a4f6;
         --font-color-light: #FFFFFF;
         --font-color-dark: #000000;

         --max-width: 1160px;
         --header-height: 90px;
}


/* Links */
a:link, a:visited {
         font-family: var(--main-font);
         font-size: 1.0em;
         color: var(--main-color-dark);
         font-weight: normal;
         text-decoration:underline;
         transition: all 0.3s ease-in-out;
}

a:hover {
         color: var(--main-color-light);
         text-decoration:none;
}

a.button:link, a.button:visited {
         display: inline-block;
         padding: 8px 40px 8px 20px;
         margin: 2px 0px;

         background: var(--main-color) url(../images/icon_button.png) calc(100% - 10px) center no-repeat;
         background-size: auto 50%;

         font-family: var(--main-font);
         text-align: left;
         font-size: 1.1em;
         font-weight: 600;
         text-shadow: rgba(0,0,0,0.0) 2px 2px 1px;
         color: #FFFFFF;
         text-decoration:none;

         -webkit-border-radius: 60px;
         -moz-border-radius: 60px;
         border-radius: 60px;
}
a.button:hover, a.button.r:hover {
         font-family: var(--main-font);
         color: var(--main-color);
         background-color: var(--second-color);
         background-image: url(../images/icon_button_dark.png);
         text-decoration:none;
}

a.button.f_small { font-size: 0.9em; padding: 6px 32px 6px 12px; }
a.button.f_big { font-size: 1.3em; padding: 10px 50px 10px 15px; }

a.button.color { background-color: var(--second-color); background-image: url(../images/icon_button_dark.png); color: var(--main-color); }


/* Überschriften */
h1 {
         font-size: 1.8em;
         font-weight: bold;
         text-align: left;
         color: var(--main-color-dark);
}

h2 {
         font-size: 1.6em;
         font-weight: 600;
         text-align: left;
         color: var(--main-color-dark);
}

h3 {
         font-size: 1.4em;
         font-weight: bold;
         text-align:left;
         color: var(--main-color-dark);
}

h4 {
         font-size: 1.3em;
         font-weight: bold;
         text-align:left;
         color: var(--blue-color-dark);
}

h1, h2, h3, h4, h5 { font-family: var(--main-font); letter-spacing: 0px; vertical-align: top; text-decoration:none; margin: 0px 0px 10px 0px; padding: 0px 0px 0px 0px; }
h1 span, h2 span, h3 span, h4 span, h5 span { color: var(--main-color) !important; }


/* Standarts */
body {
         background:#ffffff;
         background: linear-gradient(180deg,var(--blue-color-light) 0%, #eff8fd 200px);
         width: 100%;
         height: 100%;
         margin: 0;
         padding: 0;
}
body.start { background: linear-gradient(180deg,var(--blue-color-light) 0%, #FFFFFF 200px); }

body, td, div {
         font-family: var(--main-font);
         font-size: 1.0em;
         color: var(--font-color);
         vertical-align:top;
         text-align:left;
}

.l       { float:left; }
.r       { float:right; }
.a_l     { text-align: left; }
.a_c     { text-align: center; }
.a_r     { text-align: right; }

img      { border: 0px; }
.clear   { clear:both; line-height:0.0em; height: 0px; display: block; background-color: #FFDF00; }

.pad     { padding: 10px; }
.pad_top { padding: 40px 0px !important; }

.f_white   { color: #FFFFFF; }
.f_black   { color: #000000; }

.f_small   { font-size: 0.8em !important; }
.f_smaller { font-size: 0.6em !important; }
.f_big     { font-size: 1.2em !important; }
.f_bigger  { font-size: 1.4em !important; }
.f_upper   { text-transform: uppercase; }
.f_normal  { font-weight: normal; }
.f_shadow { text-shadow: rgba(0,0,0,0.3) 0px 0px 5px; }

.block   { display:block; }
.inline-block   { display:inline-block; }
.inline   { display:inline; }

.hide    { display: none; }
.show    { display: block !important; }
.none    { opacity: 0.0; filter: alpha(opacity=0); }

.round_big { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; }
.round { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

.shadow { -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 65, 120, 0.25); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 65, 120, 0.25); box-shadow: 0px 0px 10px 0px rgba(0, 65, 120, 0.25); }
.shadow_light { -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 65, 120, 0.15); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 65, 120, 0.15); box-shadow: 0px 0px 10px 0px rgba(0, 65, 120, 0.15); }
.shadow_dark { -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 65, 120, 0.55); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 65, 120, 0.55); box-shadow: 0px 0px 10px 0px rgba(0, 65, 120, 0.55); }

.w50     { width: calc(100% / 2); }
.w33     { width: calc(100% / 3); }
.w25     { width: calc(100% / 4); }
.w50.pad { width: calc((100% / 2) - 20px); }
.w33.pad     { width: calc((100% / 3) - 20px); }
.w25.pad     { width: calc((100% / 4) - 20px); }

.bg1     { background-color: var(--bg-color) !important; }
.bg2     { background-color: var(--bg-color2) !important; }
.bg3     { background-color: var(--main-color) !important; }
.bg4     { background-color: var(--second-color) !important; }

.bg_light     { background-color: #FFFFFF; }
.bg_dark     { background-color: #000000; }
.bg_grey     { background-color: var(--bg-grey); }
.bg_grey2     { background-color: var(--bg-grey2); }
.bg_grey3     { background-color: var(--bg-grey); }

.g2l { cursor: pointer; }

.dot_check { display: inline-block; background: transparent url(../images/check.png) left center no-repeat; padding: 2px 10px 0px 30px; }

.verlauf-1 {
         background: var(--second-color);
         background: linear-gradient(180deg,var(--second-color) 0%, var(--second-color-light) 4%, var(--second-color-dark) 20%, var(--second-color) 100%);
}

/* Tabellen */
td:nth-child(odd) { background: var(--bg-color); color: var(--font-color); padding: 3px 10px; }
td:nth-child(even) { background: var(--bg-color2); color: var(--font-color); padding: 3px 10px; border-bottom: 0px rgba(0,0,0,0.05) solid; }
td.head { background: var(--main-color); color: var(--font-color-light); padding: 5px 10px; font-weight: bold; font-size: 1.1em; }
td.head_sub { background: var(--second-color); color: var(--font-color-light); padding: 5px 10px; font-weight: bold; font-size: 1.0em; }

/* Icons */
.icon { display: block; width: 48px; height: 48px; background-color: transparent; background-repeat: no-repeat; background-size: 40px 40px; background-position: center center; }
.icon.car { background-image: url(../images/icon_car.png); }
.icon.cloth { background-image: url(../images/icon_cloth.png); }
.icon.furniture { background-image: url(../images/icon_furniture.png); }
.icon.house { background-image: url(../images/icon_house.png); }
.icon.stream { background-image: url(../images/icon_stream.png); }
.icon.tech { background-image: url(../images/icon_tech.png); }
.icon.tools { background-image: url(../images/icon_tools.png); }
.icon.travel { background-image: url(../images/icon_travel.png); }
.icon.x { background-image: url(../images/icon_x.png); }
.icon.close { background-image: url(../images/icon_x2.png); }
.icon.list { background-image: url(../images/icon_list.png); }
.icon.list-block { background-image: url(../images/icon_list-block.png); }


/* Seite */
#wrapper { width: 100%; margin: 0px; padding: 0px; min-width: 320px; }
.in { width: var(--max-width); margin: 0px auto; padding: 0px 0px; }
#site { padding: 0px 0px 0px 0px; min-height: 150px; font-size: 1.0em; }

#header { display: block; width: 100%; height: auto; }
#header .menu { display: block; width: 100%; overflow: hidden; margin: 10px 0px 40px 0px; }
#header .menu .l, #header .menu .r { width: calc(50% - 100px); text-align: center; }
#header .menu span { display: inline-block; padding: 0px 3px 0px 4px; color: var(--blue-color-dark); font-size: 1.0em; }
#header .menu span::after { content:"|"; }
#header .menu a { font-size: 0.8em; color: var(--blue-color-dark); font-weight: 400; text-decoration: none; }
#header .menu a:hover { color: var(--main-color); }

#header .logo { display: block; float: left; width: 320px; height: 50px; margin: 0px 0px 0px 0px; text-align: left;  border: 0px #000 solid; }
#header .logo a { text-decoration: none; }
#header .logo img { width: 90%; max-width: 320px; height: auto; }

#header .menu-tabs { display: block; float: left; width: calc(100% - 320px - 5px); height: 30px; margin: 0px 0px 0px 0px; padding: 20px 0px 0px 0px; border: 0px #000 solid; }
#header .menu-tabs a {
         display: inline-block;
         float: left;
         padding: 0px 20px 0px 20px;
         margin: 5px 2px 0px 2px;
         line-height: 25px;

         font-size: 0.8em;
         color: var(--main-color);
         font-weight: 400;
         text-decoration: none;

         border: 1px var(--main-color) solid;
         border-bottom: 0px;
         -webkit-border-top-left-radius: 6px;
         -webkit-border-top-right-radius: 6px;
         -moz-border-radius-topleft: 6px;
         -moz-border-radius-topright: 6px;
         border-top-left-radius: 6px;
         border-top-right-radius: 6px;

         background: var(--second-color);
         background: linear-gradient(180deg,#f3e285 0%, #fef3b8 20%, #f3e285 100%);
}
#header .menu-tabs a.big_l { padding-left: 50px; }
#header .menu-tabs a.big_r { padding-right: 50px; }
#header .menu-tabs a:hover, #header .menu-tabs a.active { font-weight: bold; background: linear-gradient(180deg, #fcd635 0%, #f3e285 20%, #fcd635 100%); line-height: 30px; margin: 0px 2px 0px 2px; }

#header .bar {
         display: block;
         width: 100%;
         height: var(--header-height);
         background: transparent url(../images/header-bg.png) center bottom repeat-x;
         background-size: auto var(--header-height);
         -webkit-border-radius: 10px;
         -moz-border-radius: 10px;
         border-radius: 10px;
}

#header .bar .navi {
         float: left;
         display: block;
         width: 220px;
         height: var(--header-height);
}

#header .bar .navi a {
         display: block;
         background: transparent url(../images/icon_navi.png) center left no-repeat;
         background-size: 34px 34px;
         line-height: 34px; height: 34px;
         padding: 8px 0px 8px 50px;
         margin: 10px 0px 0px 15px;

         font-size: 1.2em;
         font-weight: bold;
         text-decoration: none;
         transition: all 0.3s ease-in-out;
}
#header .bar .navi a:hover { background-image: url(../images/icon_navi.png); color: var(--font-color-light); text-shadow: rgba(0,0,0,0.2) 0px 0px 5px; }
#header .bar .navi a.active { background-image: url(../images/icon_x.png);  }

#header .bar .mid {
         float: left;
         display: block;
         width: 70px;
         height: var(--header-height);
         background: transparent url(../images/header-bg-mid.png) center bottom no-repeat;
         background-size: 100% var(--header-height);
}

#header .bar .form {
         float: left;
         display: block;
         width: calc(100% - 70px - 220px);
         height: var(--header-height);
         background: transparent url(../images/header-bg-2.png) center bottom repeat-x;
         background-size: auto var(--header-height);

         -webkit-border-top-right-radius: 10px;
         -webkit-border-bottom-right-radius: 10px;
         -moz-border-radius-topright: 10px;
         -moz-border-radius-bottomright: 10px;
         border-top-right-radius: 10px;
         border-bottom-right-radius: 10px;
}

#header .bar .form form { width: calc(100% - 150px); margin: 42px 0px 0px 0px; }
#header .bar .form form input  { width: calc(50% - 20px - 45px); border: 0px; font-size: 0.9em; line-height: 35px; height: 35px; padding-top: 0px; padding-bottom: 0px; }
#header .bar .form form select { width: calc(50% - 10px - 45px); border: 0px; font-size: 0.9em; line-height: 35px; height: 35px; padding-top: 0px; padding-bottom: 0px; }
#header .bar .form form input[type="submit"] { width: 90px; color: var(--main-color); background-image: url(../images/icon_search.png), linear-gradient(180deg,var(--second-color) 0%, var(--second-color-light) 10%, var(--second-color-dark) 100%); background-size: 20px 20px, 100% auto; background-position: 90% center; }
#header .bar .form form input[type="submit"]:hover { background-image: url(../images/icon_search.png), linear-gradient(180deg,var(--second-color-dark) 0%, var(--second-color) 100%); }


#header-cats { margin: 10px 0px; }
#header-cats .categories { display: none; grid-template-columns: repeat(5, 1fr); gap: 10px; position: absolute; z-index: 10; width: calc(var(--max-width) - 40px); height: auto; background-color: var(--main-color); padding: 20px; margin-top: -28px;
-webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; }
#header-cats .categories .boxed { display: block; float: left; width: auto; height: auto; margin: 10px 10px; color: #FFFFFF; }
#header-cats .categories .boxed a { display: block; color: var(--second-color); font-size: 0.9em; text-decoration: none; border-radius: 10px; }
#header-cats .categories .boxed a:hover { color: var(--font-color-light); }
#header-cats .categories .boxed a::before { content:"\2022 \0020"; }
#header-cats .categories .boxed a b { display: block; overflow: hidden; color: var(--font-color-light); }
#header-cats .categories .boxed a:first-child::before { content:""; }

#header-cats .slider-cat { display: block; width: 100%; height: 120px; margin: 20px 0px; }
#header-cats .slider-cat .a_l, #header-cats .slider-cat .a_r { float: left; display: block; cursor: pointer; width: 40px; height: 40px; padding: 30px 0px 30px 0px; }
#header-cats .slider-cat .a_l span, #header-cats .slider-cat .a_r span { display: block; width: 40px; height: 40px; background-color: transparent; background-position: center center; background-repeat: no-repeat; background-size: 32px auto; }
#header-cats .slider-cat .a_l span { background-image: url(../images/arrow_l.png); }
#header-cats .slider-cat .a_l:hover span { background-image: url(../images/arrow_l_hover.png); }
#header-cats .slider-cat .a_r span { background-image: url(../images/arrow_r.png); }
#header-cats .slider-cat .a_r:hover span { background-image: url(../images/arrow_r_hover.png); }

#header-cats .slider-cat .items { display: block; float: left; width: calc(100% - 40px - 40px - 20px); margin: 0px 10px; }
#header-cats .slider-cat .items .item { display: block; float: left; width: 124px; height: 120px; margin: 0px 10px 10px 10px; }
#header-cats .slider-cat .items .item a { color: var(--font-color-dark); text-decoration: none; font-weight: bold; color: var(--main-color); }
#header-cats .slider-cat .items .item a.icon { display: block; position: absolute; background-color: #FFFFFF; width: 80px; height: 80px; border: 2px var(--bg-grey2) solid; margin: 10px 20px 0px 20px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background-size: 60px 60px; }
#header-cats .slider-cat .items .item a:hover { color: var(--main-color); }
#header-cats .slider-cat .items .item .boxed { display: inline-block; height: 20px; width: 100px; overflow: hidden; line-height: 20px; font-size: 0.8em; text-align: center; border: 2px var(--bg-grey2) solid; margin-top: 50px; padding: 50px 10px 5px 10px; }
#header-cats .slider-cat .items .item:hover a.icon { border: 2px var(--main-color) solid; }


/* BC Navi */
#bc-navi {}
#bc-navi ul {}
#bc-navi ul li { list-style: none; display: inline-block; }
#bc-navi ul li a { display: inline-block; padding: 5px 10px; text-decoration: none; color: rgba(0,0,0,0.6); }
#bc-navi ul li a:hover { color: var(--main-color); }
#bc-navi ul li::after { padding: 5px 2px 5px 4px; content:"\00BB"; color: rgba(0,0,0,0.4); }
#bc-navi ul li:last-child::after { content:""; }



/* Footer */
#footer { display: block; background-color: var(--main-color-dark); width: 100%; padding: 40px 0px 0px 0px; margin: -20px 0px 0px 0px; font-size: 0.9em; }
#footer a { display: inline-block; padding: 5px 10px 5px 10px; border-radius: 10px; }
#footer a:hover { background: rgba(0,0,0,0.2); color: var(--second-color-light); text-decoration: none; }
#footer span { display: inline-block; padding: 0px 5px 0px 6px; }
#footer span::after { content:"|"; }

#footer .top { display: block; padding: 20px 0px 20px 0px; }
#footer .top .in { font-family: var(--main-font); font-size: 1.0em; color: var(--font-color-light); text-align: center; }
#footer .top a { color: var(--font-color-light); text-decoration: none; font-weight: normal; }
#footer .top .logo { display: block; width: 100%; margin: 0px; padding: 10px 10px 20px 10px; text-align: center; }
#footer .top .logo img { max-width: 300px; width: 100%; height: auto; }

#footer .bottom { display: block; padding: 20px 0px 20px 0px; background: rgba(0,0,0,0.1); }
#footer .bottom .in { font-family: var(--main-font); font-size: 1.0em; color: var(--second-color-dark); text-align: center; }
#footer .bottom a { color: var(--second-color-dark); text-decoration: none; font-weight: normal; }


/* Content Boxen */
.cbox { display: block; width: calc(100% - 30px - 4px); margin: 10px 0px 10px 0px; padding: 15px 15px 15px 15px; background: #FFFFFF; border: 2px rgba(0,0,0,0.05) solid; }

/* Content */


/* Newsletter */
#newsletter {
         z-index: 100;
         position: relative;
         display: block;
         width: calc(100% - 4px - 40px);
         margin: 50px 0px -40px 0px;
         padding: 10px 20px 10px 20px;

         border: 2px var(--second-color) solid;
         -webkit-border-radius: 20px;
         -moz-border-radius: 20px;
         border-radius: 20px;
}

#newsletter .news {
         position: absolute;

         display: inline-block;
         float: left;
         background: var(--blue-color);
         margin: -30px 0px 0px 110px;
         padding: 5px 10px 5px 10px;

         -webkit-border-radius: 20px;
         -moz-border-radius: 20px;
         border-radius: 20px;

         font-size: 1.2em;
         color: var(--font-color-light);
}

#newsletter .info {
         display: inline-block;
         float: left;
         width: 300px;
         font-size: 0.8em;
}
#newsletter .info img { max-width: 200px; width: 100%; height: auto; margin-bottom: -2px; }

#newsletter .form {
         display: inline-block;
         float: left;
         width: calc(100% - 300px - 255px);
         text-align: center;
}

#newsletter .form form {
         display: inline-block;
         width: 90%;
         min-width: 360px;
         margin: 15px 0px 0px 0px;
         padding: 0px;
         border: 0px;
         -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25);
         -moz-box-shadow:    0px 0px 6px 0px rgba(0, 0, 0, 0.25);
         box-shadow:         0px 0px 6px 0px rgba(0, 0, 0, 0.25);
         border-radius: 6px;
}
#newsletter .form  form input {
         float: left;
         margin: 0px !important;
         border: 0px;
         font-size: 1.1em;
         padding-top: 10px;
         padding-bottom: 10px;
}

#newsletter .form  form input[type="text"] {
         width: calc(100% - 16px - 140px);
         background: #FFFFFF;
         -webkit-border-top-right-radius: 0px;
         -webkit-border-bottom-right-radius: 0px;
         -moz-border-radius-topright: 0px;
         -moz-border-radius-bottomright: 0px;
         border-top-right-radius: 0px;
         border-bottom-right-radius: 0px;
}

#newsletter .form  form input[type="submit"] {
         width: 140px;
         -webkit-border-top-left-radius: 0px;
         -webkit-border-bottom-left-radius: 0px;
         -moz-border-radius-topleft: 0px;
         -moz-border-radius-bottomleft: 0px;
         border-top-left-radius: 0px;
         border-bottom-left-radius: 0px;
}

#newsletter .gk_elements.doctor { position: absolute; margin-top: -65px; margin-left: calc(var(--max-width) - 30px - 250px); }

/* Geizkragen Design Elemente */
.gk_elements { border: 0px #000 solid; background-size: 100% auto !important; }
.gk_elements.doctor { background: transparent url(../images/gk_schwein_doctor.png) center top no-repeat; width: 250px; height: 140px; }
.gk_elements.preis { background: transparent url(../images/gk_header_preis2.png) center -5px no-repeat; width: 170px; height: 90px; position: absolute; top: 0px; left: calc(50% - (170px / 2)); }
.gk_elements.kilt { background: transparent url(../images/gk_header_kilt.png) center top no-repeat; width: 100px; height: 65px; position: absolute; top: 77px; left: calc(50% - 180px); }
.gk_elements.gold { background: transparent url(../images/gk_header_gold.png) center top no-repeat; width: 126px; height: 145px; position: absolute; top: 90px;  z-index: 100; left: calc(50% + (var(--max-width) / 2 - 126px - 10px));  }


/* Socials */
#socials { display: inline-block; float: left; width: 200px; margin-top: 10px; }
#socials a { display: inline-block; float: left; width: 40px; height: 40px; background-image: url(../images/socials_hover.png); background-size: 240px 80px; background-repeat: none; opacity: 0.5; }
#socials a:hover { opacity: 1.0; }
#socials a.youtube { background-position: 0px 40px; } #socials a.youtube:hover { background-position: 0px 0px; }
#socials a.instagram { background-position: -40px 40px; } #socials a.instagram:hover { background-position: -40px 0px; }
#socials a.facebook { background-position: -80px 40px; } #socials a.facebook:hover { background-position: -80px 0px; }
#socials a.whatsapp { background-position: -120px 40px; } #socials a.whatsapp:hover { background-position: -120px 0px; }
#socials a.linkedin { background-position: -160px 40px; } #socials a.linkedin:hover { background-position: -160px 0px; }
#socials a.tiktok { background-position: -200px 40px; } #socials a.tiktok:hover { background-position: -200px 0px; }


/* Page / Seitenanzeige */
.pagination { display: flex; gap: 3px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 10px; margin: 20px 0px; padding: 10px 0px; font-size: 1.0em; }
.pagination a, .pagination div {
         cursor: pointer;
         display: inline-block;
         padding: 0px 0px 0px 0px;
         margin: 2px;

         width: 30px;
         line-height: 30px;
         height: 30px;

         font-size: 1.0em;
         color: var(--main-color);
         font-weight: 400;
         text-decoration: none;
          text-align: center;

         background: #FFFFFF;
         border: 2px var(--blue-color-light) solid;
         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;
}
.pagination div { cursor: not-allowed; }
.pagination a:hover, .pagination a.aktiv { background: var(--main-color); border: 2px var(--main-color-dark) solid; color: #FFFFFF; }



/* Sonstiges */
#w { display: none; z-index: 100; left: 0; bottom: 0px; padding: 5px 10px; color: #FFFFFF; position: fixed; background: #000000; }


/* Formulare  */
input, textarea, select {
         border: 1px rgba(0,0,0,0.3) solid;
         background: #FFFFFF;

         padding: 6px 8px 6px 8px;
         margin: 2px 2px 2px 0px;

         font-family: var(--main-font);
         font-size: 1.0em;
         color: #000000;

         vertical-align: top;
         -webkit-box-shadow: inset 2px 2px 4px 0px rgba(0, 0, 0, 0.0);
         -moz-box-shadow:    inset 2px 2px 4px 0px rgba(0, 0, 0, 0.0);
         box-shadow:         inset 2px 2px 4px 0px rgba(0, 0, 0, 0.0);

         -webkit-border-radius: 4px;
         -moz-border-radius: 4px;
         border-radius: 4px;
}

input[type="submit"] {
         padding: 6px 35px 6px 15px;
         margin: 2px 2px 2px 0px;

         background: var(--main-color) url(../images/icon_button.png) 92% center no-repeat;
         background-size: auto 50%;

         font-family: var(--main-font);
         text-align: left;
         font-size: 1.0em;
         text-shadow: rgba(0,0,0,0.1) 1px 1px 1px;
         color: #FFFFFF;

         border: 1px rgba(0,0,0,0.3) solid;
         -webkit-border-radius: 4px;
         -moz-border-radius: 4px;
         border-radius: 4px;

         cursor: pointer;
         -webkit-box-shadow: inset 2px 2px 4px 0px rgba(0, 0, 0, 0.0);
         -moz-box-shadow:    inset 2px 2px 4px 0px rgba(0, 0, 0, 0.0);
         box-shadow:         inset 2px 2px 4px 0px rgba(0, 0, 0, 0.0);

         transition: all 0.3s ease-in-out;
}

input[type="submit"]:hover {
        background: var(--main-color-dark) url(../images/icon_button.png) 95% center no-repeat;
        background-size: auto 50%;
}

form input[type="checkbox"] { display:none; }
form input[type="checkbox"] + label { width: 50px !important; height: 20px !important; padding: 1px !important; margin: 0px !important; border-radius: 20px !important; border: 2px solid rgba(0,0,0,0.1) !important; background-color: rgba(0,0,0,0.3) !important; display: inline-block; content: ""; float: left; margin-right: 10px !important; transition: background-color 0.5s linear !important; margin-top: 0px; }
form input[type="checkbox"] + label:hover { cursor: pointer; }
form input[type="checkbox"] + label::before { width: 16px; height: 16px; border-radius: 16px; background-color: #fff !important; display: block; content: ""; float: left; margin: 2px 0 0 2px; transition: margin 0.1s linear; }
form input[type="checkbox"]:checked+label{ background-color: var(--main-color) !important; }
form input[type="checkbox"]:checked+label::before { margin: 2px 0 0 32px; }