/* 
 * 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(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(0.8em, 1.75vh, 1em);
    background-image: url(../images/pagb-logo-5.png);
    background-repeat: no-repeat;
    background-position: 140%;
    background-size: 75%;
    background-color:var(--color3);
}

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

.userinfo {
    position:fixed;
    bottom:1.5vh;
    left:9vw;
    padding:0.5vh 0 0 0.5vw;
    color:rgba(255,255,255,0.3);
    font-weight:bold;
    font-size:0.8em;
}

.notificationcontainer {
    position:fixed;
    top:0.5vh;
    left:9vw;
    padding:0.5vh 0 0 0.5vw;
    font-size:1.4em;
}
.notification {
    display:inline-block;
    padding-right:1vw;
}

.information {
    font-size:1em;
    font-style:italic;
    font-weight:bold;
}

/* Modern Browsers (Chrome, Safari, Edge, Firefox) */
*::placeholder {
  color: grey !important;
  opacity: 0.8 !important;
  font-style: italic !important;
}

/* Chrome, Safari, Opera (Older versions) */
*::-webkit-input-placeholder {
  color: grey !important;
  opacity: 0.8 !important;
  font-style: italic !important;
}

/* Firefox 19+ (Older versions) */
*::-moz-placeholder {
  color: grey !important;
  opacity: 0.8 !important;
  font-style: italic !important;
}

/* Internet Explorer 10-11 */
*:-ms-input-placeholder {
  color: grey !important;
  opacity: 0.8 !important;
  font-style: italic !important;
}

/* Firefox 4-18 (Very old versions) */
*:-moz-placeholder {
  color: grey !important;
  opacity: 0.8 !important;
  font-style: italic !important;
}

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

.disabled-select {
    pointer-events: none; /* Prevents mouse clicks and opening the dropdown */
    cursor: not-allowed;   
}

.iwarn {color:red;position:absolute;top:60%;left:0;width:100%;text-align:center;}
.trash {position:absolute;right:0.5vw;bottom:0.5vh;color:red;}
.tlink {color:pink;}
.tlink:hover{color:red;}


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

.test {
    color:white;
    background-color:silver;
    padding:0 0.5vw 0 0.5vw;
    font-size:0.8em;
}

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

.my-custom-popover {
  --bs-popover-max-width: 100%;
  --bs-popover-font-size: 8pt; /* Adjust size here */
}

.adminSwitch {padding:2px;border-radius:5px;opacity:1;}
.menuadmin {
    position:absolute;
    right:0.5vw;
    bottom:0.5vh;
    opacity:1;
}

.rowhover:hover {background-color:rgba(0,0,100,0.1);}
.rowhover1 {background-color:rgba(200,200,200,0.2);}
.rowhover2 {background-color:rgba(150,170,255,0.2);}
.rowhover1:hover {background-color:rgba(100,150,245,0.2);font-weight:550;}
.rowhover2:hover {background-color:rgba(100,150,245,0.2);font-weight:550;}
.rowborder {border:1px solid rgba(0,0,0,0.05);margin-top:0.25vh;}
.deleterow {position:absolute;right:0vw;top:0.75vh;}

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

.form-button {
    margin:0;
    padding:2px 0 2px 5px;
    border-radius:5px;
    border:0 solid rgba(0,0,0,0.1);
    min-height:3vh;  
}
/*BootStrap Adjustments*/
.badge {
    border:1px solid white;
}
.form-control {
    margin:0;
    padding:0.2vh 0 0.2vh 0.25vw;
    border:3px solid rgba(0,0,0,0.05);
    min-height:3vh;
    border-radius:5px;
}

.form-control:disabled {
    border-color:transparent;
    box-shadow:inset 0px 0px 0px transparent;
    background-color:white;
    color:rgba(0,0,0,0.8);
    border-radius:5px;
}

.form-new {
    margin:0;
    padding:0.2vh 0 0.2vh 0.5vw;
    border:3px solid rgba(0,0,0,0.05);
    min-height:3vh;
    background-color:rgba(255,220,220,0.4);
    border-radius:5px;
    width:100%;
}

.form-column {
    margin:0;
    padding:0 0 0 0.2vw;
    border:0px;
    min-height:3vh;
    background-color:rgba(220,220,220,0.4);
    border-radius:5px;
    width:2vw;    
}

