@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=News+Cycle:400,700|Fira+Sans:400,500,600,700");
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800;900&display=swap');
:root {
    --color-light-gray: 237, 237, 237;
    --color-dark-grey: 52, 52, 52;
    --color-blue: 38, 107, 222;
    --color-green: 64, 208, 121;
    --color-orange: 255, 180, 81;
    --color-danger: 255, 52, 0;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    color: #666666;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

img {
    display: inline-block;
    border: 0;
    max-width: 100%;
}

a {
    color: rgb(var(--color-blue));
    text-decoration: none;
    transition: all .4s ease-in-out;
}

a:hover {
    color: rgb(var(--color-dark-grey));
}

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

h1,
h2,
h3,
h4,
h5,
h6,
strong {
    color: rgb(var(--color-dark-grey));
}


/* font-size */

.fs-10 {
    font-size: 10px!important;
}

.fs-11 {
    font-size: 11px!important;
}

.fs-12 {
    font-size: 12px!important;
}

.fs-13 {
    font-size: 13px!important;
}

.fs-14 {
    font-size: 14px!important;
}

.fs-15 {
    font-size: 15px!important;
}

.fs-16 {
    font-size: 16px!important;
}

.fs-17 {
    font-size: 17px!important;
}

.fs-18 {
    font-size: 18px!important;
}

.fs-19 {
    font-size: 19px!important;
}

.fs-20 {
    font-size: 20px!important;
}

.fs-21 {
    font-size: 21px!important;
}

.fs-22 {
    font-size: 22px!important;
}

.fs-23 {
    font-size: 23px!important;
}

.fs-24 {
    font-size: 24px!important;
}

.fs-25 {
    font-size: 25px!important;
}

/* color */

.color-green {
    color: rgb(var(--color-green));
}

.color-orange {
    color: rgb(var(--color-orange));
}

.color-blue {
    color: rgb(var(--color-blue));
}

.bg-blue {
    color: rgb(var(--color-blue));
}

.color-light-grey {
    color: rgba(var(--color-dark-grey), .5);
}

.bg-light-grey {
    background-color: rgba(var(--color-light-gray), .2);
}

/*.bg-none {*/
/*    background-color: none !important;*/
/*}*/


/* text decoration */

.decoration-underline {
    text-decoration: underline
}

.decoration-none {
    text-decoration: none
}


/* width */

.w-90 {
    width: 90%;
}


/*HEADER
-------------------------------------------*/

.header {
    background: rgb(var(--color-light-gray));
    padding: 10px 0;
}

.header__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-logo {
    display: block;
    object-fit: contain;
    max-width: 80px;
}

.header-edit .container {
    max-width: 100%;
}

/*MAIN
-------------------------------------------*/

.main__header {
    padding: 20px 0;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: space-between;
    border-bottom: 4px solid rgb(var(--color-light-gray));
}

.main__header h1 {
    font-size: 25px;
    color: rgb(var(--color-dark-grey));
}

.main__nav ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
}

.main__nav ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
}

