/* main menu customisations */
#nav {
    font-weight: bold;
}

.mainmenu-options {
    width: 5em;
    text-align: center;
}

.mainmenu-languageselect {
    width: 5em;
    text-align: center;
}

#skiptomaincontent {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#skiptomaincontent:focus {
    position: absolute;
    top: 3.25rem;
    left: 0;
    margin: 1rem;
    padding: 0 1.5rem;
    height: 2.5rem;
    width: auto;
    z-index: 100;
    display: inline-block;
    cursor: pointer;
    font-family: "Poppins", sans-serif;
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 2.30625rem;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.025rem;
    box-shadow: 0.4rem 0.4rem 0 -4px #fff, 0.4rem 0.4rem 0 0 #0A1D38;
    background-color: #7DC9BB;
    color: #0b1922 !important;
    border-radius: 10px;
    border: 0;
}

#skiptomaincontent:focus:hover {
    background-color: #36B39D;
    color: #3f3f3f !important;
}

/* MAIN LOGO */


.mainlogo {
    width: 100%;
    max-width: 450px;
    height: auto;
}

img.partnerlogo {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

img.partnerlogo.active {
    filter: none;
    -webkit-filter: none;
}

/* Even height images and divs */
@media screen {
    .image.fitheight {
        height: 0;
        padding-bottom: 75%;
        overflow-y: hidden;
        background-color: #ffffff;
    }

    div.categoryitem {
        height: 450px;
    }
}

@media screen and (max-width: 1280px) {
    .image.fitheight {
        height: 0;
        padding-bottom: 75%;
        overflow-y: hidden;
        background-color: #ffffff;
    }
}

@media screen and (max-width: 980px) {
    .image.fitheight {
        height: 0;
        padding-bottom: 75%;
        overflow-y: hidden;
        background-color: #ffffff;
    }

}

@media screen and (max-width: 736px) {
    .image.fitheight {
        height: 0;
        padding-bottom: 75%;
        overflow-y: hidden;
        background-color: #ffffff;
    }

    div.categoryitem {
        height: auto;
    }

    ul.coaching_units li {
        width: calc(50% - 1.5rem) !important;
    }
}

@media screen and (max-width: 480px) {
    ul.coaching_units li {
        width: calc(100% - 1.5rem) !important;
    }

    ul.coaching_units li {
        width: calc(50% - 1.5rem) !important;
    }
}

@media screen and (max-width: 480px) {
    ul.coaching_units li {
        width: calc(100% - 1.5rem) !important;
    }
}

/* DISCUSSION */

section.toolbar {
    width: 100%;
    clear: both;
}

.toolbar ul {
    list-style: none;

}

.toolbar ul li {
    clear: none;
    display: inline;
}

/*#footer a {
    color: #fff;
}*/

.boxcontent {
    padding: 2.9em 3em;
}

.boxcontent {
    background: #fff none repeat scroll 0 0;
    border-radius: 5px;
    overflow: hidden;
}



article.content,
div.content {
    padding: 2.9em 3em;
}

article.content,
div.content {
    background: #fff none repeat scroll 0 0;
    border-radius: 5px;
    overflow: hidden;
}

body#tinymce {
    background: none;
    background-color: #ffffff !important;
}



div.adminpencil {
    top: 60px !important;
}

div.adminpencil .button {
    background-color: #ffffff !important;
}

.pageitem {
    margin: 0 0.8em 0 0.8em;
}

.pageitem h2 {
    font-size: 1.1rem;
    text-transform: none;
    height: 4.5em;
    text-align: center;
}

.updating:after {
    margin-left: 1em;
    padding: 0.5em;
    content: 'Päivitetään';

}

#organisationlisttable {
    max-height: 70vh;
    overflow: auto;
}

#organisationlist td.companyname {
    /*word-break:break-word;*/
    max-width: 10em;
}

#organisationlist td.title a {
    word-break: break-word;
    max-width: 20em;
}

td.biscode {
    width: 5em;
}

.button {
    margin-top: 0.5em;
}

.image {}

.image.fit {}

.image.left {}

.image.right {}

tr.employmentrow {
    border-bottom: none;
}

tr.jobtitlerow {
    border-top: none;
    font-style: italic;
}

#ui-datepicker-div {
    z-index: 9999 !important;
}

a.small.button.employees {
    width: 70px;
}

span.employeecount {
    font-size: 0.7rem;
}

div.client-information {
    margin-bottom: 3rem;
}

a.employeecount {
    width: 8em;
}

/*button*/

.button {
    box-shadow: 0.4rem 0.4rem 0 -4px #fff, 0.4rem 0.4rem 0 0 #0A1D38;
}

.button.employeecount,
.button.fileinformation {
    background-color: #F8A674;
}

.button.employeecount:hover,
.button.fileinformation:hover {
    background-color: #F68F51;
}

.button.delete {
    background-color: #F58B7C;
}

.button.delete:hover {
    background-color: #F26E5B;
}

/*error, warning, infoboxit*/

