/*This is the beginning of a simple css framework.

    h - stands for horizontal
    v - stands for vertical
    w - stands for wrap
    c - stands for centered
    e - stands for edge

    so - stands for stratis optimization
*/

/*---------------------------------------------------------------------------------------------
    MAIN PAGE SECTION

    Need to set some default overrides to make the flexbox stuff function correctly.
---------------------------------------------------------------------------------------------*/
* {
    box-sizing: border-box;
}

html {
    position: relative;
    height: 100%;
    width: 100%;

    margin: 0cm;
    padding: 0cm;

    overflow: hidden;
}

body {
    position: relative;
    height: 100%;
    width: 100%;

    min-height: 100%;
    min-width: 100%;

    overflow: hidden;

    margin: 0cm;
    padding: 0cm;
}

li {
    margin-bottom: 0.191cm;
    list-style-position: inside;
}

/*---------------------------------------------------------------------------------------------
    CONTAINER SECTION
---------------------------------------------------------------------------------------------*/

/*v stands for vertical.
  This container is just for laying out content vertically...*/
.so-container-v{
  position: relative;
}

/*col stands for column.
  This container is needed to make certain types of accordian-like, or vertical fill layouts, work correctly.*/
.so-container-col{
   display: flex;
   flex-flow: column;
   position: relative;
}

/* hc stands for horizontal centered.
   This container is used when you want a full width row that keeps content centered horizontally*/
.so-container-hc{
    display: flex;
    flex-flow: row;
    justify-content: space-around;
    position: relative;
}
/* he stands for horizontal edge.
   This container is used when you want a row of items to dynamically change the space between the children, but still have the first and last child up against the edge of the container*/
.so-container-he{
   display: flex;
   flex-flow: row;
   justify-content: space-between;
   position: relative;
}
/* h stands for horizontal.
   This container is used when you want a row of items to be placed like a single line of text in a book. There is no wrapping*/
.so-container-h{
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    position: relative;
}

/*  This container is used when you want wrapped items to wrap like the text in a book. Each element on a new row preserves its size*/
.so-container-book {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    position: relative;
}

/* w stands for wrap.
   This container is used when you want wrapped items to wrap to the center of the next line*/
.so-container-w {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    position: relative;
}

/* we stands for wrap to edge.
   This container is used when you want wrapped items to wrap to the edges of the next line*/
.so-container-we {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    position: relative;
}

/*sfc stands for scroll friendly centering.
  This container will fill the width of the parent element, center the content, but allow the parent container to have scrolling
  Should be used with a parent container of so-container-v, with overflow set to auto or scroll.
  NOTE! There is a slight bug in microsoft edge, where inline-flex ignores the scrollbar at the bottom of the screen, and triggers the vertical scroll bar to appear, even when not needed.
*/
.so-container-sfc {
    display: inline-flex;
    flex-flow: row;
    justify-content: space-around;
    position: relative;

    align-items: center;

    min-width: 100%;
    min-height: 100%;

    /*min-height: calc(100% - 0.5cm); this will fix the bug in edge by making up the scrollbar height difference*/
}

.so-container-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0);
}



/*---------------------------------------------------------------------------------------------
    PADDING SECTION

    If we used a fixed padding and only apply it to the inner most elements�or
    sparingly when you need some indentation�you can get things to always line up.
---------------------------------------------------------------------------------------------*/

.so-child-padding {
    padding: 0.191cm;
}

.so-child-padding-squished{
  margin-top: 0;
}

.so-container-padding {
    padding: 0.191cm;
}
.so-container-padding.so-container-padding-bonus-v {
    padding-top: 0.3820cm;
    padding-bottom: 0.3820cm;
}

/*af stands for against flow. Meaning it will fill in the alignment space to the full capacity based on the direction of the flex-flow*/
.so-fill-af{
    align-self: stretch;
}

.so-fill-parent-v {
    height: 100%;
}

.so-spacer-h-confident {
    height: 0.6180cm;
}
.so-spacer-h-normal {
    height: 0.3820cm;
}
.so-spacer-h-shy {
    height: 0.191cm;
}
.so-fill,
.so-fill1 {
    flex-grow: 1;
    overflow: hidden;
}

.so-fill2 {
    flex-grow: 2;
    overflow: hidden;
}
.so-fill3 {
    flex-grow: 3;
    overflow: hidden;
}
.so-normalize-flex-basis{
    flex-basis: 1px;
}


/*---------------------------------------------------------------------------------------------
    TEXT SECTION
---------------------------------------------------------------------------------------------*/

.so-title-text {
    font-size: 160%;
    padding: 0.3820cm;
}
.so-paragraph-text{
  font-size: 120%;
}
.so-sub-title-span-text{
  font-size: 80%;
}
.so-text-confident{
  font-size: 130%;
}
.so-text-shy{
  font-size: 90%;
}
.so-text-align-r{
  text-align: right;
}

.so-bold-text {
    font-weight: 700;
}
.so-italic-text {
    font-style: italic;
}

.so-nowrap{
  white-space: nowrap;
  overflow: hidden;
}

/*---------------------------------------------------------------------------------------------
    BUTTON SECTION
---------------------------------------------------------------------------------------------*/
/* which includes nothing for now :D */


/*---------------------------------------------------------------------------------------------
    ALIGNING SECTION
---------------------------------------------------------------------------------------------*/


.so-align-self-start{
  align-self: flex-start;
}

.so-align-center{
  align-items: center;
}

.so-align-self-end{
  align-self: flex-end;
}


.so-child-just-t {
    margin-top: 0 !important;
    margin-bottom: auto !important;
}
.so-child-just-b{
    margin-bottom: 0 !important;
    margin-top: auto !important;
}
.so-child-just-l {
    margin-left: 0 !important;
    margin-right: auto !important;
}
.so-child-just-r {
    margin-left: auto !important;
    margin-right: 0 !important;
}


/*---------------------------------------------------------------------------------------------
    HELPER SECTION
---------------------------------------------------------------------------------------------*/

.so-hide {
    display: none;
}

.so-selectable{
    pointer-events: auto;
}

.so-unselectable {
    pointer-events: none;
}

.so-clickable {
    cursor:pointer;
}

.so-remove-underline{
    text-decoration: none;
}

.so-close-overlay {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    cursor: pointer;
}

.so-scrollable{
    overflow: auto;
}
.so-resist-force{
    flex-shrink: 0;
}

/*ONLY use for changing the order of overlap, so we can avoid using z-orders
  This will allow you to use the order in the html to dictate overlap.
  Use sparingly if at all, as it's kind of kludgey.
*/
.so-reverse-r {
    flex-direction: row-reverse;
}
.so-reverse-c {
    flex-direction: column-reverse;
}

.so-layer {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: rgba(0,0,0,0);
    left: 0;
    top: 0;
}

.so-ios-disable-overflow-scrolling{
  -webkit-overflow-scrolling: auto !important;
}