:root {
    --primary: #21B13A;
    --hover: #198A2C;
    --primary-dark: #0B3D14;
    --dark: #010802;
    --border-light: #8CC3A9;
    --background: #198754;
    --custom-green: #21B13A;
    --card-green: #3fdf5b;
    --card-yellow: #e0a538;
    --dropdown-bg: #cbcbcb;
}

@media (min-width:768px) {
    .w-sm-auto {
        width: auto !important;
    }

    .w-md-max-content {
        width: max-content !important;
    }
}

@media (max-width: 465px) {
    .text-sm-display-none .k-button-text {
        display: none !important;
    }
}

.title-overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-overflow {
    max-height: 60vh;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 5px;
}

.dropdown-menu {
    background-color: var(--dropdown-bg) !important;
}
/*
    Status + color
*/
.k-button-flat-primary {
    color: var(--primary) !important;
}

.k-switch-on .k-switch-track {
    border-color: var(--primary) !important;
    background-color: var(--primary) !important;
}

.k-input-solid:focus-within {
    box-shadow: 0 0 0 0.25rem rgba(33,177, 58, 0.5) !important;
}

.loading-progress circle:last-child {
    stroke: var(--primary) !important;
}

.k-treeview-leaf.k-selected {
    background: var(--background) !important;
}

.k-grid .k-table-th.k-selected, .k-grid td.k-selected, .k-grid .k-table-td.k-selected,
.k-grid .k-table-row.k-selected > td, .k-grid .k-table-row.k-selected > .k-table-td {
    background-color: rgba(33,177, 58, 0.25) !important;
}

.bg-primary-green {
    background-color: var(--primary) !important;
    border: 1px solid var(--primary);
    color: white;
}

.k-button-solid-primary:hover, .k-button-solid-primary.k-hover {
    background-color: var(--hover) !important;
    border-color: var(--hover) !important;
}

.k-button-solid-primary {
    background-color: var(--custom-green) !important;
    border-color: var(--hover) !important;
}

.status-icon {
    width: 20px;
    height: 20px;
    background-position: center;
    background-size: contain;
    margin: 0px 5px;
}

.icon-green {
    background-image: url('../statusIcons/ComOK.png');
}

.icon-red {
    background-image: url('../statusIcons/ComError.png');
}

.icon-wrong {
    background-image: url('../statusIcons/WrongSettings.png');
}

.icon-v-source {
    background-image: url('../statusIcons/VirtualSource.png');
}

.icon-alarm {
    background-image: url('../statusIcons/ActiveAlarm.png');
}

.icon-disabled {
    background-image: url('../statusIcons/Disabled.png');
}

.icon-extension {
    background-image: url('../statusIcons/Extension.png');
}

/*
    Background color
*/
.col-card-250.bg-green {
    background: var(--card-green);
}

.col-card-250.bg-yellow {
    background: var(--card-yellow);
}

.bg-gray {
    background: gray;
    color: white;
}

    .bg-gray:hover {
        background: #3e3e3e;
    }
.bg-darkgray {
    background: #3e3e3e;
}
.bg-green-no-hover {
    background: var(--primary);
    color: white;
}

.bg-green {
    background: var(--primary);
    color: white;
}

    .bg-green:hover {
        background: darkgreen;
    }

.bg-red {
    background: #900000;
    color: white;
}

    .bg-red:hover {
        background: #600000;
    }

.bg-blue {
    background: blue;
    color: white;
}

    .bg-blue:hover {
        background: darkblue;
    }

.bg-yellow {
    background: orange;
    color: white;
}

    .bg-yellow:hover {
        background: darkorange;
    }

.text-warning {
    color: #E7AE03 !important;
}
/*.green-light-border-button-important {
    -webkit-box-shadow: 0px 0px 0px 4px var(--border-light) !important;
    -moz-box-shadow: 0px 0px 0px 4px var(--border-light) !important;
    box-shadow: 0px 0px 0px 4px var(--border-light) !important;
}
.green-light-border-button {
    -webkit-box-shadow: 0px 0px 0px 4px var(--border-light);
    -moz-box-shadow: 0px 0px 0px 4px var(--border-light);
    box-shadow: 0px 0px 0px 4px var(--border-light);
}*/
.green-light-border-bg {
    /*   -webkit-box-shadow: 0px 0px 0px 5px var(--border-light);
    -moz-box-shadow: 0px 0px 0px 5px var(--border-light);
    box-shadow: 0px 0px 0px 5px var(--border-light);*/
    border: 1px solid var(--primary);
}
/*
    Telerik Custom CSS
*/
/*
    Dropdown
*/
.k-picker-solid {
    border: 2px solid var(--primary) !important;
    background: white !important;
}

.k-list-item.k-selected, .k-selected.k-list-optionlabel {
    background-color: var(--hover) !important;
}

.i-to-black {
    border-radius: 5px;
    height: 45px;
    padding: 3px;
    /*filter: brightness(0.3);*/
}

/*
    Card
*/
.moana-group-card {
    overflow: hidden;
    .card-header

{
    align-items: center;
}

}

.col-card-250 > .card-body > .tooltip-target > .card-text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 200px;
}

.moana-group-card > .card-body {
    border-radius: 0px 0px 5px 5px;
    background: white;
    color: black;
}

.moana-card {
    /*overflow: hidden;*/
}

/*
    Swiper
*/

@media(max-width: 640px) {
    swiper-container {
        width: 100%;
        height: 100%;
    }

    swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .col-card-250 {
        width: 100%;
        height: 88px;
    }
}

@media(min-width:640px) {
    .swiper-responsive {
        width: 90vw !important;
        /*flex-wrap*/
        flex-wrap: nowrap !important;
        /*row*/
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 0;
        display: flex;
        flex-wrap: wrap;
        margin-top: calc(-1* var(--bs-gutter-y));
        margin-right: calc(-.5* var(--bs-gutter-x));
        margin-left: calc(-.5* var(--bs-gutter-x));
    }

    swiper-slide {
        width: 380px;
        margin: 0 !important;
    }

    .col-card-250 {
        flex: 0 0 auto;
        width: 350px;
        height: 88px;
    }
}


/* 
    Popup
*/
.popup {
    width: 90vw;
}

@media(min-width:640px) {
    .popup {
        max-width: 800px;
    }
}

.k-floating-label-container {
    padding-top: 1.9rem !important;
}
/*
    Kebab menu
*/
.btn-kebab {
    color: white;
    border: unset !important;
    box-shadow: unset !important;
}

    .btn-kebab:hover {
        color: #111;
    }

/*
    Icon
*/
.custom-plus {
    padding: 0.75rem, 0.375rem;
    border: 1px solid white;
    border-radius: var(--bs-btn-border-radius);
    margin-right: 0.375rem;
}

.language-selector {
    padding: 5px 10px;
    font-size: 16px;
    width: 100%;
    min-width: 100px;
    max-width: 300px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23333" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
    background-size: 10px 10px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.3s;
}

.org-status {
    background: white;
    padding: 10px;
    border-radius: 15px;
    place-items: center;
}