@keyframes loading {
    from {width: 0%}
    to {width: 100%}
}
@-webkit-keyframes loading {/* Safari and Chrome */
    from {width: 0%}
    to {width: 100%}
}

@media screen {
    body {
        min-width: 1024px;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: " ";
    }
    .clearfix:after {
        clear: both;
    }
    .container {
        /*max-width: 1400px;*/
        margin: 0 auto;
        min-width: 940px;
        overflow: auto;
    }
    .container.with-offset {
        height: 40px;
        margin-bottom: 5px;
    }
    .container.full-size {
        margin: 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100vw !important;
        left: 0;
        right: 0;
    }
	/* css for timepicker */
	.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
	.ui-timepicker-div dl { text-align: left; }
	.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
	.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
	.ui-timepicker-div td { font-size: 90%; }
	.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

	.ui-timepicker-rtl { direction: rtl; }
	.ui-timepicker-rtl dl { text-align: right; }
	.ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; }
	.ui-datepicker {font-size:10px; }

	* {
		padding: 0px;
		margin: 0px;
	}

	.clear {
		clear: both;
	}

	.title {
		float: none !important;
		margin-left: 0;
		margin-top: 0;
		font-size: 22px;
		color: #797c80;
		word-break: break-word;
	}

	body {
		font-family: Arial;
		font-size: 12px;
		/*background: #e3e3e3;*/
	}

	#header {
		position: relative;
		min-height: 50px;
		display: block;
	}
    #loading {
        position: relative;
        height: 4px;
        width: 100%;
        max-width: 100%;
        border-bottom: 2px solid #1592D8;
        z-index: 2;
        background: transparent;
        margin: 0;
    }
    #loading.show {
        animation: loading 3s linear infinite;
        -webkit-animation: loading 3s linear infinite; /* Safari and Chrome */
    }

	#logo {
		width: 32px;
		height: 32px;
		margin: 12px 12px 12px 0;
		float: none !important;
	}

	#data-inputs {
		background-color: #d7f2f9;
		padding: 12px 30px;
		margin-bottom: 5px;
	}

	.input-title {
		font-weight: lighter;
		color: #717171;
		margin-right: 3px;
	}

	.input-select {
		border: 1px solid #696969;
		font-size: 12px;
		padding-left: 5px;
		background: transparent;
		background-color: #FFFFFF;
        /* height: 25px; */
        color: #252525;
	}

    .input-select.left {
        float: left;
        margin-top: 8px;
        margin-right: 8px;
        height: fit-content;
    }

	body input[type]:hover {
		/*border: 1px solid #066397;*/
        /*margin-top: -1px;*/
	}

	body input[type=text] {
		width: 103px;
		border: 1px solid #B4B4B4;
		padding-left: 5px;
	}
    .input-select.note, .trip-card textarea.note {
        background: #f8fafc;
        border: 1.5px solid #b4b4b4;
        border-radius: 8px;
        padding: 10px 12px;
        font-size: 16px;
        line-height: 1.5;
        /*min-height: 44px;*/
        width: 100% !important;
        box-sizing: border-box;
        color: #222;
        transition: border-color 0.2s, box-shadow 0.2s;
        margin-top: 4px;
        margin-bottom: 4px;
        resize: vertical;
        box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    }
    .input-select.note:focus, .trip-card textarea.note:focus {
        border-color: #478BE2;
        background: #fff;
        outline: none;
        box-shadow: 0 0 0 2px #c7e0fa;
    }
	.print {
		border: 1px solid #B4B4B4;
		color: #066397;
		padding-top: 1px;
		padding-bottom: 1px;
		-moz-border-radius: 3px;
		border-radius: 3px 3px;
		background: transparent;
		margin-left: 10px;
		width: 18px;
	}

	body input[disabled="disabled"] {
		color: #FFF;
	}

	body input[disabled="disabled"]:hover {
		border: 1px solid #B4B4B4 !important;
	}

	/* Start table */
    #table-wrap {
        padding-bottom: 2px;
        height: calc(100% - 100px);
        min-width: 1024px;
        margin-left: 30px;
        margin-right: 30px;
        overflow: hidden;
        position: relative;
    }

    #paginated-table-footer {
        margin-top: 5px;
        background-color: #D7F2F9;
    }

    .scroll-wrapper {
        overflow-x: hidden;
        overflow-y: auto;
        max-height: calc(100% - 60px);
        position: relative;
    }

	.ptable {
		font-size: 11px;
		border-collapse: collapse;
        width: 100%;
        min-width: 170px;
        max-height: 100%;
	}

    table.ptable td, table.ptable th {
        box-sizing: border-box;
    }

	table.ptable thead th {
        text-align: left;
		font-weight: normal;
		color: #666;
		padding: 10px 0 10px 5px;
		border-bottom: 1px solid #8bdde8;
	}

	table.ptable thead th .th-trip-status {
        display: inline-block;
        width: 43px;
        white-space: normal;
        position: relative;
        top: 4px;
	}

	table.ptable tbody td, table.ptable tfoot td {
		font-size: 12px;
		color: #252525;
		padding: 5px;
        position: relative;
	}
    table.ptable tbody td .geozone {font-style: italic;}
    table.ptable tbody>tr:nth-child(even)>td,
    table.ptable tbody>tr:nth-child(even)>th,
    table.ptable tbody tr:hover {
        background-color: #ebf8fc;
    }
	table.ptable tbody tr {
		height: 30px;
	}
	table.ptable tbody tr:hover td div.textboxcontainer input.input-select.table {
		border-color: #B4B4B4;
		background-color: #FFFFFF;
	}

	.input-select.table {
		border: 0px solid #ededed;
		background-color: #ededed;
	}

	#all-type-for-trip {
		width: 85px;
	}
    #all-type-for-trip.text-in-select {
        width: 130px;
    }

	.address-cell {
		word-wrap: break-word;
	}
	/* End table */

	/* Start table bottom */

	.vseparator {
		float: left;
		width: 5px;
		height: 24px;
		background: url(../img/razdel.gif) no-repeat center;
		margin: 0px 8px 0px 8px;
	}

	.pbtn {
		float: left;
		width: 26px;
		height: 26px;
		border: 0px;
		cursor: pointer;
		overflow: hidden;
	}

	.pbtn:hover {
		border-left: 1px solid #FFF;
		border-top: 1px solid #FFF;
		width: 25px;
		height: 25px;
	}

	.pfirst {
		background: url(../img/first.gif) no-repeat center;
	}

	.pprev {
		background: url(../img/prev.gif) no-repeat center;
	}

	.pfirst.disabled {
		background: url(../img/first-.gif) no-repeat center;
	}

	.pprev.disabled {
		background: url(../img/prev-.gif) no-repeat center;
	}

	.pcontrol {
		position: relative;
		overflow: visible;
	}

	.pnext {
		background: url(../img/next.gif) no-repeat center;
	}

	.plast {
		background: url(../img/last.gif) no-repeat center;
	}

	.pnext.disabled {
		background: url(../img/next-.gif) no-repeat center;
	}

	.plast.disabled {
		background: url(../img/last-.gif) no-repeat center;
	}

	.apply-group {
		position: absolute;
		right: 50px;
	}

	.no-wrap {
		white-space:nowrap;
	}

	.cell-table-input {
		white-space:nowrap;
	}

	/* End table bottom */

	/**
	 * jQuery TextBox
	 * Version 0.1 - 18/03/2008
	 * @author Dale Harvey <harveyd@gmail.com>
	 *
	 * A combination of a text input and a drop down
	 * select box, used by
	 * http://code.google.com/p/jqueryspreadsheet/
	 *
	 **/

	input.tb {
		border: 0px;
		padding: 0px;
		margin: 0px;
		height: 18px;
		color: #464646;
		font-size: 11px;
		font-family: arial;
		vertical-align: top;
	}

	input.tb:hover {
		border: 0px !important;
	}

	/*.textboxcontainer {*/
		/*border: 1px solid #b4b4b4;*/
		/*background: #FFF;*/
		/*padding: 0px;*/
		/*margin: 0px;*/
		/*height: 18px;*/
		/*display: table-cell;*/
		/*border: 1px solid transparent;
		background: transparent;
		padding: 0;
		margin: 0;
		height: 18px;
		display: table-cell;
	}*/

	.textboxcontainerhover {
		/*border: 1px solid #066397;*/
	}
	.textboxcontainer textarea {
		font-family: Arial;
	}

	.textboxarrow {
		width: 19px !important;
		height: 100% !important;
		padding: 0px;
		margin: 0px;
		border: 0px;
		vertical-align: top;
		/*background-color: #EDEDED;*/
		background-color: transparent;
	}

	.textboxarrow:hover, [disabled].textboxarrow, [disabled].textboxarrow:hover {
		border: 0px;
	}

	.textboxlist {
		position:   absolute;
		display:    none;
		height:     auto !important;
		background: #FFF;
		border:     1px solid #999;
		z-index:    9999;
        min-width: 0 !important;
	}

	.textboxlist li {
		list-style-type: none;
		background: #fff;
	}

	.textboxlist li a {
		cursor:     pointer;
		padding:    1px 3px;
		display:    block;
		color:      #464646 !important;
		text-decoration:none;
		background: #fff;
		white-space: nowrap;
		font-family: arial;
		height: 14px;
		line-height: 14px;
        min-width: 121px !important;
        max-width: 200px;
        overflow-x:   hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
	}

	.textboxlist li a:hover {
		background: #6699cc;
		color: #fff !important;
	}
    /*expand menu*/
    .pull-right {
        float: right;
    }
    .pull-right img {
        margin: 5px 12px 0 0;
        cursor: pointer;
        height: 18px;
    }
    .pull-right img:last-child {
        margin-right: 0;
    }
    .pull-left {
        float: left;
    }
