/***
 ** Main Application Styles
***/
body {
    --highlighted: #f5a93d;
    --red: #ff104b;
    --green: #00db48;
    --white: #FFF;
    --menu: #434c5e;
    --stroke: #d4d9e2;
    --black: #000;
    --shaded: #f6f7fb;
    --formBackground: #f6f7fb;
    --visualizerBackground: #ffffff80;
    --background: #ffffff;
    --placeholder: #c6ccd7;
    --text: #000;
    --tableText: #000;
    --table: #ffffff;
    --shadow: 0rem 0rem 0.5rem 0.125rem rgba(0,0,0,0.08);
    --shadowLarge: 0 0.75rem 1.4375rem 0 rgba(0, 0, 0, .07);
    --shadowColor: rgba(0,0,0,0.08);
    --transition: 0.5s;
    --offWhite: #FCFCFC;
    --offWhite_ALWAYS: #FCFCFC;
    --dark: #28292B;
    --formBase: #919ca5;
    --formGroup: #232f3e;
    --formSubGroup: #707985;

    --modalBorderRadius: 0.9375rem;

    --paddingSmall: 0.3125rem;
    --paddingMedium: 0.625rem;
    --paddingLarge: 0.625rem;
    --paddingXL: 0.9375rem;
    --paddingXXL: 1.25rem;

    --marginSmall: 0.3125rem;
    --marginMedium: 0.625rem;
    --marginLarge: 0.625rem;
    --marginXL: 0.9375rem;
    --marginXXL: 1.25rem;

    --gapSmall: 0.3125rem;
    --gapMedium: 0.625rem;
    --gapLarge: 0.625rem;
    --gapXL: 0.9375rem;

    --defaultInputHeight: 2.6875rem;
    --defaultLineHeight: 0.9375rem;
    --inputBorderRadius: 0.4375rem;
    --inputBorderWidth: 0.125rem;

    --spinnerSizeMedium: 1.25rem;
    --spinnerBorderTopMedium: 0.125rem solid var(--stroke);
    --spinnerBorderRightMedium: 0.125rem solid var(--stroke);
    --spinnerBorderBottomMedium: 0.125rem solid transparent;
    --spinnerBorderLeftMedium: 0.125rem solid transparent;
}

::placeholder {
    color: var(--placeholder);
}


::-webkit-scrollbar {
    width: 0.875rem;
    height: 1.125rem;
}

::-webkit-scrollbar-track {

}

::-webkit-scrollbar-thumb {
    min-height: 2.125rem;
    border: 0.25rem solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    -webkit-border-radius: var(--inputBorderRadius);
    border-radius: var(--inputBorderRadius);
    background-color: var(--stroke);
    -webkit-box-shadow: inset -0.0625rem -0.0625rem 0rem rgba(0, 0, 0, 0.05), inset 0.0625rem 0.0625rem 0rem rgba(0, 0, 0, 0.05);
    box-shadow: inset -0.0625rem -0.0625rem 0rem rgba(0, 0, 0, 0.05), inset 0.0625rem 0.0625rem 0rem rgba(0, 0, 0, 0.05);
}

::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}

::-webkit-scrollbar-track-piece:start {

}

::-webkit-scrollbar-track-piece:end {

}

::-webkit-scrollbar * {
    background:transparent;
}

::-webkit-input-placeholder {
    color: var(--placeholder);
}

:-moz-placeholder {
    color: var(--placeholder);
    opacity:  1;
}

::-moz-placeholder {
    color: var(--placeholder);
    opacity:  1;
}

:-ms-input-placeholder {
    color: var(--placeholder);
}

::-ms-input-placeholder {
    color: var(--placeholder);
}

a {
    color: var(--tableText);
    font-weight: bold;
    transition: var(--transition);
}

a:hover {
    color: var(--primary);
}

