@charset "UTF-8";
/* CSS Document */
html, body {
    height: 100%; /* Important to make the body take the full viewport height */
    margin: 0; /* Removes default margin provided by the browser */

}
.stag{
    opacity: 0;
}
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

select {
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0 1em 0 0;
  margin: 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
}


/*///////////////////////// VARIABLES///////////////////////////////*/
:root {
    --dark-gray-1000: #111111;
    --dark-gray-900: #222222;
    --brand-lime-500: #BED600;
    --brand-lime-400: #E2FE00;
    --bb-primary-rgb:190, 214, 0;
    --dark-gray-800: #2D2D2D;
    --dark-gray-700: #383838;
    --dark-gray-600: #5A5A5A;
    --dark-gray-500: #777777;
    --bb-error-100: #FFE5EC;
    --bb-error-500: #FF6363;
    --bb-error-900: #A50029;
    --bb-positive-100: #E7FEF6;
    --bb-positive-500: #08875B;
    --bb-positive-900: #006643;
    --bb-notice-100: #FFEDE3;
    --bb-notice-500: #FF5C00;
    --bb-notice-900: #B84200;
}

/*//// TGI SKIN VARS ////*/ 
:root {
    --brand-lime-500: #10afff;
    --brand-lime-400: #0022f5;
    --bb-primary-rgb: 16, 175, 2255;
  }

