:root{
    --green: #59a06d;
    --lightgreen: rgba(89, 160, 109,0.25);
    --blue: #5282b9;
    --lightblue: rgba(82, 130, 185,0.25);
    --yellow: #f0d93e;
    --lightyellow: rgba(240, 217, 62,0.25);
    --orange: #de752c;
    --lightorange: rgba(222, 117, 44,0.25);
    --red: #a61739;
    --lightred: rgba(166, 23, 57,0.25);
    --black: #000; /*dark mode*/
    --bgblack: #000;
    --ringblack: #000; /*dark mode*/
    --borderblack: #000; /*dark mode*/
    --lightblack: rgba(0, 0, 0,0.15); /*dark mode*/
    --cosmicred: #ff0000;
    --white: white;
    --textWhite: white;

    --swatch-primary: 133,0,5;
    --swatch-primary-darkest: 108,2,12;
    --top-primary-darkest: 255,255,255,.05;

    --gradient-header: linear-gradient(to top,rgb(100,46,44)0%,rgb(12,12,12)90%,rgb(12,12,12)100%);

    --theme: light;

    --textScale: 1;

    color-scheme: var(--theme);
}

body{
    margin: 0;
    font-family: sans-serif;
    

    /*dark mode*/
    /*
    background-color: #000000;
    color: white;
    */
}

@media (prefers-color-scheme: dark) {
    body.adaptive {
        color: white;
    }
    html.adaptive {
        background-color: var(--dark-theme);
    }
  }

/*dark mode*/
.invert{
    filter: invert(100%);
}

.infoBox {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f5e7ce;
    text-align: center;
    padding: 5px;
    border: 1px solid black;
    border-radius: 10px;
}

.infoBoxClose {
    position: absolute;
    top: -9px;
    right: -9px;
    padding: 0;
    margin: 0;
    width: 18px;
    height: 18px;
    background-color: #f5e7ce;
    border-radius: 10px;
    border: 1px solid black;
    cursor: pointer;
}

#resizeInfoBox {
    left: max(715px, calc(80vw - 41px));
    top: 645px;
}

.infoBoxClose:hover {
    background-color: #a61739;
    color: white;
}

.infoBoxClose:active {
    background-color: gray;
    color: white;
}

#generator{
    margin: 5px;
}

h3,h4,p{
    margin: 0;
}

#titleAreaPattern{
    background-size: 6px 8.7px;
    background-image: linear-gradient(55deg,rgba(var(--top-primary-darkest))15%,transparent 15%,transparent 50%,rgba(var(--top-primary-darkest))50%,rgba(var(--top-primary-darkest))65%,transparent 65%,transparent 100%);
}

#tileArea{
    padding: 30px;
    max-width: 800px;
    background-repeat: repeat-x;
    margin: auto;
}

h1 {
    margin: 0;
}


header {
    color: white;
    background-image: var(--gradient-header);
}

nav{
    border-top: 2px  solid #19191b;
    border-bottom: 2px  solid #19191b;
    background-color: #424248;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    font-size: .8em;
}

nav a {
    text-decoration: none;
    color: white;
    padding: 3px 7px 3px 7px;
    transition: .2s background-color;
}

nav a:hover{
    background-color: #37373a;
}

.settingDiv {
    display: inline-grid;
}

#introTextSection {
    margin: 30px auto 20px auto;
    max-width: 700px;
    text-align: center;
}

#acsbar {
    padding: 10px;
    width: 80%;
    border: 1px solid var(--black);
    font-family: 'Inter', sans-serif;
    position: relative;
    text-wrap: nowrap !important;
}
#resizeHandle{
    position: absolute;
    width: 10px;
    height: calc(100% - 10px);
    right: -4px;
    border-right: 1px solid var(--black);
    cursor: e-resize;
}

.textdeconone{
    text-decoration: none;
}


.min715{
    min-width: 715px;
}

.min560{
    min-width: 560px;
}
.width100 {
    width: 100%;
}

.disabled{
    display: none;
}

.inblock {
    display: inline-block;
}

