/*
Copyright 2020 immersight GmbH.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
/* 
    Created on : Oct 15, 2020, 4:36:39 PM
    Author     : Waldemar Albach
*/

html, body {
    width: 100%;
    padding: 0;
    margin: 0;
    color: black;
    background-color: white;
    font-family: "Roboto", sans-serif !important;
    background-image: url("/img/background_bottom.svg");
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.ext_description p {
    max-height: 150px; 
    height: auto; 
    overflow-y: auto;
}

.nav-logo {
    max-height: 40px;
    height: auto;
    vertical-align: middle;
    max-width: calc(100vw - 900px); 
}

.main {
    flex: 1 0 auto;
}

.steps {
    display: inline-block; 
    padding: 2px;
}

.shop-light nav.nav-extended {
    background-color: lightgrey !important;
}

.btn:hover, .btn-large:hover, .btn-small:hover {
    background-color: #009fe3;
}

.btn:focus, .btn-large:focus, .btn-small:focus, .btn-floating:focus {
    background-color: #009fe3;
}

.btn {
    background-color: #009fe3;
}

.card-action .row {
    margin-bottom: 0px;
}

.container {
    margin: 0 auto;
    max-width: 1280px;
}

.card-content, .card-action {
    padding: 10px !important;
}

.btn.active {
    background-color: #009fe3;
}

.btn.green {
    margin: 2px;
}

.pending {
    background-color: lightgrey
}

.completed {
    background-color: lightgrey
}

.card.bordered {
    background-color: white !important;
    border: 3px solid lightgrey;
    border-radius: 10px;
}
.card-action:last-child {
    border-radius: 0 0 10px 10px !important;
}

label {
    color: black;
}

.selected .card {
    background-color: #009fe3 !important;
    color: white;
}

.selected span, .selected label {
    color: white;
}

[type="checkbox"] ~ span:not(.lever) {
    font-size: 1rem !important;
}

div.bordered-icon {
    margin-bottom: 8px;
}

.grid_modules {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 0px;
}

.modules .bordered-icon,
.modules .bordered-icon .material-icons, 
.modules .bordered-icon .immersight-icons {
    background-color: #009fe3;
}

.modules .bordered-icon,
.modules .material-icons span, 
.modules .immersight-icons span{
    color: white;
}

.modules .selected .bordered-icon,
.modules .selected .bordered-icon .material-icons, 
.modules .selected .bordered-icon .immersight-icons {
    background-color: white;
}

.modules .selected .bordered-icon,
.modules .selected .bordered-icon .material-icons span, 
.modules .selected .bordered-icon .immersight-icons span {
    color: #009fe3;
}

span {
    color: black;
}

[type="checkbox"].filled-in:not(:checked) + span:not(.lever)::after {
    border: 2px solid lightgrey !important;
    background-color: transparent !important;
}

[type="checkbox"].filled-in:checked + span:not(.lever)::after {
    border: 2px solid lightgrey !important;
    background-color: transparent !important;
}


[type="checkbox"].filled-in:checked + span:not(.lever)::before {
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
}

.selected [type="checkbox"].filled-in:not(:checked) + span:not(.lever)::after {
    border: 2px solid lightgrey !important;
    background-color: transparent !important;
}

.selected [type="checkbox"].filled-in:checked + span:not(.lever)::after {
    border: 2px solid white !important;
    background-color: transparent !important;
}

.selected [type="checkbox"].filled-in:checked + span:not(.lever)::before {
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.border-label-container {
    display: none;
}

:not(.selected).recommendation .border-label{
    border: 3px solid #69AE00;
}

:not(.selected).recommendation .border-label>.border-label-container {
    display: block;
}

:not(.selected).warning .border-label{
    border: 3px solid #cc3300;
}

:not(.selected).warning .border-label>.border-label-container {
    display: block;
}

.border-label>.border-label-container {
    position: absolute;
    top: -15px;
    width: 100%;
    text-align: center;
} 

.border-label>.border-label-container>label{
    background-color: #69AE00;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 3px;
}

.border-label>.border-label-container>label.has-warning {
    background-color: #cc3300;
}


.bordered-icon {
    display: inline-block;
    padding: 16px;
    background-color: #009fe3;
    border: none;
    border-radius: 10px;
}

.bordered-icon i.large {
    font-size: 5rem !important;
}

.border-icon.full-width {
    width: 100%;
}

.wizard-selection {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.wizard-selection .card {
    background-color: #009fe3 !important;
    border-color: #009fe3 !important;
    border-radius: 10px 0 0 10px !important;
    border: none !important;
    min-height: 150px;
    width: 250px;
}

.wizard-selection .card.close {
    width: 25px;
}

.wizard-selection .card.close .card-content{
    display: none;
}

.wizard-selection .card span {
    color: white !important;
}

.selectable:hover {
    cursor: pointer;
}

.wizard-selection > div:first-child{
    position: relative;
}

.selection-trigger {
    width: 25px;
    height: 100%;
    position: absolute;
    background: black;
    border-radius: 10px 0 0 10px;
    background-color: #009fe3 !important;
    border-right: 1px solid white;
}

.selection-trigger:hover {
    cursor: pointer;
}

.wizard-selection .card.open .arrow-left {
    display: none;
}

.wizard-selection .card.close .arrow-right {
    display: none;
}

.wizard-selection .card.close .card-content {
    margin-left: 0px !important;
    width: 0;
}


.input-field .prefix.active {
    color: #009fe3 !important;
}

input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.green {
    background-color: #69AE00;
}

.shopping-cart {
    border: 1px solid white;
    border-radius: 10px;
    text-transform: capitalize;
}

.uppercase {
    text-transform: uppercase;
}

.bold {
    font-weight: bold !important;
}

[type="checkbox"].filled-in:checked + span:not(.lever)::before {
    border-right: 4px solid #000;
    border-bottom: 4px solid #000;
    border-radius: 3px !important;
}

.selected [type="checkbox"].filled-in:checked + span:not(.lever)::before {
    border-right: 4px solid #fff !important;
    border-bottom: 4px solid #fff !important;
    border-radius: 3px !important;
}

[type="checkbox"].filled-in:checked + span:not(.lever)::before {
    top: -12px !important;
    left: 0px !important;
    width: 12px !important;
    height: 25px !important;
    transform: rotateZ(42deg) !important;
}

td {
    padding: 10px 5px !important;
}

.shoppingCartTable {
    table-layout: fixed;
    width: 100%;
}

table.tiny-padding td {
    padding: 3px 3px !important;
}

table.small-padding td {
    padding: 5px 5px !important
}

table.no-border tr {
    border: none !important;
}


.number-select.select-wrapper {
    max-width: 100px;
}

.number-select.select-wrapper input {
    color: white !important;
    border-bottom: 1px solid white !important;
    margin: 0 !important;
}

.select-wrapper ul li span {
    color: #009fe3 !important;
}

.number-select.select-wrapper .caret {
    fill: white !important;
}

.remove-element i {
    border: 1px solid transparent;
    border-radius: 3px;
}

.remove-element i:hover {
    border: 1px solid white;
    border-radius: 3px;
}

.page-footer {
    background-color: lightgrey;
    height: 50px;
    bottom: 0;
    width: 100%;
    margin-top: 0px;
    padding-top: 0px;
}

#dropDownbase {
    background-color: #f5f5f5;
    border-radius: 25px;
    min-width: 130px;
    padding: 0px;
    padding-right: 0px;
    padding-left: 0px;
    padding-left: 5px;
    padding-right: 10px;
    text-align: center;
}

#profileImage {
    border-radius: 50px;
    height: 30px;
    width: 30px;
    float: left;
    margin-top: 2px;
    margin-right: 0px;
}

.center-cropped {
    object-fit: cover;
    object-position: center;
    height: 200px;
    width: 200px;
}

.immersight-color {
    color: #009fe3 !important;
}

.immersight-background-color {
    background-color: 	#009fe3 !important;
}

.clickable {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    z-index: 1; 
}

.wizard-contract {
    position: fixed;
    right: 0;
    top: 10%;
    transform: translateY(-10%);
    z-index: 10;
}

.wizard-contract .card {
    background-color: #009fe3 !important;
    border-color: #009fe3 !important;
    border-radius: 10px 0 0 10px !important;
    width: 250px;
}

.wizard-contract .card span {
    color: white !important;
}

.no-margin {
    margin: 0 !important;
}

.no-padding {
    padding: 0 !important;
}

.no-margin-bottom {
    margin-bottom: 0 !important;
}

input:not([type]):focus:not([readonly]), 
input[type=text]:not(.browser-default):focus:not([readonly]), 
input[type=password]:not(.browser-default):focus:not([readonly]), 
input[type=email]:not(.browser-default):focus:not([readonly]), 
input[type=url]:not(.browser-default):focus:not([readonly]), 
input[type=time]:not(.browser-default):focus:not([readonly]), 
input[type=date]:not(.browser-default):focus:not([readonly]), 
input[type=datetime]:not(.browser-default):focus:not([readonly]), 
input[type=datetime-local]:not(.browser-default):focus:not([readonly]), 
input[type=tel]:not(.browser-default):focus:not([readonly]), 
input[type=number]:not(.browser-default):focus:not([readonly]), 
input[type=search]:not(.browser-default):focus:not([readonly]), 
textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #009fe3;
    -webkit-box-shadow: 0 1px 0 0 #009fe3;
    box-shadow: 0 1px 0 0 #009fe3;
}