html {
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

body {
    font-family: "Open Sans";
    font-size: 0.875rem;
    color: var(--text);
    margin: 0rem;
    color: var(--text);
    background-color: var(--background);
    font-size: 0.875rem;
    height: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

div {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
}

a, a:hover {
    text-decoration: none !important;
}

main {
    position: absolute;
    padding: 1.25rem;
    padding-top: 0.875rem;
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
    top: 0rem;
    left: 3.75rem;
    right: 0rem;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 100vh;
    background-color: var(--background);
}

main.open, main.login {
    left: 23.75rem;
}

aside {
    position: fixed;
    z-index: 10;
    left: 0rem;
    top: 0rem;
    bottom: 0rem;
    width: 23.75rem;
    background-image: url(../images/Login.jpg);
    background-size: cover;
    background-position: center center;
}

aside .overlay {
    position: absolute;
    z-index: 10;
    left: 0rem;
    top: 0rem;
    bottom: 0rem;
    right: 0rem;
    opacity: 0.78;
    background: linear-gradient(to right, var(--primary) 0%, var(--secondary) 100%);
}

aside .title {
    font-family: "Open Sans";
    color: var(--white);
    font-size: 1.5rem;
    line-height: 2.375rem;
    padding-left: 1.875rem;
    padding-right: 1.875rem;
    z-index: 30;
    position: relative;
    clear: both;
    text-align: center;
    font-weight: 200;
    top: calc(50% - 4.6875rem);
    filter: unset;
}

aside .icon {
    width: 6.25rem;
    height: 6.25rem;
    background-image: url(../icons/android-icon-192x192.png);
    position: absolute;
    background-size: contain;
    top: calc(50% - 12.5rem);
    left: calc( 50% - 3.125rem);
    z-index: 20;
    box-sizing: var(--shadow);
}

.hashtager {
    margin-top: 0rem !important;
    margin-bottom: 0.3125rem !important;
}

.title {
    color: var(--primary);
    font-size: 2.125rem;
    font-family: 'Russo One';
    line-height: 2.125rem;
}

.version {
    position: absolute;
    bottom: 1.25rem;
    right: 1.25rem;
    width: 75%;
    text-align: center;
    color: var(--text);
    opacity: 0.7;
    font-size: 0.875rem;
    font-weight: bold;
}

.constrained {
    width: 37.5rem;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.subTitle {
    color: var(--text);
    font-size: 2.125rem;
    margin-top: -0.1875rem;
    margin-bottom: 0.625rem;
}

.subLink {
    cursor: pointer;
    padding-left: 1.25rem;
    opacity: 0.4;
    font-size: 0.75rem;
    margin-top: -2.0625rem;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    transition: var(--transition);
}

.subLink:hover {
    color: var(--primary);
    opacity: 1.0;
}

.hidden {
    display: none !important;
}

.auth {
    display: none;
}

.mb15 {
    margin-bottom: 0.9375rem;
}

.auth.loggedIn {
    display: inline;
}

.unauth {
    display: inline;
}

.unauth.loggedIn {
    display: none;
}

.formRow {
    position: relative;
    width: 100%;
    clear: both;
    display: inline-block;
}

.resource.icon {
    width: 6.25rem;
    height: 6.25rem;
    background-color: #FCFCFC;
    border-radius: 3.125rem;
    cursor: pointer;
    background-size: 3.125rem auto;
    background-position: center center;
}

.upload {
    width: 6.25rem;
    height: 6.25rem;
    background-color: var(--placeholder);
    border-radius: 3.125rem;
    border-radius: 3.125rem;
    cursor: pointer;
    background-size: 3.125rem auto;
    background-position: center center;
    background-image: url(../svgs/upload.svg);
    transition: var(--transition);
}

.upload:hover {
    opacity: 0.6;
}

.upload .progress {
    position: absolute;
    left: 0rem;
    top: 0rem;
    bottom: 0rem;
    width: 0rem;
    transition: 0.05s;
    background-color: var(--primary);
    opacity: 0.6;
}

.resource.icon.profile {
    background-size: cover;
    border-radius: 3.125rem;
}

.filters {
    position: relative;
    width: 100%;
    height: 3.75rem;
    background-color: var(--shaded);
    border-radius: 3.125rem;
    padding: 0.625rem;
}

.filters input {
    width: 20rem;
    height: 2.5rem;
    border-radius: 1.5625rem;
    font-size: 0.875rem;
    font-weight: 600;
    padding-left: 0.9375rem;
    background-size: 1.25rem;
    background-position: right 0.75rem top 0.4375rem;
    background-repeat: no-repeat;
    background-color: var(--white) !important;
}

.filters .counters {
    position: absolute;
    right: 7.5rem;
    top: 0rem;
    line-height: 3.75rem;
    height: 3.125rem;
    font-size: 0.8125rem;
    color: var(--text);
    font-weight: 600;
}

.filters .navigate {
    height: 2.5rem;
    width: 2.5rem;
    background-color: var(--white);
    border-radius: 2.5rem;
    position: absolute;
    cursor: pointer;
    text-align: center;
    font-size: 1.5rem;
    line-height: 2.5rem;
    overflow: hidden;
    color: var(--text);
    transition: var(--transition);
}

.filters .navigate::before {
    color: var(--placeholder);
    transition: var(--transition);
}

.filters .navigate:hover {
    background-color: var(--white);
}

.filters .navigate:hover::before {
    color: var(--menu);
}

.filters .navigate.prev {
    right: 3.75rem;
    top: 0.625rem;
}

.filters .navigate.next {
    right: 0.625rem;
    top: 0.625rem;
}

.filters .navigate.disabled {
    opacity: 0.3;
    cursor: unset !important;
    background-color: #f5f7fa !important;
    pointer-events: none !important;
}

.title {
    font-family: 'Russo One';
    color: var(--primary);
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
    font-size: 1.875rem;
    text-transform: uppercase;
    font-weight: 400;
}

.line {
    position: absolute;
    width: 100%;
    top: 2.5rem;
    height: 0.25rem;
    background-color: var(--stroke);
}

.table {
    height: 86vh;
    overflow: scroll;
}

.blurb {
    padding: 0.625rem;
    background-color: #ffcc33;
    border-radius: var(--inputBorderRadius);
    border-color: #cc3300;
    border-width: var(--inputBorderWidth);
    border-style: solid;
    margin-top: 0.5rem;
}

.tabs {
    position: relative;
    display: inline-block;
    width: 100%;
    font-size: 0.875rem;
    min-height: 2.5rem;
    padding-top: 0.9375rem;
}

.tabs .tab {
    position: relative;
    float: left;
    margin-right: 1.25rem;
    padding-bottom: 0.3125rem;
    margin-bottom: 0.625rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.tabs .tab:hover {
    border-bottom-width: 0.25rem;
    border-bottom-color: var(--secondary);
    border-bottom-style: solid;
}

.tabs .tab.selected {
    border-bottom-width: 0.25rem;
    border-bottom-color: var(--primary);
    border-bottom-style: solid;
}

.bread {
    position: absolute;
    right: 4.375rem;
    top: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
}

.bread.over {
    right: 0rem;
}

.template {
    display: none !important;
}

.header {
    position: relative;
    display: inline-block;
    width: 100%;
}

.action {
    text-align: center;
    color: var(--white);
    line-height: 3.75rem;
    font-size: 1.875rem;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 2.5rem;
    position: absolute;
    right: 2.1875rem;
    top: 1.5625rem;
    background-color: var(--primary);
    cursor: pointer;
    overflow: hidden;
    z-index: 24;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.action.remove {
    text-align: center;
    color: var(--white);
    line-height: 3.75rem;
    font-size: 1.875rem;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 2.5rem;
    position: absolute;
    right: 2.1875rem;
    top: 1.5625rem;
    cursor: pointer;
    overflow: hidden;
    z-index: 24;
    box-shadow: var(--shadow);
    transition: var(--transition);
    background-color: var(--red);
    margin-top: 0rem;
    opacity: 1;
}

.action::before {
    color: var(--white);
}

.action:hover, .action:focus {
    outline: 0;
    box-shadow: 0 1.25rem 1.875rem -1rem #000;
    -webkit-transform: translateY(0.1875rem);
    transform: translateY(0.1875rem);
}

.nodata {
    position: relative;
    width: 100%;
    height: 12.5rem;
    background-position: top center;
    background-size: contain;
    background-image: url(../svgs/nodata.svg);
    display: none;
    text-align: center;
    font-size: 1.5rem;
    line-height: 26.875rem;
    margin-top: 4.6875rem;
    color: var(--tableText);
}

.data {
    display: none;
}

.modal.background.open {
    opacity: 0.9;
    height: 100%;
    bottom: 0rem;
    transition: var(--transition);
}

.modal.background {
    position: fixed;
    width: 100%;
    height: 0.0625rem;
    bottom: -0.0625rem;
    z-index: 10000;
    background-color: #000;
    opacity: 0.0;
    transition: var(--transition);
}

.modal.box.open {
    opacity: 1.0;
    top: 0rem;
    bottom: 0rem;
    left: 0rem;
    height: 12.5rem;
    right: 0rem;
    transition: var(--transition);
    z-index: 10001;
}

.modal.box.full {
    border-radius: 0rem;
    width: 100%;
}

.modal.box.full.open {
    height: 100%;
    overflow-y: auto;
}

.modal.box.full .sized {
    width: 37.5rem;
    margin-left: auto;
    margin-right: auto;
    height: 100vh;
    padding-bottom: 2.5rem;
}

.modal.box.full .sized.large {
    width: 64rem;
}

.modal.box.full .sized.not {
    width: 100%;
}

.modal.box.readOnly .buttons {
    display: none !important;
}

.configBox .subform label {
    color: var(--white);
}

.subform label {
    color: var(--white);
}

.subform input, .subform select {
    background-color: var(--white) !important;
    color: var(--primary);
}

.subform .selectedItems .tag {
    background-color: var(--stroke);
    color: var(--black);
}

.subform .check {
    border-color: #FFF !important;
}

.spread {
    width: 100%;
    position: relative;
    clear: both;
    display: inline-block;
}

.configBox label {
    margin-top: 0.3125rem;
    color: var(--black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.configureBox {
    background-color: var(--stroke);
    border-radius: var(--inputBorderRadius);
    padding: 1.25rem;
    margin-bottom: 0.625rem;
    position: relative;
    margin-top: 1.5625rem;
}

.configureBox input, .configureBox select {
    background-color: var(--white) !important;
}

.configBox {
    background-color: var(--stroke);
    border-radius: var(--inputBorderRadius);
    padding: 1.25rem;
    margin-bottom: 0.625rem;
    position: relative;
}

.configBox {
    color: var(--black);
}

.lightBox {
    color: #FFF;
    background-color: var(--menu);
    border-radius: var(--inputBorderRadius);
    padding: 0.625rem;
    margin-top: 0.625rem;
    position: relative;
    clear: both;
    padding-bottom: 1.25rem;
}

.lightBox label {
    margin-top: 0rem;
}

.routerArea {
    opacity: 0;
    transition: var(--transition);
    overflow: hidden;
    height: 0rem;
}

.routerArea.open {
    opacity: 1.0;
    height: auto;
}

.forminfo {
    display: block;
    margin-top: 0.625rem;
    padding-left: 0.3125rem;
    color: var(--menu);
    font-weight: bold;
}

.configs {
    height: 0rem;
    overflow: hidden;
    opacity: 0;
    transition: var(--transition);
}

.configs.open {
    height: auto;
    opacity: 1.0;
}

.onoff {
    position: absolute;
    right: 0.625rem;
    top: 0.625rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.3125rem;
    font-size: 0.75rem;
    padding-bottom: 0.3125rem;
    border-radius: var(--inputBorderRadius);
    color: var(--black);
    transition: var(--transition);
    z-index: 10;
    cursor: pointer;
    opacity: 0.4;
}

.onoff:hover {
    opacity: 1.0;
}

.onoff.on {
    opacity: 1.0;
}

.inlinerow {
    opacity: 0.0;
    height: 0rem;
    overflow: hidden;
    margin-top: 0rem;
    width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: 1.875rem 30% auto;
    transition: var(--transition);
    margin-left: 0.625rem;
}

.inlinerow.on {
    margin-top: 0.625rem;
    opacity: 1.0;
    height: auto;
}

.inlinerow .remove {
    background-color: var(--black);
    margin-top: 0rem;
}

.inlinerow .name {
    font-weight: bold;
    line-height: 1.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.configRemove, .terminatorRemove {
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
    font-size: 1.25rem;
    cursor: pointer;
    font-weight: normal;
    transition: var(--transition);
}

.configRemove:hover, .terminatorRemove:hover {
    color: var(--primary);
}


.inlinerow .detail {
    font-weight: normal;
    line-height: 1.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.noscroll {
    overflow: hidden !important;
}

.toggler {
    width: 2.5rem;
    height: 1.375rem;
    background-color: var(--stroke);
    border-radius: 0.9375rem;
    top: 0.625rem;
    right: 0.625rem;
    position: absolute;
    color: var(--black);
    cursor: pointer;
    transition: var(--transition);
}

.toggler .toggleLabel {
    line-height: 1.625rem;
    font-size: 0.75rem;
    width: 100%;
    position: absolute;
    left: -1.875rem;
}

.toggler .toggleButton {
    background-color: var(--black);
    width: 1.125rem;
    height: 1.125rem;
    position: absolute;
    right: 0.125rem;
    top: 0.125rem;
    border-radius: 0.8125rem;
    transition: var(--transition);
}

.toggler.no .toggleButton {
    left: 0.125rem;
}

.configBox input, .configBox select, .configBox textarea {
    background-color: var(--white) !important;
}

.configBox .sectionTitle {
    margin-top: 0rem;
}

.configBox .newConfig {
    height: 0rem;
    overflow: hidden;
    transition: var(--transition);
    opacity: 0;
}

.configBox .newConfig label {
    margin-top: 0.625rem;
}

.configBox .newConfig.open {
    opacity: 1.0;
    height: auto;
}

.modal.box {
    z-index: -10;
    width: 38.75rem;
    border-radius: 0.5rem;
    position: fixed;
    background-color: var(--white);
    box-shadow: var(--shadow);
    opacity: 0.0;
    padding: 1.25rem;
    margin: auto;
    bottom: -12.8125rem;
    height: 12.5rem;
    top: calc(100%);
    left: 0rem;
    right: 0rem;
    transition: var(--transition);
}

.modal .close {
    position: fixed;
}

.modal.box .close {
    position: absolute;
    width: 1.875rem;
    height: 1.875rem;
}

.close {
    position: absolute;
    z-index: 10;
    right: 1.25rem;
    top: 1.25rem;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    cursor: pointer;
    font-size: 2.125rem;
    color: var(--stroke);
    transition: var(--transition);
}

.close:hover {
    color: var(--text);
}

.editing {
    display: none;
}

.adding {
    display: none;
}

#IdentityQrCode {
    display: inline-block;
}

.linkButton {
    color: var(--menu);
    line-height: 2.5rem;
    cursor: pointer;
    transition: var(--transition);
}

#IdentityDownload {
    text-align: center;
}

.linkButton:hover {
    color: var(--text);
    text-decoration: underline;
}

.multiselect .selected {
    font-size: 0.75rem;
    padding-left: 0.625rem;
    line-height: 1.875rem;
    height: 1.875rem;
    overflow: auto;
    overflow-x: hidden;
}

.multiselect .selected .item {
    background-color: var(--stroke);
    float: left;
    position: relative;
    margin-top: 0.3125rem;
    margin-right: 0.3125rem;
    background-size: 0.625rem 0.625rem;
    background-position: 0.5rem 0.5rem;
    cursor: pointer;
    border-radius: 0.8125rem;
    opacity: 1.0;
    max-width: 10rem;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 1.625rem;
    padding-left: 0.625rem;
    line-height: 1.625rem;
    padding-right: 0.625rem;
    transition: var(--transition);
    white-space: nowrap;
}

.multiselect .selected .item:hover {
    opacity: 1.0;
    padding-left: 1.5rem;
    background-image: url(../svgs/close.svg);
}

.selectable {
    border-width: var(--inputBorderWidth);
    border-style: solid;
    border-color: var(--menu);
    border-radius: var(--inputBorderRadius);
    background-color: var(--menu);
    padding:0rem;
    height: 8.125rem;
    overflow: scroll;
    margin-top: 0.625rem;
}

.selectable .item {
    width: 100%;
    position: relative;
    display: inline-block;
    height: 2.5rem;
    line-height: 2.5rem;
    padding-left: 0.3125rem;
    border-radius: var(--inputBorderRadius);
    margin-bottom: 0.625rem;
    background-color: var(--stroke);
    cursor: pointer;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text);
    transition: var(--transition);
    padding-left: 0.625rem;
    background-position: 0.5625rem 0.5625rem;
    background-size: 1.375rem 1.375rem;
    opacity: 0.8;
    background-repeat: no-repeat;
}

.selectable .item:hover {
    padding-left: 2.5rem;
    opacity: 1.0;
    background-image: url(../svgs/select.svg);
}

.dots {
    width: 1.875rem;
    right: 0.625rem;
    height: 1.875rem;
    position: absolute;
    top: 0.625rem;
    font-size: 1.5rem;
    text-align: center;
    cursor: pointer;
    background-color: transparent;
    transition: var(--transition);
    line-height: 0.8125rem;
    border-radius: var(--inputBorderRadius);
}

.docs {
    background-image: url(../svgs/docs.svg);
    background-size: contain;
    width: 100%;
    height: 3.5rem;
    background-position: center;
}

.downloads {
    background-image: url(../svgs/downloads.svg);
    background-size: contain;
    width: 100%;
    height: 3.5rem;
    background-position: center;
}
.network-visualizer {
    background-image: url(../svgs/v8visualizer.svg);
    background-size: contain;
    width: 3.125rem;
    height: 3.125rem;
    background-position: center;
}
.dial {
    background-image: url(../svgs/dial.svg);
    background-size: contain;
    width: 3.75rem;
    height: 100%;
    background-position: center;
}

.totalPod {
    width: 100%;
    height: 3.75rem;
    color: var(--black);
    padding: 0.75rem;
    text-align: center;
    border-right: var(--white);
    border-right-width: 0.1875rem;
    border-right-style: solid;
    padding-top: 0rem;
    cursor: pointer;
    transition: var(--transition);
}

.iconLink {
    border-width: 0.1875rem;
    border-style: solid;
    border-color: var(--white);
    background-color: rgba(255, 255, 255, 0.6);
    padding: 0.8125rem;
    border-radius: 0.75rem;
    z-index: 10;
    box-shadow: var(--shadowLarge);
    transition: var(--transition);
    cursor: pointer;
    height: 6.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.iconLink:hover {
    background-color: rgba(255,255,255,1.0);
}

.totalPod:hover .total, .totalPod:hover .label {
    color: var(--black);
    text-align: center;
}

.totalPod:last-child {
    border-right-width: 0rem;
    border-right-style: none;
}

.totalPod .total {
    font-size: 2rem;
    color: var(--primary);
    font-weight: 600;
    transition: var(--transition);
}

.totalPod .label, .iconLink .label {
    font-size: 0.875rem;
    text-transform: uppercase;
    color: var(--menu);
    font-weight: 600;
    transition: var(--transition);
    margin-top: -0.1875rem;
    width: 100%;
    text-align: center;
}

.iconLink .label {
    margin-top: 0rem;
}

#Services.row {
    width: 100%;
    position: relative;
    overflow: auto;
}

.row:nth-child(even) .dots {
    background-color: var(--shaded);
}

.dots:hover {
    background-color: var(--menu);
    color: var(--white);
}

.row:nth-child(even) .dots:hover {
    background-color: var(--menu);
    color: var(--white);
}

.col.allowOver {
    overflow: unset !important;
}

.grid.oss .tagSelect.disabled {
    opacity: 0.2;
    pointer-events: none;
    transition: var(--transition);
}

.grid.oss .tagSelect {
    height: 2.5rem;
    margin-top: 0.3125rem;
    overflow: hidden;
    padding: 0.1875rem;
    pointer-events: all;
    opacity: 1.0;
    transition: var(--transition);
}

.grid.versionArea {
    opacity: 1.0;
    pointer-events: all;
    display: grid;
    grid-template-columns: 6.25rem auto 6.25rem auto;
}

.grid.versionArea label {
    padding-right: 0.625rem;
    line-height: 2.1875rem;
    text-align: right;
}

.grid.versionArea.disabled {
    opacity: 0.2;
    pointer-events: none;
}

.grid.oss .tagSelect .tag.selected {
    color: var(--green);
}

.grid.oss .tagSelect .tag {
    color: var(--red);
}

.tagSelect {
    border-width: var(--inputBorderWidth);
    border-style: solid;
    border-color: var(--menu);
    border-radius: var(--inputBorderRadius);
    background-color: var(--menu);
    padding: 0rem;
    height: 8.125rem;
    overflow: scroll;
    margin-top: 0.625rem;
}

.tagSelect .tag {
    position: relative;
    float: left;
    margin-right: 0.3125rem;
    height: 1.875rem;
    line-height: 1.875rem;
    border-radius: 0.9375rem;
    padding-left: 0.3125rem;
    margin-bottom: 0.625rem;
    background-color: var(--stroke);
    cursor: pointer;
    font-size: 0.75rem;
    text-transform: none;
    color: var(--text);
    transition: var(--transition);
    padding-left: 0.625rem;
    background-position: 0.5625rem 0.25rem;
    background-size: 1.375rem 1.375rem;
    padding-right: 0.625rem;
    opacity: 0.2;
    background-repeat: no-repeat;
}

.grid.efour {
    grid-template-columns: 25% 25% 25% 25%;
    column-gap: 0rem;
}

.grid.ethree {
    grid-template-columns: 33% 34% 33%;
    column-gap: 0rem;
}

.grid.etwo {
    grid-template-columns: 50% 50%;
    column-gap: 0rem;
}

.grid.efive {
    grid-template-columns: 20% 20% 20% 20% 20%;
    column-gap: 0rem;
}

.tagSelect .tag:hover {
    opacity: 0.8;
}

.tagSelect .tag.selected {
    opacity: 1.0;
}

.tagSelect .tag.selected:hover {
    opacity: 0.8;
    background-size: 0.5rem 0.5rem;
    background-position: 0.875rem 0.6875rem;
}

#ConfirmModal {
    height: 9.375rem;
    width: 25rem;
}

.os {
    cursor: pointer;
    width: 1.875rem;
    height: 1.875rem;
    position: relative;
    display: inline-block;
    top: 0.3125rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    transition: var(--transition);
}

.os.windows {
    background-image: url(../images/windows.png);
}

.os.apple {
    background-image: url(../images/apple.png);
}

.os.android {
    background-image: url(../images/android.png);
}

.os.linux {
    background-image: url(../images/linux.png);
}

.os.other {
    background-image: url(../images/other.png);
}

.sectionTitle {
    display: inline-block;
    width: 100%;
    position: relative;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.125rem;
    color: var(--primary);
    margin-top: 0.9375rem;
}

.configureBox .sectionTitle {
    margin-top: 0rem;
}

.cert {
    cursor: pointer;
    width: 1.875rem;
    height: 1.875rem;
    position: relative;
    display: inline-block;
    top: 0.3125rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../svgs/cert.svg);
    transition: var(--transition);
}

.qrCode {
    text-align: center;
    position: relative;
    display: inline-block;
}

.qr {
    cursor: pointer;
    width: 1.875rem;
    height: 1.875rem;
    position: relative;
    display: inline-block;
    top: 0.125rem;
    transition: var(--transition);
    font-size: 1.75rem;
    margin-left: 0.3125rem;
    line-height: 1.75rem;
    text-align: center;
    color: var(--black);
    text-align: center;
}

#QRCode {
    text-align: center;
    padding: 1.25rem;
    width: 21.25rem;
    margin-right: auto;
    margin-left: auto;
    background-color: #FFF;
}

.cert:hover, .qr:hover {
    opacity: 0.6;
}

.darkened {
    color: var(--black);
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 0.625rem;
    font-size: 1rem;
}

.darkened .CodeMirror {
    text-transform: none;
}

.icon-add:before {
    content: "\e90a";
}

#ApiUrl {
    padding-right: 2.5rem;
}

.gridMenu {
    position: absolute;
    width: 9.375rem;
    background-color: var(--menu);
    border-radius: var(--inputBorderRadius);
    right: 0rem;
    top: 1.25rem;
    box-shadow: 0 0 0 0.0625rem var(--shadowColor), 0 0.5rem 1rem var(--shadowColor);
    z-index: 40;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    opacity: 0.0;
    height: 0rem;
    pointer-events: none;
    transition: var(--transition);
    overflow: hidden;
    color: var(--white);
}

.gridMenu.open {
    opacity: 1.0;
    height: unset;
    pointer-events: all;
}

.gridMenu .gridAction {
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 1.875rem;
    color: var(--white);
    width: 100%;
    position: relative;
    float: left;
    letter-spacing: 0rem;
    text-align: left;
    padding-left: 0.6875rem;
    padding-right: 0.625rem;
    cursor: pointer;
    font-weight: 600;
    font-family: 'Open Sans';
}

.gridMenu .gridAction:hover {
    background-color: var(--primary);
    color: var(--white);
}


/***
 ** Cards
***/
.cardStack .clickable:hover, .card .clickable:hover {
    text-decoration: underline;
}

.cardStack.clickable {
    cursor: pointer;
}

.cardStack {
    background-color: var(--primary);
    overflow: visable;
    border-radius: var(--inputBorderRadius);
    height: 7.5rem;
    width: 100%;
    float: left;
    position: relative;
    background-position: bottom 0.625rem right 0.625rem;
    background-size: 25%;
    margin-top: 1.5625rem;
    margin-right: 0.0625rem;
    margin-left: 0.0625rem;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.cardStack.clickable:hover {
    opacity: 0.987;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale3d(1.05,1.05,1);
    transform: scale3d(1.05,1.05,1);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.cardStack.clickable .icon:before {
    color: var(--background);
}

.cardStack.clickable .icon {
    position: absolute;
    right: 0.3125rem;
    top: 0.3125rem;
    text-align: center;
    color: var(--menu);
    background-image: unset;
    width: 1.875rem;
    height: 1.875rem;
    line-height: 2.375rem;
    font-size: 1.5rem;
    left: unset;
    z-index: unset;
}

.cardStack .title {
    color: var(--background);
    font-size: 0.875rem;
    text-transform: uppercase;
    padding-left: 1.125rem;
    padding-right: 0.625rem;
    background-position: top 0.5625rem right 0.5rem;
    background-size: 1.5625rem 1.5625rem;
    height: 2.9375rem;
    line-height: 2.9375rem;
    border-bottom-color: var(--background);
    border-bottom-style: solid;
    border-bottom-width: 0.1875rem;
    filter: unset;
    z-index: 10;
    padding-top: 0rem;
    text-align: left;
    width: 100%;
    font-weight: 600;
    font-family: 'Open Sans', Arial, sans-serif;
    position: relative;
}

.cardStack .subtitle {
    font-size: 2.5rem;
    width: 100%;
    position:  relative;
    float: left;
    text-align: center;
    color: var(--background);
    line-height: 4.375rem;
    font-weight: 400;
    font-family: 'Open Sans';
}

.card1 {
    opacity: 0.6;
    border-radius: 0.625rem;
    position: absolute;
    left: 0.875rem;
    right: 0.875rem;
    top: -0.625rem;
    background-color: var(--primary);
    height: 1.125rem;
}

.card2 {
    opacity: 0.3;
    border-radius: 0.625rem;
    position: absolute;
    left: 1.75rem;
    right: 1.75rem;
    top: -1.125rem;
    background-color: var(--primary);
    height: 1.75rem;
}

.launcher {
    height: 5.625rem;
    background-color: var(--white);
    display: grid;
    grid-template-columns: 8.125rem auto;
    gap: 1.875rem;
    box-shadow: 0rem 0rem 1.1875rem -0.5rem rgba(0, 0, 0, 0.2);
    padding: 0.625rem;
    border-radius: var(--inputBorderRadius);
    cursor: pointer;
    transition: 0.3s;
}

.launcher:hover {
    box-shadow: 0 0.875rem 1.25rem rgba(0, 0, 0, 0.05), 0 0.875rem 1.25rem rgba(0, 0, 0, 0.05);
    transform: scale(1.01);
}

.launcher .image {
    text-align: right;
    font-size: 4.375rem;
    line-height: 4.375rem;
}

.launcher .image::before {
    color: var(--primary);
}

.launcher .label {
    font-family: 'Open Sans';
    text-transform: unset;
    font-size: 1.3125rem;
    line-height: 1.875rem;
    padding-top: 0.3125rem;
    margin-top: unset;
    color: var(--primary);
}

.iconButton {
    width: 100%;
    height: 9.375rem;
    position: relative;
    background-color: var(--white);
    border-radius: var(--inputBorderRadius);
    box-sizing: var(--shadow);
    cursor: pointer;
}

.iconButton:hover .image, .iconButton:hover .label {
    color: var(--primary);
}

.iconButton .image {
    font-size: 5.3125rem;
    text-align: center;
    transition: var(--transition);
}

.iconButton .label {
    font-size: 1rem;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    transition: var(--transition);
}




#AddAnyModal {
    background-color: var(--background);
    background-size: contain;
    background-position: center center;
}

#AddAnyModal .title {
    text-align: center;
    margin-bottom: 1.25rem;
}

.dragger {
    border-left-color: #d4d9e2;
    border-right-color: #d4d9e2;
    border-left-width: 0.0625rem;
    border-right-width: 0.0625rem;
    border-left-style: solid;
    border-right-style: solid;
    width: 0.1875rem;
    height: 0.875rem;
    position: absolute;
    right: 0rem;
    top: 1.1875rem;
    cursor: col-resize;
}

.card {
    border-radius: var(--inputBorderRadius);
    border-width: var(--inputBorderWidth);
    border-style: solid;
    border-color: var(--offWhite);
    background-color: var(--offWhite);
    text-align: center;
    font-size: 0.875rem;
    color: var(--text);
    font-weight: bold;
    cursor: pointer;
    opacity: 0.3;
    transition: var(--transition);
    z-index: 10;
}

.card:hover {
    opacity: 0.6;
    border-color: var(--menu);
}

.card .icon {
    width: 100%;
    height: 9.375rem;
    font-size: 4rem;
    line-height: 9.375rem;
}

.card .checkbox {
    width: 100%;
    height: 3.125rem;
    transition: var(--transition);
    font-size: 1.75rem;
    line-height: 2.375rem;
    text-align: center;
}

.card .checkbox:before {
    opacity: 0.0;
}


.card.checked {
    background-color: var(--stroke);
    border-color: var(--menu);
    opacity: 1.0;
}

.card.checked .checkbox:before {
    opacity: 1.0;
}

.loved {
    position: absolute;
    width: 3.125rem;
    height: 3.125rem;
    transform: rotate(-12deg);
    top: 1.875rem;
    right: 30%;
    background-image: url(../svgs/heart.svg);
    background-position: center center;
    background-size: contain;
    opacity: 0.0;
    transition: var(--transition);
}

.loved.love {
    top: -0.625rem;
    right: 24%;
    opacity: 1.0;
    transform: rotate(12deg);
}

.jsonButton {
    position: absolute;
    right: 0rem;
    top: 0.625rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: var(--transition);
}

.jsonButton:hover {
    opacity: 0.4;
}

.jsonButton.on {
    color: var(--black);
}

#NewIdList {
    position: relative;
    text-align: center;
    display: inline-block;
    width: 100%;
}

.idBox {
    width: 48%;
    margin: 0.375rem;
    border-radius: var(--inputBorderRadius);
    background-color: var(--stroke);
    position: relative;
    display: inline-block;
}

.idBox .title {
    font-size: 1.125rem;
    text-align: center;
    font-family: "Open Sans";
    color: #FFF;
}

.idBox .dlButton {
    font-size: 0.875rem;
    text-align: center;
    font-family: "Open Sans";
    color: #FFF;
    font-weight: bold;
}

#TagArea .tag, .selectedItems .tag {
    line-height: 1.875rem;
    font-size: 1rem;
    color: #FFF;
    background-color: var(--primary);
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    border-radius: 1.25rem;
    margin-bottom: 0.625rem;
    margin-right: 0.3125rem;
    position: relative;
    display: inline-block;
    cursor: pointer;
    opacity: 1.0;
    transition: var(--transition);
}

