*{padding:0; margin:0;outline:none;}
@font-face {font-family: icons; src: url(fonts/FontAwesome.otf); }
html{height: 100%; overflow-y: scroll; _overflow-x:hidden;}
body{height:100%; font-family:sans-serif;
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}

div{color:#ccc;}

.icon { font-family: icons;}
/*OFF*/
.hidden,.hiddenInfo,.preview{display:none}
.netIndentifier{display: none}
.noselect{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.hidden,.hiddenInfo{display:none!important;}
/*END OFF*/

/*ON*/
.serviseri .netIndentifier{
    display: block;
}


/*COLORS*/
/*light:#ccddd8*/
.vaillantGreen, #home .vaillantGreen {background:rgb(0,145,125);color:#eee;}
.vaillantLightGreen {background:rgb(204,221,216);color:#486;_font-weight:bold;border:1px solid #bcb;}
.brandClass-1 .vaillantGreen, .brandClass-1 #home .vaillantGreen {background: #cc0033;}
.brandClass-1 .vaillantLightGreen {
    background: #cc0033;
    color: #fff;
}
#home a{text-decoration: none;}
.header {position:relative; }
#home .footer, #details .footer{position: fixed; bottom:0;left:0;right:0;
    background: rgba(0,60,60,.5);
}
.brandClass-1 #home .footer, #details .footer{
    background: rgba(255,60,60,.5);
}
#home .outerBoxFlex, #details .outerBoxFlex {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0px auto;
    padding: 0; box-sizing: border-box;
}
#details .outerBoxFlex{width:100%; margin-top:40px }
.logo{margin:0 auto; background: transparent; display:block; }
#home .logo >a{display: block; width:100%; }
#home .logo img {height: auto; width:150px; display:block; margin:0 auto; }
#home .image-holder {width: 100%; height: auto;margin-top:0px }
#home .image-holder img{width: 100%;height:120px;  display: block; }
#home .content{display: block; width:100%; }
#home .contentInner{display: block; width:60%; padding-top:40px; margin:auto; }
.buttonMain{text-align: center; background:#ccc; color:#777; display:block; padding:10px 12px; border: 1px solid #ddd; border-radius:6px; margin-top:18px; _font-size:26px; }
#home .netIndentifier{position:absolute; top:10px; right:10px; color:#cdc;
    z-index: 300;
}
#home .netIndentifier span{font-size:24px;}

.v6 .header{
    display: flex;
    border-bottom:1px solid #999;
    color:#eee;
}
.v6 .header > a{
    background: rgba(100,120,125,.8);
    flex-grow: 1;
    text-align: center;
    padding: 12px 0;
    box-sizing: border-box;
    font-weight:lighter;
}
.v6 .header .headerButton{
    flex-grow: 0;
    width:44px;
    display: block;
}
.public .header {width: 100%;}

#home.page {display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; box-orient: vertical; flex-direction: column; min-height: 100%;}

.serviseri_pup {
    background: url('../images/arotherm.jpg');
    background-size: cover;

}
.serviseri #home.page, .uredjaji{
    background: url('../images/heat-pump.jpg');
    background-size: cover;
}
.brandClass-1 .serviseri_pup{
    background: url('../images/sdPUP.png');
    background-size: cover;
}
.brandClass-1 .serviseri #home.page,.brandClass-1 .uredjaji{
    background: url('../images/sdHome.png');
    background-size: cover;
}


.search #home.page{
    background: url('../images/control.jpg');
    background-size: cover;
}

.podaciUredjajaPage #home.page{
    background: url('../images/arotherm.jpg');
    background-size: cover;
}
.servisUnos #home.page{
    background: url('../images/arotherm.jpg');
    background-size: cover;
}
.brandClass-1 .podaciUredjajaPage #home.page{
    background: url('../images/sdDevice.jpg');
    background-size: cover;
}
.attachments #home.page{
    background: url('../images/arotherm.jpg');
    background-size: cover;
}
.brandClass-1 .attachments #home.page,.brandClass-1 .jos_uredjaja #home.page{
    background: url('../images/sdPUP.png');
    background-size: cover;
}

.jos_uredjaja #home.page{
    background: url('../images/arotherm.jpg');
    background-size: cover;
}
.serviseri_aktivacija_LAST{
    background: url('../images/back-003.jpg');
    background-size: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
    position: relative;
    z-index: 0;
}
.serviseri_aktivacija_LAST:before{
    width:100%;height:220px;
    content: "";
    background:rgba(255,255,255,.7);
    position: absolute;
    top:0;
    display:block;
    z-index: -1;
}

.on,.of{display:none;font-family: icons; font-size:30px;}
.editToCMS,.invisible,.rotate_box {display:none!important;}

select.r_button{
    -moz-appearance:button;
    -webkit-appearance:button;
    appearance:button;
    margin: auto;
    display: block;

}
.r_button {font-size:initial;border-radius:5px;padding:15px;
    margin:6px 0;width: 100%;text-align: center;box-sizing: border-box;}

.v6 .r_button{
    border-radius:2px;
    padding:13px;
    margin:0 auto 6px auto;
    max-width: 280px;
}
.brandClass-1 #sr-podaci textarea.r_button,.brandClass-1 #pogon textarea.r_button {
    background: rgba(230,30,40,.2)!important;
}
#sr-podaci textarea.r_button, #pogon textarea.r_button {background:rgba(220,240,230,.8);
    border: 1px solid #777;}
