@font-face {
    font-family: metropolis;
    src: url("../fonts/Metropolis-Medium.woff2");
    font-weight: normal;
}

@font-face {
    font-family: metropolis;
    src: url("../fonts/Metropolis-Bold.woff2");
    font-weight: bold;
}

body {
    font-family: metropolis, sans-serif;
    font-style: normal;
    font-weight: 500;
}

/* Marker for the marker style in the CKEditor text */
.marker {
    background-color: Yellow;
}

/* Puts Environment/Git banner at top right corner */
.environment-banner {
    float: right;
    font-size: smaller;
    top: 2.5em;
    right: -4.3em;
    position: fixed;
    /* or fixed if you want it to always be visible */
    transform: rotate(45deg);
    background: red;
    color: white;
    /* font-weight: bold; */
    padding-left: 2em;
    padding-right: 2em;
    padding-top: .2em;
    padding-bottom: .2em;
    border: 0;
    margin: 0;
    height: auto;
    width: auto;
    z-index: 999999999;
    /* or whatever is needed to show on top of other elements */
}

/* Puts Environment/Git banner at top right */
.environment-banner-tr {
    float: right;
    font-size: smaller;
    /* top: 1.5em; */
    right: -0.6em;
    position: fixed;
    /* or fixed if you want it to always be visible */
    /* transform: rotate(45deg); */
    background: red;
    color: white;
    font-weight: bold;
    padding-left: 0.5em;
    padding-right: 1em;
    padding-top: 0em;
    padding-bottom: .2em;
    border: 0;
    margin: 0;
    height: auto;
    width: auto;
    z-index: 999999999;
    /* or whatever is needed to show on top of other elements */
}

/* Puts Environment/Git banner at bottom right */
.environment-banner-br {
    float: right;
    font-size: xx-small;
    bottom: 0em;
    right: -0.6em;
    position: fixed;
    /* or fixed if you want it to always be visible */
    /* transform: rotate(45deg); */
    background: red;
    color: white;
    font-weight: bold;
    padding-left: 0.5em;
    padding-right: 1em;
    padding-top: 0em;
    padding-bottom: .2em;
    border: 0;
    margin: 0;
    height: auto;
    width: auto;
    z-index: 999999999;
    /* or whatever is needed to show on top of other elements */
}


/* Descriptions in Selects */

/* option::after{
    content: attr(data-description); 
    content: " Hello";
    font-size: 12px;
    color: #999;
    display: block;
} */



.dropdown-menu>li>a {
    /* font-weight: 700;
    padding: 10px 20px; */

}

.dropdown-menu li small {
    display: block;
    padding: 0 0 0 0;
    font-weight: 100;
    font-size: x-small;
    text-wrap: wrap;
}

div.dropdown-menu.show {
    width: 50%;
}

/* Form error messages */
.input-error {
    border: 1px solid red;
}

.input-error-msg {
    color: red;
}