/*    .expand-menu-wrap{
        position: relative;
    }*/
    .expand-menu {
        position: absolute;
        right: 0;
        top: 20px;
        display: none;
        z-index: 30000;
        background-color: #fafafa;
        border: 1px solid #9c9da1;
        padding: 0px;
        list-style: none;
    }
    #expand-menu {
        padding-left: 0;
        padding-right: 0;
        width: 0;
        width: 20px;
        vertical-align: middle;
    }
    #expand-menu > * {
        position: relative;
    }
    .expand-menu li {
        height: 16px;
        white-space: nowrap;
        cursor: pointer;
        padding: 3px 7px 3px 4px;
        text-align: left;
    }
    .expand-menu .menu-checkbox-input {
        /*padding: 7px 8px;*/
        display: inline-block;
    }
    .expand-menu input.menu-checkbox-input {
        /*margin: 7px 8px;*/
        margin-right: 8px;
        display: inline-block;
    }
    .expand-menu .menu-checkbox {
        color: #646466;
        padding: 6px 6px 3px 0;
        display: inline-block;
        vertical-align: top;
    }
    .expand-menu li:hover,
    .expand-menu .selected {
        background-color: #DADADC;
        color: #646464;
    }
    .expand-menu.open {display: block;}

    .checkbox-is-pass-zeroth {
        margin: 5px 0 0 10px!important
    }

    .select-server-type {
        width: 180px;
        height: 60px;
        margin: 10px 10px 0 0;
        border: 1px solid #d0d0d0;
        cursor: pointer;
        text-align: center;
        line-height: 55px
    }

    .select-server-type>span {
        font-size: 13px;
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
        margin: 0 5px;
        text-overflow: ellipsis
    }

    .select-server-type.active {
        background-color: #edf8ff;
        border: 1px solid #09f
    }

    .dashboard-inner-modal-bottom {
        height: 58px;
        width: 100%;
        border-top: 1px solid #d0d0d0
    }

    .btn-wrapper {
        width: 150px;
        height: 40px;
        margin: 9px 10px 0 0
    }

    .cancel {
        cursor: pointer;
        margin-top: 10px;
        font-size: 15px
    }

    .cancel:hover {
        color: #09f
    }

    .ok {
        cursor: pointer;
        width: 70px;
        background-color: #09f;
        height: 40px;
        color: #fff;
        vertical-align: middle;
        text-align: center;
        line-height: 40px;
        font-size: 15px
    }

    .dashboard-modal-close {
        width: 18px;
        height: 18px;
        background: url(../img/x.png) no-repeat;
        margin: 15px 10px 0 0;
        cursor: pointer
    }

    .date-time-content {
        border-bottom: 1px solid #edf8ff;
        height: 49px;
        position: relative;
        background: #edf8ff;
        margin-bottom: 20px
    }

    #time-select {
        border-collapse: collapse;
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-left: 6px;
    }

    #time-select td {
        border: 1px solid #666;
        height: 21px;
        padding: 2px 15px 0;
        cursor: pointer;
        background: #fff
    }

    #time-select td.active {
        background-color: #478BE2;
        color: #fff
    }

    #time-select .time-template:hover {
        background-color: #478BE2;
        color: #fff

    }

    #time-label {
        margin-top: 1px
    }

    #time-label div {
        display: inline-block;
        width: 16px;
        height: 16px;
        vertical-align: bottom
    }

    #time-label div:hover {
        cursor: pointer
    }

    #time-label .past {
        background: url(../img/prev.png);
        opacity: .6
    }

    #time-label .past:hover {
        opacity: 1
    }

    #time-label .future {
        background: url(../img/next.png);
        opacity: .6
    }

    #time-label .future:hover {
        opacity: 1
    }

    #time-select .time-info {
        border: 0;
        background: transparent;
        cursor: default
    }

    #timepickers {
        display: inline-block;
        position: relative;
        vertical-align: middle
    }

    #timepickers .datetime {
        border: 1px solid #c0c7cf;
        padding: 0;
        margin: 0;
        font-size: 12px;
        height: 23px;
        cursor: pointer;
        width: 80px;
        text-align: center;
        font-size: 12px;
        vertical-align: top
    }

    #change-time-btn {
        margin: 0;
        background: #09f;
        width: 50px;
        border: 1px solid #09f;
        display: inline-block;
        vertical-align: top;
        text-align: center;
        padding-top: 3px;
        text-decoration: none;
        color: #fff;
        height: 23px
    }

    #change-time-btn:active {
        cursor: pointer
    }

    #change-time-btn:hover {
        cursor: pointer
    }

    .dashboard-container {
        margin: 0 15px 15px
    }

    .column {
        min-height: 60px
    }

    .title {
        min-height: 20px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #252525;
        font-size: 24px;
    }

    .ui-state-highlight {
        border-style: dotted
    }

    .ui-datepicker {
        width: auto;
        padding: .2em 1.6em;
        display: none
    }

    .ui-widget-header {
        background: #fff;
        color: #09f;
        font-size: 15px;
        font-weight: 400
    }

    .ui-datepicker-month {
        color: #09f
    }

    .ui-datepicker-year {
        color: #09f
    }

    .ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next {
        position: absolute;
        top: 8px;
        width: 16px;
        height: 16px;
        cursor: pointer
    }

    .ui-datepicker-next {
        /*background: url(../img/next_dp.png) no-repeat*/
    }

    .ui-datepicker .ui-datepicker-next {
        right: 20px
    }

    .ui-datepicker-prev {
        /*background: url(../img/prev_dp.png) no-repeat*/
    }

    .ui-datepicker .ui-datepicker-prev {
        left: 20px;
    }
    .ui-datepicker-rtl .ui-datepicker-next {
        left: 2px;
        right: auto;
    }
    .ui-datepicker-rtl .ui-datepicker-prev {
        right: 2px;
        left:auto;
    }
    .ui-datepicker .ui-datepicker-prev .ui-icon,
    .ui-datepicker .ui-datepicker-prev.ui-state-hover .ui-icon {
        background: url("../img/next_dp.png") no-repeat 0 0;
    }
    .ui-datepicker .ui-datepicker-next .ui-icon,
    .ui-datepicker .ui-datepicker-next.ui-state-hover .ui-icon {
        background: url("../img/prev_dp.png") no-repeat 0 0;
    }

    .ui-datepicker .ui-datepicker-next.ui-state-hover,
    .ui-datepicker .ui-datepicker-prev.ui-state-hover{
        background: none;
        border: none;
    }
    .ui-datepicker-header.ui-widget-header {
        border: none;
    }

    .ui-datepicker th {
        padding: .3em;
        text-align: center;
        font-size: 9px;
        border: 0;
        color: #8e959d
    }

    .ui-datepicker td span,.ui-datepicker td a {
        display: block;
        padding: .2em .3em .1em .2em;
        text-align: right;
        text-decoration: none;
        font-size: 13px
    }

    .ui-datepicker td {
        border: 0;
        padding: 2px
    }

    .ui-datepicker-calendar td.zero a:before {
        content: "0"
    }

    .ui-widget-content a {
        color: #09f
    }

    .ui-datepicker .ui-state-active {
        background: #09f;
        border-radius: 16px;
        color: #fff;
        font-weight: 400
    }

    select {
        border: 1px solid #b4b4b4;
        color: #464646;
        background-color: #fff;
    }

    select:hover {
        border: 1px solid #066397;
    }

    select[disabled] {
        background-color: #efefef;
    }

    select[disabled]:hover {
        border: 1px solid #b4b4b4;
    }

    textarea {
        border: 1px solid transparent;
        color: #464646;
        resize: none;
    }

    textarea:hover {
        border: 1px solid #066397;
    }

    textarea:disabled {
        border: 1px solid #464646;
    }
    .btn {
        margin: 0;
        background: #478BE2;
        border: 1px solid #478BE2;
        display: inline-block;
        text-align: center;
        text-decoration: none;
        color: #fff;
        height: 25px;
        cursor: pointer;
        padding: 0px 10px;
    }
    /*.btn.disabled {opacity: 0.4;}*/
    .btn.disabled {opacity: 0.6;}
    .pgroup-btn-wrap .btn {
        padding: 0;
        width: 43px;
        height: 100%;
        border: none;
        /*line-height: 40px; *//* equal height pagination wrapper */
        border-left: 2px solid #fff;
        border-right: 2px solid #fff;
    }
    .pgroup-btn-wrap .tab {
        padding: 0;
        height: 100%;
        border: none;
        /*line-height: 40px; *//* equal height pagination wrapper */
        border-left: 2px solid #fff;
        border-right: 2px solid #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100px;
    }
    .btn.cancel{
    	background: #fff;
    	color:#478BE2;
    }

    .btn,
    .btn:hover,
    .btn:focus {outline: none;}

    #select-table-columns {
        background: url(../img/show.png) no-repeat center center transparent;
        height: 10px;
        width: 10px;
        display: none;
        cursor: pointer;
        margin: 0 auto;
    }
    #expand-menu #select-table-columns {
        display: block;
    }
    div.table-footer {
        background-color: #D7F2F9;
        padding: 0 30px;
    }
    .trip-type-wrap {
        text-align: center;
    }
    table.ptable tbody td.trip-type-wrap {
        text-align: center;
    }
    .trip-type-selects {
        display: inline-block;
        width: 91px;
        position: relative;
    }
    .trip-type-selects .trip-type {
        display: block;
        float: left;
        height: 24px;
        width: 30px;
        background: #edf8ff;
    }
    .trip-type-selects .trip-type input {
        display: block;
        height: 100%;
        width: 100%;
        opacity: 0.01;
        cursor: pointer;
    }
    .trip-type-selects .trip-type span {
        display: block;
        height: 100%;
        width: 100%;
        background: #DAF3F5;
    }
    .trip-type-selects .trip-type:hover,
    .trip-type-selects .trip-type.active {
        background: #DAF3F5;
    }
    .trip-type-selects .trip-type.personal span          {background: url("../img/pers_.png") 50% 50% no-repeat transparent;}
    .trip-type-selects .trip-type.personal:hover span,
    .trip-type-selects .trip-type.personal.active span   {background: url("../img/pers.png") 50% 50% no-repeat transparent;}
    .trip-type-selects .trip-type.business span        {background: url("../img/biz_.png") 50% 50% no-repeat transparent;}
    .trip-type-selects .trip-type.business:hover span,
    .trip-type-selects .trip-type.business.active span   {background: url("../img/biz.png") 50% 50% no-repeat transparent;}
    .trip-type-selects .trip-type.empty span             {background: url("../img/del_.png") 50% 50% no-repeat transparent;}
    .trip-type-selects .trip-type.empty:hover span,
    .trip-type-selects .trip-type.empty.active span      {background: url("../img/del.png") 50% 50% no-repeat transparent;}


    .trip-type-item {
        position: relative;
        display: inline-block;
    }
    .trip-type-wrap .textboxcontainer {}
    .textboxcontainer > .trip-type-item {
        width: auto;
    }
    .trip-type-item .trip-type-selects {
        display: none;
        position: absolute;
        top: 100%;
        left: -38px;
        z-index: 999;
    }
    .trip-type-item:hover .trip-type-selects {display: block;}
    .trip-type-item .trip-type-selects {}
    .trip-type-item .trip-type-selects {
        background: #fff;
        border: 1px solid #696969;
        padding: 3px 5px;
        width: 93px;
    }
    /*.textboxcontainer select,*/
    /*.textboxcontainer input {display: none;}*/
    .textboxcontainer > .trip-type-item .trip-type,
    .trip-type-item .trip-type-selects .trip-type {
        background: none;
    }
    .trip-type-item .trip-type-selects .trip-type + .trip-type {
        border-left: 1px solid #696969;
    }

    .trip-type-selects .arrow {
        position: absolute;
        display: block;
        width: 10px;
        height: 10px;
        /*background: red;*/
        top: -9px;
        left: 50%;
        margin-left: -5px;
    }
    .textboxarrow:focus,
    .textboxarrow:hover,
    .textboxarrow {
        border: 1px solid #696969;
        border-left: none;
        font-size: 12px;
        /*padding-left: 5px;*/ /*  fix for FF */
        background: transparent;
        background: none;
        height: 25px !important;
        color: #252525;
    }
    .textboxcontainer input:focus,
    .textboxcontainer input:hover,
    .textboxcontainer input {
        background: transparent !important;
        border: 1px solid #696969 !important;
        height: 23px;
        border-left: none;
        font-size: 12px;
        padding-left: 5px;
        color: #252525;
        outline: none;
    }
    .error .textboxcontainer input:focus,
    .error .textboxcontainer input:hover,
    .error .textboxcontainer input,
    .error .input-select.note,
    .error .input-select.note:hover,
    .error .input-select.note:focus {
        border-color: red !important;
    }
    .footer-center {
        /*margin: 0 250px;*/
        /*text-align: center;*/
        height: 100%;
    }
    .footer-center > * {
        display: inline-block;
        height: 100%;
    }
    .footer-center .textboxcontainer input {
        width: 41px;
        text-align: center;
        padding: 0;
    }
    #pagestat {
        /*line-height: 40px;*/
        display: inline-block;
        margin-left: 0;
        text-align: right;
        width: 80px;
    }
    #tabstat {
        display: inline-block;
        margin-left: 0;
        text-align: right;
        width: 80px;
    }
    #prev-page,
    #next-page {
        display: inline-block;
        height: 23px;
        width: 35px;
        line-height: 25px;
        text-align: center;
        padding: 0;
    }
    #prev-page,
    #next-page {display: none;}
    #prev-page.visible,
    #next-page.visible {display: inline-block;}
    .pcontrol {
        display: inline-block;
        vertical-align: top;
        white-space: nowrap;
    }

    .message-wrap {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 500px;
        margin-left: -250px;
        text-align: center;
        min-height: 16px;
        margin-top: -16px;
    }

    .message-wrap.error {
        color: #770000;
    }
    #execute-btn {
        margin-left: 4px;
    }
    #table-instruments {
        height: 45px;
    }
    #table-instruments * {
        height: 100%;
        line-height: 40px;
    }
    #table-instruments .btn {
        background-color: #DAF3F5;
        color: #252525;
    }
    /*#table-instruments .btn:hover,*/
    #table-instruments .btn.active {
        background-color: #478BE2;
        color: #fff;
    }
    #table-instruments #apply_changes {
        display: inline-block;
        background-color: #478BE2;
        border-color: #478BE2;
        color:#fff;
        height:auto;
        line-height:normal;
        margin-top:10px;
        padding: 2px 15px;
    }

    #top, #prev, #next, #last {
        color: transparent;
        background-position: 50% 50%;
        background-repeat: no-repeat;
    }
    #top  {background-image: url('../img/first.png'); border-left: 3px solid #fff;}
    #prev {background-image: url('../img/pre_first.png');}
    #next {background-image: url('../img/pre_last.png');}
    #last {background-image: url('../img/last.png'); border-right: 3px solid #fff;}
    input.btn.number[value="..."] {cursor: default;}
}
.td-date {
    white-space: nowrap;
}

