body {
    font-family:  Geneva, Verdana, sans-serif;
}

.home{
    position:absolute;
    top:5px;
    left:5px;
    z-index:2;
    color:orange;
}

#dvCookieMessage {
    top: 200px;
    position: absolute;
    left: calc(50% - 155px);
    width: 300px;
    background-color: #000000a8;
    border: orange 8px solid;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 10px 8px 10px rgba(200, 128, 128, 0.5);
    z-index: 99999999;
    color: white;
    font-weight: 600;
    font-family: sans-serif;
}

.mybucketlisttr {
    vertical-align: top;
}

#bucketsuggestion{
    width:calc(100% - 70px)
}
.dddisable {
    background: none;
    border: none;
    opacity: 0.6;
    pointer-events: none;
}

.distext{
    color:silver;
}



input[type="radio"] {
    appearance: none;
    border: 1px solid #d3d3d3;
    width: 30px;
    height: 30px;
    content: none;
    outline: none;
    margin: 0;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

input[type="radio"]:checked {
    appearance: none;
    outline: none;
    padding: 0;
    content: none;
    border: none;
}

input[type="radio"]:checked::before {
    position: relative;
    color: green !important;
    content: "\00A0\2713\00A0" !important;
    border: 1px solid #d3d3d3;
    font-weight: bolder;
    font-size: 21px;
}

input[type="radio"]:enabled {
    background-color: none;
}
input[type="radio"]:disabled {
    background-color: silver;
}

.FBButton {
    width: 180px;
    height: 42px;
    background: url(/imgs/FBBtn2.png) no-repeat;
    position: relative;
    bottom: -300px;
    z-index: 9999;
    left: 240px;
}

#loginform {
    width: 450px;
    height: 250px;
    background-color: floralwhite;
    padding: 10px;
    border: 0px solid black;
    border-collapse: collapse;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 20px;
    padding-top: 40px;
    z-index: 99;
    position: absolute;
    right: 50px;
    top: 50px;
}


#adminform {
    width: 450px;
    height: 250px;
    background-color: floralwhite;
    padding: 10px;
    /*cellspacinng: 10;
cellpadding: 10;*/
    border: 0px solid black;
    border-collapse: collapse;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 20px;
    padding-top: 40px;
    z-index: 99;
    position: absolute;
    top: 100px;
    right: 100px;
}


.LoginPopup {
    position: absolute;
    right: 25px;
    top: 10px;
    z-index: 99999;
    width: 490px;
    height: 320px;

}

.othersplantop {
    font-size: 26px;
    color: green !important;
}

.plandesc {
    background-color: orange;
    margin: 10px;
    text-align: left;
    color: black;
    font-weight: 500;
    font-size: larger;
    border-radius: 0 50px 50px 50px;
    padding: 20px;
    padding-top: 10px;
}

planlefttables td, th { /* table cells */
    padding: 10px;
}

.aiicon{
    width:40px;
}


.MyWishItemPlan {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 40px;
    color: black;
    background-color: white;
    font-weight: 600;
    width: 100%;
    display: grid;
    justify-items: center;
    margin-top: -25px;
    border: 3px solid black;
    border-radius: 10px;
}
.MyWishItemPlansubold {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 20px;
    color: orange;
    display: grid;
    justify-items: end;
    font-weight:600;
}
.MyWishItemPlansub {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 20px;
    color: black;
    display: grid;
    justify-items: center;
    width: 280px;
    align-self: end;
    position: absolute;
    right: 20px;
    border-bottom: 3pt black solid;
    border-left: 3px black solid;
    border-right: 3px black solid;
    border-radius: 0 0 10px 10px;
    border-top: 10px solid white;
    background-color: black;
    color: white;
}


.btn-xs {
    width: 100px;
    height: 22px;
    background-color: orange;
    display: block;
    border-radius: 10px;
    /* border: silver 1px solid; */
    text-align: center;
    align-content: center;
    font-family: sans-serif;
    box-shadow: 3px 2px 3px rgba(200, 128, 128, 0.5);
    position: absolute;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
}
.btn-xs:hover {
    right: 12px ;
    bottom: 12px;
    box-shadow: 5px 3px 5px rgba(200, 128, 128, 0.5);
}
.btn-xs:active {
    right: 8px ;
    botton:8px;
    box-shadow: 1px 1px 1px rgba(200, 128, 128, 0.5);

}

.cuin{
width:100%;
}
.cutxt {
    width: 100%;
    height: 200px;
}

.storytoptext {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.storys {
}

.story {
    background-color: white;
    margin-bottom: 10px;
    border-radius: 15px;
    padding: 8px;
    position: relative;
    border: 2pt black solid;
    box-shadow: 0 4px 8px 0 rgba(255, 50, 0, 0.2);
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}
.storysubject {
    font-size: larger;
    font-weight: 900;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding-bottom: 5px;
    color: white;
    background-color: darkorange;
    border-radius: 10px;
    padding-left: 5px;
}
.storytext {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding-bottom: 20px;
}

.storylikes {
    position: absolute;
    right: 5px;
    top: 0px;
    color:black;
}


.imgreportdiv {
    width: 26px;
    height: 26px;
    border-radius: 25px;
    position: absolute;
    top: -4px;
    right: 60px;
    align-content: center;
    /* align-self: center; */
    display: grid;
    justify-content: center;
    justify-items: center;
}

.imgreportdiv:hover {
    width: 28px;
    height: 28px;
    border-radius: 30px;
    position: absolute;
    top: -3px;
    right: 60px;
    align-content: center;
    background-color: orange;
}

.reportimg {
    width: 22px;
}


.likeimg {
    width:24px;
}



.imglikediv {
    width: 26px;
    height: 26px;
    border-radius: 25px;
    position: absolute;
    top: -4px;
    right: 30px;
    align-content: center;
    /* align-self: center; */
    display: grid;
    justify-content: center;
    justify-items: center;
}
.imglikediv:hover {
    width: 28px;
    height: 28px;
    border-radius: 30px;
    position: absolute;
    top: -3px;
    right: 30px;
    align-content: center;
    background-color: orange;
}

.storyby {
    position: absolute;
    /* left: 50%; */
    color: orange;
    border: 1pt orange solid;
    border-radius: 10px;
    width: 45%;
    padding-left: 5px;
    right: 7px;
    bottom: 4px;
}


.newstory {
    width: 100%;
    height: calc(100% - 130px);
}

.nestorysubbtn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    margin-top:10px;
}

.storytitle{
    width:50%;
    margin-bottom:10px;
}

#usermessages {
    /*background-color: rgb(255 235 190);*/
    width: 100%;
    font-family: sans-serif;
}

.usermessagename {
    /*background-color: rgb(255 235 190);*/
    font-weight: 800;
    font-family: sans-serif;
}
.usermessagedate {
    /*background-color: rgb(255 235 190);*/
    display: flex;
    justify-content: flex-end;
    font-family: sans-serif;
}
.usermessagesub {
    /*background-color: rgb(255 235 190);*/
    font-weight: 600;
    font-family: sans-serif;
}
.usermessagebody {
    /*background-color: rgb(255 235 190);*/
    border-bottom: dashed 2pt orange;
    font-family: sans-serif;
    font-weight: 200;
}

.srchmesstxt {
    border-radius: 25px 0 0 25px;
    padding-left: 6px;
    border: silver 1pt solid;
    height: 22pt;
    width: 300px;
}

.srchmessbtn {
    border-radius: 0 25px 25px 0;
    border: silver 1pt solid;
    height: 25pt;

}

.srchmessbtn:hover {
    border-radius: 0 25px 25px 0;
    border: silver 1pt solid;
    background-color: orange;
}



.LMN {
    background-color: red;
    height: 32px;
    width: 32px;
    position: absolute;
    top: -10px;
    right: -10px;
    border-radius: 20px;
    display: none;
    align-content: center;
    font-weight: bold;
    color: white;
    font-size: large;
    font-family: sans-serif;
}


.friendrequestscard {
    width: calc(100% - 50px);
    height: calc(100% - 180px);
    background-color: #9CD93733;
    border-radius: 20px;
    margin-top: 30px;
    margin-left: 20px;
    padding: 10px;
    position: relative;
}


.groupicon{
    border:none;
    width:40px;

}

.groupiconsmall {
    border: none;
    width: 18px;
    border-radius:5px;
}
.groupiconsmall:hover {
    background-color: lightgreen;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
}
.groupiconsmall:active {
    background-color: mediumseagreen;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5);
    border:inset;
}

.cbinvite {
    filter: invert(1);
}
.accent {
    accent-color: #ee3972;
}

