/* Custom font */
@font-face { font-family: 'thedigitalcube-forum'; src: url( '../fonts/thedigitalcube-forum/thedigitalcube-forum.eot?29437' ); src: url( '../fonts/thedigitalcube-forum/thedigitalcube-forum.eot?29437#iefix' ) format( 'embedded-opentype' ), url( '../fonts/thedigitalcube-forum/thedigitalcube-forum.woff2?29437' ) format( 'woff2' ), url( '../fonts/thedigitalcube-forum/thedigitalcube-forum.woff?29437' ) format( 'woff' ), url( '../fonts/thedigitalcube-forum/thedigitalcube-forum.ttf?29437' ) format( 'truetype' ), url( '../fonts/thedigitalcube-forum/thedigitalcube-forum.svg?29437#thedigitalcube-forum' ) format( 'svg' ); font-weight: normal; font-style: normal; }
[class^='tdcf-']:before, [class*=' tdcf-']:before { font: 12pt/1 'thedigitalcube-forum'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* General */
body.forum-loading { overflow: hidden; }
body.forum-loading:before { content: ' '; display: block; position: fixed; z-index: 9999; top: 0; left: 0; right: 0; bottom: 0; background: rgba( 0, 0, 0, .6 ); }
body.forum-loading:after { content: ' '; display: block; position: fixed; z-index: 10000; top: 50%; left: 50%; width: 60px; aspect-ratio: 1; margin: -30px 0 0 -30px; border-radius: 50%; border: 5px solid #fff; border-top-color: #00a1e9; animation: forum-loading-spin 1s linear infinite; }
@keyframes forum-loading-spin { 0% { transform: rotate( 0deg ); } 100% { transform: rotate( 360deg ); } }

/* Topic */
#topic { box-shadow: 0 0 5px 2px #0000001a; border-radius: 10px; margin: 0 0 17px; overflow: hidden; }
#topic h1 { font-size: 14pt; display: flex; padding: 10px 17px; background: #1c1f87; color: #fff; margin: 0; }
.message { display: flex; background: #fff; }
.message + .message { border-top: 1px solid #efefef; }
.message > aside { width: 200px; text-align: center; padding: 18px 12px; }
.message > aside figure { margin: 0 0 7px; font-size: 10pt; }
.message > aside img { display: block; margin: 0 auto 8px; border-radius: 50%; width: 65px; aspect-ratio: 1; object-fit: cover; box-shadow: 0 0 5px 2px #0000001a; border: 1px solid #dfdfdf; }
.message > aside em { background: #0d9de0; color: #fff; font-style: normal; font-size: 8pt; padding: 4px 6px; border-radius: 9px / 11px; display: inline-block; line-height: 1.4; }
.message > section { width: calc( 100% - 200px ); padding: 22px 12px; }
.message > section > aside { font-size: 9pt; color: #afafaf; margin: 0 0 5px; display: flex; text-align: right; justify-content: end; gap: 10px; }
.forum-message { margin: 0; font-size: 11pt; }
.forum-message > *:last-child { margin-bottom: 0; }
.forum-attachments { display: flex; gap: 4px; flex-direction: column; padding: 10px 20px; }
.forum-attachments a { width: max-content; max-width: 100%; font-size: 10pt; position: relative; padding: 0 0 0 18px; }
.forum-attachments a:before { content: '\f07b'; font: 12pt/1 'thedigitalcube-forum'; font-size: 9pt; color: #00a1e9; position: absolute; top: 5px; left: 0; }
.signature { background: #f5f5f5; padding: 10px 15px; border-radius: 10px; font-size: 9pt; margin: 12px 0 0; }

/* Forum actions */
.tdcf-cog:before { content: '\e800'; }
.forum-actions { width: max-content; font-size: 10pt; position: relative; display: flex; align-items: center; max-width: 100%; cursor: pointer; line-height: .4; }
.forum-actions i { color: #00a1e9; }
.forum-actions ul { margin: 0; display: none; position: absolute; background: #FFF; border: 1px solid #d0d0d0; border-radius: 5px; right: 0; z-index: 1; top: 22px; white-space: nowrap; overflow: hidden; }
.forum-actions ul button { width: 100%; display: block; border: 0; background: 0; padding: 8px 10px; font-size: 9pt; line-height: 1; transition: all .4s; cursor: pointer; }
.forum-actions ul button:hover { color: #FFF; background: #1bb8c1; }
.forum-actions ul button:active, .forum-actions ul button:focus { outline: 0; }

/* Popups */
#popup { background: rgba( 0, 0, 0, .6 ); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; }
#popup > aside { box-shadow: 0 0 5px 2px #0000001a; border-radius: 12px; background: #FFF; color: #000; position: absolute; top: 50%; left: 50%; z-index: 10001; transform: translate( -50%, -50% ); box-sizing: border-box; width: 800px; max-width: 90%; }
#popup > aside > svg { position: absolute; top: 10px; right: 10px; cursor: pointer; transition: all .4s; }
#popup > aside > svg:hover { transform: rotate( 45deg ); }
#popup h1 { position: static; text-align: center; margin: 0; padding: 30px 0 20px; }
#popup h1 + hr { width: 30px; margin: 5px auto 10px; height: 4px; background: #d0d1ff; border: 0; }
#popup form { padding: 20px 20px 26px; line-height: 1.3; text-align: center; }
#popup p { margin: 0 0 12px; }
#popup .ql-editor { min-height: 130px; }
.popup-buttons { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.forum-cancel { overflow: hidden; position: relative; z-index: 1; border: 0; font-weight: 600; text-transform: uppercase; background: #f5f5f5; color: #000; padding: 8px 12px; border-radius: 5px; font-size: 11pt; margin: 0; display: block; width: max-content; max-width: 100%; cursor: pointer; transition: all .4s; }
.forum-cancel:after { content: ' '; display: block; bottom: 0; top: 0; left: 50%; transform: translate(-50%); position: absolute; z-index: -1; transition: all .4s; background: #00a0eb; width: 0; }
.forum-cancel:hover { color: #fff; }
.forum-cancel:hover:after { width: 100%; }
.forum-cancel:active, .forum-cancel:focus { outline: 0; }
#edit-message { width: 600px; margin: auto; max-width: 100%; }
[for='edit-forum-message'] { position: relative; top: 7px; align-self: start; }

/* Pagination */
#forum-pagination { display: block; margin: 0 0 0 auto; box-shadow: 0 0 5px 2px #0000001a; border-radius: 6px; font-size: 0; width: max-content; max-width: 100%; overflow: hidden; }
#forum-pagination a { transition: all .4s; padding: 5px 9px; background: #fff; display: inline-block; vertical-align: middle; font-size: 12pt; }
#forum-pagination a:hover, #forum-pagination .active { background: #1bb8c1; color: #fff; font-weight: 600; }

/* Post a reply */
#forum-add-post { border-radius: 10px; box-shadow: 0 0 5px 2px #0000001a; background: #fff; border-bottom: 3px solid #212386; padding: 18px 30px 33px; margin: 30px 0; }
#forum-add-post h2 { line-height: 1; background: #00a0eb; color: #fff; padding: 10px 13px; width: max-content; font-size: 13pt; margin: 0 0 17px; position: relative; left: -30px; }
#forum-add-post > section { width: 500px; margin: auto; max-width: 100%; }
#forum-add-post > section > section { display: flex; gap: 20px; }
#forum-add-post > section > section .line { flex: 1; }
#forum-add-post [type="submit"] { margin: 23px auto 0; width: min-content; display: block; max-width: 100%; }
.ql-editor { min-height: 130px; }
#forum-add-post [type='file'] + small, #edit-message [type='file'] + small { display: block; font-size: 9pt; color: #6e6e6e; margin: 4px 0; text-align: left; }
.attachments-preview { display: flex; flex-direction: column; font-size: 10pt; gap: 14px; }
.attachments-preview figure { display: flex; gap: 10px; background: #f5f5f5; box-shadow: 0 0 6px 1px #dbdbdb; border-radius: 5px; margin: 0; align-items: center; position: relative; }
.attachments-preview figure:first-of-type { margin-top: 10px; }
.attachments-preview .existing-attachment:after { content: 'Current'; font-size: 8pt; color: #0d9de0; background: #fff; border-top-right-radius: 5px; position: absolute; top: 0; right: 0; display: block; padding: 2px 6px; z-index: 1; letter-spacing: .4px; }
.attachments-preview div { width: 30px; text-align: center; aspect-ratio: 1; line-height: 30px; }
.attachments-preview img { display: block; width: 30px; aspect-ratio: 1; object-fit: cover; }