body { margin: 0; padding: 0; }

#map { position: absolute; top: 0; bottom: 0; width: 100%; };

body {
  overflow: hidden;
}

body * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: 'din-2014', sans-serif;
  font-style: normal;
}

select {
  display: block;
}
#embargo{
  z-index: 10;
  background-color: grey;
  position: relative;
  color: white;
  text-align: center;
}
.collapsible-header {
  margin-bottom: 0px;
  text-align: center;
  background-color: #D0640D;
  color: white;
  -webkit-tap-highlight-color: #D0640D !important;
}

.collapsible-body {
  padding: 0rem 0rem;
  background-color: rgba(208,100,13, .8);
  color: white;
}

.headerText {
  padding: .6rem 0rem;
  border-bottom: 1px solid #D0640D;
  font-weight: 600;
  font-size: 1.1rem;
}

#share-view {

}
#share-view-btn {
  float: right !important;
  margin-top: .5rem !important;
  margin-right: -.5rem;
  width: 12rem;
  height: 2.5rem;
  right: 0;
  background-color: #548ac7;
  color: white;
  top: 0 !important;
  position: absolute;
  padding: 0rem;
  border-radius: 10px;
}
#share-view-btn-text {
  padding-left: 1.5rem;
  padding-top: .1rem;
}
#share-view-btn-icon {
  display: inline-block;
  margin-top: .4rem;
  position: absolute;
  left: .4rem;
}
#share-modal-content {
  background-color: #548ac7;
  color: white;
}
#copy-alert {
  height: 1rem;
}
#view-link-form {
  padding-left: 0px;
}
#view-link-description {
  margin-bottom: 0px;
      margin-left: .5rem;
}
.modal {
  background-color: #D0640D;
}

.input-field>label:not(.label-icon).active {
    -webkit-transform: translateY(-14px) scale(0.8);
    transform: translateY(-20px) scale(0.8);
}
.input-field {
  border: 2px #D0640D solid;
}
#view-input {
  border: 2px white solid;
}
#share-view-label {
  color: white;
}
#copy-icon {
  color: #548ac7;
  padding-top: .7rem;
  padding-left: 0rem;
}
#copy-icon-text {
  color: #548ac7;
  display: inline-block;
  text-align: center;
  margin: auto;
  position: absolute;
  margin-top: .8rem;
  margin-left: .4rem;
}

#collapsibleRow {
  margin-bottom: 0px;
}

.copy-icon-container {
  background-color: white;
  height: 3.25rem;
  margin-top: 1rem;
  border-radius: 5px;
  border: 2px white solid;
  cursor: pointer;
  padding: 0rem 4vw !important;
}
#view-input input {
  width: 98% !important;
}
div#copy-alert {
    text-align: left;
}

input:not([type]), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default), input[type=email]:not(.browser-default), input[type=url]:not(.browser-default), input[type=time]:not(.browser-default), input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default), input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default), input[type=search]:not(.browser-default), textarea.materialize-textarea {
    width: 80% !important;
  }

#dropdownTrigger {
  position: absolute;
  width: 20rem;
  background-color: #a30018;
  border-radius: 7px;
}
#dropdownList {
  z-index: 1;
}
#rightKey, #rightLow, #rightHigh {
  z-index: 1;
  bottom: -232px;
  position: absolute;
  right: 0px;
}

.iconContainer {
  display: inline-block;
  display: inline-block;
  position: absolute;
  left: 1rem;
}
.dropdownText {
  display: inline-block;
  padding-top: .1rem;
}
.dropdownItem {
  color: #707070 !important;
}
.dropdownCircle {
    display: inline-block;
    height: 1rem;
    width: 1rem;
    background-color: blue;
    border-radius: 1rem;
    margin-right: .6rem;
    margin-bottom: -.1rem;
}
#povertyCircle {
  background-color: #a30118;
}
#hispanicCircle {
  background-color: #85ba7b;
}
#blackCircle {
  background-color: #397893;
}
#collegeCircle {
  background-color: #b4c17c;
}
#incomeCircle {
  background-color: #e082ca;
}
#housingCircle {
  background-color: #8d6baa;
}

