/*!
Gibbon: the flexible, open school platform
Founded by Ross Parker at ICHK Secondary. Built by Ross Parker, Sandra Kuipers and the Gibbon community (https://gibbonedu.org/about/)
Copyright © 2010, Gibbon Foundation
Gibbon™, Gibbon Education Ltd. (Hong Kong)

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

@tailwind base;

*,
:after,
:before {
    margin:0;
	padding:0;
    border: 0 solid hsl(0, 3%, 82%);
    box-sizing: border-box;
}

html {
    @apply h-full;
}

body {
    @apply text-gray-900;
    font-family: Helvetica, Arial, sans-serif;
}

[x-cloak=""], [x-cloak="on"] { 
    display: none !important;
}

/* hidden on mobile/smaller screens */
@media screen and (max-width: 768px) {
    [x-cloak="mobile"] { 
        display: none !important;
    }
}


/*
 --------------------------------------------------------------------------
  Links
 --------------------------------------------------------------------------
*/

a {
    @apply text-red-700 no-underline;
}

a:not([class]) {
    @apply text-red-700 bg-transparent;
}

a:hover:not([class]) {
    @apply text-red-900 underline;
}

a img {
    @apply text-white border-none;
}

/*
 --------------------------------------------------------------------------
  Typography
 --------------------------------------------------------------------------
*/

hr {
    @apply border-gray-300 border my-6;
}

.small {
    @apply text-xs;
}

kbd {
    @apply px-2 py-1.5 text-xs font-sans font-normal text-gray-800 bg-gray-100 border border-gray-300 rounded-md dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500;
}

/*
 --------------------------------------------------------------------------
  Alerts
 --------------------------------------------------------------------------
*/
.alert {
    @apply my-4 p-4 text-xs rounded border p-4 text-xs relative;
    @apply bg-gray-100 border-gray-600 text-gray-600;
}

.message {
    @apply bg-blue-100 border-blue-700 text-blue-700;
}

div.message:not(.tag)::before {
    content: "";
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%221.5%22%20stroke%3D%22rgb(29%2078%20216)%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22m11.25%2011.25.041-.02a.75.75%200%200%201%201.063.852l-.708%202.836a.75.75%200%200%200%201.063.853l.041-.021M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200Zm-9-3.75h.008v.008H12V8.25Z%22%20%2F%3E%3C%2Fsvg%3E');
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 35%;
    position: absolute;
    height: 100%;
    width: 4rem;
    left: 1rem;
    top: 0;
}

.current,
.success {
    @apply bg-green-100 border-green-700 text-green-700;
}

div.success:not(.tag)::before {
    content: "";
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0icmdiKDIxIDEyOCA2MSkiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTkgMTIuNzUgMTEuMjUgMTUgMTUgOS43NU0yMSAxMmE5IDkgMCAxIDEtMTggMCA5IDkgMCAwIDEgMTggMFoiIC8+Cjwvc3ZnPgo=');
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 35%;
    position: absolute;
    height: 100%;
    width: 4rem;
    left: 1rem;
    top: 0;
}

.warning {
    @apply bg-orange-100 border-orange-700 text-orange-700;
}

div.warning:not(.tag)::before {
    content: "";
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%221.5%22%20stroke%3D%22rgb(194%2065%2012)%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M12%209v3.75m-9.303%203.376c-.866%201.5.217%203.374%201.948%203.374h14.71c1.73%200%202.813-1.874%201.948-3.374L13.949%203.378c-.866-1.5-3.032-1.5-3.898%200L2.697%2016.126ZM12%2015.75h.007v.008H12v-.008Z%22%20%2F%3E%3C%2Fsvg%3E');
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 35%;
    position: absolute;
    height: 100%;
    width: 4rem;
    left: 1rem;
    top: 0;
}

.past,
.error {
    @apply bg-red-200 border-red-700 text-red-700;
}

div.error:not(.tag)::before {
    content: "";
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0icmdiKDE5NyA0OCA0OCkiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0ibTkuNzUgOS43NSA0LjUgNC41bTAtNC41LTQuNSA0LjVNMjEgMTJhOSA5IDAgMSAxLTE4IDAgOSA5IDAgMCAxIDE4IDBaIiAvPgo8L3N2Zz4=');
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 35%;
    position: absolute;
    height: 100%;
    width: 4rem;
    left: 1rem;
    top: 0;
}

