/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

/*-------------------------------------------*/
/*Import fonts (matches SpecificationServer)  */
/*-------------------------------------------*/
@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap);

/*-------------------------------------------*/
/*OPC UA brand palette & fonts (matches       */
/*SpecificationServer / other OPCF sites)     */
/*-------------------------------------------*/
:root {
    --opc-mid:  #196096;
    --opc-dark: #084A79;
    --font-body: Roboto, Helvetica, Arial, sans-serif;
    --font-ui:   Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'Consolas', 'Cascadia Code', monospace;
}

body {
    font-family: var(--font-body);
}

/*-------------------------------------------*/
/*Bootstrap overrides                        */
/*-------------------------------------------*/
.bg-primary {
    background-color:#196096 !important;
}

/*-------------------------------------------*/
/*Top accent bar                             */
/*-------------------------------------------*/
.top-bar {
    height: 6px;
    background-color: var(--opc-dark);
}

/*-------------------------------------------*/
/*-------------------------------------------*/
/*Existing CSS from original fork below here */
/*  (unless override specified)              */
/*-------------------------------------------*/
/*-------------------------------------------*/
a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

.btn-primary {
  color: #fff;
  background-color: var(--opc-mid);
  border-color: var(--opc-mid);
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: var(--opc-mid);
  border-color: var(--opc-mid);
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  min-height: 100%;
}

/* Flex-based sticky footer: the body fills at least the viewport height and
   the content area grows to push the footer down. The footer stays in normal
   flow, so it can wrap to multiple lines without overlapping the content. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > .container {
  flex: 1 0 auto;
}

.footer {
  flex-shrink: 0;
  width: 100%;
  line-height: 1.8rem;
  padding: .5rem 0;
}

/*-------------------------------------------*/
/*Common CSS values used in Profile Designer */
/*-------------------------------------------*/
h1 {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.7rem
}

h2, h3, h4 {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.15rem
}

p {
    line-height: 1.3rem;
    margin-bottom: .8rem
}

.cursor-pointer:hover {
    cursor: pointer
}

.headline-1 {
    font-size: 1.5rem;
    line-height: 1.7rem
}

.headline-1, .headline-2 {
    font-family: var(--font-body);
    font-weight: 700
}

.headline-2 {
    font-size: 1.2rem;
    line-height: 1.3rem
}

.headline-3, .headline-4 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    line-height: 18px
}

.headline-4 {
    letter-spacing: -.014em
}

a {
    font-family: var(--font-ui);
    font-style: normal;
    font-weight: 400;
    font-size: .9rem;
    color: #2d76a7
}

/*-------------------------------------------*/
/*Helper classes.                            */
/*-------------------------------------------*/
.text-white {
    color: #fff;
}

/*---------------------------------------------------*/
/*Header overrides to align with other CESMII sites. */
/*---------------------------------------------------*/
header {
    height: auto;
    background: linear-gradient(100deg, var(--opc-mid) 0%, var(--opc-dark) 100%);
    border-bottom: 1px solid;
    align-items: center
}

    header, header .navbar-brand {
        color: #fff
    }

        header .navbar-brand:hover {
            color: unset;
            opacity: .75
        }

        header .navbar-brand img {
            height: 50px;
            border-top: 1px solid #fff;
            border-left: 1px solid #fff;
            border-bottom: 1px solid #000;
            border-right: 1px solid #000;
        }

        header .nav-link {
            font-family: var(--font-ui);
            color: #fff !important;
            opacity: .9
        }

            header .nav-link:hover {
                opacity: .75
            }

/*-------------------------------------------*/
/*Button overrides                           */
/*-------------------------------------------*/
.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
    .btn {
        transition: none
    }
}

.btn:hover {
    color: #212529;
    text-decoration: none
}

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25)
}

.btn.disabled, .btn:disabled {
    opacity: .65
}

.btn:not(:disabled):not(.disabled) {
    cursor: pointer
}

a.btn.disabled, fieldset:disabled a.btn {
    pointer-events: none
}

.btn-primary {
    color: #fff;
    background-color: var(--opc-mid);
    border-color: var(--opc-mid)
}

    .btn-primary.focus, .btn-primary:focus, .btn-primary:hover {
        color: #fff;
        background-color: var(--opc-dark);
        border-color: var(--opc-dark)
    }

    .btn-primary.focus, .btn-primary:focus {
        box-shadow: 0 0 0 .2rem rgba(25,96,150,.5)
    }

    .btn-primary.disabled, .btn-primary:disabled {
        color: #fff;
        background-color: var(--opc-mid);
        border-color: var(--opc-mid)
    }

    .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: var(--opc-dark);
        border-color: var(--opc-dark)
    }

        .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 .2rem rgba(25,96,150,.5)
        }

.btn-secondary {
    color: #fff;
    background-color: #2e2b26;
    border-color: #2e2b26
}

    .btn-secondary.focus, .btn-secondary:focus, .btn-secondary:hover {
        color: #fff;
        background-color: #191715;
        border-color: #12110f
    }

    .btn-secondary.focus, .btn-secondary:focus {
        box-shadow: 0 0 0 .2rem rgba(77,75,71,.5)
    }

    .btn-secondary.disabled, .btn-secondary:disabled {
        color: #fff;
        background-color: #2e2b26;
        border-color: #2e2b26
    }

    .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {
        color: #fff;
        background-color: #12110f;
        border-color: #0b0a09
    }

        .btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-secondary.dropdown-toggle:focus {
            box-shadow: 0 0 0 .2rem rgba(77,75,71,.5)
        }


/*-------------------------------------------*/
/*Tile Settings                              */
/*-------------------------------------------*/
.tile-link {
    font: unset;
    color: unset
}

.tile-link:hover {
    text-decoration: unset;
    cursor: pointer;
}

.tile-link img {
    max-height:60px;
    width:auto;
    border-radius: 20px 0px 0px 0px;
}

.tile-link:hover img {
    opacity: .8
}

.tile-link .tile-body {
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
    border-radius: 20px;
    border-color: #fff;
}

.tile-link:hover .tile-body {
    box-shadow: 0 4px 12px rgba(0,0,0,.6);
    border-color: rgba(93,150,241,.7)
}

.tile-link .tile-body .card-img-top {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px
}

/*-------------------------------------------*/
/*Footer Settings                            */
/*-------------------------------------------*/
footer {
    background: linear-gradient(100deg, var(--opc-mid) 0%, var(--opc-dark) 100%);
    color: #fff;
}
footer a {
    color: inherit;
    opacity: .9;
    margin-right: 1.25rem;
    white-space: nowrap;
}
footer a:hover {
    color: inherit;
    opacity: .75;
}
footer .footer-version a {
    margin-right: 0;
}