/*Write your custom css in this file.*/

@font-face {
  font-family: 'Inter';
  src: url('Inter-Bold.eot');
  src: url('Inter-Bold.eot?#iefix') format('embedded-opentype'),
      url('Inter-Bold.woff2') format('woff2'),
      url('Inter-Bold.woff') format('woff'),
      url('Inter-Bold.ttf') format('truetype'),
      url('Inter-Bold.svg#Inter-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('Inter-Regular.eot');
  src: url('Inter-Regular.eot?#iefix') format('embedded-opentype'),
      url('Inter-Regular.woff2') format('woff2'),
      url('Inter-Regular.woff') format('woff'),
      url('Inter-Regular.ttf') format('truetype'),
      url('Inter-Regular.svg#Inter-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('Inter-Medium.eot');
  src: url('Inter-Medium.eot?#iefix') format('embedded-opentype'),
      url('Inter-Medium.woff2') format('woff2'),
      url('Inter-Medium.woff') format('woff'),
      url('Inter-Medium.ttf') format('truetype'),
      url('Inter-Medium.svg#Inter-Medium') format('svg');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('Inter-SemiBold.eot');
  src: url('Inter-SemiBold.eot?#iefix') format('embedded-opentype'),
      url('Inter-SemiBold.woff2') format('woff2'),
      url('Inter-SemiBold.woff') format('woff'),
      url('Inter-SemiBold.ttf') format('truetype'),
      url('Inter-SemiBold.svg#Inter-SemiBold') format('svg');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('Inter-Light.eot');
  src: url('Inter-Light.eot?#iefix') format('embedded-opentype'),
      url('Inter-Light.woff2') format('woff2'),
      url('Inter-Light.woff') format('woff'),
      url('Inter-Light.ttf') format('truetype'),
      url('Inter-Light.svg#Inter-Light') format('svg');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}



/* Fonts */
html, body {
  color: rgba(58,53,65,.87);
}
html, body, .page-container {
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .0094rem;
  hyphens: auto;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}
.widget-details span, .text-default, .nav-tabs.title li a {
  letter-spacing: 0.15px;
}
.page-title h1 {
  letter-spacing: 0.25px;
}
.sidebar {
  font-size: 16px;
}
.btn-light {
  font-weight: 300;
  color: #666;
}
.btn {
  -moz-osx-font-smoothing: auto;
}
.sorting {
  font-weight: 600;
}
td a {
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0px;
}
b, strong {
  font-weight: 600;
}
.bg-white .card-header {
  font-size: 1.4rem;
  font-weight: 500 !important;
}
.task-title-left strong {
    font-size: 1.3rem;
    font-weight: 400;
    color: #5A5FE0;
}
.bg-white .card-header {
  color: rgba(58,53,65,.87);
}
.sorting, .sorting_desc, .sorting_asc {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12.5px;
}

/* Default */
.form-signin {
  box-shadow: rgba(58, 53, 65, 0.05) 0px 2px 10px 0px !important;
  -webkit-box-shadow: rgba(58, 53, 65, 0.05) 0px 2px 10px 0px !important;
}

/* Hiddens */
[for="ssn"], #ssn {
  display: none;
}
[for="gender"], #gender_male, [for="gender_male"], #gender_female, [for="gender_female"], #gender_other, [for="gender_other"]  {
  display: none;
}
.card-header .feather.icon-16 {
  display: none;
}
.card-header .clickable .feather.icon-16 {
  display: unset;
}

/* Navbar */
.navbar-nav .nav-item #user-dropdown {
  padding: 4px 14px !important;
}
.navbar {
  padding: 0;
}
.navbar {
  --bs-navbar-color: rgba(0, 0, 0, 0.65);
  --bs-navbar-hover-color: rgba(0, 0, 0, 0.8);
}
.icon {
  width: 23px;
  height: 23px;
}
.feather.feather-menu.icon {
  width: 28px;
  height: 28px;
}
.navbar-nav .nav-link {
  padding: 11px 10px !important;
}
.nav-link:focus, .nav-link:hover {
  background-color: rgba(58, 53, 65, 0.04);
  border-radius: 50%;
}
#user-dropdown:hover {
  background-color: unset;
  border-radius: unset;
}
.avatar-xs {
  width: 35px;
  height: 35px;
}
.nav-tabs {
  background: transparent;
  border-bottom: none;
}

/* Sidebar */
.sidebar-brand {
  padding: 16px 38px 0 0;
}
.sidebar-menu li a {
  padding: 0.8rem 1.1rem;
  margin: 0 10px;
  border-radius: 8px;
}
.sidebar-menu li a {
  color: rgba(58, 53, 65, 0.87);
}
.sidebar-menu li a:hover, .sidebar-menu li a:focus {
  color: #383c40;
  background-color: #e6eaf4;
}
.sidebar-menu li.active > a {
  border-color: #787EFF;
  color: #fff;
  background-color: #787EFF;
}

