body {
    background: black;
}


.sq-question-list {
    background: black;
    padding: 1em;
}

.sq-header-list {
    background: black;
    padding-left: 1em;
    padding-right: 1em;
}

.sq-header-surround {
    padding-top: 1em;
}
.sq-header-surround h1 {
    color: white;
    text-align: center;
}

.sq-footer-surround {
    color: white;
    text-align: right;
}

.sq-question-surround {
    background: black;
    margin-bottom: 1em;
}
.sq-question-outer {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    background: darkorchid;
    padding: 1em;
}

@media screen and (min-width: 0px) and (max-width: 800px) {
    .sq-question-outer {
    }
}
@media screen and (min-width: 801px) {
    .sq-question-outer {
    }
}

.sq-question-title {
    color: white;
    font-size: 150%;
    vertical-align: bottom;
    font-weight: bold;
}

.sq-question-boxes-in-a-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.sq-question-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.sq-question-buttons {
    background: black;
}

.sq-question-toggles {
    background: black;
}

.sq-question-buttonrowlike {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    gap: 10px;
    overflow-x: auto;
}

.sq-question-buttonlike {
    border-radius: 0.3em;
    user-select: none;
    border-width: 3px;
    border-style: solid;

    cursor: pointer;
    margin: 7px;
    padding: 2px;
    line-height: 150%;
    white-space: normal;
    margin: 5px;
    padding: 0.3em;
    padding-left: 1em;
    padding-right: 1em;
    min-width: 6em;
    max-width: 97%;
}

.sq-question-button:hover {
    box-shadow: 0px 0px 15px rgb(255,255,255);
    border-color: white;
}

.sq-question-submit-disabled:hover {
    box-shadow:none;
    cursor: default;
}

.sq-question-submit-disabled {
    border-color: grey !important;
    background: grey !important;
}

.sq-question-button-enabled {
    border-color: deeppink;
    background: deeppink;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: blue;
  border: 1px;
  width: 15px;
}

.sq-question-button {
    text-align: center;
    border-color: deeppink;
    background: deeppink;
}

.sq-question-toggle:hover {
    box-shadow: 0px 0px 15px rgb(255,255,255);
    border: 3px white solid;
}

.sq-question-toggle {
    text-align: left;
}

.sq-question-longlist-outer {
    background: black;
    overflow-y: auto;
    overflow-x: auto;
    padding: 6px;
    min-height: 20vh;
    scrollbar-width: auto;
}

.sq-question-longlistlike {
}

.sq-question-statements {
    background: black;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    row-gap: 0px;
    column-gap: 0px;
}


.sq-question-statement {
    text-align: left;
    background: goldenrod;
    border-color: goldenrod;
}

.sq-question-statement:hover {
    box-shadow: 0px 0px 15px rgb(255,255,255);
    border-color: white;
}

.sq-question-statement-selected {
    background: gold;
    border-color: gold;
    box-shadow: 0px 0px 15px rgb(255,255,255);
}

.sq-question-toggle-selected {
    background: rgb(143,124,255);
    border-color: rgb(153,134,255);
    box-shadow: 0px 0px 15px rgb(255,255,255);
}

.sq-question-toggle-selected:before {
    font-size: 130%;
    content: "\2705";
}

.sq-question-toggle-unselected:before {
    font-size: 130%;
    content: "\274E";
}

.sq-question-toggle-unselected {
    border-color: slateblue;
    background :slateblue;
}

