"); } [type="checkbox"], [type="radio"] { width: 1.6rem; height: 1.6rem; } .button, [type="button"], [type="reset"], [type="submit"], button { padding: 1rem 2.5rem; color: var(--c-darkGrey); background: var(--c-lightGrey); border-radius: 4px; border: 1px solid transparent; font-size: var(--font-size); line-height: 1; text-align: center; transition: opacity 0.2s ease; text-decoration: none; transform: scale(1); display: inline-block; cursor: pointer; } .grouped {display: flex;} .grouped > *:not(:last-child) { margin-right: 16px;} .grouped.gapless > * { margin: 0 0 0 -1px; border-radius:0 ; } .grouped.gapless > *:first-child { margin: 0 ; border-radius:4px 0 0 4px ;} .grouped.gapless > *:last-child { border-radius:0 4px 4px 0 ; } .button + .button {margin-left: 1rem;} .button:hover, [type="button"]:hover, [type="reset"]:hover, [type="submit"]:hover, button:hover {opacity: 0.8; } .button:active, [type="button"]:active, [type="reset"]:active, [type="submit"]:active, button:active {transform: scale(0.98); } input:disabled, button:disabled, input:disabled:hover, button:disabled:hover { opacity: 0.4; cursor: not-allowed; } .button.primary, .button.secondary, .button.dark, .button.error, .button.success, [type="submit"] {z-index: 1;color:#fff} .button.primary {background: var(--c-primary)} .button.secondary { background-color: var(--c-grey);} .button.dark { background-color: var(--c-darkGrey);} .button.error { background-color:#d43939;} .button.success { background-color:#28bd14;} .button.outline { background-color: transparent; border-color: var(--c-lightGrey);} .button.outline.primary { border-color: var(--c-primary); color: var(--c-primary);} .button.outline.secondary { border-color: var(--c-grey); color: var(--c-grey);} .button.outline.dark { border-color: var(--c-darkGrey); color: var(--c-darkGrey);} .button.clear { background-color: transparent; border-color: transparent; color: var(--c-primary);} .button.icon { display: inline-flex; align-items: center;} .button.icon > img { margin-left: 2px;} .button.icon-only { padding: 1rem;} ::placeholder { color: #bdbfc4;} .nav {display: flex; min-height: 5rem; align-items: stretch;} .nav>.container {display: flex;} .nav-center, .nav-left, .nav-right {display: flex; flex: 1;} .nav-left {justify-content: flex-start;} .nav-right {justify-content: flex-end;} .nav-center {justify-content: center;} @media screen and (max-width: 480px) { .nav, .nav>.container { flex-direction: column; } .nav-center, .nav-left, .nav-right {flex-wrap: wrap;justify-content: center;} } .nav a, .nav .brand { text-decoration: none; display: flex; align-items: center; padding: 1rem 2rem; color: var(--c-darkGrey);} .nav [aria-current="page"]:not(.button), .nav .active:not(.button) { color: #000; /* fallback */ color: var(--c-primary); } .nav .brand {font-size: 1.75em;padding-top: 0;padding-bottom: 0;} .nav .brand img {padding-right: 1rem;} .nav .button {margin: auto 1rem;} .card { padding: 1rem 2rem; border-radius: 4px; background: var(--bg-color); box-shadow: 0 1px 3px var(--c-grey);}.card p:last-child { margin: 0;} .card header > * { margin-top: 0; margin-bottom: 1rem;} .tabs {display: flex;} .tabs a {text-decoration: none;} .tabs > .dropdown > summary, .tabs > a { padding: 1rem 2rem; flex: 0 1 auto; color: var(--c-darkGrey); border-bottom: 2px solid var(--c-lightGrey); text-align: center; } .tabs > a[aria-current="page"], .tabs > a.active, .tabs > a:hover {opacity: 1;border-bottom: 2px solid var(--c-darkGrey);} .tabs > a[aria-current="page"], .tabs > a.active { border-color: var(--c-primary);} .tabs.is-full a { flex: 1 1 auto;} details.dropdown { position: relative; display: inline-block;} details.dropdown > :last-child { position: absolute; left: 0; white-space: nowrap;} .text-left { text-align: left;} .text-right { text-align: right;} .text-justify { text-align: justify;} .is-full-screen {width: 100%;min-height: 100vh;} .is-full-width {width: 100%} .is-center {display: flex;align-items: center;justify-content: center;} .is-right {display: flex;align-items: center;justify-content: flex-end;} .is-left {display: flex;align-items: center;justify-content: flex-start;} .clearfix {content: "";display: table;clear: both;} .center-screen{position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);} .hidden {display: none ;} @media screen and (max-width: 599px) {.hidden-xs {display: none ;}} @media screen and (min-width: 600px) and (max-width: 899px) {.hidden-sm {display: none ;}} @media screen and (min-width: 900px) and (max-width: 1199px) {.hidden-md {display: none ;}} @media screen and (min-width: 1200px) {.hidden-lg {display: none ;}} @media print {.hidden-pr {display: none ;}} .w3amp{} .priceinlist{display: inline-block; color: #ffffff; padding: 0.5rem; letter-spacing: 1.5px;border-radius:5px;margin-top:-1rem;z-index:25;position:absolute;right:25px;top:2em;background:#55555590} .menu-active{font-weight:bold} .buynowbtn{border: 1px solid var(--c-grey); color: var(--c-darkGrey); float:right;border-radius:0px 0px 5px 5px;} /* header nav*/ .header {background-color: var(--bg-nav); box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1); position: fixed; width: 100%; z-index: 30;} .header ul { margin: 0; padding: 0; list-style: none; overflow: hidden} .header li a { display: block; padding: 5px 5px; border-right: 0px solid var(--bg-nav-hover); text-decoration: none;margin-top:10px;color:var(--bg-nav-hover)} .header li a:hover, .header .menu-btn:hover { background-color: var(--bg-nav-hover);color:#ffffff} .header .logo { display: block; float: left; font-size: 2em; padding: 10px 20px; text-decoration: none;color:indigo} /* menu */ .header .menu { clear: both; max-height: 0; transition: max-height .2s ease-out;} /* menu icon */ .header .menu-icon { cursor: pointer; display: inline-block; float: right; padding: 28px 20px; position: relative; user-select: none;} .header .menu-icon .navicon { background: #333333; display: block; height: 2px; position: relative; transition: background .2s ease-out; width: 18px;} .header .menu-icon .navicon:before, .header .menu-icon .navicon:after { background: #333333; content: ""; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%;} .header .menu-icon .navicon:before { top: 5px;} .header .menu-icon .navicon:after { top: -5px;} /* menu btn */ .header .menu-btn { display: none;} .header .menu-btn:checked ~ .menu { max-height: 600px;} .header .menu-btn:checked ~ .menu-icon .navicon { background: transparent;} .header .menu-btn:checked ~ .menu-icon .navicon:before { transform: rotate(-45deg);} .header .menu-btn:checked ~ .menu-icon .navicon:after { transform: rotate(45deg);} .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { top: 0;} .menu-active{font-size:105%;color:red} /* 48em = 768px */ @media (min-width: 48em) { .header li {float: left;} .header li a {padding:2px 10px 2px 10px} .header .menu { clear: none; float: right; max-height: none; } .header .menu-icon { display: none; } } @media screen and (max-width: 48em){.header li a {padding-left:3em;margin-bottom:-40px}} .tooltip::after{background-color:var(--bg-color-footer);color:var(--bg-color)} .tooltip{color:var(--bg-color-footer)} .hpb{padding:2px;margin:2px;width:100%} .icon-input { background-image: url('data:image/svg+xml,'); background-repeat: no-repeat; flex-shrink: 0; height: 28px; margin-top: 1rem; width: 27px; } i{font-family: Roboto Serif} .badge,.tag{display: inline-block; border: 1px solid var(--c-lightGrey); color: var(--c-grey); padding: 0.5rem; line-height: 1; letter-spacing: 0.5px;} .badge{border-radius:5px} .tag+.tag { margin-left: 1rem;} .table,.table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table} .table-all{border:1px solid #ccc} .bordered tr,.table-all tr{border-bottom:1px solid #ddd} .striped tbody tr:nth-child(even){background-color:#f1f1f1} .table-all tr:nth-child(odd){background-color:#fff} .table-all tr:nth-child(even){background-color:#f1f1f1} .hoverable tbody tr:hover,.ul.hoverable li:hover{background-color:#ccc} .centered tr th,.centered tr td{text-align:center} .table td,.table th,.table-all td,.table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top} .table th:first-child,.table td:first-child,.table-all th:first-child,.table-all td:first-child{padding-left:16px} amp-selector[role=tablist].tabs-with-flex {display: flex;flex-wrap: wrap;} amp-selector[role=tablist].tabs-with-flex [role=tab] {flex-grow: 1;text-align: center;padding:0.5rem;} amp-selector[role=tablist].tabs-with-flex [role=tab][selected] {outline: none;border-bottom: 2px solid var(--c-primary);} amp-selector[role=tablist].tabs-with-flex [role=tabpanel] {display: none;width: 100%;order: 1;padding:2rem;} amp-selector[role=tablist].tabs-with-flex [role=tab][selected] + [role=tabpanel] {display: block;} amp-selector[role=tablist].tabs-with-selector {display: flex;} amp-selector[role=tablist].tabs-with-selector [role=tab][selected] {outline: none;border-bottom: 2px solid var(--c-primary);} amp-selector[role=tablist].tabs-with-selector {display: flex;} amp-selector[role=tablist].tabs-with-selector [role=tab] {width: 100%;text-align: center;padding:0.5rem;} amp-selector.tabpanels [role=tabpanel] {display: none;padding:2rem;} amp-selector.tabpanels [role=tabpanel][selected] {outline: none;display: block;} ol.breadcrumb { padding: 0px; list-style: none;} ol.breadcrumb li { display: inline;font-size: 1.11em;} ol.breadcrumb li+li:before {padding: 2px; content: "/\00a0";} ol.breadcrumb li a {text-decoration: none;} ol.breadcrumb li a:hover {text-decoration: underline;}