.flex{
    display: flex;
}

.grid{
    display: grid;
}

.fleft{
    float: left;
}

.fright{
    float: right;
}

.fw600 {
    font-weight: 600;
}

.em35{
    font-size: 3.5em;
}
.em2{
    font-size: calc(2em * var(--textScale));
}
.em25{
    font-size: 2.5em;
}
.em15{
    font-size: 1.5em;
}
.em125{
    font-size: 1.25em;
}
.em075{
    font-size: 0.75em;
}
.em1{
    font-size: calc(1em * var(--textScale));
}

/* #inputUISection h2{
    text-align: center;
}

#titleUIsectionDiv{
    display: grid;
    justify-content: center;
}

.UIsectionDivWrapper{
    display: flex;
    justify-content: center;
} */

#acsTop{
    grid-template-columns: max-content auto max-content;
}

#acsLevelBars{
    flex-direction: column;
    justify-content: center;
}
.acsLevelBar{
    height: 8px;
    width: calc(100% - 10px);
    margin: 5px;
}


#acsMiddle {
    height: 8px;
    margin-bottom: 5px;
    background-color: var(--borderblack);
}


#acsBottom{
    grid-template-columns: auto max-content;
    gap: 5px;
}
#acsObjDisRisk{
    gap: 5px;
}
#acsObject{
    border-left: 16px solid;
    background-color: var(--lightblack);
    padding: 10px 10px 10px 15px;
    display: grid;
    grid-template-columns: auto max-content;
    z-index: -2;
}
#acsObjectImageCont{
    justify-self: center;
    align-self: center;
}
#acsDiamondImg{
    width: 115px;
    z-index: 1;
}
#acsObjectTextCont{
    height: 100%;
    flex-direction: column;
    justify-content: center;
}
.acsImageCont{
    float: right;
}
.acsImageWrapper{
    border: 5px solid var(--ringblack);
}
.fullcircle{
    border-radius: 50%;
}
.ringblack{
    background-color: var(--ringblack);
}
.acsImg{
    height: 100%;
    aspect-ratio: 1 / 1;
}
.pasteWrapper{
}
.pasteDelete{
}
.paste{
    position: relative;
    max-width: 50px;
    max-height: 20px;
    min-width: 10px;
    overflow: hidden;
}
.paste > .pastePlaceholder {
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
}
.paste > .pasteZone {
    cursor: pointer;
    border: 1px solid lightgray;
    width: calc(100% -2px);
    height: calc(100% -2px);
}
.paste > .pasteZone:hover{
    border: 1px solid blue;
    border-radius: 3px;
}
.paste img{
    max-height: 20px;
}
.acsImageBGWrapper{
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    position: relative;
}
.acsSecondImgWrapper{
    position: absolute;
    height: calc(100% - 9.1px);
    width: calc(100% - 5px);
    top: 0;
    left: -50%;
    border-top: 5px solid var(--ringblack);
    border-left: 5px solid var(--ringblack);
    border-bottom: 5px solid var(--ringblack);

    overflow: hidden;
}

.leftBorderRadius{
    border-bottom-left-radius: 50%;
    border-top-left-radius: 50%;
}
#acsSecondaryObjectImageWrapper{
    z-index: -1;
}
.acsSecondImgBG{
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}
.acsSecondImg{
    position: absolute;
}
#acsSecondaryObjectImg{
    width: 100%;
    left: 3px;
}
#acsObjectImageWrapper{
    width: 85px;
    height: 85px;
}
.borderright{
    border-right: 8px solid var(--borderblack);
}
#acsDisRisk{
    gap: 5px;
}
.acsDisRisks{
    padding: 0 10px 0 10px;
    border-left: 7px solid;
}
.acsDisRisksTextCont{
    display: flex;
    align-items: center;
    height: 100%;
}
#acsDis{
    border-color: var(--black);
    background-color: var(--lightblack);
}
.acsDisRiskImageWrapper{
    width: 45px;
    height: 45px;
}
.acsSecondImgText{
    margin-left: 50%;
    color: var(--textWhite);
}
#acsDisImageWrapper{background-color: green;}

