:root {
    --accent: #5c6ac4;
    --main: #fff;
  }
  
  html {
    /* font-family: Open Sans, 'Helvetica', 'Arial', sans-serif; */
    font-family: 'Quicksand', sans-serif;
  }
  
  header,  footer {
    padding-left: 310px !important;
  }
  
  .main-ss {
    padding-left: 310px !important;
  }
  
  .main-ss-template {
    padding-left: 310px !important;
  }
  
  @media only screen and (max-width : 992px) {
    header, footer {
      padding-left: 0 !important;
    }
  
    .main-ss {
      padding-left: 0px !important;
    }
  
    .main-ss-template {
      padding-left: 0px !important;
    }
  
    .navbar-material .nav-wrapper .brand-logo img {
        height: 56px;
    }
  
    .navbar-material .nav-wrapper .profile-pic {
        height: 35px;
        margin: 5px;
        padding-left: 10px;
    }  
  }
  
  .card-table {
    height: 30vh; 
    overflow-y: scroll;
  }
  
  @media only screen and (max-width : 992px) {
    .card-table {
      height: 50vh; 
    } 
  }
  
  .btn-payment-methods {
    padding-top: 20px;
  } 
  
  
  
  @media only screen and (max-width : 1280px) {
    .btn-payment-methods {
      padding-top: 0px;
    } 
  }

  .card-purple {
    background-color: #774fad
  }
  
  /* tr:hover{
    background-color: #E7EAFA;
  } */
  
  .datepicker-date-display {
    background-color: #5c6ac4;
  }
  
  .datepicker-table td.is-selected {
    background-color: #E7EAFA; 
    color: #263238;
  }
  
  .active-templ {
    border: 3px dashed #5c6ac4;
  }
  
  .file-selected {
    background-color: rgba(231,234,250, 0.6); 
  }
  
  .tabs.tabs-transparent .tab a,
  .tabs.tabs-transparent .tab.disabled a,
  .tabs.tabs-transparent .tab.disabled a:hover {
    color: rgba(255, 255, 255, 0.7);
  }
  
  
  .tabs .tab a {
    /* color: rgba(238, 110, 115, 0.7); */
    color: rgba(38,50,56, 0.9);
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 24px;
    font-size: 14px;
    text-overflow: ellipsis;
    /* text-transform: capitalize; */
    overflow: hidden;
    -webkit-transition: color .28s ease, background-color .28s ease;
    transition: color .28s ease, background-color .28s ease;
  }
  
  .tabs .tab a:focus, .tabs .tab a:focus.active {
    background-color: rgba(231,234,250, 0.6);
    outline: none;
  }
  
  .tabs .tab .tab-dashboard a:focus, .tabs .tab a:focus.active {
    background-color: #fff;
    outline: none;
  }
  
  .tabs .tab a:hover, .tabs .tab a.active {
    background-color: transparent;
    color: #5c6ac4;
  }
  
  .tabs .tab.disabled a,
  .tabs .tab.disabled a:hover {
    color: rgba(231,234,250, 0.4);
    cursor: default;
  }
  
  .tabs .indicator {
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color: #5c6ac4;
    will-change: left, right;
  }
  
  .collection .collection-item.active {
    background-color: #E7EAFA;
    color: #263238
  }
  
  .toast-supersite {
    background-color: #E7EAFA; 
    color: #263238;
  }
  
  table.orders-table > tbody > tr {
    cursor: pointer;
  }
  
  table.striped tr {
    border-bottom: none;
  }
  
  table.striped > tbody > tr:nth-child(odd) {
    /* background-color: rgba(242, 242, 242, 0.5); */
    background-color: #E7EAFA;
  }
  
  table.highlight > tbody > tr:hover {
    background-color: #5c6ac4;
  }
  
  table.highlight > tbody > tr:hover > td  {
    color: #fff;
  }
  
  
  
  .pagination li.active {
    background-color: #5c6ac4;
  }
  
  .switch label input[type=checkbox]:checked+.lever {
    background-color: #969FD2; 
  }
  
  .switch label input[type=checkbox]:checked+.lever:after {
    background-color: #5c6ac4;
  }
  /*.side-nav .collapsible-body li a, .side-nav.fixed .collapsible-body li a */
  
  .card.small .card-image, .card.medium .card-image, .card.large .card-image {
    max-height: 100%;
    overflow: hidden;
  }
  
  
  .card .card-image img {
    display: block;
    border-radius: 2px 2px 0 0;
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }
  
  /*
  .card .card-image img {
    height: 100%;
  } */
  
  #main-menu .collapsible-body li a {
    font-size: 0.9em;
  }
  
  .tr-file-selection:hover{
    cursor: pointer;
  }
  
  .selected-col {
    border: 3px solid blue;
  }
  
  .row-lnd {
      border: 3px dashed #607d8b;
    margin-bottom: 5px;
    position: relative;
  }
  
  .initial-height {
        height: 180px;
  }
  
  .row-lnd:hover {
      border: 3px dashed black;
  }
  
  
  .toolbar-row {
    position: absolute;
    display: none;
    /*margin: auto;*/
    left: 50%; 
    /*margin-right: -50%;*/
    transform: translate(-50%);
    /*transform: translate(-50%, -50%)*/
    /*width: 50%;*/
  }
  
  .row-lnd:hover .toolbar-row {
    display: block;
    z-index: 201;
    bottom: 0;
    /*border: 3px dashed black;*/
  }
  
  .row-lnd:hover .toolbar-row  a {
    margin: auto;
  }
  
  .row-menu-header {
    /* margin-bottom: 5px; */
    position: relative;
  }
  
  .row-menu-header:hover .row.container{
      border: 2px dashed #5c6ac4;
  } 
  
  .moduleitems li a {
    height: 100%;
  }
  
  .desc-text ol {
    list-style: none;
    counter-reset: my-awesome-counter;
  }
  .desc-text li {
    counter-increment: my-awesome-counter;
    margin: 0.25rem;
  }
  .desc-text li::before {
    content: counter(my-awesome-counter);
    background: #662974;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-block;
    line-height: 2rem;
    color: white;
    text-align: center;
    margin-right: 0.5rem;
  }
  .desc-text ol ol li::before {
    background: #DE51FF;
  }
  .desc-text ol ol ol li::before {
    background: #EE9EFF;
  }
  
  /* .desc-text ol {
    counter-reset: my-awesome-counter;
    list-style: none;
  } */
  
  /* 
  .desc-text ol li.parent-list{
    counter-increment: my-awesome-counter;
  }
  
  .desc-text ol li.parent-list::before {
    content: counter(my-awesome-counter) " - ";
  }
  
  .desc-text ol > ol  {
    counter-reset: item;
  }
  
  .desc-text ol > ol > li:before {
    counter-increment: item;
    margin-bottom: 5px;
    margin-right: 10px;
    content: counter(item);
    background: gold;
    border-radius: 100%;
    color: white;
    width: 1.2em;
    text-align: center;
    display: inline-block;
  }  */
  
  
  .checkout-section{
    position: relative;
  }
  
  .checkout-section .info-section{
    position: relative;
  } 
  
  .checkout-section .logo-section{
    position: relative;
  }
  
  .checkout-section .full-price-section{
    position: relative;
  }
  
  .checkout-section .price-description{
    position: relative;
  }
  
  
  .checkout-section .form-section{
    position: relative;
  } 
  
  .checkout-section .btn-section{
    position: relative;
  } 
  
  .checkout-section .form-desc-section{
    position: relative;
  } 
  
  .checkout-section-active {
    /* border: 2px dashed #5c6ac4; */
    border: 2px dashed #f4511e;
    
  }
  
  /* 
   
  .template2.checkout-section.info-section:hover{
    border: 2px dashed #5c6ac4;
  }  */
  
  
  /* .parent-bg { 
    display: block; 
    height: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
  }
  
  .parent-bg:hover { 
    border: 2px dashed #5c6ac4;
  } */
  
  /* .template2.checkout-section.info-section .logo-section:hover{
    border: 2px dashed #5c6ac4;
  } 
  
  .template2.checkout-section.info-section .full-price-section:hover{
    border: 2px dashed #5c6ac4;
  }  */
  
  .checkout-section.info-section.info-panel.editable .price-description:hover{
    border: 2px dashed #5c6ac4;
  } 
  
  
  .checkout-section.payment-form-section {
    height: 95vh; 
    overflow-y: visible;
    box-shadow: -3px 0 3px -5px #333;
  } 
  
  .checkout-section.payment-form-section .form-desc-section {
    margin-bottom: 0;
  } 
  
  .checkout-section.payment-form-section .form-desc-section .col {
    margin-bottom: 0px;
  } 
  
  .checkout-section.payment-form-section .form-section {
    margin-bottom: 0;
  } 
  
  .checkout-section.payment-form-section .form-section .col {
    margin-top: 5px;
    margin-bottom: 0;
  } 
  
  .checkout-section.payment-form-section .form-section .input-field > label:not(.label-icon).active {
    -webkit-transform: translateY(-5px) scale(0.8);
            transform: translateY(-5px) scale(0.8);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
  }
  
  
  .checkout-section.payment-form-section .form-card-section {
    margin-bottom: 0;
  } 
  
  .checkout-section.payment-form-section .order-total-section{
    margin-bottom: 5px;
  } 
  
  /* .checkout-section.payment-form-section:hover {
    border: 2px dashed #5c6ac4;
  }  */
  
  /* .checkout-section.payment-form-section.editable:hover .form-section:hover{
    border: 2px dashed #5c6ac4;
  }  */
  
  .checkout-section.payment-form-section.editable:hover  .btn-section:hover{
    border: 2px dashed #5c6ac4;
  } 
  
  .checkout-section.payment-form-section.editable:hover .form-desc-section:hover{
    border: 2px dashed #5c6ac4;
  } 
  
  .checkout-section.payment-form-section.editable:hover .order-header-section:hover{
    border: 2px dashed #5c6ac4;
  } 
  
  .checkout-section.payment-form-section.editable:hover .order-total-section:hover{
    border: 2px dashed #5c6ac4;
  } 
  
  .checkout-section.payment-form-section.editable .order-bump-section:hover .order-bump-item .desc-text:hover{
    border: 2px dashed #5c6ac4;
  }
  
  table td div[contenteditable="true"]:hover{
    border: 2px dashed #5c6ac4;
  } 
  
  
  .checkout-section .toolbar-menu-header {
    position: absolute;
    display: none;
    top: 0;
    right: 0;
    /* left: 50%; 
    transform: translate(-50%); */
    background-color: #eee;
  }
  
  
  .checkout-section .toolbar-menu-header a i {
    color: #607d8b;
    padding-top: 5px;
  }
  
  .toolbar-menu-header-active {
    display: block;
    z-index: 250;
    position: absolute;
    right: 0;
    top: 0px;
    background-color: #eee;  
  }
  
  
  /* .checkout-section.info-section:hover .checkout-section.toolbar-menu-header {
    display: block;
    z-index: 250;
  } */
  
  /* 
  .parent-bg:hover .toolbar-menu-header {
    display: block;
    z-index: 250;
  }  */
  
  /* 
  .checkout-section.info-section .logo-section:hover .toolbar-menu-header{
      display: block;
      z-index: 250;
    }
  
  .checkout-section.info-section .full-price-section:hover .toolbar-menu-header {
    display: block;
    z-index: 250;
  } 
  
  .checkout-section.info-section .price-description:hover .toolbar-menu-header {
    display: block;
    z-index: 250;
  } 
  */
  .checkout-section.payment-form-section .form-section:hover .toolbar-menu-header {
    display: block;
    z-index: 250;
  }
  
  /* .checkout-section.payment-form-section .btn-section:hover .toolbar-menu-header {
    display: block;
    z-index: 250;
  } */
  
  /* .checkout-section.payment-form-section .form-desc-section:hover .toolbar-menu-header {
    display: block;
    z-index: 250;
  } */
  
  
  .media-lib{
    position: relative;
  }
  
  .media-lib .media-info  {
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(231,234, 250, 0.8);
    border-top: 1px solid rgba(160, 160, 160, 0.2);
    padding: 16px 24px;
  }
  
  .media-lib .media-info:last-child {
    border-radius: 0 0 2px 2px;
  }
  
  .media-lib .media-info a {
    overflow-wrap: break-word; 
    text-transform: lowercase;
  }
   
  .media-lib:hover .media-info{
    display: block;
    z-index: 250;
  } 
  
  
  .media-lib .delete-button {
    position: absolute;
    display: none;
    top: 0;
    right: 0;
  }
  
  .media-lib:hover .delete-button{
    display: block;
    z-index: 250;
  }
  
  .media-lib .audio-controls {
    margin: auto;
  }
  
  .media-lib .audio-controls a i{
    font-size: 8em;
    color: #5c6ac4;
  }
  
  .media-lib .media-controls{
    display: none;
    align-items: center;
    height:100%;
    position: absolute!important;
    top:0;
    left:0;
    width:100%;
    z-index:200;
    background:#E7EAFA;
    /* background: #000;*/
    opacity:0.5;
    /* overflow: scroll; */
  }
  
  .media-lib .media-controls a{
    margin: auto;
  }
  
  .media-lib .media-controls a i{
    font-size: 8em;
    color: #5c6ac4;
  }
  
  
  .media-lib:hover .media-controls{
    display: flex;
  }
  
  
  .media-lib .media-controls-tab{
    display: none;
    align-items: center;
    height:100%;
    position: absolute!important;
    top:0;
    left:0;
    width:100%;
    z-index:200;
    background:#E7EAFA;
    /* background: #000;*/
    opacity:0.5;
    /* overflow: scroll; */
  }
  
  .media-lib .media-controls-tab a{
    margin: auto;
  }
  
  .media-lib .media-controls-tab a i{
    font-size: 2em;
    color: #5c6ac4;
  }
  
  
  .media-lib:hover .media-controls-tab{
    display: flex;
  }
  
  
  #upload-list-container {
    display: none;
    position: fixed;
    max-height: 450px;
    overflow-y: auto;
    z-index: 10000;
  }
  
  @media only screen and (max-width: 600px) {
    #upload-list-container {
        min-width: 100%;
        bottom: 0%;
    }
  }
  
  @media only screen and (min-width: 601px) and (max-width: 992px) {
    #upload-list-container {
        right: 2%;
        bottom: 7%;
        max-width: 90%;
    }
  }
  
  @media only screen and (min-width: 993px) {
    #upload-list-container {
        bottom: 7%;
        right: 2%;
        max-width: 86%;
    }
  }
  .upload-notification {
    border-radius: 2px 2px 2px 2px;
    /* top: 35px; */
    top: auto !important;
    right: 10%;
    bottom: 10%;
    left: auto!important;
    width: auto;
    margin-top: 10px;
    position: relative;
    max-width: 100%;
    height: auto;
    min-height: 48px;
    line-height: 1.5em;
    background-color: #fff;
    border: 1px solid #5c6ac4;
    /* padding: 10px 25px; */
    font-size: 1.1rem;
    font-weight: 300;
    color: #323232;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    cursor: default;
  }
  
  .upload-notification .upload-header{
    background-color: #5c6ac4;
    color: #fff;
    padding: 10px 25px;
  }
  .upload-notification .upload-header a {
    color: #fff;
  }
  .upload-notification .upload-list {
    padding: 10px 25px;
    background-color: #fff;
    color: #323232;
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .upload-progress{
    padding-left: 10px;
  }
  
  
  .editable{
    position: relative;
  } 
  
  .editable .toolbar-menu-header {
    position: absolute;
    display: none; 
    top: 0;
    right: 0;
    /* left: 50%; 
    transform: translate(-50%); */
    background-color: #eee;
    z-index: 250;
  }
  
  .editable .toolbar-menu-header a i {
    color: #607d8b;
    padding-top: 5px;
  }
  
  
  /*.main-ss-template .toolbar-menu-header {
    position: absolute;
    display: none;
    right: 11%;
    top: 0px;
    background-color: #eee;
  }*/
  
  
  .main-ss-template .toolbar-menu-header {
    position: absolute;
    display: none;
    right: 11%;
    top: 0px;
    background-color: #eee;
  }
  
  .main-ss-template .toolbar-menu-header a i {
    color: #607d8b;
    padding-top: 5px;
  }
  
  
  /* .toolbar-menu-header {
    position: absolute;
    display: none;
    right: 0;
    top: 0px;
    background-color: #eee;
  }
  
  .toolbar-menu-header a {
    padding: 0;
    margin: 0;
  }
  
  .toolbar-menu-header a i{
    margin: 0;
  } */
  
  .notification-badge {
    position: relative;
    right: -20px;
    top: -15px;
    color: #fff;
    background-color: #941e1e;
    margin: 0 -.8em;
    border-radius: 50%;
    padding: 5px 10px;
  }
  
  .notif{
    position: absolute;
  }
  
  .notification-container {
    position: relative;
    /* width: 16px; */
    height: 16px;
    /* top: 15px;
    left: 15px; */
  }
  
  .notification-counter {   
    position: absolute;
    top: 10px;
    right: 5px;
    
    background-color: rgba(212, 19, 13, 1);
    color: #fff;
    border-radius: 3px;
    padding: 1px 3px;
    font: 10px 'Quicksand', sans-serif;
  }
  
  
  .row-menu-header .toolbar-menu-header {
    position: absolute;
    display: block;
    /* z-index: 250; */
    background: transparent;
    right: 0;
    top: 0px;  
    /* bottom: 0; */
    /*border: 3px dashed black;*/
  }
  
  .row-menu-header .toolbar-menu-header a {
    padding: 0;
    margin: 0;
  }
  
  .row-menu-header .toolbar-menu-header a i{
    margin: 0;
  }
  
  .row-menu-header .sub-menu-header{
    position: absolute;
    display: none;
    right: 0;
    top: 0px;
    background-color: inherit;
    height: 100%;
  }
  
  
  .row-menu-header .sub-menu-header a {
    padding: 0;
    margin: 0;
  }
  
  .row-menu-header .sub-menu-header a i{
    margin: 0;
  }
  
  .row-menu-header:hover .sub-menu-header {
    display: block;
    /* z-index: 450; */
    background-color: transparent;
    background-color: #eee;
  } 
  
  
  
  /* .row-menu-header .toolbar-menu-header:hover .sub-menu-header {
    display: block;
    z-index: 250;
    background-color: #eee;
  }  */
  
  /* .module-item.row-menu-header .desc-text{
    width: 100%;
  } */
  
  .btn-previous a, .btn-next a{
    overflow: visible;
  }
  
  .desc-text.btn-text[contenteditable="true"]{
    display: inline-block;
    word-wrap: break-word;
    outline:none;
    overflow-y: visible;
    overflow-x: visible;
    /* padding: 0; */
    margin-top: 0;
  }  
  
  /* div[contenteditable="true"] {
    display: inline-block;
    word-wrap: break-word;
    outline: none;
    overflow-y: auto;
    overflow-x: hidden;
  } */
  /*.module-item.row-menu-header .html-editor {
    /* position: absolute;
    display: none;
    top: 0px; 
    /* border: 1px solid black; 
    /* background-color: #eee; 
    /* height: 100%;
    width: 100%; 
  }*/
  
  
  .module-item.row-menu-header .toolbar-menu-header {
    position: absolute;
    display: none;
    right: 11%;
    top: 0px;
    background-color: #eee;
  }
  
  .module-item.row-menu-header .toolbar-menu-header a {
    padding: 0;
    margin: 0;
  }
  
  .module-item.row-menu-header .toolbar-menu-header a i{
    margin: 0;
  }
  
  
  .module-item.row-menu-header:hover .toolbar-menu-header {
    display: block;
    z-index: 250;
    /* bottom: 0; */
    
  } 
  
  .main-ss-template.row-menu-header:hover .toolbar-menu-header {
    display: block;
    z-index: 250;
    margin-right: 35%;
    top: 20px;
    /* bottom: 0; */
    /*border: 3px dashed black;*/
  }
  
  
  
  /**********
  #landingHTML .toolbar-row {
      visibility: hidden;
      height: 0;
      width: 100%;
      bottom: 0;
  }
  
  .toolbar-row .navigation {
      position: relative; 
      width: 100%;
      margin: auto;
      top: -30px;
  }
  
  .toolbar-row .navigation a {
      margin: auto;
  }
  
  #landingHTML > div.row-lnd:hover + div.toolbar-row
    ,#landingHTML > div.toolbar-row:hover {
      visibility: visible;
      z-index: 200;
  }
  
  ***********/
  
  /*#landingHTML > div.row-lnd:hover + .row-lnd.div.toolbar
    ,#landingHTML > .row-lnd.div.toolbar:hover {
      visibility: visible;
      z-index: 200;
  }
  */
  
  
  .col-lnd {
      border: 3px dashed #e65100;
      position: relative;
      /*height: 150px;*/
    z-index: 200;  
  }
  
  .col-lnd:hover {
      border: 3px dashed #d84315;	
  
  }
  
  .toolbar-col {
      display: none;
      position: absolute;
    top: 0;
    right: 0; 
    width: 30px; /* makes the menu vertical*/
  }
  
  .col-lnd:hover .toolbar-col {
      display: block;
      z-index: 200;
      top: 0;
      right: 0;
  }
  
  .editme {
    border: 3px dashed #fff; /*#e65100;*/
    position: relative;
    z-index: 200;  
  }
  
  .editme:hover {
    border: 3px dashed #2962ff; 
  
  }
  
  .toolbar-editme {
    position: absolute;
    display: none;
    left: 50%; 
    transform: translate(-50%);
  }
  
  .editme:hover .toolbar-editme {
    display: block;
    z-index: 201;
    bottom: -40px;  
  }
  
  
  .colorpicker {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    margin-right: 6px;
  }
  
  .screen {
    /*margin: 15px auto 30px;*/
    /*width: 97%;*/
  }
  
  .screen .zoomer-wrapper {
    background: #fff;
  }
  
  .screen .start {
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
    z-index: 99;
  }
  
  .screen .start > span {
    display: block;
    background: #34495E;
    padding: 10px 20px;
    width: 450px;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    text-align: center;
    margin: 170px auto 0px;
  }
  
  .screen .toolbar {
    background: #E1E0E0;
    height: 35px;
    padding: 0px 0px 0px 11px;
  }
  
  .screen .toolbar .buttons {
    float: left;
    height: 13px;
    margin-top: 11px;
  }
  
  .screen .toolbar .title {
    font-size: 14px;
    color: #000;
    text-align: center;
    margin-right: 80px;
    padding-top: 5px;
  }
  
  .screen .toolbar .left {
    display: block;
    width: 13px;
    height: 13px;
    float: left;
    border-radius: 13px;
    margin-right: 6px;
  }
  
  .screen .toolbar .left.red {
    background: #E74C3C;
  }
  
  .screen .toolbar .left.yellow {
    background: #F4A62A;
  }
  
  .screen .toolbar .left.green {
    background: #16A085;
  }
  
  
  .style-editor input[type=range] + .thumb.active .value {
    color: #fff;
    margin-left: 2px;
    margin-top: -10px;
    font-size: 10px;
    font-weight: bold;
  }
  
  .style-editor .row {
    margin-bottom: 2px; 
  }
  
  
  .formatTextMenu {
      position: absolute;
      display: none;
      border: #cfd8dc solid 1px;
      background: #eceff1;
      z-index: 2500;
  }
  
  #cal1{
      position:absolute;
      height:0px;
      width:0px;
      top:100px;
      left:100px;
      overflow:none;
      z-index:-100;
  }
  #cal2{
      position:absolute;
      height:0px;
      width:0px;
      top:0px;
      left:0px;
      overflow:none;
      z-index:-100;
  }
  
  /*#newText {
      background: skyblue;
      padding:10px;
      display: inline-block;
  }*/
  
  
  
  #style-editor .newText{
      /*background: skyblue;*/
      display: inline-block;
      border: solid 1px #222;
      outline:none;
      border-color:#9ecaed;
      box-shadow:0 0 10px #9ecaed;    
  }
  
  
  div:not(.btn-next)[contenteditable="true"], div:not(.btn-previous)[contenteditable="true"]{
    display: inline-block;
    word-wrap: break-word;
    outline:none;
    /* padding:10px; */
    /* height: 25vh;  */
    /* height: 100%;  */
    /* width: 100%; */
    margin-top: 5px;
    overflow-y: auto;
    overflow-x: hidden;
  } 
  
  pre{
      white-space: pre-wrap;
      background: #EEE;
  }
  
  
  .format-text-toolbar {
    display: inline-block;
    width: 15%;
    text-align: left;
    border: 1px solid red;
    padding: 0px 0px 0px ;
  }
  
  .format-text-toolbar a {
    width: 35px;
    height: 25px;
    margin: 0px;
    text-align: center;
    font-size: 10px;
    border: 1px solid ; 
    padding: 0px 0px 0px;
  }
  
  .htmltext {
    display: inline-block;
    border: solid 1px #222;
    outline:none;
    border-color:#9ecaed;
    height: 250px;
    padding: 15px;
    overflow-y: auto;
  }
  
  .htmltext #htmlText {
    height: 240px;
    font-family: "Roboto"; 
    font-style: normal; 
    font-weight: 400; 
  }
  
  .dropzone  {
    width: 300px;
    height: 200px;
    background-color: grey;
  }
  
  .btn-google {
      background: #fff url("/images/google/google-identity-icon.png") no-repeat 10px center;
      border: 1px solid #ecede8;
      color: #606159
  }
  
  .btn-google:focus {
      background-color: #d9dad0
  }
  
  .btn-google:hover {
      background-color: #d9dad0;
      color: #606159
  }
  
  /* side */
  
  .menu {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    z-index: 1041;
  }
  
  .menu .toggle {
    background: none repeat scroll 0 0 #01579b;
    box-shadow: 2px 0 0 rgba(0, 0, 0, 0.1);
    color: #eee;
    height: 41px;
    line-height: 41px;
    position: absolute;
    right: -42px;
    text-align: center;
    top: 0px;
    font-size: 18px;
    width: 42px;
  }
  
  .menu .toggle > i {
    width: 20px;
    position: relative;
    top: 5px;
  }
  
  .menu .main {
    background: none repeat scroll 0 0 #eceff1;
      height: 100% !important;
      overflow-y: auto;
      top: 0px;
      /*padding-top: 20px;*/
      width: 210px;
      height: 100%;
      float: left;
      box-shadow: -10px 0 2px rgba(0, 0, 0, 0.08) inset;
  }
  
  .menu .main > ul {
    margin: 0px 0px 0px 0px;
    padding: 0px;
  }
  
  /* end side */
  
  
  #dataEditor {
      position: relative;
      width: 800px;
      height: 35vh;
  }
  
  .resp-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
  }
  
  .resp-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  
  
  .v-header{
    height:100vh;
    display:flex;
    align-items:center;
    color:#fff;
    position: relative;
  }
  
  .v-header-left{
    height:100vh;
    display:flex;
    align-items:left;
    /* color:#fff; */
    position: relative;
  }
  
  .bg-video-container{
    max-width:100%;
    padding-left:1rem;
    /* padding-right:1rem; */
    margin:auto;
    text-align:center;
    padding-bottom: 0px;
  }
  
  .bg-container-left{
    max-width:100%;
    padding-left:1rem;
    /* padding-right:1rem; */
    margin:auto;
    text-align:left;
    padding-bottom: 0px;
  }
  
  @media(max-width:960px){
    .bg-video-container{
      padding-right:3rem;
      padding-left:3rem;
    }
  
    .bg-container-left{
      padding-left: 3rem;
    }
  
  }
  
  .fullscreen-video-wrap{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    overflow:hidden;
  }
  
  .fullscreen-video-wrap video{
    min-height:100%;
    min-width:100%;
  }
  
  .fullscreen-video-wrap img{
    height: 100%;
    width: 65%;
  }
  
  @media(max-width:960){
    .fullscreen-video-wrap img{
      height: 100%;
      width: auto;
    }
  }
  
  .fullscreen-video-wrap iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }
  
  .header-overlay{
    height:100vh;
    position: absolute;
    top:0;
    left:0;
    /* width:100vw; */
    width:100%;
    z-index:1;
    /* background:#225470; */
    /* background: #5c6ac4; */
    /* background: #311b92; */
    opacity:0.65;
  }
  
  .header-content{
    z-index:2;
    margin: auto;
  }
  
  /* .header-content-left{
    z-index: 2;
    width: 40%;
    margin-top: 3%;
    padding: 30px;
  } */
  
  .header-content-left{
    margin-top: 0px!important;
    padding: 15px;
    height: 100%;
  }
  
  .header-content-left .header-content-subtitle {
    font-size: 4.1rem;
    font-weight: 300; 
    margin-top: 75px;
  }  
  
  .header-content-left .header-content-subtitle-1 {
    font-size: 2.40rem;
    font-weight: 300; 
    margin-top: 85px;
    padding-bottom: 20px;    
  }
  
  .header-content-left .btn-start-biz { 
    margin-top: 60px;
  }
  
  @media only screen and (max-width: 600px) {
    .header-content-left{
      margin-top: 0px!important;
      /* padding: 15px; */
      height: 100%;
    }
  
    .header-content-left .header-content-subtitle {
      font-size: 2.92rem;
      font-weight: 300; 
      margin-top: 15px;
    }  
  
    .header-content-left .header-content-subtitle-1 {
      font-size: 1.64rem;
      font-weight: 300; 
      margin-top: 25px;
      padding-bottom: 20px;    
    }
  
    .header-content-left .btn-start-biz { 
      margin-top: 10px;
      font-size: 11px!important;
    }
  } 
  
  @media only screen and (max-width: 600px) and (min-height: 660px){
    .header-content-left{
      margin-top: 0px!important;
      /* padding: 15px; */
      height: 100%;
    }
  
    .header-content-left .header-content-subtitle {
      font-size: 2.92rem;
      font-weight: 300; 
      margin-top: 15px;
    }  
  
    .header-content-left .header-content-subtitle-1 {
      /* position: absolute; */
      top: 45%;
      font-size: 1.64rem;
      font-weight: 300; 
      padding-bottom: 20px;
    }
  
    .header-content-left .btn-start-biz { 
      position: absolute;
      top: 70%;
      font-size: 11px!important;
    }
  
    .header-content-left .free-desc { 
      position: absolute;
      top: 80%;
    }
  } 
  
  
  @media only screen and (min-width: 700px)  and (max-width: 920px) {
    .header-content-left{
      margin-top: 0px!important;
      padding: 15px;
      height: 100%;
    }
  
    .header-content-left .header-content-subtitle {
      font-size: 1.92rem;
      font-weight: 300; 
      margin-top: 15px;
    }  
  
    .header-content-left .header-content-subtitle-1 {
      font-size: 1.25rem;
      font-weight: 300; 
      margin-top: 15px;
      padding-bottom: 20px;    
    }
  
    .header-content-left .btn-start-biz { 
      margin-top: 10px;
    }
  
  } 
  
  
  
  @media only screen and (min-width: 1023px) and (max-width: 1281px){
    .header-content-left{
      margin-top: 0px!important;
      padding: 15px;
      height: 100%;
    }
  
    .header-content-left .header-content-subtitle {
      font-size: 2.92rem;
      font-weight: 300; 
      margin-top: 75px;
    }  
  
    .header-content-left .header-content-subtitle-1 {
      font-size: 1.64rem;
      font-weight: 300; 
      margin-top: 70px;
      padding-bottom: 20px;    
    }
  
    .header-content-left .btn-start-biz { 
      margin-top: 50px;
    }
  } 
  
  .header-container {
    position:relative;
  }
  
  .header-card {
    position:relative;
    z-index:10;
  }
  
  .header-cardbg {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    z-index:1;
  }
  
  
  
  .heatmap-wrapper {
    height:100%;
    width:100%;  
    position: relative;
    overflow: scroll;
  }
  
  .heatmap-overlay{
    height:100%;
    position: absolute!important;
    top:0;
    left:0;
    width:100%;
    z-index:1;
    /* background:#225470; */
    /* background: #000;
    opacity:0.65;  */
    /* overflow: scroll; */
  }
  
  .heatmap-canvas {
    z-index: 10;
  }
  
  /*.header-content h1{
    font-size:50px;
    margin-bottom:0;
  }*/
  
  /*.header-content p{
    font-size:1.5rem;
    display:block;
    padding-bottom:2rem;
  }
  */
  
  /* .video-col {
    height: 500px;
  } */
  
  
  .progress-ring__circle {
    transition: 0.35s stroke-dashoffset;
    /* axis compensation */
    transform: rotate(-90deg);
    transform-origin: 35% 50%;
  }
  
  .progress-ring__circle_item {
    transition: 0.35s stroke-dashoffset;
    /* axis compensation */
    /* transform: rotate(-90deg);
    transform-origin: 35% 50%; */
  }
  
  .progress-item-container{
    height: 45px;
  }
  
  .row-menu-header a:not(.btn) a:not(.btn-download){
    padding: 0!important;
  }
  
  .checkout-section.info-panel {
    /*border: 1px dashed red; */
    height: 95vh; 
    overflow-y: auto;
    /* margin-top: 20px; */
  }
  
  .checkout-section.payment-form-section .order-header-section{
    margin-bottom: 10px;
    padding: 0 5px;
  }
  
  .checkout-section.payment-form-section .order-header-section .col{
    overflow: hidden;
  }
  
  .checkout-section.payment-form-section .order-header-section .desc-text *{
    margin-bottom: 0;
    margin-top: 5px;
  }
  
  .checkout-section.payment-form-section .order-details-section{
    margin-bottom: 0;
  }
  
  .checkout-section.payment-form-section .order-details-section .order-bump-desc {
    margin-bottom: 0;
  }
  
  
  .checkout-section.info-panel img {
    padding-top: 15px 0 15px 0;
  }
  
  .checkout-section.info-panel .desc {
    margin-right: 90px;
  }
  
  .order-bump-section{
    padding: 0 5px 0 5px;
    margin-bottom: 0;
  }
  
  
  .order-bump-section .order-bump-item{
    border: 2px dashed #e65100
  }
  
  
  .order-bump-section .checkbox-text{
    display: inline-block;
    word-wrap: break-word;
    outline:none;
    margin-top: 5px;
    padding: 0 5px 0 5px;
    overflow-y: auto;
    overflow-x: hidden;
  } 
  
  .mark-complete .checkbox-text{
    display: inline-block;
    word-wrap: break-word;
    outline:none;
    margin-top: 5px;
    padding: 0 5px 0 5px;
    overflow-y: auto;
    overflow-x: hidden;
  } 
  
  .allow-download {
    margin-top: 30px;
  }
  
  @media only screen and (max-width : 992px) {
    .checkout-section.info-panel {
      height: initial;
      /*overflow-y: visible; */
    } 
  
    .checkout-section.info-panel img {
        padding-top: 15px;
    }
  
    .checkout-section.payment-form-section {
      height: initial;
      padding: 0 5px 0 5px;
      /* overflow-y: visible; */
    } 
  }
  
  .order-desc .base-prod-payplan span {
    float: right!important;
  } 
  
  .order-bump-desc .orderbump-prod.orderbump-prod-payplan span {
    float: right!important;
  } 
  
  @media only screen and (max-width : 320px) {
    .order-desc .base-prod {
      padding: 0px 0px 0px 10px;
      font-size: 0.95rem;
    } 
  
    .order-desc .base-prod-payplan {
      padding: 0;
    } 
  
    .order-desc .base-prod-payplan span {
      float: left!important;
      font-size: 0.95rem;
    } 
  
    .order-bump-desc .orderbump-prod {
      padding: 0px 0px 0px 10px;
      font-size: 0.95rem;
    } 
  
    .order-bump-desc .orderbump-prod.orderbump-prod-payplan {
      padding: 0;
    } 
  
    .order-bump-desc .orderbump-prod.orderbump-prod-payplan span {
      float: left!important;
      font-size: 0.95rem;
    } 
  }
  
  .checkout {
    background-color: #fff;
  }
  
  .checkout * {
    /* font-family: Source Code Pro, Consolas, Menlo, monospace; */
    font-size: 16px;
    /* font-weight: 500; */
  }
  
  .checkout .row-checkout {
    display: -ms-flexbox;
    display: flex;
    /* margin: 0 5px 10px; */
  }
  
  .checkout .field {
    position: relative;
    width: 100%;
    height: 50px;
    /* margin: 0 10px; */
  }
  
  .checkout .field.half-width {
    width: 50%;
  }
  
  .checkout .field.quarter-width {
    width: calc(25% - 10px);
  }
  
  .checkout .baseline {
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 0;
    background-color: #9e9e9e;
    transition: background-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  
  .checkout label {
    /* font-family: "Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; */
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 8px;
    color: #9e9e9e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform-origin: 0 50%;
    cursor: text;
    transition-property: color, transform;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  
  .checkout .input {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    padding-bottom: 7px;
    color: #32325d;
    background-color: transparent;
  }
  
  .checkout .input::-webkit-input-placeholder {
    color: transparent;
    transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  
  .checkout .input::-moz-placeholder {
    color: transparent;
    transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  
  .checkout .input:-ms-input-placeholder {
    color: transparent;
    transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  
  .checkout .input.StripeElement {
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    will-change: opacity;
  }
  
  .checkout .input.focused,
  .checkout .input:not(.empty) {
    opacity: 1;
  }
  
  .checkout .input.focused::-webkit-input-placeholder,
  .checkout .input:not(.empty)::-webkit-input-placeholder {
    color: #cfd7df;
  }
  
  .checkout .input.focused::-moz-placeholder,
  .checkout .input:not(.empty)::-moz-placeholder {
    color: #cfd7df;
  }
  
  .checkout .input.focused:-ms-input-placeholder,
  .checkout .input:not(.empty):-ms-input-placeholder {
    color: #cfd7df;
  }
  
  .checkout .input.focused + label,
  .checkout .input:not(.empty) + label {
    color: #aab7c4;
    transform: scale(0.85) translateY(-25px);
    cursor: default;
  }
  
  .checkout .input.focused + label {
    color: #26a69a;
  }
  
  .checkout .input.invalid + label {
    color: #ffa27b;
  }
  
  .checkout .input.focused + label + .baseline {
    background-color: #26a69a;
  }
  
  .checkout .input.focused.invalid + label + .baseline {
    background-color: #e25950;
  }
  
  .checkout input, .checkout button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    border-style: none;
  }
  
  .checkout input:-webkit-autofill {
    -webkit-text-fill-color: #e39f48;
    transition: background-color 100000000s;
    -webkit-animation: 1ms void-animation-out;
  }
  
  .checkout .StripeElement--webkit-autofill {
    background: transparent !important;
  }
  
  .checkout input, .checkout button {
    -webkit-animation: 1ms void-animation-out;
  }
  
  .checkout button {
    display: block;
    width: calc(100% - 30px);
    height: 40px;
    margin: 40px 15px 0;
    background-color: #24b47e;
    border-radius: 4px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
  }
  
  .checkout input:active {
    background-color: #159570;
  }
  
  .checkout .error svg {
    margin-top: 0 !important;
  }
  
  .checkout .error svg .base {
    fill: #e25950;
  }
  
  .checkout .error svg .glyph {
    fill: #fff;
  }
  
  .checkout .error .message {
    color: #e25950;
  }
  
  .checkout .success .icon .border {
    stroke: #abe9d2;
  }
  
  .checkout .success .icon .checkmark {
    stroke: #24b47e;
  }
  
  .checkout .success .title {
    color: #32325d;
    font-size: 16px !important;
  }
  
  .checkout .success .message {
    color: #8898aa;
    font-size: 13px !important;
  }
  
  .checkout .success .reset path {
    fill: #24b47e;
  }
  
  .linha-cor {
      background-color: #f5f5f5;
      padding-top: 20px;
      margin-bottom: 0;
      padding-bottom: 20px;
  }
  
  .linha {
      padding-top: 20px;
      margin-bottom: 0;
      padding-bottom: 20px;
  }
  
  .plano {
      padding-top: 20px;
      margin-bottom: 0;
      padding-bottom: 20px;
  }
  
  .plano.mensal{
      background-color: #ede7f6;
  }
  
  .plano.semestral {
      background-color:  #B1BAED;
  }
  
  .plano.anual{
      background-color: #5c6ac4;
      color: #fff;
  }
  
  .pricing {
      font-size: 20px!important;
      font-weight: 200;
  }
  
  .btn-mensal{
      background-color: #ede7f6;
      color: #546e7a;
  }
  
  .btn-semestral {
      background-color:  #B1BAED;
      color: #546e7a;
  }
  
  .btn-anual{
      background-color: #5c6ac4;
      color: #fff;
  }
  
  .navbar-material .nav-wrapper .profile-pic {
    height: 35px;
    margin: 15px;
    padding-left: 10px;
    padding-right: 15px;
  }
  
  @media only screen and (max-width : 992px) {
      .btn-assinar {
          content: "Assinar";
          height: 70px;
      }
  
      .pricing {
          font-size: 15px!important;
          font-weight: 200;
      }
  }
  
  
  
  pricin.dv {
      margin: 0 auto;
      max-width: 1280px;
      width: 90%
  }
  
  .dv {
      margin: 0 auto;
      max-width: 1280px;
      width: 90%
  }
  
  @media only screen and (min-width: 601px) {
      .dv {
          width: 85%
      }
  }
  
  @media only screen and (min-width: 993px) {
      .dv {
          width: 70%
      }
  }
  
  
  .dv .c {
      margin-left: -.75rem;
      margin-right: -.75rem
  }
  
  .v {
      padding-top: 1rem;
      padding-bottom: 1rem
  }
  
  .v.no-pad {
      padding: 0
  }
  
  .v.no-pad-bot {
      padding-bottom: 0
  }
  
  .v.no-pad-top {
      padding-top: 0
  }
  
  .c {
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 20px
  }
  
  .c:after {
      content: "";
      display: table;
      clear: both
  }
  
  .c .d {
      float: left;
      box-sizing: border-box;
      padding: 0 .75rem;
      min-height: 1px
  }
  
  .c .col[class*="push-"],
  .c .col[class*="pull-"] {
      position: relative
  }
  
  .c .d.jw {
      width: 8.3333333333%;
      margin-left: auto;
      left: auto;
      right: auto
  }
  
  .c .d.jx {
      width: 16.6666666667%;
      margin-left: auto;
      left: auto;
      right: auto
  }
  
  .c .d.jy {
      width: 25%;
      margin-left: auto;
      left: auto;
      right: auto
  }
  
  .c .d.jz {
      width: 33.3333333333%;
      margin-left: auto;
      left: auto;
      right: auto
  }
  
  .c .d.kc {
      width: 41.6666666667%;
      margin-left: auto;
      left: auto;
      right: auto
  }
  
  .c .d.ka {
      width: 50%;
      margin-left: auto;
      left: auto;
      right: auto
  }
  
  .c .d.kb {
      width: 58.3333333333%;
      margin-left: auto;
      left: auto;
      right: auto
  }
  
  .c .d.jt {
      width: 66.6666666667%;
      margin-left: auto;
      left: auto;
      right: auto
  }
  
  .c .d.ju {
      width: 75%;
      margin-left: auto;
      left: auto;
      right: auto
  }
  
  .c .d.ix {
      width: 83.3333333333%;
      margin-left: auto;
      left: auto;
      right: auto
  }
  
  .c .d.iy {
      width: 91.6666666667%;
      margin-left: auto;
      left: auto;
      right: auto
  }
  
  .c .d.iv {
      width: 100%;
      margin-left: auto;
      left: auto;
      right: auto
  }
  
  .c .d.offset-s1 {
      margin-left: 8.3333333333%
  }
  
  .c .d.pull-s1 {
      right: 8.3333333333%
  }
  
  .c .d.push-s1 {
      left: 8.3333333333%
  }
  
  .c .d.offset-s2 {
      margin-left: 16.6666666667%
  }
  
  .c .d.pull-s2 {
      right: 16.6666666667%
  }
  
  .c .d.push-s2 {
      left: 16.6666666667%
  }
  
  .c .d.offset-s3 {
      margin-left: 25%
  }
  
  .c .d.pull-s3 {
      right: 25%
  }
  
  .c .d.push-s3 {
      left: 25%
  }
  
  .c .d.offset-s4 {
      margin-left: 33.3333333333%
  }
  
  .c .d.pull-s4 {
      right: 33.3333333333%
  }
  
  .c .d.push-s4 {
      left: 33.3333333333%
  }
  
  .c .d.offset-s5 {
      margin-left: 41.6666666667%
  }
  
  .c .d.pull-s5 {
      right: 41.6666666667%
  }
  
  .c .d.push-s5 {
      left: 41.6666666667%
  }
  
  .c .d.offset-s6 {
      margin-left: 50%
  }
  
  .c .d.pull-s6 {
      right: 50%
  }
  
  .c .d.push-s6 {
      left: 50%
  }
  
  .c .d.offset-s7 {
      margin-left: 58.3333333333%
  }
  
  .c .d.pull-s7 {
      right: 58.3333333333%
  }
  
  .c .d.push-s7 {
      left: 58.3333333333%
  }
  
  .c .d.offset-s8 {
      margin-left: 66.6666666667%
  }
  
  .c .d.pull-s8 {
      right: 66.6666666667%
  }
  
  .c .d.push-s8 {
      left: 66.6666666667%
  }
  
  .c .d.offset-s9 {
      margin-left: 75%
  }
  
  .c .d.pull-s9 {
      right: 75%
  }
  
  .c .d.push-s9 {
      left: 75%
  }
  
  .c .d.offset-s10 {
      margin-left: 83.3333333333%
  }
  
  .c .d.pull-s10 {
      right: 83.3333333333%
  }
  
  .c .d.push-s10 {
      left: 83.3333333333%
  }
  
  .c .d.offset-s11 {
      margin-left: 91.6666666667%
  }
  
  .c .d.pull-s11 {
      right: 91.6666666667%
  }
  
  .c .d.push-s11 {
      left: 91.6666666667%
  }
  
  .c .d.offset-s12 {
      margin-left: 100%
  }
  
  .c .d.pull-s12 {
      right: 100%
  }
  
  .c .d.push-s12 {
      left: 100%
  }
  
  @media only screen and (min-width: 601px) {
      .c .d.ku {
          width: 8.3333333333%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.kt {
          width: 16.6666666667%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.ko {
          width: 25%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.kr {
          width: 33.3333333333%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.ks {
          width: 41.6666666667%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.jo {
          width: 50%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.jq {
          width: 58.3333333333%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.kw {
          width: 66.6666666667%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.kx {
          width: 75%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.jc {
          width: 83.3333333333%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.iw {
          width: 91.6666666667%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.jd {
          width: 100%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.offset-m1 {
          margin-left: 8.3333333333%
      }
      .c .d.pull-m1 {
          right: 8.3333333333%
      }
      .c .d.push-m1 {
          left: 8.3333333333%
      }
      .c .d.offset-m2 {
          margin-left: 16.6666666667%
      }
      .c .d.pull-m2 {
          right: 16.6666666667%
      }
      .c .d.push-m2 {
          left: 16.6666666667%
      }
      .c .d.offset-m3 {
          margin-left: 25%
      }
      .c .d.pull-m3 {
          right: 25%
      }
      .c .d.push-m3 {
          left: 25%
      }
      .c .d.offset-m4 {
          margin-left: 33.3333333333%
      }
      .c .d.pull-m4 {
          right: 33.3333333333%
      }
      .c .d.push-m4 {
          left: 33.3333333333%
      }
      .c .d.offset-m5 {
          margin-left: 41.6666666667%
      }
      .c .d.pull-m5 {
          right: 41.6666666667%
      }
      .c .d.push-m5 {
          left: 41.6666666667%
      }
      .c .d.offset-m6 {
          margin-left: 50%
      }
      .c .d.pull-m6 {
          right: 50%
      }
      .c .d.push-m6 {
          left: 50%
      }
      .c .d.offset-m7 {
          margin-left: 58.3333333333%
      }
      .c .d.pull-m7 {
          right: 58.3333333333%
      }
      .c .d.push-m7 {
          left: 58.3333333333%
      }
      .c .d.offset-m8 {
          margin-left: 66.6666666667%
      }
      .c .d.pull-m8 {
          right: 66.6666666667%
      }
      .c .d.push-m8 {
          left: 66.6666666667%
      }
      .c .d.offset-m9 {
          margin-left: 75%
      }
      .c .d.pull-m9 {
          right: 75%
      }
      .c .d.push-m9 {
          left: 75%
      }
      .c .d.offset-m10 {
          margin-left: 83.3333333333%
      }
      .c .d.pull-m10 {
          right: 83.3333333333%
      }
      .c .d.push-m10 {
          left: 83.3333333333%
      }
      .c .d.offset-m11 {
          margin-left: 91.6666666667%
      }
      .c .d.pull-m11 {
          right: 91.6666666667%
      }
      .c .d.push-m11 {
          left: 91.6666666667%
      }
      .c .d.offset-m12 {
          margin-left: 100%
      }
      .c .d.pull-m12 {
          right: 100%
      }
      .c .d.push-m12 {
          left: 100%
      }
  }
  
  @media only screen and (min-width: 993px) {
      .c .d.kh {
          width: 8.3333333333%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.kj {
          width: 16.6666666667%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.ki {
          width: 25%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.kk {
          width: 33.3333333333%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.kd {
          width: 41.6666666667%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.ke {
          width: 50%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.kl {
          width: 58.3333333333%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.kn {
          width: 66.6666666667%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.km {
          width: 75%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.jh {
          width: 83.3333333333%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.jg {
          width: 91.6666666667%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.ji {
          width: 100%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.offset-l1 {
          margin-left: 8.3333333333%
      }
      .c .d.pull-l1 {
          right: 8.3333333333%
      }
      .c .d.push-l1 {
          left: 8.3333333333%
      }
      .c .d.offset-l2 {
          margin-left: 16.6666666667%
      }
      .c .d.pull-l2 {
          right: 16.6666666667%
      }
      .c .d.push-l2 {
          left: 16.6666666667%
      }
      .c .d.offset-l3 {
          margin-left: 25%
      }
      .c .d.pull-l3 {
          right: 25%
      }
      .c .d.push-l3 {
          left: 25%
      }
      .c .d.offset-l4 {
          margin-left: 33.3333333333%
      }
      .c .d.pull-l4 {
          right: 33.3333333333%
      }
      .c .d.push-l4 {
          left: 33.3333333333%
      }
      .c .d.offset-l5 {
          margin-left: 41.6666666667%
      }
      .c .d.pull-l5 {
          right: 41.6666666667%
      }
      .c .d.push-l5 {
          left: 41.6666666667%
      }
      .c .d.offset-l6 {
          margin-left: 50%
      }
      .c .d.pull-l6 {
          right: 50%
      }
      .c .d.push-l6 {
          left: 50%
      }
      .c .d.offset-l7 {
          margin-left: 58.3333333333%
      }
      .c .d.pull-l7 {
          right: 58.3333333333%
      }
      .c .d.push-l7 {
          left: 58.3333333333%
      }
      .c .d.offset-l8 {
          margin-left: 66.6666666667%
      }
      .c .d.pull-l8 {
          right: 66.6666666667%
      }
      .c .d.push-l8 {
          left: 66.6666666667%
      }
      .c .d.offset-l9 {
          margin-left: 75%
      }
      .c .d.pull-l9 {
          right: 75%
      }
      .c .d.push-l9 {
          left: 75%
      }
      .c .d.offset-l10 {
          margin-left: 83.3333333333%
      }
      .c .d.pull-l10 {
          right: 83.3333333333%
      }
      .c .d.push-l10 {
          left: 83.3333333333%
      }
      .c .d.offset-l11 {
          margin-left: 91.6666666667%
      }
      .c .d.pull-l11 {
          right: 91.6666666667%
      }
      .c .d.push-l11 {
          left: 91.6666666667%
      }
      .c .d.offset-l12 {
          margin-left: 100%
      }
      .c .d.pull-l12 {
          right: 100%
      }
      .c .d.push-l12 {
          left: 100%
      }
  }
  
  @media only screen and (min-width: 1201px) {
      .c .d.jk {
          width: 8.3333333333%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.ja {
          width: 16.6666666667%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.jj {
          width: 25%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.iu {
          width: 33.3333333333%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.jm {
          width: 41.6666666667%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.jl {
          width: 50%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.je {
          width: 58.3333333333%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.jn {
          width: 66.6666666667%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.iz {
          width: 75%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.ip {
          width: 83.3333333333%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.il {
          width: 91.6666666667%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.iq {
          width: 100%;
          margin-left: auto;
          left: auto;
          right: auto
      }
      .c .d.offset-xl1 {
          margin-left: 8.3333333333%
      }
      .c .d.pull-xl1 {
          right: 8.3333333333%
      }
      .c .d.push-xl1 {
          left: 8.3333333333%
      }
      .c .d.offset-xl2 {
          margin-left: 16.6666666667%
      }
      .c .d.pull-xl2 {
          right: 16.6666666667%
      }
      .c .d.push-xl2 {
          left: 16.6666666667%
      }
      .c .d.offset-xl3 {
          margin-left: 25%
      }
      .c .d.pull-xl3 {
          right: 25%
      }
      .c .d.push-xl3 {
          left: 25%
      }
      .c .d.offset-xl4 {
          margin-left: 33.3333333333%
      }
      .c .d.pull-xl4 {
          right: 33.3333333333%
      }
      .c .d.push-xl4 {
          left: 33.3333333333%
      }
      .c .d.offset-xl5 {
          margin-left: 41.6666666667%
      }
      .c .d.pull-xl5 {
          right: 41.6666666667%
      }
      .c .d.push-xl5 {
          left: 41.6666666667%
      }
      .c .d.offset-xl6 {
          margin-left: 50%
      }
      .c .d.pull-xl6 {
          right: 50%
      }
      .c .d.push-xl6 {
          left: 50%
      }
      .c .d.offset-xl7 {
          margin-left: 58.3333333333%
      }
      .c .d.pull-xl7 {
          right: 58.3333333333%
      }
      .c .d.push-xl7 {
          left: 58.3333333333%
      }
      .c .d.offset-xl8 {
          margin-left: 66.6666666667%
      }
      .c .d.pull-xl8 {
          right: 66.6666666667%
      }
      .c .d.push-xl8 {
          left: 66.6666666667%
      }
      .c .d.offset-xl9 {
          margin-left: 75%
      }
      .c .d.pull-xl9 {
          right: 75%
      }
      .c .d.push-xl9 {
          left: 75%
      }
      .c .d.offset-xl10 {
          margin-left: 83.3333333333%
      }
      .c .d.pull-xl10 {
          right: 83.3333333333%
      }
      .c .d.push-xl10 {
          left: 83.3333333333%
      }
      .c .d.offset-xl11 {
          margin-left: 91.6666666667%
      }
      .c .d.pull-xl11 {
          right: 91.6666666667%
      }
      .c .d.push-xl11 {
          left: 91.6666666667%
      }
      .c .d.offset-xl12 {
          margin-left: 100%
      }
      .c .d.pull-xl12 {
          right: 100%
      }
      .c .d.push-xl12 {
          left: 100%
      }
  }
  
  .pricing-table {
      margin-top: 50px;
      border: 2px solid #5c6ac4
  }
  
  .pricing-table.fk {
      margin-top: 0
  }
  
  .pricing-table.fk .pricing-header {
      padding: 45px 0
  }
  
  .pricing-table .pricing-header {
      position: relative;
      padding: 20px 0;
      text-align: center
  }
  
  .pricing-table .pricing-header i {
      position: absolute;
      top: 0;
      left: 50%;
      width: 80px;
      padding-left: 5px;
      margin-left: -40px;
      font-size: 28px;
      background-color: #000;
      transform: translateY(-50%)
  }
  
  .pricing-table .pricing-header .gd {
      font-size: 46px;
      line-height: 46px
  }
  
  .pricing-table .pricing-header .gd .hm,
  .pricing-table .pricing-header .gd .ic {
      font-weight: 300;
      margin: 0 -10px;
      font-size: 20px;
      line-height: 42px;
      vertical-align: text-top
  }
  
  .pricing-table .pricing-features {
      margin: 0;
      padding: 10px 0 30px
  }
  
  .pricing-table .pricing-features .pricing-feature {
      font-weight: 300;
      padding: 10px 20px;
      text-align: center
  }
  
  .pricing-table .pricing-features .pricing-feature i {
      margin-right: 18px
  }
  
  .pricing-table .pricing-features .pricing-feature.au,
  .pricing-table .pricing-features .pricing-feature.au i {
      color: rgba(19, 192, 160, 0.5)
  }
  
  /*.pricing-table .pricing-features .pricing-feature:hover {
      background-color: rgba(29, 233, 195, 0.2)
  }*/
  
  .v.l .pricing-header i {
      background-color: #fff
  }
  
  .v.r .pricing-header i,
  .page-footer .v.footer-copyright .pricing-header i {
      background-color: #42c4ac
  }
  
  .v.r .pricing-features .pricing-feature.au,
  .page-footer .v.footer-copyright .pricing-features .pricing-feature.au,
  .v.r .pricing-features .pricing-feature.au i,
  .page-footer .v.footer-copyright .pricing-features .pricing-feature.au i {
      color: rgba(12, 123, 102, 0.5)
  }
  
  @media only screen and (max-width: 600px) {
      .pricing-table {
          margin-top: 50px
      }
      .pricing-table.fk {
          margin-top: 50px
      }
  }
  
  .checkoutpagefont{
    padding-left: 5px; 
    padding-right: 5px; 
    margin-top: 5px; 
    margin-left: 5px;
  }
  
  .checkoutpagefont li.search {
    /* position: absolute; */
    left: 0;
    right: 0;
    top: 160px;
    margin-top: 5px;
    padding: 1px 0 0 0;
    z-index: 2;
  }
  
  .checkoutpagefont li.search .search-wrapper {
    color: #777;
    /* margin-top: -1px; */
    border-top: 1px solid rgba(0,0,0,0.14);
    border-bottom: 1px solid rgba(0,0,0,0.14);
    -webkit-transition: margin .25s ease;
    transition: margin .25s ease;
  }
  
  
  .checkoutpagefont li.search .search-wrapper input#fontSearch {
    color: #777;
    display: block;
    font-size: 16px;
    font-weight: 300;
    width: 100%;
    height: 62px;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 45px 0 30px;
    border: 0;
  }
  
  .checkoutpagefont li.search .search-wrapper i.material-icons {
    position: absolute;
    top: 21px;
    right: 10px;
    cursor: pointer;
  }
  
  .select2.select2-container.select2-container--default{
    padding-left: 5px; 
    padding-right: 5px; 
    margin-top: 10px; 
    margin-left: 5px;
  }
  
  .select2 .selection .select2-selection--single, .select2-container--default .select2-search--dropdown .select2-search__field {
    border-width: 0 0 1px 0 !important;
    border-radius: 0 !important;
    height: 2.05rem;
  }
  
  .select2-container--default .select2-selection--multiple, .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-width: 0 0 1px 0 !important;
    border-radius: 0 !important;
  }
  
  .select2-results__option {
    color: #26a69a;
    padding: 8px 16px;
    font-size: 16px;
  }
  
  .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #eee !important;
    color: #26a69a !important;
  }
  
  .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #e1e1e1 !important;
  }
  
  .select2-dropdown {
    border: none !important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  }
  
  .select2-container--default .select2-results__option[role=group] .select2-results__group {
    background-color: #333333;
    color: #fff;
  }
  
  .select2-container .select2-search--inline .select2-search__field {
    margin-top: 0 !important;
  }
  
  .select2-container .select2-search--inline .select2-search__field:focus {
    border-bottom: none !important;
    box-shadow: none !important;
  }
  
  .select2-container .select2-selection--multiple {
    min-height: 2.05rem !important;
  }
  
  .select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #ddd !important;
    color: rgba(0,0,0,0.26);
    border-bottom: 1px dotted rgba(0,0,0,0.26);
  } 
  
  .modal-fullscreen.open{
    width: 90%;
    max-height: 85%;
    /* height: 85%; */
    /* top: 0 !important; */
  }
  
  .modal-fullscreen > .modal-content {
    height: calc(100% - 56px);
  }
  
  .visual-editor {
    position: relative;
    overflow: visible !important;
    overflow-y: auto;
    width: 100%;
  }
  
  .visual-editor-memberarea {
    overflow: visible !important;
    overflow-y: auto;
    width: 100%;
    position: fixed;
    z-index: 1000;
  }
  
  
  .desc-section .desc-text{
    width: 100%;
  }
  
  
  .checkoutpagefont{
    height: 50vh;
  }
  
  /*.visual-editor {
     position:fixed;
     left:0px;
     bottom:0px;
     /* height:30px; 
     width:100%;
     color: #fff;
     background-color: #ee6e73;
     width: 100%;
     height: 56px;
     line-height: 56px;  
  } */
  
/*   
  Checkboxes
     ========================================================================== */ */
  /* Remove default checkbox */
  [type="checkbox"]:not(:checked),
  [type="checkbox"]:checked {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  
  [type="checkbox"] {
    /* checkbox aspect */
  }
  
  [type="checkbox"] + div:not(.lever) {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    display: inline-block;
    height: 25px;
    line-height: 25px;
    font-size: 1rem;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  
  [type="checkbox"] + div:not(.lever):before,
  [type="checkbox"]:not(.filled-in) + div:not(.lever):after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    z-index: 0;
    border: 2px solid #5a5a5a;
    border-radius: 1px;
    margin-top: 3px;
    -webkit-transition: .2s;
    transition: .2s;
  }
  
  [type="checkbox"]:not(.filled-in) + div:not(.lever):after {
    border: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  
  [type="checkbox"]:not(:checked):disabled + div:not(.lever):before {
    border: none;
    background-color: rgba(0, 0, 0, 0.42);
  }
  
  [type="checkbox"].tabbed:focus + div:not(.lever):after {
    -webkit-transform: scale(1);
            transform: scale(1);
    border: 0;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: rgba(0, 0, 0, 0.1);
  }
  
  [type="checkbox"]:checked + div:not(.lever):before {
    top: -4px;
    left: -5px;
    width: 12px;
    height: 22px;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #26a69a;
    border-bottom: 2px solid #26a69a;
    -webkit-transform: rotate(40deg);
            transform: rotate(40deg);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
  }
  
  [type="checkbox"]:checked:disabled + div:before {
    border-right: 2px solid rgba(0, 0, 0, 0.42);
    border-bottom: 2px solid rgba(0, 0, 0, 0.42);
  }
  
  /* Indeterminate checkbox */
  [type="checkbox"]:indeterminate + div:not(.lever):before {
    top: -11px;
    left: -12px;
    width: 10px;
    height: 22px;
    border-top: none;
    border-left: none;
    border-right: 2px solid #26a69a;
    border-bottom: none;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
  }
  
  [type="checkbox"]:indeterminate:disabled + div:not(.lever):before {
    border-right: 2px solid rgba(0, 0, 0, 0.42);
    background-color: transparent;
  }
  
  [type="checkbox"].filled-in + div:not(.lever):after {
    border-radius: 2px;
  }
  
  [type="checkbox"].filled-in + div:not(.lever):before,
  [type="checkbox"].filled-in + div:not(.lever):after {
    content: '';
    left: 0;
    position: absolute;
    /* .1s delay is for check animation */
    -webkit-transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
    transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
    z-index: 1;
  }
  
  [type="checkbox"].filled-in:not(:checked) + div:not(.lever):before {
    width: 0;
    height: 0;
    border: 3px solid transparent;
    left: 6px;
    top: 10px;
    -webkit-transform: rotateZ(37deg);
            transform: rotateZ(37deg);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
  }
  
  [type="checkbox"].filled-in:not(:checked) + div:not(.lever):after {
    height: 20px;
    width: 20px;
    background-color: transparent;
    border: 2px solid #5a5a5a;
    top: 0px;
    z-index: 0;
  }
  
  [type="checkbox"].filled-in:checked + div:not(.lever):before {
    top: 0;
    left: 1px;
    width: 8px;
    height: 13px;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -webkit-transform: rotateZ(37deg);
            transform: rotateZ(37deg);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
  }
  
  [type="checkbox"].filled-in:checked + div:not(.lever):after {
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #26a69a;
    background-color: #26a69a;
    z-index: 0;
  }
  
  [type="checkbox"].filled-in.tabbed:focus + div:not(.lever):after {
    border-radius: 2px;
    border-color: #5a5a5a;
    background-color: rgba(0, 0, 0, 0.1);
  }
  
  [type="checkbox"].filled-in.tabbed:checked:focus + div:not(.lever):after {
    border-radius: 2px;
    background-color: #26a69a;
    border-color: #26a69a;
  }
  
  [type="checkbox"].filled-in:disabled:not(:checked) + div:not(.lever):before {
    background-color: transparent;
    border: 2px solid transparent;
  }
  
  [type="checkbox"].filled-in:disabled:not(:checked) + div:not(.lever):after {
    border-color: transparent;
    background-color: #949494;
  }
  
  [type="checkbox"].filled-in:disabled:checked + div:not(.lever):before {
    background-color: transparent;
  }
  
  [type="checkbox"].filled-in:disabled:checked + div:not(.lever):after {
    background-color: #949494;
    border-color: #949494;
  }
  
  .player {
      width: 100%;
      height: 0;
      padding-bottom: 56.25%;
      /* box-shadow: 0px 10px 0px -3px rgba(0, 0, 0, 0.2); */
      position: relative;
      overflow: hidden;
      /* background: #000000; */
  }
  .player:fullscreen {
      padding-bottom: 100vh;
  }
  .player:-webkit-full-screen {
      padding-bottom: 100vh;
  }
  .player:-moz-full-screen {
      padding-bottom: 100vh;
  }
  .player:-ms-fullscreen  {
      padding-bottom: 100vh;
  }
  .player video {
      width: 100%;
      height: auto;
      position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .controls {
      padding: 0;
      position: absolute;
      bottom: -80px;
      /* bottom: 0px; */
      width: 100%;
      height: 48px;
      box-sizing: border-box;
      background: linear-gradient(
          180deg,
          rgba(37, 37, 37, 0.4) 10%,
          rgba(37, 37, 37, 0.8) 80%
      );
      transition: all 0.2s ease-in 0.3s;
  }
  
  .time {
      position: absolute;
      /* right: 30px; */
      left: 25%;
      /* bottom: 100%; */
      top: 15px;
      padding-bottom: 14px;
      color: #fff;
  }
  
  
  .player:hover .controls {
      bottom: 0;
      transition: all 0.2s ease-out;
  }
  
  
  .video-progress {
      height: 8px;
      width: 100%;
      /* width: calc(100% - 40px); */
      background: rgba(60, 60, 60, 0.6);
      margin: auto;
      border-radius: 6px;
      position: absolute;
      /* left: 20px; */
      left: 0px;
      bottom: 100%;
      transition: height 0.1s ease-in-out;
  }
  .video-progress:hover {
      height: 10px;
  }
  .video-progress-filled {
      background: var(--accent);
      width: 0%;
      height: 100%;
      border-radius: 6px;
      transition: all 0.1s; 
  }
  
  .video-progress:hover .seek-tooltip {
      display: block;
  }
    
  .seek-tooltip {
      display: none;
      position: absolute;
      top: -40px;
      margin-left: -20px;
      font-size: 12px;
      padding: 3px;
      content: attr(data-title);
      font-weight: bold;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.6);
      /* background-color: rgba(255, 0, 0); */
  }
  
  .controls-main {
      width: calc(100% - 40px);
      margin: auto;
      height: 100%;
      display: flex;
      justify-content: space-between;
  }
  .controls-left,
  .controls-right {
      flex: 1;
      display: flex;
      align-items: center;
      overflow: hidden;
  }
  .controls-left {
      margin-left: 10px;
  }
  .controls-right {
      margin-right: 10px;
      justify-content: flex-end;
  }
  
  @media only screen and (max-width : 992px) { 
      .controls {
          padding: 0;
          position: absolute;
          bottom: -80px;
          /* bottom: 0px; */
          width: 100%;
          height: 20px;
          box-sizing: border-box;
          background: linear-gradient(
              180deg,
              rgba(37, 37, 37, 0.2) 10%,
              rgba(37, 37, 37, 0.6) 80%
          );
          transition: all 0.2s ease-in 0.3s;
      }
  
      .controls-left  {
          display: none;
          margin-left: 0;
      }
  
      .controls-right  {
          flex: 1;
          margin-right: -10px;
      }
  
      .time {
          position: absolute;
          /* right: 30px; */
          left: 3%;
          top: 5px;
          color: #fff;
          font-size: 8px;
      }
  
      i {
          font-size: 14px!important;
      }
  }
  
  
  @media only screen and (min-width : 992px) { 
      .controls-left {
          margin-left: 0;
      }
      .controls-right {
          margin-right: 0;
          /* justify-content: flex-end; */
      }
  
      .volume {
          display: flex;
          align-items: center;
      }
      .volume-btn {
          margin-right: 10px;
      }
      .volume-btn #volume-off, .volume-btn #volume-high {
          opacity: 0;
      }
      .volume-btn.loud #volume-high{
          opacity: 1;
      }
      .volume-btn.muted #volume-off {
          opacity: 1;
      }
      .volume-btn.muted #volume-high, .volume-btn.muted #volume-low {
          opacity: 0;
      }
      .volume-slider {
          height: 8px;
          width: 80px;
          background: rgba(60, 60, 60, 0.6);
          border-radius: 6px;
          position: relative;
      }
      .volume-filled {
          background: var(--main);
          width: 100%;
          height: 100%;
          border-radius: 6px;
          transition: width 0.2s ease-in-out;
      }
      .volume-filled:hover, .play-btn:hover.play-btn:before, .play-btn:hover.play-btn:after{
          background: var(--accent);
      }
  }
  
  
  .btn-rwd-fwd {
      color: #fff;
      margin: auto;
      padding: 10px;
      cursor: default;
  }
  
  .btn-rwd-fwd:hover {
      color: var(--accent);
      font-weight: bold;
  }
  
  @media only screen and (max-width : 992px) { 
      .btn-rwd-fwd {
          color: #fff;
          /* margin: -6px 0 0 0; */
          cursor: default;
      }
      
      .btn-rwd-fwd.rewind {
          margin: -6px 0 0 70px;
      }
      
      .btn-rwd-fwd.forward {
          margin: -6px 0px 0px -3px;
      }
  }
  
  .play-btn {
      width: 30px;
      height: 30px;
      position: relative;
      margin: auto;
      transform: rotate(-90deg) scale(0.8);
      transition: -webkit-clip-path 0.3s ease-in 0.1s, shape-inside 0.3s ease-in 0.1s,
          transform 0.8s cubic-bezier(0.85, -0.25, 0.25, 1.425);
  }
  .play-btn.paused {
      transform: rotate(0deg);
  }
  .play-btn:before,
  .play-btn:after {
      content: "";
      position: absolute;
      background: white;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      transition: inherit;
  }
  .play-btn:before {
      -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 40%, 0 40%);
      shape-inside: polygon(0 10%, 100% 10%, 100% 40%, 0 40%);
  }
  .play-btn:after {
      -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 90%, 0 90%);
      shape-inside: polygon(0 60%, 100% 60%, 100% 90%, 0 90%);
  }
  .play-btn.paused:before {
      -webkit-clip-path: polygon(10% 0, 90% 51%, 90% 51%, 10% 51%);
      shape-inside: polygon(0 0, 100% 51%, 100% 51%, 0 51%);
  }
  .play-btn.paused:after {
      -webkit-clip-path: polygon(10% 49.5%, 80% 49.5%, 90% 49.5%, 10% 100%);
      shape-inside: polygon(10% 49.5%, 80% 49.5%, 90% 49.5%, 10% 100%);
  }
  
  @media only screen and (max-width : 992px) { 
      .play-btn {
          width: 15px;
          height: 15px;
          margin: 2px
      }
      
  }
  
  button:focus {
      outline: none;
  }
  
  .btn-download {
      color: var(--main);
      cursor: pointer;
      padding: 10px 5px 5px 5px!important
  }
  
  .btn-download:hover {
    color: var(--accent);
      font-weight: bold;
  }
  
  
  @media only screen and (max-width : 992px) { 
      .btn-download {
          padding: 0 0 0 10px;
      }
      
  }
  
  .btn-speed {
      color: var(--main);
      cursor: pointer;
      padding: 10px 5px 5px 5px
  }
  
  .btn-speed:hover {
    color: var(--accent);
      font-weight: bold;
  }
  
  @media only screen and (max-width : 992px) { 
      .btn-speed {
          padding: 0 0 0 10px;
      }
  }
  
  .speed {
      /* position: relative; */
      display: inline-block;
  }
  
  /* Show the dropup menu on hover */
  .speed:hover .speed-list {
      display: block;
    }
  
  .speed-list {
      display: none;
      border-radius: 3px;
      margin: 0;
      padding: 5px;
      text-align: center;
      z-index: 1000;
      background: rgba(60, 60, 60, 1);
      position: absolute;
      top: -10px;
      right: 40px;
  }
  .speed-list span {
      color: var(--main);
      padding: 5px;
      cursor: pointer;
  }
  
  .speed-list span:hover,
  .speed-list span.active-opt {
      color: var(--accent);
      /* font-weight: bold; */
  }
  
  /* .speed-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      margin-right: 20px;
      text-align: center;
  }
  .speed-list li {
      color: var(--main);
      padding: 5px;
      cursor: pointer;
  }
  
  .speed-list li:hover,
  .speed-list li.active-opt {
      color: var(--accent);
      font-weight: bold;
  }*/
  .pic-in-pic {
      /* display: flex;
      justify-content: center; */
      color: #fff;
      cursor: pointer;
      padding: 10px 5px 5px 5px
  }
  
  .pic-in-pic a{
      color: #fff;
  }
  
  .btn-pic-in-pic:hover {
    color: var(--accent);
      font-weight: bold;
  }
  
  @media only screen and (max-width : 992px) { 
      .pic-in-pic {
          padding: 0 0 0 10px;
      }
  }
  
  
  
  .fullscreen-av {
      /* display: flex;
      justify-content: center; */
      color: #fff;
      cursor: pointer;
      padding: 10px 5px 5px 5px
  }
  
  .fullscreen-av:hover {
      color: var(--accent);
      font-weight: bold;
  }
  
  @media only screen and (max-width : 992px) { 
      .fullscreen-av {
          padding: 0 0 0 10px;
      }
  }