@import "https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap";
/*
 img{
 display: block;
 width: 100%;
 }
 .sidebar-icon{
 color: var(--color-light);
 }
 h1{
 font-weight: 300;
 font-size: 24px;
 }
 .page-title{
 background: var(--color-primary);
 width: fit-content;
 padding: 5px 20px;
 color: var(--color-white);
 border-radius: 10px;
 }
 h2{
 font-size: 1.4rem;
 }
 h3{
 font-size: 1rem;
 color: var(--color-white);
 }
 h4{
 font-size: 0.8rem;
 }
 h5{
 font-size: 0.77rem;
 }
 .primary{
 color: var(--color-primary);
 }
 .danger{
 color: var(--color-danger);
 }
 .success{
 color: var(--color-success);
 }
 .warning{
 color: var(--color-warning);
 }
 aside{
 background: var(--color-primary);
 color: var(--color-white);
 height: auto;
 padding: 20px;
 }
 .btn-primary{
 color: var(--color-white);
 background: var(--color-primary);
 padding: 4px 12px;
 border: none;
 border-radius: 5px;
 font-size: 12px;
 }
 .table-btn{
 color: var(--color-white);
 background: var(--color-primary);
 padding: 1px 20px;
 border: none;
 border-radius: 10px;
 font-size: 12px;
 }
 .rounded-input{
 width: 300px;
 height: 40px;
 border: 2px solid var(--color-primary);
 border-radius: 10px;
 padding: 10px;
 }
 .border-bottom{
 width: 100%;
 border-bottom: 2px solid var(--color-primary);
 padding: 15px;
 }
 .btn-secondary {
 border: none;
 background: var(--color-scondary);
 padding: 3px 12px;
 border-radius: 10px;
 }
 .container-pagination{
 width: 500px;
 }
 .pagination{
 display: flex;
 align-items: center;
 background: #fff;
 color: #383838;
 padding: 5px 10px;
 border-radius: 6px;
 }
 ul{
 margin: 5px 8px;
 }
 ul li{
 display: inline-block;
 margin: 0 5px;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 text-align: center;
 font-size: 16px;
 font-weight: 500;
 line-height: 20px;
 cursor: pointer;
 border: 1px solid black;
 }
 ul li.active{
 color: #fff;
 background: var(--color-primary) ;
 }
 .btn1, .btn2{
 display: inline-flex;
 align-items: center;
 font-size: 16px;
 font-weight: 500;
 color: #383838;
 background: transparent;
 outline: none;
 border: none;
 cursor: pointer;
 }
 .group-logo{
 display: flex;
 width: 100%;
 }
 .border-top{
 border: 1px solid var(--color-dark);
 margin-bottom: 10px;
 display: flex;
 }
 .bg-secondary{
 width: 600px;
 background: var(--color-scondary);
 border-radius: var(--border-radius-1);
 box-shadow: 0px 3px 3px 3px rgba(132, 139, 200, 0.18)
 }
 .bg-secondary h3{
 color: black;
 padding: 10px;
 }
 .btn-close{
 width: 36px;
 height: 36px;
 background: var(--color-primary);
 color: var(--color-white);
 border: none;
 border-radius: 5px;
 }
 .form-control{
 width: 300px;
 height: 40px;
 border: 2px solid var(--color-primary);
 border-radius: 10px;
 border-left: none;
 border-top-left-radius:0;
 border-bottom-left-radius:0;
 padding: 10px;
 float: right;
 }
 .input-group-addon{
 background: var(--color-primary);
 color: var(--color-white);
 padding: 7px;
 border-radius: 10px;
 border-top-right-radius:0;
 border-bottom-right-radius:0;
 float: right;
 }
 aside .logo{
 display: flex;
 gap: 0.8rem;
 }
 aside .logo img{
 width: 2rem;
 height: 2rem;
 }
 aside .sidebar{
 display: flex;
 flex-direction: column;
 height: 86vh;
 position: relative;
 top: 3rem;
 width: 194px;
 }
 aside h3{
 font-weight: 500;
 }
 aside .sidebar a{
 display: flex;
 color: var(--color-light);
 margin-left: 2rem;
 gap: 1rem;
 align-items: center;
 position: relative;
 height: 3rem;
 transition: all 300ms ease;
 }
 aside .sidebar a span{
 font-size: 1.6rem;
 transition: all 300ms ease;
 }
 aside .sidebar a.active{
 background: var(--color-light);
 color: var(--color-primary);
 margin-right: -1.3rem;
 width: 100%;
 }
 aside .sidebar a.active::before{
 content: "";
 width: 6px;
 height: 100%;
 background: var(--color-dark);
 }
 aside .sidebar a.active span{
 color: var(--color-primary);
 margin-left: calc(1rem - 3px);
 }
 aside .sidebar a:hover{
 color: var(--color-primary);
 }
 aside .sidebar .message-count{
 background: var(--color-danger);
 color: white;
 padding: 2px 10px;
 font-size: 11px;
 border-radius: var(--border-radius-1);
 }
 main{
 margin-top: 1.4rem;
 }
 main .insights{
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 1.6rem;
 }
 main .insights > div{
 background: var(--color-white);
 padding: var(--card-padding);
 border-radius: var(--card-border-radius);
 margin-top: 1rem;
 box-shadow: var(--box-shadow);
 transition: all 300ms ease;
 width: fit-content;
 }
 main .insights > div:hover{
 box-shadow: none;
 }
 main .insights > div.expenses i{
 background: var(--color-danger);
 }
 main .insights > div.income i{
 background: var(--color-success);
 }
 main .insights > div .middle{
 display: flex;
 align-items: center;
 justify-content: space-between;
 }
 main .insights h3{
 margin: 1rem 0 0.6rem;
 font-size: 1rem;
 }
 main .recent-orders{
 margin-top: 2rem;
 }
 main .recent-orders h2{
 margin-bottom: 0.8rem;
 }
 main table{
 background: var(--color-scondary);
 width: 100%;
 border-radius: 10px;
 padding: var(--card-padding);
 text-align: right;
 transition: all 300ms ease;
 }
 main .recent-orders table:hover{
 box-shadow: none;
 }
 main table tbody td{
 height: 2.8rem;
 border-bottom: 1px solid var(--color-light);
 color: var(--color-dark-variant);
 }
 main table tbody tr:last-child td{
 border: none;
 }
 main .recent-orders a{
 text-align: center;
 display: block;
 margin: 1rem auto;
 color: var(--color-primary);
 }
 main table thead tr th{
 text-align: right;
 }
 @media screen and  (max-width: 1200px){
 .container{
 width: 94%;
 grid-template-columns: 7rem auto 23rem;
 }
 aside .logo h2{
 display: none;
 }
 aside .sidebar h3{
 display: none;
 }
 aside .sidebar a{
 width: 5.6rem;
 }
 aside .sidebar a:last-child{
 position: relative;
 margin-top: 1.8rem;
 }
 main .insights{
 grid-template-columns: 1fr;
 gap: 0;
 }
 main .recent-orders{
 width: 94%;
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 margin: 2rem 0 0 8.8rem;
 }
 main .recent-orders table{
 width: 83vw;
 }
 main table thead tr th:last-child,
 main table thead tr th:first-child{
 display: none;
 }
 main table tbody tr td:last-child,
 main table tbody tr td:first-child{
 display: none;
 }
 }
 @media  screen and (max-width: 768px){
 .container{
 width: 100%;
 grid-template-columns: 1fr;
 }
 aside{
 position: fixed;
 left: -100%;
 background: var(--color-white);
 width: 18rem;
 z-index: 3;
 box-shadow: 1rem 3rem 4rem var(--color-light);
 height: 100vh;
 padding-right: var(--card-padding);
 display: none;
 animation: showMenu 400ms ease forwards;
 }
 @keyframes showMenu{
 to{
 left: 0;
 }
 }
 aside .logo{
 margin-left: 1rem
 }
 aside .logo h2{
 display: inline;
 }
 aside .sidebar h3{
 display: inline;
 }
 aside .sidebar a{
 width: 100%;
 height: 3.4rem;
 }
 aside .sidebar a:last-child{
 position: absolute;
 bottom: 5rem;
 }
 aside .close{
 display: inline-block;
 cursor: pointer;
 }
 main{
 margin-top: 8rem;
 padding: 0 1rem;
 }
 main .recent-orders{
 position: relative;
 margin: 3rem 0 0 0;
 width: 100%;
 }
 main .recent-orders table{
 width: 100%;
 margin: 0;
 }
 .right{
 width: 94%;
 margin: 0 auto 4rem;
 }
 .right .top{
 position: fixed;
 top: 0;
 left: 0;
 align-items: center;
 padding: 0 0.8rem;
 height: 4.6rem;
 background: var(--color-white);
 width: 100%;
 margin: 0;
 z-index: 2;
 box-shadow: 0 1rem 1rem var(--color-light);
 }
 .right .top .theme-toggler{
 width: 4.4rem;
 position: absolute;
 left: 66%;
 }
 .right .profile .info{
 display: none;
 }
 .right .top button{
 display: inline-block;
 background: transparent;
 cursor: pointer;
 color: var(--color-dark);
 position: absolute;
 left: 1rem;
 }
 .right .top button span{
 font-size:2rem;
 }
 }
 */
