/* HISTORY CIRCLES */

.circle-container {
    text-align:center;
}
.circle-container svg.ms-history-circle {
    width: 200px;
}
svg.ms-history-circle {
    width: 100%;
    /*overflow: visible;*/
}
svg.ms-history-circle circle.init-circle-background,
svg.ms-history-circle .init-circle-background circle {
    fill:000;
    fill-opacity: .2;
}
svg.ms-history-circle .node circle {
    fill: #999;
    fill-opacity: .35;
    stroke-opacity: .35;
    stroke-width: 1px;
    stroke: #424242;

    -webkit-transition: fill 0.5s linear;
    -moz-transition: fill 0.5s linear;
    -o-transition: fill 0.5s linear;
    transition: fill 0.5s linear;
}

svg.ms-history-circle .zoomed-out circle { fill-opacity: 0; stroke-opacity:0; }

svg.ms-history-circle .node.selected circle { stroke: rgba(222,54,65, .66); stroke-opacity: 1; }
svg.ms-history-circle .node.light:not(.selected) circle { stroke:#000; }
svg.ms-history-circle .node.dark:not(.selected) circle { stroke:#fff; }

svg.ms-history-circle .node.light circle { fill: #fff; }
svg.ms-history-circle .node.dark circle { fill: #000; }
svg.ms-history-circle .node.leaf circle {
    fill-opacity: .5;
}

svg.ms-history-circle .node text {
    font: 10px sans-serif;
}

.md-avatar svg.ms-history-circle {
    width: 40px;
    height: 40px;
    /*margin-top: 8px;*/
    /*margin-bottom: 8px;*/
    /*margin-right: 16px;*/
    box-sizing: content-box;
}
svg.ms-history-circle *:focus {
    outline: none;
}

/* CONTENT and OVERRIDES */

body {
    background: #ECECEC;
}

md-content.ms-content {
    background-color:#ececf4;
}
md-content.ms-content [ng-click] {
    cursor:pointer;
}
md-content.ms-content > div { /* Separate tests */
    margin-bottom: 30px;
}
.md-button.md-fab.ms-fab-bottom-right {
    position:absolute;
    right: 38px;
    bottom: 38px;
}

md-bottom-sheet .md-inline-list-icon-label {
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: -10px;
    height: 24px;
    vertical-align: middle; }
md-bottom-sheet md-icon {
    height: 48px;
    width: 48px; }

md-select { padding-left:4px; padding-right:4px; } /* because it's not in an md-input-container */

/* HISTORY GRID LIST */

md-grid-list md-grid-tile.ms-history-grid-tile {
    border: 1px solid #d0d0d0;
    background-color: #f9f9f9;
}
md-grid-list md-grid-tile.ms-history-grid-tile md-grid-tile-header {
    border-bottom: 1px solid #d0d0d0;
    background: #fff;
    color: #808080;
}
md-grid-list md-grid-tile.ms-history-grid-tile md-grid-tile-header > figcaption {
    width: 100%;
}
md-grid-list md-grid-tile.ms-history-grid-tile .ms-grid-tile-content {
    padding:48px 4px 0; width:100%;
}
md-grid-list md-grid-tile figcaption h3 {
    font-weight: 700;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
md-grid-list .ms-history-grid-tile > a.overlay {
    position:absolute; width: 100%; height: 100%; top: 0; left: 0;
    z-index: 64; /* bigger than grid-tile-header */
}
md-grid-list .ms-history-grid-tile md-grid-tile-header button {
    float:right; min-width: 24px; tabindex:0;
    z-index: 65; /* bigger than a.overlay, but still less than an md-backdrop which is 69 */
}

/* HISTORY DETAILS */

.ms-history-details .ms-history-details-drilldown-node {
    position: relative;
    padding: 2px;
    background-color: rgba(221, 221, 221, 0);
    -webkit-transition: background-color linear 0.8s;
    transition: background-color linear 0.8s;
}
.ms-history-details .ms-history-details-drilldown-node > md-card {
    min-height: 200px;
}
.ms-history-details .ms-history-details-drilldown-node.expanded {
    background-color: rgba(221, 221, 221, 1);
    /*background-color: rgba(222,54,65,.33);*/
}

/* Animate the actual cards */
.ms-history-details .ms-history-details-drilldown-node.ng-enter,
.ms-history-details .ms-history-details-drilldown-node.ng-leave {
    -webkit-transition: all linear 0.2s 0.2s;
    transition: all linear 0.2s 0.2s;
}
.ms-history-details .ms-history-details-drilldown-node.ng-enter,
.ms-history-details .ms-history-details-drilldown-node.ng-leave.ng-leave-active {
    opacity: 0;
    /*top: -300px;*/
}
.ms-history-details .ms-history-details-drilldown-node.ng-leave,
.ms-history-details .ms-history-details-drilldown-node.ng-enter.ng-enter-active {
    opacity: 1;
    top: 0;
}

/* Animate the content of cards */
.ms-history-details .ms-history-details-drilldown-node .animated.ng-enter {
    -webkit-transition: opacity linear 0.1s 0.1s, max-height linear 0.1s, min-height linear 0.1s;
    transition: opacity linear 0.1s 0.1s, max-height linear 0.1s, min-height linear 0.1s;
}
.ms-history-details .ms-history-details-drilldown-node .animated.ng-leave {
    -webkit-transition: opacity linear 0.1s, max-height linear 0.1s 0.1s, min-height linear 0.1s 0.1s;
    transition: opacity linear 0.1s, max-height linear 0.1s 0.1s, min-height linear 0.1s 0.1s;
}
.ms-history-details .ms-history-details-drilldown-node .animated.ng-enter,
.ms-history-details .ms-history-details-drilldown-node .animated.ng-leave.ng-leave-active {
    max-height: 0;
    min-height: 0;
    opacity: 0;
}
.ms-history-details .ms-history-details-drilldown-node .animated.ng-leave,
.ms-history-details .ms-history-details-drilldown-node .animated.ng-enter.ng-enter-active {
    max-height: 48px;
    min-height: 48px;
    opacity: 1;
}

/*.ms-history-details .drilldown > md-card:first-child {*/
    /*margin-top: 0;*/
/*}*/
/*.ms-history-details .drilldown > md-card.expanded {*/
    /*background-color: rgb(221, 221, 221);*/
    /*-webkit-box-shadow: none;*/
    /*-moz-box-shadow: none;*/
    /*box-shadow: none;*/
/*}*/
/*.ms-history-details .drilldown > md-card.expanded:not(:first-child) {*/
    /*margin-top: 16px;*/
/*}*/
/*.ms-history-details .drilldown > md-card:not(.expanded) {*/
    /*margin-left: 32px; margin-right:32px /!* line up with nested listitems *!/*/
/*}*/

.ms-history-details > md-card.ng-enter,
.ms-history-details > md-card.ng-leave {
    -webkit-transition:all linear 0.1s;
    transition:all linear 0.1s;
}
.ms-history-details > md-card.ng-enter,
.ms-history-details > md-card.ng-leave.ng-leave-active {
    /*max-height: 0;*/
    opacity: 0;
}
.ms-history-details > md-card.ng-leave,
.ms-history-details > md-card.ng-enter.ng-enter-active {
    /*max-height: 500px;*/
    opacity: 1;
}

.ms-history-details > .ms-card-table.ng-enter,
.ms-history-details > .ms-card-table.ng-leave {
    -webkit-transition: all linear 0.8s;
    transition: all linear 0.8s;
}
.ms-history-details > .ms-card-table.ng-enter,
.ms-history-details > .ms-card-table.ng-leave.ng-leave-active {
    opacity: 0;
}
.ms-history-details > .ms-card-table.ng-leave,
.ms-history-details > .ms-card-table.ng-enter.ng-enter-active {
    opacity: 1;
}

/* CARD TABLE */

/* Make room on the left for history circle-handles. */
.ms-card-table { } /* Widest circle is 150px; extra 32 aligns with content of period card */
.ms-card-table .circle-handle {
    position:absolute; top: -20px;
    left: -150px; width:150px; height:150px;
}
.ms-card-table .circle-handle.circle-handle-period {
    /*left: -100px; width:100px; height:100px;*/
}
.ms-card-table .circle-handle.circle-handle-event {
    /*left: -125px; width:125px; height:125px;*/
}
.ms-card-table .circle-handle.circle-handle-scene {
    /*left: -150px; width:150px; height:150px;*/
}

/* Move box-shadow from cards onto list items so they look good when separated from one another */
.ms-card-table md-card { box-shadow: none; background: transparent; }
.ms-card-table md-card md-list-item { box-shadow: 0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084); }
.ms-card-table md-list md-divider { border-top-color: rgba(256,256,256,0); } /* And make the dividers not too prevalent; this just leaves space for the drop shadow */

.ms-card-table input,
.ms-card-table md-select-label {
    font-size: 1.3em;
    font-weight: bold;
}
.ms-card-table .md-subheader { margin-right: 0; background: transparent; } /* Fix default margin */
/*.ms-card-table .md-subheader .md-subheader-inner { padding-bottom: 0; }*/

.ms-card-table h1, .ms-card-table h2, .ms-card-table h3 { font-weight: normal; }
.ms-card-table h2.period {
    margin: 0;
    text-align: center;
    text-transform: uppercase;
}

.ms-card-table .md-menu { position: absolute; }
.ms-card-table .md-menu.ms-period-menu { top: 8px; right: 8px; }
.ms-card-table .md-menu.ms-event-menu { top: -20px; right: -16px; }
.ms-card-table .md-menu.ms-scene-menu { top: -20px; right: 8px; }

.ms-card-table .md-menu .md-button.md-fab {
    width: 36px; height: 36px; line-height: 36px;
}
.ms-card-table .scene-list-item .md-button.md-fab.ms-fab-before { top: -44px; }
.ms-card-table .scene-list-item .md-button.md-fab.ms-fab-after { bottom: -44px; }