@import url("inject.css");
@import url("font/font.css");
@import url("variables.css");

/* HEADER DOMAIN MENU */
.home.download #nav-domain a.lnkDomDwn, .home.download .quickAccess a.lnkDomDwn {
	cursor: default;
	pointer-events: none;
}

.quickAccess a.lnkDomDwn {
    border-block-end: 2px solid #217C8B;
    font-weight: 600;
}

button.domainMenu {
    padding-inline-start: 2.5em;
    background: #fff url(img/scenari.svg) no-repeat 6px center / auto 24px;
}

#scSoftHeader {
	background: #F7F6F4;
	padding-top: 0;
	border-block-end: 1px solid var(--borderColor);
}
#scSoftHeader h1 {
	position: absolute;
	left: -9999px;
	top: -9999px;
}
#scSoftHeader .quickAccess a {
    font-size: 0.9em;
}

/*=== START GENERAL HTML =================================================== */
html{
	width:100%;
	height:100%;
}

body{
	font-family: var(--textStyle);
    font-size: var(--fontSize);
    line-height: 1.3;
	color:#555;
	margin: 0;
	min-height: 100%;
	width:100%;
	scroll-behavior: smooth;
	overflow-x:hidden;
	display: flex;
	flex-direction: column;
}

.hidden{
	position: absolute;
	width:1px;
	height:1px;
	visibility: hidden;
	top:-10000px;
	left:-10000px;
}

.blockAnchor{
	visibility:hidden;
	text-decoration: none;
	color:silver;
	font-size: .95em;
	margin-left:0.2em;
}
.blockAnchor::before{
	font-family:"fontello";
	content:"\2693";
	font-weight:normal;
}
.blockAnchor span{
	position:absolute;
	left:-9999px;
}
*:hover > .blockAnchor,
.blockAnchor:focus {
	visibility:visible;
}

.blockAnchor:hover{
	text-decoration:none;
	opacity:0.7;
}

:focus{
	outline:none;
}
p {
	margin: 0.3em 0;
}
button {
    font-family: 'Roboto';
}
code{
	word-break: break-word;
}
/*=== END GENERAL HTML ===================================================== */

/*=== START TEMPLATE =================================================== */
#root {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
main {
	flex: 2 1 auto;
	align-self: center;
	max-width: var(--maxWidth);
	width: 100%;
	padding-block-end: 4em;
}
main > div{
	padding: 1em;
    display: flex;
    flex-direction: column;
    gap: 1em;
}
main > div > div:empty {
    display: none;
}
footer{
	flex: 0 0 auto;
}

/* --- HOME --- */
.home #main {
	margin:0;
	padding:0;
	align-self: stretch;
	width: 100%;
	max-width: -moz-available;
	max-width: -webkit-fill-available;
	position: relative;
}
.home #main > div {
	flex-direction: row;
	gap: 0;
	padding:0;
	background-color: var(--contentBG);
    overflow-y: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: -webkit-fill-available;
    height: -moz-available;
    height: fill-available;
}
.home #main .content {
    width: 100%;
	max-width: -moz-available;
	max-width: -webkit-fill-available;
	max-width: fill-available;
}
.home #main .intro {
    padding-block-start: 2em;
    padding-inline: 2em;
    background-color: var(--contentBG);
}
.home #main .content div.tabhead {
    display: flex;
    gap: 5px;
    position: sticky;
    top: 0;
    padding-inline: 1em;
    padding-block-start: 1em;
    z-index: 1;
    background-color: var(--contentBG);
}
.home #main .content div.tabhead::after {
    content: "";
    height: 8px;
    background-color: var(--panelBG);
    position: absolute;
    bottom: -9px;
    left: 0;
    right: 0;
    border-block-start: 1px solid var(--linkColor);
}
.home #main .content div.tabhead > button {
    flex: 1 1 0%;
    appearance: none;
    background-color: var(--contentBG);
    border-inline: 1px solid var(--borderColor);
    border-block-start: 1px solid var(--borderColor);
    border-block-end: 0px;
    color: var(--contentLightFG);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding-block: 1em;
    padding-inline: 0.5em;
    font-size: clamp(0.9375rem, 0.9154rem + 0.1176vw, 1.0625rem);
    width: 100%;
    align-self: stretch;
    font-weight: 400;
    cursor: pointer;
    margin-block-end: 1px;
    border-radius: 5px 5px 0 0;
    line-height: 1;
}
.home #main .content div.tabhead > button:not(.selected):hover {
    filter: brightness(0.9);
    cursor: pointer;
}
.home #main .content div.tabhead > button.selected {
    background-color: var(--panelBG);
    border-inline: 1px solid var(--linkColor);
    border-block-start: 3px solid var(--linkColor);
    color: var(--linkColor);
    font-weight: 600;
    cursor: default;
    margin-block-end: -3px;
    z-index: 1;
}
.home #main .content div.tabhead > button .tagline {
    font-size: 0.8em;
    font-weight: 400;
    line-height: normal;
}

