body {
  font-family: 'ChakraPetch', sans-serif;
}

.collapsable-sidebar {
  /* min-width: 17rem; */
  /* max-width: 17rem; */
  min-height: 100vh;
  border-right: 1px solid #ddd;
  /* transition: all 0.3s; */
}

.collapsable-sidebar .nav li.active>a {
  background: #0258a2;
  color: #FFFFFF;
}

.collapsable-sidebar .nav li:not(.active):hover>a {
  background: #0258a2;
  color: white;
}

.collapsable-sidebar .logo,
.collapsable-sidebar .mini-logo {
  color: #001d42;
  font-weight: 700;
}

.collapsable-sidebar .nav-mobile-menu .show .dropdown-menu a {
  margin: 0;
  color: #3c3636;
}

.collapsable-sidebar .nav .nav-icon,
.off-canvas-sidebar .nav .nav-icon {
  font-size: 18px;
  float: left;
  margin-right: 10px;
  line-height: 25px;
  width: 30px;
  text-align: center;
}

.collapsable-sidebar .sidebar-wrapper .nav [data-toggle="collapse"]~div>ul>li>a,
.off-canvas-sidebar .sidebar-wrapper .nav [data-toggle="collapse"]~div>ul>li>a {
  padding-left: 4rem;
  margin: 0;
}

ul.nav li:not(.active):hover>a {
  background: #a8d2f1;
  color: black;
  border-top-left-radius: var(--bs-border-radius) !important;
  border-bottom-left-radius: var(--bs-border-radius) !important;
}

@media (max-width: 768px) {
  .collapsable-sidebar {
    margin-left: -17rem;
  }

  .collapsable-sidebar.hidden {
    margin-left: 0;
  }

  .collapsable-sidebarCollapse span {
    display: none;
  }
}

.collapsable-sidebar .dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.collapsable-sidebar .nav li.active>a {
  background: #0258a2;
  color: #FFFFFF;
}

.swal2-modal,
.swal2-styled {
  font-family: 'ChakraPetch', sans-serif;
}

.swal2-modal .swal2-content {
  font-weight: normal;
}

.my-bg-success {
  background-color: #5cb85c !important;
}

.my-bg-info {
  background-color: #5bc0de !important;
}

.my-bg-warning {
  background-color: #f0ad4e !important;
}

.my-bg-danger {
  background-color: #d9534f !important;
}

.top-border {
  border-top: 1px solid #bbbbbb !important;
}

.bottom-border {
  border-bottom: 1px solid #bbbbbb !important;
}

.border-1 {
  border: 1px solid #bbbbbb;
}

.border-2 {
  border: 2px solid #bbbbbb;
}

.border-3 {
  border: 3px solid #bbbbbb;
}

.border-success {
  border-color: #7AC29A;
}

.border-warning {
  border-color: #F3BB45;
}

.border-danger {
  border-color: #ee5b5b;
}

.border-lightgray {
  border-color: #eeeeee !important;
}

.font-sm {
  font-size: small;
}

.font-smr {
  font-size: smaller;
}

.font-md {
  font-size: medium;
}

.font-lg {
  font-size: large;
}

.font-lgr {
  font-size: larger;
}

.font-xl {
  font-size: x-large;
}

.font-xs {
  font-size: x-small;
}

.font-xxl {
  font-size: xx-large;
}

.font-xxs {
  font-size: xx-small;
}

tbody.align-text-top>tr>td {
  vertical-align: text-top !important;
}

table.dataTable thead>tr>th.sorting_asc,
table.dataTable thead>tr>th.sorting_desc,
table.dataTable thead>tr>th.sorting,
table.dataTable thead>tr>td.sorting_asc,
table.dataTable thead>tr>td.sorting_desc,
table.dataTable thead>tr>td.sorting {
  padding-right: 30px;
}

table.dataTable thead>tr>th:active,
table.dataTable thead>tr>td:active {
  outline: none;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  cursor: pointer;
  position: relative;
}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before,
table.dataTable thead .sorting_desc_disabled:after {
  position: absolute;
  bottom: 0.5em;
  display: block;
  opacity: 0.3;
}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before {
  right: 1em;
  content: "\2191";
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
  right: 0.5em;
  content: "\2193";
}

table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:after {
  opacity: 1;
}

table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:after {
  opacity: 0;
}

div.dataTables_scrollHead table.dataTable {
  margin-bottom: 0 !important;
}

