/*---swiper---*/

/*---bullet control bar--- Peter*/
.control-bar {
    position: absolute;
    z-index: 2;
    top: auto;
    right: -10%;
    bottom: 10px;
    left: 0;
    margin: inherit;
    padding-top: 10px;
    height: 40px;
    margin-bottom: 5px;
}

.control-bar {
    position: absolute;
    margin: auto;
}

.control-button,
.control-pagination {
    /* position: relative;
    float: left; */

}

.control-button {
    width: 40%;
    padding-right: 20px;

}

/*---Play Stop button Position---Peter*/
.swiper-button {
    /* background-color: transparent;
    box-sizing: border-box;
    position: relative;
    float: right; */

}

.home_banner_swiper .swiper-pagination {
    /* background-color: rgba(0, 0, 0, 1); */
    border-radius: 13px;
    top: -1px;
    height: 24px;
    position: relative;
    margin-bottom: 0;
    padding-top: 6px;
    align-items: center;
    justify-content: center;
    /*margin: auto;*/
    /*height: auto;*/
    /*text-align: match-parent;*/
    /*-webkit-tap-highlight-color: rgba(0, 0, 0, 0);*/
   
}


/*---Adding focus for when tabbing----20220310*/
.swiper-button:focus-visible {
    /* border-color: #410001; */
    outline: 5px solid ;
    background-color: #888484cc;
    opacity: 1;
    /* box-shadow: 0 0 0 2px #410001 inset; */
}

.swiper-pagination-bullet.swiper-pagination-bullet-active:focus-visible {
    background: #000000;
}
/* .swiper-pagination-bullet.swiper-pagination-bullet-active:focus-visible {
    background: #00b7f7;
} */

/*---End---20220310*/

@keyframes grow {
    from {
        box-shadow: 0px 0px 1em #000;
    }
    to {
        box-shadow: 0px 0px 3em #000;
    }
}

/*---Adding shadow on swiper-bullet----20220305*/
.home_banner_swiper .swiper-pagination-bullet {
    background: #fff;
    width: 12px;
    height: 12px;
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin: 0px 7px 0.5em;
    transition: background-color 100ms, color 100ms;
    opacity: 1;
    border-radius: 100%;
    border: 1px solid;
    /* opacity: 0.5; */
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
    background-color: #52a3fe;
}

.swiper-pagination-bullet:focus-visible {
    outline: 5px solid #fff;
    background-color: #888484cc;
    opacity: 1;
}

/*!*---bottom slider---*!*/

/*!*---Add-img-gradient_Peter---*!*/
.img-gradient {
    width: 100%;
    width: 100%;
}

.img-gradient::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /*background: linear-gradient(360deg, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255,0) 30%)*/
}

.uploadedImage {
    width: 100%;
}

.swiper-button-next:focus-visible, .swiper-button-prev:focus-visible {
    outline: 3px solid #ffffff;
    opacity: 1.0;
}

.home_banner_swiper .swiper-button-play{
    /*
	width: 24px;
    height: 24px;
    border-style: solid;
    border-width: 12px 0 12px 18px;
    border-color: transparent transparent transparent #887755;
    display: none;    
    */
    width: 24px;
    height: 24px;
    background-image: url(/images/border_play_dark.png);
    background-size:25px;
    background-repeat:no-repeat;
    display: none;
	border-radius: 4px;
    box-shadow: 0px 0px 1px 1px #FFFFFF;
    background-color: #FFFFFF;
}

.home_banner_swiper .swiper-button-pause{
    /*
    width: 24px;
    height: 24px;
    border-style: double;
    border-width: 0px 0px 0px 18px;
    border-color: #887755;
    */
    width: 24px;
    height: 24px;
    background-image: url(/images/border_pause_dark.png);
    background-size:25px;
    background-repeat:no-repeat;
    border-radius: 4px;
    box-shadow: 0px 0px 1px 1px #FFFFFF;
    background-color: #FFFFFF;
}
/* SV johnosn START */

.home_banner_swiper .control-bar{
    inset: auto 0 20px;
    height: auto;
}
.home_banner_swiper .control-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    gap: 16px;
}
.home_banner_swiper .swiper-autoplay-control,
.home_banner_swiper .swiper-pagination{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 6px 18px;
    border-radius: 999px;
    background-color: #FFF;
    height: auto;  
    position: static;
    margin: 0;
}

.home_banner_swiper .swiper-pagination-bullet{
    width: 12px;
    height: 12px;
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin: 0;
    transition: background-color 100ms, color 100ms;
    opacity: 1;
    border-radius: 100%;
    border: 1px solid;
    color: #ee0000;
}   
.home_banner_swiper .swiper-pagination-bullet-active{
    background-color: currentColor;

}
.home_banner_swiper .swiper-autoplay-control{
    color: #ee0000;
    height: 24px;
    aspect-ratio: 1;
    padding: 0 0 0.125em;
    font-size: 16px;
}

.home_banner_swiper:not(.swiper-autoplay-disabled) .swiper-autoplay-control span:nth-child(1){
    display: none;

}
/* SV johnosn END */