@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900");
@import url(../css/fn-icon/style.css);
@import url(../css/bootstrap.min.css);
@import url(../css/animate.css);
@import url(../font-awesome/css/font-awesome.min.css);
@import url(../css/sweetalert.css);
@import url(../css/toastr.css);
@import url(../css/preloader.css);
@import url("https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css");
@import url("https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700,800,900&display=swap");
img {
  width: 100%;
}

@font-face {
  font-family: "Open Sans", sans-serif;
  src: url("../fonts/open-sans/OpenSans-bold.ttf"), url("../fonts/open-sans/OpenSans-BoldItalic.ttf"), url("../fonts/open-sans/OpenSans-ExtraBoldItalic.ttf"), url("../fonts/open-sans/OpenSans-Italic.ttf"), url("../fonts/open-sans/OpenSans-Light.ttf"), url("../fonts/open-sans/OpenSans-LightItalic.ttf"), url("../fonts/open-sans/OpenSans-Regular.ttf"), url("../fonts/open-sans/OpenSans-Semibold.ttf"), url("../fonts/open-sans/OpenSans-SemiboldItalic.ttf");
}
body {
  font-family: "Nunito", sans-serif;
  padding: 0;
  margin: 0 auto;
}

.header_fixed,
.system__header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background: white;
  z-index: 2;
}

.logo {
  height: 55px;
}
@media screen and (max-width: 768px) {
  .logo {
    height: 65px;
  }
}
.logo img {
  height: 78px;
  object-fit: contain;
}

.hidden {
  display: none;
}

