/**********
 ACTS
 CSS V 1.0
 -DLH
04/01/26
**********/


/*
Table of Contents
  =01 RESET/GLOBAL DEFAULTS
  =02 TYPOGRAPHY
  =03 LAYOUT
  =04 UTILITY
  =05 PAGE SPECIFIC STYLES
*/

/***** 00 CALCULATIONS *****/

/* 1) Mirror Bootstrap's .container widths into a variable */
:root {
    --container-max: 100vw;
    --container-padding-inline: var(--bs-gutter-x, 0.75rem);
}
@media (min-width: 576px) { :root { --container-max: 540px; } }
@media (min-width: 768px) { :root { --container-max: 720px; } }
@media (min-width: 992px) { :root { --container-max: 960px; } }
@media (min-width: 1200px){ :root { --container-max: 1140px; } }
@media (min-width: 1400px){ :root { --container-max: 1320px; } }

@media (max-width: 991px) {
    .nine-nine-one-overlay {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.8);
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}/* end of the 991 media query */
@media (min-width: 992px) {
    .nine-nine-one-overlay {
        display: none;
    }
}

:root {
    --col2-width: calc(
        2*((var(--container-max) - var(--container-padding-inline))/12)
        - 2*var(--container-padding-inline)
        - 2px
    );
    --col6-width: calc(
        6*((var(--container-max) - var(--container-padding-inline))/12)
        - 2*var(--container-padding-inline)
        - 6px
    );
    --col6-height: calc(
        var(--col6-width)*350/625
    );
    --half-gutter-width: var(--container-padding-inline);
    --full-gutter-width: calc(
        var(--container-padding-inline)*2
    );
    --page-margin: calc(
        (100vw - var(--container-max))/2
    );
    --fixed-button-height: 84px;
}



/***** 01 GLOBALS *****/

header {
    padding-top: 4.375rem;
    border-bottom: 7px solid #C14425;
    padding-bottom: 0.625rem;
    margin-bottom: 4rem;
}


footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0.5rem;
    background-color: #b1b1b1;
    color: white;
    text-align: center;
    font-size: 0.9rem;
}

/***** 02 TYPOGRAPHY *****/


h3 {
    color: #000;
    font-family: "Outfit";
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom:1rem;
}

h5 {
    color: #000;
    font-family: "Outfit";
    font-size: 1.25rem;
    font-weight: 500;
}


a {
    color: #C14425;
    font-family: "Atkinson Hyperlegible Next";
    font-weight: 500;
    text-decoration-line: underline;
}

a.button {
    display: inline-block;
    color: #fff;
    font-family: "Outfit";
    font-size: 1.25rem;
    font-weight: 450;
    text-decoration-line: none;
    width: 100%;
    background: #C14425;
    padding: 0.313rem;
    text-align:center;
    border-radius:0;
}

#continue_button {
    height: var(--fixed-button-height);
    position: fixed;
    bottom: 30px;
    /*right: 0;*/
    right: calc(var(--page-margin) + var(--full-gutter-width));
    width: var(--col2-width);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:rgb(200 61 30 / .95);
}


.continue-wrapper {
    display: flex;
    flex-flow: column;
    height: 100%;
    position: relative;
    padding: 0px 12px;
}

#edit_button {
    height: var(--fixed-button-height);
    position: fixed;
    bottom: 30px;
    right: calc(var(--page-margin) + var(--col2-width) + 2*var(--full-gutter-width));
    width: var(--col2-width);
    background: #FFFFFF;
    opacity: .8;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#save_button {
    background: rgb(200 61 30 / .95);
    border: none;
    color:#FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.save_button {
    background: rgb(200 61 30 / .95);
    border: none;
    color:#FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

p {
    color: #000;
    font-family: "Atkinson Hyperlegible Next";
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 300;
    margin: 0;
}

p.small {
    color: #000;
    font-family: "Atkinson Hyperlegible Next";
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    margin: 0;
}

