body {
    background-color: #f3f3f4;
}
input, select { font-size: 100%; }

.text-red {
    color: #e61e25;
}
.text-blue {
    color: #3699ff;
}
.text-white {
    color: #ffffff;
}
.bg-red {
    background-color: #e61e25;
    color: #FFFFFF;
}
.bg-blue {
    background-color: #3699ff;
    color: #FFFFFF;
}
.bg-practices {
    background-color:#1bc5db;
}
.bg-competition {
    background-color:#3699ff;
}
.btn-red, .btn-red.active {
    color: white;
    background: #e4222e!important;
    border: 1px solid #e4222e!important;
}

form .btn {
    margin-right: 5px;
}

.invisible {
    visibility: hidden;
}
.text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}
.hidden {
    display: none !important;
}

.widget-head-color-box {
    border-radius: 5px 5px 0 0;
    margin-top: 10px;
}

/* anchor fix for fixed header */
a[name] {
    padding-top: 145px;
    margin-top: -145px;
    display: inline-block; /* required for webkit browsers */
}

.fake-control {
    line-height: 1.5;
    color: #3F4254;
    background-color: #ffffff;
    background-clip: padding-box;
    border: 1px solid #E4E6EF;
    border-radius: 0.42rem;
    height: calc(1.5em + 1.3rem + 2px);
    padding-left: 10px;
}

.text-error {
    color: #F64E60;
}

.datatable-row {
    border-bottom: 1px solid #EBEDF3;
}

/* WIDGETS */
.widget {
    border-radius: 5px;
    padding: 15px 20px;
    margin-bottom: 10px;
    margin-top: 10px;
}
.widget.top-rounded-corners {border-bottom-left-radius:0; border-bottom-right-radius:0}
.widget.style1 h2 {
    font-size: 30px;
}
.widget h2,
.widget h3 {
    margin-top: 5px;
    margin-bottom: 0;
}
.widget-text-box {
    padding: 20px;
    border: 1px solid #e7eaec;
    background: #ffffff;
}
.widget-head-color-box {
    border-radius: 5px 5px 0 0;
    margin-top: 10px;
}
.widget .flot-chart {
    height: 51px;
    overflow:hidden;
}
.vertical-align div {
    display: inline-block;
    vertical-align: middle;
}
.vertical-align h2,
.vertical-align h3 {
    margin: 0;
}

/* override toastr alpha */
#toast-container > div {
    opacity: 0.9;
    filter: alpha(opacity=85);
}

/* CIRCLE */
.img-circle {
    border-radius: 50%;
}
.btn-circle {
    width: 30px;
    height: 30px;
    padding: 0px 0px 0px 6px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.428571429;
}
.btn-circle.btn-lg {
    width: 50px;
    height: 50px;
    padding: 10px 16px;
    border-radius: 25px;
    font-size: 18px;
    line-height: 1.33;
}
.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 24px;
    line-height: 1.33;
}

.modal-footer {
    margin-top: 0;
}

#filtertype a, #calendarfilterag a, #filtertypelt a, #calendarfilteraglt a {
    margin-right: 5px;
    margin-bottom: 5px;
    border: 1px solid #C8C8C8;
    border-radius: 4px;
    padding: 2px 6px 3px 6px;
    color: #747474!important;
    font-size: 10px;
    display: inline-block;
}
#filtertype a.selected, #calendarfilterag a.selected, #calendarfilteraglt a.selected, #filtertypelt a.selected {
    background-color: #EAE9E9;
}

/** Video Center **/

.selectize-control, .selectize-dropdown, .selectize-input {
    color: #555 !important;
}
.embed-container { 
    position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; 
}
.embed-container iframe, .embed-container object, .embed-container embed { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
}
#form_savevideo_modal_footer {
    padding: 0;
    margin-top: 10px;
}
#dartfish {
    background-image: url("/img/dartfish_logo.png");
    background-repeat: no-repeat;
    text-indent: 50px;
    font-size: 12px;
    background-size: 50px auto;
    margin-top: 8px;
}
#playerslist_table_wrapper {
    display: none;
}
#form_savevideo .tab-content {
    padding-top: 15px;
}

