html,
body {
   width: 100%;
   height: 100%;
   overflow: hidden;
   font-family: "Open Sans", sans-serif ;
}

h1,
h2,
h3,
h4 {
   font-family: "Open Sans", sans-serif ;
}

#timesweepcheckbox-unchecked {
   display: none;
}

#timesweepcheckbox-checked {
   display: block;
}

#checkbox-checked,
#timeinmin {
   display: block;
}

#checkbox-unchecked,
#timeinsec {
   display: none;
}

.insec {
   display: none;
}

.timecont input.cmn-toggle-round:checked + label + label.inmin {
   display: block;
}

.main {
   width: 100%;
   height: 100%;
   overflow: hidden;
}

#settingscont {
   width: 100%;
   height: 100%;
   left: 0;
   margin-left: auto;
   margin-right: auto;
   background-color: #c2c2c2;
   position: fixed;
   opacity: 1;
   overflow: auto;
   z-index: 99999999;
}

.cell-heading {
   background: #404040;
   color: #fff;
   text-align: center;
   height: 30px !important;
   line-height: 30px;
}

.cell-heading.startplay {
   margin-bottom: 15px;
   line-height: 50px;
   background: linear-gradient(100deg, #1cb5e0, #1488cc);
   cursor: pointer;
   height: 50px !important;
}

.cell .cell-heading.heading {
   position: relative;
   bottom: auto;
   right: auto;
   height: auto;
   margin-left: auto;
   margin-right: auto;
   color: #fff;
   padding-top: auto;
}

.cell-heading.startplay:before {
   content: "\F04B";
   font-family: "FontAwesome";
   right: 30px;
   position: absolute;
}

.cell:last-child .cell-body {
   border-bottom: 0;
}

.cell-body {
   padding: 15px;
   background: #e8e8e8;
}

.pattern-box {
   background: #dfe3e9;
   padding: 0.68em 0;
   margin-bottom: 1px;
   float: left;
   width: 25%;
   position: relative;
}

.pattern-box span {
   position: relative;
   z-index: 2;
}

.pattern-box:first-child {
   border-radius: 0.1875rem 0 0 0.1875rem;
}

.pattern-box:last-child {
   border-radius: 0 0.1875rem 0.1875rem 0;
}

.pattern-box label {
   font-weight: normal;
   margin-bottom: 0;
}

.bilateral label:before {
   content: "\F0EC";
   font-family: "FontAwesome";
   right: 30px;
   position: absolute;
   top: 50%;
   margin-top: -6px;
}

.figure-8 label:before {
   content: url("../images/infinity.png");
   font-family: "FontAwesome";
   right: 30px;
   position: absolute;
   top: 50%;
   margin-top: -9px;
}

.dia-lr label:before {
   content: "\F0EC";
   font-family: "FontAwesome";
   right: 30px;
   position: absolute;
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   top: 50%;
   margin-top: -6px;
}

.dia-rl label:before {
   content: "\F0EC";
   font-family: "FontAwesome";
   right: 30px;
   position: absolute;
   transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
   top: 50%;
   margin-top: -9px;
}

/*.tone label:before{*/

/*content:"\F04B";*/

/*font-family: 'FontAwesome';*/

/*right: 30px;*/

/*position: absolute;*/

/*top:50%;*/

/*margin-top: -6px;*/

/*}*/

.preview-box {
   position: relative;
   background-color: rgb(60, 72, 118);
}

.target {
   height: calc(100% - 65px);
}

.target .colorshape {
   line-height: 220px;
   /*height: 200px;
		width: 200px;*/
}

.ui-slider-horizontal .ui-slider-handle:focus {
   outline: none;
}

.settingscont-shape {
   /* position: absolute;*/
   height: 100%;
   left: 30%;
}

.background-change-btn {
   display: table;
   border-spacing: 5px 0;
   border-collapse: separate;
   width: 100%;
   table-layout: fixed;
   margin-top: 10px;
   margin-bottom: 10px;
}

.background-change-btn div[class^="btn"] {
   display: table-cell;
   border-radius: 3px;
}

.background-change-btn div[class^="btn"] label {
   color: #fff;
   line-height: 30px;
   height: 30px !important;
   margin-bottom: 0;
   font-weight: normal;
}

.background-change-btn a {
   display: table-cell;
}

.btn-black {
   background: #000;
}

.btn-grey {
   background: #b0b0b0;
}

.btn-blue {
   background: #336dc4;
}

.btn-light {
   background: #eee;
}

.bg-select-btn {
   width: 25%;
   padding-left: 15px !important;
}

.flexbox-parent {
   display: -webkit-flex;
   display: flex;
   overflow: hidden;
   height: calc(100% - 30px);
}

.flexbox-parent .content {
   display: inline-block;
   background: white;
   overflow: hidden;
   width: 50%;
   height: 100%;
   padding: 15px;
   -webkit-order: 0;
   order: 0;
   -webkit-flex-grow: 0;
   flex-grow: 0;
   -webkit-flex-shrink: 1;
   flex-shrink: 1;
   -webkit-flex-basis: auto;
   flex-basis: auto;
   -webkit-align-self: auto;
   align-self: auto;
}

.crystal-balls ul {
   list-style: none;
   padding-left: 0;
   height: 100%;
   /* padding: 0 2em; */
   margin-bottom: 0;
}

.height95percent {
   height: calc(100% - 30px);
}

.fix-height-left {
   height: calc(100% - 171px);
   margin-bottom: 15px;
}

.height55 {
   height: 65px;
}

.height95 {
   /* height: 97px; */
   margin-bottom: 15px;
}

.height125:last-child,
.height95:last-child {
   margin-bottom: 0;
}

.crystal-balls ul li {
   display: inline-block;
   width: 33%;
   /*line-height: 4.5em;*/
   margin-left: -2px;
   text-align: center;
   padding-bottom: 5px;
   padding-top: 5px;
   height: 50%;
}

.time-in-sec ul {
   list-style: none;
   padding: 0;
   margin-bottom: 0;
}

.time-in-sec ul li {
   display: inline-block;
   position: relative;
   width: 32%;
   text-align: center;
}

.time-in-sec ul li label {
   display: block;
   position: relative;
   font-weight: normal;
   z-index: 9;
   font-size: 12px;
   color: #333;
   margin-bottom: 0;
   padding-bottom: 20px;
}

.timecont .cmn-toggle + label {
   float: right;
}

.timecont input.cmn-toggle-round + label {
   width: 40px;
   height: 20px;
}

.timecont input.cmn-toggle-round:checked + label:after {
   margin-left: 20px;
}

.timecont input.cmn-toggle-round + label:after {
   width: 18px;
}

.time-in-sec ul li input[type="radio"] {
   margin: 17px 0px 0px -6px;
   position: absolute;
   visibility: hidden;
}

ul li .check {
   display: block;
   margin-top: 16px;
   position: absolute;
   border: 2px solid #636363;
   border-radius: 100%;
   height: 12px;
   width: 12px;
   top: 0px;
   left: 50%;
   margin-left: -7.5px;
   z-index: 5;
   transition: border 0.25s linear;
   -webkit-transition: border 0.25s linear;
}

ul li .check::before {
   display: block;
   position: absolute;
   content: "";
   border-radius: 100%;
   height: 4px;
   width: 4px;
   top: 2px;
   left: 2px;
   margin: auto;
   transition: background 0.25s linear;
   -webkit-transition: background 0.25s linear;
}

input[type="radio"]:checked ~ .check {
   border: 2px solid #636363;
}

input[type="radio"]:checked ~ .check::before {
   background: #636363;
}

.crystal-balls ul li label {
   display: inline-block !important;
   padding: 0 !important;
}

.helper {
   display: inline-block;
   height: 100%;
   vertical-align: middle;
}

.crystal-balls ul li img {
   height: 60%;
}

#heading {
   bottom: 15px;
   right: 15px;
   height: 33px;
   margin-left: auto;
   margin-right: auto;
   z-index: 999999;
   position: absolute;
   color: white;
   font-size: 24px;
   padding-top: 5px;
   cursor: pointer;
}

