@font-face {
     font-family: Roboto-Regular;
     src: url(../fonts/Roboto-Regular.ttf);
}
 @font-face {
     font-family: Raleway-Regular;
     src: url(../fonts/Raleway-Regular.ttf);
}
 body {
     font-family: Roboto-Regular;
     background-color: var(--main-bg-color) !important;
     background-position: 50%, 50%;
     overflow-x: hidden;
}
 .loaderbody {
     width: 100%;
     position: fixed;
     z-index: 99999999999 !important;
     background-color: #ffffff87;
     height: 100%;
     top: 0;
     background: var(--panel-heading-bg);
     opacity: 0.8;
}
 .load-wrapp {
     margin: 13% auto;
     padding: 20px 20px 20px;
     position: relative;
}
 .spinner {
     margin: 100px auto;
     width: 50px;
     height: 40px;
     text-align: center;
     font-size: 10px;
}
 .spinner > div {
     background-color:var(--root);
     margin-right: 2px;
     height: 100%;
     width: 6px;
     display: inline-block;
     -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
     -moz-animation: sk-stretchdelay 1.2s infinite ease-in-out;
     -ms-animation:sk-stretchdelay 1.2s infinite ease-in-out;
     -o-animation:sk-stretchdelay 1.2s infinite ease-in-out;
     animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
 .spinner .rect2 {
     -webkit-animation-delay: -1.1s;
     -moz-animation-delay: -1.1s;
     -ms-animation-delay: -1.1s;
     -o-animation-delay: -1.1s;
     animation-delay: -1.1s;
}
 .spinner .rect3 {
     -webkit-animation-delay: -1.0s;
     -moz-animation-delay: -1.0s;
     -ms-animation-delay: -1.0s;
     -o-animation-delay: -1.0s;
     animation-delay: -1.0s;
}
 .spinner .rect4 {
     -webkit-animation-delay: -0.9s;
     -moz-animation-delay: -0.9s;
     -ms-animation-delay: -0.9s;
     -o-animation-delay: -0.9s;
     animation-delay: -0.9s;
}
 .spinner .rect5 {
     -webkit-animation-delay: -0.8s;
     -moz-animation-delay: -0.8s;
     -ms-animation-delay: -0.8s;
     -o-animation-delay: -0.8s;
     animation-delay: -0.8s;
}
 @-webkit-keyframes sk-stretchdelay {
     0%, 40%, 100% {
         -webkit-transform: scaleY(0.4) -moz-transform: scaleY(0.4) -ms-transform: scaleY(0.4) -o-transform: scaleY(0.4) transform: scaleY(0.4) 
    }
     20% {
         -webkit-transform: scaleY(1.0) -moz-transform: scaleY(1.0) -ms-transform: scaleY(1.0) -o-transform: scaleY(1.0) transform: scaleY(1.0) 
    }
}
 @keyframes sk-stretchdelay {
     0%, 40%, 100% {
         -webkit-transform: scaleY(0.4);
         -moz-transform: scaleY(0.4);
         -ms-transform: scaleY(0.4);
         -o-transform: scaleY(0.4);
         transform: scaleY(0.4);
    }
     20% {
         -webkit-transform: scaleY(1.0);
         -moz-transform: scaleY(1.0);
         -ms-transform: scaleY(1.0);
         -o-transform: scaleY(1.0);
         transform: scaleY(1.0);
    }
}
 .navbar-brand img {
     width: 100%;
     max-width: 58px;
     margin-right: 10px;
     outline-style: none;
     outline: none;
}
 .navbar-brand {
     display: block;
     padding: 7px 7px;
     margin-left: 0px !important;
     height: 70px;
}
 .navbar-inverse {
     background-color: var(--main-bg-color);
     border: 0px;
}
 .margin-70 {
     margin-top: 70px;
     margin-bottom: 30px;
}
 .login-module {
     position: relative;
     background-color: var(--main-bg-color);
     max-width: 450px;
     width: 100%;
     border-top: 5px solid var(--root);
     -webkit-box-shadow: 0 0 3px rgba(255, 255, 255, 0.49);
     box-shadow: 0 0 3px rgba(255, 255, 255, 0.49);
     padding: 15px 25px;
     left: 0;
     border-radius: 4px;
     right: 0;
     margin: auto;
     top: 10%;
     z-index: 2;
     margin-bottom: 10px;
}
 .login-module .form {
     margin: 5px 0px;
}
 .title-ARO {
     font-family: Roboto-Regular;
     font-size: 25px;
     margin-bottom: 25px;
     color: var(--title-ARO);
}
 .btn-ARO {
     border-radius: 0px;
     background-color: #70349d;
     background: #70349d;
     border: 0px;
     font-family: sans-serif;
     font-size: 17px;
     font-weight: 500;
     border-radius: 4px;
     transition: 0.5s;
     outline: none;
}
 .btn-ARO:hover {
     border-radius: 0px;
     background-color: #70349d;
     background: #70349d;
     border: 0px;
     color: #000;
     font-family: sans-serif;
     font-size: 17px;
     font-weight: 500;
     border-radius: 4px;
     outline: none;
     box-shadow: none;
}
 .btn-ARO:focus {
     border-radius: 0px;
     background-color: #70349d;
     background: #70349d;
     border: 0px;
     color: #000;
     font-family: sans-serif;
     font-size: 17px;
     font-weight: 500;
     border-radius: 4px;
     outline: none;
     box-shadow: none;
}
 .text-ARO:focus {
     outline: none;
     border-color: var(--text-aro-focus);
     -webkit-box-shadow: none;
     box-shadow: none;
     background-color: transparent;
}
 .random-image-ARO {
     width: 100%;
     position: relative;
     z-index: -1;
}
 .random-image-ARO-ul {
     list-style: none;
     padding: 15px;
     width: 100%;
     display: block;
     overflow: hidden;
}
 .random-image-ARO-ul li {
     list-style-type: none;
     padding: 20px;
     border-radius: 50%;
     opacity: 0.4;
     z-index: 1;
}
 .random-image-ARO-ul li img {
     border-radius: 50%;
}
 .random-image-ARO-ul li:nth-child(1) {
     background: #70349d;
     position: absolute;
     right: 30px !important;
     top: 200px;
     animation: 8s ARO-animation-1 infinite;
     animation-delay: 1s;
}
 .random-image-ARO-ul li:nth-child(2) {
     background: #fb005b;
     position: absolute;
     left: 410px !important;
     top: 465px;
     animation: 8s ARO-animation-2 infinite;
     animation-delay: 4s;
}
 .random-image-ARO-ul li:nth-child(3) {
     background: #fb8100;
     animation-delay: 1s;
     position: absolute;
     left: 100px !important;
     top: 100px;
     animation: 8s ARO-animation-3 infinite;
     animation-delay: 3s;
}
 .random-image-ARO-ul li:nth-child(4) {
     background: #70349d;
     position: absolute;
     left: 450px !important;
     top: 170px;
     animation: 8s ARO-animation-3 infinite;
     animation-delay: 8s;
}
 .random-image-ARO-ul li:nth-child(5) {
     background: #fb005b;
     position: absolute;
     right: 150px !important;
     top: 700px;
     animation: 8s ARO-animation-2 infinite;
     animation-delay: 8s;
}
 .random-image-ARO-ul li:nth-child(6) {
     background: #fb005b;
     position: absolute;
     right: 460px !important;
     top: 150px;
     animation: 8s ARO-animation-3 infinite;
     animation-delay: 6s;
}
 .random-image-ARO-ul li:nth-child(7) {
     background: #70349d;
     position: absolute;
     left: 1160px !important;
     top: 650px;
     animation: 8s ARO-animation-1 infinite;
     animation-delay: 3s;
}
 .random-image-ARO-ul li:nth-child(8) {
     background: #fb8100;
     position: absolute;
     right: 180px !important;
     top: 450px;
     animation: 8s ARO-animation-2 infinite;
     animation-delay: 16s;
}
 .random-image-ARO-ul li:nth-child(9) {
     background: #009688;
     animation-delay: 1s;
     position: absolute;
     left: 650px !important;
     top: 700px;
     animation: 8s ARO-animation-3 infinite;
     animation-delay: 9s;
}
 .random-image-ARO-ul li:nth-child(10) {
     background: #009688;
     animation-delay: 1s;
     position: absolute;
     right: 465px !important;
     top: 375px;
     animation: 8s ARO-animation-2 infinite;
     animation-delay: 3s;
}
 .random-image-ARO-ul li:nth-child(11) {
     background: #009688;
     animation-delay: 1s;
     position: absolute;
     left: 185px !important;
     top: 350px;
     animation: 8s ARO-animation-2 infinite;
     animation-delay: 1s;
}
 .random-image-ARO-ul li:nth-child(12) {
     background: #009688;
     animation-delay: 1s;
     position: absolute;
     left: 150px !important;
     top: 700px;
     animation: 9s ARO-animation-3 infinite;
     animation-delay: 3s;
}
 @keyframes ARO-animation-1 {
     0% {
         transform: scale(0);
    }
     40% {
         transform: scale(1.1);
    }
     75% {
         transform: scale(1);
    }
}
 @keyframes ARO-animation-2 {
     0% {
         transform: scale(1.3);
    }
     40% {
         transform: scale(0.6);
    }
     75% {
         transform: scale(1.1);
    }
}
 @keyframes ARO-animation-3 {
     0% {
         transform: scale(0);
    }
     40% {
         transform: scale(1.2);
    }
     75% {
         transform: scale(1);
    }
}
 .copyright-ARO {
     color: var(--copy);
     font-color: #3c3c3c;
     margin-bottom: 5px;
}
 .copyright-ARO-img {
     max-width: 130px;
}
 .ARO_Background {
     position: absolute;
     height: 100%;
     width: 100%;
     overflow: hidden;
     top: 0;
     z-index: -1;
}
 .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
     color: var(--root);
     background-color: transparent;
}
 .navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover {
     color: var(--root);
     background-color: transparent;
}
 .navbar-inverse .navbar-nav>li>a {
     font-size: 15px;
     color: var(--a-color);
     display: inline-block;
     cursor: pointer;
}
 .nav>li>a {
     padding: 10px 3px;
}
 .menu-caret {
     cursor: pointer;
     display: inline-block;
     width: 0;
     height: 0;
     margin-left: 2px;
     vertical-align: middle;
     border-top: 6px dashed;
     border-right: 6px solid transparent;
     border-left: 6px solid transparent;
}
 .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover {
     color: var(--root);
     background-color: transparent;
}
 .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
     color: #ffffff;
     text-decoration: none;
     background-color: #656565;
}
 .navbar-inverse .navbar-toggle .icon-bar {
     background-color: var(--root);
     ;
}
 .navbar-toggle {
     margin-top: 18px;
}
 .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
     background-color: #fff;
}
 .navbar-inverse .navbar-toggle {
     border: none;
}
 .panel-primary {
     border-color: #f6a821;
     margin-top: 5px;
}
 .margin-10-top label {
     color: #d4d4d4;
}
 .panel-primary>.panel-heading {
     color: var(--a-color);
     background-color: var(--panel-heading-bg);
     border-radius: 4px;
     border: 0px;
}
 .panel-body {
     padding: 0px 0px;
}
 .ARO_tool_ul {
     padding: 0px;
     margin: 0px;
     position: relative;
     height: 190px;
     overflow-y: auto !important;
     overflow-x: hidden !important;
}
 .ARO_tool_ul li {
     list-style-type: none;
     display: block;
     padding: 0px 5px;
     border-bottom: 1px solid #ddd;
     cursor: pointer;
     transition: 0.5s;
}
 .ARO_tool_ul li:hover {
     border-bottom: 1px solid var(--root);
}
 .ARO_tool_ul li a {
     text-decoration: none;
     color: var(--a-color);
     width: 100%;
     display: block;
     transition: 0.4s;
     padding: 5px 0px;
}
 .ARO_tool_ul li a:hover {
     text-decoration: none;
     color: var(--root);
     width: 100%;
     display: block;
     transform: scale(1.1);
     transform-origin: left;
}
 .breadcrumb_ARO {
     background-color: var(--breadcrumb-ARO-bg);
     margin-bottom: 5px;
}
 .breadcrumb_ARO h4 i {
     color: var(--breadcrumb-ARO-icon);
}
 .breadcrumb_ARO h4 {
     color: var(--breadcrumb-ARO-title);
}
 .nav>li>a:focus, .nav>li>a:hover {
     text-decoration: none;
     background-color: transparent;
     color: var(--a-color);
}
 .nav-tabs>li>a:hover {
     border-color: var(--root) var(--root) var(--root);
}
 .ARO_stats_title {
     padding: 10px;
     border: 1px solid #8e8e8e;
     margin-top: 5px;
     border-radius: 6px;
}
 .ARO_stats:nth-child(odd) {
     padding-right: 5px;
}
 .ARO_stats:nth-child(even) {
     padding-left: 5px;
}
 table.dataTable>tbody>tr.child ul.dtr-details {
     display: inline-block;
     list-style-type: none;
     margin: 0;
     padding: 0;
     width: 100%;
}
 .checkbox-inline+.checkbox-inline, .radio-inline+.radio-inline {
     margin-top: 0;
     margin-left: 0px;
}
 .red {
     color: var(--alert-color) !important;
     font-size: 12px;
}
 .band_ARO>li.active>a, .band_ARO>li.active>a:focus, .band_ARO>li.active>a:hover {
     color: var(--root);
     cursor: default;
     background-color: var(--main-bg-color);
     border: 1px solid var(--nav-tabs-border);
     border-bottom-color: transparent;
}
 .band_ARO>li a {
     color: var(--a-color);
}
 .p_channel {
     margin: 6px 0 10px;
     color: var(--root) !important;
}
 .margin-10-top {
     margin-top: 10px;
}
 .days_border {
     border: 1px solid var(--root);
     border-radius: 4px;
     padding: 5px 10px;
     position: relative;
}
 th {
     font-size: 14px;
     font-weight: 500;
}
 td {
     font-size: 12px;
}
 .modal-delete-dialog {
     max-width: 350px;
}
 .ui-dialog {
     z-index: 99999999999999999 !important;
}
 .ui-widget-header {
     border: 0px;
     background-color: var(--panel-heading-bg);
     color: #333333;
     font-weight: bold;
     cursor: pointer;
}
 .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
     border: 0px solid #000 !important;
     background: var(--root) !important;
     font-weight: normal;
     color: #ffffff !important;
     cursor: pointer;
}
 .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button {
     border: 0px;
     background: none;
     font-weight: normal;
     color: #454545;
     cursor: pointer;
}
 .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
     background: #9e9e9e !important;
     color: #000000 !important;
     border: 0px solid #000 !important;
     cursor: pointer;
}
 .panel-body {
     margin-top: 10px;
     padding: 10px;
}
 .clockpicker-span-hours , .clockpicker-span-minutes {
     color: var(--root);
}
 .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
     padding: 5px 8px;
}
 .ui-datepicker {
     z-index: 55 !important;
}
 .ui-datepicker .ui-datepicker-title select {
     font-size: 1em;
     margin: 1px 0;
     background: white;
     border-radius: 0px;
}
 .ui-datepicker-month {
     margin-right: 10px !important;
}
 .Ul_ARO_Action {
     margin: 0px;
     padding: 0px;
}
 .Ul_ARO_Action li {
     list-style-type: none;
     list-style: none;
     display: inline-block;
     margin-right: 5px;
     margin-bottom: 1px;
}
 .w-100 {
     width: 100% !important;
     background: #ffffff00;
     border: 1px solid #868686;
     color: var(--tr-color);
     height: 25px !important;
}
 .not-active {
     pointer-events: none;
     cursor: default;
     text-decoration: none;
     color: gray;
}
 .not-active .fas,.fa {
     pointer-events: none;
     cursor: default;
     text-decoration: none;
     color: gray;
}
 .modal-notes {
     padding-left: 10px;
}
 .modal-notes li {
     color: var(--tr-color);
}
 .modal-notes li small {
     color: var(--tr-color);
}
 .createuser_UM {
     color: #333;
     text-decoration: none;
     font-family: sans-serif;
     outline: none;
}
 .createuser_UM:hover {
     color: #333;
     text-decoration: none;
     font-family: sans-serif;
     outline: none;
}
 .createuser_UM:focus {
     color: #333;
     text-decoration: none;
     font-family: sans-serif;
     outline: none;
}
 .m-10 {
     margin-bottom: 10px;
}
 .p-12 {
     padding: 12px 10px;
}
 .action_fpc_icon {
     display: inline-flex;
}
 .collapse-a {
     width: 100%;
     display: block;
     text-decoration: none;
     outline: none;
     padding: 10px 15px 10px 200px;
     color: var(--proposal-a-color) !important;
}
 .collapse-a:hover {
     text-decoration: none;
     outline: none;
}
 .collapse-a:focus {
     text-decoration: none;
     outline: none;
}
 .span-counts {
     position: absolute;
     left: 50px;
     top: 10px;
     color: var(--root);
     width: 100px;
     text-align: right;
}
 .salesfpc-d-title {
     position: relative;
}
 .salesfpc-d-title > a[aria-expanded="true"] {
     color: var(--root) !important;
     background-color: transparent;
     border-bottom: 1px solid var(--root);
}
 .salesfpc-d-title > a[aria-expanded="true"]::after {
     content: "\2212";
     -webkit-transform: rotate(180deg);
     transform: rotate(180deg);
     position: absolute;
     left: 8px;
     font-weight: bold;
     color: var(--copy);
}
 .salesfpc-d-title > a[aria-expanded="false"]::after {
     content: "\002b";
     -webkit-transform: rotate(90deg);
     transform: rotate(90deg);
     position: absolute;
     left: 8px;
     font-weight: bold;
     color: var(--root);
}
 .p-heading {
     padding: 0px;
}
 ul.height_150 {
     max-height: 150px !important;
     cursor: pointer;
}
 .note-ul {
     padding: 0px 0px 0px 15px;
}
 .proposaltype {
     position: relative;
     background: #ffffff;
     max-width: 320px;
     width: 100%;
     border-top: 5px solid #70349d;
     -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.22);
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.22);
     margin: 1% auto;
}
 .proposal-a {
     width: 100%;
     display: block;
     text-decoration: none !important;
     outline: none !important;
     padding: 10px 15px 10px 45px;
     color: var(--proposal-a-color) !important;
}
 .fixedchannel {
     position: fixed;
     top: 20%;
     left: -70px;
     transition: 0.5s;
     display: block;
     z-index: 3;
     border: 1px solid #333;
     background-color: #fff;
     padding: 5px;
}
 .active-fixedchannel {
     left: 0px;
}
 .channel-icon-ul {
     list-style-type: none;
     list-style: none;
     padding: 10px 1px 1px 5px;
}
 .channel-icon-ul li {
     list-style-type: none;
     display: block;
     margin: 25px 25px 25px 10px;
}
 .channel-icon-ul li a img {
     width: 50px;
     height: 50px;
     border-radius: 50%;
}
 .leftbtn {
     position: absolute;
     font-size: 20px;
     cursor: pointer;
     right: -42px;
     border: 1px solid #333;
     background-color: white;
     padding: 10px;
     border-radius: 3px;
}
 .green {
     color: green;
}
 .yellow {
     color: yellow;
}
 .ui-slider-handle {
     border: 1px solid #c5c5c5 !important;
     background: #f6f6f6 !important;
     font-weight: normal !important;
     color: #454545 !important;
}
 .ui-slider-range .range-label {
     top: -25px !important;
}
 .default {
     background-color: var(--main-bg-light) !important;
     border-right: 1px solid var(--root) !important;
}
 .noUi-horizontal {
     height: 7px !important;
}
 .noUi-horizontal .noUi-handle {
     width: 17px !important;
     height: 17px !important;
     border-radius: 50%;
     left: -17px;
     top: -6px !important;
     outline: none;
}
 .noUi-handle:before, .noUi-handle:after {
     display: none !important;
}
 #slider-date {
     margin-top: 5px;
}
 .noUi-connect {
     background: #c7c7c7 !important;
}
 .noUi-tooltip {
     display: block;
     color: #333;
     z-index: 999999;
}
 .noUi-active .noUi-tooltip {
     display: block;
     color: #333;
     z-index: 999999;
}
 html:not([dir="rtl"]) .noUi-horizontal .noUi-handle {
     right: -8px !important;
     left: auto;
}
 .dial-btn {
     border-radius: 40px;
     border: none;
     z-index: 1111;
     position: absolute;
     top: 0;
     left: 0;
     height:61px;
     width:61px;
     margin: auto;
}
 .dial-btn.active{
     background-color: var(--root);
     box-shadow: 0px 1px 7px 3px var(--root);
     transition: 1s all ease;
     -ms-animation: ActiveChannel 0.5s ease;
     animation: ActiveChannel 0.5s ease;
}
 @keyframes ActiveChannel {
     from {
         transform: scale(0);
    }
     to {
         transform:scale(1.2);
    }
}
 @-webkit-keyframes ActiveChannel{
     from {
         transform:scale(0);
    }
     to {
         transform:scale(1.2);
    }
}
 .dial-btn--option {
     position: absolute;
     height: 30px;
     width: 30px;
     border-radius: 30px;
     top: 50%;
     left: 50%;
     margin-left: -15px;
     margin-top: -15px;
     -webkit-transform: translate(0, 0);
     transform: translate(0, 0);
     transition: -webkit-transform 0.25s ease 0s;
     transition: transform 0.25s ease 0s;
     transition: transform 0.25s ease 0s, -webkit-transform 0.25s ease 0s;
}
 .dial-btn--option:nth-of-type(2) {
     z-index: 2;
     transition-delay: 0.2s;
}
 .dial-btn--option:nth-of-type(3) {
     z-index: 3;
     transition-delay: 0.3s;
}
 .dial-btn--option:nth-of-type(4) {
     z-index: 4;
     transition-delay: 0.4s;
}
 .dial-btn--option:nth-of-type(5) {
     z-index: 5;
     transition-delay: 0.5s;
}
 .dial-btn--option:nth-of-type(6) {
     z-index: 6;
     transition-delay: 0.6s;
}
 .dial-btn__container {
     display: inline-block;
     position: relative;
     height: 63px;
     width: 63px;
     border-radius: 50px;
}
 .dial-btn__container--right-half[data-options='1'] .dial-btn--active ~ .dial-btn--option:nth-of-type(1) {
     -webkit-transform: translate(0px, -55px);
     transform: translate(0px, -55px);
}
 .dial-btn__container--right-half[data-options='1'] .dial-btn--active ~ .dial-btn--option:nth-of-type(2) {
     -webkit-transform: translate(-41px, -41px);
     transform: translate(-41px, -41px);
}
 .dial-btn__container--right-half[data-options='1'] .dial-btn--active ~ .dial-btn--option:nth-of-type(3) {
     -webkit-transform: translate(-55px, 0px);
     transform: translate(-55px,0px);
}
 .dial-btn__container--right-half[data-options='5'] .dial-btn--active ~ .dial-btn--option:nth-of-type(1) {
     -webkit-transform: translate(0px, -55px);
     transform: translate(0px, -55px);
}
 .dial-btn__container--right-half[data-options='5'] .dial-btn--active ~ .dial-btn--option:nth-of-type(2) {
     -webkit-transform: translate(41.819805145px, -41.819805145px);
     transform: translate(41.819805145px, -41.819805145px);
}
 .dial-btn__container--right-half[data-options='5'] .dial-btn--active ~ .dial-btn--option:nth-of-type(3) {
     -webkit-transform: translate(55px, 0px);
     transform: translate(55px, 0px);
}
 .dial-btn__container--right-half[data-options='5'] .dial-btn--active ~ .dial-btn--option:nth-of-type(4) {
     -webkit-transform: translate(41.819805145px, 41.819805145px);
     transform: translate(41.819805145px, 41.819805145px);
}
 .dial-btn__container--right-half[data-options='5'] .dial-btn--active ~ .dial-btn--option:nth-of-type(5) {
     -webkit-transform: translate(0px, 55px);
     transform: translate(0px, 55px);
}
 .fixedfooterbtn {
     height: 40px !important;
     width: 40px !important;
}
 .loading-bay:before {
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     color: #fff;
     font-size: 18px;
     padding: 5px;
}
 .dial-btn {
     outline: 0;
     cursor: pointer;
}
 .dial-btn:not(.dial-btn--option) {
     color: #fafafa;
}
 .dial-btn i {
     font-size: 24px;
     transition: -webkit-transform 0.25s ease 0s;
     transition: transform 0.25s ease 0s;
     transition: transform 0.25s ease 0s, -webkit-transform 0.25s ease 0s;
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
     position: absolute;
     top: 50%;
     left: 50%;
     margin-left: -12px;
     margin-top: -12px;
}
 .dial-btn--active i {
     -webkit-transform: rotate(45deg);
     transform: rotate(45deg);
}
 .dial-btn--option {
     font-size: 18px;
     font-weight: normal;
}
 .dial-btn--option i {
     font-size: 18px;
     line-height: 18px;
     margin-left: -9px;
     margin-top: -9px;
     opacity: 1 !important;
}
 .dial-btn--option i {
     color: #000 !important;
}
 @-webkit-keyframes fadeIn {
     from {
         opacity: 0;
    }
     to {
         opacity: 1;
    }
}
 @keyframes fadeIn {
     from {
         opacity: 0;
    }
     to {
         opacity: 1;
    }
}
 .loading-bay--right-half {
     position: absolute;
     left: 40px;
}
 .loading-bay--right-half:nth-of-type(1) {
     margin-top: 100px;
}
 .loading-bay--right-half:nth-of-type(2) {
     margin-top: 250px;
}
 .loading-bay--right-half:nth-of-type(3) {
     margin-top: 400px;
}
 .loading-bay--right-half:nth-of-type(4) {
     margin-top: 550px;
}
 .loading-bay--right-half:nth-of-type(5) {
     margin-top: 700px;
}
 .loading-bay--right-half:nth-of-type(6) {
     margin-top: 850px;
}
 .loading-bay--right-half:nth-of-type(7) {
     margin-top: 1000px;
}
 .loading-bay--right-half:nth-of-type(8) {
     margin-top: 1150px;
}
 .loading-bay--right-half:nth-last-child(1) {
     margin-bottom: 90px;
}
 .result-btn {
     font-size: 18px;
     margin-top: 10px;
     cursor: pointer;
}
 .overlay {
     height: 0%;
     width: 100%;
     position: fixed;
     z-index: 150;
     top: 70px;
     left: 0;
     background-color: var(--main-bg-color);
     overflow-y: hidden;
     transition: 0.5s;
}
 .overlay.active-menu {
     height: 100%;
     overflow-y: scroll !important;
}
 .overlay-content {
     position: relative;
     width: 100%;
     text-align: center;
     margin-top: 15px;
     padding-bottom: 200px;
}
 .dropdown-menu.open {
     border-radius: 0px !important;
}
 .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
     color: #fff;
     text-decoration: none;
     background-color: var(--root);
     outline: 0;
}
 .alpha-btn {
     padding: 0px 5px !important;
     font-size: 13px;
     line-height: 1.5;
     border-radius: 3px;
     width: 25px;
     background-color: transparent;
     color: var(--a-color);
     margin: 0px 2px;
     border-color: var(--panel-border);
}
 .alpha-btn-active {
     box-shadow: none;
     opacity: 1;
     background-color: var(--alert-color) !important;
     color: #fff;
}
 .alpha-btn-never-use {
     box-shadow: none;
     opacity: 1;
     background-color: var(--alert-warning-bg) !important;
     color: #fff;
}
 .alpha-btn[disabled], fieldset[disabled],.alpha-btn[disabled]:focus .alpha-btn[disabled]:hover {
     cursor: not-allowed;
     filter: alpha(opacity=100);
     -webkit-box-shadow: none;
     box-shadow: none;
     opacity: 1;
     background-color: transparent !important;
     color: #545454;
     pointer-events: none;
}
 .alpha-btn-active.disabled, .alpha-btn-active[disabled], fieldset[disabled] .alpha-btn-active {
     cursor: not-allowed;
     filter: alpha(opacity=100);
     -webkit-box-shadow: none;
     box-shadow: none;
     opacity: 1;
     background-color: var(--alert-color);
     color: #fff;
}
 .alpha-btn-active.disabled, .alpha-btn-active[disabled], fieldset[disabled],.alpha-btn-active:focus .alpha-btn-active:hover {
     cursor: not-allowed;
     filter: alpha(opacity=100);
     -webkit-box-shadow: none;
     box-shadow: none;
     opacity: 1;
     background-color: var(--alert-color) !important;
}
 .hr-color {
     border-color: var(--main-bg-color);
}
 .ul-td {
     list-style: none;
     padding: 0px;
     width: auto;
     text-align: center;
     margin: auto;
}
 .ul-td li {
     display: inline-block;
}
 .new-hr {
     margin: 6px 0px !important;
}
 .a_opt {
     background-color: white;
     background: white;
     border-radius: 50%;
     height: 50px;
     text-align: center;
     width: 50px;
     position: absolute;
     left: 45px;
     top: 10px;
     cursor: pointer;
}
 .dial-btn {
     overflow: hidden;
}
 .dial-btn img {
     width: 55px;
     height: 55px;
     border-radius: 50%;
     position: absolute;
     margin: auto;
     left: 0;
     top: 0;
     bottom: 0;
     right: 0;
}
 .a_z {
     z-index: 99999 !important;
}
 .left-save-btn {
     z-index: 9;
     overflow: hidden;
     background: white;
     width: 60px;
     border-radius: 50%;
     height: 60px;
     text-decoration: none;
     color: #333 !important;
}
 .fixfooter {
     position: fixed;
     bottom: 0px;
     width: 100%;
     background-color: var(--panel-heading-bg);
     border-top: 1px solid #3F414B;
     color: #ffffff;
     z-index: 999 !important;
     padding: 5px;
}
 .fix-btn {
     background: #111;
     color: #ffffff;
     border: 1px solid #111;
     padding: 3px 7px;
     margin-right: 5px;
     outline: none;
}
 .fix-btn:hover {
     background: #111;
     border: 1px solid gray;
     color: #ffffff;
     outline: none;
}
 .fix-btn:focus {
     background: #111;
     border: 1px solid gray;
     color: #ffffff;
     outline: none;
}
 .fix-btn:active {
     background: #111 !important;
     border: 1px solid gray !important;
     color: #ffffff !important;
     outline: none !important;
}

