/*** ======= // TABLE OF CONTENT // ============================
01- Google Fonts
02- General Variables
03- General Styling
    03.1- Paddings
    03.2- Margins
    03.3- Default Colors
    03.4- Container
    03.5- Column Gap
    03.6- Fonts Typography
    03.7- Parallax Background
    03.8- Background Layer
    03.9- Opacity
    03.10- Iframe
    03.11- Image
    03.12- Width
    03.13- Cross Browser Compatibility
    03.14- Border Radius
    03.15- Play Button
    03.16- Social Media
04- Sign In Style
05- Theme Btn Style
06- Carousel Style
07- Header Style
08- Responsive Header Style
09- Side Panel Style
10- Page Title Style
11- Stats Style
12- Earning Analytics Style
13- Notifications Style
14- Payments Style
15- Calendar Style
16- Pay Now Style
17- Empty Box Style
18- Table Style
19- Modal Style
20- Product Style
21- Report Style
22- Rating Style
23- Capabilities Style
24- Support Style
25- News Style
26- Profile Style

===================================================== ***/

/*=== Google Fonts ===*/
@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);

/*=== General Variables ===*/
:root {
  --dp-primary: #101935;
  --dp-primary-subtle: #1E2B50;
  --br-color: #8ba7ce;
  --br-color2: #dee5f0;
  --color1: #d7d8da;
  --color2: #969697;
  --color3: #f9f9fb;
  --color4: #7c7e97;
  --color5: #32355c;

  --color6: #c9c9c9;
  --black: #000000;
  --white: #ffffff;
  --behance: #131418;
  --facebook: #3b5999;
  --twitter: #55acee;
  --linkedin: #0077b5;
  --skype: #00aff0;
  --vimeo: #1ab7ea;
  --yahoo: #410093;
  --instagram: #e4405f;
  --dribbble: #ea4c89;
  --flickr: #ff0084;
  --pinterest: #bd081c;
  --youtube: #cd201f;
  --reddit: #ff5700;
  --rss: #f26522;
  --whatsapp: #25d366;
  --medium: #02b875;
  --transition: all 0.2s cubic-bezier(0.19, 0.68, 0.49, 1.21);
  --transition2: all .3s linear;
  --Poppins: 'Poppins', sans-serif;
  --pill: 2.5rem;
  --round: 50%;
  --full: 100%;
  --curve3: 3px;
  --curve4: 4px;
  --curve5: 5px;
  --curve10: 10px;
  --curve12: 12px;
  --curve15: .9375rem;
  --curve20: 1.25rem;
  --curve22: 1.375rem;
  --curve30: 1.875rem;
}

.dp-bg-color1 {
  background-color: var(--color1);
}

.dp-bg-color2 {
  background-color: var(--color2);
}

.dp-bg-color3 {
  background-color: var(--color3);
}

.dp-bg-color4 {
  background-color: var(--color4);
}

.dp-bg-color5 {
  background-color: var(--color5);
}

.dp-bg-color6 {
  background-color: var(--color6);
}

.dp-bg-primary {
  background-color: var(--dp-primary);
}

.dp-bg-primary-subtle {
  background-color: var(--dp-primary-subtle);
}

.dp-text-color1 {
  color: var(--color1);
}

.dp-text-color2 {
  color: var(--color2);
}

.dp-text-color3 {
  color: var(--color3);
}

.dp-text-color4 {
  color: var(--color4);
}

.dp-text-color5 {
  color: var(--color5);
}

.dp-text-color6 {
  color: var(--color6);
}

.dp-text-primary {
  background-color: var(--dp-primary);
}

.dp-text-primary-subtle {
  background-color: var(--dp-primary-subtle);
}

/*=== General Styling ===*/
body,
html {
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--Poppins);
  position: relative;
  width: 100%;
  color: var(--color4);
  max-width: 100%;
  line-height: 1.5;
  font-size: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color5);
  font-weight: 500;
}

p,
ul li,
ol li {
  color: var(--color4);
  font-size: 1rem;
}

a {
  color: inherit;
}

a,
a:hover,
a:focus,
ins {
  text-decoration: none;
  outline: none;
}

input,
textarea,
select,
button {
  border: 0;
}

button,
input[type="submit"],
.fileContainer,
input[type="file"] {
  cursor: pointer;
}

input:focus,
textarea:focus,
select:focus,
button:focus,
.form-wrp fieldset p a:focus,
.page-link:focus,
.btn.focus,
.btn:focus,
.bootstrap-select .dropdown-toggle:focus {
  border-color: transparent;
  outline: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

textarea {
  resize: none;
}

main,
section,
footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width: 100%;
  position: relative;
  width: 100%;
}

/*=== Paddings ===*/
.pt-10 {
  padding-top: 0.625rem;
}

.pb-10 {
  padding-bottom: 0.625rem;
}

.pt-20 {
  padding-top: 1.25rem;
}

.pb-20 {
  padding-bottom: 1.25rem;
}

.pt-30 {
  padding-top: 1.875rem;
}

.pb-30 {
  padding-bottom: 1.875rem;
}

.pt-40 {
  padding-top: 2.5rem;
}

.pb-40 {
  padding-bottom: 2.5rem;
}

.pt-50 {
  padding-top: 3.125rem;
}

.pb-50 {
  padding-bottom: 3.125rem;
}

.pt-55 {
  padding-top: 3.4375rem;
}

.pb-55 {
  padding-bottom: 3.4375rem;
}

.pt-60 {
  padding-top: 3.75rem;
}

.pb-60 {
  padding-bottom: 3.75rem;
}

.pt-70 {
  padding-top: 4.375rem;
}

.pb-70 {
  padding-bottom: 4.375rem;
}

.px-70 {
  padding: 0 4.375rem;
}

.pt-75 {
  padding-top: 4.6875rem;
}

.pb-75 {
  padding-bottom: 4.6875rem;
}

.px-75 {
  padding: 0 4.6875rem;
}

.pt-80 {
  padding-top: 5rem;
}

.pb-80 {
  padding-bottom: 5rem;
}

.pt-90 {
  padding-top: 5.625rem;
}

.pb-90 {
  padding-bottom: 5.625rem;
}

.pt-100 {
  padding-top: 6.25rem;
}

.pb-100 {
  padding-bottom: 6.25rem;
}

.pt-110 {
  padding-top: 6.875rem;
}

.pb-110 {
  padding-bottom: 6.875rem;
}

.pt-120 {
  padding-top: 7.5rem;
}

.pb-120 {
  padding-bottom: 7.5rem;
}

.pt-130 {
  padding-top: 8.125rem;
}

.pb-130 {
  padding-bottom: 8.125rem;
}

.pt-140 {
  padding-top: 8.75rem;
}

.pb-140 {
  padding-bottom: 8.75rem;
}

.pt-150 {
  padding-top: 9.375rem;
}

.pb-150 {
  padding-bottom: 9.375rem;
}

.pt-160 {
  padding-top: 10rem;
}

.pb-160 {
  padding-bottom: 10rem;
}

.pt-170 {
  padding-top: 10.625rem;
}

.pb-170 {
  padding-bottom: 10.625rem;
}

.pt-180 {
  padding-top: 11.25rem;
}

.pb-180 {
  padding-bottom: 11.25rem;
}

.pt-195 {
  padding-top: 12.1875rem;
}

.pb-195 {
  padding-bottom: 12.1875rem;
}

.pt-210 {
  padding-top: 13.125rem;
}

.pb-210 {
  padding-bottom: 13.125rem;
}

.pt-240 {
  padding-top: 15rem;
}

.pb-240 {
  padding-bottom: 15rem;
}

.pt-280 {
  padding-top: 17.5rem;
}

.pb-280 {
  padding-bottom: 17.5rem;
}

.pt-410 {
  padding-top: 25.625rem;
}

.pb-410 {
  padding-bottom: 25.625rem;
}

/*=== Margins ===*/
.mt-10 {
  margin-top: 0.625rem;
}

.mb-10 {
  margin-bottom: 0.625rem;
}

.mt-15 {
  margin-top: 0.9375rem;
}

.mb-15 {
  margin-bottom: 0.9375rem;
}

.mt-20 {
  margin-top: 1.25rem;
}

.mb-20 {
  margin-bottom: 1.25rem;
}

.mt-25 {
  margin-top: 1.5625rem;
}

.mb-25 {
  margin-bottom: 1.5625rem;
}

.mt-30 {
  margin-top: 1.875rem;
}

.mb-30 {
  margin-bottom: 1.875rem;
}

.mt-35 {
  margin-top: 2.1875rem;
}

.mb-35 {
  margin-bottom: 2.1875rem;
}

