/* This file is for styling the main (not logged in) & user pages */
/*
  Z-INDEXES
    dark-page:              10
    left-panel:             12
    collapsed-left-panel:   11
    right-panel:            12
    collapsed-right-panel:  11
    mbl-navigation-bar:     13
    change-details-form:    14
*/
/*
  global_classes
  mobile_navigation_bar
  reset_password_form
  chat_box
  LEFT_PANEL
    lp_logo_container
    lp_profile_picture
    lp_vertical_menu
  CENTRE_PANEL
    __LOG_IN_PAGE
    __HOME_PAGE
    __SIGN_UP_PAGE
      select_subscription_plan
      customer_registration_form
    __AFFILIATE_PAGE
    __TERMS_AND_CONDITIONS_PAGE
    __DOCUMENTATION_PAGE
      tutorial_page__header
      tutorial_page__columns
    __PREMADE_DESIGNS_PAGE
      pd_front_page__header
      pd_front_page__templates
      pd_single_pages
    __AFFILIATE_SIGN_UP
  RIGHT_PANEL
    mini_pages_container
      mpc_user_account_section
        mpc_personal_info
        mpc_not_logged_in_content
        mpc_billing_history
        mpc_website
          mpc_switchPlansPopup
          mpc_themejet_chat_section
        mpc_review
          mpc_single_review_details
          mpc_tjVer_reviewList
          mpc_rate_themejet_section
      mpc_tj_versions_section
      mpc_faq_section
    email_subscription_container

  ++ LAPTOP_VIEW
    LPT_LEFT_PANEL
    LPT_CENTRE_PANEL
    LPT_RIGHT_PANEL

  ++ TABLET_VIEW
    TBL_LEFT_PANEL
    TBL_CENTRE_PANEL
      __TBL_PREMADE_DESIGNS_PAGE
        tbl_pd_single_pages
    TBL_RIGHT_PANEL

  ++ MOBILE_VIEW
    MBL_LEFT_PANEL
      mbl_lp_logo_container
      mbl_lp_profile_picture
      mbl_lp_vertical_menu
    MBL_CENTRE_PANEL
      __MBL_LOG_IN_PAGE
      __MBL_SIGN_UP_PAGE
        mbl_select_subscription_plan
        mbl_customer_registration_form
      __MBL_HOME_PAGE
      __MBL_AFFILIATE_PAGE
      __MBL_TERMS_AND_CONDITIONS_PAGE
      __MBL_DOCUMENTATION_PAGE
      __MBL_PREMADE_DESIGNS_PAGE
        mbl_pd_front_page__header
        mbl_pd_front_page__templates
        mbl_pd_single_pages
    MBL_RIGHT_PANEL
      mbl_mini_pages_container
        mbl_mpc_user_account_section
          mbl_mpc_personal_info
          mbl_mpc_billing_history
          mbl_mpc_website
            mbl_mpc_switchPlansPopup
          mbl_mpc_review
        mbl_mpc_tj_versions_section
      mbl_email_subscription_container
*/

/* ============================================
               global_classes
============================================ */
.tj_dsk_display_off {
  display: none;
}
:root {
  --tj_green: #45A29E;
  --tj_darkGreen: #5A807E;
  --tj_darkBlue: #1F2833;
  --tj_greyBlue: #414851;
  --tj_lightBlue: #28323D;
  --tj_navyBlue: #283748;
  --tj_shadow: 1px 3px 10px 5px var(--tj_darkBlue);
  --tj_shadowBlack: 1px 3px 10px 5px rgba(0, 0, 0, 0.2);
  scrollbar-width: none;
}
body {
  overflow-x: hidden;
  display: flex;
  flex-direction: row;
  background-image: linear-gradient(to bottom right, var(--tj_darkBlue), var(--tj_greyBlue));
}
/*
  SCROLLBARS
*/
::-webkit-scrollbar {
  width: 6px;  /* Remove scrollbar space */
  background: transparent;  /* Optional: just make scrollbar invisible */
}
@media (hover: none) {
  ::-webkit-scrollbar { width: 0px; }
}
:hover::-webkit-scrollbar-thumb {
  background: grey;
}
:hover::-webkit-scrollbar-thumb:hover {
  background: darkgrey !important;
}
/* table scrollbar (used in billing history at first) */
.fadedScrollbar::-webkit-scrollbar {
  background: var(--tj_greyBlue);
}
.fadedScrollbar::-webkit-scrollbar-thumb {
  background: grey;
}
/* horizontal scrollbar (used in account-secttings > billing-history) */
.mbl_x_scrollbar {
  scrollbar-width: none;
}
.mbl_x_scrollbar::-webkit-scrollbar {
  height: 0px;
}
/* right panel scrollbar */
.mrp_scrollbar {
  scrollbar-width: none;
}
.mrp_scrollbar::-webkit-scrollbar {
  width: 0px;  /* Remove scrollbar space */
  background: transparent;  /* Optional: just make scrollbar invisible */
}
/* mobile scrollbar */
.mobileScrollbar::-webkit-scrollbar-thumb {
  background: var(--tj_greyBlue);
  border-radius: 50px;
}
.mobileScrollbar::-webkit-scrollbar-thumb:hover {
  background: grey !important;
}
.mobileScrollbar::-webkit-scrollbar {
  width: 6px;
}
/* button animations */
.cp_btns {
  transition: 0.5s;
}
.cp_btns.disabled {
  opacity: 0.5;
  cursor: context-menu !important;
}
@media(hover: hover) {
  .cp_btns:not(.disabled):hover {
    background-color: var(--tj_greyBlue);
    color: var(--tj_green);
    transition: 0.5s;
  }
}
.cp_btns:focus {
  outline: none;
  box-shadow: none;
}
.cp_click_btn {
  background-color: #5A6471 !important;
  color: black !important;
  transition: 0s !important;
}
.cp_btn_outline_none:focus {
  outline: none;
  box-shadow: none;
}
/* The switch - the box around the slider - wcp_slider */
.switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 17px;
}
/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: darkgrey;
  -webkit-transition: .4s;
  transition: .4s;
  border: 1px solid var(--tj_green);
}
.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 0px;
  bottom: 1px;
  background-color: #4C4D4D;
  /* border: 1px solid grey; */
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: var(--tj_green);
  /* background-color: #2196F3; */
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
  border: 1px solid grey;
  -webkit-transform: translateX(17px);
  -ms-transform: translateX(17px);
  transform: translateX(17px);
}
/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}
/* input autofill (this is specifically for the sign-up form) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px var(--tj_darkBlue) inset !important;
}
/* change text in autofill textbox */
input:-webkit-autofill {
  -webkit-text-fill-color: lightgrey !important;
}
/* global <input> form tags */
input.input {
  border: 0;
  border-bottom: 1px solid var(--tj_green);
  background-color: transparent;
  transition: 0.5s;
}
input.input:hover {
  border-bottom: 1px solid #5A807E;
  transition: 0.5s;
}
input.input:focus {
  outline: none;
  box-shadow: none;
  border-bottom: 1px solid #5A807E;
}
input.input.invalid {
  border-bottom: 1px solid red;
  opacity: 0.7;
}
/* default buttons */
.tj_button {
  color: darkgrey;
  background-color: var(--tj_greyBlue);
  border: 0;
  padding: 10px 20px;
  font-weight: 500;
}
@media (hover: hover) {
  .tj_button:not(.disabled):focus,
  .tj_button:not(.disabled):hover { color: var(--tj_green); }
}
/* prevent text selection */
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
/* dark background */
.dark_bg {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
}

/* mobile_navigation_bar */
#mbl_nav_bar {
  background-color: var(--tj_darkBlue);
  box-shadow: 1px 3px 10px 5px var(--tj_darkBlue);
  height: 50px;
  width: 100%;
  overflow: hidden;
  display: none;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  z-index: 13;
}
#mbl_nav_bar img {
  height: 35px;
}
#mbl_nav_bar img:nth-child(2) {
  height: 60px;
}
#mbl_nav_bar > button {
  background-color: transparent;
  border: 0;
  font-size: 25px;
  color: lightgrey;
  padding: 0px 10px;
  height: 100%;
}
#mbl_nav_bar > button:focus {
  outline: none;
  box-shadow: none;
}
/* reset_password_form */
.reset_pw_form {
  display: none;
  position: fixed;
  height: 100vh;
  width: 100%;
  z-index: 14;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.box_container {
  width: 300px;
  height: 400px;
  background-color: var(--tj_darkBlue);
  z-index: 10;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tj_green);
  box-shadow: 5px 5px 10px;
}
#reset_acc_account .box_container {
  padding-bottom: 0px;
}
#reset_acc_login .box_container {
  height: 480px;
  max-height: 100vh;
}
/* for mobile & tablets */
@media screen and (max-height: 400px) {
  .box_container {
    height: 100%;
  }
}
/* header (close) */
.box_container > .bc_header {
  color: darkgrey;
}
.box_container > .bc_header > i {
  background-color: transparent;
  cursor: pointer;
  font-size: 25px;
  padding: 10px 13px;
}
/* main section */
.box_container > .bc_main {
  display: flex;
	flex-direction: column;
  flex-grow: 1;
  padding-right: 10px;
  padding-left: 10px;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
/* error messages */
.box_container > .bc_main > .resetFormMsgs {
  display: none;
  margin-right: auto;
  margin-left: auto;
  padding-right: 3px;
  padding-left: 3px;
  margin-bottom: 10px;
	background-color: var(--tj_greyBlue);
	width: 270px;
  box-shadow: 1px 3px 10px 5px var(--tj_lightBlue);
}
.resetFormMsgs .formMsg {
  color: darkgrey;
  padding: 5px 0px;
}
.resetFormMsgs.errorCont {
  border-left: 1px solid red; }
.resetFormMsgs.successCont {
  border-left: 1px solid var(--tj_green); }
/* logo */
.box_container > .bc_main > img {
  width: 60px;
  margin-bottom: 15px;
  margin-right: auto;
  margin-left: auto;
}
/* form title */
.box_container > .bc_main > .form_title {
  color: darkgrey;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}
/* description text */
.box_container .description {
  color: grey;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: bold;
}
/* input fields */
.box_container > .bc_main > form {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
}
.box_container > .bc_main > form > span {
  width: 50%;
  color: lightgrey;
  padding-top: 5px;
}
.box_container > .bc_main > form > input {
  width: 90%;
  margin: 0;
  margin-bottom: 10px;
  color: lightgrey;
  background-color: transparent;
  transition: 0.5s;
}
.box_container > .bc_main > form > input.pw {
  width: 90%;
  margin-bottom: 15px;
}
/* payment method (login-info) */
#reset_acc_login .paymentMethodCont {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
}
#reset_acc_login .paymentMethodCont .paypalButton {
  color: darkgrey;
  font-size: 20px;
  width: 35%;
}
#reset_acc_login .paymentMethodCont .paypalButton i {
  font-size: 25px;
}
#reset_acc_login .paymentMethodCont .paypalButton span {
  font-style: italic;
  font-weight: bold;
}
#reset_acc_login .paymentMethodCont .payerEmail {
  color: darkgrey;
  padding-left: 5px;
  flex-basis: 65%;
  overflow: hidden;
  white-space: nowrap;
  font-style: italic;
}
#reset_acc_login .paymentMethodCont .payerEmail > span {}
/* action buttons */
.box_container > .bc_main button {
  padding: 10px 20px;
  border: 0;
  background-color: transparent;
  color: darkgrey;
  margin: 0px 40px;
  margin-top: 10px;
}
#reset_acc_login .bc_main > button,
#reset_acc_account .bc_main > button {
  background-color: var(--tj_greyBlue);
  margin: 0px;
  margin-bottom: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-weight: 500;
}
@media (hover: hover) {
  .box_container > .bc_main button:focus,
  .box_container > .bc_main button:hover {
    background-color: var(--tj_greyBlue);
    color: var(--tj_green);
  }

  .box_container > .bc_main button.disabled:focus,
  .box_container > .bc_main button.disabled:hover {
    color: darkgrey;
    background-color: transparent;
  }
}
#reset_acc_login .bc_main button.disabled:focus,
#reset_acc_login .bc_main button.disabled:hover,
#reset_acc_account .bc_main button.disabled:hover {
  color: darkgrey;
}
.box_container > .bc_main button > i {
  margin-right: 5px;
}
/* forgot details */
.box_container > .bc_main > a {}

/* chat_box */
#userChatBox {
  display: none;
  position: fixed;
  height: 100vh;
  width: 100%;
  z-index: 14;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
