/*
 * Copyright(c) 2021. KONNEK.
 * All Rights Reserved Unauthorized copying of this file, via any medium
 * is strictly prohibited Proprietary and confidential.
 */

/***** Top content *****/
/* Only used on index page */

.inner-bg {
    padding: 100px 0 170px 0;
}

.top-content .text {
    color: #fff;
}

.top-content .text h1 {
    color: #fff;
}

.top-content .description {
    margin: 20px 0 10px 0;
}

.top-content .description p {
    opacity: 0.8;
}

/* currently no links on index page so a element is not used */
.top-content .description a {
    color: #fff;
}

.top-content .description a:hover,
.top-content .description a:focus {
    border-bottom: 1px dotted #fff;
}

.form-box {
    margin-top: 35px;
}

.form-top {
    padding: 0px 25px 25px 35px;
    border-bottom: 2px solid #477eb8;
    background: rgba(134, 130, 130, 0.1);
    -moz-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    text-align: center;
}

.form-top-menu {
    padding: 0 25px 25px 25px;
    background: #477eb8;
    border-bottom: 2px solid #d6e2e8;
    color: white;
    background: rgba(71, 126, 184, 0.0);
    margin-bottom: 3px;
    -moz-border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
    text-align: center;
}

.form-top-img {
    width: 100%;
    padding-top: 25px;
}

.form-top-img img {
    max-width: 100%;
}

.form-middle {
    padding: 25px;
    background: #444;
    background: rgba(134, 130, 130, 0.30);
    /*background: rgba(247, 250, 255, 1.0);*/
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    text-align: left;
}

.form-middle-menu {
    padding: 25px 25px 30px 25px;
    background: #477eb8;
    margin-top: -5px;
    border-top: 2px solid #d6e2e8;
    background: rgba(71, 126, 184, 0.50);
    -moz-border-radius: 0 0 8px 8px;
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
    text-align: left;
}

.form-middle form textarea {
    height: 100px;
}

.form-middle form button.btn {
    width: 100%;
}

.form-middle form .input-error {
    border-color: #de615e;
}

