/*
    the css is compiled from scss
*/
#app {
  color: #1f2835;
  overflow-x: hidden;
  height: 100vh;
}

@media (min-width: 1360px) {
  #app {
    max-width: 1300px;
  }
}

@media (min-width: 1600px) {
  #app {
    max-width: 1575px;
  }
}

#app header {
  height: 10vh;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
}

#app header h1 {
  margin-bottom: 0;
}

#app header .appLogo {
  max-height: 100%;
  padding-top: 15px;
}

#app main {
  border: 1px solid lightgrey;
}

#app main .menuWrapper {
  padding-right: 0;
}

#app main .menuWrapper aside {
  border-right: 1px solid lightgrey;
  height: 80vh;
  max-height: 80vh;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
}

#app main .menuWrapper aside .menu {
  padding-top: 1rem;
  overflow-y: auto;
  overflow-x: hidden;
}

#app main .menuWrapper aside .menu.hasShare {
  max-height: calc(100% - 40px);
}

#app main .menuWrapper aside .menu .menuCategory {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}

#app main .menuWrapper aside .menu .menuCategory .menuHead {
  padding: 3px;
  background-color: #41699c;
  width: 80%;
  text-align: center;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

#app main .menuWrapper aside .menu .menuCategory .menuHead.listHidden {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  transition-delay: 0.5s;
  transition-property: border-radius;
  transition-duration: 0s;
}

#app main .menuWrapper aside .menu .menuCategory .menuHead .link {
  cursor: pointer;
  color: white;
}

#app main .menuWrapper aside .menu .menuCategory .menuHead .link.currentPage {
  text-decoration: underline;
}

#app main .menuWrapper aside .menu .menuCategory .menuHead .arrow {
  color: white;
}

#app main .menuWrapper aside .menu .menuCategory .menuHead .chevron {
  transition: 0.5s ease-in-out;
  cursor: pointer;
}

#app main .menuWrapper aside .menu .menuCategory .menuHead .chevron.toDown {
  transform: rotate(90deg);
}

#app main .menuWrapper aside .menu .menuCategory .menuList {
  list-style-type: none;
  padding-left: 10px;
  width: 80%;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  max-height: 0;
  transition: max-height 0.5s ease-in-out, border-width 0.5s ease-in-out;
  border: 0 solid #41699c;
}

#app main .menuWrapper aside .menu .menuCategory .menuList.menuOpen {
  border-width: 1px;
  border-top-width: 0;
  max-height: 5000px;
}

#app main .menuWrapper aside .menu .menuCategory .menuList.menuOpen .listLink {
  max-height: 100px;
  cursor: pointer;
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.01s ease-in-out 0s, color 0.3s ease-in-out;
}

#app main .menuWrapper aside .menu .menuCategory .menuList .listLink {
  transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out, transform 0s ease-in-out 0.5s;
  transform: translateX(-200%);
  max-height: 0;
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  opacity: 0;
}

#app main .menuWrapper aside .menu .menuCategory .menuList .listLink::before {
  content: "\2022";
  color: #ffa604;
  display: inline-block;
  width: 0.7rem;
  font-size: 24px;
}

#app main .menuWrapper aside .menu .menuCategory .menuList .listLink .listItem {
  font-size: smaller;
  color: #1f2835;
  padding-left: 5px;
}

#app main .menuWrapper aside .menu .menuCategory .menuList .listLink .listItem:hover {
  color: #41699c;
}

#app main .menuWrapper aside .menu .menuCategory .menuList .listLink .listItem.currentPage {
  text-decoration: underline;
}

#app main .menuWrapper aside .menu .explorerLink {
  padding-top: 30px;
  padding-bottom: 15px;
}

#app main .menuWrapper aside .menu .explorerLink a {
  padding-right: 15px;
  color: #41699c;
  cursor: pointer;
}

#app main .menuWrapper aside .menu .explorerLink a:hover {
  text-decoration: underline;
}

#app main .menuWrapper aside .share {
  cursor: pointer;
  height: 40px;
  border-top: 1px solid lightgrey;
  margin: 0;
}

#app main .menuWrapper aside .share a {
  color: #41699c;
}

#app main .menuWrapper aside .share a:hover {
  text-decoration: underline;
}

