:root {
    --CrTe: hsla(309, 45%, 71%, 0.7); /*ColorTheme For Background, Border Color >etc*/
    --CrTeH: 309deg; /*Color Theme Hue*/
    --CrTeTt: hsl(0, 0%, 0%); /* ColorThemeText*/
    --CrTeTtLt: hsl(270, 53%, 35%); /*ColorThemeTextLight*/
    --CrTeTe-aEnRwBd: hsla(var(--CrTeH), 75%, 90%, 0.5);
    --CrTeTe-aThRwBd: hsla(var(--CrTeH), 75%, 80%, 0.8);
    --CrTeTe-aOdRwBd: hsla(0, 0%, 97.51%, 0.95);
    --CrTeTtBxBd: hsla(var(--CrTeH), 75%, 90%, 0.8); /*ColorThemeTextBoxBackground*/
    --CrTeBr: hsl(var(--CrTeH), 45%, 71%); /*ColorThemeBorder*/
    --CrTeBnBd: hsla(var(--CrTeH), 45%, 71%, 0.8); /*ColorThemeButtonBackground*/
    --CrTeStBd: hsla(var(--CrTeH), 45%, 71%, 0.8); /*ColorThemeSelectedBackground Or Active State*/
}

/*//////////*/
/*Color Theme*/
.CrTe {
    color: hsla( var(--CrTeH) 45% 71% / 0.8);
}

.CrTe80Lt {
    color: hsla( var(--CrTeH) 100% 80% / 1);
}

.CrBdTe {
    background-color: hsla( var(--CrTeH) 45% 71% / 0.8);
}

.CrBrTe {
    border-color: hsla( var(--CrTeH) 45% 71% / 1);
}

.CrBdTe80Lt {
    background-color: hsla( var(--CrTeH) 45% 80% / 1);
}

.CTabActive {
    background-color: var(--CrTeStBd);
    color: black;
    transition: all 0.5s ease;
}

.NvSdLkAe {
    background-color: var(--CrTeStBd);
    color: black;
    position: relative;
    font-weight: 600;
    border-radius: 2px;
    transition: all ease-in .6s;
}

.NvSdLkAe > a,
.NvSdLkAe > a :hover,
.NvSdLkSbAe > a :hover,
.NvSdLkSbSbAe > a :hover {
    color: black;
}


.DpDnLk:hover, .DpDnLk:focus-within {
    background-color: var(--CrTeStBd);
    color: whitesmoke;
    border-radius: var(--Pl3);
}


select:focus {
    color: var(--CrTeTt);
}

