/*
|-------------------------------------------------------------------------------
| Global styles
|-------------------------------------------------------------------------------
*/
img {
    vertical-align: middle;
}

body {
    padding-bottom: 0;
    min-height: 100%;
    font-family: 'Open Sans','Segoe UI';
    font-size: 13px;
    color: #444;
}


body:before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.hidden {
  display: none !important;
}

#material-preloader {
	top: 0 !important;
	z-index: 10000; 
	width: 100%; 
	max-width: 100%; 
	height: 100%; 
	max-height:100%; 
	background-color: transparent;
}

.text-right {
	text-align: right;
}

.no-overflow {
	overflow-y: hidden !important;
	overflow-x: hidden !important;
}

.link {
	cursor: pointer;
}

.link:hover i {
	color:#0095DA !important; 
}

/*
|-------------------------------------------------------------------------------
| Beyond compat styles
|-------------------------------------------------------------------------------
*/

.page-content {
    margin-left: 250px;
    display: block;
    margin-right: 0;
    margin-top: 0;
    min-height: 100%;
    padding: 0;
}

.page-sidebar {
    width: 250px;
}
.page-sidebar:before {
    width: 245px;
}
.main-container {
    position: static;
    padding: 0;
}

.page-body {
    background-color: transparent;
    padding: 18px 20px 24px;

}


/* Main page breadcrumbs */
.page-breadcrumbs {
    position: relative;
    background: white;
    min-height: 40px;
    line-height: 39px;
    padding: 0;
    display: block;
    z-index: 1;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.15);
    -moz-box-shadow: 0 2px 4px 0 rgba(0,0,0,.15);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.15);
}

.breadcrumb {
    background-color: transparent;
    display: inline-block;
    line-height: 24px;
    margin: 0 22px 0 12px;
    padding: 0;
    font-size: 13px;
    color: #333;
    border-radius: 0;
}

.breadcrumb>li, .breadcrumb>li.active {
    color: #777;
    -webkit-text-shadow: none;
    text-shadow: none;
}

.breadcrumb>li {
    display: inline-block;
}

.breadcrumb>li>i {
    margin-left: 4px;
    margin-right: 2px;
    font-size: 20px;
    position: relative;
    top: 2px;
}

.breadcrumb>li:first-child>a {
    padding-left: 4px;
}

.breadcrumb>li>a {
    display: inline-block;
    color: #0095DA;
}
/* Main page breadcrumbs END */



/*
|-------------------------------------------------------------------------------
| Beyond compat styles
|-------------------------------------------------------------------------------
*/

.sidenav li.active {
    background-color: rgba(0,0,0,0);
}

.bus-blue {
	background-color:#0095DA !important;
}

.bus-green {
	background-color: #88c733 !important;
}

.bus-green-dark{
	background-color: #608e25 !important;
}

.bus-orange {
	background-color: #ff9900 !important;
}

.bus-yellow {
	background-color: #ffd700 !important;
}

.bus-brown {
	background-color: #b35919 !important;
}

.bus-red {
	background-color: #b71c1c !important;
}

.bus-blue-text {
	color: #0095DA !important;
}

.bus-red-text {
	color: #B71C1C !important;
}

.bus-green-text {
	color: #88c733 !important;
}

.bus-green-dark-text{
	color: #608e25 !important;
}

.bus-orange-text {
	color: #ff9900 !important;
}

.bus-yellow-text {
	color: #ffd700 !important;
}

.bus-brown-text {
	color: #b35919 !important;
}

.spinner-bus-blue-only{
    border-color: #0095DA !important;
}

.preloader-wrapper.biger{
    width: 100px !important;
    height: 100px !important;
}

.bold-text{
	font-weight: bold !important;
}

.italic-text{
	font-style: italic !important;
}

.warning-text {
	color: #dd2c00;
}

.dropdown-content li > a, .dropdown-content li > span {
	color:#000000;border-color: #0095DA !important;
}

.switch label input[type=checkbox]:checked + .lever {
   background-color:#006999 !important;
}

.switch label input[type=checkbox]:checked + .lever:after {
   background-color: #0095DA !important;
}

.badge {
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;
}

