:root {
    --swa-bg-opacity: #515b6538;
}


/*---------------------
>>> NEW CLASS
----------------------- */
@media (max-width: 575.98px) {.w-xs-100 {width: 100% !important;}.w-xs-75 { width: 75% !important;}.w-xs-50 {width: 50% !important;}.w-xs-25 { width: 25% !important;}}
@media (min-width: 576px) {.w-sm-100 {width: 100% !important;}.w-sm-75 {width: 75% !important;}.w-sm-50 {width: 50% !important;}.w-sm-25 {width: 25% !important;}}
@media (min-width: 768px) {.w-md-100 {width: 100% !important;}.w-md-75 {width: 75% !important;}.w-md-50 {width: 50% !important;}.w-md-25 {width: 25% !important;}}
@media (min-width: 992px) {.w-lg-100 {width: 100% !important;}.w-lg-75 {width: 75% !important;}.w-lg-50 {width: 50% !important;}.w-lg-25 {width: 25% !important;}}
@media (min-width: 1200px) {.w-xl-100 {width: 100% !important;}.w-xl-75 {width: 75% !important;}.w-xl-50 {width: 50% !important;}.w-xl-25 {width: 25% !important;}}
.x-small {font-size: .75em;}
.sub-text {display: block;font-size: .8em;margin-top:-4px}
.text-justify {text-align: justify;word-wrap: break-word;overflow-wrap: break-word;hyphens: auto;}
.transparent-box {position: relative;background-color: var(--swa-bg-opacity);}
.swa-spin {-webkit-animation: swaSpinner 5s linear infinite;animation: swaSpinner 5s linear infinite;}
/*---------------------
>>> STYLING
----------------------- */
#swakarsa{display: flex;flex-direction: column;min-height: 100vh;}
main{flex:1;}
a {text-decoration:none;}
a:hover {text-decoration:none;}
.nav-link:hover, .nav-link:focus{background-color:var(--swa-bg-opacity)}
.navbar-toggler:focus {box-shadow:none !important}
.postingan{background-color: var(--swa-bg-opacity)}
.box .start {width:30%}
.box .end {width:70%;padding-left:.65em !important}
.box .end > .post-opt {margin-top:0 !important}
.copier {position:relative}
.copy-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #198754 transparent transparent transparent;
}
.content p {text-align: justify;}
li.comment {list-style:none;}
.comment-text p {margin-bottom: 0;}


/*---------------------
>>> ANIMATION DEFINITION
----------------------- */
@keyframes swaSpinner {
0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
}
}