.side__menu__toggle {
  justify-content: flex-start;
  position: absolute;
  z-index: 2;
  top: 0;
  right: -80px;
  background: white;
}
.side__menu__toggle ul {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  width: 100%;
  padding: 10px;
}
.side__menu__toggle ul li {
  width: 100%;
}
.side__menu__toggle .toggle__button {
  height: 35px;
  width: 45px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.side__menu__toggle .toggle__button .user__button {
  position: relative;
  width: 40px;
  height: 1px;
  background-color: black;
  margin: 15px 0;
  transition: 200ms ease-in-out all;
}
.side__menu__toggle .toggle__button .user__button:after {
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 1px;
  width: 100%;
  background-color: black;
  content: "";
  transition: 200ms ease-in-out all;
}
.side__menu__toggle .toggle__button .user__button:before {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 1px;
  width: 100%;
  background-color: black;
  content: "";
  transition: 200ms ease-in-out all;
}
.side__menu__toggle .toggle__button .show_menu {
  background-color: white;
}
.side__menu__toggle .toggle__button .show_menu:before {
  transform: rotate(45deg);
  top: 0;
}
.side__menu__toggle .toggle__button .show_menu:after {
  transform: rotate(-45deg);
  top: 0;
}

.top__header {
  padding: 0 0 0 260px;
  transition: 300ms ease-in-out all;
  box-shadow: 0 1px 42px 0 #d2d5d8, 0 1px 57px 0 #dcddde;
  display: flex;
  vertical-align: middle;
}
@media screen and (max-width: 767px) {
  .top__header {
    padding-left: 60px;
  }
}
.top__header .top__items {
  justify-content: flex-end;
  position: relative;
  width: 100%;
  display: flex;
  text-align: right;
}
.top__header .top__items ul {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  background: white;
  padding: 10px;
  display: flex;
  width: 100%;
}
.top__header .top__items ul li {
  width: 100%;
}
.top__header .top__items ul li .counter {
  position: relative;
}
.top__header .top__items ul li .counter span {
  position: absolute;
  right: -10px;
  top: -3px;
  z-index: 2;
  font-size: 13px;
  background: red;
  padding: 0 3px;
  line-height: 14px;
  border-radius: 50%;
  color: white;
}
.top__header .top__items ul li .user__image img {
  width: 50px;
}
.top__header .top__items ul li ul {
  padding-left: 0;
  display: flex;
  list-style: none;
  width: 100%;
  justify-content: flex-end;
}
.top__header .top__items ul li ul li {
  position: relative;
  display: inline-flex;
  width: auto;
  min-width: 10%;
}
.top__header .top__items ul li ul li .notification__list {
  text-align: left;
  position: absolute;
  right: 15px;
  z-index: 2;
  top: 45px;
  width: 250px;
  height: auto;
  box-shadow: 0 1px 3px 0 #007bff, 0 1px 2px 0 #007bff;
  visibility: hidden;
  animation: zoomOut 100ms;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.top__header .top__items ul li ul li .active__notification {
  visibility: visible;
  animation: zoomIn 100ms;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.top__header .top__items ul li ul li ul {
  display: block;
}
.top__header .top__items ul li ul li ul li {
  display: block;
}
.top__header .top__items ul li ul .notification__icon {
  position: relative;
}
.top__header .top__items .auth__setting {
  animation-name: rotateInDownRight;
  animation-duration: 300ms;
  text-align: left;
  position: absolute;
  right: 0px;
  z-index: 2;
  top: 55px;
  width: 250px;
  height: auto;
  display: none;
  box-shadow: 0 4px 3px 0 #b6c7d8, 0 1px 2px 0 #007bff;
  padding: 7px 15px;
  background: white;
}
.top__header .top__items .auth__setting ul {
  display: block;
}
.top__header .top__items .auth__setting ul li {
  display: block;
}
.top__header .top__items .auth__setting ul li a {
  text-decoration: none;
}
.top__header .top__items .auth__button {
  height: 35px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  vertical-align: middle;
  align-items: center;
}
.top__header .top__items .auth__button img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  margin: 0px 5px;
}
@media screen and (max-width: 767px) {
  .top__header .top__items .auth__button .auth__user {
    display: none;
  }
}
.top__header .top__items .auth__button .show_menu {
  background-color: white;
}
.top__header .top__items .auth__button .show_menu:before {
  transform: rotate(45deg);
  top: 0;
}
.top__header .top__items .auth__button .show_menu:after {
  transform: rotate(-45deg);
  top: 0;
}

.flexbox {
  display: inline-flex;
}

.side__tree {
  position: fixed;
  content: "";
  top: 0;
  z-index: 2;
  background: #007bff;
  background: #33475d;
  width: 250px;
  height: 100vh;
  min-height: 1200px;
  transition: 300ms ease-in-out all;
  box-shadow: 0 1px 3px 0 #007bff, 0 1px 2px 0 #007bff;
}
.side__tree::-webkit-scrollbar {
  width: 8px;
}
.side__tree::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
.side__tree::-webkit-scrollbar-thumb {
  background: white;
  border-radius: 10px;
}
.side__tree::-webkit-scrollbar-thumb:hover {
  background: #1b75bb;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .side__tree {
    height: 100%;
  }
}
.side__tree .dashboad_icon {
  padding: 5px 15px;
  background-color: #1b75bb;
}
.side__tree .dashboad_icon h2 {
  font-size: 16px;
  color: white;
  margin: 0;
}
.side__tree .collapse.in {
  display: block;
}
.side__tree .collapse:not(.show) {
  display: block;
}
.side__tree .menu__wrapper {
  background: #060606ba;
}
.side__tree ul.menu__list {
  padding: 0;
  overflow: hidden;
  overflow-y: scroll;
  height: 100vh;
  padding-bottom: 100px;
}
.side__tree ul.menu__list::-webkit-scrollbar {
  width: 5px;
}
.side__tree ul.menu__list::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
.side__tree ul.menu__list::-webkit-scrollbar-thumb {
  background: #33475d;
  border-radius: 5px;
}
.side__tree ul.menu__list::-webkit-scrollbar-thumb:hover {
  background: #1b75bb;
  cursor: pointer;
}
.side__tree ul.menu__list li {
  position: relative;
  list-style: none;
}
.side__tree ul.menu__list li a {
  color: white;
  padding: 11px 15px;
  text-decoration: none;
  position: relative;
  display: block;
  font-size: 14px;
}
.side__tree ul.menu__list li a:hover {
  background-color: #ffc107;
  transition: 200ms ease-in-out all;
  color: black;
}
.side__tree ul.menu__list li .nav__level__one {
  padding-left: 0px;
  font-size: 15px;
}
.side__tree ul.menu__list li .nav__level__one li a {
  padding: 7px 10px 7px 45px;
}
.side__tree ul.menu__list li .nav__level__one li .nav__level__two {
  padding-left: 0;
  font-size: 14px;
}
.side__tree ul.menu__list li .nav__level__one li .nav__level__two li a {
  padding: 7px 10px 7px 70px;
}
.side__tree ul.menu__list li .nav__level__one li .nav__level__two li .nav__third__level {
  padding-left: 0;
  font-size: 13px;
}
.side__tree ul.menu__list li .nav__level__one li .nav__level__two li .nav__third__level li a {
  padding: 7px 10px 7px 100px;
}

.text__white {
  color: white;
}

.box__counter {
  box-shadow: 0px 1px 20px #d6c3c3a8;
  padding: 5px 15px;
  border-radius: 5px;
  height: 100%;
}
.box__counter:hover {
  color: white;
  background-color: blue;
  box-shadow: 0px 1px 20px blue;
}
.box__counter:hover::after {
  opacity: 1;
  animation: slideInLeft 200ms ease-in-out;
  animation-iteration-count: 1;
}
.box__counter:hover a {
  color: white;
}
.box__counter .flex__box {
  display: flex;
}
.box__counter .flex__box .flex__item {
  width: 100%;
}
.box__counter .flex__box .flex__item h3 {
  font-size: 25px;
  margin-bottom: 0;
}
.box__counter .flex__box .flex__item h2 {
  font-size: 14px;
  color: #e448a5;
}
.box__counter .flex__box .flex__item .counter__icon {
  font-size: 40px;
}
.box__counter .flex__box .flex__item:last-child {
  justify-content: flex-end;
  text-align: right;
}
.box__counter a {
  text-decoration: none;
}

.tab__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
}
.tab__list li {
  margin-right: 5px;
}

