html {
    background: #a9b0e7;
}
#boxbody {margin: 0 3% !important;background: #202442;border-radius: 30px;box-shadow: 2px 1px 14px 6px #0000005e;margin-bottom: 0 !important;}

.progress-bar-text {font-size: 12pt;cursor: default;color: #FFF;text-align: center;line-height: 26px;text-shadow: 0 0 3px #000, -1px 0 0 #000, 1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, -1px -1px 0 #000, 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000;position: absolute;top: 0;bottom: 0;left: 0;right: 0;}

.level-progress {
    margin-left: 20px;
    height: 30px;
    position: relative;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    border: none;
}

.progress-bar-star {
    position: absolute;
    top: -13px;
    right: -16px;
    width: 50px;
    height: 50px;
    background-image: url(../img/star.png);
    background-size: cover;
    -webkit-transform: rotate3d(0,0,1,10deg);
    transform: rotate3d(0,0,1,10deg);
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    cursor: default;
    color: #FFF;
    text-align: center;
    line-height: 55px;
    font-size: 12pt;
    text-shadow: 0 0 3px #000, -1px 0 0 #000, 1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, -1px -1px 0 #000, 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000;
}
.levelstarring {
    margin-top: 15px;
    position: relative;
}

.lprogressor .progress-bar {
    background-color: #4e7cff;
    border-radius: 2px;
    background-size: 40px 40px;
}
.navicon {
    height: 30px;
}
img.avatarer {
    height: 50px;
    width: 50px;
    border-radius: 100%;
    background: white;
    padding: 5px;
    box-shadow: 1px 1px 16px 1px #00000036;
}

.progress-bar-avatar {
    position: absolute;
    top: -13px;
    left: 0px;
    width: 50px;
    height: 50px;
    z-index: 99;
}

.navbar .nav-link {
    font-size: 15px;
    font-weight: 900;
    color: white !important;
}
li.nav-item:hover {
    background: #161935;
    opacity: 1;
}
nav#topbar {
    background: none !important;
}
@media(min-width:800px) {
.navcenter {
    margin-top: -50px;
    background: #2d325a;
    padding: 10px;
    border-radius: 5px;
    padding-right: 0px;
    box-shadow: -1px -1px 10px 3px #00000066;
}
}

span.unamee {
    font-size: 1.3em;
    font-weight: 600;
    color: white;
}

@media(max-width: 780px) {
#gameBxr .card-header {
    padding: 5px !important;
    flex-grow: inherit !important;
    width: 100%;
}

#gameBxr .bilgi-cubugu {
    padding: 5px 10px !important;
    position: fixed;
    bottom: 5px;
    z-index: 9999999;
    left: 5px;
}

#gameBxr .col.text-left .btn-group {
    width: calc(33% - 10px) !important;
    float: left;
    margin-right: 5px;
}

#gameBxr .col.text-left .btn-group .btn {
    width: 100% !important;
    display: inline-block;
    font-size: 13px !important;
}
.goMain {
    height: 35px !important;
    background-size: 35px !important;
    border-radius: 5px !important;
    border: 3px solid #202442 !important;
}
.takistosic .worder.worderbig {
    width: 100% !important;
}
.floatingCircles .worder {
    width: 32.1% !important;
}

.canvas-body {
    padding: 0 !important;
}
span.unamee {
display:none;	
}
}
p.testscore,p.score {
    font-size: 1em !important;
}
#box-content {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: overlay;
}

.disabld:hover {
    cursor: not-allowed !important;
}
.disabld {
    opacity:.7;
}
.levelbtn {
    font-weight: 600;
    text-shadow: 1px 1px 1px black;
    font-size: 30px;
    border: none !important;
    transition: all .5s;
    text-align: left;
    color: white !important;
    letter-spacing: 1.5px;
}

.levelbtn .navicon {
    left: 25px;
    width: 50px;
    height: 50px;
    top: 10px;
    bottom: 0;
}

.levelbtn:hover {opacity: .5;}

.lpassed .hexinner {
    background-color: #24e694;
}
.lcurrent .hexinner {
    background-color: #F9BC26;
}
.lwaiting .hexinner {
    background-color: #d5d5d5;
}
.dashbtn {
    font-size: 1.2em;
}

.bgcarder {padding: 30px;border-radius: 20px;font-size: 1.3em;margin-top: 20px;position: relative;padding-right: 150px;}

.redback {
background:#f24e61;
}
.blueback {
background:#4b79fc;
}

.bgcarder .bbicon {
    max-height: 110px;
    margin-bottom: 20px;
    position: absolute;
    top: -30px;
    right: 20px;
}

.bgcarder hr {
border-color:#ffffff1f !important;
}

