:root {
    --appPrimaryColor: #3b61eb;
    --appPrimaryBg: #ebeff7;
    --WmGridBorderColor: #f5f6f8;
    --wmGray1: #8d97ae;
    --wmGray2: #6d81a6;
    --wmGray3: #f4f6fb;
    --wmTint1: #8d97ae;
    --wmTextColor: #2f426c;
    --wmUnselectedColor: #7680a3;
    --wmSuccessColor: #70d8c9;
    --wmWarningColor: #eaab00;    
    --wmErrorColor: #eb3232;
}

/* Proxima Nova - Regular */
@font-face {
    font-family: "Proxima Nova";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("./fonts/proximanova-regular-webfont.woff2") format("woff2"), url("./fonts/proximanova-regular-webfont.woff") format("woff");
}

h1, h2 {
    color: var(--wmGrayUltraDark);
    font-family: var(--wmFontPrimary);
    font-weight: 600;
    margin: 0;
}

h2 {
    font-size: 20px;
    line-height: 28px;
}

h1 {
    font-size: 24px;
    line-height: 32px;
}

body {
    align-items: center;
    background: #f0f3f9;
    display: flex;
    height: 100vh;
    width: 100vw;
    gap: 40px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
}

.container, .layout {
    background: var(--LS-Color-Bg-secondary, #fff);
    border-radius: var(--ls-corner-radus-generation-cr-4012, 12px);
    box-shadow: 0 36px 52px 0 rgba(47, 61, 83, .11);
    display: flex;
    max-height: calc(100vh - 80px);
    max-width: 100%;
}

.container {
    transition: opacity 0.2s;
    opacity: 0;
    flex-direction: column;
    gap: var(--ls-spacers-generation-sp-4016, 16px);
    height: 902px;
    padding: var(--ls-spacers-generation-sp-3012, 12px) var(--ls-spacers-generation-sp-6024, 24px);
    width: 1200px;
}

.container.visible {
    opacity: 1;
}

.container, .img-frame {
    align-items: center;
    display: flex;
    justify-content: center;
}

.container.visible {
    opacity: 1;
}

.completed-template.container, .img-frame  {
    gap: 70px;
}

.img-frame {
    align-items: center;
    display: flex;
    flex-shrink: 0;        
    height: 220px;    
    width: 220px;
}

.error-template .img-frame  {
    padding: 10px 57px 0px 20px;
}

.error-template img {
    flex-shrink: 0;
    height: 200px;
    width: 143px;
}

.message-frame {
    gap: 20px;
}

.message-frame, .message-frame-header {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.message-frame-header {
    padding: 0 var(--ls-spacers-generation-sp-6024, 24px);
}

.completed-template .message-frame-header  {
    gap: 8px;
}

.header-text {
    flex: 1 0 0;
    font-family: Poppins;
    font-size: 18px;
    font-weight: 600;
}

.body-text, .header-text {
    color: var(--LS-Color-Text-On-light-primary, #2f426c);
    text-align: center;
    margin-bottom: 5px;
}

.body-text {
    font-family: 'Proxima Nova';
    font-size: 16px;
    font-weight: 300;
}