[class^="monthBlock"] {
    font-size: x-small;
    font-weight: normal;
    border: 1px solid #808080;
    text-align: center;
}

[class^="monthBlock"][class$="Selected"] {
    font-weight: bolder;
    border: 2px solid black;
}

[class^="monthBlockLeft"] {
    border-radius: 5px 0 0 5px;
}

[class^="monthBlockRight"] {
    border-radius: 0 5px 5px 0;
}

[class^="monthBlock"]:not([class$="Disabled"]):hover {
    font-weight: bolder;
    border: 3px solid blue;
    cursor: hand;
}

.trackPeriodVehicleHeader {
    background-size: 40px 40px;
    background-repeat: no-repeat;
    background-position: right center;
    padding-left: 5px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    align-items: center;
    border: 1px solid #808080;
    border-radius: 5px;
}

.trackPeriodVehicleHeader:hover {
    background-color: aliceblue;
    border: 1px solid black;
}

[class^=actionImg] {
    border: 1px solid transparent;
}

[class^=actionImg]:hover {
    background-color: #E6F1F7;
    border: 1px solid #6DA2BD;
    color: #333333;
}

.colorCircle {
    width: 12px;
    height: 12px;
    border: 1px solid black;
    border-radius: 6px;
    float: left;
}

.colorCircle.inline {
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    float: none;
    margin-right: 4px;
}

.colorCircle.enabled {
    cursor: hand;
}

.colorCircle.enabled:hover {
    opacity: 0.7;
    border: 1px solid lightblue;
}

.textColorCircle,
.notificationBadge {
    height: 12px;
    min-width: 12px;
    font-size: x-small;
    background: var(--notification-channel-color);
    border: 1px solid var(--notification-channel-color);
    border-radius: 50%;
    color: white;
}

.largeText {
    font-size: x-large;
}

.textColorCircle {
    display: inline-block;
    line-height: 12px;
}

.iconWithBadge {
    width: 20px;
    height: 20px;
    position: relative;
}