#alerts .badge {
    float: none !important;
}

#alerts .badge:hover {
    background-color: #e6e6e6 !important;
}

/*
|-------------------------------------------------------------------------------
| Material overwrite
|-------------------------------------------------------------------------------
*/

.switch label input.contact_form_lever[type=checkbox][disabled]:checked+span.lever:after {
  background-color: rgb(90, 111, 121) !important;
}

.switch label input.contact_form_lever[type=checkbox]:checked + .lever {
  background-color: rgb(115, 170, 195) !important;
}

[type="checkbox"].filled-in:checked+span:not(.lever):after {
    border: 2px solid #0095DA !important;
    background-color: #0095DA !important;
    z-index: 0;
}

[type="checkbox"][disabled="disabled"].filled-in:checked+span:not(.lever):after {
    border: 2px solid #949494 !important;
    background-color: #949494 !important;
    z-index: 0;
}

[type="checkbox"].filled-in-bus-red:checked+span:not(.lever):after {
    border: 2px solid #B71C1C !important;
    background-color: #B71C1C !important;
    z-index: 0;
}

[type="checkbox"].filled-in-bus-red:not(:checked)+span:not(.lever):after {
	border: 2px solid #B71C1C !important;
    z-index: 0;
}

[type="checkbox"].filled-in-bus-green-dark:checked+span:not(.lever):after {
    border: 2px solid #608e25 !important;
    background-color: #608e25 !important;
    z-index: 0;
}

[type="checkbox"].filled-in-bus-green-dark:not(:checked)+span:not(.lever):after {
	border: 2px solid #608e25 !important;
    z-index: 0;
}

 .sidenav .collapsible-body>ul:not(.collapsible)>li.active a, .sidenav.sidenav-fixed .collapsible-body>ul:not(.collapsible)>li.active a {
    color: black !important;
 }
 
 .sidenav .collapsible-body>ul:not(.collapsible)>li.active, .sidenav.sidenav-fixed .collapsible-body>ul:not(.collapsible)>li.active {
    background: #bbdefb;
    border-bottom: 1px solid white;
 }

