@keyframes swing {
    0% {
      transform: rotate(0deg);
    }
    10% {
      transform: rotate(10deg);
    }
    30% {
      transform: rotate(0deg);
    }
    40% {
      transform: rotate(-10deg);
    }
    50% {
      transform: rotate(0deg);
    }
    60% {
      transform: rotate(5deg);
    }
    70% {
      transform: rotate(0deg);
    }
    80% {
      transform: rotate(-5deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }

  :root {
    --portal-building-color: #73A5CA;
    --portal-dismantle-color: #E87F24;
    --portal-building-bg-soft: rgba(115, 165, 202, 0.12);
    --portal-dismantle-bg-soft: rgba(232, 127, 36, 0.12);
  }

  .portal-color-building { color: var(--portal-building-color) !important; }
  .portal-color-dismantle { color: var(--portal-dismantle-color) !important; }
  .portal-forklift-fair-big {
    width: 1.35em !important;
    height: 1.35em !important;
    vertical-align: -0.12em;
  }
  .portal-bg-building-soft { background-color: var(--portal-building-bg-soft) !important; }
  .portal-bg-dismantle-soft { background-color: var(--portal-dismantle-bg-soft) !important; }
  .portal-badge-building-solid {
    background-color: var(--portal-building-color) !important;
    color: #fff !important;
  }
  .portal-badge-dismantle-solid {
    background-color: var(--portal-dismantle-color) !important;
    color: #fff !important;
  }
  .portal-border-building { border-color: var(--portal-building-color) !important; }
  .portal-border-dismantle { border-color: var(--portal-dismantle-color) !important; }

  .js-fair-vehicle-toggle-btn:focus,
  .js-fair-vehicle-toggle-btn:active,
  .js-fair-vehicle-toggle-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

  .portal-fair-middle-toggle-btn {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
  }

  .portal-fair-middle-toggle-btn-build { margin-left: 10px; }
  .portal-fair-middle-toggle-btn-dismantle { margin-left: 10px; margin-right: 0; }

  .portal-fair-middle-truck-wrap-build {
    position: relative;
    display: inline-block;
    margin-right: 2px;
  }

  .portal-fair-middle-truck-wrap-dismantle {
    position: relative;
    display: inline-block;
    margin-right: 2px;
  }

  .portal-fair-middle-truck-icon-build { color: var(--portal-building-color); }
  .portal-fair-middle-truck-icon-dismantle { color: var(--portal-dismantle-color); transform: scaleX(-1); }

  .portal-fair-middle-hotel-wrap {
    position: relative;
    display: inline-block;
  }

  .portal-fair-middle-hotel-icon-build { color: var(--portal-building-color); }
  .portal-fair-middle-hotel-icon-dismantle { color: var(--portal-dismantle-color); }

  .portal-fair-middle-hotel-icon-build-half {
    background: linear-gradient(135deg, var(--portal-building-color) 50%, #9aa0a6 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .portal-fair-middle-hotel-icon-dismantle-half {
    background: linear-gradient(135deg, var(--portal-dismantle-color) 50%, #9aa0a6 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .portal-fair-middle-hotel-pending-badge {
    position: absolute;
    top: -5px;
    right: -7px;
    min-width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #8d949b;
    color: #fff;
    font-size: 8px;
    line-height: 12px;
    text-align: center;
    font-weight: 700;
    padding: 0 2px;
  }

  .portal-fair-middle-count-build {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #2f2f2f;
    line-height: 1;
  }

  .portal-fair-middle-count-dismantle {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #2f2f2f;
    line-height: 1;
  }

  .portal-fair-caption-cell { padding: 2px 4px; }
  .portal-fair-caption-text {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .portal-fair-caption-text-narrow {
    display: inline-block;
    padding: 0 4px;
    line-height: 1.1;
  }
  .portal-fair-caption-text-build { color: var(--portal-building-color); }
  .portal-fair-caption-text-dismantle { color: var(--portal-dismantle-color); }

  .portal-fair-vehicle-mobile-row {
    padding: 4px 2px;
    line-height: 1.2;
  }

  .portal-fair-vehicle-mobile-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }

  .portal-fair-vehicle-mobile-col-left {
    min-width: 0;
  }

  .portal-fair-vehicle-mobile-col-right {
    text-align: right;
    white-space: nowrap;
  }

  .portal-fair-vehicle-mobile-line {
    margin-bottom: 2px;
  }

  .portal-link-plain { text-decoration: none; }
  .portal-btn-plain-compact { border: none; background: none; padding: 2px; }
  .portal-icon-mirror-x { transform: scaleX(-1); }
  .portal-fair-action-group { color: #fff; }
  .portal-fair-add-icon-left { margin-left: 6px; }

  .portal-vehicle-select-narrow .form-control {
    width: 70%;
    min-width: 240px;
  }

  .portal-vehicle-select-wide .form-control {
    width: 130%;
    min-width: 240px;
    max-width: none;
  }

  .portal-vehicle-select-narrow .custom-vehicle-picker {
    width: 70%;
    min-width: 240px;
  }

  .portal-vehicle-select-wide .custom-vehicle-picker {
    width: 130%;
    min-width: 240px;
    max-width: none;
  }

  .portal-vehicle-select-narrow .select2-container {
    width: 70% !important;
    min-width: 240px;
  }

  .portal-vehicle-select-wide .select2-container {
    width: 130% !important;
    min-width: 240px;
    max-width: none;
  }

  .table .portal-vehicle-select-wide .form-control,
  .table .portal-vehicle-select-wide .custom-vehicle-picker,
  .table .portal-vehicle-select-wide .select2-container {
    width: 100% !important;
    min-width: 0;
  }

  .portal-add-vehicles-table td.portal-add-vehicles-select-cell {
    padding-left: 0;
    padding-right: .25rem;
    vertical-align: top;
  }

  .portal-add-vehicles-table {
    width: 100%;
    table-layout: fixed;
  }

  .portal-add-vehicles-table .portal-add-vehicles-col-vehicle { width: 34%; }
  .portal-add-vehicles-table .portal-add-vehicles-col-driver1 { width: 19%; }
  .portal-add-vehicles-table .portal-add-vehicles-col-driver2 { width: 19%; }
  .portal-add-vehicles-table .portal-add-vehicles-col-date { width: 12%; }
  .portal-add-vehicles-table .portal-add-vehicles-col-time { width: 10%; }
  .portal-add-vehicles-table .portal-add-vehicles-col-edit { width: 6%; }

  .portal-add-vehicles-table .portal-vehicle-select-narrow .form-control,
  .portal-add-vehicles-table .portal-vehicle-select-narrow .custom-vehicle-picker,
  .portal-add-vehicles-table .portal-vehicle-select-narrow .select2-container {
    width: 100% !important;
    min-width: 0;
  }

  .portal-add-vehicles-table .portal-add-vehicles-col-date .form-control,
  .portal-add-vehicles-table .portal-add-vehicles-col-time .form-control {
    min-width: 0;
  }

  #note.portal-vehicle-note-large {
    min-height: 130px;
  }

  .polling-phase-title {
    margin-bottom: 12px;
    font-size: 28px;
  }
  .polling-phase-title-right { text-align: right; }
  .polling-phase-badge {
    font-size: 28px;
    padding: 10px 18px;
    color: #2f2f2f;
  }
  .polling-phase-badge-build { background-color: var(--portal-building-color); }
  .polling-phase-badge-dismantle { background-color: var(--portal-dismantle-color); }
  .polling-time-badge-build { background-color: var(--portal-building-color); color: #2f2f2f; }
  .polling-time-badge-dismantle { background-color: var(--portal-dismantle-color); color: #2f2f2f; }
  .polling-icon-mirror { transform: scaleX(-1); display: inline-block; }

  .dashboard-fair-vehicle-modal-dialog {
    max-width: 96vw;
    height: 96vh;
    margin: 2vh auto;
  }

  .dashboard-fair-vehicle-modal-body {
    height: calc(96vh - 64px);
    overflow: auto;
  }

  .fair-vehicle-modal-dialog {
    max-width: 96vw;
    margin: 2vh auto;
  }

  .sidebar-footer-icon-muted {
    color: grey;
  }

  .notification-topbar-nav-item {
    position: relative;
  }

  .notification-bell-anchor {
    position: relative;
  }

  .notification-count-badge {
    position: absolute;
    display: none;
    font-size: 8px;
    background-color: #dc3545;
    color: #fff;
    padding: 1px 3px;
    border-radius: 8px;
    font-weight: 700;
    min-width: 14px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    line-height: 1;
  }

  .notification-count-badge--sidebar {
    top: -6px;
    right: -16px;
  }

  .notification-count-badge--topbar {
    top: 2px;
    right: -6px;
  }

  .notification-panel {
    display: none;
    width: 360px;
    max-height: 380px;
    overflow: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  }

  .notification-panel--sidebar {
    position: absolute;
    bottom: 48px;
    left: 8px;
    width: 330px;
    max-height: 360px;
    z-index: 1000;
  }

  .notification-panel--topbar {
    position: fixed;
    right: 12px;
    top: 62px;
    z-index: 1200;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 74px);
  }

  .notification-panel-header {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .notification-panel-title {
    font-size: 13px;
    color: #222;
  }

  .notification-panel-read-all {
    font-size: 12px;
  }

  .notification-panel-read-all--disabled,
  .notification-panel-read-all:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    text-decoration: none;
  }

  .notification-list {
    padding: 0;
    margin: 0;
  }

  .notification-empty,
  .notification-error {
    padding: 12px;
    font-size: 12px;
  }

  .notification-empty {
    color: #777;
  }

  .notification-error {
    color: #a00;
  }

  .notification-item {
    display: block;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: #222;
    border-left: 4px solid transparent;
    transition: background-color 0.2s ease, opacity 0.2s ease;
  }

  .notification-item--read {
    background: #f9f9f9;
    opacity: 0.7;
    border-left-color: transparent;
  }

  .notification-item--unread {
    background: #e8f4fd;
    opacity: 1;
    border-left-color: #0066cc;
    font-weight: 500;
  }

  .notification-item-title {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 2px;
  }

  .notification-title-document-review {
    color: #d93636;
    font-weight: 700;
  }

  .notification-item--unread .notification-title-document-review {
    color: #d42121;
  }

  .notification-title-accessory-confirmed {
    color: #1f9d5a;
    font-weight: 700;
  }

  .notification-item--unread .notification-title-accessory-confirmed {
    color: #18834b;
  }

  .notification-title-hotel-request {
    color: #d85ab5;
    font-weight: 700;
  }

  .notification-item--unread .notification-title-hotel-request {
    color: #c13f9d;
  }

  .notification-item-message {
    font-size: 12px;
    color: #555;
  }

  .notification-text-highlight {
    font-weight: 700;
    color: inherit;
  }

  .notification-item-time {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
  }

  .notification-view-all {
    display: block;
    padding: 9px 12px;
    text-align: center;
    font-size: 12px;
    color: #0066cc;
    text-decoration: none;
    border-top: 1px solid #eee;
    background: #fafafa;
  }

  .notification-view-all:hover {
    background: #f0f4ff;
    text-decoration: underline;
  }

  .notifications-page-wrap {
    padding-top: 28px;
  }

  .notification-page-row .js-notification-select {
    width: 15px;
    height: 15px;
    cursor: pointer;
  }

  #fairVehicleModalContent .portal-vehicle-select-narrow .form-control,
  #fairVehicleModalContent .portal-vehicle-select-narrow .custom-vehicle-picker,
  #fairVehicleModalContent .portal-vehicle-select-narrow .select2-container,
  #dashboardFairVehicleModalContent .portal-vehicle-select-narrow .form-control,
  #dashboardFairVehicleModalContent .portal-vehicle-select-narrow .custom-vehicle-picker,
  #dashboardFairVehicleModalContent .portal-vehicle-select-narrow .select2-container {
    width: 100% !important;
    min-width: 0;
  }

  .custom-vehicle-picker {
    position: relative;
  }

  .custom-vehicle-picker .custom-vehicle-trigger {
    cursor: pointer;
    background-color: #fff;
    min-height: calc(1.5em + .75rem + 2px);
  }

  .custom-vehicle-picker .custom-vehicle-trigger .custom-vehicle-placeholder {
    color: #6c757d;
  }

  .custom-vehicle-picker .custom-vehicle-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 1065;
    border: 1px solid #ced4da;
    background: #fff;
    border-radius: .25rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    display: none;
  }

  .custom-vehicle-picker.is-open .custom-vehicle-dropdown {
    display: block;
  }

  .custom-vehicle-picker .custom-vehicle-search {
    border: 0;
    border-bottom: 1px solid #e9ecef;
    border-radius: 0;
  }

  .custom-vehicle-picker .custom-vehicle-options {
    max-height: 220px;
    overflow: auto;
  }

  .custom-vehicle-picker .custom-vehicle-option {
    width: 100%;
    text-align: left;
    border: 0;
    background: #fff;
    padding: .45rem .75rem;
  }

  .custom-vehicle-picker .custom-vehicle-option:hover,
  .custom-vehicle-picker .custom-vehicle-option.is-active {
    background: #f1f3f5;
  }

  #dashboardFairVehicleModal .modal-content {
    height: 96vh;
  }

  #dashboardFairVehicleModalContent .js-modal-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: #fff;
    border-top: 1px solid #dee2e6;
    padding: .75rem 0 0;
    margin-top: 1rem;
  }

  @keyframes sonar {
    0% {
      transform: scale(0.9);
      opacity: 1;
    }
    100% {
      transform: scale(2);
      opacity: 0;
    }
  }

  .hithere {
    animation: hithere 1s ease infinite;
  }
  @keyframes hithere {
    30% { transform: scale(1.2); }
    40%, 60% { transform: rotate(-20deg) scale(1.2); }
    50% { transform: rotate(20deg) scale(1.2); }
    70% { transform: rotate(0deg) scale(1.2); }
    100% { transform: scale(1); }
  }

  .bounce {
    animation: bounce 2s ease infinite;
  }
  @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
      40% {transform: translateY(-30px);}
      60% {transform: translateY(-15px);}
  }

  .flip {
	backface-visibility: visible !important;
	animation: flip 2s ease infinite;
}
@keyframes flip {
	0% {
		transform: perspective(400px) rotateY(0);
		animation-timing-function: ease-out;
	}
	40% {
		transform: perspective(400px) translateZ(150px) rotateY(170deg);
		animation-timing-function: ease-out;
	}
	50% {
		transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
		animation-timing-function: ease-in;
	}
	80% {
		transform: perspective(400px) rotateY(360deg) scale(.95);
		animation-timing-function: ease-in;
	}
	100% {
		transform: perspective(400px) scale(1);
		animation-timing-function: ease-in;
	}
}

  body {
    font-size: 1.0rem;
  }

  .portal-person-badge {
    display: inline-block;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  .portal-person-badge-short {
    max-width: 115px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .portal-person-badge-long {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .page-wrapper .sidebar-wrapper,
  .sidebar-wrapper .sidebar-brand > a,
  .sidebar-wrapper .sidebar-dropdown > a:after,
  .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before,
  .sidebar-wrapper ul li a i,
  .page-wrapper .page-content,
  .sidebar-wrapper .sidebar-search input.search-menu,
  .sidebar-wrapper .sidebar-search .input-group-text,
  .sidebar-wrapper .sidebar-menu ul li a,
  #show-sidebar,
  #close-sidebar {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;

  }

  .head-title {
    font-family: 'Arial';
    font-weight:950;
    font-size: 13px;
    font-style: bold;
    line-height: 1.2em;
}

.head-text {
    font-family: 'Arial';
    font-weight:500;
    font-size: 14px;
    line-height: 1.2em;
}
.box {
  width:90px;
  height:70px;
  background: #DDCA00;
  margin:10px 0 0 0px;
  }

  .box1 {
    width:130px;
    height:30px;
    background: white;
    margin:5px 0 0 0px;
    }
    .box1 .s1-part-1a {
        overflow:hidden;
        float:left;
        width:20px;
        height:10px;
        margin:0px 0px 0px 0px;
        background:#6c757d;
        }
        .box1 .s1-part-1b {
            overflow:hidden;
            float:left;
            width:10px;
            height:10px;
            margin:0px 0px 0px 20px;
            background:#6c757d;
            }
            .box1 .s1-part-1c {
                overflow:hidden;
                float:left;
                width:20px;
                height:10px;
                margin:0px 0px 0px 30px;
                background:#6c757d;
                }
                .box1 .s1-part-1d {
                    overflow:hidden;
                    float:left;
                    width:10px;
                    height:10px;
                    margin:0px 0px 0px 20px;
                    background:#6c757d;
                    }

    .box1 .s1-part-2a {
        overflow:hidden;
        float:left;
        width:20px;
        height:10px;
        margin:0px 0px 0px 0px;
        background:#6c757d;
        }
    .box1 .s1-part-2b {
        overflow:hidden;
        float:left;
        width:20px;
        height:10px;
        margin:0px 0px 0px 10px;
        background:#6c757d;
        }
        .box1 .s1-part-2c {
            overflow:hidden;
            float:left;
            width:10px;
            height:10px;
            margin:0px 0px 0px 10px;
            background:#6c757d;
            }
            .box1 .s1-part-2d {
                overflow:hidden;
                float:left;
                width:20px;
                height:10px;
                margin:0px 0px 0px 10px;
                background:#6c757d;
                }
                .box1 .s1-part-2e {
                    overflow:hidden;
                    float:left;
                    width:20px;
                    height:10px;
                    margin:0px 0px 0px 10px;
                    background:#6c757d;
                    }

        .box1 .s1-part-3a {
            overflow:hidden;
            float:left;
            width:10px;
            height:10px;
            margin:0px 0px 0px 0px;
            background:#6c757d;
            }
        .box1 .s1-part-3b {
            overflow:hidden;
            float:left;
            width:20px;
            height:10px;
            margin:0px 0px 0px 20px;
            background:#6c757d;
            }
            .box1 .s1-part-3c {
                overflow:hidden;
                float:left;
                width:10px;
                height:10px;
                margin:0px 0px 0px 30px;
                background:#6c757d;
                }
                .box1 .s1-part-3d {
                    overflow:hidden;
                    float:left;
                    width:20px;
                    height:10px;
                    margin:0px 0px 0px 20px;
                    background:#6c757d;
                    }


  .box .s-part-1a {
  overflow:hidden;
  float:left;
  width:10px;
  height:10px;
  margin:0px 0 0 0px;
  background:#f8fafc;
  }
  .box .s-part-1b {
  overflow:hidden;
  float:left;
  width:60px;
  height:10px;
  margin:0 0px 0px 20px;
  background:#f8fafc;
  }

  .box .s-part-2a {
  overflow:hidden;
  float:left;
  width:10px;
  height:10px;
  margin:0 10px 0 0px;
  background:#f8fafc;
  }
  .box .s-part-2b {
  overflow:hidden;
  float:left;
  width:70px;
  height:10px;
  margin:0 0px 00px 00px;
  background:#f8fafc;
  }
  .box .s-part-3a {
  overflow:hidden;
  float:left;
  width:10px;
  height:10px;
  margin:0 0px 0px 20px;
  background:#f8fafc;
  }
  .box .s-part-3b {
  overflow:hidden;
  float:left;
  width:30px;
  height:10px;
  margin:0px 0px 0px 30px;
  background:#f8fafc;
  }

  .box .s-part-4a {
  overflow:hidden;
  float:left;
  width:30px;
  height:10px;
  margin:0 0px 0px 0px;
  background:#f8fafc;
  }
  .box .s-part-4b {
  overflow:hidden;
  float:left;
  width:10px;
  height:10px;
  margin:0px 0px 0px 10px;
  background:#f8fafc;
  }
  .box .s-part-4c {
  overflow:hidden;
  float:left;
  width:30px;
  height:10px;
  margin:0px 0px 0px 10px;
  background:#f8fafc;
  }

  .box .s-part-5a {
  overflow:hidden;
  float:left;
  width:30px;
  height:10px;
  margin:0 0px 0px 0px;
  background:#f8fafc;
  }
  .box .s-part-5b {
  overflow:hidden;
  float:left;
  width:10px;
  height:10px;
  margin:0px 0px 0px 30px;
  background:#f8fafc;
  }

  .box .s-part-6a {
  overflow:hidden;
  float:left;
  width:70px;
  height:10px;
  margin:0 0px 0px 0px;
  background:#f8fafc;
  }
  .box .s-part-6b {
  overflow:hidden;
  float:left;
  width:10px;
  height:10px;
  margin:0px 0px 0px 10px;
  background:#f8fafc;
  }

  .box .s-part-7a {
  overflow:hidden;
  float:left;
  width:60px;
  height:10px;
  margin:0 0px 0px 0px;
  background:#f8fafc;
  }
  .box .s-part-7b {
  overflow:hidden;
  float:left;
  width:10px;
  height:10px;
  margin:0px 0px 0px 20px;
  background:#f8fafc;
  }
  .card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
  }



  /* Add some padding inside the card container */
  .container {
    padding: 2px 16px;
  }

  .vertical {
    transform: rotate(90deg);
    transform-origin: left top 0;
    float: left;
    background-color: brown;
    color: white;
    font-style: bold;
    }

  #portal-tab  {
    color : white;
    background-color: #428bca;
    padding : 5px 15px;
  }

