/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
    height: 100%;
}

@media (min-width: 544px) {
    .collapse.dont-collapse-xs {
        display: block;
        height: auto !important;
        visibility: visible;
    }
}


@media (min-width: 768px) {
}

@media (min-width: 960px) {
    .container {
        max-width: 750px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1050px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1250px;
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1450px;
    }
}

@media (min-width: 1900px) {
    .container {
        max-width: 1750px;
    }
}

@media (min-width: 2500px) {
    .container {
        max-width: 2250px;
    }
}

@media (min-width: 3400px) {
    .container {
        max-width: 3150px;
    }
}

hr {
    margin: 0;
}

h1 {
    color: #07689F;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem #000000;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

div.collapsed.bg-esseticolor {
    background-color: #044A71
}


.footer {
    /*position: absolute;*/
    /*bottom: 0;*/
    width: 100%;
    white-space: nowrap;
    padding-top: 3px;
    color: #ffffff;
    color: rgba(255, 255, 255, 0.75);
    margin-left: 0;
    margin-right: 0;
    /* Set the fixed height of the footer here */
    /*height: 60px;
  line-height: 60px; /* Vertically center the text there */
}

.container {
    padding-left: 0;
    padding-right: 0;
}

.multiline {
    white-space: pre-wrap;
}

.fadeOnPageLoad {
    display: none;
}
/*.alert-area
{
    position: absolute;
    top: -100px;
    left: 4%;
    width: 92%;
    height: auto;
}*/
.alert-area {
    position: fixed;
    bottom: 5px;
    left: 2%;
    width: 92%;
}

.no-margin {
    margin: 0;
}

.no-padding {
    padding: 0;
}

.index-button {
    min-width: 40px;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #909;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #909;
    opacity: 1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #909;
    opacity: 1;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #909;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #909;
}

::placeholder { /* Most modern browsers support this now. */
    color: #909;
}

/*** FONTS ***/
.esseti-very-small-font-size {
    font-size: 70%;
    padding-left: 4px;
    padding-right: 0;
}

.esseti-small-font-size {
    font-size: 85% !important;
    padding-left: 4px;
    padding-right: 0;
}

@font-face {
    font-family: 'repetition_scrollingregular';
    src: url('/fonts/repetition-webfont.woff2') format('woff2'), url('/fonts/repetition-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/***/

/*** ALERT ***/


/*** COLOURS AND BACKGROUNDS ***/
.white {
    color: white;
}

.aliceblue {
    color: aliceblue;
}

.red {
    color: red;
}

.dark-red {
    color: darkred;
}

.green {
    color: green;
}

.orange {
    color: darkorange;
}

.gray {
    color: gray;
}

.light-gray {
    color: lightgrey;
}


.blue {
    color: blue;
}

.yellow {
    color: yellow;
}

.gold {
    color: goldenrod;
}

.gold-light {
    color: #FFFF99;
}

.esseticolor {
    color: #07689F;
}

.bg-esseticolor {
    background-color: #07689F;
}

.bg-error {
    background-color: red !important;
}

.btn-download {
    color: darkolivegreen;
    border-color: darkolivegreen;
}

.semitransparent {
    opacity: 0.5
}

input.parameter-enabler {
    background-color: #444444;
}

    input.parameter-enabler.selected {
        background-color: #07689F;
    }

        input.parameter-enabler.selected.read {
            background-color: orange;
        }

            input.parameter-enabler.selected.read.perfect {
                background-color: greenyellow;
            }
/***/
/*** ROTATION ***/
.rotate-90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.rotate-270 {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

/*** SWITCH CANDY ***/

.switch-toggle.switch-candy-esseti,
.switch-light.switch-candy-esseti > span {
    background-color: white;
    border-radius: 3px;
}

    .switch-light.switch-candy-esseti span span,
    .switch-light.switch-candy-esseti input:checked ~ span span:first-child,
    .switch-toggle.switch-candy-esseti label {
        color: #333;
        font-weight: normal;
        text-align: center;
    }

.switch-light.switch-candy-esseti input ~ span span:first-child,
.switch-light.switch-candy-esseti input:checked ~ span span:nth-child(2),
.switch-candy-esseti input:checked + label {
    color: #fff;
}

.switch-candy-esseti a {
    border: 1px solid #333;
    border-radius: 3px;
    background-color: #07689F;
}

.switch-candy-esseti input:checked a {
    border: 1px solid #333;
    border-radius: 3px;
    background-color: green !important;
}

/***/

/*** BUTTONS ***/

.esseti-button {
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
}

.esseti-dialog-button {
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 10px;
    margin-bottom: 10px;
    min-width: 100px;
}

.bottomslider-button {
    width: 100%;
    height: 50px;
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}

.dropdown-menu > a:hover {
    background-color: #07689F;
    background-image: none;
    color: yellow !important;
}

/***/

/*** Labels on control ***/

.unit-label {
    font-size: 0.8rem;
    display: inline-block;
    vertical-align: middle;
    line-height: 85%;
}

.slider.slider-horizontal {
    width: 100%;
}

/***/


/*** NUMERIC INPUT - ARROW REMOVE ***/

/* For Firefox */

input[type='number'] {
    -moz-appearance: textfield;
}

/* Webkit browsers like Safari and Chrome */

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/***/

/*** BOTTOM COMMANDS FOR DEVICE CONFIG PANEL ***/

.footerCommands-mobile {
    width: 90%;
    position: fixed;
    bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    left: 5%;
}

    .footerCommands-mobile .title {
        background-color: lightgray;
        height: 35px;
    }

    .footerCommands-mobile .content {
        height: auto;
        background-color: whitesmoke;
        display: none;
    }

.footerCommands-desktop {
    position: fixed;
    bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.flippable {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    transition-duration: 0.4s;
}

.flip {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    transition-duration: 0.4s;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1050px;
    }

    .nmt-cmd-3butt {
        width: 225px
    }

    .nmt-cmd-4butt {
        width: 300px
    }

    .nmt-cmd-5butt {
        width: 375px
    }
}


/***/

/*** LED ***/
.led-column-element {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.led-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex;
    width: 100%;
    resize: none;
}

.dip-container {
    /*padding-left: 1px !important;*/
}

.led-circle {
    width: 12px;
    height: 12px;
    margin: 2px 0;
    float: left;
    display: inline-block;
    border-radius: 12px;
    resize: none;
}

.led-ellipse {
    width: 14px;
    height: 20px;
    margin-top: 1px;
    margin-bottom: 1px;
    float: none;
    display: inline-block;
    resize: none;
}

.led-dashboard {
    /*text-align: center;
    vertical-align: middle;*/
    width: 25px;
    min-width: 25px;
    max-width: 25px;
    height: 14px;
    margin: 2px -12px;
    float: left;
    display: inline-block;
    border-radius: 3px;
    resize: none;
    padding: 0;
}

.led-panel {
    width: 25px;
    min-width: 25px;
    max-width: 25px;
    height: 10px;
    float: left;
    display: inline-block;
    border-radius: 3px;
    resize: none;
    padding: 0;
    margin-top: 8px;
}

.led-border-up {
    border-radius: 7px 7px 1px 1px;
}

.led-border-down {
    border-radius: 1px 1px 7px 7px;
}

.led-text {
    /*width: 75%;
    height: 25%;*/
    margin: 0 0;
    float: right;
    display: inline-block;
}

.led-green {
    background-color: #ABFF00;
    box-shadow: #000000 0 -1px 7px 1px, inset #304701 0 -1px 5px, #89ff00 0 0 6px;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 5px, #89ff00 0 0 6px;
}

.led-yellow {
    background-color: #ffff00;
    box-shadow: #000000 0 -1px 7px 1px, inset #3e3e00 0 -1px 5px, #dddd00 0 0 6px;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #3e3e00 0 -1px 5px, #dddd00 0 0 6px;
}

.led-blue {
    background-color: #24E0FF;
    box-shadow: #000000 0 -1px 7px 1px, inset #006 0 -1px 5px, #3F8CFF 0 0 6px;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #006 0 -1px 5px, #3F8CFF 0 0 6px;
}

.led-red {
    background-color: #ff0000;
    box-shadow: #000000 0 -1px 7px 1px, inset #600 0 -1px 3px, #ff0000 0 0 6px;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #600 0 -1px 3px, #ff0000 0 0 6px;
}

.led-orange {
    background-color: #ff7700;
    box-shadow: #000000 0 -1px 7px 1px, inset #6d3300 0 -1px 3px, #ff7700 0 0 6px;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #6d3300 0 -1px 3px, #ff7700 0 0 6px;
}

.led-off {
    filter: brightness(40%);
    box-shadow: #000000 0 -1px 7px 1px, inset #006 0 -1px 5px;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #006 0 -1px 5px;
}

.led-on {
    filter: brightness(100%);
}

/****/


/**Images*/

.flag-image {
    max-height: 50px;
    max-width: 120px;
    background-color: transparent;
    border-color: transparent !important;
    /*border: 0 !important;*/
}

.flag-image-small {
    max-height: 25px;
    max-width: 60px;
    background-color: transparent;
    /*border-color: transparent !important;*/
    border: 0 !important;
}

.flag-image-big {
    max-height: 160px;
    max-width: 250px;
    background-color: transparent;
    border-color: transparent !important;
    /*border: 0 !important;*/
}
/*jquery previev*/
#preview {
    position: absolute;
    border: 1px solid #ccc;
    background: #333;
    padding: 5px;
    display: none;
    color: #fff;
}


/****/


/**Font awesome**/
.bordered-icon {
    stroke: black;
    stroke-width: 10;
}

.bordered-icon-light {
    stroke: #444444;
    stroke-width: 10;
}

.edge-only-icon {
    stroke: black;
    stroke-width: 25;
    color: transparent !important;
}


/****Autocomplete text ****/

/*the container must be positioned relative:*/
.autocomplete {
    position: relative;
    display: inline-block;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

    .autocomplete-items div {
        padding: 10px;
        cursor: pointer;
        background-color: #fff;
        border-bottom: 1px solid #d4d4d4;
    }

        /*when hovering an item:*/
        .autocomplete-items div:hover {
            background-color: #e9e9e9;
        }

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
    background-color: DodgerBlue !important;
    color: #ffffff;
}

/*****/


/**** SLIDING HELP AREA ******/
.sidebar {
    position: fixed;
    height: 100%;
    width: 100%;
    margin-bottom: 200%;
    margin-top: 100%;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100vw;
    overflow: auto;
    background-color: snow;
    opacity: 0;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    z-index: -1;
}

    .sidebar.inhelp {
        margin-bottom: 100% !important;
        margin-top: 0 !important;
        opacity: 1;
        z-index: 1;
    }

.sidebarbutton {
    cursor: pointer;
    position: fixed;
    z-index: 2;
    right: 30px;
}

#helpbutton_open {
    top: 70px;
}

#helpbutton_close {
    top: 8px;
}

#main {
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

    #main.inhelp {
        opacity: 0;
        overflow: hidden;
    }
/*******/


/*** DEBUG ***/
/*.row {
    border: 1px solid red;
    border-style: dashed;
}

[class^='col-'], .col {
    border: 1px solid blue;
    border-style: dotted;
}*/
/***/