@charset "UTF-8";

:root {
    color-scheme: light;
}

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
    width: 100%;
    height: 100%;
}

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-overflow-scrolling: touch !important;
    -webkit-text-size-adjust: none;
    overflow-y: scroll;
    --main: white;
    --icons: #424242;
    --iconhoverbk: #ebebeb;
    --iconactivebk: #dedede;
    --icondisabled: #989898;
    --bodyhoverbk: #efefef;
    --bodyactivebk: #e6e6e6;
    --atext: #1b1b1b;
    --btext: #484848;
    --ctext: gray;
    --ftext: #212121;
    --accent: #03ae75;
    --accenthover: #ddfff4;
    --accentactive: #baf9e4;
    --redhover: #fff2f1;
    --redactive: #ffd8d5;
    --accentprimaryhover: #009c68;
    --accentprimaryactive: #009060;
    --accenttext: #059e6b;
    --search: #ebebeb;
    --searchicons: #676767;
    --divline: #c3c3c3;
    --divline2: #d0d0d0;
    --imgbk: #cccccc;
    --green: #4caf50;
    --greentext: #43a047;
    --red: #f44336;
    --redtext: #f44336;
    --gray: #909090;
    --graytext: #696969;
    --lightgreen: #9ccc65;
    --lightgreentext: #7cb342;
    --loggreen: #43a047;
    --logred: #e53935;
    --logyellow: #e4a40d;
    --logblue: #389ff3;
    --inputdisabled: #efefef;
    --link: #1565c0;
    --linkalt: #bbdefb;
    --redmain: #D32F2F;
    --redsub: #FFCDD2;
    --redicon: #EF5350;
    --bluemain: #1976D2;
    --bluesub: #BBDEFB;
    --blueicon: #42A5F5;
    --greenmain: #388E3C;
    --greensub: #C8E6C9;
    --greenicon: #66BB6A;
    --goldmain: #ab7b05;
    --goldsub: #ffecbf;
    --goldicon: #bf8b09;
    /*CHANGED*/
    --purplemain: #7B1FA2;
    --purplesub: #E1BEE7;
    --purpleicon: #AB47BC;
    width: 100%;
    background: var(--main);
    --classicshadow: rgba(0, 0, 0, 0.25);
    --shadow: rgba(0, 0, 0, 0.5);
    --lines: #c1c1c1;
    --subtlelines: #c5c5c5;
    --nextlevelsubtle: #dadada;
    --calsubtle: #cecece;
    --high: #FFCCBC;
    --default: #FFF9C4;
    --low: #DCEDC8;
    --placeholder: #b1b1b1;
    --inputoutline: #808080;
    --head1: #cccccc;
    --head2: #e4e4e4;
    --head3: #e4e4e4;
    --belllines: #cccccc;
    --langgreen: #ab47bc;
    --langblue: #1976D2;
    /*height: calc(100% - 56px);*/
    overflow-x: hidden;
}

body.firefox {
    height: calc(100% - 56px);
}

/*
@media (max-width: 900px) {
body {
	height: calc(100% - 59px);
	height: 100%;
}
}*/

.allow_selection {
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.select_all {
    -webkit-touch-callout: all;
    -webkit-user-select: all;
    -khtml-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}

.no_selection {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.is_mobile {
    --iconactivebk: var(--iconhoverbk);
    --bodyactivebk: var(--bodyhoverbk);
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    /* position: relative;*/
}

@font-face {
    font-family: 'RiderAppIcons';
    font-style: normal;
    font-weight: 400;
    src: url(https://cdn.trivory.com/web/fonts/riderappicons.woff) format('woff');
}

@font-face {
    font-family: 'Europa';
    font-style: normal;
    font-weight: 400;
    src: url(europa.woff) format('woff');
}

@font-face {
    font-family: 'Europa';
    font-style: normal;
    font-weight: 700;
    src: url(europa_bold.woff) format('woff');
}

@font-face {
    font-family: 'Metropolis';
    font-style: normal;
    font-weight: 400;
    src: url(Metropolis-Regular.woff) format('woff');
}

@font-face {
    font-family: 'Metropolis';
    font-style: normal;
    font-weight: 500;
    src: url(Metropolis-Medium.woff) format('woff');
}

@font-face {
    font-family: 'Metropolis';
    font-style: normal;
    font-weight: 600;
    src: url(Metropolis-SemiBold.woff) format('woff');
}

.riderappicons {
    font-family: 'RiderAppIcons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--accent);
    color: #ffffff;
}

::-moz-selection {
    background: var(--accent);
    color: #ffffff;
}

.header_float {
    height: 64px;
    background-color: var(--main);
    position: fixed;
    width: 100%;
    border-bottom-style: solid;
    border-color: var(--divline);
    border-bottom-width: 1px;
    top: 0;
    transition: box-shadow 0.2s;
    z-index: 30;
    height: 60px;
    margin-top: -4px;
}

.header_float.shadow {
    box-shadow: 0 0px 8px var(--shadow);
}

.header_menu {
    float: left;
    padding: 8px;
    padding-left: 14px;
    user-select: none;
}

.header_menu i {
    font-size: 30px;
    padding: 9px;
    color: var(--icons);
    border-radius: 32px;
    cursor: pointer;
    transition: background 0.1s;
}

body:not(.is_mobile) .header_menu i:hover {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) .header_menu i:active,
.header_menu i:active {
    background-color: var(--iconactivebk);
}

.header_title {
    float: left;
    font-size: 24px;
    line-height: 32px;
    padding: 16px;
    padding-left: 3px;
    color: var(--atext);
}

.menu {
    position: fixed;
    transform: translateX(0px);
    width: 270px;
    height: calc(100% - 57px);
    top: 57px;
    transition: transform 0.25s;
    color: var(--atext);
    /*padding-top: 10px;*/
    background-color: var(--main);
    z-index: 10;
    overflow-x: hidden;
}

.menu_item_padding_top {
    margin-top: 10px;
}

.mobile_header {
    /*margin-bottom: 10px;*/
    overflow: hidden;
    border-bottom-style: solid;
    border-color: var(--divline);
    border-bottom-width: 1px;
    display: none;
    height: 61px;
    margin-top: -3px;
    transition: box-shadow 0.2s;
}

@media (min-width: 901px) {
    .mobile_header_shadow {
        display: none;
    }
}

.mobile_header_shadow.shadow {
    box-shadow: 0 0px 6px var(--shadow);
}

.mobile_header_shadow {
    height: 59px;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    transition: box-shadow 0.2s;
    pointer-events: none;
}

.menu_item {
    font-size: 21px;
    line-height: 26px;
    padding: 12px;
    padding-left: 24px;
    cursor: pointer;
    border-radius: 30px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    transition: background 0.1s;
}

.menu_item.small {
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

@media (max-width: 900px) {
    .menu_item.small {
        padding-top: 11px;
        padding-bottom: 11px;
    }
}

.menu_item.small i {
    visibility: hidden;
}

.menu_item>i {
    font-size: 28px;
    vertical-align: middle;
    margin-top: -4px;
    padding-right: 21px;
    color: var(--icons);
}

.draft_indicator {
    font-size: 16px;
    float: right;
    color: var(--red);
    line-height: 20px;
    padding: 3px 0px;
    /*transition: color 0.05s;*/
    display: none;
    height: 20px;
}

.draft_indicator i {
    font-size: 20px;
    float: left;
    padding-right: 3px;
    /*transition: color 0.05s;*/
}

.draft_indicator div {
    float: left;
    padding-right: 9px;
    line-height: 21px;
}

.menu_item.disabled {
    opacity: 0.65;
    /*pointer-events: none;*/
}

body:not(.is_mobile) .menu_item:hover,
body:not(.is_mobile) .menu_item:focus {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) .menu_item:active,
.menu_item:active {
    background-color: var(--iconactivebk);
}

.menu_active,
body:not(.is_mobile) .menu_active:hover {
    background-color: #ceffee;
    color: #075f41;
    /*font-weight: 500;*/
}

.menu_active_parent {
    color: #075f41;
}

.menu_active i,
.menu_active_parent i,
.menu_active .draft_indicator {
    color: #075f41;
}

body:not(.is_mobile) .menu_active:active,
.menu_active:active {
    background-color: #b5ffe6;
}

.footer {
    font-size: 17px;
    /*bottom: 0px;*/
    position: -webkit-sticky;
    position: sticky;
    padding: 18px;
    top: 100vh;
    color: var(--btext);
}

.footer i {
    vertical-align: middle;
    margin-top: -5px;
    font-size: 22px;
}

.footer a {
    color: var(--btext);
    transform: 0.1s color;
}

.footer a:hover {
    color: var(--atext);
}

.main_container {
    margin-top: 56px;
    margin-left: 270px;
    transition: margin-left 0.25s, width 0.25s;
    width: calc(100% - 340px);
    padding-left: 35px;
    padding-right: 35px;
    /*height: 100%;*/
}

.firefox .main_container {
    height: 100%;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.loader {
    width: 200%;
    height: 3px;
    background: linear-gradient(to right, var(--accent) 0%, var(--accent) 50%, #dedede 50%);
    top: 59px;
    position: absolute;
    transform: translateX(0%);
    transition-property: transform;
    transition-duration: 6s;
    transition-timing-function: cubic-bezier(0.15, 0.6, 0.05, 1);
    transition-delay: 0s;
    margin-left: -100%;
    animation: 0.1s fadeIn forwards;
    will-change: transform;
}

.modal_loader {
    top: 0px !important;
    height: 5px;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.loader_complete {
    transition-timing-function: cubic-bezier(0.4, 0.15, 0.8, 0.6);
    transition-duration: 0.1s;
    transform: translateX(50%) !important;
    animation: 0.22s fadeOut forwards;
}

.loader_error {
    background: linear-gradient(to right, red 0%, red 50%, #dedede 50%);
    animation: 0.27s fadeOut forwards;
}

#loader {
    display: none;
}

@media (min-width: 901px) {
    #title_mobile {
        display: none;
    }
}

@media (max-width: 900px) {
    #title {
        display: none;
    }

    .menu_item_padding_top {
        margin-top: 0px;
    }

    .header_menu {
        padding-left: 12px;
    }

    .header_title {
        /*padding-left: 6px;*/
        padding-right: 0;
    }

    .menu_item {
        padding-left: 22px;
        border-radius: 0px;
    }

    .menu_item>i {
        padding-right: 21px;
    }

    .menu {
        box-shadow: 0px 0px 12px rgb(60, 60, 60);
        top: 0px;
        padding-top: 0px;
        height: 100%;
        padding-bottom: 100px;
        width: 280px !important;
        transform: translateX(-294px);
        z-index: 50;
    }

    .mobile_header {
        display: block;
    }

    .header_float {
        height: 61px;
        margin-top: -3px;
    }

    #menu_background.active {
        pointer-events: auto;
        opacity: 0.45;
    }

    .main_container {
        margin-left: 0px !important;
        margin-top: 59px;
        width: 100% !important;
        padding-left: 0px;
        padding-right: 0px;
        transition: none;
    }

    .footer {
        bottom: 100px;
    }

    .loader {
        top: 60px;
    }

    .content.above_content {
        padding-bottom: 20px !important;
    }
}

body:not(.is_mobile) #icon_help:hover {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) #icon_help:active,
#icon_help:active {
    background-color: var(--iconactivebk);
}

#icon_help {
    pointer-events: auto;
    position: absolute;
    left: 0;
    color: var(--searchicons);
    padding-left: 5px;
    font-size: 32px;
    margin-left: 27px;
    line-height: 32px;
    cursor: pointer;
    padding: 4px;
    margin-top: 4px;
    border-radius: 20px;
    transition: background 0.1s;
}

#menu_background {
    pointer-events: none;
    background: black;
    transition: opacity 0.25s;
    position: fixed;
    top: -500px;
    left: -500px;
    bottom: -500px;
    right: -500px;
    z-index: 40;
    opacity: 0;
}

#modal_background {
    pointer-events: none;
    background: black;
    transition: opacity 0.2s;
    position: fixed;
    top: -500px;
    left: -500px;
    bottom: -500px;
    right: -500px;
    z-index: 40;
    opacity: 0;
}

#modal_background.active {
    pointer-events: auto;
    opacity: 0.45;
}

#modal_background.image_modal_background.active {
    opacity: 0.85;
}

#dropdownmenu_background {
    pointer-events: auto;
    position: fixed;
    top: -500px;
    left: -500px;
    bottom: -500px;
    right: -500px;
    z-index: 34;
}

#overflowmenu_background {
    pointer-events: auto;
    position: fixed;
    top: -500px;
    left: -500px;
    bottom: -500px;
    right: -500px;
    z-index: 34;
}

#profile_background {
    pointer-events: auto;
    position: fixed;
    top: -500px;
    left: -500px;
    bottom: -500px;
    right: -500px;
    z-index: 32;
}

#tray_background {
    pointer-events: none;
    background: black;
    transition: opacity 0.2s;
    position: fixed;
    top: -500px;
    left: -500px;
    bottom: -500px;
    right: -500px;
    z-index: 32;
    opacity: 0;
}

#tray_background.active {
    pointer-events: auto;
    opacity: 0.45;
}

.button {
    float: left;
    font-size: 20px;
    line-height: 32px;
    padding: 3px;
    padding-left: 8px;
    color: var(--accenttext);
    border-radius: 10px;
    border-width: 2px;
    border-color: var(--accent);
    border-style: solid;
    padding-right: 9px;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
    cursor: pointer;
    font-weight: 500;
    -webkit-user-select: none;
    user-select: none;
}

.button.small {
    padding: 1px 7px;
    padding-left: 5px;
}

.button.red {
    color: var(--redtext);
    border-color: var(--red);
}

.button.primary {
    background-color: var(--accent);
    color: white;
}

.button.disabled {
    pointer-events: none;
    border-color: #b3b3b3;
}

.button.disabled:not(.primary) {
    color: var(--gray);
    border-color: #adadad;
}

.button.primary.disabled {
    background-color: #b3b3b3;
}

.button span:nth-child(1) {
    margin-right: 2px;
}

body:not(.is_mobile) .button:hover {
    background-color: var(--accenthover);
}

body:not(.is_mobile) .button:active,
.button:active {
    background-color: var(--accentactive);
}

body:not(.is_mobile) .button.red:hover {
    background-color: var(--redhover);
}

body:not(.is_mobile) .button.red:active,
.button.red:active {
    background-color: var(--redactive);
}

body:not(.is_mobile) .button.primary:hover {
    background-color: var(--accentprimaryhover);
    border-color: var(--accentprimaryhover);
}

body:not(.is_mobile) .button.primary:active,
.button.primary:active {
    background-color: var(--accentprimaryactive);
    border-color: var(--accentprimaryactive);
}

.button i {
    font-size: 27px;
    vertical-align: middle;
    margin-top: -4.5px;
    padding-right: 5.5px;
    margin-left: -3.5px;
}

.button i.add_icon {
    font-size: 29px;
    margin-left: -4.5px;
    margin-right: -1px;
}

.button.small i {
    padding-right: 4px;
    margin-left: -1px;
}

.button_right {
    float: right;
}

.button.collapsed {
    padding: 3px 6px;
    font-size: 0px;
    width: 27px;
    height: 32px;
    overflow: hidden;
}

.button.collapsed i,
.button.collapsed i.sync_spin {
    padding: 0;
    margin: 0;
}

.button.collapsed i.add_icon {
    padding: 0;
    margin: 0;
    margin-left: -1px;
    margin-top: 1px;
}

.buttons {
    overflow: hidden;
}

@keyframes modalIn {
    0% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

.modal {
    position: fixed;
    z-index: 60;
    width: 45%;
    background-color: var(--main);
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 12px 0px rgb(60, 60, 60);
    border-radius: 10px;
    display: none;
    min-width: 600px;
    max-width: 1150px;
    color: var(--atext);
    transition: pointer-events 0.25s, visibility 0.25s;
}

.image_modal {
    top: 47%;
    left: 50%;
    width: 93% !important;
    height: 85% !important;
    max-width: 850px !important;
    max-height: unset !important;
    background: transparent;
    min-width: 0px !important;
    box-shadow: unset;
}

.image_modal .modal_content>img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.small_modal {
    min-width: 450px;
    max-width: 650px;
    width: 20%;
}

.medium_modal {
    width: 555px;
    min-width: 450px;
}

.modalIn {
    animation: 0.2s modalIn forwards;
    visibility: visible;
    pointer-events: auto;
}

@keyframes modalOut {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    80% {
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%) scale(0.95);
        opacity: 0;
    }
}

.modalOut {
    animation: 0.2s modalOut forwards;
    visibility: hidden;
    pointer-events: none !important;
}

.modalOut * {
    pointer-events: none !important;
}

.filter_bar {
    padding-top: 8px;
    height: 38px;
    /*z-index: 35;*/
    position: relative;
}

.menu_dropdown {
    float: left;
    color: var(--atext);
    position: relative;
}

.menu_dropdown.lang_dropdown {
    float: right;
    font-weight: 400;
}

.menu_dropdown.disabled {
    background-color: var(--inputdisabled);
    pointer-events: none;
    border-radius: 7px;
}

.menu_dropdown.disabled .menu_dropdown_selected {
    border-style: dotted;
}

.menu_dropdown_selected {
    font-size: 20px;
    padding: 7px;
    border-radius: 7px;
    transition: 0.1s background, 0.1s border;
    cursor: pointer;
    border: 2px solid var(--inputoutline);
}

.menu_dropdown.lang_dropdown .menu_dropdown_selected {
    padding: 0px;
    border: 0px;
    color: var(--btext);
    font-size: 18px;
    line-height: 24px;
}

.menu_dropdown_selected.error {
    border: 2px solid var(--red) !important;
}

.menu_dropdown_selected .material-icons,
.menu_dropdown_selected .riderappicons {
    font-size: 22px;
    vertical-align: middle;
    margin-top: -3px;
    padding-right: 6px;
    color: var(--icons)
}

.menu_dropdown.dropdown_no_icon .menu_dropdown_selected .material-icons:first-child,
.menu_dropdown.dropdown_no_icon .menu_dropdown_selected .riderappicons:first-child {
    display: none;
}

.menu_dropdown_selected .material-icons:last-child,
.menu_dropdown_selected .riderappicons:last-child {
    padding-right: 4px;
    margin-right: -6px;
    color: var(--graytext);
    padding-left: 4px;
    font-size: 26px;
    line-height: 16px;
}

.menu_dropdown.lang_dropdown .menu_dropdown_selected .material-icons:last-child,
.menu_dropdown.lang_dropdown .menu_dropdown_selected .riderappicons:last-child {
    padding-left: 0px;
}

.menu_dropdown_options {
    position: absolute;
    left: 2px;
    top: 1px;
    /* width: 151px; */
    text-align: left;
    background-color: var(--main);
    border-radius: 5px;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 1px 4px var(--shadow);
    transform-origin: top left;
    display: none;
    z-index: 35;
    pointer-events: auto;
}

.is_firefox .menu_dropdown_options {
    scrollbar-gutter: stable;
}

.lang_dropdown_right {
    left: unset;
    right: 0px;
    transform-origin: top right;
    top: -3px;
}

.dropdown_right {
    left: unset;
    right: 2px;
    transform-origin: top right;
}

.is_mobile .menu_dropdown_options {
    top: -2px;
    left: -1px;
}

.is_mobile .lang_dropdown_right {
    left: unset;
    right: 0px;
    top: -5px;
}

.is_mobile .dropdown_right {
    left: unset;
    right: -1px;
    top: -2px;
}

.menu_dropdown_options.dropdowncutoff {
    top: unset;
    bottom: 1px;
    transform-origin: bottom left;
}

.menu_dropdown_options.dropdown_right.dropdowncutoff,
.menu_dropdown_options.lang_dropdown_right.dropdowncutoff {
    transform-origin: bottom right;
}

.is_mobile .menu_dropdown_options.dropdowncutoff {
    bottom: -2px;
}

.dropdown_option {
    padding: 7px 7px;
    font-size: 20px;
    cursor: pointer;
    transition: 0.1s background;
    white-space: nowrap;
    padding-right: 11px;
}

.is_mobile .dropdown_option {
    padding: 9px 10px;
    padding-right: 13px;
}

.dropdown_option:first-child {
    padding-top: 8px !important;
    padding-bottom: 6px !important;
}

.dropdown_option:last-child {
    padding-bottom: 8px !important;
    padding-top: 6px !important;
}

.is_mobile .dropdown_option:first-child {
    padding-top: 11px !important;
    padding-bottom: 8px !important;
}

.is_mobile .dropdown_option:last-child {
    padding-bottom: 11px !important;
    padding-top: 8px !important;
}

/*
body:not(.is_mobile) .menu_dropdown_selected:hover {
	background-color: var(--bodyhoverbk);
}

body:not(.is_mobile) .menu_dropdown_selected:active, .menu_dropdown_selected:active {
	background-color: var(--bodyactivebk);
}*/

.menu_dropdown_selected:active {
    border: 2px solid var(--accent);
}

body:not(.is_mobile) .dropdown_option:hover {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) .dropdown_option:active,
.dropdown_option:active {
    background-color: var(--iconactivebk);
}

.dropdown_option .material-icons,
.dropdown_option .riderappicons {
    vertical-align: middle;
    margin-top: -3px;
    font-size: 22px;
    padding-right: 6px;
    color: var(--icons);
}

@keyframes dropdownIn {
    0% {
        transform: scaleX(0.85) scaleY(0.6);
        background-color: transparent;
    }

    20% {
        background-color: transparent;
    }

    40% {
        background-color: var(--main);
    }

    100% {
        transform: scale(1);
        background-color: var(--main);
    }
}

@keyframes dropdownInOpts {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

body:not(.is_mobile) .dropdownIn {
    animation: 0.2s dropdownIn forwards;
}

body:not(.is_mobile) .dropdownIn .dropdown_option {
    animation: 0.3s dropdownInOpts forwards;
}

@keyframes dropdownInMobile {
    0% {
        transform: scaleX(0.85) scaleY(0.65);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1);
        background-color: var(--main);
    }
}

.is_mobile .dropdownIn {
    animation: 0.2s dropdownInMobile forwards;
}

@keyframes dropdownOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.dropdownOut {
    animation: 0.2s dropdownOut forwards;
    pointer-events: none !important;
}

.filter_row {
    float: right;
}

.indropdown .menu_dropdown_selected {
    pointer-events: none;
}

.menu_div {
    width: 100%;
    margin: 11px 0px;
    height: 1px;
    background-color: var(--divline);
}

.modal_topbar {
    overflow: hidden;
    padding: 8px;
    color: var(--atext);
}

.modal_title {
    font-size: 24px;
    float: left;
    padding-left: 8px !important;
    font-weight: 500;
    padding: 5px;
    min-height: 30px;
    width: calc(100% - 16px);
}

.modal_exit {
    float: right;
    padding: 5px;
    border-radius: 30px;
    color: var(--icons);
    transition: background 0.1s;
    cursor: pointer;
}

.modal_exit i {
    font-size: 31px;
    margin: -1px;
}

body:not(.is_mobile) .modal_exit:hover {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) .modal_exit:active,
.modal_exit:active {
    background-color: var(--iconactivebk);
}

body:not(.is_mobile) .modal_edit:active,
.modal_edit:active {
    color: var(--accenttext);
    background-color: var(--accentactive);
}

.modal_buttons {
    padding: 13px;
    padding-top: 15px;
}

.modal_content {
    padding: 0px 16px;
    font-size: 20px;
    position: relative;
    overflow: hidden;
}

#modal_shadow_1 {
    height: 10px;
    position: absolute;
    top: -10px;
    left: 16px;
    right: 16px;
}

.modal_shadow {
    box-shadow: 0 0px 8px var(--shadow);
}

