/*
Template Name: Hybrix - Admin & Dashboard Template
Author: Themesbrand
Website: https://themesbrand.com/
Contact: support@themesbrand.com
File: Custom Css File
*/

:root {

    --tb-border-color: #dde1e8;
    --tb-input-check-border: #224d99;
}
.card {
    --tb-card-spacer-y: 1rem;
    --tb-card-spacer-x: 1rem;
    --tb-card-cap-bg: #fafafa;
}
.card-header {
    padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
    margin-bottom: 0; // Removes the default margin-bottom of <hN>
color: var(--#{$prefix}card-cap-color);
    background-color: var(--#{$prefix}card-cap-bg);
    border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);

    &:first-child {
        @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
    }
}

.form-control {
    padding: 0.2rem 0.4rem;
    font-size: 0.9063rem;
    font-weight: 400;
}


input[type=text]:focus, [type=number]:focus {
    box-shadow: 0 0 5px rgb(0, 123, 255);
    border: 1px solid rgb(0, 123, 255);
}

input[type=password]:focus, [type=number]:focus {
    box-shadow: 0 0 5px rgb(0, 123, 255);
    border: 1px solid rgb(0, 123, 255);
}

.form-select:focus {
    box-shadow: 0 0 5px rgb(0, 123, 255);
    border: 1px solid rgb(0, 123, 255);
}

textarea:focus,  .uneditable-input:focus {
    border-color: rgba(0, 123, 255, 0.8) !important;
    box-shadow: 0 1px 1px rgba(255, 161, 23, 0.075) inset, 0 0 8px rgba(0, 123, 255, 0.6) !important;
    outline: 0 none !important;
}


.pattern {
    height: 4px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999
}

.pattern span {
    display: block;
    width: 100%
}

.pattern .crm {
    background: #ffc107
}
.bg-crm {
    background-color: #ffc107 !important;
}
.text-crm {
    color: #ffc107 !important;
}

.pattern .tools {
    background: #17a2b8
}
.bg-tools {
    background-color: #17a2b8 !important;
}
.text-tools {
    color: #17a2b8 !important;
}

.pattern .logistics {
    background: #dc3545
}
.bg-logistics {
    background-color: #dc3545 !important;
}
.text-logistics {
    color: #dc3545 !important;
}

.pattern .factory {
    background: #2dcb73
}
.bg-factory {
    background-color: #2dcb73 !important;
}
.text-factory {
    color: #2dcb73 !important;
}

.pattern .laundry {
    background: #2dcb73
}
.bg-laundry {
    background-color: #2dcb73 !important;
}
.text-laundry {
    color: #2dcb73 !important;
}

.pattern .members {
    background: #007bff
}
.bg-members {
    background-color: #007bff !important;
}
.text-members {
    color: #007bff !important;
}

.pattern .workwearrus {
    background: #830d7e
}
.bg-workwearrus {
    background-color: #830d7e !important;
}

.pattern .accounts {
    background: #872020
}
.bg-accounts {
    background-color: #872020 !important;
}

.pattern .user {
    background: #007bff
}
.bg-user {
    background-color: #007bff !important;
}
.text-user {
    color: #007bff !important;
}


.pattern .orderprocessing {
    background: #2d6507
}
.bg-orderprocessing {
    background-color: #2d6507 !important;
}
.text-orderprocessing {
    color: #2d6507 !important;
}

.pattern .management {
    background: #0000cc
}
.bg-management {
    background-color: #0000cc !important;
}
.text-management {
    color: #0000cc !important;
}


.blink {
    animation: blinker 3s linear infinite;
}

@keyframes blinker {
    50% { opacity: 0.0; }
}

[data-layout=horizontal] .page-title-box {
    padding: 0.7rem 0;

}

.piechart {
    position: relative;
    display: inline-block;
    width: 110px;
    height: 110px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}
.piechart canvas {
    position: absolute;
    top: 0;
    left: 0;
}
.piepercent {
    display: inline-block;
    line-height: 110px;
    z-index: 2;
}
.piepercent:after {
    margin-left: 0.1em;
    font-size: .8em;
}




.btn-secondary {
    --tb-btn-color: #fff;
    --tb-btn-bg: #438eff;
    --tb-btn-border-color: #438eff;
    --tb-btn-hover-color: #fff;
    --tb-btn-hover-bg: #438eff;
    --tb-btn-hover-border-color: #438eff;
    --tb-btn-focus-shadow-rgb: 151, 121, 250;
    --tb-btn-active-color: #fff;
    --tb-btn-active-bg: #438eff;
    --tb-btn-active-border-color: #438eff;
    --tb-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --tb-btn-disabled-color: #fff;
    --tb-btn-disabled-bg: #438eff;
    --tb-btn-disabled-border-color: #438eff;
}


.dt-button.buttons-columnVisibility {
    background-color: red;
    color: #fff;
}

.dt-button.buttons-columnVisibility.active {
    background-color: #438eff;
}



/*
    Common JQUERY STEPS
*/

.wizard,
.tabcontrol
{
    display: block;
    width: 100%;
    overflow: hidden;
}

.wizard a,
.tabcontrol a
{
    outline: 0;
}

.wizard ul,
.tabcontrol ul
{
    list-style: none !important;
    padding: 0;
    margin: 0;
}

.wizard ul > li,
.tabcontrol ul > li
{
    display: block;
    padding: 0;
}

/* Accessibility */
.wizard > .steps .current-info,
.tabcontrol > .steps .current-info
{
    position: absolute;
    left: -999em;
}

.wizard > .content > .title,
.tabcontrol > .content > .title
{
    position: absolute;
    left: -999em;
}


/*
    Wizard
*/

.wizard > .steps
{
    position: relative;
    display: block;
    width: 100%;
}

.wizard.vertical > .steps
{
    display: inline;
    float: left;
    width: 20%;
}

.wizard > .steps .number
{
    font-size: 1.429em;
}

.wizard > .steps > ul > li
{
    width: 12.5%;
}

@media (max-width: 576px) {
    .wizard > .steps > ul > li
    {
        width: 50%;
    }
}

.wizard > .steps > ul > li,
.wizard > .actions > ul > li
{
    float: left;
}

.wizard.vertical > .steps > ul > li
{
    float: none;
    width: 100%;
}

.wizard > .steps a,
.wizard > .steps a:hover,
.wizard > .steps a:active
{
    display: block;
    width: auto;
    margin: 0 0.5em 0.5em;
    padding: 1em 1em;
    text-decoration: none;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.wizard > .steps .disabled a,
.wizard > .steps .disabled a:hover,
.wizard > .steps .disabled a:active
{
    background: #eee;
    color: #aaa;
    cursor: default;
}

.wizard > .steps .current a,
.wizard > .steps .current a:hover,
.wizard > .steps .current a:active
{
    background: #2184be;
    color: #fff;
    cursor: default;
}

.wizard > .steps .done a,
.wizard > .steps .done a:hover,
.wizard > .steps .done a:active
{
    background: #15a518;
    color: #fff;
}

.wizard > .steps .error a,
.wizard > .steps .error a:hover,
.wizard > .steps .error a:active
{
    background: #ff3111;
    color: #fff;
}

.wizard > .content
{
    background: #eee;
    display: block;
    margin: 0.5em;
    min-height: 35em;
    overflow: hidden;
    position: relative;
    width: auto;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.wizard.vertical > .content
{
    display: inline;
    float: left;
    margin: 0 2.5% 0.5em 2.5%;
    width: 75%;
}

.wizard > .content > .body
{
    float: left;
    position: absolute;
    width: 95%;
    height: 95%;
    padding: 2.5%;
}

.wizard > .content > .body ul
{
    list-style: disc !important;
}

.wizard > .content > .body ul > li
{
    display: list-item;
}

.wizard > .content > .body > iframe
{
    border: 0 none;
    width: 100%;
    height: 100%;
}

.wizard > .content > .body input
{
    display: block;
    border: 1px solid #ccc;
}

.wizard > .content > .body input[type="checkbox"]
{
    display: inline-block;
}

.wizard > .content > .body input.error
{
    background: rgb(251, 227, 228);
    border: 1px solid #fbc2c4;
    color: #8a1f11;
}

.wizard > .content > .body label
{
    display: inline-block;
    margin-bottom: 0.5em;
}

.wizard > .content > .body label.error
{
    color: #8a1f11;
    display: inline-block;
    margin-left: 1.5em;
}

.wizard > .actions
{
    position: relative;
    display: block;
    text-align: right;
    width: 100%;
}

.wizard.vertical > .actions
{
    display: inline;
    float: right;
    margin: 0 2.5%;
    width: 95%;
}

.wizard > .actions > ul
{
    display: inline-block;
    text-align: right;
}

.wizard > .actions > ul > li
{
    margin: 0 0.5em;
}

.wizard.vertical > .actions > ul > li
{
    margin: 0 0 0 1em;
}

.wizard > .actions a,
.wizard > .actions a:hover,
.wizard > .actions a:active
{
    background: #2184be;
    color: #fff;
    display: block;
    padding: 0.5em 1em;
    text-decoration: none;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.wizard > .actions .disabled a,
.wizard > .actions .disabled a:hover,
.wizard > .actions .disabled a:active
{
    background: #eee;
    color: #aaa;
}

.wizard > .loading
{
}

.wizard > .loading .spinner
{
}





/*
    Tabcontrol
*/

.tabcontrol > .steps
{
    position: relative;
    display: block;
    width: 100%;
}

.tabcontrol > .steps > ul
{
    position: relative;
    margin: 6px 0 0 0;
    top: 1px;
    z-index: 1;
}

.tabcontrol > .steps > ul > li
{
    float: left;
    margin: 5px 2px 0 0;
    padding: 1px;

    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.tabcontrol > .steps > ul > li:hover
{
    background: #edecec;
    border: 1px solid #bbb;
    padding: 0;
}

.tabcontrol > .steps > ul > li.current
{
    background: #fff;
    border: 1px solid #bbb;
    border-bottom: 0 none;
    padding: 0 0 1px 0;
    margin-top: 0;
}

.tabcontrol > .steps > ul > li > a
{
    color: #5f5f5f;
    display: inline-block;
    border: 0 none;
    margin: 0;
    padding: 10px 30px;
    text-decoration: none;
}

.tabcontrol > .steps > ul > li > a:hover
{
    text-decoration: none;
}

.tabcontrol > .steps > ul > li.current > a
{
    padding: 15px 30px 10px 30px;
}

.tabcontrol > .content
{
    position: relative;
    display: inline-block;
    width: 100%;
    height: 35em;
    overflow: hidden;
    border-top: 1px solid #bbb;
    padding-top: 20px;
}

.tabcontrol > .content > .body
{
    float: left;
    position: absolute;
    width: 95%;
    height: 95%;
    padding: 2.5%;
}

.tabcontrol > .content > .body ul
{
    list-style: disc !important;
}

.tabcontrol > .content > .body ul > li
{
    display: list-item;
}



/* Celandar */
.fc-event{
    cursor: pointer;
}


.fc-toolbar-chunk .btn-group .btn {
    color: #438eff;!important;
    background-color: rgba(133,97,249,.15);
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.fc-toolbar-chunk .fc-today-button {
    background-color: #438eff!important;
    border: #438eff;
}

.calendar {
    cursor: pointer;
}



.pinButton {
    border: none;
    background: none;
    font-size: 1.5em;
    border-radius: 50%;
    height: 60px;
    font-weight: 550;
    width: 60px;
    color: transparent;
    text-shadow: 0 0 0 rgb(102, 101, 101);
    margin: 7px 20px;
}

.clear,
.enter {
    font-size: 1em !important;
}

.pinButton:hover {
    box-shadow: #506ce8 0 0 1px 1px;
}
.pinButton:active {
    background: #506ce8;
    color: #fff;
}
.clear:hover {
    box-shadow: #ff3c41 0 0 1px 1px;
}
.clear:active {
    background: #ff3c41;
    color: #fff;
}
.enter:hover {
    box-shadow: #47cf73 0 0 1px 1px;
}
.enter:active {
    background: #47cf73;
    color: #fff;
}



/**
 * Datatables STuff
 */
table.table.dataTable {
    margin-bottom: 10px;

}
.dt-length{
    padding-bottom: 10px;
}
.dt-info{
    padding-bottom: 10px;
}
.dt-buttons{
    padding-bottom: 10px;
}
/**
 * Datatables STuff End
 */




.logomove{
    -webkit-transition: all ease 6000ms;
    -moz-transition: all ease 6000ms;
    -ms-transition: all ease 6000ms;
    -o-transition: all ease 6000ms;
    transition: all ease 6000ms;

}

.logomove:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-transform: rotate(7200deg);
    -moz-transform: rotate(7200deg);
    -ms-transform: rotate(7200deg);
    transform: rotate(7200deg);
    transform: rotate(7200deg);
}


/* alphabet table for clients */
div.alphabet {
    position: relative;
    display: table;
    width: 100%;
    margin-bottom: 1em;
}

div.alphabet span {
    display: table-cell;
    color: #438eff;
    cursor: pointer;
    text-align: center;
    width: 3.5%
}

div.alphabet span:hover {
    text-decoration: underline;
}

div.alphabet span.active {
    color: #438eff;
}

div.alphabet span.empty {
    color: #17191c;
}

div.alphabetInfo {
    display: block;
    position: absolute;
    background-color: #111;
    border-radius: 3px;
    color: white;
    top: 2em;
    height: 1.8em;
    padding-top: 0.4em;
    text-align: center;
    z-index: 1;
}

#back-to-top {
    bottom: 30px;
}

.page-title-box {
    padding: 0 0 3px;

}



/**
 * Countdown Clock
 */

.tick {
    font-size:1rem; white-space:nowrap; font-family:arial,sans-serif;
}

.tick-flip,.tick-text-inline {
    font-size:2.5em;
}

.tick-label {
    margin-top:1em;font-size:1em;
}

.tick-char {
    width:1.5em;
}

.tick-text-inline {
    display:inline-block;text-align:center;min-width:1em;
}

.tick-text-inline+.tick-text-inline {
    margin-left:-.325em;
}

.tick-group {
    margin:0 .5em;text-align:center;
}


.tick-text-inline {
    color: #595d63 !important;
}

.tick-label {
    color: #595d63 !important;
}

.tick-flip-panel {
    color: rgb(0, 123, 255) !important;
}


.tick-flip-panel-text-wrapper {
    line-height: 1.45 !important;
}

.tick-flip-panel {
    background-color: rgb(247, 255, 247) !important;
}

.tick-flip {
    border-radius:0.32em !important;
}



.table>:not(caption)>*>* {
    padding: 0.35rem 0.4rem;
    background-color: var(--tb-table-bg);
    border-bottom-width: 1px;
    -webkit-box-shadow: inset 0 0 0 9999px var(--tb-table-accent-bg);
    box-shadow: inset 0 0 0 9999px var(--tb-table-accent-bg);
}

.dropzone .dz-preview .dz-image {
    border-radius: 20px;
    overflow: hidden;
    width: 200px;
    height: 200px;
    position: relative;
    display: block;
    z-index: 10;
}



.btn-outline-primary-inverse {
    color: #fff;
    background-color: #438eff;
    border-color: #438eff;
}

.btn-outline-primary-inverse:hover {
    color: #438eff;
    background-image: none;
    background-color: transparent;
    border-color: #438eff;
}

.btn-outline-primary-inverse:focus, .btn-outline-primary-inverse.focus {
    color: #fff;
    background-color: #0275d8;
    border-color: #0275d8;
}

.btn-outline-success-inverse {
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}

.btn-outline-success-inverse:hover {
    color: #438eff;
    background-image: none;
    background-color: transparent;
    border-color: #198754;
}

.btn-outline-success-inverse:focus, .btn-outline-success-inverse.focus {
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}

.btn-outline-danger-inverse {
    color: #fff;
    background-color: #ff6c6c;
    border-color: #ff6c6c;
}

.btn-outline-danger-inverse:hover {
    color: #ff6c6c;
    background-image: none;
    background-color: transparent;
    border-color: #ff6c6c;
}

.btn-outline-danger-inverse:focus, .btn-outline-danger-inverse.focus {
    color: #fff;
    background-color: #ff6c6c;
    border-color: #ff6c6c;
}


table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before {
    background-color: var(--tb-card-bg-custom);
    border-color: var(--tb-card-bg-custom);
    margin-right: 0.5em;
    display: inline-block;
    box-sizing: border-box;
    content: "";
    border-top: 5px solid transparent;
    border-left: 10px solid rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid transparent;
    border-right: 0px solid transparent;
}


.card-hyperlink {
    border: 1px solid #0275d8 !important;
}

.card-hyperlink:hover{
    border: 1px solid #0275d8 !important;
}

.fc-event-title {
    margin: 1px;
    padding: 1px;
    white-space: break-spaces;
}