div.error,
div.warning,
div.input-information,
div.input-error-information,
div.input-ok-information {
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 0.5em;
    border: 0.2em solid;
    border-radius: 1em;
    font-weight: 500;
    color: #000;
    font-size: smaller;
}

div.warning {
    border-color: #facd2e;
}

div.error {
    border-color: #F26E5B;
}

input.error,
select.error {
    border-color: #F26E5B !important;
    background-color: #FFD3D3;
}

input.error[type="checkbox"]+label::before,
input.error[type="radio"]+label::before {
    background-color: #FFD3D3;
    border: 1px solid #F26E5B;
}

div.input-information {
    /* TODO hillitymmät muotoilut */
    /*border: 0.2em solid #36b39d;
    box-shadow: 0.2em 0.2em #36b39d;*/
    border: 0.11em solid #8ae0d2;

}

div.input-information::before {
    color:
        /*#36b39d;*/
        #8ae0d2;
    font-family: "FontAwesome";
    font-weight: 900;
    content: "\f05a";
    margin-right: 1em;
}

div.input-ok-information {
    border: 0.2em solid #36b39d;
    box-shadow: 0.2em 0.2em #36b39d;

}

div.input-ok-information::before {
    color: #36b39d;
    font-family: "FontAwesome";
    font-weight: 900;
    content: "\f058";
    margin-right: 1em;
}

div.input-error-information {
    /*border:4px solid #36b39d;*/
    /*border: 1px solid #F26E5B;*/
    border: 0.2em solid #F26E5B;
    /*padding:1em;*/
    /*padding:0.5em;
    margin-top:1em;
    border-radius:1em;
    font-weight: 500;*/
    color: #000;
    /*box-shadow: 0.2em 0.2em #36b39d;*/
    /*box-shadow: 1px 1px #F26E5B;*/
    box-shadow: 0.2em 0.2em #F26E5B;
    /*font-size: smaller;*/
}

div.input-error-information::before {
    color: #F26E5B;
    font-family: "FontAwesome";
    font-weight: 900;
    content: "\f06a";
    margin-right: 1em;
}

/*materiaalit*/

.box.filelist {
    border-radius: 1rem;
    border: #0A1D38 solid 0.2em;
    margin-bottom: 2rem;
    padding: 1.5rem;
    /*height:18em;*/
    height: 22em;
    box-shadow: #7DC9BB 0.3em 0.3em;
    position: relative;
}

.box.filelist>div:not(.filelist-actions) {
    position: absolute;
    height: inherit;
    /*width: inherit;*/
    width: calc(100% + 1.5rem);
    padding: 1.5rem;
    top: 0;
    left: 0;
}

.box.filelist div.row {
    height: 75%;
}

.box.filelist>div>div {
    height: 100%;
}

.box.filelist>div>div:first-child>a {
    height: inherit;
}

.box.filelist .filelist-actions {
    position: absolute;
    bottom: 1rem;
    height: 25%;
    max-width: calc(100% - 3rem);
    align-content: end;
    /*width: 100%;
    justify-content: end;*/
}

.box.filelist .filelist-actions a {
    margin-bottom: 1rem;
}

@media screen and (max-width: 480px) {
    .box.filelist {
        height: 30em;
    }

    .box.filelist>div>div {
        height: 50%;
    }

    .box.filelist>div>div:first-child a,
    .box.filelist>div>div:first-child img {
        margin: 0;
        padding: 0;
        height: 100%;
    }

    .box.filelist>div>div:first-child img {
        width: auto;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
}

@media screen and (max-width: 360px) {
    .box.filelist {
        height: 30em;
    }
}


.page-information {
    margin-bottom: 1.5rem;
}

.pageitemimagecontainer {
    padding: 0 1rem;

}

div.employmentinfo p {
    margin: 0;
}


table {
    /* breaks editor: maybe narrow use to class or under DOM tree more specifcally? */
    /*display: block;*/
    overflow-x: auto;
}

/*
table tbody {
    display: inline-table;
    width: 100%;
}*/
table#organisationlist thead,
table#organisationlist tbody {
    display: table-row-group;
}

