/**
 * GDV4 Fahrzeugdatenverwaltung
 *
 * @controller  Fahrzeuge
 * @package     GDV4
 * @version     1.0
 * @fileversion 2
 * @date        2024-08-29
 * @subpackage  Frontend
 * @author      grafconsulting.de
 * @copyright   (c) 2024, Alexander Graf, All Rights Reserved
 */



/* ***************************
SpaltenKlassen in Abhängigkeit der Viewportgrößen
@media (width >= 576px) { .col-sm
@media (width >= 768px) { .col-md
@media (width >= 992px) { .col-lg
@media (width >= 1200px) { .col-xl
@media (width >= 1400px) { .col-xxl
/* ***************************

/* ***************************  
/* ***************************
/* Formatierungen für gdv4
/* ***************************
*/

div.navbar-brand{
    display: none !important;
}

div.topangebot{
    background-color: #ffff00;
} 
tr.topangebot {
    --table-bg: #ffff00;
}

div.topangebot div div#fahrzeug_preis_netto, div.topangebot div div#fahrzeug_preis_brutto{
    font-size: calc(1.2rem + 0.2vw);
    font-weight: bold;
}

div#topangebotliste{
    font-size: calc(1.2rem + 0.2vw);
    text-align: center;
}

/* ***************************
/* component gdv4
/* ***************************
*/

span.fehlermeldung{
    color: red;
    font-weight: bold;
}

.fahrzeug_data_h2{
    font-size: calc(1.2rem + 0.1vw);
}

div#fahrzeug_ausstattungen{
    column-count: 3;
}

.liste_fahrzeuge_label{
    display: none;
}
@media (max-width: 991.98px){
    div#fahrzeug_ausstattungen{
        column-count: 2;
    }
    thead{
        display: none;
    }
    .liste_fahrzeuge_label{
        display: inline-block;
        width: 10%;
        min-width: 10rem;
        float: left;
    }
    .liste_fahrzeuge_data{
        padding-left: 10rem;
    }
}
@media (max-width: 575.98px){
    div#fahrzeug_ausstattungen{
        column-count: 1;
    }
    div#fahrzeug_vorschaubilder{
        display: none;
    }
    #fahrzeug_tecdataundpreis .col-xs-6{
        width: 50%;
    }
    tr, .row{
        margin-left: 0;
        margin-right: 0;
    }
    td#gdv4_liste_fahrzeuge_pic {
        border-bottom: none;
    }
    td#gdv4_liste_fahrzeuge_data {
        border-bottom: solid 1px;
    }
}

@media (min-width: 1200px){
    .fahrzeug_vorschaubild.col-xl-2{
        width: 120px;
    }
}

