/* PROJECT CSS IN HERE PLEASE */

/* body {
    overflow: hidden !important; 
} */



/* PREPARING ROOT CSS STYLING */
html {
    scroll-behavior: smooth;
 }
 
:root {
    --hero-gradient: linear-gradient(141deg, #1f191a 0, #363636 71%, #46403f 100%) !important;
    --bkg: #00ab7e;
    --buttonBkg: #00ab7e;
    --txt: #ffffff;
    --txt-disabled: #aaaaaa;
    --modal-txt: #ffffff;
    --bd: #ffffff;
    --scroll-track-bkg: #2a2a2a;
    --scroll-thumb: #6a6a6a;
    --scroll-thumb-hover: #4a4a4a;
    --select-el: #ffffff;
    --modal-head-border: #676767;
    --modal-bkg: #363636;
    --stripe-even: #3c3c3c;
    --stripe-odd: #444343;
    --non-action: #7a7a7a;
    --box-outline: #ffffff;
    --select-after: #ffffff;
    --picker-indicator: #ffffff;
    --placeholder-text: #c4c2c2;
    --cancel-button-text: #ffffff;
    --combo-bkg: #3c3c3c;
    --dropdown-color: #3c3c3c;
    --footer-text: '#ffffff';
    --svgMainColour: '#ffffff';
    --dragHandleColour: '#ffffff';
    --tableTextAndGrid: '#ffffff';
    --highlightGreen: #00d49c;

    --expand-toggle-bkg: #ffffff;
    --expand-toggle-txt: #3c3c3c;
    --expand-toggle-bdr: #3c3c3c;
    --borderRadius: 12px;
    --mediumRadius: 12px;
    
}


body {
    color: var(--txt) !important;
    /* background-color: var(--bkg) !important; */
}

.reCaptcha-box {
    display: flex;
    align-items: center;
    justify-content: center;
}


p {
    color: var(--txt) !important;
}

h1, h2, h3, h4 {
    color: var(--txt) !important;
}


label {
    color: var(--txt) !important;
}

.modal {
    color: var(--txt);
    background-color: #363636a3;
}

.modal-background {
    color: var(--txt);
    background-color: #000000ab !important;
}


/* SCROLL BAR STYLING */

/* WIDTH */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}


/* TRACK */

::-webkit-scrollbar-track {
	background-color: var(--scroll-track-bkg);
}


/* HANDLE */

::-webkit-scrollbar-thumb {
    background:var(--scroll-thumb);
    border-radius: 10px;
}


/* HANDLE ON HOVER */

::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-thumb-hover);
}



.button.is-grey {
    background-color: #757575;
    border-color: transparent;
    color: var(--cancel-button-text);
  }

.button.is-grey:hover {
    color: var(--cancel-button-text) !important;
}

/* SVG STYLING */

.arrow-svg-colour {
    fill: var(--svgMainColour);
}

.upload-svg-colour {
    fill: var(--svgMainColour);
}


.plus-svg-colour {
    fill: var(--svgMainColour);
}

.edit-svg-colour {
    fill: var(--svgMainColour);
}


#edit-retailer:hover > svg g .edit-svg-colour  {
    fill: var(--highlightGreen) !important;
}


#edit-store:hover > svg g .edit-svg-colour  {
    fill: var(--highlightGreen) !important;
}


.cls-1 {
    fill: white;
}

.cls-2 {
    fill: transparent;
}



.copy-icon-svg-colour {
    fill: var(--svgMainColour);
}

.tick-icon-svg-colour {
    fill: var(--svgMainColour);
}


/* SELECT ELEMENTS */


.select-large {
    width: 100% !important;
}

/* .select::after {

    border-color: var(--bd);
} */




.select select {
    border-width: 2px;
    border-color:var(--bd) !important;
    background-color: rgba(0, 0, 0, 0) !important;
    color:var(--txt) !important;

}


select option {
    margin: 40px;
    /* background: rgba(0, 0, 0, 0); */
    background: var(--dropdown-color);
    color:var(--txt);

}


/* DROPDOWN ARROW COLOR */

.select:after {

    border-color: var(--select-after) !important;
    color: var(--select-after) !important;
  }




.input {
    color: var(--txt);
}

a { 
    color: inherit; 
} 

.shadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


