@keyframes fade {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

nav ul {
    margin: 1rem 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
}

nav a {
    margin: 0 1rem;
    color: #566B78;
    text-decoration: none;
    text-transform: uppercase;
    display: flex;
    align-items: flex-start;
}

.app>* {
    display: none;
}

.app>*:last-child {
    display: block;
}

.app>*:target {
    display: block;
    animation: fade 300ms linear 1;
}

.app>*:target~* {
    display: none;
}


/* * {
    outline: 1px solid red !important;
} */

.nav-link {
    text-align: center;
    color: white;
}

.nav-link.tab {
    text-align: center;
    color: rgb(8, 3, 3);
}

.nav-link.tab.active {
    text-align: center;
    color: rgb(20, 5, 184);
    font-weight: 800;
    border-top: 2px solid #007bff;
    border-left: 2px solid #007bff;
    border-right: 2px solid #007bff;
}


.footer.active i {
    font-size: 1.8em;
}

.footer.active {
    padding: 8px 10px;
    border-radius: 10px;
    font-weight: bold;
    transition: max-width 0.4s linear;
    -webkit-transition: .5s;
}

.footer.home.active {
    background-color: rgba(148, 148, 148, 0.2);
}

.footer.trackers.active {
    background-color: rgba(143, 145, 246, 0.2);
}

.footer.records.active {
    background-color: rgba(223, 220, 245, 0.11);
    color: rgb(84, 140, 238)
}

.footer.settings.active {
    background-color: rgba(201, 195, 248, 0.123);
    color: rgb(250, 183, 0)
}

.footer:not(.active) i {
    font-size: 2em;
    color: rgb(181, 237, 255)
}

.active .iconName {
    font-size: .7em;
    display: block;
    margin-left: 8px;
}

.iconName {
    display: none;
    overflow: hidden;
}

.navbar {
    border-radius: .7rem .7rem 0 0;
    padding-top: .5em;
    padding-bottom: 0.1em;

}

.navbar>.container-fluid {
    display: flex;
    align-items: center;
}

/* Style the active class, and buttons on mouse-over */
.active,
.nav-link:hover {
    color: rgb(28, 213, 255);
    font-size: 1em;
    /* display: inline-flex; */
    align-items: center;

}

.nav-link.active .home {
    color: rgb(3, 207, 57);
    /* font-size: 1em; */
}

#showHomeView.nav-link:not(.active) {
    color: rgb(54, 255, 4);
    font-size: 1em;
}



header {
    background-color: rgb(39, 39, 39);
    line-height: 1.2;
    /* padding: 5vw 2em; */
    text-align: center;
}

header h1 {
    color: #FFFFFF;
    font-size: 1.8em;
    /* text-transform: uppercase; */
}

header a {
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    border-radius: 4px;
    font-size: 0.8em;
    letter-spacing: 0.2em;
    padding: 1em 2em;
    text-transform: uppercase;
    text-decoration: none;
    transition: none 200ms;
    transition-property: color, background, border;
}

header a:hover {
    background: crimson;
    border-color: crimson;
}


/* HALF STAR STYLING */
.panel {
    background-color: white;
    /* box-shadow: 0 0 7px rgba(0, 0, 0, .2); */
    /* border-radius: 5px; */
    /* font-size: 90%; */
    text-align: center;
    display: flex;
    justify-content: space-around;
}

fieldset,
label {
    margin: 0;
    padding: 0;
}

fieldset {
    margin: 20px 0 20px;
}

.rateIt {
    border: none;
    float: left;
}

.rateIt>input {
    display: none;
}

/* If the screen size is smaller than 540px, do something */
@media (max-width:540px) {
    .rateIt>label:before {
        margin: 12px;
        font-size: 38px;
        font-family: FontAwesome;
        display: inline-block;
        content: "\f005";
    }
}

/* If the screen size is 541px wide or more, do something */
@media (min-width: 541px) {
    .rateIt>label:before {
        margin: 10px;
        font-size: 4em;
        font-family: FontAwesome;
        display: inline-block;
        content: "\f005";
    }
}


.rateIt>.half:before {
    content: "\f089";
    position: absolute;
}

.rateIt>label {
    color: #ddd;
    float: right;
}

