/* GLOBAL STYLE DO NOT MODIFY */

html.bomharp{
    height: 100%;
}
html.bomharp body{
    min-height: 100%;
    height: auto;
    position: relative;
}
#g
{
    font-size: 14px;
    text-align: left;
}
#g, #g *
{
    line-height: normal;
    margin: 0;
    padding: 0;
    display: block;
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;

    -webkit-font-smoothing: antialiased;
}
/* Popup Overlay ( on click close )
   ========================================================================== */
.o,
.Rwror
{
    z-index: 999999990;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.5);
    /*opacity: .5;*/
    /*filter: alpha(opacity=50);*/
}
.Rwror{
    z-index: 999999980;
    background: rgba(255,255,255,.5);
    text-align: center;
}
.Rwror div{
    z-index: 999999985;
    position: fixed;
    top: 40%;
    left: 50%;
    height: auto;
    width: auto;
    background-color: #FFF;
    padding: 15px 30px;
    border: 1px solid #ccc;
    margin-left: -99px;
}
/* logout popup
   ========================================================================== */
.r_ile
{
    display: none;
    z-index: 999999999;
    position: fixed;
    top: 43px;
    right: 15px;
    padding: 15px;
    min-width: 200px;
    text-align: center;
    background: rgba(255,255,255,0.8);

    box-shadow: 2px 2px 2px rgba(000,000,000,0.3);
    -moz-box-shadow: 2px 2px 2px rgba(000,000,000,0.3);
    -webkit-box-shadow: 2px 2px 2px rgba(000,000,000,0.3);
}
i.r_w,
#g i.r_w
{
    position: static;
    right: initial;
    top: initial;
    left: initial;
    bottom: initial;

    display: inline-block;
    height: 14px;
    width: 14px;
    vertical-align: middle;
    margin: 0 5px 0 0;
    border: 3px solid rgba(0,0,0, 0.2);
    border-left-color: #000;
    border-radius: 50%;
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}
.Rwror i.r_w{
    height: 24px;
    width: 24px;
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* Login Form
   ========================================================================== */
#g
{
    display: none;
    z-index: 999999992;
    position: absolute;
    top: 85px;
    left: 50%;
    padding: 0 36px;
    height: 491px;
    min-height: 160px;
    width: 290px;
    margin-left: -181px;
    background: rgba(255,255,255,0.8);

    overflow: hidden;



    box-shadow: 2px 2px 2px rgba(000,000,000,0.3);
    -moz-box-shadow: 2px 2px 2px rgba(000,000,000,0.3);
    -webkit-box-shadow: 2px 2px 2px rgba(000,000,000,0.3);

    transition: height .5s;
    -webkit-transition: height .5s;
}
.t #g
{
    transition: none;
    -webkit-transition: none;
}
#g>*:first-child
{
    margin-top: -547px;
}
#g h3
{
    padding: 20px 36px;
    margin: 0 -36px;
    font-weight: 400;
    font-size: 114.3%; /* 16px */
    background: rgba(000,000,000,0.6);
    color: #efeff1;
}
#g h3+form
{
    margin-top: 30px;
}
#g h3+p
{
    margin: 20px 0;
    text-align: center;
    font-style: italic;
}
#g .Rils,
.Rils
{
    text-align: center;
}
#g .Rils a,
.Rils a
{
    cursor: pointer;
    display: inline-block;
    height: auto;
    width: 22%;
    max-width: 64px;
    margin-left: 4%;
}
#g .Rils.z a,
.Rils.z a
{
    margin-left: 3%;
    width: 17.6%;
}
#g .Rils a:first-child,
.Rils a:first-child
{
    margin-left: 0;
}
#g .Rils a *,
.Rils a *
{
    width: 100%;
}
#g .Rils a:hover,
.Rils a:hover
{
    /*    box-shadow: inset 0 1px 5px #555;
        -webkit-box-shadow: inset 0 1px 5px #555;
        -moz-box-shadow: inset 0 1px 5px #555;*/
}
#g hr,
.Rils+hr
{
    margin: 25px 0;
    outline: 0;
    border: 0;
    border-top: 1px solid #ccc;
}
#g hr+*
{
    padding: 9px 0 0 6px;
    margin: -41px auto 9px;
    height: 21px;
    width: 24px;
    font:400 78.6% arial; /* 11px */
    color: #555;
    background: #d3d3d3;
    border-radius: 50%;
}
#g *[type=checkbox]
{
    margin: -1px 3px 1px 0;
    display: inline-block;
    vertical-align: middle;
}
#g a
{
    display: inline-block;
    cursor: pointer;
}
#g a:hover
{
    text-decoration: underline;
}
#g .A
{
    margin: 0 9px 25px 0;
}
#g *[src*="w.gif"],
#g i.r_w
{
    margin: 7px 0 0 -21px;
    float: left;
    vertical-align: top;
}
#g i.r_w
{
    margin: 7px 0 0 -25px;
}

#g form+*
{
    padding: 15px 36px;
    margin: 0 -36px;
    height: 50px;
    background: rgba(255,255,255,.5);
}
#g form+* *
{
    font-weight: 400;
    font-size: 92.9%; /*13px*/
}
#g form+* * * /* all the childs inherit font-size */
{
    font-size: inherit;
}
#g form p
{
    font-size: 85.7%; /*12px*/
    margin: 0 0 9px;
}
#g>*:last-child
{
    padding: 0 0 20px;
}
#g>*:last-child p
{
    text-align: left;
}

#g label
{
    font-size: 92.9%; /*13px*/
}
#g .j
{
    padding: 6px 5px;
    margin-top: 2px;
    width: 96%;
    height: 18px;
    line-height: 18px;
    font-size: 107.7%; /* 107.7% from 13px(parent label) = 14px*/
    vertical-align: middle;
}
#g .j+*
{
    margin: 0 0 5px 99%;
    color: #dd4b39;
    font-size: 100%; /* 100% from 13px(parent label) = 13px*/
    white-space: nowrap;
    overflow: hidden;
    transition: .2s;
    -webkit-transition: .2s;
}
#g .j.z+*
{
    height: 17px;
}
#g .eg+*
{
    margin-left: 0;
}
.eg
{
    border-color: #dd4b39!important;
    outline: 0!important;
}

#g *[src*="w.gif"]+.b,
#g i.r_w+.b
{
    pointer-events: none;
}
#g .b~*
{
    display: inline-block;
}
#g>*:first-child form>label:first-child
{
    width: 46%;
    display: inline-block;
    margin-right: 14px;
}
#g>*:first-child form>label:first-child+*
{
    width: 46%;
    display: inline-block;
}
#g form>div
{
    position: relative;
    overflow: hidden;
}
#g div>i
{
    padding: 9px 0;
    cursor: pointer;
    position: absolute;
    right: -44px;
    top: 18px;
    font: italic 400 78.6% arial; /*11px*/
    white-space: nowrap;
    transition: .2s;
    -webkit-transition: .2s;
}
#g div>i u
{
    text-decoration: none;
    color: transparent;
    display: inline;
    font-size: inherit; /*11px*/
}
#g div>i:hover
{
    right: 5px;
}
#g div>i:hover u
{
    color: inherit;
}

/* status clases
    .bb - blue with border
    .rb - red with border
    .ab - alert blue
    .ar - alert red
   ========================================================================== */
#g .bb {
    border: 1px solid #fcefa1;
    background: #fbf9ee url(../i/i.png) no-repeat 7px -571px;
}
#g .rb {
    border: 1px solid #cd0a0a;
    background: #fef1ec url(../i/i.png) no-repeat 7px -271px;
}
#g .ab {
    background: url(../i/i.png) no-repeat 7px -571px;
}
#g .ar {
    background: url(../i/i.png) no-repeat 7px -271px;
}
#g .ss {
    border: 1px solid #fcefa1;
    background: #fbf9ee url(../i/i.png) no-repeat 7px 9px;
}
#g .bb, #g .rb, #g .ab, #g .ar, #g .ss {
    padding: 10px 10px 10px 30px;
}