.bgcarder:before {
    position: absolute;
    content: "";
    background: #00000029;
    height: 10px;
    width: 80px;
    right: 50px;
    top: 80px;
    border-radius: 100%;
    transform: rotate(-15deg);
    box-shadow: 1px 1px 16px 17px #00000029;
}
.navbar-user {
    border-radius: 5px;
    padding: 3px 10px;
    background: #1c2f51;
    border-top-right-radius: 20px;
    box-shadow: 1px 1px 18px 4px #0000006e;
}
.gameSwal img {
    width: 150px !important;
    height: auto !important;
}
.btn-xxl {
    padding: 15px;
    font-size: 25px;
    font-weight: 900;
}
#box-content {
    padding-right: 10px;
}
.storyBody {
    font-size: 1.3em;
    line-height: 1.3;
}

.card-header.text-center {
    display: inline-block;
    margin: 0;
}

.swal {}

.gameSwal .card {
    text-align: center;
}

.gameSwal .card-body {
    padding: 10px 5px !important;
}

.gameSwal .card-header {
    padding: 5px;
    height: unset !important;
    min-height: unset;
    border-bottom: 1px solid #00000017;
}
.swal2-container {
    background: #202442a6 !important;
}

#boxbody {margin: 0 1% !important;background: #202442;border-radius: 30px;box-shadow: 2px 1px 14px 6px #0000005e;margin-bottom: 0 !important;}

.progress-bar-text {font-size: 12pt;cursor: default;color: #FFF;text-align: center;line-height: 26px;text-shadow: 0 0 3px #000, -1px 0 0 #000, 1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, -1px -1px 0 #000, 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000;position: absolute;top: 0;bottom: 0;left: 0;right: 0;}

.level-progress {
    margin-left: 20px;
    height: 30px;
    position: relative;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    border: none;
}

.progress-bar-star {
    position: absolute;
    top: -13px;
    right: -16px;
    width: 50px;
    height: 50px;
    background-image: url(../img/star.png);
    background-size: cover;
    -webkit-transform: rotate3d(0,0,1,10deg);
    transform: rotate3d(0,0,1,10deg);
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    cursor: default;
    color: #FFF;
    text-align: center;
    line-height: 55px;
    font-size: 12pt;
    text-shadow: 0 0 3px #000, -1px 0 0 #000, 1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, -1px -1px 0 #000, 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000;
}
.levelstarring {
    margin-top: 15px;
    position: relative;
}

.lprogressor .progress-bar {
    background-color: #4e7cff;
    border-radius: 2px;
    background-size: 40px 40px;
}
.navicon {
    height: 30px;
}
img.avatarer {
    height: 50px;
    width: 50px;
    border-radius: 100%;
    background: white;
    padding: 5px;
    box-shadow: 1px 1px 16px 1px #00000036;
}

.progress-bar-avatar {
    position: absolute;
    top: -13px;
    left: 0px;
    width: 50px;
    height: 50px;
    z-index: 99;
}
#boxbody li.nav-item {
    background: #1f2442;
    margin-right: 15px;
    border-radius: 5px;
    border-top-left-radius: 8em 18em;
    border-top-right-radius: 5em 17em;
    border-bottom-left-radius: 3em 5em;
    border-bottom-right-radius: 18em 10em;
    border: 3px solid white;
}

.navbar .nav-link {
    font-size: 15px;
    font-weight: 900;
    color: white !important;
}
li.nav-item:hover {
    background: #161935;
    opacity: 1;
}
nav#topbar {
    background: none !important;
}
@media(min-width:800px) {
.takistosic .worder {
    width: 100% !important;
}
.navcenter {
    margin-top: -50px;
    background: #2d325a;
    padding: 10px;
    border-radius: 5px;
    padding-right: 0px;
    box-shadow: -1px -1px 10px 3px #00000066;
}
}

span.unamee {
    font-size: 1.3em;
    font-weight: 600;
    color: white;
}

@media(max-width:700px) {
span.unamee {
display:none;	
}
}

#box-content {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: overlay;
}

.disabld:hover {
    cursor: not-allowed !important;
}
.disabld {
    opacity: .1;
}
.levelbtn {
    text-shadow: 1px 1px 1px black;
    font-size: 30px;
    border: none !important;
    transition: all .5s;
    text-align: left;
    color: white !important;
    letter-spacing: 1.5px;
    font-weight: 900;
}

.levelbtn .navicon {
    left: 25px;
    width: 30px;
    height: 30px;
    top: 10px;
    bottom: 0;
}

.levelbtn:hover {opacity: .5;}

.lpassed .hexinner,.lpassed:before  {
    background-color: #24e694 !important;
}
.lcurrent .hexinner,.lcurrent:before  {
    background-color: #F9BC26 !important;
}
.lwaiting .hexinner,.lwaiting:before {
    background-color: #d5d5d5 !important;
}
.dashbtn {
    font-size: 1.2em;
}

.bgcarder {padding: 30px;border-radius: 20px;font-size: 1.3em;margin-top: 20px;position: relative;padding-right: 150px;}

.redback {
background:#f24e61;
}
.blueback {
background:#4b79fc;
}

.bgcarder .bbicon {
    max-height: 110px;
    margin-bottom: 20px;
    position: absolute;
    top: -30px;
    right: 20px;
}

.bgcarder hr {
border-color:#ffffff1f !important;
}