#toggler {
   top: 15px;
   left: 15px;
   height: 33px;
   margin-left: auto;
   margin-right: auto;
   z-index: 999999;
   position: absolute;
   color: white;
   font-size: 18px;
   padding-top: 5px;
   cursor: pointer;
}

#logo {
   display: block;
   margin-left: auto;
   margin-right: auto;
   margin-top: 20px;
   text-align: center;
   width: 10%;
}

a.toggler:before {
   content: url("../images/compress.png");
   color: #fff;
}

a.toggler:hover {
   text-decoration: none;
}

a.toggler:focus {
   text-decoration: none;
   outline: 0;
}

a.toggler.off::before {
   content: url("../images/expand.png");
   color: #fff;
}

.time {
   position: absolute;
   right: 15px;
   top: 15px;
   margin-left: auto;
   margin-right: auto;
   width: 100%;
   font-family: "Roboto", sans-serif;
   color: white;
   text-align: right;
   font-size: 15px;
}

.target {
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-align-content: stretch;
   -ms-flex-line-pack: stretch;
   align-content: stretch;
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
}

.size {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
   -webkit-flex: 0 1 auto;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
   -webkit-align-self: auto;
   -ms-flex-item-align: auto;
   align-self: auto;
}

.start {
   position: absolute;
   top: 30%;
   margin-left: auto;
   margin-right: auto;
   width: 100%;
   display: none;
   font-family: "Roboto", sans-serif;
   color: white;
   opacity: 1;
   text-align: center;
   font-size: 20px;
}

#fullscreen {
   margin-left: 28%;
   height: 40px;
   z-index: 22;
}

#controls {
   /* position: absolute;
   bottom: 45px;
   width: 100%;
   z-index: 999999; */
}

.button {
   /* position:relative; */
   margin-top: -200px;
   width: 50px;
   height: 50px;
}

#volume {
   margin-left: 50%;
}

#pause {
   margin-left: 20%;
   margin-top: -8px;
}

#speed {
   margin-left: 80%;
}

.shape {
   position: absolute;
   top: 40%;
}

.target .shape {
   position: relative;
   top: auto;
}

#diamond {
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
   box-sizing: content-box;
   width: 20px;
   height: 20px;
   background: red;
   -webkit-transform: rotateZ(-45deg);
   transform: rotateZ(-45deg);
   -webkit-transform-origin: 0 100% 0deg;
   transform-origin: 0 100% 0deg;
}

#full {
   display: block;
}

#mob {
   display: none;
}

#square {
   width: 20px;
   height: 20px;
   background: red;
}

#circle {
   width: 20px;
   height: 20px;
   background: url("images/red-sphere.png") center center no-repeat;
   background-size: contain !important;
   /*-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;*/
}

.settings .switch {
   display: table-cell;
   vertical-align: middle;
   padding: 10px;
}

.cmn-toggle {
   position: absolute;
   /* margin-left: -9999px; */
   visibility: hidden;
}

