body,* {
    margin:0px;
    font-family: "Oswald", sans-serif;
}
a {
    color: initial;
    text-decoration: none;
}

.mainflex {
    display:flex;
    justify-content: center;
    min-width: 1200px;
}

.page {
    margin-top:5px;
    min-width: 1200px;
}

.homeflex {
    position:relative;
    display:flex;
    justify-content:space-between;
}

.homeflex .panel {
    width:calc(50% - 5px);
    position:relative;
}

.homeflex IMG {
    width: 100%;
    opacity: 1;
    position: relative;
    top: 0px;
    left: 0px;
}



  .logoflex {
      position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
      display:flex;
      z-index: 2;
    justify-content: center;
      cursor: pointer;
  }

  .vflex {
      display: flex;
flex-direction: column;
justify-content: center;
  }

  .hflex {
      display: flex;
flex-direction: row;
justify-content: space-between;
  }

  .loginflex {
      position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
      display:flex;
      z-index: 2;
    justify-content: center;
      cursor: pointer;

  }

  .darkBtn {
      border-radius: 3px;
    padding: 2px;
    background-color: black;
    color: white;
    display: inline-block;
  }

  .lightBtn {
    border-radius: 3px;
    padding: 2px;
    background-color: #3f3f3f;
    color: white;
    display: inline-block;
    border: 1px solid black;
  }

  .catalogItem {
    border: 1px solid black;
    margin-bottom: 4px;
      cursor: pointer;
      font-family: Spartan,Serif;
      width: 24%;
      min-width: 240px;
  }

    .catalogItemBasket {
    border: 1px solid black;
    margin-bottom: 4px;
      cursor: pointer;
      font-family: Spartan,Serif;
        display:flex;

  }

  .catalogArtNr {
      border-right: 1px solid black;
    border-bottom: 1px solid black;
  }

  .catalogPrice {
      border-left: 1px solid black;
    border-bottom: 1px solid black;
  }

  .onStock {
      display: inline-block;
        background-color: lightgreen;
        padding-left: 4px;
        padding-right: 4px;
        font-weight: bold;
  }

    .soldOut {
      display: inline-block;
        background-color: lightcoral;
        padding-left: 4px;
        padding-right: 4px;
        font-weight: bold;
  }

    .paddingH {
        padding-left: 4px;
        padding-right: 4px;
    }

    #detailPopup {
        position: fixed;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,0.5);
        justify-content: center;
        display:none;
        z-index:5;
    }

    #detailPopup input[type=text] {
        width: 30px;
        text-align: center;
        border:1px solid black;
        border-radius: 0px;
    }

    input[type=text] {
        border:1px solid black;
        width: 200px;

    }



    #detailPopup td {
        text-align: center;
    }


    #detailPanel {
        background-color: white;
        border: 1px solid black;
    }

    .panelHeader {
        background-color: antiquewhite;
        border-bottom: 1px solid black;
        font-weight: bold;
        padding-left: 2px;
    }

    .headerPadding {
        padding: 4px;
    }



    .panelButtons {
        display: flex;
        justify-content: end;
        margin-top:5px;
    }

    .panelButtons input {
        background-color: #d7f2fa;
        border: 1px solid black;
        font-weight: bold;
        padding: 3px;
        cursor: pointer;
    }

    .topnav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;

    }

    .topnav li {
    float: left;
    font-family: Spartan;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 1px;
        padding-right: 10px;
        text-decoration: underline;
        cursor: pointer;
        padding-bottom:5px;
}

    .top {
        position: fixed;
        top: 0px;
        background-color: white;
        width:1200px;
        /* width: 100%; */
        height: 58px;
        z-index: 2;
    }

    .midcontent {
        margin-top: 70px;
    }

    .spacer {
        padding: 5px;
    }

    .popup {
        display: none;
        width: 100%;
        position: fixed;
        height: 100%;
        top: 0px;
        left: 0px;
        background-color: rgba(255, 255, 255, 0.6);
    }

    .popupHeader {
        background-color: #cf2023;
        color: white;
        padding: 2px;
        font-weight: bold;
    }

    .popupPanel {
        border: 1px solid black;
        color: rgb(0,0,0);
        padding: 0px;
        max-width: 100%;
        overflow-y: auto;
        text-align: left;
        box-shadow: 1px 1px gray;
        background-color: white;
    }



    .outerTable {
        border-collapse: collapse;
        width: 100%;
    }
    table.outerTable > tbody > tr > td {
        border-bottom: 1px solid black;
        padding-top: 20px;
    }
    .hFlex {
        display: flex;
        padding: 10px;
    }
    .hFlex DIV:first-child {
        margin-right: 20px;
        width: 300px;
    }

    .hFlex DIV:nth-child(2) {
        margin-right: 20px;
        width: 300px;
    }


    innerTable th:first-child {
        width: 120px;
    }

    .innerTable th , td {
        vertical-align: top;
        padding-top: 0px;
        border-bottom:none;
        text-align: left;
    }

        #requests {
            margin-top: 20px;
        }

        .container {
            background-color: #f3f3f3;
            margin-bottom: 10px;
            border: 1px solid black;
        }

        .headerButton {
  display: inline-block;
  right: 2px;
  position: absolute;
  border-radius: 3px;
  color: black;
  background-color: #EEE;
  padding: 2px;
  font-size: 10px;
  cursor: pointer;
}

#infoMessage {
    position: fixed;
    top: 20%;
    height: 60px;
    width: 600px;
    left: 50%;
    margin-left: -300px;
    background-color: #dbdbdb;
    border: 1px solid black;
    text-align: center;
    display: none;
    line-height: 60px;
}