/*****************COLOR_THEME*************/
    .theme-dark {

      --digit-background: #5098f4;
      --operator-background: #f47c20;
      --punctuation-background: #575767;
      --multi-function-background: #106A7E;
      --enter-button-background: #0d6;
      --utl-background: #d81b21;
      --matrix-buttons-background: #575767;
      --util-background: #575767;
      --pnc-btn-background: #575767;
      --pre-function-background: #da5867;
      --button-background: #4b96a8;
      --op-btn-border: #f47c20;
      --states-button-background: rgb(58 108 150);
      --states-button-hover: rgb(56 99 135);
      --states-button-border: rgb(58 108 150);
      --prob-button-background: cadetblue;
      --prob-button-border: cadetblue;
      --multi-function-border-hover: #115a6a;
      --func-button-hover: #488b9b;
       --prob-button-hover: #529497;
      --multi-func-button-hover: #115a6a;
      --digit-button-hover: #4486db;
      --op-button-hover: #df7320;
      --op-btn-border-hover: #df7320;
      /* --pre-function-hover: #488b9b; */
      --pre-function-hover: #bd4b58;
      --light-border: #4b96a8;
      --func-button-hover-border: #488b9b;
      --multi-function-hover: #115a6a;
      /* --pre-func-light-border: #4b96a8; */
      --pre-func-light-border: #da5867;
      /* --pre-function-border-hover: #488b9b; */
      --pre-function-border-hover: #bd4b58;
      --multi-function-border: #106a7e;
      --color-background: #18191a;
      --color-secondary: #3a3b3c;
      --color-accent: #12cdea;
      --font-color: #e9ecef;
      --color-brand: #ffffff;
      --toggle-btn-color: #ffffff;
      --colorswitchd: rgb(116 116 116);
      --colorswitchl: #ffffff;
      --matrix-function-btn-background: cadetblue;
      --matrix-function-btn-hover: #529497;
      // --font-dark:normal;
      --slider-color: #ffffff;
      //   --font-color: #dee2e6;
      // --font-light:bold;
      --navbartoggler-color: #e9ecef;
      --dspl-bg: #3a3b3c;
      --dspl-border-color: #6b8eba;
      --dspl-left-right-border: rgb(180, 180, 180);
      --function-button-size: 16px;
      --digit-btn-size: 21px;
      --operator-button-size: 21px;
      --nav-tabs-link-active-border-color: #dee2e6 #dee2e6 #fff;
         --nav-tabs-link-bottom-border-color: #dee2e6;
      --constant-results-bg:#3a3b3c;
      --constant-input-field-bg:#dee2e6;
      --setting-help-model-bg:#dee2e6;
      --vars-button-xyz: #2e89ae;

  }

  .theme-light {
      /* --button-background: #da5867; */
      --digit-background: #5098f4;
      --operator-background: #f47c20;
      --punctuation-background: #575767;
      --light-border: #4b96a8;
      --multi-function-background: #106A7E;
      --multi-function-border: #106A7E;
      --utl-background: #d81b21;
      --util-background: #575767;
      --matrix-buttons-background: #575767;
      --pnc-btn-background: #575767;
      --states-button-background: rgb(58 108 150);
      --states-button-hover: rgb(56 99 135);
      --states-button-border: rgb(58 108 150);
      --prob-button-background: cadetblue;
      --prob-button-hover: #529497;
      --prob-button-border: cadetblue;
      --multi-func-button-hover: #18b1d5;
      --pre-func-light-border: #da5867;
      --pre-function-background: #da5867;
      --button-background: #4b96a8;
      --multi-function-border-hover: #115a6a;
      --multi-function-hover: #115a6a;
      --op-btn-border: #f47c20;
      --op-btn-border-hover: #df7320;
      --matrix-function-btn-background: cadetblue;
      --matrix-function-btn-hover: #529497;
      --enter-button-background: #0d6;
      --pre-function-hover: #bd4b58;
      --pre-function-border-hover: #bd4b58;
      --color-background: #ffffff;
      --func-button-hover: #488b9b;
      --op-button-hover: #df7320;
      --digit-button-hover: #4486db;
      --pnc-button-hover: #4d4d56;
      --select-font: #6c757d;
      --color-secondary: #dee2e6;
      --color-accent: #fd6f53;
      --func-button-hover-border: #488b9b;
      --font-color: #000000;
      --slider-color: #000000;
      --color-brand: #000000;
      --toggle-btn-color: #000000;
      --colorswitchd: #000000;
      --colorswitchl: rgb(116 116 116 / 51%);
      // --font-dark:bold;
      // --font-light:normal;
      --navbartoggler-color: #000000;
      --dspl-bg: #ffffff;
      --dspl-border-color: rgb(196, 222, 255);
      --dspl-left-right-border: #000;
      --function-button-size: 16px;
      --digit-btn-size: 21px;
      --operator-button-size: 21px;
      --nav-tabs-link-active-border-color: #b7bcc1 #b7bcc1 #fff;
       --nav-tabs-link-bottom-border-color: #b7bcc1;
       --constant-results-bg: rgb(222, 226, 230);
       --constant-input-field-bg:#fff;
       --setting-help-model-bg:#fefefe;
        --vars-button-xyz: #2e89ae;
      
  }

  .theme-grey {
      --button-background: rgb(115, 115, 115);
      --pre-function-background: rgb(115, 115, 115);
      --pnc-btn-background: rgb(115, 115, 115);
      --operator-background: rgb(115, 115, 115);
      --utl-background: rgb(115, 115, 115);
      --util-background: #000;
      --matrix-function-btn-background: rgb(115, 115, 115);
      --matrix-function-btn-hover: rgb(102 100 100);
      --func-button-hover-border: rgb(50, 48, 48);
      --digit-background: rgb(68, 68, 69);
      --multi-function-background: rgb(115, 115, 115);
      --states-button-background: rgb(115, 115, 115);
      --states-button-border: rgb(50, 48, 48);
      --states-button-hover: rgb(102 100 100);
      --prob-button-background: rgb(115, 115, 115);
      --prob-button-hover: rgb(102, 100, 100);
      --prob-button-border: rgb(50, 48, 48);
      --matrix-buttons-background: rgb(115, 115, 115);
      --pre-function-border-hover: rgb(50, 48, 48);
      --pre-function-hover: rgb(102, 100, 100);
      --border-width: initial;
      --op-btn-border-hover: rgb(50, 48, 48);
      --light-border: rgb(50, 48, 48);
      --pre-func-light-border: rgb(50, 48, 48);
      --op-btn-border: rgb(50, 48, 48);
      --multi-function-border: rgb(50, 48, 48);
      --multi-function-border-hover: rgb(50, 48, 48);
      --enter-button-background: rgb(115, 115, 115);
      --func-button-hover: rgb(102, 100, 100);
      --multi-function-hover: rgb(102, 100, 100);
      --multi-func-button-hover: rgb(102, 100, 100);
      --op-button-hover: rgb(102, 100, 100);
      --digit-button-hover: rgb(48 48 50);
      --pnc-button-hover: rgb(115, 115, 115);
       --vars-button-xyz:  rgb(115, 115, 115);
  }

  .theme-grey-dark-border {
      --light-border: rgb(180, 180, 180);
      --pre-func-light-border: rgb(180, 180, 180);
      --op-btn-border: rgb(180, 180, 180);
      --pre-function-border-hover: rgb(180, 180, 180);
      --multi-function-border-hover: rgb(180, 180, 180);
      --states-button-border: rgb(180 180 180);
      --prob-button-border: rgb(180 180 180);
      --op-btn-border-hover: rgb(180, 180, 180);
      --multi-function-border: rgb(180, 180, 180);
      --multi-func-button-hover: rgb(102, 100, 100);
      --func-button-hover-border: rgb(180, 180, 180);
  }

