html { scroll-behavior: smooth; }

/******************************
* Used throughout the main page
******************************/
.row-grid-layout
{
    display: grid;
    grid-template-columns: 3rem 3rem 1fr 3rem 3rem; 
    grid-gap: 0;
    margin: 0;
} 

/********************
* selectors color: #0B66B0 !important; 
********************/
/* Down arrow colour */
.form-select 
{
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230B66B0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

select.decorated option:hover 
{
    box-shadow: 0 0 10px 100px #097ede inset; /* #1882A8*/ 
}

/*
select option:hover 
{
    background-color: #fff !important;
    color: #0B66B0 !important;
}
*/

.form-select option.readonly
{
    background-color: #eee !important;
    color: #666 !important;
}

/********************
* control panel
********************/
#control-panel 
{ 
    display: none; 
    background-color: var(--bs-table-bg); 
}

/********************
* contenteditable
********************/
ul.editor-container { /*  */ }

ul.editor-container li
{
    list-style-type: none;
    min-height: fit-content;
    /* background-color: #fff; */
}

.editor-count, .editor-div div
{ 
    background-color: var(--bs-table-bg);
    padding: .5rem .5rem !important; 
}

[contenteditable]:focus
{
  outline: 1px solid #0a58ca !important;
  box-shadow: 3px 3px 4px #ccc !important;
  background-color: #fff !important;
  color: #000 !important;
  white-space: -moz-pre-space;
  /* color: #faeff0 */
} 

/**********************  
* Accordion
/*********************/
.accordion 
{
     --bs-accordion-active-bg: #cfe2ff70;
}

/********************** 
* Buttons
/*********************/
/*.btn-close {  } */
.btn-close:active:not(.modal-header .btn-close:active)  { margin: 1px 0px 0px 0px !important; }

.btn-inline-input /* ✕ */
{
    border: var(--bs-border-width) solid var(--bs-border-color);
    color: var(--bs-btn-close-color);
    opacity: var(--bs-btn-close-hover-opacity);
}
.btn-inline-input:hover { background-color: #fff; }

.btn-close-top-right
{
    position: absolute !important;
    z-index: 1001; 
    width: 0.3em !important; 
    height: 0.3em !important;
    right: 0.5em; 
    top: 0.5em;
    margin: 0px 1px 1px 1px !important;
}

.btn-icon 
{ 
    width: 1.6rem; 
    height: 1.6rem; 
    margin: 0px;
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    padding: 0.1rem;
    transition: all 0.1s;
    transform: scale(1.0);
    filter: opacity(50%);
}
.btn-icon:hover, .btn-icon:active
{ 
    filter: opacity(100%);  
    background-color: #fff !important;
    border-radius: var(--bs-border-radius-sm);
    color: #0d6efd !important;
    border: 1px solid #cfe2ff !important;
}
.btn-icon:hover { transform: scale(1.25); -webkit-filter: drop-shadow(1px 1px 1px #ddd); filter: drop-shadow(1px 1px 1px #ddd);  }
.btn-icon:active { transform: scale(1.35); -webkit-filter: drop-shadow(3px 3px 3px #ddd); filter: drop-shadow(3px 3px 3px #ddd); }

/* Pill for star bootstrap already has start-100 start-50 */
.start-75
{
    left: 75% !important;
} 

.start-85
{
    left: 85% !important;
}

/* .sm-grip-vertical:active {  margin: 1px 0px 0px 0px; } */
/*
  @media (min-width: 768px) {
    .button-73 {
      font-size: 1.5rem;
      padding: .75rem 2rem;
    }
  }
*/

/**********************
* Column search fields
/*********************/
input[type=text].search-field 
{
    /*background-color: white;*/
    background-image: url("/local/common/icons/search.png");
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding-left: 40px;
}

.trailing.clear 
{
    cursor: pointer;
  
    &:focus {
      color: #3b71ca;
      outline: none;
    }
}

/**********************
* Emoji selector panel
/*********************/
.emoji-container 
{
    display: grid;
    grid-template-columns: 30% 70%;
    transition: all 0.2s;
    scroll-behavior: smooth;
}

.emoji-button { border: var(--bs-border-width) solid var(--bs-border-color); } 

.emoji-sidebar p { margin-bottom: 0.5em; }
.emoji-sidebar p a { text-decoration: none; }
.emoji-sidebar p a:hover, .emoji-sidebar p a:active { text-decoration: underline; }
.emoji-sidebar
{
    /* background-color: #f5f5f5; */
    position: sticky;
    top: 0;
    box-sizing: border-box;
}

.emoji-list
{
    background-color: #f5f5f5;
    max-height: 275px !important;
    overflow-y: auto;
}

.emoji-list div, .emoji-list div:visited
{
    text-align: center !important;
    font-size: 1.1rem;
    border-radius: 8px;
    cursor: pointer; 
    padding: .25rem .25rem !important;
}

.emoji-list div:hover, .emoji-list div:active
{
    background-color: #fff;
    box-shadow: var(--bs-box-shadow-sm) !important;

}

.emoji-list div:active
{
    font-size: 1.3rem;
    padding: .20rem .25rem 0.10em .25rem !important;  
}

/**********************
* Modal focus viewer
* Subtle primary outline style
/*********************/
.btn-outline-primary-subtle:hover,
.btn-outline-primary-subtle:active,
.btn-outline-primary-subtle:visited,
.btn-outline-primary-subtle:focus
{
  background-color: #cfe2ff !important;
  color: #0d6efd !important;
  border: 1px solid #cfe2ff;
}

.btn-outline-primary-subtle 
{
  color: #888 !important;
  background-color: #fff !important;
  border: 1px solid #ddd;
}

/**********************
* DARK MODE
* Modal focus viewer
* xs button definition
* for .dark-mode
/*********************/
.bi  { background: none !important; }

.dark-mode .btn-outline-primary-subtle, .dark-mode .btn-primary 
{
    background-color: #1f3961 !important;
    color: #ccc !important;
    border: 1px solid #3470ca;

    -webkit-transition: all .15s ease-out;
    -o-transition: all .15s ease-out;
    transition: all .15s ease-out;
}

.dark-mode .btn-outline-primary-subtle:hover, .dark-mode .btn-primary:hover, 
.dark-mode .btn-outline-primary-subtle:active, .dark-mode .btn-primary:active
/* .dark-mode .btn-outline-primary-subtle:visited, .dark-mode .btn-primary:visited, 
.dark-mode .btn-outline-primary-subtle:focus, .dark-mode .btn-primary:focus */
{
  background-color: #3767b0 !important;
  color: #fff !important;
  border: 1px solid #ccc;
}

.dark-mode .btn-secondary
{
    background-color: #212529 !important;
    color: #aaa;
}

.dark-mode .btn-secondary:hover, 
.dark-mode .btn-secondary:active,
.dark-mode .btn-secondary:visited,
.dark-mode .btn-secondary:focus
{
    background-color: #343a40 !important;
    color: #ddd;
    border-color: #ccc;
}

.dark-mode .counter { color: #ccc !important; }

/**********************
* btn-xs definition
/*********************/
.btn-group-xs>.btn, .btn-xs 
{
    --bs-btn-padding-y: 0.20rem;
    --bs-btn-padding-x: 0.4rem;
    --bs-btn-font-size: 0.75rem;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
}

/**********************
* Modal zoom
* in and out animation
/*********************/
.modal.fade 
{
    transform: scale(0);
    opacity: 0;
    -webkit-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    transition: all .25s ease-out;
}

.modal.fade.show 
{
    opacity: 1;
    transform: scale(1);
}

/**********************
* Modal buttons 
**********************/
.modal-footer-buttons-container
{ 
    position: absolute; 
    left: 0; 
    right: 0; 
    width: 60%; /* Need a specific value to work */
    margin: auto;
}

.modal-footer-buttons-container div
{
    width: 50%;
    float: left;
}

.modal-title-buttons-container
{
    text-align: center;
}

.counter { left: 0.5rem }

/**********************************
*  incremental counter buttons double 
*  up as add row below
**********************************/
button.btn-plus-switch:hover::after
{
    content: '+';
    background-color: #fff;
    position: absolute !important;
    width: inherit;
    height: inherit;
    top: 0px;
    left: 0px;
    border-radius: var(--bs-border-radius-sm);
    color: #0d6efd !important;
    border: 1px solid #cfe2ff !important;
    font-size: 0.875rem;
}

.search-columns-container { flex-direction: row; }

/***************************
* Main media queries here  (max-width: 768px)
***************************/
@media (max-width: 576px)
{
    /***************************
    * Used throughout
    ***************************/
    .row-grid-layout
    {
        grid-template-columns: 0 3rem 1fr 3rem; /* Leave off the last div */
    }
    
    .row-grid-layout > div:first-child, .row-grid-layout > div:last-child
    {
        visibility: hidden;
    }

    /***************************
    * Column searches
    ***************************/
    .search-columns-container { flex-direction: column; }

    /***************************
    * Main content
    ***************************/
    .card:first-child 
    {
        margin-bottom: 0px !important;
        border-top: 1px solid var(--bs-card-border-color) !important;
    }
    .card:last-child 
    {
        border-top: 0px !important;
    }

    /***************************
    * Emojis
    ***************************/
    .emoji-container p
    {
        margin-bottom: 1rem;
    } 

}

/***************************
* Subscribe page
* to mimic form field focus
***************************/
.focus 
{
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.language-tab-display 
{ 
    width: 200px;
    position: absolute; 
    margin: auto;
    color: var(--bs-primary-text-emphasis);
    right: 0;
    left: 0;
    text-align: center;

    /* Animation show/hide */
    opacity: 0;
    transition: opacity 0.1s linear;
}

.promo-code { text-transform: uppercase; padding: 1rem .75rem; }

.language-tab-display.show { opacity: 1 !important; }

@media only screen and (max-width: 768px)
{
    .language-tab-display 
    {
        font-size: .75em;
        bottom: -4px;
    }
}

/* Tooltip buttons */
.btn-information
{
    position: relative !important;
    border-radius: 50% !important;
    padding: 0px !important;
    width: 1.1rem !important;
    height: 1.1rem !important;
    font-size: 0.9rem !important;
    line-height: 0.8rem !important;
    margin: 0.1rem auto 0px 0.4rem;
    opacity: 0.75;
}
.btn-information:hover { opacity: 1.0; }
.btn-information:active { margin: 0.1rem auto 0px 0.4rem; }
.btn-information:not(:hover) { z-index: 1 !important; }
.btn-information i { z-index: 11 !important; }
.btn-information.less-top-margin{ margin-top: -0.7rem; }
.btn-information.auto-top-margin{ margin-top: auto; }

[data-popup-info] 
{
    cursor: pointer;
    position: relative;
    z-index: 11 !important;
}
  
[data-popup-info]::after
{
    position: absolute;
    text-align: left;
    bottom: 0px;
    left: 50%;
    min-width: 200px;
    color: #666666;
    background-color: #fff; /* #e6efff */
    height: fit-content;
    width: fit-content;
    font-weight: normal;
    font-size: 0.9rem;
    line-height: 1.3rem;
    padding: 1.0rem 1.5rem;
    border-radius: 9px;
    content: attr(data-popup-info);
    transform: translate(-50%, 100%) scale(0);
    transform-origin: top;
    transition: 0.14s;
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

[data-popup-info]:hover::after, [data-popup-info]:active::after
{
    display: block;
    transform: translate(-50%, 100%) scale(1);
    z-index: 1111 !important;
    margin: 0px;
}

/* Mods */
.tooltip-left::after { left: -200%; }
.tooltip-width-250::after { min-width: 250px; }

/* Info pages */
ol.info-page  li { font-size: 1.1rem; color: #0d6efd; font-weight: 600; }
ol.info-page li h5 { font-size: 1.1rem; color: #0d6efd; margin-bottom: 0px !important; }
ol.info-page li ul { list-style-type: disc; }
ol.info-page li ul li h6 { font-size: 0.9rem; color: #0d6efd; margin-bottom: 0px !important; }
ol.info-page p { font-size: 1.0rem; color: #111; }

/* Settings */
.static { border: var(--bs-border-width) solid transparent !important; background-color: #fff; }
.input-group-text a { text-decoration: none; }
.col-form-label { font-size: .875em !important;  }
.edit-save 
{ 
  padding: .55rem !important;
  font-size: .75rem; 
}

.card-plans { background: #eee; color: #888; }
.card-plans:hover, .card-active
{
  background: #fff;
  color: #0d6efd;
  border-color: #0d6efd !important;
}
.card-plans:hover a:not([disabled])
{
  /* Copy of btn-primary */
  --bs-btn-color: #fff;
  --bs-btn-bg: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}


/* progress progress-container */
.progress-container
{
    position: relative;
    height: 1px;    
}

.progress
{
    position: absolute;
    width: 100%;
    top: -28px;
}