img, .dropdown-item{
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
}

a{
	text-decoration: none;
}

div{
	display: block;
}

#window p, h1, h2, h3, h4, span, input, a{
	font-family: "FrizQuadrataStd", "Arial", "Helvetica", "sans-serif";
}

#info_box p, h1, h2, h3, h4, span, input{
	font-family: "FrizQuadrataStd", "Arial", "Helvetica", "sans-serif";
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #FA0;
	border-radius: 12px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #b37700;
}

.max, .max_hover, .max_locked, .min, .min_hover, .min_locked, .minus, .minus_hover, .minus_locked, .plus, .plus_hover, .plus_locked, .skill, .skill:hover:after, .locked:before, .skill_12:before, .bar{
	background: url('../images/sprites.png') no-repeat;
}

.calcBox{
    transform: scale(0.8);
}

#window{
	background-image:url('../images/classes/arcanist_bg.png');
    background-size: cover;
	width: 1180px;
	height: 640px;
	display: block;
	position: absolute;
	top: 100px;
	left: 0%;
	margin-bottom: 20px;
	margin: auto;
}

#skills_pane{
	background-image:url('../images/panel.png');
    background-size: cover;
	width: 356px;
	height: 640px;
	display: block;
	position: absolute;
	top: 0px;
	left: 101%;
	margin-bottom: 20px;
	margin: auto;
}

#charOptions{
    position: absolute;
    top: 44%;
    width: 100%;
    height: 56%;
}

.row{
	position: relative;
	left: 50px;
	width: 1130px;
	height: 572px;
}

.col-2{
	position: relative;
	top: 0px;
	border-radius: 24px;
	width: 100px;
}

.skill_box{
	width: 110px;
	height: 113px;
    margin: 16px;
}

.bar{
	position: relative;
	background-position: 0 -95px;
	width: 107px;
	height: 36px;
	top: 77px;
	left: 2px;
}

.skill_text{
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 10px;
	font-size: 14px;
}

.plus{
	position: relative;
	left: 80px;
	top: 5px;
	background-position: -443px -39px;
	width: 30px;
	height: 36px;
	cursor: pointer;
}

.minus{
	position: relative;
	top: 41px;
	background-position: -443px 0;
	width: 30px;
	height: 36px;
	cursor: pointer;
}

.max{
	position: relative;
	top: 41px;
	background-position: -251px 0;
	width: 30px;
	height: 36px;
	cursor: pointer;
}

.min{
	position: relative;
	left: 80px;
	top: 5px;
	background-position: -347px 0;
	width: 30px;
	height: 36px;
	cursor: pointer;
}

.plus:not(.plus_locked):hover{
	background-position: -475px -39px;
}

.minus:not(.minus_locked):hover{
	background-position: -475px 0;
}

.max:not(.max_locked):hover{
	background-position: -283px 0;
}

.min:not(.min_locked):hover{
	background-position: -379px 0;
}

.plus_locked{
	background-position: -507px -39px;
}

.minus_locked{
	background-position: -507px 0;
}

.max_locked{
	background-position: -315px 0;
}

.min_locked{
	background-position: -411px 0;
}

.skill{
	background-position: -368px -39px;
	position: relative;
	left: 19px;
	top: 2px;
	width: 72px;
	height: 84px;
	z-index: 2;
}

.skill:hover:after{
	content: "";
	position: absolute;
	width: 73px;
	height: 81px;
	background-position: -294px -39px;
}

.point_box{
	position: relative;
	left: 0px;
	top: -153px;
}

.skillImage{
	position: relative;
	width: 64px;
	height: 64px;
	background-size: contain;
	top: -74px;
	left: 22px;
	z-index: 1;
}

#drag_bar{
    position: absolute;
    width: 847px;
    height: 52px;
    top: -40px;
	z-index: 10;
}

#skill_points{
    position: relative;
    width: 270px;
    height: 34px;
    top: 87px;
    left: 17px;
	margin: 0;
}

