/* -------------------------------------------------------------------------- */
/*                               ROOT Variables                               */
/* -------------------------------------------------------------------------- */
:root {
  /* colors */
  /* main color Fades */
  --mc1: #005847;
  --mc1-fade-1: #00a279;

  --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: 1rem;
  --border-radius-sm: 0.5rem;
  /* 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-600: 600;
  --fw-700: 700;

  /* Button Sizing (padding) */
  --pad-pri: 0.5rem 1rem;
  --pad-sec: 0.5rem 1.5rem;

  /* border (buttons) */
  --brd-pri: solid 1px;
  --brd-sec: solid 1px;

  /* WB Icon size*/
  --icon: 1.25rem;

  --icon-color: var(--bw-fade-1);

  /* main section white space (WBcontainer mb or mt) */
  /* choose whether from top or bottom in (*change) */
  --main-space: 4rem;
  --title-space: 2rem;
  --bottom-space: 1.75rem;

  /* transition */
  --transition: 0.3s;

  /* Drop downs hidden state position */
  --drop-pos: 50px;
}

.WB-breadcrumb ol {
  line-height: 2.2;
  max-width: 100%;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  list-style: none;
  width: 100%;
}

.WB-breadcrumb li {
  list-style: none;
  display: inline-block;
  padding: 5px 0;
}

/* ------------------------------- 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);
  }
}

/* -------------------------------------------------------------------------- */
/*                                 Style Reset                                */
/* -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

html::-webkit-scrollbar-thumb {
  border-radius: 0;
}

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

/* font family */

@font-face {
  font-family: "Helvetica Neue";
  src: url("../fonts/Helvetica/HelveticaNeueLight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("../fonts/Helvetica/HelveticaNeueMedium.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("../fonts/Helvetica/HelveticaNeueBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("../fonts/Helvetica/HelveticaNeueBold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("../fonts/Helvetica/HelveticaNeueHeavy.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("../fonts/Helvetica/HelveticaNeueBlack.otf") format("opentype");
  font-weight: 900;
  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: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

::-moz-selection {
  /* Code for Firefox */
  background: var(--mc1);
}

::selection {
  background: var(--mc1);
}

.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;
  background: #f6f6f6;
}

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;
  margin-bottom: -40px;
}

#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;
}

/*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%;
}

/* do not show the only admin can see this message when is not in edit state */
body:not(.dnnEditState) .dnnFormInfoAdminErrMssg {
  display: none;
}

.hephaistos .tp-bullet:hover,
.hephaistos .tp-bullet.selected {
  border-color: var(--main-text-color);
}

.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);
  border: var(--brd-pri) var(--mc1);
  border-radius: var(--border-radius-sm);
  display: inline-block;
  transition: var(--transition);
  white-space: nowrap;
}

.btnStyle_Secoundary,
.btnStyle_Secoundary:focus,
.btnStyle_Secoundary:visited {
  padding: var(--pad-sec);
  border: var(--brd-sec) var(--mc2);
  border-radius: var(--border-radius-sm);
  display: inline-block;
  transition: var(--transition);
  white-space: nowrap;
}

/* ------ Icon Style ------ */

.WbIcon {
  height: var(--icon, 1rem);
  width: var(--icon, 1rem);
  min-width: var(--icon, 1rem);
  min-height: var(--icon, 1rem);
  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);
}

.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 ------ */

.Title_Sidebar_Text {
  border-bottom: 1px solid var(--bw-fade-6);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem !important;
  color: var(--mc2);
}

.SpacingBottom {
  margin-bottom: var(--main-space);
}

/* -------------------------------------------------------------------------- */
/*                        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: 48px !important;
  height: 48px !important;
  display: grid;
  place-content: center;
  border-radius: 0 !important;
  margin: 0 0.25rem !important;
  border: unset !important;
}

.PagingTable a:not(.PreviousPage, .NextPage) {
  border: 1px solid #bdbdbd;
}

.PagingTable a {
  background-color: white !important;
}

.PagingTable a:hover {
  background-color: #D8E1DF !important;
}

.PagingTable a:is(.PreviousPage, .NextPage) {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  border: unset !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 a.NextPage:after , .PagingTable a.PreviousPage:before {
  margin: 0 !important;
}

.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: #0000004d !important;
  border: none !important;
  font-size: 0 !important;
  transition: var(--transition) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  position: absolute !important;
  border-radius: unset !important;
  z-index: 1 !important;
}

.slick-arrow.slick-prev {
  left: auto !important;
  right: 0 !important;
  --iconUrl: url(/Portals/0/Images/arrow_slider.svg);
}

.slick-arrow.slick-next {
  left: 0 !important;
  right: auto !important;
  --iconUrl: url(/Portals/0/Images/arrow_slider.svg);
}

.slick-slider .slick-arrow::before {
  height: var(--icon, 1.125rem);
  width: var(--icon, 0.75rem);
  min-width: var(--icon, 1.125rem);
  min-height: var(--icon, 0.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;
  rotate: 180deg;
}

.slick-slider .slick-arrow.slick-prev:before {
  rotate: 180deg;
}

.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;
  }
}

/* -------------------------------------------------------------------------- */
/*                                  COMMENT                                   */
/* -------------------------------------------------------------------------- */
.CommentOut {
  padding: 18px !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;
}

