/*
 *   ===== Global =====
 */

*
{
	font-family: "Kumbh Sans", sans-serif;
}

body
{
	background: #141414;
}

.diamond-bg
{
    background-image: url('/images/bg_title2.png') !important;
}

a
{
	text-decoration:none;
}

.a-black-text
{
    color: #000;
}

.romanized-title
{
    font-family: "Inconsolata";
}

.outlined
{
    text-shadow: -1px -1px 0 #222, 1px 1px 2px #141414, 1px 1px 3px #141414, 1px 1px 5px #141414, 1px 1px 7px #141414;
}

.pointer
{
    cursor: pointer;
}

.color-enabled
{
    color: blue;
}

.color-disabled
{
    color: #555;
}

/*
 *   ===== Japanese fonts =====
 */

.jp-font-title
{	font-family: "Rounded Mplus 1c";	}

.jp-font
{	font-family: "Sawarabi Gothic";	}

/*
 *   ===== Main body =====
 */
 
.div-body
{
	width: 900px;
	text-align: center;
	background: #141414;
	margin: 0 auto;
	padding-bottom: 100px;
}

.sp-page-header
{
    color: #5fb0d8;
    font-family: 'Kumbh Sans', sans-serif;
    font-size: 40px;
    font-weight: 600;
}

/*
 *   ===== Top Header =====
 */
 
.div-top
{
	width: 900px;
	position: absolute;
	text-align: right;
	font-size: 14px;
}

.div-top-profile-button
{
	display: table;
	cursor: pointer;
	user-select: none;
}

.div-top-profile-button-left-text
{
	display: table-cell;
	line-height: 16px;
}

.div-top-profile-button-avatar
{
	display: table-cell;
}

.img-top-avatar
{
	height: 32px;
    width: 32px;
	vertical-align: top;
	margin-left: 4px;
}

.span-top-logged-in-as
{
	color: #5fb0d8;
}

.span-top-username
{
	color: #418eb5;
	font-weight: 600;
}

.span-top-last-sync
{
	font-size: 12px;
	color: #5fb0d8;
}

.dropdown {
     position: relative;
     display: inline-block;
     z-index: 1;
}

.dropdown ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	background-color: rgba(49,130,170,0.8);
	background-color: rgba(16,16,16,0.8);
	font-weight:bold;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	display: none;
	text-align: left;
}

.dropdown a {
	text-decoration: none;
	color: #FFF;
}

.dropdown li {
	padding: 6px 12px;
	border-top: 1px solid #777;
}

.dropdown li:hover {
	background-color: rgba(191,134,166,0.6);
	background-color: rgba(232,183,210,0.6);
	color: white;
}

.input-header
{
    margin-right: 14px;
    width: 15%;
}

#header-login
{
    margin-right: 14px;
}

.btn-header
{
    width: 10%;
}

/*
 *   ===== Header (site name, filter buttons) =====
 */

.div-header
{
	width: 900px;
	text-align: center;	
	
 	outline: 0px solid #fff;
	
	outline-offset: -1px;
	margin: 0 auto;
	height: 40px;
	
	display: flex;
}

.div-header-title
{
	height: 100%;
	width:30%;
	vertical-align:bottom;
	position:relative;
}

.sp-header-title {
    position: absolute;
    bottom: 0px;
    left: 4px;
	color: #994d78;
	font-family: 'Kumbh Sans', sans-serif;
	font-size: 30px;
	font-weight: 600;
}

/*
 *   ===== Top Header =====
 */
 
.div-footer-wrapper
{
    width: 900px;
    margin: 0 auto;
}

.div-footer
{	
	margin-top: 2px;
    margin-bottom: 50px;
    color: #fff;
    font-size: 13px;
}

.div-footer a
{
    color: inherit;
    text-decoration: underline;
}

.div-footer-lang
{
    float: right;
    position: relative;
    cursor: pointer;
    user-select: none;
}

.div-footer-lang:hover
{
    text-decoration: underline;
}

.div-footer-lang ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: rgba(16,16,16,0.8);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 110%;
    cursor: pointer;
    user-select: none;
    display: none;
}

.div-footer-lang li
{
    color: #FFF;
    padding: 3px 6px;
    border-top: 1px solid #777;
}

