/*----------------------- basic layout set up: nav top, footer bottom, content middle, left right margin-----------------*/
body{

    background-color:#90DB7C ;
    color: #B5E61D;
}


main{

    margin-top:0px;
    margin-bottom:0px;
    margin-left:auto;
    margin-right:auto;
    max-width:86%;
    background-color:black;
    padding-top:10px;

}

nav{

    background-color:black;

}

footer{
    background-color:black;
    margin-top:0px;
}
/*----------------------- basic layout set up: nav top, footer bottom, content middle, left right margin-----------------*/


/*----------------------- how to solve problem with links color? ----- FOR LATER------------------*/
a{

    color: #B5E61D;
    text-decoration: none;
}

a:hover{
    color:#B5E61D;
}


.nav-link{
    text-align:center;
    color:#B5E61D;
    
}

.nav-item{
    
    
    border:5px solid #B5E61D;
    border-radius:10%;
    margin:5px 5px 5px 5px;
}

.nav-item:hover{
    color:black!important;
    background-color: #B5E61D;
}

.active{
    background-color: #B5E61D!important;
    color:black!important;
    border-radius:0!important;
}

/*----------------------- how to solve problem with links color? ----- FOR LATER------------------*/


/*---------------------- creating footer - before duplicating index.php ----------------*/
.openningTimes{
    font-size:12px;
    color:darkgrey;
}

.venues{
    font-size:12px;
    color:darkgrey;
}

.linkStyle1{
    padding:5px;
    margin:5px;
    border:5px solid #B5E61D;
    border-radius:10%;
    text-align:center;
}
/* moved above to <a> tag only - links on etire website dont have underline
a>.linkStyle1{
    text-decoration: none;
}
*/
.linkStyle1:hover{
    background-color:#B5E61D;
    
}

a:hover>.linkStyle1{
    color:black!important;
}

.socialStyling{
    
    float:left;
    margin-top:5px;
    
}

.socialMedia{
   /* background-color:grey;*/
    text-align:center;
    margin-top:50px;
  
}

.socialStyling:hover{
    color:grey;
}

/*---------------------- creating footer - before duplicating index.php ----------------*/

/*----------------Carousel styling - index page-------------------------------------------*/

.carouselH1{
    color:#B5E61D;
    font-size:50px;
}
.carouselH1_black{
    color:grey;
}


/*---------------END of -Carousel styling -index page------------------------------------------*/
/*-----------rest of index page content ----------------*/

p{
    color:grey;
}

img{
    max-width:100%;
}

.divDistance{

    margin:100px 0px 0px 0px;
    padding:0px 0px 200px 0px;

}

hr{
    color:#B5E61D;
}
/*-----------rest of index page content ----------------*/

/*------------------------ moviesSummary ---------------*/
.divDistance2{

    margin:0px 0px 0px 0px;
    padding:0px 0px 50px 0px;

}

.getCentred{
    margin-top:auto;
    margin-bottom:auto;
    text-align:center;
}

hr{
    color:#B5E61D;
}

.headingFormat{
    padding:50px 0px 50px 0px;
}
/*------------------------ moviesSummary ---------------*/

/*---------------------LogIn/Registration From TAB -------------------*/
.formCenter{

    text-align:center;
    margin-left:auto;
    margin-right:auto;
    
}

/*validation script (js) does not work because of that*/
.form1{
    padding:50px 0px 150px 0px;
}


/*
Form validation (few lines)

.was-validated:valid{

}
*/



.h4Padding{

    padding:50px 0px 0px 0px;
}

/*---------------------LogIn/Registration From TAB -------------------*/

/*--------considered to export to separate css file---------*/
/*--------styling junior area----*/
.juniorArea{
    background-image: linear-gradient(to bottom right, red, yellow, green, blue, purple, red,yellow);

}

#customJunior1{
    border-color:red;
}
#customJunior2{
    border-color:yellow;
}
#customJunior3{
    border-color:green;
}
#customJunior4{
    border-color:blue;
}
#customJunior5{
    border-color:purple;
}



/*--------styling junior area----*/

/*contacts*/
.formMargin{
    padding:50px 0px 200px 0px;
}

/*-----------ADMIN PANEL --------------------*/

/*mystery??? - why class does not work but inline style="" does??? - it crashes with bootstrap defaults?
.adminPanelPad{
    padding-top:100px!important;
    margin:100px;

}
*/
/* removed => started to work when d-flex class added to parent container...
.styleAdminPanel{
    padding:100px;
}
*/

/*some of the it form hints to make table shrinkable*/
table{
    width:100%!important;
    height:100%!important;/*does not work*/
    table-layout:fixed;
}


/*
th, td {
    white-space: nowrap;
    overflow-x: scroll;
    text-overflow: ellipsis;
  }
*/
/*
  th:hover,
  td:hover {
    text-overflow: clip;
  }

*/
/*some of the it form hints to make table shrinkable*/



/*-----------ADMIN PANEL --------------------*/



/*---------------------testing junior area fixed/sticky button----------*/

div.stickyQuizz{
    background-color:black;
    /*position: -webkit-sticky;     <=you do not need that*/
    position: fixed;
    right: 0;
    top:60%;
    margin: 0px 0px 0px 85%;
    border-radius: 25% 0% 0% 25%;
    border:5px solid #B5E61D;
    padding: 10px;
    text-align:center;
    /*z-index:100;    <=you do not need that*/

}


/*---------------------testing junior area fixed/sticky button----------*/




/*-------------trying to style form buttons-----------------*/

/* Be careful -> it works on other browsers!!!!!!!!!!!!*/
/*
input[type=submit] {
    padding:5px 15px; 
    background-color:black!important;
    border: 5px solid #B5E61D;

    border-radius: 25% 0% 0% 25%;
    -webkit-border-radius: 5px;
    cursor:pointer;

}

*/