/* otsikkovärit */
.organisations-h1,
.userlist-h1,
.asiakastiedot-h1,
.organisationreporting-h1,
.staffreport-h1,
.outreachreport-h1,
.workshopreport-h1,
.completedreports-h1,
.partners-h1,
.materiaalit-h1,
.wikistartpageheader,
.allusers-h1,
.registration-h1 {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.organisations-h1::before {
    content: '';
    background-image: url(kuvitus/openimage/874.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    left: -0.5rem;
    right: -0.5rem;
    bottom: -0.1rem;
    width: auto;
    height: 100%;
    z-index: -1;
}

.userlist-h1::before {
    content: '';
    background-image: url(kuvitus/openimage/878.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    left: -0.5rem;
    right: -0.5rem;
    bottom: -0.1rem;
    width: auto;
    height: 100%;
    z-index: -1;
}

.asiakastiedot-h1::before {
    content: '';
    background-image: url(kuvitus/openimage/912.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    left: -0.5rem;
    right: -0.5rem;
    bottom: -0.1rem;
    width: auto;
    height: 100%;
    z-index: -1;
}

.organisationreporting-h1::before {
    content: '';
    background-image: url(kuvitus/openimage/911.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    left: -0.5rem;
    right: -0.5rem;
    bottom: -0.1rem;
    width: auto;
    height: 100%;
    z-index: -1;
}

.staffreport-h1::before {
    content: '';
    background-image: url(kuvitus/openimage/902.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    left: -0.5rem;
    right: -0.5rem;
    bottom: -0.1rem;
    width: auto;
    height: 100%;
    z-index: -1;
}

.outreachreport-h1::before {
    content: '';
    background-image: url(kuvitus/openimage/895.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    left: -0.5rem;
    right: -0.5rem;
    bottom: -0.1rem;
    width: auto;
    height: 100%;
    z-index: -1;
}

.workshopreport-h1::before {
    content: '';
    background-image: url(kuvitus/openimage/894.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    left: -0.5rem;
    right: -0.5rem;
    bottom: -0.1rem;
    width: auto;
    height: 100%;
    z-index: -1;
}

.completedreports-h1::before {
    content: '';
    background-image: url(kuvitus/openimage/905.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    left: -0.5rem;
    right: -0.5rem;
    bottom: -0.1rem;
    width: auto;
    height: 100%;
    z-index: -1;
}

.partners-h1::before {
    content: '';
    background-image: url(kuvitus/openimage/875.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    left: -0.5rem;
    right: -0.5rem;
    bottom: -0.1rem;
    width: auto;
    height: 100%;
    z-index: -1;
}

.materiaalit-h1::before {
    content: '';
    background-image: url(kuvitus/openimage/869.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    left: -0.5rem;
    right: -0.5rem;
    bottom: -0.1rem;
    width: auto;
    height: 100%;
    z-index: -1;
}

.wikistartpageheader:before {
    content: '';
    background-image: url(kuvitus/openimage/873.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    left: -0.5rem;
    right: -0.5rem;
    bottom: -0.1rem;
    width: auto;
    height: 100%;
    z-index: -1;
}

.allusers-h1::before {
    content: '';
    background-image: url(kuvitus/openimage/867.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    left: -0.5rem;
    right: -0.5rem;
    bottom: -0.1rem;
    width: auto;
    height: 100%;
    z-index: -1;
}

.registration-h1::before {
    content: '';
    background-image: url(kuvitus/openimage/880.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    left: -0.5rem;
    right: -0.5rem;
    bottom: -0.1rem;
    width: auto;
    height: 100%;
    z-index: -1;
}

/* Työntekijätiedot-sivun haku */
table tr.anchor {
    scroll-margin-top: 4em;
    --search-result-highlight: #ffff99;
}

.memberlistactions {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.organisationlistactions {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    justify-content: space-between;
}

.memberlistactions a.button,
.organisationlistactions a.button {
    margin-right: 2rem;
    margin-top: 0;
}

.tablesearchcontainer {
    /*margin: 1rem 1rem 0.5rem 0;*/
    margin: 0;
    height: fit-content;
    position: relative;
}

#organisationsearchcontainer {
    /*margin: 0.6rem 0 0.5rem 0;*/
    margin: 0;
    height: fit-content;
}

.tablesearchcontainer i {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translate(-50%, -50%);
}

.tablesearchcontainer input {
    padding: 0 1rem 0 2rem !important;
    border-radius: 0.5rem !important;
    border: 0.2em solid #7DC9BB !important;
    box-shadow: 0.2rem 0.2rem 0 0 #0A1D38 !important;
    height: 2.75rem !important;
    width: auto;
}

#tablesearchresults {
    position: absolute;
    width: 100%;
    background-color: white;
    border: 3px solid rgba(143, 143, 143, 0.25);
    border-radius: 10px;
    overflow: hidden;
}

#tablesearchresults a {
    display: block;
    padding: 0 1rem;
    border-bottom: none;
}

#tablesearchresults a:hover {
    background-color: #7DC9BB;
}

a.staffreportlink {
    margin: 0 0.4rem 1rem 0 !important;
}

@media screen and (min-width: 981px) {
    a.staffreportlink {
        float: right;
    }
}

#objecteditorform-iuser .other_contacts {
    height: calc(1em + 0.755rem);
    padding: 0 1rem;
}

#objecteditorform-iuser .activity_municipalities,
#objecteditorform-iuser .activity_region {
    height: calc(1rem + (1.65rem*3));
}

/*
.organisationfilters {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.organisationfilter.selected {
    border-bottom: solid 1px;
}
.organisationfilter.selected:hover {
    border-bottom-color: transparent;
}*/

.organisationfilters {
    display: flex;
    align-items: baseline;
    justify-content: end;
    width: fit-content;
}

#organisationlistDiv .organisationfilters {
    display: flex;
    align-items: baseline;
    justify-content: end;
    width: fit-content;
}

.organisationfilterlabel {
    margin-right: 0.5rem;
}

.organisationfilters a.organisationfilter {
    margin-right: 1rem;
    margin-top: 0;
    background-color: #FFFFFF;
    border: 4px solid #7DC9BB;
}

.organisationfilters a.organisationfilter:last-child {
    margin-right: 0.4rem;
}

.organisationfilters a.organisationfilter:hover,
.organisationfilters a.organisationfilter.selected:hover {
    background-color: #36B39D;
    border-color: #36B39D;
}

.organisationfilters a.organisationfilter.selected {
    margin-right: 1rem;
    margin-top: 0;
    background-color: #7DC9BB;
}

.organisationfilters button.organisationfilter {
    margin-right: 1rem;
    margin-top: 0;
    background-color: #FFFFFF;
    border: 4px solid #7DC9BB;
}

.organisationfilters button.organisationfilter:last-child {
    margin-right: 0.4rem;
}

.organisationfilters button.organisationfilter:hover,
.organisationfilters button.organisationfilter.selected:hover {
    background-color: #36B39D;
    border-color: #36B39D;
}

.organisationfilters button.organisationfilter.selected {
    /*margin-right: 1rem;*/
    margin-top: 0;
    background-color: #7DC9BB;
}

/*div.organisationactions {
    display: flex;
    flex-wrap: wrap;
}*/

.tabnavigation.current {
    border: 5px solid #7DC9BB;
    background-color: #7DC9BB;
    color: #0B1922 !important;
    height: 2.5rem !important;
    padding: 0 1.5rem !important;
    line-height: 2rem !important;
}

.tabnavigation.current:hover {
    background-color: #7DC9BB;
    color: black !important;
}

.tabnavigation:not(.current) {
    border: 5px solid #7DC9BB;
    background-color: #fff;
    color: #0B1922 !important;
    height: 2.5rem !important;
    padding: 0 1.5rem !important;
    line-height: 2rem !important;
}

.tabnavigation:not(.current):hover {
    background-color: #7DC9BB;
    color: black !important;
}

.organisation-extended-info-select {
    margin-top: 1em;
    margin-bottom: 2rem;
}

input[type="submit"],
.button:not(.small) {
    margin-right: 1em;
}

.subpagelist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

.subpagelist ul {
    font-family: "Poppins";
    font-weight: 600;
    font-size: 0.9rem;
    list-style: none;
    margin: 0;
}

.subpagelist li {
    list-style: none;
    display: inline-block;
    padding-left: 0;
}

.subpagelist a {
    border-bottom: 0;
    padding: 0.3rem 3rem;
    display: inline-block;
}

#closepopupbutton {
    margin-bottom: 3rem;
}

body.hidemenu {
    padding-top: 0;
}

body.hidemenu header#header {
    display: none;
}

body.hidemenu div.subpagelist {
    display: none;
}

header#header,
nav#nav {
    height: fit-content !important;
}

nav#nav>ul {
    display: flex;
    flex-wrap: wrap;
}

/* TODO päävalikon korkeuteen liittyviä säätöjä */
@media screen and (max-width: 1162px) {
    div.subpagelist {
        margin-top: 3.3rem;
    }
}

/*@media screen and (max-width: 980px)*/
@media screen and (max-width: 1365px) {
    div.subpagelist {
        margin-top: 0;
    }

    header#header {
        height: 3.25rem !important;
    }
}

#organisationlisttable a.button,
#memberlisttable a.button {
    margin-right: 0;
}

.memberlisttools {
    display: flex;
    flex-wrap: wrap-reverse;
    /* align-items: end;*/
    margin-bottom: 1rem;
}

table#organisationinfo .subtitle,
table.employmentdata .subtitle {
    font-weight: bold;
}

table#organisationinfo .visiting_address_actions {
    text-align: end;
}

.entitform input::placeholder {
    color: #777 !important;
}

.label-description {
    font-size: 0.9em;
}

#filepreview-logopicture>div {
    margin: 1em 0;
}

