﻿/* 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. */

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}



/* 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;
    margin-bottom: 10px;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}


.img {
    /*vertical-align: middle;*/
    margin: 1em;
    max-width: 100%;
    height: auto;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 40px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
}

.file-error {
    width: 100%;
    /*margin-top: -.25rem;*/
    font-size: 80%;
    color: #dc3545;
}

.small-font {
    font-size: 12px;
}

.mainHeader {
    overflow: hidden;
}

.logoHeader {
    float: left;
    background-color: transparent;
    /*vertical-align: middle;*/
}

@media (max-width: 1000px) {
    .logoHeader {
        float: none;
    }
}

/* Float the link section to the right */
.header-right {
    float: none;
}


.tooltip-inner {
    background-color: orangered;
}

/*.bs-tooltip-auto[x-placement^=bottom] .arrow::before,*/
.bs-tooltip-top > .arrow::before {
    border-top-color: orangered;
}

#mainForm {
    margin-bottom: 4em;
}

.animateShow {
    animation-name: Show;
    animation-duration: 1s;
}

.animateHide {
    animation-name: Hide;
    animation-duration: 1s;
    transform: translate(0,-300px) scaleY(0.0);
}

@keyframes Show {
    0% {
        transform: translate(0,-300px) scaleY(0.0);
    }
    100% {
        transform: translate(0,0px) scaleY(1.0);
    }
}

@keyframes Hide {
    0% {
        transform: translate(0,0px) scaleY(1.0);
    }

    100% {
        transform: translate(0,-300px) scaleY(0.0);
    }
}

.star-required::after {
    content: " *";
    color: #e32;
    font-size: larger;
}

--icon-required: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-10 -6 16 16"> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(15)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(75)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(-45)"></line> \
</svg>');

--icon-tick: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="-2 -2 16 16"> \
            <path fill="green" stroke-linejoin="round" d="M2 6L1 7l3 4 7-10h-1L4 8z"/> \
</svg>');

input[type=text][required],
input[type=email][required],
input[type=password][required],
input[type=tel][required],
input:required {
    background-image: url('/images/red_star.svg');
    background-position-x: right;
    background-repeat: no-repeat;
    background-size: contain;
}

input:valid {
    --icon-required: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="-2 -2 16 16"> \
            <path fill="green" stroke-linejoin="round" d="M2 6L1 7l3 4 7-10h-1L4 8z"/> \
</svg>');
}

.control-label {
    padding-left:15px;
    padding-right:15px;
}

.tooltip-inner {
    text-align: left !important;
}

.additional-message {
    font-size: 80%;
}
