/**::selected {*/
/*	background-color:transparent;*/
/*}*/

:root {
	/*--cassiopeia-color-primary: hsl(220deg, 67%, 20%);*/
	/*--cassiopeia-color-link: hsl(220deg, 67%, 40%);*/
	/*--cassiopeia-color-hover: hsl(242deg, 30%, 36%);*/

	--magic-max-width: 980px;
	--magic-font-family-headings: "Quicksand";

	--magic-dark-rgb: 17, 99, 146;
	--magic-medium-rgb: 24, 119, 173;
	--magic-light-rgb: 40, 140, 197;

	--magic-background-color: #f8f8f8;
	--magic-background-highlight:white;

	--magic-dark-color: rgb(17, 99, 146);
	--magic-medium-color: rgb(24, 119, 173);
	--magic-light-color: rgb(40, 140, 197);

	--magic-border-color: #d3d3d3;
	--magic-menu-border-color: rgba(255, 255, 255, 0.18);

	--magic-lightergray: #eee;
	--magic-lightgray: lightgray;
	--magic-gray: darkgray;
	--magic-mediumgray: #8c8c8c;
	--magic-darkgray: #666666;

	--magic-table-header-background: #f0f0f0;

	--magic-mainmenu-text: hsla(0, 0%, 100%, 0.8);
	--magic-mainmenu-text-hover: hsla(0, 0%, 100%, 1.0);
	--magic-mainmenu-text-active: hsla(0, 0%, 100%, 1.0);
	--magic-submenu-text-active:  var(--magic-dark-color);


	--magic-alert-warning-background: #fff3cd;
	--magic-alert-warning-text: #81673a;
	--magic-alert-error-background: #fdb0b0;
	--magic-alert-error-text: #7a2c2c;

	--magic-h1-color: var(--magic-medium-color);
	--magic-h2-color: var(--magic-medium-color);
	--magic-h3-color: var(--magic-medium-color);
	--magic-h3-faqs: var(--magic-darkgray);
	--magic-h4-color: var(--magic-darkgray);

	--magic-text: #222;
	--magic-text-gray: var(--magic-mediumgray);
	--magic-text-error: red;

	--magic-a-color: var(--magic-medium-color);
	--magic-a-hover: var(--magic-dark-color);

	--magic-winbutton-background: var(--magic-lightergray);
	--magic-readmore-text: var(--magic-a-color);

	--magic-btninfo-background: var(--magic-medium-color);
	--magic-btninfo-background-hover: var(--magic-light-color);

	--magic-buycart-btn-background: var(--magic-table-header-background);
	--magic-buycart-btn-background-hover: var(--magic-lightgray);
}

/* latin-ext */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: local('Quicksand Regular'), local('Quicksand-Regular'), url('Quicksand_LatinExt.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: local('Quicksand Regular'), local('Quicksand-Regular'), url('Quicksand_Latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*------------------------------------------*/
html {
   	background: var(--magic-background-color);
}

body {
  	height: 100%;
	min-height:100%;
    position: relative;
   	color: var(--magic-text);
   	background: var(--magic-background-color);
  	box-sizing: border-box;
}

body.site
{
	padding: 0;
	font-size: 0.95em;
	line-height: 1.2em;
	border: none;
	min-height: 100vh;
}
.body .container{
	background-color: transparent;
	border: none;
	border-radius:0;
	padding:0;
	box-shadow: none;
	padding-bottom: 5em;
	/* margin-top:  1em; */
}



h1, h2, h3, h4, h5, h6, .site-title, .header ul.nav li {
	font-family: var(--magic-font-family-headings), sans-serif;
}

@supports (display:grid) {
	.blog-items .blog-item {
		overflow: visible;
	}
}

@supports (display: grid) {
	.blog-items {
		grid-gap: 0em;
	}
	.features .blog-items{
		column-gap: 6em;
	}

	.site-grid{
		overflow: visible;
		max-width:var(--magic-max-width);
		margin-left: auto;
		margin-right:auto;
		grid-gap: 0 0.7em;
	}
}

.grid-child {
	max-width:var(--magic-max-width);
}

 .site-grid > [class^=container-],
  .site-grid > [class*=" container-"] {
	 max-width:var(--magic-max-width);
  }

header {
	padding-top: 1.5em;
	padding-bottom: 1.5em;
}

header .grid-child.brand{
	display: flex;
	align-items: center;
	padding: 1.5em 0;
}

.container-header .navbar-brand{
	padding:0;
	font-size: 1em;
	margin: 0 0 0 0.5em;
}

.container-header .navbar-brand a{
	text-decoration: none;
}

.container-header .navbar-brand-inner{
	display: flex;
	align-items: center;
	gap: min(1.75vw, 1.1em);
}

.container-header .site-logo {
	/* float:left; */
	width: max(min(5vw, 50px), 22px);
}

.container-header .site-title {
	color: var(--magic-mainmenu-text);
	/* margin-left: 0.48em; */
	letter-spacing: 0.7pt;
	font-size: max(min(4vw, 38px), 22px);
	/* vertical-align: baseline; */
	display: inline-block;
}

.site-title:hover {
	color: var(--magic-mainmenu-text-hover);
}

.container-header .navbar-brand.top-menu{
	display: inline-block;
	margin-top: 0.75em;
	margin-right: min(7vw, 77px);
	margin-left: auto;
	margin-bottom: 0;
}

/*----------------------------------*/
hr {
    margin: 18px 0;
    border: 0;
    border-top: 1px dotted var(--magic-border-color);
}

h1 {
	font-size: 26px;
	line-height: 28px;
}

.note{
	background-color: var(--magic-background-highlight);
	border:1px solid var(--magic-border-color);
	padding: 1em;
	border-radius: 6px;
	/* box-shadow: 0 0 4px #00000038; */
}

p span.note{
	display:inline-block;
	padding-top: 0.5em;
	padding-bottom: 0.5em;

}

.container-header{
	background-color: var(--magic-dark-color);
	background-image: none;
	box-shadow: none;
	padding: 0;
}

/*------------------------------------------*/
#content{
	margin-top:1em;
}

