/*
         ==============================================================
         PVK Landingpage V2.1 CSS
         Gestaltung / Programmierung: Kreativagentur Freudenschrei UG
         ==============================================================
         Grundfarben: #6a9b24 (Grün), #7ec01f (Grün hell), #f39500 (Orange), #fa6918 (Orange dunkel), #f2f2f2 (Grau Hell)
*/

/* Einstellungen */
:root {
         --main-font: 'DM Sans';
         --second-font: 'DM Sans';

         --main-color: #48a84f;
         --main-color2: #48a84f;

         --second-color: #f38400;
         --second-color2: #f38400;

         --bg-color: #f2f2f2;
         --bg-color2: rgba(0,0,0,0.08);
         --bg-color3: rgba(0,0,0,0.10);

         --font-color: #343534;
         --font-color2: #000000;
         --font-color-light: #FFFFFF;

         --hero-bg: #ffffff;

         --max-width: 1200px;
}


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

a:hover {
         color: #000000;
         text-decoration:none;
}

a.button:link, a.button:visited {
         display: inline-block;
         padding: 15px 60px 15px 30px;
         margin: 2px 0px;

         background: var(--main-color) url(../images/dot_next.png) center right no-repeat;
         background-size: auto 85%;

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

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

a.button:hover {
         font-family: var(--main-font);
         color: #FFFFFF;
         background-color: var(--second-color);
         text-decoration:none;
}


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

h2 {
         font-size: 1.6em;
         font-weight: 600;
         text-align:center;
         color: var(--font-color2);
}

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

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

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


/* Standarts */
body {
         background:#FFFFFF;
         width: 100%;
         height: 100%;
         margin: 0;
         padding: 0;
}

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, .right     { 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; }

.white   { color: #FFFFFF; }
.black   { color: #000000; }

.f_small   { font-size: 0.8em !important; }
.f_normal     { font-size: 1.0em !important; }
.f_big     { font-size: 1.2em !important; }
.f_bigger  { font-size: 1.4em !important; }

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

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

.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); }
.bg2     { background-color: var(--bg-color2); }
.bg3     { background-color: var(--main-color); }
.bg4     { background-color: var(--second-color); }

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

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

/*#impressum td:nth-child(odd), #impressum td:nth-child(even) { background: #FFFFFF; border-bottom: 0px rgba(0,0,0,0.05) solid; border-top: 0px rgba(255,255,255,0.75) solid; }*/

ul li { list-style: none; display: block; background: transparent url(../images/dot_check.png) top left no-repeat; background-size: 40px; padding: 5px 0px 5px 50px; margin: 5px 0px 10px 0px; font-size: 1.4em; font-weight: bold; }
ul li i { display: block; font-size: 0.65em; font-weight: normal; margin: 5px 0px 10px 0px; }
ul li span { display: block; font-size: 0.8em; font-weight: normal; }
ul li.eins { background-image: url(../images/dot_check_1.png); }
ul li.zwei { background-image: url(../images/dot_check_2.png); }
ul li.drei { background-image: url(../images/dot_check_3.png); }



/* Seite */
#wrapper {
         width: 100%;
         margin: 0px;
         padding: 0px;
         min-width: 320px;
}

#wrapper.content #header { height: 270px; }
#wrapper.content #site { padding: 30px 0px 30px 0px; }

.in {
         width: var(--max-width);
         margin: 0px auto;
         padding: 0px 20px;
}

#header {
         background-color: var(--hero-bg);

         background-image: url(../images/header_1.jpg);
         background-position: center bottom;
         background-repeat: no-repeat;
         background-size: auto 100%;
         background-size: cover;

         display: block;
         width: 100%;
         height: 700px;
         /*border-bottom: 20px #f5f5f5 solid; */
}

#header.small {
         background-color: var(--hero-bg);

         background-image: none;
         background-position: center bottom;
         background-repeat: no-repeat;
         background-size: auto 100%;
         background-size: cover;

         display: block;
         width: 100%;
         height: 100px;
         /*border-bottom: 20px #f5f5f5 solid; */
}

