.midicaptain {
    width: 90cqw;    
}

/* @container (orientation: landscape) {
    .midicaptain {
        max-width: unset;        
    }
} */

.midicaptain #pyswitch-inputs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/****************************************************************/

.midicaptain #pyswitch-display {
    position: absolute;
    transform: translate(-50%, -50%);
}

/****************************************************************/

.midicaptain .pyswitch-switch {
    position: absolute;
}

.midicaptain .pyswitch-switch .pyswitch-switch-visual {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;

    /* mask: radial-gradient(ellipse 40% 40% at center, #0000 98%, #000); */
    mask-image: url("midicaptain-switchmask.svg");
    mask-size: 100%;    
}

.midicaptain .pyswitch-switch .pyswitch-switch-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 50%;
    transition: outline 0.1s ease-out;
}

.midicaptain .pyswitch-switch .pyswitch-switch-overlay:hover {
    outline: 4px solid rgba(255, 255, 255, 0.5);
}

.midicaptain .pyswitch-switch .pyswitch-switch-overlay:active:hover {
    outline: 4px solid rgba(255, 255, 255, 1);
}

/****************************************************************/

.midicaptain .pyswitch-switch .pyswitch-led {
    position: absolute;
}

.midicaptain .pyswitch-switch .pyswitch-led:nth-child(1) {
    top: 0;
    left: 0;
    width: 50%;
    height: 70%;
}

.midicaptain .pyswitch-switch .pyswitch-led:nth-child(2) {
    top: 0;
    right: 0;
    width: 50%;
    height: 70%;
}

.midicaptain .pyswitch-switch .pyswitch-led:nth-child(3) {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
}

/****************************************************************/

.midicaptain .pyswitch-potentiometer {
    position: absolute;
}