html {
  background-color: #1186ec;
}

body {
    background-color: #f7fafc;
}

h1, h2 {
    font-size: 20px !important;
}

.card {
    border:0px;
    box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15) !important;
}

.card-head {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.card-header {
  border:0px;
}

.main-container {
    margin-top:60px;
    min-height:calc(100vh - 111px);
}

#main-container {
    opacity: 0;
    transition: opacity 0.2s; 
}

#footer {
    position: relative;
    bottom: 0;
    text-align: center;
    width: 100%;
    max-width:1110px;
    margin-left:auto;
    margin-right:auto;
    font-size: 75%;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 5px;
    opacity: 0;
    transition: opacity 0.2s; 
}

.show-block {
    opacity: 1 !important;
}

.undertitle {
    text-align:center;
    margin-bottom:6px;
}

.information-card {
    background: none;
    color:#73859c;
    margin-bottom:20px;
    overflow:hidden;
    padding-left:61px;
    min-height:100px;
    box-shadow: none !important;
    padding-bottom:30px;
}

.information-icon {
    position: relative;
    left: 40px;
    bottom: -100px;
    transform: translate(-50%, -50%);
    width:50px;
    height:50px;
    z-index:10;
    pointer-events: none;
}

.unitTypesScalebar {
    margin-top:-6px;
}

.textTwirre {
  color: #575757;
  background: #eaebec;
  padding:3px;
  border-radius: .25rem;
  margin-top:3px;
  position: relative;
  margin-left: 2px;
  font-size:75%;
}

button .textTwirre {
  background:#479eff;
  color:white;
  top: -1px;
}

#btn-pre-mobile {
  display:none;
}

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

    .bubble {
      margin-bottom: 5px;
    }  

    .alternating-padding-mobile {
      padding-top:10px !important;
    }

    .information-card {
        margin-top:65px;
        padding-left:0px;
    }

    .information-icon {
        display:none;
    }

    .form-group-alternative {
        margin-left: 7px;
        margin-right: 7px;
    }

    .unitTypesScalebar {
        margin-top:5px;
    }

    .main-container {
        margin-top:10px;
        min-height:calc(100vh - 56px);
    }

    .scalefinderIllustration {
        margin-bottom:-70px !important;
    }

    .scalebarIllustration {
        margin-bottom:-65px !important;
    }

    #scalebargenerator .card-body {
        background-image:none !important;
    }

    #btn-pre-desktop, #btn-pre-desktop-div {
      display:none;
    }

    #btn-pre-mobile {
      display:block;
      text-align:left;
      font-weight: bold;
      margin-bottom: 7px;
    }

    #downloadSVG {
      border-bottom-left-radius: 0.25rem !important;
      border-top-left-radius: 0.25rem !important;
    }
    
    #scalebarpreview .btn-group {
      width: 100%;
    }

    #scalebarpreview .row-footer {
      padding-bottom: 73px;
    }

    .btn-right {
      float: left !important;
      margin-top: 15px;
      margin-left: -1px;
    }

}

.st0 {
  fill: #73859c;
}

.alternative-row {
    background-color: #f5f5f5;
    padding-top:15px;
    margin-bottom:10px;
    margin-left:-20px;
    margin-right:-20px;
}

select {
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='11' height='11' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='%23495057'/></g></svg>") 97% 50% no-repeat;
  -moz-appearance: none; 
  -webkit-appearance: none;
  appearance: none;
  padding-right:27px !important;
}

.form-group-alternative {
    background-color: #f5f5f5;
    padding-top:10px;
    padding-bottom:10px;
    margin-left:-20px;
    margin-right:-20px;
    padding-left:5px;
    padding-right:5px;
    margin-bottom:-5px;
}

.group-alternative {
    background-color: #f5f5f5;
    padding:10px;
    border-radius: .25rem;
    margin-top:-10px;
    margin-bottom:10px;
    margin-left:5px;
    margin-right:5px;

}

