*{ margin: 0; padding: 0; font-family: verdana,sans-serif;}
html {scroll-behavior: smooth;}
a {text-decoration: none;}
.logo {height: 140px;}
.container { width: 95%;max-width: 1280px;}
.main {display: flex;flex-direction: column;align-items: center;}
.info {border: 1px solid #efefef;padding: 5px 0;margin: 0 5px;border-radius: 10px;background: #efefef;font-family: sans-serif;font-size: 12px;}
.margin-b {margin-bottom: 1rem;}
.d-flex{ display: flex;}
.w-100{width: 100%;}
.content-btn-menu{display: flex;width: 200px;}
@media (max-width: 400px)  { .logo{height: 50px;} .margin-b {margin-bottom: .8rem;} .content-btn-menu{width: 100%;} }
@media (min-width: 401px) and (max-width: 576px) { .logo{height: 75px;} }
@media (min-width: 577px) and (max-width: 768px) { .logo{height: 100px;} }


.title{display: flex;font-family: sans-serif;font-size: 20px;font-weight: bold;}
@media (max-width: 400px)  { .title .label-left img { width: 25px;height: 25px; } .title .label-right{font-size: 12px;} }
.label-left{display: flex;align-items: center;padding-left: 0.7rem;padding: 0.2rem;border: gray 1px solid;/* background: #e9ecef; */border-radius: 5px 0 0 5px;}
.label-right{border-radius: 0 5px 5px 0; border: gray 1px solid;font-family: sans-serif;font-size: 20px;color: #3E4D52;font-weight: bold;width: 100%;display: flex;justify-content: center;align-items: center;border-left: none;}

.label-blue{
    /*display: flex; align-items: center;padding-left: .7rem; padding: .2rem;  border: gray 1px solid;background: #006697; border-radius: 5px 0 0 5px;color: #fff;*/
    border: 1px solid #808080;padding: 4px 4px;border-radius: 10px;background: #006697;font-family: sans-serif;font-size: 12px;color: #FFFFFF;}
.label-grey{
    /*display: flex; align-items: center;padding-left: .7rem; padding: .2rem;  border: gray 1px solid;background: #006697; border-radius: 5px 0 0 5px;color: #fff;*/
    border: 1px solid #808080;padding: 4px 4px;border-radius: 10px;background: #929292;font-family: sans-serif;font-size: 12px;color: #FFFFFF;}
.label-white{
    /*border-radius: 0 5px 5px 0; border: gray 1px solid;*/border: 1px solid #808080;
    padding: 4px 10px;border-radius: 10px;background: #FFFFFF;font-family: sans-serif;font-size: 14px;color: #000099;
}
.label{border: 1px solid #808080;padding: 4px 10px;border-radius: 10px;font-family: sans-serif;font-size: 14px;color: #000099;}
/*FIN GENERAL*/


/*BUSCADOR*/
.search-content{width: 400px;display: flex;justify-content: space-between;align-items: center;padding: 8px;border: 1px solid #006699;border-radius: 50px;box-shadow: 0 0 0 3px #d9ecff;}
.search-input{width: 100%;border: none;outline: none;color: #000066;font-size: 13px;}
.search-input::placeholder {color: #3399ff;font-size: 13px;}
.reset{background: #d9ecff;border: none;border-radius: 5px;padding: 3px 12px;margin-left: 8px;cursor: pointer;font-size: 13px;color: #000066;}
.reset:hover{background: #add6ffff;}
@media (max-width: 400px)  { .search-content{width: 90%;}  }
@media (min-width: 401px) and (max-width: 576px) {.search-content{width: 300px;}  }
@media (min-width: 577px) and (max-width: 768px) {.search-content{width: 350px;} }
/*FIN BUSCADOR*/

/*
.search-content{width: 80%;}
.search-label{font-family: sans-serif;font-size: 15px;color: #336699;}
.search-input{
    padding: 4px 3px;
    border: 1px solid #006699;
    resize: none;
    box-shadow: 0 0 0 3px #d9ecff;
    margin: 5px 0;
    border-radius: 10px;
    font-family: sans-serif;
    font-size: 13px;
    color: #000066;
    background-color: white;
    width: 300px;
}
.search-btn{
    border: 1px solid #000033;
    padding: 5px 14px;
    border-radius: 10px;
    font-weight: bold;
    color: #FFFFFF;
    background: #003366;
}
.search-btn:hover{background: #3399ff; cursor: pointer;}
@media (max-width: 400px)  { .search-content{width: 100%;} .search-label{display: none;} .search-input{width: 70%;} }
@media (min-width: 401px) and (max-width: 576px) {.search-content{width: 100%;} .search-label{display: none;} }
@media (min-width: 577px) and (max-width: 768px) {.search-label{font-size: 13px;} .search-input{width: 200px;} }
*/




/*BOTONES*/
.btn {border: 1px solid #000033;padding: 8px 16px;border-radius: 10px;font-weight: bold;color: #000000;background: #F5F7F8;}
.btn:hover, .btn-menu:hover {background: #B5C0D0;cursor: pointer;}
.btn-red {border: 1px solid #000033;padding: 8px 16px;border-radius: 10px;font-weight: bold;color: #FFFFFF;background: #af2a28;}
.btn-red:hover {background: #e5605d;cursor: pointer;}
.btn-blue{ border: 1px solid #000033;    padding: 8px 16px;    border-radius: 10px;    font-weight: bold;   color:#FFFFFF;   background: #003366; }
.btn-blue:hover{ background: #3399ff; cursor: pointer;}
.btn-menu{width: 100%;display: flex; align-items: center; justify-content: center;border: 1px solid #000033;padding: 5px;border-radius: 10px;font-weight: bold;color: #FFFFFF;background: #af2a28;}
.btn-volver{border: 1px solid #ccff99;
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: bold;
    color: Black;
    background: #99ff00;
    display: flex;
}

.btn-volver:hover{
    background: #ccff99; cursor: pointer;
}
.btn-cuenta{
    border: 1px solid #808040;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 12px;
    color: #000000;
    background: #e8e800;
}
.btn-ejecutivo{
    border: 1px solid #006600;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 12px;
    color: #ffffff;
    background: #006633;
}
.btn-cuenta:hover, .btn-ejecutivo:hover{
    cursor: pointer;
    opacity: .5;
}

.btn-cart{
    border: 1px solid;
    padding: 3px 14px;
    border-radius: 10px;
    font-weight: bold;
    color: Black;
    background: #cccc00;
}    

.btn-cart:hover{background: #ccff66; cursor: pointer;}

.btn-nota{border: 1px solid #006666;padding: 8px 16px;border-radius: 10px;font-weight: bold;color: #d1e9e9;background: #006666;}
.btn-nota:hover{ background: #d1e9e9;color: Navy; cursor: pointer;}
/*FIN BOTONES*/

/*LOGIN*/
.login-container{ height: 100vh;display: flex;justify-content: space-between;flex-direction: column;}
.login-container footer img{ width: 100%;opacity: 0.2;}
.login-content{ position: absolute;display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;}
.login-content .login-box{ width: 450px;min-height: 300px;background-color: #efefef;z-index: 10;border-radius: 5px;border: 1px solid #af2a28;box-shadow: 2px 2px 2px #00000042;}
.login-content .capcha-box{ width: 450px;min-height: 300px;background-color: #FFFBF5;z-index: 10;border-radius: 5px;border: 1px solid #16FF00;box-shadow: 2px 2px 2px #00000042;}
.login-content header { padding:  1rem 0; text-align: center;}
.login-content form { display: flex;flex-direction: column;align-items: center;}
.login-content .login-box form font { font-family: sans-serif;font-size: 25px;/*color: #af2a28;*/}
.login-content .login-box form input { width: 294px;padding: 7px 6px; border: 1px solid #af2a28;box-shadow: 0 0 0 3px #af2a281c;margin: 5px 0;border-radius: 10px;font-family: sans-serif;font-size: 15px;color: #000066;background-color: white; }
.login-buttons {height: 100px;display: flex;align-items: center;}
@media (max-width: 400px)  { .login-content .login-box form font { font-size: 18px;} .login-content .login-box form input {width: 150px;} .login-content .login-box { border: none; box-shadow: none;background: white;} .login-content .capcha-box { border: none; box-shadow: none;background: white;} }
@media (min-width: 401px) and (max-width: 576px)  { .login-content .login-box form font { font-size: 18px;} .login-content .login-box form input {width: 150px;} }
/*@media (min-width: 577px) and (max-width: 768px) {  }*/
/*FIN LOGIN*/


/*MENU*/
.menu-title{border: 1px solid rgb(104, 104, 104);margin-bottom: 1rem;border-radius: 5px;padding: 5px 0;background: #ab2e2a;color: #fff;font-family: sans-serif;font-size: 20px;font-weight: bold;}
.menu-content{width: 90%; max-width: 1280px;display: grid;gap: 18px;grid-template-columns: repeat(5, 1fr);}
.menu-content div{text-align: center;margin-top: 10px;}
.menu-content a {font-size: 11px;color: #002C57;border: 3px;text-decoration: none; /*z-index: 10;*/ padding-top: 2px;}
.menu-content .item-menu {width: 100%;height: 150px;background-color: #fff;border-radius: 5px;border: 1px solid rgb(104, 104, 104);display: flex;flex-direction: column;justify-content: center;align-items: center;opacity: 0.7;position: relative;}
.menu-content .item-menu img{filter: grayscale(100%);}
.menu-content .item-menu:hover img{filter: grayscale(0%);}
.menu-content .item-menu:hover {border: 2px solid #af2926;background-color: #af28260c;cursor: pointer;opacity: 1;}
.menu-content .item-menu:focus{background-color: #af28260c;border: 2px solid #af2926;cursor: pointer;opacity: 1;transform: scale(1.05, 1.05);box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.35);}
.menu-content .item-menu:focus-visible{background-color: #af28260c;border: 2px solid #af2926;cursor: pointer;opacity: 1;transform: scale(1.05, 1.05);outline: none;box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.35);}
.menu-content .item-menu:focus-visible img{filter: grayscale(0%);}
.menu-span {/*background: #006600;*/padding: 5px;position: absolute;top: 5;right: 5;border-radius: 5px;color: #fff;min-width: 25px;text-align: center;}
@media (max-width: 400px)  { .menu-content{grid-template-columns: repeat(2, 1fr); }}
@media (min-width: 401px) and (max-width: 576px)  { .menu-content{grid-template-columns: repeat(3, 1fr); }}
@media (min-width: 577px) and (max-width: 768px) { .menu-content{grid-template-columns: repeat(3, 1fr); }}
/*FIN MENU*/



.family-container{display: grid;grid-template-columns: repeat(6,1fr);gap: 5px;max-width: 1180px;width: 95%;}
.item-family{border: 1px solid #006699;border-radius: 5px;}
.item-img-family{width: 100%;height: 120px;display: flex;justify-content: center;align-items: center;}
.item-img-family img{width: 105px; height: 105px; object-fit: contain;}
.item-name-family{font-family: sans-serif;font-size: 14px;color: #002C57; height: 70px;display: flex;justify-content: center;align-items: center;padding: 5px;}
.item-family:hover{border: 1.5px solid green;background: #ccff66;cursor: pointer;}

@media (max-width: 400px)  { .family-container{grid-template-columns: repeat(3,1fr);} .item-img-family{height: 95px;} .item-img-family img{width: 70px; height: 70px; object-fit: contain;} .item-name-family{font-size: 10px; padding: 1px; height: 50px;}  }
@media (min-width: 401px) and (max-width: 576px) { .family-container{grid-template-columns: repeat(3,1fr);} }
@media (min-width: 577px) and (max-width: 768px) { .family-container{grid-template-columns: repeat(4,1fr);} }
@media (min-width: 769px) and (max-width: 880px) { .family-container{grid-template-columns: repeat(5,1fr);} }


.container-bread{
    margin: 0;line-height: 25px;height: 100%;overflow-y: auto; padding-right: 5px;scroll-behavior: smooth;
}
.item-bread{
    background: #efefef;
    padding: 2px;
    margin: 5px 0;
    border-radius: 5px;
    font-size: 10px;
    text-decoration: none;
  }
  .item-bread:hover{
    background: #8080804f;
    
  }
  .single-line {width: 100%;white-space: nowrap;overflow: hidden;}


.pagination-container{border-radius: 10px;background: #cecece;padding: 10px;display: flex;justify-content: center;}
.pagination-content{height: 25px;min-width: 150px;border: 1px solid;padding: 5px 8px;border-radius: 10px;font-weight: bold;color: Black;background: #cccc00;display: flex;justify-content: space-around;align-items: center;margin: 0 5px;}
.pagination-input{width: 50px;font-weight: bold;color: Black;border: 0.5px solid;border-radius: 7px;text-align: center;background: #fbfb93;height: 100%;}
.pagination-btn{min-width: 40px;border: 1px solid;padding: 3px 8px;border-radius: 10px;font-weight: bold;color: #FFFFFF;background: #003366;}
.pagination-btn:hover{background: #3399ff;cursor: pointer;}


.bg-inhabilitado{ background: #99000080;}
.bg-moroso{ background: #ffff0080;}
.bg-normal{ background: #00800080;}
.bg-autorizado{ background: #ff800080;}


*:focus-visible{outline: 2px solid #FF008E;}

.customer-container{ width: 100%; max-width: 1280px;}
.item-customer:focus-visible{outline: none;  background-color: #16FF00;}
.item-customer{margin-bottom: 3px; display:flex;justify-content: space-between;}
/*.item-customer:hover{background: #c5c5c5;}*/
.customer-status{display: flex;justify-content: center;align-items: center;padding: 5px;width: 20px; border: 1px solid #003366;}
.customer-info{width: 100%;padding: 5px; line-height: 23px; display: flex;}
.customer-info font{font-size: 13px;}
.info-1 {width: 50%;}
.customer-options{width: 10%;/*background: #94ca94;*/display: flex;justify-content: space-evenly;align-items:center;padding: 5px;}
@media (max-width: 400px) { .customer-info{flex-direction: column;line-height: 20px;} .customer-info font{font-size: 10px;} .info-1{width:100%;} .customer-options{flex-direction: column;} }
@media (min-width: 401px) and (max-width: 576px) {.customer-info{flex-direction: column;line-height: 20px;} .customer-info font{font-size: 12px;} .info-1{width:100%;} .customer-options{flex-direction: column;} }
@media (min-width: 577px) and (max-width: 768px) {.customer-info{flex-direction: column;line-height: 20px;} .info-1{width:100%;} .customer-options{flex-direction: column;} }







.product-container{ width: 100%; max-width: 1280px;}
.item-product{margin-bottom : 3px; display:flex;justify-content: space-between;background: #e7e8e7}
.item-product:focus-visible{  background-color: #c5c5c5;}
/*.item-product:hover{background: #c5c5c5}*/
.product-img{display: flex;justify-content: center;align-items: center;background: #00509f;color: yellow;padding: 2px;width: 70px;}
.product-info{width: 100%;padding: 5px; line-height: 23px; display: flex;}
.product-info font{font-size: 13px;}
.info-1 {width: 50%;}
.product-options{width: 10%;display: flex;flex-direction: column;justify-content: space-evenly;padding: 5px; align-items: center;}
/*.main-content{display: flex;justify-content: center; flex-direction: column;align-items: center;}*/
@media (max-width: 400px) { .product-info{flex-direction: column;line-height: 20px;} .product-info font{font-size: 10px;} .info-1{width:100%;} }
@media (min-width: 401px) and (max-width: 576px) {.product-info{flex-direction: column;line-height: 20px;} .product-info font{font-size: 12px;} .info-1{width:100%;}  }
@media (min-width: 577px) and (max-width: 768px) {.product-info{flex-direction: column;line-height: 20px;} .info-1{width:100%;} }



    .app{
        width: 100%;
        align-items: center;
        display: flex;
        flex-direction: column;
    }
    
    .box-message{
        height: 350px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid lightblue;
        border-radius: 15px;
    }
    .spinner{border: 1px solid lightgray;border-radius: 5px;padding: 5px;}

    .footer{height: 150px; display: flex;align-items: center;justify-content: end;color: #bcb8b8;flex-direction:column;}

    .item-info{display: flex; padding-bottom: .1rem;}
    .item-bodega{min-width: 75px;border: 1px solid #808080;padding: 4px 10px;border-radius: 10px;background: #e2e2e2;font-family: sans-serif;font-size: 12px;color: #000099;}
    .item-exist{border: 1px solid #808080;padding: 4px 10px;border-radius: 10px;background: #FFFFFF;font-family: sans-serif;font-size: 12px;color: #000000;}

    .item-granel{min-width: 75px;border: 1px solid #808080;padding: 4px 10px;border-radius: 10px;background: #ffffca;font-family: sans-serif;font-size: 12px;color: red;}


.box-modal{background: #fff;border: 1px solid;border-radius: 5px;padding: 0.5rem;box-shadow: 2px 2px #000;display: flex;flex-direction: column;align-items: center;width: 70%; height: 90%;}
.box-modal header{width: 100%;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid lightgrey;height: 60px;position: relative;}
.btn-close{padding: 2px 5px;background: red;border: 1px solid #000;border-radius: 50px;height: 30px;width: 30px;color: #fff;position: absolute;top: -20px;right: -15px;font-size: 18px;}
.btn-close:hover{background-color: rgb(201, 0, 0);cursor: pointer;}
.overlay{position: fixed; background: rgba(0, 0, 0, 0.601); z-index: 100;left: 0; top: 0;display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;overflow: hidden;}
@media (max-width: 400px)  { .box-modal{ width: 90%; height: 90%;} }
@media (min-width: 401px) and (max-width: 576px) { .box-modal{ width: 90%; height: 90%;} }
@media (min-width: 577px) and (max-width: 768px) { .box-modal{ width: 90%; height: 90%;} }
@media (min-width: 769px) and (max-width: 880px) { .box-modal{ width: 85%; height: 90%;} }




.cart-float{position: fixed;width: 70px;height: 70px;background: #FFC107;border-radius: 50px;right: 20px;display: flex;justify-content: center;align-items: center;border: 1px solid red;bottom: 20px; cursor:pointer;box-shadow: 2px 0px 10px -1px #000;}
.cart-float:hover{cursor:pointer;transform: scale(1.1, 1.1);background: #ff9f10;}
.cart-float span{padding: 1px 10px;background: red;border-radius: 5px;font-size: 10px;position: absolute;top: 10px;right: 3px;color: #fff;}

.box_selec					{ padding: 3px 3px;	border-radius: 10px; font-family:  sans-serif;	font-size: 12px;	color: #002C57; background: #ffffff;}
.box-input {
    padding: 4px 3px;
    border: 1px solid #006699;
    resize: none;
    box-shadow: 0 0 0 3px #d9ecff;
    margin: 5px 0;
    border-radius: 10px;
    font-family: sans-serif;
    font-size: 13px;
    color: #000066;
    background-color: white;
}


.info-venta{
    border: 1px solid grey;border-radius: 5px;padding: 3px;height: 150px;
}
.info-total{
    background: aquamarine;
    border-radius: 5px;
}
.info-total-valor{
    background: #e6e6e6;
    border: 1px solid;
    border-radius: 5px;
}
.info-cupo{
    background: lawngreen;
    border: 1px solid;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
.info-cupo-valor{
    border: 1px solid;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}
.info-nota-cupo{
    border-radius: 5px;
    padding: 5px;
    color: red;
    border: 1px solid #000;
}

.info-cc{border-radius: 5px; padding: 0 4px; height: 15px;}
.info-cli{border: 1px solid;border-radius: 5px; padding: 3px}

.box-total{
    background: #fff;border: 1px solid;border-radius: 5px;padding: 3px;
}


.template-container{display: flex;justify-content: center;min-height: 1200px;}
.template-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.template{max-width: 1180px; width: 100%;box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.2);border: .5px solid grey;border-radius: 5px;    display: flex;flex-direction: column;align-items: center;padding: 5px;}
.borders{border-radius: 5px;border: 1px solid grey;padding: .3rem;width: 100%;box-sizing: border-box;}
.row:hover{background: #F6DCAC;}
.row td{padding: 3px 0;}
@media (max-width: 400px)  {.template{border: none; box-shadow: none; padding: 0;}}
@media (min-width: 401px) and (max-width: 576px) {.template{border: none; box-shadow: none; padding: 0;}}


.table-product-container {min-height: 500px;max-height: 750px;overflow-y: auto;}
.table-product {width: 100%;border-collapse: collapse;}
.table-product thead {position: sticky;top: 0;background-color: #f0f0f0;}
.table-product tbody {overflow-y: auto;}
.table-product tfoot {position: sticky;bottom: -1px;background-color: #f0f0f0;}


.container-buttons{display: flex;justify-content: center;}
.button-box{width: 50%;display: flex;justify-content: space-evenly;}
@media (max-width: 400px)  {.button-box{width: 100%;}}
@media (min-width: 401px) and (max-width: 576px) {.button-box{width: 100%;}}
@media (min-width: 577px) and (max-width: 768px) {.button-box{width: 100%;}}


.item-cart{
    border-bottom: 2px solid #cbcbcb;
    display: flex;
    justify-content: space-between;
    background: #f5f5f5;
}
.item-cart .info-2{width:25%;}
.cart-img{
    display: flex;
    justify-content: center;
    align-items: center;
    /*color: yellow;*/
    padding: 2px;
    width: 70px;
    position: relative;
}
.cart-img img {
    object-fit: cover;
    border: 1px solid #b0b0b4;
}
.btn-sugerido{
    display: flex;
    background: darkcyan;
    padding: 2px;
    align-items: center;
    border-radius: 5px;
    color: #fff;
    border: 1px solid;
}
.btn-sugerido:hover{ background: #00bebe; cursor:pointer;}

.btn-green			{ border: 1px solid #000033;    padding: 8px 16px;    border-radius: 10px;    font-weight: bold;   color:#FFFFFF;   background: #006600; }
.btn-green:hover		{ background: #66cc00; cursor: pointer;}

@media (max-width: 400px) { .item-cart .info-2{width:100%;} }
@media (min-width: 401px) and (max-width: 576px) {.item-cart .info-2{width:100%;}  }
@media (min-width: 577px) and (max-width: 768px) {.item-cart .info-2{width:100%;} }

.product-data-img{/*width: 25%;*/display: flex;justify-content: center; border: 1px solid grey; border-radius: 5px;align-items: center;} .product-data-info{width: 75%; padding-left: 10px;} 
@media (max-width: 400px)  { .product-data-container{flex-direction: column;} .product-data-img{width: 100%;display: flex;justify-content: center; padding-bottom: 5px;} .product-data-info{width: 100%; padding-left: 0; padding-top: 10px;} }
@media (min-width: 401px) and (max-width: 576px) {.product-data-container{flex-direction: column;} .product-data-container{flex-direction: column; padding-bottom: 5px;} .product-data-img{width: 100%;display: flex;justify-content: center;} .product-data-info{width: 100%; padding-left: 0; padding-top: 10px;} }
@media (min-width: 577px) and (max-width: 768px) {.product-data-container{flex-direction: column;} .product-data-img{width: 100%;display: flex;justify-content: center; padding-bottom: 5px;} .product-data-info{width: 100%; padding-left: 0; padding-top: 10px;}  }


.box-toast{
    background: #fff;
    border: 1px solid;
    border-radius: 5px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 250px; height: 200px;
    justify-content: space-between;
}
.btn-toast{
    border-radius: 10px;
    padding: 5px;
    background: #fff;
    border: 1px solid lightgrey;
    cursor: pointer;
}
.btn-toast:hover{
    background: lightgrey;
}

.btn-plus{
    cursor: pointer;
    border: 1px solid #f47a00;
    border-radius: 5px;
    color: #fff;
    background: #ca6500;  
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5px;
}
.btn-plus:hover	{ background: #ff6600;	}

.alert{
    width: 85%;
    background: #D4F6FF;
    padding: 15px;
    border-radius: 5px;
    color: red;
    border: 1px solid red;
}
.alert ul li{
    list-style-type: none;
    margin: 10px 0;
    font-weight: 500;
    font-size: 14px;
}

.btn-purple{
    border: 1px solid #471396;
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: bold;
    color: #FFFFFF;
    background: #9B177E;
}
.btn-purple:hover{
    background: #C562AF;
    cursor: pointer;
}

.estado-pedido {
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 20px;
    color: white;
    text-transform: uppercase;
}