.combo-bkg {
    overflow-y:scroll; 
    height:260px; 
    /* background-color: var(--combo-bkg); */
}

.combo-uploader-bkg {
    /* overflow-y:scroll;  */
    height:260px; 
    /* background-color: var(--combo-bkg); */
}


/* TESTING FLEX BOX LAYOUT */

html, body {
    width: 100%;
    height: 100%;
}

.new-container {
	min-height: 100%;
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-columns: 100%;
}


.new-main {
    flex-grow: 1;
}

.new-header, .new-main, .new-footer {
    flex-shrink: 0;
}


.new-footer {
    color:var(--footer-text) !important;
    background-color: #00ab7e;
	/* background: linear-gradient(-180deg, #00ab7e, #000000, #00ab7e, #000000); */
    /* background: linear-gradient(to bottom, #00ab7e, #007556); */
	/* background-size: 400% 400%;; */
	/* animation: gradient 15s ease infinite; */
}


.hero.is-dark.is-bold {
    background-image: var(--hero-gradient) !important;
    color:var(--txt)
}



.hero.is-header {
    background-color: var(--bkg);
    color: var(--txt) !important;
    text-decoration: none !important;
  }

.is-header {
    background-color: var(--bkg);
    color: var(--txt) !important;
    text-decoration: none !important;

}
/* @keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
} */



/* INFO MODAL STYLING */

.info-modal-card {
    width: 90%;
    /* height: 90%; */
}

/* FULL WIDTH CSS RULE - USED FOR CONTAINER DIVS */

.fill-width {
    width: 100% !important;
}



/* FOR OPTION DROPDOWN AND INFO LAYOUT - USES FLEXBOX TO KEEP ICON STATIC POSITION NEXT TO MACHINE DROPDOWN */

.icon-col-width {
    width: 70px !important;
}


.flex-it {
    display: flex;
}


/* FOR VERTICAL ALIGNMENT */

.v-align {
    display: flex;
    justify-content: center;
    align-items: center;
}



/* .is-1 {
  flex: none;
  width: 4.165% !important;
} */


.is-5-percent {
    flex: none;
    width: 5% !important;
}


.is-7point5-percent {
    flex: none;
    width: 5% !important;
}

.is-10-percent {
    flex: none;
    width: 10% !important;
}

.is-15-percent {
    flex: none;
    width: 15% !important;
}

/* DOWNLOAD ICON STYLING */




.dl-icon {
    margin-right: 10px;
    width: 24px;
    margin-top: 8px;
}



/* GENERIC OUTLINE BUTTON */

