/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

   html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
  }
  
  /*
   * Remove text-shadow in selection highlight:
   * https://twitter.com/miketaylr/status/12228805301
   *
   * Vendor-prefixed and regular ::selection selectors cannot be combined:
   * https://stackoverflow.com/a/16982510/7133471
   *
   * Customize the background color to match your design.
   */
  
  ::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
  }
  
  ::selection {
    background: #b3d4fc;
    text-shadow: none;
  }
  
  /*
   * A better looking default horizontal rule
   */
  
  hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
  }
  
  /*
   * Remove the gap between audio, canvas, iframes,
   * images, videos and the bottom of their containers:
   * https://github.com/h5bp/html5-boilerplate/issues/440
   */
  
  audio,
  canvas,
  iframe,
  img,
  svg,
  video {
    vertical-align: middle;
  }
  
  /*
   * Remove default fieldset styles.
   */
  
  fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }
  
  /*
   * Allow only vertical resizing of textareas.
   */
  
  textarea {
    resize: vertical;
  }
  
  /* ==========================================================================
     Author's custom styles
     ========================================================================== */
  
  /* ==========================================================================
     Helper classes
     ========================================================================== */
  
  /*
   * Hide visually and from screen readers
   */
  
  .hidden,
  [hidden] {
    display: none !important;
  }
  
  /*
   * Hide only visually, but have it available for screen readers:
   * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
   *
   * 1. For long content, line feeds are not interpreted as spaces and small width
   *    causes content to wrap 1 word per line:
   *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
   */
  
  .sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    /* 1 */
  }
  
  /*
   * Extends the .sr-only class to allow the element
   * to be focusable when navigated to via the keyboard:
   * https://www.drupal.org/node/897638
   */
  
  .sr-only.focusable:active,
  .sr-only.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    white-space: inherit;
    width: auto;
  }
  
  /*
   * Hide visually and from screen readers, but maintain layout
   */
  
  .invisible {
    visibility: hidden;
  }
  
  /*
   * Clearfix: contain floats
   *
   * For modern browsers
   * 1. The space content is one way to avoid an Opera bug when the
   *    `contenteditable` attribute is included anywhere else in the document.
   *    Otherwise it causes space to appear at the top and bottom of elements
   *    that receive the `clearfix` class.
   * 2. The use of `table` rather than `block` is only necessary if using
   *    `:before` to contain the top-margins of child elements.
   */
  
  .clearfix::before,
  .clearfix::after {
    content: " ";
    display: table;
  }
  
  .clearfix::after {
    clear: both;
  }
  
  /* ==========================================================================
     EXAMPLE Media Queries for Responsive Design.
     These examples override the primary ('mobile first') styles.
     Modify as content requires.
     ========================================================================== */
  
  @media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
  }
  
  @media print,
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-resolution: 1.25dppx),
    (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
  }
  
  /* ==========================================================================
     Print styles.
     Inlined to avoid the additional HTTP request:
     https://www.phpied.com/delay-loading-your-print-css/
     ========================================================================== */
  
  @media print {
    *,
    *::before,
    *::after {
      background: #fff !important;
      color: #000 !important;
      /* Black prints faster */
      box-shadow: none !important;
      text-shadow: none !important;
    }
  
    a,
    a:visited {
      text-decoration: underline;
    }
  
    a[href]::after {
      content: " (" attr(href) ")";
    }
  
    abbr[title]::after {
      content: " (" attr(title) ")";
    }
  
    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
    a[href^="#"]::after,
    a[href^="javascript:"]::after {
      content: "";
    }
  
    pre {
      white-space: pre-wrap !important;
    }
  
    pre,
    blockquote {
      border: 1px solid #999;
      page-break-inside: avoid;
    }
  
    /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
    thead {
      display: table-header-group;
    }
  
    tr,
    img {
      page-break-inside: avoid;
    }
  
    p,
    h2,
    h3 {
      orphans: 3;
      widows: 3;
    }
  
    h2,
    h3 {
      page-break-after: avoid;
    }
  }
  
  /*--------------------------------------------------------------
  ### #### Fonts ### ####
  --------------------------------------------------------------*/
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*--------------------------------------------------------------
### #### General style ### ####
--------------------------------------------------------------*/
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
:root {
  --black: #4F4F4F;
  --gray: #828282;
  --red: #143DDA;
  --dred: #0F2A99;
  --nred: #FB0D1B;
  --ngreen: #1CB762;
  --blue: #1A44D6;

  --shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
/*
  var(--black);
  font-family: 'Inter', sans-serif;
*/
html {
  scroll-behavior: smooth;
}
body {
  overflow-x: hidden;
  font-family: 'Inter', sans-serif;
  margin-bottom: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  color: var(--black);
}
a, a:visited, a:active, p, button, input {
  font-family: 'Inter', sans-serif;
  color: var(--black);
}
.w960 {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}
.w1180 {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}
.w1180imp {
  max-width: 1180px!important;
  width: 100%;
  margin: 0 auto;
}
.w1380 {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}
.w1440 {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}
.w1640 {
  max-width: 1640px;
  width: 100%;
  margin: 0 auto;
}
.cnt {
  text-align: center!important;
}
.rgt {
  text-align: right;
}
.lft {
  text-align: left;
}
.np {
  padding-left: 0;
  padding-right: 0;
}
figure {
  margin: 0; padding: 0;
  display: inline-block;
}
nav {
  margin: 0; padding: 0;
}
.mp{
  margin: 0; padding: 0;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: var(--red);
  border-radius: 10px;
  transition: background .12s ease-in;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gray);
}
::-moz-selection {
  color: #fff;
  background: var(--red);
}
::selection {
  color: #fff;
  background: var(--red);
}
.bold {
  font-weight: 700;
}
.mt20 {
  margin-top: 30px;
}
.mt30 {
  margin-top: 30px;
}
.mt40 {
  margin-top: 40px;
}
.rel {
  position: relative;
}
.mob-non {
  display: none;
}
@media only screen and (max-width: 768px) {
  .mob-non {
    display: block;
  }
  .mob-np {
    padding-left: 0;
    padding-right: 0;
  }
  .mob-cnt {
    text-align: center
  }
  .mob-mt0 {
    margin-top: 0;
  }
  .mob-mt30 {
    margin-top: 30px;
  }
  .mob-w50 {
    -ms-flex: 0 0 50%;
      flex: 0 0 50%;
      max-width: 50%;
  }
}
  
/*--------------------------------------------------------------

--------------------------------------------------------------*/

/**
*
* Header
*
**/
header#Header {
  position: relative;
  z-index: 10;
  background-color: #fff;
}
div.w1380 {
  max-width: 1380px;
  width: 100%;
  margin: 0 auto;
}

  /** header logo **/
div.box-logo {
  position: absolute;
  left: 0; top: 10px;
  z-index: 10;
}
div.box-logo-login {
  position: relative;
  padding: 15px 0;
}
figure.fig-logo {
  position: relative;
}
img.img-logo {
  max-width: 150px;
  width: 100%;
  max-height:65px;
}
.isLogged figure.fig-logo{
  margin-top:15px;
}
  /** header login logo qatar **/
div.box-logo-login-q {
  display: none;
  position: absolute;
  right: 0; top: 10px;
}
figure.fig-logo-login-q {
  position: relative;
}
img.img-logo-login-q {
  max-width: 120px;
  width: 100%;
}


  /** header nav **/
div.box-nav-h,
nav.nav-h {
  position: relative;
  display: inline-block;
}
ul.ul-h {
  margin: 0; padding: 0;
}
ul.ul-h li {
  display: inline-block;  
}
a.a-h,
a.a-h:active,
a.a-h:visited {
  position: relative;
  display: inline-block;
  padding: 15px 10px;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;  
  margin:0 20px;
  color: #000000;
  border-bottom: 2px solid transparent;

  transition: border-color .3s ease-in-out;
}
a.a-h:focus,
a.a-h:hover,
a.a-h.active {
  text-decoration: none;
  color: var(--nred);
  border-color: var(--nred);
}
a.a-h:focus img,
a.a-h:hover img,
a.a-h.active img {
  display:none;
}
a.a-h:focus img.acti,
a.a-h:hover img.acti,
a.a-h.active img.acti {
  display:initial!important;
}
figure.fig-h {  
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 10px;
  border:1px solid transparent;
  border-radius:50%;
  width:48px;
  height:48px;
  margin:0 auto;
}

a.a-h:hover figure.fig-h{
  border:1px solid var(--nred);
}

.a-h.active figure.fig-h { 
  border:1px solid var(--nred);
}
img.img-h {
  max-width: 28px;
  width: 100%; 
  margin-top:9px; 
}

  /** header side menu side **/
