.border-color-main{
    border: solid 1px #820000 !important;
    opacity: 1;
}
.gridSpecList{
    display: grid;
    grid-template-columns: 1fr 100px;
    gap: 5px;
}
.gridSpecList > div{
    padding: 5px 10px;
    background-color: #f5faff;
}
.gridSpecList > div:nth-child(2n){
    text-align: right;
}
.gridSpecList > div:nth-child(4n+1),
.gridSpecList > div:nth-child(4n+2){
    background-color: #0a53be10;
}
.gridSpecList a{
    text-decoration: none;
    color: darkblue;
}
.gridSpecList a:hover{
    color: #0a53be;
}


.gridSpecDetailList{
    display: grid;
    grid-template-columns: 200px 100px 1fr 1fr;
    gap: 5px;
}
.gridSpecDetailList .grid2{
    display: grid;
    grid-template-columns: 1fr 100px;
}

a.link:not([aria-disabled=true]){
    color: var(--bs-body-color);
}
a.red-link:not([aria-disabled=true]){
    color: #570000;
}
a.red-link:hover,
a.link:hover{
    color: #aa0000;
}
a.current-count{
    position: absolute;
    background-color: #820000;
    display: block;
    right: 20px;
    border-radius: 10px;
    color: white;
    top: 15px;
    padding: 5px 10px;
    min-width: 30px;
    text-align: center;
    font-size: 15px;
}
a.current-count:hover{
    color: white !important;
    background-color: #aa0000;
}
a.sort-link{
    padding: 0 5px;
}
a.sort-link span{
    color: #820000;
    justify-self: center;
    vertical-align: middle;
    text-align: center;
    padding: 15px 0;
    background: white;
    border-radius: 15px;
    display: block;
}
a.sort-link:hover span{
    background-color: #820000;
    color: white;
}

.box{
    border: solid 1px #820000;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background-color: white;
}

.section-footer{
    background-color: #820000;
    color: #FFFFFF;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

/* search */
.box-search{}
.box-search button{
    border-color: #820000;
    background-color: #820000;
    color: white;
}
.box-search button:hover{
    background-color: white;
    color: #820000;
    border-color: #820000;
}
.box-search button:active{
    background-color:  #aa0000 !important;
    color: white;
}
.box-search input[name=search]{

}
.box-search input[name=search]:focus{
    box-shadow: none;
    border-color: #820000;
}

/* FILTER BOX */
.filter-input-group{
    position: relative;
    padding: 1rem;
}
.filter-input-group input{
    margin:             1px 0;
}

.filter-input-group label{
    position:       absolute;
    top:                1.5rem;
    left:               21px;
    background-color:   white;
}
.filter-input-group >input:focus{
    box-shadow:         none;
    border:             solid 2px #820000;
    margin:             0;
    border-radius:      6px 6px 0 0;
}
.filter-input-group:has(>input:focus) label,
.filter-input-group label.active{
    transition: 0.3s ease;
    font-size: 13px;
    top: 7px;
    padding: 0 3px;
    left: 18px
}
.filter-input-group .variables{
    transition:         1s ease;
    position:           absolute;
    background:         white;
    left:               0.5rem;
    right:              0.5rem;
    padding:            0.5rem 0;
    z-index:            -1;
    border:             solid 2px #820000;
    border-top:         none;
    border-radius:      0 0 6px 6px;
    overflow-y:         auto;
    opacity:            0;
}
.filter-input-group:has(>input:focus) .variables{
    opacity:            1;
    display:            block;
    transition:         0.5s ease;
    max-height:         200px;
    z-index:            1000;
}

.filter-input-group .variables a{
    transition:         0.3s ease;
    display:            block;
    padding:            0.2rem 1rem;
    cursor:             pointer;
}
.filter-input-group .variables a.hide{
    transition:         0.3s ease;
    display:            none;
}
.filter-input-group .variables a:hover{
    background-color:   #820000;
    color:              white !important;
}
.filter-input-group .variables::-webkit-scrollbar {
    width:              3px; /* ширина scrollbar */
    background:         #820000;
}
.filter-input-group .variables::-webkit-scrollbar-track {
    background:         transparent; /* цвет дорожки */

}
.filter-input-group .variables::-webkit-scrollbar-thumb {
    border:             1px solid #820000;  /* padding вокруг плашки */
    border-right:       1px solid white;  /* padding вокруг плашки */
    border-radius:      20px;
}