.friendrequestscardimg {
    position: absolute;
    background-color: #dddddd88;
    border-radius: 15px;
    height: 70%;
    width: 40%;
    top: 70px;
    right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.commonbucketlist {
    background-color: #dddddd88;
    width: 50%;
    border-radius: 10px;
    padding: 10px;
    position: absolute;
    bottom: 10px;
    height: 120px;
}

.commonitemfriends {
    background-color: orange;
    position: relative;
    width: fit-content;
    height: fit-content;
    border-radius: 0 150px 50px 50px;
    padding: 10px;
    border-top: 3pt black solid;
    border-left: black 3pt solid;
    color: black;
    left: 30px;
    top: -10px;
}

.commonfrienditem{
    color:black;
}

.commonfrienditem:hover {
    background-color: white;
    border-radius: 10px;
    border-radius: 0 0 15px 15px;
}

.friendlistcommonwishitems {
    display: none;
    background-color: #9CD937;
    border-radius: 0 0 15px 15px;
    padding: 5px;
    font-size: smaller;
}

.friendcommonbucketperson:hover{
    background-color:white;
    border-radius:5px;
}

.friendlistcommonwishitemscnt {
}

.commonbucketfriend{
    
}

.friendcommonbuckettxt {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: small;
    font-weight: 300;
    margin-left: 10px;
}

.blockedrejected {
    background-color: pink;
    border-radius: 0 0 15px 15px;
}

.buckettable {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.bucketitem {
}
.bucketitem:hover {
    background-color: white;
    border-radius: 5px;
}

.suggestedlowertxt {
    font-size: small;
    font-weight: 300;
    margin-left: 10px;
}

.mySlidesSave {
    display: none;
    width: 100%;
    border-radius: 10px 10px 10px 10px;
    /* top: -10px; */
    bottom: 40px;
    position: relative;
}

.mySlides {
    display: block;
    width: 100%;
    border-radius: 10px 10px 10px 10px;
    bottom: -40px;
    position: relative;
}

/*.w3-left, .w3-right, .w3-badge {
    cursor: pointer
}

.w3-badge {
    height: 13px;
    width: 13px;
    padding: 0
}*/
.my-slide-control {
    width: 90%;
    position: absolute;
    bottom: -60px;
    background-color: #00000044;
    border-radius: 10px;
}

.planlistall {
    height: calc(100% - 35px);
    width: 99%;
    top: 30px;
    position: absolute;
}

.planlistleft {
    width: 70%;
    display: inline-grid;
    margin-top: 20px;
    height: calc(100% - 65px);
    overflow-y: auto;
}

.planlistright {
    width: calc(30% - 41px);
    background-color: rgb(221 221 221 / 50%);
    border-radius: 10px;
    display: inline-grid;
    justify-items: center;
    height: 70%;
    top: 10px;
    position: relative;
    margin: 20px;
    /* box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); */

}

.planlefttables{
    width:100%;
}

.newgrpcb {
    width: 12px;
    accent-color: orange;
}
.inlinediv{

}

.BucketPlanContent {
    height: calc(100% - 45px);
    display: block;
    position: absolute;
    overflow-y: hidden;
    overflow-x: hidden;
    width: calc(100% - 30px);
}

.saved {
    color: orange;
    position: absolute;
    left: 30px;
    display: block;
    top: 55px;
}

#BucketPlanForm {
    width: 80%;
    background-color: floralwhite;
    padding: 30px;
    border: 0px solid black;
    border-collapse: collapse;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: absolute;
    left: 10%;
    top: 200px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 20px;
    padding-top: 40px;
    z-index: 99;
    height: 60%;
}

#bucketitem{

}

#bucketitem:hover{
    background-color:white;
    border-radius:5px;
}

.commonbucketlistitems {
    /* padding-top: 30px; */
    width: 100%;
    overflow-y: scroll;
    height: calc(100% - 20px);
    position: relative;
    top: 25px;
    font-family: monospace;
}


#friendrequesterror {
    position: absolute;
    top: 30%;
    left: 25%;
    width: 80%;
    height: 30%;
    -webkit-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
    color: red;
    font-size: 72px;
    font-family: sans-serif;
    font-weight: 900;
}

#stamp {
    position: absolute;
    top: 30%;
    left: 10%;
    width: 80%;
    height: 30%;
    -webkit-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    transform: rotate(-30deg);
    display: none;
}

#stamped {
    position: absolute;
    top: 30%;
    left: 10%;
    width: 80%;
    height: 30%;
    -webkit-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    transform: rotate(-30deg);
}

#stampimg{
    width:100%;
    height:100%;
}


.approvereject {
    position: absolute;
    right: 20px;
    bottom: 10px;
    width: 40%;
    text-align: right;
    display: inline-flex;
    justify-content: flex-end;
}

.lifebtn {
    width: 140px;
    height: 40px;
    border-radius: 40px;
    border: white 5px solid;
    position:relative;
    box-shadow: 10px 8px 10px rgba(255, 255, 255, 0.5);
}

.lifebtn:hover {
    top: -2px;
    left: -2px;
    box-shadow: 10px 8px 10px rgba(255, 200, 50, 0.5);
}

.lifebtn:active {
    top: 2px;
    left: 2px;
    box-shadow: 4px 1px 4px rgba(255, 200, 200, 0.5);
}

.lifebtntxt {
    color: white;
    position: relative;
    top: -40px;
    left: -20px;
    font-weight: 700;
}

.imgbtndiv {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    border: white solid 5px;
    position: relative;
    top: -4px;
    left: -4px;
}

.imgbtn {
    width: 30px;
    height: 30px;
    position: relative;
    left: -5px;
    top: 5px;
}



.bgclrgreen {
    background-color: yellowgreen;
}


.bgclrred {
    background-color: red;
}
.bgclrorange {
    background-color: orange;
}

.approvebtn {
    width: 100px;
    border-radius: 25px;
}

.approvebtn:hover {
    width: 100px;
    border-radius: 25px;
    top:-2px;
    position:relative;
    box-shadow: 10px 8px 10px rgba(128, 128, 128, 0.5);
}
.approvebtn:active {
    width: 100px;
    border-radius: 25px;
    top: 2px;
    position: relative;
    box-shadow: 2px 1px 2px rgba(128, 128, 128, 0.5);
}

.rejectbtn {
    width: 100px;
    border-radius: 25px;
}
.rejectbtn:hover {
    width: 100px;
    border-radius: 25px;
    box-shadow: 10px 8px 10px rgba(128, 128, 128, 0.5);
    top: -2px;
    position: relative;
}
.rejectbtn:active {
    width: 100px;
    border-radius: 25px;
    box-shadow: 2px 1px 2px rgba(128, 128, 128, 0.5);
    top: 2px;
    position: relative;
}

.approverejectbtn {
    text-decoration: none;
}

.commonbucketheader {
    background-color: black;
    color: white;
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc(100% - 10px);
    border-radius: 10px 10px 0 0;
    font-size: large;
    font-family: sans-serif;
    padding: 5px;
}

#FriendInfoName {
    font-family: Arial;
    font-size: 36px;
    font-weight: 600;
    background-color: #9CD937;
    border-radius: 10px;
    padding-left: 10px;
}

.submitbtngrp {
    border-radius: 10px;
    background-color: orange;
    box-shadow: 5px 3px 5px rgba(255, 255, 255, 0.5);
    border: solid 2pt white;
    width: 100%;
}

.submitbtngrp:hover {
    border-radius: 10px;
    background-color: floralwhite;
    box-shadow: 5px 3px 5px rgba(255, 255, 255, 0.5);
    border: solid 2pt white;
    width: 100%;
}

.submitbtngrp:active {
    border-radius: 10px;
    background-color: #9CD937;
    box-shadow: 5px 3px 5px #9CD93788;
    border: solid 2pt white;
    width: 100%;
}

.friendinfopic {
    width:90%;
    /*height:90%;*/
}

.messnot {
    background-color: red;
    height: 32px;
    width: 32px;
    position: absolute;
    top: -5px;
    right: -5px;
    border-radius: 20px;
    display: none;
    align-content: center;
    font-weight: bold;
    color: white;
    font-size: larger;
    align-items: center;
    display: flex;
    justify-content: center;
    text-decoration: none;
    z-index: 9;
}

.reqnot {
    background-color: red;
    height: 32px;
    width: 32px;
    position: absolute;
    top: -5px;
    right: -5px;
    border-radius: 20px;
    /*display: none;*/
    align-content: center;
    font-weight: bolder;
    color: white;
    font-size: larger;
    align-items: center;
    display: flex;
    justify-content: center;
}

.leftsupport {
    width: 30%;
    /* height: calc(100% - 20px); */
    /* background-color: rgb(255 235 190); */
    background-color: lightyellow;
    /* top: 0px; */
    vertical-align: top;
    overflow-y: overlay;
    /* border: 1pt black solid; */
    height: 100%;
}

