.html-generator-portlet img {
  width: 100%;
  height: auto; }

.html-save-parse-btn {
  font-weight: 600 !important; }

html-generator-portlet .htmlview-display-topbar.row {
  display: block !important; }

.htmlview-display {
  width: 100% !important;
  margin-top: 50px !important; }

.htmlversions-back, .htmlversions-list {
  display: block !important;
  margin: 10px !important; }

.html-generator-div {
  padding: 2rem; }
  .html-generator-div label {
    font-weight: 600 !important;
    text-transform: uppercase; }
  .html-generator-div input, .html-generator-div select {
    border-radius: 0; }
  .html-generator-div input.form-control, .html-generator-div select.form-control {
    height: 50px;
    background-color: white; }
  .html-generator-div .html-generator-tabs {
    border-bottom: none; }
    .html-generator-div .html-generator-tabs .nav-item {
      margin-bottom: 0;
      margin-right: 1rem; }
      .html-generator-div .html-generator-tabs .nav-item .nav-link {
        background: blue;
        color: white;
        opacity: 0.2;
        border: none;
        text-transform: uppercase; }
        .html-generator-div .html-generator-tabs .nav-item .nav-link.active, .html-generator-div .html-generator-tabs .nav-item .nav-link:hover {
          background: blue;
          opacity: 1; }
      .html-generator-div .html-generator-tabs .nav-item.show .nav-link {
        background: blue;
        opacity: 1; }
  .html-generator-div .tab-content .tab-pane textarea {
    border: none;
    height: 250px;
    border: 1px solid #dee2e6 !important;
    background-color: white; }
  .html-generator-div .template-selection {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px; }
    .html-generator-div .template-selection img {
      width: 100%; }
    .html-generator-div .template-selection .link {
      color: #646464;
      text-transform: uppercase;
      font-weight: 500;
      position: relative;
      margin-top: 1rem; }
      .html-generator-div .template-selection .link::before {
        content: '';
        width: 100%;
        position: absolute;
        height: 1px;
        background-color: #646464;
        bottom: 0; }
      .html-generator-div .template-selection .link:hover, .html-generator-div .template-selection .link:focus {
        text-decoration: none; }
  .html-generator-div #htmlgeneratorAccordion .card {
    border-radius: 0;
    box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6) !important; }
    .html-generator-div #htmlgeneratorAccordion .card .card-header {
      padding: 0;
      background-color: #f4f8fb;
      border-bottom: none; }
      .html-generator-div #htmlgeneratorAccordion .card .card-header h5 .btn {
        color: #646464;
        font-size: 18px;
        padding: 0.75rem 1rem;
        border: none;
        width: 100%;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        font-weight: 600;
        display: flex;
        align-items: center; }
        .html-generator-div #htmlgeneratorAccordion .card .card-header h5 .btn:hover, .html-generator-div #htmlgeneratorAccordion .card .card-header h5 .btn:focus {
          text-decoration: none; }
        .html-generator-div #htmlgeneratorAccordion .card .card-header h5 .btn .fa-chevron-down {
          line-height: normal;
          font-size: 14px;
          transform: rotate(0deg);
          transition: 0.3s all; }
        .html-generator-div #htmlgeneratorAccordion .card .card-header h5 .btn span {
          padding-left: 0.75rem; }
        .html-generator-div #htmlgeneratorAccordion .card .card-header h5 .btn.collapsed .fa-chevron-down {
          transform: rotate(-90deg); }
    .html-generator-div #htmlgeneratorAccordion .card .card-body {
      border-top: 1px solid #dfdfdf; }
      .html-generator-div #htmlgeneratorAccordion .card .card-body textarea {
        background-color: white; }
      .html-generator-div #htmlgeneratorAccordion .card .card-body .form-group .image-upload {
        position: relative; }
        .html-generator-div #htmlgeneratorAccordion .card .card-body .form-group .image-upload input[type=text] {
          position: absolute; }
        .html-generator-div #htmlgeneratorAccordion .card .card-body .form-group .image-upload .browse-btn {
          background: blue;
          display: inline-flex;
          padding: 0.5rem;
          color: white;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 5px;
          justify-content: center;
          width: 110px; }

