/* Anything smaller than 1024px */
.SquareContainer {
    background-color: #fff;
    height: 240px;
    width: 290px;
    margin: 0 15px 15px 15px;
    padding: 15px;
    position: relative;    
}


.right-layout-box {
    position: absolute;
    right: 0px;
    left: 0px;
    top: 50px;
    bottom: 0px;
    background-color: white;
}

.left-layout-box {
    display: none;
}


/* Desktop Screen size > 1024px */
@media (min-width: 1025px) {

    .PieChartSize {
        height: 285px;
        width: 400px;
    }

    .SquareContainer {
        background-color: #fff;
        height: 320px;
        width: 400px;
        margin: 0px 0px 10px 15px;
        padding: 15px;
        position: relative;
    }

    .SquareContainer-noColour {
        height: 320px;
        width: 400px;
        margin: 0px 0px 10px 10px;
        padding: 0;
        position: relative;
    }

    .right-layout-box {
        position: absolute;
        right: 15px;
        left: 455px;
        top: 50px;
        bottom: 0px;
        background-color: white;
    }

    .left-layout-box {        
        position: absolute;
        left: 0px;
        top: 50px;
        bottom: 0;
        height: auto;
        width: 455px;
        display: inherit;
    }
}

.dx-theme-generic .dx-content-background.HomePage {
    background-color: #f0f0f0;
}

.appointmentListItem {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

    .appointmentListItem .left {
        display: table-cell;
        vertical-align: middle;
        width: 55px;
        position: relative;
    }

    .appointmentListItem .middle {
        display: table-cell;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 10px;
    }

    .appointmentListItem .right {
        display: table-cell;
        width: 61px;
        vertical-align: middle;
        text-align: right;
        opacity: 0.8;
    }

.appointmentTeamListItem {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

    .appointmentTeamListItem .left {
        display: table-cell;
        vertical-align: middle;
        width: 95px;
        position: relative;
    }

    .appointmentTeamListItem .middle {
        display: table-cell;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 10px;
    }

    .appointmentTeamListItem .right {
        display: table-cell;
        width: 61px;
        vertical-align: middle;
        text-align: right;
        opacity: 0.8;
    }

.appointmentTypeIndicator {
    height: 20px;
    width: 4px;
    display: inline-block;
    vertical-align: top;
}

/* Style to disable all buttons click styles in a toolbar - mainly to show the site */
.toolbar-noButton.dx-toolbar .dx-toolbar-before .dx-toolbar-item .dx-button {
     cursor: default;
}
.toolbar-noButton.dx-toolbar .dx-toolbar-before .dx-toolbar-item .dx-button:hover {
     opacity: 1;
}

.tileNameButton {
    cursor: pointer;
    color: #fff;
    height: 45px;
    text-align: center;
    line-height: 45px;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0,0,0,.28), 0 4px 8px rgba(0,0,0,.28);
}

    .tileNameButton:hover {
        opacity: 0.7;
    }

.tileNameSmall {
    cursor: pointer;
    color: #fff;
    height: 35px;
    width: 35px;
    text-align: center;
    line-height: 35px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}