.sq-question-scorebars {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.sq-question-scorebar {
    background: black;
    border: 4px solid black;
    display: block;
    flex-grow: 1;

    position: relative;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0px;
}

.sq-question-scorebar-right {
    user-select: none;
}

.sq-question-scorebar-touch {
    user-select: none;
    text-shadow: 0px 0px 15px rgb(255,255,255);
    color: white;
}

.sq-question-scorebar-left:before {
    user-select: none;
}

.sq-question-scorebar-box {
    border: 0px;
    margin: 0px;
    padding: 0px;
    flex-grow: 1;
    height: 20px;
    display: table-cell;
}

.sq-question-scorebar-00 { background: rgb(0,0,255);     border: 3px rgb(0,0,255) solid; }  
.sq-question-scorebar-01 { background: rgb(13,13,241);   border: 3px rgb(13,13,241) solid; }  
.sq-question-scorebar-02 { background: rgb(26,26,228);   border: 3px rgb(26,26,228) solid; }  
.sq-question-scorebar-03 { background: rgb(40,40,214);   border: 3px rgb(40,40,214) solid; }  
.sq-question-scorebar-04 { background: rgb(53,53,201);   border: 3px rgb(53,53,201) solid; }  
.sq-question-scorebar-05 { background: rgb(67,67,187);   border: 3px rgb(67,67,187) solid; }  
.sq-question-scorebar-06 { background: rgb(80,80,174);   border: 3px rgb(80,80,174) solid; }  
.sq-question-scorebar-07 { background: rgb(93,93,161);   border: 3px rgb(93,93,161) solid; }  
.sq-question-scorebar-08 { background: rgb(107,107,147); border: 3px rgb(107,107,147) solid; }  
.sq-question-scorebar-09 { background: rgb(120,120,134); border: 3px rgb(120,120,134) solid; }  
.sq-question-scorebar-10 { background: rgb(134,134,120); border: 3px rgb(134,134,120) solid; }  
.sq-question-scorebar-11 { background: rgb(147,147,107); border: 3px rgb(147,147,107) solid; }  
.sq-question-scorebar-12 { background: rgb(161,161,93);  border: 3px rgb(161,161,93) solid; }  
.sq-question-scorebar-13 { background: rgb(174,174,80);  border: 3px rgb(174,174,80) solid; }  
.sq-question-scorebar-14 { background: rgb(187,187,67);  border: 3px rgb(187,187,67) solid; }  
.sq-question-scorebar-15 { background: rgb(201,201,53);  border: 3px rgb(201,201,53) solid; }  
.sq-question-scorebar-16 { background: rgb(214,214,40);  border: 3px rgb(214,214,40) solid; }  
.sq-question-scorebar-17 { background: rgb(228,228,26);  border: 3px rgb(228,228,26) solid; }  
.sq-question-scorebar-18 { background: rgb(241,241,13);  border: 3px rgb(241,241,13) solid; }  
.sq-question-scorebar-19 { background: rgb(255,255,0);   border: 3px rgb(255,255,0) solid; }
.sq-question-scorebar-20 { background: rgb(255,255,0);   border: 3px rgb(255,255,0) solid; }

.sq-question-scorebar-00:hover , .sq-question-scorebar-01:hover , .sq-question-scorebar-02:hover , .sq-question-scorebar-03:hover ,
.sq-question-scorebar-04:hover , .sq-question-scorebar-05:hover , .sq-question-scorebar-06:hover , .sq-question-scorebar-07:hover ,
.sq-question-scorebar-08:hover , .sq-question-scorebar-09:hover , .sq-question-scorebar-10:hover , .sq-question-scorebar-11:hover ,
.sq-question-scorebar-12:hover , .sq-question-scorebar-13:hover , .sq-question-scorebar-14:hover , .sq-question-scorebar-15:hover ,
.sq-question-scorebar-16:hover , .sq-question-scorebar-17:hover , .sq-question-scorebar-18:hover , .sq-question-scorebar-19:hover ,
.sq-question-scorebar-20:hover {
    box-shadow: 0 0px 15px rgb(255,255,255);
    border: 3px white solid;
}



.slide2.ng-enter {
/*  transition: 
        max-height 0.5s cubic-bezier(.08,.32,0,-0.63)
        ,
        filter 0.2s ease-in-out
  ;
  */
  max-height: 0px;
  filter: opacity(0%);
}

.slide2.ng-enter.ng-enter-active {
    /* Nothing -- we want to transition to the .slide2 target */
}

.slide2 {
    overflow: hidden;
    transition:
        max-height 0.3s cubic-bezier(.09,.8,.09,.3)
        ,
        filter 0.5s cubic-bezier(0.5, 0, 0.75, 0);
    ;
    filter: opacity(100%);
    max-height: 800px;
}
.slide2.ng-leave {
    transition:
        max-height 0.5s 
        /* cubic-bezier(.16,1.27,.39,.93) */
        ease-in-out
        ,
        filter 0.2s ease-in-out
    ;
  }
  
  @media (max-aspect-ratio: 3/4) {
    /* phone */
    .slide2 {
        overflow: hidden;
        transition:
            max-height 0.3s 
            /* cubic-bezier(.05,1.19,.37,.94) */
            ease-in-out
            ,
            filter 0.5s cubic-bezier(0.5, 0, 0.75, 0);
        ;
        filter: opacity(100%);
        max-height: 1600px;
    }
    .slide2.ng-leave {
        transition:
            max-height 0.5s 
            /* cubic-bezier(.72,1.26,.37,.94) */
            ease-in-out
            ,
            filter 0.2s ease-in-out
        ;
      }
}


.slide2.ng-leave.ng-leave-active {
  max-height: 0px;
  filter: opacity(0%);
}

sq_icon {
    color: #FB8C00;
}