/*CSS for carousel*/
    .ag-carousel-wrapper{
        width: 100%;   
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .ag-carousel-overflow{
        overflow:hidden;
        display: flex;   
    }
   .ag-carousel-frame{
       display:flex;
       flex-wrap: nowrap;
       width: 100%;
       transition:transform 400ms ease;
       will-change: transform;
   }
   .ag-carousel-slide{
       width:100%;
       min-width:  100%;
       overflow: hidden;
       display: flex;
       justify-content: center;
       align-items: stretch;
   }
   .ag-carousel-slide>*{
       overflow-y: auto;
       overflow-x: hidden;
       max-width: 100%;
   }

   .ag-carousel-pebbles{
        display:flex;
        justify-content: center;
        align-items:center;
        padding: 12px 0px;
    }
    /*CSS for pebbles*/
    .ag-pebble{
        display:inline-flex;
        height: 6px;
        width: 6px;
        background-color: #333;
        border-radius:50%;
        transition: transform 100ms ease;
    }

    .ag-pebble.active{
        transform: scale(2);
    }

    .ag-pebble:not(:first-child), .ag-pebble:not(:last-child){
        margin: 0px 5px
    }
    /*CSS for carousel toolbox*/
    .ag-carousel-tools{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 5px 0px;
        position: relative;
    }
    .ag-carousel-tools>*:not(:first-child), .ag-carousel-tools>*:not(:last-child){
        margin: 0px 5px;
    }
    span.ag-tool-spacer {
        flex:  1 1 auto;
    }
    /*CSS for raw FA*/
    .ag-fa-raw{
        height:16px;
        width:16px;
        display: block;
    }
    .ag-carousel-overflow:hover~.ag-carousel-tools .ag-interval-progress{
        animation-play-state: paused;
    }
    /*CSS for slide width*/
    .ag-carousel-slide[slideWidth="100"]{
        width: 100%;
        min-width: 100%;
    }
    .ag-carousel-slide[slideWidth="50"]{
        width: 50%;
        min-width: 50%;
    }
    .ag-carousel-slide[slideWidth="33"]{
        width: 33.33%;
        min-width: 33.33%;
    }
    .ag-carousel-slide[slideWidth="25"]{
        width: 25%;
        min-width: 25%;
    }

    /*tool wrapper*/
    .ag-tool-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    /*playstatebnt*/
    [playstate="play"]>.play, [playstate="pause"]>.pause {
        display: flex;
    }
    
    [playstate="pause"]>.play, [playstate="play"]>.pause {
        display:  none;
    }
    /*progress line*/
    .inteval-progress-line{
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        border-bottom: 2px solid transparent;
        margin: 0px!important;
        transform: scalex(0);
        transform-origin: left;
    }

    @keyframes progressLine {
        to {transform: scalex(1)}
    }