.rightsupport {
    width: calc(70% - 20px);
    background-color: floralwhite;
    /*display: inline-grid;*/
    height: calc(100% - 10px);
    position: absolute;
    top: 5px;
    right: 5px;
    border-radius: 10px;
    overflow-y: scroll;
}

.hilightusertab {
    background-color: #9CD937;
    border-radius:0 0 15px 15px;
}

.friend {
    background-color: rgb(255 235 190);
    /*background-color: #69db7a91;*/
    width: calc(85% - 19px);
    margin: 5px;
    border-radius: 0 0 15px 15px;
    padding: 2px;
    padding-left: 5px;
    font-family: sans-serif;
    margin-left: 19px;
    position: relative;
    cursor: pointer;
    font-weight: 700;
}


.friendlist {
    background-color: rgb(255 235 190);
    width: calc(85% - 19px);
    margin: 5px;
    border-radius: 10px;
    padding: 3px;
    font-family: sans-serif;
    margin-left: 10px;
    position: relative;
}

.friendtitle {
    background-color: orange;
    width: 85%;
    margin: 5px;
    border-radius: 25px 25px 0 25px;
    padding: 3px;
    font-family: sans-serif;
    margin-left: 0px;
    text-align: left;
    position: relative;
}

.friendmenuitem {
    margin: 5px;
}

.friendmenuitempending {
    margin: 5px;
    color: silver;
}

.friendmenu {
    margin-left: 10px;
    font-weight: 500;
}

.friendname {
    position: relative;
    top: -20px;
    left: 5px;
    display: inline;
}

.friendphoto {
    background-color: white;
    position: absolute;
    height: 70px;
    width: 60px;
    border-radius: 10px;
    margin-right: 10px;
    right: 5px;
    top: 10px;
    padding: 3px;
    align-content: center;
}
.friendimg {
    border-radius: 10px;
}

.slidemenu {
    display: none;
}

.SMslidecontainer {
    display: inline-flex;
}

.personcardaboutme {
    background-color: #ffffff88;
    min-height: 40px;
    width: 55%;
    border-radius: 10px;
}

.friendsrchtext {
    width: calc(100% - 70px);
    border-radius: 20px 0 0 20px;
    height: 20px;
    border: 1pt silver solid;
    padding-left: 10px;
}
.friendsrchbtn {
    width: 56px;
    border-radius: 0 20px 20px 0;
    border: 1pt silver solid;
    height: 24px;
}


.friendlist1d {
    display: none;
}
.friendlist1e {
    display: none;
}

.friendlistexpand {
    position: relative;
    left: 3px;
    top: 2px;
    width: 20px
}

.friendlistexpand:hover {
    background-color: rgb(255 235 190);
    border-radius: 8px;
}

.friendexpand {
    width: 20px
}

.friendexpandddown {
    width: 20px;
    transform: rotate(180deg);
}

.friendexpand:hover {
    background-color: orange;
    border-radius: 8px;
}

#requestmessage {
    width: 99%;
    height: 100px;
}

#friendsearchtable {
    width:100%;
}

#femail {
    width: 99%
}

#sendemailrequest {
    float: right;
}

inpageiframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.friendsearch {
    display: inline;
    width: 100%;
}

.pulsetext {
    -webkit-animation: color_change 1s infinite alternate;
    -moz-animation: color_change 1s infinite alternate;
    -ms-animation: color_change 1s infinite alternate;
    -o-animation: color_change 1s infinite alternate;
    animation: color_change 1s infinite alternate;
}

@-webkit-keyframes color_change {
    from {
        color: red;
    }

    to {
        color: green;
    }
}

@-moz-keyframes color_change {
    from {
        color: red;
    }

    to {
        color: green;
    }
}

@-ms-keyframes color_change {
    from {
        color: red;
    }

    to {
        color: green;
    }
}

@-o-keyframes color_change {
    from {
        color: red;
    }

    to {
        color: green;
    }
}

@keyframes color_change {
    from {
        color: red;
    }

    to {
        color: green;
    }
}


.newmessageform {
    position: relative;
    width: 80%;
    height: 80%;
    border-radius: 10px;
    background-color: rgb(255 235 190);
    padding: 20px;
    top: 50px;
    margin: auto;
}


.messagesheader {
    width: calc(100% - 25px);
    height: 30px;
    color: white;
    background-color: darkorange;
    border-radius: 25px;
    margin-bottom: 20px;
    margin-top: 20px;
    font-size: larger;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: 900;
    padding-left: 20px;
    align-items: center;
    display: flex;
}

.newmessagetext {
    padding: 15px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}

.newmessagesend {
    display: flex;
    position: relative;
    justify-content: flex-end;
}


.messagesearch {
    display: flex;
    position: relative;
    justify-content: flex-end;
}

.message {
    background-color: lightyellow;
    width: calc(100% - 20px);
    /*border-bottom:3pt dashed orange;*/
    border-radius: 10px;
    margin-bottom: 5px;
    position: relative;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin: 10px;
    padding-left: 10px
}

.messageread {
    background-color: lightyellow;
    width: calc(100% - 20px);
    /*border-bottom:3pt dashed orange;*/
    border-radius: 10px;
    margin-bottom: 5px;
    position: relative;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: 200;
    margin: 10px;
    padding-left: 10px
}


.message:hover {
    color: darkorange;
    background-color: rgb(255 235 190);
}

.messageread:hover {
    color: darkorange;
    background-color: rgb(255 235 190);
}


.messagename {
    font-weight: 800;
    font-size: larger;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}