div.box-h-menu {
  position: absolute;
  right: 0; top: 10px;
}
figure.fig-h-menu {
  position: relative;
  margin-right: 10px;
}
img.img-h-menu {
  max-width: 105px;
  width: 100%;
}

  /** header side menu content **/
.no-scroll {
	overflow: hidden;
}
section.sec-side-menu {
  display: none;
  position: absolute;
  z-index: 1;
  right: -15px; top: 86px;
  width: 250px;

  padding: 40px 15px;
  background-color: #fff;
  border-radius: 0 0 10px 10px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);  

  will-change: transform;
  transform: translateY(-120%);
  transition: transform .3s ease-out;
}
ul.ul-side-menu {
  margin: 0; padding: 0;
  text-align: left;
}
ul.ul-side-menu li {
  display: block;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
a.a-side-menu,
a.a-side-menu:active,
a.a-side-menu:visited {
  display: inline-block;
  padding: 10px 5px;
  font-size: 15px;
  line-height: 25px;
  color: var(--black);

  transition: color 0.3s ease-in-out;
}
a.a-side-menu:hover,
a.a-side-menu:focus {
  text-decoration: none;
  color: var(--red);
}
div.box-side-menu-logo {
  position: relative;
  margin-top: 40px;
  text-align: center;
}
figure.fig-side-menu-logo {
  position: relative;
}
img.img-side-menu-logo {
  max-width: 200px;
  width: 100%;
}

  /** header side menu content show **/
section.sec-side-menu-sh {
  display: block!important;
  -webkit-animation-name: menu-sh;
          animation-name: menu-sh;
  -webkit-animation-duration: .5s;
          animation-duration: .5s;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
	-webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
	     -o-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
	        transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
@-webkit-keyframes menu-sh {
  from {
		opacity: 0;
		-webkit-transform: translateY(20px);
		        transform: translateY(20px);
	}
  to {
		opacity: 1;
		-webkit-transform: translateY(0);
		        transform: translateY(0);
	}
}
div.bg-ov {
  display: none;
  position: fixed;
  z-index: 5;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.37);
}

  /** Hamburger **/
div.mob-box-menu {
  position: relative;
  display: inline-block;
  border-left: 1px solid var(--red);
}
.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.hamRotate.active {
  transform: rotate(45deg);
}
.hamRotate180.active {
  transform: rotate(180deg);
}
.line {
	fill:none;
	transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
	stroke: var(--red);
	stroke-width:5.5;
	stroke-linecap:round;
}
.line-color {
	stroke:#fff!important;
}
.ham-h .top {
	stroke-dasharray: 40 139;
}
.ham-h .bottom {
	stroke-dasharray: 40 180;
}
.ham-h.active .top {
	stroke-dashoffset: -98px;
}
.ham-h.active .bottom {
 stroke-dashoffset: -138px;
}
	/** end mobile hamburger **/

/*
:root {
  --black: #4F4F4F;
  --gray: #828282;
  --red: #B81A54;
  --dred: #5D0E2B;

  --shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
*/


/**
*
* Main
*
**/
main#Main {
  position: relative;
  padding: 40px 0;
  background-color: #f2f2f2;
  min-height: calc(100vh - 181px);
}
div.w1280 {
  position: relative;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}
div.page-content {
  position: relative;
}
div.col-conent {
  position: relative;
  float: left;
  width: calc(100% - 340px);
}
div.col-sd {
  position: relative;
  padding-right: 15px;
  float: left;
  width: 340px;
}
div.row-page {
  position: relative;
  margin-top: 30px;
}
h2.h2-page {
  position: relative;
  margin: 0; padding: 0 0 0 40px;
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  color: var(--red);
  
}
h2.h2-page::before {
  content: '';
  background-image: url('../img/home/icon-typ.png');
  width: 28px; height: 28px;
  background-size: 28px;
  display: inline-block;

  position: absolute;
  left: 0; top: -5px;
}
main.tabele h2.h2-page::before {
  background-image: url('../img/_global/nav/head/iconh1.png');
}
main.rankingi h2.h2-page::before {
  background-image: url('../img/_global/nav/head/iconh3.png');
}
main.zasady h2.h2-page::before {
  background-image: url('../img/_global/nav/head/iconh4.png');
}
h2.h2-page-kon::before {
  background-image: url('../img/home/icon-mail.png');

}
div.box-main {
  padding: 40px 30px;
  /*background-image: url('../img/_global/bg-main.jpg');
  background-size: auto;
  background-position: center top;
  background-repeat: repeat-y;*/
  background:var(--red);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

/**
*
* SIDEBAR
*
**/
div.box-sd {
  position: relative;
}
div.box-sd-content {
  position: relative;
  margin-bottom: 30px;
  padding: 25px 15px;
  background-color: #fff;
  box-shadow: var(--shadow);
  border-radius: 10px;
}

  /** sidebar avatar **/
div.box-sd-av {
  position: relative;
  text-align: center;
}
figure.fig-sd-av {
  position: relative;
  margin: 0 0 20px 0;
}
img.img-sd-av {
  max-width: 75px;
  width: 100%;
}
h3.h3-av {
  margin: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 35px;
}
p.p-av {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: var(--gray);
}

  /** sidebar avatar ranking **/
div.box-sd-av-ran {
  position: relative;
  margin: 20px 0 0 0;
}
div.col-sd-av-ran {
  position: relative;
  float: left;
  width: 50%;
  padding: 0 7px;
}
div.col-sd-av-ran-content {
  position: relative;
  max-width: 200px;
  width: 100%;
  min-height: 120px;
  margin: 0 auto;
  padding: 20px 15px;

  text-align: center;
  background: #fff;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}
h4.h4-sd-av-ran {
  margin: 0 0 10px 0;
  font-weight: 700;
  font-size: 32px;
  line-height: 39px;
  color: var(--red);
}
p.p-sd-av-ran {
  margin: 0;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  color: var(--gray);
}

  /** sidebar progress bar **/
div.box-sd-av-progress {
  position: relative;
  margin: 30px 0;
}
div.box-sd-av-progress label {
  display: block;
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px; 
  color: var(--gray);
  float:left;
}
div#Ranga {
  position: relative;
  margin: 5px 0 0 0;
  width: 100%; height: 8px;
  background-color: #000000;
  border-radius: 32px;
  overflow: hidden;
}
div.progress {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  background-color: var(--red);
  border-radius: 32px;
}
p.p-sd-av-prog {  
  position: relative;
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--gray);
  float:right;
}
h5.h5-sd-av-owl {
  margin: 0 0 15px 0;
  font-weight: 700;
  font-size: 24px;
  line-height: 29px;
}
p.p-sd-av-owl {
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
}

  /** sidebar owl **/
div.box-sd-av-owl {
  position: relative;
}
div.owl-sd .item {
  margin: 10px 3px;
}
div.owl-sd .owl-dots {
	position: relative;
  margin: 30px 0 0 0;
}
div.owl-sd .owl-dots button.owl-dot.active span  {
	background-color: var(--red);
}
div.owl-sd .owl-dots button.owl-dot span  {	
	background-color: #d9d9d9;
}
div.owl-sd .owl-dots button:focus {
		outline: none;
}

  /** sidebar ranking **/
div.box-sd-rank {
  position: relative;
}
div.box-sd-rank-title {
  position: relative;
  margin: 0 0 30px 0;
}
h4.h4-sd-rank {
  position: relative;
  margin: 0 0 15px 0; padding: 0 0 0 40px;
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  color: var(--red);
}
h4.h4-sd-rank::before {
  content: '';
  background-image: url('../img/sidebar/icon-sd-rank.png');
  width: 24px; height: 24px;
  background-size: 24px;
  display: inline-block;

  position: absolute;
  left: 0; top: 0;
}
p.p-sd-rank {
  margin: 0;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  color: #000000;
}

  /** sidebar ranking content **/