.rateIt>input:checked~label,
/* show gold star when clicked */
.rateIt:not(:checked)>label:hover,
/* hover current star */
.rateIt:not(:checked)>label:hover~label {
    color: #ffd608;
}

/* hover previous stars in list */
.rateIt>input:checked+label:hover,
/* hover current star when changing rateIt */
.rateIt>input:checked~label:hover,
.rateIt>label:hover~input:checked~label,
/* lighten current selection */
.rateIt>input:checked~label:hover~label {
    color: #f4b804;
}

.fa-circle-plus {
    color: red;
    font-size: 40px;
    margin: 10px;
}

.fa-heart:before {
    content: "\f004";
    font-family: FontAwesome;
}


.fa {
    cursor: pointer;
    pointer-events: none;

}


.btn.iconToggle:focus {
    box-shadow: none !important;
}

.btn.iconToggle:first-child:active {
    background: none !important;
}

.dropdown-toggle::after {
    display: none;
}

/*------ TOGGLE CSS ---------*/
.switch {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 38px;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ca2222;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 10px;
    bottom: 7px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: #2ab934;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(55px);
    -ms-transform: translateX(55px);
    transform: translateX(55px);
}

.on {
    display: none;
}

.on {
    color: white;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 40%;
    font-size: 14px;
    font-weight: bold;
    font-family: Verdana, sans-serif;
}

.off {
    color: white;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 60%;
    font-size: 14px;
    font-weight: bold;
    font-family: Verdana, sans-serif;
}

input:checked+.slider .on {
    display: block;
}

input:checked+.slider .off {
    display: none;
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/*--------- TOGGLE END --------*/




/*------ SMALL TOGGLE CSS ---------*/
.switchSmall {
    position: relative;
    display: inline-block;
    width: 82px;
    height: 30px;
}

.switchSmall input {
    display: none;
}

.sliderSmall {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #9f0d0d;
    -webkit-transition: .4s;
    transition: .4s;
}

.sliderSmall:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 1px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.sliderSmall {
    background-color: #05a205;
}

input:focus+.sliderSmall {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.sliderSmall:before {
    -webkit-transform: translateX(55px);
    -ms-transform: translateX(55px);
    transform: translateX(55px);
}

.on {
    display: none;
}

.on {
    color: white;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 40%;
    font-size: .8em;
    font-weight: bold;
    font-family: Verdana, sans-serif;
}

.off {
    color: white;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 60%;
    font-size: .8em;
    font-weight: bold;
    font-family: Verdana, sans-serif;
}

input:checked+.sliderSmall .on {
    display: block;
}

input:checked+.sliderSmall .off {
    display: none;
}

/* Rounded sliders */
.sliderSmall.round {
    border-radius: 34px;
}

.sliderSmall.round:before {
    border-radius: 50%;
}

/*--------- TOGGLE END --------*/



/* SMALLER TOGGLE */

/*------ SMALL TOGGLE CSS ---------*/
.switchSmaller {
    position: relative;
    display: inline-block;
    width: 65px;
    height: 25px;
}

.switchSmaller input {
    display: none;
}

.sliderSmaller {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #9f0d0d;
    -webkit-transition: .4s;
    transition: .4s;
}

.sliderSmaller:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.sliderSmaller {
    background-color: #05a205;
}

input:focus+.sliderSmaller {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.sliderSmaller:before {
    -webkit-transform: translateX(41px);
    -ms-transform: translateX(41px);
    transform: translateX(41px);
}

input:checked+.sliderSmaller .on {
    display: block;
}

input:checked+.sliderSmaller .off {
    display: none;
}

/* Rounded sliders */
.sliderSmaller.round {
    border-radius: 34px;
}

.sliderSmaller.round:before {
    border-radius: 50%;
}

/* END */



.iconSelect .custom-control-label::before,
.iconSelect .custom-control-label::after {
    display: none;
}


.iconSelect .custom-control-label.initiate {
    background-color: #ffffff;
    width: 100%;
    text-align: center;
    border-radius: 0.2rem;
    padding: 10px;
}




.iconSelect.custom-control {
    padding-left: 0;
}



.iconSelect .custom-control-label {
    width: 100%;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    transition: background-color 0.1s linear, color 0.1s linear;
}

.iconSelect .custom-control-label svg {
    fill: currentColor;
}


.iconSelect .custom-control-label::before,
.iconSelect .custom-control-label::after {
    top: auto;
    left: 0;
    right: 0;
    bottom: 1rem;
    margin: auto;
}

.iconSelect .custom-control-input:checked~.custom-control-label {
    background: #fba87579;
    color: #fff;
}

.iconSelect .custom-control-input:checked~.custom-control-label.initiate.blue {
    background: #13f2ef;
    color: #ee018f;
}

.iconSelect .custom-control-input:checked~.custom-control-label.initiate.pink {
    background: #ff2bea;
    color: #093fe0;
}

.iconSelect .custom-control-input:checked~.custom-control-label.toys {
    background: #a01bff;
    color: #fff;
}

.iconSelect .custom-control-input:checked~.custom-control-label.misc {
    background: #209eff;
    color: #fff;
}

.iconSelect .custom-control-input:checked~.custom-control-label.location {
    background: #f70b0b;
    color: #fff;
}

.iconSelect .custom-control-input:checked~.custom-control-label.position {
    background: #009717;
    color: #fff;
}

.iconSelect .custom-control-input:checked~.custom-control-label.other {
    background: #00d5ffd1;
    color: #050505;
}

.iconSelect .custom-control-input:checked~.custom-control-label.other .trackerName {
    color: #050505;
    font-weight: 800;
}


/* INVERT ICON COLOR ON CLICK */
.iconSelect .custom-control-input:checked~.custom-control-label.toys img {
    filter: invert(30%);
}

.iconSelect .custom-control-input:checked~.custom-control-label.misc img {
    filter: invert(30%);
}

.iconSelect .custom-control-input:checked~.custom-control-label.locations img {
    filter: invert(30%);
}

.iconSelect .custom-control-input:checked~.custom-control-label.positions img {
    filter: invert(30%);
}

.iconSelect .custom-control-input:checked~.custom-control-label.other img {
    filter: invert(30%);
}




.like {
    margin-right: 10px;
}



#modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
}

#modal .backdrop {
    background-color: rgba(43, 40, 40, 0.5);
    width: 100vw;
    height: 100vh;
}

#modal .form {
    background-color: #fff;
    /* padding: 40px; */
    border: 1px solid blue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 90%;
}