.mt-40 {
  margin-top: 2.5rem;
}

.mb-40 {
  margin-bottom: 2.5rem;
}

.mt-45 {
  margin-top: 2.8125rem;
}

.mb-45 {
  margin-bottom: 2.8125rem;
}

.mt-50 {
  margin-top: 3.125rem;
}

.mb-50 {
  margin-bottom: 3.125rem;
}

.mt-55 {
  margin-top: 3.4375rem;
}

.mb-55 {
  margin-bottom: 3.4375rem;
}

.mt-60 {
  margin-top: 3.75rem;
}

.mb-60 {
  margin-bottom: 3.75rem;
}

.mt-65 {
  margin-top: 4.0625rem;
}

.mb-65 {
  margin-bottom: 4.0625rem;
}

.mt-70 {
  margin-top: 4.375rem;
}

.mb-70 {
  margin-bottom: 4.375rem;
}

.mt-80 {
  margin-top: 5rem;
}

.mb-80 {
  margin-bottom: 5rem;
}

.mt-90 {
  margin-top: 5.625rem;
}

.mb-90 {
  margin-bottom: 5.625rem;
}

.mt-100 {
  margin-top: 6.25rem;
}

.mb-100 {
  margin-bottom: 6.25rem;
}

.mt-110 {
  margin-top: 6.875rem;
}

.mb-110 {
  margin-bottom: 6.875rem;
}

.mt-120 {
  margin-top: 7.5rem;
}

.mb-120 {
  margin-bottom: 7.5rem;
}

/*=== Container ===*/
.container,
.container-fluid {
  padding: 0;
}

/*=== Column Gap ===*/
.mrg {
  margin: 0;
}

.mrg>div[class^="col"],
.mrg.slick-slider div[class^="col"] {
  padding: 0;
}

.mrg2 {
  margin: 0 -1px;
}

.mrg2>div[class^="col"],
.mrg2.slick-slider div[class^="col"] {
  padding: 0 1px;
}

.mrg5 {
  margin: 0 -0.15625rem;
}

.mrg5>div[class^="col"],
.mrg5.slick-slider div[class^="col"] {
  padding: 0 0.15625rem;
}

.mrg6 {
  margin: 0 -0.1875rem;
}

.mrg6>div[class^="col"],
.mrg6.slick-slider div[class^="col"] {
  padding: 0 0.1875rem;
}

.mrg10 {
  margin: 0 -0.3125rem;
}

.mrg10>div[class^="col"],
.mrg10.slick-slider div[class^="col"] {
  padding: 0 0.3125rem;
}

.mrg15 {
  margin: 0 -0.46875rem;
}

.mrg15>div[class^="col"],
.mrg15.slick-slider div[class^="col"] {
  padding: 0 0.46875rem;
}

.mrg20 {
  margin: 0 -0.625rem;
}

.mrg20>div[class^="col"],
.mrg20.slick-slider div[class^="col"] {
  padding: 0 0.625rem;
}

.mrg30 {
  margin: 0 -0.9375rem;
}

.mrg30>div[class^="col"],
.mrg30.slick-slider div[class^="col"] {
  padding: 0 0.9375rem;
}

.mrg40 {
  margin: 0 -1.25rem;
}

.mrg40>div[class^="col"],
.mrg40.slick-slider div[class^="col"] {
  padding: 0 1.25rem;
}

.mrg45 {
  margin: 0 -1.40625rem;
}

.mrg45>div[class^="col"],
.mrg45.slick-slider div[class^="col"] {
  padding: 0 1.40625rem;
}

.mrg50 {
  margin: 0 -1.5625rem;
}

.mrg50>div[class^="col"],
.mrg50.slick-slider div[class^="col"] {
  padding: 0 1.5625rem;
}

.mrg60 {
  margin: 0 -1.875rem;
}

.mrg60>div[class^="col"],
.mrg60.slick-slider div[class^="col"] {
  padding: 0 1.875rem;
}

.mrg70 {
  margin: 0 -2.1875rem;
}

.mrg70>div[class^="col"],
.mrg70.slick-slider div[class^="col"] {
  padding: 0 2.1875rem;
}

.mrg80 {
  margin: 0 -2.1875rem;
}

.mrg80>div[class^="col"],
.mrg80.slick-slider div[class^="col"] {
  padding: 0 2.1875rem;
}

.row.slick-slider div[class^="col"] {
  flex: 0 0 100%;
  max-width: 100%;
}

.slick-slide {
  border: 0;
}

/*=== Fonts Typography ===*/
.font-weight-hairline {
  font-weight: 100 !important;
}

.font-weight-thin {
  font-weight: 200 !important;
}

.font-weight-medium {
  font-weight: 500 !important;
}

.font-weight-semibold {
  font-weight: 600 !important;
}

.font-weight-extrabold {
  font-weight: 800 !important;
}

.font-weight-black {
  font-weight: 900 !important;
}

.font-style-italic {
  font-style: italic !important;
}

.font-style-normal {
  font-style: normal !important;
}

/*=== Opacity ===*/
.opc1:before {
  opacity: .1;
}

.opc15:before {
  opacity: .15;
}

.opc2:before {
  opacity: .2;
}

.opc25:before {
  opacity: .25;
}

.opc3:before {
  opacity: .3;
}

.opc35:before {
  opacity: .35;
}

.opc4:before {
  opacity: .4;
}

.opc45:before {
  opacity: .45;
}

.opc5:before {
  opacity: .5;
}

.opc55:before {
  opacity: .55;
}

.opc6:before {
  opacity: .6;
}

.opc65:before {
  opacity: .65;
}

.opc7:before {
  opacity: .7;
}

.opc75:before {
  opacity: .75;
}

.opc8:before {
  opacity: .8;
}

.opc85:before {
  opacity: .85;
}

.opc9:before {
  opacity: .9;
}

.opc95:before {
  opacity: .95;
}

.opc97:before {
  opacity: .97;
}

.opc99:before {
  opacity: .99;
}

/*=== Iframe ===*/
iframe {
  border: 0;
  width: 100%;
}

/*=== Image ===*/
img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

/*=== Width ===*/
.w-5 {
  width: 5%;
}

.w-10 {
  width: 10%;
}

.w-15 {
  width: 15%;
}

.w-20 {
  width: 20%;
}

.w-25 {
  width: 25%;
}

.w-30 {
  width: 30%;
}

.w-35 {
  width: 35%;
}

.w-40 {
  width: 40%;
}

.w-45 {
  width: 45%;
}

.w-50 {
  width: 50%;
}

.w-55 {
  width: 55%;
}

.w-60 {
  width: 60%;
}

.w-65 {
  width: 65%;
}

.w-70 {
  width: 70%;
}

.w-75 {
  width: 75%;
}

.w-80 {
  width: 80%;
}

.w-85 {
  width: 85%;
}

.w-90 {
  width: 90%;
}

.w-95 {
  width: 95%;
}

.w-100 {
  width: 100%;
}

.wow {
  visibility: hidden;
}

/*=== Cross Browser Compatibility ===*/
i,
a,
svg,
img,
input,
button,
textarea,
:before,
:after,
label,
span,
nav ul li {
  -webkit-transition: var(--transition2);
  transition: var(--transition2);
}

img,
nav ul ul {
  -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1);
  /* older webkit */
  -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  -moz-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  -o-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  /* easeOutBack */
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  /* older webkit */
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
  -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
  -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
  /* easeOutBack */
}

/*=== Border Radius ===*/
.brdRd30 {
  -webkit-border-radius: var(--curve30);
  border-radius: var(--curve30);
}

.brdRd22 {
  -webkit-border-radius: var(--curve22);
  border-radius: var(--curve22);
}

.brdRd20 {
  -webkit-border-radius: var(--curve20);
  border-radius: var(--curve20);
}

.brdRd15 {
  -webkit-border-radius: var(--curve15);
  border-radius: var(--curve15);
}

.brdRd12 {
  -webkit-border-radius: var(--curve12);
  border-radius: var(--curve12);
}

.brdRd10 {
  -webkit-border-radius: var(--curve10);
  border-radius: var(--curve10);
}

.brdRd5 {
  -webkit-border-radius: var(--curve5);
  border-radius: var(--curve5);
}

.brdRd4 {
  -webkit-border-radius: var(--curve4);
  border-radius: var(--curve4);
}

.brdRd3 {
  -webkit-border-radius: var(--curve3);
  border-radius: var(--curve3);
}

/*=== Particles ===*/
.particles-js,
.particles-js2 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

/*=== Social Media ===*/
.facebook,
.facebook-hvr:hover,
.facebook-hvr:focus {
  background-color: var(--facebook);
  border-color: var(--facebook);
}

