@font-face {
    font-family: "Share Tech";
    src: url("../../fonts/Source/ShareTechRegular.ttf");
}

@font-face {
    font-family: "Raleway";
    src: url("../../fonts/Source/Raleway.ttf");
}

@font-face {
    font-family: "Raleway Semi Bold";
    src: url("../../fonts/Source/RalewaySemiBold.ttf");
}

@font-face {
    font-family: "Open Sans";
    src: url("../../fonts/Source/OpenSansRegular.ttf");
}

@font-face {
    font-family: "Open Sans Semi Bold";
    src: url("../../fonts/Source/OpenSansSemiBold.ttf");
}

@font-face {
    font-family: "Open Sans Light";
    src: url("../../fonts/Source/OpenSansLight.ttf");
}

@font-face {
    font-family: "Karla";
    src: url("karla.ttf");
}

@font-face {
    font-family: "Spartan";
    src: url("spartan.ttf");
}

::selection {
    background-color: dimgrey;
    color: lightgray;
}

.noselect {
    user-select: none;
}

.upbutton:hover {
    color: rgb(20, 219, 192);
}

.upbutton:active {
    transform: translateY(3px);
}

.bordered {
    border: solid 1px lightgrey;
}

.bottombordered {
    border-bottom: solid 1px lightgrey;
}

.bold {
    font-weight: bold;
}

.grey {
    color: rgb(136, 136, 136);
}

.lightgrey {
    color: rgb(200, 200, 200);
}

.red {
    color: rgb(252, 14, 44);
}

.blue {
    color: rgb(133, 219, 255);
}

.green {
    color: rgb(43, 218, 192);
}

.black {
    color: rgb(36, 42, 45);
}

.white {
    color: white;
}

.bggrey {
    background-color: rgb(136, 136, 136);
}

.bglightgrey {
    background-color: rgb(240, 240, 240);
}

.bglightlightgrey {
    background-color: #fafbfd;
}

.bgred {
    background-color: rgb(252, 14, 44);
}

.bgblue {
    background-color: rgb(133, 219, 255);
}

.bggreen {
    background-color: rgb(43, 218, 192);
}

.bgblack {
    background-color: rgb(36, 42, 45);
}

.bgwhite {
    background-color: white;
}

.bglanding {
    background-color: #f6f6f6;
}

.bggreentoblue {
    background: linear-gradient(to right, rgb(43, 218, 192), rgb(133, 219, 255));
}

.clickable {
    cursor: pointer;
}

.vertical-align {
    display: flex;
    align-items: center;
}

.upcenter {
    text-align: center;
}

.upleft {
    text-align: left;
}

.upright {
    text-align: right;
}

.middle {
    vertical-align: middle;
}

.top {
    vertical-align: top;
}

.bottom {
    vertical-align: bottom;
}

.nospace {
    padding: 0;
    border-spacing: 0;
    border: 0;
    margin: 0;
}

input {
    background-color: transparent;
}

[contenteditable]:focus {
    outline: 0px solid transparent;
}

/* Toggle Radio from w3c */
.upswitch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 22px;
    margin-bottom: 0px;
}

.upswitch input {
    display: none;
}

.upslider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: gainsboro;
}

.upslider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: white;
}

input:checked + .upslider {
    background-color: rgb(20, 219, 192);
}

input:checked + .upslider:before {
    left: 28px;
}

.upslider.round {
    border-radius: 18px;
}

.upslider.round:before {
    border-radius: 50%;
}

/* Scale */
.scale {
    position: relative;
    width: 68px;
    height: 20px;
}

.switch input {
    display: none;
}

.bar {
    position: absolute;
    width: 68px;
    height: 10px;
    background-color: gainsboro;
    top: 5px;
    left: 0;
    border-radius: 5px;
}

.barfill {
    position: absolute;
    width: 0px;
    height: 10px;
    background-color: rgb(20, 219, 192);
    top: 5px;
    left: 0;
    border-radius: 5px;
}

.barslider {
    position: absolute;
    width: 18px;
    height: 18px;
    border: solid 1px gainsboro;
    background-color: white;
    left: 0;
    border-radius: 9px;
}

.barsliderbig {
    position: absolute;
    width: 30px;
    height: 24px;
    border: solid 1px gainsboro;
    background-color: white;
    left: 0;
    border-radius: 12px;
    text-align: center;
}

.barsliderSmall {
    top: 5px;
    position: absolute;
    width: 10px;
    height: 10px;
    border: solid 1px gainsboro;
    background-color: white;
    left: 0;
    border-radius: 9px;
    cursor: pointer;
}

