.controller.custom {
    height: 300px;
    width: 500px;
}
.custom.disconnected div {
    display: none;
}
.custom .triggers {
    position: absolute;
    height: 40px;
    width: 100%;
    top: 1px;
}
.custom .trigger,
.custom .trigger-button {
    position: absolute;
    height: 30px;
    width: 90px;
    border: 5px solid white;
    border-top-left-radius: 50px 30px;
    border-top-right-radius: 50px 30px;
}
.custom .trigger {
    opacity: 0;
    background-color: #f2a33a;
    z-index: 2;
}
.custom .trigger-button {
    background-color: #0000c0;
}
.custom .trigger.left,
.custom .trigger-button.left {
    left: 0;
}
.custom .trigger.right,
.custom .trigger-button.right{
    right: 0;
}
.custom .bumpers {
    position: absolute;
    height: 30px;
    width: 100%;
    top: 36px;
}
.custom .bumper {
    height: 20px;
    width: 90px;
    border: 5px solid white;
    border-radius: 0 0 15px 15px;
    background-color: #0000c0;
}
.custom .bumper.pressed {
    background-color: #f2a33a;
}
.custom .bumper.left {
    float: left;
}
.custom .bumper.right {
    float: right;
}
.custom .arrows {
    position: absolute;
    height: 40px;
    width: 240px;
    top: 70px;
    left: calc(50% - 120px);
}
.custom .back,
.custom .start {
    height: 30px;
    width: 20px;
    border: 5px solid white;
    border-radius: 15px;
    background-color: #0000c0;
}
.custom .back.pressed,
.custom .start.pressed {
    background-color: #f2a33a;
}
.custom .back {
    float: left;
}
.custom .start {
    float: right;
}
.custom .abxy {
    position: absolute;
    height: 130px;
    width: 130px;
    top: 75px;
    right: 0;
}
.custom .button {
    position: absolute;
    height: 40px;
    width: 40px;
    border: 5px solid white;
    border-radius: 50%;
    background-color: #0000c0;
}
.custom .button.pressed {
    background-color: #f2a33a;
}
.custom .a {
    bottom: 0;
    left: calc(50% - 25px);
}
.custom .b {
    top: calc(50% - 25px);
    right: 0;
}
.custom .x {
    top: calc(50% - 25px);
}
.custom .y {
    left: calc(50% - 25px);
}
.custom .sticks {
    position: absolute;
    height: 100px;
    width: 250px;
    bottom: 25px;
    left: calc(50% - 125px);
    z-index: 2;
}
.custom .stick {
    position: absolute;
    height: 90px;
    width: 90px;
    border: 5px solid white;
    border-radius: 50%;
    background-color: #0000c0;
}
.custom .stick.pressed {
    background-color: #f2a33a;
}
.custom .stick.left {
    top: 0;
    left: 0;
}
.custom .stick.right {
    top: calc(100% - 100px);
    left: calc(100% - 100px);
}
.custom .dpad {
    position: absolute;
    height: 130px;
    width: 130px;
    top: 75px;
}
.custom .face {
    position: absolute;
    border: 5px solid white;
    border-radius: 13px;
    background-color: #0000c0
}
.custom .face.up,
.custom .face.down {
    height: 46px;
    width: 26px;
}
.custom .face.left,
.custom .face.right {
    height: 26px;
    width: 46px;
}
.custom .face.up {
    left: calc(50% - 18px);
    border-bottom-left-radius: 18px 28px;
    border-bottom-right-radius: 18px 28px;
}
.custom .face.down {
    left: calc(50% - 18px);
    bottom: 0;
    border-top-left-radius: 18px 28px;
    border-top-right-radius: 18px 28px;
}
.custom .face.left {
    top: calc(50% - 18px);
    border-top-right-radius: 28px 18px;
    border-bottom-right-radius: 28px 18px;
}
.custom .face.right {
    top: calc(50% - 18px);
    right: 0;
    border-top-left-radius: 28px 18px;
    border-bottom-left-radius: 28px 18px;
}
.custom .face.pressed {
    background-color: #f2a33a
}
.custom .wheels {
    position: absolute;
    height: 130px;
    width: 280px;
    bottom: 10px;
    left: calc(50% - 140px);
}
.custom .wheel {
    position: absolute;
    height: 120px;
    width: 120px;
    border: 5px solid white;
    border-radius: 50%;
    background-color: black;
    transform: none !important;
}
.custom .wheel.left {
    top: 0;
    left: 0;
}
.custom .wheel.right {
    top: 0;
    right: 0;
}