/*   EzTable   */
.ez-table {
    display: flex;
    flex-flow: column;
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
}


.ez-paging {
    display: flex;
    margin-top: .5rem;
    margin-bottom: .5rem;
    margin-left: .25rem;
    min-height: 20px;
}

.ez-move-pages-cont {
    display: flex;
    margin-left: auto;
}

.ez-change-page {
    width: 50px;
    margin-right: .25rem;
    border: 1px solid dimgrey;
}

.ez-paging span {
    align-self: center;
}

.ez-header-col {
    font-weight: bold;
    padding: .75rem;
    border-top: 2px solid #dee2e6;
    border-bottom: 2px solid #dee2e6;
}

.ez-field {
    padding: .75rem;
    border-top: 2px solid #dee2e6;
    display: flex;
}

.ez-table[data-template=ez-dark] {
    color: #fff;
    background-color: #212529;
}

[data-template=ez-dark] .ez-header-col {
    border-color: #32383e;
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
    padding: .75rem;
    border-top: 1px solid #dee2e6;
}


[data-template=ez-dark] .ez-field {
    padding: .75rem;
    vertical-align: top;
    border-color: #32383e;
    border-top: 1px solid #dee2e6;
    border-bottom: none;
}

.ez-field.ez-sorted {
    background-color: green;
}

.ez-field input {
    align-self: center;
}



.ez-header-col, .ez-field {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    position: relative;
    width: 100%;
    min-height: 46px;
    padding-right: 15px;
    padding-left: 15px;
    align-items: center;
}

.ez-row:nth-child(odd) {
    background-color: rgba(0,0,0,.05);
}

[data-template=ez-dark] .ez-row:nth-child(odd) {
    background-color: rgba(255,255,255,.05);
}

.ez-row, .ez-header-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    min-height: 46px;
    transition: .25s linear background-color;
}

*, ::after, ::before {
    box-sizing: border-box;
}



.ez-arrow {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    cursor: pointer;
    display: inline-block;
}

.ez-filters-wrapper {
    margin-bottom: .5rem;
    margin-top: .5rem;
    display: flex;
    min-height: 38px;
}

.ez-bottom-arrow {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid black;
    margin-left: .75rem;
    position: absolute;
}

[data-template=ez-dark] .ez-bottom-arrow {
    border-top: 7px solid white;
}

.ez-top-arrow {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid black;
    margin-left: .75rem;
    margin-top: -10px;
    position: absolute;
}

[data-template=ez-dark] .ez-top-arrow {
    border-bottom: 7px solid white;
}

.ez-right-arrow {
    border-left: 10px solid black;
    margin-left: .5rem;
}

[data-template=ez-dark] .ez-right-arrow {
    border-left: 10px solid white;
}


.ez-left-arrow {
    margin-right: .5rem;
    border-right: 10px solid black;
}

[data-template=ez-dark] .ez-left-arrow {
    border-right: 10px solid white;
}


