/*
Table of contents
    A Components
        A.1 Custom form
            A.1.1 Custom form - checkbox
            A.1.2 Custom form - checkbox - disabled & readonly
            A.1.3 Custom form - input & textarea
            A.1.4 Custom form - input & textarea - disabled & readonly
        A.2 Custom alert
        A.3 Button
            A.3.1 Button - icon
            A.3.2 Button - primary
            A.3.3 Button - primary outline
            A.3.4 Button - dark
            A.3.5 Button - dark outline
            A.3.6 Button - light
            A.3.7 Button - disabled
        A.4 Labels
            A.4.1 Custom label
                A.4.1.1 Custom label - default
                A.4.1.2 Custom label - outline
                A.4.1.3 Custom label - transparent
            A.4.2 Finding label
            A.4.3 Exploit label
            A.4.4 Exploit card
        A.5 Code snippet
        A.6 Custom badge
        A.7 Custom tooltip
    B Utilities
        B.1 Color styles
            B.1.1 Color styles - background
            B.1.2 Color styles - color
        B.2 Typography
            B.2.1 Typography - font size
            B.2.2 Typography - font weight
            B.2.3 Typography - text align
            B.2.4 Typography - vertical align
            B.2.5 Typography - text transform
            B.2.6 Typography - text decoration

        B.3 Layout
            B.3.1 Layout - height
            B.3.2 Layout - width
            B.3.3 Layout - flexbox
            B.3.4 Layout - padding
            B.3.5 Layout - margin
            B.3.6 Layout - positioning
*/

/* A Components */
/* A.1 Custom form */
.custom-form {
    --text-dark: #343A40;
    --text-muted: #808080;
    --text-disabled: #BFCCDE;

    --input-color: #BFCCDE;
    --input-background: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    --input-border: inset 0 0 0 1px var(--input-color);
    --input-border-none: inset 0 0 0 0 var(--input-color);
    --input-border-radius: 4px;
    --input-hover: inset 0 0 0 2px var(--input-color);
    --input-focus: 0 0 0 3px var(--input-color);
    --input-disabled: #F2F5F8;
}

/* A.1.1 Custom form - checkbox */
.custom-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.custom-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.custom-checkbox label {
    display: flex;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-muted);
    margin-bottom: 0;
    cursor: pointer;
}

.custom-checkbox-lg label {
    line-height: 1.5;
}

.custom-checkbox label::before {
    content: "";
    height: 18px;
    width: 18px;
    margin-right: 6px;
    border-radius: var(--input-border-radius);
    -webkit-box-shadow: var(--input-background), var(--input-border);
    box-shadow: var(--input-background), var(--input-border);
    -webkit-transition: -webkit-box-shadow 150ms ease-in-out;
    transition: box-shadow 150ms ease-in-out;
}

.custom-checkbox-lg label::before {
    height: 20px;
    width: 20px;
}

.custom-checkbox input[type="checkbox"]:checked+label::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Pro";
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    color: var(--text-dark);
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-checkbox-lg input[type="checkbox"]:checked+label::before {
    font-size: 12px;
}

.custom-checkbox input[type="checkbox"]:hover+label::before {
    -webkit-box-shadow: var(--input-background), var(--input-hover);
    box-shadow: var(--input-background), var(--input-hover);
}

.custom-checkbox input[type="checkbox"]+label:focus::before,
.custom-checkbox input[type="checkbox"]+label:active::before,
.custom-checkbox input[type="checkbox"]:focus+label::before,
.custom-checkbox input[type="checkbox"]:active+label::before {
    outline: 0;
    -webkit-box-shadow: var(--input-background), var(--input-border-none), var(--input-focus);
    box-shadow: var(--input-background), var(--input-border-none), var(--input-focus);
}

/* A.1.2 Custom form - checkbox - disabled & readonly */
.custom-checkbox.disabled label,
.custom-checkbox input[type="checkbox"][disabled]+label,
.custom-checkbox input[type="checkbox"][disabled] {
    cursor: default;
}

.custom-checkbox input[type="checkbox"][readonly]+label::before {
    color: var(--text-dark);
    background: var(--input-disabled);
    -webkit-box-shadow: var(--input-border);
    box-shadow: var(--input-border);
}

.custom-checkbox input[type="checkbox"][readonly]+label:focus::before,
.custom-checkbox input[type="checkbox"][readonly]+label:active::before,
.custom-checkbox input[type="checkbox"][readonly]:focus+label::before,
.custom-checkbox input[type="checkbox"][readonly]:active+label::before {
    -webkit-box-shadow: var(--input-border-none), var(--input-focus);
    box-shadow: var(--input-border-none), var(--input-focus);
}

.custom-checkbox input[type="checkbox"][disabled]+label::before {
    color: var(--text-disabled);
    background: var(--input-disabled);
    -webkit-box-shadow: var(--input-border);
    box-shadow: var(--input-border);
}

/* A.1.3 Custom form - input & textarea */
.custom-input {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.custom-input label {
    display: flex;
    align-self: flex-start;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-muted);
    margin-bottom: 5px;
    cursor: pointer;
}

.custom-input input[type="email"],
.custom-input input[type="password"],
.custom-input input[type="text"],
.custom-input input[type="number"],
.custom-input textarea {
    min-height: 34px;
    width: 100%;
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-dark);
    background-color: #fff;
    background-image: none;
    padding: 6px 12px;
    border: none;
    border-radius: var(--input-border-radius) !important;
    -webkit-box-shadow: var(--input-background), var(--input-border) !important;
    box-shadow: var(--input-background), var(--input-border) !important;
    -webkit-transition: -webkit-box-shadow 150ms ease-in-out;
    transition: box-shadow 150ms ease-in-out;
}

.custom-input-lg input[type="email"],
.custom-input-lg input[type="password"],
.custom-input-lg input[type="text"],
.custom-input-lg input[type="number"],
.custom-input-lg textarea {
    min-height: 40px;
    font-size: 16px;
    padding: 7px 14px;
}

.custom-input input[type="email"]:hover,
.custom-input input[type="password"]:hover,
.custom-input input[type="text"]:hover,
.custom-input input[type="number"]:hover,
.custom-input textarea:hover {
    -webkit-box-shadow: var(--input-background), var(--input-hover) !important;
    box-shadow: var(--input-background), var(--input-hover) !important;
}

.custom-input input[type="email"]:focus,
.custom-input input[type="password"]:focus,
.custom-input input[type="text"]:focus,
.custom-input input[type="number"]:focus,
.custom-input textarea:focus {
    outline: 0;
    -webkit-box-shadow: var(--input-background), var(--input-border-none), var(--input-focus) !important;
    box-shadow: var(--input-background), var(--input-border-none), var(--input-focus) !important;
}

