﻿/*CONTROLS - btn*/
.btn {
    cursor: pointer;
    position: relative; /*edit*/
    width: 100%; /*edit*/
    height: 10%; /*edit*/
    margin-bottom: 2%; /*edit*/
    background-color: transparent; /*edit*/
    border: 2px solid white;  /*edit*/
    color: white;  /*edit*/
    font-weight: bold;
}
    .btn:hover {
        opacity: 0.7;
    }
    .btn .text {
        position: absolute;
        top: 0%;
        left: 5%;
        height: 100%;
        width: 60%;
    }
        .btn .text .td {
            text-align: left;
        }
    .btn .slider {
        position: absolute;
        top: 0%;
        right: 20%;
        margin-right: 0.3vw;
        top: 0.2vw;
        bottom: 0.2vw;
        width: 20%;
        background-color: #ffffff;
        border: 2px solid #ffffff;
        border-radius: 1vw;
        transition: right linear 100ms;
    }
    .btn.active .slider {
        right: 0px;
    }
    .btn .switch {
        position: absolute;
        top: 0%;
        right: 0.3vw;
        top: 0.2vw;
        bottom: 0.2vw;
        width: 40%;
        background-color: transparent;
        border: 2px solid #ffffff;
        border-radius: 1vw;
        font-size: 90%;
    }
        .btn .switch .td {
            padding-left: 10%;
            padding-right: 10%;
        }
            .btn .switch .td._left {
                text-align: left;
                color: #f44e1a;
                transition: color linear 100ms;
            }
            .btn .switch .td._right {
                text-align: right;
                color: #ffffff;
                transition: color linear 100ms;
            }
    .btn.active .switch ._left {
        color: #ffffff;
    }
    .btn.active .switch ._right {
        color: #f44e1a;
    }
    .btn .table {
        width: 100%;
        height: 100%;
    }
    .btn .td {
        vertical-align: middle;
    }


/*CONTROLS - btn-2*/
.btn-2 {
    cursor: default;
    position: relative; /*edit*/
    width: 100%; /*edit*/
    height: 10%; /*edit*/
    margin-bottom: 0%; /*edit*/
    background-color: #E8E8E8; /*edit*/
    border: none;  /*edit*/
    color: black;  /*edit*/
    font-weight: bold;
}
    .btn-2 .opt {
        position: absolute;
        top: 0%;
        width: 50%;
        height: 100%;
    }
        .btn-2 .opt:hover {
        }
        .btn-2 .opt.active {
            background-color: #7F7F7F;
            color: white;
        }
        .btn-2 .opt.opt-1 {
            left: 0%;
        }
        .btn-2 .opt.opt-2 {
            left: 50%;
        }
        .btn-2 .opt .table {
            width: 100%;
            height: 100%;
        }
        .btn-2 .opt .td {
            text-align: center;
            vertical-align: middle;
        }

/*CONTROLS - btn-3*/
.btn-3 {
    cursor: default;
    position: relative; /*edit*/
    width: 100%; /*edit*/
    height: 10%; /*edit*/
    margin-bottom: 0%; /*edit*/
    background-color: #E8E8E8; /*edit*/
    border: none;  /*edit*/
    color: black;  /*edit*/
    font-weight: bold;
}
    .btn-3 .opt {
        position: absolute;
        top: 0%;
        width: 33.33%;
        height: 100%;
    }
        .btn-3 .opt:hover {
        }
        .btn-3 .opt.active {
            background-color: #7F7F7F;
            color: white;
        }
        .btn-3 .opt.opt-1 {
            left: 0%;
        }
        .btn-3 .opt.opt-2 {
            left: 33.33%;
        }
        .btn-3 .opt.opt-3 {
            left: 66.66%;
        }
        .btn-3 .opt .table {
            width: 100%;
            height: 100%;
        }
        .btn-3 .opt .td {
            text-align: center;
            vertical-align: middle;
        }