#header .logo {
         display: block;
         width: 100%;
         height: auto;
         margin-bottom: 10px;
         background: transparent url(../images/logo_shadow.png) center calc(100% - 20px) no-repeat;
         text-align: center;
}
#header.small .logo { background-image: none; }
#header .logo a { text-decoration: none; }

#header .logo img {
         width: calc(100% - 20px);
         max-width: 320px;
         height: auto;
}

#header .logo span {
         display: block;
         width: 100%;
         font-size: 1.1em;
         color: rgba(0,0,0,0.4);
         text-decoration: none;
}

#hero_rechner {
         display: block;
         float: right;

         background-color: rgba(248,248,248, 0.9);
         width: calc(50% - 40px - 0px);
         max-width: calc(1200px/2 - 40px - 0px);

         position: absolute;
         left: calc(50% + 20px);
         z-index: 2;

         padding: 0px 20px 0px 20px;
         margin: 30px 0px 0px 0px;

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

         -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
         -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
         box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);

}

#hero_rechner .headline, #hero_rechner .headline_last {
         display: block;
         width: calc(100% - 0px);
         height: 70px;
         padding: 20px 0px 0px 0px;

         font-family: var(--second-font);
         font-size: 1.6em;
         font-weight: 900;
         text-align: center;
         color: var(--font-color);
}
#hero_rechner .headline { height: 110px; }
#hero_rechner .headline span {
         display: block;
         width: 100%;
         font-size: 0.9em;
         color: rgba(0,0,0,0.7) !important;
         text-decoration: none;
         font-weight: 400;
         padding: 5px 0px 0px 0px;
}

#hero_rechner .headline_last { display: none; font-size: 1.5em; height: 55px; }


#hero_rechner .fortschritt {
         display: block;
         width: calc(100% - 0px);
         height: 6px;
         background: rgba(0,0,0,0.1);
         margin: 20px 0px 10px 0px;
         padding: 0px;
}

#hero_rechner .fortschritt span {
         display: inline-block;
         float: left;
         width: 0%;
         height: 8px;
         margin: 0px;
         margin-top: -1px;
         padding: 0px;

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

         background: var(--main-color);
}

#hero_rechner .form {
         display: block;
         width: calc(100% - 2px);
         min-height: 300px;
         padding: 0px 0px 0px 0px;
         margin: 10px 0px 10px 0px;

         font-family: var(--second-font);
         font-size: 1.0em;
         font-weight: normal;
         text-align: center;
         color: var(--font-color);
         border: 0px #000000 solid;
}

#hero_rechner .secure {
         position: absolute;
         margin-top: 10px;
         margin-left: -20px;
         width: calc(100% - 2px);
         text-align: center;
}

#hero_rechner .secure img {
         width: calc(100% - 20px);
         max-width: 462px;
         height: auto;
}



/* Seite */
#site { padding: 0px 0px 0px 0px; min-height: 150px; font-size: 1.0em; }

/* bewertungen */
#bewertungen { display: block; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; padding: 20px; }
#bewertungen .item { float: left; display: block; width: calc(50% - 40px - 0px - 3px); padding: 0px; margin: 20px; }
#bewertungen .item .sterne { display: block; width: calc(100% - 0px); padding: 0px 0px 10px 0px; }
#bewertungen .item .sterne img { float: left; width: 30px; height: 30px; }
#bewertungen .item .stimme { position: relative; padding: 10px 20px; font-size: 1.0em; background:#FFFFFF; -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1); box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);}
#bewertungen .item .stimme:after { top: 100%; right: 20px; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-top-color: #ffffff; border-width: 15px; margin-left: -15px; }
#bewertungen .item .name { display: block; background: rgba(0,0,0,0.00); padding: 20px 20px 10px 20px; font-size: 0.9em; text-align: right; color: var(--main-color); }


