/* 
@name           lighthouse.voly.co.uk - Feb 2024
@version        1.3
@description    A new userstyle
@author         Edd Allen MWMW
*/
    
html {
    font-size: 10px;
    font-family: 'Effra', sans-serif;
    font-weight: 300;
    font-style: normal;
}

body > .login {
    background: transparent;
    top: 40%;
}

html {
    background-image: none;
    background-color: #1b365e;
}

.loginfields input:not([type=image]) {
    padding: 2rem;
    box-sizing: border-box;
}


/* TEMPLATE ============================== */


.container div.main {
    /* background-image: url(https://lighthouse.voly.co.uk/css/dw/dANDw.png);
    background-repeat: no-repeat;
    background-position: calc(100% - 4rem) calc(100% - 6rem); */
    background-image: none;
    background-size: 6rem;
    box-sizing: border-box;
    width: calc(100% - 264px) !important;
    height: calc(100% - 2rem);
}

.container .menu {
    padding: 2rem;
    box-sizing: border-box;
}


#menu {
    background: #123
}

#popup div.menuitem {
    background: #123;
}


#popup div.menuitem p {
    font-size: 2rem !important;
}

#menu .menuitem {
    width: 100% !important;
}


#menu .menuitem:last-of-type:before {
    border-bottom: 0;
}

#menu div.menuitem p {
    padding: 2rem;
    width: 100%;
    overflow-wrap: anywhere;
}

div.menuitem p span {
    display: none;
}

.header:before {
    content: ' ';
    position: absolute;
    left: 0;
    width: 264px;
    height: 100%;
    background: #123;
}

.hidemainmenu, .showmainmenu {
    display: none !important;
}




/* HEADER ============================== */

.header .ismsmslogo img {
    padding: 10px;
    box-sizing: border-box;
}

.header .logo,
.header .rys,
.header .ismsmslogo {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    margin: auto;
}

.header .rys img {
    height: 95px;        
}

.header .user {
    left: 0;
}

.header .user .logo img {
    height: 120px;
}

.header .user .logo a[href='main.php?y=1'] img {
    height: 30px;
}