#skill_points p{
    position: relative;
    font-size: 21px;
    color: white;
    text-align: left;
    text-shadow: black 1px 1px;
    left: 6px;
    top: 2px;
}

#skill_points #skillPointNumber{
    position: relative;
    color: #00ff00;
    font-size: 24px;
    text-shadow: #000 0px 0px 5px;
    left: -14px;
    top: -48px;
    text-align: right;
}

#resetSkills{
    position: relative;
    width: 99px;
    height: 36px;
    left: 293px;
    top: 53px;
	margin: 0;
	cursor: pointer;
}

/* Save and Load Skill Builds */

#saveSkillBuild{
	position: relative;
	width: 0;
	height: 0;
}

#saveLabel{
	position: relative;
    width: 148px;
    height: 38px;
    left: 400px;
    top: 16px;
	margin: 0 auto;
	cursor: pointer;
	background-image: linear-gradient(#EEEEEE, #C5C5C5, #F6F6F6);
	border-radius: 5px;
	border-width: 1px;
	border-style: solid;
	border-color: rgba(80, 80, 80, 0.8);
	box-shadow: 0px 1px 3px #111111,
			inset 1px 1px 1px rgba(100, 100, 100, 0.5), inset -1px 1px 1px rgba(100, 100, 100, 0.5),
			inset 1px -1px 1px rgba(100, 100, 100, 0.5), inset -1px -1px 1px rgba(100, 100, 100, 0.5);
	text-align: center;
	line-height: 35px;
	color: #252525;
	text-shadow: 1px 1px 1px rgba(240, 240, 240, 0.7), -1px 1px 1px rgba(240, 240, 240, 0.7),
			1px -1px 1px rgba(240, 240, 240, 0.7), -1px -1px 1px rgba(240, 240, 240, 0.7);
}

#saveLabel::before{
	content: 'Save Build';
}

#resetLabel{
	position: relative;
    width: 106px;
    height: 40px;
    left: -2px;
    top: -3px;
	margin: 0 auto;
	cursor: pointer;
	background-image: linear-gradient(#EEEEEE, #C5C5C5, #F6F6F6);
	border-radius: 5px;
	border-width: 1px;
	border-style: solid;
	border-color: rgba(80, 80, 80, 0.8);
	box-shadow: 0px 1px 3px #111111,
			inset 1px 1px 1px rgba(100, 100, 100, 0.5), inset -1px 1px 1px rgba(100, 100, 100, 0.5),
			inset 1px -1px 1px rgba(100, 100, 100, 0.5), inset -1px -1px 1px rgba(100, 100, 100, 0.5);
	text-align: center;
	line-height: 35px;
	color: #252525;
	text-shadow: 1px 1px 1px rgba(240, 240, 240, 0.7), -1px 1px 1px rgba(240, 240, 240, 0.7),
			1px -1px 1px rgba(240, 240, 240, 0.7), -1px -1px 1px rgba(240, 240, 240, 0.7);
}

#resetLabel::before{
	content: 'Reset Talents';
}

#jobChangeLabel{
	position: relative;
    width: 106px;
    height: 40px;
    left: -15px;
    top: -11px;
	margin: 0 auto;
	cursor: pointer;
	background-image: linear-gradient(#EEEEEE, #C5C5C5, #F6F6F6);
	border-radius: 5px;
	border-width: 1px;
	border-style: solid;
	border-color: rgba(80, 80, 80, 0.8);
	box-shadow: 0px 1px 3px #111111,
			inset 1px 1px 1px rgba(100, 100, 100, 0.5), inset -1px 1px 1px rgba(100, 100, 100, 0.5),
			inset 1px -1px 1px rgba(100, 100, 100, 0.5), inset -1px -1px 1px rgba(100, 100, 100, 0.5);
	text-align: center;
	line-height: 35px;
	color: #252525;
	text-shadow: 1px 1px 1px rgba(240, 240, 240, 0.7), -1px 1px 1px rgba(240, 240, 240, 0.7),
			1px -1px 1px rgba(240, 240, 240, 0.7), -1px -1px 1px rgba(240, 240, 240, 0.7);
}

