body {margin: 0px; color: var(--TextFillColorPrimaryBrush); background: radial-gradient(circle at 64% 46%, var(--pageBackgroundGradientColorStop1) 0, var(--pageBackgroundGradientColorStop2) 57%, var(--pageBackgroundGradientColorStop3) 100%);}
a {color: var(--TextFillColorPrimaryBrush);}
a:hover {text-decoration: none; color: var(--TextFillColorSecondaryBrush); cursor: pointer;}
a:active {color: var(--TextFillColorPrimaryBrush);}
icon {font-family: icons;}

  @keyframes opacity_in {
    from {opacity: 0; transform: scale(1.01);}
    to {opacity: 1; transform: scale(1);}
  }

  @keyframes opacity_in2 {
    from {opacity: 0;}
    to {opacity: 1;}
  }

  @keyframes opacity_in_applauncher {
    from {opacity: 0; transform: translate3d(0px, 0px, 0px);}
    to {opacity: 1; transform: translate3d(3px, 3px, 0px);}
  }

  @keyframes opacity_in_pagecontent {
    from {opacity: 0; transform: translate3d(0px, 5px, 0px);}
    to {opacity: 1; transform: translate3d(0px, 0px, 0px);}
  }

  @keyframes opacity_in_sidemenu {
    from {opacity: 0; transform: translate3d(-5px, 0px, 0px);}
    to {opacity: 1; transform: translate3d(0px, 0px, 0px);}
  }

  @keyframes opacity_in_top {
    from {opacity: 0; transform: translate3d(0px, -5px, 0px);}
    to {opacity: 1; transform: translate3d(0px, 0px, 0px);}
  }


span.badge {padding: 6px 12px; font-family: caption; font-size: 12px !important; line-height: 12px; border-radius: 50px; line-height: 16px;}

@media (max-width: 560px) {
    span.badge {font-size: 8px !important; padding: 1px 3px;}
}

.badge-large {display: inline-block; font-family: body; border-radius: 16px; padding: 7px 9px; font-weight: 400; font-size: 12px; line-height: 16px; box-shadow: var(--shadow4);}

.badge-large.critical {background: var(--SystemFillColorNeutralBrush); color: var(--globalColorWhite);}
.badge-large.warning {background: var(--SystemFillColorCautionBrush); color: var(--globalColorBlack);}
.badge-large.informational {background: var(--SystemFillColorAttentionBrush); color: var(--globalColorWhite);}
.badge-large.normal {background: var(--BackgroundColorTopBrush);}

.badge-small {display: inline-block; font-family: body; border-radius: 16px; padding: 1px 4px; font-weight: 400; font-size: 12px; line-height: 16px; box-shadow: var(--shadow4);}

.badge-small.critical {background: var(--SystemFillColorNeutralBrush); color: var(--globalColorWhite);}
.badge-small.warning {background: var(--SystemFillColorCautionBrush); color: var(--globalColorBlack);}
.badge-small.informational {background: var(--SystemFillColorAttentionBrush); color: var(--globalColorWhite);}
.badge-small.normal {background: var(--BackgroundColorTopBrush);}


.badge-icon {height: 16px; width: 16px; box-shadow: var(--shadow4); display: inline-block; margin: 0px; font-size: 12px; line-height: 16px; text-align: center; font-weight: 400; font-family: icons; color: var(--globalColorWhite); padding: 1px; border-radius: 999px;}

.badge-icon.critical {background: var(--SystemFillColorNeutralBrush); color: var(--globalColorWhite);}
.badge-icon.warning {background: var(--SystemFillColorCautionBrush); color: var(--globalColorBlack);}
.badge-icon.informational {background: var(--SystemFillColorAttentionBrush); color: var(--globalColorWhite)}

.badge-icon.accept {background: var(--ColorBadgeIconGreen); color: var(--globalColorWhite);}
.badge-icon.cancel {background: var(--ColorBadgeIconRed); color: var(--globalColorWhite);}