.header .user .name {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    margin-left: 2rem;
    line-height: 1.75;
    padding-top: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.header .user .logo a {
    height: 110px;
    display: flex;
    align-items: center;
    width: 264px;
    justify-content: center;
    overflow: hidden
}




/* HOME > BOATS ============================== */ 

.container .main .panelouter,
.container .main .panelinner {
    width: auto;
    height: auto;   
}

    
.container .main .panelouter {        
    margin: 0;
    width: calc(33.33% - 2rem);
    vertical-align: top;
    font-family: inherit;
    margin-right: -2rem;
    margin-bottom: -2rem;
}

.container .main .panelouter > .panelinner {
    margin: 2rem;
    padding: 0;
    transition: background 0.3s linear, color 0.3s linear;
    border-radius: 5px;
    overflow: hidden;
    border: 2px solid white;
    background: transparent;
    position: relative;
}

.container .main .panelouter > .panelinner:hover {
    color: white;
    border-color: #7FC1F6;
}

/* .container .main .panelouter > .panelinner .yimage {
    opacity: 1;
    mix-blend-mode: overlay;
    filter: grayscale(1) contrast(2) brightness(0.5);
    transition: all 0.3s;
} */


/* .container .main .panelouter > .panelinner:hover .yimage {
    opacity: 1;
    filter: grayscale(1) contrast(1) brightness(1);
} 

.container .main .panelouter > .panelinner:hover:after {
    inset: 3rem;
} */

.container .main > .panelouter > .panelinner:hover:after {
    border-color: #7FC1F6;
}
.container .main > .panelouter > .panelinner:hover > .panelinfo {
    color: #7FC1F6;
}

.container .main .panelouter > .panelinner > .panelinfo {
    height: auto;
    text-align: left;
    margin-top: 2rem;
    transition: color 0.3s linear;
}

.panelinner .yimage {
    width: 100%;
    flex-grow: 1;
    height: 24rem;
    border: 0px;
    border-radius: 0px;
}

.main .displayholder .panelinner .yimage {
    height: 100%;
}



.container .main .panelouter .infoarea {
    height: auto;
    text-align: left;
}

.container .main .panelouter .infoarea:first-child {
    padding-left: 3rem;
    position: relative;
}

.container .main .panelouter .infoarea:last-child {
    margin-top: 1rem;
    padding-left: 3rem;
    padding-bottom: 2rem;
    padding-right: 3rem;
    box-sizing: border-box;
    min-height: 10rem;
}

.container .main .panelouter .infoarea > p {
    margin-top: 1rem;
}

.container .main .panelouter .panelinfo h2 {
    text-transform: uppercase;
    letter-spacing: 2px;
}


.container p.rysalrt, 
.container div.rysalrt, 
.container span.rysalrt {
    color: white;
    font-style: normal;
    font-weight: 300;
}



/* HOME > CONTAINER MENU ========================== */


.container .notifholder, .ycpanelholder {
    height: auto;
    padding: 2rem;
    padding-right: 0;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}

.container .notifholder .notifhead {
    height: auto;
    padding: 0rem 4rem 0rem 4rem;
    min-height: 10rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.notif .notifhead h4 {
    margin-bottom: 0;
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0;
    color: #cae2fe;
} 

.notif .notifhead .notifclose,
.notif .notifhead .synclose {
    float: none;
    height: auto;
    margin: 0;
    order: 2;
}

.notif .notifinfo div.menuitem p {
     padding: 1rem 0rem;
    width: 100%;
}

.notifinfo li {
    margin-bottom: 2rem;
}

.container .notifholder .notif {
    margin: 0rem;
    margin-right: -1px;
    border: 1px solid #7fc1f6;
    border-radius: 5px;
    overflow: hidden;
    height: auto;
    min-width: calc(33% - 2rem);
    margin-right: 2rem;
    /*min-width: 0;*/
    /*max-width: 550px;*/
    float: none;
    background: #1b365e;
    box-shadow: 5px 5px 15px 1px #11223352;
}

.container .notifholder .notifinfo {
    padding: 0rem 4rem 4rem 4rem;
    height: auto;
    max-height: 75rem;
}

.notifholder .notif > div:not(.notifgre):not(.notifamb):not(.notifred) {
    background: transparent;
}


.notifl3 .notifhead .menuitem {
    height: auto;
    padding: 1rem 0;
}

.notifl3 .notifhead .menuitem:before {
   content: 'Click to open:';
   displaY: block;
   position: relative;
   color: #7fc1f6; 
   margin-bottom: 0.5rem;   
}

div.menuitem {
    background-color: transparent;
    position: relative;
}

html body .menuitem {
    transition: color 0.2s !important;
}

html body .notifholder .menuitem {
    padding: 0;
    margin-bottom: 1rem
}

.menuitem:after,
.menuitem:before {
    content: ' ';
    position: absolute;
    left: 0;
    bottom: 0;
    border-bottom: 2px solid white;
    right: 0;
}

.container #main .menuitem:before,
#main .menuitem[onclick^="gotop"]:after {
    border-bottom: 0        
}

.menuitem:after {
    border-bottom: 2px solid #7fc1f6;
    transform: scaleX(0);
    transition: transform 0.3s;
    transform-origin: center left;
}

.menuitem:hover:after,
.menuitem.menuactive:after {
    transform: scaleX(1);
}

    
body .menuitem:hover,
body .menuiten:active {
    background: transparent;
}


html body .menuitem:hover,
html body .menuitem.menuactive {
    color: #7fc1f6;
    transition-delay: 0.1s !important;
}


div.notifl2 div.menuitem p, 
div.notifl3 div.menuitem p {
    padding: 0;
}



/* HOME > TRAFFIC LIGHT SYSTEM ========================== */


.container .notifholder:not(.mpnotifholder) {
    display: flex;
    align-items: stretch;
    min-height: 0;
}

.container .notifholder:after {
    content: ' ';
    display: block;
    position: absolute;
    background: #569bd1;
    background-image: url(https://lighthouse.voly.co.uk/css/dw/andry-roby-x29o6PFuAyg-unsplash.jpg);
    background-size: cover;
    background-position: center bottom;
    left: 264px;
    right: 0;
    height: 65%;
    bottom: 0;
    z-index: -1;
    opacity: 0.75;
}

.container .notifholder:not(.mpnotifholder) .notif {
    border: 0;
    width: calc(33% - 2rem);
    height: 75%;
    min-height: 450px;
    min-width: 0;
    max-width: none;
    float: none;
    margin-right: 2rem;
    position: relative;
    z-index: 2;
    background: white;
}

.container .notifholder:not(.mpnotifholder) .notifhead.notifred {
    background: #D90B08;
}

.container .notifholder:not(.mpnotifholder) .notifhead.notifgre {
    background: #50B981;
}

.container .notifholder:not(.mpnotifholder) .notifhead.notifamb {
    background: #DF8B2A;
}
.container .notifholder:not(.mpnotifholder) .notifhead h4 {
    color: white;        
}

.container .notifholder:not(.mpnotifholder) .notifhead {
    padding: 2rem 4rem;
    min-height: 8rem;
}

.container .notifholder:not(.mpnotifholder) .notifinfo {
    padding-top: 4rem;
    background: white;
    color: black;
    border-radius: 0 0 5px 5px;
}

.container .notifholder:not(.mpnotifholder) .notif p {
    margin-bottom: 0;
}

/* .container .notifholder:not(.mpnotifholder) .notifinfo a {
    color: #1b365e;
    padding-left: 2rem;
    display: inline-block;
    margin-bottom: 1rem;
    position: relative;
    margin-top: 1rem;
}

.container .notifholder:not(.mpnotifholder) .notifinfo a:after {
    content:' ';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 5px;
    height: 5px;
    background: #1b365e;
    border-radius: 200%;
    transition: background 0.3s;
}

.container .notifholder:not(.mpnotifholder) .notifinfo a:hover:after {
    background: #7fc1f6;
} */

.container .notifholder:not(.mpnotifholder) .notifinfo a {
    color: #1b365e;
}



   /* CREW PAGES ========================== */

div.displayholder {
    display: flex;
    flex-wrap: wrap;
    padding-right: 0;
    align-items: stretch;
}
     
.container .main .displayholder .panelouter .panelinner {
    display: flex;
    align-items: center;
    height: calc(100% - 4rem);
    box-sizing: border-box;
}

.container .main .panelouter:not([onclick^='gotop("main.php?page=crewlist']) {
    order: 5;
}

.container .main .panelouter[onclick^='gotop("main.php?page=crewlist'] .panelinner .infoarea.infoareasmlr:not(:first-child) p {
     font-weight: bold;
     font-size: 2rem
}

.container .main .panelouter[onclick^='gotop("main.php?page=crewlist'] .panelinner .infoarea {
    padding: 0;
    margin: 0;
}

.container .main .panelouter[onclick^='gotop("main.php?page=crewlist'] .panelinner img.offrole {
    margin: 0;
    padding: 0;
}

.container .main .panelouter[onclick^='gotop("main.php?page=crewlist'] .panelinner .panelinfo {
    padding: 3rem 2rem;
    margin-top: 0;
}

.container .main .panelouter[onclick^='gotop("main.php?page=crewlist'] .panelinner .cimage {
        height: 32.5rem;
}

.container .main .panelouter[onclick^='gotop("main.php?page=crewlist'] .panelinner .panelinfo > .infoarea:first-child {
    position: absolute;
    width: auto;
    top: 0rem;
    right: 1rem;
    left: 1rem;
    text-align: right;
}

.container .main .displayholder .panelouter:not([onclick^='gotop("main.php?page=crewlist']):last-child .infoarea {
    padding: 0;
}
.container .main .displayholder .panelouter:not([onclick^='gotop("main.php?page=crewlist']):last-child .infoarea > p:first-child {
    text-align: center;
    font-weight: bold;
    font-size: 2rem;
}
.container .main .displayholder .panelouter:not([onclick^='gotop("main.php?page=crewlist']):last-child .yimage.cimage {
    display: none;
}


.main .displayholder.infoholder {
    height: 100%;
    padding-bottom: 0;
    padding-right: 0;
}

.main .yachtcerts {
    margin: 0;
    width: 100% !important;
    height: 100% !important;
    padding: 0;
    display: flex;
    background-color: rgb(225 226 235);
    background-image: url(https://lighthouse.voly.co.uk/css/dw/dANDw.png);
    background-repeat: no-repeat;
    background-position: calc(100% - 4rem) calc(100% - 4rem);
    background-size: 8rem;
}

.main .displayholder.infoholder .yachtcerts.guestdisplay {
    flex-direction: column;
}

.yachtcerts .cdleft {
    height: 100%;
    width: 250px;
    background: #1b365e;
}
    
.yachtcerts .cdleft .cdimage {
    width: 250px;
    height: 250px;
}

.yachtcerts .cdleft .cdimage > img {
    object-fit: cover;
    height: 100% !important;
    width: 100%;
    margin-left: 0 !important;
}

.yachtcerts .cdmenuholder {
    width: 100%;
}

.yachtcerts .cdmenuholder > div {
    padding: 1rem 2rem;
    box-sizing: border-box;
    height: auto;
    font-size: 1.5rem;
    width: 100%;
    background: transparent;
    font-style: normal;
}

.yachtcerts .cdmenuholder > div.cdmenuitema {
    background: rgb(225 226 235);
    font-weight: 500;
    color: #123
}

.yachtcerts .cdmenuholder > div.cdmenuitemi:hover {
    background: #123;
    color: white;
}

.yachtcerts .cdhead .offname,
.yachtcerts .cdhead {
    font-size: 3rem;
    padding-left: 1rem;
}
.yachtcerts .cdhead .offname {
    font-size: 2.5rem;
}
.yachtcerts #cdright {
    padding: 2rem;
    border: 0px;
}

.yachtcerts #cdright #datadisp {
    margin-top: 8rem;
}

.yachtcerts #datadisp .ltitle,
.yachtcerts #datadisp .litem {
    vertical-align: middle;
    padding: 1rem;
}