#TagArea .tag:hover {
    opacity: 0.4;
}

.map {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 0rem;
    transition: var(--transition);
}

.map.open {
    height: 12.5rem;
}

.resources {
    position: absolute;
    left: 0rem;
    top: 0rem;
    width: 0rem;
    height: 0rem;
    opacity: 0.0;
    transition: var(--transition);
    background-color: #fCFCFC;
    border-radius: var(--inputBorderRadius);
    border-width: var(--inputBorderWidth);
    border-color: var(--placeholder);
    overflow: hidden;
}

.resources .resource, .resources .upload {
    width: 3.125rem;
    height: 3.125rem;
    margin: 0.625rem;
    background-position: center center;
    background-size: 2.5rem auto;
    position: relative;
    display: inline-block;
    cursor: pointer;
    border-radius: var(--inputBorderRadius);
    transition: var(--transition);
}

.resources .resource.image {
    background-size: contain;
    border-radius: 1.5625rem;
}

.resources .resource:hover {
    background-color: var(--primary);
}

.leaflet-control-attribution.leaflet-control {
    display: none !important;
}

.resources.open {
    max-width: 27.5rem;
    width: auto;
    height: auto;
    max-height: 25rem;
    overflow-y: auto;
    z-index: 10000;
    opacity: 1.0;
    box-shadow: var(--shadow);
}

