.wdk-layout {
    display: flex;
    position: relative;
    overflow: hidden;
}

.wdk-layout-main {
    display: flex;
    flex: 1;
    width: 100vw;
    min-height: 99.8vh;
    background-color: var(--primary);
    border-top-left-radius: 30px;
    border-radius: 20px 0px 0px 20px;
}

.wdk-layout-aside {
    position: relative;
    z-index: 7010;
}

.wdk-layout-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: 106px;
    padding-left: var(--layout-content-padding-sideview);
    padding-right: var(--layout-content-padding-sideview);
    padding-bottom: 24px;
    background-color: var(--system-main-background-color);
    padding-left: calc(var(--layout-content-padding-sideview) + var(--sidebar-expanded-width));
}

#sidebar-trigger:checked~.wdk-layout .wdk-layout-content>form {
    width: calc(100vw - 58px - 48px);
    transition: 0.3s;
    transition-delay: 0.3s;
}

@media (max-width: 992px) {
    #sidebar-trigger:checked~.wdk-layout .wdk-layout-content>form {
        width: 100%;
    }
}

.wdk-corner-top {
    position: fixed;
    top: 0;
    left: var(--sidebar-expanded-width);
    width: 20px;
    height: 20px;
    background-color: var(--sidebar-background-color);
    transition: var(--time-01);
    z-index: 2001;
}

.wdk-corner-top:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    background-color: var(--header-background-color);
    border-radius: 20px 0 0 0;
    border-top: 1px solid var(--sidebar-border-right-color);
    border-left: 1px solid var(--sidebar-border-right-color);
}

body.alert-show.alert-top .wdk-corner-top {
    top: 62px
}

.wdk-corner-bottom {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-expanded-width);
    width: 16px;
    height: 16px;
    background-color: var(--sidebar-background-color);
    transition: var(--time-01);
    z-index: 2;
}

.wdk-corner-bottom:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    background-color: var(--system-main-background-color);
    border-radius: 0 0 0 20px;
    border-left: 1px solid var(--sidebar-border-right-color);
    border-bottom: 1px solid var(--sidebar-border-right-color);
}

body.alert-show.alert-bottom .wdk-corner-bottom {
    bottom: 62px
}

#sidebar-trigger:checked~.wdk-layout .wdk-layout-main .wdk-corner-top {
    left: 58px;
    transition: 0.125s;
    transition-delay: 0.25s;
}

#sidebar-trigger:checked~.wdk-layout .wdk-layout-main .wdk-corner-bottom {
    left: 58px;
    transition: 0.125s;
    transition-delay: 0.25s;
}

#sidebar-trigger:checked~.wdk-layout .wdk-layout-content {
    padding-left: calc(58px + var(--layout-content-padding-sideview));
    transition: 0.3s;
    transition-delay: 0.3s;
}

@media (min-width: 992px) {

    /* 1025 Mobile update  */
    .wdk-layout-content>form {
        display: flex;
        flex-direction: column;
        width: calc(100vw - 48px - var(--sidebar-expanded-width));
    }
}

@media (max-width: 992px) {

    /* 1025 Mobile update  */
    .wdk-layout-main {
        border-radius: 0px;
    }

    .wdk-layout-content {
        width: 100%;
        max-width: 100vw;
        padding: 70px 16px 70px 16px !important;
        height: 100vh;
        height: -webkit-fill-available;
        min-height: -webkit-fill-available;
    }
}

/* Layout Mini */
.wdk-layout-mini {
    height: 100vh;
    overflow: auto;
}

.wdk-layout-mini .wdk-layout-content {
    height: inherit;
    padding: 16px !important;
    overflow: inherit;
}

.wdk-layout-mini .table-container {
    width: 100%;
}

.wdk-layout-mini .wdk-footer-fixed {
    left: 0;
    width: 100%;
}

.wdk-layout-mini .container {
    margin-top: 24px;
    padding-bottom: 60px !important;
}

/* Layout Monitor */
.wdk-layout-monitor {
    height: 100vh;
    overflow: auto;
}

.wdk-layout-monitor #divMain {
    height: 100%;
}

.wdk-layout-monitor .wdk-layout-content {
    height: inherit;
    padding: 86px 16px 16px 16px !important;
}

body.alert-show.alert-top .wdk-layout-monitor .wdk-layout-content {
    padding: 148px 16px 16px 16px !important;
}