.formc {
    width:100%;
    margin:1px 0 1px 0;
    padding:0.2vh 0 0.2vh 0.5vw;
    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:7vw;
    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;  
}

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

.addcolumn {
    position:fixed;
    bottom:1vh;
    left:7vw;
    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.25vh 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, .scrollheight75, .scrollheight80 {
    overflow-y:scroll;
    overflow-x:hidden;
    background-color:rgba(245,245,255,0.8);
    width:100%;
    padding:2vh 2vw 2vh 2vw;
    border-radius:5px;
    border:2px solid rgba(0,0,0,0.05);
}

.scrollheight   {min-height:8vh; max-height:50vh;}
.scrollheight30 {min-height:8vh; max-height:30vh;}
.scrollheight40 {min-height:8vh; max-height:40vh;}
.scrollheight50 {min-height:8vh; max-height:50vh;}
.scrollheight60 {min-height:8vh; max-height:60vh;}
.scrollheight70 {min-height:8vh; max-height:70vh;}
.scrollheight70 {min-height:8vh; max-height:75vh;}
.scrollheight80 {min-height:8vh; max-height:80vh;}

.login{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:10% 30% 10% 30%;
    
    background: url(../images/background.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    
    background-color: rgba(255,255,255,0.3);
    background-blend-mode: darken;
    display:none;
    z-index: 9990;
}

.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.2vw;
    text-shadow:2px 2px var(--color2);
    color: var(--color1);
}

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

.search {
    position:absolute;
    top:3.5vh;
    right:7vw;
    width:15vw
}

.asearch {
    font-weight:bold;
    font-size:1.2em;
    background-color:mintcream;
    border-width:2px;
    border-radius:1vh;
    border-color:lightblue;
    opacity:1;
    padding:0.1vh 0 0.1vh 0.2vw;
}
.asearch:hover{border-color:cyan;}

.toggleswitch {
    position:absolute;
    right:-2vw;
    top:0vh;
    font-size:1.3em;
}

.filter {
    position:absolute;
    top:0;
    right:0;
}

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

.label {
    padding-left:0.25vw;
    font-size:0.8em;
    color:var(--color5);
    font-weight:bold;
    opacity:0.7;
}

.llabel {
    padding-left:0.25vw;
    color:white;
    font-weight:bold;
    opacity:1;
    text-shadow:0px 0px 2px black;
}
.llabel:hover {color:pink;}

.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 {
    color:darkblue;
    padding:1.5vh 0 0 1vw;
    font-size:2.2em;
    opacity:0.8;
}

.new-card-title {
    position:relative;
    font-size:1.15em;
    color: var(--color1);
    font-weight:bold;
    width:95%;
    padding-left:1vw;
    text-align:left;
}

.new-card-text {
    position:relative;
    font-size:1em;
    color: var(--color1);
    font-weight:normal;
    font-style:italic;
    width:100%;
    padding:0vh 0vw 1vh 1vw;
    text-align:left;
}

.new-card-banner {
    position:relative;
    font-size:2em;
    color: var(--color1);
    font-weight:bold;
    width:100%;
    text-align:left;
}

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

.description {
    background-color:transparent;
    border:0px;
    width:100%;
    text-align:center;
    color:white;
}

.edit-hidden {
    border:0px;
    color:darkblue;
    width:100%;
    background-color:rgba(0,0,255,0.05);
}

.modal-1, .modal-2, .modal-3, .modal-4, .modal-5, .modal-6, .modal-7, .modal-8, .modal-9, .modal-10, .modal-11, .modal-12, .modal-13, .modal-14, .modal-15 {
    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;
    text-align:left;
}

.modal-content {
    position:relative;
    background-image: url(../images/pagb-logo-5.png);
    background-repeat: no-repeat;
    background-position: 140%;
    background-size: 75%;
    background-color:var(--color3);
    border-radius:10px;
    padding:3vh 1vw 1vh 1vw;
    height:100%;
    width:100%;
    overflow:hidden;
    text-align:left;
}

.modal-header {
    position:absolute; 
    top:1vh;    
    left:33%; 
    width:33%;
    color:white; 
    font-size:1.5vw;   
    opacity:0.4; 
    font-weight:bold;
    text-align:center;
}


.modal-footer {
    position:fixed; 
    bottom:0.4vh; 
    left:35%; 
    width:20%;
    color:white; 
    font-size:0.8vw; 
    opacity:0.4; 
    font-weight:bold;
    text-align:center;
}

.close {
    position:absolute;
    right:0.5vw;
    top:1.5vh;
    font-size:2.5em;
    cursor:pointer;
    opacity:1;
    text-shadow:0 2px 0 darkblue;
}
.close:hover {
    opacity:0.7;
    text-shadow:0 0px 0 grey;
}
.close >a {color:var(--color4);}

.refresh {
    position:absolute;
    left:1vw;
    top:1.5vh;
    font-size:2.5em;
    cursor:pointer;
    opacity:1;
    text-shadow:0 2px 0 darkblue;
}
.refresh:hover {
    opacity:0.7;
    text-shadow:0 0 0 grey;
}
.refresh >a {color:var(--color4);}

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

.background {
    position:absolute;
    bottom: 0;
    right:   0;
    width:150px;
    height:150px;
    z-index:9999;
    background-image: url("../images/clock.gif");
    background-size: 150px 150px;
    background-repeat:  no-repeat;
    background-position: center; 
    background-color:white;
    opacity:0.5;
    display:none;
}

/*CSS for Entry System*/
.holder {
    position:relative;
    height:15vh;
    background-color:rgba(0,0,0,0.6);
    padding:1vh 0.5vw 1vh 0.5vw;
    text-align:center;
}

.holdertmp {
    position:relative;
    height:15vh;
    background-color:rgba(0,0,0,0.1);
    padding:1vh 0.5vw 1vh 0.5vw;
    text-align:center;
}
/*apm entries*/
.entryOrder {
    position:absolute;
    top:0.5vh;
    left:1vw;
    background-color:rgb(0,0,0);
    color:white;
    text-align:center;
    border-radius:5px;
    min-width:2.25vw;
    font-size:0.9em;
    font-weight:bold;
    opacity:0.8;
}

.entryScore {
    position:absolute;
    top:0.5vh;
    right:1vw;
    background-color:rgb(0,100,0);
    color:white;
    text-align:center;
    border-radius:5px;
    min-width:2.25vw;
    font-size:0.9em;
    font-weight:bold;
    opacity:0.8;
}

.entryDelete {
    position:absolute;
    bottom:5vh;
    right:1vw;
    color:white;
    text-align:center;
    font-size:1.2em;
    font-weight:bold;
    opacity:0.8;
}

/*competition entries*/
.score {
    position:absolute;
    top:2.5vh;
    right:1vw;
    background-color:rgb(0,100,0);
    color:white;
    text-align:center;
    border-radius:5px;
    min-width:2.25vw;
    font-size:0.9em;
    font-weight:bold;
    opacity:0.8;
}

.author {
    position:absolute;
    top:0.25vh;
    left:1vw;
    background-color:black;
    color:white;
    width:85%;
    border-radius:5px;
    font-size:0.8em;
    opacity:0.7;
}

.competitionTitle {
    position:absolute;
    bottom:0.25vh;
    left:0.2vw;
    background-color:black;
    color:white;
    width:95%;
    border-radius:5px;
    font-size:0.75em;
    opacity:0.6;
}

.imageTitle {
    position:absolute;
    bottom:2vh;
    left:0.2vw;
    background-color:black;
    color:white;
    width:95%;
    border-radius:5px;
    font-size:0.75em;
    font-weight:bold;
    opacity:0.6;
}

.checkimage {
    position:absolute;
    bottom:1.25vh;
    left:1.25vh;
    background-color:black;
    color:white;
    width:85%;
    font-size:0.8em;
    opacity:0.6;
    padding:0 2vw 0 2vw;
}

@media screen and (max-width: 1024px) {
  .login {padding:10% 15% 10% 15%;}
  .banner {font-size:2.2vw;}
  .bannertext {font-size:1.5vw;}
  .new-card-title {font-size:1.2em;}
/*  .scrollheight80 {max-height:75vh;}
  .scrollheight70 {max-height:65vh;}
  .scrollheight60 {max-height:55vh;}*/
  .modal-1, .modal-2, .modal-3, .modal-4, .modal-5, .modal-6, .modal-7, .modal-8, .modal-9 {padding-top:5vh;}
  .logo {max-width:120%;}
  .search {padding-left:20%;}
  .asearch {width:70%;}
}

@keyframes pulse {
    0% {opacity:1;}
    50% {opacity:0.5;}
    100% {opacity:1;}
}

.pulse {
    animation: pulse 1.5s infinite;
}