/**
 * 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.
*/

.apple-tv-dpad-widget {
    /* Widget level styles go here */
    $dpad_btn_size: 1rem;
    $myButton: #fafafa;
    $myButtonPressed: #fafafa;
    $bg-color-for-button-pnl-one: whitesmoke;
    $border-radius-for-button-pnl-one: 50%;

    .ch5-button--label,
    .ch5-button--icon {
        color: #1c2b58;
    }

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

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

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

    .complete-table {
        width: 100%;
        padding: 50px;
    }

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

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

    ch5-button {
        .ch5-button--label {
            font-size: 28px !important;
        }
    }

    .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;
    }

    .fa-circle {
        font-size: 20px;
    }
}

@media only screen and (device-width: 1280px) {
    .csi,
    .clhvac,
    .csp,
    .cv {
        font-size: 48px;
    }

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

    .keypad .alphabet {
        font-size: 16px;
    }
}

@media only screen and (device-width: 1261px) {
    .csi,
    .clhvac,
    .csp {
        font-size: 35px;
    }

    .cv {
        font-size: 35px;
    }

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

    .keypad .alphabet {
        font-size: 16px;
    }
}

@media only screen and (device-width: 640px) {
    .csi,
    .clhvac,
    .csp {
        font-size: 30px;
    }

    .cv {
        font-size: 30px;
    }

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

    .keypad .alphabet {
        font-size: 16px;
    }
}
