html{
  font-size: 16px;
}
body{
  --bs-body-font-family: "Poppins", sans-serif;
}
ul,li{
  padding: 0;
  list-style: none;
}
img{
  user-select: none;
  -webkit-user-drag: none;
  -moz-user-drag: none;
}
i{
  display: inline-block;
}
a{
  cursor: pointer;
  vertical-align: middle;
}
h2{
  font-size: 30px;
}
h6, .h6{
  font-size: 18px;
}

.baskervville{
  font-family: "Baskervville";
}

/* Layout */
header{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
.navbar{
  --bs-navbar-padding-y: .5rem;
  width: 100%;
  background-color: rgb(var(--bs-light-rgb));
}
.navbar-nav {
  --bs-navbar-active-color: var(--primary);
  --bs-nav-link-color: initial;
  --bs-navbar-active-font-weight: 500;
  --bs-navbar-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: 0;
  --bs-nav-link-font-size: 18px;
  --bs-nav-link-font-weight: 300;
  --bs-nav-link-hover-color: var(--primary);
  gap: 1rem;
  padding: 1rem .5rem;
}
.navbar-nav .nav-link.active{
  font-weight: var(--bs-navbar-active-font-weight);
}
footer{
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
header + main{
  width: 100%;
  min-height: 100vh;
  padding-top: 75px;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 18px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: #F5F5F5;
  background-clip: padding-box;
  border-radius: 0;
  border: solid transparent;
  border-width: 16px 6px;
}
::-webkit-scrollbar-thumb:hover{
  background-color: #eee;
}
::-webkit-scrollbar-corner{
  width: 0;
}

/* Card */
.card{
  --bs-card-spacer-x: 1.25rem;
  --bs-card-spacer-y: 1.25rem;
  --bs-card-border-color: var(--border-color-lightblue);
  --bs-card-border-radius: 24px;
  --bs-card-title-spacer-y: 0;
  --bs-card-title-color: #ffffff;
  --bs-box-shadow: 0px 0px 40px #CFCFCF4D;
  overflow: auto;
}
.card-title {
  background-color: var(--primary);
}
.card-title + .card-body {
  padding-top: .5rem;
}

/* Grid */
.gx-5 {
  --bs-gutter-x: 2rem;
}

/* Button */
.btn{
  --bs-btn-border-radius: 100px;
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: .75rem;
  --bs-btn-font-size: 15px;
  --bs-btn-font-weight: 500;
  white-space: nowrap;
}
.btn-lg{
  --bs-btn-padding-y: .75rem;
  --bs-btn-font-size: 15px;
}
.btn-sm{
  --bs-btn-padding-y: .5rem;
  --bs-btn-font-size: 14px;
}
.btn-primary{
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color:  var(--primary);
  --bs-btn-hover-bg: var(--primary-hover);
  --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-active-bg: var(--primary-hover);
}
.btn-outline-primary{
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
}
.btn-info {
  --bs-btn-bg: #CDE9FF;
  --bs-btn-border-color:  #CDE9FF;
  --bs-btn-hover-bg: #b7dcf8;
  --bs-btn-hover-border-color: #b7dcf8;
  --bs-btn-active-bg: #b7dcf8;
  --bs-btn-disabled-color: #5a5a5a;
  --bs-btn-disabled-bg: #ededed;
  --bs-btn-disabled-border-color: #ededed;
}

/* Form */
.form-label,
.form-check-label {
  font-size: 14px;
}
.form-control {
  --input-padding-x: 20px;
  --bs-border-color: #DCDCDC;
  --bs-border-radius: 50rem;
  padding: .75rem var(--input-padding-x);
}
.form-control::placeholder {
  color: #B4B4B4;
}
.input-group{
  --input-padding-x: 20px;
  background-color: #F2F5F6;
  border: solid 1px #E4E5E73D;
  border-radius: 100px;
  align-items: center;
}
.input-group .form-control {
  --bs-body-bg: transparent;
  --bs-border-color: transparent;
  --bs-form-valid-border-color: transparent;
  border-radius: inherit !important;
  z-index: 1;
}
.input-group .form-control:not(:first-child) {
  padding-left: 56px;
}
.input-group .form-control:not(:last-child) {
  padding-right: 68px;
}
.input-group  > *:first-child:not(.form-control,:last-child),
.input-group  > *:last-child:not(.form-control,:first-child){
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 var(--input-padding-x);
  z-index: 9;
}

.icon-eye{
  margin-right: 0.95rem;
}

.form-switch .form-check-input {
  --bs-form-switch-bg: url(/assets/images/switch.svg);
  --bs-form-check-bg: rgba(120, 120, 128, 0.16);
  --bs-border-color: transparent;
  width: 44px;
  height: 28px;
  margin: 0;
}
.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="rgb(134,183,254)" xmlns="http://www.w3.org/2000/svg"><path d="M25.4608 14.0069C25.4608 7.46202 20.1551 2.15637 13.6103 2.15637C7.06542 2.15637 1.75977 7.46202 1.75977 14.0069C1.75977 20.5517 7.06542 25.8574 13.6103 25.8574C20.1551 25.8574 25.4608 20.5517 25.4608 14.0069Z"/></svg>');
  --bs-form-check-bg: transparent;
}
.form-switch .form-check-input:checked {
  --bs-form-switch-bg: url(/assets/images/switch-checked.svg);
  background-color: var(--primary);
  border-color: var(--primary);
}
.form-check-input {
  --bs-border-width: 2px;
  --bs-border-color: #9E9E9E;
  font-size: 1.25rem;
}
.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

.invalid-feedback {
  position: absolute;
  top: 100%;
  margin-top: .125rem;
  font-size: 13px;
}
.form-control.is-invalid,
.form-control.is-valid {
  background-position: right .875rem center;
}
.form-control.is-valid {
  border-color: transparent;
}
.form-control.is-invalid:not(:last-child),
.form-control.is-valid:not(:last-child) {
  background-position: right 3.25rem center;
}

/* Tooltip */
.tooltip{
  --bs-tooltip-padding-x: 1.25rem;
  --bs-tooltip-padding-y: 1rem;
  --bs-tooltip-border-radius: .75rem;
  --bs-tooltip-max-width: 220px;
}
.tooltip-inner{
  text-align: left;
}

/* Table */
.table {
  vertical-align: middle;
  margin-bottom: -1px;
}
.bg-info .table{
  --bs-table-bg: rgb(var(--bs-info-rgb));
}
.table-main {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 18px;
  vertical-align: middle;
}
.table-main thead {
  display: none;
}
.table-main > * > tr > * {
  font-size: 18px;
  border-style: solid;
  border-width: 1px;
  padding: .5rem 1rem;
  background-color: #ffffff;
  border-color: #D4ECFF;
  border-radius: 1.5rem;
}
.table-main > thead > tr > th {
  font-weight: 500;
  background-color: #F7FCFF;
  border-color: #E6F4FF;
  border-width: 1px 0;
}

/* Pagination */
.pagination {
  --bs-pagination-font-size: 15px;
  --bs-pagination-color: var(--bs-body-color);
  --bs-pagination-hover-color: #ffffff;
  --bs-pagination-active-bg: var(--primary);
  --bs-pagination-hover-bg: var(--primary);
  --bs-pagination-border-color: #A2A2A2;
  --bs-pagination-hover-border-color: var(--primary);
  --bs-pagination-active-border-color: var(--primary);
  --bs-pagination-border-radius: 8px;
  gap: 16px;
}
.page-link {
  line-height: 1.3;
  border-radius: var(--bs-pagination-border-radius);
}

/* Tab */
.nav-underline .nav-link {
  --bs-nav-underline-border-width: 0;
  --bs-nav-link-padding-y: .75rem;
  --bs-nav-link-font-size: inherit;
  --bs-navbar-active-font-weight: 600;
  position: relative;
}
.nav-underline .nav-link.active {
  font-weight: var(--bs-navbar-active-font-weight);
}
.nav-underline .nav-link.active::after {
  display: block;
  content: '';
  width: 100%;
  height: 5px;
  border-radius: 50rem;
  background-color: var(--primary);
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
}

/* Modal */
.modal {
  --bs-modal-header-padding-x: 0;
  --bs-modal-header-padding-y: 0;
  --bs-modal-margin: 1.25rem;
  --bs-modal-header-padding: 24px 20px 16px;
}
.modal-header{
  --bs-modal-header-border-width: 0;
}
.modal-content {
  --bs-modal-border-radius: 36px;
  --bs-modal-padding: 0 20px 40px;
}
.modal .btn-close{
  --bs-btn-close-bg: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="rgb(22, 107, 172)"/><path d="M8.53317 25.3334L6.6665 23.4667L14.1332 16L6.6665 8.53335L8.53317 6.66669L15.9998 14.1334L23.4665 6.66669L25.3332 8.53335L17.8665 16L25.3332 23.4667L23.4665 25.3334L15.9998 17.8667L8.53317 25.3334Z" fill="white"/></svg>');
  --bs-btn-close-opacity: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent var(--bs-btn-close-bg) center/32px auto no-repeat;
  margin: 20px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 9;
}
.modal-backdrop{
  --bs-backdrop-bg: #002C4E38;
  --bs-backdrop-opacity: 1;
  backdrop-filter: blur(4px);
}

/* Dropdown */
.dropdown-menu {
  --bs-dropdown-border-radius: 1rem;
  --bs-dropdown-padding-y: 0px;
  --bs-dropdown-spacer: 8px;
  box-shadow: 0 40px 80px -12px #00102730;
}

/* Globle */
.tips {
  color: var(--primary);
  font-size: 14px;
  font-style: italic;
  line-height: 1.25;
  display: flex;
}
.tips-icon{
  margin-right: 2px;
  vertical-align: top;
}
.tips-icon svg{
  vertical-align: initial;
}

.select2-selection {
  width: 90px;
  display: flex;
  align-items: center;
  height: 100%;
  cursor: pointer;
  padding: .25rem;
}
.select2-selection::after {
  content:'';
  display: block;
  width: 1px;
  height: 50%;
  background-color: var(--bs-border-color);
  margin-left: 1rem;
}
.select2-selection__arrow {
  display: block;
  width: 13px;
  height: 13px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  margin-left: auto;
  transition: all .2s ease-in-out;
  flex-shrink: 0;
}
.select2-container--open .select2-selection__arrow {
  transform: rotateX(180deg);
}
.select2-dropdown {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: .75rem;
  box-shadow: 0px 16px 40px -16px #CFCFCF80, 0px 8px 40px -8px #CFCFCF4D;
  overflow: hidden;
}
.select2-search__field {
  width: 100%;
  border: none;
  outline: none;
  border-bottom: solid 1px var(--bs-border-color);
  padding: .75rem .75rem .75rem 3rem;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='currentColor' d='M10.77 18.3a7.53 7.53 0 1 1 7.53-7.53a7.53 7.53 0 0 1-7.53 7.53m0-13.55a6 6 0 1 0 6 6a6 6 0 0 0-6-6'/%3e%3cpath fill='currentColor' d='M20 20.75a.74.74 0 0 1-.53-.22l-4.13-4.13a.75.75 0 0 1 1.06-1.06l4.13 4.13a.75.75 0 0 1 0 1.06a.74.74 0 0 1-.53.22'/%3e%3c/svg%3e") no-repeat .75rem center/22px 22px;
}
.select2-results {
  max-height: 200px;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.select2-results::-webkit-scrollbar {
  display: none; 
}
.select2-results__option {
  font-size: .875rem;
  padding: .5rem .75rem;
}
.select2-results__option--highlighted,
.select2-results__option--selected {
  background-color: #F1F5FF;
}

/* Styles */
.avatar {
  --bs-border-color: #5AB7FF;
  width: 40px;
  height: 40px;
  background-color: #D3ECFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  color: #004B84;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile {
  --avatar-sizing: 130px;
  --avatar-spacing: calc(0.5 * var(--avatar-sizing));
}
.profile .avatar {
  --bs-border-width: 4px;
  width: var(--avatar-sizing);
  height: var(--avatar-sizing);
  position: absolute;
  left: calc(50% - var(--avatar-spacing));
  top: calc(-1 * var(--avatar-spacing));
  z-index: 1;
  overflow: initial;
}
/* .profile .avatar::after {
  content: url('data:image/svg+xml,<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 38C29.4934 38 38 29.4934 38 19C38 8.50659 29.4934 0 19 0C8.50659 0 0 8.50659 0 19C0 29.4934 8.50659 38 19 38Z" fill="rgb(22, 107, 172)"/><path d="M21.8213 10.1807C21.9858 10.2012 22.1353 10.2918 22.2285 10.4316L23.8906 12.9258H27.25C27.8886 12.9258 28.5017 13.1794 28.9531 13.6309C29.4044 14.0822 29.6581 14.6947 29.6582 15.333V25.417C29.6581 26.0553 29.4044 26.6678 28.9531 27.1191C28.5016 27.5708 27.8885 27.8242 27.25 27.8242H10.75C10.1117 27.8241 9.49932 27.5707 9.04785 27.1191C8.59643 26.6677 8.34285 26.0554 8.34277 25.417V15.333C8.34285 14.6946 8.59643 14.0823 9.04785 13.6309C9.49925 13.1795 10.1116 12.9259 10.75 12.9258H14.1104L15.7725 10.4316C15.8789 10.272 16.0581 10.1759 16.25 10.1758H21.75L21.8213 10.1807ZM14.8945 13.8184C14.788 13.9781 14.609 14.0742 14.417 14.0742H10.75C10.4162 14.0743 10.0965 14.2073 9.86035 14.4434C9.62429 14.6794 9.49129 14.9992 9.49121 15.333V25.417C9.49129 25.7508 9.62429 26.0706 9.86035 26.3066C10.0964 26.5427 10.4162 26.6757 10.75 26.6758H27.25C27.5841 26.6758 27.9046 26.5428 28.1406 26.3066C28.3766 26.0706 28.5097 25.7507 28.5098 25.417V15.333C28.5097 14.9993 28.3766 14.6794 28.1406 14.4434C27.9045 14.2072 27.584 14.0742 27.25 14.0742H23.584C23.3921 14.0742 23.2129 13.978 23.1064 13.8184L21.4434 11.3242H16.5576L14.8945 13.8184ZM19.001 15.6758C21.3428 15.6763 23.2412 17.5751 23.2412 19.917C23.2411 22.2587 21.3427 24.1568 19.001 24.1572C16.659 24.1572 14.7599 22.259 14.7598 19.917C14.7598 17.5748 16.6589 15.6758 19.001 15.6758ZM19.001 16.8242C17.2931 16.8242 15.9082 18.209 15.9082 19.917C15.9084 21.6248 17.2932 23.0088 19.001 23.0088C20.7085 23.0083 22.0926 21.6244 22.0928 19.917C22.0928 18.2093 20.7086 16.8247 19.001 16.8242Z" fill="rgb(242, 242, 242)"/></svg>');
  position: absolute;
  right: -4px;
  top: -4px;
} */
.profile .card {
  padding-top: var(--avatar-spacing);
  margin-top: var(--avatar-spacing);
  position: relative;
  overflow: initial;
}
.profile > div:last-child .card {
  padding-top: .5rem;
  margin-top: 1.25rem;
}

.area-welcome{
  grid-area: welconme;
}
.area-summary{
  grid-area: summary;
}
.area-devices{
  grid-area: devices;
}
.area-code{
  grid-area: code;
}
.grid-layout .card{
  height: 100%;
}
.area-welcome .card{
  font-size: 18px;
  background: url(../images/img-01.jpg) center/cover no-repeat;
}
.area-summary .btn {
  width: 50%;
}
.area-devices .table-main {
  border-collapse: collapse;
}
.area-devices .table-main td {
  border-color: #D0D0D0;
  border-width: 1px 0 0;
  padding: .75rem 0;
  border-radius: 0;
}
.area-devices .nav {
  column-gap: 1rem;
}
.area-devices .nav .nav-link {
  --bs-nav-link-font-size: calc(1.275rem + .3vw);
  --bs-nav-link-font-weight: 400;
  --bs-navbar-active-font-weight: 500;
  --bs-nav-link-color: var(--bs-secondary-text-emphasis);
  padding: 0 .5rem .5rem;
}
.area-code .input-group {
  width: 100%;
}
.modal-plan {
  --bs-modal-padding: 0 .75rem 1.5rem;
}
.modal-plan.table {
  text-align: center;
}
.modal-plan.table th {
  padding: 0;
  font-weight: 400;
}
.modal-plan.table td {
  padding: .75rem .375rem;
}
.modal-plan.table .card {
  --bs-card-bg: #E1F2FF;
  --bs-card-border-color: #8FCEFF;
  font-size: 24px;
  font-weight: 500;
  color: var(--primary);
  padding: 2px  0;

}
.modal-plan.table .btn {
  --bs-btn-padding-x: 1.75rem;
}

.login {
  min-height: 100vh;
  overflow: hidden;
  padding: 20px;
}
.area-form {
  grid-area: form;
}
.area-social {
  grid-area: social;
  width: 100%;
  height: 55vw;
  border-radius: 1.25rem;
  background: var(--login-bg) center/cover no-repeat;
}
.area-copyright {
  grid-area: copyright;
  font-size: 14px;
  color: #A8A8A8;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.area-copyright a:not(:hover) {
  color: inherit;
  text-decoration: none;
}
.area-form h1{
  font-family: 'branch';
  font-size: calc(24px + 2vw);
}
.area-form .card {
  --bs-card-cap-padding-y: 0;
  --bs-card-cap-padding-x: 0;
  --bs-card-border-width: 0;
  --bs-card-cap-bg: #F1F5FF;
  --bs-card-border-radius: 28px;
  width: 100%;
  max-width: 100%;
  box-shadow: 0px 0px 84px #00000012;
}
.area-form .card-header {
  border: solid 1px #B9CFFF;
  border-radius: var(--bs-card-border-radius) var(--bs-card-border-radius) 0 0;
  font-size: 1rem;
  font-weight: 500;
}
.area-form .nav-underline {
  --bs-nav-link-color: var(--bs-body-color);
  --bs-nav-underline-gap: 0;
  flex-wrap: nowrap;
}
.area-form .nav-underline .nav-link {
  --bs-navbar-active-font-weight: 500;
  --bs-nav-link-font-weight: 300;
  flex: 1;
  padding: .75rem;
  text-align: center;
  white-space: nowrap;
}
.area-form .card-body {
  border: solid 1px #E9EDEE;
  border-radius: 0 0 var(--bs-card-border-radius) var(--bs-card-border-radius);
}
.login .form,
.login .card-header > *:not(.nav) {
  width: 100%;
  max-width: 380px;
  margin: auto;
}
.login .card-header > *:not(.nav) {
  padding-left: 1.25rem;
}
.form-verification {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.otp {
  padding: 4vw 0;
  border-radius: 16px;
  border: solid 1px #3573FF29;
  background-color: #F4F7FF !important;
  font-size: 36px;
  font-weight: 300;
  color: var(--primary) !important;
  text-align: center;
}
.icon-eye{
  width: 22px;
  height: 22px;
  cursor: pointer;
  background-image: url('data:image/svg+xml,<svg width="22" height="22" viewBox="0 0 24 24" fill="rgb(158, 169, 170)" xmlns="http://www.w3.org/2000/svg"><path d="M11.9999 16.3299C9.60992 16.3299 7.66992 14.3899 7.66992 11.9999C7.66992 9.60992 9.60992 7.66992 11.9999 7.66992C14.3899 7.66992 16.3299 9.60992 16.3299 11.9999C16.3299 14.3899 14.3899 16.3299 11.9999 16.3299ZM11.9999 9.16992C10.4399 9.16992 9.16992 10.4399 9.16992 11.9999C9.16992 13.5599 10.4399 14.8299 11.9999 14.8299C13.5599 14.8299 14.8299 13.5599 14.8299 11.9999C14.8299 10.4399 13.5599 9.16992 11.9999 9.16992Z"/><path d="M12.0001 21.02C8.24008 21.02 4.69008 18.82 2.25008 15C1.19008 13.35 1.19008 10.66 2.25008 8.99998C4.70008 5.17998 8.25008 2.97998 12.0001 2.97998C15.7501 2.97998 19.3001 5.17998 21.7401 8.99998C22.8001 10.65 22.8001 13.34 21.7401 15C19.3001 18.82 15.7501 21.02 12.0001 21.02ZM12.0001 4.47998C8.77008 4.47998 5.68008 6.41998 3.52008 9.80998C2.77008 10.98 2.77008 13.02 3.52008 14.19C5.68008 17.58 8.77008 19.52 12.0001 19.52C15.2301 19.52 18.3201 17.58 20.4801 14.19C21.2301 13.02 21.2301 10.98 20.4801 9.80998C18.3201 6.41998 15.2301 4.47998 12.0001 4.47998Z"/></svg>');
}
.icon-eye.show{
  background-image: url('data:image/svg+xml,<svg width="22" height="22" viewBox="0 0 24 24" fill="rgb(158, 169, 170)" xmlns="http://www.w3.org/2000/svg"><path d="M21.4704 1.47013C21.7604 1.18024 22.2409 1.18017 22.5309 1.47013C22.8203 1.76002 22.8203 2.23979 22.5309 2.52969L10.0006 15.0599L2.52992 22.5296C2.3801 22.6794 2.1904 22.7501 2.00062 22.7503C1.81072 22.7503 1.62032 22.6794 1.47035 22.5296C1.1805 22.2396 1.18041 21.76 1.47035 21.47L4.84437 18.0941C3.88155 17.2285 3.01141 16.1909 2.26039 15.0003C1.20042 13.3504 1.20049 10.6604 2.26039 9.00036C4.70031 5.1805 8.24978 2.98002 11.9996 2.97989C14.0885 2.97989 16.1498 3.66615 17.9791 4.95937L21.4704 1.47013ZM11.9996 4.47988C8.76979 4.48002 5.68008 6.4201 3.52016 9.80993C2.77016 10.9799 2.77016 13.0198 3.52016 14.1898C4.22367 15.2873 5.02532 16.2424 5.9059 17.0335L8.4557 14.4837C7.94519 13.759 7.67062 12.8981 7.67055 12.0003C7.67055 9.61036 9.61062 7.67029 12.0006 7.67029C12.8983 7.67043 13.7594 7.94498 14.484 8.45544L16.901 6.03749C15.3793 5.01496 13.6939 4.47988 11.9996 4.47988ZM12.0006 9.17028C10.4406 9.17028 9.17055 10.4404 9.17055 12.0003C9.17061 12.5002 9.30075 12.9799 9.54066 13.3998L13.4 9.5404C12.9802 9.30052 12.5004 9.1704 12.0006 9.17028Z"/><path d="M12.0001 21.02C10.6701 21.02 9.37006 20.75 8.12006 20.22C7.74006 20.06 7.56006 19.62 7.72006 19.24C7.88006 18.86 8.32006 18.68 8.70006 18.84C9.76006 19.29 10.8701 19.52 11.9901 19.52C15.2201 19.52 18.3101 17.58 20.4701 14.19C21.2201 13.02 21.2201 10.98 20.4701 9.81C20.1601 9.32 19.8201 8.85 19.4601 8.41C19.2001 8.09 19.2501 7.62 19.5701 7.35C19.8901 7.09 20.3601 7.13 20.6301 7.46C21.0201 7.94 21.4001 8.46 21.7401 9C22.8001 10.65 22.8001 13.34 21.7401 15C19.3001 18.82 15.7501 21.02 12.0001 21.02Z"/><path d="M12.6901 16.27C12.3401 16.27 12.0201 16.02 11.9501 15.66C11.8701 15.25 12.1401 14.86 12.5501 14.79C13.6501 14.59 14.5701 13.67 14.7701 12.57C14.8501 12.16 15.2401 11.9 15.6501 11.97C16.0601 12.05 16.3301 12.44 16.2501 12.85C15.9301 14.58 14.5501 15.95 12.8301 16.27C12.7801 16.26 12.7401 16.27 12.6901 16.27Z"/></svg>');
}

.list-style > li{
  display: flex;
  align-items: center;
}
.list-style > li::before {
  content: '';
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: var(--primary);
  margin-right: 6px;
}

.payment .method-item {
  --bs-card-border-radius: 36px;
  width: 100%;
  padding: 1rem;
  flex-direction: row;
  align-items: center;
  text-decoration: none;
  transition: box-shadow 0.3s ease-in-out;
  position: relative;
}
.payment .method-item svg{
  height: 28px;
}
.payment .method-item.selected {
  outline: solid 4px #7EC7FF;
  border-color: #7EC7FF;
}
.payment .method-item.selected::after {
  display: block;
  width: 25px;
  height: 25px;
  content: url('data:image/svg+xml,<svg width="25" height="25" viewBox="0 0 25 25" fill="rgb(75, 177, 255)" xmlns="http://www.w3.org/2000/svg"><path d="M12.3036 0.675659C5.83742 0.675659 0.546875 5.9662 0.546875 12.4324C0.546875 18.8986 5.83742 24.1892 12.3036 24.1892C18.7698 24.1892 24.0604 18.8986 24.0604 12.4324C24.0604 5.9662 18.7698 0.675659 12.3036 0.675659ZM9.95228 18.3108L4.0739 12.4324L5.7316 10.7747L9.95228 14.9836L18.8757 6.06025L20.5334 7.72971L9.95228 18.3108Z"/></svg>');
  top: 1rem;
  right: 1.25rem;
  margin-left: auto;
}
.payment .method-item:hover {
  --bs-box-shadow: 0px 8px 48px -8px #9b9b9b4d;
}
.notification-list {
  width: 420px;
  padding: .25rem 1.25rem;
  margin: 0;
}
.notification-list li {
  display: flex;
  gap: 10px;
  border-radius: 10px;
  padding: 14px;
}
.notification-list li:nth-child(2n-1) {
  background-color: #7E7E7E21;
}
.notification-list .rounded-circle {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.notification-list .rounded-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.notification-list h6 {
  font-size: 14px;
}
.notification-list p {
  font-size: 12px;
}
.notification-list span {
  font-size: 10px;
}

.font-branch{
  font-family: 'branch';
}

/* Swiper */
.swiper{
  --swiper-pagination-bullet-size: .75rem;
  --swiper-pagination-bullet-horizontal-gap: .5rem;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}
.swiper-slide {
  height: auto;
  width: 78vw;
}

@media (min-width: 768px) {
  ::-webkit-scrollbar {
    width: 30px;
  }
  ::-webkit-scrollbar-thumb {
    border-width: 16px 12px;
  }

  /* Card */
  .card {
    --bs-card-spacer-x: 1rem;
    --bs-card-spacer-y: 1rem;
  }

  /* Swiper */
  .swiper {
    margin-left: 0;
    margin-right: 0;
  }
  .swiper-slide {
    width: auto;
  }
  .modal{
    --bs-modal-header-padding: 24px 44px 16px;
  }
  .modal-content {
    --bs-modal-padding: 0 44px 24px;
  }

  /* Table */
  .table thead,
  .table-main thead {
    display: table-header-group !important;
  }
  .table-main {
    border-spacing: 0 10px;
  }
  .table-main > * > tr > * {
    padding: .5rem 1.5rem;
    border-left-width: 0;
    border-right-width: 0;
    border-radius: 0;
  }
  .table-main > tbody > tr > td {
    border-color: #EAEDEF;
    font-size: 1rem;
  }
  .table-main > * > tr > *:first-child {
    border-radius: .75rem 0 0 .75rem;
    border-left-width: 1px !important;
  }
  .table-main > * > tr > *:last-child {
    border-radius: 0 .75rem .75rem 0;
    border-right-width: 1px !important;
  }
  .area-devices .table-main {
    border-collapse: separate;
    margin-bottom: 0;
  }
  .area-devices .table-main td {
    border-width: 1px 0;
    border-color: #EAEDEF;
    padding: .5rem 1.5rem;
  }
  .area-devices .table-main > tbody td {
    background-color: #F9FAFA;
  }

  .payment .method-item {
    height: 145px;
    flex-direction: column;
    justify-content: center;
  }
  .payment .method-item svg{
    height: 48px;
  }
  .payment .method-item.selected::after {
    position: absolute;
  }
  .modal-plan {
    --bs-modal-padding: 0 2.5rem 1rem;
  }
  .modal-plan.table {
    margin-left: -1rem;
  }
  .modal-plan.table td {
    padding: .75rem 1rem;
  }
}
@media (min-width: 992px){

  .btn {
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-size: 14px;
  }
  .btn-lg {
    --bs-btn-padding-y: .75rem;
    --bs-btn-font-size: 15px;
  }

  /* Layout */
  .navbar{
    --bs-navbar-padding-y: .8rem;
    background-color: #ffffff;
    box-shadow: 0px 0px 32px 0px #CFCFCF2E;
  }
  .navbar-nav{
    gap: 35px;
    padding: 0 1rem;
  }
  header + main{
    padding-top: 80px;
  }
  .navbar-brand img {
    width: auto;
    height: 42px;
  }


  /* Styles */
  .login{
    padding: 8px;
    display: grid;
    grid-template-areas: "form social" "copyright social";
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
  }
  .area-social{
    height: 100%;
    /* grid-row: auto / span 1; */
    border-radius: 40px 0 40px 0;
  }
  .area-form h1{
    font-size: 40px;
  }
  .area-form .card{
    --bs-card-border-radius: 36px;
    width: 500px;
    overflow: hidden;
  }

  .area-form .card-header {
    font-size: 18px;
  }
  .area-form .card-body {
    max-height: calc(100vh - 360px);
    overflow: auto;
  }
  .area-form .nav-underline .nav-link {
    --bs-navbar-active-font-weight: 600;
    padding: 12px 24px;
  }
  .login .card-header > *:not(.nav) {
    padding-left: 0;
  }

  .grid-layout{
    display: grid;
    gap: 30px;
    grid-template-areas:"welconme summary" "devices code";
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 5fr 3fr;
    gap: 22px 26px;
  }
  .area-welcome{
    grid-row: auto / span 2;
  }
  .area-summary{
    grid-row: auto / span 3;
  }
  .area-devices{
    grid-row: auto / span 4;
  }
  .area-code{
    grid-row: auto / span 3;
  }
  .area-summary .btn {
    width: 150px;
  }
  .area-code .input-group {
    width: auto;
  }
  .area-code .btn {
    max-width: 120px;
  }
  .area-devices .btn {
    max-width: 168px;
  }
  .area-devices .nav {
    column-gap: 1.5rem;
  }
  .area-devices .nav .nav-link {
    --bs-nav-link-font-size: 1.5rem;
  }

  .otp {
    width: 5rem;
    padding: 1.375rem 0;
  }
  .profile {
    --bs-gutter-x: 7rem;
  }
  .profile > div:last-child .card {
    padding-top: var(--avatar-spacing);
    margin-top: var(--avatar-spacing);
  }
}



.datepicker td.active {
  background-color: #0d6efd !important;
  color: white !important;
  border-radius: 50% !important;
}

.datepicker td,
.datepicker th {
  text-align: center;
  padding: 6px 10px;
  font-size: 13px;
}

.weekend-date {
  color: #dc3545 !important;
}

[data-bs-theme=dark] .datepicker.dropdown-menu {
  background-color: var(--bs-dropdown-bg);
}

[data-bs-theme=dark] .datepicker table td.day:hover {
  background: var(--bs-tertiary-bg);
}

#paymentSuccessOverlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.4);

  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
#sendSuccessOverlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.4);

  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.success-card {
  pointer-events: none;
}
.success-card .card {
  pointer-events: auto;
}

.notification-item {
  background-color: transparent !important; 
  cursor: pointer; 
}
.notification-item:hover {
  background-color: #f0f0f0 !important;
}

.notification-unread h6 {
  font-weight: bold;
  color: #0d6efd;
  cursor: pointer;
}

.notification-read h6 {
  font-weight: normal;
  color: #6c757d;
}

.notification-read p {
  color: #6c757d;
}

.notif-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #0d6efd;
  border-radius: 50%;
}

input[type="password"]::-ms-reveal {
  display: none;
}

input[type="password"]::-webkit-outer-spin-button,
input[type="password"]::-webkit-inner-spin-button,
input[type="password"]::-webkit-reveal {
  display: none;
}

.copy-tip {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 16px;
  display: none;
  white-space: nowrap;
  z-index: 100;
}


.copied-flash {
  animation: copiedFlash 0.8s ease;
}
@keyframes copiedFlash {
  0%   { background-color: #fff3cd; }
  100% { background-color: transparent; }
}

.logout-link {
  display: block;                 
  padding: .5rem 1rem;            
  border-radius: .5rem;
  transition: background-color .15s ease-in-out;
}

.logout-link:hover,
.logout-link:focus {
  background-color: rgba(22, 107, 172, 0.08);  
  text-decoration: none;
  outline: none;
}


/* Shows the invalid border and icon */
input:invalid {
  /*border-color: #dc3545;  Red border for invalid input */
}

input:valid {
  /*border-color: #28a745;  Green border for valid input */
}


/* ========= Chub Cay – Full Authorization exact look ========= */
#smsAuthModal.cc-auth .modal-dialog{
  --bs-modal-width: 420px;                
}

#smsAuthModal.cc-auth .modal-content{
  border-radius: 12px;                     
  border: 1px solid #E9EEF2;               
  box-shadow: 0 10px 28px rgba(16,24,40,.12);
  overflow: hidden;                         
  font-family: "Instrument Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
}

#smsAuthModal.cc-auth .modal-header,
#smsAuthModal.cc-auth .modal-footer{
  display: flex;
  align-items: center;          
  min-height: 56px;            
  padding: 12px 16px;           
}

#smsAuthModal.cc-auth .modal-title{
  margin: 0;                   
  line-height: 1.2;
}