.main__nav ul li a {
    color: rgba(var(--color-dark-grey), .8);
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.main__nav ul li a span {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main__nav ul li a i, .main__nav ul li a svg {
    color: rgb(var(--color-blue));
    font-size: 25px;
}

.main__nav ul li.active a {
    color: rgb(var(--color-dark-grey));
    font-weight: bold;
}

.main__nav ul li.active a span {
    background: rgb(var(--color-blue));
}

.main__nav ul li.active a span i, .main__nav ul li.active a span svg {
    color: #fff;
}

.main__content--header {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}

.main__content--header h1 {
    font-size: 25px;
    font-weight: bold;
}

.main__content--filter span {
    font-size: 12px;
    color: rgba(var(--color-dark-grey), .5);
}

.main__content--filter select {
    width: 140px;
    border: 1px solid rgba(var(--color-dark-grey), .1);
    font-size: 14px;
    padding: 4px;
    background-color: #FFFFFF;
    border-radius: 3px;
}

.main__content--link a {
    display: flex;
    align-items: center;
    justify-content: start;
}


/*CARDS
-------------------------------------------*/

.cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.card .card-col {
    display: grid;
    grid-template-columns: 1fr;
}

.card .card-col strong {
    font-size: 14px;
}

.card .card-col span {
    font-size: 11px;
}

.custom-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 5px 0 0 5px;
    width: 5px;
    height: 100%;
}

.custom-card.success::before {
    background: rgb(var(--color-green));
}

.custom-card.success .status {
    color: rgb(var(--color-green));
}

.custom-card.secondary::before {
    background: rgba(var(--color-dark-grey), .2);
}

.custom-card.secondary {
    background: rgba(var(--color-light-gray), .4);
    color: rgba(var(--color-dark-grey), .4);
}

.custom-card.secondary strong,
.custom-card.secondary span {
    color: rgba(var(--color-dark-grey), .4);
}

.custom-card.secondary .status {
    color: rgba(var(--color-dark-grey), .4);
}

.custom-card.warning::before {
    background: rgb(var(--color-orange));
}

.custom-card.warning .status {
    color: rgb(var(--color-orange));
}

.custom-card.dark::before {
    background: rgb(var(--color-dark-grey));
}

.custom-card.dark .status {
    color: rgb(var(--color-dark-grey));
}


/*PAGINATION
-------------------------------------------*/

.custom-pagination {
    display: flex;
    gap: 5px;
}

.custom-pagination .page-item .page-link {
    border-radius: 5px!important;
    padding: 0 7px;
}

.custom-pagination .page-item.active .page-link,
.custom-pagination .page-item.active .page-link:hover {
    background: rgb(var(--color-dark-grey));
    border-color: rgb(var(--color-dark-grey));
}


/*STEP CHECKOUT
-------------------------------------------*/



.progress-checkout {
    display: none;
    margin-bottom: 30px;
    margin-top: 30px;
    color: #878788;
    padding-left: 0;

    justify-content: space-between;
    width: 106%;
    margin-left: -25px;
}

.progress-checkout li {
    list-style-type: none;
    font-size: 12px;
    width: calc(100% / 6);
    position: relative;
    font-weight: 400;
    color: rgba(var(--color-dark-grey), .3);
    text-align: center;
    line-height: 1.2;
}

.progress-checkout li span {
    display: block;
    position: relative;
    top: 2px;
}

.progress-checkout li .progress-checkout--date {
    display: block;
    position: relative;
    top: 7px;
}


/* .progress-checkout li:first-child:before {
  margin-left: 15px !important;
  padding-left: 11px !important;
  text-align: left !important;
} */


/* .progress-checkout li:last-child:before {
  margin-right: 5px !important;
  padding-right: 11px !important;
  text-align: right !important;
} */

.progress-checkout li>div {
    color: #fff;
    width: 14px;
    height: 14px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: white;
    border-radius: 50%;
    margin: auto auto 5px auto;
    border: 2px solid rgba(var(--color-dark-grey), .3);
}

.progress-checkout li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: rgba(var(--color-dark-grey), .3);
    position: absolute;
    left: 50%;
    right: 0;
    top: 6px;
    z-index: -1;
}

.progress-checkout li:last-child:after {
    left: 0 !important;
    width: 0 !important;
}

.progress-checkout li.active {
    font-weight: bold;
    color: rgb(var(--color-green));
}

.progress-checkout li.active>div {
    width: 20px;
    height: 20px;
}

.progress-checkout li.active>div {
    margin-top: -3px;
}

.progress-checkout li.active>div,
.progress-checkout li.active:after {
    border: 0;
}


/* success */

.progress-checkout li.active.success {
    color: rgb(var(--color-green));
}

.progress-checkout li.active.success>div,
.progress-checkout li.active.success:after {
    background: rgb(var(--color-green));
}