input:not([type]):focus:not([readonly])+label, 
input[type=text]:not(.browser-default):focus:not([readonly])+label, 
input[type=password]:not(.browser-default):focus:not([readonly])+label, 
input[type=email]:not(.browser-default):focus:not([readonly])+label, 
input[type=url]:not(.browser-default):focus:not([readonly])+label, 
input[type=time]:not(.browser-default):focus:not([readonly])+label, 
input[type=date]:not(.browser-default):focus:not([readonly])+label, 
input[type=datetime]:not(.browser-default):focus:not([readonly])+label, 
input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label, 
input[type=tel]:not(.browser-default):focus:not([readonly])+label, 
input[type=number]:not(.browser-default):focus:not([readonly])+label, 
input[type=search]:not(.browser-default):focus:not([readonly])+label, 
textarea.materialize-textarea:focus:not([readonly])+label {
    color: #009fe3 !important;
}

.select-wrapper input.select-dropdown:focus {
    border-bottom: 1px solid #009fe3 !important;
}

.selected .select-wrapper input.select-dropdown:focus {
    border-bottom: 1px solid white !important;
}

[type="checkbox"]:checked + span:not(.lever)::before {
    border-right: 2px solid #009fe3 !important;
    border-bottom: 2px solid #009fe3 !important;
}

