/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 14-Sep-2021, 11:20:41
    Author     : adrianlines
*/

body {  
    background-repeat:          no-repeat;
    background-position:        center;
    background-color:           rgb(0,0,0);
    color:                      white;
/*    font-size:                  2vh;*/
    font-size: calc(16px + (28 - 16) * ((100vw - 1080px) / (1920 - 1080)));
    
    -webkit-background-size:    cover; /* For WebKit*/
    -moz-background-size:       cover; /* Mozilla*/
    -o-background-size:         cover; /* Opera*/
    background-size:            cover; /* Generic*/
    
    padding:3vh 1vw 4vh 1vw;
    height:100%;
    width:100%;
    overflow:hidden;
}
.mainpage {
    position:fixed;
    top:0;
    left:0; 
    padding:0.3vh 0.5vw 0.3vh 0.5vw; 
    background-color:rgba(255,255,255,0.6);
}

input[type] {
    padding:0 0 0 0.5vw;
    margin:0;
    border:0;
}

input[type]:disabled {
    opacity:0.5;
    background-color:rgb(180,180,180);
}

select:disabled {
    opacity:0.5;
    background-color:rgb(180,180,180);
}

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

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

input[type='checkbox']:disabled {
    opacity:0.5;
    background-color: grey;
}

a {color:green; text-decoration:none;}
a:hover {color:pink;}

a.darklink {color:darkgreen;}
a.darklink:hover {color:yellow;}

a.lightlink {color:lightgreen;text-shadow:0 1px 2px black;}
a.lightlink:hover {color:gold;}

a.redlink {color:indianred;}
a.redlink:hover {color:yellow;} 

img.ds {
    -webkit-filter: drop-shadow(0px 2px 3px black);
    filter:         drop-shadow(0px 2px 3px black);     
}

.thumb {
    position:relative;
    width:100%;
    padding:2%;
    font-size:0.6em;
/*    height:14vh;*/
    background-color:rgba(80,80,80,1);
    text-align:center;
    box-shadow:0 0.3vw 0.4vw black;
    cursor:pointer;  
}

.thumb:hover {
    background-color:rgba(100,100,100,1);
}

.thumbimg {
    max-width:100%; 
    max-height:14vh;
    border:0.2vh solid rgb(200,200,200);
}

.logosrc {
    float:right;
    height:7vh;
    -webkit-filter: drop-shadow(0 0 1px black);
    filter:         drop-shadow(0 0 1px black);      
}

.smalltitle {
    position:absolute;
    top:1vh;
    left:10%;
    font-weight:bold;
    color:black;
    background-color:white;
    opacity:0.2;
    padding:0vh 0.5vw 0 0.5vw;
    width:80%;
}

.awardImage {
    position:absolute;
    top:-0.5vh;
    right:-2vw;
    width:45%;
    height:45%
}

.newpageborder {
    background-color:rgba(60,60,60,1); 
    width:100%; 
    height:100%; 
    padding:2vh 1vw 1vh 1vw;
}

.page {
    color:rgba(0,0,0,0.6);
    background-color:rgba(180,180,180,1); 
    width:100%; 
    height:100%; 
    padding:2vh 2vw 2vh 2vw;
    box-shadow:0px 4px 8px black;
    overflow:hidden;
}

.pagefooter {
    position:fixed; 
    bottom:1vh;
    left:0;
    width:100%;
    font-size:0.8em;
    opacity:0.6;
    text-align:center;
    
}

.userlogin {
    display:none;
    position:fixed;
    top:0;left:0;
    background-color:rgba(0,0,0,0.5); 
    width:100%; height:100%; 
    padding:25vh 30vw 25vh 30vw;
}

.orglogin {
    display:none;
    position:fixed;
    top:0;
    left:0;
    background-color:rgba(0,0,0,0.5); 
    width:100%; 
    height:100%; 
    padding:25vh 25vw 25vh 25vw;
}

.loginpage {
    color:rgba(0,0,0,0.6);
    background-color:rgba(170,170,170,1); 
    padding:2vh 5vw 5vh 5vw;
    border:1px solid black;
    box-shadow:0 3px 6px black;
}