/* Panels */


.bg-primary {
  background-color: #787EFF !important;
}

.widget-container .card {
  box-shadow: rgba(58, 53, 65, 0.15) 0px 2px 10px 0px !important;
  -webkit-box-shadow: rgba(58, 53, 65, 0.15) 0px 2px 10px 0px !important;
}
#js-clock-in-out .widget-container .card {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
.card.dashboard-icon-widget.clock-in-out-card {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
/*
.card {
  box-shadow: rgba(58, 53, 65, 0.15) 0px 2px 10px 0px !important;
  -webkit-box-shadow: rgba(58, 53, 65, 0.15) 0px 2px 10px 0px !important;
}
*/
.nav.nav-tabs.bg-white.title, .page-title {
  background: transparent !important;
}
html, body {
  background-size: contain !important;
}

.project-overview-widget .progress-outline .progress .progress-bar {
  background-color: rgba(86, 202, 0, 0.4) !important;
}
.project-overview-widget .progress-outline {
  border: 2px solid #56CA00;
}


.bg-success {
  background-color: #56CA00 !important;
}
.bg-info {
  background-color: #787EFF !important;
}
.bg-coral {
  background-color: #EA5B5C !important;
}
.text-warning {
 color: #FDB528 !important;
}
.text-danger {
  color: #f5325c !important;
}


.badge.bg-primary {
  background-color: rgb(102, 108, 255) !important;
  color: #fff;
}
.badge.bg-warning {
  background-color: rgba(255,180,0, 0.15) !important;
  color: rgb(253, 181, 40);
}
.badge.bg-danger.large {
  background-color: rgba(255, 77, 73, 0.15) !important;
  color: rgb(255, 77, 73) !important;
}

.card.bg-white .bg-success, .badge.bg-success {
  background-color: rgba(86,202,0,0.1) !important;
  color: rgb(86,202,0) !important;
}

/*
.badge {
  font-size: 13px;
  background: unset !important;
}
*/

del {
  color: #999;
}
ins {
  color: #787EFF;
}
.badge.rounded-pill.bg-primary {
  background-color: #EA5B5C !important;
}





/* Buttons */
.input-group .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-primary {
  border-color: #787EFF;
  background-color: #787EFF;
  box-shadow: rgba(76, 78, 100, 0.42) 0px 2px 4px -2px;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  border-color: rgb(90, 95, 224);
  color: #fff;
  background-color: rgb(90, 95, 224);
  box-shadow: rgba(76, 78, 100, 0.56) 0px 4px 8px -4px;
}
.btn-default {
  background-color: #fff;
  border: 1px solid #f2f4f6;
  color: #595959;
}
.btn-default:hover {
  background-color: #E6E6E6;
  border-color: #E6E6E6;
  box-shadow: rgba(76, 78, 100, 0.42) 0px 2px 4px -2px;
}
.btn-success {
  background: #56CA00;
  border-color: #56CA00;
  box-shadow: rgba(76, 78, 100, 0.42) 0px 2px 4px -2px;
}
.btn-success:hover {
  background: #56CA00;
  border-color: #56CA00;
  box-shadow: rgba(76, 78, 100, 0.56) 0px 4px 8px -4px;
}

/* Unic colors */

html, body {
  background-color: #F7F7F9;
  background: #F7F7F9;
}
#left-menu-toggle-mask {
  background-color: #F7F7F9;
}
.sidebar-brand {
  background-color: #F7F7F9;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
.sidebar {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background: #F7F7F9;
}
.navbar-custom, .sidebar-scroll, #pre-loader {
  background-color: #F7F7F9;
}
.shadow-sm {
  box-shadow: none !important;
}
a {
  color: #5A5FE0;
  text-decoration: none;
}
a:hover {
  color: #4A4EBA;
}

#timeline .post-content .post-date span {
  background: rgba(102, 108, 255, 0.12);
  color: rgb(102, 108, 255);
  font-size: 11.5px;
}

[data-title^="Lägg till"] {
  background-color: rgb(120, 126, 255);
  color: #fff !important;
  border: rgb(120, 126, 255);
  box-shadow: rgba(76, 78, 100, 0.42) 0px 2px 4px -2px;
}
[data-title^="Lägg till"]:hover {
  background-color: rgb(120, 126, 255);
  color: #fff !important;
  border: rgb(120, 126, 255);
  box-shadow: rgba(76, 78, 100, 0.56) 0px 4px 8px -4px;
}
[data-title^="Lägg till flera"] {
  background-color: transparent;
  color: rgb(120, 126, 255) !important;
  box-shadow: none;
}