body.alert-show.alert-bottom .wdk-layout-monitor .wdk-layout-content {
    padding: 86px 16px 78px 16px !important;
}

.wdk-layout-monitor .wdk-layout-content #divMain>form {
    height: 100%;
}

.wdk-monitor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    width: 100%;
    min-height: 70px;
    z-index: 2000;
    padding: 8px 12px 8px 24px;
    margin-left: -16px;
    border-radius: 0;
    background-color: var(--white-01);
    box-shadow: 0px 3px 6px rgb(0 0 0 / 10%);
    transition: var(--time-01);
    z-index: 1500;
}

body.alert-show.alert-top .wdk-monitor-header {
    top: 62px
}

.wdk-monitor-header-footer {
    /*z-index: 99999;*/
    position: absolute;
    padding: 0 !important;
    background-color: transparent !important;
    width: 100%;
    bottom: 0;
    left: 0;
}

.wdk-layout-content-monitor {
    display: flex;
    height: 100%;
    transition: all 0.5s;
}

.wdk-layout-content-monitor.has-footer {
    height: calc(100% - 62px);
}

.wdk-monitor-sidebar {
    flex-basis: 40%;
    padding-right: 16px;
}

.wdk-monitor-content {
    height: 100%;
    min-width: 50%;
    flex-basis: 100%;
    padding-left: 8px;
    padding-right: 8px;
    height: 100%;
    overflow: hidden auto;
    scroll-behavior: smooth;
}

.wdk-monitor-sidebar,
.wdk-monitor-content {
    scrollbar-width: thin !important;
}

.wdk-monitor-sidebar::-webkit-scrollbar-track,
.wdk-monitor-content::-webkit-scrollbar-track {
    background-color: var(--white-02) !important;
    -webkit-box-shadow: inset 0 0 6px var(--white-02) !important;
    box-shadow: inset 0 0 6px var(--white-02) !important;
}

.wdk-monitor-sidebar::-webkit-scrollbar,
.wdk-monitor-content::-webkit-scrollbar {
    background-color: var(--white-02) !important;
    width: 5px !important;
    height: 5px;
}

.wdk-monitor-sidebar::-webkit-scrollbar-thumb,
.wdk-monitor-content::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb-base-custom-color) !important;
    border-radius: 10px;
}

/* Layout Learning */
.wdk-layout-learning .wdk-layout-content {
    height: inherit;
    padding: 58px 0 0 0 !important;
}

body.alert-show.alert-top .wdk-layout-learning .wdk-layout-content {
    padding: 120px 0 0 0 !important;
}

.wdk-learning-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    width: 100%;
    min-height: 58px;
    z-index: 2000;
    padding: 8px 12px 8px 12px;
    margin-left: 0;
    border-radius: 0;
    background-color: var(--training-exec-header-background-color);
    border-bottom: var(--training-exec-header-border-bottom);
    box-shadow: 0px 3px 6px rgb(0 0 0 / 10%);
    transition: var(--time-01);
    z-index: 1500;
}

.wdk-learning-header .btn.btn-secondary {
    color: var(--training-exec-header-btn-secondary-text-color);
    background-color: var(--training-exec-header-btn-secondary-background-color);
}

.wdk-learning-header .btn.btn-secondary:hover {
    color: var(--training-exec-header-btn-secondary-text-color-hover) !important;
    background-color: var(--training-exec-header-btn-secondary-background-color-hover) !important;
}

.wdk-learning-header .btn.btn-secondary:focus,
.wdk-learning-header .btn.btn-secondary:active,
.wdk-learning-header .btn.btn-secondary:not(:disabled):not(.disabled):active {
    color: var(--training-exec-header-btn-secondary-text-color-active) !important;
    background-color: var(--training-exec-header-btn-secondary-background-color-active) !important;
}

.wdk-learning-header .btn.btn-light {
    color: var(--training-exec-header-btn-light-text-color);
    background-color: var(--training-exec-header-btn-light-background-color);
}

.wdk-learning-header .btn.btn-light:hover {
    color: var(--training-exec-header-btn-light-text-color-hover);
    background-color: var(--training-exec-header-btn-light-background-color-hover);
}

.wdk-learning-header .btn.btn-light:focus,
.wdk-learning-header .btn.btn-light:active,
.wdk-learning-header .btn.btn-light:not(:disabled):not(.disabled):active {
    color: var(--training-exec-header-btn-light-text-color-active) !important;
    background-color: var(--training-exec-header-btn-light-background-color-active) !important;
}