#jobChangeLabel::before{
	content: 'Select Class';
}

#levelChangeLabel{
	position: relative;
    width: 106px;
    height: 40px;
    left: -115px;
    top: 5px;
	margin: 0 auto;
	cursor: pointer;
	background-image: linear-gradient(#EEEEEE, #C5C5C5, #F6F6F6);
	border-radius: 5px;
	border-width: 1px;
	border-style: solid;
	border-color: rgba(80, 80, 80, 0.8);
	box-shadow: 0px 1px 3px #111111,
			inset 1px 1px 1px rgba(100, 100, 100, 0.5), inset -1px 1px 1px rgba(100, 100, 100, 0.5),
			inset 1px -1px 1px rgba(100, 100, 100, 0.5), inset -1px -1px 1px rgba(100, 100, 100, 0.5);
	text-align: center;
	line-height: 35px;
    pointer-events: none;
	color: #252525;
	text-shadow: 1px 1px 1px rgba(240, 240, 240, 0.7), -1px 1px 1px rgba(240, 240, 240, 0.7),
			1px -1px 1px rgba(240, 240, 240, 0.7), -1px -1px 1px rgba(240, 240, 240, 0.7);
}

#levelChangeLabel::before{
	content: 'Select Level';
}

#wlLabel{
	position: relative;
    width: 106px;
    height: 40px;
    left: -115px;
    top: 5px;
	margin: 0 auto;
	cursor: pointer;
	background-image: linear-gradient(#EEEEEE, #C5C5C5, #F6F6F6);
	border-radius: 5px;
	border-width: 1px;
	border-style: solid;
	border-color: rgba(80, 80, 80, 0.8);
	box-shadow: 0px 1px 3px #111111,
			inset 1px 1px 1px rgba(100, 100, 100, 0.5), inset -1px 1px 1px rgba(100, 100, 100, 0.5),
			inset 1px -1px 1px rgba(100, 100, 100, 0.5), inset -1px -1px 1px rgba(100, 100, 100, 0.5);
	text-align: center;
	line-height: 35px;
    pointer-events: none;
	color: #252525;
	text-shadow: 1px 1px 1px rgba(240, 240, 240, 0.7), -1px 1px 1px rgba(240, 240, 240, 0.7),
			1px -1px 1px rgba(240, 240, 240, 0.7), -1px -1px 1px rgba(240, 240, 240, 0.7);
}

#wlLabel::before{
	content: 'Select WL';
}

.optionsLabel{
	position: relative;
    left: 5px;
    width: 80%;
    height: 20px;
	margin: 0 auto;
	text-align: left;
	color: #d4d0c8;
}

#options_select{
    position: relative;
    left: 5px;
    top: 10px;
}

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

.saveBuild{
	-webkit-animation-name: 'confirmSaveColor';
	-webkit-animation-duration: 1s;
	-moz-animation-name: 'confirmSaveColor';
	-moz-animation-duration: 1s;
	animation-name: 'confirmSaveColor';
	animation-duration: 1s;
}

.saveBuild::before {
	-webkit-animation-name: 'confirmSaveText';
	-webkit-animation-duration: 1s;
	-moz-animation-name: 'confirmSaveText';
	-moz-animation-duration: 1s;
	animation-name: 'confirmSaveText';
	animation-duration: 1s;
}

/* animations given to #saveLabel upon calling saveSkillBuild() */
@keyframes confirmSaveColor {
	0% { background-image: linear-gradient(rgb(181, 230, 107), rgb(137, 199, 90), rgb(187, 235, 124)); }
	20% { background-image: linear-gradient(rgb(165, 231, 63), rgb(113, 197, 50), rgb(160, 226, 74)); }
	40% { background-image: linear-gradient(rgb(174, 228, 93), rgb(130, 197, 78), rgb(174, 224, 107)); }
	60% { background-image: linear-gradient(rgb(196, 235, 139), rgb(154, 202, 117), rgb(196, 229, 153)); }
	80% { background-image: linear-gradient(rgb(212, 231, 183), rgb(171, 197, 151), rgb(213, 231, 189)); }
	100% { background-image: linear-gradient(rgb(238, 238, 238), rgb(197, 197, 197), rgb(246, 246, 246)); }
}