.home #main .content div.tabbody {
    min-height: 69vh;
    background-color: var(--panelBG);
    position: relative;
    padding-block: 1.5em 2em;
    padding-inline: 1em;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.home #main .content div.tabbody > div {
    width: 100%;
    max-width: 45em;
    margin-inline: auto;
}

.home #main aside {
	box-sizing: border-box;
	padding:1em;
	background-color: var(--asideBG);
    min-height: inherit;
    position: sticky;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 20rem;
    border-inline-start: 1px solid var(--borderColor);
    overflow-y: auto;
}
.home #main aside .list {
    padding-block-end: 0.5em;
    margin-block-end: 0.8em;
    border-block-end: 1px solid var(--borderColor);
}
.home #main aside .list_co ul {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    padding-inline-start: 0.5em;
    padding-block: 0.7em;
}
.home #main aside .list_co ul li {
    margin: 0;
}
.home #main aside h1 {
    font-size: var(--fontSize);
    margin: 0;
}
/*=== END TEMPLATE ===================================================== */

/*=== START HEAD/FOOT MESSAGES =================================================== */
#headMessages {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
#footMessages {
    order: 5;
}

#controls {
    display: contents;
}
/*=== END HEAD MESSAGES =================================================== */

/*=== START TITRES =================================================== */
#productHead{
    order: 1;
	border-block-end: 1px solid var(--borderColor);
	padding-block: 10px;
	padding-inline: 0.5em;
	display: flex;
	align-items: center;
	gap: 1em;
}
#productHead > div:empty {
    display: none;
}
#productHead > h2{
	margin: 0;
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: clamp(1.375rem, 1.256rem + 0.5952vw, 2rem);
	font-weight: 600;
	color: var(--titleColor);
}
#productHead > h2 > img {
    width: 50px;
    height: 50px;
}

main > div > #content {
    order: 2;
}

#content a:not(.continueDownloading) {
    color: var(--linkColor);
}
#content a:not(.continueDownloading):hover {
    color: color-mix(in oklab, var(--linkColor), #000 50%);
}

a.continueDownloading {
    background-color: var(--linkColor);
    color: #fff;
    padding-inline: 0.6em;
    padding-block: 0.2em;
    border-radius: 5px;
    text-decoration: none;
    display: inline-flex;
    gap: 0.2em;
}
a.continueDownloading:hover,
a.doc:hover {
    background-color: color-mix(in oklab, var(--linkColor), #000 50%);
}
a.continueDownloading::before {
    font-family: "fontello";
    content: "\E800";
    font-weight: normal;
}
div.docLnk {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}
a.doc {
    background-color: var(--linkColor);
    color: #fff;
    padding-block: 0.3em;
    padding-inline: 0.5em;
    border-radius: 4px;
    text-decoration: none;
    display: flex;
    gap: 5px;
}
a.doc::before {
    font-family: "fontello";
    content: "\E827";
}
/*=== END TITRES =================================================== */

/*=== START CHILDLIST =================================================== */
.olProduct{
	padding: 0.5em 1em;
}

li.child {
	list-style-type: none;
	margin:0.2em 0;
}
li.dlProduct.child::before {
	font-family:"fontello";
	content:"\e800";
	margin-inline-end:5px;
}
#dwnldLists > fieldset {
	margin: 1%;
	padding:1em;
}
/*=== END CHILDLIST =================================================== */

