@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

@import "@fortawesome/fontawesome-free/css/all.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body {
        @apply relative z-1 bg-whiten font-satoshi text-base font-normal text-body dark:text-bodydark dark:bg-boxdark-2;
    }
}

@layer components {
}

@layer utilities {
    /* Chrome, Safari and Opera */
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .no-scrollbar {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }

    .chat-height {
        @apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)];
    }

    .inbox-height {
        @apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)];
    }
}

/* third-party libraries CSS */

body{
    font-family: 'Inter', sans-serif !important;
}

.tableCheckbox:checked ~ div span {
    @apply opacity-100;
}

.tableCheckbox:checked ~ div {
    @apply border-primary bg-primary;
}

.apexcharts-legend-text {
    @apply !text-body dark:!text-bodydark;
}

.apexcharts-text {
    @apply !fill-body dark:!fill-bodydark;
}

.apexcharts-xcrosshairs {
    @apply !fill-stroke dark:!fill-strokedark;
}

.apexcharts-gridline {
    @apply !stroke-stroke dark:!stroke-strokedark;
}

.apexcharts-series.apexcharts-pie-series path {
    @apply dark:!stroke-transparent;
}

.apexcharts-legend-series {
    @apply !inline-flex gap-1.5;
}

.apexcharts-tooltip.apexcharts-theme-light {
    @apply dark:!border-strokedark dark:!bg-boxdark;
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    @apply dark:!border-strokedark dark:!bg-meta-4;
}

.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
    @apply dark:!border-meta-4 dark:!bg-meta-4 dark:!text-bodydark1;
}

.apexcharts-xaxistooltip-bottom:after {
    @apply !border-b-gray dark:!border-b-meta-4;
}

.apexcharts-xaxistooltip-bottom:before {
    @apply !border-b-gray dark:!border-b-meta-4;
}

.apexcharts-xaxistooltip-bottom {
    @apply !rounded !border-none !bg-gray !text-xs !font-medium !text-black dark:!text-white dark:!bg-meta-4;
}

.apexcharts-tooltip-series-group {
    @apply !pl-1.5;
}

.flatpickr-wrapper {
    @apply w-full;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    @apply !fill-primary;
}

.flatpickr-calendar.arrowTop:before {
    @apply dark:!border-b-boxdark;
}

.flatpickr-calendar.arrowTop:after {
    @apply dark:!border-b-boxdark;
}

.flatpickr-calendar {
    @apply !p-6 dark:!bg-boxdark dark:!text-bodydark dark:!shadow-8 2xsm:!w-auto;
}

.flatpickr-day {
    @apply dark:!text-bodydark dark:hover:!border-meta-4 dark:hover:!bg-meta-4;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    @apply !top-7 dark:!fill-white dark:!text-white;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
    @apply !left-7;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
    @apply !right-7;
}

span.flatpickr-weekday,
.flatpickr-months .flatpickr-month {
    @apply dark:!fill-white dark:!text-white;
}

.flatpickr-day.inRange {
    box-shadow: -5px 0 0 #F3F4F6,
    5px 0 0 #F3F4F6 !important;
    @apply dark:!shadow-7;
}