:root {
  --color-primary: #005b99;
  --color-primary-hover: #004a7f;
  --color-primary-rgb: #005b99;
  --color-scondary: #e2f2fe;
  --color-danger: #ff7782;
  --color-success: #41f1b6;
  --color-warning: #ffbb55;
  --color-white: #fff;
  --color-info-dark: #7b8da1;
  --color-info-light: #dce1eb;
  --color-dark: #003356;
  --color-light: #abdbfd;
  --color-light-hover: #a1d0f7;
  --color-light-blue: #61bfff;
  --color-light-blue-hover: #4ca8ff;
  --color-light-with-opacity: #d0ebff;
  --color-primary-variant: #111e88;
  --color-dark-variant: #677483;
  --color-background: #f5f5f5;
  --very-primary-color: #e2f2fe;
  --card-border-radius: 2rem;
  --border-radius-1: 0.4rem;
  --border-radius-2: 0.8rem;
  --border-radius-3: 1.2rem;
  --card-padding: 1.8rem;
  --padding-1: 1.2rem;
  --box-shadow: 0 2rem 3rem rgba(132, 139, 200, 0.18);
  --menu-bg-color: #005b99;
  --menu-active-color: #61c0ffc0;
  --menu-forground-active-color: white;
  --border-color: #737881;
  --addon-foreground-color: white;
  --background-color: #f5f5f5;
  --color: black;
  --page-title-color: black;
}
html {
  font-size: 14px;
  margin: 0;
}
body {
  margin: 0;
}
.container {
  display: grid;
  width: 100%;
  margin: 0 auto;
  gap: 1.8rem;
  grid-template-columns: 14rem auto 23rem;
}

