html
{
width:100%;
height:100%;
overflow:hidden;
}

body {
border:0;
margin:0;
padding:0;
color:#666666;
font-family:sans-serif;
width:100%;
height:100%;
overflow:hidden;
}

a, a:visited, a:focus
{
text-decoration:none;
outline:none;
color:#000000;
}

a:hover
{
text-decoration:underline;
}

a img
{
border:0;
}

p
{
line-height:125%;
margin:4px auto;
font-size:12px;
}

#tokenForm
{
display:none;
position:absolute;
z-index:9999999999;
background:#eeeeee;
width:100%;
height:100%;
top:0;
left:0;
width:100%;
height:100%;
}

#tokenForm form
{
margin:15px auto;
width:320px;
max-width:90%;
}

#submitAuth
{
min-width:50%;
}

.loading
{
background-image:url(../img/loading.gif);
background-position:center center;
background-repeat:no-repeat;
background-size:32px 32px;
min-width:32px;
min-height:32px;
}


.loading > *
{
/*visibility:hidden;*/
opacity:0;
transition:opacity .5s linear;
}

.modal
{
z-index:8000;
overflow:hidden!important;
}

.modal-content
{
border-radius:0!important;
}

.modal-header
{
padding:10px;
}

.modal-title
{
font-size:17px;
line-height:17px;
font-family:sans-serif;
}

.modal-dialog
{
height:calc(100vh - 30px);
margin:10px auto;
}

#modalScroller
{
position:relative;
overflow-y:scroll;
width:100%;
height:calc(100vh - 30px);

padding:10px;
}

#modalContent
{
position:relative;
width:100%;
height:auto;
}


#modalContent .row
{
margin-left:0;
margin-right:0;
}


#modalContent .row [class^=col]:first-child
{
padding-left:0;
}

#modalContent .row [class^=col]:last-child
{
padding-right:0;
}







#tournamentsDialog
{
display:none;
width:100vw;
height:100vh;
position:absolute;
top:0;
left:0;
z-index:999999999;
}



#tournamentsDialogScroller
{
width:100%;
height:100vh;
position:relative;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
background:#ffffff;

padding:10px;
}


#tournamentsDialogContent
{
position:relative;
}

#tournamentsDialogContent .row
{
margin-left:0;
margin-right:0;
}


#tournamentsDialogContent .row [class^=col]:first-child
{
padding-left:0;
}

#tournamentsDialogContent .row [class^=col]:last-child
{
padding-right:0;
}

#tournamentsDialogContent h1
{
font-size:17px;
margin-bottom:10px;
}


.tournament
{
font-size:18px;
line-height:24px;
border-bottom:1px dashed #cccccc;
padding:2px 0;
}

.tournament_icon
{
height:24px;
margin-top:-4px
}

.btn-tournament
{
line-height:24px;
padding:0 10px;
}








::-webkit-scrollbar {
width: 4px;
}
 
::-webkit-scrollbar-track {
background:transparent;
}
 
::-webkit-scrollbar-thumb {
background:#dddddd;
}




/* Disable padding in grids

.row
{
margin-left:0;
margin-right:0;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
{
padding-left:0;
padding-right:0;
}

*/



.capitalize
{
text-transform:capitalize;
}





#appStatusMessage
{
position:fixed;
width:100%;
bottom:30px;
text-align:center;
}


#game
{
width:100%;
height:100%;
overflow:hidden;
}




#game > *
{
transition:opacity .5s linear;
}

/***
#game
{
background-color:#ffffff;
background-image:url(../img/clouds.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size: 150% auto;
transition:background-size, .5s linear;
}

#game.loading
{
background-size: 100% auto;
}
***/




#topBar
{
position:absolute;
top:0;
left:0;
z-index:999;
width:100%;
/*height:60px;*/
background:rgba(255,255,255, 0.85);
font-size:11px;
}

.nav-link.nav-link-bigtxt
{
font-size:20px;
line-height:20px;
padding-top:5px;
padding-bottom:5px;
}


.nav-link img
{
height:18px;
margin-top:-4px;
}

#buildingDialog
{
position:absolute;
top:0;
left:0;
/*z-index:999;*/
width:100%;
height:100%;
z-index:1000;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+50,000000+100&0+0,0.5+50,1+100 */
background: radial-gradient(ellipse at left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.66) 30%,rgba(0,0,0,1) 100%);
background-size:100% 200%;
background-position:center center;
display:none;
}


