/*General styles*/

@import url(https://fonts.googleapis.com/css?family=Karla:300);


:root{

--llcgreen: rgb(201,235,191);
--lcgreen: rgb(143,212,122);
--cgreen: rgb(90,186,60);
--backgrey: #F2F2F2;
--middlegrey: rgb(100,100,100);
--textgrey: rgb(64,64,64);
--warning: rgb(255,80,80);
--PiterJellesFullBlue: #003d6e;
--PiterJellesBackBlue: #e0e8ef;
--PiterJellesPinkie: #da006a;
}

*{
    font-family: 'Karla', sans-serif;
    font-size: 14pt;
    margin: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    background-color: var(--backgrey);
    height: 100%;
}

/*flexate the design*/

body {
    display: flex;
    flex-flow: row nowrap;
}

#sidebar {
    flex: 1 70px;
    min-width: 70px;
    max-width: 70px;
    height: 100%;
    padding-left: 5px;
}

#wrapper {
    flex: 14 auto;
    display: flex;
    flex-flow: column nowrap;
    border-bottom-right-radius: 10px;
}

#main {
    height: 100%;
}

footer {
    align-self: flex-end;
}

/*Division styling*/

#sidebar {
    background-color: var(--cgreen);
    /*border-right: 5px rgb(90,186,60) solid;
    box-shadow: 0 20px 20px 0 rgba(0,0,0,.1);*/
    z-index: 1;
}

header {
    background-color: var(--cgreen);
    text-align: center;
    z-index: 2;
    padding: 20px 0px;
}

header h1 {
    font-weight: normal;
    font-size: 20pt;
    color: white;
}

header img {
    vertical-align: middle;
}

#main {
    /*box-shadow: 0 20px 50px 0 rgba(0,0,0,.1);*/
    position: relative;
}

#main:not(.scroll) {
    overflow-y: hidden;
}

footer {
    width: 100%;
    text-align: right;
    border-top: 1px var(--cgreen) solid;
    padding: 10px;
}

footer a {
    background-color: var(--backgrey);
    color: var(--cgreen);
    font-weight: normal;
    padding: 5px;
    border-radius: 7px;
}

footer a:hover {
    color: var(--warning);
}

/*Element styling*/

/*General*/

a {
    text-decoration: none;
    color: black;
}

h2 {
    color: var(--cgreen);
    font-size: 18pt;
    margin-bottom: 5px;
}

h3 {
    font-weight: normal;
}

input, select, textarea {
    border: 0px;
    padding: 15px 20px;/*10px;*/
    border-radius: 7px;
    outline: 0;
}

input.inline {
    border: 1px solid black;
    padding: 5px;
}

input.text, input[type=search] {
    border: 1px solid white;
}

input.text:focus, input[type=search]:focus {
    border: 1px solid var(--cgreen);
}

section {
    margin: 50px 100px 0px 100px;
    border-radius: 10px;
}

.button{
    background-color: white;
    border: 1px solid var(--cgreen);
    color: var(--cgreen);
    cursor: pointer;
    padding: 15px 30px;
    text-decoration: none;
    text-align: center;
    border-radius: 7px;
    outline: 0;
}

.button.warning{
    border: 1px solid var(--warning);
    color: var(--warning);
}

#functionTable .button,
#functionTable .button:hover {
    background-color: white;
}

.button:hover{
    background-color: var(--lcgreen);
    color: white;
    border-color: var(--lcgreen);
}

.button.selected{
    background-color: var(--cgreen);
    color: white;
}

#buttons, #resultNavigator {
    background-color: var(--backgrey);
    padding: initial;
    display: flex;
    flex-flow: row-reverse wrap;
    justify-content: space-between;
    gap: 5px;
}

#buttons select{
    cursor: pointer;
    max-width: 300px;
}

.circleButton {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    padding: 7px;
    display: inline-block;
    font-size: 14pt;
    margin-left: 10px;
    color: var(--cgreen);
    border: 1px solid var(--cgreen);
    cursor: pointer;
}

