.controller.custom {
    width: 400px;
    height: 280px;
    /*outline: 1px solid black;*/
}
.controller.custom.disconnected {
    background: red;
    color: white;
    font-size: 18pt;
}
.controller.custom.disconnected::after {
    content: 'Disconnected.';
    display: block;
    text-align: center;
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}
.controller.custom.disconnected * {
    opacity: 0;
}

.custom .dpad .face,
.custom .abxy .button,
.custom .triggers .trigger-button,
.custom .bumpers .bumper {
    background: rgb(20, 20, 20);
    border: 2px solid #222;
    width: 46px;
    height: 46px;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 5px #222;
}
.custom .dpad .face.pressed,
.custom .abxy .button.pressed,
.custom .triggers .trigger-button.pressed,
.custom .bumpers .bumper.pressed {
    box-shadow: 0 0 #222;
    transform: translateY(5px);
    background-position-y: 47px;
}

.custom .dpad .face {
    background-image: url('data:image/svg+xml;utf8,<svg width="195.57px" height="96.744px" enable-background="new 0 0 195.574 96.744" version="1.1" viewBox="0 0 195.57 96.744" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g id="A_1_"><path d="M23.688,0c13.1,0,23.705,10.606,23.705,23.682c0,13.077-10.605,23.682-23.705,23.682     C10.606,47.364,0,36.759,0,23.682C0,10.606,10.606,0,23.688,0z" fill="#141414"/></g><path d="m18.83 39.31v-15.819h-6.9899l11.838-15.51 11.874 15.571h-7.0099v15.832z" fill="#fff"/><g id="B_1_"><path d="M73.084,0c13.097,0,23.703,10.61,23.703,23.687S86.181,47.369,73.084,47.369     c-13.085,0-23.69-10.606-23.69-23.683S59.999,0,73.084,0z" fill="#141414"/></g><path d="m77.957 8.0567v15.819h6.9899l-11.838 15.51-11.874-15.571h7.0099v-15.832z" fill="#fff"/><g id="Y_1_"><path d="m171.87 0c13.1 0 23.705 10.614 23.705 23.69 0 13.077-10.605 23.682-23.705 23.682-13.082 0-23.688-10.605-23.688-23.682 0-13.076 10.606-23.69 23.688-23.69z" fill="#141414"/><path d="m187.51 28.552h-15.819v6.9899l-15.51-11.838 15.571-11.874v7.0099h15.832z" fill="#fff"/></g><g id="X_1_"><path d="M122.47,0c13.105,0,23.711,10.61,23.711,23.687s-10.605,23.683-23.711,23.683     c-13.076,0-23.683-10.606-23.683-23.683S109.394,0,122.47,0z" fill="#141414"/></g><path d="m106.86 18.819h15.819v-6.9899l15.51 11.838-15.571 11.874v-7.0099h-15.832z" fill="#fff"/><g transform="translate(0,49.5)"><g fill="#fff"><path d="m 23.688,0 c 13.1,0 23.705,10.606 23.705,23.682 0,13.077 -10.605,23.682 -23.705,23.682 C 10.606,47.364 0,36.759 0,23.682 0,10.606 10.606,0 23.688,0 Z" fill="#fff"/></g><path d="m18.83 39.31v-15.819h-6.9899l11.838-15.51 11.874 15.571h-7.0099v15.832z" fill="#1a1a1a"/><g fill="#fff"><path d="m73.084 0c13.097 0 23.703 10.61 23.703 23.687s-10.606 23.682-23.703 23.682c-13.085 0-23.69-10.606-23.69-23.683s10.605-23.686 23.69-23.686z" fill="#fff"/></g><path d="m77.957 8.0567v15.819h6.9899l-11.838 15.51-11.874-15.571h7.0099v-15.832z" fill="#1a1a1a"/><path d="m171.87 0c13.1 0 23.705 10.614 23.705 23.69 0 13.077-10.605 23.682-23.705 23.682-13.082 0-23.688-10.605-23.688-23.682 0-13.076 10.606-23.69 23.688-23.69z" fill="#fff"/><path d="m187.51 28.552h-15.819v6.9899l-15.51-11.838 15.571-11.874v7.0099h15.832z" fill="#1a1a1a"/><g fill="#fff"><path d="m122.47 0c13.105 0 23.711 10.61 23.711 23.687s-10.605 23.683-23.711 23.683c-13.076 0-23.683-10.606-23.683-23.683s10.607-23.687 23.683-23.687z" fill="#fff"/></g><path d="m106.86 18.819h15.819v-6.9899l15.51 11.838-15.571 11.874v-7.0099h-15.832z" fill="#1a1a1a"/></g></svg>');
    background-position-x: -1px;
    background-position-y: -1px;
}