.TimelineDisplay {
    width: 100%;
    position: relative;
    height: 20px;
}

.barTimeline {
    position: absolute;
    width: 100%;
    height: 10px;
    background-color: gainsboro;
    top: 5px;
    left: 0;
    border-radius: 5px;
}

/* ballean */

.ball {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    margin: auto;
    display: inline-block;
}

.inball {
    left: 2px;
    top: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: absolute;
}

/* Popup */
div.popupbg {
    top: 0vh;
    left: 0vw;
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 3000;
}

div.popup {
    top: 50vh;
    left: 50vw;
    padding: 12px 12px;
    margin-left: -35vw;
    margin-top: -35vh;
    width: 70vw;
    height: 70vh;
    position: fixed;
    background-color: white;
    border: #eee solid 1px;
}

div.lilpopup {
    top: 30vh;
    left: 50vw;
    padding: 12px 12px;
    margin-left: -20vw;
    margin-top: -20vh;
    width: 40vw;
    min-height: 20vh;
    position: fixed;
    background-color: white;
    border: #eee solid 1px;
}

div.homemessage {
    width: 100%;
    text-align: right;
    line-height: 40px;
    margin-top: 5px;
    padding-right: 10px;
}

@media screen and (max-width: 800px) {
    div.lilpopup {
        top: 50vh;
        left: 50vw;
        padding: 24px 24px;
        margin-left: -45vw;
        margin-top: -20vh;
        min-width: 340px;
        width: 90vw;
        min-height: 20vh;
        position: fixed;
        background-color: white;
        border: #eee solid 1px;
    }
}

/* SIZE STUFF */

