/* =========================================================================== */
/* LAYOUT */

html, body {
    height: 98%;
    background-color: #fff;
    font-size: 16px;    
}

body{
    overflow-x: hidden;
    overflow-y: auto;
}

/*
.header{
    width: 100%;
    background-color: rgba(136,136,136,.5);
    padding: 0px 0;
    color: #777;
    border-bottom-style: solid;
    border-width: 0px;
    border-bottom-color: #0a3460;
    padding-left:10px;
    padding-right:10px;
    height: 60px;
    min-height: 50px;
    border-bottom: 2px solid #000;
    position: absolute;
    z-index: 98;
    top: 50px;
}
*/

/*
#sub-header{
    background-color: #fff;
    margin-top: 0px;
    margin-bottom: 0px;
    border-bottom: 1px solid #333;
    text-align: center;
}
*/

.container{
    width: 100%;
    max-width: 1950px;
    padding-bottom: 50px;
    padding-top: 25px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 25px;
    min-height: 700px;
    margin-bottom: 25px;
}

.containerstart{
    margin-top: 100px;
    width: 80%;
}


.footer{
    width: 100%;
    background-color: #333333;
    color: #fff;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    border-style:solid;
    border-top-width: 1px;
    border-bottom-width: 0px;
    border-right-width: 0px;
    border-left-width: 0px;
    vertical-align: top;
    /*border-color: 0a3460;*/
    font-size: 0.75rem;
    /*
    position: fixed;
    bottom: 0px;
    */
    position: absolute;
    z-index: 9;
}

.footer a{
    color: #ffffff;
    text-decoration: none;
}

/* ========================================================================== */

.metadaten{
    float: left;
    width: 20%;
    padding: 10px;
    background-color: #ededed;
    height: 710px;
}


/* V1 */
.arbeitsplatz_V1{
    float: left;
    width: 78%;
    padding: 10px;
    background-color: #ededed;
    min-height: 750px;
    margin-left: 2%; 
    overflow-y: auto;
    /*position: relative;*/
}
/* V2 */
.arbeitsplatz{
    float: left; /* war bis 03.01. => notwendig? */
    width: 78%;
    padding: 10px;
    background-color: #ededed;
    min-height: 710px;
    margin-left: 2%; 
    overflow-y: auto;
    /*position: relative;*/
}

.arbeitsplatte{
    background-color: #444;
    /* width: 1280px; *//* = 320 cm */
    /* height: 620px; *//* = 155 cm */
    position: relative;
    margin-left: 30px;
    bottom: 0px;
}

.arbeitsplatte.nvm{
    background-image: url("../images/material/bg/Noble-Vintage_Matt.jpg");
}
.arbeitsplatte.cb{
    background-image: url("../images/material/bg/Crystal-Belgium.jpg");
}
.arbeitsplatte.ttg{
    background-image: url("../images/material/bg/Taurus-Terazzo-Grey.jpg");
}
.arbeitsplatte.npgm{
    background-image: url("../images/material/bg/Noble-Portland-Grey_Matt.jpg");
}
.arbeitsplatte.ttb{
    background-image: url("../images/material/bg/Taurus-Terazzo-Black.jpg");
}
.arbeitsplatte.ttw{
    background-image: url("../images/material/bg/Taurus-Terazzo-White.jpg");
}


/*
.arbeitsplatte{
    background-color: #444;
    height: 95%;
    width: 90%;
    position: absolute;
    left: 10px;
    top: 10px;
}
*/

.arbeitsplatteoben, .arbeitsplatteunten{
    position: absolute;
    left: 43%;
    color: #777;
}

.arbeitsplatteoben{
    top: 10px;
}

.arbeitsplatteunten{
    bottom: 10px;
}

.kosten{
    font-weight: bolder;
    background-color: #aaa;
    color: #fff;
    padding: 10px;
}

.liste-anpassungen-titel{
    margin-top: 20px;
    margin-bottom: 15px;
    font-weight: bolder;
    color: #555;
}

.liste-anpassungen{
    background-color: #fff;
    height: 585px;
    overflow-y: auto;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}

