/* Layouts v.1 */

/* root 
var(--main-blue);
*/

* {
    padding: 0;
    margin: 0;
}

b {
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
}

:root {
    --main-grey: #808284;
    --main-blue: #03A9F4;
}

.lfloat {
    float: left;
}

.rfloat {
    float: right;
}

body,
html {
    box-sizing: border-box;
    font-family: 'Roboto', arial, sans-serif;
    font-weight: 400;
}

.body_index {
    margin-top: 11px;
    margin-bottom: 11px;
    background-color: #ebeff1;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

#main {
    float: left;
    width: 300px;
    height: 100%;
    background-color: #374046;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

#fixed {
    margin: 0 auto;
    width: 1300px;
    height: 100%;
    min-height: 640px;
    border-radius: 3px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

/* Navbar left */

[class^=mad-icon-] {
    display: inline-block;
    vertical-align: top;
    border-radius: 50%;
    background: #2d343a 50% / cover;
    color: #fff;
}

.mad-icon-24 {
    width: 24px;
    height: 24px;
}

.mad-icon-32 {
    width: 32px;
    height: 32px;
}

.mad-icon-40 {
    width: 40px;
    height: 40px;
}

ul.sidebar__list {
    display: table;
    width: 100%;
    padding: 8px 0;
    /* 8 padding T/B */
    margin: 0;
    list-style: none;
}

ul.sidebar__list li {
    display: table-row;
    height: 48px;
}

ul.sidebar__list li>* {
    display: table-cell;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

ul.sidebar__list li>*:first-child {
    padding-left: 16px;
}

ul.sidebar__list li>*:last-child {
    padding-right: 16px;
}

ul.sidebar__list .mad-list-icon {
    width: 72px;
}

ul.sidebar__list .sidebar__list-text {}

ul.sidebar__list .sidebar__list-icon-secundary {
    padding-left: 16px;
    width: 1px;
    text-align: center;
}

.sidebar-hover {
    cursor: pointer;
    color: #fff;
}

.sidebar-hover:hover {
    background-color: #2d343a;
    color: #fff;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.sidebar-ueb {
    padding: 11px 16px 0px 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    color: #fff;
}

.mobile-only {
    display: none;
}

.desktop-only {}

.logo-objekt {
    height: 32px;
}

/* Login */

.login__samebody {
    font-family: 'Roboto', sans-serif;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    margin: 0px;
    justify-content: center;
    background-color: #2196f3;
}

.login__main {
    width: 1000px;
    min-width: 1000px;
    height: 700px;
    min-height: 600px;
    border-radius: 3px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    background-color: #ebeff1;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.login__picture {
    width: calc(100% / 10 * 4);
    min-width: calc(100% / 10 * 4);
    float: left;
    height: 100%;
    border-radius: 8px 0px 0px 8px;
}

.login__picture .login__stage {
    background-image: url(http://<?php echo $_SERVER['SERVER_NAME']; ?>/image/3.jpg);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-position-x: 50%;
    height: 100%;
    border-radius: 8px 0px 0px 8px;
}

.login__overlay {
    height: 100%;
    background-color: rgba(235, 239, 241, 0.15);
}

.login__picture .login__stage .login__logo {
    height: calc(100% / 10 * 8);
}

.login__picture .login__stage .login__logo img {
    height: 50px;
    left: 22px;
    top: 22px;
    position: relative;
}

.login__picture .login__stage .login__promotext {
    height: calc(100% / 10 * 2);
    color: white;
    padding: 22px;
    box-sizing: border-box;
}

.login__page {
    width: calc(100% / 10 * 6);
    float: right;
    height: 100%;
    border-radius: 0px 8px 8px 0px;
    background-color: #ebeff1;
    color: #808284;
}

.login__page .header {
    height: 50px;
}

.login__body {
    height: 590px;
    overflow-x: auto;
}

@media screen and (max-width: 1350px) {
    .body_index {
        margin-top: 11px;
        margin-bottom: 11px;
        background-color: #ebeff1;
        font-family: 'Roboto', sans-serif;
    }
    #main {
        float: left;
        width: 72px;
        height: 100%;
        background-color: #374046;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
    }
    #main__admin {
        float: left;
        width: 72px;
        height: 100%;
        background-color: #ebeff1;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
    }
    #fixed {
        margin: 0 auto;
        width: 1072px;
        height: 100%;
        min-height: 640px;
        border-radius: 3px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        border-bottom-right-radius: 6px;
        border-bottom-left-radius: 6px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }
    /* Navbar left */
    [class^=mad-icon-] {
        display: inline-block;
        vertical-align: top;
        border-radius: 50%;
        background: #2d343a 50% / cover;
        color: #fff;
    }
    .mad-icon-24 {
        width: 24px;
        height: 24px;
    }
    .mad-icon-32 {
        width: 32px;
        height: 32px;
    }
    .mad-icon-40 {
        width: 40px;
        height: 40px;
    }
    ul.sidebar__list {
        display: table;
        width: 100%;
        padding: 8px 0;
        /* 8 padding T/B */
        margin: 0;
        list-style: none;
    }
    ul.sidebar__list li {
        display: table-row;
        height: 48px;
    }
    ul.sidebar__list li>* {
        display: table-cell;
        margin: 0;
        padding: 0;
        vertical-align: middle;
    }
    ul.sidebar__list li>*:first-child {
        padding-left: 16px;
    }
    ul.sidebar__list li>*:last-child {
        padding-right: 16px;
    }
    ul.sidebar__list .mad-list-icon {
        width: 72px;
    }
    ul.sidebar__list .sidebar__list-text {
        display: none;
    }
    ul.sidebar__list .sidebar__list-icon-secundary {
        padding-left: 16px;
        width: 1px;
        text-align: center;
        display: none;
    }
    .sidebar-hover {
        cursor: pointer;
        color: #fff;
    }
    .sidebar-hover:hover {
        background-color: #ebeff1;
        color: #2d343a;
    }
    .sidebar-ueb {
        display: none;
    }
    .mobile-only {
        display: inherit;
    }
    .desktop-only {
        display: none;
    }
    .logo-objekt {
        height: 32px;
        width: 50px;
    }
    /* Login */
    .login__samebody {
        font-family: 'Roboto', sans-serif;
        display: flex;
        align-items: unset;
        height: 100%;
        width: 100%;
        margin: 0px;
        justify-content: center;
        background-color: #ebeff1;
    }
    .login__main {
        width: 100%;
        min-width: 1000px;
        height: 100%;
        min-height: 600px;
        border-radius: 3px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        background-color: #ebeff1;
        border-bottom-right-radius: 6px;
        border-bottom-left-radius: 6px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }
    .login__picture {
        width: calc(100% / 10 * 4);
        min-width: calc(100% / 10 * 4);
        float: left;
        height: 100%;
        border-radius: 4px 0px 0px 4px;
    }
    .login__picture .login__stage {
        background-image: url(http://<?php echo $_SERVER['SERVER_NAME']; ?>/image/3.jpg);
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        background-position-x: 50%;
        height: 100%;
        border-radius: 4px 0px 0px 4px;
    }
    .login__overlay {
        height: 100%;
        background-color: rgba(235, 239, 241, 0.15);
    }
    .login__picture .login__stage .login__logo {
        height: calc(100% / 10 * 8);
    }
    .login__picture .login__stage .login__logo img {
        height: 50px;
        left: 22px;
        top: 22px;
        position: relative;
    }
    .login__picture .login__stage .login__promotext {
        height: calc(100% / 10 * 2);
        color: white;
        padding: 22px;
        box-sizing: border-box;
    }
    .login__page {
        width: calc(100% / 10 * 6);
        float: right;
        height: 100%;
        border-radius: 0px 4px 4px 0px;
        background-color: #ebeff1;
        color: #808284;
    }
    .login__page .header {
        height: 50px;
    }
    .login__body {
        height: calc(100% - 113px);
        overflow-x: auto;
    }
    .login__body_iap {
        height: calc(100% - 100px);
        overflow-x: auto;
    }
}

@media screen and (max-width: 1100px) {
    .body_index {
        margin-top: 11px;
        margin-bottom: 11px;
        background-color: #ebeff1;
        font-family: 'Roboto', sans-serif;
    }
    #main {
        float: left;
        width: 72px;
        height: 100%;
        background-color: #374046;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
    }
    #main__admin {
        float: left;
        width: 72px;
        height: 100%;
        background-color: #ebeff1;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
    }
    #fixed {
        margin: 0 auto;
        width: 1072px;
        height: 100%;
        min-height: 640px;
        border-radius: 3px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        border-bottom-right-radius: 6px;
        border-bottom-left-radius: 6px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }
    /* Navbar left */
    [class^=mad-icon-] {
        display: inline-block;
        vertical-align: top;
        border-radius: 50%;
        background: #2d343a 50% / cover;
        color: #fff;
    }
    .mad-icon-24 {
        width: 24px;
        height: 24px;
    }
    .mad-icon-32 {
        width: 32px;
        height: 32px;
    }
    .mad-icon-40 {
        width: 40px;
        height: 40px;
    }
    ul.sidebar__list {
        display: table;
        width: 100%;
        padding: 8px 0;
        /* 8 padding T/B */
        margin: 0;
        list-style: none;
    }
    ul.sidebar__list li {
        display: table-row;
        height: 48px;
    }
    ul.sidebar__list li>* {
        display: table-cell;
        margin: 0;
        padding: 0;
        vertical-align: middle;
    }
    ul.sidebar__list li>*:first-child {
        padding-left: 16px;
    }
    ul.sidebar__list li>*:last-child {
        padding-right: 16px;
    }
    ul.sidebar__list .mad-list-icon {
        width: 72px;
    }
    ul.sidebar__list .sidebar__list-text {
        display: none;
    }
    ul.sidebar__list .sidebar__list-icon-secundary {
        padding-left: 16px;
        width: 1px;
        text-align: center;
        display: none;
    }
    .sidebar-hover {
        cursor: pointer;
        color: #fff;
    }
    .sidebar-hover:hover {
        background-color: #ebeff1;
        color: #2d343a;
    }
    .sidebar-ueb {
        display: none;
    }
    .mobile-only {
        display: inherit;
    }
    .desktop-only {
        display: none;
    }
    .logo-objekt {
        height: 32px;
        width: 50px;
    }
}

