@font-face {
        font-family: "Belwe";
        src: url("../fonts/belwe-webfont.woff");
    font-weight: normal;
    font-style: normal;
}
@font-face {
        font-family: "FranklinGothic";
        src: url("../fonts/FranklinGothic-dehinted.ttf");
}
.noscroll{
    position:fixed;
    overflow:hidden;
}
#language-selector {height: 38px; background-color: #f1f1f1; height: 38px; font-size: 17px; font-family: 'Belwe'; padding-left: 12px; border: 0;}
#language-selector:hover {background-color: #ddd;}
#language-selector option { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
#container {
position: absolute;
    width: 1110px;
    height: 740px;
    left: 50%;
    top: 50%;
    margin: -395px 0 0 -575px;
    background-image: url(../images/panel_main_new9_emeralddream.webp);

}

@media (max-width: 1150px) {
    #container {
        left: 0px;
        margin-left: 0px;
    }
}

@media (max-height: 750px) {
    #container {
        top: 0px;
        margin-top: -36px;
    }
}
body {
background: #000000 url(../images/background_tlc.webp);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
}
#WinterVeilStartButton {
  width: 82px;
  height: 71px;
  background-image: url('../images/wvstartbutton2.webp');
  background-size: cover;
}
#WinterVeilStartButton:hover {
  background-position: -82px 0;
}

#WinterVeilRecapButton {
  width: 68px;
  height: 52px;
  background-image: url('../images/recap4.webp');
  background-size: cover;
}
#WinterVeilRecapButton:hover {
  background-position: 0 -52px;
}

.input-text {
    border-radius: 4px 4px 4px 4px;
    display: inline-block;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
    transition: border linear 0.2s, box-shadow linear 0.2s;
    height: 18px;
    font-size: 16px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    line-height: 20px;
    padding: 4px 6px;
}
.cardname {

    margin-left: 10px;
    width: 242px;
}
.cardrace {

    margin-left: 15px;
    width: 123px;
}

#panel_left_classes {
    width: 480px;
    height: 72px;
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 17px;
    font-family: "Belwe";
}
#panel_left_classes input[type="radio"] {
    display:none;
}
#panel_left_classes input[type="radio"] + label {
    margin-left: -4px;
    font-family:Arial, sans-serif;
    font-size:14px;
cursor: pointer;
}
#panel_left_classes input[type="radio"] + label span {
    display:inline-block;
    width:38px;
    height:38px;
    margin:-1px 0px 0 0;
    vertical-align:middle;
border-radius: 5px;
}

#panel_left_classes input[type="radio"] + label span {
}

#panel_left_classes input[type="radio"]:checked + label span{
     background-color: #4A7AFF;
}

#panel_left_classes input[type="radio"] + label span,
#panel_left_classes input[type="radio"]:checked + label span {
}

#panel_left_mana {
    width: 320px;
    height: 90px;
    position: absolute;
    top: 165px;
    left: 0px;
    font-size: 17px;
    font-family: "Belwe";
}
.cardmana {
margin-top: 30px;
margin-left: 10px;
width: 37px;
}
.cardattack {
margin-top: 30px;
margin-left: 10px;
width: 37px;
}
.cardhealth {
margin-top: 30px;
margin-left: 10px;
width: 37px;
}

#panel_left_rarity {
    width: 220px;
    height: 90px;
    position: absolute;
    top: 165px;
    left: 253px;
    font-size: 17px;
    font-family: "Belwe";
}

#panel_left_rarity img {
  cursor: pointer;
}

#panel_left_rarity input[type="radio"] {
display: none;
position: absolute;
margin-left: 17px;
margin-top: 7px;
}

#panel_left_rarity input[type="radio"]:checked + label span {
    display:inline-block;
    width:27px;
    height:34px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
-moz-border-radius: 100px / 130px;
-webkit-border-radius: 100px / 130px;
border-radius: 100px / 130px;

}

#panel_left_rarity input[type="radio"]:checked + label span{
position: absolute;
margin-left: 10px;
margin-top: -3px;
     background-color: #4A7AFF;
}

#panel_left_cardtext {
    width: 320px;
    height: 100px;
    position: absolute;
    top: 276px;
    left: 0px;
    font-size: 17px;
    font-family: "Belwe";
}