.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
    @apply !border-[#F3F4F6] !bg-[#F3F4F6] dark:!border-meta-4 dark:!bg-meta-4;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.selected,
.flatpickr-day.endRange {
    @apply dark:!text-white;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: #3c50e0;
    @apply !border-primary !bg-primary hover:!border-primary hover:!bg-primary;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
    box-shadow: -10px 0 0 #3c50e0;
}

.map-btn .jvm-zoom-btn {
    @apply flex h-7.5 w-7.5 items-center justify-center rounded border border-stroke bg-white px-0 pb-0.5 pt-0 text-2xl leading-none text-body hover:border-primary hover:bg-primary hover:text-white dark:border-strokedark dark:bg-meta-4 dark:text-bodydark dark:hover:border-primary dark:hover:bg-primary dark:hover:text-white;
}

.mapOne .jvm-zoom-btn {
    @apply !left-auto !top-auto !bottom-0;
}

.mapOne .jvm-zoom-btn.jvm-zoomin {
    @apply !right-10;
}

.mapOne .jvm-zoom-btn.jvm-zoomout {
    @apply !right-0;
}

.mapTwo .jvm-zoom-btn {
    @apply !bottom-0 !top-auto;
}

.mapTwo .jvm-zoom-btn.jvm-zoomin {
    @apply !left-0;
}

.mapTwo .jvm-zoom-btn.jvm-zoomout {
    @apply !left-10;
}

.taskCheckbox:checked ~ .box span {
    @apply opacity-100;
}

.taskCheckbox:checked ~ p {
    @apply line-through;
}

.taskCheckbox:checked ~ .box {
    @apply border-primary bg-primary dark:border-primary;
}

.custom-input-date::-webkit-calendar-picker-indicator {
    background: transparent;
}

.data-stats-slider-outer .swiper-button-next:after,
.data-stats-slider-outer .swiper-button-prev:after,
.carouselOne .swiper-button-next:after,
.carouselOne .swiper-button-prev:after,
.carouselThree .swiper-button-next:after,
.carouselThree .swiper-button-prev:after {
    @apply hidden;
}

.data-stats-slider-outer .swiper-button-next svg,
.data-stats-slider-outer .swiper-button-prev svg,
.carouselOne .swiper-button-next svg,
.carouselOne .swiper-button-prev svg,
.carouselThree .swiper-button-next svg,
.carouselThree .swiper-button-prev svg {
    @apply !size-auto;
}

.carouselOne .swiper-button-next,
.carouselOne .swiper-button-prev,
.carouselThree .swiper-button-next,
.carouselThree .swiper-button-prev {
    @apply h-12.5 w-12.5 rounded-full bg-white !text-body shadow-default dark:bg-meta-4 dark:!text-bodydark;
}

.data-stats-slider-outer .swiper-button-next,
.data-stats-slider-outer .swiper-button-prev {
    @apply top-1/2 h-11.5 w-11.5 rounded-full border border-stroke bg-white !text-black shadow-default dark:border-strokedark dark:bg-meta-4 dark:!text-white;
}

.data-stats-slider-outer .swiper-button-next.swiper-button-disabled,
.data-stats-slider-outer .swiper-button-prev.swiper-button-disabled {
    @apply hidden;
}

.data-stats-slider-outer .swiper-button-prev {
    @apply -left-[23px];
}

.data-stats-slider-outer .swiper-button-next {
    @apply -right-[23px];
}

.carouselTwo .swiper-pagination-bullet,
.carouselThree .swiper-pagination-bullet {
    @apply h-[5px] w-7.5 rounded-none bg-white/50;
}

.carouselTwo .swiper-pagination-bullet-active,
.carouselThree .swiper-pagination-bullet-active {
    @apply bg-white;
}

.carouselTwo .swiper-pagination,
.carouselThree .swiper-pagination {
    @apply xl:!bottom-8;
}

.data-table-common .datatable-search {
    @apply relative !ml-0 w-100 overflow-hidden rounded;
}

.data-table-one .datatable-search input {
    @apply h-[46px] w-full rounded border border-stroke bg-transparent px-5 outline-none focus:border-primary dark:border-strokedark dark:bg-meta-4 dark:focus:border-primary;
}

.data-table-common .datatable-selector {
    @apply relative z-20 inline-flex bg-transparent p-0 font-medium text-body outline-none dark:text-bodydark;
}

.data-table-common .datatable-top {
    @apply flex flex-col gap-4 border-b border-stroke px-7.5 py-4.5 after:hidden dark:border-strokedark sm:flex-row-reverse sm:items-center sm:justify-between sm:gap-x-4 sm:gap-y-0;
}

.data-table-common .datatable-dropdown label {
    @apply inline-flex items-center gap-2.5 font-medium capitalize text-black dark:text-white;
}

.datatable-table .datatable-sorter {
    @apply before:hidden after:hidden;
}

.datatable-table > thead > tr:first-child > th {
    @apply border-transparent px-2.5 pb-2.5 pt-9 font-medium;
}

.data-table-common .datatable-table > tbody > tr > td:first-child,
.data-table-common .datatable-table > thead > tr > th:first-child {
    @apply pl-8;
}

.data-table-common .datatable-table > tbody > tr > td:last-child,
.data-table-common .datatable-table > thead > tr > th:last-child {
    @apply pr-8;
}

.data-table-common .datatable-table > thead > tr:last-child > th {
    @apply !border-b border-stroke pb-6 dark:border-strokedark;
}

.data-table-common .datatable-table > thead > tr:last-child > th input {
    @apply h-[34px] w-full rounded border border-stroke bg-transparent px-3 text-sm outline-none focus:border-primary dark:border-strokedark dark:bg-meta-4 dark:focus:border-primary;
}

.data-table-common .datatable-table > tbody > tr {
    @apply hover:bg-primary hover:bg-opacity-5;
}

.data-table-one .datatable-table > tbody > tr > td:first-child {
    @apply text-primary dark:text-white;
}

.data-table-common .datatable-table > tbody > tr > td {
    @apply border-b border-stroke py-5 font-medium dark:border-strokedark;
}

.data-table-one .datatable-bottom {
    @apply flex flex-col gap-4 px-8 py-7 after:hidden sm:flex-row-reverse sm:items-center sm:justify-between sm:gap-0 sm:space-x-4;
}

.data-table-common .datatable-wrapper.no-footer .datatable-container {
    @apply border-none;
}

.data-table-common .datatable-info {
    @apply !m-0 font-medium;
}

.data-table-common .datatable-pagination {
    @apply !m-0;
}

.data-table-common .datatable-pagination a {
    @apply flex h-8 w-8 cursor-pointer items-center justify-center rounded p-0 font-medium text-body hover:bg-primary hover:text-white dark:text-bodydark;
}

.data-table-common .datatable-pagination .datatable-active a {
    @apply bg-primary text-white;
}

.data-table-common .datatable-pagination li.datatable-hidden {
    @apply !visible;
}

.data-table-two .datatable-bottom {
    @apply flex flex-col gap-4 px-8 py-7 after:hidden sm:flex-row sm:items-center sm:justify-between sm:gap-0 sm:space-x-4;
}

.data-table-two .datatable-search input {
    @apply h-11.5 w-full rounded border border-stroke bg-white px-5 outline-none focus:border-primary dark:border-strokedark dark:bg-meta-4 dark:focus:border-primary;
}

.rangeSliderCommon .noUi-target {
    @apply border-none bg-transparent shadow-none;
}

.rangeSliderCommon .noUi-connects {
    @apply h-1.5 rounded-full bg-stroke dark:bg-strokedark;
}

.rangeSliderCommon .noUi-connect {
    @apply h-1.5 rounded-full bg-primary;
}

.rangeSliderOne .noUi-horizontal .noUi-handle {
    @apply -top-2 h-5.5 w-5.5 rounded-full border-none bg-primary shadow-none cursor-pointer;
}

.rangeSliderTwo .noUi-horizontal .noUi-handle {
    @apply -top-2 h-6 w-6 rounded-full border-[6px] border-primary bg-white shadow-none cursor-pointer dark:bg-black;
}

.noUi-horizontal .noUi-handle:after,
.noUi-horizontal .noUi-handle:before {
    @apply hidden;
}

input[type='search']::-webkit-search-cancel-button {
    @apply appearance-none;
}

.custom-input-date::-webkit-calendar-picker-indicator {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
}

[x-cloak] {
    display: none !important;
}


.bg-forms{
    background-repeat: no-repeat;
    background-size: contain;
}


.font-inter{
    font-family: 'Inter', sans-serif !important;
}

.input-text{
    @apply block w-full border border-bodydark rounded shadow-sm border-solid  sm:text-sm p-1.5
}

.vti__dropdown{
    background-color: rgb(219, 234, 254) !important;
    padding: 6px !important;
}

.vti__input{
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.vue-tel-input.disabled input{
    background-color: aqua;
    background-color: rgb(219, 234, 254);
}

.vue-tel-input.disabled input{
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

.st0{
    fill:#0080C4;
    fill-opacity: 0.2;
    filter:drop-shadow(0px 0px 5px #888)
}
.st1{
    fill:#00ABE8;
    fill-opacity: 0.6;
    filter:drop-shadow(0px 0px 5px #888)
}

.btn-whatsapp{
    @apply bg-[#25D366] text-white hover:bg-[#25D366] hover:text-white pb-[3px] px-[5px] rounded mt-5 ml-[4px] pt-[4px];
}

.btn-email{
    @apply bg-[#00ABE8] text-white hover:bg-[#00ABE8] hover:text-white py-[0.3em] px-[9px] rounded mt-5 ml-[4px];
}

.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }

  /* Estilo del texto del tooltip */
  .tooltip .tooltip-text {
    visibility: hidden;
    width: auto;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.7em;
    line-height: 1.1em;

    /* Posicionamiento */
    position: absolute;
    bottom: 90%; /* Ajusta según la posición deseada */
    left: 50%;
    transform: translateX(-50%);

    /* Efecto de transición */
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 1;
  }

  /* Flecha del tooltip */
  .tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%; /* Ubica la flecha debajo del tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
  }

  /* Muestra el tooltip al pasar el ratón */
  .tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
  }

  
.validation input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #8a8a8a;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s, border-color 0.3s;
    margin-left: 8px;
}

/* Cambiamos el color de fondo cuando está marcado */
.validation input[type="checkbox"]:checked {
    background-color: #4caf50;
    border-color: #4caf50;
}

/* Agregamos una marca de verificación */
.validation input[type="checkbox"]:checked::after {
    content: "✔";
    font-size: 14px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.validation input[type="checkbox"]:focus {
    outline: none; /* Quitamos el borde azul por defecto */
    box-shadow: 0 0 3px 2px rgba(76, 175, 80, 0.5); /* Agregamos un efecto de sombra */
    border-color: #4caf50; /* Cambiamos el borde a verde */
}

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

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

/* Dashboard Custom styles */
.dashboard input[type="text"],
.dashboard input[type="password"],
.dashboard input[type="number"],
.dashboard input[type="email"],
.dashboard input[type="date"]{
    @apply block w-full border border-bodydark rounded shadow-sm border-solid sm:text-sm p-1.5 leading-none;
}

.dashboard input[type="email"]{
    @apply block w-full border border-bodydark rounded shadow-sm border-solid sm:text-sm p-1.5 leading-none;
}

.dashboard .vti__dropdown{
    background-color: rgb(219, 234, 254) !important;
    padding: 5px !important;
}

.dashboard .forms input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #8a8a8a;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s, border-color 0.3s;
    margin-left: 8px;
}

/* Cambiamos el color de fondo cuando está marcado */
.dashboard .forms input[type="checkbox"]:checked {
    background-color: #4caf50;
    border-color: #4caf50;
}

/* Agregamos una marca de verificación */
.dashboard .forms input[type="checkbox"]:checked::after {
    content: "✔";
    font-size: 14px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dashboard .forms input[type="checkbox"]:focus {
    outline: none; /* Quitamos el borde azul por defecto */
    box-shadow: 0 0 3px 2px rgba(76, 175, 80, 0.5); /* Agregamos un efecto de sombra */
    border-color: #4caf50; /* Cambiamos el borde a verde */
}

.dashboard .vti__input{
    padding-bottom: 6px;
    padding-top: 6px;
}


.separator{
    @apply border-t border-stroke dark:border-strokedark h-[2px] bg-slate-500 w-full my-6;
}

.small-separator{
    @apply border-t border-stroke dark:border-strokedark h-[2px] bg-slate-500 w-full my-3;
}


.pantone-card {
    background: #fff;
    display: grid;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 2px 4px #0001;
    border: 4px solid #fff;
    transition: box-shadow 0.27s ease-in-out, margin 0.3s ease-in-out;
    margin-right: 8px;
}

.pantone-card:hover {
    box-shadow: 0 18px 16px -15px #0008, 0 2px 4px #0001;
}

.pantone-card input[type=color] {
    display: inline-flex;
    vertical-align: bottom;
    border: none;
    border-radius: 10px;
    padding: 0;
    height: 30px;
    width: 100%;
    cursor: pointer;
}
.pantone-card input[type=color]::-webkit-color-swatch-wrapper {
    padding: 0;
}
.pantone-card input[type=color]::-webkit-color-swatch {
    border: 0;
    border-radius: 10px 10px 0 0;
}
.pantone-card input[type=color]::-moz-color-swatch {
    border: 0;
    border-radius: 10px 10px 0 0;
}
.pantone-card input[type=color] + output {
    display: block;
    background: #fff;
    font-size: 12px;
    padding: 5px;
    line-height: 1em;
    font-weight: bold;
    color: #333;
}

.dt-search .dt-input{
    height: 25px;
    font-size: 10pt;
}

.dt-search label{
    font-size: 12px;
    margin-top: -10px;
}

select.dt-input{
    background-position: right !important;
    height: 25px;
    line-height: 0.8em;
    font-size: 10pt;
    padding: 10pt;
    width: 40px;
}

input:where(:not([type])) {
    background: transparent;
    font-size: 0.8rem;
    line-height: 20px;
}

.vti__dropdown-list{
    color: #333;
}


.bg-login{
    background: rgb(0,2,128);
    background: linear-gradient(153deg, rgba(0,2,128,1) 0%, rgba(9,94,121,1) 43%, rgba(0,255,248,1) 100%);
    font-family: 'Inter', sans-serif;
}

/* Contenedor principal con degradado */
.onde {
    position:absolute;
    width: 100%;
    height:15vh;
    margin-bottom:-7px; /*Fix for safari gap*/
    min-height:100px;
    bottom: 7px;
  }
  
  
  /* Animation */
  
  .parallaxonde > use {
    animation: move-forever 50s cubic-bezier(.55,.5,.45,.5)     infinite;
  }
  .parallaxonde > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
  }
  .parallaxonde > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
  }
  .parallaxonde > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
  }
  .parallaxonde > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
  }
  @keyframes move-forever {
    0% {
     transform: translate3d(-90px,0,0);
    }
    100% { 
      transform: translate3d(85px,0,0);
    }
  }
  /*Shrinking for mobile*/
  @media (max-width: 768px) {
    .onde {
      height:40px;
      min-height:40px;
    }
  }


ul.ks-cboxtags {
    list-style: none;
    padding: 5px;
}
ul.ks-cboxtags li{
  display: inline;
}
ul.ks-cboxtags li label{
    display: inline-block;
    background-color: rgba(255, 255, 255, .9);
    border: 2px solid rgba(139, 139, 139, .3);
    color: #adadad;
    border-radius: 5px;
    white-space: nowrap;
    margin: 3px 0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: all .2s;
}

ul.ks-cboxtags li label {
    padding: 4px 8px;
    cursor: pointer;
}

ul.ks-cboxtags li label::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    padding: 2px 6px 2px 2px;
    content: "\f067";
    transition: transform .3s ease-in-out;
}

