*,
*::before,
*::after {
    box-sizing: border-box;
}
:root {
    --body-background-color: #fefefe;
    --regular-text-color: #FFFFFF;
    --block-background-color: #466cbd;
    --db-description-background-color:  #466cbd;
    --text-block-border-color: lightgrey;
    --text-block-background-color: #FFFFFF;
    --special-text-color: #FFFFFF;
    --menu-button-background-color: #466cbd;
    --menu-link-color:  #333333;
    --border-color:  #0B4FCC;
    --btn-border-color:  slategrey;
    --donate-btn-background: gold;
    --green-btn-background: #187e04 !important;
    --blue-btn-background: #0075FF !important;
    --question-text: #333333;
    --accordion-hover: #006EF5;
    --accordion-active: #006EF5;
    --accordion-hover-border: #0B4FCC;
    --accordion-panel-bg-color: #EEF2FC;
    --sql-background-color: #eee;
    --sql-color:  #C800A4;
    --question-title-bg-color: #E8F2FE;
    --question-date-color: gray;
    --arrow-border-color: white;
}
[data-theme="dark"] {
    --body-background-color: #171B23;
    --regular-text-color: #F0F6FC;
    --question-text: #F0F6FC;
    --text-block-border-color: #484F58;
    --block-background-color: #273E74;
    --db-description-background-color:  #263E74;
    --text-block-background-color: #21262E;
    --special-text-color: #FFFFFF;
    --menu-button-background-color: #263E74;
    --menu-link-color:  #FFFFFF;
    --border-color: #484F58;
    --btn-border-color: #C9D1D9;
    --donate-btn-background: #E3B341;
    --green-btn-background:#2EA043 !important;
    --blue-btn-background: #79C0FF !important;
    --question-title-bg-color: #484F58;
    --accordion-hover: #006EF5;
    --accordion-active: #006EF5;
    --accordion-hover-border: #F0F6FC;
    --accordion-panel-bg-color: #21283A;
    --sql-background-color: #484F58;
    --sql-color:  #F85149;
    --question-date-color: #F0F6FC;
    --arrow-border-color: white;
}
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    background-color: var(--body-background-color);
    color: var(--regular-text-color);
}
.hidden {
    display: none;
}
.invisible {
    overflow: hidden;
    height: 0;
}

a, a:visited {
    text-decoration: none;
}

.container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100%;
}
main2 {
    display: grid;
    grid-template-columns: 20% 80%;
    overflow-y: auto;
}
main3 {
    display: grid;
    grid-template-columns: 20% 55% 25%;
    overflow-y: auto;
}
.column {
    padding-top: 0.7rem;
}

.column:nth-child(1) {
    /* padding-right: 0.5em; */
}

.column:nth-child(2) {
    padding: 0.7rem 1rem 0 1rem;
}

.column:nth-child(3) {
    /* padding-left: 0.5em; */
    /* overflow-y: hidden; */
}
main {
    display: grid;
    overflow-y: auto;
}
.button {
    background-color: var(--block-background-color);
    color: white;
    cursor: pointer;
    padding: 6px;
    text-align: center;
    margin: 7px 0;
    border: 1px solid var(--btn-border-color);
    border-radius: 4px;
    display: flex;
    max-width: max-content;
}

.button > span{
    line-height: 24px;
    padding: 0 5px;
}

.text-button {
    cursor: pointer;
    display: flex;
    align-items: center;
}
.mobile-container .text-button {
    font-size: small;
}
.text-button > span {
    padding: 2px;
}
.text-button.blue {
    color: #0069E6
}
.text-button.red {
    color: #E60000
}
.button.default {
    color: #8860D0;
    background-color: white;
}
.button-small {
    border: none;
    border-radius: 3px;
    cursor: pointer;
}
.button.green,
.button-small.green {
    color: white;
    background-color: #11926E;
}
.button.blue {
    background-color: var(--blue-btn-background);
}
.button.red,
.button-small.red {
    background-color: darkred;
}
.toast {
    border: 1px solid var(--text-block-border-color);
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.3s ease-out;
    min-width: 250px;
    margin-left: -125px;
    background-color: var(--db-description-background-color);
    color: #fff;
    text-align: center;
    border-radius: 3px;
    padding: 16px !important;
    position: fixed;
    z-index: 1;
    left: 47%;
    top: -90px;
}
.toast.visible {
    opacity: 100 !important;
    top: 50dvh;
    transition: opacity 0.3s ease-out, top 1s;
}
.toast.error{
    background: darkred;
}
.login-popup  {
    opacity: 0;
    transition: opacity 0.3s ease-out;
    min-height: 96px;
    background-color: var(--block-background-color);
    color: #FFFFFF;
    text-align: center;
    border-radius: 3px;
    padding: 0 !important;
    position: fixed;
    z-index: 1;
    border: 1px solid gray;
    top: -1000px;
    min-width: 300px;
    /* max-width: 320px; */
}

