html, body{font-family: 'Roboto', 'Helvetica', sans-serif;}

.main-drawer .mdl-menu__container{ z-index: -1; }
.main-drawer .main-navigation{ z-index: -2; }

/* loading/warning/error screens - start-of */
#id-loading-screen-blackout{display:table;position:fixed;top:0;left:0;width:100%;height:100%;z-index:30999;background-color:#555;text-align:center;}
#id-loading-screen-blackout div.loader-inside{display:table-cell;position:absolute;top:0;left:0;right:0;bottom:0;vertical-align:middle;margin:auto;}
#id-loading-screen-blackout .loader-message{display:block;position:absolute;left:0;right:0;bottom:0;padding:8px;color:#ddd;}
#id-loading-screen-blackout.hidden{display:none;}

#id-error-screen-blackout{display:table;position:fixed;top:0;left:0;width:100%;height:100%;z-index:30999;background-color:#d55;text-align:center;}
#id-error-screen-blackout .error-screen-message{display:block;position:absolute;left:0;right:0;bottom:0;padding:8px;color:#ddd;}
#id-error-screen-blackout.hidden{display:none;}

.loading-screen-blackout{display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: #555;text-align: center;z-index: 3;}
.loading-screen-blackout div.loader-inside{display:table-cell;position:absolute;top:0;left:0;right:0;bottom:0;vertical-align:middle;margin:auto;}
.loading-screen-blackout .loader-message{display:block;position:absolute;left:0;right:0;bottom:0;padding:8px;color:#ddd;}
.loading-screen-blackout.hidden{display:none;}

.warning-screen-blackout{display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: rgb(85, 85, 85);text-align: center;}
.warning-screen-blackout .content{ display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);padding:24px 24px 16px;background-color:#ddd; }
.warning-screen-blackout .content i{color: #ff5555;}
.warning-screen-blackout .content .message{font-size: 24px;}
.warning-screen-blackout .content .btn-dlg-close{display:block; position:absolute;top:16px;right:16px;}

@media screen and (max-width: 378px){   
    .warning-screen-blackout .content{top: 60%; padding-top: 10px;}
}

.widget-no-data-screen-blackout{display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 52px;background-color: #eee;text-align: center;}
.widget-no-data-screen-blackout .message{display:block;position:absolute;left:0;right:0;bottom:0;padding:8px;color:#111;}
/* loading/warning/error screens - end-of */

/* material icons - start-of */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
/* material icons - end-of */

/* topbar - start-of */
#accbtn{ width: 48px;height: 48px; }
#accbtn i{ left: 37%; }
/* topbar - end-of */

/* dashboard/widgets - start-of */
.dashboard-grid{ padding: 0; }
.dashboard-grid .widget{
    width: calc(100% - 16px);
    margin: 8px 8px 16px;
    min-height: 0;
    z-index: 1;
    overflow: hidden;
}
.dashboard-grid .widget .mdl-card__title{ padding: 0px; background-color: #003333; color: #fdfdfd !important; }
.dashboard-grid .widget .widget-topmenu{ position: absolute; top: 4px; right: 4px; color: #fdfdfd !important; }
.dashboard-grid .widget .widget-options{
    display: block;
    box-sizing: border-box;
    -webkit-transition: max-height .4s ease;
    transition: max-height .4s ease;
    max-height: 0;
    overflow: hidden;
    background-color: #fdfdfd;
}
.dashboard-add-widget{ display: inherit; /*z-index: 50;*/ margin: 16px auto; }

.fullsize{ position: relative; width: 100%; height: 100%; }

.widget{
    background: none; background-color: #fff !important;
    z-index: 100;
    -webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
    -moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
    -o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
    transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.widget .widget-select-container{ display: block;text-align: center;margin: 72px auto; }
.widget .mdl-button.widget-type{ height: 48px; /*width: 40%;*/ margin-bottom: 8px; }
.widget .widget-margin{ margin: 8px; }
.widget .widget-title{
    border: none;
    background-color: initial;
    color: #fff;
    height: 32px !important;
    padding-left: 8px;
    font-size: 14px;
}
.widget .container{
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    overflow:hidden;
}
.widget .widget-body.collapsed .loading-screen-blackout{ display: none; }
.widget .widget-body{
    display: block; position: relative;
    top: 0; left: 0; right: 0; bottom: 0;
    height: 100%;
    background: #fff;
}
.widget .widget-body .fullsize{ min-height: 150px; }
.widget.fullscreen .widget-body{ max-height: 90%; }
.widget .widget-body.collapsed{ max-height: 0; }
.widget .more-options{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: none; background-color: rgba(250, 250, 250, 0.95);
    overflow: auto;
    z-index: 4;
}
.widget.fullscreen .widget-content{ position: relative; }
.widget .chart{ height: 240px; padding:16px 0; }
.widget .chart-description{ text-align: center; margin:2px 4px 6px; }
.widget .error-row{ background-color: #dd4444 !important; color: #ddd !important; }
.widget.fullscreen{
    display: block; box-sizing: border-box; position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    z-index: 600500!important;
    margin: 0;
    overflow: auto;
}
.widget.fullscreen .widget-content{ display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.widget.fullscreen .chart{ height: 90%; width: 100%; }

.widget .widg-edit-preview-options{ display: table; position: relative; width: 100%; background: #f5f5f5; border-bottom: 1px solid #eee; text-align: right; }
.widget .widg-edit-preview-options .mdl-button{ margin: 0 4px; }
.widget .widg-edit-preview-options .mdl-textfield{ padding: 20px 8px 0 0; }
.widget .widg-edit-preview-options .labeled-input{ margin-left: 4px; }
.widget .widg-edit-preview-options .labeled-input input{ max-width: 100px; }
.widget .widg-edit-preview-options .labeled-input .material-icons{ float: left; line-height: 35px; margin-right: 4px; }
.widget .widg-edit-preview-options.ng-hide{ max-height: 0; }
.widget .widget-body.collapsed .widget-margin{ margin: 0; }
.widget .input-group { display: block; }
.widget .inline-input-group { display: inline-block; }
.widget .more-options h3{
    font-size: 24px;
    margin: 16px 0 4px;
    border-bottom: 1px solid #aaa;
}
.widget .more-options select,
/*.widget .more-options input:not(.datepicker),
.widget .more-options input:not(.datetimepicker),*/
.widget .more-options textarea{ 
    background-color: #ddd;
    border: 1px solid #aaa;
}
.widget .more-options select,
.widget .more-options button,
.widget .more-options input,
.widget .more-options textarea{
    margin: 8px;
}
.widget .more-options select {
    -moz-appearance: none;
    background: transparent url("../img/button-down-black.svg") no-repeat scroll right center;
    padding-right: 30px;
}
.widget .more-options .dateinput {
    -moz-appearance: none;
    background: transparent url("../img/calendar.gif") no-repeat scroll right center;
    padding-right: 30px;
}
.widget .more-options .datepicker + .ui-datepicker-trigger{ top: 18px; right: 18px; }
.widget .more-options .datetimepicker + .ui-datepicker-trigger{ top: 18px; right: 18px; }
.widget .resizable-template{ display: block; position: relative; }
.widget .resizable-template _master{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(200,200,200);
}
@media screen and (max-width: 995px){
    .mdl-cell--6-col, .mdl-cell--6-col-desktop.mdl-cell--6-col-desktop,
    .mdl-cell--4-col, .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet{
        width: calc(100% - 16px);
    }
}
/* dashboard/widgets - end-of */

/* standard inputs - start-of */
input.mdl-textfield__input:not(.header-search-input):not(.widget-title), 
select.mdl-textfield__input, 
textarea.mdl-textfield__input, 
input:not(.header-search-input):not(.widget-title), 
select, 
textarea{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
    border: 1px solid #ddd;
    padding: 4pt 8pt;
    font-size: 14px;
    font-family: 'Roboto';
}
input.mdl-textfield__input:not(.header-search-input):not(.widget-title), 
select.mdl-textfield__input, 
input:not(.header-search-input):not(.widget-title):not(.live-graph), 
select{ height: 35px; }
select:not(.header-select),
select.mdl-textfield__input:not(.header-select){
    background: transparent url("../img/button-down-black.svg") no-repeat scroll right center;
    padding-right: 30px;
    margin-bottom: 8px;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
/* inputs configuration - end-of */

/* navbar/breadcrumb - start-of */
.navbar-list--wrapper{ padding: 4px 8px; background-color: #ddd; border-bottom: 1px solid #ccc; }
.navbar-list--wrapper ul.navbar-list{ list-style: none; display: inline-block; padding: 2px 4px; margin: 0; }
.navbar-list--wrapper ul.navbar-list li{ display: inline-block; }
.navbar-list--wrapper ul.navbar-list li:not(:first-child) > a:before{ content: '/ '; font-size: 8pt; }
.navbar-list--wrapper ul.navbar-list li > a{ padding: 2px 1px; color: #424242; text-decoration: none; }
.navbar-list--wrapper .one-button-back-action{ display: inline-block; position: relative; margin-right: 12px; }
/* navbar/breadcrumb - end-of */

/* standard data preview - start-of */
.data-preview-wrapper{ display: block; background-color: #eee; padding: 8px 16px 16px; }
.data-preview-wrapper .dialog-title{ color: #222; padding: 16px 8px 8px; }

.data-preview-wrapper .translate-buttons{
    margin-right: 8px;
    margin-bottom: 8px;
}
.data-preview-wrapper .translations-table{
    margin: 4px auto 16px;
}
/* standard data preview - end-of */

/* forms - start-of */
form {
    margin: 20px;
}
.form-margin{ margin: 8px; }
.form-margin:after{ margin: 8px; clear: both; display: block; content: ""; }
form .input-group{
    display: block;
    position: relative;
    min-height: 58px;
    margin-bottom: 16px;
    width: 40%;
    min-width: 450px;
    float: left;
}
form .input-group label{ display: inline-block; width: 180px; vertical-align:top; padding-top: 8px; }
form .input-group input,
form .input-group select,
form .input-group textarea{
/*    display: block;*/
    /*background-color: #eee;*/
}
form .input-group .input-error{ z-index: 20;padding: 4px 0 8px;color: #cd5a5a; }
form .form-actions{ padding: 16px 8px 8px; }
form .form-actions button{ margin-right: 5px; margin-bottom: 8px; }
form .input-group.fullwidth{ height: auto; min-width:100%; width: auto; }
form .input-group.fullwidth label{ display: block; width: 100%; padding-top: 0; }
form .input-group.fullwidth input,
form .input-group.fullwidth select,
form .input-group.fullwidth textarea{ display: block; width: 100%; }
form .input-group.fullwidth textarea{ min-height: 100px; }

form .input-group.fullinst{ height: auto; min-width:100%; width: auto; }
form .input-group.fullinst label{ width: 280px; }
form .input-group.fullinst input,
form .input-group.fullinst select,
form .input-group.fullinst textarea{ display: inline-block; min-width:30%; }
form .input-group.fullinst textarea{ min-height: 100px; }

form .form-image-preview{
    position: relative;
    max-width: 350px;
    height: auto;
    width: 90%;
}
form input[type="file"], form .input-group.fullwidth input[type="file"]{ display: none; }
form .custom-file-upload{
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}
form label.custom-file-upload{
    display: block;
    box-sizing: border-box;
    margin-top: 8px;
    margin-bottom: 8px;
    width: 100%;
    padding: 10px 14px;
    width: 280px;
    max-width: 100%;
}

form label.notification-file-upload{
    display: block;
    box-sizing: border-box;
    margin-top: 8px;
    margin-bottom: 8px;
    width: 100%;
    padding: 10px 14px;
    width: 280px;
    max-width: 100%;
}

form label.custom-file-upload i, form label.notification-file-upload i{
    vertical-align: middle;
    margin-right: 8px;
}
form .act-form-image-upload{
    margin-bottom: 8px;
}



.aws-dropdown{ position: relative; display: inline-block; }
.aws-dropdown i{ display: none!important; position: absolute; right: 4px; top: 4px; }
.aws-dropdown div.awesomplete,
.aws-dropdown div.awesomplete>input{ box-sizing: border-box; }

.datepicker-wrapper{ position: relative; display:inline-block; }
.ui-datepicker{ background-color: #dfdfdf; color: #020202; }
.datepicker + .ui-datepicker-trigger{ display: block; position: absolute; top: 10px; right: 10px; cursor: pointer; }

.datetimepicker-wrapper{ position: relative; display:inline-block; }
.ui-datetimepicker{ background-color: #dfdfdf; color: #020202; }
.datetimepicker + .ui-datepicker-trigger{ display: block; position: absolute; top: 10px; right: 10px; cursor: pointer; }

.datepicker-wrapper input{ width: 100%; }
.datetimepicker-wrapper input{ width: 100%; }

@media screen and (max-width: 451px){
    form{ margin: 10px; }
    form .input-group{ height: auto; min-width:100%; width: auto; }
    form .input-group label{ display: block; width: 100%; padding-top: 0; }
    form .input-group input,
    form .input-group select,
    form .input-group textarea{ display: block; width: 100%; }
    
    .aws-dropdown{ position: relative; display: block; }
    .aws-dropdown div.awesomplete,
    .aws-dropdown div.awesomplete>input{ width: 100%; }
    
    .datepicker-wrapper{ width: 100%; }
    .datetimepicker-wrapper{ width: 100%; }

    .dashboard-grid .widget{
        width: 100%;
        margin: 8px 0 16px;    
    }
    
    .mdl-cell--6-col, .mdl-cell--6-col-desktop.mdl-cell--6-col-desktop,
    .mdl-cell--4-col, .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet{
        width: 100%;
    }

    .dashboard-grid .widget .mdl-card__title{ height: 25px}    
    .widget .widget-title{ height: 25px !important; }    
    .dashboard-grid .widget .widget-topmenu{top: 0;}
    .widget-topmenu .mdl-button--icon .material-icons { transform: translate(-12px, -16px);-webkit-transform: translate(-12px, -16px);}
}

@media screen and (max-width: 560px){
    .no-connection{ display:none; }
    .connecting{ display:block; }
}

@media screen and (max-width: 340px){
    .title-text { width: calc(100% - 135px) }
    .widget .widget-title { width:100% }
}

@media screen and (min-width: 561px){   
    .connecting{ display:none; }
}

@media screen and (max-width: 890px){
    .datepicker-wrapper:first-child,
    .datetimepicker-wrapper:first-child{
        margin-bottom: 8px;
    }
    .mdl-layout__header-row .datepicker-wrapper:first-child,
    .mdl-layout__header-row .datetimepicker-wrapper:first-child,
    .widget .more-options .datepicker-wrapper:first-child,
    .widget .more-options .datetimepicker-wrapper:first-child{
        margin-bottom: 0;
    }
}
/* forms - end-of */

/* c-ask - start-of */
.c-ask{ display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(85, 85, 85, 0.92);text-align: center; }
.c-ask.in-front-of-all{ z-index:30000; }
.c-ask .content{ display:block;position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);padding:24px 24px 16px;background-color:#ddd;max-width: 380px;width: 70%; }
.c-ask .content .message{ font-size: 24px; }
.c-ask .content .actions{ display:block;text-align:right; }
.c-ask .content .actions button{ margin-left: 10px; margin-bottom: 8px; }
.c-ask .input-group{ display: block;position: relative;margin:8px; }
.c-ask .input-group label{ position: relative;margin: 8px; }
.c-ask-standard{ position:fixed}
.input-group-info-ast,
.input-group-info-msg{ color: #ff5555; }
/* c-ask - end-of */

/* flash-msg - start-of */
.flash-msg{ display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(85, 85, 85, 0.92);text-align: center; }
.flash-msg.in-front-of-all{ z-index:30001; }
.flash-msg .content{ display:block;position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);padding:24px 36px;color: #fff; }
.flash-msg .content .message{ font-size: 24px;margin: 16px 0; }

.flash-msg.success .content{ background: #2fa22f none repeat scroll 0 0; }
.flash-msg.error .content{ background: #d32f2f none repeat scroll 0 0; }
.flash-msg.error .errors-list{ text-align: left; }
.flash-msg-standard{ position:fixed}
/* flash-msg - end-of */

/* login screen - start-of */
#login-background.mdl-layout { display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;margin: 0;padding: 0;background-color: #14747a !important; }
#login-background > .mdl-layout__content { display: block;position: absolute;top: 50%;left: 50%;margin: 0;padding: 0;transform: translateX(-50%) translateY(-50%);-webkit-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);-o-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%); }
#login-card{ max-width: 100%; }
#login-card > .mdl-card__title {
    background-color: #1ca8b2 !important;
    color: #fff;
    height: 146px;
    background-repeat: no-repeat;
    background-origin: content-box;
    background-size: 90% auto;
    background-position: center;
    padding: 16px 8px 4px;
}
#login-card .mdl-textfield{ margin: -8px 0 -16px; }
#login-card .mb-lang-icon{ opacity:0.5; }
#login-card .mb-lang-icon.mb-lang-icon--selected{ opacity:1; }
#login-card button:hover>.mb-lang-icon{ opacity:1; }
#login-card .mdl-card__actions{ text-align:right; padding-bottom: 28px; }
#login-card .mdl-textfield{ padding-bottom: 16px; }
/* login screen - end-of */

#register-background.mdl-layout { display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;margin: 0;padding: 0;background-color: #14747a !important; }
#register-background > .mdl-layout__content { display: block;position: absolute;top: 50%;left: 50%;margin: 0;padding: 0;transform: translateX(-50%) translateY(-50%);-webkit-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);-o-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}
@media screen and (max-height: 750px) {
    #register-background > .mdl-layout__content { display: block;position: absolute;top: 10px;left: 50%;margin: 0;padding: 0;transform: translateX(-50%);-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);transform: translateX(-50%)}
}

#login-card .mdl-textfield--floating-label.is-invalid .mdl-textfield__label{color: rgb(96,125,139);}

.new-account {
    float:left;
    text-align: left;
}

.new-account-a {
    color: rgb(96,125,139);
    font-size: 1rem;
    font-weight: 400;
}

/* arrow-circle - start-of */
[data-loader='arrow-circle']{display: inline-block;position: absolute;top:0;left:-32px;width: 25px;height: 25px;-webkit-animation: arrow-circle infinite .75s linear;-moz-animation: arrow-circle infinite .75s linear;-o-animation: arrow-circle infinite .75s linear;animation: arrow-circle infinite .75s linear;border: 2px solid #fdfdfd;border-top-color: transparent;border-bottom-color: transparent;border-radius: 100%;}
[data-loader='arrow-circle']:before,[data-loader='arrow-circle']:after{position: absolute;top: 19px;left: -3px;content: '';-webkit-transform: rotate(-30deg);-ms-transform: rotate(-30deg);-o-transform: rotate(-30deg);transform: rotate(-30deg);border-top: 5px solid #fdfdfd;border-right: 5px solid transparent;border-left: 5px solid transparent;}
[data-loader='arrow-circle']:after{top: 0;left: 17px;-webkit-transform: rotate(150deg);-ms-transform: rotate(150deg);-o-transform: rotate(150deg);transform: rotate(150deg);}
@-webkit-keyframes arrow-circle{ 0% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } 100% { -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } }
@-moz-keyframes arrow-circle{ 0% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } 100% { -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } }
@-o-keyframes arrow-circle{ 0% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } 100% { -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } }
@keyframes arrow-circle{ 0% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } 100% { -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } }
/* arrow-circle - end-of */

.connecting [data-loader='arrow-circle']{width: 18px;height: 18px;}
.connecting [data-loader='arrow-circle']:before{top: 15px;}
.connecting [data-loader='arrow-circle']:after{left: 11px;}

.status-loader [data-loader='arrow-circle'] {border: 2px solid #555;border-top-color: transparent;border-bottom-color: transparent;}
.status-loader [data-loader='arrow-circle']:before, .status-loader [data-loader='arrow-circle']:after {border-top: 5px solid #555;}

/* custom fixes - start-of */
.mdl-layout__drawer-button{ z-index: inherit; }
main.mdl-layout__content{ z-index: inherit; }
/* custom fixes - end-of */


/* sidenav table - start-of */
.mdl-data-table__cell a, 
.mdl-data-table__cell--non-numeric a{
  color: #777;
  text-decoration: none;
}
/* sidenav table - end-of */



/* custom widgets - start-of */

.control-widget{ position: relative; text-align: center; }
.control-widget .control-actions-group{
  display: block;
  margin: 16px;
  text-align: center;
}
.control-widget .control-actions-group .mdl-button{ margin: 4px; }
.control-widget .control-round-preview{
    display: inline-block;
    text-align: center;
    margin: auto;
    padding: 12px 16px;
    overflow: hidden;
}
.mdl-button.cmd-act-power{ color: #fff; }
.control-widget .cmd-act-power-on{ background: #2fa22f none repeat scroll 0 0; }
.control-widget .cmd-act-power-off{ background: #d32f2f none repeat scroll 0 0; }



/* timetable */
.timetable-wrapper{
    display: block;
    position: relative;
    margin: 32px auto 28px;
    max-width: 680px;
    width: 100%;
}
.timetable-wrapper .timetable-use{
    display: block;
    position: absolute;
    top: -8px;
    right: 64px;
}
table.timetable{
    display: block;
    box-sizing: border-box;
    width: 100%;
    border-collapse: collapse;
    margin: auto;
    overflow: auto;
}
table.timetable thead,
table.timetable tbody{
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin: auto;
}
table.timetable td,
table.timetable th{
    position: relative;
    box-sizing: border-box;
}
table.timetable td:first-child,
table.timetable th:first-child{
    width: 2%;
}
table.timetable td:not(:first-child),
table.timetable th:not(:first-child){
    width: 14%;
}
.timetable-color-green{ background: #2fa22f none repeat scroll 0 0; }
.timetable-color-red{ background: #d32f2f none repeat scroll 0 0; }
.timetable-color-day{ background-image: url("../img/danCm2k.png"); background-repeat: no-repeat }
.timetable-color-night{ background-image: url("../img/nocCm2k.png"); background-repeat: no-repeat}
.timetable-input{ width: 100%; min-width: 60px; text-align: center; }
.timetable-input.invalid{ background-color: #ff0000; color: #ddd; }
.timetable-width-2{ width: 2% !important; }
.timetable-width-14{ width: 14% !important; }
.timetable-width-9 { width: 5.5% !important; }
.timetable-width-13 { width: 13.5% !important; }
/* custom widgets - end-of */


/* sidenav - start-of */
.sidenav-table{ flex-grow: 1; }
/* sidenav - end-of */



/* custom fixes - start-of */
.mdl-card{
    display: block!important;
}

.mdl-card-static{
    position: static;
}

#ui-datepicker-div{ z-index: 6005001 !important; }
/* custom fixes - end-of */



/* custom: per widget */
.temperatura{ color: #880000; text-align:left; vertical-align:top; font-size:22px; font-weight:bold; }
.temperatura_mala{ color: #880000; text-align:left; vertical-align:top; font-size:26px; font-weight:bold; }
.temperatura_velika{ color: #880000; text-align:left; vertical-align:top; font-size:22px; font-weight:bold; }
.stanje_instalacije{ color: #ecf4ff; text-align:left; vertical-align:top; font-size:32px; font-weight:bold; }

.vlaga{ color: #cccc00; text-align:center;vertical-align:top; font-size:22px; font-weight:bold; }
.positionAbsolute{position: absolute;}


.tg  {border-collapse:collapse;border-spacing:0;border-color:#999;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#999;color:#444;background-color:#F7FDFA;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#999;color:#fff;background-color:#26ADE4;}
.tg .zaglavlje{font-size:22px; background-color:#26ade4;text-align:center;vertical-align:top}
.tg .stupac1{font-weight:bold; font-size:22px; color: black; text-align:center;vertical-align:center;}
.tg .stupac2{font-weight:bold; font-size:18px; color: black; text-align:left;vertical-align:center;}
.tg .stupac3{font-weight:bold; font-size:16px; color: black; text-align:left;vertical-align:center;}
.tg .eth-background{background-color:#D2E4FC;}
.tg .wifi-background{background-color:#ecf4ff;}
.tg .temperatura{font-size: 40px; color: red; text-align:center;vertical-align:top}
.tg .vlaznost{font-size: 40px; color: blue; text-align:center;vertical-align:top}
.tg .udaljenost{font-size: 40px; color: black; text-align:center;vertical-align:top}
.tg .status{font-size: 40px; color: black; text-align:center;vertical-align:top}
.tg .red1-background{background-color:#D2E4FC;}
.tg .red2-background{background-color:#ecf4ff;}            
@media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;}}





























th.orderable{ cursor: pointer; }

/* table preview */
.table-list--head-controls{ display: block; padding: 8px 16px; }
.table-list--head-controls ul{ list-style: none; display: block; padding: 0; }
.table-list--head-controls ul li{ display: inline-block; }
.table-list--head-controls ul li.paginator-controls{ float: right; }
.table-list--head-controls ul li.paginator-controls .paginator-current-page{ width: 36px; }
.table-list--head-controls:after{ clear: both; }
.table-list--head-controls ul li.table-more-actions{ float: right; }
.table-list--head-controls ul li.mdl-menu__item { display: block; }

/* ng-view content wrapper preview */

.button-primary-action{ position: fixed; top: 86px; right: 36px; }

ul.form-more-details-actions-list{ display: block; list-style: none; margin: 8px; padding: 0; }
ul.form-more-details-actions-list li{ display: inline-block; }


.mb-table > thead > tr{ background-color: #00bcd4; }
.mb-table > thead > tr th{ color: #fff; }
.mb-table-filter-options{ margin-bottom: 4px; }

.mb-input-error{ color: #d33; }

/* language switch */
.mb-lang-icon{opacity:0.5;}
button:hover>.mb-lang-icon{opacity:1;}
.mb-lang-icon.mb-lang-icon--selected{opacity:1;}


.custom-tabs{}
.custom-tabs-pages{}
.custom-tabs-contents{ display: block; position: relative; padding: 12px 8px; }

.labeled-input{ display: inline-block; }


/*CUSTOM RENATO*/
.rs-handle {
    height: 40px!important;
    width: 40px!important;
    margin: -20px 0px 0px -10px!important;
    background: #fff!important;
    -webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.05);
    box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.05);
    border: 1px solid #ccc;
}
.rs-tooltip-text {
    font-family: inherit!important;
    width: 38px!important;
    padding-left: 0!important;
    padding-right: 0!important;
}
.rs-input {
    padding: 0!important;
}
/*hiding start line in circular widget*/
.rs-bar .rs-seperator { 
	display: none!important;
}
/*increased dimensions of circular widget from 170 to 200px*/
.round-slider-info .slider-big-container,
.round-slider-info .rs-container.full {
	width: 200px!important;
	height: 200px!important;
}
.rs-border.rs-outer {
    border: 2px dotted #ddd!important; 
}
span.rs-block {
	padding: 10px!important;
    border: 4px solid #fff!important;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.rs-border.rs-inner {
    border: 4px solid #fff!important;
}
.rs-border.rs-inner::before {
    border: 1px solid #ddd;
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.round-slider-info .current-value {
	top: 90px!important;
}
.round-slider-info {
	margin: 16px 0!important;
}
/*circular widget buttons*/
.slider-actions-1.show {
	display: inline-block!important;
	top: 17px;
	position: relative;
	padding-left: 16px;
}
.slider-actions-1 button {
	margin: 8px 2px;
	display: block;
	color: rgb(66,66,66);
}
.slider-actions-1 button:last-child .material-icons {
	font-size: 20px;
	padding-left: 1px;
	padding-top: 1px;
}
/*Temperature icon*/
/*.round-slider-info .current-value::before {
    content: ' ';
    width: 28px;
    height: 28px;
    background-size: 28px;
    display: block;
    left: 0;
    right: 0;
    position: absolute;
    top: -44px;
    margin: 0 auto;
	filter: alpha(opacity=60);
    opacity: 0.6;
}*/
/*Margin bottom for select fields*/
.mdl-layout__content .mdl-textfield__input {
	margin-bottom: 5px!important;
	margin-right: 4px!important;
}

.mdl-card__supporting-text select.ng-pristine,
.mdl-card__supporting-text input[type="text"].ng-pristine,
.mdl-card__supporting-text input.mdl-textfield__input.ng-pristine,
.data-preview-wrapper select.ng-pristine {
	height: 35px;
}
.mdl-card__supporting-text select.ng-pristine,
.mdl-card__supporting-text input[type="text"].ng-pristine,
.mdl-card__supporting-text input.mdl-textfield__input.ng-pristine,
.data-preview-wrapper select.ng-pristine,
textarea.mdl-textfield__input, 
textarea {
	margin-bottom: 5px;
	margin-right: 4px;
	font-family: 'Roboto';
	font-size: 14px;
	color: #888;
	border-color: #ddd;	
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}
.mdl-card__supporting-text select.ng-pristine,
.data-preview-wrapper select.ng-pristine {
	background: #f9f9f9 url("../img/button-down-black.svg") no-repeat scroll right center;
}
.mdl-card__supporting-text select.country-select, 
.data-preview-wrapper select.country-select {
        background: #fff url("../img/button-down-black.svg") no-repeat scroll right center;
        color: #000;
}
.mdl-card__supporting-text .widg-date-interval-from-to input[type="text"].ng-pristine {
	margin-right: 0;
}
.mdl-card__supporting-text .widg-date-interval-from-to {
	margin-right: 4px;
	display: inline-block;
}
.widg-btn-update-after-interval {
	margin-right: 4px;
}

/*Header more icon*/
.header {
	position: relative;
}
.header .one-more-menu {
	position: absolute;
	right: 0;
	bottom: 8px;
}
.header .one-more-menu .mdl-button {
	background: #eee;
}
.header .one-more-menu .mdl-menu i,
.header .one-more-menu .mdl-menu span {
	line-height: 48px;
	float: left;
}
.header .one-more-menu .mdl-menu i {
	position: relative;
	left: -6px;
}
.header .one-more-menu .mdl-menu__item {
	padding-left: 16px;
}

@media screen and (min-width: 1128px) {
.round-slider-details {
	padding-left: 16px;
	max-width: 300px;
	padding-top: 16px;
}
}

/*Button height and shadow*/
.errors-container-controls .errors-container-control-prev {
	padding-left: 8px;
}
.errors-container-controls .errors-container-control-next {
	padding-right: 8px;
}
/*.mdl-button.mdl-button--colored {
	-webkit-box-shadow: 1px 1px 5px -2px #000!important;
	-moz-box-shadow: 1px 1px 5px -2px #000!important;
	box-shadow: 1px 1px 5px -2px #000!important;
}*/
/*Button header right*/
.mdl-layout__header-row .mdl-button {
	color: #757575;
}
.topbar-user {
	margin: 0 16px;
	color: rgba(0,0,0,0.87);
	border-bottom: 1px solid #eee;
	padding-bottom: 8px;
}
.topbar-user-type {
	padding: 0 16px;
	color: #ccc;
	font-size: 12px;
}
/*Tobbar select fields*/
.topbar-margin {
	margin-right: 8px;
}
/*Topbar firefox fix on saving*/
.main-layout .main-header .mdl-textfield.mb-gridlist {
    display: block;
}
/*Header padding left*/
.mdl-layout__header-row {
    padding: 0 16px 0 60px!important;
}
/*Width of datefield*/
.mdl-card__supporting-text input.mb-mask--date {
	max-width: 100px;
}
/*Google table padding*/
.google-visualization-table-table {
	padding: 0 8px 8px;
}
/*Google table unset of color for first number*/
.google-visualization-table-seq {
	color: inherit!important;
}
/*Breadcrumbs - topbar*/
.mdl-switch {
	position: absolute;
    width: 40px;
	left: 8px;
	top: 8px;
}
/*Widget table warning/error*/
.widg-tbl--warn-row {
	color: #fff;
	background: rgb(255, 171, 64);
}
.widg-tbl--error-row {
	color: #fff;
	background: #D32F2F;
}
.widg-tbl--warn-row:hover,
.widg-tbl--error-row:hover {
	color: #666;
}
/*Widget buttons start/stop*/
.widg-btn-start,
.widg-btn-stop {
	margin-bottom: 8px;
    margin-right: 8px;
}
.widg-btn-stop {
	background: #D32F2F;
	color: #fff;
}
/*Removing margin from title in error slider*/
h3.error-title {
	margin: 0;
}
/*Errors container border-top*/
.errors-container-current-error-wrapper {
	border-top: 1px solid #eee;
}
/*Ordering in table*/
.mdl-data-table th.mdl-data-table__header--sorted-ascending, 
.mdl-data-table th.mdl-data-table__header--sorted-descending {
    color: #fff!important;
}
.mdl-data-table th.mdl-data-table__header--sorted-ascending:before {
	content: '\e5c5';	
}
.mdl-data-table th.mdl-data-table__header--sorted-descending:before {
	content: '\e5c7';
}
.mdl-data-table th.mdl-data-table__header--sorted-ascending:before,
.mdl-data-table th.mdl-data-table__header--sorted-descending:before {
	position: absolute;
	left: 0;
	bottom: 13px;
	color: #fff!important;
} 


/*Table-related style*/
.table-container{
    overflow: auto;
}
.img-container{
    width: 80px;
    min-height: 1px;
}
.tbl-header--sortable{
    cursor: pointer;
}


/*circular widget buttons (new.constrol3)*/
.slider-actions-left.show {
	display: inline-block!important;
	top: 18px;
	position: relative;
	padding-right: 16px;
}
.slider-actions-left button {
	margin: 28px 2px;
	display: block;
	color: rgb(66,66,66);
}

.slider-actions-right.show {
	display: inline-block!important;
	top: 18px;
	position: relative;
	padding-left: 16px;
}
.slider-actions-right button {
	margin: 28px 2px;
	display: block;
	color: rgb(66,66,66);
}
.slider-actions-right button:first-child .material-icons {
	font-size: 20px;
	padding-left: 1px;
	padding-top: 1px;
}


/* installation status */
.installation-status{
    text-align: right;
}
.installation-status-online,
.installation-status-offline{
    vertical-align: middle;
}
.installation-status-online{
    color: green;
}
.installation-status-offline{
    color: red;
}


/* navigation panel */
.mdl-grid-selection{
    background-color: #029094;
}
.mdl-grid-selection .mdl-textfield{
    box-sizing: border-box;
    width: 100%;
}
.mdl-grid-selection .mdl-textfield select.mdl-textfield__input{
    border: none;
    border-bottom: 1px solid #ddd;
    margin-left: 16px;
    margin-right: 16px;
    box-sizing: border-box;
    width: 85%;
}

.input-group{
    display: inline-block;
}

.main-layout .main-header .mdl-textfield{
    padding: 0px;
    margin-top: 41px;
}
.main-layout .main-header .mdl-textfield .mdl-textfield__expandable-holder {
    bottom: 19px;
}
.main-layout .main-header .head-grid-options--actions{
    display: inline-block;
    position: relative;
}
.main-layout .main-header .mdl-textfield.mb-gridlist{
    margin-top: 0;
    max-width: 200px;
}
.main-layout .main-header .mdl-textfield.mb-gridlist input,
.main-layout .main-header .mdl-textfield.mb-gridlist select{
    max-width: 200px;
}
.main-layout .main-header .mdl-textfield.mb-gridlist input{
    padding: 8px;
}
.main-layout .mdl-layout__header .mdl-layout__drawer-button {
    color: rgba(0, 0, 0, 0.54);
    height: 40px;
    width: 40px;
    margin: 0;
}
.main-layout .mdl-layout__header .mdl-layout__header-row.extended-header-row{
    padding-left: 8px;
}
.mdl-layout__drawer .avatar {
    margin-bottom: 16px;
}
.main-drawer {
    border: none;
}
/* iOS Safari specific workaround */

/* END iOS Safari specific workaround */

.main-drawer .mdl-menu .mdl-menu__item {
    display: flex;
    align-items: center;
}
.main-drawer-header {
    box-sizing: border-box;
    display: block;
    padding: 16px;
}
.main-avatar-dropdown {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

/*.main-navigation{ flex-grow: 1; }*/
.main-layout .main-navigation .mdl-navigation__link {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    color: rgba(255, 255, 255, 0.56);
    font-weight: 500;
}
.main-layout .main-navigation .mdl-navigation__link.is-active {
    background-color: #00BCD4;
    color: #37474F;
}
.main-layout .main-navigation .mdl-navigation__link:hover {
    background-color: #00BCD4;
    color: #37474F;
}
.main-navigation .mdl-navigation__link .material-icons {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.56);
    margin-right: 32px;
}

.main-content {
    max-width: 1080px;
}

.style-color--background{
    background-color: #1ca8b2 !important;
}

.style-color--background--mid-dark{
    background-color: #029094 !important;
}

.style-color--background--mid-dark-help{
    background-color: #029094 !important;
}

.style-color--background--dark{
    background-color: #0c5862 !important;
}

.mb-fab--down-right__wrapper{
    position: absolute;
    bottom: 10px;
    right: 10px;
    text-align: right;
    padding: 12pt;
    z-index: 900;
}

.mb-card-loader__wrapper{
    text-align: center;
}

.mb-button-profile-arrow-down{
    position: absolute;
    right: 0;
    bottom: 0;
}


.mb-color--important {color:#ff0000;}
.mb-color--warning {color:#ffcc33;}
.mb-color--info {color:#009966;}

.mdl-cell > img{
    width: 100%;
    height: auto;
}

.main-drawer-header .header-img{
    width: 100%;
}

/* side navigation */
.mdl-navigation__link{
    color: #fdfdfd !important;
}
.mdl-navigation__link:hover{
    color: #202020 !important;
}

.mb-choicefield__label {
    bottom: 0;
    color: rgba(0, 0, 0, 0.26);
    display: block;
    font-size: 16px;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
    text-align: left;
    top: 24px;
    white-space: nowrap;
    width: 100%;
}

.mdl-textfield__label {
    color: rgb(96, 125, 139);
    font-size: 12px;
    top: 4px;
    visibility: visible;
}

.mdl-textfield__error{
    visibility: visible;
    position: relative;
    margin-top: 0;
}

.mdl-progress{ width: auto; }


/* from table.css */
.mb-table__wrapper{ text-align: center; overflow-y: auto; }
#main .mb-table__wrapper{ margin-bottom: 64px; }
.mb-table__wrapper .mb-table{
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 78px;
}
table.fullwidth{ width: 100%; }




/* slider actions */
.slider-actions-1{
    display: none;
}
.slider-actions-1.show{
    display: block;
}
.slider-actions-2{
    text-align: left;
}

.slider-actions-left{
    display: none;
}
.slider-actions-right{
    display: none;
}
.slider-actions-left.show{
    display: block;
}
.slider-actions-right.show{
    display: block;
}




.rs-tooltip.rs-tooltip-text.edit{
    font-size: 18px;
}
.rs-tooltip.rs-tooltip-text.edit input{
    width: 64px !important;
    padding: 0px !important;
    font-size: 16px;
}

.round-slider-info-wrapper{
    display: inline-block;
    margin: auto;
}

.round-slider-info .current-value, 
.round-slider-control .current-value{
    position: absolute;
    top: 75px;
    left: 10px;
    right: 10px;
    text-align: center;
    font-size: 42px;
    z-index: 5;
}
.round-slider-control .current-value{
    top: 50px;
}

.round-slider-info .rs-tooltip{
    margin-top: 22px !important;
}
.round-slider-control .rs-tooltip{
    margin-top: 14px !important;
}

.sliders-wrapper{
    display: block;
    text-align: center;
}
.round-slider-info,
.round-slider-control{
    display: inline-block;
    position: relative;
    margin: auto;
    text-align: left;
    vertical-align: top;
}
.round-slider-details{
    display: inline-block;
    vertical-align: top;
    margin: 8px 6px 12px;
}

.connection-status{
    position: absolute;
    top: -25px;
    right: 110px;
    height: 25px;
    color: #fff;
}

.mdl-layout {
    overflow: visible;
}
.mdl-layout__content {
    overflow: visible;
}

.help-img {
    height: 80%;
    width: auto;
}

.help-title {
    color: #fff;
    padding-left: 40px;
}

@media screen and (max-width: 451px){
    .help-title {
        color: #fff;
        padding-left: 5px;
    }
    .help-h3{
        font-size: 24px;
    } 
}

.help-page .mdl-layout__header-row {
    padding: 0px 20px !important;
}

.embed-pdf {
    position: absolute;
    width: 100%;
    height: 100%;
}

.check-email {
    margin-top: 20px;
    text-align: center;
}

.mdl-tooltip {
    will-change: unset;
}

.translations-table input {
    width: 100%;
    min-width: 350px;
}

.cmpelet-left {
    display: inline-block;
}

.cmpelet-right {
    float: right;
    padding-left: 5px;
}

.section-div{
    text-align:left;
    border-bottom:1px solid #aaa;
    clear:right;padding:10px; 
    overflow:auto;    
}

.c-ask .param-content{ display:block;position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);padding:0px 0px 16px;background-color:#fff;max-width: 380px;width: 70%; }

@media screen and (max-height: 380px){
    .c-ask .param-content{    
        transform: translate(-50%, -30%);
        -webkit-transform: translate(-50%, -30%);
    }
}

.param-title {background-color:#333; color:#fff; padding:3px; text-align:left;}

.param-img {height:35px; width:35px; text-align:center;}

.param-name {
    display: inline-block;
    width: 85%;
}

.round-slider-info .control-range {
    position: absolute;
    bottom: 5px;
    left: 10px;
    right: 10px;
    text-align: center;
    font-size: 18px;
    z-index: 5;
}

.round-slider-info .min-value {
    width: 45%;
    display: inline-block;
}

.round-slider-info .max-value {
    width: 45%;
    float: right;
}

.range-label {
    font-size: 12px;
}

.round-slider-info .slider-icon {
    width: 30px;
    height: 30px;
    background-size: 30px;
    display: block;
    left: 0;
    right: 0;
    position: absolute;
    top: 45px;
    margin: 0 auto;
    z-index: 20;
}

.round-slider-info .slider-icon-default {
    filter: alpha(opacity=60);
    opacity: 0.6;
}

.error-no-data {display:block;position:absolute;top:40px;left:0;right:0;padding:8px;color:#111;text-align:center;z-index:99}

.param-value {
    min-width: 42px;
    font-size: 20px;
    display: inline-block;
    text-align: right;
    min-height: 1px;
}

.translate-save {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

.translate-save .mdl-button--raised {
    background: rgba(220,220,220,1);
}

.translate-checkbox {
    display: inline-block;
    vertical-align: middle;
}

.mdl-radio {
    font-size: 14px;
}

.radio-div {
    float:right; 
    text-align:left; 
    margin-left:8px;
    font-size: 14px;
}

.radio-div input {
    width: 15px;
    height: 15px !important;	
}

.radio-div-inner {
    display: flex;
    align-items: center
}

.accordion h3 {
    text-align: left;
    font-size: 22px !important;
    font-weight: bold;
}

.ui-state-active {
    border: 1px solid #c5c5c5;
    background: #f6f6f6;
    color: #454545;
}

.ui-state-active .ui-icon {
    background-image: url(../img/ui-icons_555555_256x240.png);
}

.timepicker_wrap {
    width: 160px;
}

.timepicker_wrap .prev {
    background: url(../img/arrow.png) no-repeat;
    background-position: 50% -50%;
}

.timepicker_wrap .next {
    background: url(../img/arrow.png) no-repeat;
    background-position: 50% 150%;
}

.timepicker_wrap .arrow-top {
    background: url(../img/top_arr.png) no-repeat;

}

.ui-datebox-container{
    left:auto !important;
}

.wickedpicker{
    z-index:999999;
}

.forecast{
    margin-top:-20px;
    text-align:center;
    font-size:14px;
    font-weight: normal;
}

.live-graph{
    position:relative;
    top:1px;
}

#login-background .mdl-card, #register-background .mdl-card{ overflow: visible; }

md-switch .md-container {transform: scale(1.3);}

.header-notification {
    display: block;
    position: relative;
    margin-right: 40%;
}

.header-notification .mdl-menu__item {
    white-space: normal;
    height: auto;
    line-height: 1.3em;
    padding-top: 15px;
    padding-bottom: 15px;
}

.header-notification .mdl-menu {
    min-width: 340px
}

#mb-notifications-01 {
    color: red;
    font-size: 12px;
    border: 2px solid red;
}

@media (max-width: 479px) {
    .header-notification .mdl-menu__container {
        top: 41px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
    }
    .mdl-layout__header-row > .ng-scope {
        position: static !important;
    }
}

@media (max-width: 479px) {
    .header-notification .mdl-menu__container {
        top: 41px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
    }
    .mdl-layout__header-row > .ng-scope {
        position: static !important;
    }
    .header-notification {
        display: block;
        position: relative;
        margin-right: 0;
    }
}