h1{font-family: 'DeltaSans', sans-serif;  color: #414141; font-weight:normal;  margin: 25px 0 15px 0; padding:0; font-size:36px; line-height:39px;}


#formArea{ width: 75%; max-width: 750px; margin: 0 auto; padding: 50px 0; color: #414141; min-height: 300px;}
#formArea p{margin:20px 0;}
#formArea a{color:#0087DC; font-weight:bold;}
#formArea a:hover{text-decoration:none;}
#formArea a.button{color:white !important; background-color:#0087DC !important;}
#formArea a.button:hover{color:#0087DC !important; background-color:white !important;}

form#createAccount{padding: 4% 4% 6%; background-color:#F0F2F2;margin: 0 0 40px 0;}
form#editAccount{padding: 4% 4% 6%; background-color:#F0F2F2;margin:40px 0;}
form#login{padding: 4% 4% 6%; background-color:#F0F0F0;margin:20px 0 40px;}
form#login input[type=text], form#login input[type=password] {padding: 2% !important; width:96% !important;  margin-bottom: 20px !important;}
form#login #submitButton { margin-top: 20px;}

#formArea input[type=text], #formArea input[type=password] {width: 90%; padding: 3% 5%; font-size: 16px; color: #414141; font-family: inherit; height: 20px;}
#formArea input[type=submit] { background-color: #0087DC; color: #fff; border:1px solid #0087DC; padding: 9px 18px; font-size: 18px; cursor:pointer;}
#formArea input[type=submit]:hover{background-color:#ffffff !important; border:1px solid #0087DC !important;  color:#0087DC !important;}
 .col-6 { width: 48%; margin-left:4% !important;}
#formArea .label { margin-bottom: 5px; display: block;}
#formArea .header{color: #414141; font-size:18px; margin-bottom:15px;}
#formArea .row { margin-bottom: 15px;}
#formArea .field_group{margin-top:40px;}
#formArea #submitButton{ margin-top: 50px; text-align: right;}
#formArea .error{border:2px solid #D0021B;}


#editAccount .row{margin:0 !important;}
#editAccount input[type=text]{margin-bottom:15px;}
#editAccount label{ margin-left: 25px; margin-bottom: 20px;}
#editAccount .header{ margin-left: 25px;}
#editAccount #submitButton { margin-top: 30px;}
#company_info{margin-top:30px;}
#company_info .column{float:left; width:30%; margin-left:5%;}
#company_info .column:first-child{margin-left:0;}
#company_info span{display:block; font-size:22px;}
#company_info .title{color:#0087DC; font-family: 'DeltaSans', sans-serif; font-weight:bold; margin-bottom:5px;}


#my_page{color: #414141; font-size:18px;}
.without_text #profile_and_contacts { margin: 5px auto 50px !important;}
.without_text #quick_links { margin: 0 auto 45px;}

.narrow_line{width: 75%; max-width: 750px; margin: 0 auto;}
#welcome_text{margin-top:50px; margin-bottom:50px;}
#welcome_text .green_header{font-size:22px; font-weight:bold; color:#0087DC;}
#welcome_text .w_text{font-size:22px; line-height:27px; margin: 10px 0 65px;}
#quick_links a{color:#0087DC; text-decoration:none; font-weight:bold; margin-left:20px;}
#quick_links a:hover{text-decoration:underline;}
#profile_and_contacts{margin: 75px auto 50px;}
#profile_and_contacts > div{float:left; padding-top: 10px;  padding-bottom: 10px;}
#profile_and_contacts span{display:block; word-break: break-all; margin-bottom: 5px;}
#profile_and_contacts .g_title_b{color: #0087DC; font-family: 'DeltaSans', sans-serif; font-weight: bold; font-size: 22px; margin-bottom:7px; }
#profile_and_contacts .contact_tel{padding:0 0 0 25px; background:url(../images/my-page/tel.png) top left no-repeat; min-height:21px; margin-bottom:5px; }
#profile_and_contacts .pin{padding:0 0 0 25px; background:url(../images/my-page/pin.png) top left no-repeat; min-height:21px; margin-bottom:15px;}
#profile_and_contacts .b_title{color: #414141; font-weight:bold; margin-bottom:9px;}
#profile_and_contacts .g_title_s{ccolor: #414141; font-family: 'DeltaSans', sans-serif; font-weight: bold; font-size: 18px; margin-bottom:3px; }
#profile_and_contacts .contact_email{padding:0 0 0 25px; background:url(../images/my-page/letter.png) 0px 5px no-repeat; min-height:21px; }
#profile_and_contacts .contact_email a{color:inherit;}
#profile_and_contacts .contact_title{margin-bottom:5px;}
#profile .contact_tel{margin-bottom:20px !important; margin-top: 18px !important;}
#profile .textcopylink{/*margin:0 0 0 25px;*/}
#profile{ width: 25%; padding-right: 5%; font-size:16px;}
#contacts{width:64%; border-left: 4px solid #0087DC; padding-left: 5%;}
#contacts .contact{float:left; width:40%; margin-left:10%;}
#contacts .contact:nth-child(odd){margin-left:0;}
#contacts .contact:nth-child(n+3) {margin-top: 1em; }

#tabs {background-color:#E1E6E6; padding:30px 0 60px;}
#tabs .headers a{display: inline-block; padding: 13px 23px 15px 39px; text-decoration: none; color: #414141; font-weight: 600; background: #fff url(../images/plus_icon.svg) 20px 17px no-repeat;  font-size: 18px; margin-left:20px;}
#tabs .headers a:first-child{margin-left:0;}
#tabs .contents > div{ background-color:#fff; width:96%; display:none; padding: 3% 2% 5%; }

#tabs .headers a.currentTab{height: 43px; background: #fff url(../images/general/x.png) 20px 17px no-repeat; background-size: 12px;}
.your_filters{ padding: 0; margin: 0px 0 35px 0;}
.your_filters a {text-decoration: none; color: inherit; background: #F0F3F3 url(../images/general/x.png) 95% 55% no-repeat; background-size: 15px; display: inline-block; margin: 0px 10px 10px 5px;  padding: 5px 5% 5px 1%;}

.filters{margin-bottom:30px;}
.filters > div { float: left; margin-left: 25px;}
.filters > div:first-child {margin-left: 0px;}
.filters > div > label{display:block; margin-bottom:8px; font-size:16px;}
.SumoSelect{width:250px;}
.SumoSelect>.CaptionCont { background-color: #F0F3F3;}
.SumoSelect>.CaptionCont>span { font-weight: normal !important;width: 90%; overflow: hidden; display: inline-block; font-size:16px;}
.SumoSelect>.optWrapper>.options li label {
    width: 92%;
    font-size: 16px;
    padding: 4%;
    display: block;
    overflow: hidden;
}

.mypage-message {
    width: 96%;
    max-width: 1160px;
    margin: 0 auto 3em;
    background-color: #fff;
    border: 1px solid red;
    background-image: url(../images/information_icon.svg);
    background-position-x: 1em;
    background-position-y: 50%;
    background-size: 2em;
    background-repeat: no-repeat;
}

.mypage-message .mypage-message-text {
    padding-left: 3em;
    margin: 1em;
    margin-left: 2em;
    font-size: 0.9em;
}

.load_more{text-align:center; margin-top:24px;}
.load_more a{ text-decoration: none; font-size: 18px; background: url(../images/arrow_icon.svg) 100px 10px no-repeat; padding-right: 25px; background-size: 14px;}
.loading{ position:absolute; left:0; top:0; width:100%; height:100%;  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5;  -khtml-opacity: 0.5; opacity: 0.5; position:fixed; background:#fff url(../images/my-page/loading.gif) center center no-repeat; background-size:50px; }


.downloads { margin-top: 0px; font-size:16px;}
.downloads .desc{display:block; margin-top:20px;}
#tabs .downloads a{color: #0087DC;text-decoration: none;font-weight: bold;margin-top: 5px;display: inline-block;}
#tabs .downloads a:hover{text-decoration:underline;}
#tabs .downloads ul{margin:0; padding:0;}
#tabs .downloads > ul > li {list-style: none; padding: 20px 0 20px 52px; min-height: 50px; background-position: left 20px !important; background-repeat: no-repeat !important; border-top: 2px solid #CCCCCC; background-size:40px !important;}
#tabs .downloads > ul > li:first-child{border-top:0; }
#tabs .downloads .pdf{background:url(../images/general/pdf.svg); }
#tabs .downloads .excel{background:url(../images/general/excel.svg); }
#tabs .downloads .ppt{background:url(../images/general/ppt.svg); }
#tabs .downloads .zip{background: url(../images/general/zip.svg);}
#tabs .downloads .html{background: url(../images/general/html.svg);}
#tabs .downloads .jpeg{background: url(../images/general/jpeg.svg);}
#tabs .downloads li ul{margin:5px 0 0; padding:0;}
#tabs .downloads li li {float: left; border-left: 1px solid #657077; list-style: none; padding: 0px 20px;}
#tabs .downloads li li:first-child{border-left:0; padding-left:0;}

#tabs .downloads .video {
    min-height: 160px;
    position: relative;
}
#tabs .downloads .video div{
    width: auto;
    display: inline;
}
#tabs .downloads .video iframe {
    position: absolute;
    padding: 20px 0 0 20px;
    display: inline;
    top: 0;
}
#tabs .downloads li span {
    color: #0087DC;
    text-decoration: none;
    font-weight: bold;
    margin-top: 5px;
    display: inline-block;
}
#tabs .downloads li div {
    float: left;
}

