/*  Zinken & Zapfen styles                                  */
/*  for produktLogika Configurator Client                   */
/*                                                          */
/*  (c) nanoLogika GmbH, 2021                               */
/*                                                          */
/* Color Scheme TBD                                         */
/*      Text:               #363635                         */
/*      Light Green         #98c6a7                         */
/*      Dark Green          #569b69                         */
/*      Border (normal):    light gray (default)            */
/*      Border (hover)      #569b69                         */
/*                                                          */
/************************************************************/

@import "main-window-styles.css";
@import "main-window-3D.css";
@import "pm-layout.css";
@import "pm-styles.css";
@import "pm-checkboxradio.css";
@import "icomoon.css";
@import "orbitcontrols.css";
@import "backgroundcolors.css";
@import "pm-mobile.css";


body, input, select {
    font-family: 'Roboto';
}

select option {
    font-family: 'Roboto';
}


#renderer-container {
    width: 800px;
    background-color: lightgray;
    background-image: url("../images/Logo.png");
    background-size: 100px;
    background-position: left 20px bottom 20px;
    background-repeat: no-repeat;
}

.debug {
    visibility: hidden;
}

.pm-filter-group .pm-picker-btn, .pm-filter-group .pm-picker-btn-selected {
    background-size: 32px;
    width: 32px;
    height: 32px;
}

.pm-filter-group button {
    border-color: lightgray;
    border-radius: 0;
    border-width: 1px;
    color: #363635;
    width: auto;
    height: 34px;
    font: 13px Roboto;
    margin-top: 0;
}
.pm-filter-group button:first-child {
    margin-left: 0;
}
.pm-filter-group button:focus {
    background-color: white;
}

.pm-filter-group .pm-btn-selected {
    background-color: #98c6a7;
    border-color: #98c6a7;
}
.pm-filter-group button:hover {
    background-color: white;
    border-width: 2px;
}
.pm-filter-group .pm-btn-selected:focus {
    background-color: #98c6a7;
}
.pm-filter-group .pm-btn-selected:hover {
    background-color: #98c6a7;
    border-color: gray;
}

/************************************************************/
/*  Configurator                                            */
/*                                                          */
/*  Page Heading (Caption of a PageGroup)                   */
/*  Adjustable styles:                                      */
/*      color, font, background-color, padding              */
/*.pm-page-heading {
    background-color: sandybrown;
    padding: 20px;
}*/
.pm-page-heading-caption {
    color: #569b69; /* green full */
}

/*  Group Caption (Caption of a NativeGroup)                */
/*  (1st level, higher levels are to be handled separately) */
/*  Adjustable styles:                                      */
/*      color, font, background-color, padding              */
.pm-group-frame.pm-level-1 > .pm-group-caption {
    background-color: #98c6a7;
    color: #363635; /* text color */
    padding: 5px;
}

.pm-group-frame.pm-level-2 > .pm-group-caption {
    color: #569b69; /* green full */
    padding: 5px;
}

/*  Element Caption (Caption of an element or choice group) */
/*  or text associated with such an element                 */
/*  Adjustable styles                                       */
/*      color, font                                         */
.pm-caption, .pm-text-value, .pm-content {
    color: #363635; /* text color */
}

.pm-yesno-caption {
    color: #569b69; /* green full */
}

.pm-create-button {
    color: #569b69; /* green full */
    font-size: 16px;
    border-radius: 0px;
}

.pm-issue > .pm-text-value,
.pm-issue > .pm-message,
.pm-issue > .pm-content {
    color: crimson; /* red */
}
/*.field-invalid {
    background-color: #F3A8C5;
}*/


/*  Element Border Colors                                   */
/*      input (Textbox),                                    */
/*      selector (Dropdown)                                 */
/*      radio (Radio Buttons)                               */
/*      checkbox (Checkbox)                                 */
/*  Adjustable styles:                                      */
/*      color, background-color, font                       */
/*  Consider states:                                        */
/*      normal, hover focus                                 */
/*      valid/invalid, hover, focus                         */
/*      inactive                                            */
input:hover,
select:hover,
.radio:hover i,
.checkbox:hover i {
    border-color: #569b69;          /* green full */
}

input:focus,
select:focus,
.radio input:focus + i,
.checkbox input:focus + i {
    border-color: #569b69;          /* green full */
}

.pm-invalid input,
.pm-invalid select,
.pm-invalid .radio input + i,
.pm-invalid .checkbox input + i {
    border-color: orange;           /* red light */
}

.pm-invalid input:hover,
.pm-invalid select:hover,
.pm-invalid .radio input:hover + i,
.pm-invalid .checkbox input:hover + i {
    border-color: darkorange;       /* red full */
}

.pm-invalid input:focus,
.pm-invalid .pm-invalid select:focus,
.pm-invalid .radio input:focus + i,
.pm-invalid .checkbox input:focus + i
{
    border-color: darkorange;       /* red full */
}