/*=== SEARCH =================================================== */
#seachBox {
    position: absolute;
    right: .8em;
    top: 50px;
}
.tab .intro {
    max-width: 70%;
    margin: 1em auto;
}
#searchContainer, #searchExtContainer {
	flex: 0 1 auto;
	display: flex;
    align-items: center;
    justify-content: center;
	margin-block-end: 1.5em;
}
#searchResult {
	flex: 2 1 auto;
}
#seachBox input#searchBtn {
	background: rgba(0, 0, 0, 0) url("img/search.svg") no-repeat scroll right center / auto 100%;
	height: 25px;
	width: 25px;
}
input#searchBtn, input#searchExtBtn {
	background: url("img/search.svg") no-repeat center left;
	background-size: 100%;
	border: none;
	cursor: pointer;
	color: transparent;
	height: 38px;
	width: 38px;
	padding: 0;
	margin-inline-start: 5px;
}
#seachBox input#searchText {
	width:auto;
	height:auto;
}
input#searchText, input#searchExtText {
	border: 1px solid #b9bcbe;
	box-shadow:0 2px 5px rgba(0, 0, 0, 0.15) inset;
	padding: 6px 13px;
	width:24em;
	height:1.5em;
}
#searchContainer input#searchText, #searchExtContainer input#searchExtText{
	font-size: 1.1em;
}
input#searchText:focus, input#searchExtText:focus {
	box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(107, 77, 145, 0.6);
}

.facets {
margin-block-end: 1em;
text-align: center;
}
.results .resultPanels a::before {
font-family:"fontello";
color: #555;
margin-inline-end:5px;
display:inline-block;
text-decoration:none;
}

.resultPanel {
    margin: 30px 0;
}

.sortFcts {
    margin: 0.5em 0;
}
.active {
    color: #217C8B;
}
.unactive > a {
    color: #555;
}
.active::after {
    content: "\F0DD";
}
.unactive::after {
    content: "\F0DC";
}
.active::after, .unactive::after {
    font-family: "fontello";
    margin-inline-start: 5px;
	color: #555;
}
.active, .unactive {
    font-weight: bold;
    margin: 0 10px;
}

table.results, table.extResults {
	width: 100%;
}
.results #lists {
	display: table;
	width: 100%;
}
.results #lists .list {
	display: table-cell;
	padding: 1em;
}
.results tr td:first-child {
	width: 60%;
}
.results tr td:last-child {
	text-align: center;
}
.list_co > ul {
	list-style-type: none;
	padding-inline-start: 1em;
}
.list_co > ul > li {
	margin:0.5em 0;
}
.list_co > ul > li::before {
	font-family:"fontello";
	margin-inline-end:5px;
}
.list_co > ul > li.extension::before, .results .resultPanels a.extension::before,
#messages a.extension::after, #links a.extension::after, .grpInfos a.extension::after {
	content:"\f1e6";
}
.list_co > ul > li.skin::before, .results .resultPanels a.skin::before,
#messages a.skin::after, #links a.skin::after, .grpInfos a.skin::after {
	content:"\f1fc";
}
.list_co > ul > li.mod::before, .results .resultPanels a.mod::before,
#messages a.mod::after, #links a.mod::after, .grpInfos a.mod::after {
	content:"\e81d";
}
.list_co > ul > li.gen::before, .results .resultPanels a.gen::before,
#messages a.gen::after, #links a.gen::after, .grpInfos a.gen::after {
	content:"\e805";
}
.list_co > ul > li.model::before, .results .resultPanels a.model::before,
#messages a.model::after, #links a.model::after, .grpInfos a.model::after {
	content:"\e838";
}
.list_co > ul > li.scHeart::before, .results .resultPanels a.scHeart::before,
#messages a.scHeart::after, #links a.scHeart::after, .grpInfos a.scHeart::after {
	content:"\e809";
}
.list_co > ul > li.other::before, .results .resultPanels a.other::before,
#messages a.other::after, #links a.other::after, .grpInfos a.other::after {
	content:"\e823";
}