.position_n_100 {
  transition: 0 ease-in-out all;
  width: 60px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .position_n_100 {
    transition: 300ms ease-in-out all;
  }
}
.position_n_100 span.nav-label,
.position_n_100 .arrow {
  display: none;
  transition: 300ms ease-in-out all;
}
.position_n_100 .menu__list {
  background: #33475d;
}
.position_n_100 .menu__list li .nav__level__one {
  padding-left: 0px;
  font-size: 15px;
}
.position_n_100 .menu__list li.mm-active:focus > a,
.position_n_100 .menu__list li.mm-active:active > a,
.position_n_100 .menu__list li.mm-active:hover > a {
  display: block;
  overflow: visible;
  width: 260px;
  color: white;
}
.position_n_100 .menu__list li.mm-active:focus > a .nav-label,
.position_n_100 .menu__list li.mm-active:active > a .nav-label,
.position_n_100 .menu__list li.mm-active:hover > a .nav-label {
  display: inline-block;
}
.position_n_100 .menu__list li.mm-active {
  background: #33475d;
  width: 260px;
}
.position_n_100 .menu__list li.mm-active a {
  display: block;
  overflow: visible;
  width: 260px;
  color: white;
}
.position_n_100 .menu__list li.mm-active .nav-label {
  display: inline-block;
}

.padding_zero {
  padding-left: 70px !important;
  transition: 300ms ease-in-out all;
}

.scroltop {
  background-color: #007bff;
  position: fixed;
  right: 15px;
  bottom: 50px;
  z-index: 99;
  border-radius: 50%;
  animation-name: pulse;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  display: none;
  padding: 5px 10px;
  border: 1px solid #007bff;
}
.scroltop span {
  color: white;
  font-size: 25px;
}

.scroltop:focus {
  box-shadow: none;
  outline: none;
}