.fix-btn-o {
     background: #111;
     color: #ffffff;
     border: 1px solid #111;
     padding: 3px 7px;
/*     margin-right: 5px;*/
     outline: none;
}
 .fix-btn-o:hover {
     background: #111;
     border: 1px solid gray;
     color: #ffffff;
     outline: none;
}
 .fix-btn-o:focus {
     background: #111;
     border: 1px solid gray;
     color: #ffffff;
     outline: none;
}
 .fix-btn-o:active {
     background: #111 !important;
     border: 1px solid gray !important;
     color: #ffffff !important;
     outline: none !important;
}

 .label-padding {
     padding: 5px;
}
 .file_upload {
     border: 1px solid #ccc;
     max-width: 100%;
     width: 100%;
     padding: 5px 10px;
     border-radius: 4px;
}
 .ARO_submenu {
     padding: 0px 10px;
     list-style-type: none;
     margin: 1px !important;
}
 .ARO_submenu li {
     padding: 0px;
     list-style-type: none;
     margin-right: 10px;
}
 .ARO_submenu>li>a:hover {
     text-decoration: none;
     background-color: transparent;
     color: var(--panel-heading-bg);
}
 .btn-circle-2 {
     background-color: transparent;
     background: transparent;
     border: 0px;
     border-bottom: 2px solid #ffffff;
     text-align: center;
     width: 150px;
     border-radius: 0px;
     color: var(--a-color);
}
 .btn-circle-2:hover {
     background-color: transparent;
     background: transparent;
}
 .btn-circle-2:active {
     background-color: transparent;
     background: transparent;
     box-shadow: none !important;
     outline: none !important;
}
 .btn-circle-2:active:focus {
     background-color: transparent;
     background: transparent;
     box-shadow: none !important;
     outline: none !important;
}
 .btn-circle-2:focus {
     background-color: transparent;
     background: transparent;
     box-shadow: none !important;
     outline: none !important;
}
 .subitem {
     position: relative;
}
 .subitem::before {
     right: 0px;
     left: 0px;
     bottom: 0px;
     position: absolute;
     content: '';
     z-index: 100;
     transition: 0.5s;
     width: 0%;
}
 .subitem:hover::before {
     right: 0px;
     left: 0px;
     bottom: 0px;
     border-bottom: 2px solid var(--panel-heading-bg);
     position: absolute;
     content: '';
     z-index: 100;
     transition: 0.5s;
     width: 100%;
}
 .subitem a {
     outline: none;
}
 .subitem a:focus, a:hover {
     outline: none;
}
 .panel-height {
     height: 245px;
     background: transparent;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.49);
     border-color: transparent;
}
 .panel-height>.panel-heading {
     color: #000;
     background-color: var(--root);
     padding: 7px 16px;
}
 .panel-height>.panel-heading a {
     text-decoration: none;
     color: #ffffff;
     transition: 0.4s;
}
 .panel-height>.panel-heading a:hover {
     text-decoration: none;
     color: var(--main-bg-color);
     font-weight: 700;
}
 .panel-height>.panel-body {
     margin-top: 0px;
     padding: 10px;
}
 .login-background {
     background-color: var(--main-bg-color) !important;
     background: var(--bg-image);
     background-size: cover;
     position: relative;
     z-index: 10;
}
 .login-background::after {
     content: "";
     position: fixed;
     height: 100%;
     width: 100%;
     background: var(--main-bg-color);
     background-size: cover;
     top: 0;
     z-index: -1;
     bottom: 0;
     opacity: 0.95;
}
 .modal {
     overflow-y: auto;
}
 .fix-btn.disabled.focus, .fix-btn.disabled:focus, .fix-btn.disabled:hover, .fix-btn[disabled].focus, .fix-btn[disabled]:focus, .fix-btn[disabled]:hover, fieldset[disabled] .fix-btn.focus, fieldset[disabled] .fix-btn:focus, fieldset[disabled] .fix-btn:hover {
     background-color: #fff;
     border-color: #ccc;
     color: black;
}
 .days_space {
     margin-right: 5px;
}
 .bggray {
     background: lightgray;
}
 .footer-dropdown {
     background: #34363F;
     color: #ffffff;
     margin-bottom: 13px !important;
}
 .footer-dropdown:after {
     top: 100%;
     right: 5px;
     border: solid transparent;
     content: " ";
     height: 0;
     width: 0;
     position: absolute;
     pointer-events: none;
     border-color: rgba(136, 183, 213, 0);
     border-top-color: #34363F;
     border-width: 11px;
     margin-right: 0px;
}
 .footer-dropdown>li>a {
     color: #ffffff;
     border: 1px solid transparent;
}
 .footer-dropdown>li>a:focus, .footer-dropdown>li>a:hover {
     color: #ffffff;
     text-decoration: none;
     background-color: #111;
     border: 1px solid gray;
     border-radius: 4px;
}
 .parsley-errors-list {
     padding: 0px;
     list-style: none;
}
 .parsley-required {
     color: var(--alert-color);
     font-size: 12px;
}
 .ui-autocomplete {
     max-height: 200px;
     overflow-y: auto;
     overflow-x: hidden !important;
}
 * html .ui-autocomplete {
     height: 200px;
}
 .mtz-monthpicker .mtz-monthpicker-year {
     padding: 2px 5px;
     border-radius: 5px;
}
 .mtz-monthpicker .mtz-monthpicker-year:focus {
     outline: none;
}
 .yellow-btn {
     color: #ff9800;
     text-decoration: none;
}
 .red-btn {
     color: red;
     text-decoration: none;
}
 .green-btn {
     color: green;
     text-decoration: none;
}
 .gray-btn {
     color: gray;
     text-decoration: none;
}
 .text-ARO {
     border-radius: 0px !important;
     border: none;
     background-color: transparent !important;
     border: 1px solid var(--root);
     outline: none;
     -webkit-box-shadow: none;
     box-shadow: none;
     color: var(--font-color);
}
 .form-group label {
     color: var(--label);
     font-weight: normal;
     font-size: 15px;
}
 .text-ARO::-webkit-input-placeholder {
     color: var(--placeholder);
     font-size: 12px;
}
 .text-ARO::-moz-placeholder {
     color: var(--placeholder);
     font-size: 12px;
}
 .text-ARO:-ms-input-placeholder {
     color: var(--placeholder);
     font-size: 12px;
}
 .text-ARO:-moz-placeholder {
     color: var(--placeholder);
     font-size: 12px;
}
 .selectdropbtn {
     border-radius: 0px;
     outline: none;
     -webkit-box-shadow: none;
     box-shadow: none;
     background: transparent;
     color: var(--selectdropbtn-color);
     border-color: var(--root);
}
 .selectdropbtn:focus {
     background: transparent !important;
     color: var(--selectdropbtn-color) !important;
     border-color: var(--root) !important;
     outline: none !important;
     -webkit-box-shadow: none !important;
     box-shadow: none !important;
}
 .selectdropbtn:hover {
     background: transparent !important;
     color: var(--selectdropbtn-color) !important;
     border-color: var(--root) !important;
     outline: none !important;
     -webkit-box-shadow: none !important;
     box-shadow: none !important;
     border-bottom: 1px solid #70349d;
}
 .selectdropbtn-pe {
     border-radius: 0px;
     outline: none;
     -webkit-box-shadow: none;
     box-shadow: none;
     background: transparent;
     color: var(--selectdropbtn-color);
     border-color: var(--root);
}
 .selectdropbtn-pe:focus {
     background: transparent !important;
     color: var(--selectdropbtn-color) !important;
     border-color: var(--root) !important;
     outline: none !important;
     -webkit-box-shadow: none !important;
     box-shadow: 0px 1px 5px 1px var(--alert-color) !important;
}
 .selectdropbtn-pe:hover {
     background: transparent !important;
     color: var(--selectdropbtn-color) !important;
     border-color: var(--root) !important;
     outline: none !important;
     -webkit-box-shadow: none !important;
     box-shadow: 0px 1px 5px 1px var(--alert-color) !important;
     border-bottom: 1px solid #70349d;
}
 .bootstrap-select .dropdown-toggle:focus {
     outline: none !important;
}
 .selectdropbtn.active, .selectdropbtn:active, .open>.dropdown-toggle.selectdropbtn {
     background: transparent !important;
     color: var(--selectdropbtn-color) !important;
     border-color: var(--root) !important;
     outline: none !important;
     -webkit-box-shadow: none !important;
     box-shadow: none !important;
}
 .panel {
     box-shadow: none;
     border-radius: 4px !important;
     background: transparent;
}
 .panel-primary {
     border-color: var(--root);
}
 .panel-default>.panel-heading {
     background-color: var(--sb-panel-bg);
     box-shadow: none;
     border-radius: 4px;
}
 .panel-default {
     border-color: var(--panel-border);
}
 .panel-group .panel-heading+.panel-collapse>.list-group, .panel-group .panel-heading+.panel-collapse>.panel-body {
     border-top: none;
}
 .ui-widget-content {
     border: 1px solid #dddddd;
     background: var(--main-bg-color);
     color: var(--a-color);
}
 .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button {
     color: var(--a-color);
}
 .ui-widget-header a {
     background-color: var(--root);
}
 .img-box {
     position: relative;
     width: 187px;
     min-height: 100px;
     max-width: 100%;
     cursor: pointer;
     height: 100%;
     margin-bottom: 10px;
     border: 1.5px solid #636363;
}
 .timebandmix-img {
     max-width: 100%;
     cursor: pointer;
     position: relative;
     border: 1.5px solid #636363;
     background-color: var(--tb-image);
}
 .img-active {
     max-width: 100%;
     opacity: 1;
     filter: alpha(opacity=100);
     cursor: pointer;
     position: relative;
     border: 1.5px solid var(--root);
}
 .timebandmix-img:hover {
     opacity: 1.0;
     filter: alpha(opacity=100);
     cursor: pointer;
}
 .timebandmix-icon {
     color: white;
     font-size: 20px;
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     text-align: center;
     opacity: 0;
}
 .text-img {
     color: var(--root);
     font-size: 20px;
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     text-align: center;
     opacity: 1 !important;
}
 .table-striped>tbody>tr:nth-of-type(odd) {
     background-color: var(--tr-odd);
}
 .table-striped>thead>tr {
     color: var(--tr-color);
     font-size: 15px;
}
 .table-striped>tbody>tr {
     color: var(--tr-color);
}
 .table-striped>tfoot>tr {
     color: var(--tr-color);
}
 .btn-default-aro {
     color: var(--btn-color);
     background-color: transparent;
     border-color: var(--root);
}
 .btn-default-aro:hover,.btn-default-aro:focus,.btn-default-aro:active:focus {
     color: #fff;
     background-color: #24262d;
     border-color: #fff;
     outline: none;
}
 .btn-default-aro[disabled]:hover {
     background-color: gray !important;
     border-color: var(--root);
}
 .bootstrap-select {
     border: none;
     margin-bottom: 4px !important;
}
 .bootstrap-select>.dropdown-menu.open,.inner {
     background-color: var(--panel-heading-bg);
}
 .inner li a {
     color: #d4d4d4;
}
 .border-blue {
     background-color: transparent;
     border: 2px solid var(--alert-color);
     border-radius: 5px;
     color: var(--border-blue-color);
     font-weight: 500;
}
 .border-green {
     background-color: transparent;
     border: 2px solid var(--alert-success-bg);
     border-radius: 5px;
     color: var(--border-blue-color);
     font-weight: 500;
}
 label {
     color: var(--a-color);
     font-weight: 500;
}
 .dataTables_info {
     color: #d4d4d4;
     text-align: left;
}
 .theme-icon {
     width: 18px;
     height: 18px;
     border: 2px solid gray;
     border-radius: 50%;
     cursor: pointer;
}
 .theme-icon:nth-child(1) {
     background-color: #f6a820;
}
 .theme-icon:nth-child(2) {
     background-color: #DF691A;
}
 .theme-icon:nth-child(3) {
     background-color: #2A9FD6;
}
 .theme-icon:nth-child(4) {
     background-color: #ffffff;
}
 .theme-active {
     cursor: pointer;
     border: 2px solid #202020;
     transform: scale(1.2);
     position: relative;
     display: block;
}
 .theme-ul li.theme-active::after {
     content: "";
     position: absolute;
     width: 100%;
     background-color: var(--root);
     height: 2px;
     bottom: -7px;
     transform: scale(1.2);
     left: 0px;
}
 .theme-ul {
     list-style: none;
     display: inline-block;
     padding: 0px 10px;
     width: 100%;
     position: relative;
     margin: auto;
     text-align: center;
}
 .theme-ul li {
     list-style: none;
     display: inline-block;
     margin: 0px 5px;
}
 .nav-tabs {
     border-bottom: 1px solid var(--nav-tabs-border);
}
 .input-group-addon {
     padding: 6px 12px;
     font-size: 14px;
     font-weight: 400;
     line-height: 1;
     color: var(--a-color);
     text-align: center;
     background-color: var(--main-bg-color);
     border: 1px solid var(--root);
     border-radius: 0px;
}
 .modal-content {
     background-color: var(--main-bg-color);
     border: 1px solid var(--root);
}
 .missing-info {
     position: absolute;
     top: 35px;
     z-index: 100;
     right: -5px;
     font-size: 16px;
     color: gray !important;
}
 .missing-info-red {
     position: absolute;
     top: 35px;
     z-index: 100;
     right: -5px;
     font-size: 16px;
     color: var(--root) !important;
}
 .jhover {
     background-color: var(--root) !important;
     background: var(--root) !important;
}
 .input-group-btn .btn {
     background-color: var(--main-bg-color);
     border-color: var(--root);
}
 .input-group-btn>.btn:active:focus {
     background-color: var(--main-bg-color) !important;
     border-color: var(--root) !important;
}
 .input-group-btn>.btn:active:hover {
     background-color: var(--main-bg-color) !important;
     border-color: var(--root) !important;
}
 .input-group-btn .btn span {
     color: var(--root);
}
 .modal-title {
     color: var(--root);
}
 .close {
     color: var(--root);
     text-shadow: none;
     opacity: 1;
}
 .normal-select {
     background-color: var(--main-bg-color) !important;
     border-radius: 0px;
     outline: none !important;
     -webkit-box-shadow: none;
     box-shadow: none;
     color: var(--selectdropbtn-color) !important;
     border-color: var(--root);
     padding: 0px 5px;
}
 tr>td>.normal-select {
     background-color: var(--main-bg-color) !important;
     border-radius: 0px;
     outline: none !important;
     -webkit-box-shadow: none;
     box-shadow: none;
     padding: 0px 5px;
     color: var(--selectdropbtn-color) !important ;
     border-color: var(--root);
     height: 25px !important;
     width: 100% !important;
     max-width: 100% !important;
}
 tr>td>.normal-select[multiple] {
     height: 50px !important;
}
 .normal-select:focus > option:checked, option:hover {
     background: var(--root) !important;
}
 .normal-select:focus {
     border-color: var(--root);
}
 .form-horizontal p {
     color: var(--a-color);
}
 .result-h4 {
     color: var(--a-color);
}
 .daterangepicker .ranges li.active {
     background-color: var(--root) !important;
     color: #fff;
}
 .daterangepicker td.active, .daterangepicker td.active:hover {
     background-color: var(--root) !important;
     border-color: transparent;
     color: #fff;
}
 .bootstrap-select.btn-group .dropdown-menu.inner {
     overflow: scroll;
     overflow-x: hidden;
     max-height: 200px !important;
}
 .bootstrap-select.btn-group .dropdown-menu.inner li.selected a {
     background-color: var(--root);
}
 .bootstrap-select.btn-group .no-results {
     background-color: var(--main-bg-color);
}
 .fas,.fa {
     color: var(--root);
     opacity: 0.8;
}
 .clicklink {
     color: var(--root);
     text-decoration: none;
     text-align: right;
     display: block;
     width: 100%;
}
 .clicklink:hover {
     color: var(--root);
     text-decoration: underline;
     display: block;
     width: 100%;
     cursor: pointer;
}
 .clicklink:focus, .clicklink:hover {
     color: var(--root);
     text-decoration: none;
}
 table.dataTable tbody>tr.selected, table.dataTable tbody>tr>.selected {
     background-color: var(--panel-heading-bg);
}
 .text-ARO[readonly] {
     cursor: not-allowed;
}
 .grid-stack-item-content::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
     background-color: #F5F5F5;
     border-radius: 50px;
}
 .grid-stack-item-content::-webkit-scrollbar {
     width: 8px;
     border-radius: 50px;
     background-color: #F5F5F5;
}
 .grid-stack-item-content::-webkit-scrollbar-thumb {
     border-radius: 50px;
     background-color: var(--panel-heading-bg);
}
 .table-bordered {
     border-color: var(--panel-border);
}
 .table-bordered>tbody>tr>th {
     border-color: var(--panel-border);
}
 .table-bordered>thead>tr>th {
     border-color: var(--panel-border);
     text-align: center !important;
}
 .table-bordered>tbody>tr>td {
     border-color: var(--panel-border);
}
 .table-bordered>tfoot>tr>td {
     border-color: var(--panel-border);
}
 .table-bordered>tfoot>tr>th {
     border-color: var(--panel-border);
     border-top: 1px solid;
     border-bottom: 1px solid;
}
 .alert-danger {
     color: var(--alert-danger-color);
     background-color: var(--alert-danger-bg);
     border-color: var(--alert-danger-bg);
}
 .alert-success {
     color: var(--alert-success-color);
     background-color: var(--alert-success-bg);
     border-color: var(--alert-success-bg);
}
 .alert-warning {
     color: var(--alert-warning-color);
     background-color: var(--alert-warning-bg);
     border-color: var(--alert-warning-bg);
}
 .pagination>.active>a {
     background-color: var(--root);
     border: none;
}
 .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
     background-color: var(--root);
     border: none;
     outline: none;
     box-shadow: none;
}
 .pagination>.active>a:hover {
     background-color: var(--root);
     border: none;
     cursor: pointer;
}
 .pagination>.disabled>a {
     background-color: var(--panel-heading-bg);
     border: none;
     color: var(--a-color);
}
 .pagination>.disabled>a:hover {
     background-color: var(--panel-heading-bg);
     border: none;
     color: var(--a-color);
}
 .pagination>li>a, .pagination>li>span {
     background-color: var(--panel-heading-bg);
     border: none;
     color: var(--a-color);
}
 .pagination>li>a:hover {
     background-color: #ffffff66;
     border: none;
     color: var(--a-color);
}
 .dataTables_length select {
     background-color: var(--main-bg-color);
     color: var(--a-color);
     outline: none !important;
     box-shadow: none;
     border-color: var(--root);
}
 .dataTables_length select:focus {
     background-color: var(--main-bg-color);
     color: var(--a-color);
     outline: none !important;
     border-color: var(--text-aro-focus);
     box-shadow: none;
}
 .dropdown-menu {
     background-color: var(--panel-heading-bg);
}
 .dropdown-menu>li>a {
     color: var(--copy);
}
 div.dataTables_wrapper div.dataTables_filter input {
     border-radius: 0px;
     border: none;
     background-color: transparent !important;
     border: 1px solid var(--root);
     outline: none;
     -webkit-box-shadow: none;
     box-shadow: none;
     color: var(--font-color);
}
 div.dataTables_wrapper div.dataTables_filter input:focus {
     outline: none;
     border-color: var(--text-aro-focus);
     -webkit-box-shadow: none;
     box-shadow: none;
     background-color: transparent;
}
 datalist {
     max-height: 250px;
     overflow-y: auto;
}
 .disabledspan {
     color: #545454;
}
 .btn-success {
     background-color: var(--alert-success-bg) !important;
}
 .close:focus, .close:hover {
     color: var(--panel-heading-bg);
     text-decoration: none;
     cursor: pointer;
     opacity: 1;
}
 .span-tooltip {
     position: absolute;
     background: var(--panel-heading-bg);
     left: -14px;
     width: 50px;
     top: -25px;
     grid-stack-item border-radius: 4px;
     color: var(--a-color);
     display: none;
     border: 1px solid var(--root);
}
 .span-tooltip::after {
     top: 100%;
     left: 50%;
     border: solid transparent;
     content: " ";
     height: 0;
     width: 0;
     position: absolute;
     pointer-events: none;
     border-color: rgba(136, 183, 213, 0);
     border-top-color: var(--root);
     border-width: 5px;
     margin-left: -5px;
}
 .w-90 {
     width: 90% !important;
     max-width: 100%;
     display: inline-block;
     background: #ffffff00;
     border: 1px solid #868686;
     color: var(--tr-color);
     text-align: right;
}
 .table-condensed {
     color: var(--a-color);
}
 .radio-inline {
     display: inline-block;
     position: relative;
     padding-left: 25px;
     margin-right: 5px;
     margin-bottom: 5px;
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
}
 .radio-inline input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
}
 .checkmark {
     position: absolute;
     top: 2px;
     left: 0;
     height: 16px;
     width: 16px;
     background-color: #eee;
     border-radius: 50%;
}
 .radio-inline:hover input ~ .checkmark {
     background-color: #ccc;
}
 .radio-inline input:checked ~ .checkmark {
     background-color: var(--root);
}
 .checkmark:after {
     content: "";
     position: absolute;
     display: none;
}
 .radio-inline input:checked ~ .checkmark:after {
     display: block;
}
 .radio-inline .checkmark:after {
     top: 4px;
     left: 4px;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: white;
}
 .radio-inline input[disabled]:checked ~ .checkmark {
     background-color: var(--panel-heading-bg);
     cursor: not-allowed;
}
 .radio-inline input[disabled]:not(:checked) ~ .checkmark {
     background-color: var(--panel-heading-bg);
     cursor: not-allowed;
}
 table.dataTable tbody td.select-checkbox:before, table.dataTable tbody th.select-checkbox:before {
     content: ' ';
     margin-top: -6px;
     margin-left: -6px;
     border: 1px solid var(--root) !important;
     border-radius: 3px;
}
 .switch {
     position: relative;
     display: block;
     vertical-align: top;
     width: 60px;
     height: 20px;
     padding: 3px;
     margin-bottom: 2px !important;
     margin: 0px auto;
     background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
     background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
     border-radius: 18px;
     cursor: pointer;
     box-sizing: content-box;
}
 .switch-input {
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;
     box-sizing: content-box;
}
 .switch-label {
     position: relative;
     display: block;
     height: inherit;
     font-size: 10px;
     text-transform: uppercase;
     background: #eceeef;
     border-radius: inherit;
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
     box-sizing: content-box;
}
 .switch-label:before, .switch-label:after {
     position: absolute;
     top: 50%;
     margin-top: -.5em;
     line-height: 1;
     -webkit-transition: inherit;
     -moz-transition: inherit;
     -o-transition: inherit;
     transition: inherit;
     box-sizing: content-box;
}
 .switch-label:before {
     content: attr(data-off);
     right: 11px;
     color: #aaaaaa;
     text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
 .switch-label:after {
     content: attr(data-on);
     left: 11px;
     color: #FFFFFF;
     text-shadow: 0 1px rgba(0, 0, 0, 0.2);
     opacity: 0;
}
 .switch-input:checked ~ .switch-label {
     background: #E1B42B;
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
 .switch-input:checked ~ .switch-label:before {
     opacity: 0;
}
 .switch-input:checked ~ .switch-label:after {
     opacity: 1;
}
 .switch-handle {
     position: absolute;
     top: 4px;
     left: 4px;
     width: 28px;
     height: 28px;
     background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
     background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
     border-radius: 100%;
     box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
 .switch-handle:before {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     margin: -6px 0 0 -6px;
     width: 12px;
     height: 12px;
     background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
     background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
     border-radius: 6px;
     box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
 .switch-input:checked ~ .switch-handle {
     left: 74px;
     box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
 .switch-label, .switch-handle {
     transition: All 0.3s ease;
     -webkit-transition: All 0.3s ease;
     -moz-transition: All 0.3s ease;
     -o-transition: All 0.3s ease;
}
 .switch-flat {
     padding: 0;
     background: var(--main-bg-color);
     background-image: none;
}
 .switch-flat .switch-label {
     background: transparent;
     border: solid 2px var(--tr-color);
     box-shadow: none;
}
 .switch-flat .switch-label:after {
     color: var(--alert-success-bg);
}
 .switch-flat .switch-handle {
     top: 3px;
     left: 6px;
     background: #dadada;
     width: 18px;
     height: 18px;
     box-shadow: none;
}
 .switch-flat .switch-handle:before {
     background: #eceeef;
}
 .switch-flat .switch-input:checked ~ .switch-label {
     background: transparent;
     border-color: var(--root);
}
 .switch-flat .switch-input:checked ~ .switch-handle {
     left: 37px;
     background: var(--root);
     box-shadow: none;
}
 table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable td:last-child, table.table-bordered.dataTable td:last-child {
     border-right-width: 1px;
}
 .width_400 {
     max-width: 400px !important;
     overflow: scroll !important;
}
 .btn-default-aro[disabled] {
     background-color: transparent !important;
     border-color: var(--root);
}
 .svg-container {
     max-width: 100% !important;
     max-height: 100% !important;
}
 .dt-button-collection {
     overflow: hidden;
     max-height: 200px;
     overflow-y: scroll;
}
 .svg-container >.main-svg:first-child {
     background: var(--main-bg-color) !important;
}
 .xy >rect:first-child {
     fill: var(--main-bg-color) !important;
}
 .legend >rect:first-child {
     fill: var(--main-bg-color) !important;
}
 .xgrid {
     stroke: var(--panel-border) !important;
}
 .ygrid {
     stroke: var(--panel-border) !important;
}
 .vis-time-axis .vis-grid.vis-minor, .vis-time-axis .vis-grid.vis-major {
     border-color: var(--panel-border);
}
 .vis-foreground .vis-group {
     border-bottom: 2px solid var(--panel-border);
}
 .vis-panel.vis-bottom {
     border: 1px #9C27B0;
}
 .vis-labelset .vis-label {
     border-bottom: 2px solid var(--panel-border);
}
 .vis-timeline {
     border: none;
}
 .vis-panel.vis-bottom, .vis-panel.vis-center, .vis-panel.vis-left, .vis-panel.vis-right, .vis-panel.vis-top {
     border: none;
}
 .vis-panel.vis-bottom {
     border-top: 2px solid var(--panel-border);
}
 .vis-panel.vis-left {
     border-right: 2px solid var(--panel-border);
}
 .vis-labelset .vis-label:last-child {
     border: none !important;
}
 table {
     background-color: transparent !important;
}
 .left-block {
     right: 0 !important;
     left: auto !important;
}
 #DetailErrorModal {
     z-index: 99999999!important;
}
 .padding5x {
     padding: 0px 5px;
}
 .a-gray {
     color: var(--tr-color);
}
 .a-green {
     color: var(--alert-success-bg);
}
 .a-yellow {
     color: var(--alert-warning-bg);
}
 .a-red {
     color: var(--a-red);
}
 .a-gray:focus {
     color: var(--tr-color);
}
 .a-green:focus {
     color: var(--alert-success-bg);
}
 .a-yellow:focus {
     color: var(--alert-warning-bg);
}
 .a-red:focus {
     color: var(--a-red);
}
 .a-gray:hover {
     color: var(--tr-color);
}
 .a-green:hover {
     color: var(--alert-success-bg);
}
 .a-yellow:hover {
     color: var(--alert-warning-bg);
}
 .a-red:hover {
     color: var(--a-red);
}
 .grid-stack-item-content {
     background-color: var(--main-bg-color);
     padding: 15px;
     border: 4px solid var(--root);
     border-top: 10px solid var(--root);
}
 .chart-info {
     position: relative;
     width: 100%;
     height: 100%;
}
 .chart-info-icon {
     position: absolute;
     top: 5px;
     right: 10px;
     z-index: 99;
     border-radius: 50%;
}
 .chart-info-icon a {
     display: block;
     width: 100%;
     height: 100%;
}
 .chart-info-icon a i {
     opacity: 1;
     font-size: 18px;
}
 .fa-info-circle {
     color: var(--root) !important;
}
 .fa-times-circle {
     color: var(--main-bg-color) !important;
}
 .chart-alert {
     background-color: var(--panel-heading-bg);
     color: var(--a-color);
     position: absolute;
     margin: auto;
     width: 100%;
     height: auto;
     display: none;
     padding: 10px;
     border-radius: 5px;
     z-index: 90;
     margin-top: 5px;
}
 .chart-alert-ul {
     display: block;
     list-style: none;
     padding: 0px;
}
 .chart-alert-ul li {
     display: block;
     list-style-type: none;
     padding-left: 20px;
     position: relative;
     text-align: left;
     word-break: break-word;
    white-space: break-spaces;
}
 .chart-alert-ul li::before {
     content: '\f14a';
     position: absolute;
     left: 0;
     top: 0;
     font-family: 'Font Awesome 5 Free';
     font-weight: 900;
}
 .searchbyNumber {
     padding: 0px;
     display: inline-block;
}
 .searchbyNumber li {
     border-radius: 50%;
     border: 1px solid var(--root);
     width: 23px;
     height: 23px;
     list-style: none;
     list-style-type: none;
     display: inline-block;
     color: var(--a-color);
     margin-right: 5px;
     margin-bottom: 5px;
     cursor: pointer;
}
 .searchbyNumber li a {
     display: block;
     text-align: center;
     width: 100%;
     color: var(--a-color);
     cursor: pointer;
     padding-top: 1px;
     text-decoration: none;
}
 .searchbyNumber li a.active {
     display: block;
     text-align: center;
     width: 100%;
     color: var(--panel-heading-bg);
     cursor: pointer;
     background-color: var(--root);
     border-radius: 50%;
     height: 100%;
     font-weight: bold;
}
 .a-disabled[disabled] {
     cursor: not-allowed;
     filter: alpha(opacity=100);
     -webkit-box-shadow: none;
     box-shadow: none;
     opacity: 1;
     background-color: transparent !important;
     color: #545454;
     pointer-events: none;
}
 .a-disabled[disabled] i {
     color: #545454;
}
 .select-height {
     height: 20px !important;
}
 .select-padding {
     padding: 2px 10px;
}
 .select-height>.dropdown-menu>ul>li>a {
     padding: 0px 15px !important;
}
 .tool-tip {
     display: inline-block;
}
 .tool-tip [disabled] {
     pointer-events: none;
}
 .daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
     color: black;
}
 .emailresponsebox {
     width: 100%;
     max-width: 400px;
     margin: auto;
     border-bottom: 5px solid var(--root);
     box-sizing: border-box;
     border-radius: 4px;
     text-align: center;
     padding: 15px;
     background-color: #fff;
     animation: animate .5s .5s linear;
}
 @keyframes animate {
     0% {
         transform: translate(1px, 1px) rotate(0deg);
    }
     10% {
         transform: translate(-1px, -2px) rotate(-1deg);
    }
     20% {
         transform: translate(-3px, 0px) rotate(1deg);
    }
     30% {
         transform: translate(3px, 2px) rotate(0deg);
    }
     40% {
         transform: translate(1px, -1px) rotate(1deg);
    }
     50% {
         transform: translate(-1px, 2px) rotate(-1deg);
    }
     60% {
         transform: translate(-3px, 1px) rotate(0deg);
    }
     70% {
         transform: translate(3px, 1px) rotate(-1deg);
    }
     80% {
         transform: translate(-1px, -1px) rotate(1deg);
    }
     90% {
         transform: translate(1px, 2px) rotate(0deg);
    }
     100% {
         transform: translate(1px, -2px) rotate(-1deg);
    }
}
 .emailresponsebox h3.approved {
     color: var(--alert-success-bg);
     font-family: Raleway-Regular;
     font-weight: 700;
}
 .emailresponsebox h3.rejected {
     color: var(--alert-danger-bg);
     font-family: Raleway-Regular;
     font-weight: 700;
}
 .emailresponsebox img {
     max-width: 100%;
}
 .emailresponsebox h3.warning {
     color: var(--alert-warning-bg);
     font-family: Raleway-Regular;
     font-weight: 700;
}
 .missinginput-overlay {
     height: 0%;
     width: 100%;
     position: fixed;
     z-index: 150;
     top: 70px;
     left: 0;
     background-color: var(--main-bg-color);
     overflow-y: hidden;
     transition: 0.5s;
     margin-bottom: 200px;
}
 .missinginput-overlay.Mi-active {
     height: 100%;
     overflow-y: scroll !important;
}
 .missinginput-btn {
     font-size: 18px;
     margin-top: 10px;
     cursor: pointer;
}
 .fix-missing-input {
     position: absolute;
     bottom: 0px;
     left: 0;
     width: 100%;
     padding: 5px 15px;
}
 .mi-overlay-content {
     position: relative;
     width: 100%;
     margin-top: 15px;
}
 .panel-mi {
     height: 380px;
     position: relative;
     margin-bottom: 150px;
}
 .btn-default-aro:active {
     color: var(--btn-color) !important;
     background-color: transparent !important;
     border-color: var(--root) !important;
}
 #FitCPRP .fa-times-circle {
     color: var(--panel-heading-bg) !important;
}
 .btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default {
     background: #111 !important;
     border: 1px solid gray !important;
     color: #ffffff !important;
     outline: none !important;
}
 .channeltooltip {
     text-decoration: none;
}
 .channeltooltip:hover,focus {
     text-decoration: none;
}
 .margin-2x {
     margin-right: 3px;
}
 .text-white {
     font-family: Roboto-Regular;
     color: var(--label);
     font-weight: normal;
     font-size: 15px;
}
 #sortable {
     margin: auto;
     padding: 0;
     display: flex;
     flex: 1;
     border-spacing: 0px 5px;
}
 #sortable li:before {
     border-left: 12px solid var(--root);
     right: 0;
     position: absolute;
     content: '';
     z-index: 9;
     width: 10px;
     border-bottom: 10px solid transparent;
     height: 10px;
     border-right: transparent;
     border-top: transparent;
     transform: rotateY(175deg);
     top: 0;
}
 #sortable li {
     margin: 3px 7px 3px 0px;
     padding: 4px 2px;
     height: auto;
     font-size: 15px;
     text-align: center;
     display: flex;
     cursor: move;
     flex: 1;
     background-color: transparent;
     border: 1px solid var(--root);
     position: relative;
     color: var(--root);
     align-content: center;
}
 #sortable li:nth-last-of-type(1) {
     margin: 3px 0px 3px 0px;
}
 .custom-checkbox {
     display: block;
     position: relative;
     padding-left: 20px;
     margin-bottom: 0px;
     cursor: pointer;
     font-size: 15px;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     margin-left: 3px;
}
 .custom-checkbox input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
     height: 0;
     width: 0;
}
 .checkbox-checkmark {
     position: absolute;
     top: 2px;
     left: 0;
     height: 15px;
     width: 15px;
     border: 1px solid var(--root);
}
 .custom-checkbox:hover input ~ .checkbox-checkmark {
     border: 1px solid var(--root);
     border-radius: 2px;
}
 .custom-checkbox input:checked ~ .checkbox-checkmark {
     border: 1px solid var(--root);
     border-radius: 2px;
}
 .checkbox-checkmark:after {
     content: "";
     position: absolute;
     display: none;
}
 .custom-checkbox input:checked ~ .checkbox-checkmark:after {
     display: block;
}
 .custom-checkbox .checkbox-checkmark:after {
     left: 4px;
     top: 0px;
     width: 5px;
     height: 10px;
     border: solid var(--root);
     border-width: 0 2px 2px 0;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
}
 .chart-info-icon-slider {
     position: absolute;
     top: -17px;
     right: 1px;
     z-index: 99;
     border-radius: 50%;
}
 .ref-rodp-deactive > i {
     text-decoration: none;
     color: gray;
}
 @media screen and (min-width: 768px) {
     .navbar-nav>li {
         float: left;
         margin-right: 20px;
    }
     .navbar-nav>li>a {
         padding-top: 25px;
         padding-bottom: 25px;
    }
     .navbar-right .dropdown-menu {
         right:1px;
         left: auto;
         border: 1px solid var(--root);
    }
     .cssarrow:after {
         bottom: 100%;
         right: 0px;
         border: solid transparent;
         content: " ";
         height: 0;
         width: 0;
         position: absolute;
         pointer-events: none;
         border-color: rgba(136, 183, 213, 0);
         border-bottom-color: var(--root);
         border-width:9px;
         margin-right: 0px;
    }
     .pro_ver_D {
         display: block;
    }
     .pro_ver_M {
         display: none;
    }
     .ARO_submenu>li>a {
         padding-top: 5px !important;
         padding-bottom: 8px !important;
    }
     .ARO_submenu {
         right: 0px;
         position: absolute;
    }
}
 @media screen and (max-width: 768px) {
     .header-th{
         display: none;
    }
     .pro_ver_D {
         display: none;
    }
     .pro_ver_M {
         display: block;
    }
     .mobile-submenu {
         margin-right: 0px;
         margin-top: 0px;
         margin-bottom: 0px;
         padding: 12px 10px;
    }
     .mobile-submenu .icon-bar {
         display: block;
         width: 22px;
         height: 2px;
         border-radius: 1px;
         background: var(--main-bg-color);
    }
     .btn-circle-2 {
         background-color: transparent;
         background: transparent;
         border:0px;
         border-bottom: 2px solid #ffffff;
         text-align: center;
         width: 100%;
         border-radius: 0px;
         color: black;
    }
     .salesfpc-d-title > a[aria-expanded="false"]::after {
         content: "\002b";
         -webkit-transform: rotate(90deg);
         transform: rotate(90deg);
         position: absolute;
         left: 8px;
         font-weight: bold;
         top: 50%;
         color: var(--root);
    }
     .salesfpc-d-title > a[aria-expanded="true"]::after {
         content: "\2212";
         -webkit-transform: rotate(180deg);
         transform: rotate(180deg);
         position: absolute;
         left: 8px;
         top: 50%;
         font-weight: bold;
         color: var(--copy);
    }
}
 .NptPt{
     background-image: url('../image/8timeband.png');
     background-position: -3px -12px;
     background-repeat: no-repeat;
}
 .NptPtWDWESatSun{
     background-image: url('../image/8timeband.png');
     background-position: -260px -12px;
     background-repeat: no-repeat;
}
 .NptPtWDWESun{
     background-image: url('../image/8timeband.png');
     background-position: -520px -12px;
     background-repeat: no-repeat;
}
 .NptPtWdSatSun{
     background-image: url('../image/8timeband.png');
     background-position: -778px -12px;
     background-repeat: no-repeat;
}
 .NptPtWdSun{
     background-image: url('../image/8timeband.png');
     background-position: -3px -191px;
     background-repeat: no-repeat;
}
 .Alldays{
     background-image: url('../image/8timeband.png');
     background-position: -272px -191px;
     background-repeat: no-repeat;
}
 .AlldaysWESatSun{
     background-image: url('../image/8timeband.png');
     background-position: -525px -191px;
     background-repeat: no-repeat;
}
 .AlldaysWESun{
     background-image: url('../image/8timeband.png');
     background-position: -778px -191px;
     background-repeat: no-repeat;
}
 .ellipsis {
     max-width: 100px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     position: relative;
}
 .alert span {
     word-break: break-all;
}
.ui-autocomplete-input[disabled]{
    opacity: 0.65;
}
/*08-08-2022*/
.sticky-td tbody tr:nth-child(1){
position: sticky;
z-index: 9;
background: var(--panel-heading-bg);
color: #fff;
top: 0;
}
.sticky-td-2 tbody tr:nth-child(1){
position: sticky;
z-index: 9;
background: var(--panel-heading-bg);
color: #fff;
top: 0;
}
.sticky-td-2 tbody tr:nth-child(2){
position: sticky;
z-index: 9;
background: var(--panel-heading-bg);
color: #fff;
top: 27px;
}
.sticky-td-3 tbody tr:nth-child(1){
position: sticky;
z-index: 9;
background: var(--panel-heading-bg);
color: #fff;
top: 0px;
}
.sticky-td-3 tbody tr:nth-child(2){
position: sticky;
z-index: 9;
background: var(--panel-heading-bg);
color: #fff;
top: 27px;
}
.sticky-td-3 tbody tr:nth-child(3){
position: sticky;
z-index: 9;
background: var(--panel-heading-bg);
color: #fff;
top: 54px;
}
.sticky-td-4 tbody tr:nth-child(1){
position: sticky;
z-index: 9;
background: var(--panel-heading-bg);
color: #fff;
top: 0px;
}
.sticky-td-4 tbody tr:nth-child(2){
position: sticky;
z-index: 9;
background: var(--panel-heading-bg);
color: #fff;
top: 27px;
}
.sticky-td-4 tbody tr:nth-child(3){
position: sticky;
z-index: 9;
background: var(--panel-heading-bg);
color: #fff;
top: 54px;
}
.sticky-td-4 tbody tr:nth-child(4){
position: sticky;
z-index: 9;
background: var(--panel-heading-bg);
color: #fff;
top: 81px;
}
.sticky-td-5 tbody tr:nth-child(1){
position: sticky;
z-index: 9;
background: var(--panel-heading-bg);
color: #fff;
top: 0px;
}
.sticky-td-5 tbody tr:nth-child(2){
position: sticky;
z-index: 9;
background: var(--panel-heading-bg);
color: #fff;
top: 27px;
}
.sticky-td-5 tbody tr:nth-child(3){
position: sticky;
z-index: 9;
background: var(--panel-heading-bg);
color: #fff;
top: 54px;
}
.sticky-td-5 tbody tr:nth-child(4){
position: sticky;
z-index: 9;
background: var(--panel-heading-bg);
color: #fff;
top: 81px;
}
.sticky-td-5 tbody tr:nth-child(5){
position: sticky;
z-index: 9;
background: var(--panel-heading-bg);
color: #fff;
top: 108px;
}
.td-text-white{
font-weight: bold;
color: #fff;
}
div.dt-button-collection{
background-color: var(--main-bg-color);
}
.mb-0{
    margin-bottom: 0px !important;
}
.channel_click{
    color: #fff !important;
    cursor: pointer;
    vertical-align: sub;
    text-decoration: none;
    width: 100%;
    display: block;
}


