.yq-logo-black {
   background-image: url('http://api.youneeq.ca/Content/images/powered-by-yq-black.png');
}
.yq-logo-white {
   background-image: url('http://api.youneeq.ca/Content/images/powered-by-yq-white.png');
}

.yq-logo-top {
   margin-bottom: 1em;
}
.yq-logo-bottom {
   margin-top: 1em;
}

.yq-logo-left,
.yq-logo-centre {
   margin-right: auto;
}
.yq-logo-right,
.yq-logo-centre {
   margin-left: auto;
}

/* Youneeq Modal */

.recommended-modal {
   background-color: transparent;
   background-size: 121px 23px;
   border: none;
   clear: both;
   cursor: pointer;
   display: block;
   width: 121px;
   height: 23px;
}

.tbox {
   box-sizing: content-box;
   position: absolute;
   display: none;
   padding: 14px 17px;
   z-index: 900;
}

.tinner {
   padding: 15px;
   border-radius: 5px;
   background: #fff url(preload.gif) no-repeat 50% 50%;
   border-right: 1px solid #333;
   border-bottom: 1px solid #333;
}

.tmask {
   position: absolute;
   display: none;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background: #000;
   z-index: 800;
}

.tclose {
   position: absolute;
   top: 0;
   right: 0;
   width: 30px;
   height: 30px;
   cursor: pointer;
   background: url(close.png) no-repeat;

   &:hover {
      background-position: 0 -30px;
   }
}

/* Youneeq Explorer */

.yq-explorer {
   background-color: white;
   border: 1px solid #008c9d;
   border-radius: 1em;
   padding: 0.5em;

   input {
      position: fixed;
      left: -100px;
   }

   label {
      cursor: pointer;
      display: block;
      background-color: #cacacb;
      border: 1px solid transparent;
      border-radius: 0.5em;
      color: white;
      text-align: center;
      margin-bottom: 0.5em;
      transition: all 0.2s ease-in 0s;

      &:hover {
         border-color: #008c9d;
      }
   }

   input:checked + label {
      background-color: #008c9d;

      &:hover {
         border-color: #cacacb;
      }
   }
}

.yq-explorer-button {
   cursor: pointer;
}

.yq-explorer-section-head {
   border-top: 1px solid #008c9d;

   &:first-child {
      border-top: none;
   }
}

.yq-explorer-section {
   max-height: 8.5em;
   overflow: auto;
}

.yq-explorer-dom-current {
   cursor: not-allowed;
   background-color: #008c9d;
   border: 1px solid #888;
   border-radius: 0.5em;
   color: white;
   text-align: center;
   margin-bottom: 0.5em;
}

/* Toaster Card */

.yq-rec-box {
   box-sizing: border-box;
   bottom: -14rem;
   right: 0;
   font-size: 1.2rem;
   position: fixed;
   background-color: white;
   border: 2px solid gray;
   width: 40rem;
   max-width: 100%;
   height: 14rem;
   z-index: 2;

   .yq-pop-img-link {
      box-sizing: border-box;
      display: block;
      overflow: hidden;
      float: left;
      width: 34%;
      height: 100%;
   }

   .yq-pop-text-box {
      box-sizing: border-box;
      height: 90%;
      float: right;
      padding-top: 1em;
      padding-left: 1em;
      position: relative;
      width: 100%;

      + .yq-pop-text-box {
         width: 66%;
      }
   }

   h4 {
      font-size: 1.2em;
      line-height: 1.3;
      margin-right: 2em;
   }

   .yq-domain {
      position: absolute;
      bottom: 0;
   }

   .yq-delete-pop-x {
      fill: black;
      stroke: white;
      stroke-width: 2;
      cursor: pointer;
      position: absolute;
      right: 0;
      top: 0;
      transition: fill 0.2s ease-in 0s;

      &:hover {
         fill: red;
      }
   }
}

/* Recommendation Panel */

.yq-wrapper {
   position: relative;
}

.yq-article {
   position: relative;

   > * {
      display: block;
   }
}

.yq-toggle-box {
   display: none !important;
}
.yq-toggle-box:not(:checked) + article .yq-toggle-item {
   display: none !important;
}

.yq-toggle-label,
.yq-toggle-label-box {
   cursor: pointer;
   margin: 0;
   font-size: 1em;
   font-weight: inherit;
   line-height: inherit;
}
.yq-toggle-label {
   display: inline;

   .yq-article > & {
      display: block;
   }
}

.yq-delete-x {
   fill: black;
   stroke: white;
   stroke-width: 2;
   opacity: 0;
   cursor: pointer;
   position: absolute;
   right: 0;
   top: 0;
   transition: all 0.2s ease-in 0s;

   &:hover {
      fill: red;
   }

   .yq-article:hover &,
   &:hover,
   .yq-env-mobile & {
      opacity: 1;
   }
}

.yq-img-box {
   overflow: hidden;
}

.yq-img.yq-img-fit {
   object-fit: cover;
   object-position: 50% 0;
}

.yq-title {
   font-size: 1.0625em;
}

.yq-desc {
   font-size: 0.9375em;
   line-height: 1.5;
}