/*::::::::::::::::::::::::::::: general :::::::::::::::::::::::::::::*/
:root {
    --width-menu: 17%;
    --width-view: 83%;
}

body {
    background: url('./media/background.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;

    align-items: center;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;

    padding: 60px 10px 10px;

    /* font-family: 'Milonga', cursive; */
    font-family: 'Ubuntu', sans-serif;
    color: #ffffff;
}

@media (min-width: 992px) {
    body {
        padding: 10px 10px 10px;
        width: var(--width-view);
        margin-left: var(--width-menu);
    }

    main {
        width: var(--width-menu);
    }
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    color: inherit;
}

.browser-notification {
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-size: 0.8em;
    text-align: center;
}

.max-vh {
    max-height: 100%;
}

/*::::::::::::::::::::::::::::: tables :::::::::::::::::::::::::::::*/
tr.capture:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

/*::::::::::::::::::::::::::::: charts :::::::::::::::::::::::::::::*/
/* .line-chart {
    height: 100%;
    width: 100%;
}
 */
/*::::::::::::::::::::::::::::: bundles :::::::::::::::::::::::::::::*/
.bundle-container {
    border: transparent 2px solid;
    cursor: pointer;
}

.bundle-container:hover {
    background-color: rgba(0, 0, 0, 0.4);
    border-color: #ffffff;
}

.bundle-container.selected {
    background-color: rgba(255, 255, 255, 0.3);
}

.bundle-wrapper {
    border-bottom: 3px transparent solid;
}

.bundle-wrapper:hover {
    border-bottom: 3px #ffffff solid;
}

.payment-method {
    background-color: #ffffff;
    color: #000000;
}

/*::::::::::::::::::::::::::::: images :::::::::::::::::::::::::::::*/
.container-width-image {
    width: 100%;
    height: auto;
}

.dark-image {
    filter: brightness(50%);
}

/*::::::::::::::::::::::::::::: menu :::::::::::::::::::::::::::::*/
.nav-item.active {
    background-color: rgba(255, 255, 255, 0.2);
}

.nav-item {
    border: transparent solid 1px;
}

.nav-item:hover {
    border: #ffffff solid 1px;
}

/*::::::::::::::::::::::::::::: theme :::::::::::::::::::::::::::::*/
nav, main {
    background-color: rgba(5, 15, 34, 0.90) !important;
}

option {
    color: #000000 !important;
}

input[type=checkbox] {
    border: 1px #ffffff solid;
}

::-webkit-file-upload-button {
    background: rgba(0, 0, 0, 0.5) !important;
    padding: 1em;
}

::-ms-browse {
    background: rgba(0, 0, 0, 0.5) !important;
    padding: 1em;
}

tr.active {
    background-color: rgba(255, 255, 255, 0.4);
}

.semi-black {
    background-color: rgba(0, 0, 0, 0.8);
}

.semi-black-link {
    background-color: rgba(0, 0, 0, 0.8);
    padding: 10px 15px;
}

.semi-black-link:hover {
    background-color: rgba(255, 255, 255, 0.8);
    color: #000000 !important;
}

.white-link-small {
    background-color: #ffffff;
    color: #000000;
    padding: 5px 10px;
    border-radius: 10rem;
}

.white-link-small:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
}

.secondary-link-small {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
    padding: 5px 10px;
    border-radius: 10rem;
}

.secondary-link-small:hover {
    background-color: #ffffff;
    color: #000000 !important;
}

.link-padding {
    padding: 10px 15px;
}

input,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea,
select {
    background-color: transparent !important;
    color: white !important;
    -webkit-text-fill-color: white;
    -webkit-box-shadow: transparent;
    box-shadow: transparent;
    transition: background-color 5000s ease-in-out 0s;
    color-scheme: dark;
    border-radius: inherit;
}

select.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

.primary-button {
    background-color: rgba(127, 127, 127, 0.6);
    color: #ffffff;
    border-radius: 15px;
}

.primary-button:hover {
    background-color: #ffffff;
    color: #000000;
}

.primary-button-dark {
    background-color: rgba(127, 127, 127, 1);
    color: #ffffff;
    border-radius: 15px;
}

.primary-button-dark:hover {
    background-color: #000000;
    color: #ffffff;
}

.secondary-button {
    background-color: rgba(0, 0, 0, 0.8);
    color: #ffffff;
    border-radius: 15px;
}

.secondary-button:hover {
    background-color: rgba(255, 255, 255, 0.8);
    color: #000000;
}

.tertiary-button {
    background-color: #8ecae6;
    color: #000000;
    border-radius: 15px;
}

.tertiary-button:hover {
    background-color: rgba(255, 255, 255, 0.8);
    color: #000000;
}

.tertiary-button-light {
    background-color: #8ecae6;
    color: #000000;
    border-radius: 15px;
    border-width: 2px;
}

.tertiary-button-light:hover {
    background-color: rgba(255, 255, 255, 0.8);
    color: #000000;
    border-color: #8ecae6;
}

.theme-bg {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

.theme-bg-op {
    background-color: rgba(5, 15, 34, 1) !important;
}

.theme-rounded {
    border-radius: 20px !important;
}

.status-pending {
    color: grey;
}

.status-inprogress {
    color: orange;
}

.status-complete {
    color: green;
}

.status-cancelled {
    color: red;
}

.input-group-text {
    background-color: transparent !important;
    border: 0 !important;
    color: #ffffff !important;
}

.faqQuestion {
    color: skyblue;
}

/*::::::::::::::::::::::::::::: tree :::::::::::::::::::::::::::::*/
.pending {
    color: grey;
    background-color: transparent;
    font-size: small;
}

.activeUser {
    color: white;
    background-color: rgba(0, 0, 0, 0.8);
    font-size: medium;
}

.tree,
.tree ul,
.tree ol,
.tree li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 50px;
}

.tree {
    margin: 0 0 1em;
    text-align: center;
}

.tree,
.tree ol,
.tree ul {
    display: table;
}

.tree ol,
.tree ul {
    width: 100%;
}

.tree li {
    display: table-cell;
    padding: .5em 0;
    vertical-align: top;
}

.tree li:before {
    outline: solid 1px white;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.tree li:first-child:before {
    left: 50%;
}

.tree li:last-child:before {
    right: 50%;
}

.tree code,
.tree span {
    border: solid .1em white;
    /* border-radius: .2em; */
    display: inline-block;
    margin: 0 .2em .5em;
    padding: .2em .5em;
    position: relative;
}

.tree ul:before,
.tree ol:before,
.tree code:before,
.tree span:before {
    outline: solid 1px white;
    content: "";
    height: .5em;
    left: 50%;
    position: absolute;
}

.tree ol:before,
.tree ul:before {
    top: -.5em;
}

.tree code:before,
.tree span:before {
    top: -.55em;
}

.tree>li {
    margin-top: 0;
    cursor: crosshair;
}

.tree>li:before,
.tree>li:after,
.tree>li>code:before,
.tree>li>span:before {
    outline: none;
}

/*::::::::::::::::::::::::::::: scroll :::::::::::::::::::::::::::::*/
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #ccc;
}

::-webkit-scrollbar-thumb:hover {
    background: #999;
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}