:root {
    --primary100: #173157FF;
    --primary75: #454CA0BF;
    --primary50: #454CA080;
    --primary25: #454CA040;
    --primary10: #454CA01A;
    --primary5: #454ca00c;
    --primarydark: #3F448A;

    --secondary100:#828fa5;
    --secondary75: #162B4DBF;
    --secondary50: #162B4D80;
    --secondary25: #162B4D40;
    --secondary10: #162B4D1A;
    --secondary5:#fff;
    --secondarydark: #3F448A;

    --tertiary: #F2F5F7;

    --success100: #49C39EFF;
    --success75: #49C39EBF;
    --success50: #49C39E80;
    --success25: #49C39E40;
    --success10: #49C39E1A;
    --successdark: #44B492;

    --deletion100: #F2545BFF;
    --deletion75: #F2545BBF;
    --deletion50: #F2545B80;
    --deletion25: #F2545B40;
    --deletion10: #F2545B1A;
    --deletiondark: #CF4046;

    --white: #FFFFFF;
    --darkslate: #1a202c;
    --slate: #a0aec0;
    --lightslate: #f7fafc;

    --borderradius: 2px;
    --borderradiusall: 2px 2px 2px 2px;

    --fontblack: "Roboto Black";
    --fontbold: "Roboto Bold";
    --fontsemibold: "Roboto Medium";
    --fontnormal: "Roboto";
    --fontlight: "Roboto Light";

    --bodytext: var(--fontnormal) "regular" var(--secondary100) 16pt;
    --bigbodytext: var(--fontnormal) "regular" var(--secondary100) 20pt;
    --smallbodytext: var(--fontnormal) "regular" var(--secondary100) 12pt;
    --lightbodytext: "regular" "normal" 16pt  var(--fontnormal);
    --heavybodytext: var(--fontbold) "regular" var(--secondary100) 16pt;
    --quotation: var(--fontnormal) "italics" var(--darkslate) 16pt;
    --smallheavybodytext: var(--fontbold) "regular" var(--secondary100) 14pt;

    --background-button: #e6eeff;
    --button-text: #0055ff;
}

html, body {
    font-family: var(--fontnormal);
    color: var(--secondary100);
    padding: 0;
    margin: 0;
    height:100%;
    width:100%;
}

h1 {
    font-family: var(--fontblack);
    font-size: 36pt;
    color: var(--secondary100);
}

h2 {
    font-family: var(--fontbold);
    font-size: 30pt;
    color: var(--secondary100);
}

h3 {
    font-family: var(--fontbold);
    font-size: 24pt;
    color: var(--darkslate);
}

h4 {
    font-family: var(--fontbold);
    font-size: 18pt;
    color: var(--secondary100);
}

h5 {
    font-family: var(--fontblack);
    font-size: 14pt;
    color: var(--secondary100);
}

h5 {
    font-family: var(--fontblack);
    font-size: 12pt;
    color: var(--darkslate);
}


/* Budibase Component Styles */
.header {
    font-size: 0.75rem;
    color: #999;
    text-transform: uppercase;
    margin-top: 1rem;
    font-weight: 500;
}

.budibase__title {
    font-weight: 900;
    font-size: 42px;
}

.budibase__title--2 {
    font-weight: 700;
    font-size: 32px;
}

.budibase__title--3 {
    font-weight: 700;
    font-size: 24px;
}

.budibase__title--4 {
    font-weight: 700;
    font-size: 18px;
}

.budibase__label--big {
    font-weight: 400;
    font-size: 14px;
    opacity: 0.6;
    text-transform: uppercase;
}

.budibase__label--medium {
    font-weight: 500;
    font-size: 12px;
    opacity: 0.6;
    text-transform: uppercase;
}

.budibase__label--small {
    font-weight: 500;
    font-size: 10px;
    opacity: 0.6;
    text-transform: uppercase;
}

.budibase__sub-heading {

}

.budibase__nav-item {
    cursor: pointer;
    padding: 0 7px 0 3px;
    height: 35px;
    margin: 5px 0;
    border-radius: 0 5px 5px 0;
    display: flex;
    align-items: center;
    font-weight: 500;
}

.budibase__nav-item.selected {
    color: var(--button-text);
    background: var(--background-button) !important;
}

.budibase__nav-item:hover {
    background: #fafafa;
}

.budibase__input {
    width: 250px;
    height: 50px;
    border-radius: 3px;
    border: 1px solid #DBDBDB;
    text-align: left;
    letter-spacing: 0.7px;
    color: #163057;
    font-size: 16px;
    padding-left: 5px;
}