/* Reset Style */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Global Style */
:root {
  --mainColor: #2c3333;
  --seconderyColor: #0e5fd8;
  --green: #4ec85f;
  --white: #fff;
}
body {
  min-height: 100vh;
  background-color: #ececec;
  font-family: "Cairo", sans-serif;
}
img {
  max-width: 100%;
  height: auto;
}
.accordion-button:not(.collapsed)::after,
.accordion-button::after {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  background-image: none;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
.form-control {
  box-shadow: none !important;
}
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: var(--seconderyColor);
}
::-webkit-scrollbar-track {
  background-color: var(--mainColor);
}
.dropdown-toggle::after {
  display: none;
}
/* Start Sidebar */
section.sidebar {
  padding: 10px;
  background-color: var(--mainColor);
  width: 350px;
  height: 100%;
  position: fixed;
  left: -350px;
  top: 0;
  transition: left 0.3s linear;
  z-index: 10;
}
section.sidebar .toggle-icon {
  position: absolute;
  right: -36px;
  top: 10px;
  cursor: pointer;
  background-color: var(--mainColor);
  color: var(--white);
  padding: 10px;
  border-radius: 0px 5px 5px 0px;
}
.accordion-button:not(.collapsed)::after {
  content: "\f107";
}
.accordion-button::after {
  content: "\f107";
}
section.sidebar.show {
  left: 0;
}
section.sidebar img {
  max-width: 60px;
  display: block;
  margin: auto;
}
section.sidebar .accordion {
  height: 85%;
  overflow-y: scroll;
}
section.sidebar .accordion .accordion-item {
  background-color: transparent;
  color: var(--white);
  border-color: transparent;
}
section.sidebar .accordion .accordion-item .accordion-header button {
  font-size: 20px;
  color: var(--white);
  box-shadow: none;
  background-color: transparent;
}
section.sidebar .accordion ul {
  padding-left: 15px;
}
section.sidebar .accordion ul li {
  cursor: pointer;
  transition: all 0.3s linear;
  padding: 10px;
  border-radius: 5px;
}
section.sidebar .accordion ul li:hover {
  background-color: var(--seconderyColor);
  color: var(--white);
  padding-left: 20px;
}
section.sidebar .accordion ul li.active {
  background-color: var(--seconderyColor);
  color: var(--white);
}
section.sidebar .accordion ul li .icon {
  margin-right: 10px;
}
section.sidebar .accordion ul li:not(:last-child) {
  margin-bottom: 10px;
}
/* Start Content Section */
section.content {
  min-height: 100vh;
  padding: 20px 0;
  transition: padding 0.3s linear;
  position: relative;
}
section.content .content-wrapper {
  display: flex;
  align-items: flex-start;
  background-color: var(--white);
}
section.content .content-wrapper ul.content-menu {
  position: relative;
  height: 100vh;
  list-style: none;
  margin: 0;
  padding: 10px;
  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
  flex-grow: 2;
  direction: rtl;
  text-align: right;
}
section.content .content-wrapper ul.content-menu li {
  opacity: 0;
  transform: translateX(-50px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
  width: 95%;
  top: 0;
}
section.content
  .content-wrapper
  ul.content-menu
  li.privacy
  .privacy-data
  .form-check,
section.content
  .content-wrapper
  ul.content-menu
  li.specifying
  .specifying-data
  .form-check {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 30px;
}
section.content .content-wrapper ul.content-menu li.show {
  transition-delay: 0.3s;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
}
section.content .content-wrapper ul.content-menu li .main-title {
  font-weight: 600;
  font-size: 30px;
  color: var(--seconderyColor);
  margin-bottom: 10px;
}
section.content .content-wrapper ul.content-menu li .title {
  font-weight: 600;
  font-size: 20px;
  color: var(--mainColor);
  margin-bottom: 10px;
}
section.content .content-wrapper ul.content-menu li.specifying span {
  padding: 1px 2px;
  font-size: 14px;
}
section.content .content-wrapper ul.content-menu form input {
  box-shadow: none;
}
section.content
  .content-wrapper
  ul.content-menu
  form
  .form-check:not(:last-child) {
  margin-bottom: 10px;
}
section.content .content-wrapper ul.content-menu form input:checked {
  background-color: var(--green);
  border-color: var(--green);
}
/* Start Publish  */
section.content
  .content-wrapper
  ul.content-menu
  .publish
  form.publish-data
  .templates
  .templates-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
section.content
  .content-wrapper
  ul.content-menu
  .publish
  form.publish-data
  .templates
  .templates-wrapper
  .form-floating {
  flex-grow: 0.6;
}

section.content
  .content-wrapper
  ul.content-menu
  .publish
  form.publish-data
  .templates
  .templates-wrapper
  .create-template
  .fetch-templates
  .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--mainColor);
  padding-bottom: 10px;
}
section.content
  .content-wrapper
  ul.content-menu
  .publish
  form.publish-data
  .templates
  .templates-wrapper
  .create-template
  .fetch-templates
  .item
  div.close-icon {
  cursor: pointer;
}
section.content
  .content-wrapper
  ul.content-menu
  .publish
  form.publish-data
  .contacts
  .contacts-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}