.custom-input input[type="email"]:-webkit-autofill,
.custom-input input[type="email"]:-webkit-autofill:hover,
.custom-input input[type="email"]:-webkit-autofill:focus,
.custom-input input[type="email"]:-webkit-autofill::first-line,
.custom-input input[type="password"]:-webkit-autofill,
.custom-input input[type="password"]:-webkit-autofill:hover,
.custom-input input[type="password"]:-webkit-autofill:focus,
.custom-input input[type="password"]:-webkit-autofill::first-line,
.custom-input input[type="text"]:-webkit-autofill,
.custom-input input[type="text"]:-webkit-autofill:hover,
.custom-input input[type="text"]:-webkit-autofill:focus,
.custom-input input[type="text"]:-webkit-autofill::first-line,
.custom-input input[type="number"]:-webkit-autofill,
.custom-input input[type="number"]:-webkit-autofill:hover,
.custom-input input[type="number"]:-webkit-autofill:focus,
.custom-input input[type="number"]:-webkit-autofill::first-line,
.custom-input textarea:-webkit-autofill,
.custom-input textarea:-webkit-autofill:hover,
.custom-input textarea:-webkit-autofill:focus,
.custom-input textarea:-webkit-autofill::first-line {
    /* font-family: inherit; */
    font-family: 'Inter', 'Lato', sans-serif;
    font-size: 13px !important;
    -webkit-text-fill-color: var(--text-dark);
}

.custom-input-lg input[type="email"]:-webkit-autofill,
.custom-input-lg input[type="email"]:-webkit-autofill:hover,
.custom-input-lg input[type="email"]:-webkit-autofill:focus,
.custom-input-lg input[type="email"]:-webkit-autofill::first-line,
.custom-input-lg input[type="password"]:-webkit-autofill,
.custom-input-lg input[type="password"]:-webkit-autofill:hover,
.custom-input-lg input[type="password"]:-webkit-autofill:focus,
.custom-input-lg input[type="password"]:-webkit-autofill::first-line,
.custom-input-lg input[type="text"]:-webkit-autofill,
.custom-input-lg input[type="text"]:-webkit-autofill:hover,
.custom-input-lg input[type="text"]:-webkit-autofill:focus,
.custom-input-lg input[type="text"]:-webkit-autofill::first-line,
.custom-input-lg input[type="number"]:-webkit-autofill,
.custom-input-lg input[type="number"]:-webkit-autofill:hover,
.custom-input-lg input[type="number"]:-webkit-autofill:focus,
.custom-input-lg input[type="number"]:-webkit-autofill::first-line,
.custom-input-lg textarea:-webkit-autofill,
.custom-input-lg textarea:-webkit-autofill:hover,
.custom-input-lg textarea:-webkit-autofill:focus,
.custom-input-lg textarea:-webkit-autofill::first-line {
    font-size: 16px !important;
}

.custom-input input[type="email"]::placeholder,
.custom-input input[type="email"]::-webkit-input-placeholder,
.custom-input input[type="password"]::placeholder,
.custom-input input[type="password"]::-webkit-input-placeholder,
.custom-input input[type="text"]::placeholder,
.custom-input input[type="text"]::-webkit-input-placeholder,
.custom-input input[type="number"]::placeholder,
.custom-input input[type="number"]::-webkit-input-placeholder,
.custom-input textarea::placeholder,
.custom-input textarea::-webkit-input-placeholder {
    color: var(--text-muted) !important;
    opacity: 1 !important;
}

/* A.1.4 Custom form - input & textarea - disabled & readonly */
.custom-input.disabled label {
    cursor: default;
}

.custom-input input[type="email"][readonly],
.custom-input input[type="password"][readonly],
.custom-input input[type="text"][readonly],
.custom-input input[type="number"][readonly],
.custom-input textarea[read-only] {
    color: var(--text-dark) !important;
    background-color: var(--input-disabled) !important;
    cursor: text;
    -webkit-box-shadow: var(--input-border) !important;
    box-shadow: var(--input-border) !important;
}

.custom-input input[type="email"][readonly]:focus,
.custom-input input[type="password"][readonly]:focus,
.custom-input input[type="text"][readonly]:focus,
.custom-input input[type="number"][readonly]:focus,
.custom-input textarea[read-only]:focus {
    -webkit-box-shadow: var(--input-border-none), var(--input-focus) !important;
    box-shadow: var(--input-border-none), var(--input-focus) !important;
}

.custom-input input[type="email"][disabled],
.custom-input input[type="password"][disabled],
.custom-input input[type="text"][disabled],
.custom-input input[type="number"][disabled],
.custom-input textarea {
    color: var(--text-disabled) !important;
    background-color: var(--input-disabled) !important;
    -webkit-box-shadow: var(--input-border) !important;
    box-shadow: var(--input-border) !important;
}

.custom-input input[type="email"][disabled]::placeholder,
.custom-input input[type="email"][disabled]::-webkit-input-placeholder,
.custom-input input[type="password"][disabled]::placeholder,
.custom-input input[type="password"][disabled]::-webkit-input-placeholder,
.custom-input input[type="text"][disabled]::placeholder,
.custom-input input[type="text"][disabled]::-webkit-input-placeholder,
.custom-input input[type="number"][disabled]::placeholder,
.custom-input input[type="number"][disabled]::-webkit-input-placeholder,
.custom-input textarea[disabled]::placeholder,
.custom-input textarea[disabled]::-webkit-input-placeholder {
    color: var(--text-disabled) !important;
}

/* A.2 Custom alert */
.custom-alert {
    display: flex !important;
    align-items: center;
    font-size: 13px;
    margin: 0 0 20px;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
}

.custom-alert-lg {
    font-size: 16px;
}

.custom-alert.hide {
    display: none !important;
}

.custom-alert.padding-y-15 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.custom-alert .close {
    min-height: 26px;
    min-width: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: flex-start;
    position: relative;
    right: -8px;
    float: none;
    margin-left: auto;
    padding: 4px;
    border-radius: 4px;
    font-size: 18px;
    line-height: 1;
    text-shadow: none;
    color: inherit;
    background: transparent;
    opacity: 0.3;
    cursor: pointer;
}

.custom-alert .close:hover {
    opacity: 0.6;
}

.custom-alert .close:focus {
    opacity: 0.6;
    -webkit-box-shadow: 0 0 0 2.5px rgba(0, 0, 0, 0.2) !important;
    box-shadow: 0 0 0 2.5px rgba(0, 0, 0, 0.2) !important;
}

.custom-alert .alert-icon {
    align-self: flex-start;
    line-height: 1.5;
    margin: 0 15px 0 0;
}

