/**
 * Copyright (C) 2020 to the present, Crestron Electronics, Inc.
 * All rights reserved.
 * No part of this software may be reproduced in any form, machine
 * or natural, without the express written consent of Crestron Electronics.
 * Use of this source code is subject to the terms of the Crestron Software License Agreement 
 * under which you licensed this source code.  
 *
 * This code was automatically generated by Crestron's code generation tool.
*/

.direct-tv-device-keys-panel-two-widget {
    /* Widget level styles go here */

    .ch5-button--label,
    .ch5-button--icon {
      color: black;
    }

    .ch5-button .cb-btn {
      padding: 0;
    }

    $myButtonPressed: #fafafa;

    .ch5-button--pressed {
      background-color: $myButtonPressed !important;
      border-color: $myButtonPressed !important;
      opacity: 0.7;
      transform: scale(0.9);
    }

    .complete-table {
      width: 100%;
    }

    .row>.col,
    .row>[class^="col-"] {
      padding: 10px !important;
      padding-left: 10px !important;
      padding-right: 10px !important;
    }

    $bg-color-for-button-pnl-one: whitesmoke;
    $border-radius-for-button-pnl-one: 50%;

    $myButton: #fafafa;

    .ch5-button-light-green {
      span {
        color: #60cbb2 !important;
      }
    }

    .ch5-button-red {
      span {
        color: #ea3a55 !important;
      }
    }

    .ch5-button {
      background-color: $myButton;
      border-color: $myButton;
      transition: all 0.1s ease-in;
      box-shadow: none;

      .ch5-button-light-green {
        span {
          color: #60cbb2 !important;
        }
      }

      .ch5-button-red {
        span {
          color: #ea3a55 !important;
        }
      }
    }

    .menu-button {
      .ch5-button--rectangle {
        width: 100%;
      }
    }

    .each-row-cell {
      padding: 20px;
    }

    .full-bg-center {
      background: $bg-color-for-button-pnl-one;
      border-radius: 0;
      border: 1px solid $bg-color-for-button-pnl-one;
    }

    .full-bg-center-round {
      background: $bg-color-for-button-pnl-one;
      border-radius: 100%;
      border: 1px solid $bg-color-for-button-pnl-one;
    }

    .full-bg-left {
      background: $bg-color-for-button-pnl-one;
      border-radius: $border-radius-for-button-pnl-one 0 0 $border-radius-for-button-pnl-one;
      border: 1px solid $bg-color-for-button-pnl-one;
    }

    .full-bg-right {
      background: $bg-color-for-button-pnl-one;
      border-radius: 0 $border-radius-for-button-pnl-one $border-radius-for-button-pnl-one 0;
      border: 1px solid $bg-color-for-button-pnl-one;
    }

    .full-bg-top {
      background: $bg-color-for-button-pnl-one;
      border-radius: $border-radius-for-button-pnl-one $border-radius-for-button-pnl-one 0 0;
      border: 1px solid $bg-color-for-button-pnl-one;
    }

    .full-bg-bottom {
      background: $bg-color-for-button-pnl-one;
      border-radius: 0 0 $border-radius-for-button-pnl-one $border-radius-for-button-pnl-one;
      border: 1px solid $bg-color-for-button-pnl-one;
    }

    .ch5-button:not(.ch5-button--vertical) .ch5-button--label+.cx-button-icon-pos-last,
    .ch5-button:not(.ch5-button--vertical) .cx-button-icon-pos-first+.ch5-button--label {
      padding-left: 0;
    }

    @import "./../../../../assets/scss/controlled-sources/buttons";

    // 1070 Panel, 1060 Panel
    @media only screen and (device-width: 1280px) {
      .ch5-button {
        width: 75px;
      }

      .ch5-button--label {
        font-size: 22px;
      }
    }

    // 760 Panel
    @media only screen and (device-width: 1261px) {
      .ch5-button {
        width: 72px;
      }

      .ch5-button--label {
        font-size: 22px;
      }
    }

    // 560 Panel
    @media only screen and (device-width: 640px) {
      .ch5-button {
        width: 35px;
      }

      .ch5-button--label {
        font-size: 12px;
      }
    }
}