p.instructional {
    color: #000;
    font-family: "Atkinson Hyperlegible Next";
    font-size: 1.25rem;
    font-weight: 200;
    margin-top:3.125rem;
}

p.rule {
    border-bottom: 1px solid #000;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

p.feedback-p {
    line-height: 1.8;
}

p.feedback-p a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /*display: inline-block;*/
    max-width: 45%;
}

.errorlist {
    color: #C14425;
}

p.activity-text {
    font-size: 1.2rem;
    line-height: 1.6;
}


.brand-h1 {
    color: #000;
    font-family: "Atkinson Hyperlegible Next";
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 2.625rem;
}

.app-h2 {
    color: #000;
    font-family: "Outfit";
    font-size: 2rem;
    font-weight: 600;
}

.two-rem-orange {
font-size:2rem;
color:#C14425;
}

code {
    color: #C14425;
}


.alert-warning {
    --bs-alert-color: #fff;
    --bs-alert-bg: rgba(106, 115, 122, .7);
    --bs-alert-border-color: none;
    --bs-alert-link-color: none;
    border-radius: 0;
}


.alert-success {
    --bs-alert-color: #fff;
    --bs-alert-bg: #C14425;
    --bs-alert-border-color: none;
    --bs-alert-link-color: none;
    border-radius: 0;
}


/***** 03 LAYOUT *****/

.flexed-parent {
display: flex;
flex-direction: row;
margin-bottom:.7rem; 
align-items:center;
}

.eighty-flex {
    width:80%;
    margin-bottom: 0;
}

.sixty-flex {
    width:60%;
    margin-bottom: 0;
}

.forty-flex {
    width:40%;
}

.twenty-flex {
    width:20%;
}

.nsf-img {
    max-width: 120px;
}

.min-height-div{
    min-height: 200px;
}

.min-height-div-do{
    min-height: 200px;
}

.chat-send-text {
    background-repeat: no-repeat;
    background-size: 50%;
    height: 80px;
    background-position: center;
    border: none;
}

.chat-send-text.disabled{
    filter: brightness(120%) grayscale(50%);
}

.chat-send-visual {
    background-repeat: no-repeat;
    background-size: 50%;
    height: 80px;
    background-position: center;
    border: none;
}

.chat-send-visual.disabled{
    filter: brightness(120%) grayscale(50%);
}

/***** 04 UTILITY *****/

*:focus {
    outline:none;
    /*box-shadow: 0 0 0 0.2rem rgba(193, 68, 37, 0.25)!important;*/
}

input:focus,
select:focus,
textarea:focus,
button:focus,
div:focus {
    outline:none;
    box-shadow: 0 0 0 0.2rem rgba(193, 68, 37, 0.25)!important;
    border: 1px solid #C14425;
}


.one-rem-top-margin{
    margin-top:1rem;
}

.two-rem-top-margin {
    margin-top:2rem;
}

.three-rem-top-margin {
    margin-top:3rem;
}

.one-rem-bottom-margin {
    margin-bottom:1rem;
}

.two-rem-bottom-margin {
    margin-bottom:2rem;
}

.three-rem-bottom-margin {
    margin-bottom:3rem;
}

.half-rem-left-margin {
    margin-left:0.5rem;
}

.one-rem-left-margin {
    margin-left:1rem;
}

.two-rem-left-margin {
    margin-left:2rem;
}

.one-rem-right-margin {
    margin-right:1rem;
}

.two-rem-right-margin {
    margin-right:2rem;
}

.forty-flex.img-fluid {
    margin:0 auto;
}

.no-padding {
    padding: 0px 5px;
}

.relative {
    position:relative;
}

label {
    color: #000;
    font-family: "Atkinson Hyperlegible Next";
    font-size: 1rem;
    font-weight: 300;
}

input {
    border: 1px solid #C14425;
    background: #FFF;
    padding: 0.625rem;
    width: 100%;
}