#buildingDialog h2
{
font-size:13px;
line-height:15px;
font-weight:bold;
margin:2px auto 0;
}

#buildingDialog h3
{
font-size:11px;
line-height:13px;
margin:2px auto;
}

#buildingDialog p
{
font-size:12px;
line-height:15px;
margin:2px auto;
}


#buildingDialog .row
{
margin-bottom:3px;
}

#buildingDialog [class^=col]
{
line-height:13px;
}



#buildingDialogSidebar
{
width:calc(25vw - 30px);
height:auto;
position:absolute;
top:calc(5vh + 30px);
left:15px;
}


#populationProduction
{
background:#ffffff;
text-align:center;
overflow:hidden;
margin-bottom:15px;
}

#populationProduction h2
{
color:#000000;
font-weight:normal;
font-size:17px;
padding:0;
margin:15px auto 5px;
}


#populationProduction > div:last-child
{
margin:5px 5px 15px;
}

#populationProduction .accelerate
{

}



#buildingDialogTabs
{
text-align:center;
overflow:hidden;
}


#buildingDialogTabs .nav li
{
width:100%;
clear:both;
}


#buildingDialogTabs .nav-pills .nav-link
{
background:#ffffff;
color:#333333;
margin-bottom: 5px;
padding: 5px 0;
}


#buildingDialogTabs .nav-pills .nav-link.active,
#buildingDialogTabs .nav-pills .show > .nav-link
{
background: #d11444;
color:#ffffff;
}




#buildingUpgradeAccelerations
{
background:#ffffff;
width:calc(25vw - 30px);
height:auto;
position:absolute;
bottom:5vh;
left:15px;
display:none;
}

.buildAcceleration
{
margin:7.5px auto;
}





#buildingDialogContainer
{
position:absolute;
width:calc(75vw - 15px);
height:90vh;
/*margin-top:5vh;*/
/*margin-right:30px;*/

/*top:calc(5vh + 8px);*/
top:5vh;
right:15px;
}

#buildingDialogHead
{
/*position:absolute;*/
/*width:100%;*/
/*height:32px;*/
/*margin-top:-16px;*/
/*z-index: 999999;*/
/*background:transparent url(../img/dialogHead.png) no-repeat center top / auto 100%;*/
}

#buildingDialogHead h1
{
color:#ffffff;
text-align:left;
font-size:16px;
line-height:30px;
margin:0;
padding:0 15px;
}

#buildingDialogBack
{
display:none;
}

#closeBuildingDialog
{
position: absolute;
z-index: 999999;
right: -15px;
top:0;
width:30px;
height:30px;
background:transparent url(../img/closeDialog.png) no-repeat center center / 100% 100%;
}



















#buildingStudiesScroller
{
width:100%;
height:calc(90vh - 30px);

position:relative;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
background:#ffffff;

padding:10px;
}


#buildingStudiesContent
{
position:relative;
}

#buildingStudiesContent .row
{
margin-left:0;
margin-right:0;
}


#buildingStudiesContent .row [class^=col]:first-child
{
padding-left:0;
}

#buildingStudiesContent .row [class^=col]:last-child
{
padding-right:0;
}









#buildingChartScroller
{
width:100%;
height:calc(90vh - 30px);

position:relative;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
background:#ffffff;

padding:10px;
}


#buildingChartContent
{
position:relative;
}

#buildingChartContent .row
{
margin-left:0;
margin-right:0;
}

#buildingChartContent .row [class^=col]:first-child
{
padding-left:0;
}

#buildingChartContent .row [class^=col]:last-child
{
padding-right:0;
}







#buildingNewsScroller
{
width:100%;
height:calc(90vh - 30px);

position:relative;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
background:#ffffff;

padding:10px;
}


#buildingNewsContent
{
position:relative;
}

#buildingNewsContent .row
{
margin-left:0;
margin-right:0;
}

#buildingNewsContent .row [class^=col]:first-child
{
padding-left:0;
}

#buildingNewsContent .row [class^=col]:last-child
{
padding-right:0;
}

.notification
{
background:#efefef;
margin:0 0 5px 0;
padding:5px;
}






#buildingStatsScroller
{
width:100%;
height:calc(90vh - 30px);

position:relative;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
background:#ffffff;

padding:10px;
}


#buildingStatsContent
{
position:relative;
}

#buildingStatsContent .row
{
margin-left:0;
margin-right:0;
}

