/* FONTS */
@import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans:400,700,400italic,700italic);
@import url('form.css');
@import url('content.css');
@import url('invoices.css');

/* COLORS */
.white-rgba{
  background:rgba(255,255,255,0.75);
}

/* BUTTONS */
.dragoBtn {
  border: 1px solid #ddd;
  background-color: #eee;
  color: #777;
  padding: 1em;
}

.dragoBtn .loader {width:1.5em;display:none;}
.dragoBtn.loading .loader{display:block;}
.dragoBtn.loading .copy{display:none;}

/*
* USEFUL CLASSES
*/
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

.hidden {display:none;}
.left{float:left;}
.right {
  float: right;
}
.bold{font-weight:600;}
.uppercase{text-transform:uppercase;}
.margined-150 {margin-left:150px;}
.grey-bg{background:#f1f1f2;}
/* animation */
.animation {
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
.animation-fast {
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}

/* HELPERS */
* {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;
}

root {
  display: block;
}

a {text-decoration:none;}
input:focus{border:1px solid #aecafb;
}

body, html {
  font-family:"Quattrocento Sans", Verdana, Arial, Helvetica, sans-serif !important;
  background-image:url(../img/sfondo.gif);
  font-size:12px;
  line-height:18px;
  color:#000000;
  margin:0px;
  min-height: 100%;
  height: 100%;
}

#page{
  background-image:url(../img/sfAlberi.gif);
  background-position: right 5px;
  background-repeat:no-repeat;
  background-color:#FFFFFF;
  margin-top:0;
  margin-left:auto;
  margin-right:auto;
  width:100%;
  min-width:960px;
  min-height: 100%;
}

#header {
  position:fixed;
  top:0px;
  border:0px;
  height:40px;
  width:100%;
  background:#eee;
  border-bottom:1px solid #cfd3da;

}

#fixedTopBorder{display:none;position:fixed;background-color:#dde0e5;height:5px;width:100%;top:0;left:0;z-index:9999;}
#user-welcome-wrapper {z-index:5;position:fixed;top:0;left:20%;width:80%;background-color:#34495e;height:60px;}
#user-welcome-wrapper.dev {
  left: 15%;
  width: 70%;
}
#user-welcome-wrapper .user-info {
  margin: 12px 16px 0;
  display: inline-block;
  font-weight: 300;
  color:#fff;
  padding: 4px;
}
#user-welcome-wrapper .user-info .name {
  font-weight: bold;
  font-size: 14px;
}

#user-welcome-wrapper .user-info .type{
  background-color: #fff;
  color: #34495e;
  padding: 0px 4px;
  margin-top: 2px;
  border-radius: 2px;
  text-align: center}

#mainmenu{background:none; color:#000;position:fixed;width:20%;height:100%;/*border-right:1px solid #dde0e5;*/background-color: #eee;}
#mainmenu.dev {
  width: 15%;
}
#mainmenu ul {padding:0;margin:0;width:100%;}
#mainmenu ul li {display:block;color:#333;border-top:1px solid #dde0e5;padding:1.5em 1em;border-left:4px solid #eee;}
#mainmenu ul li.active {/*background-color:#dde0e5 !important;*/background-color:#fff !important;}
#mainmenu ul li.active a {font-weight:700;color:#666;}
#mainmenu ul li.active.trademark {border-left:4px solid #FFC48C;}
#mainmenu ul li.active.patent {border-left:4px solid #9AD9D2;}
#mainmenu ul li.active.genmatt {border-left:4px solid #D0F7A6;}
#mainmenu ul li.active.general {border-left:4px solid #aaa;}
#mainmenu ul li:hover {background-color:#f6f6f6 !important;border-left-color:#f6f6f6;}
#mainmenu ul li a {color:inherit; display:block;width:100%;padding:0;text-transform:uppercase;font-weight:300;}

#mainmenu .mobileMenu {font-size:30px;position:absolute;top:50%;margin-top:-15px;left:2%;display:none;color:#fff;}