.container .login-popup,
.container3 .login-popup {
    width: 20%;
    left: 40%;
}
.mobile-container .login-popup {
    width: 80%;
    left: 10%;
}

.login-popup-header {
    text-align: right;
    padding: 5px 9px;
    background-color: var(--accordion-panel-bg-color);
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    margin-bottom: 12px;
    color: var(--question-text);
}

.login-popup-footer {
    font-size: smaller;
    padding: 10px;
}

.login-popup-title {
    width: 94%;
    display: inline-block;
    text-align: left;
}

.pointer-hand {
    cursor: pointer;
}
.login-buttons-wrapper {
    display: flex;
    flex-flow: wrap;
    gap: 12px;
    justify-content: center;
}
.social-login-button {
    width: 40px;
    height: 40px;
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
}
.login-popup.visible {
    top: 36% !important;
    opacity: 1;
}
.login-button {
    position: absolute;
    cursor: pointer;
}
.container .login-button {
    right: 160px;
    top: 24px;
}
.yandexLoginWrapper{
    padding: 0 !important;
}
/* .yaPersonalButtonLogo {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 5px !important;
} */

header {
    text-align: left;
    background-color: var(--block-background-color);
    padding: 0 7px 7px 7px;
    display: flex;
    flex-flow: row;
    gap: 1em;
    justify-content: space-between;
    color: var(--special-text-color);
}
header h1,
header h3 {
    display: flex;
    margin: 0;
    gap: 5px;
    flex-direction: column;
}
header a,
header a:visited {
    color: var(--special-text-color);
    text-decoration: none;
}
header .button {
    max-height: 2.4em;
    font-size: large;
}
header .button .currency {
    background-color: gold;
    border-radius: 50%;
    padding: 1px 6px;
    color: chocolate;
    margin: 0 8px 0 0;
}
header .divider {
    border-right: 1px solid silver; 
    display: block; 
    height: 85%; 
    margin-top: 0.5em;
}
.top-menu-left {
    min-width: 12.5vw; 
    display: flex; 
    flex-shrink: 0;
    align-items: center; 
    justify-content: space-between;
}
.site-name  {
    font-size: clamp(24px, 1.5vw, 32px);
}
.mobile-container .site-name  {
    font-size: 1.5em !important;
}
.site-promo {
    font-size: clamp(16px, 1vw, 20px);
    white-space: nowrap;
}
.site-name-wrapper {
    display: flex;
    justify-content: space-evenly;
    padding-right: 0.5rem;
    font-size: 1.5em;
    font-size: clamp(10px, 0.9vw, 14px);
}
.mobile-container .site-promo {
    font-size: small;
}
.top-menu-center {
    display: flex;
    padding-top: 0.3em;
}
.top-menu-buttons {
    /* min-width: 16rem; */
    display: flex;
    justify-content: end;
    align-items: center;
    padding-top: 0.5em;
    column-gap: 0.5rem;
}
.site-description {
    font-size: clamp(10px, 1vw, 14px);
}
.top-menu-buttons.mobile button {
    font-size: large; 
    min-width: 48px; 
    min-height: 44px; 
    display: flex;
}
.login-menu {
    position: absolute;
    top: 105%;
    right: 0px;
    padding: 10px;
    z-index: 1000;
    width: 240px;
    background-color: var(--accordion-panel-bg-color);
    border: 1px solid var(--text-block-border-color);
    color: var(--question-text);
    border-radius: 6px 0 6px 6px;
}
.login-option {
    border: 1px solid var(--text-block-border-color);
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    height: 52px;
    overflow-y: hidden;
    justify-items: center;
    justify-content: flex-start;
    padding: 5px 0;
    margin: 3px 0;
    align-items: center;
    background-color: black;
    color: white;
}
.achievements-popup {
    position: absolute;
    top: 100%;
    /* right: 5px; */
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px;
    z-index: 1000;
    width: 400px;
    background-color: var(--accordion-panel-bg-color);
    border: 1px solid var(--text-block-border-color);
    color: var(--question-text);
    border-radius: 6px 0 6px 6px;
}
.achievement {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: 3px;
    gap: 0.5rem;
}
.achievement span{
    min-width: 100px;
}
.achievements-popup h4 {
    margin: 0.5rem 0;
}
.top-menu-switchers {
    display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 0.7em;
}