.TtBx, .TxBxCnAe {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: .9rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    outline: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.BxSwTpBmCrTe {
    box-shadow: 0px -3px 6px -6px hsla(var(--CrTeH) 45% 71%), 0px 3px 6px -6px hsla(var(--CrTeH) 45% 71%) !important;
}

/* View Only Desktop */
.VwOyDpNvBn {
    display: none;
}

/*Others: Todo Fix: [put these classes into above media queries] */
@media (min-width:426px) {
    /* View Only Desktop */
    .VwOyDpNvBn {
        display: none;
    }
}

@media (min-width:768px) {
    /* View Only Desktop */
    .VwOyDpNvBn {
        display: flex;
    }
}


.TpNvDpDn.open .DpDnTpLt, .TpNvDpDn.open .DpDnTpRt, .TpNvDpDn.open .DpDnBmLt, .TpNvDpDn.open .DpDnBmRt, .TpNvDpDn.open .DpDnBmCr, .TpNvDpDn.open .DpDnTpCr, .TpNvDpDn.open .DpDnBmRtOt, .TpNvDpDn.open .DpDnBmLtOt, .TpNvDpDn.open .DpDnTpRtOt, .TpNvDpDn.open .DpDnTpLtOt {
    max-height: 40vh;
    overflow-y: auto;
    box-shadow: inset 0 0 var(--Pl6) var(--CrSwIr);
}


/*///////////*/
.CrBdWe98Lt97 {
    background-color: hsla(0, 0%, 100%, 0.5); /* 50% transparent white */
}

.CrBrBe90Lt {
    border-color: hsl( var(--CrBeH) 100% 90%);
}

.CrBdTe95Lt {
    background-color: hsla( var(--CrTeH) 100% 95% / 1);
}

.CrBrTe90Lt {
    border-color: hsla( var(--CrTeH) 100% 90% / 1);
}

/*************************************Table Classes*************************************/
/*table Fix Column1*/
/* Base styles for all screen sizes - no sticky on mobile */
.TeSd thead th:nth-child(1),
.TeSd thead td:nth-child(1),
.TeSd tbody td:nth-child(1) {
    left: 0;
    width: 190px;
    min-width: 190px;
    /* No sticky here on purpose (mobile-first) */
}

/* Sticky enabled on medium+ screens (desktop/tablet) */
@media (min-width: 1200px) {
    .TeSd thead th:nth-child(1),
    .TeSd thead td:nth-child(1),
    .TeSd tbody td:nth-child(1) {
        position: sticky;
    }
}


/*table page button*/
.TePgBn {
    background-color: var(--CrTeTe-aEnRwBd);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all ease-in-out .2s;
    transition-property: background-color box-shadow;
}

    .TePgBn:hover {
        background-color: var(--CrTeTe-aThRwBd) !important;
        box-shadow: inset 0 0 3px 1px var(--CrSwIr);
    }
/*table page button Active*/
.TePgBnAe {
    background-color: var(--CrTeTe-aThRwBd) !important;
    box-shadow: inset 0 0 3px 1px var(--CrSwIr);
}

/* Hover Effect on Bacckground and Text*/
.HrCrBdTe:hover {
    background-color: hsl(var(--CrTeH) 100% 70%);
    color: hsl(var(--CrWeH) 0% 100%);
    border: none;
}


/*Start:-Scroll Css*/
@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

/* Scrollbar Styles for WebKit Browsers (Chrome, Safari, Edge, Opera) */
::-webkit-scrollbar {
    width: var(--Pl8);
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 var(--Pl5) grey;
    border-radius: var(--Pl6);
}

::-webkit-scrollbar-thumb {
    background: var(--CrTe);
    border-radius: var(--Pl8);
    box-shadow: inset 0 0 var(--Pl5) grey;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #b30000;
    }

/* Scrollbar Styles for Firefox */
* {
    scrollbar-width: thin; /* "auto" or "thin" */
    scrollbar-color: var(--CrTe) #f4f1f1a3; /* thumb and track color */
}

/* Hide Scrollbar */
.ScrollHide {
    overflow-y: scroll; /* Enables scrolling */
    /* Chrome, Safari, Opera */
    &::-webkit-scrollbar

{
    display: none;
}

/* IE, Edge, Firefox */
-ms-overflow-style: none;
scrollbar-width: none;
}
/*End-Scroll Css*/

/*HoverTransformScale*/
.HrTmSeo97:hover {
    transform: scale(.97);
}

.HrTmSeo94:hover {
    transform: scale(.94);
}

.HrTmSeo91:hover {
    transform: scale(.91);
}

.HrTmSe1o3:hover {
    transform: scale(1.03);
}

.HrTmSe1o6:hover {
    transform: scale(1.06);
}

.HrTmSe1o9:hover {
    transform: scale(1.09);
}
/*HoverTransformRotate*/
.HrTmRe360:hover {
    transform: rotate(360deg);
}
/*HoverTransformRotateScale*/
.HrTmRe360Se1o5:hover {
    transform: rotate(360deg) scale(1.05);
}

.HrTmSeo97, .HrTmSeo94, .HrTmSeo91,
.HrTmSe1o3, .HrTmSe1o6, .HrTmSe1o9,
.HrTmRe360,
.HrTmRe360Se1o5 {
    transition: transform ease-in-out .4s;
}


.Hg {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.HgCn {
    display: flex;
    flex-grow: 1;
    width: 100%;
    font-size: 18px;
    font-weight:600;
}

.HgBn {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    padding-top:10px;
}

/* Styles for tablets (768px and larger) */
@media (min-width: 768px) {
    .VwHgCn {
        display: flex;
        flex-grow: 1;
        width: 100%;
    }

    .VwHgBn {
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }
}

/* Styles for desktops (1024px and larger) */
@media (min-width: 1024px) {

    .Hg {
        flex-direction: row;
    }

    .HgCn {
        display: flex;
        flex-grow: 1;
        font-size: 30px;
        font-weight: 600;
    }

    .HgBn {
        display: flex;
        justify-content: flex-end;
    }
}

.BxSw {
    box-shadow: inset 0 0 var(--Pl3) var(--Pl1) var(--CrSwIr);
}

option {
    color: var(--CrTeTt);
    background-color: var(--CrTeTtBxBd);
}

    option:hover {
        background-color: var(--CrTe);
        color: var(--CrTeHrTt);
    }

 /*remove thead border*/
.BrNe {
    border: none !important;
}

/*remove focus css*/
.ReFs:focus {
    outline: none !important;
    box-shadow: none !important;
}

/*set focus stop parent div color-profile input tag*/
.TtBxPtDv:focus-within {
    box-shadow: 0 0px 2px 2px var(--CrTe); /* Thick shadow below */
}


.responsive-chart {
    width: 100% !important;
    height: 170px !important;
}

@@media (max-width: 768px) {
    .responsive-chart {
        height: 250px !important;
    }
}

/*Start:-Panel*/
.Arrow {
    border: solid var(--CrTe);
    border-width: 0 4px 4px 0;
    display: inline-block;
    padding: 4px;
}

.Right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.Left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.Up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.Down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.Panel {
    display: flex;
    position: relative;
    flex-direction: column;
    padding: var(--Pl5);
    width: 100%;
}

.PanelBn {
    position: absolute;
    top: var(--Pl10);
    right: var(--Pl8);
    cursor: pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.PanelContent {
    width: 100%;
}

/*Collapsible Div*/
.ClDv {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-out;
}
/*Ends:-Panel*/

.RdOyTtBx {
    background-color: #d5d4d4;
}