.bg-color { background-color: #1b1c1e; } .comp-color { background-color: #212226; } .nav-radius { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } .title { color: white; font-family: 'Poppins', sans-serif; display: flex; margin-top: 15px; margin-left: 48px; justify-content: left; text-align: left; background-color: #1b1c1e; } .bag-list { display: flex; color: white; border-bottom: 1px solid white; background-color: #1b1c1e; font-family: 'Poppins', sans-serif; margin-bottom: 1%; justify-content: left; text-align: left; } .body-right { margin-right: 48px; color: white; width: 30%; height: 100%; } .body-left { margin-left: 48px; margin-right: 48px; } .button { color: white; background-color: green; margin-top: 15px; } .full-body { display: flex; } .info { margin-left: 30px; } .titlesummary { text-align: center; border-bottom: 1px solid white; margin: 10px; } .container { margin-left: 0px; justify-content: left; } .container input { justify-content: left; width: 40px; } @media only screen and (max-width: 1000px) { .full-body { display: grid !important; } .body-right { margin-left: 48px; } } @media (max-width: 600px) { .full-body { font-size: 7px; } .img { width: 30px; height: 30px; } .info { margin-left: 5px; } .titletr { word-break: keep-all; } .titletrdes { word-break: break-all; } .titlesummary { font-size: 20px; } .body-right { width: 300px; } .body-left { width: 300px; } } @media (max-width: 541px) { .body-right { width: 444px; } .body-left { width: 444px; } } @media (max-width: 412px) { .body-right { width: 315px; } .body-left { width: 315px; } } @media (max-width: 415px) { .body-right { width: 318px; } .body-left { width: 318px; } } @media (max-width: 376px) { .body-right { width: 280px; } .body-left { width: 280px; } } @media (max-width: 361px) { .body-right { width: 264px; } .body-left { width: 264px; } } @media (max-width: 321px) { .body-right { width: 224px; } .body-left { width: 224px; } } @media (max-width: 281px) { .body-right { width: 184px; } .body-left { width: 184px; } }