/*butter #FEDC3D*/
/*black #062f4f*/
/*posy #813772*/
/*embers #b82601*/
:root{
    --color-smoke: #fffbff;
    --color-purple: #745fbe;
    --color-purple-light: #7d67cc;
    --color-pink: #00638a;
    --color-pink-dark: #002939;
    --color-yellow: #c0d29e;
    --color-yellow-dark: #ffa63d;
}
html{background:#fff;background-image:url("/images/main-bg.png");background-attachment: fixed;background-size:100px;}
body{margin:0px;padding:0px;overflow-x:hidden;background-color:transparent !important;}
.welcome{width:100%;float:left;
    min-height: 210px;background-color:var(--color-purple-light);-webkit-box-shadow: 0 8px 6px -6px #6452a5;
    -moz-box-shadow: 0 8px 6px -6px #6452a5;
    box-shadow: 0 8px 6px -6px #6452a5;
    position: relative;}
.information {
    text-align: left;
    text-decoration: none;
    font-size: 15px;
    font-family: 'Quicksand';
    color : #666;
}
.hesapnobuton:link, .hesapnobuton:visited {
  border: 2px #4cae4c solid;
  color: #4cae4c;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
.reklam { 
position: fixed;
} 
.hesapnobuton:hover, .hesapnobuton:active {
  background-color: #4cae4c;
  color:white;
}
.sidebar{width:280px;
    position: fixed;left:0px;top:0px;height:100%;background-color:#fff;border-right:3px solid #f2f2f2;
    background-size: contain;}
.content{width:calc(100% - 280px);float:right;}
.main{padding:30px;width:100%;float:left;-webkit-box-sizing: border-box;
    box-sizing: border-box;}
.question-container{width:100%;float:left;padding:10px;}
.question{width:100%;float:left;margin-bottom:30px;text-align:center;padding:50px 30px;font-family: 'PT Sans', sans-serif;font-size:28px;-webkit-user-select: none;user-select: none;border: 5px dashed #000;margin-top: 15px;background-color:#f5f5f5;color:#000;}
.question-options{width:100%;float:left;}
.question-option span a{color:inherit !important;
    text-decoration: none;}
.question-option{width:100%;float:left;padding:10px 20px;text-align:center;background-color:var(--color-pink);margin-bottom:10px;-webkit-border-radius: 20px;border-radius:20px;border-bottom:6px solid var(--color-pink-dark);color:var(--color-smoke);font-family: 'Comfortaa', cursive;font-size:20px;cursor:pointer;-webkit-user-select: none;user-select:none;}
.question-option-selected{background-color:var(--color-yellow);border-bottom: 6px solid #646e53;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear;}
.question-option-index{font-weight:bold;}
.levels-title{width:100%;float:left;padding:10px;
    text-align: center;
    font-family: 'PT Sans', sans-serif;color:#000;font-size:26px;}
.levels{width:100%;float:left;}
.level{width:90%;margin-left:5%;margin-right:5%;float:left;text-align: center;padding:10px 20px;background-color:var(--color-yellow);margin-bottom:6px;font-size:20px;color:#000;font-family: 'Roboto Mono', monospace;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;}
.level-current{color:#000;background-color:#f5f5f5;width:100% !important;margin-left:0px;margin-right:0px;}
.level-passed{color:#fff;background-color:#9cce3c;width:100% !important;
    margin-left: 0px;margin-right:0px;}
.question-time-container{width:100%;float:left;position:relative;
    min-height: 150px;}
.question-time{width:150px;height:150px;margin:0 auto;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;
    line-height: 150px;background-color:#c0d29e;
    text-align: center;font-size:66px;position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;}
.jokerL{width: 60px;
    height: 60px;
    line-height: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    position: absolute;
    background-color: var(--color-purple);
    font-size: 26px;
    top: -5px;
    left: -10px;
    border: 3px solid #fff;
    color: #fff !important;
    -webkit-box-shadow: 5px 10px 20px -13px var(--color-purple);
    -moz-box-shadow: 5px 10px 20px -13px var(--color-purple);
    box-shadow: 5px 10px 20px -13px var(--color-purple)}
.jokerL small{font-size: 16px;
    line-height: 30px;
    height: 30px;
    width: 120px;
    left: -135px;
    top: 12px;
    background-color: #fff;
    color: #000;
    position: absolute;
    border-radius: 50px;
    font-family: 'Comfortaa', sans-serif;}
.jokerL:hover, .jokerR:hover{background-color:#fff;color:var(--color-purple);
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -ms-transform: scale(1.25);
    -o-transform: scale(1.25);
    transform: scale(1.25);}
.jokerR{width: 60px;
    height: 60px;
    line-height: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    position: absolute;
    background-color: var(--color-purple);
    font-size: 26px;
    bottom: -5px;
    right: -10px;
    border: 3px solid #fff;
    color: #fff !important;
    -webkit-box-shadow: -10px -5px 20px -13px var(--color-purple);
    -moz-box-shadow: -10px -5px 20px -13px var(--color-purple);
    box-shadow: -10px -5px 20px -13px var(--color-purple);}
.jokerR small{position: absolute;
    line-height: 30px;
    height: 30px;
    width: 120px;
    font-size: 16px;
    font-family: 'Comfortaa',sans-serif;
    background-color: #fff;
    color: #000;
    left: 70px;
    border-radius: 50px;
    top: 12px;}
.question-time div{background: linear-gradient(-45deg, #00638a, #3d6e82, #6c8f9c, #c4d1d6);
    background-size: 400% 400%;
    -webkit-animation: Gradient 5s ease infinite;
    -moz-animation: Gradient 5s ease infinite;
    animation: Gradient 5s ease infinite;cursor:pointer;}
div.used{
    opacity: 1 !important;background:#666;animation: none !important;cursor:no-drop !important;}
div.used small{
    display: none !important;}
div.used:hover{
    -webkit-transform: scale(1) !important;
    -moz-transform: scale(1) !important;
    -ms-transform: scale(1) !important;
    -o-transform: scale(1) !important;
    transform: scale(1) !important;color:#666 !important;}
.left-time{color:#fff}
.side-logo{width:100%;float:left;height:110px;
    position: relative;margin:20px 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;-webkit-user-drag: none;}
.side-logo img{width:auto;height:auto;max-width:80%;
    max-height: 80%;
    position: absolute;margin:auto;left:0;right:0;top:0;bottom:0;}
.side-panel{width:100%;float:left;padding:0px 30px;}
.form-element{width:100%;float:left;margin-top:10px;margin-bottom:10px;}
.form-element label{width:100%;float:left;color:#000;
    font-family: 'PT Sans', sans-serif;font-size:12px;}
.form-element input{width:100%;float:left;background-color:transparent;color:#000;border:none;outline: none;border-bottom:1px solid #aaa;font-size:24px;}
.form-element span{color:#000;}
.form-element .login-button{width:100%;float:left;padding:6px 0px;background-color:#00638a;color:#fff;border:none;
    font-family: 'Comfortaa', sans-serif;}
.form-element .login-button:hover{background-color:#0088be;}
.form-element .register-text{text-align: center;width:100%;float:left;padding-top:10px;color:#aaa;border-top:1px solid #2d2d2d;margin-top:20px;}
.form-element .register-text:hover{color:#000;font-size:16px;}
.level-container{width:150px;
    position: absolute;left:280px;}
#RegisterForm{display:none;}
#RPForm{display:none;}
.user-info{width:100%;float:left;color:#aaa;margin-bottom:15px;font-size:18px;}
.user-menu{width:100%;float:left;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;}
.um-item{width:100%;float:left;padding:5px 0px;}
.um-item a{color:#000 !important;}
.highlight{color:#000 !important;}
.big-ami a{font-size:14px;color:#aaa !important;}
.um-admin{width:100%;float:left;margin-top:25px;}
.um-label{width:100%;float:left;font-size:18px;color:#fff;}
.main h1{color:#000;width:100%;float:left;font-family: 'Comfortaa', sans-serif;}
.page-desc{width:100%;float:left;font-size:16px;
    font-family: 'Comfortaa', sans-serif;color:#222;}
.table-container{width:100%;float:left;margin-top:30px;padding:30px;background-color:#fff;}
.edit-form{width:100%;margin-top:30px;float:left;margin-bottom:30px;}
.oform-group{width:100%;float:left;margin-bottom:10px;}
.oform-group label{width:100%;float:left;font-size:18px;color:#000;}
.oform-group input{width:100%;float:left;font-size:20px;border:1px solid #000;padding:10px;}
.qoptions{width:100%;float:left;margin-top:15px;padding-bottom:40px;}
.qoption{width:100%;float:left;font-size:26px;color:#fff;}
.qoption a{color:var(--color-pink) !important;cursor:pointer;
    font-family: 'Comfortaa', sans-serif;
    font-weight: bold;}
.qoption a{margin-right:10px;}
.newqo{width:100%;float:left;margin-bottom:30px;border-bottom:1px solid #eaeaea;padding-bottom:30px;margin-top:30px;}
.newqo input[type="text"]{width:100%;padding:10px;margin-bottom:10px;}
.ourcheckbox{width:100%;float:left;font-size:18px;
    font-family: 'Comfortaa', sans-serif;color:#4cae4c;}
.btnAddOption{float:left;}
.correct_answer{color:#4cae4c;
    font-weight: bold;}
.new-question{margin-top:30px;}
.start{font-size:30px;}
.duel_start{font-size:30px;}
.level-game-over{background-color:#d0625f;color:#fff;}
.big-umi{font-size:18px;}
.oform-group p{font-size:30px;color:var(--color-pink);}
.left-game-container{    width: 100%;
    float: left;
    margin-top:30px;
    margin-bottom: 30px;
    text-align: center;
    display: none;}
.left-game-container button{padding:5px 25px;background-color:var(--color-pink);color:#fff;
    font-family: 'Comfortaa', sans-serif;border:none;font-size:20px;}
.left-game-container p{font-size:20px;color:#000;}
.question-time-mcontainer{width:100%;position:fixed;top:0px;left:0px;padding:5px;
    text-align: center;
    z-index: 99;
    height: 31px;background-color:#001822;display: none;}
.question-time-mcontainer span{position: relative;
    z-index: 2;font-family: 'Comfortaa', sans-serif;color:#fff;}
.timeprogress{width:100%;height:100%;position:absolute;left:0px;top:0px;background-color:var(--color-pink);-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear;}
.mobile-jokers{width:100%;float:left;
    position: relative;
    text-align: center;margin-bottom:15px;
    display: none;
    z-index: 10;margin-top:-30px;}
.mobile-jokers div{display:inline-block;margin:10px;background-color:#f5f5f5;width:150px;height:40px;border-radius:100px;color:var(--color-pink);
    line-height: 40px;font-size:20px;border-top:1px solid #ccc;}
.menu-btn{position: absolute;
    background-color: #f5f5f5;
    padding: 5px;
    display: none;}
.side-close{width: 30px;
    height: 30px;
    color: #fff;
    font-size: 20px;
    position: absolute;
    line-height: 30px;
    right: 15px;
    top: 15px;
    text-align: center;
    background-color: var(--color-pink);
    display: none;
    cursor: pointer;
    z-index: 5;}
.page-menu{width: 100%;
    position: fixed;left:0px;top:0px;
    text-align: center;
    font-size: 24px;
    background-color: var(--color-pink);color:#fff;
    font-family: 'Comfortaa', sans-serif;
    display: none;
    z-index: 999;}
.single-page{padding:15px;}
.jconfirm.jconfirm-material .jconfirm-box{background-color:var(--color-pink) !important;}
.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title{color:#fff !important;font-family: 'Comfortaa', sans-serif !important;}
.jconfirm-content{font-family: 'Comfortaa', sans-serif !important;color:#fff !important;}
.jconfirm-buttons button{border-radius: 0px !important;font-family: 'Comfortaa', sans-serif !important;background-color:var(--color-pink-dark) !important;color:#fff !important;}
.jconfirm.jconfirm-white .jconfirm-box, .jconfirm.jconfirm-light .jconfirm-box{background-color:var(--color-pink) !important;}
.sss{width:100%;float:left;margin-top:30px;}
.contact-page{width:100%;float:left;margin-bottom:100px;margin-top:30px;padding-top:30px;padding-bottom:30px;background-color:#fff;}
.cta{height:150px !important;resize: none;}
.actions{width:100%;float:left;text-align: right;}
.sectiontitle{width:100%;float:left;font-size:26px;color:#555;padding-bottom:10px;border-bottom:1px solid #555;margin-bottom:25px;font-family: 'Comfortaa',sans-serif;font-weight: bold;}
.address{width:100%;float:left;font-family: 'Comfortaa', sans-serif;font-size:15px;color:#a1a1a1;border-bottom:1px solid #555;padding-bottom:25px;}
.address i{margin-right:10px;}
.minititle{width:100%;float:left;margin-top:40px;font-size:18px;text-align: center;font-family: 'Titillium Web', sans-serif;}
.littlemargin{margin-top:10px;}
.googlemap{width:100%;float:left;}
.contact{width:100%;float:left;margin-top:100px;}
.contact input{text-shadow: none !important;border-radius: 0px !important;box-shadow: none !important;}
.mh150{min-height: 150px !important;}
#sendmessage{border:1px solid #7488e0;padding:10px 20px;background-color:#fff;border-radius: 0px !important;color:#000;}
#clearform{border:1px solid #59cd8a;padding:10px 20px;background-color:#fff;border-radius: 0px !important;color:#000;}
.top_player{width:100%;float:left;text-align: center;
    background-color:var(--color-pink);margin-bottom:6px;font-size:14px;font-family: 'Roboto Mono', monospace;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;color:#fff;padding:5px;}
.top_player span{width:100%;float:left;white-space: nowrap;
    overflow: hidden;}
.top_player small{width:100%;float:left;color:var(--color-yellow);}
.top_players{width:100%;float:left;padding-bottom:15px;}
.duello{font-size:30px !important;background: linear-gradient(-45deg, #00638a, #3d6e82, #6c8f9c, #c4d1d6);
    background-size: 400% 400%;
    -webkit-animation: Gradient 5s ease infinite;
    -moz-animation: Gradient 5s ease infinite;
    animation: Gradient 5s ease infinite;cursor:pointer;}
.rooms{width:100%;float:left;margin-bottom:120px;}
.rooms-inner{width:100%;float:left;}
.room{width:100%;float:left;position:relative;padding:5px;background-color:rgb(192, 210, 158);
    overflow: hidden;margin-bottom:10px;
    cursor: pointer;}
.room:hover{transform:scale(1.05);}
.col-title{width:100%;float:left;
    font-family: 'Comfortaa', sans-serif;
    text-indent: 15px;font-size:20px;
    font-weight: bold;color:#000;}
.col-p{width:100%;float:left;
    margin-left: 15px;margin-bottom:15px;color:#555;}
.room-cont{width:100%;float:left;padding:0px 15px;margin-bottom:35px;}
.room-button{width:100%;float:left;padding:5px 0px;background-color:var(--color-pink);color:#fff;text-align: center;border:none;
    outline: none;}
.rgroup{width:100%;float:left;margin-top:25px;}
.rgroup ul li{-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear;}
.rgroup small{width:100%;float:left;
    font-family: 'Comfortaa', sans-serif;color:#000;margin-bottom:5px;}
.point-list{width:100%;float:left;margin:0px;padding:0px;
    list-style: none;}
.userl-list{width:100%;float:left;margin:0px;padding:0px;
    list-style: none;}
.userl-list li{display: inline-block;padding:5px;background-color:var(--color-pink);color:#fff;cursor:pointer;margin-bottom:3px;}
.userl-list li.active{background-color:#c0d29e;color:#000;padding-left:10px;padding-right:15px;}
.point-list li{display: inline-block;padding:5px;background-color:#e7e3df;color:#000;cursor:pointer;margin-bottom:3px;}
.point-list li.active{background-color:#c0d29e;color:#000;padding-left:10px;padding-right:15px;}
.room-button:hover{background-color:var(--color-pink-dark);}
.room-input{width:100%;float:left;padding:5px;
    outline: none;background-color:rgba(255,255,255,0.8);color:#000;    border: 2px solid #000;
    margin-bottom: 5px;}
.room-input::placeholder{color:#000;}
.room-left{width:140px;float:left;background-color:#00638a}
.room-right{width:calc(100% - 145px);float:right;}
.room-name{width:100%;float:left;color:#000;text-overflow: ellipsis;white-space: nowrap;
    text-align: left;}
.room-users{width:50%;float:left;text-align: center;color:#fff;}
.room-fee{width:auto;float:left;color:#fff;
    text-align: right;
    position: absolute;right:5px;top:5px;background-color:#00638a;padding-left:5px;padding-right:5px;}
#createRoom{margin-top:25px;padding:10px;
    font-family: 'Comfortaa', sans-serif;font-size:18px;}
    .btn-success{background-color:#c0d29e !important;border-color:#000 !important;}
    .package{    width: 100%;
        Float: left;
        text-align: center;padding:30px;border:1px solid #eee;background-color:#fff;}
    .package_name{width:100%;float:left;font-size:32px;
        font-family: 'Comfortaa', sans-serif;
        font-weight: bold;margin-bottom:15px;}
    .package_attr{width:100%;float:left;margin-bottom:5px;border-bottom:1px solid #eee;}
    .package_price{width:100%;float:left;margin-top:15px;
        font-family: 'Comfortaa', sans-serif;
        font-weight: bold;font-size:26px;}
    .package_action{width:100%;float:left;margin-top:15px;}
    .package_action button{border:none;
        outline: none;background-color:#4cae4c;color:#fff;width:100%;float:left;padding:10px;
        font-family: 'Comfortaa', sans-serif;font-size:18px;}
    .packages{width:100%;float:left;margin-top:35px;}
    #noroom{width:100%;float:left;display: none;}
/*ANIMATIONS*/
@-webkit-keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

@-moz-keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

@media only screen and (max-height: 680px) {
    .sidebar{overflow-y: scroll !important;}
}

@media only screen and (max-width: 992px) {
    .sidebar{display:none;}
    .content{width:100% !important;}
    .main{padding:15px;overflow-x:hidden !important;}
    .question-container{padding:0px;margin-top:31px !important;}
    .question{border:none;margin-top:0px !important;font-size:20px !important;margin-bottom:0px !important;}
    .question-time-container{display:none !important;}
    .start{width:90% !important;margin-left:5%;
        margin-right: 5%;padding:10px !important;font-size:20px !important;}
    .question-option{width:90% !important;margin-left:5%;margin-right:5%;padding: 5px;
        font-size: 16px;border-width:3px !important;}
    .question-time-mcontainer{display: block;}
    .used{background-color:#f5f5f5 !important;color:#ccc !important;}
    .mobile-jokers{
        display: block !important;}
    .menu-btn{display: block !important;}
    .sidebar{width:100% !important;
        overflow: scroll !important;
        z-index: 999 !important;}
    .side-close{
        display: block !important;}
    .single-page{padding: 15px !important;margin-top:20px !important;}
    .single-page .page-menu{
        display: block !important;}
    body{overflow-x:hidden !important;;}
}