.pnl_wrap {
width: 100%;
height: auto;
}

.pnl_hdbx {
width: 100%;
height: 70px;
display: flex;
justify-content: space-between;
}

.pnl_hdlfbx {
width: auto;
height: 70px;
}

.pnl_hdinf {
font-family: 'roboto', sans-serif; 
font-size: 20px;
margin-right: 20px;
color: rgb(1, 64, 116);
font-weight: 600;
}

.pnl_hdlfbx p:nth-child(1){
font-family: 'Lato', sans-serif; 
font-size: 28px;
margin-left: 20px;
color: black;
padding-top: 14px;
font-weight: 600;
}

.pnl_hdlfbx p:nth-child(2){
font-family: 'Lato', sans-serif; 
font-size: 16px;
margin-left: 20px;
color: rgb(124, 124, 124);
padding-top: 8px;
}

.pnl_hdrgbx {
width: auto;
height: 70px;  
display: flex;
justify-content: end;
align-items: center; 
padding-right: 20px;
}

.pnl_hdinbx {
min-width: 200px;
border: 1px black solid;
height: 70px;
display: flex;
padding-left: 10px;
padding-right: 10px;
justify-content: center;
align-items: center;
margin-left: 5px;
margin-right: 5px;
}


/* DATE RANGE PICKER  */
.dprngcn {
width: 180px;
height: 35px;
text-align: center;
position: relative;
margin-right: 15px;
border-radius: 3px;
display: flex;
justify-content: center;
align-items: center;
transition: all 100ms ease-in-out;
background-color: #fff;
border: 1px solid #d6d6e7;
border-radius: 3px;
color: rgb(35, 38, 59);
box-shadow: inset 0 1px 4px 0 rgb(119 122 175 / 30%);
cursor: default;
z-index: 1000;
}

.dprngcn:hover{
outline: 0;
border-color: #2260ff;
background-color: #dee7ff;
color: #0043ed;
}

.dprngcn_active {
outline: 0;
border-color: #2260ff;
background-color: #dee7ff;
color: #0043ed;
}

.dprgbtn {
overflow: hidden;
width: 100%;
outline: none;
font-family: 'Inter', sans-serif; 
border-radius: 3px;
font-size: 14px;
padding-top: 11px;
padding-bottom: 11px;
}

.dprgbtn i {
margin-right: 5px;
}

/* MAIN WRAPPER */
.dprngincn {
position: absolute;
right: 0px;
top: 30px;
width: auto;
border: 1px solid #e0e0e0;
background-color: white;
box-shadow: 0px 12px 12px 5px rgba(188, 188, 188, 0.4);

/* New for animation */
overflow: hidden;
max-height: 0;
opacity: 0;
margin-top: 0;
transition: all 0.3s ease;
}

/* INPUT CONTAINER  */
.dprngKicn {
width: 100%;
height: auto;
}

/* OPTION CONTAINER  */
.dpraccn {
width: 100%;
height: 50px;
background-color: rgb(250, 249, 249);
display: flex;
justify-content: end;
padding-right: 15px;
align-items: center;
}

.dpraccn button  {
margin-left: 5px;
}

















.pnl_datin {
position: relative;
cursor: text;
font-size: 13px;
padding: 8px;
height: 35px;
background-color: #fff;
border: 1px solid #d6d6e7;
border-radius: 3px;
color: rgb(35, 38, 59);
box-shadow: inset 0 1px 4px 0 rgb(119 122 175 / 30%);
overflow: hidden;
transition: all 100ms ease-in-out;
outline: none;
font-family: 'Inter', sans-serif; 
margin-right: 5px;
margin-left: 5px;
}

.pnl_datin:focus {
border-color: #2260ff;
box-shadow: 0 0 0 4px #dfe6f8;
}

.pnl_datsrc {
position: relative;
cursor: text;
font-size: 13px;
padding: 8px;
height: 35px;
background-color: #fff;
border: 1px solid #d6d6e7;
border-radius: 3px;
color: rgb(35, 38, 59);
box-shadow: inset 0 1px 4px 0 rgb(119 122 175 / 30%);
overflow: hidden;
transition: all 100ms ease-in-out;
outline: none;
font-family: 'Inter', sans-serif; 
margin-right: 5px;
margin-left: 5px;
width: 250px;
}

.pnl_datsrc:focus {
border-color: #2260ff;
box-shadow: 0 0 0 4px #dfe6f8;
}

.pnl_datsel {
position: relative;
cursor: default;
font-size: 13px;
padding: 8px;
height: 35px;
background-color: #fff;
border: 1px solid #d6d6e7;
border-radius: 3px;
color: rgb(35, 38, 59);
box-shadow: inset 0 1px 4px 0 rgb(119 122 175 / 30%);
overflow: hidden;
transition: all 100ms ease-in-out;
outline: none;
font-family: 'Inter', sans-serif; 
margin-right: 10px;
margin-left: 5px;
 -webkit-appearance: none; /* Safari/Chrome */
  -moz-appearance: none;    /* Firefox */
  appearance: none;         /* Standard */
}

