.header{padding-top:90px;text-align:center;font-size:.9em;color:black;margin-top:1em;margin-bottom:1em;padding-left:.5em;padding-right:.5em}.footer{padding-top:10px;text-align:center;color:black;font-size:30px;margin-top:.5em}.panel-footer{padding:8px;text-align:center;color:black;font-size:12px;margin:.5em}.social-info{padding:10px;text-align:center;font-size:10px;color:#3e8da8}.quota-text{padding:10px;text-align:center;font-style:oblique;font-size:1.3em;font-weight:lighter}.quota-owner{padding-bottom:10px;text-align:center;font-style:bold;font-weight:900;font-size:1em}h2{padding:5px}.h4{padding:5px;font-size:20em}.sign{font-size:2.3em;font-weight:bold;color:#b22485;padding:.2rem}.sign-circle{margin:.2em;font-size:1.8em;font-weight:bold;color:#b22485}.tab-link{font-size:1.2rem;font-style:italic;color:#b22485;padding:.2rem}.dream{vertical-align:middle;font-size:1.1rem;font-weight:bold;color:#b22485;padding:.2rem;height:70px;margin-top:%50}.wrapper{width:100%;max-width:31.25rem;margin:1rem auto}.label{font-size:.625rem;font-weight:400;text-transform:uppercase;letter-spacing:+1.3px;margin-bottom:1rem}.searchBar{width:100%;display:flex;flex-direction:row;align-items:center}#searchQueryInput{width:100%;height:3.8rem;background:#f5f5f5;outline:0;border:0;border-radius:1.625rem;padding:0 3.5rem 0 1.5rem;font-size:1.5rem}#searchQuerySubmit{width:3.5rem;height:2.8rem;margin-left:-3.5rem;background:0;border:0;outline:0}#searchQuerySubmit:hover{cursor:pointer}mark{text-color:yellow;color:black}.history{float:center;text-align:center;padding-bottom:35px}.responsive-list{flex-wrap:wrap;text-align:left}.responsive-recommendations{flex-wrap:wrap;text-align:centers}.tags-recommendations{border-radius:24px;text-decoration:none;margin:5px;padding:10px;background-color:#ffc0cb;color:black;vertical-align:middle;display:inline-flex;font-size:12px;font-weight:bold;width:100px;height:100px;line-height:15px;text-align:center}.tags-centered{display:flex;justify-content:center;align-items:center;width:100%}.tags-recommendations:hover{color:#06c;background-color:#e0d7ff}.list-element{margin-top:20px;margin-left:20px}.tabset{margin-bottom:20px;padding-bottom 20px;height:900px}.tabset>input[type="radio"]{position:absolute;left:-200vw}.tabset .tab-panel{display:none}.tabset>input:first-child:checked ~ .tab-panels>.tab-panel:first-child,.tabset>input:nth-child(3):checked ~ .tab-panels>.tab-panel:nth-child(2),.tabset>input:nth-child(5):checked ~ .tab-panels>.tab-panel:nth-child(3),.tabset>input:nth-child(7):checked ~ .tab-panels>.tab-panel:nth-child(4),.tabset>input:nth-child(9):checked ~ .tab-panels>.tab-panel:nth-child(5),.tabset>input:nth-child(11):checked ~ .tab-panels>.tab-panel:nth-child(6),.tabset>input:nth-child(13):checked ~ .tab-panels>.tab-panel:nth-child(7),.tabset>input:nth-child(15):checked ~ .tab-panels>.tab-panel:nth-child(8),.tabset>input:nth-child(17):checked ~ .tab-panels>.tab-panel:nth-child(9),.tabset>input:nth-child(19):checked ~ .tab-panels>.tab-panel:nth-child(10),.tabset>input:nth-child(21):checked ~ .tab-panels>.tab-panel:nth-child(11),.tabset>input:nth-child(23):checked ~ .tab-panels>.tab-panel:nth-child(12){display:block}.tabset>label{position:relative;border-radius:24px;display:inline-block;padding:15px 15px 15px 15px;border:2px #06c;margin-bottom:5px;cursor:pointer;font-weight:bold;font-size:14px;background-color:#ffc0cb;width:90px;border:2px solid #3e8da8}.tabset>label::after{content:"";position:absolute;left:15px;bottom:10px;width:22px;height:4px;background:#8d8d8d}input:focus-visible+label{outline:2px solid rgba(0,102,204,1);border-radius:3px}.tabset>label:hover,.tabset>input:focus+label,.tabset>input:checked+label{color:#06c;background-color:#e0d7ff}.tabset>label:hover::after,.tabset>input:focus+label::after,.tabset>input:checked+label::after{background:#06c}.tabset>input:checked+label{border-color:#ccc;border-bottom:1px solid #fff;margin-bottom:-1px}.tab-panel{padding:30px 0;height:150px}*,*:before,*:after{box-sizing:border-box}.tabset{max-width:65em}@media(min-width:200px) and (max-width:800px){.recommendations{margin-left:1px}}@media(min-width:200px) and (max-width:349px){.recommendation-tag{font-size:16px;width:240px}.tabset{height:780px}.sign{font-size:1.5rem}.sign-circle{font-size:1rem}.detail-h4{height:370px}}@media(min-width:350px) and (max-width:399px){.recommendation-tag{font-size:17px;width:250px}.tabset{height:640px}.detail-h4{height:310px}.sign-circle{font-size:1.2rem}}@media(min-width:400px) and (max-width:500px){.recommendation-tag{font-size:20px;width:290px}.tabset{height:640px}.detail-h4{height:290px}.sign-circle{font-size:1.5rem}}@media(min-width:500px) and (max-width:1500px){.tabset{height:420px}}.compatibility-icons{table-layout:fixed;width:100%}//List .list-type5{width:410px;margin:0 auto}.list-type5 ol{list-style-type:none;list-style-type:decimal!ie;margin:0;margin-left:1em;padding:0;counter-reset:li-counter}.list-type5 ol li{position:relative;margin-bottom:1.5em;padding:.5em;background-color:#f0d756;padding-left:58px}.list-type5 a{text-decoration:none;color:black;font-size:15px;font-family:'Raleway',sans-serif}.list-type5 li:hover{box-shadow:inset -1em 0 #6cd6cc;-webkit-transition:box-shadow .5s;transition:box-shadow .5s}.list-type5 ol li:before{position:absolute;top:-0.3em;left:-0.5em;width:1.8em;height:1.2em;font-size:2em;line-height:1.2;font-weight:bold;text-align:center;color:white;background-color:#6cd6cc;transform:rotate(-20deg);-ms-transform:rotate(-20deg);-webkit-transform:rotate(-20deg);z-index:98;overflow:hidden;content:counter(li-counter);counter-increment:li-counter}.ing-list{margin:0;padding:0}.ing-list li{text-align:left;margin:1em}//transform rotate @mixin rotate($degrees){-webkit-transform:rotate($degrees);-moz-transform:rotate($degrees);-ms-transform:rotate($degrees);-o-transform:rotate($degrees);transform:rotate($degrees)}// Compass utilities // @import "compass";// VARS $circle-width:.08em;$circle-width-hover:.04em;// colors default $primary-color:#12275b;$secondary-color:#ededed;$bg-color:#fff;$primary-color-green:#4db53c;$primary-color-orange:#dd9d22;// colors dark skin $primary-color-dark:#c6ff00;$secondary-color-dark:#777;$bg-color-dark:#666;$primary-color-green-dark:#5fd400;$primary-color-orange-dark:#e08833;// CIRCLE // classes 2 extend .rect-auto{clip:rect(auto,auto,auto,auto)}.pie{position:absolute;border:$circle-width solid $primary-color;width:1 -(2 * $circle-width);height:1 -(2 * $circle-width);clip:rect(0em,0.5em,1em,0em);border-radius:50%;@include rotate(0deg)}.pie-fill{@include rotate(180deg)}.fill:after{content:"";position:absolute;background-image:-webkit-gradient(linear,0 0,0 100%,from(#2a2d7e),to(#ee1d7d));background-image:-webkit-linear-gradient(#2a2d7e,#ee1d7d);background-image:-moz-linear-gradient(#2a2d7e,#ee1d7d);background-image:-o-linear-gradient(#2a2d7e,#ee1d7d);background-image:linear-gradient(#2a2d7e,#ee1d7d);top:-25px;bottom:0;width:30px;clip:0,0.5em,1em,0!important;clip:rect(0em,0.5em,1em,0em);-webkit-clip-path:circle(50% at 50% 50%);clip-path:circle(50% at 50% 50%);width:.84em;z-index:998.4;width:310px;height:310px;border-radius:50%;right:0!important;left:-24px!important;clip:rect(0em,0.5em,1em,0em)}.bar:before{content:"";position:absolute;background-image:-webkit-gradient(linear,0 0,0 100%,from(#2a2d7e),to(#332c7e));background-image:-webkit-linear-gradient(#2a2d7e,#332c7e);background-image:-moz-linear-gradient(#2a2d7e,#332c7e);background-image:-o-linear-gradient(#2a2d7e,#332c7e);background-image:linear-gradient(#2a2d7e,#332c7e);top:-26px;bottom:0;width:30px;clip:0,0.5em,1em,0!important;clip:rect(0em,0.5em,1em,0em);width:.84em;z-index:998.4;width:310px;height:310px;border-radius:50%;right:0!important;left:-24px!important;clip:rect(0em,1em,0.5em,0em);z-index:999;transform:rotate(270deg)}// .pie:before{// left:-3px;//}// .pie:after{// right:-3px;//}// main .c100{*,*:before,*:after{// @include box-sizing(content-box);box-sizing:content-box}box-shadow:inset 1px 1.7px 6px 0 rgba(0,0,0,0.06);position:relative;font-size:120px;width:1em;height:1em;border-radius:50%;// float:left;margin:0 .1em .1em 0;margin:0 auto;background-color:$secondary-color;// center circle to its parent &.center{float:none;margin:0 auto}// bigger size &.big{font-size:310px}// smaller size &.small{font-size:80px}// centered value inside circle>span{position:absolute;width:100%;z-index:1;left:0;top:-20px;width:320px;line-height:320px;font-size:.2em;color:$secondary-color;display:block;text-align:center;white-space:nowrap;// @include transition-property(all);// @include transition-duration(0.2s);// @include transition-timing-function(ease-out);transition-property:all;transition-duration:.2s;transition-timing-function:ease-out;background:-webkit-linear-gradient(left,#563490,#ee3656);-webkit-background-clip:text;-webkit-text-fill-color:transparent}// background inside the circle &:after{position:absolute;top:$circle-width;left:$circle-width;display:block;content:" ";border-radius:50%;background-color:$bg-color;width:1 -(2 * $circle-width);height:1 -(2 * $circle-width);// @include transition-property(all);// @include transition-duration(0.2s);// @include transition-timing-function(ease-in);transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}// the slice(mask) .slice{position:absolute;width:1em;height:1em;clip:rect(0em,1em,1em,0.5em)}// circle to show the status .bar{@extend .pie}// loop to create all needed elements automatically @for $j from 51 through 100{&.p#{$j}.slice{@extend .rect-auto}&.p#{$j}.bar:after{@extend .pie-fill}&.p#{$j}.fill{@extend .pie;@extend .pie-fill}}// loop to rotate all 100 circles @for $j from 1 through 100{&.p#{$j}.bar{@include rotate((360/100*$j)+deg)}}// hover styles &:hover{cursor:default;>span{width:320px;line-height:320px;font-size:.3em;color:$primary-color}&:after{top:$circle-width-hover;left:$circle-width-hover;width:1 -(2 * $circle-width-hover);height:1 -(2 * $circle-width-hover)}}// override colors for the dark skin &.dark{background-color:$secondary-color-dark;.bar,.fill{border-color:$primary-color-dark!important}>span{color:$secondary-color-dark}&:after{background-color:$bg-color-dark}&:hover{>span{color:$primary-color-dark}}}// green skin &.green{.bar,.fill{border-color:$primary-color-green!important}&:hover{>span{color:$primary-color-green}}}&.green.dark{.bar,.fill{border-color:$primary-color-green-dark!important}&:hover{>span{color:$primary-color-green-dark}}}// orange skin &.orange{.bar,.fill{border-color:$primary-color-orange!important}&:hover{>span{color:$primary-color-orange}}}&.orange.dark{.bar,.fill{border-color:$primary-color-orange-dark!important}&:hover{>span{color:$primary-color-orange-dark}}}}.c100:after{top:.13em;left:.13em;width:.74em;height:.74em}