[data-value^="1"][data-act="update-task-status"], [data-value^="1"][data-act-type="status_id"] {
    background-color: rgba(109, 120, 141, 0.12);
    color: rgba(109, 120, 141, 0.8) !important;
    padding: 2px 5px;
    border-radius: 0.375rem;
    font-size: 13px;
}
[data-value^="4"][data-act="update-task-status"], [data-value^="4"][data-act-type="status_id"] {
    background-color: rgba(255,180,0, 0.15) !important;
    color: rgb(253, 181, 40);
    padding: 2px 5px;
    border-radius: 0.375rem;
    font-size: 13px;
}
[data-value^="3"][data-act="update-task-status"], [data-value^="3"][data-act-type="status_id"] {
    background-color: rgb(102, 108, 255) !important;
    color: #fff;
    padding: 2px 5px;
    border-radius: 0.375rem;
    font-size: 13px;
}
[data-value^="2"][data-act="update-task-status"], [data-value^="2"][data-act-type="status_id"] {
    background-color: rgba(102, 108, 255, 0.12);
    color: rgb(102, 108, 255) !important;
    padding: 2px 5px;
    border-radius: 0.375rem;
    font-size: 13px;
}
[data-value^="5"][data-act="update-task-status"], [data-value^="5"][data-act-type="status_id"] {
    background-color: rgba(86,202,0,0.1) !important;
    color: rgb(86,202,0) !important;
    padding: 2px 5px;
    border-radius: 0.375rem;
    font-size: 13px;
}
[data-value^="6"][data-act="update-task-status"], [data-value^="6"][data-act-type="status_id"] {
    background-color: rgba(255, 98, 95, 0.12);
    color: rgb(255, 98, 95) !important;
    padding: 2px 5px;
    border-radius: 0.375rem;
    font-size: 13px;
}
.js-task[data-value^="3"] {
    background-color: unset;
    color: unset;
    padding: unset;
    border-radius: unset;
    font-size: unset;
}

.kanban-container {
  background: #6088B9;
}
.bg-white.kanban-filters-container {
  background: #F5F5F7 !important;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-radius: 10px 10px 0 0;
  box-shadow: rgba(76, 78, 100, 0.22) 0px 2px 10px 0px;
}
#kanban-wrapper {
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-radius: 0 0 10px 10px;
  box-shadow: rgba(76, 78, 100, 0.22) 0px 2px 10px 0px;
}
.kanban-col-title {
  background: #F5F5F7;
  margin-bottom: 15px;
  margin-right: 5px;
}
.kanban-item {
  padding: 10px;
  margin: 0 3px 10px 0;
  border-radius: 3px;

  font-weight: 500;
  font-size: 14.5px;
}
/* color: rgba(58,53,65,.87); */

.kanban-col-title {
  color: rgba(58,53,65,.87);
  font-weight: 400;
}
#reload-kanban-button {
  color: #fff;
  background: #6088B9;
  border: 1px solid #6088B9;
}

/* Not so shure */
thead {
  background: #F5F5F7;
}
.task-view-modal-body .page-title h1 {
    color: #999;
}
#upcoming-event-container {
  height: 250px !important;
}
#my_tasks_overview-widget {
  height: 250px !important;
}
#open-tickets-list-widget-table {
  height: 450px !important;
}

/* ----- */

@media (max-width: 767px) {
.kanban-col-title {
  margin-right: 0px;
}
.kanban-col {
  width: 225px !important;
  margin: 0 10px;
}
.kanban-item {
  padding: 5px 8px !important;
  width: 225px !important;
  margin: 0 0px 6px 0 !important;
}
.kanban-filters-container .col-md-1.col-xs-2 {
  width: 30%;
}
#kanban-filters {
  width: 70%;
}
}

/* Uppgift modal */
.task-view-modal-body, .task-view-modal-body .card-body {
    padding-top: 0 !important;
}
.col-lg-8.mb15 {
    padding-top: 20px;
}
.col-lg-4.order-lg-last {
    background: #F5F5F7;
    padding-top: 10px;
    margin-bottom: 5px;
}


.init-chat-icon {
  background-color: rgb(102, 108, 255);
  box-shadow: 0px 3px 4px 4px rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

#js-chat-min-icon {
  color: #fff;
}

[href^="https://proffice.planetmedia.se/index.php/events"] .card.dashboard-icon-widget {
    margin-top: 30px;
}
.clock-in-out-card .feather.feather-calendar.icon, [href^="https://proffice.planetmedia.se/index.php/events"] .card.dashboard-icon-widget .feather.feather-calendar.icon {
    display: none;
}

