/* Style elements */
.bg { background-color: #deb887; }
.bg2 { background-color: #efdaa9; }
.bg_green { background-color: #338833; }
.bg_orange { background-color: #ff9900; }
.bg_pink { background-color: #ffc0cb; }
.bg_blue { background-color: #1e90ff; }
.authorized { background-color: green; }
.unauthorized { background-color: orange; }


.inl_blk
{
    display: inline-block;
}

.clickable,
.text_button
{
    cursor: pointer;
}

.button
{
    position: relative;
    cursor: pointer;
    background-color: #6c91bb;
    font-size: 2vh;
    height: 4vh;
    line-height: 4vh;
}

.button_reorder
{
    position: absolute;
    width: 11.5vh;
    height: 3.5vh;
    background-color: #6c91bb;
    cursor: pointer;
}

.button_move_up
{
    position: absolute;
    width: 3.5vh;
    height: 3.5vh;
    background-color: #6c91bb;
    cursor: pointer;
}

.button_move_down
{
    position: absolute;
    width: 3.5vh;
    height: 3.5vh;
    left: 4vh;
    background-color: #6c91bb;
    cursor: pointer;
}

.button_order_shift
{
    position: absolute;
    width: 3.5vh;
    height: 3.5vh;
    left: 8vh;
    background-color: #6c91bb;
    cursor: pointer;
    text-align: center;
    line-height: 3.5vh;
    font-size: 1.5vh;
}


.button_move_up img,
.button_move_down img
{
    width: 100%;
}

.small
{
    max-height: 4vh;
    max-width: 4vh;
}

.icon_button
{
    cursor: pointer;
    position: relative;
}

.icon_button img
{
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

.notifications
{
    position: absolute;
    top: 0.2vh;
    right: 0.2vh;
    background: orangered;
    color: black;
    border-radius: 50%;
    height: 2.5vh;
    width: 2.5vh;
    font-size: 2vh;
    line-height: 2.5vh;
    font-weight: bold;
    text-align: center;
    border: 1px solid #666;
}

.circ_btn
{
    cursor: pointer;
    height: 8vh;
    width: 8vh;

}

.move_up_btn
{
    position: absolute;
    top:1vh;
}

.move_dn_btn
{
    position: absolute;
    top:1vh;
}

.disabled
{
    background-color: #999;
    cursor:default;
}

.circ_btn.selected
{
    background-color: #6c91bb;
    color: #6c91bb;
}

.circ_btn.off
{
    background-color: black;
    color: black;
}

.icon_button.selected img
{
    filter: invert(79%) sepia(57%) saturate(2761%) hue-rotate(182deg) brightness(80%) contrast(77%);
}

/* listTiles */
.listTile
{
    display: inline-block;
    box-shadow: .5vw 1vh 2vh .5vh black;
    cursor: pointer;
}

.listTile .listTileTitle
{
    overflow: hidden;
}

.listTileIcon
{
    background-color: wheat;
    display: inline-block;
    box-shadow: .2vw .5vh 1vh .2vh black inset;
}
.listTileIcon img
{
    width: 100%;
    height: 100%;
}

/* list items */
.listItem
{
    display: inline-block;
    height: 5vh;
    line-height: 4.5vh;
    border-radius: 0.5vh;
    margin-top: 1vh;
    margin-left: .5vw;
    padding: .5vh .5vh;
    box-shadow: .2vw .5vh 1vh .2vh black;
    vertical-align: middle;
}

.activityIcon
{
    border: solid 2px black;
    display: inline-block;
    height: 6vh;
    width: 6vh;
    border-radius: 50%;
}

.activityIcon img
{
    height: 100%;
    width: 100%;
    border-radius: 50%;
}

.activityItem
{
    padding: 1vh;
    border-radius: 1vh;
}

.lineItem
{
    display: inline-block;
    height: 3vh;
    line-height: 3vh;
    border-radius: 0.5vh;
    /* background-color: #22BB22; */
    vertical-align: middle;
}

.smallCircle
{
    vertical-align: top;
    text-align: center;
    margin-top: 0.3vh;
    display: inline-block;
    border: 2px solid black;
    font-size: 1.2vh;
    line-height: 2vh;
    border-radius: 50%;
    height: 2vh;
    width: 2vh;
}


.listRow
{
    overflow: hidden;
    width: 100%;
    height: 6vh;
    display: inline-block;
    vertical-align: top;
}

.listHeaderRow
{
    overflow: hidden;
    width: 100%;
    height: 6vh;
    display: inline-block;
    vertical-align: top;
}

.listRowEven
{
    overflow: hidden;
    height: 6vh;
    color: black;
    background-color: #deb087;
}

/* avatar */
#avatar
{
    position: relative;
    /* text-align: center; */
    margin-left: auto;
    margin-right: auto;
    background-color: black;
    border-radius: 50%;
}

#avatar_inner
{
    position: absolute;
    top: 2%;
    left: 2%;
    height: 96%;
    width: 96%;
    border-radius: 50%;
    font-weight: bolder;
    text-align: center;
}

#avatar_inner img
{
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 50%;
}

.listRowDisabledSpecial
{
    overflow: hidden;
    height: 6vh;
    color: black;
    background-color: #666;

}
.listRowDisabledEven
{
    overflow: hidden;
    height: 6vh;
    color: #444;
    background-color: #777;
}
.listRowDisabledOdd
{
    overflow: hidden;
    color: #444;
    background-color: #999;
}

.tree_child
{
    position: absolute;
    height: 6vh;
}
.tree_child img
{
    height: 100%;
}

.child_space_filler
{
    width: 7vh;
}


/* position */
.abs { position: absolute; } .rel { position: relative; } .fix { position: fixed;}
/* width by % */
.W10 { width: 10%; } .W15 { width: 15%; }
.W20 { width: 20%; } .W25 { width: 25%; }
.W30 { width: 30%; } .W35 { width: 35%; }
.W40 { width: 40%; }
.W50 { width: 50%; }
.W60 { width: 60%; }
.W70 { width: 70%; }
.W80 { width: 80%; }
.W90 { width: 90%; }
.W100 { width: 100%; }
/* height */
.H01 { height: 1vh;} .H02 { height: 2vh;} .H03 { height: 3vh;} .H04 { height: 4vh;} .H05 { height: 5vh;}
.H10 { height: 10vh; max-height: 10vh;}
.H15 { height: 15vh; max-height: 15vh;}
.H20 { height: 20vh;}
.H30 { height: 30vh;}
.H40 { height: 40vh;}
.H50 { height: 50vh;}
.H60 { height: 60vh;}
/* left */
.L01 { left: 1%;} .L02 { left: 2%;} .L03 { left: 3%;} .L04 { left: 4%;} .L05 { left: 5%;}
.L06 { left: 6%;} .L07 { left: 7%;} .L08 { left: 8%;} .L09 { left: 9%;} .L10 { left: 10%; }
.L15 { left: 15%;}
.L20 { left: 20%; } .L25 { left: 25%; }
.L30 { left: 30%; } .L35 { left: 35%; }
.L40 { left: 40%; }
.L50 { left: 50%; }
.L60 { left: 60%; }
.L70 { left: 70%; } .L75 { left: 75%; }
.L80 { left: 80%; }
/* right */
.R01 { right: 1%;} .R02 { right: 2%;} .R03 { right: 3%;} .R04 { right: 4%;} .R05 { right: 5%;}
.R06 { right: 6%;} .R07 { right: 7%;} .R08 { right: 8%;} .R09 { right: 9%;} .R10 { right: 10%; }
/* top */
.T01 { top: 1vh;} .T02 { top: 2vh;} .T03 { top: 3vh;} .T04 { top: 4vh;} .T05 { top: 5vh;}
.T06 { top: 6vh;} .T07 { top: 7vh;} .T08 { top: 8vh;} .T09 { top: 9vh;} .T10 { top: 10vh;}
.T15 { top: 15vh}
.T20 { top: 20vh}
.T25 { top: 25vh}
/* bottom */
.B01 { bottom: 1vh;} .B02 { bottom: 2vh;} .B03 { bottom: 3vh;} .B04 { bottom: 4vh;} .B05 { bottom: 5vh;}
.B06 { bottom: 6vh;} .B07 { bottom: 7vh;} .B08 { bottom: 8vh;} .B09 { bottom: 9vh;} .B10 { bottom: 10vh;}
/* Margin Left */
.ML01 { margin-left: 01%;} .ML02 { margin-left: 02%;} .ML03 { margin-left: 03%;} .ML04 { margin-left: 04%;} .ML05 { margin-left: 05%;}
.ML10 { margin-left: 10%;}
.ML15 { margin-left: 15%;}
.ML20 { margin-left: 20%;}
.ML25 { margin-left: 25%;}
/* margin top */
.MT01 { margin-top: 1vh;}
/* align */
.left { text-align: left;}
.center, .cen { text-align: center;}
.justify { text-align: justify;}
/* vertical-align */
.middle { vertical-align: middle;}
/* Colors */
.even { color: black; background-color: #deb087; }
.odd { color: black; background-color: #dec087; }
.even_extra { color: black; background-color: #fe5054; }
.odd_extra { color: black; background-color: #fe6054; }
.even_d { color: #444; background-color: #777; }
.odd_d {  color: #444; background-color: #999; }
.txt_red { color: red; }
.txt_green { color: #22BB22; }

/* tilebox */
.tilebox
{
    background-color: wheat;
    box-shadow: .2vw .5vh 1vh .2vh black inset;
    border-radius: 1vh;
    overflow-y: auto;
}

@media screen and (orientation: landscape)
{
    .landscape { display: inline;}
    .mobile { display: none;}

    .lineItem
    {
        margin-left: .25vw;
        margin-right: .25vw;
        padding-left: .25vw;
        padding-right: .25vw;
        margin-top: -1.5vh;
        box-shadow: .2vw .5vh 1vh .2vh black;
    }

    .button_move_up,
    .button_move_down,
    .button_order_shift
    {
        box-shadow: 1px 1px 1px 1px black;
    }

    .icon_button
    {
        height: 8vh;
        width: 8vh;
    }
    .order_button
    {
        height: 3.5vh;
        width: 3.5vh;
    }

    .circ_btn
    {
        height: 8vh;
        width: 8vh;
        border-radius: 50%;
    }

    .button
    {
        box-shadow: 1px 1px 1px 1px black; /* , -1px -1px 1px 1px white; */
    }

    .move_up_btn
    {
        left: 3%;
    }

    .move_dn_btn
    {
        left: 7%;
    }

    /* listTile */
    .listTile
    {
        text-align: center;
        margin: 5vh 0 0 2.5vw;
        width: 20vw;
        height: 25vw;
        max-height: 50vh;
        line-height: 10vh;
    }

    .listTileIcon
    {
        margin: 2vh 1vw 0 1vw;
        width: 18vw;
        height: 18vw;
        max-height: 40vh;
    }
    .listTileTitle
    {
        position: relative;
        top: -4vh;
        overflow: hidden;
        display: inline-block;
        margin: 2vh 1vw 0 1vw;
        width: 18vw;
        height: 6vh;
        max-height: 40vh;
    }
    /* lists */
    .rowWithCheckboc .tree_child
    {
        left: calc(7vh + 1vw);
    }

    /* Columns Layouts */
    /* rows with 2 Colunas */
    .r2col1
    {
        display: inline-block;
        width: 49%;
    }

    .r2col1 input,
    .r2col1 > h3,
    .r2col1 select
    {
        width: 80%;
        margin-left: 20%;
    }

    .r2col2
    {
        display: inline-block;
        width: 50%;
    }

    .r2col2 input,
    .r2col2 > h3,
    .r2col2 select
    {
        width: 80%;
        margin-left: 1%;
    }

    /* avatar */
    #avatar
    {
        width: 20vw;
        height: 20vw;
    }
}

@media screen and (orientation: portrait)
{
    .desktop { display: none  ;}
    .mobile { display: inline;}

    .lineItem
    {
        margin-left: 1vw;
        margin-right: 1vw;
        padding-left: 1vw;
        padding-right: 1vw;
    }
    .icon_button
    {
        height: 8vh;
        width: 8vh;
    }

    .order_button
    {
        height: 3.5vh;
        width: 3.5vh;
    }

    .circ_btn
    {
        height: 8vh;
        width: 8vh;
        border-radius: 50%;
    }

    .move_up_btn
    {
        left: 2%;
    }

    .move_dn_btn
    {
        left: 12%;
    }

    /* listTile */
    .listTile
    {
        text-align: center;
        margin: 5vh 0 0 10vw;
        width: 80vw;
        height: 50vh;
    }

    .listTileIcon
    {
        margin: 2vh 5vw 2vh 5vw;
        width: 70vw;
        height: 70vw;
        max-height: 40vh;
    }
    /* lists */

    .rowWithCheckboc .tree_child
    {
        left: calc(4vh + 1vw);
    }

    /* avatar */
    #avatar
    {
        width: 80vw;
        height: 80vw;
    }
}



.hid
{
    display: none;
}