/* Footer */
#footer { width: 100%; padding: 20px 0px; margin: 10px 0px; font-family: var(--second-font); font-size: 1.1em; color: var(--font-color); }
#footer a { color: var(--font-color); text-decoration: none; }
#footer a:hover { color: var(--main-color); text-decoration: none; }
#footer .logos { text-align: center; margin: 20px 0px 50px 0px; }
#footer .logos img { width: calc(100% / 7 - 40px); height: auto; margin: 10px; filter: grayscale(1); opacity: 0.5; transition: all 0.3s ease-in-out; }
#footer .logos img:hover { opacity: 0.8; }

#footer .vorteile { display: block; width: calc(100% - 60px); padding: 20px 30px; margin: 10px 0px; background: var(--main-color); -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; }
#footer .vorteile ul { margin: 0px; padding: 0px; }
#footer .vorteile .item, #footer .vorteile ul li { float: left; list-style: none; width: calc(20% - 60px); display: inline-block; background: transparent url(../images/dot_check2.png) center left no-repeat; padding: 0px 0px 0px 50px; margin: 0px 10px 0px 0px; color: #FFFFFF; font-size: 1.0em; font-weight: 400; }
#footer .vorteile .item span, #footer .vorteile ul li span { font-size: 0.9em; }



/* Content Boxen */
.box {
         display: block;
         margin: 10px 0px 10px 0px;
         padding: 10px 10px 10px 10px;
         background: #FFFFFF;

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

         -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.10);
         -moz-box-shadow:    0px 0px 3px 0px rgba(0, 0, 0, 0.10);
         box-shadow:         0px 0px 3px 0px rgba(0, 0, 0, 0.10);
}

/* Grafiken */
.testsieger { float: right; margin: 0px 0px 0px 75px; width: 440px; height: auto; }
.sparen, .vergleich_pkv_gkv, .beihilfe { float: left; margin: 0px 75px 0px 0px; width: 500px; height: auto; }

div[class^="grafik_"]{ display: block; width: 100%; height: calc(var(--max-width) / 4); max-width: 1200px; background-size: 100% auto; }

.grafik_3steps { background: transparent url(../images/grafik_3steps.png) center top no-repeat; }
.grafik_angestellt { background: transparent url(../images/grafik_vorteile.jpg) center top no-repeat; margin: 20px 0px; }
.grafik_selbststaendig { background: transparent url(../images/grafik_leistung.jpg) center top no-repeat; margin: 50px 0px 20px 0px; }
.grafik_beamte { background: transparent url(../images/grafik_beamte.jpg) center top no-repeat; margin: 20px 0px; }

/* Sonstiges */
#w { display: block; z-index: 100; left: 0; bottom: 0px; padding: 5px 10px; color: #FFFFFF; position: fixed; background: #000000; }
#icon_phone { position: absolute; z-index: 10; top: 0px; left: calc(50% + 600px - 50px); cursor: pointer; }
#icon_phone { position: absolute; z-index: 10; top: 0px; left: calc(50% + 600px - 50px); cursor: pointer; }
#icon_badge { position: fixed; z-index: 10; top: 300px; right: 0px; width: 250px; height: 170px; }
#icon_badge img { width: 100%; height: auto; }
#icon_badge2 { background-color: #f5f5f5; display: block; width: 100%; height: 40px; padding: 10px 0px; text-align: center; cursor: pointer; opacity: 0.8; }

#trust_logos { background-color: #f5f5f5; display: block; width: 100%; height: auto; padding: 10px 0px; text-align: center; cursor: pointer; opacity: 0.8; }
#trust_logos .logos { text-align: center; margin: 10px auto 10px auto; }
#trust_logos .logos img { width: calc(100% / 8 - 30px); height: auto; margin: 10px 10px 0px 10px; filter: grayscale(1); opacity: 0.5; transition: all 0.3s ease-in-out; }
#trust_logos .logos img:hover { opacity: 0.8; }