#your_documents span.desc{margin-bottom:50px; display:block;}

/************ CUSTOM RADIO & CHECKBOX *************/
.radio label:last-child{margin-bottom:0 !important;}
#formArea input[type=radio], input[type=checkbox] { position: absolute;width: 0; height: 0; opacity: 0; }
#formArea input[type=radio] + label{display: block; padding-left: 17px; background: url(../images/rma/checks.svg) no-repeat 0 0;line-height: 24px;margin-bottom:10px; background-size: 12px;}
#formArea input[type=checkbox] + label{display: block; padding-left: 20px; background: url(../images/rma/chkbx.svg) no-repeat 0 0; line-height: 14px; background-size: 15px 28px}
#formArea input[type=radio]:checked + label{ background-position : left bottom;}
#formArea input[type=checkbox]:checked + label{ background-position : left bottom;}
/************ CUSTOM RADIO *************/




.popup-content {padding:15px !important; width:80% !important;}
.popup-content form > div{display:block; margin-top:20px;}
.popup-content form > div > label{display:block; margin-bottom:5px;}
.popup-content form input[type=text], .popup-content form input[type=password]{width:97%; padding:1.5%; color: #414141;}
.popup-content form input[type=submit]{float:right; margin-top:10px;}
.popup-content .green_header{color:#0087DC;font-family:'DeltaSans', sans-serif;font-size:22px;font-weight:bold;margin-top: 5px;}
.popup-content .error { border: 2px solid #D0021B;}




@media screen and (max-width: 980px) {
	h1 {font-size: 26px; line-height: 32px;}
	#formArea .header { font-size: 16px;}
	#formArea{font-size:14px;}
	
	#company_info .column {
		float: none;
		width: 100%;
		margin-left: 0;
		margin-top: 20px;
	}
	
	#company_info .column:first-child{
		margin-top: 0px;
	}
	
	#company_info span {
		font-size: 18px;
	}
	
	.popup-content .green_header { font-size: 18px;}
	 .popup-content {font-size:14px;}
	
	#tabs div[class^="col-"] > a{font-size:15px; background-position: 20px 14px;}
	#welcome_text .green_header { font-size: 18px;}
	#welcome_text .w_text {font-size: 18px;line-height: 23px; margin: 10px 0 35px;}
	#welcome_text { margin-top: 30px;}
	.without_text #welcome_text { margin-bottom: 30px;}
	#my_page { font-size: 14px;}
	#profile { font-size: 14px;}
	#profile .textcopylink { font-size: 14px;}
	#profile_and_contacts .g_title_b { font-size: 18px; margin-bottom: 12px; }
	#profile_and_contacts .g_title_s { font-size: 16px;}
	#profile .contact_tel { margin-bottom: 15px !important;}
	#profile_and_contacts .pin {margin-bottom: 10px;}
	#profile_and_contacts .contact_tel { margin-top: 10px;}
	#profile_and_contacts { margin: 40px auto;}
	
	#tabs .headers a{font-size:14px; background-position:20px 14px; margin-left: 10px;}
	#tabs .headers a.currentTab{ background-position:20px 15px; height: 30px;}
	
	.SumoSelect>.CaptionCont>span { font-size: 14px;}
	.SumoSelect>.optWrapper>.options li label { font-size: 14px;}
	.SumoSelect {width: 150px;}
	.SumoSelect>.CaptionCont>label { width: 30px;}
	.filters > div > label {  font-size: 14px;}
	
	.your_filters a {
		background: #F0F3F3 url(../images/general/x.png) 97% 55% no-repeat;
		margin: 10px 10px 10px 0;
		padding: 10px 30px 10px 10px;
		display: block;
		background-size: 13px;
	}
	
	#your_documents span.desc {
		margin-bottom: 30px;
	}
}