.subtitle {font-weight: 600; font-size: 20px; font-family: subtitle; line-height: 20px;}
.subtitle-light {font-weight: 200; font-size: 20px; font-family: body; line-height: 20px;}
.title {font-weight: 600; font-size: 28px; font-family: title; line-height: 28px;}
.title-large {font-weight: 600; font-size: 40px; font-family: title-large; line-height: 40px;}
b {font-weight: 600; font-family: subtitle;}

.page-content {height: calc(100vh - 48px); overflow-y: auto; margin-right: 4px;}

::-webkit-scrollbar {width: 6px; padding: 0 4px 0px 4px;}
::-webkit-scrollbar-track {border-radius: 5px;}
::-webkit-scrollbar-thumb {background: var(--globalColorGrey40); border-radius: 5px;}
::-webkit-scrollbar-thumb:hover {background: var(--globalColorGrey60);}

.page-content-padding {transition: .2s; margin-left: 280px; width: calc(100% - 280px - 6px); animation: opacity_in_pagecontent .4s;}
.page-content-padding-wide {max-width: 1652px; margin-left: auto; margin-right: auto; padding: 0px 24px; animation: opacity_in_pagecontent .4s;}




.top-menu {width: 100% !important; margin: 0 auto; height: 48px; line-height: 48px; top: 0px; z-index: 1000; animation: opacity_in_top .4s;}
.top-menu .content {width: 100%;}

.top-menu .content div.ppicture {height: 48px; width: 68px; text-align: center; position: absolute;}
.top-menu .content a.page-name {background: var(--AccentTextFillColorPrimaryBrush); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 0 8px; font-size: 16px; line-height: 48px; font-family: "title"; }
.top-menu .content .bread-crumb {display: inline-flex;}
.top-menu .content .breadcrumb {font-size: 16px; line-height: 48px; font-family: "body"; font-weight: 100;}
.top-menu .content .breadcrumb icon {font-size: 11px;}
.top-menu .content a.page-name:hover {background: var(--AccentTextFillColorSecondaryBrush); -webkit-background-clip: text; -webkit-text-fill-color: transparent; cursor: pointer;}
.top-menu .content #cas {font-family: caption; font-size: 12px; line-height: 15.96px; font-weight: 400; float: right; text-align: right; margin-top: 9px; margin-right: 32px;}

.top-menu .content .applauncher {width: 68px; height: 48px; float: left;}
.top-menu .content .applauncher .applauncherbutton {width: 68px; height: 48px; border: none; background: transparent;}
.top-menu .content .applauncher .applauncherbutton:hover {background: var(--colorNeutralBackgroundAlpha3Hover); cursor: pointer;}
.top-menu .content .applauncher .applauncherbutton:active {transform: scale(0.95);}
.top-menu .content .applauncher img {width: 18px; height: 18px; object-fit: cover;}


.top-menu .content .social {width: 48px; height: 48px; float: right; margin-right: 12px}
.top-menu .content .social button {width: 48px; height: 48px; border: none; background: transparent;}
.top-menu .content .social button:hover {background: var(--colorNeutralBackgroundAlpha3Hover); cursor: pointer;}
.top-menu .content .social button:active {transform: scale(0.95);}

.top-menu .content .social img {width: 26px; height: 26px; object-fit: cover;}


.side-menu {z-index: 1000; transition: .2s; margin: 0 auto; background: var(--BackgroundColorPrimaryBrush) !important; box-shadow: var(--shadow64); position: absolute; left: 0px; border-radius: 6px; border: var(--SurfaceStrokeColorFlyoutBrush);}
.side-menu .content {width: 100%; display: flex;}
.side-menu .content button {cursor:pointer; width: 73px; height: 60px; background: transparent; border: none; color: var(--TextFillColorPrimaryBrush);}
.side-menu .content button:hover {background: var(--BackgroundColorMidBrush) !important;}
.side-menu .content button img {width: 20px; height: 20px;}
.side-menu .content button svg {height: 19px; width: 19px; color: var(--TextFillColorPrimaryBrush);}
.side-menu .content button span {font-size: 11px; width: 100%; display: block;}


