/* 
 * Owner: Photographic Alliance of Great Britain
 * Description: Cascading Style Sheet
 * Date Created: 23rd August 2026
 * 
 */

:root {
    --color1: rgba(50,50,100,0.9);   /*dark blue*/
    --color2: rgba(200,200,250,1);   /*very light grey blue*/
    --color3: rgba(255,255,255,1);   /*White*/
    --color4: rgba(150,150,255,1);   /*light blue*/
    --color5: rgba(40,40,180,1);     /*blue*/
    --color6: rgba(200,100,100,1);   /*Darkred*/
}

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

/*Basic HTML Adjustments*/
body {
    height:100%;
    width:100%;
    overflow:hidden;
    font-size: clamp(1.2em, 2vh, 1.6em);
    background-image: url(../images/pagb-logo-5.png);
    background-repeat: no-repeat;
    background-position: 140%;
    background-size: 75%;
    background-color:var(--color3);
}

a {
    text-decoration:none;
    color:cornflowerblue;
}
a:hover {color:pink;}
a.disabled {
  pointer-events: none;
  cursor: default;
}

input[type='checkbox'] {
    -webkit-appearance:none;
    width: 2.75vh;
    height: 2.75vh;
    background:rgba(255,255,255,0.2);
    border-radius:4px;
    border:3px solid silver;
    vertical-align:middle;
    padding:0;
    margin:0;
    margin-left:0.5vw;
}

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

input[type='checkbox']:disabled {
    opacity:0.5;
}

.row {padding-top:1vh;}
.rowhover:hover {background-color:rgba(255,255,255,0.1);}

.label {
    padding-top:1vh;
    font-weight:bold;
    color:var(--color4);
}

.darkselect {
    font-size:0.9em;
    height:4vh;
    background-color:silver;
    font-weight:bold;
}

footer {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
}

.logo {
   max-width:100%;
   max-height:15vh;
}

.banner {
    font-size:2.2vw;
    text-shadow:2px 2px var(--color2);
    color: var(--color1);
}

.bannertext {
    font-size:1.2vw;
    color: var(--color1);    
}

.btn {
    box-shadow:1px 1px 3px black;
    width:95%;
    font-weight:bold;
    overflow:hidden;
    text-overflow:ellipsis; 
}

.scroll70 {
    max-height:80vh;
    overflow-x:hidden;
    overflow-y:scroll;
    padding:0 0 1vh 0;
}

.scroll80 {
    max-height:80vh;
    overflow-x:hidden;
    overflow-y:scroll;
    padding:0 0 1vh 0;
}

.scroll85 {
    max-height:80vh;
    overflow-x:hidden;
    overflow-y:scroll;
    padding:0 0 1vh 1vw;
}

.logout {
    position:absolute;
    top:1vh;
    right:1vw;
    width:6vw;
}

.thisprogress {
    padding-top:3vh;
    background-color:transparent;
    color:black;
    font-weight:bold;
    font-size:1.2em;
}

.scoring {
    position:   absolute;
    left:       0;
    top:        0;
    width:      100%;
    height:     100%;
    background-color:rgb(50,50,50);
    padding: 3vh 3vw 3vh 3vw;
    display: none;
    color:   silver;
    
    background-image: url(../images/pagb-logo-5.png);
    background-repeat: no-repeat;
    background-position: 140%;
    background-size: 75%;
}

.lightbox {
    position:   absolute;
    left:       0;
    top:        0;
    width:      100%;
    height:     100%;
    background-color:rgb(80,80,80);
    padding: 3vh 3vw 3vh 3vw;
    display: none;
    color:   silver;
    
    background-image: url(../images/pagb-logo-5.png);
    background-repeat: no-repeat;
    background-position: 140%;
    background-size: 75%;
}

.showapplication {
    position:   absolute;
    left:       0;
    top:        0;
    width:      100%;
    height:     100%;
    background-color:rgb(50,50,50);
    padding: 3vh 3vw 3vh 3vw;
    display: none;
    color:   silver;
    
    background-image: url(../images/pagb-logo-5.png);
    background-repeat: no-repeat;
    background-position: 140%;
    background-size: 75%;
}

.closescoring {
    position:   absolute;
    right:      1vw;
    top:        1vh;
    font-weight:bold;
}

.closelightbox {
    position:   absolute;
    right:      1vw;
    top:        1vh;
    font-weight:bold;
}

.working {
    position:   absolute;
    left:       0;
    top:        0;
    width:      100%;
    height:     100%;
    opacity:    .8;
    z-index:    9998;
    background-image: url("../images/clock.gif");
    background-size: 300px 300px;
    background-repeat:  no-repeat;
    background-position: center; 
    background-color:white;
    display:none;
}

/*Lightbox CSS*/