#admin-menu {position:fixed;width:10%;right:0;top:20%;-webkit-box-shadow: -2px 0px 5px 0px rgba(50, 50, 50, 0.4);
             -moz-box-shadow:    -2px 0px 5px 0px rgba(50, 50, 50, 0.4);
             box-shadow:         -2px 0px 5px 0px rgba(50, 50, 50, 0.4);
             background-color:#f6f6f6;}

#admin-menu .portlet-content {background-color:#fff;border-top:1px solid #eee;margin:0;padding-bottom:2em;text-transform:uppercase;}
#admin-menu .portlet-content li {padding:0.5em;}
#admin-menu .portlet-content a {color:#343434;}
#admin-menu .portlet-decoration {background-color:transparent;}
#admin-menu .portlet-title {color:#343434;text-transform:uppercase;position:relative;}
#admin-menu li {position:relative;}
#admin-menu .notification-ball {
  display:none;
  position:absolute;
  left: -16px;
  top: -11px;
  width: 18px;
  height: 18px;
  border-radius: 10px;
  background-color: #FF4040;text-align:center;}
#admin-menu .notification-ball span {color:#fff;font-size:8px;padding-top:2px;}
#container-wide{
  width:80%;
  /*min-width:960px;*/
  /*padding:0 20px;*/
  margin-left:20%;
}
#container-wide.dev {
  margin-left: 15%;
  width: 70%;
}

.left-side-menu {position:fixed; top:41px;border-right:1px solid #cfd3da;}
.left-side-menu * {background:none; padding:0; border:0;}

.left-side-menu > .portlet { padding-top:2em;}

#content {
  min-height:400px;
  padding:8em 2em;
}
.dev #content {
  padding: 60px 0 8em;
}
#content div.form {
  width:70%;
}
#content form.app-form {
  background:rgba(238,238,238, 0.3);
  border:1px solid #cfd3da;

  /*margin-top:3em;*/
  padding-top:1em;

}
#content form.app-form > * {margin:1em;}
#content form.app-form hr {
  margin: 1em 0;
}
#content form.app-form .row > * {float:left;}
#content form.app-form .row > label,
#content form.app-form .row.left > label {width:20%;padding:0.5em;margin-right:12px;border-bottom:1px dashed #ddd;}
#content form.app-form .row > input[type="text"] {width:70%;border:1px solid #ddd;outline:0;padding:0.5em;}
#content form.app-form .row > input[type="submit"] {width:100%;border:0;outline:0;padding:12px;background-color:#434343;color:#fff;}
#content form.app-form .row > input[type="submit"]:hover {background-color:#eee;color:#434343;}
#content form.app-form .row > input[type="submit"]:active {background-color:#e0e0e0;}
#content form.app-form .row > select {width:70%; padding:0.5em;}
#content form.app-form .advanced-search-wrapper {
  height: 0;
  overflow: hidden;
}
#content form.app-form .advanced-search-btn{
  cursor: pointer;
}
#content form.app-form .advanced-search-btn:hover{
  text-decoration: underline;
}
#content form.app-form.advanced .advanced-search-wrapper{
  height: auto;
}

#header > .container-fluid > h3 {margin-top:12px;}
#header > .container-fluid > ul {
  float:right;
  list-style-type:none;
  margin:0;
  padding:0;

}
#header > .container-fluid > ul li {
  padding:11px 20px;
  border-left:1px solid #cfd3da;
  float:left;

}
#header > .container-fluid > ul li a {
  color:#777;
}
#header > .container-fluid > ul li:hover {
  background:#ddd;

}

#footer {border-top:1px solid #cfd3da;}

/* LOGIN SECTION */