/* warning */
.progress-checkout li.active.warning {
    color: rgb(var(--color-orange));
}
.progress-checkout li.active.warning>div,
.progress-checkout li.active.warning:after {
    background: rgb(var(--color-orange));
}

/* danger */

.progress-checkout li.active.danger {
    color: rgb(var(--color-danger));
}

.progress-checkout li.active.danger>div,
.progress-checkout li.active.danger:after {
    background: rgb(var(--color-danger));
}

.progress-checkout li.active.success.no-active:after,
.progress-checkout li.active.warning.no-active:after,
.progress-checkout li.active.danger.no-active:after {
    background: rgba(var(--color-dark-grey), .3);
}


/*== Progresso Pedido Responsivo ==*/
.progresso-pedido{
    padding: 5px 0;
}

.progresso-pedido h4{
    font-size: 14px;
    color: #666666;
}

.progresso-pedido .progress{
    display: flex;
    position: relative;
    height: 20px;
}
.progresso-pedido .progress-bar{
    flex-direction: row;
    padding: 2px 0;
}

.progresso-pedido .progress p {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    color: black;
    letter-spacing: 1px;
    font-size: 11px;
    text-transform: uppercase;
    padding: 2px 10px 0 10px;
    border-radius: 20px;
    margin: unset;
    width: 100%;
}

.progresso-pedido .progress-bar{
    background: rgb(var(--color-green));
}

.progresso-pedido--cancelado .progress-bar{
    background: rgb(var(--color-danger));
}


/*RATING
-------------------------------------------*/

.rating {
    display: flex;
    width: 100%;
    overflow: hidden;
    flex-direction: row-reverse;
    justify-content: flex-end;
    position: relative;
    margin-top: 6px;
}

.rating>input {
    display: none;
}

.rating>label {
    cursor: pointer;
    width: 36px;
    height: 30px;
    margin-top: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='14.354' viewBox='0 0 15 14.354'%3E%3Cpath id='estrelinha-inativa' d='M17.321 10.984a.908.908 0 0 0-.5-1.549L12.8 8.85a.117.117 0 0 1-.088-.064l-1.8-3.643a.908.908 0 0 0-1.629 0l-1.8 3.643a.117.117 0 0 1-.088.064l-4.02.584a.908.908 0 0 0-.5 1.549L5.78 13.82a.118.118 0 0 1 .034.1l-.687 4a.908.908 0 0 0 1.318.958l3.6-1.891a.117.117 0 0 1 .109 0l3.6 1.891a.908.908 0 0 0 1.318-.958l-.687-4a.118.118 0 0 1 .034-.1ZM13.6 14.057l.687 4a.117.117 0 0 1-.17.124l-3.6-1.891a.909.909 0 0 0-.845 0l-3.6 1.891a.117.117 0 0 1-.17-.124l.687-4a.908.908 0 0 0-.261-.8L3.423 10.417a.117.117 0 0 1 .065-.2l4.02-.584a.908.908 0 0 0 .684-.5l1.8-3.643a.117.117 0 0 1 .21 0L12 9.136a.908.908 0 0 0 .684.5l4.02.584a.117.117 0 0 1 .065.2l-2.909 2.836A.908.908 0 0 0 13.6 14.057Z' transform='translate(-2.596 -4.636)' fill='%23c1c1c1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 76%;
    transition: .3s;
}

.rating>input:checked~label,
.rating>input:checked~label~label {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='14.354' viewBox='0 0 15 14.354'%3E%3Cpath id='estrelinha-ativa' d='M17.321 10.984a.908.908 0 0 0-.5-1.549L12.8 8.85a.117.117 0 0 1-.088-.064l-1.8-3.643a.908.908 0 0 0-1.629 0l-1.8 3.643a.117.117 0 0 1-.088.064l-4.02.584a.908.908 0 0 0-.5 1.549L5.78 13.82a.118.118 0 0 1 .034.1l-.687 4a.908.908 0 0 0 1.318.958l3.6-1.891a.117.117 0 0 1 .109 0l3.6 1.891a.908.908 0 0 0 1.318-.958l-.687-4a.118.118 0 0 1 .034-.1Z' transform='translate(-2.596 -4.636)' fill='%23ffb451'/%3E%3C/svg%3E");
}

