:root {
    background-color: #5714d4;
    font-family: 'Open Sans', sans-serif;
}
h1 {
    font-size: 120%;
    text-align: center;
}
h2 {
    font-size: 100%;
    text-align: center;
}
.app {
    width: 75%;
    margin: auto;
    padding-top: 10%;
}
.main {
    width: auto;
    height: 550px;
    padding: 12px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.39);
}
.title-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    text-align: center;
}
.title {
    padding-left: 15px;;
    text-align: center;
}
#toggle-span {
    width: auto;
    height: 34px;
    font-size: 12px;
}
.toggle {
    padding-top: 15px;
}
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}
.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ff7a38;
    -webkit-transition: .4s;
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}
input:checked + .slider {
    background-color: #5714d4;
}
input:focus + .slider {
    box-shadow: 0 0 1px #5714d4;
}
input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}
.slider.round:before {
    border-radius: 50%;
}
.pass-container {
    width: 100%;
    padding-top: 12px;
    display: block;
    text-align: center;
}
.pin-container {
    width: 100%;
    padding-top: 12px;
    text-align: center;
    display: none;
}
.counter-container {
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: center;
}
.output {
    height: 55px;
    padding-top: 12px;
}
.pass-length {
    width: 55px;
    height:40px;
    font-size: 175%;
    text-align: center;
    border: #000000 1px solid;
    user-select: none;
}
.pin-length {
    width: 55px;
    height:40px;
    font-size: 175%;
    text-align: center;
    border: #000000 1px solid;
    user-select: none;
}
.num-up {
    width: 45px;
    height:40px;
    background-color: #5714d4;
    color:#ffffff;
    font-size: 175%;
    text-align: center;
    border: #000000 1px solid;
    user-select: none;
}
.num-up:hover {
    background-color: #ff7a38;
    border-color: #ff7a38 1px solid;
    color: #ffffff;

}
.num-down {
    width: 45px;
    height: 40px;
    background-color: #5714d4;
    color:#ffffff;
    font-size: 162%;
    text-align: center;
    border: #000000 1px solid;
    user-select: none;
}
.num-down:hover {
    background-color: #ff7a38;
    color: #ffffff;
}

#myPassword {
    height: 45px;
    width: 200px;
    border-radius: 5px;
    font-family: "Open Sans", sans-serif;
    font-size: 150%;
    font-weight: 500;
    color: darkmagenta;
    text-align: center;
}
#myPin {
    height: 45px;
    width: 200px;
    border-radius: 5px;
    font-family: "Open Sans", sans-serif;
    font-size: 150%;
    font-weight: 500;
    color: darkmagenta;
    text-align: center;
}
#myBtn {
    width: 140px;
    height: 45px;
    background-color: #5714d4;
    border: #000000 0px solid;
    transition-duration: 0.5s;
    border-radius: 25px;
    color:#ffffff;
    font-size: 20px;
    padding: 8px;
    
}
#myBtn:hover {
    border:#ff7a38 1px solid;
    background-color: #ff7a38;
    color:#ffffff;
}
.alert {
    display: none;
    background-color: #7c0000;
    color: #ffffff;
    text-align: center;
    border-radius: 25px;
}
.footer {
    position: relative;
    width: auto;
    height: 200px;
    padding: 12px;
    color: #ffffff;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    user-select: none;
}