.div-footer-lang li:hover
{
        background-color: rgba(232,183,210,0.6);
}

/*
 *  ===== Cards =====
 */

.cards-component
{
    display:block;
    width: 100%;

    padding-top: 20px;
    padding-bottom: 20px;
}

.cards-container
{
    display: flex;
    flex-wrap: wrap;

    width: 100%;
}

.card-container
{
    position: relative;
    min-height: 1px;

    padding-right: 15px;
    padding-left: 15px;
    margin-bottom: 50px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.card
{
    height: 100px;
    background: #FFF;
    display: block;
    text-align: left;

    border-radius: 6px;
    -moz-box-shadow: 0 0 15px 0px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
}


.card .diff-tab
{
    width: 20px;
    height: 100px;
    display: inline-block;
    border-radius: 6px 0 0 6px;
    vertical-align: top;
}

.card .left-card
{
    width: 100px;
    display: inline-block;
}

.card .div-card-banner
{
    height: 100px;
}

.card .img-card-banner
{
    height: 100px;
}

.card .right-card
{
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 100px - 20px);
}

.card .div-card-song-name
{
    text-align: center;
    background: #E0E0E0;

    font-size: 15px;
    font-weight: 700;

    width: 149.98px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 0 6px 0 0;
/*
    box-shadow:
        0 0 6px 3px #fff, 
        0 0 10px 6px #F9F2DB,
        0 0 14px 9px #FCD653;
*/
}