span.compat {
    display: block;
}
/*=== END SEARCH =================================================== */

/*=== START PARAGRAPH =================================================== */
i.type {
	float: right;
	font-size: 1.2em;
	font-style: normal;
	margin-inline-start: 1em;
}
i.type::after{
	font-family: "fontello";
	font-size: 1.2em;
	margin-inline-start: 5px;
}
#messages .dep, #messages .warning, #links, #messages .info,
.grpInfos .dep, .grpInfos .warning, .grpInfos .info{
	padding: 0.5em 1em;
	margin:1em 0;
}
#messages .warning,
.grpInfos .warning,
#links{
	color: #ffffff;
	background-color: #b62c00;
}
#messages .warning a, .grpInfos .warning a{
	color: #ffffff;
}
#main > #links {
	margin-block-start: 1em;
	margin-block-end: 1em;
}
#messages .dep, .grpInfos .dep{
	color: #ffffff;
	background-color: #01676f;
}
#messages .dep a, .grpInfos .dep a{
	color: #ffffff;
}
#messages .info, .grpInfos .info {
	background-color: rgba(0,152,163,0.2);
	color: #555;
}
.grpInfos .genGrpInfos {
	color: #555;
	margin:0;
}
.dep_ti, .warning_ti, .links_ti {
	min-height: 1.6em;
}
.dep_ti span, .warning_ti span, .info_ti span, .links_ti span {
	font-size: 1.2em;
	font-weight: bold;
}

.dep i.type::after{
	content: "\e803";
}
.warning i.type::after{
	content: "\e801";
}
#links i.type::after{
	content:"\f148";
}
#links:empty {
	display: none;
}
#messages a, #links a, .grpInfos .dep a {
	color: #ffffff;
	text-decoration: underline;
}
#messages .info a, .grpInfos .info a {
	color: #555;
}
#messages a:hover, #links a:hover, .grpInfos a:hover {
	text-decoration: none;
}
#messages a::after, #links a::after, .grpInfos a::after{
	content: "\e802";
	display: inline-block;
	font-family: "fontello";
	margin-inline-start: 5px;
	text-decoration: none;
}
fieldset {
	border:1px solid #b9bcbe;
	margin: 1em auto;
	max-width: 1200px;
}
fieldset.closed {
	border-inline-start:1px solid transparent;
	border-inline-end:1px solid transparent;
	border-block-end:1px solid transparent;
	padding-block-start: 0 !important;
	padding-block-end: 0 !important;
}
fieldset > legend {
	font-weight: bold;
	padding: 0 0.5em;
}
fieldset > legend > a{
	text-decoration:none;
	color:#555;
}
fieldset > legend > a:hover{
	text-decoration:none;
}
fieldset > legend > a::after{
	font-family:"fontello";
	margin-inline-start:5px;
	font-weight:normal;
}
fieldset > legend > a.open::after{
	content:"\e80b";
}
fieldset > legend > a.closed::after{
	content:"\e80a";
}
fieldset .collBlk_open {
	border-inline-start: 0;
	margin-inline-start: auto;
	padding-inline-start: auto;
}
#seeAlso, #familyMembers {
	margin: 1em 0;
}
#seeAlso > .head, #familyMembers > .head {
	font-size: 1.3em;
}
#seeAlso > ul, #familyMembers ul {
	list-style-type: none;
}
#seeAlso ul {
	padding-inline-start: 1.5em;
}
#seeAlso > ul > li, #familyMembers ul li {
	margin: 0.2em 0;
}
#familyMembers ul li.scHeart::before {
	font-family:"fontello";
	content:"\e809";
	margin-inline-end:5px;
}
#seeAlso > .head > span::before {
	font-family: "fontello";
	font-weight: normal;
	margin-inline-end: 0.5em;
}
#seeAlso.model > .head > span::before {
	content: "\f1e6";
}
#seeAlso.scHeart > .head > span::before {
	content: "\e838";
}
.depLists {
	display: flex;
}
.depList {
	flex: 1 1 auto;
	padding: 1em;
}
.depList:only-child {
	border: none !important;
}
.depList:first-child {
	border-inline-end: 1px dashed #b9bcbe;
}
.depList:last-child {
	border-inline-start: 1px dashed #b9bcbe;
}
.dep.model.lab > a::after {
	content: "\F0C3";
	font-family: "fontello";
	margin-inline-start: 0.5em;
}
.depList .depListHead::before{
	font-family:"fontello";
	margin-inline-end:0.5em;
}
.mod .depListHead::before{
	content:"\E81D";
}
.gen .depListHead::before{
	content:"\E805";
}
.skin .depListHead::before{
	content:"\f1fc";
}