.page-header {
    border-bottom:  none;
    margin:0;
}

h1{
	margin: 0.5em 0 1em 0;
	color: var(--magic-h1-color);
}
.card-header{
	color: var(--magic-h1-color);
}

h2 {
    margin-top: 1.5em;
    padding-top: 1em;
    border-top: 1px dotted var(--magic-border-color);
    margin-bottom: 0.4em;
    color: var(--magic-h2-color);
    font-size:1.35em;
    letter-spacing: 0.3pt;
    line-height: 1.4em;
}

h2 a{
	text-decoration: none !important;
}

h3 {
	margin-top: 1em;
	color: var(--magic-h3-color);
	font-size:1.15em;
	letter-spacing: 0.3pt;
	line-height: 1.4em;
}

h4 {
	color: var(--magic-h4-color);
}

li {
	margin: 0.4em 0;
	line-height:1.4em;
}

table {
	border: 1px solid var(--magic-border-color);
/* 	box-shadow: 0px 0px 2px var(--magic-lightgray); */
	border-collapse: collapse;
	margin-top: 1em;
	margin-bottom: 1em;
}

th {
	color: var(--magic-text-gray);
	font-weight:normal;
	text-align:left;
	background-color: var(--magic-table-header-background);
	/* font-size:0.95em; */
}

td, th {
	border: 1px solid var(--magic-border-color);
	padding: 0.4em 0.6em;
	vertical-align:top;
}

th{
	border: 1px solid var(--magic-border-color);
}

table.no-table-border,
table.no-border,
table.no-border td,
table.no-border th{
	border:none;
	box-shadow:none;
}

tr.center-row-vertical > td,
tr.center-row-vertical > th{
	vertical-align: middle;
}

tr.baseline-row > td,
tr.baseline-row > th{
	vertical-align: baseline;
}


p {
	line-height:1.5em;
	text-align:  justify;
	margin-bottom: 9px;
}
kbd {
    display: inline-block;
    margin: 1px .1em;
    padding: 0 .5em;
    border: 1px solid var(--magic-border-color);
    border-radius: 3px;
    white-space: nowrap;
    background-color: var(--magic-background-highlight);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.94em;
    letter-spacing:-0.2pt;
    color: var(--magic-textcolor);
}

a {
	color:var(--magic-a-color);
}

a:hover {
	color:var(--magic-a-hover);
}

::selection {
  color: var(--magic-lightergray);
  background: var(--magic-medium-color);
}

/* Created, updated, released Date */
.muted time {
	font-size: 0.95em;
}

/*------------------------------------------*/
ul.nav.menu.top{
	overflow: hidden;
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.5em;
	/*margin-left: max(min(7vw, 88px), 10px);*/
	/*margin-left: 88px;*/
	/* margin-right: 0; */
	/* margin-left: auto; */
	/* width: 100%; */
}

.nav.menu.top li i{
	margin-right: 0.3em;
}

.nav.menu.top li{
	margin:0;
	font-size: max(min(2vw, 1.3em), 14px);
	background-color:transparent;
	text-align: left;
	padding: 0;
	padding-left: min(4vw, 2em);
	display: inline-block;
}
.nav.menu.top li:first-child{
	padding-left: 0;
}

.nav.menu.top li.active a{
	color:var(--magic-mainmenu-text-active);
}

.nav.menu.top li a{
	color: var(--magic-mainmenu-text);
	text-decoration:none;
	background-color:transparent;
}
.nav.menu.top li a:hover{
	background-color:transparent;
	color:var(--magic-mainmenu-text-hover);
}

/*  see https://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing */
.navigation {
	padding-top:0px;
	padding-bottom:0;
	font-size:1.3em;
	margin-bottom: 0;
}

.navigation ul#main-menu,
.navigation ul#sub-menu{
	margin: 0 auto;
	max-width:var(--magic-max-width);
	display: table-row;
}
.navigation li{
	float:left;
	margin:0;
}

