$youneeq-color: #00929e;
$tabs-list: layout, display, interact, recommend, observe, content-types, domains, advanced;

@font-face {
   font-family: "Lato";
   font-style: normal;
   font-weight: 300;
   src: local("Lato Light"), local("Lato-Light"), url("http://fonts.gstatic.com/s/lato/v11/KT3KS9Aol4WfR6Vas8kNcg.woff") format("woff");
}
@font-face {
   font-family: "Lato";
   font-style: normal;
   font-weight: 400;
   src: local("Lato Regular"), local("Lato-Regular"), url("http://fonts.gstatic.com/s/lato/v11/9k-RPmcnxYEPm8CNFsH2gg.woff") format("woff");
}
@font-face {
   font-family: "Lato";
   font-style: normal;
   font-weight: 700;
   src: local("Lato Bold"), local("Lato-Bold"), url("http://fonts.gstatic.com/s/lato/v11/wkfQbvfT_02e2IWO3yYueQ.woff") format("woff");
}
@font-face {
   font-family: "Lato";
   font-style: italic;
   font-weight: 300;
   src: local("Lato Light Italic"), local("Lato-LightItalic"), url("http://fonts.gstatic.com/s/lato/v11/2HG_tEPiQ4Z6795cGfdivD8E0i7KZn-EPnyo3HZu7kw.woff") format("woff");
}
@font-face {
   font-family: "Lato";
   font-style: italic;
   font-weight: 400;
   src: local("Lato Italic"), local("Lato-Italic"), url("http://fonts.gstatic.com/s/lato/v11/oUan5VrEkpzIazlUe5ieaA.woff") format("woff");
}

@mixin clearfix {
   &:after {
       clear: both;
   }
   &:before,
   &:after {
       content: ".";
       display: block;
       font-size: 0;
       height: 0;
       line-height: 0;
       overflow: hidden;
       visibility: hidden;
       width: 0;
   }
}

.no-select {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.yq-plugin-version {
   color: #777;
   font-size: 0.875em;
}

.yq-num-entry {
   height: 28px;
   line-height: 28px;
   width: 5em;
   vertical-align: middle;
}
.yq-num-entry + button {
   position: relative;
   top: 2px;
}

.yq-options-panel {
   @include clearfix;
   line-height: 2.15em;
}

.yq-options-line-left::after {
   content: "\3a";
}
.yq-options-line-left.yq-sub-option::before {
   content: "\2022";
}

.yq-options-box {
   overflow: auto;
   border: 1px solid #ddd;
   max-height: 7em;
   max-width: 24em;
   line-height: 1em;
   background-color: white;

   &.yq-options-line-right {
      margin: 0.5em 0;
   }
}

.yq-options-box-list {
   margin: 0;

   ul {
      margin-left: 20px;
   }

   li {
      margin: 3px 0;
   }
}

.yq-wrap {
   font-family: "Lato", sans-serif;
   font-size: 1.075em;
   position: relative;

   > h2 {
      margin-bottom: 1em;
   }
}

.yq-settings-header {
   margin-top: 1em;
}

.yq-settings-tab-content {
   @include clearfix;
   position: relative;
}

.yq-wrap .yq-settings-tab-selector,
.drag-panel .drag-panel-option-check,
.drag-panel-template .drag-panel-option-check {
   position: fixed;
   left: -100px;
}

.yq-settings-tab-selector + label {
   background-color: #eee;
   border: 1px solid #ddd;
   box-sizing: border-box;
   cursor: pointer;
   display: inline-block;
   padding: 1em 0.5em;
   position: relative;
   text-align: center;
   top: 1px;
   transition: all 0.2s ease-in 0s;

   &:first-of-type {
      margin-left: 1px;
   }
}

@media (max-width: 782px) {
   .yq-settings-tab-selector + label {
      width: 100%;
   }
}
@media (min-width: 783px) {
   .yq-settings-tab-selector + label:first-of-type {
      margin-left: 1em;
   }
   .yq-settings-tab-selector:checked + label {
      border-bottom: 1px solid white;
   }
   .yq-options-line-left {
      float: left;
      width: 15em;
   }
}
@media (min-width: 1081px) {
   .yq-settings-tab-selector + label {
      min-width: 7.5em;
      padding: 1em 0.5em;
   }
}
.yq-settings-tab-selector:not(:checked) + label:focus,
.yq-settings-tab-selector:not(:checked) + label:hover {
   background-color: #008c9d;
   color: white;
   font-weight: bold;
   transition: all 0.2s ease-in 0s;
}
.yq-settings-tab-selector:focus + label{
   border: 1px solid #008c9d;
}
.yq-settings-tab-selector:checked + label {
   background-color: white;
   font-weight: bold;
   transition: all 0.2s ease-in 0s;
}

@each $tab in $tabs-list {
   ##{$tab}-radio:not(:checked) ~ .yq-settings-box ##{$tab} {
      display: none !important;
   }
}