/* A.3 Button */
.button {
    --text-primary: #F1C40F;
    --text-primary-tint: #F5D657;
    --text-secondary: #FA8072;
    --text-secondary-shade: #E17367;
    --text-dark: #343A40;
    --text-dark-shade: #212121;
    --text-light: #FFF;
    --text-disabled: #BFCCDE;

    --button-primary-color: #F1C40F;
    --button-primary-color-tint: #F5D657;
    --button-primary-border: inset 0 0 0 1px var(--button-primary-color);
    --button-primary-border-none: inset 0 0 0 0 var(--button-primary-color-tint);
    --button-primary-hover: inset 0 0 0 2px var(--button-primary-color-tint);
    --button-primary-focus: 0 0 0 3px var(--button-primary-color-tint);

    --button-secondary-color: #FA8072;
    --button-secondary-color-shade: #E17367;

    --button-dark-color: #343A40;
    --button-dark-color-shade: #212121;
    --button-dark-border: inset 0 0 0 1px var(--button-dark-color);
    --button-dark-border-none: inset 0 0 0 0 var(--button-dark-color-shade);
    --button-dark-hover: inset 0 0 0 2px var(--button-dark-color-shade);
    --button-dark-focus: 0 0 0 3px var(--button-dark-color-shade);

    --button-light-color: rgba(230, 235, 242, 0);
    --button-light-color-shade: #E6EBF2;
    --button-light-focus: 0 0 0 3px #BFCCDE;

    --button-disabled: #BFCCDE;
}

.button {
    min-height: 34px;
    min-width: 34px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 5px 20px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    vertical-align: middle;
    color: var(--text-dark);
    border-radius: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-transition: color 150ms ease-in-out, background-color 150ms ease-in-out, border-color 150ms ease-in-out, -webkit-box-shadow 150ms ease-in-out;
    transition: color 150ms ease-in-out, background-color 150ms ease-in-out, border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}

.button:hover {
    color: var(--text-dark-shade);
    text-decoration: none;
}

.button:focus {
    text-decoration: none;
    outline: none;
    -webkit-box-shadow: var(--button-dark-focus) !important;
    box-shadow: var(--button-dark-focus) !important;
}


.button-lg {
    min-height: 40px;
    font-size: 16px;
    padding: 8px 32px;
}

.button.text-uppercase {
    font-size: 12px;
    text-transform: uppercase;
}

.button-lg.text-uppercase {
    font-size: 15px;
    text-transform: uppercase;
}

.button-block {
    width: 100%;
}

.button-dropdown {
    min-width: 160px;
    justify-content: space-between;
    padding: 5px 10px;
}

.button:not(.button:last-of-type) {
    margin-right: 5px;
}

.button.padding-x-5 {
    padding-left: 5px;
    padding-right: 5px;
}

.button.padding-x-10 {
    padding-left: 10px;
    padding-right: 10px;
}

.button.padding-x-15 {
    padding-left: 15px;
    padding-right: 15px;
}

.button.padding-x-20 {
    padding-left: 20px;
    padding-right: 20px;
}

.button.margin-left-5 {
    margin-left: 5px;
}

.button.margin-left-10 {
    margin-left: 10px;
}

.button.margin-right-5 {
    margin-right: 5px;
}

.button.margin-right-10 {
    margin-right: 10px;
}

/* A.3.1 Button - icon */
.button-icon {
    min-width: 18px;
    font-size: 18px;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
}

.button-icon-sm {
    font-size: 14px;
}

.button-icon::before {
    vertical-align: middle;
}

.button-icon.text-primary {
    color: var(--text-primary) !important;
}

.button-icon.text-secondary {
    color: var(--text-secondary) !important;
}

.button-icon.text-dark {
    color: var(--text-dark) !important;
}

.button-icon.text-light {
    color: var(--text-light) !important;
}

.button-icon.margin-right-5 {
    margin-right: 5px;
}

.button-icon.margin-left-5 {
    margin-left: 5px;
}

/* A.3.2 Button - text */
.button-text.text-primary {
    color: var(--text-primary) !important;
}

.button-text.text-secondary {
    color: var(--text-secondary) !important;
}

.button-text.text-dark {
    color: var(--text-dark) !important;
}

.button-text.text-light {
    color: var(--text-light) !important;
}

/* A.3.2 Button - primary */
.button-primary {
    color: var(--text-dark);
    background: var(--button-primary-color) !important;
}

.button-primary:hover {
    color: var(--text-dark);
    background: var(--button-primary-color-tint) !important;
}

.button-primary:focus {
    color: var(--text-dark);
    background: var(--button-primary-color) !important;
    -webkit-box-shadow: var(--button-primary-focus) !important;
    box-shadow: var(--button-primary-focus) !important;
}

.button-primary:hover.button-primary:focus {
    background: var(--button-primary-color-tint) !important;
}

/* A.3.3 Button - primary outline */
.button-primary-outline {
    color: var(--text-dark);
    background: transparent !important;
    -webkit-box-shadow: var(--button-primary-border) !important;
    box-shadow: var(--button-primary-border) !important;
}

.button-primary-outline:hover {
    color: var(--text-dark-shade);
    background: transparent !important;
    -webkit-box-shadow: var(--button-primary-hover) !important;
    box-shadow: var(--button-primary-hover) !important;
}

.button-primary-outline:focus {
    color: var(--text-dark);
    background: transparent !important;
    -webkit-box-shadow: var(--button-primary-border-none), var(--button-primary-focus) !important;
    box-shadow: var(--button-primary-border-none), var(--button-primary-focus) !important;
}

.button-primary-outline:hover.button-primary-outline:focus {
    color: var(--text-dark-shade)
}

/* A.3.4 Button - dark */
.button-dark {
    color: var(--text-light);
    background: var(--button-dark-color) !important;
}

.button-dark:hover {
    color: var(--text-light);
    background: var(--button-dark-color-shade) !important;
}

.button-dark:focus {
    color: var(--text-light);
    background: var(--button-dark-color) !important;
    -webkit-box-shadow: var(--button-dark-focus) !important;
    box-shadow: var(--button-dark-focus) !important;
}

.button-dark:hover.button-dark:focus {
    background: var(--button-dark-color-shade) !important;
}

/* A.3.5 Button - dark outline */
.button-dark-outline {
    color: var(--text-dark);
    background: transparent !important;
    -webkit-box-shadow: var(--button-dark-border) !important;
    box-shadow: var(--button-dark-border) !important;
}

.button-dark-outline:hover {
    color: var(--text-dark-shade);
    background: transparent !important;
    -webkit-box-shadow: var(--button-dark-hover) !important;
    box-shadow: var(--button-dark-hover) !important;
}

.button-dark-outline:focus {
    color: var(--button-dark-color);
    background: transparent !important;
    -webkit-box-shadow: var(--button-dark-border-none), var(--button-dark-focus) !important;
    box-shadow: var(--button-dark-border-none), var(--button-dark-focus) !important;
}

.button-dark-outline:hover.button-dark-outline:focus {
    color: var(--text-dark-shade)
}

/* A.3.6 Button - light */
.button-light {
    color: var(--text-dark);
    background: var(--button-light-color) !important;
}

.button-light:hover {
    color: var(--text-dark-shade);
    background: var(--button-light-color-shade) !important;
}

.button-light:focus {
    color: var(--text-dark);
    background: var(--button-light-color) !important;
    -webkit-box-shadow: var(--button-light-focus) !important;
    box-shadow: var(--button-light-focus) !important;
}