/*Dark theme switch start*/
.theme-switch-wrapper {
	display: flex;
	align-items: center;
	position: absolute;
}
.theme-switch {
	display: inline-block;
	height: 30px;
	position: relative;
	width: 60px;
}
.theme-switch input {
	display:none;
}
.slider {
	background-color: white;
	bottom: 0;
	cursor: pointer;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: .4s;
}
.slider:before {
	background-color: var(--block-background-color);
	bottom: 3px;
	content: "";
	height: 24px;
	left: 3px;
	position: absolute;
	transition: .4s;
	width: 24px;
}
.slider .moon {
	float: right; 
	margin: 3px;
	overflow: inherit; 
	width: 18px; 
    height: 18px;
}
input:checked + .slider:before {
	background-color: var(--text-color);
}
input:checked + .slider {
	background-color: black;
	color: var(--regular-text-color);
}
input:checked + .slider:before {
	transform: translateX(26px);
}
.slider.round {
	border-radius: 34px;
	color: black;
	padding: 3px 1px;
}
.slider.round:before {
	border-radius: 50%;
}
/*Dark theme switch end*/
.lang-swith {
    display: flex; 
    column-gap: 10px; 
    min-width: 30px; 
    margin-top: 12px; 
    align-items: center; 
    justify-content: center; 
    flex-flow: rpw;
}
.container .menu .menu-content :first-child {
    border-radius: 0 6px 0 0;
}

.menu .selector {
    display: flex; 
    column-gap: 4px;
    flex-direction: column;
    justify-items: left;
    background-color: var(--db-description-background-color);
    padding: 0.5em 0;
}
.container .menu .selector {
    border-radius: 0 6px 6px 0;
}
.mobile-container .menu .selector {
    margin-bottom: 0.5rem;
}
.menu .selector .selector-options {
    display: flex;
    padding: 0.5em 1em 0.3em 0.3em;
    flex-flow: wrap;
    justify-content: space-between;
    gap: 0.5em;
}
.menu .panel {
    padding: 0;
    background-color: var(--accordion-panel-bg-color);
    color: #0071DB;
    max-height: 0;
    overflow-x: hidden;
    transition: max-height 0.2s ease-out;
    text-align: left;
    overflow-y: scroll;
}

.menu .panel ol,
.menu .panel ul {
    color: var(--menu-link-color); 
    font-size: medium;
}
.menu .panel ul {
    padding-left: 3em;
}
.menu .panel ol {
    list-style-type: none;
    padding-left: 0.5em;
}
.menu .question-number {
    display: inline-block;
    width: 2.5rem;
    min-width: 2.5rem;
    text-align: right;
}
.menu .panel a {
    color: var(--menu-link-color); 
    display: flex;
    margin: 7px 0;
    text-decoration: none;
    border-bottom: 1px solid silver;
    padding-bottom: 6px;
}
.menu .accordion {
    background-color: var(--menu-button-background-color);
    color: white;
    cursor: pointer;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    font-weight: bold;
    border-bottom: 2px solid var(--body-background-color);
    font-size: 0.9em;
}

