/*
 Sticky footer
 */

  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }


/*
    Styling of the buttons
*/

.buttonConfirm,
.buttonConfirm:hover,
.buttonConfirm:focus,
.buttonConfirm:active,
.buttonConfirm:visited {
    background-color: #ff9a00;
    color: #000000;
    border-radius: 20px;
}

.buttonConfirmOrange,
.buttonConfirmOrange:hover,
.buttonConfirmOrange:focus,
.buttonConfirmOrange:active,
.buttonConfirmOrange:visited {
    background-color: #ff9800;
    color: #000000 !important;
    border-radius: 20px;
}

.buttonConfirmRed,
.buttonConfirmRed:hover,
.buttonConfirmRed:focus,
.buttonConfirmRed:active,
.buttonConfirmRed:visited {
    background-color: #F44336;
    color: #000000 !important;
    border-radius: 20px;
}

.buttonConfirmGreen,
.buttonConfirmGreen:hover,
.buttonConfirmGreen:focus,
.buttonConfirmGreen:active,
.buttonConfirmGreen:visited {
    background-color: #4CAF50;
    color: #000000 !important;
    border-radius: 20px;
}

/*
    Styling of page title
 */
.highlighted-heading {
    position: relative; /* Required to position the pseudo-element */
    display: inline-block; /* Keeps the heading width limited to its content */
    margin-bottom: 20px; /* Adds some space below the heading */
    font-weight: 500;
}

.highlighted-heading::before {
    content: ""; /* Empty content to create the pseudo-element */
    position: absolute; /* Absolute positioning relative to the heading */
    bottom: -10px; /* Position it 10px below the heading */
    left: 0px; /* Start from the left */
    width: 60px; /* Line width */
    height: 3px; /* Line thickness */
    background-color: #2d8bff; /* Line color, adjust as needed */
}

ul.select-dropdown, ul.dropdown-content {
    width: auto !important;
}

li > span {
    white-space: nowrap;
}

ul.dropdown-content.select-dropdown li span {
    color: #000; /* no need for !important :) */
}

table.striped > tbody > tr:nth-child(odd) {
    background-color: rgb(240, 240, 240);
}

table.highlight > tbody > tr:hover {
    background-color: rgb(255, 235, 130);
}

.theada {
    color: black;
}

thead {
    background-color: whitesmoke;
    color: black;
    font-weight: bolder;
}

td.thead {
    text-align: center;
    border: 1px solid lightgray;
    line-height: 24px;
    font-size: 16px;
    vertical-align: middle;
}

tr.plain {
    border: 0px solid;
}

tr.separator {
    border-bottom: 2px solid lightgray;
}

input[type=text].tableform {
    border-bottom: 1px solid gray;
    margin: 0 0 0 0;
}

input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea {
    border-bottom: 2px solid lightgray !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

input:focus:not([type]), input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=url]:focus, input[type=time]:focus, input[type=date]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=tel]:focus, input[type=number]:focus, input[type=search]:focus, textarea.materialize-textarea {
    border-bottom: 2px solid green !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

div.responsive > :hover {
    background-color: rgb(255, 235, 130);
    z-index: -1;
}

div.trow {
    display: flex;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border-bottom: 1px solid lightgray;
}


div.tdcell {
    display: flex;
    align-self: center;;
}

div.thcell {
    display: flex;
    justify-content: center;
    align-self: center;
}

div.thead {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: whitesmoke;
    /*text-align: center;*/
    border: 1px solid lightgray;
    /*line-height:24px;*/
    font-size: 16px;
    /*vertical-align: middle;*/
    height: 50px;
}


div.thcell {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tabs .tab a {
    color: rgba(38, 166, 154, 0.7);
    /*Custom Text Color*/
}

.tabs .tab a:hover {
    color: #26a69a;
    /*Custom Color On Hover*/
}

.tabs .tab a:focus {
    color: #26a69a;
    /*Custom Text Color While Active*/
    background-color: rgba(38, 166, 154, 0.2);
    /*Custom Background Color While Active*/
}

.tabs .tab a:active {
    color: #26a69a;
    /*Custom Text Color While Active*/
    background-color: rgba(38, 166, 154, 0.2);
    /*Custom Background Color While Active*/
}

.tabs .indicator {
    background-color: #26a69a;
    /*Custom Color Of Indicator*/
}

.div-popup {
    display: none;
    position: absolute;
    background-color: white;
    padding: 5px 5px 5px 5px;
    width: 400px;
    border: 1px solid black;
}

html, body {
    height: 100%;
    /*min-height: 100%;*/
    min-height: 100%;
    margin: 0;
}

/* Custom dropdown menu */
.custom-dropdown li a:hover {
    background-color: transparent !important;
}

/* Materialise carousel */
.carousel .carousel-item {
    visibility: hidden;
    width: 640px !important;
    height: 640px !important;
    position: absolute;
    top: 0;
    left: 0;
}

.indicator-item {
    display: inline-block;
    position: relative;
    cursor: pointer;
    height: 8px;
    width: 8px;
    margin: 24px 4px;
    background-color: rgba(255, 255, 255, 1.0) !important;
    border: 1px solid black;
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
    border-radius: 50%;
}

.carousel .indicators .indicator-item.active {
    background-color: rgba(0, 0, 0, 1.0) !important;
    border: 1px solid black;
}


/*
    Scaling the navigation bar
*/

@media screen and (max-width: 1000px) {

    nav ul:not(.sidenav) {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
    }

    nav ul:not(.sidenav) li {
        display: inline-block !important;
    }

  .brand-logo {
    position: relative !important;
    transform: none !important;
    left: 0 !important;
    margin-left: 10px;
  }

}

@media screen and (max-width: 1200px) {

    .server-load-information {
        display: none !important;
    }

}


/*
    FullHD layout
*/

@media screen and (max-width: 2000px) {

    nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
        height: 50px;
        line-height: 50px;
    }

    .nav-logo-nmrtist {
        display: none !important;
    }

    .scaledMenu {
        width: 280px;
        margin-left: 0;
        margin-right: 20px;
    }

    .scaledMainWithMenu {
        width: calc(100% - 340px);
        max-width: 1920px;
        padding-right: 20px !important;
    }

    .scaledMainNoMenu {
        width: 100%;
        transform-origin: top center;
    }

    .scaledFooter {
        min-height: 50px;
        height: 50px;
        max-height: 50px;
        line-height: 50px;
    }

    .wrapper {
        min-height: 100%;
        margin-bottom: -100px;
    }

}

/*
    4K layout
*/
@media screen and (min-width: 2000px) {

    nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
        height: 50px;
        line-height: 50px;
    }

    .scaledMenu {
        width: 300px;
        margin-right: 40px;
    }

    .scaledMainWithMenu {
        width: calc(100% - 340px);
        max-width: 1920px;
        padding-right: 40px !important;
    }

    .scaledMainNoMenu {
        max-width: 1920px;
        margin-left: auto;
        margin-right: auto;
    }


    .scaledFooter {
        min-height: 50px;
        max-height: 50px;
        height: 50px;
        line-height: 50px;
    }

    .wrapper {
        min-height: 100%;
        margin-bottom: -100px;
    }
}

.drag-target {
  z-index: 998;
  width: 10px;
  height: 100%;
  position: fixed;
  top: 0;
}

/*
    Form validation box
 */

.form_validation_error_div {
    background-color: #fff0f0;
    color: darkred;
    padding: 15px 15px 15px 15px;"
}

.form_validation_success_div {
    background-color: #CCFFCC; /* light green background */
    color: darkgreen;          /* dark green text */
    padding: 5px 5px 5px 5px;
}