.twitter,
.twitter-hvr:hover,
.twitter-hvr:focus {
  background-color: var(--twitter);
  border-color: var(--twitter);
}

.pinterest,
.pinterest-hvr:hover,
.pinterest-hvr:focus {
  background-color: var(--pinterest);
  border-color: var(--pinterest);
}

.linkedin,
.linkedin-hvr:hover,
.linkedin-hvr:focus {
  background-color: var(--linkedin);
  border-color: var(--linkedin);
}

.youtube,
.youtube-hvr:hover,
.youtube-hvr:focus {
  background-color: var(--youtube);
  border-color: var(--youtube);
}

.instagram,
.instagram-hvr:hover,
.instagram-hvr:focus {
  background-color: var(--instagram);
  border-color: var(--instagram);
}

.vimeo,
.vimeo-hvr:hover,
.vimeo-hvr:focus {
  background-color: var(--vimeo);
  border-color: var(--vimeo);
}

.skype,
.skype-hvr:hover,
.skype-hvr:focus {
  background-color: var(--skype);
  border-color: var(--skype);
}

.rss,
.rss-hvr:hover,
.rss-hvr:focus {
  background-color: var(--rss);
  border-color: var(--rss);
}

.facebookClr,
.facebook:hover,
.facebook:focus {
  color: var(--facebook);
}

.twitterClr,
.twitter:hover,
.twitter:focus {
  color: var(--twitter);
}

.pinterestClr,
.pinterest:hover,
.pinterest:focus {
  color: var(--pinterest);
}

.linkedinClr,
.linkedin:hover,
.linkedin:focus {
  color: var(--linkedin);
}

.youtubeClr,
.youtube:hover,
.youtube:focus {
  color: var(--youtube);
}

.instagramClr,
.instagram:hover,
.instagram:focus {
  color: var(--instagram);
}

.vimeoClr,
.vimeo:hover,
.vimeo:focus {
  color: var(--vimeo);
}

.skypeClr,
.skype:hover,
.skype:focus {
  color: var(--skype);
}

.rssClr,
.rss:hover,
.rss:focus {
  color: var(--rss);
}

/*===== Theme Style =====*/

/*===== Sign In Style =====*/
.dp-sign-inner-side {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 3.125rem;
  min-height: 100vh;
}
.logo.position-absolute {
  top: 1.438rem;
  left: 3.4375rem;
  max-width: 11.25rem;
}
p.dp-ft,
.dp-left-bottom {
  padding: 1.25rem 1.875rem 2.5rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
p.dp-ft a,
.dp-left-bottom p a {
  font-weight: 700;
  text-decoration: underline;
}
p.dp-ft a:hover, 
p.dp-ft a:focus,
.dp-left-bottom p a:hover,
.dp-left-bottom p a:focus,
.useful-links li a:hover,
.useful-links li a:focus {color: var(--dp-primary);}
.useful-links li {font-size: .9375rem;}
.dp-left-inner-side {
  flex: 0 0 39.375rem;
  max-width: 39.375rem;
/*  min-height: 31.25rem;
  max-height: 31.25rem; */
  width: 100%;
  margin-top: 100px;
}
.dp-left-inner-side > form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.dp-left-inner-side > form h4 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--black);
}
.field-box > label {color: var(--black);}
.selectpicker .chosen-container {width: 100% !important;}
.selectpicker .chosen-container a.chosen-single {
  background-image: none;
  border: 1px solid var(--br-color2);
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: transparent;
  -webkit-border-radius: var(--curve4);
  border-radius: var(--curve4);
  padding: 12px 2rem 12px 1.25rem;
  height: initial;
  color: var(--color2);
  font-size: 1rem;
}
.selectpicker .chosen-container a.chosen-single:hover, 
.selectpicker .chosen-container a.chosen-single:focus, 
.selectpicker .chosen-container.chosen-container-active a.chosen-single {
  border-color: var(--dp-primary);
  background-color: var(--bs-white);
  color: var(--color5);
}
.selectpicker .chosen-container a.chosen-single:before {
  content: "\f107";
  font-family: 'Font Awesome 5 Pro';
  position: absolute;
  right: 1.125rem;
  top: 0;
  bottom: 0;
  font-size: 1.125rem;
  line-height: 3.125rem;
}
.selectpicker .chosen-container a.chosen-single span {margin: 0;}
.selectpicker .chosen-container a.chosen-single div {display: none;}
.selectpicker .chosen-container .chosen-drop {border: 1px solid var(--br-color2);}
.selectpicker .chosen-container .chosen-search {padding: .9375rem;}
.selectpicker .chosen-container .chosen-search input {
  border: 1px solid var(--br-color2);
  -webkit-border-radius: var(--curve4);
  border-radius: var(--curve4);
  height: 2.1875rem;
  padding: 10px;
}
.selectpicker .chosen-container .chosen-search input:hover, 
.selectpicker .chosen-container .chosen-search input:focus {border-color: var(--dp-primary);}
.selectpicker .chosen-container .chosen-drop ul.chosen-results {
  margin: 0;
  padding: 0 .9375rem .9375rem;
}
.selectpicker .chosen-container .chosen-drop ul.chosen-results > li {
  background-color: transparent;
  line-height: 1.5;
  font-size: .9375rem;
  -webkit-border-radius: var(--curve4);
  border-radius: var(--curve4);
  padding: 10px .9375rem;
}
.selectpicker .chosen-container .chosen-drop ul.chosen-results > li:hover, 
.selectpicker .chosen-container .chosen-drop ul.chosen-results > li.highlighted {
  background-image: none;
  background-color: var(--dp-primary);
}
.field-input > input {
  width: 100%;
  background-color: transparent;
  border: 1px solid var(--br-color2);
  -webkit-border-radius: var(--curve4);
  border-radius: var(--curve4);
  height: 3.125rem;
  color: var(--color2);
  padding: 12px 1.25rem;
}
.field-input > i {
  position: absolute;
  line-height: 3.125rem;
  top: 0;
  font-size: 1.125rem;
}
.field-input.left-icon > input {padding-left: 3.35rem;}
.field-input.right-icon > input {padding-right: 3.125rem;}
.field-input.left-icon > i {
  left: 1.25rem;
  color: var(--color2);
}
.field-input.right-icon > i {cursor: pointer;}
.field-input > input:hover, 
.field-input > input:focus {
  background-color: var(--bs-white);
  border-color: var(--dp-primary);
  color: var(--color5);
}
.field-input.right-icon > i.pas-toggle {
  right: 1.25rem;
  left: auto;
  color: var(--color1);
}
.field-input.right-icon > i.pas-toggle:hover {color: var(--dp-primary);}
.forget-password > a {color: var(--dp-primary);}
.forget-password > a:hover, 
.forget-password > a:focus {color: var(--color5);}
.remember-me {
  padding-left: 1.875rem;
  min-height: initial;
}
.remember-me > input.form-check-input {
  height: 1.125rem;
  width: 1.125rem;
  background-color: transparent;
  border: 1px solid rgba(0,0,0,.35);
  margin-left: -1.875rem;
}
.remember-me > label.form-check-label {
  cursor: pointer;
  line-height: 1.5;
}
.remember-me > input.form-check-input:checked {
  background-color: var(--dp-primary);
  border-color: var(--dp-primary);
}
.field-btns .theme-btn {min-width: 11.25rem;}

/*===== Theme Btn Style =====*/
.theme-btn {
  -webkit-border-radius: var(--curve4);
  border-radius: var(--curve4);
  color: var(--bs-white);
  background-color: var(--dp-primary-subtle);
  border: 2px solid var(--dp-primary-subtle);
  display: inline-block;
  padding: 11px 1.875rem;
  text-align: center;
  cursor: pointer;
}
.theme-btn:hover, 
.theme-btn:focus {
  background-color: var(--dp-primary);
  border-color: var(--dp-primary);
}
.theme-btn svg {
  height: 1.0625rem;
  fill: var(--bs-white);
}
.page-top-right .theme-btn {
  font-size: .9375rem;
  font-weight: 500;
  padding: 11px 1.25rem;
}
.theme-btn svg.printIcon {
  stroke: var(--bs-white);
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}
.theme-btn i {
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
}