div#crewpopup {
    box-shadow: 0;
}

div#fppopup {
    background: rgba(27, 54, 94, 0.85);
}



div.fpage, div.page, div.fsub {
    box-shadow: none;
}

.docouter {
    padding-right: 7rem;
}

.container .docouter select {
    padding: 0;
}

div#listofdocs {
    flex-wrap: wrap;
}

#listofdocs .hdlistheader {
    height: auto;
    padding-top: 2rem;
    padding-left: 2rem;
}

#listofdocs .hdlistheader h3 {
    margin-left: 0;       
}

#listofdocs .hdlistarea {
    height: calc(100% - 91px) !important;
    padding: 2rem;
    border: 0px;
    box-sizing: border-box;
}




/* home > RISK MANAGER =================== */


.container .main .infoholder .riskman {
    margin-top: 0px !important;
    background-color: #d9d9d9;
    box-sizing: border-box;
}


.container .main .infoholder #docedit {
    min-width: 0;
    box-sizing: border-box;
    margin-top: 0;
    background-color: #d9d9d9;
    height: 100% !important;
    background-image: url(https://lighthouse.voly.co.uk/css/dw/dANDw.png);
    background-repeat: no-repeat;
    background-position: calc(100% - 4rem) calc(100% - 4rem);
    background-size: 8rem;
}

