/*
Main CSS for Competition Entry System
*/
/* 
    Created on : Oct 1, 2019, 11:00:30 AM
    Author     : Adrian Lines
    Version    : 0
*/

body {  
    width: 100%;
    height: 100%;
    color:                      var(--color1);
    background-color:           var(--bgc1);
    background-repeat:          no-repeat;
    background-position:        center;
    background-size:            cover; /* Generic*/
    -webkit-background-size:    cover; /* For WebKit*/
    -moz-background-size:       cover; /* Mozilla*/
    -o-background-size:         cover; /* Opera*/
    
    font-size:                  1.9vh;
    padding:2vh 5vw 5vh 5vw;
    overflow:hidden;
    
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

::-webkit-scrollbar {
    display: none;
}

.mainbody {
    width:100%;
    height:100%;
}

.mainpage {
    width:100%;
    height:100%;    
}

.clublogo {
    float:right;
    width:8vw;
    padding:1vh 1vw 0 0;
}

/* fix non scrolling modal */
.modal {
    overflow-y:auto;
}

.modal-content {
    color:              var(--color1);
    background-color:   var(--bgc1);        
}

a {
    color:var(--link); 
    text-decoration:none;
    text-shadow:2px 1px 1px var(--bgc1);
}
a:hover {color:var(--linkhover);}

input[type=checkbox]:hover {
    box-shadow:0px 0px 10px var(--shadow);
}

input[type='checkbox'] {
-webkit-appearance:none;
width: 2.5vh;
height: 2.5vh;
background:gainsboro;
border-radius:3px;
border: 0px solid darkblue;
vertical-align:middle;
}

input[type='checkbox']:checked {
background-image: url("../images/tick.jpg");    
background-repeat: no-repeat;
background-color: springgreen;
background-position: center; 
}

.heading {
    font-size:1.75em;
    color:var(--color2);
    font-weight:bold;
    text-shadow:0px 1px 2px black;
}

.like {
    position:absolute;
    font-size:1.3em;
    right:20px;
    top:0px;
    color:var(--color2);
}

.sidebar {
    overflow-x:hidden;
    position:absolute;
    right:-350px;
    top:120px;
    width:405px;
}
.toggleswitch {display:inline-block;vertical-align:top; opacity:0.5;}
.sidecontents {
    font-size:1em;
    padding:10px;
    display:inline-block;
    background-color:var(--bgc1);
    border:3px solid lightgrey;
    min-height:600px;
    width: 350px;
}

.boxshadow {
    box-shadow: 10px 10px 10px 0px var(--shadow);   
}

.rowhover {
    border:1px solid grey;
    padding:1vh;
}

.rowhover:hover {
    color:var(--color4);
    border:1px solid silver;
}

.imagelink {opacity:0.5;}
.imagelink:hover {opacity:1;}

.working {
    position:   absolute;
    left:       0;
    top:        0;
    width:      100%;
    height:     100%;
    opacity:    .3;
    z-index:    9999;
    background-color:var(--bgc5);
    color:      var(--color1);
    font-size:  3em;
    font-weight:bold;
    text-align: center;
    padding:    150px;
    background-image: url("../images/clock.gif");
    background-size: 300px 300px;
    background-repeat:  no-repeat;
    background-position: center; 
    display:none;
}

.maincontent {
    z-index:1;
    font-size:1em;
    padding:2vh 2vw 2vh 2vw;
    height:70vh;
    overflow-y:auto;
    box-shadow:0 0 0.5vh var(--shadow) inset;
    background-color: var(--bgc4);
    display:none;
}

.instructions {
    font-size:1.2em;
    padding:4vh 4vw 4vh 4vw;
    display:none;
}

.mainfooter {
    font-size:1em;
    padding:1vh 1vw 0vh 1vw;
    max-height:10vh; 
}

.groupEnable {visibility:hidden;}

.theScore {
        position:absolute; 
        top: 5px; 
        right: 20px; 
        min-width:90px;
        opacity:.7; 
        z-index:90; 
        color:white; 
        background-color:black;
        text-align: center;
        padding: 5px;
        border-radius:10px;
        border:2px solid grey;
        font-weight:bold;
        font-size:2.5em;    
}

.edit {
    border:none;
    border-radius: 3px;
    color:var(--inputcolor);
    background-color:var(--inputbgc);
    margin:0;
    border:0;
    width:100%;
    padding:0.5vh 0 0.5vh 0.5vw;
    font-weight:normal;
    box-shadow:var(--offsetX) var(--offsetY) var(--blur) var(--spread) var(--shadow) var(--inset);
}

.add {
    border:none;
    border-radius: 3px;
    color:var(--inputcolor);
    background-color:var(--inputbgc);
    margin:0;
    border:0;
    width:100%;
    padding:0.5vh 0 0.5vh 0.5vw;
    font-weight:normal;
    box-shadow:var(--offsetX) var(--offsetY) var(--blur) var(--spread) var(--shadow) var(--inset);
}

.entry {
    position:relative;
    width:100%;
    padding-top:75%;
    background-color:var(--bgc3);
}

.entryUpload {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    text-align: center;
    display: block;
    padding-top:2%;
}

.enterTitle {}

.spectate {
    width:100%;
    background-color:var(--bgc3);
    border:15px solid grey;
}

.count {position:absolute; 
        top: 5px; 
        right: 5px; 
        opacity:.8; 
        color:white; 
        min-width:35px;
        text-align: center;
        background-color:green;
        border-radius:18px;
        padding: 4px;
        font-weight:bold;
        font-size:1em;
}

.count:hover {background-color:yellow; color:blue;}

.award {position:absolute; 
        top: 5px; 
        left: 5px; 
        opacity:.8; 
        z-index:90; 
        color:white; 
        max-width:100px;
        min-width:26px;
        text-align: center;
        background-color:darkgoldenrod;
        border-radius:5px;
        padding: 0 0.5vw 0 0.5vw;
        font-weight:bold;
        font-size:.8em;
}

.sumawards {position:absolute; 
        bottom: 5px; 
        left: 10px; 
        opacity:.8; 
        z-index:90; 
        color:white; 
        max-width:100px;
        min-width:26px;
        text-align: center;
        background-color:orange;
        border-radius:15px;
        padding: 3px;
        font-weight:bold;
        font-size:.8em;
}

.awardtitle {position:absolute; 
        bottom: 5px; 
        left: 10px; 
        opacity:.7; 
        z-index:90; 
        color:white; 
        max-width:100%;
        text-align: center;
        background-color:orange;
        border-radius:5px;
        padding: 5px;
        font-weight:normal;
        font-size:.7em;}

.delete {position:absolute; 
        top: 2px; 
        right: 20px; 
        opacity:1; 
        z-index:900; 
        color:red; 
        font-size:1.2em; }

.deletelink {color:pink;}
.deletelink:hover {color:red;}

.lightbox {
    margin:0px;
    border:0px;
    padding:20px;
    position:fixed;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    background-color:black;
    color:whitesmoke;  
    display:none;
    z-index:995;
}

.lbtitle {
    position: absolute;
    top: 20px;
    left: 20px;
    color: whitesmoke;
    opacity: 1;
}

.lbcontent {
    position: absolute;
    padding:50px;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    color: whitesmoke;
    background-color:#505050;
    overflow-y:scroll;
}

.lbcell{
    background-color:black; 
    border:5px solid black; 
    height:160px; 
    text-align:center;
    vertical-align: middle;
}

.lbcell2{
    background-color:grey; 
/*    border:5px solid black; */
    text-align:center;
    vertical-align: middle;
}

.lbclose {
    position: absolute;
    top:20px;
    right:60px;
    width:40px;
    height:40px;
    opacity:0.5;
    text-align:center;
    vertical-align: middle;   
}

.lbpreview {
    position: absolute;
    top:5%;
    left:1%;
    width:98%;
    height:93%;
    border:4px solid rgba(20,20,20,1);
    padding:2vh 1vw 2vh 1vw;
    background-color:rgba(10,10,10,1);
    display:none;
    z-index:999;
    box-shadow:0px 0px 25px 25px black;
    text-align:center;
    vertical-align: middle;
    overflow:hidden;
}

.lballocate {
    position: absolute;  
    top:0px;
    left:2%;
    width:96%;
    display:none;
    z-index:999;
    overflow:hidden;
    background-color:transparent;
}

.setAward {
    position: absolute;
    left:50px;
    top:25px;
    background-color:white;
    min-width:50px;
    height:80px;
    opacity:.5;
    border-radius:50px;
    text-align:center;
    vertical-align:middle;
    padding:20px;
    font-size:1.5em;
    font-weight:bold;
    color:black;
    display:none;
}

.setScore {
    position: absolute;
    right:50px;
    top:25px;
    background-color:white;
    min-width:80px;
    height:80px;
    opacity:.5;
    border-radius:50px;
    text-align:center;
    vertical-align:middle;
    padding:20px;
    font-size:1.5em;
    font-weight:bold;
    color:red;
    display:none;
}

.setDetails {
    position: absolute;
    left:33%;
    top:25px;
    width:33%;
    opacity:.5;
    border-radius:100px;
    text-align:center;
    vertical-align:middle;
    padding:10px 0px 10px 0px;
    font-size:1em;
    font-weight:bold;
    display:none;
}

.setComments {
    position: absolute;
    right:3%;
    top:2%;
    width:33%;
    border:5px solid grey;
    opacity:0.75;
    vertical-align:top;
    text-align:left;
    padding:20px;
    font-size:.9em;
}

.ino {position:absolute;left:45%;bottom:2%;width:10%;text-align:center;color:silver;font-weight:bold;text-shadow:0 0 2px black;}

.awardBtn {
    font-size:.7em; 
    opacity:.7;
    border:2px solid black;
    border-radius:10px;
    font-weight:bold;
    width:16.5%;
    height:40px;
}

.dlcell {
    background-color:grey; 
    border:5px solid #505050; 
    height:130px; 
    text-align:center;
    vertical-align: middle;    
}

.judgepreview {}
.judgepreview:hover {box-shadow:0px 0px 20px gold;}

.fspreview {
    position: fixed;
    top: 0px;
    left: 0px;
    width:100%;
    height:100%;
    background-color:black;
    z-index:999;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    display:none;
}

/*BootStrap Modification*/
.show > .dropdown-menu {
  max-height: 90vh;
  visibility: visible;
}

.dropdown-menu {
  display: block;
  max-height: 0;
  visibility: hidden;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
  border:1px solid var(--border2);
  background-color:var(--bgc1);
  color:var(--col1);
  box-shadow:0 1vh 2vh black;
  z-index:1000;
  
}

.nav-item {min-width:10vw;} /* Menu Item Width */

.navbar {
    font-size:var(--navfs); 
    z-index:10;
}

.dropdown-item {color:var(--color1);}
.dropdown-item:hover {background-color:var(--bgc3);}

.form-control {
    border:none;
    border-radius: 3px;
    color:var(--inputcolor);
    background-color:var(--inputbgc);
    margin:0;
    border:0;
    width:100%;
    padding:0.5vh 0 0.5vh 0.5vw;
    font-weight:normal;
    box-shadow:var(--offsetX) var(--offsetY) var(--blur) var(--spread) var(--shadow) var(--inset);
}

.form-control:focus {
    background-color:var(--linkhover);
    color:var(--color4);
}

.btn {
    border-radius:3px;
    box-shadow:0 2px 3px black;
    overflow:hidden;
}