.searchButton {
    width: 1.875rem;
    height: 1.875rem;
    font-size: 1.5625rem;
    left: 21.25rem;
    top: 1.125rem;
    color: var(--menu);
    position: absolute;
    z-index: 10;
    cursor: pointer;
    opacity: 0.6;
    transition: var(--transition);
}

.searchButton:hover {
    opacity: 1.0;
}

.clear {
    width: 1.25rem;
    height: 1.25rem;
    background-size: contain;
    cursor: pointer;
    transition: var(--transition);
    opacity: 0.0;
    position: absolute;
    left: 18.75rem;
    top: 1.25rem;
    z-index: 10;
    color: var(--menu);
    font-size: 1.25rem;
}

.clear.showing:hover {
    opacity: 0.4;
}

.clear.showing {
    opacity: .8;
}

.bubble {
    position: relative;
    display: inline-block;
    width: 1.875rem;
    font-size: 0.625rem;
    border-radius: 0.9375rem;
    background-color: var(--black);
    color: var(--white);
    height: 1.875rem;
    line-height: 1.875rem;
    text-align: center;
    margin: 0.625rem;
    opacity: 1.0;
    transition: var(--transition);
}

.bubble.small {
    height: 0.875rem;
    line-height: 0.875rem;
    width: 3.75rem;
    background-color: unset;
    color: var(--black);
}
.bubble.small.dst {
    text-align: center;
    top: -0.5rem;
}
.bubble.small.src {
    text-align: center;
    top: -0.5rem;
}
path:not(.loader path, .highcharts-root path) {
    stroke-width: 2;
    stroke: var(--primary);
    stroke-linecap: round;
    fill: none;
}
path.black {
    stroke-width: 2;
    stroke: var(--black);
    stroke-linecap: round;
    fill: none;
}
path.red {
    stroke: var(--red);
}
path.green {
    stroke: var(--black);
}

