.kettalComponent{
    .customNavBar {
      display: flex;
      min-height: 20%;
      flex-direction: column;
    }
    .container .q-btn--rectangle {
      border-radius: 0;
    }
    .q-btn {
      margin-right: 10px;
    }
    #arrow-left {
      display: block;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      cursor: pointer;
    }
    #menu {
      display: block;
      width: 37px;
      height: 37px;
      background-position: center;
      background-repeat: no-repeat;
      cursor: pointer;
      margin-left: 2rem;
    }
    
    #arrow-left {
      display: block;
      width: 37px;
      height: 37px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      cursor: pointer;
    }
    
    .container {
      width: 100%;
      height: 37px;
    }
    
    .container div:nth-child(2) {
      height: 50px;
      padding-top: 15px;
    }
    .topHeaderContainer {
      display: flex;
      width: 100%;
      justify-content: space-between;
      flex-direction: row;
      align-items: center;
    }
    .topHeaderContainer__left {
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: flex-start;
      align-content: center;
    }
    .topHeaderContainer__right {
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: flex-end;
      align-content: center;
    }
    
    .topHeaderContainer__bottom {
      margin-top: 2rem;
    }
    
    .topHeaderContainer__center {
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: flex-end;
      align-content: center;
      color: black;
      gap: 1rem;
      align-items: flex-start;
    }
    
    .headerContainer {
      display: flex;
      width: 100%;
      justify-content: space-between;
      flex-direction: row;
      align-items: center;
    }
    .headerContainer__left {
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: flex-start;
      align-content: center;
    }
    .headerContainer__right {
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: flex-end;
      align-content: center;
    }
    
    .headerContainer__bottom {
      margin-top: 2rem;
      width: 100%;
      flex: 1;
    }
    
    .headerContainer__center {
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: flex-end;
      align-content: center;
      color: black;
      gap: 1rem;
      align-items: flex-start;
    }
    
    .navBar__breadcrumbs {
      font-family: "SangBleuKingdom-Light, sans-serif" !important;
      height: 100%;
      padding-left: 3rem;
      font-size: 25px;
      color: black;
      margin-top: 0;
    }
    
    #btnThatEnablesBtnDeleteTask {
      display: block;
      width: 25px;
      height: 37px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      cursor: pointer;
    }
    
    @media only screen and (max-width: 1024px) {
      .btn-DeleteTaskDesktop {
        display: none;
      }
      .navBar__breadcrumbs {
        font-size: 1rem;
      }
      .navBar__breadcrumbs {
        display: none;
      }
    }
    }