#socials { position: absolute; z-index: 10; top: 40px; left: calc(50% - 600px - 0px); }
#socials a { display: inline-block; float: left; width: 30px; height: 30px; background-image: url(../images/socials.png); background-size: 180px 60px; background-repeat: none; opacity: 0.5; }
#socials a:hover { opacity: 1.0; }
#socials a.youtube { background-position: 0px 0px; } #socials a.youtube:hover { background-position: 0px 30px; }
#socials a.instagram { background-position: -30px 0px; } #socials a.instagram:hover { background-position: -30px 30px; }
#socials a.facebook { background-position: -60px 0px; } #socials a.facebook:hover { background-position: -60px 30px; }
#socials a.whatsapp { background-position: -90px 0px; } #socials a.whatsapp:hover { background-position: -90px 30px; }
#socials a.linkedin { background-position: -120px 0px; } #socials a.linkedin:hover { background-position: -120px 30px; }
#socials a.tiktok { background-position: -150px 0px; } #socials a.tiktok:hover { background-position: -150px 30px; }

/* Popups */
#cashbackpopup {
         position: absolute;
         z-index: 100;
         left: calc(50% - 600px);
         top: calc(50% - 200px);
         top: 200px;
         display: none;
         background: #ffffff url(../images/popup_wechselaktion.png) center bottom no-repeat;
         background-size: 100% auto;
         width: 600px;
         height: 450px;
         -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.30);
         -moz-box-shadow:    0px 0px 30px 0px rgba(0, 0, 0, 0.30);
         box-shadow:         0px 0px 30px 0px rgba(0, 0, 0, 0.30);
         cursor: pointer;
}
#cashbackpopup.y2025 { background-image: url(../images/grafik_wechsel_2025.png); }
#cashbackpopup.y2026 { background-image: url(../images/grafik_wechsel_2026.png); }
#cashbackpopup.y2027 { background-image: url(../images/grafik_wechsel_2027.png); }
#cashbackpopup.y2028 { background-image: url(../images/grafik_wechsel_2028.png); }
#cashbackpopup .x { position: absolute; right: 5px; top: 5px; display: block; background-color: rgba(0,0,0,0.05); width: 30px; height: 30px; text-align: center; line-height: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;}
#cashbackpopup .title {
         display: inline-block;
         float: left;
         width: 300px;
         font-size: 1.8em;
         font-weight: bold;
         margin: 44px 0px 20px 30px;
         border: 0px solid #000000;
}
#cashbackpopup .title span { display: inline-block; color: var(--main-color); }

#cashbackpopup .time {
         display: inline-block;
         background-color: var(--main-color);
         float: right;
         width:  200px;
         padding: 10px 10px 10px 10px;
         margin: 40px 30px 0px 0px;

         font-size: 1.2em;
         font-weight: bold;
         color: #FFFFFF;
         text-align: center;

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

#phonepopup {
         display: none;
         position: absolute;
         z-index: 120;
         left: calc(50% - 280px);
         top: calc(50% - 80px);
         background: #EEEAE9 url(../images/hotline.jpg) center center no-repeat;
         background-size: 100% auto;
         width: 520px;
         height: 160px;
         -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.30);
         -moz-box-shadow:    0px 0px 30px 0px rgba(0, 0, 0, 0.30);
         box-shadow:         0px 0px 30px 0px rgba(0, 0, 0, 0.30);
         cursor: pointer;
}