.messagenameread {
    font-weight: 100;
    color: silver;
    font-size: larger;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.messagedate {
    font-weight: 800;
    position: absolute;
    top: 0px;
    right: 10px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.messagedateread {
    font-weight: 100;
    color: silver;
    position: absolute;
    top: 0px;
    right: 10px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.messagebody {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.messagebodyfull {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    height: 80%;
}

.messagefull {
    background-color: lightyellow;
    width: calc(100% - 20px);
    /*border-bottom:3pt dashed orange;*/
    border-radius: 10px;
    margin-bottom: 5px;
    position: relative;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin: 10px;
    padding-left: 10px
}

.messagebodyread {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: silver;
}

.newmessagebody {
    width: 100%;
    height: 100px;
}

.newmesslink {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.chatlist {
    width: 100%;
    font-family: sans-serif;
}

.hilightchat {
    border-left: 5px solid black;
    border-right: 5px solid black
}

.chatright {
    background-color: lightyellow;
    width: calc(100% - 100px);
    border-radius: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin: 20px;
    margin-left: 100px;
    position: relative;
    right: 10px;
    padding: 5px;
    border-top: red dashed 3pt;
    box-shadow: 3px 3px 3px rgba(255, 125, 125, 0.5);
}

.chatrightseen {
    background-color: lightyellow;
    width: calc(100% - 100px);
    border-radius: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin: 20px;
    margin-left: 100px;
    position: relative;
    right: 10px;
    padding: 5px;
    border-top: #77b280 dashed 3pt;
    box-shadow: 3px 3px 3px rgba(125, 255, 125, 0.5);
}




.chatnameright {
    display: grid;
    justify-content: end;
    font-weight: 700;
    color: darkorange;
}

.chatdateright {
    top: -12px;
    /* display: flex; */
    position: relative;
    color: silver;
}

.chatbodyright {
    display: grid;
    justify-content: end;
}

.chat {
    background-color: lightyellow;
    width: calc(100% - 100px);
    border-radius: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin: 20px;
    padding: 5px;
    border-top: red dashed 3pt;
    box-shadow: 3px 3px 3px rgba(255, 125, 125, 0.5);
}

.chatseen {
    background-color: lightyellow;
    width: calc(100% - 100px);
    border-radius: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin: 20px;
    padding: 5px;
    border-top: #77b280 dashed 3pt;
    box-shadow: 3px 3px 3px rgba(125, 255, 125, 0.5);
}

.newmessagecontent {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding:5px
}

.chatname {
    font-weight: 700;
    color: darkorange;
}

.chatdate {
    top: -12px;
    display: grid;
    position: relative;
    color: silver;
    /* right: 0px; */
    /* width: 100px; */
    /* justify-content: flex-end; */
    align-items: self-end;
    justify-items: end;
}

.chatbody {
}

.blockunblockimg{
    width:40px;
    height:40px;
}

.newchattxt {
    width: calc(100% - 40px);
    height: 40px;
    border-radius: 10px;
}


.sendchat {
    width: 40px;
}

.photoheader {
    align-content: center;
    width: 100%;
    background-color: black;
    color: white;
    margin-top: 20px;
    border-radius: 10px;
    height: 25px;
    padding-left: 10px;
    vertical-align: middle;
    align-items: center;
    margin-bottom: 10px;
}

.bll {
    display: inline-flex;
    width: 50%;
    vertical-align: top;
    height: 100%;
    overflow-y: auto;
}

th {
    background-color: black;
    color: white;
    position: sticky;
    top: 0; /* Don't forget this, required for the stickiness */
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    height:55px;
}

hr {
    background-color: orange;
    height: 1px;
    border: 0;
}


.pagecontent {
    overflow-y: scroll;
}

.graphtable {
    align-items: center;
    display: grid;
    align-content: space-evenly;
    justify-content: space-around;
    justify-items: stretch;
}

.graphdiv {
    align-content: center;
    font-size: larger;
    font-weight: bold;
    width: 100%;
    align-items: center;
    display: grid;
    justify-items: stretch;
    justify-content: center;
    background-color: orange;
}




.wev {
    align-content: center;
    width: 100%;
    background-color: white;
    color: black;
    margin-top: 10px;
    border-radius: 10px;
    height: 12px;
    padding-left: 10px;
    vertical-align: middle;
    align-items: left;
    margin-bottom: 10px;
}

.wev1 {
    align-content: center;
    width: 100%;
    background-color: white;
    color: black;
    margin-top: 5px;
    border-radius: 10px;
    height: 12px;
    padding-left: 10px;
    vertical-align: middle;
    align-items: left;
    margin-bottom: 10px;
}

.we1 {
    align-content: center;
    width: 100%;
    background-color: white;
    color: black;
    margin-top: 5px;
    border-radius: 10px;
    height: 12px;
    padding-left: 10px;
    vertical-align: middle;
    align-items: left;
    margin-bottom: 10px;
}

input.wide {
    /*width: 100%;*/
}

.vidttl {
    color: darkorange;
    font-weight: bolder;
    font-size: larger;
    margin-bottom: 10px;
}

.myvids {
    width: 50%;
    display: inline-block;
    vertical-align: top;
}

.genvids {
    width: 50%;
    display: inline-block;
    vertical-align: top;
}

.vidmsg {
    margin-bottom: 12px;
}

.hideev {
    top: 5px;
    position: absolute;
}

.ui-tooltip {
    z-index: 10000;
}

.mycap {
    background-image: url(imgs/captchabg.jpg);
    width: 200px;
    height: 50px;
    color: rgba(0, 0, 0, 0.3);
    align-content: center;
    text-align: center;
    display: inline-block;
}

.myweeks {
    top: 20px;
    position: relative;
    overflow-y:scroll;
}

.mainpage {
    margin-top: 20px;
    height: calc(100% - 20px);
    /* width: 100%; */
    display: block;
    overflow-y: auto;
    border-radius: 0 0 10px 10px;
}

.mainpageform {
    height: 100%;
}
.mainpage2 {
    height: 100%;
    display: block;
    width: 100%; /*changed from 30%*/
}

.gridpage {
    width: 100%;
    overflow-y: scroll;
    max-height: 100%;
}

div.ui-tooltip {
    max-width: 800px;
}

.ui-tooltip, .arrow:after {
    background: black;
    border: 2px solid white;
}

.ui-tooltip {
    padding: 10px 30px;
    color: white;
    border-radius: 20px;
    font: bold 12px "Helvetica Neue", Sans-Serif;
    /*text-transform: uppercase;*/
    box-shadow: 0 0 7px black;
}

.arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
}

.arrow.top {
    top: -16px;
    bottom: auto;
}

.arrow.left {
    left: 20%;
}

.arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px black;
    transform: rotate(45deg);
}

.arrow.top:after {
    bottom: -20px;
    top: auto;
}

.moretext {
    color: red;
}

.home div:hover {
    background-color: lightyellow;
    border-radius: 10px;
}

.topbar {
    color: orange;
    width: 100%;
    background-color: black;
    position: fixed;
}

.pagetitle {
    color: orange;
    font-size: 25pt;
    width: 100%;
    background-color: black;
    justify-content: center;
    display: flex;
}

.contentarea {
    width: 100%;
}

.userinfo {
    position: absolute;
    top: 5px;
    right: 25px;
}


.header {
    position: absolute;
    width: 300px;
    left: calc(49% - 100px);
    /* background-color: silver; */
    height: 40px;
    /* left: 40%;*/
    font-size: 40pt;
    font-family: fantasy;
    color: white;
}

.lbg1 {
    width: 99%;
    height: 99%;
    background-color: darkorange;
    border-radius: 10px;
    position: absolute;
    padding: 0;
    overflow: hidden;
}

.lbg2old {
    width: calc(99% - 90px);
    height: calc(99% - 100px);
    background-color: lightyellow;
    border-radius: 10px;
    position: absolute;
    bottom: 20px;
    right: 0px;
    padding: 0;
    overflow-y: scroll;
    padding: 10px;
}

.lbg2 {
    width: calc(99% - 90px);
    height: calc(99% - 140px);
    background-color: lightyellow;
    border-radius: 10px;
    position: absolute;
    bottom: 60px;
    right: 0px;
    padding: 0;
    overflow-y: hidden;
    padding: 10px;
}

@keyframes border-pulsate {
    0% {
        border-top-color: rgba(255, 255, 255, 1);
    }

    25% {
        border-left-color: rgba(255, 165, 0, 0);
    }

    50% {
        border-bottom-color: rgba(255, 165, 0, 0);
    }

    75% {
        border-right-color: rgba(255, 165, 0, 0);
    }

    100% {
        border-color: rgba(255, 165, 0, 1);
    }
}

.rototeborders {
    display: block;
    margin: 20px auto;
    border: 5px solid white;
    animation: border-pulsate 2s infinite;
}

@keyframes draw-pulsate {
    0% {
        background-color: rgba(0, 0, 0, 0);
        /* color: rgba(0, 0, 0, 1); */
        left: 15px;
    }

    25% {
        background-color: rgba(0, 0, 0, .02);
        /* color: rgba(0, 0, 0, .2); */
        left: 9px;
        /* border-right: none;
    }



    75% {
        background-color: rgba(0, 0, 0, 0.1);
        /* color: rgba(255, 255, 255, .6); */
        left: 3px;
    }

    100% {
        background-color: rgba(0, 0, 0, 1);
        color: rgba(255, 255, 255, 1);
        left: 0px;
    }
}
.drawexpand {
    display: block;
    /* margin: 20px auto; */
        /* border: 5px solid black; */
        animation: draw-pulsate 2s infinite;
        position: relative;
        /* background-color: silver; */
        align-content: center;
        font-weight: 900;
        border-right: 2px solid black;
        /* border-top: 1px solid silver; */
        /* border-bottom: 1px solid silver; */
        font-size: large;
        border-radius: 20px 0 0 20px;
    }

.thedraw{

}



.socialshare {
    position: absolute;
    top: 0px;
    right: 20px;
    display: inline-flex;
    vertical-align: top;
    margin-top: -10px;
}

.socialmediaicons {
    display: inline-flex;
    position: fixed;
    bottom: 80px;
    right: 10px;
    background-color: #ffffff88;
    border-radius: 20px;
}

.srhuserimgs{
    width:25px;

}

.SM1, .SM2, .SM3, .SM4, .SM5, .SM6, .SM7, .SM8, .SM0 {
    width: 50px;
    height: 50px;
    background-color: darksalmon;
    margin-top: 10px;
    border-radius: 10px;
    text-align: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 10pt;
    border: solid 2pt white;
    box-shadow: 10px 8px 10px rgba(255, 255, 255, 0.5);
    /*margin: 10px;*/
    scale: 70%;
}

/*Fackbook*/
.SM0 {
    background: url('imgs/shareicons.png') -160px -12px;
    position: relative;
}

.SM0:hover {
    background: url('imgs/shareiconscons.png') -160px -172px;
    position: relative;
}

/*Fackbook*/
.SM1 {
    background: url('imgs/SMIcons.png') -162px -95px;
    position: relative;
}
.SM1:hover {
    background: url('imgs/SMIcons.png') -162px -25px;
    position: relative;
}


/*WhatsApp*/
.SM2 {
    background: url('imgs/SMIcons.png') -444px -95px;
    position: relative;
}
.SM2:hover {
    background: url('imgs/SMIcons.png') -444px -25px;
    position: relative;
}


/*X*/
.SM3 {
    background: url('imgs/SMIcons.png') -20px -95px;
    position: relative;
}
.SM3:hover {
    background: url('imgs/SMIcons.png') -20px -25px;
    position: relative;
}


/*Instagram*/
.SM4 {
    background: url('imgs/SMIcons.png') -90px -95px;
    position: relative;
}
.SM4:hover {
    background: url('imgs/SMIcons.png') -90px -25px;
    position: relative;
}

/*Ticktok*/
.SM5 {
    background: url('imgs/SMIcons.png') -515px -95px;
    position: relative;
}
.SM5:hover {
    background: url('imgs/SMIcons.png') -515px -25px;
    position: relative;
}


/*LinkedIn*/
.SM6 {
    background: url('imgs/SMIcons.png') -658px -95px;
    position: relative;
}
.SM6:hover {
    background: url('imgs/SMIcons.png') -658px -25px;
    position: relative;
}



/*SnapChat*/
.SM7 {
    background: url('imgs/SMIcons.png') -303px -95px;
    position: relative;
}
.SM7:hover {
    background: url('imgs/SMIcons.png') -303px -25px;
    position: relative;
}


/*Fackbook*/
.SM8 {
    background: url('imgs/SMIcons.png') -42px -483px;
    position: relative;
}




@media screen and (min-height: 801px) {
    .LM1, .LM2, .LM3, .LM4, .LM5, .LM6, .LM7, .LM8, .LM9, .LM10, .LM11, .LM12, .LM13 {
        width: 60px;
        height: 60px;
        background-color: darksalmon;
        margin-top: 10px;
        border-radius: 10px;
        text-align: center;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 10pt;
        border: solid 2pt white;
        box-shadow: 10px 8px 10px rgba(255, 255, 255, 0.5);
        display: grid;
    }

    .timelinesz {
        width: 14px;
        height: 14px;
    }

    .tlz {
        width: 14px;
        height: 14px;
    }

    #notifcationnumber {
        left: 45px;
        top: 614px;
        position: fixed;
        background-color: red;
        height: 32px;
        width: 32px;
        border-radius: 20px;
        font-weight: bold;
        color: white;
        font-size: large;
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: sans-serif;
    }
}

@media screen and (max-height: 900px) {
    .LM1, .LM2, .LM3, .LM4, .LM5, .LM6, .LM7, .LM8, .LM9, .LM10, .LM11, .LM12, .LM13 {
        width: 60px;
        height: 40px;
        background-color: darksalmon;
        margin-top: 10px;
        border-radius: 10px;
        text-align: center;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 10pt;
        border: solid 2pt white;
        box-shadow: 10px 8px 10px rgba(255, 255, 255, 0.5);
        display: grid;
    }
}

        @media screen and (max-height: 700px) {
            .LM1, .LM2, .LM3, .LM4, .LM5, .LM6, .LM7, .LM8, .LM9, .LM10, .LM11, .LM12, .LM13 {
                width: 60px;
                height: 20px;
                background-color: darksalmon;
                margin-top: 10px;
                border-radius: 10px;
                text-align: center;
                font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                font-size: 11pt;
                border: solid 2pt white;
                box-shadow: 10px 8px 10px rgba(255, 255, 255, 0.5);
                background:none;
                background-image:none;
                background:url('');
            }

            .timelinesz {
                width: 10px;
                height: 10px;
            }

            .tlz {
                width: 10px;
                height: 10px;
            }

            #notifcationnumber {
                left: 45px;
                top: 342px;
                position: fixed;
                background-color: red;
                height: 32px;
                width: 32px;
                border-radius: 20px;
                font-weight: bold;
                color: white;
                font-size: large;
                z-index: 9999;
                display: flex;
                justify-content: center;
                align-items: center;
                font-family: sans-serif;
            }
        }


        @media screen and (min-width: 1001px) {
            .TM1, .TM2, .TM3, .TM4, .TM5 {
                height: 35px;
                width: 90px;
                /*background-color: darksalmon;*/
                margin-top: 0px;
                border-radius: 20px;
                text-align: center;
                font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                font-size: 10pt;
                border: solid 2pt white;
                display: inline-block;
                vertical-align: middle;
                color: black;
                margin-right: 10px;
                position: relative;
                align-content: center;
                box-shadow: 10px 8px 10px rgba(255, 255, 255, 0.5);
            }

            .timelinesz {
                width: 14px;
                height: 14px;
            }

            .tlz {
                width: 14px;
                height: 14px;
            }
        }

        .pulse-button:hover{
    color:orange;
}




@media screen and (max-width: 1000px) {

    .TM1, .TM2, .TM3, .TM4, .TM5 {
        height: 40px;
        width: 45px;
        /*background-color: darksalmon;*/
        margin-top: 0px;
        border-radius: 20px;
        text-align: center;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 10pt;
        border: solid 2pt white;
        display: inline-block;
        vertical-align: middle;
        color: black;
        margin-right: 10px;
        position: relative;
        align-content: center;
        box-shadow: 10px 8px 10px rgba(255, 255, 255, 0.5);
    }
    .timelinesz {
        width: 10px;
        height: 10px;
    }
    .tlz {
        width: 10px;
        height: 10px;
    }
}

.leftmenu {
    position: absolute;
    left: 15px;
    top: 100px;
    z-index: 2;
    height: calc(100% - 120px);
}

.createaccountlogin {
    color: darkorange;
    font-size: large;
}

.NotLoggedInLeftMenuMessage {
    font-size: larger;
    margin: 20px;
    display: grid;
    font-family: sans-serif;
    background-color: #00000066;
    /* border: 5pt black solid; */
    border-radius: 0 50px 50px 50px;
    padding: 10px;
    color: white;
    font-weight: bolder;
    position: absolute;
    top: 100px;
    /* left: calc(30% - 200px); */
    width: 250px;
    height: 200px;
}

.NotLoggedInMessage {
    font-size: larger;
    margin: 20px;
    display: grid;
    font-family: sans-serif;
    background-color: darkorange;
    border: 5pt black solid;
    border-radius: 10px;
    padding: 10px;
    color: white;
    font-weight: bolder;
}

.notloggedinbtn {
    background-color: red;
    color: white;
    font-weight: bolder;
}
.pulse-button {
    /* Button default styles, customize them to match your button */
    display: inline-block;
    padding: 1px 2px;
    color: #fff;
    background-color: darkorange;
    border: white 4pt solid;
    border-radius: 20px;
    cursor: pointer;
    /* Apply the pulse animation */
    animation: pulse 1s infinite;
}


@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

#logo {
    width: 150px;
    position: fixed;
    left: 200px;
}