#modal2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    /* height: 100vh; */
    display: none;
}

#modal2 .backdrop {
    /* background-color: rgba(43, 40, 40, 0.5); */
    width: 100vw;
    padding: 10px;
    /* height: 100vh; */
}

#modal2 .form {
    /* background-color: #fff; */
    /* padding: 40px; */
    border: 1px solid blue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 90%;
}






.iconPicker {
    max-width: 50px;
}

.iconSmall {
    max-width: 40px;
}


.iconSelector {
    height: 255px;
    overflow: scroll;
}

.sexTableContainer {
    height: 475px;
    overflow: scroll;
    overflow-x: hidden;
    width: 98%;
    margin-bottom: 80px !important;
}

#iconToEdit {
    height: 155px;
    overflow: scroll;
}

#iconEdit {
    height: 200px;
    overflow: scroll;
}


#toyIconQuickAdd {
    height: 220px;
    overflow: scroll;
}

.iconBox {
    max-width: 35px;
}

.customIconBox {
    max-width: 45px;
}

.iconPreview {
    max-width: 50px;
}

.iconMedium {
    max-width: 105px;
}

.iconXSmall {
    max-width: 50px;
}

.iconBig {
    max-width: 150px;
}

.setBig {
    max-width: 175px;
}

.showTracker {
    max-width: 75px;
}



:checked+label span {
    /* display: inline-flex !important; */
    color: rgb(1, 1, 1);
    font-weight: 600;
}



.filter-video-btn {
    max-width: 200px;
}

.popover table {
    margin-bottom: 0;
}

.popover-content {
    display: none;
}



.styled-checkbox {
    position: absolute;
    opacity: 0;
}

.styled-checkbox+label {
    position: relative;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
    margin-bottom: 0;
}

.styled-checkbox+label:before {
    content: "";
    margin-right: 10px;
    display: inline-block;
    vertical-align: text-top;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 1px solid red;
}

