@font-face {
    font-family: Proxima Nova;
    src: url(./proxima.otf);
    
}

@font-face {
    font-family: Proxima Bold;
    src: url(./proxima-extrabold.otf);
    
}


body{
    background-color: #F4F7FD;
}


.horni-menu {
    margin-top: 30px;
    height: 128px;
    width: 1104px;
    margin-left: auto;
    margin-right: auto;
}


.menu-logo
{
    height: 128px;
    width: 124px; 
    float: left;  
}

.menu-texty
{
    height: 128px;
    width: 490px; 
    float: left; 

}

.herni-plan {
    height: 72px;
    width: 250px;
    color: #210A3B;
    font-family: "Proxima Nova";
    font-size: 56px;
    letter-spacing: -0.9px;
    line-height: 72px;  
    padding-top: 15px ;
    padding-left: 32px;

}

.info
{
    width: 16px;
    height: 16px;
    fill: #67D5C4;
    position: relative;
    top:3px;
    padding-right: 8px;
    padding-left: 32px;
}

.info:hover {
    cursor: pointer;
}

.vice-informaci {
    height: 20px;
    width: 180px;
    color: #632CA0;
    font-family: "Proxima Nova";
    font-size: 16px;
    letter-spacing: -0.26px;
    line-height: 20px;
    text-align: center;

}

.vice-informaci:hover {
    cursor: pointer;
}   

.menu-selecty
{
    height: 128px;
    width: 490px;
    float: left;    
}

.menu-select-user
{
    height: 64px;
    width: 490px;
    float: left;    
}

.menu-select-razeni
{
    height: 64px;
    width: 490px;
    float: left;    
}


.select-uzivatel
{
    z-index: 2;
    min-width: 220px;
    display: table;
    margin-top: 10px;
    margin-left: auto; 
    
}

.select-uzivatel-vzdy
{
    height: 48px;
    border-radius: 24px;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 16px 24px -16px rgba(0,0,0,0.1);
}

.select-uzivatel-vzdy-otevreno
{
    border-radius: 24px 24px 0px 0px;
}

.select-uzivatel:hover
{
    cursor: pointer;
}

.select-uzivatel-vzdy-ikona
{
    height: 32px;
    float: left; 
    margin: 8px;   
}

.select-uzivatel-vzdy-username
{
    float: left;
    height: 24px;
    min-width: 130px;
    color: #210A3B;
    font-family: "Proxima Nova";
    font-size: 20px;
    letter-spacing: -0.32px;
    line-height: 24px;
    padding: 12px 0px;   
}

.select-uzivatel-vzdy-sipka
{
    float: left; 
    margin: 16px;     
}

.ikona
{
    height: 32px;     
    width: 32px; 
    border-radius:50%;  
    
}

.sipka-dolu
{
    height: 16px;     
    width: 16px;
    fill:#67D5C4;      
}

.sipka-nahoru
{
    height: 16px;     
    width: 16px;
    fill:#67D5C4;
    display: none;      
}

.select-uzivatel-twitch
{
    height: 48px;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 16px 24px -16px rgba(0,0,0,0.1); 
    border-top: 1px solid #E8EEFA;   
}

.select-uzivatel-admin
{
    height: 48px;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 16px 24px -16px rgba(0,0,0,0.1); 
    border-top: 1px solid #E8EEFA;   
}

.select-uzivatel-odhlaseni
{
    height: 48px;
    border-radius: 0px 0px 24px 24px;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 16px 24px -16px rgba(0,0,0,0.1);
    border-top: 1px solid #E8EEFA;         
}

.select-uzivate-texty-volby
{
  height: 20px;
  color: #632CA0;
  font-family: "Proxima Nova";
  font-size: 16px;
  letter-spacing: -0.26px;
  line-height: 20px;
  padding: 14px;
}

.select-uzivate-texty-volby a
{
    text-decoration: none;
    color: #632CA0;
}

.select-uzivate-texty-volby a:hover
{
    text-decoration: underline;
}

.select-uzivatel-rozklik
{
    display: none;  
}



.select-razeni
{
    display: table;
    margin-top: 16px;
    margin-left: auto; 
    
}