ul.ks-cboxtags li input[type="checkbox"]:checked + label::before {
    content: "\f00c";
    transform: rotate(-360deg);
    transition: transform .3s ease-in-out;
}

ul.ks-cboxtags li input[type="checkbox"]:checked + label {
    border: 2px solid #1bdbf8;
    background-color: #12bbd4;
    color: #fff;
    transition: all .2s;
}

ul.ks-cboxtags li input[type="checkbox"] {
  display: absolute;
}
ul.ks-cboxtags li input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}
ul.ks-cboxtags li input[type="checkbox"]:focus + label {
  border: 2px solid #12bbd4;
}

/*Checkbox*/
._checkbox {
    display: none;
  }
  
.checkTables label {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    width: 26px;
    height: 26px;
    margin: 0 auto;
    background-color: #335e6b;
    transform: translateY(-50%);
    border-radius: 50%;
    box-shadow: 0 2px 5px #b8cfff;
    cursor: pointer;
    transition: 0.2s ease transform, 0.2s ease background-color,
      0.2s ease box-shadow;
    overflow: hidden;
    z-index: 1;
  }
  
  .checkTables  label:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    width: 20px;
    height: 20px;
    margin: 0 auto;
    background-color: #fff;
    transform: translateY(-50%);
    border-radius: 50%;
    box-shadow: inset 0 7px 10px #4e4e4e3a;
    transition: 0.2s ease width, 0.2s ease height;
  }
  
  .checkTables  label:hover:before {
    width: 20px;
    height: 20px;
    box-shadow: inset 0 2px 5px #2e4b50c4;
  }
  
  .checkTables  label:active {
    transform: translateY(-50%) scale(0.9);
  }
  
  #tick_mark {
    position: absolute;
    top: -1px;
    right: 0;
    left: 0;
    width: 18px;
    height: 18px;
    margin: 0 auto;
    margin-left: 2px;
    transform: rotateZ(-40deg);
  }
  
  #tick_mark:before,
  #tick_mark:after {
    content: "";
    position: absolute;
    background-color: #fff;
    border-radius: 2px;
    opacity: 0;
    transition: 0.2s ease transform, 0.2s ease opacity;
  }
  
  #tick_mark:before {
    left: 0;
    bottom: 0;
    width: 5px;
    height: 10px;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
    transform: translateY(-68px);
  }
  
  #tick_mark:after {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
    transform: translateX(78px);
  }
  
  ._checkbox:checked + label {
    background-color: #089145;
    box-shadow: 0 2px 5px #92ff97;
  }
  
  ._checkbox:checked + label:before {
    width: 0;
    height: 0;
  }
  
  ._checkbox:checked + label #tick_mark:before,
  ._checkbox:checked + label #tick_mark:after {
    transform: translate(0);
    opacity: 1;
  }