.button-light:hover.button-light:focus {
    color: var(--text-dark-shade);
    background: var(--button-light-color-shade) !important;
}

.button-light .button-icon {
    color: var(--text-secondary)
}


/* A.3.7 Button - disabled */
.button:disabled {
    color: var(--text-light);
    background: var(--button-disabled) !important;
    cursor: default;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.button:disabled .button-icon {
    color: var(--text-light) !important;
}

.button-primary-outline:disabled,
.button-dark-outline:disabled {
    color: var(--text-disabled);
    background: transparent !important;
    -webkit-box-shadow: inset 0 0 0 1px var(--button-disabled) !important;
    box-shadow: inset 0 0 0 1px var(--button-disabled) !important;
}

.button-primary-outline:disabled .button-icon,
.button-dark-outline:disabled .button-icon {
    color: var(--text-disabled) !important;
}

.button-light:disabled {
    color: var(--text-disabled);
    background: var(--button-light-color) !important;
}

.button-light:disabled .button-icon {
    color: var(--text-disabled) !important;
}

/* A.4 Labels */
/* A.4.1 Custom label */
.custom-label {
    --label-dark: #737373;
    --label-default: #A3A3A3;
    --label-default-tint: #828282;
    --label-success: #82AF6F;
    --label-success-tint: #AAC89D;
    --label-warning: #F7951E;
    --label-warning-tint: #FFB65E;
    --label-danger: #D15B47;
    --label-danger-tint: #FFA89E;

    --text-light: #FFF;
    --text-default: var(--label-default);
    --text-success: var(--label-success);
    --text-warning: var(--label-warning);
    --text-danger: var(--label-danger);
}

/* A.4.1.1 Custom label - default */
.custom-label {
    min-height: 21px;
    min-width: 21px;
    position: relative;
    bottom: 0.5px;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    text-transform: uppercase;
    text-align: center;
    color: var(--text-light);
    padding: 3px 5px;
    border-radius: 4px;
    border: none;
    background: var(--label-default);
}

.custom-label.hide {
    display: none !important;
}

.custom-label-dark {
    background: var(--label-dark);
}

.custom-label-success {
    background: var(--label-success);
}

.custom-label-warning {
    background: var(--label-warning);
}

.custom-label-danger {
    background: var(--label-danger);
}

/* A.4.1.2 Custom label - outline */
.custom-label-outline {
    color: var(--text-default);
    background: transparent;
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 0 2px var(--label-default-tint);
    box-shadow: inset 0 0 0 2px var(--label-default-tint);
}

.custom-label-outline.custom-label-success {
    color: var(--label-success);
    -webkit-box-shadow: inset 0 0 0 2px var(--label-success-tint);
    box-shadow: inset 0 0 0 2px var(--label-success-tint);
}

.custom-label-outline.custom-label-warning {
    color: var(--label-warning);
    -webkit-box-shadow: inset 0 0 0 2px var(--label-warning-tint);
    box-shadow: inset 0 0 0 2px var(--label-warning-tint);
}

.custom-label-outline.custom-label-danger {
    color: var(--label-danger);
    -webkit-box-shadow: inset 0 0 0 2px var(--label-danger-tint);
    box-shadow: inset 0 0 0 2px var(--label-danger-tint);
}

/* A.4.1.3 Custom label - transparent */
.custom-label-transparent {
    color: var(--text-default);
    background: rgba(163, 163, 163, 0.1);
}

.custom-label-transparent.custom-label-success {
    color: var(--label-success);
    background: rgb(130, 175, 111, 0.1);
}

.custom-label-transparent.custom-label-warning {
    color: var(--label-warning);
    background: rgb(247, 149, 30, 0.1);
}

.custom-label-transparent.custom-label-danger {
    color: var(--label-danger);
    background: rgb(209, 91, 71, 0.1);
}

/* A.4.2 Finding label */
.finding-label {
    min-height: 21px;
    position: relative;
    bottom: 0.5px;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    text-transform: uppercase;
    color: #A3A3A3;
    padding: 3px 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 0 2px #A3A3A3;
    box-shadow: inset 0 0 0 2px #A3A3A3;
}

.finding-label-success {
    color: #27AE60;
    -webkit-box-shadow: inset 0 0 0 2px #6FCF97;
    box-shadow: inset 0 0 0 2px #6FCF97;
}

.finding-label-danger {
    color: #E17367;
    -webkit-box-shadow: inset 0 0 0 2px #FFA89E;
    box-shadow: inset 0 0 0 2px #FFA89E;
}

.finding-label.hide {
    display: none !important;
}

.finding-label.margin-left-10 {
    margin-left: 10px;
}

.finding-label.margin-right-10 {
    margin-right: 10px;
}

/* A.4.3 Exploit label */
.exploit-label {
    min-height: 21px;
    position: relative;
    bottom: 0.5px;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    text-transform: uppercase;
    text-align: center;
    color: #FFF;
    padding: 3px 5px;
    border-radius: 4px;
    border: none;
    background: #A3A3A3;
}

.exploit-label.hide {
    display: none !important;
}

.exploit-label-success {
    background: #82AF6F;
}

.exploit-label-warning {
    background: #F7951E;
}

.exploit-label-danger {
    background: #D15B47;
}

/* A.4.4 Exploit card */
.exploit-card {
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 1px #A3A3A3;
    box-shadow: inset 0 0 1px #A3A3A3;
}

.exploit-card.max-width-180 {
    width: 180px;
}

.exploit-card .exploit-card-header {
    min-height: 18px;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.25;
    text-transform: uppercase;
    text-align: center;
    color: #FFF;
    padding: 2px 4px;
    border-radius: 4px;
    border: none;
    background: #A3A3A3;
}

.exploit-card-success {
    -webkit-box-shadowbox-shadow: inset 0 0 0 1px #82AF6F;
    box-shadow: inset 0 0 0 1px #82AF6F;
}

.exploit-card-success .exploit-card-header {
    background: #82AF6F;
}

.exploit-card-warning {
    -webkit-box-shadowbox-shadow: inset 0 0 0 1px #F7951E;
    box-shadow: inset 0 0 0 1px #F7951E;
}

.exploit-card-warning .exploit-card-header {
    background: #F7951E;
}

.exploit-card-danger {
    -webkit-box-shadowbox-shadow: inset 0 0 0 1px #D15B47;
    box-shadow: inset 0 0 0 1px #D15B47;
}

.exploit-card-danger .exploit-card-header {
    background: #D15B47;
}

.exploit-card .exploit-card-body {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 5px 10px;
}

.exploit-card .exploit-card-body li {
    font-size: 10px;
    line-height: 1.5;
    text-align: left;
    list-style-type: none;
    word-break: break-word;
}

/* A.5 Code snippet */
.code-snippet {
    position: relative;
    bottom: 0.5px;
    display: inline-block;
    font-family: Menlo, Monaco, Consolas, "Courier New", "DejaVu Sans Mono", monospace;
    font-size: 12px;
    line-height: 1.5;
    color: #19477D;
    padding: 3px 6px;
    border-radius: 4px;
    border: none;
    background-color: rgba(32, 89, 157, 0.06);
}

/* A.6 Custom badge */
.custom-badge {
    min-height: 17px;
    min-width: 26px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
    text-transform: uppercase;
    text-align: center;
    color: var(--gray-700);
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--gray-200);
    box-shadow: inset 0 0 0 1px var(--gray-300);
}