/*===== Carousel Style =====*/
.dp-right-inner-side {
  flex: 0 0 42.5rem;
  max-width: 42.5rem;
}
.dp-caro-img + .dp-caro-info {margin-top: 5.9375rem;}
.dp-caro-info {gap: 1.5625rem;}
.dp-caro-info > h4 {font-size: 1.75rem;}
.dp-caro-info > p {font-weight: 300;}
.dp-bg-primary .dp-caro-info > h4 {color: var(--bs-white);}
.dp-bg-primary .dp-caro-info > p {color: rgba(255,255,255,.55);}
.dp-caro1 ul.slick-dots {
  margin: 5rem 0 0;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 1.875rem;
  padding: 0 2.5rem;
}
.dp-caro1 ul.slick-dots li {
  line-height: 1;
  font-size: 0;
}
.dp-caro1 ul.slick-dots li button {
  font-size: 0;
  background-color: var(--bs-white);
  opacity: .4;
  padding: 0;
  height: 10px;
  width: 10px;
  -webkit-border-radius: var(--round);
  border-radius: var(--round);
}
.dp-caro1 ul.slick-dots li button:hover, 
.dp-caro1 ul.slick-dots li.slick-active button {opacity: 1;}
.dp-caro1 > button.slick-arrow {
  background-color: transparent;
  padding: 0;
  position: absolute;
  font-size: 1.875rem;
  bottom: 0;
  line-height: 1;
}
.dp-bg-primary .dp-caro1 > button.slick-arrow {color: var(--bs-white);}
.dp-caro1 > button.slick-prev {left: 0;}
.dp-caro1 > button.slick-next {right: 0;}

/*===== Header Style =====*/
header {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding-top: 3.125rem;
  z-index: 99999;
}
.header-left-side {gap: 4.375rem;}
.header-left-side .logo {
  min-width: 11.25rem;
  max-width: 11.25rem;
}
.logo a {display: block;}
.header-search {
  max-width: 28.125rem;
  width: 100%;
  flex: 0 0 28.125rem;
}
.header-search button {
  position: absolute;
  background-color: transparent;
  color: var(--bs-white);
  top: 0;
  left: 0;
  height: 3.625rem;
  width: 3.125rem;
  opacity: .6;
}
.header-search button:hover, 
.header-search button:focus {opacity: 1;}
.header-search input {
  width: 100%;
  -webkit-border-radius: var(--curve10);
  border-radius: var(--curve10);
  height: 3.625rem;
  background-color: rgba(0,0,0,.15);
  color: var(--bs-white);
  font-style: normal;
  padding: 10px 1.25rem 10px 3.125rem;
  font-size: 1rem;
}
.header-search input::-webkit-input-placeholder {color: rgba(255,255,255,.5);}
.header-search input::-moz-placeholder {color: rgba(255,255,255,.5);}
.header-search input:-ms-input-placeholder {color: rgba(255,255,255,.5);}
.header-search input:-moz-placeholder {color: rgba(255,255,255,.5);}
.header-right-side {gap: 7.5rem;}
nav > ul {
  display: inline-flex;
  gap: 1.5625rem;
}
nav ul li {font-size: 1rem;}
nav > ul > li {color: var(--bs-white);}
nav ul li:hover > a {opacity: .7;}
.header-user-noti-info {gap: 2.1875rem;}
.dropdown.noti-info > button {
  position: relative;
  color: var(--bs-white);
  font-size: 1.5rem;
  line-height: 1;
}
.dropdown.noti-info > button:after {display: none;}
.dropdown.noti-info > button:before {
  content: "";
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 3px solid var(--dp-primary-subtle);
  background-color: #f9ff47;
  position: absolute;
  right: -5px;
  top: -1px;
  height: .9375rem;
  width: .9375rem;
}
.dropdown.noti-info ul.dropdown-menu {
  -webkit-box-shadow: 0 0 1.25rem rgba(0,0,0,.15);
  box-shadow: 0 0 1.25rem rgba(0,0,0,.15);
  max-width: 18rem;
  border: 0;
  width: 100%;
  min-width: 18rem;
  padding: 1.25rem 0;
  max-height: 25rem;
  overflow-y: auto;
}
.dropdown.noti-info ul.dropdown-menu:before {
  content: "";
  position: absolute;
  right: 5px;
  top: -5px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--bs-white);
}
.dropdown.noti-info ul.dropdown-menu li a.dropdown-item {
  white-space: normal;
  padding: 10px .9375rem;
}
.dropdown.noti-info ul.dropdown-menu li + li {border-top: 1px solid var(--br-color2);}
.dropdown.noti-info ul.dropdown-menu li h6 {font-weight: 600;}
.dropdown.noti-info ul.dropdown-menu li p {
  font-size: 13px;
  line-height: 1.5;
}
.dropdown.noti-info ul.dropdown-menu li h6 + p {margin-top: 5px;}
.dropdown.user-info > button {
  color: var(--bs-white);
  position: relative;
  font-size: 1.125rem;
  font-weight: 500;
  gap: 10px;
  display: inline-flex;
  align-items: center;
  padding: 0 1.375rem 0 0;
}
/* .dropdown.user-info > button:after,
.page-title-right .dropdown > button:after {
  content: "\f107";
  border: 0;
  font-family: 'Font Awesome 5 Pro';
  position: absolute;
  right: 0;
  top: calc(50% - 8px);
  margin: 0;
  line-height: 1;
} */
.dropdown.user-info ul.dropdown-menu,
.page-title-right .dropdown ul.dropdown-menu {
  border: 0;
  -webkit-box-shadow: 0 0 1.25rem rgba(0,0,0,.15);
  box-shadow: 0 0 1.25rem rgba(0,0,0,.15);
  width: 100%;
  padding: .9375rem 0;
}
.dropdown.user-info ul.dropdown-menu li,
.page-title-right .dropdown ul.dropdown-menu li {
  font-weight: 500;
  font-size: .9375rem;
  line-height: 1.5;
}
.dropdown.user-info ul.dropdown-menu li a.dropdown-item,
.page-title-right .dropdown ul.dropdown-menu li a.dropdown-item {
  white-space: normal;
  font-weight: inherit;
  padding: 6px .9375rem;
}
.dropdown.user-info ul.dropdown-menu li a.dropdown-item:hover, 
.dropdown.user-info ul.dropdown-menu li a.dropdown-item:focus,
.page-title-right .dropdown ul.dropdown-menu li a.dropdown-item:hover, 
.page-title-right .dropdown ul.dropdown-menu li a.dropdown-item:focus {
  background-color: var(--dp-primary);
  color: var(--bs-white);
}

/*===== Responsive Header Style =====*/
.responsive-header {
  position: absolute;
  z-index: 9999;
  top: 1.25rem;
  left: 0;
}
.responsive-menu {
  z-index: 99999;
  left: -17rem;
  background-color: var(--bs-white);
  width: 17rem;
  -webkit-transition: var(--transition2);
  transition: var(--transition2);
  opacity: 0;
  visibility: hidden;
  -webkit-box-shadow: 0 0 .9375rem rgba(0,0,0,.15);
  box-shadow: 0 0 .9375rem rgba(0,0,0,.15);
}
.responsive-menu-btn > svg {
  fill: var(--bs-white);
  height: 1.5rem;
}
.responsive-menu-btn {
  font-size: 1.5rem;
  color: var(--bs-white);
}
.responsive-menu-btn:hover {opacity: .7;}
.responsive-header .logo {max-width: 7rem;}
.responsive-header .logo h1 {font-size: initial;}
.responsive-menu.slidein {
  left: 0;
  opacity: 1;
  visibility: visible;
}
.responsive-close-menu {
  font-size: 1.125rem;
  position: absolute;
  right: .9375rem;
  top: .9375rem;
  line-height: 1;
  color: var(--bs-white);
}
.responsive-close-menu:hover {opacity: .7;}
.responsive-user {
  min-height: 7.5rem;
  padding: 1.875rem;
}
.responsive-user .user-info {width: 100%;}
.responsive-menu > ul {
  overflow-y: auto;
  padding: 1.875rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: calc(100% - 7.5rem);
}
.responsive-menu > ul li {font-size: .9375rem;}
.responsive-menu > ul li a {
  display: flex;
  gap: 10px;
  align-items: center;
}
.responsive-menu > ul li:hover > a, 
.responsive-menu > ul li a:focus, 
.responsive-menu > ul li.active > a {color: var(--dp-primary);}
.responsive-menu > ul li a svg {
  height: 1.25rem;
  fill: var(--color4);
}
.responsive-menu > ul li a i {font-size: 1.125rem;}
.responsive-menu > ul li a:hover svg, 
.responsive-menu > ul li.active a svg,
.responsive-menu > ul li a:hover i, 
.responsive-menu > ul li.active a i {fill: var(--dp-primary);}

