@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/static/Inter_18pt-Medium.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'Inter Light';
    src: url('../fonts/Inter/static/Inter_18pt-Light.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'Inter Bold';
    src: url('../fonts/Inter/static/Inter_18pt-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'Inter Extra Bold';
    src: url('../fonts/Inter/static/Inter_18pt-ExtraBold.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'Inter Italic';
    src: url('../fonts/Inter/static/Inter_18pt-Italic.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

.modal-open .modal {
    background: #00000091;
}
/* .statusBubble{
    padding: 5px 15px;
    font-size: small;
    border-radius: 30%;
}

.statusBubble_pending{
    background-color: ;
} */


.selectedAble:hover {
    cursor: pointer;
    background: rgb(240, 248, 248);
}



.grayedOut {
    background: whitesmoke;

}

::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: gray;
}

::-moz-placeholder {
    /* Firefox 19+ */
    color: gray;
}

:-ms-input-placeholder {
    /* IE 10+ */
    color: gray;
}

:-moz-placeholder {
    /* Firefox 18- */
    color: gray;
}

.leftMenuWidth {
    min-width: 180px;
    /* border-right:1px solid #CDDAE7; */
}

.onx-md-padding {
    padding-right: 10px;
}

@media (max-width: 991px) {
    .leftMenuWidth {
        min-width: unset;
    }

    .onx-md-padding {
        padding-right: 0;
    }
}


.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.onx_text_color {
    color: #555780;
}

.onx-btn-outline {
    color: #555780;
    border: 1px solid #555780;
    background-color: transparent;
    border-radius: 5;
}

.onx-btn-outline:hover {
    background-color: #6f71a5;
}

.onx-btn {
    background-color: #555780;
    color: white;
}

.onx-btn:hover {
    background-color: #6f71a5;
    color: white;
}

.onx-btn:focus {
    outline: none;
    box-shadow: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 45px;
    height: 29px;
    border: 0;
    background: url('../img/slider.png');
    cursor: pointer;
    z-index: 9999;
}

.slider::-moz-range-thumb {
    width: 45px;
    height: 29;
    border: 0;
    background: url('../img/slider.png');
    cursor: pointer;
    z-index: 9999;

}





.onx-panel-label {
    font-family: 'Inter Bold';
}

.onx-metric-label {
    font-family: 'Inter Light';
    font-size: small;
}

.onx-metric-value-large {
    font-family: 'Inter Extra Bold';
    font-size: 30px;
    color: #2C2C2C;
    /* line-height: normal; */
}


.progress-container {
    width: 100%;
    background-color: #f66666;
    border-radius: 15px;
    height: 20px;
    position: relative;
    overflow: hidden;
    /* font-family: sans-serif; */
}

.progress-bar {
    background-color: #59c759;
    height: 100%;
    transition: width 0.4s ease;
}

.progress-text {
    /* position: absolute;
    right: 10px;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px black; */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: small;
    display: flex;
    align-items: center;
    justify-content: center;
    /* center horizontally */
    font-weight: bold;
    color: white;
    /* text-shadow: 1px 1px 2px black; */
    pointer-events: none;
    /* ensures text */
}


.invWidth {
    width: 150px;
}

.dateLabel {
    font-size: small;
    color: gray;
    ;
}

.bold {
    font-weight: bold;
}

.onxCell {
    /* background: rgb(236 241 236); */
    border-radius: 5px;
    /* min-height: 50px; */
    padding: 5px 10px;
    font-size: small;
    border: 1px solid #B8B9D0;
}

.darkedBackground {
    background-color: whitesmoke;
}

.onxHeaderCell {
    min-height: 50px;
    padding: 3px;
}


.genreBubble {
    /* background-color: #eeebeb; */
    /* padding: 5px 15px; */
    /* color: white; */
    /* border-radius: 20px; */
    font-size: x-small;
    font-family: 'Inter';
    margin-bottom: 5px;
    color: #02485f;
}

.activeBubble {
    background-color: #5c0944;
    padding: 5px 15px;
    color: white;
    border-radius: 20px;
    font-size: x-small;
}

.draftBubble {
    background-color: rgb(145, 88, 138);
    padding: 5px 15px;
    color: white;
    border-radius: 20px;
    font-size: x-small;
}

.pendingBubble {
    background-color: rgb(175, 145, 23);
    padding: 5px 15px;
    color: white;
    border-radius: 20px;
    font-size: x-small;
}

.confirmedBubble {
    background-color: rgb(40, 71, 164);
    padding: 5px 15px;
    color: white;
    border-radius: 20px;
    font-size: x-small;
}

.rejectedBubble {
    background-color: rgb(212, 35, 35);
    padding: 5px 15px;
    color: white;
    border-radius: 20px;
    font-size: x-small;
}

.inflightBubble {
    background-color: rgb(174, 50, 141);
    padding: 5px 15px;
    color: white;
    border-radius: 20px;
    font-size: x-small;
}

.openedBubble {
    background-color: rgb(37, 76, 139);
    padding: 5px 15px;
    color: white;
    border-radius: 20px;
    font-size: x-small;
}

.newBubble {
    background-color: rgb(11, 156, 42);
    padding: 5px 15px;
    color: white;
    border-radius: 20px;
    font-size: x-small;
}

.completedBubble {
    background-color: rgb(0, 0, 0);
    padding: 5px 15px;
    color: white;
    border-radius: 20px;
    font-size: x-small;
}

.incompletedBubble {
    background-color: rgb(129, 160, 168);
    padding: 5px 15px;
    color: white;
    border-radius: 20px;
    font-size: x-small;
}

.mb-10 {
    margin-bottom: 10px;
}

#leftMenu {
    /* width:px; */
    height: 100vh;
    background-color: white;
    display: inline-block;
}

.availUnit {

    font-size: small;
    color: white;
    background-color: #2cd47b;
    border-radius: 20px;
    box-shadow: 0px 3px 5px 0px #00000033;
    padding: 6px 15px;
}

.evenRow {
    background-color: whitesmoke;
    padding: 10px;
}

.oddRow {
    padding: 10px;
    background-color: rgb(255, 255, 255);
}

.orderMenueOverlay {
    background-color: rgb(169, 133, 133);
    color: white;
}

.paymentsMenueOverlay {
    background-color: rgb(133, 133, 169);
    color: white;
}

.makeGoodMenueOverlay {
    background-color: rgb(133, 169, 156);
    color: white;
}

.reportingMenueOverlay {
    background-color: rgb(169, 133, 164);
    color: white;
}

.inventoryMenueOverlay {
    background-color: rgb(168, 169, 133);
    color: white;
}

.dashboardMenueOverlay {
    background-color: rgb(136, 133, 169);
    color: white;
}

.panelHeader {
    font-weight: bold;
    font-size: 20px;
    color: #555780;
    margin-bottom: 0px;
}


.tv-guide {
    display: flex;
    width: 84vw;
    /* stays inside page/container */
    overflow: hidden;
    /* border: 1px solid #ccc; */
    /* prevents whole thing stretching */
}

.channels {
    min-width: 100px;
    border-right: 1px solid #ccc;
    background: #f8f9fa;
}

.channel-name {
    padding: 10px;
    border-bottom: 1px solid #eee;
    font-weight: bold;
    height: 70px;
    /* display: flex; */
    align-items: center;
}

.shows-wrapper {
    flex: 1;
    max-width: 100%;
    /* limit width to page */
    overflow-x: auto;
    /* horizontal scroll only here */
    background-color: rgb(142, 142, 142);
}

.shows-row {
    display: flex;
    border-bottom: 1px solid #eee;
    height: 70px;
    align-items: center;
    /* background-color: rgb(55, 20, 20); */
    padding-top:2px;
    padding-bottom: 2px;
}

.timing-row {
    display: flex;
    /* border-bottom: 1px solid #eee; */
    
    align-items: center;

}

.timeblock {
    min-width: 150px;
    padding: 3px 10px;
    border-right: 1px solid #6b6b6b;
    /* background: #e9ecef; */
    text-align: left;
    flex-shrink: 0;
    color: white;
    /* height: 30px; */
    background-color: rgb(55, 54, 54);
    font-size: small;
}

.show {
    /* width: 200px; */
    /* padding-left: 5px; */
    border-right: 1px solid rgb(142, 142, 142);
    background: #ffffff;
    text-align: left;
    flex-shrink: 0;
    display: flex;
    border-radius: 5px;
    /* prevents collapsing when scrolling */
}

.pageHeader {
    font-weight: bold;
    font-size: 26px;
    /* color: #7aadb7; */
}


.panelSubheader {
    margin-bottom: 3px;
    font-weight: bold;
    margin-top: 20px;
}

.onxLabel {
    font-weight: bold;
    color: #b4b4b4;
}

.offcanvas-start {
    width: 600px
}


.soldSpot {
    font-size: small;
    /* color:white; */
    background-color: #f3f3ff;
    /* border-radius: 20px; */
    /* box-shadow: 0px 3px 5px 0px #00000033; */
    padding: 3px 10px;
    margin: 2px;
}

.right-border {
    border-right: 1px solid #d3d3d3;
}

.AvailSpot {
    font-size: small;
    /* color:white; */
    background-color: #d1e3d6;
    /* border-radius: 20px; */
    /* box-shadow: 0px 3px 5px 0px #00000033; */
    padding: 3px 10px;
    /* border:1px solid #558061; */
    margin: 2px;
}

.PromoSpot {
    font-size: small;
    ;
    color: white;
    background-color: #000000;
    /* border-radius: 20px; */
    /* box-shadow: 0px 3px 5px 0px #00000033; */
    padding: 3px 10px;
    margin: 2px;
}


.onx-panel-outline {
    border: 1px solid #d6d6d6;
    ;
    padding: 20px;
    padding-top: 10px;
    margin-bottom: 20px;
    min-height: 100px;
    border-radius: 10px
}

.onx-panel-white {
    background-color: white;
    padding: 20px;
    padding-top: 10px;
    margin-bottom: 20px;
    min-height: 100px;
    border-radius: 10px
}

.onxLabel2 {
    color: #b4b4b4;
    /* font-weight: 100; */
    font-size: small;
    ;
    margin-bottom: 3px;
    /* padding-left: 10px; */
}

.onxValue {
    color: #555780;
}

.metricRow {
    margin-bottom: 5px;
    ;
}

.onxPanel {
    padding: 20px;
    background: white;
    border-radius: 20px;
    /* width:300px; */
    /* height: 100%; */
}

.leftMenuItem-selected {
    font-weight: bold;
    /* background: #f7f7f7; */
    /* color: white; */
    padding: 15px 20px;
    /* color:#7aadb7; */
}

#leftMenuHeader {
    background-color: black;
    color: white;
    /* height: 60px; */
}

.leftMenuItem {
    padding: 15px 20px;
}

.leftMenuItem:hover {
    background: #f7f7f7;
    /* color: white; */
    cursor: pointer !important;
}

a:hover {
    color: #7aadb7;
}

.onxInput {
    padding: 10px 20px;
    background: transparent;
    border-radius: 30px;
}

.onxInput_sm {
    padding: 5px 10px;
    background: transparent;
    border-radius: 30px;
}

.ellipsesOneLineField {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: block;
    display: -webkit-box;
}

.ellipsesTwoLineField {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: block;
    display: -webkit-box;
}

.ellipsesThreeLineField {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: block;
    display: -webkit-box;
}

.nav-link.active {
    border: none;
    font-family: 'Inter Bold';
}

.tab-content>.tab-pane {
    padding: 20 40;
}

.canvas {
    padding: 20 0;
    /* min-width:1500px; */
    overflow: scroll;
    height: 100vh;
}

.onxLink {
    text-decoration: none;
    color: inherit;
}

.onxIcon {
    font-size: 26px;
    color: #555780;
}

.onxIcon:hover {
    cursor: pointer;
    color: gray;
}

.roundButton {
    padding: 10px;
    border-radius: 50%;
}

.underlineOnHover:hover {
    text-decoration: underline;
    cursor: pointer;
}

.selectedPage {
    background-color: whitesmoke
}

.roundButton:hover {
    background-color: #efefef;
    cursor: pointer;
}

.disabled-nav-item {
    color: grey;
}

.onxSelect {
    background-color: transparent;
    /* color: white; */
    border-radius: 20px;
    font-size: small;
    padding-top: 9px;
    padding-bottom: 9px;
    font-weight: bold;
    padding-left: 8;
    padding-right: 8;
}

.hoverBar:hover {
    background-color: whitesmoke
}

.onxSelect_sm {
    background-color: rgba(0, 0, 0, 0.083);
    /* color: white; */
    border-radius: 30px;
    padding: 5px 10px;
    font-size: small;
    border: none
}

.onxSelect_sm_light {
    background-color: transparent;
    /* color: white; */
    border-radius: 5px;
    padding: 5px 10px;
    font-size: small;
    /* border:none */
}

.onxSelect_sm:focus {
    outline: none;
    box-shadow: none;
    border: none;
}

.onxSelect_sm_light:focus {
    outline: none;
    box-shadow: none;
    /* border: none; */
}

.onxSelectDark {
    background-color: transparent;
    color: rgb(55, 52, 52);
    border-radius: 20px;
    padding: 5px 10px;
}

body {
    /* background-color: rgb(247, 247, 247); */
    background-color: #f4f6f8;
}

.proposal {
    margin-bottom: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.portal-menu-item {
    /* color:#555780; */
    font-size: medium;
    padding: 6px 15px;
    font-family: 'Inter Light';
}

.portal-menu-item a {
    color: #555780 !important
}

.onx-toggle {
    font-size: small;
    padding: 6px 15px;
}

.onx-toggle-selected {
    font-size: small;
    color: white;
    background-color: #555780;
    border-radius: 20px;
    box-shadow: 0px 3px 5px 0px #00000033;
    padding: 6px 15px;
}


.portal-menu-item-selected a {
    color: white !important;
}

.portal-menu-item-selected {
    background-color: #555780;
    color: white;
    font-size: medium;
    padding: 6px 15px;
    border-radius: 10px;
    width: 100%;
    box-shadow: 0px 3px 5px 0px #00000033;


}

.proposal:hover {
    cursor: pointer;
    background-color: white;
}


.user-circle {
    background: rgb(108 110 119);
    color: #fff;
    /* padding: 5px 20px; */
    border-radius: 50%;
    font-size: 35px;
    width: 70px;
    height: 70px;
    padding-top: 12px;
}

.moduleInput-round {
    border: 1px solid silver;
    box-shadow: none;
    outline: none;
    border-radius: 20px;

}

.transparentInput {
    background-color: transparent !important;
    /* font-size: medium; */
    border: 1px solid black
}

.user-circle-sm {
    background: rgb(108 110 119);
    color: #fff;
    /* padding: 5px 20px; */
    border-radius: 50%;
    font-size: 20px;
    width: 35px;
    height: 35px;
    padding-top: 3px;
    display: inline-block;
}

.user-circle-header {
    background: rgb(108 110 119);
    color: #fff;
    border-radius: 50%;
    font-size: 20px;
    width: 35px;
    height: 35px;
    padding-top: 2px;
    display: inline-block;
}