/*
#povertySelect {
  color: #a30118 !important;
}
#povertyBtn:hover {
  background-color: rgba(163,1,24,.1) !important;
}

#hispanicSelect {
  color: #85ba7b !important;
}
#hispanicBtn:hover {
  background-color: rgba(133,186,123,.1) !important;
}

#blackSelect {
  color: #397893 !important;
}
#blackBtn:hover {
  background-color: rgba(57,120,147,.1) !important;
}

#collegeSelect {
  color: #b4c17c !important;
}
#collegeBtn:hover {
  background-color: rgba(180,193,124,.1) !important;
}

#incomeSelect {
  color: #e082ca !important;
}
#incomeBtn:hover {
  background-color: rgba(224,130,202,.1) !important;
}

#housingSelect {
  color: #8d6baa !important;
}
#housingBtn:hover {
  background-color: rgba(141,107,170,.1) !important;
}
*/


/* Layer trigger */
.btn:focus {
  background-color: #1d7d74;
}
.btn {
  background-color: #1d7d74;
}
.btn:hover {
  background-color: #2bbbad;
}


/* Layer buttons */
.dropdown-content li>a, .dropdown-content li>span {
    color: #707070 !important;
    border-bottom: 1px solid #DDDDDD;
}
.dropdown-content li {
    color: rgba(0,0,0,0.87);
}


.disableButton {
  pointer-events: none !important;
  background-color: transparent !important;
  background-image: none !important;
}
#cardHeader {
  padding-top: 1rem;
  margin-bottom: .2rem;
}
#cardTitle {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 1.2rem;
  padding-left: 3.4rem;
}
#cardEyebrow {
  color: #ADADAD;
  font-weight: 600;
  font-size: 1.2rem;
}
#cardContainer {
    background-color: rgba(255,255,255,.8);
    width: 35%;
    display: none;
    position: relative;
    padding: 0rem;
    margin: auto;
    z-index: 1;
}
#cardX {
  cursor: pointer;
  background-image: url("../img/x-orange.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  height: 1rem;
  width: 1rem;
}
.cardButton {
  cursor: pointer;
  height: 4rem;
  margin: 0px !important;
  margin-bottom: 1rem !important;
  background-color: white;
  padding-top: 1rem !important;
}
.headerText {
  cursor: pointer;
}
#cardContent {
  padding-bottom: 1rem;
}
#cardSubheader {
  margin-bottom: .7rem;
}
#backArrow {
  background-image: url("../img/back.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  height: 2rem;
  width: 1rem;
}
#fwdArrow {
  background-image: url("../img/fwd.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  height: 2rem;
  width: 1rem;
}
#tweetShare {
  height: 2rem;
  width: 2rem;
  display: inline-block;
  background-image: url('../img/twitter.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  cursor: pointer;
}
#facebookShare {
  height: 2rem;
  width: 1.5rem;
  display: inline-block;
  background-image: url('../img/facebook.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  cursor: pointer;
}
#twitterContainer {
  height: 2rem;
  width: 2rem;
  display: inline-block;
  background-image: url('../img/twitter.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  position: absolute;
  bottom: 3.8rem;
  left: 4.2rem;
  cursor: pointer;
}
#facebookContainer {
  height: 2rem;
  width: 1.5rem;
  display: inline-block;
  background-image: url('../img/facebook.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  position: absolute;
  bottom: 2.2rem;
  left: 4.4rem;
  cursor: pointer;
}


input, input:before, input:after {
  -webkit-user-select: initial;
  -khtml-user-select: initial;
  -moz-user-select: initial;
  -ms-user-select: initial;
  user-select: initial;
}
#continueText {
  text-align: right;
  line-height: 1.2rem;
}
#shareText {
  line-height: 1.2rem;
}
#cardNext {
  padding-top: .8rem;
}
#cardSearchButton {
  margin: auto;
  background-color: #D0640D;
  color: white;
  border-radius: 7px;
  text-align: center;
  width: fit-content;
  padding: .1rem 1rem;
  cursor: pointer;
}
.dotCircle {
  width: .7rem;
  height: .7rem;
  background-color: #CCCCCC;
  border-radius: 1rem;
  display: inline-block;
  margin: 0rem .1rem;
}
#dotsContainer {
  margin: auto;
  width: fit-content;
}
.activeDot {
  background-color: #D0640D;
}


