/* Main stats up of screen */ #main-stats { margin-left: -20px; margin-right: -20px; background-color: #fdfdfd; border-bottom: 1px solid #efeef3; } #main-stats .stats-row { box-shadow: inset -1px 0px 5px 2px #f9f9f9; } #main-stats .stat { text-align: right; padding: 30px 0px 35px 0px; border-right: 1px solid #e8e9ee; position: relative; box-shadow: 1px 0px 0px 0px white; } #main-stats .stat.last { border-right: 0px; } #main-stats .stat .data { color: #29323a; text-transform: uppercase; font-weight: 600; font-size: 16px; padding-right: 50px; } #main-stats .stat .data .number { color: #32a0ee; font-size: 25px; margin-right: 15px; } #main-stats .stat .date { color: #b4b8bb; font-weight: lighter; font-family: 'Lato', 'Open Sans'; font-style: italic; font-size: 13px; position: absolute; right: 50px; } .section { border-top: 1px solid #edeff1; margin-top: 100px; padding-top: 45px; box-shadow: inset 0px 3px 4px -1px #fafafa; } /* Stats chart */ #statsChart { width: 97%; height: 250px; margin-top: 35px; } /* specific chart styles */ .legendLabel { font-size: 12px; font-family: "Open Sans", Arial; color: #9da3a9; } /* UI elements section */ #pad-wrapper .ui-elements h4 { margin-bottom: 35px; } #pad-wrapper .ui-elements .btn-flat { text-transform: uppercase; } #pad-wrapper .ui-elements .btn-flat.icon { text-transform: none; } #pad-wrapper .ui-elements .btn-flat.icon i { margin-right: 3px; } #pad-wrapper .ui-elements .ui-sliders { margin-top: 10px; margin-bottom: 50px; } #pad-wrapper .ui-elements .ui-sliders .ui-slider { width: 95%; } #pad-wrapper .ui-elements .ui-sliders .ui-slider.slider-sample2, #pad-wrapper .ui-elements .ui-sliders .ui-slider.slider-sample3 { margin-top: 20px; } #pad-wrapper .ui-elements .ui-group { margin-top: 35px; } #pad-wrapper .ui-elements .ui-group > * { margin-right: 5px; margin-bottom: 5px; } #pad-wrapper .ui-elements .knobs { overflow: auto; } #pad-wrapper .ui-elements .knob-wrapper { float: left; } #pad-wrapper .ui-elements .knob-wrapper .knob { box-shadow: none; } #pad-wrapper .ui-elements .knob-wrapper .info { position: relative; top: -20px; } #pad-wrapper .ui-elements .knob-wrapper .info .param { color: #9da3a9; text-align: center; } #pad-wrapper .ui-elements .knob-wrapper .info .param .line { background-color: #c4cdd8; height: 3px; width: 25px; display: inline-block; margin-right: 10px; } #pad-wrapper .ui-elements .knob-wrapper .info .param .line.blue { background-color: #30a1ec; } /* table sample below */ .table-products { width: 100%; } .table-products .filter-block { margin-bottom: 34px; } .table-products .filter-block .ui-select { margin-right: 20px; top: 1px; height: 24px; width: 150px; } .table-products .filter-block .search { margin: 0 60px 0 0; } .table-products .filter-block .new-product { padding: 4px 14px; } .table-products .table tr.first td { border-top: 0 none; } .table-products .table td.description { vertical-align: middle; color: #516372; } .table-products .table td a { text-decoration: underline; margin-top: 6px; display: inline-block; } .table-products .table th input[type="checkbox"] { margin-top: 4px; } .table-products .table input[type="checkbox"] { float: left; margin-top: 11px; margin-right: 23px; } .table-products .table .img { height: 31px; float: left; background: white; width: 31px; border: 1px solid #dfe4eb; text-align: center; cursor: pointer; margin-right: 23px; } .table-products .table .img img { margin-top: 4px; } .table-products .table ul.actions { margin: 5px 0 0 0; padding: 0; float: right; } .table-products .table ul.actions li { display: inline; border-right: 1px solid #d0dde9; padding: 5px 6px 0px 3px; } .table-products .table ul.actions li.last { border: 0 none; } .table-products .table ul.actions i { cursor: pointer; opacity: 0.6; transition: opacity .1s linear; -moz-transition: opacity .1s linear; -webkit-transition: opacity .1s linear; -o-transition: opacity .1s linear; } .table-products .table ul.actions i:hover { opacity: 1; } .table-products .label { position: relative; } .table-products .pagination { float: right; margin-top: 35px; } /* responsive */ @media (max-width: 767px) { #main-stats { margin-left: 0px; margin-right: 0px; } #pad-wrapper .ui-elements .knobs { text-align: center; } #pad-wrapper .ui-elements .knobs .knob-wrapper { float: inherit; } #pad-wrapper .ui-elements .showcase { text-align: center; } #pad-wrapper .table-products .table .img { display: none; } #pad-wrapper .table-products .table input[type="checkbox"] { margin-right: 10px; } #pad-wrapper .table-products .table .label { display: none; } } @media (max-width: 979px) { #main-stats .stat .data { padding-right: 17px; } #pad-wrapper .knob-wrapper .info { display: none; } .pointer { top: 5%; } } @media (min-width: 980px) { #pad-wrapper .ui-elements .knob-wrapper + .knob-wrapper { margin-left: 5px; } } @media (min-width: 1200px) { #pad-wrapper .ui-elements .showcase { width: 53%; } #pad-wrapper .ui-elements .knob-wrapper + .knob-wrapper { margin-left: 35px; } }