#middle {
    float: left;
    width: 1000px;
    height: 100%;
    background-color: #fff;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* Bildschirmgrößen */

.container {
    margin: 0 auto;
    max-width: 1280px;
    width: 90%;
}

@media only screen and (min-width: 601px) {
    .container {
        width: 85%;
    }
}

@media only screen and (min-width: 993px) {
    .container {
        width: 70%;
    }
}

/* Scrolbar */

::-webkit-scrollbar {
    width: 3px;
    height: 10px;
}

::-webkit-scrollbar-button {
    width: 3px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.16);
    border: 0px none rgba(255, 255, 255, 0);
    border-radius: 50px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.16);
}

::-webkit-scrollbar-thumb:active {
    background: rgba(0, 0, 0, 0.16);
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0);
    border: 0px none rgba(255, 255, 255, 0);
    border-radius: 0px;
}

::-webkit-scrollbar-track:hover {
    background: rgba(255, 255, 255, 0);
}

::-webkit-scrollbar-track:active {
    background: rgba(255, 255, 255, 0);
}

::-webkit-scrollbar-corner {
    background: transparent;
    width: 0px;
}

/* Header */

.head-brand {
    height: 42px;
    width: 100%;
    background-color: #2d343a;
    color: #fff;
    text-align: center;
    font-size: 24px;
    font-family: 'Pacifico', cursive;
    border-top-left-radius: 6px;
}

.head-middle {
    height: 42px;
    width: 100%;
    background-color: #2d343a;
    color: #fff;
    border-top-right-radius: 6px;
}

.head-friends {
    height: 75px;
    max-height: 75px;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 1000px;
    max-width: 1000px;
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

/* Placeholder */

.main__placehold {
    height: 16px;
}



/* Profile Tooltip */

.profile__tooltip {
    position: relative;
    display: inline-block;

    margin-left: 16px;
    line-height: 16px;
    font-size: 14px;
    font-weight: 500;
    color: #808284;
    padding-bottom: 2px;
}

.profile__tooltip .text {
    cursor: pointer;
}

.profile__tooltip .profile__tooltip__text {
    visibility: hidden;
    width: 360px;
    background-color: #ffffff;
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
    color: #fff;
    border-radius: 6px;
    
    /* Position the profile__tooltip */
    position: absolute;
    z-index: 1;
    top: calc(100% + 0px);
    left: 50%;
    margin-left: -50px;
}

.profile__tooltip:hover .profile__tooltip__text {
    visibility: visible;
}


.profile__tooltip .profile__tooltip__text::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 25px;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #808284
     transparent;
}

.profile__tooltip__cover {
    border-radius: 6px 6px 0px 0px; 
    background-image: linear-gradient(to right, #03A9F4 0%, #55caff 100%);
  }
  
  .profile__tooltip__cover__position {
    height: 200px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
  }
  
  .profile__tooltip__propic {
    z-index: 2; 
    border: 2px solid #fff; 
    height: 100px ; 
    width: 100px;
    border-radius: 100px; 
    background-size: cover; 
    background-position: center bottom;
  }


  
/* Tooltip */

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    display: flex;
    align-items: center;
    padding-right: 11px;
    color: var(--main-grey);
    text-align: center;
    border-radius: 6px;
    cursor: default;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    height: 32px;
    top: 0px;
    right: 100%;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

/* Tooltip Other */

.tooltip_other {
    position: relative;
    display: inline-block;
}

.tooltip_other .tooltiptext {
    visibility: hidden;
    display: flex;
    align-items: center;
    padding-left: 11px;
    color: var(--main-grey);
    text-align: center;
    border-radius: 6px;
    cursor: default;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    height: 32px;
    top: 0px;
    left: 100%;
}

.tooltip_other:hover .tooltiptext {
    visibility: visible;
}

/* Hit or Shit */

.hitorshit {
    height: calc(50px - 0px);
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    display: block;
}

.hitorshit_left {
    display: block;
    text-align: left;
    float: left;
    height: calc(50px - 2px);
    width: calc(100% / 3 * 2);
    display: flex;
    align-items: center;
    padding-left: 11px;
}

.hitorshit_right {
    display: block;
    text-align: left;
    float: right;
    height: calc(50px - 2px);
    width: calc(100% / 3 * 1);
    display: flex;
    align-items: center;
    padding-right: 11px;
}
/* HitorShit Buttons*/






.hitorshit-card__supporting-text {
    width: 100%;
    padding: 0;
}

.hitorshit-function-horizontal-alternative .hitorshit-function-step {
    width: calc(100% / 5);
    /* 100 / no_of_steps */
}

/* Begin actual hitorshit-function css styles */

.hitorshit-function-horizontal-alternative {
    display: table;
    width: 100%;
    margin: 0 auto;
}

.hitorshit-function-horizontal-alternative .hitorshit-function-step {
    display: table-cell;
    position: relative;
    padding: 11px;
    cursor: pointer;
}

.hitorshit-function-horizontal-alternative .hitorshit-function-step:hover,
.hitorshit-function-horizontal-alternative .hitorshit-function-step:active {
    background-color: rgba(0, 0, 0, .06);
}

.hitorshit-function-horizontal-alternative .hitorshit-function-step:active {
    border-radius: 15% / 75%;
}

.hitorshit-function-horizontal-alternative .hitorshit-function-step:first-child:active {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.hitorshit-function-horizontal-alternative .hitorshit-function-step:nth-child(2) {
    background-color: #ffffff00;
}

.hitorshit-function-horizontal-alternative .hitorshit-function-step:last-child:active {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.hitorshit-function-horizontal-alternative .hitorshit-function-step .hitorshit-function-circle {
    width: 24px;
    height: 24px;
    margin: 0 auto;
    background-color: transparent;
    border-radius: 50%;
    text-align: center;
    line-height: 2em;
    font-size: 12px;
    color: #808284;
}

.hitorshit-function-horizontal-alternative .hitorshit-function-step:hover .hitorshit-function-circle {
    background-color: transparent;
}

.hitorshit-function-horizontal-alternative .hitorshit-function-step.step-done .hitorshit-function-circle:before {
    content: "\2714";
}

.hitorshit-function-horizontal-alternative .hitorshit-function-step.step-done .hitorshit-function-circle *,
.hitorshit-function-horizontal-alternative .hitorshit-function-step.editable-step .hitorshit-function-circle * {
    display: none;
}

.hitorshit-function-horizontal-alternative .hitorshit-function-step.editable-step .hitorshit-function-circle {
    -moz-transform: scaleX(-1);
    /* Gecko */
    -o-transform: scaleX(-1);
    /* Opera */
    -webkit-transform: scaleX(-1);
    /* Webkit */
    transform: scaleX(-1);
    /* Standard */
}

.hitorshit-function-horizontal-alternative .hitorshit-function-step .hitorshit-function-title {
    font-size: 12px;
    font-weight: 500;
}

.hitorshit-function-horizontal-alternative .hitorshit-function-step .hitorshit-function-title,
.hitorshit-function-horizontal-alternative .hitorshit-function-step .hitorshit-function-optional {
    text-align: center;
    color: var(--main-grey);
}

/* Ratingbar Hit or Shit */

.ratingbar {
    position: relative;
    height: 4px;
    display: block;
    width: 100%;
    background-color: #795548;
    border-radius: 2px;
    background-clip: padding-box;
    overflow: hidden;
}

.ratingbar .determinate {
    position: absolute;
    background-color: inherit;
    top: 0;
    bottom: 0;
    background-color: #4CAF50;
    transition: width .3s linear;
}

/* Rating Umfrage */

.mkpost-umfrage {
    text-transform: uppercase;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 11px;
    padding-bottom: 11px;
    font-size: 25px;
    font-weight: 300;
    height: 300px;
    text-align: center;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: left;
}

.vote__openedit__div {
    white-space: normal;
    text-decoration: none;
    display: flex;
    height: 300px;
    align-items: center;
    align-items: none;
    padding: 11px;
    text-align: left;
}

.vote__openedit__text__ueb {
    margin-bottom: 11px;
    font-size: 25px;
    line-height: 25px;
    font-weight: 500;
    width: 500px;
}

.vote__openedit__text {
    font-size: 15px;
    font-weight: normal;
    line-height: 15px;
    white-space: normal;
    margin-bottom: 4px;
}

.ratingbar_umfrage {
    position: relative;
    height: 50px;
    display: block;
    width: 100%;
    background-color: #374046;
    border-radius: 2px;
    background-clip: padding-box;
    overflow: hidden;
    margin-bottom: 11px;
}

.ratingbar_umfrage .determinate {
    position: absolute;
    background-color: inherit;
    top: 0;
    bottom: 0;
    background-color: var(--main-blue);
    transition: width .3s linear;
}

.umfrage_prozent {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: 6px;
}

.umfrage_prozent_kreis {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ebeff1 50% / cover;
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: var(--main-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Chat Main */

.chat-history {
    height: 350px;
    overflow-y: auto;
    padding: 20px;
}

.chat_history_10048 {
    height: calc(100% - 48px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    background-color: #fff;
}

.chat_history_100100 {
    height: calc(100% - 95px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    background-color: #fff;
}

.chat-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 6px;
}

.chat-item img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.chat-item--me {}

.chat-item--me .message {
    margin-left: 10px;
    max-width: 450px;
}

.chat__date {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
}

.chat__date .message {
    margin-right: 10px;
    width: auto;
    max-width: 450px;
    cursor: context-menu;
}

.chat__time__text {
    font-size: 14px;
    color: var(--main-grey);
    font-weight: 500;
}

.chat-item--other {
    display: flex;
    justify-content: flex-end;
    width: auto;
}

.chat-item--other .message {
    margin-right: 10px;
    width: auto;
    max-width: 450px;
    cursor: context-menu;
}

.message {
    padding: 8px 16px;
    border-radius: 18px;
    width: auto;
}

.message__user-name {
    font-size: 13px;
    font-weight: bold;
    color: #000;
}

.message__time {
    font-size: 11px;
    color: #999;
}

.message__text {
    font-size: 16px;
}

.chat__me__bubble {
    background-color: var(--main-blue);
    color: #fff;
}

.chat__me__bubble a {
    color: #B3E5FC;
    text-decoration: none;
    cursor: pointer;
}

.chat__me__bubble a:hover {
    text-decoration: none;
}

.chat__other__bubble {
    background-color: #ebeff1;
    color: var(--main-grey);
}

.btns-row {
    margin-top: 5px;
}

.chat-controls {
    margin-top: 10px;
    border-top: 1px solid #ebeff1;
    padding: 20px;
    padding-top: 10px;
}

.chat-controls__textarea {
    width: 100%;
    border: none;
    border-radius: 5px;
    resize: none;
    outline: none;
}

/* List Gemeldet */

[class^=gemeldet-icon-] {
    display: inline-block;
    vertical-align: top;
    border-radius: 50%;
    background: #2d343a 50% / cover;
    color: #fff;
}

.gemeldet-icon-24 {
    width: 24px;
    height: 24px;
}

.gemeldet-icon-32 {
    width: 32px;
    height: 32px;
}

.gemeldet-icon-40 {
    width: 40px;
    height: 40px;
}

ul.gemeldet-list {
    display: table;
    width: 100%;
    padding: 8px 0;
    /* 8 padding T/B */
    margin: 0;
    list-style: none;
}

ul.gemeldet-list li {
    display: table-row;
    height: 48px;
}

ul.gemeldet-list li>* {
    display: table-cell;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

ul.gemeldet-list li>*:first-child {
    padding-left: 16px;
}

ul.gemeldet-list li>*:last-child {
    padding-right: 16px;
}

ul.gemeldet-list .gemeldet-list-icon {
    width: 72px;
}

ul.gemeldet-list .gemeldet-list-text {}

ul.gemeldet-list .gemeldet-list-icon-secundary {
    padding-left: 16px;
    width: 1px;
    text-align: center;
}

.border-bottom {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.hoverbg {
    cursor: pointer;
    color: var(--main-grey);
}

.hoverbg:hover {
    background-color: #ebeff1;
}

/* Main Header 50px */

.main__header__50 {
    height: calc(50px - 1px);
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.main__header__50 .left {
    display: block;
    text-align: left;
    float: left;
    height: calc(50px - 1px);
    width: 700px;
}

.main__header__50 .right {
    display: block;
    height: calc(50px - 1px);
    width: 300px;
}

/* mk__card */

.mk__card {
    padding-bottom: 8px;
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
    border-radius: 8px;
    background-color: #fff;
    margin-bottom: 12px;
}

.mk__card__p0 {
    padding-bottom: 0px !important;
}

.mk__card .ueb {
    height: 48px;
    line-height: 48px;
    padding-left: 16px;
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--main-grey);
}

.mk__card .ueb2 {
    height: 48px;
    line-height: 48px;
    padding-left: 16px;
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--main-grey);
}

/* Listing mit Icon */


.main__div__div {
    white-space: normal;
    color: #2d343a;
    text-decoration: none;
    display: flex;
    align-items: flex-start;
    padding: 11px;
    cursor: default;
}

.main__div__helper {
    display: block;
    width: 100%;
}

.main__div__text__ueb {
    margin-bottom: 0px;
    color: var(--main-grey);
    font-size: 15px;
    line-height: 22px;
    font-weight: 500;
}

.main__div__i {
    color: var(--main-blue);
    font-size: 20px;
    margin-right: 8px;
    margin-top: 8px;
}

.main__div__i__grey {
    color: var(--main-grey);
    font-size: 20px;
    margin-right: 8px;
    margin-top: 8px;
}

.main__div__text {
    color: #90949c;
    font-size: 15px;
    font-weight: normal;
    line-height: 15px;
    white-space: normal;
    margin-bottom: 4px;
}

/* Suche */

.main__div__suche__ebef11 {
    background-color: #ebeff1; 
    padding: 22px 6px 22px 6px; 
    margin-bottom: 11px;
}

.main__div__icon_blue {
    color: var(--main-blue) !important; 
    font-size:20px !important; 
    margin-right: 8px; 
    margin-top: 8px;
}

/* Trending Feed */

.trend__madlist__icon {
    background: #ebeff1 50% / cover !important;
    padding: 8px 8px 8px 8px;
}

.trend__madlist__icon i {
    color: #03A9F4;
}



/* Chats Bubbles */

.mk-chatchip-wrapper {
    padding: 0px;
    margin: 0px;
}

.mk-chatchip-wrapper .mk-chatchip-closed {
    float: left;
    margin-right: 10px;
    cursor: pointer;
}

.mk-chatchip-closed {
    border-radius: 36px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    height: 38px;
    width: max-content;
    padding-right: 12px;
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 36px;
    -webkit-transition: 0.2s ease;
    transition: 0.2s ease;
    list-style: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

.mk-chatchip-closed img {
    height: 36px;
    width: 36px;
    border-radius: 50%;
    float: left;
}

.mk-chatchip-closed .mk-chatchip-closed-text {
    margin-left: 8px;
    font-size: 14px;
    color: #808284;
    font-weight: 400;
}

.mk-chatchip-closed:focus {
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 1px 0px 3px rgba(0, 0, 0, 0.1), -1px 0px 3px rgba(0, 0, 0, 0.1);
}

.mk-chatchip-closed:active {
    background-color: rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.2);
}

.mk-chatchip-closed {
    background-color: #fff
}

/* Stranger Post Strangerchat */

.main__strangerchat__box {
    height: 350px;
    color: #fff;
    background-size: cover;
    background-position: center bottom;
    background-position-y: 50%;
}

.m__stranger {
    background-image: url(http://myknig.com/image/stranger_m.png);
}

.w__stranger {
    background-image: url(http://myknig.com/image/stranger_w.png);
}

.mkpost-head .left {
    display: block;
    text-align: left;
    float: left;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.mkpost-head .right {
    display: block;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Chat */

.online {
    border: 2px solid #4CAF50;
    border-radius: 50%;
}

/* idjumper Feld */

.idjumper-card {
    width: 100%;
    min-height: 0;
}

.option-card {
    width: 100%;
    min-height: 0;
    border-radius: 8px;
}

.idjumper-card__supporting-text {
    width: 100%;
    padding: 0;
}

.idjumper-function-horizontal-alternative .idjumper-function-step {
    width: calc(100% / 5);
    /* 100 / no_of_steps */
}

/* Begin actual idjumper-function css styles */

.idjumper-function-horizontal-alternative {
    display: table;
    width: 100%;
    margin: 0 auto;
}

.idjumper-function-horizontal-alternative .idjumper-function-step {
    display: table-cell;
    position: relative;
    padding: 11px;
    cursor: pointer;
}

.idjumper-function-horizontal-alternative .idjumper-function-step:hover,
.idjumper-function-horizontal-alternative .idjumper-function-step:active {
    background-color: rgba(0, 0, 0, .06);
}

.idjumper-function-horizontal-alternative .idjumper-function-step:active {
    border-radius: 15% / 75%;
}

.idjumper-function-horizontal-alternative .idjumper-function-step:first-child:active {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.idjumper-function-horizontal-alternative .idjumper-function-step:last-child:active {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.idjumper-function-horizontal-alternative .idjumper-function-step .idjumper-function-circle {
    width: 24px;
    height: 24px;
    margin: 0 auto;
    background-color: transparent;
    border-radius: 50%;
    text-align: center;
    line-height: 2em;
    font-size: 12px;
    color: #808284;
}

.idjumper-function-horizontal-alternative .idjumper-function-step:hover .idjumper-function-circle {
    background-color: transparent;
}

.idjumper-function-horizontal-alternative .idjumper-function-step.step-done .idjumper-function-circle:before {
    content: "\2714";
}

.idjumper-function-horizontal-alternative .idjumper-function-step.step-done .idjumper-function-circle *,
.idjumper-function-horizontal-alternative .idjumper-function-step.editable-step .idjumper-function-circle * {
    display: none;
}

.idjumper-function-horizontal-alternative .idjumper-function-step.editable-step .idjumper-function-circle {
    -moz-transform: scaleX(-1);
    /* Gecko */
    -o-transform: scaleX(-1);
    /* Opera */
    -webkit-transform: scaleX(-1);
    /* Webkit */
    transform: scaleX(-1);
    /* Standard */
}

.idjumper-function-horizontal-alternative .idjumper-function-step .idjumper-function-title {
    font-size: 12px;
    font-weight: 500;
}

.idjumper-function-horizontal-alternative .idjumper-function-step .idjumper-function-title,
.idjumper-function-horizontal-alternative .idjumper-function-step .idjumper-function-optional {
    text-align: center;
    color: var(--main-grey);
}

.main__tooltip {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    height: 40px;
}

.main__tooltip .main__tooltiptext__links {
    visibility: hidden;
    width: 120px;
    background-color: #808284;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: 9px;
    right: calc(100% - 10px);
}

.main__tooltip:hover .main__tooltiptext__links {
    visibility: visible;
}

.main__tooltip .main__tooltiptext__rechts {
    visibility: hidden;
    width: 120px;
    background-color: #808284;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: 9px;
    left: calc(100% - 10px);
}

.main__tooltip:hover .main__tooltiptext__rechts {
    visibility: visible;
}

[class^=mad-icon-] {
    display: inline-block;
    vertical-align: top;
    border-radius: 50%;
    background: #2d343a 50% / cover;
    color: #fff;
}

.mad-icon-24 {
    width: 24px;
    height: 24px;
}

.mad-icon-36 {
    width: 36px;
    height: 36px;
}

.mad-icon-32 {
    width: 32px;
    height: 32px;
}

.mad-icon-40 {
    width: 40px;
    height: 40px;
}

ul.mad-list {
    display: table;
    width: 100%;
    padding: 8px 0;
    /* 8 padding T/B */
    margin: 0;
    list-style: none;
}

ul.mad-list li {
    display: table-row;
    height: 48px;
}

ul.mad-list li>* {
    display: table-cell;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

ul.mad-list li>*:first-child {
    padding-left: 16px;
}

ul.mad-list li>*:last-child {
    padding-right: 16px;
}

ul.mad-list .mad-list-icon {
    /* Always left-align! Dont center icons */
    width: 72px;
}

ul.mad-list .mad-list-text {}

ul.mad-list .mad-list-icon-secundary {
    padding-left: 16px;
    width: 1px;
    text-align: center;
}

/*
		  Special classes
		  */

.border-bottom {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Post Eingabefelder */

.post-card {
    width: 100%;
    min-height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.login-option-card {
    width: 100%;
    min-height: 0;
    background-color: #fff;
    border-radius: 0px;
}

.post-card__supporting-text {
    width: 100%;
    padding: 0;
}

.post-function-horizontal-alternative .post-function-step {
    width: calc(100% / 10);
    /* 100 / no_of_steps */
}

/* Begin actual post-function css styles */

.post-function-horizontal-alternative {
    display: table;
    width: 100%;
    margin: 0 auto;
}

.post-function-horizontal-alternative .post-function-step {
    display: table-cell;
    position: relative;
    padding: 11px;
}

.post-function-horizontal-alternative .post-function-step:hover,
.post-function-horizontal-alternative .post-function-step:active {
    background-color: rgba(0, 0, 0, .06);
}

.post-function-horizontal-alternative .post-function-step:active {
    border-radius: 15% / 75%;
}

.post-function-horizontal-alternative .post-function-step:first-child:active {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.post-function-horizontal-alternative .post-function-step:last-child:active {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.center-objekt {
    display: flex;
    align-items: center;
    justify-content: center;
}
.post-function-horizontal-alternative .post-function-step .post-function-circle {
    width: 24px;
    height: 24px;
    margin: 0 auto;
    background-color: transparent;
    text-align: center;
    line-height: 2em;
    font-size: 12px;
    color: #808284;
}

.post-function-horizontal-alternative .post-function-step:hover .post-function-circle {
    background-color: transparent;
}

.post-function-horizontal-alternative .post-function-step.step-done .post-function-circle:before {
    content: "\2714";
}

.post-function-horizontal-alternative .post-function-step.step-done .post-function-circle *,
.post-function-horizontal-alternative .post-function-step.editable-step .post-function-circle * {
    display: none;
}

.post-function-horizontal-alternative .post-function-step.editable-step .post-function-circle {
    -moz-transform: scaleX(-1);
    /* Gecko */
    -o-transform: scaleX(-1);
    /* Opera */
    -webkit-transform: scaleX(-1);
    /* Webkit */
    transform: scaleX(-1);
    /* Standard */
}

.post-function-horizontal-alternative .post-function-step .post-function-title {
    font-size: 12px;
    font-weight: 500;
}

.post-function-horizontal-alternative .post-function-step .post-function-title,
.post-function-horizontal-alternative .post-function-step .post-function-optional {
    text-align: center;
    color: var(--main-grey);
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

/* The Modal (background) */

.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 99;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

.modal-content {
    margin: 0px 11px 0px 11px;
    position: relative;
    padding: 0;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.3s;
    animation-name: animatetop;
    animation-duration: 0.3s;
    width: 600px;
    margin: 0 auto;
    padding-bottom: 0px;
    border-radius: 6px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    background-color: #fff;
    margin-bottom: 12px;
}

@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}

.close {
    display: inherit;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    border-radius: 6px 6px 0px 0px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    color: #808284;
    display: inherit;
    align-items: center;
}

.modal-body {}

/* Carusell im Feed */

.feedcarusel__card {
    display: flow-root;
    display: inline-block;
    height: auto;
    padding-bottom: 0px;
    width: 100%;
}

.feedcarusel__header {
    height: 49px;
}

.feedcarusel__header__left {
    width: calc(100% / 10 * 8);
    height: 49px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 16px;
    color: var(--main-grey);
}

.feedcarusel__header__right {
    width: calc(100% / 10 * 2);
    height: 49px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 16px;
    color: var(--main-grey);
}

.feedcarusel__card__item {
    display: flow-root;
    display: inline-block;
    height: auto;
    padding-bottom: 0px;
    width: 200px;
}

.feedcarusel__text__left {
    width: calc(100% - 49px);
    height: 49px;
    display: flex;
    align-items: center;
}

.feedcarusel__text__right {
    width: 49px;
    height: 49px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #808284;
}

.feedcarusel__text__name {
    padding-left: 16px;
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--main-grey);
}

.feedcarusel__text__subname {
    padding-left: 16px;
    margin: 0;
    font-size: 12px;
    font-weight: 300;
    color: var(--main-grey);
}

.feedcarusel__card__footer {
    height: 49px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}
/* Steps Account Image */

.card__image {
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repat;
    background-position-y: 50%;
    height:195px;
    border-radius: 6px 6px 0px 0px;
      }
      .card__image:after {
    content: "";
    display: block;
    background-color: rgba(235, 239, 241, 0.15);
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    -webkit-transition: all 500ms;
    transition: all 500ms;
    bottom: 0;
      }
      .card__title {
    -webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
    font-size: 24px;
    color: #FFF;
    margin: 0;
    position: absolute;
    top: 156px;
    left: 22px;
    right: 0;
    padding: 0 16px;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
      }  

/* Chat Bounty */

.message-sent,
.message-received {
  clear: both;
}
.message-sent::before,
.message-noti::before
.message-received::before,
.message-sent::after,
.message-noti::after
.message-received::after {
  content: '';
  display: table;
}

.message-center {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}
[class^='grid-'] {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
[class^='grid-'] {
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}
.grid-message >[class^='col-'] {
  margin-top: 1em;
  margin-right: 1em;
}
.grid-message >[class^='col-']:nth-child(-n + 1) {
  margin-top: 0;
}
.grid-message >[class^='col-']:nth-child(1n) {
  margin-right: 0;
}
.col-message-sent {
  margin-left: calc(25.33333333% + 0.08333333em) !important;
}
.col-message-received {
  margin-right: calc(25.33333333% + 0.08333333em) !important;
}
.col-message-sent,
.col-message-received {
    width: calc(100% - 25.33333333%);
}
.message-sent,
.message-received {
  margin-top: 0.0625em;
  margin-bottom: 0.0625em;
  padding: 0.25em 1em;
}
.message-sent p{
  margin: 0;
  line-height: 1.5;
  word-wrap:break-word;
}
.message-sent {
  float: right;
  color: white;
  background-color: var(--main-blue);
  border-radius: 1em 0.25em 0.25em 1em;
  max-width: 100%;
}

.message-sent a {
    color: #FFC107;
    text-decoration: none;
    cursor: pointer;
    font-weight: 500;
  }

.col-message-noti {
  width: 100%;
  text-align: center;
}

.message-noti {
  font-weight: 500; 
  color: #808284;
}

.message-sent:first-child {
  border-radius: 1em 1em 0.25em 1em;
}
.message-sent:last-child {
  border-radius: 1em 0.25em 1em 1em;
}
.message-sent:only-child {
  border-radius: 1em;
}
.message-received {
  float: left;
  color: #808284;
  background-color: #ebeff1;
  border-radius: 0.25em 1em 1em 0.25em;
  max-width: 100%;
  line-height: 1.5;
  word-wrap:break-word;
}

.message-received a {
    color: var(--main-blue);
    text-decoration: none;
    cursor: pointer;
    font-weight: 500;
  }

.message-received:first-child {
  border-radius: 1em 1em 1em 0.25em;
}
.message-received:last-child {
  border-radius: 0.25em 1em 1em 1em;
}
.message-received:only-child {
  border-radius: 1em;
}


.message-box {
  margin-top: 1em;
  padding: 1em 0.5em;
  border-top-width: 0.0625em;
  border-style: solid;
  border-color: #ebeff1;
  color: var(--main-grey);
}
.message-box p {
  margin: 0;
  line-height: 1.5;
  word-wrap:break-word;
}
.col-message-sent {
  margin-top: 0.25em !important;
}
.col-message-received {
  margin-top: 0.25em !important;
}
.message {
  width: 800px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.tooltip_other_propic {
  margin-right: 11px; 
}

.tooltip_me_propic {
  margin-left: 11px; 
}

.tooltip_propic{
  vertical-align: top; 
  border-radius: 50%; 
  background: #2d343a 50% / cover; 
  width: 22px; 
  height: 22px; 
}

/*

input {
    border: 0;
    font-size: 16px;
    height: auto;
    line-height: 30px;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 0 10px;
    vertical-align:middle;
    background-color: #eee;
    border-radius: 20px;
   font-family: 'Roboto', sans-serif;
    outline: 0;
    resize: none;
    border: 1px solid rgba(0, 0, 0, 0.15);
}


*/



.group 			  { 
    position:relative; 
  }
  input 				{
    font-size:16px;
    padding: 5px 5px 5px 5px;
    display:block;
    width:100%;
    border:none;
    margin-top: 2px;
    margin-bottom: 2px;
    color: #808284;
    border-bottom:1px solid #f5f5f5;   
    background-color: #ebeff1;
    border-radius: 3px;
    padding-left: 8px;
    padding-right: 8px; 
    box-sizing: border-box;
  }
  input:focus 		{ outline:none; }
  
  .input__w100 {
    width: 100px;
}

  .input__w300 {
      width: 300px;
  }

  .input__w380 {
    width: 380px;
  }

  .input__w100p {
    width: 100%;
  }
  /* BOTTOM BARS ================================= */
  .bar 	{ position:relative; display:block; width:100%; }
  .bar:before, .bar:after 	{
    content:'';
    height:2px; 
    width:0;
    bottom:1px; 
    position:absolute;
    background:#03a9f4; 
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
  }
  .bar:before {
    left:50%;
  }
  .bar:after {
    right:50%; 
  }
  
  /* active state */
  input:focus ~ .bar:before, input:focus ~ .bar:after {
    width:50%;
  }
  
  
  /* ANIMATION ================ */
  @-webkit-keyframes inputHighlighter {
      from { background:#03a9f4; }
    to 	{ width:0; background:transparent; }
  }
  @-moz-keyframes inputHighlighter {
      from { background:#03a9f4; }
    to 	{ width:0; background:transparent; }
  }
  @keyframes inputHighlighter {
      from { background:#03a9f4; }
    to 	{ width:0; background:transparent; }
  }


/*SVG Icons*/
  
.image_icon {
    background-image: url(/image/illustrator/image_icon/image_icon.svg);
    background-position: center;
    background-repeat: no-repeat;
   }
  
.sticker_icon {
    background-image: url(/image/illustrator/sticker_icon/sticker_icon.svg);
    background-position: center;
    background-repeat: no-repeat;
  }
  
/*SVG Sticker*/

.love_sticker {
    background-image: url(/image/sticker/love_sticker/love_sticker.svg);
    background-position: center;
    background-repeat: no-repeat;
   }

.haufi_sticker {
    background-image: url(/image/sticker/haufi_sticker/haufi_sticker.svg);
    background-position: center;
    background-repeat: no-repeat;
   }

.hit_sticker {
    background-image: url(/image/sticker/hit_sticker/hit_sticker.svg);
    background-position: center;
    background-repeat: no-repeat;
   }

.ice_sticker {
    background-image: url(/image/sticker/ice_sticker/ice_sticker.svg);
    background-position: center;
    background-repeat: no-repeat;
   }
   
.ilove_sticker {
    background-image: url(/image/sticker/love_sticker/love_sticker.svg);
    background-position: center;
    background-repeat: no-repeat;
   }   

.lama_sticker {
    background-image: url(/image/sticker/lama_sticker/lama_sticker.svg);
    background-position: center;
    background-repeat: no-repeat;
   }

.rainbow_sticker {
    background-image: url(/image/sticker/rainbow_sticker/rainbow_sticker.svg);
    background-position: center;
    background-repeat: no-repeat;
   }
   
.wolki_sticker {
    background-image: url(/image/sticker/wolki_sticker/wolki_sticker.svg);
    background-position: center;
    background-repeat: no-repeat;
   }