.custom-icon {
    width: 24px;
    height: 24px;
}

.tariff-disabled .card {
    background-color: lightgrey !important;
}

.tariff-disabled [type="checkbox"].filled-in:disabled:not(:checked)+span:not(.lever):after {
    border-color: black !important;
    background-color: lightgrey !important;
}

.mobile-wrapper {
    padding-left: 0.75em; 
    padding-right: 0.75em;
}

/*border for upper left and top right corner of tabs*/
table.tab-row {
    overflow: hidden;
    border-radius: 7px 7px 0 0;
}

table.tab-row td {
    font-weight: 		bold;
    padding: 			0 !important;
    text-decoration: 	none;
    background-color:   white;
    color:              black;
    width:              50%;
    border-radius:      0;
}

table.tab-row td span {
    color: black;
}


table.tab-row td:hover {
    background: 		rgba(84, 110, 122, 0.2);
}

table.tab-row .selected span {
    color: black;
}

table.tab-row tr {
    border: none !important;
}

table.tab-row a {
    width: 100%;
    height: 100%;
    display:block;
    padding: 10px 5px !important;
}

table.tab-row td.last {
    background-color: #009fe3 !important;
    color: white !important;
}

table.tab-row td.last span {
    color: white !important;
}

.shop-modal .modal .modal-content {
    background-color: white !important;
}