@keyframes confirmSaveText {
	0% { content: 'Saved!'; }
	100% { content: 'Saved!'; }
}

#buildNameInput{
	width: 9rem;
	display: none;
	position: relative;
	left: 400px;
	top: 16px;
	line-height: 25px;
}

#buildNameInput::placeholder{
	font-size: 0.97rem;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	line-height: 25px;
}

#loadSkillBuild{
	position: relative;
    height: 38px;
    left: 553px;
    top: 16px;
	margin: 0;
	cursor: pointer;
}

#loadBuildButton{
	background-image: linear-gradient(#EEEEEE, #C5C5C5, #F6F6F6);
	border-radius: 5px;
	border-width: 1px;
	border-style: solid;
	border-color: rgba(80, 80, 80, 0.8);
	box-shadow: 0px 1px 3px #111111,
			inset 1px 1px 1px rgba(100, 100, 100, 0.5), inset -1px 1px 1px rgba(100, 100, 100, 0.5),
			inset 1px -1px 1px rgba(100, 100, 100, 0.5), inset -1px -1px 1px rgba(100, 100, 100, 0.5);
	width: 148px;
	font-family: inherit;
	text-shadow: 	1px 1px 1px #EEEEEE, -1px 1px 1px #EEEEEE,
			1px -1px 1px #EEEEEE, -1px -1px 1px #EEEEEE;
}

#selectJob{
	position: relative;
    width: 119px;
    height: 36px;
    left: 708px;
	bottom: 20px;
}

#jobDrop{
    position: relative;
    left: 708px;
    bottom: 55px;
}

#jobDropButton{
    width: 102px;
    height: 35px;
}

#jobDrop2{
    position: absolute;
    left: 515px;
    top: -35px;
    z-index: 100;
}

#jobDrop2 button:after {
	position: absolute;
	top: 13px;
    left: 151px;
}

#levelDrop{
    position: relative;
    left: 57px;
    z-index: 100;
}

#levelDrop button:after {
    display: none;
}

#levelDrop button{
	background-color: #0000;
	width: 120px;
    height: 50px;
}

#levelDrop .btn:focus{
	box-shadow:none;
}

#wlDrop{
    position: absolute;
    left: 177px;
    z-index: 100;
}

#wlDrop button:after {
    display: none;
}

#wlDrop button{
	background-color: #0000;
	width: 120px;
    height: 50px;
}

#wlDrop .btn:focus{
	box-shadow:none;
}

#jobDrop2 button{
	background-color: #0000;
	width: 168px;
    height: 31px;
}

#jobDrop2 .btn:focus{
	box-shadow:none;
}

#jobDrop button:after{
	display: none;
}

.dropdown-item:hover{
	background-color: #dcc134;
}

header{
	padding-bottom: 35px;
}

#closeWindow{
    float: right;
    position: relative;
    width: 26px;
    height: 26px;
    right: 12px;
    top: 26px;
	z-index: 10;
	cursor: pointer;
}

.nav-item a{
	text-decoration: none;
}

#jobName{
    position: absolute;
    left: 366px;
    top: -60px;
    width: 450px;
    height: 31px;
	text-align: center;
}

#jobName p{
	font-size: 48px;
	margin-top: 4px;
    color: #99004c;
	text-shadow: grey 2px 2px;
}

.locked:before{
	content: "";
	position: absolute;
	width: 70px;
	height: 70px;
    margin-left: 19px;
    margin-top: 7px;
	background-position: -109px -85px;
	z-index: 2;
	pointer-events: none;
}

.skill_12:before{
	content: "";
	width: 28px;
	height: 22px;
	background-position: -478px -82px;
    transform: scale(0.6);
    position: absolute;
    left: 3px;
    top: 51px;
    z-index: 5;
}

