.office-365-block {
    margin-bottom: 50px;

    .office-365-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .office-365-actions {
        button {
            width: 40px;
            height: 40px;
            margin-left: 20px;
            padding: 0;
            border: none;
            border-left: 1px solid #c5c5c5;
            background: transparent;
            font-size: 24px;
            cursor: pointer;
        }
    }

    .office-365-body {
        box-shadow: $box-shadow;

        a {
            text-decoration: none;
        }

        a:hover .office-365-item {
            background-color: $light-blue;
        }

        .office-365-item {
            display: flex;
            position: relative;
            padding: 14px;
            box-shadow: 0px 1px 0px #E5E5E5;

            .item-date-time {
                position: absolute;
                top: 14px;
                right: 14px;
                font-size: 14px;
                color: rgba(0,0,0,.6);
            }

            .item-data-container {
                min-width: 0;
            }

            .item-data-container > .item-data {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .item-icon-container {
                margin-right: 14px;
            }

            .item-icon {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                color: #fff;
                font-family: "Lato Bold";
                text-align: center;
                line-height: 40px;
                background-color: $user-dark-blue;

                &.pink {
                    background-color: $user-pink;
                }
        
                &.purple {
                    background-color: $user-purple;
                }
        
                &.dark-green {
                    background-color: $user-dark-green;
                }
        
                &.dark-blue {
                    background-color: $user-dark-blue;
                }
        
                &.orange {
                    background-color: $user-orange;
                }
        
                &.light-blue {
                    background-color: $user-light-blue;
                }
        
                &.green {
                    background-color: $user-green;
                }
        
                &.red {
                    background-color: $user-red;
                }
            }

            .date-icon {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                font-family: "Lato Bold";
                text-align: center;
                line-height: 38px;
                border: 1px solid $dark-grey;

                &.today {
                    line-height: 36px;
                    border: 2px solid $orange;
                }
            }

            .date-weekday {
                font-size: 14px;
                text-align: center;
            }

            .item-data-from {
                font-size: 16px;

                &.unread {
                    font-family: "Lato Bold";
                }
            }

            .item-data-subject {
                font-size: 14px;

                &.unread {
                    font-family: "Lato Bold";
                }
            }

            .item-data-content {
                font-size: 14px;
                color: rgba(0,0,0,.6);
            }
        }
    }

    .material-icons {
        vertical-align: middle;
    }

    .material-icons.up-down:before {
        content: 'keyboard_arrow_down';
        font-size: 24px;
    }

    &.expanded {
        .material-icons.up-down:before {
            content: 'keyboard_arrow_up';
        }
    }

    .no-connection {
        margin-right: 10px;
    }
}