#input-area {
    border-radius: 4px 4px 4px 4px;
    display: inline-block;
    background-color: #ffffff;
    border: -3px solid #cccccc;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
    transition: border linear 0.2s, box-shadow linear 0.2s;
    font-size: 16px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    line-height: 20px;
    padding: 4px 6px;
    padding-right: 35px;
    width: 227px;
    height: 90px;
}
#panel_left_picture {
    width: 481px;
    height: 62px;
    position: absolute;
    top: 401px;
    left: 15px;
    font-size: 17px;
    font-family: "Belwe";
}
.imageurl {
position: absolute;
top: 20px;
left: -2px;
height: 24px;
font-size: 16px;
width: 312px;
display: none;
z-index: 55;
}
.tooltipsy {
    width: 125px;
    font-size: 16px;
    font-family: "FranklinGothic";
    color: white;
    text-align: center;
    top: 3px;
    position: relative;
    background: #ad0000;
    border: 1px solid #dedede;
    padding: 5px;
    border-radius: 6px;
}
.tooltipsy:after, .arrow_box:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.tooltipsy:after {
	border-color: rgba(33, 33, 33, 0);
	border-top-color: #ad0000;
	border-width: 5px;
	margin-left: -5px;
}
.tooltipsy:before {
	border-color: rgba(245, 245, 245, 0);
	border-top-color: #dedede;
	border-width: 8px;
	margin-left: -8px;
}
.show
{
	opacity: 1;
  -webkit-filter: drop-shadow(1px 1px 0 #4A7AFF)
                  drop-shadow(-1px -1px 0 #4A7AFF);
  filter: drop-shadow(1px 1px 0 #4A7AFF) 
          drop-shadow(-1px -1px 0 #4A7AFF);}

.hide
{
	opacity: 0.35;
}
#cost_selector_button.minimal {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}

#cost_selector_button.minimal:focus {
  background-image:
    linear-gradient(45deg, green 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, green 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  border-color: green;
  outline: 0;
}
.pointer-down {
    border: solid 5px transparent;
    border-top: solid 5px #000;
}
.pointer {
    width: 0;
    height: 0;
    position: absolute;
    right: -8px;
    top: 50%;
    margin-top: -3px;
}
.dd-options {
height: 227px !important;
max-height: 227px !important;
}
.dd-selected {
height: 29px;
padding: 3px;
}
.dd-option {
    padding: 3px;
}
.dd-selected-text {
line-height: 29px;
}
.disable-select {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

#customhs{
position: absolute;
    width: 1088px;
    height: 715px;
    left: 10px;
    top: 44px;
display: none;
    background-image: url(../images/customhs_menu.webp);
z-index: 100;
}
#customhs_menu_button {
    position: absolute;
    width: 100px;
    height: 97px;
    left: -8px;
    top: 42px;
    background-image: url(../images/customhs.png);
background-size: 100px, 100px;
    cursor: pointer;
}
.customhs_options_menu_button {
    -webkit-filter: drop-shadow(1px 1px 4px #222);
    filter: drop-shadow(1px 1px 4px #222);
}
#black {
position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.9);
    z-index: 20;
    width: 100%;
    height: 100%;
display: none;
}
#customhs_left {
    border-radius: 6px;
    position: absolute;
    width: 100px;
    height: 460px;
    left: 45px;
    top: 130px;
    display: inline-block;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid;
    padding-right: 21px;
}
#customhs_right {
position: absolute;
width: 786px;
    height: 536px;
    left: 238px;
    top: 84px;
overflow-x: hidden;
overflow-y: auto;
    font-size: 18px;
    font-family: 'Belwe';
color: white;
}
#customhs_title {
position: absolute;
    width: 333px;
    height: 33px;
    left: 449px;
    top: 22px;
    text-align: center;
    font-size: 24px;
    font-family: 'Belwe';
    line-height: 25px;
}
.customhs_emblem_pw {
position: relative;
margin-right: -10px;
float: left;
    width: 162px;
    height: 182px;
    background-image: url(../images/embprvw.png);
}
.customhs_emblem_pw_emblem {
position: absolute;
    top: 12px;
    left: 14px;
    width: 132px;
    height: 125px;
}
.customhs_emblem_pw_text {
    position: absolute;
    bottom: 13px;
    left: 38px;
    width: 100px;
    height: 20px;
    font-size: 15px;
    font-family: 'Belwe';
    line-height: 18px;
color: black;
overflow: hidden;
    text-overflow: ellipsis;
}
.customhs_emblem_pw_emblem_img {
    width: 132px;    mix-blend-mode: multiply;    top: 0px;    position: absolute; filter: invert(5%) sepia(10%) saturate(260%) hue-rotate(343deg) brightness(94%) contrast(89%);
}
.customhs_emblem_pw_emblem_img:hover {
	cursor: pointer;
    filter: invert(5%) sepia(10%) saturate(260%) hue-rotate(343deg) brightness(94%) contrast(89%) drop-shadow(rgba(255, 0, 0, 0.7) 0px 5px 10px);
}
.customhs_banner_pw:hover{
	cursor: pointer;
    filter: invert(5%) sepia(10%) saturate(260%) hue-rotate(343deg) brightness(94%) contrast(89%) drop-shadow(rgba(255, 0, 0, 0.7) 0px 5px 10px);
}
#customhs_type_buttons {
position: absolute;
    top: 34px;
    left: 247px;
    width: 205px;
    height: 50px;
    font-family: 'Belwe';
    font-size: 12px;
    color: black;
}
.customhs_type_button {
    width: 60px;
    height: 53px;
    float: left;
    cursor: pointer;
    text-align: center;
    line-height: 52px;
    color: black;
    background-image: url(../images/customhs_aml_button.webp);
    margin-right: 6px;
    user-select: none;
}
#customhs_search {
position: absolute;
    top: 30px;
    left: 883px;
    width: 157px;
    background-color: rgb(0 0 0 / 8%);