.yq-settings-box {
   background-color: white;
   border: 1px solid #ddd;
   box-sizing: border-box;
   color: #4e4e50;
   padding: 10px;
   clear: right;
   overflow: auto;

   p {
      font-size: 1em;
      margin: 0;
   }

   .yq-options-line-right label {
      margin-right: 1em;
   }
}

.yq-settings-box input:invalid,
.yq-settings-widget input:invalid,
.yq-classad-info input:invalid {
   border: 1px solid red;
}

.yq-submit-button-container {
   margin-top: 1em;
   float: right;
}

.yq-domain-table, .yq-classad-tag-table {
   border-collapse: collapse;
   width: 100%;
   min-width: 45em;

   tr {
      background-color: white;
   }
   
   thead tr,
   tfoot tr {
      background-color: #ddd;
   }
}
.yq-domain-table {
   tbody {
      tr:nth-child(2n) {
         background-color: #eee;
      }

      tr:hover {
         background-color: #ddf;
      }

      tr:nth-child(2n):hover {
         background-color: #ccf;
      }
   }

   td:first-child,
   td:nth-child(n+4) {
      text-align: center;
   }

   input[type="checkbox"] {
      margin: 0;
   }

   input[type="text"] {
      width: 100%;
   }
}
.yq-classad-tag-table {
   thead th,
   tfoot th {
      line-height: 2.2em;
   }

   tbody td:nth-child(n+2) {
      text-align: center;
   }

   .yq-classad-tag-subheader {
      background-color: #eee;
      line-height: 2.2em;
   }
}

.yq-has-tooltip {
   cursor: help;
}

.yq-img-button {
   border: 1px solid #ddd;
   cursor: pointer;
   display: inline-block;
   margin: 1px;
   padding: 3px 3px 0 3px;
}

.postbox .yq-img-button img {
   max-height: 75px;
}

.drag-container {
   padding: 6px;

   textarea {
      height: 10em;
      width: 100%;
      font-family: Consolas, Monaco, monospace;
      font-size: 0.9em;
   }
}

.drag-container-templates {
   padding: 6px 0;
}
.drag-container,
.drag-container-templates {
   box-sizing: border-box;
   float: left;
   margin-right: 1%;
   margin-bottom: 1em;
   min-width: 12em;
   width: 100%;
   text-align: center;
   background-color: #eee;
   border: 1px solid #ddd;
   position: relative;

   p {
      font-weight: normal;
      text-align: justify;
   }
}
/* Display 2 layouts per row */
@media all and (min-width: 480px) and (max-width: 719px) {
   .drag-container,
   .drag-container-templates {
      width: 49.5%;
   }
   .drag-container:nth-child(2n) {
      margin-right: 0%;
   }
   .drag-container:nth-child(2n+1) {
      clear: left;
   }
}
/* Display 3 layouts per row */
@media all and (min-width: 720px) and (max-width: 1279px) {
   .drag-container,
   .drag-container-templates {
      width: 32.6%;
   }
   .drag-container:nth-child(3n) {
      margin-right: 0%;
   }
   .drag-container:nth-child(3n+1) {
      clear: left;
   }
}
/* Display 4 layouts per row */
@media all and (min-width: 1280px) and (max-width: 1599px) {
   .drag-container,
   .drag-container-templates {
      width: 24.25%;
   }
   .drag-container:nth-child(4n) {
      margin-right: 0%;
   }
   .drag-container:nth-child(4n+1) {
      clear: left;
   }
}
/* Display 5 layouts per row */
@media all and (min-width: 1600px) and (max-width: 1919px) {
   .drag-container,
   .drag-container-templates {
      width: 19.2%;
   }
   .drag-container:nth-child(5n) {
      margin-right: 0%;
   }
   .drag-container:nth-child(5n+1) {
      clear: left;
   }
}
/* Display 6 layouts per row */
@media all and (min-width: 1920px) {
   .drag-container,
   .drag-container-templates {
      width: 15.8%;
   }
   .drag-container:nth-child(6n) {
      margin-right: 0%;
   }
   .drag-container:nth-child(6n+1) {
      clear: left;
   }
}

