.template-picker-wrapper {
    background-color: rgba(43, 44, 45, 0.89);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;

    &.show {
        display: block;
        animation: fadeIn .3s;

        @keyframes fadeIn {
            from {opacity: 0;}
            to {opacity: 1;}
        }
    }

    .close-templates {
        color: #58595B;
        background: #fff;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 34px;
        top: 34px;
        cursor: pointer;
        z-index: 1000;

        .fa {
            font-size: 24px;
        }
    }


    .template-img-wrapper {
        background: #fff;

        .template-img {
            height: 560px;

            img {
                max-height: 100%;
            }
        }

        .template-actions {
            height: 90px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }



    .template-info {
        color: #fff;
        text-align: center;
        margin-top: 28px;

        .template-title {
            font-size: 24px;
            line-height: 32px;
            font-weight: 600;
        }

        .template-description {
            font-size: 18px;
            line-height: 27px;
            margin-top: 8px;
        }
    }
}

.selected-template {
    max-width: 80%;
    margin: 0 auto;
}

@media screen and (max-width: 1024px) {
    .close-templates {
        color: #fff !important;
        background: transparent !important;
        right: 5px !important;
        top: 3px !important;
    }

    .template-picker-wrapper {
        .template-img-wrapper {
            .template-img {
                height: auto !important;
                min-height: 56vh;
            }
        }
    }
}