/*************************************** Override Advanced Search Styles  **********************************************/

.btn-select[_ngcontent-ng-c2030171365] {
  color: white !important;
}

.btn:hover,
.btn:focus,
.btn.focus {
  /* color: white !important; */
}

.btn-default:hover {
  color: black !important;
}

@import "https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap";
/*
 img{
 display: block;
 width: 100%;
 }
 .sidebar-icon{
 color: var(--color-light);
 }
 h1{
 font-weight: 300;
 font-size: 24px;
 }
 .page-title{
 background: var(--color-primary);
 width: fit-content;
 padding: 5px 20px;
 color: var(--color-white);
 border-radius: 10px;
 }
 h2{
 font-size: 1.4rem;
 }
 h3{
 font-size: 1rem;
 color: var(--color-white);
 }
 h4{
 font-size: 0.8rem;
 }
 h5{
 font-size: 0.77rem;
 }
 .primary{
 color: var(--color-primary);
 }
 .danger{
 color: var(--color-danger);
 }
 .success{
 color: var(--color-success);
 }
 .warning{
 color: var(--color-warning);
 }
 aside{
 background: var(--color-primary);
 color: var(--color-white);
 height: auto;
 padding: 20px;
 }
 .btn-primary{
 color: var(--color-white);
 background: var(--color-primary);
 padding: 4px 12px;
 border: none;
 border-radius: 5px;
 font-size: 12px;
 }
 .table-btn{
 color: var(--color-white);
 background: var(--color-primary);
 padding: 1px 20px;
 border: none;
 border-radius: 10px;
 font-size: 12px;
 }
 .rounded-input{
 width: 300px;
 height: 40px;
 border: 2px solid var(--color-primary);
 border-radius: 10px;
 padding: 10px;
 }
 .border-bottom{
 width: 100%;
 border-bottom: 2px solid var(--color-primary);
 padding: 15px;
 }
 .btn-secondary {
 border: none;
 background: var(--color-scondary);
 padding: 3px 12px;
 border-radius: 10px;
 }
 .container-pagination{
 width: 500px;
 }
 .pagination{
 display: flex;
 align-items: center;
 background: #fff;
 color: #383838;
 padding: 5px 10px;
 border-radius: 6px;
 }
 ul{
 margin: 5px 8px;
 }
 ul li{
 display: inline-block;
 margin: 0 5px;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 text-align: center;
 font-size: 16px;
 font-weight: 500;
 line-height: 20px;
 cursor: pointer;
 border: 1px solid black;
 }
 ul li.active{
 color: #fff;
 background: var(--color-primary) ;
 }
 .btn1, .btn2{
 display: inline-flex;
 align-items: center;
 font-size: 16px;
 font-weight: 500;
 color: #383838;
 background: transparent;
 outline: none;
 border: none;
 cursor: pointer;
 }
 .group-logo{
 display: flex;
 width: 100%;
 }
 .border-top{
 border: 1px solid var(--color-dark);
 margin-bottom: 10px;
 display: flex;
 }
 .bg-secondary{
 width: 600px;
 background: var(--color-scondary);
 border-radius: var(--border-radius-1);
 box-shadow: 0px 3px 3px 3px rgba(132, 139, 200, 0.18)
 }
 .bg-secondary h3{
 color: black;
 padding: 10px;
 }
 .btn-close{
 width: 36px;
 height: 36px;
 background: var(--color-primary);
 color: var(--color-white);
 border: none;
 border-radius: 5px;
 }
 .form-control{
 width: 300px;
 height: 40px;
 border: 2px solid var(--color-primary);
 border-radius: 10px;
 border-left: none;
 border-top-left-radius:0;
 border-bottom-left-radius:0;
 padding: 10px;
 float: right;
 }
 .input-group-addon{
 background: var(--color-primary);
 color: var(--color-white);
 padding: 7px;
 border-radius: 10px;
 border-top-right-radius:0;
 border-bottom-right-radius:0;
 float: right;
 }
 aside .logo{
 display: flex;
 gap: 0.8rem;
 }
 aside .logo img{
 width: 2rem;
 height: 2rem;
 }
 aside .sidebar{
 display: flex;
 flex-direction: column;
 height: 86vh;
 position: relative;
 top: 3rem;
 width: 194px;
 }
 aside h3{
 font-weight: 500;
 }
 aside .sidebar a{
 display: flex;
 color: var(--color-light);
 margin-left: 2rem;
 gap: 1rem;
 align-items: center;
 position: relative;
 height: 3rem;
 transition: all 300ms ease;
 }
 aside .sidebar a span{
 font-size: 1.6rem;
 transition: all 300ms ease;
 }
 aside .sidebar a.active{
 background: var(--color-light);
 color: var(--color-primary);
 margin-right: -1.3rem;
 width: 100%;
 }
 aside .sidebar a.active::before{
 content: "";
 width: 6px;
 height: 100%;
 background: var(--color-dark);
 }
 aside .sidebar a.active span{
 color: var(--color-primary);
 margin-left: calc(1rem - 3px);
 }
 aside .sidebar a:hover{
 color: var(--color-primary);
 }
 aside .sidebar .message-count{
 background: var(--color-danger);
 color: white;
 padding: 2px 10px;
 font-size: 11px;
 border-radius: var(--border-radius-1);
 }
 main{
 margin-top: 1.4rem;
 }
 main .insights{
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 1.6rem;
 }
 main .insights > div{
 background: var(--color-white);
 padding: var(--card-padding);
 border-radius: var(--card-border-radius);
 margin-top: 1rem;
 box-shadow: var(--box-shadow);
 transition: all 300ms ease;
 width: fit-content;
 }
 main .insights > div:hover{
 box-shadow: none;
 }
 main .insights > div.expenses i{
 background: var(--color-danger);
 }
 main .insights > div.income i{
 background: var(--color-success);
 }
 main .insights > div .middle{
 display: flex;
 align-items: center;
 justify-content: space-between;
 }
 main .insights h3{
 margin: 1rem 0 0.6rem;
 font-size: 1rem;
 }
 main .recent-orders{
 margin-top: 2rem;
 }
 main .recent-orders h2{
 margin-bottom: 0.8rem;
 }
 main table{
 background: var(--color-scondary);
 width: 100%;
 border-radius: 10px;
 padding: var(--card-padding);
 text-align: right;
 transition: all 300ms ease;
 }
 main .recent-orders table:hover{
 box-shadow: none;
 }
 main table tbody td{
 height: 2.8rem;
 border-bottom: 1px solid var(--color-light);
 color: var(--color-dark-variant);
 }
 main table tbody tr:last-child td{
 border: none;
 }
 main .recent-orders a{
 text-align: center;
 display: block;
 margin: 1rem auto;
 color: var(--color-primary);
 }
 main table thead tr th{
 text-align: right;
 }
 @media screen and  (max-width: 1200px){
 .container{
 width: 94%;
 grid-template-columns: 7rem auto 23rem;
 }
 aside .logo h2{
 display: none;
 }
 aside .sidebar h3{
 display: none;
 }
 aside .sidebar a{
 width: 5.6rem;
 }
 aside .sidebar a:last-child{
 position: relative;
 margin-top: 1.8rem;
 }
 main .insights{
 grid-template-columns: 1fr;
 gap: 0;
 }
 main .recent-orders{
 width: 94%;
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 margin: 2rem 0 0 8.8rem;
 }
 main .recent-orders table{
 width: 83vw;
 }
 main table thead tr th:last-child,
 main table thead tr th:first-child{
 display: none;
 }
 main table tbody tr td:last-child,
 main table tbody tr td:first-child{
 display: none;
 }
 }
 @media  screen and (max-width: 768px){
 .container{
 width: 100%;
 grid-template-columns: 1fr;
 }
 aside{
 position: fixed;
 left: -100%;
 background: var(--color-white);
 width: 18rem;
 z-index: 3;
 box-shadow: 1rem 3rem 4rem var(--color-light);
 height: 100vh;
 padding-right: var(--card-padding);
 display: none;
 animation: showMenu 400ms ease forwards;
 }
 @keyframes showMenu{
 to{
 left: 0;
 }
 }
 aside .logo{
 margin-left: 1rem
 }
 aside .logo h2{
 display: inline;
 }
 aside .sidebar h3{
 display: inline;
 }
 aside .sidebar a{
 width: 100%;
 height: 3.4rem;
 }
 aside .sidebar a:last-child{
 position: absolute;
 bottom: 5rem;
 }
 aside .close{
 display: inline-block;
 cursor: pointer;
 }
 main{
 margin-top: 8rem;
 padding: 0 1rem;
 }
 main .recent-orders{
 position: relative;
 margin: 3rem 0 0 0;
 width: 100%;
 }
 main .recent-orders table{
 width: 100%;
 margin: 0;
 }
 .right{
 width: 94%;
 margin: 0 auto 4rem;
 }
 .right .top{
 position: fixed;
 top: 0;
 left: 0;
 align-items: center;
 padding: 0 0.8rem;
 height: 4.6rem;
 background: var(--color-white);
 width: 100%;
 margin: 0;
 z-index: 2;
 box-shadow: 0 1rem 1rem var(--color-light);
 }
 .right .top .theme-toggler{
 width: 4.4rem;
 position: absolute;
 left: 66%;
 }
 .right .profile .info{
 display: none;
 }
 .right .top button{
 display: inline-block;
 background: transparent;
 cursor: pointer;
 color: var(--color-dark);
 position: absolute;
 left: 1rem;
 }
 .right .top button span{
 font-size:2rem;
 }
 }
 */