div.box-sd-rank-conent {
  position: relative;
  margin-top: 30px;
}
div.item-sd-rank {
  position: relative;
  margin-bottom: 5px;

  background-color: #fff;
  border-radius: 16px;

  transition: background-color .3s ease-in-out;
}
div.item-sd-rank:not(div.item-sd-rank-title div.col-sd-rank-a):not(div.item-sd-rank-title div.col-sd-rank-b):not(div.item-sd-rank-title div.col-sd-rank-c):hover,
div.item-sd-rank:not(div.item-sd-rank-title div.col-sd-rank-a):not(div.item-sd-rank-title div.col-sd-rank-b):not(div.item-sd-rank-title div.col-sd-rank-c):focus {
  cursor: pointer;
  background-color: rgba(0,0,0,.02);
}
div.col-sd-rank  {
  position: relative;
  margin: 5px 0;
  padding: 0 5px;
  float: left;
  height: 38px;
}
div.col-sd-rank-a {
  width: 50px;
  text-align: center;
  border-right: 1px solid #E0E0E0;
}
div.col-sd-rank-b {
  width: calc(100% - 100px);
}
div.col-sd-rank-c {
  width: 50px;
  text-align: center;
  border-left: 1px solid #E0E0E0;
}
div.item-sd-rank-title div.col-sd-rank-a,
div.item-sd-rank-title div.col-sd-rank-b,
div.item-sd-rank-title div.col-sd-rank-c {
  border: none;
  background-color: #fff;
  border-bottom: 1px solid #E0E0E0;
}
div.item-sd-rank-break div.col-sd-rank-a,
div.item-sd-rank-break div.col-sd-rank-c {
  border: none;
}
div.item-sd-rank-break div.col-sd-rank-a {
  text-align: right;
}
figure.fig-sd-rank-dots {
  position: relative;
  right: -6px;
}
p.p-sd-rank-nr {
  margin: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 22px;

  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color:var(--red);

  width: 90%;
  overflow: hidden;
  white-space:nowrap;
  text-overflow: ellipsis;
}
p.p-sd-rank-pkt {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color:#000000;
  position: absolute;
  width: 95%;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
p.p-sd-rank-pkt span {  
  display: block;
  overflow: hidden;
  white-space:nowrap;
  text-overflow: ellipsis;
}
figure.fig-sd-rank {
  position: absolute;
  left: 5px; top: 50%;
  transform: translate(0, -50%);
  display: inline-block;  
}
img.img-sd-rank {
  max-width: 24px;
  width: 100%;
  border-radius: 50%;
}
p.p-sd-rank-name {
  display: inline-block;
  margin: 0; padding: 0 0 0 36px;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color:#000;

  width: 100%;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
p.p-sd-rank-name span {
  display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
figure.fig-sd-rank-dots {
  position: absolute;
  right: 0; top: 50%;
  transform: translate(0, -50%);
}

  /** sidebar ranking ty **/
div.item-sd-rank.item-sd-rank-ty {
  background-color: var(--green);
}
div.item-sd-rank.item-sd-rank-ty p.p-sd-rank-nr,
div.item-sd-rank.item-sd-rank-ty p.p-sd-rank-name,
div.item-sd-rank.item-sd-rank-ty p.p-sd-rank-pkt {
  color: #fff;
}
div.item-sd-rank.item-sd-rank-ty:hover,
div.item-sd-rank.item-sd-rank-ty:focus {
  background-color: var(--green);
}
div.item-sd-rank.item-sd-rank-break:hover,
div.item-sd-rank.item-sd-rank-break:focus {
  background-color: #fff;
}
div.item-sd-rank.item-sd-rank-ty:hover,
div.item-sd-rank.item-sd-rank-ty:focus {
  cursor: pointer;
  background-color: rgba(40, 167, 69,.8)!important;
}

  /** sidebar modal ranking **/
div.mod-box.mod-ranking {
  z-index: 99999;
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
}
div.box-modal-user {
  position: relative;
}
div.box-modal-user div.box-sd-content {
  margin: 0;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
}
div.modal-body-rank {
  background-image: url('../img/home/bg-modal.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
div.bg-modal-sd {
  display: none;
}
@media only screen and (max-width: 860px) {
  /* div#RankingOsoba.show::before {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
  } */
  body.modal-open div.box-sd-content:not(div.modal div.box-sd-content)::before {
    content: '';
    position: absolute;
    z-index: 10;
    left: 0; bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
  }
  body.modal-open div.bg-modal-sd {
    position: absolute;
    z-index: 10;
    left: 0;  bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
  }
}

/**
*
* HOME
*
**/
figure.fig-banner {
  position: relative;  
}
img.img-banner {
  max-width: 100%;
  width: 100%;
  border-radius: 10px;
  box-shadow: var(--shadow);
}

/**
*
* Footer
*
**/
footer#Footer {
  position: relative;
  padding: 20px 0;
  /* background-color: #0F2A99; */
  background-color: #fff;
}
body.notlogged footer#Footer{
  background-color: #fff;
}
figure.fig-f {
  position: relative;
}
img.img-f {
  max-width: 130px;
  width: 100%;
}
p.p-f{
  position: relative;
  top: 5px;
  display: inline-block;
  margin: 0 0 0 20px;
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;  
  /* color: #F2F2F2; */
  color: #4F4F4F;
}
body.notlogged p.p-f {
  color:#4F4F4F;
}
ul.ul-f {
  margin: 18px 0 0 0; padding: 0;
}
ul.ul-f li {
  display: inline-block;
  padding-left: 10px;
}
a.a-f,
a.a-f:active,
a.a-f:visited {
  display: inline-block;
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;  

  transition: color .3s ease-in-out;
  /* color: #F2F2F2; */
  color: #4F4F4F;
}
body.notlogged p.p-f {
  color:#4F4F4F;
}
a.a-f:focus,
a.a-f:hover {
  text-decoration: none;
  /* color: rgba(255,255,255,.5); */
  color: var(--blue);
}

/** subpage login **/
main#MainLogin {
  position: relative;
  padding: 40px 0 0 0;
  /* background-color: var(--red); */

  background-image: url('../img/login/bg-login.jpg');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  min-height: calc(100vh - 176px);
}
section.sec-login {
  position: relative;
  padding: 40px 0 80px 0;
  min-height: calc(100vh - 176px);
  overflow: hidden;
}
figure.fig-login-abs {
  position: absolute;
  z-index: 2;
  left: 0px; bottom: 10px;
}
img.img-login-abs {
  max-width: 550px;
  width: 100%;
}
figure.fig-login-abs-b {
  position: absolute;
  right: 0px; bottom: -95px;
}
figure.fig-login-abs-d {
  display: none;
}
div.bg-login-mark {
  display: none;
}
img.img-login-abs-b {
  max-width: 550px;
  width: 100%;
}
div.w460 {
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
}
div.box-login {
  position: relative;
}
div.box-login-logo {
  position: relative;
  margin: 0 0 30px 0;
  text-align: center;
}
figure.fig-login {
  position: relative;
}
img.img-login {
  /*max-width: 160px;
  width: 100%;*/
  margin-bottom:20px;
}
img.login-soccer{
  margin-left:-50px;
}
div.box-login-f {
  position: relative;
  max-width: 460px;
  width: 100%;
  margin: 0 auto;

  z-index: 5;
  padding: 40px 50px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow);
}
div.box-register-typ{
	max-width:550px!important;
}
div.box-login-f-title {
  position: relative;
  margin: 0 0 20px 0;
  text-align: center;
}
h1.h1-login-f {
  margin: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--blue);
}

  /** login form link **/
div.box-f-link {
  position: relative;
  margin: 10px 0 0 0;
}
div.col-f-link {
  position: relative;
  text-align: center;
}
a.a-f-link,
a.a-f-link:active,
a.a-f-link:visited {
  display: inline-block;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: var(--gray);

  transition: color .3s ease-in-out;
}
a.a-f-link:hover,
a.a-f-link:focus {
  text-decoration: none;
  color: var(--red);
}

  /** input error **/
div.box-f-error {
  position: relative;
  text-align: center;
}
p.p-f-error {
  margin: 0;
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
  color: #EB5757;
}

  /** input style img **/
div.box-f-img {
  margin: 0;
  position: absolute;
  left: 15px;  top: 50%;
  z-index: 2;
  border-right: 1px solid #E0E0E0; 
  height: 60%;
  padding-right: 10px;
  
  transform: translate(0, -50%);
}
input.form-login {
  padding-left: 50px;
}
form.form-kon input.form-login,
form.form-kon textarea {
  padding-left: 15px;
}
div.box-f-img img.img-f {
  max-width: 20px;
  width: 100%;
}

  /** form style normal **/
div.box-f-input label {
  margin: 0 0 5px 0;
  font-weight: 400;
  font-size: 13px;
  line-height: 22px;
  color: #6C757D;
}
div.box-form-error input.form-login {
  border-color: var(--red);
}
p.p-form-error {
  margin: 5px 0 0 0;
  font-weight: 400;
 font-size: 13px;
 line-height: 22px;
 color: var(--red);
}
input[type="file"] {
  padding: 0;
  border: none;
}
ul.ul-file {
  margin: 10px 0; padding: 0;
}
ul.ul-file li {
  display: block;
  text-align: left;
}
p.p-kon-file {
  position: relative;
  margin: 0 0 5px 0;
  padding: 0 0 0 15px;
  font-weight: 700;
  font-size: 13px;
  line-height: 22px;
  color: #535353;
}
p.p-kon-file::before {
  content: '•';
  position: absolute;
  left: 0; top: 1px;
}
div.box-form-footer {
  display: block;
  width: 100%;
  position: relative;  
  margin: 30px 0 0 0;
  text-align: center;
}
p.p-form-error-def {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0 0 0 30px;
  font-weight: 700;
  font-size: 13px;
  line-height: 22px;
}
p.p-form-error-def::before {
  content: '';  
  width: 25px; height: 25px;
  background-size: 25px 25px;
  display: inline-block;
  background-repeat: no-repeat;

  position: absolute;
  left: 0; top: 0;
}
p.p-form-error-def::before {
  background-image: url('../img/home/icon-error.png');
}
p.p-form-mss {
  color: var(--red);
}
p.p-form-success {
  color: var(--green);
}
p.p-form-success::before {
  background-image: url('../img/home/icon-okok.png');
}

  /** input style **/