#buttons .circleButton{
    width: 54px;
    height: 54px;
    border-radius: 27px;
    overflow: hidden;
}

.circleButton img{
    width: 100%;
}

.circleButton.warning{
    color: var(--warning);
    border: 1px solid var(--warning);
}

.circleButton:hover, .circleButton.selected {
    color: white;
    background-color: var(--cgreen);
}

.circleButton:hover img, .circleButton.selected img {
    filter:brightness(0) invert(1);
}

#buttons .circleButton:hover img, #buttons .circleButton.selected img {
    filter: brightness(0) invert(1);
}


.circleButton.warning:hover, .circleButton.warning.selected {
    color: white;
    background-color: var(--warning);
}

#warningSection {
    position: absolute;
    top: 0;
    z-index: 10;
    width: calc(100% - 200px);
    background-color: white;
    color: var(--warning);
    border-radius: 7px;
    padding: 30px;
    box-shadow: 0px 0px 10px 1px #bbb;
    display: none;
    max-height: 500px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.basicGreenFrontColor {
    color: rgb(90,186,60);
}

.orangeFrontColor{
    color: orangered;
}

/*Division specific*/

#sidebar div:first-of-type {
    width:  100%;
    display: block;
    background-color: var(--cgreen);
    padding-top: 10px ;
    margin-left: -2.5px;
}

#sidebar div:first-of-type img{
    display: block;
    margin: auto;
    width: 70%;
    filter: drop-shadow(1px -1px 0 white)
                    drop-shadow(-1px 1px 0 white)
                    drop-shadow(1px 1px 0 white)
                    drop-shadow(-1px -1px 0 white);
}

#sidebar a:not(first-of-type){
    display: block;
    text-align: center;
    color: rgb(90,186,60);
    font-size: 1.1em;
}

#sidebar nav a:first-of-type{
    margin-top: 20px;
}

#sidebar nav a {
    color: white;
    text-align: left;
    display: block;
    width: 100%;
    margin-left: -2.5px;
    padding: 15px 18px;
    font-size: 16pt;
    text-transform: uppercase;
    position: relative;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    transition: all 0.3s ease;
}

#sidebar nav a span{
    position: absolute;
    top: 0;
    left: 65px;
    background-color: var(--backgrey);
    padding: 22px 20px;
    display: none;
    box-shadow: 20px 0px 20px 0 rgba(0,0,0,.1);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

#sidebar nav a:hover span{
    display: block;
}

#sidebar nav a img{
    width: 90%;
    display: block;
    margin: auto;
    filter:brightness(0) invert(100%);
}

#sidebar nav a:hover img, #sidebar nav a.focus img{
    filter:none;
}

#sidebar nav .focus, #sidebar nav a:hover, #sidebar nav a.focus:hover {
    background-color: var(--backgrey);
    color: var(--cgreen);
    padding: 20px 18px;
    margin-left: 0px;
}

:not(#login) #sidebar p:last-of-type {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 10pt;
    color: white;
}

#home section {
    background-color: white;
    text-align: center;
    padding: 50px 0px;
}

#home section a {
    color: rgb(90,186,60);
    text-decoration: none;
}

#buttons .button, #buttons div {
    height: 54px;
}

#result{
    padding: 0px;
    overflow-y: auto;
    max-height: calc(100% - 220px);
    background-color: var(--backgrey);
    border-radius: 10px;
}

#result #functionTable thead th {
    text-align: left;
    padding-bottom: 15px;
    padding-left: 5px;

}

#result h4{
    margin: 50px 0px;
}

#more_info th{
    font-weight: 700;
    border-bottom: 2px solid white;
}

#more_info tr:first-child th:first-child{
    text-align: left;
}

#more_info tbody tr:not(:last-child) td{
    border-bottom: 1px solid white;
}

#more_info tbody td:not(:first-child){
    text-align: center;
}

table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

table td{
    padding: 10px;
}

table td.buttonsTD{
    text-align: right;
    min-width: 80px;
}

