@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400&family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap');
/* The Fira Sans fonts above are the official fonts used by Sololearn*/

:root{
	--scrlBarColr: rgb(125, 150, 156);
	--scrlBarColrStrip: black;
	--blue: #dddddd70;
    --menuBarColor: #7a8354;
    --slidingMenuBGcol: #5c7b7c;
    --userDetailBG: #515C6F;
    --userDetailBorderCol: #646464;
    --uiBGcol: #cecaca;
    --anotherBGcol: #ffcbdd;
	--modBgCol: rgb(211, 145, 23);
    --spinnerCol: rgb(255, 210, 9);
    --menuBadge: rgb(255, 210, 9);
	--headerBGcol: rgba(139, 173, 189, 0);
	overflow-x: hidden;
    --white: #ffffff;
	--black: #000000;
}

input{
	padding: 0px 20px;
	width: 300px;
	height: 40px;
}

button{
	width: 100px;
	height: 44px;
	border-radius: 7px;
	border-color: grey;
}

*{
    padding: 0px;
    margin: 0px;
}

.wrapperBlueTick {
    position: relative;
    top: 6px;
    height: 33px;
    width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ccircle {
    position: relative;
    background: #00b01d00;
    border-radius: 100%;
    border-width: 2px;
    height: 32px;
    width: 34px;
    border-style: solid;
    border-color: rgb(37, 129, 204);

}

.checkMark {
    position: absolute;
    transform: rotate(50deg) translate(-50%, -50%);
    left: 27%;
    top: 43%;
    height: 16px;
    width: 4.5px;
    border-bottom: 2px solid rgb(37, 129, 204);
    border-right: 2px solid rgb(37, 129, 204);
}

.crosssign {
    display: inline-block;
    width: 22px;
    height: 22px;
    position: relative;
    transform: rotate(45deg);
}

.crosssign_circle {
    position: absolute;
    width: 32px;
    height: 32px;
    background-color: rgba(255, 255, 255, 0);
    border-radius: 32px;
    border-width: 2px;
    border-color: rgb(211, 23, 23);
    border-style: solid;
    left: 0;
    top: 0;
}

.crosssign_stem, .crosssign_stem2 {
    position: absolute;
    background-color: rgb(211, 23, 23);
    top: 82%;
    left: 82%;
    transform: translate(-50%, -50%);
}

.crosssign_stem {
    width: 2px;
    height: 22px;
}

.crosssign_stem2 {
    width: 22px;
    height: 2px;
}

.wrapperRedCross {
    height: 33px;
    width: 37px;
    position: relative;
    top:-4px;
    padding: 7px;
    display: inline;
    align-items: center;
    justify-content: center;
}

#futureDaysWrapper{
    height: 34px;
    width: 37px;
    position: relative;
    top: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#futureDaysCircle {
    width: 36px;
    height: 36px;
    background: rgba(122, 122, 122, 0.349);
    border-radius: 50%;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  text-align: center;
  padding: 8px;
}

@media screen and (min-width: 50px) {
    .blob {
        display: none;
        top:-140px;
        left:-20px;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        height: 423px;
        width: 97vw;
        max-width: 365px;
        z-index: -7;
    }

    #plussesDiv{
        position: relative;
        display:none;
        left: 22%;
        top:-40px;
        z-index: -4;
        max-width: 459px;
        width: 41%;
        height: 223px;
    }
}

@media screen and (min-width: 200px) {
    .blob {
        display: none;
        top:-140px;
        left:-40px;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        height: 423px;
        width: 90vw;
        max-width: 215px;
        z-index: -7;
    }

    #plussesDiv{
        position: relative;
        display:none;
        left: 58%;
        max-width: 459px;
        width: 41%;
        height: 223px;
    }
}

#scrollableCourseProgressDiv{
	padding-left:18px;
	width: 91%;
	height: 70%;
	overflow-x: hidden; /* Hide horizontal scrollbar */
	overflow-y: scroll; /* Add vertical scrollbar */
}

#certifTableContainer{
	padding-left:9px;
	width: 91%;
	height: 70%;
	overflow-x: scroll; /* Hide horizontal scrollbar */
	overflow-y: hidden; /* Add vertical scrollbar */
}