/*****************COLOR_THEME_ENDS*************/



/******************************_BODY_******************************************/
body {
    margin: 0;
    padding: 0 0 0;
    font-weight: 400;
    background: var(--color-background);
}

/****************************Navbar********************************************/
.navbar {
    background-color: var(--color-secondary) !important;
    border-color: 0.01em solid var(--color-background) !important;
    font-size: 1.122em;
    color: var(--color-nav) !important;
    padding-left: 3.2em;
    padding-right: 3.2em;
}

.nav-btn {
    color: #969592;
    border: none;
}

.nav-btn:hover {
    background-color: #4d4d56
}

.navbar-toggler-icon img {
    width: 22px;
}

.theme-dark .navbar-toggler-icon img {
    filter: invert(90%) sepia(7%) saturate(133%) hue-rotate(314deg) brightness(83%) contrast(83%);
}

.navbar-brand {
    color: var(--color-brand) !important;
    padding-left: 0em;
    font-size: 1.3em;
}

.navbar-collapse {
    align-items: center;
}

.nav-brand {
    margin: 10px 4px 0px 40px;
    background-color: transparent;
    color: white;
    border: none;
    color: var(--color-brand);
}

.navbar-nav .dropdown-menu {
    float: none;
}

.navbar-nav .nav-link {
    padding: none;
    padding: 0.5rem 1rem !important;
}