:root {
  --color-primary: #005b99;
  --color-primary-hover: #004a7f;
  --color-primary-rgb: #005b99;
  --color-scondary: #e2f2fe;
  --color-danger: #ff7782;
  --color-success: #41f1b6;
  --color-warning: #ffbb55;
  --color-white: #fff;
  --color-info-dark: #7b8da1;
  --color-info-light: #dce1eb;
  --color-dark: #003356;
  --color-light: #abdbfd;
  --color-light-hover: #a1d0f7;
  --color-light-blue: #61bfff;
  --color-light-blue-hover: #4ca8ff;
  --color-light-with-opacity: #d0ebff;
  --color-primary-variant: #111e88;
  --color-dark-variant: #677483;
  --color-background: #f5f5f5;
  --very-primary-color: #e2f2fe;
  --card-border-radius: 2rem;
  --border-radius-1: 0.4rem;
  --border-radius-2: 0.8rem;
  --border-radius-3: 1.2rem;
  --card-padding: 1.8rem;
  --padding-1: 1.2rem;
  --box-shadow: 0 2rem 3rem rgba(132, 139, 200, 0.18);
  --menu-bg-color: #005b99;
  --menu-active-color: #61c0ffc0;
  --menu-forground-active-color: white;
  --border-color: #005b99;
  --addon-foreground-color: white;
  --background-color: #f5f5f5;
  --color: black;
  --page-title-color: black;
}
html {
  font-size: 14px;
  margin: 0;
}
body {
  margin: 0;
}
.container {
  display: grid;
  width: 100%;
  margin: 0 auto;
  gap: 1.8rem;
  grid-template-columns: 14rem auto 23rem;
}

/*************************************** Override Advanced Search Styles  **********************************************/

.btn-select[_ngcontent-ng-c2030171365] {
  color: white !important;
}

.btn:hover,
.btn:focus,
.btn.focus {
  color: white !important;
}

.btn-default:hover {
  color: black !important;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: #005b99;
}