.template-selection-div {
  padding: 2rem; }
  .template-selection-div .inner-div-ts {
    border: 1px solid #ced4da; }
    .template-selection-div .inner-div-ts .nav-pills {
      background: #f7f7f7;
      padding: 2rem 0;
      height: 100%; }
      .template-selection-div .inner-div-ts .nav-pills .nav-link {
        border-radius: 0;
        padding: 1rem;
        font-size: 16px;
        text-transform: uppercase;
        font-weight: 600;
        color: #646464;
        display: flex;
        align-items: center;
        justify-content: space-between; }
        .template-selection-div .inner-div-ts .nav-pills .nav-link.active {
          color: #646464 !important;
          background: #fff; }
          .template-selection-div .inner-div-ts .nav-pills .nav-link.active i {
            opacity: 1; }
        .template-selection-div .inner-div-ts .nav-pills .nav-link i {
          opacity: 0;
          font-size: 14px;
          transition: 0.2s all ease; }
    .template-selection-div .inner-div-ts .tab-content {
      padding: 2rem 0; }
      .template-selection-div .inner-div-ts .tab-content .tab-pane h5 {
        text-transform: uppercase;
        font-weight: 600;
        font-size: 18px;
        margin-bottom: 1rem; }
      .template-selection-div .inner-div-ts .tab-content .tab-pane ul {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
        margin: 0; }
        .template-selection-div .inner-div-ts .tab-content .tab-pane ul li {
          width: calc(20% - 2rem);
          margin-right: 2rem;
          margin-bottom: 2rem;
          position: relative; }
          .template-selection-div .inner-div-ts .tab-content .tab-pane ul li:hover .image-link::after {
            transform: scale(1); }
          .template-selection-div .inner-div-ts .tab-content .tab-pane ul li:hover .image-link ~ .links-div {
            opacity: 1;
            z-index: 1;
            visibility: visible; }
          .template-selection-div .inner-div-ts .tab-content .tab-pane ul li .image-link {
            display: flex;
            flex-direction: column; }
            .template-selection-div .inner-div-ts .tab-content .tab-pane ul li .image-link ~ .links-div {
              width: 0;
              position: absolute;
              top: 50%;
              transform: translateY(-50%) translateX(-50%);
              display: flex;
              left: 50%;
              justify-content: center;
              visibility: hidden;
              z-index: -1;
              opacity: 0;
              transition: 0.3s all; }
              .template-selection-div .inner-div-ts .tab-content .tab-pane ul li .image-link ~ .links-div .select-img {
                border-radius: 30px 0 0 30px;
                border-right: 1px solid #ced4da; }
              .template-selection-div .inner-div-ts .tab-content .tab-pane ul li .image-link ~ .links-div .preview-img {
                border-radius: 0 30px 30px 0; }
              .template-selection-div .inner-div-ts .tab-content .tab-pane ul li .image-link ~ .links-div .select-img, .template-selection-div .inner-div-ts .tab-content .tab-pane ul li .image-link ~ .links-div .preview-img {
                background: white;
                padding: 0.25rem 0.5rem;
                color: #0000ff; }
                .template-selection-div .inner-div-ts .tab-content .tab-pane ul li .image-link ~ .links-div .select-img i, .template-selection-div .inner-div-ts .tab-content .tab-pane ul li .image-link ~ .links-div .preview-img i {
                  font-size: 14px;
                  pointer-events: none; }
                .template-selection-div .inner-div-ts .tab-content .tab-pane ul li .image-link ~ .links-div .select-img:hover, .template-selection-div .inner-div-ts .tab-content .tab-pane ul li .image-link ~ .links-div .preview-img:hover {
                  text-decoration: none; }
            .template-selection-div .inner-div-ts .tab-content .tab-pane ul li .image-link::after {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: rgba(0, 0, 0, 0.15);
              transition: 0.3s all;
              transform: scale(0); }

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center; }

.popup-image {
  max-width: 90% !important;
  max-height: 90%;
  border: 1px solid #ccc !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); }

@media (min-width: 1px) and (max-width: 640px) {
  a.btn.btn-primary.btn-default.html-version-history-link {
    font-size: 11px;
    font-weight: 600 !important; }
  .html-save-parse-btn {
    font-weight: 600 !important;
    line-height: inherit; } }