html {width: 100%;padding: 0;margin: 0;min-width: 320px;font-family: Tahoma, Verdana, Arial, sans-serif;}
body {width: 100%;padding: 0;margin: 0;background-color: white;}


header{width: 83%;margin: 0 auto 0;min-width: 15rem;height: 70px;
  background: url('https://www.monro.biz/style/img/skins/current/top_header_back.jpg') top left no-repeat;
  background-color: white;display: block;}
 header .logo {width: 15%;float: left;}

nav#top_menu {width: 55%;height: 15px;float: right;overflow: hidden;padding-top: 16px;}
nav#top_menu, nav#top_menu a {font-size: 16px;color: #7a7c7b;text-decoration: none;}
nav#top_menu a:hover {text-decoration: underline;color: #585a59;}
nav#top_menu div {float: left;padding: 0 7px 20px 7px;border-left: 1px solid #7a7c7b;line-height: 13px;}
nav#top_menu div.first {border: 0;padding-left: 20px;}
nav#main_menu {height: 60px;width: 100%;position: relative;z-index: 1000; display: flex;
  background: url('https://www.monro.biz/style/img/skins/current/top_menu_back.jpg') top left no-repeat;overflow: hidden;}
nav#main_menu a {text-decoration: none;}
nav#main_menu div {float: left;font-size: 22px;height: 60px;cursor: pointer;width: 25%;text-align: center;border-top: 1px solid #dadbdb;
  background: url('https://www.monro.biz/style/img/menu_devider.gif') right no-repeat;overflow: hidden;}
nav#main_menu div.no_back {background-image: none;}
nav#main_menu div.wide {width: 37%;}
nav#main_menu a {width: 100%;height: 60px;line-height: 60px;color: #e31e24;text-decoration: none;text-transform: uppercase;}
nav#main_menu .active>a {background-color: #898989;color: #ffffff;}
nav#main_menu a:hover, nav#main_menu div:hover>a {background-color: #e31e24;opacity: 0.7;filter: alpha(Opacity=70);color: #ffffff;}

.main {width: 83%;min-width: 58rem;margin: 0 auto 0;}
.bcontainer {width: 60%;min-width: 58rem;margin: 0 auto 0;}
.content {background-color: white;min-height: 100vh;padding: 0.1rem 2rem;}
.off { display: none;}
.mod_ovl {position: fixed; top:0; left:0;  width: 100%; height: 100%;  background-color: rgba(0,0,0, 0.05); z-index: 1000;}
.dialog {min-width: 16rem; width: 22rem; min-height: 19rem; margin: 12rem auto; background: url(../img/up/login_dlg.png);
  text-align: center; padding: 0.1rem 1.5rem; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));}

.irnd {border: 1px solid #D9D9D9; padding: 6px 20px;margin: 0.15rem; font-size: 1rem}
.wait_ovl { z-index: 2000;}
.wait {width: 16rem; margin: 12rem auto;}
.wait img {width: 100%;}
.rp {font-size: 0.8rem;} 
.diatx{font-size: 1rem;text-shadow: rgb(199, 199, 199) 1px 1px 1px;font-weight: 400;}   
.diatx .url{text-decoration: underline; cursor: pointer; color: #1A34BD;}
.diatx .red{color: #e31e24;}

.h2 {padding: 5% 0 1% 0;font-style: normal;color: rgba(0, 0, 0, 0.92);font-size: 1rem;line-height: 19px; }
.h3 {font-style: normal;color: rgba(0, 0, 0, 0.92);font-size: 0.875rem;line-height: 19px; }
.h4 {font-size: 1.25rem; text-transform: uppercase;}
.cardboxr { box-sizing: border-box; border: 1px solid #CD212C; border-radius: 20px; }
.cardboxw { box-sizing: border-box; border: 1px solid #d9d9d9; border-radius: 20px; }

.cardvalue {width: 50rem; margin: 1% 0 1% 6%; display: grid; grid-template-columns: 16% 19% 21% 16% 16% 16%;}
.cardvalue .valuetext {width: 100%; margin: 0 auto 0 -5%; display: grid; grid-template-columns: 100%; grid-gap: 0.3rem; color: #6d6d6d;line-height: 15px;font-size: 0.75rem;}
.cardvalue .value {width: 100%; margin: 0 auto; display: grid; grid-template-columns: 100%; grid-gap: 0.3rem; color: #000000;line-height: 17px;font-size: 0.875rem;}

.editbox {width: 100%; margin: 0 auto 0; display: grid; grid-template-columns: 85% 10%}
.editbox .edit {width: 100%; margin: 5% 45%;float: right;display: grid; grid-template-columns: 100%;
               font-size: 0.75rem;text-decoration-line: underline;color: #6D6D6D;align-items: flex-end;cursor: pointer;}
.acnt {width: 40rem; margin: 1% 0 1% 6%; display: grid; grid-template-columns: 45% 10% 45%;}
.acnt1 {width: 100%; margin: 0; display: grid; grid-template-columns: 100%; grid-template-rows: 4rem 4rem 4rem 4rem 4rem; grid-gap: 1rem;}
.acnt2 {width: 100%; margin: 0; display: grid; grid-template-columns: 100%; grid-template-rows: 4rem 4rem 4rem;  grid-gap: 1rem;}
.acnt .valuetext {width: 100%; margin: 0 0 0 0; display: grid; grid-template-columns: 100%; grid-gap: 0.3rem; color: #6d6d6d;line-height: 15px;font-size: 0.75rem;}
.acnt .value {border: 1px solid #D9D9D9; border-radius: 20px; padding: 1px 15px; color: #000000;line-height: 15px;font-size: 0.875rem;}

.btn {width: 18rem; margin: 0 0 1% 6%;}
.btn .edit_btn {width: 100%;height: 3rem;background: rgba(205, 33, 44, 0.92);border: 1px solid #CD212C;border-radius: 20px;color: white;font-weight: bold; cursor: pointer;}
.btn .login_btn {width: 100%; height: 3rem; background: rgba(205, 33, 44, 0.92); border: 1px solid #CD212C; border-radius: 20px;color: white;font-weight:bold; cursor: pointer;}
.cancel_edit {font-size: 0.75rem;text-decoration-line: underline;color: #6D6D6D; cursor: pointer;}


@media screen and (max-width: 50rem) {
  .main {width: 83%;min-width: 15rem;margin: 0 auto 0;}
  .bcontainer {width: 100%;min-width: 18rem;margin: 0 auto 0;}
  .cardboxr {width: 100%; margin: 0 auto 0; min-width: 18rem}
  .cardboxw {width: 100%; margin: 0 auto 0; min-width: 18rem}
  .acnt {width: 100%; margin: 2%; display: grid;  grid-template-columns: 95%;}
  .cardvalue {width: 100%; margin: 3%; display: grid;  grid-template-columns: 34% 34% 35%}
  .editbox {display: flex; flex-wrap: wrap;}
  .editbox .edit{flex: 1 1 50rem;margin: 0 auto 1%;}
  .btn {width: 100%; margin: 0 auto 1%; min-width: 15rem}
  nav#main_menu {display:none;}
}