.compleat-level-head{background: #7a859c;}
.text-primary {color: rgb(1 97 90) !important;}
.btn-primary:hover, .sppb-btn-primary:hover {
    border-color: #04837a;
    background-color: #029086;
}
.tox .tox-statusbar__branding svg {
    display: none; }
.permanent-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px; /* Adjust width */
    height: 100%;
    verflow-y: auto;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
    z-index: 9999;
}
.tox-tinymce {
    border: 2px solid #9fef00 !important;} 

.menu  a:hover{font-size:27px !important;}


.menu-child li{margin:10px 0px; font-family: 'VT323';}
.offcanvas-menu .offcanvas-inner ul.menu>li>a, .offcanvas-menu .offcanvas-inner ul.menu>li>span {font-size:25px;}
.sp-page-title .breadcrumb { margin: 5px 0 0 0; }
.sp-page-title {
    padding: 15px 0; }

body {
    margin-left: 260px; /* Push main content */
    overflow: auto !important; /* Restore scrolling */
    background-image: linear-gradient(165deg, #a4b1cd 0%, rgb(180 216 232) 128%);
    color:#03283e !important;
}

.offcanvas-menu {
    position: fixed;
    left: -250px;
    top: 0;
    width: 260px;
    height: 100%;
    background: #03283e;
    color: #fff;
    transition: left 0.3s ease;
    z-index: 9999;
}

.offcanvas-menu.active {
    left: 0;
}

.offcanvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.offcanvas-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.offcanvas-menu .offcanvas-inner ul.menu li.active a {
   color: #01112e;
    background: #a4b1cd;
    padding: 12px 16px;
}

.offcanvas-overlay {
    background: none;  backdrop-filter: blur(0px);}

.offcanvas-menu .offcanvas-inner ul.menu>li a, .offcanvas-menu .offcanvas-inner ul.menu>li span {
    color: #ffffff;
}

.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>a>.menu-toggler, .offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>.menu-separator>.menu-toggler {
    color: #fff;
}

.header-sticky{padding-left: 260px;}

#sp-footer, #sp-bottom {
    background: #161c27;  position: fixed;
    bottom: 0px;
    width: 100%; z-index:99;}
#sp-footer .container-inner {
    padding: 10px 0;}
.progress-bar {background-color: #0345bf;}
.offcanvas-menu .offcanvas-inner ul.menu>li li a {
    color: #fff;
}
.offcanvas-menu .offcanvas-inner ul.menu>li>ul li a {
    font-size: 24px !important;}

 /* #sp-main-body{padding: 0% 4% !important;}*/

.skill-circle-item p{font-size:24px;}
.leader-box{border:1px solid #b5b5b5; padding:5px;}
.prof-image{    width: 100%;
    height: 200px;
    object-fit: cover;}
.statitics-table{margin-bottom:0px;}
.topper-flag-img{display:inline;}
.topper-flag{text-align:right;}
.best-org-image{ width: 100%;
    height: 180px;
    object-fit: cover;}
.game-tittle-point{background: black;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 20px 10px;
    width: 60%;
    float: left;}
.game-score-point{width:40%; float:left;
     background: #0fa89d;
    padding: 8px 10px;
    font-size: 33px;
    font-weight: bold;
    color: #fff;              
}
.team-score-point{background: #505558;
float:left; width:50%; font-size:18px;
padding: 5px 10px; color:#fff;
}
.team-score-score-point{background: #232121;
float:left; width:50%; font-size:18px;
padding: 5px 10px; color:#fff;
}
.modal-backdrop {display:none;}
#sp-header{background-image: linear-gradient(165deg, #E1E8FD 0%, rgba(241, 216, 180, 0.47) 128%);}
#system-message-container {position: relative !important; top:20%; left:35%; max-height:100px;}

.joomla-alert--close{z-index:999; }
#worldrank-controls .form-control{ background: #ceddeb !important;}

.typewriter {
  margin-bottom:0px;
  display: inline-block;
  overflow: hidden;
  border-right: 2px solid currentColor; /* caret */
  white-space: nowrap;
  animation: typing 4s steps(16) infinite,
             caret 0.6s steps(1) infinite;
}

@keyframes typing {
  0%   { width: 0ch }          /* start */
  40%  { width: 16ch }         /* fully typed */
  60%  { width: 16ch }         /* hold (pause) */
  100% { width: 0ch }          /* delete */
}

@keyframes caret {
  50% { border-color: transparent }
}

.typewriter::before {
  content: attr(data-text);
}