.drag-scroller {
   height: 18em;
   overflow: auto;
   margin-bottom: 6px;
}

.drag-template-control {
   display: none !important;
}
.drag-template-header {
   border-bottom: 1px solid #ddd;
   background-color: white;
   display: block;
   font-weight: bold;
   text-align: justify;
   /*transition: all 0.2s ease-in 0s;*/

   &:before {
      content: "\2b";
      display: inline-block;
      min-width: 1em;
   }

   &:hover,
   .drag-template-control:checked + & {
      background-color: #ddf;
   }

   &:first-of-type,
   .drag-template-control:checked + .drag-template-header + .drag-template-section + .drag-template-control + & {
      border-top: 1px solid #ddd;
   }

   .drag-template-control:checked + &:before {
      content: "\2013";
   }
}
.drag-template-control:not(:checked) + .drag-template-header + .drag-template-section {
   display: none !important;
}

.drag-menu-popup {
   position: absolute;
   display: none;
   background-color: white;
   border: 1px solid #ddd;
   min-width: 10em;
   margin: 0;
   padding: 2px 0;
}
.drag-menu-popup-item,
.drag-menu-popup-header {
   border: 1px solid transparent;
   cursor: context-menu;
   line-height: 1.5em;
   margin: 0;
}
.drag-menu-popup-item:hover {
   background-color: $youneeq-color;
   color: white;
}
.drag-menu-popup-header {
   font-weight: bolder;
}

.drag-header,
.drag-panel,
.drag-panel-template,
.drag-add {
   font-weight: bold;
   min-height: 2.75em;
   min-width: 10em;
   padding: 4px;
   position: relative;
   overflow: hidden;
   text-overflow: ellipsis;
}
.drag-panel {
   background-color: white;
   border: 1px solid #ddd;
   border-radius: 1em;
   cursor: move;
   transition: all 0.2s ease-in 0s;

   p {
      display: none;
   }

   label {
      margin: 0;
   }

   &:hover {
      border: 1px solid $youneeq-color;
   }

   &.drag-panel-large {
      min-height: 7em;
   }

   &.drag-panel-disabled {
      background-color: #eee;
      font-weight: normal;
   }
}
.drag-panel-template {
   background-color: white;
   border: 1px dashed #ddd;
   cursor: move;
   transition: all 0.2s ease-in 0s;

   &:hover {
      border: 1px solid $youneeq-color;
      border-radius: 1em;
   }

   label {
      display: none;
   }
}
.drag-add {
   border: 1px dashed $youneeq-color;

   .drag-panel + & {
      display: none !important;
   }
}
.drag-panel-option-icon {
   fill: #444;
}
.drag-panel-option-check + label:hover > .drag-panel-option-icon {
   stroke: #ddd;
}
.drag-panel-option-check:checked + label > .drag-panel-option-icon {
   fill: $youneeq-color;
}

.drag-container-trash {
   fill: #999;
}
.drag-panel-option-arrow-up,
.drag-panel-option-arrow-down,
.drag-panel-option-trash,
.drag-container-trash {
	position: absolute;
	cursor: pointer;
   transition: all 0.2s ease-in 0s;
}
.drag-panel-option-arrow-up,
.drag-panel-option-arrow-down,
.drag-panel-option-trash {
	fill: #ddd;
}
.drag-panel:hover .drag-panel-option-arrow-up,
.drag-panel:hover .drag-panel-option-arrow-down,
.drag-panel:hover .drag-panel-option-trash {
   fill: #444;
}
.drag-panel .drag-panel-option-arrow-up:hover,
.drag-panel .drag-panel-option-arrow-down:hover {
   fill: $youneeq-color;
}
.drag-panel .drag-panel-option-trash:hover,
.drag-container-trash:hover {
   fill: red;
}
.drag-panel-option-arrow-up {
	top: 0.325em;
	left: 0.325em;
}
.drag-panel-option-arrow-down {
	bottom: 0.325em;
	left: 0.325em;
}
.drag-panel-option-trash,
.drag-container-trash {
	top: 0.325em;
	right: 0.325em;
}
.drag-panel-template .drag-panel-option-arrow-up,
.drag-panel-template .drag-panel-option-arrow-down,
.drag-panel-template .drag-panel-option-trash {
   display: none;
}