.video-guide-button {
    display: flex;
    justify-content: center;
    align-content: center;
}

.video-guide-arrow-next {
    background-image: url(../../media/img/arrow-next-white.png);
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-repeat: no-repeat;
    background-position: center;
    height: 12%;
    width: 70%;
    margin: auto;
}

.video-guide-arrow-prev {
    background-image: url(../../media/img/arrow-back-white.png);
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-repeat: no-repeat;
    background-position: center;
    height: 12%;
    width: 70%;
    margin: auto;
}

.video-guide-xmark {
    color: #fff;
    padding: 0px;
    padding-bottom: 10px;
    font-size: 45px;
    display: flex;
    justify-content: flex-end;
    font-weight: 100;
    margin-left: auto;
}

.video-guide-page-number {
    margin: auto;
    display: flex;
    justify-content: center;
    vertical-align: middle;
    color: #fff;
    font-size: 12px;
}

.xmark-display {
    display: flex;
    align-items: flex-end;
    margin-left: 25px;
}

.modal-backdrop.show {
    opacity: 0.7 !important;
}

.paginate_button {
    margin-top: 0px !important;
}

@media (min-width:990.98px) {

    .pagination-li {
        display: inline;
        padding-left: 3px;
    }

    .pagination-ul {
        padding-left: 0px;
        margin-bottom: 0px;
        display: flex;
        justify-content: center;
    }
    .double-arrow-to-left-guide {
        margin-left: -30px;
    }

    .double-arrow-to-right-guide {
        margin-left: -30px;
    }


    .page-link {
        position: relative;
        display: block;
        color: #0d6efd !important;
        text-decoration: none;
        background-color: #fff;
        border: 1px solid #dee2e6;
        border-radius: 100%;
        border-top-left-radius: 2rem !important;
        border-bottom-left-radius: 2rem !important;
        border-top-right-radius: 2rem !important;
        border-bottom-right-radius: 2rem !important;
        display: flex;
        justify-content: center;
        width: 32.9px;
        height: 32px;
        align-items: center;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    #nextGuideArrow, #arrowToGuideLastSegmentArrow {
        display: flex;
        background: transparent;
        color: #fff;
        border: 0px;
        font-size: 40px;
    }

    #prevGuideArrow, #arrowToGuideFirstSegmentArrow {
        display: flex;
        background: transparent;
        color: #fff;
        border: 0px;
        font-size: 40px;
        margin-right: -3px;
    }

}

@media (max-width:990.98px) {

    #prevGuidePagination, #nextGuidePagination, #ArrowToGuideFirstSegment, #ArrowToGuideLastSegment {
        display: flex;
        vertical-align: middle;
    }
}

@media only screen and (max-width:575.98px) {
    .video-guide-arrow-next {
        background-image: url(../../media/img/arrow-next-white.png);
        background-repeat-x: no-repeat;
        background-repeat-y: no-repeat;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 5vw;
        height: 12%;
        width: 70%;
        margin: auto;
    }

    .video-guide-arrow-prev {
        background-image: url(../../media/img/arrow-back-white.png);
        background-repeat-x: no-repeat;
        background-repeat-y: no-repeat;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 5vw;
        height: 12%;
        width: 70%;
        margin: auto;
    }

    .video-guide-xmark {
        color: #fff;
        padding: 0px;
        padding-bottom: 10px;
        font-size: 5vw;
        display: flex;
        justify-content: flex-end;
        font-weight: 100;
        margin-left: auto;
    }

    .video-guide-page-number {
        margin: auto;
        display: flex;
        justify-content: center;
        vertical-align: middle;
        color: #fff;
        font-size: 3vw !important;
    }

    #videoGuideFirstRow {
        padding-bottom: 10px !important;
    }

    .page-link {
        border-radius: 100%;
        border-top-left-radius: 2rem !important;
        border-bottom-left-radius: 2rem !important;
        border-top-right-radius: 2rem !important;
        border-bottom-right-radius: 2rem !important;
        display: flex;
        justify-content: center;
        width: 10vw !important;
        height: 10vw !important;
        align-items: center;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    #nextGuideArrow, #ArrowToGuideLastSegmentArrow {
        display: flex;
        background: transparent;
        color: #fff;
        border: 0px;
        font-size: 9vw !important;
    }

    #prevGuideArrow, #ArrowToGuideFirstSegmentArrow {
        display: flex;
        background: transparent;
        color: #fff;
        border: 0px;
        font-size: 9vw !important;
        margin-right: -3px;
    }

    .double-arrow-to-left-guide{
        margin-left: -3.5vw;
    }

    .double-arrow-to-right-guide{
        margin-right: -3.5vw;
    }

    .pagination-li {
        display: inline;
        padding-left: 3px;
    }

    .pagination-ul {
        padding-left: 0px;
        margin-bottom: 0px;
        display: flex;
        justify-content: center;
    }

}

#videoGuideSelect {
    display: flex;
    align-items: center;
    align-self: center;
}
@media (min-width:576px) and (max-width:990.98px) {

    .video-guide-arrow-next {
        background-image: url(../../media/img/arrow-next-white.png);
        background-repeat-x: no-repeat;
        background-repeat-y: no-repeat;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 5vw;
        height: 12%;
        width: 70%;
        margin: auto;
    }

    .video-guide-arrow-prev {
        background-image: url(../../media/img/arrow-back-white.png);
        background-repeat-x: no-repeat;
        background-repeat-y: no-repeat;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 5vw;
        height: 12%;
        width: 70%;
        margin: auto;
    }

    .video-guide-xmark {
        color: #fff;
        padding: 0px;
        padding-bottom: 10px;
        font-size: 5vw;
        display: flex;
        justify-content: flex-end;
        font-weight: 100;
        margin-left: auto;
    }

    .video-guide-page-number {
        margin: auto;
        display: flex;
        justify-content: center;
        vertical-align: middle;
        color: #fff;
        font-size: 2.5vw !important;
    }

    .page-link {
        border-radius: 100%;
        border-top-left-radius: 2rem !important;
        border-bottom-left-radius: 2rem !important;
        border-top-right-radius: 2rem !important;
        border-bottom-right-radius: 2rem !important;
        display: flex;
        justify-content: center;
        width: 6vw !important;
        height: 6vw !important;
        align-items: center;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    #nextGuideArrow, #ArrowToGuideLastSegmentArrow {
        display: flex;
        background: transparent;
        color: #fff;
        border: 0px;
        font-size: 5vw !important;
    }

    #prevGuideArrow, #ArrowToGuideFirstSegmentArrow {
        display: flex;
        background: transparent;
        color: #fff;
        border: 0px;
        font-size: 5vw !important;
        margin-right: -3px;
    }

    .double-arrow-to-left-guide {
        margin-left: -1.75vw;
    }

    .double-arrow-to-right-guide {
        margin-left: -1.75vw
    }

    .pagination-li {
        display: inline;
        padding-left: 3px;
    }

    .pagination-ul {
        padding-left: 0px;
        margin-bottom: 0px;
        display: flex;
        justify-content: center;
    }

    #prevGuidePagination {
        display: flex;
        vertical-align: middle;
    }

    #nextGuidePagination {
        display: flex;
        vertical-align: middle;
    }

    #videoGuideSelect {
        display: flex;
        align-items: center;
    }
}

.docs-icon-list {
    width: 18px;
    height: 22px;
}

.copy-link {
    width: 22px;
    height: 22px;
    cursor: pointer;
}

#videoGuideFirstRow {
    padding: 0px;
    padding-bottom: 20px;
    padding-left: 0px;
    margin-bottom: 0px;
    display: flex;
    justify-content: center;
}