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

#footer-page {
    /* Page level styles go here */
    padding: 0;
    background-color: #fff;

    .footer-toolbar {
        [class*="col-"] {
            padding: 0 !important;
        }

        .row {
            margin: 0 !important;
        }

        ch5-button.center-button {
            width: 100%;
            height: 100%;

            div {
                width: 100%;
                height: 15vh;
                border: none;
                background-color: transparent;
                display: flex;
                align-items: center;
                justify-content: center;

                &:focus,
                &:active {
                    outline: none;
                }

                button {
                    &.cb-btn {
                        width: 100%;
                        height: 100%;
                        border-radius: initial;
                    }

                    .ch5-button--img {
                        width: 75px;
                        height: 75px;
                    }
                }
            }
        }

        ch5-button.center-button.menu-button {
            div {
                button {
                    .ch5-button--img {
                        width: 96px;
                        height: 96px;
                    }
                }
            }
        }

        ch5-button.center-button.back-button {
            div {
                button {
                    .ch5-button--img {
                        width: 75px;
                        height: 75px;
                    }
                }
            }
        }

        ch5-button.footer-button {
            width: 100%;
            height: 100%;
            box-shadow: none;

            div {
                width: 100%;
                height: 15vh;
                border: none;
                background-color: transparent;
                display: flex;
                align-items: center;
                justify-content: center;

                &:focus,
                &:active {
                    outline: none;
                }

                button {
                    &.cb-btn {
                        // width: 100%;
                        // height: 100%;
                        border-radius: 50%;
                        margin: 0px auto;

                        .ch5-button--img {
                            width: 36px;
                            height: 36px;
                        }
                    }
                }
            }

            .ch5-button--pressed {
                background-color: gainsboro !important;
                outline: 1px solid gainsboro;
                border-radius: 0;
            }

            &#volumeUpBtn,
            &#volumeDownBtn,
            &#volumeMuteBtn,
            &#micMuteBtn,
            &#infoBtn {
                button {
                    &.cb-btn {
                        width: 100%;
                        height: 100%;
                        border-radius: initial;
                    }
                }
            }
        }

        .right-toolbar {
            text-align: right;
        }

        .ca,
        .cas {
            &#center-nav-up-arrow {
                position: absolute;
                top: -12px;
                display: block;
                padding: 0;
                border-style: none;
            }

            &.bounce {
                -webkit-animation: bounce 40s infinite forwards 1s;
                animation: bounce 40s infinite forwards 1s;
            }

            /* Scroll down indicator (bouncing) */
            @-webkit-keyframes bounce {
                0%,
                6%,
                12% {
                    -webkit-transform: translateY(0px);
                }

                1%,
                7%,
                13% {
                    -webkit-transform: translateY(30px);
                }

                2%,
                8%,
                14% {
                    -webkit-transform: translateY(-30px);
                }

                3%,
                9%,
                15%,
                100% {
                    -webkit-transform: translateY(0px);
                }
            }

            @-moz-keyframes bounce {
                0%,
                6%,
                12% {
                    -webkit-transform: translateY(0px);
                }

                1%,
                7%,
                13% {
                    -webkit-transform: translateY(30px);
                }

                2%,
                8%,
                14% {
                    -webkit-transform: translateY(-30px);
                }

                3%,
                9%,
                15%,
                100% {
                    -webkit-transform: translateY(0px);
                }
            }

            @keyframes bounce {
                0%,
                6%,
                12% {
                    -webkit-transform: translateY(0px);
                }

                1%,
                7%,
                13% {
                    -webkit-transform: translateY(30px);
                }

                2%,
                8%,
                14% {
                    -webkit-transform: translateY(-30px);
                }

                3%,
                9%,
                15%,
                100% {
                    -webkit-transform: translateY(0px);
                }
            }
        }
    }

    .volume-slider {
        width: 100%;
        position: relative;
        z-index: 1020;
        text-align: right;

        .ch5-slider {
            .noUi-handle-lower {
                display: none;
            }
        }
    }

    .toobar-active-icon {
        img {
            box-shadow: 0px 0px 0px 4px red inset;
            border-radius: 50%;
            padding: 10px;
            height: 56px !important;
            width: 56px !important;
        }
    }

    .btn-active {
        background-color: gainsboro !important;
        outline: 1px solid gainsboro;
    }
}
