:root {
    --bg1: rgba(255,255,255,0.8);
    --bg2: rgba(231,231,231,0.8);
    --color1: rgba(128,128,128,1);
    --pagebg1: rgba(255,255,255,0.8);
    --pagecolor1: rgba(128,128,128,1);
    --menubg1: rgba(255,255,255,1);
    --menubg2: rgba(231,231,231,1);
    --menucolor1: rgba(128,128,128,1);
    --menucolor2: rgba(128,128,128,1);
    --menusplit1: rgba(128,128,128,1);
    --tabbg1: rgba(231,231,231,1);
    --tabborder1: rgba(128,128,128,1);
    --tabborder2: rgba(192,192,192,1);
    --btnbg1: rgba(128,128,128,1);
    --btnbg2: rgba(231,231,231,1);
    --btncolor1: rgba(255,255,255,1);
    --btncolor2: rgba(128,128,128,1);
    --thbg1: rgba(231,231,231,1);
    --thcolor1: rgba(128,128,128,1);
    --trbg1: rgba(231,231,231,1);
    --trcolor1: rgba(128,128,128,1);
    --acolor1: rgba(128,128,128,1);
    --inputbg1: rgba(231,231,231,1);
    --inputcolor1: rgba(128,128,128,1);
    --dialogbg1: rgba(128,128,128,1);
    --dialogbg2: rgba(255,255,255,1);
    --dialogcolor1: rgba(255,255,255,1);
}

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
}

    html[data-theme="light"] {
        --bg1: rgba(255,255,255,0.8);
        --bg2: rgba(231,231,231,0.8);
        --color1: rgba(128,128,128,1);
        --pagebg1: rgba(255,255,255,0.8);
        --pagecolor1: rgba(128,128,128,1);
        --menubg1: rgba(255,255,255,1);
        --menubg2: rgba(231,231,231,1);
        --menucolor1: rgba(128,128,128,1);
        --menucolor2: rgba(128,128,128,1);
        --menusplit1: rgba(128,128,128,1);
        --tabbg1: rgba(231,231,231,1);
        --tabborder1: rgba(128,128,128,1);
        --tabborder2: rgba(192,192,192,1);
        --btnbg1: rgba(128,128,128,1);
        --btnbg2: rgba(231,231,231,1);
        --btncolor1: rgba(255,255,255,1);
        --btncolor2: rgba(128,128,128,1);
        --thbg1: rgba(231,231,231,1);
        --thcolor1: rgba(128,128,128,1);
        --trbg1: rgba(231,231,231,1);
        --trcolor1: rgba(128,128,128,1);
        --acolor1: rgba(128,128,128,1);
        --inputbg1: rgba(231,231,231,1);
        --inputcolor1: rgba(128,128,128,1);
        --dialogbg1: rgba(128,128,128,1);
        --dialogbg2: rgba(255,255,255,1);
        --dialogcolor1: rgba(255,255,255,1);
    }

    html[data-theme="dark"] {
        --bg1: rgba(0,0,0,0.8);
        --bg2: rgba(32,32,32,0.8);
        --color1: rgba(128,128,128,1);
        --pagebg1: rgba(0,0,0,0.8);
        --pagecolor1: rgba(128,128,128,1);
        --menubg1: rgba(0,0,0,1);
        --menubg2: rgba(32,32,32,1);
        --menucolor1: rgba(128,128,128,1);
        --menucolor2: rgba(128,128,128,1);
        --menusplit1: rgba(128,128,128,1);
        --tabbg1: rgba(32,32,32,1);
        --tabborder1: rgba(128,128,128,1);
        --tabborder2: rgba(192,192,192,1);
        --btnbg1: rgba(128,128,128,1);
        --btnbg2: rgba(32,32,32,1);
        --btncolor1: rgba(0,0,0,1);
        --btncolor2: rgba(128,128,128,1);
        --thbg1: rgba(32,32,32,1);
        --thcolor1: rgba(128,128,128,1);
        --trbg1: rgba(32,32,32,1);
        --trcolor1: rgba(128,128,128,1);
        --acolor1: rgba(128,128,128,1);
        --inputbg1: rgba(32,32,32,1);
        --inputcolor1: rgba(128,128,128,1);
        --dialogbg1: rgba(128,128,128,1);
        --dialogbg2: rgba(0,0,0,1);
        --dialogcolor1: rgba(0,0,0,1);
    }

    html[data-theme="red"] {
        --bg1: rgba(224,149,153,0.8);
        --bg2: rgba(247,228,230,0.8);
        --color1: rgba(255,255,255,1);
        --pagebg1: rgba(255,255,255,0.8);
        --pagecolor1: rgba(224,149,153,1);
        --menubg1: rgba(224,149,153,1);
        --menubg2: rgba(247,228,230,1);
        --menucolor1: rgba(255,255,255,1);
        --menucolor2: rgba(255,255,255,1);
        --menusplit1: rgba(255,255,255,1);
        --tabbg1: rgba(247,228,230,1);
        --tabborder1: rgba(224,149,153,1);
        --tabborder2: rgba(255,199,153,1);
        --btnbg1: rgba(224,149,153,1);
        --btnbg2: rgba(247,228,230,1);
        --btncolor1: rgba(255,255,255,1);
        --btncolor2: rgba(255,199,153,1);
        --thbg1: rgba(247,228,230,1);
        --thcolor1: rgba(224,149,153,1);
        --trbg1: rgba(247,228,230,1);
        --trcolor1: rgba(224,149,153,1);
        --acolor1: rgba(224,149,153,1);
        --inputbg1: rgba(247,228,230,1);
        --inputcolor1: rgba(224,149,153,1);
        --dialogbg1: rgba(224,149,153,1);
        --dialogbg2: rgba(255,255,255,1);
        --dialogcolor1: rgba(255,255,255,1);
    }

    html[data-theme="orange"] {
        --bg1: rgba(255,185,128,0.8);
        --bg2: rgba(255,241,230,0.8);
        --color1: rgba(255,255,255,1);
        --pagebg1: rgba(255,255,255,0.8);
        --pagecolor1: rgba(255,185,128,1);
        --menubg1: rgba(255,185,128,1);
        --menubg2: rgba(255,241,230,1);
        --menucolor1: rgba(255,255,255,1);
        --menucolor2: rgba(255,255,255,1);
        --menusplit1: rgba(255,255,255,1);
        --tabbg1: rgba(255,241,230,1);
        --tabborder1: rgba(255,185,128,1);
        --tabborder2: rgba(255,199,153,1);
        --btnbg1: rgba(255,185,128,1);
        --btnbg2: rgba(255,241,230,1);
        --btncolor1: rgba(255,255,255,1);
        --btncolor2: rgba(255,199,153,1);
        --thbg1: rgba(255,241,230,1);
        --thcolor1: rgba(255,185,128,1);
        --trbg1: rgba(255,241,230,1);
        --trcolor1: rgba(255,185,128,1);
        --acolor1: rgba(255,185,128,1);
        --inputbg1: rgba(255,241,230,1);
        --inputcolor1: rgba(255,185,128,1);
        --dialogbg1: rgba(255,185,128,1);
        --dialogbg2: rgba(255,255,255,1);
        --dialogcolor1: rgba(255,255,255,1);
    }

    html[data-theme="yellow"] {
        --bg1: rgba(229,207,13,0.8);
        --bg2: rgba(250,245,207,0.8);
        --color1: rgba(255,255,255,1);
        --pagebg1: rgba(255,255,255,0.8);
        --pagecolor1: rgba(229,207,13,1);
        --menubg1: rgba(229,207,13,1);
        --menubg2: rgba(250,245,207,1);
        --menucolor1: rgba(255,255,255,1);
        --menucolor2: rgba(255,255,255,1);
        --menusplit1: rgba(255,255,255,1);
        --tabbg1: rgba(250,245,207,1);
        --tabborder1: rgba(229,207,13,1);
        --tabborder2: rgba(234,217,61,1);
        --btnbg1: rgba(229,207,13,1);
        --btnbg2: rgba(250,245,207,1);
        --btncolor1: rgba(255,255,255,1);
        --btncolor2: rgba(234,217,61,1);
        --thbg1: rgba(250,245,207,1);
        --thcolor1: rgba(229,207,13,1);
        --trbg1: rgba(250,245,207,1);
        --trcolor1: rgba(229,207,13,1);
        --acolor1: rgba(229,207,13,1);
        --inputbg1: rgba(250,245,207,1);
        --inputcolor1: rgba(229,207,13,1);
        --dialogbg1: rgba(229,207,13,1);
        --dialogbg2: rgba(255,255,255,1);
        --dialogcolor1: rgba(255,255,255,1);
    }

    html[data-theme="green"] {
        --bg1: rgba(151,181,82,0.8);
        --bg2: rgba(234,240,220,0.8);
        --color1: rgba(255,255,255,1);
        --pagebg1: rgba(255,255,255,0.8);
        --pagecolor1: rgba(151,181,82,1);
        --menubg1: rgba(151,181,82,1);
        --menubg2: rgba(234,240,220,1);
        --menucolor1: rgba(255,255,255,1);
        --menucolor2: rgba(255,255,255,1);
        --menusplit1: rgba(255,255,255,1);
        --tabbg1: rgba(234,240,220,1);
        --tabborder1: rgba(151,181,82,1);
        --tabborder2: rgba(172,196,117,1);
        --btnbg1: rgba(151,181,82,1);
        --btnbg2: rgba(234,240,220,1);
        --btncolor1: rgba(255,255,255,1);
        --btncolor2: rgba(172,196,117,1);
        --thbg1: rgba(234,240,220,1);
        --thcolor1: rgba(151,181,82,1);
        --trbg1: rgba(234,240,220,1);
        --trcolor1: rgba(151,181,82,1);
        --acolor1: rgba(151,181,82,1);
        --inputbg1: rgba(234,240,220,1);
        --inputcolor1: rgba(151,181,82,1);
        --dialogbg1: rgba(151,181,82,1);
        --dialogbg2: rgba(255,255,255,1);
        --dialogcolor1: rgba(255,255,255,1);
    }

    html[data-theme="cyan"] {
        --bg1: rgba(46,199,201,0.8);
        --bg2: rgba(213,244,244,0.8);
        --color1: rgba(255,255,255,1);
        --pagebg1: rgba(255,255,255,0.8);
        --pagecolor1: rgba(46,199,201,1);
        --menubg1: rgba(46,199,201,1);
        --menubg2: rgba(213,244,244,1);
        --menucolor1: rgba(255,255,255,1);
        --menucolor2: rgba(255,255,255,1);
        --menusplit1: rgba(255,255,255,1);
        --tabbg1: rgba(213,244,244,1);
        --tabborder1: rgba(46,199,201,1);
        --tabborder2: rgba(88,210,212,1);
        --btnbg1: rgba(46,199,201,1);
        --btnbg2: rgba(213,244,244,1);
        --btncolor1: rgba(255,255,255,1);
        --btncolor2: rgba(88,210,212,1);
        --thbg1: rgba(213,244,244,1);
        --thcolor1: rgba(46,199,201,1);
        --trbg1: rgba(213,244,244,1);
        --trcolor1: rgba(46,199,201,1);
        --acolor1: rgba(46,199,201,1);
        --inputbg1: rgba(213,244,244,1);
        --inputcolor1: rgba(46,199,201,1);
        --dialogbg1: rgba(46,199,201,1);
        --dialogbg2: rgba(255,255,255,1);
        --dialogcolor1: rgba(255,255,255,1);
    }

    html[data-theme="blue"] {
        --bg1: rgba(90,177,239,0.8);
        --bg2: rgba(222,239,252,0.8);
        --color1: rgba(255,255,255,1);
        --pagebg1: rgba(255,255,255,0.8);
        --pagecolor1: rgba(90,177,239,1);
        --menubg1: rgba(90,177,239,1);
        --menubg2: rgba(222,239,252,1);
        --menucolor1: rgba(255,255,255,1);
        --menucolor2: rgba(255,255,255,1);
        --menusplit1: rgba(255,255,255,1);
        --tabbg1: rgba(222,239,252,1);
        --tabborder1: rgba(90,177,239,1);
        --tabborder2: rgba(115,176,228,1);
        --btnbg1: rgba(90,177,239,1);
        --btnbg2: rgba(222,239,252,1);
        --btncolor1: rgba(255,255,255,1);
        --btncolor2: rgba(115,176,228,1);
        --thbg1: rgba(222,239,252,1);
        --thcolor1: rgba(90,177,239,1);
        --trbg1: rgba(222,239,252,1);
        --trcolor1: rgba(90,177,239,1);
        --acolor1: rgba(90,177,239,1);
        --inputbg1: rgba(222,239,252,1);
        --inputcolor1: rgba(90,177,239,1);
        --dialogbg1: rgba(90,177,239,1);
        --dialogbg2: rgba(255,255,255,1);
        --dialogcolor1: rgba(255,255,255,1);
    }

    html[data-theme="purple"] {
        --bg1: rgba(182,162,222,0.8);
        --bg2: rgba(240,236,248,0.8);
        --color1: rgba(255,255,255,1);
        --pagebg1: rgba(255,255,255,0.8);
        --pagecolor1: rgba(182,162,222,1);
        --menubg1: rgba(182,162,222,1);
        --menubg2: rgba(240,236,248,1);
        --menucolor1: rgba(255,255,255,1);
        --menucolor2: rgba(255,255,255,1);
        --menusplit1: rgba(255,255,255,1);
        --tabbg1: rgba(240,236,248,1);
        --tabborder1: rgba(182,162,222,1);
        --tabborder2: rgba(197,181,229,1);
        --btnbg1: rgba(182,162,222,1);
        --btnbg2: rgba(240,236,248,1);
        --btncolor1: rgba(255,255,255,1);
        --btncolor2: rgba(197,181,229,1);
        --thbg1: rgba(240,236,248,1);
        --thcolor1: rgba(182,162,222,1);
        --trbg1: rgba(240,236,248,1);
        --trcolor1: rgba(182,162,222,1);
        --acolor1: rgba(182,162,222,1);
        --inputbg1: rgba(240,236,248,1);
        --inputcolor1: rgba(182,162,222,1);
        --dialogbg1: rgba(182,162,222,1);
        --dialogbg2: rgba(255,255,255,1);
        --dialogcolor1: rgba(255,255,255,1);
    }