#userChatBox .boxCont {
  height: 520px;
  width: 400px;
  overflow: hidden;
  background-color: var(--tj_lightBlue);
  z-index: 10;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tj_darkGreen);
  box-shadow: var(--tj_shadow);
}
/* header */
#userChatBox .boxCont .header {
  background-color: var(--tj_darkBlue);
  border-bottom: 1px solid var(--tj_darkGreen);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--tj_shadow);
}
#userChatBox .boxCont .header .info {
  display: flex;
  align-items: center;
  color: darkgrey;
  padding-left: 10px;
  margin: 10px 0px;
  font-size: 17px;
  font-weight: 500;
}
#userChatBox .boxCont .header .adminIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 10%;
}
#userChatBox .boxCont .header .adminIcon i {
  font-size: 40px;
  color: grey;
}
#userChatBox .boxCont .header .infoCont {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-left: 10px;
  line-height: 18px;
  white-space: nowrap;
}
#userChatBox .boxCont .header .infoCont span {
  display: block;
  font-size: 15px;
  color: darkgrey;
}
#userChatBox .boxCont .header .infoCont div {
  display: flex;
  align-items: center;
  margin-top: 1px;
}
#userChatBox .boxCont .header .infoCont i {
  display: inline;
  margin-right: 5px;
  color: grey;
}
#userChatBox .boxCont .header .infoCont span:nth-child(2) {
  display: inline;
}
#userChatBox .boxCont .header span.available {
  font-size: 14px;
  color: var(--tj_green);
}
#userChatBox .boxCont .header span.unavailable {
  font-size: 14px;
  color: grey;
}
#userChatBox .boxCont .header .headerBtn {
  height: 100%;
  margin-right: 10px;
}
#userChatBox .boxCont .header .msgInfo {
  display: none;
  position: absolute;
  background-color: var(--tj_darkBlue);
  border: 1px solid var(--tj_green);
  box-shadow: var(--tj_shadow);
  color: darkgrey;
  width: 200px;
  padding: 10px;
  font-size: 14px;
  margin-left: -90px;
}
#userChatBox .boxCont .header button {
  padding: 0px 10px;
  height: 100%;
  background-color: transparent !important;
  font-size: 18px;
}
/* body */
#userChatBox .body {
  flex-grow: 1;
  overflow: hidden;
}
#userChatBox .body .noMsgs {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#userChatBox .body .noMsgs i {
  color: darkgrey;
  font-size: 50px;
  margin-bottom: 10px;
  opacity: 0.5;
}
#userChatBox .body .noMsgs span {
  color: darkgrey;
  text-align: center;
}
#userChatBox .body .msgCont {
  display: none;
  height: 100%;
  overflow-y: scroll;
  padding: 0px 15px;
  padding-bottom: 10px;
  flex-direction: column;
}
#userChatBox .body .msgCont .date {
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  margin-top: 10px;
  color: lightgrey;
  background-color: var(--tj_darkGreen);
  width: 150px;
  border-radius: 10px;
}
#userChatBox .body .msgCont > span {
  width: 250px;
  margin-top: 10px;
  border-radius: 10px;
  padding: 5px 10px;
  color: darkgrey;
  word-wrap:break-word;
}
#userChatBox .body .msgCont span.user1 {
  background-color: var(--tj_darkBlue);
  align-self: flex-end;
  border-bottom-right-radius: 0px;
}
#userChatBox .body .msgCont span.user2 {
  background-color: var(--tj_greyBlue);
  float: left;
  border-bottom-left-radius: 0px;
}
#userChatBox .body .msgCont span.time {
  text-align: right;
  color: grey;
  width: 100%;
  font-size: 14px;
}
#userChatBox .msgCont span.t1, #userChatBox span.t2 {
  float: right;
}
#userChatBox .body .msgCont span.seen {
  color: var(--tj_green);
}
/* footer */
#userChatBox .footer {
  background-color: var(--tj_darkBlue);
  border-top: 1px solid var(--tj_darkGreen);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--tj_shadow);
  padding: 15px 10px;
}
#userChatBox .footer textarea {
  background-color: transparent;
  color: lightgrey;
  border: none;
  outline: none;
  flex-grow: 1;
  margin-right: 20px;
  resize: none;
  height: 30px;
  max-height: 100px;
}
#userChatBox .footer textarea::-webkit-scrollbar {
  cursor: context-menu !important;
}
#userChatBox .footer div {}
#userChatBox .footer div i {
  color: darkgrey;
  font-size: 17px;
  cursor: pointer;
  padding: 0px 8px;
  background-color: transparent !important;
}
@media (hover: hover) {
  #userChatBox .footer div i:hover {
    color: var(--tj_green);
  }
}


/* <------------------ LEFT_PANEL ------------------> */
#mlp_collapsed_pane {
  background-color: var(--tj_lightBlue);
  box-shadow: 1px 3px 10px 5px var(--tj_darkBlue);
  position: fixed;
  height: 100vh;
  width: 35px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 11;
}
#mlp_collapsed_pane > button {
  color: lightgrey;
  height: 100%;
  width: 100%;
  border: 0;
  padding: 0;
  background-color: transparent;
  font-size: 30px
}
#mlp_collapsed_pane > button:hover {
  color: var(--tj_green);
}
.main_left_panel {
  background-color: var(--tj_lightBlue);
  box-shadow: 1px 3px 10px 5px var(--tj_darkBlue);
  display: flex;
  flex-direction: column;
  width: 200px;
  transition: 0.1s;
  overflow: hidden;
  position: fixed;
  height: 100vh;
  z-index: 12;
}
#mlp_sect_1 {
  flex-grow: 1;
  overflow-y: scroll;
  overflow-x: hidden;
}
#mlp_sect_2 {
  flex-basis: 50px;
  min-height: 50px;
  background-color: var(--tj_darkBlue);
  border-top: 1px solid var(--tj_green);
}
#mlp_sect_2 > button {
  height: 100%;
  width: 100%;
  background-color: transparent;
  color: darkgrey;
  font-size: 20px;
  font-weight: 600;
  border: 0;
  margin: 0;
}
#mlp_sect_2 > button > a {
  color: inherit;
  text-decoration: none;
}
@media (hover: hover) {
  #mlp_sect_2 > button:hover {
    color: var(--tj_green);
    background-color: var(--tj_greyBlue);
  }
}
/* ============================================
               lp_logo_container
============================================ */
.tj_logo_container {
  border-bottom: 1px solid var(--tj_green);
  background-color: var(--tj_darkBlue);
}
.tj_logo_container .favicon {
  display: inline-block;
  width: 35px;
  /* width: 40px; */
}
.tj_logo_container .logotext {
  display: inline-block;
  width: 110px;
  /* width: 120px; */
}
/* ============================================
               lp_profile_picture
============================================ */
.mlp_profile_picture {
  margin: 0px 10px;
  padding: 15px 0px;
  border-bottom: 1px solid grey;
}
.mlp_profile_picture img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  padding: 0px;
}
.mlp_profile_picture i {
  font-size: 80px;
  color: grey;
  margin-bottom: 5px;
}
.mlp_profile_picture span {
  color: white;
  font-size: 15px;
}
/* ============================================
                 lp_vertical_menu
============================================ */
/* page links */
#lp_linksCont {
  margin-top: 10px;
}
#lp_linksCont > .nav-link {
  color: white;
  cursor: pointer;
}
#lp_linksCont > .nav-link:hover {
  background-color: #45A29E;
  border-radius: 0px;
}
#lp_linksCont > .active {
  background-color: #1F2833 !important;
  color: #45A29E !important;
  border-radius: 0px;
}
#lp_linksCont > .active:hover {
  color: #1F2833;
}
/* collapse pane buttons */
#collapse_panels_cont {
  margin: 0px 10px;
  margin-top: 10px;
  padding-top: 5px;
  border-top: 1px solid grey;
}
.collapse_panels_title {
  color: lightgrey;
}
#collapse_pane_btns_cont {
  margin: 0px 10px;
  padding-bottom: 5px;
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid grey;
}
#collapse_pane_btns_cont button {
  color: lightgrey !important;
  background-color: transparent;
  border: 0px;
  width: 100%;
  padding: 5px 0px;
}
#collapse_pane_btns_cont button:hover {
  color: var(--tj_green);
  background-color: var(--tj_greyBlue);
}
#collapse_pane_btns_cont button.disabled {
  color: grey !important;
  background-color: transparent;
}
#collapse_pane_btns_cont button > i {}
/* <------------------ CENTRE_PANEL ------------------> */
.main_centre_panel {
  height: 100%;
  flex-grow: 1;
  margin-left: 200px;
  margin-right: 450px;
  transition: 0.3s;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
}
#mcp_pageConts {
  flex-grow: 1;
}
#dark_pg_bg {
  background-color: black;
  opacity: 0.5;
  z-index: 10;
  position: fixed;
  height: 100%;
  width: 100%;
}
/* footer */
.tj_website_footer {
  height: 40px;
  width: 100%;
  background-color: var(--tj_darkBlue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tj_website_footer > span {
  font-size: 15px;
  color: lightgrey;
}
/* ============================================
                __LOG_IN_PAGE
============================================ */
.log_in_background {
	min-height: 100vh;
	/* background-image: linear-gradient(to bottom right, var(--tj_darkBlue), var(--tj_greyBlue)); */
	display: flex;
	align-items: center;
	justify-content: center;
}
.outer_box_container {
	border: 1px solid var(--tj_green);
	box-shadow: 10px 10px 5px var(--tj_darkBlue);
	width: 350px;
	height: 500px;
	display: flex;
	flex-direction: column;
	justify-content: center;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
/* error messages */
.error_messages_cont {
	background-color: var(--tj_greyBlue);
	border-left: 1px solid red;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
}
.error_messages_cont > .error_msg {
	color: darkgrey;
	padding: 5px 0px;
}
.error_messages_cont > .error_empty_user {}
.error_messages_cont > .error_empty_pw {}
.error_messages_cont > .error_incorrect {}
/* logo */
.outer_box_container > img {
	width: 80px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
}
/* input fields */
.outer_box_container > form {}
.outer_box_container > form > input {
	margin: 0;
	margin-top: 10px;
	border: 0;
	border-bottom: 1px solid var(--tj_green);
	color: lightgrey;
	background-color: transparent;
	transition: 0.5s;
	width: 300px;
	font-size: 20px;
}
.outer_box_container > form > input:hover {
	border-bottom: 1px solid #5A807E;
	transition: 0.5s;
}
.outer_box_container > form > input:focus {
	outline: none;
	box-shadow: none;
	border-bottom: 1px solid #5A807E;
}
/* log-in button */
.outer_box_container > form > button {
	color: darkgrey;
	background-color: transparent;
	border: 1px solid transparent;
	margin: 0;
	margin-top: 20px;
	margin-bottom: 10px;
	padding: 5px 20px;
	font-size: 20px;
	transition: 0.3s;
}
.outer_box_container > form > button:hover {
  color: var(--tj_green);
  transition: 0.3s;
}
.outer_box_container > form > button:focus {
  color: var(--tj_green);
}
@media (hover: none) { /* for tablets */
  .outer_box_container > form > button:hover {
    color: darkgrey;
    background-color: transparent;
  }
  .outer_box_container > form > button:focus {
    color: darkgrey;
  }
}
.outer_box_container > form > button > i {
	padding-right: 10px;
	font-size: 15px;
}
/* loading-icon */
.login_load_icon {
	display: none;
	margin-top: 30px;
	margin-bottom: 20px;
	font-size: 20px;
	color: darkgrey;
}
/* forgot details link */
.outer_box_container > .forgot_details {
	text-decoration: none;
	color: grey;
	cursor: pointer !important;
}
.outer_box_container > .forgot_details:hover {
	text-decoration: underline;
	color: var(--tj_green);
}
.outer_box_container > .forgot_details:focus {
	color: var(--tj_green);
	outline: none;
}
/* ============================================
                 __HOME_PAGE
============================================ */
#home_page_cont {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
}
/* text-content */
#home_page_cont > h1 {
  color: var(--tj_green);
  margin-bottom: 0px;
}
#home_page_cont > span {
  color: lightgrey;
  font-size: 20px;
  text-align: center;
}
#home_page_cont > button {
  color: darkgrey;
  background-color: var(--tj_greyBlue);
  border: 0;
  margin-top: 10px;
  margin-bottom: 15px;
  padding: 10px 20px;
  font-weight: 500;
}
@media (hover: hover) {
  #home_page_cont > button:hover {
    color: var(--tj_green);
  }
}
/* image (slideshow) */
.splide {
  border: 2px solid var(--tj_green);
  width: 90%;
}
.splide img {
  width: 100%;
}
.splide__arrow {
  background-color: var(--tj_green) !important;
}
.splide__pagination__page {}
.splide__pagination__page.is-active {
  background-color: var(--tj_green) !important;
}
/* extra information */
#home_page_cont > .extra_info_cont {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0px 20px;
  margin-bottom: 20px;
}
#home_page_cont > .extra_info_cont > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 200px;
  width: 33.33%;
  flex-grow: 1;
  cursor: context-menu;
  padding: 10px 20px;
}
#home_page_cont > .extra_info_cont > div > .number {
  font-size: 40px;
  color: var(--tj_green);
  font-weight: bold;
}
#home_page_cont > .extra_info_cont > div > .title {
  font-size: 25px;
  color: lightgrey;
  font-weight: 500;
  text-align: center;
}
#home_page_cont > .extra_info_cont > div > .paragraph {
  font-size: 15px;
  color: darkgrey;
  text-align: center;
}
/* ============================================
               __SIGN_UP_PAGE
============================================ */
#mcp_sign_up {}
.signUp_pg_cont {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.signUp_pg_cont > span {
  color: lightgrey;
  font-size: 25px;
  padding: 10px 0px;
}
/* select_subscription_plan */
.signUp_pg_cont > .pricing_cont {
  width: 500px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tj_green);
  padding: 10px 0px;
  margin-bottom: 10px;
  box-shadow: 10px 10px 5px var(--tj_darkBlue);
  background-color: var(--tj_darkBlue);
}
.signUp_pg_cont > .pricing_cont > div {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: darkgrey;
  padding: 5px 10px;
  padding-left: 0px;
  cursor: pointer;
}
.signUp_pg_cont > .pricing_cont > div:hover {
  color: var(--tj_green) !important;
}
.signUp_pg_cont > .pricing_cont > div.active {
  color: var(--tj_green);
}
.signUp_pg_cont > .pricing_cont > div.active:hover {
  color: lightgrey;
}
.signUp_pg_cont > .pricing_cont > div.active > span {
  color: var(--tj_green);
}
@media (hover: none) {
  .signUp_pg_cont > .pricing_cont > div {
    background-color: transparent;
  }
}
.signUp_pg_cont > .pricing_cont .price {
  flex-basis: 20%;
  font-size: 25px;
  font-weight: 300;
  /* color: lightgrey; */
  text-align: center;
}
.signUp_pg_cont > .pricing_cont .description {
  flex-basis: 80%;
}
/* customer_registration_form */
.signUp_pg_cont > .details_form_cont {
  border: 1px solid var(--tj_green);
  box-shadow: 10px 10px 5px var(--tj_darkBlue);
  background-color: var(--tj_darkBlue);
  width: 500px;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.signUp_pg_cont > .details_form_cont > .error_messages_cont {
  width: 90%;
  margin-top: 5px;
  margin-bottom: 20px;
  padding-left: 5px;
  padding-right: 5px;
}
.signUp_pg_cont .error_messages_cont > div {}
/* logo */
.signUp_pg_cont > .details_form_cont > img {
  width: 60px;
	margin-left: auto;
	margin-right: auto;
  margin-bottom: 10px;
}
.signUp_pg_cont > .details_form_cont > .title {
  color: lightgrey;
  font-weight: 500;
  font-size: 20px;
}
/* input fields */
.signUp_pg_cont > .details_form_cont > form {
  padding: 0px 20px;
}
.signUp_pg_cont > .details_form_cont > form > input,
.signUp_pg_cont > .details_form_cont > form > select {
  margin: 0;
  margin-top: 10px;
  border: 0;
  border-bottom: 1px solid var(--tj_green);
  color: lightgrey;
  background-color: transparent;
  transition: 0.5s;
  font-size: 20px;
}
.signUp_pg_cont > .details_form_cont > form > select {
  outline: none;
  max-height: 50px !important;
  overflow-y: scroll;

  -moz-appearance:none;
  -webkit-appearance:none;
  appearance:none;
}
.signUp_pg_cont > .details_form_cont > form > select > option {
  background-color: var(--tj_greyBlue);
}
.signUp_pg_cont > .details_form_cont > form > input {
  width: 47%;
  float: right;
}
.signUp_pg_cont > .details_form_cont > form > input:nth-child(odd) {
  float: left;
}
.signUp_pg_cont > .details_form_cont > form > input:hover {
  border-bottom: 1px solid #5A807E;
  transition: 0.5s;
}
.signUp_pg_cont > .details_form_cont > form > input:focus {
  outline: none;
  box-shadow: none;
  border-bottom: 1px solid #5A807E;
}
.signUp_pg_cont > .details_form_cont > form > input.invalid {
  border-bottom: 1px solid red;
  opacity: 0.7;
}
/* enter country options */
.signUp_pg_cont > .details_form_cont > form > select {
  width: 100%;
  max-height: 500px;
}
/* payment options */
.signUp_pg_cont > .details_form_cont > form > button {
  color: darkgrey;
	background-color: transparent;
	border: 1px solid transparent;
	margin: 0;
	margin-top: 20px;
	margin-bottom: 10px;
	padding: 5px 20px;
	font-size: 20px;
	transition: 0.3s;
  width: 49%;
}
.signUp_pg_cont > .details_form_cont > form > button:hover {
  color: var(--tj_green);
  background-color: var(--tj_greyBlue);
  transition: 0.3s;
}
.signUp_pg_cont > .details_form_cont > form > button:focus {
  color: var(--tj_green);
}
.signUp_pg_cont > .details_form_cont > form > button > i {
  padding-right: 5px;
  font-size: 25px;
}
.signUp_pg_cont > .details_form_cont > form > .other > i {
}
.signUp_pg_cont > .details_form_cont > form > .paypal > span {
  font-style: italic;
  font-weight: bold;
}
.signUp_pg_cont > .details_form_cont > form > .paypal > i {
  padding-right: 0px;
  font-size: 25px;
}
.signUp_pg_cont > .details_form_cont > form > .payment_method {
  background-color: var(--tj_greyBlue);
  color: var(--tj_green);
}
/* other payment options fields */
.signUp_pg_cont > .details_form_cont > form > .card_info_cont {
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  padding-bottom: 5px;
  padding-top: 5px;
  opacity: 0.5;
}
.signUp_pg_cont > .details_form_cont > form > .card_info_cont > input {
  width: 0px;
  flex-grow: 1;
  background-color: transparent;
  color: lightgrey;
  border: 0;
  outline: none;
  font-size: 17px;
  font-weight: 500;
  border-bottom: 1px solid var(--tj_green);
}
.signUp_pg_cont > .details_form_cont > form > .card_info_cont > .card_num {
  flex-grow: 3;
  padding-left: 5px;
}
.signUp_pg_cont > .details_form_cont > form > .card_info_cont > .exp_date {}
.signUp_pg_cont > .details_form_cont > form > .card_info_cont > .cvc {}
/* terms & conditions */
.signUp_pg_cont > .details_form_cont > form > .checkboxes {
  margin-bottom: 10px;
}
.signUp_pg_cont > .details_form_cont > form > .checkboxes > input {}
.signUp_pg_cont > .details_form_cont > form > .checkboxes > span {}
.signUp_pg_cont > .details_form_cont > form > .checkboxes .TC_link {
  background-color: none;
  color: var(--tj_green);
  font-weight: 500;
}
@media (hover: hover) {
  .signUp_pg_cont > .details_form_cont > form > .checkboxes .TC_link:hover {
    /* background-color: none; */
    color: var(--tj_darkGreen);
  }
}


  /* Copied Checkbox Code */
  .container-checkbox {
      display: block;
      position: relative;
      padding-left: 35px;
      margin-bottom: 12px;
      cursor: pointer;
      font-size: 17px;
      color: lightgrey;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }
  /* Hide the browser's default checkbox */
  .container-checkbox input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
  }
  /* Create a custom checkbox */
  .container-checkbox .checkmark {
      position: absolute;
      top: 0;
      left: 0;
      height: 25px;
      width: 25px;
      background-color: #eee;
      background-color: darkgrey;
  }
  /* On mouse-over, add a grey background color */
  .container-checkbox:hover input ~ .checkmark {
      background-color: #ccc;
  }
  /* When the checkbox is checked, add a blue background */
  .container-checkbox input:checked ~ .checkmark {
      background-color: #2196F3;
      background-color: var(--tj_green);
  }
  /* Create the checkmark/indicator (hidden when not checked) */
  .container-checkbox .checkmark:after {
      content: "";
      position: absolute;
      display: none;
  }
  /* Show the checkmark when checked */
  .container-checkbox input:checked ~ .checkmark:after {
      display: block;
  }
  /* Style the checkmark/indicator */
  .container-checkbox .checkmark:after {
      left: 7px;
      /* top: 5px; */
      width: 10px;
      height: 20px;
      border: solid white;
      border-width: 0 3px 3px 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
  }
