:root {
  --bgRed: #c62828;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  overflow-x: hidden;
}

/* navBarMenu styles */

.navBarMenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#componentMenu {
  background-color: #ffffff;
  border: none;
  box-shadow: 0px 4px 4px 0px #00000020;
}
.navBarMenu #accordionMenu .listText{  
  width: calc(100% - 40px);
  border-radius: 8px 0px 0px 8px;
  padding: 5px;
  cursor: pointer;
}
.navBarMenu #accordionMenu .active .listText, .navBarMenu #accordionMenu .border-0>span:hover {
  background: var(--bgRed);
  color: #fff !important;
}
.navBarMenu .border-0.active i {
  transform: rotate(180deg);
  padding-left: .5rem !important;
}
input[type='radio'] {
  accent-color: var(--bgRed);
}
.listIcon {
  background: white;
  padding: 6px 7px;
  height: 35px;
  width: 35px;
}

.listIcon img {
  width: 20px;
}
/* Hamburger button styles */
.hamburger {
  position: fixed;
  top: 15px;
  right: 0;
  color: white;
  border: none;
  border-radius: 15px 0px 0px 15px;
  padding: 4px 4px;
  cursor: pointer;
  z-index: 10000;
  height: 35px;
  background: var(--bgRed);
  width: 60px;
}

.hamburger img {
  width: 25px;
  display: block;
  margin-left: 10px;
}
.hamburger .rotate_message {position: absolute; top: calc(100%); right: 0; color: #000; width: 186px; text-align: right; padding: 2px 12px; background: #fff; border-radius: 5px; display: none;}
.hamburger.show .rotate_message {display: block;}

.humIocn {
  position: absolute;
  width: 35px;
  height: 2px;
  top: 17px;
  right: 10px;
  background: #fff;
  transition: .4s;
  z-index: 9;
}

.humIocn:before {
  content: "";
  position: absolute;
  width: 27px;
  height: 2px;
  top: -9px;
  right: 0;
  background: #fff;
  transition: .6s;
}

.humIocn:after {
  content: "";
  right: 0;
  position: absolute;
  width: 27px;
  height: 2px;
  top: 9px;
  background: #fff;
  transition: .6s;
}
.hamburger.show .humIocn {background: transparent;}

.hamburger.show .humIocn:before {
    transform: translateY(9px) rotate(49deg);
}

.hamburger.show .humIocn:after {
  transform: translateY(-9px) rotate(126deg);
}

.hamburger.show:after {
    content: '';
    width: 46px;
    /* background: black; */
    height: 35px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
}
.cursor-pointer {
  cursor: pointer;
}

.custom-range::-webkit-slider-thumb {
  background: var(--bgRed);
}

.custom-range::-moz-range-thumb {
  background: var(--bgRed);
}

.custom-range::-ms-thumb {
  background: var(--bgRed);
}

.btn-style {
  background: var(--bgRed);
}

.btn-style:hover {
  background: var(--bgRed);
}

/*--------------------------*/
.orient {display: none;}



.tankstabcontent .content .card {cursor: pointer;}
.tankstabcontent .content {display: none;}
.tankstabcontent .content.active {display: block;}

.nav-fill .nav-item .nav-link, .nav-justified .nav-item .nav-link{
  color: var(--bgRed);
}

#startingForm :not(.btn-check)+.btn-style:active {background: var(--bgRed);}
#startingForm :not(.btn-check)+.btn-style:hover {background: #a62a2a;}
.nav-tabs .nav-link:hover {background: #f3f3f3; border-color: #f3f3f3;}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
  background: var(--bgRed);
  color: #fff;
}
#startingForm .formedtank .card {transition: all ease-in-out .2s;}
#startingForm .formedtank .card:hover {transform: scale(1.05);}
.saveForm .input-group .btn, .savebtnsinteractive .btn {background: var(--bgRed);}
.saveForm .input-group .btn:hover, .savebtnsinteractive .btn:hover {background: #a62a2a;}
.savebtnsinteractive {padding: 1.5rem!important;}

#successModal .tick i {font-size: 60px; width: 80px; line-height: 80px; display: inline-block; background: green; border-radius: 50%; color: #fff;;}

.fbmarking {position: fixed; bottom: 20px; left: 20px; padding: 0; }
.fbmarking .total {display: block; background: #fff; margin-bottom: 4px; padding: 12px 20px; border-radius: 6px;}
.fbmarking .total span {display: block;}
.fbmarking .total span label {display: inline-block; width: 100px;}
.fbmarking .engView {display: block; padding: 4px 20px; border: 4px solid #f0f0f0; border-radius: 12px; background: #fff; cursor: pointer;}
.fbmarking .engView:hover {background: #f0f0f0;}
.fbmarking .engView img {display: inline-block; height: 50px; vertical-align: middle; margin-right: 8px;}
.fbmarking a i {display: inline-block; width: 20px; vertical-align: middle; border-radius: 6px; font-size: 18px;}
.fbmarking a {display: block; width: 160px; margin: 8px auto; text-align: center; background: var(--bgRed); color: #fff; text-decoration: none; font-size: 14px; text-transform: uppercase; padding: 6px 20px; border-radius: 6px; transition: all ease-in-out .2s;}
.fbmarking a:hover {background: #a62a2a;}


#confirmModal .btn-primary {background: var(--bgRed); border-color: var(--bgRed);}
#confirmModal .btn-primary:hover {background: #a62a2a; border-color: #a62a2a;}

#successModal .btn-secondary {background: var(--bgRed); border-color: var(--bgRed);}
#successModal .btn-secondary:hover {background: #a62a2a; border-color: #a62a2a;}

.startingTopMargin {height: 50px;}
.hLogo {position: fixed; top: 12px; left: 12px;}
.hLogo img {height: 60px;}

.navBarMenu select, .navBarMenu input[type=text], .navBarMenu input[type=email], .navBarMenu input[type=number] {
  box-shadow: var(--bs-box-shadow-sm)!important;
}

.red {color: red;}
.initialScreen {display: block; text-align: center; padding: 120px 32px; width: calc(100% - 400px);}
.initialScreen .demoRadiator img {max-width: 400px;}
.initialScreen .customErrMess {font-size: 18px; font-weight: 500;}

.hideIfNo .field:nth-child(1) ~ .field {display: none;}

.saveForm h5 {margin-bottom: 20px;}
.saveForm h6 {font-weight: 700; color: var(--bgRed);}
.saveForm .group {display: block; width: 100%; margin-bottom: 12px;}
.saveForm .sm {display: block; font-size: 12px; line-height: normal; padding-top: 6px;}
.saveForm .field {display: block; width: 100%; margin-bottom: 12px;}
.saveForm .field label {display: block;}
.saveForm .field .form-control {display: block; border-radius: var(--bs-border-radius); width: 100%;}

.savebtnsinteractive .back {display: none;}
.showSaveForm .savebtnsinteractive .back {display: block;}
.showSaveForm .savebtnsinteractive .save {display: none;}
#saveRadiator {display: none;}
.showSaveForm.navBarMenu .list-unstyled {display: none;}
.showSaveForm #saveRadiator {display: block;}

.inInches {display: block; padding: 20px; text-align: right;}
.inInches .in {display: inline-block;}
.inInches .in span {display: block;}

#accordionMenu .field .sm {display: block; font-size: 12px; margin-bottom: 20px;}

.tankOpt.hide {display: none;}

.hideSaveBtn #displaySaveForm {display: none;}

.selectOptsMess {display: block; text-align: right; padding: 0 12px; font-size: 14px;}
.tdNote {font-size: 14px; font-weight: 500; text-align: center; padding-top: 4px;}