#scrollableCodeBitsDiv{
	padding-left:18px;
	width: 83%;
	height: 70%;
	overflow-x: hidden; /* Hide horizontal scrollbar */
	overflow-y: scroll; /* Add vertical scrollbar */
}


::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrlBarColr);
    border-radius: 10px;
    border: 2px solid var(--scrlBarColr);
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: rgba(114, 114, 114, 0.171);
}

@media screen and (min-width: 300px) {
    .blob {
        display: none;
        top:-50px;
        left:-32px;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        height: 423px;
        width: 90vw;
        max-width: 305px;
        z-index: -7;
    }

    #plussesDiv{
        position: relative;
        display:none;
        left: 59%;
        max-width: 459px;
        width: 41%;
        height: 223px;
    }
}

@media screen and (min-width: 400px) {
    .blob {
        display: none;
        top:-50px;
        left:-32px;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        height: 423px;
        width: 90vw;
        max-width: 365px;
        z-index: -7;
    }

    #plussesDiv{
        position: relative;
        display:none;
        left: 81px;
        width: 70vw;
        height: 223px;
    }
}

@media screen and (min-width: 500px) {
    .blob {
        display: none;
        top:-40px;
        left:2px;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        height: 423px;
        width: 90vw;
        max-width: 365px;
        z-index: -7;
    }

    #plussesDiv{
        position: relative;
        display:none;
        right: 11px;
        width: 80vw;
        height: 223px;
    }
}

@media screen and (min-width: 600px) {
    .blob {
        display: none;
        top:-40px;
        left:22px;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        height: 423px;
        width: 90vw;
        max-width: 365px;
        z-index: -7;
    }

    #plussesDiv{
        position: relative;
        display:none;
        top: -40px;
        left: 111px;
        width: 80vw;
        height: 223px;
    }
}

@media screen and (min-width: 700px) {
    .blob {
        display: none;
        top:-60px;
        left:62px;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        height: 423px;
        width: 90vw;
        max-width: 365px;
        z-index: -8;
    }

    #plussesDiv{
        position: relative;
        display:none;
        left: 211px;
        width: 80vw;
        height: 223px;
    }
}

@media screen and (min-width: 800px) {
    #plussesDiv{
        position: relative;
        display:none;
        left: -111px;
        width: 80vw;
        height: 183px;
    }

    #detailsUser{
        padding-top: 65px;
		align-items: left;
		align-self: left;
		text-align: left
    }

    #avatar_n_star_placeholder{
        padding-top: 39px;
    }
    
    .blob {
        display: none;
        top: -110px;
        left:-140px;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        height: 423px;
        width: 90vw;
        max-width: 365px;
        z-index: -7;
    }
    
    #gap{
        height: 60px!important;
        position: relative;
        display: block;
    }
	
	#upperUserName{
		text-align: left;
		align-items: left;
		align-self: left;
	}
	
	#connectedAccountss{
		text-align: left;
	}
}

@media screen and (min-width: 1000px) {
    #plussesDiv{
        position: relative;
        display:none;
        left: 59px;
        width: 80vw;
        height: 183px;
    }

    .blob {
        display: none;
        top: -110px;
        left:-140px;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        height: 423px;
        width: 90vw;
        max-width: 365px;
        z-index: -7;
    }

    #detailsUser{
        padding-top: 62px;
    }

    #avatar_n_star_placeholder{
        padding-bottom: 99px;
    }
}

@media screen and (min-width: 1400px) {
    #plussesDiv{
        position: relative;
        display:none;
        left: 481px;
        width: 80vw;
        height: 183px;
    }

    .blob {
        display: none;
        top: -110px;
        left:-140px;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        height: 423px;
        width: 90vw;
        max-width: 365px;
        z-index: -7;
    }

    #detailsUser{
        padding-top: 62px;
    }

    #avatar_n_star_placeholder{
        padding-bottom: 99px;
    }
}

.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{
    color:#000!important;
    background-color:#f1f1f13a!important
}

.w3-round-xlarge{
	border-radius:16px
}

.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before, .w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{
	content:"";
	display:table;
	clear:both
}


.w3-blue,.w3-hover-blue:hover{
	color:#fff!important;
	background-color:#2196F3!important
}