@media screen and (max-width: 950px) {
	#profile_and_contacts > div {
		float: none;
		padding-top: 0;
		padding-bottom: 0;
		width: 100%;
	}
	
	#profile { padding-right: 0; border-bottom: 2px solid #0087DC; margin-bottom: 20px; padding-bottom: 20px !important;}
	#contacts {border-left: 0; padding-left: 0;}

}

@media screen and (max-width: 850px) {
	#tabs .downloads li li{float:none; padding:0; border:0; margin-bottom: 5px;}	
	#tabs .downloads a {margin:0;}
	#tabs .downloads > ul > li {background-size:10% !important; padding-left:20%; background-position:5% 20px !important;}

    #tabs .downloads .video div{
        float: none;
    }
    #tabs .downloads .video iframe {
        position: relative;
        padding: 0;
        max-width: 270px;
    }
    #tabs .downloads li ul {
        float: none;
        clear: both;
        margin-top: 5px;
    }

}

@media screen and (max-width: 650px) {
	.popup-content form input[type=text], .popup-content form input[type=password]{width:96%; padding: 2%;}
	.popup-content form > div > label { font-size: 15px;}
}

@media screen and (max-width: 640px) {
	#tabs #tabContent { padding: 5% 3% 4%; width: 94%;	}
	.narrow_line { width: 94%;}
}

