:root {
    --myBrownColor: rgb(120,50,5);
    --myGoldColor:  palegoldenrod;
    --inputBgColor: #fff8bf;
    --standardFont:     Arial, Helvetica, sans-serif;
    --narrowFont:       Archivo Narrow;
    --smallIconSize:    18px;
    --stdIconSize:      24px;
    --largeIconSize:    28px;
    --iconDistanceX:    18px;
    --smallFontSize:    0.8rem;
    --widStyleCtrlCol1:  95px; /* total is 340px. Add 2x7px for padding => 354px see below */
    --widStyleCtrlCol2:  15px;
/*  --widStyleCtrlCol3:  135px;   MOVED to device dependent code (see in this file below) */
    --widStyleCtrlCol4:  40px;
    --widStyleCtrlCol5:  28px;
    --widStyleCtrlCol6:  28px;
/*  --widStyleCtrlModal: 335px resp. 356px;   MOVED to device dependent code (see in this file below) */
    --maxHeaderWidth:   1440px;                   /* was 1350px before  */
    --headerColumnsLeftRight: 40px;
    --weakBoxShadow: 5px 5px 7px rgba(0,0,0,0.4);
    --stdBoxShadow: 10px 10px 5px #333;
}

* {box-sizing: border-box;}

body {
    --OneDigitWidth: 18px;
    border: 0;
    margin: 0;
    font-size: 10px;
    font-family: var(--standardFont);
    overflow-y: auto;
}
body.help{
    font-size: 14px;
}

p {margin-top: 0.5em;}

h1,h2,h3,h4 { margin: 0; padding:0; border:0; text-align: center; }

h1 {
    color:var(--myGoldColor);
    text-shadow: 2px 2px 3px black;
    font-family: Suez One;
}

    h2 {
        color: #555;
        font-size: 1.0rem;
        font-weight:800;
        text-align:left;
    }
    h3 {
        color: #444;
        font-size: 0.9rem;
        font-weight:700;
        text-align:left;
    }

    a { color: black; text-decoration:underline; }

@supports (-webkit-background-clip: text) {
    h1 {
        position: relative;
        background: linear-gradient( to right, #cb9b51 0%, #f6e27a 30%, #f6f2c0 50%, #f6e27a 70%, #cb9b51 100% );
        background-size:100% 100%;
        color:transparent;
        text-shadow:none;
        -webkit-background-clip: text ;
    }
    h1::after {
        position: absolute;  left: 0px;	top: 0; z-index: -1;
        background: none;
        content: attr(data-heading);
        text-shadow: 2px 2px 3px rgba(0,0,0,0.8);
    }
}

ol, ul {
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
    padding-inline-start: 36px;
}

button, input[type=submit], label.FI {
    background:             linear-gradient(to bottom, rgba(240,240,240,0.5), rgba(192,192,192,0.5));
    background-size:        contain;
    background-position:    center;
    background-repeat:      no-repeat;
    border-style:           solid;
    border-width:           1px;
    border-color:           #ddd #999 #777 #bbb;
    cursor:                 pointer;
}
   button:hover    { background-color: #ddd!important; }
   button:disabled {
       opacity:0.4;
       pointer-events:none;
   }

button.FscIcon {    /* fullscreen icon in top right corner */
    position: absolute;
    top: 2px;
    right: 0;
}

button.sendMail {
    color:var(--myBrownColor);
    padding:4px;
}

button.editIcon {
    background-image: url('../images/pencil.png');
}

label {
    font-family: var(--narrowFont);
    font-size: 0.8rem;
    margin-top: 3px;
}
    label.lblMain {
        text-align: right;
        margin-top: 6px;
    }
    label.lblContact {
        font-size: 0.9rem;
        text-align: right;
        margin-top: 6px;
        margin-right: 3px;
    }

table {
    margin: 0;
    border-collapse: collapse;
}

#divHeader {
    border:         0px dashed red;
    display:        grid;
    grid-template-columns: var(--headerColumnsLeftRight) 1fr var(--headerColumnsLeftRight);
    margin-left:    var(--outerMarginLR);
    margin-right:   var(--outerMarginLR);
    max-width:      var(--maxHeaderWidth);
    width:          100%;
}
#divSelectionElements {
    border: 0px dashed red;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left:    var(--outerMarginLR);
    margin-right:   var(--outerMarginLR);
    max-width:      var(--maxHeaderWidth);
    width:          100%;
}
div.divSubSelection {
    display: flex;
    flex-direction: row;
}
#divSearchElements {
    border: 1px dashed red;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left:    var(--outerMarginLR);
    margin-right:   var(--outerMarginLR);
    max-width:      var(--maxHeaderWidth);
    width:          100%;
}