div.box-f-input {
  position: relative;
  margin: 0 0 15px 0;
}
input.form-custom,
textarea.form-custom,
select.form-custom {
  position: relative;
  border: none;
  border: 2px solid #c7C7C7;  
  height: 50px;
  background-color: #fff;
  border-radius: 10px;
}
textarea.form-custom {
  height: 100px;
}
input.form-custom:focus,
textarea.form-custom:focus,
select.form-custom:focus  {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  background-color: transparent;
  border-color: var(--green);
}
input.form-custom::-webkit-input-placeholder,
textarea.form-custom:-webkit-input-placeholder {
  font-weight: 500;
  line-height: 15px;
  color: #F2F2F2;
  background-color: transparent;
}
input.form-custom::-moz-placeholder,
textarea.form-custom::-moz-placeholder {
  font-weight: 500;
  line-height: 15px;
  color: var(--gray);
  background-color: transparent;
}
input.form-custom:-ms-input-placeholder,
textarea.form-custom:-ms-input-placeholder {
  font-weight: 500;
  line-height: 15px;
  color: var(--gray);
  background-color: transparent;
}
input.form-custom::-ms-input-placeholder {
  font-weight: 500;
  line-height: 15px;
  color: var(--gray);
  background-color: transparent;
}
input.form-custom::placeholder,
textarea.form-custom::placeholder {
  font-weight: 500;
  line-height: 15px;
  color: var(--gray);
  background-color: transparent;
}

  /** recovery form **/
div.box-f-input-title {
  position: relative;
  margin: 15px 0 20px 0;
  text-align: center;
}
p.p-f-recover {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--black);
}
div.box-f-form-suc {
  position: relative;
  margin: 10px 0 10px 0;
  text-align: center;
}
figure.fig-form-suc {
  display: block;
}
img.img-form-suc {
  max-width: 50px;
  width: 100%;
}

  /** login submit **/
div.box-f-submit {
  position: relative;
  margin: 20px 0 0 0;
  text-align: center;
}
button.btn-submit,
button.btn-submit:active,
button.btn-submit:visited {
  padding: 10px;
  width: 100%;
  color: #fff;
  background-color: var(--blue);
  border: 2px solid var(--blue);     
  border-radius: 10px;
  
  -webkit-transition: color .3s ease-in-out, background-color .3s ease-in-out;
  -o-transition: color .3s ease-in-out, background-color .3s ease-in-out;
  transition: color .3s ease-in-out, background-color .3s ease-in-out;
}
button.btn-submit:focus,
button.btn-submit:hover {
  text-decoration: none;
  color: var(--red);
  background-color: transparent;  
}