#pg-wrap {
    position: fixed;
    top: 0;
    right: 0;
    max-width: 100%;
}
#pg-wrap > * {float: left;}
#pg,
#pg li {
    margin: 0;
    padding: 0;
    list-style: none;
}
#pg li {
    float: left;
}

.interval-wialon {
    position: relative;
    top: 1px;
    left: 17px;
}

.interval-wialon .iw-select{
    display: inline-block;
    float: left;
    margin-left: -11px;
    margin-top: -1px;
}
.interval-wialon .iw-labels{
    margin-left: 15px;
    float: right;
    margin-top: 2px;
}

.interval-wialon .iw-select .iw-period-btn {
    /* float: left; */
    border: 1px solid #8098a4;
    height: 36px;
    min-width: 90px;
    width: 100px;
    padding: 0;
    cursor: pointer;
    background: white;
    font-size: 14px;
    line-height: 36px;
    text-align: center;
    box-sizing: border-box;
    margin: 0;
}

.interval-wialon .iw-pickers {
    display: flex;
    gap: 10px;
    background: #f7fafd;
    border-radius: 8px;
    padding: 6px 14px;
    box-shadow: 0 1px 4px rgba(80, 120, 180, 0.07);
    margin: 8px 0;
    font-size: 15px;
    color: #2a3b4d;
    flex-wrap: wrap;
  }