.cmn-toggle + label {
   display: inline-block;
   position: relative;
   cursor: pointer;
   outline: none;
   vertical-align: middle;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

input.cmn-toggle-round + label {
   /* padding: 2px; */
   width: 80px;
   height: 30px;
   margin: 0 auto;
   background-color: #dddddd;
   -webkit-border-radius: 60px;
   -moz-border-radius: 60px;
   -ms-border-radius: 60px;
   -o-border-radius: 60px;
   border-radius: 60px;
}

input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {
   display: block;
   position: absolute;
   top: 1px;
   left: 1px;
   bottom: 1px;
   content: "";
}

input.cmn-toggle-round + label:before {
   right: 1px;
   background-color: #f1f1f1;
   -webkit-border-radius: 60px;
   -moz-border-radius: 60px;
   -ms-border-radius: 60px;
   -o-border-radius: 60px;
   border-radius: 60px;
   -webkit-transition: background 0.4s;
   -moz-transition: background 0.4s;
   -o-transition: background 0.4s;
   transition: background 0.4s;
}

input.cmn-toggle-round + label:after {
   width: 28px;
   background-color: #fff;
   -webkit-border-radius: 100%;
   -moz-border-radius: 100%;
   -ms-border-radius: 100%;
   -o-border-radius: 100%;
   border-radius: 100%;
   -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
   -webkit-transition: margin 0.4s;
   -moz-transition: margin 0.4s;
   -o-transition: margin 0.4s;
   transition: margin 0.4s;
}

input.cmn-toggle-round:checked + label:before {
   /*background-color: #8ce196;*/
}

input.cmn-toggle-round:checked + label:after {
   margin-left: 50px;
}

input.cmn-toggle-round:checked ~ crystal-balls {
   display: block;
}

.switch {
   position: relative;
   padding: 6px 0;
   height: 52px;
   text-align: center;
}

.switch:before {
   content: "SQUARE";
   font-size: 12px;
   display: inline-block;
   vertical-align: middle;
}

.switch:after {
   content: "CIRCLE";
   font-size: 12px;
   display: inline-block;
   vertical-align: middle;
}

.time-sweep-switch {
   position: relative;
   padding: 6px 0;
   height: 52px;
   text-align: center;
}

.time-sweep-switch:before {
   content: "TIME";
   font-size: 12px;
   line-height: 52px;
   display: inline-block;
   vertical-align: middle;
}

.time-sweep-switch:after {
   content: "SWEEPS";
   font-size: 12px;
   display: inline-block;
   vertical-align: middle;
}

.volSlider {
   margin-top: -220%;
   margin-left: 70%;
}

.spSlider {
   margin-top: -220%;
   margin-left: 105%;
}

@media screen and (max-width: 1250px) {
   .volSlider {
      margin-top: -350%;
      margin-left: 95%;
   }
   .spSlider {
      margin-top: -355%;
      margin-left: 125%;
   }
}

/*.slider{
	margin-top: 22px;

}*/

/*.slider .ui-slider-handle{
    width:50px;
    height:50px;
    background: transparent url(../images/backgrounds/s1.png) no-repeat 0 0;
    position:absolute;
    top: -24px;
    border-style:none;
    background-size: contain;
}/*
/*.ui-slider-horizontal {
    height: 5px !important;
}*/

.spinner {
   display: block;
   position: fixed;
   z-index: 1000;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background: rgba(255, 255, 255, 0.8);
   background: rgba(255, 255, 255, 0.8)
      url("http://i.stack.imgur.com/FhHRx.gif") 50% 50% no-repeat;
}

.form {
   margin: 0 auto;
}

.form {
   max-width: 100%;
}

.input-range {
}

.irs-slider.single.fa.fa-dot-circle-o:before {
   content: "";
}

.lr-icon {
}

.bilateral.icon-bilateral:before {
   content: "\F0EC";
   font-family: "FontAwesome";
   right: 36%;
   position: absolute;
   top: 50%;
   margin-top: -8px;
}

.figure-8.icon-8:before {
   content: url("../images/infinity.png");
   font-family: "FontAwesome";
   right: 36%;
   position: absolute;
   top: 50%;
   margin-top: -9px;
}

.dia-lr.icon-lr:before {
   content: "\F0EC";
   font-family: "FontAwesome";
   right: 36%;
   position: absolute;
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   top: 50%;
   margin-top: -8px;
}

.dia-rl.icon-rl:before {
   content: "\F0EC";
   font-family: "FontAwesome";
   right: 36%;
   position: absolute;
   transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
   top: 50%;
   margin-top: -8px;
}

.pattern-box input[type="radio"].css-checkbox + label.css-label {
   /* position: initial; */
}

.pattern-box input[type="radio"].css-checkbox:checked + label.css-label:after {
   /* left: 40px !important;
   margin-top: -12px !important;
   content: "" !important;
   background: #c8cfd8;
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0 !important;
   top: 0 !important;
   margin: 0 !important;
   z-index: 1; */
}

.btn-secondary.current {
   background: #c8cfd8;
}

.noUi-handle.noUi-handle-lower {
   position: inherit !important;
}

.sphere-color {
   padding-left: 10px !important;
   padding-right: 10px !important;
   opacity: 0.8;
}

.sphere-color.active {
   opacity: 1;
}

.pattern-box.text-center.tone:hover {
   /* color: #212529; */
   /* background-color: #c8cfd9; */ /*pfs2*/
   /* border-color: #c1c9d4;
   border-top-color: rgb(193, 201, 212);
   border-right-color: rgb(193, 201, 212);
   border-bottom-color: rgb(193, 201, 212); */
}

.without_ampm::-webkit-datetime-edit-ampm-field {
   display: none;
}

input[type="time"]::-webkit-clear-button {
   -webkit-appearance: none;
   -moz-appearance: none;
   -o-appearance: none;
   -ms-appearance: none;
   appearance: none;
   margin: -10px;
}

.cst_clr .btn {
   /* display: inline-block;
   margin: 0px 20px;
   border-radius: 5px !important;
   height: 20px !important;
   line-height: 20px !important;
   padding: 0 !important;
   width: 20px !important;
   white-space: pre; */
}

.cst_clrblur .btn {
   display: inline-block;
   margin: 0px 20px;
   border-radius: 5px !important;
   height: 27px !important;
   line-height: 20px !important;
   padding: 0 !important;
   width: 20px !important;
   white-space: pre;
}

.color_choose .btn {
   /*width: 40px;*/
   /* height: 100% !important;
   border-radius: 5px !important;
   margin: 10px;
   border: none; */
}

.grad_group .btn {
   width: 25%;
}

.audio_btn .pattern-box {
   background-color: transparent;
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   padding: 0;
   height: 33px;
   width: 9%;
   margin: 5px 0;
   margin-right: 10px;
}

.audio_btn .pattern-box .note_text {
   /* width: 100%;
   height: 100%; */
   display: inline-block;
   font-size: 15px;
   font-family: "Titillium Web", sans-serif;
   font-weight: 400;
   color: #555555;
   line-height: 2rem;
   vertical-align: top;
}

.audio_btn
   .pattern-box
   input[type="radio"].css-checkbox:checked
   + label.css-label:after {
   background-color: transparent !important;
   border: 1px solid #555555;
   border-radius: 5px;
}

/* .audio_btn .pattern-box.text-center.tone:hover {
   background-color: #555555 !important;
   border-color: #555555 !important;
   border-radius: 5px;
} */ /*pfs2*/

.audio_btn .pattern-box.tone:hover label {
   /* background-color: transparent !important; */ /*pfs2*/
   /* border-color: #c8cfd8 !important;
   border-top-color: #c8cfc8 !important;
   border-right-color: #c8cfc8 !important;
   border-bottom-color: #c8cfc8 !important;
   border-radius: 5px; */
}

/* .audio_btn .pattern-box.tone:hover label .note_text {
   color: #ffffff !important;
} */ /*pfs2*/

.start-ease {
   /*transition: all 1s ease-in;*/
   /*-webkit-transform: translateX(300px);*/
   /*transform: translateX(160%);*/
   /*transition-property: ease-in;*/
   transition-duration: 0.1s;
   transition-timing-function: ease-in;
   -webkit-transition-duration: 0.1s;
   -webkit-transition-timing-function: ease-in;
}

.end-ease {
   /*transition: all 1s ease-out;*/
   /*-webkit-transform: translateX(300px);*/
   /*transform: translateX(160%);*/
   transition-duration: 0.1s;
   -webkit-transition-duration: 0.1s;
   /*transition-property: ease-out;*/
   transition-timing-function: ease-out;
   -webkit-transition-timing-function: ease-out;
   /* Safari */
}

.loadImg {
   display: none;
   position: absolute;
   width: 100%;
   height: 100%;
}

.btn_no_blur.active {
   box-shadow: 7px 5px 11px 0px rgba(0, 0, 0, 1) !important;
}

.btn_blur.active {
   box-shadow: 7px 5px 11px 0px rgba(0, 0, 0, 1) !important;
}

#accessTool .btn-main {
   /* padding: 12px 29px; */
}