[href^="https://proffice.planetmedia.se/index.php/events"] .widget-details {
    text-align: left;
    position: inherit;
    right: 20px;
    margin-top: 30px;
}
.clock-in-out-card .widget-details {
  text-align: left;
  position: inherit;
  right: 20px;
  margin-top: 33px;
}
.clock-in-out-card .widget-icon.bg-coral {
  background-image: url('https://proffice.planetmedia.se/files/system/rygga.png');
  width: 88px;
  height: 177px;
  background-color: unset !important;
  float: right;
  margin-top: -55px;
  background-repeat: no-repeat;
}
.clock-in-out-card .feather.feather-clock.icon {
  display: none;
}
.clock-in-out-card .widget-icon.bg-info {
    background-image: url('https://proffice.planetmedia.se/files/system/illustration-1.20d12d31.png');
    width: 112px;
    height: 177px;
    background-color: unset !important;
    float: right;
    margin-top: -55px;
}
[href^="https://proffice.planetmedia.se/index.php/events"] .widget-icon.bg-success {
    background-image: url('https://proffice.planetmedia.se/files/system/illustration-2.042b082c.png');
    width: 112px;
    height: 177px;
    background-color: unset !important;
    float: right;
    margin-top: -55px;
}
.clock-in-out-card .dashboard-icon-widget .card-body, [href^="https://proffice.planetmedia.se/index.php/events"] .dashboard-icon-widget .card-body {
    padding: 28px 28px 0 28px;
}
.clock-in-out-card .bg-transparent-white, [href^="https://proffice.planetmedia.se/index.php/events"] .bg-transparent-white {
    padding: 0;
}




[href^="https://proffice.planetmedia.se/index.php/tasks/all_tasks#my_open_tasks"] .widget-icon.bg-info {
  background-image: url('https://proffice.planetmedia.se/files/system/illustration-1.20d12d31.png');
  width: 112px;
  height: 177px;
  background-color: unset !important;
  float: right;
  margin-top: -55px;
}

[href^="https://proffice.planetmedia.se/index.php/tasks/all_tasks#my_open_tasks"] .card.dashboard-icon-widget {
  margin-top: 30px;
}
[href^="https://proffice.planetmedia.se/index.php/tasks/all_tasks#my_open_tasks"] .feather.feather-list.icon {
  display: none;
}

[href^="https://proffice.planetmedia.se/index.php/tasks/all_tasks#my_open_tasks"] .widget-details {
  text-align: left;
  position: inherit;
  right: 20px;
  margin-top: 30px;
}

[href^="https://proffice.planetmedia.se/index.php/tasks/all_tasks#my_open_tasks"] .dashboard-icon-widget .card-body {
  padding: 28px 28px 0 28px;
}
[href^="https://proffice.planetmedia.se/index.php/tasks/all_tasks#my_open_tasks"] .bg-transparent-white {
  padding: 0;
}









#js-clock-in-out .card-body {
  padding-bottom: 0;
}
.widget-container.col-md-3 > .clock-in-out-card {
  margin-top: 30px;
  box-shadow: rgba(58, 53, 65, 0.15) 0px 2px 10px 0px !important;
  -webkit-box-shadow: rgba(58, 53, 65, 0.15) 0px 2px 10px 0px !important;
}

.widget-icon.bg-coral, .widget-icon.bg-info {
  animation: fadeIn ease 1s;
  -webkit-animation: fadeIn ease 1s;
  -moz-animation: fadeIn ease 1s;
  -o-animation: fadeIn ease 1s;
  -ms-animation: fadeIn ease 1s;
}
@keyframes widget-icon.bg-coral {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes widget-icon.bg-coral {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes widget-icon.bg-coral {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes widget-icon.bg-coral {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes widget-icon.bg-coral {
  0% {opacity:0;}
  100% {opacity:1;}
}

.animated-clock-sec {
  top: 17px;
  left: 19px;
  animation: animatedClockSecRotate 8s linear infinite;
}

.kanban-item.d-block {
  box-shadow: rgba(58, 53, 65, 0.25) 0px 2px 10px 0px !important;
  -webkit-box-shadow: rgba(58, 53, 65, .25) 0px 2px 10px 0px !important;
}
.kanban-col-title {
  box-shadow: rgba(58, 53, 65, 0.25) 0px 2px 10px 0px !important;
  -webkit-box-shadow: rgba(58, 53, 65, .25) 0px 2px 10px 0px !important;
}

.filter-item-box.bookmarked-filter-button-wrapper .btn-default:active, .filter-item-box.bookmarked-filter-button-wrapper .btn-default:focus {
  border-color: #E6E6E6;
  background-color: #E6E6E6;
}

.invoice-meta.text-default {
  margin-top: 20px !important;
  padding-top: 20px !important;
}