:root {
    --color-black: rgb(0, 0, 0);
    --color-darkblue: rgb(0, 17, 105);
    --color-blue: rgb(36, 167, 255);
    --color-gray: rgb(127, 127, 127);
    --color-lightgray: rgb(147, 147, 147);
    --color-darkgreen: rgb(0, 105, 0);
    --color-green: rgb(85, 255, 105);
    --color-red: rgb(255, 25, 45);
    --color-white: rgb(255, 255, 255);
    --content-background-033: rgba(255, 255, 255, 0.33);
    --content-background-050: rgba(255, 255, 255, 0.5);
    --content-background-100: rgba(85, 85, 85, 1);
    --info-background: rgba(58, 58, 58, 1);
}

body
{
	background-color: black;
	color: white;
	
	height: 100vh;
    font-size: 1.25em;

    overflow: hidden;
}

button
{
    cursor: pointer;
}

.buttonStyle
{
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 5%;

    cursor: pointer;

    border-radius: 0.3vw;

    color: white;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.buttonStyle_darkblue { background-color: var(--color-darkblue) !important; }
.buttonStyle_blue { background-color: var(--color-blue) !important; }
.buttonStyle_blue_notselected { background-color: var(--color-darkblue) !important; color: rgb(140, 140, 140) }
.buttonStyle_green { background-color: var(--color-green) !important; color: var(--color-black); }

.disableDiv {
  opacity: 0.33;
  pointer-events: none;
}

.cursor_pointer
{
    cursor: pointer;
}

.module_button_gray
{
    display: flex;
    justify-content: center;
    color: var(--color-white);
    background-color: var(--content-background-100);
    cursor: pointer;
}

.module_button_green
{
    display: flex;
    justify-content: center;
    color: var(--color-black);
    background-color: var(--color-green);
    cursor: pointer;
}

.module_button_green_deactivated
{
    background-color: var(--color-darkgreen) !important;
    cursor: not-allowed;
}

div
{
    background-repeat: no-repeat;
}

.relative
{
    position: relative;
}

.displayNone
{
    display: none !important;
}

.disabledButton_blue
{
    background-color: var(--color-darkblue) !important;
    cursor: not-allowed !important;
}

.disabledButton_green
{
    background-color: var(--color-darkgreen) !important;
    cursor: not-allowed !important;
}

.disabledInput
{
    cursor: not-allowed;
}

.hidden
{
    visibility: hidden;
}

.border_white
{
    outline: calc(1px + 0.01vw) solid white;
}

.flex, .flexRow
{
    display: flex;
}

.flex1 { flex: 1; }
.flex2 { flex: 2; }
.flex3 { flex: 3; }
.flex4 { flex: 4; }
.flex5 { flex: 5; }

.flexColumn
{
    display: flex;
    flex-direction: column;
}

.flexCenter
{
    justify-content: center;
    align-items: center;
}

.flexEnd, .flexRowHorizontalEnd
{
    justify-content: flex-end;
}

.flexRowVerticalCenter
{
    align-items: center;
}

.flexSpaceAround
{
    justify-content: space-around;
}

.flexRowSpaceBetween
{
    justify-content: space-between;
}

.font_bold
{
    font-weight: bold;
}

.icon_base
{
    background-color: white;
    background-position: center;
    background-size: 60% 60%;
    border: 0.2em solid white;

    border-radius: 100%;

    z-index: 2;
}

.notextselect
{
    -webkit-user-select: all;  /* Chrome 49+ */
    -moz-user-select: all;     /* Firefox 43+ */
    -ms-user-select: all;      /* No support yet */
    user-select: all;          /* Likely future */
}

.icon_biline { background-image: url('../img/biline.png'); }
.icon_kipinfra_white { background-image: url('../img/kip-infra-logo-valk.svg'); }
.icon_kipinfra { background-image: url('../img/kip-infra-logo.svg'); }
.icon_calendar { background-image: url('../img/calendar.png'); }
.icon_loading { background-image: url('../../img/loading.png'); }
.icon_loading_shared { background-image: url('../img/loading.png'); }
.icon_sconnection { background-image: url('../img/serverconnection.png'); }
.icon_sensor  { background-image: url('../img/icon_sensor.png'); }
.icon_worker  { background-image: url('../img/icon_worker.png'); }

@media (orientation: portrait)
{
    .icon_base
    {
        width: 9vw;
        height: 9vw;
    }
}

@media (orientation: landscape)
{
    .icon_base
    {
        width: 6vw;
        height: 6vw;
    }
}

/* Tooltip */
.arrow::before
{
    border-right-color: rgba(85, 85, 85, 0.9) !important;
}

.tooltip
{
    max-width: 33%;
}

.tooltip-inner
{
    background-color: rgba(85, 85, 85, 0.9);
    max-width: none;
    white-space: pre-wrap;
    text-align: left;

    font-size: 1vw;
}

/* FORM */
/* BASIC */

a {
    color: white;
    display:inline-block;
    text-decoration: none;
    font-weight: 400;
}
  
a:hover {
    color: white;
}
  
h2 {
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    display:inline-block;
    margin: 40px 8px 10px 8px; 
    color: #cccccc;
}
  
  
  
/* STRUCTURE */
  
.wrapper {
    display: flex;
    align-items: center;
    flex-direction: column; 
    justify-content: center;
    width: 100%;
    min-height: 100%;
    padding: 20px;
}
  
#formContent {
    background: var(--content-background-033);
    padding: 30px;
    width: 90%;
    max-width: 450px;
    position: relative;
    padding: 0px;
    text-align: center;
}
  