#accessTool .btn-main.active1 {
   /* background: #3c4875;
   color: #fff;
   border: none; */
}

#tool_background .btn.active {
   border: 3px solid #71c016;
}

#sphereColor .btn.active {
   border: 3px solid #71c016 !important;
   border-radius: 50% !important;
}

.active1 {
   /* background: #3c4875; */
}

.audio_btn
   .pattern-box
   input[type="radio"].css-checkbox:checked
   + label.css-label:after {
   background-color: transparent !important;
   border: 1px solid #555555;
   border-radius: 5px;
}

.page-body-wrapper {
   padding-top: 0 !important;
}

.sidebar-offcanvas .save-btn {
   width: 100%;
   margin-top: 7px;
   background-color: #dfe3e9;
   border-color: #dfe3e9;
}

/* new added, sidebar for iPad */
nav#sidebar {
   /* width: 40%; */
   position: absolute;
   height: 100vh;
   height: 100%;
   overflow-y: auto;
   /* -webkit-overflow-scrolling: auto; */
}
li.nav-item button.btn.btn-primary.btn-lg.startplay.pause {
   width: 49%;
}

@media (max-width: 648.98px) {
   nav#sidebar {
      /* right: -100%; */
   }
}

/* @media (min-width: 649px) and (max-width: 799px) { */
@media (min-width: 649px) and (max-width: 991.98px) {
   nav#sidebar {
      top: 0;
      right: 0;
      max-height: unset;
      height: 100%;
      /* min-width: 385px; */
   }
   li#accessTool input.btn.btn-main.btn-bold,
   li.nav-item button.btn.btn-secondary.btn-lg.go-back {
      /* width: 100% !important;
      margin-bottom: 6px; */
   }
   li.nav-item button.btn.btn-secondary.btn-lg.go-back,
   li.nav-item button.btn.btn-primary.btn-lg.startplay.pause {
      margin-bottom: 10px;
   }
   li.nav-item button.btn.btn-primary.btn-lg.startplay.pause {
      width: 100%;
   }
   li.nav-item.sidebar-category h4 {
      /* font-size: 0.875rem; */
   }
}
/* new added, sidebar for iPad end */

/* eye-movement-tool */

.swal-icon--success__ring {
   border: 4px solid #3c4876 !important;
}

.swal-icon--success__line {
   background-color: #3c4876 !important;
}

.swal-button:not([disabled]) {
   background-color: #3c4876 !important;
}

@media (max-width: 1351px) and (min-width: 1200px) {
   #accessTool .btn-main {
      /* padding: 12px 25px; */
   }
}

@media (max-width: 1199px) and (min-width: 998px) {
   #accessTool .btn-main {
      /* padding: 12px 25px; */
   }
}

/* start responsive css is here */

@media screen and (min-width: 1400px) {
   li.nav-item.sidebar-category h4 {
      /* margin: 7px 0 !important; */
   }
   button.reset-btn-mdfctn {
      width: 50% !important;
   }
}
@media (max-width: 1400px) and (min-width: 1398px) {
   button.reset-btn-mdfctn {
      width: 49% !important;
   }
}

@media (max-width: 1400px) and (min-width: 1200px) {
   li.nav-item button.btn.btn-secondary.btn-lg.go-back {
      width: 48% !important;
      margin: 0 5px 0 0;
      padding: 18px 0;
   }
   li#accessTool input.btn.btn-main.btn-bold {
      /* width: 32.3% !important;
      text-align: center;
      padding: 14px 0; */
   }
   li.nav-item.sidebar-category h4 {
      /* font-size: 16px !important; */
   }
   .btn-group.grad_group {
      margin: 0 0 12px 0;
   }
   li.nav-item button.btn.btn-black.btn_no_blur {
      width: 34%;
   }
   li.nav-item button.btn.btn-grey.btn_blur {
      width: 34%;
   }
}

@media (max-width: 1250px) and (min-width: 1200px) {
   button.btn.btn-black.btn_no_blur {
      height: 27px !important;
   }
}

@media (max-width: 1199px) and (min-width: 992px) {
   li.nav-item button.btn.btn-secondary.btn-lg.go-back {
      width: 48% !important;
      margin: 0 4px 0 0;
      padding: 18px 0;
   }
   li#accessTool input.btn.btn-main.btn-bold {
      /* width: 32% !important;
      text-align: center;
      padding: 10px 0; */
   }
   /* button.btn.btn-black.btn_no_blur.pr-0.pl-0 {
      height: auto !important;
      padding: 7px 15px !important;
      width: auto;
      font-size: 14px !important;
      margin: 8px 8% 12px 0 !important;
   } */ /*pfs2*/
   li.nav-item.sidebar-category h4 {
      /* font-size: 14px;
      margin: 5px 0 7px 0; */
   }
   .audio_btn .pattern-box {
      margin-right: 9px;
   }
}