/* chekout btn */
.signUp_pg_cont > .details_form_cont > form > .checkout_btn {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: darkgrey;
  background-color: var(--tj_greyBlue);
  padding: 10px 0px;
}
.signUp_pg_cont > .details_form_cont > form > .checkout_btn:hover {
  color: var(--tj_green);
}
.signUp_pg_cont > .details_form_cont > form > .checkout_btn > span {
  font-size: 15px;
  font-weight: bold;
}
.signUp_pg_cont > .details_form_cont > form > .checkout_btn > i {
  margin-right: 5px;
  padding-right: 0px;
}
.signUp_pg_cont > .details_form_cont > form > .checkout_btn.other {
  display: none;
}
.signUp_pg_cont > .details_form_cont > form > .checkout_btn.disabled {
  opacity: 0.5;
  background-color: var(--tj_greyBlue) !important;
  color: darkgrey !important;
  cursor: context-menu;
}
/* ============================================
               __AFFILIATE_PAGE
============================================ */
/* global */
#affiliate_page_cont {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#affiliate_page_cont > .section {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#affiliate_page_cont > .section > .column {
  flex-basis: 50%;
  flex-grow: 1;
  min-width: 350px;
  padding: 10px 30px;
  /* border: 1px solid black; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#affiliate_page_cont > .section > .column > .title {
  color: var(--tj_green);
  text-decoration: underline;
  font-size: 25px;
  font-weight: 500;
  margin-bottom: 10px;
}
#affiliate_page_cont > .section > .column > ul {
  padding-left: 17px;
}
#affiliate_page_cont > .section > .column li {
  color: darkgrey;
  font-size: 17px;
}
/* section-1 */
#affiliate_page_cont > .section:nth-child(1) {
}
#affiliate_page_cont > .section > .column:nth-child(1) {
}
/* section-2 */
#affiliate_page_cont > .section:nth-child(2) {
}
#affiliate_page_cont > .section > .column:nth-child(2) {
}
/* sign-up */
#affiliate_page_cont > .sign_up_sect {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 0px;
}
#affiliate_page_cont > .sign_up_sect > span {
  font-size: 30px;
  color: var(--tj_green);
  margin-bottom: 10px;
  text-align: center;
}
#affiliate_page_cont > .sign_up_sect > div {}
#affiliate_page_cont > .sign_up_sect > div > button {
  padding: 10px 30px;
  color: darkgrey;
  background-color: var(--tj_greyBlue);
  border: 0;
  font-weight: 500;
}
#affiliate_page_cont > .sign_up_sect > div > button:hover {
  color: var(--tj_green);
}
/* ============================================
          __TERMS_AND_CONDITIONS_PAGE
============================================ */
#terms_and_conditions_cont {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#terms_and_conditions_cont > .header {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  padding: 0px 10px;
  margin-bottom: 50px;
}
#terms_and_conditions_cont > .header > .title {
  font-size: 35px;
  color: var(--tj_green);
  font-weight: 500;
}
#terms_and_conditions_cont > .header > span {
  font-size: 20px;
  color: darkgrey;
}
#terms_and_conditions_cont > .header > .last_modified {
  font-size: 17px;
  color: grey;
}
/* content */
#terms_and_conditions_cont > .section {
  display: flex;
  flex-direction: column;
  width: 80%;
  flex-grow: 1;
  margin-bottom: 20px;
}
#terms_and_conditions_cont > .section > .title {
  font-size: 30px;
  color: var(--tj_green);
  margin-bottom: 10px;
}
#terms_and_conditions_cont > .section > .text {
  border-top: 1px solid darkgrey;
  padding-top: 10px;
  color: darkgrey;
  /* font-size: 18px; */
}
#terms_and_conditions_cont > .section > .text ol {
  padding-left: 15px;
}
/* ============================================
             __DOCUMENTATION_PAGE
============================================ */
/* global */
#documentation_cont {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#documentation_cont > .tutorials_cont {
  flex-grow: 1;
  width: 90%;
  display: flex;
  flex-direction: column;
}
#documentation_cont > .tutorials_cont > nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  color: lightgrey;
  font-weight: 500;
  margin-top: 10px;
  margin-bottom: 5px;
  cursor: pointer;
  border-bottom: 1px solid darkgrey;
}
#documentation_cont > .tutorials_cont > nav > span {
  font-size: 30px;
  color: var(--tj_green);
  color: darkgrey;
}
#documentation_cont > .tutorials_cont > nav > i {
  font-size: 20px;
}
#documentation_cont > .tutorials_cont > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
  /* background-color: red; */
}
#documentation_cont > .tutorials_cont > div > div {
  background-color: var(--tj_darkBlue);
  width: 250px;
  height: 180px;
  border: 1px solid var(--tj_green);
  border-radius: 0px;
  margin-top: 10px;
  margin-right: 10px;
  margin-left: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--tj_green);
  color: darkgrey;
}
@media (hover: hover) {
  #documentation_cont > .tutorials_cont > div > div:hover {
    background-color: var(--tj_greyBlue);
    color: var(--tj_green);
  }
}
#documentation_cont > .tutorials_cont .icon_cont {
  display: flex;
  align-items: center;
  flex-grow: 1;
}
#documentation_cont > .tutorials_cont > div i {
  font-size: 100px;
  text-align: center;
}
#documentation_cont > .tutorials_cont > div span {
  font-size: 20px;
}
/* tutorial_page__header (global) */
#documentation_cont > .single_pages_cont {
  flex-grow: 1;
  display: none;
  width: 100%;
}
.single_pages_cont > div {
  display: flex;
  flex-direction: column;
}
.single_pages_cont > div > .tut_header {
  padding: 30px 20px;
  padding-bottom: 0px;
}
.single_pages_cont > div > .tut_header > .toggle_tut_pgs {
  cursor: pointer;
  color: darkgrey;
  padding: 10px 20px;
  background-color: var(--tj_greyBlue);
  font-weight: 500;
  border: 0;
}
@media (hover: hover) {
  .single_pages_cont .tut_header > .toggle_tut_pgs:hover {
    color: var(--tj_green);
  }
}
.single_pages_cont > div > .tut_header > .toggle_tut_pgs > i {
  margin-right: 5px;
  font-size: 17px;
}
.single_pages_cont > div > .tut_header > .tut_title {
  color: lightgrey;
  font-size: 40px;
  display: block;
  margin-top: 10px;
}
.single_pages_cont > div > .tut_header > .tut_description {
  color: darkgrey;
}
.single_pages_cont > div > .tut_header > ul {
  padding: 0px;
  margin-top: 10px;
}
.single_pages_cont > div > .tut_header > ul > a {
  color: var(--tj_green);
  margin-right: 20px;
  max-width: 250px;
  display: block;
}
/* tutorial_page__columns (global) */
.single_pages_cont > div > .column {
  display: none;
  flex-direction: row;
}
.single_pages_cont > div > .column > .section {
  flex-grow: 1;
}
/* ============================================
            __PREMADE_DESIGNS_PAGE
============================================ */
#premade_designs_cont {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#premade_designs_cont > .front_page {
  flex-grow: 1;
  width: 100%;
  display: none;
}
#premade_designs_cont > .preloader {
  flex-grow: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1; /* prevent overlap of 'return to tmpl' btn */
}
#premade_designs_cont > .preloader i {
  font-size: 40px;
  color: grey;
}
/* pd_front_page__header */
.front_page > .header_cont button {
  padding: 4px 19px;
  background-color: var(--tj_greyBlue);
  border: 0;
  color: darkgrey;
  font-weight: 500;
  margin-top: 10px;
  margin-right: 5px;
  border: 1px solid var(--tj_greyBlue);
}
@media (hover: hover) {
  .front_page > .header_cont button:hover {
    color: var(--tj_green);
  }
}
.front_page > .header_cont button.active {
  border: 1px solid var(--tj_green);
  color: var(--tj_green);
}
.front_page > .header_cont {
  margin-top: 20px;
}
.front_page > .header_cont > h1 {
  color: var(--tj_green);
  margin-bottom: 0px;
}
.front_page > .header_cont > h4 {
  color: lightgrey;
  font-weight: 400;
}
.front_page > .header_cont > button:nth-last-child(2) {
  margin-right: 0px;
}
.front_page > .header_cont > .buttons_cont {
  width: 80%;
  margin: 10px auto;
  padding: 10px 10px;
  padding-bottom: 20px;
  background-color: var(--tj_darkBlue);

  border: 1px solid var(--tj_darkGreen);
  box-shadow: 1px 3px 10px 5px var(--tj_darkBlue);
}
.front_page > .header_cont > .buttons_cont > button {}
.front_page > .header_cont > .buttons_cont > button:nth-last-child(1) {
  margin-right: 0px;
}
/* pd_front_page__templates */
.front_page > .templates_grid {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
.front_page > .templates_grid > .template_cont {
  flex-grow: 1;
  padding: 20px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 250px;
  max-width: 250px;
}
.front_page > .templates_grid > .template_cont > .img_cont {
  width: 220px;
  height: 250px;
  display: flex;
  flex-direction: column;
  box-shadow: 5px 5px 10px var(--tj_darkBlue);
  background-color: var(--tj_darkBlue);
  color: lightgrey;
  cursor: pointer;
}
@media (hover: hover) {
  .front_page > .templates_grid > .template_cont > .img_cont:hover {
    border: 1px solid var(--tj_green);
    color: var(--tj_green);
    background-color: var(--tj_greyBlue);
  }
}
.front_page > .templates_grid > .template_cont > .img_cont.premium {
  border: 1px solid var(--tj_green);
}
.front_page > .templates_grid > .template_cont > .img_cont div:nth-child(1) {
  overflow: hidden;
  overflow-y: scroll;
}
.front_page > .templates_grid > .template_cont > .img_cont img {
  width: 100%;
}
.front_page > .templates_grid > .template_cont > .img_cont div:nth-child(2) {
  flex-grow: 1;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.front_page > .templates_grid > .template_cont > .img_cont span {}
/* pd_single_pages */
/* template-info */
#premade_designs_cont > .single_page {
  flex-grow: 1;
  width: 100%;
  display: none;
}
.single_page .info {
  width: 100%;
  margin-top: 20px;
  padding-left: 20px;
}
.single_page .info > button {
  border: 0;
  background-color: var(--tj_greyBlue);
  color: darkgrey;
  padding: 10px 20px;
  font-weight: 500;
}
@media (hover: hover) {
  .single_page .info > button:hover {
    color: var(--tj_green);
  }
}
.single_page .info > button i {
  margin-right: 5px;
}
.single_page .info > h1 {
  color: lightgrey;
  margin-bottom: 10px;
  margin-top: 10px;
  font-weight: 400;
}
.single_page .info > span {
  background-color: var(--tj_greyBlue);
  color: darkgrey;
  padding: 5px 10px;
}
.single_page .info > p {
  margin-top: 10px;
  color: darkgrey;
}
/* template-display */
.single_page .template_display {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0px 20px;
}
.single_page .template_display > div {
}
.single_page .template_display > .img_cont {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  box-shadow: 1px 3px 10px 8px var(--tj_darkBlue);
}
.single_page .template_display > .img_cont > div.image {
  overflow-y: scroll;
  max-height: 600px;
}
.single_page .template_display > .img_cont > div > img {
  width: 500px;
}
.single_page .template_display > .img_cont > div.btns {
  display: flex;
  flex-direction: row;
  border: 2px solid grey;
}
.single_page .template_display > .img_cont > div > button {
  flex-basis: 50%;
  flex-grow: 1;
  padding: 10px 0px;
  background-color: var(--tj_greyBlue);
  color: darkgrey;
  border: 0;
  font-weight: 500;
}
@media (hover: hover) {
  .single_page .template_display > .img_cont > div > button:hover {
    color: var(--tj_green);
    background-color: var(--tj_darkBlue);
  }
}
/* single-pages - template-pages display */
.single_page .layouts_cont {
  min-width: 250px;
  max-width: 500px;
  margin-bottom: 20px;
}
.single_page .layouts_cont > span {
  font-size: 20px;
  color: lightgrey;
  font-weight: 500;
  /* margin-left: 20px; */

  display: block;
  /* background-color: red; */
  width: 100%;
  text-align: center;
}
.single_page .layouts_cont > .template_pages_cont {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  /* background-color: blue; */
}
.single_page .layouts_cont > .template_pages_cont > .page_cont {
  margin: 10px;
  box-shadow: 5px 5px 10px var(--tj_darkBlue);
  color: darkgrey;
  width: 100px;
  overflow: hidden;
}
.single_page .layouts_cont > .template_pages_cont > .page_cont.active {
  color: var(--tj_green);
}
@media (hover: hover) {
  .single_page .layouts_cont > .template_pages_cont > .page_cont:hover {
    color: var(--tj_green);
    border: 1px solid var(--tj_green);
  }
  .single_page .layouts_cont > .template_pages_cont > .page_cont {
    border: 1px solid var(--tj_darkBlue);
  }
}
.single_page .layouts_cont > .template_pages_cont > .page_cont > .img_cont {
  height: 100px;
  overflow: hidden;
}
.single_page .layouts_cont > .template_pages_cont > .page_cont div img {
  width: 100px;
}
.single_page .layouts_cont > .template_pages_cont > .page_cont div.page_name {
  background-color: var(--tj_darkBlue);
  height: 40px;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  padding: 0px 10px;
}
.single_page .layouts_cont > .template_pages_cont > .page_cont span {
  font-weight: 500;
}
/* ============================================
              __AFFILIATE_SIGN_UP
============================================ */
#mcp_affiliate_sign_up {}
.signUp_pg_cont form > span {
  color: lightgrey;
  font-weight: 500;
  font-size: 20px;
  margin-top: 20px;
  display: inline-block;
}
.signUp_pg_cont > .details_form_cont > form > .affCardInfo {
  display: flex;
  opacity: 1;
  flex-wrap: wrap;
}
.signUp_pg_cont form .affCardInfo > div {
  flex-basis: 100%;
  height: 15px;
}
.signUp_pg_cont form .affCardInfo .full {
  flex-basis: 100%;
  margin-bottom: 15px;
}
.signUp_pg_cont form .affCardInfo .half {
  margin-bottom: 15px;
  flex-basis: 40%;
}
.signUp_pg_cont form .affCardInfo .last {
  margin-bottom: 0px;
}
/* <------------------ RIGHT_PANEL ------------------> */
#mrp_collapsed_pane {
  background-color: var(--tj_lightBlue);
  box-shadow: -1px 3px 10px 5px var(--tj_darkBlue);
  position: fixed;
  right: 0;
  height: 100vh;
  width: 35px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 11;
}
#mrp_collapsed_pane > button {
  color: lightgrey;
  height: 100%;
  width: 100%;
  border: 0;
  padding: 0;
  background-color: transparent;
  font-size: 30px
}
#mrp_collapsed_pane > button:hover {
  color: var(--tj_green);
}
.main_right_panel {
  background-color: var(--tj_lightBlue);
  box-shadow: -1px 3px 10px 5px var(--tj_darkBlue);
  width: 0px;
  transition: 0.1s;
  height: 100vh;
  position: fixed;
  right: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
}
.rp_active {
  width: 450px;
}
/* ============================================
              mini_pages_container
============================================ */
#mrp_mini_pages {
  width: 100%;
  flex-grow: 1;
  overflow: hidden;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
}
#mrp_mini_pages > div {
  border-bottom: 2px solid var(--tj_green);
  box-shadow: 5px 5px 10px;
  padding: 10px;
  padding-right: 5px;
}
@media (hover: none) {
  #mrp_mini_pages > div { padding-left: 5px; }
}
.mrp_section_title {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  color: var(--tj_green);
  color: lightgrey;
  margin-right: 5px;
}
.mrp_section_title .title {
  margin: 0px;
}
.mrp_section_title span {
  color: darkgrey;
  font-style: italic;
}
.mrp_section_title i {
  font-size: 20px;
  padding-top: 10px;
}
#mrp_mini_pages > div > .section_content {
  margin-top: 15px;
  /* max-height: 550px; */
  overflow-y: scroll;
  scrollbar-width: none;
}
/* -----> mpc_user_account_section */
#mp_user_account_section {
  flex-basis: auto;
}
#mp_user_account_section > .section_content > ul {
  border-bottom: 1px solid var(--tj_greyBlue);
  border-bottom: 1px solid grey;
  padding-bottom: 1px;
}
#mp_user_account_section > .section_content > ul > li {}
#mp_user_account_section > .section_content > ul > li  > a {
  border: none;
  border-radius: 0px;
  color: lightgrey;
}
#mp_user_account_section > .section_content > ul > li  > a:hover {
  background-color: var(--tj_green);
  color: black;
}
#mp_user_account_section ul a.active {
  color: var(--tj_green) !important;
  border: none;
  border-radius: 0px;
  background-color: var(--tj_greyBlue) !important;
}
@media (hover: hover) {
  #mp_user_account_section ul a.active:hover {
    background-color: var(--tj_greyBlue) !important;
    color: lightgrey !important;
  }
}
#mp_user_account_section #myTabContent > div { /* personal-info, billing-history, website... tabs */
  /* overflow-x: scroll; */
}
/* mpc_personal_info */
/* global */
#as_personal_info {
  overflow-x: scroll;
}
#as_personal_info .pi_ttl {
  color: lightgrey;
  margin-top: 10px;
  display: inline-block;
}
#as_personal_info .pi_container {
  padding: 10px;
  background-color: var(--tj_darkBlue);
  border: 1px solid var(--tj_darkGreen);
  box-shadow: 1px 3px 10px 5px var(--tj_darkBlue);
}
/* user info container */
#as_personal_info > .form_values {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#as_personal_info > .form_values > span {
  width: 35%;
  color: lightgrey;
  padding-top: 5px;
}
#as_personal_info > .form_values > input {
  width: 65%;
  margin: 0;
  margin-bottom: 10px;
  border: 0;
  border-bottom: 1px solid grey;
  color: lightgrey;
  background-color: transparent;
  transition: 0.5s;
}
#as_personal_info > .form_values > input:hover {
  border-bottom: 1px solid var(--tj_green);
  transition: 0.5s;
}
#as_personal_info > .form_values > input:focus {
  outline: none;
  box-shadow: none;
  border-bottom: 1px solid var(--tj_green);
}
#as_personal_info > .form_values > input.readonly:hover,
#as_personal_info > .form_values > input:focus {
  border-bottom: 1px solid grey;
}
/* email preferences */
#as_personal_info .toggle_btns_cont {
  padding-bottom: 5px;
}
.toggle_btns_cont > div {
  display: flex;
  justify-content: space-between;
  color: lightgrey;
}
@media (hover: hover) {
  .toggle_btns_cont > div:hover {
    color: var(--tj_green);
    transition: 0.5s;
  }
}
.toggle_btns_cont > div > span {}
.toggle_btns_cont > div > label {
  margin-top: 5px;
}
.toggle_btns_cont > div > label > input {}
.toggle_btns_cont > div > label > span {}
/* action buttons */
.action_btns_cont {
  display: flex;
  flex-direction: row;
  margin-top: 15px;
  border-top: 2px solid var(--tj_greyBlue);
}
.action_btns_cont > button {
  flex-grow: 1;
  color: lightgrey;
	background-color: transparent;
	border: 1px solid transparent;
	margin: 0;
  padding: 10px 10px;
	font-size: 15px;
	transition: 0.3s;
}
.action_btns_cont > button > i {
  margin-right: 5px;
}
.action_btns_cont > button:hover {
  color: var(--tj_green);
  background-color: var(--tj_greyBlue);
}
/* mpc_not_logged_in_content */
#log_in_btns_cont {}
#log_in_btns_cont > span {
  color: lightgrey;
  font-style: italic;
  font-size: 17px;
}
#log_in_btns_cont > #buttons_container {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
#log_in_btns_cont > #buttons_container > button:nth-child(1) {
  margin-right: 5px;
}
#log_in_btns_cont > #buttons_container > button {
  color: darkgrey;
  border: 0;
  padding: 10px 20px;
  flex-grow: 1;
  height: 40px;
  font-weight: 500;
  background-color: var(--tj_greyBlue);
}
#log_in_btns_cont > #buttons_container > button > i {
  margin-right: 5px;
}
@media (hover: hover) {
  #log_in_btns_cont > #buttons_container > button:hover {
    color: var(--tj_green);
    background-color: var(--tj_greyBlue);
  }
}
/* mpc_billing_history */
/* global */
#as_billing_history > .history_cont {
  border: 1px solid var(--tj_greyBlue);
  margin-top: 10px;
  margin-bottom: 5px;
}
#as_billing_history ul {
  display: flex;
  flex-direction: row;
  list-style: none;
  border-bottom: 1px solid var(--tj_greyBlue);
  margin-bottom: 0px;
}
#as_billing_history ul > li {
  padding-left: 10px;
}
#as_billing_history ul > .bh_date {
  width: 110px;
}
#as_billing_history ul > .bh_description {
  width: 220px;
}
#as_billing_history ul > .bh_total {
  flex-grow: 1;
}
/* titles */
#as_billing_history .hc_titles {
  padding: 10px 0px;
  border-bottom: 1px solid var(--tj_greyBlue);
  background-color: var(--tj_darkBlue);
}
#as_billing_history .hc_titles > li {
  color: lightgrey;
  font-weight: 600;
  font-size: 14px;
}
/* table-values */
.history_cont .hc_valuesCont {
  max-height: 400px;
  overflow-y: scroll;
  overflow-x: hidden;
  background-image: linear-gradient(to bottom right, var(--tj_darkBlue), var(--tj_navyBlue));
}
.history_cont .hc_values {
  padding: 10px 0px;
}
.history_cont .hc_values > li {
  color: lightgrey;
  display: flex;
  font-size: 13px;
}
.history_cont .hc_values > .bh_date {}
.history_cont .hc_values > .bh_description {}
.history_cont .hc_values > .bh_total {
  font-weight: bold;
  color: darkgrey;
  font-size: 15px
}
/* mpc_website */
#as_website .web_info_container {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--tj_greyBlue);
}
.web_info_container .tbl_cont {
  overflow-x: hidden;
  background-image: linear-gradient(to bottom right, var(--tj_darkBlue), var(--tj_navyBlue));
  border: 1px solid var(--tj_greyBlue);
  margin-top: 10px;
  box-shadow: var(--tj_shadow);
}
.web_info_container ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  border-bottom: 1px solid var(--tj_greyBlue);
  margin-bottom: 0px;
  padding: 0px;
}
.web_info_container .tbl_ttl {
  padding: 10px 0px;
  background-color: var(--tj_darkBlue);
}
.web_info_container .tbl_ttl li {
  color: lightgrey;
  font-weight: 600;
  font-size: 14px;
}
.web_info_container .wp_info {
  color: lightgrey;
}
.web_info_container .wp_info li {
  padding-top: 10px;
  padding-bottom: 10px;
  flex-basis: 70%;
}
.wp_info li.br { border-right: 1px solid var(--tj_greyBlue); }
.wp_info li.bb { border-bottom: 1px solid var(--tj_greyBlue); }
.web_info_container .wp_info li:nth-child(odd) {
  flex-basis: 30%;
}
.web_info_container .websiteList_cont {
  overflow-x: hidden;
  max-height: 100px;
  overflow-y: scroll;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 3px 0px;
  border-bottom: 0px;
}
@media(hover: none) {
  .web_info_container .websiteList_cont::-webkit-scrollbar {
    width: 6px;
  }
}
.web_info_container .websiteList_cont li {
  padding-top: 3px;
  padding-bottom: 3px;
  color: var(--tj_green);
  font-size: 15px;
}
.web_info_container ul li {
  padding-left: 10px;
  margin-top: 0px;
  font-size: 13px;
}
/* switch plans section */
#as_website > .switch_plans_ttl {
  color: darkgrey;
  font-size: 20px;
  margin-top: 5px;
  margin-bottom: 5px;
}
#as_website .sp_span {
  color: grey;
  font-size: 14px;
  line-height: 18px;
}
#as_website > .switch_plans_btn_cont {
  display: flex;
  flex-direction: row;
  border: 1px solid var(--tj_darkGreen);
  background-color: var(--tj_darkBlue);
  box-shadow: var(--tj_shadow);
  margin-top: 10px;
}
.switch_plans_btn_cont .sp_descriptionBox {
  display: none;
  position: absolute;
  padding: 10px;
  width: 200px;
  background-color: var(--tj_darkBlue);
  border: 1px solid var(--tj_darkGreen);
  box-shadow: var(--tj_shadow);
}
.switch_plans_btn_cont .sp_descriptionBox h6 {
  color: var(--tj_green);
  margin: 0px;
}
.switch_plans_btn_cont .sp_descriptionBox p {
  color: darkgrey;
  margin: 0px;
  font-size: 13px;
}
#as_website > .switch_plans_btn_cont > button {
  background-color: transparent;
  border: 0;
  color: lightgrey;
  flex-basis: 25%;
  padding: 10px 0px;
  font-weight: 500;
}
#as_website > .switch_plans_btn_cont > button:hover {
  color: var(--tj_green);
  background-color: var(--tj_greyBlue);
}
#as_website > .switch_plans_btn_cont > button.active {
  color: var(--tj_green);
}
/* mpc_switchPlansPopup */
#switchPlansModal {
  display: none;
  position: fixed;
  height: 100vh;
  width: 100%;
  z-index: 14;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