.suggestvideo {
    position: absolute;
    bottom: 10px;
    right: 10px;
}


.oldlmlist {
    height: 50px;
    width: 50px;
    background-color: darksalmon;
    margin-top: 10px;
    border-radius: 10px;
    text-align: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 10pt;
    border: solid 1pt black;
    box-shadow: 10px 8px 10px rgba(255, 255, 255, 0.5);
}




.oldtmlist {
    height: 30px;
    width: 90px;
    /*background-color: darksalmon;*/
    margin-top: 0px;
    border-radius: 20px;
    text-align: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 10pt;
    border: solid 1pt black;
    display: inline-block;
    vertical-align: middle;
    color: black;
    margin-right: 10px;
    position: relative;
    align-content: center;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}

.leftmenu div:hover {
    background-color: lightyellow;
    border-radius: 10px;
    left:-1px;
    box-shadow: 5px 5px 5px rgba(255, 255, 255, 0.5), 14px 14px 14px rgba(255, 255, 255, 0.5);
}

.leftmenutest div:not(:hover) {
    background-color: silver;
    border-radius: 10px;
    box-shadow: 5px 5px 5px rgba(255, 255, 255, 0.5), 14px 14px 14px rgba(255, 255, 255, 0.5);
}

.leftmenu div:active {
    background-color: lightgreen;
    border-radius: 10px;
    /*width: 48px;*/
    left: 2px;
    box-shadow: 4px 4px 4px rgba(255, 255, 255, 0.5);
}

.topmenu span:hover {
    background-color: lightyellow;
    box-shadow: 5px 5px 5px rgba(255, 255, 255, 0.5), 12px 12px 12px rgba(255, 255, 255, 0.5);
    border-radius: 20px;
}


.topmenu span:active {
    background-color: lightyellow;
    border-radius: 20px;
    box-shadow: 4px 4px 4px rgba(255, 255, 255, 0.5);
    height: 28px
}

/*account*/
.LM1 {
    background: url('imgs/whiteiconslarge.png') -38px -483px;
    position: relative;
}
/*events*/
.LM2 {
    background: url('imgs/whiteiconslarge.png') -872px -482px;
    position: relative;
}

/*photos*/
.LM3 {
    background: url('imgs/whiteiconslarge.png') -483px -774px;
    position: relative;
}

/*bucket list*/
.LM4 {
    /*background: url('imgs/whiteiconslarge.png') -318px -336px;*/
    background: url(imgs/whiteiconslarge.png) -928px -556px;
    position: relative;
}

/*health*/
.LM5 {
    background: url('imgs/whiteiconslarge.png') -261px -264px;
    position: relative;
}

/*AI*/
.LM6 {
    /**background: url('imgs/whiteiconslarge.png') -44px -409px;**/
    background: url('imgs/whiteiconslarge.png') -483px -635px;
    position: relative;
}

/*games*/
.LM7 {
    background: url('imgs/whiteiconslarge.png') -927px -776px;
    position: relative;
}