.styled-checkbox:hover+label:before {
    background: red;
}

.styled-checkbox:checked+label:before {
    background: red;
}

.styled-checkbox:disabled+label {
    color: gray;
    cursor: auto;
}

.styled-checkbox:disabled+label:before {
    box-shadow: none;
    background: #ddd;
}

.styled-checkbox:checked+label:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 9px;
    background: white;
    width: 2px;
    height: 2px;
    box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
    transform: rotate(45deg);
}

.select-list-wrapper {
    overflow-y: auto;
    max-height: 200px;
    /* min-height: 200px; */
    width: 100%;
    box-shadow: 1px -1px 1px 1px rgba(0, 0, 0, 0.04) inset;
}

.select-title {
    font-size: 14px;
    color: black;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.popover {
    width: 100%;
    /* max-width: 800px; */
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-transform: translateZ(0) scale(1, 1);
    transform: translateZ(0) scale(1, 1);
    transform: translate3d(0, 0, 0);
}

.popover.custom-popover {
    max-width: 300px;
}

/* DARK MODE */
body {
    background-color: white;
    color: black !important;
    overflow-x: hidden;
    /* overflow: hidden; */
}

/* DARK MODE */
/* .dark-mode {
    background-color: black !important;
    color: white !important;
} */

/* .custom-control-input {
    opacity: 1;
} */

.subLabel {
    font-size: .8em;
}

/* .fa-star {
    color: rgb(245, 193, 6);
} */

.fa-star-half-empty {
    color: rgb(245, 193, 6);
}

.smallerText {
    font-size: .8em !important;
}

.dark-mode {
    background-color: black;
    color: white;
}

.smallImage {
    max-width: 65px;
}

/* FILE UPLOAD */

/* FILE UPLOAD */
input[type='file'] {
    color: transparent;
    opacity: 0
}

.uploadIt {
    background-color: white;
    box-shadow: 1px 2px 3px #ededed;
    position: relative;
    border: 1px solid #d8d8d8;
}

.uploadItTracker {
    background-color: white;
    box-shadow: 1px 2px 3px #ededed;
    position: relative;
    border: 1px solid #db0505;
}



#val {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 13px;
    line-height: 25px;
    text-indent: 10px;
    pointer-events: none;
}


#button {
    cursor: pointer;
    display: block;
    width: 90px;
    background-color: rgb(71, 71, 71);
    height: 100%;
    color: white;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 14px;
    line-height: 25px;
    text-align: center;
    -webkit-transition: 500ms all;
    -moz-transition: 500ms all;
    transition: 500ms all;
    border-radius: 0px 5px 5px 0px;
}


#valTracker {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 13px;
    line-height: 25px;
    text-indent: 10px;
    pointer-events: none;
}

#buttonTracker {
    cursor: pointer;
    display: block;
    width: 90px;
    background-color: rgb(158, 21, 21);
    height: 100%;
    color: white;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 14px;
    line-height: 25px;
    text-align: center;
    -webkit-transition: 500ms all;
    -moz-transition: 500ms all;
    transition: 500ms all;
    border-radius: 0px 5px 5px 0px;
}

.alert-danger {
    background-color: red;
    color: white;
    border: 3px solid #b00737;
}

.alert-success {
    background-color: rgb(56, 172, 6);
    color: white;
    border: 3px solid #0e650e;
}

.alert-warning {
    background-color: rgb(240, 173, 14);
    color: white;
    border: 3px solid #ef8609;
}

.alert {
    font-size: 1.2em;
}


.imageUpload {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

input[name='customImageUpload'] {
    opacity: 1;
}

input[name='customIconUpload'] {
    opacity: 1;
}

input[name='uploadImage'] {
    opacity: 1;
}

input[name='file_photo'] {
    opacity: 1;
}

input[name='customImageUpload'] {
    opacity: 0;
}



#output {
    max-width: 150px;
    max-height: 150px;
    min-width: 150px;
    min-height: 150px;
    object-fit: cover;
    object-position: 100% 0;
}

.fileNameText {
    font-size: .7em;
}

.customIconSize {
    /* min-height: 50px;
    min-width: 50px;
    max-width: 50px;
    max-height: 50px; */
    width: 50px;
    height: 50px;
    border-radius: 5px !important;
    border: 1px solid rgb(85, 85, 85);
    padding: 0px !important;
    overflow: hidden;
    object-fit: cover;
}

