@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");

:root {
    --mr-bg-main-color: #F2F4F9;
    --mr-shadow-color: 84,100,157;
    --mr-card-shadow:0px 0px 8px rgba(var(--mr-shadow-color),0.61);
    --mr-greylight-color:#E3E3E3;
    --mr-greydark-color:#635F72;
    --mr-primary-color:#2C3B8F;
    --mr-primarydark-color:#16054D;
    --mr-secondary-color:#FFC522;
    --mr-primarylight-color:#9BADED;
    --mr-success-color:#1EC04B;
    --mr-successlight-color:#D3FBDE;
    --mr-list-fs:1.063rem;

}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/material-icons/MaterialIcons-Regular.ttf'); /* For IE6-8 */
    src: local('Material Icons'),
    local('MaterialIcons-Regular'),
      url('fonts/material-icons/MaterialIcons-Regular.ttf') format('truetype'),
  }



* {
    font-family: "Open Sans",sans-serif;
}
  
body{
   background-color: var(--mr-bg-main-color);
/*    display: flex;
   align-items: center; */
   height: 100vh;
}


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


nav{
    background: linear-gradient(180deg, #16054D -17.46%, #3814A8 53.82%, #5F53FF 141.67%);
    /* background-color: #fff;
    -webkit-box-shadow:var(--mr-card-shadow);
    box-shadow:var(--mr-card-shadow); */
    padding: 1rem 0;
}

nav .logo-mr{ 
    height: 20px;
}

nav .logo-rfid{
    height: 34px;
}


  .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
  
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
  
    /* Support for IE. */
    font-feature-settings: 'liga';
}

@font-face {
    font-family: 'Material Icons Outlined';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/material-icons/MaterialIconsOutlined-Regular.otf') format('opentype');
  }

  .material-icons-outlined {
    font-family: 'Material Icons Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }


  
@font-face {
  font-family: 'Material Icons Round';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/material-icons/MaterialIconsRound-Regular.otf') format('opentype');
}


.material-icons-round {
  font-family: 'Material Icons Round';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}


/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

.material-icons-outlined.md-18 { font-size: 18px; }
.material-icons-outlined.md-24 { font-size: 24px; }
.material-icons-outlined.md-36 { font-size: 36px; }
.material-icons-outlined.md-48 { font-size: 48px; }

.material-icons-round.md-18 { font-size: 18px; }
.material-icons-round.md-24 { font-size: 24px; }
.material-icons-round.md-36 { font-size: 36px; }
.material-icons-round.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
.material-icons-outlined.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons-outlined.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
.material-icons-round.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons-round.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
.material-icons-outlined.md-light { color: rgba(255, 255, 255, 1); }
.material-icons-outlined.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
.material-icons-round.md-light { color: rgba(255, 255, 255, 1); }
.material-icons-round.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }



.mr-card {
    -webkit-box-shadow:var(--mr-card-shadow);
    box-shadow:var(--mr-card-shadow);
    background-color: #fff;
    padding: 1rem 4rem;
    border-radius: 40px;
}
.mr-card .list-group .list-group-item{
    border: 0px;
    padding: .6rem 0rem;
    border-bottom: solid 1px var(--mr-greylight-color);
}
.mr-card .list-group .list-group-item:last-child{
    border-bottom: 0px;
}

.mr-card .list-group .list-group-item {
    color:var(--mr-primary-color);
    font-size: var(--mr-list-fs);
}

.mr-card h1, .mr-card h2, .mr-card h3, .mr-card h4, .mr-card h5, .mr-card h6{
    color: var(--mr-primary-color);
}

.mr-card h1 .mr-icon{
    color: var(--mr-primarylight-color);
    font-size: 32px;
}

.mr-check.mr-validate {
    color: var(--mr-success-color);
}
.list-group-item.mr-validate {
    background-color: var(--mr-successlight-color);
    color: var(--mr-success-color)!important;
    font-weight: 600;
}


button:disabled{
    opacity: 0.3;
}

.btn-confirm{
    background-color: var(--mr-secondary-color);
    color: var(--mr-primarydark-color);
    padding: 1rem;
    font-weight: 600;
    border: 0;
    border-radius: 8rem;
    text-decoration: none;
}

