/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

.content-wrapper {
    margin-top: 0!important;
}

/*Datatable fixed header*/
.page-users-view .users-view-image {
    width: 140px!important;
}

table.fixedHeader-floating {
    position:fixed !important;
    background-color:white
}

table.fixedHeader-floating.no-footer {
    border-bottom-width:0
}

table.fixedHeader-locked {
    position:absolute !important;
    background-color:white
}

@media print {
    table.fixedHeader-floating{display:none}
}


/*daterangepicker*/

.daterangepicker {
  background-color: #262C49!important;
}

.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
  color: #C2C6C0!important;
}

.daterangepicker .calendar-table {
  background-color: #262C49!important;
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
  background-color: #357ebd!important;
}

.daterangepicker td.in-range {
  background-color: #155e9d;
}

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
  background-color: inherit!important;
  color: #525650!important;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #357ebd!important;
}

.daterangepicker .drp-calendar.left .calendar-table, .daterangepicker .drp-calendar.right .calendar-table {
  border: none!important;
}

body.dark-layout .nav-tabs ~ .tab-content .tab-pane, body.dark-layout .nav-tabs.nav-justified ~ .tab-content .tab-pane, body.dark-layout .nav ~ .tab-content .tab-pane {
  background: none!important;
}

/*Scrollbar*/
.content-wrapper,
 .table,
 .table-responsive,
 .cover-container,
 .datatables_scrollable_cell,
 .scrollable_description {
  scrollbar-color: #7367F0 #10163A!important;
  scrollbar-width: thin !important;
}

.content-wrapper::-webkit-scrollbar,
 .table::-webkit-scrollbar,
 .table-responsive::-webkit-scrollbar,
 .cover-container::-webkit-scrollbar,
 .datatables_scrollable_cell::-webkit-scrollbar,
 .scrollable_description::-webkit-scrollbar {
  width : 10px!important;
  height : 10px!important;
}

.content-wrapper::-webkit-scrollbar-thumb,
.table::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.cover-container::-webkit-scrollbar-thumb,
.datatables_scrollable_cell::-webkit-scrollbar-thumb,
.scrollable_description::-webkit-scrollbar-thumb {
  background: #7367F0!important;
  border-radius: 20px!important;
}

.content-wrapper::-webkit-scrollbar-track,
.table::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.cover-container::-webkit-scrollbar-track,
.datatables_scrollable_cell::-webkit-scrollbar-track,
.scrollable_description::-webkit-scrollbar-track {
  background: #262C49!important;
  border-radius: 20px!important;
}

.content-wrapper::-webkit-scrollbar-corner,
.table::-webkit-scrollbar-corner,
.table-responsive::-webkit-scrollbar-corner,
.datatables_scrollable_cell::-webkit-scrollbar-corner,
.scrollable_description::-webkit-scrollbar-corner {
  background: #10163A!important;
}

 