@media (max-width: 991px) and (min-width: 768px) {
   .sidebar-offcanvas {
      top: 0 !important;
      right: 0 !important;
   }
   li.nav-item button.btn.btn-secondary.btn-lg.go-back {
      width: 100% !important;
      margin: 0 0 10px 0;
      padding: 12px 0;
   }
   li.nav-item button.btn.btn-primary.btn-lg.startplay.pause {
      text-align: center;
      padding: 9px 0;
      width: 100% !important;
   }
   li#accessTool input.btn.btn-main.btn-bold {
      /* width: 100% !important;
      margin: 0 0 6px 0; */
   }
   /* button.btn.btn-black.btn_no_blur.pr-0.pl-0 {
      height: auto !important;
      padding: 7px 15px !important;
      width: auto;
      font-size: 14px !important;
      margin: 8px 8% 12px 0 !important;
   } */ /*pfs2*/
   li.nav-item button.btn.btn-grey.btn_blur {
      width: 39%;
   }
   .audio_btn .pattern-box {
      width: 12%;
   }
   button.btn.sphere-color {
      margin: 0 8px 0 0;
   }
   li.nav-item.sidebar-category h4 {
      /* font-size: 14px !important; */
   }
   nav#sidebar {
      /* width: 44% !important; */
   }
}

/*  */

button.btn.btn-primary.btn-lg.startplay.pause i.mdi.mdi-play {
   font-size: 30px;
   vertical-align: middle;
}

button.btn.btn-primary.btn-lg.startplay.pause {
   padding: 9px 0;
}

/* button.btn.btn-secondary.btn-lg.go-back {
	padding: 14px 0 !important;
} */

button.btn.btn-secondary.btn-lg.go-back i.fa.fa-play {
   transform: rotate(-60deg);
   font-size: 20px;
}

.color_choose .btn {
   /* margin: 5px 10px !important; */
}

/* start session tool page modification css is here */

ul.objct-vsblty-mn-ul,
ul.objct-size-mn-ul,
ul.volume-mn-ul,
ul.audio-tone-mn-ul,
ul.time-mn-ul,
ul.objct-speed-mn-ul,
ul.objct-color-mn-ul {
   /* padding: 0;
   list-style-type: none;
   display: flex;
   align-items: center;
   margin: 5px 0; */
}
ul.strt-go-btn-mn-ul {
   padding: 0;
   list-style-type: none;
}
ul.audio-tone-mn-ul {
   /* margin: 0 0 5px 0; */
}
ul.objct-path-mn-ul {
   padding: 0;
   list-style-type: none;
}
li.nav-item.sidebar-category {
   /* display: inline-block;
   width: 32%;
   margin-right: 0 !important; */
}
ul.volume-mn-ul li.nav-item.sidebar-category {
   /* margin-top: 0 !important; */
}
ul.objct-path-mn-ul li.nav-item.sidebar-category {
   /* display: inline-block;
   width: 32%;
   margin-right: 0 !important; */
}
ul.objct-path-mn-ul li.rght-sd-mn-li {
   display: inline-block;
   width: 67%;
}
ul.objct-vsblty-mn-ul {
   margin: 5px 0 8px 0;
}

ul.objct-vsblty-mn-ul .btn-group.grad_group {
   margin: 0 0 0 5%;
}

ul.objct-vsblty-mn-ul button {
   width: 115px !important;
}

ul.objct-size-mn-ul li.nav-item.audio_btn {
   /* width: 60%; */
}
li.nav-item.rght-sd-mn-li {
   width: 66%;
}

ul.objct-size-mn-ul .pattern-box.tone {
   /* width: 32px;
   margin-bottom: 0;
   margin-right: 10%; */
}

.volume-mn-ul .pattern-box.tone {
   width: 32px;
   margin-bottom: 0;
   margin-right: 10%;
}
ul.objct-path-mn-ul button {
   padding: 0 !important;
   max-height: 40px;
}

ul.audio-tone-mn-ul .pattern-box.tone {
   /* width: 32px;
   margin-bottom: 0;
   margin-right: 8px; */
}

li.time-li-hdng {
   /* margin: 4px 0 0 0 !important; */
}
li.time-li-hdng h4 {
   /* margin: 0 0 3px 0; */
}
li#accessTool input.btn.btn-main.btn-bold:nth-child(2) {
   /* margin-left: 1px;
   margin-right: 1px; */
}
li#accessTool input.btn.btn-main.btn-bold {
   /* border-radius: 50px; */
}
button.btn.btn-secondary.btn-lg.save-btn {
   border-radius: 50px;
}
li.nav-item button.btn.btn-secondary.btn-lg.go-back {
   border-radius: 50px;
}
button.btn.btn-primary.btn-lg.startplay.pause {
   border-radius: 50px;
}
.pattern-box.text-center.tone:last-child {
   margin-right: 0;
}
li.nav-item.background-itm-li button:first-child {
   margin-left: 0 !important;
}
li.nav-item.blur-color-mn-li {
   margin-top: -2px !important;
}
ul.strt-go-btn-mn-ul button.go-back {
   position: relative;
   height: 48px;
   padding: 0 10% !important;
   color: #3c4876;
   font-weight: 600;
}
ul.strt-go-btn-mn-ul span.bck-icn-spn {
   position: absolute;
   top: 0;
   left: 10px;
   bottom: 0;
   display: flex;
   align-items: center;
}
ul.strt-go-btn-mn-ul button.go-back i.back-btn-fa-icon {
   z-index: 1;
   background-color: #3c4876;
   color: #dfe3e9;
   border-radius: 50%;
   height: 34px;
   width: 34px;
   padding: 8px 0 6px 4px;
   text-align: center;
}
ul.strt-go-btn-mn-ul button.go-back:hover {
   background-color: #3c4876;
   color: #dfe3e9;
   transition: 0.5s;
}
ul.strt-go-btn-mn-ul button.go-back:hover i.back-btn-fa-icon {
   background-color: #dfe3e9;
   color: #3c4876;
}

