*{margin: 0;padding: 0;box-sizing: border-box;font-family: "Montserrat", sans-serif;font-size:14px;}
a{text-decoration: none;color:inherit;}

body{overflow-x: hidden;}

:root{
    --cor-branca:#FFFFFF;
    --cor-azulEscuro:#17244A;
    --cor-azulClaro:#1F2F60;
    --cor-cinza:#a5a5a5;
    --cor-bg:#E9E9E9;
    --btn-add:#199635;
    --btn-addHover:#1faf3f;
    --btn-erro:#d80000;
}

.container{width:100%;height:100vh;display:flex; flex-wrap: nowrap;flex:2;}
i{font-family:inherit;font-weight:200;}
.titulo{padding:10px 0;border-bottom:1px solid var(--cor-bg);font-size:20px;width:100%;display:block;color:var(--cor-azulClaro);}
.titulo p{font-size:20px;}
.space-between{display:flex;align-items:center;justify-content: space-between;}
button{padding:10px 15px;border:none;transition: all 0.5s ease-in-out;color:var(--cor-branca);border-radius:5px;}
.btn-add{background-color:var(--btn-add);}
.btn-del{background-color:var(--btn-erro);}
.btn-add:hover{background-color:var(--btn-addHover);}
.btn-add i{padding-right:10px;}

/* MENSAGENS */
.msg{width:100%;height:100vh;position: fixed;top:0;left:0;background-color:rgba(255, 255, 255, 0.8);display:flex;justify-content:center;align-items: center;z-index: 1000;}
.box-msg{width:400px;padding:50px;color:var(--cor-branca);border-radius:5px;text-align: center;}
.box-msg-ok{background-color:var(--btn-add);}
.box-msg-erro{background-color:var(--btn-erro);}
.box-msg-perg{background-color: var(--cor-azulClaro);}
.box-msg button{padding:10px;width:45%;margin-top:20px;border:none;border-radius:5px;}

/* FORMULÁRIOS */
form{padding:20px;display:grid;grid-template-columns:50% 50%;gap:5px;}
.form{visibility:hidden;position: fixed;top:-100%;background-color:var(--cor-branca);width:50%;left:50%;padding:50px;transform: translateX(-50%);box-shadow:0 0 10px var(--cor-azulClaro);}
.form.form-ativo{visibility: visible;top:10%;}
form label{display:block;width:100%;}
.duplo{display:grid;grid-template-columns:50% 50%;gap:5px;}
form input, form select, form textarea{border:1px solid var(--cor-bg);width:100%;padding:10px;margin-bottom:5px;}
form input:focus, form select:focus, form textarea:focus{outline:none;}

/* TABELAS */
table{width:100%;border-collapse:collapse;}
tr{border:1px solid var(--cor-bg);}
th, td{padding:10px;}
tbody tr:nth-child(even) {background: #f2f2f2;}
tbody tr:nth-child(odd) {background:var(--cor-bg);}
thead tr{background-color:var(--cor-azulClaro);color:var(--cor-branca);}
.tb-loterias td{width:5%;text-align: center;}
.tb-loterias td + td{width:75%;text-align: left;}
.tb-loterias td + td + td{width:20%;text-align: center;}
.tb-loterias td + td + td + td{width:5%;}
.tb-concursos td{width:5%;text-align: center;}
.tb-concursos td + td{width:40%;text-align: left;}
.tb-concursos td + td + td{width:20%;text-align: center;}
.tb-concursos td + td + td + td + td{width:5%;}
.tb-boloes td{width:5%;text-align: center;}
.tb-boloes td + td{width:60%;text-align:left;}
.tb-boloes td + td + td{width:10%;text-align: center;}
.tb-boloes td + td + td + td{width:5%;}

header{width:15%;height:100%;background-color: var(--cor-azulEscuro);padding:20px 0px;}
.box-header ul{display:block;list-style:none;color:var(--cor-branca);padding:50px 0;}
.box-header li{padding:10px;transition: all 0.5s ease-in-out;}
.box-header li:hover{padding:10px;background-color:var(--cor-azulClaro);}
.box-header li:hover{transform: translateX(10px);}

.painel{width:85%;height:100vh;padding:20px;}

.jogos{margin-bottom:20px;border-bottom:1px solid var(--cor-cinza);}
.jogos ul{display:flex;flex-wrap: wrap;justify-content:start;padding:10px 0;gap:0.66%;}
.jogos li{display:flex;flex-wrap: wrap;justify-content:start;padding:10px;width:24.5%;background-color: var(--cor-bg);position: relative;margin:10px 0;}
.jogos legend{width:100%;padding:10px;}
.jogos p{padding:3px;width:30px;height:30px;margin:2px;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;border-radius:20px;color:var(--cor-branca);}
.jogos p{background-color:var(--cor-azulClaro);}
.jogos .num-jg{background-color: var(--cor-cinza);}
.jogos a{display:block;}
.jogos i{position: absolute;top:-5px;right:-5px;font-size:25px;color:var(--btn-add);transition:all 0.5s ease-in-out;}
.jogos .jg-add{color:var(--btn-add);}
.jogos .jg-add:hover{color:var(--btn-addHover);}
.jogos .jg-del{color:var(--btn-erro);}