div.dataTables_scrollBody table {
  border-top: none;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

div.dataTables_scrollBody table thead .sorting:after,
div.dataTables_scrollBody table thead .sorting_asc:after,
div.dataTables_scrollBody table thead .sorting_desc:after {
  display: none;
}

div.dataTables_scrollBody table tbody tr:first-child th,
div.dataTables_scrollBody table tbody tr:first-child td {
  border-top: none;
}

div.dataTables_scrollFoot table {
  margin-top: 0 !important;
  border-top: none;
}

@media screen and (max-width: 767px) {

  div.dataTables_wrapper div.dataTables_length,
  div.dataTables_wrapper div.dataTables_filter,
  div.dataTables_wrapper div.dataTables_info,
  div.dataTables_wrapper div.dataTables_paginate {
    text-align: center;
  }
}

table.dataTable.table-condensed>thead>tr>th {
  padding-right: 20px;
}

table.dataTable.table-condensed .sorting:after,
table.dataTable.table-condensed .sorting_asc:after,
table.dataTable.table-condensed .sorting_desc:after {
  top: 6px;
  right: 6px;
}

div.table-responsive>div.dataTables_wrapper>div.row {
  margin: 0;
}

div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:first-child {
  padding-left: 0;
}

div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-child {
  padding-right: 0;
}


.table-secondary {
  color: white;
  background-color: #f70655;
}

.table-light {
  background-color: lightgrey;
}

.table-mui thead {
  border-bottom: 3px solid red;
}

/* .table-sm td, .table-sm th {
	padding: .5rem!important;
} */

.green {
  color: green;
}

.red {
  color: red;
}

.grey {
  color: grey;
}

.bg-lightgrey,
.bg-lightgray {
  background-color: #e2e2e2;
}

.bg-lightblue {
  background-color: #56bbfa;
}

.bg-lightyellow {
  background-color: #fff8dc;
}

.bg-white {
  background-color: #ffffff;
}

.bg-brown {
  background-color: #9d784b;
}

.bg-lightbrown {
  background-color: #b99973;
}

.bg-orange {
  background-color: #ffa500;
}

.text-bg-menu {
  background-color: #0258a2;
  color: white !important;
}

.label-default {
  background-color: #84a4ce;
}

.nav-link {
  line-height: 2;
  display: flex;
  align-items: baseline;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: white !important;
  background-color: #009ac0 !important;
}

.nav>.menu-item>.nav-link {
  color: black;
}

.nav>.menu-item>.nav-link>.nav-icon {
  opacity: 80%;
}

.nav>.menu-item.active>.nav-link {
  color: white;
  background-color: #0258a2;
  border-top-left-radius: var(--bs-border-radius) !important;
  border-bottom-left-radius: var(--bs-border-radius) !important;
}

.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  width: 100%;
  overflow-y: auto;
  backdrop-filter: blur(3px);
  background-color: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  /* transition: opacity 3s ease; */
}

.modal-header {
  border-bottom: 1px solid #bbbbbb;
}

.modal-footer {
  border-top: 1px solid #bbbbbb;
}

.w-1r {
  width: 1rem !important;
}

.w-2r {
  width: 2rem !important;
}

.w-3r {
  width: 3rem !important;
}

.w-4r {
  width: 4rem !important;
}

.w-5r {
  width: 5rem !important;
}

.w-6r {
  width: 6rem !important;
}

.w-7r {
  width: 7rem !important;
}

.w-8r {
  width: 8rem !important;
}

.w-9r {
  width: 9rem !important;
}

.w-10r {
  width: 10rem !important;
}

.w-11r {
  width: 11rem !important;
}

.w-12r {
  width: 12rem !important;
}

.h-1r {
  height: 1rem !important;
}

.h-2r {
  height: 2rem !important;
}

.h-3r {
  height: 3rem !important;
}

.h-4r {
  height: 4rem !important;
}

.h-5r {
  height: 5rem !important;
}

.h-6r {
  height: 6rem !important;
}

.h-7r {
  height: 7rem !important;
}

.h-8r {
  height: 8rem !important;
}

.h-9r {
  height: 9rem !important;
}

.h-10r {
  height: 10rem !important;
}

.h-11r {
  height: 11rem !important;
}

.h-12r {
  height: 12rem !important;
}

.w-10 {
  width: 10% !important;
}

.w-20 {
  width: 20% !important;
}

.w-30 {
  width: 30% !important;
}

.w-40 {
  width: 40% !important;
}

.w-50 {
  width: 50% !important;
}

.w-60 {
  width: 60% !important;
}

.w-70 {
  width: 70% !important;
}

.w-80 {
  width: 80% !important;
}

.w-90 {
  width: 90% !important;
}

.w-100 {
  width: 100% !important;
}

