html, body {margin: 0; padding: 0; }
body {font-family: "Open Sans", sans-serif; font-optical-sizing: auto; font-weight: 400; font-size: 16px; color: #0D252F; background: #fafafc; }

.template {display: none; }

div, nav, header, input, span, form {box-sizing: border-box; }

input {font-family: "Open Sans", sans-serif; font-size: 1rem; font-weight: 400; }

a {text-decoration: none; color: #0D252F; }
ul, li, form, h1, h2, h3, h4, fieldset, input, p {list-style-type: none; margin: 0; padding: 0; border: 0; }

p {margin: 15px 0; }

.cnt {margin: 0 auto; width: calc(100vw - 2 * 30px); max-width: 1630px; min-height: calc(100vh - 66px); }

@media (max-width: 700px){
    .cnt {width: calc(100vw - 2 * 10px); }
}

footer {background: #0D252F; height: 66px; display: flex; flex-flow: wrap; justify-content: center; align-items: center; color: #fff; font-size: .875rem; font-weight: 400; text-align: center; line-height: 1.2; }
footer span {display: inline-block; }

nav {display: flex; flex-flow: wrap; justify-content: end; align-items: center; position: relative; height: 90px; }
a.logo {position: absolute; left: 0; }

nav {z-index: 20000; }
.cover {z-index: 19000; }
header {z-index: 1000;}

/* MENU */

.cover {display: none; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: #0D252F; opacity: .3; }
.cover.opened {display: block; }
@media (min-width: 1001px){
    .cover.opened {display: none; }
}

nav a.menu, nav a.criterias {cursor: pointer; }

ul.menu {display: flex; flex-flow: row; justify-content: space-between; gap: 40px; font-size: 1rem; font-weight: 500; align-items: center; }
ul.menu li a {transition: .5s ease-in-out; }
ul.menu li a.viewed, ul.menu li a:hover {transition: .35s ease-out; }
ul.menu li a.viewed {font-weight: 900; }
ul.menu li a {position: relative; }
ul.menu li a:not(.logout)::before {content: ''; display: block; position: absolute; left: 50%; bottom: -5px; width: 0; background: #807CF8; height: 3px; border-radius: 50px; transform: translate3d(-50%,0,0); transition: .5s ease-in-out; }
ul.menu li a:not(.logout).viewed::before, ul.menu li a:not(.logout):hover::before {width: calc(100% + 10px); transition: .35s ease-out; }
ul.menu li:last-child {margin-left: 20px; }



/* BUTTONS */


.btn {position: relative; font-size: 1rem; font-weight: 500; display: inline-block; padding: 9px 10px; border: 1.5px solid #fff; background: #fff; border-radius: 10px; line-height: 1.2; }
.btn:hover {background-color: #efefef; }
.xl {/* font-size: 1.0625rem; */ font-size: 1rem; font-weight: 500; padding: 14px 20px; border: 1.5px solid #0D252F; border-radius: 8px; line-height: 1.13; }

.btn.dark {color: #fff; background: #0D252F; }
.btn.dark:hover {background-color: #000; }

.btn.menu {padding-left: 50px; }
.btn.menu::before {content: url(img/menu.svg); display: block; position: absolute; left: 20px; top: 50%; transform: translate3d(0,-50%,0);}
.btn.logout {padding-left: 50px; }
.btn.logout::before {content: url(img/logout.svg); display: block; position: absolute; left: 20px; top: 55%; transform: translate3d(0,-50%,0);}
.btn.criterias {padding-left: 50px; }
.btn.criterias::before {content: url(img/criterias.svg); display: block; position: absolute; left: 18px; top: 52%; transform: translate3d(0,-50%,0);}

.btn.menu.close {padding-left: 20px; padding-right: 40px; }
.btn.criterias.close {padding-left: 20px; padding-right: 40px; }
.btn.menu.close::before, .btn.criterias.close::before {left: auto; right: 10px; top: 53%; transform: translate3d(0,-50%,0);}
.btn.menu.close::before {content: url(img/close-dark.svg); }
.btn.criterias.close::before {content: url(img/close.svg); }




.btn.mobile {display: none; }
@media (max-width: 1000px){
    nav {gap: 12px; }
    .btn.mobile {display: inline-block; }
    ul.menu {display: none; position: absolute; flex-flow: wrap; gap: 7px; background: #fff; border-radius: 10px; right: 0; top: 100%; width: 250px; padding: 15px 0 20px 0; }
    nav.opened ul.menu {display: flex; }
    ul.menu li {flex: 1 0 100%; }
    ul.menu li a:not(.logout) {display: block; width: 100%; padding: 4px 0 4px 30px; box-sizing: border-box; border-radius: 4px; }
    ul.menu li a:not(.logout):hover, ul.menu li a:not(.logout).viewed {background: #f2eafe; }
    ul.menu li a:not(.logout)::before {height: 0; width: 3px; left: 0; top: 50%; transform: translate3d(0,-50%,0);}
    ul.menu li a:not(.logout):hover::before, ul.menu li a:not(.logout).viewed::before {height: calc(100% + 4px); width: 3px; }
    ul.menu li:last-child {margin-top: 70px; }
    ul.menu li:last-child a {border-color: #f2eafe; background: #f2eafe; }
}
@media (max-width: 500px){
    nav > .btn {width: 50px; height: 50px; box-sizing: border-box; padding: 0; }
    nav > .btn span {display: none; }
    nav > .btn::before {left: 50% !important; top: 50% !important; transform: translate3d(-50%,-50%,0) !important;}
    .btn.menu.close, .btn.criterias.close {padding: 0; padding-left: 50px; }
    .btn.menu.close::before, .btn.criterias.close::before {right: auto; left: 50%; transform: translate3d(-50%,-50%,0);}
}




/* PAGE */


.page {position: relative; display: flex; flex-flow: wrap; justify-content: space-between; gap: 20px; align-items: stretch; margin-bottom: 75px; }
header {flex: 0 0 100%; padding: 10px 20px; background: #ECECEE; border: 1px solid #CFCFCF; border-radius: 10px; }
.options {flex: 0 0 325px; position: relative; z-index: 10000; }
.content {flex: 0 0 calc(100% - 20px - 325px); background: #fff; border-radius: 10px; box-shadow: 0 2px 5px #0003; padding: 30px 40px; z-index: 1000; }
.guide .content {flex: 0 0 100%; }


/* HEADER */
header {display: flex; flex-flow: wrap; justify-content: flex-start; align-items: center; }

.welcome {flex: 0 0 305px; display: flex; flex-flow: row; justify-content: space-between; align-items: center;}
.greeting {font-weight: 900; text-transform: uppercase; }
.greeting span {display: block; }
.avatar {width: 50px; height: 50px; border-radius: 50%; overflow: hidden; }
.avatar img {width: 100%; height: 100%; object-fit: cover; }

.tools {display: flex; flex-flow: wrap; row-gap: 4px; margin: 0 auto; column-gap: 10px; justify-content: center; align-items: center; padding: 4px; border-radius: 100px; background: #FDFDFD; }
.tools li {flex: 0 1 auto; }
.tools li a {display: inline-block; padding: 8px 60px 8px 85px; position: relative; color: #0D252F; background: #FDFDFD; font-weight: 500; text-transform: uppercase; border-radius: 100px; }
.tools li a:hover {background: #ECECEE; }
.tools li a.viewed {color: #fff; background: #0D252F; }
.tools li a::before {display: block; position: absolute; left: 60px; top: 55%; transform: translate3d(0,-50%,0); }
.tools li a.find::before {content: url('img/search.svg'); }
.tools li a.check::before {content: url('img/check.svg'); }
.tools li a.explore::before {content: url('img/explore.svg'); }
.tools li a.find.viewed::before {content: url('img/search-white.svg'); }
.tools li a.check.viewed::before {content: url('img/check-white.svg'); }
.tools li a.explore.viewed::before {content: url('img/explore-white.svg'); }

@media (max-width: 1015px){
    header {justify-content: center; gap: 20px; }
}
@media (max-width: 750px){
    .tools {width: 100%; }
    .tools li {flex: 1 0 auto; }
    .tools li a {padding: 8px 0; width: 100%; text-align: center; }
    .tools li a::before {position: relative; display: inline; transform: none; top: 2px; left: auto; padding-right: 8px; }
}
@media (max-width: 460px){
    .tools {background: none; gap: 10px; }
    .tools li a {width: 230px; }
    .tools li {flex: 0 1 auto; }
}

/* OPTIONS */


.campaign {background: #616EF7; border-radius: 10px; min-height: 200px; padding: 15px 20px 0 20px; }
.find .campaign:hover {background: #5D6AED; }
.campaign .data-box:not(:first-child) {margin-top: 40px; }
.campaign > div > h3 { color: #fff; font-size: 1rem; font-weight: 900; text-transform: uppercase; }
.campaign > div > p { color: #fff; font-size: .875rem; margin: 10px 0; }
.check .campaign > div > h3, .check .campaign > div > p {color: #0D252F; }

.input-box {position: relative; border-radius: 8px; background: #fff; }
.find .input-box:hover:not(.active) {background: #dddff9; }
.check .input-box:hover:not(.active) {background: #fbfbfb; }

.input-box .label {z-index: 100; position: absolute; width: 100%; height: 100%; font-size: 1rem; }
.campaign .input-box .label {padding: 17px 0 0 15px; }
.campaign .input-box.active .label {padding: 5px 0 0 16px; font-size: .625rem; color: #807cf8; }

.campaign input {position: relative; z-index: 200; border-radius: 8px; background: transparent; border: 0; width: 100%; padding: 20px 15px 12px 17px; }
.campaign input::placeholder {color: #0D252F; font-size: 1rem; font-family: "Open Sans", 'sans-serif'; opacity: 0; }
.campaign .input-box.active input::placeholder {opacity: 1; }

.ddlist-header {display: flex; flex-flow: wrap; justify-content: space-between; align-items: flex-end; position: relative; }
.ddlist-header > * {flex: 0 0 auto; }
.ddlist-header h3 {font-size: 1rem; font-weight: 900; text-transform: uppercase; }
.ddlist-header p {font-size: .875rem; margin: 10px 0; flex: 0 1 100%; }
.influencers .ddlist-header > * {flex: 0 0 100%; }

.influencers .ddlist-header .add-influencer-box {margin: 36px 0 10px 0; flex: 0 0 100%; }
.influencers .ddlist-header .add-influencer-box input {width: 100%; height: 48px; padding: 0 16px; border: 1px solid #0D252F; border-radius: 4px; background: #fff; }
.influencers .ddlist-header .add-influencer-box input::placeholder {color: #3B4454; opacity: 1; }
.influencers .ddlist-header .file-box {margin: 10px 0; }
.influencers .ddlist-header .file-box button {cursor: pointer; position: relative; display: block; text-align: left; width: 100%; padding: 12px 16px; border: 1px solid #0D252F; border-radius: 4px; background: #fff; font-size: 1rem; font-weight: 500; }
.influencers .ddlist-header .file-box button span:last-child {font-size: .875rem; color: #3B4454; display: block; }
.influencers .ddlist-header .file-box button::before {content: ''; display: block; position: absolute; right: 16px; top: 50%; transform: translate3d(0,-50%,0); width: 33px; height: 33px; border-radius: 50%; background: #0D252F url(img/download-white.svg) no-repeat center; }
.influencers .ddlist-header .file-box button:hover::before {background-color: #F66B6A; }
.influencers .ddlist-header .file-box input[type="file"] {display: none; }
.find .brand .ddlist-header > h3, .find .brand .ddlist-header > p {color: #fff; }
.option-box .ddlist-header > h3, .brand .ddlist-header > p {color: #0D252F; }

.ddlist-header a.toggle-ddlist {cursor: pointer; display: inline-block; text-align: right; color: #0D252F; font-size: .875rem; font-weight: 400; transform-origin: right center; }
.ddlist-header a.toggle-ddlist:hover, .opened .ddlist-header a.toggle-ddlist {transform: scale(1.1); }
.find .campaign .ddlist-header a.toggle-ddlist {color: #fff; }
.ddlist-header a.toggle-ddlist::after {content: ''; position: relative; display: inline-block; top: 5px; width: 21px; height: 21px; background: #0D252F url(img/arrow.svg) no-repeat center; border-radius: 4px; margin-left: 6px; }
/* .option-box .ddlist-header a.toggle-ddlist {color: #0D252F; } */
.option-box .ddlist-header a.toggle-ddlist::after {border: 3px solid #fff; border-radius: 7px; top: 7px; margin-left: 4px; }

.ddlist {display: none; position: absolute; left: 100%; top: 0; min-width: 200px; border-radius: 10px; background: #f2f2f2; width: auto; padding: 20px 15px; }
.ddlist > * {flex: 1 0 100%; }
.ddlist h3 {font-size: 1.25rem; opacity: 1; margin: 10px 0 10px 5px; font-weight: 400; text-transform: none; color: #5A5151; }
.ddlist > a {cursor: pointer; /* display: inline-block; */ display: block; padding: 1px 5px; margin: 1px 0; /* border-radius: 5px;  */ font-weight: 500; }
.ddlist > a:hover:not(.checked) {background: #fafafa; font-weight: 600; }
.ddlist > a.checked {color: #FF6746; font-weight: 600; }
.data-box.opened .ddlist {display: block; }
.data-box.opened a.toggle-ddlist::after {background: #0D252F url(img/close.svg) no-repeat center; }
.ddlist a .preview {display: none; position: absolute; padding: 10px; background: #ECECEC; border: 1px solid #DDE0E6; left: calc(100% + 5px); top: 0; border-radius: 10px; }
.ddlist a:hover .preview {display: block; }
.ddlist a .preview p {margin: 0 0 25px 0; font-weight: 400; font-size: 1rem; }
.ddlist a .preview p b {font-weight: 900; display: block; margin-bottom: 8px; }
.ddlist a .preview .photos {width: 351px; display: flex; flex-flow: wrap; gap: 3px; }
.ddlist a .preview .photos div {flex: 0 0 115px; height: 115px; }
.ddlist a .preview .photos div img {width: 100%; height: 100%; object-fit: cover; }

.data-visual {display: flex; flex-flow: wrap; justify-items: flex-start; gap: 10px; margin-top: 10px; }
.data-visual a.btn.basic {cursor: pointer; }
.find .data-visual a.btn.basic:hover {background: #bdc2f6; border-color: #bdc2f6; }
.check .data-visual a.btn.basic:hover {background: #ecfbfc; border-color: #ecfbfc; }

@media (max-width: 1000px){
    .ddlist {position: static; width: 100%; margin-top: 10px; }
    .tab .ddlist {background: #fff; }
    .tab .ddlist > a:not(.checked):hover {background: #efefef; }
    .ddlist-header a.toggle-ddlist::after {transform: rotate(90deg);}
}

.tab-switch {position: relative; display: flex; flex-flow: row; justify-content: space-between;align-items: stretch; border-top-left-radius: 12px; border-top-right-radius: 12px; overflow: hidden; }
.tab-switch::after {content: ''; position: absolute; display: block; width: 25%; height: 6px; top: 100%; background: #0D252F; border-radius: 100px; transform: translate3d(-50%,-50%,0); transition: .35s ease-in-out; }
[data-tab="0"] .tab-switch::after {left: 25%; }
[data-tab="1"] .tab-switch::after {left: 75%; }
.tab-switch a {cursor: pointer; flex: 0 0 50%; font-weight: 500; height: 48px; display: flex; flex-flow: row; justify-content: center; align-items: center; background: #b0b6fb; }
.check .tab-switch a {background: #e8fafb; }
.find [data-tab="0"] .tab-switch a[data-tab="0"], .find [data-tab="1"] .tab-switch a[data-tab="1"] {background: #fff; }
.find [data-tab="0"] .tab-switch a[data-tab="0"]:hover, .find [data-tab="1"] .tab-switch a[data-tab="1"]:hover {background: #f3f2f6; }
.find [data-tab="1"] .tab-switch a[data-tab="0"]:hover, .find [data-tab="0"] .tab-switch a[data-tab="1"]:hover {background: #a2a8e5; }
.check [data-tab="0"] .tab-switch a[data-tab="0"], .check [data-tab="1"] .tab-switch a[data-tab="1"] {background: #fff; }
.check [data-tab="0"] .tab-switch a[data-tab="0"]:hover, .check [data-tab="1"] .tab-switch a[data-tab="1"]:hover {background: #f3f2f6; }
.check [data-tab="1"] .tab-switch a[data-tab="0"]:hover, .check [data-tab="0"] .tab-switch a[data-tab="1"]:hover {background: #d8e8eb; }

.option-box {border: 1px solid #DDE0E6; background: #ECECEE; padding: 10px 20px; border-radius: 10px; margin: 8px 0; }
.option-box.form-control {background: #616EF7; padding: 30px 20px; }
.check .campaign, .check .option-box.form-control {background: #D3F7FA; }
.check .campaign:hover {background: #CDF0F3; }
.option-box.form-control {display: flex; flex-flow: row; justify-content: space-between; align-items: center; gap: 10px; }
.option-box.form-control > * {cursor: pointer; flex: 0 0 calc(50% - 5px); font-size: 1rem; font-weight: 500; }
.option-box.form-control button[type="submit"] {background: #0d252f; border-color: #0d252f; color: #fff; }
.option-box.form-control button[type="submit"]:hover {background: #133544; border-color: #133544; color: #fff; }
/* .check .option-box.form-control button[type="submit"] {background: #708e95; border-color: #708e95; color: #fff; } */
.tags .data-visual > a {cursor: pointer; }
.tags.basic .data-visual > * {background: #f9f9fa; border-color: #f9f9fa; color: #849094; }
.tags.basic .data-visual > *:hover {background: #fff; border-color: #fff; color: #0D252F; }
.tags.basic .data-visual > *.checked {color: #fff; background: #f66b6a; }
.tags.basic .data-visual > *.checked::before {content: url(img/basic-check-white.svg); display: inline-block; margin-right: 10px; position: relative; left: 2px; top: 1px; }
.tags.basic .data-visual > *.checked:hover {background: #ff6b6a; }

.tags.advanced .data-visual .btn {cursor: default; }
.tags.advanced .data-visual .btn:not(.opened):hover {background: #f6f6f7; border-color: #f6f6f7; }
.tags.advanced .data-visual .btn.opened:hover {background: #fff; }
.tags.advanced:not(.tags-content,.tags-images) .data-visual .btn[data-in-range="min"] a.mode-switch {color: #849094; }
.tags.advanced:not(.tags-content,.tags-images) .data-visual .btn[data-in-range="min"] .relevance, .tags.advanced:not(.tags-content,.tags-images) .data-visual .btn[data-in-range="min"].opened .relevance {background: #849094; }
.tags.advanced .data-visual .btn .relevance a.control, .tags.advanced .data-visual .btn .close {display: none; }
.tags.advanced .data-visual .btn.opened .relevance a.control, .tags.advanced .data-visual .btn.opened .close {display: inline-block; }
.tags.advanced .data-visual .btn.opened {color: #f66b6a; border-color: #f66b6a; }
.tags.advanced .data-visual .btn .relevance {cursor: pointer; position: relative; display: inline-block; border-radius: 10px; background: #0D252F; color: #fff; padding: 3px 6px; margin-right: 10px; }
.tags.advanced .data-visual .btn.opened .relevance {background: #f66b6a; cursor: default; padding: 0; }
.tags.advanced .data-visual .btn .relevance .value {display: inline-block; width: 14px; text-align: center; }
.tags.advanced .data-visual .btn.opened .relevance .value {display: block; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0); z-index: 100; }
.tags.advanced .data-visual .btn a {cursor: pointer; }
.tags.advanced .data-visual .btn.opened .relevance a {position: relative; z-index: 200; }
.tags.advanced .data-visual .btn .relevance a.lower {padding: 3px 12px 3px 8px; }
.tags.advanced .data-visual .btn .relevance a.raise {padding: 3px 8px 3px 12px; }
.tags.advanced .data-visual .btn[data-in-range="min"] .relevance a.lower, .tags.advanced .data-visual .btn[data-in-range="max"] .relevance a.raise {opacity: .3; cursor: default; }
.tags.advanced .data-visual .btn .relevance a.lower::before {content: url(img/lower.svg); display: inline-block; position: relative; top: 1px; }
.tags.advanced .data-visual .btn .relevance a.raise::before {content: url(img/raise.svg); display: inline-block; position: relative; top: 1px; }
.tags.advanced .data-visual .btn a.remove {border-radius: 10px; background: #f66b6a; color: #fff; padding: 3px 7px; margin-left: 10px; display: none; }
.tags.advanced .data-visual .btn.opened a.remove {display: inline-block; }
.tags.advanced .data-visual .btn a.remove::before {content: url(img/close-tag.svg); display: inline-block; position: relative; top: 1px; }

.tags.removable .data-visual .btn a.remove {cursor: pointer; position: relative; display: inline-block; width: 26px; padding: 3px 0; background: #0D252F url(img/close.svg) no-repeat center; border-radius: 10px; margin-left: 10px; }
.tags.removable .data-visual .btn a.remove:hover {background-color: #F66B6A; }

.slider .data-visual {position: relative; display: block; margin: 24px 0 50px 0; }
.slider input[type=range] {width: calc(100% + 6px); position: relative; left: -3px; accent-color: #0D252F; }
.slider .tooltip {position: absolute; top: 100%; width: 60px; height: 33px; display: flex; flex-flow: row; justify-content: center; align-items: center; background: #fff; border-radius: 10px; transform: translate3d(-17px, 7px, 0); }
.slider .tooltip::before {content: ''; display: block; position: absolute; left: 15px; top: 0; width: 10px; height: 10px; transform-origin: left top; transform: rotate(-45deg); background: #fff; }



@media (max-width: 1100px){
    .options {flex: 0 0 270px; }
    .content {flex: 0 0 calc(100% - 20px - 270px); }
    .welcome {flex: 0 0 250px; }
}

@media (max-width: 1000px){
    .options {display: none; position: absolute; width: calc(100% + 2*30px); left: -30px; padding: 0 30px; background: #fafafc; z-index: 13000; }
    .content {flex: 0 0 100%; }
    .page.criterias .options {display: block; }
    .page.criterias .content {display: none; }
    .ddlist a.preview {display: block; padding: 10px; border-radius: 10px; margin-bottom: 10px; background: #efefef; }
    .ddlist a.preview p {margin-bottom: 15px; }
    .ddlist a .preview {display: block; position: static; padding: 0; background: none; border: 0; margin: 10px 0 5px 0; }
    .ddlist a .preview b {display: none !important; }
    .ddlist a .preview .photos {width: 100%; }
}

@media (max-width: 700px){
    .options {width: calc(100% + 2*10px); left: -10px; padding: 0 1px; }
}

/* TABS */


.options[data-tab="0"] .tab1, .options[data-tab="1"] .tab0 {position: absolute; right: 100%; visibility: hidden; height: 0; overflow: hidden; }




/* CONTENT */

.content:not(:last-child) {margin-bottom: 8px; }
.content h1 {font-size: 1.5rem; font-weight: 700; margin: 55px 0 40px 0; }
.content h1:first-child {margin-top: 0; }
.content h1 b.highlight  {font-size: 133%; color: #616EF7; }
.content h2 {margin: 22px 0; font-size: 1.25rem; font-weight: 900; }

.content .answer p {line-height: 1.8; }
.content > ul, .content .answer > ul {list-style: disc; line-height: 25px; margin: 15px 0; }
.content > ul li, .content .answer > ul li {list-style:disc; list-style-position: inside; }

.content > ul.decimal, .content .answer > ul.decimal {list-style:decimal; line-height: 25px; margin: 15px 0; }
.content > ul.decimal li, .content .answer > ul.decimal li {list-style:decimal; list-style-position: inside; }

.content-header {display: flex; flex-flow: wrap; margin-bottom: 35px; column-gap: 30px; }
.content-header h1 {flex: 1 1 auto; margin-bottom: 15px; }
.content-header .controls {flex: 0 0 auto; display: flex; flex-flow: row; gap: 8px; }
.content-header .controls a {position: relative; display: block; width: 40px; height: 40px; border-radius: 50%; background: #0D252F; }
.content-header .controls a.save:hover, .content-header .controls a.close:hover {background: #f66b6a; }
.content-header .controls a.download {background: #E3ECEF !important; }
.content-header .controls a::before, .content-header .controls a::after {display: block; position: absolute; left: 50%; top: 55%; transform: translate3d(-50%,-50%,0); }
.content-header .controls a.save::before {content: url('img/save.svg'); }
.content-header .controls a.download::before {content: url('img/download.svg'); }
.content-header .controls a.download::after {content: url('img/download-salmon.svg'); opacity: 0; }
.content-header .controls a.download:hover::after {content: url('img/download-salmon.svg'); opacity: 1; }
.content-header .controls a.close::before {content: url('img/close-circle.svg'); }
.content-header .controls a span {display: none; position: absolute; padding: 4px 8px; border-radius: 4px; background: #0d252f; top: calc(100% + 8px); left: 50%; transform: translate3d(-50%,0,0); color: #fff; font-weight: 500; }
.content-header .controls a:hover span {display: block; }
img.chart {width: 100%; height: auto; }

@media (max-width: 500px){
    .content {padding: 30px 20px; }
}


/* TOOLTIP */

.tooltip-box {position: relative; }
.tooltip-box.right {text-align: right; }
.tooltip-box > * {display: inline; position: relative; }
.tooltip-box .tooltip {display: none !important; position: absolute; display: block; left: 0; top: calc(100% + 4px); transform: translate3d(-50%,0,0); padding: 8px 12px; border-radius: 8px; background: #fff; font-size: .875rem; font-weight: 400; text-align: left; z-index: 10000; width: 175px; box-shadow: 0 0 5px #0003; }
.tooltip-box.right .tooltip {left: auto; right: -25px; transform: none; }
.tooltip-box a.tooltip-switch {cursor: pointer; position: relative; z-index: 11000; }
.tooltip-box a.tooltip-switch span {display: none !important; position: absolute; width: 10px; height: 10px; background: #fff; transform: translate3d(-50%,-50%,0) rotate(45deg); left: calc(50% - 2px); top: calc(100% + 5px); }
.tooltip-box.opened a.tooltip-switch span {display: block !important; }
.tooltip-box a.tooltip-switch::before {content: url(img/tooltip.svg); display: inline; position: relative; top: 2px; }
.tooltip-box.opened a.tooltip-switch::before {content: url(img/tooltip-orange.svg); display: inline; }
.tooltip-box.opened .tooltip {display: block !important; }
.tooltip-box .tooltip a, .tooltip-box .tooltip b {font-weight: 600; }
.tooltip-box .tooltip a {display: block; color: #807CF8; text-decoration: underline; margin-top: 13px; }
.content .tooltip-box .tooltip {width: 292px; }

@media (max-width: 500px){
    .content .tooltip-box:not(.right) > * {position: static; }
    .content .tooltip-box:not(.right) .tooltip {left: 0; right: auto; transform: none; }
    .content .tooltip-box .tooltip {max-width: calc(100vw - 2*30px); }
    .content .tooltip-box.right .tooltip {right: 0; }
    .tooltip-box.opened a.tooltip-switch span {display: none !important; }
}


/* SORTING */
.sorting {display: flex; flex-flow: wrap; justify-content: flex-start; align-items: baseline; margin: 22px 0 45px 0; row-gap: 10px;}
.sorting > * {flex: 0 1 auto; }
.sorting > div:first-child {margin-right: 40px; }
ul.sort-by {display: flex; flex-flow: wrap; justify-content: space-between; gap: 30px; font-size: 1rem; font-weight: 500; align-items: center; }
ul.sort-by li a {transition: .5s ease-in-out; }
ul.sort-by li a.viewed, ul.sort-by li a:hover {transition: .35s ease-out; }
ul.sort-by li a.viewed {font-weight: 900; }
ul.sort-by li a {position: relative; }
ul.sort-by li a:not(.logout)::before {content: ''; display: block; position: absolute; left: 50%; bottom: -5px; width: 0; background: #807CF8; height: 3px; border-radius: 50px; transform: translate3d(-50%,0,0); transition: .5s ease-in-out; }
ul.sort-by li a:not(.logout).viewed::before, ul.sort-by li a:not(.logout):hover::before {width: 46px; transition: .35s ease-out; }
/* ul.sort-by li:last-child {margin-left: 20px; } */


/* INFLUENCER */

.content .influencer {clear: left; padding: 20px; background: #FAFAFC; border: 1px solid #E3E3E3; border-radius: 10px; text-align: center; }
.content .influencer:not(:first-child) {margin-top: 12px; }
.content .influencer .inner {margin: 0 auto; }
.content .influencer .photo {width: 225px; height: 235px; float: left; margin-right: 20px; border-radius: 5px; overflow: hidden; }
.content .influencer .photo img {object-fit: cover; width: 100%; height: 100%; }
.content .influencer .header {text-align: left; display: flex; flex-flow: wrap; row-gap: 18px; column-gap: 20px; }
.content .influencer .header > * {flex: 0 0 calc((100% - 20px)/2); }

.content .influencer .name h3 {font-weight: 900; font-size: 1.25rem; /* display: flex; flex-flow: wrap; column-gap: 24px; justify-content: flex-start; align-items: baseline; */}
.content .influencer .name h3 span {display: inline; color: #fff; font-size: 1rem; text-transform: uppercase; background: #585e64; border-radius: 8px; padding: 4px 8px; font-weight: 500; }
.content .influencer .name .location {position: relative; padding-left: 30px; margin-top: 10px; }
.content .influencer .name .location::before {content: url(img/location.svg); display: block; position: absolute; left: 8px; top: 50%; transform: translate3d(0,-50%,0); }

.content .influencer .indexes {display: flex; flex-flow: row; justify-content: flex-start; align-items: flex-start; column-gap: 30px; }

.content .influencer .descr {font-weight: 700; }
.content .influencer .descr span {font-weight: 400; }

.content .influencer .audeng {text-align: left; padding-top: 18px; }
.content .influencer .audeng .items {display: flex; flex-flow: row; justify-content: flex-start; align-items: stretch; gap: 8px; margin-top: 16px; }
.content .influencer .audeng .items > * {flex: 0 1 auto; position: relative; background: #fff; padding: 0 10px 0 56px; border-radius: 7px; height: 50px; display: flex; flex-flow: wrap; justify-content: flex-start; align-content: center; gap: 3px; box-sizing: border-box; }
.content .influencer .audeng .items > *:hover {background: #ececee; }
.content .influencer .audeng .items > * > * {flex: 0 0 100%; }
.content .influencer .audeng .items > * .icon {display: block; position: absolute; left: 10px; top: 50%; width: 36px; height: 36px; border-radius: 5px; background: #fff; transform: translate3d(0,-50%,0); }
.content .influencer .audeng .items > * .icon::before {content: ''; display: block; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate3d(-50%,-50%,0); background-repeat: no-repeat;background-position: 0 0;}
.content .influencer .audeng .items > *.facebook .icon::before {background: url(img/facebook.svg); }
.content .influencer .audeng .items > *.tiktok .icon::before {background-image: url(img/tiktok.svg); }
.content .influencer .audeng .items > *.instagram .icon::before {background-image: url(img/instagram.svg); }
.content .influencer .audeng .items > *.youtube .icon::before {background-image: url(img/youtube.svg); }
.content .influencer .audeng b {font-weight: 900; color: #616EF7; }

@media (max-width: 1460px){
    body:not(.influencer) .content .influencer .descr {flex: 0 0 100%; }
    body:not(.influencer) .content .influencer .audeng {clear: left; }
    body:not(.influencer) .content .influencer .name .location {margin-top: 15px; }
    body:not(.influencer) .content .influencer .photo {width: 173px; height: 173px; }
}
@media (max-width: 1200px){
    body:not(.influencer) .content .influencer .audeng .items {flex-flow: wrap; max-width: 360px; }
    body:not(.influencer) .content .influencer .audeng .items > * {flex: 0 1 calc((100% - 8px)/2); }
}

@media (max-width: 1080px){
    body.influencer .content .influencer .descr {flex: 0 0 100%; }
    body.influencer .content .influencer .audeng {clear: left; }
    body.influencer .content .influencer .name .location {margin-top: 15px; }
    body.influencer .content .influencer .photo {width: 173px; height: 173px; }
}
@media (max-width: 840px){
    body.influencer .content .influencer .audeng .items {flex-flow: wrap; max-width: 360px; }
    body.influencer .content .influencer .audeng .items > * {flex: 0 1 calc((100% - 8px)/2); }
    .content .influencer .name {padding-right: 45px; }
}

@media (max-width: 850px){
    body .content .influencer .photo {float: none; display: block; margin: 0 auto 18px auto; }
}
@media (max-width: 750px){
    body .content .influencer .header > * {flex: 1 1 auto; }
}
@media (max-width: 500px){
    body .content .influencer .audeng .items {max-width: 200px; margin-left: auto; margin-right: auto; }
    body .content .influencer .audeng .items > * {flex: 0 0 100%; }
    ul.sort-by {flex: 1 0 100%; gap: unset; justify-content: space-between; }
}



.content .influencer .read-more {clear: left; margin-top: 20px; display: inline-block; color: #616EF7; font-size: .875rem; font-weight: 600; text-decoration: underline; }




/* PAGINATION */
.pagination {clear: left; margin: 45px 0 20px 0; display: flex; flex-flow: wrap; justify-content: center; align-items: center; gap: 8px; }
.pagination > * {padding: 7px 11.5px; border-radius: 8px; }
.pagination > a:hover {background: #f5f5f5; }
.pagination > a.viewed {background: #0D252F; color: #fff; }

/* PROFILE */
.profile .page > h1, .login .page > h1 {font-size: 3rem; font-weight: 800; text-transform: uppercase; margin: 25px 0 40px 0; }
.profile .page > h1 b, .login .page > h1 b {color: #7d7d7e; display: block; font-weight: 800; }
.profile .page header {display: flex; flex-flow: row; gap: 18px; justify-content: space-between; align-items: stretch; padding: 0; background: none; border: none; }
.profile .page header .welcome {flex: 0 0 325px; flex-flow: column; justify-content: flex-start; align-items: stretch; gap: 40px; padding: 20px; background: #ECECEE; border-radius: 10px; }
.profile .page header .welcome > div:first-child {display: flex; flex-flow: row; justify-content: space-between; align-items: center; }
.profile .page header .welcome > div:not(:first-child) {padding-bottom: 30px; }
.profile .page header .welcome > div:first-child span {display: block; }
.profile .page header .welcome > div b {font-weight: 900; }
.profile .page header .welcome > div .btn.history {display: block; text-align: center; }
.profile .page header .welcome > div .btn.history::before {content: url(img/history.svg); display: inline-block; position: relative; margin-right: 10px; }
.profile .page header .actions {flex: 0 1 auto; display: flex; flex-flow: wrap; justify-content: center; gap: 9px; }
.profile .page header .actions > * {flex: 1 0 100%; }
.profile .page header .actions a {position: relative; display: block; color: #0D252F; border-radius: 10px; }
.profile .page header .actions a:hover {border-radius: 100px; }
.profile .page header .actions a div {position: relative; max-width: 930px; margin: 0 auto; padding: 30px 20% 30px 40px; }
.profile .page header .actions a h2 {font-size: 1.5rem; font-weight: 700; text-transform: uppercase; }
.profile .page header .actions a p {margin: 12px 0 0 0; font-size: 1rem; }
.profile .page header .actions a.find {background: #616ef7; color: #fff; }
.profile .page header .actions a.find:hover {background: #5D6AED; }
.profile .page header .actions a.check {background: #d3f7fa; }
.profile .page header .actions a.check:hover {background: #D3F7FA; }
.profile .page header .actions a.explore {background: #D7D8FE; }
.profile .page header .actions a.explore:hover {background: #CBCCFF; }
.profile .page header .actions a div::after {content: url(img/profile-arrow-dark.svg); display: block; position: absolute; right: 10%; top: 50%; transform: translate3d(50%,-50%,0);}
.profile .page header .actions a.find div::after {content: url(img/profile-arrow-white.svg); }


@media (max-width: 1100px){
    .profile .page header .welcome {flex: 0 0 270px; }
}
@media (max-width: 900px){
    .profile .page > h1, .login .page > h1 {font-size: 3rem; margin: 20px 0 30px 0; }
}
@media (max-width: 800px){
    .profile .page header {flex-flow: wrap; }
    .profile .page header > * {flex: 0 0 100% !important; }
    .profile .page header .welcome {gap: 20px; }
    .profile .page header .welcome > div .btn.history {display: inline-block; }
}
@media (max-width: 700px){
    .profile .page > h1, .login .page > h1 {font-size: 2rem; margin: 20px 0 30px 0; }
}

/* LOGIN */
.login .page {display: block; }
.login .page > h1 {text-align: center; margin-left: auto; margin-right: auto; }
.login .page > h2 {text-align: center; font-weight: 900; font-size: 1rem; text-transform: uppercase; margin-top: 70px; }
form.login {margin: 30px auto 0 auto; max-width: 460px; background: #fff; border: 1px solid #d9d9d9; border-radius: 8px; padding: 24px; }
form.login fieldset {display: flex; flex-flow: wrap; justify-content: flex-start; align-items: center; gap: 24px; }
form.login fieldset > * {flex: 0 0 100%; }
form.login label {display: block; margin-bottom: 5px; }
form.login input {display: block; width: 100%; padding: 12px 16px; border: 1px solid #d9d9d9; border-radius: 8px; }
form.login button {cursor: pointer; }

/* GUIDE */
.guide .page {gap: 17px; }
.guide header {background: #616EF7; justify-content: center; padding: 30px 40px; color: #fff; gap: 40px; }
.guide header > * {flex: 0 0 100%; max-width: 1100px; align-items: center; }
.guide header h1 {font-size: 1.5rem; font-weight: 700; }
.guide header p {font-weight: 700; margin: 0; }

.guide .questions {display: flex; flex-flow: wrap; justify-content: flex-start; align-items: stretch; gap: 10px; }
.guide .questions a {flex: 0 1 auto; display: inline-block; padding: 10px; border-radius: 10px; background: #dde0fb; border: 1px solid #dde0fb; }
.guide .questions a:hover {background: #fff; border: 1px solid #0D252F; border-radius: 20px; }

.guide .content > * {max-width: 960px; margin-left: auto; margin-right: auto; }
.guide .content h2 {font-size: 1.5rem; font-weight: 700; margin-top: 70px; margin-bottom: 40px; }
.guide .content .answer:first-child h2 {margin-top: 0; }

@media (max-width: 500px) {
    .guide header {padding: 30px 20px; }
}

/* COMPARISON HEADER @find, check */
.comparison {z-index: 12000; flex: 0 0 100%; margin-top: 35px; position: relative; display: flex; flex-flow: row; justify-content: space-between; align-items: stretch; gap: 9px; }
.comparison div.back {flex: 0 0 125px; padding: 14px 14px 18px 15px; background: #EFEFEF; border-radius: 9px; display: flex; flex-flow: column; justify-content: space-between; }
.comparison div.back h3 {font-size: 16px; font-weight: 900; text-transform: uppercase; }

a.back {cursor: pointer; display: inline-block; text-align: right; color: #0D252F; font-size: .875rem; font-weight: 400; }
a.back::after {content: ''; position: relative; display: inline-block; top: 8px; width: 21px; height: 21px; border: 3px solid #EFEFEF; background: #0D252F url(img/lower.svg) no-repeat center; border-radius: 7px; margin-left: 6px; box-sizing: content-box;}
a.back:hover::after {border: 3px solid #fff; }

.compared {flex: 0 0 calc(100% - 125px - 9px); display: flex; flex-flow: wrap; gap: 9px; justify-content: flex-start; align-items: stretch; }
.compared .item {position: relative; flex: 1 0 calc((100% - 4*9px)/5); min-width: 250px; border-radius: 9px; background: rgba(255,255,255,204); box-shadow: 0 2px 5px #0003; padding: 12px 9px 10px 9px; display: flex; flex-flow: column; justify-content: flex-start; gap: 5px; }
.compared .item:hover {background: #fff; }
.compared .item::after, .compared .item::after {z-index: 500; content: ''; display: block; position: absolute; width: 100%; height: 100%; left: -2px; top: -2px; border: 2px solid transparent; border-radius: 11px; }
.compared .item.opened::after, .compared .item:hover::after {border: 2px solid #807CF8; }
.compared .item > div:not(.detail) {display: flex; flex-flow: row; justify-content: space-between; gap: 10px; align-items: flex-start; }
.compared .item > div:not(.detail) div:last-child {text-align: right; }
.compared .item .name, .compared .item .brand {font-weight: 600; }
.compared .item > div:nth-child(2) {font-size: .875rem; }
.compared .item > div:nth-child(3) {margin-top: auto; }
.compared .item > div:nth-child(3) {align-items: flex-end; }
.compared .item .type {font-size: .875rem; text-transform: uppercase; padding: 2px 8px; border-radius: 100px; }
.compared .item .type.find {background: #616EF7; color: #fff; }
.compared .item .type.check {background: #D3F7FA; }

.compared .item:nth-last-child(1) {z-index: 100; }
.compared .item:nth-last-child(2) {z-index: 200; }
.compared .item:nth-last-child(3) {z-index: 300; }
.compared .item:nth-last-child(4) {z-index: 400; }
.compared .item:nth-last-child(5) {z-index: 500; }
.compared .item:nth-last-child(6) {z-index: 600; }


.compared .item a.go-detail {z-index: 600; position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.compared .item a.toggle-preview {z-index: 800; position: relative; display: block; width: 25px; height: 25px; cursor: pointer; border-radius: 50%;  background: #0D252F url(img/lower.svg) no-repeat 45% 50%; transform: rotate(-90deg);}
.compared .item a.toggle-preview:hover {background-color: #F66B6A; }
.compared .item.opened a.toggle-preview {background-color: #F66B6A; transform: rotate(90deg);}

.compared .item .detail {display: none; position: absolute; top: 100%; left: 0; width: 100%; padding: 19px 15px 23px 15px; background: #EFEFEF; border-radius: 11px; box-shadow: 0 4px 4px #0003; }
.compared .item.opened .detail {display: block; }

.compared .item .detail h4 {font-weight: 300; font-size: 16px; margin: 27px 0 19px 0; }
.compared .item .detail h4:first-child {margin-top: 0; }
.compared .item .detail p {font-weight: 500; }
.compared .item .detail p span {display: inline-block; }
.compared .item .detail p b {font-weight: 600; }
.compared .item .detail >*:last-child {margin-bottom: 0 !important; }

@media (max-width: 1480px){
    .compared .item {flex: 0 0 calc((100% - 3*9px)/4); min-width: 0; }
}
@media (max-width: 1220px){
    .compared .item {flex: 0 0 calc((100% - 2*9px)/3); }
}
@media (max-width: 960px){
    .compared .item {flex: 0 0 calc((100% - 9px)/2); }
}
@media (max-width: 660px){
    .compared .item {flex: 0 0 100%; }
}
@media (max-width: 420px){
    .comparison {flex-flow: wrap; }
    .comparison > * {flex: 0 0 100% !important; }
}



/* HISTORY */
.history .content {flex: 0 0 100%; }

.btn-box {margin: 31px 0 80px 0; display: flex; flex-flow: wrap; justify-content: flex-start; align-items: center; gap: 10px; }
.btn-box a.compare {padding-left: 77px; padding-right: 44px; }
.btn-box a.compare::before {content: url(img/play.svg); display: block; position: absolute; left: 50px; top: 50%; transform: translate3d(0,-50%,0); }
.btn-box a.compare #sum-checked {display: inline; padding: 3px 8px; border-radius: 10px; text-align: center; background: #F66B6A; color: #fff; margin-left: 5px; }

form.search-history {position: relative; width: 100%; max-width: 470px; }
form.search-history input {width: 100%; max-width: 470px; height: 50px; background: #fff; border: 2px solid #0D252F; border-radius: 4px; padding: 0 64px 0 16px; font-size: 1rem; }
form.search-history input::placeholder {color: #3B4454; opacity: 1; }
form.search-history button {cursor: pointer; display: block; position: absolute; width: 40px; height: 40px; background: #0D252F; border-radius: 50%; top: 50%; right: 16px; transform: translate3d(0,-50%,0); border: 0; }
form.search-history button::before {content: url(img/zoom-lens.svg); display: block; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0);}

.history .table-box {width: 100%; overflow-x: auto; }
.history table {width: 100%; /* min-width: 540px; */ margin-top: 14px; }
.history table .edit {width: 220px; }
.history tr td {border-bottom: 1px solid #d9dfe4; }
.history table th, .history table td {text-align: left; }
.history table th {padding: 14px 16px; font-weight: 900; background: #e3ecef; }
.history table td {padding: 18px 16px; font-weight: 400; }
.history table th:last-child, .history table td:last-child {padding-right: 0; }
.history table td span:first-child {display: inline-block; font-weight: 500; }
.history table td span:not(:first-child) {display: inline-block; font-size: .875rem; font-weight: 700; color: #63738e; }
.history table td span:not(:last-child) {margin-right: 16px; }

.history table .type {display: inline-block; font-size: .875rem; text-transform: uppercase; padding: 2px 8px; border-radius: 100px; }
.history table .type.find {background: #616EF7; color: #fff; }
.history table .type.check {background: #D3F7FA; }

.history table a {cursor: pointer; display: inline-block; position: relative; width: 40px; height: 40px; border-radius: 50%; background: #0D252F; margin-right: 8px; }
.history table a.download {background: #e3ecef; }
.history table a:last-child {margin-right: 0; }
.history table a:not(.download):hover {background: #F66B6A; }

.history table a::before, .history table a::after {display: block; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%,-45%,0); }

.history table a.view::before {content: url(img/eye.svg); }
.history table a.download::before {content: url(img/download.svg); }
.history table a.download::after {content: url(img/download-salmon.svg); opacity: 0; }
.history table a.download:hover::after {opacity: 1; }
.history table a.remove::before {content: url(img/remove.svg); }
.history table a.toggle-comparison::before {content: ''; width: 21px; height: 21px; border-radius: 50%; background: #fff; transform: translate3d(-50%,-50%,0); }
.history table a.toggle-comparison.checked::before {background: #f66b6a; }

.history table a span {display: none !important; position: absolute; padding: 4px 8px; border-radius: 4px; background: #0d252f; top: calc(100% + 8px); left: 50%; transform: translate3d(-50%,0,0); color: #fff; font-weight: 500; }
.history table a:hover span {display: block !important; }

@media (max-width: 1000px){
    .history table td span:first-child {display: block; margin-right: 0; }
}
@media (max-width: 890px) {
    .history table .edit {width: 110px; }
}
@media (max-width: 670px) {
    .history table thead {display: none; }
    .history table td {display: block; padding: 12px 0; }
    .history table td {border-bottom: 0; }
    
    .history table td:nth-child(1) {padding-top: 20px; font-weight: 500; }
    .history table td:nth-child(1)::before {content: 'Date'; display: inline-block; margin-right: 50px; font-weight: 400; }
    .history table td:nth-child(2)::before {content: 'Tool Type'; display: inline-block; margin-right: 30px; }
    .history table td:nth-child(3)::before {content: 'Campaign Name / Company / Country'; display: block; font-weight: 400; margin-bottom: 24px; }
    .history table td:nth-child(3) span:first-child {font-weight: 500; display: inline-block; margin-right: 16px; }
    .history table td:nth-child(3) span:not(:first-child) {position: relative; top: -1px; }
    .history table td:nth-child(4) {padding-bottom: 47px; display: flex; flex-flow: row; justify-content: space-around; max-width: 300px; margin: 0 auto; }
}
@media (max-width: 700px) {
    /* .history .table-box {width: calc(100vw - 2*40px - 2*10px); } */
}
@media (max-width: 500px) {
    /* .history .table-box {width: calc(100vw - 2*20px - 2*10px); } */
}



/* EXPLORE */
.explore .inner-content {max-width: 1160px; margin: 0 auto; }
.explore .country-pick {background: #d7d8fe; padding: 15px inherit; box-shadow: none;}
.explore .content {flex: 0 0 100%; }
.explore div.chart {margin: 40px 0 20px 0; }

.explore .country-pick .inner-content {display: flex; flex-flow: wrap; justify-content: flex-start; align-items: center; column-gap: 40px; row-gap: 20px; }
.explore .country-pick .inner-content .label {flex: 0 0 300px; }
.explore .country-pick .inner-content .label h3 {font-weight: 900; text-transform: uppercase; }
.explore .country-pick .inner-content .label > *:last-child {margin-bottom: 0; }
.explore .country-pick .inner-content .tags {flex: 1 0 auto; display: flex; flex-flow: wrap; justify-content: flex-start; align-items: center; gap: 10px; }
.explore .country-pick .inner-content .tags a.btn {color: #849094; }
.explore .country-pick .inner-content .tags a.btn:hover {color: #0D252F; }
.explore .country-pick .inner-content .tags a.btn.checked {color: #fff; background: #F66B6A; }
.explore .country-pick .inner-content .tags a.btn.checked::before {content: url(img/basic-check-white.svg); display: inline-block; margin-right: 10px; position: relative; left: 2px; top: 1px; }

.explore .segments {z-index: 5000; position: relative; background: #d7d8fe; padding-top: 15px; box-shadow: none;}

.segments .header {display: flex; flex-flow: wrap; justify-content: flex-start; align-items: baseline; column-gap: 110px; row-gap: 0; }
.segments .header h3 {font-weight: 900; text-transform: uppercase;}
.segments .header p {font-size: .875rem; margin: 10px 0 20px 0; }

.explore .segments-box {display: flex; flex-flow: wrap; gap: 16px; justify-content: space-between; align-items: stretch; }
.explore .segment {cursor: pointer; flex: 0 0 calc((100% - 16px)/2); display: flex; flex-flow: row; justify-content: flex-start; align-items: stretch; }
.segments.close-up .segment .preview {opacity: .2; }


.segment .preview {flex: 0 0 100%; position: relative; z-index: 100; padding: 30px 20px; background: #fff; border-radius: 10px; display: flex; flex-flow: column; }
.segment .preview .brands {justify-self: flex-end; margin-top: auto; }
.segment .preview h4 {font-size: 1.5rem; font-weight: 700; position: relative; padding: 0 0 0 72px; }
.segment .preview h4::before {content: ''; display: block; position: absolute; left: 0; top: 50%; width: 40px; height: 40px; border-radius: 5px; background-position: center; background-repeat: no-repeat; transform: translate3d(0,-50%,0); }

.segment.soulmates .preview h4::before {background-image: url(img/soulmates.svg); background-color: #f0f9fd; }
.segment.advisors .preview h4::before {background-image: url(img/advisors.svg); background-color: #f5fcf4; }
.segment.trendsetters .preview h4::before {background-image: url(img/trendsetters.svg); background-color: #ffd1d1; }
.segment.aspirational-role-models .preview h4::before {background-image: url(img/aspirational-role-models.svg); background-color: #f4f3f3; }
.segment.fellow-performers .preview h4::before {background-image: url(img/fellow-performers.svg); background-color: #faf9f3; }
.segment.mentors-for-good .preview h4::before {background-image: url(img/mentors-for-good.svg); background-color: #fffff3; }
.segment.niche-entertainers .preview h4::before {background-image: url(img/niche-entertainers.svg); background-color: #f3f3ff; }
.segment.conscious-lifestyle .preview h4::before {background-image: url(img/conscious-lifestyle.svg); background-color: #fdf1eb; }
.segment.icons .preview h4::before {background-image: url(img/icons.svg); background-color: #fff3d7; }
.segment.popstars .preview h4::before {background-image: url(img/popstars.svg); background-color: #e9cde5; }

.segment .close-up {z-index: 200; display: none; position: absolute; width: 100%; left: 0; padding: 40px 40px; background: #fff; box-shadow: 0 3px 5px #0003; border-radius: 10px; }
.segment.opened .close-up {display: block; }
.segment .close-up .inner-content {padding: 0; position: relative; min-height: 216px; }
.segment .close-up .inner-content:first-child {padding-left: 248px; }

.segment .close-up h4 {font-size: 1.5rem; font-weight: 700; }
.segment .close-up p {font-weight: 600; margin: 18px 0; }
.segment .close-up .list {font-weight: 400; font-size: .875rem; margin: 18px 0; }
.segment .close-up .list b {font-weight: 700; }
.segment .close-up .variables {display: flex; flex-flow: wrap; justify-content: space-between; align-items: center;}
.segment .close-up .variable {flex: 0 0 30%; display: flex; flex-flow: row; justify-content: space-between; gap: 40px; align-items: center; }
.segment .close-up .variable .label {flex: 0 1 auto; font-weight: 500; }
.segment .close-up .variable .value {flex: 1 0 auto; font-weight: 600; color: #616EF7; }



.segment .close-up .inner-content:first-child:before {content: ''; display: block; position: absolute; left: 0; top: 0; width: 216px; height: 216px; border-radius: 5px; background-position: center; background-repeat: no-repeat; background-size: 55%; }
.segment.soulmates .close-up .inner-content:first-child::before {background-image: url(img/soulmates.svg); background-color: #f0f9fd; }
.segment.advisors .close-up .inner-content:first-child::before {background-image: url(img/advisors.svg); background-color: #f5fcf4; }
.segment.trendsetters .close-up .inner-content:first-child::before {background-image: url(img/trendsetters.svg); background-color: #ffd1d1; }
.segment.aspirational-role-models .close-up .inner-content:first-child::before {background-image: url(img/aspirational-role-models.svg); background-color: #f4f3f3; }
.segment.fellow-performers .close-up .inner-content:first-child::before {background-image: url(img/fellow-performers.svg); background-color: #faf9f3; }
.segment.mentors-for-good .close-up .inner-content:first-child::before {background-image: url(img/mentors-for-good.svg); background-color: #fffff3; }
.segment.niche-entertainers .close-up .inner-content:first-child::before {background-image: url(img/niche-entertainers.svg); background-color: #f3f3ff; }
.segment.conscious-lifestyle .close-up .inner-content:first-child::before {background-image: url(img/conscious-lifestyle.svg); background-color: #fdf1eb; }
.segment.icons .close-up .inner-content:first-child::before {background-image: url(img/icons.svg); background-color: #fff3d7; }
.segment.popstars .close-up .inner-content:first-child::before {background-image: url(img/popstars.svg); background-color: #e9cde5; }

@media (max-width: 840px){
    .explore .segment {flex: 0 0 100%; }
}
@media (max-width: 1000px){
    .segment .close-up .variable {gap: 20px; }
}
@media (max-width: 900px){
    .segment .close-up .variables {gap: 10px; }
    .segment .close-up .variable {flex: 0 0 100%; }
    .segment .close-up .variable .label br {display: none; }
}
@media (max-width: 700px){
    .segment .close-up .inner-content {padding: 212px 10px 0 10px; min-height: 0; }
    .segment .close-up .inner-content::before {width: 180px; height: 180px; left: 50%; transform: translate3d(-50%,0,0);}
}
@media (max-width: 500px){
    .segment .preview h4 {padding-left: 50px; }
    .segment .close-up .variable {flex-flow: wrap; }
    .segment .close-up {padding: 40px 10px; }
}


/* AGE FEMALE RATIO */
.age-female-ratio {position: relative; z-index: 2000; clear: left; padding-top: 50px !important; }
/* .age-female-ratio {padding-top: 0; padding-bottom: 0; background: none; box-shadow: none; } */
.age-female-ratio .charts {display: flex; flex-flow: row; justify-content: space-between; align-items: stretch; }
.age-female-ratio .charts > *:first-child {flex: 0 1 60%; max-width: 60%; }
.age-female-ratio .charts > *:last-child {flex: 0 1 30%; max-width: 30%; }

@media (max-width: 1000px){
    .age-female-ratio .charts {flex-flow: column; justify-content: space-between; gap: 40px; align-items: center; }
    .age-female-ratio .charts > * {flex: 1 0 50% !important; max-width: 100% !important; max-height: 430px; }
}

.brands {display: flex; flex-flow: wrap; justify-content: flex-start; align-items: center; gap: 8px; }
.brands .label {margin-right: 5px; font-weight: 600; }
.brands .tag.brand {display: inline-block; padding: 6px 8px; font-size: .875rem; font-weight: 500; color: #fff; background: #585E64; border-radius: 8px; }


/* INFLUENCER DETAIL */
.influencer .content {flex: 0 0 100%; margin-bottom: 0; }
.influencer .influencers-list .influencer {padding-left: 0; padding-right: 0; background: none; border: none; }
body.influencer .influencer .header {position: relative; }
body.influencer .indexes {padding-right: 40px; }
.influencer .indexes a.download {display: block; position: absolute; left: 100%; top: 0; width: 40px; height: 40px; background: #E3ECEF; border-radius: 50%; transform: translate3d(-50%,-30%,0); }
.influencer .indexes a.download:before, .influencer .indexes a.download:after {display: block; position: absolute; left: 50%; top: 55%; transform: translate3d(-50%,-50%,0); }
.influencer .indexes a.download::before {content: url('img/download.svg'); }
.influencer .indexes a.download::after {content: url('img/download-salmon.svg'); opacity: 0; }
.influencer .indexes a.download:hover::after {content: url('img/download-salmon.svg'); opacity: 1; }

.influencer .indexes a span {display: none; position: absolute; padding: 4px 8px; border-radius: 4px; background: #0d252f; top: calc(100% + 8px); left: 50%; transform: translate3d(-50%,0,0); color: #fff; font-weight: 500; }
.influencer .indexes a:hover span {display: block; }

.influencer .btn-box {margin: 23px 0 54px 0; text-align: right; justify-content: flex-end; }
.influencer a.back {cursor: pointer; display: inline-block; text-align: right; color: #0D252F; font-size: .875rem; font-weight: 400; }
.influencer a.back::after {content: ''; position: relative; display: inline-block; top: 5px; width: 21px; height: 21px; background: #0D252F url(img/arrow.svg) no-repeat center; border: none !important; border-radius: 4px; margin-left: 6px; }
/* .influencer a.back::after {border: 3px solid #fff; border-radius: 7px; top: 7px; margin-left: 4px; } */

.influencer .content.back {padding-top: 5px; padding-bottom: 10px; box-shadow: none; background: #616EF7; display: flex; flex-flow: wrap; justify-content: flex-end; align-items: baseline; column-gap: 10%; row-gap: 5px; color: #fff; }
.influencer .content.back h3 {font-size: 1rem; font-weight: 900; text-transform: uppercase; }
.influencer .content.back a.back {color: #fff; }
.influencer .content.back a.back::after {transform: scale(-1,1); border: 3px solid #616EF7; border-radius: 7px; top: 7px; }
.influencer .content.back a.back:hover::after {border-color: #fff; }

@media (max-width: 1700px){
    .influencer .indexes a span {left: auto; right: 0; transform: translate3d(10px,0,0); }
}
@media (max-width: 1200px){
    .influencer .indexes a.download {transform: translate3d(-50%,-17%,0); }
}
@media (max-width: 700px){
    body.influencer .influencer .header {column-gap: 0; }
    body.influencer .influencer .header .name .tier {margin-right: 40px; }
}
@media (max-width: 500px){
    body.influencer .influencer .header .name .tier {margin-right: 60px; }
    .influencer .indexes a.download {left: auto; right: 0; transform: translate3d(0,-17%,0); }
}

/* LOADING */
#loading {display: none; position: fixed; opacity: 0; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 100000; background: #fff9; }
#loading > div {width: 90%; max-width: 300px; padding: 40px; /* background: #fff;  */border-radius: 10px; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0); /* box-shadow: 5px 5px 10px #0003; */ }
#loading img {display: block; margin: 0 auto; width: 60px; height: auto; }
#loading span {display: block; margin-top: 10px; }
#loading.opened {display: block; opacity: 1; animation: fade-in .45s both ease-out; }
#loader {margin: 0 auto; width: 100px; height: 100px; position: relative; }
#loader div {position: absolute; }
#loader > div {width: 4px; left: 50%; top: 0; height: 50%; transform-origin: bottom center; animation: loader 1.6s both infinite ease-out; }
#loader > div > div {width: 100%; height: 50%; background: #5D6AED; border-radius: 50px; }
#loader > div:nth-child(1) {transform: translate3d(-50%,0,0) rotate(0deg); animation-delay: 0s; }
#loader > div:nth-child(2) {transform: translate3d(-50%,0,0) rotate(22.5deg); animation-delay: .1s; }
#loader > div:nth-child(3) {transform: translate3d(-50%,0,0) rotate(45deg); animation-delay: .2s; }
#loader > div:nth-child(4) {transform: translate3d(-50%,0,0) rotate(67.5deg); animation-delay: .3s; }
#loader > div:nth-child(5) {transform: translate3d(-50%,0,0) rotate(90deg); animation-delay: .4s; }
#loader > div:nth-child(6) {transform: translate3d(-50%,0,0) rotate(112.5deg); animation-delay: .5s; }
#loader > div:nth-child(7) {transform: translate3d(-50%,0,0) rotate(135deg); animation-delay: .6s; }
#loader > div:nth-child(8) {transform: translate3d(-50%,0,0) rotate(157.5deg); animation-delay: .7s; }
#loader > div:nth-child(9) {transform: translate3d(-50%,0,0) rotate(180deg); animation-delay: .8s; }
#loader > div:nth-child(10) {transform: translate3d(-50%,0,0) rotate(202.5deg); animation-delay: .9s; }
#loader > div:nth-child(11) {transform: translate3d(-50%,0,0) rotate(225deg); animation-delay: 1.0s; }
#loader > div:nth-child(12) {transform: translate3d(-50%,0,0) rotate(247.5deg); animation-delay: 1.1s; }
#loader > div:nth-child(13) {transform: translate3d(-50%,0,0) rotate(270deg); animation-delay: 1.2s; }
#loader > div:nth-child(14) {transform: translate3d(-50%,0,0) rotate(292.5deg); animation-delay: 1.3s; }
#loader > div:nth-child(15) {transform: translate3d(-50%,0,0) rotate(315deg); animation-delay: 1.4s; }
#loader > div:nth-child(16) {transform: translate3d(-50%,0,0) rotate(337.5deg); animation-delay: 1.5s; }

@keyframes loader {
    0% {opacity: 0; }
    20% {opacity: 1; }
    80% {opacity: 0; }
    100% {opacity: 0; }
}

/* AUTOCOMPLETE */
.tab.influencer > div {z-index: 100; position: relative; }
.tab.influencer > div.tags.influencers {z-index: 200; }
.field-box.file-box {z-index: 300; }
.add-influencer-box {z-index: 400; }
.autocomplete {position: absolute; width: 100%; background: #fff; border-radius: 10px; box-shadow: 5px 5px 10px #0003; }
.autocomplete .btn {display: block; cursor: pointer; }