/* SP - Zasady */
div.box-main-ins {
  padding: 38px 53px;
  background: #FFFFFF;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}

p.p-txt {
  color: var(--black);
}
p.p-red {
  color: var(--red);
  font-weight: bold;
  margin-bottom: 25px;
  margin-top: 40px;
}

ul.ul-txt {
  padding-left: 15px;
}

.mt-30 {
  margin-top: 30px;
}

/* Typowanie wyników */
div.box-typ-wyn {
  background: #FFFFFF;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  margin-bottom: 20px;
}

div.tw-head {
  padding: 10px 15px;
}

figure.fig-twh-lft-ico {
  display: inline-block;
}
figure.fig-twh-lft-ico:hover {
  cursor: pointer;
}

p.p-twh-lft {
  display: inline-block;
  font-weight: 400;
  font-size: 14px;
  line-height: 15px;
  text-align: center;
  color: #000000;
  margin-left: 15px;
  margin-bottom: 0px;
  transition: .3s ease-in-out color;
}

p.p-twh-lft:hover {
  cursor: pointer;
  color: var(--gray);
}

div.twh-rgt {
  text-align: right;
}
p.p-twh-rgt {
  display: inline-block;
  font-weight: 400;
  font-size: 14px;
  line-height: 15px;
  text-align: center;
  color: #000000;
  margin-right: 15px;
  margin-bottom: 0px;
}

p.p-twh-rgt:hover {
  cursor: pointer;
  color: var(--gray);
}

figure.fig-twh-rgt-ico {
  display: inline-block;
}
figure.fig-twh-rgt-ico:hover {
  cursor: pointer;
}


p.p-twh-cnt {
  font-weight: 700;
  font-size: 14px;
  line-height: 17px;
  text-align: center;
  color: #828282;
  margin-bottom: 0;
  margin-top: 4px;
}

img.img-wyn-zap {
  margin-left: 7px;
}
p.p-twc-green {
  color: var(--green);
}

p.p-twc-red {
  color: var(--red);
}

div.twh-lft {
  width: 33.333333%;
  float: left;
}

div.twh-cnt {
  width: 33.333333%;
  float: left;
}
div.twh-rgt {
  width: 33.333333%;
  float: left;
}

p.p-twh-time {
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  text-align: center;
  color: #000000;
  margin-top: 12px;
}

p.p-twh-time span {
  color: var(--red);
}

div.box-typ-content {
  background: #F8F8F8;
  padding: 10px 15px;
  border-bottom: 1px solid var(--red);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  min-height: 130px;
}

p.p-twc-tt {
  font-weight: 700;
  font-size: 12px;
  line-height: 15px;
  color: var(--red);
  text-align: center;
}

div.twc-lft-flag {
  /*width: 165px;*/
  width: 210px;
  text-align: center;
  float: right;
  position:relative;
}
div.twc-rgt-flag {
  /*width: 165px;*/
  width: 200px;
  text-align: center;
  margin-left: 8px;
  position:relative;
}

div.twc-lft {
  width: 50%;
  float: left;
  text-align: right;
  position: relative;
  min-height: 80px;
}
.modal-body-szczegoly div.twc-lft{
	min-height:85px;
}

div.twc-lft::after {
  content: ':';
  position: absolute;
  font-size: 44px;
  right: -5px;
  top: -9px;
  color: var(--gray);
}

div.twc-rgt {
  width: 50%;
  float: left;
  min-height: 80px;
}

.modal-body-szczegoly div.twc-rgt{
	min-height:85px;
}

div.box-lft-flag {
  float: left;
  position: absolute;
  left: 0;
  width: 100px;
}
div.box-rgt-flag {
  float: right;
  position: absolute;
  right: 0;
  width: 100px;
}
input.inp-twc-lft {
  padding: 0 0 0 12px;
  width: 55px;
  height: 55px;
  border-radius: 10px;
  background: #FFFFFF;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
  /*float: left;*/
  float: right;
  /*margin-left: 25px;*/
  margin-right: 35px;
  border: 1px;
  color: #4F4F4F;
  font-size: 32px;
  font-weight: 700;
  text-align: center;

  border: 2px solid #fff;
  transition: border-color .3s ease-in-out;
}
input.inp-twc-rgt {
  padding: 0 0 0 12px;
  width: 55px;
  height: 55px;
  border-radius: 10px;
  background: #FFFFFF;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
  /*float: right;*/
  float: left;
  /*margin-right: 25px;*/
  margin-left: 25px;
  border: 1px;
  color: #4F4F4F;
  font-size: 32px;
  font-weight: 700;
  text-align: center;

  border: 2px solid #fff;
  transition: border-color .3s ease-in-out;
}

.mod-szcz-mecz input.inp-twc-lft,
.mod-szcz-mecz input.inp-twc-rgt{
	padding: 0 0 0 0px;
}
input.inp-twc-lft:hover,
input.inp-twc-lft:focus,
input.inp-twc-rgt:hover,
input.inp-twc-rgt:focus {
  cursor: pointer;
  border-color: var(--green);
}
p.p-twc-flag {
  font-weight: 700;
  font-size: 15px;
  line-height: 16px;
  margin-top: 8px;
  margin-bottom: 15px;
  /*text-align: right;*/
  text-align: center;
  color: var(--red);
}

div.box-typ-foot {
  background: #F8F8F8;
  padding: 10px 15px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  position: relative;
}

figure.fig-wyn-pkt {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
p.p-btf-tm {
  font-weight: 400;
  font-size: 14px;
  line-height: 15px;
  color: #000000;
  text-align: center;;
  }

  div.bbtf-wyn-lft{
    width: 50%;
    float: left;
    text-align: right;
    position: relative;
  }
  
  div.bbtf-wyn-lft::after {
    content: ':';
    position: absolute;
    font-size: 26px;
    right: -4px;
    top: -7px;
    color: var(--gray);
  }
  
  div.bbtf-wyn-rgt {
    width: 50%;
    float: left;
  }

  input.inp-bbtf-lft {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
    float: right;
    margin-right: 10px;
    border: 1px;
    color: #4F4F4F;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
  }
  input.inp-bbtf-rgt {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
    float: left;
    margin-left: 10px;
    border: 1px;
    color: #4F4F4F;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
  }

  /* -- statystyki */
  div.box-tfb-stat {
    padding: 8px 20px;
  }
  a.a-tfb-stat,
  a.a-tfb-stat:active,
  a.a-tfb-stat:visited {
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #000000;
  }

  a.a-tfb-stat:hover,
  a.a-tfb-stat:focus {
    color: var(--black);
    text-decoration: none;
  }

  figure.fig-arr-col {
    margin-left: 10px;
  }

  a.a-tfb-stat img.img-arr-col {
    transition: .3s ease-in-out transform;
  }

  a.a-tfb-stat[aria-expanded="true"] img.img-arr-col {
    transform: rotate(180deg);
  }
  div.box-stat {
    position: relative;
    padding: 0 15px;
  }
  
  /* div.bstat-lft {
    position: relative;
    padding: 15px 20px;
    width: 33.333333%;
    float: left;
  }

  div.bstat-cnt {
    padding: 15px 20px;
    width: 33.333333%; height: 100%;
    float: left;
    text-align: center;
  }

  div.bstat-rgt {
    position: relative;
    padding: 15px 20px;
    width: 33.333333%; height: 100%;
    float: left;
    text-align: right;
  } */
  p.p-bstat {
    position: relative;
    z-index: 2;
    font-size: 15px;
    margin-bottom: 0;
    color: #4F4F4F;
  }
  div.box-stat-main {
    position: relative;
  }
  div.col-stat {
    position: relative;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  } 
  div.col-stat-cnt {    
    padding: 15px 20px;
  }
  div.bstat {
    border-radius: 10px;
    margin-bottom: 10px;
    background: #E0E0E0;
  }
  div.bstat-progress-lft {
    position: absolute;
    right: 0; top: 0;
    height: 100%;
    padding: 15px 0 15px 20px;
    text-align: right;
    border-radius: 10px 0 0 10px;
  }
  div.bstat-progress-rgt {    
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    padding: 15px 20px 15px 0;
    text-align: left;
    border-radius: 0 10px 10px 0;
	min-width:40px;
  }
  div.bstat-green  div.col-stat-cnt,
  div.bstat-green  div.bstat-progress-lft,
  div.bstat-green  div.bstat-progress-rgt {
    background: #6FCF97;
  }
  div.bstat-yellow  div.col-stat-cnt,
  div.bstat-yellow  div.bstat-progress-lft,
  div.bstat-yellow  div.bstat-progress-rgt {
    background: #F2C94C;
  }
  div.bstat-red  div.col-stat-cnt,
  div.bstat-red  div.bstat-progress-lft,
  div.bstat-red  div.bstat-progress-rgt {
    background: #EB5757;
  }  
  div.bstat-green p.p-bstat,
  div.bstat-red p.p-bstat  {
    color: #fff;
  }
  div.box-stat-main-lft p.p-bstat {
    text-align: right;
  }
  div.box-stat-main-rgt p.p-bstat {
    text-align: left;
  }

  /* Modal Szczegóły meczu */
div.mod-box {
  width: 100%;
  max-width: 800px;
}

  p.p-twh-in-mod {
    display: inline-block;
    font-weight: 700;
    font-size: 14px;
    line-height: 15px;
    text-align: center;
    color: #828282;
    margin: 6px 0 0 15px;
  }
  div.mod-szcz-mecz {
    border-radius: 10px;
  }

  div.mod-szcz-mecz div.modal-body {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  div.mod-row {
    border-top: 1px solid #dee2e6;
    padding-top: 12px;
  }

  p.p-mod-a {
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    color: #828282;
  }

  p.p-mod-b {
    font-weight: 700;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    color: #4F4F4F;
  }

  p.p-mecz-stat {
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
  }

  p.pmstat-green {
    color: #27AE60;
  }

  p.p-mecz-stat span.sp-live {
    color: #f2f2f2;
    background: #B81A54;
    border-radius: 8px;
    display: inline-block;
    padding: 1px 10px 1px 16px;
    margin-left: 10px;
    font-size: 11px;
    font-weight: 700;
    position: relative;
  }

  p.p-mecz-stat span.sp-live::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #f2f2f2;
    display: block;
    position: absolute;
    border-radius: 50%;
    left: 6px;
    top: 6px;
  }
  @media only screen and (max-width: 840px) {
    div.mod-box,
    div.mod-box.mod-ranking {
      width: 100%;
      max-width: 460px;
    }
  }
  @media only screen and (max-width: 576px) {
    div.mod-box,
    div.mod-box.mod-ranking {
      width: 100%;
      max-width: 350px;
    }    
    div.modal-dialog {
      margin: 0 auto;
    }
  }

  @media only screen and (max-width: 670px) {
    p.p-twh-lft,
    p.p-twh-rgt {
      display: none;
    }

    div.twh-rgt,
    div.twh-lft {
      width: 35px;
    }
    div.twh-cnt {
      width: calc(100% - 70px);
    }
  }

  /** owl typowanie **/
div.owl-typ {
  position: relative;
  padding: 0 15px;
}
div.owl-typ .item  {
  padding-top: 20px;
  padding-bottom: 20px;
}
button.btn-sel,
button.btn-sel:active,
button.btn-sel:visited {
  padding: 6px 10px;
  width: 100%;
  color: #fff;
  background-color: var(--red);
  border: 2px solid var(--red);     
  border-radius: 10px;
  font-size: 15px;
  
  -webkit-transition: color .3s ease-in-out, background-color .3s ease-in-out;
  -o-transition: color .3s ease-in-out, background-color .3s ease-in-out;
  transition: color .3s ease-in-out, background-color .3s ease-in-out;
}
button.btn-sel:focus,
button.btn-sel:hover {
  text-decoration: none;
  color: var(--red);
  background-color: transparent;  
}
select.form-sel {
  position: relative;
  border: none;
  border: 2px solid #F2F2F2;  
  height: 40px;
  background-color: #F2F2F2;
  border-radius: 10px;
}
select.form-custom {
  height: 100px;
}
select.form-sel:focus {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  background-color: transparent;
  border-color: var(--green);
}
select.form-sel::-webkit-input-placeholder {
  font-weight: 500;
  line-height: 15px;
  color: #F2F2F2;
  background-color: transparent;
}
select.form-sel::-moz-placeholder {
  font-weight: 500;
  line-height: 15px;
  color: var(--gray);
  background-color: transparent;
}
select.form-sel:-ms-input-placeholder {
  font-weight: 500;
  line-height: 15px;
  color: var(--gray);
  background-color: transparent;
}
select.form-sel::-ms-input-placeholder {
  font-weight: 500;
  line-height: 15px;
  color: var(--gray);
  background-color: transparent;
}
select.form-sel::placeholder {
  font-weight: 500;
  line-height: 15px;
  color: var(--gray);
  background-color: transparent;
}
@media only screen and (max-width: 1080px) {
  div.owl-typ {
    padding: 0 0 0 15px;
  }
}

/** datatable **/
div.row.row-pag {
  position: relative;
  margin: 40px 0 0 0;
}
div.col-pag-w100 {
  text-align: left;
}
.page-item.active .page-link {
  font-size: 13px;
  background-color: var(--red);
  border-color: var(--red); 
}
.page-item.disabled .page-link {
  font-size: 13px;
  color: rgba(0,0,0,.3);
}
a.page-link,
a.page-link:active,
a.page-link:visited {
  font-size: 13px;
  color: var(--red);
  transition: background-color .3s ease-in-out;
}
a.page-link:hover,
a.page-link:focus {
  color: var(--red);
}
div.dataTables_wrapper div.dataTables_length label {
  font-size: 13px;
}
div.dataTables_wrapper div.dataTables_length select {
  margin: 0 5px;
}
th.th-sm {
  border-bottom: none;
}
td.td-szad {
  font-size: 15px;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: #fafafa;
}
div.row-tab {
  margin-top: 30px;
}
p.p-tab {
  margin: 0;
  font-weight: bold;
  font-size: 13px;
  color: #343A40;
}
p.p-tab-main {
  margin: 0;
  font-size: 13px;
  color: #6C757D;
}
figure.fig-wyn-up {
  position: relative;
}
table.table td {
  vertical-align: middle;
  text-align: left;
}
table.table th {
  text-align: left;
}
table.dataTable {
  max-width: 100%;
  width: 100%;
  margin: 0;
}
table.table th.th-w,
table.table td.td-w {
  max-width: 10px;
  width: 10px;
}
table.table thead th {
  border-bottom: none;
}
table.table td, .table th {
  padding: 15px 10px;
  vertical-align: top;
  border-top: 1px solid #eaeaea;
}
table.table td,
table.table th {
    padding: 15px 10px;
    vertical-align: top;
    border-top: 1px solid #eaeaea;
}
table.table td {
  vertical-align: middle;
  border-bottom: 1px solid #eaeaea;
}
table.table tr {
  transition: background-color .3s ease-in-out;
}
table.table tr:hover,
table.table tr:focus {
  background-color: rgba(0,0,0,.02);
}

  /** Datatable szukaj **/
div.dataTables_wrapper div.dataTables_filter input {
  position: relative;
  border: none;
  border: 2px solid #F2F2F2;  
  height: 40px;
  background-color: #F2F2F2;
  border-radius: 10px;
  font-size: 14px;
}
div.dataTables_wrapper div.dataTables_filter input::-webkit-input-placeholder {  
  font-weight: 500;
  line-height: 15px;
  color: #F2F2F2;
  background-color: transparent;
}
div.dataTables_wrapper div.dataTables_filter input::-moz-placeholder {
  font-weight: 500;
  line-height: 15px;
  color: var(--gray);
  background-color: transparent;
}
div.dataTables_wrapper div.dataTables_filter input:-ms-input-placeholder{
  font-weight: 500;
  line-height: 15px;
  color: var(--gray);
  background-color: transparent;
}
div.dataTables_wrapper div.dataTables_filter input::-ms-input-placeholder {
  font-weight: 500;
  line-height: 15px;
  color: var(--gray);
  background-color: transparent;
}
div.dataTables_wrapper div.dataTables_filter input::placeholder {
  font-weight: 500;
  line-height: 15px;
  color: var(--gray);
  background-color: transparent;
}
div.dataTables_wrapper div.dataTables_filter input:focus  {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  background-color: transparent;
  border-color: var(--green);
}

/** subpage ranking **/
p.p-tab-main {
  display: inline-block;
}
p.p-tab-rank {
  padding-right: 25px;
}
figure.fig-tab-icon {
  position: absolute;
  top: 50%;  right: 0;
  transform: translate(-50%, -50%);

  display: inline-block;
  margin: 0 0 0 5px;
}
img.img-tab-icon {
  max-width: 20px;
  width: 100%;
}
figure.fig-tab-icon-progress {
  position: absolute;
  top: 50%;  right: 0;
  transform: translate(-50%, -50%);

  display: inline-block;
  margin: 0 0 0 5px;
}
img.img-tab-icon-progress {
  max-width: 20px;
  width: 100%;
}
div.bg-progress {
  position: absolute;
  left: 0; top: 0;
  height: 100%;  
  border-radius: 3px;
}
div.box-progres {
  position: relative;
  padding: 15px 0;
}
div.col-progress {
  position: relative;
  padding: 0 5px;
}
div.col-progress-a {
  position: relative;
  padding: 0 5px;
  float: left;
  width: 50%;
}
div.col-progress-b {
  position: relative;
  padding: 0 10px;
  float: left;
  width: 50%;
  text-align: right;
}
p.p-progress {
  margin: 0;
  font-size: 13px;
  line-height: 15px;
  color: var(--black);
}
table.table td.td-np {
  padding: 0 5px;
}
div.box-ran-tab table.dataTable>thead>tr>th:not(.sorting_disabled),
div.box-ran-tab table.dataTable>thead>tr>td:not(.sorting_disabled) {
  padding-right: 5px;
  vertical-align: middle;
}
div.box-ran-tab table.dataTable>thead .sorting:after,
div.box-ran-tab table.dataTable>thead .sorting_asc:after,
div.box-ran-tab table.dataTable>thead .sorting_desc:after,
div.box-ran-tab table.dataTable>thead .sorting_asc_disabled:after,
div.box-ran-tab table.dataTable>thead .sorting_desc_disabled:after,

div.box-ran-tab table.dataTable>thead .sorting:before,
div.box-ran-tab table.dataTable>thead .sorting_asc:before,
div.box-ran-tab table.dataTable>thead .sorting_desc:before,
div.box-ran-tab table.dataTable>thead .sorting_asc_disabled:before,
div.box-ran-tab table.dataTable>thead .sorting_desc_disabled:before {
  display: none;
}
table#TabRanking th {
  background-color: rgba(0,0,0,.02);
}
table#TabRanking th,
table#TabRanking td {
  border-left: 1px solid #eaeaea;
  border-right: 1px solid #eaeaea;
}