.select-razeni-vzdy
{
    height: 48px;
}


.select-razeni-vzdy-otevreno
{
    border-radius: 24px 24px 0px 0px;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 16px 24px -16px rgba(0,0,0,0.1);
}

.select-razeni:hover
{
    cursor: pointer;
}

.select-razeni-vzdy-text {
  height: 20px;
  width: 147px;
  color: #210A3B;
  font-family: "Proxima Nova";
  font-size: 16px;
  letter-spacing: -0.26px;
  line-height: 20px;
  float: left;
  padding: 14px 0px 14px 14px;
}

.select-razeni-vzdy-sipka
{
    float: left; 
    margin: 16px;     
}

.select-razeni-volby
{
    height: 48px;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 16px 24px -16px rgba(0,0,0,0.1); 
    border-top: 1px solid #E8EEFA;   
}

.select-razeni-volby:hover
{
    background-color: #e5e5e5;
    cursor: pointer; 
}

.select-razeni-volby-dolni-oble
{
    border-radius: 0px 0px 24px 24px;
}

.select-razeni-rozklik
{
    display: None;
}

.color-632CA0
{
    color:#632CA0;
}


.fajfka-vybrano
{
    height: 16px;     
    width: 16px;
    fill:#67D5C4; 
    display: none;     
}

.razeni_vybrano_1
{
    display: block;
    font-family: "Proxima Bold";
}

.vypis-hry {
    height: auto;
    width: 1104px;
    border-radius: 16px;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 16px 24px -16px rgba(0,0,0,0.1);
    margin: auto;
    padding-top: 16px;
    padding-bottom: 16px;
}

.radek-hra
{
    height: 104px;
    width: 1104px;

}
.nadpis-hra
{
    height: 60px;
    width: 1104px;
}

.nadpis-hra-text {
    height: 40px;
    width: 1104px;
    color: #210A3B;
    font-family: "Proxima Nova";
    font-size: 19px;
    letter-spacing: -0.9px;
    text-align: center;
}

.radek-hra:hover
{
    background-color: #E8EEFA;
}

.radek-hra-obrazek
{
    height: 72px;
    width: auto;
    float: left;
    padding: 16px 24px 16px 32px;
    float: left;  
}

.hra-obrazek
{
    height: 72px;
    width: 125px;
}

.radek-hra-nazev
{
    height: 24px;
    width: 750px;
    float: left;  
    color: #210A3B;
    font-family: "Proxima Nova";
    font-size: 20px;
    letter-spacing: -0.32px;
    line-height: 24px;
    padding: 28px 0px;
}

.radek-kolekce-nazev
{
    height: 24px;
    width: 890px; 
    float: left;  
    color: #210A3B;
    font-family: "Proxima Nova";
    font-size: 20px;
    letter-spacing: -0.32px;
    line-height: 24px;
    padding: 28px 0px;
}

.kolekce-nazev
{
    width: 850px;
    text-overflow: ellipsis;
    white-space: nowrap;  
    position: relative;   
    overflow: hidden;
}

.kolekce-radek
{
    cursor: pointer;
}

.jmeno-hry
{
    font-size: 12px;   
}

.hra-nazev
{
    width: 700px;
    text-overflow: ellipsis;
    white-space: nowrap;  
    position: relative;   
    overflow: hidden;
}

.radek-hra-info
{
    height: 104px;
    width: 165px; 
    float: left;     
}

.hra-info
{
    float: left;
    height: 24px;
    color: #632CA0;
    font-family: "Proxima Nova";
    font-size: 16px;
    letter-spacing: -0.26px;
    line-height: 20px;
    padding: 40px 0px;
    width: 100%;
    text-align: center;

}

.hra-info a
{
    text-decoration: none;
    color: #632CA0;
}

.hra-info-icon
{
    width: 8px;
    height: 8px;
    fill: #67D5C4;
    position: relative;
    top: -8px;    
}

.hlas-ulozen-obal
{
    float: left;
    margin: 40px 0px;
    border: 1px solid #CAD3E6;
    border-radius: 10px;
    margin: 32px 0px 32px 46px;
    display: none;

}

