#Rib{
    --svgBlkClr:#000;
    --svgGryClr:#c3c3c3;
    --svgBgClr1:#fff;
    --svgGryClr2:#505050;
    --svgAcClr1:#0c61a3;
    --svg:#505050;
    --svgSndClr1:#e1b757;
}


#Rib>#midPan {
    position: relative;
}

#Rib>#midPan>.pan {
    position: absolute;
    top: var(--pad1);
    left: 0px;
    width: calc(100% - var(--pad1) * 2);
    height: calc(100% - var(--pad1) * 2);
    margin-top: calc(var(--pad1) * 2);
    margin-bottom: var(--pad1);
    margin-left: var(--pad1);
    margin-right: var(--pad1);
    top: -6px;
    display: none;
}

#Rib>#midPan>.pan.show {
    display: flex;
    flex-direction: row;
}

#Rib>#midPan>.pan>.sbPan {
    display: flex;
    position: relative;
    min-width: 70px;
}

#Rib>#midPan>.pan>.sbPan>* {
    max-height: 85px;
}

#Rib>#midPan>.pan>.sbPan::before {
    bottom: calc(var(--pad1) * -1);
    height: 15px;
    content: attr(name);
    position: absolute;
    text-align: center;
    width: 100%;
    font-size: 80%;
}

#Rib>#midPan>.pan>.sbPan::after {
    top: 2px;
    right: 0px;
    content: "";
    position: absolute;
    background-color: var(--mainColor3);
    width: 1px;
    height: calc(100% - 4px);
}

.stkW {
    display: flex;
    flex-direction: row;
}

.stkH {
    display: flex;
    flex-direction: column;
    margin-left: var(--pad1);
    margin-right: var(--pad1);
}
.stkH.lft>*{
    justify-content:flex-start;
}

.bigBtn {
    display: grid;
    grid-template-rows: 1fr 1fr;
    text-align: center;
    justify-items: center;
    border: 1px solid var(--txtColor3);
    margin-bottom: calc(var(--pad1) * 2);
    border-radius: var(--brdrRad);
}

.bigBtn:hover {
    border: 1px solid var(--txtColor2)
}

.bigBtn>.upPrt {
    padding: var(--pad1);
    position: relative;
    width: calc(100% - var(--pad1));
}

.bigBtn>.upPrt:hover::after {
    width: calc(100% - 4px);
    height: 100%;
    display: block;
    left: 2px;
    content: "";
    background-color: var(--selClr);
    position: absolute;
    top: 0px;
    border-radius: var(--brdrRad) var(--brdrRad) 0px 0px;
    border-bottom: 1px solid var(--txtColor2)
}

.bigBtn>.dwnPrt {
    padding: var(--pad1);
    position: relative;
    width: calc(100% - var(--pad1));
}

.bigBtn>.dwnPrt:hover::after {
    width: calc(100% - 4px);
    height: 100%;
    display: block;
    left: 2px;
    content: "";
    background-color: var(--selClr);
    position: absolute;
    top: 0px;
    border-radius: 0px 0px var(--brdrRad) var(--brdrRad);
    border-top: 1px solid var(--txtColor2)
}

.bigBtn>.dwnPrt>.arrow {
    position: absolute;
    left: calc(50% - 4px);
}

.paste {
    --Clr1: #e0b349;
}

.inactive {
    --Clr1: #C0C0C0 !important;
    --Clr2: #C0C0C0 !important;
    --Clr3: #C0C0C0 !important;
    --Clr4: #C0C0C0 !important;
}
.cmbbx{
    position: relative;
}
.cmbbx>input{
    width: fit-content;
    border-radius: var(--brdrRad);
    background-color: var(--Clr1);
    color: var(--txtColor2);
    border: 1px solid var(--txtColor2);
    margin-top: var(--pad1);
    margin-right: var(--pad1);
    padding-left: var(--pad1);
    padding-right: var(--pad1);
    padding-top: calc(var(--pad1) / 2);
    padding-bottom: calc(var(--pad1) / 2);
    resize: vertical;
}
.cmbbx.mxSz>input{
    width: 125px;
}
.cmbbx.smSz>input{
    width: 40px;
}
.cmbbx>.btnCB{
position: absolute;
right: calc(var(--pad1));
top: 0px;
margin-top: var(--pad1);
width: 20px;
height: 20px;
}

/* .btn.Up>svg>use{
height: 20px;
} */