.modal_shadow_transition {
    transition: box-shadow 0.2s;
}

#modal_shadow_2 {
    height: 10px;
    position: absolute;
    bottom: -10px;
    left: 16px;
    right: 16px;
}

.modal_shadow_cover {
    left: 0px;
    right: unset;
    box-shadow: none;
    background: white;
    width: 16px;
    position: absolute;
    height: 45px;
    top: 0px;
}

.modal_shadow_cover.right {
    left: unset;
    right: 0px;
}

.modal_shadow_cover.search {
    height: 50px;
}

.full_modal_shadow {
    /*left: 0px !important;
    right: 0px !important;*/
}

.picker_modal_shadow {
    height: 45px !important;
    top: 0px !important;
    pointer-events: none;
}

.search_modal_modal_shadow {
    height: 50px !important;
    top: 0px !important;
    pointer-events: none;
}

.dropdownheight {
    height: 38px;
}

.settings_header {
    font-size: 19px;
    padding-bottom: 4px;
    padding-top: 2px;
}

[data-tooltip] {
    position: relative;
}

[data-tooltip]:before,
[data-tooltip]:after {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out, transform 0.15s ease-in-out;
    transform: translateY(0px) translateX(-50%) scale(0.7);
    top: 75%;
    left: 50%;
    pointer-events: none;
}

body:not(.is_mobile) [data-tooltip]:hover:before,
body:not(.is_mobile) [data-tooltip]:hover:after,
body:not(.is_mobile) [data-tooltip]:focus:before,
body:not(.is_mobile) [data-tooltip]:focus:after {
    visibility: visible;
    opacity: 1;
    transform: translateY(8px) translateX(-50%) scale(1);
}

[data-tooltip]:after {
    z-index: 90;
    padding: 5px 6px;
    background-color: rgba(60, 60, 60, 0.85);
    color: white;
    content: attr(data-tooltip);
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
    border-radius: 8px;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .modal {
        width: calc(100% - 30px);
        min-width: unset;
    }
}

/*media max width end*/


.spinner {
    animation: rotator 3s linear infinite;
    transform-origin: center;
}

@keyframes rotator {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.spinner .path {
    stroke-dasharray: 265;
    stroke-dashoffset: 0;
    transform-origin: center;
    /*stroke: #1E88E5;*/
    stroke: var(--accent);
    animation: dash 1.3s ease-in-out infinite;
}

@keyframes dash {
    0% {
        stroke-dashoffset: 255;
    }

    60% {
        stroke-dashoffset: 65;
        transform: rotate(90deg);
    }

    100% {
        stroke-dashoffset: 255;
        transform: rotate(360deg);
    }
}

.scroll_bottom_loader {
    height: 50px;
    width: 100%;
    display: block;
    text-align: center;
    padding-top: 8px;
    padding-bottom: 22px;
}

.prompt_error {
    text-align: center;
    color: var(--btext);
    padding-bottom: 26px;
    padding-top: 5px;
}

.prompt_error i {
    font-size: 50px;
}

.prompt_error div {
    font-size: 19px;
    padding-top: 8px;
}

.errorbox {
    text-align: center;
    color: var(--btext);
    padding-bottom: 26px;
    padding-top: 5px;
    top: 48%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

.errorbox i {
    font-size: 60px;
}

.errorbox div {
    font-size: 20px;
    padding-top: 8px;
}

.listbottomerror {
    text-align: center;
    padding-top: 14px;
    height: 66px;
}

.listbottomerror i {
    font-size: 42px;
}

.listbottomerror div:nth-child(2) {
    font-size: 22px;
    display: inline-block;
    line-height: 44px;
    vertical-align: top;
    padding-left: 6px;
    padding-right: 14px;
}

.listbottomerror div:nth-child(3) {
    vertical-align: top;
    display: inline-block;
    font-size: 20px;
    float: unset;
    padding: 3px 6px;
    font-weight: 500;
    margin-top: 1px;
}

.header_right_icon {
    float: right;
    padding-right: 8px;
    padding-left: 8px;
}

.header_right_bigger i {
    font-size: 38px;
    width: 38px;
    height: 38px;
    padding: 5px;
}

.header_right_bigger {
    padding-right: 13px;
    padding-left: 0px;
}

#help_icon {
    padding-right: 4px;
}

.header_menu.small i {
    padding: 6px;
    margin: 2px;
}

.school_select {
    float: right;
    margin: 10px;
    height: 36px;
    padding: 4px;
    /* background: #ebebeb; */
    border-radius: 10px;
    margin-right: 8px;
    transition: background 0.1s;
    cursor: pointer;
    color: var(--atext);
}

.school_select div:nth-child(1) {
    height: 32px;
    width: 32px;
    float: left;
    padding: 2px;
}

.school_select div:nth-child(1) img {
    height: 100%;
    width: 100%;
}

.school_select div:nth-child(1) svg {
    display: none;
}

.school_select div:nth-child(2) {
    float: left;
    font-size: 21px;
    line-height: 36px;
    padding-left: 5px;
    padding-right: 1px;
    max-width: 160px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.school_select div:nth-child(3) {
    float: left;
    height: 36px;
    margin-left: 0px;
    margin-right: -3px;
}

.school_select div:nth-child(3) i {
    line-height: 36px;
    font-size: 28px;
    color: var(--icons);
    margin-top: -1px;
}

.no_school.school_select div:nth-child(2) {
    max-width: calc(125px + 36px);
}

.no_school.school_select div:nth-child(1) {
    display: none;
}

.loading.school_select div:nth-child(2) {
    visibility: hidden;
}

.loading.school_select div:nth-child(1) svg {
    display: block;
}

.loading.school_select div:nth-child(1) img {
    display: none;
}

body:not(.is_mobile) .school_select:hover {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) .school_select:active,
.school_select:active {
    background-color: var(--iconactivebk);
}

#search_results {
    width: 550px;
    position: absolute;
    left: calc(50% + 5px);
    transform: translateX(-50%);
    color: var(--atext);
    background: var(--main);
    top: 60px;
    box-shadow: 0 1px 7px var(--shadow);
    border-radius: 9px;
    display: none;
}

@media (max-width: 900px) {
    #search_results {
        width: 100%;
        left: 0;
        transform: unset;
    }
}

.header_search {
    float: left;
    font-size: 24px;
    line-height: 32px;
    padding: 9px;
    padding-left: 18px;
    color: var(--atext);
    position: absolute;
    width: 550px;
    max-width: calc(100vw - 750px);
    /* margin-left: 14px; */
    left: 50%;
    transform: translateX(-50%);
    /* padding-right: 18px; */
    display: none;
}

@media (max-width: 1120px) and (min-width: 901px) {
    .header_search {
        float: left;
        font-size: 24px;
        line-height: 32px;
        padding: 9px;
        padding-left: 18px;
        color: var(--atext);
        position: absolute;
        width: 550px;
        max-width: calc(100vw - 630px);
        /* margin-left: 14px; */
        left: calc(50% - 60px);
        transform: translateX(-50%);
        /* padding-right: 18px; */
        display: none;
    }

    .header_title {
        width: 119px;
        overflow: hidden;
    }
}

.header_search_visible.header_search {
    display: block;
}

.header_search input {
    border: none;
    float: left;
    font-size: 20px;
    line-height: 32px;
    padding: 7px;
    color: var(--atext);
    background-color: var(--search);
    border-radius: 9px;
    padding-left: 49px;
    padding-right: 48px;
    width: 100%;
    transition: background 0.1s, box-shadow 0.1s;
    margin: 0;
    border: none !important;
}

.header_search input:focus,
.header_search.search_has_text input {
    box-shadow: 0 0.5px 5px var(--shadow);
    background-color: white;
    -webkit-appearance: none;
}

input:focus,
textarea:focus {
    outline: none;
}

.header_search .search_icon {
    position: absolute;
    left: 0;
    color: var(--searchicons);
    font-size: 30px;
    padding-left: 28px;
    line-height: 47px;
    pointer-events: none;
    padding-right: 5px;
}

.header_search .clear_icon {
    position: absolute;
    right: 0;
    color: var(--searchicons);
    font-size: 30px;
    margin-right: 13px;
    line-height: 32px;
    cursor: pointer;
    padding: 4px;
    margin-top: 3px;
    border-radius: 20px;
    transition: background 0.1s;
    display: none;
}

.header_search.search_has_text .clear_icon {
    display: block;
}

body:not(.is_mobile) .header_search .clear_icon:hover {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) .header_search .clear_icon:active,
.header_search .clear_icon:active {
    background-color: var(--iconactivebk);
}

.mobile_search {
    display: none;
    float: right;
    padding-right: 1px;
    padding-left: 0px;
}

#icon_search_mobile {
    display: none;
}

#mobile_account {
    display: none;
}

@media (max-width: 900px) {

    .header_search,
    .header_search_visible.header_search {
        display: none;
    }

    .header_search input {
        transition: none;
    }

    .in_search .header_search {
        display: block;
        width: calc(100vw - 10px);
        max-width: unset;
        margin-left: -13px;
        padding-right: 0;
        position: relative;
        transform: none;
        left: unset;
        padding-left: 18px;
        margin-top: -1px;
    }

    .in_search .header_search input {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .in_search .header_contribute {
        display: none;
    }

    .in_search .mobile_search,
    .in_search .mobile_search_visible.mobile_search {
        display: none;
    }

    .in_search .header_menu {
        display: none;
    }

    .in_search .header_title {
        display: none;
    }

    .mobile_search_visible.mobile_search {
        display: block;
    }

    .school_select {
        display: none;
    }

    #desktop_account {
        display: none;
    }

    #mobile_account {
        display: block;
    }

    #icon_search_mobile {
        display: block;
        margin-top: 4px;
    }

    .clear_icon {
        margin-top: 4px;
    }

    #icon_search_desktop {
        display: none;
    }

    .header_search .clear_icon {
        margin-right: 10px;
        font-size: 32px;
    }

    .header_search input {
        padding-left: 56px;
        padding-right: 56px;
    }
}

#mobile_search {
    padding-right: 4px;
}

body:not(.is_mobile) #icon_search_mobile:hover {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) #icon_search_mobile:active,
#icon_search_mobile:active {
    background-color: var(--iconactivebk);
}

#icon_search_mobile {
    pointer-events: auto;
    position: absolute;
    left: 0;
    color: var(--searchicons);
    padding-left: 5px;
    font-size: 32px;
    margin-left: 27px;
    line-height: 32px;
    cursor: pointer;
    padding: 4px;
    margin-top: 3px;
    border-radius: 20px;
    transition: background 0.1s;
}

.content {
    padding-left: 2.7%;
    padding-right: 2.7%;
    color: var(--atext);
    padding-bottom: 8px;
    display: none;
}

.heading_banner {
    margin-bottom: 60px;
    position: -webkit-sticky;
    position: sticky;
    top: calc(59px + 59px);
    z-index: 9;
    margin-top: -60px;
    background: var(--main);
    clip-path: inset(-10px 0px) !important;
    -webkit-clip-path: inset(-10px 0.5px) !important;
    display: none;

    /* height: 42px; */
    border-bottom-width: 1px;
    border-bottom-color: var(--divline);
    border-bottom-style: solid;
    margin-left: -3px;
    width: calc(100% + 6px);
    clip-path: inset(-10px 0px);
    -webkit-clip-path: inset(-10px 0px);
    transition: 0.2s box-shadow;
}

.heading_banner.shadow {
    box-shadow: 0 0px 8px var(--shadow);
}

@media (min-width: 901px) {
    .heading_banner.shadow {
        box-shadow: 0 6px 8px -6px var(--shadow);
    }
}

.heading_banner i {
    color: var(--icons);
    font-size: 30px;
    padding: 6px;
    float: left;
    margin-left: 6px;
    flex-shrink: 0;
}

.heading_banner img {
    width: 30px;
    height: 30px;
    padding: 6px;
    float: left;
    margin-left: 6px;
    flex-shrink: 0;
}

.heading_banner div:nth-child(2) {
    float: left;
    font-size: 18px;
    /* line-height: 42px; */
    font-weight: 500;
    padding-left: 8px;
    padding-right: 10px;
    /* width: calc(100% - 150px); */
    /* overflow: hidden; */
    /* white-space: nowrap; */
    /* text-overflow: ellipsis; */
    flex-grow: 1;
    /* padding-top: 10px;
    padding-bottom: 10px; */
    line-height: 22px;

    display: flex;
    align-items: center;
}

.heading_banner div:nth-child(2) > span {
    padding: 5px 0px;
}