#filepreview-logopicture a.small.button {
    position: initial !important;
}

#filepreview-logopicture img {
    margin-bottom: 0;
}

div.organisation-extended-info {
    margin: 2rem 0;
}

.headertable {
    margin-bottom: 0;
}

.headertable #emptydescription {
    border: none;
}

.headertable tbody,
.headertable tr,
.footertable tbody,
.footertable tr {
    display: block;
    width: 100%;
}

.footertable {
    margin-top: 0;
}

.bodytable {
    margin: 0;
}

.bodytable tr:first-child {
    border-top: none;
}

.bodytable tr:last-child {
    border-bottom: none;
}

.bodytable .subtitle {
    font-weight: bold;
}

.emptyorganisation {
    font-style: italic;
}

.crm_logopicture_container {
    position: relative;
}

.crm_logopicture_container img {
    width: 50%;
}

.info_description {
    color: #8ae0d2;
}

.info_description:hover,
.info_description.active,
.info_description:hover,
.info_description.active {
    color: #36B39D;
}

button.info_description,
button.close-description-tooltip {
    display: inline-block;
    padding: 0;
    line-height: 0;
    height: fit-content;
    width: fit-content;
    background-color: transparent !important;
}

button.close-description-tooltip {
    margin: 0.5em;
}

button.close-description-tooltip i {
    color: #666;
}