.bubble.out, .session.out {
    opacity: 0.03;
}

.bubble.using, .session.using {
    opacity: 1.0;
}

.center {
    text-align: center !important;
}

.bubble.to {
    background-color: var(--primary);
}

.bigborder {
    background-color: var(--black);
    color: var(--white);
    position: relative;
    line-height: 3.75rem;
    border-radius: 1.875rem;
    width: 18.75rem;
    height: 3.75rem;
    margin-right: auto;
    margin-left: auto;
}

.bigborder .enlighten {
    background-color: var(--white);
    color: var(--black);
    width: 12.5rem;
    top: 0.1875rem;
    bottom: 0.1875rem;
    left: 0.1875rem;
    position: absolute;
    line-height: 3.375rem;
    font-size: 1.5rem;
    padding-left: 1.25rem;
    border-radius: 1.6875rem;
    padding-right: 1.25rem;
}

.remove::before {
    color: var(--white) !important;
}

.remove {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    border-radius: 0.625rem;
    background-color: var(--red);
    color: var(--white);
    text-align: center;
    opacity: 0.4;
    font-size: 1.125rem;
    margin-top: 0.625rem;
    line-height: 1.25rem;
    transition: var(--transition);
}

.remove:hover {
    opacity: 1.0;
}

.hashtag.clickable {
    cursor: pointer;
    transition: var(--transition);
}

.hashtag.clickable.clicked {
    cursor: default;
    background-color: var(--menu);
    color: #FFF;
}

.hashtag.clickable:hover {
    cursor: pointer;
    opacity: 0.6;
}

.hashtag, .attag {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    background-color: var(--primary);
    color: transparent;
    position: absolute;
    float: left;
    line-height: 1.875rem;
    border-radius: var(--inputBorderRadius);
    margin-left: 0.125rem;
    margin-bottom: 0.625rem;
    margin-top: 0.625rem;
    transition: var(--transition);
}