/*strengths*/
.LM8 {
    background: url('imgs/whiteiconslarge.png') -428px -410px;
    position: relative;
}

/*reflection*/
.LM9 {
    background: url('imgs/whiteiconslarge.png') -483px -265px;
    position: relative;
}

/*videos*/
.LM10 {
    background: url('imgs/whiteiconslarge.png') -761px -118px;
    position: relative;
}

/*support*/
.LM11 {
    background: url('imgs/whiteiconslarge.png') -96px -486px;
    position: relative;
}

/*tools*/
.LM12 {
    /*background: url('imgs/whiteiconslarge.png') -987px -265px;*/
    background: url(imgs/whiteiconslarge.png) -95px -410px;
    position: relative;
}

/*storys*/
.LM13 {
    background: url('imgs/whiteiconslarge.png') -705px -265px;
    position: relative;
}

#errmess {
    color: red;
    font-size: 25px;
}


.link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.nodec {
    text-decoration: none;
    color: black;
}

.nodec2 {
    text-decoration: none;
    color: Orange;
}

#menubar {
    color: white;
    text-align: center;
    background-color: black;
    height: 80px;
    width: 100%;
}

.bgimg {
    width: 100%;
    opacity: 0.5;
    filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(0deg);
}

#Menu {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 520px;
    height: 40px;
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    justify-content: right;
    display: flex;
    z-index: 9;
}

/* Styles for phones */
@media only screen and (max-width: 600px) {

}
/*form mobiles etc*/
@media only screen and (hover: none) and (pointer: coarse) {
    body {
        font-size: 14px;
        background-color: #e0e0e0;
    }
    .LM1, .LM2, .LM3, .LM4, .LM5, .LM6, .LM7, .LM8, .LM9, .LM10, .LM11, .LM12, .LM13 {
        height: 80px;
        width: 90px;
        font-size: 14pt;
        background: url('');
        background: none;
        background-image: none;
        font-weight: 700;
        align-content: center;
    }

    .lbg2 {
        width: calc(99% - 120px);
        height: calc(99% - 160px);
    }

    .TM1, .TM2, .TM3, .TM4, .TM5 {
        height: 55px;
        width: 60px;
        font-size: 14pt;
        font-weight: 700;
        border-radius: 10px;
    }
}


.addrectbl {
    border-width: 1px;
    background-color: white;
    width: 100%;
}

    .addrectbl tr:hover {
        background-color: lightyellow;
    }


#scorebarbg {
}

#scorebar {
}

#scorebarNeg {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
}

#scorebarPos {
    position: absolute;
    top: 0;
    right: 0;
    color: white
}

#analtbl {
    /*border:solid 3pt red;*/
    border-top: solid 3pt none;
    background-color: orange;
    width: 100%;
    border-radius: 15px;
    padding: 5px;
    margin-top: 10px;
}

.imgthumb {
    width: 50pt;
    height: 50pt;
    border: none;
    position: relative;
    top: 0;
    left: 0;
}

.imgdelimg {
    width: 16pt;
    height: 16pt;
    border: none;
    position: absolute;
    right: 0pt;
}




.imgs {
    width: 50pt;
    height: 50pt;
    position: relative;
}


#actimgdiv {
    width: 90pt;
    height: 105pt;
    position: absolute;
    top: 37pt;
    right: 10pt;
    background-color: silver;
    border: 1pt black solid;
}

#actimg {
    width: 90pt;
    height: 105pt;
}

.bg {
    width: 500px;
    height: 300px;
    display: flex;
    align-items: center;
    position: absolute;
    left: 35%;
    top: 35%;
    justify-content: center;
    background-size: 200% 200%;
    z-index: 98;
    background-image: linear-gradient(-45deg, yellow 0%, yellow 25%, yellow 51%, #ff357f 100%);
    -webkit-animation: AnimateBG 3s ease infinite;
    animation: AnimateBG 3s ease infinite;
}

table tr {
    clip-path: xywh(0 0 100% 100% round 0.5em);
}

@-webkit-keyframes AnimateBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes AnimateBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}



#agemess {
    color: black;
    height: 300px;
    width: 500px;
    border-radius: 50px;
    text-align: center;
    vertical-align: central;
    font-family: 'Lucida Handwriting', 'Cursive', Verdana, sans-serif;
    font-size: 24pt;
    font-weight: bold;
    position: absolute;
    background-image: url("congrat3a.png");
    justify-content: center;
    align-items: center;
    border: 15pt dashed #F6761B;
    z-index: 99;
}

.hidiv {
    position: absolute;
    left: -4px;
    top: 0px;
    border: solid 3pt orange;
    border-radius: 12px;
    z-index: 99;
    cursor: pointer;
}

.container {
    position: relative;
    display: inline-flex;
    z-index:9;
}


.bgw{
    background-color:white;
}
.bgr {
    background-color: red;
}
.bgo {
    background-color: orange;
}
.bgg {
    background-color: #99cc00;
}
.bgl {
    background-color: lime;
}
.bgy {
    background-color: yellow;
}
.bgs {
    background-color: #E0E0E0;
}
.bgs1 {
    background-color: #EEEEEE;
}
.bgs2 {
    background-color: #F0F0F0;
}


.cntr {
    position: relative;
    display: inline-flex;
    z-index: 9;
}

.sio {
    z-index: 99;
    cursor: pointer;
    /*                width: 10px;
    height: 10px;*/
    border: 0px;
    opacity: 0.3;
}

.shwinfoold {
    z-index: 99;
    cursor: pointer;
/*                width: 10px;
    height: 10px;*/
    border: 0px;
    opacity: 0.3;
}

.si {
    z-index: 99;
    cursor: pointer;
    /*                width: 10px;
    height: 10px;*/
    border: 0px;
}

.shwinfo {
    z-index: 99;
    cursor: pointer;
/*                width: 10px;
    height: 10px;*/
    border: 0px;
}

#progressbarold {
    background-color: black;
    border-radius: 13px;
    /* (height of inner div) / 2 + padding */
    padding: 3px;
    margin-top: 10px;
}

#progressbar {
    background-color: black;
    border-radius: 13px;
    padding: 3px;
    margin-top: 10px;
    position: fixed;
    width: 90%;
    bottom: 25px;
    left: 90px;
}

#progressbar > div {
    background-color: orange;
    /*width: ;*/
    /* Adjust with JavaScript */
    height: 20px;
    border-radius: 10px;
    text-align: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#menubar {
    color: white;
    text-align: center;
    background-color: black;
    height: 80px;
    width: 100%;
}


#subMenu {
    position: absolute;
    top: 65px;
    left: 80px;
    width: 100%;
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    justify-content: left;
    display: flex;
}

#ajaxmessage {
    position: relative;
    top: -4px;
    left: 92px;
}

#usernamelabel {
    position: fixed;
    top: -4px;
    left: 92px;
    width: 45%;
    height: 38px;
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    border: 3pt white solid;
    border-radius: 0px 10px 10px 10px;
    padding: 5px;
    background-color: orange;
    align-content: center;
    align-items: center;
    display: grid;
    justify-items: center;
    /* box-shadow: 0 4px 8px 0 rgba(255, 255, 125, 0.5), 0 6px 20px 0 rgba(255, 255, 125, 0.3); */
    z-index: 999;
    overflow: visible;
}


#accounticon {
    width: 69pt;
    height: 68pt;
    position: absolute;
    top: 0pt;
    left: 0pt;
    /*background-color: <%=getqualcolr(myqual)%>;*/
    z-index: 1;
    background-color: black;
}

#accticonimg {
    width: 68pt;
    height: 68pt;
    top: 0px;
    left: 2px;
    position: absolute;
}

#etitle {
    width: 100%;
}

#edesc {
    width: 100%;
}

#email {
    width: 100%;
}

#pwd {
    width: 100%;
}

#aboutme {
    position: relative;
    /* top: -50; */
    width: 100%;
    height: 100px;
    border-radius: 15px;
    padding: 5px;
}

#acctformdiv input {
    width: 100%
}


#buttommessage {
    width: 100%;
    background-color: floralwhite;
    color: black;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    /*border: solid 1pt black; */
    border-radius: 10px;
    left: 100px;
    bottom: 25px;
    position: fixed;
    z-index: 2;
    width: calc(99% - 120px);
}

#Messages {
    position: absolute;
    bottom: 3px;
    left: 90px;
    z-index: 5;
}



#photoform {
    width: 40%;
    background-color: floralwhite;
    padding: 30px;
    border: 0px solid black;
    border-collapse: collapse;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: absolute;
    left: 30%;
    top: 90px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 20px;
    padding-top: 40px;
    z-index: 99;
}

.addtobucklist {
    width: 16px;
    box-shadow: 4px 0px 2px rgba(0, 0, 0, 0);
}

