/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
outline: none;
}
input:focus{
outline: none;
}
.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #ced4da;
    outline: 0;
    box-shadow: none;
}

.container {
    width: 80%;
    padding-top: 40px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}

.signature-component {
text-align: center;
display: inline-block;
max-width: 100%;
width: 100%;
}
.signature-component canvas {
    display: block;
    position: relative;
    border: 1px solid #ced4da;
    margin-bottom: 10px;
    border-radius: 4px;
    margin-left: auto;
    margin-right: auto;
}
body {
font-family: 'Roboto', sans-serif;
text-align: center;
}

.footer {
width: 100%;
height: 60px;
line-height: 60px;
}

.medium{
font-weight: 400;
}
.bold{
font-weight: 700;
}

.navbar-light .navbar-nav .nav-link,.navbar-light:hover .navbar-nav:hover .nav-link:hover {
color: rgb(255 255 255);
font-family: 'gotham-medium';
}

.bg-light {
background-color: #005daa!important;
}

.navbar-light .navbar-brand {
color: rgb(255 255 255 / 90%);
}
.navbar-light .navbar-toggler {
color: rgb(255 255 255);
border-color: rgb(255 255 255);
}
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
filter: invert(1);
}

.footer{
background-color: #005daa;
color: #ffffff;
}

.aleft{
text-align: left;
}

.ajustify{
text-align: justify;
}

.aright{
text-align: right;
}

.uppercase{
text-transform: uppercase;
}

.hr{
height: 3px;
border: solid #000000 2px!important;
background-color: #000000;
margin: 30px 0px;
}

a.alink, a.alink:hover{
text-decoration: underline;
color: #000000;
}

@media only screen and (max-width: 500px) {
canvas{
width: 100%;
height: 200px;
}
.container {
    width: 90%;
    padding-top: 40px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
h1{
font-size: 2rem;
}
}


@media only screen and (max-width: 400px) {
canvas{
width: 250px;
height: 200px;
}
h1{
font-size: 2rem;
}

.container {
    width: 90%;
    padding-top: 40px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

}

/* Fixes dropdown menus placed on the right side */
.ml-auto .dropdown-menu {
left: auto !important;
right: 0px;
}