.tag-name {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    color: #FFF;
    position: relative;
    float: left;
    line-height: 1.875rem;
    border-radius: var(--inputBorderRadius);
    margin-left: 0.125rem;
    margin-bottom: 0.625rem;
    margin-top: 0.625rem;
    transition: var(--transition);
}

.attag {
    background-color: var(--secondary);
    filter: brightness(90%);
    position: absolute;
}

.tagButton {
    cursor: pointer;
    transition: var(--transition);
}

.tagButton:hover {
    opacity: 0.5;
}

.searchSelector.inline {
    overflow: visible;
}

.searchSelector.inline .suggests.open {
    top: 3.125rem;
    position: absolute;
}

.searchSelector.only .tagArea {
    position: absolute;
    top: 0.625rem;
}

.tagButton {
    margin-top: unset;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    color: #FFF;
    background-color: var(--primary);
    position: relative;
    float: left;
    line-height: 1.875rem;
    border-radius: var(--inputBorderRadius);
    margin-left: 0.625rem;
    margin-bottom: 0.625rem;
    transition: var(--transition);
}

.tagButton .label, .tagButton.attag .label {
    font-size: 1rem;
    font-family: "Open Sans";
    margin-left: 0.3125rem;
}

.tagButton.attag.error, .tagButton.error {
    background-color: var(--red);
}

.tagButton.attag {
    margin-top: unset;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    color: #FFF;
    background-color: var(--secondary);
    position: relative;
    float: left;
    line-height: 1.875rem;
    border-radius: var(--inputBorderRadius);
    margin-left: 0.625rem;
    margin-bottom: 0.625rem;
    transition: var(--transition);
}

.searchSelector {
    border-radius: var(--inputBorderRadius);
    border-width: var(--inputBorderWidth);
    border-color: var(--stroke);
    border-style: solid;
    width: 100%;
    position: relative;
    overflow: auto;
    transition: var(--transition);
    background-color: var(--white) !important;
}

.searchSelector input {
    border-color: var(--white);
}

.suggests {
    width: 100%;
    top: 3.125rem;
    overflow: auto;
    max-height: 18.75rem;
    z-index: 10;
    background-color: var(--white);
    border-top: solid #FFF 0rem;
    border-bottom: solid #FFF 0rem;
    opacity: 0;
    transition: var(--transition);
    height: 0rem;
}

.suggests.open {
    padding: 1.25rem;
    border-radius: 0rem;
    margin-top: -0.4375rem;
    margin-bottom: 0.625rem;
    opacity: 1.0;
    border-bottom-left-radius: var(--inputBorderRadius);
    border-bottom-right-radius: var(--inputBorderRadius);
    background-color: rgba(0,0,0,0.6);
    padding-top: 1.5625rem;
    padding-left: 0.625rem;
    padding-bottom: 0.625rem;
    padding-right: 0.625rem;
    height: auto;
    max-height: 12.5rem;
    overflow-y: auto;
}

.suggests .suggest {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    width: 100%;
    line-height: 1.875rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--transition);
}

.suggests .suggest:hover, .suggests .suggest.highlighted {
    background-color: var(--primary);
    color: #FFF;
}

.sidenote {
    color: var(--input);
    line-height: 3.125rem;
    box-sizing: border-box;
    display: inline-block;
    opacity: 0.3;
    height: 3.125rem;
}

.border {
    background-color: var(--black);
    color: var(--white);
    height: 1.875rem;
    line-height: 1.875rem;
    border-radius: 0.9375rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    margin: 0.625rem;
}

.charts {
    position: relative;
    margin: auto;
    padding: 1.25rem;
    width: 100%;
}

.removeIcon {
    position: absolute;
    font-size: 1.125rem;
    color: var(--primary);
    cursor: pointer;
    right: 0.875rem;
    font-weight: normal;
    top: 1rem;
    transition: var(--transition);
}

.addIcon {
    position: absolute;
    font-size: 1.125rem;
    color: var(--primary);
    cursor: pointer;
    right: 0.875rem;
    top: 1rem;
    transition: var(--transition);
}

.addIcon:hover, .removeIcon:hover {
    opacity: 0.3;
}

.oneline {
    width: 100%;
    height: 3.125rem;
    line-height: 3.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

#CustomLogo {
    width: 75%;
    height: 6.25rem;
    position: absolute;
    bottom: 3.0625rem;
    right: 1.25rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    display: none;
}

canvas { outline: none !important; }

div:focus {
    outline: none !important;
    outline: -webkit-focus-ring-color auto 0rem;
    outline-color: -webkit-focus-ring-color;
    outline-style: auto;
    outline-width: 0.0625rem;
}

@media (max-width:1524px) {
    .hidetablet {
        display: none;
    }
    .grid.nine {
        display: grid;
        grid-template-columns: 15% auto 8.75rem 8.75rem 15%;
        grid-template-rows: auto;
    }
}

.bread {
    display: none;
}

.totalPod .total {
    line-height: 2.5rem;
}

@media (max-width:1700px) {
    .grid.numbers {
        column-gap: 0.3125rem;
    }
    .totalPod .total {
        font-size: 1.25rem;
    }
    .totalPod .label, .iconLink .label {
        font-size: 0.625rem;
    }
}

@media (max-width:1024px) {
    #CustomLogo {
        display: none !important;
    }
    .dragger {
        display: none;
    }
    .bigborder {
        line-height: 3.75rem;
        border-radius: 1.875rem;
        width: 4.375rem;
        height: 3.75rem;
    }
    .bigborder .enlighten {
        width: 4rem;
        position: absolute;
        line-height: 3.375rem;
        text-align: center;
        font-size: 0.75rem;
        padding-left: 0rem;
        padding-right: 0rem;
    }
    .bigborder .enlighten.right {
        text-align: center;
    }
    .hidetablet {
        display:inline-block;
    }
    .grid.dashboard {
        grid-template-columns: 100%;
    }
    #MainMap {
        height: calc(100vh - 20rem) !important;
    }
    .grid.triple {
        grid-template-columns: 6.25rem auto 6.25rem;
    }
    .grid.numbers {
        grid-template-columns: 3.125rem auto 40%;
    }
    .grid.four, .grid.templates, .grid.five, .grid.fives, .grid.six, .grid.seven, .grid.sleven, .grid.ten, .grid.nine, .grid.eight, .grid.eightOS, .grid.nineOS, .grid.tenOS, .grid.policies, .grid.columns {
        display: grid;
        grid-template-columns: 3.125rem auto 2.5rem !important;
        grid-template-rows: auto;
    }
    .grid.columns.noAction {
        grid-template-columns: auto !important;
        grid-template-rows: auto;
    }
    .grid.quad, .grid.quint {
        grid-template-columns: 4.6875rem auto 4.6875rem;
    }
    .grid.flive, .grid.floor  {
        grid-template-columns: 9.375rem auto 15%;
    }
    .grid.dual, .grid.singular,.grid.five.same, .duplex {
        grid-template-columns: auto;
    }
    .relative {
        width: 90vw;
    }
    .desktop {
        display: none;
    }
    .bread {
        display: none;
    }
    .filters input {
        width: 50% !important;
    }
    .tabs .tab {
        font-size: 0.625rem !important;
    }
    .tabs .tab.selected {
        display:none !important;
    }
    .filters .counters {
        display: none !important;
    }
    nav .navList .navButton .label {
        display: none !important;
    }
    nav .navList .navButton .iconArea {
        width: 2.8125rem !important;
        height: 2.8125rem !important;
    }
    nav .navList .navButton .image {
        top: 0rem !important;
        right: 0rem !important;
        left: 0rem !important;
        height: 1.875rem !important;
        font-size: 1.875rem !important;
        line-height: 2.8125rem !important;
    }
    nav .title {
        display: none;
    }
    nav .navList {
        margin-top: 1.25rem !important;
        grid-template-columns: auto !important;
        grid-row-gap: 1.25rem !important;
        margin-left: 4.6875rem !important;
        margin-right: 0.625rem !important;
    }
    nav.open {
        width: 8.125rem !important;
    }
    main.open {
        left: 8.125rem !important;
    }
    nav .navList .navButton {
        height: 2.8125rem !important;
    }
    .modal.box.full .sized {
        width: 100%;
    }
    .modal.box.open {
        height: 100% !important;
        border-radius: 0rem;
    }
    .modal.box.open {
        width: 100% !important;
    }
    .title {
        font-size: 1.25rem !important;
    }
    aside {
        display: none !important;
    }
    .form.mini {
        width: unset !important;
        right: 2.5rem !important;
        left: 0rem !important;
    }
    main {
        padding-top: 0.3125rem !important;
        padding-left: 0.3125rem !important;
        padding-right: 0.3125rem !important;
        left: 4.0625rem !important;
    }
    .cardStack.clickable:hover {
        -webkit-transform: scale3d(1.05,1.05,1) !important;
        transform: scale3d(0.96,0.96,1) !important;
    }
    .action {
        line-height: 2.8125rem !important;
        font-size: 1.25rem !important;
        width: 2.8125rem !important;
        height: 2.8125rem !important;
        border-radius: 2.5rem !important;
        right: 0.625rem !important;
        top: 1.3125rem !important;
    }
    .filters input {
        font-size: 0.75rem !important;
        background-image: unset !important;
    }
    .hover {
        display: none !important;
    }
    .constrained {
        width: 100%;
        margin-left: 1.25rem;
        margin-right: 1.25rem;
    }
    #Version {
        display: none;
    }

}