.heading_banner div:nth-child(3) {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.heading_banner div:nth-child(3) > .button {
    font-size: 18px;
    font-weight: 500;
    float: left;
    border: none;
    display: inline-block;
    line-height: 30px;
    height: 30px;
    margin-right: 6px;
}

@media (max-width: 900px) {
    .heading_banner {
        /* width: calc(100% - 8px); */
        width: 100%;
        margin-left: 0;
        /* padding: 0px 4px; */
        padding: 0px 0px;
    }

    .heading_banner i {
        margin-left: 9px;
    }
}

.heading {
    overflow: hidden;
    border-bottom-width: 1px;
    border-bottom-color: var(--divline);
    border-bottom-style: solid;
    padding-bottom: 5px;
    padding-top: 8px;
    position: -webkit-sticky;
    position: sticky;
    top: 56px;
    background: var(--main);
    z-index: 10;
    transition: 0.2s box-shadow;
    margin-bottom: 60px;
    clip-path: inset(0px 0px -10px 0px);
    -webkit-clip-path: inset(0px 0px -10px 0px);
}

.heading.selection::after {
    background: var(--accent);
    position: absolute;
    content: "";
    left: 1px;
    right: 1px;
    top: 7px;
    bottom: 4px;
    z-index: -1;
    border-radius: 10px;
}

@media (max-width: 900px) {
    .heading.selection::after {
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        border-radius: 0px;
    }
}

.heading.selection {
    --icons: white;
    color: white;
}

.heading.selection .button {
    color: white;
    border-color: white;
}

body:not(.is_mobile) .heading.selection .button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

body:not(.is_mobile) .heading.selection .button:active,
.heading.selection .button:active {
    background-color: white;
    color: var(--accenttext);
}

.heading.selection .button.primary {
    background-color: white;
    color: var(--accenttext);
    border-color: white;
}

body:not(.is_mobile) .heading.selection .button.primary:hover {
    background-color: white;
    color: var(--accenttext);
    border-color: white;
}

body:not(.is_mobile) .heading.selection .button.primary:active,
.heading.selection .button.primary:active {
    background-color: white;
    color: var(--accenttext);
    border-color: white;
}

.heading.selection .button.disabled {
    background-color: #d6d6d6;
    color: var(--accenttext);
    border-color: #d6d6d6;
}

body:not(.is_mobile) .heading.selection .general_round_button i:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

body:not(.is_mobile) .heading.selection .general_round_button i:active,
.heading.selection .general_round_button i:active {
    background-color: white;
    color: var(--accent);
}

.heading.selection .general_round_button.disabled i {
    color: #d6d6d6;
}

body:not(.is_mobile) .heading.selection .actions_overflow i:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

body:not(.is_mobile) .heading.selection .actions_overflow i:active,
.heading.selection .actions_overflow i:active {
    background-color: white;
    color: var(--accent);
}

.heading.shadow,
.actionbar.shadow {
    box-shadow: 0 0px 8px var(--shadow);
}

.actionbar {
    overflow: hidden;
    border-top-width: 1px;
    border-top-color: var(--divline);
    border-top-style: solid;
    padding-top: 5px;
    padding-bottom: 7px;
    bottom: 0px;
    background: var(--main);
    z-index: 10;
    transition: 0.2s box-shadow;
    height: 48px;
    clip-path: inset(-10px 0px 0px 0px);
    -webkit-clip-path: inset(-10px 0px 0px 0px);
}

.actionbar.stick,
.actionbar.sticky {
    position: -webkit-sticky;
    position: sticky;
    margin-top: 61px;
}

.actionbar.nostick,
.actionbar.notsticky {
    margin-top: 61px;
}

@media (min-width: 901px) {
    .heading {
        padding-left: 3px;
        margin-left: -3px;
        padding-right: 3px;
        width: 100%;
        clip-path: inset(-10px 0px);
        -webkit-clip-path: inset(-10px 0.5px);
    }

    .actionbar {
        padding-left: 3px;
        margin-left: -3px;
        padding-right: 3px;
        width: 100%;
        clip-path: inset(-10px 0px);
        -webkit-clip-path: inset(-10px 0.5px);
    }

    .heading.shadow {
        box-shadow: 0 6px 8px -6px var(--shadow);
    }

    .actionbar.shadow {
        box-shadow: 0 -6px 8px -6px var(--shadow);
    }
}

.page_title {
    float: left;
    font-size: 24px;
    line-height: 48px;
    padding-left: 5px;
    max-width: calc(100% - 166px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 500;
}

.page_title:nth-child(1),
.page_back[style*="display: none;"]~.page_title {
    padding-left: 8px;
    max-width: calc(100% - 118px);
}

.page_back {
    float: left;
    user-select: none;
    border-radius: 32px;
}

.page_back i {
    font-size: 32px;
    padding: 8px;
    color: var(--icons);
    border-radius: 32px;
    cursor: pointer;
    transition: background 0.1s;
}

body:not(.is_mobile) .page_back i:hover {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) .page_back i:active,
.page_back i:active {
    background-color: var(--iconactivebk);
}

.actions .button {
    margin-top: 3px;
}

.actions {
    float: right;
    padding-right: 6px;
}

@media (max-width: 900px) {
    .actions {
        padding-right: 8px;
    }
}

.actions .button:not(:first-child) {
    margin-left: 9px;
}

.actions_overflow {
    float: left;
    user-select: none;
    margin-right: -4px;
    margin-left: 3px;
    display: none;
    border-radius: 32px;
}

.actions_overflow i,
#overflowmenu_global i {
    font-size: 32px;
    padding: 8px;
    color: var(--icons);
    border-radius: 32px;
    cursor: pointer;
    transition: background 0.1s;
}

.disabled .actions_overflow,
.disabled.actions_overflow {
    pointer-events: none;
}

.disabled .actions_overflow i,
.disabled.actions_overflow i {
    color: var(--icondisabled);
}

.disabled .grid_item_actions,
.disabled.grid_item_actions {
    pointer-events: none;
}

body:not(.is_mobile) .actions_overflow i:hover {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) .actions_overflow i:active,
.actions_overflow i:active {
    background-color: var(--iconactivebk);
}

.list {
    padding: 7px 2px;
    padding-top: 6px !important;
    position: relative;
    margin-top: -61px;
}

.general_container {
    padding: 12px 8px;
    position: relative;
    margin-top: -61px;
    margin-bottom: -61px;
}

.general_container.no_bottom {
    margin-bottom: unset !important;
}

.item {
    height: 64px;
    border-bottom: 1px solid var(--divline2);
    padding: 8px 6px;
    transition: background 0.1s;
    cursor: pointer;
    display: flex;
    /* flex-wrap: wrap; */
    flex-basis: 100%;
    justify-content: space-between;
    overflow: hidden;
}

.item.disabled {
    cursor: unset;
    background: var(--main) !important;
    pointer-events: none;
}

.item.unread {
    font-weight: 500;
}

.grid_list {
    margin-bottom: -61px;
}

@media (max-width: 900px) {
    .content {
        padding: 0px;
        padding-bottom: env(safe-area-inset-bottom) !important;
    }

    .heading {
        padding-bottom: 3px;
        padding-top: 3px;
        padding-right: 2px;
        padding-left: 6px;
        top: 59px;
        margin-bottom: 60px;
    }

    .heading_banner {
        top: calc(59px + 55px);
    }

    .list {
        padding: 8px 6px;
        margin-top: -60px;
    }

    .grid_list {
        margin-top: -59px;
        margin-bottom: -54px;
    }

    .general_container {
        padding: 10px 12px;
        margin-top: -61px;
        margin-bottom: -54px;
    }

    .item {
        padding: 8px 8px;
    }

    .item .item_actions {
        margin-right: -4px;
    }

    .actionbar.stick,
    .actionbar.sticky {
        margin-top: 54px;
    }

    .actionbar.nostick,
    .actionbar.notsticky {
        margin-top: 54px;
    }
}

.item:nth-last-child(2) {
    border-bottom: none;
}

.item_name {
    font-size: 22px;
    padding-top: 6px;
    color: var(--atext);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 27px;
}

.item_desc {
    font-size: 17px;
    padding-top: 3px;
    color: var(--btext);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.is_mobile) .item:hover {
    background-color: var(--bodyhoverbk);
}

body:not(.is_mobile) .item:active,
.item:active {
    background-color: var(--bodyactivebk);
}

.item_left {
    /*flex-grow: 1;*/
    flex-shrink: 1;
    overflow: hidden;
    width: 100%;
}

.item_left.item_nodesc .item_name {
    line-height: 52px;
}

.small_event_items .item_left.item_nodesc .item_name {
    line-height: 52px;
}

.item_nodesc .item_desc {
    display: none;
}

.has_primary_action {
    padding-right: 10px;
}

.item_school_groups {
    width: 131px;
    flex-shrink: 0;
    position: relative;
}

.item_school_groups.district {
    width: 96px;
}

.item_school_groups > div {
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
    width: calc(100% - 6px);
    padding-left: 6px;
}

.item_school_groups > div > div.school_group_group {
    margin-bottom: 4px;
    height: 24px;
    width: 100%;
}

.item_school_groups > div > div.school_group_group:last-child {
    margin-bottom: 0px;
}

.item_school_groups > div > div.school_group_group > span {
    display: inline-block;
    background: #5a7d72;
    font-size: 17px;
    line-height: 22px;
    height: 22px;
    padding: 1px 4px;
    border-radius: 5px;
    color: white;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(100% - 8px);
}

.item_school_groups > div > div.district_or_no_schools {
    height: 24px;
    width: 100%;
}

.item_school_groups > div > div.district_or_no_schools > i {
    vertical-align: middle;
    color: #336757;
    margin-right: 6px;
}

.item_school_groups > div > div.district_or_no_schools > span {
    font-size: 18px;
    vertical-align: middle;
}

.item_school_groups > div > div.school_group_schools {
    /* overflow: hidden; */
}

.item_school_groups > div > div.school_group_schools:not(:first-child) {
    margin-top: 5px;
}

.item_school_groups > div > div.school_group_schools > div {
    float: left;
    margin-right: 5px;
}

.item_school_groups > div > div.school_group_schools > div:last-child {
    margin-right: 0px;
}

.item_school_groups > div > div.school_group_schools > div > img {
    height: 24px;
    width: 24px;
}

.item_school_groups > div > div.school_group_schools > div > i {
    color: #646464;
    font-size: 28px;
    margin-top: -2px;
    margin-bottom: -2px;
}

.item_school_groups > div > div.more_schools > i {
    font-size: 28px;
    color: #646464;
    margin-top: -9px;
    margin-bottom: -11px;
}

.item .item_actions {
    visibility: hidden;
    flex-shrink: 0;
}

.item_actions .button {
    margin-top: 10px;
}

.item_actions.outer {
    position: absolute;
    right: 0;
    margin-top: -63px;
    margin-right: 6px;
    pointer-events: none;
}

.item_actions.outer .button {
    background-color: var(--main);
    margin-top: 0px;
    pointer-events: auto;
}

.item_actions.outer .button:active {
    background-color: var(--accentactive);
}

.item_actions .actions_overflow {
    display: block;
}

.item_actions.outer .actions_overflow {
    margin-top: -3px;
    border-radius: 32px;
    pointer-events: auto;
}

@media (max-width: 900px) {
    .item_actions.outer {
        margin-right: 10px;
    }

    .item_actions .button {
        padding: 3px 6px;
        font-size: 0px;
    }

    .item_actions .button i {
        padding: 0;
        margin: 0;
    }

    .overflow_item b {
        font-size: 20px !important;
    }
}

.item_actions .button:last-child {
    margin-right: 2px;
}

.overflow_menu {
    background-color: white;
    position: absolute;
    right: -2px;
    top: -2px;
    z-index: 38;
    box-shadow: 0 1px 4px var(--shadow);
    border-radius: 5px;
    overflow: hidden;
    color: var(--atext);
    display: none;
    transform-origin: top right;
    pointer-events: auto;
}

.overflow_menu.dropdowncutoff {
    top: unset;
    bottom: -2px;
    transform-origin: bottom right;
}

.overflow_item {
    padding-right: 2px;
    overflow: hidden;
    padding-left: 0px;
    cursor: pointer;
    transition: background 0.1s;
    white-space: nowrap;
}

.overflow_item.disabled {
    color: var(--graytext);
    pointer-events: none;
}

.overflow_item.disabled i {
    color: var(--icondisabled) !important;
}

body:not(.is_mobile) .overflow_item:hover {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) .overflow_item:active,
.overflow_item:active {
    background-color: var(--iconactivebk);
}

body:not(.is_mobile) .overflow_item i:hover {
    background-color: unset;
}

body:not(.is_mobile) .overflow_item i:active,
.overflow_item i:active {
    background-color: unset;
}

.overflow_item:first-child {
    padding-top: 1px;
}

.overflow_item:last-child {
    padding-bottom: 1px;
}

.overflow_item i {
    font-size: 28px !important;
    /* float: left; */
    display: inline;
    vertical-align: middle;
}

.overflow_item b {
    font-size: 19px;
    line-height: 44px;
    padding: 8px;
    padding-left: 1px;
    font-weight: unset;
    padding-right: 9px;
    vertical-align: middle;
}

.heading_section:not(:last-child):not(.heading_section_alone) {
    padding-bottom: 20px;
}

.general_round_button {
    user-select: none;
    float: left;
    border-radius: 32px;
}

.general_round_button i {
    font-size: 32px;
    padding: 8px;
    color: var(--icons);
    border-radius: 32px;
    cursor: pointer;
    transition: background 0.1s;
}

body:not(.is_mobile) .general_round_button i:hover {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) .general_round_button i:active,
.general_round_button i:active {
    background-color: var(--iconactivebk);
}

.selected .general_round_button i {
    color: var(--accent) !important;
}

body:not(.is_mobile) .selected .general_round_button i:hover {
    background-color: var(--accenthover);
}

body:not(.is_mobile) .selected .general_round_button i:active,
.selected .general_round_button i:active {
    background-color: var(--accentactive);
}

.general_round_button.disabled {
    pointer-events: none;
}

.general_round_button.disabled i,
.reorder_small_item_container.disabled .general_round_button i {
    color: var(--icondisabled);
    pointer-events: none;
}

.actionbar_page {
    font-size: 20px;
    line-height: 48px;
    width: calc(100% - 114px);
    float: left;
    text-align: right;
    padding-right: 12px;
    color: var(--btext);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (min-width: 901px) {
    .actionbar_page {
        width: calc(100% - 110px);
    }
}

.actionbar_buttons {
    padding-right: 8px;
    padding-left: 8px;
    margin-top: 3px;
}

.actionbar_buttons .button.right {
    float: right;
}

@media (max-width: 900px) {
    .actionbar_buttons {
        padding-right: 10px;
        padding-left: 10px;
    }
}

#overflowmenu_global {
    position: fixed;
    top: 67px;
    right: 8px;
    z-index: 38;
    pointer-events: none;
}

.content.disabled {
    opacity: 0.6;
    pointer-events: none;
}

.content.disabled * {
    pointer-events: none;
}

.target_picker_header_row {
    overflow: hidden;
    height: 30px;
}

.target_picker_header_row>div:first-child {
    width: calc(100% - 200px);
    float: left;
    height: 30px;
}

.target_picker_header_row>div:not(:first-child) {
    width: 100px;
    float: left;
    height: 30px;
    text-align: center;
    cursor: pointer;
    transition: background 0.1s;
    border-radius: 8px;
}

body:not(.is_mobile) .target_picker_header_row>div:not(:first-child):hover {
    background-color: var(--bodyhoverbk);
}

body:not(.is_mobile) .target_picker_header_row>div:not(:first-child):active, .target_picker_header_row>div:not(:first-child):active {
    background-color: var(--bodyactivebk);
    transition: background 0.1s;
    border-radius: 8px;
}

body:not(.is_mobile) .target_picker_header_row>div:not(:first-child):hover {
    background-color: var(--bodyhoverbk);
}

body:not(.is_mobile) .target_picker_header_row>div:not(:first-child):active, .target_picker_header_row>div:not(:first-child):active {
    background-color: var(--bodyactivebk);
}

.target_picker_row {
    height: 42px;
    overflow: hidden;
}

.target_picker_row>div:first-child {
    font-size: 20px;
    padding: 9px 0px;
    line-height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: calc(100% - 202px);
    float: left;
    padding-left: 2px;
    cursor: pointer;
    transition: background 0.1s;
    border-radius: 8px;
}

body:not(.is_mobile) .target_picker_row>div:first-child:hover {
    background-color: var(--bodyhoverbk);
}

body:not(.is_mobile) .target_picker_row>div:first-child:active,
.target_picker_row>div:first-child:active {
    background-color: var(--bodyactivebk);
    transition: background 0.1s;
    border-radius: 8px;
}

body:not(.is_mobile) .target_picker_row>div:first-child:hover {
    background-color: var(--bodyhoverbk);
}

body:not(.is_mobile) .target_picker_row>div:first-child:active,
.target_picker_row>div:first-child:active {
    background-color: var(--bodyactivebk);
}

.target_picker_row>div:nth-child(2),
.target_picker_row>div:nth-child(3) {
    width: 100px;
    float: left;
    height: 42px;
    cursor: pointer;
}

.target_picker_row>div:nth-child(2) i,
.target_picker_row>div:nth-child(3) i {
    font-size: 30px;
    width: 30px;
    height: 30px;
    padding: 6px 6px;
    color: var(--icons);
    margin: 0px 29px;
    border-radius: 50px;
    transition: color 0.08s, background 0.15s;
}

body:not(.is_mobile) .target_picker_row>div:nth-child(2):not(.selected):hover i,
body:not(.is_mobile) .target_picker_row>div:nth-child(3):not(.selected):hover i {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) .target_picker_row>div:nth-child(2):not(.selected):active i,
.target_picker_row>div:nth-child(2):not(.selected):active i,
body:not(.is_mobile) .target_picker_row>div:nth-child(3):not(.selected):active i,
.target_picker_row>div:nth-child(3):not(.selected):active i {
    background-color: var(--iconactivebk);
}

body:not(.is_mobile) .target_picker_row>div:nth-child(2).selected:hover i,
body:not(.is_mobile) .target_picker_row>div:nth-child(3).selected:hover i {
    background-color: var(--accenthover);
}

body:not(.is_mobile) .target_picker_row>div:nth-child(2).selected:active i,
.target_picker_row>div:nth-child(2).selected:active i,
body:not(.is_mobile) .target_picker_row>div:nth-child(3).selected:active i,
.target_picker_row>div:nth-child(3).selected:active i {
    background-color: var(--accentactive);
}

.target_picker_row .selected i,
.checkbox_row_item .selected i {
    color: var(--accent) !important;
}

.checkbox_row_item {
    height: 42px;
    overflow: hidden;
    cursor: pointer;
}

.checkbox_row_item div:nth-child(1) {
    width: 48px;
    float: left;
    height: 42px;
}

.checkbox_row_item div:nth-child(1) i {
    font-size: 30px;
    width: 30px;
    height: 30px;
    padding: 6px 6px 6px 6px;
    margin-right: 7px;
    color: var(--icons);
    border-radius: 50px;
    transition: color 0.08s, background 0.15s;
}

body:not(.is_mobile) .checkbox_row_item:hover>div:nth-child(1):not(.selected) i {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) .checkbox_row_item:active>div:nth-child(1):not(.selected) i,
.checkbox_row_item:active>div:nth-child(1):not(.selected) i {
    background-color: var(--iconactivebk);
}

body:not(.is_mobile) .checkbox_row_item:hover>div:nth-child(1).selected i {
    background-color: var(--accenthover);
}

body:not(.is_mobile) .checkbox_row_item:active>div:nth-child(1).selected i,
.checkbox_row_item:active>div:nth-child(1).selected i {
    background-color: var(--accentactive);
}

.checkbox_row_item div:nth-child(2) {
    font-size: 20px;
    padding: 9px 0px;
    line-height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: calc(100% - 48px);
    float: left;
}

.perm_s {
    min-height: 42px;
    padding-left: 2px;
    margin-left: 0px;
    cursor: pointer;
    overflow: hidden;
}

.perm_l {
    float: left;
    margin-top: 7px;
}

.perm_r {
    float: left;
    font-size: 20px;
    padding-top: 7px;
    padding-left: 62px;
    /* overflow: hidden; */
    /* white-space: nowrap; */
    width: calc(100% - 62px);
    /* overflow: hidden; */
    /* white-space: nowrap; */
    /* text-overflow: ellipsis; */
    padding-bottom: 11px
}

.perm_r i {
    vertical-align: middle;
    font-size: 28px;
    margin-top: -3px;
    padding-right: 9px;
    color: var(--icons);
}

.wo-switch {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.wo-switch:before,
.wo-switch:after {
    content: "";
    position: absolute;
    margin: 0;
    outline: 0;
    transition: all 0.25s ease;
}

.wo-switch:before {
    left: 5px;
    top: 2.5px;
    width: 40px;
    height: 18px;
    background-color: #9E9E9E;
    border-radius: 20px;
}

.wo-switch:after {
    left: 0px;
    top: -1.5px;
    width: 25px;
    height: 25px;
    background-color: #ececec;
    border-radius: 50%;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
}

.checked.wo-switch:before,
.perm_s.checked .wo-switch:before {
    background-color: #41e6b0;
}

.checked.wo-switch:after,
.perm_s.checked .wo-switch:after {
    background-color: #15a575;
    transform: translateX(24px);
}

.heading_title {
    font-size: 22px;
    font-weight: 500;
    padding: 10px 0px;
}

.heading_title.top {
    padding-top: 1px;
}

@media (max-width: 900px) {
    .heading_title.top {
        padding-top: 2px;
    }
}

select {
    margin: 0;
    font-size: 20px;
    border: 2px solid var(--inputoutline);
    font-family: 'roboto', sans-serif;
    border-radius: 8px;
    padding: 2px;
    background-color: var(--main);
    cursor: pointer;
    outline: none;
    transition: 0.1s border;
    color: var(--atext);
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
    padding: 6px 8px;
    padding-right: 40px;
    min-width: 130px;
    background: url(/svg/menu-down.svg) calc(100% - 4px) / 26px no-repeat #fff;
}

select:focus {
    border: 2px solid var(--accent);
}

select.mini {
    margin-left: 3px;
    margin-top: -6px;
    margin-bottom: -6px;
    /* display: none; */
    padding: 4px 8px;
    padding-right: 40px;
}

trix-editor {
    margin: 0;
}

trix-editor[disabled] {
    background-color: var(--inputdisabled) !important;
    border-style: dotted !important;
}

trix-toolbar .trix-dialogs {
    position: relative;
}

trix-toolbar[disabled] {
    pointer-events: none;
    opacity: 0.75;
    filter: grayscale(1);
}

[contenteditable]:not(trix-editor) {
    -webkit-user-modify: read-write-plaintext-only;
    -webkit-user-select: text;
    user-select: text;
}

input {
    font-size: 20px;
    border: 2px solid var(--inputoutline);
    font-family: 'roboto', sans-serif;
    border-radius: 8px;
    padding: 7px 8px;
    background-color: var(--main);
    max-width: 100%;
    width: 420px;
    outline: none;
    transition: 0.1s border;
    color: var(--atext);
    -webkit-appearance: unset;
    line-height: 24px;
}

input:focus {
    border: 2px solid var(--accent);
}

input.magic {
    background: url(/svg/check-circle.svg) calc(100% - 6px) / 26px no-repeat #fff;
    padding-right: 40px;
}

textarea {
    font-size: 20px;
    border: 2px solid var(--inputoutline);
    font-family: 'roboto', sans-serif;
    border-radius: 8px;
    padding: 7px 8px;
    background-color: var(--main);
    max-width: 100%;
    width: 420px;
    outline: none;
    transition: 0.1s border;
    color: var(--atext);
    resize: none;
    min-height: 119px;
    -webkit-appearance: unset;
}

textarea:focus {
    border: 2px solid var(--accent);
}

textarea[disabled] {
    background-color: var(--inputdisabled);
    border-style: dotted;
}

textarea.error,
.fancy_input_scroll.error {
    border: 2px solid var(--red) !important;
}

.textarea_limit {
    font-size: 18px;
    padding-top: 4px;
    overflow: hidden;
    width: 420px;
    max-width: 100%;
}

.textarea_limit div:nth-child(1) {
    float: left;
    width: calc(100% - 70px);
    color: var(--red);
}

.textarea_limit div:nth-child(2) {
    float: left;
    width: 70px;
    text-align: right;
}

.input_label {
    font-size: 20px;
    font-weight: 500;
    padding-bottom: 6px;
    padding-top: 2px;
    max-width: 420px;
    line-height: 24px;
}

.input_label.bottom {
    padding-top: 8px;
}

.input_label>i,
.heading_title i,
.perm_r i,
.label i.help_icon,
.chart_title>div:nth-child(1) i,
.analytics_big_number .label i {
    vertical-align: middle;
    padding-left: 5px;
    margin-top: -6px;
    color: var(--icons);
    cursor: pointer;
    font-size: 24px;
}

.input_label>i {
    margin-top: -5px;
}

.input_label>i:active,
.heading_title i:active,
.label i.help_icon:active,
.chart_title>div:nth-child(1) i:active {
    color: var(--graytext);
}

.input_error {
    color: var(--red);
    font-size: 18px;
    padding-top: 4px;
    display: none;
    margin-bottom: -2px;
}

.input_warning {
    color: var(--btext);
    padding-top: 5px;
}

.input_warning i {
    vertical-align: middle;
    margin-top: -3px;
    font-size: 24px;
    color: var(--btext);
    padding-right: 3px;
}

input.error {
    border: 2px solid var(--red);
}

.calp_disabled {
    opacity: 0.6;
    pointer-events: none;
}

#profile_dropdown {
    box-shadow: 0 1px 6px var(--shadow);
    width: 250px;
    position: fixed;
    top: 53px;
    right: 7px;
    z-index: 33;
    background-color: var(--main);
    color: var(--atext);
    padding-bottom: 5px;
    border-radius: 5px;
}

.profile_top {
    overflow: hidden;
    border-bottom: 1px solid var(--divline);
    margin-bottom: 5px;
}

.profile_left {
    float: left;
    padding: 8px;
}

.profile_left i {
    font-size: 48px;
    color: var(--icons);
}

.profile_right {
    float: left;
    width: calc(100% - 64px);
}

.profile_right div:nth-child(1) {
    font-size: 19px;
    padding-top: 9px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.profile_right div:nth-child(2) {
    color: var(--btext);
    padding-top: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.profile_option {
    font-size: 19px;
    vertical-align: middle;
    line-height: 46px;
    padding: 0px 10px;
    cursor: pointer;
    transition: 0.1s background-color;
}

.profile_option i {
    vertical-align: middle;
    color: var(--icons);
    font-size: 28px;
    margin-top: -4px;
    padding-right: 18px;
    padding-left: 8px;
}

body:not(.is_mobile) .profile_option:hover {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) .profile_option:active,
.profile_option:active {
    background-color: var(--iconactivebk);
}

.profileIn {
    opacity: 1;
}

.profileOut {
    opacity: 0;
    pointer-events: none !important;
}

@media (max-width: 900px) {
    #profile_dropdown {
        display: block;
        width: calc(100% - 30px);
        right: unset;
        left: 50%;
        transform: translateX(-50%);
        top: 74px;
        max-width: 400px;
        box-shadow: 0 2px 12px 0px rgb(60, 60, 60);
        border-radius: 8px;
    }

    #profile_background {
        background-color: rgba(0, 0, 0, 0.5);
    }

    .profileIn {
        animation: 0.25s fadeIn forwards;
    }

    .profileOut {
        animation: 0.2s fadeOutReal forwards;
    }
}

@keyframes fadeOutReal {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.profile_mobilefoot {
    border-top: 1px solid var(--divline);
    margin-top: 5px;
    text-align: center;
    font-size: 18px;
    padding-top: 8px;
    padding-bottom: 6px;
    display: none;
}

@media (max-width: 900px) {
    .profile_mobilefoot {
        display: block;
    }

    .footer {
        display: none;
    }
}


.modal.disabled {
    overflow: hidden !important;
}

.disabled .modal_topbar {
    opacity: 0.6;
    pointer-events: none;
}

.disabled .modal_content {
    opacity: 0.6;
    pointer-events: none;
}

.disabled .modal_buttons {
    opacity: 0.6;
    pointer-events: none;
}

.disabled .indeterminate {
    display: block !important;
}

.loading .indeterminate {
    display: block !important;
}

.indeterminate {
    position: relative;
    height: 5px;
    display: none;
    width: 100%;
    background-color: #a1f1d6;
    background-clip: padding-box;
    overflow: hidden;
    margin-bottom: -5px;
}

.indeterminate div {
    background-color: var(--accent);
}

.indeterminate div:before {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

.indeterminate div:after {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    -webkit-animation-delay: 1.15s;
    animation-delay: 1.15s;
}

@-webkit-keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }

    60% {
        left: 100%;
        right: -90%;
    }

    100% {
        left: 100%;
        right: -90%;
    }
}

@keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }

    60% {
        left: 100%;
        right: -90%;
    }

    100% {
        left: 100%;
        right: -90%;
    }
}

@-webkit-keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }

    60% {
        left: 107%;
        right: -8%;
    }

    100% {
        left: 107%;
        right: -8%;
    }
}

@keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }

    60% {
        left: 107%;
        right: -8%;
    }

    100% {
        left: 107%;
        right: -8%;
    }
}


#toast_tray {
    position: fixed;
    bottom: 18px;
    left: 18px;
    z-index: 31;
    pointer-events: none;
    width: 280px;
    height: 48px;
}

.toast {
    font-size: 19px;
    padding: 10px 12px;
    background-color: #464646;
    color: white;
    border-radius: 8px;
    box-shadow: 0 1px 4px var(--shadow);
    margin-bottom: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.toast i {
    vertical-align: middle;
    margin-top: -3px;
    padding-right: 8px;
}

@keyframes toastIn {
    0% {
        margin-top: 33px;
        opacity: 0;
    }

    100% {
        margin-top: 0px;
        opacity: 1;
    }
}

.toastIn {
    animation: 0.4s toastIn forwards;
}

@keyframes toastOut {
    0% {
        margin-bottom: 12px;
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    100% {
        margin-bottom: -43px;
        opacity: 0;
    }
}

.toastOut {
    animation: 0.3s toastOut forwards;
}

@media (max-width: 900px) {
    #toast_tray {
        width: 100%;
        bottom: 8px;
        height: 48px;
        left: unset;
    }

    .toast {
        /*border-radius: 0px;*/
        margin-left: 8px;
        margin-right: 8px;
        padding: 12px 12px;
    }

    @keyframes toastIn {
        0% {
            margin-top: 48px;
            opacity: 0;
        }

        100% {
            margin-top: 0px;
            opacity: 1;
        }
    }
}

#font_force_loader {
    position: fixed;
    height: 0;
    pointer-events: none;
    overflow: hidden;
}

#login_loader_inner {
    top: 0px;
    position: absolute;
    width: 100%;
    display: none;
    height: 5px;
}

#login_loader_outer {
    pointer-events: none;
    top: 0px;
    left: 0px;
    right: 0px;
    position: absolute;
    width: 100%;
    display: none;
    height: 5px;
}

#loginflow {
    /* top: max(calc((100% - 530px) / 2) + 20px, 12px); */
    top: calc(50% + 20px);
    transform: translateY(max(-50%, -50vh - 8px));
    position: relative;
    width: calc(100% - 28px);
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
    min-height: 550px;
}

.login_form {
    width: calc(100% - 50px);
    color: var(--atext);
    padding-left: 24px;
    padding-right: 24px;
    border: 1px solid var(--divline);
    border-radius: 8px;
    padding-top: 32px;
    padding-bottom: 32px;
}

.login_loader_visible #login_loader_inner {
    display: block;
}

@media (max-width: 600px) {
    #loginflow {
        width: calc(100% - 24px);
        padding-left: 12px;
        padding-right: 12px;
        max-width: 400px;
    }

    .login_form {
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
        border: none;
    }

    .login_loader_visible #login_loader_outer {
        display: block;
    }

    .login_loader_visible #login_loader_inner {
        display: none;
    }

}

@media (max-height: 700px) and (max-width: 600px) {
    #loginflow {
        top: 12px;
        transform: translateY(0px);
    }
}

.login_form.disabled {
    opacity: 0.6;
    pointer-events: none;
}

.button.right {
    float: right;
}

.modal_spinner {
    height: 60px;
    width: 60px;
    margin: 0 auto;
    margin-top: 18px;
    margin-bottom: 22px;
}

.menu_scroller {
    overflow-y: auto;
    height: calc(100% - 59px);
    overflow-x: hidden;
}

.menu_scroller_inner {
    width: 270px;
    height: calc(100% - 10px);
}

@media (max-width: 900px) {
    .menu_scroller_inner {
        width: 280px;
        height: unset;
    }
}

.menu_scroller .school_select {
    display: block;
    float: unset;
    margin: 0;
    padding-top: 9px;
    padding-bottom: 9px;
    border-bottom-style: solid;
    border-color: var(--divline);
    border-bottom-width: 1px;
    border-radius: 0px;
    margin-bottom: 9px;
    padding-left: 18px;
}

.menu_scroller .school_select div:nth-child(2) {
    padding-left: 17px;
    width: 157px;
    max-width: 157px;
}

.menu_scroller .menu_item:nth-last-child(2) {
    margin-bottom: 8px;
}

.menu_scroller .no_school.school_select div:nth-child(1) {
    display: block;
    visibility: hidden;
}

@media (min-width: 901px) {
    .menu_scroller .school_select {
        display: none;
    }

    .menu_scroller {
        overflow-y: overlay;
        height: 100%;
    }
}

.school_list_item {
    height: 40px;
    padding: 4px 0px;
    cursor: pointer;
    transition: 0.1s background;
}

.school_list_item:not(:last-child):not(.last_school_list_item) {
    border-bottom: 1px solid var(--divline);
}

.school_list_item div:nth-child(1) {
    float: left;
    height: 40px;
    width: 30px;
}

.school_list_item div:nth-child(1) i {
    padding-top: 8px;
    color: var(--accentprimaryhover);
}

.school_list_item div:nth-child(2) {
    float: left;
    padding: 2px;
}

.school_list_item div:nth-child(2) img {
    height: 36px;
    width: 36px;
}

