/*
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 : 03-Aug-2022, 12:58:48
    Author     : adrianlines
*/
:root {
  --color: rgba(0,0,100,1);
  --bgcolor: rgba(150,150,250,1);
  --light: rgba(220,220,255,1);
  --edit: mistyrose;
  --hover: lightgreen;
}

body {
    color:var(--color);
    font-size: calc(15px + 0.390625vw);
    background: url(../images/background.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size:110% 110%;  
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

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

a {text-decoration:none;}
a:hover {color:white;}

table, th, td {
  border: 1px solid rgba(0,0,0,0.1);
  padding-left:0.5%;
  background-color:var(--light);
}

input[type=checkbox] {
    -webkit-appearance:none;
    width: 2.5vh;
    height: 2.5vh;
    background:rgba(0,0,100,0.5);
    vertical-align:middle;
}

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

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

input[type=radio] {
    -webkit-appearance:none;
    width: 2vh;
    height: 2vh;
    background:rgba(0,0,100,0.5);
    vertical-align:middle;
}

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

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

.deleteRecord {color:pink;font-size:0.8em}
.deleteRecord:hover {color:red;}

.working {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color:rgba(255,255,255,0.3);
    padding:20% 25% 30% 25%;   
    display:none;
    z-index:20;
}

.workingContent {
    padding:5% 5% 5% 5%;
    background-color:white;
    text-align:center;
    opacity:0.4;
    font-weight:bold;
    font-size:4em;
}
.workingStatus {
    padding:5% 5% 5% 5%;
    background-color:white;
    text-align:center;
    opacity:0.4;
    font-weight:bold;
    font-size:1em;
}

.updating {
    position:absolute;
    right:0;
    top:0;
    width:20vw;
    font-size:0.7em;
    font-weight:bold;
    padding:1vh 1vw 1vh 1vw;
    text-align:right;
    background-color:black;
    color:white;
    opacity:0.5;
    display:none;
}

.loading {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.4);
    text-align:center;
    color:white;
    display:none;
}

.page {
    position:relative;
    width:100%;
    height:100%;
    padding:1% 3% 1% 3%;
}

.header {
    position:relative;
    height:12vh;
    width:100%;
    padding:1vh 2vw 1vh 2vw;
    background-image: linear-gradient(to right,white,var(--color));
    z-index:1
}

.content {
    position:relative;
    height:79vh;
    width:100%;
    padding:1% 1% 1% 1%;
    background-image: radial-gradient( rgba(150,180,150,1), rgba(0,0,30,1)  );
    overflow:hidden;
}

.contentx {
    position:relative;
    height:77vh;
    width:100%;
    padding:1% 1% 1% 1%;
    overflow:hidden;
    background-color:rgba(0,0,100,0.4);
}

.ctcontain {
    position:relative;
    width:100%;
    padding:1vh 3vw 1vh 3vw;
    overflow:hidden;
    background-color:rgba(200,200,200,0.3);
}

.contenttext {
    color:rgba(250,255,250,1);
    text-shadow:1px 1px 1px rgba(0,100,0,0.8);
    font-weight:500;
}

.footer {
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    padding:1vh 2vw 1vh 2vw;
    font-size:0.7em;
    text-align:center;
    animation: fadeInUp; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 1.5s; /* don't forget to set a duration! */
    background-color:darkblue;
} 

.siteName {
    position:relative;
    font-size:1.9em;
    font-weight:bold;
    text-shadow:0px 2px 2px grey;
    animation: fadeInLeft; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 1s; /* don't forget to set a duration! */
    z-index:5;
}

.siteDescription {
    position:relative;
    font-size:0.8em;
    font-style:italic;
    animation: fadeInLeft; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 1.5s; /* don't forget to set a duration! */
    z-index:5;
}

.logo {
    position:relative;
    width:7vh;
    opacity:1;
    z-index:5; 
    display:none;
}

.siteLogo {
    position:relative;
    float:right;
    padding:1%;
    animation: fadeInRight; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 1s; /* don't forget to set a duration! */
    z-index:5;
}

.maincontent {
    height:92%;
    width:100%;
    overflow-y:scroll;
    display:none;
}

.maincontentx {
    height:92%;
    width:100%;
    overflow-y:scroll;
}

.menu {
    padding:1.5vh 1% 0.5% 1%;
    width:100%;
    height:7vh;
    background-color:var(--color);
    color:var(--bgcolor);
}

.menu-item {
    display:inline-block;
    text-align:left;
    font-size:0.7em;
    padding-right:3vw;
    min-width:10%;
    padding:0.5% 1% 0.5% 0.5%;
}

.menu-item:hover {
    background-color:rgba(255,255,255,0.3);
    color:white;
}

.menuLink {color:var(--hover);}
.menuLink:hover {color:var(--bgcolor);}

.menuReport {
    position:relative;
    display:inline-block;
    padding-right:3vw;
}

.reportLink {color:var(--color);}
.reportLink:hover {color:var(--hover);}

.loginPage {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    padding:10% 20% 20% 20%;
    background-color:rgba(0,0,0,0.8);
    display:none;
}

.login { 
    width:100%;
    padding:5%;
    background-color:var(--color);
    color:var(--bgcolor);
    font-size:0.9em;
    border:2vw solid rgba(255,255,255,0.1);
}

.loginLink {
    height:5vh;
    color:white;
}

.logoutLink {
    color:pink;
    font-weight:bold;
}

.logoutLink:hover {color:var(--hover);}

.loginLink:hover {color:var(--hover);}

.loginTitle {
    font-size:1.2em;
    font-weight:bold;
}

.clickShowRegistration {
    display:none;
}

.maintenance {
    position:absolute;
    top:1%;
    right:1%;
}

.edit {
    background-color:var(--edit);
    display:none;
    font-size:0.9em;
}

.show {
    display:none;
    font-size:0.9em;    
}

.rshow {
    display:none;
    font-size:0.9em;    
}

.columnShow {
    display:none;
    font-size:0.9em;  
}


.editrelated {
    background-color:var(--edit);
    display:none;
    font-size:1em;
}

.editreport {
    background-color:var(--edit);
    display:none;
    font-size:1em;
}

.editLink {
    color:var(--color);
    opacity:0.5;
    font-size:0.8em;
}

.editLink:hover {
    color:var(--hover);
    opacity:1;
}

.tdreport {
    background-color:rgba(0,0,0,0.05);
    color:black;
    font-size:0.7em;
    overflow-wrap:break-word;
}

.related {
    position:relative;
    width:100%;
    padding:0.5%;
    font-weight:bold;
    font-size:0.8em;
    background-color:rgba(0,255,0,0.2);
}

.relatedContent {
    position:relative;
    width:100%;
    border:1px solid grey;
    display:none;
    font-size:0.8em;
    padding:5px;
    opacity:0.8;
}

.relatedLink{}
.relatedLink:hover{color:var(--edit);}

.relatedRecords {
    max-height:25vh;
    overflow-y:scroll;
    overflow-x:hidden;
}

.counter {
    position:absolute;
    right:1vw;
    top:0.5vh;
    color:white;
    background-color:red;
    font-size:.7em;
    border-radius:10px;
    padding:0.5vh 7px 0.5vh 7px;
}

.smallcounter {
    position:absolute;
    right:0;
    top:-0.2vh;
    color:white;
    background-color:darkred;
    font-size:.6em;
    font-weight:bold;
    border-radius:10px;
    padding:2px 2px 2px 2px;  
    min-width:1.5vw;
    text-align:center;  
}

.refresh {
    position:absolute;
    left:0vw;
    top:0.3vh;
    font-size:1em;
    padding:0.3vh 0.5vw 0.5vh 0.5vw;
}

.add {
    position:absolute;
    right:5vw;
    top:0.3vh;
    font-size:1em;
    padding:0.3vh 7px 0.5vh 7px;
}

.addselector {
    position:absolute;
    right:7vw;
    width:20vw;
    top:0.3vh;
    font-size:1em;
    padding:0.3vh 7px 0.5vh 7px;
    display:none;
}

.modalClose{
    color:pink;
    font-weight:bold;
    text-shadow:0px 0px 5px black;
}

.modalClose:hover{
    color:white;
    text-shadow:0px 0px 5px pink;
}

.editmodal {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.6);
    padding:20% 5% 5% 5%;
    display:none;
    z-index:15;
}
.editBody {
    position:relative;
    width:100%;
    height:100%;
    padding:1vh 1vw 1vh 1vw;  
}
.editContent {
    position:relative;
    width:100%;
    height:100%;
    padding:1vh 1vw 1vh 1vw;
    box-shadow:0 3px 5px black;
    overflow:hidden;  
    font-size:0.8em;
}
.editClose {
    position:absolute;
    top:-5%;
    right:2%;
    padding:0;  
    font-size:0.9em;    
}

