/*------------------------------------------------------------------

[Theme Stylesheet]

Project:        ALCAR TUEV CERTIFICATE PAGE
Copyright:      2022 ALCAR WHEELS GmbH
Version:        1.0

-------------------------------------------------------------------*/

/*-----------------------------------------------------------------*/

/* DEFAULT TEMPLATE */ 

/*-----------------------------------------------------------------*/

.container-default { 
    max-width: 900px;
    min-width: 300px;
}

#main-default .headline,
#main-default .form-select {
    font-size: 16px !important;
    color: #5D6777;
}
#main-default .headline {
    font-weight: bold;
    text-transform: uppercase;
}
#main-default .label {
    padding: 8px;
    margin-bottom: -4px;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    color: #000;
}
#main-default .col-form-label {
    padding: 8px;
    margin-top: 6px;
    margin-bottom: -6px;
    font-size: 14px;
    font-weight: 300;
    text-transform: uppercase;
    color: #000;
}

.btn-default {
    width: 100%;
    padding: 12px 20px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    background-color: #d3242e;
    border-color: #d3242e;
    border-radius: .15rem;
}
.btn-default:hover {
    color: #fff;
    background-color: #9e1b22;
    border-color: #9e1b22;
}
.btn-default:active {
    background-color: #d3242e;
    border-color: #d3242e;
}

/* Tabs */
#main-default .tab-group {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}
#main-default .tab-group li a {
    display: block;
    text-decoration: none;
    padding: 15px;
    background: #E0E0E0;
    color: #000;
    font-size: 20px;
    font-weight: bold;
    float: left;
    width: 50%;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
}
#main-default .tab-group li a:focus {
    transition: .5s ease;
}
#main-default .tab-group .active a {
    background: #d3242e;
    color: #ffffff;
}
#main-default .tab-group li.tab:not(.active) a:hover {
    color: #d3242e;
}

/* Separator */
#main-default .separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: #5D6777;
} 
#main-default .separator::before,
#main-default .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ced4da;
}
#main-default .separator:not(:empty)::before {
    margin-right: .5em;
}
#main-default .separator:not(:empty)::after {
    margin-left: .5em;
}

/* Input */
#main-default #tab-content-wheel input {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    color: black;
    border-radius: 0.15rem;
    text-transform: uppercase;
    border: 1px solid #ced4da;
}

#main-default #tab-content-wheel input:-webkit-autofill,
#main-default #tab-content-wheel input:-webkit-autofill:hover, 
#main-default #tab-content-wheel input:-webkit-autofill:focus, 
#main-default #tab-content-wheel input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #fff inset !important;
}

/* Selects */
#main-default select {
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    border-radius: 0.15rem;
    font-style: italic;
}
#main-default select option {
    font-style: normal;
}
#main-default select option:first-child {
    color: #5D6777;
    font-style: italic;
    font-weight: 500;
}
#main-default .form-select:disabled {
    background-color: #E0E0E0;
}
#main-default .form-select[size] optgroup {
    width: 850px;
}
#main-default .form-select[size] optgroup option:hover {
    color: #fff;
}

/* Table */
#result-wheeldetails-table.table-default caption {
    border-bottom: 1px solid #000;
    padding: 8px;
    color: #000;
    font-size: 18px !important;
    font-family: Futura,Arial,sans-serif;
    font-weight: bold;
}
#result-wheeldetails-table.table-default tr th:first-child,
#result-wheeldetails-table.table-default tr td:first-child {
    width: 30%;
} 
#result-wheeldetails-table.table-default tr th:nth-child(2),
#result-wheeldetails-table.table-default tr td:nth-child(2),
#result-wheeldetails-table.table-default tr th:nth-child(3),
#result-wheeldetails-table.table-default tr td:nth-child(3) {
    width: 35%;
}
#result-wheeldetails-table.table-default tr th:nth-child(4),
#result-wheeldetails-table.table-default tr td:nth-child(4) {
    display: none;
}

#result-wheeldetails-table.table-default tr td:nth-child(4) div.axle-combi {
    float: left;
}
#result-wheeldetails-table.table-default tr td:nth-child(4) div.axle-combi img {
    height: 37px;
    margin-top: 6px;
    margin-right: 7px;
}

#result-wheeldetails-table.table-default i.fa-size {
    font-size: 1.1em;
    line-height: .05em;
    vertical-align: -0.04em;
}

#result-wheeldetails-table.table-default .snowchain-img,
#result-wheeldetails-table.table-default .oe-img {
    width: 18px;
    margin-right: 0.25rem!important;
    vertical-align: -0.15em;
}

#result-wheeldetails-table.table-default div.result-info-wheeldetails {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-size: 15px;
}

#result-wheeldetails-table.table-default .border-bottom-black {
    border-bottom: 1px solid #000;
}

/* Modal alert */
#modal-default .modal-content {
    min-height: 100px;
    background-color: rgba(0,0,0,0.75);
    color: #ffffff;
    -moz-box-shadow: rgb(0 0 0 / 30%) 0px 0px 10px;
    -webkit-box-shadow: rgb(0 0 0 / 30%) 0px 0px 10px;
    box-shadow: rgb(0 0 0 / 30%) 0px 0px 10px;
    border: 0;
}
#modal-default .modal-header {
    border: 0;
}
#modal-default .modal-body {
    min-height: 100px;
    text-align: center;
    font-size: 17px;
}
.modal-backdrop {
    background-color: rgba(255, 255, 255, 1);
}

/* Popover */
.popover .popover-body div {
    display: flex;
    min-height: 25px;
    margin: 3px 0px;
}
.popover .popover-body div img {
    align-self: baseline;
}
.popover .popover-body div i {
    align-self: center;
}
.popover .popover-body div span {
    align-self: center;
    margin-left: 10px;
    line-height: 1.2;
}