#buildingStatsContent .row [class^=col]:first-child
{
padding-left:0;
}

#buildingStatsContent .row [class^=col]:last-child
{
padding-right:0;
}





#buildingDialogScroller
{
width:100%;
height:calc(90vh - 30px);

position:relative;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
background:#ffffff;

padding:10px;
}

#buildingDialogContent
{
position:relative;
}

#buildingDialogContent .row
{
margin-left:0;
margin-right:0;
}

#buildingDialogContent .row [class^=col]:first-child
{
padding-left:0;
}

#buildingDialogContent .row [class^=col]:last-child
{
padding-right:0;
}

#buildingDialogContent .row .col-6:nth-child(even)
{
padding-right:0;
}

#buildingDialogContent .row .col-6:nth-child(odd)
{
padding-left:0;
}

/***
#buildingDialogContent
{
width:100%;
height:auto;
position:absolute;
padding:15px 15px;
color:#000000;
font-size:12px;
}
***/







#nextLevelTitle
{
padding:0 10px;
color:#ffffff;
font-size:12px;
line-height:20px;
}

.building_number
{
background:#a9a9a9;
display:inline-block;
text-align:center;
height:22px;
min-width:22px;
padding:0 4px;
line-height:23px;
color:#d8d8d8;
border-radius:12px;
}


.next_level_number
{
background:transparent url(../img/star.png) no-repeat center center / 100% 100%;
width:25px;
line-height:23px;
}




#populationCD
{
font-size:21px;
font-weight:bold;
}

.accelerate, .accelerateUpgrade, .upgrade, .challenge
{
background:#395cb3;
color:#ffffff;
border:0;
padding:0 0.5em;
font-size:12px;
}

.cantaccelerate, .cantupgrade, .cantchallenge
{
background:#cccccc;
color:#ffffff;
border:0;
padding:0 0.5em;
/*text-decoration:line-through;*/
font-size:12px;
}


.tutorialButton
{

animation: scale_bubble .5s linear infinite alternate;
}

@keyframes scale_bubble {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  } 
}


.upgradebutton
{
padding:0 10px;
}

.accelerateUpgradeDialog
{
color:#ffffff;
}


#buildingNextLevel
{

}


#buildingDialog .nextLevelDetails
{

}

#buildingDialog .nextLevelDetails h2
{
margin-top:4px;
}


.nextLevelDetails .col-4:nth-child(1), .nextLevelDetails .col-4:nth-child(2)
{
border-right: 1px solid #e6224c;
}



#buildingNextLevel p
{
margin:4px auto;
}



.buildingSection
{
margin-top:10px;
/*border-top:2px solid #ec008c;*/
}








.playSfida h2
{
color:#000000;
font-size:24px;
}

.playSfida h4
{
color:#333333;
font-size:17px;
}


.referenceStudy
{
font-size:12px;
margin-top:15px;
}




.rowAnswer
{
margin-bottom:10px;
}

.rowAnswer .col-1
{
padding:0;
}


.answer
{
display:inline-block;
background:#cccccc;
width:28px;
height:28px;
border:1px solid #cccccc;
border-radius:4px;
background:#eeeeee;
margin-top:-2px;
}

.rowAnswer.selected .answer
{
background:#395cb3;
}


.btn-confirm-challenge
{
display:inline-block;
background:#395cb3;
color:#ffffff;
border:0;
padding:0 8px;
font-size:17px;
line-height:30px;
}




.study
{
overflow:hidden;
padding:5px 5px 5px 20px;
background:#ffffff url(../img/study_bg.png) no-repeat left center / 15px 100%;
box-shadow:1px 1px 3px #888888;
margin-bottom:10px;
}

.study-icon
{
height:42px;
margin:0 10px 0 5px;
}

#buildingDialogContent .study h2
{
font-size:14px;
line-height:24px;
margin:0;
}

#buildingDialogContent .study p
{
font-size:11px;
line-height:18px;
margin:0;
}

#studyDetails h1
{
font-size:14px;
margin-bottom:10px;
}

.study-stats
{
float:right;
width:60px;
background:#ebbc2a;
color:#f9ebb5;
font-size:20px;
font-weight:bold;
line-height:42px;
border-radius:5px;
margin:0 0 0 5px;
}

.study-button
{
background:#ffffff;
border-radius:15px;
box-shadow:1px 1px 3px #888888;
padding:30px 10px;
margin-bottom:15px;
}




