body {
  padding-top: 1rem;
  overflow-wrap: break-word;
}
.starter-template {
  padding: 3rem 1.5rem;
  text-align: center;
}
a {color:#606060;outline: 0;}
a:hover {color:#808080;text-decoration:none;}


.btn:focus,.btn:active {
  outline: none !important;
  box-shadow: none !important;
}

#to-top{display:none;}
#stage{display:none;text-align:center;}
#modalConfirmation{display:none;}
#pay-signup-invoice{display:none;}
#modalMessage{display:none;}
#modalSaveError{display:none;}
#modalAddMemberForm{display:block;}
.datepicker-headline{border:solid #ccc 1px;}
.pwstrength{display:inline-block;}

#t-shirt{margin-left:10px;padding:5px;background:#eee; display:none;}
label[for=shipping]{margin-left:10px;}

.phone-helpbox, .helpbox{border:solid #4589d6 1px;padding:10px;border-radius: .25rem;}
.phone-helpbox, .helpbox{display:none;}
<!-- blue box -->
.phone-helpbox.membertype, .helpbox.membertype{border:solid #4589d6 1px;}
.phone-helpbox.membertype h3 li, .helpbox.membertype{color:#4589d6;}
.phone-helpbox.membertype i, .helpbox.membertype i{color:#4589d6;}
.helpbox.membertype{display:block;}
.phone-helpbox.phone, .helpbox.phone{border:solid #4589d6 1px;}
.phone-helpbox.phone h3 li, .helpbox.phone{color:#4589d6;}
.phone-helpbox.phone i, .helpbox.phone i{color:#4589d6;}

.helpbox.name{border:solid #e51937 1px;}
.phone-helpbox.name h3, .helpbox.name h3{color:#e51937;}

.helpbox.address{border:solid #e51937 1px;}
.phone-helpbox.address h3, .helpbox.address h3{color:#e51937;}

.phone-helpbox.email, .helpbox.email{border:solid #6c757d 1px;}
.phone-helpbox.email h3, .helpbox.email h3{color:#6c757d;}
.phone-helpbox.email li, .helpbox.email li{color:#6c757d;}

<!-- green box -->
/* 
   does not work for phone-helpbox here, must be below the li declaration? 
   .phone-helpbox.zipcode, .helpbox.zipcode{border:solid #81b55c 1px;} 
*/
.phone-helpbox.zipcode h3, .helpbox.zipcode h3{color:#81b55c;}
.phone-helpbox.zipcode li, .helpbox.zipcode li{color:#81b55c;}
.phone-helpbox.zipcode, .helpbox.zipcode{border:solid #81b55c 1px;}

.phone-helpbox.password, .helpbox.password{border:solid #81b55c 1px;}
.phone-helpbox.password h3, .helpbox.password h3{color:#81b55c;}
.phone-helpbox.password li, .helpbox.password li{color:#81b55c;}

<!-- orange box -->
.phone-helpbox.birthday h3, .helpbox.birthday h3{color:#ffc107;}
.phone-helpbox.birthday li, .helpbox.birthday li{color:#ffc107;}
.phone-helpbox.birthday, .helpbox.birthday{border:solid #ffc107 1px;}

<!-- lightblue box -->
.phone-helpbox.vin h3, .helpbox.vin h3{color:#17a2b8;}
.phone-helpbox.vin li, .helpbox.vin li{color:#17a2b8;}
.phone-helpbox.vin, .helpbox.vin{border:solid #17a2b8 1px;}

#modalLoginOk{display:none;}
#modalLoginError{display:none;}
#modalForgotPw{display:none;}

.carousel-control-next, .carousel-control-prev {width:5%;font-size:25pt;}
.carousel-indicators li {
  background-color:#ccc;
}
.carousel-indicators .active{
  background-color: #aaa;
}

.jumbotron{min-height:454px;}

.fp-box{min-height:300px;}

.img-textwrap{
  float: right;
  margin: 0px;
}
.see-details{margin-top:10px;}
@media print {
  .noprint{display:none !important;}
}
.competition-price-total{width:35px;float:left;text-align:right;}
#reason{min-width:300px;width:100%;height:100px;}

/* shows scrollbar on huge content */
.popover-body {
  max-height: 500px;
  overflow-y: auto;
  white-space:pre-wrap;
}

table#updateProfileFormi  {
  white-space:pre-wrap;
}

#updateProfileForm > tbody > tr > td:nth-child(2) > a, #profile-status {
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
  width:200px !important;
  white-space: pre-wrap !important;
}

.profile-input{
  width:300px !important;
  padding-left:5px;
}

/* show_invoice.php */ 
#showInvoiceCreditsFormBtn{margin-bottom:10px;}
#invoiceCreditsForm{
  display:none;
  background-color:#eee;
  padding:10px;
  margin:10px 0;
}
#invoiceCreditsForm input{margin-bottom:10px;}

img.cover{max-height:500px;}

@media (max-width:575px){
  .container{padding: 10px !important}
  #updateProfileForm > tbody > tr > td {
    max-width:205px !important;
  }

  .profile-input{
    width:200px !important;
    padding-left:5px;
  }
}

.membercard-body > .container-fluid{
  background:#e51937;
  color:#333333;
}
.membercardSubTitle{
  font-weight:bold;
}
.membercardText{
  color:#FFFFFF;
}
.membercardText.name{
  font-size:150%;
  margin-bottom:30px;
}
.membercardLogo {
  padding-top:15px;
  margin-top:15px !important;
  height: 100px;
  width: 100px;
  margin: 0 auto;
  background-image: url('https://teslaownersdenmark.dk/assets/img/TOC-Denmark_100x100-red-border.png');
  animation-timing-function: ease-in-out;
  animation-name: logo-pulse;
  animation-duration: 1.5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-play-state: running;
}
/*
#heading0 > a.btn.btn-link > h5
.card > .card-header > a > h5:after{
#heading5 > a.btn.btn-link > h5 > small > svg > path
#heading0 > a:nth-child(1) > svg > path
*/
.card > .card-header > a:nth-child(1) > svg > path  {
  color:gray;
}
.hidden, .copy-link-text{display:none;font-weight:bold;font-size: 70%; color:gray;}
.copy-link-text-input {position: fixed; top:-100px;}
.copy-faq-link, .a-name-link-text{font-size: 70%; color:gray;}
.accordion .card-header:after {
    font-family: 'FontAwesome';  
    content: "\f068";
    float: right; 
}

#confirmUndoBtn{display:none;}

/* to void setting for every image in articles, news, events etc. AND to see smaller images in the editor */
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
img.tod{
  border-width: 1px; border-style: solid; margin-left: 3px; margin-right: 3px; margin-top: 3px; max-width: 600px;
}
iframe.tod{
  position:absolute;
  border-width: 1px; border-style: solid; margin-left: 3px; margin-right: 3px; margin-top: 3px; 
  height:100%; min-height: 160px; max-height: 360px; width:100%; max-width: 640px;
}
@media screen and (max-width: 992px) and (min-width: 421px) {
  #content-container > img {
    max-width: 320px;
  }
  img.tod{
    border-width: 1px; border-style: solid; margin-left: 3px; margin-right: 3px; max-width:320px;
  }
  iframe.tod{
    border-width: 1px; border-style: solid; margin-left: 3px; margin-right: 3px; height:100%; width:100%; max-width:320px;
  }
}
@media (max-width:420px){
  #content-container > img {
    max-width: 300px;
  }
  img.tod{
    border-width: 1px; border-style: solid; margin-left: 3px; margin-right: 3px; max-width:300px;
  }
}

@keyframes logo-pulse {
  0% {
    transform: scale(.9);
    border-radius: 100%;
  }

  100% {
    transform: scale(1.0);
  }
}