#Save/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
.content-body {
  width: 100%;
}

.table img {
  width: 50px;
  border-radius: 6px;
}

.tableFontAwsem {
  background: transparent;
  border: none;
}

@media only screen and (max-width: 800px) {
  .result_content,
  .result_content_success,
  .result_content_info,
  .result_content_warning {
    width: 85% !important;
  }

  .scheduler-border {
    width: 100% !important;
  }

  .result_content_second {
    width: 80% !important;
  }
}
.result,
.result_success,
.result_info,
.result_warning {
  display: none;
  position: fixed;
  z-index: 1050;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.72);
}

.result_content,
.result_content_success,
.result_content_info,
.result_content_warning {
  margin: auto;

  width: 80%;
  text-align: center;
  min-height: 250px;
  overflow-x: overlay;
}
@media only screen and (max-width: 800px) {
  .NotificationContent {
    width: 85% !important;
  }
}

.result_second {
  display: none;
  position: fixed;
  z-index: 1050;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgb(0 0 0 / 82%);
}

.result_content_second {
  margin: auto;
  width: 50%;
  text-align: center;
  min-height: 250px;
  overflow-x: overlay;
}
.result_pos {
  display: none;
  position: fixed;
  z-index: 1050;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgb(0 0 0 / 82%);
}
.result_pos_customers {
  display: none;
  position: fixed;
  z-index: 1050;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgb(0 0 0 / 82%);
}

.result_content_pos {
  margin: auto;

  width: 337px;
  text-align: center;
  min-height: 250px;
  overflow-x: overlay;
}
.result_content_pos_customers {
  margin: auto;

  width: 337px;
  text-align: center;
  min-height: 250px;
  overflow-x: overlay;
}

.row .form-group .col-lg-12,
.form-group.col-lg-4 {
  text-align: left !important;
}

/* start main menu */
.main-menu .nav-item svg,
.main-menu .nav-item i,
.main-menu .nav-item span {
  color: #09adee !important;
}

.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation li.has-sub > a:after {
  background-image: none;

  content: "\f105";
  font-family: FontAwesome;
  color: #09adee;
}
[lang="en"]
  .vertical-layout.vertical-menu-modern.menu-expanded
  .main-menu
  .navigation
  li.has-sub
  > a:after {
  right: auto;
  left: 18px;
  top: 16px;
}

/* // end main menu */

/* start page heading */
.page-heading {
  position: relative;
  margin: 20px 0 40px;
}

.page-heading .heading-bar {
  background-color: #fff;
  height: 25px;
}

.dark-layout .page-heading .heading-bar {
  background-color: #283046;
}

.page-heading h1,
.page-heading img {
  position: absolute;
  left: 50%;
  z-index: 10;
  transform: translate(-50%, -50%);
}

.page-heading h1 {
  top: 50%;
  margin: 0;
  font-size: 16px;
  color: #fff;
  max-width: 280px;
  text-align: center;
  width: 100%;
}

.page-heading img {
  top: 70%;
  max-width: 300px;
  /*width: 70%;*/
  width: 100%;
  height: 55px;
}

/* // end page heading */

/* 20/12/2022 */
.vertical-layout.vertical-menu-modern.menu-collapsed .header-navbar.floating-nav {
  width: calc(100vw - (100vw - 100%) - calc(2rem * 2) - 260px);
}

[lang="ar"] .vertical-overlay-menu.menu-open .main-menu {
  right: 260px;
  left: 0;
  transform: translate3d(100%, 0, 0);
}

[lang="ar"] .vertical-overlay-menu.menu-hide .main-menu {
  right: -260px;
  left: 0;
  transform: translate3d(200%, 0, 0);
  transition: all 0.5s ease-in-out;
}

[lang="ar"] .app-content {
  margin-left: 0 !important;
  transition: width 1.25s, opacity 1.25s, transform 1.25s;
}

[lang="ar"] .vertical-overlay-menu .content {
  margin-right: 0 !important;
}