@media (max-width: 991px) {
  #app main .menuWrapper {
    position: absolute;
    z-index: 1000;
    background-color: white;
    right: 15px;
    width: 250px;
    top: 55px;
    max-width: 0;
    transition: max-width 0.5s ease-in-out;
    height: calc(80vh - 15px - 40px);
    max-height: calc(80vh - 15px - 40px);
    border-bottom-right-radius: 5px;
    border-left: 1px solid lightgrey;
    padding: 0;
  }
  #app main .menuWrapper * {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }
  #app main .menuWrapper > div {
    height: 100%;
  }
  #app main .menuWrapper.show {
    max-width: 500px;
  }
  #app main .menuWrapper.show * {
    opacity: 1;
  }
  #app main .menuWrapper aside {
    border-right-width: 0;
    height: 100%;
  }
}

#app main .mainWrapper {
  padding-left: 0;
}

#app main .mainWrapper .noDisplay {
  display: none;
}

@media (max-width: 992px) {
  #app main .mainWrapper {
    padding-left: 15px;
  }
}

#app main .mainWrapper .loader {
  position: absolute;
  bottom: 0;
  width: calc(100% - 15px);
  height: calc(100% - 40px - 15px);
  text-align: center;
  background-color: white;
  z-index: 500;
  border-bottom-right-radius: 5px;
}

@media (max-width: 992px) {
  #app main .mainWrapper .loader {
    border-radius: 5px;
    width: calc(100% - 30px);
  }
}

#app main .mainWrapper .loader .fa-spinner {
  font-size: 80px;
  position: absolute;
  top: calc(50% - 80px);
  transform: translateX(-50%);
  left: 50%;
}

#app main .mainWrapper .hamburger {
  position: absolute;
  right: 28px;
  z-index: 400;
}

#app main .mainWrapper .content {
  max-height: 80vh;
  height: 80vh;
  padding: 15px 0 15px 15px;
}

#app main .mainWrapper .content .title {
  border-bottom: 1px solid lightgrey;
  min-height: 40px;
  margin-right: 0;
  display: flex;
  flex-flow: row nowrap;
}

#app main .mainWrapper .content .title > h4 {
  padding-left: 15px;
}

#app main .mainWrapper .content .title .snapshotLink {
  margin-left: 15px;
  color: #41699c;
  padding-right: 15px;
}

#app main .mainWrapper .content .title .snapshotLink:hover {
  text-decoration: underline;
}

#app main .mainWrapper .content .title .companyLinks {
  padding-left: 15px;
}

#app main .mainWrapper .content .title .companyLinks a {
  color: #41699c;
  padding-right: 15px;
}

#app main .mainWrapper .content .title .companyLinks a:hover {
  text-decoration: underline;
}

#app main .mainWrapper .content .title .techTitle {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

@media (max-width: 992px) {
  #app main .mainWrapper .content .title .techTitle .systemSwitch {
    margin-right: 65px;
  }
}

#app main .mainWrapper .content .title .techTitle .systemSwitch, #app main .mainWrapper .content .title .techTitle .systemSwitch * {
  cursor: pointer;
}

#app main .mainWrapper .content .title .techTitle .systemSwitch .IPCLabel {
  margin-right: 2.75rem;
  position: relative;
  margin-bottom: 0;
  vertical-align: top;
}

#app main .mainWrapper .content .title .techTitle .systemSwitch .custom-control-input ~ .custom-control-label::before {
  border-color: #41699c !important;
  background-color: #41699c !important;
}

#app main .mainWrapper .content .title .techTitle .systemSwitch .custom-control-input ~ .custom-control-label::after {
  background-color: white !important;
}

#app main .mainWrapper .content .main {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(80vh - 15px - 40px);
  height: calc(80vh - 15px - 40px);
  padding-right: 15px;
  padding-top: 15px;
}

#app main .mainWrapper .content .main .links .link {
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
}

#app main .mainWrapper .content .main .links .link::before {
  content: "\2022";
  color: #ffa604;
  display: inline-block;
  width: 1rem;
  font-size: 24px;
}

#app main .mainWrapper .content .main .links .link a {
  transition: color 0.3s ease-in-out;
  color: #1f2835;
}

#app main .mainWrapper .content .main .links .link a:hover {
  color: #41699c;
}