.school_list_item div:nth-child(3) {
    font-size: 22px;
    float: left;
    line-height: 40px;
    padding-left: 7px;
    width: calc(100% - 77px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body:not(.is_mobile) .school_list_item:hover {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) .school_list_item:active,
.school_list_item:active {
    background-color: var(--iconactivebk);
}

form label {
    display: none;
}

form {
    margin: 0;
}

#tab_permissionserror {
    display: block;
    height: calc(100% - 64px);
    position: relative;
}

.error_box {
    text-align: center;
    color: var(--btext);
    width: calc(100% - 24px);
    padding: 12px 12px;
}

.error_box i {
    font-size: 72px;
    padding-bottom: 6px;
}

.error_box div {
    font-size: 22px;
}

.drop_target {
    border: 4px dashed #06bb7f;
}

.warning_banner {
    margin-top: 0px;
    margin-bottom: 10px;
    line-height: 26px;
    overflow: hidden;
    padding: 5px;
    background-color: #f1fffa;
    border-radius: 10px;
    border: 2px solid #a4dac8;
    color: #046b49;
}

.warning_banner>i {
    float: left;
    display: block;
    color: #046b49;
    font-size: 26px;
    padding-left: 2px;
}

.warning_banner m {
    float: left;
}

.warning_banner span {
    display: block;
    float: left;
    width: calc(100% - 37px);
    padding-left: 8px;
    font-size: 18px;
}

.warning_banner a {
    color: #0d7351;
    font-weight: 500;
    cursor: pointer;
    /* text-decoration: underline; */
    float: right;
    margin-right: 6px;
    margin-left: 6px;
}

.nearly_full_container {
    width: calc(100% + 6px);
    height: calc((100% - 100px) - 50px);
    overflow-y: scroll;
    margin-left: -3px;
}

.nearly_full_container.with_filter {
    height: calc(((100% - 100px) - 50px) - 43px);
}

.firefox .nearly_full_container.with_filter {
    height: calc(100% - 43px);
}

@media (max-width: 900px) {
    .nearly_full_container {
        width: 100%;
        height: calc(100% - 114px);
        margin-left: 0px;
    }

    .nearly_full_container.with_filter {
        height: calc(100% - 114px - 43px);
    }
}

.log_item {
    height: 40px;
    padding: 0px 8px;
    cursor: pointer;
    transition: 0.1s background-color;
    overflow: hidden;
}

.log_item:first-child {
    margin-top: 4px;
}

.log_item:nth-last-child(2) {
    margin-bottom: 4px;
}

.log_item div:nth-child(1) {
    float: left;
    font-size: 16px;
    color: var(--btext);
    line-height: 40px;
    width: 140px;
}

.log_item i {
    font-size: 30px;
    color: var(--icons);
}

.log_item div:nth-child(2) {
    padding: 5px 15px;
    float: left;
    width: 30px;
    height: 30px;
}

.log_item.add i {
    color: var(--loggreen);
}

.log_item.remove i {
    color: var(--logred);
}

.log_item.update i {
    color: var(--logyellow);
}

.log_item.notify i {
    color: var(--logblue);
}

.log_item div:nth-child(3) {
    float: left;
    font-size: 18px;
    line-height: 40px;
    width: calc(100% - 200px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 900px) {
    .log_item div:nth-child(1) {
        display: none;
    }

    .log_item div:nth-child(2) {
        padding-left: 2px;
        padding-right: 10px;
    }

    .log_item div:nth-child(3) {
        width: calc(100% - 42px);
    }
}

.log_item b {
    font-weight: 500;
}

body:not(.is_mobile) .log_item:hover {
    background-color: var(--bodyhoverbk);
}

body:not(.is_mobile) .log_item:active,
.log_item:active {
    background-color: var(--bodyactivebk);
}

.log_loader {
    height: 50px;
    width: 50px;
    margin: 0 auto;
    padding: 10px 0px;
}

.log_detail {
    height: 40px;
    transition: 0.1s background-color;
    padding: 2px 0px;
    border-radius: 6px;
}

.log_detail:not(.noclick),
.multi_option:not(.noclick) {
    cursor: pointer;
}

.log_detail div:nth-child(1),
.multi_option>div:nth-child(1) {
    width: 30px;
    height: 30px;
    padding: 5px;
    float: left;
}

.log_detail i,
.multi_option i {
    font-size: 30px;
    color: var(--icons);
}

.log_detail div:nth-child(2),
.multi_option>div:nth-child(2) {
    line-height: 40px;
    float: left;
    padding-left: 4px;
    width: calc(100% - 44px);
}

.multi_option>div:nth-child(2)>div:nth-child(1) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.multi_option>div:nth-child(2)>div:nth-child(2) {
    overflow: hidden;
    padding-bottom: 8px;
}

.multi_option>div:nth-child(2)>div:nth-child(2)>div:first-child:not(:last-child) {
    width: 26px;
    float: left;
    padding-right: 6px;
}

.multi_option>div:nth-child(2)>div:nth-child(2)>div:first-child:not(:last-child)>i {
    font-size: 26px;
    color: var(--icons);
}

.multi_option>div:nth-child(2)>div:nth-child(2)>div:last-child {
    font-size: 19px;
    float: left;
    line-height: 26px;
    width: calc(100% - 32px);
    color: var(--btext);
}

.multi_option>div:nth-child(2)>div:nth-child(2)>div:last-child:first-child {
    line-height: 22px;
}

.multi_option {
    min-height: 40px;
    overflow: hidden;
    transition: 0.1s background-color;
    padding: 4px 4px;
    border-radius: 10px;
}

.multi_option.selected {
    border: 2px solid var(--accent);
    padding: 2px 2px;
}

body:not(.is_mobile) .log_detail:not(.noclick):hover,
body:not(.is_mobile) .multi_option:not(.noclick):hover {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) .log_detail:not(.noclick):active,
.log_detail:not(.noclick):active,
body:not(.is_mobile) .multi_option:not(.noclick):active,
.multi_option:not(.noclick):active {
    background-color: var(--iconactivebk);
}

.modal_item {
    height: 40px;
    transition: 0.1s background-color;
    padding: 3px 0px;
}

.modal_item:not(.noclick) {
    cursor: pointer;
}

.modal_item > div:nth-child(1):not(:last-child) {
    float: left;
    width: 40px;
    height: 40px;
}

.modal_item > div:nth-child(1):not(:last-child) > i {
    font-size: 30px;
    padding: 5px;
    color: var(--icons);
}

.modal_item.disabled > div:nth-child(1):not(:last-child) > i {
    color: #727272;
}

.modal_item > div:nth-child(2), .modal_item > div:nth-child(1):last-child {
    line-height: 40px;
    float: left;
    padding-left: 4px;
    width: calc(100% - 44px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.modal_item.disabled > div:nth-child(2), .modal_item.disabled > div:nth-child(1):last-child {
    filter: grayscale(1);
    opacity: 0.55;
}

.modal_item > div:nth-child(1):last-child {
    padding-left: 6px;
    width: calc(100% - 6px);
}

.modal_item > div:nth-child(2) > div:nth-child(1), .modal_item > div:nth-child(1):last-child > div:nth-child(1) {
    height: 40px;
    width: 40px;
    float: left;
}

.modal_item > div:nth-child(2) > div:nth-child(1) > img, .modal_item > div:nth-child(1):last-child > div:nth-child(1) > img {
    width: 34px;
    padding: 3px;
}

.modal_item > div:nth-child(2) > div:nth-child(1) > i, .modal_item > div:nth-child(1):last-child > div:nth-child(1) > i {
    font-size: 34px;
    color: #336757;
    padding: 4px 3px 2px 3px;
}

.modal_item > div:nth-child(2) > div:nth-child(2), .modal_item > div:nth-child(1):last-child > div:nth-child(2) {
    float: left;
    width: calc(100% - 48px);
    padding-left: 8px;
}

body:not(.is_mobile) .modal_item:not(.noclick):hover {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) .modal_item:not(.noclick):active,
.modal_item:not(.noclick):active {
    background-color: var(--iconactivebk);
}

.modal_item:not(:last-child):not(.last_school_list_item) {
    border-bottom: 1px solid var(--divline);
}

.modal_scroller {
    overflow-y: auto;
    max-height: calc(100vh - 56px - 68px - 100px);
}

.post_type {
    text-align: center;
    width: calc(33.33% - 40px);
    float: left;
    margin: 10px;
    padding: 10px;
    padding-bottom: 15px;
    border-radius: 14px;
    transition: 0.1s background;
    cursor: pointer;
}

.post_type i {
    font-size: 70px;
}

.post_type div {
    text-align: center;
    font-size: 20px;
    font-weight: 500;
}

.post_content {
    width: 80%;
    margin: 0 auto;
    max-width: 700px;
    min-width: 450px;
    overflow: hidden;
}

#posttypetoppadding {
    padding-top: 25px;
}

@media (max-width: 900px) {
    .post_content {
        width: calc(100% - 14px);
        min-width: unset;
        padding: 0px 7px;
    }

    #posttypetoppadding {
        padding-top: 15px;
    }
}

@media (max-width: 450px) {
    #posttypetoppadding {
        padding-top: 10px;
    }

    .post_content {
        width: 100%;
        padding: unset;
    }

    .post_type {
        margin: 0px;
        width: calc(33.33% - 20px);
    }

    .post_type div {
        font-size: 17px;
    }

    .post_type i {
        font-size: 60px;
    }
}

body:not(.is_mobile) .post_type:hover {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) .post_type:active,
.post_type:active {
    background-color: var(--iconactivebk);
}

#post_input,
#post_input2 {
    -webkit-user-select: text;
    user-select: text;
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    display: inline-block;
    text-align: start;
    background-color: white;
    -webkit-rtl-ordering: logical;
    cursor: text;
    padding: 1px 0px;
    font-size: 20px;
    border: 2px solid var(--inputoutline);
    font-family: 'roboto', sans-serif;
    border-radius: 8px;
    padding: 7px 8px;
    background-color: var(--main);
    width: 100%;
    outline: none;
    transition: 0.1s border;
    color: var(--atext);
    box-sizing: border-box;
    max-height: 300px;
    overflow-y: auto;
    min-height: 150px;
    max-width: 600px;
    word-break: break-word;
}

#post_input:focus {
    border: 2px solid var(--accent);
}

#post_input.error {
    border: 2px solid var(--red);
}

#tab_api,
#tab_analytics,
#tab_feedback,
#tab_tv {
    height: calc(100% - 64px);
    position: relative;
    display: none;
}

.item_thumb {
    width: 64px;
    flex-shrink: 0;
    margin-right: 10px;
    background: #cecece;
}

.item_thumb.circle {
    border-radius: 32px;
    overflow: hidden;
}

.item_thumb img {
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.2s;
    object-fit: cover;
}

.item_load {
    width: 42px;
    flex-shrink: 0;
    margin-right: 10px;
    padding: 11px;
}

.scheduled {
    font-weight: 500;
    margin-right: 6px;
}

.scheduled.default_font {
    font-weight: 400;
}

.scheduled.bull {
    margin-right: 5px;
}

.scheduled i {
    vertical-align: bottom;
    font-size: 21px;
    /* display: none; */
    margin-top: -1px;
    margin-right: 3px;
    margin-left: -1px;
    color: var(--icons);
}

.not_published {
    color: var(--redtext);
}

.not_published.scheduled i {
    color: var(--redtext);
}

.waiting i {
    height: 20px;
}

#oldiframe {
    z-index: 38;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.target_selection {
    line-height: 24px;
    font-size: 20px;
    border: 2px solid var(--inputoutline);
    font-family: 'roboto', sans-serif;
    border-radius: 8px;
    padding: 7px 8px;
    background-color: var(--main);
    max-width: 100%;
    width: 250px;
    outline: none;
    transition: 0.1s border;
    color: var(--atext);
    padding-right: 40px;
    background: url(/svg/pencil.svg) calc(100% - 6px) / 26px no-repeat #fff;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.target_selection:active {
    border: 2px solid var(--accent);
}

.selection_icon_location {
    background: url(/svg/location.svg) calc(100% - 6px) / 26px no-repeat #fff;
}

.selection_icon_recurring {
    background: url(/svg/autorenew.svg) calc(100% - 6px) / 26px no-repeat #fff;
}

.selection_icon_table {
    background: url(/svg/table.svg) calc(100% - 6px) / 26px no-repeat #fff;
}

.selection_icon_group {
    background: url(/svg/account.svg) calc(100% - 6px) / 26px no-repeat #fff;
}

.school_selection {
    background: url(/svg/school.svg) calc(100% - 6px) / 26px no-repeat #fff;
    padding-left: 6px;
}

.school_selection > div {
    width: 100%;
    overflow: hidden;
    margin-top: -2px;
    margin-bottom: -2px;
    -webkit-mask-image: linear-gradient(90deg, rgb(0% 0% 0%) calc(100% - (30px - (30px * 0))), rgb(0.961% 0.961% 0.961% / 0.9903926402016152) calc(100% - (30px - (30px * 0.0625))), rgb(3.806% 3.806% 3.806% / 0.9619397662556434) calc(100% - (30px - (30px * 0.125))), rgb(8.427% 8.427% 8.427% / 0.9157348061512727) calc(100% - (30px - (30px * 0.1875))), rgb(14.645% 14.645% 14.645% / 0.8535533905932737) calc(100% - (30px - (30px * 0.25))), rgb(22.221% 22.221% 22.221% / 0.7777851165098011) calc(100% - (30px - (30px * 0.3125))), rgb(30.866% 30.866% 30.866% / 0.6913417161825449) calc(100% - (30px - (30px * 0.375))), rgb(40.245% 40.245% 40.245% / 0.5975451610080642) calc(100% - (30px - (30px * 0.4375))), rgb(50% 50% 50% / 0.5) calc(100% - (30px - (30px * 0.5))), rgb(59.755% 59.755% 59.755% / 0.4024548389919359) calc(100% - (30px - (30px * 0.5625))), rgb(69.134% 69.134% 69.134% / 0.3086582838174552) calc(100% - (30px - (30px * 0.625))), rgb(77.779% 77.779% 77.779% / 0.22221488349019902) calc(100% - (30px - (30px * 0.6875))), rgb(85.355% 85.355% 85.355% / 0.14644660940672627) calc(100% - (30px - (30px * 0.75))), rgb(91.573% 91.573% 91.573% / 0.08426519384872733) calc(100% - (30px - (30px * 0.8125))), rgb(96.194% 96.194% 96.194% / 0.03806023374435663) calc(100% - (30px - (30px * 0.875))), rgb(99.039% 99.039% 99.039% / 0.009607359798384785) calc(100% - (30px - (30px * 0.9375))), rgb(100% 100% 100% / 0) calc(100% - (30px - (30px * 1))) );
    mask-image: linear-gradient(90deg, rgb(0% 0% 0%) calc(100% - (30px - (30px * 0))), rgb(0.961% 0.961% 0.961% / 0.9903926402016152) calc(100% - (30px - (30px * 0.0625))), rgb(3.806% 3.806% 3.806% / 0.9619397662556434) calc(100% - (30px - (30px * 0.125))), rgb(8.427% 8.427% 8.427% / 0.9157348061512727) calc(100% - (30px - (30px * 0.1875))), rgb(14.645% 14.645% 14.645% / 0.8535533905932737) calc(100% - (30px - (30px * 0.25))), rgb(22.221% 22.221% 22.221% / 0.7777851165098011) calc(100% - (30px - (30px * 0.3125))), rgb(30.866% 30.866% 30.866% / 0.6913417161825449) calc(100% - (30px - (30px * 0.375))), rgb(40.245% 40.245% 40.245% / 0.5975451610080642) calc(100% - (30px - (30px * 0.4375))), rgb(50% 50% 50% / 0.5) calc(100% - (30px - (30px * 0.5))), rgb(59.755% 59.755% 59.755% / 0.4024548389919359) calc(100% - (30px - (30px * 0.5625))), rgb(69.134% 69.134% 69.134% / 0.3086582838174552) calc(100% - (30px - (30px * 0.625))), rgb(77.779% 77.779% 77.779% / 0.22221488349019902) calc(100% - (30px - (30px * 0.6875))), rgb(85.355% 85.355% 85.355% / 0.14644660940672627) calc(100% - (30px - (30px * 0.75))), rgb(91.573% 91.573% 91.573% / 0.08426519384872733) calc(100% - (30px - (30px * 0.8125))), rgb(96.194% 96.194% 96.194% / 0.03806023374435663) calc(100% - (30px - (30px * 0.875))), rgb(99.039% 99.039% 99.039% / 0.009607359798384785) calc(100% - (30px - (30px * 0.9375))), rgb(100% 100% 100% / 0) calc(100% - (30px - (30px * 1))) );
}

.school_selection > div > div.school_group_label {
    display: inline-block;
    margin-right: 8px;
    background: #5a7d72;
    font-size: 18px;
    line-height: 24px;
    padding: 1px 4px;
    border-radius: 5px;
    color: white;
    margin-top: 1px;
    margin-bottom: 1px;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.school_selection > div > div.school_group_school {
    display: inline-block;
    margin-right: 6px;
    vertical-align: bottom;
}

.school_selection > div > div.school_group_school > img {
    height: 28px;
    width: 28px;
}

.location_selection {
    width: calc(420px - 52px);
    max-width: calc(100% - 52px);
}

.date_selection {
    font-size: 20px;
    border: 2px solid var(--inputoutline);
    font-family: 'roboto', sans-serif;
    border-radius: 8px;
    padding: 7px 8px;
    background-color: var(--main);
    max-width: calc(100% - 49px);
    width: 87px;
    outline: none;
    transition: 0.1s border;
    color: var(--atext);
    padding-right: 37px;
    background: url(/svg/calendar.svg) calc(100% - 6px) / 26px no-repeat #fff;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.time_selection {
    background: url(/svg/access_time.svg) calc(100% - 6px) / 26px no-repeat #fff;
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
    height: 24px;
}

.time_selection * {
    display: inline;
}

.time_selection br {
    display: none;
}

.date_selection.range {
    width: 186px;
}

.date_selection.preset_text {
    width: 400px;
}

.date_selection:not(.time_selection):active,
.time_selection:focus {
    border: 2px solid var(--accent);
}

.date_selection.error {
    border: 2px solid var(--red);
}

.target_selection.error {
    border: 2px solid var(--red);
}

.date_selection.disabled {
    background-color: var(--inputdisabled);
    pointer-events: none;
    border-style: dotted;
}

.target_selection.disabled {
    background-color: var(--inputdisabled);
    pointer-events: none;
    border-style: dotted;
}

input.disabled {
    background-color: var(--inputdisabled);
    pointer-events: none;
    border-style: dotted;
}

input[disabled] {
    background-color: var(--inputdisabled);
    border-style: dotted;
}

input[readonly] {
    border-style: dotted;
}

.calpicker_unit {
    text-align: center;
    height: 40px;
    width: 40px;
    line-height: 42px;
    font-size: 19px;
    margin: 0px 1px;
    border-radius: 40px;
    cursor: pointer;
    transition: background-color 0.1s;
}

body:not(.is_mobile) .calpicker_unit:hover {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) .calpicker_unit:active,
.calpicker_unit:active {
    background-color: var(--iconactivebk);
}

.calpicker_unit.is_selected {
    background-color: var(--accent);
    color: white !important;
}

body:not(.is_mobile) .calpicker_unit.is_selected:hover {
    background-color: var(--accentprimaryhover);
}

body:not(.is_mobile) .calpicker_unit.is_selected:active,
.calpicker_unit.is_selected:active {
    background-color: var(--accentprimaryactive);
}

.calpicker_unit:not(.is_today).disabled {
    pointer-events: none;
    color: var(--atext);
    opacity: 0.5;
}

.calpicker_modal .diff_month {
    color: var(--ctext);
}

.calpicker_modal .is_today {
    border: 1px solid var(--accent);
    width: 38px;
    height: 38px;
}

.calpicker_disallowed {
    pointer-events: none;
}

.calpicker_modal {
    width: 326px !important;
    max-width: 326px;
    min-width: 326px;
}

.calpicker_months {
    overflow: hidden;
}

.calpicker_months div {
    width: calc(100% / 7);
    font-size: 15px;
    text-align: center;
    color: var(--btext);
    padding-bottom: 7px;
    float: left;
}

.calpicker_top {
    padding-bottom: 17px;
    overflow: hidden;
    padding-top: 5px;
    /*margin-top: -5px;*/
}

.calpicker_arrow {
    float: left;
    width: 40px;
    text-align: center;
    color: var(--icons);
    border-radius: 40px;
    cursor: pointer;
    transition: background 0.1s;
    padding: 5px 0px;
    margin-top: -5px;
    margin-bottom: -5px;
}

.calpicker_arrow i {
    font-size: 30px;
}

#calpicker_monthandyear {
    width: calc(100% - 80px);
    text-align: center;
    font-size: 19px;
    float: left;
    height: 30px;
    line-height: 30px;
}

.pickarrowdisabled {
    pointer-events: none;
    color: var(--icondisabled);
}

body:not(.is_mobile) .calpicker_arrow:hover {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) .calpicker_arrow:active,
.calpicker_arrow:active {
    background-color: var(--iconactivebk);
}

.calpicker_left_handle {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    margin-right: 0px;
    padding-right: 1px;
}

.calpicker_right_handle {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    margin-left: 0px;
    padding-left: 1px;
}

.calpicker_region {
    border-radius: 0px;
    background-color: var(--accentactive) !important;
    margin: 0px;
    padding: 0px 1px;
}

#calendar_main .page_title {
    width: calc(100% - 118px);
    max-width: calc(180px + 48px + 48px + 2px);
}

@media (max-width: 330px) {
    #calendar_main .page_title div:nth-child(2) {
        margin: 0 !important;
        /* padding: 0px 5px; */
        /* padding-right: 10px; */
        /* padding-left: 0px; */
        width: calc(100% - 88px) !important;
    }
}

#calendar_main .page_title .general_round_button:nth-child(1) {
    margin-left: -8px;
}

#calendar_main .page_title div:nth-child(2) {
    float: left;
    overflow: hidden;
    margin: 0px 5px;
    max-width: 180px;
    width: 180px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 900px) {
    #calendar_main .page_title div:nth-child(2) {
        width: calc(100% - 98px);
    }
}

.cal_month_row {
    text-align: center;
    border-right: 1px solid var(--divline);
    color: var(--btext);
    padding-bottom: 4px;
    padding-top: 4px;
}

.cal_month_row:nth-child(7) {
    border-right: none;
}

#cal_month_inner {
    height: calc(100% - 28px);
    float: left;
    width: 100%;
    display: grid;
    grid-auto-flow: row;
    grid-auto-rows: minmax(0, 1fr);
}

.calendar_unit {
    /*float: left;
    width: calc((100% - 6px)/7);*/
    overflow: hidden;
    border-right: 1px solid var(--divline);
    height: 100%;
    cursor: pointer;
    transition: background 0.1s;
}

#calendar_container .diff_month {
    /*background: #f9f9f9;*/
}

#calendar_container .no_school,
#event_picker .no_school {
    background: #f5f5f5;
}

#event_picker .calendar_unit.disabled .calb_day {
    opacity: 0.5;
}

#event_picker .calendar_unit.disabled .calb_type {
    opacity: 0.5;
}

#event_picker .calendar_unit.disabled .icon_box {
    opacity: 0.5;
}

#event_picker .calendar_unit.disabled {
    pointer-events: none;
}

.calendar_unit.selected {
    background-color: var(--accentactive) !important;
}

.calendar_unit.selected:active {
    background-color: #9bf7d8 !important;
}

.calendar_unit.selected_primary {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.calendar_unit.selected_primary:not(.sunday) {
    margin-left: -1px;
    padding-left: 1px;
}

body:not(.is_mobile) .calendar_unit:hover,
body:not(.is_mobile) #calendar_container .no_school:hover,
body:not(.is_mobile) #event_picker .no_school:hover {
    background-color: var(--bodyhoverbk);
}

body:not(.is_mobile) .calendar_unit:active,
.calendar_unit:active,
#calendar_container .no_school:active,
body:not(.is_mobile) #calendar_container .no_school:active,
#event_picker .no_school:active,
body:not(.is_mobile) #event_picker .no_school:active {
    background-color: var(--bodyactivebk);
}

.saturday {
    border-right: none;
}