.row-footer {
    background-color: #f5f5f5;
    padding-top:15px;
    margin-bottom:-20px;
    margin-left:-20px;
    margin-right:-20px;
    padding-left:20px;
    padding-right:20px;
    padding-bottom:20px;
}

#topbar {
    background: rgb(28,160,250);
    background: linear-gradient(90deg, rgba(28,160,250,1) 0%, rgba(19,134,228,1) 100%); 
    position: absolute;
    top: 0px;
    width: 100%;
    height: 200px; 
    z-index: 0;
}

#tab-bar {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
}

.nav-item {
    z-index: 9;
    background-color: #1186ec;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.nav-item:not(:last-child) {
    margin-right: 5px;
}

.nav-item:not(.active) {
    margin-top: -1px;
    margin-bottom: 0px !important;
}

.nav-link {
    color: #fff;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.nav-tabs .nav-link:not(.active):hover {
    border:none;
    padding-top:9px;
    padding-left:17px;
    padding-right:17px;
    border-bottom-width: 0px;
    margin-bottom: 1px;
}

.nav-tabs .nav-link.active {
    border-bottom: 1px solid white !important;
    height: 100%;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    border-color: #ffffff;
}

.light-footer {
    opacity: 0.3;
    font-size: 10px;
}

@media only screen and (max-width: 992px) {
    .light-footer {
        display: none;
    }

    .undertitle {
      text-align: left;
    }

    #tableResults button:not(.generateScaleBarCell button), .loading button {
      display: flex;
      float: none !important;
      margin-top: 15px;
      padding-top: 7px !important;
      padding-bottom: 7px !important;
    }

    .btn-margin {
      margin-left:0px !important;
    }

    #dpiBox {
      margin-top:10px;
    }
    
}

.custom-radio label, .custom-radio input, #manualBlock .input-group-text :not(.stepunit) {
  cursor: pointer;
}

.btn-group-sm > .btn, .btn-ssm {
  padding: .05rem .5rem;
  font-size:.675rem;
  line-height: 1.5;
  border-radius: .2rem;
  margin-top:-7px;
  margin-bottom:-5px;
}

a {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 2px;
}

#tableResults a {
  background-color: #f5f5f5;
  color: #000000;
}

#tableResults a:hover {
  text-decoration: none;
  background-color: #3291f0;
  color: #fff;
}

#tableResults .table-info a {
  background-color: #007bff;
  color: #ffffff;
}

#tableResults .table-info a:hover {
  text-decoration: none;
  background-color: #0069d9;
  color: #fff;
}

a:hover {
    text-decoration: none;
    background-color: #3291f0;
    color: #fff;
}

.table {
    margin-bottom: 0px;
}

.table thead th {
    border-top: 0px;
    border-bottom: 0px;
}

.table-light td, .table thead th {
    white-space: nowrap;
}

.alert {
    margin-bottom: 0px;
}

.alert-info {
    background-color: #3291f0;
    color: #ffffff;
    border: 0px;
}

.table-info,
.table-info td {
    background-color: #e6f2ff;
    color: #000000;
    border-color: #e6f2ff;
}

.table-success,
.table-success td {
    background-color: #3291f0;
    color: #ffffff;
    border-color: #3291f0;
}

.table-success .btn, .alert-info .btn {
    background-color: #ffffff;
    color: #007bff;
    border-color: #ffffff;
}

.table-success .btn:hover, .alert-info .btn:hover {
    background-color: #007bff !important;
    color: #ffffff;
    border-color: #007bff !important;
}

.table-success .btn:hover {
    background-color: #e6f2ff;
    border-color: #e6f2ff;
}

.alternatingSpan {
    background-color:#3291f0 ;
    color: #ffffff;
    padding-left:5px;
    padding-right:5px;
    border-radius:.2rem;
    font-size:14px;
    white-space: nowrap;
}

@media (max-width: 440px) {
  .alternatingSpanMobile {
    display: block;
    width: min-content;
    margin-left:auto;
    background-color: #ced4da;
    color: #000000;
    display:none;
  }

};