body{background-color: var(--dark-gray-900);font-family: "Plus Jakarta Sans", sans-serif; display: flex;flex-direction: column;justify-content: space-between;}
.nav-link.border-bottom{border-bottom-color: var(--dark-gray-900)!important; color:var(--dark-gray-500)}
.nav-link.border-bottom:hover{color:#fff}
.nav-link.border-bottom.active{border-bottom-color: var(--brand-lime-500)!important; color: #fff }
.text-12{font-size: 12px}
.text-14{font-size: 14px}
.text-16{font-size: 16px}
.text-lime{color:var(--brand-lime-500)}
a.text-lime:hover, button.text-lime:hover{color:var(--brand-lime-400)!important}
.min-dropdown{white-space: nowrap; cursor: pointer}
.bg-bd-dark {background-color: var(--dark-gray-800)}
.bg-bd-ultradark {background-color: var(--dark-gray-900)}
.disabled-text{color:var(--dark-gray-500)}
a.disabled-text:hover{color:var(--dark-gray-500)}
.card-dark{padding:24px; border-radius:12px; height: 100%; width: 100%}
.calendar-max-height{max-height: 366px;}
.games-ul{max-height:270px; overflow-y: scroll!important; margin-bottom: 25px}
.games-ul li:last-child{ padding-bottom: 0px!important}
*{transition: all 0.4s ease-out;}
*:hover{transition: all 0.2s ease-out;}
.trim-text{color:var(--dark-gray-500)}
.text-1-row{-webkit-line-clamp: 1; -webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis; white-space: nowrap; max-width: 100%}
.text-overflow{ overflow: hidden;text-overflow: ellipsis;border: 1px solid #000000;}
video{ border-radius:8px;}
.asset-absolute-trash{ position: absolute; right:14px; top:36px;}
.assets-special-row { padding-right:60px;}
.app-logo {max-width: 165px;margin-left: -5px;}

/*///////////////////////// Thumbs ///////////////////////////////*/

.v-thumb{ border-radius: 8px; position: relative; cursor: pointer}
.v-thumb img{opacity: 0.8}
.v-thumb:hover img{opacity: 1}
.asset-thumb{ background-color: #fff; border-radius: 4px; overflow: hidden;min-width: 42px;}

.play-thumb{ position: absolute; top:50%; left:50%; opacity: 0.8; margin-left: -25px; margin-top: -25px;}
.play-thumb:hover{ opacity: 1}

/*///////////////////////// MODALS ///////////////////////////////*/

.modal-body.video {position: relative;flex: 1 1 auto;padding: 24px;background-color: var(--dark-gray-800);borer-radius:16px;}
/*.modal {background-color:  var(--dark-gray-900); opacity: 0.9}*/
.modal-content{ background-color: var(--dark-gray-800); border-radius:16px; overflow: hidden}
.modal-header{box-shadow:none; border:0; padding: 24px;border-bottom:1px solid var(--dark-gray-700);}
.order-table.modal-body{ padding: 0}
@media (min-width: 992px) {.modal-lg { --bs-modal-width: 835px;}}



/*///////////////////////// SCROLL ///////////////////////////////*/

/* width */

::-webkit-scrollbar {width: 6px; height: 6px;}
/* Track */
::-webkit-scrollbar-track {box-shadow: none; border-radius: 10px;}
/* Handle */
::-webkit-scrollbar-thumb {background: var(--dark-gray-600); border-radius: 10px;}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background: var(--dark-gray-600); }


/*///////////////////////// RADIO AND CHECKBOXES BUTTONS ///////////////////////////////*/

/* Hide the default radio button */
input[type="radio"],input[type="checkbox"] {display: none;}
/* Custom styling for the label */
.game-li div {position: relative;padding-left: 36px;color: #fff;}
/* Custom circle to replace the radio button */
.game-li div:before {content: '';position: absolute;left: 0;top: 3px;width: 20px; height: 20px;border: 1px solid var(--dark-gray-600);border-radius: 50%; display: none;}
.game-li div:hover:before {border: 1px solid #fff;}
/* Style when the radio button is checked */
.game-li input[type="radio"]:checked + label:after {content: '';position: absolute;width: 10px;height: 10px;background-color: #fff;top: 8px;left: 5px;border-radius: 50%;}
.game-li input[type="radio"]:checked + label:before {border: 1px solid #fff;}
.game-li input[type="radio"]:checked + label .asset-thumb{ box-shadow:0px 0px 0px 4px rgba(var(--bb-primary-rgb),1)}

label.radio {position: relative;padding-left: 36px;cursor: pointer;display: inline-block;line-height: 24px;color: #fff;}
/* Custom circle to replace the checkbox button */
label.radio:before {content: '';position: absolute;left: 0;top: 3px;width: 20px; height: 20px;border: 1px solid var(--dark-gray-600);border-radius: 4px}
label.radio:hover:before {border: 1px solid #fff;}

/* Style when the radio button is checked */
input[type="checkbox"]:checked + label.radio:after {content: '';position: absolute;left: 2px;top: 5px;background: url(../img/icons/checkbox-check-dark.svg) no-repeat center center; width: 16px;height: 16px;}
input[type="checkbox"]:checked + label.radio:before {border: 1px solid #fff; background-color: #fff;}


/*///////////////////////// Mobile menu ///////////////////////////////*/

.offcanvas {background-color: var(--dark-gray-700)}
.btn-close { background-image: url("../img/icons/cross.svg"); background-size: 24px;}
@media (max-width: 992px) {
    .nav-link.border-bottom {--bs-border-width:0!important; margin-bottom: 20px!important}
    .no-mobile{display:none}
    .nav-link.border-bottom.active {border-bottom:2px solid var(--brand-lime-500)!important; padding-bottom: 12px!important;}
    .offcanvas-body {overflow-y: initial;}
    .user-dropdown .dropdown-menu{display:block!important; width: 100%}
    .dropdown-item {padding: 0!important;}
    .user-dropdown .bg-bd-dark { background-color: transparent!important;--bs-dropdown-border-color:transparent!important; margin-top: 16px}
    .user-dropdown .bg-bd-dark:hover{background-color: transparent!important}
    .user-dropdown .dropdown-item:hover {background-color: transparent!important}
    .app-logo{width: 120px;}
    .v-thumb { max-width:152px;}
    .table.order-history th:first-of-type{width: 30%!important}
}
    


/*///////////////////////// BUTTONS ///////////////////////////////*/

.btn-medium{ height: 36px;white-space: nowrap; line-height:34px; font-weight:bold; padding:0 20px; text-decoration: none; background: none;cursor: pointer;}
.stroke-btn{ border: 3px solid #fff; border-radius:8px}
.stroke-btn:hover{ background-color: #ffffff10}
.icon-btn{ height: 36px; width: 36px; white-space: nowrap;padding:9px;background: none;cursor: pointer;border:0; background-color:transparent; border-radius: 100%;}
.icon-btn.btn-medium{ height: 27px; width: 27px; white-space: nowrap;padding:6px;background: none;cursor: pointer;border:0; background-color:transparent; border-radius: 100%}
.icon-btn img{vertical-align: top;}
.icon-btn:hover{background-color:var(--dark-gray-900);}
.icon-btn.btn-disabled{ background-color:transparent; cursor: default; opacity: 0.3}
.icon-btn.btn-disabled:hover{background-color:transparent}
.primary-btn{background-color: var(--brand-lime-500); border:0;color: var(--dark-gray-900); text-align: center}
.large-btn{ border-radius: 8px; height: 48px; white-space: nowrap; line-height:46px; padding:0 28px;text-decoration: none; cursor: pointer; font-weight: 500; font-size: 16px; display: inline-block }
.primary-btn:hover{background-color: var(--brand-lime-400); color: var(--dark-gray-900);}
.primary-ghost-btn{background-color:transparent;color:var(--brand-lime-500); font-weight: inherit!important}
.primary-ghost-btn:hover{color:var(--brand-lime-500); background-color:var(--dark-gray-800);}
.primary-btn img.dark-icon{filter: brightness(0); vertical-align:middle;}
.link-btn{ border:0; background-color: transparent; padding: 0}




/*///////////////////////// tables ///////////////////////////////*/

.order-table .table>:not(caption)>*>* { padding: 12px; background-color: transparent;border-bottom: 0px;}
.order-table .table.assets-table{ padding-bottom: 24px;}
.order-table .table.assets-table td{ padding: 0 24px;}
.order-table .table.order-table-detail td{ vertical-align: top;}
.assets-table + .separator{border-bottom:1px solid var(--dark-gray-700); width: calc(100% - 48px);}
.order-table .table th{font-size:12px; font-weight: 400;color: var(--dark-gray-600); padding-bottom: 12px!important}
.order-table .table td{background-color: var(--dark-gray-800); font-size:14px;vertical-align: middle;}
.order-table .table td:first-of-type{border-radius:8px 0px 0px 8px; }
.order-table .table td:last-of-type {border-radius:0px 8px 8px 0px; }
.order-table .v-thumb{ border-radius:4px}
.table-th-order{color: var(--dark-gray-600); text-decoration: none; cursor:pointer}
.table-th-order:hover{color: var(--dark-gray-500);}
.table-th-order:hover img{opacity: 0.5}
.table-th-order img{ opacity: 0.3}
td:nth-of-typ(odd) {background-color: aqua!important;}
.third-td{ width:calc(100% / 3); box-sizing: content-box;}
.table-dark{min-width:900px; background-color: transparent}
.order-history-table tbody tr{border-bottom:1px solid var(--dark-gray-700); }
.order-history-table tbody tr:last-of-type{border-bottom:none;}
.order-history-table tbody tr td{border-radius: 0px!important;}
.order-history-table tr:first-of-type td:first-of-type {border-radius: 8px 0px 0px 0px!important;}
.order-history-table tr:first-of-type td:last-of-type {border-radius: 0px 8px 0px 0px!important;}
.order-history-table tr:last-of-type td:first-of-type {border-radius: 0px 0px 0px 8px!important;}
.order-history-table tr:last-of-type td:last-of-type {border-radius: 0px 0px 8px 0px!important;}
.order-history-table tr td:first-of-type  { padding-left: 24px;}


/*///////////////////////// badge ///////////////////////////////*/

.bg-complete{ background-color: var(--bb-positive-100);color: var(--bb-positive-900); }
.bg-pending{ background-color: var(--bb-notice-100); color: var(--bb-notice-900);}
.badge.bg-tag{ background-color: var(--dark-gray-700); ; color: #fff;padding: 8px 12px;font-size:10px; font-weight: 400}
.badge.status{ text-transform: uppercase;}
.badge{padding: 4px 8px; border-radius: 4px; font-size:12px;}


/*///////////////////////// tooltip ///////////////////////////////*/
.tooltip.show {opacity: 1;}
.tooltip {--bs-tooltip-bg:  var(--dark-gray-1000);--bs-tooltip-font-size: 12px;}
.tooltip-inner {padding: 10px 15px 10px 20px;background-color: var(--dark-gray-1000);color: #fff;border: none;text-align: left;opacity: 1;}
.tooltip-arrow{ transition: none;}
.tooltip-launcher{ cursor:pointer;white-space: nowrap;}



/*/////////////////////////  inputs ///////////////////////////////*/
.dark-input {width: 100%;padding: 5px 10px;font-size: 16px;font-weight: 400;line-height: 1.5;color: #fff;background-color: var(--dark-gray-900);border: 1px solid var(--dark-gray-600); border-radius: 8px!important;}
.large-input{ height:48px; padding: 8px 12px;}
.dark-input::placeholder {color: var(--dark-gray-500);}
.dark-input:focus {color: #fff;background-color: var(--dark-gray-900);border: 1px solid var(--dark-gray-500);outline: 0;box-shadow:none;}
.input-group.search-order-input {align-items: inherit;width:auto!important}
.search-order-input button{margin-left: -38px!important; border-top-left-radius: 100%!important;border-bottom-left-radius: 100%!important}
.search-order-input input{max-width: 320px;min-width: 236px;}
.floating-input-btn{ right: 20px; top:36px}
.select-input .floating-input-btn{ right: 16px; top:40px}
.select-input .floating-input-btn img{ width:16px}


/*/////////////////////////  pagination  ///////////////////////////////*/

.active>.page-link, .page-link.active { z-index: 3;color: #fff;border:none!important;border-radius:4px;}
.pagination {--bs-pagination-bg: transparent;--bs-pagination-border-width: 0px;--bs-pagination-disabled-bg: transparent;--bs-pagination-disabled-color: var(--dark-gray-600);}
.page-link {color: #fff;border-radius: 4px!important;}
.page-item{ min-width:36px; text-align:center}
.page-item:last-child .page-link {border-top-right-radius: 4px;border-bottom-right-radius: 4px;}
.page-link:hover {z-index: 2;color: #fff;background-color: var(--dark-gray-800);border-color: transparent;}
.page-link2:hover {z-index: 2;color: #fff;background-color: #222222;border-color: transparent;}
.page-link:focus {z-index: 3;color: #fff;background-color: var(--dark-gray-700);outline: 0; box-shadow: none;}
.active>.page-link, .page-link.active {color: #fff;background-color: var(--dark-gray-600);border-color: transparent}

/*/////////////////////////  Login  ///////////////////////////////*/

.login-container{ max-width:400px;}
.user-input, .password-input { position: relative; }
.user-input input, .password-input input{padding-left:48px;}
.user-input:before{ opacity:0.6;content:""; position:absolute; background-image: url("../img/icons/user.svg"); width:24px; height:24px; color:#fff; top:12px; left:12px}
.password-input:before{ opacity:0.6;content:""; position:absolute; background-image: url("../img/icons/password.svg"); width:24px; height:24px; color:#fff; top:12px; left:12px}
.mt-n1 {margin-top: -0.25rem !important;}

/*/////////////////////////  Alerts  ///////////////////////////////*/

.alert-danger {
    --bs-alert-color: var(--bb-error-900);
    --bs-alert-bg:  var(--bb-error-100);
    --bs-alert-border-color: var(--bb-error-100);
    border:1px solid var(--bb-error-900);
    padding-left: 48px;
}

.alert-danger:before{ content:""; position:absolute; background-image: url("../img/icons/error-atention-900.svg"); width:24px; height:24px; color:#fff; top:16px; left:12px}

/*/////////////////////////  Pitch selector  ///////////////////////////////*/
.pitch-trash{right:-22px!important; top:4px;}
.pitch-trash:hover{background-color:var(--dark-gray-700) }
.pitch-trash img{ width:16px; filter: brightness(2) saturate(0)}
.pitch-selector{padding:0}

.pitch-trash-image{
    right:2px!important; top:10px;
    background-color:var(--dark-gray-700) !important;
    border:2px solid white !important;
    position:absolute;
}
.pitch-trash-image:hover{border:2px solid black !important; }
.pitch-trash-image img{
    filter: brightness(2) saturate(0);
    width: 15px;
    left: -2px;
    position: relative;
    top: -1px
}


.pitch-selector button.active{
    background-size: 40px auto;
    min-width: 23px;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;
}

.hoverButton:hover{
    border-color: var(--brand-lime-500)
}

/*/////////////////////////  Asset selector modal ///////////////////////////////*/
.custom-asset-input .asset-li label:before {
    top: 14px;
}
.custom-asset-input .asset-li input[type="radio"]:checked + label:after {
    top: 19px!important;
}
.asset-li{
    overflow:hidden;
}

/*/////////////////////////  Sticky header ///////////////////////////////*/
.navbar-brand img{width:100%; transition: all .4s;}
.scroll-active .navbar-brand img{width:60%; transition: all .4s;}
header.scroll-active {background-color: var(--dark-gray-900);transition: all .4s;}
header {background-color:transparent;transition: all .4s;}


/*/////////////////////////  assets page ///////////////////////////////*/
p.icon-btn.bg-bd-soft-dark {background-color: var(--dark-gray-700)}
p.icon-btn.bg-bd-soft-dark:hover {background-color: var(--dark-gray-900)}
.assets-filter .dropdown button {background-color: var(--dark-gray-800);text-align: left;color: #fff;border-color: var(--dark-gray-600);height: 48px;font-size: 14px;}
@media (max-width: 992px) {.assets-filter .dropdown .dropdown-item {padding: 12px 12px!important;}}
@media (max-width: 768px) {.input-group.search-order-input {width: 100% !important; max-width: inherit!important}}