.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: var(--mc1) !important;
  border: 1px solid var(--mc1) !important;
  outline: none !important;
  transition: var(--transition) !important;
  padding: 6px 24px !important;
  height: 44px !important;
}

.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: var(--mc1) !important;
}

.DnnModule-DNNArticle-ArticleView .commentTextBox .main-comment,
.comment-view .main-comment {
  border-radius: var(--border-radius) !important;
  background: transparent !important;
  border: 1px solid #e1e1e1 !important;
}

.DnnModule-DNNArticle-ArticleView .commentTextBox {
  padding: 0;
  border: none !important;
  margin-top: 24px;
}

.DnnModule-DNNArticle-ArticleView .insertCommentBox .modern-label,
.comment-view .modern-label {
  line-height: normal;
}

.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;
}

.insertCommentBox input[type="text"],
.insertCommentBox textarea,
.commentTextBox .modern-input,
.comment-view .modern-input {
  padding: 10px 10px 8px !important;
  border-radius: var(--border-radius-sm);
}

.commentTextBox .user-comments-view .user-name,
.comment-view .user-comments-view .user-name {
  position: relative;
  padding-right: 32px !important;
  color: var(--mc1) !important;
}

.commentTextBox .user-comments-view .user-name::before,
.comment-view .user-comments-view .user-name::before {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 24px;
  height: 24px;
  mask-image: url(../Images/commentUser.svg);
  -webkit-mask-image: url(../Images/commentUser.svg);
  mask-size: 24px;
  -webkit-mask-size: 24px;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: right center;
  -webkit-mask-position: right center;
  background-color: var(--mc1);
  z-index: 1;
  padding: 0;
}

.replay-comment {
  margin-top: 16px !important;
}

.comment-view .user-comments-view .comment-date {
  padding: 0;
}

.user-comment p * {
  color: inherit !important;
  font-size: inherit !important;
  background-color: inherit !important;
  background: inherit !important;
  font-family: inherit !important;
  text-align: justify !important;
}

/* ------------------------------- 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;
}

/* -------------------------------------------------------------------------- */
/*                                 BACK TO TOP                                */
/* -------------------------------------------------------------------------- */

.to_Top {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  transition: var(--transition);
  translate: -8rem;
  cursor: pointer;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--mc1);
}

.to_Top .WbIcon {
  --icon: 1.5rem;
  --icon-color: var(--mc2);
  rotate: 90deg;
}

body.page_scrolled_Middle .to_Top {
  translate: 0;
}

@media (max-width: 992px) {
  .to_Top {
    bottom: 6rem;
    left: 1rem;
  }
}

/* -------------------------------------------------------------------------- */
/*                                   SLIDER                                   */
/* -------------------------------------------------------------------------- */
/* .main-slider {
    margin-bottom: 80px;
} */

.wb-slides .DescriptionBox {
  position: absolute;
  left: 32px;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 2;
  padding: 0 !important;
}

.wb-slides .item {
  height: 100vh;
}

.wb-slides .item_Img {
  max-width: 1920px;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  position: relative;
}

.wb-slides .caption_title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.wb-slides .caption_title__Second {
  position: relative;
}

.wb-slides {
  position: relative;
  background: transparent;
}

.wbSlides__Nav {
  display: flex;
  position: absolute;
  bottom: 5rem !important;
  left: 50%;
  transform: translateX(-50%);
}

.sectionTtl2 {
  line-height: 60px;
}

.item__Image {
  height: 480px;
}

/* -------------------------------------------------------------------------- */
/*                                         HELP                               */
/* -------------------------------------------------------------------------- */

.helpMe {
  text-align: right;
  width: 500px;
  margin: 50px auto;
  padding: 20px 0;
}

.helpMe table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
  border-radius: var(--border-radius);
  overflow: hidden;
  color: var(--tc1);
  background: #fbfbfb;
  -webkit-box-shadow:
    11px 11px 38px #c9c9c9,
    -11px -11px 38px #ffffff;
  box-shadow:
    11px 11px 38px #c9c9c9,
    -11px -11px 38px #ffffff;
}

.helpMe tr td:first-child {
  background-color: #b7b7b767;
}

.helpMe tr td {
  border: 1px solid #e9e9e9;
  padding: 10px;
  text-align: center;
  width: 520px;
}

/* fancy box base changes */
.fancybox__slide:has(iframe) {
  flex-direction: unset !important;
  padding-top: 5%;
}

.h_iframe-aparat_embed_frame:has(iframe) {
  width: 80%;
  aspect-ratio: 1.77/1;
  margin-bottom: 2rem;
  overflow: hidden;
  padding: 0;
}

.fancybox__slide:has(iframe) .fancybox__caption {
  position: absolute;
  bottom: 1vh;
  left: 50%;
  color: #fff !important;
  font-size: 1rem;
}

@media (max-width: 991px) {
  .fancybox__slide:has(iframe) .fancybox__caption {
    bottom: 35%;
    translate: -50%;
  }
}
