@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,300;1,400;1,700&display=swap');

html {
    scroll-behavior: smooth;
}

body{
    /* background-color: #737373;MY EYES!*/
    padding-top: 50px;
    background-image: url("../img/noise.png");
    font-family: 'Roboto Condensed', sans-serif;
}

/* Remove last rows bottom Border */
tr:last-child{
    border-bottom: transparent;
}

/* Scrollbar */
::-webkit-scrollbar
{
    width: 5px;
    background-color: #262626;
    background-image: url("../img/noise.png");
    background-image: url("../img/noise.png");
}

::-webkit-scrollbar-thumb
{
    border-radius: 2px;
    background-color: #ce412b;
    background-image: url("../img/noise.png");
}

/* No Flex... Use line-height = font-size =S */
.lh-21
{
    font-size: 21px;
}
/* Accordion */
.accordion-button {
    background-color: rgba(0, 0, 0, 0.21);
    background-image: url("../img/noise.png");
}

.accordion-button:focus {
    z-index: 3;
    border-color: #00a14b;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(0, 176, 87, 0.2);
}

.accordion-button:not(.collapsed) {
    color: #00a14b;
    background-color: rgba(0, 229, 113, 0.15);
}
.accordion-button:after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300a14b'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}
.accordion-body {
    background-image: url("../img/noise.png");
}
.accordion-item:first-of-type .accordion-button.collapsed {
    border-top-right-radius: calc(.25rem - 1px);
    border-top-left-radius: calc(.25rem - 1px);
}

/* Toast */
.toast-header{
    background-color: #e6e6e6de;
}

.toast-body, .toast-header, .toast {
    background-image: url("../img/noise.png");
}

/* Inputs */
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.form-control:focus,
.uneditable-input:focus,
.tagin-wrapper.focus,
.form-select:focus,
.form-select.focus{
    border-color: rgba(0, 176, 87, 0.8);
    outline: 0 none;
    background-color: transparent;
    box-shadow: 0 0 0 0.25rem rgba(0, 176, 87, 0.2);
}

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.form-control,
.uneditable-input,
.tagin-wrapper,
.form-select{
    background-color: transparent;
    border-radius: 5px;
    border: 1px solid #4e4e4e;
}

option:hover {
    background-color: rgba(0, 176, 87, 0.2)!important;
}

