@charset "utf-8";
/*--------------------------------------------------------------- normalize --*/
*{position:relative;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;position:relative;}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:.5em;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0;max-width:100%;}svg:not(:root){overflow:hidden}figure{margin:0}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0;padding:.35em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
/*-------------------------------------------------------------- font sizes --*/
html,body,div,span,applet,object,iframe,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,label,legend,p,blockquote,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}body{line-height:1;color:black;background:white;}:focus{outline:0;}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}fieldset,img{border:0;}address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}blockquote::before,blockquote::after,q::before,q::after{content:"";}blockquote,q{quotes:"" "";}abbr,acronym{border:0;}strong{font-weight:bold;}em{font-style:italic;}
h1,h2,h3,h4,h5,h6{font-weight: bold;}h1{font-size: 1.6em;}h2{font-size: 1.4em;}h3{font-size: 1.2em;}p{margin-bottom:.5em;line-height:1.2;}sup,sub{font-size:.75em;}
body{
    font-size:1em;
}
/*--------------------------------------------------------------- principal --*/
html, body, input, textarea, select{
    font-family: 'Trebuchet MS',Helvetica,sans-serif;
    color: #333333;
}
a:link{
    color: #007fff;
    text-decoration: none;
}
a:visited{
    color: #609;
}
a:hover{
    text-decoration: underline;
}
p{
    margin-top: 0;
}
/*------------------------------------------------------------------ sprite --*/
.table_scroller_container::before, .cover, [class*="icon-f6t-"]::before, ul[class*="icon-f6t-"] li::before{
    display: block;
    background-image: url(images/fran6trap-sprite.png);
    /*background-image: url(images/fran6trap-sprite.svg);*/
    background-size: 320px 240px;
    background-repeat: no-repeat;
    text-indent: -9999px;
}
/*-------------------------------------------------------------- transition --*/
.nav a, .icon-tr, .table_fixer_arrow{
    transition: all .3s ease;
}
tr[data-link] td{
    transition: background-color .3s ease;
}
/*-------------------------------------------------------------------- main --*/
.wrap{
    max-width: 1440px;
    padding: 0 15px;
    margin: 0 auto;
}
body, html{
    height: 100%;
}
#wrapper{
    min-height: 100%;
}
header{
    margin-bottom: 1.5em;
}
section{
    padding: 2em 0;
}
main{
    z-index: 0;
}
/*----------------------------------------------------------------- llistes --*/
.nav ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
td ul{
    margin: 0;
    padding: 0 0 0 1em;
}
td ul li:last-child p{
    margin: 0;
}
dl{
    margin: .5em 0;
}
dl div{
    display: flex;
}
dt{
    font-weight: 700;
    text-align: right;
    padding: .5em;
    width: 25%;
    max-width: 120px;
    min-width: 80px;
    background-color: #f6f6f6;
    margin-bottom: 2px;
}
dd{
    width: 75%;
    padding: .5em;
}
/*----------------------------------------------------------------- banners --*/
.banner{
    min-width: 320px;
    min-height: 80px;
    background-color: #568c0a;
}
.banner ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.banner img{
    display: block;
}
/*--------------------------------------------------------------- columnari --*/
.row, ul[class^="col-"], ul[class^="list-"]{
    margin-left: -1em;
    margin-right: -1em;
    display: flex;
}
.row{
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: stretch;

}
ul[class^="col-"], ul[class^="list-"]{
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0;
}
*[class^="col-"],  ul[class^="col-"] > li, ul[class^="list-"] > li{
    box-sizing: border-box;
    padding: 0 1em;
}
ul[class^="col-"] > li, ul[class^="list-"] > li{
    margin: 0 0 30px;
    list-style: none;
}
*[class^="col-"].noRp{
    padding-right:0;
}
*[class^="col-"].noLp{
    padding-left:0;
}
.col-100:not(ul), ul.col-100 li, ul.list-1 li{ /* Llistat 1 columna */
    width: 100%;
}
.col-80:not(ul), ul.col-80 li{
    width: 80%;
}
.col-75:not(ul), ul.col-75 li{
    width: 75%;
}
.col-70:not(ul), ul.col-70 li{
    width: 70%;
}
.col-66:not(ul), ul.col-66 li{
    width: 66.66%;
}
.col-60:not(ul), ul.col-60 li{
    width: 60%;
}
.col-50:not(ul), ul.col-50 li, ul.list-2 li{ /* Llistat 2 columnes */
    width: 50%;
}
.col-40:not(ul), ul.col-40 li{
    width: 40%;
}
.col-33:not(ul), ul.col-33 li, ul.list-3 li{ /* Llistat 3 columnes */
    width: 33.33%;
}
.col-30:not(ul), ul.col-30 li{
    width: 30%;
}
.col-25:not(ul), ul.col-25 li, ul.list-4 li{ /* Llistat 4 columnes */
    width: 25%;
}
.col-20:not(ul), ul.col-20 li, ul.list-5 li{ /* Llistat 5 columnes */
    width: 20%;
}
.col-16:not(ul), ul.col-16 li, ul.list-6 li{ /* Llistat 6 columnes */
    width: 16.66%;
}
.col-12:not(ul), ul.col-12 li, ul.list-8 li{ /* Llistat 8 columnes */
    width: 12.5%;
}
.col-10:not(ul), ul.col-10 li, ul.list-10 li{ /* Llistat 10 columnes */
    width: 10%;
}