/*=== END PARAGRAPH =================================================== */

/*=== START 404, 403 =================================================== */
.notFound a {
    text-decoration: none;
    color: var(--linkColor);
}
.notFound a:hover {
    color: color-mix(in oklab, var(--linkColor), #000 50%);
}
/*=== END 404, 403 =================================================== */

/*=== START METAS =================================================== */
#desc {
	position: relative;
}
#desc .cartridge {
	display: flex;
	justify-content: flex-end;
}
#desc .cartridge .abstract {
	padding-inline-end: 0.5em;
	flex:2 1 auto;
}
#desc .cartridge table {
	border-collapse: collapse;
	flex: 0 0 auto;
	max-width: 400px;
}
#desc .cartridge table tr {
	background-color: transparent;
	border-block-end: 1px solid #555;
}
#desc .cartridge table tr:last-child {
	border-block-end: none;
}
#desc .cartridge table td {
	padding: 0.5em;
}
#desc .cartridge table td.product {
	white-space: nowrap;
}
#desc .license {
	margin-block-start:1em;
}
#desc .license > a{
	text-decoration:none;
	color:#555;
}
#desc .license > a::before{
	font-family:"fontello";
	margin-inline-end:5px;
	font-weight:normal;
}
#desc .license > a.open::before{
	content:"\e80b";
}
#desc .license > a.closed::before{
	content:"\e80a";
}
.collBlk_open {
	border-inline-start: 1px dashed #444;
	margin-inline-start: 1em;
	padding-inline-start: 1em;
}

.lab .infos::before,
.project .infos::before,
.product .infos::before {
	content: "";
	font-family: "fontello";
	font-size: 22px;
}
.lab .infos,
.project .infos,
.product .infos {
	display: inline-block;
	margin-inline-start: 5px;
	overflow: hidden;
	text-decoration: none;
	vertical-align: middle;
	width: 20px;
}
.illustration {
	position: absolute;
	right: 0;
	top: -120px;
	box-shadow: 0 0 5px rgba(115, 115, 115, 0.5);
}
.illustration:hover {
	box-shadow: 0 0 5px rgba(0, 152, 163, 0.5);
}
/*=== END METAS =================================================== */