.related {
    position: relative;
}

#VisualTitle {
    margin-right: auto;
    margin-left: auto;
    width: fit-content;
    font-size: 2.75rem;
    text-align: center;
    color: var(--primary);
}

#VisualTitle .relate {
    position: relative !important;
}

#VisualTitle .super {
    font-size: 0.625rem;
    position: absolute;
    text-align: center;
    width: 100%;
    color: var(--primary);
}

.overlaySection {
    width: 100%;
    position: relative;
    display: inline-block;
    text-align: center;
}

.overlayArea {
    width: 100%;
    height: 20vh;
    position: absolute;
    z-index: 100;
}

.pod a {
    color: unset;
}

.boxed .title {
    font-size: 0.875rem;
}

.boxed input, .boxed select {
    border-color: var(--white);
    background-color: var(--white) !important;
}

.boxed {
    border-width: 0.1875rem;
    border-style: solid;
    border-color: var(--white);
    background-color: rgba(255,255,255,0.5);
    padding: 0.8125rem;
    border-radius: 0.75rem;
    z-index: 10;
    box-shadow: var(--shadowLarge);
    transition: var(--transition);
    overflow-y: auto;
}

.pod .button {
    margin-top: 0.625rem;
    width: 100%;
    border-radius: var(--inputBorderRadius);
    line-height: 1.875rem;
}

.pod {
    margin: 0.625rem;
    background-color: var(--background);
    opacity: 0.9;
    border-radius: 0.625rem;
    padding: 1.5625rem;
    width: auto;
    position: relative;
    display: inline-block;
    text-align: left;
}

.pod .title {
    font-size: 1.125rem;
    font-weight: bold;
    font-family: "Open Sans";
    text-transform: uppercase;
    color: var(--black);
    text-align: left;
}

.pod .subtitle {
    margin-bottom: 1.5625rem;
}

.pod .dataArea {
    width: 4.6875rem;
    height: 4.6875rem;
}

.pod .dataArea .count {
    font-size: 2.5rem;
    color: var(--black);
}

.pod .dataArea .note {
    font-size: 0.5rem;;
    text-transform: uppercase;
}

.pod input, .pod select {
    background-color: var(--background) !important;
}

.buttons.open {
    display: grid !important;
}

#LogicalMap {
    width: 100%;
    height: 80vh;
    position: absolute;
}

#OperationCommands .title {
    text-align: left;
    font-size: 1.3125rem;
    color: var(--white);
    margin-bottom: 0rem;
}

#IconDownload {
    position: absolute;
    right: 1.4375rem;
    top: 1.5rem;
    width: 1.5625rem;
    height: 1.5625rem;
    font-size: 1.5625rem;
    cursor: pointer;
    transition: var(--transition);
}

#IconDownload {
    color: var(--primary);
}

.step {
    background-color: var(--primary);
    width: 1.5625rem;
    height: 1.5625rem;
    border-radius: 100%;
    text-align: center;
    line-height: 1.5625rem;
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition);
    display: inline-block;
    margin-right: 0.625rem;
    position: relative;
    opacity: 0.6;
}

.step:hover {
    opacity: 0.9;
}

.step.selected {
    opacity: 1.0;
}

.views {
    position: absolute;
    right: 1.25rem;
    top: 3.125rem;
    height: 2.8125rem;
}

#ExecutionSteps {
    position: absolute;
    right: 3rem;
    top: 1.4375rem;
}

.views .imageButton {
    position: relative;
    float: right;
    cursor: pointer;
    width: 2.8125rem;
    height: 2.8125rem;
    font-size: 0.625rem;
    text-align: center;
    opacity: 0.4;
    transition: var(--transition);
}

.views .imageButton:hover {
    opacity: .8;
    color: var(--primary);
}

.views .imageButton .icon {
    font-size: 1.5rem;
    width: 100%;
    text-align: center;
}

.views .imageButton.selected {
    opacity: 1.0;
}

#MainMap {
    position: relative;
    width: 100%;
    height: calc(100vh - 13.75rem);
    z-index: 10;
    border-radius: 0.75rem;
    box-shadow: var(--shadowLarge);
    margin-top: 1.25rem;
}

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

#SessionData {
    width: 100%;
}

.floater {
    position: absolute;
    top: 2.5625rem;
    background-color: var(--primary);
    padding: 0.3125rem;
    line-height: 0.875rem;
    height: 0rem;
    z-index: 100;
    font-size: 0.625rem;
    left: -0.9375rem;
    left: 0.3125rem;
    width: 0rem;
    text-align: center;
    border-radius: 1.25rem;
    transition: var(--transition);
    opacity: 0.0;
    overflow: hidden;
}

.floater.open {
    opacity: 1.0;
    height: 1.5rem;
    left: -0.9375rem;
    width: 3.75rem;
}

.fixedfull {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0rem;
    top: 0rem;
}

.abslutefull {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0rem;
    top: 0rem;
}

.blacken {
    background-color: var(--black);
}

.enlighten.right {
    left: unset;
    right: 0.1875rem;
    text-align: right;
}

.bigRows {
    width: 100%;
    position: relative;
    height: 20vh;
    display: inline-block;
    text-align: center;
}

.personal {
    display: none;
}

.circle {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    background-color: var(--stroke);
    border-radius: 0.625rem;
    margin-right: 0.125rem;
}

.circle.true {
    background-color: var(--green);
}

.circular {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--primary);
    border-radius: 1.25rem;
    font-size: 0.625rem;
    color: var(--black);
    text-align: center;
    line-height: 2.5rem;
    margin: 1.25rem;
    display: inline-block;
}

.circular.router {
    background-color: var(--secondary);
}

.circular.link {
    background-color: var(--black);
    color: var(--white);
}

.circular.red {
    background-color: var(--red);
}

.circular.green {
    background-color: var(--black);
}

#Summary {
    z-index: 30;
    position: absolute;
    opacity: 0.9;
    left: 0.625rem;
    top: 0.625rem;
    background-color: var(--primary);
    padding: 1.25rem;
    border-radius: 0.625rem;
}

#Summary .total {
    font-size: 2.5rem;
    color: var(--white);
}

svg {
    pointer-events: none;
}

.selectList {
    display: grid;
    grid-template-columns: 49% 49%;
    column-gap: 2%;;
}

.smallForm {
    position: relative;
    width: 100%;
}

.smallForm input.filter {
    color: var(--white) !important;
    position: relative;
    right: unset;
    top: unset;
    width: 100%;
    height: 1.875rem;
    line-height: 1.875rem;
    border-width: 0.0625rem;
    font-size: 0.75rem;
    border-color: var(--menu);
    background-color: var(--menu) !important;
}

.list {
    border-width: var(--inputBorderWidth);
    border-style: solid;
    border-color: var(--menu);
    border-radius: var(--inputBorderRadius);
    background-color: var(--menu);
    padding: 0rem;
    height: 16.25rem;
    overflow: scroll;
    margin-top: 0.625rem;
    overflow-x:hidden;
}

.list .listItem {
    position: relative;
    width: 100%;
    border-radius: var(--inputBorderRadius);
    height: 1.875rem;
    background-color: var(--white);
    color: var(--black);
    cursor: pointer;
    line-height: 1.875rem;
    font-size: 0.875rem;
    text-align: left;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.125rem;
    transition: var(--transition);
}

.list .listItem:hover {
    background-color: var(--primary);
}