/** ########################### MOBILE  ######################################## **/

/** mobile subpage login **/
@media only screen and (max-width: 1140px) {
  figure.fig-login-abs-b {
    display: none;
  }
  img.img-login-abs {
    max-width: 450px;
  }
}
@media only screen and (max-width: 768px) {
.col-stat-cnt .p-bstat{
	font-size:12px;
}
input.inp-twc-lft,
input.inp-twc-rgt {
	padding: 0 0 0 0px;
	}
div.twc-lft-flag{
	width:195px;
}
div.twc-rgt-flag{
	width:182px;
}
.box-reg-accept{
	margin-left:20px;
}
  div.box-logo-login-q {
    display: inline-block;
  }
  div.box-login-logo {
    display: none;
  }
  main#MainLogin {
    padding: 0;
  }
  section.sec-login {
    padding: 0 0 340px 0;
  }
  img.img-login-abs {
    max-width: 300px;
  }
  main#MainLogin div.w460 {
    max-width: 100%;
  }
  div.box-login-f {
    padding: 30px 20px;
    border-radius: 0;
    box-shadow: none;    
  }
  header.header-login {
    border-bottom: 1px solid #efefef;
  }
  img.img-logo {
    max-width: 50px;
	max-height:50px;
  }
  img.img-logo-login-q {
    max-width: 120px;
  }

  /** mobile login mark logo**/
  figure.fig-login-abs-d {
    display: block;
    position: absolute;
    z-index: 1;
    right: 15px; bottom: 80px;
  }
  img.img-login-abs-d {
    max-width: 200px;
    width: 100%;
  }

  /** mobile login mark bg **/
  div.bg-login-mark {
    display: block;
    position: absolute;
    z-index: 1;
    left: 0; bottom: -1px;
    width: 100%; height: 55px;

    background-image: url('../img/login/mark-login.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}
@media only screen and (max-width: 340px) {
  img.img-login-abs-d {
    max-width: 150px;
  }
}

/** mobile footer **/
@media only screen and (max-width: 768px) {
  figure.fig-f {
    display: block;
    margin: 0 auto 5px auto;
  }
  p.p-f {
    margin: 0;
  }
  ul.ul-f {
    margin: 5px 0 0 0;
  }
  ul.ul-f li {
    margin: 0 5px;
  }
}

  /** mobile header **/
svg.svg-ham {
  width: 55px;
}
section.mob-f-menu {
  display: none;
}
.col-sd-sh2{display:none!important;}
@media only screen and (max-width: 860px) {
  /** mobile header **/
  header#Header:not(header.header-login) {
    position: fixed;
    left: 0; top: 0;
    width: 100%;
    z-index: 1045;
  }
  header.fixed-menu {
    box-shadow: 0 14px 28px rgb(0 0 0 / 10%), 0 10px 10px rgb(0 0 0 / 1%);
  }
  main#Main {
    margin-top: 50px;
  }
  .typotime{
	  display:block;
  }
  .box-typ-content > .twc-mob2,
  .modal-body-szczegoly > .twc-mob3,
  .modal-body-jakinni > .twc-mob4,
  .twc-mob > *{
	  transform:scale(0.85);
  }
  .p-bstat-label{
	  margin-left:10px;
  }
  /*body.strglowna main#Main {
    margin-top: 125px;
  }*/

  /** mobile rest **/
  div.box-nav-h {
    display: none;
  }
  div.box-h-menu {
    position: relative;
    padding: 15px 0;
    right: auto; 
	top: auto;    
	float:right;
  }
  div.mob-rgt {
    text-align: right;
  }

    /** mobile content **/
  div.col-conent {
    float: none;
    width: 100%;
  }
  div.col-sd {
    position: fixed;
    right: 0; top: 75px;
    padding: 0 0 140px 0;
    z-index: 1045;
    float: none;
    width: 100%; height: 100vh;
    border-radius: 0;
    background-color: #fff;

    overflow-y: scroll;
    overflow-x: hidden;

    transform: translateY(100%);
    will-change: transform;
    transition: transform .5s ease-in-out;
  }
  div.col-sd::-webkit-scrollbar {
    width: 0;
  }
  div.box-sd-content {    
    margin: 0 auto;
    max-width: 460px;
    width: 100%;
    box-shadow: none;
	padding-bottom:60px;
  }
  div.col-sd-sh {
    transform: translateY(0);
  }
  div.col-sd-sh2 {
    transform: translateY(185px);
	display:block!important;
  }

    /** mobile sidebar profil **/
  figure.fig-sd-av {
    margin: 0 0 10px 0;
  }
  img.img.img-sd-av {
    max-width: 60px;
  }

    /** mobile footer menu **/
  section.mob-f-menu {
    display: block;
    position: fixed;
    left: 0; bottom: 0;
    z-index: 1045;
    width: 100%;
    background-color: #fff;
    box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.05);
  }
  div.menu-f {
    position: relative;
  }
  main#MainLogin section.mob-f-menu {
    display: none;
  } 
  div.col-f {
    position: relative;
    float: left;
    width: 25%;
    text-align: center;
  }
  div.col-f-rank {
    padding: 12px 0;
  }
  a.a-f-menu,
  a.a-f-menu:active,
  a.a-f-menu:visited,
  p.p-f-menu {
    display: block;
    margin: 0;
    font-size: 0;
    /*padding: 12px 0;*/
    padding: 5px 0;
    width: 100%;    
  }
  a.a-f-menu:hover,
  a.a-f-menu:focus {
    text-decoration: none;
  }
  figure.fig-f-menu {
    position: relative;
  }
  img.img-f-menu {
    max-width: 35px;
    width: 100%;
  }
  footer#Footer section.sec-f-main {
    padding: 0 0 50px 0;
  }
}
@media only screen and (max-width: 768px) {
  img.img-h-menu {
    max-width: 75px;
  }
  svg.svg-ham {
    width: 45px;
  }
  section.sec-side-menu {
    display: block;
    position: fixed;
    padding: 0 0 100px 0;
    right: 0; top: 76px;
    width: 100%; height: 100vh;
    box-shadow: none;
    border-radius: 0;

    overflow-y: scroll;
    overflow-x: hidden;

    transform: translateX(100%);
    will-change: transform;
    transition: transform .3s ease-in-out;
  }
  section.sec-side-menu::-webkit-scrollbar {
    width: 0;
  }
  section.sec-side-menu-sh {
    animation: none;
    transform: translateX(0);
  }
  a.a-side-menu,
  a.a-side-menu:active,
  a.a-side-menu:visited {
    display: block;
  }
  ul.ul-side-menu {
    margin: 30px 0 0 0;
  }
  img.img-side-menu-logo {
    max-width: 120px;
  }
  div.bg-ov {
    background-color: #fff;
  }

  /** mobile modal **/
  p.p-tab {
    font-size: 13px;
  }
  table.dataTable>thead .sorting:before, table.dataTable>thead .sorting_asc:before, table.dataTable>thead .sorting_desc:before, table.dataTable>thead .sorting_asc_disabled:before, table.dataTable>thead .sorting_desc_disabled:before,
  
  table.dataTable>thead .sorting:after, table.dataTable>thead .sorting_asc:after, table.dataTable>thead .sorting_desc:after, table.dataTable>thead .sorting_asc_disabled:after, table.dataTable>thead .sorting_desc_disabled:after{
    display: none;
  }
  table.dataTable>thead>tr>th:not(.sorting_disabled), table.dataTable>thead>tr>td:not(.sorting_disabled) {
    padding-right: 5px;
    padding-left: 5px;
  }
}

