.button-flat {
    background-color: transparent !important;
    border-color: transparent !important;
}

.text-disabled{
    color:#CACFD2;
}

.item-calm{
    background-color:#11c1f3 !important;
}

.item-assertive{
    background-color:#ef473a !important;
}

.item-selected {
    border-color: #ccc;
    background-color: #D9D9D9;
}

.icon-calm{
    color:#11c1f3 !important;
}

.icon-light{
    color:#fff !important;
}

.icon-energized{
    color:#FFC800 !important;
}

.button-icon-large{
    font-size:100px !important;
}

@media (min-height: 875px) {
    .button-dial-pad {
        width: 100px;
        height: 100px;
        margin: 5px;
        background-color: #333333;
    }
}

@media (max-height: 874px) and (min-height: 750px) {
    .button-dial-pad{
        width:75px; 
        height:75px; 
        margin:5px; 
        background-color:#333333;
    }
}

@media (max-height: 749px) {
    .button-dial-pad{
        width:50px; 
        height:50px; 
        margin:5px; 
        background-color:#333333;
    }
}


.triple-sub-header{
    top:135px;
}

.double-sub-header{
    top:89px;
}

.single-sub-header{
    top:45px;
}

.no-sub-header{
    top:0px;
}

.rotate-180 {
  display: inline-block; 
  transform: rotate(180deg);
}

.item-hover:hover{
  background-color: lightcyan;
}

.item-text-hover-white:hover{
  color: white;
}

.item-text-hover-calm:hover{
  color: #11c1f3;
}

@media (min-height: 750px) {
    .h5-text{
        font-size:14px;
    }
}

@media (max-height: 749px) {
    .h5-text{
        font-size:0px;
    }
}

.panel-container-vertical {
  display: flex;
  flex-direction: column;
  height: 500px;
  border: 1px solid silver;
  overflow: hidden;
}

.panel-top {
  flex: 1 1 auto;
  height: 150px;
  width: 100%;
  white-space: nowrap;
  color: white;
}

.panel-bottom {
  flex: 0 0 auto;
  min-height: 45px;
}

.splitter-horizontal {
  flex: 0 0 auto;
  height: 18px;
  background: center center no-repeat #535353;
  cursor: row-resize;
}

.collection-item {
    height: auto;
    width: 100% !important;
}