.hlas-ulozen-text
{
    color: #5cbfb0;
    font-family: "Proxima Nova";
    font-size: 16px;
    letter-spacing: -0.26px;
    line-height: 20px;
    padding: 8px;
}    

.radek-hra-hlasovani
{
    height: 104px;
    width: 144px; 
    float: left;  
}



.hlasovadlo{
    float: left;
    height: 24px;
    width: 24px;
    border-radius: 10px;
    background-color: #F4F7FD;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 16px 24px -16px rgba(0,0,0,0.1);
    margin: 32px 32px 32px 0px;
    padding: 8px;
}

.palec-pro
{
    width: 24px;
    height: 24px;
    fill: #CAD3E6
}

.palec-proti
{
    width: 24px;
    height: 24px;
    fill: #CAD3E6
}

.hlasovadlo:hover
{
    background-color: #F4F7FD;
    cursor: pointer;    
}

.hlasovadlo:hover .palec-pro
{
    fill: #67D5C4;    
}

.hlasovadlo:hover .palec-proti
{
    fill: #FF484F;

}

.stav_pro_true{
    background-color: #67D5C4;   
}

.stav_pro_true .palec-pro{
    fill: #FFFFFF;   
}

.stav_proti_true{
    background-color: #FF484F;   
}

.stav_proti_true .palec-proti{
    fill: #FFFFFF;   
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.65); /* Black w/ opacity */
}



.modal-nadpis {
    height: 80px;
    width: 560px;
    border-radius: 16px 16px 0 0;
    background-color: #F4F7FD;
    margin-left: auto;
    margin-right: auto;
    margin-top: 250px;
}

.modal-nadpis-text {
    height: 32px;
    width: 416px;
    color: #210A3B;
    font-family: "Proxima Nova";
    font-size: 24px;
    line-height: 32px;
    float: left;
    padding: 24px 32px;
}

.modal-nadpis-krizek {
    float: left; 
    padding: 32px; 

}

.krizek {
    width: 16px;
    height: 16px;
    fill: #CAD3E6;

}

.krizek:hover
{
    cursor: pointer;
    fill: #B5BDCF;  
}

.modal-text {
    height: auto;
    width: 560px;
    border-radius:0 0 16px 16px ;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 16px 24px -16px rgba(0,0,0,0.1);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}

.modal-text-text
{
    color: #210A3B;
    font-family: "Proxima Nova";
    font-size: 16px;
    letter-spacing: -0.26px;
    line-height: 20px;
    padding: 37px 32px;
    text-align: justify;
}

.text-stred
{
    text-align: center;
}

.zobraz-embed
{
     cursor: pointer;
}

.box-navrh {
    height: 48px;
    width: 229px;
    border-radius: 10px;
    background-color: #632CA0;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 16px 24px -16px rgba(0,0,0,0.1);
    margin-left: auto;
    margin-right: auto;
    margin-top: 32px;
    margin-bottom: 32px;
}

.box-navrh:hover
{
    cursor: pointer;
    background-color: #592790;
}

.box-navrh-text {
    height: 24px;
    width: 165px;
    color: #FFFFFF;
    font-family: "Proxima Nova";
    font-size: 20px;
    letter-spacing: -0.32px;
    line-height: 24px;
    text-align: center;
    padding: 12px 32px;
}

.vstup-navrh {
  box-sizing: border-box;
  height: 50px;
  width: 498px;
  border: 2px solid #632CA0;
  border-radius: 10px;
  background-color: #FFFFFF;
  
  color: #210A3B;
  font-family: "Proxima Nova";
  font-size: 16px;
  letter-spacing: -0.26px;
  line-height: 20px;
  padding: 0px 16px;
  margin-bottom: 15px;
}

.box-navrh-ulozen
{
  box-sizing: border-box;
  height: 50px;
  width: 498px;
  border: 2px solid #CAD3E6;
  border-radius: 10px;
  background-color: #FFFFFF;
  margin-bottom: 15px;
  display: none;
}


.box-navrh-ulozen-text
{  
  height: 24px;
    width: 434px;
    color: #5cbfb0;
    font-family: "Proxima Nova";
    font-size: 16px;
    letter-spacing: -0.32px;
    line-height: 24px;
    text-align: center;
    padding: 12px 32px;
    text-align: center;
}

