/*
NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.
*/

.border-none {
    border-style: none;
}
.border-white {
    border-color: white;
}
.border-transparent {
    border-color: transparent;
}

.hover-amber:hover {
    /* background: linear-gradient(to right,rgb(254 243 199),transparent); */
    /* bg-yellow-100	background-color: rgb(254 249 195); */
    background: linear-gradient(to right,rgb(254 249 195),transparent);
    border-radius: 10px;
}

.sticky-middle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}


li label {
    /* text-transform: uppercase; */
    font-weight: normal;
}

.table-md th,
.table-md td {
  padding: 1rem 1.5rem;
}

table th.middle {
    vertical-align: middle;
    text-align: center;
}

caption {
    caption-side: initial;
}

.main-menu .navbar-header .navbar-brand .brand-logo {
    width: 35px;
}

/* line 765 of bootstrap-extended.css */
select.form-control:not([multiple="multiple"]) {
    padding-right: 1rem;
}

.table-fixed {
    table-layout: fixed;
}

a.disabled {
    /* Make the disabled links grayish*/
    color: gray;
    /* And disable the pointer events */
    pointer-events: none;
}

/* select.form-control,input.form-control */
.form-control
{
    /* color: rgb(3, 105, 161) !important; */
    font-weight: 500;
}

input[type=number] {
    -moz-appearance: textfield;
}

/* Analogous of table-primary : 1-D1FAFA 2-D1DFFA 3-DFD1FA */
.table-primary-light {
    /* 7 grade lighter than D1DFFA  */
    background-color: #E5EDFC;
}

.bg-cyan-light {
    /* 7 grade lighter than D1FAFA  */
    background-color: #E5FCFC;
}

.bg-Lavender-light {
    /* 7 grade lighter than DFD1FA  */
    background-color: #EFE8FC;
}

.bg-powdered-sugar {
    background-color: #F1F4FFFF;
}

.bg-transparent {
    background-color: transparent;
}
.bg-floralwhite {
    background-color: floralwhite;
}

.segment{
    /* border-top: 1px solid #FDAC41; */
    padding-left: 1rem;
    background-color: floralwhite;
    margin-bottom: 0 !important;
    width: 37% !important;
    vertical-align: top !important;
}
form.is-horizontal select{
    width: 62%;
    display: inline-block;
}
form.is-horizontal label{
    padding-left: 1rem;
    background-color: floralwhite;
    margin-bottom: 0 !important;
    width: 38% !important;
    vertical-align: top !important;
}
.is-vertical{
    writing-mode: vertical-lr;
}

.gradient-white {
    background: linear-gradient(ghostwhite, white);
}

.gradient-Lavender {
    background: linear-gradient(ghostwhite, #EFE8FC);
}

.gradient-sky {
    background: linear-gradient(rgb(240 249 255),rgb(224 242 254));
}

.gradient-sugar {
    background: linear-gradient(ghostwhite, #F1F4FFFF);
}

.gradient-primary {
    background: linear-gradient(ghostwhite, #E5EDFC);
}

.gradient-light {
    background: linear-gradient(ghostwhite, #E5E9ED);
}

.strikethrough {
    text-decoration: line-through;
    text-decoration-color: #FF5B5C
}

.bright-pink {
    background-color: #f8e5e5;
}
.lightpink{
    color: lightpink;
}
.lightgray{
    color: lightgray;
}

li.active:not(.sidebar-group-active)>a {
    background: rgba(90, 141, 238, 0.15);
    color: #5a8dee;
    border-radius: 0.267rem;
}

/* to condense the techniques of Rx to fit inline */
.golden-pad {
    padding: 0.618rem 1rem;
}

.positive {
    background-image: url('plus.png');
    background-repeat: no-repeat;
    background-position: 0.3rem 50%;
    background-size: 0.7rem;
    padding-left: 1.0rem;
}

.pointer {
    cursor: pointer;
}

.min-vh-95 {
    min-height: 95vh !important;
}
.py-10 {
    padding: 0.25rem 0 !important;
  }

/**
 * ----------------------------------------
 * animation swing-in-top-fwd
 * ----------------------------------------
*/
.swing-in-top-fwd {
    animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes swing-in-top-fwd {
    0% {
        transform: rotateX(-100deg);
        transform-origin: top;
        opacity: 0;
    }

    100% {
        transform: rotateX(0deg);
        transform-origin: top;
        opacity: 1;
    }
}

/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
.slide-in-left {
    animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-left {
    0% {
        transform: translateX(-1000px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
.bounce-in-top {
    animation: bounce-in-top 1.1s both;
}

@keyframes slide-in-left {
    0% {
        transform: translateX(-1000px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ---------------------------------   */
@keyframes rotateIn {
    from {
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
.rotateIn {
    animation-name: rotateIn;
    transform-origin: center;
}

/* ---------------------------- */
.app-file-label {
    /* app file labels */
    font-family: "Rubik", Helvetica, Arial, serif;
    letter-spacing: 1px;
    margin: 1.2rem 0 0.5rem 0;
    color: #bac0c7;
}

.app-file-info {
    cursor: pointer;
}

.app-file-info .app-file-edit-icon {
    color: #bac0c7;
}

.app-file-content-logo {
    /* border-bottom: 1px solid #DFE3E7; */
    background-color: #F2F4F4;
}

.app-embed {
    max-width: 100%;
    width: 100vw;
    height: 70vh;
}

.app-ellipsis {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 95ch;
}

/*   Checkbox css for treat/edu/evalu  */
/*----------------*/
.checkboxx {
    position: relative;
    display: inline-block;
}

.checkboxx input[type='checkbox'] {
    display: none;
}

.checkboxx label {
    /* label css in check box */
    text-transform: none;
    font-size: 1rem;
    margin-bottom: 0;
}

/* https://tailwindcss.com/docs/border-color */
.border-gray-300 {
    border: 1px solid rgb(209 213 219) !important;
}

.bg-amber-50 {
    background-color: rgb(255 251 235);
}

.bg-sky-50	{
    background-color: rgb(240 249 255);
}

.min-w-max {
    min-width: max-content;
}
.child-mw  th:not(:first-child) {
    min-width: 6.3rem;
}

[v-cloak] {
    display: none !important;
}