button.close-description-tooltip:hover i {
    color: #333;
}

button.info_description i {
    color: #8ae0d2;
}

button.info_description:hover i,
button.info_description:active i {
    color: #36B39D;
}

a.info_description,
a.close-description-tooltip {
    border: none;
}

a.info_description i {
    color: #8ae0d2;
}

a.info_description:hover i,
a.info_description:active i {
    color: #36B39D;
}

a.close-description-tooltip i {
    color: #666;
}

a.close-description-tooltip:hover i {
    color: #333;
}

.description-tooltip {
    background-color: white;
    z-index: 200;
    color: black;
    border: 0.11em solid #8ae0d2;
    border-radius: 1em;
    line-height: 1.65;
    font-family: "Albert Sans", Sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.25rem 2.5rem 0.25rem 0.5rem;
    min-width: 18em;
    max-width: inherit;
    left: 0;
}

.description-tooltip ol,
.description-tooltip ul {
    margin-bottom: 0;
}

.close-description-tooltip {
    padding: 0.5em;
    font-weight: normal;
    color: #666;
    top: 0;
    right: 0;
}

.close-description-tooltip:hover {
    color: #333;
}

/*
.description-tooltip ol {
    margin-bottom: 1.25rem;
}*/
.description-tooltip p {
    margin-bottom: 1rem;
}

.description-tooltip p:last-of-type {
    margin-bottom: 0;
}

span.employment_type_info {
    display: block;
    margin-bottom: 1em;
}

span.employment_type_info.worktimepercent_description {
    margin-bottom: 0;
}

.small.button.round,
.organisationlist .small.button,
.visiting_address_actions .small.button,
.journal_number_actions .small.button,
.organisation-information td.contactuser .small.button,
.organisation-information td.leaderuser .small.button,
.organisation-information #filepreview-logopicture .small.button,
.memberlist .small.button:not(.acceptbutton, .rejectbutton) {
    border-radius: 50%;
    padding: 0;
    height: 4em;
    width: 4em;
}

div#organisationlist {
    height: /*100vh;*/ 70vh;
}

#organisationlisttablecontainer {
    left: 3rem;
    position: absolute;
    height: 70vh;
    overflow: auto;
    /*border: 2px solid black;*/
    width: calc(100vw - 6rem);
}

#organisationlisttable {
    margin-top: 0;
    max-height: 70vh;
    width: 100%;
    table-layout: inherit;
    overflow-wrap: break-word;
    display: table;
}

#organisationlisttable thead {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 20;
    box-shadow: 0px 1px rgba(143, 143, 143, 0.25);
}

#userlistbutton {
    margin: 0 0.4rem 2rem 0;
    float: right;
}

div.organisation-section:not(.journal_numbers),
div.editorganisationcontainer {
    overflow-x: auto;
}

table.organisationinfo,
table.editorganisation,
table.employeeinfo,
table.editemployee,
table.checkorganisationinfo {
    width: 100%;
    table-layout: inherit;
    overflow-wrap: break-word;
    display: table;
}

table .visibility {
    text-align: right;
}

#usergroups tr.level-2 td:first-child {
    padding-left: 2em;
}

#usergroups tr.level-3 td:first-child {
    padding-left: 4em;
}

#usergroups tr.level-4 td:first-child {
    padding-left: 6em;
}

#usergroups tr.level-5 td:first-child {
    padding-left: 8em;
}

#usergroups tr.parentgroup td:first-child::before {
    content: "\f0d7";
    font-family: FontAwesome;
    display: inline;
}

#usergroups tr.parentgroup.active td:first-child::before {
    content: "\f0d8";
    font-family: FontAwesome;
    display: inline;
}

.simpleusersearchform {
    margin-top: 1em;
    margin-bottom: 2em;
}

.simpleusersearchform label {
    margin-top: 0;
}

span.italics {
    font-style: italic;
}

.percentsign {
    position: relative;
    display: inline-block;
    width: 100%;
}

.percentsign::after {
    content: "%";
    position: absolute;
    top: 0.25rem;
    right: 1rem;
}

.percentsign input {
    padding-right: 2rem !important;
}

.eurosign {
    position: relative;
    display: inline-block;
    width: 100%;
}

.eurosign::after {
    content: "€";
    position: absolute;
    top: 0.25rem;
    right: 1rem;
}

.eurosign input {
    padding-right: 2rem !important;
}

.organisationinfo tr td:first-of-type,
.employeeinfo tr td:first-of-type,
.editorganisation tr td:first-of-type,
.editemployee tr td:first-of-type,
.journalnumber tr td:first-of-type {
    font-weight: bold;
    color: #3f3f3f;
}

th.subtitle {
    font-size: 0.8rem;
}

table.editorganisation.backgroundinformation label {
    display: block;
}