.navbar-nav .nav-link:hover {
    color: var(--color-background) !important;
}

a {
    color: var(--font-color) !important;
    padding-left: 1em;
    padding-top: 0.55rem;
    display: block;
}

.card-body {
    background-color: var(--color-background) !important;
    padding: 0;
}

.card-body a[href="/calculate/download"] {
    padding-bottom: 0.5em;
}

.collapse.navbar-collapse {
    justify-content: end;
}

.fa-bars:before {
    color: var(--color-brand) !important;
}

.fa-print:before {
    position: relative;
    top: 3.5px;
}

.dropdown-item:hover {
    background: var(--color-background);
    transform: scale(1);
    z-index: +1;
}

ul .navbar-nav {
    color: var(--font-color);
}

.navbar-nav {
    list-style: none;
}

.navbar-nav .dropdown-menu {
    position: relative;
    background: var(--color-secondary);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-top: transparent;
    padding: none;
}

.theme-switch-wrapper {
    transition: transform 0.5s ease;
    display: flex;
    align-items: center;
}

.theme-dark .form-control {
    background-color: var(--color-secondary);
    border: 1px solid gray;
}

.theme-dark textarea {
    background-color: var(--color-secondary);
    border: 1px solid gray;
}

.theme-switch {
    display: inline-block;
    height: 25px;
    position: relative;
    width: 45px;
    cursor: pointer;
}

#light-mode-text {
    color: var(--colorswitchl);
    padding: 8px 16px;
    transition: all 0.2s ease-in 0s;
    font-weight: var(--font-light) !important;
}

#dark-mode-text {
    padding: 8px 16px;
    color: var(--colorswitchd);
    transition: all 0.2s ease-in 0s;
    font-weight: var(--font-dark) !important;
}

#light-mode-text:hover {
    color: white;
    cursor: pointer;
}

#dark-mode-text:hover {
    color: black;
    cursor: pointer;
}

.theme-switch input {
    display: none;
}

.slider {
    background: var(--color-background);
    position: absolute;
    cursor: pointer;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
}

.slider:before {
    background-color: var(--slider-color) !important;
    position: absolute;
    content: "";
    height: 20px;
    left: 2px;
    bottom: 3px;
    transition: 0.4s;
    width: 20px;
}

input:checked+.slider:before {
    transform: translateX(18px);
}

.theme-switch-wrapper #light-mode-text:focus input:checked+.slider:before {
    transform: translateX(0px);
    background: red;
}

.slider.round {
    border-radius: 34px;
    border-color: #000000;
}

.slider.round:before {
    border-radius: 50%;
    border-color: #ffffff;
}

#regmark {
    font-size: 90%;
    vertical-align: top;
}

#button {
    padding: 0 !important;
}

.navbar-toggler-icon {
    width: 1em !important;
    height: 1.15em !important;
    background-image: none;
}

.theme-light .navbar-toggler-icon {
    color: gray;

}

.navbar-toggler {
    border: none;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/*********************************INPUT_FIELDS*********************************/

.dspl {
    border: solid var(--dspl-left-right-border);
    border-radius: 235px;
    padding: 0.5em;
    padding-top: 0.5em;
    padding-right: 0.5em;
    margin-bottom: 0.2rem;
    border-block-color: var(--dspl-border-color);
    padding-right: 1.5em;
    padding-top: 0.3em;
    overflow: hidden;
    background-color: var(--dspl-bg);
}

.theme-dark .mbdid span {
    color: black;
}

.mq-editable-field .mq-cursor {
    border-color: var(--color-font);
}

.cdc-dspl-btn:hover {
    background-color: #4d4d56;
}

   .cdc-dspl-embed-btn:hover .cdc-dspl-embed-img {
            content: url('box_arrow_in_leftblackarrow.png'); /* Replace with the hover image URL */
        }

.cdc-dspl-btn:focus {
    background-color: #4d4d56;
    color: white;
}

.mq-nthroot mq-non-leaf {
    font-size: 65%;
}

.dspl span {
    color: var(--color-brand);
}

.mq-editable-field.mq-focused {
    border: none;
}

.theme-dark #exp1 {
    color: var(--font-color);
    border-radius: 0.7rem;
}