.smlabel {
    font-size:0.8em;
    font-style:italic;
    opacity:0.7;
}

.toolmessage {
    display:none;
    position:fixed;
    top:0;
    left:0;
    background-color:darkblue;
    color:white;
    font-size:0.6em;
    padding:2px 4px 2px 4px;
    box-shadow:2px 0 4px black;
}


.modalClose1, .modalClose2, .modalClose3, .modalClose4 {
    position:absolute;
    top:0;
    right:1vw;
    padding:0;  
    font-size:0.9em;
}
.modalContent1, .modalContent2, .modalContent3, .modalContent4{
    position:relative;
    width:100%;
    height:100%;
    padding:1vh 3vw 1vh 3vw;
    box-shadow:0 3px 5px black;
    overflow-y:scroll;
}

.modal1{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.6);
    padding:2% 3% 3% 3%;
    display:none;
    z-index:10;
}

.modal2{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.6);
    padding:2.5% 3.5% 3% 3.5%;
    display:none;
    z-index:11;
}

.modal3{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.6);
    padding:3% 4% 3% 4%;
    display:none;
    z-index:12;
}

.modal4{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.6);
    padding:4% 4.5% 3% 4.5%;
    display:none;
    z-index:13;
}

.btn {
    width:100%;
    box-shadow:0px 1px 3px black;
    overflow:hidden;
    border-radius:3px;
    vertical-align:top;
    border:2px solid transparent;
}

