/*
FILTER
*/
.workcontrol_filter{width: 230px; position: fixed; top: 0; bottom: 0; left: -230px; z-index: 99;}
.workcontrol_filter.active{left: 0;}

.workcontrol_filter_form{width: 100%; position: absolute; top: 0; bottom: 0; padding: 0 5px 5px 5px; margin-right: 5px; background-color: #ffffff; overflow-y: auto; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
.workcontrol_filter_form::-webkit-scrollbar{width: 10px; background-color: #ffffff;}
.workcontrol_filter_form::-webkit-scrollbar-thumb{background-color: transparent; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); -ms-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); -o-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;}


.workcontrol_filter_form_active{display: flex; flex-wrap: wrap;}
.workcontrol_filter_form_active div{display: flex; justify-content: space-between; align-items: center; font-size: 0.7em; color: #ffffff; font-weight: bold; text-transform: uppercase; padding: 3px 10px; background-color: rgba(70, 174, 247, 0.7); border: 1px solid #ffffff; border-radius: 20px; cursor: default;}
.workcontrol_filter_form_active div span{display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; font-size: 0.875em; color: #ffffff; font-weight: bold; margin-left: 5px; background-color: #46aef7; border-radius: 50%; cursor: pointer;}


.workcontrol_filter_form_item{-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);}
.workcontrol_filter_form_item p{-webkit-display: -webkit-box; -webkit-display: -webkit-flex; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -webkit-box-pack: space-between; -moz-justify-content: space-between; -moz-flex-pack: space-between; -ms-justify-content: space-between; -ms-flex-pack: space-between; -o-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; -webkit-box-align: center; -moz-align-items: center; -ms-align-items: center; -ms-flex-align: center; -o-align-items: center; font-size: 1em; color: #555555; font-weight: bold; padding: 15px 20px; margin-bottom: 0; background-color: #f9f9f9; cursor: pointer;}
.workcontrol_filter_form_item p i{font-size: 0.9em; color: #888888;}
.workcontrol_filter_form_item_options{display: none; max-height: 100px; padding: 15px 20px; overflow-y: auto;}
.workcontrol_filter_form_item_options.active{display: block;}
.workcontrol_filter_form_item_options::-webkit-scrollbar{width: 7px; background-color: #ffffff;}
.workcontrol_filter_form_item_options::-webkit-scrollbar-thumb{background-color: transparent; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); -ms-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); -o-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;}

.workcontrol_filter_form_item_options label{-webkit-display: -webkit-box; -webkit-display: -webkit-flex; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; -moz-align-items: center; -ms-align-items: center; -ms-flex-align: center; -o-align-items: center; align-items: center; width: 100%;}
.workcontrol_filter_form_item_options label:last-child{margin-bottom: 0;}
.workcontrol_filter_form_item_options label input{width: auto; margin-right: 7px;}
.workcontrol_filter_form_item_options label input[type="radio"]{display: none;}
.workcontrol_filter_form_item_options label span{font-size: 0.8em; color: #555555;}
.workcontrol_filter_form_item_options label span:hover, .workcontrol_filter_form_item label span.active{color: #46aef7; cursor: pointer;}

/*access*/
.workcontrol_filter_access{-webkit-display: -webkit-box; -webkit-display: -webkit-flex; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -webkit-box-pack: center; -moz-justify-content: center; -moz-flex-pack: center; -ms-justify-content: center; -ms-flex-pack: center; -o-justify-content: center; justify-content: center; -webkit-align-items: center; -webkit-box-align: center; -moz-align-items: center; -ms-align-items: center; -ms-flex-align: center; -o-align-items: center; align-items: center; width: 40px; height: 40px; position: absolute; top: 50%; right: -40px; margin-top: -20px; font-size: 1.5625em; color: #ffffff; background-color: #46aef7; -webkit-box-shadow: 0 0 10px rgba(255, 255, 255, 1); -moz-box-shadow: 0 0 10px rgba(255, 255, 255, 1); -ms-box-shadow: 0 0 10px rgba(255, 255, 255, 1); -o-box-shadow: 0 0 10px rgba(255, 255, 255, 1); box-shadow: 0 0 10px rgba(255, 255, 255, 1); -webkit-border-radius: 0 50% 50% 0; -moz-border-radius: 0 50% 50% 0; -ms-border-radius: 0 50% 50% 0; -o-border-radius: 0 50% 50% 0; border-radius: 0 50% 50% 0;}
.workcontrol_filter_access:hover{cursor: pointer;}
.workcontrol_filter_access i{font-size: 0.7em;}

/*filter desktop*/
@media (min-width: 62em){
    .workcontrol_filter{position: initial;}
    .workcontrol_filter_form{position: initial; padding: 0;}
    .workcontrol_filter_access{display: none;}

    /*Hacks CSS*/
    _:-ms-lang(x), .workcontrol_filter{position: initial;}
    _:-ms-lang(x), .workcontrol_filter_form{overflow-y: visible;}
}

@media (min-width: 75em){
    /*Hacks CSS*/
    _:-ms-lang(x), .workcontrol_filter{left: 5% !important;}
}