.header {padding-bottom:1vh;}

.content {
    width:100%;
    font-size:1em;
    padding:1vh 1vw 1vh 2vw;
/*    border:2px solid grey;*/
    color:white;
    height:89%;
    overflow-y:auto;
/*    border:1px solid rgba(0,0,0,0.05);*/
    background-color: rgba(0,0,0,0.1);
}

.stats {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:17vh 4vw 8vh 4vw;
    background-color:rgba(0,0,0,0.5);
    display:none;
}

.statscontent{
    position:relative;
    background-color:silver;
    padding:1vh 1vw 1vh 1vw;   
    width:100%;
    height:100%;
}

.modalBox {
    position:   absolute;
    left:       0;
    top:        0;
    width:      100%;
    height:     100%;
    background-color:rgba(0,0,0,0.5);
    padding: 10vh 10vw 10vh 10vw;
    display:none;
}

.modalClose {
    position: absolute;
    top:7vh;
    right:10vw;
    width:10vh;
    height:5vh;
    text-align:center;
    background-color:rgba(180,180,180,1);
    font-size:2.8vh;
    font-weight:bold;
}

.modalContent {
    position:relative;
    background-color:rgba(180,180,190,1);
    padding: 2vh 2vw 2vh 2vw;
    width:100%;
    color:rgba(50,50,50,1);
}

.modalRun {
    position:fixed;
    top:0px;
    left:0px;
    background-color:rgb(20,20,20);
    padding:1vh 1vw 2vh 1vw;
    width:100vw;
    height:100vh;
    display:none;
    z-index:10;
}
.modalRunContent {
    background-color:black;
    color:white;
    width:100%;
    height:95%;
}

.rightsidebar {
    position:fixed;
    top:4vh;
    right:-12.5vw;
    width:13vw;
    height:96vh;
    overflow-y:scroll;
    background-color:rgba(150,150,150,0.8);
    border:0.5vw solid rgba(200,200,200,0.9);
    box-shadow:-0.5vw 0px 1vw rgba(0,0,0,0.5);
    display:none;
    padding:0.5vh 0.5vw 0.5vh 0.5vw;
    z-index:50;
}

.righttrigger {
    position:fixed;
    top:0px;
    right:0px;
    padding-top:5px;
    padding-right:5px;
    display:none;
    font-weight:bold;
    font-size:1.5em;
}

.section {
    padding:1vh 1vw 1vh 1vw;
    background-color:rgba(255,255,255,0.1);
    width:100%;
    min-height:25vh;
    overflow:hidden;
}

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

.isHidden {}

.workspace {
    font-size:0.9em;
    margin:1vh 0vw 0vh 0vw;
    padding:1vh 1vw 1vh 1vw;
/*    border:5px solid #202020;*/
    color:black;
    background-color:rgb(220,220,220);
/*    min-height:30vh;*/
    height:60vh;
    overflow-y:auto;  
    box-shadow: 0 1px 4px black inset;
}

.editspace {
    position:absolute;
    top:7%;
    left:5%;
    width:90%;
    height:85%;
    padding:3%;
    background-color:silver;
    color:black;
    font-size:0.8em;
    box-shadow:0px 10px 5px black;
    display:none;
    overflow-y:auto;
}

.rowselect {cursor:pointer;}
.rowselect:hover {background-color:rgba(0,0,0,0.1);}

.lineselect {
    cursor:pointer; 
    color:rgb(90,90,90); 
    background-color:rgba(255,255,255,0.6);
    padding:1vh 0 1vh 0;
    box-shadow:0 0 0.3vh black;
}
.lineselect:hover {color:black;}

.sections {
    width:100%;
    background-color:rgba(255,255,255,0.6);
    box-shadow:0px 1px 6px black;
    padding:0 0 2vh 0;
}

.editUser {
    position:fixed;
    top:20vh;
    left:25vw;
    width:50vw;
    min-height:30vh;
    padding:1vh 1vw 1vh 1vw;
    background-color:rgba(70,70,70,1);
    border:0.5vw solid grey;
    box-shadow:0 0 2vh black;
    font-size:1em;   
    display:none
}