/* A.7 Custom tooltip */
[custom-tooltip] {
    position: relative;
}

[custom-tooltip]::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    z-index: 1000;
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
    transform: translateX(-50%);
    opacity: 0;
}

[custom-tooltip]::after {
    content: attr(custom-tooltip);
    min-width: 180px;
    position: absolute;
    top: -10px;
    left: 50%;
    z-index: 1000;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background: #333;
    padding: 4px;
    pointer-events: none;
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
}

[custom-tooltip]:hover::after,
[custom-tooltip]:hover::before {
    opacity: 1
}

[custom-tooltip-position='left']::before {
    left: 0%;
    top: 50%;
    margin-left: -12px;
    transform: translatey(-50%) rotate(-90deg)
}

[custom-tooltip-position='left']::after {
    left: 0%;
    top: 50%;
    margin-left: -8px;
    transform: translateX(-100%) translateY(-50%);
}

[custom-tooltip-position='bottom']::before {
    top: 100%;
    margin-top: 8px;
    transform: translateX(-50%) translatey(-100%) rotate(-180deg)
}

[custom-tooltip-position='bottom']::after {
    top: 100%;
    margin-top: 8px;
    transform: translateX(-50%) translateY(0%);
}

[custom-tooltip-position='right']::before {
    left: 100%;
    top: 50%;
    margin-left: 1px;
    transform: translatey(-50%) rotate(90deg)
}

[custom-tooltip-position='right']::after {
    left: 100%;
    top: 50%;
    margin-left: 8px;
    transform: translateX(0%) translateY(-50%);
}

/* B Utilities */
/* B.1 Color styles */
:root {
    --white: #FFF;
    --black: #000;
    --green: #82AF6F;
    --deep-red: #D15B47;
    --orange: #F7951E;

    /* Gray */
    --gray-50: #FAFAFA;
    --gray-100: #F5F5F5;
    --gray-200: #E5E5E5;
    --gray-300: #D4D4D4;
    --gray-400: #A3A3A3;
    --gray-500: #737373;
    --gray-600: #525252;
    --gray-700: #404040;
    --gray-800: #262626;
    --gray-900: #171717;

    /* Dark Blue */
    --db-25: #F8FAFB;
    --db-50: #F2F5F8;
    --db-100: #E6EBF2;
    --db-200: #BFCCDE;
    --db-300: #99ADCB;
    --db-400: #4D70A3;
    --db-500: #00327C;
    --db-600: #002D70;
    --db-700: #00265D;
    --db-800: #001E4A;
    --db-900: #00193D;

    /* Light Blue */
    --lb-50: #F4F8FD;
    --lb-100: #ECF5FF;
    --lb-200: #B4D6FF;
    --lb-300: #7DB8FF;
    --lb-400: #4497FA;
    --lb-500: #2A76D1;
    --lb-600: #266ABC;
    --lb-700: #20599D;
    --lb-800: #19477D;
    --lb-900: #153A66;

    /* Primary accent */
    --pa-50: #FFF9F8;
    --pa-100: #FFF2F1;
    --pa-200: #FEDFDC;
    --pa-300: #FDCCC7;
    --pa-400: #FFA89E;
    --pa-500: #FA8072;
    --pa-600: #E17367;
    --pa-700: #BC6056;
    --pa-800: #964D44;
    --pa-900: #7B3F38;

    /* Secondary accent */
    --sa-50: #FEFCF3;
    --sa-100: #FEF9E7;
    --sa-200: #FCF0C3;
    --sa-300: #F9E79F;
    --sa-400: #F5D657;
    --sa-500: #F1C40F;
    --sa-600: #D9B00E;
    --sa-700: #B5930B;
    --sa-800: #917609;
    --sa-900: #766007;
}

/* B.1.1 Color styles - background */
.background-transparent {
    background: transparent;
}

.background-white {
    background: #FFF;
}

.background-black {
    background: #000;
}

.background-green {
    background: var(--green);
}

.background-deep-red {
    background: var(--deep-red);
}

.background-orange {
    background: var(--orange);
}

/* Gray */
.background-gray-50 {
    background: var(--gray-50);
}

.background-gray-100 {
    background: var(--gray-100);
}

.background-gray-200 {
    background: var(--gray-200);
}

.background-gray-300 {
    background: var(--gray-300);
}

.background-gray-400 {
    background: var(--gray-400);
}

.background-gray-500,
.background-gray {
    background: var(--gray-500);
}

.background-gray-600 {
    background: var(--gray-600);
}

.background-gray-700 {
    background: var(--gray-700);
}

.background-gray-800 {
    background: var(--gray-800);
}

.background-gray-900 {
    background: var(--gray-900);
}

/* Dark Blue */
.background-db-25 {
    background: var(--db-25);
}

.background-db-50 {
    background: var(--db-50);
}

.background-db-100 {
    background: var(--db-100);
}

.background-db-200 {
    background: var(--db-200);
}

.background-db-300 {
    background: var(--db-300);
}

.background-db-400 {
    background: var(--db-400);
}

.background-db-500,
.background-db {
    background: var(--db-500);
}

.background-db-600 {
    background: var(--db-600);
}

.background-db-700 {
    background: var(--db-700);
}

.background-db-800 {
    background: var(--db-800);
}

.background-db-900 {
    background: var(--db-900);
}

/* Light Blue */
.background-lb-50 {
    background: var(--lb-50);
}

.background-lb-100 {
    background: var(--lb-100);
}

.background-lb-200 {
    background: var(--lb-200);
}

.background-lb-300 {
    background: var(--lb-300);
}

.background-lb-400 {
    background: var(--lb-400);
}

.background-lb-500,
.background-lb {
    background: var(--lb-500);
}

.background-lb-600 {
    background: var(--lb-600);
}

.background-lb-700 {
    background: var(--lb-700);
}

.background-lb-800 {
    background: var(--lb-800);
}

.background-lb-900 {
    background: var(--lb-900);
}

/* Primary accent */
.background-pa-50 {
    background: var(--pa-50);
}

.background-pa-100 {
    background: var(--pa-100);
}

.background-pa-200 {
    background: var(--pa-200);
}

.background-pa-300 {
    background: var(--pa-300);
}

.background-pa-400 {
    background: var(--pa-400);
}

.background-pa-500,
.background-pa {
    background: var(--pa-500);
}

.background-pa-600 {
    background: var(--pa-600);
}

.background-pa-700 {
    background: var(--pa-700);
}

.background-pa-800 {
    background: var(--pa-800);
}