.table-header {
    font-family: "Poppins";
    font-size: 0.9rem;
    font-weight: 700;
    color: #0A1D38;
    padding: 0.4rem 0.4rem;
    text-align: left;
}

.table-subheader {
    font-family: "Poppins";
    font-weight: 700;
    color: #3f3f3f;
    ;
    padding: 0.4rem 0.4rem;
    text-align: left;
    font-size: 0.8rem;
}

.table-row {
    padding: 0.75rem;
}

.table-label {
    font-family: "Albert Sans", Sans-serif;
    font-size: 0.8rem;
    font-weight: bold;
}

.table-header,
.table-subheader,
.table-row {
    border-bottom: solid 1px rgba(143, 143, 143, 0.25) !important;
    border-left: 0;
    border-right: 0;
}

.coaching_unit_options {
    display: flex;
    flex-wrap: wrap;
}

ul.servicedescriptions {
    margin-bottom: 0;
}

ul.coaching_units {
    list-style: disc;
    padding-left: 1rem;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.5rem;
    row-gap: 0.5rem;
}

ul.coaching_units li {
    width: calc(33% - 1.5rem);
}

p.additionalinfo {
    margin-bottom: 0;
    font-style: italic;
    margin-top: 2em;
}

table.organisation-methods tr td:first-child {
    width: 50%;
}

tr.crm_coaching_units,
tr.crm_servicedescription_category,
tr.crm_organiser,
tr.crm_service_sectors,
tr.crm_evaluation_systems,
tr.crm_qa_systems,
tr.crm_client_system,
tr.crm_feedback_systems {
    border-bottom: none;
}

#confirm_organisation_info {
    float: right;
    margin-right: 0.4rem;
}

#confirm_organisation_info i.fa-check-circle {
    text-align: right;
    color: #7DC9BB;
}

#confirm_organisation_info:hover i.fa-check-circle {
    color: #36B39D;
}

.confirminfoformactions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.organisationtabnav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.organisationtabnav.reverse {
    flex-direction: row-reverse;
}

.organisationtabnav .nexttab {
    margin-right: 0.4rem;
}

#memberlisttable,
#usergrouptitles,
#user-list {
    display: block;
}

div.memberlistrow {
    height: 100vh;
}

div.memberlisttablecontainer {
    left: 3rem;
    position: absolute;
    height: 70vh;
    overflow: auto;
    width: calc(100vw - 6rem);
}

#memberlisttable {
    margin-top: 0;
    width: 100%;
    table-layout: inherit;
    overflow-wrap: break-word;
    display: table;
    max-height: 70vh;
    overflow: auto;
}

#memberlisttable thead {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 20;
    box-shadow: 0px 1px rgba(143, 143, 143, 0.25);
}

#upbuttoncontainer {
    right: 3rem;
    bottom: 4.5rem;
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: 0;
    position: fixed;
}

#upbuttoncontainer #upbutton {
    position: relative;
    font-size: 1.5rem;
    display: block;
    width: 3rem;
    height: 3rem;
    border: 7px solid #7DC9BB;
    border-radius: 50%;
    color: #7DC9BB;
    background-color: #FFFFFF
}

#upbuttoncontainer #upbutton:hover {
    color: #36B39D;
    border-color: #36B39D;
}

#upbuttoncontainer #upbutton i {
    color: #7DC9BB;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#upbuttoncontainer #upbutton:hover i {
    color: #36B39D;
}

input[type="submit"].small.button {
    padding-bottom: 4px;
    /* makes input look more similar to a.small.button */
}

.state_notify_message h3 {
    margin-top: 1rem;
}

a.button.restore {
    background-color: #F8A674;
}

a.button.restore:hover {
    background-color: #F68F51;
}

.restorememberform {
    margin: 1rem 0 !important;
}

.restorememberform label {
    margin-top: 0;
}

.restorememberform div {
    padding: 0;
}

table.personyeartable {
    display: block;
}

.personyearsummary .input-information {
    margin-bottom: 3rem;
}

.usergrouplistitem .usergroup_description {
    display: block;
    font-style: italic;
}

.fancybox-content {
    height: max-content !important;
}

.table-header h3,
.table-subheader h4 {
    margin-bottom: 0;
}

table.editorganisation label,
table.editemployee label {
    font-size: inherit;
    margin-top: 0;
    margin-bottom: 0;
}

table.editorganisation .tooltip-item label,
table.editemployee .tooltip-item label,
#messageform .tooltip-item label {
    display: inline;
}

table.organisationinfo tr#visitingaddress-primary label {
    display: inline;
}

table.editnotificationemail p {
    margin-bottom: 0;
}

@media (min-width: 1281px) {
    .fancybox-content {
        width: auto !important;
    }
}

@media (max-width: 480px) {
    .fancybox-content #loginrequired h2 {
        margin-bottom: 2em;
    }
}

.sol-selection {
    max-height: 15rem;
}

.filelist p {
    margin-bottom: 1rem;
}

.filelist-actions {
    display: flex;
    flex-wrap: wrap;
}

.filelist-actions a.button {
    margin-top: 0;
}

