/* ============== *
 * ## Tutorial ##
 * ============== */

.page-container > .page > .body.tutorial {
   display: flex;
   flex: 1;
}

.tutorial-component {
   display: grid;
   flex: 1;
   gap: 10px;
   grid-template-columns: 300px auto auto 300px;
   grid-template-rows: 1fr 1fr;
   grid-template-areas:
      "settings output output output"
      "js js html html";
}

.tutorial-component .role-formathtml { grid-area: html; }
.tutorial-component .role-formatjs { grid-area: js; }
.tutorial-component .role-output { grid-area: output; }
.tutorial-component .role-settings { grid-area: settings; }

.tutorial-component .panel {
   border-style: solid;
   border-width: 1px;
   display: flex;
   flex-direction: column;
   gap: 10px;

   border-color: #E0E0E0;
}

.tutorial-component .panel > .header {
   height: 22px;
   background: #000;
}

.tutorial-component .panel > .header .title {
   line-height: 22px;
   text-align: center;
   text-transform: uppercase;
   color: #FFF;
}

.tutorial-component .panel > .container-content,
.tutorial-component .panel > .container-content > .content {
   display: flex;
   flex: 1;
}

.tutorial-component .role-output > .container-content > .content {
   align-items: center;
   gap: 20px;
   justify-content: center;
}

.tutorial-component .role-settings .content {
   flex-direction: column;
}

.tutorial-component .role-settings .setting-container {
   display: flex;
   flex: 1;
   flex-direction: column;
   gap: 10px;
   padding-left: 10px;
}

.tutorial-component .role-settings .button-container {
   display: flex;
   justify-content: flex-end;
   padding: 10px;
}


/* ======================= *
 * ## Dividers Tutorial ##
 * ======================= */

.tutorial-component .ui-dividers {
   border: 1px solid var(--grey);
   display: flex;
   flex-direction: row;
   height: 100px;
   width: 800px;
}

.tutorial-component .ui-dividers > div {
   height: 100%;
}

.tutorial-component .ui-dividers .divider-child {
   background: var(--white);
}

.tutorial-component .ui-dividers .divider-child:nth-child(odd) {
   background: var(--grey-light);
}

/* =========================== *
 * ## Dynamic List Tutorial ##
 * =========================== */

.tutorial-component .ui-dynamic-list {
   min-width: 300px;
}


/* =============== *
 * ## Flex Test ##
 * =============== */

.flex-test .flex-container {
   position: relative;
   float: left;
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 5px;
}

.flex-test .flex-container .flex-item {
   height: 30px;
   width: 30px;
   line-height: 30px;
   text-align: center;
   font-size: 20px;
   border: 1px solid var(--black);
}


/* ===================== *
 * ## Upload Tutorial ##
 * ===================== */

.tutorial-component .ui-upload {
   width: 200px;
}