.theme-light #exp1 {
    border-radius: 0.7rem;
}

#exp1 {
    overflow: hidden;
}

.mq-editable-field,
.mq-math-mode .mq-editable-field {
    border: none;
}

// .mq-math-mode * {
//   vertical-align: middle;
// }
#radio5lbl {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border: none;
    height: 2em !important;
    margin-top: .4em !important;

}

#radio5lbl:hover {
    color: black;
    background: #a0a0a0;
    border: none;
}

#radio6lbl {
    border-radius: 0;
    border: none;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    height: 2em !important;
    margin-top: .4em !important;
}

#radio6lbl:hover {
    color: black;
    background: #d0d0d0;
    border: none;
    border-left: 1px solid black;
    border-right: 1px solid black;
}

#radio7lbl {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border: none;
    height: 2em !important;
    margin-top: .4em !important;
}

#radio7lbl:hover {
    color: black;
    background: #a0a0a0;
    border: none;
}

input[type="radio"]:checked+label {
    background-image: none;
    background-color: #d0d0d0;
}

.mq-math-mode .mq-denominator {
    margin-top: 0.6px;
}

/************************************CALC_NAV**********************************/
.nav-tabs{
    border-color: var(--nav-tabs-link-bottom-border-color);
}
.theme-dark .nav-tabs .nav-link {
    color: var(--font-color);
    background: border-box;
}

.nav-tabs .nav-link.active{
    border-color: var(--nav-tabs-link-active-border-color);
    
}
.theme-light .nav-tabs .nav-link {
    color: var(--font-color);
}

.dropdown-menu.show {
    background-color: var(--color-secondary);
    color: var(--font-color);
    // z-index: +1;
}

text-right col-sm-2 control-label {
    background-color: var(--color-secondary);
    color: var(--font-color);
}

.theme-dark .accordion {
    background-color: #333;
}

.theme-light .accordion {
    background-color: var(--color-secondary);
}

.theme-dark .modal-content label {
    color: var(--font-color);
}

.theme-dark .nav-tabs .nav-link.active {
    background: var(--color-background);
    border-bottom-color: var(--color-background);
}

#show-error {
    border: none;
    background: none;
}

/*****************************BUTTONS******************************************/
.util {
    background-color:#575767;
    width: 36px;
    height: 26px;
    border-radius: 10px;
    border: none;
    color: white;
    vertical-align: middle;
    margin-right: -1px;
    margin-left: -1px;
    display: inline-block;
}

.util img{
  width: 22px;
}
.btn:hover {
    color: black;
}

.btn-div {
    float: left;
    width: 3em;
}

.pnc-div {
    width: 1.5em;
}


.keypad {
    z-index: 2;
    width: 9em;
    float: left;
}

#result {
    padding: 0.66em;
}

#result1 img {
    padding-top: 4.6px;
    padding-left: 3px;
}

.setting-tab {
    margin-top: 3px;
}

#undo:hover {
    color: black;
    background-color: #4d4d56;
}

#redo:hover {
    color: black;
    background-color: #4d4d56;
}

#settings:hover {
    background-color: #4d4d56;
}


#print img {
    width: 22px;
    filter: invert(100%) sepia(0%) saturate(6781%) hue-rotate(147deg) brightness(102%) contrast(111%);
}

#print img:hover {

    width: 22px;
    filter: invert(0%) sepia(90%) saturate(7460%) hue-rotate(347deg) brightness(105%) contrast(111%);
}

/******************************PRINT-DIALOGUE-BOX*********************/
.print-dialog {
    display: none;
    position: fixed;
    top: 0;
    background-color: rgb(255 255 255);
    width: auto;
    margin: 0.5rem;
    pointer-events: none;
}

.print-header {
    padding: 1rem 1rem;
    border-bottom: 1px solid #DEE2E6;
}

.print-content {
    position: relative;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    pointer-events: auto;
    border-radius: 0.3rem;
    box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
}

.print-header h4 {
    font-weight: bold;
    font-size: 1.5rem;
}

.print-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}

.print-body form {
    display: block;
    margin-top: 0em;
}

.print-group {
    margin-bottom: 1rem;
}

.print-input {
    height: 28px;
    width: -webkit-fill-available;
    outline: none;
      color: #575767;
    // color: var(--font-color);
    white-space: nowwrap;
    margin: 0 0.13em;
    border-radius: 0.7rem;
    border: 0.7px solid lightgrey;
}