button {
    padding: 1rem 2rem;
    border: 0;
    border-radius: 5px;
    background: #1b365e;
    border: 1px solid #1b365e;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 80%;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    max-width: 25rem;
    transition: background 0.3s, color 0.3s;
}

button:hover {
    background: #bacfe8;
    color: #1b365e;
}

.container select,
.container input {
    padding: 0.75rem 1rem;
}

.container select {
    height: 3.25rem;
}

div#docedit p.man {
    display: flex;
    align-items: center;
}

.container .printitem {
    box-shadow: 0;
}


/* home > certlist =================== */

.displayholder.infoholder .certlist  {
min-width: none;
height: auto;
}

.displayholder.infoholder .certlist table.clist {
width: 100%;
max-width: 100%;
margin: 2rem 0;
}

.displayholder.infoholder .certlist table.clist th.cname,
.displayholder.infoholder .certlist table.clist th {
width: auto;
max-width: none;
min-width: 0;
}

.certlist .csv {    
top: 2rem;
right: 2rem;
left: auto;
}
.certlist .csv > a > img {    
display:none;
}

.certlist .csv > a:after {    
content: 'Download Spreadsheet (CSV)';
}

.certlist .csv > a {
padding: 1rem 2rem;
border: 0;
border-radius: 5px;
background: #1b365e;
border: 1px solid #1b365e;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 80%;
display: inline-block;
vertical-align: middle;
cursor: pointer;
max-width: 25rem;
transition: background 0.3s, color 0.3s;
text-decoration: none;
max-width: 10rem;
text-align: center;
}