@media print {

    table#gdv4_liste_fahrzeuge tfoot, #fahrzeug_vorschaubilder, #fahrzeug_bilder {
        display: none;
    }
    #fahrzeug_tecdataundpreis .data{
        width:50%;
    }
    #fahrzeug_tecdataundpreis .label{
        width:50%;
    }
    #fahrzeug_bilderunddaten{
        margin-top: 10mm;
    }
    #print_fahrzeug_adresse{
        position: absolute;
        top: 0;
        right: 0;
    }
    #fahrzeug_tecdataundpreis {
        width: 100%;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-gap: 10px;
        display: -ms-grid;
        -ms-grid-columns: 50% 50%;
        -ms-grid-gap: 10px;
    }
    #fahrzeugdaten_h2{
        grid-row: 1;
        grid-column: 1;
        -ms-grid-column:1;
        -ms-grid-row:1;
    }
    #fahrzeug_preis{
        grid-row: 2 ;
        grid-column: 1;
        -ms-grid-column:1;
        -ms-grid-row:2;
        -ms-grid-column-align: start;
    }
    #fahrzeug_daten{
        grid-row: 3 / 5;
        grid-column: 1 ;
        -ms-grid-column:1;
        -ms-grid-row:4;
    }
    #fahrzeug_masseundgewichte{
        grid-row: 4 ;
        grid-column: 2 ;
        -ms-grid-column:2;
        -ms-grid-row:4;
    }
    #fahrzeug_print_bild{
        grid-row: 1 / 4;
        grid-column: 2 ;
        -ms-grid-column:2;
        -ms-grid-row:1;
        -ms-grid-column-align: start;
        -ms-grid-row-align: start;
        -ms-grid-row-span: 3;
        -ms-grid-row-align: stretch;
    }
    div#fahrzeug_ausstattungen{
        column-count: 3;
    }

    #gdv4_liste_fahrzeuge_pic, #gdv4_liste_fahrzeuge_head_pic{
        width: 25mm;
    }
    #gdv4_liste_fahrzeuge_data, #gdv4_liste_fahrzeuge_head_data{
        width: 160mm;
        break-after: avoid;
    }
    #gdv4_liste_fahrzeuge_row1, #gdv4_liste_fahrzeuge_head_row1{
        width: 90mm;
        break-after: avoid;
    }
    #gdv4_liste_fahrzeuge_row2, #gdv4_liste_fahrzeuge_head_row2{
        width: 70mm;
        break-after: avoid;
    }
    #gdv4_liste_fahrzeuge_row3, #gdv4_liste_fahrzeuge_head_row3{
        width: 90mm;
        break-after: avoid;
    }
    #gdv4_liste_fahrzeuge_row4, #gdv4_liste_fahrzeuge_head_row4{
        width: 70mm;
        break-after: avoid;
    }
}

fieldset#jform_mod_gdvfahrzeuge label:hover, fieldset#jform_Fahrzeugart .form-check:hover{
    background-color: #eee;
}

/*modales Bildfenster:*/
.modal-dialog{
    max-width:1030px;
}

/* ***************************
/* Bootstrap 4 Modal with Carousel
/* ***************************
*/

button.gdv4_carousel{
    background-color: inherit;
    border: none;
    padding: 0;
}

.modal-content {
    border:none;
}
.modal-body {
    padding: 0;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23009be1' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
    width: 30px;
    height: 48px;
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23009be1' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
    width: 30px;
    height: 48px;
}

/* ***************************
/* Ende Bootstrap 4 Modal with Carousel
/* ***************************
*/


/* ***************************
/* component gdv4 gdv4 (Kategorienauswahl)
/* ***************************
*/


fieldset#jform_Fahrzeugart label, fieldset#jform_mod_gdvfahrzeuge label{
    min-height: 80px;
}

@media (min-width: 980px){
    fieldset#jform_Fahrzeugart{
        column-count: 2;
    }
}

fieldset#jform_Fahrzeugart input{
    margin-top: 30px;
    display: none;
}
fieldset#jform_Fahrzeugart label{
    background-repeat: no-repeat;
    padding-left: 140px;
    padding-top: 30px;
    height: 50px;
    font-size: 16px;
    display: grid;
}

/*
label.alle{
    background-image: url("../../../images/alle.png");
}
label.Car{
    background-image: url("../../../images/Car.pNg");
}
label.Bus{
    background-image: url("../../../images/Bus.png");
}
label.VanUpTo7500{
    background-image: url("../../../images/VanUpTo7500.png");
}
label.TruckOver7500{
    background-image: url("../../../images/TruckOver7500.png");
}
label.Trailer{
    background-image: url("../../../images/Trailer.png");
}
*/

/* ***************************
/* Ende component gdv4 gdv4 (Kategorienauswahl)
/* ***************************
*/

#fahrzeug_accessories{
    padding-top: 10px;
}

.fahrzeug_vorschaubild{
    padding-top: 3px;
}

/* ****************************
/* Formatierung der Fahrzeugliste
/* ****************************
*/

/* schwebende Kopfzeile */
#gdv4_liste_fahrzeuge_head{
    padding: 0px;
    border: 1px solid #bbbbbb;
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
    background-color: #ffffff;
    /* margin-top: -80px; */
    opacity: 0.9;
}