#acsRisk{
    border-color: var(--black);
    background-color: var(--lightblack);
}

#acsDiamond{
    display: flex;
    position: relative;
}

#acsDiamondImg{
    height: 100%;
}

.quadrents{
    position: absolute;
    width: 96%;
    height: 96%;
    top: 0;
    left: 0;
}

.quad{
    width: 67.5%;
    padding-bottom: 50%;
    position: absolute;
    top: 2.25%;
    left: 18.5%;
    clip-path: polygon(22% 0, 77% 0, 100% 31%, 50% 100%, 0 31%);
    transform-origin: bottom center;
    display: flex;
    align-items: center;

}

#top-quad{
}

#right-quad{
    transform: rotate(90deg);
}

#bottom-quad{
    transform: rotate(180deg);
}

#left-quad{
    transform: rotate(270deg);
}

.acsSmallImageCont{
    position: absolute;
    width: 33%;
    z-index: 2;
}

.acsSmallImageBGWrapper{
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
}

.acsSmallImageWrapper{
    display: flex;
}

.thinborder{
    border: 0.1875rem solid var(--ringblack);
}

.thickborder{
    border: 6px solid var(--ringblack);
}



.acsSmallImg{
    width: 100%;
    aspect-ratio: 1 / 1;
}

#acsSmallObjectImageCont{
    left: 33.5%;
    top: 4.5%;
}

#acsSmallRiskImageCont{
    left: 62.5%;
    top: 33.5%;
}

#acsSmallDisImageCont{
    left: 4.5%;
    top: 33.5%;
}

#acsSmallObjectSecondaryImageCont{
    top: 62.5%;
    left: 33.5%;
}

#acsSmallObjectSecondaryImageWrapper{
    background-color: white;
}

#acsBigObjectImageCont{
    width: 82.6%;
    top: 8.7%;
    left :8.7%;
}

/* Dark theme switch*/

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #444;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 5px black;
  }

  input:checked:focus + .slider {
    box-shadow: 0 0 5px white;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(14px);
    -ms-transform: translateX(14px);
    transform: translateX(14px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 18px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

/* Generation buttons */

.generateBtn {
    padding: 5px 10px 5px 10px;
    margin: 5px 10px 0 10px;
    width: 130px;
}

.codeBlock{
    padding: 5px 10px 5px 10px;
    margin: 5px 10px 5px 10px;
    max-width: 500px;
    background-color: rgb(230, 230, 230);
    border-radius: 5px;
    border: 1px solid rgb(182, 182, 182);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    color: #000000;
}

.codeBlock p {
    word-wrap: break-word; /* For older browsers */
    overflow-wrap: break-word; /* Modern standard */
}

/*Change log*/

.y-scroll{
    overflow-y: scroll;
}

#changelogSectionContent{
    height: 300px;
}

/* Notice Box */

.noticeBox{
    margin: auto;
    display: grid;
    grid-template-columns: auto;
    font-family: 'Inter', sans-serif;
    border: 1px solid #bababb;
}

#bugNotice{
    max-width: 250px;
    grid-template-columns: Auto;
}

.nb {
    width: 100%;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.nbTop{
    font-size: 1.5em;
    font-weight: 600;
    color: rgb(252,252,252);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    padding: 0.5em 1.25rem;
    background-size: 3rem 4.35rem;
    background-color: rgb(var(--swatch-primary));
    background-image: linear-gradient(125deg,rgba(var(--swatch-primary-darkest),.75)25%,transparent 25%,transparent 50%,rgba(var(--swatch-primary-darkest),.75)50%,rgba(var(--swatch-primary-darkest),.75)75%,transparent 75%,transparent 100%);
}

.nbContent{
    padding: 1em 0.5em;
    text-align: center;
}

.hidden {
    display: none;
}

/* OTHER */

.comment {
    font-size: 0.8em;
}

.warning {
    color: red;
}

.circleMask{
    clip-path: circle(50% at center);
}