﻿.sockets-wrapper{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;}.socket{position:relative;display:block;width:30px;height:30px;background-position:center center;background-repeat:no-repeat;background-size:contain;}.socket-green{background-image:url("/images/items/socket-green.png");}.socket-blue{background-image:url("/images/items/socket-blue.png");}.socket-red{background-image:url("/images/items/socket-red.png");}.socket-white{background-image:url("/images/items/socket-white.png");}.socket-abyss{background-image:url("/images/items/socket-abyss.png");}.link::before{content:'';position:absolute;top:-19px;left:7px;display:block;width:14px;height:28px;background-position:center center;background-repeat:no-repeat;background-size:contain;background-image:url("/images/items/socket-link-vertical.png");}.sockets{display:flex;flex-wrap:wrap;}.sockets.narrow{width:30px;flex-direction:column;}.sockets.narrow .socket{margin:5px 0;}.sockets.narrow .socket:first-child{margin-top:0;}.sockets.narrow .socket:last-child{margin-bottom:0;}.sockets.wide{width:70px;flex-direction:row;}.sockets.wide .socket{margin:5px;}.sockets.wide .socket:first-child:last-child{margin:0 20px;}.sockets.wide .socket:nth-child(1),.sockets.wide .socket:nth-child(2){margin-top:0;}.sockets.wide .socket:nth-child(odd){margin-left:0;}.sockets.wide .socket:nth-child(even){margin-right:0;}.sockets.wide .socket:nth-last-child(1),.sockets.wide .socket:nth-child(odd):nth-last-child(2){margin-bottom:0;}.sockets.wide .socket:nth-child(3){position:relative;left:40px;}.sockets.wide .socket:nth-child(4){position:relative;right:40px;}.sockets.wide .link:nth-child(even)::before{background-image:url("/images/items/socket-link-horizontal.png");top:9px;left:-19px;width:28px;height:14px;}.sockets.wide .link:nth-child(4)::before{left:auto;right:-19px;}