/*------------------------------------------------------------------- icons --*/
/*button[class*="icon-f6t-"], .button[class*="icon-f6t-"]{
    padding-left: .8em;
}*/
[class*="icon-"]:not(ul)::before, ul[class*="icon-"] li::before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-right: .5em;
    width: 16px;
    height: 16px;
}
[class*="icon-"].icon-solo::before{
    margin: 0;
}
ul[class*="icon-f6t-"]{
    list-style: none;
    padding: 0;
}
ul[class*="icon-f6t-"] li{
    display: flex;
    align-items: center;
    margin-bottom: 1em;
}
.icon-f6t-add::before, ul.icon-f6t-add li::before{
    background-position: -51px 0;
}
.icon-f6t-delete::before, ul.icon-f6t-delete li::before{
    background-position: -68px 0;
}
.icon-f6t-confirm::before, ul.icon-f6t-confirm li::before{
    background-position: -85px 0;
}
.icon-f6t-cancel::before, ul.icon-f6t-cancel li::before{
    background-position: -102px 0;
}
.icon-f6t-eye::before, ul.icon-f6t-eye li::before{
    background-position: -119px 0;
}
.icon-f6t-edit::before, ul.icon-f6t-edit li::before{
    background-position: -136px 0;
}
.icon-f6t-cross::before, ul.icon-f6t-cross li::before{
    background-position: -153px 0;
}
.icon-f6t-back::before, ul.icon-f6t-back li::before{
    background-position: -170px 0;
}
.icon-f6t-file::before, ul.icon-f6t-file li::before{
    background-position: 0px -17px;
}
.icon-f6t-outlink::before, ul.icon-f6t-outlink li::before{
    background-position: -187px 0;
}