.custom .dpad .face.up {
    top: 180px;
    left: 130px;
    width: 70px;
    height: 70px;
    background-size: 420%;
    background-position-x: 0;
}
.custom .dpad .face.up.pressed {
    /* fuck it */
    background-position-y: 70px;
}
.custom .dpad .face.right {
    top: 70px;
    left: 110px;
    background-position-x: -99px;
}
.custom .dpad .face.down {
    top: 30px;
    left: 60px;
    background-position-x: -50px;
}
.custom .dpad .face.left {
    top: 30px;
    left: 0;
    background-position-x: -150px;
}

.custom .abxy {
    /*
    legit i already positioned all of these and just wanted to
    nudge em all over a bit so consider this a hack lol
    */
    position: absolute;
    left: 4px;
}

.custom .abxy .button {
    background-image: url('https://gamepadviewer.com/xbox-assets/abxy.svgz');
    background-position-y: -1px;
}

.custom .abxy .button.a {
    left: 160px;
    top: 105px;
    background-position-x: -1px;
}
.custom .abxy .button.x {
    left: 165px;
    top: 45px;
    background-position-x: -100px;
}
.custom .abxy .button.b {
    left: 215px;
    top: 85px;
    background-position-x: -50px;
}
.custom .abxy .button.y {
    left: 222px;
    top: 25px;
    background-position-x: -149px;
}