.r_button.fixedWidth{width:220px; margin:auto; border-radius:4px; }
.button-A{ width:80%; margin:20px auto;}
.button-A span{display:inline-block;width:55%; text-align:center; font-size:19px;}
.button-A .icon{text-align:right; width:25%; padding:0 0 0 25px; font-size:24px}
.button-group{background: silver; padding:10px; box-sizing: border-box; border-radius:6px; margin-bottom: 6px; box-shadow:inset 1px 1px 4px #555 }
.button-group h2{font-size:17px; color:#23403E; }
.button-group.colorA{background: #9a9 }
.button-group.colorB{background: #bcb }
.button-group.colorC{background: #ccc}
a {display: block; font-size:inherit; color:inherit; text-decoration: none}
img{display:block; height:auto; width:100%; box-sizing: border-box;}
#c textarea {background:rgb(204,221,216); color: #555 !important;border:1px solid #777 }
textarea{ color:#888; font-size:16px!important; text-align: left!important;border:none}
.oblast_sadrzaja {}
.oblast_strane{}
.brandClass-1 #c textarea {background:rgb(255,60,60,.5); color: #fff !important;border:1px solid #777 }

/*MOBILE OFF*/
.desktopTable{display:none;}

/*BOX/FLEX*/
body .oblast_strane{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical;box-orient: vertical;flex-direction:column; min-height:100%; }
body .oblast_zaglavlja{}
body .oblast_sadrzaja{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; box-orient: vertical; flex-direction: column; }
body .oblast_futera{display:none;}
body #coll_middle{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical;box-orient: vertical;flex-direction:column; }
#pageBody {display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; box-orient: vertical; flex-direction: column; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; overflow: hidden; margin: 10px 0 0 0; }
/* #pageBody .footer{height:50px; _position:fixed; width:100%; bottom:0;left:0; right:0; z-index:10; }
*/
.outerBoxFlex{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; box-orient: vertical; flex-direction: column; width: 100%; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; width: 100%; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.footerTitle{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}
.navBox{width:100%;display: flex;flex-direction:row; pointer-events: none;}
.verticalSpacer{height:20px; }
/*END BOX/FLEX*/

/* HEADER */
.header {display: block;}
.v6 .logo{position:relative;
    padding: 0 0 10px 0;
    display:block; width:100%;
    background: rgba(0,60,60,.5);
}
.brandClass-1 .logo{background:#ee2b30;}
.brandClass-1 .uskiHeader {
    background: rgba(255,60,60,.5);
}
.logo a {display:block; width:100px; height:auto; margin:0 auto; }
.logo img {height: auto; display:block; margin:0 auto; }
.image-holder {position:relative;top:0;right:0;left:0; width: 100%; height: auto;z-index: 0; }

.image-holder img{width: 100%; height: auto; display: block; }
.logout {position:absolute;top:0;left:0;background: #254847;color:#eee;padding:5px 8px;}
#topBar{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal;box-orient: horizontal;flex-direction:row; }
#topBar a{box-sizing: border-box; padding:8px; color:#fff; font-size:16px; font-weight: bold; text-shadow: 1px 1px 1px rgba(100,100,100,.3); text-transform: uppercase; }
#back{width:50px; -webkit-box-flex: 0; -webkit-flex: 0; flex: 0; }
#topBar #titleOfPage{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1; text-align: right; padding-right: 20px; }
/* END HEADER */

#saunierDuval img{
    filter:hue-rotate(195deg) saturate(1.8);
}
#vaillantMode img{
    filter:initial;
}
.brandClass-1 .box-holder a img{
    filter:hue-rotate(195deg) saturate(1.8);
}
/*DEMO*/
.loginform{}
.DEMO{display:none; }
.pageTitle{display:block; text-align:center; padding:26px 0 0px 0; color:#bbccaa; font-size:20px; }
.index{
    background: url('../images/app-background.jpg') no-repeat;
    background-size:cover;
    /*! background-origin: right; */
}
.loginform {display: block; margin:auto; padding:10px 20px; box-sizing: border-box; }
.loginform h1 {
    color:#eee;padding:0 40px 10px 40px;
    font-size: 26px;text-align:left;
}
.loginform h4 {
    color:#eee;padding:0 40px 20px 40px;
    font-size: 13px;text-align:left;
}
.loginform label {display:block;width:100%;text-align: center;padding-bottom:10px;}
.loginform span {display:block; vertical-align:middle; color:#224443;text-align: center; }
.loginform .internetText {padding:20px 0 0 0;color:#224443; font-size:12px; text-align: center}
.loginform form {background:#fff; border-radius:5px;padding:20px 0px;}
.loginform input{display:block; width:80%;vertical-align:middle; margin:8px auto; padding:10px;  font-size:17px; font-weight:bold;box-sizing:border-box; text-align:center; background:#ffe;
    color:#486; border-radius:5px;border:1px solid #ccc;

}
.loginform #loginToApp, .loginform #goToPublic {background:#488; color:#eee; margin-top:15px; border:1px solid #aaa; border-radius:4px; }
.loginform input[type="submit"]{width:60%; background:#fff; }
.plus {font-size:1.4em; color:inherit!important; margin:0; padding:0 0 .2em 0; width:auto!important;}
/* END LOGIN */


/* CONTENT */
.uredjaji p a {text-align: center; width:50%; color: #224443; box-sizing: border-box; position: relative; cursor: pointer; margin: 20px auto; padding: 10px; font-size: initial; border-radius: 10px; background: #eee; }
.uredjaji p a:after {font-family:icons;content:"\f0da";position:absolute;top:7px;right:10px;font-size:22px}
.box-container {}
.upperBox {text-align:right; box-sizing: border-box; width:100%; }
.upperBox .box{
    display: inline-block; vertical-align: top;
    width: 94%; font-size: initial;
    box-sizing: border-box;
    background:rgba(255,255,255,.7);
    padding:10px 9px;

    margin: 0 0 16px  0;
    text-align: left;
    _box-shadow:-5px 5px 12px rgba(0,0,0,.45);

}
.brandClass-1 .upperBox .box{
    background:rgba(255,255,255,.9);
    border: 1px solid #aaa;
    border-right: none;
}
.search .upperBox .box{
    display:block; vertical-align: top;
    width: 94%; font-size: initial;
    box-sizing: border-box;
    background:rgba(255,255,255,.7);
    padding:50px 9px;
    margin: auto;
    text-align: left;
    box-shadow:-5px 5px 12px rgba(0,0,0,.45);
}
.box .box-holder, .box h2{display: inline-block; vertical-align: middle; }
.box .box-holder{width:260px;}
.box h2{width:10%; text-align: left; padding-right:20px; box-sizing: border-box}
.box-holder a img{
    display: block;
}
.box .box-holder a{position:relative;}

.v6 .menuLabel, .v6 .menuSubLabel{
    display: block;
    margin:0 0 0 80px;
    box-sizing: border-box;
    text-transform: lowercase;
}
.v6 .menuLabel{
    font-size:17px;
}
.v6 .menuSubLabel{
    font-size:12px
}

.v6 .iconFront{
    position: absolute;
    top:10px;left:10px;
}
.v6 .iconFront:after{
    content: "";
    width:25px;height: 25px;
    border: 3px solid #777;
    position: absolute;
    top:-8px;left:-10px;
    border-radius: 50%
}
.v6 .iconFront:before{
    content: "";
    width:36px;height: 1.5px;
    position: absolute;
    top:6px;left:18px;
    background: #777;

}


.v6 .serviseri_pup .upperBox{

    padding:0 10px;
}

.v6 .serviseri_pup .upperBox .form-container,
.v6 .attachments .upperBox .form-container{
    background: rgba(225,225,225,.75);
    border:1px solid #aaa;
    padding: 20px 10px 10px 10px;
    text-align: center;
}
.brandClass-1 .attachments .upperBox .form-container,.brandClass-1 .jos_uredjaja .upperBox .form-container{
    background: rgba(225,225,225,.85);

}
.v6 .jos_uredjaja .upperBox .form-container{
    background: rgba(225,225,225,.85);
    padding: 20px 10px 10px 10px;
    text-align: center;
}


.box a{display: block; color:#055; font-size:14px; letter-spacing:-.2px;
    text-transform:uppercase;
}
.brandClass-1 .box a {
    color:#222
}
.box h2 a{padding:0 0 0 10px; min-height:40px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004); text-rendering: geometricprecision!important; -webkit-font-smoothing: antialiased !important;
    line-height:15px
}
.numHolder {position:relative;}
.brojServisa {display:none; }
.activeContent{text-align: left;color:#445; background: rgba(255,255,255,.9);
    padding: 20px 10px

}
.napomenaUredjaj{
    color:#485;
    font-size:13px;
    padding:40px 0 0 0;
}

#nadolazeciServisi, .box4,.box7,.box2{
    position: relative;
}

#numberOfServices,#numberOfMessages,#numberOfCheckLists{
    position: absolute;
    top:6px; right:-17px;
    color:#eee;
    background:#f55;
    padding: 3px 4px 2px 4px;
    font-size:13px;
    display: none;
    border-radius:3px;
}
#brojUredjajaIzvanJamstva,#brojUredjajaJamtveniRok,#brojUredjajaProduljenoJamstvo{
    position: absolute;
    top:16px; right:6px;
    color:#eee;
    background:#f55;
    padding: 3px 4px 2px 4px;
    font-size:13px;
    border-radius:3px;

}

#numberOfMessages{
    border-radius: 50%;
    top:-4px;right:-7px;
    font-family: sans-serif;
    letter-spacing: -.7px;
    font-size:11px;
    padding: 2px 4px 2px 3px;
}

.online_uredjaji #numberOfServices{
    right:8px;
}
.alertText{
    position: relative;
    color:#e32!important;
    font-weight:bold;
    border:3px solid #c32;
    background: #eee;
    padding: 10px 20px!important;
    box-sizing: border-box;
    border-radius: 20px;
    margin: 20px auto!important;

}
.alertText:after{
    position: absolute;
    top: 100%;
    left:30px;
    width:0px;height:0px;
    background:transparent;
    z-index: 100;
    content:"";
    border-top: 20px solid #c32;
    border-left: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid transparent;
}




/*BUTTONS*/
.mainButton{border:2px solid #bbb; max-width:220px; border-radius:4px; margin: auto; margin-bottom: 10px; color:#bbb; }
.mainButton a{display: block; padding:12px; cursor:pointer; color: #ddd; font-size:14px;font-weight:bold }
#servisirajOfLine a{font-size:14px;}
.mainButton:hover{background:#bbb; color:#666; }
.page .buttonOpis{color:#bbb; font-size:10px; }
.buttonOpis.opisSync {font-size:14px;padding-bottom:10px;}
.typeB{padding:8px 0; margin-top:10px; cursor:pointer; }
.mainButton.linkZaPJ {font-size:14px}
.sq_button{padding:8px;width:44px; box-sizing: border-box;
    font-size:22px; display:inline-block;vertical-align:top;_border-radius:0 5px 5px 0;}

/*CUSTOM ELEMENTS*/
/* The plumswitch - the box around the plumslider */
.plumswitch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    display: inline-block!important;
    vertical-align: middle;
}

/* Hide default HTML checkbox */
.customInlineInput > span{
    display: inline-block;
    width:160px;
    color:#475;
    text-align: right
}
.plumswitch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The plumslider */
.plumslider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 4px;
}

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

input:checked + .plumslider {
    background-color: #4a9;
}

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

input:checked + .plumslider:before {
    transform: translateX(26px);
}



/*ONLINE*/
.activeNavigation > div{margin:6px auto;}
.activeContent.preuzimanje{padding:20px 4px;
    margin:20px 0;
    font-weight:bold; border:1px solid #00917e;border-radius:5px}

/*LISTING UREDJAJA*/
.rowContainer{
    margin:0px auto 4px auto; padding:18px 6px 12px 38px;
    box-sizing:border-box;
    background:none;
    border-top:1px solid #cdc;
    position: relative;
}
.brandClass-1 .rowContainer div p{


}
.rowContainer div{/*! color:#475; */font-size: 11px; padding: 1px 0;}
.searchTop{text-align: center;padding:0 0 10px 0}
#searchFilter {display: inline-block; width:230px; border-radius:0;padding-left:20px; color:#285 }


.rowContainer .adresa-J p {}
.rowContainer.offline{position: relative; }
.rowContainer .nazivProizvodaList, .rowContainer .serBrojList, .rowContainer .datumServisaList{color: #475;font-size: 13px;}
.rowContainer .napomenaList, .rowContainer .error, .rowContainer .errorType, .rowContainer .delovi, .rowContainer .tipUredjajaList, .rowContainer .lokacijaUredjajaList {}
.servisi-rj.popravka .napomenaList{border-top: 1px dashed #ccc; margin-top: 4px; padding: 6px; }
#lokalniServisiRJ {padding:10px 0;}
.rowContainer.offline:after{width:20px;height:20px;content:'!'; background: lightyellow; display: block; bottom:1px;right:1px; position:absolute; border-radius:4px; color:#444;font-size:14px; padding:4px; box-sizing: border-box; }
.v6 .tipUredjaja{ font-weight: bold; font-size: 15px;color: #287;}
.brandClass-1 .tipUredjaja{color: #cc0033;}
.v6 #home .korisnik-J p{font-weight:normal;display:
        inline-block;color: #333;padding:0px 0;
    font-size:19px;
    background: none;
    text-align: left;
}
.v6 #home .korisnik-J.korisnikAdresa p{
    font-size:12px;
    font-weight:normal;
}


.eanc {font-size:12px;color: #999;font-weight:normal;}
.brandClass-1 .eanc{color:#222}

.rowContainerInner{
    position: absolute;
    top:0;bottom:0;right:0;
    display: flex;
}
.v6 .rowContainer:after{
    font-family: icons;
    content: "\f105";
    font-size:60px;
    position: absolute;
    right:20px;top:20px;
    color:#487;
    pointer-events: none;
}
.brandClass-1 .rowContainer:after{
    font-family: icons;
    content: "\f105";
    font-size:60px;
    position: absolute;
    right:20px;top:20px;
    color:#cc0033;
    pointer-events: none;
}
.v6 .dates-J a{
    position: relative;
    display: block;
    display:flex;
    flex-grow: 1;
    flex-direction: column;
    width:100%;height: 100%;
}
.dates-J a span{
    position: absolute;
    right:0; top:2px;
    flex-grow: 1;
    flex-basis: 0;
    padding: 0 20px;
    font-size: 12px;color: #898;
}
.brandClass-1 .dates-J a span {
    color:#cc0033
}
.dates-J a span:last-child{left:unset;top:unset;bottom: 0; }

.v6 .uredjajKontejner{
    width:90%;
    margin: auto;
}



/* LISTING SERVISA ZA UREDJAJ */

.listaServisaZaSN li{display:table;margin:0 0 10px 0;
    font-size:0;list-style:none;
    border-radius: 4px;
    border: 2px solid #bbb;
    box-sizing:border-box;
    background: rgba(255,255,255,.7)
}
.listaServisaZaSN li .SUrBox {display:table-cell;padding:2px 10px;box-sizing:border-box;vertical-align: middle;}
.listaServisaZaSN li p {color:#eee;}
.listaServisaZaSN .SUredjajaDatum {width:1%;border-right: 1px solid #bbb;}
#home .listaServisaZaSN p{font-size: 12px}
.listaServisaZaSN .SUredjajaTip {width:1%;border-left: 1px solid #bbb;}
#home .listaServisaZaSN .colorPopravka {background:#375;}
#home .listaServisaZaSN .colorServis {background:#3a9;}
#home .listaServisaZaSN .colorPopravka p,#home .listaServisaZaSN .colorServis p{color:#ddd; font-size:18px;}

/*LISTING UREDJAJA TRGOVCI*/
.listingGarancija .naslovTable{ display: none;}


/*LISTING UREDJAJA SERVISERI*/
.uredjaji #home .outerBoxFlex{padding:0 }
.responsiveTable .status-garancije { margin:4px auto;}
.responsiveTable .status-garancije li a{ height:10px;}
.naslov-serviser{padding:0 0 10px 0; }
.naslov-serviser h3{color:#ccc; text-decoration:underline; font-weight:100; font-size:20px; }
.listaServ {border: 1px solid #ccc; border-radius: 6px; margin: 0px auto 10px auto; color: #ccc; padding: 6px; }
.listaServ a{color: #ccc;font-size: 12px; }
.orangeRow {background: -moz-linear-gradient(top, rgba(229,175,0,0.65) 0%, rgba(255,255,255,0.58) 47%, rgba(232,143,0,0.5) 100%); background: -webkit-linear-gradient(top, rgba(229,175,0,0.65) 0%,rgba(255,255,255,0.58) 47%,rgba(232,143,0,0.5) 100%); background: linear-gradient(to bottom, rgba(229,175,0,0.65) 0%,rgba(255,255,255,0.58) 47%,rgba(232,143,0,0.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6e5af00', endColorstr='#80e88f00',GradientType=0 ); }
.listaServ.orangeRow a{color: #333;}
.prikaz-uredjaja{}
.prikaz-uredjaja >div{font-size:12px; border-bottom:1px dashed #aaa; padding: 4px 0; }

#home .prikaz-uredjaja >div p, #home .prikaz-uredjaja p span{color:#eee; padding:3px; font-size: 14px; font-weight: normal; }
#home .prikaz-uredjaja p{padding:3px 0; }
.sernum-out {overflow:hidden; font-size:13px!important;}
.tip-out{font-weight: bold; padding-bottom:6px; font-size:14px!important; }
#home .prikaz-uredjaja >div span, #home .prikaz-uredjaja span{color:#888; padding:3px; }
#home .prikaz-uredjaja #korisnik span{line-height:12px; }
#home .prikaz-uredjaja #korisnik p{font-weight:bold; font-size:16px; margin:0;line-height:16px }
.serviseri_aktivacija #home .prikaz-uredjaja span {color:#ddd}
.serviseri_aktivacija #home .prikaz-uredjaja p {color:#ddd; font-weight:bold; font-size:14px; }
.serviseri_aktivacija #home .prikaz-uredjaja #korisnik p{font-size:14px;font-weight:bold; }


/* PUSTANJE U POGON */
.form-container{margin:0 auto 44px auto;
    padding: 0 2px;
}
.form-container form {width:100%;}
.form-container .page {width:100%;display:none;margin:0 auto;}
.servisUnos .form-container .page{
    background: rgba(255,255,255,.8);
    padding: 20px 0
}
.brandClass-1 .form-container .page label{
    color: #cc0033
}
.form-container .page label {font-size:20px;
    color:#486;
    text-align:center;
    padding: 0 0 10px 0;
    display: block;}
.form-container .page p {
    padding:11px 0 6px 0;
    color:#475;text-align: center;
    font-size: initial;
    _background: rgba(255,255,255,.7);
    width:90%;
    margin:auto;
}
.brandClass-1 .form-container .page p{
    color: #222
}
.form-container .page p span {padding-right:15px;}
.form-container .page .podaciEan span:last-child{padding:0px;font-size:13px!important;}
.v6 .basic_form input{
    box-sizing:border-box;padding:9px 15px;
    _width:100%;
    display:block;;font-size:15px;
    border:1px solid #aaa;
    background:rgba(220,240,230,.8);
    text-align: center;
}
.brandClass-1 .basic_form input{
    background: rgba(230,30,40,.2);
    border: 1px solid #222
}

.v6 input[type=date]{
    text-align: center;
}
#home .form-container .napomenaPJ{
    padding:10px 0 10px 10px;
    text-align: left;
    color:#666;
    font-size:18px;
}
#pogon input{text-align:right; }

.LoadSpinner{
    width: 100px;
    margin: 10px auto;
}
#c1 {width:auto;margin:0 auto;width:25px;height:25px;}
.left_input > a {margin:20px 0;width:100%;}
.barcode_button {display:block;padding:15px 10px;
    box-sizing:border-box;text-align:center;
    border:none;color:rgb(204,221,216);background:rgb(0,145,125); text-transform: uppercase;
}
.brandClass-1 .barcode_button{
    background: #cc0033;
}
.barcode_button span{display:block; }
.barcode_button .icon{font-size:56px; padding:0 10px; }
.submit_button {
    text-align:center; box-sizing:border-box;
    position:relative; cursor:pointer; margin:20px auto; padding:15px; box-sizing:border-box;

}
.v6 .main-submit{
    margin-top:20px
}
.submit_button:after {font-family:icons;content:"\f054";position:absolute;
    top:10px;right:10px;font-size:22px;}
.form-container .activePage {display:block; }
input[type="file"]{background: #fff; color:#ccc; cursor:pointer; border-radius: 6px; padding:15px; box-sizing: border-box; }
.v6 .forma input[type="date"],
.v6 input[type="date"]{text-align:center!important; box-sizing:border-box; padding:15px;width:100%; display:block; color:#224443; font-size:17px; margin:0 auto; }
.ui-datepicker-header {background:#224443!important;}
#napomenaTA{color:#555!important; padding:10px; border-radius: 6px;
    width:100%;background:rgb(204,221,216);
    margin:8px auto; box-sizing: border-box; }
#home .dugme_posalji {padding: 15px; box-sizing:border-box; margin:18px auto 0px auto; font-weight:normal; }
.navigacijaServisa h2{color:#bbb; text-shadow: none; display: block; text-align: center; font-size:16px }
.navigacijaServisa .button-group{border-bottom:1px solid #bbb }
.input_fields_wrap {padding:10px 0}
.input_fields_wrap div {padding:0; }
.serviseri_pup #home .podaciOUredjaju p{padding:0}
.app-body {font-size:initial;}
.v6 .ui-autocomplete{
    height:140px!important;
    overflow-y: scroll;
    right:0;
    top:120px;
}

/*PRODULJENO JAMSTVO*/
.pjAktivacija.uredjaji #home .outerBoxFlex{padding:60px 8px 0 8px; }
/*UREDJAJI*/
.sviUredjaji.uredjaji #home .outerBoxFlex{padding:10px 8px 0 8px; }

/*STATUS GARANCIJE*/
.statusBar-J{
    position: absolute;
    bottom:0;left:0;right:0;top:0;
    _z-index: 0;
    width:100%;
    padding:0; height:100%;

}
.status-garancije {font-size:0; margin:0 auto;
    background:#296;height:100%;
    display: inline-block;
    opacity: .45;
}
.brandClass-1 .status-garancije{
    background: #cc0033
}
.preostalo{
    font-size:0; margin:0 auto;
    background: #ded;height:100%;
    display: inline-block;
    opacity: .3;
}

.check-status{background: #fff!important;}

/* PODACI O UREDJAJU */


.infoGarancija li{list-style:none;}
.infoGarancija li a,.uredjajInfoLista li span{color:#eee;font-size:14px;}
.uredjajInfo {}
.infoGarancija h2,.infoGarancija h2 a{color:#eee;font-size:22px;padding:5px 0 10px 0;text-decoration:underline;}
.uredjajInfo h3{color:#eee;font-size:17px}
.uredjajInfoLista li,.serviserInfoLista li{padding:0 0 10px 0;}
.uredjajInfoLista .imgGarancija{padding:10px 0;width:80%;margin:0 auto;}
.uredjajInfoLista .imgGarancija img{display:block;width:100%;height:auto;}

.podaciUredjajaPage #home .uskiHeader:after{
    content:"";
    position: absolute;
    top:40px;left:0;
    width:100%;
    height:130px;
    background:#00917e;
    z-index: -1;
    /*! border-radius:10px; */
    border:1px solid #444;
    box-sizing: border-box;
    box-shadow:inset -1px -1px 22px #000;
    opacity:.4;
}

.podaciUredjajaPage #home .uskiHeader:before{

    content:"";
    position: absolute;
    top:40px;left:0;
    width:100%;
    height:130px;
    background:#00917e;
    z-index: 0;
    background: linear-gradient(45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.61) 39%,rgba(255,255,255,0.6) 40%,rgba(255,255,255,0) 43%);
    opacity:.3;
    box-shadow:inset 1px -1px 32px rgba(0,145,126, .4);
    box-sizing: border-box;
    /*! border-radius:10px; */

}
.graf table{
    width:100%;
    margin: auto;
}
.brandClass-1 .graf table td{
    color:#cc0033
}
.graf table td{width:1%; text-align:left; color:#00917e; font-weight:bold; font-size:12px}
.graf table td:nth-child(2){
    text-align: center;
}
.graf table td:nth-child(3){
    text-align: right;
}

.osnovniPodaci{
    color:#00917e;
    text-align: center;
}
.osnovniPodaci h2{
    font-size:16px;
    letter-spacing: -.2px;
}
.osnovniPodaci h3{
    font-size:16px;
}
.brandClass-1 .osnovniPodaci h3,.brandClass-1 .osnovniPodaci h2{
    color:#cc0033
}

#pogon .osnovniPodaci p{
    padding:2px 0;
    letter-spacing: -.4px;
    font-size: 13px;
    text-align: center;
    background: none;
}
#pogon .activeNavigation{
    margin-top:16px;
}
.changeMe.osnovniPodaci{
    position: absolute;
    top:44px;left:0;right:0;
    background: #fff;
    padding: 30px;

}
#pogon .changeMe.osnovniPodaci .formatEdit{
    display: block;
    border:1px solid #777;
    padding: 10px;
    margin:8px auto;

    font-size:16px;
    box-sizing: border-box;
}
.brandClass-0 .formatEdit:focus{
    background: #cfc!important;
}
.brandClass-1 .formatEdit:focus{
    background: rgba(240, 0, 44,.2)!important;
}


/*SERVISI*/

.podaciUredjajaPage .activeNavigation{
    padding:20px 0
}

.v6 .servisUnos .activeContent,
.v6 .popravkeUnos .sn-out{
    font-weight: normal;
    font-size:14px;
    text-align: center;
    color:#888;
    background: none;
}

.v6 .servisUnos .activeContent{
    display: none
}

/*
.v6 .servisUnos #home .uskiHeader:after,
.v6 .popravkeUnos #home .uskiHeader:after{
    content:"";
    position: absolute;
    top:42px;left:0;
    width:100%;
    height:50px;
    _background:#00917e;
    z-index: -1;
    _border:1px solid #444;
    box-sizing: border-box;
    _box-shadow:inset -1px -1px 22px #000;
    opacity:.9;
}

.v6 .servisUnos #home .uskiHeader:before,
.v6 .popravkeUnos #home .uskiHeader:before{

    content:"";
    position: absolute;
    top:40px;left:0;
    width:100%;
    height:52px;
    _background:#00917e;
    z-index: 0;
    _background: linear-gradient(45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.61) 39%,rgba(255,255,255,0.6) 40%,rgba(255,255,255,0) 43%);
    opacity:.4;
    _box-shadow:inset 1px -1px 32px rgba(0,145,126, .4);
    box-sizing: border-box;

}
*/
/*Radni nalog*/
#iframe2,#iframe-serviser {width: 100%}
#iframe2 h2,#iframe-serviser h2{text-align: center; margin: 20px auto; color: #055;background: rgba(255,255,255,.7);padding: 5px;}
#iframe2 #canvas,#iframe-serviser #canvas-serviser{display: block; margin: auto; margin-bottom: 10px}
.button-potpis, .button-potpis-new, .done, .button-potvrdi, #clearbutton,#clearbutton-serviser{
    text-align: center;
    border-radius: 2px;
    padding: 13px;
    margin: 0 auto 6px auto;
    max-width: 180px;
    background:rgb(0,145,125);
    color:#eee;
}



.v6 .servis-input{
    padding-top: 26px;
    text-align: center
}

.v6 .servis-input .customInlineInput span{
    text-align: center;
    font-size: 16px;

}
.brandClass-1 .servis-input .customInlineInput span{
    color:#cc0033
}
.v6 .servis-input .customInlineInput {
    padding: 20px
}
.v6 .servisUnos .page p{
    text-align: center;
}
.v6 .servisUnos .page textarea{
    margin: auto;
}

#kontaktiraj span{
    display: inline-block;
    font-size: 16px;
}



/*POPRAVKE*/

.unosPopravkeForm{
    padding:20px 0;
}
#home .unosPopravkeForm p{
    padding:10px 0 0 0;
}
#home .errorContainer{

    width:270px;
    margin:auto;

}
#home .errorContainer #errCode{
    width:70px;
    display: inline-block;
}
#home #errCode{font-size:22px; padding:4px;color:#398}
#home .errorContainer span{

    display: inline-block;
}
#home .errF{
    font-size:24px;
    display: inline-block;
}

.popravkeUnos #home .prikaz-uredjaja{margin-bottom:20px; display:none}
.popravkeUnos #home .sn-out{font-weight: bold; font-size:14px; }

.popravkeUnos .form-container .step-3{
    padding: 50px 40px;
    box-sizing: border-box;
}
.parts_fields_wrap{
    width:90%;
    margin: auto;
    padding: 0 10px;
    box-sizing: border-box;
}
.v6 .parts_fields_wrap p{
    background: none;
}
.popravkeUnos .listaDelova li{
    list-style: none;
    display: block;
    width:100%;
    text-align: center;
    padding:14px 0;
    border: 1px solid #ccc;
    color:#387;
    font-size: 15px;
    position: relative;
    margin: 8px auto;
    background: #DFF;
}
.brandClass-1 .popravkeUnos .listaDelova li{
    background:rgba(255,60,80,.3);
    color:#cc0033
}
.popravkeUnos .listaDelova li:after{
    content:"\f00d";
    font-family: icons;
    position: absolute;
    top:6px; right:10px;
    font-size:32px;
    pointer-events: none;


}

/*SERVISI LISTING OGRANICENJE*/
.servisi.popravka #home .rowContainer{display:none;}
.servisi.popravka #home .rowContainer:nth-child(-n+10){display:block;}

/*SERVISI PJ/SERVISI RJ DETALJI*/
.detaljiServisa div, .detaljiServisa p, .servisiRJ div, .servisiRJ p{color:#eee; font-size:14px; }
.servisiRJ span{font-weight:normal }
.detaljiServisa .napomenaList, .servisiRJ .napomenaList{border-top:1px dashed #ccc; margin-top:4px; padding:6px }
.detailContainer div p{font-weight:bold; }

/* POGRESKE */
.listingServisa {font-size:initial}
.listaServisa table{background:#fff; width:100%; text-align: center; border-radius:10px; }
.listaServisa table th{padding:10px; background:#eee}
.listaServisa table td{padding:6px 0; border-bottom:1px solid #ccc}
.select_container{text-align: center; color:#485; width:90%; margin:auto}
.brandClass-1 .select_container{
    color: #222;
}
/*SYNC*/
.brandClass-1 .infoGreske{
    background:#cc0033
}
.sync .flexGore{height:80px; }
.listingGresaka td{font-size:11px; text-align:left; padding:0 6px!important}
.listingGresaka td:first-child{background: #eee; text-align: center; font-size: 14px }
.listingGresaka th:first-child{border-radius: 6px 0 0 0; width:50px}
.listingGresaka th:last-child{border-radius: 0 6px 0 0}
.brandClass-1 .infoGreskeButton{color: inherit}
.infoGreskeButton{font-size: 20px; display: block; text-align: center; padding:4px; /*! color:#999; */}
.infoGreske {position:fixed;top:calc(50% - 100px);;left:0px;right:0px; background:#224443; border:1px solid #ccc; padding:20px 50px 20px 15px; box-sizing: border-box; z-index: 10; color:#eee; display:inline-block; }
.infoGreske:after{content:"x"; position:absolute;top:10px;right:20px; font-size:20px; border:1px solid #ccc;padding:0 8px 3px 8px; }
.moreDetails{position: fixed; top:50px; width:40%; background:#fff;padding:50px 20px; border:4px solid #ccc; right:100px;}
.sekcija_box { display:none; }
.sekcija_box.aktivan_box {display:block;text-align: center}
.sekcija_box.aktivan_box p{padding:6px; color:#485;}
.brandClass-1 .sekcija_box table{background:#cccccc}
.brandClass-1 .sekcija_box.aktivan_box p{color:#cc0033 }
.sekcija_box table {background:#ccddd8; width: 96%;margin:auto; text-align: center; border-radius: 8px; color: #333; }
.sekcija_box table th {padding: 10px 6px; background: #f2f1ed; font-weight: bold; text-align: center; _border-radius: 10px; font-size:12px; }
.sekcija_box table th:first-child {border-radius: 10px 0 0 0;}
.sekcija_box table th:last-child {border-radius: 0 10px 0 0;}
.sekcija_box tr {display: table-row; vertical-align: inherit; border-color: inherit; }
.sekcija_box td:first-child {background: #f2f1ed; text-align: center; font-size: 14px; }
.sekcija_box table td {padding: 6px 0; border-bottom: 1px solid #ccc;  }
.sekcija_box table td:nth-child(1) {font-size:11px; }
.sekcija_box table td:nth-child(2) {font-size:11px; }

/*KATALOG REZERVIH DELOVA*/
.katalog .sekcija_box { display:block; }
.katalog .s1.sekcija_box p{padding:5px 0 15px 0;text-align: center; color:#384}
.katalog .tableRow td:last-child {font-size:13px; font-weight:bold; background:#00917e; color:#ccddd8 }
.brandClass-1 .katalog .tableRow td:last-child{
    background: #992211;
}
.brandClass-1 .katalog .s1.sekcija_box p{color:#992211}
/* ATTACHMENTS */

#upload-Image{
    margin: 0 0 30px 0;
}
.v6 .messageBaloon{
    border: 3px solid #698;
    background: #ac8;
    padding: 10px 20px!important;
    box-sizing: border-box;
    border-radius: 20px;
}
.brandClass-1 .messageBaloon{
    background: #cc0033;
    border:none;
    color: #fff!important;
}

.v6 .attachmentContainer li,.nalogContainer li{
    width: 120px;
    height: 120px;
    display: inline-block;
    margin:10px

}

.v6 .attachmentContainer li img,.v6 .nalogContainer li img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.dateAtt{color: #475;}
#freeze{display:none}
.zoomImage-cnt{position: fixed;top: 10px;left: 0;right: 0;z-index: 10000;background:#eee;
    overflow:auto;
    box-shadow: 4px 4px 4px #888;

}

.zoomClose{
    color:#065;
    text-align: right;
    padding:16px 20px 0 10px;
    box-sizing: border-box;
}

.buttonMailSend{
    background: #065;
    width: 200px;
    margin: auto;
    padding: 10px;
    color: #fff;
}
.zoomImage-cnt li{
    width:96%;
    margin:auto;
    display:block;
    padding: 10px 0 30px 0;


}

.zoomImage-cnt li img{
    display: block;
    width: 100%;
    height:auto;
    box-shadow: 4px 4px 4px #aaa;
    padding:6px;
    border:1px solid #999;
}
/* END CONTENT */


/* FOOTER */
.footer{
    z-index:10;
}

.v6 .footer .relativeContainer{
    width:100%;
    box-sizing: border-box;
    /*! pointer-events: none; */
    border-top:1px solid #eee;
}

.navBox{
    width:100%;
    color:#bbb; font-size:24px;
    pointer-events: none;
}
.v6 .navBoxArray{
    width:300px;
    margin: auto;
    display: flex;
    pointer-events: none;
    justify-content: space-evenly;
}

.v6 .navBoxArray .footerButton{
    position: relative;
    padding:7px 0;
    border:1px solid #aaa;
    border-radius: 50%;
    margin:4px 0;
    cursor: pointer;
    z-index: 200;
    display: block;
    pointer-events: initial;
    box-sizing: border-box;
    font-size:24px;
    text-align: center;
    color:rgba(255,255,255,.5);
    width:44px;height:42px;
    background: rgba(100,120,120,.4)
}
.v6 #buttonScan{
    padding:8px 2px 0 0;
}
.v6 .navBoxArray .footerButton:after{
    content:"";
    width:25px;height:2px;
    position: absolute;
    top:20px;
    left:43px;
    background: #aaa;
}
.v6 .navBoxArray .footerButton:last-child:after{
    display: none;
}

.footerTitle{color:#bbb; text-align:center;padding:10px 0 14px 0; font-size:13px; box-sizing: border-box; }

#buttonMessenger{
    position: relative;
}

#settingsMenu{ z-index: 2000; pointer-events: initial}
.buttonLeft{ border-right: 1px solid #bbb;pointer-events:initial}
.buttonRight{ border-left: 1px solid #bbb;}
.ponistiRezDeo{z-index: 1000; pointer-events: initial}


/*KORACI*/
.footer_nav {
    width:100%;
    position: fixed;
    left:0; bottom:0; right:0;
    box-sizing: border-box;
    border-top:1px solid #ccc;
    justify-content: space-evenly;
    background: rgba(55,55,55,.4);

}
.navigation-inner{
    display: flex;
    width: 320px;
    margin: auto;
}
.footer_nav a{
    flex-grow: 1;
    box-sizing:border-box;
}
.footer_nav a span{
    position: relative;
    font-size:20px;
    color:#ccddd8;
    width:100%;
    display:block;
    text-align:center;
    margin:4px auto;
    width:43px;height:43px;
    border:2px solid #ccc;
    border-radius: 50%;
    padding-top:12px;
    box-sizing: border-box;
}
.footer_nav a:last-child{

}
.footer_nav .activeStep{
    background:rgba(20,120,80,.7);
}
.brandClass-1 .footer_nav .activeStep{
    background:rgba(145,0,0,.7);
}
.footer_nav a span:after{
    content:"";
    width:37px;
    height:1px;
    background: #cce;
    position: absolute;
    top:19px;left:41px;
}

.footer_nav a:last-child span:after{
    display: none
}

/*REZULTATI PRETRAGE*/
#rezultatiPretrage{display: none; }
.search{width:100%; text-align: center; padding:0 0 16px 0 }
.search input{display: inline-block; padding:6px; border-radius: 6px; border:none; background: #ccddd8; }
.search .icon{box-sizing: border-box; display: inline-block; font-size:24px; margin: 0 0 0 10px; }
.search .header .icon{ margin: 0 ; }
.brandClass-1 .search input{background:rgba(230,30,30,.3) }
.search #searchContainer {
    text-align: center;
}

#searchTerms{
    width:100%;
    padding:8px 20px 10px;
    font-size:16px;
    margin:0px auto 20px;
    box-sizing: border-box;
    border:1px solid #dd3;
    box-shadow: 2px 2px 2px inset #aaa;
    background: #dff;
}

#rezultatiPretrage .outerBoxFlex{margin:30px 0 0 0; }
/*SETTINGS*/
.settingsOptions{position:absolute;
    top:43px;right:0px; width:80%;
    background: rgba(240,240,255,.9);
    color:#999;
    display: none;
    border-radius:0;
    z-index:300;
}
.settingsInner{
    padding:20px; box-sizing: border-box;
    height:100%;

}
.settingsInner li {list-style: none; display: block; text-align: center;
    border: 1px solid #999; color:#055; padding:14px; cursor: pointer;margin:0 0 10px 0;
    border-radius:0; background:none;font-weight:lighter;
}
.brandClass-1 .settingsInner li{
    color:  #cc0033;
}
.settingsInner li:last-child{
    border:1px solid #486;
    background:rgb(204,221,216);color:#486;font-weight:normal;
}
.brandClass-1 .settingsInner li:last-child{
    background:rgb(255,60,80,.5);
    color: #fff;
}
.ui-dialog{
    width:100%!important;
    margin:0!important;
    padding: 0!important;
    box-sizing: border-box;
    border:4px solid #777!important;
    border-top:none!important;;
}
/*MESSANGER*/
.messangerPage {

}
.messageBOX{
    background: rgba(255,255,255,.95);
    position: absolute;
    bottom:50px;
    width:100%;
    border:2px solid #89a;
    box-sizing: border-box;
    z-index: 3000;
    font-size:0;
    border-radius:8px;
    display: none;
}
.messageBOX >div{

    padding: 20px 10px;
    color:#585;
    box-sizing: border-box;
    _font-size: initial;
}
.messageBOX .mbtextfield{

    font-size:16px;
    min-height:150px;
    padding: 26px;
}
.messageBOX .buttonOK{
    text-align: center;
    width:60%;
    font-size:16px;
    margin:10px auto 30px auto;
    background:rgba(255,255,255,.8);
    color:#aad;
    border-radius:12px;
    border:2px solid #aad;

}
.messenger{
    padding: 0;
}
.messageBoard{

}

.messageItem{
    list-style: none;
    margin: 10px 0;
    border:1px solid #498;
    border-top:8px solid #498;

}

.brandClass-1 .messageItem{
    border-top: 8px solid #cc0033;
}
#messageList .messageItem p{
    padding: 10px 0 0 0;
}
.messageItem h4{
    font-weight:normal;
    color:#8a9;
    text-transform: uppercase;

}
.messageItem span{
    font-size:12px;
    color:#9c9;
}
.brandClass-1 .messageItem span{
    color: #222
}
.messageItem.received{
    text-align: left;
    padding: 10px 20px;
    border-left:none;
    margin-right:30px;
    background: #efe;
}
.brandClass-1 .messageItem.received{
    background:#f0c8ca
}
.messageItem.received p{
    text-align: left;

}

.messageItem.sent{
    text-align: right;
    padding: 10px 20px;
    border-right:none;
    margin-left:30px;
    background: #eee;
}

.messageItem.sent p{
    text-align: right;
}

.messageBoxSender{
    width:90%;
    margin: 30px auto;
    padding: 20px;
    box-sizing: border-box;
    border:1px solid #ccc
}

#messageTextBox{
    text-align: left;
    padding:10px;
    border: 1px solid #9ca;
    min-height: 100px;
    color:#498;
    transition: all 1s;
    background: #fff;

}
#messageTextBox.activeTextField{
    background: #dfe
}
.messangerPage .footerTitle{
    background: #7a9;
    color:#eee;
    font-size:14px;
    border-radius: 4px;
    border:none;
    margin:4px 10px ;
    padding:8px 0;
    align-self: center;
    font-weight: normal;
    pointer-events: initial;
    z-index: 1000
}
.brandClass-1 .messangerPage .footerTitle{
    background: #cc0033;

}
.brandClass-1 #numberOfMessages{
    background:#009486
}
/*CHECKLISTS*/



.chklstContainer{
    background: rgba(255,255,255,.7);

}
.list_checklists li{
    border:1px solid #999;
    margin: 10px auto;
    background: rgba(255,255,255,.7);
}
.list_checklists li a{
    display: block;
    box-sizing: border-box;
    padding: 10px;
    margin:0 0 0 40px
}

.list_checklists li a span{
    display: block;
    text-align: left;
    color: #055;
}
.checklist_ean{
    font-size: 12px
}
.checklist_korisnik,.checklist_lokacijaUredjaja{
    font-size:13px;
}
.checklist_lokacijaUredjaja{
    padding: 2px 20px 2px 0;
    border-top:1px dashed #aaa;
}

.chklstContainer{
    position: relative;
}

.checklist_status{
    position: absolute;
    top:10px;left:-34px;
    font-size: 30px;
}

.chk-1.checklist_status{
    color:#383;
}
.chk-0.checklist_status{
    color:#a33;
}
.forma{
    color:#264
}
.forma label{
    color:#587;
    font-size:13px;
    padding: 12px 0 8px 0;
    display: inline-block;
}
.brandClass-1 .forma label{
    color: #cc0033
}
.forma fieldset{border:1px solid #8a9;padding:14px; margin-bottom: 30px;
    text-align:center;
    background:rgba(255,255,255,.9);
    color:#587;
    font-size:13px
}
.forma legend{
    _border:1px solid #ccc;
    padding:8px 12px;
    background: #8a9;
    color: #eee;
    font-size:13px
}
.brandClass-1 .forma legend{
    background: #cc0033;
}
.forma input{
    display: block;
    margin: auto;
    padding:8px;
    border:none;
    text-align: right;
    background: #DFF;
    border: 1px solid #aaa;
    color:#587;
}
.brandClass-1 .forma input{
    background:rgba(255,60,80,.3);
    color: #222
}

.fieldset span{
    display: inline-block;


}


/* INNPUT INLINES */

.inlineLabelRadio table{
    width:60%;
    margin: auto;
    text-align: left
}
.inlineLabelRadio table input{
    width:26px;height:26px;
}
.inlineLabelRadio table td:last-child{
    padding: 10px 0;
}
.forma .inlineLabelText{
    text-align: right;
}
.forma .inlineLabelText input{
    display: inline-block;
    vertical-align: middle;
    width:160px;
}
.forma .inlineLabelText span{
    display: inline-block;
    vertical-align: middle;
    width:60px;
    text-align: center;
    padding-left:6px;
}
.brandClass-1 .forma .inlineLabelText span{
    color: #cc0033;
}
.forma .inlineLabelText label{
    display: block;
    text-align: center;
}
/* Hide default HTML checkbox */
.customInlineInput{
    border-top:1px dashed #8ca
}
.customInlineInput > span{
    display: inline-block;
    vertical-align: middle;
    width:70%;
    color:#587;
    text-align: right;
    font-size: 13px;
    padding:12px 12px 12px 0;
}
.brandClass-1 .customInlineInput >span{
    color: #cc0033;
}
.v6 .plumswitch input {
    opacity: 0;
    width: 0;
    height: 0;
}

#updateChecklist, #posalji{
    display: none;
}





/* The plumslider */

.plumswitch {
    position: relative!important;
    display: inline-block!important;
    width: 60px;
    height: 34px;
    display: inline-block!important;
    vertical-align: middle;
    padding: 0!important;
}

.plumslider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #aaa;
    transition: .4s;
    border-radius: 4px;

}

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

input:checked + .plumslider {
    background-color: #4a9;
}
.brandClass-1 input:checked + .plumslider{
    background: #cc0033
}

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

input:checked + .plumslider:before {
    transform: translateX(26px);
}

/**Radni nalog***/

.headerNaloga{
    display: flex;
    flex-basis:0;

}
.headerNaloga li{
    list-style: none;
}
#getHTML div{
    color: black;
}
.firma{flex-grow: 1;font-weight: bold;}
.brNaloga{flex-grow: 45;margin: auto;text-align: center;font-weight: bold;}
.nalogOpis{flex-grow: 1;}

.korisnikIme input{width: 94%;}
.korisnikAdresa input{width: 40%}
.tableNalog{color:#222;width: 100%;}
.futerNalog1{display: flex;
    width: 100%;
    flex-basis:0;
}
.futerNalog1 >div{
    flex-grow: 1;
    border: 1px solid #222
}
.nepropusnost{
    display: flex;
}
.nepropusnost > div{
    margin: 10px;
}
.napomenaNalog div{
    width: 100%;
    height: 100px;
    background: #eee;
}
.nepropusnost span{
    border: 1px solid black;
    border-radius: 14px;
    padding: 5px;
}
.datumKupnje{position: relative;  width: 280px; margin: auto}
#datum_kupnje{position: absolute; width: 15%; left: 0; border: none;  top: 0px; bottom: 0; background: none;z-index; opacity: 0; padding: 0px;  }
#datum_kupnje_dva{background-image: url("http://vaillantpartner.com/hungary/cms_upload/uploads/calendar.png");
    background-repeat: no-repeat;
    background-size: 40px 40px;}
.datumPustanja{position: relative;  width: 280px; margin: auto}
#datum_pustanja{position: absolute; width: 15%; left: 0; border: none;  top: 0px; bottom: 0; background: none;z-index; opacity: 0; padding: 0px;  }
#datum_pustanja_dva{background-image: url("http://vaillantpartner.com/hungary/cms_upload/uploads/calendar.png");
    background-repeat: no-repeat;
    background-size: 40px 40px;}