@tailwind base;
@tailwind components;
@tailwind utilities;

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, span, table {
    color: #1e1b4b;
}

.custom-select {
    position: relative;
}

.arrow {
    display: block;
    width: 15px;
    height: 15px;
    transition: transform ease-in-out 0.2s;
    margin-left: 4px;
}

.select-dropdown {
    position: absolute;
    list-style: none;
    width: 90%;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    background-color: #fff;
    border: 1px solid rgb(224 231 255);
    border-radius: 4px;
    padding: 10px;
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
    transition: 0.5s ease;
    transform: scaleY(0);
    opacity: 0;
    visibility: hidden;
    display: none;
}

.select-dropdown:focus-within {
    box-shadow: 0 10px 25px rgba(94, 108, 233, 0.2);
}
  
.select-dropdown li {
    position: relative;
    cursor: pointer;
    display: flex;
    gap: 1rem;
    align-items: center;
}
  
.select-dropdown label {
    width: 100%;
    padding: 8px 10px;
    display: flex;
    gap: 1rem;
    align-items: center;
    font-weight:400;
}

.select-dropdown li[role='option'] label {
    cursor: pointer;
}
  
.select-dropdown::-webkit-scrollbar {
    width: 7px;
}

.select-dropdown::-webkit-scrollbar-track {
    background: rgb(238 242 255);
    border-radius: 25px;
}
  
.select-dropdown::-webkit-scrollbar-thumb {
    border-radius: 25px;
    background: rgb(224 231 255);
}
  
.select-dropdown li[role='option']:hover {
    background-color: rgb(238 242 255);
}
  
.select-dropdown input[role='option']:focus ~ label {
    background-color: rgb(238 242 255);
}
  
.select-dropdown input[type="radio"] {
    position: absolute;
    left: 0;
    opacity: 0;
}
    
.custom-select.active .arrow {
    transform: rotate(180deg);
}
  
.custom-select.active .select-dropdown {
    opacity: 1;
    visibility: visible;
    display: block;
    transform: scaleY(1);
    position: absolute;
    top: 36px;
    left: 0;
    z-index: 100;
}

tbody {
    padding: 8px 0;
}
th {
    border-bottom: 1px solid rgb(224 231 255);
    padding-bottom: 8px;
}
td {
    padding:.5rem 0;
}
tfoot {
    border-top: 1px solid rgb(224 231 255);
    padding-top:.5rem;
}
dialog {
    box-shadow: rgba(149, 157, 165, 0.2) 0 .5rem 1.5rem;
    min-height: 75%;
    word-break: break-word;
}

::backdrop {
  opacity: 0.5;
  background-color: rgb(238 242 255);
}

dialog#deleteUserModal, dialog#deleteEventModal {
    min-height: max-content;
    height: max-content;
    width: max-content;
}

.input-control select:focus,
.input-control select:focus-visible,
.input-control input:focus-visible {
    outline: 0;
}

.input-control.success > select {
    border: 1px solid #6366f1 !important;
}

.input-control.error > select {
    border: 1px solid rgb(248 113 113);;
}

#adminModal input:focus, #adminModal input:focus-visible {
    outline: none;
}

div#calendar {
    display: grid;
    grid-template-columns:repeat(7, 1fr);
    border: 1px solid #ddd;
}
div#calendar div.day {
    text-align: center;
    padding: .5rem;
    word-break:break-word;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

div#calendar div.day.today {
    background-color:#b2ddeb;
}
div#calendar div.day.today > div.text-sm {
    font-weight:bold;
}

div#calendar div.day > div.events > div.event {
    margin-top:.5rem;
    position:relative;
}
div#calendar div.day > div.events > div.event > div.overlay {
    position:absolute;
    right:100%;
    top:0;
    display:none;
    width:20rem;
    color:inherit;
    z-index:20;
    box-shadow:0 0 2rem -.5rem #000000;
}
div#calendar div.day:nth-child(7n+1) > div.events > div.event > div.overlay,
div#calendar div.day:nth-child(7n+2) > div.events > div.event > div.overlay {
    right:initial;
    left:100%;
}

