*{box-sizing:border-box;}
html,body{width:100%;min-height:100vh;margin:0;padding:0;color:#000; }
html{text-rendering:optimizeLegibility !important;}
button,input[type="text"],input[type="email"],input[type="password"],input[type="submit"]{ -webkit-appearance: none;}

/*COLORS
    backgrounds:
    #1a1a1d - general bg
    #3E415C - header
    #4e4e50

    Reds:
    #6f2232 - general button
    #c61f67 - hover
    #c3073f - active

    Blues:
    #20A4D5
    #20A4D5 - hover
    #123 - darkblue

    Yellows:
    #957907
    #b79405 -  hover

    New Colors 05-2021
    #c3073f
    #c61f67 - Pink -> active/base states
    #252946 - Dark Blue -> for backgrounds
    #20A4D5 - Bright Blue -> active/base states
    #DABC8A - Gold -> for hover states
*/

/*FONTS*/
body{font-family: 'Open Sans', sans-serif; font-size:14px; letter-spacing:1px; overflow-y:scroll; padding-top:80px;
    background: rgb(198,31,103); background: linear-gradient(0deg, #c61f67, #be2173, #a9248a, #84278d, #512972, #33285b, #26274c, #252946, #252946, #252843, #24263d, #222434, #20202c, #1d1d24, #1b1b1f, #1a1a1d);
}

/*GENERAL RULES*/
h1{margin:0;}
h2{}
h3{}
ul{list-style-type:none;margin:0;padding:0}
a{color:#20A4D5; text-decoration:none; }
.pink{color:#c61f67 ;}
.blue{color:#20A4D5;}
.gold{color:#DABC8A;}
a:hover{ color:#DABC8A;}
.hidden{display:none;opacity:0}
img,iframe{max-width:100%;}
#tainomain{min-height:500px; width:100%; max-width:1200px; margin:0 auto;}
.errs{color:#c61f67; padding:4px; font-size:12px; text-align:center;}
.errs.on{ animation:fadeerrs ease 5s;}
@keyframes fadeerrs { 0% {opacity:1; display:block;} 99%{opacity:0; display:block;} 100% {opacity:0; display:none;} }

/*TEMPLATE*/
header{position:fixed; top:0; left:0; right:0; margin:auto; z-index:1000; background:#1A1A1D; width:100%; max-width:2000px; text-align:left; height:80px; padding:15px; transition:all 0.1s; }
header.sticky{ box-shadow:10px 10px 10px #111;}
header .logo-small{position:absolute; top:10px; left:15px; width:70px; }
header .logo-small a{display:block;}
header .logo-small img{width:auto; height:60px;}
header nav.mainnav{width:calc(100% - 90px); margin-left:90px; max-width:1200px; height:50px; }
header nav.mainnav a{height:50px; line-height:50px; display:inline-block; vertical-align:top; padding:0 15px; font-size:18px; color:#fff; text-align:center; text-transform:uppercase; font-weight:bold;}
header nav.mainnav a.active{color:#c61f67;}
header nav.mainnav a:hover{ color:#DABC8A;}

header nav.accountnav{position:absolute; top:10px; right:20px; z-index:21;}
header nav.accountnav .navbtn{ display:inline-block; position:relative; width:60px; height:60px; border:3px solid #fff; border-radius:12px; background:#20A4D5; overflow:hidden; cursor:pointer;}
header nav.accountnav .navbtn img{border-radius:8px; }
header nav.accountnav .navbtn:hover{border-color:#DABC8A;}
header nav.accountnav a{height:50px; line-height:50px; display:inline-block; vertical-align:top; padding:0 15px; font-size:18px; color:#fff; text-align:center; text-transform:uppercase; font-weight:bold;}
header nav.accountnav a.active{color:#c61f67;}
header nav.accountnav a:hover{ color:#DABC8A;}

.sitewide.err{display:none; z-index:10000; position:fixed; top:0; left:0; width:100%; padding:12px 48px 12px 24px; text-align:center; background:#e9e9e9; color:#c61f67;  line-height:40px; font-size:22px; border:2px solid #c61f67; border-bottom-width:10px; }
.sitewide.err .close{width:36px; height:36px; padding:0; border:0; background:#252946; display:block; position:absolute; top:0; bottom:0; margin:auto; right:12px; cursor:pointer; }
.sitewide.err .close:before{content:' '; position:absolute; top:20%; left:20%; width:60%; height:60%; background:url('/images/close.png') no-repeat center center; }
.sitewide.err.on{display:block;}

.sitewide.success{display:none; z-index:10000; position:fixed; top:0; left:0; width:100%; padding:12px 48px 12px 24px; text-align:center; background:#e9e9e9; color:#20A4D5;  line-height:40px; font-size:22px; border:2px solid #c61f67; border-bottom-width:10px; }
.sitewide.success .close{width:36px; height:36px; padding:0; border:0; background:#252946; display:block; position:absolute; top:0; bottom:0; margin:auto; right:12px; cursor:pointer; }
.sitewide.success .close:before{content:' '; position:absolute; top:20%; left:20%; width:60%; height:60%; background:url('/images/close.png') no-repeat center center; }
.sitewide.success.on{display:block;}

.accountbg{ position:fixed; z-index:1001; top:0; right:0; width:0; height:0; transition:all 0.2s; background:#3E415C; opacity:0.9; cursor:pointer;}
.accountbg.on{ width:100vw; height:100vh; }
.accountmodalwrap{display:flex; flex-wrap:wrap; justify-content:space-between; position:absolute; top:100%; right:0; width:0; overflow:hidden; transition:padding 0.2s, width 0.2s; background:#252946; z-index:40;}
.accountmodalwrap.on{position:fixed; z-index:1002; top:0; right:0; bottom:0; left:0; margin:auto; width:300px; height:480px; overflow:auto; padding:10px; border:4px solid #fff; border-radius:12px;}
.accountmodalwrap.in.on{width:600px;}
.accountmodal{ position:relative; width:100%; max-width:320px; overflow:hidden; padding:0; background:#252946;}
.accountmodalwrap.in .accountmodal{width:50%;}
.accountmodal li{text-transform:uppercase;  min-height:26px; line-height:26px;margin-top:10px; }
.accountmodal li.pad{padding:20px 0;}
.accountmodal li a{display:block; padding:0 8px; color:#c61f67; font-size:18px; font-weight:bold; text-transform:none;}
.accountmodal li a:hover{color:#DABC8A;}

.accountmodal .loginmodal{display:none; order:2; width:100%; line-height:20px; padding:12px;}
.accountmodal .loginmodal label{font-size:13px; color:#20A4D5;}
.accountmodal .loginmodal input[type="text"],.accountmodal .loginmodal input[type="password"]{width:100%; padding:0 8px; margin-bottom:12px; height:36px; line-height:36px; border:1px solid #999; }
.accountmodal input[type="submit"]{ margin-top:8px; color:#fff; font-size:16px; background:#20A4D5; border:0; padding:8px 24px; border-radius:5px; cursor:pointer;}
.accountmodal input[type="submit"]:hover{background:#DABC8A;}
.accountmodal .loginmodal.on{display:block; order:1;}

.accountmodal .forgotpassmodal{position:relative; display:none;  width:100%; line-height:20px; padding:12px;}
.accountmodal .forgotpassmodal label{font-size:13px; color:#20A4D5;}
.accountmodal .forgotpassmodal input[type="text"]{width:100%; padding:0 8px; height:36px; line-height:36px; border:1px solid #999; }
.accountmodal .forgotpassmodal.on{display:block;}
.accountmodal .forgotpassmodal .success{display:none;}
.accountmodal .forgotpassmodal .success.on{display:block; position:absolute; top:0; left:0; width:100%; height:100%; padding:40px; background:#252946; color:#fff; font-size:14px; text-align:center; border-radius:8px;}

.accountmodal .signupmodal{position:relative; display:none; order:4; width:100%; line-height:20px; padding:12px;}
.accountmodal .signupmodal label{font-size:13px; color:#20A4D5;}
.accountmodal .signupmodal input[type="text"],.accountmodal .signupmodal input[type="password"]{width:100%; padding:0 8px; margin-bottom:12px; height:36px; line-height:36px; border:1px solid #999; }
.accountmodal .signupmodal.on{display:block;}
.accountmodal .signupmodal .success{display:none;}
.accountmodal .signupmodal .success.on{display:block; position:absolute; top:0; left:0; width:100%; height:100%; padding:40px; background:#252946; color:#fff; font-size:14px; text-align:center; border-radius:8px;}

.accountfollows{display:none; width:50%; padding:9px 12px 0 12px;}
.accountmodalwrap.in .accountfollows{display:block;}
.accountfollows .title{ font-size:18px; color:#fff; display:block;}
.accountfollows .followgames{padding:12px 0; margin-bottom:20px;}
.accountfollows .followgames a{display:block; padding:1px 4px 4px 4px;}
.accountfollows .followgames a:hover{background:#3E415C;}
.accountfollows .followgames a img{display:block; margin-top:10px; width:auto; max-width:100px; height:auto; max-height:50px;}
.accountfollows .followteams{padding:12px 0; margin-bottom:20px;}
.accountfollows .followteams a{display:block; padding:1px 4px 4px 4px;}
.accountfollows .followteams a:hover{background:#3E415C;}
.accountfollows .followteams a img{display:block; width:auto; max-width:100px; height:auto; max-height:50px;}
.accountfollows .all{ display:block; margin-top:20px;}

.searchbox{ position:absolute; top:10px; left:90px; right:90px; margin:auto; width:100%; max-width:600px; height:60px; line-height:60px; display:flex; justify-content:space-around; transition:left 0.2s,right 0.2s,max-width 0.4s;}
.searchbox input{font-size:16px; width:calc(100% - 60px); padding:0 24px; background:#252946; color:#fff; border:0; border-top-left-radius:4px; border-bottom-left-radius:4px;}
.searchbox input::placeholder{color:#fff;}
.searchbox button{width:60px; height:60px; color:#fff; background:#20A4D5; border:0; border-top-right-radius:4px; border-bottom-right-radius:4px; cursor:pointer;}
.searchbox button:hover,.searchbox button:active{background:#DABC8A;}

footer{position:relative; width:100%; color: #fff; text-align:center; min-height:150px; padding:50px 0;line-height:30px;}
footer a{color:#1b1b1b; font-size:15px; font-weight:bold;}
/*PAGES*/
/*@keyframes pagewrapload { 0% {opacity:0;} 100% {opacity:1;} } remove because of reasons.*/
.pagewrap{ padding:40px 20px; /* 20px 20px 270px; /*animation:1s ease-out 0s 1 pagewrapload;*/ min-height:80vh; width:100%; max-width:1400px; font-size:20px; color:#fff;}
.pagewrap.gamedetails{padding:0 0 20px 0px; max-width:100%;}

.home .pagewrap{ max-width:100%;}
.home .welcome {position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; background:#252946; padding:20px; border-radius:20px; margin-bottom:35px;}
.home .welcome .close{position:absolute; top:25px; right:25px; width:30px; height:30px; cursor:pointer; border:0; background:transparent; padding:0;}
.home .welcome .logo-big{width:48%; align-self:baseline;}
.home .welcome .txt{width:48%; font-size:16px; line-height:28px;}
.home .welcome .txt h1{text-align:left;}

iframe.vids{ display:block; width:45vw; height:25vw; border:2px solid #ccc; margin:20px auto;}



.popbg{ position:fixed; z-index:1002; top:0; right:0; width:0; height:0; transition:all 0.2s; background:#3E415C; opacity:0.9; cursor:pointer;}
.popbg.on{ width:100vw; height:100vh; }
.popbg_content{ position:fixed; display:flex; justify-content:center;  z-index:1003; opacity:0; top:0; left:0; right:0; bottom:0; margin:auto; width:0; height:0; transition:all 0.2s; max-width:1200px; max-height:80vh; overflow:hidden; }
.popbg_content.on{opacity:1; width:100%; height:100%;}
.popbg_content .mid{display:flex; flex-direction:column; justify-content:center; width:calc(100% - 100px); background:#333}
.popbg_content .bigim{max-width:calc(100% - 40px); max-height:800px; width:auto; height:auto; align-self:center;}
.popbg_content .vidframe{max-width:calc(100% - 40px); max-height:800px; width:60vw; height:35vw; align-self:center;}
.popbg_content button{outline:none;}

.popbg_content .left{display:none;}
.popbg_content.on .left{position:absolute; top:50%; left:10px; margin-right:10px; width:50px; height:10px; background:#fff; border:0; cursor:pointer; align-self:center;}
.popbg_content.on .left:before{content: ' '; position:absolute; top:8px; left:-9px; transform:rotate(45deg); width:33px; height:10px; background:#fff;}
.popbg_content.on .left:after{content: ' '; position:absolute; top:-9px; left:-9px; transform:rotate(-45deg); width:33px; height:10px; background:#fff;}
.popbg_content.on .left:hover{background:#20A4D5;}
.popbg_content.on .left:hover:before{background:#20A4D5;}
.popbg_content.on .left:hover:after{background:#20A4D5;}

.popbg_content .right{display:none;}
.popbg_content.on .right{position:absolute; top:50%; right:10px;  margin-left:10px; width:50px; height:10px; background:#fff; border:0; cursor:pointer; align-self:center;}
.popbg_content.on .right:before{content: ' '; position:absolute; top:8px; right:-9px; transform:rotate(-45deg); width:33px; height:10px; background:#fff;}
.popbg_content.on .right:after{content: ' '; position:absolute; top:-9px; right:-9px; transform:rotate(45deg); width:33px; height:10px; background:#fff;}
.popbg_content.on .right:hover{background:#20A4D5;}
.popbg_content.on .right:hover:before{background:#20A4D5;}
.popbg_content.on .right:hover:after{background:#20A4D5;}


.floating_box{position:fixed; z-index:1000; top:80px; right:0; width:250px; padding:20px 10px; background:#252946; border-left:4px solid #20A4D5; }
.floating_box.sticky{top:80px;  }

.postfloating_box{width:250px; padding:20px 10px; background:#252946; border-left:4px solid #20A4D5; }

.info_box{ font-size:15px;color:#fff; margin-bottom:20px; padding-left:4px; }
.info_box .row{margin-bottom:4px;}
.info_box a{color:#fff;}
.info_box a:hover{color:#dabc8a;}
.info_box .row.development{  color:#20a4df;}
.info_box .row.alpha{ color:#dabc8a;}
.info_box .row.beta{ color:#c61f67;}
.info_box .row.released{color:#ffffff;}
.info_box .row.name{text-align:center;}
.info_box .row label{margin-left:-4px; font-style:italic; font-weight:bold; color:#20A4D5;display:block; font-size:13px;}
.info_box .row a.nam{display:block; margin-bottom:12px;}
.info_box .row a.follow{ position:relative; display:inline-block; vertical-align:middle; background-image:url('/images/follow_heart_void.svg'); height:32px; width:32px; padding:0; margin-right:8px; background-position:center; background-size:100%; background-repeat:no-repeat;}
.info_box .row a.follow.on{ background-image:url('/images/follow_heart.svg');}
.info_box .row .count{color:#c61f67;}
.info_box .row a .poptitle{position:absolute; top:calc(100% + 0px); z-index:1; width:auto; white-space:nowrap; padding:10px 8px; font-size:14px; font-weight:normal; line-height:1; background:#fff; color:#c61f67; border:#1b1b1b; border-top:1px solid #c61f67; border-radius:4px; }
.info_box .row a .poptitle:before{content:' '; position:absolute; top:-5px; left:50%; margin-left:-3.2px; width:7px; height:7px; border-left:1px solid #c61f67; border-top:1px solid #c61f67; transform:rotate(45deg);}
.info_box .row a.follow .poptitle{top:calc(100% + 5px);}
/*.infonav a{display:block; height:30px; line-height:30px; vertical-align:top; padding:0 8px 0 36px; margin:8px 0; font-size:12px; color:#fff; background:#c61f67; text-align:left; text-transform:uppercase; font-weight:bold; background-position:4px center; background-size:20px; background-repeat:no-repeat;}*/
.infonav label{margin-left:-4px; font-style:italic; font-weight:bold; color:#20A4D5;display:block; font-size:13px;}
.infonav a{position:relative; display:inline-block; height:36px; width:36px; padding:0; margin:8px; background-position:center; background-size:28px; background-repeat:no-repeat;}
.infonav a.tw{ background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjEwMCUiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGhlaWdodD0iNDAwIiBzdHlsZT0iZmlsbDpub25lOyIgd2lkdGg9IjQwMCIgeD0iNTYiIHk9IjU2Ii8+PHBhdGggZD0iTTE2MS4wMTQsNDY0LjAxM2MxOTMuMjA4LDAgMjk4Ljg4NSwtMTYwLjA3MSAyOTguODg1LC0yOTguODg1YzAsLTQuNTQ2IDAsLTkuMDcyIC0wLjMwNywtMTMuNTc4YzIwLjU1OCwtMTQuODcxIDM4LjMwNSwtMzMuMjgyIDUyLjQwOCwtNTQuMzc0Yy0xOS4xNzEsOC40OTUgLTM5LjUxLDE0LjA2NSAtNjAuMzM0LDE2LjUyN2MyMS45MjQsLTEzLjEyNCAzOC4zNDMsLTMzLjc4MiA0Ni4xODIsLTU4LjEwMmMtMjAuNjE5LDEyLjIzNSAtNDMuMTgsMjAuODU5IC02Ni43MDMsMjUuNDk4Yy0xOS44NjIsLTIxLjEyMSAtNDcuNjAyLC0zMy4xMTIgLTc2LjU5MywtMzMuMTEyYy01Ny42ODIsMCAtMTA1LjE0NSw0Ny40NjQgLTEwNS4xNDUsMTA1LjE0NGMwLDguMDAyIDAuOTE0LDE1Ljk3OSAyLjcyMiwyMy43NzNjLTg0LjQxOCwtNC4yMzEgLTE2My4xOCwtNDQuMTYxIC0yMTYuNDk0LC0xMDkuNzUyYy0yNy43MjQsNDcuNzI2IC0xMy4zNzksMTA5LjU3NiAzMi41MjIsMTQwLjIyNmMtMTYuNzE1LC0wLjQ5NSAtMzMuMDcxLC01LjAwNSAtNDcuNjc3LC0xMy4xNDhsMCwxLjMzMWMwLjAxNCw0OS44MTQgMzUuNDQ3LDkzLjExMSA4NC4yNzUsMTAyLjk3NGMtMTUuNDY0LDQuMjE3IC0zMS42OTMsNC44MzMgLTQ3LjQzMSwxLjgwMmMxMy43MjcsNDIuNjg1IDUzLjMxMSw3Mi4xMDggOTguMTQsNzIuOTVjLTM3LjE5LDI5LjIyNyAtODMuMTU3LDQ1LjEwMyAtMTMwLjQ1OCw0NS4wNTZjLTguMzU4LC0wLjAxNiAtMTYuNzA4LC0wLjUyMiAtMjUuMDA2LC0xLjUxNmM0OC4wMzQsMzAuODI1IDEwMy45NCw0Ny4xOCAxNjEuMDE0LDQ3LjEwNCIgc3R5bGU9ImZpbGw6IzFkYTFmMjtmaWxsLXJ1bGU6bm9uemVybzsiLz48L3N2Zz4=');}
.infonav a.fb{ background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjEwMCUiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik00NDkuNDQ2LDBjMzQuNTI1LDAgNjIuNTU0LDI4LjAzIDYyLjU1NCw2Mi41NTRsMCwzODYuODkyYzAsMzQuNTI0IC0yOC4wMyw2Mi41NTQgLTYyLjU1NCw2Mi41NTRsLTEwNi40NjgsMGwwLC0xOTIuOTE1bDY2LjYsMGwxMi42NzIsLTgyLjYyMWwtNzkuMjcyLDBsMCwtNTMuNjE3YzAsLTIyLjYwMyAxMS4wNzMsLTQ0LjYzNiA0Ni41OCwtNDQuNjM2bDM2LjA0MiwwbDAsLTcwLjM0YzAsMCAtMzIuNzEsLTUuNTgyIC02My45ODIsLTUuNTgyYy02NS4yODgsMCAtMTA3Ljk2LDM5LjU2OSAtMTA3Ljk2LDExMS4yMDRsMCw2Mi45NzFsLTcyLjU3MywwbDAsODIuNjIxbDcyLjU3MywwbDAsMTkyLjkxNWwtMTkxLjEwNCwwYy0zNC41MjQsMCAtNjIuNTU0LC0yOC4wMyAtNjIuNTU0LC02Mi41NTRsMCwtMzg2Ljg5MmMwLC0zNC41MjQgMjguMDI5LC02Mi41NTQgNjIuNTU0LC02Mi41NTRsMzg2Ljg5MiwwWiIgc3R5bGU9ImZpbGw6IzE3NzdmMjsiLz48L3N2Zz4=');}
.infonav a.yt{ background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjEwMCUiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxwYXRoIGQ9Ik01MDEuMjk5LDEzMi43NjZjLTUuODg4LC0yMi4wMyAtMjMuMjM0LC0zOS4zNzcgLTQ1LjI2NCwtNDUuMjY0Yy0zOS45MzIsLTEwLjcwMSAtMjAwLjAzNywtMTAuNzAxIC0yMDAuMDM3LC0xMC43MDFjMCwwIC0xNjAuMTA1LDAgLTIwMC4wMzgsMTAuNzAxYy0yMi4wMjUsNS44ODcgLTM5LjM3NiwyMy4yMzQgLTQ1LjI2NCw0NS4yNjRjLTEwLjY5NiwzOS45MjggLTEwLjY5NiwxMjMuMjM2IC0xMC42OTYsMTIzLjIzNmMwLDAgMCw4My4zMDggMTAuNjk2LDEyMy4yMzJjNS44ODgsMjIuMDMgMjMuMjM5LDM5LjM4MSA0NS4yNjQsNDUuMjY4YzM5LjkzMywxMC42OTcgMjAwLjAzOCwxMC42OTcgMjAwLjAzOCwxMC42OTdjMCwwIDE2MC4xMDUsMCAyMDAuMDM3LC0xMC42OTdjMjIuMDMsLTUuODg3IDM5LjM3NiwtMjMuMjM4IDQ1LjI2NCwtNDUuMjY4YzEwLjcwMSwtMzkuOTI0IDEwLjcwMSwtMTIzLjIzMiAxMC43MDEsLTEyMy4yMzJjMCwwIDAsLTgzLjMwOCAtMTAuNzAxLC0xMjMuMjM2WiIgc3R5bGU9ImZpbGw6I2VkMWYyNDtmaWxsLXJ1bGU6bm9uemVybzsiLz48cGF0aCBkPSJNMjA0Ljc5NiwzMzIuODAzbDEzMy4wMTgsLTc2LjgwMWwtMTMzLjAxOCwtNzYuODAxbDAsMTUzLjYwMloiIHN0eWxlPSJmaWxsOiNmZmY7ZmlsbC1ydWxlOm5vbnplcm87Ii8+PC9nPjwvc3ZnPg==');}
.infonav a.twitch{ background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3aWR0aD0iNTEycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnIGlkPSJfeDMzXzQzLXR3aXRjaCI+PGc+PHBvbHlnb24gcG9pbnRzPSI2Ny4xNzUsMjYuMDAxIDM2LjI2OSwxMDQuOTYxIDM2LjI2OSw0MjcuNjggMTQ2LjEzNSw0MjcuNjggMTQ2LjEzNSw0ODUuOTk5ICAgICAyMDcuOTQ4LDQ4NS45OTkgMjY2LjI2OSw0MjcuNjggMzU1LjU5OCw0MjcuNjggNDc1LjczMSwzMDcuNTQ0IDQ3NS43MzEsMjYuMDAxICAgIiBzdHlsZT0iZmlsbDojNjQ0MUE1OyIvPjxwb2x5Z29uIHBvaW50cz0iNDM0LjU1OCwyODYuOTA1IDM2NS44NjYsMzU1LjU5OCAyNTYuMDAxLDM1NS41OTggMTk3LjY3OSw0MTMuOTE3IDE5Ny42NzksMzU1LjU5OCAgICAgMTA0Ljk2LDM1NS41OTggMTA0Ljk2LDY3LjE3NiA0MzQuNTU4LDY3LjE3NiAgICIgc3R5bGU9ImZpbGw6I0ZGRkZGRjsiLz48cmVjdCBoZWlnaHQ9IjEyMC4wMyIgc3R5bGU9ImZpbGw6IzY0NDFBNTsiIHdpZHRoPSI0MS4xNzQiIHg9IjMyNC42OTIiIHk9IjE0Ni4xMzQiLz48cmVjdCBoZWlnaHQ9IjEyMC4wMyIgc3R5bGU9ImZpbGw6IzY0NDFBNTsiIHdpZHRoPSI0MS4xNzciIHg9IjIxNC44MjQiIHk9IjE0Ni4xMzQiLz48L2c+PC9nPjxnIGlkPSJMYXllcl8xIi8+PC9zdmc+');}
.infonav a.web{ background-image:url('/images/globe.png'); }
.infonav a.email{ background-image:url('/images/copy-link-icon.png'); }
/*.infonav a:hover{ background-color:#DABC8A; color:#fff;}*/
.infonav a:hover{ background-color:#fff; border:1px solid #c61f67; border-radius:4px;}
.infonav a .poptitle{position:absolute; top:calc(100% + 6px); z-index:1; width:auto; white-space:nowrap; padding:10px 8px; font-size:14px; line-height:1; background:#fff; color:#c61f67; border:#1b1b1b; border-top:1px solid #c61f67; border-radius:4px; }
.infonav a .poptitle:before{content:' '; position:absolute; top:-5px; left:50%; margin-left:-3.2px; width:7px; height:7px; border-left:1px solid #c61f67; border-top:1px solid #c61f67; transform:rotate(45deg);}

.gametile{ margin:0 0 24px 0; text-align:left; border:2px solid #252946; background:#252946; width:265px;}
/*.gametile:nth-child(4n+2){margin:0 0.75% 24px 1.5%;}
.gametile:nth-child(4n+3){margin:0 1.5% 24px 0.75%;}*/
.gametile a{display:flex; flex-direction:column; padding:6px 12px; width:100%; font-size:16px; color:#c61f67;}
.gametile:hover{background:#3E415C;}
.gametile:hover a{color:#20A4D5;}
.gametile img{max-width:calc(100% + 24px); max-height:150px; display:block; margin:-6px -12px 12px -12px; align-self:center;}
.gametile span{display:block; font-size:11px; color:#fff; margin-top:4px; }
.gametile span.development{ color:#c3073f;}
.gametile span.alpha{ color:#c61f67;}
.gametile span.beta{ color:#20A4D5;}
.gametile span.released{ color:#07971a;}

.usertile{width:100%; display:flex; justify-content:flex-start; margin-bottom:12px;}
.usertile .im{width:60px;}
.usertile .im img{display:block; width:100%; height:auto; margin-right:8px;}
.usertile .info{ padding:4px;}
.usertile .info .title{font-size:15px; color:#fff;}

.passreset input[type="password"]{height:30px; line-height:30px; padding:0 8px; border: 1px solid #999;}
.passreset input[type="submit"]{ margin-top:8px; color:#fff; font-size:16px; background:#20A4D5; border:0; padding:8px 24px; border-radius:5px; cursor:pointer;}
.passreset input[type="submit"]:hover{background:#20A4D5;}

/*Shared Account Elements*/
.accountwrapper{padding:60px 20px 20px 20px; max-width:100%;}
.accountwrapper h1{color:#c61f67;}
.accountwrapper .contents .backlink{color:#fff; font-weight:bold;}
.accountwrapper .contents.posts .backlink{color:#fff;}
.accountwrapper .contents .backlink:hover, .accountwrapper .contents .backlink:active{color:#DABC8A;}
.accountwrapper .preview{color:#20A4D5; font-size:14px; font-weight:bold;}
.accountwrapper .preview:hover{color:#DABC8A;}
.accountwrapper .preview small.pink{color:#c61f67;}


/*Account Setting Page*/
.accountwrapper .contents{ display:flex; flex-wrap:wrap; justify-content:space-between; color:#fff;}
.accountwrapper .errs.on{background:#fff; padding:8px; margin:4px 0;}
.accountwrapper .errs.on:empty{background:none; padding:0; margin:0;}
.accountwrapper .settingsnav{width:200px; margin:20px 15px 20px 0; display:block; background:#252946; border:0; padding:20px; border-radius:8px;}
.accountwrapper .settingsnav .im{width:150px; height:150px;}
.accountwrapper .settingsnav .im:hover:after{content:"Click to edit"; color:#20A4D5; text-align:center; width:100%; display:inline-block;}
.accountwrapper .settingsnav .im img{ border-radius:12px; cursor:pointer;}
.accountwrapper .settingsnav .im img:hover{border:2px solid #20A4D5;}
.accountwrapper .settingsnav .u_username{color:#20A4D5; font-size:22px; font-weight:bold; margin:40px 0 20px 0; }
.accountwrapper .settingsnav a{display:block; color:#fff; height:36px; line-height:36px; font-size:16px;}
.accountwrapper .settingsnav a:hover{color:#DABC8A;}
.accountwrapper .settingsnav a.on,.accountwrapper .settingsnav a.active{color:#c61f67;}
.accountwrapper .settingsblock{flex:1;}

.accountwrapper .user_card{ display:block; width:100%; margin:20px 0; background:#252946; border:0; padding:20px; border-radius:8px;}
.accountwrapper .user_card .info{width:100%; padding:20px 20px 20px 20px;}
.accountwrapper .user_card .info *[contenteditable="true"]{padding:4px 8px; border:2px solid transparent; border-radius:4px; margin-top:20px; max-width:420px;}
.accountwrapper .user_card .info *[spellcheck="false"]:before{content: attr(data-placeholder); color:#20A4D5; position:absolute; top:-28px; left:-4px; z-index:1;padding:4px 8px; transition:top 0.2s,border 0.2s, color 0.2s; overflow:hidden; text-indent:-51px;}
.accountwrapper .user_card .info *[spellcheck="false"].empty:before{top:0; color:#666; text-indent:0;}
.accountwrapper .user_card .info *[contenteditable="true"]:focus{border:2px solid #20A4D5; background:#fff !important; outline:none; color:#1a1a1d !important; cursor:text; }
.accountwrapper .user_card .info *[contenteditable="true"]:hover{background:#3E415C; cursor:pointer;}
.accountwrapper .user_card .info .social a{margin-top:17px;}
.accountwrapper .user_card .info .u_desc{white-space:pre-wrap;}

.accountwrapper .user_card .info div{margin-bottom:8px; position:relative;}
.accountwrapper .user_card .info div.empty{border:2px solid #20A4D5; background-color:#fff; color:#1a1a1d;}
.accountwrapper .user_card .info div.empty:before{content: attr(data-placeholder); color:#666; position:absolute; top:0; left:0; z-index:1;padding:4px 8px;}
.accountwrapper .user_card .info *[contenteditable="true"].empty:hover:before{color:#fff;}

/*account options page*/
.accountwrapper .user_card .info .line{display:block; margin-bottom:20px;}
.accountwrapper .user_card .info label{display:inline-block; min-width:55%; margin-bottom:12px; cursor:pointer;}

.accountwrapper .user_card .info div.u_active{margin:16px 0 8px 0;}
.accountwrapper .user_card .info button.profile.u_active:after{content:"Profile Not Visible";}
.accountwrapper .user_card .info button.profile.u_active.on:after{content:"Profile Visible";}
.accountwrapper .user_card .info button.search.u_active:after{content:"Profile Not Searchable"; }
.accountwrapper .user_card .info button.search.u_active.on:after{content:"Profile Searchable";}
.accountwrapper .user_card .info button.u_active:after{position:absolute; top:0; left:calc(100% + 16px); color:#252946; padding:6px; background:#ccc; white-space: nowrap; }
.accountwrapper .user_card .info button.u_active.on:after{position:absolute; top:0; left:calc(100% + 16px); color:#20A4D5; padding:6px; background:#ccc;}
.accountwrapper .user_card .info button.u_active{display:inline-block; position:relative; border:1px solid #ccc; background:#252946 ; width:50px; height:30px; border-radius:15px; cursor:pointer; transition:background 0.2s; margin-bottom:20px;}
.accountwrapper .user_card .info button.u_active:active,.accountwrapper .user_card .info button.u_active:focus{ outline-style:dotted; outline-color:#ccc;}
.accountwrapper .user_card .info button.u_active:before{content:" ";background:#fff; border:2px solid #aaa; width:26px; height:26px; border-radius:50%; position:absolute; top:-1px; left:-2px; transition:all 0.2s;}
.accountwrapper .user_card .info button.u_active.on{background:#20A4D5;}
.accountwrapper .user_card .info button.u_active.on:before{left:calc(100% - 28px);}


.social{display:flex; flex-wrap: wrap; margin:20px 0;}
.social div{width:calc(100% - 48px); margin:8px 0;}
.social a{position:relative; width:36px; height:36px; margin:4px 12px 4px 0; border:2px solid transparent; border-radius:6px; background-size:28px; background-repeat:no-repeat; background-position:center;}
.social a .poptitle{position:absolute; top:calc(100% + 0px); z-index:1; width:auto; white-space:nowrap; padding:10px 8px; font-size:14px; line-height:1; background:#fff; border:#1b1b1b; border-top:1px solid #c61f67; border-radius:4px; }
.social a .poptitle:before{content:' '; position:absolute; top:-5px; left:50%; margin-left:-3.2px; width:7px; height:7px; border-left:1px solid #c61f67; border-top:1px solid #c61f67; transform:rotate(45deg);}
.social a.web{ background-image:url('/images/whiteglobe.png');}
.social a.follow{ background-image:url('/images/follow_heart_void.svg');}
.social a.follow.on{ background-image:url('/images/follow_heart.svg');}
.social a.tw{ background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjEwMCUiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGhlaWdodD0iNDAwIiBzdHlsZT0iZmlsbDpub25lOyIgd2lkdGg9IjQwMCIgeD0iNTYiIHk9IjU2Ii8+PHBhdGggZD0iTTE2MS4wMTQsNDY0LjAxM2MxOTMuMjA4LDAgMjk4Ljg4NSwtMTYwLjA3MSAyOTguODg1LC0yOTguODg1YzAsLTQuNTQ2IDAsLTkuMDcyIC0wLjMwNywtMTMuNTc4YzIwLjU1OCwtMTQuODcxIDM4LjMwNSwtMzMuMjgyIDUyLjQwOCwtNTQuMzc0Yy0xOS4xNzEsOC40OTUgLTM5LjUxLDE0LjA2NSAtNjAuMzM0LDE2LjUyN2MyMS45MjQsLTEzLjEyNCAzOC4zNDMsLTMzLjc4MiA0Ni4xODIsLTU4LjEwMmMtMjAuNjE5LDEyLjIzNSAtNDMuMTgsMjAuODU5IC02Ni43MDMsMjUuNDk4Yy0xOS44NjIsLTIxLjEyMSAtNDcuNjAyLC0zMy4xMTIgLTc2LjU5MywtMzMuMTEyYy01Ny42ODIsMCAtMTA1LjE0NSw0Ny40NjQgLTEwNS4xNDUsMTA1LjE0NGMwLDguMDAyIDAuOTE0LDE1Ljk3OSAyLjcyMiwyMy43NzNjLTg0LjQxOCwtNC4yMzEgLTE2My4xOCwtNDQuMTYxIC0yMTYuNDk0LC0xMDkuNzUyYy0yNy43MjQsNDcuNzI2IC0xMy4zNzksMTA5LjU3NiAzMi41MjIsMTQwLjIyNmMtMTYuNzE1LC0wLjQ5NSAtMzMuMDcxLC01LjAwNSAtNDcuNjc3LC0xMy4xNDhsMCwxLjMzMWMwLjAxNCw0OS44MTQgMzUuNDQ3LDkzLjExMSA4NC4yNzUsMTAyLjk3NGMtMTUuNDY0LDQuMjE3IC0zMS42OTMsNC44MzMgLTQ3LjQzMSwxLjgwMmMxMy43MjcsNDIuNjg1IDUzLjMxMSw3Mi4xMDggOTguMTQsNzIuOTVjLTM3LjE5LDI5LjIyNyAtODMuMTU3LDQ1LjEwMyAtMTMwLjQ1OCw0NS4wNTZjLTguMzU4LC0wLjAxNiAtMTYuNzA4LC0wLjUyMiAtMjUuMDA2LC0xLjUxNmM0OC4wMzQsMzAuODI1IDEwMy45NCw0Ny4xOCAxNjEuMDE0LDQ3LjEwNCIgc3R5bGU9ImZpbGw6IzFkYTFmMjtmaWxsLXJ1bGU6bm9uemVybzsiLz48L3N2Zz4=');}
.social a.fb{ background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjEwMCUiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik00NDkuNDQ2LDBjMzQuNTI1LDAgNjIuNTU0LDI4LjAzIDYyLjU1NCw2Mi41NTRsMCwzODYuODkyYzAsMzQuNTI0IC0yOC4wMyw2Mi41NTQgLTYyLjU1NCw2Mi41NTRsLTEwNi40NjgsMGwwLC0xOTIuOTE1bDY2LjYsMGwxMi42NzIsLTgyLjYyMWwtNzkuMjcyLDBsMCwtNTMuNjE3YzAsLTIyLjYwMyAxMS4wNzMsLTQ0LjYzNiA0Ni41OCwtNDQuNjM2bDM2LjA0MiwwbDAsLTcwLjM0YzAsMCAtMzIuNzEsLTUuNTgyIC02My45ODIsLTUuNTgyYy02NS4yODgsMCAtMTA3Ljk2LDM5LjU2OSAtMTA3Ljk2LDExMS4yMDRsMCw2Mi45NzFsLTcyLjU3MywwbDAsODIuNjIxbDcyLjU3MywwbDAsMTkyLjkxNWwtMTkxLjEwNCwwYy0zNC41MjQsMCAtNjIuNTU0LC0yOC4wMyAtNjIuNTU0LC02Mi41NTRsMCwtMzg2Ljg5MmMwLC0zNC41MjQgMjguMDI5LC02Mi41NTQgNjIuNTU0LC02Mi41NTRsMzg2Ljg5MiwwWiIgc3R5bGU9ImZpbGw6IzE3NzdmMjsiLz48L3N2Zz4=');}
.social a.yt{ background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjEwMCUiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxwYXRoIGQ9Ik01MDEuMjk5LDEzMi43NjZjLTUuODg4LC0yMi4wMyAtMjMuMjM0LC0zOS4zNzcgLTQ1LjI2NCwtNDUuMjY0Yy0zOS45MzIsLTEwLjcwMSAtMjAwLjAzNywtMTAuNzAxIC0yMDAuMDM3LC0xMC43MDFjMCwwIC0xNjAuMTA1LDAgLTIwMC4wMzgsMTAuNzAxYy0yMi4wMjUsNS44ODcgLTM5LjM3NiwyMy4yMzQgLTQ1LjI2NCw0NS4yNjRjLTEwLjY5NiwzOS45MjggLTEwLjY5NiwxMjMuMjM2IC0xMC42OTYsMTIzLjIzNmMwLDAgMCw4My4zMDggMTAuNjk2LDEyMy4yMzJjNS44ODgsMjIuMDMgMjMuMjM5LDM5LjM4MSA0NS4yNjQsNDUuMjY4YzM5LjkzMywxMC42OTcgMjAwLjAzOCwxMC42OTcgMjAwLjAzOCwxMC42OTdjMCwwIDE2MC4xMDUsMCAyMDAuMDM3LC0xMC42OTdjMjIuMDMsLTUuODg3IDM5LjM3NiwtMjMuMjM4IDQ1LjI2NCwtNDUuMjY4YzEwLjcwMSwtMzkuOTI0IDEwLjcwMSwtMTIzLjIzMiAxMC43MDEsLTEyMy4yMzJjMCwwIDAsLTgzLjMwOCAtMTAuNzAxLC0xMjMuMjM2WiIgc3R5bGU9ImZpbGw6I2VkMWYyNDtmaWxsLXJ1bGU6bm9uemVybzsiLz48cGF0aCBkPSJNMjA0Ljc5NiwzMzIuODAzbDEzMy4wMTgsLTc2LjgwMWwtMTMzLjAxOCwtNzYuODAxbDAsMTUzLjYwMloiIHN0eWxlPSJmaWxsOiNmZmY7ZmlsbC1ydWxlOm5vbnplcm87Ii8+PC9nPjwvc3ZnPg==');}
.social a.twitch{ background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3aWR0aD0iNTEycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnIGlkPSJfeDMzXzQzLXR3aXRjaCI+PGc+PHBvbHlnb24gcG9pbnRzPSI2Ny4xNzUsMjYuMDAxIDM2LjI2OSwxMDQuOTYxIDM2LjI2OSw0MjcuNjggMTQ2LjEzNSw0MjcuNjggMTQ2LjEzNSw0ODUuOTk5ICAgICAyMDcuOTQ4LDQ4NS45OTkgMjY2LjI2OSw0MjcuNjggMzU1LjU5OCw0MjcuNjggNDc1LjczMSwzMDcuNTQ0IDQ3NS43MzEsMjYuMDAxICAgIiBzdHlsZT0iZmlsbDojNjQ0MUE1OyIvPjxwb2x5Z29uIHBvaW50cz0iNDM0LjU1OCwyODYuOTA1IDM2NS44NjYsMzU1LjU5OCAyNTYuMDAxLDM1NS41OTggMTk3LjY3OSw0MTMuOTE3IDE5Ny42NzksMzU1LjU5OCAgICAgMTA0Ljk2LDM1NS41OTggMTA0Ljk2LDY3LjE3NiA0MzQuNTU4LDY3LjE3NiAgICIgc3R5bGU9ImZpbGw6I0ZGRkZGRjsiLz48cmVjdCBoZWlnaHQ9IjEyMC4wMyIgc3R5bGU9ImZpbGw6IzY0NDFBNTsiIHdpZHRoPSI0MS4xNzQiIHg9IjMyNC42OTIiIHk9IjE0Ni4xMzQiLz48cmVjdCBoZWlnaHQ9IjEyMC4wMyIgc3R5bGU9ImZpbGw6IzY0NDFBNTsiIHdpZHRoPSI0MS4xNzciIHg9IjIxNC44MjQiIHk9IjE0Ni4xMzQiLz48L2c+PC9nPjxnIGlkPSJMYXllcl8xIi8+PC9zdmc+');}
.social a.copy{ background-image:url('/images/copy-link-icon.png'); }
.social a:hover{border:2px solid #c61f67;}

.accountwrapper .user_card .info .save_card{display:inline-block; background:#20A4D5; color:#fff; border:0; border-radius:4px; padding:8px 12px; cursor:pointer;}
.accountwrapper .user_card .info .save_card:hover,
.accountwrapper .user_card .info .save_card:active{background:#DABC8A;}

.accountwrapper .user_card .info .send_email{display:inline-block; background:#20A4D5; color:#fff; border:0; border-radius:4px; padding:8px 12px; cursor:pointer;}
.accountwrapper .user_card .info .send_email:hover,
.accountwrapper .user_card .info .send_email:active{background:#DABC8A;}

.accountwrapper .user_pass{padding: 4px 8px; font-size:16px; border: 2px solid #20A4D5; border-radius: 4px; max-width: 420px; margin-bottom:20px;}
.accountwrapper label[for="user_pass"]{width:100%;}
.accountwrapper .newemail{padding: 4px 8px; font-size:16px; border: 2px solid #20A4D5; border-radius: 4px; max-width: 420px; margin-bottom:20px;}
.accountwrapper label[for="newemail"]{width:100%;}

.accountwrapper .user_card .info .save_email{display:inline-block; background:#20A4D5; color:#fff; border:0; border-radius:4px; padding:8px 12px; cursor:pointer;}
.accountwrapper .user_card .info .save_email:hover,
.accountwrapper .user_card .info .save_email:active{background:#DABC8A;}

.accountwrapper .team_info{display:none; width:100%; margin:20px 0; background:#252946; border:0; padding:20px; border-radius:8px;}
.accountwrapper .team_info .add_team{display:inline-block; background:#20A4D5; color:#fff; border:0; border-radius:4px; padding:8px 12px; margin:8px 0; cursor:pointer;}
.accountwrapper .team_info .add_team:hover,
.accountwrapper .team_info .add_team:active{background:#DABC8A;}

.accountwrapper .team_info .teamlist .team{display:flex; line-height:36px; font-size:16px;}
.accountwrapper .team_info .teamlist .name{ color:#c61f67; width:300px;}
.accountwrapper .team_info .teamlist a.name:hover{color:#DABC8A;}
.accountwrapper .team_info .teamlist a.edit{ margin:0 0 0 40px; color:#20A4D5; font-weight:bold;}
.accountwrapper .team_info .teamlist a.edit:hover{color:#DABC8A;}
.accountwrapper .team_info .teamlist .eye{position:relative; top:5px; margin-right:-30px; border:0; background:none; transform:rotate(35deg); line-height: 0.8; font-size:14px; width:50px; height:18px; color:#c61f67; padding:0; text-shadow: 0 1px 1px #333; cursor:pointer; }
.accountwrapper .team_info .teamlist .eye.on,.accountwrapper .team_info .teamlist .eye:hover{color:#fff;}

.accountwrapper .games_info{display:none; width:100%; margin:20px 0; background:#252946; border:0; padding:20px; border-radius:8px;}
.accountwrapper .games_info .add_game{display:none; background:#20A4D5; color:#fff; border:0; border-radius:4px; padding:8px 12px; margin:8px 0; cursor:pointer;}
.accountwrapper .games_info .add_game.on{display:inline-block;}
.accountwrapper .games_info .add_game:hover,
.accountwrapper .games_info .add_game:active{background:#DABC8A;}

.accountwrapper .games_info .gamelist .game{display:flex; line-height:36px; font-size:16px;}
.accountwrapper .games_info .gamelist a{margin-right:0px;}
.accountwrapper .games_info .gamelist a.name{ color:#c61f67; width:300px;}
.accountwrapper .games_info .gamelist a.name:hover{color:#DABC8A;}
.accountwrapper .games_info .gamelist button.qupdate{ color:#20A4D5; font-weight:bold; font-size:16px; line-height:37px; margin:0 12px; background:none; border:0; cursor:pointer;}
.accountwrapper .games_info .gamelist button.qupdate:hover{color:#DABC8A;}
.accountwrapper .games_info .gamelist a.edit{ color:#20A4D5; font-weight:bold;}
.accountwrapper .games_info .gamelist a.edit:hover{color:#DABC8A;}
.accountwrapper .games_info .gamelist .rem{display:inline-block; width:30px; height:30px; line-height:28px; letter-spacing:-2px; text-align:center; font-size:14px; font-weight:bold; border-radius:50%; background:#333; color:#4e4e50; border:0; cursor:pointer;}
.accountwrapper .games_info .gamelist .rem:hover{background:#DABC8A; color:#fff;}

/*Games Quick Update modal*/
.quickupdtbg{ position:fixed; z-index:39; top:0; left:0; width:0; height:0; transition:all 0.2s; background:#3E415C; opacity:0.9; cursor:pointer;}
.quickupdtbg.on{ width:100vw; height:100vh; }
.quickupdtmodal{position:absolute; top:100%; left:-100%; width:0; overflow:hidden; color:#fff; transition:padding 0.2s, width 0.2s; padding:0; background:#252946; z-index:2;}
.quickupdtmodal.on{position:fixed; z-index:40; top:0; right:0; bottom:0; left:0; margin:auto; width:600px; height:400px; overflow:auto; padding:10px; border:4px solid #c61f67; border-radius:12px;}
.quickupdtmodal .message{height:120px; width:100%;}
.quickupdtmodal *[contenteditable="true"]{margin:16px 8px 0 0; padding:4px 8px; border:2px solid #999; border-radius:4px;}
.quickupdtmodal *[contenteditable="true"]:focus{border:2px solid #20A4D5; background:#fff; outline:none; color:#1a1a1d; cursor:text; }
.quickupdtmodal .add_post{ display:inline-block; background:#20A4D5; color:#fff; border:0; border-radius:4px; padding:8px 12px; margin:8px 0; cursor:pointer;}
.quickupdtmodal .add_post:hover,
.quickupdtmodal .add_post:active{background:#DABC8A;}

/*Account Team Page*/
.accountwrapper .team_form{width:100%; margin:20px 0; background:#252946; padding:20px; border-radius:12px;}
.accountwrapper .team_sections{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; }
.accountwrapper .team_sections .team_info{ display:block; width:48%; margin:20px 0; border:0; padding:20px; border-radius:12px;}
.accountwrapper .team_sections .team_members{position:relative; width:48%; margin:20px 0; padding:20px; border-radius:12px;}

.accountwrapper .team_info *[spellcheck="false"]{position:relative; margin-bottom:8px;  }
.accountwrapper .team_info *[spellcheck="false"]:before{content: attr(data-placeholder); color:#20A4D5; position:absolute; top:-30px; left:0; z-index:1;padding:4px 8px; transition:top 0.2s,border 0.2s, color 0.2s; overflow:hidden; text-indent:-52px;}
.accountwrapper .team_info *[spellcheck="false"].empty{border:2px solid #20A4D5; background-color:#fff; color:#1a1a1d;}
.accountwrapper .team_info *[spellcheck="false"].empty:before{top:0; color:#666; text-indent:0;}
.accountwrapper .team_info *[spellcheck="false"].noedit{margin-top:40px;}
.accountwrapper .team_info *[spellcheck="false"]{margin-top:35px; padding:4px 8px; border:2px solid #999; border-radius:4px;}
.accountwrapper .team_info  *[contenteditable="true"]:focus{border:2px solid #20A4D5; background:#fff; outline:none; color:#1a1a1d; cursor:text; }

.accountwrapper .team_info .im{position:relative; margin-bottom:55px;}
.accountwrapper .team_info .im:hover:after{content:"Click to edit"; color:#DABC8A ; text-align:center; display:inline-block;position:absolute; top:100%; left:0;}
.accountwrapper .team_info .im.noedit *{cursor:default}
.accountwrapper .team_info .im.noedit:hover:after{display:none;}
.accountwrapper .team_info .im img{ display:block; border-radius:12px; cursor:pointer; width:auto; height:auto; border:2px solid transparent;}
.accountwrapper .team_info .im img:hover{border:2px solid #DABC8A ;}
.accountwrapper .team_info .im.noedit img:hover{border:2px solid transparent;}
.accountwrapper .team_info .t_desc{min-height:80px; white-space: pre-wrap;}


.accountwrapper .team_sections div.t_active{margin:16px 0 8px 0;}
.accountwrapper .team_sections button.t_active:after{position:absolute; top:0; left:calc(100% + 16px); content:"Private"; color:#252946; padding:6px; background:#ccc; }
.accountwrapper .team_sections button.t_active.on:after{position:absolute; top:0; left:calc(100% + 16px); content:"Public"; color:#20A4D5; padding:6px; background:#ccc;}
.accountwrapper .team_sections button.t_active{display:inline-block; position:relative; border:1px solid #ccc; background:#252946 ; width:50px; height:30px; border-radius:15px; cursor:pointer; transition:background 0.2s; margin-bottom:20px;}
.accountwrapper .team_sections button.t_active:active,.accountwrapper .team_sections button.t_active:focus{ outline-style:dotted; outline-color:#ccc;}
.accountwrapper .team_sections button.t_active:before{content:" ";background:#fff; border:2px solid #aaa; width:26px; height:26px; border-radius:50%; position:absolute; top:-1px; left:-2px; transition:all 0.2s;}
.accountwrapper .team_sections button.t_active.on{background:#20A4D5;}
.accountwrapper .team_sections button.t_active.on:before{left:calc(100% - 28px);}

.accountwrapper .team_sections .save_team{display:inline-block; background:#20A4D5; color:#fff; border:0; border-radius:4px; padding:8px 12px; cursor:pointer;}
.accountwrapper .team_sections .save_team:hover,
.accountwrapper .team_sections .save_team:active{background:#DABC8A;}
.accountwrapper .team_sections .save_team.on{display:inline-block;}

.accountwrapper .team_sections .social{margin:0; width:100%; max-width:660px;}
.accountwrapper .team_sections .social div{align-self:center;}
.accountwrapper .team_sections .social a{margin-top:24px; align-self:center;}


.accountwrapper .team_members div{position:relative; margin-bottom:8px;  }
.accountwrapper .team_members div:before{content: attr(data-placeholder); color:#20A4D5; position:absolute; top:0px; left:0; z-index:-1;padding:4px 8px; transition:top 0.2s,border 0.2s, color 0.2s; overflow:hidden;}
.accountwrapper .team_members div.empty{border:2px solid #e7f9fd; background-color:#fff; color:#1a1a1d; }
.accountwrapper .team_members div.empty:before{top:0; color:#666; text-indent:0; z-index:1;}
.accountwrapper .team_members *[contenteditable="true"]{margin:16px 8px 0 0; padding:4px 8px; border:2px solid #999; border-radius:4px;}
.accountwrapper .team_members  *[contenteditable="true"]:focus{border:2px solid #20A4D5; background:#fff; outline:none; color:#1a1a1d; cursor:text;}
.accountwrapper .team_members .add_mem{width:250px; display:inline-block;}
.accountwrapper .team_members .add_mem_list{position:absolute; top:130px; left:20px; width:200px; background:#fff; color:#20A4D5; z-index:1;}
.accountwrapper .team_members .add_mem_list .r{display:flex; padding:6px; line-height:40px; margin:0; cursor:pointer;}
.accountwrapper .team_members .add_mem_list .r img{max-width:40px; max-height:40px; width:auto; height:auto; margin-right:4px;}
.accountwrapper .team_members .add_mem_list .r:hover{background:#c61f67; color:#fff;}
.accountwrapper .team_members .current_members{padding:12px 0; position:relative; min-height:40px;}
.accountwrapper .team_members .current_members .r{ background:#c61f67; color:#fff; width:250px; min-height:40px; padding:4px; display:flex; align-items:center; justify-content:flex-start;}
.accountwrapper .team_members .current_members .r.owner{background:#DABC8A; color:#252946; font-weight:bold; }
.accountwrapper .team_members .current_members img{margin-right:12px;}
.accountwrapper .team_members .current_members button{position:absolute; top:0; bottom:0; margin:auto; right:8px; display:inline-block; width:30px; height:30px; line-height:28px; letter-spacing:0; text-align:center; font-size:14px; font-weight:bold; border-radius:50%; background:#333; color:#fff; border:0; cursor:pointer;}
.accountwrapper .team_members .current_members button:hover{ background:#DABC8A;}

.accountwrapper .team_members .invite_via{display:inline-block; background:#20A4D5; color:#fff; border:0; border-radius:4px; padding:8px 12px; cursor:pointer;}
.accountwrapper .team_members .invite_via:hover,
.accountwrapper .team_members .invite_via:active{background:#DABC8A;}
.accountwrapper .team_members .invite_via.on{display:inline-block;}
.accountwrapper .team_members .invite_box{display:none; margin:12px 0;}
.accountwrapper .team_members .invite_box.on{display:block;}
.accountwrapper .team_members .invite_mem{width:250px; margin:0; vertical-align:top; display:inline-block;}
.accountwrapper .team_members .send_invite{display:inline-block; background:#20A4D5; color:#fff; border:0; border-radius:4px; padding:8px 12px; cursor:pointer;}
.accountwrapper .team_members .send_invite:hover,
.accountwrapper .team_members .send_invite:active{background:#DABC8A;}
.accountwrapper .team_members .send_invite.on{display:inline-block;}



/*Account Game Page*/
.accountwrapper .game_form{width:59%; margin:20px 0; background:#252946; padding:20px; border-radius:12px;}
.accountwrapper .game_options{width:37%; margin:20px 0; padding:20px; border-radius:12px;}
.accountwrapper .game_sections{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; }
.accountwrapper .game_sections .game_info{width:100%; margin:20px 0; padding:0; border-radius:12px;}
.accountwrapper .game_sections .game_info h3{margin-top:32px; margin-bottom:8px;}

.accountwrapper .game_info *[contenteditable="true"]{position:relative; margin-bottom:8px;  }
.accountwrapper .game_info div:before{content: attr(data-placeholder); color:#20A4D5; position:absolute; top:-30px; left:-4px; z-index:1;padding:4px 8px; transition:top 0.2s,border 0.2s, color 0.2s; overflow:hidden; text-indent:-47px;}
.accountwrapper .game_info div.empty{border:2px solid #20A4D5; background-color:#fff; color:#1a1a1d;}
.accountwrapper .game_info div.empty:before{top:0; color:#999; text-indent:0;}
.accountwrapper .game_info *[contenteditable="true"]{margin-top:32px; padding:4px 8px; border:2px solid #666; border-radius:4px; max-width:600px;}
.accountwrapper .game_info *[contenteditable="true"]:focus{border:2px solid #20A4D5; background:#fff; outline:none; color:#1a1a1d; cursor:text;}
.accountwrapper .game_info div.g_status:not(.empty):before{text-indent:-52px;}
.accountwrapper .game_info .im{position:relative;}
.accountwrapper .game_info .im.logo{ margin-bottom:30px;}
.accountwrapper .game_info .im.banner{width:100%; height:auto; margin-bottom:55px; }
.accountwrapper .game_info .im:hover:after{content:"Click to edit"; position:absolute; top:100%; left:0; color:#20A4D5; text-align:center;  display:inline-block;}
.accountwrapper .game_info .im img{ border:2px solid transparent; border-radius:12px; cursor:pointer; display:block;}
.accountwrapper .game_info .im img:hover{border:2px solid #20A4D5;}
.accountwrapper .game_info .g_desc{min-height:80px; white-space: pre-wrap;}

.accountwrapper .game_sections .game_team{font-size:14px; border:2px solid #20A4D5; background-color:#fff; height:30px; border-radius:4px; width:300px; color:#1a1a1d; margin:22px 0;}
.accountwrapper .game_sections .game_team option:not(:checked){color:#666;}
.accountwrapper .game_sections .game_team option:first-child{color:#666;}

.accountwrapper .game_sections .game_status{font-size:14px; border:2px solid #20A4D5; background-color:#fff; height:30px; border-radius:4px; width:300px; color:#1a1a1d; margin-top:22px;}
.accountwrapper .game_sections .game_status option:not(:checked){color:#666;}
.accountwrapper .game_sections .game_status option:first-child{color:#666;}

.accountwrapper .game_sections .social{margin:0; width:100%; max-width:660px;}
.accountwrapper .game_sections .social div{align-self:center;}
.accountwrapper .game_sections .social a{margin-top:24px; align-self:center;}

.accountwrapper .game_sections div.g_active{margin:16px 0 8px 0;}
.accountwrapper .game_sections button.g_active:after{position:absolute; top:0; left:calc(100% + 16px); content:"Private"; color:#252946; padding:6px; background:#ccc; }
.accountwrapper .game_sections button.g_active.on:after{position:absolute; top:0; left:calc(100% + 16px); content:"Public"; color:#c61f67; padding:6px; background:#ccc;}
.accountwrapper .game_sections button.g_active{display:inline-block; position:relative; border:1px solid #ccc; background:#252946 ; width:50px; height:30px; border-radius:15px; cursor:pointer; transition:background 0.2s; margin-bottom:20px;}
.accountwrapper .game_sections button.g_active:active,.accountwrapper .game_sections button.g_active:focus{ outline-style:dotted; outline-color:#ccc;}
.accountwrapper .game_sections button.g_active:before{content:" ";background:#fff; border:2px solid #aaa; width:26px; height:26px; border-radius:50%; position:absolute; top:-1px; left:-2px; transition:all 0.2s;}
.accountwrapper .game_sections button.g_active.on{background:#c61f67;}
.accountwrapper .game_sections button.g_active.on:before{left:calc(100% - 28px);}

.accountwrapper .game_sections .save_game{display:inline-block; background:#c61f67; color:#fff; border:0; border-radius:4px; padding:8px 12px; cursor:pointer;}
.accountwrapper .game_sections .save_game:hover,
.accountwrapper .game_sections .save_game:active{background:#DABC8A;}
.accountwrapper .game_sections .save_game.on{display:inline-block;}

.accountwrapper .game_options{position:relative;}
.accountwrapper .game_options div{position:relative; margin-bottom:8px;}
.accountwrapper .game_options div:before{content: attr(data-placeholder); color:#20A4D5; position:absolute; top:-30px; left:-4px; z-index:1;padding:4px 8px; transition:top 0.2s,border 0.2s, color 0.2s; overflow:hidden; text-indent:0px;}
.accountwrapper .game_options div.empty{border:2px solid #20A4D5; background-color:#fff; color:#1a1a1d;}
.accountwrapper .game_options div.empty:before{top:0; color:#999; text-indent:0;}
.accountwrapper .game_options *[contenteditable="true"]{margin-top:32px; padding:4px 8px; border:2px solid #666; border-radius:4px; max-width:600px;}
.accountwrapper .game_options *[contenteditable="true"]:focus{border:2px solid #20A4D5; background:#fff; outline:none; color:#1a1a1d; cursor:text; }

.accountwrapper .game_options .add_genre_list{position:absolute; top:204px; left:20px; width:200px; max-height:300px; overflow-y:auto; background:#fff; color:#20A4D5; z-index:1;}
.accountwrapper .game_options .add_genre_list .r{display:flex; padding:8px 12px; margin:0; cursor:pointer; border-bottom:1px solid #dedede;}
.accountwrapper .game_options .add_genre_list .r:hover{background:#c61f67; color:#fff;}
.accountwrapper .game_options .current_genres{display:flex; justify-content:space-between; flex-wrap:wrap; padding:12px 0;}
.accountwrapper .game_options .current_genres .r{ background:#c61f67; color:#fff; width:48%; padding:4px 4px 4px 8px; display:flex; align-items:center; justify-content:space-between;}
.accountwrapper .game_options .current_genres img{margin-right:8px;}
.accountwrapper .game_options .current_genres button{margin-left:8px; display:inline-block; width:30px; height:30px; line-height:28px; letter-spacing:0; text-align:center; font-size:14px; font-weight:bold; border-radius:50%; background:#333; color:#fff; border:0; cursor:pointer;}
.accountwrapper .game_options .current_genres button:hover{background:#DABC8A; }

.accountwrapper .game_options .add_gallery_image{background:#c61f67; color:#fff; border:0; border-radius:4px; padding:8px 12px; cursor:pointer;}
.accountwrapper .game_options .add_gallery_image:hover,
.accountwrapper .game_options .add_gallery_image:active{background:#DABC8A;}

.accountwrapper .game_options .add_gallery_video{background:#c61f67; color:#fff; border:0; border-radius:4px; padding:8px 12px; cursor:pointer;}
.accountwrapper .game_options .add_gallery_video:hover,
.accountwrapper .game_options .add_gallery_video:active{background:#DABC8A;}
.accountwrapper .game_options .show_vid{display:none;}
.accountwrapper .game_options .show_vid.on{display:block;}

.gallery_small{display:flex; flex-wrap:wrap; justify-content:flex-start;}
.gallery_small .imwrap{position:relative; width:32%; margin:0 0.5% 12px 0.5%; border:1px solid #1A1A1D; background:#1A1A1D; cursor:pointer;}
.gallery_small a{display:block;}
.gallery_small .imwrap img{width:100%; display:block; margin:0;}
.gallery_small .imwrap button{display:none; position:absolute; top:2px; right:2px; background:#c61f67; color:#fff; width:60px; height:26px; line-height:26px; text-align:center; font-size:10px; text-transform:uppercase; z-index:2; padding:0; border:0; cursor:pointer;}
.gallery_small a:before{content:'Play'; position:absolute; z-index:1; top:0; right:0; left:0; bottom:0; margin:auto; width:46px; text-align:center; text-transform:uppercase; height:26px; line-height:28px; color:#fff; background:#1A1A1D; border:1px solid #fff; font-size:12px;}
.gallery_small .imwrap:hover,.gallery_small .imwrap:active{border:1px solid #20A4D5;}
.gallery_small .imwrap:hover button{display:block;}
.gallery_small .imwrap button:hover{background:#DABC8A;}

/*Account posts section*/
.accountwrapper .contents.posts{ position:relative;}
.accountwrapper .contents.posts .preview{position:absolute; top:38px; right:20px;}
.accountwrapper .contents.posts .addpost{ position:absolute; top:40px; right:20px; background:#20A4D5; color:#fff; border:0; border-radius:4px; padding:12px 16px; cursor:pointer; }
.accountwrapper .contents.posts .addpost:hover, .accountwrapper .contents.posts .addpost:active{background:#DABC8A;}
.accountwrapper .contents.posts div.team{width:100%; text-transform:capitalize; }
.accountwrapper .contents.posts .team button{display:inline-block; background:#c61f67; color:#fff; border:0; border-radius:4px; padding:8px 12px; margin:8px 10px; cursor:pointer;}
.accountwrapper .contents.posts .team button:hover,
.accountwrapper .contents.posts .team button:active{background:#DABC8A;}
.accountwrapper .contents.posts .team label.team{display:inline-block; background:#20A4D5; color:#fff; border:0; border-radius:4px; padding:8px 12px; margin:8px 10px; cursor:pointer;}
.accountwrapper .contents.posts .team label.team:hover,
.accountwrapper .contents.posts .team label.team:active,
.accountwrapper .contents.posts .team label.team.on{background:#DABC8A;}
.accountwrapper .contents.posts .team label.game{display:inline-block; background:#c61f67; color:#fff; border:0; border-radius:4px; padding:8px 12px; margin:8px 10px; cursor:pointer;}
.accountwrapper .contents.posts .team label.game:hover,
.accountwrapper .contents.posts .team label.game:active,
.accountwrapper .contents.posts .team label.game.on{background:#DABC8A;}
.accountwrapper .contents.posts *[contenteditable="true"]{padding:4px 8px; border:2px solid transparent; border-radius:4px; width:100%; margin-top:30px;}
.accountwrapper .contents.posts *[contenteditable="true"]:focus{border:2px solid #20A4D5; background:#fff; outline:none; color:#1a1a1d; cursor:text;}
.accountwrapper .contents.posts *[spellcheck="false"]:before{content: attr(data-placeholder); color:#20A4D5; position:absolute; top:-28px; left:-4px; z-index:1;padding:4px 8px; transition:top 0.2s,border 0.2s, color 0.2s; overflow:hidden; text-indent:-51px;}
.accountwrapper .contents.posts *[spellcheck="false"].empty:before{top:0; color:#666; text-indent:0;}

.accountwrapper .contents.posts .save_post{display:inline-block; background:#c61f67; color:#fff; border:0; border-radius:4px; padding:8px 12px; cursor:pointer;}
.accountwrapper .contents.posts .save_post:hover,
.accountwrapper .contents.posts .save_post:active{background:#DABC8A;}

.gameview{width:100%; background:#252946; padding:20px; border-radius:8px; margin:20px 0;}
.gameview .feedwrap{ padding:1rem 0;}
.gameview .tl .post{cursor:default; max-height:300px; overflow:hidden;}
.gameview .tl .post .options{display:none;}
.gameview .tl .post:hover .options{position:absolute; top:0; left:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:100%; height:100%; z-index:1; background:#1A1A1D; color:#fff; }
.gameview .tl .post .options .post_edit{background:#c61f67; color:#fff; border:0; border-radius:4px; padding:12px 16px; cursor: pointer; margin:10px;}
.gameview .tl .post .options .post_remove{background:#c61f67; color:#fff; border:0; border-radius:4px; padding:12px 16px; cursor: pointer; margin:10px;}

.teamview{width:100%; background:#252946; padding:30px 20px 20px 20px; border-radius:8px; margin:20px 0;}
.teamview .feedwrap{padding:1rem 0;}
.teamview .tl .post{cursor:default; max-height:300px; overflow:hidden;}
.teamview .tl .post .options{display:none;}
.teamview .tl .post:hover .options{position:absolute; top:0; left:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:100%; height:100%; z-index:1; background:#1A1A1D; color:#fff; }
.teamview .tl .post .options .post_edit{background:#c61f67; color:#fff; border:0; border-radius:4px; padding:12px 16px; cursor: pointer; margin:10px;}
.teamview .tl .post .options .post_remove{background:#c61f67; color:#fff; border:0; border-radius:4px; padding:12px 16px; cursor: pointer; margin:10px;}

.formview{width:100%; background:#252946; padding:20px; border-radius:8px; margin:20px 0;}
.formview div.p_active{margin:16px 0 8px 0;}
.formview button.p_active:after{position:absolute; top:0; left:calc(100% + 16px); content:"Private"; color:#20A4D5; padding:6px; background:#ccc; }
.formview button.p_active.on:after{position:absolute; top:0; left:calc(100% + 16px); content:"Public"; color:#c61f67; padding:6px; background:#ccc;}
.formview button.p_active{display:inline-block; position:relative; border:1px solid #ccc; background:#20A4D5 ; width:50px; height:30px; border-radius:15px; cursor:pointer; transition:background 0.2s; margin-bottom:20px;}
.formview  button.p_active:active,.formview  button.p_active:focus{ outline-style:dotted; outline-color:#ccc;}
.formview  button.p_active:before{content:" ";background:#fff; border:2px solid #aaa; width:26px; height:26px; border-radius:50%; position:absolute; top:-1px; left:-2px; transition:all 0.2s;}
.formview  button.p_active.on{background:#c61f67;}
.formview  button.p_active.on:before{left:calc(100% - 28px);}

/*.newpostform input[type="radio"]{width:1px; height:1px; visibility:hidden;}*/
.newpostform label.on{color:red}
.newpostform .subject{position:relative; background:#fff; color:#1a1a1d;  margin:1rem 0;}
.newpostform .subject.empty{border:2px solid #20A4D5; outline:none;}
.newpostform .subject.empty:before{content: attr(data-placeholder); color:#999; position:absolute; top:0; left:0; z-index:1;padding:4px 8px;}

/*tinymce override*/
.tox .tox-notification--error{background:#333 !important;}
.tox .tox-notification--info{background:#333 !important;}


/*Image file modal*/
.imageeditbg{ position:fixed; z-index:39; top:0; left:0; width:0; height:0; transition:all 0.2s; background:#3E415C; opacity:0.9; cursor:pointer;}
.imageeditbg.on{ width:100vw; height:100vh; }
.imageeditmodal{position:absolute; top:100%; left:-100%; width:0; overflow:hidden; transition:padding 0.2s, width 0.2s; padding:0; background:#252946; z-index:2; color:#fff;}
.imageeditmodal.on{position:fixed; z-index:40; top:0; right:0; bottom:0; left:0; margin:auto; width:60vw; height:60vh; overflow:auto; padding:10px; border:4px solid #c61f67; border-radius:12px;}
.imageeditmodal .txt{text-align:center;}
.imageeditmodal .text{text-align:center; font-size:25px; color:#c61f67;}
.imageeditmodal .drop{height:calc(100% - 80px); width:calc(100% - 40px); border: 2px dashed #c61f67; border-radius:8px; padding:0; text-align:center; margin:20px;}
.imageeditmodal .drop.on{border-color:#20A4D5;}
.imageeditmodal .drop .r{color:#c61f67; font-size:16px;}
.imageeditmodal .mycrop{position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%;}
.imageeditmodal .cropper-container{border-radius:10px;}
.imageeditmodal .tools{width:90%; margin:8px auto 8px auto; }
.imageeditmodal .cropit{ display:inline-block; margin-left:12px; background:#20A4D5; color:#fff; border:0; border-radius:4px; padding:8px 12px; cursor:pointer;}
.imageeditmodal .cropit:hover,.imageeditmodal .cropit:active{background:#DABC8A;}
.imageeditmodal .startover{ display:inline-block; margin-left:12px; background:#c61f67; color:#fff; border:0; border-radius:4px; padding:8px 12px; cursor:pointer;}
.imageeditmodal .startover:hover,.imageeditmodal .startover:active{background:#DABC8A;}
/*Timeline posts*/
.tl .post{ display:flex; justify-content:flex-start; /*overflow:hidden;*/ width:100%; padding:12px; margin: 0 0 12px 0; cursor:pointer;}
.tl .post .im{width:60px; height:60px; margin-right:12px; border-radius:12px;}
.tl .post .info{flex:1 auto; position:relative; padding:0 30px 42px 0; }
.tl .post .info .social{position:absolute; bottom:-32px; right:-12px; line-height:41px; padding:0px 0px 0px 8px; border:2px solid transparent; color:transparent; transition:all 0.2s ease;}
.tl .post:hover .info .social{background:#fff; border-top:2px solid #fff; color:#fff;}
/*.tl .post .info button.share{position:absolute; bottom:4px; right:4px; width:20px; height:20px; border:0; background:url('/images/share-icon.png') no-repeat center; background-size:20px; cursor:pointer;}
.tl .post .info button.share:hover{border:2px solid #fff; bottom:-2px; right:-2px; width:32px; height:32px; border-radius:4px; background-color:#222;}*/
.tl .post .date{position:absolute; top:0; right:0; font-size:12px; color:#ccc;}
.tl .post h3{ font-size:18px; margin:0 0 4px 0;}
.tl .post h3 span{font-weight:normal; font-size:16px; text-transform:capitalize;}
.tl .post h4{ font-size:16px; margin:0 0 4px 0;}
.tl .post p{ font-size:14px; margin:0 0 4px 0; width:100%;}
.tl .post p img{ max-width:300px; display:block; margin:6px 0;}

.tl .post.team{border:1px solid #252946; border-top:2px solid #20A4D5;  background:#252946; }
.tl .post.team:hover{background:#3E415C; }
.tl .post.team h3 span,.tl .post.team a{color:#20A4D5}
.tl .post.team h3 span,.tl .post.team a.main{color:#fff; display:block;}

.tl .post.game{border:1px solid #252946; border-top:2px solid #c61f67; background:#252946; }
.tl .post.game:hover{background:#3E415C;}
.tl .post.game h3 span,.tl .post.game a{color:#c61f67}
.tl .post.game h3 span,.tl .post.game a.main{color:#fff; display:block;}

/*Account Follows Page*/
.accountwrapper .followrender{width:100%;}
.accountwrapper .followrender .rowwrap{display:flex; width:100%; flex-wrap:wrap; justify-content:flex-start;}
.accountwrapper .followrender .rowwrap h2{width:100%; margin-bottom:20px;}
.accountwrapper .followrender .rowwrap .tile{ width:24%; display:flex; flex-wrap:wrap; justify-content:space-between;}
.accountwrapper .followrender .rowwrap .tile a{display:block; width:100%; text-decoration:none; margin-bottom:20px;  padding:4px; text-align:center;}
.accountwrapper .followrender .rowwrap .tile a:hover{ background: #3E415C;}
.accountwrapper .followrender .rowwrap .tile a .im{display:block; max-height:80px; height:auto; width:auto; max-width:100%; margin:0 auto 12px auto;}
.accountwrapper .followrender .rowwrap .tile a .title{font-size:16px; margin-right:12px;}
.accountwrapper .followrender .rowwrap .tile a .heart{margin-bottom:-5px;}
.accountwrapper .followrender .rowwrap .tile a .count{font-size:14px; color:#c61f67;}


@media (min-width:2000px){
    body{font-size:18px;}
}

@media (max-width:1400px){
    .searchbox {max-width:400px;}
    .pagewrap{max-width:100%;}
    .accountwrapper .user_card{width:calc(100% - 20px);}
    .accountwrapper .team_info{width:calc(100% - 20px);}
}
@media (max-width:1200px){
    .accountwrapper .user_card{width:100%; margin:20px auto;}
    .accountwrapper .team_info{width:100%; margin:20px auto;}

    .gametile{width:30%;}
}
@media (max-width:1100px){
    header .searchbox{max-width:60px; padding:0; transition: none; left:auto; right:200px; overflow:hidden; justify-content:flex-start;}
    header .searchbox.on{max-width:300px;}
    header .searchbox input{display:none;  width:0; padding:0; transition:none;}
    header .searchbox .searchbtn{border-radius:4px; }
    header .searchbox.on input{display:inline-block;padding:0 24px; width:calc(100% - 60px);}

    .home .welcome .logo-big{width:30%}
    .home .welcome .txt{width:68%;}

    .gamedetails .banner h1{font-size:4rem;}
}
@media (max-width:960px){
    header{margin-top:0px; left:0; width:100%; box-shadow:none;}

    header .searchbox{top:15px; right:180px;}
    header .searchbox input{ height:50px;}
    header .searchbox .searchbtn{width:50px; height:50px;}

    header nav.accountnav{right:15px; top:15px;}
    header nav.accountnav .navbtn{width:50px; height:50px;}

    .pagewrap h1{text-align:center; font-size:1.5em;}

    .home .welcome .logo-big{width:200px;}
    .home .welcome .txt{width:calc(96% - 230px); margin-right:30px;}

    .accountwrapper .team_info .teamlist .name{min-width:150px; padding-right:8px; width:auto;}
    .accountwrapper .games_info .gamelist a.name{min-width:250px; padding-right:8px; width:auto;}
    .accountwrapper .games_info .gamelist .qupdate{display:none;}

    .accountwrapper .team_sections .team_info{width:96%; padding:0;}
    .accountwrapper .team_sections .team_members{width:96%; padding:0;}

    .accountwrapper .game_form{width:100%;}
    .accountwrapper .game_options{width:100%;}
    .accountwrapper .game_sections .game_status{max-width:100%;}
    .accountwrapper .game_sections .game_team{max-width:100%;}

    .gameview .tl .post .options,.gameview .tl .post:hover .options{display:block; background:none; position:absolute; top:20px; right:-58px; left:auto; height:auto; width:244px;}
    .gameview .tl .post .options .post_edit{padding:8px 12px; margin:4px;}
    .gameview .tl .post .options .post_remove{padding:8px 12px; margin:4px;}
    .teamview .tl .post .options,.teamview .tl .post:hover .options{display:block; background:none; position:absolute; top:20px; right:-58px; left:auto; height:auto; width:244px;}
    .teamview .tl .post .options .post_edit{padding:8px 12px; margin:4px;}
    .teamview .tl .post .options .post_remove{padding:8px 12px; margin:4px;}

    .popbg_content{max-width:100%; max-height:50vw;}

    .accountwrapper .followrender .rowwrap .tile{ width:48%;}
}

@media (max-width:640px){
    .pagewrap{padding:40px 10px; font-size:18px;}
    header nav.accountnav a.signup{display:none;}
    header .searchbox{top:15px; right:80px;}
    header .searchbox .searchbtn{ border-radius:12px;}

    .accountmodalwrap.in.on{width:300px;}
    .accountmodalwrap.in .accountmodal{width:96%;}
    .accountfollows{ width:100%; border-top:2px solid #ccc; margin-top:40px;}

    .accountwrapper .settingsnav .navwrap{ width:calc(100% - 100px); }
    .accountwrapper .user_card{padding:10px; max-width:100%;}
    .accountwrapper .user_card .im{width:100px; height:100px;}
    .accountwrapper .user_card .info .u_username{padding:4px 8px;}
    .accountwrapper .user_card .info .social a{display:inline;}

    .accountwrapper .settingsnav{display:flex; flex-wrap:wrap; width:100%; margin:20px 0 0 0;}
    .accountwrapper .settingsnav .im{margin-right:40px;}
    .accountwrapper .settingsnav .navwrap{width:calc(100% - 200px);}
    .accountwrapper .settingsnav .u_username{margin:0 0 10px 0;}
    .accountwrapper .settingsnav a{height:32px; line-height:32px;}

    .accountwrapper .team_sections .team_info{width:100%;}
    .accountwrapper .team_sections .team_members{width:100%;}

    .accountwrapper .game_form{padding:10px;}
    .accountwrapper .game_options{padding:10px;}
    .accountwrapper .game_options .current_genres .r{width:100%;}
    .gallery_small .imwrap{width:49%;}
    .gallery_small .imwrap button{display:block;}

    .accountwrapper .contents.posts .backlink{ width:50px; overflow:hidden; display:inline-block; height:21px;}
    .accountwrapper .contents.posts .addpost{top:30px; right:10px; padding:8px 12px;}
    .gameview{padding:10px;}
    .formview{padding:10px;}

    .gameview .tl .post .options,.gameview .tl .post:hover .options{display:flex; flex-direction:column; width:112px; right:-16px;}
    .teamview .tl .post .options,.teamview .tl .post:hover .options{display:flex; flex-direction:column; width:112px; right:-16px;}

    .accountwrapper .team_members .current_members .r{max-width:100%;}

    footer{padding:20px;}

}

@media(max-width:480px){
    .mainnav a[data-active="discover"]{display:none;}

    header nav.mainnav{width:calc(100% - 60px); margin-left:60px;}
    header .searchbox{ right:70px;}
    header .searchbox.on{max-width:170px;}

    .home .welcome .close { top:10px; right:10px; width:22px; height:22px;}

    .gamedetails .banner h1{font-size:2.5rem;}

    .accountwrapper .settingsnav .navwrap{width:calc(100% - 100px);}
    .accountwrapper .settingsnav .im{width:70px; height:70px; margin-right:30px;}
    .accountwrapper .settingsnav .im img{max-height:100%;}

    .accountwrapper .games_info .gamelist a.name{min-width:150px;}

    .accountwrapper .user_card{display:block;}
    .accountwrapper .user_card .im{margin:10px auto;}
    .accountwrapper .user_card .info { width:100%; padding:10px; }
    .accountwrapper .user_card .social a{display:none;}
    .accountwrapper .user_card .info div{margin-bottom:20px;}
    .accountwrapper .user_card .info *[contenteditable="true"]{padding-left:0;}
    .accountwrapper .user_card .info *[contenteditable="true"]:focus{padding-left:8px;}
    .accountwrapper .user_card .info div:before{content: attr(data-placeholder); top:-25px !important; left:-10px !important; color:#20A4D5; position:absolute; padding:4px 8px;}

    .tl .post h3{width:90%;}
    .tl .post p{width:90%;}
    .tl .social span{display:none;}

    .accountwrapper .followrender .rowwrap .tile{ width:96%;}
}