body {
  background-image: url('../images/background.png.webp');
  background-attachment: fixed;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

img {
  height: 1rem;
  width: 1rem;
}
main {
  padding: 20px 0px 30px;
}

.box-dashboard .dashboard-title {
  color: var(--color-secondary);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  user-select: none;
}

.box-dashboard .welcome-title {
  color: var(--color-secondary);
  font-size: 27px;
  font-weight: 300;
  letter-spacing: 2px;
  user-select: none;
}

.box-planSelectionDropdown #planSelectMenuButton {
  background: linear-gradient(266deg, rgb(141, 142, 254) 0%, rgb(148, 129, 246) 100%) !important;
  border-radius: 5px;
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 1px;
  padding: 12px 24px;
  text-align: left;
  width: 100%;
}

.box-planSelectionDropdown .dropdown-menu {
  margin: 0px;
  padding: 0px;
  width: 100%;
}

.box-planSelectionDropdown #planSelectMenuButton img,
.box-planSelectionDropdown .dropdown-menu img {
  margin-right: 12px;
  max-width: 18px;
}

.box-planSelectionDropdown .dropdown-toggle::after {
  background-color: var(--color-discord);
  background-image: url(../images/dropdown.svg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 20px;
  border: 0px;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translate(0px, -50%);
}

.box-planSelectionDropdown .dropdown-item {
  background: linear-gradient(266deg, rgb(141, 142, 254) 0%, rgb(148, 129, 246) 100%);
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 1px;
  padding: 12px 24px;
}

.box-planSelectionDropdown .dropdown-item:hover {
  background: var(--color-discord);
}

.box-selectedPlanInfo {
  background-color: rgb(28, 25, 41);
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 4px;
}

.box-selectedPlanInfo .plan-info-section {
  padding: 10px 0px;
  position: relative;
  background-color: rgb(28, 25, 41);
}

.box-selectedPlanInfo .border-right {
  border-right: 1px solid hsl(254, 18%, 48%) !important;
}

.box-selectedPlanInfo .plan-info-section img {
  height: 20px;
  width: 20px;
  position: absolute;
  left: 4px;
  top: 12px;
}

.box-selectedPlanInfo .plan-info-title {
  color: hsl(254, 18%, 48%);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 1px;
  padding-left: 4px
}

.box-selectedPlanInfo .plan-info-title span {
  padding-left: 27px;
  text-transform: uppercase;
}

.box-selectedPlanInfo .plan-info-usage {
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  padding-top: 4px;
  padding-left: 30px;
}

.box-selectedPlanInfo#datacenter-planInfo #btnDeleteAuthIPs {
  padding: 0px;
  height: 16px;
  width: 20px;
}

#proResiDashboard #copyProxies {
  background: linear-gradient(266deg, rgb(124, 99, 242) 0%, rgb(170, 133, 253) 100%);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
}

#proResiDashboard .plan-title {
  color: var(--color-primary);
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 400;
}

#proResiDashboard #plan-config-options, #residentialDashboard #plan-config-options{
  background-color: rgb(28, 25, 41);
  border-radius: 5px;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25);
}

#proResiDashboard #nbrOfProxies, #residentialDashboard #nbrOfProxies {
  background-color: rgba(0, 0, 0, 0.35) !important;
  height: auto;
  padding: 12px 12px;
}

#proResiDashboard #generateProxies,
#proResiDashboard #topupBtn,
#residentialDashboard #generateProxies,
#residentialDashboard #topupBtn
 {
  border-radius: 5px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
  padding: 10px 24px;
  text-align: center;
  width: 100%;
}

#proResiDashboard #generateProxies {
  background: linear-gradient(266deg, rgb(130, 212, 240) 0%, rgb(122, 140, 255) 100%);
}

#proResiDashboard #topupBtn {
  background: linear-gradient(266deg, rgb(238, 79, 137) 0%, rgb(247, 173, 120) 100%);
}

#proResiDashboard #proxies {
  background: rgba(0, 0, 0, 0.35) !important;
  border: none;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5) !important;
  color: hsl(254, 27%, 69%) !important;
  font-size: 12px !important;
  font-weight: 400;
  letter-spacing: 1px;
  height: 350px;
  max-height: 350px;
  padding: 8px 16px;
  text-align: left;
  resize: none;
  outline: none !important;
}