/*=== START TYPES =================================================== */
.dwnldGrp > legend {
	background: transparent url("img/types.svg") no-repeat scroll 5px 0 / 30px auto;
	display: block;
	line-height: 40px;
	padding-inline-start: 40px;
}
.dwnldGrp.wsppack > legend{
	background-position: 5px -2px;
}
.dwnldGrp.builderpack > legend{
	background-position: 5px -45px;
}
.dwnldGrp.skin > legend{
	background-position: 5px -90px;
}
.dwnldGrp.deb > legend{
	background-position: 5px -140px;
}
.dwnldGrp.ubuntu > legend{
	background-position: 5px -188px;
}
.dwnldGrp.lin > legend{
	background-position: 5px -230px;
}
.dwnldGrp.mac > legend{
	background-position: 5px -280px;
}
.dwnldGrp.win > legend{
	background-position: 5px -325px;
}
.dwnldGrp.sources > legend{
	background-position: 5px -362px;
}
.dwnldGrp.other > legend{
	background-position: 5px -400px;
}
.dwnldGrp.scar > legend{
	background-position: 5px -440px;
}
.dwnldGrp.ios > legend{
	background-position: 5px -480px;
}
.dwnldGrp.android > legend{
	background-position: 5px -522px;
}
.dwnldGrp.docker > legend{
	background-position: 5px -570px;
}
.dwnldGrp.postscriptum > legend{
	background-position: 5px -623px;
}
.dwnldGrp.appimage > legend{
	background-position: 5px -675px;
}
/*=== END TYPES =================================================== */

/*=== START SELECTOR =================================================== */
#selectors {
	text-align: right;
}
#selectors > select {
	margin: 0 5px;
}
#versionSelector{
	font-size: 0.6em;
	margin:1em;
}
.selector{
	font-size:0.8em;
	margin:1em;
}
#versionSelector .version, .selector select{
	font-size: inherit;
	padding: 0.5em;
	cursor:pointer;
}
.selector select,
#versionSelector .version{
	background-color:#efede9;
	color:#555;
}
.selector select option:hover, 
#versionSelector .version option:hover{
	box-shadow: 20px 20px #555 inset;
}

@supports (pointer-events: none) and ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
	#versionSelector, .selector {
		position: relative;
		display: inline-block;
		vertical-align: middle;
	}

	.selector select  {
		padding-inline-end: 2.5em;
		border: 0;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;	
	}
	#versionSelector .version  {
		padding: 5px 25px 5px 5px;
		border: 0;
		font-size: 1.3em;
		font-weight: bold;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;	
	}

	#versionSelector::before, #versionSelector::after,
	.selector::before, .selector::after{
		content: "";
		position: absolute;
		pointer-events: none;
	}

	#versionSelector::after,
	.selector::after	{
		content: "\25BC";
		height: 1em;
		font-size: .625em;
		line-height: 1;
		right: 1.2em;
		top: 50%; margin-block-start: -.5em;
		color: #ffffff;
	}

	#versionSelector::before,
	.selector::before	{ 
		width: 2em;
		right: 0; top: 0; bottom: 0;
		bottom: 0;
		top: 0;
	}
	.selector::before,
	#versionSelector::before{ 
		background-color: #555;
	}
	
	#versionSelector .version[disabled], .selector select[disabled] {
		color: rgba(0,0,0,.3);
	}
}
/*=== END SELECTOR =================================================== */

/*=== START - TOOLTIP ===================================================*/
.tooltip{
	background-color: #ececec;
	border: 1px solid #2a2d35;
	box-shadow: 0 0 2px #2a2d35;
}
.tooltip_ti{
	background-color: #2a2d35;
	color: #fff;
	line-height: 1.7em;
	min-height:1.7em;
	text-align:center;
}
.tooltip_co{
	padding: 2px 4px;
}
a.tooltip_x::before {
	color: #fff;
	content: "\e806";
	font-family: "fontello";
	font-size: 1.4em;
	font-weight: normal;
}
a.tooltip_x {
	position: absolute;
	right: 2px;
	text-decoration: none;
	top:0;
}
.tooltip_x > span {
	display: none;
}
/*=== END - TOOLTIP ======================================================== */

