::-webkit-input-placeholder { /* Chrome/Opera/Safari */color:#FCFCFC;}
::-moz-placeholder { /* Firefox 19+ */ color:#FCFCFC;}
:-ms-input-placeholder { /* IE 10+ */color:#FCFCFC;}
:-moz-placeholder { /* Firefox 18- */ color:#FCFCFC;}
.floatleft {float:left !important;}
.floatright {float:right !important;}
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix {display:inline-block;}/* Hide from IE Mac \*/
.clearfix {display:block;}/* End hide from IE Mac */
.clr {clear:both;}
* {outline:none;}
body {margin: 0;padding: 0;font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#000000;background:#f5f5f5; line-height:25px;}
.indexbody{background:#f5f5f5 url(images/pagebg.jpg) repeat-x;}
#gradeproperties{background:#F8F9FB; line-height:30px; margin:5px 0; padding:0 5px;}
#properties{line-height:30px; margin:5px 0; padding:0 5px;}
hr {border:0;background-color:#e5e5e5;height:1px;color:#e5e5e5;}
a {text-decoration:none;color:#369;}
a:hover {color:#f26522;}
form {padding:0;margin:0;}
p {padding:0;margin:0 0 18px 0;}
a img {border:0;}
textarea, input, select,.submit {font-family:arial;font-size:1em;color:#555;margin:1px 0;padding:2px;border:1px solid #ccc;border-top:1px solid #bdbdbd;border-bottom:1px solid #ddd;background:#fff url(images/bg_field.gif) repeat-x left top;}
.grid-one-third {width: 31.25%;}
.grid-half{width:49.75%;}
.grid-two-thirds {  width: 64.583%;}
#wrapper {position:relative;margin:0 auto;width:1000px;}
#header {width:980px;height:50px;margin: 0 auto; padding:0px 5px;}
#header a, #header strong{ color:#FFFFFF;}
#logo {width:290px;	height:50px;background:url(images/ad-hw-logo.png) no-repeat;float: left;}
#logo a {width:290px;height:50px;display:block;}
.callus {width:600px;height:auto;color:#e6e6e6;padding:4px 0 0 0;font-size:25px;font-weight:bold;float:right;text-align:right;}
.callus span{ float:right; line-height:20px; }
.callus .title{color:#e6e6e6;font-weight:normal;font-size:12px;}
#nav {float: left;width:980px;height:39px;margin:4px auto 0px;padding:0px 5px;font-size:12px;color:#333e57; background-color:#FFFFFF; border:1px solid #d5d5d5;}
.menu_center{height:40px;margin:0 auto;padding:0; }
.menu,.menu ul,.menu li,.menu a {margin: 0;padding: 0;border: none;outline: none;position: relative;}
.menu {	width: auto;height:40px;}
.menu li {position: relative;list-style: none;float: left;display: block;height:40px;}
.menu li a {display: block;padding: 0 12px;margin:8px 0 0 0;line-height:22px;text-decoration: none;border-left: 1px solid #d5d5d5;font-family:Arial, sans-serif;font-size:12px;color:#333e57;}
.menu li:first-child a { border-left: none;}
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { color: #5a4099;}
.menu ul {position: absolute;top:33px;left: 0;opacity: 0;background:#d8e0e5;-webkit-border-bottom-right-radius: 5px;-webkit-border-bottom-left-radius: 5px;-moz-border-radius-bottomright: 5px;-moz-border-radius-bottomleft: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;z-index:90;}
.menu li:hover > ul { opacity: 1;}
.menu ul li {height: 0;overflow: hidden;padding: 0;}
.menu li:hover > ul li {height:33px;overflow: visible;padding: 0;}
.menu ul li a {width: 150px;padding: 4px 0 4px 20px;margin: 0;border: none;border-bottom: 1px solid #b1c7d3;}
.menu ul li:last-child a { border: none; }
#container {background-color:#fff;border:1px solid #d5d5d5;width:980px;padding:5px ; clear:both; display:block; float:left; margin:4px auto 4px;}
#leftContainer {float:left;width:700px;padding-right:10px;margin-right:10px;border-right:1px solid #e5e5e5;}
#rightContainer {float:left;width:256px;}
#footer {margin:5px 0 0 2px;text-align:left;color:#999;}
#footer div.right {text-align:right;float:right;}
#footer span {color:#555;}
#tabs{border-radius: 0;border:1px solid #d5d5d5;}
#tabs ul{ background:none; font:12px;}
.ui-tabs-vertical { width: 960px;  margin:0 auto; border-radius: 0; font:12px;}
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 130px;border-radius: 0;border:none; font:12px;}
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0;border-radius: 0;font:12px;}
.ui-tabs-vertical .ui-tabs-nav li a { display:block;font:12px; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; font:12px;}
.ui-tabs-vertical .ui-tabs-panel { padding: 5px; float: right; width: 780px;border-radius: 0;font:12px;}
#list td, .topBorder td {border-top:1px solid #e5e5e5;border-right:1px solid #e5e5e5;}
#list td{ height:22px;}
#list tr td table tr td{border-top:none;border-right:none;}
#list{border-left:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;}
#list tr:hover { background-color:#CCCCCC !important; }
#list .top {border-top:1px dotted #bbb;}
.clear {clear:both;}
.hide {display:none;}
.small {width:10px;height:10px;}
.dull {color:#bbb;}
.redhightlight{ font-weight:bold; color:#990000; font-style:italic;}
.right {float:right;}
.nostyle {border:0;background:none;}
.submit {border:1px solid #90b988;border-top:1px solid #80ac78;background:#b6d4b0 url(images/submit_field.gif) repeat-x left top;font-weight:bold; padding:4px 10px;}
.submitaction{border:1px solid #90b988;border-top:1px solid #80ac78;background:#b6d4b0 url(images/submit_field.gif) repeat-x left top;font-weight:bold; padding:4px 10px;}
.cancel {border:1px solid #ccc;border-top:1px solid #bdbdbd;background:#e2e2e2 url(images/cancel_field.gif) repeat-x left top;font-weight:bold;}
.fakeSubmit {border:0;background:none;padding:0;margin:0;font-weight:bold;color:#369;cursor:pointer;}
.fakeSubmit:hover {color:#f26522;}
.list-chooser { font-size: 13px; position: absolute; top: 0; left: 0; padding: 0 0 0 9px; margin: 0; z-index: 500;}
.list-chooser.hidden{display:none;}
.list-chooser .arr { position: absolute; top: 30px; left: 1px; background: transparent url(images/add_to_list/tipArrowWhite.png) no-repeat left 6px; width: 9px; height: 24px;}
.list-chooser .list-chooser-inner,.list-chooser .chooser-header { width:450px; }
.list-chooser .list-chooser-inner { padding: 6px; background: #fff; border: 1px solid #d9d9d9; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-border-top-left-radius: 0; -webkit-border-top-right-radius: 0; -moz-border-radius-topleft: 0; -moz-border-radius-topright: 0; border-top-left-radius: 0; border-top-right-radius: 0; -moz-box-shadow: 1px 2px 3px rgba(0,0,0,.1); -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.1); box-shadow: 1px 2px 3px rgba(0,0,0,.1);}
.list-chooser .chooser-header { background-color: #9a9a9a; color: #fff; overflow: hidden; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 6px 9px; width: 446px;}
.list-chooser .chooser-header .title { font-size: 13px; font-weight: bold; color:#FFFFFF; }
.list-chooser .chooser-header .list-chooserclose{ background: url(images/icons/close_icon.gif) no-repeat right; float:right; padding:3px; width:16px; height:16px; }
.list-chooser .status-link {  clear:both; font-size: 9px; text-align:center; height:20px; color:#990000;}
.list-chooser .status-link.hidden{display:none;}
.list-chooser .show-more-list { cursor: pointer; clear:both; font-size: 9px; text-align:center; height:25px; color:#0066CC; padding: 2px;}
.list-chooser .show-more-list.hidden{display:none;}
.list-chooser .a-list { background-color: #f3f3f3; height: 30px; cursor: pointer; margin-bottom: 6px; position: relative; line-height: 18px; clear:both;}
.list-chooser .a-list:hover,.list-chooser .a-list.selected {  background-color: #c3e3f3;}
.list-chooser .a-list.start-anim { -webkit-transition: background-color 2.9s linear; -moz-transition: background-color 2.9s linear;}
.list-chooser .a-list.just-added { background-color: #e1eac0;}
.list-chooser .a-list.todo-list { background-image: url(images/icons/tip.png); background-repeat: no-repeat; background-position: 96% 50%;}
.list-chooser .a-list input { margin-right: 6px; position: absolute; top: 6px; left: 2px;}
.list-chooser .a-list label { position: absolute; left: 25px; display: block; top: 5px; width: 180px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-right: 6px; font-size:100%; color: #616060; }
.list-chooser .a-list .count { position: absolute; right: 6px; top: 6px; color: #939598;}
.list-chooser .a-list.loading .count { display: none;}
.list-chooser .new-list .creating-indicator,.list-chooser .a-list.loading,.list-chooser .other-lists.show-more-list.loading { background-image: url(images/add_to_list/ajax_spinner_small.gif); background-repeat: no-repeat; background-position: 96% 50%;}
.list-chooser .a-list.loading:hover,.list-chooser .a-list.selected.loading { background-image: url(images/add_to_list/ajax_spinner_small_blue.gif);}
.list-chooser .a-list.loading.just-added { background-image: url(images/add_to_list/ajax_spinner_small_green.gif);}
.list-chooser .new-list.creating .creating-indicator { background-position: 50% 50%; width: 100%; height:100%; background-color: #fff; position: absolute; opacity: .75;}
.list-chooser .scroll-area { min-height: 40px; max-height: 300px; overflow: auto;}
.list-chooser .scroll-area:-webkit-scrollbar { width: 10px; height: 8px;}
.list-chooser .scroll-area:-webkit-scrollbar-track { width: 12px; background-color: #fff; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;}
.list-chooser .scroll-area:-webkit-scrollbar-track-piece  { background-color: #fff; width: 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;}
.list-chooser .scroll-area:-webkit-scrollbar-thumb:horizontal,.list-chooser .scroll-area:-webkit-scrollbar-thumb:vertical { background-color: #8c8c8c; border: 2px solid #fff; width: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;}
.list-chooser .new-list { border-top: 1px solid #dfdfdf; overflow: hidden; position: relative;}
.list-chooser .new-list .button-container { padding-top: 6px;}
.list-chooser .new-list .newGreyButton { height: 24px; line-height: 24px; text-align: left; padding-left: 30px; position: relative;}
.list-chooser .new-list .newGreyButton .img { display: block; position: absolute; top: 6px; left: 6px; background-image: url(images/add_to_list/list_icon_small.png); background-repeat: no-repeat; background-position: 0 0; width: 16px; height: 16px;}
.list-chooser .new-list.loading { display: none;}
.list-chooser .new-list .button-container,.list-chooser .new-list.button .inputs-container { display: none;}
.list-chooser .new-list.button .button-container { display: block;}
.list-chooser .new-list .inputs-container { overflow: hidden; padding: 6px;}
.list-chooser .new-list .inputs-container .input,.list-chooser .new-list .inputs-container .loading-submit { float: left;}
.list-chooser .new-list .inputs-container .input { width: 160px;}
.list-chooser .new-list .inputs-container .loading-submit { width: 60px; margin-left: 6px;}
.list-chooser .new-list .inputs-container input { width: 95%; border: 1px solid #ccc; height: 20px; color: #000;}
.list-chooser .new-list .inputs-container .newGreenButton { height: 18px;line-height:18px; font-size:12px;}
.list-chooser .other-lists { min-height: 40px;}
.list-chooser .other-lists.loading { background-image: url(images/add_to_list/ajax_spinner.gif); background-repeat: no-repeat; background-position: 50% 6px;}
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; }
.ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; }
#withIcon h1 a,#withIcon h1 a:hover {color:#FFFFFF};
.status_box {background:#e4f5fc ;border:1px solid #dcf1fa;white-space:normal;clear:both;display:block;padding:15px;margin:5px 10px; position:relative; width:940px; border-radius:5px;}
.status_box h6 {text-align:left;font-size:16px;font-weight:bold; color:#01aef0; display:inline; }
.status_box ul {text-align:left;margin:0 0 10px 0;color:#000;width:940px; }
.status_box ul li {list-style:none;color:#333333;font-size:14px; font-weight:normal;}
.status_box ul li a{color:#333333;}
.status_box ul li a:hover{color:#01aef0;}
.status_box.info ul {background:#e4f5fc url(images/notification/information.gif) no-repeat top left;padding-left:40px;}
.status_box.success ul {background:#e4f5fc url(images/notification/success.gif) no-repeat top left;padding-left:40px;}
.status_box.error{width:auto;  }
.status_box.error ul{background:#e4f5fc url(images/notification/error.gif) no-repeat top left;padding-left:40px;}
.status_box.warning ul {background:#e4f5fc url(images/notification/notification.gif) no-repeat top left;padding-left:40px;}
.status_box .status_box_hide{position:absolute; float:right; display:inline; right:0; top:0; margin:5px; font-weight:bold; font-size:10/16em; font-style:normal; color:#333333;}
.pagination {padding: 20px;margin-bottom: 20px;}
.page {display: inline-block;padding: 0px 9px;margin-right: 4px;border-radius: 3px;border: solid 1px #c0c0c0;background: #e9e9e9;box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);font-size: .875em;font-weight: bold;text-decoration: none;color: #717171;text-shadow: 0px 1px 0px rgba(255,255,255, 1);}
.page:hover, .page.gradient:hover {background: #fefefe;background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0));background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0);}
.page.active {border: none;background: #616161;box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);color: #f0f0f0;text-shadow: 0px 0px 3px rgba(0,0,0, .5);}
.page.gradient {background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f8f8f8), to(#e9e9e9));background: -moz-linear-gradient(0% 0% 270deg,#f8f8f8, #e9e9e9);}
.pagination.dark {background: #414449;color: #feffff;}
.page.dark {border: solid 1px #32373b;background: #3e4347;box-shadow: inset 0px 1px 1px rgba(255,255,255, .1), 0px 1px 3px rgba(0,0,0, .1);color: #feffff;text-shadow: 0px 1px 0px rgba(0,0,0, .5);}
.page.dark:hover, .page.dark.gradient:hover {background: #3d4f5d;background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#547085), to(#3d4f5d));background: -moz-linear-gradient(0% 0% 270deg,#547085, #3d4f5d);}
.page.dark.active {border: none;background: #2f3237;box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .1);}
.page.dark.gradient {background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#565b5f), to(#3e4347));background: -moz-linear-gradient(0% 0% 270deg,#565b5f, #3e4347);}
.highlightrow{ background-color:#FFFF66;}
.highlightrowhw{ background-color:#F8DCE3;}
.highlightrowtr{ background-color:#f4f9fd;}
.highlightrowch{ background-color:#FAF3C5;}
.highlightrowod{ background-color:#9999CC;}
.highlightrowza{ background-color:#D8BFD8;}
.highlightrow{ background-color:#FFFF66;}
.highlightroworange{ background-color:#fffbe5;}
.highlightrowgold{ background-color:#ffe766;}

.highlightrowgroup{ background-color:#D6E6FE;}
.ui-tabs-active.ui-state-active a{ font-weight:bold;}
.block{border:1px solid #bdbdbd; padding:5px; margin:0px 0px 10px;}
.blockheader{ margin:-5px -5px 10px -5px; display:block; padding:5px; background-color:#CCCCCC;} 
.blink {-webkit-animation: blink 5s step-end infinite;animation: blink 5s step-end infinite;}
@-webkit-keyframes blink { 50% { visibility: hidden; }}
@keyframes blink { 50% { visibility: hidden; }}
input:-moz-read-only { /* For Firefox */background-color: #FFFF99 !important;}
input:read-only { background-color:#FFFF99 !important;}

.inputeffect{ position: relative;} 
.inputeffect input,.inputeffect select{width:100%; background:none !important;} 
.ajaxinputsuccess{border-bottom: 2px solid #1B7206 !important;}
.ajaxinputerror{border-bottom: 2px solid #840103 !important;}
.effect-1, 
.effect-2, 
.effect-3{border: 0; padding: 7px 0; border-bottom: 1px solid #ccc;}

.effect-1 ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.effect-1:focus ~ .focus-border{width: 100%; transition: 0.4s;}

.effect-2 ~ .focus-border{position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.effect-2:focus ~ .focus-border{width: 100%; transition: 0.4s; left: 0;}

.effect-3 ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; z-index: 99;}
.effect-3 ~ .focus-border:before, 
.effect-3 ~ .focus-border:after{content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 100%; background-color: #3399FF; transition: 0.4s;}
.effect-3 ~ .focus-border:after{left: auto; right: 0;}
.effect-3:focus ~ .focus-border:before, 
.effect-3:focus ~ .focus-border:after{width: 50%; transition: 0.4s;}

.effect-4,
.effect-5,
.effect-6{border: 0; border: 1px solid transparent; border-bottom-color: #ccc; transition: 0.4s;}

.effect-4:focus,
.effect-5:focus,
.effect-6:focus{padding: 0px 0px 0px; transition: 0.4s;}

.effect-4 ~ .focus-border{position: absolute; height: 0; bottom: 0; left: 0; width: 100%; transition: 0.4s; z-index: -1;}
.effect-4:focus ~ .focus-border{transition: 0.4s; height: 36px; border: 2px solid #3399FF; z-index: 1;}

.effect-5 ~ .focus-border{position: absolute; height: 24px; bottom: 0; left: 0; width: 0; transition: 0.4s;}
.effect-5:focus ~ .focus-border{width: 100%; transition: 0.4s; border: 2px solid #3399FF;}

.effect-6 ~ .focus-border{position: absolute; height: 36px; bottom: 0; right: 0; width: 0; transition: 0.4s;}
.effect-6:focus ~ .focus-border{width: 100%; transition: 0.4s; border: 2px solid #3399FF;}

.effect-7,
.effect-8,
.effect-9{border: 1px solid #ccc; padding: 7px 14px 9px; transition: 0.4s;}

.effect-7 ~ .focus-border:before,
.effect-7 ~ .focus-border:after{content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.effect-7 ~ .focus-border:after{top: auto; bottom: 0;}
.effect-7 ~ .focus-border i:before,
.effect-7 ~ .focus-border i:after{content: ""; position: absolute; top: 50%; left: 0; width: 2px; height: 0; background-color: #3399FF; transition: 0.6s;}
.effect-7 ~ .focus-border i:after{left: auto; right: 0;}
.effect-7:focus ~ .focus-border:before,
.effect-7:focus ~ .focus-border:after{left: 0; width: 100%; transition: 0.4s;}
.effect-7:focus ~ .focus-border i:before,
.effect-7:focus ~ .focus-border i:after{top: 0; height: 100%; transition: 0.6s;}

.effect-8 ~ .focus-border:before,
.effect-8 ~ .focus-border:after{content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.3s;}
.effect-8 ~ .focus-border:after{top: auto; bottom: 0; left: auto; right: 0;}
.effect-8 ~ .focus-border i:before,
.effect-8 ~ .focus-border i:after{content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #3399FF; transition: 0.4s;}
.effect-8 ~ .focus-border i:after{left: auto; right: 0; top: auto; bottom: 0;}
.effect-8:focus ~ .focus-border:before,
.effect-8:focus ~ .focus-border:after{width: 100%; transition: 0.3s;}
.effect-8:focus ~ .focus-border i:before,
.effect-8:focus ~ .focus-border i:after{height: 100%; transition: 0.4s;}

.effect-9 ~ .focus-border:before,
.effect-9 ~ .focus-border:after{content: ""; position: absolute; top: 0; right: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.2s; transition-delay: 0.2s;}
.effect-9 ~ .focus-border:after{top: auto; bottom: 0; right: auto; left: 0; transition-delay: 0.6s;}
.effect-9 ~ .focus-border i:before,
.effect-9 ~ .focus-border i:after{content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #3399FF; transition: 0.2s;}
.effect-9 ~ .focus-border i:after{left: auto; right: 0; top: auto; bottom: 0; transition-delay: 0.4s;}
.effect-9:focus ~ .focus-border:before,
.effect-9:focus ~ .focus-border:after{width: 100%; transition: 0.2s; transition-delay: 0.6s;}
.effect-9:focus ~ .focus-border:after{transition-delay: 0.2s;}
.effect-9:focus ~ .focus-border i:before,
.effect-9:focus ~ .focus-border i:after{height: 100%; transition: 0.2s;}
.effect-9:focus ~ .focus-border i:after{transition-delay: 0.4s;}

.effect-10, 
.effect-11, 
.effect-12,
.effect-13,
.effect-14,
.effect-15{border: 0; padding: 7px 15px; border: 1px solid #ccc; position: relative; background: transparent;}

.effect-10 ~ .focus-bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #ededed; opacity: 0; transition: 0.5s; z-index: -1;}
.effect-10:focus ~ .focus-bg{transition: 0.5s; opacity: 1;}

.effect-11 ~ .focus-bg{position: absolute; left: 0; top: 0; width: 0; height: 100%; background-color: #ededed; transition: 0.3s; z-index: -1;}
.effect-11:focus ~ .focus-bg{transition: 0.3s; width: 100%;}

.effect-12 ~ .focus-bg{position: absolute; left: 50%; top: 0; width: 0; height: 100%; background-color: #ededed; transition: 0.3s; z-index: -1;}
.effect-12:focus ~ .focus-bg{transition: 0.3s; width: 100%; left: 0;}

.effect-13 ~ .focus-bg:before,
.effect-13 ~ .focus-bg:after{content: ""; position: absolute; left: 0; top: 0; width: 0; height: 100%; background-color: #ededed; transition: 0.3s; z-index: -1;}
.effect-13:focus ~ .focus-bg:before{transition: 0.3s; width: 50%;}
.effect-13 ~ .focus-bg:after{left: auto; right: 0;}
.effect-13:focus ~ .focus-bg:after{transition: 0.3s; width: 50%;}

.effect-14 ~ .focus-bg:before,
.effect-14 ~ .focus-bg:after{content: ""; position: absolute; left: 0; top: 0; width: 0; height: 0; background-color: #ededed; transition: 0.3s; z-index: -1;}
.effect-14:focus ~ .focus-bg:before{transition: 0.3s; width: 50%; height: 100%;}
.effect-14 ~ .focus-bg:after{left: auto; right: 0; top: auto; bottom: 0;}
.effect-14:focus ~ .focus-bg:after{transition: 0.3s; width: 50%; height: 100%;}

.effect-15 ~ .focus-bg:before,
.effect-15 ~ .focus-bg:after{content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; background-color: #ededed; transition: 0.3s; z-index: -1;}
.effect-15:focus ~ .focus-bg:before{transition: 0.3s; width: 50%; left: 0; top: 0; height: 100%;}
.effect-15 ~ .focus-bg:after{left: auto; right: 50%; top: auto; bottom: 50%;}
.effect-15:focus ~ .focus-bg:after{transition: 0.3s; width: 50%; height: 100%; bottom: 0; right: 0;}


.effect-16, 
.effect-17, 
.effect-18{border: 0; padding: 4px 0; border-bottom: 1px solid #ccc; background-color: transparent;}

.effect-16 ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.effect-16:focus ~ .focus-border,
.has-content.effect-16 ~ .focus-border{width: 100%; transition: 0.4s;}
.effect-16 ~ label{position: absolute; left: 0; width: 100%; top: 9px; color: #aaa; transition: 0.3s; z-index: -1; letter-spacing: 0.5px;}
.effect-16:focus ~ label, .has-content.effect-16 ~ label{top: -16px; font-size: 12px; color: #3399FF; transition: 0.3s;}

.effect-17 ~ .focus-border{position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.effect-17:focus ~ .focus-border,
.has-content.effect-17 ~ .focus-border{width: 100%; transition: 0.4s; left: 0;}
.effect-17 ~ label{position: absolute; left: 0; width: 100%; top: 9px; color: #aaa; transition: 0.3s; z-index: -1; letter-spacing: 0.5px;}
.effect-17:focus ~ label, .has-content.effect-17 ~ label{top: -16px; font-size: 12px; color: #3399FF; transition: 0.3s;}

.effect-18 ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; z-index: 99;}
.effect-18 ~ .focus-border:before, 
.effect-18 ~ .focus-border:after{content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 100%; background-color: #3399FF; transition: 0.4s;}
.effect-18 ~ .focus-border:after{left: auto; right: 0;}
.effect-18:focus ~ .focus-border:before, 
.effect-18:focus ~ .focus-border:after,
.has-content.effect-18 ~ .focus-border:before,
.has-content.effect-18 ~ .focus-border:after{width: 50%; transition: 0.4s;}
.effect-18 ~ label{position: absolute; left: 0; width: 100%; top: 9px; color: #aaa; transition: 0.3s; z-index: -1; letter-spacing: 0.5px;}
.effect-18:focus ~ label, .has-content.effect-18 ~ label{top: -16px; font-size: 12px; color: #3399FF; transition: 0.3s;}

.effect-19,
.effect-20,
.effect-21{border: 1px solid #ccc; padding: 7px 14px; transition: 0.4s; background: transparent;}

.effect-19 ~ .focus-border:before,
.effect-19 ~ .focus-border:after{content: ""; position: absolute; top: -1px; left: 50%; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.effect-19 ~ .focus-border:after{top: auto; bottom: 0;}
.effect-19 ~ .focus-border i:before,
.effect-19 ~ .focus-border i:after{content: ""; position: absolute; top: 50%; left: 0; width: 2px; height: 0; background-color: #3399FF; transition: 0.6s;}
.effect-19 ~ .focus-border i:after{left: auto; right: 0;}
.effect-19:focus ~ .focus-border:before,
.effect-19:focus ~ .focus-border:after,
.has-content.effect-19 ~ .focus-border:before,
.has-content.effect-19 ~ .focus-border:after{left: 0; width: 100%; transition: 0.4s;}
.effect-19:focus ~ .focus-border i:before,
.effect-19:focus ~ .focus-border i:after,
.has-content.effect-19 ~ .focus-border i:before,
.has-content.effect-19 ~ .focus-border i:after{top: -1px; height: 100%; transition: 0.6s;}
.effect-19 ~ label{position: absolute; left: 14px; width: 100%; top: 10px; color: #aaa; transition: 0.3s; z-index: -1; letter-spacing: 0.5px;}
.effect-19:focus ~ label, .has-content.effect-19 ~ label{top: -18px; left: 0; font-size: 12px; color: #3399FF; transition: 0.3s;}

.effect-20 ~ .focus-border:before,
.effect-20 ~ .focus-border:after{content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.3s;}
.effect-20 ~ .focus-border:after{top: auto; bottom: 0; left: auto; right: 0;}
.effect-20 ~ .focus-border i:before,
.effect-20 ~ .focus-border i:after{content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #3399FF; transition: 0.4s;}
.effect-20 ~ .focus-border i:after{left: auto; right: 0; top: auto; bottom: 0;}
.effect-20:focus ~ .focus-border:before,
.effect-20:focus ~ .focus-border:after,
.has-content.effect-20 ~ .focus-border:before,
.has-content.effect-20 ~ .focus-border:after{width: 100%; transition: 0.3s;}
.effect-20:focus ~ .focus-border i:before,
.effect-20:focus ~ .focus-border i:after,
.has-content.effect-20 ~ .focus-border i:before,
.has-content.effect-20 ~ .focus-border i:after{height: 100%; transition: 0.4s;}
.effect-20 ~ label{position: absolute; left: 14px; width: 100%; top: 10px; color: #aaa; transition: 0.3s; z-index: -1; letter-spacing: 0.5px;}
.effect-20:focus ~ label, .has-content.effect-20 ~ label{top: -18px; left: 0; font-size: 12px; color: #3399FF; transition: 0.3s;}

.effect-21 ~ .focus-border:before,
.effect-21 ~ .focus-border:after{content: ""; position: absolute; top: 0; right: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.2s; transition-delay: 0.2s;}
.effect-21 ~ .focus-border:after{top: auto; bottom: 0; right: auto; left: 0; transition-delay: 0.6s;}
.effect-21 ~ .focus-border i:before,
.effect-21 ~ .focus-border i:after{content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #3399FF; transition: 0.2s;}
.effect-21 ~ .focus-border i:after{left: auto; right: 0; top: auto; bottom: 0; transition-delay: 0.4s;}
.effect-21:focus ~ .focus-border:before,
.effect-21:focus ~ .focus-border:after,
.has-content.effect-21 ~ .focus-border:before,
.has-content.effect-21 ~ .focus-border:after{width: 100%; transition: 0.2s; transition-delay: 0.6s;}
.effect-21:focus ~ .focus-border:after,
.has-content.effect-21 ~ .focus-border:after{transition-delay: 0.2s;}
.effect-21:focus ~ .focus-border i:before,
.effect-21:focus ~ .focus-border i:after,
.has-content.effect-21 ~ .focus-border i:before,
.has-content.effect-21 ~ .focus-border i:after{height: 100%; transition: 0.2s;}
.effect-21:focus ~ .focus-border i:after,
.has-conten.effect-21 ~ .focus-border i:after{transition-delay: 0.4s;}
.effect-21 ~ label{position: absolute; left: 14px; width: 100%; top: 10px; color: #aaa; transition: 0.3s; z-index: -1; letter-spacing: 0.5px;}
.effect-21:focus ~ label, .has-content.effect-21 ~ label{top: -18px; left: 0; font-size: 12px; color: #3399FF; transition: 0.3s;}

.effect-22, 
.effect-23, 
.effect-24{border: 0; padding: 7px 15px; border: 1px solid #ccc; position: relative; background: transparent;}

.effect-22 ~ .focus-bg{position: absolute; left: 0; top: 0; width: 0; height: 100%; background-color: transparent; transition: 0.4s; z-index: -1;}
.effect-22:focus ~ .focus-bg, 
.has-content.effect-22 ~ .focus-bg{transition: 0.4s; width: 100%; background-color: #ededed;}
.effect-22 ~ label{position: absolute; left: 14px; width: 100%; top: 10px; color: #aaa; transition: 0.3s; z-index: -1; letter-spacing: 0.5px;}
.effect-22:focus ~ label, .has-content.effect-22 ~ label{top: -18px; left: 0; font-size: 12px; color: #333; transition: 0.3s;}

.effect-23 ~ .focus-bg:before,
.effect-23 ~ .focus-bg:after{content: ""; position: absolute; left: 0; top: 0; width: 0; height: 0; background-color: #ededed; transition: 0.3s; z-index: -1;}
.effect-23:focus ~ .focus-bg:before,
.has-content.effect-23 ~ .focus-bg:before{transition: 0.3s; width: 50%; height: 100%;}
.effect-23 ~ .focus-bg:after{left: auto; right: 0; top: auto; bottom: 0;}
.effect-23:focus ~ .focus-bg:after,
.has-content.effect-23 ~ .focus-bg:after{transition: 0.3s; width: 50%; height: 100%;}
.effect-23 ~ label{position: absolute; left: 14px; width: 100%; top: 10px; color: #aaa; transition: 0.3s; z-index: -1; letter-spacing: 0.5px;}
.effect-23:focus ~ label, .has-content.effect-23 ~ label{top: -18px; left: 0; font-size: 12px; color: #333; transition: 0.3s;}

.effect-24 ~ .focus-bg:before,
.effect-24 ~ .focus-bg:after{content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; background-color: #ededed; transition: 0.3s; z-index: -1;}
.effect-24:focus ~ .focus-bg:before,
.has-content.effect-24 ~ .focus-bg:before{transition: 0.3s; width: 50%; left: 0; top: 0; height: 100%;}
.effect-24 ~ .focus-bg:after{left: auto; right: 50%; top: auto; bottom: 50%;}
.effect-24:focus ~ .focus-bg:after,
.has-content.effect-24 ~ .focus-bg:after{transition: 0.3s; width: 50%; height: 100%; bottom: 0; right: 0;}
.effect-24 ~ label{position: absolute; left: 14px; width: 100%; top: 10px; color: #aaa; transition: 0.3s; z-index: -1; letter-spacing: 0.5px;}
.effect-24:focus ~ label, .has-content.effect-24 ~ label{top: -18px; left: 0; font-size: 12px; color: #333; transition: 0.3s;}