ul.strt-go-btn-mn-ul button.startplay.pause {
   position: relative;
   height: 48px;
   padding: 0 10% !important;
   font-weight: 600;
   transition: 0.5s;
}
ul.strt-go-btn-mn-ul span.start-icn-spn {
   position: absolute;
   top: 0;
   right: 10px;
   bottom: 0;
   display: flex;
   align-items: center;
}
ul.strt-go-btn-mn-ul button.startplay.pause i.mdi.mdi-play {
   z-index: 1;
   background-color: #dfe3e9;
   color: #3c4876;
   border-radius: 50%;
   height: 34px;
   width: 34px;
   padding: 3px;
   text-align: center;
}
ul.strt-go-btn-mn-ul button.startplay.pause:hover {
   background-color: #dfe3e9;
   color: #3c4876;
   transition: 0.5s;
   border-color: #dfe3e9;
}
ul.strt-go-btn-mn-ul button.startplay.pause:hover i.start-btn-fa-icon {
   background-color: #3c4876;
   color: #dfe3e9;
}

ul.objct-vsblty-mn-ul li button {
   background-image: none !important;
   /* color: #3c4876 !important;
   background-color: #dfe3e9 !important;
   box-shadow: none !important; */
   height: 32px !important;
}
/* ul.objct-vsblty-mn-ul li button.active {
   color: #dfe3e9 !important;
   background-color: #3c4876 !important;
   box-shadow: none !important;
} */
ul.nav {
   margin-bottom: 0 !important;
}

/* colors and other minor changes accroding to FIGMA DESIGN - start */
/* reset for bootstrap buttons styles */
/* .sidebar .btn-secondary:not(:disabled):not(.disabled):active,
.sidebar .btn-secondary:not(:disabled):not(.disabled).active {
   color: #3a4775;
   background: #f3dbba;
}
.sidebar .btn-secondary:not(:disabled):not(.disabled):active:focus,
.sidebar .btn-secondary:not(:disabled):not(.disabled).active:focus {
   -webkit-box-shadow: none;
   box-shadow: none;
} */
/* end */
#accessTool input.btn-main,
.sidebar-offcanvas .save-btn,
ul.objct-vsblty-mn-ul li button,
.audio_btn .pattern-box .note_text,
.tool-start-btn {
   /* font-style: normal;
   font-weight: bold;
   font-size: 15px;
   line-height: 22px;
   color: #3a4775; */
}
.audio_btn .pattern-box .note_text {
   line-height: 34px;
}
#accessTool input.btn-main,
#accessTool input.btn-main:not(.active1):hover {
   /* background: #ccdced;
   border-radius: 20px; */
}
#accessTool .btn-main.active1 {
   /* color: #3a4775;
   background: #f3dbba;
   -webkit-box-shadow: 6px 6px 15px #f3dbba80;
   box-shadow: 6px 6px 15px #f3dbba80; */
}
.sidebar-offcanvas .save-btn,
.sidebar-offcanvas .save-btn:hover,
.sidebar-offcanvas .save-btn:not(:disabled):not(.disabled):active,
.sidebar-offcanvas .save-btn:not(:disabled):not(.disabled):focus {
   border: none;
   background: #f3dbba;
   -webkit-box-shadow: 6px 6px 15px #f3dbba80;
   box-shadow: 6px 6px 15px #f3dbba80;
}
.sidebar-offcanvas .reset-btn-mdfctn,
.sidebar-offcanvas .reset-btn-mdfctn:hover,
.sidebar-offcanvas .reset-btn-mdfctn:not(:disabled):not(.disabled):active,
.sidebar-offcanvas .reset-btn-mdfctn:not(:disabled):not(.disabled):focus {
   background: #ccdced;
   -webkit-box-shadow: 6px 6px 15px #ccdced80;
   box-shadow: 6px 6px 15px #ccdced80;
}
#tool_background .btn.active {
   border: 1px solid #fff;
   -webkit-box-shadow: 0 0 0 2px #111;
   box-shadow: 0 0 0 2px #111;
}
#tool_background .btn.active:first-child {
   /* margin-left: 2px !important; */
}
#sphereColor .btn.active {
   border: 1px solid #fff !important;
   -webkit-box-shadow: 0 0 0 2px #111;
   box-shadow: 0 0 0 2px #111;
}
#sphereColor .btn.active:first-child {
   /* margin-left: 2px; */
}
ul.objct-vsblty-mn-ul li button {
   padding: 0;
   border-radius: 20px !important;
   color: #3a4775 !important;
   background-color: #ccdced !important;
   box-shadow: 6px 6px 15px rgba(30, 33, 42, 0.1) !important;
}
ul.objct-vsblty-mn-ul li button:first-child {
   margin-right: 20px;
}
ul.objct-vsblty-mn-ul li button.active {
   color: #3a4775 !important;
   background-color: #f3dbba !important;
   box-shadow: 6px 6px 15px rgba(243, 219, 186, 0.5) !important;
}