/*gallery pictures*/
.cover-container {
    height: 100px;
    width: 100%;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
}
.cover-item {
    position: relative;
    display: inline-block;
    margin: 8px 8px;
    box-shadow: 2px 2px 4px #bbb;
    border-top-right-radius: 4px;
    width: 78px;
    height: 78px;
    vertical-align: bottom;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Chat design */
body.dark-layout .chat-application .content-area-wrapper {
  border-color : #414561;
}
body.dark-layout .chat-application .sidebar .chat-profile-sidebar {
  background-color : #262C49;
  border-color : #343661;
}
body.dark-layout .chat-application .sidebar .sidebar-content {
  background-color : #262C49;
  border-color : #414561;
}
body.dark-layout .chat-application .sidebar .sidebar-content .chat-fixed-search {
  border-color : #414561;
}
body.dark-layout .chat-application .sidebar .sidebar-content .chat-fixed-search .form-control {
  background-color : #10163A;
  border-color : #414561;
}
body.dark-layout .chat-application .sidebar .sidebar-content .chat-user-list .chat-users-list-wrapper li {
  border-color : #414561;
}
body.dark-layout .chat-application .sidebar .sidebar-content .chat-user-list .chat-users-list-wrapper li:not(.active):hover {
  background : #10163A;
}
body.dark-layout .chat-application .sidebar .sidebar-content .chat-user-list .chat-users-list-wrapper li.active .contact-info p {
  color : #FFFFFF;
}
body.dark-layout .chat-application .content-right .chat-app-window .start-chat-area {
  background-color : #171E49;
}
body.dark-layout .chat-application .content-right .chat-app-window .start-chat-area .start-chat-icon, body.dark-layout .chat-application .content-right .chat-app-window .start-chat-area .start-chat-text {
  background : #262C49;
}
body.dark-layout .chat-application .content-right .chat-app-window .active-chat .user-chats {
  background-color : #171E49;
}
body.dark-layout .chat-application .content-right .chat-app-window .active-chat .user-chats .chat-left .chat-content {
  border : 1px solid #414561;
}
body.dark-layout .chat-application .content-right .chat-app-window .active-chat .user-chats .chat-left .chat-content p {
  color : #C2C6DC;
}
body.dark-layout .chat-application .content-right .chat-app-window .active-chat .user-chats .chat-content p {
  color : #FFFFFF;
}
body.dark-layout .chat-application .content-right .chat-app-window .active-chat .user-chats .chat-content {
  background-color : #262C49;
}
body.dark-layout .chat-application .content-right .chat-app-window .active-chat .chat-app-form {
  background-color : #10163A;
}
body.dark-layout .chat-application .content-right .chat-app-window .active-chat .chat-app-form .form-control {
  background-color : #343661;
}
body.dark-layout .chat-application .content-right .user-profile-sidebar {
  background-color : #262C49;
  border-color : #343661;
}
body.dark-layout .chat-application .chat-app-window .start-chat-area, body.dark-layout .chat-application .chat-app-window .user-chats {
  background-image: none!important;
}

/*datatable fixed column design issue*/
.table, .table.dataTable {
  margin-bottom: 0px!important;
}

.DTFC_LeftBodyLiner .table.dataTable {
  margin: 0px!important;
}

.dataTable tr td {
  white-space: nowrap;
}

.big_image {
  left: 50%;
  margin-left: -300px;
  width: 600px;
  height: auto;
  top: 10%;
  position: fixed;
  z-index: 1000;
}

.img-fluid {
  transition: 0.3s;
}

/* Password validation */
.valid_pass {
  color: green;
}
.invalid_pass {
  color: red;
}

/*datatables cell alignment*/
.dataTable td.dt-body-right {
  text-align: right;
}

.dataTable td.dt-body-center {
  text-align: center;
}

.dataTable td.dt-body-left {
  text-align: left;
}

.dataTable th.dt-header-center {
  text-align: center;
}

.dataTable th.dt-header-center::before {
  text-align: left;
}

.dataTable th.dt-header-center::after {
  text-align: left;
}

/* fix datatable header */
table.dataTable thead tr {
 position: sticky;
	top: 0px;
	z-index: 10;
}


.datepicker-picker {
	background-color: #10163A !important;
}

.datepicker-picker .btn {
	background-color: #10163A !important;
}


/* fixing header for working roster table*/
#roster_table thead tr th {
	position: sticky;
	top: 0px !important;
	z-index: 1 !important;
}

#roster_table thead tr th:first-child {
	    position: sticky;
		left: 0;
		z-index: 10;
}
#roster_table tbody tr td:first-child {
	    position: sticky;
		left: 0;
		z-index: 5;
}

/* strikeout for deleted cells */
.strikeout div {
	text-decoration: line-through solid #C2C6DC 2px;
}

.aggrid_scrollable_cell {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
	height: 50px;
	width: 220px;
	line-height: 20px !important;
	white-space: normal;
	overflow-y: auto;
}

.scrollable_description {
	height: 60px;
	max-width: calc(100% - 3px) !important;
	overflow-y: auto;
}

.datatables_scrollable_cell {
  display: flex;
  justify-content: center;
  align-content: center;
  text-align: left;
  flex-direction: column;
	height: 50px;
	width: 220px;
	line-height: 20px !important;
	white-space: normal;
	overflow-y: auto;
}