.entryMessage {
    position:fixed;
    bottom:5.5vh;
    left:13vw;
    width:77vw;
    padding:0.5vh 1vw 0.5vh 1vw;
    background-color:rosybrown;
    color:white;
    box-shadow:0 0 1vh black;
}

.paymentcontent {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.5);
    display:none;
}

.ppcontainer {
    position:absolute;
    top:5%;
    left:3vw;
    width:33%;
    max-height:60%;
    padding:1vh 1vw 1vh 1vw;
    display:none;
    background-color:rgba(70,70,70,1);
    border:1vw solid grey;
    box-shadow:0px 3px 6px black;
    text-align:center;
    overflow-y:scroll;
    font-size:0.9em;
}

.freecontainer {
    position:absolute;
    top:5%;
    left:3vw;
    width:33%;
    max-height:60%;
    padding:1vh 1vw 1vh 1vw;
    display:none;
    background-color:rgba(70,70,70,1);
    border:1vw solid grey;
    box-shadow:0px 3px 6px black;
    text-align:center;
    overflow-y:scroll;
    font-size:0.9em;
}

.newsbox {
    font-size:0.8em;
    box-shadow:0 0 0.3vh black inset;
    padding:1vh 0 0 2vw; 
    background-color:rgba(255,255,255,0.3);
    border:0.2vw solid rgba(200,200,200,0.1);
    overflow-y:auto;
}

.newsheading {
    font-size:1.2em;
    color:lightgreen;
    text-shadow:0px 0px 2px black;
}

.newstitle {
    color:white;
    text-shadow:0px 0px 2px black;
}

/* Entry System Page */
.eFrame {width:100%;text-align:center;box-shadow:0 0.2vh 0.4vh black;}
.eContent {width:100%; height:15vh; text-align:center; background-color:rgba(0,0,0,0.5); padding:0.5vh 0.5vw 0 0.5vw;}
.eTitle {width:100%;text-align:center;}
.eDelete {position:absolute;top:1vh;right:3vw; font-size:0.8em;}
.eDeclare{position:absolute;top:0.5vh;left:1.5vw; font-size:0.7em;}

.eScore {position:absolute;top:.5vh;right:1.2vw;background-color:black;color:white;font-size:1.2vw; font-weight:bold; padding:1px 5px 1px 5px;opacity:0.6;}
.eAward {position:absolute;top:.5vh;left:1.2vw;background-color:darkred;color:white;font-size:1.1vw; padding:1px 5px 1px 5px;opacity:0.6;}

.eSimple1 {font-size:0.8em; width:100%; border:2px solid grey; background-color:rgba(200,200,255,0.6); padding:0.3vh 0 0.3vh 1vw;}
.eSimple1:focus {outline:none; background-color:rgba(150,255,150,0.5); }

.eSimple2 {font-size:0.8em; width:100%; border:2px solid grey;background-color:rgba(100,255,100,0.3); padding:0.3vh 0 0.3vh 1vw;}
.eSimple2:focus {outline:none; background-color:rgba(170,255,170,1); }
.esimple2::placeholder {color:darkred;}

.eSimple3 {font-size:0.8em; width:100%; border:2px solid grey;background-color:rgba(100,100,100,0.5); padding:0.3vh 0 0.3vh 1vw;}
.eSimple3:focus {outline:none; background-color:rgba(150,255,150,0.5); }

/* Run System Page */
.showEntries {
    font-size:0.8em;
    height:75vh;
    overflow-y:scroll;
}

.ijs {
    display:inline-block;
    width:33%;
    height:80%;
    text-align:center;
    background-color:rgba(0,200,0,0.1);
    border:1px solid silver;
    font-size:0.8em;
}