/* Thumbnail Image hover */

.zoom {
    transition: transform .2s;
    width: 40px;
    height: 40px;

  }

  .zoom:hover {
    /* position: fixed;
    left: 50%;
    top: 50%; */
    -ms-transform: scale(6); /*IE 9 */
    -webkit-transform: scale(6); /* Safari 3-8 */
    transform: scale(6);
  }

/* Graphics statuses */

.circle
{
    height: 12px;
    width: 12px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    top: 4px;
    left: 0px;
}

.badge-1
{
    background-color: #B5DDD1!important;
}

.badge-2
{
    background-color: #D7E7A9 !important;
}

.badge-3
{
    background-color: #D3C0F9!important;
}

.badge-4
{
    background-color: #F99A9C!important;
}
.badge-5
{
    background-color: #FDBCCF!important;
}
.graphic-0
{
    background-color: red;
}

.graphic-1
{
    background-color: limegreen;
}

.graphic-2
{
    background-color: orange;
}

.graphic-3
{
    background-color: none;
}
 /* Portal Colors */

.les
{
    background-color: #795548;
}
.octanorm
{
    background-color: #9e9d24;
}
.maxima
{
    background-color: #01579b;
}
.traverza
{
    background-color: #546e7a;
}
.ostalo
{
    background-color: rgba(0, 150, 136, 0.7);
}


  /* Portal Settings */

  .nolink {
    color:inherit;
    text-decoration: none;
   }

  .breadcrumb {
    margin-top: 12px;
}