.rating>input:not(:checked)~label:hover,
.rating>input:not(:checked)~label:hover~label {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='14.354' viewBox='0 0 15 14.354'%3E%3Cpath id='estrelinha-ativa' d='M17.321 10.984a.908.908 0 0 0-.5-1.549L12.8 8.85a.117.117 0 0 1-.088-.064l-1.8-3.643a.908.908 0 0 0-1.629 0l-1.8 3.643a.117.117 0 0 1-.088.064l-4.02.584a.908.908 0 0 0-.5 1.549L5.78 13.82a.118.118 0 0 1 .034.1l-.687 4a.908.908 0 0 0 1.318.958l3.6-1.891a.117.117 0 0 1 .109 0l3.6 1.891a.908.908 0 0 0 1.318-.958l-.687-4a.118.118 0 0 1 .034-.1Z' transform='translate(-2.596 -4.636)' fill='%23ffb451'/%3E%3C/svg%3E");
}


/*AVALIAÇÃO POR TAG
-------------------------------------------*/

.avaliacao-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.avaliacao-tags input {
    display: none;
}

.avaliacao-tags label {
    border: 1px solid rgba(var(--color-dark-grey), .2);
    border-radius: 20px;
    padding: 3px 15px;
    font-size: 14px;
    cursor: pointer;
    transition: all .4s ease-in-out;
}

.avaliacao-tags input:hover+label {
    background-color: rgba(var(--color-dark-grey), .1);
}

.avaliacao-tags input:checked+label {
    border: 2px solid rgba(var(--color-dark-grey), 1);
    font-weight: bold;
    color: black;
}

.count-input {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 80px;
    font-size: 14px;
    font-weight: 700;
    padding: 5px;
    border: 1px solid #ABABAB;
    border-radius: 4px;
}

.count-input input {
    width: 100%;
    border: 0;
    background: none;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}

.count-input input[type=number]::-webkit-inner-spin-button,
.count-input input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
}

.count-input input:focus {
    outline: none;
}

.count-input .incr-btn {
    display: block;
    font-size: 11px;
    text-decoration: none;
}

.count-input.count-input-sm {
    max-width: 125px;
}

.count-input.count-input-sm input {
    height: 36px;
}

.count-input.count-input-lg {
    max-width: 200px;
}

.count-input.count-input-lg input {
    height: 70px;
    border-radius: 3px;
}


/* ==== Breadcrumb ==== */

.breadcrumb-checkout {
    padding-top: 15px;
    font-size: 12px;
    color: black;
}

.breadcrumb-checkout a {
    color: black;
}

.breadcrumb-item+.breadcrumb-item::before {
    content: '>';
}

.container-edit {
    padding: 0 10px;
}


/*=== Componentes ====*/

.btn-primary {
    background: #266BDE;
    border: 1px solid #2668de;
    color: white;
    text-transform: uppercase;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    border: unset;
    max-width: 190px;
    width: 100%;
    padding: 10px;
    margin-bottom: 5px;
    max-height: 38px;
    border-radius: 5px;
}

.divider {
    position: relative;
    font-size: 12px;
    text-align: center;
    color: #999999;
    padding: 10px 0;
    opacity: 0.8;
}

.divider:before {
    content: '';
    position: absolute;
    top: 18px;
    left: 0;
    width: 25%;
    border-top: 1px solid #e3e3e3;
}

.divider:after {
    content: '';
    position: absolute;
    top: 18px;
    right: 0;
    width: 25%;
    border-top: 1px solid #e3e3e3;
}