/*http://openfontlibrary.org/font/grupo3*/
.root {
    padding: 0px;
    margin: 0px;
}


/*===========================================================
                                                    LAYOUT */
body {
    background-color: rgba(41,41,41,1);
    margin: 0px;
    padding: 0px;
    font-size: 10px;
    font-size: 0.8em;/* =14px */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#pageheader, #rootmaintext, footer {
    margin: 0px;
    padding: 0px;
    display: block;
}
#rootmaintext {
    background-color:rgba(255,255,255,1);
    min-height:600px;
}

#multisection {
    background-color:rgba(255,255,255,1);
    min-height:600px;
}

#multisection:nth-child(2n+1) {
    background-color:rgba(240,240,240,1);
}

.break {clear: both;}
.colText {max-width: 45%;padding: 1rem;float: left;}
.colImg {max-width: 45%;float:right;}
footer {
    padding-top: 3em;
    background-color: rgba(41,41,41,1);
    min-height:200px;
}
section.dark, section.light, section.white {padding: 3em;}
section.dark {background-color: rgba(29,29,29,1);color: rgba(234,224,211,1);}
section.dark h2 {padding-bottom: 0.8em;}
section.light {background-color: rgba(212,205,201,1);color: rgba(57,63,56,1);}
section.white {background-color: rgba(255,255,255,1);color: rgba(55,55,55,1);}

/*===========================================================
                                                   LOGGED IN */
section.pageheader {
    color: rgba(204,204,204,1);
    font-weight: 100;
    font-size: 0.8rem;
    margin-left: 2rem;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}


/*===========================================================
                                                HEADER/MENU */
#pageheader {
    background-color: rgba(56,99,103,1);
    display: block;
    overflow: auto;
    min-height: 120px;
}
#pageheader img {
    float: left;
    padding: 0.8em 0.8rem 0rem 0.4rem;
    max-width: 90px;
    height: auto;
}
#pageheader p {
    /*this is the page title*/
    max-width: 100%;
    margin-top: 0.8em;
    line-height: 1em;
    padding: 0em;
    font-family: 'GRUPO3Regular';
    font-weight: normal;
    font-style: normal;
    font-size: 2em;
    color: rgba(240,240,240,1);
}

#pageheader p.loggedInAs {
    /*this is the logged-in as... paragraph*/
    font-family: inherit;
    display:block;
    font-size: 0.8em;
    color: rgba(240,240,240,1);
}

nav.main, nav.mainLoggedIn {
    display: block;
    padding: 0em;
    margin-top: 1.1em;
    margin-bottom: 0.5em;
    float: right;
    font-family: Helvetica;
    font-weight: normal;
    font-style: normal;
    color: rgba(240,240,240,1);
}

nav.main ul, nav.mainLoggedIn ul {
    list-style-type: none;
    font-size: inherit;
    font-weight: 300;
    float: right;
    margin: 0em;
}
nav.main li, nav.mainLoggedIn li {
    float: left;
    margin: 0em 1.5em 0em 0em;
}
nav.main a {
    color:rgba(173,186,188,1);
    text-decoration: none;
}
nav.main a:hover, a:active {
    color: rgba(230,230,230,1);
}

nav.main a.loggin, nav.mainLoggedIn a {
    color:rgba(204,154,72,1);
    text-decoration: none;
}


/*===========================================================
                                                     FONTS */

@font-face{
    font-family:Roboto;
    src: url('/static/resources/fonts/roboto/RobotoCondensed-Light-webfont.eot');
    src: url('/static/resources/fonts/roboto/RobotoCondensed-Light-webfont.eot?iefix') format('eot'),
         url('/static/resources/fonts/roboto/RobotoCondensed-Light-webfont.ttf') format('truetype'),
         url('/static/resources/fonts/roboto/RobotoCondensed-Light-webfont.svg#webfont') format('svg');
}

