.sidebar-web {
  transition: width 0.2s;
}

.toggled-sidebar .sidebar-web {
  // width: 256px;
  width: 375px;
}

.logo-sidebar {
  display: none;
}

@media (max-width: 877px) {
  .toggled-sidebar .sidebar-web {
    width   : 100%;
    overflow: auto;
  }

  .sidebar-web {
    width   : 0;
    display : none;
    overflow: hidden;
  }

  .logo-sidebar {
    display: block !important;
  }

  .sidebar-web {
    position              : fixed;
    top                   : 0;
    left                  : 0;
    bottom                : 0;
    width                 : 0;
    background-color      : #ffffff;
    word-break            : break-all;
    display               : flex;
    flex-direction        : column;
    transition            : width 0.2s;
    z-index               : 999;
    background-attachment : fixed;
    // background-image: url(https://www.gstatic.com/mobilesdk/190424_mobilesdk/nav_nachos@2x.png);
    // background-position: left 0 bottom 0;
    background-repeat     : no-repeat;
    background-size       : 256px 556px;
    // padding: 0 1rem;
  }
}

.sidebar-brand-web {
  display         : flex;
  justify-content : center;
  align-items     : center;
  height          : auto;
  border-bottom   : 1px solid #f0e81f;
  background-color: #0072BA;
  position        : relative;

  .sbar-brand-name-web {
    display        : flex;
    justify-content: center;

    // position: relative;
    img.logo-sidebar {
      width        : 70%;
      min-width    : 151.2px;
      max-width    : 151.2px;
      min-height   : 113.4px;
      max-height   : 113.4px;
      margin-bottom: 10px;
    }
  }

  .close-sidebar {
    color    : #ffffff;
    font-size: 20px;
    position : absolute;
    top      : 0.5rem;
    right    : 10px;
  }
}

@media (max-width: 375px) {
  .divider {
    border-top-color: #ffff;
  }

  .fas {
    padding-right: 5px;
  }

  .content-img {
    min-width : 100px !important;
    min-height: 100px !important;
  }
}