.liste-anpassungen .verlaufelement{
    padding: 10px;
    margin-top: 15px;
    background-color: #ededed;
    border-radius: 7px;
    font-size: 0.85rem;
}

.liste-anpassungen .verlaufelement.verlaufelement-marked{
    background-color: #FFCC00;
}

.liste-anpassungen .werkzeugname{
    font-weight: bold;
}

.liste-anpassungen .aktionkosten{
    float: right;
}

.liste-anpassungen .aktiondetails{
    margin-bottom: 10px;
}

.liste-anpassungen .aktiondel{
    cursor: pointer;
    display: inline;
    margin-right: 30px;
    /*
    background-color: #fff;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
    padding-right: 5px;
    */    
}

.liste-anpassungen .aktiondel:hover{
    color: #ff0000;
}

.liste-anpassungen .aktionedit{
    cursor: pointer;
    display: inline;
    /* float: right; */
}

.liste-anpassungen .aktionedit:hover{
    color: #00A984;
}

#materialauswahl-dlg .materialimg{
    display: block;
    float: left;
    margin-right: 25px;
    margin-bottom: 25px;
    width: 45%;
    cursor: pointer;
}

#materialauswahl-dlg .materialimg img{
    margin-right: 25px;    
}

#materialauswahl-dlg .materialimg.rahmen{
    box-shadow: 5px 10px 8px #222;
}

#btn-auftrag-neu, #btn-auftrag-neu-leer{
    margin-top: 25px;    
}

#btn-konfiguration-neu{
    background-color: #00A984;
    color: #fff;
}


.mcr-button-default{
    border: 1px solid #dedede;
    padding: 10px;
    background-color: #00A984;
    color: #fff;
}

.mcr-button-default.mct-button-gelb{
    background-color: #fc0;
    color: #222;
}

.mcr-button-text{
    margin-left: 10px;
}

.mcr-button-gruen{
    background-color: #00A984;
    color: #fff;
}

#auftrag-neu-meldung{
    /* margin-top: 50px; */
    background-color: #ededed;
    padding: 25px;
}

#auftrag-neu-ladebild{
    margin-top: 50px;
}

#diagonaler-zuschnitt-dlg, #kantenbearbeitung-dlg{
    text-align: center;
}

#diagonaler-zuschnitt-dlg .kantenauswahl, #kantenbearbeitung-dlg .kantenauswahl{
    margin-top: 25px;
    margin-right: auto;
    margin-left: auto;
    width: 160px;    
}

#diagonaler-zuschnitt-dlg .kantenauswahl .kante-oben, #kantenbearbeitung-dlg .kantenauswahl .kante-oben{
    border: 5px solid #bbb;
    cursor: pointer;
}

#diagonaler-zuschnitt-dlg .kantenauswahl .kante-unten, #kantenbearbeitung-dlg .kantenauswahl .kante-unten{
    border: 5px solid #bbb;
    margin-top: 150px;
    cursor: pointer;
}

#diagonaler-zuschnitt-dlg .kantenauswahl .kante-links, #kantenbearbeitung-dlg .kantenauswahl .kante-links{
    border: 5px solid #bbb;
    float: left;
    height: 150px;
    width: 10px;
    cursor: pointer;
}

#diagonaler-zuschnitt-dlg .kantenauswahl .kante-rechts, #kantenbearbeitung-dlg .kantenauswahl .kante-rechts{
    border: 5px solid #bbb;
    float: right;
    height: 150px;
    width: 10px;
    cursor: pointer;
}

#diagonaler-zuschnitt-dlg .kantenauswahl .kante:hover, #kantenbearbeitung-dlg .kantenauswahl .kante:hover{
    border-color: #ff0000;
}

#diagonaler-zuschnitt-dlg .kantenauswahl .kante.kanteaktiv, #kantenbearbeitung-dlg .kantenauswahl .kante.kanteaktiv{
    border-color: #ff0000;
}


.select-ecke.form-select{
    margin-top: 5px;    
    width: 200px;
    padding: 5px;
    margin-right: auto;
    margin-left: auto;    
}

.input-group.zuschnittdiagonal{
    width: 200px;
    margin-right: auto;
    margin-left: auto;    
}