@font-face {
    font-family:Grupo;
    src: url('/static/resources/fonts/grupo3/GRUPO3.otf');
}
@font-face {
    font-family:SocialIconsPlus;
    src: url('/static/resources/fonts/social_icons/Socialico Plus.otf');
}
@font-face {
    font-family:SocialIcons;
    src: url('/static/resources/fonts/social_icons/Socialico.otf');
}
footer p {
    color: rgba(173,186,188,1);
    margin: 0em;
    padding: 1em 3em;
    font-size: 0.8em
}


/*===========================================================
                                        RESPONSIVE FLAG TEST */
span.responsiveTestMob {visibility:visible;}
span.responsiveTestTab {visibility: hidden;}
span.responsiveTestDesk {visibility: hidden;}




/*===========================================================
                            TABLE TEST: REPOSITORIES: MODULES; */

table {
    outline: 1px solid #CCCCCC;
    width: 90%;
    font-size: 0.9rem;
}

tr:nth-child(2n+1) {
    background-color: #EBEBEB;
}

td {padding: 0.2em;}





/*===========================================================
                                                    MAINTEXT */
h1, h2, h3, h4, h5, p, blockquote {max-width: 90%}
p {
    font-style: normal;
    font-variant: normal;
    font-weight: 300;
    line-height: 1.7em;
}
p {
    padding: 1em 0em;
    margin: 0em;
}
ul {
    font-size: inherit;
    font-weight: 300;
    margin: 1rem 0rem 1em -1.6rem;
}
li {
    margin-bottom: 0.5em;
}
blockquote {
    background-color: rgba(56,99,103,0.2);
    margin: 0.5em 0em 1em 0em;
    padding: 1.8em;
    font-size: inherit;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 23px;
}

span.code {
    font-size: 1.1em;
    color: rgba(29,108,140,1);
    font-family: monospace;
    overflow-wrap: break-word;
}

pre {
    font-size: 11px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 23px;
}
h2, h3, h4 {
    padding: 0em;
    margin: 0em;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}
h2, h3, h4 {
    font-family: 'Roboto';
    font-weight: 100;
}
h2 {font-size: 24px; font-size: 2.4em;}
h3 {font-size: 16px; font-size: 1.6em;}
h4 {font-size: 10px; font-size: 1em;}
a {
    color:rgba(29,108,140,1);
    text-decoration: none;
    outline: none;
}

a.home {
    text-decoration: none;
    outline: none;
}

a:hover, a:active {
    color:rgba(25,134,180,1);
}
a.btnMore {
    min-width: 3rem;
    text-decoration: none;
    padding: 0.3rem 0.5rem 0.3em 2em;
    display: inline-block;
    color: rgba(168,218,190,1);
    background-color: rgba(56,99,103,1);
    border:none 5px #386266;
    -moz-border-radius-topleft:6px;
    -moz-border-radius-topright:6px;
    -moz-border-radius-bottomleft:6px;
    -moz-border-radius-bottomright:6px;
    -webkit-border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    border-top-left-radius:6px;
    border-top-right-radius:6px;
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
}
i {font-style: italic;}
b {font-weight: bold;}
em {font-weight: bolder;}
span.ct_lbl {
    display: inline-block;
    width:6em;
}
span.error {
    display: inline-block;
    margin-bottom: 1.4rem;
    font-size: 0.8rem;
    color: rgba(210,59,0,1);
    border-left: 10px solid rgba(210,59,0,1);
    padding: 0.4rem;
}

img.productCartoon {
    max-width: 100%;
    outline: 1px solid blue;
}
img.security {
    width: 30%;
}
a.socialIcons {
    font-family:Socialico Plus;
    font-size: 3rem;
    text-decoration: none;
    color: rgba(136,136,136,1);
}
.containerFooterInfo {
    display: block;
    width: 50%;
    float: left;
}
.containerSocial {
    display: block;
    width: 40%;
    float: right;
}







