﻿.code-table-info {
   border-right: 5px solid white;
   padding: 8px;
   background-color: #e5e3e3;
}

   .code-table-info p {
      background-color: white;
      color: #07426A;
   }

.expiration-table-info {
   padding: 8px;
   background-color: #e5e3e3;
}

   .expiration-table-info p {
      background-color: white;
      color: #07426A;
   }

.validate-table-title {
   padding: 8px;
   color: white;
   font-size: 3vh;
}

.code-table-title {
   border-right: 5px solid #E6E6E6;
   padding: 8px;
   color: white;
   font-size: 3vh;
}

.table-discount {
   width: 56vh;
   border-collapse: collapse;
   background-color: #E6E6E6;
   border: none;
}

.generatedButton {
   width: 24vh;
   height: 4vh;
   font-size: 2vh;
   border: none;
   background-color: #07426a;
   color: white;
}

.expiration-date {
   margin-right: 10vh;
   width: 14vh;
   height: 3vh;
   font-size: 21px;
   color: #07426a;
   border: none;
}

.expiration-title {
   font-size: 21px;
   color: #07426a;
}

.button-design {
   background-color: transparent;
   border: none;
}

.material-symbols-outlined {
   color: white;
}

.container-info-header {
   background-color: #07426a;
   color: white;
   padding-bottom: 10px;
   padding-top: 10px;
   margin-bottom: 0px;
}

.code-input {
   margin-left: 2vh;
}

.container-info {
   padding-top: 3vh;
   background-color: #e5e3e3;
   padding-bottom: 3vh;
}

.custom-number-input {
   display: flex;
   align-items: center;
   background-color: white;
}

   .custom-number-input button {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #ccc;
      cursor: pointer;
      margin: 0 2px;
      background-color: transparent;
      color: #07426a;
      border: none;
   }

   .custom-number-input .input-container {
      position: relative;
      display: flex;
      align-items: center;
   }

   .custom-number-input input {
      width: 150px;
      text-align: center;
      border: 1px solid #ccc;
      padding: 5px;
      border: none;
      font-size: 35px;
      color: #07426a;
   }

   .custom-number-input .percentage-icon {
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      font-size: 14px;
      color: #333;
      font-size: 35px;
      color: #07426a;
   }

.generatedCode {
   width: 40vh;
   border: none;
   color: #07426A;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

input[type=number] {
   -moz-appearance: textfield;
}