.radio__button {
  display: flex;
  vertical-align: middle;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
}
@media screen and (max-width: 575px) {
  .radio__button {
    display: block;
  }
}
.radio__button label {
  position: relative;
  display: block;
  padding-left: 35px;
  margin-bottom: 12px;
  padding-right: 40px;
}
.radio__button label .radiobutton {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  cursor: pointer;
}
.radio__button label .radiobutton:after {
  content: "";
  position: absolute;
  opacity: 0;
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
.radio__button label .success__radio {
  background-color: #ec2129;
}
.radio__button label .warning__radio {
  background-color: #EFB311;
}
.radio__button label input {
  position: absolute;
  opacity: 0;
  padding-right: 20px !important;
  margin: 0 20px;
}
.radio__button label input:checked ~ .radiobutton {
  background-color: #007bff;
  box-shadow: 0px 0px 7px #5a4546;
  transition: 300ms ease-in-out all;
}
.radio__button label input:checked ~ .radiobutton::after {
  opacity: 1;
  transition: 300ms ease-in-out all;
}

.admin__wrapper {
  padding: 80px 20px 20px 260px;
  transition: 300ms ease-in-out all;
  min-height: 100vh;
}
@media screen and (max-width: 1150px) {
  .admin__wrapper {
    overflow: scroll;
  }
}
@media screen and (max-width: 767px) {
  .admin__wrapper {
    padding-left: 60px;
  }
}
.admin__wrapper .btn__action {
  border: none;
  margin: 0 auto;
  padding: 5px 50px;
  line-height: 25px;
  font-size: 16px;
  text-align: center;
  outline: none;
  cursor: pointer;
  color: white;
  background-color: #007bff;
  box-shadow: 0 1px 3px 0 #007bff, 0 1px 2px 0 #007bff;
}
.admin__wrapper video {
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0px 5px 20px #202052;
  padding: 15px;
}
.admin__wrapper .table__content table {
  width: 100%;
  border: 1px solid #eae3e3;
  font-size: 14px;
  margin-top: 20px;
}
.admin__wrapper .table__content table thead th {
  padding: 5px 15px;
  border: 1px solid #eae3e3;
}
.admin__wrapper .table__content table tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.25);
}
.admin__wrapper .table__content table tbody tr td {
  padding: 10px 15px;
  border: 1px solid #eae3e3;
}
.admin__wrapper .table__content table tbody tr td ul li {
  margin-bottom: 5px;
}
.admin__wrapper .table__content table tbody tr td ul li .btn__show {
  border: none;
  box-shadow: 0px 0px 2px #1b75bb;
  background-color: #1b75bb;
  color: white;
  padding: 5px 10px;
}
.admin__wrapper .table__content table tbody tr td ul li .btn__show:active, .admin__wrapper .table__content table tbody tr td ul li .btn__show:focus, .admin__wrapper .table__content table tbody tr td ul li .btn__show:hover {
  border: none;
  box-shadow: none;
}
.admin__wrapper .action__btn__list {
  display: flex;
  list-style: none;
  margin-bottom: 0;
  margin-left: 0;
  padding-left: 0;
}
.admin__wrapper .action__btn__list li {
  margin-right: 5px;
}
.admin__wrapper .mb25 {
  margin-bottom: 25px;
}
.admin__wrapper .box__item__list {
  margin-top: 25px;
}
.admin__wrapper .box__item__list .box__item {
  width: 100%;
  height: 100%;
  box-shadow: 0px 1px 14px #d4c3c3;
  padding: 5px;
  border-radius: 5px;
}
.admin__wrapper .box__item__list .box__item iframe {
  width: 100%;
}
.admin__wrapper .box__item__list .box__item .item_title {
  word-break: break-word;
}
.admin__wrapper .box__item__list .box__item .databaseid {
  display: flex;
  padding-left: 0;
  list-style: none;
  background: radial-gradient(#b6d274a6, #a3595900);
}
.admin__wrapper .box__item__list .box__item .databaseid li p {
  margin: 0;
  font-weight: 700;
  font-size: 17px;
  text-align: right;
}
.admin__wrapper .box__item__list .box__item .comment__text__section {
  display: flex;
  padding-left: 0;
  list-style: none;
  background: radial-gradient(#b6d274a6, #a3595900);
}
.admin__wrapper .box__item__list .box__item .comment__text__section li {
  padding: 0px 15px;
}
.admin__wrapper .box__item__list .box__item .comment__text__section li p {
  margin: 0;
  font-weight: 700;
  font-size: 17px;
  text-align: right;
}
.admin__wrapper .box__item__list .box__item .item_header {
  display: flex;
  padding-left: 0;
  list-style: none;
}
.admin__wrapper .box__item__list .box__item .item_header li {
  width: 100%;
  display: inline-flex;
}
.admin__wrapper .box__item__list .box__item .item_header li:last-child {
  justify-content: flex-end;
}
.admin__wrapper .box__item__list .box__item .item_header li:first-child {
  justify-content: flex-start;
}
.admin__wrapper .box__item__list .box__item .item__body {
  list-style: none;
  padding-left: 0;
  font-size: 13px;
}
.admin__wrapper .box__item__list .box__item .item__body li p {
  margin: 0;
  font-weight: 700;
}
.admin__wrapper .box__item__list .box__item .item__footer {
  list-style: none;
  padding-left: 0;
  font-size: 13px;
  display: flex;
  width: 100%;
  overflow: wrap;
  flex-wrap: wrap;
}
.admin__wrapper .box__item__list .box__item .item__footer li {
  display: inline-flex;
  margin-top: 5px;
  padding-right: 5px;
}
.admin__wrapper .update_image {
  width: 180px;
  height: 180px;
  background: red;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}
.admin__wrapper .update_image:hover img {
  transform: scale(1.2);
  transition: 500ms ease-in;
}
.admin__wrapper .update_image label {
  position: absolute;
  top: 60%;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  margin: auto;
  z-index: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: rgba(0, 0, 0, 0.45);
}
.admin__wrapper .update_image label i {
  font-size: 20px;
}
.admin__wrapper .update_image label:hover {
  cursor: pointer;
  transition: 500ms ease-in;
  background-color: #1b75bb;
}
.admin__wrapper .update_image label:hover i {
  color: white;
}
.admin__wrapper .upload__image .image__action {
  background-color: #007bff;
  padding: 9px 20px;
  color: white;
  font-weight: 800;
  border-radius: 20px;
  box-shadow: 0px 2px 11px #9d95a4;
}
.admin__wrapper .boardMemberImage {
  position: relative;
}
.admin__wrapper .boardMemberImage .image_input {
  position: relative;
  cursor: pointer;
  color: white;
  font-weight: 800;
  box-shadow: 0px 2px 11px #9d95a4;
  overflow: hidden;
}
.admin__wrapper .boardMemberImage .image_input .image_action {
  position: absolute;
  opacity: 0;
  transition: 200ms all ease-in;
  background: radial-gradient(#000000bd, #400e0e73);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.admin__wrapper .boardMemberImage .image_input:hover > .image_action {
  opacity: 1;
  transition: 200ms all ease-in;
}
.admin__wrapper .form__group {
  padding: 10px 0;
}
.admin__wrapper .form__group label {
  font-size: 15px;
  color: black;
  font-weight: 800;
}
.admin__wrapper .form__group label span {
  color: red;
  font-size: 20px;
}
.admin__wrapper .form__group input,
.admin__wrapper .form__group textarea,
.admin__wrapper .form__group select {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: none;
  outline: none;
  resize: none;
  width: -webkit-fill-available;
  box-shadow: 0px 1px 11px #7b8af1;
}
.admin__wrapper .form__group select option {
  background-color: #7b8af1;
}
.admin__wrapper .form__group select option:hover {
  cursor: pointer;
}
.admin__wrapper .form__group input {
  line-height: 40px;
  padding: 0px 20px;
}
.admin__wrapper .form__group button {
  border: none;
  margin: 0 auto;
  padding: 5px 50px;
  line-height: 25px;
  font-size: 16px;
  text-align: center;
  outline: none;
  cursor: pointer;
  color: white;
  background-color: #007bff;
  box-shadow: 0 1px 3px 0 #007bff, 0 1px 2px 0 #007bff;
}

.list {
  display: flex;
}
.list li {
  padding-right: 25px;
}

.toggle__switch__button {
  margin-top: 6px;
}
.toggle__switch__button .switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 24px;
}
.toggle__switch__button .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle__switch__button .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.toggle__switch__button .slider::before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.toggle__switch__button input:checked + .slider {
  background-color: #2196F3;
  box-shadow: 0px 1px 10px #2196f3;
}
.toggle__switch__button input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
.toggle__switch__button input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.toggle__switch__button .slider.round {
  border-radius: 34px;
}
.toggle__switch__button .slider.round:before {
  border-radius: 50%;
}

.table_image {
  max-width: 100px;
}

.modal__info {
  background-color: #17a2b870;
}
.modal__info .transparent__modal {
  background: #cbc6f4e6;
}

.btn {
  border: none;
  margin: 0 auto;
  padding: 5px 20px;
  line-height: 25px;
  font-size: 16px;
  text-align: center;
  outline: none;
  cursor: pointer;
  color: white !important;
}

.btn__link {
  background-color: #007bff;
  color: white;
  padding: 2px 5px;
  box-shadow: 0px 1px 5px #007bff;
}

.rounded {
  border-radius: 20px;
}

.remove_icon {
  padding-top: 3px;
  cursor: pointer;
  float: right;
}

.btn__success {
  background-color: #28a745;
  box-shadow: 0 1px 3px 0 #28a745, 0 1px 2px 0 #28a745;
}

.btn__warning {
  background-color: #ffc107;
  box-shadow: 0 1px 3px 0 #ffc107, 0 1px 2px 0 #ffc107;
}

.btn__info {
  background-color: #17a2b8;
  box-shadow: 0 1px 3px 0 #17a2b8, 0 1px 2px 0 #17a2b8;
}

.btn__primary {
  background-color: #007bff;
  box-shadow: 0 1px 3px 0 #007bff, 0 1px 2px 0 #007bff;
}

.btn__danger {
  background-color: #dc3545;
  box-shadow: 0 1px 3px 0 #dc3545, 0 1px 2px 0 #dc3545;
}

[data-tooltip-top],
[data-tooltip-right],
[data-tooltip-bottom],
[data-tooltip-left] {
  position: relative;
}

[data-tooltip-top]::after,
[data-tooltip-right]::after,
[data-tooltip-bottom]::after,
[data-tooltip-left]::after {
  position: absolute;
  z-index: 55;
  word-break: keep-all;
  white-space: nowrap;
  color: white;
  text-align: center;
  box-sizing: border-box;
  background-color: #2e2b2be3;
  box-shadow: 0px 2px 6px #230909;
  padding: 8px;
  border-radius: 10px;
  font-size: 0.9em;
  font-weight: 500;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, transform 0.2s;
}

[data-tooltip-top]::after {
  min-width: 140px;
  left: calc(50% - 70px);
  bottom: 125%;
  content: attr(data-tooltip-top);
}

[data-tooltip-right]::after {
  min-width: 0px;
  left: calc(100% + 20px);
  top: -10px;
  content: attr(data-tooltip-right);
}

[data-tooltip-bottom]::after {
  min-width: 140px;
  left: calc(0% - 70px);
  top: 125%;
  content: attr(data-tooltip-bottom);
}

[data-tooltip-left]::after {
  min-width: 140px;
  right: calc(100% + 10px);
  top: -10px;
  content: attr(data-tooltip-left);
}

[data-tooltip-top]:hover::after,
[data-tooltip-right]:hover::after,
[data-tooltip-bottom]:hover::after,
[data-tooltip-left]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.btnsm {
  padding: 2px 3px;
  line-height: 18px;
  font-size: 13px;
}

.btnmd {
  padding: 4px 8px;
  line-height: 18px;
  font-size: 13px;
}

.btn__round {
  border-radius: 20px;
}

.sucessbox {
  background-color: #ef4747;
}

.warningbox {
  background-color: #e6e60c;
}

.dangerbox {
  background-color: red;
}

.successmessage {
  background: #ef4747;
}

.warningmessage {
  background-color: #ffc107;
}

.errormessage {
  background-color: #dc3545;
}

.messagebox {
  padding: 5px;
  margin: 5px 0;
  border-left: 5px solid #007bff;
  box-shadow: 1px 3px 11px #a89494;
  border-radius: 5px;
}
.messagebox p {
  margin: 0;
  padding-left: 15px;
  color: white;
}
.messagebox p i {
  padding-right: 15px;
}

.colbox {
  padding: 15px;
  border-left: 5px solid #0f0f10;
  border-radius: 20px 0;
  box-shadow: 1px 3px 11px #a89494;
  margin-top: 15px;
}
.colbox a {
  text-decoration: none;
}
.colbox .summary__box {
  display: inline-flex;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.colbox .summary__box h3 {
  color: white;
  margin: 0;
  font-size: 30px;
  text-shadow: 0px 1px 1px black;
}
.colbox .summary__box p {
  justify-content: flex-end;
  width: 100%;
  margin: 0;
  text-align: right;
  width: 100%;
  font-size: 25px;
  text-shadow: 0px 1px 1px black;
}

.box__info {
  border-top: 3px solid #007bff;
}

.box__warning {
  border-top: 3px solid #EFB311;
}

.box__success {
  border-top: 3px solid #28a745;
}

.box__danger {
  border-top: 3px solid #dc3545;
}

.box__secondary {
  border-top: 3px solid #6c757d;
}

.content__box {
  box-shadow: 0px 1px 4px #d3b9b9;
  border-radius: 5px 5px 0 0;
}
.content__box .content__header {
  box-shadow: 0px 1px 4px #d3b9b9;
  padding: 5px;
  margin: 0 0 20px 0;
}
.content__box .content__header ul {
  list-style: none;
  padding-left: 0;
  display: flex;
  margin: 0;
}
.content__box .content__header ul li {
  width: 100%;
}
.content__box .content__header ul li .content__title h3,
.content__box .content__header ul li .content__title h2,
.content__box .content__header ul li .content__title h4 {
  font-size: 25px;
  font-weight: 800;
  margin: 0;
}
.content__box .content__header ul li:last-child {
  justify-content: flex-end;
  text-align: right;
}
.content__box .content__header ul li:first-child {
  justify-content: flex-start;
  text-align: left;
}
.content__box .content__body {
  padding: 5px;
}

.allcheckbox {
  display: flex;
  position: relative;
  margin-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Create a custom checkbox */
}
.allcheckbox input {
  position: relative;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  margin-right: 15px;
}
.allcheckbox .checkmark {
  position: absolute;
  top: 0;
  left: -15px;
  height: 20px;
  width: 20px;
  /* Create the checkmark/indicator (hidden when not checked) */
}
.allcheckbox .checkmark::after {
  content: "";
  position: absolute;
  animation: zoomOut 0.4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.allcheckbox .rounded {
  border-radius: 50% !important;
}
.allcheckbox input:checked ~ .checkmark::after {
  visibility: visible;
}
.allcheckbox input:checked ~ .checkmark:after {
  left: 6px;
  top: 0px;
  width: 7px;
  height: 15px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  animation: zoomIn 0.4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.checkbox__info {
  /* Create a custom checkbox */
  /* On mouse-over, add a grey background color */
  /* When the checkbox is checked, add a blue background */
}
.checkbox__info .checkmark {
  background-color: #007bff;
}
.checkbox__info .outlined {
  border: 1px solid #007bff;
  background-color: transparent;
}
.checkbox__info .boxshadow {
  box-shadow: 0px 1px 3px #aab1b8;
}
.checkbox__info:hover input ~ .checkmark {
  background-color: #ccc;
}
.checkbox__info input:checked ~ .checkmark {
  background-color: #007bff;
}

.checkbox__success {
  /* On mouse-over, add a grey background color */
  /* When the checkbox is checked, add a blue background */
}
.checkbox__success .checkmark {
  background-color: #28a745;
}
.checkbox__success:hover input ~ .checkmark {
  background-color: #ccc;
}
.checkbox__success input:checked ~ .checkmark {
  background-color: #28a745;
}

.checkbox__danger {
  /* Create a custom checkbox */
  /* On mouse-over, add a grey background color */
  /* When the checkbox is checked, add a blue background */
}
.checkbox__danger .checkmark {
  background-color: #dc3545;
  /* Create the checkmark/indicator (hidden when not checked) */
}
.checkbox__danger:hover input ~ .checkmark {
  background-color: #ccc;
}
.checkbox__danger input:checked ~ .checkmark {
  background-color: #dc3545;
}

.checkbox__warning {
  /* Create a custom checkbox */
  /* On mouse-over, add a grey background color */
  /* When the checkbox is checked, add a blue background */
}
.checkbox__warning .checkmark {
  background-color: #EFB311;
  /* Create the checkmark/indicator (hidden when not checked) */
}
.checkbox__warning:hover input ~ .checkmark {
  background-color: #ccc;
}
.checkbox__warning input:checked ~ .checkmark {
  background-color: #EFB311;
}

.react__this {
  color: #b57a8d;
  cursor: pointer;
}

.liked {
  color: #7676e2;
  text-shadow: 0px 1px 5px #7676e2;
}

.react__counter {
  cursor: pointer;
}

.comments__section ul {
  padding-left: 0;
  list-style: none;
}
.comments__section ul li {
  margin-bottom: 15px;
}
.comments__section ul li .write__comment__input {
  margin-top: 15px;
}
.comments__section ul li .comment__box {
  display: flex;
}
.comments__section ul li .comment__box .time {
  font-size: 11px;
}
.comments__section ul li .comment__box span.repliesCount {
  padding-left: 20px;
  color: blue;
  cursor: pointer;
}
.comments__section ul li .comment__box span.repliesCount:hover {
  color: darkblue;
  font-weight: 700;
}
.comments__section ul li .comment__box span.reply__to {
  padding-left: 20px;
  color: blue;
  cursor: pointer;
}
.comments__section ul li .comment__box span.reply__to:hover {
  color: darkblue;
  font-weight: 700;
}
.comments__section ul li .comment__box .commentor__image img {
  width: 35px;
  height: 35px;
  object-fit: cover;
  border-radius: 50%;
}
.comments__section ul li .comment__box .comment__text_area {
  padding-left: 10px;
}
.comments__section ul li .comment__box .write__coment_input_wrapper {
  width: 100%;
}
.comments__section ul li .comment__box .comment__text {
  font-size: 13px;
  border-radius: 14px;
  background: #ece4e4;
  padding: 9px;
}
.comments__section ul li .comment__box .write__comment {
  padding-left: 10px;
  display: flex;
  align-items: center;
}
.comments__section ul li .comment__box .write__comment .fa-send {
  cursor: pointer;
  color: blue;
  margin-left: 15px;
  font-size: 20px;
}
.comments__section ul li .comment__box textarea.comment__input,
.comments__section ul li .comment__box input.comment__input {
  border-radius: 15px;
  border: 1px solid #ece4e4;
  width: 100%;
  outline: none;
  padding: 5px 10px;
  resize: none;
  height: auto;
  overflow: hidden;
}
.comments__section ul li ul {
  padding-left: 50px;
}
.comments__section ul li .loadMore {
  text-align: center;
}
.comments__section ul li .loadMore span {
  color: blue;
  cursor: pointer;
  font-weight: 600;
}
.comments__section ul li .loadMore span:hover {
  text-decoration: underline;
}

.ajax__loader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  height: 100vh;
  width: 100%;
}

.ajax__loader .loading {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
  background: #ffececfa;
}

.ajax__loader .loading img {
  width: auto !important;
}

.commentor__user__image {
  width: 100px;
  height: 100px;
}

.commentor__name {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
  cursor: pointer;
}
.commentor__name:hover {
  color: #0056b3;
  text-decoration: underline;
}

.comment__replies__list .replier__user__image {
  width: 50px;
  height: 50px;
}
.comment__replies__list ul {
  padding-left: 15px;
  list-style: none;
}
.comment__replies__list ul li {
  margin-bottom: 15px;
  display: block;
  background: #e4d6d6;
  text-align: right;
}
.comment__replies__list ul li p {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
.comment__replies__list ul li ul {
  display: flex;
  margin: 0;
}
.comment__replies__list ul li ul li {
  padding: 0 15px;
  margin: 0;
  display: block;
}

footer {
  padding-left: 260px;
}
@media screen and (max-width: 767px) {
  footer {
    padding-left: 60px;
  }
}

/*# sourceMappingURL=style.css.map */