/* 
 * Owner: Photographic Alliance of Great Britain
 * Description: Cascading Style Sheet
 * Date Created: 20th February 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(80,80,200,1);     /*blue*/
}
::-webkit-scrollbar {
    display: none;
}
/*Basic HTML Adjustments*/
body {
    height:100%;
    width:100%;
    overflow:hidden;
}
footer {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
}
a {text-decoration:none;}
a.disabled {
  pointer-events: none;
  cursor: default;
}

.framework {
    color:var(--color5);
    font-size:0.9em;
}

.rowhover:hover {background-color:rgba(0,0,100,0.1);}
.rowborder {border:1px solid rgba(0,0,0,0.05);}
.related {
    margin-top:0.5vh;
    background-color:rgba(240,240,255,1);
    border:2px solid rgba(230,230,245,1);
    border-radius:5px;
}
.related:hover {background-color:rgba(245,245,255,1);}

.admin {position:relative;display:none;}
.adminSwitch {padding:1px;border-radius:5px;}
.userinfo {
    position:fixed;
    top:0;
    left:2.5vw;
    padding:0.5vh 0 0 0.5vw;
    color:rgba(255,255,255,0.3);
    font-weight:bold;
    font-size:0.8em;
}
/*BootStrap Adjustments*/
.form-control {
    margin:0;
    padding:2px 0 2px 5px;
    box-shadow:inset 0px 0px 2px silver;
    border:2px solid rgba(0,0,0,0.1);
}
.form-control:disabled {
    border-color:transparent;
    box-shadow:inset 0px 0px 0px transparent;
    background-color:rgba(250,250,250,1);
}
.formc {
    width:100%;
    margin:1px 0 1px 0;
    padding:1px 0 1px 3px;
    box-shadow:inset 0px 0px 2px silver;
    border:1px solid rgba(0,0,0,0.4);  
    border-radius:2px;
}
.addfield {
    position:fixed;
    bottom:1vh;
    right:1vw;
    display:none;
    padding:1vh 1vw 1vh 1vw;
    background-color:aliceblue;
    border:1px solid silver;
    border-radius:5px;
    box-shadow:0px 2px 4px black;
    z-index:9000;  
}
.addcolumn {
    position:fixed;
    bottom:1vh;
    left:1vw;
    display:none;
    padding:1vh 1vw 1vh 1vw;
    background-color:aliceblue;
    border:1px solid silver;
    border-radius:5px;
    box-shadow:0px 2px 4px black;
    z-index:9000;  
}
.addlistcolumn {
    position:fixed;
    bottom:1vh;
    left:33%;
    width:33%;
    display:none;
    padding:1vh 1vw 1vh 1vw;
    background-color:aliceblue;
    border:1px solid silver;
    border-radius:5px;
    box-shadow:0px 2px 4px black;
    z-index:9000;  
}
.row {padding:0 0 0.5vh 0;}
.btn {box-shadow:1px 1px 2px grey;}
/*General CSS*/
.linkgrey {color:silver;}
.linkgrey:hover {color:grey;}
/*Main Page Container - Fixed Height*/
.panelcontainer {
    height:70vh;
    overflow-y:hidden;
    overflow-x:hidden;
/*    background-color:rgba(0,0,255,0.5);*/
}
/*Panels Container Scroll Box*/
.scrollheight, .scrollheight30, .scrollheight40, .scrollheight50, .scrollheight60, .scrollheight70, .scrollheight80 {
    overflow-y:scroll;
    overflow-x:hidden;
    background-color:rgba(245,245,255,1);
    padding:1.5vh 1vw 1vh 1vw;
    border-radius:5px;
}
.scrollheight {
    min-height:15vh;
    max-height:50vh;
}
.scrollheight30 {
    min-height:15vh;
    max-height:30vh;
}
.scrollheight40 {
    min-height:15vh;
    max-height:40vh;
}
.scrollheight50 {
    min-height:15vh;
    max-height:50vh;
}
.scrollheight60 {
    min-height:15vh;
    max-height:60vh;
}
.scrollheight70 {
    min-height:70vh;
    max-height:70vh;
}
.scrollheight80 {
    min-height:80vh;
    max-height:80vh;
}
.login{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:10% 30% 10% 30%;
    background-image: url(../images/background.jpg);
    background-color: rgba(255,255,255,0.3);
    background-blend-mode: darken;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    display:none;
}
.loginContent{
    color:rgba(200,200,200,1);
    width:100%;
    height:100%;
    padding:10%;
    background-color:rgba(255,255,255,0.1);
    border-radius:10px;
    overflow-y:scroll;
}
.pagbfill {
    background-image: url(../images/background.jpg);
    background-color: rgba(255,255,255,1);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.banner {
    font-size:2.5vw;
    text-shadow:2px 2px var(--color2);
    color: var(--color1);
}
.bannertext {
    font-size:1.3vw;
    color: var(--color1);    
}
.search {
    position:absolute;
    bottom:0.5vh;
    right:40vw;
    width:20vw;
}
.asearch {
    font-weight:bold;
    font-size:1.2em;
    background-color:aliceblue;
    padding-left:0.5vw;
    border-width:2px;
    border-color:blue;
    opacity:0.6;
}
.asearch:hover{border-color:cyan;}
.filter {
    position:absolute;
    bottom:1vh;
    left:1vw;
}
.columnfit {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.label {
    padding-left:0.25vw;
    font-size:0.9em;
    color:var(--color5);
    font-weight:bold;
    opacity:0.6;
}
.delete {
    position:absolute;
    right:0;
    top:0;
}
.navmore{
    position:absolute;
    right:1vw;
    bottom:1vh;
}
.more {
    color:var(--color5);
    font-weight:bold;  
}
.top {
    color:var(--color5);
    font-weight:bold;
}
.panelIcon {
    display:inline-block;
    font-size:1.6em;
    padding:0 0.3vw 0 0vw;
}
.new-card-title {
    position:relative;
    font-size:1.15em;
    color: var(--color1);
    font-weight:bold;
    width:95%;
    padding-left:1vw;
}
.new-card-text {
    position:relative;
    font-size:1em;
    color: var(--color1);
    font-weight:normal;
    font-style:italic;
    width:100%;
    padding:0vh 0vw 1vh 3.2vw;
}
.new-card-banner {
    position:relative;
    font-size:2em;
    color: var(--color1);
    font-weight:bold;
    width:100%;
}
.alevel {
    position:absolute;
    top:0.5vh;
    right:1vw;
    width:2vh;
    height:2vh;
    border-radius:15px;
    opacity:0.9;
    border:1px solid black;
}
.edit {
    display:inline-block;
    width:22px;
    height:22px;
    border-radius:15px;
    background-color:rgba(0,0,0,0.1);
    text-align:center;
    font-weight:bold;
}
.modal-1, .modal-2, .modal-3, .modal-4, .modal-5, .modal-6, .modal-7, .modal-8, .modal-9 {
    position:absolute;
    top:0;
    left:0;
    background-image: url(../images/background.jpg);
    background-color: rgba(255,255,255,1);
    background-blend-mode: darken;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    width:100%;
    height:100%;
    padding:7vh 2vw 3vh 2vw;
    display:none;
}
.modal-content {
    position:relative;
    background-color:var(--color3);
    border-radius:10px;
    padding:4vh 1vw 1vh 1vw;
    height:100%;
    width:100%;
    overflow:hidden;
}
.modal-header {position:fixed; top:1vh;    left:30vw; color:white; font-size:2em;   opacity:0.1; font-weight:bold;}
.modal-footer {position:fixed; bottom:1vh; left:42vw; color:white; font-size:0.6em; opacity:0.3; font-weight:bold;}
.close {
    position:absolute;
    right:1vw;
    top:0.25vh;
    color:var(--color4);
    font-weight:normal;
    font-size:1em;
    cursor:pointer;
    font-weight:bold;
    opacity:0.5;
}
.close:hover {
    color:var(--color1);
    opacity:1;
}
.refresh {
    position:absolute;
    left:1vw;
    top:0.25vh;
    color:var(--color4);
    font-weight:normal;
    font-size:1em;
    cursor:pointer;
    font-weight:bold;
    opacity:0.5;
}
.refresh:hover {
    color:var(--color1);
    opacity:1;
}
.loginBtn{display:none;}
.logoutBtn{display:none}
.card-footer {text-align:center;}
.btn {min-width:75%;}
.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;
}
.progress {
    position:absolute;
    top:    2.5vh;
    left:   3vw;
    height: 5vh;
    z-index:9999;
    background-color:transparent;
    color:rgba(255,255,255,0.5);
}

/*CSS for Entry System*/
.holder {
    position:relative;
    height:10vh;
    background-color:rgba(0,0,0,0.6);
    padding:0.5vh 1vw 0.5vh 1vw;
    text-align:center;
}
.score {
    position:absolute;
    top:0.5vh;
    right:0;
    background-color:black;
    color:white;
    text-align:center;
    border-radius:5px;
    padding:0 0.5vw 0 0.5vw;
    min-width:2.5vw;
}
.author {
    position:absolute;
    top:0.5vh;
    left:1vw;
    background-color:black;
    color:white;
    width:75%;
    border-radius:5px;
    font-size:0.8em;
}

@media screen and (max-width: 1200px) {
  .login {padding:10% 25% 10% 25%;}
  .bannertext {font-size:2vw;}
  .banner {font-size:3vw;}
  .new-card-title {font-size:1.2em;}
  .scrollheight80 {height:75vh;}
  .scrollheight70 {height:65vh;}
  .scrollheight60 {height:55vh;}
}
@media screen and (max-width: 1024px) {
  .login {padding:10% 15% 10% 15%;}
  .bannertext {font-size:2vw;}
  .banner {font-size:3vw;}
  .new-card-title {font-size:1.2em;}
  .scrollheight80 {height:75vh;}
  .scrollheight70 {height:65vh;}
  .scrollheight60 {height:55vh;}
}