.card .div-card-middle
{
    height: 70px;

    padding-top: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.card .div-card-player
{
    font-size: 13px;
    font-weight: 700;

    line-height: 20px;
    text-align: center;
    position: relative;
}

.div-card-score
{
    font-size: 26px;
    line-height: 28px;
    text-align: center;
    position: relative;
}

.card .div-card-time
{
    font-size: 12px;

    line-height: 20px;
    text-align: center;
    position: relative;
}

.img-card-lamp
{
    position: absolute;
    top: 25px;
    right: 55px;
    width: 70px;
    z-index: 0;
}

.cards-actions
{
    text-align: left;
    margin-left: 20px;
    margin-top: -28px;
}

.div-card-nav
{
    text-align: center;
}

.div-card-nav-btn
{
    display: inline-block;
    font-size: 18px;
    width: 20px;
    text-align: center;

    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

.card .img-card-avatar
{
}

.centered-text
{
}

.rotated-text
{
    font-size: 16px;
    width:100px;
    height: 16px;
    position:absolute;
    top:42px;
    left:-29px;
    text-align: center;
    -webkit-transform:rotate(-90deg);
    word-spacing: 6px;
}

.div-no-data
{
    font-size: 24px;
    color: #A0A0A0;
    margin-left: 2%;
    margin-right: 2%;
}

.img-card-share
{
    position: absolute;
    right: 20px;
    bottom: 5px;
    height: 14px;
    width: 14px;
    filter: opacity(10%);
    cursor: pointer;
}

.img-card-share:hover
{
    filter: opacity(100%);
}

.feat-card
{
    cursor: pointer;
}

.card-header-bg-color-pfc
{   background: #eeef9e ;}
.card-bg-color-pfc
{   background: #fbfcd4 ;}

.card-header-bg-color-mfc
{   background: #141414 ;}
.card-bg-color-mfc
{   background: #141414 ;}

/*
 *  ===== User table =====
 */

#tbl-users
{
    margin: 0 auto;
    margin-top: 20px;
    width: 55%;
    border-collapse: collapse;
}

#tbl-users tr
{
    height: 78px;
}

#tbl-users tr:nth-child(odd)
{
    background: #FFF;
}

#tbl-users tr:nth-child(even)
{
    background: #F7F7F7;
}

#tbl-users .td-user-avatar
{
    padding: 7px;
    width: 64px;
}
#tbl-users .td-user-username
{
    padding-left: 20px;
    text-align: left;
}
#tbl-users .td-user-region
{
    width: 57px;
}
#tbl-users .td-user-actions
{
    width: 50px;
    background: #EEE;
}


#tbl-users .sp-user-username
{
    display: block;
    font-size: 24px;
    line-height: 22px;
}
#tbl-users .sp-user-ddrname
{
    display: block;
    color: #AAA;
    font-size: 12px;
    line-height: 16px;
}
.img-user-avatar
{
    width: 64px;
    height: 64px;
    display: block;
}

.img-user-flag
{
    height: 15px;
    box-shadow: 0px 0px 5px 1px #BBB;
    margin-top: 6px;
}

.img-user-action
{
    height: 20px;
    filter: opacity(20%);
    cursor: pointer;
    margin-top: 9px;
}

.img-user-action:hover
{
    filter: opacity(100%);
}

.highlighted-action
{
    filter: opacity(100%);
}

/*
 *  ===== sweetalert =====
 */

.swal2-modal.swal-loading
{
    width: 200px;
    -webkit-box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.8);

}

/*
 *  ===== Share tippy =====
 */

.img-facebook-icon
{
    width: 21px;
    margin-bottom: 1px;
    margin-left: 2px;
}

.img-image-icon
{
    margin-bottom: 1px;
    margin-left: 2px;
}

.tippy-inner-div
{
    width: 60px;
}

.tippy-sp-title
{
    font-weight: bold;
}

/*
 *   ==== Spinners ====
 */
 
/* spinners from: https://www.w3schools.com/howto/howto_css_loader.asp */

.div-spinner {
    border: 2px solid #ddd; /* Light grey */
    border-top: 2px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 26px;
    height: 26px;
    animation: spin 1s linear infinite;
	margin: 0 auto;
}

.div-spinner-small {
    border: 2px solid #ddd; /* Light grey */
    border-top: 2px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 12px;
    height: 12px;
    animation: spin 1s linear infinite;
	margin: 0 auto;
}

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

}

/*
 *   ===== Mobile =====
 */

#logging-in-overlay
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    background: rgba(0,0,0,0.5);
    z-index: 9999;
}

#logging-in-dialog
{
    width: 600px;
    height: 300px;
    background: #222;
    border-radius: 15px;
    box-shadow: 0px 0px 12px 6px rgba(0,0,0,0.4);

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#logging-in-msg
{
    color: #EEE;
    font-weight: bold;
    font-size: 48px;
    margin-top: 0px;
}

/*
 *   ==== Colors ====
 */

/* n/a */
.diff-bg-color-na
{ background: #E0E0E0;}
 
/* BASIC difficulty */
.diff-color-0, .diff-color-4, .diff-color-8
/*{	color: #37dbff	;}*/
{	color: #FFC901	;}
.diff-bg-color-0, .diff-color-4, .diff-color-8
{ background: #b83300	;}
 
/* EXPERT difficulty */
.diff-color-1, .diff-color-5, .diff-color-9
/*{	color: #fcb30e	;}*/
{	color: #01cbf5	;}
.diff-bg-color-1, .diff-bg-color-5, .diff-color-9
{	background: #0b63ce	;}

/* ULTIMATE difficulty */
.diff-color-2, .diff-color-6, .diff-color-10
{	color: #ff5e02	;}
.diff-bg-color-2, .diff-bg-color-6, .diff-color-10
{	background: #c00000	;}

/* SUPREME difficulty */
.diff-color-3, .diff-color-7, .diff-color-11
/*{	color: #37f122	;}*/
{	color: #db6aff	;}
.diff-bg-color-3, .diff-bg-color-7, .diff-color-11
{	background: #7f07ce	;}

/*
 *   ==== Opacities ====
 */

.opacity-25 { filter: opacity(0.25); }
.opacity-40 { filter: opacity(0.40); }
.opacity-70 { filter: opacity(0.70); }

/*
 *   ==== Misc. (debug) ====
 */
 
.debug
{
	background: rgba(0,0,0,0.2);
}

#dev-badge
{
    position: fixed;
    top: 0;
    left: 0;
    width: 0px;
    height: 0px;
    border-left: 40px solid #F00;
    border-right: 40px solid transparent;
    border-top: 40px solid #F00;
    border-bottom: 40px solid transparent;
    filter: opacity(70%);

    z-index: 9999;
}

#dev-badge span
{
    color: #FFF;
    display: inline-block;
    position: absolute;
    top: -30px;
    left: -30px;
    font-weight: bold;
    font-size: 20px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
}