.background-pa-900 {
    background: var(--pa-900);
}

/* Secondary accent */
.background-sa-50 {
    background: var(--sa-50);
}

.background-sa-100 {
    background: var(--sa-100);
}

.background-sa-200 {
    background: var(--sa-200);
}

.background-sa-300 {
    background: var(--sa-300);
}

.background-sa-400 {
    background: var(--sa-400);
}

.background-sa-500,
.background-sa {
    background: var(--sa-500);
}

.background-sa-600 {
    background: var(--sa-600);
}

.background-sa-700 {
    background: var(--sa-700);
}

.background-sa-800 {
    background: var(--sa-800);
}

.background-sa-900 {
    background: var(--sa-900);
}
/* B.1.2 Color styles - color */
.color-transparent {
    color: transparent;
}

.color-white {
    color: #FFF;
}

.color-black {
    color: #000;
}

.color-green {
    color: var(--green);
}

.color-deep-red {
    color: var(--deep-red);
}

.color-orange {
    color: var(--orange);
}

/* Gray */
.color-gray-50 {
    color: var(--gray-50);
}

.color-gray-100 {
    color: var(--gray-100);
}

.color-gray-200 {
    color: var(--gray-200);
}

.color-gray-300 {
    color: var(--gray-300);
}

.color-gray-400 {
    color: var(--gray-400);
}

.color-gray-500,
.color-gray {
    color: var(--gray-500);
}

.color-gray-600 {
    color: var(--gray-600);
}

.color-gray-700 {
    color: var(--gray-700);
}

.color-gray-800 {
    color: var(--gray-800);
}

.color-gray-900 {
    color: var(--gray-900);
}

/* Dark Blue */
.color-db-25 {
    color: var(--db-25);
}

.color-db-50 {
    color: var(--db-50);
}

.color-db-100 {
    color: var(--db-100);
}

.color-db-200 {
    color: var(--db-200);
}

.color-db-300 {
    color: var(--db-300);
}

.color-db-400 {
    color: var(--db-400);
}

.color-db-500,
.color-db {
    color: var(--db-500);
}

.color-db-600 {
    color: var(--db-600);
}

.color-db-700 {
    color: var(--db-700);
}

.color-db-800 {
    color: var(--db-800);
}

.color-db-900 {
    color: var(--db-900);
}

/* Light Blue */
.color-lb-50 {
    color: var(--lb-50);
}

.color-lb-100 {
    color: var(--lb-100);
}

.color-lb-200 {
    color: var(--lb-200);
}

.color-lb-300 {
    color: var(--lb-300);
}

.color-lb-400 {
    color: var(--lb-400);
}

.color-lb-500,
.color-lb {
    color: var(--lb-500);
}

.color-lb-600 {
    color: var(--lb-600);
}

.color-lb-700 {
    color: var(--lb-700);
}

.color-lb-800 {
    color: var(--lb-800);
}

.color-lb-900 {
    color: var(--lb-900);
}

/* Primary accent */
.color-pa-50 {
    color: var(--pa-50);
}

.color-pa-100 {
    color: var(--pa-100);
}

.color-pa-200 {
    color: var(--pa-200);
}

.color-pa-300 {
    color: var(--pa-300);
}

.color-pa-400 {
    color: var(--pa-400);
}

.color-pa-500,
.color-pa {
    color: var(--pa-500);
}

.color-pa-600 {
    color: var(--pa-600);
}

.color-pa-700 {
    color: var(--pa-700);
}

.color-pa-800 {
    color: var(--pa-800);
}

.color-pa-900 {
    color: var(--pa-900);
}

/* Secondary accent */
.color-sa-50 {
    color: var(--sa-50);
}

.color-sa-100 {
    color: var(--sa-100);
}

.color-sa-200 {
    color: var(--sa-200);
}

.color-sa-300 {
    color: var(--sa-300);
}

.color-sa-400 {
    color: var(--sa-400);
}

.color-sa-500,
.color-sa {
    color: var(--sa-500);
}

.color-sa-600 {
    color: var(--sa-600);
}

.color-sa-700 {
    color: var(--sa-700);
}

.color-sa-800 {
    color: var(--sa-800);
}

.color-sa-900 {
    color: var(--sa-900);
}

/* B.2 Typography */
.word-break-break-word {
    word-break: break-word;
}

.word-break-break-all {
    word-break: break-all;
}

.user-select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

/* B.2.1 Typography - font size */
.font-size-10 {
    font-size: 10px;
}

.font-size-11 {
    font-size: 11px;
}

.font-size-12 {
    font-size: 12px;
}

.font-size-13 {
    font-size: 13px;
}

.font-size-14 {
    font-size: 14px;
}

.font-size-15 {
    font-size: 15px;
}

.font-size-16 {
    font-size: 16px;
}

.font-size-17 {
    font-size: 17px;
}

.font-size-18 {
    font-size: 18px;
}

.font-size-19 {
    font-size: 19px;
}

.font-size-20 {
    font-size: 20px;
}

.font-size-21 {
    font-size: 21px;
}

.font-size-22 {
    font-size: 22px;
}

.font-size-23 {
    font-size: 23px;
}

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

.font-size-25 {
    font-size: 25px;
}

.font-size-26 {
    font-size: 26px;
}

.font-size-27 {
    font-size: 27px;
}

.font-size-28 {
    font-size: 28px;
}

.font-size-29 {
    font-size: 29px;
}

.font-size-30 {
    font-size: 30px;
}

/* B.2.2 Typography - font weight */
.font-weight-300,
.font-weight-light {
    font-weight: 300 !important;
}

.font-weight-400,
.font-weight-regular {
    font-weight: 400 !important;
}

.font-weight-500,
.font-weight-medium {
    font-weight: 500 !important;
}

.font-weight-600,
.font-weight-semibold {
    font-weight: 600 !important;
}

.font-weight-700,
.font-weight-bold {
    font-weight: 700 !important;
}

.font-weight-800,
.font-weight-extrabold {
    font-weight: 800 !important;
}

.font-weight-900,
.font-weight-black {
    font-weight: 900 !important;
}

/* B.2.3 Typography - text align */
.text-align-left {
    text-align: left !important;
}

.text-align-center {
    text-align: center !important;
}

.text-align-right {
    text-align: right !important;
}

/* B.2.4 Typography - vertical align */
.vertical-align-baseline {
    vertical-align: baseline;
}

.vertical-align-top {
    vertical-align: top;
}

.vertical-align-middle,
.text-align-middle {
    vertical-align: middle !important;
}

.vertical-align-bottom {
    vertical-align: bottom;
}

.vertical-align-sub {
    vertical-align: sub;
}

.vertical-align-text-top {
    vertical-align: text-top;
}

.vertical-align-text-bottom {
    vertical-align: text-bottom;
}

/*  B.2.5 Typography - text transform */
.text-transform-none {
    text-transform: none !important;
}

.text-transform-uppercase {
    text-transform: uppercase !important;
}

