html, body, form, .page-wrapper {
    height: 100%;
}

.main-container {
    height: calc(100% - 200px);
    padding-right: 0;
    padding-top: 15px;
    min-height: 540px;
}

.tdm_buttonctrl_btn_main {
    border: 1px solid #6C6F70;
    color: #6C6F70 !important;
    cursor: pointer;
    margin: 0;
    line-height: 2;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    zoom: 1;
    padding: 0 1em;
    text-decoration: none !important;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    background-color: #f3f3f3 !important;
    background-image: -webkit-linear-gradient(#f3f3f3,#e6e6e6) !important;
    background-image: -moz-linear-gradient(#f3f3f3,#e6e6e6) !important;
    background-image: linear-gradient(#f3f3f3,#e6e6e6) !important;
}

a.tdm_buttonctrl_btn_main, button.tdm_buttonctrl_btn_main {
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#d8f3f1', endColorstr='#9fe0dc');
    background-image: -webkit-linear-gradient(top,#d8f3f1,#9fe0dc) !important;
    background-image: -moz-linear-gradient(top,#d8f3f1,#9fe0dc) !important;
    background-image: -ms-linear-gradient(top,#d8f3f1,#9fe0dc) !important;
    background-image: linear-gradient(top,#d8f3f1,#9fe0dc) !important;
}




#page-numbers .current-page {
    font-weight: bold;
    border: 1px solid #00b2a9;
}

#page-numbers span {
    padding: 1px 4px;
}

.table-container .jsl-table-body {
    border-bottom: 1px solid rgb(206, 206, 206);
    max-height: 390px;
    width: calc(100% + 1px);
}

.KGD .jsl-table-head .jsl-table-cell {
    font-size: 0;
}

.KGD .jsl-table-head .jsl-table-cell-title {
    line-height: 0;
    /*color: #FFFFFF !important;*/
}

.KGD .jsl-table-head .jsl-icon-sort-down {
    bottom: unset;
}

.KGD .jsl-table-head .jsl-table-row {
    background-color: #EEEFF0;
}

.KGD .jsl-table-head {
    cursor: default;
}

.KGD .jsl-table-body .jsl-table-row {
    cursor: pointer;
}

.KGD.container-list {
    height: calc(100% - 126px);
    padding-right: 10px;
}

.KGD .table-container {
    width: calc(100% - 1px);
    max-height: 672px;
    height: 100%;
}

.table-data-container {
    height: 100%;
}

.KGD .jsl-table {
    height: 100%;
}

.table-container .jsl-table-body {
    max-height: unset;
    height: calc(100% - 42px);
}

.KGD .jsl-icon-sort::before,
.KGD .jsl-icon-sort-up::before,
.KGD .jsl-icon-sort-down::before {
    content: "";
}

.KGD .jsl-icon.jsl-icon-sort,
.KGD .jsl-icon.jsl-icon-sort-up,
.KGD .jsl-icon.jsl-icon-sort-down {
    background-color: red;
    position: relative;
    left: 7px;
    top: -7px;
    margin: 0;
    width: 0;
}

    .KGD .jsl-icon.jsl-icon-sort::after,
    .KGD .jsl-icon.jsl-icon-sort-up::after,
    .KGD .jsl-icon.jsl-icon-sort-down::after {
        content: " ";
        position: absolute;
        background: rgba(0, 0, 0, 0) url("/pub/images/icons.png?1") repeat scroll 0 0;
        background-position: 0 -244px;
        height: 16px;
        width: 9px;
    }

    .KGD .jsl-icon.jsl-icon-sort-up::after {
        background-position: 0 -228px;
    }

    .KGD .jsl-icon.jsl-icon-sort-down::after {
        background-position: 0 -212px;
    }

.design-details-h2 {
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 8px;
}

.view-style-container {
    float: right;
    margin-top: -25px;
}

    .view-style-container > #tdm_buttonctrl_edit {
        float: right;
        margin-right: 10px;
    }

    .view-style-container > #tdm_buttonctrl_delete {
        float: right;
        margin-right: 40px;
    }

    .view-style-container span {
        display: none;
        font-size: 18px;
        margin-top: 4px;
    }

    .view-style-container img, .view-style-container img.active {
        border: none !important;
        height: 25px;
        margin-right: 10px;
    }

    .view-style-container img, .view-style-container span {
        float: left;
        cursor: pointer;
    }

        .view-style-container img.view-style-designs {
            background-color: #009D80;
        }

    .view-style-container img {
        cursor: pointer;
    }

        .view-style-container img:hover {
            height: 23px;
            border: 1px solid #7C7C7C !important;
        }

.view-style-type {
    float: left;
}

.view-style-type span.style-list {
    width: 80px;
}

.view-style-type span.style-grid {
    width: 150px;
}

    .view-style-container span.view-style-item-return {
        width: 200px;
    }



.view-style-container span.active {
    display: block;
}

/*.container-list {
            float: left;
        }*/

.container-grid {
    height: calc(100% - 94px);
    overflow: hidden;
    display: none;
    margin-top: 12px;
    padding-right: 10px;
}

    .container-grid .container-grid-controls {
        /*border: 1px solid rgb(206, 206, 206);*/
        width: calc(100% - 14px);
        display: flex;
        justify-content: space-between;
        padding: 6px;
        vertical-align: baseline;
        max-height: 30px;
    }

    .container-grid .container-grid-items {
        height: calc(100% - 29px);
        overflow: hidden;
        width: calc(100% - 1px);
        border: 1px solid #ccc;
    }

        .container-grid .container-grid-items .grid-view-container {
            width: calc(100% / 4 - 2 * 10px);
            /*height: calc(100% / 2 - 2 * 10px);*/
            float: left;
            padding: 10px;
            position: relative;
            top: 0;
        }

            .container-grid .container-grid-items .grid-view-container .grid-view-content {
                padding: 10px 0;
                border: 1px solid #7c7c7c;
                border-radius: 10px;
                height: calc(100% - 2 * 10px);
                overflow: hidden;
            }

                .container-grid .container-grid-items .grid-view-container .grid-view-content .grid-view-container-title {
                    font-size: 14px;
                    font-weight: bold;
                    background-color: #EEEFF0;
                    margin-top: -10px;
                    text-align: center;
                    line-height: 30px;
                    cursor: pointer;
                }

                .container-grid .container-grid-items .grid-view-container .grid-view-content .grid-view-container-image {
                    width: 100%;
                    height: calc(100% - 35px);
                    cursor: pointer;
                }

                    .container-grid .container-grid-items .grid-view-container .grid-view-content .grid-view-container-image img {
                        padding: 10px 5px;
                        width: calc(100% - 10px);
                        max-height: calc(100% - 30px - 20px);
                    }

                    .container-grid .container-grid-items .grid-view-container .grid-view-content .grid-view-container-image .grid-view-container-description {
                        padding: 0 5px;
                    }

                .container-grid .container-grid-items .grid-view-container .grid-view-content .grid-view-container-likes {
                    padding: 4px;
                    border-top: 1px solid rgb(206, 206, 206);
                }

                    .container-grid .container-grid-items .grid-view-container .grid-view-content .grid-view-container-likes img {
                        height: 20px;
                        margin-top: -3px;
                        margin-left: 10px;
                        margin-right: 10px;
                    }

.design-details-container {
    width: calc(100% + 17px) !important;
    height: calc(100% - 45px) !important;
    margin-left: -16px;
}

.design-details-content {
    height: calc(100% - 7px);
}

    .design-details-content .design-details-left, .design-details-content .design-details-right {
        padding: 0;
        float: left;
        height: 100%;
    }

    .design-details-content .design-details-left {
        width: 200px;
        border-right: 1px solid #ccc;
        text-align: center;
    }

        .design-details-content .design-details-left > div:not(:last-child) {
            border-bottom: 1px solid #ccc;
        }

        .design-details-content .design-details-left > div {
            padding: 20px 0px;
        }

        .design-details-content .design-details-left .design-details-likes,
        .design-details-content .design-details-left .design-details-timestamps,
        .design-details-content .design-details-left .design-details-createdesign {
            height: 17%;
            display: flex;
        }

            .design-details-content .design-details-left .design-details-likes > div,
            .design-details-content .design-details-left .design-details-timestamps > div,
            .design-details-content .design-details-left .design-details-createdesign > div {
                margin: auto;
                display: grid;
            }

        .design-details-content .design-details-left .design-details-share {
            height: calc(100% - 3 * 17% - 2 * 6px);
            float: left;
            padding: 4px;
            width: calc(100% - 8px);
        }

            .design-details-content .design-details-left .design-details-share .icon-share {
                margin: 5px;
                width: 40px;
                cursor: pointer;
            }

    .design-details-content .design-details-right {
        width: calc(100% - 222px);
        height: 100%;
        padding-right: 0;
        padding-left: 20px;
        padding-top: 0;
        border-left: 1px solid #ccc;
        padding-bottom: 15px;
        border-bottom: 1px solid #ccc;
    }

        .design-details-content .design-details-right .design-details-data {
            overflow-y: auto;
            padding-top: 10px;
            height: calc(100% - 150px);
        }

            .design-details-content .design-details-right .design-details-data > div {
                padding-bottom: 15px;
                padding-right: 10px;
            }

                .design-details-content .design-details-right .design-details-data > div > div {
                    padding-left: 15px;
                    padding-right: 15px;
                }

        .design-details-content .design-details-right .design-details-schematic {
            max-height: 300px;
            height: 100%;
            padding-left: 10px;
        }

            .design-details-content .design-details-right .design-details-schematic img {
                height: 100%;
                cursor: pointer;
            }

.designgallery-statusbar {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    padding-left: 16px;
    margin-left: -16px;
}

.design-details-losses .table-dynamic {
    margin-top: 20px;
}

.design-details-attachments {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #ccc;
    height: 70px;
    margin-left: -20px;
    padding-left: 20px;
    width: 100%;
}

    .design-details-attachments .attachment-link {
        padding: 10px;
    }

.design-details-likes-button {
    cursor: pointer;
}

    .design-details-likes-button.disabled {
        cursor: default;
    }

    .design-details-likes-button img {
        width: 30px;
        margin: 5px;
    }

.ui-accordion {
    width: calc(100% - 10px);
}

    .ui-accordion .ui-accordion-header {
        padding: 5px;
        padding-left: 30px;
        border-radius: unset;
        margin-top: 15px;
    }

        .ui-accordion .ui-accordion-header.ui-state-active {
            background: #ddd url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
        }

.ui-state-active {
    color: #212121 !important;
    border: 1px solid #d5d5d5 !important;
}

.ui-accordion-content-active {
    height: 100% !important;
}

label.design-update-label {
    float: left;
    width: 150px;
}

input.design-update {
    width: calc(100% - 80px);
    max-width: 700px;
    margin-left: 25px;
    margin-top: 5px;
    margin-bottom: 15px;
}

.ui-dialog.ui-widget.ui-widget-content {
    min-width: 400px;
}

.table-dynamic {
    width: 100%;
    font-size: 11px;
}

    .table-dynamic .table-header {
        background-color: #eee;
    }

    .table-dynamic tbody td, .table-dynamic thead th {
        border: 1px solid #eee;
    }

/*a {
    color: #00b3a8 !important;
}*/

.piechart.js-losses-piechart {
    width: 95%;
    height: 250px;
}

    /*.piechart.js-losses-piechart .flot-base, .piechart.js-losses-piechart .flot-overlay {
        left: -44% !important;
    }*/

    .piechart.js-losses-piechart .legend {
        width: 100%;
        height: 100%;
    }

        /*.piechart.js-losses-piechart .legend div {
            display: none;
        }*/

        .piechart.js-losses-piechart .legend table {
            left: 260px;
            width: calc(100% - 260px);
            font-size: 11px;
        }

            .piechart.js-losses-piechart .legend table td {
                padding: 0 6px;
            }

.simulation-result-row {
    width: 100%;
    overflow: overlay;
    margin-top: 15px;
}

    .simulation-result-row p {
        text-align: center;
        font-weight: bold;
    }

    .simulation-result-row .simulation-result-item-row {
        width: 48%;
        float: left;
        border: 1px solid #ccc;
        margin: 5px;
    }

        .simulation-result-row .simulation-result-item-row img {
            width: 100%;
        }

.img-loader {
    text-align: center;
    margin: 75px;
}

    .img-loader img {
        width: 100px;
    }

    .img-loader.small img {
        width: 50px;
    }

.description-text-full {
    color: black;
    z-index: 9999;
    padding: 5px;
}


.jsl-table-cell-inner {
    padding: 0 8px;
}

/* styles unrelated to zoom */
* {
    /*border: 0;*/
    margin: 0;
    padding: 0;
}

/* these styles are for the demo, but are not required for the plugin */
/* these styles are for the demo, but are not required for the plugin */
.zoom {
    display: inline-block;
    position: relative;
}

    /* magnifying glass icon */
    .zoom:after {
        content: '';
        display: block;
        width: 33px;
        height: 33px;
        position: absolute;
        top: 0;
        right: 0;
        /* background: url(../pub/images/DesignGallery/icon.png);
                background: url(icon.png);*/
    }

    /*#ex1 img:hover {
            cursor: url(../pub/images/DesignGallery/grab.cur), default;
        }

        #ex1 img:active {
            cursor: url(../pub/images/DesignGallery/grabbed.cur), default;
        }*/

    .zoom img {
        display: block;
    }

        .zoom img::selection {
            background-color: transparent;
        }

.grid-view-container-image {
    height: 230px;
    overflow: scroll;
}

.design-details-content .design-details-left {
    border-right: none !important;
}

.jsl-table {
    max-height: 500px;
    overflow: auto;
}

.KGD container-list {
    height: auto !important;
}

.grid-view-container {
    height: 270px;
}

/*.main-container {
            overflow: hidden;
        }*/
.main-container {
    /*overflow: auto !important;*/
    height: auto !important;
    display: flow-root !important;
}


/*list view and grid view switcher*/

.switch {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 15px;
    float: left;
    margin-right: 10px;    
}

    .switch input {
        display: none;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #999;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 10px;
        width: 10px;
        left: 4px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #00B2A9;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(27px);
    -ms-transform: translateX(27px);
    transform: translateX(27px);
}

/*------ ADDED CSS ---------*/



/*--------- END --------*/

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }


.filter-input-section {
    display: inline-block;
    min-height: 80px;
    border: solid 1px #dcdcdc;
    border-radius: 0;
    padding: 0;
    vertical-align: top;
    margin: 8px;
    color: #6C6F70;
    font-family: sans-serif;
    font-size: 13px;
}