.bgcarder:before {
    position: absolute;
    content: "";
    background: #00000029;
    height: 10px;
    width: 80px;
    right: 50px;
    top: 80px;
    border-radius: 100%;
    transform: rotate(-15deg);
    box-shadow: 1px 1px 16px 17px #00000029;
}
.navbar-user {
    border-radius: 5px;
    padding: 3px 10px;
    background: #1c2f51;
    border-top-right-radius: 20px;
    box-shadow: 1px 1px 18px 4px #0000006e;
}
.gameSwal img {
    width: 150px !important;
    height: auto !important;
}
.btn-xxl {
    padding: 15px;
    font-size: 25px;
    font-weight: 900;
}
#box-content {
    padding-right: 10px;
    height: calc(100vh - 120px) !important;
}
.storyBody {
    font-size: 1.3em;
    line-height: 1.3;
}

.card-header.text-center {
    display: inline-block;
    margin: 0;
}

.swal {}

.gameSwal .card {
    text-align: center;
}

.gameSwal .card-body {
    padding: 10px 5px !important;
}

.gameSwal .card-header {
    padding: 5px;
    height: unset !important;
    min-height: unset;
    border-bottom: 1px solid #00000017;
}
.swal2-container {
    background: #202442a6 !important;
}

@media(max-width: 800px) {
#canvasWrapper {
    width: 100%;
    float: none;
}
#midGameArea {
    display: none !important;
    border: none !important;
}

.resetArea {width: 25% !important;}
a#playButton {
    margin: 0 !important;
    margin-top: 15px !important;
    width: 100%;
    margin-top: 5px !important;
}

.readscore {
    margin: 0 !important;
}

.testscore {
    margin: 0 !important;
    margin-left: 15px !important;
}
div#gameBox {width: 100%;position: relative !important;display: inline-block;height: auto !important;}
canvas#gameCanvas {
    display: none;
}
div#downArea {
    height: auto !important;
    display: inline-block;
    position: relative !important;
}
#gameCanvasWrapper {
    width: 100% !important;
    height: auto !important;
    position: relative;
    float: none !important;
}

.divider {
    display: none;
}

#topAreaB {display: none;}
}

#fullstag {
    position: fixed;
    bottom: 5px;
    right: 5px;
    font-size: 15px;
    background: #0aac72;
    color: white !important;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius:5px;
    padding: 0 15px;
    z-index: 999;
}

#fullstag a {
    color: white;
    font-weight: 900;
    border-radius: 5px;
}
#adminbody .navbar-user {
    border-radius: 100%;
    width: 40px;
    height: 40px;
    box-shadow: none !important;
}

#adminbody #topbar {
    background-color: #fff !important;
    border-color: #e3ebf6 !important;
    margin-bottom: 25px;
}

.baslabtn,.duyurubtn {
   float: left;
   width: 100%;
   padding: 15px 25px;
   text-align: center;
   cursor: pointer;
   color: white !important;
   border-radius: 5px !important;
   border: 2px solid #00000045 !important;
   font-size: 25px;
   text-shadow: 1px 1px 1px black;
   font-weight: 900;
   margin: 0 !important;
   position: relative;
   box-shadow: inset 3px 2px 5px #ffffff00, inset 0 0 6px #ffffffdb, inset 0 80px 80px -40px #00000000, 1px 2px 7px #0000008f;
   border-radius: 25px !important;
   background: #29982f;
}

.duyurubtn {
    animation: blinker .7s linear infinite;
    background:#FF5722;
}

.baslabtn:before,.duyurubtn:before {
    position: absolute;
    content: "";
    height: 7px;
    width: 20px;
    top: 9px;
    background: #ffffff6b;
    left: 3px;
    transform: rotate(
-45deg
);
    border-radius: 100%;
}


.baslabtn:after,.duyurubtn:after {
    position: absolute;
    content: "";
    height: 20px;
    width: 7px;
    bottom: 5px;
    background: #ffffff6b;
    right: 10px;
    transform: rotate(
42deg
);
    border-radius: 100%;
}

.baslabtn:hover {
    /* opacity: .7; */
}


#gameBxr .card-body {
    padding: 0 !important;
}

#gameBxr {
    border-radius: 0 !important;
}
#gameBxr .bilgi-cubugu {width: max-content !important;}
#gameBxr .bgwhiter #canvasarea {
    background: none !important;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
}
#gameBxr .card-body.bgwhiter {
    background: linear-gradient(
45deg
, #ececec, whitesmoke);
}
#gameBxr #finished h2 {
    font-size: 25px;
    font-weight: 900;
    color: black;
    position: relative;
}
#gameBxr #finished {
    background: none;
    padding: 25px;
    position: relative !important;
    display: inline-block;
}
#gameBxr .card-header {
    padding: 5px !important;
    flex-grow: inherit !important;
    width: 100%;
}
@media(max-width:780px) {
.score small,.testscore small {
    display: none;
}
#boxbody li.nav-item {
    border: none;
}

#boxbody li.nav-item:hover {
    border: none;
}
}
@-webkit-keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}