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


 html,
 body {
   height: 100%;
 }

 html {
   font-family: sans-serif; // 2
   line-height: 1.15; // 3
   -webkit-text-size-adjust: 100%; // 4
   -ms-text-size-adjust: 100%; // 4
   -ms-overflow-style: scrollbar; // 5
   -webkit-tap-highlight-color: rgba($black, 0); // 6
   font-size: 16px;
   overflow: hidden;

   @include media-breakpoint-down(sm) {
     font-size: 14px;
   }

   @media all and (orientation:landscape) {
     font-size: 12px;
   }

   @include media-breakpoint-down(xs) {
     font-size: 12px;
   }
 }



#triggerViewWrapper {
  display: flex; 
  max-height: 100%;
  height: 100%;
  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}

#header-index-page {
  height: $header-height;
  @include media-breakpoint-down(sm) {
    height: $header-height-sm;
  }
}

#content-index-page {
  flex: 1;
  overflow-y: auto;
  ch5-import-htmlsnippet {
    &>div {
      height: 100%;
    }
  }
}

#footer-index-page{
  // background: lime;
  //TODO - do we need height
}

#footer-page {
  padding: 10px;
  background: #efefef;
}

#template-content-page-wrapper {
  display: flex;  /* use the flex model */
  max-height: 100%;
  height: 100%;
  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}

#content-index-body {
  flex: 1;
  overflow-y: auto;


  .swiper-wrapper {
    height: 100%;
  }

  .ch5-viewchild {
    display: block;
    overflow: hidden;
    overflow-y: auto;
    margin: 0;
    transform: translate3d(0px, 0px, 0px);

    ch5-import-htmlsnippet>div {
      height: 100%;
    }
  }
}

 // IE10+ doesn't honor `<meta name="viewport">` in some cases.
 @at-root {
   @-ms-viewport {
     width: device-width;
   }
 }

dfn {
  font-style: italic; // Add the correct font style in Android 4.3-
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  // Remove the default appearance of temporal inputs to avoid a Mobile Safari
  // bug where setting a custom line-height prevents text from being vertically
  // centered within the input.
  // See https://bugs.webkit.org/show_bug.cgi?id=139848
  // and https://github.com/twbs/bootstrap/issues/11266
  -webkit-appearance: listbox;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

.iframe-full {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  @include size(100%);
}

// select
.ch5-custom-select {
  border: 0;
  color: $white;
  border-radius: 0;
  height: 100%;

  .ch5-select__main {
    padding: 0.5rem 1rem;
    color: inherit;

    .fa {
      display: none;
    }
  }

  .ch5-select__panel__items .ch5-select__panel__item {
    padding: 0.8rem 1rem;
  }
}

// slider
.ch5-slider {
  .noUi-handle {
    &:after {
      content: "";
      background-color: transparent;
      background-image: url("#{$image-path}trans-bg.png");
      @include size(300%);
      position: absolute;
      left: -100%;
      top: -100%;
    }
  }

  @include media-breakpoint-down(sm) {
    &.ch5-slider--orientation--horizontal.ch5-slider--shape--circle.ch5-slider--handle-size--regular .noUi-handle {
      @include size(28px);

      &:after {
        @include size(200%);
        left: -50%;
        top: -50%;
      }
    }
  }
}

$customLists: ch5-custom-list,
list-scroller,
source-list,
video-list,
swiper-thumb;

@each $list in $customLists {
  &.#{$list} {
    .list-item {
      background-color: transparent;
      color: inherit;
      border: 0;
      padding: 0;
    }
  }
}

#brandLogo {
  max-width: 100%;
  // height: auto;
  height: $header-brandlogo-height;
  outline: none;
  width: 90%;

  img {
    // object-fit:scale-down;
    width: auto;
  }

  @include media-breakpoint-down(sm) {
    height: $header-brandlogo-height-sm;
  }

}


/*
This .scss loop will create "margin helpers" and "padding helpers" for use in your web projects.
It will generate several classes such as:
.m-r-10 which gives margin-right 10 pixels.
.m-r-15 gives MARGIN to the RIGHT 15 pixels.
.m-t-15 gives MARGIN to the TOP 15 pixels and so on.
.p-b-5 gives PADDING to the BOTTOM of 5 pixels
.p-l-40 gives PADDING to the LEFT of 40 pixels
The first letter is "m" or "p" for MARGIN or PADDING
Second letter is "t", "b", "l", or "r" for TOP, BOTTOM, LEFT, or RIGHT
Third letter is the number of spacing in pixels. Adjust the amounts generated by editing the $spaceamounts variable below.
*/


$spaceamounts: (
    0,
    5,
    10,
    15,
    20,
    25,
    30,
    35,
    40,
    45,
    50,
    55,
    60,
    65,
    70,
    75,
    80,
    85,
    90,
    95,
    100
); // Adjust this to include the pixel amounts you need.
$sides: ("", top, bottom, left, right, top-bottom, left-right); // Leave this variable alone

@each $space in $spaceamounts {
    @each $side in $sides {
        @if $side== "" {
            .m-#{$space} {
                @if $space== 0 {
                    margin: #{$space} !important;
                } @else {
                    margin: #{$space}px !important;
                }
            }

            .p-#{$space} {
                @if $space==0 {
                    padding: #{$space} !important;
                } @else {
                    padding: #{$space}px !important;
                }
            }
        }  @else if $side=="top-bottom" {
            .m-t-b-#{$space} {
                @if $space== 0 {
                    margin-top: #{$space} !important;
                    margin-bottom: #{$space} !important;
                } @else {
                    margin-top: #{$space}px !important;
                    margin-bottom: #{$space}px !important;
                }
            }

            .p-t-b-#{$space} {
                @if $space== 0 {
                    padding-top: #{$space} !important;
                    padding-bottom: #{$space} !important;
                } @else {
                    padding-top: #{$space}px !important;
                    padding-bottom: #{$space}px !important;
                }
            }
        }   @else if $side=="left-right" {
            .m-l-r-#{$space} {
                @if $space== 0 {
                    margin-left: #{$space} !important;
                    margin-right: #{$space} !important;
                } @else {
                    margin-left: #{$space}px !important;
                    margin-right: #{$space}px !important;
                }
            }

            .p-l-r-#{$space} {
                @if $space== 0 {
                    padding-left: #{$space} !important;
                    padding-right: #{$space} !important;
                } @else {
                    padding-left: #{$space}px !important;
                    padding-right: #{$space}px !important;
                }
            }
        } @else {
            .m-#{str-slice($side, 0, 1)}-#{$space} {
                @if $space== 0 {
                    margin-#{$side}: #{$space} !important;
                } @else {
                    margin-#{$side}: #{$space}px !important;
                }
            }

            .p-#{str-slice($side, 0, 1)}-#{$space} {
                @if $space== 0 {
                    padding-#{$side}: #{$space} !important;
                } @else {
                    padding-#{$side}: #{$space}px !important;
                }
            }
        }
    }
}