.notificationBadge {
    position: absolute;
    top: 0;
    right: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.smallNotice {
    color: gray;
}

.inactive {
    color: #808080;
    font-style: italic;
}

.cellSelected .smallNotice, .cellSelectedDark .smallNotice, .cellSelectedOver .smallNotice, .cellSelectedOverDark .smallNotice {
    color: white;
}

.clickableText {
    font-size: 11px;
}

.clickableText:hover {
    cursor: hand;
    color: blue;
    border: 1px solid lightblue;
}

.highlightError {
    background-color: #FFCCCC;
}

.highlightErrorDark {
    background-color: #FFBBBB;
}

.highlightErrorSelectedDark, .highlightErrorSelected {
    background-color: #FFBBBB;
}

.highlightErrorOver, .highlightErrorOverDark, .highlightErrorSelectedOver, .highlightErrorSelectedOverDark {
    background-color: #FFAAAA;
}

.highlightWarning {
    background-color: #FFFFCC;
}

.highlightWarningDark {
    background-color: #FFFF99;
}

.highlightWarningSelectedDark, .highlightWarningSelected {
    background-color: #FFFF99;
}

.highlightWarningOver, .highlightWarningOverDark, .highlightWarningSelectedOver, .highlightWarningSelectedOverDark {
    background-color: #FFFF66;
}

.highlightHighWarning {
    background-color: #FFCC99;
}

.highlightHighWarningDark {
    background-color: #FFBF80;
}

.highlightHighWarningSelectedDark, .highlightHighWarningSelected {
    background-color: #FFBF80;
}

.highlightHighWarningOver, .highlightHighWarningOverDark, .highlightHighWarningSelectedOver, .highlightHighWarningSelectedOverDark {
    background-color: #FFA64D;
}

.highlightCorrect {
    background-color: #CCFFCC;
}

.highlightCorrectDark {
    background-color: #b3fd91;
}

.highlightCorrectSelectedDark, .highlightCorrectSelected {
    background-color: #b3fd91;
}

.highlightCorrectOver, .highlightCorrectOverDark, .highlightCorrectSelectedOver, .highlightCorrectSelectedOverDark {
    background-color: #AAFFAA;
}

.highlightPreferred, .highlightPreferredSelected, .highlightPreferredDark, .highlightPreferredSelectedDark {
    background-color: #FFF8AC;
}

.highlightPreferredOver, .highlightPreferredSelectedOver, .highlightPreferredOverDark, .highlightPreferredSelectedOverDark {
    background-color: #E8E29C;
}

.topLabel, .topLink {
    color: grey;
    font-family: Arial, Verdana, sans-serif;
    font-size: 11px;
}

.overriddenSetting {
    font-style: italic;
    font-weight: bolder;
}

.GWTUpld .filename, .GWTUpld .status {
    font-size: 10px !important;
}

.GWTUpld .filename {
    color: darkblue;
}

.attachmentPanel {
    background-repeat: no-repeat;
    background-position: right bottom;
    background-image: url('/images/attachment-blurred.png');
    background-size: 125px 125px;
    overflow: auto;
}

.upld-drop-zone {
    width: 200px;
    height: 50px;
    display: flex;
}

.mouseTooltip {
    text-align: center;
    border-radius: 6px;
    font-family: Arial, Verdana, sans-serif;
    font-size: 9px;
    font-weight: bold;
    margin: 3px 3px 3px 3px;
    opacity: 0.8;
}

.toast-title, .toast-message {
    font-family: Arial, Verdana, sans-serif;
}

.toast-title {
    font-size: 13px;
}

.toast-message {
    font-size: 12px;
}

/*
 * Fixes a missing height style element on the grandparent of the map on the tab 'Map' on IE.
 * The broken element can not be reached from code otherwise.
 * See MapUtils#wrapAndFixHeight(MapWidget) for the other side of this fix.
 */
.mapWrapper > div:first-child {
    height: 100%;
}

.chat-incoming,
.chat-outgoing-from-me,
.chat-outgoing {
    padding: 0;
}

.chat-incoming {
    background: #D9F4FF;
    border-radius: 0 10px 10px 10px;
}

.chat-outgoing-from-me {
    background: #CBFFD9;
    border-radius: 10px 0 10px 10px;
}

.chat-outgoing {
    background: #FFD493;
    border-radius: 10px 0 10px 10px;
}

.conversation-overview-card {
    border-bottom: 1px solid #DDDDDD;
    padding: 5px;
}

.chat-header,
.chat-header-right {
    font-size: 7pt;
    font-weight: bold;
}

.chat-header-right {
    font-style: italic;
}

.chat-marker-label {
    border-radius: 12px;
    font-size: 9pt;
    color: white;
}

.send-new-message, .send-new-messageFocused, .send-new-messageFocusedOver, .send-new-messageDisabled, .send-new-messageOver {
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 10px;
    background-color: #f8f8f8;
    font-family: inherit;
    margin-left: 15px !important;
    padding: 8px;
    resize: none;
}

.rounded-button, .rounded-buttonFocused, .rounded-buttonFocusedOver, .rounded-buttonDisabled, .rounded-buttonOver {
    border-radius: 50%;
    background-color: #eee;
    padding-left: 7px !important;
}

.rounded-buttonFocusedOver, .rounded-buttonOver {
    background-color: #ddd;
}

.rounded-buttonSelected, .rounded-buttonSelectedOver {
    border-radius: 50%;
    background-color: #FFA500;
}

.rounded-buttonDisabled {
    background-color: #ccc;
}

/* google maps buttons iets kleiner */
.gm-style .gmnoprint {
    transform: scale(0.8); /* Pas de schaal aan */
    transform-origin: top left; /* Zorg dat het schalen netjes blijft */
}

*:focus {
    outline: none;
}

@keyframes animate-blink {
    0% {
        background-color: #FFFFFF;
    }
    20% {
        background-color: rgb(195, 53, 31);
    }
    100% {
        background-color: #FFFFFF;
    }
}

.show_loading_text {
    position: absolute;
    top: 50%;
    left: 50%;
}


/* for date range picker */
.rdrStaticRangeLabel {
    white-space: nowrap;
}

/* for the AssetListItems */
.disabledAvatar, .disabledAvatarOver, .enabledAvatar, .enabledAvatarOver {
    border-radius: 50%;
    margin: 15px 0 15px 0;
    border: 1px solid grey;
}

/* for the AssetListItems */
.disabledAvatar {
    filter: grayscale(100%) opacity(50%);
    border: 1px dashed grey;
}
.enabledAvatarOver {
    border: 1px solid transparent;
}

.disabledAvatarOver {
    border: 1px dashed grey;
}

.titleItem {
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 700;
}

/* for the map */
.mappedAssetLabel, .mappedAssetLabelNoLine {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    padding: 1px 6px;
    border-radius: 10px;
}

/* skeleton effect */
.skeleton {
    background: linear-gradient(90deg, #E0E0E0 25%, #F0F0F0 50%, #E0E0E0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite linear;
    border-radius: 8px;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* scroll-effect: hiden balk na scrollen*/
.smartScroll {
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.smartScroll::-webkit-scrollbar {
    width: 8px;
}

.smartScroll::-webkit-scrollbar-thumb {
    background-color: transparent;
    transition: background-color 0.3s;
}

.smartScroll:hover::-webkit-scrollbar-thumb,
.smartScroll:active::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
}

/* asset list */
.assetListCard {
    background: #F1F1F1;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* for the blurring screensaver */
.main_blur {
    filter: blur(10px) grayscale(100%);
    -webkit-filter: blur(10px) grayscale(100%);
    animation-name: fade-blur;
    animation-duration: 4s;
}

@keyframes fade-blur {
    0% {
        filter: blur(0px) grayscale(0%);
        -webkit-filter: blur(0px) grayscale(0%);
        filter:
    }
    100% {
        filter: blur(10px) grayscale(100%);
        -webkit-filter: blur(10px) grayscale(100%);
    }
}


.rotated-text {
    transform: rotate(-60deg);
    transform-origin: left bottom;
    position: absolute;
    left: 15px;
    bottom: 5px;
    white-space: nowrap;
    overflow: visible;
}

.timeline-time {
    font-weight: bold;
}

.timeline-duration {
    color: gray;
}