.bigtitle {
    font-size: 30px;
    font-family: "Spartan", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.titlelow {
    font-size: 23px;
    font-family: "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.title2 {
    font-size: 30px;
    font-family: "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.title {
    font-size: 22px;
    font-family: "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.subtitle {
    font-size: 14px;
    font-family: "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.subtitlelarge {
    font-size: 18px;
    font-family: "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.subtitlebig {
    font-size: 17px;
    font-family: "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.text {
    font-size: 11px;
    font-family: "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.linkw,
.linkw a {
    color: white;
    /*text-transform: uppercase;*/
    font-size: 11px;
    font-family: "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.linkw:hover,
.linkw a:hover,
.linkw:active,
.linkw a:active {
    color: rgb(20, 219, 192);
    text-decoration: none;
    cursor: pointer;
}

.link,
.link a {
    color: rgb(136, 136, 136);
    /*text-transform: uppercase;*/
    font-size: 13px;
    font-family: "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.news-panel {
    font-family: "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.news-panel-edit:hover {
    background-color: #f53b3c !important;
}

.link:hover,
.link a:hover,
.link:active,
.link a:active {
    color: rgb(20, 219, 192);
    text-decoration: none;
    cursor: pointer;
}

a.subtitle:hover,
a.subtitlebig:hover {
    /*color: rgb(136, 136, 136);*/
    text-decoration: none;
    cursor: pointer;
}

table.uptable {
    width: 100%;
    max-width: 100%;
}

table.uptable td {
    vertical-align: middle;
    padding: 0px 5px;
    height: 29px;
}

.editorfield {
    width: 30%;
    min-width: 90px;
    vertical-align: middle;
}

.editorfield div {
    font-size: 12px;
}

.editorvalue {
    vertical-align: middle;
}

.editorvalue .readonly {
    border-bottom: none;
}

.editorvalue div {
    font-size: 11px;
    min-height: 15px;
    width: 100%;
    border-bottom: solid 1px rgb(20, 219, 192);
}

.editorvalue input {
    font-size: 11px;
    min-height: 20px;
    outline: none;
    border: none;
    width: 100%;
    border-bottom: solid 1px rgb(20, 219, 192);
}

.editorvalue select {
    font-size: 11px;
    box-shadow: none;
    border-color: gainsboro;
    height: 22px;
    width: auto;
    padding: 0px 0px;
}

select.worldselector {
    border-color: gainsboro;
    height: 40px;
    width: auto;
    padding: 0px 0px;
}

select.topicselector {
    border-color: gainsboro;
    height: 30px;
    width: auto;
    padding: 0px 0px;
}

.tiny {
    font-size: 8px;
}

.iconsmall {
    width: 20px;
    height: 20px;
}

.iconmedium {
    width: 28px;
    height: 28px;
}

.logobig {
    width: 300px;
}

.logoverybig {
    width: 400px;
}

.compensatetitle {
    margin-top: 11px;
}

.card .card-action {
    padding: 10px 24px;
    padding-top: 15px;
}

.upmodal {
    width: 30%;
    min-width: 340px;
}

img.imgeditorlarge {
    max-width: 200px;
    max-height: 100px;
    border: #eee solid 1px;
    cursor: pointer;
}

img.imgeditor {
    max-width: 100px;
    max-height: 100px;
    border: #eee solid 1px;
    cursor: pointer;
}

img.imgwaiter {
    padding: 34px 34px;
}

.editortile {
    padding: 5px 5px;
    height: 145px;
}

@media screen and (min-width: 2000px) {
}

.large {
    display: inline;
}

.long {
    display: none;
}

/*PHONE*/
@media screen and (max-width: 993px) {
    .gofurther-wrapper {
        display: none;
    }

    .large {
        display: none;
    }

    .long {
        display: inline;
    }
}

@font-face {
    font-family: "Material Icons";
    font-style: normal;
    font-weight: 400;
    src: url(iconfont/MaterialIcons-Regular.eot);
    src:
        local("Material Icons"),
        local("MaterialIcons-Regular"),
        url("MaterialIcons-Regular.woff2") format("woff2"),
        url("MaterialIcons-Regular.woff") format("woff"),
        url("MaterialIcons-Regular.ttf") format("truetype");
}

.material-icons {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
}

.cp-color-picker {
    z-index: 1004;
}

.linkedinbutton {
    background: url(./LinkedinSigninDefault.png) no-repeat;
    background-size: 200px auto;
    display: block;
    margin: 0 auto;
    width: 200px;
    height: 38px;
}

.linkedinbutton:hover {
    background: url(./LinkedinSigninHover.png) no-repeat;
    background-size: 200px auto;
    display: block;
    margin: 0 auto;
    width: 200px;
    height: 38px;
}

.linkedinbutton:active {
    background: url(./LinkedinSigninActive.png) no-repeat;
    background-size: 200px auto;
    display: block;
    margin: 0 auto;
    width: 200px;
    height: 38px;
}

#community svg {
    font-size: 24px;
    margin-bottom: -4px;
    margin-left: 11px;
}

.gofurther-wrapper {
    position: fixed;
    bottom: 0px;
    left: 10px;
    z-index: 19;
    width: calc(100% - 20px);
}

.help-category-wrapper {
    position: relative;
    width: 100%;
}

.gofurther-wrapper .collapsible-header {
    width: 150px;
    left: -150px;
}

.gofurther-wrapper .collapsible-header span {
    float: left;
    display: inline-block;
}

.gofurther-wrapper .collapsible-header i {
    float: right;
}

.gofurther-wrapper .item,
.help-category-wrapper .item {
    padding-bottom: 15px;
}

.gofurther-wrapper .item a span,
.help-category-wrapper .item a span {
    display: block;
    float: left;
}

.gofurther-wrapper .item a span:nth-child(2),
.help-category-wrapper .item a span:nth-child(2) {
    width: calc(100% - 55px);
    padding-top: 10px;
    margin-left: 10px;
}

.gofurther-wrapper .collapsible-header.active {
    position: relative;
    left: 0;
    right: 0;
    width: auto;
}

.gofurther-wrapper .collapsible-header {
    padding-left: 0;
    padding-right: 0;
}

.gofurther-wrapper .collapsible {
    border-top: none;
    border-right: none;
    border-left: none;
}

.gofurther-wrapper .collapsible-body {
    padding-left: 0;
    padding-right: 0;
    border-bottom: none;
}

.gofurther-wrapper .collapsible-header.active i {
    margin-right: 0;
}

.gofurther-wrapper .item a,
.help-category-wrapper .item a {
    position: relative;
    display: block;
    float: left;
    width: 100%;
}

.gofurther-wrapper .item a:hover,
.help-category-wrapper .item a:hover {
    font-weight: bold;
    color: rgb(36, 42, 45);
}

.timeline-toggle {
    position: absolute;
    top: 96px;
    background-color: white;
    left: 5px;
    color: rgb(36, 42, 45);
    z-index: 1;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    text-align: center;
}

.red {
    color: rgb(252, 14, 44);
}

.green {
    color: rgb(20, 219, 192);
}

.popupbg.flex-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.popupbg.flex-content .lilpopup {
    top: auto;
    left: auto;
    padding: 12px 12px;
    margin-left: 0;
    margin-top: 0;
    width: 40vw;
    min-height: 20vh;
    position: relative;
    background-color: white;
    border: #eee solid 1px;
}

.datepicker-calendar-container {
    background-color: white;
}