.w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{
	color:#fff!important;
	background-color:#607d8b!important
}

.w3-round-xlarge{
	border-radius:16px
}

body 
{
    font-family: 'Fira Sans', sans-serif;
    overflow-x: hidden;
}

#contt{
    position: relative;
    bottom: 51px;
    left: 135px;
    width: 43px;
    height: 30px;
    z-index: 8;
    display:none;
}

#starBg{
    border: 3px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.603);
    padding: 3px;
    border-radius: 170px;
    background-color: rgb(255, 255, 255);
    height: 30px;
    z-index: 7;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.466);
}

#svgg{
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    width: 85%;
    height: 30px;
    display: block;
    z-index: 6;
}

#theDp{
    border-radius: 80px;
    z-index: -1;
    width: 163px;
    height: 163px;
}

#avatar_n_star_placeholder {
    display: block;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    width: inherit;
    height: inherit;
    top: 0px;
    left: 0px;
}

.circle{
    z-index: 1;
    width: 180px;
    height: 180px;
    border-top: 1px solid var(--spinnerCol);
    border-bottom: 1px solid var(--spinnerCol);
    border-left: 1px solid rgba(0, 0, 0, 0);
    border-right: 1px solid rgba(0, 0, 0, 0);
    display: block;
    position: relative;
    top: -24%;
    left: 50%;
    margin-left: -96px;
    margin-top: -96px;
    border-radius: 200px;
    -moz-animation: rotate 11s infinitelinear;
    -webkit-animation: rotate 11s infinite linear;
    animation: rotate 11s infinite linear;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0);
}

#moderator{
    z-index: 11;
    display: none;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    bottom: 15px;
    padding-left: 8px;
    padding-right: 8px;
    width: fit-content;
    height: fit-content;
    border: 2px;
    border-style: solid;
    border-color: var(--modBgCol);
    border-radius: 15px;
    background-color: var(--modBgCol);
    box-shadow: 0 0 5px rgba(19, 19, 19, 0.322);
}

hr.styley { 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, grey, #9c8b8b, grey);
  background-image: -moz-linear-gradient(left, grey, #8c8b8b, grey);
  background-image: -ms-linear-gradient(left, grey, #8c8b9b, grey);
  background-image: -o-linear-gradient(left, grey, #8c8b8b, grey); 
}


.circle-inner{
    z-index: 4;
    width: 163px;
    height: 163px;
    background-color: rgba(124, 120, 114, 0.671);
    display: block;
    position: relative;
    top: -80%;
    left: 50%;
    margin-left: -86.7px;
    margin-top: -86.7px;
    border-radius: 80px;
    opacity: 1;
    box-shadow: 0 0 15px rgba(51, 51, 51, 0.747);
}

#svggg{
    padding-left: 5px;
    display: inline;
    width: 15px;
    height: 15px;
    z-index: -1;
}

.circle-small{
    z-index: 2;
    width: 170px;
    height: 170px;
    border-left: 1px solid var(--spinnerCol);
    border-right: 1px solid var(--spinnerCol);
    border-top: 1px solid rgba(0, 0, 0, 0);
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    display: block;
    position: relative;
    top: -53%;
    left: 50%;
    margin-left: -91px;
    margin-top: -91px;
    border-radius: 156px;
    -moz-animation: rotate-rev 45s infinite linear;
    -webkit-animation: rotate-rev 45s infinite linear;
    animation: rotate-rev 45s infinite linear;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0);
}

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

#c1{
    display: none;
}

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

#c2{
    display: none;
}

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

@-moz-keyframes rotate-rev{
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(-360deg);}
}

@-webkit-keyframes rotate-rev{
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(-360deg);}
}

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

.blob path {
    animation: blob 22s linear  infinite;
}