.portal-elipse {
    width: 20px;
    height: 25px;
    border-radius: 50%;
    border-color: black;
  }

  .portal-text {
    text-align: center;

  }



/* Centered text */
.portal-tablica {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: x-large;
  }
.portal-dkv {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: small;
  }



.portal-unconfirmed {
    background-color: #ffffff;
    opacity: 1.0;
    background: repeating-linear-gradient( -45deg, #F2F2FF, #F2F2FF 6px, #ffffff 6px, #ffffff 10px );
}
.portal-canceled {
    background-color: #ffffff;
    opacity: 1.0;
    background: repeating-linear-gradient( 45deg, #fcd2dc, #fcd2dc 6px, #ffffff 6px, #ffffff 10px ) !important;
}

.portal-table
{
    font-size: 13px;
}

/* No borders in Portal header */

.portal-noBorder thead > tr > td,
.portal-noBorder thead > tr > th{
    border: none;
}

.portal-fnt10
{
    font-size: 10px;
}

.portal-fnt{
    font-size: 14px;
}



.portal-hdr{
    background:#5ba0d0 !important;
    color: white;
}


.portal-build
{
    /* background:#CDFFA5; */
    border-radius: 5px;
    background: linear-gradient(to right,  #33cc33 0%,#33cc33 8px,#f6f6f6 8px,#f6f6f6 100%);
    color: black;

}

.portal-fair{
    /* background: #A5D2FF; */
    border-radius: 5px;
    background: linear-gradient(to right,  #80bfff 0%,#80bfff 8px,#f6f6f6 8px,#f6f6f6 100%);
    color: black;
}

.portal-fair-middle{
    background: linear-gradient(to right,  #80bfff 0%,#80bfff 8px,#f6f6f6 8px,#f6f6f6 100%);
    color: black;
}

.portal-dismantle{
    /* background: #FFA5A5; */
    border-radius: 5px;
    background: linear-gradient(to right, #ff8080 0%,#ff8080 8px,#f6f6f6 8px,#f6f6f6 100%);
    color: black;

}

.tape-square {
    height: 50px;
    width: 30px;
  }

.portal-striped {
      background-color: #5ba0d0 !important;
}

.badge-portal-counter {
    background-color: #5ba0d0 !important;
    color: white;
}

.badge-portal-counter-pending {
    background-color: red !important;
    color: white;
}

.portal-1{
    /* background-color: #FFA5A5; */
    border-radius: 5px 0 0 0px;
    background: linear-gradient(to right, #ff8080 0%,#ff8080 8px,#ff8080 60%,#5ba0d0 100%);
}

.portal-2{
    background-color: #e9ecef;
}

.portal-fair-top{
    /* border-radius: 10px; */
    border-radius: 5px 0 0px 0px;
     /* background: linear-gradient(to right, #5ba0d0 0%,#5ba0d0 8px,#b0d1e8 8px,#ffffff); */

    /* background-color: #5ba0d0; */
    color: white;
    min-width: 100%;
}

.portal-3A{
    border-radius: 5px;
    /* border: 2px solid black; */
    /* border-radius: 20px 20px 20px 20px; */
    /* background: ; */
    /* background: linear-gradient(to right, #5ba0d0 0%,#5ba0d0 10px,#b0d1e8 10px,#b0d1e8 100%); */

    color: white;
}
.portal-fair-right{
    padding-top: -50px;
    border-radius: 0px 5px 0px 0px;
}

.portal-fair-bottom{
    border-radius: 5px;
    border-radius: 0px 0 0 5px;
}

.portal-color-0{
    background: linear-gradient(to right, #7595b2 0%, #7595b2 90%,white 8px,white 100%);
    /* background-color: #5ba0d0; */
}
.portal-fair-grad-0{
    background: linear-gradient(to right, #7595b2 0%,#7595b2 8px,white 8px,white 100%);
    /* #6c757d  #ddca04*/

}
.shape {
    position: absolute;

 }
#trapezoid {
    width: 120px;
    height: 0;
     border-bottom: 60px solid;
     border-left: 30px solid transparent;
    /* margin-top: 20px; */
    /* margin-bottom: 10px; */
    right: 0px;
 }

.portal-color-1{
    background-color: #17a155;
}

.portal-fair-grad-1{
    background: linear-gradient(to right, #17a155 0%,#17a155 8px,white 8px,white 100%);
}

.portal-color-2{
    background-color: #e83a3a;
}

.portal-fair-grad-2{
    background: linear-gradient(to right, #e83a3a 0%,#e83a3a 8px,white 8px,white 100%);
}

.portal-color-3{
    background-color: #d67d1e;
}

.portal-fair-grad-3{
    background: linear-gradient(to right, #d67d1e 0%,#d67d1e 8px,white 8px,white 100%);
}

.portal-color-4{
    background-color: #282828;
}

.portal-color-5{
    background-color: #858786;
}

.portal-color-6{
    background-color: #2945d2;
}


.portalBottom-1{
    /* background-color: #FFA5A5; */
    border-radius: 0px 0 0 5px;
    background: linear-gradient(to right, #ff8080 0%,#ff8080 8px,white 8px,white 100%);
}

.portalBottom-2{
    background-color: #e9ecef;
}



.portal-success{
    /* background-color: #FFA5A5; */
    /* border-radius: 0px 5px 5px 0px; */
    background: linear-gradient(to right,  #33cc33 0%,#33cc33 5px,#D5F5E3  5px, #ffffff);

}


.portal-danger{

    /* background-color: #FFA5A5; */
    /* border-radius: 0px 5px 5px 0px; */
    background: linear-gradient(to right, #ff8080 0%,#ff8080 5px, #ffe6e6 5px, #ffffff);

}

.portal-warning{

    /* background-color: #FFA5A5; */
    /* border-radius: 0px 5px 5px 0px; */
    background: linear-gradient(to right, #ffc107 0%,#ffc107 5px, #fffbe6 5px, #ffffff);

}


.portal-0{
    /* background-color: #FFA5A5; */
    /* border-radius: 0px 0 0 0px;
    background: linear-gradient(to right, #ff8080 0%,#ff8080 5px); */
    background: linear-gradient(to right, #5ba0d0 0%,#5ba0d0 8px,white 8px,white 100%);
}

.portal-NC{
    background-color: #C7F6B6;
}

.portal-DC{
    background-color: rgb(255, 231, 165);
}
.portal-NP{
    background-color: #FFA5A5;
}

.portal-icon{
    color: #5ba0d0;
}
.portal-icons {
    color: #6c757d !important;
    border: none;
    background: none;
    padding: 0;
}

.portal-inline { float:left; }

.icon
{
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    color: #6c757d;
    position: relative;
    font-size: 20px;
    top: -1px;
    border: none;
    background: none;
    padding: 0;

}

.icon, .edit-small:before
{
    content: "\f14b";
}

.icon .show-small::before
{
    content: "\f022";
}

.badge.offer-1 {
    background-color: grey;
}

.badge.offer-0 {
    animation: blink-animation 2s steps(5, start) infinite;
        -webkit-animation: blink-animation 1s steps(5, start) infinite;
        background-color: rgb(106, 167, 96);
}
@keyframes blink {
    to {
        visibility: hidden;
      }
}
@-webkit-keyframes blink-animation {
    to {
      visibility: hidden;
    }
}
@keyframes blink-animation {
    to {
      visibility: hidden;
    }
}
.portal-tabs {
    top: -20px !important;
    left: 25px;
}

.portal-add {
    position: relative;
    font-size: 32px;
    top: 2px;

}

/*replace the content value with the
corresponding value from the list below*/

.portal-back:before {
    content: "\f191";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    color: #6c757d;
    font-size: 32px;
    position: absolute;
    top: 2px;
    left: 15px;
}

.portal-map {
    position: relative;
    left: 40px;
}

.portal-add:before {
    content: "\f0fe";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    color: #6c757d;
    position: absolute;
    font-size: 32px;
    top: 2px;
    right: 30px;
}

  .portal-card-header-action {
    margin-top: 0 !important;
  }

  .portal-card-header-add-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    text-decoration: none;
  }

  .portal-card-header-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    line-height: 1;
  }

  .portal-card-header-add-link .portal-add.portal-tabs {
    top: auto !important;
    left: auto;
  }

  .portal-card-header-add-btn .portal-add.portal-tabs {
    top: auto !important;
    left: auto;
  }

  .portal-card-header-add-link .portal-add.portal-tabs:before {
    position: static;
    top: auto;
    right: auto;
    display: block;
    line-height: 1;
  }

  .portal-card-header-add-btn .portal-add.portal-tabs:before {
    position: static;
    top: auto;
    right: auto;
    display: block;
    line-height: 1;
  }
.portal-second-add:before {
    content: "\f0fe";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    color: #6c757d;
    position: absolute;
    font-size: 32px;
    top: 10px;
    right: 65px;
    border: none;
    background: none;
    padding: 0;
    text-decoration:none;
}


.portal-second-delete:before {
    content: "\f146";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    color: #6c757d;
    position: absolute;
    font-size: 32px;
    top: 10px;
    right: 65px;
    border: none;
    background: none;
    padding: 0;
    text-decoration:none;
}

.portal-edit {
    position: relative;
}

/*replace the content value with the
corresponding value from the list below*/

.portal-edit:before {
    content: "\f14b";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    color: #6c757d;
    position: absolute;
    font-size: 32px;
    top: 6px;
    right: 30px;
    border: none;
    background: none;
    padding: 0;
    text-decoration:none;
}

.portal-edit-small:before
{
    content: "\f14b";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    color: #6c757d;
    position: relative;
    font-size: 20px;
    top: -1px;
    border: none;
    background: none;
    padding: 0;
    text-decoration:none;
}


.portal-show-small:before
{
    content: "\f022";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    color: #6c757d;
    position: relative;
    font-size: 20px;
    top: -1px;
    border: none;
    background: none;
    padding: 0;
    text-decoration:none;
}

.portal-show-small-white:before
{
    content: "\f022";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    color: white;
    position: relative;
    font-size: 20px;
    top: -1px;
    border: none;
    background: none;
    padding: 0;
    text-decoration:none;
}
.portal-plus-small:before
{
    content: "\f0fe";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    color: #6c757d;
    position: relative;
    font-size: 20px;
    top: -1px;
    border: none;
    background: none;
    padding: 0;
    text-decoration:none;
}

.portal-delete-small:before
{
    content: "\f146";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    color: #6c757d;
    position: relative;
    font-size: 20px;
    top: -1px;
    border: none;
    background: none;
    padding: 0;
    text-decoration:none;
}

.portal-truck-plus-small:before
{
    content: "\f0f9";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    color: #6c757d;
    position: relative;
    font-size: 20px;
    top: -1px;
    border: none;
    background: none;
    padding: 0;
    text-decoration:none;
}

.portal-truck-plus-small-white:before
{
    content: "\f0f9";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    color: white;
    position: relative;
    font-size: 20px;
    top: -1px;
    border: none;
    background: none;
    padding: 0;
    text-decoration:none;
}

.portal-add-user-small:before
{
    content: "\f234";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    color: #6c757d;
    position: relative;
    font-size: 20px;
    top: -1px;
    border: none;
    background: none;
    padding: 0;
    text-decoration:none;
}





/* */


.portal-delete {
    position: relative;
}

/*replace the content value with the
corresponding value from the list below*/

.portal-delete:before {
    content: "\f146";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    color: #6c757d;
    position: absolute;
    font-size: 32px;
    top: -7px;
    right: 70px;
}


.portal-left:before {
    content: "\f191";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    color: #6c757d;
    position: absolute;
    font-size: 32px;
    top: -9px;
    left: 20px;
    padding-top: 6px;
}

.portal-right:before {
    content: "\f152";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    color: #6c757d;
    position: absolute;
    font-size: 32px;
    top: -9px;
    right: 20px;
    padding-top: 6px;
}

.portal-search:before {
    content: "\f151";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    color: #6c757d;
    position: absolute;
    font-size: 32px;
    top: -9px;
    right: 65px;
}

.portal-search:after {
    content: "\f150";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    color: #6c757d;
    position: absolute;
    font-size: 32px;
    top: -9px;
    right: 65px;
}



.portal-paral > span
{
    transform: skew(20deg);
}

.portal-settings {
    position: relative;
}

/*replace the content value with the
corresponding value from the list below*/

.portal-settings:before {
    content: "\f013";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    color: #6c757d;
    position: absolute;
    font-size: 32px;
    top: -9px;
    right: 32px;
}

.portal-badge-build-start{
    background:green;
    position:absolute;
    top: -10px;
    left: -10px;
    color: white;
    font-size: 10px;
 }
 .portal-badge-build-end{
    background:green;
    position:absolute;
    bottom: -10px;
    right: -10px;
    color: white;
    font-size: 10px;
 }
 .portal-badge-dismantle-start{
    background:#9F003D;
    position:absolute;
    top: -10px;
    left: -10px;
    color: white;
    font-size: 10px;
 }
 .portal-badge-dismantle-end{
    background:#9F003D;
    position:absolute;
    bottom: -10px;
    right: -10px;
    color: white;
    font-size: 10px;
 }

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
    background-color:#6c757d !important;
    border-color: #6c757d !important;

}

.page-link {
    color: #6c757d !important;
}
.active .page-link{
    color: white !important;
}

.directory-list, .directory-info-row .social-links {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.directory-list li {
    border-left: 3px solid #f1f2f7;
    display: table-cell;
    width: 1%;
}

.directory-list li a {
    display: block;
    padding: 8px 0;
    text-align: center;
    text-transform: uppercase;
    background: #fff;
    color: #7A7676;
    -moz-transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
    text-decoration: none;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}

.directory-info-row .thumb {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    height: auto;
    width: 175px;
    margin-right: 10px;
}

.directory-list li a:hover, .directory-info-row .social-links li a:hover {
    background: #ff6c60;
    color: #fff;
}

.directory-info-row {
    display: inline-block;
    width: 100%;
    margin-top: 20px;
}

.directory-info-row h4, .directory-info-row a {
    color: #424F63;
}

.h4, h4 {
    font-size: 18px;
}

.directory-info-row .social-links {
    display: inline-block;
    margin-bottom: 10px;
}

.directory-info-row .social-links li {
    display: inline-block;
}

ul li {
    list-style: none;
}

.directory-info-row .social-links li a {
    background: #EFF0F4;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    display: inline-block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    color: #7A7676;
}

.avatar {
    vertical-align: middle;
    object-fit: cover;
    width: 50px;
    height: 50px;
    border-radius: 10%;
  }

/* Card counter small */




  .card-counter{
    box-shadow: 6px 6px 5px #DADADA;
    margin: 5px;
    padding: 20px 10px;
    background-color: lightgray;
    height: 100px;
    border-radius: 5px;
    transition: .3s linear all;
  }

  .card-counter:hover{
    box-shadow: 4px 4px 20px #DADADA;
    transition: .3s linear all;
  }

  .card-counter.primary{
    background-color: #007bff !important;
    color: #FFF !important;
  }

  .card-counter.danger{
    background-color: #EC7063 !important;
    color: #FFF !important;
  }

  .card-counter.success{
    background-color: #66bb6a !important;
    color: #FFF !important;
  }

  .card-counter.info{
    background-color: #5ba0d0 !important;
    color: #FFF !important;
  }
  .card-counter.warning{
    background-color: #F4D03F !important;
    color: #FFF !important;
  }

  .card-counter i{
    position: absolute;
    font-size: 3em;
    top: 10px;
    left: 30px;
    color: white !important;
    opacity:1;

  }
  .card-counter .count-trash{
    position: absolute;
    right: 50px;
    top: 30px;
    font-size: 20px;
    display: block;
    color: #5ba0d0 !important;
    opacity: 0.5;
  }
  .card-counter .count-edit{
    position: absolute;
    right: 30px;
    top: 30px;
    font-size: 20px;
    display: block;
    color: #5ba0d0  !important;
    opacity: 0.5;
  }

  .card-counter .count-numbers{
    position: absolute;
    right: 30px;
    top: 70px;
    font-size: 20px;
    display: block;
  }
  .card-counter .count-name{
    position: absolute;
    right: 30px;
    top: 10px;
    font-size: 12px;
    display: block;
  }

  .card-counter .count-time{
    position: absolute;
    right: 30px;
    top: 40px;
    /* font-style: italic; */
    /* text-transform: capitalize; */
    /* opacity: 0.5; */
    display: block;
    font-size: 14px;
    color: white;
}
.card-counter .count-portal{
    position: absolute;
    right: 30px;
    top: 30px;
    display: block;
    font-size: 14px;
    color: white !important;
}

  .portal-document-card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px; /* 5px rounded corners */
  }
/*
  .navbar-color {
    background-color:rgba(255, 255, 255, 0.9) !important;
} */
  /*
.breadcrumb {
    background-color: #a41f35;
}

.breadcrumb .active {
    color: #DDDDDD;
}

.breadcrumb li a  {
    color: white;
}
*/
/* Portal Settings */

/*----------------page-wrapper----------------*/

  .page-wrapper {
    height: 100vh;
  }

  .page-wrapper .theme {
    width: 40px;
    height: 40px;
    display: inline-block;
    border-radius: 4px;
    margin: 2px;
  }

  .page-wrapper .theme.chiller-theme {
    background: #1e2229;
  }
  #container { display:block; }

  @media only screen and (orientation:portrait){

    #container {

      height: 100vw;

      -webkit-transform: rotate(90deg);

      -moz-transform: rotate(90deg);

      -o-transform: rotate(90deg);

      -ms-transform: rotate(90deg);

      transform: rotate(90deg);

    }

  }

  @media only screen and (orientation:landscape){

    #container {

       -webkit-transform: rotate(0deg);

       -moz-transform: rotate(0deg);

       -o-transform: rotate(0deg);

       -ms-transform: rotate(0deg);

       transform: rotate(0deg);

    }

  }





  /*----------------toggeled sidebar----------------*/
  @media screen and (min-width: 1100px) {/* Jaz sem dodal*/
  .page-wrapper.toggled .sidebar-wrapper {
    left: 0px;

  }
  .portal-main-text {
    font-size: 20px !important;
  }
}
  @media screen and (max-width: 1100px) {/* Jaz sem dodal*/
  .table tr, .table td{
    font-size: 90% !important;
  }
  .portal-main-text {
    font-size: 90% !important;
    margin-top: 6px;
  }

  /* .container-fluid{
    padding: 0px;
    } */
  }
  @media screen and (min-width: 1100px) {
    .page-wrapper.toggled .page-content {
      padding-left: 220px;
      /* background-color: gray; */
    }
  }
  /*----------------show sidebar button----------------*/

  #show-sidebar {
    position: fixed;
    left: 0;
    top: 81px;
    border-radius: 0 4px 4px 0px;
    width: 23px;
    height: 28px;
    transition-delay: 0.3s;
    z-index: 1000;
  }
  @media screen and (max-width: 1100px) {/* Jaz sem dodal*/
    .page-wrapper.toggled #show-sidebar {
      left: -40px; /* umakne hamburger ce je ekran manjsi od 1100px*/
    }
  }

  /*----------------sidebar-wrapper----------------*/

  .sidebar-wrapper {
    width: 220px;
    height: 100%;
    max-height: 100%;
    position: fixed;
    top: 0px; /* Jaz sem spremenil Default 0px*/
    left: -220px;
    z-index: 1000;
  }

  .sidebar-wrapper ul {
    list-style-type: none;
    padding: 0px;
    margin: 0;
  }

  .sidebar-wrapper a {
    text-decoration: none;
  }

  /*----------------sidebar-content----------------*/

  .sidebar-content {
    top: 70px;
    max-height: calc(100% - 30px);
    height: calc(100% - 30px);
    overflow-y: auto;
    position: relative;
  }

  .sidebar-content.desktop {
    overflow-y: hidden;
  }

  /*--------------------sidebar-brand----------------------*/

  .sidebar-wrapper .sidebar-brand {
    padding: 10px 20px;

    display: flex;
    align-items: center;
  }

  .sidebar-wrapper .sidebar-brand > a {
    text-transform: uppercase;
    font-weight: bold;
    flex-grow: 1;
  }

  .sidebar-wrapper .sidebar-brand #close-sidebar {
    cursor: pointer;
    font-size: 20px;
  }
  /*--------------------sidebar-header----------------------*/

  .sidebar-wrapper .sidebar-header {
    padding: 20px;
    overflow: hidden;
  }

  .sidebar-wrapper .sidebar-header .user-pic {
    float: left;
    width: 60px;
    padding: 2px;
    border-radius: 12px;
    margin-right: 15px;
    overflow: hidden;
  }

  .sidebar-wrapper .sidebar-header .user-pic img {
    object-fit: cover;
    height: 100%;
    width: 100%;
  }

  .sidebar-wrapper .sidebar-header .user-info {
    float: left;
  }

  .sidebar-wrapper .sidebar-header .user-info > span {
    display: block;
  }

  .sidebar-wrapper .sidebar-header .user-info .user-role {
    font-size: 12px;
  }

  .sidebar-wrapper .sidebar-header .user-info .user-status {
    font-size: 11px;
    margin-top: 4px;
  }

  .sidebar-wrapper .sidebar-header .user-info .user-status i {
    font-size: 8px;
    margin-right: 4px;
    color: #5cb85c;
  }

  /*-----------------------sidebar-search------------------------*/

  .sidebar-wrapper .sidebar-search > div {
    padding: 10px 20px;
  }

  /*----------------------sidebar-menu-------------------------*/

  .sidebar-wrapper .sidebar-menu {
    padding-bottom: 100px;
  }

  .sidebar-wrapper .sidebar-menu .header-menu span {
    font-weight: bold;
    font-size: 14px;
    padding: 15px 20px 5px 20px;
    display: inline-block;
  }

  .sidebar-wrapper .sidebar-menu ul li a {
    display: inline-block;
    width: 100%;
    text-decoration: none;
    position: relative;
    padding: 8px 30px 8px 20px;
  }

  .sidebar-wrapper .sidebar-menu ul li a i {
    margin-right: 10px;
    font-size: 12px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 4px;
  }

  .sidebar-wrapper .sidebar-menu ul li a:hover > i::before {
    display: inline-block;
    animation: swing ease-in-out 0.5s 1 alternate;
  }

  .sidebar-wrapper .sidebar-menu .sidebar-dropdown > a:after {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    content: "\f105";
    font-style: normal;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    background: 0 0;
    position: absolute;
    right: 15px;
    top: 14px;
  }

  .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul {
    padding: 5px 0;
  }

  .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li {
    padding-left: 25px;
    font-size: 13px;
  }

  .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before {
    content: "\f111";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 400;
    font-style: normal;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 10px;
    font-size: 8px;
  }

  .sidebar-wrapper .sidebar-menu ul li a span.label,
  .sidebar-wrapper .sidebar-menu ul li a span.badge {
    float: right;
    margin-top: 8px;
    margin-left: 5px;
  }

  .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .badge,
  .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .label {
    float: right;
    margin-top: 0px;
  }

  .sidebar-wrapper .sidebar-menu .sidebar-submenu {
    display: none;
  }

  .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after {
    transform: rotate(90deg);
    right: 17px;
  }

  /*--------------------------side-footer------------------------------*/

  .sidebar-footer {
    position: relative;
    width: 100%;
    bottom: 0px;
    display: flex;
  }

  .sidebar-footer > a {
    flex-grow: 1;
    text-align: center;
    height: 30px;
    line-height: 30px;
    position: relative;
  }

  .sidebar-footer > a .notification {
    position: absolute;
    top: 0;
  }

  .badge-sonar {
    display: inline-block;
    background: #980303;
    border-radius: 50%;
    height: 8px;
    width: 8px;
    position: absolute;
    top: 0;
  }

  .badge-sonar:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border: 2px solid #980303;
    opacity: 0;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    animation: sonar 1.5s infinite;
  }

  /*--------------------------page-content-----------------------------*/

  .page-wrapper .page-content {
    display: inline-block;
    width: 100%;
    padding-left: 0px;
    padding-top: 38px;
  }

  .page-wrapper .page-content > div {
    padding: 20px 10px 0px 10px;
    /* background-color: red; */
  }

  .page-wrapper .page-content .portal-breadcrumb-one {
    width:inherit;
    border-radius: 5px;
    padding-top: 9px;
    height: 50px;
    background-color: #e9ecef;
        padding-right: 10px;
        padding-left: 10px;

  }

  .portal-sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 58px;
        background-color: white;
        z-index: 999;
        padding-bottom: 12px;
        padding-top: 12px;
  }

  /* JA SAM IZKLJUČIO */
  .page-content {
    overflow-x: clip;
  }

  /*------scroll bar---------------------*/

  ::-webkit-scrollbar {
    width: 10px; /*-- default 5%  -*/
    height: 7px;
  }
  ::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
  }
  ::-webkit-scrollbar-thumb {
    background: #525965;
    border: 0px none #ffffff;
    border-radius: 0px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #525965;
  }
  ::-webkit-scrollbar-thumb:active {
    background: #525965;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
    border: 0px none #ffffff;
    border-radius: 50px;
  }
  ::-webkit-scrollbar-track:hover {
    background: transparent;
  }
  ::-webkit-scrollbar-track:active {
    background: transparent;
  }
  ::-webkit-scrollbar-corner {
    background: transparent;
  }


  /*-----------------------------chiller-theme-------------------------------------------------*/

  .chiller-theme .sidebar-wrapper {
      background: #31353D;
  }

  .chiller-theme .sidebar-wrapper .sidebar-header,
  .chiller-theme .sidebar-wrapper .sidebar-search,
  .chiller-theme .sidebar-wrapper .sidebar-menu {
      border-top: 1px solid #3a3f48;
  }

  .chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
  .chiller-theme .sidebar-wrapper .sidebar-search .input-group-text {
      border-color: transparent;
      box-shadow: none;
  }

  .chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-role,
  .chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-status,
  .chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
  .chiller-theme .sidebar-wrapper .sidebar-search .input-group-text,
  .chiller-theme .sidebar-wrapper .sidebar-brand>a,
  .chiller-theme .sidebar-wrapper .sidebar-menu ul li a,
  .chiller-theme .sidebar-footer>a {
      color: #818896;
  }

  .chiller-theme .sidebar-wrapper .sidebar-menu ul li:hover>a,
  .chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active>a,
  .chiller-theme .sidebar-wrapper .sidebar-header .user-info,
  .chiller-theme .sidebar-wrapper .sidebar-brand>a:hover,
  .chiller-theme .sidebar-footer>a:hover i {
      color: #b8bfce;
  }

  .page-wrapper.chiller-theme.toggled #close-sidebar {
      color: #bdbdbd;
  }

  .page-wrapper.chiller-theme.toggled #close-sidebar:hover {
      color: #ffffff;
  }

  .chiller-theme .sidebar-wrapper ul li:hover a i,
  .chiller-theme .sidebar-wrapper .sidebar-dropdown .sidebar-submenu li a:hover:before,
  .chiller-theme .sidebar-wrapper .sidebar-search input.search-menu:focus+span,
  .chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active a i {
      color: #16c7ff;
      text-shadow:0px 0px 10px rgba(22, 199, 255, 0.5);
  }

  .chiller-theme .sidebar-wrapper .sidebar-menu ul li a i,
  .chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown div,
  .chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
  .chiller-theme .sidebar-wrapper .sidebar-search .input-group-text {
      background: #3a3f48;
  }

  .chiller-theme .sidebar-wrapper .sidebar-menu .header-menu span {
      color: #6c7b88;
  }

  .chiller-theme .sidebar-footer {
      background: #3a3f48;
      /* box-shadow: 0px -1px 5px #282c33; */
      border-top: 1px solid #464a52;
  }

  .chiller-theme .sidebar-footer>a:first-child {
      border-left: none;
  }

  .chiller-theme .sidebar-footer>a:last-child {
      border-right: none;
  }


  /* NEW CODE */