/*

Table of Contents:

# General
# Tabs
# Tooltip
# Confirmation Tooltip
# Help Text Tooltip
# Select Input
# Radio Buttons
# Checkbox
# Buttons
# Message Box
# Channel Buttons
# Image/Video Buttons
# Ad Genders
# Budget
# Input Controls
# Overlay
# Media Gallery
# Campaign Selected Media
# Contact Us
# Profile
# Pill Input Field
# AdBuilder Required Fields
# Table
# Icons
# Confirmation Dialog
# Notifications Page
# Timetracker Page
# Preloader

*/

/* -------------------------------------------------------------------------- */
/*   # General                                                                */
/* -------------------------------------------------------------------------- */

:root {
	--main-background: #F6F5FA;
	--input-background: #F6F5FA;
	--input-light:  #E8EAEC;
	--main-highlight: #000;
	--button-deemphasis: #262829;
	--sub-background: #2C3134;
	--white: #ffffff;
	--font-footnote: #828282;
}

html {
	display: flex;
	flex-direction: column;
	font-size: 14px;
}

html, body {
	background: var(--main-background);
	margin: 0;
	min-height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	flex-grow: 1;
}

hr {
	border: 1px solid #eee;
}

p {
	margin-top: 0;
	margin-bottom: 1rem;
}

* {
	font-family: 'Poppins', sans-serif;
}

/*
    TODO: Remove this and make accessible fields
*/
*:focus {
	outline:0;
}

.ss-wrap {
	display: flex;
	flex-grow: 1;
}

.ss-app {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	border-top: 1px solid #ddd;
	padding: 2em;
	background: #F6F5FA;
}

.ss-sidebar {
	background: var(--sub-background);
	width: 15em;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
}

.ss-sidebar-link {
	display: flex;
	height: 6em;
	align-items: center;
	justify-content: flex-start;
	color: #fff;
	text-transform: uppercase;
	font-weight: 800;
	font-size: 0.85em;
	padding-left: 2em;
	border-left: 2px solid var(--sub-background);
	text-decoration: none;
}

.ss-sidebar-link-small {
	display: flex;
	height: 3em;
	align-items: center;
	justify-content: flex-start;
	color: #fff;
	font-weight: 400;
	font-size: 0.7em;
	padding-left: 8em;
	border-left: 2px solid var(--sub-background);
	text-decoration: none;
}

.ss-sidebar-link-small p {
	margin: 0;
}

.ss-sidebar-select-container {
	position: relative;
	padding-left: 4em;
}

.ss-sidebar-select-container:after {
	position: absolute;
	content: "";
	top: 7px;
	right: 11px;
	width: 10px;
	height: 10px;
	border-left: 3px solid var(--main-highlight);
	border-bottom: 3px solid var(--main-highlight);
	transform: rotate(-45deg);
}

.ss-sidebar-select {
	border: none;
	background: none;
	color: #fff;
	appearance: none;
	cursor: pointer;
	width: 100%;
}

.ss-sidebar-active {
	border-left: 2px solid var(--main-highlight);
}

.ss-sidebar-icon {
	width: 2em;
	height: 2em;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 1em;
}

.ss-sidebar-icon-account {
	background-image: url(/img/account_circle.svg);
}

.ss-sidebar-active .ss-sidebar-icon-account {
	background-image: url(/img/account_circle_light.svg);
}

.ss-sidebar-icon-contact {
	background-image: url(/img/location.svg);
}

.ss-sidebar-active .ss-sidebar-icon-contact {
	background-image: url(/img/location_light.svg);
}

.ss-sidebar-icon-work {
	background-image: url(/img/work.svg);
}

.ss-sidebar-active .ss-sidebar-icon-work {
	background-image: url(/img/work_light.svg);
}

.ss-sidebar-icon-campaign {
	background-image: url(/img/campaign.svg);
}

.ss-sidebar-active .ss-sidebar-icon-campaign {
	background-image: url(/img/campaign_light.svg);
}

.ss-sidebar-icon-insights {
	background-image: url(/img/insights.svg);
}

.ss-sidebar-active .ss-sidebar-icon-insights {
	background-image: url(/img/insights_light.svg);
}

.ss-sidebar-icon-admin {
	background-image: url(/img/settings.svg);
}

.ss-sidebar-active .ss-sidebar-icon-admin {
	background-image: url(/img/settings_light.svg);
}

.ss-topbar {
	background: #fff;
	height: 5em;
	display: flex;
	justify-content: space-between;
}

.ss-headline-steps {
	width: 60em;
}

.ss-pages {
	display: flex;
	flex-wrap: wrap;
}

.ss-page {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 20em;
	box-sizing: border-box;
	padding: 3em;
	margin: 0 2em 2em 0;
}

.ss-page h2 {
	font-weight: 800;
	text-transform: uppercase;
}

.ss-page-columns {
	display: flex;
	flex-direction: row;
}

.ss-page-columns > * {
	flex: 1;
}

.ss-page-nav {
	display: flex;
	width: 100%;
	justify-content: flex-end;
	align-items: center;
}

.ss-page-nav .ss-select-label {
	margin-left: 1em;
}

.ss-page-nav .ss-select {
	background:  var(--input-light);
}

.ss-page-nav .ss-button {
	margin-left: 1em;
}

.ss-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.ss-header input[type="text"] {
	background: #fff;
}

.ss-header .ss-button {
	width: initial;
}

.ss-topbar-handle {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--main-highlight);
	width: 15em;
}

.ss-flex-spacer {
	flex: 1;
}