.liste-anpassungen .verlaufelement a.delkante{
    color: #000;
}

.bgMarked{
    background-color: #FF7F50 !important;
}

.bgMarkedMore{
    background-color: #FF4500 !important;
}

@keyframes border-pulsate {
    0%   { border-color: rgba(255, 0, 0, 1); }
    50% { border-color: rgba(255, 0, 0, 0.1); }
    100%   { border-color: rgba(255, 0, 0, 1); }
}

.kantepulse {
    animation: border-pulsate 2.5s;
    animation-iteration-count: 1;
}


/* =========================================================================== */
/* GLOBALS */

.logo-header{
    margin-top: 15px;
    margin-left: 15px;
    z-index: 99;
    position: absolute;
    background-color: #fff;
    padding: 15px;
    box-shadow: 5px 10px 8px #222;
}


input[type="text"]:focus, select:focus, .form-control:focus, .form-select:focus{
    outline: none;
    border-color: #ddd;
    box-shadow: none;
}

.border-red{
    border-style: solid;
    border-color: #ff0000 !important;
    background-color: #ff0000;
}

fieldset.scheduler-border {
    border: 1px solid #ccc !important;
    padding: 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #ddd;
            box-shadow:  0px 0px 0px 0px #ddd;
}

a.linkformat_t1{
    text-decoration: none;
    color: #00A984;
}

.mouse-pointer{
    cursor: pointer;
}

.underlinedstyle{
    text-decoration: underline;
}

/* =========================================================================== */
/* JQ */

.ui-dialog .ui-dialog-titlebar-close{
    display: none;
}

.ui-dialog .ui-dialog-buttonpane button{
    background-color: #00A984;
    color: #fff;
    border: 1px #777 solid;
}


/* =========================================================================== */
/* BS */

#zuschnitt-dlg .input-group-append{
    width: 200px;
}

/* =========================================================================== */
/* HELPER */

.showdesktop{
    display: block;
}

.showmobile{
    display: none;
}

.clearerDiv{
    clear: both;
}


/* =========================================================================== */
/* TOOLBOX */

.toolbox{
    background-color: #aaa;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
}

.toolbox .toolboxelement{
    width: 160px;
    padding: 10px;
    color: #fff;
    border: 1px solid #777;
    text-align: center;
    display: inline-block;
    color: #fff;
    background-color: #00A984;
    cursor: pointer;
    font-size: 0.9rem;
}
.toolbox .toolboxelement:hover{
    background-color: #dedede;
    color: #00A984;
}

.toolbox .toolboxelement.toolboxelement-done{
    color: #000;
}

.toolbox .toolboxelement#ergebnis{
    background-color: #fff;
    color: #00A984;
    width: 100px;
}
.toolbox .toolboxelement#ergebnis:hover{
    background-color: #777;
    color: #fff;
}

.toolbox #zoom-select{
    padding: 8px;
    font-size: 0.9rem;
}


/* ========================================================================== */
/* BOOTSTRAP */

.user-row .btn.btn-xs, .user-row .btn.btn-sm{
    background-color: #00A984;
    color: #fff;
}

.btn-xs{
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

.row-border-bottom{
    border-bottom-style: solid;
    border-bottom-color: #dedede;
    border-bottom-width: 1px;
    /*padding-bottom:3px;*/
    font-size: 13px;
}

.higlighter:hover
{
    background-color: #ededed;
}


@media only screen and (max-width: 1550px) {  
    .arbeitsplatz{
        width: 73%; 
        min-height: 710px;
    }

    .arbeitsplatte{
        width: 960px;/* = 320 cm */
        height: 465px;/* = 155 cm */
    }
    
    .metadaten{
        width: 25%;        
    }
    
    .ruler {
        display: none;
    }
}

@media only screen and (max-width: 897px) {    
    
    .header{
        top: 0px;
        padding: 0;
    }    
       
    .container{
        margin-left: 0px;
        max-width: 99%;
        width: 99%;
    }
    
    .logo-header{
        right: 10px;
        margin-top: 35px;
    }
    
    .showdesktop{
        display: none;
    }
    
    .showmobile{
        display: block;
    }    
}