.interval-wialon .iw-select .iw-period-btn + .iw-period-btn {
    margin-left: -1px;
}

.interval-wialon .iw-period-btn:hover, .interval-wialon .iw-period-btn.active {
    background-color: #478BE2;
    color: #fff;
}

.interval-wialon .iw-time-btn {
    background: #09f;
    border: 1px solid #09f;
    color: #fff;
    /* height: 23px; */
    padding: 0 15px;
    cursor: pointer;
}

.interval-wialon .iw-labels .iw-label {
    position: relative;
    top: 2px;
}

.interval-wialon .iw-pickers input {
    background-color: #fff;
    border: 1px solid #c0c7cf;
    padding: 6px 10px;
    height: 32px;
    border-radius: 6px;
    font-size: 14px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
    transition: border 0.2s, box-shadow 0.2s;
    width: 110px;
    text-align: center;
  }

  .interval-wialon .iw-pickers input:focus {
    border-color: #478BE2;
    outline: none;
    box-shadow: 0 0 0 2px rgba(71, 139, 226, 0.2);
  }

.interval-wialon .iw-similar-btn {
    width:16px;
    height:16px;
    margin-top: 3px;
    display: inline-block;
}
/*
.interval-wialon .iw-similar-btn.past {
    background: url(../img/prev.png);
    opacity:0.6;
}
.interval-wialon .iw-similar-btn.future {
    background: url(../img/next.png);
    opacity:0.6;
}
*/
.interval-wialon .iw-similar-btn:hover {
    opacity: 1;
}

