.items {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}

.item {
 width: 380px;
 position: relative;
 margin: 10px 10px 10px 10px;
 padding: 10px;
 border-radius: 10px;
 background-color: #EEEEEE;
 border: 1px solid #999999;
 transition: transform 0.3s ease-in-out;
}

.item:hover {
 transform: scale(1.03);
 box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.item:hover a {
 text-decoration: none;
}

.item-top {
 height: 80px;
}

.item-logo {
 display: inline;
}

.item-image {
 width: 64px;
 padding-right: 10px;
}

.item-label {
 display: inline;
 vertical-align: middle;
 font-weight: bold;
 font-size: 16pt;
}

.item-text-prim {
 color: var(--first-color);
}

.item-text-sec {
 color: var(--second-color);
}

.item-text-low {
 font-size: 9pt;
}

.item-tags {
 float: right;
}

.item-nofees {
 float: right;
 background-color: var(--second-color);
 border-radius: 20px;
 padding: 5px 15px 5px 15px;
 font-weight: bold;
 color: #FFFFFF;
}

.item-alloc {
 float: right;
 background-color: var(--first-color);
 border-radius: 20px;
 padding: 5px 15px 5px 15px;
 font-weight: bold;
 color: #FFFFFF;
 margin-bottom: 5px;
}

.item-buttons {
 height: 106px;
}

.item-buttons-bottom {
 text-align: right;
 position: absolute;
 bottom: 10px;
 width: calc(100% - 20px);
}

.pool-label {
 font-size: xx-large;
 font-weight: bold;
 text-align: center;
 margin-bottom: 32px;
}

.link-img {
 width: 16px;
}


.switches {
 text-align: center;
}

.switch-icon {
 width: 24px;
}

.form-switch .form-check-input {
 width: 4em;
 height: 2em;
}

.form-check{
    display: inline-block;
}
.form-check-label{
    line-height: 36px;
    margin-left: 10px;
}

.form-check-input {
 border: 2px solid #000000!important;
 background-color: red;
 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")!important;
 box-shadow: none!important;
}

.form-check-input:checked {
 background-color: #55A822;
 border: 2px solid #000000;
}
.grid-view-switch, .list-view-switch{
    transition: all 0.3s ease-in-out;
}

.grid-view .list-view-switch, .list-view .grid-view-switch{
    user-select: none;
    opacity: 0.5;
    cursor: default;
}
.list-view #pools{
    margin: 10px 10px 10px 10px;
    border-radius: 10px;
    background-color: #EEEEEE;
    border: 1px solid #999999;
    overflow: hidden;
}
.list-view #pools .item{
    width: 100%;
    margin:0;
    border-radius: 0;
}
.list-view #pools .item:hover{
    transform: scale(1);
    box-shadow: none;
}

.list-view #pools .item-top{
    float: left;
    width: 64px;
    height: 52px;
}
.list-view #pools .item-label, .list-view #pools .item-tags{
    display: none;
}
.only-stacked .item:not(.item-stacked){ display: none;}

.list-view #pools .clear, .list-view #pools br{display: none;}
.list-view #pools .table {display: block;margin:0; width: calc(100% - 200px)}
.list-view #pools .table tbody{display: flex; }
.list-view #pools .table tr{flex: 6; position: relative;}
.list-view #pools .table tr:hover{background: transparent;--bs-table-accent-bg: transparent;}
.list-view #pools .table th{ display: none; }
.list-view #pools .table td{border: none; height: 52px;line-height: 46px;}
.list-view #pools .table tr.table-deposit, .list-view #pools .table tr.table-earn{flex: 3;}
.list-view #pools .table tr.table-fee{flex: 1;}
.list-view #pools .table tr.table-apr, .list-view #pools .table tr.table-apy{flex: 3; white-space: nowrap;}
.list-view #pools .table tr .item-text-low{margin-left: 10px;}

.list-view #pools .item:first-child, .list-view.only-stacked #pools .item-stacked{border-top: 43px solid rgb(33, 37, 41);}
.list-view .grid-view-visible, .grid-view .list-view-visible{display: none;}
.list-view.only-stacked #pools .item-stacked .table th, .list-view #pools .item:first-child .table th{user-select: none; color:#fff; border:none; display: block; position: absolute; left:0; top: -47px; left:0; right:0; overflow: hidden; text-overflow: ellipsis;}
.list-view.only-stacked #pools .item-stacked ~ .item-stacked {border-top: none;}
.list-view.only-stacked #pools .item-stacked ~ .item-stacked .table th{display: none;}

#pools .item-buttons .button-ico{margin: -4px 4px 0  0;}
.list-view #pools .item-buttons{position: absolute; right: 18px; top: 18px; width: 200px; height: 60px;text-align: right;}
.list-view #pools .item-buttons .button-half, .list-view #pools .item-buttons .button-large{overflow: hidden; width: 40px; height: 40px; padding: 10px; color: transparent;}
/*.list-view #pools .item-buttons .button-large{width: 150px; height: 40px; padding: 0 10px;line-height: 35px; overflow: hidden;}*/
.list-view #pools .item-buttons .button-ico{display: block; margin: 0;}
.list-view #pools .item-buttons .item-buttons-bottom{text-align: right; width: 100%;}

@media only screen and (max-width: 1700px) {
    .list-view.only-stacked #pools .item-stacked ~ .item-stacked .table th, .list-view #pools .table th{display: block;}
    .list-view #pools .table{width: 100%;}
    .list-view #pools .table tbody{flex-wrap: wrap; white-space: nowrap;}
    .list-view.only-stacked #pools .item-stacked .table th, .list-view #pools .item:first-child .table th{position: static; color: #000;}
    .list-view #pools .item:first-child, .list-view.only-stacked #pools .item-stacked{border-top: none;}
    .list-view #pools .item-buttons, .list-view #pools .item-buttons .item-buttons-bottom{position: static; width: auto;}
}