/* CUSTOMIZE METRONIC MENU STYLES */
/* aside size override */

/* .aside {
    width: 240px;
} */
@media (min-width: 992px) {

    /* .aside-fixed .wrapper {
        padding-left: 240px;
    }
    .aside-enabled .header.header-fixed {
        left: 240px;
    }
    .aside-enabled.subheader-fixed .subheader {
        left: 240px;
    } */
}

#kt_aside,
.brand,
.aside-menu,
.header-mobile {
    background-color: #1a1a1a
}

.topbar .svg-icon.svg-icon-primary svg g [fill]{
    fill:#b9b9b9!important;
}
.topbar .svg-icon.svg-icon-notification svg g [fill]{
    fill:#7f8297!important;
}

.topbar .pulse.pulse-primary .pulse-ring{
    border-color: #b9b9b9;
}

.brand .btn .svg-icon svg g [fill]{
    fill: #9f9f9f;
}
.brand .btn.active .svg-icon svg g [fill], .brand .btn:hover .svg-icon svg g [fill] {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
    fill: #e3001b; }


.aside-menu .menu-nav > .menu-item > .menu-heading .menu-bullet.menu-bullet-dot > span,
.aside-menu .menu-nav > .menu-item > .menu-link .menu-bullet.menu-bullet-dot > span {
  background-color: #9f9f9f ; }

.aside-menu .menu-nav > .menu-item > .menu-heading .menu-icon.svg-icon svg g [fill],
    .aside-menu .menu-nav > .menu-item > .menu-link .menu-icon.svg-icon svg g [fill] {
      fill: #9f9f9f; }

.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-heading,
.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link {
          background-color: black ; }

.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-heading .menu-icon,
.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link .menu-icon {
            color: #e3001b ; }
.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-heading .menu-icon.svg-icon svg g [fill],
.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link .menu-icon.svg-icon svg g [fill] {
              fill: #e3001b; }
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-open > .menu-heading,
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-open > .menu-link {
      background-color: black ; }
.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link {
        background-color: black ; }
.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-icon.svg-icon svg g [fill] {
        fill: #e3001b; }

.aside-menu .menu-nav > .menu-item:hover > .menu-heading .menu-bullet.menu-bullet-dot > span,
.aside-menu .menu-nav > .menu-item:hover > .menu-link .menu-bullet.menu-bullet-dot > span {
          background-color: #e3001b!important;
}

#kt_content {background-color: #f6f8f9}

.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-open > .menu-heading .menu-icon.svg-icon svg g [fill], .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-open > .menu-link .menu-icon.svg-icon svg g [fill] {
    fill: #e4222e;
}
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-heading .menu-icon.svg-icon svg g [fill], .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-icon.svg-icon svg g [fill] {
    fill: #888888;
}
.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-heading .menu-icon.svg-icon svg g [fill], .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-icon.svg-icon svg g [fill] {
    fill: #e4222e;
}
.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-heading, .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link {
    background-color: #000000;
}
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-open > .menu-heading, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-open > .menu-link {
    background-color: #000000;
}
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-heading .menu-icon.svg-icon svg g [fill], .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link .menu-icon.svg-icon svg g [fill] {
    fill: #e4222e;
}
.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-heading .menu-icon.svg-icon svg g [fill], .aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link .menu-icon.svg-icon svg g [fill] {
    fill: #e4222e;
}
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-open > .menu-heading .menu-bullet.menu-bullet-dot > span, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-open > .menu-link .menu-bullet.menu-bullet-dot > span {
    background-color: #e4222e;
}

.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link .menu-bullet.menu-bullet-dot > span,
.aside-menu .menu-link .menu-submenu .menu-link:hover span {background-color:#e3001b!important;}

.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-heading,
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link{
    background-color: #000000!important;
}

#footer-menu > .menu-item-open {
    color: #3699FF;
}

#kt_datatable .datatable-cell-sort >i,
#kt_datatable .datatable-cell-sort >span{
    color: #b5b5c3;
    font-size: .9rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .1rem;
}
/* Fix padding body container */

@media (max-width: 532px) {
    /* mobile fluid container */
    .mobile-full-width {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        width: 100vw !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .mobile-no-pd {
        padding: 0 !important;
    }
    .mobile-no-mr {
        margin: 0 !important;
    }
    .card-header {
        padding: 0 10px;
    }
    /* card footer gutter */
    /* .gutter-b {
        margin-bottom: 0;
    } */
    .offcanvas-mobile {
        width: 70%!important;
    }
    .custom-sidebar {
        padding: 0rem 2rem !important;
    }
    .card.card-custom>.card-body {
        padding: 2rem 0.75rem  0 0.75rem;
    }
    .subheader.subheader-solid {
        margin-bottom: 25px;
    }
    .content,
    #kt_content {
        padding-bottom: 0 !important;
    }
}

.icon-bt {
	padding: 5px 20px;
}

.custom_dropdown .dropdown-menu .dropdown-item.active .navi-icon i {
    color: #ffffff;
}
.custom_dropdown .dropdown-menu .dropdown-item.active .navi-text {
    color: #ffffff;
}
.custom_dropdown .dropdown-menu .dropdown-item .navi-icon i {
    font-size: 1.3em;
    margin-right: 1em;
}
.custom_dropdown .dropdown-menu .dropdown-item .navi-text {
    color: #b5b5c3;
}

.filter-accordion .accordion .card-header:hover{
    background-color: #f3f6f9;
}
.noUi-touch-area {
    cursor: pointer !important;
}
/* Mandatory checkboxes */
.small-text {
    font-size: .8rem !important;
}
/* video control */
video:focus {
    outline: none !important;
}
/*** iPhone and iOS Form Input Zoom Fixes ***/
/* Fix Input Zoom on devices older than iPhone 5: */
@media screen and (device-aspect-ratio: 2/3) {
    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"],
    input[type="url"]{ font-size: 16px; }
}

/* Fix Input Zoom on iPhone 5, 5C, 5S, iPod Touch 5g */
@media screen and (device-aspect-ratio: 40/71) {
    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"],
    input[type="url"]{ font-size: 16px; }
}

/* Fix Input Zoom on iPhone 6, iPhone 6s, iPhone 7  */
@media screen and (device-aspect-ratio: 375/667) {
    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"],
    input[type="tel"], input[type="url"]{ font-size: 16px; }
}

/* Fix Input Zoom on iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus, iPhone 8, iPhone X, XS, XS Max  */
@media screen and (device-aspect-ratio: 9/16) {
    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"],
    input[type="tel"], input[type="url"]{ font-size: 16px; }
}

/* Reset KT Datatable Style  */

.datatable_styles thead th{
    color: #b5b5c3 !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}
.datatable.datatable-default.datatable-head-custom>
.datatable-table>.datatable-foot .datatable-row>.datatable-cell>span,
.datatable.datatable-default.datatable-head-custom>.datatable-table>.datatable-head
.datatable-row>.datatable-cell>span {
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    color: #181c32 !important;
    text-transform: capitalize !important;
}
.datatable.datatable-default>.datatable-table>.datatable-body
.datatable-row>.datatable-cell.datatable-cell-sort,
.datatable.datatable-default>.datatable-table>.datatable-foot
.datatable-row>.datatable-cell.datatable-cell-sort,
.datatable.datatable-default>.datatable-table>.datatable-head
.datatable-row>.datatable-cell.datatable-cell-sort {
    color: #181c32 !important;
    text-transform: capitalize !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}
.dataTables_wrapper .dataTable tfoot th, .dataTables_wrapper .dataTable thead th {
    color: #181c32 !important;
    /*text-transform: capitalize !important;*/
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

@media (max-width: 991px ) {
    #kt_subheader {
        display: none !important;
    }
}

@media (min-width: 532px) and (max-width: 991px) {
    .subheader-enabled:not(.subheader-mobile-fixed) .content {
        padding-top: 0;
    }
}

/* Flag Countries */

.flag-country {
    background-size: cover;
    height: 15px;
    width: 15px;
    display: block;
}
.flag-AND {
    background-image: url('/img/flags/AND.svg');
}
.flag-AUS {
    background-image: url('/img/flags/AUS.svg');
}
.flag-BEL {
    background-image: url('/img/flags/BEL.svg');
}
.flag-BUL {
    background-image: url('/img/flags/BUL.svg');
}
.flag-CAN {
    background-image: url('/img/flags/CAN.svg');
}
.flag-CZE {
    background-image: url('/img/flags/CZE.svg');
}
.flag-DEN {
    background-image: url('/img/flags/DEN.svg');
}
.flag-ENG {
    background-image: url('/img/flags/ENG.svg');
}
.flag-EST {
    background-image: url('/img/flags/EST.svg');
}
.flag-FIL {
    background-image: url('/img/flags/FIL.svg');
}
.flag-FRA {
    background-image: url('/img/flags/FRA.svg');
}
.flag-GER {
    background-image: url('/img/flags/GER.svg');
}
.flag-HUN {
    background-image: url('/img/flags/HUN.svg');
}
.flag-ICE {
    background-image: url('/img/flags/ICE.svg');
}
.flag-IRL {
    background-image: url('/img/flags/IRL.svg');
}
.flag-ITA {
    background-image: url('/img/flags/ITA.svg');
}
.flag-LUX {
    background-image: url('/img/flags/LUX.svg');
}
.flag-NH {
    background-image: url('/img/flags/NH.svg');
}
.flag-NOR {
    background-image: url('/img/flags/NOR.svg');
}
.flag-POR {
    background-image: url('/img/flags/POR.svg');
}
.flag-RUS {
    background-image: url('/img/flags/RUS.svg');
}
.flag-SLK {
    background-image: url('/img/flags/SLK.svg');
}
.flag-SLO {
    background-image: url('/img/flags/SLO.svg');
}
.flag-SUI {
    background-image: url('/img/flags/SUI.svg');
}
.flag-USA {
    background-image: url('/img/flags/USA.svg');
}

.fc-unthemed .fc-event .fc-content:before, .fc-unthemed .fc-event-dot .fc-content:before{
    display: none !important;;
}

.fc-unthemed .fc-event .fc-content, .fc-unthemed .fc-event-dot .fc-content{
    padding-left: 5px !important;
}


/*.fc-button{*/
/*color:#3f4254 !important;*/
/*}*/

.fc-event .fc-time{
    font-size:9px !important;
    color:white !important;
}
.fc-title{
    font-size:9px !important;
    color:white !important;
}

/* @media (max-width: 991px) {
    .fc-toolbar {
        margin-bottom: 1rem;
        margin-top: 10px;
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
        -webkit-box-align: start !important;
        -ms-flex-align: start !important;
        align-items: flex-start !important;
    }
} */

/* Fix font-size nav-items tabs */
/* .nav.nav-tabs.nav-tabs-line.nav-tabs-line-3x .nav-item {
    margin-bottom: -13px;
}

@media (max-width: 767px ) {
    .nav.nav-tabs.nav-tabs-line.nav-tabs-line-3x .nav-item {
        margin-bottom: -3px;
    }
} */


/* Custom Modal -css- LOG|IN|ASI */ 
.custom-modal {
 z-index: 4;
}

.custom-modal:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left:0;
    top:0;

    /* Opção sem o blur - permite ver a informação */
    /* background: #000;
    opacity: 0.65; */

    /* Opção sem o blur - Não permite ver a informação */
    /*background-image:url('/img/overlay-bg.png');*/
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    opacity: 1;
}

.fc-header .fc-title{
    font-size:9px !important;
    color:black !important;
}

.form-message {
    margin-bottom: 20px;
}

/* DataTable actions align right */
.dt-body-right {
    text-align: right !important;
}

/* Force email text editing */
.ql-snow .ql-editor h1 {
    font-size: 2em !important;
}
.ql-snow .ql-editor h2 {
    font-size: 1.5em !important;
}
.ql-snow .ql-editor h3 {
    font-size: 1.17em !important;
}

/* used to fix the slider handler horz pos */
.noUi-target.noUi-horizontal .noUi-handle {
    margin-right: 5px;
}
.noUi-target.noUi-horizontal .noUi-value-large {
    margin-top: 5px;
}

/* Remove border from Elements Styles */
.timeline.timeline-6:before {
    display: none !important;
}

drag:hover{
    cursor: grab !important;
}

/* .content .bootstrap-select .dropdown-menu {
    z-index: 9999999!important;
} */

.info-badge {
    font-size: 1rem !important;
    cursor: pointer;
}

.fixed-table {
    min-width: 700px;
}

/* Handle Header Tables Scroll Width */
.dataTables_scrollHeadInner {
    min-width: 100% !important;
    width: -webkit-max-content !important;
    width: -moz-max-content !important;
    width: max-content !important;
}

/* Mobile icons Style */
.btn .svg-icon.mobile-menu-icon svg,
.mobile-menu-icon {
    height: 24px !important;
    width: 24px !important;
}

/* Mobile icons Color */
.mobile-menu-icon svg g [fill] {
    fill: #9f9f9f !important;
}
/* Mobile icons Hover Color */
.mobile-menu-icon:hover svg g [fill] {
    -webkit-transition: fill 0.3s ease !important;
    transition: fill 0.3s ease !important;
    fill: #e5222e !important; 
}

/* Data-tables Bottom Circle buttons :: Action disabled */
.btn:disabled.custom-btn-dt-bottom {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}
.btn.custom-btn-dt-bottom {
    opacity: 0.8 !important;
}

/* Swal2 icon size*/
.swal2-icon .swal2-icon-content {
    font-size: 3.75em !important;
}


/* PWA INSTALL */
#install-dialog {
    box-sizing: border-box;
    background-color: #e5e5e5;
    border-radius: 10px;
    transition: transform .3s ease-out;
    box-shadow: none;
    width: 100vw;
    max-width: 100vw;
    height: 75%;
    margin: 0;
    top: auto;
    border-radius: 10px 10px 0 0;
    border: none;
    box-shadow: 0 2px 6px 0 rgba(0,0,0,.24),0 -2px 0 #eeeeee;
    animation: slideUp 0.3s ease-out forwards;
}
#install-dialog header img {
    width: 60px;
}
#install-dialog header {
    padding-block: .5rem;
    padding-bottom: 10px;
    min-height: 50px;
    display: flex;
    align-items: start;
    border-bottom: 1px solid #bababa;
}


#install-dialog header div.heading {
    display: flex;
    align-items: start;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    padding-inline: 1rem;
}

#install-dialog header span:first-child {
    font-weight: bold;
    line-height: 26px;
}