.gen-button {
    border-radius: 9999px;
    border: 1px solid;
    border-color: var(--bd);
    background-color: hsla(0, 0%, 0%, 0);
    height: 2.5em;
    width: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-icon {
    width: 18px;

}


.theme-icon-size {
    width: 24px;
}

/* MODAL STYLING */

.custom-modal-buttons {
    width: 90%;
}



.modal-card-head {
    color:var(--modal-txt);
    background-color: var(--bkg);
    border-bottom: 1px solid;
    border-color: var(--modal-head-border);
}

.modal-card-title {
    color: var(--modal-txt) !important;
    background-color: var(--bkg) !important;

}

.modal-card-body {
    color: var(--txt);
    background-color: var(--modal-bkg);
}

.modal-card-foot {
    color: var(--txt);
    background-color: var(--modal-bkg);
    border: 0px;
}



/* BREADCRUMBS STYLING */

.breadcrumb-padding {
    padding-bottom: 22px;
}

.spacing {
    letter-spacing: 0.5px;
}

.spacing-large {
    letter-spacing: 14px;
}


/* STRIPED COMBO BOX DATA */

div.stripe-dark:nth-child(even) {
    background: var(--stripe-even);
}

div.stripe-dark:nth-child(odd) { 
    background: var(--stripe-odd);
}

.no-select {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet Explorer/Edge */
  user-select: none;      /* Standard */
}

.shorten-text {
  white-space: nowrap;        
  overflow: hidden;           
  text-overflow: ellipsis;   
}

/* div.stripe-light:nth-child(even) {
    background: #e7e7e7;
}

div.stripe-light:nth-child(odd) { 
    background: #cacaca;
} */

/* MISC CSS CLASS FOR UNDERLINING */

.underlined {
    text-decoration: underline !important;
}


/* ADMIN SECTION STYLING */

.action {
    border: 2px solid;
    border-color: var(--bd);
    padding: 12px;
    border-radius: 20px;
    transition: fill 0.5s ease;
}

.action.highlight:hover {
    border: 2px solid;
    border-color:var(--highlightGreen);
    padding: 12px;
    border-radius: 20px;
}

.action.highlight:hover > div p {
    color: var(--highlightGreen) !important;
}

.action.highlight:hover > div svg g path.arrow-svg-colour {
    border: 2px solid;
    border-color:var(--highlightGreen);
    padding: 12px;
    border-radius: 20px;
    fill: var(--highlightGreen) !important;
}


.copy-to-clipboard:hover svg path.copy-icon-svg-colour {
    fill: var(--highlightGreen) !important;
    /* Optional styles for highlighting */
    border: 2px solid var(--highlightGreen);
    padding: 12px;
    border-radius: 20px;
    cursor: pointer;
}



.action.highlight:hover > div svg g path.plus-svg-colour {
    border: 2px solid;
    border-color:var(--highlightGreen);
    padding: 12px;
    border-radius: 20px;
    fill: var(--highlightGreen) !important;
}

.action.highlight:hover > div svg g polygon.plus-svg-colour {
    border: 2px solid;
    border-color:var(--highlightGreen);
    padding: 12px;
    border-radius: 20px;
    fill: var(--highlightGreen) !important;
}


/* .action:hover > div div u {
    color: var(--highlightGreen) !important;
} */

.non-action {
    border: 2px solid;
    border-color: var(--non-action);
    color: var(--non-action) !important;
    padding: 12px;
    border-radius: 20px;
}

.non-action-text {
    color: var(--non-action) !important;
}


.inactive-arrow-svg-colour {
    fill: var(--non-action);
}


#admin-icon:hover > svg g path.cls-1 {
    fill: var(--highlightGreen) !important;
}


#home-icon:hover > svg g path.cls-1 {
    fill: var(--highlightGreen) !important;
}


#theme-toggle:hover > svg g path.cls-1 {
    fill: var(--highlightGreen) !important;
}


#logout:hover > svg g path.cls-1 {
    fill: var(--highlightGreen) !important;
}

.download-icon-colour {
    fill: var(--svgMainColour);
}

#download-icon:hover > svg g polygon.download-icon-colour {
    fill: var(--highlightGreen) !important;
}


#download-icon {
    width: 30px;
}






a:hover {
    color: var(--highlightGreen) !important;
}






.back-button-padding {
    padding-top: 40px;
    padding-bottom: 40px;
}

.zero-font {
    font-size: 0px !important;
}

.box-outline {
    border: 1px solid;
    border-color: var(--box-outline);
    padding: 12px;
    border-radius: 9999px;
}

.input-height {
    height: 40px;
    max-height: 40px;
}

.input-font-size {
    font-size: 12px;
}



/* 404 STYLING */

.four-oh-four-header {
    font-size: 60px;
}


.four-oh-four-div {
    display: flex; /* establish flex container */
    flex-direction: column; /* make main-axis vertical */
    justify-content: center; /* align items vertically, in this case */
    align-items: center; /* align items horizontally, in this case */
    height: 65vh; /* for demo purposes */

}

.photoroll-div {
    display: flex; /* establish flex container */
    flex-direction: column; /* make main-axis vertical */
    justify-content: center; /* align items vertically, in this case */
    align-items: center; /* align items horizontally, in this case */
    height: 40vh; 

}


/* NO DATA CENTRALLY ALLIGNED TEXT*/

.no-data-div {
    display: flex; /* establish flex container */
    flex-direction: column; /* make main-axis vertical */
    justify-content: center; /* align items vertically, in this case */
    align-items: center; /* align items horizontally, in this case */
    height: 260px; /* for demo purposes */

}


.no-asset-div {
    display: flex; /* establish flex container */
    flex-direction: column; /* make main-axis vertical */
    justify-content: center; /* align items vertically, in this case */
    align-items: center; /* align items horizontally, in this case */
    height: 100%; /* for demo purposes */

}

.no-data-box {
    width: 300px;
    margin: 5px;
    text-align: center;
}


/* LOADING SPINNER */

