#main.desktop {
       position: relative;
       display: flex;
       flex-direction: column;
       justify-content: center;
       background: transparent;
       padding: 10px;
       max-width: 90%;

       #confirmed {
              position: absolute;
              z-index: 1;
              text-align: center;
              font-size: 15px;
              align-self: center;
              bottom: calc(100% + 10px);
              opacity: 0;
              transition: 0.3s ease;
              scale: 0.9;
              line-height: 1.1;
              translate: 0% 50%;

              &.active {
                     opacity: 1;
                     scale: 1;
                     translate: 0% 0%;
              }
              span {
                     font-size: 10px;
                     opacity: 0.7;
              }
       }

       form {
              gap: 5px;
              display: flex;
              flex-direction: column;
       }

       .power {
              position: relative;
              display: flex;
              flex-direction: row;
              gap: 5px;

              .control {
                     padding: 10px;
                     background: var(--bg2);
                     display: flex;
                     flex-direction: row;
                     align-items: center;
                     gap: 10px;

                     input[type="text"] {
                            position: absolute;
                            pointer-events: none;
                            opacity: 0;
                     }
                     span {
                            opacity: 0.2;
       
                            &:nth-child(2) {
                                   scale: 0.5;
                            }
                     }
              }
              .text {
                     padding: 0px 10px;
                     background: var(--bg2);
                     display: flex;
                     flex-direction: row;
                     align-items: center;
                     justify-content: center;
                     gap: 10px; 
                     min-width: 50px;

                     h3 {
                            color: rgb(122, 122, 122);
                            font-size: 12px;
                     }

                     .cur-value {
                            color: var(--pri);
                            font-size: 20px;
                     }
              }
       }
       .duration {
              position: relative;
              display: flex;
              flex-direction: row;
              gap: 5px;

              .control {
                     padding: 10px;
                     background: var(--bg2);
                     display: flex;
                     flex-direction: row;
                     align-items: center;
                     gap: 10px;

                     input[type="text"] {
                            position: absolute;
                            pointer-events: none;
                            opacity: 0;
                     }
                     span {
                            opacity: 0.2;
       
                            &:nth-child(2) {
                                   scale: 0.5;
                            }
                     }
              }
              .text {
                     padding: 0px 10px;
                     background: var(--bg2);
                     display: flex;
                     flex-direction: row;
                     align-items: center;
                     justify-content: center;
                     gap: 10px; 
                     min-width: 50px;

                     h3 {
                            color: rgb(122, 122, 122);
                            font-size: 12px;
                     }

                     .cur-value {
                            color: var(--pri);
                            font-size: 20px;
                     }
              }
       }
       button {
              margin-top: 10px;
              width: 100%;
              outline: 0;
              border: 0;
              background: var(--bg2);
              box-shadow: inset 0px 0px 0px 1px var(--bgtrans2);
              padding: 6px 10px 3px 10px;
              color: var(--pri);
              cursor: pointer;
              transition: 0.1s ease;

              &:hover {
                     box-shadow: inset 0px 0px 0px 1px var(--pri),
                            inset 0px 0px 3px 1px var(--pri);
                     animation: submit_hover 0.1s ease-in-out infinite;
                     scale: 1.2;
              }
       }
}
#main.mobile {
       position: absolute;
       display: flex;
       background: transparent;
       flex-direction: column-reverse;
       background: transparent;
       padding: 10px;
       width: 90%;
       bottom: 70px;

       form {
              gap: 5px;
              display: flex;
              flex-direction: column;
       }

       #confirmed {
              position: absolute;
              z-index: 1;
              text-align: center;
              font-size: 20px;
              align-self: center;
              bottom: calc(100% + 10px);
              opacity: 0;
              transition: 0.3s ease;
              scale: 0.9;
              line-height: 1.1;
              translate: 0% 50%;

              &.active {
                     opacity: 1;
                     scale: 1;
                     translate: 0% 0%;
              }
              span {
                     font-size: 15px;
                     opacity: 0.7;
              }
       }

       .power {
              position: relative;
              background: transparent;
              display: flex;
              flex-direction: row;
              width: 100%;
              gap: 5px;

              .control {
                     padding: 10px;
                     background: var(--bg2);
                     display: flex;
                     flex-direction: row;
                     align-items: center;
                     gap: 10px;
                     flex-grow: 1;

                     input[type="text"] {
                            position: absolute;
                            pointer-events: none;
                            opacity: 0;
                     }
                     span {
                            opacity: 0.2;
       
                            &:nth-child(2) {
                                   scale: 0.5;
                            }
                     }
              }
              .text {
                     padding: 0px 10px;
                     background: var(--bg2);
                     display: flex;
                     flex-direction: row;
                     align-items: center;
                     justify-content: center;
                     gap: 10px; 
                     min-width: 50px;

                     h3 {
                            color: rgb(122, 122, 122);
                            font-size: 12px;
                     }

                     .cur-value {
                            color: var(--pri);
                            font-size: 20px;
                     }
              }
       }
       .duration {
              position: relative;
              background: transparent;
              display: flex;
              flex-direction: row;
              width: 100%;
              gap: 5px;

              .control {
                     padding: 10px;
                     background: var(--bg2);
                     display: flex;
                     flex-direction: row;
                     align-items: center;
                     gap: 10px;
                     flex-grow: 1;

                     input[type="text"] {
                            position: absolute;
                            pointer-events: none;
                            opacity: 0;
                     }
                     span {
                            opacity: 0.2;
       
                            &:nth-child(2) {
                                   scale: 0.5;
                            }
                     }
              }
              .text {
                     padding: 0px 10px;
                     background: var(--bg2);
                     display: flex;
                     flex-direction: row;
                     align-items: center;
                     justify-content: center;
                     gap: 10px; 
                     min-width: 50px;

                     h3 {
                            color: rgb(122, 122, 122);
                            font-size: 12px;
                     }

                     .cur-value {
                            color: var(--pri);
                            font-size: 20px;
                     }
              }
       }
       
       button {
              position: fixed;
              left: 50%;
              translate: -50% 0%;
              outline: 0;
              border: 0;
              bottom: 10px;
              width: 90%;
              height: 50px;
              background: var(--bg2);
              box-shadow: inset 0px 0px 0px 1px var(--bgtrans2);
              padding: 6px 10px 3px 10px;
              color: var(--pri);
              cursor: pointer;
              transition: 0.1s ease;

              &:hover {
                     box-shadow: inset 0px 0px 0px 1px var(--pri),
                            inset 0px 0px 3px 1px var(--pri);
                     animation: submit_hover 0.1s ease-in-out infinite;
                     scale: 1.2;
              }
       }
}

@keyframes submit_hover {
       from {
              rotate: -0.5deg;
       }
       50% {
              rotate: 0.5deg;
       }
       to {
              rotate: -0.5deg;  
       }
}