.text-transform-lowercase {
    text-transform: lowercase !important;
}

.text-transform-capitalize {
    text-transform: capitalize !important;
}

/* B.2.6 Typography - text decoration */
.text-decoration-none {
    text-decoration: none;
}

.text-decoration-line-through {
    text-decoration: line-through;
}

.text-decoration-underline {
    text-decoration: underline;
}

/* B.3 Layout */
.display-block {
    display: block;
}

.display-inline-block {
    display: inline-block;
}

.display-none {
    display: none;
}

.visibility-hidden {
    visibility: hidden;
}

/* B.3.1 Layout - height */
.height-0p {
    height: 0%;
}

.height-25p {
    height: 25%;
}

.height-33p {
    height: 33%;
}

.height-50p {
    height: 50%;
}

.height-66p {
    height: 66%;
}

.height-75p {
    height: 75%;
}

.height-100p {
    height: 100%;
}

/* min-height */
.min-height-20p {
    min-height: 20%;
}

.min-height-25p {
    min-height: 25%;
}

.min-height-33p {
    min-height: 33%;
}

.min-height-50p {
    min-height: 50%;
}

.min-height-66p {
    min-height: 66%;
}

.min-height-75p {
    min-height: 75%;
}

.min-height-100p {
    min-height: 100%;
}

/* max-height */
.max-height-0p {
    max-height: 0%;
}

.max-height-25p {
    max-height: 25%;
}

.max-height-33p {
    max-height: 33%;
}

.max-height-50p {
    max-height: 50%;
}

.max-height-66p {
    max-height: 66%;
}

.max-height-75p {
    max-height: 75%;
}


.max-height-100p {
    max-height: 100%;
}

/* B.3.2 Layout - width */
.width-0p {
    width: 0%;
}

.width-33p {
    width: 33%;
}

.width-50p {
    width: 50%;
}

.width-66p {
    width: 66%;
}

.width-75p {
    width: 75%;
}


.width-100p {
    width: 100%;
}

/* min-width */
.min-width-0p {
    min-width: 0%;
}

.min-width-25p {
    min-width: 25%;
}

.min-width-33p {
    min-width: 33%;
}

.min-width-50p {
    min-width: 50%;
}

.min-width-66p {
    min-width: 66%;
}

.min-width-75p {
    min-width: 75%;
}

.min-width-100p {
    min-width: 100%;
}

/* max-width */
.max-width-0p {
    max-width: 0%;
}

.max-width-25p {
    max-width: 25%;
}

.max-width-33p {
    max-width: 33%;
}

.max-width-50p {
    max-width: 50%;
}

.max-width-66p {
    max-width: 66%;
}

.max-width-75p {
    max-width: 75%;
}

.max-width-100p {
    max-width: 100%;
}

