[page=link_envio]{
    --primaryColor: #1fbb90;
    --secondaryColor: #f13636;
    --itemColor: #1fbb90;
    --highlightColor: #f13636;
    --highlightShadowColor: #f1363680;
}

[page=link_envio].alternative-screen{
    --primaryColor: #809cab;
    --secondaryColor: #b8b8b8;
    --itemColor: #b8b8b8;
    --highlightColor: #809cab;
    --highlightShadowColor: #809cab80;
}

[page=link_envio] .main-clients-container{
    height: 100%;
}

.main-clients-container .client-search{
    height: 10%;
    padding: 10px 10px 5px;
}

.main-clients-container .client-search input{
    width: 100%;
    height: 100%;
    font-size: 1.5em;
    border: 1px solid #000;
    border-radius: 3px;
    padding: 5px;
}

.main-clients-container .link-options{
    display: flex;
    height: 9%;
    padding: 5px 10px 5px;
}

.main-clients-container .link-options select{
    height: 100%;
    width: 65%;
    border: 1px solid #000;
    border-radius: 3px;
}

.main-clients-container .link-options button{
    flex-grow: 1;
    margin-left: 5px;
    padding: 0;
    font-size: 1.3em;
    background-color: var(--primaryColor);
    color: #fff;
    border: none;
    border-radius: 3px;
}

.main-clients-container .clients-table{
    height: 73%;
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
}

.clients-table table{
    table-layout: fixed;
    border: 1px solid #000;
}

.clients-table thead{
    border: none;
    background-color: var(--primaryColor);
    color: #fff;
    font-size: 1.35em;
}

.clients-table tbody{
    font-size: 1.2em;
}

.clients-table tr{
    border-bottom: 1px solid #000;
}

.clients-table thead td{
    padding: 10px 5px;
}

.clients-table tbody td{
    padding: 5px;
}

.clients-table tr td:first-child{
    width: 60%;
}

.clients-table td{
    text-align: center;
}

.clients-table button{
    background-color: var(--primaryColor);
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 10px 0;
    width: 100%;
    font-size: 1.5em;
}

.main-clients-container .pagination-options{
    display: flex;
    width: 100%;
    height: 8%;
    justify-content: center;
    align-items: center;
}

.main-clients-container .pagination-options button{
    height: 100%;
    border: none;
    background-color: transparent;
    font-size: 2.3em;
    padding: 0 10px;
}

.main-clients-container .pagination-options div{
    min-width: 20%;
    text-align: center;
    font-size: 1.8em;
}

/********************************************************************** MODAIS ********************************************************************************/

#products-mix-modal{
    height: 80vh !important;
}

#products-mix-modal .modal-header,
#products-mix-modal .modal-footer{
    display: flex;
    align-items: center;
    justify-content: center;
}

#products-mix-modal .modal-header{
    height: 15%;
    padding: 0;
    text-align: center;
    font-size: 2em;
}

#products-mix-modal .modal-header .link-name{
    text-overflow: ellipsis;
    max-width: 80%;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
}

#products-mix-modal .modal-content{
    margin: 0;
    padding: 10px !important;
    height: 77%;
}

#products-mix-modal .modal-content .categories{
    height: 12%;
    display: flex;
    align-items: center;
}

#products-mix-modal .modal-content .categories div{
    height: 76%;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

#products-mix-modal .modal-content .categories button{
    padding: 0 8px;
    height: 100%;
    margin-right: 5px;
    border: 2px solid var(--primaryColor);
    border-radius: 3px;
    background-color: transparent;
    font-size: 1.3em;
}

#products-mix-modal .modal-content .categories button.selected{
    border-color: var(--highlightColor);
}

#products-mix-modal .modal-content .categories button:last-child{
    margin: 0;
}

#products-mix-modal .modal-content .products{
    height: 88%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#products-mix-modal .modal-content .products .product{
    border: 2px solid var(--primaryColor);
    border-radius: 3px;
    width: 48%;
    height: 25vh;
    margin-bottom: 10px;
}

#products-mix-modal .modal-footer{
    height: 8%;
    padding: 0;
}

#products-mix-modal .modal-footer button{
    height: 100%;
    border: none;
    background-color: transparent;
    font-size: 2.3em;
    padding: 0 10px;
}

#products-mix-modal .modal-footer div{
    font-size: 1.8em;
    margin: 0 5px;
}

#send-link-modal{
    max-height: 78vh !important;
}

#send-link-modal .modal-header{
    padding: 10px;
    text-align: center;
    font-size: 2em;
}

#send-link-modal .modal-content{
    margin: 0;
    padding: 0 10px;
}

#send-link-modal .modal-content .row{
    margin-bottom: 10px;
}

#send-link-modal .modal-content .name{
    font-size: 1.8em;
}

#send-link-modal .modal-content .input > *{
    border: 1px solid #000;
    padding: 3px;
    height: 40px;
    width: 100%;
    font-size: 1.5em;
}

#send-link-modal .modal-content .price-table,
#send-link-modal .modal-content .image{
    display: none;
}

#send-link-modal .modal-footer{
    height: auto;
    padding: 10px 0;
    text-align: center;
}

#send-link-modal .modal-footer button{
    width: 75px;
    height: 40px;
    padding: 0;
    font-size: 1.5em;
    background-color: var(--primaryColor);
    color: #fff;
    border: none;
    border-radius: 3px;
    vertical-align: top;
}

#send-link-modal .modal-footer .whatsapp{
    font-size: 1.3em;
}

#send-link-modal .modal-footer .send{
    margin-left: 5px;
}