/* No more tables */
#result-table-alcar-tpms .fa-circle-exclamation,
#result-table-alcar-tpms .fa-circle-info {
    font-size: 1.2rem;
}
#result-table-alcar-tpms .fa-circle-info {
    color: #447CDB;
}

#no-more-tables-tpms caption {
    padding: 8px;
    border-bottom: 1px solid #000;
    color: #000;
    font-family: Futura,Arial,sans-serif;
    font-weight: bold;
}

#no-more-tables-tpms thead tr:first-child th {
    text-transform: uppercase;
    font-weight: normal;
}

#no-more-tables-tpms tr{
    border-bottom: 1px #dee2e6 solid;
}

#no-more-tables-tpms tr.background-grey th,
#no-more-tables-tpms tr.background-grey td,
#no-more-tables-tpms-info div.background-grey:first-child {
    background: #f5f5f5;
}

#no-more-tables-tpms tr th:first-child {
    width: 30%;
}

#no-more-tables-tpms td,
#no-more-tables-tpms th,
#no-more-tables-tpms-info div {
    padding: 10px 8px;
}

#no-more-tables-tpms td[data-title*="[WHEEL-"],
#no-more-tables-tpms td[data-title="[CAR]"] { 
    font-weight: bold;
}
#no-more-tables-tpms td[data-title*="-NOTABLE]"] { 
    display: none;
}

#no-more-tables-tpms-info div.result-info-tpms {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
#no-more-tables-tpms-info div.result-info-tpms i {
    width: 25px;
    margin-right: 1rem!important;
    align-self: center!important;
    vertical-align: middle!important;
}


@media only screen and (max-width: 800px) {

    /* 
    =====================================================================
    Default table
    =====================================================================
    */

    #result-wheeldetails-table.table-default tr th:nth-child(2),
    #result-wheeldetails-table.table-default tr td:nth-child(2),
    #result-wheeldetails-table.table-default tr th:nth-child(3),
    #result-wheeldetails-table.table-default tr td:nth-child(3) {
        display: none;
    }
    #result-wheeldetails-table.table-default tr td[colspan="2"]:nth-child(2),
    #result-wheeldetails-table.table-default tr th:nth-child(4),
    #result-wheeldetails-table.table-default tr td:nth-child(4) {
        display: block;
    }

    #result-wheeldetails-table.table-default tr th:first-child,
    #result-wheeldetails-table.table-default tr td:first-child,
    #result-wheeldetails-table.table-default tr th:nth-child(2),
    #result-wheeldetails-table.table-default tr td:nth-child(2) {
        width: auto;
    }

    #result-wheeldetails-table.table-default tr[class*="border-bottom-black"] {
        border-bottom: none;
    }

    /* 
    =====================================================================
    No more tables
    =====================================================================
    */

    /* Force table to not be like tables anymore */
	#no-more-tables-tpms table, 
	#no-more-tables-tpms caption, 
	#no-more-tables-tpms thead, 
	#no-more-tables-tpms tbody, 
	#no-more-tables-tpms th, 
	#no-more-tables-tpms td, 
	#no-more-tables-tpms tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	#no-more-tables-tpms thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

    #no-more-tables-tpms .tr-headline {
        display: none;
    }
 
	#no-more-tables-tpms td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
		padding-left: 50% !important; 
		white-space: normal;
		text-align: left !important;;
	}
    #no-more-tables-tpms td:first-child { 
        padding-top: 10px!important;
        padding-bottom: 10px!important;
		border-bottom: 1px solid #eee;
        background: #f5f5f5;
	}
 
	#no-more-tables-tpms td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		left: 6px;
		width: 45%; 
		padding-right: 10px;
		/* white-space: nowrap; */
		text-align: left;
		font-weight: bold;
	}

    #no-more-tables-tpms td[data-title*="-NOTABLE]"] { 
        display: block;
    }
    #no-more-tables-tpms td[data-title*="-TABLE]"] { 
        display: none;
    }
 
	/* Label the data & images */
	#no-more-tables-tpms td:before { 
        content: attr(data-title); 
    }
	#no-more-tables-tpms td[data-title="[WHEEL-NOTABLE]"]:before { 
        content: url("../images/ico_wheel.png");
        left: .5625rem;
    }
	#no-more-tables-tpms td[data-title="[CAR]"]:before { 
        content: url("../images/ico_car.png");
    }
}

@media only screen and (max-width: 600px) {

    /* 
    =====================================================================
    Default table
    =====================================================================
    */

    #result-wheeldetails-table.table-default tr td[id="col-headline"]:first-child::after {
        content: ":";
    }

    #result-wheeldetails-table.table-default tr th:first-child,
    #result-wheeldetails-table.table-default tr td:first-child,
    #result-wheeldetails-table.table-default tr td[colspan="2"]:nth-child(2) {
        display: block;
        width: 100% !important;
    }

    #result-wheeldetails-table.table-default tr th:first-child,
    #result-wheeldetails-table.table-default tr td:not([colspan="3"]):first-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    #result-wheeldetails-table.table-default tr th:nth-child(4),
    #result-wheeldetails-table.table-default tr td:nth-child(4) {
        padding-top: 0.2rem;
    }

    /* 
    =====================================================================
    Tabs
    =====================================================================
    */

    #main-default .tab-group{        
        margin: 0 !important;
    }
    #main-default .tab-group li a {        
        width: 100%;
        float: none;
    }
}


/*-----------------------------------------------------------------*/

/* [NEW PAGE] TEMPLATE */ 

/*-----------------------------------------------------------------*/