/* commonapps css styles */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');
html {
   position: relative;
}

body {
   font-family: 'Open Sans', sans-serif;
}

.ellipsis {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

/* Header styles
-------------------------------------------------- */
.header {
   background-color: #007ec0;
}

.navbar-brand img {
   opacity: 1;
   -webkit-transition: 160ms ease-in-out;
   transition: 160ms ease-in-out;
}

.navbar-brand img:hover {
   opacity: 0.8;
}

.navbar-brand img {
   height: 40px;
}

.navbar-dark .navbar-nav .nav-link {
   color: white;
   font-size: 16px;
   -webkit-transition: 160ms ease-in-out;
   transition: 160ms ease-in-out;
}

.navbar-dark .navbar-nav .nav-link:hover {
   color: rgba(255, 255, 255, 0.76);
}

/* .navbar-nav .nav-item {
   padding-left: 15px;
} */

/* .navbar-nav .nav-item:first-child {
   padding-left: 0;
} */

.navbar-dark .navbar-nav .active > .nav-link {
   text-decoration: underline;
}

@media only screen and (max-width: 450px) {
   .navbar-brand img {
      height: 20px;
   }
}

.search-form {
   font-size: 14px;
}

.search-form input {
   width: 160px !important;
   border-color: #fbfbfb;
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
}

.search-form button {
   background-color: #eee;
   color: #000;
   margin: 0 0 0 0 !important;
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
}

.search-form button:hover {
   background-color: #e1dfdf;
}

.search-form button .fa-search {
   font-size: 16px;
   color: #036599;
}



/* Sticky footer styles
-------------------------------------------------- */
.footer {
   background-color: #007ec0;
   color: #fff;
}

.footer .footer-logo {
   height: 40px;
   opacity: 0.8;
   -webkit-transition: 160ms ease-in-out;
   transition: 160ms ease-in-out;
}

.footer .footer-logo:hover {
   opacity: 1;
}

.footer a.nav-link {
   padding: 0 1rem;
   color: #fff;
   -webkit-transition: 160ms ease-in-out;
   transition: 160ms ease-in-out;
}

.footer .nav-item {}

.footer .nav-item a.nav-link:hover {
   color: rgba(255, 255, 255, 0.76);
}

.footer .copyright {
   vertical-align: initial;
}

.footer .copyright p {
   font-size: 14px;
   margin: 0 0 20px 0;
   color: #ffffff6e;
}

@media only screen and (max-width: 992px) {
   .footer {
      bottom: auto;
      height: auto;
      line-height: normal;
      padding-top: 50px;
      padding-bottom: 50px;
   }

   .footer .copyright p {
      margin-bottom: 25px;
   }

   .footer .nav-item:first-child a.nav-link {
      padding-left: 0;
   }
}

@media only screen and (max-width: 768px) {
   .footer .nav-item {
      width: 100%;
      padding: 1rem 0;
   }
   .footer .nav-item a.nav-link {
      display: inline;
      padding: 0;
   }
}

.box160x600 > div,
.box300x250 > div,
.box728x90 > div {
   background-color: #eee;
}

@media only screen and (max-width: 992px) {
   .box728x90 > div { display: none; }
}

@media only screen and (max-width: 300px) {
   .box300x250 > div { display: none; }
}

@media only screen and (max-width: 160px) {
   .box160x600 > div { display: none; }
}

/* Popular Apps Card card styles
-------------------------------------------------- */
.row.card-group .col-auto {
   padding-right: 0;
}
.popular-card {
   width: 260px;
   height: 230px;
   margin-bottom: 16px;
}
.popular-card:hover {
   text-decoration: none;
}
.popular-card__image {
   height: 148px;
   overflow: hidden;
}

.popular-card__image img{
   transition: .2s ease-in-out;
}

.card:hover .popular-card__image img {
   transform: scale(1.1);
}

.popular-card__title {
   color: #0580c4;
   font-size: 16px;
   font-weight: bold;
}

.popular-card__text {
   color: #333;
   font-size: 13px;
   height: 38px;
   overflow: hidden;
}

/* Apps Card card styles
-------------------------------------------------- */
.apps-card {
   width: 213px;
   height: 290px;
   margin-bottom: 16px;
}

.apps-card:hover {
   text-decoration: none;
}

.apps-card__image {
   height: 218px;
   overflow: hidden;
}

.apps-card__image img{
   transition: .2s ease-in-out;
}

.card:hover .apps-card__image img {
   transform: scale(1.1);
}

.apps-card__title {
   color: #0580c4;
   font-size: 16px;
   font-weight: bold;
}

.apps-card__text {
   color: #333;
   font-size: 13px;
   height: 38px;
   overflow: hidden;
}

/* See All badge style
-------------------------------------------------- */

.badge-seeall {
   color: white;
   background-color: rgb(255, 187, 0);
   font-size: 13px;
   position: absolute;
   right: 0;
   margin-right: 0.25rem;
}

.badge-seeall:hover {
   color: white;
   background-color: rgba(255,186,3,.8);
   font-size: 13px;
}

/* Pager styles
-------------------------------------------------- */
.page-link .fa-angle-double-right,
.page-link .fa-angle-double-left {
   font-size: 0.8em;
   vertical-align: baseline;
}

.page-link {
   color: #007ec0;
}
.page-item.active .page-link {
   z-index: 1;
   color: #fff;
   background-color: #007ec0;
   border-color: #007ec0;
}

/* (App) Tool single page styles
-------------------------------------------------- */

.tool-title {
   position: relative;
   margin: 0 auto;
}

.tool-title h1 {
   font-size: 28px;
   font-weight: normal;
   text-align: left;
   color: #202020;
   margin-bottom: 20px;
}

.tool-play-wrapper {
   background-color: #eaeaea;
   padding: 15px;
   border-radius: 5px;
   display: inline-flex;
   text-align: left;
   margin: 0 auto;
   margin-bottom: 50px;
   -webkit-transition: 160ms ease-in-out;
   transition: 160ms ease-in-out;
}

.tool-play-wrapper .featured-items {
   display: inline-block;
   width: 150px;
   vertical-align: top;
}

.tool-play-wrapper .featured-items > a {
   display: inline-block;
   margin-bottom: 20px;
   width: 100%;
   opacity: 1;
   border: none;
   outline: none;
   -webkit-transition: 160ms ease-in-out;
   transition: 160ms ease-in-out;
}

.tool-play-wrapper .featured-items > a:last-child {
   margin-bottom: 0;
}

.tool-play-wrapper .featured-items > a:hover {
   opacity: 0.85;
}

.tool-play-wrapper .featured-items > a > img {
   display: inline-block;
   border-radius: 2px;
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.32);
}