#loader{
    border: 3px solid ghostwhite;
    border-top: 3px solid #5aba3c;
    border-radius: 50%;
    width: 31px;
    height: 31px;
    animation: spin 2s linear infinite;
    margin:auto;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}


/*Login specific styles*/

body#login {
    width: 550px;
    height: auto;
    box-shadow: 0 20px 50px 0 rgba(0,0,0,.1);
    margin: 200px auto 0px auto;
    background-color: white;
    flex-flow: row wrap;
    border-radius: 10px;
}

#login header {
    background-color: var(--cgreen);
    color: white;
    flex: 1 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 10px 0px;
}

#login header img{
    vertical-align: middle;
}


#login #sidebar {
    flex: 1 100px;
    min-width: 0px;
    box-shadow: none;
    width: 100px;
    height: auto;
    border-bottom-left-radius: 10px;
    padding: 0px;
}

#login #sidebar img {
    display: block;
    margin: auto;
    width: 90%;
    filter: drop-shadow(1px -1px 0 white)
                    drop-shadow(-1px 1px 0 white)
                    drop-shadow(1px 1px 0 white)
                    drop-shadow(-1px -1px 0 white);
}

#login #wrapper {
    box-shadow: none;
    flex: 3 auto;
    background-color: var(--backgrey);
    padding: 20px;
    width: 390px;
}

#login input{
    width: 100%;
    margin: 4px 0;
}

#login .button {
    margin-top: 20px;
    background-color: var(--cgreen);
    color: white;
}

#login .button:hover{
    background-color: var(--lcgreen);
}

#login #message, .warning {
    color: rgb(255,80,80);
    font-weight: bold;
}

#login #resetSecret div{
    text-align: center;
}

.green {
    color: #5aba3c;
    font-weight: bold;
}

.warningBack {
    background-color: rgb(255,80,80);
}

.warningBorder{
    border: 1px solid rgb(255,80,80);
}

#login #message p{
        padding: 10px;
}

/*Result table specific styles*/
#result table .tableHeaderRow th:first-child, #result table .tableSeparationRow th:first-child{
    text-align: left;
}

.tableSubRow, .tableHideRow{
    display: none;
}

.tableFocusRow td{
    background-color: white;
    border-bottom: 1px var(--backgrey) solid;
}

table tr:first-child td:first-child, .tableFocusRow:first-child td:first-child{
    border-top-left-radius: 10px;
}

table tr:first-child td:last-child, .tableFocusRow:first-child td:nth-last-child(1){
    border-top-right-radius: 10px;
}

table tr:last-child td:first-child, .tableFocusRow:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child, .tableFocusRow:last-child td:nth-last-child(1) {
    border-bottom-right-radius: 10px;
}

.tableTopBorder {
    border-top: 1px white solid;
}

.tableTopLeftBorder {
    border-left: 1px white solid;
}

.tableTopRightBorder {
    border-right: 1px white solid;
}

.tableLeftBorder {
    border-left: 1px var(--backgrey) solid;
}

.tableRightBorder {
    border-right: 1px var(--backgrey) solid;
}

.tableWarning {
    color: rgb(255,80,80);
}

/*Matchlist/Logging/Freshmen/Accounts specific styles*/

#matchlistTableHeader, #logTableHeader, #freshTableHeader, #ignoreTableHeader, #identityChangeTableHeader,
#dashboard section thead td, #tasks section thead td, #functions section thead td, #changelog section thead td, #ignore section thead td,
#accountsTableHeader, #logsTableHeader{
    background-color: var(--backgrey);
    margin-bottom: 0;
    padding: 10px 0px 0px 0px;
    clear: both;
}

#matchlistTableHeader table, #logsTableHeader table{
    border-collapse: collapse;
}

#matchlistTableHeader.hideContent table th, #matchlist .hideContent tr:first-child .tableTopLeftBorder,
#logsTableHeader.hideContent table th, #logging .hideContent tr:first-child .tableTopLeftBorder{
    border-color: var(--backgrey);
    color: var(--backgrey);
}

#matchlistTableHeader th, #freshTableHeader th, #ignore section th,
#dashboard section thead td, #tasks section th, #functions section th, #changelog section thead td,
#logging section th, #accounts section th{
    padding: 10px;
}