#proResiDashboard .btn-links {
  background-color: rgb(28, 25, 41) !important;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25) !important;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  padding: 12px 0px;
  width: 100%;
}

#datacenterDashboard {
  position: relative;
  min-height: 100vh;
}

 #timeUsageChart,
#residentialDashboard #dataUsageChart {
  background: rgba(0, 0, 0, 0.35);
  min-height: 290px;
}

#datacenterDashboard .authenticated-IPs-Section,
#residentialDashboard .user-password-Section {
  background: rgba(0, 0, 0, 0.35);
  padding: 20px;
}

#datacenterDashboard #input-authenticated-ips,
#residentialDashboard #input-user-pass {
  background-color: #1F1B2D !important;
  border-radius: 5px;
  color: hsl(233, 10%, 48%) !important;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 2px;
}

#datacenterDashboard #copyProxies,
#datacenterDashboard #downloadProxies,
#residentialDashboard #copyProxies,
#residentialDashboard #downloadProxies {
  border-radius: 5px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  padding: 10px 0px;
  text-align: center;
  width: 100%;
}

#datacenterDashboard #copyProxies,
#residentialDashboard #copyProxies {
  background: linear-gradient(266deg, rgb(124, 99, 242) 0%, rgb(170, 133, 253) 100%);
}

#datacenterDashboard #downloadProxies,
#residentialDashboard #downloadProxies {
  background: linear-gradient(266deg, rgb(130, 212, 240) 0%, rgb(122, 140, 255) 100%);
}

#datacenterDashboard #plan-title, body {
  background-image: url('../images/background.png.webp');
  background-attachment: fixed;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

main {
  padding: 20px 0px 30px;
}

.box-dashboard .dashboard-title {
  color: var(--color-secondary);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  user-select: none;
}

.box-dashboard .welcome-title {
  color: var(--color-secondary);
  font-size: 27px;
  font-weight: 300;
  letter-spacing: 2px;
  user-select: none;
}

.box-planSelectionDropdown #planSelectMenuButton {
  background: linear-gradient(266deg, rgb(141, 142, 254) 0%, rgb(148, 129, 246) 100%) !important;
  border-radius: 5px;
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 1px;
  padding: 12px 24px;
  text-align: left;
  width: 100%;
}

.box-planSelectionDropdown .dropdown-menu {
  margin: 0px;
  padding: 0px;
  width: 100%;
}

.box-planSelectionDropdown #planSelectMenuButton img,
.box-planSelectionDropdown .dropdown-menu img {
  margin-right: 12px;
  max-width: 18px;
}

.box-planSelectionDropdown .dropdown-toggle::after {
  background-color: var(--color-discord);
  background-image: url(../images/dropdown.svg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 20px;
  border: 0px;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translate(0px, -50%);
}

.box-planSelectionDropdown .dropdown-item {
  background: linear-gradient(266deg, rgb(141, 142, 254) 0%, rgb(148, 129, 246) 100%);
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 1px;
  padding: 12px 24px;
}

.box-planSelectionDropdown .dropdown-item:hover {
  background: var(--color-discord);
}

.box-selectedPlanInfo {
  background-color: rgb(28, 25, 41);
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 4px;
}

.box-selectedPlanInfo .plan-info-section {
  padding: 10px 0px;
  position: relative;
  background-color: rgb(28, 25, 41);
}

.box-selectedPlanInfo .border-right {
  border-right: 1px solid hsl(254, 18%, 48%) !important;
}

.box-selectedPlanInfo .plan-info-section img {
  height: 20px;
  width: 20px;
  position: absolute;
  left: 4px;
  top: 12px;
}

.box-selectedPlanInfo .plan-info-title {
  color: hsl(254, 18%, 48%);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 1px;
  padding-left: 4px
}

.box-selectedPlanInfo .plan-info-title span {
  padding-left: 27px;
  text-transform: uppercase;
}

.box-selectedPlanInfo .plan-info-usage {
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  padding-top: 4px;
  padding-left: 30px;
}

.box-selectedPlanInfo#datacenter-planInfo #btnDeleteAuthIPs {
  padding: 0px;
  height: 16px;
  width: 20px;
}

