@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
.modal {
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0, 0, 0, 0.4);
display: flex;
flex: 1;
align-items: center;
justify-content: center;
left: 0;
top: 0;
z-index: 9999;
}
.modal.hidden {
display: none;
}
.modal .modal-content {
width: 623px;
position: relative;
border-radius: 25px;
background-color: #535353;
margin: 0px;
padding: 20px 0 20px 0;
color: #000;
background: #535353;
background: -moz-linear-gradient(top, #535353 0%, #535353 100%);
background: -webkit-linear-gradient(top, #535353 0%, #535353 100%);
background: linear-gradient(to bottom, #535353 0%, #535353 100%);
float: left;
-webkit-box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.52);
-moz-box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.52);
box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.52);
}
.modal .modal-image {
width: 30%;
float: left;
padding: 20px 0;
margin-left: -70px;
}
.modal .modal-content h2 {
margin: 0px;
font-family: "Montserrat", sans-serif;
text-align: left;
font-size: 46px;
text-transform: uppercase;
color: #fff;
}
.modal .modal-content p {
padding: 0px;
font-family: "Montserrat", sans-serif;
text-align: left;
font-size: 14px;
margin: 10px 0;
line-height: 22px;
width: 95%;
color: #fff;
}
.modal .modal-content .modal-inner-content {
float: left;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
}
.modal .modal-content .input-container {
margin-bottom: 20px;
width: 95%;
box-sizing: border-box;
position: relative;
background-color: #fff;
display: flex;
flex-direction: column;
padding-left: 10px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
height: 275px;
overflow: hidden;
overflow-y: scroll;
text-transform: uppercase;
}
.modal .modal-content .input-container input {
border: none;
color: #000000; height: 56px;
font-size: 14px;
letter-spacing: 0.5px; width: 100%;
text-transform: capitalize; }
.modal .modal-content .input-container input:focus {
outline: none;
}
.modal .modal-content .input-container button {
position: absolute;
top: 0px;
right: 0px; min-width: 120px;
font-family: "Montserrat", sans-serif;
font-weight: 700;
height: 56px;
border: 0px;
background: #ffef00;
color: #009bdb;
font-size: 15px;
margin: 0;
}
.modal .modal-content .input-container button.ready {
background: #51af71;
color: white;
}
.modal .close-button {
font-size: 14px;
line-height: 18px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #fff;
position: absolute;
right: -6px;
top: -6px;
border: 0px;
-webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.27);
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.27);
cursor: pointer;
}
.modal .close-button:hover {
background: #ec0000;
color: #fff;
}
.popup-graybox {
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 100vh;
z-index: 99999;
align-items: center;
display: flex;
box-sizing: border-box;
overflow: auto;
}
#title-select {
background-color: #ffbc00;
width: 100%;
color: #fff;
display: flex;
justify-content: center;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
}
#check-postal-code {
background-color: #ffbc00;
color: #535353;
padding: 5px;
border-radius: 10px;
}
#continue {
background-color: #ffbc00;
color: #535353;
padding: 5px;
border-radius: 10px;
}
#title-modal {
color: #ffbc00;
display: flex;
justify-content: center;
font-size: 33px;
margin-bottom: 20px;
}
#bairro-container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.input-container::-webkit-scrollbar {
width: 8px;
height: 5px;
margin-top: 5px;
}
.input-container::-webkit-scrollbar-track {
background: #fff; }
.input-container::-webkit-scrollbar-thumb {
background-color: #ffbc00; }
#down-arrow {
width: 15px;
height: 15px;
margin-left: 10px;
}
#localizacao {
width: 95px;
position: absolute;
top: 50px;
left: 6px;
transform: rotate(-10deg);
}
#title {
width: 40%;
line-height: 40px;
text-align: center;
}
.message {
margin: 10px 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#postal-code-message {
display: flex;
justify-content: center;
align-items: center;
}
#taxa-message {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#check-postal-code-input:hover {
background-color: #ffbc00;
color: #fff;
}
@media only screen and (max-width: 1024px) {
.modal .modal-content {
width: 70%;
}
#localizacao {
width: 67px;
position: absolute;
top: 85px;
left: 30px;
transform: rotate(-10deg);
}
}
@media only screen and (max-width: 714px) {
#title {
width: 50%;
line-height: 40px;
text-align: center;
}
}
@media only screen and (max-width: 640px) {
.modal .modal-content {
width: 90%;
}
.modal .modal-content p {
text-align: center;
}
.modal .modal-content ul {
padding: 20px 13px;
}
.modal .modal-image {
display: none;
}
.modal .modal-content h4 {
text-align: center;
width: 100%;
}
.modal .modal-content .modal-inner-content {
float: none;
width: 100%;
padding-top: 0;
}
.modal .modal-content h2 {
text-align: center;
font-size: 32px;
}
.modal .modal-content .input-container input {
height: 48px;
font-size: 12px;
}
.modal .modal-content .input-container button {
height: 48px;
font-size: 13px;
letter-spacing: 0.5px;
}
.modal .modal-content {
margin: 0px;
padding: 10px 0 15px 0;
}
#localizacao {
width: 67px;
position: absolute;
top: 70px;
left: 30px;
transform: rotate(-10deg);
}
#title {
width: 40%;
line-height: 40px;
text-align: center;
}
}
@media only screen and (max-width: 558px) {
#title {
width: 50%;
line-height: 40px;
text-align: center;
}
}
@media only screen and (max-width: 480px) {
.modal .modal-content .input-container input {
margin-bottom: 10px; }
.modal .modal-content .input-container button {
position: inherit;
width: 100%;
}
.modal .modal-content h4 {
font-size: 12px;
line-height: 20px;
}
.modal .modal-content .input-container button {
height: 40px;
}
.modal .modal-content .input-container input {
height: 40px;
}
.modal .modal-content ul {
padding-top: 0;
}
#localizacao {
width: 67px;
position: absolute;
top: 75px;
left: 10px;
transform: rotate(-10deg);
}
#title {
width: 51%;
line-height: 40px;
text-align: center;
}
}
@media only screen and (max-width: 375px) {
.modal .modal-content h2 {
font-size: 28px;
}
.modal .modal-content .input-container input {
height: 45px;
font-size: 12px;
}
.modal .modal-content .input-container button {
height: 45px;
font-size: 12px;
letter-spacing: 0.5px;
}
.modal .modal-content ul {
padding: 10px 10px;
}
#localizacao {
width: 67px;
position: absolute;
top: 75px;
left: 0px;
transform: rotate(-10deg);
}
#title {
width: 70%;
line-height: 40px;
text-align: center;
}
}