.printClose,
printButton {
    color: #212529;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1.5rem;
    line-height: 1.5;
    border-radius: 0.25rem;
}

.printButton {
    color: #fff;
    background-color: #0069D9;
    border-color: #0062CC;
}

.print-footer {
    border-top: 1px solid #DEE2E6;
    border-bottom-left-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
}

.printClose {
    float: right
}


@media (min-width: 768px) {
    .print-dialog {
        width: 600px;
        margin: 30px auto;
    }
}

@media (min-width: 576px) {
    .print-dialog {
        max-width: 500px;
        margin: 1.75rem auto;
    }
}

#settings img {
    width: 18px;
    display: block;
    margin: 0 auto;
    text-align: center;
    filter: invert(100%) sepia(0%) saturate(6781%) hue-rotate(147deg) brightness(102%) contrast(111%);
    
}

#settings img:hover {
    filter: invert(0%) sepia(90%) saturate(7460%) hue-rotate(347deg) brightness(105%) contrast(111%);
}

#print:hover {
    background-color: #4d4d56;
}

#spf1-tab-pane {
    width: 18em;
    float: left;
}

#spf2-tab-pane {
    width: 18em;
    float: left;
}

/**********************************THE_MODAL***********************************/
.modal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

/* Modal Content/Box */
.setting-content {
    background-color: #fefefe;
    margin: 5% auto;
    border: 1px solid #888;
    width: 23%;
    color: black;
    display: block;
    text-align: left;
    border-radius: 21px;
    overflow: hidden;
}

.setting-content input[type="radio"] {
    border: 1px solid red;
}

.arithmiticDisplay label {
    width: 4em;
}

.arithmiticDisplay {
    margin-bottom: 25px;
}

.trigonometryDisplay label {
    width: 4em;
}

.matrixDisplay label {
    width: 4em;
}

.buttonDisplay label {
    width: 7em;
}

.sizeDisplay label {
    width: 7em;
}

.sizeDisplay {
    margin-bottom: 25px;
}

.setting-content input[type="radio"]+label {
    padding: 5px;
    margin: 0px;
    margin-top: 0px;
    background: none;
    border-radius: 22px;
    margin-top: 2px;
    font-size: 12px;
    text-align: center;
}

.setting-content input[type="radio"]:checked+label {
    background-image: none;
    background-color: teal;
    color: whitesmoke;
}

.modal-heading h2 {
    font-size: 20px;
    padding: 20px;
    color: white;
    background: teal;
}

.setting-form h3 {
    font-size: 15px;
}

.setting-form p {
    font-size: 14px;
    margin-bottom: 0px;
}

.modal-heading h2 span {
    font-size: 14px;
    vertical-align: top;
    margin-left: -4px;
}

.setting-form {
    margin: auto;
    --bs-gutter-x: 0rem;
    padding: 12px;
}

/* The Close Button */

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#help:hover {
    color: black;
    background-color: #4d4d56;
}

#help:focus {
    color: black;
    background-color: #3468bf;
    box-shadow: 0px 0px 4px #6099f3;

}

#modal_params table th,
#modal_params table td {
    border: 1px solid #ddd;
    padding: 6px 13px;
}

#modal_params table th {
    text-align: center
}

#modal_params table {
    border-collapse: collapse;
    margin: 15px 0;
}



/*The Model Button*/

.settingButton {
    text-align: center;
}

.settingButton button {
    background: teal;
    color: white;
    border-radius: 7px;
    border: none;
    padding: 6px 78px;
    font-size: 16px;
    margin: 0.8em 1em;
}


/***************************************ANS_SPAN*******************************/

#answerShow {
    text-align: left;
    padding: 1em;
    position: relative;
    display: none;
}

#errorSpan {
    border: 2px solid #e66b3c;
    color: #e66b3c;
    background-color: rgba(230, 107, 60, 0.1);
    padding: 0.2em 0.4em;
    display: inline-block;
    border-radius: 4px;
    text-align: center;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
}

.error::after {
    box-sizing: border-box;
    content: "ans";
    position: absolute;
    bottom: -0.5em;
    left: 50%;
    font-size: 60%;
    width: 1.9em;
    overflow: hidden;
    text-align: center;
    margin-left: -0.95em;
    border: 1px solid #e66b3c;
    background: #fff;
    padding: 0;
    border-radius: 3px;
    height: 1em;
    line-height: 0.9em;
}

