.RenderReadOnly {
   padding: 0;
   margin-top: 11px;
}

.RenderReadOnly > span {
   background: #f5f5f5;
   width: 100%;
   display: inline-block;
   font-weight: normal;
   min-height: 36px;
   border: 1px solid #999;
   margin-bottom: 0;
   padding-top: 11px;
}

.RenderReadOnly > span:first-child {
   position: absolute;
   top: 0;
   left: 15px;
   width: auto;
   padding: 0 3px;
   font-size: 14px;
   margin: 0;
   display: inline-block;
   border: 0;
   min-height: 0px;
   background: #fff;
   height: 5px;
   line-height: 0;
   font-weight: normal;
}
.LoadingWindow {
   cursor: pointer;
   zoom: 1;
   background-color: transparent;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
   background: rgba(0,0,0,0.65);
}
span.RenderReadOnly{
   font-weight: bold;
}
.ButtonLinkSite,
.ButtonLinkSite:visited,
.ButtonLinkSiteIcon,
.ButtonLinkSiteIcon:visited,
a.AnchorButtonList,
a.AnchorButtonListAdd {
   padding: 6px 6px 2px 6px;
   text-align: center;
   display: inline-block;
   font-size: 18px;
   cursor: pointer;
   border-radius: 5px;
   transition: .2s all ease-in;
}
a.AnchorButtonList {
   font-size: 32px;
   padding: 2px 9px;
}
span.AnchorButtonListAdd {
   cursor: pointer;
   transition: .2s all ease-in;
   font-size: 14px;
   display: inline-block;
}
a.AnchorButtonListAdd {
   font-size: 16px;
   padding: 2px 9px;
}
a.AnchorButtonList.inTable,
span.AnchorButtonList.inTable {
   font-size: 20px;
   padding: 2px 9px;
}
.ButtonLinkSite,
.ButtonLinkSite:visited {
   padding: 6px 16px 6px 16px;
   font-size: 16px;
}
.ButtonLinkSiteIcon i,
.ButtonLinkSiteIcon svg {
   font-size: 22px;
}

div[pagehelperarraytype] table th, div[pagehelperarraytype] table td {
   padding: 0 !important;
}
a.buttons-html5,
button.buttons-html5,
a.buttons-print,
button.buttons-print,
a.buttons-html5:hover,
button.buttons-html5:hover,
a.buttons-print:hover,
button.buttons-print:hover {
   background: transparent !important;
   background-color: transparent !important;
   padding: 0 !important;
   width: auto !important;
   height: auto !important;
   border: 0 !important;
   margin: 0 !important;
}
a.buttons-html5:hover,
button.buttons-html5:hover,
a.buttons-print:hover,
button.buttons-print:hover {
   background: #555 !important;
   background-color: #555 !important;
}
a.buttons-html5 span,
button.buttons-html5 span,
a.buttons-print span,
button.buttons-print span {
   font-size: 18px !important;
   color: #555;
   padding: 6px;
   display: inline-block;
   border: 1px solid #555;
   border-radius: 3px;
   transition: .5s all ease-in-out;
}
a.buttons-html5 span:hover,
button.buttons-html5 span:hover,
a.buttons-print span:hover,
button.buttons-print span:hover{
   color: #FFF;
   border: 1px solid #f8c944;
}
.dataTables_filter {
   min-width: 215px;
}
div.dataTables_length {
   padding-top: 5px;
}
.dataTables_length label {
   max-width: 100% !important;
}
.MinMaxValuesMin {
   text-align: right;
   padding-right: 10px !important;
   border: 1px solid #14c71c;
   border-image: none;
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
}

.MinMaxValuesMax {
   text-align: left;
   padding-left: 10px !important;
   border: 1px solid #c71414;
   border-image: none;
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
}
.selector-singlesearch {
   background: #FFF;
   border: 1px solid #063d58;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   margin-top: -8px;
}