.ez-body {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

    .ez-body .ez-row select {
        -webkit-appearance: none;
    }


    .ez-body .ez-row input:not([type='checkbox']), .ez-body .ez-row select {
        height: calc(2.25rem + 2px);
        padding: .375rem .75rem;
        font-size: 1rem;
        line-height: 1.5;
        border-radius: .25rem;
        display: block;
        width: 100%;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        background-color: transparent;
        border: none;
    }

[data-template=ez-dark] .ez-body .ez-row input:not([type='checkbox']), [data-template=ez-dark] .ez-body .ez-row select {
    color: white;
}

.ez-add-div {
    position: absolute;
    background-color: white;
    padding: .75rem;
    box-shadow: 0px 0px 25px #717070;
    transform: translateY(-125%);
    transition: .25s linear all;
    border-radius: 0.25rem;
    z-index: 999;
    top: 10px;
}

[data-template=ez-dark] .ez-add-div {
    background-color: #212529;
    box-shadow: 0px 0px 25px #ffffff;
}

.ez-add-div.ez-show {
    transform: translateY(0%);
}

.ez-span-field {
    width: 100%;
    padding: .375rem .75rem;
}

.ez-search-input {
    display: inline-block;
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    margin-left: 0.25rem;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.ez-body input {
    text-overflow: ellipsis;
}


.ez-body .ez-row input:not(:disabled):hover, .ez-body .ez-row select:not(:disabled):hover {
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
}

[data-template=ez-dark] .ez-body .ez-row input:not(:disabled):hover, [data-template=ez-dark] .ez-body .ez-row select:not(:disabled):hover {
    color: black;
}

.ez-body .ez-row select:not(:disabled):hover {
    -webkit-appearance: menulist;
}

[data-template=ez-dark] .ez-row:hover {
    background-color: rgba(255, 255, 255, 0.26);
}

.ez-row:hover {
    background-color: rgba(211, 211, 211, 0.67);
}

.ez-table.ez-column .ez-header-wrapper {
    display: none;
}

.ez-table .ez-hamburger-line.ez-sort-select {
    display: none;
}

.ez-table.ez-column .ez-hamburger-line.ez-sort-select {
    display: block;
}

.ez-table.ez-column .ez-row {
    flex-direction: column;
}

.ez-table.ez-column .ez-field::before {
    content: attr(ez-title);
    font-weight: bold;
}

.ez-table.ez-column .ez-row {
    height: 0px;
}

    .ez-table.ez-column .ez-row.ez-show {
        height: auto;
        background-color: #80c1c7;
        border-bottom: white 3px solid;
    }


.ez-toggle {
    display: none;
    align-self: center;
    cursor: pointer;
    margin-right: .25rem;
    font-weight: bold;
    font-size: 2rem;
}


.ez-table.ez-column .ez-toggle {
    display: block;
}

.ez-hamburger {
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.ez-hamburger-wrapper {
    margin-left: auto;
    margin-right: 1rem;
}

.ez-hamburger-menu {
    position: absolute;
    right: 22px;
    z-index: 99;
    padding: 0.55rem;
    background-color: white;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 10px 0 rgba(0, 0, 0, 0.16);
    transition: 0.2s linear all;
}


    .ez-hamburger-menu.ez-hide {
        opacity: 0;
        transform-origin: right top 0px;
        transform: scale(0);
    }




/*   EzTable Generator   */
.ez-table-generator {
    z-index: 99999;
    font-family: Arial, Helvetica, sans-serif;
    transition: .5s linear transform;
    transform: translateY(-150%);
    box-shadow: 0px 0px 10px #626262;
    padding: .75rem;
    max-height: 100%;
    overflow-y: auto;
    position: absolute;
    background-color: white;
    top: 10px;
    min-width: 329px;
}

    .ez-table-generator h3 {
        margin: 0px;
    }

    .ez-table-generator .ez-copy-object {
       display: inline-block;
       margin-bottom: .75rem;
       text-decoration: underline;
       color: blue;
       cursor: pointer;
       font-size: 14px;
    }

    .ez-table-generator.ez-show {
        transform: translateY(0%);
    }

.ez-table-generator-title {
    text-decoration: underline;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
}

.ez-table-generator-row, .ez-add-div > div {
    padding-top: .35rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.ez-table-generator-rows-wrapper:nth-child(odd) {
    background-color: rgba(0,0,0,.05);
}


.delete-btn:hover {
    background-color: #868686 !important;
}

[data-template=ez-dark] .delete-btn:hover, [data-template=ez-dark] .ez-btn:hover, [data-template=ez-dark] .ez-add-btn:hover {
    background-color: #b8b8b8 !important;
    color: black;
}

.ez-btn, .ez-add-btn, .ez-table-generator-btn {
    margin-left: .35rem;
    border: none;
    padding: .25rem .55rem .25rem 0.55rem;
    border-radius: .25rem;
    cursor: pointer;
    background-color: #cdcdcd;
    color: white;
}

[data-template=ez-dark] .ez-btn, [data-template=ez-dark] .ez-add-btn, [data-template=ez-dark] .ez-table-generator-btn {
    background-color: #737373;
}


.delete-btn, .ez-add-btn {
    padding: 0.55rem;
    transition: .25s linear all;
    display: flex;
    align-items: center;
}

.ez-add-btn {
    width: 100%;
    justify-content: center;
    margin-left: 0px;
}

.ez-hamburger-line {
    padding-bottom: 0.55rem;
    padding-top: 0.55rem;
    border-bottom: 1px solid #959ba0;
}

[data-template=ez-dark] .ez-hamburger-menu {
    background-color: #212529;
}

.ez-table.ez-column[data-template=ez-dark] .ez-row.ez-show {
    background-color: #668f5c;
}

.ez-submit-add, .ez-cancel-add {
    padding: 0.55rem;
}

.ez-submit-add {
    background-color: green;
}

.ez-hamburger-line select{
    width:100%;
}

.ez-submit-add:hover {
    background-color: #005200 !important;
}

[data-template=ez-dark] .ez-submit-add {
    background-color: #005a00;
}

    [data-template=ez-dark] .ez-submit-add:hover {
        background-color: #008500 !important;
    }

.ez-add-btn-conts {
    margin-top: 0.55rem;
}

.delete-btn:hover, .ez-btn:hover, .ez-add-btn:hover {
    background-color: #ababab;
    color: white;
}

.ez-table-generator-object-wrapper {
    padding: .25rem;
}

.ez-add-field-wrapper, .ez-table-generator-col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    position: relative;
    width: 100%;
    min-height: 1px;
}

.ez-table-generator-close-btn {
    float: right;
    cursor: pointer;
    font-weight: bold;
}

.ez-add-field, .ez-cp-field {
    width: 173px;
    margin-left: 0.55rem;
}