.navigation #main-menu li:first-child{
	border-left: 1px solid var(--magic-menu-border-color);
}
.navigation #main-menu li{
	border-right: 1px solid white;
}

.navigation #main-menu li,
.navigation #sub-menu li{
	padding: 0.5rem 0.35rem;
	border-right: 1px solid var(--magic-menu-border-color);
	width: 33.3333%;
	text-align:  center;
	margin-left: 0;
	font-size: min( max(3.7vw, 0.75em), 1.1em);

	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.navigation #main-menu li a:hover{
	background-color:transparent;
}


.navigation #sub-menu li:first-child{
	border-left: 1px solid var(--magic-menu-border-color);
}
.navigation #sub-menu li{
	border-right: 1px solid var(--magic-menu-border-color);;
}


.navigation #main-menu li.active,
.navigation #main-menu li:hover
{
	background-color: var(--magic-light-color);
}

.container-header .mod-menu>li.active:after, .container-header .mod-menu>li:hover:after{
	background-color: transparent;
}

.container-header .grid-child.container-nav{
	max-width: 100%;
}

.container-header .container-nav{
	padding: 0;
	background-color: var(--magic-medium-color);
	width: 100%;
	margin: 0;
}

.container-header .container-nav.below{
	background-color: var(--magic-light-color);
}

.navigation #main-menu a{
	color: var(--magic-mainmenu-text);
	text-decoration:  none;
	border-radius:0;
	background-color:transparent;
}
.navigation #main-menu a:hover{
	var(--magic-mainmenu-text-hover);
}

.navigation #main-menu .active a{
	color: var(--magic-mainmenu-text-active);
	background-color:transparent;
}

.navigation .nav-outer.main-menu{
	background-color: var(--magic-medium-color);;
	width:100%;
}

/*----- Sub Menu --------------*/
.navigation .nav-outer.sub-menu{
	background-color: var(--magic-light-color);
	width:100%;
}

.navigation ul#sub-menu{
	margin: 0 auto;
	width: 100%;
	max-width:var(--magic-max-width);
	font-size:0.9em;
	min-height: 2.2em;
	overflow: hidden;
}


.navigation #sub-menu li.active,
.navigation #sub-menu li:hover
{
	background-color: var(--magic-background-color);
}

.navigation #sub-menu li a:hover{
	background-color:transparent;
}

.navigation #sub-menu li a{
	color: var(--magic-mainmenu-text);
	height:  100%;
	vertical-align:  middle;
	text-decoration:  none;
}


.navigation #sub-menu li.active a,
.navigation #sub-menu li a:hover,
.navigation #sub-menu li:hover a
{
	color: var(--magic-submenu-text-active);
}

.navigation #sub-menu li a.faqs{
	letter-spacing:1pt;
}

/*--- Changelog Channels menu ---*/

.changelog main{
	margin-top:0;
}

.card.moduletable-changelog{
	border:none;
	background:transparent;
}

.moduletable-changelog{
	/* padding-left: 0.5em; */
	margin-top: 2.75em;
}

.moduletable-changelog h1{
	border:none;
	background:transparent;
	padding-left: 0;
	padding-top: 0;
}

.moduletable-changelog .card-body{
	padding-left:0;
	padding-bottom:0;
}

ul.menu-changelog {
	margin-left: 2.5em;
	margin-bottom: 0;
	display:block;
}

ul.menu-changelog li {
	float: left;
	background-color: var(--magic-table-header-background);
	border: 1px solid var(--magic-border-color);
	border-radius: 4px;
	display: inline-block;
	padding: .2em .6em;
	white-space: nowrap;
	font-size: 0.94em;
	margin: 0;
	margin-right: 1em;
	margin-bottom: 1em;
}

ul.menu-changelog li.active,
ul.menu-changelog li:hover,
ul.menu-changelog li a:hover {
	background-color: var(--magic-background-highlight);
}

ul.menu-changelog li a {
	text-decoration: none !important;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}


/*--- Side menu ---*/

.sidebar-right ul li{
	margin:0;
}

.sidebar-right ul li a:hover{
	background-color:transparent;
}


.sidebar-right ul li.active a{
	text-decoration:none;
	font-weight:bold;
}

.sidebar-right li.divider{
	margin-top:1em;
	margin-bottom:0.3em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	padding-left: 0.5em;
	border-top: 1px solid var(--magic-border-color);
	border-bottom: 1px solid var(--magic-border-color);
	background-color: var(--magic-table-header-background);
	color: var(--magic-text-gray);
}

.container-sidebar-right .sidebar-right{
}

.container-sidebar-right .sidebar-right:first-child{
}

.container-sidebar-right .sidebar-right:last-child{
	margin-bottom: 0;
}

.sidebar-right.card{
	background-color: transparent;
	border: none;
	border-left: 1px dotted var(--magic-border-color);
	margin-left: 0.5em;
	height: 100%;
}

.sidebar-right .card-body{
	padding: 0 0 0 0.75em;
}