/*CONTROLS - dropdown*/
.dropdown {
    cursor: pointer;
    position: relative; /*edit*/
    width: auto; /*edit*/
    height: auto; /*edit*/
    margin: 0%; /*edit*/
    background-color: transparent; /*edit*/
    border: 2px solid white;  /*edit*/
    color: inherit;  /*edit*/
    transition: all 100ms;
}
    .dropdown:hover {
        border-color: rgba(255, 255, 255, 0.7);
    }
        .dropdown:hover .text, .dropdown:hover .arrow {
            opacity: 0.7;
        }
    .dropdown .dis-cover {
        z-index: 30;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        opacity: 0;
        transition: opacity 1s;
    }
    .dropdown.disabled .dis-cover {
        opacity: 0.8;
    }
    .dropdown .text {
        display: block;
        border-collapse: collapse;
        border-spacing: 0px;
        margin: 0px;
        position: absolute;
        top: 0px;
        left: 0%;  /*edit*/
        width: 90%;  /*edit*/
        height: 100%;
        text-align: left;
        white-space: nowrap;
        font-weight: bold;
        overflow: hidden;
    }
        .dropdown .text .table {
            width: 100%;
            height: 100%;
        }
        .dropdown .text .td {
            vertical-align: middle;
            line-height: 0px;
        }
    .dropdown .arrow {
        position: absolute;
        top: 0px;
        right: 0%; /*edit*/
        width: 10%; /*edit*/
        height: 100%;
        background-image: url(../Graphics/dd-arr.svg?211025-1-1141021-1);
        background-position: right center;
        background-size: 60% auto; /*edit*/
        background-repeat: no-repeat;
    }
    .dropdown .v, .dropdown .h, .dropdown .h1 {
        display: none;
    }
    .dropdown .list {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        z-index: 200;
        display: none; /*block*/
        opacity: 0; /*1*/
        position: absolute;
        left: 0px;
        top: 100%;
        margin-top: 2px;
        width: 100%;
        /*min-height: 70px;*/
        /*max-height: 500%;*/
        text-align: left;
        overflow: auto;
        padding: 0.5vw;
        background-color: black; /*edit*/
        color: #505050; /*edit*/
        border-radius: 0.5vw;
    }
        .dropdown .list.invert {
            top: auto;
            bottom: 100%;
            margin-bottom: 3px;
        }
        .dropdown .list .select-deselect-all {
            padding-top: 1%; /*edit*/
            padding-bottom: 2%; /*edit*/
            margin: 0%; /*edit*/
            text-align: center;
            color: black;
        }
            .dropdown .list .select-deselect-all .select:hover {
                cursor: pointer;
                text-decoration: underline;
            }
            .dropdown .list .select-deselect-all .razmak {
                margin-left: 5%;
                margin-right: 5%
            }
            .dropdown .list .select-deselect-all .deselect:hover {
                cursor: pointer;
                text-decoration: underline;
            }
        .dropdown .list .group-heading {
            width: 100%;
            padding: 1% 0% 1% 2%;
            margin: 0px;
            border-bottom: 1px dotted #777777;
        }
        .dropdown .list .item {
            cursor: pointer;
            position: relative;
            width: 100%;
            padding-top: 1%; /*edit*/
            padding-bottom: 1%; /*edit*/
            margin: 0%; /*edit*/
            border-bottom: 1px solid #e3e3e3; /*edit*/
        }
            .dropdown .list .item:last-child {
                border-bottom: none;
            }
            .dropdown .list .item.group {
                padding-left: 8%;
            }
            .dropdown .list .item:hover {
                text-decoration: underline; /*edit*/ /*edit*/
            }
            .dropdown .list .item .table {
                table-layout: fixed;
                width: 100%;
                height: 100%;
                border-spacing: 0px;
            }
            .dropdown .list .item .td {
                vertical-align: top; /*edit*/
            }
                .dropdown .list .item .td.r {
                    width: 1%; /*edit*/
                }
                .dropdown .list .item .td.cont-cek {
                    position: relative;
                    width: 5%; /*edit*/
                    /*background-image: url(../Graphics/icon-filter.svg?211025-1-1130621-31);
                    background-position: center center;
                    background-size: 0% auto;
                    background-repeat: no-repeat;*/
                }
                    /*.dropdown .list .item .td.cont-cek.selected {
                        background-size: 80% auto;
                    }*/
                    .dropdown .list .item .td.cont-cek img {
                        vertical-align: middle;
                        width: 100%;
                        height: auto;
                        visibility: hidden;
                    }
                    .dropdown .list .item.selected .td.cont-cek img {
                        visibility: visible;
                    }
                .dropdown.multiple .list .item .td.cont-text {
                    width: 91%; /*edit*/
                    padding-left: 2%; /*edit*/
                    padding-right: 1%; /*edit*/
                    word-wrap: break-word;
                }
                .dropdown.single .list .item .td.cont-text {
                    width: 97%; /*edit*/
                    padding-left: 2%; /*edit*/
                    padding-right: 1%; /*edit*/
                    word-wrap: break-word;
                }