.tabs .indicator { display: none; }
.tabs .tab a.active { border-bottom: 2px solid #0095DA; }

.tabs .tab a { 
    color: #0095DA;
    font-size: 14px; 
}

.tabs .tab a:hover, .tabs .tab a.active { 
	background-color: transparent;
    color: #0095DA;
}

.tabs .tab.disabled a, .tabs .tab.disabled a:hover {
    color: #0095DA !important;
    cursor: pointer !important;
}

.company-info-wrapper input:disabled {
   color: black !important;
}

/*
|-------------------------------------------------------------------------------
| Material hacks
|-------------------------------------------------------------------------------
*/

 
/*
|-------------------------------------------------------------------------------
| Responsive layout
|-------------------------------------------------------------------------------
*/

@media screen and (max-width: 1180px) {
    
}

@media screen and (max-width: 767px) {
    .planning-datepicker-wrapper {
        margin-bottom: 240px;
    }
}

@media screen and (max-width: 979px) {
    .page-sidebar {
        display: none;
        float: none;
    }
    .page-content {
        margin-left: 0;
    }
}

/*
|-------------------------------------------------------------------------------
| Material Data Tables Global
|-------------------------------------------------------------------------------
*/
.column-clickable {
    cursor: pointer;
    font-size:1.5em !important;
    color: #0095DA !important;
    text-decoration: underline;
}

.material-table-select-container li:first-child  {
  display: none !important;
}

.material-table-row-highlight {
    border-left: 2px solid black;
    border-right: 2px solid black;
}

.mat-table-fixed {
    table-layout: fixed;
}

.mat-table-export-button {
    margin-bottom: 10px;
}

.mat-table-export-button a {
	display: block;
}

.mat-action-bar {
	display: -webkit-flex;
}

.mat-order {
	vertical-align: middle;
}

.mat-click {
	cursor: pointer;
	user-select: none;
}

.pointer {
	cursor: pointer;
}


/*
|-------------------------------------------------------------------------------
| Material Data Tables V1
|-------------------------------------------------------------------------------
*/
div.material-table table th.th-long-content {
  overflow-wrap: normal;
  white-space: normal;
/*  text-align: center;*/
}

div.material-table table th.th-large-num-columns {
  padding-left: 20px;
}

div.material-table table td.td-large-num-columns {
  padding-left: 20px;
}

div.material-table table th.th-large-num-columns:nth-child(2) {
  padding-left: 0;
}

div.material-table table td.td-large-num-columns:nth-child(2) {
  padding-left: 0;
}

@media only screen and (max-width: 992px) {

  .align-on-med-and-down {
    padding-top: 10px;
    padding-bottom: 15px;
    margin-left: -5px;
  }
  
  .td-align-on-med-and-down {
    padding: 0px !important;
  }
  
  .th-align-on-med-and-down {
    padding: 0px !important;
  }
  
  .button-on-med-and-down {
    margin-bottom: 10px !important;
  }
  
  div.material-table table th:first-child,
  div.material-table table td:first-child {
    width: 60px;
  }
  
  .center-on-med-and-down {
    text-align: center;
  }
  
  div.material-table table th.th-long-content {
    overflow-wrap: normal;
    white-space: nowrap;
    text-align: left;
  }
  
  div.material-table table th.th-long-content.center-on-med-and-down {
    text-align: center;
  }
}


/*
|-------------------------------------------------------------------------------
| Material Data Tables V2
|-------------------------------------------------------------------------------
*/

div.material-table-v2 {
  padding: 0;
}

div.material-table-v2 .column-clickable {
    cursor: pointer;
    font-size:1.5em !important;
    color: #0095DA !important;
    text-decoration: underline;
}

div.material-table-v2 table {
  table-layout: fixed;
}

div.material-table-v2 .table-header {
  height: 64px;
  padding-left: 24px;
  padding-right: 14px;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: flex;
  -webkit-display: flex;
  border-bottom: solid 1px #DDDDDD;
}

div.material-table-v2 .table-header .actions {
  display: -webkit-flex;
  margin-left: auto;
}

div.material-table-v2 table tr td {
  padding: 0 0 0 56px;
  height: 48px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.87);
  border-bottom: solid 1px #DDDDDD;
  text-overflow: ellipsis;
}

div.material-table-v2 table tr td a {
  color: inherit;
}

div.material-table-v2 table tr td a i {
  font-size: 18px;
  color: rgba(0, 0, 0, 0.54);
}

div.material-table-v2 table tr {
  font-size: 12px;
}

div.material-table-v2 table th {
  font-size: 12px;
  font-weight: 500;
  color: #757575;
  padding: 0;
  height: 56px;
  padding-left: 56px;
  vertical-align: middle;
  outline: none !important;
}

div.material-table-v2 table th.th-long-content {
  overflow-wrap: normal;
  white-space: normal;
/*  text-align: center;*/
}

div.material-table-v2 table th.th-large-num-columns {
  padding-left: 20px;
}

div.material-table-v2 table td.td-large-num-columns {
  padding-left: 20px;
}

div.material-table-v2 table th.th-large-num-columns:nth-child(2) {
  padding-left: 0;
}

div.material-table-v2 table td.td-large-num-columns:nth-child(2) {
  padding-left: 0;
}

@media only screen and (max-width: 992px) {

  .align-on-med-and-down {
    padding-top: 10px;
    padding-bottom: 15px;
    margin-left: -5px;
  }
  
  .td-align-on-med-and-down {
    padding: 0px !important;
  }
  
  .th-align-on-med-and-down {
    padding: 0px !important;
  }
  
  .button-on-med-and-down {
    margin-bottom: 10px !important;
  }
  
  div.material-table-v2 table th:first-child,
  div.material-table-v2 table td:first-child {
    width: 60px;
  }
  
  .center-on-med-and-down {
    text-align: center;
  }
  
  div.material-table-v2 table th.th-long-content {
    overflow-wrap: normal;
    white-space: nowrap;
    text-align: left;
  }
  
  div.material-table-v2 table th.th-long-content.center-on-med-and-down {
    text-align: center;
  }
}