#proResiDashboard #copyProxies {
  background: linear-gradient(266deg, rgb(124, 99, 242) 0%, rgb(170, 133, 253) 100%);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
}

#proResiDashboard .plan-title {
  color: var(--color-primary);
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 400;
}

#proResiDashboard #plan-config-options {
  background-color: rgb(28, 25, 41);
  border-radius: 5px;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25);
}

#proResiDashboard #nbrOfProxies {
  background-color: rgba(0, 0, 0, 0.35) !important;
  height: auto;
  padding: 12px 12px;
}

#proResiDashboard #generateProxies,
#proResiDashboard #topupBtn {
  border-radius: 5px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
  padding: 10px 24px;
  text-align: center;
  width: 100%;
}

#proResiDashboard #generateProxies {
  background: linear-gradient(266deg, rgb(130, 212, 240) 0%, rgb(122, 140, 255) 100%);
}

#proResiDashboard #topupBtn {
  background: linear-gradient(266deg, rgb(238, 79, 137) 0%, rgb(247, 173, 120) 100%);
}

#proResiDashboard #proxies {
  background: rgba(0, 0, 0, 0.35) !important;
  border: none;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5) !important;
  color: hsl(254, 27%, 69%) !important;
  font-size: 12px !important;
  font-weight: 400;
  letter-spacing: 1px;
  height: 350px;
  max-height: 350px;
  padding: 8px 16px;
  text-align: left;
  resize: none;
  outline: none !important;
}

#proResiDashboard .btn-links {
  background-color: rgb(28, 25, 41) !important;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25) !important;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  padding: 12px 0px;
  width: 100%;
}

#datacenterDashboard #timeUsageChart,
#residentialDashboard #dataUsageChart {
  background: rgba(0, 0, 0, 0.35);
  min-height: 290px;
}

#datacenterDashboard .authenticated-IPs-Section,
#residentialDashboard .user-password-Section {
  background: rgba(0, 0, 0, 0.35);
  padding: 20px;
}

#datacenterDashboard #input-authenticated-ips,
#residentialDashboard #input-user-pass {
  background-color: #1F1B2D !important;
  border-radius: 5px;
  color: hsl(233, 10%, 48%) !important;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 2px;
}

#datacenterDashboard #copyProxies,
#datacenterDashboard #downloadProxies,
#residentialDashboard #copyProxies,
#residentialDashboard #downloadProxies {
  border-radius: 5px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  padding: 10px 0px;
  text-align: center;
  width: 100%;
}

#datacenterDashboard #copyProxies,
#residentialDashboard #copyProxies {
  background: linear-gradient(266deg, rgb(124, 99, 242) 0%, rgb(170, 133, 253) 100%);
}

#datacenterDashboard #downloadProxies,
#residentialDashboard #downloadProxies {
  background: linear-gradient(266deg, rgb(130, 212, 240) 0%, rgb(122, 140, 255) 100%);
}

#datacenterDashboard #plan-title,
#residentialDashboard #plan-title {
  color: rgba(202, 208, 237, 1.00);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  margin: 0px;
  padding: 0px;
}

#dataUsageChart .apexcharts-tooltip {
  background: var(--color-bg-darken);
  color: var(--color-primary);
}

#dataUsageChart .apexcharts-menu {
  background: var(--color-bg-darken);
  border: 1px solid var(--color-primary);
}

#dataUsageChart .apexcharts-menu .apexcharts-menu-item:hover {
  background: var(--color-bg-darken);
}

#dataUsageChart .apexcharts-zoom-icon svg,
#dataUsageChart .apexcharts-zoomin-icon svg,
#dataUsageChart .apexcharts-zoomout-icon svg,
#dataUsageChart .apexcharts-pan-icon svg,
#dataUsageChart .apexcharts-reset-icon svg,
#dataUsageChart .apexcharts-menu-icon svg {
  fill: var(--color-primary);
}

