/* -------------------------------------------------------------------------- */
/*                               ROOT Variables                               */
/* -------------------------------------------------------------------------- */
:root {

    --animate-duration: 1s;

    /* colors */
    /* main color Fades */
    --mc1: #070C2C;
    --mc1-fade-1: #2b98ff;

    --mc2: #00c3fe;
    --mc2-fade-1: #00c3fe;
    --mc2-fade-2: #00c3fe;
    --mc2-fade-3: #00c3fe;
    --mc2-fade-4: #00c3fe;


    /* black to white colors */

    --bw-fade-1: #FFFFFF;
    --bw-fade-2: #F0F0F0;
    --bw-fade-3: #EDEDED;
    --bw-fade-4: #838383;
    --bw-fade-5: #616161;
    --bw-fade-6: #404040;
    --bw-fade-7: #313131;



    /* Text Colors */

    --tc1: var(--bw-fade-7);
    --tc2: var(--mc2-fade-1);
    --tc3: var(--bw-fade-5);

    --white: var(--bw-fade-1);
    --black: black;



    /* Border Radius */
    --border-radius: 0;
    --border-radius-sm: 0;
    /* button radius */

    /* animate css library delay factor */
    --animate-delay: 1s;

    /* Box Shadows */
    --box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
    --box-shadow-event: 0px 4px 20px rgba(0, 0, 0, 0.5);

    /* Gap */
    --gap: 0.5rem;

    /* Font Sizes */
    --fz-xs: 12px;
    --fz-xs-res: 12px;

    --fz-sm: 14px;
    --fz-sm-res: 12px;

    --fz-md: 16px;
    --fz-md-res: 14px;

    --fz-lg: 18px;
    --fz-lg-res: 16px;

    --fz-xl: 24px;
    --fz-xl-res: 18px;

    --fz-xxl: 36px;
    --fz-xxl-res: 24px;


    /* Line Height */
    --lh-xs: normal;
    --lh-sm: normal;
    --lh-md: normal;
    --lh-lg: normal;
    --lh-xl: normal;
    --lh-xxl: normal;

    /* Font Weight */
    --fw-300: 300;
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;

    /* Button Sizing (padding) */
    --pad-pri: 0.75rem 3rem;
    --pad-sec: 0.75rem 4rem;

    /* border (buttons) */
    --brd-pri: solid 1px;
    --brd-sec: solid 1px;

    /* WB Icon size*/
    --icon: 1.25rem;

    --icon-color: var(--mc1);

    /* main section white space (WBcontainer mb or mt) */
    /* choose whether from top or bottom in (*change) */
    --main-space: 6.25rem;
    --title-space: 2.5rem;
    --bottom-space: 1.75rem;

    /* transition */
    --transition: 0.3s;

    /* Drop downs hidden state position */
    --drop-pos: 50px;
}

/* ------------------------------- Responsive ------------------------------- */
@media (max-width: 992px) {
    :root {
        /* Font Sizes  responsive*/
        --fz-xs: var(--fz-xs-res);
        --fz-sm: var(--fz-sm-res);
        --fz-md: var(--fz-md-res);
        --fz-lg: var(--fz-lg-res);
        --fz-xl: var(--fz-xl-res);
        --fz-xxl: var(--fz-xxl-res);

        --main-space: 2.25rem;
    }

    .WbContainer__MainSection_Title .Head {
        color: #050A25;
        font-size: 24px;
        line-height: 41px;
    }

}

/* -------------------------------------------------------------------------- */
/*                                 Style Reset                                */
/* -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

html::-webkit-scrollbar-thumb {
    border-radius: var(--border-radius-sm);
}

* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
}

/* font family */

