/*
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
*/
:root {
    --cstyle:contain;
}

body {  
    background-color:           aliceblue;
    color:                      rgb(60,50,160);
    font-size:                  calc(0.25 * (4vh + 3vw));
    
    padding:2vh 4vw 1vh 4vw;
    height:100%;
    width:100%;
    overflow:hidden;
    
    -webkit-background-size: var(--cstyle);
    -moz-background-size: var(--cstyle);
    -o-background-size: var(--cstyle);
    background-size: var(--cstyle);
    
}

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

input[type='checkbox'] {
   -webkit-appearance:none;
    width: 26px;
    height: 26px;
    background:gainsboro;
    border-radius:0px;
    border: 3px 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.4;
    background-color: grey;
}

button {
    min-height:5vh;
    overflow:hidden;
}

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

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

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

.info {
    padding:0.5vh;
    overflow-y:scroll;
    background-color:rgba(0,0,0,0.05);
    box-shadow:0px 1px 2px black inset;
}

.warnings {
    position:absolute;
    top:10vh;
    right:18vw;
    min-width:5vw;
    background-color:rgba(255,255,255,0.3);
    padding:0.5vh 0 0.5vh 0;
}

.simple {
    font-size:0.9em;
    width:99%; 
    min-height:3vh;
    border:1px solid rgba(255,255,255,1);
    background-color:aliceblue;
    padding-left:1vw;
}

.simple:focus {
    background-color:mistyrose;
}

.simpleadd {
    font-size:0.9em;
    width:99%; 
    height:100%;
    border:1px solid rgba(0,0,0,0.1);
    background-color:mistyrose;
    padding-left:1vw;
}

.thumb {
    border:4px solid rgba(0,0,0,0.6);
    position:relative;
    width:100%;
    padding-top:5%;
    font-size:0.6em;
    height:14vh;
    background-color:rgba(255,255,255,0.7);
    text-align:center;
    box-shadow:0px 4px 8px black;
    cursor:pointer;
    
}

.thumb:hover {
    border:4px solid rgba(0,0,0,0.8);
}

.imgcontainer {
    height:7vh;
    background-color:silver;
    padding:0.5vh;
    text-align:center;
}
.image {
    max-width:100%;
    max-height:5vh;
    opacity:0.5;
}

.image:hover {
    opacity:1;
}

.logosrc {float:right;height:8vh;}

.page {
    color:rgb(60,50,160);
    background-color:rgba(230,240,250,0.7); 
    width:100%; 
    height:75%; 
    padding:2vh 3vw 1vh 3vw;
    box-shadow:0px 4px 8px black;
    overflow-y:scroll;
    overflow-x:hidden;
}

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

}

.loginContent {
    padding:2vh 2vw 2vh 2vw;
    background-color:rgba(230,240,250,1);
    border:0.5vw solid grey;
    box-shadow:0 4px 8px black;
    height:50vh;
    
}

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

.modalClose {
    position: absolute;
    top:5vh;
    right:5vw;
    width: calc(3 * (1.5vh + 1vw));
    height: calc(2 * (1.5vh + 1vw));
    text-align:center;
    background-color:rgba(220,230,240,1);
    font-size: 0.8em;
    font-weight:bold;
}

.modalContent {
    position: relative;
    background-color:rgba(220,230,240,1);
    padding: 2vh 2vw 2vh 2vw;
    width:100%;
    min-height:30vh;
    max-height:100%;
    overflow:hidden;
    color:rgb(60,50,160);
    box-shadow:0px 6px 6px black;
}

.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%;
}

.infoBox {
    position:   absolute;
    left:       0px;
    top:        0px;
    width:      100%;
    height:     100%;
    background-color:rgba(0,0,0,0.5);
    padding: 9vh 3vw 5vh 3vw;
    display:none;
}

.infoClose {
    position: absolute;
    top:5vh;
    right:5vw;
    width: calc(3 * (1.5vh + 1vw));
    height: calc(2 * (1.5vh + 1vw));
    text-align:center;
    background-color:rgba(220,230,240,1);
    font-size: 0.8em;
    font-weight:bold;
}

.infoContent {
    position: relative;
    background-color:rgba(220,230,240,1);
    padding: 2vh 2vw 2vh 2vw;
    width:100%;
    min-height:30vh;
    max-height:100%;
    overflow:hidden;
    color:rgb(60,50,160);
    box-shadow:0px 6px 6px black;
}

.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;
}

.workspace {
    font-size:0.9em;
    margin:1vh 1vw 1vh 1vw;
    padding:1vh 1vw 1vh 1vw;
/*    border:5px solid #202020;*/
    color:black;
    background-color:whitesmoke;
/*    min-height:30vh;*/
    height:55vh;
    overflow-y:auto;    
}

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

.lineselect {
    cursor:pointer; 
    color:rgb(80,80,80); 
    background-color:rgba(255,255,255,0.6);
    padding:1vh 0 1vh 0;
    box-shadow:0px 1px 6px 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;
}

/* Entry System Page */
.eFrame {width:100%;text-align:center;}
.eContent {width:95%;height:14vh;text-align:center;background-color:rgba(0,0,0,0.5);padding:0.5vh 0.5vw 0 0.5vw;}
.eTitle {width:95%;text-align:center;height:3vh;}
.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:0px;right:2.5vw;background-color:black;color:white;font-size:1.2vw; font-weight:bold; padding:1px 5px 1px 5px;}
.eAward {position:absolute;top:0px;left:2vw;background-color:black;color:white;font-size:1.1vw; padding:1px 5px 1px 5px;}

.eSimple1 {font-size:1.5vh; width:100%; border:0;}
.eSimple1:focus {outline:none; background-color:rgba(150,255,150,0.5); }

.eSimple2 {font-size:1.5vh; width:100%; border:0;background-color:rgba(100,255,100,0.3);}
.eSimple2:focus {outline:none; background-color:rgba(170,255,170,1); }
.esimple2::placeholder {color:darkred;}

.eSimple3 {font-size:1.5vh; width:100%; border:0;background-color:rgba(100,100,100,0.5);}
.eSimple3:focus {outline:none; background-color:rgba(150,255,150,0.5); }

/* Run System Page */
.showEntries {
    font-size:0.8em;
}

.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 {padding:1px 1px 3px 1px;}      
.option {background-color:rgba(255,255,255,0.3);font-size:1.1vw;padding:0 0 0 0.5vw;}
.option1 {background-color:rgba(255,225,225,0.4);font-size:1.1vw;padding:0 0 0 0.5vw;} /* Red */
.option2 {background-color:rgba(235,255,235,0.3);font-size:1.1vw;padding:0 0 0 0.5vw;} /* Green */
.option3 {background-color:rgba(200,200,255,0.5);font-size:1.1vw;padding:0 0 0 0.5vw;} /* Blue */
.option4 {background-color:rgba(255,255,200,0.5);font-size:1.1vw;padding:0 0 0 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);}

/* 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);
    padding: 2px 2px 2px 5px;
}

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

.btn {
    width: 100%;
    box-shadow: 0px 1px 3px black;
    font-size: calc(0.21 * (4vh + 3vw));
}

/*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 Blue */
.pulselink {
    animation:pulselink 3s infinite;
    text-shadow:1px 1px 1px rgba(0,0,0,0.6);
}

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