div.material-table-v2 .material-table-row-highlight {
    border-left: 2px solid black;
    border-right: 2px solid black;
}

div.material-table-v2 table tbody tr:hover {
  background-color: #BBB;
}

div.material-table-v2 table th:last-child,
div.material-table-v2 table td:last-child {
  padding: 0 14px 0 0;
}


/*
|-------------------------------------------------------------------------------
| Reports
|-------------------------------------------------------------------------------
*/

table.report-table tbody tr:hover {
  background-color: #BBB;
}

table.report-table td.clickable:hover{
	color: #0095DA !important;
}

table.report-table td.clickable.link{
	color: blue;
	text-decoration: underline;
	cursor: pointer;
}

table.report-table td.clickable.underline{
	text-decoration: underline;
	cursor: pointer;
}


/*
|-------------------------------------------------------------------------------
| MaterializeCSS HOTFIXES
|-------------------------------------------------------------------------------
*/
.input-field .dropdown-content [type="checkbox"]+label {
  top: 0; /* previously 1px; */
  display: inline; /* previously inherits `display: inline-block;` from `[type="checkbox"]+label` */
}

.input-field .dropdown-content [type="checkbox"]+label:first-of-type:before {
  background-color: transparent !important;
}

/*
|-------------------------------------------------------------------------------
| Main content without sidebar style
|-------------------------------------------------------------------------------
*/
.page-content--full {
  margin-left: 0;
}

/*
|-------------------------------------------------------------------------------
| Banner notifications style
|-------------------------------------------------------------------------------
*/
#banner-notification-container {
  position: absolute;
  top: 20%;
  right: 3%;
  width: 97%;
  z-index: 9500;
}

.banner {
  position: relative;
  min-height: 40px;
  width: 100%;
  z-index: 9999;
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  margin-left: 2rem;
  margin-right: 2rem;
  border: 1px solid transparent;
  border-radius: .25rem;
  display: none;
  line-height: 2.7;
  vertical-align: middle;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .24);
  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .24);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .24)
}

@media only screen and (max-width:600px) {
  .banner {
    margin-left: 0.33rem;
    margin-right: 0.33rem;
  }
}

.banner.active {
  display: block;
}

.banner-bottom {
  left: 0;
  right: 0;
  bottom: 10px;
}

.banner-top {
  left: 0;
  right: 0;
  top: 10px;
}

.banner-right {
  right: 10px;
  bottom: 10%;
  min-height: 10vh;
}

.banner-left {
  left: 10px;
  bottom: 10%;
  min-height: 10vh;
}

.banner-close {
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  /*position: absolute;*/
  cursor: pointer;
  /*right: 1.5%;*/
  vertical-align: top;
}

.banner-content {
  display: inline-block;
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  width: calc(100% - 50px);
  vertical-align: middle;
}

/*
|-------------------------------------------------------------------------------
| PWA specific styles
|-------------------------------------------------------------------------------
*/
@media all and (display-mode: standalone) {
  #prompt-pwa-btn:fullscreen,
  #prompt-pwa-btn:-webkit-full-screen,
  #prompt-pwa-btn:-moz-full-screen,
  #prompt-pwa-btn:-ms-fullscreen,
  #prompt-pwa-btn {
    display: none;
  }
  
}


/*
|-------------------------------------------------------------------------------
| Gate buttons style
|-------------------------------------------------------------------------------
*/
.gate-button {
  margin-top: 5px;
  margin-bottom: 5px;
  width: 100%;
  background-color: #0095DA;
  text-transform: none;
}

/*
|-------------------------------------------------------------------------------
| Center inside grid styles
|-------------------------------------------------------------------------------
*/
.grid-centered-row {
  font-size: 0;
  text-align: center;
  display: block;
}

.grid-centered-row > .grid-centered-col {
  display: inline-block;
  float: none;
}

/*
|-------------------------------------------------------------------------------
| Misc
|-------------------------------------------------------------------------------
*/

.vehicle-fields-header {
    margin-top: 1em;
    margin-bottom: 1em;
}

.vehicle-fields-switch-input {
	min-height: 3em !important;
}

.vehicle-fields-header-column {
    margin: .7666666667rem 0 .46rem 0;
}

