@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,600,700');
html {
    color: #454545;    
    font-size: 62.5%;
}

body {
    background: url(/resources/img/ribar-bg.jpg) 100% 0%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 1.4rem;
}

a {
    color: #0071EB;
}

header.header--body  { 
    background-color: #0d1649;
    display: flex;
    flex-direction: column;
}

main.main--body {
    background-color: #fff;
}

footer.footer--body { 
    background-color: #0d1649;
}

header.header--body, 
footer.footer--body, 
header.header--body a, 
footer.footer--body a {
    color: #ecf0f1;
}

.page-title {
    margin-top: 1rem;
}

.google-map {
  border: solid 0.2rem;
  height: 20rem;
  width: 100%;
}

.copyright {
    background-color: #2b3254;
    color: #7f8c8d;
    font-size: 1.3rem;
}

.motto, 
.motto-image,
.motto-caption {
    width: 100%;
}

.motto {
    position: relative;    
}

.motto-caption {
    background-color: rgba(255,255,255,.5);
    bottom: 0;
    font-size: 1.6rem;
    font-family: serif;
    font-weight: 600;
    left: 0;
    position: absolute;
    text-align: center;
}

.caption {
    color: #95a5a6;
    font-size: 1.1rem;    
}

.highlight,
.highlight__test,
.highlight__denied,
.highlight__refund,
.highlight__duplicate,
.highlight__ignore,
.highlight__previously-hidden {
     color: #90a4ae;
}
.highlight__error-contact-support { color: #d50000; }
.highlight__new { color: #03a9f4;  }
.highlight__accepted { color: #388e3c; }
.highlight__processed { color: #388e3c; }

.d-flex.collapse:not(.show) {
    display: none !important;
}

.btn-outline-primary {
    color: #0071EB;
    border-color: #0071EB;
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: #0071EB;
    border-color: #0071EB;
}

@media (min-width: 768px) {
    header.header--body  { 
        background-color: transparent;
        background-image: url(/resources/img/header.png);
        background-repeat: no-repeat;
        background-size: cover;
        flex-direction: row;
    }
}

@media (max-width: 768px) {
    header { 
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1030;
    }

    main {
        padding-top: 12rem;
    }

    #navbar-sidebar.show {
        padding-top: 1rem;
    }
}

/*// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }*/