/*
	green : #00A04A
	geel : #FDDC0D
	rood : #E01F3D
	donkerblauw: #204496
*/
/* ------------------------------------------------------------------------------------------------------------------------------------------ Generic box model fix --- */
* {-moz-box-sizing:border-box;box-sizing:border-box;-webkit-box-sizing:border-box;outline:0px}
body,html{margin:0px}
body {-webkit-text-size-adjust: 100%;-moz-text-size-adjust: 100%}
/* ------------------------------------------------------------------------------------------------------------------------------------------ Generic clearfix method --- */
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden}
.clearfix {display: inline-block}
.clearfix {zoom: 1;display: block}
/* ------------------------------------------------------------------------------------------------------------------------------------------ Misc generic definitions used in the library --- */
input, select, textarea {
    border-width: 1px;
    border-color: #cccccc;
    -webkit-border-radius: 0;
}
textarea {white-space: pre-wrap}
.required  { color:#E01F3D }
.invalid { border:1px solid #E01F3D !important; background-position: calc(100% - 4px) center; background-repeat: no-repeat; padding-right: 16px !important; background-image:url(images/inputfield_error.svg) !important; background-size: auto 18px; }
.valid { background-position: calc(100% - 4px) center; background-repeat: no-repeat; padding-right: 16px !important; background-image:url(images/inputfield_ok.svg) !important; background-size: auto 18px; }
.forgotten {border:1px solid #DD4B18}
div.valid, span.valid, td.valid  {border:1px solid transparent !important}
td.disabled, input[disabled], label[disabled], select[disabled] {color:#aaaaaa}
table.disabled {background-color:#f4f4f4;border:1px solid #ddd}
.blockselect {user-select: none}
/* does not work under IE */
input[type=text]:focus,input[type=password]:focus,select:focus,textarea:focus { border-width:1px }
textarea {resize: none}
a#lib_clear_editbutton {position:absolute;cursor:pointer; background-repeat: no-repeat;display:inline-block; width:16px; height:18px; background-image:url(images/icon_clear.png);background-color:transparent}

/* ------------------------------------------------------------------------------------------------------------------------------------------ Filetypes --- */
@font-face { font-family: 'filetypes'; font-display: auto; src: url('fonts/filetypes.eot'); src: url('fonts/filetypes.eot?#iefix') format('embedded-opentype'),  url('fonts/filetypes.woff') format('woff'), url('fonts/filetypes.ttf') format('truetype'), url('fonts/filetypes.svg') format('svg'); font-weight: normal; font-style: normal; }
.filetype_xls::before {content:"\64";font-family: "filetypes" !important}
.filetype_doc::before {content:"\62";font-family: "filetypes" !important}
.filetype_pdf::before {content:"\63";font-family: "filetypes" !important}
.filetype_ppt::before {content:"\66";font-family: "filetypes" !important}
.filetype_jpg::before {content:"\a";font-family: "filetypes" !important}

/* ------------------------------------------------------------------------------------------------------------------------------------------ FontAwesome --- */
@font-face { font-family: 'FontAwesome'; src: url('fonts/fontawesome-webfont.eot?v=4.3.0'); src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; }
.fa::after { display: inline-block; font-family: FontAwesome; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-size: inherit; font-size-adjust: none; font-stretch: normal; font-style: normal; font-synthesis: weight style; font-variant: normal; font-weight: normal; line-height: 1; text-rendering: auto; transform: translate(0px, 0px); margin-left: -24px; font-size:16px; float:right; color:inherit; line-height:inherit }
.fa-twitter::after  { content:"\f099"}
.fa-linkedin::after { content:"\f0e1"}
.fa-facebook::after { content:"\f09a"}

@font-face { font-family: 'LinearIcons'; src: url('fonts/Linearicons/Font/Linearicons.ttf') }

/* ------------------------------------------------------------------------------------------------------------------------------------------ Datepicker --- */

table.dateselect td.cal_arrow { border-left:1px solid #dddddd; background: #ccc; border-radius: 0 3px 3px 0}
table.dateselect td.cal_arrow div.cal_arrow {width: 18px; height:24px}

table.dateselect {border:1px solid #DDDDDD}
table.dateselect input[type="text"].datefield {border:0px !important;width:86px;min-width:86px}
table.datepicker_expanded td.cal_arrow,
table.dateselect td.dateinput {background-color: #fff}
table.datepicker_expanded td.cal_arrow  {border-left:1px transparent !important}
table.dateselect_expanded td.cal_arrow div.cal_arrow {background-position: 1px 0px !important}
table.dateselect td.dateinput input, table.dateselect td.dateinput input:focus { background-color: transparent !important }
/* ------------------------------------------------------------------------------------------------------------------------------------------ Select 2 and Datepicker --- */
.select2-container .select2-choice .select2-arrow b, table.dateselect td.cal_arrow div.cal_arrow {background: url("select2/select2x2.png") no-repeat scroll 0 0px rgba(0, 0, 0, 0);background-size: 64px auto}

.select2-drop, #datepicker_div { box-shadow: 0 4px 5px rgba(0, 0, 0, 0.25) }
.select2-container-multi .select2-search-choice-close {right: 4px;left: auto;top: 3px; float: right; background-image:url() !important; text-decoration:none !important}
.select2-container .select2-choice abbr::after,
.select2-container-multi .select2-search-choice-close::after { content :"X"; font-family:"Verdana";font-size:10px; color: #999999; font-weight:bold; margin-left:5px}
.select2-container .select2-choice abbr:hover::after,
.select2-container-multi .select2-search-choice-close:hover::after {color:#E01F3D}
.select2-container.select2-allowclear .select2-choice .select2-chosen { margin-right: 42px }
.select2-container-multi .select2-choices .select2-search-choice { padding: 3px 18px 3px 5px; border-color:#e3e3e3;box-shadow:none;background-image:url();background-color:#f2f2f2}
.select2-container-multi .select2-choices .select2-search-choice div {float:left}
.select2-container-multi .select2-search-choice-close::after {padding-top: 9px; margin-left:2px}
/* ------------------------------------------------------------------------------------------------------------------------------------------ Select 2 --- */
.select2 {min-width:100px}
.select2-container-multi .select2-search-choice-close::after{ margin-top: -9px; display: block}
.select2-container-multi .select2-choices, .select2-container .select2-choice, .select2-container .select2-choice .select2-arrow, .select2-drop {border-color:#DDDDDD !important}
.select2-results li.select2-result-with-children > .select2-result-label {margin-left:-4px !important; padding-left:11px; background-color:#666666 !important; color: #FFFFFF !important}
.select2-container-multi, .select2-choices {max-width:100%; border-radius: 4px}
.select2-container .select2-choice,
.select2-container-multi .select2-choices  {line-height:23px; background-image: none}
.select2-container .select2-choice abbr {top:0px}
.select2-container .select2-choice .select2-arrow b {background-position: 0px 0px !important}
span.select2-match {background-color:#ffff66 !important; text-decoration:none !important}
ul.select2-results li.select2-hilighted .select2-result-label span.select2-match {color:#000000 !important}
ul.select2-results .select2-result-label {min-height:23px}
ul.select2-results li {border-bottom: 1px solid #F3F3F3}
.select2-no-results {background-color:#ffffff !important; color:#666666 !important; font-size: 11px; font-style: italic;}
.select2-container-multi .select2-choices .select2-search-field::before {cursor:pointer; border: 1px solid #aaa; font-size:20px; background-image:url();
    border-radius: 3px; min-width:20px; min-height:19px; line-height:18px; color:#999999; display:inline-block; content:'+'; text-align:center; margin-top:3px; margin-left:6px}

body .select2-container-multi .select2-choices .select2-search-field:hover::before { color: #ff6400}
body .select2-container .select2-choice abbr { background-image:url() !important }
/* ------------------------------------------------------------------------------------------------------------------------------------------ Datepicker --- */
#datepicker_div { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px}
#datepicker_div .navigation {border-radius:6px; width:100%; height:24px}
#datepicker_div .navigation th {  background-color:transparent !important }
#datepicker_div .navigation th.back,
#datepicker_div .navigation th.forward { display:inline-block; height:24px; width:18px; padding:0px; color:#aaaaaa}
#datepicker_div .navigation th.back a,
#datepicker_div .navigation th.forward a {background-image:url(images/datepicker_sprite.png); height:24px; width:18px; background-repeat:no-repeat; display:block}
#datepicker_div .navigation th.back    {text-align:left; width:18px; border-radius: 4px 0px 0px 4px}
#datepicker_div .navigation th.back a  { background-position:3px 4px}
#datepicker_div .navigation th.back a:hover {background-position:3px -36px}
#datepicker_div .navigation th.month   {text-align:center; width:98%; font-family:"Trebuchet MS",Verdana; font-size:13px; color:#333333; font-weight:bold }
#datepicker_div .navigation th.forward {text-align:right; width:18px; border-radius: 0px 4px 4px 0px}
#datepicker_div .navigation th.forward a {background-position:3px -116px}
#datepicker_div .navigation th.forward a:hover {background-position:3px -156px}
#datepicker_div .datepicker_daysheader th {background-color:#ffffff; height:29px}
#datepicker_div th { text-align:center; font-family:"Trebuchet MS",Verdana; color:#333333 }
#datepicker_div td { text-align:center; font-family:"Trebuchet MS",Verdana; width:40px; height:28px; border:1px solid #ffffff; border-radius:6px}
#datepicker_div td span { display:inline-block; height:100%; width:100%; padding-top:3px}
#datepicker_div td:hover { border-radius:50% }
#datepicker_div td.weekend, #datepicker_div th.weekend { color:#999999 }
#datepicker_div td span.current  { background-color:#204496; color:#ffffff;    line-height: 19px; }
#datepicker_div td span.today    { background-color:#ff6400; border-radius:50%;    line-height: 19px; color:#ffffff;  }

/* ------------------------------------------------------------------------------------------------------------------------------------------ Debug window --- */
DIV#lib_debug_window { position:fixed; top:1px; left:1px; height:200px; width:300px; border:2px solid #FDDC0D; background-color:#ffffcc; border-radius:4px; box-shadow:3px 3px 3px rgba(128,128,128,.7); overflow-y: scroll; }
DIV#lib_debug_window DIV.lib_debug_window_line { line-height:15px; font-size:9px; font-family:arial; font-weight:normal; border-bottom:1px dotted #cccccc; }

/* ------------------------------------------------------------------------------------------------------------------------------------------ FineUploader --- */
.fine-uploader { width:auto; color:#ffffff; font-family:"Trebuchet MS",Verdana; font-size:11px; display:block; height:25px; position:relative; margin-top: 3px;width: 380px; max-width: 380px}
.fine-uploader .qq-uploader .qq-upload {background-color:#cccccc !important}
.fine-uploader .qq-uploader .qq-upload-button { height:25px; padding:6px; background-color:#bbbbbb; width:155px; text-align:left; display: inline-block; float:left }
.fine-uploader .qq-uploader .qq-upload-button-hover:hover div{color:#ffffff !important}
.fine-uploader .qq-uploader .qq-upload-button div {color:#204496 !important}
.fine-uploader .qq-uploader .qq-upload-success {background-color:#dddddd !important;color:#204496}
.fine-uploader .qq-uploader .qq-upload-success a {color:#204496}
.fine-uploader .qq-uploader .qq-upload-retry {display:none}
.fine-uploader ul.qq-upload-list { display:inline-block; float:left }
.fine-uploader ul.qq-upload-list li { font-size:inherit; display:inline; font-size:11px; float:left; height:25px; width:220px; padding:6px }
.fine-uploader ul.qq-upload-list .qq-upload-spinner { background-image:url(images/edit_wait.gif); height:100%; background-position:4px center; background-repeat:no-repeat; position: inherit; padding-right:4px ; float: left; display:inline-block}
.fine-uploader ul.qq-upload-list span.qq-upload-file { left:160px; display: inline-block; width: 150px; overflow:hidden; position:absolute; background-repeat:no-repeat; background-size:auto 30px}
.fine-uploader ul.qq-upload-list span.qq-upload-file a  { color:#204496}
.fine-uploader ul.qq-upload-list span.qq-upload-file a:hover  { color:#000000}
.fine-uploader ul.qq-upload-list span.qq-upload-size { padding-left: 165px }
.fine-uploader ul.qq-upload-list li span.qq-upload-file {visibility:hidden}
.fine-uploader ul.qq-upload-list li span.qq-upload-size {visibility:hidden}
.fine-uploader ul.qq-upload-list li.qq-upload-success span.qq-upload-file {left:0px !important; position: inherit; visibility:visible}
.fine-uploader ul.qq-upload-list li.qq-upload-success span.qq-upload-size {color:#204496; font-size:11px; float:right; padding-left:0px; visibility:visible}
.fine-uploader ul.qq-upload-list span.qq-progress-bar {float: left; left: 160px; position: inherit; width:150px; max-width: 150px; top: 6px}
.fine-uploader ul.qq-upload-list li a.qq-upload-cancel {display:none; visibility:hidden !important}

/* ------------------------------------------------------------------------------------------------------------------------------------------ Tooltip --- */
#tooltip {position:absolute;margin-left:5px;border-radius:0px; box-shadow:none; background-color:transparent; border:0px; width:auto}
#tooltip div#tt_arrow {float:left; display:inline-block;width:10px;height:21px; background-image:url(images/arrow_validatie.png);background-repeat:no-repeat;padding:0px}
#tooltip div#tt_content {float:left; display:inline-block; width:auto; font-weight:normal; font-size: 11px;color:#ffffff; padding-top: 2px; background-color:#DD4B18; padding-right:6px; height:21px; background-position: left center; box-shadow: 3px 3px 3px 0 rgba(127, 127, 127, 0.5)}

/* ------------------------------------------------------------------------------------------------------------------------------------------ Misc stuff --- */
img.sort_icon {width:14px; height:15px; margin-right:8px}
table.dateselect {border:1px solid #DDDDDD; height:22px}
table.dateselect input.datefield, table.dateselect input.datefield:focus {border:0px !important; background-color: transparent !important; width:86px; box-shadow:0px 0px 0px 0px !important;border-radius: 0 !important}
table.dateselect td.cal_arrow { background: #ccc; border-left: 1px solid #dddddd}
table.dateselect td.cal_arrow span {background: url(select2/select2.png) no-repeat scroll 0 1px rgba(0, 0, 0, 0); display:block; width:18px; height:24px; cursor:pointer}
table.datepicker_expanded td.cal_arrow,
table.dateselect td.dateinput {background-color: #fff}
table.datepicker_expanded td.cal_arrow  {border-left:1px transparent !important}
table.dateselect_expanded td.cal_arrow div.cal_arrow {background-position: 1px 0px !important}
table.dateselect td.dateinput input, table.dateselect td.dateinput input:focus { background-color: transparent !important }

/* ------------------------------------------------------------------------------------------------------------------------------------------ Dialog fader div --- */
DIV.dialog_fader { width: 100%; position: fixed; z-index: 99998; display:none; background-color: rgba( 128,128,156,.3); left: 0px; top: 0px; height: 100%}
body:has(#__lib_win1) DIV.dialog_fader { display:block }
/* ------------------------------------------------------------------------------------------------------------------------------------------ Social sharing --- */
.share_icons a {height:16px; width:16px; margin-left:8px; background-repeat:no-repeat; cursor:pointer; display:inline-block}
.share_icons a#share_facebook { background-image: url(images/share_facebook.png) }
.share_icons a#share_linkedin { background-image: url(images/share_linkedin.png) }
.share_icons a#share_twitter { background-image: url(images/share_twitter.png) }

.share_icons {float:right}

/* ------------------------------------------------------------------------------------------------------------------------------------------ Windows --- */
div.lib_window_dialog {background-color:#ffffff; background-size:100px auto; height:inherit; overflow:hidden; border-radius:8px; background-image:url(images/wait_indicator.gif); background-position:center center; background-repeat:no-repeat; box-shadow:0.4em 0.4em 1em rgba(0,0,0,0.4)}
DIV.lib_window_container { position:absolute; border-radius:8px; }
DIV.lib_window_caption { width:100%; height:34px; background-color: #eef6ff; padding-left:5px; border-top-left-radius: 6px; border-top-right-radius: 6px; }
div.lib_window_caption_title { float:left; line-height:24px; padding-top:8px; padding-left:6px; color:#204496; font:normal 15px "Trebuchet MS",Verdana,arial }
div.lib_window_caption div.lib_window_max {  cursor:pointer; float: right;   position:relative;   height: 32px;     width: 32px;  text-align: center; line-height:32px   }
div.lib_window_caption div.lib_window_max::after { content:"\e952"; font-family:'LinearIcons';position: relative;  color: #bbbbbb; font-size:20px; width:100%; height:100% }
div.lib_window_caption div.lib_window_max:hover {background-color:#cccccc}
div.lib_window_caption div.lib_window_max:hover::after { color: #888888}
div.lib_window_container.maximized div.lib_window_caption div.lib_window_max::after { content:"\e953"}

div.lib_window_caption div.lib_window_close::before,
div.lib_window_caption div.lib_window_close::after { content: ''; position: absolute; height: 2px; width: 100%; top: 50%; left: 0; margin-top: 1px; background: #bbbbbb}
div.lib_window_caption a {    display: block;     float: right;     height: 32px;     width: 32px;     text-align: center; }
div.lib_window_caption A div.lib_window_close,
div.lib_window_caption A:link div.lib_window_close,
div.lib_window_caption A:visited div.lib_window_close,
div.lib_window_caption A:hover div.lib_window_close,
div.lib_window_caption A:active div.lib_window_close { position:relative; border-radius: 50%; margin-top: 6px; height: 18px; width: 18px;display: inline-block}
div.lib_window_caption a:hover {background-color:#E01F3D; border-radius:5px}
div.lib_window_caption a:hover div.lib_window_close::before,
div.lib_window_caption a:hover div.lib_window_close::after { background-color:white; border-color:#E01F3D }
div.lib_window_caption div.lib_window_close::before { transform: rotate(45deg) }
div.lib_window_caption div.lib_window_close::after { transform: rotate(-45deg) }

#notification_top {background-color: #E84F18;	opacity:.75;box-shadow: 6px 6px 6px rgba(128, 128, 128, 0.5);color: #ffffff;height: auto;left:50%;	display:none;margin-left: -200px;min-height: 60px;padding:20px 10px 10px;position: fixed;text-align: center;top:50px;width:400px;z-index: 999998;border-radius:4px}

/* ------------------------------------------------------------------------------------------------------------------------------------------ Alert dialoog --- */
DIV#modalContainer { background-color:transparent; position:absolute; width:100%; height:100%; top:0px; left:0px; z-index:10000; }
DIV#modalContainer > DIV#alertBox { position:fixed; }

DIV#alertBox { 	z-index:99999; 	position:fixed; 	min-height:100px; 	height:auto !important; 	height:60px; }
div#alertbox { border: 1px solid #dedede; border-radius: 6px}
div#alertBox div.lib_window_dialog { 	 background-position:10px 43px;background-size:36px auto; background-color:#ffffff; background-repeat:no-repeat; border-radius:8px; box-shadow: 4px 4px 6px rgba(128, 128, 128, 0.5); min-width: 450px; }
div#alertBox div.lib_window_dialog.warning { background-image:url(images/dialog-warning.svg)}
div#alertBox div.lib_window_dialog.error { background-image:url(images/dialog-error.svg) }
div#alertBox div.lib_window_dialog.info { background-image:url(images/dialog-info.svg) }
div#alertBox div.lib_window_dialog.form { background-position: 10px 49px; background-image:url(images/dialog-form.svg) }
div#alertBox div.lib_window_dialog.success { background-image:url(images/dialog-success.svg) }
DIV#alertBox p { color:#204496; font:14px "Trebuchet MS",Verdana,arial; font-variant:normal; min-height:40px; height:auto; width:auto; padding-right:15px; margin-left:60px; margin-top:15px; text-align:left; }
DIV#alertBox p strong { color:#000; font-weight:bold }
DIV#alertBox p a { text-decoration:underline; font:12px verdana,arial}
DIV#alertBox DIV.buttonbar { text-align:center; width:100%; padding:8px }
DIV#alertBox DIV.buttonbar a.button { display:block; 	position:relative; margin:5px auto 12px; min-width:70px; max-width:90px; padding-left:8px;padding-right:8px;	text-decoration:none; 	text-align:center; 	cursor:pointer; font:14px "Trebuchet MS",Verdana,arial}

body.popup table.tb {background-color:#ffffff}

div#datepicker_div div.lib_window_close {  right: -12px; top: -12px; position:absolute; border-radius:50%; background-color: #aaaaaa; padding:2px}

BUTTON, SUBMIT, .button, input[type=button], input[type=submit] { 	vertical-align: baseline; 	margin: 0 2px; 	outline: none; 	cursor: pointer; 	text-align: center; 	text-decoration: none; 	-webkit-border-radius: .5em;-moz-border-radius: .5em;border-radius: .5em; 	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2); 	display: inline-block; 	zoom: 1;/* zoom and *display = ie7 hack for display:inline-block */ 	*display: inline }
.button, BUTTON, SUBMIT, input[type=button], input[type=submit] { 	color: #ffffff !important; background-color: #ff6400; 	text-decoration:none; padding-left:12px; padding-right:12px; 	padding-top:4px;padding-bottom:4px; 	font-size:inherit; 	margin:0px; 	border-radius:4px }
.button:hover, BUTTON:hover, SUBMIT:hover, input[type=button]:hover, input[type=submit]:hover { color: #ffffff !important; 	background: #f47c20; }
.button:focus, BUTTON:focus, SUBMIT:focus, input[type=button]:focus, input[type=submit]:focus,
.button:active, BUTTON:active, SUBMIT:active, input[type=button]:active, input[type=submit]:active { 	color: #fcd3a5; 	box-shadow:none; 	margin-left:2px; 	margin-top:2px }
.button:disabled, BUTTON:disabled, SUBMIT:disabled, input[type=button]:disabled, input[type=submit]:disabled,
.button[disabled=disabled], BUTTON[disabled=disabled], SUBMIT[disabled=disabled], input[type=button][disabled=disabled], input[type=submit][disabled=disabled] { 	background:#dddddd !important;color:#333333 !important;border:1px solid #dddddd }

/* ------------------------------------------------------------------------------------------------------------------------------------------ iOS on-off --- */

.switch {box-shadow: inset 0 2px 3px rgba(0,0,0,.25);background:#fff;border:1px solid #dfdfdf;user-select: none;user-select: auto;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;position:relative;display:inline-block;box-sizing:content-box;overflow:visible;width:52px;height:30px;padding:0;margin:0;border-radius:20px;cursor:pointer;transition:.3s ease-out all;-webkit-transition:.3s ease-out all;top:-1px}
.switch.wide{width:80px}
.switch small{background:#fff;border-radius:100%;width:30px;height:25px;position:absolute;top:0;left:0;transition:.3s ease-out all;-webkit-transition:.3s ease-out all;}
.switch.checked {background:#64bd63;border-color:#64bd63;color:#A9A9A9}
.switch.checked small{left:22px}
.switch.wide.checked small{left:52px}
.switch .switch-text{font-family:Arial,Helvetica,sans-serif;font-size:13px}
.switch .off{display:block;position:absolute;right:12%;color:#A9A9A9}
.switch .on{display:none;color:#fff;position:absolute;left:10%}
.switch.jn .on {left:18%}
.switch.checked .off{display:none}
.switch.checked .on{display:block}
.switch.disabled {opacity:.5;cursor:not-allowed}
.switch input {display:none}
.switch.small {height:19px}
.switch.small small{height:17px; width:17px;margin-top:1px}
.switch.checked.small small {left: 34px;}
.switch {background:#E01F3D; border-color:#E01F3D}
.switch .off {color:#ffffff}
.switch.small .off,.switch.small .on {font-size:12px; top:15%;z-index:0; line-height: 14px;}
.switch.disabled small{background-color:#dedede}

/* ------------------------------------------------------------------------------------------------------------------------------------------ Switch radiobutton effect --- */
.cb-switch {height:23px; overflow:hidden; display:inline-block; border-radius: 6px}
.cb-switch label {padding-top:2px !important}
.cb-switch input {display:none}
.cb-enable, .cb-disable, .cb-enable span, .cb-disable span { display: block; float: left; width:auto; padding:0px; height:100%}
.cb-disable, .cb-enable {background-color:#cccccc}
.cb-enable span, .cb-disable span { line-height: 24px; text-align: center; width: inherit; display: block; color:#ffffff; min-width:50px }
.cb-enable span:hover, .cb-disable span:hover  {color:#333333 !important}
.cb-disable.selected span:hover,
.cb-enable.selected span:hover {color:#FDDC0D !important}
.cb-disable.selected {background-color:#8A8A8A; background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #8A8A8A), color-stop(1, #646464) ); background-image: -o-linear-gradient(bottom, #8A8A8A 0%, #646464 100%); background-image: -moz-linear-gradient(bottom, #8A8A8A 0%, #646464 100%); background-image: -webkit-linear-gradient(bottom, #8A8A8A 0%, #646464 100%); background-image: -ms-linear-gradient(bottom, #8A8A8A 0%, #646464 100%); background-image: linear-gradient(to bottom, #8A8A8A 0%, #646464 100%); }
.cb-disable.selected span { color: #fff }
.cb-enable.selected, .cb-switch-equal .cb-disable.selected  { background-color:#86B91F; background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #86B91F), color-stop(1, #50810F) ); background-image: -o-linear-gradient(bottom, #86B91F 0%, #50810F 100%); background-image: -moz-linear-gradient(bottom, #86B91F 0%, #50810F 100%); background-image: -webkit-linear-gradient(bottom, #86B91F 0%, #50810F 100%); background-image: -ms-linear-gradient(bottom, #86B91F 0%, #50810F 100%); background-image: linear-gradient(to bottom, #86B91F 0%, #50810F 100%); }
.cb-enable.selected span { color: #fff }
.cb-switch-equal .cb-disable.selected span { color: #fff }
.cb-switch label { cursor: pointer }

.cb-switch[readonly="readonly"] label { cursor: default}
.cb-switch[readonly="readonly"] label span:hover,
.cb-switch[readonly="readonly"] label span:hover,
.cb-switch[readonly="readonly"] label span:hover,
.cb-switch[readonly="readonly"] label span:hover,
.cb-switch[readonly="readonly"] span { color: #dedede !important }

span[data-scayt-word],
span.scayt-misspell-word { color:inherit !important; text-decoration: inherit !important; font-weight: inherit !important}

@media print {
	label.cb-disable, label.cb-enable {display:none}
	label.cb-disable.selected, label.cb-enable.selected {display:block}
	.cb-switch label {background-color:#ffffff !important; background-image:url() !important}
	.cb-switch label span {color:#000000 !important}
}

/* ------------------------------------------------------------------------------------------------------------------------------------------ Google type form fields, just give form class flexcontainer and make --- */

form.flexcontainer .field {
  display: flex;
  flex-flow: column-reverse;
  margin-bottom: 1em;
}
form.flexcontainer label,
form.flexcontainer textarea,
form.flexcontainer input {
  transition: all 0.2s;
  touch-action: manipulation; padding-left:6px
}

form.flexcontainer textarea,
form.flexcontainer input {
  font-size: 1.5em;
  border: 0;
  border-bottom: 1px solid #ccc;
  font-family: inherit;

  border-radius: 0;
  padding-top:4px; padding-bottom:4px;
  cursor: text;
}

form.flexcontainer textarea:focus,
form.flexcontainer input:focus {
  outline: 0;
  border-bottom: 1px solid #666;
}

form.flexcontainer label {
   letter-spacing: 0.05em;
}
form.flexcontainer label abbr.required{ color:red; text-decoration:none; border:0px}
/**
* Translate down and scale the label up to cover the placeholder,
* when following an input (with placeholder-shown support).
* Also make sure the label is only on one row, at max 2/3rds of the
* field—to make sure it scales properly and doesn't wrap.
*/
form.flexcontainer textarea + label,
form.flexcontainer input + label {
  cursor: text;
  max-width: 66.66%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform-origin: left bottom;
  transform: translate(0, 2rem) scale(1.2);
  text-transform: none;
  letter-spacing: 0px;
   padding-left:6px
}
/**
* By default, the placeholder should be transparent. Also, it should
* inherit the transition.
*/
form.flexcontainer ::-webkit-input-placeholder {
  opacity: 0 !important;
  transition: inherit;
}
/**
* Show the placeholder when the input is focused.
*/
form.flexcontainer textarea:focus::-webkit-input-placeholder,
form.flexcontainer input:focus::-webkit-input-placeholder {
  opacity: 1;
}
/**
* When the element is focused, remove the label transform.
* Also, do this when the placeholder is _not_ shown, i.e. when
* there's something in the input at all.
*/
form.flexcontainer textarea:not(:placeholder-shown)+ label,
form.flexcontainer input:not(:placeholder-shown) + label,
form.flexcontainer textarea:focus + label,
form.flexcontainer input:focus + label {
  transform: translate(0, 0) scale(1);
  cursor: pointer;
  color: #888888
}
form.flexcontainer textarea:focus::placeholder,
form.flexcontainer input:focus::placeholder { opacity:0 }
form.flexcontainer textarea {width:100%; min-height:80px; display:block}
/* ------------------------------------------------------------------------------------------------------------------------------------------ Excel type filtering --- */

.dropdown-filter-dropdown {
    position:relative;
    display:inline-block;
	float:left;
    line-height: 16px;
	    margin-top: 2px;
}

.dropdown-filter-icon {
	display: inline-block;
    margin-left: 3px;
    margin-right: 3px;
    line-height: 18px;
    position: relative;
    height: 11px;
}

.dropdown-filter-content div.close:before {
	float: right;
    display: inline-block;
    position: absolute;
    z-index: 99998;
    background-color: transparent;
    width: 20px;
    height: 20px;
    color: #000000;
    top: 10px;
    right: 12px;
	font-size: 18px;
	content:"X";
	font-family:'LinearIcons';
	cursor:pointer;
	line-height:20px; text-align:center
}
.dropdown-filter-content div.close:hover:before  {
	background-color:#fefefe; border-radius:4px
}

.dropdown-filter-icon:hover {
    cursor:pointer;
}
.checkbox-container {
    overflow-y: auto;
}
.dropdown-filter-content {
    display: none;
    position: absolute;
    background-color: #EFF2F4;
    min-width: 200px;
    max-width: 400px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    padding-bottom:5px;
    padding-top:10px;
    padding-right:5px;
    padding-left:5px;
	overflow-y:auto;
	margin-top: 7px;
}

.dropdown-filter-content div {
    margin-top:5px;
    margin-left:5px;
    margin-right:5px;
    margin-bottom:5px;
	font-weight:normal
}

.dropdown-filter-content div.dropdown-filter-search {
    margin-bottom:10px;
    margin-top:10px;
}

.dropdown-filter-content div.dropdown-filter-search input {width:100%}

.dropdown-filter-content div.dropdown-filter-sort {
	display:inline-block; margin:0px; padding:0px; cursor:pointer;
}

.dropdown-filter-content div.dropdown-filter-sort:hover {
    background-color:#ffffff

}

.dropdown-filter-content div.dropdown-filter-sort span {
    color:#000000;
	padding:3px; padding-left:6px; padding-right:6px; margin:1px; border-radius:4px
}

.dropdown-filter-content div.dropdown-filter-sort span.active {color: #ffffff; background-color:#e84f18}

.arrow-down {
	border: solid #e84f18;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 3px;
    margin-right:5px;
    margin-left:5px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

/* changes
.dropdown-filter-icon.active,
.dropdown-filter-icon.sorted	{ background-color: white;     border-radius: 50%; padding: 1px; height:18px; width:18px; top:-6px} */
.dropdown-filter-icon.active .arrow-down,
.dropdown-filter-icon.sorted .arrow-down {border-width:0 2px 2px 0}
.dropdown-filter-content div.dropdown-filter-sort:hover {background-color:transparent}
.dropdown-filter-content div.dropdown-filter-sort:hover span {background-color:#dedede}
.dropdown-filter-content div.dropdown-filter-sort { padding-bottom: 0px; padding-left: 2px}

table.filtering th {white-space:nowrap}
table.filtering th:first-child { padding-left:16px }
table.filtering th span.clicker {float:left;margin-top: 3px;color: #003366}
table.filtering th span.clicker:hover{ cursor:pointer}
/* CMA required margin0bottom to be -2px */
table.filtering div.menutrigger { width:21px; height: 21px; float:left; margin-top: -4px; margin-bottom: -2px; background-image: radial-gradient(circle at center, #e84f18 1px, transparent 2px); background-size:24px 7px; display: inline-block; float: left; position: relative; margin-left: -20px}
table.filtering div.menutrigger nav {display:none; width:132px; margin-left: 4px; margin-top:-1px ; position:absolute}
table.filtering div.menutrigger:hover {background-image: radial-gradient(circle at center, #2196F3 2px, transparent 2px);z-index:99998}
table.filtering div.menutrigger:hover nav {display:block}
table.filtering div.menutrigger nav ul { list-style-type: none; background-color:#f2f2f2; display: block; margin: 0; margin-top:24px; padding: 0; box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.15) }
table.filtering div.menutrigger nav li {display:block; margin-left:0px}
table.filtering div.menutrigger nav li a { display: block; font-weight:normal; text-decoration:none; padding:6px; padding-left:12px; padding-right:12px; white-space:nowrap }
table.filtering div.menutrigger nav li a:hover {background-color: #204496; color:#ffffff }
table.filtering thead tr {background-color:#f2f2f2}
table tr.even {background-color:#f6f6f6}
table tr.odd {background-color:#fdfdfd}
table.filtering .dropdown-filter-item {height:24px}
.checkbox-container input[type="checkbox"],
table.filtering .dropdown-filter-item input[type="checkbox"] {
    display: none
}
.checkbox-container label,
table.filtering .dropdown-filter-item label {
    position: relative;
    display: block;
    padding-left: 22px;
    line-height: 24px;
    color:inherit
}
.checkbox-container label::before,
.checkbox-container label::after,
table.filtering .dropdown-filter-item label::before,
table.filtering .dropdown-filter-item label::after {
    position: absolute;
    content: "";
    display: inline-block;
}
.checkbox-container label::before,
table.filtering .dropdown-filter-item label::before {
    height: 16px;
    width: 16px;
    background-color: #ffffff;
    left: 0px;
    top: 3px;
    border: 1px solid #EFF2F4
}
.checkbox-container input[type="checkbox"] + label::after
table.filtering .dropdown-filter-item input[type="checkbox"] + label::after {
    content: none;
}
.checkbox-container input[type="checkbox"]:checked + label::after,
table.filtering .dropdown-filter-item input[type="checkbox"]:checked + label::after {
    height: 4px;
    width: 9px;
    border-left: 2px solid;
    border-bottom: 2px solid;
    transform: rotate(-45deg);
    left: 4px;
    top: 8px;
    border-color: #e84f18;
    content: "";
}

.checkbox-container:hover label::before {
    border: 1px solid #666666
}

.loader, .loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
}
.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255,100,0, 0.2);
  border-right: 1.1em solid rgba(255,100,0, 0.2);
  border-bottom: 1.1em solid rgba(255,100,0, 0.2);
  border-left: 1.1em solid #ff6400;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}