#install-dialog header span:last-child {
    font-size: 12px;
    line-height: 16px;
}

#install-dialog header #close-dialog {
    border-radius: 50%;
}

#install-dialog button img {
    width: 18px;
}
#install-dialog button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background-color: #c5c1c6;
}
#install-dialog #back-button {
    transform: rotateY(180deg);
}
#install-dialog ul {
    list-style-type: none;
    padding: 0;
    margin-bottom: 2rem;
}
#install-dialog ul li {
    display: flex;
    align-items: center;
    padding: .5rem 0;
}
#install-dialog ul li img {
    width: 28px;
}
#install-dialog .screenshots,
#install-dialog .screenshots .scroll-div {
    width: 100%;
    overflow: auto;
    position: relative;
}
#install-dialog .screenshots .scroll-div div {
    display: flex;
    gap: 1rem;
}
#install-dialog .screenshots img {
    height: 250px;
}
#install-dialog .screenshots :is(.back, .forward) {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    height: 100%;
}
#install-dialog .screenshots .back {
    left: 8px;
    z-index: 1;
}
#install-dialog .screenshots .forward {
    right: 8px;
}
@media (min-width: 1024px) {
    #install-dialog {
      margin: 0 auto;
      width: 60vw;
      top: 5%;
      transform: translateY(-10%);
      opacity: 0;
      transition: transform .3s ease-out, opacity .3s ease-out;
    }
    #install-dialog .screenshots img {
        height: 50vh;
        max-height: 400px;
    }
    #install-dialog[opened] {
      opacity: 1;
    }
    #install-dialog header {
        padding-bottom: 10px;
        align-items: center !important;
    }
    #install-dialog header .close-wrapper {
        align-self: start !important;
    }
  }
@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes slideDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}