.main-menu.menu-light .navigation > li.active > a,
.main-menu.menu-dark .navigation > li.active > a {
  background: linear-gradient(118deg, #09adee, rgb(41 116 175)) !important;
  color: #fff !important;
  box-shadow: 0 0 10px 1px #09adee !important;
  border-radius: 4px;
}
.main-menu.menu-dark .navigation > li.active > a {
  color: #09adee !important;
}
[lang="en"] .main-menu.menu-light .navigation > li.active > a,
[lang="en"] .main-menu.menu-dark .navigation > li.active > a {
  background: linear-gradient(118deg, rgb(41 116 175), #09adee) !important;
}
.main-menu-content .navigation-main .active span,
.main-menu-content .navigation-main .active svg,
.dark-layout .main-menu-content .navigation-main .active span,
.dark-layout .main-menu-content .navigation-main .active svg {
  color: #fff !important;
}

.dark-layout .main-menu .navigation > li.active span,
.dark-layout .main-menu .navigation > li.active i,
.main-menu.menu-light .navigation > li.active span,
.main-menu.menu-light .navigation > li.active i {
  color: #fff !important;
}

.scroll-top {
  background: linear-gradient(118deg, #09adee, rgb(41 116 175));
  background-color: #09adee;
  color: #fff;
  box-shadow: 0px 1px 8px grey;
}
.scroll-top:hover {
  box-shadow: 0px 1px 8px grey !important;
}

/* new changes */
.result {
  padding: 0 !important;
  align-items: center;
}
.result[style*="display: block"] {
  display: flex !important;
}
.result .result_content {
  padding: 10px 0;
}
.card .card-header {
  justify-content: space-between !important;
  padding: 12px !important;
  margin-bottom: 10px;
  flex-wrap: nowrap;
}
.card .card-header h3 {
  font-size: 12px !important;
}
/* this media for (.card-header) and (.card-header h3) */
@media (min-width: 450px) {
  .card .card-header {
    padding: 14px !important;
  }
  .card .card-header h3 {
    font-size: 14px !important;
  }
}
@media (min-width: 650px) {
  .card .card-header {
    padding: 16px !important;
  }
  .card .card-header h3 {
    font-size: 16px !important;
  }
}
.result .flex-offset {
  width: 1px;
  height: 1px;
}
.result .icon_close_result_header {
  color: #fff;
  cursor: pointer;
  font-size: 16px;
}
.result .card-body {
  padding: 10px;
  padding-top: 0;
}
.result .card-primary {
  margin-bottom: 0;
}

/* table */
.result .table tbody tr:first-of-type {
  background-color: #09adee;
}

.result .table tbody tr:first-of-type td,
.result .table tbody tr:first-of-type th {
  color: #fff;
}

tbody tr:not(:first-of-type):nth-child(even) {
  background-color: #f3f2f7;
}

.dark-layout tbody tr:not(:first-of-type):nth-child(even) {
  background-color: #343d55;
}

/* ----- start sweet alert ----- */
.swal2-popup {
  padding: 10px;
}
.dark-layout .swal2-popup {
  background-color: #283046;
}

.swal2-popup .swal2-icon.swal2-warning {
  border-color: #09adee !important;
}
.swal2-popup .swal2-icon-content {
  color: #09adee !important;
}
.swal2-popup .swal2-title {
  font-size: 14px;
  margin: 8px 0;
}
@media (min-width: 576px) {
  .swal2-popup .swal2-title {
    font-size: 20px;
  }
}

.swal2-popup .swal2-html-container {
  color: #595959;
}
.dark-layout .swal2-popup .swal2-html-container {
  color: #d0d2d6;
}

/* start sweet alert btns */
.swal2-popup .swal2-confirm,
.swal2-popup .swal2-cancel {
  padding: 6px 16px;
  color: #fff !important;
  transition: transform 0.3s ease-in-out;
  box-shadow: 0px 1px 8px grey;
}

@media (min-width: 500px) {
  .swal2-popup .swal2-confirm,
  .swal2-popup .swal2-cancel {
    padding: 8px 18px;
  }
}

.swal2-popup .swal2-confirm:hover,
.swal2-popup .swal2-confirm:focus,
.swal2-popup .swal2-confirm:active,
.swal2-popup .swal2-cancel:hover,
.swal2-popup .swal2-cancel:focus,
.swal2-popup .swal2-cancel:active {
  transform: scale(1.05);
  box-shadow: 0px 1px 8px grey;
}

.swal2-popup .swal2-confirm {
  background: #09adee;
  border-color: #09adee !important;
}

.swal2-popup .swal2-confirm:hover,
.swal2-popup .swal2-confirm:focus,
.swal2-popup .swal2-confirm:active {
  background: #09adee !important;
}

.swal2-popup .swal2-cancel,
.swal2-popup .swal2-cancel:hover,
.swal2-popup .swal2-cancel:active,
.swal2-popup .swal2-cancel:focus {
  background-color: #e63233 !important;
  box-shadow: 0px 1px 8px grey;
}
/* // end sweet alert btns */
/* // ----- end sweet alert ----- */

/* start table */
.table-responsive td .dropdown-menu.show {
  display: flex;
  top: -24px !important;
  transform: unset !important;
  left: 20px !important;
  right: unset !important;
  min-width: 45px;
}

[lang="en"] .table-responsive td .dropdown-menu.show {
  left: unset !important;
  right: 20px !important;
}

.table-responsive td .dropdown-menu .dropdown-item {
  padding: 5px 12px;
  text-align: center;
}

.table-responsive {
  /*overflow: auto;*/
}

.table-responsive thead tr:first-of-type th {
  background: #00aeef !important;
  /* background: linear-gradient(118deg, #09adee, rgb(41 116 175)) !important; */
  color: #fff !important;
}

.table-responsive tbody td,
.table-responsive thead th {
  text-align: center;
  font-size: 10px;
  padding: 10px !important;
  white-space: nowrap;
}

@media (min-width: 576px) {
  .table-responsive thead th,
  .table-responsive tbody td {
    font-size: 12px;
  }
}

@media (min-width: 768px) {
  .table-responsive thead th,
  .table-responsive tbody td {
    font-size: 14px;
  }
}

.table-responsive tbody td i {
  font-size: 12px !important;
}

/* container_table */
.container_table {
  overflow: hidden;
}

.container_table table .columns_title th {
  padding: 0 !important;
}

.container_table th,
.container_table td {
  border: 1px solid #ebe9f1 !important;
}

.dark-layout .container_table th,
.dark-layout .container_table td {
  border: 1px solid #3b4253 !important;
}

.container_table table th span {
  display: block;
  margin: auto;
  padding: 10px !important;
  white-space: break-spaces;
}
.container_table table tbody .row_data button {
  display: flex;
  justify-content: center;
}
.container_table table tbody tr span {
  white-space: break-spaces;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-wrap: anywhere;
}
.container_table .link_show_student_info {
  display: block;
  padding: 5px 10px;
  margin: 2px 5px;
  background: linear-gradient(118deg, #09adee, rgb(41 116 175));
  background-color: #09adee;
  color: #fff;
  border-radius: 4px;
}
[lang="en"] .container_table .link_show_student_info {
  background: linear-gradient(118deg, rgb(41 116 175), #09adee);
}

.container_table table tbody tr span.badge-pill {
  width: -o-fit-content;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  margin: auto;
}

.icon_toggle_info {
  background: linear-gradient(118deg, #09adee, rgb(41 116 175));
  background-color: #09adee;
  width: 20px;
  height: 20px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  margin: auto;
}

table .list_info {
  display: grid;
  text-align: initial;
  cursor: default;
  padding: 0;
  margin: 0;
}

@media (min-width: 500px) {
  table .list_info {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  table .list_info {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

table .list_info li {
  display: flex;
  /* align-items: center; */
  align-items: flex-start;
  width: 100%;
  margin-bottom: 15px;
  list-style: none;
}

table .list_info li strong {
  color: #09adee;
}

table .list_info li button {
  width: 25px !important;
  border: 1px solid grey;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;

  transition: transform 0.3s ease-in-out;
  width: 60px !important;
  height: 30px !important;
  /* background: #09adee !important; */
  background: linear-gradient(118deg, #09adee, rgb(41 116 175)) !important;
  border-color: #09adee !important;
  box-shadow: 0px 1px 8px grey;
}
table .list_info li button:hover,
table .list_info li button:active,
table .list_info li button:focus {
  transform: scale(1.05);
}

table .list_info li button i {
  font-size: 10px !important;
  color: #fff !important;
}

.card-primary {
  box-shadow: 0 1px 8px grey;
}

/* end table */

/* start col upload image */
.col_upload_image {
  text-align: initial;
}

.col_upload_image label {
  width: 100%;
}

.col_upload_image .container_input_image {
  background: transparent;
}

.dark-layout .col_upload_image .container_input_image {
  border-color: #404656;
}

.col_upload_image .label_upload_image {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0;
}

.col_upload_image .icon_upload_image {
  margin-top: 2px;
  font-size: 16px;
  cursor: pointer;
}

/* .col_upload_image .icon_upload_image.hasValue {
  color: #25b825;
}
.col_upload_image .icon_delete_upload_image {
  color: red;
  font-size: 16px;
  position: absolute;
  right: 10px;
  top: 20px;
  cursor: pointer;
  display: none;
} */

[lang="en"] .col_upload_image .icon_delete_upload_image {
  left: 10px;
}
/* // end col upload image */

/* start pagination */
.pagination .page-item a {
  height: 100%;
}
.page-item.active .page-link {
  background: linear-gradient(118deg, #09adee, rgb(41 116 175));
}
/* // end pagination */

/* start select */
.select2-selection__rendered {
  text-align: right;
}
[lang="en"] .select2-selection__rendered {
  text-align: left;
}
.select2-selection__rendered .select2-selection__placeholder {
  display: block;
  width: 100%;
}
[lang="en"] .select2-selection--single .select2-selection__arrow {
  margin-top: 0px;
  margin-right: 10px;
}
.container_btn_navigation {
  display: flex;
  justify-content: center;
}
.container_btn_navigation input,
.container_btn_navigation button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  margin: 0 5px;
}
.container_btn_navigation button {
  border: 0;
  color: #fff;
  background: linear-gradient(118deg, #09adee, rgb(41 116 175));
  /* border-radius: 2px; */
}
[lang="ar"] .container_btn_navigation input {
  /* border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0; */
}
[lang="ar"] .container_btn_navigation button {
  /* border-top-left-radius: 0;
  border-bottom-left-radius: 0; */
}
/* // end select */

/* start filters & add form btn */
#showFilter {
  color: #fff;
  background-color: #00aeef;
  border-color: #09adee;
  padding: 8px 18px;
  display: block;
  margin: auto;
  transition: transform 0.3s ease-in-out;
  box-shadow: 0px 1px 8px grey;
  margin-bottom: 20px;
}

#filterDialog {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#DataTables_Table_1_filter {
  margin-bottom: 20px;
}

#showFilter,
#AddForm {
  padding: 8px 18px;
  display: block;
  margin: auto;
  background: linear-gradient(118deg, #09adee, rgb(41 116 175));
  border: 0 !important;
  color: #fff;
  transition: transform 0.3s ease-in-out;
  box-shadow: 0px 1px 8px grey;
  /*width: 120px;*/
  min-width: 140px;
  height: 30px;
}

@media (min-width: 768px) {
  #showFilter,
  #AddForm {
    margin: unset;
  }
}

#showFilter:hover,
#showFilter:active,
#showFilter:focus,
#AddForm:hover,
#AddForm:active,
#AddForm:focus {
  transform: scale(1.05);
  background-color: #00aeef !important;
}

#AddForm {
  margin-top: 20px;
}

.btn_search_question {
  background: #00aeef !important;
  background: linear-gradient(118deg, #09adee, rgb(41 116 175)) !important;
  border-color: #00aeef !important;
  color: #fff !important;
  transition: transform 0.3s ease-in-out;
  box-shadow: 0px 1px 8px grey;
  width: 120px;
  height: 30px;
}

.btn_search_question:hover,
.btn_search_question:active,
.btn_search_question:focus {
  transform: scale(1.05);
  background-color: #00aeef !important;
  box-shadow: 0px 1px 8px grey !important;
}

#search_btn {
  width: 120px;
  height: 30px;
  padding: 0;
}
/* // end filters & add form btn */

/* start modal result content  */
.result_content {
  /* background: white; */
  border-radius: 8px;
  padding: 10px !important;
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
  text-align: initial;
  max-height: 90vh;
  max-width: 90vw;
}

.dark-layout .result_content {
  /* background-color: #3b4253 !important; */
}

.result_content .form-group {
  align-self: flex-end;
  text-align: right;
}

[lang="en"] .result_content .form-group {
  /* text-align: right; */
  text-align: left;
}

.light-layout .result .result_content,
.dark-layout .result .result_content {
  background: none !important;
}

.result .result_content tbody tr:first-of-type {
  font-size: 12px;
}
@media (min-width: 576px) {
  .result .result_content tbody tr:first-of-type {
    font-size: 15px;
  }
}
.result .result_content tbody tr:first-of-type:hover {
  background: #09adee;
}
.result .result_content .card-header {
  justify-content: space-between !important;
}

.result .card-header .flex-offset,
.result .card-header .icon_close_result_header {
  display: block !important;
}

/* .result_content #Close { 

/* start save btn && close btn */
#Save,
#Close {
  padding: 6px 16px !important;
  color: #fff !important;
  transition: transform 0.3s ease-in-out;
  box-shadow: 0px 1px 8px grey;
  width: 80px;
}

@media (min-width: 500px) {
  #Save,
  #Close {
    padding: 8px 18px !important;
  }
}

#Save:hover,
#Save:focus,
#Save:active,
#Close:hover,
#Close:focus,
#Close:active {
  transform: scale(1.05);
}

#Save {
  background: linear-gradient(118deg, #09adee, rgb(41 116 175));
  background-color: #09adee;
  border-color: #09adee !important;

  /*min-width: 90px;*/
  width: auto;
}

#Save:hover,
#Save:focus,
#Save:active {
  background: #09adee !important;
}

#Close {
  background-color: #e63233;
  min-width: 90px;
}

.result .flex-nowrap .form-group {
  text-align: center;
}

/* // end save btn && close btn */

/* // end modal result content  */

.card-header {
  background: #09adee !important;
  /* background: linear-gradient(118deg, #09adee, rgb(41 116 175)); */
  border: 0 !important;
  justify-content: space-between !important;
  /* justify-content: center !important; */
  text-align: center;
  padding: 16px !important;
  margin-bottom: 20px;
}

.card-header .card-title {
  color: #fff;
}

.card-header .flex-offset,
.card-header .icon_close_result_header {
  /* display: none; */
}

.result .card-header {
  /* justify-content: center !important; */
}

/*  start col statistics */
.content-statistics .col-statistics {
  padding: 0;
}

.content-statistics .col-statistics .card-header {
  justify-content: center;
  background: #09adee;
  padding: 16px;
  margin-bottom: 20px;
  text-align: center !important;
  justify-content: center !important;
}

.content-statistics .col-statistics .card-title,
.content-statistics .col-statistics .card-subtitle {
  color: #fff !important;
}

.statistics-body {
  padding: 0;
}
/* // end col statistics */

/* start col upload file */
.col_upload_file {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 14px;
  /* padding: 0; */

  /* align-self: flex-end;
		margin-bottom: 14px; */
}

@media (min-width: 768px) {
  .col_upload_file {
    padding: 0 12px;
  }
}

.col_upload_file .icon_upload_file {
  font-size: 16px;
  cursor: pointer;
  margin: 5px 10px;
}

.col_upload_file .span-like-label {
  display: block;
  margin-bottom: 4px;
  text-align: initial;
}

.col_upload_file .icon_upload_file.hasValue {
  color: #25b825;
  margin: 5px 20px;
}

.col_upload_file .icon_delete_upload_file {
  color: #f00;
  font-size: 16px;
  position: absolute;
  right: 16px;
  top: 24px;
  cursor: pointer;
  display: none;
}

[lang="en"] .col_upload_file .icon_delete_upload_file {
  left: unset;
  left: 16px;
}

.date input {
  background: transparent !important;
}

.col_upload_file .container-upload-file {
  display: block;
  width: 100%;
  height: 2.714rem;
  padding: 0.438rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
  color: #6e6b7b;
  background-clip: padding-box;
  border: 1px solid #d8d6de;
  border-radius: 0.357rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.dark-layout .col_upload_file .container-upload-file {
  border-color: #3b4253;
}

.col_upload_file .container-upload-file label {
  width: fit-content;
}

/* // end col upload file */

/* start datepicker */
.datepicker {
  direction: rtl;
}

.datepicker.dropdown-menu {
  right: initial;
}

@media (max-width: 449px) {
  .datepicker {
    left: 25% !important;
  }
}

@media (min-width: 450px) and (max-width: 575px) {
  .datepicker {
    left: 29% !important;
  }
}
.datepicker-dropdown.datepicker-orient-top::after,
.datepicker-dropdown.datepicker-orient-top::before,
.datepicker-dropdown.datepicker-orient-bottom::before,
.datepicker-dropdown.datepicker-orient-bottom::after {
  display: none !important;
}
/* // end datepicker */

/* start row_all_inputs */
.row_all_inputs .col-form-item {
  align-self: flex-start;
}
/* // end row_all_inputs */

/* start border inputs & selects */
.light-layout .select2-selection--single,
.select2-selection--multiple {
  border-color: #d8d6de !important;
}
.dark-layout .select2-selection--single,
.dark-layout .select2-selection--multiple {
  border-color: #404656 !important;
}
/* // end border inputs & selects */

/* start modal show image */
.modal-show-image {
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease-in-out;
  transform: scale(0);
}
.modal-show-image.show {
  transform: scale(1);
  padding: 0 !important;
}
.modal-show-image .modal-dialog {
  transition: width 1.3s ease-in-out;
  width: 80%;
  height: 80%;
  transform: scale(0.7) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-show-image .modal-dialog.scale-modal-dialog {
  transform: scale(1) !important;
}
.modal-show-image .modal-header {
  background: #09adee !important;
  justify-content: flex-start;
  flex-direction: row-reverse;
}
.modal-show-image .icon-header {
  font-size: 14px;
  cursor: pointer;
  margin: 0 10px;
  color: #fff;
}
@media (min-width: 576px) {
  .modal-show-image .icon-header {
    font-size: 20px;
  }
}
.modal-show-image .modal-header .btn-close-show-image {
  color: #e63233;
}
.modal-show-image .modal-content {
  /* max-height: 100%; */
  width: 100%;
  height: 100%;
  box-shadow: 0px 1px 8px grey;
}
.modal-show-image .modal-body {
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  padding: 0;
  max-height: 100%;
}
.modal-show-image .modal-body img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
/* // end modal show image */

/* start loading spinner */
.loading-spinner {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loading-spinner div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #00aeef transparent transparent transparent;
}
.loading-spinner div:nth-child(1) {
  animation-delay: -0.45s;
}
.loading-spinner div:nth-child(2) {
  animation-delay: -0.3s;
}
.loading-spinner div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* // end loading spinner */

/* start header container student name */
.header_container_student_name {
  margin-top: 20px;
  margin-bottom: 10px;
}

.header_container_student_name h3 {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  padding: 10px;
  padding-top: 28px;
  background: #00aeef;
  color: #fff !important;
  box-shadow: 1px 2px 8px grey;
  border-radius: 10px;
  text-align: center;
}

.header_container_student_name i {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9f9f9;
  color: #00aeef;
  border: 3px dashed #00aeef;
  box-shadow: 1px 2px 10px grey;
  padding: 10px;
  border-radius: 50%;
  font-size: 16px;
}

.header_container_student_name span {
  font-size: 16px;
}

@media (min-width: 768px) {
  .header_container_student_name {
    margin-top: 25px;
    margin-bottom: 25px;
  }

  .header_container_student_name i {
    font-size: 20px;
  }

  .header_container_student_name span {
    font-size: 22px;
  }
}
/* // end header container student name */