input[type="radio"].css-checkbox + label.css-label {
   /* border-radius: 5px;
   background: #ccdced;
   box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.1); */
}
input[type="radio"].css-checkbox:checked + label.css-label {
   /* background: #f3dbba;
   box-shadow: 6px 6px 15px rgba(243, 219, 186, 0.5); */
}
.audio_btn
   .pattern-box
   input[type="radio"].css-checkbox:checked
   + label.css-label:after {
   display: none;
}
.objct-path-mn-ul .btn-path,
.objct-path-mn-ul .btn-path:hover {
   /* background-color: #ccdced;
   border: none; */
}
.objct-path-mn-ul .btn-path:not(:disabled):not(.disabled).active:focus,
.objct-path-mn-ul .btn-path:not(:disabled):not(.disabled):active:focus {
   /* -webkit-box-shadow: none;
   box-shadow: none; */
}
.objct-path-mn-ul .btn-path:hover,
.objct-path-mn-ul .btn-path:not(:disabled):not(.disabled):hover,
.objct-path-mn-ul .btn-path:not(:disabled):not(.disabled):active,
.objct-path-mn-ul .btn-path:not(:disabled):not(.disabled).active {
   /* background-color: #f3dbba; */
}
ul.strt-go-btn-mn-ul button.go-back,
ul.strt-go-btn-mn-ul button.go-back:hover,
ul.strt-go-btn-mn-ul button.go-back:not(:disabled):not(.disabled):active {
   border: none;
   color: #3a4775;
   background: #ccdced;
   box-shadow: 6px 6px 15px rgba(204, 220, 237, 0.5);
}
ul.strt-go-btn-mn-ul button.startplay.pause,
ul.strt-go-btn-mn-ul button.startplay.pause:hover,
ul.strt-go-btn-mn-ul
   button.startplay.pause:not(:disabled):not(.disabled):active {
   color: #3a4775;
   background: #f3dbba;
   -webkit-box-shadow: 6px 6px 15px #f3dbba80 !important;
   box-shadow: 6px 6px 15px #f3dbba80 !important;
   border: none;
}
ul.strt-go-btn-mn-ul span.bck-icn-spn,
ul.strt-go-btn-mn-ul span.start-icn-spn {
   display: none;
}
.tool-start-btn {
   /* padding: 0;
   width: 180px;
   height: 43px;
   background: #f3dbba;
   border-radius: 20px;
   text-transform: uppercase;
    */
   border: none;
   outline: none;
   cursor: pointer;
}
.tool-start-btn,
.tool-start-btn:not(:disabled):not(.disabled):hover,
.tool-start-btn:not(:disabled):not(.disabled):active,
.tool-start-btn:not(:disabled):not(.disabled):focus {
   -webkit-box-shadow: 6px 6px 15px #f3dbba80;
   box-shadow: 6px 6px 15px #f3dbba80;
}
a.toggler:before {
   content: url("../images/exit-fullscreen-icon.png");
}
a.toggler.off::before {
   content: url("../images/enter-fullscreen-icon.png");
}
.sidebar,
.swal-modal {
   background-color: #fffcf8;
}
/* options popovers - start */
.option-title {
   width: intrinsic;
   width: -moz-max-content;
   width: -webkit-max-content;
   width: max-content;
}
.know-about-wrapper {
   position: relative;
   display: inline-block;
   width: 22px;
   height: 22px;
}
.know-about-wrapper .know-about-btn {
   display: inline-block;
   width: 20px;
   height: 20px;
   border-radius: 10px;
   background: #ccdced;
   color: #6d94bd;
   line-height: 21px;
   text-align: center;
}
.know-about-wrapper .know-about-content {
   display: none;
   position: absolute;
   top: 50%;
   left: 30px;
   width: intrinsic;
   width: -moz-max-content;
   width: -webkit-max-content;
   width: max-content;
   max-width: 170px;
   padding: 10px 12px;
   border-radius: 6px;
   z-index: 3;
   background: #ccdced;
   font-size: 12px;
   font-weight: 300;
   text-transform: initial;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   -webkit-box-shadow: 3px 6px 15px #00000024;
   -moz-box-shadow: 3px 6px 15px #00000024;
   box-shadow: 3px 6px 15px #00000024;
   /* transition: 0.2s;
   animation-name: fadeIn;
   animation-duration: 0.2s;
   animation-delay: 0.08s; */
}
.know-about-wrapper:hover .know-about-content {
   display: block;
}
.know-about-wrapper .know-about-content::before {
   content: "";
   position: absolute;
   border: 6px solid;
   border-width: 6px 10px;
   border-color: transparent #ccdced transparent transparent;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   left: -19px;
   /* box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.1); */
}
@keyframes fadeIn {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}
/* options popovers - end */
/* overrides for ui slider */
#range_02,
#range_05 {
   /* margin-bottom: 15px; */
}
.irs-bar,
.irs-bar-edge,
.irs-line-left,
.irs-line-mid,
.irs-line-right,
.irs-slider {
   background: none;
}
.irs-line {
   height: 10px;
   border-radius: 5px;
   background: #ededed;
}
.irs-slider {
   top: 11px;
   width: 37px;
   height: 37px;
   -webkit-border-radius: 20px;
   border-radius: 20px;
   border: 4px solid #f3dbba;
   background: linear-gradient(313.96deg, #ffffff 33.12%, #e1e1e1 88.45%);
   box-shadow: 6px 6px 15px rgba(243, 219, 186, 0.5);
}
.irs-slider.state_hover,
.irs-slider:hover {
   background-position: initial;
}
.irs-max,
.irs-min {
   top: 45px;
}
.irs-from:after,
.irs-single:after,
.irs-to:after {
   display: none;
}
.irs-from,
.irs-to,
.irs-single {
   top: 21px;
   background: transparent;
   color: #3a4775;
   z-index: 2;
   font-weight: bold;
}
@media (min-width: 930px) {
   .know-about-wrapper .know-about-content {
      max-width: 190px;
   }
}
@media (min-width: 992px) {
   .know-about-wrapper .know-about-content {
      max-width: 180px;
   }
}
@media (min-width: 1026px) {
   .know-about-wrapper .know-about-content {
      max-width: 195px;
   }
}
@media (min-width: 1200px) {
   .know-about-wrapper .know-about-content {
      max-width: 300px;
   }
}
/* colors and other minor changes accroding to FIGMA DESIGN - end */

/* start responsive */

@media (max-width: 1439px) and (min-width: 1300px) {
   li.background-itm-mn-li {
      /* margin-top: 12px !important; */
   }
   ul.strt-go-btn-mn-ul li.nav-item {
      /* margin-top: 0 !important; */
   }
   ul.strt-go-btn-mn-ul {
      /* margin: 2% 0 10px 0; */
   }
}

@media screen and (min-width: 1400px) {
   ul.audio-tone-mn-ul .pattern-box.tone {
      /* margin-right: 3%; */
   }
   ul.strt-go-btn-mn-ul li.nav-item {
      margin-top: 0 !important;
   }
   ul.strt-go-btn-mn-ul {
      margin: 3% 0 10px 0;
   }
   .volume-mn-ul .pattern-box.tone {
      margin-right: 13%;
   }
   ul.objct-size-mn-ul .pattern-box.tone {
      /* margin-right: 13%; */
   }
   li#accessTool input.btn.btn-main.btn-bold {
      /* width: 30% !important;
      text-align: center;
      padding: 12px 0 !important; */
   }
   li#accessTool input.btn.btn-main.btn-bold:nth-child(2) {
      /* margin-left: 3.8%;
      margin-right: 3.8%; */
   }
}