#functions section#result, #tasks section#result, #matchlist section#result, #logging section#result, #freshmen section#result,
#accounts section#result, #ignore section#result{
    margin-top: 5px;
}

#matchlist #result thead, #logging #result thead, #freshmen #result thead{
    display: none;
}

#freshmen #result table a.button{
    background-color: var(--cgreen);
}

#freshmen #result table a.button:hover{
    background-color: var(--lcgreen);
}

#matchlist #result tr:first-child .tableTopLeftBorder,
#logging #result tr:first-child .tableTopBorder{
    border-top: 1px solid white;
}

#logging #LogsTable a.referToAccount{
    text-decoration: underline;
}

#logging #LogsTable a.referToAccount:hover{
    text-decoration: none;
}

#matchlist #result tr:hover{
    cursor: pointer;
}

#matchlist #result tr:hover td{
    color: white;
    background-color: rgb(90,186,60);
}

#matchlist #result tr td:first-of-type:not(.tableWarning){
    color: rgb(90,186,60);
}

#matchlist #result table .tableHeaderRow th, #logging #result table .tableHeaderRow th, #freshmen #result table .tableHeaderRow th{
    padding-top: 30px;
}

#matchlist #result .tableFocusRow, #matchlist #result .tableFocusRow td,
#freshmen #result .tableFocusRow, #freshmen #result .tableFocusRow td{
    text-align: center;

}

#matchlist #result .tableFocusRow td:nth-of-type(2),
#freshmen #result .tableFocusRow td:nth-of-type(3),
#freshTableHeader th:nth-of-type(3),
#accountsTableHeader th,
#logsTableHeader th,
#functionsTableHeader th,
#ignoreTableHeader th,
#identityChangeTableHeader th
{
    text-align: left;
}

/*.tableLeaveQuantity {
    text-align: center;
    border-right: 1px white solid;
    border-left: 1px white solid;
}*/

#accounts #result .tableFocusRow:hover td,
#logging #result .tableFocusRow:not(.explanationRow):hover td,
#matchlist #result .tableFocusRow.tableExpand td:hover,
#access #result .tableFocusRow:hover td{
    cursor: pointer;
    color: var(--cgreen);
}


#matchlist #result td:not(:nth-of-type(1)):not(:nth-of-type(2)):not(:nth-of-type(4)):not(:nth-of-type(8)),
#freshmen #result td:nth-of-type(5){
    width: 72px;
}

#matchlist #result td:nth-of-type(1),
#freshmen #result td:nth-of-type(1),
#freshmen #result td:nth-of-type(6){
    width: 32px;
    text-align: center;
}

#freshmen #result td:nth-of-type(4){
    width: 240px;
}

#matchlist #result td:nth-of-type(4), #matchlist #result td:nth-of-type(8),
#freshmen #result td:nth-of-type(2), #freshmen #result td:nth-of-type(6)
{
    width: 150px;
}

#freshmen #result {
    max-height: calc(100% - 270px);
}

#freshmen #result .pwCover {
    display: none;
}

/*#freshmen #result td:nth-last-of-type(3):hover span:not(.pwCover) {
    display: none;
}

#freshmen #result td:nth-last-of-type(3):hover .pwCover {
    display: inline;
}*/

#freshmen #filters, #freshmen #filters > div{
    display: flex;
    flex-flow: row nowrap;
    padding: 0;
    background: none;
    justify-content: space-between;
    height: 55px;
}

[name='groupFilter']{
    margin-left: 3px;
}

[name='locationFilter']{
    margin-right: 3px;
}

#locationFilter .button, #groupFilter .button{
    display: none;
}

.dropdown[name='groupFilter']{
    display: none;
}

#freshmen #filters .button:not(:hover){
    background-color: var(--cgreen);
}

