.border {
  border: 1px solid #999;
}
.side-menu {
  background-color: #f0f0f0;
  padding: 0!important;

}
.side-menu ul {
  padding: 0;
  list-style: none;

}
.side-menu ul li{
  padding:15px 20px;
  display: flex;
  align-items: center;
  height: 60px;
  border-bottom: 1px solid #ccc;


}
.side-menu ul li.meta-data-item small {
  display: block;
  color:#666;
  font-size: 12px;

}
.side-menu ul li.meta-data-item span {
  font-size:17px;
}
.side-menu ul li.meta-data-item img {
  width: 40px;
  margin-top: 10px;
}
.side-menu ul li.active {
  background-color: #fff;

  font-weight:600;

}
.side-menu ul li.active span {
  color: #ed1c24 !important;
}
.en .side-menu ul li.active {
  border-left: 2px solid #ed1c24;

}
.ar .side-menu ul li.active {
  border-right: 2px solid #ed1c24;
}
.side-menu ul li span {
padding: 5px 10px;
  color:#000;
  display: inline-block;
}
.side-menu ul li a {
  display: block;
  width: 100%;
}
.side-menu ul li img {
   width: 20px;
}
.side-menu ul li .active-icon {
  display: none;
}
.side-menu ul li.active .active-icon {
  display: inline-block;
}
.side-menu ul li.active .grey-icon {
  display: none;
}
.main-container {
  padding:10px 30px;
}
@media (max-width: 600px) {
  .main-container {
    padding:5px 5px;
  }
}
.main-container .main-container-body {
  border: 1px solid #f0f0f0;
  min-height: 400px;
  padding-bottom: 15px;
}
.en .main-container header  .dropdown-menu {
  left: auto !important;
  right: 5px;

}

.ar .main-container header .dropdown-menu {
  right: auto !important;
  left: 5px !important;

}
.main-container  header .dropdown-menu {
  width: 280px;
  padding: 10px;
  color:#000;
}

.notification-drop-down li {
  padding:5px;
  font-size: 13px;
}
.notification-drop-down li small {
  color:#666;
}
.notification-drop-down li.active {
  background-color: rgba(237,28,36,0.2);
}
.main-container .main-container-body .sub-header {
  background: #f0f0f0;
  padding:10px;
}
.main-container .main-container-body .sub-header h3 {
  margin-top: 5px !important;
}
.main-container .notification-icon-container {
  padding-top: 20px;
}
.main-container .notification-icon-container img {
  width: 30px;
  cursor: pointer;
}
.notification-drop-down:before {
  position: absolute;
  top: -7px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}
.en .notification-drop-down:before  {
  right: 9px;
}
.en .notification-drop-down:after {
  right: 10px;
}
.ar .notification-drop-down:before  {
  right: auto;
  left: 9px
}
.ar .notification-drop-down:after {
  right: auto;
  left: 10px;
}
.notification-drop-down:after {
  position: absolute;
  top: -6px;

  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';
}
.en .side-seprator {
  border-left: 1px solid #f0f0f0
}
.ar .side-seprator {
  border-right: 1px solid #f0f0f0
}
.main-container .red-text {
  color:#ed1c24;
}
.main-container .grey-text {
  color:#989898
}
 .light-grey-text{
  opacity: 0.7;
}
.title-with-seprator {
  border-bottom: 1px solid #ccc;
  margin: 5px 10px;
  margin-bottom: 10px;
}
.line-seprator {
  width: 90%;
  margin: 21px auto;
  height: 1px;
  background-color:#f0f0f0;
}
.blcok {
  display: block;
}
.modal .modal-content .modal-header .close {
  background: #fff !important;
  color:#ed1c24;
  margin: 5px;
}
.subscription-section {
  background-color:#f0f0f0;
  padding: 20px;
  margin: 10px;
}
.subscription-section .tarrif-box {
  border: 1px dashed #eee;
  background:#fff;
  padding: 10px;

}
.en .tarrif-box-container {
  margin-top: 10px;
}
.ar .tarrif-title  {
  float: right;
  padding-top: 10px;
  font-size: 14px;
}