#app main .mainWrapper .content .main#general .row {
  margin-bottom: 0.5rem;
}

#app main .mainWrapper .content .main#general .row .assigneeLink {
  cursor: pointer;
  color: #41699c;
  padding-right: 15px;
}

#app main .mainWrapper .content .main#general .row .assigneeLink:hover {
  text-decoration: underline;
}

#app main .mainWrapper .content .main#general .row a.link {
  color: #41699c;
}

#app main .mainWrapper .content .main#general .row a.link:hover {
  text-decoration: underline;
}

#app main .mainWrapper .content .main#general .row .companyLinks {
  padding-left: 15px;
  display: inline;
}

#app main .mainWrapper .content .main#general .row .companyLinks a {
  color: #41699c;
  padding-right: 15px;
}

#app main .mainWrapper .content .main#general .row .companyLinks a:hover {
  text-decoration: underline;
}

#app main .mainWrapper .content .main#general .row .tuto {
  color: #4c4f54;
  font-size: smaller;
}

#app main .mainWrapper .content .main#technologies {
  position: relative;
}

#app main .mainWrapper .content .main#technologies .cpcDesc {
  transform: scale(0);
  transition: all 0.3s;
  padding-right: 15px;
  position: absolute;
  background-color: white;
  border: 1px solid lightgrey;
  border-radius: 5px;
  z-index: 450;
}

#app main .mainWrapper .content .main#technologies .cpcDesc.show {
  transform: scale(1);
}

#app main .mainWrapper .content .main#technologies .cpcDesc .descTitle {
  height: 30px;
}

@media (max-width: 768px) {
  #app main .mainWrapper .content .main#technologies .cpcDesc {
    padding-left: 15px;
  }
}

#app main .mainWrapper .content .main#technologies .cpcDesc .cpcDescription {
  padding: 0 15px;
  margin-right: 15px;
  margin-bottom: 15px;
}

#app main .mainWrapper .content .main#technologies .cpcDesc .cpcDescription .read-more {
  display: inline;
}

#app main .mainWrapper .content .main#technologies .cpcDesc .cpcDescription .read-more .popoverDescription {
  margin-left: 5px;
}

#app main .mainWrapper .content .main#technologies .cpcDesc .cpcDescription .read-more .readmore, #app main .mainWrapper .content .main#technologies .cpcDesc .cpcDescription .read-more .readless {
  color: #41699c;
  cursor: pointer;
  font-size: smaller;
}

#app main .mainWrapper .content .main#technologies .cpcDesc .cpcDescription .read-more .readmore:hover, #app main .mainWrapper .content .main#technologies .cpcDesc .cpcDescription .read-more .readless:hover {
  text-decoration: underline;
}

#app main .mainWrapper .content .main#technologies .cpcDesc .closeDesc {
  cursor: pointer;
  font-size: large;
}

#app main .mainWrapper .content .main#technologies .cpcDesc.top .arrow {
  top: 4px;
}

#app main .mainWrapper .content .main#technologies .cpcDesc.middle {
  transform: translateY(-50%) scale(0);
}

#app main .mainWrapper .content .main#technologies .cpcDesc.middle.show {
  transform: translateY(-50%) scale(1);
}

#app main .mainWrapper .content .main#technologies .cpcDesc.middle .arrow {
  top: 50%;
}

#app main .mainWrapper .content .main#technologies .cpcDesc.bottom .arrow {
  bottom: 4px;
}

#app main .mainWrapper .content .main#technologies .cpcDesc .arrow {
  position: absolute;
  left: calc(-.5rem + -1px);
  width: 0.5rem;
  height: 1rem;
  margin: 0.3rem 0;
  display: block;
}

#app main .mainWrapper .content .main#technologies .cpcDesc .arrow::before {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
  left: 0;
  border-width: 0.5rem 0.5rem 0.5rem 0;
  border-right-color: rgba(0, 0, 0, 0.25);
}

#app main .mainWrapper .content .main#technologies .cpcDesc .arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
  left: 1px;
  border-width: 0.5rem 0.5rem 0.5rem 0;
  border-right-color: #fff;
}

#app main .mainWrapper .content .main#technologies .links {
  height: 100%;
}

#app main .mainWrapper .content .main#technologies .links .tuto {
  color: #4c4f54;
}

