/** ---------------------------------------------------------------------------
	*											CropImage Plugin stylesheet
	* ---------------------------------------------------------------------------
	* Version: 1.0.0
	* Author: Fabrice K.E.M
	* Created: 10/06/2018
	* Updated: 20/12/2022
	*/
.R-container, .R-container canvas, .R-container div {
    position: absolute;
    margin: 0
}

.R-container {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url('./transgraphic.png');
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none
}

    .R-container.custom {
        background: none
    }

    .R-container .R-error {
        left: 0;
        right: 0;
        padding: 31% 20% 0;
        font-family: tahoma;
        text-align: center;
        color: rgb(230, 230, 230);
        font-size: 1.1em
    }

    .R-container .R-adapter {
        overflow: hidden
    }

    .R-container .R-cover {
        z-index: 1;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0
    }

    .R-container .R-cropper {
        z-index: 2;
        background: rgba(255, 255, 255, .9);
        border: 2px solid rgba(255, 255, 255, .9)
    }

        .R-container .R-cropper .R-grid {
            width: 100%;
            height: 100%;
            overflow: hidden
        }

        .R-container .R-cropper.circle, .R-container .R-cropper.circle .R-grid, .R-container .R-cropper.circle canvas {
            border-radius: 50%
        }

.R-col-1, .R-col-2, .R-col-3 {
    z-index: 2;
    width: 33.33333%;
    height: 100%
}

.R-raw-1, .R-raw-2, .R-raw-3 {
    z-index: 2;
    width: 100%;
    height: 33.33333%
}

.R-col-1 {
    border-right: 1px dashed rgba(255, 255, 255, .4)
}

.R-col-2 {
    left: 33.53333%;
    border-right: 1px dashed rgba(255, 255, 255, .4)
}

.R-col-3 {
    left: 67.16666%
}

.R-raw-1 {
    border-bottom: 1px dashed rgba(255, 255, 255, .4)
}

.R-raw-2 {
    top: 33.53333%;
    border-bottom: 1px dashed rgba(255, 255, 255, .4)
}

.R-raw-3 {
    top: 67.16666%
}

.R-corner-lb, .R-corner-lt, .R-corner-rb, .R-corner-rt {
    z-index: 3;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, .5);
    transition: 300ms
}

.R-corner-lt {
    left: 5px;
    top: 5px;
    border-width: 3px 0 0 3px
}

.R-corner-rt {
    right: 5px;
    top: 5px;
    border-width: 3px 3px 0 0
}

.R-corner-rb {
    right: 5px;
    bottom: 5px;
    border-width: 0 3px 3px 0
}

.R-corner-lb {
    left: 5px;
    bottom: 5px;
    border-width: 0 0 3px 3px
}

.R-container .R-cropper.circle .R-corner-lt {
    left: 18%;
    top: 18%;
    border-width: 3px 0 0 3px;
    border-radius: 10px 0 0 0
}

.R-container .R-cropper.circle .R-corner-rt {
    right: 18%;
    top: 18%;
    border-width: 3px 3px 0 0;
    border-radius: 0 10px 0 0
}

.R-container .R-cropper.circle .R-corner-rb {
    right: 18%;
    bottom: 18%;
    border-width: 0 3px 3px 0;
    border-radius: 0 0 10px 0
}

.R-container .R-cropper.circle .R-corner-lb {
    left: 18%;
    bottom: 18%;
    border-width: 0 0 3px 3px;
    border-radius: 0 0 0 10px
}

.R-corner-lt:hover .R-corner-lt:active {
    border-width: 3px 0 0 3px
}

.R-corner-rt:active, .R-corner-rt:hover {
    border-width: 3px 3px 0 0
}

.R-corner-rb:active, .R-corner-rb:hover {
    border-width: 0 3px 3px 0
}

.R-corner-lb:active, .R-corner-lb:hover {
    border-width: 0 0 3px 3px
}

.R-corner-lb:active, .R-corner-lb:hover, .R-corner-lt:active, .R-corner-lt:hover, .R-corner-rb:active, .R-corner-rb:hover, .R-corner-rt:active, .R-corner-rt:hover {
    width: 25px;
    height: 25px
}

.R-side-bottom, .R-side-left, .R-side-right, .R-side-top {
    z-index: 4;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, .9);
    background: rgb(220, 220, 220);
    border-radius: 50%;
    transition: 300ms
}

.R-side-left {
    left: -10px;
    top: 47%
}

.R-side-top {
    left: 46.5%;
    top: -10px
}

.R-side-right {
    right: -10px;
    top: 47%
}

.R-side-bottom {
    left: 46.5%;
    bottom: -10px
}

    .R-side-bottom:active, .R-side-bottom:hover, .R-side-left:active, .R-side-left:hover, .R-side-right:active, .R-side-right:hover, .R-side-top:active, .R-side-top:hover {
        width: 20px;
        height: 20px;
        box-shadow: 0 0 0 10px rgba(230, 230, 230, .3)
    }

.R-side-left:hover {
    left: -13px;
    top: 46.5%
}

.R-side-top:hover {
    left: 46%;
    top: -13px
}

.R-side-right:hover {
    right: -13px;
    top: 46.5%
}

.R-side-bottom:hover {
    left: 46%;
    bottom: -13px
}

@media (max-width: 767px) {
}

@media (min-width: 768px) and (max-width: 991px) {
}

@media (min-width: 992px) and (max-width: 1199px) {
}

@media (min-width: 1200px) {
}