.pnl_datsel:focus {
border-color: #2260ff;
box-shadow: 0 0 0 4px #dfe6f8;
}

.pnl_hdintx {
font-family: 'Lato', sans-serif; 
font-size: 14px;
color: rgb(48, 48, 48);
margin-left: 5px;
margin-right: 5px;
}


/* ANALYTICS SECTION  */
/* STATISTICS SECTION  */
.pnl_grpbx {
width: 98%;
margin-left: 1%;
margin-right: 1%;
min-height: 600px;
margin-top: 20px;
display: block;
margin-bottom: 20px;
padding-bottom: 20px;
border: 1px solid #d6d6e7;
}

/* CARD BOX CONTAINER */
.pnl_anl_ebcn {
width: 100%;
height: auto;
padding-top: 20px;
display: flex;
justify-content: start;
align-items: center;
padding-left: 20px;
}

/* EACH CARDS */
.pnl_anlecbx {
width: 14%;
height: 115px;
border: 1px solid #d6d6e7;
color: rgb(35, 38, 59);
background-color: white;
box-shadow: inset 0 1px 4px 0 rgb(119 122 175 / 30%);
}


.pnl_anlecbx_hd {
font-family: "Mukta", serif;
font-optical-sizing: auto;
font-size: 16px;
padding-top: 10px;
padding-left: 15px;
color: rgb(151, 151, 151);
font-weight: 400;
}

.pnl_anlecbx_in {
width: 100%;
height: 40px;
}

.pnl_anlecbx_in p:nth-child(1) {
font-family: "Roboto", serif;
font-optical-sizing: auto;
font-size: 23px;
padding-top: 2px;
padding-left: 15px;
color: rgb(0, 0, 0);
font-weight: 600;
}

.pnl_anlecbx_in p:nth-child(2) {
font-family: "Roboto", serif;
font-optical-sizing: auto;
font-size: 15px;
padding-top: 8px;
padding-right: 15px;
color: rgb(4, 170, 1);
font-weight: 600;
float: right;
}

.pnl_anlecbx_bbx {
width: 100%;
height: 35px;
display: flex;
justify-content: space-between;
align-items: center;
}

.pnl_anlecbx_bbx p{
font-family: "Roboto", serif;
font-optical-sizing: auto;
font-size: 14px;
padding-left: 10px;
color: rgb(30, 22, 248);
font-weight: 600;
}


.pnanl_bl {
background-color: #4285f4;
color: white;
}
.pnanl_bl p, .pnanl_bl .pnl_anlecbx_in p, .pnanl_bl i {
color: white
}


/* GRAPHS CONTAINER  */
.pnl_grp_cnt {
width: 100%;
padding-top: 50px;
height: 400px;
padding-left: 20px;
padding-right: 20px;
margin-top: 20px;
display: flex;
}

#myChart {
/* border: 1px solid #eaeaf5; */
box-shadow: inset 0 1px 4px 0 rgb(119 122 175 / 30%);
padding: 20px;
width: 68%;
}

.pnl_grp_cntn_chbx {
width: 30%;
height: auto;
padding-left: 20px;
/* box-shadow: inset 0 1px 4px 0 rgb(119 122 175 / 30%); */
margin-left: 2%;
}

.pnl_grp_cntn_chbx div {
height: auto;
border: 1px black solid;
display: flex;
justify-content: center;
align-items: center;
}

/* TRAFFIC SOURCE CHART BOX  */
.pnl_pie_ebcn {
width: 98%;
margin-left: 1%;
margin-right: 1%;
margin-top: 15px;
padding-left: 20px;
padding-right: 20px;
height: 120px;
padding-top: 20px;
border: 1px solid #d6d6e7; 
}

/* BOTH SMALL HEADERS  */
.pnl_pie_ebcn p:nth-child(1), .pnl_anal_tbs p:nth-child(1){
font-family: 'Lato', sans-serif; 
font-size: 18px;
text-align: left;
font-weight: 400;
padding-top: 10px;
padding-left: 0px;
color: rgb(50, 50, 50);
padding-bottom: 8px;
}

/* ANALYSIS TABLE  */
.pnl_anal_tbs {
width: 98%;
margin-left: 1%;
margin-right: 1%;
margin-top: 15px;
min-height: 400px;
border: 1px solid #d6d6e7; 
margin-bottom: 15px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
}

/* TABLE  */
.pnl_anal_tbmn {
width: 100%;
height: auto;
margin-top: 30px;
border-collapse: collapse;
}