/* .main-container .card-container .profile-image-wrapper {
    min-width: 50px;
    min-height: 50px;
    max-width: 120px;
    max-height: 120px;
}

.profile-pic {
    width: 100%;
    height: auto;
} */


.fa-xl {
    font-size: 1.5em;
    line-height: .04167em;
    vertical-align: -.125em;
}

.fa-xx {
    font-size: 2.5em;
}

.tabHeader {
    font-size: 1em;
}


.wrapper {
    width: 100%;
}

.iconSelect {
    width: 100%;
}

.iconSelect.custom-control {
    padding-left: 0;
}

.iconSelect .custom-control-label {
    background-color: #bae5eb;
    width: 100%;
    text-align: center;
    border-radius: 5px;
    font-size: 1.4rem;
    padding: 8px;
    transition: background-color 0.1s linear, color 0.1s linear;
}

.iconSelect .custom-control-label.misc {
    background-color: #f2f8e3;
}

.iconSelect .custom-control-label.toys {
    background-color: #afffdc;
}

.iconSelect .custom-control-label.bdsm {
    background-color: #faedf1;
}

.iconSelect .custom-control-label.oral {
    background-color: #c5cfff91;
}

.iconSelect .custom-control-label.kink {
    background-color: #ffeeb891;
}

.iconSelect .custom-control-label.positions {
    background-color: #deebfa;
}

.iconSelect .custom-control-label.locations {
    background-color: #ffe39098;
}

.iconSelect .custom-control-label svg {
    fill: currentColor;
}

.iconSelect .custom-control-label::before,
.iconSelect .custom-control-label::after {
    top: auto;
    left: 0;
    right: 0;
    bottom: 1rem;
    margin: auto;
    display: none;
}

.iconSelect .custom-control-input:checked~.custom-control-label {
    background: #ffb58688;
    color: #fff;
    font-weight: bolder;
}

.iconSelect .custom-control-input:checked~.custom-control-label.bdsm {
    background: #f8060688;
    color: #fff;
    font-weight: bolder;
}

.iconSelect .custom-control-input:checked~.custom-control-label.oral {
    background: #0d6efd;
    color: #fff;
    font-weight: bolder;
}

.iconSelect .custom-control-input:checked~.custom-control-label.locations {
    background: #0dcaf0;
    color: #010101;
    font-weight: bolder;
}

.iconSelect .custom-control-input:checked~.custom-control-label.misc {
    background: #14b5fa;
    color: #fff;
    font-weight: bolder;
}

.iconSelect .custom-control-input:checked~.custom-control-label.toys {
    background: #cd10f8;
    color: #fff;
    font-weight: bolder;
}

.iconSelect .custom-control-input:checked~.custom-control-label.positions {
    background: #ff52eb5f;
    color: #0d0c0c;
    font-weight: bolder;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    background: #e645c3;
    color: white;
    font-weight: 600;
}






.btn-check.iconToggle:checked+.btn.iconToggle,
.btn.iconToggle.active,
.btn.iconToggle.show,
.btn.iconToggle:first-child:active,
:not(.btn-check.iconToggle)+.btn.iconToggle:active {
    background: none !important;
    color: rgba(255, 255, 255, 0) !important;
}

.btn-check.toggle:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check.toggle)+.btn:active {
    background: #049406;
    color: white;
    border-color: rgb(95, 95, 95) !important;
}


.setMax {
    max-width: 50px !important;
    min-width: 50px !important;
    max-height: 50px !important;
    min-height: 50px !important;
    object-fit: cover;
}

.setMax100 {
    max-width: 90px !important;
}

.initiatorIcon {
    border-radius: 50%;
    object-position: center;
    width: 95px;
    height: 95px;
    object-fit: cover;
}

.setMax2 {
    max-width: 70px !important;
    max-height: 70px !important;
    object-fit: cover;
}

.setMaxMedium {
    max-width: 65px !important;
    max-height: 65px !important;
    min-width: 65px !important;
    min-height: 65px !important;
    object-fit: cover;
}

.setSmall {
    max-width: 60px !important;
    max-height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    object-fit: cover;
}

