/********************************************
Module           :   site.css
Copyright        :   2010-2025 Alexander Bell
*********************************************/

html { height: 100%;  overflow: auto;}

body {
    height: 100%;
    box-sizing: border-box;
    width: 100%;
    margin: 0px;
    padding: 0px;
    font-size: 16px;
    background-color: antiquewhite;
}
.container { background-color: #fff;}

*, *:before, *:after {box-sizing: inherit;}

footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    font-size: 1em;
    z-index: 101;
    height: 50px;
    line-height: 50px;
    vertical-align: central;
}

ul, ol { font-size: 1.3em;}
p:not(ul p) { font-size: 1.4em;}
p:not(ol p) {font-size: 1.4em;}
p{letter-spacing: 2px;}
.p-text-justify {text-align: justify;text-justify: inter-word;}

h1, h2, h3, h4, h5, h6 {letter-spacing: 2px;}

.navbar-brand{font-size:1.4em; color:darkcyan; font-family:'Century Gothic', 'Lucida Sans', Verdana; font-weight:600;}
.navbar-nav li {margin-right:0.2em; font-family: 'Century Gothic', 'Lucida Sans', Verdana;}
.navbar .fa, .navbar-nav li {font-size: 1.2em; color: darkorange;}

li.nav-item .active {background-color:#ffeacc; cursor:zoom-out; border-bottom:1px solid red;}
li.nav-item a:not(.active):hover { background-color:beige; border:0;}
.navbar ul {background-color:#f0f0f0;}

.markup-code {
    font-family: 'Courier New', Courier, monospace;
    background-color: aquamarine;
}

button.toggle { font-size:1.6em;}
img.topic-full {width:100%; max-width: 1024px; margin-bottom:0.5em;}
img.topic-medium {width:100%; max-width: 600px; margin-bottom:0.5em;}
img.screenshots {max-width:100%;margin-bottom:0.5em;}

.div-spacer-2px {height: 2px;}
.div-spacer-3px {height:3px;}
.div-spacer-5px {height:5px;}
.div-spacer-10px {height:10px;}
.div-spacer-50px {height:50px;}
.div-spacer-70px {height:70px;}
.div-spacer-v0 {height:0.75em;}
.div-spacer-v1 {height:1em;}
.div-spacer-v2 {height:2em;}
.div-spacer-v3 {height:3em;}
.div-spacer-v4 {height:4em;}
.bg-gray-f5 {background-color: #f5f5f5;}
.bg-gray-f0 {background-color: #f0f0f0;}
.bg-gray-ef {background-color: #efefef;}
.bg-gray-e0 {background-color: #e0e0e0;}
.color-dark-orange{color:darkorange;}
.color-dark-olive{color:darkolivegreen;}

.sonet span {
    margin: 0em 0.3em;
    background-color: #606060;
    color: transparent;
    text-shadow: 0px 1px 2px rgba(255,255,255,0.5);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
}

/*fa*/
.fa, .fas, .fab {}
.sonet span:hover {background-color: #101010;}
.sonet .fab {font-size: 4rem;}
div.card .fa, div.card .fas, div.card .fab { color: darkorange;}

.badge { font-family: 'Century Gothic'; font-size:1.2em;}
.badge a { padding: 0px 10px;}
.badge-trapezoid, .badge-trapezoid-inv { padding: 15px 20px;}
.badge-trapezoid{ border-radius: 30px 30px 0px 0px;}
.badge-trapezoid-inv { border-radius: 0px 0px 30px 30px;}
.badge-text-inv { transform: scale(1,-1);}
.badge-quote {
    background-color: #f0f0f0;
    border-radius: 0em 10em 10em 0em;
    border-left:4px solid darkorange;
    padding: 1em 0em;
}
.badge-quote ul li{list-style:none;}
.card {
    margin: 0.15%;
    margin-top: 0%;
    text-align: center;
    border: none;
}
.card-header{border:none; background-color:#e0e0e0;}
.card-body{ border:none; background-color:#f0f0f0; }
.card-footer{ border:none; background-color:#e0e0e0;}
.card-img-ai900{width:80%;}

#imgStackoverflow {
    width: 100%;
    min-width: 200px;
    max-width: 300px;
}

/*mask input*/
.input-group {
    position: relative;
    overflow: hidden;
}
.input-group > .toggleMask {
    position: absolute;
    top: 0;
    right: -20px;
    text-indent: -30px;
    height: 100%;
    line-height: 2;
    pointer-events: auto;
    cursor: pointer;
    z-index: 11;
}
.input-group > .toggleMask ~ input {padding-right: 30px;}
.input-group > .toggleMask:checked::before {content: "\e105";}

/*TERMS*/
#div-terms {
    margin-bottom:40px;
    padding: 1em 1.5em 1em 1.5em;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.19), 0 3px 5px 0 rgba(0, 0, 0, 0.2);
}
#div-terms h2 {
    font-size: 1.5em;
    font-weight: 700;
    color: darkorange;
    text-align: center;
    margin-top: 1em;
}
#div-terms h3{ font-size:1.3em; font-weight:600; text-align: center;}
#div-terms p{ font-size:1.1em;}

/*FOOTNOTES*/
.div-footnotes p {
    line-height: 1.3em;
    margin:0.3em 0em;
    font-family: 'Century Gothic', Callibri;
    font-size:1.4em;
}

/*PUBS TABLE*/
#pubs table {
    width: calc(100% - 2px);
    border-collapse: collapse;
    border: solid 1px #bababa;
    overflow: auto;
    text-align: left;
    color: #303030;
    font-weight: 400;
}
#pubs table tr {vertical-align: central; border-bottom: solid 1px #d0d0d0;}
#pubs table tr:nth-child(odd) {background: #f5f5f5;}
#pubs table td, table th {padding: 0.5em; text-align: left;}
#pubs table th {font-weight: 500;}
#pubs table th {font-size: 1em; color: #fafafa; background-color: #606060;}
#pubs table tr:hover {background-color: #f0f0f0;}
#pubs table td:first-child {width: 50%;}
#pubs table td:nth-child(2) { width: 20%;}
#pubs table td:nth-child(3) { width: 5%;}
#pubs table td:nth-child(4) { width: 5%;}
#pubs table td:nth-child(5) { width: 15%;}
/* important!: row number implemented in CSS3 */
#pubs table tr:nth-child(2) {counter-reset: rowNumber;}
#pubs table tr {counter-increment: rowNumber;}
#pubs table tr td:first-child::before {
    content: counter(rowNumber)".";
    margin: 0em 0.2em;
    min-width: 3em;
    color: #808080;
}

.ul-none {list-style-type: none;}
.ul-circle {list-style-type: circle;}
.ul-no-padding {list-style-position: inside;  padding-left: 0;}
.span-word-mix { font-weight: 600; font-style: italic;}

/*SLIDE-IN*/
@keyframes slideFromL {
    0% {transform: translateX(-100%);}
    100% {transform: translateX(0);}
}
.slide-from-left {animation: 1s ease-out 0s 1 slideFromL;}

@keyframes slideFromT {
    0% {transform: translateY(-100%);}
    100% {transform: translateY(0);}
}
.slide-from-top {animation: 1s ease-out 0s 1 slideFromT;}

/*ZOOM*/
.zoom10 {transition: transform .1s;}
.zoom10:hover {transform: scale(1.1);}

.zoom20 {transition: transform .1s;}
.zoom20:hover  {transform: scale(1.2);}

/*FADE-IN*/
.fadeIn-3s {animation: fadeIn 3s;}
@keyframes fadeIn {0% {opacity: 0;} 100% { opacity: 1;}}

/*ROTATE*/
.rotate, .rotate15, .rotate180 { transition: all 1s;}
.rotate:hover { transform: rotate(360deg);}
.rotate15:hover {transform: rotate(15deg);}
.rotate90:hover {transform: rotate(90deg);}
.rotate180:hover {transform: rotate(180deg);}

#imgBrand { animation: 1s ease-out 0s slideFromL;}

/*MEDIA*/
@media screen and (max-width: 1200px) {
    .div-spacer-v2, .div-spacer-v3, .div-spacer-v4 { height: 1em;}
    .container, .container-lg, .container-md {max-width:100%;}
    #div-terms { width: 98%;  margin-left: 1%; }
    .card-img-ai900{width:100%;}
}
@media screen and (max-width: 1080px) and (orientation: portrait) {
    body {
        font-size: 1.4rem;
    }
    #idScrollingUp{visibility:collapse; width:0;}
    footer {
        height: 70px;
        line-height: 70px;

    }
}