/*==============================================================================================*/
/* 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);
    --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);       /* used in navMenu.css */
    --stdBoxShadow: 10px 10px 5px #333;
    --tabContentColor:   hsla(40, 100%, 100%, 0.5);     /* color for active tab and content */
    --inactiveTabColor:  hsla(0,   0%,   75%, 0.5);     /* color of inactive menu tabs */
    --InstrTitleColor:   hsla(0,   0%,   70%, 0.5);     /* background color of title bar for instructions */
    --InstrContnColor:   hsla(0,   0%,   90%, 0.9);     /* background color of content of instruction boxes*/
    --myGoldColor:          palegoldenrod;
    --inputBgColor:         hsla(55, 100%,90%,0.5);     /* background of SELECT, INPUT, TEXTAREA */
    --resultBgColor:        hsla(55, 100%,90%,0.5);     /* results of freetext interpretation, Word tab 2 */
    --ButtonFaceColor:  hsla(0,   0%,  70%, 0.3);
    --ButtonHoverColor: hsla(0,   0%,  70%, 0.5);
    --ButtonShadowColor:hsla(0,   0%,  50%, 0.5);
    --ButtonActiveBorderColor:hsl(0, 0%, 50%);      /* grey */
}

* {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;
}

/*#region Buttons */

button, input[type=submit], label.FI {
    background-color:   var(--ButtonFaceColor);
    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: var(--ButtonHoverColor)!important; }
    button:disabled {
       pointer-events:none;
    }

button.wordButton {
    box-shadow: 2px 2px 2px var(--ButtonShadowColor);
	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;
}

button.wordButton:active {
  box-shadow: none;
  border:1px solid var(--ButtonActiveBorderColor);
}

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); }

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

/*#endregion Buttons */

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

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

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


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: 2px;              /* 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;
}

/*#region Spinner to signal waiting */

.spinner {
  width: 50px;
  height: 50px;
  border: 6px solid rgba(0, 128, 0, 0.2);   /* soft green base */
  border-top: 6px solid #32cd32;            /* bright green highlight */
  border-radius: 50%;
  animation: spin 1s ease-in-out infinite;  /* smoother and faster */
  position: absolute;  top: 20px;  right: calc(50% + 20px);
  transform: translateX(-50%);              /* cleaner than margin-left */
  z-index: 9999;
}
.hidden {
  display: none;
}
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*#endregion Spinner to signal waiting */

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

#btnExecSearch, #btnExecSearch4, #btnInsert1, #btnInsertAll3, #btnInsertAll4 {
    width:calc(100% - 2px);
}

#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 {      /* results of interpretation of freetext, Word tab 2 */
    background-color:var(--resultBgColor);
    border-style:       solid;
    border-width:       2px;
    border-color:       #aaa #ccc #ddd #bbb;
    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.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;
    color:darkred;
}

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 {
    margin-bottom:10px;
    width:100%;
}

/* styles used in full-text search */
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 */
}

/* styles used on word page 2 */
span.wp2_info {
    color:blue;
}
span.wp2_okay {
    color:green;
}
span.wp2_error {
    color:red;
}


/*#region reference interpretation errors */

.IE_none {}
.IE_info {color: darkblue; }
.IE_warn { color: darkorange }
.IE_error { color:crimson!important; }

/*#endregion*/

/*#region EXPERIMENTAL: Rotating border (not in use) */

@keyframes rotate01 {
  100% { transform: rotate(1turn);  }
}

.movingborder {
  position: relative;       /* IMPORTANT */
  z-index: 0;
/*  border-radius: 10px;*/
  overflow: hidden!important;         /* IMPORTANT */
  
  &::before {
    content: '';            /* IMPORTANT */
    position: absolute;     /* IMPORTANT */
    z-index: -2;            /* IMPORTANT -2 */
    left: -150%;           /* IMPORTANT */
    top: -150%;            /* IMPORTANT */
    width: 400%;height: 400%;/* IMPORTANT */
    background-repeat: repeat;
    background: conic-gradient( red, green, yellow, blue, red);
    animation: rotate01 7s linear infinite;
  }
  
  &::after {
    content: '';  position: absolute;
    z-index: -1;
    left: 2px;
    top: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background: white;
/*    border-radius: 9px;*/
  }
}

/*#endregion Rotating border */

/*#region EXPERIMENTAL animated gradient background */

/*#region A golden gradient background that moves from bottom to top */
.animBG01 {
    --fallColor0: hsla(45, 100%, 79%, 0.8);
    --fallColor1: hsla(70, 100%, 85%, 0.8);
    --fallColor2: hsla(55, 100%, 90%, 0.8);
    --fallColor3: hsla(45, 100%, 75%, 0.8);
    /* 4 different colors, the first 3 are repeated => 6 segments, 2 segments with 3 colors are visible at a time => 1/3 */
    background: linear-gradient(180deg, var(--fallColor0), var(--fallColor1), var(--fallColor2), var(--fallColor3), var(--fallColor0), var(--fallColor1), var(--fallColor2) );
	background-size: 100% 300%;                 /* height is 300%, so 2 segments resp. 3 colors will be displayed at a time */
	animation: gradientBU 5s linear infinite;
}
@keyframes gradientBU {
	  0% { background-position: 0% 0%;	}
	100% { background-position: 0% 100%;	}
}
/*#endregion*/

/*#region A water fall animation */
.waterfall {
    --fallColor0: hsl(220, 70%, 95%);
    --fallColor1: hsl(210, 50%, 70%);
    --fallColor2: hsl(220, 60%, 80%);
    --fallColor3: hsl(210, 80%, 75%);
    /* 4 different colors, the first 2 are repeated => 5 segments, 1 segment with 2 colors is visible at a time corresponding to 1/5 */
    background: linear-gradient(180deg, var(--fallColor0), var(--fallColor1), var(--fallColor2), var(--fallColor3), var(--fallColor0), var(--fallColor1) ); /* 2 colors, the last 2 colors must match the first 2 */

    background-size: 100% 500%;                 /* height is 500%, so 1 segment resp. 2 colors will be displayed at a time */
    animation: gradientTD 10s linear infinite;
}
@keyframes gradientTD {
    0% { background-position: 0% 100%; }
    100% { background-position: 0% 0%; }
}
/*#endregion*/


/*#region A moving endless tile animation */
.movingtile {
    background-image: url("/images/tiles/marble.jpg");
    background-repeat: repeat;
    background-size: 388px 33.33%;
    animation: gradientTD2 60s linear infinite;
}
@keyframes gradientTD2 {
    0% { background-position: 0% 0%; }
    100% { background-position: 0% 100%; }
}



/*#endregion EXPERIMENTAL animated gradient background */