.accordion.active {
    background-color: var(--accordion-active);
}
.accordion .accordion-icons {
    display: none;
}
.db-description .accordion {
    background-color: var(--menu-button-background-color);
    color: white;
    /* border-bottom: 1px solid white; */
    width: 100%;
    text-align: left;
    font-size: larger;
    padding: 3px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="12" width="12"><polygon points="1,4 8,7 1,11" fill="white"/></svg>');
    background-repeat: no-repeat;
    background-position: 0 9px;
    padding-left: 12px;
}
.db-description .accordion.active {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="12" width="12"><polygon points="0,4 9,4 5,11" fill="white"/></svg>') !important;
}
.db-description .accordion svg {
    margin-top: 5px;
}
.db-description .panel {
    display: none;
    background-color: var(--accordion-panel-bg-color);
    color: var(--menu-link-color);
    padding: 6px 12px;
    font-size: medium;
    margin: 0.5rem 0;
}
.db-description .panel ul {
    list-style: none;
    padding: 0;
}
.db-description .panel li {
    margin-bottom: 0.5rem;
    display: flex;
}
.db-description .panel.active {
    display: block !important;
    transition: 0.4s;
}
.accordion.active .accordion-icons {
    display: block !important;
}
.accordion:hover {
    background-color: var(--accordion-hover);
    /* border-bottom: 1px solid var(--accordion-hover-border); */
}
.accordion-title {
    padding: 9px;
}
.accordion .accordion-icons {
    padding-top: 4px;
}
.menu-content .panel.active {
    max-height: 22vh !important;
}

.user-solutions-count {
    display: flex;
    flex-direction: row;
    justify-items: center;
    margin: 0 0 12px 0;
    background-color: var(--accordion-panel-bg-color);
    border: 1px solid var(--text-block-border-color);
    color: var(--question-text);
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    column-gap: 1em;
    padding: 8px;
}

.question-wrapper {
    margin: 0 0 12px 0;
    background-color: var(--accordion-panel-bg-color);
    border: 1px solid var(--text-block-border-color);
    color: var(--question-text);
    border-radius: 6px;
    padding: 0.5em;
    line-height: 1.5rem;
}
.question-wrapper h1 {
    line-height: normal;
}
.question-wrapper table {
    border-collapse: collapse;
    border: 1px solid var(--text-block-border-color);
}
.question-wrapper th {
    background-color: var(--accordion-panel-bg-color);
    color: var(--question-text);
    border: 1px solid var(--text-block-border-color);
    padding: 5px 10px;
}
.lesson-wrapper {
    margin: 0 0 12px 0;
    background-color: var(--accordion-panel-bg-color);
    border: 1px solid var(--text-block-border-color);
    color: var(--question-text);
    border-radius: 6px;
    padding: 0.5em;
}
.lesson-wrapper p {
    line-height: 1.5rem;
}
.lesson-wrapper a,
.lesson-wrapper a:visited {
    color: var(--menu-link-color);
    text-decoration: underline;
}
.question {
    padding: 5px 15px;
    font-size: larger;
    line-height: 1.3em;
}
.question a,
.question a:visited 
.achievement a,
.achievement a:visited,
.code-result a,
.code-result a:visited {
    color: #0069E6 !important;
}
.question-action {
    font-style: italic;
    padding-left: 15px;
    font-size: smaller;
    margin: 3px 0;
}
.answers {
    padding: 5px 15px;
}
.answer {
    padding:10px;
    display: flex;
    gap: 0.5em;
}
.answer input {
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
}
.answer label {
    line-height: 20px;
}
.code-result a,
.code-result a:visited {
    color: var(--menu-link-color);
}
.code-result .result-table th,
.code-result .result-table td:nth-child(1) {
    background-color: var(--accordion-panel-bg-color);
}
.code-result .result-table td:nth-child(1) {
    width: 16px;
    text-align: right;
}
.code-result .referral-link {
    font-size:large; 
    padding: 1em; 
    border: solid 1px; 
    border-radius: 6px;
    margin-top: 2rem;
}
.question-title {
    display: flex; 
    width:100%;
    font-weight: bold;
    /* background-color: var(--question-title-bg-color); */
    padding: 6px;
}
.question-level {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: bottom;
    border-radius: 50%;
    background-color: gray;
    margin-right: 5px;
}
.question-rate-panel {
    border: 1px solid #1B9843;
    border-radius: 6px;
    padding: 16px;
    background: #327A4A33;
}
.question-rate-panel input[type="radio" i] {
    margin: -3px 8px 0 0;
    vertical-align: middle;
}
.question-rate-panel label {
    margin-right: 15px;
}
.question-level.rate1 {
    background-color: #6dd320;
}
.question-level.rate2 {
    background-color: #55a300;
}
.question-level.rate3 {
    background-color: #edbc09;
}
.question-level.rate4 {
    background-color: #cb1313;
}
.question-level.rate5 {
    background-color: #990000;
}
.question-title .question-star {
    padding: 0 0 0 6px;
    font-size: small;
    cursor: pointer;
    line-height: 17px;
}
.question-link .question-star {
    padding-left: 3px;
    font-size: xx-small;
}
.current-question {
    border-left: 0.3rem solid #11926E;
}

