/* Lägg eventuell projektspecifik CSS här. OBS! Kontrollera först om CSS:en finns/borde finnas i DesignLib! */
.hv-mud-intl-tel-input-inside-mud-field {
    /* Workaround för att minska höjd på inputfält */
    margin-bottom: 0px;
}

.iti > input[type=tel] {
    background-color: transparent;
}

/* CSS värde som behövs för att bilden ska visas korrekt enligt Cropper.Blazor */
.cropper-face {
    opacity: 0.4 !important;
}

.img-container.cropper-face-circle .cropper-container .cropper-crop-box .cropper-face {
    background: radial-gradient(circle, white 70%, #000 0%); /* Transparent circle, black background */
    opacity: 0.5 !important;
}

.big-img {
    max-height: 20rem;
    /* This rule is very important, please don't ignore this */
    max-width: 100%;
}
.cropper-face-circle{
    background-color: black;
    filter: hue-rotate(80);
}

.img-container {
    max-height: 18.5rem;
    width: 100%;
}

/* Means that the cropped image will take up 100% of the width of its containing element */
.cropped-img-container {
    width: 100%;
}

.cropper-example {
    max-height: 300px;
    width: 100%;
}

.img-example-preview {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.img-example-preview > ::deep img {
    max-width: 100%;
}
.cropper-view-box{
    outline: none !important;
}

/* Slut på Cropper.Blazor css*/