#copyRight {
    font-size:0.8rem;
    width:99.8% ;
    text-align:center;
}

#cookies {
    color: red;
    font-size: 0.8rem;
    position:absolute;
    bottom:5px;
    text-align: center;
    width: 99.8%;
}
    #cookies a {
        cursor: pointer;
        text-decoration: underline;
    }

.cssDisplayBox {
    position:   relative;
    display:    grid;
    margin-left: 2px;
    margin-right: 2px;
}

div.totalVerse { /* contains 1 verse including verse no and text for start (=usually left) alignment */
    display: flex;
    align-items: flex-start;
    border: 0px dashed green;
    justify-content: flex-start;
}
.cssVerseNo {                      /* contains 1 single verse no */
    margin-right: 0.2em;
    border: 0px dotted red;
    text-shadow: none;
}

.cssVersesBody { margin:0;  }

#divScroll {
    position: relative;
    width:auto;
    max-width: 100%;
    height:auto;
    max-height: 100%;
}

#pageTitle {
  	width: 100%;
	display: flex;
	justify-content: center;
    margin-bottom:5px;
}

/*==============================================================================================*/
/* for WIDE SCREEN only                                                                         */
/*==============================================================================================*/
@media screen and ( min-device-width:601px) {
    body {
        --modalContainerTop: 72px;
        --heightModalInputLine: 28px;
        --outerMarginLR: 10px;
        --widStyleCtrlCol3: 135px;
        --widStyleCtrlModal: 356px;
        --VersesLblWidth: 48px;
    }

    button.stdIconButton {
        width:  var(--stdIconSize);
        height: var(--stdIconSize);
        margin: 1px 2px;
    }

    h1 {
        font-size: 1.8rem;
        letter-spacing: 0.3em;
        margin-bottom: 0.1em;
    }

    h2 {
        font-size: 1.4rem;
    }

    h3 {
        margin-top: 0.5em;
        font-size: 1.2rem;
        text-align: left;
    }

    h4 {
        margin-top: 0.3em;
        font-size: 1.0rem;
        text-align: left;
    }

    label.lblMain { /* for labels on the main screen, eg. 'Book:', 'Chapter:' ...*/
        font-family: var(--standardFont);
        margin-right: 5px;
        min-width: 65px;
    }

    /* the container box to display the bible text */
    .cssDisplayBox {
        margin-top: 15px;
    }
}

/*==============================================================================================*/
/* for SMARTPHONES only                                                                         */
/*==============================================================================================*/
@media screen and (max-device-width: 600px) {

    body {
        --VersesLblWidth: 54px;
        --modalContainerTop: 34px;
        --heightModalInputLine: 35px;
        --outerMarginLR: 0px;
        --widStyleCtrlCol3: 115px;
        --widStyleCtrlModal: 335px;
    }

    button.stdIconButton {
        width: var(--largeIconSize);
        height: var(--largeIconSize);
        margin: 3px 1px 0 1px;
    }

    button.cameraIcon {
        background-color: #dcffdc;
    }

    h1 {
        font-size: 1.3rem;
        letter-spacing: 0.2em;
        margin-top: 0.1em;
    }

    h2 {
        font-size: 1.1rem;
        margin-top: 0;
    }

    h3 {
        margin-top: 0.5em;
        font-size: 1.0rem;
        text-align: left;
    }

    h4 {
        margin-top: 0.3em;
        font-size: 0.9rem;
        text-align: left;
    }

    label.lblMain { /* for labels on the main screen, eg. 'Book:', 'Chapter:' ...*/
        font-family: var(--narrowFont);
        margin-right: 2px;
        width: 55px;
    }

    /* the container box to display the bible text */
    .cssDisplayBox {
        margin-top: 3px;
    }

}