hr.thin {padding:0 0 5px 0;margin:0;border-top:2px solid grey;}
.section {box-shadow:0px 2px 4px black;color:black;}
.optionSpace {
    position:relative;
    padding:0.8vh 0.3vw 0 0.3vw;
}      
.option {background-color:rgba(255,255,255,0.3);font-size:1.1vw;padding:0 0 0.5vh 0.5vw;}
.option1 {background-color:rgba(255,225,225,0.4);font-size:1.1vw;padding:0 0 0.5vh 0.5vw;} /* Red */
.option2 {background-color:rgba(235,255,235,0.3);font-size:1.1vw;padding:0 0 0.5vh 0.5vw;} /* Green */
.option3 {background-color:rgba(200,200,255,0.5);font-size:1.1vw;padding:0 0 0.5vh 0.5vw;} /* Blue */
.option4 {background-color:rgba(255,255,200,0.5);font-size:1.1vw;padding:0 0 0.5vh 0.5vw;} /* Yellow */
.eStatus {font-size:0.8em;width:100%;padding-top:1vh;}
.eStatusContent {width:100%;padding:1vh 1vw 1vh 1vw;min-height:4vh;background-color:rgba(255,255,255,0.2);}

.simple {
    width:100%; 
    border:0px solid transparent;
    background-color:rgba(0,100,0,0.1);
    color:white;
    box-shadow:0 1px 1px grey inset;
    padding:0;
    margin:0;
}

/* Bootstrap Menu 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 black;
  box-shadow:0px 5px 5px black;
  z-index:1000; 
}

.nav-item {min-width:10vw;}
.dropdown-item:hover {color:white; background-color:rgba(0,0,0,0.2);}

.form-control {
    background-color:rgba(0,100,0,0.1);
    height:3.5vh;
    padding: 0 0 0 5px;
    border-radius:0;  
    border:0;
    box-shadow:0 1px 1px grey inset;
    margin:0;
}

.form-control:focus {
    background-color:pink;
}

.btn {
    width:100%;
    box-shadow:0px 1px 3px black;
}

/*Background Pulse Red*/
.pulse {
    animation:pulse 2s infinite;
}

@keyframes pulse {
    0%      {background-color: rgba(100,0,0,0.0);}
    10%     {background-color: rgba(100,0,0,0.05);}
    20%     {background-color: rgba(100,0,0,0.1);}
    30%     {background-color: rgba(100,0,0,0.15);}
    40%     {background-color: rgba(100,0,0,0.2);}
    50%     {background-color: rgba(100,0,0,0.25);}
    60%     {background-color: rgba(100,0,0,0.2);}
    70%     {background-color: rgba(100,0,0,0.15);}
    80%     {background-color: rgba(100,0,0,0.1);}
    90%     {background-color: rgba(100,0,0,0.05);}
    100%    {background-color: rgba(100,0,0,0.0);}
}

/* foreground Pulse Green */
.pulselink {
    font-size:1em;
    animation:pulselink 3s infinite;
    text-shadow:1px 1px 1px rgba(0,0,0,0.6);
}

.infolink {
    font-size:1.1em;
    color:lightgreen;
    text-shadow:1px 1px 1px rgba(0,0,0,0.6);
}

.infolink:hover {color:gold;}

.fblink {
    font-size:1.1em;
    color:lightblue;
    text-shadow:1px 1px 1px rgba(0,0,0,0.6);
}

.fblink:hover {color:gold;}

@keyframes pulselink {
    0%      {color: rgba(0,200,0,0.5);}
    10%     {color: rgba(0,210,0,0.6);}
    20%     {color: rgba(0,220,0,0.7);}
    30%     {color: rgba(0,230,0,0.8);}
    40%     {color: rgba(0,240,0,0.9);}
    50%     {color: rgba(0,250,0,1);}
    60%     {color: rgba(0,240,0,0.9);}
    70%     {color: rgba(0,230,0,0.8);}
    80%     {color: rgba(0,220,0,0.7);}
    90%     {color: rgba(0,210,0,0.6);}
    100%    {color: rgba(0,200,0,0.5);}
}

@media screen and (max-width: 800px) {  
    body {font-size: calc(19px + (28 - 19) * ((100vw - 1080px) / (1920 - 1080)));}
    .userlogin {padding:15vh 15vw 15vh 15vw;}   
    .orglogin {padding:15vh 15vw 15vh 15vw;} 
    .thumbimg {max-height:7vh;}
    .eContent {height:7vh;}
    .logosrc {height:5vh;}
    .form-control {height:3.5vh;}
    .modalBox {padding: 10vh 5vw 40vh 5vw;}    
    .isHidden {display:none;}
}