/*===== Side Panel Style =====*/
.side-panel {
  width: 6.875rem;
  background-color: #f8f8f8;
  z-index: 9999;
  padding: 3.4375rem .9375rem;
  gap: 1.25rem;
}
.side-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.75rem;
}
.side-menu > li {
  font-size: 1.875rem;
  line-height: 1;
}
.side-menu > li a {display: block;}
.side-menu > li a:hover,
.side-menu > li a:focus,
.logout > a:hover,
.logout > a:focus {color: var(--dp-primary);}
.side-menu > li a svg, 
.logout > a svg {
  height: 2.5rem;
  fill: #9ca3af;
}
.logout > a {
  display: block;
  font-size: 1.875rem;
  line-height: 1;
}
.side-menu > li:hover > a svg, 
.side-menu > li.active > a svg, 
.logout > a:hover svg {fill: var(--dp-primary-subtle);}

/*===== Page Title Style =====*/
.page-title-wrap {padding: 10.5rem 0 6.875rem;}
.page-title-left {gap: 3.125rem;}
.page-title-links {gap: 3.125rem;}
.page-title-links > li {
  color: rgba(255,255,255,.6);
  font-weight: 500;
}
.page-title-links > li a {
  color: rgba(255,255,255,.6);
  cursor: pointer;
}
.page-title-links > li:hover,
.page-title-links > li a:hover, 
.page-title-links > li.active > a {color: var(--bs-white);}
.page-title-left > span, 
.page-title-right .dropdown > button {
  font-weight: 500;
  color: var(--bs-white);
  padding: 8px .9375rem;
  background-color: rgba(255,255,255,.2);
}
.page-title-right .dropdown > button {padding: 8px 3.75rem 8px 1.25rem;}
.page-title-right .dropdown > button:after {
  font-size: 1.125rem;
  right: 1.25rem;
}

/*===== Stats Style =====*/
.stat-chart g.highcharts-xaxis, 
.stat-chart g.highcharts-yaxis {display: none;}
.stats-wrapper {
  margin-bottom: -2.5rem;
  margin-top: -5.625rem;
}
.stats-wrapper .stat-box {margin-bottom: 2.5rem;}
.stat-box {
  background-color: var(--bs-white);
  -webkit-border-radius: var(--curve15);
  border-radius: var(--curve15);
  -webkit-box-shadow: 0 1.25rem 3.125rem rgba(0,0,0,.1);
  box-shadow: 0 1.25rem 3.125rem rgba(0,0,0,.1);
  padding: 1.5625rem 2.1875rem 1.875rem;
  display: flex;
  flex-direction: column;
  gap: .9375rem;
}
.stat-top {
  gap: 12px;
  font-weight: 500;
}
.stat-top > i {
  height: 1.625rem;
  width: 1.625rem;
}
.stat-top > i.bg-success-subtle {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.stat-top > i.bg-danger-subtle {
  -webkit-transform: rotate(115deg);
  transform: rotate(115deg);
}
.stat-cap {gap: 1.5625rem;}
.stat-cap > span {
  height: 4.5rem;
  width: 4.5rem;
  -webkit-border-radius: 1.125rem;
  border-radius: 1.125rem;
  font-size: 2rem;
}
.stat-cap > span svg {height: 2.375rem;}
.stat-cap > span.bg-danger-subtle svg {fill: var(--bs-danger);}
.stat-cap > span.bg-warning-subtle svg {fill: var(--bs-warning);}
.stat-cap > span.bg-success-subtle svg {fill: var(--bs-success);}
.stat-cap > span.bg-info-subtle svg {fill: var(--bs-info);}
.stat-cap-inner {gap: 8px;}
.stat-cap-inner > span {
  text-transform: uppercase;
  font-size: .9375rem;
  font-weight: 500;
  color: #8392a5;
  letter-spacing: 1.15px;
}
.stat-cap-inner > h3 {
  font-size: 2rem;
  font-weight: 900;
  color: #42505c;
}

/*===== Earning Analytics Style =====*/
.widget-box {margin-top: 3.75rem;}
.widget-head {margin-bottom: 1.25rem;}
.widget-head > h2 {
  font-size: 1.75rem;
  font-weight: 700;
}
.earn-widget {
  -webkit-box-shadow: 0 1.25rem 3.125rem rgba(0,0,0,.1);
  box-shadow: 0 1.25rem 3.125rem rgba(0,0,0,.1);
  -webkit-border-radius: var(--curve15);
  border-radius: var(--curve15);
  padding: 2.1875rem;
}
.earn-left {min-height: 12.5rem;}
.earn-bottom {gap: 13px;}
.earn-bottom > span {
  letter-spacing: .85px;
  font-size: .9375rem;
  color: #8392a5;
}
.earn-right {
  flex: 0 0 calc(100% - 13.4375rem);
  max-width: calc(100% - 13.4375rem);
}
.earn-right .earn-chart {height: 14.375rem;}

/*===== Notifications Style =====*/
.noti-widget {
  background-color: #31bb76;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  gap: 1.25rem;
  justify-content: space-between;
  align-items: center;
  -webkit-box-shadow: 0 1.25rem 3.125rem rgba(49,187,118,.5);
  box-shadow: 0 1.25rem 3.125rem rgba(49,187,118,.5);
  padding: 1.875rem 2.1875rem 1.875rem 3.125rem;
  min-height: 18.75rem;
}
.noti-cap {gap: 10px;}
.noti-cap > h3 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--bs-white);
}
.noti-cap > p {
  font-size: 1.0625rem;
  color: var(--bs-white);
}
.noti-cap > p + a {margin-top: 1.875rem;}
.noti-cap > a {font-weight: 500;}
.noti-cap > a.theme-btn {
  background-color: #14632c;
  border-color: #14632c;
  padding: 6px 1.25rem;
}
.noti-img {
  flex: 0 0 15.125rem;
  max-width: 15.125rem;
}
.noti-cap > a.theme-btn:hover, 
.noti-cap > a.theme-btn:focus {
  background-color: var(--bs-black);
  color: var(--bs-white);
  border-color: var(--bs-black);
}
.view-more {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--dp-primary);
}
.view-more:hover, 
.view-more:focus {color: var(--bs-black);}