.spinner {
    width: 30px;
    padding: 3px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #d8d8d8;
    --_m: 
      conic-gradient(#0000 10%,#000),
      linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
            mask: var(--_m);
    -webkit-mask-composite: source-out;
            mask-composite: subtract;
    animation: spinner 1s infinite linear;
  }
  @keyframes spinner {to{transform: rotate(1turn)}}



/* FADE IN CSS CLASS - NO ANIMATE.CSS REQUIRED. */

.fade-in-el { 
    animation: fadeInNew 1500ms; 
}

.fade-in-el-fast { 
    animation: fadeInNew 500ms; 
}

@keyframes fadeInNew {
    0% { opacity: 0; }
    100% { opacity: 1; }
}




#customer-list-select:hover,
#product-list-select:hover,
#machine-list-select:hover,
#start:hover,
#end:hover {
    border-color: var(--highlightGreen) !important;
    color: var(--highlightGreen) !important;
}




/* USAGE DATE HEADER */

.usage-date-header {
    padding-bottom: 6px !important;
}


/* DATE PICKER STYLING */
input[type="date"]{
    background: transparent;
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-left: 5px;
    margin-right: 5px;
    color: var(--txt);
    font-size: 12px;
    border-radius: 999px;
    border: 2px solid;
    border-color:var(--bd);
}

input[disabled]{
    background: transparent !important;
    color: var(--txt-disabled) !important;
    border-color:var(--txt-disabled) !important;
}


.input-style-light {
    color: #000000;
    border: 1px solid rgb(0, 0, 0);
}

.input-style-dark {
    color: var(--txt);
    border: 1px solid rgb(255, 255, 255);
}

::-webkit-calendar-picker-indicator{
    background-color: var(--picker-indicator);
    padding: 5px;
    cursor: pointer;
    border-radius: 3px;
}

.select:hover::after {
    border-color: var(--highlightGreen) !important;
    color: var(--highlightGreen) !important;
}

.select-large:hover {
    border-color: var(--highlightGreen) !important;
    color: var(--highlightGreen) !important
}

/* INPUT ELEMENT STYLING */

#search-box {
    width: 32%;
    text-align: left;
}
  
input[type="text"] {
    background: transparent;
    border: 1px solid;
    border-color: var(--bd);
}

input[type="number"] {
    background: transparent;
    border: 1px solid;
    border-color: var(--bd);
}

input[type="text"]:hover {
    background: transparent;
    border: 1px solid;
    border-color: var(--bd);
}

input[type="password"] {
    background: transparent;
    border: 1px solid;
    border-color: var(--bd);
}

input[type="password"]:hover {
    background: transparent;
    border: 1px solid;
    border-color: var(--bd);
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--placeholder-text) !important;
    opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--txt) !important;
}

.login-container {
    margin: auto !important;
}

.message-box {
    height: 50px;
}

.logo-container {
    display: flex;
    align-items: center;
    padding: 24px;
}
  
.logo-word {
    font-size: 1.4rem !important;
}

.search-pad-el {
    padding-top: 16px;
    padding-bottom: 24px;
}


.modal-container-inner-padding {
    padding: 32px;
}