.login-wrapper{

  width:40em;
  margin:0 auto;
  /*padding: 1.5em;
  font-size:1.2em;*/
  overflow:auto;
  border-radius:0.5em;
  background-color:#fff;
  -webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    0px 0px 5px rgba(50, 50, 50, 0.75);
  box-shadow:         0px 0px 5px rgba(50, 50, 50, 0.75);
}
.login-wrapper h1 {border-bottom:1px solid #ccc;background-color:#eee;color:#333;padding:1em 1em 0.4em;}
.login-wrapper h3 {padding:0 2em;color:#555;font-style:italic;}
.login-wrapper .form {padding: 0 2.5em 2em;}
.login-wrapper .row > * {float:left;}
.login-wrapper .row > label {width:28%;display:none;}
.login-wrapper .row > input {width:100%;border:1px solid #ddd;padding: 1em;}
.login-wrapper input{ border-radius:0.2em;
                      -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
                      -moz-box-sizing: border-box;    /* Firefox, other Gecko */
                      box-sizing: border-box;}
.login-wrapper .buttons input {cursor:pointer;width:100%;padding:1em;font-size:1.1em;text-transform:uppercase;border:1px solid #f0f0f0;background-color:#f0f0f0;color:#999;}
.login-wrapper .buttons input:hover {background-color:#DDE0E5;color:#444;}
/* DASHBOARD */

.db-user-welcome {border-bottom:1px solid #dde0e5; padding:10px 20px;}
.db-user-welcome span {display:block;}
.db-user-welcome a {color:inherit;}

.db-user-desc{padding:10px 20px;}
.db-user-overview{padding:10px 0;}
.db-user-overview > div {width:230px;border-radius:4px;background:#dde0e5;padding:10px 0;margin-right:20px;}
.db-user-overview > div.trademark:hover{background:#FFC48C;}
.db-user-overview > div.patent:hover{background:#9AD9D2;}
.db-user-overview > div.genmatt:hover{background:#D0F7A6;}

.db-user-overview > div span {text-align:center; display:block;}
.db-user-overview > div span.section {font-weight:500;font-size:1.1em;margin-bottom:10px;}
.db-user-overview > div span.number {font-size:4.4em; color:#666;margin-top:20px;margin-bottom:11px;}
.db-user-stat{padding:20px; font-weight:bold;}

/* GRUPPI */
.group-menu {
  border-bottom:1px solid #eee;
  padding:0px;
}
.group-menu .menu-element {
  padding: 8px 0;
  display: inline-block;
  height: 32px;
  border-bottom: 0px solid transparent;
  font-weight: 300;
  color: #676767;
  font-size: 15px;
  cursor:pointer;
  margin-right:36px;
}
.group-menu .menu-element:hover,
.group-menu .menu-element.active{
  border-bottom: 2px solid #34495e;
  color: #343434;
}
.list-element{
  margin:20px 0;
}
.list-element > span {
  font-weight: 600;
  font-size: 14px;
  color: #777;}
.list-element .db-user-overview > div {width:208px;}

#chart {z-index:0;height:400px;margin-top: 2em;}
#chart svg {width:100%;height:100%;}
#chartInfo {display:none;position:absolute;margin-top:-10em;color:#666;padding:1em;background-color:#FFC48C;
            -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.4);
            -moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.4);
            box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.4);}

#chartInfo >div > div {margin-bottom:4px;}
#chartInfo .number {font-size:2em;}
#chartInfo  .country {font-size:2em;font-style:italic;}

/* VIEW  TRADEMARK */

#content .view {border:2px solid #eee;}
.view h3 {padding:0.5em;font-weight:500;}
.view .view-body > div {
  width:50%;
}
.view .view-body > div.long {width:400px;
}
.view-body .clearfix .left{padding:1em;}

.view-body .grey-bg{
  width:150px;
}

.view .dc-list {
  /*padding:1em 0 4px;*/
  padding: 0 0 0 0;
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 1rem 0;
}
.view .dc-list .dc-single {padding:4px;background-color:#aaa;color:#fff;margin:4px;cursor:pointer;}
.view .dc-list .dc-single.active {background-color:#f5f5f5;color:#343434;}
.view .dc-zoom {display:none;margin: 4px;border: 1px solid #bbb;font-weight:500;position:relative;}
.view .dc-zoom > .left {width:50%;}
.view .dc-zoom .grey-bg {margin-right:8px;padding:0 8px;font-weight:300;}
/* SEARCH OVERVIEW */
.db-search{padding:10px 20px; background:#fdfdfd;width:160px;margin-top:26px;}
.db-search > div {width:140px;border-radius:4px;background:#dde0e5;padding:10px 0;margin-right:20px;}
.db-search > div.trademark:hover{background:#FFC48C;}
.db-search > div.patent:hover{background:#9AD9D2;}
.db-search > div.genmatt:hover{background:#D0F7A6;}
.db-search > div:hover{
  -webkit-box-shadow: 0px 0px 5px rgba(100, 100, 100, 0.75);
  -moz-box-shadow:    0px 0px 5px rgba(100, 100, 100, 0.75);
  box-shadow:         0px 0px 5px rgba(100, 100, 100, 0.75);
}
.db-search > div span {text-align:center; display:block;}
.db-search > div span.section {font-weight:500;font-size:1.1em;margin-bottom:10px;}
.db-search > div span.number {font-size:4.4em; color:#666;margin-top:20px;margin-bottom:11px;}



.view img.tmk-image {width:160px;}
.view-foot .clearfix .left{padding:1em;}
.view-foot .grey-bg{
  width:150px;
}
.view-foot .grey-bg.patent , .view-foot .patent{
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;
  width:10%;
}
.view-foot .patent{
}
.view-foot .grey-bg.patent2{
  width:40px;
}
.view-foot .patent2{
  width:40px;
}
form .date-nested > * {float:left;}
form .date-nested > label {width:80px;padding:1em;}
form .date-nested > input {border:1px solid #ddd;padding: 0.5em;}
.view-foot ul {font-size:0.8em;}

.tmk-admin-list select{max-width:100%;}

/* MODALS */
#mapModal h1 {border-bottom:1px solid #f0f0f0;margin-bottom:2.5em;}
#mapModal .info {font-size:1.6em; font-weight:300;margin-bottom:1em;}
#mapModal .info a { padding:4px 8px;color:#999;background-color:#eee;border-radius:4px;border:1px solid;
                    font-size: 15px;position: relative;top: -8px;}
.ngdialog.ngdialog-theme-default .ngdialog-content {
  width: 80% !important;
}
.ngdialog.ngdialog-theme-default {
  padding-top: 80px !important;
}
/* amministrazione */
#ammTbl tr {
  height: 40px
}
#ammTbl tr:nth-child(odd) {
  background-color: #f5f5f5;
}
#ammTbl tr:hover {
  background-color:#e0e0e0;
}
#ammTbl tr:hover td {
  font-weight: bold;
}
#ammTbl tfoot tr {
  background-color: lightblue;
  color: #333;
}

/* ERRORS */
.error-block {
  border: 1px solid;
  border-radius: 2px;
  color: #f33535;
  margin-top: 32px;
  padding: 15px;
}
.error-block h2 {
  color: inherit;
}

/* TABS */
.generic-tab {
  display:none;
}
.generic-tab.active {
  display:block;
}

/* RIGHT FIXED MENU */
#right-menu {
  background-color: #fff;
  height: 100%;
  padding: 60px 0 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 15%;
}

@media only screen
and (max-width : 768px) {

  .container, .span-24 {width:100%;}
  .span-24 {margin-top:2em !important;}
  .login-wrapper {width:100%;}
}

@media screen and (max-width:600px){

  #mainmenu{position:relative;width:100%;}
  #mainmenu > div {text-align:center;}
  #mainmenu > ul {overflow:hidden;height:0;}
  #mainmenu .mobileMenu {display:block;}
  #page {min-width:0;}
  #container-wide {margin:0;width:100%;}

  #user-welcome-wrapper {display:none;}
  #admin-menu{display:none;}

}


.flex-table>.clearfix {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
}
.flex-table>.clearfix::before ,
.flex-table>.clearfix::after {
    display: none;
}
.flex-table>.clearfix ul {
    font-size: 1em;
    margin: 0 0 0 0;
}

@media (max-width: 991px) {
    .flex-table {
        width: 100% !important;
    }
    .flex-table>.clearfix>:first-child {
        flex: 0 0 150px;
    }
    .flex-table>.clearfix>:last-child {
        flex: auto;
    }
}