a:link {
    color: var(--acolor1);
    text-decoration: none;
}

a:hover {
    color: var(--acolor1);
    text-decoration: none;
    opacity: 0.8;
}

a:active {
    color: var(--acolor1);
    text-decoration: none;
}

a:visited {
    color: var(--acolor1);
    text-decoration: none;
}

.form-control {
    width: 100%;
    background-color: var(--inputbg1);
    border: 1px solid var(--inputcolor1);
    border-radius: 3px;
    padding: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    color: var(--inputcolor1);
    outline: none;
}

    .form-control:focus {
        box-shadow: 0 0 3px var(--inputcolor1);
    }

.btn {
    border-radius: 3px;
    border: none;
    outline: none;
    padding: 5px 10px;
    margin-right: 5px;
    margin-bottom: 5px;
}

    .btn:hover {
        cursor: pointer;
        opacity: 0.8;
    }

.btn1 {
    background-color: var(--btnbg1);
    color: var(--btncolor1);
}

.btn2 {
    background-color: var(--btnbg2);
    color: var(--btncolor2);
}

.link-button {
    color: var(--btncolor1);
}

.input-group {
    display: flex;
}

    .input-group input {
        flex: 1;
    }

    .input-group button {
        width: 100px;
    }

.dialog_title {
    min-height: 40px;
    line-height: 40px;
    background-image: linear-gradient(to right,var(--dialogbg1),var(--dialogbg2));
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding: 0 10px;
    color: var(--dialogcolor1);
}

    .dialog_title:hover {
        cursor: move;
    }

.dialog_bottom {
    min-height: 40px;
    line-height: 40px;
    text-align: right;
    padding: 0 10px;
    border-top: 1px solid var(--menusplit1);
}

.menu_item {
    background-color: transparent;
    color: var(--menucolor1);
    padding: 5px;
}

    .menu_item:hover {
        background-color: var(--pagebg1);
        color: var(--pagecolor1);
        opacity: 0.8;
        cursor: pointer;
    }

.menu_item_selected {
    border-right: 3px solid var(--pagebg1);
}