.custom-loader-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

    /*content wrapper*/
    .custom-loader-container .slider-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 5px;
        gap: 5px;
    }
    
        /* controls */
        .custom-loader-container .controls{
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            width: 20px;
            height: 100%;
            transition: all .3s ease-in-out;
            cursor: pointer;
        }
        .custom-loader-container .controls:hover{
            filter: brightness(2);
        }
        .custom-loader-container .controls.inactive{
            opacity: 0;
            pointer-events: none;
        }
    
        /* slider */
        .custom-loader-container .slider{
            display: block;
            width: 100%;
            overflow: hidden;
        }
    
        .slider .slider-items{
            display: flex;
            justify-content: flex-start;
            position: relative;
            width: max-content;
            padding: 0;
            margin: 0;
            transition: all .5s ease-in-out;
        }
        
    
    /* navigation */
    .slider-navigation .navigation-points{
        display: inline-flex;
        align-items: center;
        text-align: center;
        padding: 0;
        margin: 0;
        gap: 5px;
    }
    
    .navigation-points .nav-dot{
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #c3c3c3;
        cursor: pointer;
        transition: all .5s ease;
    }
    
    .navigation-points .nav-dot.active{
        background: white;
        width: 8px;
        height: 8px;
    }
    
    .navigation-points .nav-dot.hide {
        display: none; /* drops them completely from the visual flow */
    }