.bal-container {    position: relative;    width: 100%;    height: 100%;   margin: 10px 0;  cursor: crosshair;    overflow: hidden;/*    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */ }

.bal-after, .bal-before {  display: block; position: absolute; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; overflow: hidden; }
.bal-after {  right: 0; } .bal-before { z-index: 15; }

.bal-before-inset {    position: absolute;    top: 0;    bottom: 0;    left: 0; }

.bal-after img, .bal-before img {    object-fit: cover;    position: absolute;    width: 100%;    height: 100%;    object-position: 50% 50%;    top: 0;   bottom: 0;    left: 0; -webkit-user-select: none;    -khtml-user-select: none;    -moz-user-select: none;    -o-user-select: none;    user-select: none;}

/*.bal-beforePosition {   background: #121212;    color: #fff;    left: 0;    pointer-events: none;    border-radius: 0.2rem;    padding: 2px 10px; } 
.bal-afterPosition {right: 0; background: #121212;    color: #fff;    pointer-events: none;    border-radius: 0.2rem;    padding: 2px 10px;}*/
.bal-beforePosition {left: 0;  padding: 2px 10px; color: #fff;  pointer-events: none;   } 
.bal-afterPosition { right: 0;  padding: 2px 10px; color: #fff;    pointer-events: none;  }

.beforeLabel {    position: absolute;    bottom: 0;    margin: 1rem;    font-size: 1em;    -webkit-user-select: none;    -khtml-user-select: none;    -moz-user-select: none;    -o-user-select: none;    user-select: none; }
.afterLabel {    position: absolute;    bottom: 0;    margin: 1rem;    font-size: 1em;    -webkit-user-select: none;    -khtml-user-select: none;    -moz-user-select: none;    -o-user-select: none;    user-select: none; }

.bal-handle { position: absolute;   height: 41px;    width: 41px;        left: 50%;    top: 50%;    margin-left: -20px;    margin-top: -21px;
    border: 2px solid #fff;    border-radius: 1000px;    z-index: 20;    pointer-events: none;    box-shadow: 0 0 10px rgb(12, 12, 12);
}

.handle-left-arrow, .handle-right-arrow { width: 0;    height: 0;    border: 6px inset transparent;    position: absolute;    top: 50%;    margin-top: -6px; }
.handle-left-arrow {    border-right: 6px solid #fff;    left: 50%;    margin-left: -17px; }
.handle-right-arrow {    border-left: 6px solid #fff;    right: 50%;    margin-right: -17px;}

.bal-handle::before {    bottom: 50%;    margin-bottom: 20px;    box-shadow: 0 0 10px rgb(12, 12, 12); }
.bal-handle::after {    top: 50%;    margin-top: 20.5px;    box-shadow: 0 0 5px rgb(12, 12, 12);}
.bal-handle::before, .bal-handle::after {    content: " ";    display: block;    width: 2px;    background: #fff;    height: 9999px;
    position: absolute;    left: 50%;    margin-left: -1.5px;}