.current-question .question-number {
    width: 2.2rem !important;
    min-width: 2.2rem !important;
}

.question-link.solved {
    color: gray !important;
}
.question-star.favored {
    color: red;
}
.question pre {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5em;
    white-space: pre-line;
    margin: 0.5rem 0;
}
.question .attention {
    font-weight: bold;
    font-style: italic;
}

.question-title .question-dates {
    color: var(--question-date-color);
    font-size: small;
    padding-left: 20%;
}
.question-navigate {
    display: flex; 
    background-color: var(--block-background-color);  
    border-bottom: 1px solid var(--text-block-border-color); 
    border-radius: 6px;
    margin-left: 5px;
    color: white;
}
.question-navigate a {
    padding: 4px 12px;
}
.question .sql,
.answer .sql,
.code-result .sql {
    color: var(--sql-color);
    font-family: monospace;
    font-size: x-large;
}
.code-result .sql_error {
    color: red;
}
.arrow {
    display: inline-block;
    padding: 3px;
    border: solid var(--arrow-border-color);
    border-width: 0 3px 3px 0;
}

.arrow-right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.arrow-left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
.code-actions-upper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 0.5em;
}
.mobile-container .code-buttons,
.mobile-container .code-actions-upper {
    padding: 0 0.5rem;
}
.code-actions-upper > div {
    display: flex;
    flex-direction: row;
    column-gap: 1em;
}
.code-wrapper {
    border: 1px solid var(--text-block-border-color);
    border-radius: 6px;
    resize: vertical;
    min-height: 20vh;
    height: 25vh;
    max-height: 50vh;
    background-color: var(--text-block-background-color);
}
.code-buttons {
    justify-content: right;
    display: flex;
    flex-flow: row;
    margin: 0.5em 0;
    column-gap: 1em;
}

.code-buttons a {
    font-size: smaller;
}

.code-result {
    border-top: 1px solid var(--text-block-border-color);
    min-height: 28vh;
    padding: 15px;
    max-height: 50vh;
    overflow: auto;
    color: var(--question-text);
    background-color: var(--text-block-background-color);
}

.code-result .result-table,
.code-result .hint-table {
    border: 1px solid gray;
    width: 100%;
    border-collapse: collapse;
}

.code-result .result-table th,
.code-result .result-table td,
.code-result .hint-table th,
.code-result .hint-table td {
    border: 1px solid silver;
    color: var(--question-text);
    font-size: smaller;
}
.db-description {
    overflow: hidden;
    font-size: smaller;
    padding: 0 0.5em;
    background-color:var(--db-description-background-color);
}
.container .db-description {
    border-radius: 6px 0 0 0;
}
.db-description h3 {
    border-bottom: 1px solid white;
    padding-bottom: 5px;
}
.db-description .button-erd {
    display: block; 
    color: var(--db-description-background-color);
    background: url('/images/erd1.svg') no-repeat;
    background-size: contain;
    background-position-x: 5px;
    padding-left: 2rem;
    background-color: white;
    padding: 12px 0 12px 54px;
}
.db-description table {
    border-collapse: collapse;
    width: 100%;
    font-size: smaller;
}

.db-description th,
td {
    border: 1px solid var(--text-block-border-color);
    text-align: left;
    padding: 8px;
}

.db-description .sql {
    /* color: var(--special-text-color); wheat; */
    /* font-weight: bold; */
    cursor: pointer;
    font-family: monospace;
}

.db-description .accordion .sql {
    font-size: x-large;
    color: #00CED1;
    /* color: cornflowerblue; */
}
.db-description .table-columns .sql {
    font-size: large;
    color: var(--sql-color);
}
.db-description .table-columns {
    font-size: smaller;
    padding-inline: 14px;
}

.db-description .table-wrapper {
    overflow-x: auto;
    padding: 7px 0;
    margin-bottom: 1em;
}

.container .db-description .table-wrapper {
    max-width: 24vw;
}

.mobile-container .right .db-description .table-wrapper {
    max-width: 99vw;
}

