textarea, select, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 1px solid #D5D5D6;
    border-radius: 4px;
    padding: 6px 8px;
    width: 100%;
    background: #F4F4F4;
    outline: none;
}

h1 {
    font-size: 32px;
    font-weight: 700;
}

h2 {
    font-style: normal;
    font-weight: 600;
    line-height: 27px;
    color: #26262C;
    font-size: 24px;
}

h3 {
    font-size: 18px;
    color: #2D2E33;
    font-weight: 500;
}

/*h4 {
    font-size: 16px;
    color: #2D2E33;
}*/

label {
    color: #000000;
    font-weight: 400;
}

.white-background {
    background: #ffff !important;
}

.with-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 13px 16px;
    gap: 8px;
    padding: 13px 16px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
    line-height: 14px;
    border: none;
    cursor: pointer;
}

a.blue-bg {
    color: #ffff;
}

.blue-bg {
    background: #6C2BFF;
    color: #FFFFFF;
}

.with-button.blue-bg:focus, .with-button.blue-bg:hover {
    background: #4C1EB2;
    /*color: #fefefe*/
}

.with-button.white-border {
    border: 1px solid #E6FDF3;
    border-radius: 4px;
}

.with-button.blue-border {
    border: 1px solid #6C2BFF;
    border-radius: 4px;
    color: #6C2BFF;
}

.wi-text-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 1px solid #D5D5D6;
    border-radius: 4px;
    padding: 6px 8px;
    width: 100%;
    background: #F4F4F4;
}

.grey-bg {
    background: #F4F4F4;
}

.button-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px
}

    .button-list .small {
        width: 50%;
    }

.wi-select {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: #F4F4F4;
    border: 1px solid #D5D5D6;
    border-radius: 4px;
    width: 100%
}

table.wi-table {
    filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.04));
    border: 1px solid #D5D5D6;
    /*border-radius: 8px;*/
    color: #797880;
    font-size: 12px;
    width: 100%
}

    table.wi-table thead {
        background: #F4F4F4;
        border: 1px solid #D5D5D6;
        font-weight: 700;
        font-size: 12px;
        line-height: 16px;
        color: #63626A;
    }

        table.wi-table thead > tr > th {
            background: #F4F4F4;
            /*display: flex;
            flex-direction: row;
            align-items: flex-start;*/
            padding: 24px;
            font-weight: 700;
        }

    table.wi-table tbody tr.stripe, table.wi-table tbody tr.odd {
        background: #FFFFFF;
    }

    table.wi-table tbody tr {
        background: #F4F4F4;
    }

    table.wi-table tbody > tr > td, table.wi-table tbody > tr > th {
        padding: 16px;
    }

    table.wi-table > tbody > tr > td a {
        font-weight: 700;
        text-decoration: none !important;
        color: #797880;
    }

    table.wi-table th a {
        font-weight: 700;
        text-decoration: none !important;
        color: #797880;
    }

    table.wi-table.striped tbody tr:nth-child(even) {
        background: #FFFFFF;
    }

    table.wi-table.striped tbody tr:nth-child(odd) {
        background: #F4F4F4;
    }

    table.wi-table.striped tbody th {
        background: #F4F4F4;
    }


.wi-pagination {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    gap: 22px;
    background: #FFFFFF;
    border: 1px solid #D5D5D6;
    border-radius: 0px 0px 8px 8px;
    color: #797880;
    border-top: none;
}

    .wi-pagination .info {
        font-weight: 400;
        font-size: 13px;
        line-height: 20px;
    }

    .wi-pagination ul {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        padding: 0px;
        gap: 16px;
        list-style-type: none;
    }

        .wi-pagination ul li {
            margin-left: 0px !important;
        }

            .wi-pagination ul li a {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                padding: 13px 16px;
                gap: 8px;
                border: 1px solid #797880;
                border-radius: 4px;
                /*width: 32px;*/
                height: 32px;
                color: #797880;
                outline: none;
            }

                .wi-pagination ul li a.current, .wi-pagination ul li.active a {
                    background: #6C2BFF;
                    color: #FFFFFF;
                }



ul.wi-tabs {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    list-style-type: none;
    overflow: hidden;
    font-size: 14px;
    z-index: 1;
    padding-left: 0px;
}

    ul.wi-tabs > li a {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 8px 11px;
        border-radius: 4px;
        text-decoration: none;
        font-weight: 400;
    }

    ul.wi-tabs.black > li a {
        background: #2D2E33;
        border: 1px solid #434248;
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.16);
        color: #D5D5D6;
    }

    ul.wi-tabs.grey > li a {
        background: #EAEAEB;
        border: 1px solid #D5D5D6;
        color: #797880;
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.04);
    }

        ul.wi-tabs.grey > li a.current {
            background: #797880;
            color: #FFFFFF;
            border: 1px solid #D5D5D6;
            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.24);
        }


    ul.wi-tabs.black > li a.current {
        background: #6C2BFF;
        color: #FFFFFF;
        border: 1px solid #AD86FB;
        box-shadow: 0px 0px 8px #6C2BFF;
    }


