.settings-title { width: 80%; border: solid; border-width: 1px; margin: auto; padding: 10px 20px; border-color: black; border-radius: 10px 10px 0px 0px; background-color: gray; .group-title { font-size: 24px; font-weight: bold; line-height: 24px; vertical-align: middle; margin: 10px 0 10px 0; text-align: Left; } .group-description { font-size: 16px; line-height: 16px; vertical-align: middle; margin: 10px 0 10px 0; text-align: Left; } } .settings-elements { width: 80%; border: solid; border-width: 0px 1px; margin: auto; padding: 10px 20px; border-color: black; border-radius: 0px; background-color: lightgray; vertical-align: middle; text-align: Left; .elem-hr { width: 100%; border-color: black; border: dashed; border-width: 1px 0 0 0; margin: 10px auto; } .elem-checkbox { font-size: 18px; font-weight: bold; margin: 0 10px 0 10px; } .elem-title { font-size: 18px; font-weight: bold; margin: 0 10px 0 36px; } .elem-description { font-size: 14px; margin: 0 20px 10px 50px; font-style: italic; } .elem-input { font-size: 14px; margin: 0 20px 10px 36px; input { width: 100%; } } } .settings-validation { width: 80%; border: solid; border-width: 1px; margin: auto; padding: 10px 20px; border-color: black; border-radius: 0px 0px 10px 10px; background-color: gray; } .title { //background-color: green; font-size: 45px; font-weight: bold; line-height: 60px; width: 100%; text-align: center; vertical-align: middle; margin: 10px 0 10px 0; text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.2em white; text-transform: uppercase; font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; } .item-home { background-color: rgba(200, 200, 200, 0.5); font-size: 20px; height: 190px; width: 200px; margin: 5px; padding: 0; overflow: hidden; // box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24); box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6); line-height: normal; border: none; font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 500; text-transform: uppercase; letter-spacing: 0; will-change: box-shadow; outline: none; cursor: pointer; text-decoration: none; text-align: center; transition-duration: 0.4s; float: left; display: block; h1 { font-size: 24px; } &:hover { background-color: rgba(200, 200, 200, 1); //box-shadow: 0px 2px 4px 0 rgba(255, 0, 0, 0.6); } .material-icons { vertical-align: middle; } .material-icons { position: absolute; top: 50%; left: 50%; transform: ~'translate(-12px,-12px)'; line-height: 24px; width: 24px; } } @media all and (min-width: 1310px) { .colomn_mutiple { width: ~'calc(210px * 5)'; margin: auto; } }