/*=== START - COOKIE ======================================================= */
.cookieWarnBar_on header {
	margin-block-start: 1.6em;
}
.cookieWarnBar_on #seachBox,
.cookieWarnBar_on #navLangSelector{
	top: 2.1em;	
}
.cookieWarnBar_off .cookieWarnBar {
	display: none;
}
.cookieWarnBar {
	background-color: #fff;
	left: 0;
	padding: 0 3em 0 1em;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 1;
	box-shadow: 0 0 5px rgba(115, 115, 115, 0.5);
}
a.cookieWarnBtn::before {
	content: "\e806";
	font-family: "fontello";
	font-size: 1.4em;
	font-weight: normal;
}
a.cookieWarnBtn {
	position: absolute;
	right: 0.5em;
	text-decoration: none;
	top:0;
}
.cookieWarnBtn > span {
	display: none;
}
.cookieWarnMsg {
	line-height: 1.6em;
}
/*=== END - COOKIE ========================================================= */

/*=== START - DIALOG ========================================================= */
dialog[open] {
    border: 0;
    border-radius: 0.3em;
    box-shadow: 0 2px 10px -3px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    width: 100%;
    max-width: 960px;
}

dialog[open] > div.head {
    display: flex;
    align-items: center;
    gap: 0.5em;
}
dialog[open] > div.head .title {
    flex: 1;
    font-size: 1.3em;
    font-weight: 600;
}

dialog[open] > div.head .remove {
    appearance: none;
    background: transparent;
    border: 0;
    font-size: 1.5em;
    color: var(--linkColor);
}
dialog[open] > div.head .remove:hover {
    color: color-mix(in oklab, var(--linkColor), #000 50%);
    cursor: pointer;
}
dialog[open] > div.head .remove::before {
    font-family: "fontello";
    content: "\E806";
}
dialog[open] > div.head .remove > span {
    display: none;
}

dialog[open] > div.footer .remove {
    display: none;
}
/*=== END - DIALOG ========================================================= */

/*=== START - RESPONSIVE DESIGN ============================================ */
@media (min-width: 1921px){
    .home #main .content div.tabbody > div {
        max-width: var(--maxWidth);
    }
}
@media (max-width: 1059px){
    #scSoftHeader {
        padding-top: 42px;
    }
}
@media (max-width: 800px){
    .home #main > div {
        display: flex;
        flex-direction: column;
    }
    .home #main aside {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        max-width: -webkit-fill-available;
        max-width: -moz-available;
        overflow: visible;
    }
    .home #main .intro {
        padding-block-start: 1em;
        padding-inline: 1em;
    }
    .home #main .content div.tabhead {
        overflow-x: auto;
        overflow-y: hidden;
    }
	.results #lists .list, #desc > * {
		display: table-row !important;
	}
	#desc .cartridge table {
		max-width: initial;
	}

	.root #main > div {
		flex-direction: column;
	}
	.depLists {
		flex-direction: column;
	}
	.depList:first-child {
	border-inline-end: none;
	}
	.depList:last-child {
		border-inline-start: none;
	}
	.illustration {
		position: static;
		text-align:center;
		box-shadow: none;
	}
	.illustration:hover{
		box-shadow: none;
	}
	#seachBox{
		top: 5px;
	}
}
@media (max-width: 550px){
    main {
        padding-block-end: 2em;
    }
	input#searchText, input#searchExtText {
		font-size: 1em;
	}
	#productHead {
	    padding-inline: 0;
	}
	#productHead > h2 {
	    flex: 1;
	}
	#productHead > h2 > img {
	    width: 30px;
	    height: 30px;
	}

	i.type{
		display:none;
	}
	input#searchText{
		width: auto;
	}
	fieldset ul{
		padding-inline-start:0;
	}
	input#searchText, input#searchExtText {
		width: 18em;
	}

    a.doc::before {
        font-size: 1.2em;
    }
	a.doc span {
	    display: none;
	}
}