.tiny-pad-el {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.sml-pad-el {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.top-sml-pad-el {
    padding-top: 6px !important;
}

.bottom-sml-pad-el {
    padding-bottom: 8px !important;
}

.container {
    padding:20px !important;
}

.traffic-light-padding {
    padding: 12px;
}

.number-large {
    font-size: 72px;
}

.number-huge {
    font-size: 200px;
}

.nav-icon-padding {
    padding-left: 12px;
}

.top-store-list {
    font-size: 14px;
}

.top-store-list-container {
    padding-top: 14px;
}

.top-ten-store-list-container {
    padding-top: 14px;
}

.store-details-align {
    text-align: right !important;
}

.set-bottom-container {
    position: relative;
    height: 100%;
}

.set-bottom {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.letter-spacing {
    letter-spacing: 0.5px;
}

.overview-chart {
    height: 30vh !important;
}

.chart-page {
    height: 60vh !important;
}


.status-large {
    font-size: 24px !important;
}

.traffic-light-text {
    font-size: 12px !important;
}


/* SET CURSOR STYLING FOR CLICKABLE ELEMENTS */

#all-kiosks-list, 
#sales, 
#all-top-stores, 
#online, 
#warning, 
#offline, 
#charts, 
#page, 
#filter, 
#logout, 
#home-icon, 
#admin-icon, 
#admin-return-btn, 
#create-user, 
#delete-user, 
#manage-machine, 
#manage-users, 
#details,
#theme-toggle,
#csmbls-dl,
#hfsi-dl,
#al-dl,
#pbg-dl,
#terms,
#logo-trigger,
#download-icon,
.delete-icon,
.info-icon,
.copy-to-clipboard,
#edit-retailer,
#edit-store,
#screensaver-upload-trigger,
#logo-upload-trigger,
#previous-page,
#next-page {
    cursor: pointer;
}

/* STYLING FOR FILTER BUTTONS */

.button-filter {
    margin-top: 7px;

}





/* STYLING FOR KIOSK MINI CARD DETAILS BUTTON */
.detail {
    font-size: 14px !important;
}

/* STYLING FOR PROGRESS BAR COLOURS ON PRINTER STATUS PAGE */

.progress-margin {
    margin-bottom: 0px !important;
}

.progress-padding {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.is-tiny {
    height: 0.4rem;
}

.progress.is-cyan::-webkit-progress-value {
    background-color: skyblue !important;
}

.progress.is-cyan::-moz-progress-bar {
    background-color: skyblue !important;
}

.progress.is-cyan::-ms-fill {
    background-color: skyblue !important;
}

.progress.is-magenta::-webkit-progress-value {
    background-color: magenta !important;
}

.progress.is-magenta::-moz-progress-bar {
    background-color: magenta !important;
}

.progress.is-magenta::-ms-fill {
    background-color: magenta !important;
}

.progress.is-yellow::-webkit-progress-value {
    background-color: yellow !important;
}

.progress.is-yellow::-moz-progress-bar {
    background-color: yellow !important;
}

.progress.is-yellow::-ms-fill {
    background-color: yellow !important;
}

.progress.is-black::-webkit-progress-value {
    background-color: black !important;
}

.progress.is-black::-moz-progress-bar {
    background-color: black !important;
}

.progress.is-black::-ms-fill {
    background-color: black !important;
}



/* SPECIAL COLOURS */

/* GOLD */

.progress.is-gld::-webkit-progress-value {
    background-color: gold !important;
}

.progress.is-gld::-moz-progress-bar {
    background-color: gold !important;
}

.progress.is-gld::-ms-fill {
    background-color: gold !important;
}

/* SILVER */

.progress.is-slv::-webkit-progress-value {
    background-color: rgb(135, 135, 135) !important;
}

.progress.is-slv::-moz-progress-bar {
    background-color: rgb(135, 135, 135) !important;
}

.progress.is-slv::-ms-fill {
    background-color: rgb(135, 135, 135) !important;
}

/* WHITE */

.progress.is-wht::-webkit-progress-value {
    background-color: #ffffff !important;
}

.progress.is-wht::-moz-progress-bar {
    background-color: #ffffff !important;
}

.progress.is-wht::-ms-fill {
    background-color: #ffffff !important;
}

/* TX */

.progress.is-tx::-webkit-progress-value {
    background-color: #0000006e !important;
}

.progress.is-tx::-moz-progress-bar {
    background-color: #0000006e !important;
}

.progress.is-tx::-ms-fill {
    background-color: #0000006e !important;
}

/* CLR */

.progress.is-clr::-webkit-progress-value {
    background-color: #0000006e !important;
}

.progress.is-clr::-moz-progress-bar {
    background-color: #0000006e !important;
}

.progress.is-clr::-ms-fill {
    background-color: #0000006e !important;
}

/* P */

.progress.is-p::-webkit-progress-value {
    background-color: pink !important;
}

.progress.is-p::-moz-progress-bar {
    background-color: pink !important;
}

.progress.progress.is-clr::-moz-progress-bar::-ms-fill {
    background-color: pink !important;
}






/* SPECIAL COLOURS FOR PROGRESS BARS */
.progress.is-sp1::-webkit-progress-value {
    background-color: #54d300 !important;
}

.progress.is-sp1::-moz-progress-bar {
    background-color: #54d300 !important;
}

.progress.is-sp1::-ms-fill {
    background-color: #54d300 !important;
}

.progress.is-sp2::-webkit-progress-value {
    background-color: #54d300 !important;
}

.progress.is-sp2::-moz-progress-bar {
    background-color: #54d300 !important;
}

.progress.is-sp2::-ms-fill {
    background-color: #54d300 !important;
}





/* WIDTH MEDIA QUERIES */

@media screen and (max-height: 921px) {
    .photoroll-div {
        height: 10vh; 
    }
  }


@media only screen and (max-width: 375px) {

    .small-nav-icon {
        max-height: 28px !important;
    }

    .family-code {
        display: none;
    }

    .product-code {
        width: 50% !important;
    }
    
    .friendly-name {
        width: 50% !important;
    }

    
    .info-modal-card {
        width: 90%;
        /* height: 90%; */
    }

    #theme-toggle {
        display: none;
    }
    

}

@media only screen and (max-width: 330px) {

    .small-nav-icon {
        max-height: 23px !important;
    }

    .family-code {
        display: none;
    }

    .product-code {
        width: 50% !important;
    }
    
    .friendly-name {
        width: 50% !important;
    }

    .info-modal-card {
        width: 90%;
        /* height: 90%; */
    }

    #theme-toggle {
        display: none;
    }

    .spacing-large {
        letter-spacing: 1px;
    }
}



@media only screen and (max-width: 490px) {
    .spacing-large {
        letter-spacing: 5px;
    }
}

@media only screen and (max-width: 350px) {
    .spacing-large {
        letter-spacing: 2px;
    }
}

@media only screen and (min-width: 768px) {
    
    .number-large {
        font-size: 60px;
    }

    .number-huge {
        font-size: 100px;
    }

    .number-medium {
        font-size: 60px;
    }

    .overview-chart {
        height: 30vh !important;
    }

    .chart-page {
        height: 40vh !important;
    }

    .traffic-light-text {
        font-size: 22px !important;
    }


	
}


@media only screen and (max-width: 768px) {

    .number-large {
        font-size: 60px;
    }

    .number-huge {
        font-size: 100px;
    }

    .number-medium {
        font-size: 60px;
    }

    .store-details-align {
        text-align: left !important;
    }

    .overview-chart {
        height: 30vh !important;
    }

    .chart-page {
        height: 40vh !important;
    }

    .traffic-light-text {
        font-size: 22px !important;
    }

    .top-ten-store-list-container {
        padding-top: 0px;
    }

    .reduce-top-space {
        padding-top: 0px !important;
    }

    .reduce-bottom-space {
        padding-bottom: 0px !important;
    }
	
	/* ::-webkit-scrollbar {
		display: none;
	} */

    .button-filter:hover {
        color: var(--txt) !important;
        background-color: #00000000 !important;
        border-color: var(--bd) !important;
    }

    #search-box {
        width: 100%;
    }


    .modal-card {
        width: 90% !important;
    }

    #theme-toggle {
        display: none;
    }



}