.tarrif-title  {
  float: left;
  padding-top: 10px;
  font-size: 14px;
}
.ar .addon-group{
  float: right !important;
  padding-top: 10px;
  font-size: 17px;
}

.en .tarrif-control {
  float: right;
  padding: 0 10px;
}
.en .tarrif-control img {
  display: block;
  margin: 10px auto;
  width: 20px;
}
.en .tarrif-control {
  border-left: 1px solid #eee;
}

.ar .tarrif-control {
  float: left;
  padding: 0 10px;
}
.ar .tarrif-control img {
  display: block;
  margin: 10px auto;
  width: 20px;
}
.ar .tarrif-control {
  border-right: 1px solid #eee;
}

.subscriptions-tab-container {
  border: 1px solid #ccc;

}
.subscriptions-tab-container .tab-control {
  padding:20px;
  border-top:1px solid #ccc;
  border-bottom:1px solid #ccc;

}
.subscriptions-tab-container .tab-control.active {
    background-color: #fff;
}
.en .subscriptions-tab-container .tab-control.active {
    border-left: 2px solid #ed1c24;
}
.ar .subscriptions-tab-container .tab-control.active {
    border-right: 2px solid  #ed1c24;
}
.no-padd {
  padding: 0;
}
.tab-content-container {
  background-color: #fff;
  min-height: 578px;
  padding: 20px;
}
.tab-details-item {
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
}
.compare-tarrif-details {
  margin-top: 15px;
}

.en .rotate90{
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.ar .rotate90{
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.en .rotate270{
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

.ar .rotate270{
  -webkit-transform: rotate(-270deg);
  -moz-transform: rotate(-270deg);
  -ms-transform: rotate(-270deg);
  -o-transform: rotate(-270deg);
  transform: rotate(-270deg);
}

.en .subscription-inner-box-close-text{
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
}

.ar .subscription-inner-box-close-text{
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 0;
}

.en .all-acc-nums{
  text-align: right;
}

.ar .all-acc-nums{
  text-align: left;
}

@media (max-width: 600px) {
  .all-acc-nums {
    text-align: center !important;
  }
}

.search-input{
  background-size: 19px;
  background-repeat: no-repeat;
}

.ar .main-container .search-input{
  background-position: left 7px bottom 7px;
}

.en .main-container .search-input{
  background-position: right 7px bottom 7px;
}

@media (min-width: 600px) {
  .account-info-side {
    height: 85px;
  }
}

@media (min-width: 600px) {
  .stick-to-bottom{
    position: absolute;
    bottom: 0;
  }
}
.ar .qr{

}

.section-header-sub-title{
  font-size: 15px;
}

.vertically-center {
  margin-bottom: 20%;
}

.align-text-left{
  text-align: left;
}

.align-text-right{
  text-align: right;
}

.align-text-center{
  text-align: center;
}

.flex{
display: flex;
}
.align-center {
align-items: center;
}
.align-start {
  align-items: flex-start;
  }
.content-between{
justify-content: space-between;
}
.content-around{
  justify-content: space-around;
  }
.content-end{
  justify-content: flex-end;
}
.content-center{
  justify-content: center !important;
}

.flex-column{
  flex-direction: column;
}

.flex-1{
  flex: 1;
}
.gap-1 {
  gap: 1rem;
}

.gap-2 {
  gap: 2rem;
}

.currency-ar{
  padding: 0 5px;
}

.align-modal-to-right>.ngdialog-content{
  width: 500px;
  position: fixed !important;
  right: 0;
  bottom: 0;
  top: 0;
}

.align-modal-to-right:has(.ngdialog-content) {
  z-index: 1030;
}

.nojoom-terms-and-condition-dialog {
  z-index: 1031;
}

.one-digit-otp input {
  height: 58px;
  width: 58px !important;
  min-width: 0px;
  margin: 0px 5px;
  text-align: center;
  display: inline-block;
}

.thumbsup-img{
  content:url('../img/nojoomBusiness/thumbsConfetti.svg');
  height: 200px;
}

.align-modal-to-highlight:has(.ngdialog-content) {
  z-index: 1030;
}

.custom-toast {
  background-color: #ffffff !important;
  color: #000000 !important;
}
.custom-toast .toast-close-button {
  color: #a6a9ad !important;
}