#modal1 {
  background-color: rgba(208,100,13, 1);
  color: white;
}
#modal2 {
  background-color: rgba(208,100,13, 1);
  color: white;
}
.modalLink {
  color: white !important;
}
.modallinkContainer {
  width: fit-content;
}
.extLink {
  background-image: url('../img/link.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  height: 1.5rem;
  width: 1.5rem;
  display: inline-block;
  padding-left: 4rem;
  cursor: pointer;
}
.modalHyperlink {
  font-weight: 600;
  color: white;
  cursor: pointer;
}
.modalTitle {
  font-size: 1.8rem;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
  margin-left: .5rem;
}
.welcomeTitle {
  padding-left: 1rem;
}
.modalX {
  cursor: pointer;
  background-image: url("../img/x-white.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  height: 1.5rem;
  width: 1.5rem;
  display: inline-block;
  float: right;
}
#factsheets {
  display: block;
}
#divider {
  width: 100%;
  height: .1rem;
  border-bottom: 1px solid white;
  padding-top: .8rem;
  margin-bottom: 1rem;
}
#previousRow {
  margin-bottom: .5rem;
}
#oldMapExplainer {
  line-height: 1.2rem;
}
#oldMapThumbnail {
  background-image: url('../img/ccdprevious.png');
  width: 10rem;
  height: 5rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  border-radius: 7px;
}
#readMore {
  margin: auto;
  font-weight: 600;
  text-align: center;
}
#readMoreText {
  border: 2px solid white;
  border-radius: 7px;
  padding: .2rem 1rem;
  width: fit-content;
  margin: auto;
  cursor: pointer;
}
#methodologyText {
  height: 10rem;
  overflow: hidden;
}
#methodologyGradient {
height: 3rem;
width: 100%;
margin: 0px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d0640d+0,d0640d+100&0+0,1+100 */
background: -moz-linear-gradient(top,  rgba(208,100,13,0) 0%, rgba(208,100,13,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(208,100,13,0) 0%,rgba(208,100,13,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(208,100,13,0) 0%,rgba(208,100,13,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00d0640d', endColorstr='#d0640d',GradientType=0 ); /* IE6-9 */
margin-top: -3rem;
position: relative;
}
.methodOpen {
  height: 100% !important;
}

.mapboxgl-compare .compare-swiper {
    background-color: #707070 !important;
}

#storiesHeader {
  text-align: center;
  padding-bottom: .5rem;
}

.collapsible {
  border: 0px !important;
  margin: 0px;
}

#topMenuContainer {
  position: relative;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  pointer-events: none;
}

#topMenu {
  z-index: 5;
  width: 35%;

  margin: auto;
  pointer-events: none;
}

#titleMenu {
  pointer-events: all;
}

.titleMenu {
  pointer-events: all;
}

#titleText {
  text-align: center;
}