.min-w-10 {
  min-width: 10% !important;
}

.min-w-20 {
  min-width: 20% !important;
}

.min-w-30 {
  min-width: 30% !important;
}

.min-w-40 {
  min-width: 40% !important;
}

.min-w-50 {
  min-width: 50% !important;
}

.min-w-60 {
  min-width: 60% !important;
}

.min-w-70 {
  min-width: 70% !important;
}

.min-w-80 {
  min-width: 80% !important;
}

.min-w-90 {
  min-width: 90% !important;
}

.min-h-10 {
  min-height: 10% !important;
}

.min-h-20 {
  min-height: 20% !important;
}

.min-h-30 {
  min-height: 30% !important;
}

.min-h-40 {
  min-height: 40% !important;
}

.min-h-50 {
  min-height: 50% !important;
}

.min-h-60 {
  min-height: 60% !important;
}

.min-h-70 {
  min-height: 70% !important;
}

.min-h-80 {
  min-height: 80% !important;
}

.min-h-90 {
  min-height: 90% !important;
}

.vw-10 {
  width: 10vw !important;
}

.vw-20 {
  width: 20vw !important;
}

.vw-30 {
  width: 30vw !important;
}

.vw-40 {
  width: 40vw !important;
}

.vw-50 {
  width: 50vw !important;
}

.vw-60 {
  width: 60vw !important;
}

.vw-70 {
  width: 70vw !important;
}

.vw-80 {
  width: 80vw !important;
}

.vw-90 {
  width: 90vw !important;
}

.vh-10 {
  height: 10vh !important;
}

.vh-20 {
  height: 20vh !important;
}

.vh-30 {
  height: 30vh !important;
}

.vh-40 {
  height: 40vh !important;
}

.vh-50 {
  height: 50vh !important;
}

.vh-60 {
  height: 60vh !important;
}

.vh-70 {
  height: 70vh !important;
}

.vh-80 {
  height: 80vh !important;
}

.vh-90 {
  height: 90vh !important;
}

.leading-3 {
  line-height: .75rem;
}

.leading-4 {
  line-height: 1rem;
}

.leading-5 {
  line-height: 1.25rem;
}

.leading-6 {
  line-height: 1.5rem;
}

.leading-7 {
  line-height: 1.75rem;
}

.leading-8 {
  line-height: 2rem;
}

.leading-9 {
  line-height: 2.25rem;
}

.leading-10 {
  line-height: 2.5rem;
}

.leading-none {
  line-height: 1;
}

.leading-tight {
  line-height: 1.25;
}

.leading-snug {
  line-height: 1.375;
}

.leading-normal {
  line-height: 1.5;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-loose {
  line-height: 2;
}

.form-group>label {
  margin-top: 0.6rem;
  margin-bottom: 0.3rem;
}

.form-control {
  font-family: inherit;
}

.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
  font-style: italic;
}

.custom-select {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' fill='%23888c9b' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19L403 749q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'/%3E%3C/svg%3E") no-repeat right .75rem center, linear-gradient(180deg, #fff, #f6f7f9);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  height: auto;
  transition: all .2s ease-in-out;
  font-family: inherit;
  line-height: inherit;
  border-radius: 4px;
}

