.gn-anim{transition: all 0.2s ease; -webkit-transition: all 0.2s ease}
.gn-anim2{transition: all 2s ease; -webkit-transition: all 2s ease}
.gn-sticky {
  position: sticky !important;;
  position: -webkit-sticky  !important;
  position: -moz-sticky  !important;
  position: -ms-sticky  !important;
  position: -o-sticky  !important;
  top: 0px;
}
.gn-cut {
    overflow: hidden; text-overflow: ellipsis; white-space: pre;
}

.gn-app{display: block; position: fixed; left: 0px; top:0px; width: 100%; height: 100%; background-color: #fff}
.gn-title{display: block; position: fixed; left: 0px; top:0px; width: 100%; height: 60px; background-color: #f1f1f1; box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3); border-bottom: 1px solid #ccc; z-index:10}
.gn-conn-msg {display: block;position: fixed;right: 10px;top: -550px;width: 200px;height: 40px;background-color: #535050;box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);z-index: 100;line-height: 40px;font-size: 14px;color: #fff;}
.gn-conn-msg-on{top:50px}

.gn-conn-msg .ion-alert-circled{margin-right: 10px; font-size: 22px; float:left; margin-left: 10px}
.gn-login-form{
    display: block; position: absolute; width: 400px; height: 300px; background-color: #fff; box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
    left: calc(50% - 200px); top: calc(50% - 200px)
}
.gn-login-form-title{display: inline-block; width: 100%; line-height: 40px; font-size: 28px; text-align: center; color: #148adc}

.gn-login-form-field{display: inline-block; width: 100%; line-height: 40px; font-size: 22px; text-align: center; margin-top: 10px}
.gn-login-form-field>input[type="text"]{width: calc(100% - 60px); height: 30px; font-size: 14px; padding: 0px 10px}
.gn-login-form-field>input[type="password"]{width: calc(100% - 60px); height: 30px; font-size: 14px; padding: 0px 10px}
.gn-login-form-field>input[type="email"]{width: calc(100% - 60px); height: 30px; font-size: 14px; padding: 0px 10px}
.gn-login-form-field>button{width: 150px; height: 40px; font-size: 14px; padding: 0px 10px; background-color: #148adc; border: 0px; color: #fff; margin-top: 20px; cursor: pointer}
.gn-login-form-field>button:hover{background-color: #249df2}

.gn-login-form-copy{font-size: 12px; display: inline-block; text-align: center; position: relative; width: 100%; top: 60px; color :#5c5c5c}

.gn-msg {background-color: #fff; border-radius: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); display: block; left: calc(50% - 250px); padding-bottom: 20px; position: absolute; top: calc(50% - 200px); width: 500px;}
.gn-msgbox-icon {display: block; height: 100px; text-align: center; width: 100%;}
.gn-msgbox-icon > span {background-color: #fff; border: 0px solid #e5e5e5; border-radius: 50px; color: #e5e5e5; display: inline-block; font-size: 64px; height: 70px; line-height: 70px; margin-top: 28px; width: 70px;}
.gn-msg-body {display: inline-block; font-size: 22px; height: auto; margin-top: 20px; text-align: center; width: 100%;}
.gn-msg-body-text {color: #4f4f4f; display: inline-block; font-size: 16px; font-weight: 300; height: auto; margin-top: 10px; padding: 0 20px; text-align: center; width: calc(100% - 40px);}

.gn-button{
	display: inline-block; min-width: 100px; line-height: 33px; background-color: #fff; border: 1px solid #3cc87f;
	font-size: 16px; margin-left: 10px; border-radius: 1px; color: #3cc87f; cursor: pointer; position: relative;
	transition: all 0.5s ease; -webkit-transition: all 0.5s ease
}

.gn-button.gn-red{
	border-color: #eb5b4c; color: #fff; background-color: #eb5b4c;
}
.gn-button.gn-green{
	border-color: #3cc87f; color: #fff; background-color: #3cc87f;
}
.gn-button.gn-blue{
	border-color: #349ae2; color: #fff; background-color: #349ae2;
}

.gn-clr-red{color: #eb5b4c}
.gn-clr-green{color: #3cc87f}
.gn-clr-blue{color: #349ae2}


@keyframes dbl-button-hover {
  0% {box-shadow: 0px 0px 0px rgba(0,0,0,0.2) inset}
  50% {box-shadow: 0px 0px 100px rgba(0,0,0,0.2) inset}
  100% {box-shadow: 0px 0px 0px rgba(0,0,0,0.2) inset}
}
@-webkit-keyframes dbl-button-hover {
  0% {box-shadow: 0px 0px 0px rgba(0,0,0,0.2) inset}
  50% {box-shadow: 0px 0px 100px rgba(0,0,0,0.2) inset}
  100% {box-shadow: 0px 0px 0px rgba(0,0,0,0.2) inset}
}
.gn-button:hover{
 	  animation: dbl-button-hover 2s infinite;
	  -webkit-animation: dbl-button-hover 2s infinite
}
.gn-msg-close {background-color: #ccc; background-image: -moz-linear-gradient(center top , #fff, #ededed); border: 1px solid #e9e9e9; border-radius: 25px; color: #a8a8a8; cursor: pointer; font-size: 14px; height: 25px; line-height: 25px; position: absolute; right: 10px; text-align: center; top: 10px; width: 25px;}


.gn-title-user{display: inline-block; float: right; line-height: 40px; cursor: pointer; padding: 0px 10px 0px 10px; margin-top: 10px}
.gn-title-user:hover{background-color: rgba(52,154,226,0.1)}
.gn-title-label{font-size: 16px}
.gn-title-arrow-down{margin-left: 10px; font-size: 14px}
.gn-navicon{display: none; width: 40px; height: 40px; line-height: 40px; font-size: 28px; cursor: pointer; text-align: center; float: left;}
.gn-navicon:hover{background-color: rgba(52,154,226,0.1)}
.gn-set-menu{position: absolute; display: block;; min-width: 300px; min-height: 30px; right: 0px; top: 60px; background-color: #fff; box-shadow: 0px 0px 5px rgba(0,0,0,0.5); z-index: 20}
.gn-set-menu-label{display: block; padding: 0px 10px; line-height: 40px; width: calc(100% - 20px); position: relative; cursor: pointer; border-bottom: 1px solid #e8e8e8}
.gn-set-menu-label > .ion-gear-a {font-size: 26px; display: inline-block; float: left; margin-right: 10px}
.gn-set-menu-label > .ion-log-out {font-size: 22px; display: inline-block; float: left; margin-right: 10px}
.gn-set-menu > .gn-set-menu-label:nth-last-child(1){border-bottom: 0px}
.gn-set-menu-label:hover{background-color: rgba(52,154,226,0.1)}

.gn-set-menu-back{display: block; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 20; background-color: rgba(0,0,0,0)}
.gn-set-notif-back{display: block; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 20; background-color: rgba(0,0,0,0)}

.gn-notif-menu{position: absolute; display: block;; min-width: 300px; right: 0px; top: 40px; background-color: #fff; box-shadow: 0px 0px 5px rgba(0,0,0,0.5); z-index: 20; min-height: 70px; max-height: calc(100% - 100px); overflow-x: hidden; overflow-y: auto;}

.gn-main-menu{display: block; position: absolute; left: 0px; top: 40px; width: 300px; background-color: #eee; height: calc(100% - 40px); box-shadow: 0px 0px 5px rgba(0,0,0,0.2); z-index: 1; border-right: 1px solid #ccc; overflow-y: auto;}
.gn-main{display: block; position: absolute; left: 300px; top: 40px; width: calc(100% - 300px); background-color: #fff; height: calc(100% - 40px);}
.gn-main-title{display: block; width: calc(100% - 40px); height: 60px; line-height: 60px; position: relative; padding: 0px 20px; font-size: 20px; color: #969696}
.gn-main-body{display: block; width: 100%; height: calc(100% - 62px); position: relative; overflow-y: auto;}
.gn-main-menu-top{display: block; width: 100%; height: 40px}
.gn-main-menu-top-close{display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; float: right; font-size: 22px; color: #555; cursor: pointer;}
.gn-main-menu-top-close:hover{background-color: rgba(52,154,226,0.1)}
.gn-main-menu-top-label{color: #555; display: block; float: left; font-size: 18px; height: 40px; line-height: 40px; padding-left: 10px; text-align: left; width: 250px;}
.gn-navicon-on{display: block;}
.gn-main-menu-extend{left: -400px}
.gn-main-extend{left: 0px; width: 100%}


@media only screen and  (max-width : 1200px){
    .gn-main-menu{left: -400px}
    .gn-main{left: 0px; width: 100%}
    .gn-navicon{display: block;}
}
.gn-main-menu-show{left: 0px}

.gn-group{display:block; width: calc(100% - 20px); padding: 10px}
.gn-group-title{display: block; width: 100%; height: 30px; font-size: 12px; color:#b4b4b4; line-height: 30px; font-weight: bold}
.gn-menu-label{display: block; width: calc(100% - 20px); height: 30px; font-size: 14px; color:#555; line-height: 30px; padding-left: 20px; cursor: pointer;}
.gn-menu-label:not(.gn-menu-sel):hover{background-color: rgba(52,154,226,0.1)}

.gn-menu-sel{background-color: #349ae2; color: #fff}

.gn-menu-label > span {float: left; margin-right: 3px; display: inline-block; width: 26px}

.gn-company{display: inline-block; height: 40px; line-height: 40px; float: left; margin-left: 20px; font-size: 22px; color: #349ae2}
.gn-mbicn{display: inline-block; font-size: 28px; float: left; margin-right: 10px}
.gn-grid-container{display: block; margin: 0px 20px; width: calc(100% - 40px); height: 100%}
.gn-grid-container2{display: block; margin: 0px 20px; width: calc(100% - 40px); height: 100%}


.jsgrid-cell > select{
    font-size: 14px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0px;
    border: 1px solid #ccc;
    cursor: pointer;
    outline: none;
}




.g-window-form-back{display: none; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4)}
.g-window-form{background-color: #fff; border-radius: 0px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.8); display: block; position: fixed;}

.gw-title{
    display: block; width: calc(100% - 40px); line-height: 40px; font-size: 18px; padding: 0px 20px;
    border-bottom: 1px solid #e5e5e5;
}
.gw-body{
    display: block; width: 100%;  padding: 0px;
    height: calc(100% - 90px); overflow-x: hidden; overflow-y: auto;
}
.gw-bottom{
    display: block; width: calc(100% - 40px); line-height: 40px; font-size: 18px; padding: 8px 20px;
    border-top: 1px solid #e5e5e5; text-align: right
}

.gw-bottom > button {line-height: 31px;}
.f-btn-close{
    float: right; font-size: 28px; line-height: 15px; margin-top: 7px; cursor: pointer; margin-right: -9px; color: #bababa

}
.f-btn-close:hover{
    color: #414141
}

.gn-textbox{min-width: 40px; height: 30px; font-size: 14px; padding: 0px 10px; border: 1px solid #ccc}

.gn-ronly{background-color: #fefefe; color: #8b8b8b}





.ui-datepicker-trigger{
    position: absolute;;
    top: -1px;
    float: right;
    right: 6px;
    cursor: pointer;
}
.ui-datepicker-trigger:hover{
    opacity: 0.8
}
.ui-datepicker-header{
    background-color: #fff; border: 0px;
}
.ui-datepicker{
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); width: 20em
}


/* .ui-tabs-anchor{color: #111 !important} */



.ui-button{border-radius: 0px}
.ui-selectmenu-button{position: relative; top:-2px}

.tbl-cln-mont{border-left: 1px solid #b4b2b2; border-top: 1px solid #b4b2b2}
.tbl-cln-mont td{border-right: 1px solid #b4b2b2; padding: 5px; border-bottom: 1px solid #b4b2b2}
.tbl-cln-mont tr:hover{background-color: rgba(77,77,77,0.1); cursor: pointer}

.hdr-tbl{background-color: #b4b2b2; color: #fff; border-right-color: #fff !important}

.jsgrid-pager-page, .jsgrid-pager-nav-button{padding: 0px; margin-left: 5px}
.jsgrid-pager-page a, .jsgrid-pager-nav-button a, .jsgrid-pager-current-page{display: inline-block; border: 1px solid #e9e9e9; margin-left: 0px; background-color: #f9f9f9; cursor: pointer; padding: 0px 7px;}
.jsgrid-pager-page a, .jsgrid-pager-nav-button a{text-decoration: none; color: #555}
.jsgrid-pager-current-page{background-color: #349ae2; color: #fff; border-color: #349ae2; font-weight: normal}
.jsgrid-pager-current-page{margin-left: 5px !important}
.jsgrid-pager-page:not(.jsgrid-pager-current-page) a:hover, .jsgrid-pager-nav-button a:hover{background-color: #dad8d8}
.jsgrid-pager-nav-inactive-button{display: none}


.tbl-contr-det{border-left: 1px solid #b4b2b2; border-top: 1px solid #b4b2b2}
.tbl-contr-det td{border-right: 1px solid #b4b2b2; padding: 5px; border-bottom: 1px solid #b4b2b2}
.tbl-contr-det tr:hover{background-color: rgba(77,77,77,0.1); cursor: pointer}

.tbl-contr-det2{border-left: 1px solid #b4b2b2; border-top: 1px solid #b4b2b2}
.tbl-contr-det2 td{border-right: 1px solid #b4b2b2; padding: 5px; border-bottom: 1px solid #b4b2b2}

.tbl-contr-det3{border-left: 1px solid #999; border-top: 1px solid #999}
.tbl-contr-det3 td{border-right: 1px solid #999; padding: 5px; border-bottom: 1px solid #999}



.gn-coder-chk{display: inline-block;; float: left; width: 50%}

.gn-label-contrc{display: inline-block; width: 136px; text-align: center;}
.gn-label-contrc-2{display: inline-block; width: 136px; text-align: center; font-weight: bold;; font-size: 16px}


.debly-tbl-hdr-center{text-align: center !important}
.debly-tbl-hdr-left{text-align: left !important}
.debly-tbl-hdr-right{text-align: right !important}


.debly-filter{
    display: block; line-height: 20px; font-size: 14px;  color: #000; margin-bottom: 10px
}


.gn-hdr-docd{
    font-size: 14px; font-weight: bold; background-color: #ededed; height: 33px
}
.debly-docs-det td>input{width:calc(100% - 20px); min-width: auto}

.debly-row-del{font-size: 24px; color: #8A8A8A; cursor: pointer;}
.debly-row-del:hover{color:#e13535}
.gn-back-shadow{display: flex; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); justify-content: center; align-items: center;}
.gn-middle-toast{display: block; width: 400px; min-height: 30px; line-height: 30px; background-color: #fff; padding: 10px; border-radius: 4px; font-size: 18px; box-shadow: 2px 2px 10px rgba(0,0,0,0.5)}



@keyframes dbl-load-rotate {
  0% {-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
  100% {-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@-webkit-keyframes dbl-load-rotate {
    0% {-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
    100% {-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
.gn-load-icon{animation: dbl-load-rotate 6s infinite; -webkit-animation: dbl-load-rotate 6s infinite; font-size: 51px; float: left; line-height: 60px; margin-right: 10px; color: #ccc}
.gn-salter-tbl{background-color: #fff;color: #333;font-weight: bold; border-right-color: #999 !important;}
.gn-bills-np{margin-left: 20px; padding: 0px 10px;display: inline-block; width: 400px; height: 30px;line-height: 30px;border-bottom: 1px dashed #ccc;}
.gn-bills-np:hover{background-color: #ededed; cursor: pointer;}

.gn-bills-rat{margin-left: 20px; padding: 0px 10px;display: inline-block; width: 400px; height: 30px;line-height: 30px;border-bottom: 1px dashed #ccc;}
.gn-bills-rat:hover{background-color: #ededed; cursor: pointer;}

.gn-bills-os{margin-left: 20px; padding: 0px 10px;display: inline-block; width: 400px; height: 30px;line-height: 30px;border-bottom: 1px dashed #ccc;}
.gn-bills-os:hover{background-color: #ededed; cursor: pointer;}



.gn-notif-container{display: block; position: fixed; top: 60px; right: 10px; width: 300px; z-index: 200}
.gn-notif{display: block; width: calc(100% - 20px); padding: 10px; background-color: #7b7979; color: #fff; border-radius: 4px; margin-bottom: 5px; line-height: 22px; cursor: pointer}
.gn-notif-text{font-size: 18px;color: #fffc00;}

.gn-title-icon-left{font-size: 32px; float: left; line-height: 42px; width: 50px; text-align: center; cursor: pointer; position: relative;; color: #2f5185; margin-top: 5px}
.gn-title-icon-left:hover{color: #349ae2}

.gn-title-icon-left > .gn-badge {
    display: block; min-width: 12px; height: 17px; text-align: center; font-size: 11px; border-radius: 22px;
    background-color: #f00; color: #fff; line-height: 17px; top: 2px; position: absolute; right: 0px; font-weight: bold;
    padding: 0px 3px; box-shadow: 1px 1px 4px rgba(0,0,0,0.8);
}
.gn-title-icon-left > .gn-badge:empty{display: none}

.gn-title-icon-right{font-size: 32px; float: right; line-height: 42px; width: 50px; text-align: center; cursor: pointer; position: relative; color: #2f5185; margin-top: 5px}
.gn-title-icon-right:hover{color: #349ae2}

.gn-title-icon-right > .gn-badge {
    display: block; min-width: 12px; height: 17px; text-align: center; font-size: 11px; border-radius: 22px;
    background-color: #f00; color: #fff; line-height: 17px; top: 2px; position: absolute; right: 0px; font-weight: bold;
    padding: 0px 3px; box-shadow: 1px 1px 4px rgba(0,0,0,0.8);
}
.gn-title-icon-right > .gn-badge:empty{display: none}


.gn-notifc-title{display: block; height: 40px; line-height: 40px; font-size: 12px; text-align: center; border-bottom: 1px solid #ccc; font-weight: bold; background-color: #dadada; color:#333}
.gn-notifc-body{display: block; height: calc(100% - 40px);  font-size: 14px; text-align: center;}
.gn-notif-row{display: block; padding: 0px 10px; width: calc(100% - 20px); line-height: 25px; min-height: 25px; text-align: left; border-bottom: 1px solid #eceded; cursor: pointer;}
.gn-notif-row > .gn-icon-ncr{font-size: 22px; float: left; margin-right: 10px; width: 25px; height: 25px; text-align: center; line-height: 28px}
.gn-notif-row > .gn-title-ncr{display: inline-block; width: 100%; line-height: 20px;}
.gn-notif-row:hover{background-color: #efefef}

.ui-multiselect.myClass{overflow: hidden; text-overflow: ellipsis; white-space: pre; position: relative; padding-right: 25px}
.ui-multiselect.myClass>span:nth-child(1){position: absolute; margin: 0px; right: 5px; top:10px}
.ui-multiselect-header{background-color: #fff; border: 0px}
.ui-multiselect-header span.ui-icon{margin-top: 0px;}
.ui-multiselect-close{display:'none' !important}
.ui-multiselect.ui-state-active{background-color: #ededed !important; color: #555 !important}
.ui-icon.ui-icon-triangle-1-s{background-image: url("images/ui-icons_555555_256x240.png") !important}

.installments-block{display: inline-block;; width: 280px; height: auto; padding: 10px; background-color: rgba(157, 226, 249, 0.1); height: 300px; outline: 1px solid rgba(204, 204, 204, 0.3); overflow-x: hidden; overflow-y: auto}

.gn-bold{font-weight: bold}
.gn-btn-sml{font-size:13px;padding: 2px;height: 20px;line-height: 14px; min-width: 30px}





/***********PANORAMA************/
.gn-text-right{text-align: right}
.gn-space-row{display: block; float: left; width: 100%; min-height: 100px}
.gn-blue-box{background-color: #c6d7f2; border-top:1px solid #95b1d7; border-bottom:1px solid #95b1d7; height: 130px}
.gn-space{display: block; width: 1000px; min-height: 100px; margin-left: calc(50% - 500px)}
.gn-logo-geonet{display: block; width: 197px; height: 74px; background-image: url(https://panorama.gps.mk/images/GeonetLogo.png); position: relative; top: 20px}
.gn-half{display: inline-block; width: 50%; float: left; min-height: 5px}

.gn-logo-panorama{display: inline-block; width: 169px; height: 60px; background-image: url(https://panorama.gps.mk/images/PanoramaLogo.1.png)}
.gn-title-text{font-size: 26px}
.gn-subtitle-text{font-size: 16px}


.gn-lh35{line-height: 35px}
.gn-rtop-90{position: relative; top: -90px}
.gn-box90h{display: block; width: 100%; height: 90px; background-color: #f00}
.gn-txt-blue{color: #2f5185}

.gn-white-space-top{display: block; width: 100%; height: 100px; overflow: hidden}
.gn-white-space{display: block; width: 100%; height: 100px}
.gn-blue-space{display: block; width: 100%; height: 130px; overflow: hidden; background-color: #c6d7f2; border-top:1px solid #95b1d7; border-bottom:1px solid #95b1d7}
.gn-main-container{display: block; width: 1000px; min-height: 100px; margin-left: calc(50% - 500px)}

.gn-main-half{display: inline-block; width: calc(50% - 2px)}

.gn-login-image{width:450px;height: 331px; background-image: url(https://panorama.gps.mk/images/advert.png)}

.gn-box-ad{display: block; width: 127px; height: 127px; border-radius: 30px; background-color: #5c93c4; border: 2px solid #fff; text-align: center; margin-top:5px}
/*.gn-box-ad{display: block; width: 127px; height: 127px; background-color: #f00; border-radius: 30px; background-color: #5c93c4; border: 2px solid #478cc5; text-align: center; margin-top:5px}*/
.gn-ad-icon{
    font-size: 90px; color: #fff; line-height: 127px;
    text-shadow: 1px 3px 5px #18437e;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #18437e;
   /*-moz-text-stroke-width: 2px;
   -moz-text-stroke-color: #f00*/
}
.gn-sml{width: 100px; height: 100px}
.gn-sml > .gn-ad-icon{font-size: 60px; line-height: 100px}


.gn-ba-top{position: absolute; left: calc(50% - 50px); top: -40px; z-index: 1}
.gn-ba-left1{position: absolute; left: calc(50% - 130px); top: 25px; z-index: 2}
.gn-ba-right1{position: absolute; left: calc(50% + 30px); top: 25px; z-index: 2}
.gn-ba-left2{position: absolute; left: calc(50% - 200px); top: 100px; z-index: 2}
.gn-ba-right2{position: absolute; left: calc(50% + 100px); top: 100px; z-index: 2}

.gn-login-field{width: calc(50% - 30px); text-align: left; line-height: 30px}
.gn-login-field > input[type="text"]{width: calc(100% - 30px)}
.gn-login-field > input[type="password"]{width: calc(100% - 30px)}
.gn-login-field > input[type="email"]{width: calc(100% - 30px)}
.gn-pass-link{float: right; margin-top: 20px; line-height: 30px; display: inline-block;width: calc(100% - 170px); cursor: pointer}
.gn-pass-link:hover{color: #2f5185; text-decoration: underline}
.gn-icon{font-size: 32px; color: #2f5185; cursor: pointer; position: relative; margin-right: 30px; display: inline-block}
.gn-main-icons{display: block; width: 100%; text-align: right; height: 40px; position: relative; top: 24px}
.gn-main-icons > .gn-icon{margin-right: 20px; width: 60px; text-align: center}
/*.gn-main-icons > .gn-icon:nth-last-child(1){margin-right: 0px; margin-left: 20px}
.gn-main-icons > .gn-icon:nth-last-child(3){margin-left: 20px}
.gn-main-icons > .gn-icon:nth-last-child(6){margin-left: 20px}*/

.ion-ios-redo-outline:hover:before{content: "\f499"}
.ion-ios-help-outline:hover:before{content: "\f446"}
.ion-ios-gear-outline:hover:before{content: "\f43d"}
.ion-ios-cart-outline:hover:before{content: "\f3f8"}
.ion-ios-chats-outline:hover:before{content: "\f146"}
.ion-ios-email-outline:hover:before{content: "\f423"}
.ion-ios-bell-outline:hover:before{content: "\f3e2"}


.gn-icon:after{content: attr(gntitle); font-size: 12px; display: block; position: absolute; left: 0px; width: 60px; top: 35px; text-align: center}

.gn-title-icon-left:after{content: attr(gntitle); font-size: 11px; display: block; position: absolute; left: -5px; width: 60px; top: 40px; text-align: center; line-height: 10px}
.gn-title-icon-right:after{content: attr(gntitle); font-size: 11px; display: block; position: absolute; left: -5px; width: 60px; top: 40px; text-align: center; line-height: 10px}

.gn-icon[gnconn="off"]:before{content: "\f3db"}
.gn-icon[gnconn="on"]:before{content: "\f3dc"}
.gn-icon[gnconn="on"]:hover:after{content: "Има комуникација"; font-size: 12px; display: block; position: absolute; left: -50px; width: 132px; top: 35px; text-align: center}
.gn-icon[gnconn="off"]:hover:after{content: "Нема комуникација"; font-size: 12px; display: block; position: absolute; left: -50px; width: 132px; top: 35px; text-align: center}

.gn-avatar{display: block; width: 90px; height: 90px; border-radius: 45px; background-color: #5c93c4; border: 2px solid #fff; text-align: center; position: relative; top: 20px; overflow: hidden}
.gn-avatar > span{font-size: 110px; color: #fff; line-height: 123px; }
.gn-main-user{position: absolute; top: 40px; left: 120px}
.gn-main-company{position: absolute; top: 75px; left: 120px}

.gn-sml2{width: 80px; height: 80px; border-radius: 10px; margin-top: 3px; margin-left: 3px;}
.gn-sml2 > .gn-ad-icon{font-size: 50px; line-height: 80px; -webkit-text-stroke-width: 1px; text-shadow: none}


.gn-main-menu-label{position: relative; display: inline-block; width: 450px; border: 1px solid #95b1d7; height: 90px; border-radius: 10px; margin-top: 50px; background-color: #dfebf580; cursor: pointer}
.gn-main-menu-label-priv{position: relative; display: inline-block; width: 450px; border: 1px solid #95b1d7; height: 90px; border-radius: 10px; margin-top: 50px; background-color: #dfebf580; cursor: pointer; opacity: 0.5;}
.gn-main-menu-label:hover{background-color: #c0d5e7}
.gn-labels-menu{display: block; width: calc(100% - 100px); position: absolute; left: 100px; top: 0px; height: 50px; padding: 16px 0px; line-height: 26px;text-align: left}

.gn-main-menu-label:hover > .gn-sml2 > .gn-ad-icon{text-shadow: 1px 3px 5px #18437e;}



@media only screen and  (max-width : 1000px){
    .gn-space{width: calc(100% - 40px); margin-left: 0px; padding: 0px 20px}
}
@media only screen and  (max-width : 970px){
    .gn-main-menu-label{width: calc(100% - 10px)}
    .gn-main-menu-label-priv{width: calc(100% - 20px)}
}
@media only screen and  (max-width : 870px){
    .gn-half{width: 100%}
    .gn-ads{top: 50px; height: 250px; left: -25px}
    .gn-panoram-sector{text-align: center}
    .gn-logo-geonet{left: calc(50% - 100px);}
    .gn-login-data{margin-bottom: 100px}
    .gn-login-field{width: 50%}
    .gn-login-data > button{margin-right: 5px}
    .gn-pass-link{width: calc(100% - 120px)}
    .gn-first-main{height: 160px}
    .gn-main-icons{text-align: center}
    .gn-panorama-main{display: none}
    .gn-main-menu-label{margin-top: 20px}
    .gn-main-menu-label-priv{margin-top: 20px}
}
@media only screen and  (max-width : 480px){
    /*.gn-first-top{display: none}*/
    .gn-logo-panorama{display: none}
    .gn-login-field{width: 100%}
    .gn-login-data > button{width: calc(100% - 5px); height: 50px; font-size: 18px}
    .gn-pass-link{width: 100%; text-align: center}
    .gn-ads{display: none}
    .gn-login-field > input[type="password"]{height: 40px; font-size: 18px}
    .gn-login-field > input[type="text"]{height: 40px; font-size: 18px}
    .gn-login-field > input[type="email"]{height: 40px; font-size: 18px}
    .gn-email-login{position: relative; top: 88px}
    .gn-pass-login{position: relative; top: -88px}
    .gn-main-menu-label > .gn-labels-menu > .gn-title-text{font-size: 20px; font-weight: bold}
    .gn-main-menu-label > .gn-labels-menu > .gn-subtitle-text{font-size: 14px}
    .gn-labels-menu{padding: 10px 0px}
    .gn-space{width: calc(100% - 20px); padding: 0px 10px; margin-left: 0px}
    .gn-down-main-menu{text-align: left !important}
    .gn-main-icons > .gn-icon{margin: 0px !important; width: 19%; display: inline-block; font-size: 40px; position: relative; top: -15px}
    .gn-main-icons > .gn-icon:nth-last-child(7){display: none}
    .gn-main-icons > .gn-icon:nth-last-child(2){display: none}
    .gn-icon:hover:after{content: ""}
}
.gn-fblue{color: #349ae2; cursor: default}
.gn-icn-dmenu{font-size: 22px; float: left; margin-right: 10px}


.gn-menu-left{display: block; position: absolute; left:0px; top: 60px; width: 300px; height: calc(100% - 60px); background-color: #eeeeee66; box-shadow: 0px 0px 5px rgba(0,0,0,0.2); border-right: 1px solid #ccc; z-index: 1; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch}
.gn-container{display: block; position: absolute; left:301px; top: 60px; width: calc(100% - 301px); height: calc(100% - 60px); background-color: #fff; z-index: 0}

.gn-vehicle-card{
    display: block; width: 100%; min-height: 10px; margin-left: 0px; margin-top: 0px; border-bottom: 5px solid #ccc;
    background-color: #fff
}
.gn-car-ball{display: inline-block; width: 18px; height: 18px; background-color: #eee; border-radius: 20px; float: left; text-align: center; margin-right:  5px; border: 1px solid #ccc; font-size: 12px; line-height: 18px}

.gn-car-ball2{display: inline-block; width: 26px; height: 26px; background-color: #eee; border-radius: 26px; float: left; text-align: center; margin: 2px; border: 1px solid #ccc; font-size: 13px; line-height: 26px; cursor: pointer}

.gn-carlbl{display: table; width: 100%; height: auto}
.gn-carlbl-half{display: inline-block; float: left; width: calc(50% - 6px); font-size: 13px; padding: 3px; line-height: 20px}





.gn-car-RedBlue{background-color:#F00; border:1px solid #03F; color:#000 }
.gn-car-Orange{background-color:#be8f1e; border:1px solid #900; color:#fff }
.gn-car-Black{background-color:#000; border:1px solid #000; color:#fff }
.gn-car-Gray{background-color:#999; border:1px solid #000; color:#000 }
.gn-car-Yellow{background-color:#FF6; border:1px solid #FF0; color:#000 }
.gn-car-Green{background-color:#728347; border:1px solid #030; color:#FFF }
.gn-car-Red{background-color:#c0202a; border:1px solid #900; color:#FFF }
.gn-car-DarkBlue{background-color:#305ea7; border:1px solid #00A; color:#FFF }
.gn-car-LightBlue{background-color:#91b0e2; border:1px solid #03C; color:#FFF}

.gn-inner{width: calc(100% - 6px)}
/*.gn-si{font-size: 20px; float: left; margin-right: 5px}*/
.gn-si {font-size: 18px; float: left; margin-right: 5px; color: #b0b0b0; width: 20px; text-align: center;}

.gn-vehicle-card > .gn-carlbl{border-bottom: 1px dashed #ccc6}
.gn-vehicle-card > .gn-carlbl:nth-last-child(1){border-bottom: 0px}
.gn-icon-weather{width: 20px; height: 20px; float: left; margin-right: 5px}


.gn-car-datum{font-weight: bold; font-size: 11px}
.gn-car-driver{font-weight: bold}
.gn-car-driverdest{font-weight: bold}
.gn-car-rpm{font-weight: bold}
.gn-car-temp{font-weight: bold}
.gn-car-fuel{font-weight: bold}
.gn-car-ufuel{font-weight: bold}
.gn-car-cbfuel{font-weight: bold}
.gn-car-codo{font-weight: bold}
.gn-car-digalka{font-weight: bold}
.gn-car-baterija{font-weight: bold}
.gn-car-akum{font-weight: bold}
.gn-car-pumpa{font-weight: bold}
.gn-car-kapace{font-weight: bold}
.gn-car-sovozac{font-weight: bold}
.gn-car-brzina{font-weight: bold}
.gn-car-taxim{font-weight: bold}
.gn-car-patnici{font-weight: bold}
.gn-car-cbrpm{font-weight: bold}
.gn-car-cbtemp{font-weight: bold}
.gn-car-cbodom{font-weight: bold}
.gn-car-weather{font-weight: bold}
/*.gn-car-gis{font-weight: bold}
.gn-car-pois{font-weight: bold}
.gn-car-zones{font-weight: bold}*/



#live-panels{ list-style-type: none; margin: 0; padding: 0; width: 100%; }
#live-panels li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: auto; }
/*#live-panels li span { position: absolute; margin-left: -1.3em; }*/


  .column {
    width: 100%;
    float: left;
    padding-bottom: 100px;
  }
  .portlet {
    margin-top: 0px;
    border: 0px;
    /*padding: 0.3em;*/
  }
  .portlet-header {
    padding: 0.3em 0.3em;
    margin-bottom: 0px;
    position: relative;
    font-size: 16px;
    color: #2f5185;
    font-weight: normal;
    background-color: #f1f1f1
  }
  .portlet-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -8px;
    cursor: pointer
  }
  .portlet-content {
    padding: 0px;
  }
  .portlet-placeholder {
    border: 1px dotted black;
    margin: 0 1em 1em 0;
    height: 50px;
  }
  .ui-sortable-placeholder{width: 100%; background-color: #dedbdb; outline: 0px; border: 0px; margin-bottom: 0px}
  .gn-zones{display: table; width: calc(100% - 20px); margin: 5px; padding: 5px; outline: 1px solid #ccc}


  #gnmap{height: 100%; width: 100%;}

.gn-ol-market{
    display: block; width: 26px; height: 26px; border-radius: 26px; line-height: 26px; text-align: center; 
    font-size: 13px; box-shadow: 0px 0px 4px rgba(0,0,0,0.7); position: relative; z-index: 1
    /*transition: all 2s ease; -webkit-transition: all 2s ease*/
}
.gn-ol-market1{
    display: block; width: 20px; height: 20px; border-radius: 20px; line-height: 20px; text-align: center; 
    font-size: 13px; box-shadow: 0px 0px 4px rgba(0,0,0,0.7); position: relative; z-index: 1
    /*transition: all 2s ease; -webkit-transition: all 2s ease*/
}
.gn-ol-market2{
    display: block; width: 23px; height: 23px; border-radius: 23px; line-height: 23px; text-align: center; 
    font-size: 13px; box-shadow: 0px 0px 4px rgba(0,0,0,0.7); position: relative; z-index: 1
    /*transition: all 2s ease; -webkit-transition: all 2s ease*/
}
.gn-ol-market3{
    display: block; width: 26px; height: 26px; border-radius: 26px; line-height: 26px; text-align: center; 
    font-size: 13px; box-shadow: 0px 0px 4px rgba(0,0,0,0.7); position: relative; z-index: 1
    /*transition: all 2s ease; -webkit-transition: all 2s ease*/
}

.gn-maps-button{
    position: absolute; z-index: 2; display: block; width: 50px; height: 50px; background-color: #fff; right: 10px; top: 100px;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.4); border-radius: 2px; text-align: center; font-size: 10px; line-height: 13px; cursor: pointer
}

.gn-maps-switch{top: 20px}
.gn-maps-centervh{top: 75px}
.gn-maps-poi{top: 130px}
.gn-maps-area{top: 185px; padding-top: 5px; height: 45px;}
.gn-maps-traj{top: 240px;}
.gn-maps-add{top: 295px; padding-top: 5px; height: 45px;}
.gn-maps-search{top: 350px; padding-top: 5px; height: 45px;}

.gn-maps-button:hover{background-color: #eee}

.gn-maps-icon{font-size: 22px}

.gn-maps-button-pressed{background-color: #349ae2; color: #fff; }
.gn-maps-button-pressed:hover{background-color: #2581c2}

.gn-maps-type-button-pressed{background-color: #349ae2 !important; color: #fff; cursor: default}

@keyframes fehicle-anim{
  0% {width: 26px; height: 26px; left: -1px; top: -1px; opacity: 0}
  1% {width: 26px; height: 26px; left: -1px; top: -1px; opacity: 1}
  50% {opacity: 1}
  100% {width: 120px; height: 120px; left: -48px; top: -48px; opacity: 0}
  /*100% {width: 26px; height: 26px; left: -1px; top: -1px; opacity: 0}*/
}
@-webkit-keyframes fehicle-anim {
  0% {width: 26px; height: 26px; left: -1px; top: -1px; opacity: 0}
  1% {width: 26px; height: 26px; left: -1px; top: -1px; opacity: 1}
  50% {opacity: 1}
  100% {width: 120px; height: 120px; left: -48px; top: -48px; opacity: 0}
  /*100% {width: 26px; height: 26px; left: -1px; top: -1px; opacity: 0}*/
}

@keyframes car-card-anm{
  0% {background-color: #fff}
  50% {background-color: #f8fbd6}
  100% {background-color: #fff}
}
@-webkit-keyframes car-card-anm {
  0% {background-color: #fff}
  50% {background-color: #f8fbd6}
  100% {background-color: #fff}
}

.gn-car-RedBlue{background-color:#F00; border:1px solid #03F; color:#000 }
.gn-car-Orange{background-color:#be8f1e; border:1px solid #900; color:#fff }
.gn-car-Black{background-color:#000; border:1px solid #000; color:#fff }
.gn-car-Gray{background-color:#999; border:1px solid #000; color:#000 }
.gn-car-Yellow{background-color:#FF6; border:1px solid #FF0; color:#000 }
.gn-car-Green{background-color:#728347; border:1px solid #030; color:#FFF }
.gn-car-Red{background-color:#c0202a; border:1px solid #900; color:#FFF }
.gn-car-DarkBlue{background-color:#305ea7; border:1px solid #00A; color:#FFF }
.gn-car-LightBlue{background-color:#91b0e2; border:1px solid #03C; color:#FFF}

.gn-ol-market-anim:after{
    content: ""; display: block; width: 26px; height: 26px; border: 1px solid #f00; border-radius: 60px;
    left: -1px; top: -1px; background-color: rgba(255,0,0,0.2); position: absolute; z-index: 0;
    animation: fehicle-anim 2s infinite; -webkit-animation: fehicle-anim 2s infinite
}
.gn-ol-market1-anim:after{
    content: ""; display: block; width: 20px; height: 20px; border: 1px solid #f00; border-radius: 60px;
    margin-left:-4px; margin-top:-4px; background-color: rgba(255,0,0,0.2); position: absolute; z-index: 0;
    animation: fehicle-anim 2s infinite; -webkit-animation: fehicle-anim 2s infinite
}
.gn-ol-market2-anim:after{
    content: ""; display: block; width: 23px; height: 23px; border: 1px solid #f00; border-radius: 60px;
    margin-left:-2px; margin-top:-3px; left: -1px; top: -1px; background-color: rgba(255,0,0,0.2); position: absolute; z-index: 0;
    animation: fehicle-anim 2s infinite; -webkit-animation: fehicle-anim 2s infinite
}
.gn-ol-market3-anim:after{
    content: ""; display: block; width: 26px; height: 26px; border: 1px solid #f00; border-radius: 60px;
    margin-left:-1px; margin-top:-1px; left: -1px; top: -1px; background-color: rgba(255,0,0,0.2); position: absolute; z-index: 0;
    animation: fehicle-anim 2s infinite; -webkit-animation: fehicle-anim 2s infinite
}


.gn-car-card-animate{
    animation: car-card-anm 2s infinite; -webkit-animation: car-card-anm 2s infinite
}

.gn-ol-market.gn-car-RedBlue.gn-ol-market-anim:after{background-color: rgba(255,0,0,0.5); border-color: #03F}
.gn-ol-market.gn-car-Orange.gn-ol-market-anim:after{background-color: rgba(190, 143, 30, 0.5); border-color: #900}
.gn-ol-market.gn-car-Black.gn-ol-market-anim:after{background-color: rgba(0,0,0,0.5); border-color: #000}
.gn-ol-market.gn-car-Gray.gn-ol-market-anim:after{background-color: rgba(153, 153, 153, 0.5); border-color: #000}
.gn-ol-market.gn-car-Yellow.gn-ol-market-anim:after{background-color: rgba(255, 255, 102, 0.5); border-color: #FF0}
.gn-ol-market.gn-car-Green.gn-ol-market-anim:after{background-color: rgba(114, 131, 71, 0.5); border-color: #030}
.gn-ol-market.gn-car-Red.gn-ol-market-anim:after{background-color: rgba(192, 32, 42, 0.5); border-color: #900}
.gn-ol-market.gn-car-DarkBlue.gn-ol-market-anim:after{background-color: rgba(48, 94, 167, 0.5); border-color: #00A}
.gn-ol-market.gn-car-LightBlue.gn-ol-market-anim:after{background-color: rgba(145, 176, 226, 0.5); border-color: #03C}

.gn-ol-market1.gn-car-RedBlue.gn-ol-market1-anim:after{background-color: rgba(255,0,0,0.5); border-color: #03F}
.gn-ol-market1.gn-car-Orange.gn-ol-market1-anim:after{background-color: rgba(190, 143, 30, 0.5); border-color: #900}
.gn-ol-market1.gn-car-Black.gn-ol-market1-anim:after{background-color: rgba(0,0,0,0.5); border-color: #000}
.gn-ol-market1.gn-car-Gray.gn-ol-market1-anim:after{background-color: rgba(153, 153, 153, 0.5); border-color: #000}
.gn-ol-market1.gn-car-Yellow.gn-ol-market1-anim:after{background-color: rgba(255, 255, 102, 0.5); border-color: #FF0}
.gn-ol-market1.gn-car-Green.gn-ol-market1-anim:after{background-color: rgba(114, 131, 71, 0.5); border-color: #030}
.gn-ol-market1.gn-car-Red.gn-ol-market1-anim:after{background-color: rgba(192, 32, 42, 0.5); border-color: #900}
.gn-ol-market1.gn-car-DarkBlue.gn-ol-market1-anim:after{background-color: rgba(48, 94, 167, 0.5); border-color: #00A}
.gn-ol-market1.gn-car-LightBlue.gn-ol-market1-anim:after{background-color: rgba(145, 176, 226, 0.5); border-color: #03C}

.gn-ol-market2.gn-car-RedBlue.gn-ol-market2-anim:after{background-color: rgba(255,0,0,0.5); border-color: #03F}
.gn-ol-market2.gn-car-Orange.gn-ol-market2-anim:after{background-color: rgba(190, 143, 30, 0.5); border-color: #900}
.gn-ol-market2.gn-car-Black.gn-ol-market2-anim:after{background-color: rgba(0,0,0,0.5); border-color: #000}
.gn-ol-market2.gn-car-Gray.gn-ol-market2-anim:after{background-color: rgba(153, 153, 153, 0.5); border-color: #000}
.gn-ol-market2.gn-car-Yellow.gn-ol-market2-anim:after{background-color: rgba(255, 255, 102, 0.5); border-color: #FF0}
.gn-ol-market2.gn-car-Green.gn-ol-market2-anim:after{background-color: rgba(114, 131, 71, 0.5); border-color: #030}
.gn-ol-market2.gn-car-Red.gn-ol-market2-anim:after{background-color: rgba(192, 32, 42, 0.5); border-color: #900}
.gn-ol-market2.gn-car-DarkBlue.gn-ol-market2-anim:after{background-color: rgba(48, 94, 167, 0.5); border-color: #00A}
.gn-ol-market2.gn-car-LightBlue.gn-ol-market2-anim:after{background-color: rgba(145, 176, 226, 0.5); border-color: #03C}

.gn-ol-market3.gn-car-RedBlue.gn-ol-market3-anim:after{background-color: rgba(255,0,0,0.5); border-color: #03F}
.gn-ol-market3.gn-car-Orange.gn-ol-market3-anim:after{background-color: rgba(190, 143, 30, 0.5); border-color: #900}
.gn-ol-market3.gn-car-Black.gn-ol-market3-anim:after{background-color: rgba(0,0,0,0.5); border-color: #000}
.gn-ol-market3.gn-car-Gray.gn-ol-market3-anim:after{background-color: rgba(153, 153, 153, 0.5); border-color: #000}
.gn-ol-market3.gn-car-Yellow.gn-ol-market3-anim:after{background-color: rgba(255, 255, 102, 0.5); border-color: #FF0}
.gn-ol-market3.gn-car-Green.gn-ol-market3-anim:after{background-color: rgba(114, 131, 71, 0.5); border-color: #030}
.gn-ol-market3.gn-car-Red.gn-ol-market3-anim:after{background-color: rgba(192, 32, 42, 0.5); border-color: #900}
.gn-ol-market3.gn-car-DarkBlue.gn-ol-market3-anim:after{background-color: rgba(48, 94, 167, 0.5); border-color: #00A}
.gn-ol-market3.gn-car-LightBlue.gn-ol-market3-anim:after{background-color: rgba(145, 176, 226, 0.5); border-color: #03C}

.gn-nouse{display: block; position: absolute; left: 0px; top: 0px; width: 26px; height: 26px;}
.gn-nouse1{display: block; position: absolute; left: 0px; top: 0px; width: 20px; height: 20px;}
.gn-nouse2{display: block; position: absolute; left: 0px; top: 0px; width: 23px; height: 23px;}
.gn-nouse3{display: block; position: absolute; left: 0px; top: 0px; width: 26px; height: 26px;}

.gn-ol-market[angle="no"] > .gn-nouse:before{
    content: ""; display: none; 
}
.gn-ol-market1[angle="no"] > .gn-nouse1:before{
    content: ""; display: none; 
}
.gn-ol-market2[angle="no"] > .gn-nouse2:before{
    content: ""; display: none; 
}
.gn-ol-market3[angle="no"] > .gn-nouse3:before{
    content: ""; display: none; 
}


.gn-ol-market[angle="yes"] > .gn-nouse:before{
    content: ""; display: block; width: 6px; height: 6px; background-color: #444; border: 1px solid #000; position: absolute;
    left: 27px; top: 10px; border-radius: 6px
}
.gn-ol-market1[angle="yes"] > .gn-nouse1:before{
    content: ""; display: block; width: 6px; height: 6px; background-color: #444; border: 1px solid #000; position: absolute;
    left: 21px; top: 8px; border-radius: 6px
}
.gn-ol-market2[angle="yes"] > .gn-nouse2:before{
    content: ""; display: block; width: 6px; height: 6px; background-color: #444; border: 1px solid #000; position: absolute;
    left: 24px; top: 9px; border-radius: 6px
}
.gn-ol-market3[angle="yes"] > .gn-nouse3:before{
    content: ""; display: block; width: 6px; height: 6px; background-color: #444; border: 1px solid #000; position: absolute;
    left: 27px; top: 10px; border-radius: 6px
}

.gn-ol-market[angle="yes"].gn-car-RedBlue > .gn-nouse:before{background-color:#F00; border-color: #03F}
.gn-ol-market[angle="yes"].gn-car-Orange > .gn-nouse:before{background-color:#be8f1e; border-color: #900}
.gn-ol-market[angle="yes"].gn-car-Black > .gn-nouse:before{background-color:#000; border-color: #000}
.gn-ol-market[angle="yes"].gn-car-Gray > .gn-nouse:before{background-color:#999; border-color: #000}
.gn-ol-market[angle="yes"].gn-car-Yellow > .gn-nouse:before{background-color:#FF6; border-color: #FF0}
.gn-ol-market[angle="yes"].gn-car-Green > .gn-nouse:before{background-color:#728347; border-color: #030}
.gn-ol-market[angle="yes"].gn-car-Red > .gn-nouse:before{background-color:#c0202a; border-color: #900}
.gn-ol-market[angle="yes"].gn-car-DarkBlue > .gn-nouse:before{background-color:#305ea7; border-color: #00A}
.gn-ol-market[angle="yes"].gn-car-LightBlue > .gn-nouse:before{background-color:#91b0e2; border-color: #03C}

.gn-ol-market1[angle="yes"].gn-car-RedBlue > .gn-nouse1:before{background-color:#F00; border-color: #03F}
.gn-ol-market1[angle="yes"].gn-car-Orange > .gn-nouse1:before{background-color:#be8f1e; border-color: #900}
.gn-ol-market1[angle="yes"].gn-car-Black > .gn-nouse1:before{background-color:#000; border-color: #000}
.gn-ol-market1[angle="yes"].gn-car-Gray > .gn-nouse1:before{background-color:#999; border-color: #000}
.gn-ol-market1[angle="yes"].gn-car-Yellow > .gn-nouse1:before{background-color:#FF6; border-color: #FF0}
.gn-ol-market1[angle="yes"].gn-car-Green > .gn-nouse1:before{background-color:#728347; border-color: #030}
.gn-ol-market1[angle="yes"].gn-car-Red > .gn-nouse1:before{background-color:#c0202a; border-color: #900}
.gn-ol-market1[angle="yes"].gn-car-DarkBlue > .gn-nouse1:before{background-color:#305ea7; border-color: #00A}
.gn-ol-market1[angle="yes"].gn-car-LightBlue > .gn-nouse1:before{background-color:#91b0e2; border-color: #03C}

.gn-ol-market2[angle="yes"].gn-car-RedBlue > .gn-nouse2:before{background-color:#F00; border-color: #03F}
.gn-ol-market2[angle="yes"].gn-car-Orange > .gn-nouse2:before{background-color:#be8f1e; border-color: #900}
.gn-ol-market2[angle="yes"].gn-car-Black > .gn-nouse2:before{background-color:#000; border-color: #000}
.gn-ol-market2[angle="yes"].gn-car-Gray > .gn-nouse2:before{background-color:#999; border-color: #000}
.gn-ol-market2[angle="yes"].gn-car-Yellow > .gn-nouse2:before{background-color:#FF6; border-color: #FF0}
.gn-ol-market2[angle="yes"].gn-car-Green > .gn-nouse2:before{background-color:#728347; border-color: #030}
.gn-ol-market2[angle="yes"].gn-car-Red > .gn-nouse2:before{background-color:#c0202a; border-color: #900}
.gn-ol-market2[angle="yes"].gn-car-DarkBlue > .gn-nouse2:before{background-color:#305ea7; border-color: #00A}
.gn-ol-market2[angle="yes"].gn-car-LightBlue > .gn-nouse2:before{background-color:#91b0e2; border-color: #03C}

.gn-ol-market3[angle="yes"].gn-car-RedBlue > .gn-nouse3:before{background-color:#F00; border-color: #03F}
.gn-ol-market3[angle="yes"].gn-car-Orange > .gn-nouse3:before{background-color:#be8f1e; border-color: #900}
.gn-ol-market3[angle="yes"].gn-car-Black > .gn-nouse3:before{background-color:#000; border-color: #000}
.gn-ol-market3[angle="yes"].gn-car-Gray > .gn-nouse3:before{background-color:#999; border-color: #000}
.gn-ol-market3[angle="yes"].gn-car-Yellow > .gn-nouse3:before{background-color:#FF6; border-color: #FF0}
.gn-ol-market3[angle="yes"].gn-car-Green > .gn-nouse3:before{background-color:#728347; border-color: #030}
.gn-ol-market3[angle="yes"].gn-car-Red > .gn-nouse3:before{background-color:#c0202a; border-color: #900}
.gn-ol-market3[angle="yes"].gn-car-DarkBlue > .gn-nouse3:before{background-color:#305ea7; border-color: #00A}
.gn-ol-market3[angle="yes"].gn-car-LightBlue > .gn-nouse3:before{background-color:#91b0e2; border-color: #03C}

#map-undermouse-popup,#show-search-vehicles{
    position: absolute; z-index: 5; display: table; width: auto; height: auto; background-color: #fff; right: -100px; top: -100px;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.4); border-radius: 2px; max-width: 300px; padding: 10px
}
#map-undermouse-popup[gtimer="0"], #show-search-vehicles[gtimer="0"]{
    display: none
}

#map-undermouse-popup > [gn-vh-card-code], #show-search-vehicles > [gn-vh-card-code]{width: 300px}



.gn-div-poi-back{display: block; position: absolute; left: 0px; top: 0px; background-color: rgba(0,0,0,0); width: 100%; height: 100%}
.gn-poi-group{
    position: absolute; z-index: 1; display: block; width: 50px; min-height: 50px; background-color: #fff; right: 10px; top: 130px;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.4); border-radius: 2px; text-align: center; font-size: 10px; line-height: 13px;    
    overflow-x: hidden; overflow-y: auto; max-height: 50px;
}

.gn-maptype-choose{
    position: absolute; z-index: 1; display: block; width: 50px; min-height: 50px; background-color: #fff; right: 10px; top: 20px;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.4); border-radius: 2px; text-align: center; font-size: 12px; line-height: 18px;    
    overflow-x: hidden; overflow-y: auto; max-height: 50px;
}
.gn-maptype-choose:not(.gn-maps-type-button-pressed):hover{cursor: pointer; background-color: #eee}
.gn-poi-group-extend{
    width: 200px; right: 70px; max-height: 250px;
    -webkit-overflow-scrolling: touch
}

.gn-poi-group-list{text-align: left; padding: 5px; font-size: 14px; margin: 5px; cursor: pointer; line-height: 22px}
.gn-poi-group-list:hover{background-color: #eee}
.gn-poi-group-list > span{font-size: 22px; float: left; margin-right: 5px; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #000;}
.gn-poi-mr{display: block; width: 26px; height: 26px; font-size: 26px; text-align: center; line-height: 26px; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #000; position: relative}
/*[gntitlepoi]:hover:after{
    content: attr(gntitlepoi); position: absolute; left: 30px; top: 30px; display: inline-block; padding: 5px; background-color: #fff; box-shadow: 0px 0px 3px rgba(0,0,0,0.4);
    font-size: 14px; font-family: Arial;-webkit-text-stroke-width: 0px; color: #444; width: auto; line-height: 15px; min-width: 200px; text-align: left
}*/


  #custom-handle {
    width: 40px;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
    font-size: 11px;
  }

.gn-color-c{display: inline-block; float: left; width: 30px; height: 30px; border-radius: 3px; margin: 2px; cursor: pointer}
.gn-cpalette{display: table;}

.gn-color-c:hover{opacity: 0.9}
.gn-color-c[gnchecked="yes"]:after{
    content: "♦"; display: inline-block; width: 30px; text-align: center; font-size: 25px; line-height: 30px;
}
.ui-checkboxradio-icon{background-image: url("images/ui-icons_444444_256x240.png") !important}
.gn-search-panel-map{
    display: block; position: absolute; z-index: 5; width: 450px; height: 50px; top: -300px; left: calc(50% - 225px);
    background-color: #fff; box-shadow: 0px 0px 8px rgba(0,0,0,0.8); border-radius: 2px
}
.gn-search-panel-map-on{top: -3px;}



.ui_tpicker_unit_hide{display: none}
.ui_tpicker_time{display: none}
.ui_tpicker_hour_label{display: none}
.ui_tpicker_minute_label{display: none}
.ui_tpicker_hour{float: left; width: 40%; margin-left: 10px}
.ui_tpicker_minute{float: left; width: 40%; margin-bottom: 10px; margin-left: 10px}
.ui-timepicker-select{width: 100px}

.ui-autocomplete-category{line-height: 30px; padding-left: 10px; font-weight: bold;}
.ui-menu-item{line-height: 30px; padding-left: 15px; }

.ui-menu-item-wrapper{left: -5px}

/* .ui-tabs-active{background-color: #fff !important} */
.ui-state-default:not(.ui-state-active){background-color: #ece4e4 !important}
.ui-state-default:not(.ui-state-active):hover{background-color: #ccc !important}

.ui-state-active{background-color: #fff !important}
.ui-state-active a {color: #349ae2 !important}
/* .ui-autocomplete > .ui-menu-item{background-color: } */

.ui-menu-item-wrapper.ui-state-active{margin: 0px; left : -5px; background-color: #999 !important}
.gn-back-to-top{
    display: block; width: 50px; height: 50px; border-radius: 50px; background-color: #fff;
    position: fixed; bottom: 10px; left: 125px; box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
    line-height: 50px; text-align: center; color: #999; opacity: 0.5; cursor: pointer
}
.gn-back-to-top:hover{opacity: 1; color: #333}





      .ol-popup {
        position: absolute;
        background-color: white;
        -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;
        min-width: 280px;;
        z-index: 5;
        margin-bottom: 10px;
      }
      .ol-popup:after, .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
      }
      .ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
      }
      .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
      }
      .ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 2px;
        right: 8px;
      }
      .ol-popup-closer:after {
        content: "✖";
      }




.gn-route-row{
    display: block; padding: 10px; border: 1px solid #ccc; border-radius: 4px; display: inline-block; 
    line-height: 22px; width: calc(100% - 20px); margin-top: 5px;
    background-color: #eee; left: 22px
}
.gn-route-handle{
    cursor: pointer; font-size: 22px;float: right;color: #ddd;
    transform: rotate(90deg);
}
.gn-route-handle:hover{color: #ccc}

.gn-prevzemi-poi{float: right; font-size: 22px; cursor: pointer}
.gn-prevzemi-poi:hover:before{content: "\f408"}
.gn-prevzemi-poi:hover{color: #349ae2}
.gn-card-route{display: block; border: 1px solid #ccc; border-radius: 3px; padding: 5px; line-height: 20px; margin-top: 5px; cursor: pointer}
.gn-card-route:hover{background-color: #eee}

.gn-route-orders-row{display: block; padding: 10px; border: 1px solid #ccc; margin-top: 3px; border-radius: 3px; background-color: #fff}


.gn-routes-report {
	display: none;
	position: fixed;
	left: 400px;
	top: 70px;
	width: calc(100% - 451px);
	height: calc(100% - 80px);
    background-color: #fff;
    box-shadow: 5px 0px 5px rgba(0,0,0,0.3);
    overflow-x: hidden;
    overflow-y: auto ;
    -webkit-overflow-scrolling: touch;    
}

.gn-close-route-report{
    float: right; font-size: 26px; margin-top: -36px; color: #ccc; cursor: pointer
}
.gn-close-route-report:hover{color: #b6b3b3}
.gn-rep-route-part3{
    display: inline-block; width: calc(30% - 3px); border-top: 1px solid #fff; margin-top: 5px
}
.gn-rep-route-part4{
    display: inline-block; width: calc(25% - 3px); margin-top: 5px; line-height: 24px; font-size: 12px
}
.gn-rep-route-part2{
    display: inline-block; width: calc(30% - 3px); margin-top: 5px; line-height: 24px; font-size: 12px
}

.gn-redABC{display: block; padding: 10px;border: 1px solid #ccc; background-color:#fff; margin-top: 5px; cursor: pointer}
.gn-redABC:hover{background-color: #eee}

.gn-left-menu-list {
	padding: 10px;
	line-height: 30px;
	margin: 0px;
	background-color: #eee;
	z-index: 2;
	position: relative;
}

.gn-lml-group{font-size: 13px; text-transform: uppercase; color: #a29f9f; font-weight: bold; display: block}
.g-rm-icn{margin-right: 10px;font-size: 18px;float: left;}
.gn-left-menu-list li:not(.gn-lml-group){display: block; padding-left: 10px; cursor: pointer}

.gn-left-menu-list li:not(.gn-lml-group):hover{background-color: rgba(0,0,0,0.1)}
.gn-left-menu-list li.gn-sel{background-color: #349ae2 !important; color: #fff; display: block}
.gn-left-menu-list li:not(.gn-sel) a{color: #555; text-decoration: none; display: block}
.gn-left-menu-list li.gn-sel a{color: #fff; text-decoration: none; display: block}
.ui-selectmenu-menu .ui-menu{max-height: 250px; box-shadow: 0px 0px 5px rgba(0,0,0,0.3)}

.gn-menu-left > .gn-left-menu-list:nth-of-type(1){box-shadow: 0px -6px 5px rgba(0,0,0,0.2)}

.gn-report-content{
    /* border: 1px solid #ccc; */
    overflow-x: hidden; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0px 20px !important    
}

.gn-wait{display: block; padding: 50px; line-height: 50px; font-size: 18px;color: #555 }

@keyframes gn-wait-rotate {
    from {transform: rotate(0deg)}
    to {transform: rotate(360deg)}
}
@-webkit-keyframes gn-wait-rotate {
    from {-webkit-transform: rotate(0deg)}
    to {-webkit-transform: rotate(360deg)}
}
.gn-wait > span{
    font-size: 32px; margin-right: 10px; float: left;
    animation: gn-wait-rotate 2s linear infinite;
    -webkit-animation: gn-wait-rotate 2s linear infinite
}


.textSubTitle{width: 100%; font-size: 14px; font-weight: bold; text-transform: uppercase; background-color: #5c93c4; color:#fff; padding: 3px 0px;}

.gn-report-content table:not(.gn-main-report-table){
    /* border: 1px solid #ccc */
}
.gn-report-content table:not(.gn-main-report-table) tr:nth-of-type(1) >td{
    background-color: #eae7e7;
    font-size: 12px;
    text-transform: uppercase;
    padding: 5px 5px;    
}
.gn-report-content table:not(.gn-main-report-table) tr > td{
    border-bottom: 1px solid #eae7e7
}

.gnicon{font-size: 22px; cursor: pointer}
.gnicon2{font-size: 16px; cursor: pointer}
.gnicon:hover{color:#349ae2}

.gnicon3 {
    display: inline-block;
	font-size: 22px;
	cursor: pointer;
	width: 42px;
	height: 32px;
	text-align: center;
	line-height: 32px;
    border: 1px solid #ccc;
    color: #777;
    border-radius: 3px;
    position: relative;
}

.gnicon3:hover{color:#fff; border-color: #349ae2; background-color: #349ae2}

.gnicon3[gn-title-down]:after{content: attr(gn-title-down); font-family: Arial; font-size: 10px; position: absolute; top: 32px; left: -4px; width: 50px; text-align: center}
.gnicon3[gn-title-down]:hover:after{color: #349ae2}
.text2 { font-size: 12px; }

.gn-goran-title{
    padding: 0px 30px;
    font-size: 18px;
    font-weight: bold;
    color: #349ae2;       
}
.textSubTitle {
    color: #fff;
    line-height: 34px;
    min-height: 40px !important;
}
#report-content{overflow: visible !important; height: auto !important}
.highcharts-credits {
    display: none !important;
}


.gn-wait-gen{display: flex; align-items: center; justify-content: center; position: fixed; z-index: 300; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5)}
.gn-wait-gen-text {
	background-color: #fff;
	font-size: 20px;
	color: #696565;
	padding: 20px;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.7);
	border-radius: 5px; line-height: 32px
}
.gn-wait-gen-text > span{
    font-size: 32px; margin-right: 10px; float: left;
    animation: gn-wait-rotate 2s linear infinite;
    -webkit-animation: gn-wait-rotate 2s linear infinite
}