@media screen and (max-width: 600px) {
	#formArea .row { margin-bottom: 0;}
	#formArea .col-6, #formArea .col-4 {width: 100%; margin: 0 !important;}
	#formArea input[type=text], #formArea input[type=password], #formArea input[type=checkbox] + label { margin-bottom: 15px;}
	#formArea .field_group { margin-top: 20px;}
	#formArea { padding: 25px 0;}
	form#createAccount { padding: 20px 4%;}
	
	#editAccount .header {margin-left: 0;}
	
	#editAccount label {
		margin-left: 0;
		margin-bottom: 20px !important;
	}
	
	#editAccount .col-6{margin-top:30px !important;}
	#editAccount > .row > .col-6:first-child{margin-top:0px !important;}
	
	#contacts .contact { float: none; width: 100%; margin-left: 0;  margin-top: 25px;}
	#contacts .contact:first-child{margin-top:0 !important;}
	
	
	.filters > div { float: none; margin-left: 0;}
	.SumoSelect { width: 100%; margin-bottom: 25px;}
	.SumoSelect>.CaptionCont { padding: 2%;}
	
	.SumoSelect>.optWrapper>.options li label { width: 96%; padding: 2%;}
	
	.filters { margin-bottom: 20px;}
	.your_filters { margin: -20px 0 35px 0;}

    .mypage-message {
        background-position-x: 50%;
        background-position-y: 1em;
    }

    .mypage-message .mypage-message-text {
        padding-top: 3em;
        padding-left: 0;
    }
}

@media screen and (max-width: 500px) {
	#quick_links a { margin-left: 0; margin-top: 10px; display:block;}
	#tabs .headers a { padding: 13px 10px 15px 25px; background-position: 8px 14px;}
	#tabs .headers a.currentTab { background-position: 8px 15px; }
	.downloads { font-size: 13px;}
}

@media screen and (max-width: 400px) {
	#tabs .headers a{width:30%;}
	#tabs .headers a.currentTab { height: 44px;}
    #tabs .downloads .video iframe {
        max-width: 200px;
    }
}