.channel_click:hover{
    color: var(--root) !important;
    cursor: pointer;
    vertical-align: sub;
    text-decoration: none;
}

.channel_click:focus{
    color: var(--root) !important;
    cursor: pointer;
    vertical-align: sub;
    text-decoration: none;
}
.channel_click img{
    margin-right: 5px;
    max-width: 16px;
    transition: 0.5s;
    border-radius: 50%;
}

.channel_click:hover img{
    border-radius: 50%;
    transform: scale(1.5);
}

.fix-footer-btn {
    padding: 3px 7px;
    margin-right: 5px;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: 3px;
    display: inline-block;
    background: #111 !important;
    color: #ffffff !important;
    outline: none !important;
}

.multiple-select-aro {
  display: block;
  position: relative;
  min-width: 180px;
}

/*.multiple-select-dropdown {
  position: absolute;
  margin-top: 2px;
  min-width: 100%;
  background-color: transparent;
  border-radius: 5px;
}*/

.multiple-select-aro label {
  margin: 0;
  display: block;
  background-color: transparent;
  width: 100%;
  clear: both;
}

.multiple-select-aro label > input + .content {
  padding: 5px 10px;
  display: block;
  cursor: pointer;
}

.multiple-select-aro label + label {
  border-top: 1px solid gray;
}

.multiple-select-aro label > input:checked + .content {
  background-color: var(--root);
}