.gdv4_h1 h1{
    font-size: calc(0.6rem + 0.9vw);
}


/* ****************************
/* Formatierung der FahrzeugDatenblatt
/* ****************************
*/

#print_mail_buttons{

    /*margin-top: -45px;*/
    display: block;
    position: absolute;
    top: 5em;
    right: 1em;
    z-index: 10;

}
@media print {
    #print_mail_buttons{
        display: none;
    }
    div.topangebot{
        background-color: #ffffff;
    }
    .col-pr {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 0%;
        flex: 1 0 0%;
    }
    .row-cols-pr-auto > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
    }
    .row-cols-pr-1 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%;
    }
    .row-cols-pr-2 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%;
    }
    .row-cols-pr-3 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.3333333333%;
    }
    .row-cols-pr-4 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%;
    }
    .row-cols-pr-5 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 20%;
    }
    .row-cols-pr-6 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.6666666667%;
    }
    .col-pr-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
    }
    .col-pr-1 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 8.33333333%;
    }
    .col-pr-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .col-pr-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%;
    }
    .col-pr-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .col-pr-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .col-pr-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%;
    }
    .col-pr-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .col-pr-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .col-pr-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 75%;
    }
    .col-pr-10 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 83.33333333%;
    }
    .col-pr-11 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 91.66666667%;
    }
    .col-pr-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%;
    }
    .offset-pr-0 {
        margin-left: 0;
    }
    .offset-pr-1 {
        margin-left: 8.33333333%;
    }
    .offset-pr-2 {
        margin-left: 16.66666667%;
    }
    .offset-pr-3 {
        margin-left: 25%;
    }
    .offset-pr-4 {
        margin-left: 33.33333333%;
    }
    .offset-pr-5 {
        margin-left: 41.66666667%;
    }
    .offset-pr-6 {
        margin-left: 50%;
    }
    .offset-pr-7 {
        margin-left: 58.33333333%;
    }
    .offset-pr-8 {
        margin-left: 66.66666667%;
    }
    .offset-pr-9 {
        margin-left: 75%;
    }
    .offset-pr-10 {
        margin-left: 83.33333333%;
    }
    .offset-pr-11 {
        margin-left: 91.66666667%;
    }
    .g-pr-0,
    .gx-pr-0 {
        --gutter-x: 0;
    }
    .g-pr-0,
    .gy-pr-0 {
        --gutter-y: 0;
    }
    .g-pr-1,
    .gx-pr-1 {
        --gutter-x: 0.25rem;
    }
    .g-pr-1,
    .gy-pr-1 {
        --gutter-y: 0.25rem;
    }
    .g-pr-2,
    .gx-pr-2 {
        --gutter-x: 0.5rem;
    }
    .g-pr-2,
    .gy-pr-2 {
        --gutter-y: 0.5rem;
    }
    .g-pr-3,
    .gx-pr-3 {
        --gutter-x: 1rem;
    }
    .g-pr-3,
    .gy-pr-3 {
        --gutter-y: 1rem;
    }
    .g-pr-4,
    .gx-pr-4 {
        --gutter-x: 1.5rem;
    }
    .g-pr-4,
    .gy-pr-4 {
        --gutter-y: 1.5rem;
    }
    .g-pr-5,
    .gx-pr-5 {
        --gutter-x: 3rem;
    }
    .g-pr-5,
    .gy-pr-5 {
        --gutter-y: 3rem;
    }
}

/* *****************************************************************************
/* Angebotsblatt
***************************************************************************** */

#angebotsblatt{
    width: 1100px;
    font-size: 20px;
}
#angebotsblatt h2{
    font-size: 36px;
}
#angebotsblatt_kopf{
    max-height: 64px;
}
#angebotsblatt_internenummer {
    font-size: 96px;
    font-weight: bold;
    margin-top: -40px;
}
#angebotsblatt_kopf.topangebot{
    max-height: 150px;
    background-color: #ffffff;
    font-weight: bold;
}
#angebotsblatt_adresse{
    font-size: 30px;
}