a.item-singlesearch,
a.item-singlesearch:visited {
   margin: 0;
   display: block;
   width: 100%;
   padding: 5px 6px;
   list-style: none;
   line-height: 15px;
   word-wrap: break-word;
   -webkit-touch-callout: none;
   cursor: pointer;
   color: #063d58;
   border-bottom: 1px solid rgb(154, 175, 187);
   background: rgba(252,234,187,1);
   background: -moz-linear-gradient(top, #FFF 0%, rgb(243, 243, 243) 50%, rgb(220, 220, 220) rgb(243, 243, 243) 51%, 100%);
   background: -webkit-gradient(left top, left bottom, color-stop(0%, #FFF), color-stop(50%, rgb(243, 243, 243)), color-stop(51%, rgb(220, 220, 220)), color-stop(100%, rgb(243, 243, 243)));
   background: -webkit-linear-gradient(top, #FFF 0%, rgb(243, 243, 243) 50%, rgb(220, 220, 220) 51%, rgb(243, 243, 243) 100%);
   background: -o-linear-gradient(top, #FFF 0%, rgb(243, 243, 243) 50%, rgb(220, 220, 220) 51%, rgb(243, 243, 243) 100%);
   background: -ms-linear-gradient(top, #FFF 0%, rgb(243, 243, 243) 50%, rgb(220, 220, 220) 51%, rgb(243, 243, 243) 100%);
   background: linear-gradient(to bottom, #FFF 0%, rgb(243, 243, 243) 50%, rgb(220, 220, 220) 51%, rgb(243, 243, 243) 100%);
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   transition: .5s all ease-in-out;
}

a.item-singlesearch:hover {
   color: #000;
   text-decoration: none;
   background: rgba(252,234,187,1);
   background: -moz-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%);
   background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(252,234,187,1)), color-stop(50%, rgba(252,205,77,1)), color-stop(51%, rgba(248,181,0,1)), color-stop(100%, rgba(251,223,147,1)));
   background: -webkit-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%);
   background: -o-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%);
   background: -ms-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%);
   background: linear-gradient(to bottom, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93', GradientType=0 );
}
label.customcheck {
   position: relative;
   display: inline-block;
   margin-bottom: -2px;
   margin-top: 10px;
   & > input:invalid ~ span {
      color: #b71c1c;
      font-weight: bold;
   }
}

label.customcheck span:before {
      content: "";
      background-color: #767676;
      border: 1px solid #454545;
      border-radius: 50%;
      cursor: pointer;
      height: 30px;
      position: absolute;
      left: 0;
      width: 30px;
      transition: 0.3s all ease-in-out;
      margin-top: 3px;
      top: 2px;
   }
   label.customcheck span {
      font-size: 16px;
      display: inline-block;
      position: relative;
      padding: 7px 0 10px 36px;
      text-align: justify;
   }
   label.customcheck span:after {
      border: 4px solid #ccc;
      border-left: none;
      border-top: none;
      border-right: none;
      content: "";
      height: 11px;
      opacity: 1;
      position: absolute;
      left: 5px;
      margin-top: 9px;
      width: 20px;
      transition: 0.3s all ease-in-out;
      top: 2px;
   }
label.customcheck input[type="checkbox"],
label.customcheck input[type="radio"] {
   display: none;
}
   label.customcheck input[type="checkbox"]:checked + span:before,
   label.customcheck input[type="checkbox"]:checked + input[type="hidden"] + span:before,
   label.customcheck input[type="radio"]:checked + span:before,
   label.customcheck input[type="radio"]:checked + input[type="hidden"] + span:before,
   label.customcheck.checked span:before {
      background-color: #2f9331;
      border-color: #177419;
   }

   label.customcheck input[type="checkbox"]:checked + span:after,
   label.customcheck input[type="checkbox"]:checked + input[type="hidden"] + span:after,
   label.customcheck input[type="radio"]:checked + span:after,
   label.customcheck input[type="radio"]:checked + input[type="hidden"] + span:after,
   label.customcheck.checked span:after {
      opacity: 1;
      transform: rotate(-45deg);
      border: 4px solid #FFF;
      border-top: none;
      border-right: none;
      width: 18px;
   }
table.datatableresp {
   border-collapse: collapse !important;
   width: 100% !important;
}

table.datatableresp tr.odd, table.datatableresp tr.even {
   border-bottom: 1px solid #AAA;
}

table.datatableresp tbody tr:last-child {
   border-bottom: 1px solid transparent;
}
table.dataTable tbody th, table.dataTable tbody td {
   padding: 2px 5px
}
.dataTables_wrapper label,
.dataTables_wrapper select,
.dataTables_wrapper input,
.dataTables_wrapper .dt-buttons {
   display: inline-block;
}

.dataTables_wrapper {
   padding: 15px;
}

.DataTableContainer {
   margin: 20px;
   border-radius: .6em;
   border: 1px solid #ADABA2;
}

@media screen and (max-width: 767px) {
   .dataTables_wrapper .dataTables_info,
   .dataTables_wrapper .dataTables_paginate {
      float: none;
      text-align: center;
   }

   .dataTables_wrapper .dataTables_paginate {
      margin-top: 0.5em;
   }
}

@media screen and (max-width: 640px) {
   .dataTables_wrapper .dataTables_length,
   .dataTables_wrapper .dataTables_filter {
      float: none;
      text-align: center;
   }

   .dataTables_wrapper .dataTables_filter {
      margin-top: 0.5em;
   }
}

table.dataTable th, table tr.GridViewFooter td {
   text-align: center;
   font-weight: bold;
}
.GridViewPager table {
   margin: auto;
}
.gridview > tbody > tr[level] {
   border-bottom: 1px solid #424242;
   text-align: center;
}

.gridview > tbody > tr[level]:last-child {
   border-bottom: 1px solid transparent !important;
}

.paddingtableResp {
   padding: 4px 3px !important;
}

.GridView tr {
   color: #333;
}

.GridViewFooter, table.gradienttable th, td.HeadHandicap {
   background-color: $primary-color;
}

.GridViewPager table td :has(span), .GridViewPager table td:hover {
   background: #FFF !important;
   color: #333;
   text-decoration: none;
}

.GridViewRow td, .GridViewRow th {
   background: #f7f7f7;
}

.GridViewRowAlternate td, .GridViewRowAlternate th {
   background: #e9e9e9;
}

.GridViewPager {
   background-color: #272727 !important
}

.GridViewPager td {
   background-color: #272727 !important
}

.GridView tr a, .GridViewPager td a {
   color: #FFF;
   font-weight: normal;
}

.dataTables_wrapper {
   background: #FFF;
   color: #333;
}

table.gradienttable {
   background-color: transparent;
   border: 1px solid rgb(170, 170, 170) !important
}

   table.gradienttable td {
      color: #333;
   }

   table.gradienttable th, td.HeadHandicap {
      background-image: none;
      color: #FFF;
   }
img.functicon {
   width: 20px;
   cursor: pointer;
}
.datatableresp .functIcon {
   width: 12px;
   max-width: 12px;
}
.GridViewPager table table.innerTable td.ResponsiveHeader, table.datatableresp table.innerTable td.ResponsiveHeader {
   display: none;
   text-align: center;
   background: #666;
   color: #FFF;
   width: calc(30%) !important;
   padding: 3px 5px !important;
}
.GridViewPager table table.innerTable td.data, table.datatableresp table.innerTable td.data {
   display: table-cell !important;
   padding: 0px;
}
.GridViewPager table table.innerTable, table.datatableresp table.innerTable {
   width: 100%;
}
@media (max-width: 1024px) {
   table .dataTable tfoot, table.dataTable tfoot tr {
      display: none;
   }
   .GridViewFooter {
      display: none !important;
   }
   .GridViewPager table td div.ResponsiveHeader, table.datatableresp td div.ResponsiveHeader {
      display: inline-block;
   }
   table.dataTable tbody td {
      padding: 0.5px 5px !important;
   }
   .GridViewPager table th, table.datatableresp th {
      display: none !important;
      width: auto !important;
   }
   .GridViewPager table td, table.datatableresp td {
      display: block !important;
      width: auto !important;
   }
   .GridViewPager table table.innerTable td, table.datatableresp table.innerTable td {
      display: table-cell !important;
   }
   .GridViewPager table td.cellbtn, table.datatableresp td.cellbtn {
      position: relative;
      height: 30px;
   }
   .GridViewPager table td button, table.datatableresp td button {
      position: absolute;
      top: 7px;
      right: -1px;
   }
   .datatableresp .functIcon {
      width: 100%;
      max-width: auto;
   }
}

/* The slider */
.box-switch {
   position: relative;
}
label.switch input {
   opacity: 0;
   width: 0;
   height: 0;
}
label.switch {
   margin: 0;
   display: inline-block;
   z-index: 1;
   padding: 0;
   max-width: none !important;
}

.slider {
   position: relative;
   cursor: pointer;
   color: #fff;
   background-color: #666;
   -webkit-transition: .4s;
   transition: .4s;
}

.slider:after {
   position: absolute;
   left: 28px;
   top: 5px;
   transition: .4s;
}
.slider:before {
   position: absolute;
   content: "";
   height: 14px;
   width: 14px;
   left: 0;
   bottom: 4px;
   background-color: white;
   -webkit-transition: .4s;
   transition: .4s;
   top: calc(50% - 7px);
}
label.switch input:checked + .slider:before {
   left: calc(100% - 14px);
}
.slider.round {
   display: inline-block;
}
.slider.round a {
   padding: 3px 18px;
   display: block;
   width: 100%;
   text-align: center;
}
.slider.round:before {
   border-radius: 50%;
}
label.switch input:not(:checked) + .slider a.header1 {
   background: #6c8e14;
}
label.switch input:not(:checked) + .slider a.header2 {
   background: rgba(101, 101, 101, 0.50);
}
label.switch input:checked + .slider a.header1 {
   background: rgba(101, 101, 101, 0.50);
}
label.switch input:checked + .slider a.header2 {
   background: #6c8e14;
}
/* The slider */

.form-control:disabled, .form-control[readonly] {
   background-color: #e9ecef !important;
   opacity: 1
}
.chosen-container {
   width: 100% !important;
}

.chosen-single {
   height: 30px !important;
   margin-bottom: 8px;
}
.chosen-single span,
.chosen-single div {
   padding-top: 3px;
}

/* Style the tab */
ul.tabulator {
   overflow: hidden;
   border: 1px solid #ccc;
   background-color: #f1f1f1;
   padding-left: 0;
   margin-bottom: 0;
}
/* Style the buttons inside the tab */
ul.tabulator li {
   background-color: inherit;
   float: left;
   border: none;
   outline: none;
   cursor: pointer;
   padding: 10px 12px 7px 12px;
   transition: 0.3s;
   font-size: 13px;
   list-style: none;
   position: relative;
   border-right: 1px solid #666;
   border-bottom: 1px solid #666;
   min-width: 50px;
   text-align: center;
}
ul.tabulator li.tablinks:hover {
   background: #3d69a7;
   color: #FFF;
   font-weight: bold;
}
ul.tabulator li.tablinksAdd {
   background-color: #4d8e14;
   padding: 8px 10px 9px 10px;
   min-width: auto;
}

ul.tabulator li.tablinksAdd:hover {
   background-color: #386c0a;
}
ul.tabulator li.tablinksFunct {
   padding: 0;
   min-width: auto;
}
ul.tabulator li.tablinks {
   background-color: #c2c2c2;
   font-weight: bold;
}
ul.tabulator li.tablinks.active {
   background-color: #666;
   color: #FFF;
   font-weight: bold;
}

ul .tabulator li:hover {
   background-color: #ddd;
}

ul.tabulator button.active {
   background-color: #ccc;
}

.tabulatorContent {
   display: none;
   padding: 6px 12px;
   border: 1px solid #ccc;
   border-top: none;
   opacity: 0;
   transition: .4s all ease-out
}

.tabulatorContent.active {
   display: block;
   opacity: 1;
}

.funtbtn {
   color: #FFF;
   display: block;
   font-size: 11px;
   width: 22px;
   text-align: center;
   height: 18px;
   transition: .3s all ease-in;
}

.funtbtn.delete {
   background: #d41e1e;
   border: 1px solid #a31d1d;
}

.funtbtn.delete:hover {
   background: #9f1f1f;
}
   .funtbtn.import,
   .funtbtn.export {
      background: #86158d;
      border: 1px solid #671d6c;
      transition: .3s all ease-in;
   }
.funtbtn.clone {
   background: #15448d;
   border: 1px solid #204989;
   transition: .3s all ease-in;
}
[collapseable] {
   height: 32px;
   padding: 4px 8px 8px 42px;
   font-weight: bold;
   overflow: hidden;
   margin-bottom: 10px;
   font-size: 18px;
   border: 1px solid #333;
   cursor: pointer;
   padding-left: 40px !important;
   transition: .3s all ease-in;
}
   [collapseable]:hover {
      padding-left: 80px !important;
   }
[collapseable]:after {
   content: '↓';
   font-size: 16px;
   border: 1px solid transparent;
   top: 0;
   position: absolute;
   left: 0;
   padding: 0px 0 4px 0;
   background: #666;
   color: #fff;
   width: 32px;
   text-align: center;
   font-weight: normal;
   transition: .3s all ease-in;
}
[collapseable]:hover:after {
   border: 1px solid rgb(172, 131, 20);
   background: rgb(235, 179, 26);
   font-weight: normal;
   width: 70px;
}
[collapseable].open:after {
   content: '↑'
}
div.roller {
   display: block;
   width: 100%;
   height: 32px;
   position: absolute;
   cursor: pointer;
   left: 0;
   top: 0;
   z-index: 9;
}
div.boxbutton {
   border: 1px solid #4074b5;
   background: #c9e7f7;
   padding: 10px;
   border-radius: 6px;
   margin: 4px 10px;
   color: #000;
   font-size: 14px;
   cursor: pointer;
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
}

div.boxbutton.active {
   border: 1px solid rgb(248, 181, 0);
   background: rgb(255, 245, 218);
   font-weight: bold;
   cursor: auto;
}

i.boxbutton, svg.boxbutton {
   font-size: 32px;
   background: #666;
   padding: 5px;
   border-radius: 5px;
   color: white;
   position: absolute;
   right: 20px;
   top: 10px;
   border: 1px solid white;
   cursor: pointer;
   transition: .5s all ease-in-out;
   box-sizing: border-box !important;
}

i.boxbutton:hover, svg.boxbutton:hover {
   background: rgb(206, 172, 12);
   color: white;
}
.diagram-tree {
   display: inline-block;
}
.diagram-tree ul {
   padding-top: 20px;
   position: relative;
   padding-left: 0px;
   display: flex;
   justify-content: center;
}

   .diagram-tree li {
      float: left;
      text-align: center;
      list-style-type: none;
      position: relative;
      padding: 16px 33px 0 33px;
   }

.diagram-tree li::before, .diagram-tree li::after {
   content: '';
   position: absolute;
   top: 0;
   right: 50%;
   border-top: 2px solid #333;
   width: 50%;
   height: 14px;
}

.diagram-tree li::after {
   right: auto;
   left: 50%;
   border-left: 2px solid #333;
}

.diagram-tree li:only-child::after, .diagram-tree li:only-child::before {
   display: none;
}

.diagram-tree li:only-child {
   padding-top: 0;
}

.diagram-tree li:first-child::before, .diagram-tree li:last-child::after {
   border: 0 none;
}

.diagram-tree li:last-child::before {
   border-right: 2px solid #333;
   border-radius: 0 5px 0 0;
   -webkit-border-radius: 0 5px 0 0;
   -moz-border-radius: 0 5px 0 0;
}

.diagram-tree li:first-child::after {
   border-radius: 5px 0 0 0;
   -webkit-border-radius: 5px 0 0 0;
   -moz-border-radius: 5px 0 0 0;
}

.diagram-tree ul ul::before {
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   border-left: 2px solid #333;
   width: 0;
   height: 20px;
}
.diagram-tree li a {
   text-decoration: none;
   color: #666;
   font-family: arial, verdana, tahoma;
   font-size: 11px;
   display: inline-block;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
}
.diagram-tree li a:hover + ul li::after,
.diagram-tree li a:hover + ul li::before,
.diagram-tree li a:hover + ul::before,
.diagram-tree li a:hover + ul ul::before {
   border-color: #fbba00;
}

.diagram-tree li a div.member-view-box {
   padding: 0px 2px;
   text-align: center;
   border-radius: 4px;
   position: relative;
}

.diagram-tree li a div.member-image {
   width: auto;
   background: #ffffff;
   padding: 5px 6px;
   position: relative;
   color: #333;
   font-size: 13px;
   border-radius: 6px;
}
.diagram-tree li a div.member-details {
   padding: 5px 20px;
   border: 1px solid #333;
   border-radius: 6px;
}
span.nothead {
   display: inline !important;
   width: 0;
   height: 0;
}
td.InteractionMessage{
   font-size: 16px;
}
div.select2-results-funct {
   margin-left: 0px;
   padding: 4px 0px 0px 0px;
   text-align: right;
   position: absolute;
   top: -37px;
   right: 0;
}
   div.select2-results-funct > span > svg {
      color: #fff;
      font-size: 16px;
      padding: 5px;
      border-radius: 3px;
      border: 1px solid #c5d7ff;
      transition: 0.3s all ease-in;
      cursor: pointer;
      background: #3a7be2;
      margin-right: 1px;
      width: 16px;
   }
   div.select2-results-funct > span > svg:hover {
      background: rgba(252,205,77,1);
      border: 1px solid rgb(251, 184, 0);
      transform: scale(1.2);
   }
span.select2.select2-container.itemmaxwidth ul.select2-selection__rendered li {
   width: calc(100% - 5px) !important;
}
.textindiv {
   width: calc(25% - 4px);
   border: 1px solid #BBB;
   outline: none;
}
.textindiv:focus {
   outline: none;
}
svg.diagram_funct_plus,
i.diagram_funct_plus,
svg.diagram_funct_minus,
i.diagram_funct_minus {
   position: absolute;
   padding: 8px;
   border: 1px solid #fff;
   border-radius: 20px;
   font-size: 8px;
   color: #fff;
   z-index: 9;
}
svg.diagram_funct_plus, i.diagram_funct_plus {
   top: 9px;
   background: #279d42;
   right: -21px;
}

svg.diagram_funct_minus, i.diagram_funct_minus {
   top: 8px;
   background: #bf2727;
   left: -21px;
}
div[collapseable] h2:before {
   content: '';
   width: 0px;
}

div[collapseable] h2:after {
   width: 0;
}

div[collapseable] h2 {
   padding-left: 0px;
   border-bottom: 0;
   padding-bottom: 50px;
   font-weight: bold;
   font-size: 15px;
}
div.inputText {
   position: relative;
   font-family: Calibri;
   display: block;
   border: 1px solid #999;
   border-radius: 4px;
   margin-bottom: 4px;
   margin-top: 10px;
}

   div.inputText:has(> input:invalid),
   div.inputText:has(> textarea:invalid),
   div.inputText:has(> select:invalid) {
      border: 1px solid #b71c1c;
   }
   div.inputText > input[type='color'] {
      width: 100%;
      margin-top: 6px;
      border: 0;
      border-radius: 5px;
   }
   div.inputText > input[type='text'],
   div.inputText > input[type='email'],
   div.inputText > input[type='password'],
   div.inputText > input[type='number'],
   div.inputText > input[type='date'],
   div.inputText > input[type='datetime-local'],
   div.inputText > input[type='time'],
   div.inputText > select,
   div.inputText > textarea,
   div.inputText > span.select2 {
      background: none;
      color: #000;
      font-size: 16px;
      padding: 10px 10px 12px 10px;
      display: block;
      width: 100%;
      margin-top: 6px;
      border: none;
      border-radius: 0;
      margin-bottom: 4px;
      &:focus {
         outline: none;
      }

&:not(&:focus)::placeholder {
   color: transparent;
}

&:focus ~ div.label {
   top: -1px;
   left: 10px;
   font-size: 14px;
   background: #fff;
   padding: 0 3px;
   height: 5px;
   line-height: 0;
}

&:focus ~ div.label {
   color: #007bff;
}

&:invalid ~ div.label {
   color: #b71c1c;
   font-weight: bold;
}

&:focus ~ .bar:before {
   width: 100%;
}

}
div.inputText > input[type='email'] {
   padding: 3px 5px;
}
div.inputText > input[type='date'],
div.inputText > input[type='datetime-local'],
div.inputText > input[type='time'] {
   padding: 2px 5px;
}
div.inputText > select {
   padding: 5px 5px;
   margin-bottom: 2px;
   height: 32px !important;
}

div.inputText > span.select2 {
   padding: 3px 0px 8px 0px;
   margin-top: 4px;
   margin-bottom: 2px;
}

   div.inputText > span.select2.select2-container .select2-selection--single {
      height: 23px;
   }

   div.inputText > span.select2.select2-container .select2-selection--multiple {
      min-height: 23px;
   }

   div.inputText > span.select2 span.select2-selection {
      border: 0;
      padding: 0;
   }

div .inputText > div.label {
   top: -1px;
   left: 10px;
   font-size: 14px;
   color: #333;
   background: #fff;
   padding: 0 3px;
   height: 5px;
   line-height: 0;
   position: absolute;
   pointer-events: none;
   transition: 300ms ease all;
}

div.inputText > span.bar {
   position: relative;
   display: block;
   &:before

{
   content: '';
   height: 2px;
   width: 0;
   bottom: 0px;
   position: absolute;
   background: #2081b7;
   transition: 300ms ease all;
   left: 0%;
}

}

div.divisorinterval {
   display: inline-block;
   background: rgb(90, 90, 90);
   color: #FFF;
   width: 50px;
   position: relative;
   transition: 300ms ease all;
   font-size: 18px;
}

   div.divisorinterval > span.up {
      left: 4px;
      bottom: -4px;
      position: absolute;
   }

   div.divisorinterval > span.down {
      right: 5px;
      top: -2px;
      position: absolute;
   }

div .inputText:focus-within {
   border: 1px solid #2081b7 !important;
}

   div.inputText:focus-within div.divisorinterval {
      background: #2081b7;
   }

   div.inputText:focus-within > span.bar:before {
      width: 100%;
   }

svg.functInput {
   position: absolute;
   top: 10px;
   right: 5px;
   padding: 0px;
   display: inline-block;
   font-size: 20px;
   cursor: pointer;
   transition: 300ms ease all;
}
svg.functInput:hover {
   color: #007bff;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
   border: 0 !important;
   outline: 0;
}

div.inputText li.select2-selection__choice {
   margin-top: 0 !important;
   line-height: 20px;
}

.select2-dropdown {
   margin-top: 5px !important;
}
span.select2.loginLanguage {
   width: calc(100% - 53px) !important;
   height: 22px;
}
div.renderitemarray {
   padding: 6px;
   border: 1px solid #666;
   margin: 4px 0;
   border-radius: 3px;
}
div.modelsection {
   padding: 10px;
   text-align: center;
   font-size: 18px;
   background: #333;
   color: #fff;
   cursor: pointer;
   border: 1px solid #fff;
   transition: .3s all ease-in-out;
}
   div.modelsection.active {
      background: #7ca2c9;
      transition: .3s all ease-in-out;
   }
div.sectionheader {
   padding: 20px;
   border: 1px solid #000;
   border-radius: 10px;
   margin-top: 20px;
   transition: .3s all ease-in-out;
}
div.sectiontitlemodel {
   position: absolute;
   top: 0px;
   left: 31px;
   font-size: 22px;
   background: #fff;
   width: auto;
   transition: .3s all ease-in-out;
}
div[data-panel].hidden {
   opacity: 0;
   max-height: 0;
   overflow: hidden;
   transition: 0.3s ease-in-out;
}
div[data-panel] {
   transition: 0.3s ease-in-out;
   opacity: 1;
   max-height: auto;
}