.material.itemList{
      margin: 0 auto;
      padding: 0;
}


.material.itemList .item{
      padding: 0;
      margin: 0;
      line-height: 32px;
      display: block;
      clear: both;
      overflow: hidden;
      position: relative;
      z-index: 1;
      transition: all 0.2s ease;
}

.material .item:hover{
      background-color: #1c1c1c;
}

.material.itemList .L1 .itemContainer,
.material.itemList .L2 .itemContainer
{
      min-height: 36px;
      padding: 8px 10px;
      display: block;
}

.material.itemList .L3 .itemContainer
{
      min-height: 46px;
      padding: 12px 10px;
      display: block;
}

.material.itemList.lowHeight .L1 .itemContainer
{
      min-height: 30px;
      padding: 5px 10px;
      display: block;
}

.material.itemList .divider {
      border-bottom: 1px solid #666;
      width: calc(100% - 50px);
      margin: 0;
      float: right;
      display: none;
}

.material.itemList .item:last-child .divider{
      border: 0;
}

.material.itemList.dividers .divider {
      display: block;
}

.material.itemList .itemLeft{
      height: 100%;
      margin: 0 10px 0 0;
      float: left;
      text-align: center;
      line-height: 32px;
      line-height: inherit;
}

.material.itemList .itemLeft0 .itemLeft{
      display: none;
}

.material.itemList .itemLeft1 .itemLeft{
      width: 32px;
}

.material.itemList .fa{
/*     padding-top: 3px; */
      line-height: inherit;
}

.material .itemMiddle{
      float: left;
      text-align: left;
}

.material .L1 .itemMiddle{

}

.material .L2 .itemMiddle{

}

.material .L3 .itemMiddle{

}

.material.itemList .itemRight{
      height: 32px;
      line-height: 32px;
      margin: 0 0 0 0;
      float: right;
      text-align: right;
      font-size: 0;
}

.material.itemList .itemRight a{
      display: inline-block;
      width: 30px;
      text-align: center;
      font-size: 10.5pt;
}


.material.itemList .itemRight0 .itemRight{
      display: none;
}

.material.itemList .itemRight1 .itemRight{
      width: 32px;
}

.material.itemList .itemRight2 .itemRight{
      width: 64px;
}

.material.itemList .itemRight3 .itemRight{
      width: 96px;
}

.material.itemList .itemRight4 .itemRight{
      width: 128px;
}

.material.itemList .itemLeft0.itemRight0 .itemMiddle{
      width: calc(100% - 0px - 0px);
}

.material.itemList .itemLeft0.itemRight1 .itemMiddle{
      width: calc(100% - 0px - 32px);
}

.material.itemList .itemLeft0.itemRight2 .itemMiddle{
      width: calc(100% - 0px - 64px);
}

.material.itemList .itemLeft0.itemRight3 .itemMiddle{
      width: calc(100% - 0px - 96px);
}

.material.itemList .itemLeft0.itemRight4 .itemMiddle{
      width: calc(100% - 0px - 128px);
}

.material.itemList .itemLeft1.itemRight0 .itemMiddle{
      width: calc(100% - 42px - 0px);
}

.material.itemList .itemLeft1.itemRight1 .itemMiddle{
      width: calc(100% - 42px - 32px);
}

.material.itemList .itemLeft1.itemRight2 .itemMiddle{
      width: calc(100% - 42px - 64px);
}

.material.itemList .itemLeft1.itemRight3 .itemMiddle{
      width: calc(100% - 42px - 96px);
}

.material.itemList .itemLeft1.itemRight4 .itemMiddle{
      width: calc(100% - 42px - 128px);
}

.material.itemList .itemLeft0 .divider{
      width: 100%;
}

.material .itemRightValue{
      width: 100%;
      text-align: right;
      font-size: 10.5pt;
      font-weight: 600;
}

.material .iconRound{
      width: 32px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      border-radius: 50%;
      background: #464646;
      color: white;
      font-size: 12pt;
      display: inline-block;
}

.material .icon{
      font-size: 14pt;
}

.material .icon.fa-sms{
      font-size: 16pt;
}

.material .item .itemMiddle1,
.material .item .itemMiddle2,
.material .item .itemMiddle3
{
      display: block;
}

.material .item .itemMiddle1{
      font-weight: 500;
      font-size: 10.5pt;
      line-height: 15px;
      margin: 0 0 2px 0;
}

.material .item .itemMiddle2,
.material .item .itemMiddle3
{
      font-weight: 400;
      font-size: 9pt;
      line-height: 14px;
}

.material .item .itemMiddle3{
      margin-top: 2px;
}

.material.itemList .L3.item{
      line-height: 46px;
}

.material .contextMenu{
      cursor: pointer;
}

.material .contextMenu:hover{
      color: white;
}


.material .groupName .itemMiddle,
.material .groupName .itemMiddle .itemMiddle1{
      font-size: 10pt !important;
      font-weight: 700;
      text-transform: uppercase;
}

.material .groupName .itemMiddle .itemMiddle2,
.material .groupName .itemMiddle .itemMiddle3{
      text-transform: none;
}

.contextMenu .fa-ellipsis-v{
    font-size: 11pt;
}

.material .contextMenu .fa{
      padding-top: 0 !important;
      border-radius: 50%;
      width: 26px;
      height: 26px;
      line-height: 26px !important;
      text-align: center;
}

