/*----------------------themes----------------------*/
button, input, .input, a, .field, .field .code .current {
    -webkit-transition: var(--transitionIn);
    -moz-transition: var(--transitionIn);
    -o-transition: var(--transitionIn);
    -ms-transition: var(--transitionIn);
    transition: var(--transitionIn)
}

    button:hover, input:hover, .input:hover, a:hover, .field:hover, .field .code .current:hover {
        -webkit-transition: var(--transitionOut);
        -moz-transition: var(--transitionOut);
        -o-transition: var(--transitionOut);
        -ms-transition: var(--transitionOut);
        transition: var(--transitionOut);
    }

    button.charcoal {
        color: var(--white);
        height: 38px;
        padding-left: 15px;
        padding-right: 15px;
        background-color: var(--thirdFront)
    }

        button.charcoal:hover {
            background-color: #555a5d
        }

        button.charcoal span {
            display: inline-block;
            padding-bottom: 3px;
            font-size: 14px;
            text-transform: uppercase
        }

            button.charcoal span:before {
                font-size: 20px;
                margin-right: 12px;
                vertical-align: bottom
            }


.dark .inner {
    color: #999;
    background-color: #313131
}

    .dark .inner a {
        color: #999
    }

    .dark .inner .list .list-item {
        font-size: 16px;
        text-align: left;
        cursor: pointer
    }

        .dark .inner .list .list-item:last-child {
            border-bottom: none
        }

    .dark .inner .list .list-item {
        border-bottom: 1px solid #222;
        padding: 18px 26px
    }

        .dark .inner .list .list-item:hover {
            color: var(--white);
            background-color: #464646
        }

    .dark .inner .surface {
        background-color: #464646
    }

.dark button {
    height: 34px;
    color: #5d6164;
    background-color: #ebebeb;
    font-weight: bold;
    font-size: 14px
}

.dark input[type=text], .dark .input {
    height: 34px;
    color: var(--white);
    background-color: #4f5356;
    border: 1px solid #38393b
}

    .dark input[type=text] input[type=text], .dark .input input[type=text] {
        background: none;
        border: none
    }

    .dark input[type=text]:before, .dark .input:before {
        color: var(--white);
        font-size: 12px;
        margin: 2px 8px 0 8px
    }

.dark .light .inner .list .list-item {
    font-size: 16px;
    text-align: left;
    cursor: pointer
}

    .dark .light .inner .list .list-item:last-child {
        border-bottom: none
    }

.dark .light input[type=text], .dark .light .input, .dark .light .dropbox {
    height: 38px;
    color: var(--firstFocus);
    background-color: #eaeaea;
    border: 1px solid #ccc;
    font-size: 16px;
    font-weight: bold;
    color: var(--firstFocus);
    text-align: center
}

    .dark .light input[type=text] input[type=text], .dark .light .input input[type=text], .dark .light .dropbox input[type=text] {
        background: none;
        border: none
    }

    .dark .light input[type=text]:hover, .dark .light .input:hover {
        border: 1px solid var(--firstFocus);
        background-color: var(--white)
    }

    .dark .light .dropbox:hover {
        color: #999;
        border: 1px solid #ccc;
        background-color: #ddd
    }

.light .inner .list .list-item {
    font-size: 16px;
    text-align: left;
    cursor: pointer
}

    .light .inner .list .list-item:last-child {
        border-bottom: none
    }

.light input[type=text], .light .input, .light .dropbox {
    height: 38px;
    color: var(--firstFocus);
    background-color: #eaeaea;
    border: 1px solid #ccc;
    font-size: 16px;
    font-weight: bold;
    color: var(--firstFocus);
    text-align: center
}

    .light input[type=text] input[type=text], .light .input input[type=text], .light .dropbox input[type=text] {
        background: none;
        border: none
    }

    .light input[type=text]:hover, .light .input:hover {
        border: 1px solid var(--firstFocus);
        background-color: var(--white)
    }

    .light .dropbox:hover {
        color: #999;
        border: 1px solid #ccc;
        background-color: #ddd
    }

.light .dark .inner {
    color: #999;
    background-color: #313131
}

    .light .dark .inner a {
        color: #999
    }

    .light .dark .inner .list .list-item {
        font-size: 16px;
        text-align: left;
        cursor: pointer
    }

        .light .dark .inner .list .list-item:last-child {
            border-bottom: none
        }

    .light .dark .inner .list .list-item {
        border-bottom: 1px solid #222;
        padding: 18px 26px
    }

        .light .dark .inner .list .list-item:hover {
            color: var(--white);
            background-color: #464646
        }

    .light .dark .inner .surface {
        background-color: #464646
    }

.light .dark button {
    height: 34px;
    color: #5d6164;
    background-color: #ebebeb;
    font-weight: bold;
    font-size: 14px
}

.light .dark input[type=text], .light .dark .input {
    height: 34px;
    color: var(--white);
    background-color: #4f5356;
    border: 1px solid #38393b
}

    .light .dark input[type=text] input[type=text], .light .dark .input input[type=text] {
        background: none;
        border: none
    }

    .light .dark input[type=text]:before, .light .dark .input:before {
        color: var(--white);
        font-size: 12px;
        margin: 2px 8px 0 8px
    }

.gray .content {
    width: 635px;
    min-height: 150px;
    color: #222;
    background-color: var(--white);
    border: 1px solid #d9d9d9;
    font-weight: bold;
    padding: 24px
}

.gray [data-placeholder]:empty:before {
    background-color: #ebebeb;
    color: #999
}


.dropdown-menu-dark {
    color: #dee2e6;
    background-color: #343a40;
    border-color: rgba(0, 0, 0, 0.15);
}

    .dropdown-menu-dark .dropdown-item {
        color: #dee2e6;
    }

        .dropdown-menu-dark .dropdown-item:hover, .dropdown-menu-dark .dropdown-item:focus {
            color: var(--white);
            background-color: rgba(255, 255, 255, 0.15);
        }

        .dropdown-menu-dark .dropdown-item.active, .dropdown-menu-dark .dropdown-item:active {
            color: var(--white);
            background-color: #0d6efd;
        }

        .dropdown-menu-dark .dropdown-item.disabled, .dropdown-menu-dark .dropdown-item:disabled {
            color: #adb5bd;
        }

    .dropdown-menu-dark .dropdown-divider {
        border-color: rgba(0, 0, 0, 0.15);
    }

    .dropdown-menu-dark .dropdown-item-text {
        color: #dee2e6;
    }

    .dropdown-menu-dark .dropdown-header {
        color: #adb5bd;
    }

/*----------------------End themess----------------------*/