/* If the screen size is smaller than 1200px, do something */
@media (max-width: 449.98px) {
    .setMax2 {
        max-width: 30px !important;
        max-height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        object-fit: cover;
    }

    .setMaxMedium {
        max-width: 55px !important;
        max-height: 55px !important;
        min-width: 55px !important;
        min-height: 55px !important;
        object-fit: cover;
    }

    .setSmall {
        max-width: 40px !important;
        max-height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        object-fit: cover;
    }
}

.setMaxSmall {
    max-width: 25px !important;
    max-height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    object-fit: cover;
}

.iconPreview {
    max-width: 45px;
}

.smallText {
    font-size: .8em;
}




.meIcon,
.themIcon {
    width: 120px;
    height: 120px;
    min-width: 120px;
    min-height: 120px;
    overflow: hidden;
    object-fit: cover;
}


.tableIcon {
    width: 35px;
    height: 35px;
    min-width: 35px;
    min-height: 35px;
    overflow: hidden;
    object-fit: cover;
    border-radius: 5px !important;
}

.fa-3xx {
    font-size: 3.2em !important
}

#upload-demo {
    width: 275px;
    height: 275px;
    padding-bottom: 15px;
}

#initiator-demo {
    width: 275px;
    height: 275px;
    padding-bottom: 15px;
}

#them-demo {
    width: 275px;
    height: 275px;
    padding-bottom: 15px;
}

.jdropdown-searchbar .jdropdown-header {
    padding-right: 0px;
    border: 0px;
}

.jdropdown-searchbar .jdropdown-group-name {
    /* border-top: 1px solid #e6e6e8; */
    /* border-bottom: 1px solid #e6e6e8; */
    padding: 10px;
    padding-left: 12px;
    font-weight: 700;
    color: red;
    text-transform: uppercase;
}

.jdropdown-searchbar.jdropdown-focus .jdropdown-description {
    text-transform: none !important;
}







/* Dropdown Button */
.dropbtn {
    background-color: #04AA6D;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover,
.dropbtn:focus {
    background-color: #3e8e41;
}

/* The search field */
#myInput {
    box-sizing: border-box;
    /* background-image: url('searchicon.png'); */
    background-position: 14px 12px;
    background-repeat: no-repeat;
    font-size: 16px;
    padding: 14px 20px 12px 45px;
    border: none;
    border-bottom: 1px solid #ddd;
}

/* The search field when it gets focus/clicked on */
#myInput:focus {
    outline: 3px solid #ddd;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    min-width: 230px;
    border: 1px solid #ddd;
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #f1f1f1
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
    display: block;
}


.btn-chart {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.li {
    list-style-type: none;
    text-align: center;
    margin-right: 0.5rem;
    border-radius: 10px;
    padding: .4em;
    font-size: .8em;
}

.liSelected {
    background-color: #198754 !important;
    color: white !important;
    font-weight: bold;
}

.liFreqSelected {
    background-color: #e04abd;
    color: white;
    font-weight: bold;
}

.liFreqSelected#firstHoursFreq {
    background-color: #cd0303;
    color: white;
    font-weight: bold;
}

.liCard {
    list-style-type: none;
    text-align: center;
    margin-right: 0.5rem;
    border-radius: 10px;
    padding: .4em;
}

.liFreq {
    list-style-type: none;
    text-align: center;
    margin-right: 0.5rem;
    border-radius: 10px;
    padding: .4em;
}

.liCardSelected {
    background-color: #575ee3;
    color: white;
    font-weight: bold;
}

.btn-delete,
.li,
.liCard,
.btn-send,
.btn-save,
.btn-cancel {
    cursor: pointer;
}

.accordion-button.collapsed {
    background-color: #e2e3e5;
}

.accordion-button.general:not(.collapsed) {
    background-color: #cff4fc;
}

.accordion-button.toys:not(.collapsed) {
    background-color: #c6d7f2;
}

.accordion-button.positions:not(.collapsed) {
    background-color: #c8dbd3;
}

.accordion-button.locations:not(.collapsed) {
    background-color: #f2e7c4;
}

.accordion-button.misc:not(.collapsed) {
    background-color: #ecccd0;
}