.sidebar-right .fa-fw,
.sidebar-right .fa-regular,
.sidebar-right .fa-brands,
.sidebar-right .fa-light,
.sidebar-right .fa-solid
{
	width: 1.7em;
	text-align: center;
}

/*------------------------------------------*/


.small-text{
	font-size: 0.88em;
	color: var(--magic-text-gray);
	/* padding:  0; */
	/* margin:  0; */
}

.footer{
	margin-top: 1em;
	padding-top: 0.8em;
	padding-bottom: 0.9em;
	font-size: 1.1em;
	background: none;
	background-color: var(--magic-background-highlight);
	border-top:1px solid var(--magic-border-color);
}
.footer .grid-child {
	padding:0;
	/* padding-left: 1em; */
}
.footer hr{
	display:none;
}

.footer .mod-footer{
	margin: 0 0.7em;
}

.footer .footer1 {
	font-size: 0.75em;
	color: var(--magic-gray);
}

.footer .footer1 a{
	color: var(--magic-gray);
}

.footer .footer2 {
	display:none;
}

/*--- contact form ---------------------------------------*/
textarea,
input,
select
{
	color: var(--magic-text);
	background-color: var(--magic-background-highlight);
	border: 1px solid var(--magic-border-color);
	border-radius: 3px;
}

textarea:focus,
input:focus,
select:focus {
	outline-color: var(--magic-border-color);
	outline-width: 1px;
}



.btn-info{
	border-color: var(--magic-border-color);
	background-color: var(--magic-btninfo-background);
}

.btn-info:hover{
	border-color: var(--magic-border-color);
	background-color: var(--magic-btninfo-background-hover);
}


/*--- contact form ---------------------------------------*/
#contactform table{
	border:none;
	box-shadow: none;
}

#contactform td{
	border:none;
	padding:0.3em 0;
}

#contactform .error{
	color:var(--magic-text-error);
}

#contactform table{
/* 	width:80%; */
}

#contactform td.col1 {
	color:var(--magic-text-gray);
	text-align:right;
	padding-right:1em;
	vertical-align:middle;
	white-space:nowrap;
}

#contactform select{
	width:21em;
    margin-top: 3px;
    margin-bottom: 3px;
}

input[type="text"],
input[type="email"]
{
	height:auto;
	width:auto;
	margin:0;
}

input.small-text{
	font-size:0.75em;
}

#contactform input.code{
	width:4.2em;
}

#contactform input.email{
	width:80%;
}

#contactform textarea {
	width:80%;
}

#contactform label{
	font-size:1em;
	display:inline;
}

#contactform tr.privacy td{
	padding-top:0.7em;
	padding-bottom:0.7em;
}

#contactform .privacy input{
	font-size:1em;
	margin-right: 0.3em;
	margin-top: -3px;
}

#contactform .privacy{
	vertical-align:middle;
}

/*------------------------------------------*/
#aside .well{
	padding: 0;
}

.well ul.nav.menu li{
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1em;
	padding-left:0.4em;
	margin-bottom:0.6em;
}

.well .active{
	font-weight: bold;
}


#login-form {
	margin: 0;
}
#form-login-submit {
	margin-bottom:0;
}

/*------------------------------------------*/
/*  Home */
.home h1, .home .slogan{
	text-align:center;
}

.home h1{
	margin-top:0.9em;
	margin-bottom: 0.35em;
	letter-spacing: 1pt;
	font-size:2em;
}
.home .slogan a{
	color: var(--magic-text-gray);
	text-decoration:none;
	margin-bottom:1.6em;
	letter-spacing: -0.1pt;
}

.home .svg-map{
	width: 100%;
	height: auto;
}

.home .svg-map,
.home img.home-devices-silver,
.home img.home-devices-black,
.home img.home-devices-dark
{
	position:absolute;
	z-index: 100;
}

.home img.home-devices-dark{
	display:none;
}

.home .color-selector-outer {
	margin-top:0.7em;
	margin-bottom:1.5em;
	width:100%;
}

.home .color-selector {
	margin-right: auto;
	margin-left: auto;
	text-align:center;
}

.home .color-selector img{
	width:16px;
	margin: 0 0.2em;
}



/* ------------------------------------------ */

.blog.features h2{
	margin-bottom: 0.4em;
}

.blog .leading-0 h2,
.blog-featured .leading-0 h2
{
	margin-top: 0.85em;
}

.feature-item{
	display:table;
	border-top: 1px dotted var(--magic-border-color);
	padding-top: 1em;
	margin-bottom: 0.3em;
	width:100%;
}

.feature-image {
	display:table-cell;
	min-width:48px;
	width:48px;
	max-width:48px;
	height: auto;
	margin-right:1em;
}

.feature-text{
	display:table-cell;
	vertical-align:top;
	padding-bottom: 0.75em;
	width: 100%;
}

.feature-text a[href*="#"] {
	margin-top: -1.1em;
	text-align:right;
	color: var(--magic-text-gray);
}

