@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap');

body, th, td  {
    font-family: "Open Sans", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN",  "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* body {
    margin: 0px;
} */

th {
    font-weight: bold; /* no effect*/
}

h1  {
    font-family: "Cormorant Garamond", Garamond, Georgia, "Yu Mincho", "YuMincho",  "Hiragino Mincho ProN", "MS PMincho", serif;
    font-weight: normal;
}

#h1-yin-and-yang, #h1-clouds, #h1-changes {
    font-size: 50px;
}

#h1-title {
    color:transparent;
    font-weight: 300;
    text-align: center;
    margin: 30px;
    height:420px;
    background-image: url('two circles cinzel2.png');
    background-position: center ;
    background-size: 60%;
    background-repeat: no-repeat;
}

.tab--selected.jsx-3468109796, .tab.jsx-3468109796:last-of-type.tab--selected {
    border-top: 2px solid #1f78b4 !important;
}

#div-lang{
    position:absolute;
    top: 15px;
    right:136px;
    width:100px;
    height:25px;
    z-index: 500;
    text-align: right;
}

#lang-dropdown {
    position:absolute;
    top:10px;
    right:10px;
    /* margin-top:5px;
    margin-right:5px; */
    width:120px;
    z-index: 500;
}


#open-offcanvas-scrollable, #btn-xlsx-exp, #btn-xlsx-imp, #btn-show-yinyang, #btn-show-before-after {
    position:fixed;
    top:10px;
    left:200px;
    z-index: 500;
    display: inline-block;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.3);
}

#btn-show-yinyang {
    left:200px;
    background-color: #D5EEFF;
}

#btn-show-before-after {
    left:349px;
    background-color: white;
}

#btn-xlsx-exp {
    left:526px;
}

#btn-xlsx-imp {
    left:610px;
}

/* #btn-show-yinyang, #btn-show-before-after {
    font-size:50px !important;
    padding: 20px !important;
    height:80px;
    font-weight: 100;
} */

/* ========== table =============================================== */

#tab-1, #tab-2, #tab-3 {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

#tab-1-child, #tab-3-child {
    padding: 3%;
}

#div-content {
    padding: 3%;
}

#btn-clear-yinyang{
    margin-top: 20px;
}

#btn-reset-yinyang{
    margin-top: 20px;
    left:1px;
}

#h1-yin-and-yang{
    margin-top: 40px;
}

.dash-tooltip {
    font-size: 13px;
}

button {
    appearance: button;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    color: #1f78b4;
    border-color: #1f78b4;
    background-color: white;
    font-family: 'Open Sans', Sans-Serif;
    font-weight: 600;
    transition: all 0.2s ease;
    padding: 5.5px 22px 2.2px 22px;
    height: 38px;
    letter-spacing: 1.6px;
    cursor: pointer;
}

button:hover {
    background-color: rgb(240,240,240) !important;
}

button:active {
    background-color: rgb(220,220,220);
    box-shadow: 0px -3px 5px 0px rgb(0, 0, 0, 0.1);
    transform: translate(0px,2px);
}

span.rc-slider-mark-text {
    font-size: 14px;
}

#fontsize-slider-container, #table-height-slider-container {
    margin-top: 50px;
    margin-bottom: 70px;
}


.dash-table-container .dash-spreadsheet-container 
.dash-spreadsheet-inner input:not([type="radio"]):not([type="checkbox"])
{
    text-align: left !important;
}



#table-yinyang div.cell.cell-0-1.dash-fixed-row, 
#table-yinyang div.cell.cell-1-1.dash-fixed-content {
    width:94% !important;
}
/* otherwise, the width keeps changing accordng to font size */


div#table-yinyang.dash-table-container .dash-header.column-0,
div#table-yinyang.dash-table-container .dash-cell.column-0 {
    width: 45% !important;
}
/* required */


div#table-yinyang.dash-table-container .dash-header.column-1,
div#table-yinyang.dash-table-container .dash-cell.column-1,
div#table-yinyang.dash-table-container .dash-header.column-2,
div#table-yinyang.dash-table-container .dash-cell.column-2
{
    width: 100px !important;
}
/* required */

/* for style3 only */
div#table-yinyang-container.style3-mode div#table-yinyang.dash-table-container .dash-header.column-1,
div#table-yinyang-container.style3-mode div#table-yinyang.dash-table-container .dash-cell.column-1 {
    width: 22.5% !important;
}
div#table-yinyang-container.style3-mode div#table-yinyang.dash-table-container .dash-header.column-0,
div#table-yinyang-container.style3-mode div#table-yinyang.dash-table-container .dash-cell.column-0 {
    width: 22.5% !important;
}


#textarea1{
    width:100%;
    height:300px;
}

#md-yinyang-table, #md-note-textarea, #md-yinyang-table-after {
    margin: 3% 38.2% 3% 0%;
    max-width:800px;
    border-radius: 25px;
    border: 1px solid rgb(211,211,211);
    padding: 15px 25px 15px 25px;
}

/* ========== phrase clouds =============================================== */

/* 
https://github.com/plotly/plotly.js/blob/master/src/components/fx/hover.js#L1083
https://github.com/plotly/plotly.js/blob/master/src/components/fx/hover.js#L1240 

.hoverlayer .hovertexrt (subelements are unknown)
*/
.hoverlayer .hovertext {
    display: none; /*This works for hiding default tooltip on the graphs*/
}


#h1-yin, #h1-yang {
    text-align:center;
    padding-top:30px;
}

#clouds-container{
    padding: '3%';
    min-height: 550px;
}

#div-yin, #div-yang {
    width: 49%;
    display : inline-block;
}

#div-fill{
    margin-top: 15px;
    margin-left:30px;
    width:30px;
    height:25px;
    float: left;

    /* position:relative;
    display: inline-block; */
}