#infoIcon {
  background-image: url("../img/information-outline.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

#menuIcon {
  background-image: url("../img/magnify.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

.headerText {
  text-align: center;
  margin: auto;
}
#searchText {
  font-weight: 500 !important;
  text-align: left;
  padding: .5rem 1rem;
}
.headerLink {
    color: white;
}
.map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

.map-overlay {
font: 12px 'Helvetica Neue', Arial, Helvetica, sans-serif;
position: absolute;
width: 21.7rem;
padding: 10px;
}

.map-overlay .map-overlay-inner {
background-color: rgba(255,255,255,.8);
box-shadow:0 1px 2px rgba(0, 0, 0, 0.10);
border-radius: 3px;
padding: 10px;
margin-bottom: 10px;
bottom: 0rem;
position: absolute;
}

.map-overlay-inner fieldset {
border: none;
padding: 0;
margin: 0 0 10px;
}

.map-overlay-inner fieldset:last-child {
margin: 0;
}

.map-overlay-inner select {
width: 100%;
}

.map-overlay-inner label {
display: block;
color: black;
font-weight: bold;
margin: 0 0 5px;
}

.map-overlay-inner button {
display: inline-block;
width: 36px;
height: 20px;
border: none;
cursor: pointer;
}

.map-overlay-inner button:focus {
outline: none;
}

.map-overlay-inner button:hover {
box-shadow:inset 0 0 0 3px rgba(0, 0, 0, 0.10);
}
#overlay1 {
    right: 0 !important;
    bottom: 16.8rem;
    position: absolute;
}
.overlay1 {
  right: 0 !important;
  bottom: 17rem;
  position: absolute;
}
.toggleMap {
  cursor: pointer;
}
.activeToggle {
  background-color: rgba(0, 0, 0, 0.2);
}
.keyTitle {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 500;
}
.keyTitleCont {
  padding: .5rem .7rem;
  position: absolute;
  left: 1rem;
  bottom: 15rem;
  background-color: rgba(208,100,13, 1);;
  border-radius: 7px;
  color: white;
}
.keyLabel {
  background: rgba(255,255,255,.6);
  border-radius: 5px;
  padding: .1rem .3rem;
}
#leftHigh {
  position: absolute;
  bottom: 6rem;
  left: 2.5rem;
}
#leftLow {
  position: absolute;
  bottom: 12.3rem;
  left: 2.5rem;
}
#rightHigh {
  position: absolute;
  bottom: 12.3rem;
  right: 2.5rem;
  font-size: 1rem;
}
#rightLow {
  position: absolute;
  bottom: 6rem;
  right: 2.5rem;
  font-size: 1rem;
}
#dropdownX {
  background-image: url("../img/x-white.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 1rem;
  margin-top: .5rem;
  margin-bottom: -.8rem;
  cursor: pointer;
}
.hidden {
  display: none;
}
.input-field {
  background: white;
  border-radius: 6px;
  margin-bottom: 0rem;
}
.inputRow {
  margin-bottom: 0px;
}
#getDataText {
  padding-bottom: 1rem;
  padding-top: .5rem;
}
input[type=email]:not(.browser-default):focus:not([readonly])+label, input[type=text]:not(.browser-default):focus:not([readonly])+label, textarea.materialize-textarea:focus:not([readonly])+label {
  color: white;
}
textarea.materialize-textarea {
  padding-top: .5rem !important;
}
/*
.btn {
    background-color: white;
    color: #cf5e07;
}
.btn:hover {
    background-color: #fdc79e;
}
#backData {
  cursor: pointer;
}
*/


.mapboxgl-ctrl.mapboxgl-ctrl-group {
  bottom: 18.5rem;
  position: absolute;
  left: .5rem;
}
.mapboxgl-ctrl-geocoder.mapboxgl-ctrl {
  width: 100%;
  margin: auto;

}
#capLogo {
  position: absolute;
  bottom: 2.4rem;
  left: 1rem;
  height: 3rem;
  width: 3rem;
  background-image: url('../img/capLogo.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
#privacyPolicy {
  position: absolute;
  bottom: 1.5rem;
  right: 1rem;
  font-size: .8rem;
  line-height: .9rem;
  text-align: right;
}
#privacyPolicy a {
  color: #D0640D;
  padding-left: .4rem;
  font-weight: 600;
}
.mapboxgl-ctrl-scale {
    bottom: 3rem;
    position: absolute;
    right: .3rem;
    background-color: transparent;
    font-size: 12px;
    border: 2px solid #707070;
    border-top: #707070;
    padding: 0 5px;
    color: #707070;
    box-sizing: border-box;
}

.mapboxgl-ctrl.mapboxgl-ctrl-scale {
    font-weight: 600;
}


.keyBox {
  width: 1rem;
  height: 8rem;
  z-index: 1;
  position: absolute;
  bottom: 6rem;
}

#dynamicKey {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a30018+0,ffffff+100 */
  background: #a30018; /* Old browsers */
  background: -moz-linear-gradient(top,  #a30018 0%, #ffffff 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #a30018 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #a30018 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a30018', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  right: 1rem;
}
#staticKey {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cf5e07+0,f4b857+33,a1b4d3+66,6a849a+100 */
  background: #cf5e07; /* Old browsers */
  background: -moz-linear-gradient(top, #6a849a 0%,#a1b4d3 33%,#f4b857 66%,#cf5e07 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #6a849a 0%,#a1b4d3 33%,#f4b857 66%,#cf5e07 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #6a849a 0%,#a1b4d3 33%,#f4b857 66%,#cf5e07 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6a849a', endColorstr='#cf5e07',GradientType=0 ); /* IE6-9 */
  left: 1rem;
}

