@font-face {
    font-family: 'Montserrat';
    src: url(../assets/font/Montserrat-Medium.ttf) format('truetype');
    font-weight: 500;
}

@font-face {
    font-family: 'Montserrat';
    src: url(../assets/font/Montserrat-SemiBold.ttf) format('truetype');
    font-weight: 600;
}

@font-face {
    font-family: 'Montserrat';
    src: url(../assets/font/Montserrat-Bold.ttf) format('truetype');
    font-weight: 700;
}

:root {
    /* font-family */
    --drs-font-primary: 'Montserrat', sans-serif;
    --drs-font-secondary: 'TT Hoves Pro', 'sans-serif';

    /* font-weight */
    --drs-font-regular: 400;
    --drs-font-medium: 500;
    --drs-font-bold: 600;
    --drs-font-extra-bold: 700;

    /* text font sizes */
    --drs-text-xsm: 0.625rem;
    --drs-text-sm: 0.75rem;
    --drs-text-md: 0.875rem;

    /* line height */
    --drs-text-lh-base: 140%;
    --drs-text-lh-sm: 1rem;
    --drs-text-lh-md: 1.5rem;
    --drs-text-lh-lg: 2rem;

    /* headings */
    --drs-heading-xsm: 1rem;
    --drs-heading-sm: 1.25rem;
    --drs-heading-md: 1.5rem;
    --drs-heading-lg: 1.75rem;
    --drs-heading-xl: 2rem;
    --drs-heading-xxl: 2.5rem;

    --drs-heading-font: var(--drs-font-secondary);
    --drs-heading-lh: var(--drs-text-lh-base);
    --drs-heading-color: var(--drs-neutral-24);

    /* colors */
    --drs-primary-72: #aab5bd;
    --drs-primary-65: #7E99B4;
    --drs-primary-60: #376de1;
    --drs-primary-50: #005596;
    --drs-primary-40: #004664;
    --drs-primary-32: #0b3a52;

    --drs-success-100: #f6ffe0;
    --drs-success-97: #b0f500;
    --drs-success-70: #00cd50;
    --drs-success-50: #007864;
    --drs-success-30: #004d40;

    --drs-neutral-white: #ffffff;
    --drs-neutral-98: #fafafa;
    --drs-neutral-95: #f1f1f1;
    --drs-neutral-90: #e6e6e6;
    --drs-neutral-80: #cccccc;
    --drs-neutral-59: #969696;
    --drs-neutral-40: #666666;
    --drs-neutral-24: #3d3d3d;

    --drs-warning-96: #fff9eb;
    --drs-warning-70: #fecf67;
    --drs-warning: #fdb81e;
    --drs-warning-40: #ca8c02;

    --drs-error-96: #fcedee;
    --drs-error-60: #e34f54;
    --drs-error-50: #cd2026;
    --drs-error-40: #b01c21;

    --drs-input-height: 40px;
    --side-margin: 0 min(10%, 120px);
}

*,
::after,
::before {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--drs-neutral-95);
    font-family: var(--drs-font-primary);
    font-weight: var(--drs-font-regular);
}

main {
    margin: var(--side-margin);
    line-height: 1.5;
}

.description {
    margin: 0 0 24px;
    font-weight: var(--drs-font-regular);
    color: var(--drs-neutral-24);
}

.create p {
    margin: 1rem 0 0;
}

#api .heading h1 {
    color: var(--drs-primary-50);
    font-size: var(--drs-heading-sm);
    line-height: var(--drs-text-lh-md);
    margin: 0
}

#api {
    width: 450px;
    border-radius: 4px;
    padding: 24px;
    background-color: var(--drs-neutral-white);
    border: 1px solid rgba(130, 145, 154, 0.2);
    box-shadow:
            0 1px 3px 0 rgba(0, 0, 0, 0.2),
            0 2px 1px 0 rgba(0, 0, 0, 0.12),
            0 1px 1px 0 rgba(0, 0, 0, 0.14);

}

#api button {
    width: 100%;
}

#api #attributeList > ul {
    margin: 0;
    padding: 0;
}

#api #attributeList > ul > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#api .entry-item,
#api .attrEntry {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
}

#api .heading,
#api .entry-item,
#api .attrEntry {
    margin-bottom: 24px;
}

#api #forgotPassword {
    margin-top: 12px
}

#api #form-error {
    margin-bottom: 24px;
}

#api .buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (max-width: 768px) {
    html {
        font-size: var(--drs-text-md);
    }
    #api {
        width: 100%;
    }
}

#api .g-recaptcha-response-toms_li { display:none; }

#recaptcha {
    margin: 15px auto !important;
    width: auto !important;
    height: auto !important;
    text-align: -webkit-center;
    text-align: -moz-center;
    text-align: -o-center;
    text-align: -ms-center;
}