.alternatingSpanGrey {
  position: absolute;
  top: 40px;
  border: 1px solid #ced4da;
  margin-left:auto;
  margin-right:auto;
  background-color:#e9ecef ;
  color: #495057;
  padding-left:5px;
  padding-right:5px;
  border-radius:.2rem;
  font-size:14px;
  white-space: nowrap;
  display:none;
}

#inchFootActualScale {
  top: 65px;
}

.table-success .alternatingSpan {
    background-color: #ffffff;
    color: #3291f0;
}

@media (max-width: 576px) {
    #svgimage {
        display: none !important;
    }

}

#scalebarpreview {
  transition: background-color 0.2s ease;
}

.pcr-button {
  transition: box-shadow 0.2s ease;
}

.btn-pre {
  background-color: #343a40 !important;
  border: 0px solid #ced4da !important;
  color: white !important;
  cursor:default !important;
}

.btn-pre:disabled {
  opacity: 1;
}

.btn-pre:hover {
  background-color: #343a40 !important;
  border: 0px solid #ced4da !important;
  color: white !important;
  cursor:default !important;
  z-index:0 !important;
}

.buttondiv {
  border: 0.1px solid #1186ec;
}

.btn-margin {
  margin-left:5px;
}

#tableResults button, .loading button {
    float: right;
    padding-top: 0px;
    padding-bottom: 0px;
    display: block;
}

#tableResults td {
  white-space: nowrap;
}

.table thead th {
    padding-right: 1.25rem;
}

.custom-range {
    padding-top: 20px;
    cursor: pointer;
}

.bubble {
  background: white;
  border: 1px solid #ced4da;
  color: #495057;
  padding: 4px 12px;
  position: relative;
  border-radius: 4px;
  transform: translateX(-50%);
  top:3px;
}

.bubbleContainer {
  width: 100%;
  padding-left:6px;
  padding-right:6px;
  margin-bottom:-5px;
}

.color-picker {
    padding: 0px;
    border: 0px;
    height: 100%;
}

.nav-tabs .nav-link.active {
    border-bottom: 1px solid white;
    margin-bottom: -1px;
    z-index: 1;
    position: relative;
}

#font-span {
    font-family: Arial, Helvetica, sans-serif;
}

.btn-right {
    float:right;
}

#scalefinder .alternative-row svg {
    margin-top: -2px;
    margin-right: 4px;
}

#scalebargenerator .form-group-alternative svg {
    margin-top: -2px;
    margin-right: 4px;
}

.calculatedScale {
  overflow:clip;
}

.calculatedScale a {
  color: #495057;
  padding-right:0px;
}

.calculatedScale a:hover {
  color: #495057;
  background-color: #e9ecef !important;
}

.dpiText {
  border-top-right-radius: .25rem !important;
  border-bottom-right-radius: .25rem !important;
}

#paperOne {
  background-color: #fff;
  -webkit-box-shadow: 4px 6px 27px -12px rgba(0,0,0,0.49);
  -moz-box-shadow: 4px 6px 27px -12px rgba(0,0,0,0.49);
  box-shadow: 4px 6px 27px -12px rgba(0,0,0,0.49);
  position:absolute;
}

#paperTwo {
  background-color:rgba(0,123,255,0.5);
  -webkit-box-shadow: 4px 6px 27px -12px rgba(0,0,0,0.49);
  -moz-box-shadow: 4px 6px 27px -12px rgba(0,0,0,0.49);
  box-shadow: 4px 6px 27px -12px rgba(0,0,0,0.49);
  position:absolute;
  right: 0px;
}

.biggest {
  z-index:10;
}

.paperInput {
  background-color: #f5f5f5;
  padding:15px;
  border-radius: .5rem;
  margin-top:3rem;
}

.paperOutput {
  background-color: #f5f5f5;
  padding:15px;
  border-radius: .5rem;
  margin-top:3rem;
}

.paperTranslate {
  background-color: #f5f5f5;
  padding:15px;
  border-radius: .5rem;
  margin-top:3rem;
}

