/*
Custom css
*/

.things {
    position: absolute;
    left: 0;
    font-size: 1em;
    height: 400px;
}

.inner {
    display: block;
    padding: 0 10px 10px 10px;
    width: 400px;
}

* html .left {
    height: 100%;
    top: 0;
    bottom: 0;
    border-top: 100px solid #fff;
    border-bottom: 50px solid #fff;
}

.sgCol {
    float: left;
    position: inherit;
    width: 410px;
    height: 400px;
    overflow-y: auto !important;
}

.sgRow {
    width: 1280px;
    max-height: 450px;
    /*height:450px;*/
    overflow-x: auto;
}

.sgInnerRow {
    overflow-x: auto !important;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background: -webkit-gradient(linear,left top,left bottom,from(#639fa1),to(#808080));
    box-shadow: inset 1px 1px 1px rgba(255,255,255,.25), inset -1px -1px 1px rgba(0,0,0,.25);
}

::-webkit-scrollbar-track {
    background-color: rgb(255,255,255,255 0.3);
    /*background: linear-gradient(to right,#201c29,#201c29 1px,#100e17 1px,#100e17);*/
}

/*.ui-tabs,
.ui-tabs .ui-tabs-nav,
.ui-tabs .ui-tabs-panel,
.ui-widget-header .ui-state-default,
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    background: inherit;
}*/

.ui-widget-content {
    background: inherit !important;
}

.burlywood {
    color: burlywood;
}


.searchbar {
    margin-bottom: auto;
    margin-top: auto;
    height: 60px;
    background-color: #353b48;
    border-radius: 30px;
    padding: 10px;
}

.search_input {
    color: white;
    border: 0;
    outline: 0;
    background: none;
    width: 0;
    caret-color: transparent;
    line-height: 40px;
    transition: width 0.4s linear;
}

.searchbar:hover > .search_input {
    padding: 0 10px;
    width: 170px;
    caret-color: red;
    transition: width 0.6s linear;
}

.searchbar:hover > .search_icon {
    background: white;
    color: #e74c3c;
}

.search_icon {
    height: 40px;
    width: 40px;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: white;
    text-decoration: none;
}

.block-add {
    display: block;
    position: relative;
    height: 10px;
    width: 150px;
    padding: 1rem;
    margin: .125rem auto;
    transition: all ease-in-out .2s
}

    .block-add hr {
        margin: 0;
        border-top-width: 2px;
        border-color: transparent;
        transition: border-color ease-in-out .2s
    }

    .block-add i {
        background: #fff;
        color: #e9ecef;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -18px;
        margin-left: -18px;
        font-size: 28px;
        border: 4px solid #fff;
        border-radius: 50%;
        z-index: 1000;
        transition: color ease-in-out .2s
    }

a.block-add.active, a.block-add:focus-within, a.block-add:hover {
    width: 100%;
    max-width: 960px;
    outline: 0
}

    a.block-add.active hr, a.block-add:focus-within hr, a.block-add:hover hr {
        border-color: #495057
    }

    a.block-add.active i, a.block-add:focus-within i, a.block-add:hover i {
        color: #495057
    }


.blocks .block-group .empty-info, .blocks .block-group-horizontal .empty-info {
    background: #fff;
    color: #6c757d;
    border-color: #ced4da;
    margin: 0
}

.blocks > div > .block {
    margin-top: -1rem;
    margin-bottom: -1rem
}

.blocks.blocks-outline .block {
    border-color: #ced4da
}

    .blocks.blocks-outline .block .block {
        border-color: transparent
    }

    .blocks.blocks-outline .block.danger {
        border-color: #a94441
    }

    .blocks.blocks-outline .block.block-group:hover:not(.danger), .blocks.blocks-outline .block:focus-within {
        border-color: #ced4da
    }

.block {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    padding: 2.75rem 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    transition: border-color .2s ease-in-out
}

    .block .block-header {
        color: #adb5bd;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: .5rem 1rem;
        font-size: .8rem;
        opacity: 0;
        transition: opacity ease-in-out .2s
    }

        .block .block-header .title {
            float: left;
            margin-top: .25rem
        }

            .block .block-header .title i {
                font-size: .875rem;
                padding-right: .5rem
            }

            .block .block-header .title strong {
                text-transform: uppercase
            }

    .block.collapsed {
        border-color: #ced4da;
        padding-bottom: 0
    }

        .block.collapsed > .block-header {
            opacity: 1
        }

        .block.collapsed > .block-body, .block.collapsed > .block-group {
            display: none
        }

    .block.block-full {
        max-width: none
    }

    .block .actions, .block .custom-actions {
        float: right
    }

        .block .actions .btn, .block .custom-actions .btn {
            background: #f2f2f2;
            width: 1.75rem;
            height: 1.75rem;
            border-radius: 50%;
            position: relative;
            transition: all ease-in-out .2s;
            cursor: pointer
        }

    .block .custom-actions, .block .has-media-picker .media-picker {
        opacity: 0;
        transition: opacity ease-in-out .2s;
        position: absolute
    }

        .block .actions .btn i, .block .custom-actions .btn i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%)
        }

        .block .actions .btn:hover, .block .custom-actions .btn:hover {
            background: #ced4da
        }

        .block .actions .btn.danger, .block .custom-actions .btn.danger {
            color: #a94441
        }

            .block .actions .btn.danger:hover, .block .custom-actions .btn.danger:hover {
                background: #a94441;
                color: #fff
            }

        .block .actions .btn.add, .block .custom-actions .btn.add {
            color: #007eaa
        }

            .block .actions .btn.add:hover, .block .custom-actions .btn.add:hover {
                background: #007eaa;
                color: #fff
            }

        .block .actions .btn.selected, .block .custom-actions .btn.selected {
            background: #ced4da !important
        }

    .block .custom-actions {
        top: .5rem;
        right: 7rem;
        float: none
    }

    .block .has-media-picker .media-picker {
        background: rgba(0,0,0,.4);
        width: 90%;
        top: 50%;
        left: 5%;
        padding: 1.5rem;
        margin-top: -2.5rem;
        border-radius: .25rem
    }

    .block:focus-within .custom-actions, .block:focus-within > .block-header, .block:focus-within > .has-media-picker .media-picker, .block:hover .custom-actions, .block:hover > .block-header, .block:hover > .has-media-picker .media-picker {
        opacity: 1
    }

    .block .has-media-picker .media-picker.slide-in {
        position: relative;
        width: 0;
        height: 35px;
        top: auto;
        left: auto;
        margin-top: 0;
        padding: 0;
        background-color: transparent;
        transition: all ease-in-out .2s
    }

        .block .has-media-picker .media-picker.slide-in .card {
            margin-left: 1rem
        }

        .block .has-media-picker .media-picker.slide-in .card-body {
            border: 1px solid #ced4da
        }

    .block .has-media-picker .media-picker .card-body {
        padding: .4rem 1rem;
        margin-right: 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .block:focus-within > .has-media-picker .media-picker.slide-in, .block:hover > .has-media-picker .media-picker.slide-in {
        width: 50%
    }

    .block:focus-within, .block:hover {
        border-color: #ced4da
    }

    .block.danger {
        border-color: #a94441
    }


.component-toolbar {
    position: absolute;
    top: -.5rem;
    left: .5rem;
    right: 9.5rem;
    z-index: 2000
}

.region .component-toolbar {
    top: -2rem
}

.modal .component-toolbar {
    right: .5rem
}


.actions {
    white-space: nowrap
}

    .actions a, .actions button {
        background-color: transparent;
        border: none;
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        text-align: center;
        line-height: 1.5rem;
        border-radius: 50%;
        transition: background-color ease-in-out .15s,color ease-in-out .15s
    }

        .actions a:focus, .actions a:hover, .actions button:focus, .actions button:hover {
            background-color: #007eaa;
            color: #fff
        }

        .actions a.danger, .actions button.danger {
            color: #a94441
        }

            .actions a.danger:focus, .actions a.danger:hover, .actions button.danger:focus, .actions button.danger:hover {
                background-color: #a94441;
                color: #fff
            }

        .actions a.success, .actions button.success {
            color: #439700
        }

            .actions a.success:focus, .actions a.success:hover, .actions button.success:focus, .actions button.success:hover {
                background-color: #439700;
                color: #fff
            }