.iw-labels a.iw-similar-btn::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
}
.iw-labels a.iw-similar-btn.past::before {
    border-width: 8px 12px 8px 0;
    border-color: transparent #478be2 transparent transparent;
}
.iw-labels a.iw-similar-btn.future::before {
    border-width: 8px 0 8px 12px;
    border-color: transparent transparent transparent #478be2;
}

.modal {
	position:fixed;
	top:50%;
	left:50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background: #fff;
	color:#252525;
	border:1px solid #8bdde8;
	font-size: 12px;
	/*overflow:hidden;*/
}
.modal * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.modal .modal-header {
	font-size: 14px;
	height:36px;
	background: #d7f2f9;
	padding-top:10px;
}

.modal>div {
	padding:12px;
}
.modal .modal-controls {
	width:20px;
	float:right;
	text-align: center;
}
.modal .modal-controls > div {
	cursor: pointer;
}
.modal .modal-body>div ul{
	text-align: left;
}
.modal .modal-body input[type="text"] {
	width: 210px;
	margin-top: 5px;
	height: 24px;
}
.modal .modal-body input[type="checkbox"] {
    margin-top: 5px;
}
noindex:-o-prefocus, .modal .modal-body input[type="checkbox"] {
    margin-right: 3px;
}
.modal .modal-body select {
    width: 210px;
    margin-top: 5px;
    height: 24px;
}
.modal .modal-body label {
    display: inline-block;
    margin-right: 8px;
    width: 180px;
    text-align: right;
    overflow-x:   hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.modal-overflow {
	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background: rgba(255,255,255,0.6);
}

.modal .modal-footer {
	text-align: right;
	border-top:1px solid #ccc;
}

.save-btn {
	background: url("../img/save.png") no-repeat center center;
	height: 24px;
	width: 24px;
	cursor:pointer;
	display:none;
}

tr.summary {
    font-weight: bolder;
}


.ui-datepicker-rtl .ui-datepicker-prev .ui-icon,
.ui-datepicker-rtl .ui-datepicker-prev.ui-state-hover .ui-icon {
    background: url("../img/prev_dp.png") no-repeat 0 0;
}
.ui-datepicker-rtl .ui-datepicker-next .ui-icon,
.ui-datepicker-rtl .ui-datepicker-next.ui-state-hover .ui-icon {
    background: url("../img/next_dp.png") no-repeat 0 0;
}

/* Responsive header using flexbox */
.header-flex {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 16px;
    min-height: 50px;
}
#logo {
    width: 32px;
    height: 32px;
    margin: 12px 12px 12px 0;
    float: none !important;
}
.title {
    float: none !important;
    margin-left: 0;
    margin-top: 0;
    font-size: 22px;
    color: #797c80;
    word-break: break-word;
}
@media (max-width: 600px) {
    .header-flex {
        flex-direction: row;
        align-items: flex-start;
        padding: 8px;
    }
    #logo {
        margin: 0 0 8px 0;
    }
    .title {
        font-size: 18px;
    }
}