.ansSpan {
    border: 1px solid #e66b3c;
    color: #e66b3c;
    position: absolute;
    bottom: -1px;
    left: 10px;
    background: white;
    font-size: 10px;
    border-radius: 4px;
    padding: 0em 3px;
}

/************************************NAV_BUTTONS*******************************/

.arrow-left {
    width: 0;
    height: 0;
    border-top: 0.4em solid transparent;
    border-bottom: 0.4em solid transparent;
    border-right: 0.4em solid black;
}

.myTab {
    width: 35em
}

.myTabContent {
    width: 18em;
}

.nav {
    --bs-nav-link-padding-x: 1rem;
}

.mq-non-leaf table {
    border-spacing: 0.1em;
    border-collapse: separate;
}

/*************************************FUNC_BUTTONS*****************************/

.pre-func-btn {
    background: var(--pre-function-background);
    border-left: 3px solid var(--pre-func-light-border);
    border-width: initial;
    width: 2.9em;
    height: 2em;
    border-radius: 1em;
    color: white;
    margin-top: 0.4em;
    padding: 0px;
}

.pre-func-btn:hover {
    background: var(--pre-function-hover);
    border-color: var(--pre-function-hover);
    border-left: 3px solid var(--pre-function-border-hover);
    border-width: initial;
}

.pre-func-btn:focus {
    background: var(--pre-function-background);
    border-color: var(--pre-function-background);
    border-left: 3px solid var(--pre-func-light-border);
    border-width: initial;
    color: white;
}
#transpose{
        background: var(--pre-function-background) !important;
        border-color:var(--pre-function-background);
    border-left: 3px solid var(--pre-func-light-border);
    border-width: initial;
    color: white;
    padding: 0px;
}

#transpose:hover {
 background: var(--pre-function-hover) !important;
    border-color: var(--pre-function-hover);
    border-left: 3px solid var(--pre-function-border-hover);
    border-width: initial;
      color: black;
}

#transpose:focus {
  background: var(--pre-function-hover);
    border-color: var(--pre-function-hover);
    border-left: 3px solid var(--pre-function-border-hover);
    border-width: initial;
    color:black;
}
.func-btn {
    background-color: var(--button-background);
    border-right: 3px solid var(--light-border);
    border-width: initial;
    width: 2.9em;
    height: 2em;
    border-radius: 1em;
    color: white;
    margin-top: 0.4em;
    padding: 0px;
}

.func-btn:hover {
    background-color: var(--func-button-hover);
    border-color: var(--func-button-hover);
    border-right: 3px solid var(--func-button-hover-border);
    border-width: initial;
    color: black;
}

.func-btn:focus {
    background-color: var(--button-background);
    border-color: var(--button-background);
    border-right: 3px solid var(--light-border);
    border-width: initial;
    color: white;
}

.constant-btn {
    background-color: var(--digit-background);
    margin-top: 3px;
    font-size: initial;
    width: 2.9em;
    border-radius: 1em;
    height: 2em;
    color: white;
}

.constant-btn:hover {
    background-color: var(--digit-button-hover);
    border: 1px solid var(--digit-button-hover);
}

.constant-btn:focus {
    background-color: var(--digit-button-hover);
    border: 1px solid var(--digit-button-hover);
    color: white;
}

.mq-math-mode sup.mq-nthroot {
    top: 0em;
}

/******************************NUMERIC_BUTTONS*********************************/

.digit-btn {
    background-color: var(--digit-background);
    font-size: var(--digit-btn-size);
    border-radius: 50%;
    color: white;
    border: none;
    margin-top: 0.1em;
    width: 2em;
    height: 2em;
    line-height: revert;
}

.digit-btn:hover {
    background-color: var(--digit-button-hover);
}

.digit-btn:focus {
    background-color: var(--digit-button-hover);
    color: white;
}
 
 .vars-btn:hover{
     background-color:#2f7d9d;
 }
/****************************OPERATIONS_BUTTON*********************************/

#divide,
#times,
#minus,
#plus {
    color: white;
    border-radius: 50%;
    width: 2em;
    margin-top: 0.1em;
    font-size: 21px;
    border: none;
    padding-bottom: 0.2em;
}

#divide:hover,
#times:hover,
#minus:hover,
#plus:hover,
#plusminus:hover,
#percent:hover {
    background: #df7320 !important;
    color: black;

}