.db-description a,
.db-description a:visited {
    color: white;
    /* text-decoration: none; */
    font-weight: bold;
}
.db-description .referal-add-block {
    display: flex; 
    flex-direction: row; 
    gap:5px; border: 1px solid white; 
    padding: 0.3em;
    justify-content: space-between;
    margin: 1rem 0;
}
.solutions {
    border-radius: 6px 0 0 0;
    padding: 12px;
    background-color: var(--db-description-background-color);
}
.solution-wrapper {
    margin: 0 0 12px 0;
    background-color: var(--accordion-panel-bg-color);
    border: 1px solid var(--text-block-border-color);
    color: var(--question-text);
    border-radius: 6px;
    padding: 0.5em;
}
.solution-block {
    height: 20vh;
}
.solutions-title {
    font-weight: bold;
    color: #FFFFFF;
    background-color: var(--db-description-background-color);
}
.solution-title,
.solution-footer {
    font-weight: bold;
    font-size: small;
    padding: 6px;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}
.solution-footer {
    text-align: right;
}
.likes-count {
    font-size: larger;
    border: 1px solid var(--text-block-border-color);
    color: var(--question-text);
    padding: 0 5px 5px 5px;
    border-radius: 6px;
    background-color: var(--db-description-background-color);
}
footer {
    background-color: var(--block-background-color);
    font-size: clamp(10px, 0.9vw, 14px);
}
.mobile-container footer {
    padding-top: 0.3rem;
}
.footer-links {
    display: flex;
    gap: 0.5rem 2em;
    max-height: 4rem;
    flex-flow: row wrap;
    margin-top: 5px;
    width: 100%;
    flex-direction: row;
    justify-content: center;
}
.footer-links > div,
.footer-links > div > a {
    padding: 0 10px;
    display: flex;
    align-items: center;
    column-gap: 4px;
}
.footer-links > div {
    margin-bottom: 5px;
}

footer a,
footer a:visited {
    color: white;
    display: inline-block;
}
.tg-icon {
    background-color: #64a9dc;
    height: 24px;
    display: inline-block;
    width: 24px;
    border-radius: 3px;
}
.tg-icon > span {
    display:inline-block;
    width: 24px;
    height:24px;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18.92 6.089L4.747 11.555c-.967.388-.962.928-.176 1.168l3.534 1.104 1.353 4.146c.164.454.083.634.56.634.368 0 .53-.168.736-.368.13-.127.903-.88 1.767-1.719l3.677 2.717c.676.373 1.165.18 1.333-.628l2.414-11.374c.247-.99-.378-1.44-1.025-1.146zM8.66 13.573l7.967-5.026c.398-.242.763-.112.463.154l-6.822 6.155-.265 2.833-1.343-4.116z' fill='%23FFF' fill-rule='evenodd'/%3e%3c/svg%3e");
}
.whatsup-icon {
    background-color: #25D366;
    height: 24px;
    display: inline-block;
    width: 24px;
    border-radius: 3px;
}
.whatsup-icon > span {
    display:inline-block;
    width: 24px;
    height:24px;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.029-.967-.272-.099-.47-.148-.669.15-.198.297-.767.967-.94 1.166-.173.198-.347.223-.644.075-.297-.149-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.447-.52.149-.174.198-.298.298-.497.099-.198.05-.372-.025-.521-.075-.149-.669-1.611-.916-2.206-.242-.579-.487-.5-.669-.51-.173-.008-.372-.01-.571-.01-.198 0-.52.075-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.877 1.213 3.075.149.198 2.099 3.205 5.077 4.364.71.306 1.263.489 1.695.625.712.227 1.36.195 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.288.173-1.413-.075-.124-.272-.198-.57-.347z' fill='%23FFF' fill-rule='evenodd'/%3e%3c/svg%3e");
}
.loader {
    color: #50aaFF;
    font-size: 20px;
    margin: 120px auto;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: load4 1.3s infinite linear;
    animation: load4 1.3s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

@-webkit-keyframes load4 {

    0%,
    100% {
        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
    }

    12.5% {
        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }

    25% {
        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }

    37.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }

    50% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }

    62.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
    }

    75% {
        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
    }

    87.5% {
        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
    }
}

@keyframes load4 {

    0%,
    100% {
        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
    }

    12.5% {
        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }

    25% {
        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }

    37.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }

    50% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }

    62.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
    }

    75% {
        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
    }

    87.5% {
        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
    }
}