@media only screen and (min-width: 768px) {

    .number-large {
        font-size: 60px;
    }

    .number-huge {
        font-size: 100px;
    }

    .number-medium {
        font-size: 60px;
    }

    .store-details-align {
        text-align: left !important;
    }

    .overview-chart {
        height: 30vh !important;
    }

    .chart-page {
        height: 40vh !important;
    }

    .traffic-light-text {
        font-size: 16px !important;
    }  

}




@media only screen and (min-width: 1024px) {

    .number-large {
        font-size: 40px;
    }

    .number-huge {
        font-size: 152px;
    }

    .number-medium {
        font-size: 40px;
    }

    .chart-page {
        height: 50vh !important;
    }

    .traffic-light-text {
        font-size: 20px !important;
    }

}

@media only screen and (min-width: 1216px) {

    .number-large {
        font-size: 60px;
    }

    .number-huge {
        font-size: 160px;
    }

    .chart-page {
        height: 70vh !important;
    }

    .traffic-light-text {
        font-size: 20px !important;
    }

}

@media only screen and (min-width: 1408px) {

    .number-large {
        font-size: 60px;
    }

    .number-huge {
        font-size: 200px;
    }

    .chart-page {
        height: 70vh !important;
    }

    .traffic-light-text {
        font-size: 20px !important;
    }

}