/* FORM TYPOGRAPHY*/
  
input[type=button], input[type=submit], input[type=reset]  {
    width: 85%;
    background-color: var(--color-green);
    border: none;
    color: black;
    cursor: pointer;
    padding: 15px 0px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    font-weight: bold;
    margin: 20px 0px 5px 0px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
  
  /*input[type=button]:active, input[type=submit]:active, input[type=reset]:active  {
    -moz-transform: scale(0.95);
    -webkit-transform: scale(0.95);
    -o-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
  }*/

.overflowYhidden
{
    overflow-y: hidden !important;
}

input[type=file] {
    display: none;
}

.inputFileLabel {
    width: 100%;
    color: var(--color-black);
    padding: 1vh 1vw;

    border-radius: 1vw;
    cursor: pointer;

    font-size: 0.9vw;
    font-weight: bold;
    text-align: center;
}

.inputFile_nofile {
    background-color: var(--color-red);
}

.inputFile_file {
    background-color: var(--color-green);
}
  
input[type=text], input[type=email], input[type=password], input[type=number], textarea, select {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    color: white;
    padding: 1vh 1vw;
    text-decoration: none;
    display: inline-block;
    margin: 5px;
    width: 100%;
    border: 2px solid white;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

::placeholder { color: rgba(255, 255, 255, 0.5); }
::-ms-input-placeholder { color: rgba(255, 255, 255, 0.5); }
:-ms-input-placeholder { color: rgba(255, 255, 255, 0.5); }

 /* Checkbox */
 /* Customize the label (the container) */
 .checkbox_container {
    display: block;
    position: relative;
    padding-left: 2em;
    margin-bottom: 0;
    cursor: pointer;
    font-size: 1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox_container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkbox_checkmark {
    position: absolute;
    top: 0.3em;
    left: 0.3em;
    height: 1em;
    width: 1em;
    background-color: #fff;
    border: 2px solid black;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkbox_checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox_container input:checked ~ .checkbox_checkmark:after {
    display: block;
    color: black;
}

/* Style the checkmark/indicator */
.checkbox_container .module_itraffic_checkbox_checkmark:after {
    left: 0.25em;
    top: 0em;
    width: 0.30em;
    height: 0.7em;
    border: solid black;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Radio button */
/* The container */
.radiobutton_container {
    display: block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    font-size: 1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.radiobutton_container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.radiobutton_checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 1.25em;
    width: 1.25em;
    background-color: #fff;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radiobutton_container:hover input ~ .radiobutton_checkmark {
    background-color: #ccc;
}

/* When the radio button is checked */
.radiobutton_container input:checked ~ .radiobutton_checkmark {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radiobutton_checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radiobutton_container input:checked ~ .radiobutton_checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radiobutton_container .radiobutton_checkmark:after {
    width: 75%;
    height: 75%;
    border-radius: 50%;
    background: var(--color-darkgreen);;
}

/* Module style */
.module_base
{
    position: absolute;
    
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    pointer-events: none;
}
.module_private_container
{
    position: absolute;

    width: 100%;
    height: 100%;
}
.module_sidebar
{
    position: absolute;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 25%;
    height: 100%;
    max-height: 60%;
    margin-top: 10%;

    background-color: black;

    overflow-y: auto;
    pointer-events: auto;
}

.verticalPadding
{
    margin-bottom: 1vh;
}

.content_container_bottom
{
    position: absolute;

    width: 100%;
    height: 20%;
    bottom: 0;
    padding: 1%;
    z-index: 6;

    display: none;
    justify-content: center;
    align-items: center;

    pointer-events: none;
}

.content_container_bottom_content
{
    display: flex;
    width: 60%;
    height: 100%;
    font-size: 1vw;
    background-color: rgb(58, 58, 58);
    pointer-events: auto;
}

.content_container_bottom_content_colorbar
{
    flex: 1;
}

.content_container_bottom_content_innercontent
{
    flex: 19;

    display: flex;
    flex-direction: column;
}

.content_container_bottom_content_header
{
    flex: 1;

    display: flex;
    align-items: center;
}

.content_container_bottom_content_header_title
{
    flex: 2;
    padding-left: 0.5em;
    font-weight: bold;
}

.content_container_bottom_content_header_other
{
    flex: 1;
}

.content_container_bottom_content_othercontent
{
    flex: 3;
    padding: 0.5em;

    overflow: auto;
}

.paddingLeft
{
    padding-left: 0.5vw;
}

/* Switch button */
.button_switch
{
    background-color: red;
    border-radius: 1vw;

    overflow: hidden;

    color: black;
    font-size: 1.5vw;
    font-weight: bold;

    cursor: pointer;
}

.button_switch_sub
{
    padding: 1vh 2vw;
}

.button_switch_active
{
    background-color: var(--color-green);
}

.button_switch_inactive
{
    background-color: var(--color-darkgreen);
}

/* Time Picker */
.timepicker_starttime
{
   display: flex;
   flex: 1;
}

.timepicker_endtime
{
   display: flex;
   flex: 1;
}

.timepicker_starttime_picker, .timepicker_endtime_picker
{
   background-color: rgb(22, 22, 22) !important;
   background-image: url('../img/calendar.png');
   background-position: 95% 50%;
   background-repeat: no-repeat;
   background-size: auto 60%;
   color: white;
}