.b-col { display: flex; flex-direction: column; width: 100%; } .b-row { display: flex; flex-direction: row; } .b-block-500 { width: 500px; } .b-block-400 { width: 400px; } .b-block-300 { width: 300px; } .b-block-200 { width: 200px; } .b-block-100 { width: 100px; } .b_alerts { margin-top: 20px; margin-bottom: 15px; } .b_alert { padding: 10px 10px 10px 25px; border-radius: 10px; border: 1px solid var(--root-border-color); background-color: white; box-sizing: border-box; position: relative; width: 100%; margin-bottom: 5px; } .b_alert:before { content: ""; position: absolute; background-color: black; width: 8px; height: 8px; border-radius: 50%; top: 17px; left: 10px; } .b_alert.error { border: 1px solid #c52a2a; background-color: #ffc5c5; color: #a50000; } .b_alert.error:before { content: ""; position: absolute; background-color: #a50000; width: 8px; height: 8px; border-radius: 50%; top: 17px; left: 10px; } .b_alert.warning { border: 1px solid #ffc300; background-color: #fff9c5; color: #d3a100; } .b_alert.warning:before { content: ""; position: absolute; background-color: #d3a100; width: 8px; height: 8px; border-radius: 50%; top: 17px; left: 10px; } .b-mb-1 { margin-bottom: 10px; } .b-mb-2 { margin-bottom: 20px; } .b-mb-3 { margin-bottom: 30px; } .b-mb-4 { margin-bottom: 40px; } .b-mt-1 { margin-top: 10px; } .b-mt-2 { margin-top: 20px; } .b-mt-3 { margin-top: 30px; } .b-mt-4 { margin-top: 40px; } .b-mr-1 { margin-right: 10px; } .b-mr-2 { margin-right: 20px; } .b-mr-3 { margin-right: 30px; } .b-mr-4 { margin-right: 40px; } .b-ml-1 { margin-left: 10px; } .b-ml-2 { margin-left: 20px; } .b-ml-3 { margin-left: 30px; } .b-ml-4 { margin-left: 40px; }