.accordion-button.all:not(.collapsed) {
    background-color: #eee69e;
}

.accordion-button.custom:not(.collapsed) {
    background-color: #d7d8da;
}

.offcanvas {
    overflow-y: auto;
    height: 95vh !important;
    border-radius: 10px 10px 0px 0px;
    min-width: 100vw;
}


#chartdiv {
    width: 100%;
    height: 460px;
}




/* @import url('https://fonts.googleapis.com/css?family=Roboto'); */



/* .card.menu {

    height: 420px;
    background-color: #aeaeaf;
    border-radius: 10px 10px;
} */

.header {
    border-radius: 10px 10px 0px 0px;
    padding: 5px;
    /* background-color: #2A3942; */
}

h3 {
    /* color: #FFFFFF; */
    font-family: 'Roboto', sans-serif;
    margin-left: 1rem;
}

.iconM {
    font-size: 18px;
    margin-left: 170px;
    color: #2f89fc;
}

.icon {
    margin-right: 8px;
}



.body li {
    transition: 1s all;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    padding: 15px;
    /* margin-left: -40px; */
    margin-top: 0px;
    /* color: #fff; */
    list-style: none;
    display: block;
    /* border-top-right-radius: 10px 10px;
    border-bottom-right-radius: 10px 10px; */
    border-bottom: 1px solid #716c6c69;
}

li:hover {
    transition: 1s all;
    /* color: #2f89fc; */
    /* background-color: rgba(42, 56, 65, 0.82); */
    /* border-top-right-radius: 10px 10px; */
    /* border-bottom-right-radius: 10px 10px; */
    cursor: pointer;
}

.body>li {
    float: left;
}

.body li ul {
    background: #1E2B32;
    margin-left: 280px;
    margin-top: -38px;
    display: none;
    position: absolute;
    /* border-top-right-radius: 15px 15px; */
    /* border-bottom-right-radius: 15px 15px; */
}

.body li:hover>ul {
    display: block;
    cursor: pointer;
}





.menu .menu-item .menu-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    list-style: none;
    position: relative;
    color: var(--ct-menu-item-color);
    gap: var(--ct-menu-link-item-gap);
    -webkit-transition: var(--ct-menu-transition);
    transition: var(--ct-menu-transition);
    border-radius: var(--ct-border-radius);
    font-size: var(--ct-menu-item-font-size);
    padding: var(--ct-menu-link-padding-y) var(--ct-menu-link-padding-x);
}


.menu .menu-item .menu-link>.menu-icon {
    width: var(--ct-menu-item-icon-size);
    font-size: var(--ct-menu-item-icon-size);
    line-height: var(--ct-menu-item-icon-size);
    -webkit-transition: var(--ct-menu-transition);
    transition: var(--ct-menu-transition);
}

.menu .menu-item .menu-link>.menu-arrow {
    margin-left: auto;
    -webkit-transition: var(--ct-menu-transition);
    transition: var(--ct-menu-transition);
    line-height: var(--ct-menu-item-font-size);
    font-size: calc(var(--ct-menu-item-font-size) * 1.18);
}

a.menu-text {
    color: black;
    font-size: 1.2em;
    padding-left: 10px;

}

.menu-text {
    color: black;
    font-size: 1.2em
}

li .icon {
    /* margin-right: none !important; */
    font-size: 1.3em;
    margin-right: 5px;
}

.card.menu .body>ul>li>span {
    display: flex;
    color: red !important
}

/* .menuToggle.collapsed .menuList {
    border: none !important;
    background-color: none !important;
}

.menuToggle .menuList {
    border-bottom: 2px solid black;
    border-radius: 0px;
    background-color: rgba(128, 128, 128, 0.154);
} */

.daterangepicker {
    width: auto !important;
    padding: 5px 15px;
    border: 2px solid black;
}

.daterangepicker .ranges li {
    font-size: 1.2em !important;
}

.list-group-item {
    font-size: .9em;
}

.accordion-header {
    margin-bottom: 6px;
}

.form-control-lg {
    padding: 0px;
}

.form-control {
    border: 0px;
    width: auto;
}


.trackerName {
    font-size: .5em !important;
    display: grid !important;
    padding-top: 8px;
}

.trackerName.bigName {
    font-size: .5em !important;
}