.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.roboto-semi-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.extra-large-font {
    font-size: var(--fontExtraLarge);
}

h1 {
    font-size: var(--extraLarge);
    margin-bottom: 0px;
}

h2 {
    font-size: var(--large);
    margin-bottom: 0px;
}

h3 {
    font-size: var(--medium);
    margin-bottom: 0px;
}

h4 {
    font-size: var(--small);
    margin-bottom: 0px;
}

h5 {
    font-size: var(--extraSmall);
    margin-bottom: 0px;
}

h6 {
    font-size: var(--smallest);
    margin-bottom: 0px;
}

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

.text-grey {
    color: var(--textGrey);
}

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

.para-24{
    font-size: var(--font24)
}

.para-20{
    font-size: var(--extraLarge);
}

.para-18 {
    font-size: var(--large);
}

.para-16 {
    font-size: var(--medium);
}

.para-14 {
    font-size: var(--small);
}

.para-12 {
    font-size: var(--extraSmall);
}

.para-10 {
    font-size: var(--smallest);
}

.fw-medium {
    font-weight: 500;
}