/*  PageGroupMenu                                           */
.pm-tab-label {
    border-right-color: #98c6a7;
}
.pm-tab-label:hover {
    border-color: #98c6a7;
}
/*
.pm-tab-content {
    border-left: 1px solid #569b69;
}
*/

.pm-tabbed-page input[type=radio]:checked + .pm-tab-label {
    border-left-color: #98c6a7;     /* green light  */
    border-top-color: #98c6a7;      /* green light  */
    border-bottom-color: #98c6a7;   /* green light  */
}

/*  Color of the vertical line beween configurator page and menu  */
.pm-tabbed-page input[type=radio]:checked + .pm-tab-label + .pm-tab-content {
    border-left-color: #98c6a7;
}

/* Tooltip at tab label                                     */
.pm-tab-label ~ .pm-tooltip-box {
    border-color: #569b69;          /* green full   */
    color: #569b69;                 /* green full   */
}
.pm-tab-label ~ .pm-tooltip-box::after {
    border-color: transparent transparent transparent #569b69;
}
.pm-tooltip-title {
    color: #569b69;                 /* green full   */
}

.pm-group-issues {
    display: block;
    margin-left: 40px;
}

.pm-group-bottom {
    color: red;
}

.pm-message {
    color: #363635;                 /* text color   */
    border-top: 1px solid #98c6a7;  /* green light  */
    border-left: 4px solid #98c6a7; /* green light  */
    padding-left: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-bottom: 4px;
}

.pm-group-issues .pm-issue {
    color: #363635;                 /* text color   */
    border-top: 1px solid orange;
    border-left: 4px solid orange;
    padding-left: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-bottom: 5px;
}

.pm-issue {
    color: #363635;                 /* text color   */
    /*border-top: 1px solid orange;*/
    border-left: 4px solid orange;
    padding-left: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-bottom: 4px;
}

.pm-tooltip-issue {
    color: #363635;                 /* text color   */
    border-left: 4px solid orange;
    padding-left: 5px;
    margin-top: 2px;
    margin-bottom: 2px;
}

/*  Push-Button                                             */
.pm-button-cell {
    width: 80%;
    height: 50px;
}

button.pm-button {
    color: white;
    background-color: #569b69;      /* green full   */
    border-radius: 0;
}

.pm-inactive button.pm-button {
    background-color: #98c6a7;      /* green light  */
}

button.pm-button:hover {
    border-color: #569b69;          /* green full   */
}

/*  Parameter Editor */
.pm-toggle:checked ~ .pm-ped-caption-cell {
    border-top: 1px solid #98c6a7; /* green light */
    border-left: 1px solid #98c6a7;
    border-right: 1px solid #98c6a7;
}

.pm-ped-frame {
    border-left: 1px solid #98c6a7; /* green light */
    border-right: 1px solid #98c6a7;
    border-bottom: 1px solid #98c6a7;
}

.pm-ped-section-headline {
    color: #569b69; /* green full */
}

.pm-ped-table-caption-cell {
    width: 30px;
}

/* Number Picker Buttons */
.pm-picker-btn {
    border-color: whitesmoke; /* very light gray */
    border-width: 2px;
    background-color: white;
}

.pm-picker-btn:hover {
    border-color: #569b69;      /* green full */
    border-width: 2px;
    background-color: white;
}

.pm-picker-btn-selected {
    border-color: #98c6a7; /* green light */
    border-width: 2px;
    background-color: white;
}

.pm-picker-btn:focus {
    background-color: white;
}

/*  main-window-styles Message Section                          */
.section-heading {
    background-color: #98c6a7;  /* green light  */
    color: #363635;             /* text color */
}

.message-panel {
    border-top: 1px solid #98c6a7;
}

.message-panel.fatal {
    color: crimson;
}

.message-panel.invalid {
    color: orange;
}

.message-panel.valid {
    color: #569b69;                 /* green full */
}

/*  pm-3D-presentation styles                                   */
.toolbar, .alertbar {
    border-top: 1px solid #98c6a7;  /* green light  */
}

.toolbar button, .alertbar button {
    background-color: #569b69;      /* green full   */
    border-radius: 0;
}

.toolbar button {
    font-size: 25px;
}

/*  Spin controls                                               */
.modelNavigationIcon {
    color: #097738;                 /* ???? strange color ????  */
    -webkit-text-stroke: unset;
}



.pm-toggle-button:after {
    color: #569b69;                 /* green full   */
}
.pm-delete-button {
    color: orange;
}

/*  SVD styles                                                  */
.svg-title {
    color: #569b69;                 /* green full   */
}

.svg-drawing {
    background-color: aliceblue;
}

.svg-outline {
    stroke: black;
    stroke-width: 2;
    fill: white
}

.svg-auxline {
    stroke: black;
    stroke-width: 1
}