/** mobile subpage zasady **/
.hidedesktop{display:none;}
@media only screen and (max-width: 840px) {
	.hidedesktop{display:block;}
  div.box-main {
    padding: 10px;
  }
  div.box-main-ins {
    padding: 20px 15px;
  }
  p.p-red {
    margin: 10px 0 20px 0;
    font-size: 15px;
  }
  ul.ul-txt li,
  p.p-txt {
    font-size: 15px;
  }
}

/** statystyki timeline **/
div.timeline {
  position: relative;
  margin: 30px 0;
}
div.col-md-2-timeline {
  padding: 0;
  -ms-flex: 0 0 10%;
  flex: 0 0 10%;
  max-width: 10%;
}
div.col-md-10-timeline {
  padding: 0;
  -ms-flex: 0 0 calc(100% - 10%);
  flex: 0 0 calc(100% - 10%);
  max-width: calc(100% - 10%);
}
div.timeline-details {
  position: relative;
  border-right: 2px solid rgba(0,0,0,.08);
}
div.timeline-content {
  position: relative;
  height: 100%;
}
div.timeline-content::after {
  content: '';
  position: absolute;
  top: 50%;  right: 0;
  transform: translate(-50%, -50%);

  width: 2px; height: 50%;
  background-color: rgba(0,0,0,.08);
}
div.timeline-content::before {
  content: "90'";
  position: absolute;
  top: 5px;  right: -8px;
  transform: translate(0, -50%); 
  
  font-size: 13px;
  line-height: 15px;
  color: gray;
}
div.timeline-break::after {
  content: '';
  position: absolute;
  top: 50%;  right: 50%;
  transform: translate(-50%, -50%);

  width: 2px; height: 30%;
  background-color: #a4a4b9;
}
div.timeline-break::before {
  content: "";
  position: absolute;
  top: 5px;  right: calc(50% - 20px);
  transform: translate(0, -50%); 
  
  font-size: 11px;
  line-height: 15px;
  color: gray;
}
div.timeline-line {
  width: 100%; height: 2px;
  background-color: rgba(0,0,0,.08);
  
  margin: 0;
  position: absolute;
  top: 50%;  left: 50%;
  transform: translate(-50%, -50%);
}

/** timeline details who **/
div.timeline-details-who {
  position: relative;
  padding: 15px 5px;
  text-align: center;
}
div.timeline-who {
  margin: 0 0 40px 0;
}
div.timeline-who:nth-child(2) {
  margin: 40px 0 0 0;
}
figure.fig-timeline-who {
  position: relative;
}
img.img-timeline-who {
  max-width: 30px;
  width: 100%;
}

  /** timeline event **/
