Widget:EnviroRole

<style type="text/css"> .map-dh{ width:100%; overflow:hidden; margin:10px 0px; background:#F8F9FA; display:table; border-radius: 4px; } .map-dh-left { display:table-cell; vertical-align: middle; width:100px; padding:10px; font-weight:bold; font-size:16px; background:#eee; color:#777474; text-align:center; } .map-dh-right { display:table-cell; vertical-align: middle; width:calc(100% - 100px); padding:10px; } .map-dh-an { float:left; width:120px; color: #848080!important; background: #e1e5ea; padding:3px 10px; text-align:center; border-radius: 4px; margin:4px } .map-dh-an:hover { background:#EAECF0; transition:.2s; } @media only screen and (max-width:759px){ .map-dh-an { width:48%; margin:4px 1%; } .map-dh-left { display:block; width:100%; } .map-dh-right { display:block; width:100%; } } @media only screen and (min-width:600px){ .profile-pc{width:700px;} } .profile-name-size{ width:55px } .profile-lg-size{ width:80px; height:80px; } .profile-unit-size{ width: 32px; height: 32px; } .profile-class-size{ width: 24px; height: 24px; } .profile-container:hover{ filter: brightness(0.75); transition:0.2s; } .profile-container { position:relative; float:left; box-shadow: 0 0 1px #000; border:2px solid #333; overflow:hidden; margin:2; z-index:20; } .profile-img{ position: absolute; top: 0; bottom: 0; z-index:10; } .profile-unit{ position: absolute; opacity:0.6; top:-8; left:-8; z-index:0; } .profile-class{ position: absolute; bottom:0; z-index:50; } .profile-under{ position: absolute; bottom: -5; right: -2; font-size: 10px; background: rgb(37 37 37 / 95%); height: 18px; width: 150%; z-index: 30; filter: blur(2.5px); } .profile-name{ position: absolute; bottom:0; right:1; color:#fff; font-size:13px; display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align:right; z-index:40; } .profile-name a.new, .profile-name a{color:white} .profile-name a:hover, .profile-name a:visited{color:var(--yellow)} .btn-default:hover {background: var(--mist1); color: white} li.btn.cardSelectOption.selected {background: var(--mist1); color: white!important} .item-img{ position: absolute; width: 60px; height: 60px; top: 5px; bottom: 5px; } .item{ display:inline-block; position:relative; width: 70px; height: 70px; margin:2px; box-shadow: 0 0 1px #000; overflow:hidden; } .item-btm{ position: absolute; bottom: 0; right: 0; font-size: 10px; background: rgb(37 37 37 / 95%); height: 10px; width: 100%; filter: blur(2.5px); } .item-font-style{ font-size:12px; color:#fff; font-weight: bolder; text-shadow: #000 -1px 0 0,#763c12 0 -1px 0,#5d2b08 1px 0 0,#1d1515 0 1px 0; display: inline-block; } .item-name{ position: absolute; left: 6; bottom: 2; } .item-amount{ position: absolute; left: 5.5; top: 4.5; } </style>