.bottom_week {
    border-bottom: none;
}

#calendar_container {
    border-left: 1px solid var(--divline);
    border-right: 1px solid var(--divline);
    border-top: none;
    border-bottom: none;
    width: calc(100% + 4px);
    overflow-y: hidden;
}

.firefox #calendar_general_container {
    height: 100%;
    /* max-height: calc(100% - 176px + 56px); */
    max-height: calc(100% - 100px);
}

/*.firefox #calendar_container {
    width: 100%;
}*/

/* .firefox .cal_month_row,
.firefox .calendar_unit {
    width: calc(((100% - 0.1px) - 6px)/7);
} */

.firefox .nearly_full_container {
    height: 100%;
}

.firefox #audit_log_general_container {
    height: 100%;
    /* max-height: calc(100% - 176px + 56px); */
    max-height: calc(100% - 100px);
}

@media (max-width: 900px) {
    #calendar_container {
        border: none;
        width: 100%;
    }

    .firefox #calendar_general_container {
        max-height: calc(100% - 110px + 56px);
    }

    .firefox #audit_log_general_container {
        max-height: calc(100% - 110px + 56px);
    }

    body.firefox {
        height: calc(100% - 59px);
    }
}

.calendar_disallowed {
    pointer-events: none;
}

#calendar_container .calendar_disallowed .calb_day,
#event_picker .calendar_disallowed .calb_day {
    opacity: 0.5;
}

#calendar_container .calendar_disallowed .calb_type,
#event_picker .calendar_disallowed .calb_type {
    opacity: 0.5;
}

#calendar_container .calendar_disallowed .icon_box,
#event_picker .calendar_disallowed .icon_box {
    opacity: 0.5;
}

.calb_day {
    float: left;
    font-size: 18px;
    width: 23px;
    padding-left: 2px;
}

.calb_type {
    float: left;
    font-size: 16px;
    max-width: calc(100% - 28px);
    text-align: right;
    float: right;
    padding-right: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ctext);
    line-height: 22px;
    height: 22px;
}

.calb_type:not(.norotation) span:nth-child(1) {
    display: inline-block;
    float: right;
    width: 16px;
}

.calb_type span:nth-child(2),
.calb_type.norotation span:nth-child(1) {
    max-width: calc(100% - 16px);
    overflow: hidden;
    /* white-space: nowrap; */
    text-overflow: ellipsis;
    display: inline-block;
    text-align: right;
    float: right;
}

.calb_type.norotation span:nth-child(1) {
    max-width: 100%;
}

.icon_box {
    width: 100%;
    height: calc(100% - 22px);
    float: left;
    overflow: hidden;
}

.is_today .calb_day {
    background-color: var(--accent);
    color: white;
    border-radius: 18px;
    text-align: center;
    width: 25px;
    padding-left: 0px;
}

.drops {
    height: 42px;
}

.change_icon {
    text-align: center;
    width: 80px;
    border-radius: 5px;
    transition: background 0.1s;
    cursor: pointer;
}

.change_icon i {
    text-align: center;
    font-size: 70px;
    width: 70px;
    padding-top: 3px;
}

.change_icon.disabled {
    pointer-events: none;
    opacity: 0.8;
}

.change_icon div {
    font-size: 14px;
    text-align: center;
    width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-top: 2px;
}

body:not(.is_mobile) .change_icon:hover {
    background-color: var(--iconhoverbk);
    animation: none;
}

body:not(.is_mobile) .change_icon:active,
.change_icon:active {
    background-color: var(--iconactivebk);
    animation: none;
}

.changeicon {
    width: 70px;
    text-align: center;
    border-radius: 5px;
    transition: background 0.1s;
    cursor: pointer;
    float: left;
    margin: 3px 2px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.changeicon i {
    font-size: 60px;
}

.changeicon div {
    font-size: 13px;
    text-align: center;
    width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-top: 2px;
}

body:not(.is_mobile) .changeicon:hover {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) .changeicon:active,
.changeicon:active {
    background-color: var(--iconactivebk);
}

.changeicon.selected {
    border: 2px solid var(--accent);
    margin: 1px 0px;
}

.icon_section i {
    font-size: 26px;
    padding-left: 0;
    padding-right: 6px;
    margin-top: -5px;
    color: var(--atext) !important;
    padding-left: 0px;
    cursor: unset;
}

#event_time_start,
#event_time_end,
#event_time_start_t,
#event_time_end_t,
#tv_time_start,
#tv_time_end {
    float: left;
}

@media (max-width: 372px) {

    #tv_time_start,
    #tv_time_end {
        background: none;
        padding-right: 8px;
        width: 90px;
        text-overflow: unset;
    }
}

@media (max-width: 325px) {

    #event_time_start,
    #event_time_end {
        background: none;
        padding-right: 8px;
        width: 90px;
        text-overflow: unset;
    }
}

@media (max-width: 360px) {

    #event_time_start_t,
    #event_time_end_t {
        background: none;
        padding-right: 8px;
        width: 90px;
        text-overflow: unset;
    }
}

.time_dash {
    float: left;
    font-size: 30px;
    line-height: 42px;
    padding: 0px 9px;
    color: var(--btext);
    height: 42px;
}

.time_clear i {
    padding: 5px;
    font-size: 28px;
    margin: 2px;
}

.reorder_small_item_container {
    border-top: 1px solid var(--divline2);
    width: 100%;
    max-width: 600px;
    position: relative;
}

.small_item {
    height: 48px;
    border-bottom: 1px solid var(--divline2);
    padding: 7px 0px;
    position: relative;
}

#school_group_schools {
    max-width: 420px;
}

#school_group_schools .small_item {
    padding: 4px 0px;
}

#school_group_schools .small_item_actions_outer {
    margin-top: -53px;
}

.function_items .small_item {
    padding: 5px 0px;
}

.small_item.clickable,
.link_item.clickable {
    cursor: pointer;
    transition: 0.1s background-color;
}

body:not(.is_mobile) .small_item.clickable:hover,
body:not(.is_mobile) .link_item.clickable:hover {
    background-color: var(--bodyhoverbk);
}

body:not(.is_mobile) .small_item.clickable:active,
.small_item.clickable:active,
body:not(.is_mobile) .link_item.clickable:active,
.link_item.clickable:active {
    background-color: var(--bodyactivebk);
}

.drag_handle {
    float: left;
    width: 24px;
    color: var(--icondisabled);
    height: 48px;
    cursor: -webkit-grab;
    cursor: grab;
}

.drag_handle i {
    font-size: 20px;
    margin-left: -1px;
    line-height: 48px;
}

.drag_handle.disabled,
.reorder_small_item_container.disabled .drag_handle {
    color: var(--divline2);
    cursor: not-allowed;
}

.small_item_thumbnail {
    width: 45px;
    height: 45px;
    padding-right: 8px;
    float: left;
    padding-top: 1px;
}

.small_item_thumbnail img {
    position: absolute;
    width: 45px;
    height: 45px;
    object-fit: contain;
    visibility: visible;
}

.small_item_content:first-child {
    width: calc(100% - 48px - 7px);
    padding-left: 6px;
}

.small_item_content:nth-child(3) {
    width: calc(100% - 24px - 48px - 1px - 48px);
}

.small_item_content:nth-child(3):last-child {
    width: calc(100% - 24px - 48px - 1px);
}

.small_item_icon {
    width: 45px;
    height: 45px;
    float: left;
}

.small_item_icon i {
    color: #3c3c3c;
    font-size: 31px;
    padding: 7px;
    padding-left: 4px;
}

.small_item_content {
    float: left;
    height: 44px;
    padding-top: 1px;
    width: calc(100% - 24px - 48px - 1px);
}

.small_item_content:last-child {
    float: left;
    height: 44px;
    padding-top: 1px;
    width: calc(100% - 24px - 1px);
}

.small_item_icon:first-child~.small_item_content:last-child {
    width: calc(100% - 24px - 45px);
}

.small_item_content.after_thumbnail {
    width: calc(100% - 24px - 48px - 53px - 1px);
}

.small_item_content > div:nth-child(1) {
    font-size: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.small_item_content > div:first-child:last-child {
    line-height: 45px;
}

.small_item_content > div:nth-child(2) {
    font-size: 17px;
    color: var(--btext);
    padding-top: 1px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.small_item_remove {
    float: right;
    height: 48px;
}

.small_item_and {
    position: absolute;
    bottom: -9px;
    background-color: var(--main);
    font-size: 14px;
    padding: 0px;
    left: 0px;
    padding-right: 2px;
    color: var(--btext);
    z-index: 1;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    pointer-events: none;
    display: none;
}

.reorder_small_item_container:not(.active_drag) .small_item:not(:nth-last-child(2)) .small_item_and {
    display: block;
}

.small_item_actions_outer {
    position: absolute;
    right: 0;
    margin-top: -56px;
    margin-right: 0px;
    pointer-events: none;
}

.checkbox_items .small_item_actions_outer {
    z-index: 1;
}

.checkbox_items:not(.checkbox_items_deletable) .small_item_actions_outer {
    right: unset;
    left: 0;
}

.checkbox_items.checkbox_items_nocheckboxes:not(.checkbox_items_deletable) .small_item_actions_outer {
    display: none;
}

.checkbox_items .item_clear {
    visibility: visible;
    pointer-events: none;
}

.checkbox_items .small_item_content {
    padding-left: calc(48px + 6px);
    width: calc(100% - 48px - 48px - 7px);
}

.checkbox_items.checkbox_items_nocheckboxes:not(.checkbox_items_deletable) .small_item_content {
    padding-left: 12px;
    width: calc(100% - 48px - 13px);
}

.checkbox_items.checkbox_items_deletable .small_item_content {
    padding-left: 12px;
    width: calc(100% - 48px - 50px);
}

.checkbox_items.checkbox_items_deletable .small_item_actions_outer {
    margin-top: -52px;
    margin-right: 40px;
}

.small_item_elevated {
    box-shadow: 0px 1px 7px 0px var(--shadow);
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    clip-path: inset(-10px -10px 0px -10px) !important;
    -webkit-clip-path: inset(-10px -10px 0px -10px) !important;
    background-color: var(--main);
    z-index: 1;
    position: relative;
}

.small_item_elevated .item_clear i {
    transform: rotate(-180deg);
}

.small_item_expanded {
    box-shadow: 0px 1px 7px 0px var(--shadow);
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    padding: 12px;
    display: none;
    /* clip-path: inset(0px -10px -10px -10px) !important;
    -webkit-clip-path: inset(0px -10px -10px -10px) !important; */
    margin-top: -1px;
    margin-bottom: 6px;
    font-size: 18px;
}

.checkbox_items_deletable .small_item_expanded {
    padding: 12px 7px;
}

.small_item_elevated+.small_item_actions_outer+.small_item_expanded {
    display: block;
}

.function_items .small_item_actions_outer {
    margin-top: -54px;
}

.small_item_actions_outer .item_clear {
    visibility: visible;
}

.small_item_actions_outer i {
    pointer-events: auto;
}

.small_item_actions_outer .disabled i {
    pointer-events: none;
}

.in_drag .item_clear {
    visibility: visible;
}

.item_clear {
    padding: 1px;
    visibility: hidden;
}

.item_clear i {
    padding: 7px;
    font-size: 28px;
    margin: 2px;
}

.link_item {
    height: 56px;
    border-bottom: 1px solid var(--divline2);
    padding: 6px 0px;
    position: relative;
}

.link_item.in_section {
    margin-left: 15px;
}

.link_item.in_drag {
    height: 56px !important;
    z-index: 31;
}

.link_item.in_section.in_drag {
    width: calc(100% - 15px);
}

.link_item .drag_handle {
    height: 56px;
}

.link_item .drag_handle i {
    line-height: 56px;
}

.link_item_content {
    float: left;
    height: 56px;
    width: calc(100% - 140px);
    height: 50px;
    padding: 2px 0px;
}

.link_item_content div:nth-child(1) {
    font-size: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.link_item_content div:nth-child(2) {
    font-size: 18px;
    color: var(--btext);
    padding-top: 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.header_item_content {
    width: calc(100% - 77px);
    height: 24px;
    padding: 16px 0px;
    padding-left: 2px;
    font-weight: 500;
}

.link_item_remove {
    float: right;
    height: 56px;
}

.link_item_clear {
    padding: 4px 1px;
    visibility: hidden;
}

.link_item_clear i {
    padding: 7px;
    font-size: 30px;
    margin: 2px;
}

.small_item_actions_outer .link_item_clear {
    visibility: visible;
}

.small_item_actions_outer.link_item_outer {
    margin-top: -64px;
}

.link_item_thumb {
    width: 54px;
    height: 54px;
    margin-right: 10px;
    background: #cecece;
    float: left;
    margin-left: 2px;
    margin-top: 1px;
}

.link_item_thumb img {
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.2s;
}

.link_item_thumb i {
    font-size: 36px;
    padding: 9px;
    color: white;
    text-shadow: 0px 1px 8px var(--shadow);
}

.link_item_thumb.page_thumb {
    background-color: transparent;
}

.link_item_thumb.page_thumb i {
    text-shadow: 0px 0px 3px rgb(0 0 0 / 0.25);
    color: var(--icons);
}

.location_item {
    /*height: 54px;*/
    transition: 0.1s background-color;
    padding: 7px 6px;
    cursor: pointer;
}

.location_item div:nth-child(1) {
    font-size: 22px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.location_item div:nth-child(2) {
    color: var(--btext);
    padding-top: 3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body:not(.is_mobile) .location_item:hover {
    background-color: var(--bodyhoverbk);
}

body:not(.is_mobile) .location_item:active,
.location_item:active {
    background-color: var(--bodyactivebk);
}

.location_item:not(:last-child) {
    border-bottom: 1px solid var(--divline);
}

.location_scoller {
    margin-top: 8px;
    max-height: 340px;
}

.searchbar_scroller {
    margin-top: 8px;
    max-height: calc(100vh - 56px - 68px - 100px - 50px);
}

.powered_by_google_location {
    height: 22px;
    float: right;
    padding: 5px;
    padding-top: 9px;
    padding-bottom: 7px;
}

@media (max-width: 450px) {
    .powered_by_google_location {
        float: left;
    }
}

.location_item.selected {
    border: 2px solid var(--accent);
    padding: 5px 4px;
    margin-bottom: 1px;
}

.location_item.selected div:nth-child(1) {
    overflow: unset;
    white-space: unset;
}

.location_item.selected div:nth-child(2) {
    overflow: unset;
    white-space: unset;
}

.calendar_item {
    padding: 1px 6px;
    margin: 7px 0px;
}

.calendar_item_icon {
    width: 64px;
    flex-shrink: 0;
    margin-right: 10px;
}

.calendar_item_icon i {
    font-size: 54px;
    padding: 5px;
    padding-left: 5px;
}

.staff_item_icon {
    width: 64px;
    flex-shrink: 0;
    margin-right: 10px;
    border-radius: 32px;
}

.staff_item_icon i {
    font-size: 64px;
}

.ic {
    width: 50%;
    float: left;
    height: 50%;
}

.ic .material-icons,
.ic .riderappicons {
    font-size: 5.5vw;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: gray;
}

.evic_ovflw_12 {
    display: none;
}

.evic_ovflw_9 {
    display: none;
}

.evic_ovflw_8 {
    display: none;
}

.evic_ovflw_6 {
    display: none;
}

.evic_ovflw_4 {
    display: none;
}

@media (max-aspect-ratio: 25/50) {
    .ic {
        height: 33%;
    }

    .evic_ovflw_4 {
        display: block;
    }
}

@media (min-width: 510px) {
    .ic {
        width: 33%;
    }

    .ic .material-icons,
    .ic .riderappicons {
        font-size: 3.5vw;
    }

    .evic_ovflw_4 {
        display: block;
    }

    @media (max-aspect-ratio: 35/50) {
        .ic {
            height: 33%;
        }

        .evic_ovflw_6 {
            display: block;
        }

        .evic_ovflw_8 {
            display: block;
        }
    }

}

@media (min-width: 901px) {
    .ic {
        width: 25%;
    }

    .ic .material-icons,
    .ic .riderappicons {
        font-size: 1.8vw;
    }

    .evic_ovflw_4 {
        display: block;
    }

    .evic_ovflw_6 {
        display: block;
    }

    @media (max-aspect-ratio: 30/17) {
        .ic {
            height: 33%;
        }

        .evic_ovflw_8 {
            display: block;
        }

        .evic_ovflw_9 {
            display: block;
        }
    }
}

.i_0 .material-icons,
.i_0 .riderappicons {
    color: #ab7b05;
}

.i_1 .material-icons,
.i_1 .riderappicons {
    color: #EF5350;
}

.i_2 .material-icons,
.i_2 .riderappicons {
    color: #42A5F5;
}

.i_3 .material-icons,
.i_3 .riderappicons {
    color: #66BB6A;
}

.i_4 .material-icons,
.i_4 .riderappicons {
    color: #AB47BC;
}

.page_title_top {
    margin-top: -10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.page_title_bottom {
    font-size: 16px;
    font-weight: 400;
    margin-top: -9px;
    line-height: 18px;
    color: var(--btext);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#font_force_loader {
    height: 0px;
    overflow: hidden;
}

#home_image {
    height: 80px;
    margin: 0 auto;
    width: 80px;
    display: block;
    padding-top: 17px;
}

#home_image_temp {
    height: 80px;
    margin: 0 auto;
    width: 80px;
    display: block;
    padding-top: 17px;
    margin-top: -97px;
}

#home_title {
    font-size: 22px;
    text-align: center;
    padding-top: 11px;
}

#home_date {
    text-align: center;
    font-size: 21px;
    padding-top: 16px;
}

#home_info {
    text-align: center;
    font-size: 20px;
    color: var(--btext);
    padding-top: 6px;
    word-break: break-word;
}

#home_modules {
    padding-top: 14px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding-bottom: 10px;
}

.module {
    margin: 12px;
    width: calc(33.3% - 24px);
}

@media (max-width: 1600px) {
    .module {
        width: calc(50% - 24px);
    }
}

@media (max-width: 1100px) {
    .module {
        width: calc(100% - 24px);
    }

    #home_modules {
        max-width: 550px;
        margin: 0 auto;
    }
}

@media (max-width: 900px) {
    #home_modules {
        padding-top: 9px;
    }
}

.module_title {
    font-size: 21px;
    font-weight: 500;
    margin-bottom: -2px;
    margin-top: -2px;
}





.cal_card {
    overflow: hidden;
    position: relative;
}

.card {
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: calc(100% - 16px);
    margin-top: 12px;
    background-color: white;
    box-shadow: 0px 2px 5px var(--classicshadow);
    font-size: 18px;
    border-radius: 5px;
    color: var(--atext);
    word-wrap: break-word;
    transition: 0.2s box-shadow, 0.2s transform;
}

.card:hover {
    box-shadow: 0px 3px 11px rgb(0 0 0 / 30%);
    transform: translateY(-1px);
}

.card {
    cursor: pointer;
}

.calcar_group .cal_card_left {
    height: 64px;
    width: 64px;
    margin: -2px;
    margin-top: -32px;
}

.cal_card_left {
    float: left;
    height: 60px;
    width: 60px;
    top: 50%;
    margin-top: -31px;
    position: absolute;
}

.cal_card_right {
    width: calc(100% - 72px);
    float: right;
    min-height: 60px;
    margin-bottom: 0px;
    margin-top: -1px;
}

.calc_title_parent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 35px;
}

.calcard_nodesc .calc_title_parent {
    min-height: 59px;
}

.calc_title {
    font-size: 22px;
    line-height: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    padding-bottom: 2px;
}

.calc_desc {
    font-size: 18px;
    padding-top: 2px;
    color: var(--btext);
    line-height: 24px;
}

.calcard_nodesc .calc_desc {
    display: none;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal_card_left .riderappicons,
.cal_card_left .material-icons {
    font-size: 60px;
    color: var(--atext);
}

.calcar_red .cal_card_left .riderappicons,
.calcar_red .cal_card_left .material-icons {
    color: var(--redmain);
}

.calcar_red {
    background-color: var(--redsub);
}

.calcar_blue .cal_card_left .riderappicons,
.calcar_blue .cal_card_left .material-icons {
    color: var(--bluemain);
}

.calcar_blue {
    background-color: var(--bluesub);
}

.calcar_green .cal_card_left .riderappicons,
.calcar_green .cal_card_left .material-icons {
    color: var(--greenmain);
}

.calcar_green {
    background-color: var(--greensub);
}

.calcar_gold .cal_card_left .riderappicons,
.calcar_gold .cal_card_left .material-icons {
    color: var(--goldmain);
}

.calcar_gold {
    background-color: var(--goldsub);
}

.calcar_purple .cal_card_left .riderappicons,
.calcar_purple .cal_card_left .material-icons {
    color: var(--purplemain);
}

.calcar_purple {
    background-color: var(--purplesub);
}

div:not(.post_att)>.calcar_groupminify:not(.calcar_group),
div:not(.post_att)>.calcar_minified {
    padding: 9px 8px;
}

div:not(.post_att)>.calcar_groupminify:not(.calcar_group) .cal_card_left,
div:not(.post_att)>.calcar_minified .cal_card_left {
    height: 46px;
    width: 68px;
    text-align: center;
    margin-left: -4px;
    margin-top: -23px;
}

div:not(.post_att)>.calcar_groupminify:not(.calcar_group) .cal_card_right,
div:not(.post_att)>.calcar_minified .cal_card_right {
    min-height: unset;
    margin-bottom: -4px;
    margin-top: -4px;
}

div:not(.post_att)>.calcar_groupminify:not(.calcar_group) .calc_title_parent,
div:not(.post_att)>.calcar_minified .calc_title_parent {
    min-height: 23px;
}

div:not(.post_att)>.calcar_groupminify:not(.calcar_group) .cal_card_left i,
div:not(.post_att)>.calcar_minified .cal_card_left i {
    font-size: 46px;
}

div:not(.post_att)>.calcar_groupminify:not(.calcar_group) .calc_title,
div:not(.post_att)>.calcar_minified .calc_title {
    font-size: 19px;
    line-height: 20px;
}

div:not(.post_att)>.calcar_groupminify:not(.calcar_group) .calc_desc,
div:not(.post_att)>.calcar_minified .calc_desc {
    font-size: 16px;
    line-height: 23.5px;
}

div:not(.post_att)>.calcar_groupminify:not(.calcar_group).calcard_nodesc .calc_title_parent,
div:not(.post_att)>.calcar_minified.calcard_nodesc .calc_title_parent {
    min-height: 46.5px;
}

.cal_car_animate {
    transition: 0.5s max-height, 0.5s padding, 0.5s margin;
}

.cal_car_unexpanded {
    padding: 0px 8px !important;
    /*margin: 0px 8px;*/
    margin: 0px;
    max-height: 0px;
}

.calcar_group {
    opacity: 1;
    transition: 0.35s opacity, 0.0s box-shadow, 0.5s transform;
    transform-origin: top;
    transition-timing-function: ease-in-out;
}

.cal_group_card_fade_out {
    position: absolute;
    opacity: 0;
    transform: scaleY(2.6);
    pointer-events: none;
    box-shadow: none !important;
    margin-top: 0;
    z-index: 1;
}

.home_bell_widget {
    padding: 0;
    width: 100%;
    overflow: hidden;
}

.bell_tables {
    color: var(--atext);
}

.bell_tables table {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
    font-size: 18px;
    background-color: white;
    /*box-shadow: 0px 1px 5px var(--classicshadow);*/
    background-image: -webkit-linear-gradient(bottom, white calc(100% - 30px), var(--head2) 30px);
}

.bell_tables table.no_label {
    background-image: -webkit-linear-gradient(bottom, white calc(100% - 30px), var(--head3) 30px);
}

.bell_tables .label {
    background-color: var(--head1);
    color: var(--ftext);
    text-align: center;
    height: 30px;
    line-height: 30px;
    display: block;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-left: 6px;
    padding-right: 6px;
}

.bell_tables tr {
    border-bottom: 1px solid var(--belllines);
}

.bell_tables tr {
    height: 30px;
}

.bell_tables .tr-top {
    background-color: var(--head2);
    color: #424242;
    border-bottom: 0;
}

.bell_tables .no_label .tr-top {
    background-color: var(--head3);
    color: #212121;
}

.bell_tables td {
    width: 33.33%;
    word-break: break-word;
}

.card_title {
    font-weight: bold;
    font-size: 20px;
    padding-bottom: 9px;
}

.links a {
    text-decoration: none;
}

.links a:link {
    color: var(--link);
}

.links a:visited {
    color: var(--link);
}

.links a:focus {
    color: var(--link);
    outline: none;
    background-color: var(--linkalt);
}

.links a:hover {
    color: var(--link);
}

.links a:active {
    color: var(--link);
    background-color: var(--linkalt);
}

.att_error {
    color: var(--btext);
    font-size: 20px;
    padding-top: 14px;
}

.att_error .material-icons {
    font-size: 60px;
}

.remhigh {
    background-color: var(--high);
}

.remdefault {
    background-color: var(--default);
}

.remlow {
    background-color: var(--low);
}

.module_error {
    text-align: center;
    color: var(--ctext);
}

.module_error i {
    font-size: 50px;
    padding-top: 12px;
}

.module_error div {
    font-size: 19px;
    padding-top: 6px;
}

.update_bar {
    font-size: 19px;
    padding: 11px 12px;
    background-color: #464646;
    color: white;
    border-radius: 8px;
    box-shadow: 0 1px 4px var(--shadow);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: fixed;
    bottom: 22px;
    width: 460px;
    z-index: 39;
    left: 50%;
    transform: translateX(-50%);
    line-height: 28px;
    max-width: 90%;
    animation: 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) updateBarIn forwards;
}