.btn-volum-green {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    border-radius: 40px;
    padding: 0.8rem 1.8rem;
    font-weight: 700;
    border: 0px;
    background-color: #05FF96;
    color: #16054D;
    -webkit-box-shadow:0px 4.05219px 3.17997px rgba(105, 119, 126, 0.15);
    -moz-box-shadow:0px 4.05219px 3.17997px rgba(105, 119, 126, 0.15);
    -o-box-shadow:0px 4.05219px 3.17997px rgba(105, 119, 126, 0.15);
    box-shadow: 0px 4.05219px 3.17997px rgba(105, 119, 126, 0.15);
}
.btn-yellow {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    border-radius: 40px;
    padding: 0.8rem 1.8rem;
    font-weight: 700;
    border: 0px;
    background-color: var(--mr-secondary-color);
    color: var(--mr-primarydark-color);
    -webkit-box-shadow:0px 4.05219px 3.17997px rgba(105, 119, 126, 0.15);
    -moz-box-shadow:0px 4.05219px 3.17997px rgba(105, 119, 126, 0.15);
    -o-box-shadow:0px 4.05219px 3.17997px rgba(105, 119, 126, 0.15);
    box-shadow: 0px 4.05219px 3.17997px rgba(105, 119, 126, 0.15);
}
.btn-yellow:active {
    -webkit-box-shadow: 0px 3px 8px rgba(51,47,64,0.03), inset 0px 0px 14px rgba(51,47,64,0.82);
    box-shadow: 0px 3px 8px rgba(51,47,64,0.03), inset 0px 0px 14px rgba(51,47,64,0.82);
    -moz-box-shadow: 0px 3px 8px rgba(51,47,64,0.03),inset 0px 0px 14px rgba(51,47,64,0.82);
    box-shadow: 0px 3px 8px rgba(51,47,64,0.03), inset 0px 0px 14px rgba(51,47,64,0.82);
    -o-box-shadow: 0px 3px 8px rgba(51,47,64,0.03),inset 0px 0px 14px rgba(51,47,64,0.82);
    box-shadow: 0px 3px 8px rgba(51,47,64,0.03), inset 0px 0px 14px rgba(51,47,64,0.82);
    -ms-box-shadow: 0px 3px 8px rgba(51,47,64,0.03),inset 0px 0px 14px rgba(51,47,64,0.82);
    box-shadow: 0px 3px 8px rgba(51,47,64,0.03), inset 0px 0px 14px rgba(51,47,64,0.82);
}
.btn-volum-green:active {
    -webkit-box-shadow: 0px 3px 8px rgba(51,47,64,0.03), inset 0px 0px 14px rgba(51,47,64,0.82);
    box-shadow: 0px 3px 8px rgba(51,47,64,0.03), inset 0px 0px 14px rgba(51,47,64,0.82);
    -moz-box-shadow: 0px 3px 8px rgba(51,47,64,0.03),inset 0px 0px 14px rgba(51,47,64,0.82);
    box-shadow: 0px 3px 8px rgba(51,47,64,0.03), inset 0px 0px 14px rgba(51,47,64,0.82);
    -o-box-shadow: 0px 3px 8px rgba(51,47,64,0.03),inset 0px 0px 14px rgba(51,47,64,0.82);
    box-shadow: 0px 3px 8px rgba(51,47,64,0.03), inset 0px 0px 14px rgba(51,47,64,0.82);
    -ms-box-shadow: 0px 3px 8px rgba(51,47,64,0.03),inset 0px 0px 14px rgba(51,47,64,0.82);
    box-shadow: 0px 3px 8px rgba(51,47,64,0.03), inset 0px 0px 14px rgba(51,47,64,0.82);
}

.mr-btn-reset {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    border-radius: 40px;
    padding: 0.8rem 1.8rem;
    font-weight: 700;
    border: 0px;
    background-color: #fff;
    border: solid 1px #eee;
    -webkit-box-shadow:0px 4.05219px 3.17997px rgba(105, 119, 126, 0.15);
    -moz-box-shadow:0px 4.05219px 3.17997px rgba(105, 119, 126, 0.15);
    -o-box-shadow:0px 4.05219px 3.17997px rgba(105, 119, 126, 0.15);
    box-shadow: 0px 4.05219px 3.17997px rgba(105, 119, 126, 0.15);
}

.mr-btn-reset:active {
    -webkit-box-shadow: 0px 3px 8px rgba(51,47,64,0.03), inset 0px 0px 14px rgba(51,47,64,0.82);
    box-shadow: 0px 3px 8px rgba(51,47,64,0.03), inset 0px 0px 14px rgba(51,47,64,0.82);
    -moz-box-shadow: 0px 3px 8px rgba(51,47,64,0.03),inset 0px 0px 14px rgba(51,47,64,0.82);
    box-shadow: 0px 3px 8px rgba(51,47,64,0.03), inset 0px 0px 14px rgba(51,47,64,0.82);
    -o-box-shadow: 0px 3px 8px rgba(51,47,64,0.03),inset 0px 0px 14px rgba(51,47,64,0.82);
    box-shadow: 0px 3px 8px rgba(51,47,64,0.03), inset 0px 0px 14px rgba(51,47,64,0.82);
    -ms-box-shadow: 0px 3px 8px rgba(51,47,64,0.03),inset 0px 0px 14px rgba(51,47,64,0.82);
    box-shadow: 0px 3px 8px rgba(51,47,64,0.03), inset 0px 0px 14px rgba(51,47,64,0.82)  ;
}


.login-gradient{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    background: linear-gradient(180deg, #16054D -17.46%, #3814A8 53.82%, #5F53FF 141.67%);
}

.login-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
}
.login-bg-image{
    background-image: url("img/bg_mr_login.svg");
    opacity: .3;
    position: absolute;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.login-content{
    position: relative;
    z-index: 1;
}

.login-gradient .login-content .logo{
    max-width: 200px;
}

.login-gradient .login-content .h4, .login-gradient .login-content .h5{
    font-weight: 200;
    letter-spacing: .3rem;
}
.login-bg .h5{
    color: var(--mr-primarylight-color);
    letter-spacing: .4rem;
}

.img-caja-mr{
    max-width: 50px;
}

/* Not valid product */

.not-valid{ 
    background-color: #FFDDDD;
    color: #FF3333!important;
    padding: 0.6rem 0.6rem!important;
}


.bg-pedido-validado {
    background-color: var(--mr-bg-main-color);
    padding: 1.4rem 3rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-radius: 40px;
}
.bg-pedido-validado p{
    color: var(--mr-greydark-color)!important;
    margin-top: 20px;
}

.bg-pedido-validado .thumb_up {
    color: #05FF96;
    font-size: 38px;
}
.bg-pedido-validado img{
    width: 120px;
}
.bg-pedido-validado p{
    color: var(--mr-primary-color);
}