#switchPlansModal .modalCont {
  width: 400px;
  padding-bottom: 10px;
  overflow: hidden;
  background-color: var(--tj_lightBlue);
  z-index: 10;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tj_darkGreen);
  box-shadow: var(--tj_shadow);
}
/* header */
#switchPlansModal .modalCont .header {
  background-color: var(--tj_darkBlue);
  border-bottom: 1px solid var(--tj_darkGreen);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--tj_shadow);
}
#switchPlansModal .modalCont .header span {
  color: darkgrey;
  padding-left: 10px;
  font-size: 17px;
  font-weight: 500;
}
#switchPlansModal .modalCont .header > button {
  padding: 10px 15px;
  background-color: transparent;
  font-size: 20px;
}
/* body */
#switchPlansModal .modalCont .body {
  margin: 0px 10px;
}
/* validation messages */
#switchPlansModal .validationMsgs_cont {
  display: none;
  margin-top: 15px;
  margin-bottom: 10px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 3px;
  padding-left: 3px;
	background-color: var(--tj_greyBlue);
	width: 270px;
  box-shadow: var(--tj_shadow);
  border-left: 1px solid red;
}
#switchPlansModal .validationMsgs_cont div {
  color: darkgrey;
  padding: 5px 0px;
  text-align: center;
}
/* payment description */
#switchPlansModal .modalCont .paymentPlan_cont {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--tj_greyBlue);
}
#switchPlansModal .paymentPlan_cont .price {
  color: var(--tj_green);
  font-weight: 200;
  font-size: 30px;
}
#switchPlansModal .paymentPlan_cont .description {
  color: darkgrey;
  text-align: center;
  font-size: 14px;
}
/* activate plan section */
#switchPlansModal .activatePlan_cont {
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--tj_greyBlue);
}
#switchPlansModal .activatePlan_cont div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#switchPlansModal .activatePlan_cont > div > span {
  font-weight: 500;
  color: darkgrey;
}
#switchPlansModal .activatePlan_cont div .chosenDate {
  color: darkgrey;
  padding: 5px 10px;
  background-color: var(--tj_darkBlue);
  cursor: pointer;
}
@media(hover: hover) {
  #switchPlansModal .activatePlan_cont div .chosenDate:hover {
    opacity: 0.8;
  }
}
.activatePlan_cont div .chosenDate > span {
  margin-right: 10px;
}
.activatePlan_cont div .chosenDate i:nth-child(1) {
  margin-right: 10px;
}
.activatePlan_cont div .chosenDate i:nth-child(2) {
  margin-left: 10px;
}
/* dropdown */
#switchPlansModal .activatePlan_cont div ul {
  display: none;
  position: absolute;
  list-style: none;
  background-color: var(--tj_darkBlue);
  color: darkgrey;
  border: 1px solid var(--tj_darkGreen);
  box-shadow: var(--tj_shadow);
  padding: 10px 15px;
}
#switchPlansModal .activatePlan_cont div ul li {
  cursor: pointer;
  transition: 0.5s;
}
#switchPlansModal .activatePlan_cont div ul li.active,
#switchPlansModal .activatePlan_cont div ul li:hover {
  color: var(--tj_green);
}
#switchPlansModal .activatePlan_cont div ul li:nth-child(1) {
  margin-bottom: 5px;
}
#switchPlansModal .activatePlan_cont div ul li i {
  margin-right: 10px;
}
#switchPlansModal .activatePlan_cont .paymentDescription {
  font-size: 14px;
  font-weight: 500;
  color: grey;
  margin-bottom: 0px;
}
/* payment buttons */
#switchPlansModal .paymentButtons_cont {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 10px;
}
#switchPlansModal .paymentButtons_cont button {
  color: darkgrey;
  background-color: transparent;
  padding: 5px 20px;
  font-size: 20px;
  transition: 0.3s;
  width: 49%;
  border: 0;
  margin-bottom: 10px;
}
#switchPlansModal .paymentButtons_cont button:focus {
  color: var(--tj_green);
}
@media (hover: hover) {
  #switchPlansModal .paymentButtons_cont button:hover {
    color: var(--tj_green);
  }
}
#switchPlansModal .paymentButtons_cont button.active {
  color: var(--tj_green);
  background-color: var(--tj_greyBlue);
}
#switchPlansModal .paymentButtons_cont button.paypal span {
  font-style: italic;
  font-weight: bold;
}
#switchPlansModal .paymentButtons_cont .creditCardInfo {
  flex-grow: 1;
  flex-basis: 100%; /* is needed for huawei otherwise it all displays inline */
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--tj_green);
  margin-bottom: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  opacity: 0.5;
}
#switchPlansModal .paymentButtons_cont .creditCardInfo input {
  width: 0px;
  flex-grow: 1;
  background-color: transparent;
  color: darkgrey;
  border: 0;
  outline: none;
  font-size: 15px;
  font-weight: 500;
}
#switchPlansModal .paymentButtons_cont .creditCardInfo .cardNum {
  flex-grow: 3;
}
#switchPlansModal .paymentButtons_cont .creditCardInfo .expDate {}
#switchPlansModal .paymentButtons_cont .creditCardInfo .cvc {}
#switchPlansModal .pwConfirm {
  width: 100%;
  color: lightgrey;
  margin: 5px 0px;
}
#switchPlansModal .checkout {
  display: flex;
  justify-content: center;
  margin: 10px 0px;
}
#switchPlansModal .checkout button {
  box-shadow: var(--tj_shadow);
  width: 95%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#switchPlansModal .checkout button i {
  font-size: 25px;
  margin-right: 5px;
}
#switchPlansModal .checkout .checkout_other {
  display: none;
}
#switchPlansModal .checkout_paypal {
  font-style: italic;
}
/* mpc_themejet_chat_section (messages) */
#as_website .adminChat_cont {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
  padding: 10px 0px;
  padding-bottom: 1px;
  border-top: 1px solid var(--tj_greyBlue);
}
.adminChat_cont .profileCont {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 10%;
}
.adminChat_cont .profileCont i {
  font-size: 50px;
  color: grey;
}
.adminChat_cont .chatPreviewCont {
  flex-basis: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.adminChat_cont .chatPreviewCont span {
  margin-left: 10px;
  line-height: 18px;
  white-space: nowrap;
}
.adminChat_cont .chatPreviewCont > span {
  color: lightgrey;
  width: 100%;
  display: block;
}
.adminChat_cont .chatPreviewCont div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.adminChat_cont .chatPreviewCont div span {
  flex-grow: 1;
  color: grey;
  font-size: 14px;
  font-style: italic;
  flex-basis: 80%;
  max-width: 87%;
  overflow-x: scroll;
  overflow-y: hidden;
}
.adminChat_cont .chatPreviewCont div .dot {
  width: 10px;
  height: 10px;
  border-radius: 50px;
  background-color: var(--tj_greyBlue);
}
.adminChat_cont .chatPreviewCont .newMsg .dot {
  background-color: var(--tj_green);
}
.adminChat_cont .chatPreviewCont .newMsg span {
  color: var(--tj_green);
}
.adminChat_cont .chatBtnCont {
  flex-basis: 30%;
  align-items: center;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}
.adminChat_cont .chatBtnCont button {
  padding: 5px 30px;
  margin-right: 10px;
  box-shadow: var(--tj_shadow);
}
/* mpc_review */
#as_review {
  /* margin-bottom: -20px; */
  overflow: hidden;
}
.allReviewsCont {
  box-shadow: var(--tj_shadowBlack);
  border: 1px solid var(--tj_greyBlue);
  background-color: var(--tj_darkBlue);
  margin: 10px 0px;
}
/* tj-versions carousel */
#tjVersionsCarousel {
  height: 40px;
  margin-bottom: 8px;
  color: lightgrey;
}
#tjVersionsCarousel > .carousel-inner > ul {
  padding: 0px 20px;
  margin-top: 10px;
  text-align: center;
  border: 0px;
  white-space: nowrap;
}
#tjVersionsCarousel > .carousel-inner > ul.left {
  text-align: left;
  padding-left: 22px;
}
#tjVersionsCarousel > .carousel-inner > ul > li {
  background-color: var(--tj_greyBlue);
  color: lightgrey;
  padding: 2px 5px;
  border-radius: 50px;
  display: inline-block;
  opacity: 0.5;
  transition: 0.3s;
  cursor: pointer;
  margin-right: 5px;
  width: 32%;
  overflow-x: scroll;
  text-align: center;
}
#tjVersionsCarousel > .carousel-inner > ul > li::-webkit-scrollbar {
  height: 0px;
}
#tjVersionsCarousel > .carousel-inner > ul > li:last-child {
  margin-right: 0px;
}
#tjVersionsCarousel > .carousel-inner > ul > li:hover {
  opacity: 0.7;
}
#tjVersionsCarousel > .carousel-inner > ul > li.active {
  color: var(--tj_green) !important;
  opacity: 1;
  background-color: var(--tj_greyBlue) !important;
  cursor: context-menu;
}
#tjVersionsCarousel > a {
  padding: 7px;
  margin: 10px 0px;
  margin-bottom: 0px;
  width: auto;
  height: 30px;
  color: darkgrey;
  opacity: 1;
}
#tjVersionsCarousel > a:not(.disabled):hover {
  color: lightgrey;
}
#tjVersionsCarousel > a.disabled {
  opacity: 0.5;
  cursor: context-menu;
}
#tjVersionsCarousel > a i {
  font-size: 17px;
}
/* mpc_single_review_details */
.allReviewsCont > .reviewDetailsCont {
  margin: 0px 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(65, 72, 81, 0.7);
}
.reviewDetailsCont > .singleReviewCont {
  display: none;
  color: lightgrey;
}
.reviewDetailsCont > .singleReviewCont.active {
  display: block;
}
/* single review headline */
.singleReviewCont .headline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(65, 72, 81, 0.7);
}
.singleReviewCont .headline > span {
  color: darkgrey;
}
.singleReviewCont .totStars {
  cursor: context-menu;
  margin-right: 10px;
}
.singleReviewCont .totStars > i {
  color: grey;
  margin-right: 3px;
}
.singleReviewCont .totStars > i._fill {
  color: var(--tj_darkGreen);
}
.singleReviewCont .totStars > i.fill {
  color: var(--tj_green);
}
.singleReviewCont .starCount {
  flex-grow: 1;
}
.singleReviewCont .downloadCount {
}
.singleReviewCont .downloadCount > i {
  margin-right: 5px;
}
.singleReviewCont .headline button {
  background-color: var(--tj_greyBlue);
  color: darkgrey;
  padding: 7px 12px;
  font-weight: 500;
  font-size: 13px;
  border: 0px;
}
.singleReviewCont .headline .ratingsCount {
  margin-top: 5px;
}
/* "previous review" section */
#as_review .userReviewCont {
  margin-top: 5px;
}
#as_review .userReviewCont h4 {
  font-weight: 100;
  color: darkgrey;
}
#as_review .userReviewCont > section {
  display: none;
}
#as_review .userReviewCont > section.active {
  display: flex;
  flex-direction: column;
  margin-right: -10px;
}
#as_review .userReviewCont > section > div {
  display: flex;
  flex-direction: column;
  max-height: 100px;
  overflow: scroll;
  overflow-x: hidden;
  margin-right: 3px;
}
#as_review .userReviewCont > section div > div {
  font-size: 13px;
  padding: 5px 10px;
  width: 80%;
  border-radius: 5px;
  margin-top: 10px;
}
#as_review .userReviewCont > section div > div:nth-child(1) {
  margin-top: 0px;
}
#as_review .userReviewCont > section .userMsg {
  background-color: var(--tj_lightBlue);
  border-bottom-left-radius: 0px;
}
#as_review .userReviewCont > section .reply {
  align-self: flex-end;
  background-color: rgba(65, 72, 81, 0.5); /* greyblue */
  border-bottom-right-radius: 0px;
  margin-right: 3px;
}
#as_review .userReviewCont > section p {
  margin: 0px;
  color: lightgrey;
  font-size: 14px;
}
#as_review .userReviewCont > section div i {
  color: var(--tj_green);
}
#as_review .userReviewCont > section span {
  display: block;
  color: grey;
  font-style: italic;
}
#as_review .userReviewCont > section > button {
  margin: 10px;
  margin-left: 0px;
  background-color: var(--tj_greyBlue);
  color: darkgrey;
  border: 0;
  padding: 5px;
  font-weight: 500;
}
#as_review .userReviewCont > section > button:hover {
  color: var(--tj_green);
}
#as_review .userReviewCont > section > button i {
  margin-right: 5px;
}
/* "No Reviews" & "No Downloads" Section */
#as_review .userReviewCont > section._section {}
#as_review .userReviewCont > section._section div {
  justify-content: center;
  align-items: center;
}
#as_review .userReviewCont > section._section div > i {
  color: darkgrey;
  font-size: 30px;
  margin-top: 5px;
}
#as_review .userReviewCont > section._section div > span {
  font-size: 16px;
  width: 80%;
  text-align: center;
}
#as_review .userReviewCont > section._section button {}
/* mpc_tjVer_reviewList */
#as_review .reviewListCont {
  box-shadow: var(--tj_shadowBlack);
  border: 1px solid var(--tj_greyBlue);
  background-color: var(--tj_darkBlue);
  margin: 10px 0px;
  margin-top: 15px;
  display: none;
  flex-direction: column;
  opacity: 0;
}
#as_review .reviewListCont > button {
  color: darkgrey;
  background-color: var(--tj_greyBlue);
  border: none;
  margin: 5px;
  margin-bottom: 0px;
  padding: 5px;
  font-weight: 500;
  transition: 0.3s;
}
#as_review .reviewListCont > button:hover {
  color: var(--tj_green);
}
#as_review .reviewListCont > button i {
  margin-right: 5px;
}
#as_review .reviewListCont .headerBtns {
  display: flex;
  align-items: center;
  color: lightgrey;
  border-bottom: 1px solid var(--tj_greyBlue);
  padding: 10px;
  margin-bottom: 10px;
}
#as_review .reviewListCont .headerBtns > span {
  font-size: 20px;
  font-weight: 100;
  color: darkgrey;
  white-space: nowrap;
  flex-grow: 1;
  max-width: 98px;
  margin-right: 5px;
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-width: none;
}
#as_review .reviewListCont .headerBtns > span::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
#as_review .reviewListCont .headerBtns > ul {
  display: flex;
  list-style: none;
  padding: 0px;
  margin: 0px;
  border: 1px solid var(--tj_greyBlue);
  border-radius: 50px;
  overflow: hidden;
}
#as_review .reviewListCont .headerBtns > ul li {
  padding: 3px 13px;
  transition: 0.3s;
  font-size: 14px;
}
#as_review .reviewListCont .headerBtns > ul li.active {
  background-color: var(--tj_greyBlue) !important;
  color: var(--tj_green) !important;
}
#as_review .reviewListCont .headerBtns > ul li:hover {
  color: lightgrey;
  cursor: pointer;
}
#as_review .reviewListCont .headerBtns > div.icons {
  display: flex;
  margin-right: -5px;
  margin-left: 32px;
}
#as_review .reviewListCont .headerBtns > div.icons i {
  padding: 5px;
  padding-bottom: 10px;
  margin-bottom: -5px;
}
#as_review .reviewListCont .headerBtns > div.icons i.hover,
#as_review .reviewListCont .headerBtns > div.icons i:hover {
  color: var(--tj_green);
}
#as_review .reviewListCont .headerBtns > div ul i {
  font-size: 14px;
}
/* dropdowns */
#as_review .headerBtns > .dropdown {
  display: none;
  position: absolute;
  background-color: var(--tj_darkBlue);
  border: 1px solid var(--tj_green);
  padding: 15px;
  box-shadow: var(--tj_shadow);
  z-index: 2;
}
#as_review .headerBtns > .dropdown > span {
  color: var(--tj_green);
  font-size: 13px;
  font-weight: 500;
}
#as_review .headerBtns > .dropdown > ul {
  list-style: none;
  color: darkgrey;
  padding: 0px;
  margin: 0px;
}
#as_review .headerBtns > .dropdown > ul li {}
#as_review .headerBtns > .dropdown > ul li:not(.active):hover {
  color: lightgrey;
  cursor: pointer;
}
#as_review .headerBtns > .dropdown > ul li.active {
  color: var(--tj_green);
  cursor: context-menu;
}
#as_review .headerBtns > .dropdown.filter > ul li.active {
  cursor: pointer;
}
#as_review .headerBtns > .dropdown > ul li i {
  padding-right: 5px;
  font-size: 14px;
}
#as_review .headerBtns > .dropdown > div.ratings {
  display: flex;
}
#as_review .headerBtns > .dropdown > .ratings > i {
  color: grey;
  opacity: 0.5;
  padding: 3px 2px;
  padding-bottom: 0px;
  transition: 0.2s;
  background-color: transparent !important;
}
#as_review .headerBtns > .dropdown > .ratings > i.hover,
#as_review .headerBtns > .dropdown > .ratings > i:hover {
  color: var(--tj_green);
  opacity: 1;
}
#as_review .headerBtns > .dropdown > .ratings > i:nth-child(1) {
  padding-left: 0px;
}
#as_review .headerBtns > .dropdown > div > i.show {
  color: var(--tj_darkGreen);
  opacity: 1;
}
/* messages (reviews) list */
#as_review .reviewListCont .msgsCont {
  padding-left: 10px;
  padding-right: 3px;
  margin-right: 3px;
  max-height: 250px;
  overflow: scroll;
  overflow-x: hidden;
  margin-bottom: 10px;
  display: none;
  flex-direction: column;
}
#as_review .reviewListCont .msgsCont.active {
  display: flex;
}
#as_review .reviewListCont .msgsCont .userReview {
  background-color: var(--tj_lightBlue);
  padding: 5px 10px;
  border-radius: 5px;
  border-bottom-left-radius: 0px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