textarea {
    border-radius:0;
    border: 1px solid #C14425;
    padding: 0.625rem;
    width: 100%;
}

button {
    color: #6A737A;
    font-family: "Outfit";
    font-size: 1.25rem;
    font-weight: 450;
    width: 100%;
    background-color: transparent;
    border-width: 1px;
    border-color: #6A737A;
    padding: 0.313rem;
    margin:.1rem 0 0 .1rem;
    white-space: nowrap;
    overflow: hidden;
}

button.emphasis {
    color: #FFF;
    font-size: 2rem;
    font-weight: 600;
    background-color: #6A737A;
    border: none;
}

button.join-button {
    width: 100%;
}

.form-group {
    padding-top: 1.8rem;
    padding-bottom: 1.8rem;
}


.custom-text-input {
  border: 1px solid #C14425;
  border-radius:0px!important;
}


.assigned-activities {
    border: solid 1px #6A737A;
    padding: .5rem 1rem;
    height: 217px;
    width: 233px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 1px 2px;
    display: inline-block;
}

.completed-activities {
    border: solid 1px #6A737A;
    padding: .5rem 1rem;
    height: 217px;
    width: 233px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 1px 2px;
}

.activity-links {
    margin-right: 1rem;
}

.new-activity {
    border: solid 2px #C14425;
    padding: .5rem 1rem;
    box-shadow: 1px 1px 2px #C14425;
}

.new-activity-text-flex {
    width: 100%;
    height: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
}

.join-activity-code {
    font-family: "Atkinson Hyperlegible Next";
    font-size: 1.25rem;
    font-weight: 300;
}

.join-code {
    display:inline-block;
    border: solid 1px #C14425;
    max-width:190px!important;
    border-radius: 0;
    font-family: "Atkinson Hyperlegible Next";
    font-size: 1.25rem;
    font-weight: 300;
    max-width: 35%;
}

.join-code:focus{
    border: solid 1px #C14425;
}

.dash-links {
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
    display: inline-block;
}

.no-underline {
    text-decoration:none!important;
}

.k-link {
    font-weight:300;
    color:#000;
    /*margin-bottom: 0.8rem!important;*/
    display: inline-block;
    vertical-align: bottom;
}

.build-activity-menu {
    padding-bottom: 1rem;
    border-bottom: solid 1px;
}

.build-activity-title {
    display: block;
    margin-bottom: 1rem;
    font-weight: 500;
    width: 195px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.build-activity-info {
    display: block;
    margin-bottom: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.build-icons-wrapper {
    width: 200px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.activity-title {
    border: solid 1px #C14425;
    display: inline-block;
    padding: .5rem 1rem;
}


/*.hover-me:hover {*/
/*    border: 2px solid black;*/
/*    border-radius: 50%;*/
/*}*/

.hover-me:hover + .tooltip {
  opacity: 1;
}

.tooltip {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: top center;
    min-width: 140px;
    padding: 1rem;
    border-radius: 0.4rem;
    background: black;
    text-align: center;
    color: white;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/***** 05 PAGE SPECIFIC STYLES *****/

.block-level-label {
    display:block!important;
}

.outlined {
    border: solid 1px #C14425!important;
    border-radius:0;
    font-size:1rem;
}

.add-height {
    height: 100%!important;
    max-height: 260px;
}

img.feedback-preview {
    max-height: 300px;
    max-width: 625px;
    height: auto;
    display: block;
    object-fit: contain;
}



/***** form control *****/

.task .form-control {
  /*height:3rem;*/
  font-family: sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.6;
  display: grid;
  grid-template-columns: 2rem auto;
  gap: 0.5rem;
  border-color:transparent;
}

.task .form-control + .form-control {
  margin-top: 1rem;
}

.small-textarea {
    border-radius:0!important;
}

.task .form-control:focus-within {
    color: #C14425;
}

.task .col-form-label {
    font-family: sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.6;
    border-color:transparent;
}

/***** radio *****/

.task input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--form-background);
  margin: 0;
  font: inherit;
  color: #C14425;
  width: 1.8rem;
  height: 1.8rem;
  margin:.1rem 0 0 .1rem;
  border: 0.15em solid #C14425;
  border-radius: 50%;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}

.task input[type="radio"]::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em #C14425;
  background-color: #C14425;
}

.task input[type="radio"]:checked::before {
  transform: scale(1);
}

.task input[type="radio"]:focus {
  outline: max(2px, 0.15rem) solid #C14425;
  outline-offset: max(2px, 0.15rem);
}

/***** checkbox *****/

.task input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  margin: 0;
}