@media only screen and (max-width: 768px) { 
  .paperTranslate {
    margin-top: 2rem;
  }

  .paperTitle {
    display:none;
  }

  .paperInput {
    margin-top:2rem;
  }

  .paperOutput {
    margin-top:2rem;
    margin-bottom:2rem;
  }

  .landscapePortait {
    padding-top:10px;
    padding-bottom:10px;
  }

}

.paperTitle {
  font-size:5rem;
  margin-top:-5rem;
  font-weight: 600;
  color:#434b53;
  height:7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.paperPreviewTextPaper {
  width:100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  font-size:5rem;
  bottom:-2rem;
  position:absolute;
  text-align:center;
}

#paperInputTitlePaper {
  color:#f5f5f5;
}

#paperOutputTitlePaper {
  color:#f5f5f5;
  opacity:0.2;
}

.paperPreviewInput {
  background-color: #fff;
  -webkit-box-shadow: 4px 6px 27px -12px rgba(0,0,0,0.49);
  -moz-box-shadow: 4px 6px 27px -12px rgba(0,0,0,0.49);
  box-shadow: 4px 6px 27px -12px rgba(0,0,0,0.49);
}

.paperPreviewOutput {
  background-color: rgba(0,123,255,0.5);;
  -webkit-box-shadow: 4px 6px 27px -12px rgba(0,0,0,0.49);
  -moz-box-shadow: 4px 6px 27px -12px rgba(0,0,0,0.49);
  box-shadow: 4px 6px 27px -12px rgba(0,0,0,0.49);
}

.paperPreviewAnimation {
  transition: width 0.2s, height 0.2s;
}

.paperHolderAnimation {
  transition: width 0.5s, height 0.5s;
}

.paperPreviewText {
  color: #73859c;
  margin-top:5px;
}

.vcenter-item {
  display: flex;
  align-items: center;
}

#inputPaperTextArea {
  width: 100%;
  z-index:10;
}

#outputPaperTextArea {
  color: #fff;
  width: 100%;
  z-index:10;
}

#inputPaperTextHeight {
  padding-left:7px;
}

#outputPaperTextHeight {
  padding-left:7px;
}

#ratioHeight {
  padding-left:7px;
}

#ratioHeight a {
  margin-left:-5px;
  padding:3px !important;
}

#ratioWidth a {
  padding:3px !important;
}

.tussen-text {
  border-radius:0px;
  border-left: 0px;
  border-right: 0px;
}

.eind-text {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-left:0px;
}

/* social icons */
#shareModal a:hover {
    background-color: #ffffff !important;
}

.resp-sharing-button__link,
.resp-sharing-button__icon {
  display: inline-block
}

.resp-sharing-button__link {
  text-decoration: none;
  color: #fff;
  margin: 0.5em
}

.resp-sharing-button {
  border-radius: 5px;
  transition: 25ms ease-out;
  padding: 0.5em 0.75em;
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif
}

.resp-sharing-button__icon svg {
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  vertical-align: middle;
}

.resp-sharing-button--small svg {
  margin: 0;
  vertical-align: middle
}

/* Non solid icons get a stroke */
.resp-sharing-button__icon {
  stroke: #fff;
  fill: none
}

/* Solid icons get a fill */
.resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle {
  fill: #fff;
  stroke: none
}

.resp-sharing-button--twitter {
  background-color: #55acee
}

.resp-sharing-button--twitter:hover {
  background-color: #2795e9
}

.resp-sharing-button--pinterest {
  background-color: #bd081c
}

.resp-sharing-button--pinterest:hover {
  background-color: #8c0615
}

.resp-sharing-button--facebook {
  background-color: #3b5998
}

.resp-sharing-button--facebook:hover {
  background-color: #2d4373
}

.resp-sharing-button--tumblr {
  background-color: #35465C
}

.resp-sharing-button--tumblr:hover {
  background-color: #222d3c
}

.resp-sharing-button--reddit {
  background-color: #5f99cf
}

.resp-sharing-button--reddit:hover {
  background-color: #3a80c1
}