.custom .triggers .trigger-button,
.custom .bumpers .bumper {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22195.574%22%20height%3D%2296.744%22%3E%3Cpath%20fill%3D%22%23141414%22%20d%3D%22M23.688%200c13.1%200%2023.705%2010.606%2023.705%2023.682%200%2013.077-10.605%2023.682-23.705%2023.682C10.606%2047.364%200%2036.759%200%2023.682%200%2010.606%2010.606%200%2023.688%200z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20stroke-width%3D%22.811%22%20d%3D%22M7.402%2037.998V9.366h7.996q3.017%200%204.377.78%201.374.763%202.195%202.735.822%201.973.822%204.512%200%203.223-1.245%205.332-1.246%202.09-3.723%202.637%201.232%201.093%202.028%202.402.809%201.309%202.17%204.648l2.297%205.586h-4.544l-2.747-6.23q-1.463-3.34-2.002-4.2-.54-.878-1.142-1.19-.604-.333-1.913-.333h-.77v11.953zM11.2%2021.475h2.811q2.734%200%203.414-.352.68-.351%201.066-1.21.385-.86.385-2.149%200-1.445-.514-2.324-.5-.899-1.424-1.133-.463-.098-2.773-.098H11.2zm19.421%2016.523V14.21h-5.583V9.366H39.99v4.843h-5.57V38z%22%20aria-label%3D%22RT%22%20font-family%3D%22Arial%22%20font-size%3D%2232.427%22%20font-weight%3D%22700%22%20letter-spacing%3D%220%22%20word-spacing%3D%220%22%2F%3E%3Cpath%20fill%3D%22%23141414%22%20d%3D%22M73.084%200c13.097%200%2023.703%2010.61%2023.703%2023.687S86.181%2047.369%2073.084%2047.369c-13.085%200-23.69-10.606-23.69-23.683S59.999%200%2073.084%200z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20stroke-width%3D%22.811%22%20d%3D%22M59.28%2038V9.603h3.799v23.575h9.447V38zm18.252%200V14.213h-5.584V9.368h14.954v4.844H81.33V38z%22%20aria-label%3D%22LT%22%20font-family%3D%22Arial%22%20font-size%3D%2232.427%22%20font-weight%3D%22700%22%20letter-spacing%3D%220%22%20word-spacing%3D%220%22%2F%3E%3Cpath%20fill%3D%22%23141414%22%20d%3D%22M171.869%200c13.1%200%2023.705%2010.614%2023.705%2023.69%200%2013.077-10.605%2023.682-23.705%2023.682-13.082%200-23.688-10.605-23.688-23.682%200-13.076%2010.606-23.69%2023.688-23.69z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20stroke-width%3D%22.811%22%20d%3D%22M156.006%2038.002V9.604h3.8v23.574h9.447v4.824zM171.987%209.37h7.521q2.234%200%203.325.293%201.104.273%201.964%201.171.872.899%201.45%202.403.578%201.484.578%203.34%200%202.011-.72%203.691-.705%201.68-1.924%202.52%201.72.761%202.644%202.597.924%201.836.924%204.317%200%201.953-.603%203.808-.59%201.836-1.63%202.95-1.027%201.093-2.542%201.347-.95.156-4.582.195h-6.405zm3.799%204.765v6.621h2.49q2.22%200%202.76-.097.975-.176%201.527-1.016.565-.86.565-2.246%200-1.328-.488-2.149-.475-.84-1.425-1.015-.564-.098-3.247-.098zm0%2011.387v7.656h3.517q2.054%200%202.606-.176.847-.234%201.373-1.132.54-.918.54-2.442%200-1.289-.412-2.187-.41-.899-1.193-1.309-.77-.41-3.363-.41z%22%20aria-label%3D%22LB%22%20font-family%3D%22Arial%22%20font-size%3D%2232.427%22%20font-weight%3D%22700%22%20letter-spacing%3D%220%22%20word-spacing%3D%220%22%2F%3E%3Cpath%20fill%3D%22%23141414%22%20d%3D%22M122.47%200c13.105%200%2023.711%2010.61%2023.711%2023.687S135.576%2047.37%20122.47%2047.37c-13.076%200-23.683-10.606-23.683-23.683S109.394%200%20122.47%200z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20stroke-width%3D%22.811%22%20d%3D%22M105.104%2038.001V9.37h7.997q3.016%200%204.377.78%201.373.763%202.195%202.735.821%201.973.821%204.512%200%203.223-1.245%205.332-1.245%202.09-3.722%202.637%201.232%201.093%202.028%202.402.809%201.309%202.17%204.648l2.297%205.586h-4.544l-2.747-6.23q-1.463-3.34-2.002-4.2-.54-.878-1.143-1.19-.603-.333-1.912-.333h-.77v11.953zm3.8-16.523h2.81q2.735%200%203.415-.352.68-.351%201.066-1.21.385-.86.385-2.149%200-1.445-.514-2.324-.5-.899-1.425-1.133-.462-.098-2.772-.098h-2.965zm15.197-12.109h7.522q2.233%200%203.324.293%201.104.273%201.964%201.171.873.899%201.45%202.403.578%201.484.578%203.34%200%202.011-.718%203.691-.706%201.68-1.926%202.52%201.72.761%202.644%202.597.925%201.836.925%204.317%200%201.953-.604%203.808-.59%201.836-1.63%202.95-1.027%201.093-2.541%201.347-.95.156-4.583.195h-6.405zm3.8%204.765v6.621h2.49q2.22%200%202.76-.097.975-.176%201.527-1.016.565-.86.565-2.246%200-1.328-.488-2.149-.475-.84-1.425-1.015-.565-.098-3.247-.098zm0%2011.387v7.656h3.517q2.053%200%202.605-.176.847-.234%201.374-1.132.539-.918.539-2.442%200-1.289-.41-2.187-.412-.899-1.195-1.309-.77-.41-3.363-.41z%22%20aria-label%3D%22RB%22%20font-family%3D%22Arial%22%20font-size%3D%2232.427%22%20font-weight%3D%22700%22%20letter-spacing%3D%220%22%20word-spacing%3D%220%22%2F%3E%3Cg%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M23.688%2049.5c13.1%200%2023.705%2010.606%2023.705%2023.682%200%2013.077-10.605%2023.682-23.705%2023.682C10.606%2096.864%200%2086.259%200%2073.182%200%2060.106%2010.606%2049.5%2023.688%2049.5z%22%2F%3E%3Cpath%20fill%3D%22%231a1a1a%22%20stroke-width%3D%22.811%22%20d%3D%22M7.402%2087.498V58.866h7.996q3.017%200%204.377.78%201.374.763%202.195%202.735.822%201.973.822%204.512%200%203.223-1.245%205.332-1.246%202.09-3.723%202.637%201.232%201.093%202.028%202.402.809%201.309%202.17%204.648l2.297%205.586h-4.544l-2.747-6.23q-1.463-3.34-2.002-4.2-.54-.878-1.142-1.19-.604-.333-1.913-.333h-.77v11.953zM11.2%2070.975h2.811q2.734%200%203.414-.352.68-.351%201.066-1.21.385-.86.385-2.149%200-1.445-.514-2.324-.5-.899-1.424-1.133-.463-.098-2.773-.098H11.2zm19.421%2016.523V63.71h-5.583v-4.843H39.99v4.843h-5.57V87.5z%22%20aria-label%3D%22RT%22%20font-family%3D%22Arial%22%20font-size%3D%2232.427%22%20font-weight%3D%22700%22%20letter-spacing%3D%220%22%20word-spacing%3D%220%22%2F%3E%3Cpath%20d%3D%22M73.084%2049.5c13.097%200%2023.703%2010.61%2023.703%2023.687%200%2013.077-10.606%2023.682-23.703%2023.682-13.085%200-23.69-10.606-23.69-23.683S59.999%2049.5%2073.084%2049.5z%22%2F%3E%3Cpath%20fill%3D%22%231a1a1a%22%20stroke-width%3D%22.811%22%20d%3D%22M59.28%2087.5V59.103h3.799v23.575h9.447V87.5zm18.252%200V63.713h-5.584v-4.844h14.954v4.844H81.33V87.5z%22%20aria-label%3D%22LT%22%20font-family%3D%22Arial%22%20font-size%3D%2232.427%22%20font-weight%3D%22700%22%20letter-spacing%3D%220%22%20word-spacing%3D%220%22%2F%3E%3Cpath%20d%3D%22M171.869%2049.5c13.1%200%2023.705%2010.614%2023.705%2023.69%200%2013.077-10.605%2023.682-23.705%2023.682-13.082%200-23.688-10.605-23.688-23.682%200-13.076%2010.606-23.69%2023.688-23.69z%22%2F%3E%3Cpath%20fill%3D%22%231a1a1a%22%20stroke-width%3D%22.811%22%20d%3D%22M156.006%2087.502V59.104h3.8v23.574h9.447v4.824zm15.981-28.632h7.521q2.234%200%203.325.293%201.104.273%201.964%201.171.872.899%201.45%202.403.578%201.484.578%203.34%200%202.011-.72%203.691-.705%201.68-1.924%202.52%201.72.761%202.644%202.597.924%201.836.924%204.317%200%201.953-.603%203.808-.59%201.836-1.63%202.95-1.027%201.093-2.542%201.347-.95.156-4.582.195h-6.405zm3.799%204.765v6.621h2.49q2.22%200%202.76-.097.975-.176%201.527-1.016.565-.86.565-2.246%200-1.328-.488-2.149-.475-.84-1.425-1.015-.564-.098-3.247-.098zm0%2011.387v7.656h3.517q2.054%200%202.606-.176.847-.234%201.373-1.132.54-.918.54-2.442%200-1.289-.412-2.187-.41-.899-1.193-1.309-.77-.41-3.363-.41z%22%20aria-label%3D%22LB%22%20font-family%3D%22Arial%22%20font-size%3D%2232.427%22%20font-weight%3D%22700%22%20letter-spacing%3D%220%22%20word-spacing%3D%220%22%2F%3E%3Cg%3E%3Cpath%20d%3D%22M122.47%2049.5c13.105%200%2023.711%2010.61%2023.711%2023.687%200%2013.077-10.605%2023.683-23.711%2023.683-13.076%200-23.683-10.606-23.683-23.683S109.394%2049.5%20122.47%2049.5z%22%2F%3E%3Cpath%20fill%3D%22%231a1a1a%22%20stroke-width%3D%22.811%22%20d%3D%22M105.104%2087.501V58.87h7.997q3.016%200%204.377.78%201.373.763%202.195%202.735.821%201.973.821%204.512%200%203.223-1.245%205.332-1.245%202.09-3.722%202.637%201.232%201.093%202.028%202.402.809%201.309%202.17%204.648l2.297%205.586h-4.544l-2.747-6.23q-1.463-3.34-2.002-4.2-.54-.878-1.143-1.19-.603-.333-1.912-.333h-.77v11.953zm3.8-16.523h2.81q2.735%200%203.415-.352.68-.351%201.066-1.21.385-.86.385-2.149%200-1.445-.514-2.324-.5-.899-1.425-1.133-.462-.098-2.772-.098h-2.965zm15.197-12.109h7.522q2.233%200%203.324.293%201.104.273%201.964%201.171.873.899%201.45%202.403.578%201.484.578%203.34%200%202.011-.718%203.691-.706%201.68-1.926%202.52%201.72.761%202.644%202.597.925%201.836.925%204.317%200%201.953-.604%203.808-.59%201.836-1.63%202.95-1.027%201.093-2.541%201.347-.95.156-4.583.195h-6.405zm3.8%204.765v6.621h2.49q2.22%200%202.76-.097.975-.176%201.527-1.016.565-.86.565-2.246%200-1.328-.488-2.149-.475-.84-1.425-1.015-.565-.098-3.247-.098zm0%2011.387v7.656h3.517q2.053%200%202.605-.176.847-.234%201.374-1.132.539-.918.539-2.442%200-1.289-.41-2.187-.412-.899-1.195-1.309-.77-.41-3.363-.41z%22%20aria-label%3D%22RB%22%20font-family%3D%22Arial%22%20font-size%3D%2232.427%22%20font-weight%3D%22700%22%20letter-spacing%3D%220%22%20word-spacing%3D%220%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    background-position-y: -1px;
}
.custom .triggers .trigger-button.right {
    left: 282px;
    top: 85px;
    background-position-x: -1px;
}
.custom .triggers .trigger-button.left {
    left: 340px;
    top: 100px;
    background-position-x: -50px;
}
.custom .bumpers .bumper.right {
    left: 282px;
    top: 25px;
    background-position-x: -100px;
}
.custom .bumpers .bumper.left {
    left: 340px;
    top: 40px;
    background-position-x: -149px;
}