html  { margin: 0; padding: 0; height: 100%  }

body {
  font-family: "Roboto", sans-serif;
  font-size: 0.9rem; /* making fonts on page smaller so as to accomodate the login submit buttn */
  /*background-color:  #45261A; */
  color: #ffffff;
  /*##guide: location relative to this css file*/
  background-image: url(../../assets/card-bg.png); 
  background-repeat: repeat ;
  overflow-x: hidden; /* Hide horizontal scrollbar. To solve issue, displaying horizontal scrollbar probably because of owl-carousel  */  
  
}

 #openfl-content { 
    margin-left:0px;
    margin-top:0px;
    background: transparent ; 
    width: 100%;  /*1000x649 */
    height: 65%; }

.error {
        color: red;
        background-color: black ;
}

.inputTextFieldIcon  /* icon showing on the left side of input text field */
{
 
  padding: 10px;
  background: black;
  color: white;
  min-width: 50px;
  text-align: center;

}
.input-group-text
{
     color: #ffffff;
    background-color: #000000;
}

.input-container {
  display: -ms-flexbox; /* IE10 */
  display: flex;
   
}

.btn-primary  {
    color: #fff;
    background-color: #000000;
    border-radius: 15px 15px;
    border: 3px solid #f8de7e ;
}

.btn-primary:hover, .btn-primary:focus{
    color: #fff;
    background-color: #000000;
    border-color: #ffffff; 
    border: 3px solid #f8de7e ;
}

/*start:  css for nav  */

 .navbar-brand.navbar-custom  
{
    font-family:"Smokum", sans-serif;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
     color: #f8de7e;
    text-decoration: none;
    white-space: nowrap;
    
}
 .navbar-brand:hover.navbar-custom   
 {
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    font-size: 1.2rem;
     color: #f8de7e;
    text-decoration: underline ;
    white-space: nowrap;
}


.nav-item.dropdown .nav-link.dropdown-toggle,
.dropdown-item,.dropdown-item:focus,.dropdown-item:hover,
.nav-item .nav-link.nav-link-custom 
{
    display: block;
    padding: .5rem 1rem;
    color: #f8de7e;
    text-decoration: none;
    
}
 
/* select activated links inside the nav component 
(activated: selected item inside nav component)
*/
.nav-item .nav-link.nav-link-custom.active
{
    display: block;
    padding: .5rem 1rem;
    color: #000000;
    text-decoration: none;
    background-color: #e2d2bc;
    
}


.nav-item .nav-link.nav-link-custom, 
.nav-item .nav-link:focus.nav-link-custom
{
    display: block;
    padding: .5rem 1rem;
    color: #f8de7e;
    text-decoration: none;
    
}

/*nav-links when hovered over */
.nav-item .nav-link:hover.nav-link-custom  
{
    display: block;
    padding: .5rem 1rem;
    /*color: #000000;*/
    text-decoration: none;
    
}

 
/*links used inside nav-tab buttons */
.nav-tabs  .nav-link
{
    display: block;
    padding: .5rem 1rem;
    color: #ffffff;
    text-decoration: none;
     
}


.nav-tabs .nav-item.show .nav-link
{
    color: #ffffff;
    background-color: #000000;
    border-color: #f8de7e;
    border-bottom: 4px solid #f8de7e;
}

/* will select all active tab buttons */
.nav-tabs .nav-link.active 
{
    color: #ffffff;
    background-color: #000000;
    border-color: #f8de7e;
    border-bottom: 4px solid #f8de7e;
}

.nav-link:hover 
{

    display: block;
    padding: .5rem 1rem;
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid #f8de7e;
}

/* custom background color to control-panel's sidebar */
.sidebar-custom-color
{
    /*border-right: 4px solid #E2D2BC;*/
     background-color: #000000!important;
} 

 
.navbar-custom-color
{
    border-bottom: 2px solid #E2D2BC;
     background-color: #45261A!important;
} 



.navbar-nav > li > .dropdown-menu,
.navbar-nav > li > .dropdown-menu a:link
{
    
    background-color: #45261A!important;
}

 
 .navbar-nav > li > .dropdown-menu a:hover
{
    background-color: #000000!important;

}



.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='5' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255,255,255);
  border-width: 3px;
} 

/*end:  css for nav  */
 
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 
{
  font-family: "Roboto", sans-serif; 
    color: #f8de7e;
}


 a:hover {
    text-decoration: none  ; 
}
 
 
 
.half, .half .container > .row 
{
 /* height: 100vh; */
}
 
@media (max-width: 991.98px) 
{
  .half .bg {
     
     /*height: 500px;*/ /*media queries causes problem with footer outside the container. Makes it overlap the content */
     /*this is also causing problem with owl-slider. Adding space in betweeen*/
  } 
}
 
.half .contents, .half .bg 
{
  width: 50%; 
}
  @media (max-width: 1199.98px) 
  {
     .half .contents, .half .bg 
    {
      width: 100%; 
     } 
 }
   
  .half .contents , .half .bg   
  {
    overflow: hidden;
    margin-bottom: 0;
     padding: 10px 10px;
     position: relative; 
  }

    

.half .bg 
{
  background-size: cover;
  background-position:  left center  ; 
}

 a 
{
  color: #f8de7e;
  text-decoration: underline; 
}

.half .btn {
  height: 54px;
  padding-left: 30px;
  padding-right: 30px; 
    background-color: #000000;
}

.half .forgot-pass 
{
  position: relative;
  top: 2px;
  font-size: 14px; 
}
 
 .g-signin2{
  width: 100%;
}

.g-signin2 > div{
  margin: 0 auto;
}
 
 
.cookie-consent
{
 position: fixed;
bottom: 0;
right: 0;
width: 300px;
color: #fff;
background-color: #292929; /*fallback*/
background-color: rgba(41, 41, 41, 0.8);
z-index: 120;
border-radius: 3px;
}

.allow-button
{
    color: #fff;
}

/* alert (error/info/warning etc) messages on the top  */ 
.messagealert 
{
    position: fixed;
    /*position:relative; does not show when page is scrolled down*/ 
   
    left:0;
    top:10%;
    z-index: 999;
    width: 100%;
    margin: 0  ;
    transition: all 500ms ease-out;
    color: #000000;
     
}

.messagealert.show 
{
     transform: translateY(0%);
    transition-delay: 500ms;
}

/*message alert no.2 */
.messagealert2 
{
    position: fixed;
    left:0%;
     
    top:10%;
    z-index: 1100;
    visibility: hidden;
      width: 50%;
     
   
}

.messagealert2.show 
{
    
    visibility: visible ;
    opacity:0.95;
 
}
  



/* cookie */
.cookiealert 
{
    position: fixed;
    left:0;
    top:100%;
    z-index: 999;
    visibility: hidden;
    opacity:0;
    width: 100%;
    margin: 0  ;
    transition: all 500ms ease-out;
    color: #ecf0f1;
    background-color: #000000  ;
}

.cookiealert.show 
{
    opacity: 1;
    visibility: visible;
    transform: translateY(-100%);
    transition-delay: 500ms;
}

.cookiealert a 
{
    text-decoration: underline
}

.cookiealert .acceptcookies {
    margin-left: 10px;
    vertical-align: baseline;
}

/* all the buttons used inside the game with a diagonal strip texture */
.game_button {
        cursor: pointer;
   background-image: url('../../assets/button-skin.png');
        xbackground-size: cover;
}