#smsAuthModal.cc-auth .btn-close{
  margin-left: auto;            
  opacity: .6;
}

#smsAuthModal.cc-auth .modal-header{ border-bottom: 1px solid #E5E7EB; }
#smsAuthModal.cc-auth .modal-footer{ border-top: 1px solid #E5E7EB; }

#smsAuthModal.cc-auth .modal-body{
  padding: 12px 16px;           
  color: #4B5563;
  font-size: 14px;
  line-height: 1.6;
}
#smsAuthModal.cc-auth .modal-body p{ margin: 10px 0; }
#smsAuthModal.cc-auth .modal-body p:first-child{ margin-top: 0; }
#smsAuthModal.cc-auth .modal-body p:last-child{ margin-bottom: 0; }

#smsAuthModal.cc-auth .modal-body ul{
  list-style: disc !important;
  list-style-position: outside;
  margin: 6px 0 10px 0;
  padding-left: 1.15rem;        
}
#smsAuthModal.cc-auth .modal-body li{
  margin: 6px 0;                
}

#smsAuthModal.cc-auth .btn-soft{
  background: #FFF;
  border: 1px solid #D0D5DD;
  color: #344054;
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 14px;
}
#smsAuthModal.cc-auth .btn-soft:hover{
  background: #F3F4F6;
  border-color: #C9CDD3;
}

.phone-cc-wrapper .select2-container {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  z-index: 1061;          
}

.select2-container--open .select2-dropdown {
  z-index: 1062 !important; 
}
/* Fix: avoid any rotation/skew on QR in mobile & desktop */
#qrCodeContainer img,
#qrCodeContainer canvas,
#qrCodeContainer svg {
  transform: none !important;
  rotate: 0 !important;               
  -webkit-transform: none !important; 
  transform-origin: center center !important;
  display: block;
  margin: 0 auto;                     
  image-rendering: pixelated;         
}

.share-warning {
color: #a00000; 
    font-weight: bold;
    font-size: 0.9em;
    padding: 10px;
    border-radius: 4px;
    margin: 15px 0;
    text-align: center;
}