#app main .mainWrapper .content .main#technologies .links .classes {
  min-height: 100%;
}

#app main .mainWrapper .content .main#technologies .links .classes .link {
  cursor: default;
  margin-bottom: 0;
}

#app main .mainWrapper .content .main#technologies .links .classes .link:hover {
  color: #1f2835;
}

#app main .mainWrapper .content .main#technologies .links .classes .link span {
  transition: color 0.3s ease-in-out;
  cursor: pointer;
}

#app main .mainWrapper .content .main#technologies .links .classes .link span:hover {
  color: #41699c;
}

@media (max-width: 768px) {
  #app main .mainWrapper .content .main#technologies .links .cpcs {
    padding-left: 15px;
  }
}

#app main .mainWrapper .content .main#technologies .links .cpcs .concept {
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
}

#app main .mainWrapper .content .main#technologies .links .cpcs .concept::before {
  content: "\2022";
  color: #ffa604;
  display: inline-block;
  width: 1rem;
  font-size: 24px;
}

#app main .mainWrapper .content .main#inventors .inventors li {
  cursor: pointer;
}

#app main .mainWrapper .content .main#inventors .tuto {
  color: #4c4f54;
}

#app main .mainWrapper .content .main#legal {
  padding: 0;
  overflow: hidden;
  margin-left: -15px;
}

#app main .mainWrapper .content .main#assigneeInfos .summary {
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 3px;
  border: 1px solid #41699c;
  margin-bottom: 1rem;
}

#app main .mainWrapper .content .main#assigneeInfos .summary .row:hover {
  background-color: rgba(65, 105, 156, 0.5);
}

#app main .mainWrapper .content .main#assigneeInfos .summary .row:nth-child(2) {
  border-top: 1px solid #41699c;
  border-bottom: 1px solid #41699c;
}

#app main .mainWrapper .content .main#assigneeInfos .summary .row .col-8 {
  border-right: 1px solid #41699c;
}

#app main .mainWrapper .content .main#cpcInfos .cpcDescription {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 1rem;
  border: none !important;
}

@media (max-width: 768px) {
  #app main .mainWrapper .content .main#cpcInfos .cpcDescription {
    margin-left: 15px;
    margin-right: 15px;
  }
}

#app main .mainWrapper .content .main#cpcInfos .cpcDescription .classBorder {
  border-radius: 3px;
  border: 1px solid #41699c;
  padding-left: 15px;
  padding-right: 15px;
}

#app main .mainWrapper .content .main#cpcInfos .summary {
  margin-left: 0;
  margin-right: 0;
  border-radius: 3px;
  border: 1px solid #41699c;
  margin-bottom: 1rem;
}

#app main .mainWrapper .content .main#cpcInfos .summary .row:hover {
  background-color: rgba(65, 105, 156, 0.5);
}

#app main .mainWrapper .content .main#cpcInfos .summary .row:nth-child(2) {
  border-bottom: 1px solid #41699c;
  border-top: 1px solid #41699c;
}

#app main .mainWrapper .content .main#cpcInfos .summary .row .col-8 {
  border-right: 1px solid #41699c;
}

#app main .mainWrapper .content .main#cpcInfos .sectors {
  margin-left: 0;
  margin-right: 0;
  border-radius: 3px;
  border: 1px solid #41699c;
  margin-bottom: 1rem;
}

#app main .mainWrapper .content .main#cpcInfos .sectors .row:hover {
  background-color: rgba(65, 105, 156, 0.5);
}

#app main .mainWrapper .content .main#cpcInfos .sectors .row:nth-child(2) {
  border-top: 1px solid #41699c;
}

#app main .mainWrapper .content .main#cpcInfos .sectors .row .col-8 {
  border-right: 1px solid #41699c;
}

#app main .mainWrapper .content .main#inventorInfos .summary {
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 3px;
  border: 1px solid #41699c;
  margin-bottom: 1rem;
}

#app main .mainWrapper .content .main#inventorInfos .summary .row {
  border-bottom: 1px solid #41699c;
}

#app main .mainWrapper .content .main#inventorInfos .summary .row:hover {
  background-color: rgba(65, 105, 156, 0.5);
}

#app main .mainWrapper .content .main#inventorInfos .summary .row:last-child {
  border-bottom-width: 0;
}