.tool-play-wrapper .main-item {
   display: inline-block;
   padding: 0 15px;
   vertical-align: top;
   text-align: center;
   position: relative;
}

.tool-play-wrapper .main-item .fa-spinner {
   position: absolute;
   top: 45%; left: 45%;
   font-size: 32px;
   z-index: 0;
   color: #9e9e9e;
}

.tool-play-wrapper .main-item iframe {
   position: relative;
   z-index: 1;
   border: none;
   background-color: #ccc;
   position: relative;
   top: -5px;
   opacity: 0;
   -webkit-transition: 160ms ease-in-out;
   transition: 160ms ease-in-out;
}

.details-content {
   width: 100%;
   margin-right: 20px;
   text-align: left;
   background-color: #eaeaea;
   padding: 15px;
   vertical-align: top;
   min-height: 250px;
}

.details-content .image {
   display: inline-block;
   vertical-align: top;
   width: 220px;
   height: 220px;
   background-color: #ccc;
   margin-right: 15px;
   background-size: cover;
}

.details-content .image img {
   width: 100%;
}

.details-content .details {
   display: inline-block;
   vertical-align: top;
   width: 500px;
}

.details-content .details h2 {
   font-size: 22px;
   font-weight: bold;
}

.details-content .details p {
   font-size: 14px;
}

.details-content .details .details-meta {
   width: 100%;
}

.details-content .details .details-meta h3 {
   font-size: 14px;
   color: #000;
   display: inline-block;
   margin-right: 3px;
}

.details-content .details .details-meta ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
   text-align: left;
   display: inline-block;
}

.details-content .details .details-meta ul li {
   display: inline-block;
   text-align: left;
   font-size: 14px;
   color: #000;
   padding:0;
   margin-right: 3px;
   text-transform: capitalize;
}

.details-content .details .details-meta ul li > span {
   padding-left: 1px;
}

.details-content .details .details-meta ul li:last-child > span {
   display: none;
}

.details-content .details .details-meta ul li a {
   outline: none;
}