/*#freshmen #filters a.button{
    padding: 10px 20px;
    border: 1px solid var(--cgreen);
    background-color: white;
    color: var(--cgreen);
    margin-right: 10px;
    margin-bottom: 10px;
}

#freshmen #filters .dropdown .selected,
#freshmen #filters a.button:hover{
    color: white;
    background-color: var(--cgreen);
}*/

/*alterMatch, logDetail table specific styles*/
#matchlist #alterMatch h4, #matchlist #alterMatch h4+p,
#logging #logDetail h4, #logging #logDetail h4+p  {
    display: block;
    float: left;
}

#matchlist #alterMatch h4+p+p, #logging #logDetail h4+p+p {
    clear: both;
}


#matchlist #alterMatch table, #logging #logDetail table {
    width: 100%;
}

#matchlist #alterMatch :not(#matchTitle) td, #logging #logDetail :not(#matchTitle) td  {
    height: 56px;
}

#matchlist #alterMatch a[href="#matchDetailForward"], #logging #logDetail a[href="#logDetailForward"]{
    float: right;
}

#matchlist #alterMatch #matchDetails tr:first-of-type td, #matchlist #alterMatch #matchDetails td:first-of-type,
#logging #logDetail #logDetails tr:first-of-type td, #logging #logDetail #logDetails td:first-of-type{
    font-weight: bold;
}

#logging #result .extraInfoFullDescription, #logging #result .extraInfoException{
    display: none;
}

#logging #resultNavigator .circleButton{
    padding: 4px;
    text-align: center;
    margin-left: 0px;
}

#resultNavigator .pageNumber{
    color: var(--cgreen);
    margin: 0px 20px;
    border-radius: 16px;
    padding: 4px 10px;
    border: 1px solid var(--backgrey);
    min-width: 32px;
    display: inline-block;
    text-align: center;
}

#resultNavigator .pageNumber.selected, #resultNavigator .pageNumber:hover{
    background-color:initial;
    border-color: var(--cgreen);
}

#logging #result .explanationRow td {
    background-color: var(--backgrey);
    border-bottom: 1px solid white;
}

#logging #result .explanationRow td:first-child{
    border-left: 2px solid white;
}

#logging #result .explanationRow td:last-child{
    border-right: 2px solid white;

}

#freshmen #result [href*="print"], #freshmen #result [href*="mail"]{
    padding: 5px;
    border-radius: 20px;
    margin-top: 1px;
}

#freshmen #filters [href*="print"], #freshmen #filters [href*="mail"],
#access #editor [href="#save"], #access #editor [href="#cancel"]{
    width:54px;
    height:54px;
    border-radius: 26px;
    margin-left:3px;
    margin-right:3px;
    padding: 13px 15px;
}

#freshmen #warningSection a.button{
    float: right;
    margin-left: 15px;
    padding: 10px;
    border-radius: 25px;
    width: 50px;
    height: 50px;
}
#freshmen #result table .button {
    display: inline-block;
    height: 36px;
}

#freshmen #result table .tableHeaderRow .button {
    vertical-align: middle;
}

#freshmen #result table .tableHeaderRow th{
    font-size: 17pt;
    color:rgb(90,186,60);
}

#freshmen #result table .tableSeparationRow th{
    height: 80px;
}

#freshmen #result table .tableSeparationRow th:not(:first-child):last-child{
    text-align: right;
}

/*Dashboard/Tasks/changelog/ignore/access specific styles*/

#dashboard section,
#tasks section, #functions section, #changelog section, #ignore section{
    background-color: var(--backgrey);
    padding: 0px;
}

#dashboard section td,
#tasks section td, #functions section td, #changelog section td,
#ignore section td, #access #result td{
    border-bottom: 1px solid var(--backgrey);
    background-color: white;
    height: 50px;
}

#dashboard section a,
#accounts section:not(#buttons) a,
#changelog section a,
#tasks section a:not(.circleButton){
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid;
    border-radius: 15px;
}

#dashboard #main, .scroll{
    overflow-y:scroll;
}

#dashboard section a:hover,
#accounts section:not(#buttons) a:not(.circleButton):hover,
#changelog section a:hover,
#tasks section a:not(.circleButton):hover{
    color: var(--cgreen);
}