#app main .mainWrapper .content .main#inventorInfos .summary .row .col-4 {
  border-right: 1px solid #41699c;
}

#app main .mainWrapper .content .main#competitors .tuto {
  color: #4c4f54;
}

#app main .mainWrapper .content .main#competitors .link {
  cursor: default;
}

#app main .mainWrapper .content .main#competitors .link .listItem {
  cursor: pointer;
}

#app main .mainWrapper .content .main#competitors .toPatbase {
  font-size: smaller;
  margin-left: 5px;
  color: #41699c;
  cursor: pointer;
}

#app main .mainWrapper .content .main#cpcInfos .cpcDescription, #app main .mainWrapper .content .main#technologies .cpcDescription {
  border-radius: 3px;
  border: 1px solid #41699c;
}

#app main .mainWrapper .content .main#cpcInfos .cpcDescription .row, #app main .mainWrapper .content .main#technologies .cpcDescription .row {
  border-bottom: 1px solid #41699c;
}

#app main .mainWrapper .content .main#cpcInfos .cpcDescription .row:hover, #app main .mainWrapper .content .main#technologies .cpcDescription .row:hover {
  background-color: rgba(65, 105, 156, 0.5);
}

#app main .mainWrapper .content .main#cpcInfos .cpcDescription .row:last-child, #app main .mainWrapper .content .main#technologies .cpcDescription .row:last-child {
  border-bottom-width: 0;
}

#app main .mainWrapper .content .main#cpcInfos .cpcDescription .row .col-4, #app main .mainWrapper .content .main#technologies .cpcDescription .row .col-4 {
  border-right: 1px solid #41699c;
}

#app main .mainWrapper .content .main#cpcInfos .cpcDescription .indent-0, #app main .mainWrapper .content .main#technologies .cpcDescription .indent-0 {
  text-indent: 0px;
}

#app main .mainWrapper .content .main#cpcInfos .cpcDescription .indent-1, #app main .mainWrapper .content .main#technologies .cpcDescription .indent-1 {
  text-indent: 2px;
}

#app main .mainWrapper .content .main#cpcInfos .cpcDescription .dot-1::before, #app main .mainWrapper .content .main#technologies .cpcDescription .dot-1::before {
  content: '.';
}

#app main .mainWrapper .content .main#cpcInfos .cpcDescription .indent-2, #app main .mainWrapper .content .main#technologies .cpcDescription .indent-2 {
  text-indent: 4px;
}

#app main .mainWrapper .content .main#cpcInfos .cpcDescription .dot-2::before, #app main .mainWrapper .content .main#technologies .cpcDescription .dot-2::before {
  content: '..';
}

#app main .mainWrapper .content .main#cpcInfos .cpcDescription .indent-3, #app main .mainWrapper .content .main#technologies .cpcDescription .indent-3 {
  text-indent: 6px;
}

#app main .mainWrapper .content .main#cpcInfos .cpcDescription .dot-3::before, #app main .mainWrapper .content .main#technologies .cpcDescription .dot-3::before {
  content: '...';
}

#app main .mainWrapper .content .main#cpcInfos .cpcDescription .indent-4, #app main .mainWrapper .content .main#technologies .cpcDescription .indent-4 {
  text-indent: 8px;
}

#app main .mainWrapper .content .main#cpcInfos .cpcDescription .dot-4::before, #app main .mainWrapper .content .main#technologies .cpcDescription .dot-4::before {
  content: '....';
}

#app main .mainWrapper .content .main#cpcInfos .cpcDescription .indent-5, #app main .mainWrapper .content .main#technologies .cpcDescription .indent-5 {
  text-indent: 10px;
}

#app main .mainWrapper .content .main#cpcInfos .cpcDescription .dot-5::before, #app main .mainWrapper .content .main#technologies .cpcDescription .dot-5::before {
  content: '.....';
}

#app .mailModal .input-group-append,
#app .mailModal input,
#app .mailModal textarea {
  margin-top: 15px;
}

#app .mailModal .mailSend {
  margin-top: 15px;
}

#app .mailModal .mailSend .btn-primary {
  background-color: #41699c;
  border-color: #41699c;
  width: 100%;
}

#app .mailModal .mailSend .success {
  opacity: 0;
}

#app .mailModal .mailSend .success.show {
  opacity: 1;
}