.update_bar i {
    vertical-align: bottom;
    /* margin-top: -3px; */
    /* padding-right: 8px; */
    font-size: 28px;
}

.update_bar i:last-child {
    cursor: pointer;
}

@keyframes updateBarIn {
    0% {
        bottom: -60px;
    }

    100% {
        bottom: 22px;
    }
}

.reorder_empty_space {
    height: 63px;
}

.function_items .reorder_empty_space {
    height: 59px;
}

.in_drag {
    position: absolute;
    width: 100%;
    background-color: var(--main) !important;
    border-bottom: 1px solid transparent;
    box-shadow: 0 0 7px 0px var(--shadow);
    z-index: 9;
    cursor: -webkit-grab !important;
    cursor: grab !important;
    height: 48px !important;
}

.active_drag .small_item {
    height: 48px !important;
}

.error_load {
    height: 60px;
    width: 60px;
    margin: 0 auto;
    padding-bottom: 18px;
}

.image_scroller_bar {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 250px;
    width: 100%;
    white-space: nowrap;
}

.bar_image {
    background-color: var(--search);
    /* float: left; */
    margin-right: 10px;
    display: inline-block;
    margin: 5px;
}

.bar_image img {
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: opacity 0.2s;
    background: var(--main);
}

.bar_image:last-child {
    margin-right: 5px;
}

#event_picker {
    height: 380px;
}

.date_picker .pickeventi {
    opacity: 0.5;
}

.pickeventi {
    width: 50%;
    height: 50%;
    float: left;
    text-align: center;
}

.pickeventi i {
    font-size: 100%;
}

.pickeventtop {
    padding-bottom: 10px;
    overflow: hidden;
    padding-top: 5px;
    /*margin-top: -5px;*/
}

.pickeventarrow {
    float: left;
    width: 40px;
    text-align: center;
    color: var(--icons);
    border-radius: 40px;
    cursor: pointer;
    transition: background 0.1s;
    padding: 5px 0px;
    margin-top: -5px;
    margin-bottom: -5px;
}

.pickeventarrow i {
    font-size: 30px;
}

body:not(.is_mobile) .pickeventarrow:hover {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) .pickeventarrow:active,
.pickeventarrow:active {
    background-color: var(--iconactivebk);
}

.pickeventtitle {
    width: calc(100% - 46px);
    font-size: 20px;
    float: left;
    height: 30px;
    padding-left: 6px;
}

.pickeventtitle div:nth-child(1) {
    font-size: 20px;
    margin-top: -7px;
    margin-bottom: -2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 500;
}

.pickeventtitle div:nth-child(2) {
    font-size: 17px;
    color: var(--btext);
}

.pickerevents {
    width: 100%;
    max-height: calc(380px - 45px);
    overflow-y: auto;
}

.pickerevents_maxheight {
    height: calc(380px - 45px);
    position: relative;
}

@media (min-height: 700px) {
    .pickerevents {
        max-height: calc(480px - 45px);
    }

    .pickerevents_maxheight {
        height: calc(480px - 45px);
    }

    #event_picker {
        height: 480px;
    }
}

@media (max-height: 699px) {
    #event_picker .pickeventi {
        display: none;
    }

    #event_picker .pickeventi:nth-child(1) {
        display: block;
    }

    #event_picker .pickeventi:nth-child(2) {
        display: block;
    }
}

.small_event_items .item_actions {
    display: none;
}

.small_event_items .item {
    padding: 5px 3px;
    height: 55px;
}

.small_event_items .item:nth-last-child(2) {
    border-bottom: 1px solid var(--divline2);
}

.small_event_items .item:nth-child(1) {
    border-top: 1px solid var(--divline2);
}

.small_event_items .item .calendar_item_icon {
    width: 55px;
    margin-right: 7px;
    height: 55px;
}

.small_event_items .item .calendar_item_icon i {
    font-size: 45px;
}

.small_event_items .item .item_left {
    height: 60px;
    margin-top: -5px;
}

.att_events_group .small_item:nth-last-child(2) {
    border-bottom: 1px solid transparent;
}

.att_events_group .small_item.in_drag {
    width: calc(100% - 15px);
}

.active_drag .att_events_group {
    display: none;
}

.in_drag .calendar_event_small_item_close {
    display: none;
}

.post_edit_video_outer {
    width: 100%;
    height: 0px;
    position: relative;
    background: black;
}

.post_edit_video_outer2 {
    max-width: 600px;
}

#post_edit_video video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.analytics_container {
    overflow: hidden;
}

.analytics_row {}

.analytics_column {
    width: calc(50% - 12px);
    float: left;
    margin-bottom: 10px;
}

.analytics_column:first-child {
    margin-right: 24px;
}

@media (max-width: 1200px) {
    .analytics_column {
        width: 100%;
    }

    .analytics_column:first-child {
        margin-right: 0px;
        margin-bottom: 18px;
    }
}

@media (min-width: 901px) {
    .analytics_container {
        padding-bottom: 18px;
    }
}

.analytics_big_number {
    width: 100%;
}

.analytics_big_number .number {
    font-size: 66px;
    font-variant-numeric: tabular-nums;
}

.analytics_big_number .label {
    padding-top: 4px;
    font-size: 22px;
}

.analytics_graph {
    width: 100%;
    height: 50%;
    min-height: 300px;
    max-height: 350px;
}

.chart_title {
    height: 42px;
    padding-top: 16px;
    /* padding-bottom: 12px; */
}

.chart_title>div:nth-child(1) {
    height: 42px;
    line-height: 42px;
    float: left;
    font-size: 21px;
    font-weight: 500;
}

.chart_title>div:nth-child(2) {
    float: right;
    height: 42px;
}

.pdf_page {
    width: calc(50% - 12px);
    padding: 3px;
    float: left;
    border-radius: 7px;
    margin: 3px;
    position: relative;
    cursor: pointer;
}

.pdf_page i {
    color: var(--accent);
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 30px;
    padding: 2px;
    display: none;
    background-color: white;
    margin: 8px;
    border-radius: 24px;
}

.pdf_page.selected {
    background-color: var(--accent);
}

.pdf_page.selected i {
    display: block;
}

.pdf_page img {
    width: 100%;
    border-radius: 3px;
}

.change_icon.pulse {
    animation: 1.5s icon_pulse linear infinite 0s;
}

@keyframes icon_pulse {
    0% {
        background-color: white;
    }

    50% {
        background-color: #dafff3;
    }

    100% {
        background-color: white;
    }
}

.tray {
    position: fixed;
    transition: transform 0.25s, box-shadow 0.35s;
    color: var(--atext);
    background-color: var(--main);
    right: 0;
    box-shadow: 0px 0px 12px rgb(60, 60, 60);
    top: 0px;
    height: 100%;
    width: 100%;
    max-width: 400px;
    /*update in javascript*/
    transform: translateX(calc(100% + 15px));
    z-index: 62;
    pointer-events: none;
    overflow-y: scroll;
}

.tray_top {
    height: 64px;
    width: 100%;
    border-bottom-style: solid;
    border-color: var(--divline);
    border-bottom-width: 1px;
    height: 60px;
    margin-top: -4px;
    /*overflow: hidden;*/
    position: sticky;
    top: -4px;
    background-color: var(--main);
    z-index: 1;
    transition: box-shadow 0.2s;
}

.tray_top.shadow {
    box-shadow: 0 0px 8px var(--shadow);
}

.tray_top div:first-child {
    font-size: 24px;
    font-weight: 500;
    line-height: 62px;
    padding-left: 18px;
    float: left;
}

@media (max-width: 900px) {
    .tray_top {
        height: 61px;
        margin-top: -3px;
        top: -3px;
    }
}

.tray_scroll {
    height: calc(100% - 59px);
    position: relative;
    /* overflow-x: hidden; */
    /* overflow-y: auto; */
    /*padding-top: 59px;*/
}

#alerts_spinner {
    width: 80px;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

.alert {
    margin: 10px;
    padding: 10px;
    box-shadow: 0 1px 4px var(--shadow);
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 15px;
    overflow: hidden;
}

.alert.disabled {
    cursor: unset;
    pointer-events: none;
}

.alert .indeterminate {
    margin: -10px;
    margin-bottom: 5px;
    width: calc(100% + 20px);
}

.alert.disabled .alert_header {
    opacity: 0.6;
}

.alert_header {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.alert_header i {
    font-size: 22px;
    vertical-align: top;
}

.alert_header span:nth-child(2) {
    font-size: 18px;
    padding-left: 6px;
}

.alert_header span:nth-child(3),
.alert_header span:nth-child(5) {
    font-size: 18px;
    padding-left: 6px;
    color: var(--icons);
}

.alert_header span:nth-child(4),
.alert_header span:nth-child(6) {
    font-size: 18px;
    padding-left: 6px;
    color: var(--btext);
}

.alert.disabled .alert_title {
    opacity: 0.6;
}

.alert_title {
    font-size: 19px;
    font-weight: 500;
    padding-top: 9px;
}

.alert.disabled .alert_text {
    opacity: 0.6;
}

.alert_text {
    font-size: 18px;
    padding-top: 4px;
    /* color: var(--btext); */
    /* padding-bottom: 1px; */
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    max-height: 68px;
}

.alert.disabled .alert_actions {
    opacity: 0.6;
}

.alert_actions {
    margin: -6px;
    padding-top: 9px;
    overflow: hidden;
    padding-bottom: 1px;
}

.alert_actions div {
    color: var(--accenttext);
    font-weight: 500;
    font-size: 19px;
    float: left;
    padding: 6px;
    margin-right: 4px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    cursor: pointer;
    user-select: none;
}

body:not(.is_mobile) .alert_actions div:hover {
    background-color: var(--accenthover);
}

body:not(.is_mobile) .alert_actions div:active,
.alert_actions div:active {
    background-color: var(--accentactive);
}

#tray_icon {
    position: relative;
}

#tray_icon div {
    position: absolute;
    bottom: 13px;
    right: 13px;
    color: white;
    background-color: #d32f2f;
    border-radius: 20px;
    font-size: 14px;
    line-height: 19px;
    /* width: 18px; */
    height: 18px;
    text-align: center;
    pointer-events: none;
    min-width: 10px;
    padding: 0px 4px;
    box-shadow: 0 1.5px 3px var(--shadow);
}

@media (max-width: 900px) {
    #tray_icon {
        padding-right: 10px;
    }
}

.in_search #tray_icon {
    display: none !important;
}

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

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

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

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

#dayinforeason.dontchange::placeholder {
    font-style: italic;
}

.default_value::placeholder {
    color: var(--btext);
}

#feedback_message_body a {
    color: #1565c0;
    text-decoration: underline;
}

#feedback_message_body a:hover {
    background: #bbdefb;
}

.integration_items {
    overflow: hidden;
}

.integration_item {
    background-color: var(--int_color);
    border-radius: 20px;
    padding: 15px;
    width: 250px;
    color: white;
    float: left;
    margin-right: 15px;
    margin-bottom: 13px;
}

.integration_item_blueprint {
    color: var(--atext);
    background-color: #f6f6f6;
    border: 5px dashed #696969;
    padding: 10px;
}

.integration_item .provider_bar {
    height: 28px;
}

.integration_item .provider_bar img,
.integration_item .provider_bar div:nth-child(1) {
    width: 24px;
    height: 28px;
    float: left;
}

.integration_item .provider_bar div:nth-child(1) i {
    font-size: 28px;
    color: var(--icons);
}

.integration_item .provider_bar div:nth-child(2) {
    float: left;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    padding-left: 10px;
}

.integration_item .integration_name {
    font-size: 24px;
    padding-top: 10px;
    /* height: 106px; */
    padding-bottom: 12px;
}

.integration_item .service_bar {
    opacity: 0.94;
    height: 24px;
}

.integration_item .service_bar i {
    float: left;
}

.integration_item .service_bar span {
    float: left;
    font-size: 18px;
    line-height: 24px;
    padding-left: 6px;
    padding-right: 11px;
}

.integration_item .action_bar {
    height: 42px;
    padding-top: 14px;
}

.integration_item .action_bar .button {
    float: right;
}

.integration_item:not(.integration_item_blueprint) .action_bar .button {
    border-color: white;
    color: white;
    background-color: var(--int_color);
}

body:not(.is_mobile) .integration_item:not(.integration_item_blueprint) .action_bar .button:hover {
    float: right;
    border-color: white;
    color: white;
    background-color: rgba(255, 255, 255, 0.2);
}

body:not(.is_mobile) .integration_item:not(.integration_item_blueprint) .action_bar .button:active,
.integration_item:not(.integration_item_blueprint) .action_bar .button:active {
    float: right;
    border-color: white;
    color: var(--int_color);
    background-color: white;
}

.sync_spin {
    animation: 2s sync_spin linear infinite;
}

div:not(.overflow_item)>.sync_spin {
    margin-right: 5.5px;
    padding-right: 0px !important;
}

@keyframes sync_spin {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.reorder_small_item_container.disabled {
    pointer-events: none;
}

.grid {
    overflow: hidden;
    margin: -3px;
    padding-top: 1px;
}

.grid_item {
    position: relative;
    width: calc(50% - 10px);
    float: left;
    margin: 5px;
    border-radius: 10px;
    height: 276px;
    transition: box-shadow 0.15s;
}

.grid_item_inner {
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    transition: background 0.1s;
    box-shadow: inset 0 0 0 1px var(--divline2);
}

.disabled .grid_item_inner {
    cursor: move;
}

.grid_item_actions {
    position: absolute;
    top: 2px;
    right: 1px;
}

.grid_empty_space {
    float: left;
    width: 50%;
}

@media (max-width: 900px) {
    .grid_item {
        width: calc(100% - 10px);
    }

    .grid_item.grid_drag {
        width: calc(100% - 16px);
    }

    .grid_empty_space {
        width: 100%;
    }
}

@media (min-width: 1360px) {
    .grid_item {
        width: calc(33.33% - 10px);
    }

    .grid_empty_space {
        width: 33.33%;
    }
}

body:not(.is_mobile) .grid_item_inner:hover {
    background-color: var(--bodyhoverbk);
}

body:not(.is_mobile) .grid_item_inner:active,
.grid_item_inner:active {
    background-color: var(--bodyactivebk);
}

.grid_top {
    height: 48px;
    padding: 2px 1px;
    pointer-events: none;
}

.grid_top>div:nth-child(1) {
    font-size: 22px;
    color: var(--atext);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 27px;
    padding: 10px;
    padding-right: 0px;
    width: calc(100% - 48px - 10px);
    float: left;
}

.grid_top>div:nth-child(1)>span:nth-child(1) {
    max-width: calc(100% - 58px - 7px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

.grid_top>div:nth-child(1)>span:nth-child(2) {
    font-size: 13px;
    vertical-align: top;
    padding: 1px 3px;
    background-color: gray;
    color: white;
    border-radius: 5px;
    margin-left: 7px;
}

.grid_content {
    margin: 10px;
    margin-top: 3px;
    height: 221px;
    margin-bottom: 0px;
    pointer-events: none;
}

.grid_content .bell_tables {
    box-shadow: 0px 1px 5px var(--classicshadow);
    margin: 0;
    margin-bottom: 10px;
}

.edit_bell_top {
    overflow: hidden;
}

.edit_bell_top .input_label {
    width: 143px;
    float: left;
}

.edit_bell_row {
    height: 42px;
    padding-bottom: 8px;
}

.edit_bell_row .date_selection,
.edit_bell_row input {
    float: left;
    margin-right: 8px;
    width: 86px;
}

/*
@media (max-width: 488px) {
.edit_bell_row .date_selection {
	background: none;
    padding-right: 8px;
    width: calc(33.33% - 60px - 9px + 29px);
	text-overflow: unset;
}
}
*/
.edit_bell_row .date_selection:nth-child(4) {
    margin-right: 2px;
}

.edit_bell_row input {
    width: 135px;
}

.grid_drag {
    position: absolute;
    background-color: var(--main) !important;
    /*border-bottom: 1px solid transparent;*/
    box-shadow: 0 2px 16px 0px var(--shadow);
    z-index: 31;
    cursor: -webkit-grab !important;
    cursor: grab !important;
}

.grid_drag .grid_item_inner {
    opacity: 1 !important;
}

#bell_main_list .grid_drag .grid_item_inner {
    background-color: var(--main) !important;
}

.icon_item {
    overflow: hidden;
    padding-bottom: 2px;
}

.icon_item div:nth-child(1) {
    float: left;
    width: 28px;
    padding-right: 10px;
}

.icon_item i {
    font-size: 28px;
    color: var(--icons);
}

.icon_item div:nth-child(2) {
    padding-top: 2px;
    float: left;
    width: calc(100% - 28px - 10px);
}

.edit_bell_row .time_clear i {
    margin-right: 0;
}

#bell_title_scroll::-webkit-scrollbar {
    display: none;
}

#bell_title_scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.resources_title {
    color: white;
    font-size: 22px;
    padding-top: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    height: 26px;
    padding-left: 10px;
    padding-right: 10px;
    pointer-events: none;
    padding-bottom: 5px;
    text-shadow: 0 2px 4px rgb(0 0 0 / 27%);
}

.resources_desc {
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: -1px;
    position: relative;
    height: 22px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 18px;
    pointer-events: none;
    text-shadow: 0 2px 4px rgb(0 0 0 / 27%);
    padding-bottom: 5px;
}

.resource_item .grid_item_inner {
    background-position: center;
    background-size: cover;
    position: relative;
    height: 110px;
    overflow: hidden;
    transition: 0.1s opacity;
}

.resource_item {
    height: 110px;
    background-color: white;
}

.resource_item .actions_overflow>i {
    color: white;
}

body:not(.is_mobile) .resource_item .actions_overflow>i:hover {
    background-color: rgba(256, 256, 256, 0.3)
}

body:not(.is_mobile) .resource_item .actions_overflow>i:active,
.resource_item .actions_overflow>i:active {
    background-color: rgba(256, 256, 256, 0.45)
}

body:not(.is_mobile) .resource_item .grid_item_inner:hover {
    opacity: 0.85;
}

body:not(.is_mobile) .resource_item .grid_item_inner:active,
.resource_item .grid_item_inner:active {
    opacity: 0.75;
}

#resource_appearance {
    background-position: center;
    background-size: cover;
    position: relative;
    height: 90px;
    overflow: hidden;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: calc(100% - 32px);
    max-width: 210px;
    background-color: white;
    box-shadow: 0px 1px 5px rgb(0 0 0 / 40%);
    border-radius: 7px;
}

.color_dropdown .dropdown_option .material-icons,
.color_dropdown .dropdown_option .riderappicons {
    transform: scale(1.5);
    padding-right: 0px;
    margin-top: 0px;
}

.color_dropdown .menu_dropdown_options {
    width: 180px;
    padding: 4px;
}

.color_dropdown .menu_dropdown_selected .material-icons,
.color_dropdown .menu_dropdown_selected .riderappicons {
    transform: scale(1.3);
    padding-right: 0px;
    margin-right: -1px;
    margin-top: 0px;
}

.color_dropdown .dropdown_option {
    width: 22px;
    height: 22px;
    float: left;
    padding: 7px 7px !important;
}

.color_dropdown .dropdown_option:first-child,
.color_dropdown .dropdown_option:last-child {
    padding: 7px 7px !important;
}


.content_iframe {
    width: 100%;
    height: 100%;
}

.content_iframe iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.console_links a {
    color: var(--accenttext);
    font-weight: 500;
}

#form_container {
    color: var(--atext);
}

.form_title {
    padding-top: 14px;
    font-size: 27px;
    border-top-style: solid;
    border-color: var(--divline);
    border-top-width: 1px;
}

.form_subtitle {
    font-size: 18px;
    padding-top: 14px;
    color: var(--atext);
}

.form_subtitle_submitted {
    padding-top: 2px;
    padding-bottom: 11px;
    font-size: 18px;
    color: var(--atext);
}

.form_subtitle_below {
    font-size: 18px;
    padding-top: 12px;
    color: var(--atext);
}

.form_body {
    padding: 20px 0px;
}

.form_input_label {
    font-size: 20px;
    /* font-weight: 500; */
    padding-bottom: 10px;
    padding-top: 2px;
}

.form_input_label_subtitle {
    font-size: 18px;
    color: var(--btext);
    padding-bottom: 10px;
    margin-top: -5px;
}

#form_container_notloader {
    max-width: 600px;
    margin: 0 auto;
    padding: 0px 12px;
}

#form_container_notloader.disabled {
    opacity: 0.6;
    pointer-events: none;
}

#form_footer {
    font-size: 17px;
    color: var(--btext) !important;
    padding-top: 50px;
    padding-bottom: 14px;
}

#form_footer a {
    color: var(--btext) !important;
}

#form_container_content,
#form_container_submitted,
#form_container_notfound {
    min-height: calc(100vh - 80px - 109px);
}






















.richeditor-toolbar {
    overflow: hidden;
    margin-top: 1px;
}

.richeditor-toolbar button {
    float: left;
    font-size: 20px;
    line-height: 32px;
    padding: 3px;
    padding-left: 6px;
    color: var(--accenttext);
    border-radius: 10px;
    border-width: 2px;
    border-color: var(--accent);
    border-style: solid;
    padding-right: 6px;
    transition: color 0.15s, background-color 0.15s;
    cursor: pointer;
    font-weight: 500;
    -webkit-user-select: none;
    user-select: none;
    margin-right: 4px;
    background-color: transparent;
    outline: none;
    margin-bottom: 6px;
    margin-top: 0px;
    margin-left: 0px;
}

.richeditor-toolbar button:disabled,
.richeditor-toolbar button.disabled {
    pointer-events: none;
    border-color: #b3b3b3;
    color: var(--gray);
    background-color: transparent !important;
}

.richeditor-toolbar button.trix-active {
    background-color: var(--accent);
    color: white;
}