.retailer-options-panel{

    margin-top: 50px !important;
}

table, th, td {
    border: 2px solid var(--tableTextAndGrid);
    padding: 12px;
    color:  var(--tableTextAndGrid) !important;
    border-collapse: collapse;
  }

.kiosk-action-buttons{
    margin-top: 14px;
}


.expand-button {
    margin-bottom: 12px;
    background-color: var(--expand-toggle-bkg);
    color: var(--expand-toggle-txt);
    border-color: var(--expand-toggle-bdr);
}

.expand-button:hover, .expand-button:focus, .expand-button:active {
    margin-bottom: 12px;
    background-color: var(--expand-toggle-bkg);
    color: var(--expand-toggle-txt);
    border-color: var(--expand-toggle-bdr);
}

/* DRAGGABLE CSS STYLING */

.js-item {
    margin: 12px 0px 12px 0px !important;
}

.is-idle {
    margin: 12px 0px 12px 0px !important;
}
  
.drag-handle {
    content: '';
    padding: 0px !important;
}

.drag-handle::after {
    content: '⠿';
    font-size: 25px;
    color: var(--dragHandleColour);
}

.list__item.is-idle .drag-handle {
    cursor: grab;
}

.list__item.is-idle {
    transition: 0.25s ease transform;
}

.list__item.is-draggable,
.list__item.is-draggable .drag-handle {
    cursor: grabbing;
}

.list__item.is-draggable {
    z-index: 10;
}

.print-size-centered{
    height: 80px;
    justify-content: center;
}

.print-size-button-container {
    height: 70px;
    font-size: 12px;
    width: 110px !important;
    border: 1px solid;
    border-color: white;
    border-radius: var(--mediumRadius);
    margin: 0px 12px 12px 0px !important;

}

.print-size-font-size {
    font-size: 16px;
    font-weight: bold;
    padding: 8px 0px 3px 16px;
}

.print-size-qty-and-total {
    /* font-weight: bold; */
    font-size: 12px;
    letter-spacing: 1px;
}


@-webkit-keyframes flashEl {

    0%,
    50%,
    to {
        opacity: 1
    }

    25%,
    75% {
        opacity: 0
    }
}

@keyframes flashEl {

    0%,
    50%,
    to {
        opacity: 1
    }

    25%,
    75% {
        opacity: 0
    }
}

.flash-element {
    -webkit-animation-name: flashEl;
    animation-name: flashEl;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-duration: 1s;
    animation-iteration-count: 2;
}

.publish-card-container{
    border: 2px solid !important;
    border-color: var(--box-outline) !important;
    border-radius:12px; 
    margin-bottom:24px;
}


.tooltip {
    position: relative;
    display: inline-block;
    /* border-bottom: 1px dotted black; */
  }

  .tooltip .tooltiptextright::after {
    content: "";
    position: absolute;
    top: 48%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent var(--expand-toggle-bkg) transparent transparent;
  }
  
  .tooltip .tooltiptextright {
    visibility: hidden;
    width: 120px;
    background-color: var(--expand-toggle-bkg);
    color: var(--expand-toggle-txt);
    text-align: center;
    border-radius: var(--borderRadius);
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -25px;
    left: 120%;
    border-color: var(--expand-toggle-bkg);
  }
  
  .tooltip:hover .tooltiptextright {
    visibility: visible;
  }



  .tooltip .tooltiptextleft::after {
    content: "";
    position: absolute;
    top: 35%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent var(--expand-toggle-bkg);
  }
  
  .tooltip .tooltiptextleft {
    visibility: hidden;
    width: 120px;
    background-color: var(--expand-toggle-bkg);
    color: var(--expand-toggle-txt);
    text-align: center;
    border-radius: var(--borderRadius);
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -25px;
    right: 110%;
    border-color: var(--expand-toggle-bkg);
  }
  
  .tooltip:hover .tooltiptextleft {
    visibility: visible;
  }



  .medium-radius{
    border-radius: var(--mediumRadius) !important;
  }


.entry-box-margin {
    margin-bottom: 16px !important;
}

.delete-icon:hover {
    color: rgb(255, 45, 45) !important;
}

.info-icon:hover {
    color: var(--highlightGreen) !important;
}


.button-var-background {
    background-color: var(--buttonBkg) !important;
}