/* Wiki */
#wiki {  }
#wiki, #wiki .vorteile, #wiki a {  }
#wiki .pad { padding: 15px 30px 15px 30px; }
.bg1 { background: #f7f7f7; padding:20px;}
#wiki u { text-decoration: none; border-bottom: 3px #82B600 solid; padding-bottom: 0px; font-weight: bold; }
#wiki ul { margin: 15px 0px; padding: 0px; list-style: none; }
#wiki li { margin: 5px 0px; padding: 5px 0px 5px 35px; line-height: 1.5em; list-style: none; background: transparent url(../images/grafik_pfeil.png) left 8px no-repeat; }
#wiki .wi { font-style: italic; text-align: right; font-size: 0.8em; color: #9F9F9F; }
#wiki h1 { font-size: 1.5em; color: #000000; padding: 20px 0px 10px 0px; }
#wiki h1 span { display: inline-block; font-size: 0.6em; color: #FFFFFF; padding: 5px 10px; text-shadow: #82B600 1px 1px 0px;  background-color: #82B600; margin: 10px 0px; }
#wiki h2 { font-size: 1.2em; color: #000000; padding: 0px 0px 10px 0px; }
#wiki h3 { font-size: 1.2em; color: #000000; padding: 0px 0px 10px 0px; }
#wiki h4.links { width: 100%; display: block !important; font-size: 1.2em; text-align: left; color: #000000; padding: 0px 0px 5px 0px; }
#wiki .top { text-align: left; font-size: 1.1em; color: #000000; padding: 0px 0px 20px 0px; }
#wiki .vorteile { float: right; width: calc(100% - 510px); background: none; font-size: 1.0em; }
#wiki .interne_links { margin: 15px 0px; padding: 25px; }
#wiki .interne_links a { display: block; float:left; width: calc(50% - 104px); padding: 20px 30px 20px 60px; margin: 5px; border: 2px #82B600 solid; font-size: 1.2em; text-decoration: none; background: #FFFFFF url(https://www.pkv-tarifvergleich.info/images/nextlabel.gif) left center no-repeat; -webkit-box-shadow: 0px 10px 2px -7px rgba(0, 0, 0, 0.10); -moz-box-shadow: 0px 10px 2px -7px rgba(0, 0, 0, 0.10); box-shadow: 0px 10px 2px -7px rgba(0, 0, 0, 0.10);}
#wiki .interne_links a:hover { color: #82B600; }
#wiki .checkliste {background: #f7f7f7; padding:20px; }

#wiki img.l { float:left; margin: 0px 25px 15px 0px; }
#wiki img.r { float:right; margin: 0px 0px 15px 25px; }

/* FAQ */
#faq .item { position:relative; padding-bottom:10px; }
#faq .item h4 { display: block; cursor: pointer; width: calc(100% - 45px - 2px); padding: 5px 35px 5px 10px; margin: 0px; background: rgba(0,0,0,0.1) url(../images/pfeil-unten.png) no-repeat right center; border: 1px rgba(0,0,0,0.1) solid; font-size: 1.2em; font-weight: 600; color: var(--main-color); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#faq .item h4.open { background: #fcfcfc url(../images/pfeil-oben.png) no-repeat right center; -webkit-border-radius: 5px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius: 5px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-radius: 5px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; }
#faq .item .faqtext { display: none; background: rgba(0,0,0,0.1); border: 1px rgba(0,0,0,0.1) solid; width: calc(100% - 20px - 2px); padding: 10px; -webkit-border-radius: 0px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius: 0px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-radius: 0px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; }


/* Formulare */
input, textarea, select {
         border: 1px rgba(0,0,0,0.1) solid;
         background-color: rgba(0,0,0,0.03);

         padding: 3px 4px 2px 6px;
         margin: 2px 5px 2px 0px;

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

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

         -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
         border-radius: 3px;
}
select option:disabled { color: rgba(0,0,0,0.5) !important; }

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

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

         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: 0px rgba(0,0,0,0.3) solid;
         -webkit-border-radius: 30px;
         -moz-border-radius: 30px;
         border-radius: 30px;

         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-color: var(--second-color); }

form .check input[type="checkbox"] { display:none; }
form .check 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 .check input[type="checkbox"] + label:hover { cursor: pointer; }
form .check 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 .check input[type="checkbox"]:checked+label{ background-color: var(--main-color) !important; }
form .check input[type="checkbox"]:checked+label::before { margin: 2px 0 0 32px; }