body:not(.is_mobile) .richeditor-toolbar button:not(.trix-active):hover {
    background-color: var(--accenthover);
}

body:not(.is_mobile) .richeditor-toolbar button:not(.trix-active):active,
.richeditor-toolbar button:not(.trix-active):active {
    background-color: var(--accentactive);
}

body:not(.is_mobile) .richeditor-toolbar button.trix-active:hover {
    background-color: var(--accentprimaryhover);
    border-color: var(--accentprimaryhover);
}

body:not(.is_mobile) .richeditor-toolbar button.trix-active:active,
.richeditor-toolbar button.trix-active:active {
    background-color: var(--accentprimaryactive);
    border-color: var(--accentprimaryactive);
}

.richeditor-toolbar .general_round_button {
    margin-left: -2px;
    margin-right: 2px;
    transition: 0.2s transform;
    margin-bottom: 6px;
}

.richeditor-toolbar .general_round_button i {
    font-size: 30px;
    padding: 2px;
}

.richeditor-toolbar .general_round_button.trix_toolbar_icon_expanded {
    transform: rotate(-180deg);
}

@media (max-width: 569px) {
    .richeditor-toolbar .general_round_button {
        transform: rotate(90deg);
        margin-left: 3px;
    }

    .richeditor-toolbar .general_round_button.trix_toolbar_icon_expanded {
        transform: rotate(-90deg);
    }
}

@media (max-width: 900px) {
    .richeditor-toolbar button {
        padding: 4px;
        padding-left: 7px;
        padding-right: 7px;
        margin-right: 5px;
    }

    .richeditor-toolbar {
        margin-bottom: 1px;
    }

    .richeditor-toolbar .general_round_button {
        margin-bottom: 8px;
    }
}

trix-editor {
    -webkit-user-select: text;
    user-select: text;
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    display: inline-block;
    text-align: start;
    background-color: white;
    -webkit-rtl-ordering: logical;
    cursor: text;
    padding: 1px 0px;
    font-size: 20px;
    border: 2px solid var(--inputoutline);
    font-family: 'roboto', sans-serif;
    border-radius: 8px;
    padding: 7px 8px;
    background-color: var(--main);
    width: 100%;
    outline: none;
    transition: 0.1s border;
    color: var(--atext);
    box-sizing: border-box;
    max-height: 400px;
    overflow-y: auto;
    min-height: 190px;
    max-width: 600px;
    word-break: break-word;
}

#eventdescription,
#resource_description {
    max-width: 420px;
    min-height: 119px;
}

trix-editor:focus {
    border: 2px solid var(--accent);
}

trix-editor.error {
    border: 2px solid var(--red);
}

trix-editor li {
    margin-block-end: 5px;
    margin-block-start: 5px;
}

trix-editor ul,
trix-editor ol {
    margin-block-end: 0px;
    margin-block-start: 0px;
    padding-inline-start: 30px;
}

trix-editor a {
    color: #1565c0;
    text-decoration: none;
}

trix-editor[disabled] a {
    pointer-events: none;
}

trix-editor a:hover {
    background: #bbdefb;
}

trix-editor strong,
trix-editor b {
    font-weight: 600;
}

trix-toolbar .trix-dialog {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--main);
    box-shadow: 0px 1.5px 10px 0px var(--shadow);
    padding: 3px;
    white-space: nowrap;
    border-radius: 7px;
    max-width: calc(100vw - 38px);
    overflow: hidden;
    z-index: 9;
    margin-top: 41px;
    margin-left: 4px;
    margin-right: 4px;
}

.trix-tooltip-offscreen {
    display: none !important;
}

.trix-tooltip-disabled {
    opacity: 0;
}

trix-toolbar .trix-dialog i.trix-tooltip-icon-phone,
trix-toolbar .trix-dialog i.trix-tooltip-icon-email,
trix-toolbar .trix-dialog i.trix-tooltip-icon-link {
    float: left;
    font-size: 28px;
    line-height: 38px;
    padding-right: 10px;
    padding-left: 4px;
    -webkit-user-select: none;
    user-select: none;
    color: var(--icons);
    padding-right: 12px;
    padding-left: 5px;
    display: none;
}

trix-toolbar .trix-dialog.trix-tooltip-active-phone i.trix-tooltip-icon-phone {
    display: block;
}

trix-toolbar .trix-dialog.trix-tooltip-active-email i.trix-tooltip-icon-email {
    display: block;
}

trix-toolbar .trix-dialog.trix-tooltip-active-link i.trix-tooltip-icon-link {
    display: block;
}


trix-toolbar .trix-dialog input {
    padding: 5px 6px;
    max-width: calc(100% - 134px);
    width: 350px;
    float: left;
    display: none;
    margin-top: 0px;
    margin-bottom: 0px;
}

trix-toolbar .trix-dialog[data-trix-active] input {
    display: block;
}

trix-toolbar .trix-dialog[data-trix-active] input[data-trix-input] {
    display: none !important;
}

/*trix-toolbar .trix-dialog input:invalid {
    border: 2px solid var(--red) !important;
}*/

trix-toolbar .trix-dialog button {
    margin-left: 6px;
    float: left;
    font-size: 20px;
    line-height: 32px;
    padding: 3px;
    padding-left: 8px;
    color: var(--accenttext);
    border-radius: 10px;
    border-width: 2px;
    border-color: var(--accent);
    border-style: solid;
    padding-right: 9px;
    transition: color 0.15s, background 0.15s;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    -webkit-user-select: none;
    user-select: none;
    outline: none;
    border: none;
    background-color: transparent;
    display: none;
    margin-top: 0px;
    margin-bottom: 0px;
}

trix-toolbar .trix-dialog button[data-trix-method] {
    display: none !important;
}

trix-toolbar .trix-dialog[data-trix-active] button {
    display: block;
}

body:not(.is_mobile) trix-toolbar .trix-dialog button:hover {
    background-color: var(--accenthover);
}

body:not(.is_mobile) trix-toolbar .trix-dialog button:active,
trix-toolbar .trix-dialog button:active {
    background-color: var(--accentactive);
}

trix-toolbar .trix-dialog.trix-active {
    display: block;
}

trix-toolbar .trix-dialog .trix_tooltip_link_preview {
    text-decoration: none;
    color: var(--link);
    max-width: 347px;
    overflow-x: hidden;
    text-overflow: ellipsis;
    float: left;
    margin: 6px 0px;
    line-height: 26px;
    cursor: pointer;
    text-decoration: none;
    display: none;
    font-size: 20px;
}

@media (max-width: 527px) {
    trix-toolbar .trix-dialog .trix_tooltip_link_preview {
        max-width: calc(100% - 135px);
    }

    trix-toolbar .trix-dialog .trix_tooltip_link_preview.trix_tooltip_preview_autolink {
        max-width: calc(100% - 135px + 43px);
    }
}

trix-toolbar .trix-dialog .trix_tooltip_link_preview:active {
    color: var(--link);
    background-color: var(--linkalt);
}

trix-toolbar .trix-dialog:not([data-trix-active]) .trix_tooltip_link_preview {
    display: block;
}

trix-toolbar .trix-dialog .trix_tooltip_remove_button,
trix-toolbar .trix-dialog .trix_tooltip_edit_button {
    margin-left: 9px;
    width: 38px;
    height: 38px;
    display: none;
    float: left;
}

trix-toolbar .trix-dialog .trix_tooltip_edit_button {
    margin-right: -4px;
}

trix-toolbar .trix-dialog:not([data-trix-active]) .trix_tooltip_remove_button {
    display: block;
}

trix-toolbar .trix-dialog:not([data-trix-active]) .trix_tooltip_link_preview.trix_tooltip_preview_manuallink~.trix_tooltip_edit_button {
    display: block;
}

trix-toolbar .trix-dialog .trix_tooltip_remove_button i,
trix-toolbar .trix-dialog .trix_tooltip_edit_button i {
    font-size: 28px;
    line-height: 38px;
    padding-right: 5px;
    padding-left: 5px;
    color: var(--icons);
    border-radius: 30px;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    transition: background-color 0.1s;
}

trix-toolbar .trix-dialog .trix_tooltip_remove_button i {
    font-size: 30px;
    line-height: 38px;
    padding-right: 4px;
    padding-left: 4px;
}

body:not(.is_mobile) trix-toolbar .trix-dialog .trix_tooltip_remove_button i:hover,
body:not(.is_mobile) trix-toolbar .trix-dialog .trix_tooltip_edit_button i:hover {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) trix-toolbar .trix-dialog .trix_tooltip_remove_button i:active,
trix-toolbar .trix-dialog .trix_tooltip_remove_button i:active,
body:not(.is_mobile) trix-toolbar .trix-dialog .trix_tooltip_edit_button i:active,
trix-toolbar .trix-dialog .trix_tooltip_edit_button i:active {
    background-color: var(--iconactivebk);
}

.trix_toolbar_expanded {
    overflow: hidden;
    float: left;
}

@media (max-width: 450px) {
    .closure_reason_hide {
        display: none;
    }
}

.conditional_swap .conditional_hidden {
    display: none;
}

.conditional_visible {
    display: none;
}

.conditional_swap .conditional_visible {
    display: block;
}

.import_staff_category {
    height: 24px;
    padding: 3px 0px;
}

.import_staff_category>div:first-child {
    float: left;
    width: 24px;
    height: 24px;
}

.import_staff_category>div:first-child i {
    font-size: 24px;
}

.import_staff_category>div:nth-child(2) {
    line-height: 24px;
    height: 24px;
    float: left;
    padding-left: 6px;
    width: calc(100% - 24px - 7px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    user-select: text;
}

#import_choose_spreadsheet {
    /* max-width: 465px; */
    /*margin: 0 auto;*/
    padding-top: 12px;
    overflow: hidden;
}

.import_spreadsheet_item {
    width: calc(50% - 24px);
    float: left;
    border-radius: 14px;
    transition: 0.1s background;
    cursor: pointer;
    padding: 20px 12px;
    max-width: 230px;
}

body:not(.is_mobile) .import_spreadsheet_item:hover {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) .import_spreadsheet_item:active,
.import_spreadsheet_item:active {
    background-color: var(--iconactivebk);
}

.import_spreadsheet_item>div:first-child {
    height: 75px;
    width: 75px;
    margin: 0 auto;
}

.import_spreadsheet_item>div:first-child>svg, .import_spreadsheet_item>div:first-child>img {
    height: 75px;
    width: 75px;
}

.import_spreadsheet_item>div:nth-child(2) {
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    padding-top: 20px;
}

.import_spreadsheet_item>div:nth-child(3) {
    text-align: center;
    font-size: 18px;
    padding-top: 6px;
    color: var(--btext);
}

@media (max-width: 500px) {
    .import_spreadsheet_item>div:first-child {
        height: 60px;
        width: 60px;
    }

    .import_spreadsheet_item>div:first-child>svg {
        height: 60px;
        width: 60px;
    }

    .import_spreadsheet_item>div:first-child>svg, .import_spreadsheet_item>div:first-child>img {
        height: 60px;
        width: 60px;
    }

    .import_spreadsheet_item>div:nth-child(2) {
        font-size: 18px;
        padding-top: 20px;
    }

    .import_spreadsheet_item>div:nth-child(3) {
        font-size: 16px;
        padding-top: 6px;
    }
}

.picker-dialog-bg {
    background-color: black !important;
}

@media (max-width: 900px) {
    .picker-dialog {
        height: 100% !important;
        width: 100% !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        margin: auto;
    }

    .picker-dialog-content {
        width: 100% !important;
        height: 100% !important;
    }
}

.errorcards {
    margin-bottom: 14px;
}

.errorcards ul {
    user-select: text;
}

.errorcard {
    border-radius: 8px;
    padding: 12px;
    font-size: 19px;
    border: 2px solid #921818;
    background: linear-gradient(180deg, #ffeaea 0px, transparent 50px);
    margin-bottom: 12px;
}

.errorcard_changes {
    border-radius: 8px;
    padding: 12px;
    font-size: 19px;
    border: 2px solid #c7c7c7;
    background: none;
    margin-bottom: 12px;
    max-width: 600px;
}

.errorcardtitle {
    font-size: 21px;
    font-weight: 500;
    padding-bottom: 10px;
    color: #7b1913;
}

.errorcard.errorcard_warning {
    border-radius: 8px;
    padding: 12px;
    font-size: 19px;
    border: 2px solid #914018;
    background: linear-gradient(180deg, #fff1eb 0px, transparent 50px);
    margin-bottom: 12px;
}

.errorcard_warning .errorcardtitle {
    font-size: 21px;
    font-weight: 500;
    padding-bottom: 10px;
    color: #7c3613;
}

.import_summary_name_list {
    overflow-y: auto;
    max-height: 224px;
}

.import_summary_name_list ul {
    margin: 0px;
    padding-inline-start: 32px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.import_summary_name_list li {
    padding-top: 2px;
    padding-bottom: 2px;
    cursor: pointer;
    transition: 0.1s background-color;
    border-radius: 6px;
}

body:not(.is_mobile) .import_summary_name_list li:hover {
    background-color: var(--bodyhoverbk);
}

body:not(.is_mobile) .import_summary_name_list li:active,
.import_summary_name_list li:active {
    background-color: var(--bodyactivebk);
}

.import_delete_disabled {
    pointer-events: none;
    opacity: 0.45;
}

.import_changed {
    padding-bottom: 1px;
    padding-top: 1px;
    margin-bottom: 2px;
    border-radius: 5px;
    user-select: text;
    word-break: break-word;
}

.import_changed span {
    font-weight: 600;
}

.import_changed_created {
    background-color: #c8e6c9;
    background: linear-gradient(90deg, #c8e6c9, #e8f5e9);
}

.import_changed_updated {
    background-color: #ffecb3;
    background: linear-gradient(90deg, #ffecb3, #fff8e1);
}

.import_changed_deleted {
    background-color: #ffcdd2;
    background: linear-gradient(90deg, #ffcdd2, #ffebee);
}

.generic_hover_button {
    cursor: pointer;
    transition: 0.1s background-color;
    border-radius: 6px;
}

body:not(.is_mobile) .generic_hover_button:hover {
    background-color: var(--bodyhoverbk);
}

body:not(.is_mobile) .generic_hover_button:active,
.generic_hover_button:active {
    background-color: var(--bodyactivebk);
}

.promote_item_row {
    overflow: hidden;
}

.promote_item {
    width: 250px;
    padding-top: 10px;
    float: left;
    padding-bottom: 15px;
}

@media (max-width: 524px) {
    .promote_item {
        width: 100%;
    }
}

.promote_item>div:nth-child(1) {
    border: 2px solid gray;
    background: #e8e8e8;
    margin: 0 auto;
    transition: background 0.2s;
}

.promote_item>div:nth-child(2) {
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    padding-top: 14px;
}

.promote_item img {
    height: 150px;
    width: auto;
    opacity: 0;
    transition: opacity 0.2s;
}

.promote_item>div:nth-child(3) {
    font-size: 18px;
    text-align: center;
    padding-top: 8px;
    color: var(--btext);
}

.promote_item>div:nth-child(4) {
    height: 42px;
    padding-top: 8px;
}

.promote_item>div:nth-child(4)>div {
    height: 42px;
    position: relative;
    left: 50%;
    float: left;
}

.promote_item>div:nth-child(4)>div>div {
    border-color: transparent;
    position: relative;
    left: -50%;
}

.promote_item>div:nth-child(5) {
    font-size: 20px;
    text-align: center;
    font-weight: 500;
    color: var(--btext);
    height: 24px;
    padding-top: 17px;
    padding-bottom: 9px;
    display: none;
}

.promote_item>div:nth-child(5)>div {
    width: 24px;
    height: 24px;
    display: inline-block;
    padding-right: 10px;
}

.promote_item>div:nth-child(5) .spinner .path {
    stroke-width: 13;
}

.promote_item>div:nth-child(5)>span {
    vertical-align: top;
    line-height: 24px;
}

.notif_heading_title {
    font-weight: 500;
    padding: 11px 0px;
    font-size: 20px;
}

.notif_heading_title.top {
    padding-top: 2px;
}

.notif_heading_title.icon_section i {
    font-size: 24px;
    padding-right: 8px;
}

.notif_heading_title span {
    vertical-align: bottom;
}

.notif_prefs_header {
    height: 29px;
}

.notif_prefs_header>div {
    float: left;
    font-size: 18px;
    font-weight: 500;
    padding-bottom: 6px;
    padding-top: 2px;
}

.notif_prefs_header>div:nth-child(1) {
    width: calc(100% - 89px - 89px);
}

.notif_prefs_header>div:nth-child(2),
.notif_prefs_header>div:nth-child(3) {
    width: 89px;
    text-align: center;
}

.notif_prefs_item {
    overflow: hidden;
    width: 100%;
}

.notif_prefs_item>div {
    float: left;
    font-size: 18px;
}

.notif_prefs_item>div:nth-child(1) {
    width: calc(100% - 89px - 89px);
    line-height: 23px;
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 19px;
}

.notif_prefs_item>div:nth-child(2),
.notif_prefs_item>div:nth-child(3) {
    width: 89px;
    text-align: center;
}


.notif_prefs_item>div>div {
    height: 42px;
    cursor: pointer;
}

.notif_prefs_item>div>div>i {
    font-size: 30px;
    width: 30px;
    height: 30px;
    padding: 6px 6px;
    color: var(--icons);
    border-radius: 50px;
    transition: color 0.08s, background 0.15s;
}

body:not(.is_mobile) .notif_prefs_item>div>div:not(.selected):hover>i {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) .notif_prefs_item>div>div:not(.selected):active>i,
.notif_prefs_item>div>div:not(.selected):active>i {
    background-color: var(--iconactivebk);
}

body:not(.is_mobile) .notif_prefs_item>div>div.selected:hover>i,
body:not(.is_mobile) .notif_prefs_item>div>div.selected:hover i {
    background-color: var(--accenthover);
}

body:not(.is_mobile) .notif_prefs_item>div>div.selected:active>i,
.notif_prefs_item>div>div.selected:active>i {
    background-color: var(--accentactive);
}

.notif_prefs_item .selected i {
    color: var(--accent) !important;
}

.notif_only_one_school .small_item {
    box-shadow: none;
    border: 1px solid var(--divline2);
    pointer-events: none;
}

.notif_only_one_school .small_item_expanded {
    box-shadow: none;
    border: 1px solid var(--divline2);
}

.notif_only_one_school .small_item_remove {
    display: none;
}

/* 
.checkbox i {
    font-size: 30px;
    width: 30px;
    height: 30px;
    padding: 6px 6px;
    color: var(--icons);
    border-radius: 50px;
    transition: color 0.08s, background 0.15s;
}

.checkbox.selected i {
    color: var(--accent) !important;
}

.checkbox {
    width: 42px;
    float: left;
    height: 42px;
    cursor: pointer;
}

body:not(.is_mobile) .checkbox:not(.selected):hover i, body:not(.is_mobile) .checkbox:not(.selected):hover i {
	background-color: var(--iconhoverbk);
}

body:not(.is_mobile) .checkbox:not(.selected):active i, .checkbox:not(.selected):active i, body:not(.is_mobile) .checkbox:not(.selected):active i, .checkbox:not(.selected):active i {
	background-color: var(--iconactivebk);
}

body:not(.is_mobile) .checkbox.selected:hover i, body:not(.is_mobile) .checkbox.selected:hover i {
	background-color: var(--accenthover);
}

body:not(.is_mobile) .checkbox.selected:active i, .checkbox.selected:active i, body:not(.is_mobile) .checkbox.selected:active i, .checkbox.selected:active i {
	background-color: var(--accentactive);
} */

.translated_banner {
    margin-top: 0px;
    margin-bottom: 4px;
    line-height: 24px;
    overflow: hidden;
    padding: 2px 2px;
    padding-right: 0px;
    background-color: #fbfbfb;
    border-radius: 8px;
    border: 2px solid #cfcfcf;
    color: var(--btext);
    max-width: 412px;
    position: relative;
}

.translated_banner>i {
    float: left;
    display: block;
    color: var(--langgreen);
    font-size: 24px;
    padding-left: 2px;
}

.translated_banner span {
    display: block;
    float: left;
    width: calc(100% - 33px);
    padding-left: 5px;
    font-size: 18px;
}

.translated_banner>span>m {
    float: left;
}

.translated_banner>span>a {
    color: var(--accenttext);
    font-weight: 500;
    cursor: pointer;
    /* text-decoration: underline; */
    float: right;
    margin-right: 5px;
    margin-left: 6px;
}

.lang_banner_disabled>.translated_banner>span>a {
    filter: grayscale(1);
    pointer-events: none;
}

.lang_banner_loading .translated_banner>span>a {
    visibility: hidden;
}

.translated_banner .spinner {
    display: none;
    height: 22px;
    width: 22px;
    padding: 1px;
    right: 2.5px;
    position: absolute;
    bottom: 2px;
}

.lang_banner_loading .translated_banner .spinner {
    display: block;
}

.lang_banner {
    height: 0px;
    opacity: 0;
    transition: 0.15s height, 0.15s opacity;
    overflow: hidden;
    pointer-events: none;
}

.lang_banner_visible {
    opacity: 1;
    height: unset;
    pointer-events: auto;
}

.equal_grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
}

#cal_month_inner .equal_grid,
#calendar_container .equal_grid,
.calpicker_bottom .equal_grid:not(:last-child) {
    border-bottom: 1px solid var(--divline);
}

.calpicker_bottom {
    display: grid;
    grid-auto-flow: row;
    grid-auto-rows: minmax(0, 1fr);
    height: calc(100% - 48px);
}

.segmented_control {
    overflow: hidden;
    width: calc(100% + 3px);
}

#picker_segmented_control {
    padding-bottom: 9px;
}

.segmented_control .button {
    width: calc(33% - 1px - 13px);
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

.segmented_control .button:nth-child(1) {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.segmented_control .button:nth-child(2) {
    border-radius: 0px;
    border-left: 0px;
    border-right: 0px;
    width: calc(33% - 1px - 8px);
}

.segmented_control .button:nth-child(3) {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

#unified_picker_num_days_selected {
    float: right;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    color: var(--ctext);
    pointer-events: none;
}

#unified_picker_num_days_selected.unified_picker_selected_count_action {
    cursor: pointer;
    transition: color 0.15s;
    pointer-events: unset;
}

#unified_picker_num_days_selected.unified_picker_selected_count_action:hover,
#unified_picker_num_days_selected.unified_picker_selected_count_action:active {
    color: var(--btext);
}

#unified_picker_clear {
    float: right;
    font-size: 20px;
    line-height: 30px;
    color: var(--accenttext);
    cursor: pointer;
    padding: 0px 6px;
    border-radius: 9px;
    margin-right: -5px;
    margin-left: 3px;
    transition: color 0.15s, background 0.15s;
    -webkit-user-select: none;
    user-select: none;
}

body:not(.is_mobile) #unified_picker_clear:hover {
    background-color: var(--accenthover);
}

body:not(.is_mobile) #unified_picker_clear:active,
#unified_picker_clear:active {
    background-color: var(--accentactive);
}

.suffix_input_container {
    position: relative;
    overflow: hidden;
}

.fancy_input_scroll {
    font-size: 20px;
    border: 2px solid var(--inputoutline);
    font-family: 'roboto', sans-serif;
    border-radius: 8px;
    padding: 7px 0px;
    background-color: var(--main);
    width: calc(420px - 4px);
    outline: none;
    transition: 0.1s border;
    height: 24px;
    overflow: hidden;
    overflow-x: scroll;
    position: relative;
    max-width: calc(100% - 4px);
    scrollbar-width: none;
}

.fancy_input_scroll::-webkit-scrollbar {
    display: none;
}

.suffix_input_input {
    white-space: nowrap;
    padding: 7px 8px;
    padding-right: 95px;
    margin-top: -7px;
    margin-bottom: -7px;
    border: none;
    outline: none;
    display: inline-block;
    min-width: calc(100% - 95px - 8px);
    cursor: text;
    -webkit-user-select: text;
    user-select: text;
    scrollbar-width: none;
}

#bell_daytype.suffix_input_input {
    padding-right: 45px;
    min-width: calc(100% - 45px - 8px);
}