@keyframes blob {
    0% {d:path("M120,-157.6C152.7,-141.5,174.3,-102.6,194.8,-58.8C215.3,-14.9,234.6,33.8,228.4,80.8C222.2,127.8,190.4,173.1,148.1,184C105.8,195,52.9,171.5,-2.4,174.8C-57.8,178.2,-115.6,208.4,-137.5,190.9C-159.3,173.3,-145.3,108,-153,56.3C-160.7,4.6,-190.2,-33.4,-178.3,-54.2C-166.4,-75.1,-113.2,-78.8,-76.6,-93.6C-40,-108.3,-20,-134.2,11.9,-150.5C43.7,-166.8,87.4,-173.6,120,-157.6Z");}
    25% {d:path("M67.8,-97.1C87.8,-78.8,103.8,-58.9,117.4,-34.1C130.9,-9.4,142,20.2,139.5,50.7C137,81.2,120.8,112.6,95.3,150.1C69.8,187.7,34.9,231.3,3.3,226.8C-28.2,222.2,-56.4,169.3,-91.6,134.9C-126.8,100.5,-169,84.6,-179.6,57.1C-190.2,29.7,-169.3,-9.3,-155.2,-49.7C-141,-90.1,-133.7,-132,-109,-148.8C-84.2,-165.6,-42.1,-157.3,-9.1,-144.8C23.9,-132.2,47.8,-115.5,67.8,-97.1Z");}
    50% {d:path("M137.1,-191.3C172,-163.4,190.6,-115.7,197.2,-70.1C203.8,-24.4,198.5,19.2,178.9,51.5C159.3,83.9,125.5,105,93.3,129.6C61.1,154.1,30.6,182.1,1.1,180.6C-28.4,179.1,-56.8,148.2,-81.2,121.1C-105.6,94.1,-126.1,70.8,-141.6,41.6C-157.2,12.4,-168,-22.9,-153.9,-45C-139.8,-67,-100.7,-76,-70.9,-105.5C-41.1,-135,-20.6,-185,15.3,-206C51.1,-227.1,102.3,-219.1,137.1,-191.3Z");}
    75% {d:path("M123.7,-157.1C162.4,-142.2,197.2,-108.8,202.8,-70.8C208.3,-32.9,184.5,9.7,169,54.2C153.6,98.7,146.4,145.2,119.7,162.7C92.9,180.2,46.4,168.6,-1.9,171.1C-50.2,173.7,-100.3,190.4,-122.2,171.3C-144.1,152.3,-137.7,97.5,-144.1,52.7C-150.6,7.9,-169.9,-26.8,-170.5,-64.8C-171,-102.8,-152.8,-144,-121.3,-161.3C-89.7,-178.5,-44.9,-171.8,-1.2,-170.1C42.5,-168.5,85,-172,123.7,-157.1Z");}
    100% {d:path("M120,-157.6C152.7,-141.5,174.3,-102.6,194.8,-58.8C215.3,-14.9,234.6,33.8,228.4,80.8C222.2,127.8,190.4,173.1,148.1,184C105.8,195,52.9,171.5,-2.4,174.8C-57.8,178.2,-115.6,208.4,-137.5,190.9C-159.3,173.3,-145.3,108,-153,56.3C-160.7,4.6,-190.2,-33.4,-178.3,-54.2C-166.4,-75.1,-113.2,-78.8,-76.6,-93.6C-40,-108.3,-20,-134.2,11.9,-150.5C43.7,-166.8,87.4,-173.6,120,-157.6Z");}
}

.floatPlusSign {
   color: var(--modBgCol);
   font-size: 1.33em;
}

.floatPlusSigns{
    z-index: -4;
    margin:0px;
    padding: 5px;
    position: absolute;
    top: 5px;
    left: 5px;
    width: 80vw;
    height: 290px;
}

@-webkit-keyframes floatPlusSigns-moves{
    0%{
        transform:translate(0px,0px);
    }
    25%{
        transform:translate(5px,5px);
    }
    50%{
        transform:translate(-10px,-11px);
    }
    75%{
        transform:translate(30px,-21px);
    }
    100%{
        transform:translate(0px,0px);
    }
}

@keyframes floatPlusSigns-moves{
    0%{
        transform:translate(0px,0px);
    }
    25%{
        transform:translate(5px,5px);
    }
    50%{
        transform:translate(-10px,-11px);
    }
    75%{
        transform:translate(30px,-21px);
    }
    100%{
        transform:translate(0px,0px);
    }
}

