@import url('../dir.font/Roboto-Bold.css');
@import url('../dir.font/Roboto-Regular.css');



body    { font-family: 'Roboto',sans-serif; margin:0; font-weight: 400; color: #5d6777;background: #f2f2f2;}
h1      {  }
h2      { font-family: 'Roboto', sans-serif; }




.main-left  { width:75%; height:100%; background:#f2f2f2; float:left;padding: 1vw; box-sizing: border-box; overflow: auto;}
.main-right { width:25%; height:100%; background:#fff; border-left: 2px solid #797979; box-sizing: border-box; float:left; padding: 1vw;text-align: center; color: white; position: relative;}

.main-top {width: 100%;display: inline-block;}
.main-bottom {width: 100%;display: inline-block;margin-top: 1vw;}
.version-bottom {position: absolute; bottom: 10px; left: 10px; display: inline-block;}



/* ### NUMPAD ### */

.numpad-container {width: 100%; height:100%; position: relative;}
.numpad-row {width:100%; height: 5.5vw; margin-bottom:0.6vw;}
.numpad-button {width: 23%; height: 100%; float:left; background: #5d6777;margin-right: 0.6vw; box-sizing: border-box; font-size: 4vw;  font-weight: 500; display: flex; justify-content: center; align-items: center;}
.numpad-button:active {background:deeppink; }
.numpad-button.long {width: 48.67%;}
.numpad-button.del {font-size: 3vw;}

.numpad-eject { width:100%; height: 11vw; font-weight: 500; font-size: 4vw; padding-top: 3.1vw; box-sizing: border-box;background: #5d6777; margin-top: 3vw; }
.numpad-eject:active { background-color:deeppink; }

#numpad_multiply { padding-top:1vw; }
#numpad_del { padding-top: 1.4vw;font-size: 2.3vw; }
#numpad_backspace { background-image: url('../dir.graphik/arrow_left.svg');background-repeat: no-repeat;background-position: center;background-size: 3vw; }



/* ### LINKE HÄLFTE ### */

.main-left-input {width:100%; height: 100px; color: #000; background-color: #fff; font-size: 80px; box-sizing: border-box; padding: 3px 0 0 5px;}





/* ### DIV INPUT ### */


.divinput-container {display:inline-block;}
.divinput-div {width:32vw; height: 4vw; border:0.15vw solid #5d6777; float:left; box-sizing: border-box;margin-right:1vw; font-size: 2.6vw; line-height: 1.5; padding-left: 1vw; background:#fff;}
.divinput-button {width: 4vw; height:4vw;background:aquamarine;float:left;box-sizing: border-box;background-color: #5d6777; background-repeat: no-repeat; background-position: center; background-size: 2.5vw;}
.divinput-button:active {background-color:deeppink;}

.divinput-unit {display: inline-block;width: 3.2vw;height: 3.2vw;background: #dfdfe8;text-align: center;padding-top: 0.5vw;box-sizing: border-box;position: relative;left: -8.7vw;top: 0.4vw;}

.divinput-button.type-save      {background-image: url('../dir.graphik/icon_save.svg');}
.divinput-button.type-plus      {background-image: url('../dir.graphik/icon_plus_white.svg');}
.divinput-button.type-minus      {background-image: url('../dir.graphik/icon_minus_white.svg');}
.divinput-button.type-search    {background-image: url('../dir.graphik/icon_search.svg');}

.highlight {border-color: deeppink;box-shadow: 4px 4px 5px 1px rgba(0,0,0,0.5);}

.searchbar {float:right;}



.inventory-width-height-container { display: grid;width: 40vw; grid-template-columns: 1fr 1vw 1fr auto;float: right; grid-column-gap: 20px;}

.inventory-width-height-input   { height: 4vw; border:0.15vw solid #5d6777; float:left; box-sizing: border-box; font-size: 2.6vw; line-height: 1.5; padding-left: 1vw; background:#fff; width: 100%; }
.inventory-input-unit   {     position: relative; }
.inventory-input-unit::after   {     content: 'm';
    position: absolute;
    right: 0.35vw;
    top: 0.35vw;
    background-color: #f2f2f2;
    z-index: 1;
    border: 0.1vw solid;
    padding: 0.4vw;
    line-height: 2.3vw;
    height: calc(100% - 0.7vw);
    box-sizing: border-box; }

.inventory-input-unit.unit-cm::after {content:'cm';}
.inventory-input-unit.unit-stk::after {content:'Stk.';}


.inventory-length-container { display: grid;width: 40vw; grid-template-columns: 1fr auto;float: right; grid-column-gap: 20px;}



/* ### INVENTORY ### */



.inventory-container {width: 100%;display: inline-block;background-color: #fff;border: 0.15vw solid #5d6777;padding: 1.5vw 3vw;box-sizing: border-box;font-size: 2vw;margin-bottom:1vw;}
.inventory-header-tab {display: inline-block;float:left;border-right: 0.2vw solid #5d6777;font-size: 2vw;padding-right: 1vw;margin-right: 1vw;}
.inventory-header-tab:last-child {border-right: 0;}
.inventory-error {color: #a70808;}
.inventory-error.calc {display: inline-block;width: 100%;text-align: right;margin-top: 1vw; display:none;}
.inventory-color {width: 2vw;height: 2vw;float: left;margin: 0.3vw 0.5vw 0 0;border-radius: 100%;border: 0.1vw solid #dadada;}

.inventory-header {display:inline-block; width:100%;}
.inventory-body {display:inline-block;width:100%;margin-top: 1vw;}

.inventory-save { float:right; }

.inventory-select-device {width:24vw;height: 4vw;font-size: 2vw;border: 0.15vw solid #5d6777;}

.button-delete {background-color: #5d6777;font-size: 1.3vw;color: white;border: 0;padding: 0.7vw 1vw; }
.button-delete:active {background-color:deeppink;}

.button-delete-yes {background-color: #28783b;font-size: 1.3vw;color: white;border: 0;padding: 0.7vw 1vw; float:left;margin-right:1vw; }
.button-delete-no {background-color: #781917;font-size: 1.3vw;color: white;border: 0;padding: 0.7vw 4vw;float:left; margin-right:1vw; }
.button-delete-yes:active {background-color:deeppink;}
.button-delete-no:active {background-color:deeppink;}

.delete-question {height: 3vw;float:left; margin-right:1vw;display: flex;align-items: center;}



/*.inventory-options {width: 100%;display: inline-block;background-color: #fff;border: 0.15vw solid #5d6777;padding: 1.5vw 3vw;box-sizing: border-box;font-size: 2vw;min-height: 6vw;}*/
.inventory-options {font-size: 1.5vw;min-height: 4vw; position: absolute; top: 1vw; left: 1vw;display: flex;align-items: center;}


.inventory-history-table {font-size: 1.2vw; border-collapse: collapse; width: 80%;}
.inventory-history-table tr:first-child td {color: #000;}
.inventory-history-table tr td {border: 1px solid #ccc; padding: 0.3vw 0.6vw;}




.inventory-siblings-container {font-size: 1.8vw; margin-top: 2vw;}
.inventory-siblings-container form {margin: 0;}
.inventory-siblings-list {display: grid; grid-gap: 1vw; margin-top: 1vw;}
.inventory-siblings-list-item {border: 1px solid #ccc; padding: 1vw; display: grid; grid-template-columns: 1fr;grid-gap: 1vw;}

.inventory-siblings-left {}
.inventory-siblings-right {position: relative;}
.inventory-siblings-line1 {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1vw;}
.inventory-siblings-line2 {display: grid; grid-template-columns: 1fr; grid-gap: 1vw; margin-top: 1vw;}

.inventory-siblings-minisplit {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1vw;}
.inventory-siblings-type {border: 1px solid #ccc;padding: 0 0.5vw;border-radius: 6px;}
.inventory-siblings-select {font-size: 1.7vw; box-sizing: border-box; width: 100%;}
.inventory-siblings-button {width: 3vw;height: 3vw;background-size: 50%;background-position: center;background-repeat: no-repeat;border: 0.2vw solid #5d6777;border-radius: 100%; user-select: none; cursor: pointer;}
.inventory-siblings-button-add {    background-image: url('../dir.graphik/icon_plus_blue.svg'); margin-top: 1vw;}
.inventory-siblings-button-del {     position: absolute;    background-image: url('../dir.graphik/icon_delete_blue.svg');top: 50%;left: 50%;transform: translate(-50%,-50%); }


.inventory-shelf-container {font-size: 1.8vw; margin-top: 2vw;}
.inventory-shelf-border {border: 1px solid #ccc; padding: 1vw; margin-top: 1vw;}

.inventory-flex {display: flex;}
.inventory-flex > div:not(:last-child) {margin-right: 20px;}


/* ### OVERVIEW ### */

.main-overview {display:inline-block; width:100%; margin-bottom: 2vw;}
.overview {float:left; display:inline-block; box-sizing: border-box; border: 0.2vw solid #5d6777; width:8.25vw; height: 4vw; margin-right:1vw;text-align: center; }
.overview.full {background: #5d6777; color: #fff;font-size: 1.3vw;padding-top: 1vw;}
.overview .maxi {font-size: 1.8vw;margin-top: 0vw;}
.overview .mini {position: relative;font-size: 1vw;top: -0.4vw;}



/* ### CONTROLS ### */


.main-controls {margin-bottom:20px;}
.main-controls-container {display: grid; grid-template-columns: repeat(6, 1fr); grid-column-gap: 10px; grid-row-gap: 10px;}
.main-controls-item { padding: 2px 20px; color: #fff; background: #5d6777; text-align: center; }
.main-controls-item:active { background: deeppink; }

.main-controls-logout {    position: absolute;bottom: 0;width: 100%;box-sizing: border-box;padding: 0.7vw 0;}