@charset 'UTF-8';

/* Reset */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: inherit; }
ul,ol { list-style: none; }
fieldset,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }
object{ outline: 0; }
strong, b, strong *, b * { font-weight: bold !important; }
em, i, em *, i * { font-style: italic !important; }
a:focus, input:focus{ outline-style: none; }

/* Reps, deps */
.d{ color: #342496; }
.r{ color: #cf1016; }
.i{ color: #777; }
    
/* Main menu */
@keyframes submenuAppear { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: translateY(0)} }
.main-nav{ background: #3b3c41; background: linear-gradient(#3f4045, #44454a); position: absolute; top: 0; left: 0; width: 100%; font-size: 14px; line-height: 1em; z-index: 2; padding: 0; box-sizing: border-box; }
    .main-nav .inner{  display: flex; max-width: 1200px; margin: auto; border-left: rgba(255,255,255,0.2) 1px solid; border-right: rgba(255,255,255,0.2) 1px solid; }
    .main-nav .title{ color: #fff; display: block; padding: 12px 18px; cursor: pointer; opacity: .8; border: rgba(255,255,255,0.2) 1px solid; border-width: 0 1px 0 0; }
        .main-nav .title a{ color: #fff;}
            .main-nav .title a:hover{ color: #fff; }
        .main-nav .title:hover{ color: #fff; }
        .main-nav .title.red{ background: #cf1016; opacity: 1; }
        .main-nav .title .caret{ width: 4px; height: 4px; display: inline-block; margin-left: 2px; border: #ddd solid; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-4px);  }
    .main-nav .group .submenu, .main-nav .login-box, .main-nav .menu-box{ display: none; opacity: 0; }
        .main-nav .group.open .title{ opacity: 1; }
        .main-nav .group.has-box{ position: relative; }
        .main-nav .group.open .submenu{ display: block; width: calc(100% - 48px); box-sizing: border-box; position: absolute; display: grid; left: 24px; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 24px; background: #fff; padding: 16px 24px; opacity: 1; animation: submenuAppear .4s ease-in-out; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.15); border-radius: 4px; border: #ddd 1px solid; }
        .main-nav .group.open.has-box .submenu{ right: 0; left: auto; width: 160px; display: block; }
        .main-nav .login-box.open{ display: block; width: 300px; box-sizing: border-box; position: absolute; right: 0; background: #fff; padding: 16px 24px; opacity: 1; animation: submenuAppear .4s ease-in-out; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.15); border-radius: 4px; border: #ddd 1px solid; }
        .main-nav .menu-box.open{ width: 120px; }
        .main-nav .subtitle{ font-weight: bold; color: #364f9f; border-bottom: #ddd 1px solid; padding-bottom: 8px; }
        .main-nav ul li{ display: block; margin-top: 12px; }
            .main-nav ul li:first-child{ display: block; margin-top: 0; }
        .main-nav a{ color: #444; text-decoration: none; }
            .main-nav a:hover{ color: #364f9f; text-decoration: none; }
        .main-nav .disabled{ color: #a6a6a6; cursor: not-allowed; }
        .main-nav .red-flag{ background: #f7081f; color: #fff; font-size: 9px; padding: 3px 4px 2px 5px; border-radius: 4px; line-height: 1; text-transform: uppercase; font-weight: bold; transform: translateY(-1px); display: inline-block; margin-left: 4px; }
    .main-nav .right{ display: flex; margin-left: auto; }    
        .main-nav .right .title{ border-width: 0 0 0 1px; }

    .main-nav .login-box input[type="text"], .main-nav .login-box input[type="password"]{ display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; width: 100%; border: #d7d7d7 1px solid; border-radius: 3px; padding: 5px; font-family: 'Arial', sans-serif; margin-top: 5px; background: #fbfbfd; box-shadow: inset 0 1px 1px 0 #ddd; font-size: 12px; }
        .main-nav .login-box input[type="text"]:focus, .login-box input[type="password"]:focus{ border-color: #bbb; background: #fff; }
        .main-nav .login-box a{ display: inline; color: #3c65b0; background: inherit; font-weight: normal; padding: 0; font-size: inherit; }
        .main-nav div.submit{ position: relative; margin-top: 2px; padding-top: 12px; font-size: 11px;}
            .main-nav .submit .btn{ position: absolute; right: 0; top: 5px; display: block; line-height: 1.3em; padding: 4px 10px; }
        .main-nav .login-box .extra{ border-top: #ddd 1px solid; padding-top: 10px; margin-top: 10px; font-size: 11px; }
        .main-nav .login-box label{ display: block; font-size: 11px; padding-top: 5px; }
    
/* Header */
div.header{ background: #fff; padding: 20px 0 26px 0; }
	.header div.width{ position: relative; }
	.header h1{ width: 167px; height: 53px; float: left; }
	.header h1 a{ height: 53px; display: block; background: url('/images/new_design/sprite.png') 0 0 no-repeat; text-indent: -5000px; }
	.header input[type="text"]{ border: #d7d7d7 1px solid; padding: 11px 11px 11px 32px; border-radius: 3px; font-size: 12px; background: #fdfdfd url('/images/new_design/nav-icons.png') 0 -174px no-repeat; box-shadow: inset 0 1px 3px 0 #ddd; font-family: 'Arial', sans-serif; margin-left: 30px; width: 520px; margin-top: 6px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
		.header input[type="text"]:focus{ border-color: #bbb; background-color: #fff; }
	.header div.right{ position: absolute; right: 0; top: 7px; width: 222px; font-size: 11px; line-height: 1.5em;}
		.header .right a.get-legistorm{ width: 222px; height: 37px; display: block; text-indent: -5000px; background: url('/images/new_design/sprite.png') 0 -79px no-repeat;}
		.header .right a.get-legistorm:hover{ opacity: .9; }
		.header .img-banner{ position: absolute; top: 26px; left: 750px; display: block; }

	.header .right div.cart{ box-shadow: 0 1px 2px 0 #ddd; overflow: hidden; font-size: 12px; line-height: 1em; }
		.header .right .cart div.prod{ float: left; display: inline; width: 60%; font-weight: bold; color: #ff443f; }
		.header .right .cart a.checkout{ float: left; display: inline; width: 40%; color: #fff; font-weight: bold; text-decoration: none; padding: 0; margin: 0; font: bold 12px/12px Arial, sans-serif !important; opacity: 1; }
		.header .right .cart span{ text-align: center; padding: 10px; display: block; text-decoration: none; }
			.header .right .cart .prod span{  border: #ddd 1px solid; border-radius: 4px 0 0 4px; }
			.header .right .cart span.empty{ color: #999; border: #ddd 1px solid; border-radius: 4px; }
			.header .right .cart .checkout span{ border: #47689e 1px solid; border-radius: 0 4px 4px 0; background: #4c7de3; }
			.header .right .cart .prod em, .header .right .cart .empty em{ font-style: normal !important; font-weight: bold; background: url('/images/new_design/icons.png') 0 -23px no-repeat; padding-left: 25px;  }
			.header .right .cart .empty em{ font-weight: normal !important; }

/* Buttons */
.btn{ display: inline; background: #3e66b0; border: #395d9f 1px solid; box-shadow: inset 0 1px 1px 0 #6587c7; color: #fff; text-shadow: #5276b8; border-radius: 2px; padding: 5px 10px; cursor: pointer; text-decoration: none !important; }
	.btn:hover{ background: #4971bd; color: #fff; }
	.btn:active{ background: #2b4f91; color: #fff; }

.btn.green{ background: #57b748; border-color: #40a330; box-shadow: inset 0 1px 1px 0 #77c669; }
	.btn.green:hover{ background: #61bb52; }
	.btn.green:active{ background: #4ca33f; }

.btn.red{ background: #ff3a31; border-color: #d52c24; box-shadow: inset 0 1px 1px 0 #ff8983; }
	.btn.red:hover{ background: #e2322a; }
	.btn.red:active{ background: #c82c25; }

.btn.gray{ background: #cdcdcd; border-color: #b9b9b9; box-shadow: inset 0 1px 1px 0 #e1e1e1; color: #666 !important; }
	.btn.gray:hover{ background: #d6d6d6; color: #666 !important; }
	.btn.gray:active{ background: #bfbfbf; color: #666 !important; }

.btn span.arrow{ padding-left: 14px; background: url('/images/new_design/nav-icons.png') 0 -311px no-repeat; }


/* Footer */	
div.footer{ background: #3a3b40; color: #babbbc; margin-top: 40px; clear: both; }
	.footer a{ color: #babbbc; }
		.footer a:hover{ color: #fff; }
	.footer div.width{ padding: 30px 0; position: relative; }
	.footer .menu a{ margin-right: 10px; }
	.footer div.copy{ font-size: 11px; padding-top: 24px; color: #717174; }
	.footer div.contact{ text-align: right; position: absolute; right: 0; top: 30px; font-size: 11px; line-height: 16px; }

/* Notification */
.notification{ padding: 10px 10px 0 10px; }
	.notification p{ padding: 10px; background: #f5f8ff; border: #BEC5D5 1px solid; border-radius: 4px; overflow: hidden; }
	.notification .close{ float: right; margin-left: 20px; font-size: 16px; color: #999; position: relative; cursor: pointer; } 
	.notification .close:hover{ color: #666;} 

#data_page_frm{ position: fixed; right: 0; bottom: 0; background: #c0c0c0; width: 300px; border: 1px black solid; padding: 2px; }

/* Hint */
div.hint{ position: absolute; font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 11px; padding-bottom: 5px; z-index: 13; }
	.hint p{ background: #303539; padding: 8px 10px; color: #fff; line-height: 14px; border-radius: 3px; max-width: 200px; }
	.hint em{ display: block; position: absolute; width: 10px; height: 5px; position: absolute; bottom: 0; left: 50%; margin-left: -5px; background: url('/images/new_design/icons.png') 0 -240px no-repeat; }
span.hint{ border-bottom: #aaa 1px dotted; }

/* Dialogs */
.ui-dialog{ text-align: left; }
.dialog-content{ padding: 8px 5px; text-align: left; font-family: 'Arial', sans-serif; color: #2c2c2e; font-size: 13px; line-height: 19px; }
	.dialog-content p{ padding-top: 7px; }
	.dialog-content p:first-child{ padding-top: 0; }
	.dialog-content h4{ font-weight: bold; padding-top: 10px; }
	.dialog-content h4:first-child{ padding-top: 0; }
	.dialog-content div.input{ padding-top: 7px; }
	.dialog-content .radio input[type="radio"]{ right: 0 3px 0 0; }
	.dialog-content input[type="text"], .dialog-content input[type="password"], .dialog-content textarea, .search-filters input[type="text"], .search-filters input[type="password"], .search-filters textarea{ border: #ccc 1px solid; box-shadow: inset 0 1px 1px 0 #ddd; border-radius: 4px; padding: 8px; }
	.dialog-content .radio input[type="text"]{ width: 250px; }
	.dialog-content div.submit{ margin-top: 13px; padding-top: 10px; border-top: #ddd 1px solid; text-align: right; }
	.dialog-content label{ width: auto; display: inline; float: none; clear: none; line-height: 1em; }
	.dialog-content .text label, .dialog-content .password label, .dialog-content .textarea label{ width: 100px; float: left; padding: 5px 0; }
	.dialog-content .text input, .dialog-content .password input,  .dialog-content textarea{ width: 250px; clear: both; padding: 5px; }
	.dialog-content textarea{ height: 100px; }
	.dialog-content .forgotten{ padding: 5px 0 0 100px; font-size: 11px; }
	.dialog-content .error-message, .dialog-content .success-message{  border-radius: 4px; text-align: center; margin-bottom: 5px; padding: 5px; }
	.dialog-content .error-message:first-child, .dialog-content .success-message:first-child{ margin-top: 5px; }
	.dialog-content .error-message{ background: #FFE4E4; color: red;}
	.dialog-content .success-message{ background: #e0ffdb; color: #28811b; }
	.ui-widget-content .dialog-content a{ color: #2e6cb1; }
		.ui-widget-content .dialog-content a:hover{ color: #244c94; }
		.dialog-content span.red{ color: #d51523; }
	.dialog-content .full-form .text label, .dialog-content .full-form .password label, .dialog-content .full-form .textarea label{ display: block; float: none; width: auto; line-height: 1.3em; }
	.dialog-content .full-form input[type="text"], .dialog-content .full-form input[type="password"], .dialog-content .full-form textarea{ width: 362px; }
	.dialog-content .additional-info{ font-size: 11px; line-height: 14px; font-style: italic; padding-top: 4px; }
	.dialog-content .upload{ overflow: hidden; }
		.dialog-content .upload div.current, .dialog-content .upload div.file{ float: left; display: inline; }
		.dialog-content .upload div.file{ width: 200px; padding-left: 20px; }

	.dialog-content div.inline-input{ background: #eee; margin-top: 5px; border-radius: 4px; overflow: hidden; }
	.inline-input div.view{ position: relative; padding: 5px; }
		.inline-input .view span.value{ width: 95%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
		.inline-input .view span.delete{ position: absolute; top: 5px; right: 5px; font-size: 15px; cursor: pointer; font-weight: bold; color: #666; }
			.inline-input .view span.delete:hover{ color: #333; }
	 .inline-input div.edit{ padding: 5px; position: relative; }
		.inline-input .edit input[type="text"]{ width: 70%; display: inline; padding: 5px; }
		.inline-input .edit div.actions{ position: absolute; top: 3px; right: 3px; }
		div.full-form-big{ padding-top: 10px; }
			.full-form-big textarea{ width: 98%; }
			.dialog-content .full-form-big textarea{ width: 98%; }
			.dialog-content .full-form-big .textarea div.remove{ text-align: right; font-size: 11px }
				.dialog-content .full-form-big .textarea .remove a{ color: #ff3a31; }
					.dialog-content .full-form-big .textarea .remove a:hover{ text-decoration: underline; }
	.dialog-content div.inline-list{ padding-top: 10px; }

	.inline-input .hidden{ display: none; }
	.dialog-content .add-new{ padding-top: 5px; }
	.dialog-content .new-inline-input{ display: none; }


/* Search filters */
div.search-filters{ min-width: 420px; }
.search-filters div.input{ padding-top: 15px; }
	.search-filters div.input:first-child{ padding-top: 0; }
.search-filters .text label, .search-filters .date label, .search-filters .select label, .search-filters fieldset legend{ float: left; display: inline; width: 100px; padding: 5px 0; font-style: normal; text-align: left; line-height: 1em; }
.search-filters input[type="text"]{ width: 300px; font-size: 12px; line-height: 1em; padding: 5px; }
.search-filters div.date{ float: left; display: inline; margin-right: 20px; }
	.search-filters .date input[type="text"]{ width: 80px; }
	.search-filters .date label.small{ width: auto; padding-right: 15px; }
	.search-filters div.radios{ clear: both; padding-top: 15px; }
	.search-filters .radios input, .search-filters .radios label, .search-filters .radios div.input, .search-filters .checkboxes input, .search-filters .checkboxes label, .search-filters .checkboxes div.input{ float: none; display: inline; }
	.search-filters .radios div.input, .search-filters .checkboxes div.input{ margin-right: 15px; }
	.search-filters h4{ font-size: 14px; padding: 20px 0 0 0 !important; border:0 !important; margin: 0 !important; clear: both; }
	.search-filters .select select{ width: 300px; }
	.search-filters .select.many select{ width: 140px; }
	.search-filters div.submit{ padding-top: 20px; }
	.search-filters fieldset.checkboxes{ clear: both; padding-top: 15px; line-height: 1em; }
		.search-filters .checkboxes legend{ padding: 0; }
		.search-filters .checkboxes label{ line-height: 1em; }

@media screen and (max-width: 1240px){
	.header input[type="text"]{ width: 460px; }
	.header .img-banner{ left: 690px; }
}

@media screen and (max-width: 1180px){
	.header input[type="text"]{ width: 360px; }
	.header .img-banner{ left: 590px; }
}

@media screen and (max-width: 1080px){
	.header input[type="text"]{ width: 260px; }
	.header .img-banner{ left: 490px; }
}