.input-group>.custom-select {
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

.input-group-prepend {
  margin-right: -1px;
}

.input-group-append,
.input-group-prepend {
  display: -ms-flexbox;
  display: flex;
}

.input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle),
.input-group>.input-group-append:last-child>.input-group-text:not(:last-child),
.input-group>.input-group-append:not(:last-child)>.btn,
.input-group>.input-group-append:not(:last-child)>.input-group-text,
.input-group>.input-group-prepend>.btn,
.input-group>.input-group-prepend>.input-group-text {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group .form-control:not(:first-child):not(:last-child),
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child) {
  /* border-radius: 0; */
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group .form-control:not(:first-child),
.input-group-addon:not(:first-child),
.input-group-btn:not(:first-child)>.btn,
.input-group-btn:not(:first-child)>.btn-group>.btn,
.input-group-btn:not(:first-child)>.dropdown-toggle,
.input-group-btn:not(:last-child)>.btn-group:not(:first-child)>.btn,
.input-group-btn:not(:last-child)>.btn:not(:first-child) {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

.input-group-text {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: .40rem .75rem;
  margin-bottom: 0;
  /* font-size: 1rem; */
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #bbbbbb;
  border-radius: .25rem;
}

input:focus,
select:focus {
  border: 2px solid lightskyblue !important;
}


.custom-checkbox,
.form-check {
  height: 2.4rem;
}

label.custom-checkbox:focus-within {
  border: 2px solid lightskyblue !important;
}

.font-variant-numeric {
  font-family: 'Muli';
  font-variant-numeric: tabular-nums;
}

/* dataTable styles hack */
table.dataTable {
  border-collapse: collapse !important;
}

table.table.dataTable thead {
  border-bottom: 3px solid red;
}

table.table.dataTable thead th {
  font-size: inherit;
  color: #222222;
  font-weight: 500;
}

ul.list>li {
  line-height: 1.8;
  display: flex;
}

.reset-height {
  height: auto;
}

.reset-width {
  width: auto;
}

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-auto {
  overflow: auto !important;
}

.transition {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
}

.transition-none {
  transition-property: none;
}

.transition-all {
  transition-property: all;
}

.transition-colors {
  transition-property: background-color, border-color, color, fill, stroke;
}

.transition-opacity {
  transition-property: opacity;
}

.transition-shadow {
  transition-property: box-shadow;
}

.transition-transform {
  transition-property: transform;
}

.ease-linear {
  transition-timing-function: linear;
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.duration-75 {
  transition-duration: 75ms;
}

.duration-100 {
  transition-duration: 100ms;
}

.duration-150 {
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.duration-700 {
  transition-duration: 700ms;
}

.duration-1000 {
  transition-duration: 1000ms;
}

.delay-75 {
  transition-delay: 75ms;
}

.delay-100 {
  transition-delay: 100ms;
}

.delay-150 {
  transition-delay: 150ms;
}

.delay-200 {
  transition-delay: 200ms;
}

.delay-300 {
  transition-delay: 300ms;
}

.delay-500 {
  transition-delay: 500ms;
}

.delay-700 {
  transition-delay: 700ms;
}

.delay-1000 {
  transition-delay: 1000ms;
}

.opacity-0 {
  opacity: 0;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-50 {
  opacity: 0.50;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-100 {
  opacity: 0.100;
}

.font-100 {
  font-weight: 100;
}

.font-200 {
  font-weight: 200;
}

.font-300 {
  font-weight: 300;
}

.font-400 {
  font-weight: 400;
}

.font-500 {
  font-weight: 500;
}

.font-600 {
  font-weight: 600;
}

.font-700 {
  font-weight: 700;
}

.font-800 {
  font-weight: 800;
}

.font-900 {
  font-weight: 900;
}

.slide-up,
.slide-down {
  max-height: 0;
  overflow-y: hidden;
  -webkit-transition: max-height 0.5s ease-in-out;
  -moz-transition: max-height 0.5s ease-in-out;
  -o-transition: max-height 0.5s ease-in-out;
  transition: max-height 0.5s ease-in-out;
}

.slide-down {
  max-height: 10em;
}

.card-matrix .numbers {
  font-size: 1.8rem;
}

.cursor-pointer {
  cursor: pointer
}

.btn-xs {
  padding: 2px 5px;
  border-radius: 5px;
}

.text-underline-dotted {
  text-decoration-line: underline !important;
  text-decoration-style: dotted !important;
}

.text-blur {
  filter: blur(4px);
}

.text-blue {
  color: #0d6efd;
}

.text-indigo {
  color: #6610f2;
}

.text-purple {
  color: #6f42c1;
}

.text-pink {
  color: #d63384;
}

.text-red {
  color: #dc3545;
}

.text-orange {
  color: #fd7e14;
}

.text-yellow {
  color: #ffc107;
}

.text-green {
  color: #198754;
}

.text-teal {
  color: #20c997;
}

.text-cyan {
  color: #0dcaf0;
}

.text-light {
  color: rgb(107 114 128);
  opacity: 0.75;
}

.text-brown {
  color: brown;
}

.respect-linebreak {
  white-space: pre-line !important;
}

button,
input,
optgroup,
select,
textarea {
  font-family: 'ChakraPetch', sans-serif;
}

.sortable {
  white-space: nowrap !important;
}

.sortable>a {
  text-decoration-line: none;
}

.loading-spinner {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.loading {
  pointer-events: none;
  display: inline-block;
  aspect-ratio: 1 / 1;
  width: 1.5rem;
  background-color: currentColor;
  -webkit-mask-size: 100%;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: .25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: spinner-border .75s linear infinite;
  animation: spinner-border .75s linear infinite;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: .2em;
}

@keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

.spinner-grow {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: .75s linear infinite spinner-grow;
  animation: .75s linear infinite spinner-grow;
}

.spinner-grow-sm {
  width: 1rem;
  height: 1rem;
}

@keyframes spinner-grow {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0)
  }

  50% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}