/* button
   ========================================================================== */
#g .b
{
    display: inline-block;
    vertical-align: baseline;
    cursor: pointer;

    float: none;
    position: static;
    width: auto;
    height: auto;
}
#g .b span
{
    height: auto;
    width: auto;
}
#g .b span span
{
    padding: 9px 22px;
}

.h
{
    display: none;
}


@media (max-width: 460px){
    #g
    {
        top: 0;
        left: 0;
        margin-left: 0;
        right: 0;
        width: auto;
    }
    .mox
    {
        position: absolute;
        right: 35px;
        top: 14px;
        left: inherit;
        z-index: 999999994;
        width: 30px;
        height: 30px;
        cursor: pointer;
        background: transparent;
    }
    .mox:before,.mox:after
    {
        content: "";
        display: block;
        background: #fff;
        height: 1px;
        position: absolute;
        top: 15px;
        right: 0;
        width: 90%;
        transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
    .mox:after
    {
        transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }
}
@media (max-width: 380px){
    #g
    {
        padding: 0 9px;
    }
    #g>*:first-child form>label:first-child,
    #g>*:first-child form>label:first-child+*
    {
        width: 100%;
        margin-right: 0;
    }
    .mox
    {
        right: 9px;
    }
    #g i.r_w {
        position: relative;
        right: -15px;
    }
}
/* RUBYMAGE DEFAULT STYLE */
#g *
{
    outline: 0;
    border: 0;
    color: #464646;
    font-family: arial, sans-serif;
    font-weight: 400;
}
#g h3
{
    text-transform: none;
}
#g label
{
    font-size: 92.9%; /*13px*/
    color: #222;
}
#g .j
{
    padding: 6px 5px;
    width: 96%;
    height: auto;
    line-height: 18px;
    font-size: 100%; /*14px*/
    background: #fff;
    border: 1px solid #d9d9d9;
    border-top: 1px solid silver;
    border-radius: 2px;
}
#g .j:hover
{
    border: 1px solid #b9b9b9;
    border-top-color: #a0a0a0;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
#g .j:focus
{
    border: 1px solid #31b5c5;
    /*box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);*/
}
#g form+* *
{
    font-family: arial, sans-serif;
}
#g a
{
    /*color: #294a7b;*/
    color: #1c97a5;
}
#g .b~*
{
    font-size: 85.7%; /*12px*/
}

#g .b
{
    font-size: 85.7%; /*12px*/
    font-weight: 700;
    text-align: center;
    text-transform: none;

    border-radius: 4px;
    -webkit-border-radius: 4px;

    transition: .2s;
    -webkit-transition: .2s;
}
#g .A span span
{
    background: #37bfcd;
    color: #fff;
}
#g .A span span:hover
{
    background: #31b5c5;
}