.task input[type="checkbox"] {
  font: inherit;
  margin:.2rem 0 0 .2rem;
  width: 1.15rem;
  height: 1.15rem;
  border: 0.18rem solid #C14425;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
}

.task input[type="checkbox"] {
  /* ...existing styles */

  display: grid;
  place-content: center;
}

.task input[type="checkbox"]::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em #C14425;
}

.task input[type="checkbox"] {
  /* ...existing styles */
  display: grid;
  place-content: center;
}

.task input[type="checkbox"]::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1rem 1rem #C14425;
}

.task input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.task input[type="checkbox"]::before {
  /* ...existing styles */

  /* Windows High Contrast Mode */
  background-color: CanvasText;
}

.task input[type="checkbox"]::before {
  /* ...existing styles */

  transform-origin: bottom left;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.task input[type="checkbox"]:focus {
  outline: max(2px, 0.15em) solid #C14425;
  outline-offset: max(2px, 0.15rem);
}

#bubbles_container {
    border-radius:0;
}

.ql-toolbar.ql-snow  {
    height:50px;
}


.ql-editor {
    height:300px;
    outline: 1px solid #C14425;
}

.ql-editor p {
    font-family: "Atkinson Hyperlegible Next"!important;
}

.ql-editor h1 {
    font-family: "Atkinson Hyperlegible Next"!important;
}


.canvas-wrapper {
  width: var(--col6-width);
  height: var(--col6-height);
  /* optional */
  position: relative;
}

/* Let Fabric's canvas fill the wrapper */
.canvas-wrapper canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Delete confirmation dialog */
dialog::backdrop {
    backdrop-filter: blur(2px);
    background-color: rgba(0, 0, 0, 0.35);
}

dialog {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    padding: 0;
    width: min(92vw, 420px);
    max-width: 420px;
}

dialog[open] {
    animation: dialogEnter 180ms ease-out forwards;
}

@keyframes dialogEnter {
    from {
        transform: translateY(16px) scale(0.98);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.modal-card {
    padding: 1.5rem;
}

.modal-card h2 {
    margin: 0 0 0.5rem;
    font-family: "Outfit";
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-card p {
    margin: 0 0 1.25rem;
    font-family: "Atkinson Hyperlegible Next";
    font-size: 16px;
    font-weight: 300;
}

.dialog-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    align-items: center;
}

a.btn-danger {
    font-family: "Outfit";
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background-color: #C14425;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1.25rem;
    text-decoration: none;
    cursor: pointer;
}

a.btn-danger:hover {
    background-color: #a3391e;
}

button.btn-cancel {
    font-family: "Outfit";
    font-size: 1rem;
    font-weight: 450;
    color: #6A737A;
    background: transparent;
    border: 1px solid #6A737A;
    border-radius: 8px;
    padding: 0.5rem 1.25rem;
    width: auto;
    cursor: pointer;
}

button.btn-cancel:hover {
    background-color: #f4f7fb;
}

button.delete-trigger {
    background: transparent;
    border: none;
    padding: 0;
    width: auto;
    cursor: pointer;
    line-height: 0;
}

/* Sign-In */

/*.sign-in-form {
    margin-top:3.125rem;
} */