:root {
  --red-color: #FE0A0A;
  --text-color: #707070;
  --text-white: #fff;
}

@font-face {
 font-family: 'Poppins';
 src:url('../fonts/poppins/Poppins-Regular.otf');
}

@font-face {
 font-family: 'Poppins-Bold';
 src:url('../fonts/poppins/Poppins-Bold.otf');
}

@font-face {
 font-family: 'Poppins-ExtraBold';
 src:url('../fonts/poppins/Poppins-ExtraBold.otf');
}

@font-face {
 font-family: 'Chalet';
 src:url('../fonts/Chalet-ParisSixty_2.otf');
}

@font-face {
 font-family: 'Averta';
 src:url('../fonts/Averta.otf');
}

html, body {
  min-width: 100vw;
  min-height: 100vh;
}

html {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}
body {
  /*color: #ffffff;
  background: #393A55;*/
  color: var(--text-color);
  background: #ffffff;
  font-family: 'Poppins', 'Averta', 'Arial';
  font-display: swap;
  font-size: 16px;
  font-weight: 200;
  /*margin-bottom: 40px;*/
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;

  scrollbar-face-color: #ccc;
  scrollbar-highlight-color: #ccc;
  scrollbar-shadow-color: #ccc;
  scrollbar-3dlight-color:#FFFFFF;
  scrollbar-arrow-color:#FFFFFF;
  scrollbar-track-color:#E5E5E5;
  scrollbar-drakshadow-color:#000000;
}

body::-webkit-scrollbar,
div::-webkit-scrollbar,
.sidenav::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body::-webkit-scrollbar-thumb,
div::-webkit-scrollbar-thumb,
.sidenav::-webkit-scrollbar-thumb {
  /* background: rgba(255, 0, 0, 0.2); */
  background: rgba(13, 13, 13, 0.3);
  border-radius: 0; /*4px*/
}

body::-webkit-scrollbar-thumb:active,
div::-webkit-scrollbar-thumb:active,
.sidenav::-webkit-scrollbar-thumb:active {
  background-color: #2B2B2B;
}

body::-webkit-scrollbar-thumb:hover,
div::-webkit-scrollbar-thumb:hover,
.sidenav::-webkit-scrollbar-thumb:hover {
  background: #2B2B2B;
  /* box-shadow: 0 0 2px 1px rgba(255, 0, 0, 0.4); */
  box-shadow: 0 0 2px 1px rgba(90, 90, 90, 0.4);
  /*background: rgba(13, 13, 13, 0.3);*/
}

body::-webkit-scrollbar-track,
div::-webkit-scrollbar-track,
.sidenav::-webkit-scrollbar-track {
  /* background: #ff0000; */
  /*background: rgba(255, 10, 10, 0.6);*/
  background: rgba(90, 90, 90, 0.6);
  border-radius: 0; /*4px*/
}

body::-webkit-scrollbar-track:hover,
body::-webkit-scrollbar-track:active,
div::-webkit-scrollbar-track:hover,
div::-webkit-scrollbar-track:active,
.sidenav::-webkit-scrollbar-track:hover,
.sidenav::-webkit-scrollbar-track:active {
  /* background: rgba(255, 0, 0, 0.5); */
  background: rgba(13, 13, 13, 0.5);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins-ExtraBold', 'Averta', 'Arial';
  /*font-weight: 400;*/
}

a,
a:active,
a:hover,
a:visited {
  color: var(--red-color);
}

.fs-7 {
  font-size: 13px;
}
.fw-bold {
    font-family: 'Poppins-ExtraBold';
}
.mt-icons {
  margin-top: 0;
}

.border-r { border: 1px solid red; }
.border-g { border: 1px solid green; }
.border-b { border: 1px solid blue; }
.border-c { border: 1px solid cyan; }
.border-m { border: 1px solid magenta; }
.border-y { border: 1px solid yellow; }

.title-lang {
  color: var(--red-color);
  font-weight: 900;
}

.text-title-left {
  text-align: left;
}

.my-logo-top {
    margin-top: 5rem!important;
    margin-bottom: 5rem!important;
}

.my-logo-top img {
  height: 68px;
  width: auto;
}

.row-urlsite {
  text-align: left;
}

.break-words {
  max-width: 65%;
}

.h-divider {
    width: 2px;
    height: 77%;
    /*background-color: rgba(0, 0, 0, .1);*/
    /*background-color: rgba(240, 240, 240, .1);*/
    background-color: #8D8D8D;
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, .1), inset 0 0.125em 0.5em rgba(0, 0, 0, .15);
    margin: 85px 0;
}

.more-info-left {
  margin-top: 20px;
}
.more-info-right {
  margin-top: 10px;
}


.table-icon {
  border:1px none red;
  height: 38px;
  width: auto;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: auto;
    padding: 28px 10px;
    overflow: hidden;
    background: var(--red-color);
    color: var(--text-white);
    text-align: left;
    font-size: 12px;
    margin-top: 50px;
}

@media screen and (max-width: 500px) and (orientation: portrait)  {
  .my-logo-top {
    margin-top: 2rem!important;
    margin-bottom: 2rem!important;
  }
  .mt-icons {
    margin-top: 10px;
  }
  .text-title-left {
    text-align: center;
  }
  .row-urlsite {
    text-align: center;
  }

  .h-divider {
      width: 92vw;
      height: 2px;
      margin: 35px auto;
  }

  .break-words {
    max-width: 100%;
    margin-bottom: 10px;
  }
  .more-info-left {
    margin-top: 0;
  }
  .more-info-right {
    margin-top: 0;
  }

  .wrap-notfound {
      min-height: 70vh;
  }

  footer {
      position: relative;
      font-size: 10px;
      margin-top: 50px;
      padding: 28px 0;
  }

}

/*@media screen and (min-width: 640px) and (max-width: 667px) and (orientation: landscape) {*/
@media screen and (min-width: 640px) and (max-width: 740px) and (orientation: landscape) {
  main {
    margin-bottom: 100px;
  }
  .container, .container-sm {
    max-width: 90vw;
  }
  .my-logo-top {
    margin-top: 2rem!important;
    margin-bottom: 2rem!important;
  }
  .h-divider {
      width: 92vw;
      height: 2px;
      margin: 35px auto;
  }

}

/*@media screen and (max-height:440px) and (min-width: 668px) and (max-width: 896px) and (orientation: landscape) {*/
@media screen and (max-height:440px) and (min-width: 668px) and (max-width: 915px) and (orientation: landscape) {
  main {
    margin-bottom: 100px;
  }
  .my-logo-top {
    margin-top: 2rem!important;
    margin-bottom: 2rem!important;
  }

}

@media screen and (min-width: 768px) and (max-width: 1180px) and (max-height:900px) and (orientation: landscape) {
  main {
    margin-bottom: 100px;
  }
  .my-logo-top {
    margin-top: 2rem!important;
    margin-bottom: 2rem!important;
  }
  .h-divider {
      margin: 85px auto;
  }

}

@media screen and (min-width: 768px) and (max-width: 920px) and (max-height:1180px) and (orientation: portrait) {
  .h-divider {
      margin: 85px auto;
  }

}

@media screen and (min-width: 1166px) and (max-width: 1680px) and (max-height:920px) {
  main {
    margin-bottom: 100px;
  }
  .my-logo-top {
    margin-top: 2rem!important;
    margin-bottom: 2rem!important;
  }
  .h-divider {
      margin: 85px 0 0 15px;
  }

}
