/* 
 * 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;
}

/*BootStrap Adjustments*/
.form-control {margin:0;padding:0 0 0 3px;}
.row {padding:0 0 0.5vh 0;}

/*General CSS*/
.linkgrey {color:silver;}
.linkgrey:hover {color:grey;}

/*Main Page Container - Fixed Height*/
.panelcontainer {
    height:60vh;
    overflow-y:hidden;
    overflow-x:hidden;
/*    background-color:rgba(0,0,255,0.5);*/
}

/*Panels Container Scroll Box*/
.scrollheight {
    height:60vh;
    overflow-y:scroll;
    overflow-x:hidden;
/*    background-color:rgba(0,255,0,0.5);*/
}

.scrollheight50 {
    height:50vh;
    overflow-y:scroll;
    overflow-x:hidden;
/*    background-color:rgba(0,255,0,0.5);*/
}

.scrollheight60 {
    height:60vh;
    overflow-y:scroll;
    overflow-x:hidden;
/*    background-color:rgba(0,255,0,0.5);*/
}

.scrollheight70 {
    height:70vh;
    overflow-y:scroll;
    overflow-x:hidden;
/*    background-color:rgba(0,255,0,0.5);*/
}

.scrollheight80 {
    height:80vh;
    overflow-y:scroll;
    overflow-x:hidden;
/*    background-color:rgba(0,255,0,0.5);*/
}

.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:1vh;
    right:1vw;
}

.filter {
    position:absolute;
    bottom:1vh;
    left:1vw;
}

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

.label {
    color:var(--color5);
    font-weight:bold;
}

.more {
    color:var(--color5);
    font-weight:bold;
    padding-right:1vw;    
}

.panelIcon {
    display:inline-block;
    font-size:1.5em;
}

.new-card-title {
    position:relative;
    font-size:1.3em;
    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-left:1vw;
}

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

.alevel {
    position:absolute;
    top:2.5vh;
    right:3vw;
    width:25px;
    height:25px;
    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:fixed;
    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;
    width:100%;
    height:100%;
    padding:3% 3% 3% 3%;
    display:none;
}

.modal-content {
    background-color:var(--color3);
    border-radius:10px;
    padding:2% 1% 1% 1%;
    height:100%;
    width:100%;
    overflow:hidden;
}

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

.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:    9999;
    background-image: url("../images/clock.gif");
    background-size: 300px 300px;
    background-repeat:  no-repeat;
    background-position: center; 
    background-color:white;
    display:none;
}

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