.addtobucklist:hover {
    width: 16px;
    background-color: silver;
    box-shadow: 4px 2px 2px rgba(0, 0, 0, 0.5);
}

.addtobucklist:active {
    width: 16px;
    background-color: orange;
    box-shadow: 1px 0px 1px rgba(0, 0, 0, 0.5);
}

.delbucklist {
    width: 16px;
}

.delbucklist:hover {
    width: 18px;
    background-color: silver;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
}

.delbucklist:active {
    width: 14px;
    background-color: orange;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.bpaframe {
    width: 100%;
    height: calc(100% - 100px);
    border: none;
}

#heart img {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

@keyframes heartFadeInOut {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    25% {
        transform: scale(.97);
        opacity: 1;
    }

    35% {
        transform: scale(.9);
        opacity: 1;
    }

    45% {
        transform: scale(1.1);
        opacity: 0.6;
        transform: rotate(5deg);
    }

    55% {
        transform: scale(.9);
        opacity: 1;
    }

    65% {
        transform: scale(1.1);
        opacity: 0.6;
        transform: rotate(-5deg);
    }

    75% {
        transform: scale(1.03);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

#heart img.bottom {
    animation-name: heartFadeInOut;
    animation-iteration-count: infinite;
    animation-duration: 2s;
}

.aiimg {
    position: absolute;
    top: 35px;
    width: 80px;
    right: 10px;
}

.aidefaultsuggestions{


}

.aidefaulttext {
    color: darkorange;
    font-weight: 700;
    font-size: larger;
    width: 90%;
    margin-bottom: 10px;
}

#player {
    width: 400px;
    height: 200px;
    background-color: black;
    border-radius: 20px;
    border: orange 5pt solid;
    margin-bottom: 20px;
}
#vidplayer {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 20px;
}
.vidlistitem {
    margin-bottom: 2px;
    cursor:pointer;
}
.vidlistitem:hover {
    background-color: #9CD937;
}
.vidlistitem:active {
    background-color: orange;
}

.thebtn {
    height: 36px;
    border-radius: 0 10px 10px 0;
    position: relative;
    /* left: 150px; */
    display: inline;
}

.theinput {
    width: 200px;
    height: 30px;
    word-break: break-word;
    border: orange 2pt solid;
    border-radius: 10px 0 0 10px;
    position: relative;
    display: inline;
}

.toolsimg {
    width: 50%;
    border: orange 3px solid;
    border-radius: 10px;
    float: right;
    margin-left: 20px;
    margin-bottom: 20px;
}

.toolsformtxt{

}

.subheader {
    width: calc(100% - 25px);
    color: white;
    background-color: orange;
    padding-left: 20px;
    border-radius: 10px;
    font-weight: bold;
    height: 25px;
    /* text-align: left; */
    vertical-align: middle;
    margin: 5px;
    margin-top: 20px;
}


#motimg {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 20px;
}

.askaibtn {
    height: 36px;
    border-radius: 0 10px 10px 0;
}

.AIInput {
    width: calc(100% - 60px);
    height: 30px;
    word-break: break-word;
    border: orange 2pt solid;
    border-radius: 10px 0 0 10px;
}

#toolsform {
    width: 60%;
    height: calc(100% - 250px);
    background-color: floralwhite;
    padding: 30px;
    border: 0px solid black;
    border-collapse: collapse;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: absolute;
    left: 20%;
    top: 90px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 20px;
    padding-top: 40px;
    z-index: 99;
}

#bugform {
    width: 60%;
    height: calc(100% - 250px);
    background-color: floralwhite;
    padding: 30px;
    border: 0px solid black;
    border-collapse: collapse;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: absolute;
    left: 20%;
    top: 90px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 20px;
    padding-top: 40px;
    z-index: 99;
}

#bpaform {
    width: 60%;
    height: calc(100% - 250px);
    background-color: floralwhite;
    padding: 30px;
    border: 0px solid black;
    border-collapse: collapse;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: absolute;
    left: 20%;
    top: 90px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 20px;
    padding-top: 40px;
    z-index: 99;
}

.bugimprove {
    width: 100%;
    height: 100px;
}
.bugtable{
    width:100%;
}

.bugformtxt {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
}

#bucketform {
    width: 40%;
    background-color: floralwhite;
    padding: 30px;
    border: 0px solid black;
    border-collapse: collapse;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: absolute;
    left: 30%;
    top: 90px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 20px;
    padding-top: 40px;
    z-index: 99;
}


#Healthform {
    width: 40%;
    background-color: floralwhite;
    padding: 30px;
    border: 0px solid black;
    border-collapse: collapse;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: absolute;
    left: 30%;
    top: 90px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 20px;
    padding-top: 40px;
    z-index: 99;
}

#AIform {
    width: 60%;
    background-color: floralwhite;
    padding: 30px;
    border: 0px solid black;
    border-collapse: collapse;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: absolute;
    left: 20%;
    top: 90px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 20px;
    padding-top: 40px;
    z-index: 99;
    max-height:80%;
    overflow-y:auto;
}

#Gamesform {
    width: 40%;
    background-color: floralwhite;
    padding: 30px;
    border: 0px solid black;
    border-collapse: collapse;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: absolute;
    left: 30%;
    top: 90px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 20px;
    padding-top: 40px;
    z-index: 99;
}

#addeventform {
    width: 40%;
    background-color: floralwhite;
    padding: 30px;
    border: 0px solid black;
    border-collapse: collapse;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: absolute;
    left: 30%;
    top: 90px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 20px;
    padding-top: 40px;
    z-index: 99999;
}




#listeventform {
    width: 80%;
    height: 80%;
    background-color: floralwhite;
    padding: 30px;
    border: 0px solid black;
    border-collapse: collapse;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: absolute;
    left: 10%;
    top: 90px;
    /*box-shadow: 10px 10px antiquewhite;*/
    border-radius: 10px;
    padding: 20px;
    padding-top: 40px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 99999;
}

.hovertable tr:hover {
    background-color: lightyellow;
}

.linkhvr {
    color: black;
    text-decoration: none;
    width: 100%;
    display: grid;
}


.linkhvr:hover {
    color: darkorange;
    background-color: white;
    text-decoration: none;
    width: 100%;
    display: grid;
    border-radius: 8px;
}

.linkhvrselected {
    color: white;
    background-color: black;
    text-decoration: none;
    width: 100%;
    display: grid;
    border-radius: 8px;
}



.linknone {
    color: #dddddd;
}


#formtitle {
    /*color: black;*/
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 1.5em;
    text-align: left;
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /*background-color: #FFCC66;*/
    background-color: black;
    /*opacity: .3;*/
    border-radius: 5px;
    text-indent: 3pt;
}

#closebtn img:hover {
    background-color: white;
}


#closebtn {
    position: absolute;
    right: 3px;
    text-align: right;
    cursor: pointer;
    top: 3px;
    z-index: 999;
}

#FSbtn img:hover {
    background-color: white;
}

#FSbtn {
    position: absolute;
    right: 33px;
    text-align: right;
    cursor: pointer;
    top: 3px;
    z-index: 999;
}

#about {
    width: 50%;
    height: 50%;
    scroll-behavior: auto;
    background-color: floralwhite;
    padding: 10px;
    border: 0px solid black;
    border-collapse: collapse;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: absolute;
    left: 25%;
    top: 90px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    background: floralwhite;
    padding: 20px;
    padding-top: 40px;
    z-index: 2;
}

#contact {
    width: 50%;
    height: 50%;
    scroll-behavior: auto;
    background-color: floralwhite;
    padding: 10px;
    border: 0px solid black;
    border-collapse: collapse;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: absolute;
    left: 25%;
    top: 90px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    background: floralwhite;
    padding: 20px;
    padding-top: 40px;
    z-index: 3;
}

#spinner {
    display: none;
    position: absolute;
    width: 30px;
    height: 30px;
    left: 45%;
    top: 40%;
    z-index: 9999999;
}

#aispinner {
    display: none;
    position: absolute;
    width: 250px;
    /*height: 250px;*/
    left: 45%;
    top: 40%;
    z-index: 9999999;
}
#aispintxt {
    font-size: larger;
    font-weight: 800;
    font-family: sans-serif;
    align-content: center;
    align-self: center;
    background-color: #cccccc88;
    width: 100%;
    border-radius:10px;
    padding-left:5px;
}

.ErrAIText {
    font-size: 24px;
    font-weight: 900;
    font-family: sans-serif;
    align-content: center;
    align-self: center;
    color:orange;
}

#rcorners1 {
    border-radius: 25px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners2 {
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#spintxt {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    background-color: orange;
    color: white;
    width: 140px;
    height: 16px;
    align-content: center;
}

#wkstmp {
    height: 50%;
    width: 100%;

}



#ImgUploadDiv {
    z-index: 9999;
}

