/*==============================================================================================*/
/* M S   O F F I C E :   Copy of bibleQuotes.css, adjusted for use with Office Add-Ins          */
/*==============================================================================================*/
:root {
    --myBrownColor:         rgb(120,50,5);
    --myBibleRed:           rgb(97,16,0);
    --myGoldColor:          palegoldenrod;
    --inputBgColor:         #fff8bf;
    --resultBgColor:        lightyellow;
    --standardFont:         Arial, Helvetica, sans-serif;
    --narrowFont:           Arial Narrow;
    --smallIconSize:        18px;
    --stdIconSize:          24px;
    --largeIconSize:        28px;
    --iconDistanceX:        18px;
    --smallFontSize:        0.8rem;
    --VersesLblWidth:       54px;
    --modalContainerTop:    2px;
    --heightModalInputLine: 30px;
    --OneDigitWidth:        18px;
    --outerMarginLR:        7px;
    --widStyleCtrlCol1:     20px;   /* total is 231px. Add 2x7px for padding => 245px see below */
/*  --widStyleCtrlCol2:     77px;   */
    --widStyleCtrlCol3:     80px;
    --widStyleCtrlCol4:     30px;
    --widStyleCtrlCol5:     24px;
    --widStyleCtrlModal:    245px;  /* 245px */
    --headerColumnsLeftRight: 36px;
    --weakBoxShadow: 5px 5px 7px rgba(0,0,0,0.4);
    --stdBoxShadow: 10px 10px 5px #333;
}

* {box-sizing: border-box;}
body {
    background-image: url("/images/tiles/marble.jpg");
    border: 0;
    margin: 0;
    height:100vh;
    font-size: 10px;
    font-family: var(--standardFont);
    overflow-y: auto;
}
body.help{
    font-size: 14px;
}

h1,h2,h3,h4 { margin: 0; padding:0; border:0; text-align: center; }
    h1 {
        color:var(--myGoldColor);
        font-size:1.3rem;
        margin-top: 3px;
        text-shadow: 2px 2px 3px black;
    }
@supports (-webkit-background-clip: text) {
    h1 {
        position: relative;
        background: linear-gradient( to right, #cb9b51 0%, #f6e27a 30%, #f6f2c0 50%, #f6e27a 70%, #cb9b51 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);
    }
}

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

p {margin-top: 0.5em;}

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 {
       pointer-events:none;
    }

button.wordButton {
	box-shadow: 1px 1px 1px 0 #333;
	border-radius:5px;
	display:inline-block;
	cursor:pointer;
	font-family:Arial;
	font-size:11px;
	font-weight:bold;
    margin-bottom:5px;
	padding:5px 10px;
	text-decoration:none;
/*    max-width:var(--widStyleCtrlModal);*/
}

button.wordButton:hover {
    border-top:1px solid #bbb;
	position:relative; top:2px;
}

button.frozen {
    background-image:url('/images/tiles/frozen.jpg');
    background-size:cover;
    color:blue;
    border-style:solid;
    border-width:1px;
    border-color:#aaa #ccc #ddd #bbb;
}

button.iconExpand, button.iconCollapse {
    border:0;
    position:absolute;
    top:2px;right:2px;
    width:20px;height:20px;
}

button.iconExpand,   div.iconExpand   { background-image:url('/images/expand.svg');  }
button.iconCollapse, div.iconCollapse { background-image:url('/images/expand.svg'); transform:rotate(180deg); }

div.instrTitle {
    position:relative;
    background-color:#ccc;
    border-style:solid;
    border-width:1px;
    border-color:#ddd #999 #777 #bbb;
    font-weight:500;
    font-size:1.2em;
    margin:3px 0 0 0;
    padding:4px;
    height:var(--stdIconSize);
    width:100%;
/*    max-width:var(--widStyleCtrlModal);*/
}

div.divCollapsed {
    display:none!important;
}
div.divExpanded {
    background-color:#efefef;
    border-style:solid;
    border-width:0px 1px 1px 1px;
    border-color:#ddd #999 #777 #bbb;
/*    max-width:var(--widStyleCtrlModal);*/
}

div.instruction {
    font-size:0.8rem;
    background-color:#efefef;
    padding:3px 3px 3px 5px;
    height:100%;
    width:100%;
}


button.insert {
	background:rgba(0,192,0,0.5)!important;
    font-weight:bold;
    color:black;
}
button.insert:hover {
	background:rgba(0,227,0,0.5)!important;
}

label {
    font-family: var(--narrowFont);
    font-size: 0.9rem;
}
    label.lblMain {     /* for labels on the main screen, like 'book', 'chapter', ... */
        margin-top: 6px;
        margin-bottom: 0px;
        font-family: var(--standardFont);
        width: 99%;
    }
    label.lblContact {
        font-size: 0.9rem;
        text-align: right;
        margin-top: 8px;
        margin-right: 3px;
    }


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

#divHeader {
    border: 0px dashed orange;
    display: grid;
    grid-template-columns: var(--headerColumnsLeftRight) 1fr var(--headerColumnsLeftRight);
    padding:5px 0 5px 3px;
    width: 100%;
}
#divSelectionElements {
    border: 0px dashed red;
    display: grid;
    grid-template-columns: 40px auto auto 54px ;
    grid-auto-rows: minmax(20px, auto);
    margin-bottom:10px;
    width:100%;
}