.resp-sharing-button--google {
  background-color: #dd4b39
}

.resp-sharing-button--google:hover {
  background-color: #c23321
}

.resp-sharing-button--linkedin {
  background-color: #0077b5
}

.resp-sharing-button--linkedin:hover {
  background-color: #046293
}

.resp-sharing-button--email {
  background-color: #777
}

.resp-sharing-button--email:hover {
  background-color: #5e5e5e
}

.resp-sharing-button--xing {
  background-color: #1a7576
}

.resp-sharing-button--xing:hover {
  background-color: #114c4c
}

.resp-sharing-button--whatsapp {
  background-color: #25D366
}

.resp-sharing-button--whatsapp:hover {
  background-color: #1da851
}

.resp-sharing-button--hackernews {
background-color: #FF6600
}
.resp-sharing-button--hackernews:hover, .resp-sharing-button--hackernews:focus {   background-color: #FB6200 }

.resp-sharing-button--vk {
  background-color: #507299
}

.resp-sharing-button--vk:hover {
  background-color: #43648c
}

.resp-sharing-button--facebook {
  background-color: #3b5998;
  border-color: #3b5998;
}

.resp-sharing-button--facebook:hover,
.resp-sharing-button--facebook:active {
  background-color: #2d4373;
  border-color: #2d4373;
}

.resp-sharing-button--twitter {
  background-color: #55acee;
  border-color: #55acee;
}

.resp-sharing-button--twitter:hover,
.resp-sharing-button--twitter:active {
  background-color: #2795e9;
  border-color: #2795e9;
}

.resp-sharing-button--tumblr {
  background-color: #35465C;
  border-color: #35465C;
}

.resp-sharing-button--tumblr:hover,
.resp-sharing-button--tumblr:active {
  background-color: #222d3c;
  border-color: #222d3c;
}

.resp-sharing-button--email {
  background-color: #777777;
  border-color: #777777;
}

.resp-sharing-button--email:hover,
.resp-sharing-button--email:active {
  background-color: #5e5e5e;
  border-color: #5e5e5e;
}

.resp-sharing-button--pinterest {
  background-color: #bd081c;
  border-color: #bd081c;
}

.resp-sharing-button--pinterest:hover,
.resp-sharing-button--pinterest:active {
  background-color: #8c0615;
  border-color: #8c0615;
}

.resp-sharing-button--linkedin {
  background-color: #0077b5;
  border-color: #0077b5;
}

.resp-sharing-button--linkedin:hover,
.resp-sharing-button--linkedin:active {
  background-color: #046293;
  border-color: #046293;
}

.resp-sharing-button--reddit {
  background-color: #5f99cf;
  border-color: #5f99cf;
}

.resp-sharing-button--reddit:hover,
.resp-sharing-button--reddit:active {
  background-color: #3a80c1;
  border-color: #3a80c1;
}

.resp-sharing-button--xing {
  background-color: #1a7576;
  border-color: #1a7576;
}

.resp-sharing-button--xing:hover
.resp-sharing-button--xing:active {
  background-color: #114C4C;
  border-color: #114C4C;
}

.resp-sharing-button--whatsapp {
  background-color: #25D366;
  border-color: #25D366;
}

.resp-sharing-button--whatsapp:hover,
.resp-sharing-button--whatsapp:active {
  background-color: #1DA851;
  border-color: #1DA851;
}

.resp-sharing-button--hackernews {
  background-color: #FF6600;
  border-color: #FF6600;
}

.resp-sharing-button--hackernews:hover
.resp-sharing-button--hackernews:active {
  background-color: #FB6200;
  border-color: #FB6200;
}

.resp-sharing-button--vk {
  background-color: #507299;
  border-color: #507299;
}

.resp-sharing-button--vk:hover
.resp-sharing-button--vk:active {
  background-color: #43648c;
  border-color: #43648c;
}

.resp-sharing-button--telegram {
  background-color: #54A9EB;
}

.resp-sharing-button--telegram:hover {
  background-color: #4B97D1;}