/*===== Payments Style =====*/
.payment-list {gap: 10px;}
.payment-item {
  -webkit-border-radius: var(--curve3);
  border-radius: var(--curve3);
  -webkit-box-shadow: 0 0 .9375rem rgba(198,218,248,.2);
  box-shadow: 0 0 .9375rem rgba(198,218,248,.2);
  padding: 2.8125rem;
  gap: 2.1875rem;
}
.payment-left > p {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color5);
}
.payment-right {
  flex: 1 0 0;
  padding-left: 3.125rem;
  position: relative;
  justify-content: space-between;
  min-height: 4.375rem;
}
.payment-right:before {
  content: "";
  background-color: #8392a5;
  width: 1px;
  height: 4.375rem;
  opacity: .35;
  position: absolute;
  left: 0;
}
.payment-right > div {gap: 7px;}
.payment-right > div span {color: #8392a5;}
.payment-right > div h5 {
  font-weight: 500;
  color: var(--color5);
  font-size: 1.4375rem;
}

/*===== Calendar Style =====*/
.daterange-container .date-picker-wrapper {
  padding: 0;
  border: 0;
  width: 100%;
  background-color: transparent;
}
.daterange-container .date-picker-wrapper .month-wrapper {
  width: 100% !important;
  border: 0;
  padding: 0 0 1.75rem;
  display: flex;
  -webkit-box-shadow: 0 1.25rem 3.125rem rgba(0,0,0,.1);
  box-shadow: 0 1.25rem 3.125rem rgba(0,0,0,.1);
  -webkit-border-radius: var(--curve10);
  border-radius: var(--curve10);
}
.daterange-container .date-picker-wrapper .footer {display: none;}
.daterange-container .date-picker-wrapper .month-wrapper table {
  width: calc(50% - .5px);
  float: none;
  flex: 0 0 calc(50% - .5px);
}
.daterange-container .date-picker-wrapper .month-wrapper table tr.caption {
  border-bottom: 1px solid #ededf5;
  height: initial;
}
.daterange-container .date-picker-wrapper .month-wrapper table tr.caption span.prev, 
.daterange-container .date-picker-wrapper .month-wrapper table tr.caption span.next {
  height: 2.5rem;
  width: 2.5rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #ededf5;
  -webkit-border-radius: var(--curve10);
  border-radius: var(--curve10);
  font-size: 0;
}
/* .daterange-container .date-picker-wrapper .month-wrapper table.month1 tr.caption span.next, 
.daterange-container .date-picker-wrapper .month-wrapper table.month2 tr.caption span.prev {display: none;} */
.daterange-container .date-picker-wrapper .month-wrapper table tr.caption span.prev:hover, 
.daterange-container .date-picker-wrapper .month-wrapper table tr.caption span.next:hover {
  border-color: var(--dp-primary);
  background-color: var(--dp-primary);
}
.daterange-container .date-picker-wrapper .month-wrapper table tr.caption span.prev:before, 
.daterange-container .date-picker-wrapper .month-wrapper table tr.caption span.next:before {
  content: "\f104";
  font-family: 'Font Awesome 5 Pro';
  font-weight: 400;
  font-size: 1.25rem;
}
.daterange-container .date-picker-wrapper .month-wrapper table tr.caption span.next:before {content: "\f105";}
.daterange-container .date-picker-wrapper .month-wrapper table tr.caption th:first-child, 
.daterange-container .date-picker-wrapper .month-wrapper table tr.caption th:last-child {
  width: auto;
  padding: .9375rem 10px;
}
.daterange-container .date-picker-wrapper .month-wrapper table tr.caption th.month-name {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color5);
  font-family: var(--Poppins);
  text-transform: capitalize;
}
.daterange-container .date-picker-wrapper .month-wrapper table tr.week-name th {
  font-family: var(--Poppins);
  font-weight: 500;
  color: #8392a5;
  padding: 10px;
  font-size: .9375rem;
}
.daterange-container .date-picker-wrapper .month-wrapper table thead tr th:first-child, 
.daterange-container .date-picker-wrapper .month-wrapper table tbody tr td:first-child {padding-left: 1.25rem;}
.daterange-container .date-picker-wrapper .month-wrapper table thead tr th:last-child, 
.daterange-container .date-picker-wrapper .month-wrapper table tbody tr td:last-child {padding-right: 1.25rem;}
.daterange-container .date-picker-wrapper .month-wrapper .gap {
  width: 2px;
  margin: 0;
  bottom: 0;
  top: 4.375rem;
  background-color: #ededf5;
  visibility: visible !important;
  float: none;
  position: absolute;
  left: calc(50% - .5px);
  height: initial !important;
}
.daterange-container .date-picker-wrapper .month-wrapper .gap > * {display: none;}
.daterange-container .date-picker-wrapper .month-wrapper table tbody tr td div.lastMonth, 
.daterange-container .date-picker-wrapper .month-wrapper table tbody tr td div.nextMonth {
  margin: 0;
  display: block !important;
  color: var(--color2);
}
.daterange-container .date-picker-wrapper .month-wrapper table tbody tr td div.toMonth {color: var(--color5) !important;}
.daterange-container .date-picker-wrapper .month-wrapper table tbody tr td div {
  font-size: .9375rem;
  padding: 13px 10px;
  font-weight: 500;
  font-family: var(--Poppins);
}
.daterange-container .date-picker-wrapper .month-wrapper table tr.week-name th {padding-top: 1.75rem;}
.daterange-container .date-picker-wrapper .month-wrapper table tbody tr td div.first-date-selected, 
.daterange-container .date-picker-wrapper .month-wrapper table tbody tr td div.last-date-selected {
  color: var(--bs-white) !important;
  background-color: var(--dp-primary-subtle) !important;
}
.daterange-container .date-picker-wrapper .month-wrapper table tbody tr td div.first-date-selected {
  -webkit-border-radius: var(--curve5) 0 0 var(--curve5);
  border-radius: var(--curve5) 0 0 var(--curve5);
}
.daterange-container .date-picker-wrapper .month-wrapper table tbody tr td div.last-date-selected {
  -webkit-border-radius: 0 var(--curve5) var(--curve5) 0;
  border-radius: 0 var(--curve5) var(--curve5) 0;
}
.daterange-container .date-picker-wrapper .month-wrapper table tbody tr td div.checked:not(.first-date-selected):not(.last-date-selected),
.daterange-container .date-picker-wrapper .month-wrapper table tbody tr td div.hovering {background-color: #0b6c3e5c !important;}
.daterange-container .date-picker-wrapper .month-wrapper table tbody tr td div.real-today {
  -webkit-border-radius: var(--curve5);
  border-radius: var(--curve5);
  background-color: var(--dp-primary) !important;
  color: var(--bs-white) !important;
}

/*===== Pay Now Style =====*/
.page-inner {
  min-height: 200vh;
  background-color: var(--bs-white);
  z-index: 1;
  padding: 2.8125rem;
  margin-top: -5.625rem;
  -webkit-border-radius: var(--curve15) var(--curve15) 0 0;
  border-radius: var(--curve15) var(--curve15) 0 0;
}
.page-top {margin-bottom: 2.8125rem;}
.page-top-left {gap: 6px;}
.page-top-left > h3 {font-weight: 700;}
.page-top-left > p {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: .55px;
}
.page-top-right {gap: 12px;}
.balance-box {
  -webkit-border-radius: var(--curve5);
  border-radius: var(--curve5);
  padding: 12px;
  line-height: 1;
  color: var(--bs-white);
  gap: 8px;
  min-width: 10.9375rem;
}
.balance-box span.balance-title {
  font-size: 14px;
  font-weight: 600;
}
.balance-box span.balance-amount {
  font-weight: 700;
  font-size: 1.125rem;
}
.payment-lists {gap: 1.75rem;}
.payment-lists.v2 {gap: .9375rem;}
.payment-box {
  border: 1px solid #d7e5fa;
  -webkit-border-radius: var(--curve5);
  border-radius: var(--curve5);
  padding: 1.25rem 2.8125rem;
  gap: 1.25rem;
  -webkit-transition: var(--transition2);
  transition: var(--transition2);
}
.payment-box.v2 {
  -webkit-box-shadow: 0 0 0.9375rem rgba(0,0,0,.15);
  box-shadow: 0 0 0.9375rem rgba(0,0,0,.15);
}
.payment-box-left {gap: 2.5rem;}
span.payment-check-icon {
  font-size: 2rem;
  color: #d4d4d4;
}
.payment-box-left > h5 {
  font-size: 1.125rem;
  letter-spacing: .55px;
}
.payment-box-right {
  gap: 2.1875rem;
}
.payment-box:not(.v2):hover, 
.payment-box:not(.v2).active {
  background-color: rgba(255,220,220,.55);
  border-color: #ff7d7d;
  -webkit-box-shadow: 0 0 .9375rem rgba(198,218,248,.2);
  box-shadow: 0 0 .9375rem rgba(198,218,248,.2);
}
.payment-box:hover span.payment-check-icon, 
.payment-box.active span.payment-check-icon {color: var(--dp-primary);}
.payment-box-right .theme-btn {
  font-size: 1.125rem;
  font-weight: 500;
  min-width: 10.625rem;
}
.payment-price {
  letter-spacing: .55px;
  gap: 2px;
}
.payment-price > h5 {
  font-size: 1.4375rem;
  font-weight: 500;
}

/*===== Empty Box Style =====*/
.page-empty-box {min-height: 50vh;}
.empty-box {gap: .9375rem;}
.empty-box > span {
  font-size: 15rem;
  line-height: 1;
}
.empty-box > span svg {height: 18.125rem;}
.empty-box > h4 {
  color: rgba(50,53,92,.55);
  font-size: 1.5625rem;
  font-weight: 700;
}

/*===== Table Style =====*/
.page-table-box {
  border: 1px solid #d7e5fa;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0 0 0.9375rem rgba(0,0,0,.07);
  box-shadow: 0 0 0.9375rem rgba(0,0,0,.07);
}
.page-table-box table {width: 100%;}
.page-table-box table thead {background-color: #f7f7f7;}
.page-table-box table thead tr th {
  padding: 1.15625rem 2.1875rem;
  color: var(--color5);
  font-size: 1.125rem;
}
.page-table-box table tbody tr {border-bottom: .5px solid rgba(151,151,151,.22);}
.page-table-box table tbody tr td {
  padding: 1.7rem 2.1875rem;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color5);
}
.page-table-box table thead tr th:last-child,
.page-table-box table tbody tr td:last-child {text-align: end;}
.page-table-box table tbody tr td .theme-btn {
  font-size: 13px;
  padding: 11px .9375rem;
}
.act-btns {gap: 12px;}
.act-btns > a {
  color: #979797;
  display: block;
  font-size: 1.375rem;
  line-height: 1;
}
.act-btns > a:hover,
.act-btns > a:focus {color: var(--dp-primary);}
.act-btns > a svg {
  height: 1.25rem;
  fill: #979797;
}
.act-btns > a:hover svg {fill: var(--dp-primary);}
.approved {color: #61bf7e;}

/*===== Modal Style =====*/
body.modal-open {padding-right: 0 !important;}
.modal-backdrop {z-index: 99999;}
.modal {z-index: 999999;}
.dp-modal .modal-dialog {max-width: 27.5rem;}
.dp-modal .modal-content {
  -webkit-border-radius: var(--curve10);
  border-radius: var(--curve10);
  padding: 2.1875rem 3.75rem 2.1875rem 2.8125rem;
}
.dp-modal .modal-header {
  border: 0;
  padding: 0;
  margin-bottom: 1.5625rem;
}
.dp-modal .modal-header .modal-title {
  font-size: 1.75rem;
  font-weight: 700;
}
.dp-modal .modal-header > button {
  background-color: transparent;
  padding: 0;
  color: #727272;
  font-size: 1.5rem;
  position: absolute;
  right: 1.0625rem;
  top: 1.0625rem;
  line-height: 1;
}
.dp-modal .modal-header > button:hover {color: var(--dp-primary);}
.dp-modal .modal-body {padding: 0;}
.dp-modal .modal-body form {gap: 1.125rem;}
.dp-modal .modal-body .field-box > label {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 10px;
}
.dp-modal .modal-body .selectpicker .chosen-container a.chosen-single, 
.dp-modal .modal-body .field-input > input, 
.fileUploadBox > span {
  background-color: #f5f6fa;
  border: 1px solid #d5d5d5;
  font-size: 14px;
  color: #7e7e7e;
  padding: 11px 2rem 11px .9375rem;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}
.dp-modal .modal-body .field-input > input, 
.fileUploadBox > span {height: 3rem;}
.fileUploadBox input#docFile {
  position: absolute;
  z-index: 99;
  opacity: 0;
}
.fileUploadBox > i {
  z-index: 9;
  right: .9375rem;
  line-height: 3rem;
  font-size: 1rem;
  color: #7e7e7e;
}
.fileUploadBox > i:hover,
.fileUploadBox > input:hover + i {color: var(--dp-primary);}
.fileUploadBox > i svg {
  fill: #7e7e7e;
  height: 1rem;
}
.fileUploadBox > i:hover svg {fill: var(--dp-primary);}
.dp-modal .modal-body form .field-btn {margin-top: 1.6875rem;}
.dp-modal .modal-body form .field-btn .theme-btn {
  -webkit-border-radius: var(--curve5);
  border-radius: var(--curve5);
  font-weight: 500;
}

/*===== Product Style =====*/
.product-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1.25rem;
}
.product-box {
  -webkit-border-radius: var(--curve5);
  border-radius: var(--curve5);
}
.product-box:hover .product-img img {
  -webkit-transform: scale(1.1) rotate(3deg);
  transform: scale(1.1) rotate(3deg);
}
.product-info {
  border-left: 1px solid #d7e5fa;
  border-right: 1px solid #d7e5fa;
  padding: 1.25rem 1.5625rem 1rem;
  gap: 2px;
}
.product-info > h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--bs-black);
}
.product-info > h3 a:hover, 
.product-info > h3 a:focus {color: var(--dp-primary);}
.product-info > span {
  font-size: 14px;
  color: rgba(0,0,0,.75);
}
.product-bottom {
  padding: .9375rem 1.5625rem;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--bs-white);
}
.product-bottom a.cart-btn:hover, 
.product-bottom a.cart-btn:focus {color: var(--color5);}