.filelist-actions a.button:last-child {
    margin-right: 0;
}

.filelist-actions a.button i.fa {
    vertical-align: middle;
}

body.staffreport section.main header,
body.staffreport section.main>div>div:not(.reportform) {
    max-width: 58rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

body.staffreport #parentnavi>div {
    padding-left: 0;
}

div.input-information p {
    margin-bottom: 1em;
}

div.employmentlist,
div.absencelist {
    overflow: auto;
}

div.employmentlist>table,
div.absencelist>table {
    margin-top: 0;
    width: 100%;
    table-layout: inherit;
    overflow-wrap: break-word;
    display: table;
    overflow: auto;
}

.websitefield {
    display: flex;
    height: 100%;
}

.websitefield input {
    height: fit-content;
    align-self: center;
}

.websitefield a.button {
    height: auto !important;
    margin: 0.5rem 0 0.5rem 0.5rem;
}

#websitefield_wrapper>a.button {
    float: right;
    margin-right: 0;
}

a.small.button>i.fa-lg,
a.small.button>i.fa-2x {
    vertical-align: middle;
}

/* Styles for messaging */
.messagelistcontainer {
    overflow-x: auto;
}

.messagelisttable {
    width: 100%;
    table-layout: inherit;
    overflow-wrap: break-word;
    display: table;
}

#messageform {
    width: 100%;
    margin: 0;
}

.messagelistpagenav>a.selected, .pagination-button.active {
    background-color: rgba(125, 201, 187, 0.6);
}

#paginationdiv {
    display: flex;
    flex-wrap: wrap;
}

.messagedetails {
    margin-bottom: 3rem;
}

.messagedetails>p {
    margin-bottom: 0.5rem;
}

div.messageattachments {
    display: flex;
    flex-wrap: wrap;
}

div.messageattachmentcontainer {
    position: relative;
    margin-bottom: 1rem;
    padding-right: 1rem;
}

div.messageattachment {
    border: 1px solid lightgrey;
    border-radius: 10px;
    padding: 1rem;
    height: 100%;
}

div.messageattachment img {
    width: 100%;
}

div.messageattachment p {
    margin-bottom: 1rem;
}

div.messageattachment a i.fa {
    vertical-align: middle;
}

.messagedetails .row {
    margin-bottom: 0.5rem;
}

.messagedetails .label {
    font-family: "Albert Sans", Sans-serif;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.recipientinfolist,
.senderinfolist {
    display: flex;
    flex-wrap: wrap;
}

.recipientinfo,
.senderinfo {
    padding: 0.1rem 0.5rem 0.1rem 0.5rem;
    border-radius: 1rem;
    box-shadow: 2px 2px 2px 0px #aaa, 0px 0px 1px 1px #aaa;
    margin: 0 0.7rem 0.7rem 0;
}

#showrecipients {
    vertical-align: middle;
    margin-top: 0;
}

#showrecipients i.fa {
    vertical-align: middle;
}

.messagesearchcontainer {
    /*margin: 1rem 1rem 0.5rem 0;*/
    margin: 0;
    height: fit-content;
    position: relative;
}

#messagesearchcontainer {
    margin: 0;
    height: fit-content;
}

.messagesearchcontainer i {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translate(-50%, -50%);
}

.messagesearchcontainer input {
    padding: 0 1rem 0 2rem !important;
    border-radius: 0.5rem !important;
    border: 0.2em solid #7DC9BB !important;
    box-shadow: 0.2rem 0.2rem 0 0 #0A1D38 !important;
    height: 2.75rem !important;
}

.messagelistoptions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.messagelistoptions a.button {
    margin: 0 0 1rem 0;
}

/* Styles for document archive */
.category-documentarchive {
    display: flex;
    flex-wrap: wrap;
}

.category-documentarchive .documentlist {
    border-radius: 1rem;
    border: #0A1D38 solid 0.2em;
    margin-bottom: 2rem;
    padding: 1.5rem;
    box-shadow: #7DC9BB 0.3em 0.3em;
    height: calc(100% - 2em);
}

.category-documentarchive .category-file {
    position: relative;
}

.fileproperties pre {
    margin-bottom: 0;
    display: inline-block;
    margin-right: 1rem;
}

.fileproperties a.copy {
    display: inline-block;
    margin: 0 0 0.2rem 0;
    vertical-align: middle;
}

.fileproperties a.copy i.fa {
    vertical-align: middle;
}

#documentarchiveimport {
    margin-bottom: 2rem;
}

#loader-overlay {
    display: none !important;
}

.requireduserinformation .image-temp {
    width: 100px;
}

.category-documentarchive img {
    border-style: none;
    margin: 0 auto;
}

.pagelist-thumbnails {
    display: flex;
    flex-wrap: wrap;
}

#siblingnavi a.button {
    text-decoration: none;
}

.output-image img {
    border-style: none;
    margin: 0 auto;
}

span.requestpassworformerror {
    background-color: #ffffff;
    border: 1px dotted #FFCC33;
    padding: 4px;
}

