body {
    --bg-modal: #fff;
    --bg-modal-header: #f6f9f9;
    --cl-modal-black: #000;
    --cl-modal-dark: #34475a;
    --img-modal-gray: none
}

body.theme-dark {
    --bg-modal: #3b3b3b;
    --bg-modal-header: #3b3b3b;
    --cl-modal-black: hsla(0, 0%, 100%, .87);
    --cl-modal-dark: hsla(0, 0%, 100%, .87);
    --img-modal-gray: grayscale(1) invert(1) brightness(1.2)
}

@media (prefers-color-scheme:dark) {
    body {
        --bg-modal: #3b3b3b;
        --bg-modal-header: #3b3b3b;
        --cl-modal-black: hsla(0, 0%, 100%, .87);
        --cl-modal-dark: hsla(0, 0%, 100%, .87);
        --img-modal-gray: grayscale(1) invert(1) brightness(1.2)
    }

    body.theme-light {
        --bg-modal: #fff;
        --bg-modal-header: #f6f9f9;
        --cl-modal-black: #000;
        --cl-modal-dark: #34475a;
        --img-modal-gray: none
    }
}

.kgmModal {
    font-size: 16px;
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, .6);
    padding: 1rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center
}

@media (min-width:768px) {
    .kgmModal {
        top: 25px;
        right: 25px;
        width: 320px;
        height: auto;
        background: transparent;
        padding: 0
    }

    .kgmModal.-full {
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);
        padding: 1rem
    }
}

.kgmModal.-hide {
    visibility: hidden;
    opacity: 0;
    display: none
}

.kgmModal .kgmModal-close {
    display: -ms-flexbox;
    display: flex;
    margin-left: auto;
    margin-right: unset;
    margin-bottom: -5px;
    color: #909090;
    width: 24px;
    height: 24px;
    position: relative;
    right: -10px;
    top: -10px;
    cursor: pointer;
    border: none;
    background: transparent;
    background-image: url("data:image/svg+xml,%3Csvg id='close_black_24dp_7_' data-name='close_black_24dp (7)' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath id='Path_1417' data-name='Path 1417' d='M0,0H24V24H0Z' fill='none'/%3E%3Cpath id='Path_1418' data-name='Path 1418' d='M18.3,5.71a1,1,0,0,0-1.41,0L12,10.59,7.11,5.7A1,1,0,0,0,5.7,7.11L10.59,12,5.7,16.89A1,1,0,0,0,7.11,18.3L12,13.41l4.89,4.89a1,1,0,0,0,1.41-1.41L13.41,12,18.3,7.11A1,1,0,0,0,18.3,5.71Z' fill='%23909090'/%3E%3C/svg%3E%0A")
}

.kgmModal .kgmModal-close:hover {
    filter: opacity(.6)
}

.kgmModal *, .kgmModal :after, .kgmModal :before {
    box-sizing: border-box
}

.kgmModal .button, .kgmModal button, .kgmModal input[type=submit] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    box-shadow: none;
    transition: all .2s ease;
    position: relative;
    width: 100%;
    height: 40px;
    margin: .25rem 0;
    padding: 0;
    border-radius: 6px;
    background-color: #fff;
    text-align: center;
    border: 1px solid #007aff;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 400;
    color: #007aff;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center
}

.kgmModal .button:hover, .kgmModal button:hover, .kgmModal input[type=submit]:hover {
    background-color: #f2f2f2;
    color: #007aff
}

.kgmModal .button.-disabled, .kgmModal button.-disabled, .kgmModal input[type=submit].-disabled {
    background-color: #f0efef;
    border: 1px solid #f0efef;
    color: #a2a2a2
}

.kgmModal .button.-disabled:hover, .kgmModal button.-disabled:hover, .kgmModal input[type=submit].-disabled:hover {
    background-color: #f0efef
}

.kgmModal .button.-primary, .kgmModal button.-primary, .kgmModal input[type=submit].-primary {
    background-color: #007aff;
    border: 1px solid #007aff;
    color: #fff;
    font-weight: 700
}

.kgmModal .button.-primary:hover, .kgmModal button.-primary:hover, .kgmModal input[type=submit].-primary:hover {
    background-color: #006ee6
}

.kgmModal .button>.icon, .kgmModal button>.icon, .kgmModal input[type=submit]>.icon {
    width: 24px;
    height: 24px;
    margin-right: 10px
}

.kgmModal-block {
    position: relative;
    border-radius: 8px;
    background: var(--bg-modal);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    padding: 1.375em;
    overflow: hidden
}

@media (min-width:500px) {
    .kgmModal-block {
        width: 320px
    }
}

.kgmModal-header {
    position: relative;
    background: var(--bg-modal-header);
    margin: -1.375em -1.375em 0;
    padding: 1.375em 1.375em 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center
}

.kgmModal-body {
    position: relative;
    padding: 0
}

.kgmModal-body>p {
    margin: 1.375em 0;
    font-family: Roboto, sans-serif;
    font-size: .875em;
    font-weight: 400;
    line-height: 1.4;
    color: var(--cl-modal-black)
}

.kgmModal-title {
    font-size: 1.25em;
    font-weight: 700;
    line-height: 1;
    color: var(--cl-modal-black)
}

.kgmModal-id, .kgmModal-title {
    position: relative;
    margin: .125em 0;
    font-family: Roboto, sans-serif
}

.kgmModal-id {
    font-size: .875em;
    font-weight: 400;
    line-height: 1.25em;
    color: var(--cl-modal-dark)
}

.kgmModal-img {
    position: relative;
    width: 153px;
    height: 110px;
    margin: .75em 0 0
}

.kgmModal-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain
}

.kgmModal-footer {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 -.25em
}

.kgmModal-footer .form-row {
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 0 .25em
}

.kgmModal-footer .button {
    text-decoration: none;
    vertical-align: baseline;
    font-family: Roboto, sans-serif;
    font-weight: 700;
    line-height: 1.4
}

.kgmModal-footer .button, .kgmModal-footer .button:hover {
    background: var(--bg-modal)
}