/*----------------------------------------------------
                  CSS for blog articles
-----------------------------------------------------*/

.page_detail .description p {
  margin-top: 5px;
  margin-bottom: 15px;
}

.description h2 {
  margin: 35px 0 15px 0;
  font-weight: bold;
  background: #35c9e0;
  color: black !important;
  line-height: 1;
  width: fit-content;
  padding: 10px;
}

.description h2 a {
  color: black !important;
  text-decoration: underline !important;
}

.description h2 a:hover {
  color: white !important;
  text-decoration: none !important;
}

.description h2 span {
  background: black;
  color: #35c9e0;
  padding: 0 7px;
  margin-right: 9px;
  border-right: white solid 5px;
}

.page_detail .main_content .description h3,
.page_detail .main_content .description h4 {
    color: black;
    margin-top: 30px;
    padding-bottom: 10px;
    font-weight: 700;
}

.page_detail .main_content .description h4 {
    margin-top: 15px;
    font-weight: 600;
}

.page_detail .main_content .description ul,
.page_detail .main_content .description ol {
   padding-bottom: 25px;
 }

.page_detail .main_content .description ul:before,
.page_detail .main_content .description ul:after,
.page_detail .main_content .description ol:before,
.page_detail .main_content .description ol:after
  {
   content: none;
 }

 img.vertical,
 img.right  {
   max-width: 230px;
   margin: 0 0 0 55px !important;
   float: right;
 }

 img.left {
  max-width: 230px;
  margin: 0 55px 0 0 !important;
  float: left;
 }

.video-container {
  margin-bottom: 15px;
  border-radius: 20px;
}

.app-badge {
  display: grid;
  grid-template-columns: 196px 196px auto;
}

.app-badge a {
  height: 60px;
}

.app-store.badge {
  height: 59px;
}

.app-badge img{
  margin: 0 !important;
  height: 100% !important;
}

.divider {
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(255,255,255,0) 100%);
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 50px;
}

.clearflow {
  clear: both;
}

img.ui-button {
  height: auto;
  width: auto;
  display: inline;
  margin: 0 0 -3px 0 !important;
  filter: drop-shadow(2px 2px 0px #00000052);
}

/*----------------------------------------------------
                    Article Index
-----------------------------------------------------*/


 .index {
    column-count: 1;
    background-color: #f3f3f3b3;
    padding: 30px 70px 30px 66px !important;
    border-radius: 25px;
    color: #b9b9b9 !important;
    column-gap: 90px;
    column-fill: auto;
  }

 .index > li {
    font-weight: bold;
    color: #4e4e4e;
  }

 .index ul {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    padding-bottom: 0 !important;
  }

 .index ol {
   padding-bottom: 0 !important;
 }

 .index a {
    color: #4e4e4e !important;
  }

 .index a:hover {
    background: #35c9e0;
    color: black !important;
    /* font-weight: bold; */
  }

/*----------------------------------------------------
            hidden  mobile comparison tables
-----------------------------------------------------*/

.comparison-mobile {
  display: none !important;
}

/*----------------------------------------------------
                    iPhone Screen only
-----------------------------------------------------*/


@media (max-width: 780px) {
  img.vertical,
  img.right,
  img.left {
    margin: unset !important;
    max-width: 100% !important;
    padding: 0 0% 4%;
  }

  .app-badge {
      display: grid;
      grid-template-columns: 1fr 1fr;
  }

  .app-badge a {
    height: 50px;
  }

  .app-store.badge {
    height: 50px;
  }

  #comparison {
    display: none !important;
  }

  .comparison-mobile {
    width: 100%;
    height: auto;
    display: block !important;
  }

  video.right {
    max-width: initial !important;
  }

}