#as_review .reviewListCont .msgsCont .userReview.lastChild {
  margin-bottom: 0px;
}
#as_review .reviewListCont .msgsCont .userReview > i {
  color: grey;
  font-size: 40px;
  padding-top: 5px;
}
.reviewListCont .msgsCont .userReview .reviewInfo {
  margin-left: 10px;
  flex-grow: 1;
  flex-basis: 80%;
  padding-bottom: 5px;
}
.reviewListCont .msgsCont .userReview .reviewInfo span.user {
  display: block;
  color: lightgrey;
  font-weight: 500;
  font-size: 14px;
}
.reviewListCont .msgsCont .userReview .reviewInfo i {
  font-size: 13px;
  color: var(--tj_darkGreen);
  margin-right: 2px;
}
.reviewListCont .msgsCont .userReview .reviewInfo i.show {
  color: var(--tj_green);
}
.reviewListCont .msgsCont .userReview .reviewInfo span.date {
  font-size: 13px;
  color: darkgrey;
}
.reviewListCont .msgsCont .userReview .reviewInfo p {
  font-size: 14px;
  color: lightgrey;
  margin: 0px;
}
.reviewListCont .msgsCont .userReview .response {
  margin-left: 50px;
  color: darkgrey;
  border-top: 1px solid var(--tj_greyBlue);
}
.reviewListCont .msgsCont .userReview .response span.title {
  font-size: 14px;
  font-weight: 500;
  color: var(--tj_green);
  margin-right: 5px;
}
.reviewListCont .msgsCont .userReview .response span.date {
  font-size: 13px;
}
.reviewListCont .msgsCont .userReview .response p {
  font-size: 14px;
  color: lightgrey;
}
/* mpc_rate_themejet_section */
#as_review > .rateTjCont {
  box-shadow: var(--tj_shadowBlack);
  border: 1px solid var(--tj_greyBlue);
  background-color: var(--tj_darkBlue);
  margin: 10px 0px;
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0px;
}
#as_review > .rateTjCont > h4 {
  color: darkgrey;
  font-weight: 100;
  margin-bottom: 0px;
}
/* error/success messages */
.rateTjCont .errorMsgs {
  position: absolute;
  color: darkgrey;
  margin-top: 5px;
}
.rateTjCont .errorMsgs span {
  padding: 5px 10px;
  background-color: var(--tj_greyBlue);
  box-shadow: var(--tj_shadowBlack);
  display: none;
}
.rateTjCont .errorMsgs .error {
  border: 1px solid red;
}
.rateTjCont .errorMsgs .success {
  border: 1px solid var(--tj_green);
}
/* tj-versions carousel */
#rateTjVersions {
  height: 40px;
  margin-bottom: 8px;
  color: lightgrey;
  width: 100%;
}
#rateTjVersions > .carousel-inner > ul {
  padding: 0px;
  list-style: none;
  margin-top: 7px;
  text-align: center;
  border: 0px;
  min-height: 35px;
}
#rateTjVersions > .carousel-inner > ul.left {
  text-align: left;
  padding-left: 40px;
}
#rateTjVersions > .carousel-inner > ul > li {
  display: inline;
  line-height: 30px;
  color: lightgrey;
  padding: 0px 5px;
  font-size: 13px;
  opacity: 0.5;
  cursor: pointer;
  background-color: transparent !important;
  transition: 0.1s;
}
#rateTjVersions > .carousel-inner > ul > li:hover {
  opacity: 0.7;
}
#rateTjVersions > .carousel-inner > ul > li.active {
  font-size: 23px;
  opacity: 1;
  color: var(--tj_green);
}
#rateTjVersions > .carousel-inner > ul > li.disabled {
  opacity: 0.5;
  color: darkgrey;
}
#rateTjVersions > a {
  padding: 7px;
  margin: 10px 0px;
  margin-bottom: 0px;
  width: auto;
  height: 30px;
  color: darkgrey;
  opacity: 1;
}
#rateTjVersions > a:not(.disabled):hover {
  color: lightgrey;
}
#rateTjVersions > a.disabled {
  opacity: 0.5;
  cursor: context-menu;
}
#rateTjVersions > a i {
  font-size: 17px;
}
/* ratings (stars) */
.rateTjCont > .ratingsCont {
  display: flex;
}
.rateTjCont > .ratingsCont i {
  color: grey;
  padding: 3px;
  font-size: 20px;
  cursor: pointer;
  transition: 0.2s;
  background-color: transparent !important;
}
.rateTjCont > .ratingsCont i.show {
  color: var(--tj_darkGreen);
}
.rateTjCont > .ratingsCont i.hover,
.rateTjCont > .ratingsCont i:hover {
  color: var(--tj_green);
  transition: 0.2s;
}
/* text-area and button */
.rateTjCont > .reviewFormCont {
  width: 100%;
  padding: 0px 10px;
  margin-top: 10px;
}
.rateTjCont form {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.rateTjCont form > textarea {
  margin-bottom: 10px;
  background-color: transparent;
  background-color: var(--tj_lightBlue);
  border: 1px solid var(--tj_greyBlue);
  padding: 5px;
  color: lightgrey;
  outline: none;
  resize: none;
  height: 100px;
  transition: 1s;
}
.rateTjCont form > textarea.highlight {
  border: 1px solid var(--tj_green) !important;
}
.rateTjCont form > button {
  background-color: var(--tj_greyBlue);
  color: darkgrey;
  border: 0px;
  font-weight: 500;
  padding: 5px;
}
.rateTjCont form > button i {
  margin-right: 5px;
}
/* -----> mpc_tj_versions_section */
#mp_tj_versions_section {
  flex-basis: auto;
}
#mp_tj_versions_section > .section_content {}
#mp_tj_versions_section > .section_content > div {
  margin-top: 10px;
}
#mp_tj_versions_section > .section_content > div:nth-child(1) {
  margin-top: 0px;
}
#mp_tj_versions_section > .section_content > div > h4 {
  color: var(--tj_green);
}
#mp_tj_versions_section > .section_content > div > h4 > span {
  color: grey;
  font-size: 15px;
}
#mp_tj_versions_section > .section_content > div > span {
  color: darkgrey;
  font-weight: 500;
  font-size: 18px;
  margin-left: 15px;
}
#mp_tj_versions_section > .section_content > div > ul {
  margin-top: 5px;
  margin-bottom: 5px;
}
#mp_tj_versions_section > .section_content > div > ul > li {
  color: lightgrey;
}
#mp_tj_versions_section > .section_content > div > button {
  border: 0;
  padding: 0px 20px;
  width: 100%;
  color: darkgrey;
  font-weight: 500;
  background-color: var(--tj_greyBlue);
  height: 40px;
}
@media (hover: hover) {
  #mp_tj_versions_section > .section_content > div > button:hover {
    color: var(--tj_green);
    background-color: var(--tj_greyBlue);
  }
}
#mp_tj_versions_section div > button.disabled:hover {
  color: darkgrey;
}
#mp_tj_versions_section > .section_content > div > button > i {
  padding-right: 10px;
}
/* -----> mpc_faq_section */
#mp_faq_section {
  flex-basis: auto;
}
/* questions */
#mp_faq_section > .section_content > .question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: lightgrey;
  border-bottom: 1px solid grey;
  padding: 5px 5px;
  cursor: pointer;
  font-weight: bold;
}
@media (hover: hover) {
  #mp_faq_section > .section_content > .question:hover {
    color: var(--tj_green);
  }
}
#mp_faq_section > .section_content > div > span {}
#mp_faq_section > .section_content > div > i {}
/* answers */
#mp_faq_section > .section_content > .answer {
  display: none;
  padding: 0px 5px;
  padding-top: 5px;
}
#mp_faq_section > .section_content > .answer p {
  color: darkgrey;
  margin-bottom: 0px;
}
/* ============================================
          email_subscription_container
============================================ */
#mrp_email_subscription {
  border-top: 2px solid var(--tj_green);
  padding: 0px 10px;
  width: 100%;
  height: 60px;
  min-height: 60px;
  transition: 0.3s;
}
#mrp_email_subscription.open {
  height: 175px;
  min-height: 175px;
  transition: 0.3s;
}
/* error messages */
#mrp_email_subscription .subMsgsCont {
  display: none;
  position: relative;
  margin-top: -140px;
	background-color: var(--tj_greyBlue);
	width: 80%;
	margin-left: auto;
	margin-right: auto;
  box-shadow: 1px 3px 10px 5px var(--tj_darkBlue);
}
#mrp_email_subscription .errorCont {
  border-left: 1px solid red; }