#dashboard #main{
    overflow-y:scroll;
}

#functions .selectTable tr:last-child td{
    border-bottom: 0px;
}

#functions .selectTable td:hover,
#functions .selectTable .selected {
    cursor: pointer;
    background-color: rgb(90,186,60);
    color: white;
}

#changelog #result{
    max-height: 670px;
    overflow-y: scroll;
}

#ignore #intro {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

#ignore #intro p{
    flex: 0 0 60%;
    padding: 4px;
}

#ignore .circleButton{
    margin: 0;
} 

#ignore #result{
    max-height: calc(100% - 243px);
}

#ignore #result td:last-of-type{
    min-width: 100px;
}

#ignore #result [href='#editComment'], #ignore #result [href='#saveComment']{
    margin-right: 10px;
    vertical-align: top;
}

#ignore #result .ignoreComments {
    display: inline-block;
    width: 80%;

}

#ignore #result [name='comments']{
    resize: none;
    width: 80%;
    height: 90px;
    border: 1px solid var(--cgreen);
    padding: 5px;
}

#access #buttons{
    display: none;
}

#access #editor th{
    text-align: left;
    padding-left: 20px;
    padding-top: 30px;
}

#access #addUser td{
    padding: 0;
}

#access #result{
    margin-top: 10px;
}

#access #editButtons .button{
    display: none;
    padding: 12.5px 14px;
    background-color: var(--cgreen);
    border: 1px solid var(--cgreen);
}

#access #editor{
    position: relative;
}

#access #editor #messageBox{
    position: absolute;
    width: 100%;
    padding: 20px;
    color: var(--cgreen);
    background-color: white;
    z-index: 1;
    border-radius: 7px;
    display: none;
    transition: all;
}

#access #editor .button.warning{
    background-color: var(--warning);
    border: 1px solid var(--warning);
}

#access #editor .button:not(.warning):hover{
    background-color: var(--lcgreen);
}

#access #editor .button.warning:hover{
    background-color: white;
    border-color: var(--warning);
}

#access #editor .button:hover,
#access #editor .button.warning:hover{
    background-color: white;
    filter: none;
}

#access #editor .button img{
    filter: brightness(100);
}

#access #editor #addUser{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    max-height: 56px;
    position: relative;
}

#access #editor #addUser #editButtons{
    width: 50px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: right;
}

[name=userSearch] {
    border: 1px solid white;
}

[name=userSearch]:focus {
    border: 1px solid var(--cgreen);
}

[name=userSearch].chosen{
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#userSearchContainer{
    display: flex;
    flex-flow: column;
    display: none;
    overflow-y: auto;
    scrollbar-width: thin;
    max-height: 200px;
    position: absolute;
    z-index: 1;
    border-radius: 5px;
    border: 1px solid var(--cgreen);
    background-color: white;
    width: 350px;
    top:56px;
}

#userSearchContainer div{
    flex: 0 0 42px;
    color: var(--cgreen);
    cursor: pointer;
    padding: 10px;
    flex-flow: row nowrap;
    display: flex;
    align-items: center;
}

#userSearchContainer div.divider{
    color: var(--middlegrey);
    cursor: initial;
    text-align: center;
}

#userSearchContainer div:not(:first-child){
    border-top: 1px solid var(--cgreen);
}

#userSearchContainer div:not(.divider):hover{
    background-color: var(--cgreen);
    color: white;
}


/*other stuff */

.blockswitch{
  background-color: white;
  position: relative;
  border-radius: 18px;
  cursor: pointer;
  height: 38px;
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid var(--cgreen);
  width: fit-content;
}

.blockswitch .slider{
  position: absolute;
  display: block;
  top: 2px;
  width: 52px;
  height: 32px;
  background-color: var(--cgreen);
  border-radius: 16px;
  z-index: 1;
  -webkit-transition: .4s;
  transition: .4s;
}

.blockswitch .slider.one{
    left: 2px;
}

.blockswitch .slider.two{
    left: 54px;
}