.wi-static-label-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
}

.static-label {
    padding: 6px 8px;
    background: #E3D7FD;
    border: 1px solid #6C2BFF;
    border-radius: 4px;
    color: #6C2BFF;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
}

.wi-floating-panel {
    /*display: flex;
    flex-direction: column;
    align-items: flex-end;*/
    /*padding: 0px;*/
    background: #FFFFFF;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04);
    margin-bottom: 32px;
    border-radius: 8px;
    border: 1px solid #D5D5D6;
    /*overflow: hidden;*/
}

    .wi-floating-panel label {
        color: #2D2E33;
        font-style: normal;
        font-weight: 500;
    }

    .wi-floating-panel .header {
        /*display: flex;
        flex-direction: row;
        align-items: center;*/
        padding: 24px;
        /*gap: 22px;*/
        /*border:;*/
        border-bottom: 1px solid #D5D5D6;
        /*background: #FFFFFF;*/
    }

        .wi-floating-panel .header h2 {
            font-style: normal;
            font-weight: 600;
            font-size: 20px;
            line-height: 27px;
            margin: 0px;
            color: #26262C;
        }

    .wi-floating-panel .body {
        /*display: flex;
        flex-direction: row;
        align-items: center;*/
        padding: 16px 24px;
        /*gap: 22px;*/
        /*background: #FFFFFF;*/
        /* border: 1px solid #D5D5D6;
        border-radius: 0px;*/
    }

        .wi-floating-panel .body .body-container {
            display: flex;
            flex-direction: row;
            /*justify-content: space-between;
            align-items: flex-start;
            padding: 0px;
            gap: 16px;*/
        }

        .wi-floating-panel .body .to-half {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            padding: 0px;
            gap: 16px;
        }

    .wi-floating-panel .panel-row {
        display: flex;
        align-items: center;
    }

    .wi-floating-panel .footer {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: flex-start;
        padding: 12px 24px;
        gap: 22px;
        border-top: 1px solid #D5D5D6;
        /*border-radius: 0px 0px 8px 8px;*/
        /*border-top: 0px;*/
        /*background: #FFFFFF;*/
    }

.wi-table-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px 24px;
    gap: 22px;
    background: #FFFFFF;
    border: 1px solid #D5D5D6;
    border-radius: 8px 8px 0px 0px;
    border-bottom: none;
    padding: 16px;
}

    .wi-table-header h3 {
        font-size: 20px;
        font-weight: 700;
    }

    .wi-table-header .icons {
        display: flex;
        gap: 12px;
    }

        .wi-table-header .icons .icon-btn, .icon-btn {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 6px;
            gap: 8px;
            color: #434248;
            font-weight: 700;
        }

            .wi-table-header .icons .icon-btn img {
                color: #6C2BFF;
            }

.wi-table-footer {
    display: flex;
    flex-direction: row;
    padding: 12px 24px;
    border: 1px solid #D5D5D6;
    border-radius: 0px 0px 8px 8px;
    background: #FFFFFF;
    border-top: none;
}

.flex-slide-right {
    justify-content: flex-end;
}




.seperator {
    border: 1px solid #EAEAEB;
    width: 0px;
}

    .seperator.margin-right-left {
        margin: 0 24px;
    }


    .seperator.full-width {
        width: 100%;
    }

    .seperator.secondary {
        border: 1px solid #D5D5D6;
    }

a.blue-link {
    color: #6C2BFF;
}
/*Modal */
.wi-modal {
    background: #F4F4F4;
    box-shadow: 0px 4px 18px rgba(108, 43, 255, 0.18);
    overflow: auto;
}

.wi-modal-body {
    padding: 24px 24px 48px 32px;
}

.wi-modal .header {
    padding: 32px;
    color: #63626A;
    border-bottom: 1px solid #D5D5D6;
    display: flex;
    justify-content: space-between;
}

.wi-modal .footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
}

.wi-flex {
    display: flex;
    gap: 24px;
    align-items: center;
}

    .wi-flex.space-between {
        justify-content: space-between
    }

/*With toggle theme*/

.wi-toggle {
    border: 1px solid #D5D5D6;
    border-radius: 4px;
    display: flex;
    justify-content: stretch;
    position: relative;
    width: 250px;
    height: 32px;

}

    .wi-toggle a {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .wi-toggle .active {
        background: #F2F2FC;
        border-radius: 4px;
        border: 1px solid #6C2BFF;
        color: #000000;
    }

    .wi-toggle a:hover, .wi-toggle a:active, .wi-toggle a:focus {
        text-decoration: none;
    }