.btn:hover{border:2px solid lightgreen; box-shadow:0px 0px 10px lightgreen;}

.btnLabel {
    font-size:3vh;
}

.btn-height {
    height:12vh;
}

.row {padding:0.2vh 0px 0.2vh 0px;}

.hover:hover{
    background-color: var(--edit);
    cursor:pointer;
}

.texthover:hover{
    color: var(--hover);
    cursor:pointer;
}

.texthover2:hover{
    color: pink;
    text-shadow:0px 0px 5px red;
    cursor:pointer;
}

.formLabel {
    font-size:0.7em;
    font-style:italic;
    opacity:0.8;
}

.form-control {
    border-radius:3px;
    border-color:transparent;
    background-color:whitesmoke;
    font-weight:500;
    font-size:0.8em;
    padding:0.2vh 0.5vw 0.1vh 0.5vw;
}

select.form-control {
  background-color:mintcream;  
  border:1px solid lightgreen;
}

.edit-control {
    border:2px solid transparent;
    background-color:mistyrose;
}

/* foreground Pulse Green */
.pulselink {
    animation:pulselink 3s infinite;
    text-shadow:1px 1px 1px rgba(0,0,0,0.6);
}

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

@media (max-width:600px){
    .page {padding:2% 2% 0 2%;}
    .body {font-size:2vh;}
    .content {height:68vh;}
    .header {font-size:0.8em;}
    .loginPage {padding:20% 1% 20% 1%;}
    .btn-height {height:9vh;}
    .formLabel {font-size:0.5em;}
    .tdreport {font-size:0.5em;}
    .row {padding:0.1vh 0px 0.1vh 0px;}
    .workingContent {font-size:1.75em;}
    .qq-upload-button {height:60%;}
    .form-control {font-weight:500;padding:0.5vh 0 0.5vh 0;font-size:0.75em;}  
    .modal1, .modal2, .modal3, .modal4 {padding-top:5vh;}
}