.blockswitch .switchOption{
  text-align: center;
  width: 54px;
  height: 32px;
  z-index: 2;
  position: relative;
  color: var(--cgreen);
  padding: 7px;
}

.blockswitch .switchOption.selected{
    color: white;
}

.function.switchOption{

}

  .dropdown{
    width: 300px;
    display: flex;
    flex-flow: column;
    border: 1px solid var(--cgreen);
    border-radius:7px;
    background-color: white;
}

.dropdown a, .dropdown .ddTitle{
    flex: 0 0 54px;
    display: flex;
    flex-flow: row nowrap;
    text-decoration: none;
    align-items: center;
    cursor: pointer;
    padding: 0px 20px;
}

.dropdown .ddTitle span{
    padding: 10px;
}

.dropdown .ddTitle span:not(:last-child){
    flex: 0 1 100%;
}

.dropdown .ddTitle span:last-child{
    text-align: center;
    flex: 1 0 24px;
}

.dropdown .ddTitle .ddChoices{
    display: none;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dropdown.unfolded .ddTitle .ddChoices{
    white-space: normal;
}

.dropdown .ddContainer{
    flex-flow: column;
    display: none;
    overflow-y: auto;
    scrollbar-width: thin;
    max-height: 300px;
}

.dropdown.unfolded .ddContainer{
    display: flex;
}

.dropdown.unfolded .ddTitle{
    border-bottom: 1px solid var(--cgreen);
}

.dropdown.unfolded{
    align-self: flex-start;
    z-index: 1;
    box-shadow: 0px 0px 10px 1px #bbb;
}

.dropdown.unfolded span:last-child{
    transform: rotate(180deg);
}

.dropdown a{
    border-top: 1px solid var(--llcgreen);
}

.dropdown a.selected, .dropdown a:hover{
    background-color: var(--cgreen);
    color: white;
}

/*Dashboard/Contracts specific styles*/

#main h2.contractSync {
    margin: 50px 0 0 40px;
    font-weight: normal;
}

#main p.contractSync {
    margin: 20px 0 0 40px;
    color: black;
    font-weight: normal;
}

#main section.locationSection {
    margin: 50px 20px 0px 40px;
}

#main section.locationSection div.content:not(.expand) {
    display: none;
}

#main section.locationSection p.expandable:hover {
    text-decoration: underline;
    cursor: pointer;
}

#main section.locationSection div.content h3 {
    color: var(--cgreen);
    font-weight: bold;
    margin-top: 25px;
    margin-bottom: 5px;
}

#main section.locationSection div.content table thead tr th{
    text-align: left;
    padding-left: 5px;
}

#main section.locationSection div.content table thead tr th:first-child{
    padding-left: 15px;
}

#main section.locationSection div.content table .button{
    background-color: white;
}

#main section.locationSection div.content table .function.switch {
    width: 90px;
}

#main section.locationSection div.content table tr td label.function.switch .slider:before {
    height: 26px;
    width: 50px;
    left: 4px;
    bottom: 3px;
}

#main section.locationSection div.content table tr td label.function.switch input:checked + .slider:before {
    -webkit-transform: translateX(50px);
    -ms-transform: translateX(50px);
    transform: translateX(50px);
    width: 28px;
}

#main section.locationSection div.infoSign {
    display: inline;
    cursor: pointer;
    font-weight: normal;
}

#main section.locationSection td:not(.warning) div.infoSign {
    color: var(--cgreen);
}

#main section.locationSection div.infoField {
    color: black;
    background-color: var(--llcgreen);
    position: absolute;
    width: 200px;
    border-radius: 10px;
    font-weight: normal;
    padding: 3px 7px;
    box-shadow: 0 10px 20px 0 white;
    display: none;
}

  .dropdown{
    width: 300px;
    display: flex;
    flex-flow: column;
    border: 1px solid var(--cgreen);
    border-radius:7px;
    background-color: white;
}

.dropdown a, .dropdown .ddTitle{
    flex: 0 0 54px;
    display: flex;
    flex-flow: row nowrap;
    text-decoration: none;
    align-items: center;
    cursor: pointer;
    padding: 0px 20px;
}