#percent {
    border: none;
}

/*******************************OPERANDS_BUTTON********************************/

.pnc-btn,
.nav-btn {
    background-color: var(--pnc-btn-background);
    font-size: var(--function-button-size);
    color: white;
    margin-top: 0.2em;
    border-radius: 1em;
    border: none;
    margin-left: 0.2em;
}

.pnc-btn:focus {
    background-color: #575767;
    color: white;
}

.pnc-btn:hover {
    background-color: #4d4d56;
}

.nav-btn:focus {
    background-color: #4d4d56;
}

#enter {
    background-color: var(--enter-button-background);
    color: white;

}

#enter span {
    font-size: 21px;
    -webkit-text-stroke-width: thin;

}

#enter:hover {
    background-color: #08c35e;
}

#enter:hover,
#enter:focus,
#enter:active {
    color: black;
    transition: none !important;
}

.clear-btn {
    background-color: #ff0000;
}

.op-btn {
    background-color: var(--operator-background);
    border-left: 3px solid var(--op-btn-border);
    border-right: 3px solid var(--op-btn-border);
    border-width: initial;
    width: 2.9em;
    height: 2em;
    border-radius: 1em;
    color: white;
    margin-top: 0.4em;
    padding: 0px;
}
.vars-btn {
    background: var(--vars-button-xyz) !important;
    height: 1.6em;
    border-radius: 1em;
}

.op-btn:hover {
    background-color: var(--op-button-hover);
    border-color: var(--op-button-hover);
    border-left: 3px solid var(--op-btn-border-hover);
    border-right: 3px solid var(--op-btn-border-hover);
    color: black;
    border-width: initial;
}


.op-btn:focus {
    background-color: var(--operator-background);
    border-color: var(--operator-background);
    border-left: 3px solid var(--op-btn-border);
    border-right: 3px solid var(--op-btn-border);
    color: white;
    border-width: initial;
}


.multi-func-btn {
    background-color: var(--multi-function-background) !important;
     border-right: var(--multi-function-background) !important;
    border-bottom: 3px solid var(--multi-function-border);
    font-size: var(--function-button-size);
    border-width: initial;
    width: 2.9em;
    height: 2em;
    border-radius: 1em;
    color: white;
    margin-top: 0.4em;
    padding: 0px;
}

.multi-func-btn:hover {
    background-color: var(--multi-function-hover);
    border-color: var(--multi-function-hover);
    border-bottom: 3px solid var(--multi-function-border-hover);
    color: black;
}

.multi-func-btn:focus {
    background-color: var(--multi-function-background);
    border-color: var(--multi-function-background);
    border-bottom: 3px solid var(--multi-function-border);
    color: black;
  
}

.enter-btn {
    background-color: #00ff00;
}


/***************************************SIGN_BUTTON****************************/

#clearall,
#backspace {
    background: var(--utl-background);
    color: white;
}

#backspace:hover {
    background: #ca0c11 !important;
    color: black;
}

#clearall:hover {
    background: #ca0c11 !important;
    color: black;
}

/*********************************TRIG_BUTTON**********************************/

.trig-btn,
.matrix-btn {
    font-size: smaller;
    width: 3.5em;
    height: 2.4em;
    border-radius: 1.5em;
    margin-top: 0.5em;
    font-weight: 500;
}

input[type="radio"]+label {
    padding: 6px;
    display: inline-block;
    margin: -1.8px;
    margin-top: 11px;
    border-color: #ddd;
    background-color: #a0a0a0;
}

.input[type="radio"]+label:hover {
    color: black;
    background-color: #a0a0a0;
    border: none;
}


#kronecker,
#column,
#row{
    // background-color: var(--multi-function-background);
    // border-color: var(--matrix-function-btn-background);
    // border-bottom: 3px solid var(--prob-button-border);
        background-color: var(--multi-function-background) !important;
        border-color:var(--multi-function-background) ;
          border-bottom: 3px solid var(--multi-function-border);
    
    
    border-width: initial;
}
#atan2{
     background-color: var(--multi-function-background);
    // border-color: var(--matrix-function-btn-background);
    // border-bottom: 3px solid var(--prob-button-border);
    border-width: initial;
}

#atan2:hover {
    background-color: var(--multi-function-hover);
    border-color: var(--multi-function-hover);
    border-bottom: 3px solid var(--multi-function-border-hover);
    color: black;
}