.form-middle form .form-group input[type="text"],
.form-middle form .form-group input[type="password"],
.form-middle form .form-group input[type="email"],
.form-middle form .form-group input[type="tel"] {
    height: 36px;
    margin-top: 0px;
    margin-right: 3px;
    padding: 0 6px;
    width: 100%;
    vertical-align: middle;
    background: #fff;
    border: 1px solid #d6e2e8;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 36px;
    color: #6b7a86;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}

.form-middle form .form-group select.form-combo {
    height: 32px;
    font-size: 16px;
    vertical-align: middle;
    background: #fff;
    border: 1px solid #d6e2e8;
    width: 100%;
    color: #6b7a86;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}

.logindiv .form-middle button.btn-default {
    background: #477eb8;
}

.form-bottom {
    border-top: 2px solid #477eb8;
    background: rgba(134, 130, 130, 0.1);
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    text-align: center;
    padding: 5px 0;
}

.logindiv {
    width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mainmenudiv {
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mainmenudiv .panel {
    background: transparent;
    margin: 0;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

.mainmenudiv .panel-default {
    border-style: none;
}

.mainmenudiv .panel-title {
    background: rgba(71, 126, 184, 0.50);
    color: #ffffff;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    margin-bottom: 3px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 20px;
    font-weight: 700;
    line-height: inherit;
    padding: 19px 0 15px 0;
    border-bottom: 2px solid #d6e2e8;
}

.mainmenudiv .panel-body {
    margin-bottom: 3px;
    padding: 0;
}

.mainmenudiv .panel-footer {
    background: rgba(71, 126, 184, 0.50);
    color: white;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    border-top: 2px solid #d6e2e8;
    padding: 10px 25px 25px;
}

.mainmenudiv .btn {
    position: relative;
    border: none;
    padding: 10px;
    height: auto;
    border-radius: 3px;
    box-shadow: none;
    margin: 3px 0;
    cursor: pointer;
    width: 100%;
    display: inline-block;
    outline: none;
}

.mainmenudiv .btn-default {
    background: #477eb8;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    vertical-align: middle;
    font-size: 14px;
    line-height: inherit;
    text-align: center;
}

.mainmenudiv .btn-default:hover {
    background: #5ba1eb;
}

.mainmenudiv .btn-default:active {
    background: #477eb8;
    top: 2px;
}

.bmenuback {
    background: rgba(0, 0, 0, 0.80);
    width: 270px;
}

.bmenuback button.btn {

    text-align: left;
    background: #477eb8;
    color: white;
    width: 100%;
    border-width: 0px;
    margin: 2px 0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.topbmenu {
    width: 100%;
    color: red;
    height: 100px;
    position: relative;
}

.topbmenu img {
    position: absolute;
}

.bmenulogo {
    left: 0;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
}

.bmenux {
    right: 0;
    padding-right: 15px;
    padding-top: 10px;
}

.mainback {
    line-height: 24px;
    min-height: 100%;
}

.thecontent {
    padding: 15px;
}

.thecontent > .container-fluid {
    padding: 0;
}

.kon-iframe-container {
    position: relative;
    padding-bottom: calc(100vh - 80px);
    padding-top: 0;
    width: 100vw;
    overflow: hidden;
}

.kon-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

footer.kon-mainframe-footer {
    border-top: 1px solid #d5d7dc;
    height: 28px;
    line-height: 24px;
    color: #4a7fb6;
    text-align: center;
    vertical-align: middle;
    z-index: 98;
}

.panel.kon-panel-grid {
    min-height: calc(100vh - 30px);
    position: relative;
    padding-bottom: 46px; /* for the panel footer */
    margin: 0;
}

.kon-portal .panel.kon-panel-grid {
    min-height: calc(100vh - 110px);
}

.kon-panel-grid .panel-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
    margin-bottom: 0;
}

.bootgrid-footer {
    margin: 15px 0 0;
}

.kon-logo {
    width: 100%;
    overflow-x: hidden;
}

.kon-logo img {
    display: block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    object-fit: contain;
}

.kon-logo-container {
    display: flex;
    flex-direction: row;
    /* margin: 10px 0 10px 0; */
    height: 100%;
}

.kon-logo-img {
    display: flex;
    flex: 1 1 auto;
}

.kon-logo-img img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

.kon-logo-btn {
    display: flex;
    flex-direction: column-reverse;
}

.kon-logo-btn > .btn {
    margin-top: 5px;
    margin-left: 5px;
}

.kon-buttonbar-bottom {
    margin: 15px auto 10px;
    text-align: center;
}

.kon-buttonbar-bottom button {
    margin-bottom: 0;
}

fieldset .kon-buttonbar-bottom {
    margin-bottom: 15px;
}

.kon-btn-right {
    float: right;
}

.kon-buttonbar-bottom .kon-btn-right {
    float: right;
}

.panel-footer .kon-buttonbar-bottom {
    margin-top: 0;
}

.kon-buttonbar-top {
    margin: 0 auto 10px;
    text-align: center;
    height: 36px;
    position: relative;
}

.kon-buttonbar-middle {
    margin: 5px auto 10px;
    text-align: center;
}

.kon-remove-margin-bottom {
    margin-bottom: 0;
}

.kon-left {
    left: 0;
    bottom: 0;
}

.kon-right {
    right: 0;
    bottom: 0;
}

.kon-buttonbar-top .kon-left,
.kon-buttonbar-top .kon-right {
    position: absolute;
}

.kon-label {
    color: #4a7fb6;
    font-size: 13px;
    font-weight: 300;
    line-height: normal;
    margin: 0.25em 0 0.1em;
}

@media all and (min-width: 1024px) {
    .kon-label {
        font-size: 13px;
        font-weight: normal;
    }

}

.kon-value {
    font-weight: bold;
    line-height: 1.05em;
    min-height: 1.75em;
    margin: 0.4em 0 0.7em;
}

label.kon-value {
    margin: 0 0 0.1em;
}

div.kon-value {
    margin: 0;
    padding: 8px 0;
    line-height: 14px;
    min-height: 30px;
}

div.kon-textarea-value {
    margin: 0;
    font-weight: bold;
    white-space: pre-wrap;
    line-height: normal
}

@media all and (max-width: 500px) {

    .mainback {
        line-height: 15px;
    }

    div.kon-value {
        padding: 9px 0;
        line-height: 12px;
    }

    .kon-value {
        line-height: 1em;
        margin: 0 0 0.2em;
        min-height: 1em;
    }

    .kon-label {
        font-size: 12px;
    }
}

div.kon-label-title {
    text-align: center;
    vertical-align: middle;
    font-weight: normal;
    font-size: 18px;
    color: black;
    border-bottom: 1px solid;
    border-color: #477eb8;
    margin: 5px 0 5px;
    height: 26px;
}

input[type=text].kon-input-text {
    font-weight: inherit;
    margin: 0 0 0.4em;
    width: 100%;
}

.ui-dialog-content input.kon-input-text {
    margin: 0;
}

.ui-dialog-content input.kon-input-text:read-only {
    border-color: transparent;
}

.ui-dialog-content .kon-label {
    margin: 0.3em 0 0;
}

input[type=checkbox].kon-checkbox {
    display: block;
    height: 30px;
    width: 30px;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: rgba(71, 126, 184, 0.3);
    border: 2px solid transparent;
    -webkit-box-shadow: 0 1px 3px 0 rgba(2, 2, 2, 0.3);
    -moz-box-shadow: 0 1px 3px 0 rgba(2, 2, 2, 0.3);
    box-shadow: 0 1px 3px 0 rgba(2, 2, 2, 0.3);
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    transition: all .3s;
    border-radius: 4px;
    padding: 3px 8px;
}

input[type=checkbox].kon-checkbox:hover {
    opacity: 0.5;
    border-color: #adadad;
}

input[type=checkbox].kon-checkbox::before {
    content: "";
    width: 0;
    height: 0;
}

input[type=checkbox].kon-checkbox::before {
    display: block;
}

input[type=checkbox].kon-checkbox:not(:disabled):focus {
    outline: 0;
    border: 2px solid #4a7fb6;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

input[type=checkbox].kon-checkbox:checked::before {
    width: 10px;
    height: 16px;
    border: solid black;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

input[type=radio].kon-input-radio {
    font-weight: inherit;
    margin: 0 0 0.40em;
}

input[type="text"].kon-datepicker:read-only {
    padding: 0 6px;
    outline: 0;
    background: #fff;
    border: 1px solid #d6e2e8;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

select.kon-select {
    font-size: 15px;
    font-weight: bold;
    width: 100%;
}

.kon-select option {
    font-weight: inherit;
}

textarea.kon-textarea {
    font-weight: inherit;
    margin: 0 0 0.40em;
    width: 100%;
}

textarea.kon-textarea-two-row {
    position: relative;
    font-weight: inherit;
    height: 81px;
    width: 100%;
}

.btn.kon-btn-contact {
    text-align: left;
    height: auto;
    padding: 4px 20px;
    font-size: 14px;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    width: 100%;
    line-height: 1em;
    margin: 4px 0;
    -webkit-box-shadow: 0 1px 3px 0 rgba(2, 2, 2, 0.3);
    -moz-box-shadow: 0 1px 3px 0 rgba(2, 2, 2, 0.3);
    box-shadow: 0 1px 3px 0 rgba(2, 2, 2, 0.3);
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.btn.kon-btn-attach {
    text-align: left;
    height: auto;
    padding: 4px 20px;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    width: 100%;
    line-height: 1em;
    margin: 4px 0;
    -webkit-box-shadow: 0 1px 3px 0 rgba(2, 2, 2, 0.3);
    -moz-box-shadow: 0 1px 3px 0 rgba(2, 2, 2, 0.3);
    box-shadow: 0 1px 3px 0 rgba(2, 2, 2, 0.3);
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.btn.kon-btn-title {
    background: rgba(71, 126, 184, 0.3);
    border-color: transparent;
    width: 100%;
    height: auto;
    padding: 3px 10px;
    margin: 4px 0;
    color: white;
    font-size: 16px;
    line-height: 1em;
    text-align: center;
}

.select-cell {
    display: none;
}

tr.active {
    color: blue;
}

.grid-embalage,
.grid-prix-bottin,
.grid-prix-promo,
.grid-total,
.grid-codeupc,
.grid-vendu-par {
    width: 0;
    height: 0;
    display: none;
}

@media (min-width: 1024px) {
    .grid-embalage,
    .grid-prix-bottin,
    .grid-prix-promo,
    .grid-total,
    .grid-codeupc,
    .grid-vendu-par {
        height: auto;
        display: table-cell;
    }

    .grid-prix-bottin,
    .grid-prix-promo {
        width: 70px;
    }

    .grid-embalage {
        width: 59px;
    }

    .grid-total {
        width: 75px;
    }

    .grid-codeupc {
        width: 125px;
    }

    .grid-vendu-par {
        width: 60px;
    }
}

button.btn-grid {
    height: 25px;
    width: 42px;
    margin: 0px 2px 0px 2px;
    padding: 0 16px;
    /* background: #6b7a86; */
    background: #477eb8;
    border: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 17px;
    text-align: center;
    white-space: normal;
    color: #fff;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    text-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}

div.minus-num-plus {
    display: inline-flex;
    min-width: 132px;
}

input.quantity-update {
    height: 25px;
    width: 41px;
    text-align: center;
}

input.quantity-inventory {
    height: 25px;
    width: 41px;
    text-align: center;
}

button.btn-produit {
    height: 25px;
    width: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0 2px;
    /* background: #6b7a86; */
    background: #477eb8;
    border: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 200;
    line-height: 17px;
    text-align: center;
    white-space: normal;
    color: #fff;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    text-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}

/* Metric related css */

.kon-metric-columns {
    float: left;
    width: 14.285%;
    padding: 8px;
}

/* Style the list */
.kon-metric-list {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

/* Add shadows on hover */
.kon-metric-list:hover {
    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2)
}

/* Pricing header */
.kon-metric-list .kon-metric-header {
    background-color: rgba(71, 126, 184, 0.3);
    color: black;
    font-size: 21px;
    font-weight: bold;
}

/* List items */
.kon-metric-list li {
    font-weight: normal;
    line-height: 1.4em;
    border-bottom: 1px solid #eee;
    padding: 8px;
    text-align: center;
}

.kon-metric-list li b {
    color: #262626;
}

/* Grey list item */
.kon-metric-list .kon-metric-grey {
    background-color: #eee;
    font-size: 20px;
}

/* Change the width of the three columns to 100%
(to stack horizontally on small screens) */
@media only screen and (max-width: 600px) {
    .kon-metric-columns {
        width: 100%;
    }
}

/****** image modal ****************/
/*#imgEquipment {*/
/*border-radius: 5px;*/
/*cursor: pointer;*/
/*transition: 0.3s;*/
/*}*/

/*#imgEquipment:hover {*/
/*opacity: 0.7;*/
/*}*/

/* The Modal (background) */
.kon-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 200; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.kon-modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#kon-caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
.kon-modal-content, #kon-caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}

/* The Close Button */
.kon-modal-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.kon-modal-close:hover,
.kon-modal-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
    .kon-modal-content {
        width: 100%;
    }
}

/* Sliders */
.kon-switch {
    position: relative;
    display: block;
    width: 52px;
    height: 30px;
}

.kon-switch input {
    display: none;
}

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

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

input:checked + .kon-slider {
    background-color: #59c340;
}

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

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

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

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

/* Input with button */
.kon-input-with-btn, .kon-input-readonly-with-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.kon-input-with-btn input,
.kon-input-readonly-with-btn input {
    width: inherit;
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.kon-input-with-btn button,
.kon-input-readonly-with-btn button {
    flex: 0 0 0;
    height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: none;
    font-size: 14px;
}

.kon-input-with-btn button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* New Input with button */
.kon-new-input-with-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border: 1px solid #d6e2e8;
    border-radius: 4px;
}

.kon-new-input-with-btn input {
    width: inherit;
    flex: 1;
    border: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.kon-new-input-with-btn input:read-only {
    padding: 0 6px;
    background-color: #d8d8d8;
}

.kon-new-input-with-btn button {
    flex: 0 0 0;
    height: 24px;
    margin-top: 3px;
    margin-bottom: 3px;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: none;
    font-size: 14px;
}

/* End new input with button */

.kon-value-with-btn {
    display: flex;
    justify-content: space-between;
}

.kon-btn-container button.btn {
    flex: 0 0 0;
    height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: none;
    font-size: 14px;
}

.kon-btn-container button.btn {
    flex: 0 0 0;
    height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: none;
    font-size: 14px;
}

/* ellipsis */
.kon-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-condensed > tbody > tr > td.kon-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* konnek image styling */
.kon-image-box {
    width: 100%;
    /* height: calc(100% - 20px); // height is situational */
    border: 1px solid rgb(123, 136, 148);
    padding: 1px;
}

.kon-image-box > img {
    display: block;
    max-height: 100%;
    max-width: 100%;
    margin: auto;
}

/* container inside a panel-body that is full height */

.panel-body div.kon-full-container {
    height: 100%;
    position: relative;
}

/*.kon-full-container .kon-buttonbar-bottom {*/
/*position: absolute;*/
/*bottom: 0;*/
/*left: 0;*/
/*right: 0;*/
/*margin-bottom: 0;*/
/*}*/

.kon-full-container .kon-row-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.kon-row-bottom .kon-buttonbar-bottom {
    margin-bottom: 0;
}

/* general full height tag */
.kon-full-height {
    height: 100%;
}

/**** Topnav css ****/
/* Add a black background color to the top navigation */
.kon-topnav {
    background-color: #fff;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.kon-topnav a.kon-topnav-item {
    float: left;
    display: block;
    color: #477eb8;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* logos */
.kon-topnav .kon-topnav-logo {
    float: left;
}

.kon-topnav .kon-topnav-logo a {
    display: block;
    padding: 0;
}

.kon-topnav .kon-topnav-logo img {
    display: block;
    height: 42px;
    margin: 5px;
}

.kon-topnav div.kon-headerinfo {
    position: absolute;
    right: 0;
    top: 0;
    white-space: nowrap;
    text-align: right;
    font-size: 13px;
    line-height: 14px;
    margin: 5px;
}

/* Change the color of links on hover */
.kon-topnav a.kon-topnav-item:hover {
    background-color: #555;
    color: #477eb8;
}

/* Add an active class to highlight the current page */
.kon-topnav a.kon-topnav-item.active {
    background-color: #4CAF50;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.kon-topnav .kon-icon {
    float: left;
    color: #477eb8;
    text-align: center;
    padding: 12px 12px;
    text-decoration: none;
    font-size: 23px;
    line-height: 23px;
    display: none;
}

/* Dropdown container - needed to position the dropdown content */
.kon-dropdown {
    float: left;
    overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.kon-dropdown .kon-dropbtn {
    font-size: 17px;
    border: none;
    outline: none;
    color: #477eb8;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

/* Style the dropdown content (hidden by default) */
.kon-dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    z-index: 2;
}

/* Style the links inside the dropdown */
.kon-dropdown-content a.kon-topnav-item {
    float: none;
    color: #477eb8;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.kon-topnav a.kon-topnav-item:hover, .kon-dropdown:hover .kon-dropbtn {
    background-color: #555;
    color: #477eb8;
}

/* Add a grey background to dropdown links on hover */
.kon-dropdown-content a.kon-topnav-item:hover {
    background-color: #555;
    color: #477eb8;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.kon-dropdown:hover .kon-dropdown-content {
    display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 1200px) {
    .kon-topnav a.kon-topnav-item,
    .kon-dropdown .kon-dropbtn {
        display: none;
    }

    .kon-topnav div.kon-headerinfo {
        right: 49px;
    }

    .kon-topnav a.kon-icon {
        float: right;
        display: block;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1200px) {
    .kon-topnav.responsive {
        position: relative;
        overflow: visible;
    }

    .kon-topnav.responsive a.kon-icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .kon-topnav.responsive img {
        float: none;
    }

    .kon-topnav.responsive a.kon-topnav-item {
        float: none;
        display: block;
        text-align: left;
    }

    .kon-topnav.responsive .kon-dropdown {
        float: none;
    }

    .kon-topnav.responsive .kon-dropdown-content {
        position: relative;
    }

    .kon-topnav.responsive .kon-dropdown-content a {
        padding: 12px 16px 12px 32px;
    }

    .kon-topnav.responsive .kon-dropdown .kon-dropbtn {
        display: block;
        width: 100%;
        text-align: left;
    }

    .kon-topnav.responsive .kon-topnav-content {
        display: block;
        position: absolute;
        right: 0;
        background-color: #fff;
        min-width: 200px;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        z-index: 1;
    }
}

/* making the independent portal pages work with the new header structure */
body.kon-portal {
    overflow: hidden;
}

.kon-portal div.mainback {
    height: calc(100vh - 52px);
    overflow: auto;
}

.kon-portal div.thecontent {
    min-height: calc(100vh - 80px);
}

@media screen and (max-width: 450px) {

    .kon-copyright-word {
        display: none;
    }
}

/* Group box styles - specific */
.kon-legend {
    color: #477eb8;
    font-size: 13px;
    font-weight: 300;
    line-height: normal;
}

/* login dialog - Jquery-ui Dialog classes - specific */
.kon-login-dlg .ui-dialog-titlebar {
    display: none;
}

.kon-login-dlg .ui-dialog-buttonpane {
    display: none;
}

.kon-login-dlg .ui-dialog-content {
    padding: 0;
}

.kon-login-dlg.ui-dialog {
    padding: 0;
}

.kon-login-dlg .form-top {
    background: initial;
}

.kon-login-dlg .form-bottom {
    background: initial;
}

.kon-login-dlg .kon-buttonbar-login {
    display: flex;
    flex-direction: row;
}

.kon-login-dlg .kon-buttonbar-login > button:not(:first-child) {
    margin-left: 15px;
}

.kon-login-dlg ~ .ui-widget-overlay {
    background: #777;
    opacity: .7;
}

/* login dialog - Jquery-ui Dialog classes - specific */
.kon-request-dlg .ui-dialog-titlebar {
    display: none;
}

.kon-request-dlg .ui-dialog-buttonpane {
    display: none;
}

.kon-request-dlg .ui-dialog-content {
    padding: 0;
}

.kon-request-dlg.ui-dialog {
    padding: 0;
}

.kon-request-dlg .form-top {
    background: initial;
}

.kon-request-dlg .form-bottom {
    background: initial;
}

.kon-request-dlg .kon-buttonbar-login {
    display: flex;
    flex-direction: row;
}

.kon-request-dlg .kon-buttonbar-login > button:not(:first-child) {
    margin-left: 15px;
}

.kon-request-dlg ~ .ui-widget-overlay {
    background: #777;
    opacity: .7;
}

.kon-request-dlg .form-top {
    padding: 0 35px 5px 35px;
}

.kon-request-dlg .form-middle {
    padding-top: 15px;
    padding-bottom: 15px;
}

.kon-request-dlg .form-top-img {
    padding-top: 5px;
}

.kon-request-dlg .form-top > div:not(:first-child) {
    margin-top: 5px;
    font-size: 18px;
}

/* Proper grid container structures */

.kon-grid-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.kon-grid-container > div.kon-grid-row {
    flex: 1;
    /*overflow-y: auto;*/
}

fieldset > .kon-grid-container > div.kon-grid-row {
    margin-right: calc(-0.75em - 15px);
    margin-left: calc(-0.75em - 15px);
}

.kon-grid-container > div.kon-filter-row {
    margin-bottom: 15px;
}

.kon-grid-row > div[class^="col-"] > div.bootgrid-header {
    margin-top: 0;
}

.kon-grid-row:first-child > div[class^="col-"] > div.bootgrid-header {
    margin-top: 10px;
}

.kon-grid-row > div[class^="col-"] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.kon-grid-row > div[class^="col-"] > .kon-grid-scrollable {
    height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
}

.kon-grid-scrollable thead th {
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    top: 0;
}