.certlist .csv > a:hover {
background: #bacfe8;
color: #1b365e;
}

/* Maintenance manager view uses #home > .home */

#container #home {
background-color: transparent;
height: auto;
margin: 0;
width: 100%;
height: 100%;
}

#container #home > .home {
width: 100%;
padding: 50px 100px;
box-sizing: border-box;
background: #d9d9d9;
}

#container #home > .home .hph > div {
margin: 0px;
padding: 0;
margin-bottom: 2rem;
border: 0;
border-radius: 5px;
height: auto !important;
}

#container #home > .home .hph > div:not(#njh) > h2 {
float: left;
width: 100%;
padding: 1rem 2rem;
box-sizing: border-box;
border-radius: 5px 5px 0 0;
height: auto;
color: white;
}

#container #home > .home .hph > div > h2.aok {
background: #50B981;
}

#container #home > .home .hph > div > h2.alert {
background: #D90B08;
}

#container #home > .home .hph > div > h2.warng {
background: #df8b2a;
}

#container #home > .home .hph .hpjl {
min-height: 4rem;
background: white;
border-radius: 0 0 5px 5px;
padding: 1rem 2rem;
box-sizing: border-box;
}

#container #home > .home .hph .divmenu.clickable {
display: none;
}


body > .login {
background: transparent;
top: 0;
width: 100%;
transform: none;
left: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background-image: url(https://lighthouse.voly.co.uk/css/dw/dw.png);
background-position: center 4rem;
background-size: auto 55px;
background-repeat: no-repeat;
padding: 10rem;
box-sizing: border-box;
}

body > .login p.centered input[type="submit"] {
transition: color 0.3s, background 0.3s;
}

body > .login > p.centered {
margin-bottom: 2rem;
margin-top: auto;
}

body > .login > .loginfields {
margin-top: 0;
width: 100% !important;
}


.displayholder div.otherdoc object {
margin-top: 2rem;
padding-top: 0;
background: white;
}  

.main #viewdoch + .displayholder.infoholder {
height: auto !important;
display: block;
}





/* MENU BAR  ============================== */


body > .menubar {
    background-color: white;
}


div.menubar #noa a {
    font-weight: 900;   
    font-size: 8px;
    text-align: center;
}

div.menubar img {
    margin-top: 5px;
    height: 20px;
}

div.menubar > div:not(.search) {
    width: 65px !important;
    text-align: center;
    border-left: 1px solid #CCC;
    transition: background 0.3s;
    margin: 0;
}

div.menubar > div[title=Notifications] {
    height: 25px;
    width: 25px;
    margin-top: 2px;
    margin-bottom: 2px;
    background-repeat: no-repeat;
    background-position: center;
}

div.menubar > div:hover {
    background-color: #EEE;
}




#popup p a br {
    margin-bottom: 15px !important;
    display: block !important;
    content: ' ';
}

div#popup > div.menuitem p {
    font-size: 1.6rem !important;
    padding: 2rem 2rem;
    box-sizing: border-box;
}