body.alert-show.alert-top .wdk-learning-header  {
    top: 62px;
}

/* Layout Appearance */
.wdk-layout-appearance .wdk-layout-content {
    padding: 58px 0 0 0 !important;
    background-color: white !important;
}

/* Mobile */
@media (max-width: 576px) {
    .wdk-learning-header img {
        height: 22px;
    }

    .wdk-learning-header .btn.btn-light,
    .wdk-learning-header .btn.btn-secondary,
    .wdk-learning-header .btn.btn-primary {
        padding: 8px 10px;
    }

    .wdk-layout-learning .wdk-footer-fixed {
        left: 0;
        width: 100%;
    }
}

@media (max-width: 380px) {
    .wdk-learning-header img {
        display: none;
    }
}

@media (max-width: 992px) {
    .wdk-layout-learning .wdk-footer-fixed {
        justify-content: space-between;
        padding-left: 16px;
    }
}

/* fixe trainning inside regular layout */
@media (min-width: 992px) {

    /* 1025 Mobile update  */
    .wdk-layout .wdk-layout-main .wdk-layout-content {
        overflow: hidden;
        padding-top: 94px;
    }

    body.alert-top .wdk-layout .wdk-layout-main .wdk-layout-content {
        padding-top: 156px;
    }

    body.alert-bottom .wdk-layout .wdk-layout-main .wdk-layout-content {
        padding-bottom: 94px;
    }
}

/* Layout Survey */
.wdk-layout .wdk-layout-main .wdk-layout-content .wdk-layout-survey {
    padding: 16px 0 0 0;
    height: 100%;
}

.wdk-layout-survey {
    height: calc(100vh - 58px);
    padding: 16px 16px 70px 16px;
}

@media (max-width: 576px) {
    .wdk-layout-survey {
        overflow: auto;
    }

    .wdk-layout .wdk-layout-main .wdk-layout-content .wdk-layout-survey {
        padding: 16px 16px 0 16px;
        margin: 0 -16px 0 -16px;
    }
}

.wdk-layout-mini .wdk-layout-content .wdk-layout-survey {
    padding: 16px 16px 16px 16px;
    margin: -16px -16px 0 -16px;
    overflow: auto;
    height: auto;
}

.wdk-layout-chart .bootstrap-datetimepicker-widget.dropdown-menu {
    top: 0 !important;
    left: 0 !important;
    position: fixed;
    width: calc(100% + 6px) !important;
    height: calc(100% + 6px);
    margin: -3px;
}

.wdk-layout-chart .dropdown-menu .bs-searchbox,
.wdk-layout-chart .dropdown-menu .bs-actionsbox {
    display: none;
}

.wdk-layout-chart .dropdown.bootstrap-select .dropdown-menu {
    max-height: 124px !important;
    padding: 0 !important;
}

.wdk-layout-content {
    overflow: hidden auto;
}

.wdk-monitor-list {
    padding-right: 10px;
}

.wdk-monitor-list > .wdk-featured-card:hover,
.wdk-monitor-feedback > .wdk-featured-card:hover {
    cursor: pointer;
    background-color: var(--grey-01);
}

.wdk-monitor-list > .wdk-featured-card:not(:last-child) {
    margin-bottom: 16px;
}

.wdk-sidebar-monitoring .wdk-featured-card:not(:last-child) {
    margin-bottom: 16px;
}
@media(max-width: 992px) {
    .wdk-sidebar-monitoring .wdk-featured-card:not(:last-child) {
        margin-bottom: 12px;
    }
}

@media(min-width: 992px) {
    .wdk-monitor-list {
        height: calc(100vh - 230px);
        overflow: auto;
        scrollbar-width: thin !important;
    }

        .wdk-monitor-list::-webkit-scrollbar-track {
            background-color: var(--white-02) !important;
            -webkit-box-shadow: inset 0 0 6px var(--white-02) !important;
            box-shadow: inset 0 0 6px var(--white-02) !important;
        }

        .wdk-monitor-list::-webkit-scrollbar {
            background-color: var(--white-02) !important;
            width: 5px !important;
            height: 5px;
        }

        .wdk-monitor-list::-webkit-scrollbar-thumb {
            background-color: var(--scroll-thumb-light-custom-color) !important;
            border-radius: 10px;
        }

    .wdk-header-mobile {
        flex-wrap: nowrap !important;
    }
}