#atan2:focus{
  border-bottom: 3px solid var(--multi-function-border);
  color: black;
}
/*********************************ACCORDION************************************/
.accordion {
    background-color: white;
    cursor: pointer;
    padding: 8px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    margin-top: 0.3em;
    transition: 0.4s;
    font-size: 19px;
}


/* Style the accordion panel. Note: hidden by default */
.panel {
    background-color: white;
    display: none;
    overflow: hidden;
}

.elmagpanel button {
    font-size: 12px;
}

.panel option {
    text-align: initial;
    font-size: 13px;
}

/*************************************MATRIX_BUTTON****************************/

#bmatrix,
#onecrosstwo,
#twocrossone,
#threecrossthree,
#add_col,
#add_row,
#zeros {
    background-color: var(--matrix-buttons-background);
    border: none;
}

.mq-matrix {
    vertical-align: middle;
}
.matrix-func-btn{
  width: 4.6em;
  color: white;
  padding: 0;
  background-color: var(--matrix-function-btn-background);
  
  border-right-color: var(--prob-button-border);
  border-width: initial;
}

.matrix-func-btn:hover {
    background-color: var(--matrix-function-btn-hover) !important;
  border-color: var(--prob-button-hover);
    border-right-color: var(--prob-button-border);
}

.matrix-func-btn:focus {
    background-color: var(--matrix-function-btn-hover);
    border-color: var(--prob-button-hover);
    border-right-color: var(--prob-button-border);
}

/**********************************STATISTIC_BUTTONS***************************/
.stats-btn{
    background-color:var(--states-button-background) !important;
    border-right-color: var(--states-button-background) !important;
    border-bottom-color: var(--states-button-border) !important;
    border-width: initial;
}
.stats-btn:hover{
   background-color:var(--states-button-hover) !important;
    border-color:var(--states-button-hover);
    border-bottom-color: var(--states-button-border);
    border-width: initial;
}
.stats-btn:focus{
   background-color:var(--states-button-hover) !important;
    border-color:var(--states-button-hover);
    border-bottom-color: var(--states-button-border);
    border-width: initial;
}
.prob {
    background-color: var(--prob-button-background) !important;
    border-color: var(--prob-button-background) !important;
    border-bottom-color:var(--prob-button-border) !important;
    border-width: initial;
    
}
.prob:hover {
  background-color:var(--prob-button-hover) !important;
  border-color:var(--prob-button-hover) !important;
  border-bottom-color: var(--prob-button-border) !important;
  border-width: initial;
}
/************************************CONSTANT_TAB******************************/
#constResults{
   background-color:var(--constant-results-bg) !important;
}
.constinput{
    background: var(--constant-input-field-bg);
    border-radius: 5px;
}
.const-insrt-btn:hover{
     background-color: var(--digit-button-hover);
}

.const-insrt-btn:focus{
    background-color: var(--digit-button-hover);
    color: white;
}
#const1-tab-pane {
    float: left;
}

.dropdown-menu {
    color: red;
}

.constantslist {
    border: none;
}

// .dropdown-item {
//     font-weight: bold;
// }

.form-group {
    display: none;
}

/***********************************RADIO-BUTTON*******************************/
.btnrow input {
    display: none;
}

/*************************************HELP MODAL*******************************/
#help_modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

.helpModal-content {
    background-color: var(--setting-help-model-bg);
    margin: auto;
    border-radius: 16px;
    padding: 1em;
    border: 1px solid #888;
    width: 84%;
    margin-top: 5em;
}

.close_help {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close_help:hover,
.close_help:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.row {
    --bs-gutter-x: 0rem;
}

/*********************************MEDIA_QUERY**********************************/
@media only screen and (max-width: 720px) {
    .col-sm-12 {
        width: 50%;

    }

    .calc-div {
        width: auto;
    }

    .row {
        margin: 0px;
        padding: 0px;
    }

    .keypad_main {
        display: grid;
        justify-content: center;
    }

    #exp1 {
        width: auto !important;
    }

    .setting-content {
        width: 85%;
    }

    .pnc-ult-div {
        margin: 15px;
        margin-top: 0px;
    }

    .setting-form {
        padding: 12px;
    }
}

@media only screen and (min-width: 721px) and (max-width: 991px) {
    .row {
        width: fit-content;
        margin: auto;
    }

    .setting-content {
        width: 33%;
    }
}

@media only screen and (min-width: 992px) {
    #calc-body {
        width: auto;
        margin: auto;
    }
}