input:not([type]), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default), input[type=email]:not(.browser-default), input[type=url]:not(.browser-default), input[type=time]:not(.browser-default), input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default), input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default), input[type=search]:not(.browser-default), textarea.materialize-textarea {
    background-color: transparent;
    border: none;

    border-radius: 0;
    outline: none;
    height: 3rem;
    width: 80%;
    text-overflow: ellipsis;
    font-size: 16px;
    margin: 0 0 0 0;
    padding: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-transition: border .3s, -webkit-box-shadow .3s;
    transition: border .3s, -webkit-box-shadow .3s;
    transition: box-shadow .3s, border .3s;
    transition: box-shadow .3s, border .3s, -webkit-box-shadow .3s;
}

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: 0px solid #26a69a;
    -webkit-box-shadow: 0 0px 0 0 #26a69a;
    box-shadow: 0 0px 0 0 #26a69a;
  }


input.mapboxgl-ctrl-geocoder--input {

}

.mapboxgl-ctrl-geocoder, .mapboxgl-ctrl-geocoder .suggestions {
   box-shadow: 0 0 0px 0px rgba(0,0,0,.1) !important;
}
.mapboxgl-ctrl-geocoder--suggestion-title {
    z-index: 2;
}

.mapboxgl-ctrl-geocoder {
    max-width: 400px !important;
}
#copyright {
  color: #D0640D;
}

@media screen and (min-width: 640px) {
.mapboxgl-ctrl-geocoder--icon {
    top: 12px !important;
}
}

@media only screen and (min-width: 601px) and (max-width: 900px) {
  #topMenu {
    width: 50%;
  }
}

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

  #share-view-btn {
    float: right !important;
    margin-top: .5rem !important;
    margin-right: -.6rem;
    width: 12rem;
    height: 2.5rem;
    right: 0;
    background-color: #548ac7;
    color: white;
    top: inherit;
    position: relative;
  }

  .overlay1 {
    right: 0 !important;
    bottom: 16.7rem;
  }
  .keyTitle {
    font-size: 12px;
    padding: 0rem .2rem;
  }
  .mapboxgl-ctrl-geocoder--icon-search {
    top: 10px;
    left: 8px;
  }
  .mapboxgl-ctrl-geocoder.mapboxgl-ctrl {
    width: 95%;
  }
  .iconContainer {
    left: .2rem;
  }
  #cardXcontainer {
    padding: 0 1rem 0rem .2rem;
  }
  #cardContent {
    padding-bottom: .3rem;
  }
  #cardEyebrow {

  }
  .dotCircle {
    width: .5rem;
    height: .5rem;
    margin: 0rem .1rem;
  }
  #cardText {
    line-height: 1.2rem;
  }
  .modal {
    width: 90%;
    max-height: 80%;
  }
  .dropdownitem {
    font-size: .8rem !important;
  }
  .dropdownText {
    font-size: .8rem;
    line-height: 1rem;
    padding-top: .3rem;
  }
  .map-overlay {
    width: 13.7rem;
  }
  #dropdownTrigger {
    width: 12rem;
  }
  #cardContainer {
    width: 100%;
  }
  #topMenu {
    width: 100%;
  }
  #dropdown1 {
    top: -122px;
    z-index: 30;
  }
  div#copy-alert {
    text-align: left;
  }
}

@media only screen and (min-width: 601px) {
  #modalview {
    width: 50%;
  }
  .copy-icon-container {
    width: 52%;
  }
}

@media only screen and (max-width: 780px) {
  .copy-icon-container {
    width: 45%;
  }
}

@media only screen and (min-width: 991px) {
  #dynamicKey {
    bottom: 5rem;
  }
  #rightLow {
    bottom: 5rem;
  }
  #rightHigh {
    bottom: 11.3rem;
  }
  .copy-icon-container {
    padding: 0rem 2vw !important;
  }
  #modalview {
    width: 40%;
  }
  .copy-icon-container {
    width: 39%;
  }
}

@media only screen and (min-width: 1200px) {
  #dynamicKey {
    bottom: 4.5rem;
  }
  #rightLow {
    bottom: 4.5rem;
  }
  #rightHigh {
    bottom: 10.8rem;
  }
  #modalview {
    width: 35%;
  }
  .copy-icon-container {
    width: 38%;
  }
}