.pun table {
 width: 100%;
 border-collapse: collapse;
 border-spacing: 0;
}

.pun td, .pun th {
 padding: 4px 6px;
 text-align: left;
 background: #272726;
}

.pun .rowodd, .pun .roweven { background-color: #252524; }
.pun .roweven:hover, .pun .rowodd:hover { background-color: #20201f; }


.hidden { display: none!important; }
.fake-link { cursor: pointer; }
.full-width { width: 100%; }
.centered { text-align: center; margin: 0 auto; }


@-webkit-keyframes sk-bouncedelay {
 0%, 100%, 80% { transform: scale(0); }
 40% { transform: scale(1); }
}
@keyframes sk-bouncedelay {
 0%, 100%, 80% { transform: scale(0); }
 40% { transform: scale(1); }
}


#intro-overlay {
 --stay: 4s;        
 --fade: 1.0s;      
 
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: #101010;
 z-index: 9999;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 font-family: 'Raleway', sans-serif;
 opacity: 1;
 animation: overlayHide var(--fade) ease var(--stay) forwards;
}

@keyframes overlayHide {
 to { opacity: 0; visibility: hidden; }
}

#intro-overlay .bar {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 3px;
 background: linear-gradient(to right, #1e5799 0%, #f300ff 50%, #e0ff00 100%);
 border-bottom: 1px solid #000;
}

#intro-overlay .logo {
 font-size: 62px;
 color: #eee;
 font-weight: 400;
 margin: 0;
}
#intro-overlay .logo span {
 color: #6cc312;
}

#intro-overlay .text {
 color: #ddd;
 font-size: 1.75em;
 margin-top: 10px;
}

#intro-overlay .loader {
 margin-top: 12px;
}
#intro-overlay .loader div {
 display: inline-block;
 width: 14px;
 height: 14px;
 border-radius: 50%;
 background: #eee;
 animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
#intro-overlay .loader .one { animation-delay: -0.32s; }
#intro-overlay .loader .two { animation-delay: -0.16s; }


body {
 --body-fade: 0.8s;    
 
 opacity: 0;
 animation: bodyFade var(--body-fade) ease 1s forwards;
}
@keyframes bodyFade {
 to { opacity: 1; }
}


@media only screen and (max-width: 800px) {
 .postmsg iframe { max-width:100%; height: auto; }
}

@media only screen and (max-width: 600px) {
 .pun .postfootright, .pun .postright { border-left-width:0; }
 .pun .postfootleft, .pun .postleft { display: none; }
 .pun .txtarea { width: 90%; }
 .pun .blockmenu { width: 100%; }
}

#edit-modal, #add-modal {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,0.7);
 z-index: 9998;
 display: none;
 align-items: center;
 justify-content: center;
 font-family: 'Raleway', sans-serif;
}

#edit-modal.show, #add-modal.show {
  display: flex !important;
}

#edit-modal .modal-box, #add-modal .modal-box {
 background: #272726;
 border: 1px solid #444;
 width: 90%;
 max-width: 550px;
 padding: 20px;
 color: #eee;
}

#edit-modal .modal-box h3, #add-modal .modal-box h3 {
 margin: 0 0 14px 0;
 font-size: 18px;
 color: #6cc312;
}

#edit-modal .form-row, #add-modal .form-row {
 margin-bottom: 10px;
}

#edit-modal label, #add-modal label {
 display: block;
 font-size: 13px;
 color: #ccc;
 margin-bottom: 4px;
}

#edit-modal input, #add-modal input {
 width: 100%;
 padding: 8px;
 background: #222;
 border: 1px solid #444;
 color: #fff;
 font-size: 14px;
 font-family: inherit;
 box-sizing: border-box;
}

#edit-modal .modal-buttons, #add-modal .modal-buttons {
 margin-top: 16px;
 display: flex;
 gap: 10px;
 justify-content: flex-end;
}

#edit-modal button, #add-modal button {
 padding: 8px 16px;
 background: #333;
 border: 1px solid #666;
 color: #fff;
 cursor: pointer;
 font-family: inherit;
}

#edit-modal button#save-btn, #add-modal button#add-save-btn {
 background: #6cc312;
 border-color: #5aa810;
 color: #fff;
}

#edit-modal button#close-btn, #add-modal button#add-close-btn {
 background: #444;
}

.pun table tbody tr {
 cursor: pointer;
}