#userPlansTable-conntainer .btn-planRenew img {
  max-width: 14px;
}

#userPlansTable-conntainer>.dataTables_wrapper {
  height: 400px;
  position: relative;
}

.footer {
  position: absolute;
  bottom: 0;
  right: 0;
}

.footer-text {
  text-align: center;
}

@media screen and (max-width: 991px) {
  #userPlansTable-conntainer>.dataTables_wrapper {
    height: auto;
  }
}

@media screen and (min-width: 991px) {

  #userPlansTable-conntainer>.dataTables_wrapper .dataTables_info,
  #userPlansTable-conntainer>.dataTables_wrapper .dataTables_paginate {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 0px;
  }

  #userPlansTable-conntainer>.dataTables_wrapper .dataTables_info {
    bottom: 40px;
  }

  #userPlansTable-conntainer>.dataTables_wrapper .dataTables_paginate {
    bottom: 0px;
  }
}

@media screen and (max-width:991px) {
  .box-selectedPlanInfo .plan-info-section {
    padding: 15px 0px;
  }
}

@media screen and (max-width:767px) {
  .box-selectedPlanInfo .border-right {
    border: 0px !important;
  }

  #proResiDashboard .copyBtn-section {
    text-align: left !important;
  }

  #proResiDashboard #copyProxies {
    font-size: 12px;
    letter-spacing: 0px;
    margin: 15px;
    padding: 8px 12px;
  }

  .box-selectedPlanInfo .plan-info-title span {
    padding-left: 24px;
    letter-spacing: 0.25px;
  }

  .box-selectedPlanInfo .plan-info-section img {
    width: 14px;
    top: 20px;
  }
}

#residentialDashboard #plan-title {
  color: rgba(202, 208, 237, 1.00);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  margin: 0px;
  padding: 0px;
}

#dataUsageChart .apexcharts-tooltip {
  background: var(--color-bg-darken);
  color: var(--color-secondary);
}

#dataUsageChart .apexcharts-menu {
  background: var(--color-bg-darken);
  border: 1px solid var(--color-secondary);
}

#dataUsageChart .apexcharts-menu .apexcharts-menu-item:hover {
  background: var(--color-bg-darken);
}

#dataUsageChart .apexcharts-zoom-icon svg,
#dataUsageChart .apexcharts-zoomin-icon svg,
#dataUsageChart .apexcharts-zoomout-icon svg,
#dataUsageChart .apexcharts-pan-icon svg,
#dataUsageChart .apexcharts-reset-icon svg,
#dataUsageChart .apexcharts-menu-icon svg {
  fill: var(--color-secondary);
}

#userPlansTable-conntainer .btn-planRenew img {
  max-width: 14px;
}

#userPlansTable-conntainer>.dataTables_wrapper {
  height: 400px;
  position: relative;
}

@media screen and (max-width: 991px) {
  #userPlansTable-conntainer>.dataTables_wrapper {
    height: auto;
  }
}

@media screen and (min-width: 991px) {

  #userPlansTable-conntainer>.dataTables_wrapper .dataTables_info,
  #userPlansTable-conntainer>.dataTables_wrapper .dataTables_paginate {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 0px;
  }

  #userPlansTable-conntainer>.dataTables_wrapper .dataTables_info {
    bottom: 40px;
  }

  #userPlansTable-conntainer>.dataTables_wrapper .dataTables_paginate {
    bottom: 0px;
  }
}

@media screen and (max-width:991px) {
  .box-selectedPlanInfo .plan-info-section {
    padding: 15px 0px;
  }
}

@media screen and (max-width:767px) {
  .box-selectedPlanInfo .border-right {
    border: 0px !important;
  }

  #proResiDashboard .copyBtn-section {
    text-align: left !important;
  }

  #proResiDashboard #copyProxies {
    font-size: 12px;
    letter-spacing: 0px;
    margin: 15px;
    padding: 8px 12px;
  }

  .box-selectedPlanInfo .plan-info-title span {
    padding-left: 24px;
    letter-spacing: 0.25px;
  }

  .box-selectedPlanInfo .plan-info-section img {
    width: 14px;
    top: 20px;
  }
}