.pnl_anal_tbmn thead tr {
width: 100%;
height: 40px;
}

/* THEAD CELL  */
.pnl_anal_tbmn thead tr th {
font-family: 'Mukta', sans-serif; 
font-size: 14px;
text-align: left;
color: rgb(62, 62, 62);
padding-left: 10px;
background-color: rgb(242, 242, 242);
border-top: 1px rgb(208, 208, 208) solid;
border-bottom: 1px rgb(208, 208, 208) solid;
}

/* MAIN CELL  */
.pnl_anal_tbmn tbody tr td {
font-family: 'Mukta', sans-serif; 
font-size: 16px;
color: rgb(27, 27, 27);
border-top: 1px rgb(168, 168, 168) solid;
/* border-bottom: 1px rgb(168, 168, 168) solid; */
padding: 10px;
white-space: nowrap;
overflow: hidden; 
text-overflow: ellipsis; 
}

.pnl_anal_tbmn tbody tr td i{
cursor: pointer;
}

.pnl_anal_tbmn tbody tr:hover {
background-color: rgb(244, 244, 244);
}

/* HEADER ONINE VIEWER  */
.dsb_hd_onlbx {
width: auto;
heu
}














/* PANEL TABLE  */
.pnl_bdbx {
width: 100%;
min-height: 800px;
}

.pntb_hdbx {
width: 100%;
min-height: 60px;
display: flex;
justify-content: start;
align-items: center;
margin-top: 10px;
}

.pntb_srcbx {
display: block;
height: 50px;
width: auto;
margin-left: 15px;
padding-top: 9px;
}

.tebl_src_lbl {
font-size: 14px;
font-weight: 400;
color: grey;
font-family: 'Inter', sans-serif;   
padding-top: 10px;
margin-left: 7px;

}

.pntb_cn {
width: 98%;
margin-left: 1%;
margin-right: 1%;
height: 800px;
overflow-x: auto;
overflow-y: auto;
margin-top: 25px;
margin-bottom: 10px;
}

.pntb_cn table {
border-collapse: collapse;
}

.pntbl_hr td {
background-color: #213864;
font-size: 15px;
color: #fdfdfd;
font-size: bold;
font-family: 'Roboto', sans-serif;
border: 1px rgb(252, 252, 252) solid;
padding: 7px;
position: sticky;
margin-top: 0px;
top: 0;
white-space: nowrap;
overflow: hidden; 
text-overflow: ellipsis; 
}

.esq334d {
max-width: 300px;
white-space: nowrap;
overflow: hidden; 
text-overflow: ellipsis; 
}

.pntbl_br {
background-color: rgb(255, 255, 255);
box-shadow: 0px 0px 15px 15px rgba(249, 249, 249, 0.308);
transition-duration: 0.1s;
}


.pntbl_br td {
border: 1px solid rgb(242, 242, 242);
font-family: 'Roboto', sans-serif;
font-size: 15px;
padding: 10px;
white-space: nowrap;
overflow: hidden; 
text-overflow: ellipsis; 
}

.tbbtrw {
border-bottom: 2px rgba(206, 206, 206, 0.456) inset;
}

.pntbl_br td input[type="checkbox"] {
width: 18px;
height: 18px;
}

.pntb_inbxf {
width: auto;
height: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 5px;
padding-right: 5px;
}

.pntb_inf {
padding-right: 10px;
}

.pntb_gtd {
color: rgb(1, 130, 1);
background-color: rgb(228, 255, 228);
padding: 5px;
border: 1px rgb(194, 247, 194) solid;
border-radius: 5px;
width: fit-content;
margin-right: 10px;
}

.pntb_ytd {
color: rgb(128, 130, 1);
background-color: rgb(254, 255, 219);
padding: 5px;
border: 1px rgb(236, 246, 161) solid;
border-radius: 5px;
width: fit-content;
margin-right: 10px;
}

.pntb_rtd {
color: rgb(252, 59, 59);
background-color: rgb(255, 228, 228);
padding: 5px;
border: 1px rgb(247, 194, 194) solid;
border-radius: 5px;
width: fit-content;
margin-right: 10px;
}

.pntb_btd {
color: rgb(6, 147, 182);
background-color: rgb(228, 252, 255);
padding: 5px;
border: 1px rgb(194, 244, 247) solid;
border-radius: 5px;
width: fit-content;
margin-right: 10px;
}

.pntb_pimg {
width: 35px;
height: 35px;
border-radius: 50%;
margin-right: 10px;
}

.pntb_ftbx{
width: 100%;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
display: none;
}


.dfr45e {
max-width: 400px;
white-space: nowrap;
overflow: hidden; 
text-overflow: ellipsis;     
}



