.side-contacts{
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    display: flex;
    transform: translateX(var(--slide-x));
    transition: transform 0.3s ease-in-out;
    pointer-events: none;
    z-index: 1000;
}

.side-contacts,
.side-contacts * {
    box-sizing: border-box;
}

.side-contacts-x-left{
    justify-content: flex-start;
    left:var(--x);
}

.side-contacts-x-center{
    justify-content: center;
    margin-left: var(--x);
}

.side-contacts-x-right{
    justify-content: flex-end;
    left: auto;
    right:var(--x);
}

.side-contacts-y-top{
    align-items: flex-start;
    top:var(--y)
}

.side-contacts-y-center{
    align-items: center;
    margin-top: var(--y);
}

.side-contacts-y-bottom{
    align-items: flex-end;
    top:auto;
    bottom:var(--y);
}

.side-contacts-in{
    position: relative;
    padding:10px;
    flex:0 0 var(--width);
    width: var(--width);
    line-height: 1.6;
    border-radius: var(--border-radius);
    filter:drop-shadow(0 0 var(--shadow-size) rgba(0,0,0,calc(var(--shadow-opacity) / 100)));
    background-color: #fff;
    pointer-events: auto;
}

.side-contacts-in img{
    max-width: 100%;
}

.side-contacts-divider{
    padding-top:10px;
    border-top: solid 1px #e8e8e8;
}

.side-contacts-item {
    margin-top:var(--margin-top);
    margin-bottom:var(--margin-bottom);
}

.side-contacts-close{
    --radius: 3px;
    position: absolute;
    top:calc(var(--border-radius) + 5px);
    width: 20px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: inherit;
    /* transition: all 0.3s ease-in-out; */
    cursor: pointer;
}

.side-contacts-x-right  .side-contacts-close,
.side-contacts-near-right .side-contacts-close{ 
    right: 100%;
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}

.side-contacts-x-left .side-contacts-close, 
.side-contacts-near-left .side-contacts-close{ 
    left: 100%;
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

.side-contacts-x-left .side-contacts-close img,
.side-contacts-near-left .side-contacts-close img{
    transform: rotate(180deg);
}

.side-contacts-hide.side-contacts-x-right .side-contacts-close img,
.side-contacts-hide.side-contacts-near-right .side-contacts-close img{
    transform: rotate(180deg);
}

.side-contacts-hide.side-contacts-x-left .side-contacts-close img,
.side-contacts-hide.side-contacts-near-left .side-contacts-close img{
    transform: rotate(0deg);
}


.side-contacts-hide .side-contacts-in{
    filter: none;
}

.side-contacts-hide .side-contacts-close{
    box-shadow: 0 0 var(--shadow-size) rgba(0,0,0,calc(var(--shadow-opacity) / 100));
}

.side-contacts-disabled-transition{
    transition: none;
}

.side-contacts-logo{
    display: none;
}

.side-contacts-hide-show-icon.side-contacts-hide .side-contacts-logo{
    display: block;
    transform: rotate(0deg)!important;
}

.side-contacts-hide-show-icon.side-contacts-hide .side-contacts-close{
    width:36px;
    height:36px;
    padding:3px;
    --radius:50%;
}

.side-contacts-hide-show-icon.side-contacts-hide .side-contacts-arrow{
    display: none;
}