div.col-timeline-main {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
div.timeline-event {
  position: absolute;
  top: 20px;
  transform: translate(-50%, -50%);

  font-size: 11px;
  line-height: 15px;
  color: gray;
}
div.timeline-event.event-who-top {
  top: -20px;
} 
div.timeline-event::after {
  content: '';
  position: absolute;
  top: calc(50% - 20px); left: 50%;
  transform: translate(-50%, -50%);

  background-color: rgba(0,0,0,.5);
  width: 5px; height: 5px;
  border-radius: 50%;
}
div.timeline-event.event-who-top::after {
  content: '';
  position: absolute;
  top: calc(50% + 20px); left: 50%;
  transform: translate(-50%, -50%);

  background-color: rgba(0,0,0,.5);
  width: 5px; height: 5px;
  border-radius: 50%;
}

  /** timeline display name **/
div.bstat-mt {
  margin-top: 80px;
}
div.timeline-event-details figure {
  position: relative;
}
div.event-who-top div.timeline-event-details p.p-timeline-name {
  margin: 0;
  font-size: 10px;
  line-height: 12px;

  position: absolute;
  left: 13px; top: 20px;
  width: 80px;

  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

  transform: rotate(45deg);
  transform-origin: top left;
}
div.event-who-bottom div.timeline-event-details p.p-timeline-name {
  margin: 0;
  font-size: 10px;
  line-height: 12px;

  position: absolute;
  left: 0; top: -8px;
  width: 80px;

  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

  transform: rotate(325deg);
  transform-origin: top left;
}

  /** timeline details **/
div.timeline-event.event-who-top div.timeline-event-details {
  position: absolute;
  top: calc(50% + 60px); left: 50%;
  transform: translate(-50%, -50%);
}
div.timeline-event-details img {
  position: relative;
  z-index: 1;
}
div.timeline-event.event-who-top div.timeline-event-details::after {
  content: '';
  position: absolute;
  top: calc(50% - 20px); left: 50%;
  transform: translate(-50%, -50%);

  width: 1px; height: calc(100% + 20px);
  background-color: rgba(0,0,0,.3);
}
div.timeline-event.event-who-bottom div.timeline-event-details {
  position: absolute;
  top: calc(50% - 60px); left: 50%;
  transform: translate(-50%, -50%);
}
div.timeline-event-details img {
  position: relative;
  z-index: 1;
}
div.timeline-event.event-who-bottom div.timeline-event-details::after {
  content: '';
  position: absolute;
  top: calc(50% + 20px); left: 50%;
  transform: translate(-50%, -50%);

  width: 1px; height: calc(100% + 20px);
  background-color: rgba(0,0,0,.3);
}


/* div.timeline-event.event-who-top {
  top: -40px;
} */

/** subpage tabele **/

  /** tabele navigation **/
div.box-main-tab-nav {
  position: relative;
  padding: 10px 15px;
  background: #fff;
  box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
  border-radius: 10px;
  margin-bottom: 20px;
  text-align: center;
}
button.btn-tab-nav,
button.btn-tab-nav:active,
button.btn-tab-nav:visited {
  display: inline-block;
  margin: 0 10px;
  padding: 6px 35px;
  color: #fff;
  background-color: var(--red);
  border: 2px solid var(--red);     
  border-radius: 10px;
  font-size: 15px;
  
  -webkit-transition: color .3s ease-in-out, background-color .3s ease-in-out;
  -o-transition: color .3s ease-in-out, background-color .3s ease-in-out;
  transition: color .3s ease-in-out, background-color .3s ease-in-out;
}
button.btn-tab-nav:focus,
button.btn-tab-nav:hover {
  text-decoration: none;
  color: var(--red);
  background-color: transparent;  
}
button.btn-tab-nav-active {
  color: var(--red);
  background-color: transparent;
}
div.box-main-ins-tab-b {
  display: none;
}

  /** tabele user **/
p.p-tab-main-user {
  position: relative;
  line-height: 15px;
  padding: 0 0 0 30px;
}
p.p-tab-main-user:hover,
p.p-tab-main-user:focus {
  cursor: pointer;
  color: var(--red);
}
img.img-tab-user {
  position: absolute;
  left: 3px; top: 50%;
  
  transform: translate(0, -50%);

  max-width: 20px;
  width: 100%;
}


  /** subpage regulamin/zassady iframe **/
div.box-modal-iframe {
  position: relative;
  display: block;
  width: 100%;
}
div.box-modal-iframe object,
div.box-modal-iframe embed {
  display: block;
  width: 100%;
}
div.box-modal-iframe iframe {
  display: block;	
  width: 100%;
  min-height: 600px;
}

  /** tabele container **/
p.p-tab-main-tabele {
  position: relative;
  line-height: 15px;
  padding: 0 0 0 26px;
}
img.img-tab-kraj {
  position: absolute;
  left: 3px; top: 50%;
  
  transform: translate(0, -50%);

  max-width: 18px;
  width: 100%;
}
p.p-tab-main-in {
  padding: 5px 10px;
  background-color: var(--red);
  border-radius: 10px;
  color: #fff;
  width:30px;
  height:30px;
}
p.p-tab-main-out {
  padding: 5px 10px;
  background-color: transparent;
  border-radius: 10px;
  color: var(--black);
}

/** home typowanie **/
div.box-typ-accept {
  display: none;
  position: relative;
  padding: 10px 15px;
  background-color: #f8f8f8;
  text-align: center;
}
a.btn-green,
a.btn-green:active,
a.btn-green:visited,
button.btn-green,
button.btn-green:active,
button.btn-green:visited {
  display: inline-block;
  margin: 0 10px;
  padding: 6px 45px;
  color: #fff;
  background-color: var(--green);
  border: 2px solid var(--green);     
  border-radius: 10px;
  font-size: 15px;
  
  -webkit-transition: color .3s ease-in-out, background-color .3s ease-in-out;
  -o-transition: color .3s ease-in-out, background-color .3s ease-in-out;
  transition: color .3s ease-in-out, background-color .3s ease-in-out;
}
a.btn-green:focus,
a.btn-green:hover,
button.btn-green:focus,
button.btn-green:hover {
  text-decoration: none;
  color: var(--green);
  background-color: transparent;  
}
button.btn-red,
button.btn-red:active,
button.btn-red:visited {
  display: inline-block;
  margin: 0 10px;
  padding: 6px 45px;
  color: #fff;
  background-color: var(--red);
  border: 2px solid var(--red);     
  border-radius: 10px;
  font-size: 15px;
  
  -webkit-transition: color .3s ease-in-out, background-color .3s ease-in-out;
  -o-transition: color .3s ease-in-out, background-color .3s ease-in-out;
  transition: color .3s ease-in-out, background-color .3s ease-in-out;
}
button.btn-red:focus,
button.btn-red:hover {
  text-decoration: none;
  color: var(--red);
  background-color: transparent;  
}

a.btn-blue,
a.btn-blue:active,
a.btn-blue:visited,
button.btn-blue,
button.btn-blue:active,
button.btn-blue:visited {
  display: inline-block;
  margin: 0 10px;
  padding: 6px 45px;
  color: #fff;
  background-color: var(--blue);
  border: 2px solid var(--blue);     
  border-radius: 10px;
  font-size: 15px;
  
  -webkit-transition: color .3s ease-in-out, background-color .3s ease-in-out;
  -o-transition: color .3s ease-in-out, background-color .3s ease-in-out;
  transition: color .3s ease-in-out, background-color .3s ease-in-out;
}
a.btn-blue:focus,
a.btn-blue:hover,
button.btn-blue:focus,
button.btn-blue:hover {
  text-decoration: none;
  color: var(--blue);
  background-color: transparent;  
}

[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
  transition:0.3s ease transform;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid var(--red);
  border-radius:50%;
  transform:scale(1.3);
}
.form-accept{
	font-size:13px;
	text-align:justify;
}
.form-accept a{
	text-decoration:underline;
}
.form-accept a:hover{
	text-decoration:none;
	color:inherit;
}
#fullbutt,#lessbutt{
	font-size:13px;
	font-weight:bold;
}
.opacity75 img{
	opacity:0.3;
}

.toggle-password{
	position:absolute;
	top:35px;
	right:2px;
	cursor:pointer;	
	background:transparent;
}
.box-login-f-content .toggle-password{
	top:9px;
}
.toggle-password > span{
	padding: 0.375rem;
	border-radius:0;
	border:none;
	background:transparent;
}
input[name=haslo]{
	padding-right:40px;
}

.timeline-mobile{
	width:100%;
	overflow:hidden;
	overflow-x:auto;
	min-height:230px;
	position:relative;
}
.timeline-mobile > .row{
	/*display:block;*/
	width:2000px;
	max-width:initial;
	
}


@media only screen and (max-width: 768px) {
	.timeline-mobile{
		width:100%;
		overflow:hidden;
		overflow-x:auto;
		min-height:230px;
	}
	.timeline-mobile > .row{
		/*display:block;*/
		width:800px;
		
	}
	body.zasady .box-main-ins{
		text-align:justify;
	}
	div.box-side-menu-logo{
		display:none;
	}
	div.box-logo{
		position:relative;
		float:left;
		margin-top:5px;
	}
	.rank-sid{display:none;}
	p.p-tab-main-in{
		padding:4px 8px;
		width:26px;
		height:26px;
	}
	.tab-group th{
		padding-left:0!important;
		padding-right:0!important;
	}
	table.tab-group.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before{
		left:-10px;
	}
	table.tab-group.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control{
		padding-left:14px;
	}

	.tab-group p.p-tab,
	.tab-group p.p-tab-main{
		font-size:12px;
	}
}
.modal-body-szczegoly input.inp-twc-lft,
.modal-body-szczegoly input.inp-twc-rgt{
	padding-left:0;
}
.menu-f-active figure{
	box-shadow: 0 0 10px var(--red);
}
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before{
	background-color:var(--red);
}

#ModalMistrz .modal-dialog{
	width:350px;
	max-width:100%;
}
#timeline-powieksz{
	position:sticky;
	left:0;
	top:0;
}
body.register #MainLogin{
  padding-top: 0;
}
body.register section.sec-login {
  background: rgba(0, 0, 0, 0.1);
}
@media only screen and (max-width: 768px) {
 
  body.register.notloggedd .fig-logo-login-q{
    padding:5px;
  }
  body.register.notloggedd img.img-logo-login-q{
    max-width:160px;
  }
  body.register.notloggedd main#MainLogin,
  body.register section.sec-login{
    background:#fff;
    padding-bottom:0;
  }
  body.recover_password.notloggedd .login-soccer,
  body.strglowna.notloggedd .login-soccer,
  body.error.notloggedd .login-soccer{
    display:none;
  }
}
.hide-desktop{
  display:none;
}

@media only screen and (max-width: 768px) {
  .hide-mobile{
    display:none!important;
  }
  .hide-desktop{
    display:initial!important;
  }
}