.holder {
    text-align:center; 
    padding:0.5vh 0.5vw 0.5vh 0.5vw; 
    width:100%; 
    height:100%;
    background-color:grey;
}

.holder:hover {
    background-color:black;
    opacity:1;
}

.holder:hover .title {
    opacity:1;
    font-weight:bold;
}

.image {
    border:2px solid silver;
    max-width:100%; 
    max-height:88%;
}

.lbcontainer {
    position:relative;
    height:88vh;
    overflow-y:scroll;
    overflow-X:hidden;
    padding:1vh 2vw 1vh 2vw;
    background-color:rgba(0,0,0,0.2);
}

.lblbcontainer {
    position:relative;
    height:88vh;
}

.containershadow {
    box-shadow: inset 0 0 10px black;
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;  
}


.lbcontrols {
    position:absolute;
    left:0;
    top:0;
    width:90%;
    height:3vh;
}

.ref {
    position:absolute;
    left:0.5vw;
    bottom:0.5vh;
    background-color:rgb(50,50,50);
    color:white;
    padding:1px 3px 1px 3px;
    border-radius:3px;
    font-weight:bold;
    font-size:0.9em;
}

.title {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    background-color:rgba(50,50,50,1);
    color:whitesmoke;
    font-size:0.8em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    opacity:0.3
}

.award {
    position:absolute;
    bottom:0vh;
    left:0;
    width:100%;
    color:yellow;
    font-size:1em;
    font-weight:bold;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    opacity:0.7;
}

.score {
    position:absolute;
    bottom:0;
    right:0.5vw;
    color:yellow;
    font-size:1.2em;
    font-weight:bold;
    opacity:1;
}

.preview {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,1);
    padding:2vh 2vw 2vh 2vw;
    display:none;
    text-align:center;
    cursor:none;
}

.previewimage {
    position:relative;
    width:100%;
    height:95%;
    cursor:none;
}

.previewinfo {
    position:absolute;
    bottom:1vh;
    left:0;
    width:100%;
    background-color:black;
    color:silver;
    font-size:2em;
    text-align:center;
    opacity:0.8;
}

.imgclass {
    max-height:100%;
    max-width:100%;
    border:3px solid grey;
}

/*Scoring System*/

.fullscreen{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:0.5% 5% 0.5% 5%;
    background-color:rgba(0,0,0,0.5);
    text-align:center;
    cursor:none;
}

.slide {
    position:relative;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(40,40,40,1);
    padding:0.5% 1% 0.5% 1%;
}

.barcode {
    position:absolute;
    bottom:1vh;
    left:1vw;
    width:8vw;
    text-align:center;
}

.bcreader {
    color:silver;
    background-color:black;
    border:0px;
    width:100%;
    font-weight:bold;
    padding:0 0.5vw 0 0.5vw;
    border-radius:3px;
    text-align:right;
}

.slidetitle {
    position:absolute;
    top:1vh;
    left:1vw;
    background-color:black;
    color:white;
    font-size:1.5em;
    font-weight:bold;
    padding:0 0.5vw 0 0.5vw;
}

input:focus {
    border:0px;
    background-color:darkgreen;
    outline:none;
}

.total {
    position:absolute;
    top:1%;
    right:1%;
    width:4%;
    height:4%;
    background-color:indianred;
    color:silver;
    font-size:1.5em;
    font-weight:bold;
}

.j1, .j2, .j3, .j4, .j5, .j6, .total  {
    position:absolute;
    right:0.5%;
    width:4%;
    height:5%;
    opacity:0.5;
    font-size:1.5em;
    font-weight:bold;
}

.l1, .l2, .l3, .l4, .l5, .l6 {
    position:absolute;
    right:0.75%;
    opacity:1;
    font-size:1em;
    font-weight:bold; 
    color:grey;
}

.l1 {top:7%;}
.l2 {top:13%;}
.l3 {top:19%;}
.l4 {top:25%;}
.l5 {top:31%;}
.l6 {top:37%;}


.info {
    position:absolute;
    right:0.5%;
    bottom:1%;
    width:4%;
    height:5%;
    opacity:0.5;
    padding-top:0.5vh;
    font-size:1.1em;
    font-weight:bold;
    background-color:grey;
    color:silver;
}

.j1 {top:7%;    background-color:darkgreen;color:rgba(200,200,200,0);}
.j2 {top:13%;   background-color:darkgreen;color:rgba(200,200,200,0);}
.j3 {top:19%;   background-color:darkgreen;color:rgba(200,200,200,0);}
.j4 {top:25%;    background-color:darkgreen;color:rgba(200,200,200,0);}
.j5 {top:31%;   background-color:darkgreen;color:rgba(200,200,200,0);}
.j6 {top:37%;   background-color:darkgreen;color:rgba(200,200,200,0);}
.total {top:1%; background-color:rgb(100,0,0);color:white;}

.columnfit {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}