.material .contextMenu:hover span{
      background: #464646;
      color: white !important;
}



/*  Ripple */
.ripplelink{
      position: relative;
      transition: all 0.2s ease;
      z-index: 1;
}

.ink {
      display: block;
      position: absolute;
      background:rgba(255, 255, 255, 0.3);
      border-radius: 100%;
      transform:scale(0);
}

.materialTabs{
      height: 46px;
      line-height: 46px;
      background: black;
      position: relative;
}

.materialTabs a{
      float: left;
      border-bottom: 2px solid transparent;
      font-size: 9.5pt;
      text-transform: uppercase;
      text-align: center;
      font-weight: 700;
      opacity: 0.7;
      height: 44px;
      line-height: 44px;
}

.materialTabs a:hover{
      opacity: 1;
      color: white;
}

.materialTabs2 a{
      width: 50%;
}

.materialTabs3 a{
      width: calc(100% / 3);
}

.materialTabs4 a{
      width: 25%;
}

.materialTabs .tabActive{
      opacity: 1;
}

.materialTabsWithIcons{
      height: 64px;
      background: #444444;
}

.materialTabsWithIcons a{
      text-transform: none;
      font-size: 9pt;
      font-weight: 500;
      line-height: 12px;
      height: 62px;
}

.materialTabsWithIcons a .fa{
      font-size: 12pt;
      height: 20px;
      line-height: 20px;
      margin: 12px 0 8px;
      color: #b3b3b3;
}

.materialTabsWithIcons hr{
      margin-top: 62px !important;
}

.materialTabsWithIcons a.tabActive, .materialTabsWithIcons a.tabActive .fa{
/*      color: #00ccff !important; */
        font-weight: 600;
}

.materialTabs2 a:nth-child(2).tabActive ~ hr{
      margin-left: 50%;
}

.materialTabs3 a:nth-child(2).tabActive ~ hr{
      margin-left: 33.33%;
}

.materialTabs3 a:nth-child(3).tabActive ~ hr{
      margin-left: 66.66%;
}

.materialTabs4 a:nth-child(2).tabActive ~ hr{
      margin-left: 25%;
}

.materialTabs4 a:nth-child(3).tabActive ~ hr{
      margin-left: 50%;
}

.materialTabs4 a:nth-child(4).tabActive ~ hr{
      margin-left: 75%;
}


/*
border-bottom slide on hover

.materialTabs4 a:nth-child(1):hover ~ hr {
      margin-left: 0% !important;
}


.materialTabs4 a:nth-child(2):hover ~ hr{
      margin-left: 25% !important;
}

.materialTabs4 a:nth-child(3):hover ~ hr{
      margin-left: 50% !important;
}

.materialTabs4 a:nth-child(4):hover ~ hr{
      margin-left: 75% !important;
}
*/

.materialTabs2 hr {
      height: 2px;
      width: 50%;
      margin: 0;
      background: white;
      border: none;
      transition: .3s ease-in-out;
      position: absolute;
      margin-top: 44px;
}

.materialTabs3 hr {
      height: 2px;
      width: 33.333%;
      margin: 0;
      background: white;
      border: none;
      transition: .3s ease-in-out;
      position: absolute;
      margin-top: 44px;
}

.materialTabs4 hr {
      height: 2px;
      width: 25%;
      margin: 0;
      background: white;
      border: none;
      transition: .3s ease-in-out;
      position: absolute;
      margin-top: 44px;
}

.material .groupLabel{
      font-size: 9.5pt;
      font-weight: 600;
      padding: 10px 10px 0 10px;
}

.animate {
      animation: ripple 0.65s linear;
}

@keyframes ripple {
      100% {opacity: 0; transform: scale(2.5);}
}

.materialSheetClose{
      float: right;
      margin: 4px 5px 0 0;
      font-size: 12pt;
}

.materialSheetClose:hover{
      color: #DC2127;
}

.materialSheetRight{
      background: #444444;
      width: 80%;
      max-width: 300px;
      height: 100%;
      position: fixed;
      right: -300px;
      z-index: 1000;
      top: 0;
      margin-left: 0px;
      overflow-y: auto;
}

.materialSheetRight .groupLabel{
      padding-left: 0;
}

.materialSheetRight .itemLeft{
      width: 20px !important;
}

.materialSheetLabel{
      font-weight: 600;
      margin: 10px 0 20px 0;
      font-size: 12pt;
      text-align: left;
}

.materialSheetBtns{
      margin: 20px 0;
      text-align: center;
}

.materialSheet .groupLabel{
      margin-top: 20px;
}


.material .setting .itemMiddle1{
      font-size: 11.5pt;
}

.material .setting .itemMiddle2{
      color: #00ccff;
}

.material .itemRight .fa-toggle-off,
.material .itemRight .fa-toggle-on{
      font-size: 16pt;
}

.material .itemRight .fa-pen-square{
      font-size: 14pt;
}

.material .itemRight .fa-plus-circle{
      font-size: 12pt;
}

.material .groupHeader{
      margin-top: 20px !important;
}

.material .groupHeader .itemContainer{
      padding: 0 !important;
      font-size: 10pt;
      color: #00ccff;
}

.material .groupHeader.item:hover{
      background-color: transparent !important;
}

.material .sublevel{
      padding-left: 15px;
      width: calc(100% - 15px);
}