.bg-mtrix-dark {
  background-color: #0e3357;
}

.bg-mtrix-light {
  background-color: #3790d4;
}

/**
* RESPONSIVO
*/
@media only screen and (max-width: 1530px) {
  .card-produto {
    display: flex;
    flex-direction: column;
  }

  .card-produto-content {
    margin-top: 1rem!important;
  }

  .card-produto-scroll {
    height: 61vh;
    width: 100%;
  }
}

@media only screen and (min-width: 1531px) {
  .card-produto {
    display: flex;
  }

  .card-produto-content {
    margin-left: 1.5rem!important;
  }

  .card-produto-scroll {
    height: 68vh;
    width: 100%;
  }
}

/**
* FONT SIZE
*/
.font-size-15 {
  font-size: 15px;
}

.font-size-20 {
  font-size: 20px;
}

/**
* BUTTON
*/
.btn-hover:hover {
  animation: fadeIn 700ms;
  background-color: #4e73df;
  border-color: #4e73df;
}

.btn-hover:hover .text-hover {
  animation: fadeIn 500ms;
  color: #fff;
  font-weight: bold;
}

.no-border-focus:focus {
  box-shadow: none !important;
}


/**
*CARD
*/
.notion-collection-card {
  width: 100%;
  margin-left: 0;
  transition: transform .2s ease,box-shadow .2s ease,-webkit-transform .2s ease,-webkit-box-shadow .2s ease;
  background: #fff;
}

.notion-collection-card:hover {
  box-shadow: 0 12px 24px 0 rgb(10 16 34 / 20%);
  -webkit-box-shadow: 0 12px 24px 0 rgb(10 16 34 / 20%), 0 0 0 transparent;
  -webkit-transform: translateY(-5px) translateZ(0);
  transform: translateY(-5px) translateZ(0);
  transition: transform .2s ease,box-shadow .2s ease,-webkit-transform .2s ease,-webkit-box-shadow .2s ease;
}

/**
* Side menu
*/
.side-menu {
  background-color: #153556!important;
  background-image: url("../../images/svg/desktopLines.svg"), url("../../images/svg/desktopPolygon.svg");
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: auto;
}

.leftSideMenuHub {
  background-color: #153556!important;
  background-image: url("../../images/svg/desktopLines.svg"), url("../../images/svg/desktopPolygon.svg");
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: auto;
  left: 0!important;
}

.leftSideMenuHub.is-opened, .leftSideMenuHub  {
  left: 0!important;
}

.sidebar-brand-icon {
  text-align: center;
  padding: 10px;
}

.direita {
  background: red;
  width: 100%;
  height: 100%;
  margin-left: 0;
}

.fal {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300; }
@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 400;
  src: url("../webfonts/fa-regular-400.eot");
  src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

.rigth .appWrapper {
  position: inherit;
}

.right {
  display: block;
  width: calc(100% - 234px);
  height: 100%;
  position: relative;
  left: 234px;
}

.right .leftSideMenu.is-opened, .right .leftSideMenu, .leftSideMenuHub.is-opened ~ .right, .leftSideMenuHub.is-opened ~ .right .leftSideMenu {
  left: 234px;
}

.leftSideMenuHub ~ .right, .leftSideMenuHub ~ .right .leftSideMenu {
  left: 50px;
}

.leftSideMenuHub:not(.is-opened) ~ .right {
  width: calc(100% - 50px);
}

body {
  background-color: #fbfbfc!important;
}

/**
* ANIMATION FADE
*/
@keyframes fadeInRight {
  from {
      opacity: 0;
      transform: translateX(20px);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

.fade-in-right {
  opacity: 0;
  animation: fadeInRight 1s ease-in-out;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}

/**
* BOOTSTRAP 5 Tabs
*/
.tab-content {
  border: none !important;
}