/****** Estilos reutilizáveis ******/

      :root {
         /*
         --theme-color-text: #5E5E5E;
         --theme-color-text-light: #171717;
         --theme-color-text-dark: #171717;
         --theme-color-background: #707070;
         --theme-color-text-shadow-primary: #808080;
         --theme-color-text-shadow-secondary: #999999;
         */

         --theme-color-warning: #F0AD4E;
         --theme-color-danger: #DE6C68;
         --theme-color-success: #5CB85C;
         --theme-color-info: #43A3CF;
      }

   /**********************************/

   html {
      background-color: #1A1D29;
   }

      body {
         overflow-y: hidden;
         overflow-x: hidden;
         background-color: #1A1D29;
         font-family: 'Montserrat-Regular', sans-serif;
         /* color: #424242; */
         color: #FFFFFF;
      }

         body > div {
            -webkit-user-select: none;
            -khtml-user-drag: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -moz-user-select: -moz-none;
            -ms-user-select: none;
            user-select: none;
         }

         body a {
            /* color: #424242; */
            color: #FFFFFF;
            text-decoration: none;
         }


         /** centraliza verticalmente o bootstrap alert **/

            .vertical-alignment-helper {
               display:table;
               height: 100%;
               width: 100%;
               pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
            }
            .vertical-align-center {
               /* To center vertically */
               display: table-cell;
               vertical-align: middle;
               pointer-events:none;
            }
            .modal-content {
               /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
               width:inherit;
               max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
               height:inherit;
               /* To center horizontally */
               margin: 0 auto;
               pointer-events: all;
            }

         /****/

         #idLoading_Box_Bloqueia {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            width: 100vw;
            border: 0;
            margin: 0;
            opacity: 0.6;
            cursor: progress;
            z-index: 9998;
            background-color: #F7F7F7;
         }

         #idLoading_Box_Informa {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            width: 100vw;
            border: 0;
            margin: 0;
            text-align: center;
            opacity: 1.0;
            cursor: progress;
            z-index: 9999;
         }

            #idLoading_Animation {
               display: block;
               position: relative;
               top: 45%;
               width: 65vw;
               max-width: 300px;
               margin: 0 auto;
               cursor: progress;
               z-index: 9999;
            }

               #idLoading_Animation img {
                  display: inline-block;
                  position: relative;
                  border: 0;
                  width: 90%;
               }

         #idLoading_Text {
            display: block;
            position: relative;
            width: 80vw;
            top: calc(45% + 10px);
            margin: 0 auto;
            border: 0;
            color: #F5F5F5;
            font-size: calc(3.25vh);
            font-weight: bold;
            text-shadow: 2px 2px 4px #030303;
         }

         #idLoading_Box_Informa a {
            display: inline-block;
            position: relative;
            border: 0em;
            width: 0.063em;
            height: 0.063em;
            opacity: 1.0;
            text-decoration: none;
            color: transparent;
         }


         #idTela {
            display: inline-block;
            position: relative;
            top: 0;
            left: 0;
            border: 0px;
            margin: 0px;
            padding: 0px;
            width: 100vw;
            text-align: center;
            /*
            background:        url('img_back_desktop.jpg') top;
            background-repeat: no-repeat;
            background-size:   cover;
            */
            /* Ajustado via Javascript
               width: 100%;
               height: 100%;
            */
            overflow-x: hidden;
            z-index: 1;
         }


            #idContainer {
               display: inline-block;
               position: relative;
               width: 100%;
               max-width: 440px;
               border: 0px;
               margin: 0px;
               padding: 0px;
               overflow-x: hidden;
               z-index: 2;
            }

               #idLogoCiaGO {
                  display: inline-block;
                  position: relative;
                  width:  180px;
                  height: 80px;
                  border: 0px;
                  margin: 0px;
                  padding: 0px;
                  margin-top: 50px;
                  background:        url('img_logo_ciago.png') center;
                  background-repeat: no-repeat;
                  background-size:   contain;
                  z-index: 2;
               }

               #idPreTitulo {
                  display: inline-block;
                  position: relative;
                  width:  100%;
                  border: 0px;
                  margin: 0px;
                  padding: 0px;
                  margin-top: 100px;
                  padding-left: 10px;
                  padding-right: 10px;
                  text-align: left;
                  font-family: 'SegoeUI-SemiBold', sans-serif;
                  font-family: 'Montserrat-Medium', sans-serif;
                  font-size: 70%;
                  /* transform: scale(1, 0.70); */
                  z-index: 2;
               }


               #idTitulo {
                  display: inline-block;
                  position: relative;
                  width:  100%;
                  border: 0px;
                  margin: 0px;
                  padding: 0px;
                  padding-left: 10px;
                  padding-right: 10px;
                  text-align: left;
                  /*
                  font-family: 'Roboto-Medium', sans-serif;
                  font-family: 'Ubuntu-Medium', sans-serif;
                  font-family: 'WorkSans-SemiBold', sans-serif;
                  */
                  font-family: 'Montserrat-SemiBold', sans-serif;
                  font-size: 190%;
                  z-index: 2;
               }


               #idDigitos {
                  display: inline-block;
                  position: relative;
                  width:  100%;
                  border: 0px;
                  margin: 0px;
                  padding: 0px;
                  padding-left: 10px;
                  padding-right: 10px;
                  margin-top: 10px;
                  /*
                  font-family: 'Roboto-Medium', sans-serif;
                  font-family: 'Ubuntu-Medium', sans-serif;
                  font-family: 'WorkSans-SemiBold', sans-serif;
                  */
                  font-family: 'Montserrat-SemiBold', sans-serif;
                  font-size: 190%;
                  z-index: 2;
               }

                  #idDigitos input {
                     display: inline-block;
                     position: relative;
                     height: 65px;
                     width:  42px;
                     border: 0px;
                     margin: 0px;
                     padding: 0px;
                     background-color: #31343E;
                     color: #FFFFFF;
                     font-weight: bold;
                     font-family: 'Montserrat-SemiBold', sans-serif;
                     text-align: center;
                     -webkit-border-top-left-radius: 4px;
                     -moz-border-radius-topleft: 4px;
                     border-top-left-radius: 4px;
                     -webkit-border-top-right-radius: 4px;
                     -moz-border-radius-topright: 4px;
                     border-top-right-radius: 4px;
                     -webkit-border-bottom-left-radius: 4px;
                     -moz-border-radius-bottomleft: 4px;
                     border-bottom-left-radius: 4px;
                     -webkit-border-bottom-right-radius: 4px;
                     -moz-border-radius-bottomright: 4px;
                     border-bottom-right-radius: 4px;
                     z-index: 3;
                  }

                     #idDigitos input:focus {
                        outline: none;
                        border: 1px solid #5A5D65 !important;
                     }

                  #idDigitos_Separador {
                     display: inline-block;
                     position: relative;
                     height: 60px;
                     width:  10px;
                     font-size: 0.8em;
                  }

               .bt_popup_block {
                  background-image: #5C5C5C;
                  opacity: 40%;
               }

               .bt_popup .bt_popup-button {
                  display: block;
                  text-align: center;
                  text-decoration: none;
                  font-weight: 800;
                  font-size: 1em;
                  margin: 0px;
                  padding: 0px;
                  text-transform: uppercase;
                  color: #fff;
                  border-radius: 6px;
                  margin: 10px;
                  margin-top: 30px;
                  padding: 1em 3em;
                  background-size: 300% 300%;
                  color: white;
                  -webkit-box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
                  -moz-box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
                  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
                  -webkit-transition: 0.5s;
                  -moz-transition: 0.5s;
                  -o-transition: 0.5s;
                  transition: 0.5s;
                  background-image: linear-gradient(to right, #A60320 0%, #FA0532 50%, #A60320 100%);
                  letter-spacing: 2px;

               }

               .bt_popup-button:hover {
                  background-position: right center;
               }


            #idFooter {
               display: inline-block;
               position: relative;
               width: 100vw;
               border: 0px;
               margin: 0px;
               padding: 0px;
               overflow-x: hidden;
               z-index: 2;
               background-color: black;
            }


               #idLogoCia {
                  display: inline-block;
                  position: relative;
                  width:  140px;
                  height: 40px;
                  border: 0px;
                  margin: 0px;
                  margin-top: 45px;
                  padding: 0px;
                  background:        url('img_logo_cia.png') center;
                  background-repeat: no-repeat;
                  background-size:   contain;
                  z-index: 2;
               }


         #idIFContainer {
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
            border: 0px;
            margin: 0px;
            padding: 0px;
            text-align: center;
            overflow-x: hidden;
            overflow-y: hidden;
            background-color: #1A1D29;
            border: 1px dotted transparent;
            z-index: 4;
         }

            #idImgFechar {
               display: none;
               position:absolute;
               width:  60px;
               height: 40px;
               border: 0px;
               margin: 0px;
               padding: 0px;
               top: 15px;
               right: 2.5%;
               background:        url('img_fechar.png') center;
               background-repeat: no-repeat;
               background-size:   contain;
               cursor: pointer;
               cursor: hand;
               z-index: 5;
            }

            #iframe {
               display: inline-block;
               position: relative;
               width: 100%;
               height: 99.5%;
               overflow-x: hidden;
               overflow-y: hidden;
            }


   /* Vertical puro */
   @media screen and (orientation: portrait) {

      #idLogoCiaGO {
         margin-top: 14vh;
      }

      #idPreTitulo {
         margin-top: 9vh;
      }

      #idTitulo {
         font-size: 160%;
         z-index: 2;
      }

      #idDigitos {
         padding-left: 5px;
         padding-right: 10px;
         font-size: 160%;
      }

         #idDigitos input {
            height: 13vw;
            width:  10vw;
            margin-right: -3px;
         }

         #idDigitos_Separador {
            height: 25px;
            width:  8px;
            font-size: 0.6em;
            margin-right: -3px;
         }

      .bt_popup .bt_popup-button {
         padding: 0.85em 3em;
      }

   }

  /* Vertical */

  @media screen and (min-width: 600px) and (orientation: portrait) {

         #idDigitos input {
            height: 65px;
            width:  42px;
         }

  }