.shop-modal .modal .modal-footer {
    background-color: white !important;
}

.padding-small {
    padding: 0 .5em !important;
}

.card {
    margin: 0.5rem 0 0.5rem 0 !important;;
}

.chip-dropdown.dropdown-content {
    border-radius: 25px;
    top: -50px;
    margin-top: 55px;
    padding: 0px 0px;
    padding-left: 0px;
}

.material-tooltip {
    max-width: 500px;
}

.payment-method-option {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1rem;
  margin: 0.5rem 0 0.5rem 0;
  display: flex;
  flex-direction: column;
}

.payment-method-option .payment-method-logo {
  margin-left: auto;
  height: 32px;
}

.payment-method-option .payment-method-icon {
  font-size: 32px;
  color: #000; 
  margin-left: auto; 
}

.payment-method-option label input[type="radio"] {
  margin-right: 1rem;
}

.payment-method-option label span {
  display: inline-block;
}

.payment-method-option .label-logo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  margin-right: 0.25rem;
}

.payment-method-option .label-tooltip-group {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Adds space between label and tooltip */
}

.payment-method-option label {
  display: flex;
  flex: 1;
  align-items: center;
}

.payment-method-option .iban-container {
  margin-top: 1rem;
  display: flex;
  flex-direction: column
}

.payment-method-option .input-field {
  width: 100%;
}

.payment-method-option .input-field input {
  margin: 0;
  padding: 0;
}

/*___________________________________________________________
    
        Radio Buttons
___________________________________________________________ */

input[type="radio"].with-gap:not(:checked) + span::before,
input[type="radio"].with-gap:not(:checked) + span::after {
  border-color: #000;
}

input[type="radio"].with-gap:checked + span::before {
  border-color: #009fe3;
}

input[type="radio"].with-gap:checked + span::after {
  background-color: #009fe3;
  border-color: #009fe3; 
}


/*___________________________________________________________
    
        MOBILE
___________________________________________________________ */
@media only screen and (max-width: 425px){
    .item-column {
        word-wrap: break-word;
    }
    
    .edit-tariff {
        display: none;
    }
}

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

    .nav-logo {
        max-width: calc(100vw - 180px);
        max-height: 40px;
        height: auto;
        vertical-align: middle;
    }
    
    nav .brand-logo {        
        left: 45%;
    }
    
    .wizard-overview {
        margin-top: 10px;
    }
}

@media only screen and (min-width: 994px) and (max-width: 1030px) {
    .ext_description p {
        max-height: 90px;
    }
}

.blue-grey.darken-3 {
    background-color: white !important;
}

.stick_close {
	cursor: pointer;
	position: relative;
	top: 0px;
	left: 0px;
	float: right;
	font-family: Arial;
	font-size: 17px;
	background-color: #d1d1d1;
	color: #4c4c4c;
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
	text-decoration: none;
	font-family:Arial,sans-serif;
	font-size: 17px;
	font-weight:bold;
}

/*___________________________________________________________
    
        LANGUAGE CHOICE PANEL (localization picker)
___________________________________________________________ */

/* Dropdown button style */
.languageChoiceDropDownButton {
    box-shadow: none;
    display: inline-flex;
}
.languageChoiceDropDownButton.btn:hover, .btn-large:hover, .btn-small:hover {
    background-color: transparent;
    box-shadow: none;
}
.languageChoiceDropDownButton .custom-icon {
    margin-bottom: 3px;
}
.languageChoiceDropDownButton .label {
    padding-left: 10%;
}
.languageChoiceDropDownButton .material-icons{
    margin: 0;
}

/* Dropdown content style */
.languageChoiceDropDownItem {
    width: 100%;
}
.languageChoiceDropDownItem .custom-icon{
    margin-bottom: -6px
}
.languageChoiceDropDownItem .label{
    margin-left: 5px;
}

span.user-tooltip i.tooltipped {
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
    vertical-align: top;
}