.ImgUploadDivHidden {
    display: none;
    z-index: 9999;
}

.ImgUploadDivVisible {
    display: block;
    z-index: 9999;
}

body {
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}
.lifeforliving{
    font-size:larger;
    font-weight:700;
    color: darkred;
}

.myaccount1 {
    background-color: orange;
    border-radius: 15px;
    padding: 5px;
    margin-bottom: 20px;
}

#acctformdiv {
    width: 50%;
    background-color: floralwhite;
    padding: 30px;
    border: 0px solid black;
    border-collapse: collapse;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: absolute;
    left: 25%;
    top: 5px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 20px;
    padding-top: 40px;
    z-index: 90;
    overflow-y: scroll;
    height: 80%;
}
}

#acctform {
    width: 50%;
    background-color: floralwhite;
    padding: 30px;
    border: 0px solid black;
    border-collapse: collapse;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: absolute;
    left: 25%;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 20px;
    padding-top: 40px;
    z-index: 99;
}

.Hidden {
    display: none;
}

.Visible {
    display: block;
}

#oldwks {
    position: relative;
    top: 20px;
    background-color: #ffffff44;
    padding: 30px;
}

.oldwkstxt{
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size:22px;

}

.initialmessage {
    font-family: sans-serif;
    font-weight: 600;
}

.leftmenuOLD {
    width: 80px;
    height: 100%;
    background-color: black;
}










/*Game CSS*/

.hiddenG {
    border: 0 !important;
    height: 1px !important;
    opacity: 0;
    overflow: hidden;
    padding: 0 !important;
    pointer-events: none;
    position: absolute !important;
    width: 1px !important;
}

.compsoul-body {
    align-items: center;
    background: #2f8f9d;
    display: flex;
    flex-flow: column wrap;
    font-size: 1.125vw;
    padding: 6vw;
}

.compsoul-roulette-label {
    background: #181818;
    color: #ffffff;
    cursor: pointer;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 200;
    padding: 0.8vw 1.2vw;
    margin: 0 0 3.2vw;
    text-transform: uppercase;
}

    .compsoul-roulette-label:before {
        content: "Try your luck";
    }

.compsoul-roulette-checkbox:checked + .compsoul-roulette-label:before {
    content: "Stop!";
}

.compsoul-roulette {
    --size: 34em;
    --number-of-items: 12;
    --angle: calc( 3.1416 / var(--number-of-items) );
    --tangent-first: var(--angle);
    --tangent-second: calc( (1/3) * var(--angle) * var(--angle) * var(--angle) );
    --tangent-third: calc( (2 / 15) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) );
    --tangent-fourth: calc( (17/315) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) );
    --tangent: calc( var(--tangent-first) + var(--tangent-second) + var(--tangent-third) + var(--tangent-fourth) );
    outline: 1.2em solid #fff;
    outline-offset: -1em;
    border-radius: 100%;
    box-shadow: 1.2em 1.2em 0 -0.8em #00000022;
    height: var(--size);
    position: relative;
    width: var(--size);
    z-index: 1;
}

.compsoul-roulette:before,
.compsoul-roulette:after {
    background: #00000022;
    border-radius: 100%;
    content: "";
    height: 8em;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-45%, -45%);
    width: 8em;
    z-index: 2;
}

.compsoul-roulette:after {
    background: #ffffff url("https://compsoul.pl/uploads/images/logo.svg") no-repeat center;
    background-size: 80%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.compsoul-roulette .roulette-marker {
    border-radius: 0.4em 0 0 0.4em;
    left: -2em;
    overflow: hidden;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 0;
}

    .compsoul-roulette .roulette-marker:before,
    .compsoul-roulette .roulette-marker:after {
        border-bottom: 2em solid transparent;
        border-left: 4em solid #ffa3c7;
        border-top: 2em solid transparent;
        content: "";
        display: block;
        height: 0;
        width: 0;
    }

    .compsoul-roulette .roulette-marker:after {
        border-left: 4em solid #00000022;
        position: absolute;
        top: 0.4em;
        z-index: -1;
    }

.compsoul-roulette .roulette-list {
    animation: roulette 0.8s linear infinite paused;
    border-radius: 100%;
    font-family: Helvetica, Arial, sans-serif;
    height: 100%;
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: -1;
}

.compsoul-roulette-checkbox:checked + .compsoul-roulette-label + .compsoul-roulette .roulette-list {
animation-play-state: running;
}

@keyframes roulette {
    0% {
        transform: rotate(0);
    }

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

.compsoul-roulette .roulette-item {
    align-items: center;
    bottom: calc( var(--size) / 2 );
    color: #ffffff;
    display: flex;
    font-size: 1em;
    font-weight: 600;
    height: calc( var(--size) / 2 );
    left: calc( var(--size) / 4 );
    position: absolute;
    text-indent: 2em;
    text-transform: uppercase;
    transform-origin: bottom center;
    width: calc( var(--size) / 2 );
    writing-mode: vertical-rl;
}

.compsoul-roulette .roulette-item:nth-child(1) {
    transform: rotate( calc( 360deg / var(--number-of-items) * 0 ) );
}

.compsoul-roulette .roulette-item:nth-child(2) {
    transform: rotate( calc( 360deg / var(--number-of-items) * 1 ) );
}

.compsoul-roulette .roulette-item:nth-child(3) {
    transform: rotate( calc( 360deg / var(--number-of-items) * 2 ) );
}

.compsoul-roulette .roulette-item:nth-child(4) {
    transform: rotate( calc( 360deg / var(--number-of-items) * 3 ) );
}

.compsoul-roulette .roulette-item:nth-child(5) {
    transform: rotate( calc( 360deg / var(--number-of-items) * 4 ) );
}

.compsoul-roulette .roulette-item:nth-child(6) {
    transform: rotate( calc( 360deg / var(--number-of-items) * 5 ) );
}

.compsoul-roulette .roulette-item:nth-child(7) {
    transform: rotate( calc( 360deg / var(--number-of-items) * 6 ) );
}

.compsoul-roulette .roulette-item:nth-child(8) {
    transform: rotate( calc( 360deg / var(--number-of-items) * 7 ) );
}

.compsoul-roulette .roulette-item:nth-child(9) {
    transform: rotate( calc( 360deg / var(--number-of-items) * 8 ) );
}

.compsoul-roulette .roulette-item:nth-child(10) {
    transform: rotate( calc( 360deg / var(--number-of-items) * 9 ) );
}

.compsoul-roulette .roulette-item:nth-child(11) {
    transform: rotate( calc( 360deg / var(--number-of-items) * 10 ) );
}

.compsoul-roulette .roulette-item:nth-child(12) {
    transform: rotate( calc( 360deg / var(--number-of-items) * 11 ) );
}

.compsoul-roulette .roulette-item:nth-child(13) {
    transform: rotate( calc( 360deg / var(--number-of-items) * 12 ) );
}

.compsoul-roulette .roulette-item:nth-child(14) {
    transform: rotate( calc( 360deg / var(--number-of-items) * 13 ) );
}

.compsoul-roulette .roulette-item:nth-child(15) {
    transform: rotate( calc( 360deg / var(--number-of-items) * 14 ) );
}

.compsoul-roulette .roulette-item:nth-child(16) {
    transform: rotate( calc( 360deg / var(--number-of-items) * 15 ) );
}

.compsoul-roulette .roulette-item:nth-child(17) {
    transform: rotate( calc( 360deg / var(--number-of-items) * 16 ) );
}

.compsoul-roulette .roulette-item:nth-child(18) {
    transform: rotate( calc( 360deg / var(--number-of-items) * 17 ) );
}

.compsoul-roulette .roulette-item:nth-child(19) {
    transform: rotate( calc( 360deg / var(--number-of-items) * 18 ) );
}

.compsoul-roulette .roulette-item:nth-child(20) {
    transform: rotate( calc( 360deg / var(--number-of-items) * 19 ) );
}

.compsoul-roulette .roulette-item:after {
    bottom: 0;
    border-right: calc( var(--size) / 2 * var(--tangent) + 1px ) solid transparent;
    border-top: calc( var(--size) / 2 ) solid transparent;
    border-left: calc( var(--size) / 2 * var(--tangent) + 1px ) solid transparent;
    content: "";
    display: block;
    height: 0;
    left: 50%;
    position: absolute;
    transform: translate(-50%, 0);
    width: 0;
    z-index: -1;
}

.compsoul-roulette .roulette-item:nth-child(4n+1):after {
    border-top-color: #143f6b;
}

.compsoul-roulette .roulette-item:nth-child(4n+2):after {
    border-top-color: #F1E0AC;
}

.compsoul-roulette .roulette-item:nth-child(4n+3):after {
    border-top-color: #F55353;
}

.compsoul-roulette .roulette-item:nth-child(4n+4):after {
    border-top-color: #feb139;
}