.feature-text h2{
	border:none;
	margin-top:0;
	padding-top:0;
	/* float:  left; */
}


/*  BX Slider */

.bx-wrapper{
	background-color: transparent;
	border: none;
	box-shadow: none;
}
.bx-wrapper .slider img{
	margin: 0 auto;
	padding: 13px 0;
	filter: drop-shadow(2px 2px 6px lightgray);
}

.bx-wrapper .bx-prev,
.bx-wrapper .bx-next{
	background: none;
}

.bx-wrapper .bx-controls-direction a {
	text-indent: 0;
	text-decoration: none;
	font-size: 2.5em;
	font-family: "Font Awesome 6 Pro";
	font-weight: 600;
	color: rgba(var(--magic-light-rgb), 0.4);
	width: auto;
	height: auto;
}
.bx-wrapper .bx-controls-direction a:hover {
    color: var(--magic-light-color);
}

.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: var(--magic-medium-color);
}

.bx-wrapper .bx-pager.bx-default-pager a {
	background: rgba(var(--magic-light-rgb), 0.6);
}

.bx-wrapper .dark-mode{
	display: none;
}



img.screenshot {
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	margin-bottom: 2.5em;
	filter: drop-shadow(2px 2px 6px #00000026);
	display: block;
}

img.screenshot-blur {
	filter: drop-shadow(1px 1px 8px #00000026);
	display: block;
}

/* Read more */

.readmore{
	display: inline;
}
.readmore .btn {
	display: inline;
	border:none;
	background:none;
	box-shadow:none;
	margin:0;
	padding:0;
	text-decoration:underline;
	font-size: 1em;
	color: var(--magic-readmore-text);
}

.readmore [class^="icon-"],
.readmore [class*=" icon-"] {
	display:none;
}

/* Released and Last Update Dates */
.blog-item:first-child dl.article-info,
.com-content-article.item-page dl.article-info
{
	margin-top: -3.05em;
}

dl.article-info
{
	float:right;
	margin:0;
	margin-top: -2.05em;
}

dl.article-info dd{
	color: var(--magic-text-gray);
}

dl.article-info dd .fa-calendar,
dl.article-info dd .icon-calendar
{
	display:none;
}



/* Download */

td.download {
	background-color: var(--magic-background-highlight);
}

.download table{
	margin-bottom:0;
}

.td-margin-left{
	margin-left: 0.6em;
}

.download h3{
	margin-top: 1.4em;
	margin-bottom:0;
}

.h1-icon {
	float:left;
	width:28px;
	height: auto;
	margin-top: 1.2em;
	margin-right:1em;
	fill: rgb(15, 105, 156);
}

div.icon{
	display:inline;
}

.fancypantsaccordionholder .accordion .accordion-item{
        overflow: visible;
    }

.faqs h2{
	border:none;
	border-top: 1px dotted var(--magic-border-color);
	margin-top:0;
	margin-bottom:0;
	padding-top:0.5em;
	margin-top: 1em;
	margin-bottom: 0.5em;
}

.faqs .item-content, .faqs .faq-answer{
	margin-left: 1.9em;
}

.faqs h3 {
	margin: 0;
	font-size: 1.15em;
	line-height:1.8em;
	color: var(--magic-h3-faqs);
}

.faqs h4 {
	font-size: 1em;
}

.faqs p{
	text-align:left;
}


/* clicks table */

.clicks table.no-table-border td[colspan="5"],
.clicks table.no-table-border td[rowspan="3"],
.clicks table.no-table-border td[rowspan="4"]
{
	border:none;
	box-shadow:none;
}

.clicks table.no-table-border td[colspan="4"] h3{
	margin:0;
	margin-top:2em;
}

.clicks table img{
	margin-right:1em;
}

/* Buy cart */
.buy-cart .logo-image
{
	width:1.5em;
	float:left;
	margin-top: -0.25em;
	margin-left:-0.3em;
	margin-right:0.3em;
}

th{
	font-size: 0.9em;
}

/*------------------------------*/
/* Buy now cart                 */

.buy-cart .btn-light{
	background-color: var(--magic-buycart-btn-background);
	border-color: var(--magic-border-color);
	color: var(--magic-text);
}

.buy-cart tfoot .btn-light{
	border: 1px solid var(--magic-border-color);
}

.buy-cart .btn-light:hover{
	background-color: var(--magic-buycart-btn-background-hover);
	border: 1px solid var(--magic-border-color);
}


.buy-cart td.container-cell{
	margin:0;
	padding:0;
	border:none;
}

.buy-cart table.licensee{
	margin:0;
	padding:0;
	border:none;
	box-shadow:none;
}

.buy-cart .licensee th a{
	color: var(--magic-text-gray);
}


.buy-cart .licensee input{
	margin: 1px 1px 1px 2px;
	font-size: 0.9em;
}

.buy-cart .use-private-email{
	margin-left:9.2em;
	color: var(--magic-text-gray);
}
.buy-cart .use-private-email a{
	color: var(--magic-text-gray);
}


.buy-cart .discount{
/* 	min-width: 7.9em; */
}

.buy-cart td.year-selector{
	margin:0;
	padding:0;
	font-weight:normal;
}

.buy-cart td.year-selector{
	max-width: 9.4em;
	width: 9.4em;
	font-size: 0.9em;
}

.buy-cart td.year-selector select {
	width: 9.0em;
	margin: 0px;
}

.buy-cart td.pay-by-selector {
	margin:0;
	padding:0;
	max-width: 9em;
	width: 9em;
}
.buy-cart td.pay-by-selector select{
	margin:0;
	padding:0;
	max-width: 10.2em;
	width: 10.2em;
}

.buy-cart .twoYearHint{
	color: var(--magic-h1-color);
	font-size: smaller;
	text-align:right;
	padding-right:3px;
	padding-top:6px;
}

.buy-cart .input
{
	padding:0 2px;
}

.buy-cart #years-selector,
.buy-cart #licenseeName,
.buy-cart #licenseeEmail
{
	border: none;
}
.buy-cart #licenseeName,
.buy-cart #licenseeEmail
{
	margin: 0;
	padding: 4px;
}

.buy-cart table.product-devices{
	min-width:100%;
}

.buy-cart table.product-devices{
	margin-top: 1.5em;
}
.buy-cart table.licenses{
	/* margin-top: 0; */
}
.buy-cart td.device-icon{
	text-align: center;
}

.buy-cart td.device-icon img{
	/* margin-bottom:-4px; */
	vertical-align: initial;
}

.buy-cart td.device-name{
}

.buy-cart .device-serial{
	font-size: 0.76em;
}

td.no-border-right{
	border-right: none;
	padding-right: 0;
}
td.no-border-left{
	border-left: none;
	padding-left: 0.4em;
}

td.no-border,
.buy-cart .no-border td,
.buy-cart  td.no-border{
	border:none;
}

.buy-cart .added-item {
    background-color: var(--magic-background-highlight);
}

span.base-price{
	color: var(--magic-text-gray);
    position: relative;
    display: inline-block;
}

span.base-price::before, span.base-price::after {
    content: '';
    width: 95%;
    position: absolute;
    left: 5%;
    top: 50%;
}
span.base-price::before {
    border-bottom: 1px solid var(--magic-border-color);
    transform: skewY(-7deg);
}
span.base-price::after {
/*     border-bottom: 1px solid var(--magic-border-color);
    transform: skewY(7deg); */
}


.buy-cart th.price,
.buy-cart td.price{
	/* min-width: 6.7em; */
}

.buy-cart .info-bold {
	font-weight: bold;
	color: var(--magic-darkgray);
}

.buy-cart .removed-item .info-bold {
	font-weight: normal;
	color: inherit;
}

.buy-cart .removed-item .base-price,
.buy-cart .removed-item,
.buy-cart .removed-item .small-text{
	color: var(--magic-text-gray);
}
.buy-cart .removed-item img {
	opacity:0.35;
}


.buy-cart td.cart-button{
	padding: 2px;
}
.buy-cart td.cart-pay-button{
	padding-left: 3px;
	padding-right: 3px;
}


.buy-cart .btn{
	width:100%;
}


.buy-cart .total-text,
.buy-cart .total
{
	font-weight:bold;
/* 	font-size:1.1em; */
}


.buy-cart .btn-primary
{
	background-color: var(--magic-medium-color);
	border-color: var(--magic-border-color);
}
.buy-cart .btn-primary:hover
{
	background-color: var(--magic-light-color);
	border-color: var(--magic-text);
}

.buy-cart .btn-pay{
	font-size:1.0em;
	padding: 0.5em 1.1em;
	font-weight:bold;
	text-align: center;
}

.buy-cart .total-text{
	text-align:right;
}

.buy-cart .gap{
	padding-top: 0.7em;
}

.buy-cart .price{
	text-align:right;
}

.buy-cart td input{
	display:inline;
	margin-top: -2px;
	margin-right: 0.2em;
	vertical-align: middle;
}
.buy-cart td label{
	display:inline;
}
.buy-cart td.privacy{
	font-size: 0.9em;
}

.buy-cart .missing h3,
.buy-cart .missing td{
 	padding-top:0.5em;
 	padding-bottom:0;
 	margin:0;
}

.buy-cart .missing input[type="text"]{
	width:100%;
}

.buy-cart .error{
	color: var(--magic-text-error);
	font-size:smaller;
}

.buy-cart table.product-devices{
	margin-bottom:0;
}

.buy-cart .license-terms h2{
	margin-top:0.5em;
}

/* nicer formatting */

.deviceName,
.productName{
	text-shadow: 0 0 0.01pt;
	color: var(--magic-dark-color);
}

strong,
.bold{
	font-weight: bold;
}

.right{
	text-align: right;
}
.center{
	text-align: center;
}

.middle {
    vertical-align: middle;
}
.baseline {
    vertical-align: baseline;
}

.no-underline {
    text-decoration-line: none;
}

/* ------------------------------------------ */
/* font awsome */
i[class*='fab']{
	font-weight:normal;
}

i[class*='fa']:after,
.svg-inline--fa:after
 {
	content:' ';
	white-space: pre;
}

.well i[class*='fa']{
	width: 1.6em;
	text-align:left;
}
.well i[class*='fa']:after{
	content:'';
}

h1 i[class*='fa']:after,
h2 i[class*='fa']:after{
	margin-right:0.2em;
}

.faqs h3 i[class*='fa']:after{
	margin-right: 0.34em;
}

.faqs li kbd i[class*='fa']:after{
	margin-right:0;
	content: '';
}

.faqs a i[class*='fa-fw'],
.faqs a i[class*='fa-fw']:after,
.faqs .acc-content i[class*='fa-fw'],
.faqs .acc-content i[class*='fa-fw']:after
{
/* 	content:''; */
	width:initial;
	margin-right:0;
}

/* ------------------------------------------ */
/* device image  */
.moduletable .device{
	float:right;
	margin-top:0.5em;
}

/* pagination */

.pagination-outer {
	border-top: 1px dotted var(--magic-border-color);
	display: flex;
	align-items: baseline;
}

.pagination-outer .counter{
	color: var(--magic-text-gray);
	margin-left: auto;
}

.pagination .page-item.active .page-link {
	background-color: var(--magic-dark-color);
	border-color: var(--magic-border-color);
	color: var(--magic-mainmenu-text-active);
}

.page-link{
	background-color: var(--magic-background-highlight);
	color: var(--magic-a-color);
	border-color: var(--magic-border-color);
}

.page-link:hover{
	background-color: var(--magic-dark-color);
	border-color: var(--magic-border-color);
	color: var(--magic-mainmenu-text-active);
}

.page-item.disabled .page-link {
	background-color: var(--magic-background-color);
	color: var(--magic-text-gray);
	border-color: var(--magic-border-color);
}


/* GDPR */
.gdpr-svg{
	width: 100%;
	height: 1000em;
	background-image: url("../../../../../includes/location/gdpr.svg");
}

.alert{
	border: 1px dotted var(--magic-border-color);
	padding: 8px 14px;
}

.alert-warning{
	background-color: var(--magic-alert-warning-background);
}

.alert-warning,
.alert-warning h3,
.alert-warning .alert-link
{
	color: var(--magic-alert-warning-text);
}
.alert-error,
.alert-danger{
	background-color: var(--magic-alert-error-background);
}

.alert-error,
.alert-error h3,
.alert-error .alert-link,
.alert-danger,
.alert-danger a
{
	color: var(--magic-alert-error-text);
}

td.small-text{
		padding-right: 0.5em;
}


/*---------------------------------------------------------------------------------*/
/* help */
.under-construction{
	background: linear-gradient(rgb(250, 250, 250), rgba(40, 139, 197, 0.1));
	border:1px solid var(--magic-lightgray);
	border-top: none;
	padding: 1em;
	padding-top: 1.5em;
	border-radius: 0 0 12px 12px;
	box-shadow: 0 0 4px #00000038;
	text-align:center;
	color:var(--magic-medium-color);
}


.banner-warning{
	background: linear-gradient(rgb(250, 250, 250), #ffa5004a);
	border:1px solid var(--magic-lightgray);
	border-top: none;
	padding: 1em;
	padding-top: 1.5em;
	border-radius: 0 0 12px 12px;
	box-shadow: 0 0 4px #00000038;
	text-align:center;
	color:var(--magic-medium-color);
}

.santas-hat{
	position: absolute;
	min-width: 40px;
	min-height: 39px;
	left: 58px;
	top: -6px;
	z-index: 1000;
}

.win-button {
	background-color: var(--magic-winbutton-background);
	border: 1px solid var(--magic-border-color);
	border-radius: 2px;

	display: inline-block;
	margin: 1px .1em;
	padding: 0 .5em;
	white-space: nowrap;
	font-size: 0.94em;
	letter-spacing:-0.2pt;
}

.edge{
	display: none;
}

@supports (-ms-ime-align:auto){
	.edge{
		display: block;
	}

}


/*---------------------------------------------------------------------------------*/
/* Media queries */

@media (max-width: 970px) {

	.santas-hat {
		visibility: hidden;
	}
}

@media (min-width: 700px) {
	@supports (display:grid) {
		.site-grid {
			grid-template-areas:
        ". banner banner banner banner ."
        ". top-a top-a top-a top-a ."
        ". top-b top-b top-b top-b ."
        ". side-l comp comp side-r ."
        ". bot-a bot-a bot-a bot-a ."
        ". bot-b bot-b bot-b bot-b .";
		}
	}
}

@media (max-width: 700px) {

	.container-header .navbar-brand.top-menu {
		margin-right: calc(0.7em + 2vw);
		margin-top: 0.3em;
	}

	.nav.menu.top li {
		padding-left: min(3vw, 0.75em);
	}

	.nav.menu.top li i {
		margin-right: 0.15em;
	}
}

@media (max-width: 520px) {
	.container-header .navbar-brand.top-menu{
		margin-right: 0;
	}

	.nav.menu.top li {
		width: 26px;
		padding: 0;
		font-size: 16px;
	}
	.nav.menu.top li a {
		visibility: hidden;
	}
	.nav.menu.top li a i{
		visibility: visible;
		width: 26px;
		padding: 0;
		margin: 0;
		text-align: center;
	}

	.navigation #main-menu li .magic{
		display: none;
	}
}

/* Light mode */
@media (prefers-color-scheme: light) {
	.home-devices img#home-devices-silver{
		filter:
   		drop-shadow( 1px 1px 3px rgba(0, 0, 0, 0.2))
		;
	}
	.home-devices img#home-devices-dark{
		filter:
   		drop-shadow( 1px 1px 2px rgba(0, 0, 0, 0.55))
		;
	}
	.home-devices img#home-devices-black{
		filter:
   		drop-shadow( 1px 1px 3px rgba(0, 0, 0, 0.45))
		;
	}
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	:root {
		--magic-dark-rgb: 17, 99, 146;
		--magic-medium-rgb: 24, 119, 173;
		--magic-light-rgb: 40, 140, 197;

		--magic-background-color: #17202a;
		--magic-background-highlight: #0a141e;

		--magic-dark-color: rgb(20, 88, 128);
		--magic-medium-color: rgb(24, 73, 115);
		--magic-light-color: rgb(0, 56, 87);

		--magic-border-color: #777;
		--magic-menu-border-color: rgb(27, 101, 147);

		--magic-lightergray: #eee;
		--magic-lightgray: lightgray;
		--magic-gray: darkgray;
		--magic-mediumgray: #999999;
		--magic-darkgray: #666666;

		--magic-table-header-background: #383838;

		--magic-mainmenu-text: hsla(0, 0%, 100%, 0.7);
		--magic-mainmenu-text-hover: hsla(0, 0%, 100%, 1.0);
		--magic-mainmenu-text-active: hsla(0, 0%, 100%, 0.9);
		--magic-submenu-text-active:  var(--magic-mainmenu-text-active);

		--magic-alert-warning-background: #856920;
		--magic-alert-warning-text: #fff3cd;
		--magic-alert-error-background: #7a2c2c;
		--magic-alert-error-text: #fdb0b0;

		--magic-h1-color: #dee0fc;
		--magic-h2-color: #aed4ff;
		--magic-h3-color: #a1bbd6;
		--magic-h3-faqs: #75b0eb;
		--magic-h4-color: var(--magic-lightgray);

		--magic-text: #f4f4f4;
		--magic-text-gray: #bbb;
		--magic-text-error: red;

		--magic-a-color: #a6cfff;
		--magic-a-hover: #e0edff;

		--magic-winbutton-background: var(--magic-table-header-background);
		--magic-btninfo-background: var(--magic-dark-color);
		--magic-btninfo-background-hover: var(--magic-background-highlight);

		--magic-buycart-btn-background: var(--magic-table-header-background);
		--magic-buycart-btn-background-hover: var(--magic-dark-color);
	}

	.home .slogan,
	.home .slogan a{
		color:var(--magic-a-color);
	}

	.sidebar-right ul li.active a{
		color:var(--magic-mainmenu-text-active);
	}

	img.screenshot
	{
		filter: brightness(75%);
	}

	.bx-wrapper .slider img
	{
		filter:
		/*invert(95%)*/
		/*		hue-rotate(180deg)*/
		/*		drop-shadow(0 0 2px white)*/
		brightness(83%);
		;
	}

	/*.bx-wrapper .dark-mode{*/
	/*	text-align: center;*/
	/*	display: block;*/
	/*}*/

	/*.bx-wrapper .dark-mode:before{*/
	/*	content: "Note: Screenshots are filtered for web dark-mode display, the app doesn't support dark mode yet.";*/
	/*	color:var(--magic-text-gray);*/
	/*	font-size: 0.9em;*/
	/*}*/

	.bx-wrapper .slider img,
	.bx-wrapper .bx-controls-direction a:hover {
    	color: var(--magic-dark-color);
	}

	.home-devices img#home-devices-silver{
		filter:
		none
		;
	}
	.home-devices img#home-devices-dark{
		filter:
		drop-shadow( 1px  0px 0px #888)
        drop-shadow(-1px  0px 0px #888)
        drop-shadow( 0px  1px 0px #888)
        drop-shadow( 0px -1px 0px #888)
   		/*drop-shadow( 0px 0px 2px white)*/
		;
	}
	.home-devices img#home-devices-black{
		filter:
		drop-shadow( 1px  0px 0px #888)
        drop-shadow(-1px  0px 0px #888)
        drop-shadow( 0px  1px 0px #888)
        drop-shadow( 0px -1px 0px #888)
   		/*drop-shadow( 0px 0px 2px white)*/
		;
	}

}