.sufix_input_suffix {
    font-size: 20px;
    color: var(--btext);
    position: absolute;
    top: 7px;
    width: 82px;
    margin-left: -2px;
    pointer-events: none;
}

#bell_daytype_suffix.sufix_input_suffix {
    width: 32px;
}

.suffix_input_measure {
    font-size: 20px;
    position: absolute;
    white-space: pre;
}

.bell_label {
    padding-left: 10px;
    position: relative;
    height: 48px;
}

.bell_label .button {
    margin: 5px 0px;
    margin-right: 1px;
    float: right;
}

.bell_label .actions_overflow {
    float: right;
    margin: 0;
    display: block;
}

.bell_label>div:first-child {
    font-size: 22px;
    font-weight: 500;
    line-height: 48px;
    height: 48px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: calc(100% - 48px - 147px - 10px);
    float: left;
}

.bell_label>div:first-child>span:nth-child(1) {
    line-height: 26px;
    font-size: 22px;
    float: left;
    display: inline-block;
    width: 100%;
    padding-top: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bell_label>div:first-child>span:nth-child(2) {
    font-weight: 400;
    font-size: 18px;
    float: left;
    line-height: 20px;
    display: inline-block;
    width: 100%;
    color: var(--btext);
    padding-top: 1px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bell_subschedule {
    outline: 1px solid var(--divline2);
    border-radius: 10px;
    max-width: 478px;
    position: relative;
    margin-bottom: 12px;
}

.bell_rotations_enabled .bell_subschedule {
    max-width: 621px;
}

.bell_subschedule_inner {
    padding-top: 10px;
    overflow-x: auto;
    padding-left: 10px;
    padding-bottom: 3px;
}

.bell_subschedule_outer {
    overflow: hidden;
    position: relative;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.bell_subschedule_left_shadow {
    position: absolute;
    width: 10px;
    top: 6px;
    left: -10px;
    bottom: 0;
    transition: box-shadow 0.2s;
}

.bell_subschedule_right_shadow {
    position: absolute;
    width: 10px;
    top: 6px;
    right: -10px;
    bottom: 0;
    transition: box-shadow 0.2s;
}

.bell_subschedule_shadow {
    box-shadow: 0 0px 8px var(--shadow);
}

.edit_bell_top {
    width: 468px;
}

.bell_maker {
    width: 468px;
}

.bell_rotations_enabled .edit_bell_top {
    width: 611px;
}

.bell_rotations_enabled .bell_maker {
    width: 611px;
}

.add_row {
    overflow: hidden;
}

.bell_period_b {
    display: none;
}

.bell_rotations_enabled .bell_period_b {
    display: block;
}

.bell_labels_norotations {
    display: block;
}

.bell_labels_rotations {
    display: none;
}

.bell_rotations_enabled .bell_labels_norotations {
    display: none;
}

.bell_rotations_enabled .bell_labels_rotations {
    display: block;
}

.add_row {
    margin-top: 0px;
    padding-bottom: 8px;
    height: 34px;
}

.add_row .button {
    border-width: 0px;
    left: 10px;
    position: absolute;
}

.add_row .button i {
    padding-right: 2.5px;
}

.bell_subschedules_disabled .bell_label {
    display: none;
}

.bell_subschedules_disabled .bell_subschedule_inner {
    padding-top: 6px;
}

.bell_subschedules_disabled #bell_schedule_title_multiple {
    display: none;
}

#bell_schedule_title_single {
    display: none;
}

.bell_subschedules_disabled #bell_schedule_title_single {
    display: block;
}

.bell_subschedules_disabled #add_another_bell_schedule_button_row {
    display: none;
}

.bell_subschedules_disabled .bell_subschedule_right_shadow,
.bell_subschedules_disabled .bell_subschedule_left_shadow {
    top: 0px;
}

.bell_subschedules_disabled .bell_subschedule_outer {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.fancy_input_scroll.disabled {
    background-color: var(--inputdisabled);
    pointer-events: none;
    border-style: dotted !important;
}

#dayinforotation>.menu_dropdown_selected>span {
    width: 29px;
    display: inline-block;
}

.bell_list_item_name>span:nth-child(1) {
    max-width: calc(100% - 58px - 7px);
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bell_list_item_name>span:nth-child(2) {
    font-size: 13px;
    vertical-align: top;
    padding: 1px 3px;
    background-color: gray;
    color: white;
    border-radius: 5px;
    margin-left: 7px;
    line-height: normal;
    display: inline-block;
    margin-top: 11px;
}

.target_selection.bell_list_item_name>span:nth-child(2) {
    display: inline-block;
    margin-top: 3px;
}

#dayname_warning.dayname_warning_forcehide {
    display: none !important;
}

.image_carousel_reorderable {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 250px;
    width: 100%;
    white-space: nowrap;
    border-radius: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.image_carousel_reorderable.carousel_dragging {
    cursor: grabbing;
}

.image_carousel_reorderable>div:first-child {
    position: relative;
    display: inline-block;
}

.image_carousel_reorderable>div:first-child>div {
    background-color: var(--search);
    display: inline-block;
    margin-right: 10px;
    border-radius: 10px;
    overflow: hidden;
    max-width: 420px;
    min-width: 100px;
    position: relative;
    border: 1px solid var(--divline);
    height: calc(100% - 2px);
}

@media (max-width: 1200px) {
    .image_carousel_reorderable {
        height: 200px;
    }

    .image_carousel_reorderable>div:first-child>div {
        max-width: 340px;
        min-width: 80px;
    }
}

@media (max-width: 680px) {
    .image_carousel_reorderable {
        height: 150px;
    }

    .image_carousel_reorderable>div:first-child>div {
        max-width: 240px;
        min-width: 60px;
    }
}

@media (max-width: 450px) {
    .image_carousel_reorderable {
        height: 120px;
    }

    .image_carousel_reorderable>div:first-child>div {
        max-width: 200px;
        min-width: 60px;
    }

    .image_carousel_reorderable>div:first-child>div>div {
        margin-top: 6px !important;
        margin-right: 6px !important;
    }
}

.image_carousel_reorderable.carousel_dragging>div>div {
    transition: 0.2s transform, 0.2s box-shadow;
}

.image_carousel_reorderable.carousel_removing>div>div {
    transition: 0.2s transform, 0.15s opacity, 0.25s width, 0.25s margin-right;
}

.image_carousel_reorderable>div:first-child>div:last-child {
    margin-right: 0px;
}

.image_carousel_reorderable>div:first-child>div.carousel_in_drag {
    box-shadow: 0 1px 8px 0px rgb(0 0 0 / 40%);
    /* background-color: var(--main); */
    position: absolute;
    z-index: 1;
}

.image_carousel_reorderable>div:first-child>div.carousel_in_drag_ending {
    box-shadow: none;
    /* background-color: var(--main); */
}

.image_carousel_reorderable>div:first-child>div.carousel_removing {
    transform: scale(0.5);
    opacity: 0;
}

.image_carousel_reorderable>div:first-child>div.carousel_removing2 {
    margin-right: 0px;
    min-width: 0px;
    border-width: 0px;
}

.carousel_placeholder {
    margin: 1px !important;
    margin-right: 11px !important;
    border: unset !important;
    background: unset !important;
}

.carousel_placeholder:last-child {
    margin-right: 1px !important;
}

.image_carousel_reorderable>div:first-child>div>img {
    height: 100%;
    width: 100%;
    transition: opacity 0.2s;
    object-fit: contain;
    cursor: grab;
    user-select: none;
}

.image_carousel_reorderable>div:first-child>div>div {
    border: 2px solid rgb(255 255 255 / 50%);
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 8px;
    margin-right: 8px;
    padding: 4px;
    background: rgb(0 0 0 / 70%);
    border-radius: 50px;
    cursor: pointer;
}

.image_carousel_reorderable>div:first-child>div>div>i {
    color: white;
    font-size: 28px;
}

.image_carousel_left_shadow {
    position: absolute;
    width: 10px;
    top: 6px;
    left: -10px;
    bottom: 6px;
    transition: box-shadow 0.2s;
    z-index: 2;
}

.image_carousel_right_shadow {
    position: absolute;
    width: 10px;
    top: 6px;
    right: -10px;
    bottom: 6px;
    transition: box-shadow 0.2s;
    z-index: 2;
}

.image_carousel_shadow {
    box-shadow: 0 0px 10px var(--shadow);
}

.image_carousel_reorderable_outer {
    position: relative;
    overflow: hidden;
}

#post_edit_images,
#post_edit_video,
#post_image,
#post_video {
    padding-bottom: 14px;
}

.checkbox_option {
    overflow: hidden;
    cursor: pointer;
    margin-left: -9px;
}

.checkbox_option[inert] {
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(1);
}

body:not(.is_mobile) .checkbox_option:not(.checked):hover .checkbox,
body:not(.is_mobile) .checkbox_option:not(.checked):hover .checkbox {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) .checkbox_option:not(.checked):active .checkbox,
.checkbox_option:not(.checked):active .checkbox,
body:not(.is_mobile) .checkbox_option:not(.checked):active .checkbox,
.checkbox_option:not(.checked):active .checkbox {
    background-color: var(--iconactivebk);
}

body:not(.is_mobile) .checkbox_option.checked:hover .checkbox,
body:not(.is_mobile) .checkbox_option.checked:hover .checkbox {
    background-color: var(--accenthover);
}

body:not(.is_mobile) .checkbox_option.checked:active .checkbox,
.checkbox_option.checked:active .checkbox,
body:not(.is_mobile) .checkbox_option.checked:active .checkbox,
.checkbox_option.checked:active .checkbox {
    background-color: var(--accentactive);
}

.checkbox_option .checkbox {
    width: 30px;
    height: 30px;
    padding: 6px;
    float: left;
    transition: 0.15s background-color;
    border-radius: 60px;
    cursor: pointer;
}

.checkbox_option .label {
    float: left;
    font-size: 20px;
    padding-left: 5px;
    width: calc(100% - 42px - 5px);
    padding-top: 9px;
    padding-bottom: 2px;
    line-height: 24px;
}

.checkbox_option .label .sublabel {
    font-size: 18px;
    color: var(--btext);
    display: block;
    padding-top: 3px;
    padding-bottom: 3px;
}

.checkbox_option .label .sublabel.inset {
    margin-left: 39px;
}

.checkbox_option .label .label_icon {
    vertical-align: bottom;
    color: var(--icons);
    margin-right: 13px;
    font-size: 26px;
    margin-top: -1px;
    margin-bottom: -1px;
}

.checkbox_option .checkbox i {
    font-size: 30px;
    color: var(--icons);
    transition: 0.08s color;
}

.checkbox_option.checked .checkbox i {
    color: var(--accent);
}

.perms_admin_enabled .perms_admin_obsoletes {
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(1);
}

.perms_admin_enabled .perms_admin_obsoletes * {
    pointer-events: none !important;
}

.perms_admin_enabled .perms_admin_obsoletes .perms_admin_obsoletes {
    opacity: 0.9;
}

.sub_options {
    margin-left: 39px;
}

.sub_options[inert], .checkbox_option[inert] + .sub_options {
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(1);
}

.sub_options[inert] .sub_options[inert], .checkbox_option[inert] + .sub_options .sub_options[inert], .perms_admin_enabled .perms_admin_obsoletes .sub_options[inert] {
    opacity: 0.8;
}

.sub_options > .indented_group {
    /* padding-left: 8px; */
    padding-top: 4px;
    padding-bottom: 8px;
}

.sub_options > .indented_group > .input_label {
    font-weight: 400;
    padding-bottom: 8px;
}

#twofa_recaptcha {
    min-height: 78px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#twofa_recaptcha_container,
#login_2fa_captcha_container {
    min-height: 78px;
    padding-bottom: 20px;
    padding-top: 4px;
    position: relative;
}

#twofa_recaptcha_storage {
    display: none;
}

.twofa_spinner {
    height: 60px;
    width: 60px;
    margin: 0 auto;
    margin-top: 8px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#login_2fa_verification_methods {
    border-top: 1px solid var(--divline2);
}

#tv_layout_options {
    overflow: hidden;
    margin-bottom: -15px;
}

#tv_layout_options > div {
    width: 189px;
    float: left;
    cursor: pointer;
    margin-right: 15px;
    margin-bottom: 15px;
    transition: background 0.1s;
    border-radius: 5px;
}

body:not(.is_mobile) #tv_layout_options > div:hover,
body:not(.is_mobile) #tv_layout_options > div:focus {
    background-color: var(--iconhoverbk);
}

body:not(.is_mobile) #tv_layout_options > div:active,
#tv_layout_options > div:active {
    background-color: var(--iconactivebk);
}

#tv_layout_options > div.selected,
body:not(.is_mobile) #tv_layout_options > div.selected:hover {
    background-color: #ceffee;
    color: #075f41;
}

body:not(.is_mobile) #tv_layout_options > div.selected:active,
#tv_layout_options > div.selected:active {
    background-color: #b5ffe6;
}

#tv_layout_options > div.selected > div:nth-child(1) {
    border-color: var(--accent);
}

#tv_layout_options > div > div:nth-child(1) {
    width: 185px;
    height: 121;
    border: 2px solid var(--inputoutline);
    border-radius: 4px;
    overflow: hidden;
    background: #e8e8e8;
    transition: 0.1s border;
}

#tv_layout_options > div > div:nth-child(1) > img {
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.2s;
}

#tv_layout_options > div > div:nth-child(2) {
    font-size: 20px;
    /* font-weight: 500; */
    text-align: center;
    padding-top: 8px;
    padding-bottom: 9px;
}

#staff_photo_box {
    width: 140px;
    height: 140px;
    border-radius: 140px;
    overflow: hidden;
    margin-bottom: 12px;
    background: #cecece;
}

#staff_photo_box > img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.2s;
}

.formatted_section {
    font-size: 20px;
    max-width: 800px;
}

.formatted_section {
    padding-bottom: 16px;
}

.formatted_section ol {
    margin-block-end: 0px;
    margin-block-start: 0px;
    padding-inline-start: 30px;
}

.formatted_section li {
    margin-block-end: 8px;
    margin-block-start: 8px;
}

.formatted_section li:first-child {
    margin-block-start: 0px;
}

.formatted_section li:last-child {
    margin-block-end: 0px;
}

.formatted_section b {
    font-weight: 500;
}

.formatted_section > .material-icons, .formatted_section *:not(.button) > .material-icons, .formatted_section > .riderappicons, .formatted_section *:not(.button) > .riderappicons {
    font-size: 23px;
    vertical-align: bottom;
    color: var(--icons);
}

.formatted_section svg {
    vertical-align: bottom;
    padding-left: 3px;
    padding-right: 3px;
}

.ai_shimmer {
    background: linear-gradient(-45deg, #fef5ff 25%, #e8d0ec 50%, #fef5ff 75%);
    background-size: 280%;
    background-position-x: 115%;
    animation: ai_shimmer_anim 0.75s infinite linear;
}

.ai_shimmer.ai_shimmer_big {
    background-size: 320%;
    background-position-x: 115%;
}

@keyframes ai_shimmer_anim {to {background-position-x: -35%}}

.calendar_source_details {
    border-radius: 10px;
    max-width: 400px;
    background-color: #f3f3f3;
}

.calendar_source_details > div:nth-child(1) {
    background-color: #e5e5e5;
    border-radius: 10px;
    overflow: hidden;
    padding: 5px;
}

.calendar_source_details > div:nth-child(1) > div:nth-child(1) {
    float: left;
    width: 60px;
    height: 60px;
}

.calendar_source_details > div:nth-child(1) > div:nth-child(1) > div { 
    width: 50px;
    height: 50px;
    padding: 5px;
}

.calendar_source_details > div:nth-child(1) > div:nth-child(1) > div > img { 
    width: 50px;
    height: 50px;
}

.calendar_source_details > div:nth-child(1) > div:nth-child(1) > div > i { 
    font-size: 50px;
    color: var(--icons);
}

.calendar_source_details > div:nth-child(1) > div:nth-child(2) {
    float: left;
    width: calc(100% - 67px);
    height: 60px;
    padding-left: 7px;
}

.calendar_source_details > div:nth-child(1) > div:nth-child(2) > div {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.calendar_source_details > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) {
    font-size: 20px;
    color: var(--atext);
    padding-top: 5px;
    padding-bottom: 3px;
}

.calendar_source_details > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) {
    font-size: 19px;
    color: var(--btext);
}

.calendar_source_details > div:nth-child(2) {
    padding: 4px 0px;
}

.calendar_source_details > div:nth-child(2) > div {
    width: calc(100% - 16px);
    padding: 6px 8px;
    overflow: hidden;
}

.calendar_source_details > div:nth-child(2) > div > div:nth-child(1) {
    float: left;
    width: 25px;
    height: 25px;
}

.calendar_source_details > div:nth-child(2) > div > div:nth-child(1) > i {
    font-size: 25px;
    color: var(--icons);
}

.calendar_source_details > div:nth-child(2) > div > div:nth-child(2) {
    float: left;
    width: calc(100% - 32px);
    /* height: 25px; */
    font-size: 19px;
    /* line-height: 25px; */
    padding-top: 1px;
    padding-left: 7px;
    color: var(--atext);
}

.synced_calendar_item .item_thumb {
    background: none;
}

.synced_calendar_item .item_thumb img {
    opacity: 1;
    transition: none;
    padding: 7%;
    width: 86%;
    height: 86%;
}

.synced_calendar_item .item_thumb i {
    font-size: 64px;
    /* padding: 4px; */
    color: var(--icons);
}

#synced_calendar_preview {
    max-width: 600px;
}

#synced_calendar_preview .calendar_item_icon {
    border-radius: 10px;
}

#synced_calendar_preview .item_desc {
    width: 80px;
    border-radius: 5px;
    padding-top: 0px;
    margin-top: 3px;
}

.synced_calendar_instructions {
    user-select: text;
}

.synced_calendar_instructions .material-icons,
.synced_calendar_instructions .riderappicons {
    user-select: none;
}



/* =============================== */
/*            BEGIN TRIX           */
/* =============================== */

trix-toolbar .trix-button--dialog {
    font-size: inherit;
    padding: 0.5em;
    border-bottom: none;
}

/*trix-toolbar .trix-dialog--link {
  max-width: 600px; }*/
trix-toolbar .trix-dialog__link-fields {
    display: flex;
    align-items: baseline;
}

trix-toolbar .trix-dialog__link-fields .trix-input {
    flex: 1;
}

trix-toolbar .trix-dialog__link-fields .trix-button-group {
    flex: 0 0 content;
    margin: 0;
}

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection,
trix-editor [data-trix-mutable] ::-moz-selection {
    background: none;
}

trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection,
trix-editor [data-trix-mutable] ::selection {
    background: none;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
    background: highlight;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
    background: highlight;
}

trix-editor [data-trix-mutable].attachment.attachment--file {
    box-shadow: 0 0 0 2px highlight;
    border-color: transparent;
}

trix-editor [data-trix-mutable].attachment img {
    box-shadow: 0 0 0 2px highlight;
}

trix-editor .attachment {
    position: relative;
}

trix-editor .attachment:hover {
    cursor: default;
}

trix-editor .attachment--preview .attachment__caption:hover {
    cursor: text;
}

trix-editor .attachment__progress {
    position: absolute;
    z-index: 1;
    height: 20px;
    top: calc(50% - 10px);
    left: 5%;
    width: 90%;
    opacity: 0.9;
    transition: opacity 200ms ease-in;
}

trix-editor .attachment__progress[value="100"] {
    opacity: 0;
}

trix-editor .attachment__caption-editor {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    color: inherit;
    text-align: center;
    vertical-align: top;
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

trix-editor .attachment__toolbar {
    position: absolute;
    z-index: 1;
    top: -0.9em;
    left: 0;
    width: 100%;
    text-align: center;
}

trix-editor .trix-button-group {
    display: inline-flex;
}

trix-editor .trix-button {
    position: relative;
    float: left;
    color: #666;
    white-space: nowrap;
    font-size: 80%;
    padding: 0 0.8em;
    margin: 0;
    outline: none;
    border: none;
    border-radius: 0;
    background: transparent;
}

trix-editor .trix-button:not(:first-child) {
    border-left: 1px solid #ccc;
}

trix-editor .trix-button.trix-active {
    background: #cbeefa;
}

trix-editor .trix-button:not(:disabled) {
    cursor: pointer;
}

trix-editor .trix-button--remove {
    text-indent: -9999px;
    display: inline-block;
    padding: 0;
    outline: none;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8em;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid highlight;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
}

trix-editor .trix-button--remove::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    content: "";
    background-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.4L17.6%205%2012%2010.6%206.4%205%205%206.4l5.6%205.6L5%2017.6%206.4%2019l5.6-5.6%205.6%205.6%201.4-1.4-5.6-5.6z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%;
}

trix-editor .trix-button--remove:hover {
    border-color: #333;
}

trix-editor .trix-button--remove:hover::before {
    opacity: 1;
}

trix-editor .attachment__metadata-container {
    position: relative;
}

trix-editor .attachment__metadata {
    position: absolute;
    left: 50%;
    top: 2em;
    transform: translate(-50%, 0);
    max-width: 90%;
    padding: 0.1em 0.6em;
    font-size: 0.8em;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 3px;
}

trix-editor .attachment__metadata .attachment__name {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

trix-editor .attachment__metadata .attachment__size {
    margin-left: 0.2em;
    white-space: nowrap;
}

.trix-content {
    line-height: 1.5;
}

.trix-content * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.trix-content h1 {
    font-size: 1.2em;
    line-height: 1.2;
}

.trix-content blockquote {
    border: 0 solid #ccc;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em;
}

.trix-content [dir=rtl] blockquote,
.trix-content blockquote[dir=rtl] {
    border-width: 0;
    border-right-width: 0.3em;
    margin-right: 0.3em;
    padding-right: 0.6em;
}

.trix-content li {
    margin-left: 1em;
}

.trix-content [dir=rtl] li {
    margin-right: 1em;
}

.trix-content pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 0.9em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto;
}

.trix-content img {
    max-width: 100%;
    height: auto;
}

.trix-content .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%;
}

.trix-content .attachment a {
    color: inherit;
    text-decoration: none;
}

.trix-content .attachment a:hover,
.trix-content .attachment a:visited:hover {
    color: inherit;
}

.trix-content .attachment__caption {
    text-align: center;
}

.trix-content .attachment__caption .attachment__name+.attachment__size::before {
    content: ' · ';
}

.trix-content .attachment--preview {
    width: 100%;
    text-align: center;
}

.trix-content .attachment--preview .attachment__caption {
    color: #666;
    font-size: 0.9em;
    line-height: 1.2;
}

.trix-content .attachment--file {
    color: #333;
    line-height: 1;
    margin: 0 2px 2px 2px;
    padding: 0.4em 1em;
    border: 1px solid #bbb;
    border-radius: 5px;
}

.trix-content .attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

.trix-content .attachment-gallery .attachment {
    flex: 1 0 33%;
    padding: 0 0.5em;
    max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 .attachment,
.trix-content .attachment-gallery.attachment-gallery--4 .attachment {
    flex-basis: 50%;
    max-width: 50%;
}

trix-editor:empty:not(:focus)::before {
    color: var(--placeholder);
}

/* =============================== */
/*             END TRIX            */
/* =============================== */