#mrp_email_subscription .successCont {
  border-left: 1px solid var(--tj_green); }
#mrp_email_subscription .subMsgsCont > .sub_msg {
	color: darkgrey;
	padding: 5px 0px;
}
/* top icon */
#mrp_email_subscription .envelope {
  margin-top: -20px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
#mrp_email_subscription .envelope > i {
  background-color: var(--tj_greyBlue);
  padding: 10px;
  border-radius: 50px;
  border: 2px solid var(--tj_green);
  color: darkgrey;
  cursor: pointer;
}
@media (hover: hover) {
  #mrp_email_subscription .envelope > i:hover { color: var(--tj_green); }
}
/* newsletter section */
#mrp_email_subscription > h3 {
  color: darkgrey;
  margin-bottom: 0px;
}
#mrp_email_subscription > p {
  color: grey;
  margin-top: 10px;
  margin-bottom: 0;
}
#mrp_email_subscription > form {}
#mrp_email_subscription > form > input {
  margin: 0;
  margin-top: 10px;
  color: lightgrey;
  width: 200px;
}
#mrp_email_subscription > form > button {
  color: darkgrey;
	background-color: transparent;
	border: 1px solid transparent;
	margin: 0;
	margin-bottom: 10px;
	padding: 5px 20px;
	font-size: 20px;
	transition: 0.3s;
}
@media (hover: hover) {
  #mrp_email_subscription > form > button:hover,
  #mrp_email_subscription > form > button:focus {
    color: var(--tj_green); }
}
#mrp_email_subscription > form > button.disabled:hover,
#mrp_email_subscription > form > button.disabled:focus {
  color: darkgrey;
  cursor: context-menu;
}
/* ================================ LAPTOP_VIEW ================================ */
/* Large devices (laptops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* <------------------ LPT_LEFT_PANEL ------------------> */
  .lp_active { width: 200px !important; }
  /* <------------------ LPT_CENTRE_PANEL ------------------> */
  .main_centre_panel {
    margin-right: 35px;
    transition: 0.3s;
  }
  /* <------------------ LPT_RIGHT_PANEL ------------------> */
  .rp_active { width: 450px !important; }
  .main_right_panel {
    width: 0px;
    box-shadow: none;
  }
}
/* ================================ TABLET_VIEW ================================ */
/* Medium devices (tablets, 768px and up) */
@media (min-width: 576px) and (max-width: 991.98px) {
  /* <------------------ TBL_LEFT_PANEL ------------------> */
  .lp_active { width: 200px !important; }
  .main_left_panel {
    width: 0px;
    box-shadow: none;
  }
  /* <------------------ TBL_CENTRE_PANEL ------------------> */
  .main_centre_panel {
    margin-left: 35px;
    margin-right: 35px;
    transition: 0.3s;
  }
  /* ============================================
            __TBL_PREMADE_DESIGNS_PAGE
  ============================================ */
  /* tbl_pd_single_pages */
  /* single-pages - template-pages display */
  .single_page .layouts_cont > .template_pages_cont {
    justify-content: center;
    padding-left: 0px !important;
  }
  .single_page .layouts_cont > .template_pages_cont > .page_cont {
    margin: 5px;
  }
  /* <------------------ TBL_RIGHT_PANEL ------------------> */
  .rp_active { width: 450px !important; }
  .main_right_panel {
    width: 0px;
    box-shadow: none;
  }
}
/* ================================ MOBILE_VIEW ================================ */
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.99px) {
  #mbl_nav_bar {
    display: flex;
    height: 50px;
    border-bottom: 1px solid var(--tj_green);
  }
  /* <------------------ MBL_LEFT_PANEL ------------------> */
  .lp_active { width: 200px !important; }
  #mlp_collapsed_pane {
    display: none;
  }
  .main_left_panel {
    width: 0px;
    box-shadow: none;
  }
  /* ============================================
               mbl_lp_logo_container
  ============================================ */
  .tj_logo_container {
    display: none;
  }
  /* ============================================
               mbl_lp_profile_picture
  ============================================ */
  .mlp_profile_picture {
    margin: 0px 10px;
    margin-top: 50px;
    padding: 10px 0px;
    padding-top: 20px;
    border-bottom: 1px solid grey;
  }
  .mlp_profile_picture img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    padding: 0px;
  }
  .mlp_profile_picture span {
    color: white;
  }
  /* ============================================
                mbl_lp_vertical_menu
  ============================================ */
  /* page links */
  #lp_linksCont {
    margin-top: 10px;
  }
  #lp_linksCont > .nav-link {
    color: white;
    font-size: 17px;
    padding-top: 7px;
    padding-bottom: 7px;
  }
  #lp_linksCont > .nav-link:hover {
    background-color: #45A29E;
    border-radius: 0px;
  }
  #lp_linksCont > .active {
    background-color: #1F2833;
    color: #45A29E;
    border-radius: 0px;
  }
  #lp_linksCont > .active:hover {
    color: #1F2833;
  }
  /* collapse pane buttons */
  #collapse_panels_cont {
    display: none;
  }
  #collapse_pane_btns_cont {
    display: none;
  }
  /* <------------------ MBL_CENTRE_PANEL ------------------> */
  .main_centre_panel {
    padding-top: 50px;
    margin-left: 0px;
    margin-right: 0px !important;
  }
  .tj_website_footer {}
  .tj_website_footer > span {
    font-size: 13px;
  }
  /* ============================================
                __MBL_LOG_IN_PAGE
  ============================================ */
  .log_in_background {
    margin-top: -50px;
  }
  @media (hover: none) {
    /* error messages */
    .error_messages_cont {
      width: 90%;
    }
    .error_messages_cont > .error_msg {
      font-size: 15px;
    }
    .error_messages_cont > .error_empty_user {}
    .error_messages_cont > .error_empty_pw {}
    .error_messages_cont > .error_incorrect {}
    .outer_box_container {
      width: 70%;
      max-width: 350px;
      height: 370px;
    }
    /* logo */
    .outer_box_container > img {
      margin-bottom: 10px;
      width: 70px;
    }
    /* input fields */
    .outer_box_container > form {}
    .outer_box_container > form > input {
      width: 80%;
      font-size: 17px;
    }
    .outer_box_container > form > input:hover {
    }
    .outer_box_container > form > input:focus {
    }
    /* log-in button */
    .outer_box_container > form > button {
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .outer_box_container > form > button > i {
    }
    /* loading-icon */
    .login_load_icon {
    }
    /* forgot details link */
    .outer_box_container > .forgot_details {
    }
    .outer_box_container > .forgot_details:hover {
    }
    .outer_box_container > .forgot_details:focus {
    }
  }

  /* ============================================
                __MBL_SIGN_UP_PAGE
  ============================================ */
  #mcp_sign_up {}
  .signUp_pg_cont {}
  @media (hover: none) {
    .signUp_pg_cont {
      padding-top: 20px;
    }
  }
  .signUp_pg_cont > span {
    font-size: 20px;
    text-align: center;
  }
  /* mbl_select_subscription_plan */
  .signUp_pg_cont > .pricing_cont {
    width: 90%;
  }
  .signUp_pg_cont > .pricing_cont > div {}
  .signUp_pg_cont > .pricing_cont > div:hover {}
  .signUp_pg_cont > .pricing_cont > div.active {}
  .signUp_pg_cont > .pricing_cont > div.active:hover {}
  .signUp_pg_cont > .pricing_cont .price {
    flex-basis: 25%;
  }
  .signUp_pg_cont > .pricing_cont .description {
    flex-basis: 75%;
    font-size: 15px;
  }
  /* mbl_customer_registration_form */
  .signUp_pg_cont > .details_form_cont {
    width: 90%;
    overflow-y: hidden;
    margin-bottom: 20px;
    height: auto;
  }
  .signUp_pg_cont > .details_form_cont > .error_messages_cont {}
  .signUp_pg_cont .error_messages_cont > div {}
  /* logo */
  .signUp_pg_cont > .details_form_cont > img {
  }
  .signUp_pg_cont > .details_form_cont > .title {
    font-size: 17px;
  }
  /* input fields */
  .signUp_pg_cont > .details_form_cont > form {
    padding: 0px 10px;
  }
  .signUp_pg_cont > .details_form_cont > form > input,
  .signUp_pg_cont > .details_form_cont > form > select {
    font-size: 17px;
  }
  .signUp_pg_cont > .details_form_cont > form > input {
  }
  .signUp_pg_cont > .details_form_cont > form > input:nth-child(odd) {
  }
  .signUp_pg_cont > .details_form_cont > form > input:hover {
  }
  .signUp_pg_cont > .details_form_cont > form > input:focus {
  }
  /* enter country options */
  .signUp_pg_cont > .details_form_cont > form > select {}
  .signUp_pg_cont > .details_form_cont > form > select > option {}
  /* payment options */
  @media (hover: none) {
    .signUp_pg_cont > .details_form_cont > form > button {
      padding: 0px;
      padding-top: 5px;
      padding-bottom: 0px;
    }
  }
  .signUp_pg_cont > .details_form_cont > form > button:hover {
  }
  .signUp_pg_cont > .details_form_cont > form > button:focus {
  }
  .signUp_pg_cont > .details_form_cont > form > button > i {
  }
  @media (hover: none) {
    .signUp_pg_cont > .details_form_cont > form > button > .hide_mbl {
      display: none;
    }
  }
  .signUp_pg_cont > .details_form_cont > form > .paypal > span {
  }
  .signUp_pg_cont > .details_form_cont > form > .paypal > i {
  }
  .signUp_pg_cont > .details_form_cont > form > .payment_method {
  }
  .signUp_pg_cont > .details_form_cont > form > .payment_method > i {
  }
  /* other payment options fields */
  .signUp_pg_cont > .details_form_cont > form > .card_info_cont {
  }
  .signUp_pg_cont > .details_form_cont > form > .card_info_cont > input {
    padding-top: 5px;
    font-size: 15px;
  }
  .signUp_pg_cont > .details_form_cont > form > .card_info_cont > .card_num {
    /* flex-grow: 2; */
  }
  .signUp_pg_cont > .details_form_cont > form > .card_info_cont > .exp_date {}
  .signUp_pg_cont > .details_form_cont > form > .card_info_cont > .cvc {}
  /* terms & conditions */
  .signUp_pg_cont > .details_form_cont > form > .checkboxes {}
  .signUp_pg_cont > .details_form_cont > form > .checkboxes > input {}
  .signUp_pg_cont > .details_form_cont > form > .checkboxes > span {}
    /* The container (custom checkbox 'copied code') */
    .container-checkbox {
      font-size: 15px;
    }
    /* Hide the browser's default checkbox */
    .container-checkbox input {
    }
    /* Create a custom checkbox */
    .container-checkbox .checkmark {
    }
    /* On mouse-over, add a grey background color */
    .container-checkbox:hover input ~ .checkmark {
    }
    /* When the checkbox is checked, add a blue background */
    .container-checkbox input:checked ~ .checkmark {
    }
    /* Create the checkmark/indicator (hidden when not checked) */
    .container-checkbox .checkmark:after {
    }
    /* Show the checkmark when checked */
    .container-checkbox input:checked ~ .checkmark:after {
    }
    /* Style the checkmark/indicator */
    .container-checkbox .checkmark:after {
    }
  /* chekout btn */
  .signUp_pg_cont > .details_form_cont > form > .checkout_btn {
  }
  .signUp_pg_cont > .details_form_cont > form > .checkout_btn:hover {
  }
  .signUp_pg_cont > .details_form_cont > form > .checkout_btn > span {
  }
  /* ============================================
                  __MBL_HOME_PAGE
  ============================================ */
  #home_page_cont {}
  /* text-content */
  #home_page_cont > h1 {
    font-size: 30px;
  }
  #home_page_cont > span {
    font-size: 15px;
    padding: 0px 10px;
  }
  #home_page_cont > button {}
  /* image (slideshow) */
  .splide { width: 95%; }
  /* extra information */
  #home_page_cont > .extra_info_cont {}
  #home_page_cont > .extra_info_cont > div {}
  #home_page_cont > .extra_info_cont > div > .number {}
  #home_page_cont > .extra_info_cont > div > .title {}
  #home_page_cont > .extra_info_cont > div > .paragraph {}
  /* ============================================
                __MBL_AFFILIATE_PAGE
  ============================================ */
  /* global */
  #affiliate_page_cont {}
  #affiliate_page_cont > .section {}
  #affiliate_page_cont > .section > .column {
    padding-right: 10px;
    padding-left: 10px;
  }
  #affiliate_page_cont > .section > .column > .title {}
  #affiliate_page_cont > .section > .column > ul {}
  #affiliate_page_cont > .section > .column li {
    font-size: 15px;
  }
  /* section-1 */
  #affiliate_page_cont > .section:nth-child(1) {}
  #affiliate_page_cont > .section > .column:nth-child(1) {}
  /* section-2 */
  #affiliate_page_cont > .section:nth-child(2) {}
  #affiliate_page_cont > .section > .column:nth-child(2) {}
  /* sign-up */
  #affiliate_page_cont > .sign_up_sect {}
  #affiliate_page_cont > .sign_up_sect > span {
    font-size: 20px;
  }
  #affiliate_page_cont > .sign_up_sect > div {}
  #affiliate_page_cont > .sign_up_sect > div > button {}
  #affiliate_page_cont > .sign_up_sect > div > button:hover {}
  /* ============================================
          __MBL_TERMS_AND_CONDITIONS_PAGE
  ============================================ */
  #terms_and_conditions_cont {
  }
  #terms_and_conditions_cont > .header {
  }
  #terms_and_conditions_cont > .header > .title {
    font-size: 30px;
  }
  #terms_and_conditions_cont > .header > span {
    font-size: 15px;
  }
  #terms_and_conditions_cont > .header > .last_modified {
    font-size: 15px;
  }
  /* content */
  #terms_and_conditions_cont > .section {
  }
  #terms_and_conditions_cont > .section > .title {
    font-size: 20px;
  }
  #terms_and_conditions_cont > .section > .text {}
  /* ============================================
             __MBL_DOCUMENTATION_PAGE
  ============================================ */
  /* global */
  #documentation_cont {}
  #documentation_cont > .tutorials_cont {}
  #documentation_cont > .tutorials_cont > nav {}
  #documentation_cont > .tutorials_cont > nav > span {
    font-size: 25px;
  }
  #documentation_cont > .tutorials_cont > nav > i {}
  #documentation_cont > .tutorials_cont > div {
    /* justify-content: center; */
  }
  #documentation_cont > .tutorials_cont > div > div {
    margin-right: 0px;
  }
  #documentation_cont > .tutorials_cont .icon_cont {}
  #documentation_cont > .tutorials_cont > div i {}
  #documentation_cont > .tutorials_cont > div span {}
  /* single pages -header (global) */
  #documentation_cont > .single_pages_cont {}
  .single_pages_cont > div {}
  .single_pages_cont > div > .tut_header {
    padding-right: 10px;
    padding-left: 10px;
  }
  .single_pages_cont > div > .tut_header > .toggle_tut_pgs {}
  .single_pages_cont > div > .tut_header > .toggle_tut_pgs > i {}
  .single_pages_cont > div > .tut_header > .tut_title {}
  .single_pages_cont > div > .tut_header > .tut_description {}
  .single_pages_cont > div > .tut_header > ul {}
  .single_pages_cont > div > .tut_header > ul > a {}
  /* single pages -columns (global) */
  .single_pages_cont > div > .column {}
  .single_pages_cont > div > .column > .section {}
  /* ============================================
            __MBL_PREMADE_DESIGNS_PAGE
  ============================================ */
  #premade_designs_cont {}
  #premade_designs_cont > .front_page {}
  /* mbl_pd_front_page__header */
  .front_page > .header_cont button {
    padding-left: 9px;
    padding-right: 9px;
    margin-right: 2px;
  }
  .front_page > .header_cont {}
  .front_page > .header_cont > h1 {
    font-size: 30px;
  }
  .front_page > .header_cont > h4 {
    font-size: 20px;
  }
  .front_page > .header_cont > button {
    margin-right: 2px;
  }
  .front_page > .header_cont > button:nth-last-child(2) {}
  .front_page > .header_cont > .buttons_cont {
    width: 90%;
    padding-right: 10px;
    padding-left: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .front_page > .header_cont > .buttons_cont > button {
    flex-grow: 1;
    margin-right: 4px;
    margin-left: 4px;
  }
  .front_page > .header_cont > .buttons_cont > button:nth-last-child(1) {
    margin-right: 4px;
  }
  /* mbl_pd_front_page__templates */
  .front_page > .templates_grid {}
  .front_page > .templates_grid > .template_cont {}
  .front_page > .templates_grid > .template_cont > .img_cont {}
  .front_page > .templates_grid > .template_cont > .img_cont > img {}
  .front_page > .templates_grid > .template_cont > .img_cont > span {}
  /* mbl_pd_single_pages */
  /* template-info */
  #premade_designs_cont > .single_page {}
  .single_page .info {
    padding-left: 10px;
  }
  .single_page .info > button {}
  .single_page .info > button i {}
  .single_page .info > h1 {
    font-size: 30px;
    margin-bottom: 0px;
  }
  .single_page .info > span {
    margin-top: 5px;
    display: inline-block;
  }
  .single_page .info > p {}
  /* template-display */
  .single_page .template_display {
    margin: 0px;
  }
  .single_page .template_display > div {}
  .single_page .template_display > .img_cont {
    width: 80%;
  }
  .single_page .template_display > .img_cont > div.image {
    max-height: 400px;
  }
  .single_page .template_display > .img_cont > div > img {}
  .single_page .template_display > .img_cont > div.btns {
    border: 1px solid grey;
  }
  .single_page .template_display > .img_cont > div > button {}
  /* single-pages - template-pages display */
  .single_page .layouts_cont {
    /* flex-grow: 1; */
    padding-left: 0px;
  }
  .single_page .layouts_cont > span {}
  .single_page .layouts_cont > .template_pages_cont {
    justify-content: center;
    padding-left: 0px !important;
  }
  .single_page .layouts_cont > .template_pages_cont > .page_cont {
    margin: 5px;
  }
  .single_page .layouts_cont > .template_pages_cont > .page_cont > .img_cont {}
  .single_page .layouts_cont > .template_pages_cont > .page_cont div img {}
  .single_page .layouts_cont > .template_pages_cont > .page_cont div.page_name {}
  .single_page .layouts_cont > .template_pages_cont > .page_cont span {}
  /* <------------------ MBL_RIGHT_PANEL ------------------> */
  .rp_active {
    width: 100% !important;
    max-width: 450px !important;
  }
  #mrp_collapsed_pane {
    display: none;
  }
  .main_right_panel {
    width: 0px;
    box-shadow: none;
  }
  /* ============================================
              mbl_mini_pages_container
  ============================================ */
  #mrp_mini_pages {
    padding-top: 50px;
  }
  #mrp_mini_pages > div {
    margin-top: 5px;
  }
  #mrp_mini_pages > div > .section_content {
  }
  .mrp_section_title {
    line-height: 15pt;
  }
  .mrp_section_title .title {
    font-size: 20px;
  }
  .mrp_section_title span {
    font-size: 15px;
  }
  .mrp_section_title i {
    padding-top: 0px;
  }
  /* -----> mbl_mpc_user_account_section */
  #mp_user_account_section {}
  #mp_user_account_section > .section_content > ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: scroll;
  }
  #mp_user_account_section > .section_content > ul > li {
    white-space: nowrap;
  }
  #mp_user_account_section > .section_content > ul > li  > a {
    font-size: 15px;
    padding-right: 10px;
    padding-left: 10px;
  }
  #mp_user_account_section > .section_content > ul > li  > a:hover {}
  #mp_user_account_section ul a.active {}
  #mp_user_account_section ul a.active:hover {}
  /* mbl_mpc_personal_info */
  /* global */
  #as_personal_info .pi_ttl {
    /* margin-top: 10; */
    font-size: 17px;
  }
  #as_personal_info .pi_container {
    margin: 0px 0px;
    border-width: 1px;
    min-width: 230px;
  }
  /* user info container */
  #as_personal_info > .form_values {
  }
  #as_personal_info > .form_values > span {
    /* font-size: 15px; */
    flex-grow: 1;
    padding-top: 0px;
  }
  #as_personal_info > .form_values > input {
    padding: 0px;
    width: 60%;
    /* font-size: 15px; */
  }
  #as_personal_info > .form_values > input:hover {
  }
  #as_personal_info > .form_values > input:focus {
  }
  /* email preferences */
  .toggle_btns_cont {}
  .toggle_btns_cont > div {
  }
  .toggle_btns_cont > div:nth-child(1) {
  }
  .toggle_btns_cont > div:hover {
  }
  .toggle_btns_cont > div > span {
    /* font-size: 15px; */
  }
  .toggle_btns_cont > div > label {}
  .toggle_btns_cont > div > label > input {}
  .toggle_btns_cont > div > label > span {}
  /* action buttons */
  .action_btns_cont {
  }
  .action_btns_cont > button {
    /* font-size: 13px; */
    padding: 5px 0px;
    /* flex-basis: 33.33%; */
    flex-grow: 1;
    white-space: nowrap;
  }
  .action_btns_cont > button > i {
    margin-right: 0px;
  }
  .action_btns_cont > button > span::before {
    content: "\A";
    white-space: pre;
  }
  .action_btns_cont > button:hover {
  }
  /* mbl_mpc_billing_history */
  /* global */
  #as_billing_history > .history_cont {
    min-width: 240px;
  }
  #as_billing_history ul {}
  #as_billing_history ul > li {
    white-space: nowrap;
    overflow-x: scroll;
  }
  #as_billing_history ul .bh_date {
    width: 26%;
  }
  #as_billing_history ul .bh_description {
    width: 54%;
    padding-right: 5px;
  }
  #as_billing_history ul .bh_total {
    width: 20%;
    font-size: 13px;
  }
  /* titles */
  #as_billing_history .hc_titles {
  }
  #as_billing_history .hc_titles > li {
  }
  /* table-values */
  .history_cont .hc_values {
  }
  .history_cont .hc_values > li {
  }
  .history_cont .hc_values > .bh_date {
  }
  .history_cont .hc_values > .bh_description {
  }
  .history_cont .hc_values > .bh_total {
  }
  /* mbl_mpc_website */
  /* switch plans section */
  #as_website > .switch_plans_ttl {}
  #as_website > .switch_plans_btn_cont {}
  #as_website > .switch_plans_btn_cont > button {}
  #as_website > .switch_plans_btn_cont > button:hover {}
  #as_website > .switch_plans_btn_cont > button.active {}
  /* mbl_mpc_switchPlansPopup */
  #switchPlansModal .modalCont {
    width: 90%;
    max-width: 400px;
  }
  /* themejet chat (messages) section */
  .adminChat_cont .chatBtnCont button {
    padding: 5px 23px;
    font-size: 14px;
  }
  /* mbl_mpc_review */
  #as_review {
    margin-bottom: 0px;
  }
  /* previous reviews */
  #as_review > .previous_review_cont {
    /* padding: 5px; */
  }
  #as_review > .previous_review_cont > .pr_thank_you {
    font-size: 17px;
  }
  #as_review > .previous_review_cont > .pr_user_review {
    /* font-size: 13px; */
    padding-top: 5px;
    padding-bottom: 0px;
  }
  #as_review > .previous_review_cont > .pr_rating_cont {
  }
  #as_review > .previous_review_cont > .pr_rating_cont > i {
    font-size: 13px;
  }
  #as_review > .previous_review_cont > .pr_review_date {
    font-size: 13px;
  }
  /* rate themejet section */
  #as_review > .rate_tj_section {
  }
  #as_review > .rate_tj_section > span {
    /* font-size: 13px; */
  }
  #as_review > .rate_tj_section > .tj_version {
    /* font-size: 15px; */
  }
  #as_review > .rate_tj_section > div {}
  #as_review > .rate_tj_section > div > button {
    /* font-size: 15px; */
  }
  /* leave review section */
  #as_review {
  }
  #as_review > form {
  }
  #as_review > form > textarea {
    /* padding: 5px;
    height: 70px; */
    /* font-size: 13px; */
  }
  #as_review > form > textarea:focus {
  }
  #as_review > form > button {
    /* font-size: 13px;
    padding: 5px 10px; */
    margin-bottom: 0px;
  }
  #as_review > form > button:hover {
  }
  #as_review > form > button > i {
  }
  /* -----> mbl_mpc_tj_versions_section */
  #mp_tj_versions_section {
  }
  #mp_tj_versions_section > .section_content {}
  #mp_tj_versions_section > .section_content > div {
  }
  #mp_tj_versions_section > .section_content > div > h4 {
    font-size: 20px;
  }
  #mp_tj_versions_section > .section_content > div > h4 > span {
  }
  #mp_tj_versions_section > .section_content > div > span {
  }
  #mp_tj_versions_section > .section_content > div > ul {
  }
  #mp_tj_versions_section > .section_content > div > ul > li {
  }
  #mp_tj_versions_section > .section_content > div > button {
  }
  #mp_tj_versions_section > .section_content > div > button:hover {
  }
  #mp_tj_versions_section > .section_content > div > button > i {
  }
  /* ============================================
         mbl_email_subscription_container
  ============================================ */
  #mrp_email_subscription {
    height: 80px;
    min-height: 80px;
    transition: 0.3s;
  }
  #mrp_email_subscription.open {
    height: 190px !important;
    min-height: 190px !important;
    transition: 0.3s;
  }
  #mrp_email_subscription .envelope {}
  #mrp_email_subscription .envelope > i {
    cursor: pointer;
  }
  @media (hover: hover) {
    #mrp_email_subscription .envelope > i:hover {
      color: var(--tj_green); }
    #mrp_email_subscription .subMsgsCont {
      margin-top: -130px; }
  }
  @media (hover: none) {
    #mrp_email_subscription .subMsgsCont {
      margin-top: -120px; }
    #mrp_email_subscription > h3 {
      font-size: 20px; }
  }
  #mrp_email_subscription > p {
    font-size: 15px;
    margin-top: 0px;
  }
  #mrp_email_subscription > form {}
  #mrp_email_subscription > form > input {
    font-size: 15px;
  }
  #mrp_email_subscription > form > input:hover {}
  #mrp_email_subscription > form > input:focus {}
  #mrp_email_subscription > form > button {
    /* font-size: 15px; */
    padding: 5px 10px;
  }
  #mrp_email_subscription > form > button:hover {}
}