.searchFormBox {
    margin:auto;
    background: #2f343b18;
    height: 40px;
    border-radius: 40px;
    padding: 10px;
    border-style: solid;
    border-color: grey;
}

.searchFormBox .searchInputt {
    width: 71%;
    padding: 0 6px;
}

.searchFormBox .searchButtonni {
    background: rgba(182, 182, 182, 0.719);
    color : #2f3640da;
}

.searchButtonni {
    color: white;
    float: right;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2f3640;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s;
}

.searchInputt {
    border:none;
    background: none;
    outline:none;
    float:left;
    padding: 0;
    color: var(--loaloa);
    font-size: 16px;
    transition: 0.4s;
    line-height: 40px;
    width: 43px;
}

#plusFloating{
    position: relative;
    display: none;
    border: 1px;
    border-style: solid;
    border-color: aqua;
}

.floatPlusSign{
    position: relative;
    z-index:-1;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    cursor:default;
    -webkit-animation-name:floatPlusSigns-moves2,floatPlusSigns-moves;
    -webkit-animation-duration:8s,8s;
    -webkit-animation-timing-function:linear,ease-in-out;
    -webkit-animation-iteration-count:infinite,infinite;
    -webkit-animation-play-state:running,running;
    animation-name:floatPlusSigns-moves2,floatPlusSigns-moves;
    animation-duration:8s,8s;
    animation-timing-function:linear,ease-in-out;
    animation-iteration-count:infinite,infinite;
    animation-play-state:running,running;
}

.column {
    float: left;
    width: 50%;
    padding: 10px;
    height: 300px; 
    box-sizing: border-box;
}

#codeBitDivPlaceHolder{
	height: 210px;
	margin-top: 46px;
	margin-bottom: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 18px;
}

#codeBitDiv{
    width: 543px;
    padding: 10px;
    height: 310px; 
    box-sizing: border-box;
}

.row:after {
    content: "";
    display: table;
    clear: both;
    box-sizing: border-box;
}

@media screen and (max-width: 800px) {
    .column {
        width: 100%;
    }
}

.floatPlusSign:nth-of-type(0){
    left: 11%;
    top: -5%;
    -webkit-animation-delay:0s,0s;
    animation-delay:0s,0s;
}

.floatPlusSign:nth-of-type(1){
    left:18%;
    top: -4%;
    -webkit-animation-delay:1s,1s;
    animation-delay:1s,1s;
}

.floatPlusSign:nth-of-type(2){
    left:19%;
    top: -4%;
    font-size: smaller;
    -webkit-animation-delay:6s,.5s;
    animation-delay:6s,.5s;
}

.floatPlusSign:nth-of-type(3){
    left:27%;
    top: -3%;
    -webkit-animation-delay:4s,2s;
    animation-delay:4s,2s;
}

.floatPlusSign:nth-of-type(4){
    left:68%;
    top: -3%;
    -webkit-animation-delay:2s,2.1s;
    animation-delay:2.1s,2s;
}

.floatPlusSign:nth-of-type(5){
    left:13%;
    top: -5%;
    font-size: smaller;
    -webkit-animation-delay:8s,3s;
    animation-delay:8s,3s;
}

.floatPlusSign:nth-of-type(6){
    left:69%;
    top: -4%;
    -webkit-animation-delay:6s,2s;
    animation-delay:6s,2s;
}

.floatPlusSign:nth-of-type(7){
    left:24%;
    top: -6%;
    -webkit-animation-delay:7.5s,1s;
    animation-delay:7.5s,1s;
}

.floatPlusSign:nth-of-type(8){
    left:66%;
    top: -3%;
    font-size: smaller;
    -webkit-animation-delay:1s,0s;
    animation-delay:1s,0s;
}

.floatPlusSign:nth-of-type(9){
    left:30%;
    top: -4%;
    -webkit-animation-delay:3.1s,1.53s;
    animation-delay:3.2s,1.52s;
}

.floatPlusSign:nth-of-type(10){
    left:65%;
    top: -5%;
    -webkit-animation-delay:1s,1.5s;
    animation-delay:1.7s,0.7s;
}

.floatPlusSign:nth-of-type(11){
    left:77%;
    top: -3%;
    -webkit-animation-delay:3.2s,1.5s;
    animation-delay:2.1s,3.1s;
}