#container {
   min-height:100%;
   position:relative;
}

/*
	------------------------------ INFO STUFF ------------------------------
*/

#info_description p{
	margin: 0;
	padding: 0;
}

#info_description_2 p{
	margin: 0;
	padding: 0;
}

#info_description_3 p{
	margin: 0;
	padding: 0;
}

#info_box{
	position: absolute;
	left: 100px;
	top: 100px;
	border: 1px solid rgba(55,55,55,.9);
	box-shadow: 0px 0px 5px #000;
	border-radius: 4px;
	display: none;
	z-index: 25;
}

#info_name{
	width: 350px;
	height: 40px;
	background-color: rgba(25,25,25,.95);
	float: left;
	display: flex;
	align-items: center;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

#info_name p{
	margin-left: 10px;
	color: white;
	font-size: 16px;
	text-shadow: black 1px 2px;
    position: relative;
    top: 9px;
}

#info_element{
	position: absolute;
	width: 350px;
	height: 40px;
	text-align: right;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 10px;
	box-shadow: 0px 1px 1px #444;
}

#info_element p{
	margin-left: 10px;
	color: white;
	font-size: 14px;
	text-shadow: black 1px 2px;
    position: relative;
    top: 8px;
}

#info_content{
	margin-top: 40px;
	width: 350px;
	background-color: rgba(0,0,0,.9);
	padding: 10px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

#info_image_box{
	width: 50px;
	height: 50px;
	float: left;
	background-color: #434343;
	border-radius: 6px;
	border: 3px solid #333333;
	display: flex;
}

#info_image{
	background-size: contain;
	background-repeat: no-repeat;
	width: 96px;
	height: 100px;
	position: relative;
}

#info_top_description{
	float: left;
	margin: 8px;
}

#info_description{
	clear: both;
}

.info_linebreak{
	height: 1px;
	width: 99%;
	background-color: #666;
	margin: 5px 0px;
}

.info_resource{
	color: white;
	font-size: 14px;
}

.info_level{
	color: white;
	font-size: 18px;
}

.info_gray{
	color: #777;
	font-size: 12px;
}

.info_orange{
	color: #a98104;
	font-size: 12px;
}

.info_red{
	color: #a90404;
	font-size: 12px;
}

.info_blue{
	color: #0082c5;
	font-size: 12px;
}

.info_green{
	color: #00c600;
	font-size: 12px;
}

.info_emphasis{
	font-style: italic;
	color: #777;
}

.element_holy{
	background: url(../images/elements.png) 350px 98px;
}

.element_dark{
	background: url(../images/elements.png) 350px -3px;
}

.element_fire{
	background: url(../images/elements.png) 0px -3px;
}

.element_ice{
	background: url(../images/elements.png) 350px 43px;
}

.element_electric{
	background: url(../images/elements.png) 0px 43px;
}

.element_toxic{
	background: url(../images/elements.png) 350px -58px;
}

#panel_hero_icon{
    position: relative;
    left: 130px;
    top: 8px;
    margin: 10px;
}

.heroInfo{
    line-height: 26px;
}

#heroNameLabel, #heroNameValue{
    margin-top: 10px;
}

#heroSylphLabel, #heroNameLabel, #heroWLLabel, #heroFusionLabel, #heroAchLabel{
    position: relative;
    left: 20px;
    font-size: 22px;
}

#heroSylphValue, #heroNameValue, #heroWLValue, #heroFusionValue, #heroAchValue{
    position: relative;
    right: 20px;
    float: right;
    font-size: 20px;
    color: azure;
}

#heroNameLabel::before{
    color: red;
    content: 'Hero: ';
}

#heroWLLabel::before{
    color: lime;
    content: 'World Level: ';
}

#heroFusionLabel::before{
    color: cyan;
    content: 'Fusion Level: ';
}

#heroAchLabel::before{
    color: yellow;
    content: 'Achievement Tier: ';
}

#heroSylphLabel::before{
    color: orange;
    content: "Sylph's Trial: ";
}