div#calendar div.day > div.events > div.event div.edit > span {
    background-color:#00000080;
    padding:.25rem .5rem;
    display:block;
    margin:0 .25rem;
}
div#calendar div.day > div.events > div.event div.edit > span:hover {
    pointer-events:none;
}

div#calendar div.day span.month {
    color:inherit;
}

div#calendar div.day span.short-text,
div#calendar div.day span.long-text {
    padding:.35rem .5rem;
    background-color:#E0E0E080;
    border-radius:.25rem;
    transition:background-color .2s;
}

div#calendar div.day span.short-text:hover,
div#calendar div.day span.long-text:hover {
    cursor:pointer;
    background-color:#C0C0C080;
}

@media screen and (min-width: 1800px) {
    div#calendar div.day span.short-text {
        display:none;
    }
    div#calendar div.day > div.events > div.event:hover > div.overlay {
        display:block;
    }
}
@media screen and (min-width: 730px) and (max-width: 1799px) {
    div#calendar div.day span.long-text {
        display:none;
    }
    div#calendar div.day > div.events > div.event:hover > div.overlay {
        display:block;
    }
}
@media screen and  (max-width: 729px) {
    div#calendar div.day span.short-text {
        display:none;
    }
    div#calendar div.day:empty {
        display:none;
    }
    div#calendar {
        grid-template-columns:1fr;
    }
}

div#ui-datepicker-div {
    background-color:#FFFFFF;
    box-shadow:0 0 1.75rem -1rem;
    border:0;
    z-index:100 !important;
}
div#ui-datepicker-div div.ui-datepicker-header {
    background-color:rgba(238,242,255,1);
    border:0;
}
div#ui-datepicker-div a.ui-state-default {
    background-color:rgba(238,242,255,1);
    border:1px solid #bdccff;
    color:inherit;
}
div#ui-datepicker-div a.ui-state-default.ui-state-hover,
div#ui-datepicker-div a.ui-state-default.ui-state-active {
    background-color:#bdccff;
    border:1px solid #bdccff;
}
div#ui-datepicker-div a.ui-datepicker-prev,
div#ui-datepicker-div a.ui-datepicker-next {
    background-color: #bdccff;
    width:4rem;
    display:flex;
    align-items: center;
    justify-content: center;
}
div#ui-datepicker-div span.ui-icon {
    text-indent:initial;
    font-size:.75rem;
    width:initial;
    height:initial;
    left:0;
    margin-left:0;
    top:0;
    margin-top:0;
    position:initial;
}
div#ui-datepicker-div a.ui-state-hover {
    font-weight:inherit;
}
div#ui-datepicker-div a.ui-datepicker-prev-hover {
    left:2px;
    top:2px;
    cursor:pointer;
}
div#ui-datepicker-div a.ui-datepicker-next-hover {
    right:2px;
    top:2px;
    cursor:pointer;
}

div.trumbowyg h1,
div.trumbowyg h2,
div.trumbowyg h3,
div.trumbowyg h4,
div.trumbowyg h5,
div.trumbowyg h6 {
    font-size: revert;
}
div.trumbowyg ol,
div.trumbowyg ul {
    list-style:revert;
    margin:revert;
    padding:revert;
}

table.table-bg.table-lines > tbody > tr:not(:last-child) {
    border-bottom:2px solid #000000;
}

table.table-bg > tbody > tr:nth-child(even) {
    background-color:rgba(238,242,255,1);
}

table.table-bg > tbody > tr.bg-past:nth-child(odd) {
    background-color:rgba(255,219,219,1);
}
table.table-bg > tbody > tr.bg-past:nth-child(even) {
    background-color:rgba(255,238,238,1);
}
table.table-bg > tbody > tr.bg-future:nth-child(odd) {
    background-color:rgba(219,255,219,1);
}
table.table-bg > tbody > tr.bg-future:nth-child(even) {
    background-color:rgba(238,255,238,1);
}


div.events-in-month input[type='text'],
div.events-in-month select {
    border:1px solid #808080;
}