.ss-login {
	width: 30em;
	display: flex;
	margin: 10em auto;
	padding: 3em;
	background: #fff;
	border-radius: 1em;
}

.ss-login form {
	width: 100%;
}

.ss-login h1 {
	margin: 0 0 1em 0;
}

.ss-login-logo {
	width: 100%;
	height: 8em;
	margin: 0 auto 3em;
	background-image: url(/img/logo.svg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

/*****
 * Cards
 */
.ss-page-card {
	background: #FFF;
	min-height: 20em;
	border-radius: 0.5em;
	box-sizing: border-box;
	padding: 3em;
	box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.04);
	width: 60em;
	margin: 2em;
}

.ss-page-card h2 {
	font-size: 0.9em;
	font-weight: 800;
	text-transform: uppercase;
}

.ss-page-card h3 {
	font-size: 1em;
	color: #999;
}

.ss-card-form-row {
    display: flex;
    margin: 1em 0;
}

.ss-card-form-collapse-top {
	margin-top: 0;
}

.ss-card-form-collapse-bottom {
	margin-bottom: 0;
}

.ss-card-form-col {
    width: 50%;
    box-sizing: border-box;
	padding: 0 0.8em;
    margin: 0 0 0 0.8em;
    display: flex;
    flex-direction: column;
    position: relative;
	align-items: flex-start;
}

.ss-card-form .ss-full-row > .ss-card-form-col {
	justify-content: center;
	flex: 0;
}

.ss-full-row > .ss-card-form-col:first-child {
	flex: 1;
}

.ss-card-form-singleline {
	flex-direction: row;
	align-items: center;
}

.ss-infotext {
	font-style: italic;
	color: #aaa;
	font-size: 0.9em;
}

.ss-profile-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 1em;
}

.ss-profile-info p {
	margin: 0;
	line-height: 1.3em;
}

.ss-profile-name {
	font-weight: 800;
}

.ss-profile-role {
	color: #aaa;
}

.ss-headline-steps {
	display: flex;
	justify-content: space-between;
	margin: 0.5em 0 3em 0;
}

.ss-headline-steps h1 {
	flex: 1;
}

.ss-headline-steps .ss-headline-anchor {
	flex: 1;
}

.ss-steps {
	display: flex;
	align-items: center;
}

.ss-step {
	width: 2.5em;
	height: 2.5em;
	background: #F6F5FA;
	border: 2px solid #FFF;
	border-radius: 3em;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 800;
}

.ss-step-active {
	border: 2px solid #f0502f;
}

.ss-step-done {
	color: #FFF;
	background: #f0502f;
	border: 2px solid #f0502f;
}

.ss-step-line-inactive {
	width: 5em;
	height: 2px;
	background: #FFF;
}

.ss-step-line-active {
	width: 5em;
	height: 2px;
	background: #f0502f;
}

.ss-welcome {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 5em;
}

.ss-welcome h2 {
	text-transform: uppercase;
	font-weight: 600;
	font-size: 1em;
	margin: 2em 0;
}

.ss-welcome input.ss-input {
	background: #fff;
}

.ss-welcome .ss-button {
	width: 100%;
}