.exception {
    @apply bg-gray-100 border-gray-800 text-gray-800;
}

div.exception:not(.tag)::before {
    content: "";
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iaHNsKDAgMyUgMjMlKSI+CiAgPHBhdGggc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNMTcuMjUgNi43NSAyMi41IDEybC01LjI1IDUuMjVtLTEwLjUgMEwxLjUgMTJsNS4yNS01LjI1bTcuNS0zLTQuNSAxNi41IiAvPgo8L3N2Zz4K');
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 35%;
    position: absolute;
    height: 100%;
    width: 4rem;
    left: 1rem;
    top: 0;
}


.magic {
    @apply bg-purple-100 border-purple-800 text-purple-800;
}

div.magic:not(.tag)::before {
    content: "";
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0icmdiKDkzIDQ1IDE3MCkiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTkuODEzIDE1LjkwNCA5IDE4Ljc1bC0uODEzLTIuODQ2YTQuNSA0LjUgMCAwIDAtMy4wOS0zLjA5TDIuMjUgMTJsMi44NDYtLjgxM2E0LjUgNC41IDAgMCAwIDMuMDktMy4wOUw5IDUuMjVsLjgxMyAyLjg0NmE0LjUgNC41IDAgMCAwIDMuMDkgMy4wOUwxNS43NSAxMmwtMi44NDYuODEzYTQuNSA0LjUgMCAwIDAtMy4wOSAzLjA5Wk0xOC4yNTkgOC43MTUgMTggOS43NWwtLjI1OS0xLjAzNWEzLjM3NSAzLjM3NSAwIDAgMC0yLjQ1NS0yLjQ1NkwxNC4yNSA2bDEuMDM2LS4yNTlhMy4zNzUgMy4zNzUgMCAwIDAgMi40NTUtMi40NTZMMTggMi4yNWwuMjU5IDEuMDM1YTMuMzc1IDMuMzc1IDAgMCAwIDIuNDU2IDIuNDU2TDIxLjc1IDZsLTEuMDM1LjI1OWEzLjM3NSAzLjM3NSAwIDAgMC0yLjQ1NiAyLjQ1NlpNMTYuODk0IDIwLjU2NyAxNi41IDIxLjc1bC0uMzk0LTEuMTgzYTIuMjUgMi4yNSAwIDAgMC0xLjQyMy0xLjQyM0wxMy41IDE4Ljc1bDEuMTgzLS4zOTRhMi4yNSAyLjI1IDAgMCAwIDEuNDIzLTEuNDIzbC4zOTQtMS4xODMuMzk0IDEuMTgzYTIuMjUgMi4yNSAwIDAgMCAxLjQyMyAxLjQyM2wxLjE4My4zOTQtMS4xODMuMzk0YTIuMjUgMi4yNSAwIDAgMC0xLjQyMyAxLjQyM1oiIC8+Cjwvc3ZnPgo=');
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 35%;
    position: absolute;
    height: 100%;
    width: 4rem;
    left: 1rem;
    top: 0;
}

.empty {
    @apply bg-gray-50 border-gray-800 text-gray-600;
}

div.empty:not(.tag)::before {
    content: "";
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0icmdiKDE2NiwgMTczLCAxODUpIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0xNi41IDguMjVWNmEyLjI1IDIuMjUgMCAwIDAtMi4yNS0yLjI1SDZBMi4yNSAyLjI1IDAgMCAwIDMuNzUgNnY4LjI1QTIuMjUgMi4yNSAwIDAgMCA2IDE2LjVoMi4yNW04LjI1LTguMjVIMThhMi4yNSAyLjI1IDAgMCAxIDIuMjUgMi4yNVYxOEEyLjI1IDIuMjUgMCAwIDEgMTggMjAuMjVoLTcuNUEyLjI1IDIuMjUgMCAwIDEgOC4yNSAxOHYtMS41bTguMjUtOC4yNWgtNmEyLjI1IDIuMjUgMCAwIDAtMi4yNSAyLjI1djYiIC8+Cjwvc3ZnPgo=');
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 35%;
    position: absolute;
    height: 100%;
    width: 4rem;
    left: 1rem;
    top: 0;
}

.dull {
    @apply bg-gray-300 text-gray-600;
}

.selected {
    @apply bg-purple-200 border-purple-800 text-purple-800;
}

div.message:not(.tag), div.warning:not(.tag), div.exception:not(.tag), div.success:not(.tag), div.error:not(.tag), div.magic:not(.tag), div.empty:not(.tag) {
    @apply pl-14;
}

div.message, div.success, div.warning, div.error, div.exception, div.dull, div.magic, div.empty {
    @apply rounded border my-4 p-4 text-xs relative border-opacity-15;
}

div.message a, div.success a, div.warning a, div.error a, div.exception a, div.dull a {
    @apply underline text-red-700;
}

.badge {
    @apply absolute z-10 rounded-full bg-purple-400 text-xs text-white no-underline leading-tight font-sans;
    padding: 2px 6px 2px 6px;
}

.tag {
    @apply inline-block rounded px-2 text-xs font-medium font-sans leading-loose border border-opacity-15;
}

.bg-stripe {
    background-image: linear-gradient(45deg, #fafafa 25%, #f4f4f4 25%, #f4f4f4 50%, #fafafa 50%, #fafafa 75%, #f4f4f4 75%, #f4f4f4 100%);
    background-size: 23.0px 23.0px;
}

.bg-stripe-dark {
    background-image: linear-gradient(45deg, #dedede 25%, #f1f1f1 25%, #f1f1f1 50%, #dedede 50%, #dedede 75%, #f1f1f1 75%, #f1f1f1 100%);
    background-size: 23.0px 23.0px;
}

.bg-stripe-overlay {
    background-image: linear-gradient(45deg, #00000012 25%, #00000000 25%, #00000000 50%, #00000012 50%, #00000012 75%, #00000000 75%, #00000000 100%);
    background-repeat: repeat;
    background-size: 23.0px 23.0px;
}

.animate-bg-slide {
    animation: bg-slide 0.75s linear infinite;
}

@keyframes bg-slide {
    0% {
        background-position: 0 50%;
    }
    100% {
        background-position: 23.0px 50%;
    }
}


/*
 --------------------------------------------------------------------------
  Tables
 --------------------------------------------------------------------------
*/

.dataTable tr:not([class]):hover {
    @apply bg-gray-100;
}

.navigation-link::after { 
    @apply bg-purple-600 rounded-md;
    content: "";
    position: absolute;
    height: 1.25rem;
    left: calc(0.5rem*-1);
    top: calc(50% - 0.625rem);
    width: 0.25rem;
}



/*
 --------------------------------------------------------------------------
  Forms
 --------------------------------------------------------------------------
*/

/* input, select, textarea {
    @apply border-gray-400 bg-white rounded-sm outline-none py-2 px-2;
} */

.w-available {
    width: fit-content;
    width: -moz-available;
    width: -webkit-fill-available;
}

select {
    padding-right: 1.8rem;
}

input:focus, select:focus, textarea:focus {
    @apply outline-none ring border-blue-500;

}

input[readonly]:focus, select[readonly]:focus, textarea[readonly]:focus {
    @apply shadow-none;
}

.input-icon {
    background-position: right .5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.button {
    @apply py-2 px-2 border text-gray-700 text-xs font-bold leading-normal ;
}

.button:hover {
    @apply bg-gray-400;
}

.column.inline {
    @apply flex flex-wrap ;
}

@screen sm {
    .column.inline {
        @apply flex flex-row justify-between items-center;
    }
}

.column.stacked {
    @apply flex flex-col justify-end items-stretch content-center;
}

/* Prevent the input zoom-in effect that happens on mobile devices */
@media (max-width: 767px) {
    input, select, option, textarea {
        font-size: initial !important;
    }
}

input[type="checkbox"] {
    max-width: 1rem;
    max-height: 1rem;
    padding: 0 !important;
}

input[type="color"]::-webkit-color-swatch-wrapper,
input[type="color"]::-moz-color-swatch-wrapper {
    padding: 0 !important;
    background-color: unset;
}

input[type="color"]::-webkit-color-swatch,
input[type="color"]::-moz-color-swatch {
    @apply border rounded-md;
    background-color: unset;
}

[multiple], [type="date"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], input:where(:not([type])), select, textarea {
    @apply border-gray-400;
}

/*
 --------------------------------------------------------------------------
  Validation
 --------------------------------------------------------------------------
*/

.error-msg,
.inline-msg {
    @apply absolute block w-full left-0 top-10 text-xs font-bold leading-6 pointer-events-none whitespace-nowrap;
}

.error-msg {
    @apply text-red-700;
}

.error-msg[hidden],
.error-msg:empty,
.inline-msg[hidden]
.inline-msg:empty {
    @apply opacity-0 hidden;
}

input[type="checkbox"] + .error-msg {
    @apply top-5;
}

select[multiple] + .error-msg {
    @apply top-auto -bottom-5;
}

textarea + .error-msg {
    @apply top-auto bottom-0 mb-2 ml-2;
}


.tinymce + .error-msg,
.tox-tinymce + .error-msg  {
    @apply top-auto bottom-0 mb-6 ml-2;
}

*[aria-invalid="true"] {
    @apply text-red-700 hover:text-red-700;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
textarea[aria-invalid="true"] + .tox-tinymce {
    @apply border border-red-700  hover:border-red-700;
}


input:not([type='checkbox']) + .error-msg::before {
    content: "";
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22rgb(197%2048%2048)%22%20class%3D%22size-4%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M8%2015A7%207%200%201%200%208%201a7%207%200%200%200%200%2014Zm2.78-4.22a.75.75%200%200%201-1.06%200L8%209.06l-1.72%201.72a.75.75%200%201%201-1.06-1.06L6.94%208%205.22%206.28a.75.75%200%200%201%201.06-1.06L8%206.94l1.72-1.72a.75.75%200%201%201%201.06%201.06L9.06%208l1.72%201.72a.75.75%200%200%201%200%201.06Z%22%20clip-rule%3D%22evenodd%22%20%2F%3E%3C%2Fsvg%3E');
    background-color: inherit;
    top: -1.75rem;
    right: 0.5rem;
    position: absolute;
    color: rgb(197 48 48/var(--tw-text-opacity));
    width: 1.2rem;
    height: 1.2rem;
}

/*
 --------------------------------------------------------------------------
  Finder
 --------------------------------------------------------------------------
*/

/* Input Style */

.token-input-list-facebook {
    @apply w-full overflow-hidden m-0 p-0 list-none bg-white border border-gray-500 text-xs;
    cursor: text;
}

.token-input-list-facebook input,
.token-input-input-token-facebook input {
    @apply shadow-none border-0 bg-transparent;
    height: 32px;
}

/* Token Style */

.token-input-token-facebook {
    @apply float-left rounded-sm m-px p-1 bg-blue-500 cursor-pointer text-white ;

}

.token-input-selected-token-facebook {
    @apply bg-blue-800 text-white;
}

.token-input-token-facebook p {
    @apply m-0 p-0 pr-1 inline;
}

/* Dropdown Style */

.token-input-dropdown-facebook {
    @apply absolute w-full overflow-hidden bg-white border border-gray-500 border-t-0 z-10;
    box-sizing: content-box;
}

.token-input-input-token-facebook,
.token-input-dropdown-facebook ul {
    @apply m-0 p-0;
}

.token-input-dropdown-facebook li {
    @apply m-0 px-2 py-1 cursor-pointer;
}

.token-input-dropdown-facebook p {
    @apply font-bold text-gray-600 m-0 p-2;
}

.token-input-dropdown-facebook em {
    @apply font-bold not-italic;
}

.token-input-selected-dropdown-item-facebook {
    @apply bg-blue-700 text-white;
}

#token-input-fastFinderSearch {
    width: 100% !important;
}

/*
 --------------------------------------------------------------------------
  Thickbox
 --------------------------------------------------------------------------
*/


/* Thickbox: Prevent random scrollbars */
#TB_ajaxContent {
    max-height: 85vh;
    min-height: 25vh;
    margin: 0 auto;
}
#TB_iframeContent {
    max-width: 100%;
}

/* Wrangle the Thickbox into displaying somewhat usably on mobile */
@media only screen and (max-width: 1000px) {

    #TB_window {
        margin-left: -45vw !important;
        width: 90vw !important;
    }

    #TB_ajaxContent {
        width: 85vw !important;
        max-width: 100vw;
        overflow: auto;
        padding: 0.5rem;
        height: auto !important;
    }
}

#modal thead.sticky {
    @apply -top-6;
}

/*
 --------------------------------------------------------------------------
  Print Only
 --------------------------------------------------------------------------
*/

@media print {
    .linkTop {
        display: none;
        visibility: hidden;
    }
}