:root { --color-primary: #007be3; --color-primary-light: #f6fff3; --mdc-theme-primary: #007be3; }
* { -webkit-appearance: none; outline-color: var(--color-primary); }

body { overflow-x: hidden; height: 100vh; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background-color: #eee; color: #666; }
.web-app { position: relative; left: 0px; top: 0px; display: flex; flex-direction: row; flex-wrap: nowrap; height: 100%; }

.main-container { display: block; height: auto; overflow: hidden; }

.mdi { font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; }

.login { box-sizing: border-box; width: 320px; padding: 16px; box-shadow: 1px 2px 3px rgba(0,0,0,0.3); position: absolute; left: 50%; top: 50%; margin-left: -160px; margin-top: -175px; background-color: #fff; border-radius: 3px; -webkit-border-radius: 3px; height: auto; }
.login input[type="submit"] { background: rgb(106,182,247);border: 0px solid #fff; width: calc(100% + 2px); }

.menu-block { position: relative; display: block; will-change: transform; width: 276px; left: 0px; background-color: #fff; border-right: 1px solid #ddd; overflow: hidden; height: 100%; z-index: 991; }
.menu-block .body { display: block; width: 100%; height: calc(100% - 150px); overflow: auto; }
.menu-block .header { display: block; height: 105px; box-sizing: border-box; padding: 12px; padding-left: 32px; padding-top: 32px; padding-bottom: 32px; /*background-color: #fafafa;*/ background-color: #111; }
.menu-block .header .info { font-size: 13px; line-height: 16px; margin-left: 8px; }
.menu-block .header .info .text { font-size: 11px; color: #fff; }
.menu-block .header .info .name { color: #fff !important; font-weight: bold; }
.menu-block .header .info .role { color: #999; font-size: 11px; }

.menu * { user-select: none; }

.menu { display: block; height: auto; overflow: hidden; color: #777; }
.menu .menu-item { display: block; height: auto; overflow: hidden; cursor: pointer; color: #777; background-color: #fff; box-sizing: border-box; padding: 12px; line-height: 24px; border-bottom: 1px solid #eee; }
.menu .menu-item.selected { background-color: #007be3 !important; color: #fff; /*background-color: #f6fff3 !important; color: #007be3; */ }
.menu .btn-menu { display: block; height: auto; overflow: hidden; }
.menu .menu-item:hover { background-color: #fafafa; }
.menu .menu-item .mdi, .menu .menu-item .text { float: left; }
.menu .menu-item .text { margin-left: 8px; line-height: 24px; margin-top: 1px; }
.menu .menu-sub { clear: both; display: none; height: auto; overflow: hidden; }
.menu .menu-sub .menu-item { padding: 8px; padding-left: 24px; background-color: #f4f4f4; font-size:11px !important; }
.menu .menu-sub .menu-item:last-of-type { border-bottom: 1px solid #eee; }

.main { position: relative; display: block; left: 0px; top: 0px; box-sizing: border-box; height: 100%; width: calc(100% - 277px); overflow: auto; padding-top: 64px; }

.appbar { position: fixed; display: block; top: 0px; width: calc(100% - 277px) !important; z-index: 990; background-color: white; box-shadow: 0px 1px 3px rgba(0,0,0,0.2); }
.appbar i, .appbar span, .appbar a, .appbar .material-icon { color: #666 !important; }

.search-bar { position: relative; z-index: 990; display: block; height: auto; overflow: hidden; background-color: #fafafa; }
.search-bar i { position: absolute; left: 25px; color: #999; top: 12px; }
.search-bar input { box-sizing: border-box; padding: 16px; border: none; background-color: transparent; font-size: 13px; padding-left: 36px; width: 100%; display: block; outline: none; color: #999; }

.search-filters { display: block; overflow-y: hidden; height: 44px; width: calc(100% -40px); }
.search-filters .container { white-space: nowrap; overflow: auto; line-height: 32px; font-size: 16px; color: #999; padding-top: 8px; }

.search-filters::-webkit-scrollbar { display: none; }
.search-filters .container::-webkit-scrollbar { display: none; }
.search-filters .btn-reset-filter { position: absolute; right: 8px; left: unset; }

.block { padding: 12px; background-color: white; box-sizing: border-box; height: auto; overflow: hidden; box-shadow: 0px 1px 2px rgba(0,0,0,0.3); border-radius: 3px; -webkit-border-radius: 3px; display: inline-block; margin-left: 16px; margin-top: 4px; }

.block-for-sumo-select {
    padding: 12px;
    background-color: white;
    box-sizing: border-box;
    height: auto;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    display: inline-block;
    margin-left: 16px;
    margin-top: 4px;
}


.dashboard-container { display: flex; flex-direction: row; flex-wrap: wrap; }

.dashbord-item { display: inline-block; overflow: hidden; min-width: 150px; margin-top:16px; }
.dashbord-item .title { float: left; font-size: 11px; text-transform: uppercase; line-height: 24px; margin-left: 8px; }
.dashbord-item .head { display: block; height: auto; overflow: hidden; }
.dashbord-item .head .mdi { float: left; }
.dashbord-item .number { display: block; text-align: center; padding: 16px; font-size: 48px; display: block; height: auto; overflow: hidden; }
.dashbord-item .foot { display: block; height: auto; font-size: 13px; background-color: #e7ffdf; overflow: hidden; margin-left: -12px; margin-bottom: -12px; margin-right: -12px; }
.dashbord-item .foot .left { float: left; width: 50%; box-sizing: border-box; color: #a0a0a0; background-color: #dafff4; line-height: 24px; padding: 8px; padding-left: 12px; }
.dashbord-item .foot .left i { float: left; margin-right: 4px; }
.dashbord-item .foot .right { float: right; width: 50%; box-sizing: border-box; color: #2eb900; line-height: 24px; padding: 8px; padding-right: 12px; }
.dashbord-item .foot .right i { float: right; margin-left: 4px; }
.dashbord-item .foot .right span { float: right; }
.dashbord-item .foot span { float: left; line-height: 24px; margin-top: 2px; }
.dashbord-item .number div { font-size: 12px; }

.header-block { width: calc(100% - 32px); }
.header-block .left { float: left; }
.header-block .right { float: right; }
.header-block .left i { float: left; margin-right: 8px; }
.header-block .left span { line-height: 24px; float: left; font-size: 11px; font-weight: bold; text-transform: uppercase; }
.header-block { margin-top:16px; }

.stv-radio-buttons-wrapper { clear: both; display: inline-block; }

.stv-radio-button { position: absolute; left: -9999em; top: -9999em; }
.stv-radio-button + label { float: left; padding: 8px 12px; cursor: pointer; border: 1px solid #007be3; margin-right: -1px; color: #fff; background-color: #007be3; }
.stv-radio-button + label:first-of-type { border-top-left-radius: 2px; border-bottom-left-radius: 2px; }
.stv-radio-button + label:last-of-type { border-top-right-radius: 2px; border-bottom-right-radius: 2px; }
.stv-radio-button:checked + label { background-color: #0064b8; }

.full-width { width: calc(100% - 32px); }

.row { display: block; height: auto; overflow: hidden; line-height: 24px; padding: 8px; border-bottom: 1px solid #eee; }
.row:last-of-type { border-bottom: 0px; }
.row:nth-of-type(even) { background-color: #f6fff3; }
.row .key { float: left; width: 40%; font-weight: bold; }
.row .value { float: right; text-align: right; }

.generic-link { cursor:pointer; }

#analysis-chart { height:350px; }

.form-table { padding: 12px !important; border-collapse: initial; margin:0 auto; }
.form-table td { padding: 8px; }
.form-table th { padding: 8px; }
.form-table th { font-weight: bold; }
.form-table .bo-input { padding: 8px; background-color: white; border: 1px solid #ddd; border-radius: 3px; -webkit-border-radius: 3px; color: #666; }
.striped tr:nth-of-type(even) { background-color: #f4f4f4; }
.form-table tr td:first-of-type { font-weight: bold; }

.toast-error { background-color: #f00 !important; color: white !important; }
.toast-error i { color:white !important; }
.toast-unexpected { background-color:#ff7d00 !important; }

.bo-table tr:nth-of-type(even) { background-color: #f4f4f4; }
.bo-table tr { border-bottom: 1px solid #eee; cursor: pointer; }
.bo-table tr:hover { background-color: #def0ff; }
.bo-table tr:last-of-type { border-bottom: 0px; }
.bo-table td { padding-top: 8px; padding-bottom: 8px; }
.input-v-small { width: 50px; }
.input-small { width: 125px; }
.input-normal { width: 200px; }
.input-large { width: 280px; }
.input-full { width: 100%; }
.bo-input:disabled, .bo-input.readonly { background-color: #eee; }
.bo-input i { font-size:13px; }
span.req { color: #f00 !important; float: right; }

.bo-input[type="button"] { min-width:50px; }
.btn-default { background-color: #007be3 !important; color: white !important; border-color: #007be3 !important; cursor: pointer; }
.btn-danger { background-color: #f00 !important; color: white !important; border-color: #f00 !important; cursor: pointer; }
.btn-secondary { background-color: #3d9beb !important; color: white !important; border-color: #3d9beb !important; cursor: pointer; }
.btn-positive { background-color: #2eb900 !important; color: white !important; border-color: #2eb900 !important; cursor:pointer; }

.row-info { padding:12px; color:#999; }

.input-error { border: 1px solid #f00 !important; }
.input-success { border: 1px solid #00ff90; }
.btn-submit:disabled { background-color: #ddd !important; }

#main-loading-container { position: fixed; z-index: 99; top: 0px; display: none; width: calc(100% - 277px); height: 100%; background-color: rgba(0,0,0,0.5); }
#main-loading-container .lds-ring { position: absolute; top: 50%; left: 50%; margin-left: -32px; margin-top: -32px; }

.lds-ring { display: inline-block; position: relative; width: 64px; height: 64px; }
.lds-ring div { box-sizing: border-box; display: block; position: absolute; width: 51px; height: 51px; margin: 6px; border: 6px solid #fff; border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #fff transparent transparent transparent; }
.lds-ring div:nth-child(1) { animation-delay: -0.45s; }
.lds-ring div:nth-child(2) { animation-delay: -0.3s; }
.lds-ring div:nth-child(3) { animation-delay: -0.15s; }

.row-checkbox { display:block; height:auto; overflow:hidden; margin-bottom:8px; }

.datatable { padding: 0px !important; }
.datatable td, .datatable th { white-space: nowrap; }

.btn-sub-menu-toggle { float: right; }

.subtext { font-size:10px; color:#999; margin-top:4px; max-width:250px; display:block; height:auto; overflow:hidden; }

#txt-menu-search::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #fff; opacity: 1; /* Firefox */ }

#txt-menu-search:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #fff; }

#txt-menu-search::-ms-input-placeholder { /* Microsoft Edge */ color: #fff; }

.switch { position: relative; display: inline-block; width: 60px; height: 34px; transform:scale(0.7); }

.switch input { opacity: 0; width: 0; height: 0; }

.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }

.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; }

input:checked + .slider { background-color: #2196F3; }

input:focus + .slider { box-shadow: 0 0 1px #2196F3; }

input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }

/* Rounded sliders */
.slider.round { border-radius: 34px; }

.slider.round:before { border-radius: 50%; }

@keyframes lds-ring {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media only screen and (max-width: 600px) { /*
            .menu-block {
                display:none;
            }

            .main { width:100%; }
            .appbar { width:100% !important; }*/
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 25%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close-modal:hover,
    .close-modal:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }