@import url("https://fonts.googleapis.com/css?family=Roboto&subset=latin-ext");
@import url("https://fonts.googleapis.com/css?family=Combo&subset=latin-ext");
@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@200&display=swap');
*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #3B3B3B;
    background-image: url("../img/bg-school.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    font-family: "Roboto", sans-serif;
}
#fejlec{
    position: fixed;
    top: 3px;
    left: 10px;
    /* width: calc(100vw - 100%); a görgetősáv szélessége */
    width: calc(100vw - calc(100vw - 100%) - 20px);
    
    /* background-image: linear-gradient(#00ace6 0%, #80dfff 100%); */
    background-image: linear-gradient(#E0C9A9 0%, #BDAF96 100%);

    font-weight: bold;
    
    height: 70px;
    border: solid 1px #080808;
    border-radius: 3px;
    color: black;

    display: flex;
    align-items: center;
    justify-content: center;
    
    box-shadow: inset 1px 1px 10px black; 
    
    border-radius: 10px;
    z-index: 1;
}
.container{
    background-color: #3B3B3B;

    display: flex;
    align-items: center;
    justify-content: center;
}
#container_formPIN{
    background-color: #36ABCB;
    width: 100%;
    margin: 10px auto;
    
    display: flex;
    align-items: center;
    justify-content: center;
}
#txt1PIN{
    position: relative;
    top: -30px;
    width: 100%;
    text-align: center;
    font-size: 2.5em;
    font-weight: bold;
    color: whitesmoke;
    font-family: "Combo", cursive;
    
    text-shadow: 0px 0px 30px darkblue;
}
#txt2PIN{
    position: relative;
    top: 16px;
    width: 100%;
    text-align: center;
    font-size: 0.9em;
}
#txt3PIN{
    position: relative;
    top: -2px;
    width: 100%;
    text-align: center;
    font-size: 2.5em;
    font-weight: bold;
    color: whitesmoke;
    font-family: "Combo", cursive;

    text-shadow: 0px 0px 30px darkblue;
}
#txt4PIN{
    position: relative;
    top: 20px;
    width: 100%;
    text-align: center;
    font-size: 0.9em;
}
.errorPIN{ 
    position: absolute;
    top: 215px;
    left: 0;
    width: 100%;
    text-align: center;
    font-weight: bold;
    color: yellow;
}
#webPIN{
    color: black;
    background-color: #E4F0FC;
    text-align: center;
    font-weight: bold;
    font-size: 2.0em;
    width: 250px;
    margin: 10px;
    border: solid 1px black;
    border-radius: 5px;
    
    box-shadow:0px 0px 30px #006080;
}
#dolgValaszt{
    color: black;
    background-color: #E4F0FC;
    /*text-align: center;*/
    /*font-weight: bold;*/
    font-size: 1.3em;
    width: 380px;
    margin-top: 25px;
    margin-bottom: 5px;
    margin-left: 59px;
    border: solid 1px black;
    border-radius: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
    
    box-shadow:0px 0px 30px #006080;
}
#tanNev, #dolgMutat{
    color: black;
    background-color: #E4F0FC;
    /*text-align: center;*/
    /*font-weight: bold;*/
    font-size: 1.3em;
    width: 372px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 59px;
    border: solid 1px black;
    border-radius: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 5px;
    
    box-shadow:0px 0px 30px #006080;
}
#dolgMutat{
    margin-top: 25px;
}
.submitPIN{
    font-size: 1.3em;
    width: 120px;

    box-shadow:0px 0px 2px blue;
}
.submitPIN:hover{
    cursor: pointer;
}
.submitValaszt{
    font-size: 1.3em;
    width: 120px;
    box-shadow:0px 0px 2px blue;
    margin-top: 15px;
    margin-bottom: 5px;
    margin-left: 321px;
    
    box-shadow:0px 0px 2px blue;
}
.submitValaszt:hover{
    cursor: pointer;
}
#buttons{
    background-image: linear-gradient(#00ace6 0%, #80dfff 100%);
    /*background-color: #36ABCB;*/
    border: solid 1px #080808;
    border-radius: 3px;
    color: #006080;
    height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;
}
#container_big{
    position: relative;
    top: 80px;
    width: 100%;
    height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;    
}
#container_dolg{
    position: relative;
    width: 750px;
    height: 450px;
    border: solid 5px #36ABCB;
    border-radius: 5px;
}
#container_pin{
    position: relative;
    width: 500px;
    height: 250px;
    border: solid 1px #080808;
    border-radius: 5px;
    background-color: #36ABCB;

    display: flex;
    align-items: center;
    justify-content: center;
    
    box-shadow: inset 1px 1px 10px black;    
}
#kerdes_div{
    position: absolute;
    top: 0;
    background-color: #36ABCB;
    height: 100px;
    width: 100%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    box-shadow: inset 0px 0px 15px black;
}
#kerdes_div p{
    font-size: 1.4em;
    font-weight: normal;
    margin: 10px;
    height: available;
    width: available;
    color: black;
    text-align: center;
}
#kerdes_div input{
    font-size: 1.4em;
    font-weight: bolder;
    height: 90%;
    width: 100%;
    color: darkblue;
    text-align: center;
    background-color: #e6f2ff;
    
    border:1px solid #cccccc;
}
#kerdes_div input:focus{
    border-color: #9ecaed;
    
    box-shadow: 0 0 10px darkblue;
    background-color: #b3d9ff;
}
#valaszok_div{
    position: absolute;
    bottom: 0;
    background-color: lightgray;
    height: 350px;
    width: 100%;
}
#valaszok_div input{
    background-color: #ffffe6;
    width: 100%;
    height: 60px;
    
    border:1px solid #cccccc;
}
#valaszok_div input:focus{
    outline: none;
    border-color: #9ecaed;
    background-color: #ffffb3;
}
.valaszok{
    position: relative;
    height: 59px;
    border-top: solid 1px lightsteelblue;
    width: 100%;
}
#copyright{
    font-size: 16px;
    font-weight: bold;
    color: #555555;
    position: fixed;
    bottom: 10px;
    right: 10px;
    transform: rotate(90deg);
}
#info{
    font-weight: bold;
    color: gray;
    position: absolute;
    bottom: 100px;
    left: 10px;
}
/*Feladat sorszám gomb*/
.btnX{
    display: inline-block;
    font-weight: normal;
    padding-top: 3px;
    margin: 2px;
    height: 22px;
    width: 26px;
    text-align: center;
    border-bottom: solid 1px #808080;
    color: #808080;
}
.btnX_aktiv{
    border-bottom: solid 2px #36ABCB;
}
.abcde{
    min-width: 33px;
    min-height: 33px;
    text-align: center;
    border-radius: 6px;
    border: solid 2px #36ABCB;
    font-size: 2em;
    font-weight: bold;
    color: #36ABCB;
    padding: 5px 10px;
    position: absolute;
    top: 4px;
    left: 6px;
}
.abcde:hover{
    cursor: pointer;
}
#v1,#v2,#v3,#v4,#v5{
    display: table-cell;
    vertical-align: middle;
    height: 55px;
    padding-top: 3px;
    padding-left: 80px;
    font-size: 1.3em;
}
#dolg_nev{
    font-size: 1.6em;
    font-weight: bold;
    margin-right: 20px;
    color: #3B3B3B;
}
.vizsgazoNeve{
    font-size: 1.3em;
    /*font-weight: bold;*/
    margin-top: 16px;
    margin-left: 6px;
    color: #D3D3D3;
}
.vizsgazoNeve_erdmeny{
    font-size: 1.5em;
    font-weight: bold;
    color: yellow;
}
.divTovabb{
    display: inline-block;
    position: relative;
    height: 55px;
    width: 100%;
    background-color: #36ABCB;
}
.divMentes{
    display: inline-block;
    position: relative;
    height: 55px;
    width: 100%;
    background-color: #36ABCB;
}
.divTovabb_eredmeny{
    height: 55px;
    width: 100%;
    background-color: #36ABCB;
    
    display: flex;
    align-items: center;
    justify-content: center;
}
.btnTovabb{
    display: inline-block;
    font-weight: bold;
    margin: 13px 10px 10px 10px;
    height: 25px;
    width: 120px;
    text-align: center;
    padding-top: 5px;
    border: solid 1px #808080;
    border-radius: 6px;
    color: whitesmoke;
    border: solid 1px whitesmoke;
    float: right;
}
.btnTovabb:hover{
    cursor: pointer;
    color: red;
    border-color: red;
    background-color: yellow;
}
.btnMentes{
    display: inline-block;
    font-weight: bold;
    margin: 13px 10px 10px 10px;
    height: 25px;
    width: 120px;
    text-align: center;
    padding-top: 5px;
    border: solid 1px #808080;
    border-radius: 6px;
    color: whitesmoke;
    border: solid 1px whitesmoke;
    float: right;
}
.btnMentes:hover{
    cursor: pointer;
    color: red;
    border-color: red;
    background-color: yellow;
}
.btnKivalasztva{
    color: darkgreen;
    border-color: darkgreen;
    background-color: #D5EB80;
}
.countdown{
    display: block;
    font-size: 1.2em;
    margin-top: 18px;
    margin-left: 5px;
    color: whitesmoke;
    width: 50px;
    text-align: center;
    float: right;
}
.countdownWarning{
    color: red;
    font-weight: bold;
    background-color: yellow;
    border-radius: 6px;
}
.eredmeny{
    color: yellow;
    font-size: 1.4em;
}
#jegy_div{
    position: absolute;
    height: 300px;
    width: 749px;
    border-radius: 6px;
    opacity: 0.9;
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;
}
#jegy{
    font-size: 20.0em;
    color: red;
    font-weight: bold;
}
.tokeletes{
    text-shadow:0px 0px 60px yellow;
}
#div_sorszamok{
    height: 40px;
    width: 75%;
    position: absolute;
    bottom: 0;
    
    display: flex;
    align-items: center;
    justify-content: center;
}
#tanar{
    position: absolute;
    top: 12px;
    right: 20px;
    
    width: 45px;
    z-index: 2;
}
/*dolg-lista.php beállításai*/
/* Táblázatok formázása */
table{
    border-collapse: collapse;
    margin-top: 20px;
    /*margin-left: 30px;*/
}
tr:nth-child(even) 
{
    background-color: #F6F6F6;
}
tr:nth-child(odd)
{
    background-color: #f8f5ee;
}
tr:hover{
    background-color: #EBF8A4;
    transition-duration: 0.3s;
}
th{
    font-size: 18px;
    font-weight: lighter;
    text-align: center;
    background-image: linear-gradient(#E0C9A9 0%, #BDAF96 100%);
    /* color: black; */
    /* color: #ffffffaa; */
    color: darkred;
    padding: 6px 10px;
    border: solid 1px brown;
}
td:first-child{
    /*width: 40px;*/
    border-bottom: solid 1px  brown;
    padding-left: 5px;
    padding-right: 5px;
    color: black;
}
td{
    /*width: 300px;*/
    border: solid 1px  brown;
    color: darkblue;
    font-size: 16px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
    padding-right: 5px;
}
.on{
    color: blue;
}
.off{
    color: #666666;
}
h1,h2{
    color: #006080;
    background-image: linear-gradient(#00ace6 0%, #80dfff 30%);
    padding: 10px;
    border-radius: 10px;
    font-size: 20px;
    font-weight: bold;
    margin-left: 30px;
    margin-right: 30px;
    border: solid 1px #006080;
}
h2{
    margin-top: 0px;
}
#szuro_nev,#szuro_dolg,#szuro_datum{
    padding-left: 5px;
    margin: 0;
    width: 150px;
    background-color: #FFFFE1;
    color: blue;
}
.align-center{
    text-align: center;
}
.navbar-brand,
.navbar-nav li a {
    line-height: 30px;
    height: 30px;
    padding-top: 0;
    margin-top: 80px;
    z-index: 0;
}
.navbar{
    margin-bottom: 5px;
    /*background-color: #7DDEFE;*/
    padding-bottom: 0;
    min-height: 38px;   
}
.navbar a:hover{
    background-color: #7DDEFE;
    /*border-radius: 10px;*/
    /*border: solid 1px #C9C9C9;*/
    /*border-top: solid 3px #1BB7EB;*/
    /*border-bottom: solid 3px yellow;*/
    
    color: blue;
}
.navbar-nav li {
    color: white;
}
.button-nav{
    border-radius: 5px;
    padding: 3px;
    width: 90px;
    margin: 5px;
    background-color: lightgray;
    /*background-image: linear-gradient(#b3cccc 0%, #75a3a3 100%);*/ 
    border-radius: 6px;
    color: #1f2e2e;
}
nav{
    display: flex;
    align-items: center;
    justify-content: center;
}
#dolglista{
    display: flex;
    align-items: center;
    justify-content: center;
}
#kerdlista{
    display: flex;
    align-items: center;
    justify-content: center;
}
#eredmenylista{
    display: flex;
    align-items: center;
    justify-content: center;
}
#toplista{
    display: flex;
    align-items: center;
    justify-content: center;
}
.atlatszo{
    border: none;
    background-color: #3E3E3E;
}
#rndPIN{
    position: fixed;
    top: 12px;
    right: 20px;
    font-size: 30px;
    font-weight: bold;
    background-color: rgba(0,0,0,0);
    border: solid 3px #006080;
    border-radius: 10px;
    color: #006080;
    padding: 2px 10px;
    cursor: pointer;
    z-index: 2;
}
#rndPIN:hover{
    font-size: 150px;
    z-index: 100;
    box-shadow: inset 0 0 20px yellow;
    background-color: #1e1e1e;
    border-radius: 20px;
    border: none;
    padding: 15px 30px;
    color: yellow;
    letter-spacing: 5px;
}
#btnSTART{
    position: fixed;
    width: 130px;
    top: 80px;
    right: 20px;
    font-size: 22px;
    font-weight: bold;
    color: #555555;
    background-color: rgba(0,0,0,0);
    border: solid 2px #555555;
    border-radius: 10px;
    padding: 6px;

    display: flex;
    align-items: center;
    justify-content: center;
}
#btnSTART:hover{
    cursor: pointer;
    color: red;
    border-color: red;
    background-color: yellow;
}
#btnKESZ{
    position: fixed;
    width: auto;
    bottom: 50px;
    margin: 20px auto;
    /*right: 10px;*/
    font-size: 24px;
    font-weight: bold;
    background-color: #3E3E3E;
    border: solid 2px #808080;
    border-radius: 10px;
    color: #808080;
    padding: 10px;

    display: flex;
    align-items: center;
    justify-content: center;
}
#btnKESZ:hover{
    cursor: pointer;
    color: red;
    border-color: red;
    background-color: yellow;
}
#btnElozo{
    position: relative;
    top: -200px;
    margin-right: 1px;
    margin-left: 5px;
    font-size: 30px;
    background-color: #3E3E3E;
    border: solid 1px #202020;
    color: #202020;
    border-radius: 50% 0 0 50%;
    padding: 10px;

    display: flex;
    align-items: center;
    justify-content: center;
}
#btnKovetkezo{
    position: relative;
    top: -200px;
    margin-right: 5px;
    margin-left: 1px;
    font-size: 30px;
    background-color: #3E3E3E;
    border: solid 1px #202020;
    color: #202020;
    border-radius: 0 50% 50% 0;
    padding: 10px;

    display: flex;
    align-items: center;
    justify-content: center;
}
#btnElozo:hover, #btnKovetkezo:hover{
    cursor: pointer;
    color: #808080;
    border-color: #808080;
}
#btnVISSZA{
    position: fixed;
    width: 25px;
    top: 70px;
    left: 10px;
    box-shadow: inset 1px 1px 15px black;    
}
#btnVISSZA:hover{
    cursor: pointer;
}
#div_tiltott_muvelet1{
    position: fixed;
    width: 100%;
    top: 60px;
    margin: 20px auto;
    font-size: 40px;
    font-weight: bold;
    background-color: yellow;
    border: solid 2px #808080;
    border-radius: 10px;
    color: red;
    padding: 10px;

    display: flex;
    align-items: center;
    justify-content: center;
}
#div_tiltott_muvelet2{
    position: fixed;
    width: 100%;
    bottom: 60px;
    margin: 20px auto;
    font-size: 40px;
    font-weight: bold;
    background-color: yellow;
    border: solid 2px #808080;
    border-radius: 10px;
    color: red;
    padding: 10px;

    display: flex;
    align-items: center;
    justify-content: center;
}
#eredmeny_info{
    font-weight: bold;
    color: gray;
    font-size: 1.2em;
    text-align: center;
}
#tarsoldalak_div{
    position: absolute;
    bottom: 0px;
    left: 5px;
    font-size: 1.0em;
    background-color: #3E3E3E;
    border: solid 2px black;
    border-radius: 10px 10px 0 0;
    color: black;
    padding: 0;
}
#tarsoldalak{
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin: 0;
    padding: 4px;
    width: 230px;
    display: block;
    cursor: pointer;
}
#tarsoldalak_div a{
    text-decoration: none;
    color: #E0C9A9;
}
.linklista{
    border: none;
    text-align: center;
    margin: 3px;
}
.tarsoldalak_plus{
    background-color: #E0C9A9;
    border-radius: 10px 10px 0 0;
    border-bottom: solid 2px #BDAF96;
}
.menu li a{
    color: #BDAF96;
}
.menu li a:hover{
    color: black;
    background-color: #BDAF96;
    border-radius: 5px;
}
.active-menu{
    border-bottom: solid 2px #BDAF96;
    border-radius: 5px;
    color: #BDAF96;
}
.kicsi-gomb{
    padding: 0px 3px 0px 3px;
    color: darkgreen;
    margin-left: 1px;
    margin-right: 1px;
}
.ui-dialog-titlebar{
    background-image: linear-gradient(#006080, #006080) !important;
    color: #39C3F1 !important;
    border: 1px solid black !important;
}​