.list .listItem .cert {
    position: absolute;
    width: 1rem;
    height: 1rem;
    right: 0.375rem;
    top: 0.375rem;
    z-index: 10;
}

.filterIcon {
    color: #FFF;
    position: absolute;
    z-index: 10;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    right: 0.25rem;
    top: 0.25rem;
    opacity: 0.4;
    transition: var(--transition);
}

.filterIcon:hover {
    opacity: 1.0;
}

:root {
    --balloon-border-radius: 0.125rem;
    --balloon-color: rgba(16, 16, 16, 0.95);
    --balloon-text-color: #fff;
    --balloon-font-size: 0.75rem;
    --balloon-move: 0.25rem; }

button[aria-label][data-balloon-pos] {
    overflow: visible; }

[aria-label][data-balloon-pos] {
    position: relative;
    cursor: pointer; }
[aria-label][data-balloon-pos]:after {
    opacity: 0;
    pointer-events: none;
    transition: all 0.18s ease-out 0.18s;
    text-indent: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-weight: normal;
    font-style: normal;
    text-shadow: none;
    font-size: var(--balloon-font-size);
    background: var(--balloon-color);
    border-radius: 0.125rem;
    color: var(--balloon-text-color);
    border-radius: var(--balloon-border-radius);
    content: attr(aria-label);
    padding: .5em 1em;
    position: absolute;
    white-space: nowrap;
    z-index: 10; }
[aria-label][data-balloon-pos]:before {
    width: 0;
    height: 0;
    border: 0.3125rem solid transparent;
    border-top-color: var(--balloon-color);
    opacity: 0;
    pointer-events: none;
    transition: all 0.18s ease-out 0.18s;
    content: "";
    position: absolute;
    z-index: 10; }
[aria-label][data-balloon-pos]:hover:before, [aria-label][data-balloon-pos]:hover:after, [aria-label][data-balloon-pos][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-visible]:after, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after {
    opacity: 1;
    pointer-events: none; }
[aria-label][data-balloon-pos].font-awesome:after {
    font-family: FontAwesome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
[aria-label][data-balloon-pos][data-balloon-break]:after {
    white-space: pre; }
[aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after {
    white-space: pre-line;
    word-break: break-word; }
[aria-label][data-balloon-pos][data-balloon-blunt]:before, [aria-label][data-balloon-pos][data-balloon-blunt]:after {
    transition: none; }
[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after {
    transform: translate(-50%, 0); }
[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before {
    transform: translate(-50%, 0); }
[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after {
    left: 0; }
[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before {
    left: 0.3125rem; }
[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after {
    right: 0; }
[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before {
    right: 0.3125rem; }
[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos*="-left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:after {
    transform: translate(0, 0); }
[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos*="-left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:before {
    transform: translate(0, 0); }
[aria-label][data-balloon-pos][data-balloon-pos^="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {
    bottom: 100%;
    transform-origin: top;
    transform: translate(0, var(--balloon-move)); }
[aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {
    margin-bottom: 0.625rem; }
[aria-label][data-balloon-pos][data-balloon-pos="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos="up"]:after {
    left: 50%;
    transform: translate(-50%, var(--balloon-move)); }
[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {
    top: 100%;
    transform: translate(0, calc(var(--balloon-move) * -1)); }
[aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {
    margin-top: 0.625rem; }
[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before {
    width: 0;
    height: 0;
    border: 0.3125rem solid transparent;
    border-bottom-color: var(--balloon-color); }
[aria-label][data-balloon-pos][data-balloon-pos="down"]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:before {
    left: 50%;
    transform: translate(-50%, calc(var(--balloon-move) * -1)); }
[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after {
    transform: translate(0, -50%); }
[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before {
    transform: translate(0, -50%); }
[aria-label][data-balloon-pos][data-balloon-pos="left"]:after, [aria-label][data-balloon-pos][data-balloon-pos="left"]:before {
    right: 100%;
    top: 50%;
    transform: translate(var(--balloon-move), -50%); }
[aria-label][data-balloon-pos][data-balloon-pos="left"]:after {
    margin-right: 0.625rem; }
[aria-label][data-balloon-pos][data-balloon-pos="left"]:before {
    width: 0;
    height: 0;
    border: 0.3125rem solid transparent;
    border-left-color: var(--balloon-color); }
[aria-label][data-balloon-pos][data-balloon-pos="right"]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:before {
    left: 100%;
    top: 50%;
    transform: translate(calc(var(--balloon-move) * -1), -50%); }
[aria-label][data-balloon-pos][data-balloon-pos="right"]:after {
    margin-left: 0.625rem; }
[aria-label][data-balloon-pos][data-balloon-pos="right"]:before {
    width: 0;
    height: 0;
    border: 0.3125rem solid transparent;
    border-right-color: var(--balloon-color); }
[aria-label][data-balloon-pos][data-balloon-length]:after {
    white-space: normal; }
[aria-label][data-balloon-pos][data-balloon-length="small"]:after {
    width: 5rem; }
[aria-label][data-balloon-pos][data-balloon-length="medium"]:after {
    width: 9.375rem; }
[aria-label][data-balloon-pos][data-balloon-length="large"]:after {
    width: 16.25rem; }
[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {
    width: 23.75rem; }
@media screen and (max-width: 768px) {
    [aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {
        width: 90vw; } }
[aria-label][data-balloon-pos][data-balloon-length="fit"]:after {
    width: 100%; }


@font-face {
    font-family: 'Russo One';
    src: url('../fonts/RussoOne-Regular.woff2') format('woff2'),
    url('../fonts/RussoOne-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular.woff2') format('woff2'),
    url('../fonts/OpenSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?l2gtmj');
    src:  url('../fonts/icomoon.eot?l2gtmj#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.woff2?l2gtmj') format('woff2'),
    url('../fonts/icomoon.ttf?l2gtmj') format('truetype'),
    url('../fonts/icomoon.woff?l2gtmj') format('woff'),
    url('../fonts/icomoon.svg?l2gtmj#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.copy {
    position: absolute;
    right: 0.875rem;
    top: 1rem;
    font-size: 1.25rem;
    cursor: pointer;
    transition: var(--transition);
    z-index: 150;
}

.copy.swap {
    color: var(--dark);
}

.copy:hover {
    color: var(--primary);
}

.commands.open {
    height: fit-content;
    opacity: 1.0;
    display: inline-block;
}

.commands {
    position: relative;
    display: none;
    width: 100%;
    height: 0rem;
    opacity: 0;
    background-color: var(--black);
    color: var(--white);
    border-radius: var(--inputBorderRadius);
    padding: 1.25rem;
    transition: var(--transition);
    margin-top: 0.9375rem;
}

.commands input {
    background-color: var(--dark) !important;
    border-color: var(--dark) !important;
    color: var(--placeholder);
    padding: 1rem;
    padding-right: 2.6875rem;
}

.commands label {
    color: var(--primary);
    text-transform: uppercase;
    font-weight: bold;
}

.modal .CodeMirror {
    height: 9.375rem;
    border-radius: var(--inputBorderRadius);
    border-top-left-radius: var(--inputBorderRadius);
    border-bottom-left-radius: var(--inputBorderRadius);
    margin-top: 0.625rem;
}


.lds-ripple {
    display: inline-block;
    position: relative;
    width: 5rem;
    height: 5rem;
}
.lds-ripple div {
    position: absolute;
    border: 0.25rem solid var(--primary);
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}
@keyframes lds-ripple {
    0% {
        top: 2.25rem;
        left: 2.25rem;
        width: 0;
        height: 0;
        opacity: 0;
    }
    4.9% {
        top: 2.25rem;
        left: 2.25rem;
        width: 0;
        height: 0;
        opacity: 0;
    }
    5% {
        top: 2.25rem;
        left: 2.25rem;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0rem;
        left: 0rem;
        width: 4.5rem;
        height: 4.5rem;
        opacity: 0;
    }
}

.os-icon.empty {
    background: transparent;
}
.os-icon.apple {
    background-image: url(../images/apple.png);
}
.os-icon.windows {
    background-image: url(../images/windows.png);
}
.os-icon.linux {
    background-image: url(../images/linux.png);
}
.os-icon.android {
    background-image: url(../images/android.png);
}
.os-icon.other {
    background-image: url(../images/other.png);
}

.sort.asc {
    background-image: url(../svgs/ArrowDown.svg);
}

.sort.desc {
    background-image: url(../svgs/ArrowUp.svg);
}