.vehicle-modal-select .select-wrapper ul {
	max-height: 30em !important;
}

.vehicle-modal-disable {
    background-color: #DFDFDF !important;
    color: #9F9F9F !important;
}

.vehicle-switch-div-align {
	padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.vehicle-file-input-label {
	position: absolute;
    top: -1.6rem;
    left: 1.5rem !important;
    font-size: 0.8rem;
}

.icon-smaller {
	font-size: 1.5rem;
}

table.stripped2 > tbody > tr:nth-child(odd) {
   background-color: rgba(241, 255, 180, 0.5);
}
table.stripped2 > tbody > tr:nth-child(even) {
   background-color: rgba(213, 205, 170, 0.5);
}
table.highlight2 > tbody > tr:hover {
   background-color: rgba(215, 242, 240, 0.5);
}

table.stripped3 > tbody > tr:nth-child(odd) {
   background-color: rgba(180, 255, 241, 0.5);
}
table.stripped3 > tbody > tr:nth-child(even) {
   background-color: rgba(170, 205, 213, 0.5);
}
table.highlight3 > tbody > tr:hover {
   background-color: rgba(240, 242, 215, 0.5);
}


/*
|-------------------------------------------------------------------------------
| Pulse buttons
|-------------------------------------------------------------------------------
*/
.pulse {
  display: block;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(255,0,0, 0);
  background-color: rgba(0,0,0, 0);
  animation: pulse 2s infinite;
}
.pulse:hover {
  /*animation: none;*/
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255,0,0, 0.4);
	background-color: rgba(255,0,0, 0.4);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(255,0,0, 0);
	  background-color: rgba(255,0,0, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(255,0,0, 0);
	  background-color: rgba(255,0,0, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255,0,0, 1);
    box-shadow: 0 0 0 0 rgba(255,0,0, 1);
	background-color: rgba(255,0,0, 1);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(255,0,0, 0);
      box-shadow: 0 0 0 10px rgba(255,0,0, 0);
	  background-color: rgba(255,0,0, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(255,0,0, 0);
      box-shadow: 0 0 0 0 rgba(255,0,0, 0);
	  background-color: rgba(255,0,0, 0);
  }
}
  
#user_address_delivery_scrol_down{
	margin: 20px;
	width: 50px;
	height: 50px;
	background-image: url("/img/pulse-down-arrow.png");
	color: black;
	background-size: cover;
}

#user_address_delivery_scrol_down_add_tab{
	margin: 20px;
	width: 50px;
	height: 50px;
	background-image: url("/img/pulse-down-arrow.png");
	color: black;
	background-size: cover;
}

/*
|-------------------------------------------------------------------------------
| INSERT AND EDIT TEMPLATE 
|-------------------------------------------------------------------------------
*/

.template_add_edit{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /* grid-auto-rows: minmax(100px, auto); */
    grid-gap: 1em;
    justify-items: stretch;
    align-items: stretch;
    margin:20px;
}

.buttons_for_my_relations{
	adding-top: 20px;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1em;
    grid-auto-rows: max-content;
}

.buttons_for_lines{
	adding-top: 20px;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1em;
    grid-auto-rows: max-content;
}

.buttons_for_all_stations{
	grid-column: 4/4;
	adding-top: 20px;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1em;
    grid-auto-rows: max-content;
 
}

.details_information_for_tempalte{
	border: solid; 
	border-color:#008bfc;
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-gap:1em;
	padding-top:50px;
}
.text_for_details_of_template{
	grid-column: 1/3; 
	text-align: center;
}

@media only screen and (max-width:602px) {
	.template_add_edit{
	    grid-template-columns: 1fr;
	}
	.buttons_for_all_stations{
		grid-column: unset;	 
	}
	.buttons_for_my_relations{
		grid-row: 2;
	}
	.buttons_for_lines{
		grid-row: 4;
	}
	
	.details_information_for_tempalte{
		grid-template-columns:1fr;
	}
	.text_for_details_of_template{
		grid-column: unset; 
		text-align: center;
	}
	
}
.image_for_plastic_stick {
    position: fixed;
    top: 0;
}