@font-face {
    font-family: 'Kalameh';
    src: url('../fonts/Kalameh/Standard Fonts/KalamehWeb-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kalameh';
    src: url('../fonts/Kalameh/Standard Fonts/KalamehWeb-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kalameh';
    src: url('../fonts/Kalameh/Standard Fonts/KalamehWeb-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kalameh';
    src: url('../fonts/Kalameh/Standard Fonts/KalamehWeb-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kalameh';
    src: url('../fonts/Kalameh/Standard Fonts/KalamehWeb-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kalameh';
    src: url('../fonts/Kalameh/Standard Fonts/KalamehWeb-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kalameh';
    src: url('../fonts/Kalameh/Standard Fonts/KalamehWeb-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


body,
span,
option,
html,
button,
input,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
button,
article,
li,
div {
    font-family: 'Kalameh';
}

::-moz-selection {
    /* Code for Firefox */
    background: var(--mc1);
	color: #fff !important;
	-webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
}

::selection {
    background: var(--mc1);
	color: #fff !important;
	-webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;

}

.m-hight-none {
    min-height: 0;
}

.pad-none {
    padding-right: 0;
    padding-left: 0;
}

html {
    font-size: 100%;
    /* 1rem = 16px */
}

a:focus {
    outline: none;
}

a,
a:hover,
a:visited,
a:focus {
    text-decoration: none;
    color: inherit;
}

h1,
.h1,
h2,
.h2,
h3,
.h3 {
    margin: 0 !important;
}

ul,
ol {
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 0;
}

body {
    padding: 0;
    line-height: 24px;
    overflow-x: hidden;
    font-size: 0.875rem;
}

body.rtl {
    direction: rtl;
    text-align: right;
}

p {
    margin: 0;
}

li {
    list-style: none;
    list-style-position: inside;
}

li p {
    line-height: inherit;
}

img[alt="edit"] {
    width: auto !important;
    margin: 0 !important;
    display: inline !important;
}

#wrap {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

#contentWrapper1 {
    position: relative;
    padding: 0 0;
}

.main-content {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

main {
    min-height: calc(100vh - 300px);
    overflow: hidden;
    padding-top: 5.5rem;
}

main:has(.home_Top) {
    padding-top: 0;
}

/*Repier Magement Menu*/

.subNav.advanced dl {
    width: 600px !important;
}

.subNav.advanced {
    width: 695px !important;
}

img {
    border: 0 none;
    height: auto;
}

img,
object,
embed {
    max-width: 100%;
}

.hephaistos .tp-bullet:hover,
.hephaistos .tp-bullet.selected {
    border-color: var(--main-text-color)
}

.WbContainer__MainSection_Title .Head {
    color: #050A25;
    font-size: 32px;
    font-weight: var(--fw-600);
    line-height: 54px;
    margin-bottom: 0;
}

.wb-carousel {
    background-color: var(--white);
    padding: 16px 15px;
}

.wb-carousel .slick-track {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.wb-carousel .img-wrap {
    /* display: flex !important; */
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
}

.wb-carousel img {
    max-height: 60px;
    width: auto;
    display: block;
    margin: auto;
}

/* ------------------------------- Responsive ------------------------------- */

@media (min-width: 1200px) {
    .container,
    .container-lg {
        max-width: 1320px;
    }
}
/* -------------------------------------------------------------------------- */
/*                                 Components                                 */
/* -------------------------------------------------------------------------- */

/* ------ Font Size start------ */
.fz-xs {
    font-size: var(--fz-xs);
    line-height: var(--lh-xs);
}

.fz-sm {
    font-size: var(--fz-sm);
    line-height: var(--lh-sm);
}

.fz-md {
    font-size: var(--fz-md);
    line-height: var(--lh-md);
}

.fz-lg,
.blogDetail article h2,
.blogDetail article h3,
.blogDetail article h4 {
    font-size: var(--fz-lg);
    line-height: var(--lh-lg);
}

.fz-xl {
    font-size: var(--fz-xl);
    line-height: var(--lh-xl);
}

.fz-xxl {
    font-size: var(--fz-xxl);
    line-height: var(--lh-xxl);
}

/* ------ Font Size end------ */


/* ------ Text Color ------ */
.tc1 {
    color: var(--tc1) !important;
    --icon-color: var(--tc1);
}

.tc2 {
    color: var(--tc2) !important;
    --icon-color: var(--tc2);
}

.tc3 {
    color: var(--tc3) !important;
    --icon-color: var(--tc3);
}

.tcm {
    color: var(--mc1) !important;
    --icon-color: var(--mc1);
}

.tcw {
    color: var(--white) !important;
    --icon-color: var(--white);
}

.bgm {
    background-color: var(--mc1) !important;
}

.hcm {
    transition: color var(--transition);
}

.hcm:hover,
.hcm:focus,
.hcm:visited {
    color: var(--mc1) !important;
    --icon-color: var(--mc1);
}

/* ------ Font Weight ------ */
.fw-300 {
    font-weight: var(--fw-300);
}

.fw-400 {
    font-weight: var(--fw-400);
}

.fw-600 {
    font-weight: var(--fw-600);
}

.fw-700 {
    font-weight: var(--fw-700);
}


/* ------ Button Style ------ */

.btnStyle_Primary,
.btnStyle_Primary:focus,
.btnStyle_Primary:visited {
    padding: var(--pad-pri);
    display: inline-block;
    white-space: nowrap;
    position: relative;
    background: linear-gradient(133.33deg, #3FB7ED 0%, #172B85 100%);
}

.btnStyle_Primary {
    display: flex;
    justify-content: center;
    align-items: center;
}

.btnStyle_Primary span {
    font-size: 16px;
    line-height: 27px;
    z-index: 2;
    background: transparent;
    color: transparent;
    transition: var(--transition);
}

.btnStyle_Primary:link span,
.btnStyle_Primary:visited span {
    color: var(--white);
}

.btnStyle_Primary:hover span {
    background: linear-gradient(133.33deg, #3FB7ED 0%, #172B85 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btnStyle_Primary:active span,
.btnStyle_Primary:focus span,
.btnStyle_Primary:visited span {
	position: relative;
        z-index: 2;
}

.btnStyle_Primary::before {
    content: "";
    position: absolute;
    inset: 2px;
    transition: var(--transition);
}

.btnStyle_Primary:link::before,
.btnStyle_Primary:visited::before {
    background-color: transparent;
}

.btnStyle_Primary:focus::before,
.btnStyle_Primary:hover::before,
.btnStyle_Primary:active::before {
    background-color: #070C2C;
}

.btnStyle_Secoundary,
.btnStyle_Secoundary:focus,
.btnStyle_Secoundary:visited {
    padding: var(--pad-sec);
    display: inline-block;
    white-space: nowrap;
    position: relative;
    background: linear-gradient(133.33deg, #3FB7ED 0%, #172B85 100%);
}

.btnStyle_Secoundary {
    display: flex;
    justify-content: center;
    align-items: center;
}

.btnStyle_Secoundary span {
    font-size: 16px;
    line-height: 27px;
    z-index: 2;
    background: transparent;
    color: var(--white);
    transition: var(--transition);
}

.btnStyle_Secoundary:link span,
.btnStyle_Secoundary:visited span {
    background: linear-gradient(133.33deg, #3FB7ED 0%, #172B85 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btnStyle_Secoundary:focus span,
.btnStyle_Secoundary:hover span,
.btnStyle_Secoundary:active span {
    color: var(--white);
    background: unset;
    -webkit-text-fill-color: unset;
}

.btnStyle_Secoundary::before {
    content: "";
    position: absolute;
    inset: 2px;
    transition: var(--transition);
}

.btnStyle_Secoundary:link::before,
.btnStyle_Secoundary:visited::before {
    background-color: #070C2C;
}

.btnStyle_Secoundary:focus::before,
.btnStyle_Secoundary:hover::before,
.btnStyle_Secoundary:active::before {
    background-color: transparent;
}

/* ------ Icon Style ------ */
.WbIcon {
  display: inline-block;
  width: 40px;              /* Default size — can be overridden */
  height: 40px;
  background-color: white;  /* Icon color */
  -webkit-mask-image: var(--iconUrl);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--iconUrl);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.main_Space {
    /****change****/
    margin-bottom: var(--main-space) !important;
    /* margin-top   : var(--main-space); */
}

.title_Space {
    margin-bottom: var(--title-space) !important;
}

.bottom_Space {
    margin-top: var(--bottom-space);
}

/* ------ Gap ------ */

.col-gap-1 {
    column-gap: calc(var(--gap) * 0.5);
}

.col-gap-2 {
    column-gap: calc(var(--gap) * 1);
}

.col-gap-3 {
    column-gap: calc(var(--gap) * 2);
}

.col-gap-4 {
    column-gap: calc(var(--gap) * 3);
}

.row-gap-1 {
    row-gap: calc(var(--gap) * 0.5);
}

.row-gap-2 {
    row-gap: calc(var(--gap) * 1);
}

.row-gap-3 {
    row-gap: calc(var(--gap) * 2);
}

.row-gap-4 {
    row-gap: calc(var(--gap) * 3);
}

/* ------ Container Style ------ */

.WBContainer_Sidebar {
    /****change****/
    border-radius: var(--border-radius-sm);
    background: var(--white);
    border: 1px solid var(--bw-fade-6);
    padding: 1rem;
    margin-bottom: var(--main-space);
    /* margin-top: var(--main-space); */
}

.Title_Sidebar_Text {
    border-bottom: 1px solid var(--bw-fade-6);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem !important;
    color: var(--mc2);
}


 /* -------------------------------------------------------------------------- */
 /*                        reset the dnn default styles                        */
 /* -------------------------------------------------------------------------- */


/* ------------------------------- PAGINATION ------------------------------- */
.PagingTable {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 30px 0;
    padding: 15px 5px;
}

.PagingTable a,
.PagingTable em {
    padding: 0;
    width: 30px !important;
    height: 30px !important;
    display: grid;
    place-content: center;
    border-radius: var(--border-radius-sm) !important;
    margin: 0 .25rem !important;

}

.PagingTable a:not(.PreviousPage, .NextPage) {
    border: 1px solid #BDBDBD;
}

.PagingTable a:is(.PreviousPage, .NextPage) {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border: 1px solid #00000021 !important;
    font-size: 0 !important;
}

.PagingTable a:is(.PreviousPage, .NextPage)::before,
.PagingTable a:is(.PreviousPage, .NextPage)::after {
    font-size: 16px;
}

.PagingTable a.NextPage::before,
.PagingTable a.PreviousPage::after {
    display: none;
}

.PagingTable em {
    background: var(--mc1) !important;
    color: #fff !important;
    border: 1px solid transparent;
}

.PagingTable a.FirstPage::before,
.PagingTable a.PreviousPage::before,
.PagingTable a.NextPage::after,
.PagingTable a.LastPage::after {
    margin-top: -2px !important;
}

.PagingTable a:not([href]),
.PagingTable a:is(.FirstPage, .LastPage) {
    display: none !important;
}


/* -------------------------------------------------------------------------- */
/*                                  BREADCRUMB                                */
/* -------------------------------------------------------------------------- */

.WB-breadcrumb ol {
    color: var(--tc1) !important;
    font-weight: 600;
}

.WB-breadcrumb li i {
    color: var(--tc1) !important;
    font-size: 12px !important;
}

.WB-breadcrumb {
    margin: 0 0 32px;
    max-width: 100% !important;
    padding: 0 !important;
}

.WB-breadcrumb .lblFinalUrl {
    color: var(--mc1);
}

.WB-breadcrumb li a {
    font-size: inherit !important;
}

/* -------------------------------------------------------------------------- */
/*                                    SLICK                                   */
/* -------------------------------------------------------------------------- */

/* Effected css styles */


.slick-arrow {
    width: 40px;
    height: 40px;
    background: unset !important;
    border: none !important;
    font-size: 0 !important;
    transition: var(--transition) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    position: absolute !important;
    border-radius: 50% !important;
    z-index: 1 !important;
}

.slick-arrow.slick-prev {
    left: auto !important;
    right: 0 !important;
    --iconUrl: url(../../../../0/Images/chev-right.svg)
}

.slick-arrow.slick-next {
    left: 0 !important;
    right: auto !important;
    --iconUrl: url(../../../../0/Images/chev-left.svg)
}

.slick-slider .slick-arrow::before {
    height: var(--icon, 1.125rem);
    width: var(--icon, .75rem);
    min-width: var(--icon, 1.125rem);
    min-height: var(--icon, .75rem);
    display: inline-flex;
    vertical-align: middle;
    background: var(--icon-color, var(--mc1));
    mask: var(--iconUrl) no-repeat center;
    mask-size: cover;
    -webkit-mask: var(--iconUrl) no-repeat center;
    -webkit-mask-size: cover;
    margin: var(--icon-mt, 0) var(--icon-mr, 0) var(--icon-mb, 0) var(--icon-ml, 0);
    transition: var(--transition);
    opacity: 1;
}
/* --------------- */



.slide-arrow.arrow-prev {
    left: 0;
}

.slide-arrow.arrow-prev:before {
    content: '\f104';
    font-family: 'fontawesome';
    line-height: 20px;
    font-size: 20px;
}

.slide-arrow.arrow-next {
    right: 0;
}

.slide-arrow.arrow-next:before {
    content: '\f105';
    font-family: 'fontawesome';
    line-height: 20px;
    font-size: 20px;
}

/* slick dots */

.slick-dots {
    /* bottom: -32px !important; */
}

.slick-dots li {
    width: auto !important;
    height: auto !important;
}

.slick-dots li button {
    background: #c4c4c4 !important;
    border-radius: 50% !important;
    width: 10px !important;
    height: 10px !important;
    transition: var(--transition);
    padding: 0 !important;
}

.slick-dots li.slick-active button {
    background: var(--mc1) !important;
    border-radius: 30px !important;
}

.slick-dots li button::before {
    display: none;
}

.slick-dotted.slick-slider {
    margin-bottom: 0 !important;
}







/* -------------------------------------------------------------------------- */
/*                                 LIVE FORM                                  */
/* -------------------------------------------------------------------------- */
/* General Style */
.LiveForm.Default td, .LiveForm.Default th, .LiveForm.Default table, .LiveForm.Default .Field input, .LiveForm.Default .Field select, .LiveForm.Default .Field textarea, .LiveForm.Default .Field button{
    font-family: inherit;
}

.LiveForm.Default ul.page-break-section,
.LiveForm.Default .thank-you {
    background: none !important;
    box-shadow: none !important;
}

/* Upload Style */

.LiveForm .plupload_filelist_header,
.LiveForm .plupload_filelist {
    display: none !important;
}

.LiveForm .plupload_filelist_header,
.LiveForm .plupload_filelist_footer,
.LiveForm .plupload_container {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

.LiveForm.Default .Fileupload>label {
    display: none !important;
}

.LiveForm.Default .plupload_buttons {
    position: relative !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.LiveForm.Default .plupload_buttons__Text {
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    border: 1px solid #BDBDBD;
    border-left: none;
    border-radius: 0 10px 10px 0;
    font-size: 0.875rem !important;
    color: var(--tc1);
    padding: 12px;
    max-width: calc(100% - 120px);
    overflow: auto;
}

.LiveForm.Default .plupload_button {
    position: relative !important;
    display: inline-block !important;
    padding-right: 16px !important;
    padding-left: 40px !important;
    border-radius: 10px 0 0 10px !important;
    margin-right: 0 !important;
    white-space: nowrap;
    min-width: 120px !important;
}

.LiveForm.Default .plupload_button::before {
    content: '\f093 ';
    font-family: 'FontAwesome';
    display: block;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 0.875rem;
}

.LiveForm.Default .plupload_button__Upload::before {
    content: '\f110 ';
    animation: 1s rotateAnime infinite ease-in-out;
}

.LiveForm.Default .plupload_button__Failed::before {
    content: '\f071 ';

}

.LiveForm.Default .plupload_button__Done::before {
    content: '\f00c ';
}

.LiveForm.Default input[type="submit"],
.LiveForm.Default input[type="button"] {
    background: var(--mc1);
}

.LiveForm.Default input[type="submit"]:hover,
.LiveForm.Default input[type="button"]:hover {
    box-shadow: 0 0 0 2px white, 0 0 0 3px var(--mc1);
}

@keyframes rotateAnime {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}
/* -------------------------------------------------------------------------- */
/*                                 Userdash                                   */
/* -------------------------------------------------------------------------- */



.ModDDRMenuC .nav.nav-pills {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
    list-style: none;
    flex-direction: column;
    border: 1px solid #dfdfdf;
    padding: 0px;
    background-color: #f3f3f3;
}

.userProfileBox {
    border-radius: var(--border-radius) !important;
    padding: 15px !important;
    box-shadow: 0 1px 6px 0 rgb(0 0 0 / 10%) !important;
    background: #fbfbfb !important;
}

#btnUpdateUser,
.ModWBUserOrderC .user-order .firstNav input[type="button"] {
    border-radius: var(--border-radius) !important;
    background: var(--mc1) !important;
    border: 1px solid var(--mc1) !important;
    font-family: inherit !important;
    transition: var(--transition) !important;
    float: left;
    font-size: 1rem;
}

#btnUpdateUser:focus,
#btnUpdateUser:hover,
.ModWBUserOrderC .user-order .firstNav input[type="button"]:focus,
.ModWBUserOrderC .user-order .firstNav input[type="button"]:hover {
    background: transparent !important;
    color: var(--mc1) !important;
    box-shadow: unset !important;
}

.ModDDRMenuC .nav-pills {
    border-radius: var(--border-radius) !important;
    overflow: hidden;
    box-shadow: 0 1px 6px 0 rgb(0 0 0 / 10%);
}

.ModDDRMenuC .nav-pills>li {
    width: 100%;
    margin: 0 !important;
    font-size: 0.875rem;
    border-bottom: 1px dashed#821c6b14;
}

.ModDDRMenuC .nav-pills>li a {
    padding: 10px;
    display: block;
}

.ModDDRMenuC .nav-pills>li.active,
.ModDDRMenuC .nav-pills>li.active>a:focus,
.ModDDRMenuC .nav-pills>li.active>a:hover {
    background: var(--mc1);
}

.ModDDRMenuC .nav-pills>li.active a {
    background-color: transparent;
    color: white;
}

table#orderList thead {
    background: var(--mc1) !important;
    color: #fff;
}

table.dataTable thead th::before,
table.dataTable thead td::before,
table.dataTable thead th::after,
table.dataTable thead td::after {
    content: none !important;
}

.table-striped tbody tr>td:has(.btn) {
    display: flex;
}

.ModWBUserChangePasswordC .user-password .btnBox button,
.ModWBUserChangePasswordC .user-password .btnBox button:hover {
    font-size: inherit;
    background-color: var(--mc1);
    border-color: var(--mc1);
    box-shadow: none;
    font-family: inherit;
}

/*
table.dataTable thead th,
table.dataTable thead td {
    width: 25% !important;
} */

#orderList th.sorting_disabled {
    width: auto !important;
}

.user-order .tableBox {
    margin-top: 15px;
}

.user-order .modal-header .close {
    margin: -1rem auto -1rem -1rem;
}

.user-order .modal-header .close span {
    font-size: 24px;
}

.DnnModule-DDRMenu,
.userProfileBox,
.DnnModule-WB_User_Order,
.DnnModule-WB_User_ChangePassword {
    margin-top: 48px;
}

@media (max-width:991px) {
    .ModDDRMenuC .table__Wrapper {
        overflow: auto;
    }
	
	main {
    	padding-top: calc(1.5rem + 81px);
	}
}

/* -------------------------------------------------------------------------- */
/*                                  COMMENT                                   */
/* -------------------------------------------------------------------------- */
.CommentOut {
    padding: 0 !important;
    border: 1px solid #E1E1E1;
    border-radius: var(--border-radius);
    margin-top: 48px;
}

.CommentHead {
    border-bottom: 1px solid #E1E1E1;
}

.CommentHead span {
    border-bottom: 1px solid var(--mc1);
    display: inline-block;
    padding-bottom: 8px;
}

.DnnModule-DNNArticle-ArticleView .outerCommentSection {
    padding: 0 !important;
    margin: 0 auto !important;
    border: none;
    border-radius: var(--border-radius);
}

.DnnModule-DNNArticle-ArticleView .submitBox,
.DnnModule-DNNArticle-ArticleView .commentTextBox .reply-wrap .reply-fields-wrap,
.comment-view .btnCommentClientBox,
.comment-view .txtNameClientBox {
    text-align: left;
}

.commentTextBox .user-comments-view .comment-date {
	padding-inline-start: 1.5rem;
	font-size: 12px;
        font-weight: var(--fw-300);
        line-height: 20px;
        color: #474747;
}

.commentTextBox .LikeAndDisLike .like-label {
	margin-inline-start: 67px;
}

    .commentTextBox .LikeAndDisLike .dislike-label {
        margin-inline-end: 2rem;
    }


.commentTextBox .LikeAndDisLike .dislike-label, .commentTextBox .LikeAndDisLike .like-label {
	 font-weight: var(--fw-300);
        line-height: 20px;
        color: #474747;
	        display: inline-flex;
        align-items: center;
}

.DnnModule-DNNArticle-ArticleView #btnCommentClient,
.DnnModule-DNNArticle-ArticleView .commentTextBox #btnCommentClient,
.DnnModule-DNNArticle-ArticleView .commentTextBox .reply-box #txtNameClient,
.comment-view #btnCommentClient,
.comment-view .reply-box #txtNameClient {
    background: linear-gradient(133.33deg, #3FB7ED 0%, #172B85 100%) !important;
    background-origin: border-box !important;
    border: 1px solid transparent !important;
    outline: none !important;
    transition: var(--transition) !important;
    padding: .5rem 1.25rem !important;
    border-radius: 0;
    font-size: 16px;
    line-height: 27px;
    color: var(--white);

}

.DnnModule-DNNArticle-ArticleView #btnCommentClient:hover,
.DnnModule-DNNArticle-ArticleView .commentTextBox #btnCommentClient:hover,
.DnnModule-DNNArticle-ArticleView .commentTextBox .reply-box #txtNameClient:hover,
.comment-view #btnCommentClient:hover,
.comment-view .reply-box #txtNameClient:hover {
    background: transparent !important;
    color: #3FB7ED !important;
    border: none !important;
    padding: 0;
}

.main-comment .blogDetail table td,
.main-comment table {
    border: none !important;
}

.MYDNNUSERIMG img {
    display: none;
}

.DnnModule-DNNArticle-ArticleView .commentTextBox .main-comment,
.comment-view .main-comment {
    border-radius: var(--border-radius) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 0 3rem;
}

    .main-comment label.switch {
        margin-inline-end: 3rem;
    }


.DnnModule-DNNArticle-ArticleView .commentTextBox {
    padding: 0;
    border: none !important;
    margin-top: 24px;
}

.main-comment .blogDetail table td,
.main-comment table {
    border: none !important;
}

.MYDNNUSERIMG img {
    display: none;
}

.DnnModule-DNNArticle-ArticleView .insertCommentBox .modern-label,
.comment-view .modern-label {
        line-height: 27px;
    font-size: 16px;
    font-weight: var(--fw-400);
	    top: 0.75rem;
    right: unset;
    left: 1px;
    padding: 0 1.25rem;
    width: max-content;
}

.insertCommentBox .modern-input:not(:placeholder-shown) ~ .modern-label,
.insertCommentBox .modern-input:focus ~ .modern-label {
    right: unset;
}

.commentTextBox .user-comments-view {
	display: flex;
    align-items: center;
	flex-wrap: wrap;
}
	

.commentTextBox .user-comments-view .user-comment,
.comment-view .user-comments-view .user-comment {
    padding: 0px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    border: none;
	width: 100%;
	padding-inline-start: 67px !important;
        text-align: left;
	font-size: 16px;
        line-height: 27px;
        color: #474747;
}

.insertCommentBox input[type="text"],
.insertCommentBox textarea,
.commentTextBox .modern-input,
.comment-view .modern-input {
    padding: .75rem 1.25rem !important;
    border-radius: 0;
    border: 1px solid #BABABA;
    font-size: 16px;
    line-height: 27px;
    color: #BABABA;
}

.commentTextBox .user-comments-view .user-name,
.comment-view .user-comments-view .user-name {
	width: auto;
    position: relative;
    gap: 1.25rem !important;
        font-size: 16px;
        line-height: 27px;
        font-weight: var(--fw-500);
        color: #1230AE;
	text-align: left;
	display: flex;
    align-items: center;
}

.commentTextBox .user-comments-view .user-name::before,
.comment-view .user-comments-view .user-name::before {
    content: '';
    display: block;
        width: 48px;
        height: 47px;
        background: url(../Images/commentUser-1.svg) no-repeat center;
        background-size: cover;

    z-index: 1;
    padding: 0;
}

.commentTextBox .LikeAndDisLike .like-label:after,
.commentTextBox .LikeAndDisLike .dislike-label:after {
	           content: "";
        height: 1.5rem;
        width: 1.5rem;
        min-width: 1.5rem;
        min-height: 1.5rem;
        display: inline-flex;
        vertical-align: middle;
        background: #474747;
        mask: url(../../../../0/Images/comment-like.svg) no-repeat center;
        mask-size: cover;
        -webkit-mask: url(../../../../0/Images/comment-like.svg) no-repeat center;
        -webkit-mask-size: cover;
        transition: var(--transition);
	
}

.commentTextBox .LikeAndDisLike .dislike-label:after {
	rotate: 180deg;
}

.replay-comment {
    margin-top: 16px !important;
}

.comment-view .user-comments-view .comment-date {
    padding: 0;
}


/* ------------------------------- Responsive ------------------------------- */

@media (min-width: 992px) {
    .CommentOut .insertCommentBox {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .insertCommentBox .nameBox,
    .insertCommentBox .emailBox {
        width: calc(50% - 6px);
    }

    .insertCommentBox .opinionBox,
    .insertCommentBox .submitBox {
        width: 100%;
    }
}

@media (min-width:577px) and (max-width:991px) {
    .CommentOut {
        margin-bottom: 32px !important;
    }
}

@media (max-width: 576px) {
    .CommentOut {
        margin-bottom: 32px !important;
    }
}

/* fix live form position */
.moxie-shim.moxie-shim-html5 {
    position: unset !important;
    width: unset !important;
    height: unset !important;
    overflow: unset !important;
}