/*===== Report Style =====*/
.report-wrapper {margin-bottom: -1.25rem;}
.report-wrapper .report-left-side, 
.report-wrapper .report-right-side {margin-bottom: 1.25rem;}
.report-left-side, 
.report-right-side {
  min-height: 40rem;
  border: 1px solid #d7e5fa;
  -webkit-border-radius: var(--curve15);
  border-radius: var(--curve15);
}
.report-left-side-head {
  border-bottom: 1px solid #d7e5fa;
  padding: 1.5625rem 2.5rem;
}
.report-left-side-head > h4 {
  font-size: 1.25rem;
  font-weight: 600;
}
.report-left-side-body {padding: 1.25rem 12px 2.5rem 2.5rem;}
.report-tabs {
  max-height: 31.25rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5625rem;
  overflow-x: hidden;
  padding-right: 2.8125rem;
}
.report-tabs::-webkit-scrollbar,
.responsive-menu > ul::-webkit-scrollbar {width: 4px;}
.report-tabs::-webkit-scrollbar-track,
.responsive-menu > ul::-webkit-scrollbar-track {
  background-color: rgba(215,229,250,.35);
  -webkit-border-radius: var(--curve10);
  border-radius: var(--curve10);
}
.report-tabs::-webkit-scrollbar-thumb,
.responsive-menu > ul::-webkit-scrollbar-thumb {
  background-color: #d7e5fa;
  -webkit-border-radius: var(--curve10);
  border-radius: var(--curve10);
  height: 4.375rem;
}
.report-tabs > li {
  -webkit-border-radius: var(--curve3);
  border-radius: var(--curve3);
  background-color: rgba(247,247,247,.55);
  border: 1px solid #d7e5fa;
  font-size: 1.125rem;
  color: var(--color5);
  padding: 13.21px 1.25rem;
  gap: 3px;
  display: flex;
  flex-direction: column;
}
.report-tabs > li h6 {
  font-weight: 400;
  font-size: inherit;
}
.report-tabs > li span {font-weight: 500;}
.report-right-side {padding: 4.375rem 4.375rem 3.125rem;}
.report-right-side-head {margin-bottom: 3.125rem;}
.report-right-side-head > h3 {
  font-size: 1.5625rem;
  font-weight: 700;
}
.report-details {margin-bottom: -3.4375rem;}
.report-details .report-detail-item {margin-bottom: 3.4375rem;}
.report-detail-item {
  font-size: 1.125rem;
  gap: 10px;
}
.report-detail-item > h6 {
  font-size: inherit;
  font-weight: 600;
}