/* Bootstrap Switch*/
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
    color: #242424;
    font-weight: 600;
    background-color: #7df9bb;
    border-color: #38936c;
    border-width: 1px;
    border-style: solid;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:hover {
    color: #242424;
    font-weight: 600;
    background-color: #4bad82;
    border-color: #20c16c;
    border-width: 1px;
    border-style: solid;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger {
    color: #242424;
    font-weight: 600;
    background-color: #ce412b;
    border-color: #9a3323;
    border-width: 1px;
    border-style: solid;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:hover {
    color: #242424;
    font-weight: 600;
    background-color: #a03323;
    border-color: #7f2d20;
    border-width: 1px;
    border-style: solid;
}

.bootstrap-switch.bootstrap-switch-focused{
    box-shadow: 0 0 0 0.25rem rgba(0, 176, 87, 0.2);
    border: 1px solid rgba(0, 176, 87, 0.8);
}

.bootstrap-switch.bootstrap-switch-wrapper{
    border: 1px solid #4e4e4e;
}

.form-check-input:focus {
    border-color: #4e9776 !important;
}
.form-switch .form-check-input:checked, .form-check-input:checked {
    border-color: #528d70 !important;
    background-color: #7df9bb!important;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%2334443d'/></svg>");
}

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%237df9bb'/></svg>");
}

/* Bootstrap */
.navbar-dark{
    border-bottom: 4px solid #ce412b;
    font-size: 18px;
}

.link, .link:visited, .navbar-dark a{
    color: #ce412b !important;
    text-decoration: none;
}

.link:hover, .link:focus, .link:active{
    color: #a33220!important;
    text-decoration: none;
}

.no-link, .no-link:hover, .no-link:active, .no-link:visited, .no-link:focus{
    color: inherit!important;
    text-decoration: none!important;
}

.navbar{
    font-weight: bolder;
    text-transform: uppercase;
}
/* Buttons & Links */
.btn-group-xs > .btn, .btn-xs {
    padding: .35rem .4rem;
    font-size: .75rem;
    line-height: 1;
    border-radius: .25rem;
}

.btn-primary{
    background-color: #6fa5ff;
    color: #212121;
}
.btn-primary:hover{
    background-color: #3c68b3;
    color: #212121;
}

.btn-info {
    background-color: #0dcaf0;
    border-color: #12768a;
    color: #212121;
}

.btn-info:hover {
    background-color: #0c90aa;
    border-color: #0f5968;
    color: #212121;
}

.btn-success, .btn-toggle{
    background-color: #7df9bb;
    border-color: #38936c;
    color: #212121;
}

.btn-success:hover{
    background-color: #428d63;
    border-color: #49845c;
    color: #212121;
}

.btn-danger{
    background-color: #db7367;
    border: 1px solid #a33220;
    color: #212121;
}

.btn-danger:hover{
    background-color: #9e524c;
    border: 1px solid #7b2e23;
    color: #212121;
}

.btn-warning{
    background-color: #fcb243;
    border: 1px solid #9c683d;
    color: #212121;
}

.btn-warning:hover{
    background-color: #c28f38;
    border: 1px solid #714e2c;
    color: #212121;
}

.btn-toggle{
    background-color: #db7367;
    border: 1px solid #a33220;
    color: #212121;
}

.btn-toggle.active{
    background-color: #7df9bb;
    border-color: #38936c;
    color: #212121;
}

.btn-toggle:focus+.btn, .btn-toggle:focus {
    box-shadow: none;
    outline: 0;
}

/* Badges */
.badge-on {
    background-color: #7df9bb;
    border: 1px solid #119252;
    color: #212121;
}

.badge-processing{
    background-color: #fcb243;
    border: 1px solid #9c683d;
    color: #212121;
}

.badge-off{
    background-color: #db7367;
    border: 1px solid #a33220;
    color: #212121;
}

.badge-info{
    background-color: #40d6f8;
    border: 1px solid #00a5c4;
    color: #212121;
}
/* Range Slider*/
input[type="range"]::-webkit-slider-thumb {
    background-color: #7df9bb;
    border: 1px solid #28a745;
}
input[type="range"]::-webkit-slider-thumb:hover, input[type="range"]::-webkit-slider-thumb:active, input[type="range"]::-webkit-slider-thumb:focus {
    background-color: #428d63;
    border-color: #49845c;
}

/* Readonly */
.form-control[readonly]{
    background-color: transparent;
}

/* Modal */
.modal-content{
    background-image: url("../img/noise.png");
}

/* Seed Type Switch */
.btn-check:active+.btn-success, .btn-check:checked+.btn-success, .btn-check:active+.btn-warning, .btn-check:checked+.btn-warning, .btn-check:active+.btn-danger, .btn-check:checked+.btn-danger, .btn-check:checked+.btn-info{
    background-color: #479ffded!important;
    border-color: #4e555b!important;
    box-shadow: 0 0 0 4px #0000005e!important;
}

/* Seed List */
.seed-list{
    background-color: rgba(0, 0, 0, 0.16);
}

/* Avatar / Logout */
.avatarCircle {
    position: relative;
    float: left;
    height: 60px;
    width: 60px;
    border-radius: 50%;
}

.avatar-img{
    height: 60px;
    width: 60px;
    border-radius: 50%;
    border: 2px solid #ce412b;
}

.avatarCircle .avatar-hover {
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    height: 60px;
    width: 60px;
    border-radius: 50%;
}

.avatar-hover a{
    color: #212529!important
}

.avatarCircle:hover .avatar-hover {
    display: block;
    background-color: #a13221;
    border: 2px solid #722317;
    padding-top: 10px;
    text-align: center;
}

/* DOGE */
.doge-crate {
    position: fixed;
    bottom: -75px;
    margin: 0;
    right: 10%;
    width: 320px;
    max-width: 320px;
    min-width: 320px;
    text-align: center;
    transition-property: bottom;
    transition-duration: 0.8s;
    transition-timing-function: ease-out;
}

.doge-crate-hover {
    position: fixed;
    bottom: -20px;
    margin: 0;
    right: 10%;
    transition-property: bottom;
    transition-duration: 0.8s;
    transition-timing-function: ease-out;
}

.doge-speak {
    background-image: url("../img/noise.png");
    background-color:#424242;
    border: 1px solid #4c4c4c;
    padding: 10px;
    border-radius:30px;
    min-width:40px;
    max-width:260px;
    min-height:40px;
    margin:20px;
    position:relative;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.doge-speak:before,
.doge-speak:after {
    content:"";
    background-image: url("../img/noise.png");
    background-color: #3d3d3d;;
    border-radius:50%;
    border: 1px solid #1f1f1f;
    display:block;
    position:absolute;
    z-index:-1;
}
.doge-speak:before {
    width:44px;
    height:44px;
    top:-12px;
    left:28px;
    background-image: url("../img/noise.png");
    border: 1px solid #282828;
    box-shadow:-50px 30px 0 -12px #323232;;
}
.doge-speak:after {
    bottom:-10px;
    right:26px;
    width:30px;
    height:30px;
    background-image: url("../img/noise.png");
    border: 1px solid #4e4e4e;
    box-shadow:40px -34px 0 0 #343434;,
    -28px -6px 0 -2px #424242;,
    -24px 17px 0 -6px #424242;,
    -5px 25px 0 -10px #424242;;

}

/* gijgo DatePicker & TimePicker */

.gj-picker-bootstrap [role=header] {
    background-color: #bfbfbf;
    background-image: url("../img/noise.png");
    color: #171616;
}

.gj-picker-bootstrap .selected {
    color: #ce412b;
}

.gj-modal .gj-picker-bootstrap {
    padding: 0;
    background-image: url("../img/noise.png");
}

.border-left-0{
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

#timepicker:focus, #datepicker:focus {
    border-color: rgba(0, 176, 87, 0.8);
    outline: 0 none;
    background-color: transparent;
    box-shadow: 0 0 0 0.25rem rgba(0, 176, 87, 0.2);
}

#timepicker, #datepicker {
    background-color: transparent;
    border-radius: 5px;
    border: 1px solid #4e4e4e!important;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* BS DatePicker */
.datepicker-dropdown{
    background-image: none!important;
    background-color: #fff!important;
    font-size: 16px!important;
}

.datepicker-dropdown th tr{
    text-align: center;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: none;
}

.btn-outline-secondary {
    color: #4e4e4e!important;
    border-color: #4e4e4e!important;
}
/* Button Group Block */
.btn-group.btn-group-block {
    display: flex;
}

.btn-group-block  .btn {
    flex: 1
}

/* Radio Check Color */
.form-check-input:checked {
    background-color: rgba(0, 176, 87, 0.8);
    border-color: rgba(6, 88, 43, 0.8);
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 176, 87, 0.2);
}

/* Breadcrumbs */
.breadcrumb{
    font-weight: 600;
}

.breadcrumb a{
    color: #ce412b !important;
    text-decoration: none;
}

.breadcrumb a:hover{
    text-decoration: underline;
}

/* Input Tags */
.tagin-input, .tagin-input-focus{
    box-shadow: none!important;
    border: none!important;
}

.tagin-tag {
    background-color: rgba(206, 65, 43, 0.85);
}

/* Tasks Remaining Badge */
.task-badge{
    z-index: -1;
    font-size: 10px;
    padding: 2px!important;
    left: 89%!important;
    top: 23%!important;
}

/* Dropdown */
.dropdown-menu {
    background-image: url("../img/noise.png");
    background-color: #dadada;
}