
:root {
    --custom-background: #C8C2EA;
    --custom-background-two: #382541;
    --custom-background-three: #BB433C;
    --custom-background-white: #ffffff;
    --table-background: #E2E2DF;
    --text-color: black;
    --text-color-inverse: #ffffff;
    --color_lines: #A8A89F;
    --default-background: #F5F5F4;
    --radius-standard: 0.5em;
    --gradient-one: linear-gradient(90deg, hsla(60, 5%, 96%, 1) 0%, hsla(60, 5%, 64%, 1) 100%, hsla(60, 5%, 72%, 1) 100%);
    --gradient-two: linear-gradient(90deg, hsla(60, 5%, 96%, 1) 0%, hsla(281, 27%, 20%, 1) 100%);

}


body {
    display: grid;
    min-height: 100vh;
    background: var(--default-background);
}

h2 {
    margin-bottom: 1em;
}


.navbar-brand2 {
    /* text-align: center; */
    margin: auto;
}


.navbar-brand2:hover, .navbar-brand:focus {
    text-decoration: none;
  }


footer p {
    margin: auto;
    text-align: center;
}

.navigation div {
    margin: auto;
    border-radius: var(--radius-standard);
    padding: 1em;
}



.navigation {
    background-color: var(--custom-background);
    min-height: 5em;
}

.logo {
/*  border: 2px solid var(--color_lines); */
   background: var(--default-background);
}


.logo:hover {
/*     box-shadow: 10px 10px 5px black; */
}


/* effect-shine */
.logo:hover {
  -webkit-mask-image: 
      linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
  -webkit-mask-size: 200%;
  animation: shine 2s infinite;
}

@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }
  
  to {
    -webkit-mask-position: -50%;
  }
}


.navigation a {
    color: var(--text-color);
}



.results_table {
    width: 100%;
}


tr:nth-child(even) {
    background: var(--table-background);
}

td, th {
    border-left: 1px solid var(--color_lines);
    border-right: 1px solid var(--color_lines);
}



table th {
    border-bottom: 1px solid var(--color_lines);
    text-align: center;
    padding: 1em;
    border-top: 1px solid var(--color_lines);
    
}

table td {
    text-align: center;
}

/* last bottom border  */
table.results_table tr:last-child {
    border-bottom: 1px solid var(--color_lines);
    
}


td, th {
   word-wrap: break-word;
}

td {
   padding-left: 1em;
   padding-right: 1em;
}





@media print {
    body * {
        visibility: hidden;
    }


    #printable, #printable * {
        visibility: visible;
    }

    #printable {
        position: absolute;
        left: 0;
        top: 0;
    }
}



.myform {
    width: 20em;
    margin: auto;

}


.form-group {
    /* padding-bottom: 0; */

}

.btn, .alert, .form-control {
    border-radius: 0;
}


.btn-download {
    border-radius: var(--radius-standard);
}

.btn-calculating {
    background: var(--default-background);
    border-radius: var(--radius-standard);
}

.btn-error {
    background: var(--custom-background-three);
    color: var(--text-color-inverse);
    border-radius: var(--radius-standard);
}

.btn-calculating:hover {
    background-color: none;
    pointer-events: none;
}


div.results .btn.button-goto {
    margin-top: 1em;
 
}

.main-content .btn.button-header {
/*     margin-top: 1em; */
    margin-bottom: 1em;
    
}


.btn.button-refresh {
    border-radius: var(--radius-standard);
    margin-left: 1em;
    background: var(--default-background);
    color: var(--text-color);

}

.btn.button-refresh:hover{
    /*     font-weight: bold; */
        background: var(--custom-background-white);
    }


.nav-link {
    margin: 0.5em;
    margin-left:0;
    padding:0;
    border-bottom: 1px solid var(--color_lines);
}


.nav-item {
/*    keep link words in one line  */
    white-space: nowrap;
}

.main-content {
    margin: 2em;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    grid-column-start: 2;
    grid-row-start: 2;
    grid-row-end: 3;
    
}

@media (max-width: 768px) {
        .my-nav {
            display: inline;
        }
        
}


#next .btn-primary {
    margin-top: 0.5em;
}


#next h2 {
    margin-top: 1em;
}

div.main {
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    margin-top: 1.5em;
    margin-bottom: 2.5em;
}


nav.my-nav {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
}



nav.my-nav ul {
   list-style: none;
    margin: none;
    
}

.my-nav {
/*     margin: 2.5em;
    margin-bottom: 0.2em;
    padding:0; */


}



.footer, footer {
/*     margin-top: 2em; */
    background-color: var(--custom-background);
    color: var(--text-color);
    min-height: 10em;
    align-content: center;
/*     margin-bottom: 0; */
    

   
}

.alert-message {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;

    /* margin-bottom: 0; */
}
/* #login {
    width: 30em;
    margin: auto;
    border: red 5px solid;
} */