@media (max-width: 600px) {
    #header {
        /* min-height: 60px; */
        margin-top: 6px;
        margin-bottom: -14px;
    }
    #loading {
        height: 4px;
    }
}

@media (max-width: 600px) {
    .interval-wialon .iw-select {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
      width: 100%;
      margin-bottom: 6px;
    }
  
    .interval-wialon .iw-select .iw-period-btn {
      width: 100%;
      box-sizing: border-box;
      text-align: center;
      font-size: 16px;
      margin: 0;             /* remove any margin */
      padding: 0;            /* consistent height */
      height: 40px;          /* or whatever you prefer */
    }
  
    /* Span the 5th one full width if present */
    .interval-wialon .iw-select .iw-period-btn:nth-child(5) {
      grid-column: span 2;
    }

    .interval-wialon .iw-labels {
        width: 100%;
    }

    .input-select {
        width: auto !important;
    }

    .ranging-time-wrap {
        float: unset;
    }

    .interval-wialon .iw-pickers {
        justify-content: center;
        margin-left: -23px;
      }

      .export-buttons {
        display: none;
      }

      .message-wrap {
        position: relative;
        top: 40px;
        left: 0;
        width: 100vw;
        margin-left: 0;
        text-align: center;
        min-height: 100px;
        margin-top: 0;
    }

    #table-instruments #apply_changes {
        display: none;
        background-color: #478BE2;
        border-color: #478BE2;
        color:#fff;
        height:auto;
        line-height:normal;
        margin-top:10px;
        padding: 2px 15px;
    }

    #pagestat {
        /*line-height: 40px;*/
        display: inline-block;
        margin-left: 4px;
        text-align: right;
        width: auto;
    }

    #page-selector {
        height: fit-content;
        padding-right: 0px;
        padding-left: 0px;
    }

  }