.ts-radio-text {
    font-size: 0.8rem;                /* Change the text size */
    position: relative;top:-2px;
}
.ts-radio-label input {
  margin-right: 5px;              /* Add space between the radio button and the text */
}

div.divSubSelection {
    display: flex;
    flex-direction: row;
}

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


/*==============================================================================================*/
/* for Office Add-Ins only                                                                      */
/*==============================================================================================*/

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

#divTabContent {
/*    border:2px dashed magenta;*/
    height:100%;            /* auto expand within parent (=body) */
    overflow-y:auto;

    display:flex;               /* child divs are also (vertically arranged) flex elements */
    flex-direction:column;
}

#divPage1, #divPage2, #divPage3 {
/*    border:2px dotted blue;*/
    height:100%;                /* auto expand within parent div (=divTabContent) */
    overflow-y:auto;

    display:flex;               /* child divs are also (vertically arranged) flex elements */
    flex-direction:column;
}

div.intprResults {
    background-color:var(--resultBgColor);
    border-style:       solid;
    border-width:       1px;
    border-color:       #777 #bbb #ddd #999;
    font-size:          1.0rem;
    height:100px; overflow-y:auto;
    width:100%;   overflow-x:clip;
    padding:3px;

    flex-shrink:0;
}
div.intprMarked {
//  font-weight:bold;
    background-color:#ddd;
}

div.intprResults.frozen {
    background-image:url('../../images/tiles/frozen.jpg');
    background-size:cover;
    border-color:   #099 #0ff #3ff #0cc;
}

div.OfficeInfoContainer {
/*    border:2px dashed green;*/

    max-height:100%;            /* auto expand within parent divs (#divPage1, #divPage2) */
    overflow-y:auto;

    display:flex;               /* child divs are also (vertically arranged) flex elements */
    flex-direction:column;
}

div.expandibleFlex {
    max-height:100%;            /* auto expand within parent div */
    overflow-y:auto;

    display:flex;               /* child divs are also (vertically aranged) flex elements */
    flex-direction:column;
}

div.cssVersesBody {
    background-color:var(--resultBgColor);
    border-width:0;
    font-size:0.9em;
    padding:3px 0px 3px 5px;
    width:100%;

    max-height:100%;            /* auto expand within parent div */
    overflow-y:auto;
}

span.cssVerseNo {
    font-size:0.9em;
    font-weight:bold;
}

div.copyRightW {
    font-size:0.65rem;
    font-weight:bold;
    text-align:center;
    min-height: 12px;
    padding:    2px;
    width:      100%;
    flex-grow:  0;
    flex-shrink:0;
}

#divBodyInstr1, #divBodyInstr2 {
    flex-shrink:0;
    flex-grow:0;
}

div.wordError {
    font-size:1.1em;
    font-weight:bold;
    color:orange;
    background-color:#555;
    border:1px solid grey;
    padding:3px;
    margin:6px 0;

    display:none;

    width:100%;
    max-width:var(--widStyleCtrlModal);
}
div.wordError.show {
    display:block!important;
}


input[type=checkbox].officeCheckbox {
    width:20px;
}

label.office {
    font-family:var(--standardFont);
    font-size:0.75rem;
    font-weight:bold;
}

label.disabled {        /* label with additional class 'disabled' */
    color:grey;
}
#cbxReplace:checked + label, #cbxHideErrors:checked + label {
    color:darkorange;
}

/* added October 2024 for fulltext-search */
#divTextSearchElements {
    border: 0px dashed red;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(20px, auto);
    margin-bottom:10px;
    width:100%;
}

span.fts_errorMsg {
    color:red;
    font-size:0.85rem;
}
span.fts_info {
    color:blue;
    font-size:1.0rem;
}
span.fts_info_green {
    color:green;
    font-size:1.0rem;
}
span.fts_reference {
    color:blue;
    font-size:0.8rem;
}
span.fts_foundPart {
    background-color:yellow;    // mark found text part inside a verse
}