.wrapper,.wrapper .main,td {
    position: relative
}

.h5, h5 {
  font-weight: bold;
}

.small,small {
    font-size: 14px
}

span.label {
    white-space: pre
}

#table1 {
    margin-bottom: 20px
}

table {
    width: 100%;
    margin: auto;
    overflow: hidden
}

th {
    font-weight: 700;
    padding: 10px
}

tr:nth-child(odd) {
    background-color: rgba(160,160,160,.03)
}

td {
    border: 1px solid rgba(160,160,160,.25);
    padding: 8px	
}

td:nth-child(3n),td:nth-child(4n) {
    text-align: inherit
}

tr:not(:first-child) td:not(:first-child):hover::after {
    background-color: rgba(160,160,160,.15);
    content: "";
    height: 10000px;
    left: 0;
    position: absolute;
    top: -5000px;
    width: 100%;
    z-index: -1
}

td:hover {
    /*background-color: rgba(160,160,160,.05)*/
}

table tbody tr {
    border: 0
}

tr:nth-child(2n+1):hover,table tr:hover {
    background-color: rgba(160,160,160,.15)
}

tr:nth-last-child(1) {
    border-bottom: 1px solid rgba(160,160,160,.25)
}

th.redips-mark {
    text-align: center;
    border: 1px solid #fff
}

th.redips-mark:last-child {
    border-right: 1px solid rgba(160,160,160,.25)
}

#table1>tbody:nth-child(1)>tr:last-child>th:nth-child(1) {
    border-bottom: 1px solid rgba(160,160,160,.25)
}

#redips-drag {
    margin: auto
}

.redips-drag,.redips-nodrag {
    margin: 1px auto;
    z-index: 10;
    text-align: center;
    font-size: 14px
}

.t1,.t2,.t3 {
    color: #3b3b3b;
    font-weight: 700
}

.t3 {
    color: #ff5050
}

.t1:hover,.t2:hover {
    color: #b22
}

.redips-mark {
    color: #fff;
    font-size: 18px!important;
    background-color: #b5b5b5
}

.redips-trash {
    color: #fff;
    background-color: #4682b4;
    text-align: center
}

.form-control:focus,.form-select:focus {
    border-color: #ff7e00;
    box-shadow: inset 0 0 0 1px #ff7e00
}


.notification-container {
    position: fixed;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 16px
}

.notification-container[data-position^=top-] {
    top: 0
}

.notification-container[data-position^=bottom-] {
    bottom: 0
}

.notification-container[data-position$=-right] {
    right: 0
}

.notification-container[data-position$=-left] {
    left: 0
}

.notification-container[data-position$=-center] {
    left: 50%;
    transform: translateX(-50%)
}

.notification {
    box-sizing: border-box;
    position: relative;
    background: #fff;
    padding: 16px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    transition: all 350ms linear;
    border: 1px solid rgba(160,160,160,.35);
    box-shadow: 0 2px 24px rgba(160,160,160,.5)
}

.notification-container[data-position$=-right] .notification {
    transform: translateX(110%)
}

.notification-container[data-position$=-left] .notification {
    transform: translateX(-110%)
}

.notification-container[data-position=top-center] .notification {
    transform: translateY(-100vh)
}

.notification-container[data-position=bottom-center] .notification {
    transform: translateY(100vh)
}

.notification-container .notification.show {
    transform: translate(0,0)
}

.notification.progress::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: calc(100%*var(--progress));
    height: 5px;
    background: #ff0063;
    background: linear-gradient(90deg,#ff0063 0,#ff8400 10%,#f1ff00 20%,#52ff00 30%,#0f8 40%,#00b9ff 50%,#0005ff 60%,#af00ff 70%,#ff00e8 80%,#ff008a 90%,red 100%)
}

@media only screen and (max-width:767px) {
    table {
        border: 0;
        margin-top: 0
    }

    table caption {
        font-size: 14px
    }

    table tfoot,table thead {
        border: 0;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px
    }

    table tbody tr {
        border: 1px solid rgba(160,160,160,.35)
    }

    table tbody tr:nth-child(odd) {
        background-color: inherit!important
    }

    table tr {
        border: 1px solid #ddd;
        display: block;
        margin-bottom: 12px
    }

    table tr:nth-last-child(1) {
        border-bottom: 1px solid #ddd
    }

    table tr:hover {
        text-shadow: none;
        background-color: none;
        color: #212529
    }

    table td {
        border-bottom: 1px dotted #ddd;
        display: block;
        font-size: 16px;
        text-align: right!important;
        padding: 8px 10px
    }

    table td::before {
        content: attr(data-label);
        float: left;
        font-weight: 400;
        text-transform: none
    }

    table td:last-child {
        border-bottom: 0
    }

    th {
        padding: 7px
    }

    tr:not(:first-child) td:not(:first-child):hover::after {
        position: initial
    }

    tr:nth-child(2n+1):hover,tr:hover {
        background-color: unset
    }

    td {
        padding: 5px 0;
        border: 1px solid rgba(160,160,160,.25)!important;
        border-bottom: 0 solid rgba(160,160,160,.25)!important
    }

    td:empty {
        padding: 16px 0
    }

    td:last-child {
        border-bottom: 1px solid rgba(160,160,160,.25)!important
    }

    tr:nth-last-child(1) {
        border-bottom: 0 solid rgba(160,160,160,.25)!important
    }

    .rounds {
        display: block;
        padding: 5px 0
    }

    .view {
        display: flex
    }

    span.label {
        white-space: nowrap
    }

    tr.view>th:nth-child(n) {
        border-right: 1px solid #fff
    }

    tr.view>th:nth-last-child(1) {
        border-right: none
    }

    th.redips-mark {
        border: 0
    }

    th.redips-mark>small {
        padding: 0 6px
    }
}

@media (max-width:991px) {
    .wrapper .main .content-sidebar h2 {
        font-size: 24px;
        line-height: 28px
    }
}

@media only screen and (min-width:992px) and (max-width:1399px) {
    .wrapper .main .content-sidebar h2 {
        font-size: 32px;
        line-height: 36px
    }
}

@media (prefers-color-scheme:dark) {
    .t1,.t2 {
        color: #757575
    }

    tr:not(:first-child) td:not(:first-child):hover::after {
        background-color: rgba(160,160,160,.15)
    }

    tr.view>th:nth-child(n) {
        border-right: none
    }

    tr.view>th:nth-last-child(1) {
        border-right: 1px solid rgba(160,160,160,.25)
    }

    tr:nth-child(2n+1):hover,tr:hover {
        background-color: background-color: rgba(160,160,160,.15)
	}

	td:hover {
		background-color: rgba(160,160,160,.15)
	}

	.redips-mark {
		color: #999;
		background-color: unset
	}

	th.redips-mark {
		border: 1px solid rgba(160,160,160,.25)
	}

    .notification {
      background: #505253;
      box-shadow: 0 2px 12px rgba(160,160,160,.5)
    }
}