/* FONTY */
@font-face {font-family: caption; src: url('/style/font/Segoe-UI-Variable-Static-Small.ttf');}
@font-face {font-family: body; src: url('/style/font/Segoe-UI-Variable-Static-Text.ttf');}
@font-face {font-family: body-strong; src: url('/style/font/Segoe-UI-Variable-Static-Text-Semibold.ttf');}
@font-face {font-family: body-large; src: url('/style/font/Segoe-UI-Variable-Static-Text.ttf');}
@font-face {font-family: subtitle; src: url('/style/font/Segoe-UI-Variable-Static-Display-Semibold.ttf');}
@font-face {font-family: title; src: url('/style/font/Segoe-UI-Variable-Static-Display-Semibold.ttf');}
@font-face {font-family: title-large; src: url('/style/font/Segoe-UI-Variable-Static-Display-Semibold.ttf');}
@font-face {font-family: display; src: url('/style/font/Segoe-UI-Variable-Static-Display-Semibold.ttf');}

@font-face {font-family: icons; src: url('/style/font/Segoe-Fluent-Icons.ttf');}



/* BLOCKY */


@media (max-width: 620px) {
    .main-page-hero img {max-width: 100px;}
}

/* PAGE HEAD */

.page-head {width: 100%; height: 25vh;}
.page-head .content {width: calc(100% - 280px); margin: 0 auto; padding-left: 64px; padding-right: 64px; transform: translate(0%, -50%); padding-top: 25vh}

.page-head .content .title {margin: 6px 0px; font-size: 26px; font-weight: 600; font-family: title;}
.page-head .content .desc {margin: 6px 0px; font-size: 20px; font-weight: 200; font-family: body;}


@media (max-width: 1000px) {
    .page-head .content {width: 90% !important; padding-left: 5%; padding-right: 5%;}
}

@media (max-width: 560px) {
    .page-head .content {width: calc(100% - 24px) !important; padding-left: 12px; padding-right: 12px; text-align: center;}
    .page-head .content .title {margin: 2px 0px; font-size: 20px;}
    .page-head .content .desc {margin: 0px 0px;font-size: 15px;}
}

/* - velký */

.page-head.big {height: 50vh !important;}
.page-head.big .content {padding-top: 50vh !important;}


/* Tab list pro stránky s mody */

.tablist {transition: .2s; display: block; padding: 6px 0px; width: 280px; height: calc(100vh - 48px); position: fixed; padding-top: 40px; text-align: left; animation: opacity_in_sidemenu .4s;}

.tablist .title {margin-left: 24px; font-family: "body-strong"; font-size: 14px; width: calc(100% - 42px); cursor: pointer;}
.tablist .title icon {float: right; margin-right: 12px; font-size: 15px; font-weight: 100; opacity: 0; transition: .2s;}
.tablist .title.zavreno icon {opacity: 1;}
.tablist:hover > .title icon {opacity: 1;}

