@import "css_flexboxes.css";

:root {
  --bg-color: whitesmoke;
  --pr-color: #4CAF50;
  --sc-color: #45a049;
  --tx-color: slategrey;
  --br-color: #aaaaaa; 
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 600px 1fr;
  grid-template-rows: 75px 1fr 75px;
  align-items: center;
  justify-content: center;
  gap: 0px 0px;
}

.shadow {
  -webkit-filter: drop-shadow( 5px 5px 5px rgba(0, 0, 0, .7));
  filter: drop-shadow( 5px 5px 5px rgba(0, 0, 0, .7));
}
.shadowLogo {
  -webkit-filter: drop-shadow( 5px 5px 5px rgba(0, 0, 0, .4));
  filter: drop-shadow( 5px 5px 5px rgba(0, 0, 0, .4));
}

.shadow2 {
  filter: drop-shadow(.5rem .5rem 1rem rgba(0, 0, 0, .4))
}
html, body
{
    background-color: var(--bg-color);
    font-family: Consolas, monaco, monospace;
    color: var(--tx-color);
    margin: 0;
    min-height: 100%;
    height: 100%;
}

    .flex-card {
           display: flex;
           flex-flow: wrap;
           justify-content: space-evenly;
           padding: 0;
           margin: 0;
           list-style: none;
        }

        .flex-item {
                padding: 5px;
                margin-top: 10px;
            filter: drop-shadow(.5rem .5rem 1rem rgba(0, 0, 0, .4))
         }

table.norm {
  border-collapse: collapse;
  align: center;
}

td.norm, th.norm {
  border: 5px solid var(--br-color);
  text-align: left;
  padding: 2px;
}

@media (hover: hover) and (pointer: fine) {
      .underline:hover::before{
          left: 0;
          right: auto;
          width: 100%;
      }
}

.warning
{
    border: 2px solid var(--br-color);
    background-color:mistyrose;
    width: 500px;
    max-width: 80%;
    margin: 8px 0;
    border-radius: 4px;
    text-align:center;
    padding: 12px 0px;
    opacity: 1;
    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.navbut
{
    display: block;
    border: 1px solid var(--br-color);
    background-color: var(--pr-color);
    color: white;
    cursor: pointer;
    text-decoration: none;

    max-width: 80%;

    border-radius: 4px;
    text-align:center;
    padding: 5px 0px;
    margin: 2px 0;
    
    opacity: 1;
    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.navbut:hover
{
	background-color: var(--sc-color);
}

input{
    border-radius: 5px;  
    border: 1px solid var(--br-color);
    
}

@keyframes fadeInAnimation 
{
    0% 
    {
	border-radius: 0px;
        opacity: 0;
    }
    50%
    {
	opacity: 1;
    }
    100% 
    {
        border-radius: 10px;
    }
}

.box
{
    margin: 5px 0;
    border-radius: 4px;
    text-align:center;
    padding: 5px 5px;

    background-color: var(--bg-color);
            
    display: inline-block;
    border: 1px solid var(--br-color);
    box-sizing: border-box;
    
    -webkit-filter: drop-shadow( 5px 5px 5px rgba(0, 0, 0, .4));
    filter: drop-shadow( 5px 5px 5px rgba(0, 0, 0, .4));
            
    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    
}

.boxOK
{
    margin: 5px 0;
    border-radius: 4px;
    text-align:center;
    padding: 5px 5px;

    background-color: lightgreen;
    color: white;
            
    display: inline-block;
    border: 1px solid var(--br-color);
    box-sizing: border-box;
    
    -webkit-filter: drop-shadow( 5px 5px 5px rgba(0, 0, 0, .4));
    filter: drop-shadow( 5px 5px 5px rgba(0, 0, 0, .4));
            
    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    
}

        textarea
        {
            width: 500px;
            max-width: 100%;
            margin: 5px 0;
            border-radius: 4px;
            text-align:center;
            padding: 5px 5px;
            
            display: inline-block;
            border: 1px solid var(--br-color);
            box-sizing: border-box;
            
            animation: fadeInAnimation ease 2s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }


        input, select
        {
            width: 500px;
            max-width: 100%;
            margin: 5px 0;
            border-radius: 4px;
            text-align:center;
            padding: 5px 5px;
            
            animation: fadeInAnimation ease 2s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }

        input.nr
        {
            width: 40px;
            max-width: 100%;
        }

        input.artikel
        {
            width: 340px;
            max-width: 100%;
        }
        input.preis
        {
            width: 90px;
            max-width: 100%;
        }

        input[type=text]
        {
            display: inline-block;
            border: 1px solid var(--br-color);
            box-sizing: border-box;
        }
        
        input[type=password]
        {
            display: inline-block;
            border: 1px solid var(--br-color);
            box-sizing: border-box;
        }

        input[type=submit]
        {
            background-color: var(--pr-color);
            color: white;
            border: none;
            cursor: pointer;
        }

        input[type=submit]:hover 
        {
            background-color: var(--sc-color);
        }