#buildingDialog .row.rowStats
{
margin-top:7.5px;
margin-bottom: 7.5px;
border-bottom: 1px dashed #eeeeee;
padding-bottom: 7.5px;

}

#buildingDialog .row.rowStats [class^=col]
{
text-align:center;
padding:0;
font-size:12px;
line-height:23px;
}

.total
{
background:#a9a9a9;
display:inline-block;
text-align:center;
height:22px;
min-width:22px;
padding:0 4px;
line-height:23px;
color:#d8d8d8;
border-radius:12px;
}

.won
{
background:#00aa00;
display:inline-block;
text-align:center;
height:22px;
min-width:22px;
padding:0 4px;
line-height:23px;
color:#d8d8d8;
border-radius:12px;
}

.lost
{
background:#aa0000;
display:inline-block;
text-align:center;
height:22px;
min-width:22px;
padding:0 4px;
line-height:23px;
color:#d8d8d8;
border-radius:12px;
}




#buildingDialog .row.rowChart
{
margin-top:7.5px;
margin-bottom: 7.5px;
border-bottom: 1px dashed #eeeeee;
padding-bottom: 7.5px;
}


#buildingDialog .row.rowChart .challenge
{
padding:2px 0.5em;
}


.rowTraining
{
margin-top:30px;
}

.rowTraining .btn-success
{
font-size:32px;
}






.rowAcceptChallenge
{
margin-top:30px;
}

#acceptChallenge,
#declineChallenge
{
font-size:24px;
min-width:150px;
}



/*#pendingMissions,#ongoingMissions,#failedMissions,#completedMissions*/
/*{*/
/*display:none;*/
/*}*/


.pending {
  animation: pulse 1s infinite;
}

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















#messageOverlay
{
position:absolute;
z-index:8999;
left:0;
top:0;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.5);
display:none;
}

#albert
{
position:absolute;
z-index:9000;
left:15px;
bottom:0px;
font-size:10px;
width:340px;
height:92px;
background:transparent url(../img/albert.png) no-repeat center center / cover;
display:none;
}

#albertMessage
{
margin:12px 0px 8px 86px;
width:228px;
height:62px;
background:#ffffff;
overflow-x:hidden;
overflow-y:scroll;
}

#albertOK
{
position:absolute;
left: 320px;
top: 50px;
padding: 4px 8px;
}



#mary
{
position:absolute;
z-index:9000;
right:15px;
bottom:0px;
font-size:10px;
width:340px;
height:92px;
background:transparent url(../img/mary.png) no-repeat center center / cover;
display:none;
}

#maryMessage
{
margin:12px 0px 8px 24px;
width:240px;
height:62px;
background:#ffffff;
overflow-x:hidden;
overflow-y:scroll;
}

#maryOK
{
position:absolute;
left: -20px;
top: 50px;
padding: 4px 8px;
}

#maryChallenge
{
font-size:10px;
}

#maryChallenge p
{
margin:10px auto;
}

#maryAcceptChallenge
{
font-size:10px;
padding:0 1em;
}


/***
#albertMessage ::-webkit-scrollbar,
#maryMessage ::-webkit-scrollbar
{
width: 4px;
}
 
#albertMessage ::-webkit-scrollbar-track,
#maryMessage ::-webkit-scrollbar-track
{
background:transparent;
}
***/





#tournamentNotificationText
{
width:100%;
font-size:12px;
}

#tournamentNotificationLongtext
{
width:100%;
font-size:12px;
}


.btn-xs
{
font-size:10px;
padding:0 1em;
}





#debugButtons
{
position:fixed;
right:0;
bottom:0;
display:none;
}

#debugButtons button
{
font-size:10px;
}





/***** COLOR OVERRIDES ***/


.pinkgradient
{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d11444+0,e6224c+100 */
background: #d11444; /* Old browsers */
background: -moz-linear-gradient(left, #d11444 0%, #e6224c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #d11444 0%,#e6224c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #d11444 0%,#e6224c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.violet
{
color:#ec008c;
}

.gray
{
color:#b2b2b2;
font-size:0.85em;
}


.bluebg
{
background:#395cb3;
}

.graybg
{
background:#cccccc;
}


.pinkbg
{
background:#e6224c;
}

.greenbg
{
background:#6bb540;
color:#ffffff;
}

.goldbg
{
background: #ed9110; /* Old browsers */
}