.tablist ul {list-style-type: none; padding: 0; margin: 0; margin-top: 12px;}
.tablist .tab_li {width: 262px; height: 36px; font-family: "body"; font-size: 14px; font-weight: 200; margin-bottom: 1px;}
.tablist .tab_li:active {transform: scale(0.98);}
.tablist .tab_li .li-content {transition: .2s; height: 36px; position: relative;align-items: center;display: flex; margin-left: 16px; border-radius: 6px;}
.tablist .tab_li::before {transition: .2s; content: ""; position: absolute; width: 3px; height: 16px; border-radius: var(--borderRadiusSmall); margin-left: 4px; margin-right: 6px; margin-top: 9px;}
.tablist .tab_li:hover > .li-content {background: var(--colorNeutralBackgroundAlpha3Hover);}
.tablist .tab_li:hover::before {background: var(--globalColorGrey40);}
.tablist .tab_li icon {height: 20px; width: 20px; font-size: 15px; margin: 0px 6px; position: relative; top: 2px; left: 2px;}
.tablist .tab_li:hover {cursor: pointer;}
.tablist .tab_li.active {font-family: "body-strong"; transition: .2s;}
.tablist .tab_li.active::before {background: var(--AccentTextFillColorPrimaryBrush);}
.tablist .tab_li.active icon {background: var(--AccentTextFillColorPrimaryBrush); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

/* carousel */
.carousel {display: flex; flex-wrap: wrap; justify-content: center; margin: -6px; flex-direction: row;}

@media (max-width: 560px) {
    .carousel {margin: -3px;}
}

.carousel.left {justify-content: left;}


/* image-box2 */
.carousel a.image-boxa2 {text-decoration: none;}
.image-boxa2 {width: 210px; margin: 6px 6px; display: grid; color: var(--globalColorWhite);}
.image-box2 {transform: translateY(0px); border-radius: 7px; transition: background .1s, transform .15s; position: relative; box-shadow: var(--shadow4); border: var(--SurfaceStrokeColorFlyoutBrush); background: var(--BackgroundColorMiddleBrush);}
    .image-box2:hover {background: var(--BackgroundColorHoverBrush); transform: translateY(-2px); box-shadow: var(--shadow28);}
    .image-box2:active {transform: scale(0.98);}
.image-box2 img {border-bottom: var(--DividerStrokeColorDefaultBrush); object-fit: cover; width: 100%; height: 130px; border-radius: 7px 7px 0px 0px; margin: 0px; margin-bottom: 6px;}
.image-box2 .text {margin: 12px; margin-top: 0px; color: var(--TextFillColorPrimaryBrush)}
.image-box2 .text .subtitle {font-size: 20px; font-weight: 600; line-height: 20px; margin-bottom: 6px; margin-top: 6px;}
.image-box2 .text icon {font-family: icons; font-size: 10px; font-weight: 400; line-height: 20px;}
.image-box2 .text .info {font-size: 14px; font-weight: 400; line-height: 14px; font-family: body;  margin-bottom: 40px; color: var(--TextFillColorSecondaryBrush);}
.image-box2 .text .prejit {font-family: body; font-size: 14px; font-weight: 400; position: absolute; bottom: 12px; color: var(--TextFillColorSecondaryBrush);}
.image-box2 .text .prejit::after {content: "❯"; padding-left: 2px; transition: .05s;}
.image-box2:hover .text .prejit::after {padding-left: 4px;}
.image-box2 .text .prejit icon {padding-left: 2px; transition: .05s;}
.image-box2:hover .text .prejit icon {padding-left: 4px;}
.image-box2 .text .download {font-family: body; font-size: 14.5px; font-weight: 400; position: absolute; bottom: 6px; color: var(--TextFillColorSecondaryBrush);}

/* docasne */
.part.image-boxa2 {overflow: visible !important;}

.carousel.big-img .image-box2 img {height: 200px;}

@media (max-width: 1252px) {
    .image-boxa2 {width: calc(25% - 12px);}
}

@media (max-width: 690px) {
    .image-boxa2 {width: calc(33.333% - 6px); margin: 3px 3px;}
    .image-box2 img {height: 120px;}
    .image-box2 .text {margin: 6px; margin-top: 0px;}
    .image-box2 .text .subtitle {font-size: 15px; line-height: 17px;}
    .image-box2 .text .info {font-size: 13px; line-height: 15px;}
    .image-box2 .text .prejit {font-size: 12px; margin-top: 5px;}
    .image-box2 .text .download {font-size: 12.5px;}
}


/* part */
.part {border-radius: 7px; overflow: hidden; margin: 6px;}
.part.uno {width: 100%;}
.part.duo {width: calc(50% - 14px);}
.part.duo_all {width: calc(50% - 14px);}
.part.trio {width: calc(33.333% - 14px);}
.part.trio_uno {width: calc(33.333% - 14px);}
.part.trio_duo {width: calc(33.333% - 14px);}
.part.quatro {width: calc(25% - 14px);}

@media (max-width: 1050px) {
    .part.duo {width: calc(50% - 14px);}
}

@media (max-width: 840px) {
    .part.trio {width: calc(50% - 14px);}
    .part.trio_uno {width: calc(50% - 14px);}
    .part.trio_duo {width: calc(50% - 14px);}
}

@media (max-width: 560px) {
    .part {margin: 3px;}
    .part.duo {width: calc(100% - 8px);}
    .part.trio {width: calc(100% - 8px);}
    .part.trio_uno {width: calc(100% - 8px);}
    .part.trio_duo {width: calc(50% - 8px);}
    .part.duo_all {width: calc(50% - 8px)}
    .part.quatro {width: calc(50% - 8px);}
}


.part.popis {box-shadow: var(--ShadowBoxCart); border: var(--SurfaceStrokeColorFlyoutBrush); background: var(--BackgroundColorMiddleBrush);}
.part.popis .nadpis {padding: 16px 24px 12px 24px; font-size: 16px; border-bottom: var(--DividerStrokeColorDefaultBrush);}
.part.popis .text {padding: 20px 24px 20px 24px; font-family: body; font-size: 14px; font-weight: 400; line-height: 20px;}
.part.popis .text icon {font-family: icons; font-size: 10px; font-weight: 400; line-height: 17px;}

@media (max-width: 560px) {
    .part.popis .nadpis {padding: 12px 12px 10px 12px; font-size: 15px;}
    .part.popis .text {padding: 12px; font-size: 13px;}
}


.part.proklik {min-height: 140px; box-shadow: var(--ShadowBoxCart); border: var(--SurfaceStrokeColorFlyoutBrush); cursor: pointer;}
.part.proklik a {text-decoration: none; color: #fff;}
.part.proklik .text {color: #fff; background: rgba(0, 0, 0, 0.3); height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; flex-direction: column; text-shadow: rgb(51 51 51) 0px 0px 10px;}
.part.proklik .text icon {font-family: icons; font-size: 10px; font-weight: 400; line-height: 20px;}
.part.proklik .text .info {font-family: body; font-size: 14px; font-weight: 400; line-height: 20px;}
.part.proklik .text .prejit {font-family: body; font-size: 14px; font-weight: 400; line-height: 20px;}
.part.proklik .text .prejit::after {content: "❯"; padding-left: 2px; transition: .05s;}
.part.proklik:hover .text .prejit::after {padding-left: 4px;}

@media (max-width: 560px) {
    .part.proklik {min-height: 100px;}
    .part.proklik .text .nadpis {font-size: 17px; margin: 0px;}
    .part.proklik .text .info {font-size: 11px;}
    .part.proklik .text .prejit {font-size: 11px; margin-top: 3px;}
}



.part.proklik-big {min-height: 250px; box-shadow: var(--ShadowBoxCart); border: var(--SurfaceStrokeColorFlyoutBrush); cursor: pointer;}
.part.proklik-big a {text-decoration: none; color: #fff;}
.part.proklik-big .text {color: #fff; background: rgba(0, 0, 0, 0.3); height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; flex-direction: column; text-shadow: rgb(51 51 51) 0px 0px 10px;}
.part.proklik-big .text icon {font-family: icons; font-size: 10px; font-weight: 400; line-height: 20px;}
.part.proklik-big .text .info {font-family: body; font-size: 14px; font-weight: 400; line-height: 20px;}
.part.proklik-big .text .prejit {font-family: body; font-size: 14px; font-weight: 400; line-height: 20px;}
.part.proklik-big .text .prejit::after {content: "❯"; padding-left: 2px; transition: .05s;}
.part.proklik-big:hover .text .prejit::after {padding-left: 4px;}

@media (max-width: 560px) {
    .part.proklik-big {min-height: 100px;}
    .part.proklik-big .text .nadpis {font-size: 17px; margin: 0px;}
    .part.proklik-big .text .info {font-size: 11px;}
    .part.proklik-big .text .prejit {font-size: 11px; margin-top: 3px;}
}


.part.proklik-big-down {min-height: 250px; box-shadow: var(--ShadowBoxCart); border: var(--SurfaceStrokeColorFlyoutBrush); cursor: pointer;}
.part.proklik-big-down a {text-decoration: none; color: #fff;}
.part.proklik-big-down .text {transform: translateY(-12px);padding-bottom: 12px; color: #fff; background: rgba(0, 0, 0, 0.3); height: 100%; display: flex; justify-content: flex-end; align-items: center; text-align: center; flex-direction: column; text-shadow: rgb(51 51 51) 0px 0px 10px;}
.part.proklik-big-down .text .subtitle {font-size: 20px; font-weight: 600; line-height: 20px; margin-bottom: 6px; margin-top: 6px;}
.part.proklik-big-down .text icon {font-family: icons; font-size: 10px; font-weight: 400; line-height: 20px;}
.part.proklik-big-down .text .info {font-size: 14px; font-weight: 400; line-height: 14px; font-family: body;  margin-bottom: 6px;}
.part.proklik-big-down .text .prejit {font-family: body; font-size: 14px; font-weight: 400; line-height: 20px;}
.part.proklik-big-down .text .prejit::after {content: "❯"; padding-left: 2px; transition: .05s;}
.part.proklik-big-down:hover .text .prejit::after {padding-left: 4px;}

.carousel.big-img .part.proklik-big-down {min-height: 350px;}

@media (max-width: 560px) {
    .part.proklik-big-down {min-height: 100px;}
    .part.proklik-big-down .text .nadpis {font-size: 17px; margin: 0px;}
    .part.proklik-big-down .text .info {font-size: 11px;}
    .part.proklik-big-down .text .prejit {font-size: 11px; margin-top: 3px;}
}



.part.youtube-video {box-shadow: var(--ShadowBoxCart); border: var(--SurfaceStrokeColorFlyoutBrush); position: relative; display: inline-block; border-radius: 4px;}
.part.youtube-video:after {padding-top: 56.25%; display: block; content: '';}
.part.youtube-video div {position: absolute; top: 0; bottom: 0; right: 0; left: 0; background-color: #000; color: #fff; border-radius: 4px; overflow: hidden;}
.part.youtube-video iframe {border-radius: 4px;}

.youtube-video {width: 100%; box-shadow: var(--ShadowBoxCart); border: var(--SurfaceStrokeColorFlyoutBrush); position: relative; border-radius: 7px;}
.youtube-video:after {padding-top: 56.25%; display: block; content: '';}
.youtube-video div {position: absolute; top: 0; bottom: 0; right: 0; left: 0; background-color: #000; color: #fff; border-radius: 7px; overflow: hidden;}
.youtube-video iframe {border-radius: 7px;}




/* gallery */
.part.gallery {position: relative; height: auto;}
.part.gallery img {width: 100%; border-bottom: var(--DividerStrokeColorDefaultBrush); height: 100%; object-fit: cover;}
.part.gallery .display-left {cursor: pointer; width: 18px; border-radius: 3px; border: 0px; padding: 16px 5px; background: var(--BackgroundColorPrimaryBrush); box-shadow: var(--shadow4); backdrop-filter: blur(5px); color: var(--TextFillColorSecondaryBrush); font-size: 8px; line-height: 8px; height: 40px; position: absolute; top: 50%; left: calc(0% + 1px); transform: translate(0%, -50%);}
.part.gallery .display-left:hover {color: var(--TextFillColorPrimaryBrush);}
.part.gallery .display-right {cursor: pointer; width: 18px; border-radius: 3px; border: 0px; padding: 16px 5px; background: var(--BackgroundColorPrimaryBrush); box-shadow: var(--shadow4); backdrop-filter: blur(5px); color: var(--TextFillColorSecondaryBrush); font-size: 8px; line-height: 8px; height: 40px; position: absolute; top: 50%; left: calc(100% - 19px); transform: translate(0%, -50%);}
.part.gallery .display-right:hover {color: var(--TextFillColorPrimaryBrush);}


.gallery {width: 100%; position: relative;}
.gallery img {width: 100%; border-radius: 7px; border-bottom: var(--DividerStrokeColorDefaultBrush);}
.gallery .display-left {cursor: pointer; width: 18px; border-radius: 3px; border: 0px; padding: 16px 5px; background: var(--BackgroundColorPrimaryBrush); box-shadow: var(--shadow4); backdrop-filter: blur(5px); color: var(--TextFillColorSecondaryBrush); font-size: 8px; line-height: 8px; height: 40px; position: absolute; top: 50%; left: calc(0% + 1px); transform: translate(0%, -50%);}
.gallery .display-left:hover {color: var(--TextFillColorPrimaryBrush);}
.gallery .display-right {cursor: pointer; width: 18px; border-radius: 3px; border: 0px; padding: 16px 5px; background: var(--BackgroundColorPrimaryBrush); box-shadow: var(--shadow4); backdrop-filter: blur(5px); color: var(--TextFillColorSecondaryBrush); font-size: 8px; line-height: 8px; height: 40px; position: absolute; top: 50%; left: calc(100% - 19px); transform: translate(0%, -50%);}
.gallery .display-right:hover {color: var(--TextFillColorPrimaryBrush);}





/* button */
.button {background: var(--AccentTextFillColorPrimaryBrush); color: var(--globalColorWhite); cursor: pointer; min-width: 96px; overflow: hidden; border: none; box-shadow: var(--shadow4); align-items: center; padding: 6px 13px; height: 32px; border-radius: 6px;}
.button:hover {background: var(--AccentTextFillColorSecondaryBrush);}
.button:active {background: var(--AccentTextFillColorPrimaryBrush); color: var(--globalColorWhite); transform: scale(0.95);}

.button.disabled {background: var(--BackgroundColorTopBrush); color: var(--globalColorGrey32); cursor: not-allowed;}


/* info bar */
.infobar {width: 100%; padding: 16px 0px 16px 0px; border-radius: 3px; border: var(--SurfaceStrokeColorFlyoutBrush);}
.infobar .icon {margin: 0px 13px 0px 15px; font-size: 12px; line-height: 16px; text-align: center; box-shadow: var(--shadow4); font-weight: 400; font-family: icons; color: var(--globalColorWhite); padding: 2px; border-radius: 999px;}
.infobar .title {font-family: body-strong; font-size: 14px; line-height: 20px; margin-top: 13px; margin-bottom: 15px;}
.infobar .text {margin: 0px; width: calc(100% - 64px); font-family: body-large; margin-left: 49px; margin-right: 15px; font-size: 14px; line-height: 20px;}


.infobar.critical {background: var(--SystemFillColorCriticalBackgroundBrush)}
.infobar.critical .icon {background: var(--SystemFillColorNeutralBrush)}

.infobar.warning {background: var(--SystemFillColorCautionBackgroundBrush)}
.infobar.warning .icon {background: var(--SystemFillColorCautionBrush); color: var(--globalColorBlack);}

.infobar.informational {background: var(--SystemFillColorAttentionBackgroundBrush)}
.infobar.informational .icon {background: var(--SystemFillColorAttentionBrush); color: var(--globalColorwhite);}



/* download page */



/* left panel */

.downloadpage .leftpanel {font-family: body; float: left; position: fixed; border-radius: 7px; overflow: hidden; margin: 6px; height: calc(100vh - 62px); width: 390px; box-shadow: var(--ShadowBoxCart); border: var(--SurfaceStrokeColorFlyoutBrush); background: var(--BackgroundColorMiddleBrush);}
.downloadpage .leftpanel .image-header {width: 100%; height: 200px; border-bottom: var(--DividerStrokeColorDefaultBrush); box-shadow: var(--ShadowBoxCart);}
.downloadpage .leftpanel .image-header img {object-fit: cover; width: 100%; height: 200px;}

.downloadpage .leftpanel .outspace {padding-left: 24px; padding-right: 24px; text-align: center;}

.downloadpage .leftpanel .outspace .title {margin-bottom: 12px;}
.downloadpage .leftpanel .outspace .subtitle-light {margin: 0px;}

.downloadpage .leftpanel .outspace .authors {margin-top: 24px; margin-bottom: 12px; font-family: caption; font-size: 13px; line-height: 15.96px; font-weight: 400;}

.downloadpage .leftpanel .outspace .download {font-family: caption; font-size: 13px; line-height: 25.96px; font-weight: 400;}
.downloadpage .leftpanel .outspace .download .badge-icon {margin: 0px 6px 0px 6px;}

@media (max-width: 1200px) {
    .downloadpage .leftpanel {width: calc(100% - 14px); margin: 6px !important; padding-bottom: 24px; float: none; position: relative; height: auto;}
}


/* content panel */

.downloadpage .contentpanel {right: 0px; position: absolute; margin: 6px; width: calc(100% - 410px);}

@media (max-width: 1200px) {
    .downloadpage .contentpanel {position: absolute; margin: 6px !important; width: calc(100% - 12px);}
}