.cic{--clr-cic-primary:#f69a06;--clr-cic-secondary:#db8200;position:relative;display:-ms-grid;display:grid;-ms-grid-columns:2fr 10px 4fr;grid-template-columns:2fr 4fr;-webkit-box-align:start;-ms-flex-align:start;align-items:start;gap:20px;font-family:inherit;h1{-ms-grid-column-span:2;grid-column:span 2}form{.form-segment{background-color:#ffffff;padding:0;border-radius:0;-webkit-box-shadow:0 0 10px rgba(0,0,0,0.02);box-shadow:0 0 10px rgba(0,0,0,0.02);margin-bottom:10px;&>fieldset{padding:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:10px;margin:0;border:0}h4{display:-webkit-box;display:-ms-flexbox;display:flex;gap:5px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;color:#ffffff;background-color:var(--clr-cic-secondary);padding:10px 20px;margin:0;font-size:14px;text-transform:uppercase;letter-spacing:3px;.cic-info-box{fill:#ffffff}}}input{padding:8px;font-family:inherit;border:0;outline:1px solid #cccccc;outline-offset:0;border-radius:0;&:focus{outline:3px solid var(--clr-cic-primary);outline-offset:0}&[readonly]{outline:1px solid #f9f9f9;outline-offset:0}&[readonly]:focus{outline:1px solid #000000;outline-offset:0}&[type=submit]{display:block;width:100%;text-align:center;outline:0;background-color:var(--clr-cic-primary);color:#ffffff}}select{padding:8px;font-family:inherit;border:0;outline:1px solid #cccccc;outline-offset:0;border-radius:0;&:focus{outline:3px solid var(--clr-cic-primary);outline-offset:0}}}fieldset{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:10px;padding:16px;border:1px solid #cccccc;border-radius:0;legend{color:#cccccc;font-weight:700;display:-webkit-box;display:-ms-flexbox;display:flex;gap:5px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}}label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:5px}.custom-select{&,&::picker(select){-webkit-appearance:base-select;-moz-appearance:base-select;appearance:base-select;border:0;border-radius:0;&::picker-icon{color:var(--clr-cic-primary)}}&:hover{background-color:#ffffff}&:open::picker(select){-webkit-box-shadow:0 0 10px rgba(0,0,0,0.1);box-shadow:0 0 10px rgba(0,0,0,0.1)}option{padding:0.5rem}option:hover{background-color:#efefef}option:checked{background-color:#252525;color:#ffffff;&::checkmark{}}}.flex-form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;gap:10px;&>*{-webkit-box-flex:1;-ms-flex:1;flex:1}input{max-width:100px}.plus{display:inline-block;padding-block:8px;text-align:center;color:var(--clr-cic-primary);font-weight:900}.operator{display:inline-block;padding-block:2px;text-align:center}}.add-segment{margin-bottom:20px;fieldset{padding-block:10px 20px}}.add-segment,.form-segment,.reset-form{display:none}.add-segment.active[data-visible=true],.reset-form[data-visible=true]{display:-ms-grid;display:grid}.form-segment.active,.form-segment[data-type=general]{display:block}.calc-output{container-type:inline-size;container-name:output;text-align:center;-webkit-transition:opacity 250ms ease-in,scale 250ms ease-in;transition:opacity 250ms ease-in,scale 250ms ease-in;&[data-visible=false]{opacity:0;scale:1.1}h2{margin-bottom:20px}.calc-output--info{list-style:none;padding:0;margin-inline:auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0;background-color:#ffffff;border:1px solid #cccccc;li{border-right:1px solid #cccccc;padding:10px;span{font-weight:900}}li:last-of-type{border-right:0}}}#calcOutput{position:relative;.output-diagram{display:block;width:100%}.calc-output--box{position:absolute;top:0;left:0;padding:0.5rem;font-size:18px;background-color:#ffffff;border:2px solid var(--clr-cic-primary);border-radius:0;-webkit-box-shadow:0 0 10px rgba(0,0,0,0.02);box-shadow:0 0 10px rgba(0,0,0,0.02);span{font-weight:900}}#arcOutput{top:3%;left:50%;translate:-50% 0}#segmentOutput{top:42%;left:50%;translate:-50% 0}#radiusOutput{top:68%;left:60%;translate:-50% 0}#chordOutput{top:86%;left:50%;translate:-50% 0}}.cic-info-box{display:inline-block;width:18px;fill:#cccccc;&:hover{fill:#000000}}[data-tooltip]{position:relative;cursor:pointer}[data-tooltip]:hover:after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;-webkit-transform:translateX(-50%) translateY(-10%);transform:translateX(-50%) translateY(-10%);font-size:14px;font-weight:100;line-height:125%;text-transform:none;letter-spacing:0px;background:#333;color:white;padding:5px 10px;border-radius:0;width:35ch;opacity:1;z-index:1000;-webkit-transition:opacity 250ms ease-in;transition:opacity 250ms ease-in;@starting-style{opacity:0}}.button-group{display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.calc-reset{background-color:#242424;color:#ffffff;border:0;border-radius:0;display:inline-block;padding:15px 30px;font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;-webkit-transition:background-color 250ms ease-out;transition:background-color 250ms ease-out;cursor:pointer;&:hover{background-color:#343434}}.calc-print{background-color:#ffffff;color:var(--clr-cic-secondary);border:0;border-radius:0;display:inline-block;padding:15px 30px;font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;-webkit-transition:color 250ms ease-out;transition:color 250ms ease-out;cursor:pointer;&:hover{color:var(--clr-cic-primary)}}.calc-instructions{position:absolute;-ms-grid-row-align:center;-ms-grid-column-align:flex-end;place-self:center flex-end;max-width:380px;opacity:1;pointer-events:none;-webkit-transition:opacity 250ms ease-in,translate 250ms ease-in;transition:opacity 250ms ease-in,translate 250ms ease-in;background-color:#ffffff;-webkit-box-shadow:0 0 40px rgba(0,0,0,0.1);box-shadow:0 0 40px rgba(0,0,0,0.1);padding:40px;&[data-visible=false]{opacity:0;translate:10% 0}ol{padding-left:20px;li::marker{font-weight:900;color:var(--clr-cic-primary)}}}}@container output (max-width: 720px){.cic{#calcOutput{.calc-output--box{font-size:14px;padding:0.25rem}}}}@container output (max-width: 480px){.cic{#calcOutput{.calc-output--box{font-size:12px;padding:0.25rem}}}}@media only screen and (max-width:768px){.cic{-ms-grid-columns:1fr;grid-template-columns:1fr;margin-inline:auto;width:90%;h1{-ms-grid-column-span:1;grid-column:span 1}.calc-instructions{position:relative;max-width:100%}}}@media only screen and (max-width:480px){.cic{width:100%}}