a.deviceStatus:contains("On") {
    color: white;
    background: #5d9968; /* Old browsers */
    background: -moz-linear-gradient(top,  #5d9968 0%, #517a4f 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #5d9968 0%,#517a4f 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #5d9968 0%,#517a4f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d9968', endColorstr='#517a4f',GradientType=0 ); /* IE6-9 */
}

a.deviceStatus:contains("Off") {
    color: white;
    background: #df3615; /* Old browsers */
    background: -moz-linear-gradient(top,  #df3615 0%, #8e2b05 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #df3615 0%,#8e2b05 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #df3615 0%,#8e2b05 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#df3615', endColorstr='#8e2b05',GradientType=0 ); /* IE6-9 */
}

/*===========================================================          FORMS */
form.scForm {
    display: block;
    margin-bottom: 4em;
}

form.scForm label {
    font-size: 0.9em;
    display: inline-block;
    width: 6rem;
    margin: 1rem 0rem 0rem 0rem;
}

form.scForm input {
    color: rgba(20,20,20,1);
    width: 16rem;
    padding: 0.4rem;
    font-size: 0.8rem;
    border: 1px solid rgba(100,100,100,1);
}
form.scForm input[type='submit'] {
    color: rgba(255,255,255,1);
    background-color: rgba(218,99,0,1);
    font-size: 1rem;
    border-radius: 6px;
    display: inline-block;
    padding: 10px;
    height: 4rem;
    width: 7rem;
    border: none;
    cursor: pointer;
    margin: 0rem 0rem 0rem 6rem;
}
form.scForm input[type='submit']:hover {
    background-color: rgba(228,109,0,1);
}

/* ------------- very small form ----------- */
form.tinyForm {
    display: block;
    margin-bottom: 0.1em;
}

form.tinyForm label {
    font-size: 0.9em;
    display: inline-block;
    width: 6rem;
    margin: 0.1rem 0rem 0rem 0rem;
}

form.tinyForm input {
    color: rgba(20,20,20,1);
    width: 16rem;
    padding: 0.1rem;
    font-size: 0.8rem;
    border: 1px solid rgba(100,100,100,1);
}
form.tinyForm input[type='submit'] {
    color: rgba(255,255,255,1);
    background-color: rgba(218,99,0,1);
    font-size: 1rem;
    border-radius: 6px;
    display: inline-block;
    padding: 2px;
    width: 5rem;
    height: 1.8rem;
    border: none;
    cursor: pointer;
    margin: 0rem 0rem 0rem 0.1rem;
}
form.tinyForm input[type='submit']:hover {
    background-color: rgba(228,109,0,1);
}


/*===========================================================
                                                        FOOTER */
footer p {
    color: rgba(173,186,188,1);
    margin: 0em;
    padding: 1em 3em;
    font-size: 0.8rem
}



/*===========================================================
                                       RESPONSIVE DEFINITIONS */

@media only screen and (min-width:769px) {
    /*#pageheader p {color: #E88F1A;}*/
    body {
    font-size: 0.9em;/* =14px */
    }
    h1, h2, h3, h4, h5, p, blockquote {max-width: 70%}
    span.responsiveTestMob {visibility:hidden;}
    span.responsiveTestTab {visibility: visible;}
    span.responsiveTestDesk {visibility: hidden;}
}

@media only screen and (min-width:1025px) {
    /*#pageheader p {color: #90C9B5;}*/
    body {
    font-size: 1em;/* =14px */
    }
    h1, h2, h3, h4, h5, p, blockquote {max-width: 70%}
    span.responsiveTestMob {visibility:hidden;}
    span.responsiveTestTab {visibility: hidden;}
    span.responsiveTestDesk {visibility: visible;}
}


.slider {
    width: 50%; /* Full-width */
    height: 25px; /* Specified height */
}

.datalist {
    display: inline;}

/*=========== pre blocks ======== */
.comment {
    width: 90%;
    font-size: 0.9em;
    line-height:1.2em;
    background-color: rgba(255,255,195,1);
    background-size:2.4em 2.4em;
    background-origin:content-box;
    padding: 5px 20px;
    text-align:left;
    font-family:calibri,arial,sans-serif;
    /* transform:  rotate(0.5deg); */
}

div.scrollable {
    max-height: 400px;
    overflow: auto;
    max-width: 100%;
}

td.transaction_inbound {
    color: rgba(0,0,0,1);
    text-align: right;
}
td.transaction_outbound {
    color: rgba(255,0,0,1);
    text-align: right;
}