@color_1: #988796;
@font_color_light: #0B3B60;

html,
body {
  font-family: 'Roboto', sans-serif;
  background-color: #fff;
}
[ng\:cloak],
[ng-cloak],
.ng-cloak {
  display: none !important;
}

.wrapper {
    background-color: #FFFFFF;
}

img.img-responsive {
    width: 100%;
    border-radius: 20px;
}

img.img-responsive-selection {
    width: 100%;
    border-radius: 20px;
    background-color: #fff;
    color: #494A4B;
    box-shadow: 1px 5px 10px #888888;
}

#lottiePlayer {
  width: 400px;
  margin: 0 auto;
}
.image.ng-scope {
  max-width: 400px;
  margin: 0 auto;
}
.interactive-guide {
  height: 100%;
  width: 100%;
  /*margin-top: 60px;*/
}
.interactive-guide .max-width-640 {
  max-width: 640px;
  margin: 0 auto;
}
.interactive-guide .page-header {
  border-bottom: 0px solid #D4D4D4;
  margin: 0;
  text-transform: uppercase;
}
.interactive-guide .page-header h2 {
  font-size: 1.4em;
  font-weight: bold;
  text-align: center;
  padding-top: 15px;
}
.interactive-guide .main {
  padding-bottom: 15px;
  max-width: 600px;
  margin: 0 auto;
}
.interactive-guide .main h2 {
  text-transform: uppercase;
}
.interactive-guide .main .primary .btn {
  background-color: #000;
}
.interactive-guide .main .no-link .btn.image-button {
  box-shadow: none;
  cursor: default;
}
.interactive-guide .main .plain-link .btn {
  color: #568FA5;
  background-color: #eee;
  border: 0;
}
.interactive-guide .main .btn {
  background-color: #6F6F6F;
  color: #fff;
  text-transform: uppercase;
  margin: 0.7em 0;
  border-radius: 5px;
}
.interactive-guide .main .btn.image-button {
  font-weight: bold;
  background-color: #fff;
  border-radius: 20px;
  color: #494A4B;
  box-shadow: 1px 5px 10px #888888;
  width: 100%;
}
.interactive-guide .main .btn.image-button img {
  max-width: 85%;
}
.interactive-guide .main .btn.image-button .image-button-header {
  text-transform: none;
  border-bottom: 1px solid #D4D4D4;
  display: block;
  margin: 0 -16px 10px;
  padding-bottom: 8px;
}
.interactive-guide .main .toolbox {
  margin-bottom: 10px;
}
.interactive-guide .main img.screwpic {
  width: 75%;
}
.interactive-guide .main p {
  /*font-weight: bold;*/
  color: #494A4B;
  font-size: 16px;
}
.interactive-guide .main .image {
  background-color: #fff;
}
.interactive-guide .main .image img {
  /* width: 65%;
  margin: 15px 0; */
}
.interactive-guide .main .youtube-video {
  text-align: center;
  background-color: #fff;
  margin: 7px 0;
  position: relative;
}
.interactive-guide .main .youtube-video .youtube-video-link {
  width: 100%;
}
.interactive-guide .main .youtube-video .youtube-video-link .video-thumb {
  max-width: 100%;
}
.interactive-guide .main .youtube-video .youtube-video-link .play-icon {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  opacity: 0.8;
  width: 80px;
  margin-left: -40px;
  height: 60px;
  margin-top: -30px;
}
.interactive-guide .footer {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 12px;
  background-color: #FEFDFF;
}
.interactive-guide .footer a {
  color: #A3A2A3;
}
.interactive-guide .class {
  color: red;
}
.interactive-guide .picture {
  margin-top: 0;
  margin-bottom: 0;
}
.interactive-guide .option-group {
  /*margin-top: 60px;*/
}
.interactive-guide .toolpic {
  padding: 10px;
}

button:disabled {
  /*background-color: lightgray;*/
  opacity: 0.5;
  cursor: not-allowed; /* Optional: change cursor to indicate disabled state */
}

.round {
  border-radius: 50%;
}

.btn {
    flex: 0 1 auto; /* Ensures buttons take only the necessary space */
}


.text-section {
    justify-items: center;
    text-align: left;
}

p.ng-binding.ng-scope.text-left {
    text-align: left;
    font-size: 16px;
    letter-spacing: 0.5px;
    font-weight: 400;
}

.text_bold {
    font-size: 1.3rem !important;
    font-weight: bold !important;
    padding-top: 0.5rem;
    text-align: center;
    margin-bottom: 0px;
}

.text_stage {
    font-size: 0.8em !important; /* Smaller text */
    font-weight: bolder !important;
    background-color: #f0f0f0; /* Gray background */
    padding: 5px 20px; /* More padding on left and right */
    border-radius: 20px; /* More rounded corners for an oblong shape */
    max-width: 200px;
    margin: 0 auto;
    margin-bottom: 10px;
}

/* This will only apply in Firefox */
@-moz-document url-prefix() {
  .text_stage, .prev_next_btn {
    max-width: 40%;
    margin: 0 auto;
  }
}

.prev_next_btn {
    max-width: 40%;
    margin: 0 auto;
}

.text_warning {
    background-color: #f0f0f0; /* Gray background */
    padding: 20px 20px;
    border-radius: 5px;
    align-items: center;
    position: relative;
    text-align: left;
    padding-left: 60px; /* More padding to make space for the larger icon */
}

.text_warning::before {
    content: '';
    background-image: url('https://images.kwikset.com/is/image/Kwikset/ico-alert?fmt=png-alpha'); /* Warning icon URL */
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px; /* Larger size for the icon */
    height: 30px; /* Larger size for the icon */
    position: absolute;
    left: 20px; /* More padding before the icon */
    top: 30%;
}

button.selected {
    color: white;
    border: 4px solid #0B3B60;
}

.selected, .img-responsive-selection:hover {
    border: 4px solid #0B3B60;
}

.image-button:hover {
    border: 4px solid #0B3B60;
}

a.no-link-style {
    color: unset !important;
    text-decoration: none;
}

select {
    
    width: 8rem;
    height: 2rem;
    border-radius: 5px;
    border: 2px solid #000;
    font-size: 16px;
    text-align: center;
    margin: 10px;
}

button.btn-image-button {
    margin-bottom: 1.5rem;
    border: 0px;
    background-color: transparent;
}

img.prev, img.next {
    width: 40px;
}

.prev_btn {
    background-color: transparent;
    border: 0px;
}

.next_btn {
    background-color: transparent;
    border: 0px;
}

.btn-prev-next {
  background-color: #0B3B60;
  border: none;
  color: white;
  padding: 0px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 3rem;
  margin: 4px 2px;
  cursor: pointer;
  font-weight: 900;
}

.prev_next_btn {
            display: flex;
            align-items: center;
        }
        .theBtn {
            display: inline-block;
            margin: 0 10px;
        }