/*===== Rating Style =====*/
.rating-box {
  padding: 2.625rem 4.0625rem 2.625rem 2.8125rem;
  -webkit-box-shadow: 0 0 0.9375rem rgba(0,0,0,.15);
  box-shadow: 0 0 0.9375rem rgba(0,0,0,.15);
  border: 1px solid #d7e5fa;
  -webkit-border-radius: var(--curve5);
  border-radius: var(--curve5);
  gap: 1.25rem;
  -webkit-transition: var(--transition2);
  transition: var(--transition2);
}
.rating-box > h5 {font-size: 1.125rem;}
.rating-stars {
  font-size: 1.5rem;
  gap: 8px;
}
.rating-stars > i.on {color: #f9c32e;}
.rating-stars > i.off {color: var(--color4);}

/*===== Capabilities Style =====*/
.capabilities-box {
  border: 1px solid #d7e5fa;
  -webkit-border-radius: var(--curve5);
  border-radius: var(--curve5);
  -webkit-box-shadow: 0 0 0.9375rem rgba(0,0,0,.15);
  box-shadow: 0 0 0.9375rem rgba(0,0,0,.15);
  gap: .9375rem;
  padding: 1.25rem;
}
.cap-item {
  border: 1px solid #d7e5fa;
  -webkit-border-radius: var(--curve3);
  border-radius: var(--curve3);
  background-color: #f7f7f7;
  padding: 6px 1.25rem;
  flex: 0 0 calc(13.4375rem - 7.5px);
}
.cap-item > span {
  font-size: 1.125rem;
  color: var(--color5);
}
.cap-item > span strong {font-weight: 500;}

/*===== Support Style =====*/
.support-left-side {
  border: 1px solid #d7e5fa;
  background-color: #f8f8f8;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  padding: 2.8125rem 3.4375rem 1.875rem 1.875rem;
  gap: 1.5625rem;
}
.support-left-side-head {gap: 5px;}
.support-left-side-head > h3 {
  font-weight: 700;
  font-size: 1.375rem;
}
.support-left-side-head > p {
  font-size: .9375rem;
  font-weight: 500;
}
.support-left-side-body {gap: 1.875rem;}
.support-search button {
  padding: 0;
  background-color: transparent;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3.125rem;
  opacity: .7;
  font-size: 1.125rem;
}
.support-search button:hover, 
.support-search button:focus {
  color: var(--dp-primary);
  opacity: 1;
}
.support-search input {
  width: 100%;
  background-color: #efefef;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  height: 3rem;
  color: var(--bs-black);
  padding: 10px 1.25rem 10px 3.4375rem;
}
.support-left-menu {gap: 1.25rem;}
.support-left-menu > li {
  font-size: 1.125rem;
  color: var(--color5);
}
.support-left-menu > li a {
  display: flex;
  border: 2px solid transparent;
  padding: 0 1.25rem;
  -webkit-border-radius: var(--curve3);
  border-radius: var(--curve3);
  position: relative;
  z-index: 1;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.support-left-menu > li a svg {
  fill: var(--dp-primary);
  height: 1rem;
}
.support-left-menu > li a i {
  color: var(--dp-primary);
  font-size: 1.375rem;
}
.support-left-menu > li a i *:before {color: inherit !important;}
.support-left-menu > li a.active {
  border-color: var(--dp-primary);
  font-weight: 600;color: var(--dp-primary);
  padding: 12.5px 1.25rem;
}
.support-left-menu > li a:before {
  content: "";
  inset: 4px;
  background-color: #def4e9;
  -webkit-border-radius: inherit;
  border-radius: inherit;
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.support-left-menu > li a.active:before {
  content: "";
  opacity: 1;
}
.support-left-menu > li a:hover, 
.support-left-menu > li a:focus {color: var(--dp-primary);}
.call-to-action {
  margin-top: 1.875rem;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  padding: 1.5625rem 1.5625rem 1.5625rem;
  gap: 3px;
}
.call-to-action > h3 {
  color: var(--bs-white);
  font-weight: 500;
  font-size: 1.25rem;
}
.call-to-action > p {
  color: var(--bs-white);
  opacity: .45;
}
.call-to-action .theme-btn {
  background-color: var(--bs-white);
  color: var(--dp-primary);
  border-color: var(--bs-white);
  font-weight: 500;
}
.call-to-action > p + a {margin-top: 1.5625rem;}
.call-to-action .theme-btn:hover, 
.call-to-action .theme-btn:focus {
  background-color: transparent;
  color: var(--bs-white);
}
.support-right-side, 
.support-right-side-head, 
.ticket-list {gap: 1.5625rem;}
.create-ticket {
  padding: 8px .9375rem 8px 8px;
  font-weight: 500;
  color: var(--dp-primary);
  gap: 12px;
  box-shadow: 0 0 0.9375rem rgba(0,0,0,.15);
  -webkit-border-radius: var(--curve5);
  border-radius: var(--curve5);
  border: 1px solid #d7e5fa;
}
.create-ticket i {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  width: 2rem;
  justify-content: center;
  -webkit-border-radius: var(--curve4);
  border-radius: var(--curve4);
  background-color: rgba(11,108,62,.15);
  color: inherit;
  font-size: 1.125rem;
}
.create-ticket i svg {
  fill: var(--dp-primary);
  height: 1.1875rem;
}
.create-ticket:hover, 
.create-ticket:focus {
  background-color: var(--dp-primary);
  border-color: var(--dp-primary);
  color: var(--bs-white);
}
.create-ticket:hover i, 
.create-ticket:focus i {background-color: rgba(255,255,255,.15);}
.create-ticket:hover i svg, 
.create-ticket:focus i svg {fill: var(--bs-white);}
.sort-dropdown {
  border: 1px solid #d7e5fa;
  -webkit-border-radius: var(--curve5);
  border-radius: var(--curve5);
  padding: 13px;
  gap: 12px;
  font-weight: 500;
}
.sort-dropdown svg {height: 14px;}
.sort-dropdown i {font-size: .9375rem;}
.sort-dropdown .selectpicker {margin-left: -6px;}
.sort-dropdown .selectpicker .chosen-container a.chosen-single {
  border: 0;
  padding: 0 2.1875rem 0 0;
  color: var(--dp-primary);
}
.sort-dropdown .selectpicker .chosen-container a.chosen-single:before {
  line-height: 1.5rem;
  right: 0;
  font-size: 1.25rem;
  color: var(--color5);
  opacity: .6;
}
.sort-dropdown .selectpicker .chosen-container .chosen-drop {
  min-width: 7.5rem;
  right: 0;
}
.ticket-box {
  border: 1px solid #d7e5fa;
  -webkit-border-radius: var(--curve5);
  border-radius: var(--curve5);
  padding: 1.875rem 3.75rem 1.875rem 2.8125rem;
}
.ticket-box > h4 {font-size: 1.125rem;}
.ticket-box > h4 a:hover, 
.ticket-box > h4 a:focus {color: var(--dp-primary);}
.arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-border-radius: var(--curve3);
  border-radius: var(--curve3);
  background-color: #d4d4d4;
  height: 1.875rem;
  width: 1.875rem;
  color: var(--bs-white);
  font-size: 1.25rem;
}
.arrow-btn:hover, 
.arrow-btn:focus {background-color: var(--dp-primary);}

/*===== News Style =====*/
.news-left-side {
  border: 1px solid #d7e5fa;
  background-color: #f8f8f8;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  padding: 2.8125rem 3.4375rem 1.875rem 1.875rem;
  gap: 1.5625rem;
  min-height: 43.4375rem;
}
.news-left-side-head {gap: 5px;}
.news-left-side-head > h3 {
  font-weight: 700;
  font-size: 1.375rem;
}
.news-left-side-head > p {
  font-size: .9375rem;
  font-weight: 500;
}
.news-left-side-body {gap: 1.875rem;}
.news-left-menu {gap: 1.25rem;}
.news-left-menu > li {
  font-size: 1.125rem;
  color: var(--color5);
}
.news-left-menu > li a {
  display: flex;
  border: 2px solid transparent;
  padding: 0 1.25rem;
  -webkit-border-radius: var(--curve3);
  border-radius: var(--curve3);
  position: relative;
  z-index: 1;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.news-left-menu > li a svg {
  fill: var(--dp-primary);
  height: 1rem;
  opacity: 0;
  -webkit-transform: translateX(1.25rem);
  transform: translateX(1.25rem);
}
.news-left-menu > li a.active svg {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.news-left-menu > li a.active {
  border-color: var(--dp-primary);
  font-weight: 600;color: var(--dp-primary);
  padding: 12.5px 1.25rem;
}
.news-left-menu > li a:before {
  content: "";
  inset: 4px;
  background-color: #def4e9;
  -webkit-border-radius: inherit;
  border-radius: inherit;
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.news-left-menu > li a.active:before {
  content: "";
  opacity: 1;
}
.news-left-menu > li a:hover, 
.news-left-menu > li a:focus {color: var(--dp-primary);}
.news-list {gap: 1.5625rem;}
.news-box {
  border: 1px solid #d7e5fa;
  -webkit-border-radius: var(--curve5);
  border-radius: var(--curve5);
  padding: 2.8125rem 1.5625rem 2.5rem 2.8125rem;
}
.news-info {gap: 13px;}
.news-info > h4 {font-size: 1.125rem;}
.news-info > h4 a:hover, 
.news-info > h4 a:focus {color: var(--dp-primary);}
.news-info > p {letter-spacing: .55px;}
.news-btn .theme-btn {white-space: nowrap;}

/*===== Profile Style =====*/
.profile-inner {
  max-width: 56.25rem;
  gap: 1.875rem;
}
.profile-info {
  max-width: 36.875rem;
  flex: 0 0 36.875rem;
  gap: 4.6875rem;
}
.profile-list {gap: 12px;}
.profile-info .theme-btn {font-weight: 500;}
.profile-list > li {
  -webkit-border-radius: var(--curve5);
  border-radius: var(--curve5);
  font-size: 1.125rem;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 1.34375rem 1.875rem;
}
.profile-list > li:nth-child(2n+1) {background-color: #f0f5f8;}
.profile-list > li span.seprater {
  font-weight: 700;
  opacity: .4;
  margin-left: -8rem;
}
.profile-list > li strong {
  font-weight: 500;
  color: var(--color5);
}
.profile-list > li > *:not(span.seprater) {
  flex: 0 0 calc(50% - 1.5rem);
  max-width: calc(50% - 1.5rem);
}
.profile-img-info {
  flex: 0 0 12.5rem;
  max-width: 12.5rem;
  gap: 5px;
}
.profile-img-box {
  width: 12.5rem;
  height: 12.5rem;
}
.profile-img {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
  border: 4px solid #eaeaea;
  -webkit-box-shadow: 0 0 .9375rem rgba(0,0,0,.15);
  box-shadow: 0 0 .9375rem rgba(0,0,0,.15);
}
.profile-img-edit {
  height: 2.75rem;
  width: 2.75rem;
  background-color: var(--bs-white);
  line-height: 2.75rem;
  text-align: center;
  color: var(--dp-primary);
  font-size: 1.25rem;
  right: 5px;
  bottom: 5px;
  position: absolute;
  -webkit-box-shadow: 0 0 5px rgba(0,0,0,.1);
  box-shadow: 0 0 5px rgba(0,0,0,.1);
}
.profile-img-edit:hover {
  background-color: var(--dp-primary);
  color: var(--bs-white);
}
.profile-img-edit > input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 99;
}
.profile-img-box + h4 {margin-top: .9375rem;}
.profile-img-info > h4 {
  font-size: 1.125rem;
  font-weight: 700;
}
.profile-img-info > p {font-weight: 500;}