/* B.3.3 Layout - flexbox */
.display-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.display-inline-flex {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

.flex-direction-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.flex-direction-row-reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.flex-direction-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.flex-direction-column-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

.justify-content-stretch {
    -webkit-box-pack: stretch;
    -webkit-justify-content: stretch;
    -ms-flex-pack: stretch;
    justify-content: stretch;
}

.justify-content-flex-start {
    justify-content: flex-start
}

.justify-content-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.justify-content-flex-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.justify-self-stretch {
    -ms-grid-column-align: stretch;
    justify-self: stretch;
}

.justify-self-flex-start {
    justify-self: flex-start;
}

.justify-self-center {
    -ms-grid-column-align: center;
    justify-self: center;
}

.justify-self-flex-end {
    justify-self: flex-end;
}

.align-items-stretch {
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.align-items-flex-start {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.align-items-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.align-items-flex-end {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.align-self-flex-start {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
}

.align-self-stretch {
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    -ms-grid-row-align: stretch;
    align-self: stretch;
}

.align-self-center {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
}

.align-self-flex-end {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
}

.flex-wrap-nowrap {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.flex-wrap-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex-wrap-wrap-reverse {
    -ms-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
}

/* B.3.4 Layout - padding */
.padding-auto {
    padding: auto !important;
}

.padding-0 {
    padding: 0px !important;
}

.padding-1 {
    padding: 1px !important;
}

.padding-2 {
    padding: 2px !important;
}

.padding-3 {
    padding: 3px !important;
}

.padding-4 {
    padding: 4px !important;
}

.padding-5 {
    padding: 5px !important;
}

.padding-10 {
    padding: 10px !important;
}

.padding-20 {
    padding: 20px !important;
}

.padding-40 {
    padding: 40px !important;
}

.padding-80 {
    padding: 80px !important;
}

/* x */
.padding-x-auto {
    padding-left: auto !important;
    padding-right: auto !important;
}

.padding-x-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.padding-x-1 {
    padding-left: 1px !important;
    padding-right: 1px !important;
}

.padding-x-2 {
    padding-left: 2px !important;
    padding-right: 2px !important;
}

.padding-x-3 {
    padding-left: 3px !important;
    padding-right: 3px !important;
}

.padding-x-4 {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.padding-x-5 {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.padding-x-10 {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.padding-x-20 {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.padding-x-40 {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.padding-x-80 {
    padding-left: 80px !important;
    padding-right: 80px !important;
}

/* padding - y */
.padding-y-auto {
    padding-top: auto !important;
    padding-bottom: auto !important;
}

.padding-y-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.padding-y-1 {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

.padding-y-2 {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.padding-y-3 {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

.padding-y-4 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.padding-y-5 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.padding-y-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.padding-y-20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.padding-y-40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.padding-y-80 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* top */
.padding-top-auto {
    padding-top: auto !important;
}

.padding-top-0 {
    padding-top: 0px !important;
}

.padding-top-1 {
    padding-top: 1px !important;
}

.padding-top-2 {
    padding-top: 2px !important;
}

.padding-top-3 {
    padding-top: 3px !important;
}

.padding-top-4 {
    padding-top: 4px !important;
}

.padding-top-5 {
    padding-top: 5px !important;
}

.padding-top-10 {
    padding-top: 10px !important;
}

.padding-top-20 {
    padding-top: 20px !important;
}

.padding-top-40 {
    padding-top: 40px !important;
}

.padding-top-80 {
    padding-top: 80px !important;
}

/* right */
.padding-right-auto {
    padding-right: auto !important;
}

.padding-right-0 {
    padding-right: 0px !important;
}

.padding-right-1 {
    padding-right: 1px !important;
}

.padding-right-2 {
    padding-right: 2px !important;
}

.padding-right-3 {
    padding-right: 3px !important;
}

.padding-right-4 {
    padding-right: 4px !important;
}

.padding-right-5 {
    padding-right: 5px !important;
}

.padding-right-10 {
    padding-right: 10px !important;
}

.padding-right-20 {
    padding-right: 20px !important;
}

.padding-right-40 {
    padding-right: 40px !important;
}

.padding-right-80 {
    padding-right: 80px !important;
}

/* bottom */
.padding-bottom-auto {
    padding-bottom: auto !important;
}

.padding-bottom-0 {
    padding-bottom: 0px !important;
}

.padding-bottom-1 {
    padding-bottom: 1px !important;
}

.padding-bottom-2 {
    padding-bottom: 2px !important;
}

.padding-bottom-3 {
    padding-bottom: 3px !important;
}

.padding-bottom-4 {
    padding-bottom: 4px !important;
}

.padding-bottom-5 {
    padding-bottom: 5px !important;
}

.padding-bottom-10 {
    padding-bottom: 10px !important;
}

.padding-bottom-20 {
    padding-bottom: 20px !important;
}

.padding-bottom-40 {
    padding-bottom: 40px !important;
}

.padding-bottom-80 {
    padding-bottom: 80px !important;
}

/* left */
.padding-left-auto {
    padding-left: auto !important;
}

.padding-left-0 {
    padding-left: 0px !important;
}

.padding-left-1 {
    padding-left: 1px !important;
}

.padding-left-2 {
    padding-left: 2px !important;
}

.padding-left-3 {
    padding-left: 3px !important;
}

.padding-left-4 {
    padding-left: 4px !important;
}

.padding-left-5 {
    padding-left: 5px !important;
}

.padding-left-10 {
    padding-left: 10px !important;
}

.padding-left-20 {
    padding-left: 20px !important;
}

.padding-left-40 {
    padding-left: 40px !important;
}

.padding-left-80 {
    padding-left: 80px !important;
}

/* B.3.5 Layout - margin */
.margin-auto {
    margin: auto !important;
}

.margin-0 {
    margin: 0px !important;
}

.margin-1 {
    margin: 1px !important;
}

.margin-2 {
    margin: 2px !important;
}

.margin-3 {
    margin: 3px !important;
}

.margin-4 {
    margin: 4px !important;
}

.margin-5 {
    margin: 5px !important;
}

.margin-10 {
    margin: 10px !important;
}

.margin-20 {
    margin: 20px !important;
}

.margin-40 {
    margin: 40px !important;
}

.margin-80 {
    margin: 80px !important;
}

/* x */
.margin-x-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.margin-x-0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.margin-x-1 {
    margin-left: 1px !important;
    margin-right: 1px !important;
}

.margin-x-2 {
    margin-left: 2px !important;
    margin-right: 2px !important;
}

.margin-x-3 {
    margin-left: 3px !important;
    margin-right: 3px !important;
}

.margin-x-4 {
    margin-left: 4px !important;
    margin-right: 4px !important;
}

.margin-x-5 {
    margin-left: 5px !important;
    margin-right: 5px !important;
}

.margin-x-10 {
    margin-left: 10px !important;
    margin-right: 10px !important;
}

.margin-x-20 {
    margin-left: 20px !important;
    margin-right: 20px !important;
}

.margin-x-40 {
    margin-left: 40px !important;
    margin-right: 40px !important;
}

.margin-x-80 {
    margin-left: 80px !important;
    margin-right: 80px !important;
}

/* y */
.margin-y-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.margin-y-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.margin-y-1 {
    margin-top: 1px !important;
    margin-bottom: 1px !important;
}

.margin-y-2 {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

.margin-y-3 {
    margin-top: 3px !important;
    margin-bottom: 3px !important;
}

.margin-y-4 {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

.margin-y-5 {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

.margin-y-10 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.margin-y-20 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.margin-y-40 {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

.margin-y-80 {
    margin-top: 80px !important;
    margin-bottom: 80px !important;
}

/* top */
.margin-top-auto {
    margin-top: auto !important;
}

.margin-top-0 {
    margin-top: 0px !important;
}

.margin-top-5 {
    margin-top: 5px !important;
}

.margin-top-10 {
    margin-top: 10px !important;
}

.margin-top-20 {
    margin-top: 20px !important;
}

.margin-top-40 {
    margin-top: 40px !important;
}

.margin-top-80 {
    margin-top: 80px !important;
}

/* right */
.margin-right-auto {
    margin-right: auto !important;
}

.margin-right-0 {
    margin-right: 0px !important;
}

.margin-right-1 {
    margin-right: 1px !important;
}

.margin-right-2 {
    margin-right: 2px !important;
}

.margin-right-3 {
    margin-right: 3px !important;
}

.margin-right-4 {
    margin-right: 4px !important;
}

.margin-right-5 {
    margin-right: 5px !important;
}

.margin-right-10 {
    margin-right: 10px !important;
}

.margin-right-20 {
    margin-right: 20px !important;
}

.margin-right-40 {
    margin-right: 40px !important;
}

.margin-right-80 {
    margin-right: 80px !important;
}

/* bottom */
.margin-bottom-auto {
    margin-bottom: auto !important;
}

.margin-bottom-0 {
    margin-bottom: 0px !important;
}

.margin-bottom-1 {
    margin-bottom: 1px !important;
}

.margin-bottom-2 {
    margin-bottom: 2px !important;
}

.margin-bottom-3 {
    margin-bottom: 3px !important;
}

.margin-bottom-4 {
    margin-bottom: 4px !important;
}

.margin-bottom-5 {
    margin-bottom: 5px !important;
}

.margin-bottom-10 {
    margin-bottom: 10px !important;
}

.margin-bottom-20 {
    margin-bottom: 20px !important;
}

.margin-bottom-40 {
    margin-bottom: 40px !important;
}

.margin-bottom-80 {
    margin-bottom: 80px !important;
}

/* left */
.margin-left-auto {
    margin-left: auto !important;
}

.margin-left-0 {
    margin-left: 0px !important;
}

.margin-left-1 {
    margin-left: 1px !important;
}

.margin-left-2 {
    margin-left: 2px !important;
}

.margin-left-3 {
    margin-left: 3px !important;
}

.margin-left-4 {
    margin-left: 4px !important;
}

.margin-left-5 {
    margin-left: 5px !important;
}

.margin-left-10 {
    margin-left: 10px !important;
}

.margin-left-20 {
    margin-left: 20px !important;
}

.margin-left-40 {
    margin-left: 40px !important;
}

.margin-left-80 {
    margin-left: 80px !important;
}

/* B.3.6 Layout - positioning */
.position-static {
    position: static;
}

.position-relative {
    position: relative;
}

.position-fixed {
    position: fixed;
}

.position-absolute {
    position: absolute;
}

.position-sticky {
    position: sticky;
}

/* top */
.top-0 {
    top: 0;
}

.top-50p {
    top: 50%;
}

.top-100p {
    top: 100%;
}

/* right */
.right-0 {
    right: 0;
}

.right-50p {
    right: 50%;
}

.right-100p {
    right: 100%;
}

/* bottom */
.bottom-0 {
    bottom: 0;
}

.bottom-50p {
    bottom: 50%;
}

.bottom-100p {
    bottom: 100%;
}

/* left */
.left-0 {
    left: 0;
}

.left-50p {
    left: 50%;
}

.left-100p {
    left: 100%;
}