.ss-logo {
	width: 14em;
	height: 4em;
	background-image: url(/img/logo_white_3.svg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.ss-dashboard {
	flex: 1;
    outline: 0;
    border: 0;
}

.ss-preview-page {
	background: #FFF;
	width: 100%;
	min-height: 20em;
	border-radius: 0.5em;
	box-sizing: border-box;
	padding: 3em 2em;
	box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.04);
	width: 35em;
	position: sticky;
	top: 1em;
}

.ss-preview-page h2 {
	font-size: 0.9em;
	font-weight: 800;
	text-transform: uppercase;
	color: #999;
}

.ss-preview-buttons {
	display: flex;
	background: var(--input-background);
	border-radius: 1em;
	margin: 2em 0;
}

.ss-preview-button {
	width: 10em;
	padding: 0.8em;
	color: #000;
	text-align: center;
	cursor: pointer;
	flex: 1;
}

.ss-input {
	box-sizing: border-box;
}

.ss-input[type="text"] {
	border: none;
	background: var(--input-background);
	padding: 0.8em 1em;
	color: #000;
	border-radius: 0.4em;
	width: 100%;
}

.ss-input[type="email"] {
	border: none;
	background: var(--input-background);
	padding: 0.8em 1em;
	color: #000;
	border-radius: 0.4em;
	width: 100%;
}

.ss-input[type="password"] {
	border: none;
	background: var(--input-background);
	padding: 0.8em 1em;
	color: #000;
	border-radius: 0.4em;
	width: 100%;
}

.ss-input[type="number"] {
	border: none;
	background: var(--input-background);
	padding: 0.8em 1em;
	color: #000;
	border-radius: 0.4em;
	width: 100%;
}

.ss-input[type="date"] {
	border: none;
	background: var(--input-background);
	padding: 0.8em 1em;
	color: #000;
	border-radius: 0.4em;
	width: 100%;
}

.ss-input[type="date"]::-webkit-calendar-picker-indicator {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 2em;
	height: auto;
	color: transparent;
	background: transparent;
	cursor: pointer;
	z-index: 9999;
}
.ss-input[type="date"]::-webkit-inner-spin-button, 
.ss-input[type="date"]::-webkit-outer-spin-button { 
	z-index: 9999;
}

.ss-input-span {
	position: relative;
	flex: 1;
}

.ss-input-span:after {
	content: ' ';
	width: 1em;
	height: 1em;
	background-image: url(/img/calendar.svg);
	display: block;
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 1em;
	right: 1em;
}

.ss-input-span .ss-input[type="date"] {
	padding-right: 2em;
}

.ss-input-date {
	margin-right:  1em;
}

.ss-input-time {

}

.ss-adbuilder-form {
	/*width: 60em;*/
	/*font-size: 0.9em;*/
}

.ss-adbuilder-preview {
	width: 35em;
}

.ss-textarea {
	border: none;
	background: var(--input-background);
	padding: 0.5em 1em;
	color: #000;
	border-radius: 0.4em;
	width: 100%;
	box-sizing: border-box;
}

.ss-card-form-label {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-end;
	text-align: right;
	color: #999;
	align-items: end;
}

.ss-form-label-center {
	align-items: center;
}

.ss-card-form-twonums {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.ss-card-form-twonums .ss-input[type="number"] {
	flex: 1;
	min-width: 0;
}

.ss-card-form-twonums .ss-input-divider {
	margin: 1em;
}

.ss-campaign-published {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.ss-campaign-published h1 {
	font-weight: 400;
	text-align: center;
	font-size: 1.7em;
}

.ss-campaign-published img {
	margin: 4em;
}

.ss-no-campaigns {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ss-no-campaigns h1 {
	font-weight: 400;
	text-align: center;
	font-size: 1.7em;
}

.ss-no-campaigns img {
	margin: 4em;
}

.ss-topbar-userinfo {
	display: flex;
	align-items: center;
	position: relative;
	cursor: pointer;
}

.ss-profile-picture {
	background-color: #aaa;
	background-image: none;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	width: 4em;
	height: 4em;
	border-radius: 4em;
}

.ss-profile-notify:after {
	content: ' ';
	width: 1.2em;
	height: 1.2em;
	position: absolute;
	bottom: 0;
	right: 0;
	border: 3px solid #fff;
	background: #f00;
	border-radius: 100%;
}

.ss-profile-menu {
	position: absolute;
	top: 100%;
	right: 1em;
	width: 10em;
	background: #fff;
	border-left: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-radius: 0 0 1em 1em;
	padding: 1em;
	box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.04);
	display: none;
}

.ss-menu-open {
	display: block;
}

.ss-footnote {
	color: var(--font-footnote);
	font-style: italic;
}

/* -------------------------------------------------------------------------- */
/*   # Tabs                                                                   */
/* -------------------------------------------------------------------------- */

.ss-tab-container {
	display: flex;
	flex-direction: row;
	flex: 1;
	align-content: space-between;
}

.ss-tab {
	cursor: pointer;
	display: flex;
	position: relative;
	padding: 0.5em 2em;
	border-top: 4px solid #00000000;
	border-bottom: 1px solid #ddd;
	font-weight: 600;
	color: var(--main-highlight);
	border-radius: 0.5em 0.5em 0 0;
}

.ss-tab:hover {
	background-color: #eee;
}

.ss-tab-active {
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-top: 4px solid var(--main-highlight);
	border-bottom: 1px solid #00000000;
	color: #000;
}

/* -------------------------------------------------------------------------- */
/*   # Tooltip                                                                */
/* -------------------------------------------------------------------------- */

.ss-tooltip {
	display: none;
	position: absolute;
	width: 20em;
	background: #fff;
	padding: 1em;
	border-radius: 0.5em;
	box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
	color: #707372;
	font-size: 0.9em;
}

.ss-tooltip:before {
	width: 100%;
	height: 3px;
	border-radius: 0.5em 0.5em 0 0;
	position: absolute;
	top: 0;
	left: 0;
	background: var(--main-highlight);
	display: block;
	content: ' ';
}

.ss-tooltip:after {
	display: block;
	content: ' ';
	position: absolute;
	top: -6px;
	left: 20px;
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid var(--main-highlight);
}

/* -------------------------------------------------------------------------- */
/*   # Confirmation Tooltip                                                   */
/* -------------------------------------------------------------------------- */

.ss-confirm {
	top: 1227px;
	left: 648px;
	display: flex;
	justify-content: center;
	text-align: center;
	flex-direction: column;
}

.ss-tooltip.ss-confirm:after {
	left: initial;
	right: 20px;
}

.ss-confirm .ss-button,  .ss-confirm .ss-button-reg {
	width: 6em;
	min-width: 0;
	margin: 1em;
}

/* -------------------------------------------------------------------------- */
/*   # Help Text Tooltip                                                      */
/* -------------------------------------------------------------------------- */

.ss-hint {
	width: 1.2em;
	height: 1.2em;
	background: #ddd;
	color: #fff;
	border-radius: 2em;
	margin-top: 0.2em;
	margin-left: 0.5em;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 800;
	flex-shrink: 0;
	cursor: pointer;
}

.ss-hint-active {
	background: var(--main-highlight);
}

/* -------------------------------------------------------------------------- */
/*   # Select Input                                                           */
/* -------------------------------------------------------------------------- */

.ss-select {
	border: none;
	background: #F6F5FA;
	padding: 0.8em 1em;
	color: #000;
	border-radius: 0.4em;
	width: 100%;
	appearance: none;
}

.ss-select-alt {
	background: #fff;
}

.ss-select-label {
	position: relative;
	width: 100%;
	margin: 0;
}

.ss-select-label-small {
	width: 20em;
	margin-right: 1em;
}

.ss-select-fit {
	width: auto;
}

.ss-select-label:after {
	position: absolute;
	content: "";
	top: 10px;
	right: 15px;
	width: 10px;
	height: 10px;
	border-left: 3px solid var(--main-highlight);
	border-bottom: 3px solid var(--main-highlight);
	transform: rotate(-45deg);
}

.ss-select-year {
	width: 5em;
}

.ss-select-month {
	width: 4em;
}

.ss-select-day {
	width: 4em;
}

.ss-select-hour {
	width: 4em;
}

.ss-select-minute {
	width: 4em;
}

/* -------------------------------------------------------------------------- */
/*   # Radio Buttons                                                          */
/* -------------------------------------------------------------------------- */

.ss-radio-group {
	margin-top: 0.8em;
}

.ss-radio {
	display: flex;
}

.ss-radio-check {
	background: #F6F5FA;
	width: 1.5em;
	height: 1.5em;
	display: inline-block;
	border-radius: 1.5em;
	margin-right: 0.5em;
	display: flex;
	justify-content: center;
	align-items: center;
}

.ss-radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
}

.ss-radio-check:after {
	content: "";
	display: none;
}

.ss-radio input[type="radio"]:checked ~ .ss-radio-check:after {
	display: block;
}

.ss-radio .ss-radio-check:after {
	background: var(--main-highlight);
	width: 0.8em;
	height: 0.8em;
	border-radius: 1em;
}

/* -------------------------------------------------------------------------- */
/*   # Checkbox                                                               */
/* -------------------------------------------------------------------------- */

.ss-checkbox {
	display: flex;
	width: 100%;
	margin-top: 0.5em;
}

.ss-checkbox-check {
	background: #F6F5FA;
	width: 1.5em;
	height: 1.5em;
	display: inline-block;
	border-radius: 0.5em;
	margin-right: 0.5em;
	display: flex;
	justify-content: center;
	align-items: center;
}

.ss-checkbox input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
}

.ss-checkbox-check:after {
	content: "";
	display: none;
}

.ss-checkbox input[type="checkbox"]:checked ~ .ss-checkbox-check:after {
	display: block;
}

.ss-checkbox .ss-checkbox-check:after {
	background: var(--main-highlight);
	width: 0.8em;
	height: 0.8em;
	border-radius: 0.2em;
}

/* -------------------------------------------------------------------------- */
/*   # Buttons                                                                */
/* -------------------------------------------------------------------------- */

.ss-page-buttons {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.ss-page-buttons .ss-button, .ss-page-buttons .ss-button-reg {
	margin: 0.5em;
}

.ss-ads-buttons .ss-button {
	padding: 1em 0;
	width: inherit;
	margin: 0.5em;
}

.ss-button {
	min-width: 10em;
	padding: 0.8em;
	border: 2px solid var(--main-highlight);
	border-radius: 0.5em;
	background: var(--main-highlight);
	color: #fff;
	margin: 1em 0;
	font-weight: 800;
	white-space: nowrap;
	cursor: pointer;
}

.ss-button:disabled {
	border: 2px solid #AFAFAF;
	background: #AFAFAF;
	color: #fff;
	box-shadow: 0px 2px 2px #AFAFAF40;
	cursor: default;
}

.ss-button-reg {
	width: 10em;
	padding: 0.8em;
	border: 2px solid var(--main-highlight);
	border-radius: 0.5em;
	background: #fff;
	color: #000;
	box-shadow: 0px 2px 2px #f0502f40;
	margin: 1em 0;
}

.ss-button-deemphasis {
	border: 2px solid var(--button-deemphasis);
	background-color: var(--button-deemphasis);
}

.ss-button-mini {
	width: 2em;
	height: 2em;
	padding: 0;
	margin: 0;
	min-width: 0;
}

/* -------------------------------------------------------------------------- */
/*   # Message Box                                                            */
/* -------------------------------------------------------------------------- */

.ss-top-message {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	display: none;
	transition: top 0.5s;
}

.ss-top-message-box {
	width: 50%;
	height: 4em;
	background: #fff;
	text-align: center;
	border-radius: 0 0 0.2em 0.2em;
	box-shadow: 0px 2px 2px #00000040;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ss-top-message-box p {
	margin: 0;
}

/* -------------------------------------------------------------------------- */
/*   # Channel Buttons                                                        */
/* -------------------------------------------------------------------------- */

.ss-ad-channels {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 0.5em;
}

.ss-ad-select {
	height: 20ex;
	border: 1px solid #aaa;
	border-radius: 0.7em;
	margin: 1em;
	flex-grow: 1;
	font-weight: 800;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	cursor: pointer;
	flex-basis: 0;
}

.ss-ad-select-selected {
	border: 1px solid var(--main-highlight);
	box-shadow: 0px 2px 2px #f0502f40;
}

.ss-ad-select-tick {
	display: none;
}

.ss-ad-select-selected .ss-ad-select-tick {
	display: flex;
	width: 1.5em;
	height: 1.5em;
	background: var(--main-highlight);
	border-radius: 5em;
	position: absolute;
	top: -0.75em;
	right: -0.75em;
	justify-content: center;
	align-items: center;
}

.ss-ad-select-tick:after {
	content: " ";
	height: 1em;
	width: 0.5em;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
	margin: -0.1em -0.1em 0 0;
}

.ss-ad-select-icon {
	width: 3em;
	height: 3em;
	margin: 1em;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

.ss-ad-select:first-child {
	margin-left: 0;
}

.ss-ad-select:last-child {
	margin-right: 0;
}

/* -------------------------------------------------------------------------- */
/*   # Image/Video Buttons                                                    */
/* -------------------------------------------------------------------------- */

.ss-ad-imgvids {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.ss-ad-imgvids .ss-ad-select {
	height: 17ex;
	border: 1px solid #aaa;
	border-radius: 0.7em;
	margin: 1em;
	flex: 1;
	font-weight: 800;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	cursor: pointer;
}

.ss-ad-imgvids .ss-ad-select-selected {
	border: 1px solid var(--main-highlight);
	box-shadow: 0px 2px 2px #f0502f40;
}

.ss-ad-imgvids .ss-ad-select-tick {
	display: none;
}

.ss-ad-imgvids .ss-ad-select-selected .ss-ad-select-tick {
	display: flex;
	width: 1.5em;
	height: 1.5em;
	background: var(--main-highlight);
	border-radius: 5em;
	position: absolute;
	top: -0.75em;
	right: -0.75em;
	justify-content: center;
	align-items: center;
}

.ss-ad-imgvids .ss-ad-select-tick:after {
	content: " ";
	height: 1em;
	width: 0.5em;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
	margin: -0.1em -0.1em 0 0;
}

.ss-ad-imgvids .ss-ad-select-icon {
	width: 7em;
	height: 7em;
	margin: 1em;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

.ss-ad-imgvids .ss-ad-select:first-child {
	margin-left: 0;
}

.ss-ad-imgvids .ss-ad-select:last-child {
	margin-right: 0;
}

/* -------------------------------------------------------------------------- */
/*   # Ad Genders                                                             */
/* -------------------------------------------------------------------------- */

.ss-ad-genders {
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
}

.ss-ad-genders .ss-ad-select {
	height: 3em;
	color: #aaa;
}

.ss-ad-genders .ss-ad-select p {
	margin: 0;
}

.ss-ad-select-selected p {
	color: #000;
}

/* -------------------------------------------------------------------------- */
/*   # Budget                                                                 */
/* -------------------------------------------------------------------------- */

.ss-ad-budget {
	display: flex;
	flex-direction: row;
}

.ss-ad-budget *:nth-child(n) {
	margin: 0 0.5em;
}

.ss-ad-budget *:first-child {
	margin: 0 0.5em 0 0;
}

.ss-ad-budget *:last-child {
	margin: 0 0 0 0.5em;
}

.ss-ad-budget .ss-input[type="number"] {
	min-width: 0;
}

.ss-select-budget-currency {
	flex-basis: 40%;
}

/* -------------------------------------------------------------------------- */
/*   # Input Controls                                                         */
/* -------------------------------------------------------------------------- */

.ss-ads-controls {
	width: 2em;
	margin-left: 1em;
}

.ss-ads-controls-add {
	width: 32px;
	height: 32px;
	border-radius: 0.6em;
	border: 2px solid var(--main-highlight);
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.ss-ads-controls-add:before {
	content: " ";
	position: absolute;
	display: block;
	height: 2px;
	width: 14px;
	background: var(--main-highlight);
	transform: rotate(0deg);
}

.ss-ads-controls-add:after {
	content: " ";
	position: absolute;
	display: block;
	height: 2px;
	width: 14px;
	background: var(--main-highlight);
	transform: rotate(90deg);
}

.ss-ads-controls-delete {
	width: 2em;
	height: 2em;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.ss-ads-controls-delete:before {
	content: " ";
	position: absolute;
	display: block;
	height: 16px;
	width: 2px;
	background: #aaa;
	transform: rotate(45deg);
}

.ss-ads-controls-delete:after {
	content: " ";
	position: absolute;
	display: block;
	height: 16px;
	width: 2px;
	background: #aaa;
	transform: rotate(-45deg);
}

/* -------------------------------------------------------------------------- */
/*   # Overlay                                                                */
/* -------------------------------------------------------------------------- */

.ss-overlay {
	width: 100%;
	height: 100%;
	background: #00000080;
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	z-index: 999999;
}

#ss-editor-overlay {
	padding: 3em;
}

/* -------------------------------------------------------------------------- */
/*   # Media Gallery                                                          */
/* -------------------------------------------------------------------------- */

.ss-media-gallery-overlay {
	margin: 3em;
	flex: 1;
	background: #fff;
	border-radius: 1em;
	padding: 1em;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.ss-media-overlay-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.ss-media-overlay-topbar {
	height: 5em;
	display: flex;
	align-items: center;
	margin-bottom: 1em;
	justify-content: space-between;
}

.ss-media-overlay-topbar .ss-gallery-search {
	width: 25em;
}

.ss-media-search-container {
	position: relative;
}

.ss-media-search-container:after {
	content: ' ';
	width: 1.2em;
	height: 1.2em;
	background-image: url(/img/search.svg);
	display: block;
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 1em;
	right: 1em;
}

.ss-media-controls-container {
	display: flex;
	align-items: center;
}

.ss-media-controls-container .ss-select-label {
	width: 35em;
	margin: 1em;
}
.ss-media-controls-container .ss-select-label select {
	padding-right: 2em;
}

.ss-media-overlay-files {
	flex: 1;
	border-radius: 0.5em;
	background: #eee;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	overflow-x: hidden;
	overflow-y: scroll;
}

.ss-media-overlay-file {
	margin: 0.5em 1em;
	display: flex;
	flex-direction: column;
	width: 7em;
}

.ss-media-overlay-file-icon {
	width: 7em;
	height: 7em;
	background: #666;
	border-radius: 0.5em;
	background-size: cover;
	background-position: center center;
}

.ss-media-overlay-file p {
	width: 100%;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ss-media-overlay-file-selected .ss-media-overlay-file-icon {
	border: 1px solid var(--main-highlight);
	box-shadow: 0px 2px 2px #f0502f40;
	position: relative;
}

.ss-media-overlay-file-selected .ss-media-overlay-file-tick {
	display: flex;
	width: 1.5em;
	height: 1.5em;
	background: var(--main-highlight);
	border-radius: 5em;
	position: absolute;
	top: -0.5em;
	right: -0.5em;
	justify-content: center;
	align-items: center;
}

.ss-media-overlay-file-selected .ss-media-overlay-file-tick:after {
	content: " ";
	height: 1em;
	width: 0.5em;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
	margin: -0.1em -0.1em 0 0;
}

.ss-media-overlay-controls {
	display: flex;
	justify-content: space-evenly;
}

.ss-media-gallery-details-popup {
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.ss-media-gallery-details-popup .ss-popup-dialog {
	flex-direction: row;
	justify-content: space-between;
	width: 80em;
}

.ss-media-details {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	padding-left: 1em;
}

.ss-media-details-table {
	width: 100%;
}

.ss-media-details-table tr td {
	text-align: left;
	padding: 0.5em;
	height: 4em;
}

.ss-media-details-table tr td:first-child {
	text-align: right;
	white-space: nowrap;
}

.ss-media-buttons {
	justify-content: space-between;
	display: flex;
	align-content: flex-end;
}

.ss-media-display {
	width: 66%;
	height: 50vh;
}

.ss-media-display > * {
	border-radius: 0.5em;
	max-width: 100%;
	max-height: 100%;
	margin: auto;
}

/* -------------------------------------------------------------------------- */
/*   # Campaign Selected Media                                                */
/* -------------------------------------------------------------------------- */

.ss-ad-media-files {
	flex: 1;
	border-radius: 0.5em;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
}

.ss-ad-viewer .ss-ad-media-files {
	flex-direction: row;
}

.ss-media-file {
	margin: 0.5em;
	display: flex;
	flex-direction: column;
	width: 7em;
}

.ss-media-file-icon {
	width: 7em;
	height: 7em;
	background: #666;
	border-radius: 0.5em;
	background-size: cover;
	background-position: center center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.ss-media-file p {
	width: 100%;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ss-media-file .ss-media-file-icon {
	position: relative;
}

.ss-media-file .ss-media-file-remove {
	display: flex;
	width: 1.5em;
	height: 1.5em;
	position: absolute;
	top: 0;
	right: 0;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.ss-media-file .ss-media-file-remove:before {
	content: " ";
	height: 16px;
	width: 2px;
	background: #fff;
	transform: rotate(45deg);
	margin: -0.1em -0.1em 0 0;
}

.ss-media-file .ss-media-file-remove:after {
	content: " ";
	height: 16px;
	width: 2px;
	background: #fff;
	transform: rotate(-45deg);
	margin: -0.1em -0.1em 0 0;
}

/* -------------------------------------------------------------------------- */
/*   # Contact Us                                                             */
/* -------------------------------------------------------------------------- */

.ss-contact-page {
	background: #fff;
	max-width: 60em;
	margin: 4em auto;
	padding: 3em;
	border-radius: 1em;
	box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.04);
}

.ss-contact-page .ss-card-form-col {
	flex: 1;
	padding-right: 0;
}

.ss-contact-page .ss-card-form-label {
	width: 10em;
	flex: initial;
}

.ss-right-align {
	display: flex;
	justify-content: flex-end;
}

/* -------------------------------------------------------------------------- */
/*   # Profile                                                                */
/* -------------------------------------------------------------------------- */

.ss-profile-page .ss-pages {
	flex-wrap: wrap;
}

.ss-profile-page .ss-ads-page {
	width: 50em;
	margin-bottom: 2em;
	height: 0%;
}

.ss-profile-page .ss-card-form-col {
	flex: 1;
}

.ss-profile-page .ss-card-form-label {
	width: 15em;
	flex: none;
}

.ss-profile-page .ss-page-buttons {
	justify-content: flex-end;
}

.ss-profile-page .ss-page-header {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
}

.ss-edit-profile-picture {
	width: 8em;
	height: 8em;
	background: #eee;
	border-radius: 3em;
	position: relative;
	cursor: pointer;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.ss-edit-profile-picture:after {
	width: 3em;
	height: 3em;
	background: var(--main-highlight);
	border-radius: 100%;
	content: ' ';
	position: absolute;
	top: -1em;
	right: -1em;
	background-image: url(/img/edit.svg);
	background-size: 1.5em;
	background-repeat: no-repeat;
	background-position: center center;
}

/* -------------------------------------------------------------------------- */
/*   # Pill Input Field                                                       */
/* -------------------------------------------------------------------------- */

.ss-input-plain {
	background: none;
	padding: 0;
	border: none;
	flex: 1 0 50%;
	min-width: 50%;
	margin: 0 0.5em 0.8em;
}

.ss-input-pills {
	border: none;
	background: #F6F5FA;
	padding: 0.8em 1em 0;
	color: #000;
	border-radius: 0.4em;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin: 0;
}

.ss-input-pill {
	background: #ddd;
	border-radius: 1em;
	padding: 0 0 0 1em;
	white-space: nowrap;
	margin: 0 0.5em 0.8em;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.ss-input-pill-remove {
	width: 1em;
	height: 1em;
	margin: 0 0.5em;
	background: url(/img/cancel_pill.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
}

.ss-input-pill-dropdown {
	position: absolute;
	top: 100%;
	left: 0.8em;
	right: 0.8em;
	background: #fff;
	box-shadow: 0px 1px 1px #00000010;
	border-radius: 0 0 1em 1em;
	z-index: 9999;
	display: none;
	overflow: hidden;
}

.ss-input-pill-dropdown-item {
	padding: 1em;
	cursor: pointer;
}

.ss-input-pill-dropdown-item:hover {
	background: #eee;
}

/* -------------------------------------------------------------------------- */
/*   # AdBuilder Required Fields                                              */
/* -------------------------------------------------------------------------- */

.ss-required-text {
	position: absolute;
	width: 15em;
	z-index: 999;
	background: #f00;
	border-radius: 0 0.5em 0.5em 0;
	box-shadow: 0px 2px 2px #00000020;
	color: #fff;
	position: absolute;
	top: 0;
	left: 100%;
	font-weight: 500;
	border: 2px solid #f00;
	bottom: 0;
	align-content: center;
	justify-content: center;
	align-items: center;
	display: none;
}

.ss-input-container {
	position: relative;
	width: 100%;
}

/* ----------------------------- */
/* Reqired Text Input            */
/* ----------------------------- */
.ss-required-field[data-type="text"] .ss-required-text {
	display: flex;
}

.ss-required-field[data-type="text"] .ss-input {
	box-shadow: inset 0px 0px 0px 2px #f00;
	border-radius: 0.4em 0 0 0.4em;
}

/* ----------------------------- */
/* Reqired Dropdown Input        */
/* ----------------------------- */
.ss-required-field[data-type="dropdown"] .ss-required-text {
	display: flex;
}

.ss-required-field[data-type="dropdown"] .ss-select {
	box-shadow: inset 0px 0px 0px 2px #f00;
	border-radius: 0.4em 0 0 0.4em;
}

/* ----------------------------- */
/* Reqired Textarea Input        */
/* ----------------------------- */
.ss-required-field[data-type="textarea"] .ss-required-text {
	display: flex;
	max-height: 3em;
}

.ss-required-field[data-type="textarea"] .ss-textarea {
	box-shadow: inset 0px 0px 0px 2px #f00;
	border-radius: 0.4em 0 0 0.4em;
}

/* ----------------------------- */
/* Reqired Radio Input           */
/* ----------------------------- */
.ss-required-field[data-type="radio"] .ss-required-text {
	display: flex;
	max-height: 3em;
}

.ss-required-field[data-type="radio"] .ss-input-container {
	box-shadow: inset 0px 0px 0px 2px #f00;
	border-radius: 0.4em 0 0 0.4em;
}

/* ----------------------------- */
/* Reqired Channels Input        */
/* ----------------------------- */
.ss-required-field[data-type="channels"] .ss-required-text {
	display: flex;
	max-height: 3em;
}

.ss-required-field[data-type="channels"] .ss-input-container {
	box-shadow: inset 0px 0px 0px 2px #f00;
	border-radius: 0.4em 0 0 0.4em;
}

/* ----------------------------- */
/* Reqired Budget Input          */
/* ----------------------------- */
.ss-required-field[data-type="budget"] .ss-required-text {
	display: flex;
}

.ss-required-field[data-type="budget"] .ss-input-container:after {
	display: block;
	pointer-events: none;
	content: ' ';
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute;
	box-shadow: inset 0px 0px 0px 2px #f00;
	border-radius: 0.4em 0 0 0.4em;
}

/* ----------------------------- */
/* Reqired Daterange Input       */
/* ----------------------------- */
.ss-required-field[data-type="daterange"] .ss-required-text {
	display: flex;
}

.ss-required-field[data-type="daterange"] .ss-input-container:after {
	display: block;
	pointer-events: none;
	content: ' ';
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute;
	box-shadow: inset 0px 0px 0px 2px #f00;
	border-radius: 0.4em 0 0 0.4em;
}

/* ----------------------------- */
/* Reqired Numrange Input        */
/* ----------------------------- */
.ss-required-field[data-type="numrange"] .ss-required-text {
	display: flex;
}

.ss-required-field[data-type="numrange"] .ss-input-container:after {
	display: block;
	pointer-events: none;
	content: ' ';
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute;
	box-shadow: inset 0px 0px 0px 2px #f00;
	border-radius: 0.4em 0 0 0.4em;
}

/* ----------------------------- */
/* Reqired Location Input        */
/* ----------------------------- */
.ss-required-field[data-type="location"] .ss-required-text {
	display: flex;
}

.ss-required-field[data-type="location"] .ss-input-container:after {
	display: block;
	pointer-events: none;
	content: ' ';
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute;
	box-shadow: inset 0px 0px 0px 2px #f00;
	border-radius: 0.4em 0 0 0.4em;
}

/* ----------------------------- */
/* Reqired Channels Input        */
/* ----------------------------- */
.ss-required-field[data-type="some_types"] .ss-required-text {
        display: flex;
        max-height: 3em;
}

.ss-required-field[data-type="some_types"] .ss-input-container {
        box-shadow: inset 0px 0px 0px 2px #f00;
        border-radius: 0.4em 0 0 0.4em;
}

/* ----------------------------- */
/* File upload progressbar       */
/* ----------------------------- */

.ss-media-file-progress {

}

/* -------------------------------------------------------------------------- */
/*   # Table                                                                  */
/* -------------------------------------------------------------------------- */

.ss-table {
	width: 100%;
	margin: 2em 0;
	border-collapse: collapse;
}

.ss-table thead {
	border-bottom: 2px solid var(--main-highlight);
}

.ss-table thead th {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.8em;
	padding: 0 1em;
	text-align: left;
}

.ss-table tbody td {
	padding: 1em;
}

.ss-table tbody td:last-child {
	text-align: right;
}

.ss-table-plain tbody td:last-child {
	text-align: left;
}

.ss-table tbody tr td {
	background: #fff;
	border-bottom: 1px solid #D0D3D4;
}

.ss-table tbody tr:nth-child(2n) td {
	background: #F6F5FA;
}

.ss-table tbody td a {
	color: #707372;
	text-decoration: underline;
}

/* -------------------------------------------------------------------------- */
/*   # Icons                                                                  */
/* -------------------------------------------------------------------------- */

.ss-icon {
	width: 2ch;
	height: 2ch;
	display: inline-block;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	vertical-align: middle;
	cursor: pointer;
}

.ss-icon-edit {
	background-image: url(/img/icon_edit.svg);
}

.ss-icon-remove {
	background-image: url(/img/icon_remove.svg);
}

.ss-icon-active {
	width: 0.7em;
	height: 0.7em;
	border-radius: 100%;
	background: #84C446;
	display: inline-block;
	margin: 0 0.5em;
}

.ss-icon-paused {
	width: 0.7em;
	border-left: 0.3em solid #FEC324;
	border-right: 0.3em solid #FEC324;
	height: 0.7em;
	display: inline-block;
	margin: 0 0.5em;
}

.ss-icon-draft {
	width: 0.8em;
	height: 0.8em;
	background-image: url(/img/draft.svg);
	display: inline-block;
	margin: 0 0.5em;
	background-size: contain;
	background-repeat: no-repeat;
}

.ss-icon-tick {
	width: 0.8em;
	height: 0.8em;
	background-image: url(/img/tick.svg);
	display: inline-block;
	margin: 0 0.5em;
	background-size: contain;
	background-repeat: no-repeat;
}

.ss-icon-inactivetick {
	width: 0.8em;
	height: 0.8em;
	background-image: url(/img/inactive_tick.svg);
	display: inline-block;
	margin: 0 0.5em;
	background-size: contain;
	background-repeat: no-repeat;
}

.ss-icon-deleted {
	width: 1em;
	height: 1em;
	background-image: url(/img/icon_remove.svg);
	display: inline-block;
	margin: 0 0.4em;
	background-size: contain;
	background-repeat: no-repeat;
}

.ss-icon-delete {
	width: 1.5em;
	height: 1.5em;
	background-image: url(/img/icon_remove.svg);
	display: inline-block;
	margin: -0.25em;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}

.ss-icon-delete:hover {
	background-image: url(/img/icon_remove_2.svg);
}

.ss-status-paused {
	color: #FEC324;
	cursor: pointer;
}

.ss-status-active {
	color: #84C446;
	cursor: pointer;
}

.ss-status-draft {
	cursor: pointer;
}

.ss-status-deleted {
	color: #d0d3d4;
	cursor: pointer;
}

.ss-change-status {
	position: absolute;
	background: #fff;
	border-radius: 1em;
	box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
	display: none;
	flex-direction: column;
	padding: 1em;
}

.ss-hidden {
	display: none;
}

.ss-visible {
}

/* -------------------------------------------------------------------------- */
/*   # Confirmation Dialog                                                    */
/* -------------------------------------------------------------------------- */

.ss-confirmation-popup {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.ss-popup-dialog {
	background: #FFF;
	width: 100%;
	min-height: 20em;
	border-radius: 0.5em;
	box-sizing: border-box;
	padding: 3em;
	box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.04);
	width: 60em;
	margin-right: 2em;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}

.ss-popup-close {
	width: 3em;
	height: 3em;
	display: inline-block;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	vertical-align: middle;
	cursor: pointer;
	background-image: url(/img/cancel_pill.svg);
	position: absolute;
	top: 1em;
	right: 1em;
}

.ss-popup-buttons {
	display: flex;
	justify-content: space-evenly;
}

.ss-helptext-table {
	width: 75%;
	margin: 0 auto;
}

.ss-helptext-table thead {
	font-size: 0.9em;
	font-weight: 800;
	text-transform: uppercase;
}

.ss-helptext-table tr td:first-child {
	text-align: right;
	vertical-align: top;
}

.ss-helptext-table td {
	width: 50%;
	white-space: normal;
	padding: 1em;
}

.ss-adbuilder-page .ss-page-buttons {
	justify-content: center;
}

/* -------------------------------------------------------------------------- */
/*   # Notifications Page                                                     */
/* -------------------------------------------------------------------------- */

.ss-notifications-page .ss-page-buttons {
	justify-content: flex-end;
}

.ss-dashboard-table {
	display: flex;
	flex-direction: column;
}

.ss-dashboard-row {
	display: flex;
	align-items: center;
	flex-direction: row;
	margin: 0.5em 0;
}

.ss-dashboard-col {
	display: flex;
	align-items: center;
	flex-direction: row;
}

.ss-dashboard-col p
{
	margin: 0 1em;
}

.ss-dashboard-table .ss-ads-controls-add {
	margin: 0 1em;
}

/* -------------------------------------------------------------------------- */
/*   # Timetracker Page                                                       */
/* -------------------------------------------------------------------------- */

.ss-timetracking-page .ss-page {
	flex-direction: row;
	flex-wrap: wrap;
}

.ss-timetracking-page .ss-page-card {
	width: 45em;
}

.ss-timetracking-page .ss-card-form-col:first-child {
	width: 10em;
}
.ss-timetracking-page .ss-card-form-col:last-child {
	flex: 1;
}

.ss-table-time td {
	white-space: nowrap;
	vertical-align: top;
}

.ss-table-time .ss-table-time-description {
	white-space: normal;
}

/* -------------------------------------------------------------------------- */
/*   # Preloader                                                              */
/* -------------------------------------------------------------------------- */

.ss-campaigns-table-preloader-row {
	display: none;
}

.ss-campaigns-table tbody .ss-campaigns-table-preloader-row td {
	background: initial;
}

.ss-campaigns-table-preloader {
	height: 10em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--sub-background);
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}