body { font-family:rubik;font-size:11pt }
#header {
    box-shadow:0 0 10px rgba(0,0,0,0.5);
    color:#fff;height:40px;z-index:2500
}
#aboinfo {
    color:#222;
    background:#f5f5f5;
}
#search {
    color:#444;
    /* Permalink - use to edit and share this gradient. Permalink - gebruik om deze gradient te bewerken en te delen: https://colorzilla.com/gradient-editor/#ffffff+0,f3f3f3+50,ededed+51,ffffff+100;White+Gloss+%232 */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.black {
    /* Permalink - use to edit and share this gradient. Permalink - gebruik om deze gradient te bewerken en te delen: https://colorzilla.com/gradient-editor/#7d7e7d+0,0e0e0e+100;Black+3D */
    background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.blue {
    /* Permalink - use to edit and share this gradient. Permalink - gebruik om deze gradient te bewerken en te delen: https://colorzilla.com/gradient-editor/#258dc8+0,0c6ca0+100 */
    background: linear-gradient(to bottom,  rgba(37,141,200,1) 0%,rgba(12,108,160,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.box1 { width: 60px; padding:2px 5px;color:#fff;text-align: center;font-weight:500;font-family:oswald;font-size:14pt }
.box2 { padding:2px 5px;color:#000;text-align: left;font-weight:500;font-family:rubik;letter-spacing:-1px;font-size:12pt }

.boxo { background:#fa0 }
.boxb { background:#0af }
.boxg { background:#2a1 }
.boxd { background:#ddd }

.button_full {
    margin:0;padding:5px 10px;outline:none;border:1px solid #fff;box-shadow:0 0 10px rgba(0,0,0,0.5);
    border-radius:8px;
    color:#fff;font-family:oswald;font-weight:500;font-size:14pt;
}
#cats {
    position:absolute; top:40px; left:10px; background:#2a4;padding:10px;width:calc(100% - 40px);
    z-index:2000;max-width:200px;box-shadow:0 0 10px rgba(0,0,0,0.3);
    border-radius:0 0 8px 8px;display:none;
}
.catsitem {
    font-family:rubik;color:#fff;
    letter-spacing:-1px;font-size:12pt;font-weight:500;padding:5px 0;border-bottom:1px dotted #ccc;
}
.catsitem:last-child { border-bottom: 0 }

.regfield {
    padding:5px 10px;
    margin:5px  0;
    outline:none;
    border:1px solid #aaa;
    border-radius:5px;
    width:250px;
    max-width:100%;
    height:28px;
}
.regarea {
    padding:5px 10px;
    margin:5px  0;
    outline:none;
    border:1px solid #aaa;
    border-radius:5px;
    width:450px;
    max-width:100%;
    height:100px;
}
.button_reg {
    margin:15px 0;padding:5px 10px;outline:none;border:1px solid #aaa;box-shadow:0 0 5px rgba(0,0,0,0.3);
    border-radius:8px;
    color:#555;font-family:oswald;font-weight:500;font-size:11pt;
}

.ad { color:#eee; text-decoration: none }
.radio { margin:0 5px 0 0; width:12px;height:12px; }
.itemimage { width:100%;height:auto }
.tab { border-radius:5px 5px 0 0 ;height:30px; padding:5px 10px;background:#ddd;font-family:oswald;font-size:10pt;font-weight:700;float:left; }
.tab-active {  background:#eee; }
.meitem { border:1px solid #ccc; border-bottom:0 }
.meitem:last-child { border-bottom:1px solid #ccc}
.mycredits {
    position:absolute;top:38px;left:50%;transform:translateX(-50%);background:#22aa11;padding:3px 10px;color:#fff;
    font-family:oswald;font-weight:500;border-radius:0 0 5px 5px;box-shadow: 0 0 5px rgba(0,0,0,0.4);z-index:100;
    white-space: nowrap;transition-duration: 0.3s;
}

.mycredits.xs { left:100%;transform:translateX(-100%);}
.mi { background-size:cover;position:relative;background:#fff;float:left; width:calc(33.3% - 10px);margin:0 10px 10px 0;aspect-ratio: 1/1;border:1px solid #aaa;border-radius:5px }
.mi > .add { position:absolute; border-radius:8px;padding:3px 5px;top:5px;left:5px; font-size:13px;color:#fff;box-shadow:0 0 5px rgba(0,0,0,0.4);background:#0af }
.mi > .del { position:absolute; border-radius:8px;padding:3px 5px;top:5px;right:5px; font-size:13px;color:#fff;box-shadow:0 0 5px rgba(0,0,0,0.4);background:#a30 }

.loader {
    border: 8px solid #555; /* Light grey */
    border-top: 8px solid #fa5; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.center { display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) }