section.content
  .content-wrapper
  ul.content-menu
  .publish
  form.publish-data
  .contacts
  .contacts-wrapper
  .form-check {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 30px;
}
section.content
  .content-wrapper
  ul.content-menu
  .publish
  form.publish-data
  .contacts
  .timing
  span.time {
  border-bottom: 1px solid var(--seconderyColor);
  color: var(--seconderyColor);
}
/* Start Dashboard */
section.content .content-wrapper .content-menu .dashboard h2 {
  text-align: right;
  direction: rtl;
  color: var(--mainColor);
}
section.content .content-wrapper .content-menu .dashboard .cards .card {
  padding: 7px;
  border-color: transparent;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  text-align: center;
}
section.content .content-wrapper .content-menu .dashboard .cards .card.read {
  background: var(--green);
}
section.content .content-wrapper .content-menu .dashboard .cards .card h6 {
  font-size: 20px;
}
section.content .content-wrapper .content-menu .dashboard .charts .pie-chart {
  width: 350px;
  margin: auto;
}
/* Start Schedule */
section.content
  .content-wrapper
  .content-menu
  .schedule-message
  .message
  .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--mainColor);
  padding-bottom: 10px;
}
section.content
  .content-wrapper
  .content-menu
  .schedule-message
  .message
  .item
  .actions {
  display: flex;
  align-items: center;
}
/* Start Whatsapp Section */
section.content .content-wrapper .whatsapp-template {
  flex-grow: 0.4;
  background: #cbcbcb;
  padding: 10px;
  height: 100vh;
}
section.content .content-wrapper .whatsapp-template .heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
section.content .content-wrapper .whatsapp-template .heading .btns {
  display: flex;
  align-items: center;
}
section.content
  .content-wrapper
  .whatsapp-template
  .heading
  .btns
  .dropdown
  .dropdown-menu {
  width: 180px;
}
section.content
  .content-wrapper
  .whatsapp-template
  .heading
  .btns
  .dropdown
  .dropdown-menu
  .dropdown-toggle {
  border: none !important;
  outline: none;
}
section.content
  .content-wrapper
  .whatsapp-template
  .heading
  .btns
  .dropdown
  ul
  li {
  text-align: right;
  direction: rtl;
}
section.content .content-wrapper .whatsapp-template .heading img {
  border-radius: 50%;
  width: 90px;
  height: 90px;
  object-fit: cover;
}
section.content .content-wrapper .whatsapp-template .whats-search {
  direction: rtl;
}
section.content .content-wrapper .whatsapp-template .whats-search .input-group {
  position: relative;
}
section.content
  .content-wrapper
  .whatsapp-template
  .whats-search
  .input-group
  .search-icon {
  position: absolute;
  left: 10px;
  top: 3px;
  color: var(--mainColor);
  z-index: 10;
}
section.content .content-wrapper .whatsapp-template .whats-body {
  overflow-y: scroll;
  height: 70vh;
  background-color: var(--white);
}
section.content .content-wrapper .whatsapp-template .whats-body .user {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: space-between;
  border-bottom: 1px solid #2c33334d;
  padding: 10px;
  cursor: pointer;
  transition: background 0.3s linear;
}
section.content .content-wrapper .whatsapp-template .whats-body .user:hover {
  background-color: #2c33334d;
}
section.content
  .content-wrapper
  .whatsapp-template
  .whats-body
  .user
  .user-info {
  display: flex;
  flex-direction: row-reverse;
}
section.content
  .content-wrapper
  .whatsapp-template
  .whats-body
  .user
  .user-info
  img {
  width: 60px;
  border-radius: 50%;
  object-fit: cover;
  height: 60px;
  margin-left: 10px;
}
section.content
  .content-wrapper
  .whatsapp-template
  .whats-body
  .user
  .user-info
  .info {
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: start;
}

/* Start Footer */
footer {
  position: absolute;
  bottom: 0;
  background-color: var(--mainColor);
  color: var(--white);
  /* width: 100%; */
}

/* Modal */
.modal .modal-body .template-types .radios {
  display: flex;
  align-items: baseline;
  justify-content: space-evenly;
}
.modal .modal-body .template-types .radios .form-check-input:checked {
  background-color: var(--green);
  border-color: var(--green);
}
.modal .modal-body .radio-content .form-floating > .form-control {
  height: calc(3.5rem + 50px);
}
.modal .modal-body .radio-content ul li {
  display: none;
}
.modal .modal-body .radio-content ul li:first-child {
  display: block;
}
.modal form input[type="checkbox"] {
  margin-left: 10px;
  box-shadow: none;
}
.modal form input[type="checkbox"]:checked {
  background-color: var(--green);
  border-color: var(--green);
}