@media (max-width: 768px) {
    body {
        min-width: 100px;
    }

    .container {
        min-width: 100px;
    }

    #paginated-table, #paginated-table-footer, #paginated-table thead, #paginated-table tbody, #paginated-table th, #paginated-table td, #paginated-table tfoot {
        display: none !important;
    }
    #card-container {
        display: block !important;
    }
    #table-wrap {
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
        padding: 0 5px;
    }
}
@media (min-width: 769px) {
    #card-container {
        display: none !important;
    }
    #paginated-table, #paginated-table-footer {
        display: table !important;
    }
}

.trip-card {
    background: #fff;
    border: 1px solid #8bdde8;
    border-radius: 8px;
    margin-bottom: 16px;
    padding: 12px 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.trip-card .card-header {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}
.trip-card .card-row {
    margin-bottom: 6px;
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.trip-card .card-row:has(.save-btn) {
    justify-content: center;
}
.trip-card .card-row strong {
    min-width: 110px;
    font-weight: 600;
    color: #478BE2;
}
.trip-card .geozone {
    font-style: italic;
    color: #888;
    margin-left: 4px;
}
.trip-card .save-btn {
    margin-top: 8px;
    width: 32px;
    height: 32px;
    background: url('../img/save.png') no-repeat center center;
    background-size: 24px 24px;
    cursor: pointer;
}

.iw-labels {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f7fafd;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 15px;
    color: #2a3b4d;
    box-shadow: 0 1px 4px rgba(80,120,180,0.07);
    margin: 8px 0;
    min-height: 36px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: box-shadow 0.2s;
}

.iw-labels .iw-label {
    flex: 1;
    text-align: center;
    color: #478be2;
    font-weight: 600;
    font-size: 16px;
}

.iw-labels a.iw-similar-btn {
    background: #e3eefd;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #478be2;
    text-decoration: none;
    font-size: 18px;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 2px rgba(80,120,180,0.05);
}

.iw-labels a.iw-similar-btn:hover {
    background: #d0e3fc;
    box-shadow: 0 2px 8px rgba(80,120,180,0.12);
}