#angebotsblatt_model_container {
    width: 1100px;
    height: auto;
    overflow: hidden;
    font-weight: bold;
}
#angebotsblatt_model_text {
    display: inline-block;
    font-size: 48px;
}
.angebotsblatt_preis{
    font-size: 72px;
    margin-top: -20px;
    margin-bottom: 10px;
}
#angebotsblatt_daten, #angebotsblatt_fahrzeug_accessories{
    padding-top: 20px;
}
button a{
    text-decoration: none;
}
span.angebotsblatt_topangebot{
    font-size: 80px;
}

/* ****************************************************
module:
******************************************************* */
.mod_gdvfahrzeuge #jform_mod_gdvfahrzeuge {
    column-count: 1;
}

.moduletable_nurGewerbe {
  background-color: #ffdd40;
  height: 3em;
}
.moduletable_nurGewerbe .card-body {
  padding: 1px 30px;
}

/* *****************************************************************************
Modul Topangebot
***************************************************************************** */
/*
#mod_topangebot {
    display: flex;
    flex-wrap: wrap;
}

.main-top #mod_topangebot {
    flex-direction: row;
}

.main-top #mod_topangebot_bild,
.main-top #mod_topangebot_data {
    width: auto;
}

.sidebar-right #mod_topangebot {
    flex-direction: column;
}

.sidebar-right #mod_topangebot_data {
    order: -1; 
}
*/

#fahrzeugdaten_h2 h1.fahrzeug{
    font-size: calc(0.8rem + 0.6vw);
}
#fahrzeugdaten_h2 h2.fahrzeug{
    font-size: calc(0.8rem + 0.5vw);
}

.mod_topangebot_fahrzeug_data_side_label{
    min-width: 100px;
    max-width: 200px;
}
.mod_topangebot_fahrzeug_data_side{
    min-width: 100px;
    max-width: 200px;
}

/* *****************************************************************************
Modul LetzteFahrzeuge
***************************************************************************** */
#mod_letztefahrzeug{
    padding: 10px;
}

#mod_letztefahrzeug_data .fahrzeug{
    font-size: 1.1rem;
}



/* *****************************************************************************
Modul Fahrzeuge
***************************************************************************** */
fieldset#jform_mod_gdvfahrzeuge input{
    margin-top: 30px;
    display: none;
}
fieldset#jform_mod_gdvfahrzeuge label{
    font-size: 16px;
    text-align: center;
}

fieldset#jform_mod_gdvfahrzeuge label div{
    height: 100%;
}
fieldset#jform_mod_gdvfahrzeuge label span{
    vertical-align: middle;    
}

@media (min-width:  576px) {
    fieldset#jform_mod_gdvfahrzeuge label div .bild{
       /* float: left;*/
        text-align: right;
    }
    fieldset#jform_mod_gdvfahrzeuge label div .text{
        padding-top: 20px;
        text-align: left;
    }
}

@media (min-width: 768px) {
    fieldset#jform_mod_gdvfahrzeuge label div .bild{
    }
    fieldset#jform_mod_gdvfahrzeuge label div .text{
        padding-top: 20px;
    }
}

@media (min-width:  992px) { 
    fieldset#jform_mod_gdvfahrzeuge label div .bild{
        text-align: center;
    }
    fieldset#jform_mod_gdvfahrzeuge label div .text{
        /*clear: both;*/
        padding-top: 0;
        text-align: center;
    }
}

@media (hmin-width:  1200px) {
    fieldset#jform_mod_gdvfahrzeuge label div .bild{
    }
    fieldset#jform_mod_gdvfahrzeuge label div .text{
        padding-top: 0;
    }
}
@media (min-width:  1400px) {
    fieldset#jform_mod_gdvfahrzeuge label div .bild{
        text-align: right;
    }
    fieldset#jform_mod_gdvfahrzeuge label div .text{
        padding-top: 20px;
        text-align: left;
    }
}