#fill-dropdown {
    margin-top:10px;
    margin-left:40px;
    width:120px;
    float: left;
}

#font-dropdown {
    margin-top:10px;
    margin-left:40px;
    width:300px;
    float: left;
}

#btn-capture {
    margin-top:10px;
    margin-left:30px;
    float: left;
}

/* ========== changes =============================================== */


/* #table-yinyang-after div.cell.cell-0-1.dash-fixed-row, 
#table-yinyang-after div.cell.cell-1-1.dash-fixed-content {
    width:100% !important;
} */

/* div#table-yinyang-after.dash-table-container .dash-header.column-0,
div#table-yinyang-after.dash-table-container .dash-cell.column-0 {
    width: 50% !important;
} */
/* required */

/* div#table-yinyang-after.dash-table-container .dash-header.column-1,
div#table-yinyang-after.dash-table-container .dash-cell.column-1,
div#table-yinyang-after.dash-table-container .dash-header.column-2,
div#table-yinyang-after.dash-table-container .dash-cell.column-2,
div#table-yinyang-after.dash-table-container .dash-header.column-3,
div#table-yinyang-after.dash-table-container .dash-cell.column-3,
div#table-yinyang-after.dash-table-container .dash-header.column-4,
div#table-yinyang-after.dash-table-container .dash-cell.column-4,
div#table-yinyang-after.dash-table-container .dash-header.column-5,
div#table-yinyang-after.dash-table-container .dash-cell.column-5,
div#table-yinyang-after.dash-table-container .dash-header.column-6,
div#table-yinyang-after.dash-table-container .dash-cell.column-6
{
    width: 80px !important;
} */
/* required */

#graph-change {
    height:660px;
}

#div-toggle-yin-yang {
    padding-top: 5px;
}

#div-add-rem-col {
    text-align: right;
    padding-bottom: 5px;
}

/* ========== Footer =============================================== */


#myname {
    padding-top:70px;
    padding-right: 30px;
    padding-left:30px;
    padding-bottom: 30px;
    font-size: 30px;
    font-family: "Cormorant Garamond", Garamond, Georgia, "Yu Mincho", "YuMincho",  "Hiragino Mincho ProN", "MS PMincho", serif;
}

#mycontact {
    padding-right: 30px;
    padding-left:30px;
    font-size: 14px;
    /* font-family: Merriweather, Garamond, Georgia, "Yu Mincho", "YuMincho",  "Hiragino Mincho ProN", "MS PMincho", serif; */
}

#copyright, #copyright2 {
    padding-top:60px;
    padding-right: 30px;
    padding-left:30px;
    padding-bottom:30px;
    font-family: "Cormorant Garamond",Garamond, Georgia, "Yu Mincho", "YuMincho",  "Hiragino Mincho ProN", "MS PMincho", serif;
} 



#mycontact h2 {
    font-weight: normal;
    padding-bottom: 0px;
    font-family: "Cormorant Garamond", Garamond, Georgia, "Yu Mincho", "YuMincho",  "Hiragino Mincho ProN", "MS PMincho", serif;

}

#mycontact h3 {
    font-weight: normal;
    padding-bottom: 30px;
    font-family: "Cormorant Garamond", Garamond, Georgia, "Yu Mincho", "YuMincho",  "Hiragino Mincho ProN", "MS PMincho", serif;

}

/* ======= Bootstrap offcanvas Custom ================================================================================ */

#offcanvas-scrollable {
    background: rgba(230, 245, 254, 1);
    background: linear-gradient(85deg, rgba(230, 245, 254, 1) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 60%, rgba(252, 238, 232, 1) 100%);
} 
/* 
lightness 95% 
https://cssgradient.io/
*/

#mkd-offcanvas {
    max-width: 600px; 
    padding: 30px;
    margin-right: auto;
    margin-left: auto;
    line-height: 1.5em;
    font-size:14px;
    /* background-attachment: fixed; */
}

#mkd-offcanvas li{
    padding-bottom: 10px;;
}


/* ========== from DBC =============================================== */

.offcanvas-backdrop.show {
    opacity: .5;
}

.offcanvas-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    /* background-color: #000; */
}

/* modified */
#open-offcanvas-scrollable{
    position:fixed;
    top:10px;
    left:10px;
    z-index: 500;
}

.fade {
    transition: opacity .15s linear;
}

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

/* #offcanvas-scrollable {
} */

.offcanvas.show {
    -webkit-transform: none;
    transform: none;
}

.offcanvas-start {
    top: 0;
    left: 0;
    width: 400px;
    border-right: 1px solid rgba(0,0,0,.2);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.offcanvas {
    position: fixed;
    bottom: 0;
    z-index: 1045;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 100%;
    visibility: hidden;
    background-color: #fff;
    background-clip: padding-box;
    outline: 0;
    transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out,-webkit-transform .3s ease-in-out;
}


.offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
}

.offcanvas-title {
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 2.5em;
    font-family: "Cormorant Garamond", Garamond, Georgia, "Yu Mincho", "YuMincho",  "Hiragino Mincho ProN", "MS PMincho", serif;
    font-weight: normal;
}

.offcanvas-body {
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 1rem 1rem;
    overflow-y: auto;
}

.offcanvas-body ol {
    margin-left:-2em;
}

.offcanvas-body ol li ul li {
    margin-left:-2em;
    list-style-type: disc;
}

.offcanvas-header .btn-close {
    padding: .5rem .5rem;
    margin-top: -.5rem;
    margin-right: -.5rem;
    margin-bottom: -.5rem;
}

[type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}

.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: .25rem;
    opacity: .5;
}

[type="button"], [type="reset"], [type="submit"], button {
    -webkit-appearance: button;
}

button, select {
    text-transform: none;
}