@media screen and (min-width: 1500px) {
   nav#sidebar {
      /* width: 38% !important; */
   }
   li#accessTool {
      /* margin-top: 8px; */
   }
   ul.objct-vsblty-mn-ul,
   ul.objct-size-mn-ul,
   ul.volume-mn-ul,
   ul.audio-tone-mn-ul,
   ul.time-mn-ul,
   ul.objct-speed-mn-ul,
   ul.objct-color-mn-ul {
      /* margin: 1% 0; */
   }
   li.background-itm-mn-li {
      /* margin-top: 3% !important; */
   }
   ul.objct-path-mn-ul {
      /* margin: 3% 0; */
   }
   li.nav-item.sidebar-category {
      /* width: 37%; */
   }
   ul.objct-vsblty-mn-ul .btn-group.grad_group {
      margin: 0;
   }
   ul.objct-path-mn-ul li.rght-sd-mn-li {
      width: 63%;
   }
   ul.objct-path-mn-ul li.nav-item.sidebar-category {
      /* width: 36%; */
   }
}

@media screen and (min-width: 1600px) {
   .sidebar-offcanvas .save-btn {
      margin-top: 10px;
   }
}

@media screen and (min-width: 1650px) {
   nav#sidebar {
      /* width: 36% !important; */
   }
   li.nav-item.sidebar-category {
      /* width: 34%; */
   }
   ul.objct-path-mn-ul li.rght-sd-mn-li {
      width: 65%;
   }
   ul.objct-path-mn-ul li.nav-item.sidebar-category {
      /* width: 34%; */
   }
   li.background-itm-mn-li {
      /* margin-top: 3% !important; */
   }
}

@media (max-width: 1685px) and (min-width: 1675px) {
   ul.objct-vsblty-mn-ul,
   ul.objct-size-mn-ul,
   ul.volume-mn-ul,
   ul.audio-tone-mn-ul,
   ul.time-mn-ul,
   ul.objct-speed-mn-ul,
   ul.objct-color-mn-ul {
      /* margin: 3% 0; */
   }
   li.background-itm-mn-li {
      /* margin-top: 3% !important; */
   }
   ul.objct-path-mn-ul {
      /* margin: 3% 0; */
   }
}

@media screen and (min-width: 1676px) {
   ul.objct-vsblty-mn-ul,
   ul.objct-size-mn-ul,
   ul.volume-mn-ul,
   ul.audio-tone-mn-ul,
   ul.time-mn-ul,
   ul.objct-speed-mn-ul,
   ul.objct-color-mn-ul {
      /* margin: 3% 0; */
   }
   li.background-itm-mn-li {
      /* margin-top: 3% !important; */
   }
   ul.objct-path-mn-ul {
      /* margin: 3% 0; */
   }
   ul.objct-size-mn-ul {
      /* margin: 2% 0 4% 0; */
   }
   ul.objct-vsblty-mn-ul {
      /* margin: 2% 0 4% 0; */
   }
}

@media screen and (min-width: 1750px) {
   nav#sidebar {
      /* width: 32% !important; */
   }
   li.nav-item.sidebar-category {
      /* width: 36%; */
   }
}

@media screen and (min-width: 1900px) {
   ul.objct-vsblty-mn-ul,
   ul.objct-size-mn-ul,
   ul.volume-mn-ul,
   ul.audio-tone-mn-ul,
   ul.time-mn-ul,
   ul.objct-speed-mn-ul,
   ul.objct-color-mn-ul {
      /* margin: 4% 0; */
   }
   li.background-itm-mn-li {
      /* margin-top: 4% !important; */
   }
   ul.objct-path-mn-ul {
      /* margin: 4% 0 3% 0; */
   }
   ul.objct-size-mn-ul {
      /* margin: 4% 0 5% 0; */
   }
   ul.objct-vsblty-mn-ul {
      /* margin: 3% 0 3% 0; */
   }
}

@media screen and (max-width: 1280px) {
   li.nav-item.sidebar-category {
      /* width: 35%; */
   }
   ul.audio-tone-mn-ul .pattern-box.tone {
      /* width: 29px;
      margin-right: 7px; */
   }
   .volume-mn-ul .pattern-box.tone {
      width: 29px;
      margin-right: 7px;
   }
   ul.objct-size-mn-ul .pattern-box.tone {
      /* width: 29px;
      margin-right: 7px; */
   }
}

@media screen and (max-width: 1199px) {
   ul.objct-vsblty-mn-ul,
   ul.objct-size-mn-ul,
   ul.volume-mn-ul,
   ul.audio-tone-mn-ul,
   ul.time-mn-ul,
   ul.objct-speed-mn-ul,
   ul.objct-color-mn-ul {
      /* display: block; */
   }
   li.nav-item.sidebar-category {
      /* width: 100%;
      margin: 5px 0 !important; */
   }
   ul.objct-path-mn-ul li.nav-item.sidebar-category {
      /* width: 100%; */
   }
   ul.objct-size-mn-ul li.nav-item.audio_btn {
      /* width: 100%; */
   }
   li.nav-item.blur-color-mn-li {
      margin-top: 0 !important;
   }
   ul.objct-vsblty-mn-ul .btn-group.grad_group {
      margin: 0;
   }
   ul.strt-go-btn-mn-ul {
      margin-bottom: 10px;
   }
   li.nav-item.rght-sd-mn-li {
      width: 100%;
   }
}

@media screen and (max-width: 991px) {
   ul.audio-tone-mn-ul .pattern-box.tone {
      /* width: 26px;
      margin-right: 5px; */
   }
   .volume-mn-ul .pattern-box.tone {
      width: 26px;
      margin-right: 5px;
   }
   ul.objct-size-mn-ul .pattern-box.tone {
      /* width: 26px;
      margin-right: 5px; */
   }
}