.floatPlusSign:nth-of-type(12){
    left:3%;
    top: -4%;
    -webkit-animation-delay:2.5s,1.8s;
    animation-delay:1.8s,1.77s;
}

.floatPlusSign:nth-of-type(13){
    left:34%;
    top: 2%;
    -webkit-animation-delay:2.3s,1.5s;
    animation-delay:3.3s,2.7s;
}

#userDetails{
    position: relative;
    display: block;
    box-sizing: border-box;
}

#svgggg{
    width: 11px;
    height: 11px;
    color: rgb(255, 174, 0);
}

#bioStarNum{
    position: relative;
    width:fit-content;
    margin-left: auto;
    margin-right: auto;
}

.header {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    background-color: var(--headerBGcol);
    position: fixed;
    height: 60px!important;
    overflow: hidden;
    z-index: 10;
}

.main {
    margin: 0 auto;
    display: block;
    height: 100%;
    margin-top: 60px;
}

.mainInner{
    display: table;
    height: 100%;
    width: 100%;
    text-align: center;
}

.mainInner div{
    display:table-cell;
    vertical-align: middle;
    font-size: 3em;
    font-weight: bold;
    letter-spacing: 1.25px;
}

#sidebarMenu {
    color: var(--vulavula);
	height: 100%;
    position: fixed;
    left: 0;
    width: 250px;
    margin-top: 60px;
    transform: translateX(-250px);
    transition: transform 250ms ease-in-out;
    background: linear-gradient(180deg, var(--gradient1) 0%, var(--gradient2) 100%);
}

.sidebarMenuInner{
    width: 90%;
    margin:0;
    padding:0;
    border-top: 1px solid rgba(145, 145, 145, 0.1);
}

.sidebarMenuInner li{
    width: 90%;
    list-style: none;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.sidebarMenuInner li span{
    width: 90%;
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.50);
}

.sidebarMenuInner li a{
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}

input[type="checkbox"]:checked ~ #sidebarMenu {
    transform: translateX(0);
}

input[type=checkbox] {
    transition: all 0.3s;
    box-sizing: border-box;
    display: none;
}

.sidebarIconToggle {
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    position: fixed;
    z-index: 99;
    top: 22px;
    left: 15px;
    height: 22px;
    width: 22px;
}

.spinner {
    transition: all 0.3s;
    box-sizing: border-box;
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: #fff;
}

.toggle {
  --width: 50px;
  --height: calc(var(--width) / 2);
  --border-radius: calc(var(--height) / 2);

  display: inline-block;
  cursor: pointer;
}

.toggle__input {
	display: none;
}

.toggle__fill {
	position: relative;
	width: var(--width);
	height: var(--height);
	border-radius: var(--border-radius);
	background: #dddddd;
	transition: background 0.2s;
}

:root{
	--switchBG: url(https://i.ibb.co/Lzm2SPc/off.png);
}

.toggle__input:checked ~ .toggle__fill {
  background: #009578;
  --switchBG: url(https://i.ibb.co/yp7VdCK/on.png);
}

.toggle__fill::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: var(--height);
	width: var(--height);
	background-image: var(--switchBG);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
	border-radius: var(--border-radius);
	transition: transform 0.2s;
}

.toggle__input:checked ~ .toggle__fill::after {
  transform: translateX(var(--height));
}

.horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
}

.diagonal.part-1 {
    position: relative;
    transition: all 0.3s;
    box-sizing: border-box;
    float: left;
}

.diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 8px;
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -9px;
}

#backButton{
	position: absolute;
	top: 20px;
	right: 30px;
	font-size: larger;
	color: #ffffff;
	cursor: pointer;
}

#greenBtnHolder{
	height: 41px;
	margin: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#greenButtonActivityFeed{
	text-align: center;
	width: 250px;
	height: 46px;
	border-radius: 7px;
	color: #ffffff;
	background-color: green;
	cursor: pointer;
}

body{
	color: var(--loaloa);
	background-color: var(--smoothBGcol);
}

#seganikila{
	background-color: var(--smoothBGcol);
	color: var(--loaloa);
}

#sidebarMenu{
	color: var(--vulavula);
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -60px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}