color: white;
border: 0;
height: 28px;
    font-size: 16px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    line-height: 20px;
    padding: 4px 6px;
}
#customhs_search:focus {
outline: none;
}
.customhs_emblem_pw_star {
    position: absolute;
    top: 141px;
    left: 2px;
    width: 35px;
    height: 35px;
    background-image: url(../images/hs_custom_star.png);
cursor: pointer;
}
.starred {
    position: absolute;
    top: 141px;
    left: 2px;
    width: 35px;
    height: 35px;
    background-position: -35px 0;
    background-image: url(../images/hs_custom_star.png);
}

.customhs_class_pw {
position: relative;
float: left;
margin-left: 9px;
    width: 245px;
    height: 349px;
    background-image: url(../images/customhs_panel_left_classtile.png);
    filter: drop-shadow(rgba(0, 0, 0, 0.7) 0px 5px 10px);
cursor: pointer;
}

.customhs_template_pw {
position: relative;
float: left;
margin-left: 9px;
    width: 245px;
    height: 349px;
    background-image: url(../images/customhs_panel_left_classtile.png);
    filter: drop-shadow(rgba(0, 0, 0, 0.7) 0px 5px 10px);
cursor: pointer;
}


.customhs_class_author {
    position: relative;
    top: 256px;
    width: 168px;
    height: 44px;
    left: 40px;
    z-index: 5;
    text-align: center;
    color: black;
    font-family: 'FranklinGothic';
    font-size: 20px;
    line-height: 20px;
}

.customhs_class_ribbon {
    position: absolute;
    top: 162px;
    left: 10px;
    width: 232px;
    height: 81px;
    font-size: 15px;
    font-family: 'Belwe';
    line-height: 18px;
    background-image: url(../images/customhs_class_ribbon.png);
    z-index: 50;
}
.customhs_selector {
width: 103px;
height: 104px;
float: left;
background-color: black;
color: white;
background-image: url(../images/customhs_panel_left_tile.png);
cursor: pointer;
}
#customhs_create_button {
    position: absolute;
    top: 600px;
    left: 25px;
    width: 137px;
    height: 60px;
    cursor: pointer;
}
.ui-slider .ui-slider-handle{
    width:20px; 
    height:37px; 
    background:url(../images/zoom-slider.png) no-repeat; overflow: hidden; 
    position:absolute;
    top: -13px;
    border-style:none; 
    outline: none;
}
.ui-slider-range {
    background: linear-gradient(top, #ffffff 0%,#eaeaea 100%);
    position: absolute;
    border: 0;
    top: 0;
    height: 100%;
    border-radius: 25px;
}
.ui-slider-horizontal {
    background: #361c0a;
    position: absolute;
    top: 0;
    height: 9px;
    border: 2px solid #7b5b3c;
    border-radius: 25px;
}
.ui-menu {
width: 350px;
max-height: 300px;
overflow-y: auto;
}

/* Dropdown Button */
.dropbtn {
    background-color: rgb(0 0 0 / 8%);
  color: white;
  font-size: 15px;
  border: none;
  cursor: pointer;
width: 100%;
height: 100%;
overflow: hidden;
white-space: nowrap;
    text-overflow: ellipsis;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  display: inline-block;
position: absolute; width: 109px; height: 32px;top: 82px;    left: 93px; font-size: 17px; font-family: 'Belwe'; color: white;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 175px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

#cost_selector_button, .pointer, #cost_selector_menu img {
cursor: pointer;
}
#tradeable {
display: none;
width: 44px;
height: 44px;
position: absolute;
top: -9px;
left: -32px;
background:url(../images/tradeable.png) no-repeat; overflow: hidden; 
}
#forge {
display: none;
width: 44px;
height: 44px;
position: absolute;
top: -9px;
left: -32px;
background:url(../images/forge.png) no-repeat; overflow: hidden; 
}
.rotate {
    transform: rotate(360deg);
    transition: .3s;
}
.rotate2 {
    transform: rotate(0deg);
    transition: .3s;
}