#wikipagelist-title h3 {
    margin-bottom: 0;
}

input#wiki-pagetitle {
    color: #000000;
}

#pagepropertiesdiv header h2 {
    margin-bottom: 10px;
}

#copy-settings select[name="sourceid"] img {
    padding-left: 5px;
}

.information-icon {
    border: none;
    vertical-align: middle;
    margin: 0px 4px;
}

option.pagestatus_underconstruction {
    color: red;
}

option.pagestatus_published {
    color: green;
}

#elementinputsmenu>div {
    background-color: #333;
    color: #fff;
}

#formelements {
    min-height: 200px;
}

#header div.logo img {
    padding: 5px;
    vertical-align: middle;
}

.crm_map {
    height: 40vh;
}

.modulesettings-documentarchive {
    position: relative;
}

.printfoldercategory {
    margin: 0;
}

.css-display-none {
    display: none;
}

.css-display-block {
    display: block;
}

.css-display-inline {
    display: inline;
}

.css-display-inline-block {
    display: inline-block;
}

.css-visibility-hidden {
    visibility: hidden;
}

.css-position-relative {
    position: relative;
}

.css-position-absolute {
    position: absolute;
}

.css-nomargin {
    margin: 0;
}

.css-nopadding {
    padding: 0;
}

.css-noborder,
.css-border-none {
    border: none;
}

.css-float-right {
    float: right;
}

.css-clear-none {
    clear: none;
}

.css-page-break-after-always {
    page-break-after: always;
}

.css-page-break-before-always {
    page-break-before: always;
}

span.highlight {
    background-color: #FFFF00 !important;
}

ul.search li.search_preview {
    margin: 1rem 0;
}

#searchdiv a.search_return {
    margin-bottom: 2.5rem;
}

#uploadrow #fileuploadfield {
    margin-left: 1.5rem;
    width: calc(100% - 1.5rem);
}

#crm_apikey {
    display: block;
}

#regenerateapikey,
#confirmregenerateapikey {
    background-color: #F8A674 !important;
}
#regenerateapikey:hover, #confirmregenerateapikey:hover {
    background-color:#F68F51 !important;
}

#organisationlist-loader {
    display: inline-block;
    -webkit-animation: fa-spin 1.5s infinite linear !important;
    animation: fa-spin 1.5s infinite linear !important;
}
#organisationlist-adminoptions {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
}

#organisation-members {
    height: 70vh;
}

#messageform input[type="file"], #messageform .content_container_div {
    margin-bottom: 2rem;
}

a.small.button:not(.round, .userform, .memberlist > .small.button) {
    /* Sallitaan rivinvaihdot painikkeiden teksteissä */
    white-space: normal;
    white-space-collapse: collapse;
    height: auto;
    line-height: normal;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}
.organisation-information #filepreview-logopicture .small.button {
	white-space: normal;
    white-space-collapse: collapse;
    height: auto;
    line-height: normal;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

#recipientsfield_group_options_container ,
#recipientsfield_user_options_container {
    position: relative;
    margin-bottom: 1rem;
}
#recipientsfield_group_options,
#recipientsfield_user_options {
    display: none;
    position: absolute;
    z-index: 1000;
    width: 100%;
    max-height: 10rem;
    overflow-y: auto;
    background-color: white;
    border: 1px solid rgba(143, 143, 143, 0.25);
    border-radius: 1rem;
}
#recipientsfield_group_options > div,
#recipientsfield_user_options > div {
    padding: 0rem 1rem;
}
#recipientsfield_group_options > div:hover,
#recipientsfield_user_options > div:hover {
    background-color: rgba(225, 225, 225, 0.75);
}
#messageform .label {
    font-family: "Albert Sans", Sans-serif;
    font-weight: bold;
    margin: 1.5rem 0 0.5rem 0;
    font-size: 0.9rem;
}
#messageform .sublabel {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
#recipientsfield_selected {
    margin-bottom: 2rem;
}
#recipientsfield_selected > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1rem;
}
#recipientsfield_selected span, #recipientsfield_selected a {
    margin: 0 1rem 0 0;
}
#memberlist .userinformationstatus.complete {
    color: #008080;
}
#memberlist .userinformationstatus.missing {
    color: #d56100;
}
#memberlist .userinformationstatus.unknown {
    color: #a0a0a0;
}
#memberlist td.information_status {
    vertical-align: middle;
    overflow: visible;
}
.userinformationstatus_hoverbox {
    display: none;
    position: absolute;
    background-color: white;
    z-index: 200;
    color: black;
    border: 0.2em solid #8ae0d2;
    border-radius: 1em;
    line-height: 1.65;
    font-family: "Albert Sans", Sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.25rem 2.5rem 0.25rem 0.5rem;
    max-width: inherit;
}
.userinformationstatus_hoverbox ul {
    margin-bottom: 0;
}
#checkrequireduserinfo_status {
    margin: 1rem 0 1rem 0;
}
.documentarchive_import_domains ul {
    margin-bottom: 0;
}
div.documentarchive_import {
    margin-bottom: 2rem;
}