/* --------- GALLERY --------- */
.pntb_glrybx {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.pntb_glrybx .pntb_glry_ecbx {
  max-width: 24%;
  height: 230px;
  overflow: hidden;
  position: relative;
  margin: 3px;
  justify-content: center;
  align-items: center;
  display: flex;
  background-color: rgb(233, 233, 233);
  border: 1px rgb(195, 195, 195) solid;
}

.glrbnnrim {
max-width: 58%!important;
}

.pntb_glrybx .pntb_glry_ecbx img {
  width: 100%;
  max-height: 230px;;
  transition-duration: 0.1s;
}

.pntb_glrybx .pntb_glry_ecbx img:hover {
  opacity: 70%;
}

.pntb_glrybx .pntb_glry_ecbx div:nth-child(2) {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px rgb(231, 231, 231) solid;
  background-color: white;
  position: absolute;
  right: 10px;
  top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition-duration: 0.1s;
}

.pntb_glrybx .pntb_glry_ecbx div:nth-child(2):hover {
opacity:70%;
}

.pntb_glrybx .pntb_glry_ecbx div:nth-child(2) i {
color: rgb(120, 120, 120);
}



/* ---------- MARKETING ---------- */
.pnl_mrk_bx {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: start;
align-items: center;
}

.pnl_mrk_ecbx {
width: 23%;
height: 200px;
margin: 10px;
border-left: 1px solid #D4DBE0;
background-color: white;
border-radius: 10px;
box-shadow: 0px 4px 12px 0px rgba(83, 83, 83, 0.4);
display: flex;
}

.pnl_mrk_lfbx {
width: 30%;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}

.pnl_mrk_lfbx img {
width: 50px;
}

.pnl_mrk_rgbx {
width: 70%;
height: 200px;
}

.pnl_mrk_rgbx p:nth-child(1) {
font-size: 18px;
font-weight: 600;
line-height: 27px;
margin-top: 15px;
color: rgb(0, 0, 0);
font-family: 'Inter', sans-serif;
}

.pnl_mrk_rgbx p:nth-child(2) {
font-size: 12px;
line-height: 15px;
margin-top: 10px;
font-family: 'Inter', sans-serif;
background-color: rgb(240, 253, 253);
border: 3px rgb(184, 250, 252) solid;
color: rgb(4, 189, 196);
width: 95%;
margin-right: 10%;
padding: 5px;
border-radius: 5px;
height: 90px;
}

.pnl_mrk_rgbx button {
margin-top: 10px;
}



.pnl_stprcn {
width: 150px;
height: 100px;
margin-left: auto;
position: relative;
}

.pnl_stprbx {
width: 100px;
height: 100px;
float: right;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(248, 248, 248);
overflow: hidden;
border: 1px rgb(224, 224, 224) solid;
}

.pnl_stprim {
width: 80px;
height: 80px;
}

.pnl_stpredm {
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px rgb(219, 219, 219) solid;
top: 80px;
background-color: white;
right: -10px;
display: flex;
justify-content: center;
align-items: center;
transition-duration: 0.1s;
}

.pnl_stpredm:hover {
opacity: 0.8;
}

.pnl_stpredm i {
color: grey;
}


.pntb_cn table tbody {
padding-top: 6px;
}
/* LIST SKELITON LOADER  */

.lstsklldr {
height: 80px;
margin: 1px;
margin-top: 4px;
border-radius: 6px;
background: linear-gradient(
100deg,
rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0) 60%
) rgb(238 238 238);
background-size: 200% 100%;
background-position-x: 180%;
animation: 1.5s loading2 ease-in-out infinite;
transition-duration: 0.5s;
border: 6px rgb(255, 255, 255) solid;
}
@keyframes loading2 {
  to {
    background-position-x: -20%;
  }
}

.lstsklldr td{
    margin-top: 4px;
}

.dv_stsklldr {
height: 50px;
margin: 1px;
margin-top: 4px;
border-radius: 6px;
background: linear-gradient(
100deg,
rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0) 60%
) rgb(238 238 238);
background-size: 200% 100%;
background-position-x: 180%;
animation: 1.5s loading2 ease-in-out infinite;
transition-duration: 0.5s;
border: 6px rgb(255, 255, 255) solid;
}
@keyframes loading2 {
  to {
    background-position-x: -20%;
  }
}



.scrobtnbx {
width: 70px;
height: 40px;
position: fixed;
bottom: 30px;
right: 130px;
display: flex;
justify-content: space-between;
align-items: center;
display: none;
}

.scrobtnbx img:nth-child(1) {
width: 40px;
transform: rotate(180deg);
}

.scrobtnbx img:nth-child(2) {
width: 40px;
margin-left: 15px;
}

.scrobtnbx img:nth-child(1):hover, .scrobtnbx img:nth-child(2):hover { 
opacity: 80%;
}