.box-navrh-neulozen-text
{  
  height: 24px;
    width: 434px;
    color: #FF484F;
    font-family: "Proxima Nova";
    font-size: 16px;
    letter-spacing: -0.32px;
    line-height: 24px;
    text-align: center;
    padding: 12px 32px;
    text-align: center;
}


.pridat-navrh-vstup
{
    height: 185px;
    margin-bottom: 0px;
    border-radius: 0px;
    border-bottom: 1px solid #E8EEFA;
}

.modal-obal-butttony
{
    height: 112px;
}
.odeslat-navrh
{
    height: 48px;
    width: 224px;
    border-radius: 10px;
    background-color: #632CA0;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 16px 24px -16px rgba(0,0,0,0.1);
    margin: 32px 16px 32px 32px;
    float: left;
}   

.odeslat-navrh:hover
{
    background-color: #592790;
    cursor: pointer;       
}

.navrh-text-butonny
{
    height: 24px;
    width: 192px;
    color: #FFFFFF;
    font-family: "Proxima Nova";
    font-size: 20px;
    letter-spacing: -0.32px;
    line-height: 24px;
    text-align: center; 
    padding: 12px 16px;   
}

.zrusit {
    box-sizing: border-box;
    height: 50px;
    width: 224px;
    border: 2px solid #632CA0;
    border-radius: 10px;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 16px 24px -16px rgba(0,0,0,0.1);
    float: left;
    margin: 32px 16px 32px 32px;
}

.zrusit:hover
{
    background-color:#e5e5e5;
    cursor: pointer;       
}

.kolekce-obrazek
{
    height: 72px;
    width: 154px;
}

 table {
      width: 85%;
      margin: 0 auto;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
      font-size: 18px;
      text-align:center
    }

.dpgreen, .dmgreen {
    color: green;
}

.dpred, .dmred {
    color: red;
}

       a {
      color: black;
      text-decoration: underline;
    }

    a:hover {
      color: black;
      text-decoration: underline;
    }

    a:visited {
      color: black;
    }

    a:active {
      color: black;
    }


.tabulkalink
{

    padding-right: 85px;
    margin-bottom: 5px;
    font-family: "Proxima Nova";
    font-size: 19px;
    letter-spacing: -0.9px;
}

.scale-in-center{-webkit-animation:scale-in-center .4s cubic-bezier(.25,.46,.45,.94) both;animation:scale-in-center .4s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes scale-in-center{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes scale-in-center{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}
.scale-out-center{-webkit-animation:scale-out-center .4s cubic-bezier(.55,.085,.68,.53) both;animation:scale-out-center .4s cubic-bezier(.55,.085,.68,.53) both}
@-webkit-keyframes scale-out-center{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}100%{-webkit-transform:scale(0);transform:scale(0);opacity:1}}@keyframes scale-out-center{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}100%{-webkit-transform:scale(0);transform:scale(0);opacity:1}}
.scale-in-ver-top{-webkit-animation:scale-in-ver-top .4s cubic-bezier(.25,.46,.45,.94) both;animation:scale-in-ver-top .4s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes scale-in-ver-top{0%{-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:100% 0;transform-origin:100% 0;opacity:1}100%{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:100% 0;transform-origin:100% 0;opacity:1}}@keyframes scale-in-ver-top{0%{-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:100% 0;transform-origin:100% 0;opacity:1}100%{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:100% 0;transform-origin:100% 0;opacity:1}}
.scale-out-ver-top{-webkit-animation:scale-out-ver-top .4s cubic-bezier(.55,.085,.68,.53) both;animation:scale-out-ver-top .4s cubic-bezier(.55,.085,.68,.53) both}
@-webkit-keyframes scale-out-ver-top{0%{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:100% 0;transform-origin:100% 0;opacity:1}100%{-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:100% 0;transform-origin:100% 0;opacity:1}}@keyframes scale-out-ver-top{0%{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:100% 0;transform-origin:100% 0;opacity:1}100%{-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:100% 0;transform-origin:100% 0;opacity:1}}