.dropdown .ddTitle span{
    padding: 10px;
}

.dropdown .ddTitle span:not(:last-child){
    flex: 0 1 100%;
}

.dropdown .ddTitle span:last-child{
    text-align: center;
    flex: 1 0 24px;
}

.dropdown .ddTitle .ddChoices{
    display: none;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dropdown.unfolded .ddTitle .ddChoices{
    white-space: normal;
}

.dropdown .ddContainer{
    flex-flow: column;
    display: none;
    overflow-y: auto;
    scrollbar-width: thin;
    max-height: 300px;
}

.dropdown.unfolded .ddContainer{
    display: flex;
}

.dropdown.unfolded .ddTitle{
    border-bottom: 1px solid var(--cgreen);
}

.dropdown.unfolded{
    align-self: flex-start;
    z-index: 1;
    box-shadow: 0px 0px 10px 1px #bbb;
}

.dropdown.unfolded span:last-child{
    transform: rotate(180deg);
}

.dropdown a{
    border-top: 1px solid var(--llcgreen);
}

.dropdown a.selected, .dropdown a:hover{
    background-color: var(--cgreen);
    color: white;
}

/*Dashboard/Contracts specific styles*/

#main h2.contractSync {
    margin: 50px 0 0 40px;
    font-weight: normal;
}

#main p.contractSync {
    margin: 20px 0 0 40px;
    color: black;
    font-weight: normal;
}

#main section.locationSection {
    margin: 50px 20px 0px 40px;
}

#main section.locationSection div.content:not(.expand) {
    display: none;
}

#main section.locationSection p.expandable:hover {
    text-decoration: underline;
    cursor: pointer;
}

#main section.locationSection div.content h3 {
    color: var(--cgreen);
    font-weight: bold;
    margin-top: 25px;
    margin-bottom: 5px;
}

#main section.locationSection div.content table thead tr th{
    text-align: left;
    padding-left: 5px;
}

#main section.locationSection div.content table thead tr th:first-child{
    padding-left: 15px;
}

#main section.locationSection div.content table .button{
    background-color: white;
}

#main section.locationSection div.content table .function.switch {
    width: 90px;
}

#main section.locationSection div.content table tr td label.function.switch .slider:before {
    height: 26px;
    width: 50px;
    left: 4px;
    bottom: 3px;
}

#main section.locationSection div.content table tr td label.function.switch input:checked + .slider:before {
    -webkit-transform: translateX(50px);
    -ms-transform: translateX(50px);
    transform: translateX(50px);
    width: 28px;
}

#main section.locationSection div.infoSign {
    display: inline;
    cursor: pointer;
    font-weight: normal;
}

#main section.locationSection td:not(.warning) div.infoSign {
    color: var(--cgreen);
}

#main section.locationSection div.infoField {
    color: black;
    background-color: var(--llcgreen);
    position: absolute;
    width: 200px;
    border-radius: 10px;
    font-weight: normal;
    padding: 3px 7px;
    box-shadow: 0 10px 20px 0 white;
    display: none;
}

/*Switchessss*/
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #646464;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 20px;
}

.switch .slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 13px;
}

input:checked + .slider {
  background-color: rgb(90,186,60);
}

input:focus + .slider {
  box-shadow: 0 0 1px rgb(90,186,60);
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

@media print{

    @page {
        margin: 10mm;
        size: auto;
    }

    #sidebar, header, #buttons, footer {
        display: none;
    }

    section {
        margin: initial;
    }

    #result, #main, body {
        height: auto;
    }

    #result table {
        page-break-inside: auto;
    }


    #result table tr    {
        page-break-inside: avoid;
        page-break-before: auto;
    }

    #result table .tableSubRow    {
        page-break-before: avoid;
    }


    .tableEmployeeRow {
        border-top: 1px black solid;
    }

    #matchlistTableHeader, #logTableHeader, #ignoreTableHeader {

        display: none;
    }

    #matchlist #result thead, #logging #result thead{
        display:table-header-group;
    }
}