/* Apperance Transition */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}
::view-transition-new(root) {
  z-index: 2;
}

.dark::view-transition-new(root) {
  animation: reveal-dark 0.5s ease-in-out;
}

.light::view-transition-new(root) {
  animation: reveal-light 0.5s ease-in-out;
}

@keyframes reveal-dark {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes reveal-light {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
/* Apperance Transition End */

.span8, .span12 {
    margin-left: 0 !important;
}
.checkUpdatesWarning {
    position: absolute;
    margin-left: 5px;
}
ul.tableView li input, ul.tableView li textarea {
    width: 60%;
}
ul.tableView li .accessory input, ul.tableView li .accessory textarea {
    float: right;
    width: 100%;
}
ul.tableView li span.accessory {
    max-width: 70%;
}
.inputbox .inputtable {
    display: table;
}
.inputbox .inputrow {
    display: table-row;
}
.inputbox .inputcolumn {
    display: table-cell;
    vertical-align: top;
    padding-right: 4px;
}
li.list.disabled > span, li.select.disabled > span {
  color: #888!important;
}
li.select:active > span, li.list:active > span {
  color: white !important;
}
li.select.checked > span.accessory {
    height: 15px !important;
    width: 15px !important;
    background: url("../../img/check.png") no-repeat 0 100% !important;
}
li.select.checked:active > span.accessory {
  background: url("../../img/check.png") no-repeat !important;
}
.tableViewMenu li.list > span.accessory {
  height: 17px !important;
  width: 10px !important;
  background: url("../../img/chevron.png") no-repeat 0 100% !important;
}
.tableViewMenu li.list:active > span.accessory {
  background: url("../../img/chevron.png") no-repeat !important;
}
.titlerow button {
    float: right;
    top: -4px;
}
.titlerow button, .titlerow span {
    vertical-align: middle;
}
.transparent-box div.title {
    border-bottom: 0;
}
.tableViewMenu {
    width: 225px;
}
.tableViewMenu .title {
    font: bold 15px 'HelveticaNeue',Helvetica,Arial,sans-serif;
}
.tableViewMenu .list {
    padding: 10px !important;
}
.tableViewTop {
    width: 260px;
}
.tableViewBar {
    overflow: auto;
}
.tableViewScroller {
    max-height: 400px;
    width: 260px;
}
.tableViewSubView {
    left: 260px;
    width: 260px;
}
.callout:before {
    left: 118px;
}
.callout ul.tableView li span {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 210px;
}
.span12 {
    margin: 8px 0 0 0 !important;
}
.btn {
    max-width: 226px;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
img {
    vertical-align: middle;
}
.localpushdown {
    margin-top:10%;
}
.warning {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin-top: 2px;
}
.error {
    background-color: #f2dede !important;
}
#help li {
    margin-left: 20px;
    margin-bottom: 10px;
}
.separator {
    float:right;
    margin-bottom: 10px;
}
.nav-tabs li.active a {
    background: #fbfbfb url("../../img/background.png");
}

@media (max-width: 767px) {
    ul.tableView li input, ul.tableView li textarea {
        width: 50%;
    }
    .accessory {
        width: 50%;
    }
    .inputbox .inputtable {
        display: block;
    }
    .inputbox .inputrow {
        display: table;
        width: 100%;
    }
    .inputbox .inputcolumn {
        display: table-row;
        vertical-align: top;
        padding-right: 4px;
    }
    .buttonrow button {
        width: 100%;
    }
    .tableViewMenu {
        width: 100%;
    }
    .inputbox {
        margin-right: 30px;
    }
    .btn {
        max-width: none;
        margin-bottom: 2px;
    }
    .buttonrow div {
        margin-top: 20px;
    }
    .buttonrow .btn {
        width: 100%;
        text-align: center;
    }
}