.icon-f6t-add.icon-f6t-white::before, ul.icon-f6t-add.icon-f6t-white li::before{
    background-position: -51px -34px;
}
.icon-f6t-delete.icon-f6t-white::before, ul.icon-f6t-delete.icon-f6t-white li::before{
    background-position: -68px -34px;
}
.icon-f6t-confirm.icon-f6t-white::before, ul.icon-f6t-confirm.icon-f6t-white li::before{
    background-position: -85px -34px;
}
.icon-f6t-cancel.icon-f6t-white::before, ul.icon-f6t-cancel.icon-f6t-white li::before{
    background-position: -102px -34px;
}
.icon-f6t-eye.icon-f6t-white::before, ul.icon-f6t-eye.icon-f6t-white li::before{
    background-position: -119px -34px;
}
.icon-f6t-edit.icon-f6t-white::before, ul.icon-f6t-edit.icon-f6t-white li::before{
    background-position: -136px -34px;
}
.icon-f6t-cross.icon-f6t-white::before, ul.icon-f6t-cross.icon-f6t-white li::before{
    background-position: -153px -34px;
}
.icon-f6t-back.icon-f6t-white::before, ul.icon-f6t-back.icon-f6t-white li::before{
    background-position: -170px -34px;
}
.icon-f6t-file.icon-f6t-white::before, ul.icon-f6t-file.icon-f6t-white li::before{
    background-position: 0px -34px;
}
.icon-f6t-outlink.icon-f6t-white::before, ul.icon-f6t-outlink.icon-f6t-white li::before{
    background-position: -187px -34px;
}
/*------------------------------------------------------------------ varios --*/
.cover{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-position: 1000px 1000px
}
.hidden{
    display: none;
}
q,blockquote {
    quotes: "\201C" "\201D" "\2018" "\2019";
}
img{
    width: 100%;
}
.aLeft{
    text-align: left;
}
.aCenter{
    text-align: center;
}
.aRight{
    text-align: right;
}
.obfuscate_mail::after {
    content: attr(data-domain);
}
.obfuscate_mail::before {
    content: attr(data-user);
}
.auto_width{
    width: auto;
}
/*------------------------------------------------------------- breadcrumbs --*/
.breadcrumbs{
    margin-bottom: .5em;
    padding-bottom: .5em;
    border-bottom: solid 1px #DDDDDD;
}
.breadcrumbs .title{
    font-style: italic;
    color: #888888;
    font-size: .8em;
}
.breadcrumbs .title::after{
    content: ": ";
}
.breadcrumbs a::after, .breadcrumbs .miga::after{
    content: "/";
}
/*------------------------------------------------------------------- forms --*/
input[type="email"], input[type="tel"], input[type="password"], input[type="text"], input[type="number"], textarea, select{
    border: solid 1px #DEDEDE;
    border-radius: .25em;
    padding: 0 10px;
    width: 100%;
    height: 2.2em;
    color: #111111;
    box-sizing: border-box;
}
input[type="password"]:focus, input[type="text"]:focus, input[type="number"]:focus, textarea:focus, select:focus{
    border-color: silver;
    box-shadow: 0px 0px 4px #e7e7e7;
}
textarea{
    padding-top: 0.5em;
    min-height: 5em;
    max-height: 10em;
    resize: vertical;
}
label{
    display: block;
    margin: 0 0 .25em 0;
    color: gray;
}
input[type="button"], input[type="submit"], button, .button:link, .button:visited{
    text-decoration: none;
    display: inline-block;
    vertical-align: top;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#DEDEDE)); /* Safari 5.1, Chrome 10+ */
    background: -webkit-linear-gradient(top, #FEFEFE, #DEDEDE); /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, #FEFEFE, #DEDEDE); /* IE 10 */
    background: -ms-linear-gradient(top, #FEFEFE, #DEDEDE); /* Opera 11.10+ */
    background: -o-linear-gradient(top, #FEFEFE, #DEDEDE);
    border-radius: .25em;
    text-align: center;
    color: #333333;
    padding: 0.4em 1.2em;
    border: solid 1px silver;
    border-bottom-width: 2px;
    box-sizing: border-box;
    line-height: normal;
}
input[type="button"]:hover, input[type="submit"]:hover, button:hover, .button:hover{
    background: #e7e7e7;
    border-bottom-width: 1px;
    border-top-width: 2px;
}
input[type="button"].disabled, input[type="submit"].disabled, button.disabled, input[type="button"].disabled:hover, input[type="submit"].disabled:hover, button.disabled:hover,
input[type="submit"].loading, input[type="button"].loading, button.loading, input[type="submit"].loading:hover, input[type="button"].loading:hover, button.loading:hover{
    background: #FEFEFE;
    border-color: #DEDEDE;
    color: gray;
    cursor: default;
    border-bottom-width: 2px;
    border-top-width: 1px;
}
input[type="submit"].loading, input[type="button"].loading, button.loading{
    padding-left: .8em;
}
input[type="submit"].loading::before, input[type="button"].loading::before, button.loading::before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin: 0 .5em 0 0;
    width: 16px;
    height: 11px;
    background: url(../images/icons/loading.gif) no-repeat center center;
}
input[type="text"].date{
    width: 110px;
    text-align: center;
}
.checkbox{
    display: flex;
    align-items: flex-start;
}
.checkbox input{
    margin: .25em .25em 0 0
}
.alert_group .alert{
    display: none;
}
.input_group{
    display: flex;
    align-items: flex-end;
}
.input_group p{
    margin-right: 1em;
}
legend{
    margin: 0 0 1em 0;
    font-weight: 700;
}
fieldset.styled{
    border: solid 1px #DDDDDD;
    padding: 1em;
    background-color: #f6f6f6;
}
fieldset.styled legend{
    font-size: .75em;
    padding: 0.5em .75em;
    margin: 0;
    background-color: #DDDDDD;
    border: solid 1px #CCCCCC;
    border-radius: .25em;
    text-shadow: 1px 1px 1px #FFFFFF;
    box-shadow: 2px 2px 2px 0 rgba(0,0,0,.05);
    color: #777777;
}
li button{
    margin: 0 1em;
}
button[class*="icon-f6t-"].icon-solo, .button[class*="icon-f6t-"].icon-solo{
    padding: .4em .6em;
}
/*------------------------------------------------------------------- alert --*/
.alert_group{
    margin: 0 .6em;
}
.highlight input, .highlight textarea, .highlight select{
    box-shadow: 0px 0px 4px firebrick;
}
.highlight label{
    color: firebrick;
    font-weight: bold;
}
/*----------------------------------------------------------------- lookout --*/
.lookout-catastrofe label, .lookout-catastrofe legend{
    color: firebrick !important;
}
.lookout-catastrofe input, .lookout-catastrofe textarea, .lookout-catastrofe select{
    border-color: firebrick !important;
    color: #FFFFFF !important;
    background-color: firebrick !important;
}
.lookout-notok label, .lookout-notok legend{
    color: #FFA500 !important;
}
.lookout-notok input, .lookout-notok textarea, .lookout-notok select{
    border-color: #FFA500 !important;
    color: #FFFFFF !important;
    background-color: #FFA500 !important;
}

/*---------------------------------------------------------- editor content --*/
.editor_content iframe{
    width: 100% !important;
}
.editor_content li{
    margin-bottom: .5em;
}
.editor_content em,.editor_content i{
    color: #999999;
}
/*---------------------------------------------------------------- main nav --*/
.launcher{
    display: none;
}
#main_header{
    z-index: 10;
}
.nav{
    z-index: 1000;
}
.nav > ul{
    width: 100%;
}
.nav ul li{
    display: inline-block;
    vertical-align: middle;
}
.nav li:hover > ul{
    display: block;
}
.nav ul ul{
    display: none;
    position: absolute;
    padding: 0 10px;
    top: 90%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 100%;
    /*border: solid 4px #BBBBBB;*/
    box-sizing: border-box;
}
.nav ul ul li{
    padding: 0 4px;
    background-color: #DDDDDD;
}
.nav ul ul li:first-child{
    padding-top: 4px;
}
.nav ul ul li:last-child{
    padding-bottom: 4px;
}
.nav ul ul::after{
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(231, 231, 231, 0);
    border-bottom-color: #DDDDDD;
    border-width: 10px;
    margin-left: -10px;
}
.nav ul ul p, .nav ul ul a.dropdown{
    padding-right: 30px;
}
.nav ul ul p::after, .nav ul ul a.dropdown::after{
    content: "+";
    display: block;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    border-radius: 100%;
    color: #777777;
    width: 12px;
    line-height: 12px;
    text-align: center;
}
.nav ul ul li{
    display: block;
}
.nav ul ul ul{
    top: 0;
    left: 100%;
    transform: none;
}
.nav ul ul ul::after{
    left: 0;
    top: 1.7em;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-right-color: #DDDDDD;
    border-width: 10px;
    margin-top: -10px;
}
.nav ul ul a, .nav ul ul p{
    white-space: nowrap;
    word-break: keep-all;
}
.nav .selected > a:link,.nav .selected > a:visited{
    color: #CC9900;
}
.nav{
    background-color: #f6f6f6;
    border: solid 1px #e7e7e7;
}
.nav a:link, .nav a:visited, .nav p{
    line-height: 1;
    display: block;
    padding: 1em;
    margin: 0;
    color: #333333;
}
.nav li:hover > a, .nav li:hover > p{
    background-color: #FFFFFF;
}
/*------------------------------------------------------------------ tables --*/
table{
    width: 100%;
}
table thead th{
    font-size: .9em;
    font-weight: 700;
    background-color: #e7e7e7;
}
table td, table th{
    padding: .75em;
    border: solid 1px #DDDDDD;
}
table tfoot{
    font-size: .8em;
    color: #777777;
}
tr[data-link]{
    cursor: pointer;
}
tr[data-link]:hover td{
    background-color: rgba(173,216,230, .25) !important;
}
tr[data-link] .icon-tr{
    opacity: 0;
}
tr[data-link]:hover .icon-tr{
    opacity: 1;
}
table:not(.table_list) thead th:last-child, table:not(.table_list) tbody td:last-child {
    text-align: right;
    word-break: keep-all;
    white-space: nowrap;
}
table thead th:last-child [class*="icon"], table tbody td:last-child [class*="icon"], table thead th:last-child button, table thead th:last-child .button, table tbody td:last-child button, table tbody td:last-child .button{
    display: inline-block;
    vertical-align: middle;
}
/*----------------------------------------------------------- table_shorter --*/
.table_shorter_container{
    padding-top: 3em;
}
.table_shorter_scroller{
    width: 100%;
    overflow-x: auto;
}
.table_shorter{
    opacity: 0;
    font-size: .7em;
}
.table_shorter.shortened{
    font-size: 1em;
}
.table_shorter.shortened th:not([data-visible="1"]),
.table_shorter.shortened td:not([data-visible="1"]){
    display: none;
}
.table_shorter:not(.shortened) th:not([data-visible="1"]){
    box-shadow: 0 4px 2px 0 rgba(0,0,0,.25) inset;
}
.table_shorter:not(.shortened) td:not([data-visible="1"]){
    background-color: rgba(0,0,0,.05);
}
.table_shorter_control{
    margin-bottom: .5em;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.table_shorter_control *{
    margin: 0 0 0 1em;
}
.table_shorter_info{
    color: #777777;
    font-size: .8em;
}

/*------------------------------------------------------------- table_fixer --*/
.table_fixer th{
    box-sizing: border-box;
}
/*.table_fixer_fixed{*/
.table_fixer_thead_scroller{
    display: none;
    position: fixed;
    top: 0;
    z-index: 999;
    box-shadow: 0px 4px 2px 0px rgba(0,0,0,.15);
}
.table_fixer_thead_scroller{
    overflow: auto;
}
.table_fixer_thead_scroller th {
    box-sizing: border-box;
    /*    opacity: 1 !important;
        display: block !important;*/
}
.table_fixer_arrow{
    display: none;
    position: fixed;
    right: 0;
    top: .5em;
    background-color: #333333;
    color: #FFFFFF;
    width: 2em;
    line-height: 2em;
    border-radius: 100%;
    z-index: 100;
    text-align: center;
    cursor: pointer;
    margin-left: 1em;
}
.table_fixer_arrow:hover{
    box-shadow: 0 0 0 6px rgba(0,0,0,.15);
}
.table_fixer_arrow span{
    display: block;
    transform: translateY(-2px);
}
.table_fixer_arrow.table_fixer_bottom{
    transform: rotate(180deg);
    top: 3.5em;
}
.container_bottom{
    transform: translateY(-50vh);
}
/*---------------------------------------------------------------- acordeón --*/
.acordeon_group{
    padding: 1em;
    background-color: #f9f9f9;
    border: solid 1px #e7e7e7;
}
.acordeon_title{
    padding: .75em 1.5em;
    background-color: #DDDDDD;
    border: solid 1px #AAAAAA;
    border-radius: 3px;
    font-size: 1em;
    font-weight: 700;
    text-shadow: 1px 1px 1px rgba(255,255,255,.8);
    box-shadow: 0 1px 0 1px rgba(255,255,255,.8) inset, 0 -1px 0 0 rgba(0,0,0,.2) inset;
    cursor: pointer;
}
.acordeon_title:hover{
    background-color: #CCCCCC;
}
.acordeon_item{
    margin-bottom: 1em;
}
.acordeon_item header{
    margin-bottom: 0;
}
.acordeon_container{
    display: none;
}
.acordeon_item > header .icon{
    text-indent: 0;
    position: absolute;
    right: .5em;
    bottom: .5em;
    background: none;
}
.acordeon_content{
    padding: 1em;
    box-sizing: border-box;
    width: calc(100% - 6px);
    margin-left: 3px;
    background-color: #ffffff;
    border: solid 1px #DDDDDD;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

/*--------------------------------------------------------------- pestanyes --*/
section.tab_area{
    padding-top: 0;
}
.tab_area:not(section){
    margin-bottom: 2em;
}
.tab_group{
    display: flex;
    flex-wrap: wrap;
    z-index: 10;
}
.tab_group button{
    background: #f6f6f6;
    color: #777777;
    box-shadow: none;
    border: solid 1px #CCCCCC;
    border-bottom: none;
    margin-right: .5em;
    border-radius: 0;
    border-top-left-radius: .2em;
    border-top-right-radius: 1em;
    padding: .75em 1.2em;
    box-sizing: border-box;
    box-shadow: 0 -2px 2px 0 rgba(0,0,0,.1) inset;
}
.tab_group button.active, .tab_area:not(.on) .tab_group button:first-child{
    top: 1px;
    background: #FFFFFF;
    color: #333333;
    box-shadow: none;
}
.tab_content_group{
    border: solid 1px #CCCCCC;
    padding: 1.5em 1.5em 1em;
    z-index: 5;
}
.tab_content{
    display: none;
}
.tab_content_group .tab_content.active, .tab_area:not(.on) .tab_content_group .tab_content:first-child{
    display: block;
}



/*---------------------------------------------------------------- fotopepi --*/
.layer-target{
    display: none;
}
.layer-target .frame{
    padding: 1em;
    margin: 1em auto;
    background-color: #f6f6f6;
    box-sizing: border-box;
}
.layer-popup-cover{
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: rgba(0,0,0,.4);
}
.layer-popup .layer-scroller{
    overflow-y: auto;
    width: 100%;
    height: 100%;
}
.layer-popup{
    background-color: #FFFFFF;
    box-shadow: 0 0 6px 0 rgba(0,0,0,.6);
    border-radius: 2px;
    margin-top: 0;
    margin-bottom: 0;
    width: 90%;
    height: 100%;
    max-width: 1220px;
    max-height: 80vh;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-top: 3em;
    z-index: 10000;
}
.layer-popup .frame{
    background: #FFFFFF;
    padding: 1.5em;
    margin: 0;
    overflow-y: auto;
    width: 100%;
    height: 100%;
}
.layer-popup:before{
    content: "";
    display: block;
    width: 100%;
    height: 3em;
    background-color: #f6f6f6;
    position: absolute;
    top: 0;
    left:0;
}
.layer-popup-close{
    display: none;
}
.layer-popup .layer-popup-close{
    display: block;
    position: absolute;
    top: .4em;
    right: 0;
    z-index: 100;
    background: none;
    border: none;
    box-shadow: none;
}
.layer-popup.secondary_popup .layer-popup-close{
    right: auto;
    left: 0;
}
.layer-popup.secondary_popup .layer-popup-close.icon-f6t-cross::before {
    background-position: -170px 0;
}
/*------------------------------------------------------------- file upload --*/
.dropzone{
    padding: 2em 2em 1em;
    margin: 0 0 1em 0;
    border: dashed 2px #66BDCE;
    background-color: #f6f6f6;
    text-align: center;
    color: #007fff;
    display: flex;
    flex-wrap: wrap;
}
.dropzone .dz-message{
    width: 100%;
    margin-bottom: 1em;
}
.dropzone .dz-preview{
    width: 25%;
    box-sizing: border-box;
    padding: 1em;
}
.dropzone_loaded_items{
    display: none;
}
.dropzone_loaded_items li:first-child{
    /*display: none;*/
}

@keyframes passing-through {
    0% {
        opacity: 0;
        transform: translateY(40px); }
    30%, 70%, 100% {
        opacity: 1;
        transform: translateY(0px); }
    /*100% {
        opacity: 0;
        transform: translateY(-40px); } */
}

@keyframes slide-in {
    0% {
        opacity: 0;
        transform: translateY(40px); }
    30% {
        opacity: 1;
        transform: translateY(0px); }
}

@keyframes pulse {
    0% {
        transform: scale(1); }
    10% {
        transform: scale(1.1); }
    20% {
        transform: scale(1); }
}

.dropzone.dz-clickable {
    cursor: pointer;
}
.dropzone.dz-clickable * {
    cursor: default;
}
.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
    cursor: pointer;
}
.dropzone.dz-started .dz-message {
    display: none;
}
.dropzone.dz-drag-hover {
    border-style: solid;
}
.dropzone.dz-drag-hover .dz-message {
    opacity: 0.5;
}
.dropzone .dz-preview {
    position: relative;
    display: inline-block;
    vertical-align: top;
    min-height: 100px;
}
.dropzone .dz-preview:hover {
    z-index: 1000;
}
.dropzone .dz-preview:hover .dz-details {
    opacity: 1;
}
.dropzone .dz-preview.dz-file-preview .dz-image {
    border-radius: 4px;
    background: #999;
    background: linear-gradient(to bottom, #eee, #ddd);
}
.dropzone .dz-preview.dz-file-preview .dz-details {
    opacity: 1;
}
.dropzone .dz-preview.dz-image-preview {
    /*background: white;*/
}
.dropzone .dz-preview.dz-image-preview .dz-details {
    transition: opacity 0.2s linear;
}
.dropzone .dz-preview .dz-remove {
    font-size: 14px;
    text-align: center;
    display: block;
    cursor: pointer;
    border: none;
}
.dropzone .dz-preview .dz-remove:hover {
    text-decoration: underline;
}
.dropzone .dz-preview:hover .dz-details {
    opacity: 1;
}
.dropzone .dz-preview .dz-details {
    z-index: 20;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    font-size: 13px;
    width: 100%;
    padding: 2em 1em;
    text-align: center;
    color: rgba(0, 0, 0, 0.9);
    line-height: 150%;
    box-sizing: border-box;
}
.dropzone .dz-preview .dz-details .dz-size {
    margin-bottom: 1em;
}
.dropzone .dz-preview .dz-details .dz-filename {
    white-space: nowrap;
}
.dropzone .dz-preview .dz-details .dz-filename:hover span {
    border: 1px solid rgba(200, 200, 200, 0.8);
    background-color: rgba(255, 255, 255, 0.8);
}
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
    overflow: hidden;
    text-overflow: ellipsis;
}
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
    border: 1px solid transparent;
}
.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
    background-color: rgba(255, 255, 255, 0.4);
    padding: 0 0.4em;
    border-radius: 3px;
}
.dropzone .dz-preview:hover .dz-image img {
    transform: scale(1.05, 1.05);
    filter: blur(8px);
}
.dropzone .dz-preview .dz-image {
    border-radius: 4px;
    overflow: hidden;
    width: 120px;
    height: 120px;
    position: relative;
    display: block;
    z-index: 10;
}
.dropzone .dz-preview .dz-image img {
    display: block;
}
.dropzone .dz-preview.dz-success .dz-success-mark {
    animation: passing-through 3s;
    animation-fill-mode: forwards;
}
.dropzone .dz-preview.dz-error .dz-error-mark {
    opacity: 1;
    animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
    pointer-events: none;
    opacity: 0;
    z-index: 500;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    margin-left: -27px;
    margin-top: -27px;
}
.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
    display: block;
    width: 54px;
    height: 54px;
}
.dropzone .dz-preview.dz-processing .dz-progress {
    opacity: 1;
    transition: all 0.2s linear;
}
.dropzone .dz-preview.dz-complete .dz-progress {
    opacity: 0;
    transition: opacity 0.4s ease-in;
}
.dropzone .dz-preview:not(.dz-processing) .dz-progress {
    animation: pulse 6s ease infinite;
}
.dropzone .dz-preview .dz-progress {
    opacity: 1;
    z-index: 1000;
    pointer-events: none;
    position: absolute;
    height: 16px;
    left: 50%;
    top: 50%;
    margin-top: -8px;
    width: 80px;
    margin-left: -40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    overflow: hidden;
}
.dropzone .dz-preview .dz-progress .dz-upload {
    background: #333;
    background: linear-gradient(to bottom, #666, #444);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    transition: width 300ms ease-in-out;
}
.dropzone .dz-preview.dz-error .dz-error-message {
    display: block;
}
.dropzone .dz-preview.dz-error:hover .dz-error-message {
    opacity: 1;
    pointer-events: auto;
}
.dropzone .dz-preview .dz-error-message {
    pointer-events: none;
    z-index: 1000;
    position: absolute;
    display: block;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 8px;
    font-size: 13px;
    top: 130px;
    left: -10px;
    width: 140px;
    background: #be2626;
    background: linear-gradient(to bottom, #be2626, #a92222);
    padding: 0.5em 1.2em;
    color: white;
}
.dropzone .dz-preview .dz-error-message:after {
    content: '';
    position: absolute;
    top: -6px;
    left: 64px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #be2626;
}

.dz-file-preview .dz-image{
    background: url(images/document.svg) no-repeat center center !important;
    background-size: 93px 120px;
}
.dropzone_loaded_items .dolly{
    display: none;
}
/*----------------------------------------------------------------- buttons --*/
.btn_group *{
    margin-right: 1.5em;
    display: inline-block;
    vertical-align: middle !important;
}
[class*="_btn"]{
    border: none !important;
    padding: .75em 2.5em 1em !important;
    text-transform: uppercase;
    box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.2), 0 3px 3px 2px rgba(0,0,0,.2);
}
[class*="_btn"]:hover{
    transform: translateY(2px);
    box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.4), 0 3px 3px 2px rgba(0,0,0,.1);
}
[class*="_btn"]:active{
    transform: translateY(4px);
    box-shadow: inset -12px 0 6px 0 rgba(255,255,255, 0.2), inset 12px 0 6px 0 rgba(255,255,255, 0.2), 0 3px 3px 2px rgba(0,0,0,.1)
}
.primary_btn {
    color: #FFFFFF !important;
    background: #0088cc !important;
}
.secondary_btn {
    color: #FFFFFF !important;
    background: #5bb75b !important;
}
.tertiary_btn {
    color: #333333 !important;
    background: #f6f6f6 !important;
}
.danger_btn {
    color: #FFFFFF !important;
    background: darkred !important;
}
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*-------------------------------------------------------------- responsive --*/
@media all and (max-width: 768px){
    body{
        font-size: .85em;
    }
    /*-- nav --*/
    .nav > ul{
        width: auto;
        display: none;
    }
    .nav ul li{
        display: block;
        text-align: center;
    }
    #main_launcher{
        display: block;
    }
    /*-- content --*/
    *[class^="col-"]:not(ul), ul[class^="col-"] li{
        width: auto;
    }
    .col-20:not(ul), ul.col-20 li, .col-25:not(ul), ul.col-25 li{
        width: 50% !important;
    }

    /*-- tables --*/
    .fake_scroller, .fake_scroller div{
        height: 16px;
    }
    .fake_scroller, .table_scroller{
        width: 100%;
        overflow-x: auto;
        border-left: solid 1px #DDDDDD;
        border-right: solid 1px #DDDDDD;
    }
    .table_scroller_container{
        padding: 0 0 16px 0;
    }
    .table_scroller_container::before{
        content:"";
        display: block;
        width: 16px;
        height: 16px;
        margin: 0 auto;
        background-position: -34px 0;
    }
    .table_scroller_container .icon.scroll{
        display: block;
        width: 16px;
        height: 16px;
        position: absolute;
        left: 49%;
        transform: translateX(-100%);
        top: 0;
        opacity: .25;
        /*background-color: black;*/
        background-position: 0 0;
    }
    .table_scroller_container .icon.scroll.right{
        left: auto;
        right: 49%;
        transform: translateX(100%);
        background-position: -17px 0;
    }
    .table_scroller_container .icon.scroll.active{
        opacity: 1;
    }
    .table_scroller{
        padding: 10px 0;
    }
}