body {
    --submenuColor: #272727;
    --inputColor: #272727;
    --inputPlaceholderColor: rgba(195,195,195,0.878431);
    --menuAndHeaderBackgroundColor: #272727;
    --menuForegroundColor: rgba(195,195,195,0.878431);
    --menuBackgroundColor: #272727;
    --whiteColor: #ffffff;
    --dangerBackgroundColor: #d9534f;
    font-family: "Open Sans",sans-serif;
  }
  
  /* Main background */
  #custom-css .sub-header-container{
    background-position: center top;
    background-size: cover;
    background-repeat: repeat;
    background-attachment: fixed;
  }
  
  /* Header */
  #search-video{
    background: var(--mainBackgroundColor) !important;
  }
  #custom-css .header{
    background-color: var(--menuBackgroundColor);
  }
  /* NavMenu*/
  #custom-css .title-page.active,
  #custom-css .title-page:hover{
    color: var(--whiteColor);
  }
  #custom-css .row .header a,
  #custom-css .row .header button{
    color: var(--whiteColor);
    background-color: var(--mainHoverColor);
  }
  #custom-css .row .header a my-global-icon svg g[stroke="#000000"],
  #custom-css .row .header button my-global-icon svg path[stroke="#333333"],
  #custom-css .row .header button my-global-icon svg g[stroke="#000000"]{
    stroke: var(--whiteColor) !important;
  }
  #custom-css .row .header button my-global-icon svg path[fill="#333333"]{
    fill: var(--whiteColor) !important;
  }
  
  #custom-css .footer-links a,
  #custom-css .footer-copyleft a{
    color: var(--whiteColor) !important
  }
  /* Toast notifications*/
  #custom-css .ui-toast .ui-toast-message-content{
    color: var(--whiteColor);
  }
  /* Dropdown */
  #custom-css .dropdown-menu,
  #custom-css .dropdown-menu .dropdown-item{
    background-color: var(--menuBackgroundColor);
    color: var(--menuForegroundColor);
  }
  
  #custom-css .dropdown-menu a,
  #custom-css span.dropdown-item.custom-action,
  #custom-css a.dropdown-item.with-icon{
    color: var(--menuForegroundColor) !important;
  }
  
  #custom-css .dropdown-item:focus:not(.new-playlist-block),
  #custom-css .dropdown-item:hover:not(.new-playlist-block),
  #custom-css .dropdown-item:active:not(.new-playlist-block),
  #custom-css span.dropdown-item.custom-action:hover,
  #custom-css a.dropdown-item.with-icon:hover{
    color: var(--whiteColor) !important; 
    background-color: var(--mainColor) !important;
  }
  #custom-css .ui-inputswitch-slider{
    box-shadow: none !important;
  }
    /* Dropdown inputs && checkboxes */
    #custom-css .dropdown-menu .peertube-select-container,
    #custom-css .dropdown-menu input[type="text"], 
    #custom-css .dropdown-menu textarea,
    #custom-css .dropdown-menu span[role="checkbox"]{
      border: 1px solid var(--mainForegroundColor) !important
    }
    #custom-css .dropdown-menu input[type="submit"]{
      border: 1px solid transparent !important; /* Removing black border in buttons */
    }
    #custom-css .header .options-row{
      padding-left: 0;
    }
    #custom-css .header .options-row > div{
      justify-content: space-between;
    }
    #custom-css .dropdown-item:hover .ml-auto:not(.glyphicon){
      box-shadow: 0 0 0 0.1em var(--menuForegroundColor) !important;
    }
    #custom-css .ml-auto:after{
      background-color: var(--whiteColor);
    }
    #custom-css #typeahead-container input{
      border-color: var(--mainForegroundColor) !important;
    }
  
  /* Buttons */
  #custom-css .upload-button, 
  #custom-css .upload-button:active, 
  #custom-css .upload-button:focus,
  #custom-css .root .button-file{
    color: var(--whiteColor) !important; 
    background-color: var(--mainColor) !important;
  }
  #custom-css .upload-button my-global-icon svg g[stroke="#000000"],
  #custom-css a.add-button my-global-icon svg circle[stroke="#000000"],
  #custom-css a.create-button my-global-icon svg circle[stroke="#000000"],
  #custom-css a.create-caption my-global-icon svg circle[stroke="#000000"]{
    stroke: var(--whiteColor) !important;
  }
  #custom-css a.add-button my-global-icon svg rect[fill="#000000"],
  #custom-css a.create-button my-global-icon svg rect[fill="#000000"],
  #custom-css a.create-caption my-global-icon svg rect[fill="#000000"]{
    fill: var(--whiteColor) !important;
  }
  #custom-css .grey-button, #custom-css .grey-button:active, #custom-css .grey-button:focus {
    background-color: var(--menuAndHeaderBackgroundColor);
    color: var(--mainForegroundColor);
  }
  #custom-css my-video-comments my-video-comment-add .comment-buttons .cancel-button{
    display: none; /* Hidden because it's not needed and it have a buggy behaviour */
  }
  #custom-css .reset-button.reset-button-small{
    color: var(--mainColor);
  }
    /* Delete buttons */
    #custom-css .delete-me button:hover,
    #custom-css .delete-me button,
    #custom-css my-delete-button .action-button-delete,
    #custom-css my-delete-button .action-button-delete:active,
    #custom-css .action-button-delete-selection{
      background-color: var(--dangerBackgroundColor);
      color: var(--whiteColor);
    }
    #custom-css .top-buttons .delete-history{
      background-color: var(--dangerBackgroundColor);
      color: var(--whiteColor);
    }
    /* Trash bin icon */
    #custom-css my-global-icon[iconname="delete"] svg path[stroke="#000000"]{
      stroke: var(--whiteColor) !important;
    }
    #custom-css my-global-icon[iconname="delete"] svg path[fill="#000000"],
    #custom-css my-global-icon[iconname="delete"] svg rect[fill="#000000"]{
      fill: var(--whiteColor) !important;
    }
  
  /* Modals */
  #custom-css my-input-readonly-copy input{
    color: var(--whiteColor);
  }
  #custom-css .form-group-checkbox input + span {
    border-color: var(--mainForegroundColor);
  }
  /* Inputs */
  #custom-css input, 
  #custom-css textarea{
    background: var(--inputColor) !important;
    color: var(--mainForegroundColor) !important;
    border: 1px solid var(--mainBackgroundColor);
  }
  #custom-css .ng-select .ng-input>input{
    background: none !important;
    border: 0 !important;
  }
  #custom-css .am-donate-main .button input{
    color: var(--mainColor) !important;
    background: var(--whiteColor) !important;
    border: none !important;
  }
  #custom-css .am-donate-main .donation-details{
    color: var(--mainBackgroundColor);
  }
  #custom-css input[type="submit"],
  #custom-css input[type="button"]{ /* Buttons */
    color: var(--whiteColor) !important;
    background: var(--mainColor) !important;
    border: none !important;
  }
  #custom-css input[type="submit"]:hover,
  #custom-css input[type="button"]:hover,
  #custom-css .submit-button:hover input{ 
    background: var(--mainHoverColor) !important;
  }
  #custom-css .submit-button.disabled input{ 
    background: var(--menuForegroundColor) !important;
  } 
  
  #custom-css .root .form-group-checkbox input:checked + span{
    background: var(--mainColor) !important;
  }
  #custom-css .action-button .count{
    color: var(--whiteColor);
  }
  #custom-css .modal-content input.readonly{
    color: var(--whiteColor);
  }
  /* Selects */
  #custom-css .peertube-select-container, input[type="text"]{
    border: 1px solid var(--mainBackgroundColor) !important;
    background: var(--inputColor) !important;
    color: var(--mainForegroundColor) !important;
  }
  #custom-css .peertube-select-container > select {
    background: var(--inputColor) !important;
    color: var(--mainForegroundColor) !important;
  }
  #custom-css .peertube-select-container:after{
    border-top-color: var(--mainForegroundColor) !important;
  }
  #custom-css .peertube-select-container > select > option{
    background: var(--inputColor);
    color: var(--mainForegroundColor) !important;
  }
  #custom-css .peertube-select-container > select option:hover, 
  #custom-css .peertube-select-container > select > option:checked{
    color: var(--whiteColor) !important; 
    background-color: var(--mainColor) !important;
  }
  /* MultiSelects */
  #custom-css .ui-multiselect{
    background: var(--inputColor);
    border: none;
  }
  #custom-css .ui-multiselect .ui-multiselect-trigger{
    background: var(--inputColor);
  }
  p-multiselect .pi.pi-chevron-down::after{
    border-top-color: var(--mainForegroundColor);
  }
  #custom-css .ui-multiselect .ui-multiselect-label {
    color: var(--mainForegroundColor);
  }
  #custom-css .ui-multiselect-panel{
    background: var(--inputColor);
    color: var(--mainForegroundColor);
  }
  /* Icons colors & hovers */
  /* Stroke */
  #custom-css  my-global-icon svg circle[stroke="#000000"],
  #custom-css  my-global-icon svg g[stroke="#000000"],
  #custom-css  my-global-icon svg g[stroke="#000"],
  #custom-css  my-global-icon svg path[stroke="#000"],
  #custom-css  my-global-icon svg path[stroke="#000000"],
  #custom-css  my-global-icon svg polygon[stroke="#000000"],
  #custom-css  my-global-icon svg rect[stroke="#000000"],
  #custom-css  my-global-icon svg ellipse[stroke="#000000"]{
    stroke: var(--mainForegroundColor) !important;
  }
  
  #custom-css my-global-icon[iconname="video-lang"] svg path{
    fill: transparent;
  }
  
  #custom-css  a my-global-icon svg circle[stroke="#000000"],
  #custom-css  a my-global-icon svg g[stroke="#000000"],
  #custom-css  a my-global-icon svg path[stroke="#000000"],
  #custom-css  a my-global-icon svg polygon[stroke="#000000"],
  #custom-css  a my-global-icon svg rect[stroke="#000000"],
  #custom-css  a my-global-icon svg ellipse[stroke="#000000"]{
    stroke: var(--mainForegroundColor) !important;
  }
  
  #custom-css  a my-global-icon svg linearGradient stop{
    stop-color: var(--mainForegroundColor);
  }
  
  #custom-css .action-button:not(.action-button-edit) > my-global-icon svg g[stroke="#000000"],
  #custom-css  my-global-icon[iconname="validate"] svg circle,
  #custom-css  my-global-icon[iconname="validate"] svg polyline{
    stroke: var(--whiteColor) !important;
  }
  
  #custom-css .dropdown-item:hover my-global-icon svg circle[stroke="#000000"],
  #custom-css .dropdown-item:hover my-global-icon svg g[stroke="#000000"],
  #custom-css .dropdown-item:hover my-global-icon svg path[stroke="#000000"],
  #custom-css .dropdown-item:hover my-global-icon svg path[stroke="#000"],
  #custom-css .dropdown-item:hover my-global-icon svg polygon[stroke="#000000"],
  #custom-css .dropdown-item:hover my-global-icon svg rect[stroke="#000000"],
  #custom-css .dropdown-item:hover my-global-icon svg ellipse[stroke="#000000"],
  #custom-css .dropdown-item:active my-global-icon svg circle[stroke="#000000"],
  #custom-css .dropdown-item:active my-global-icon svg g[stroke="#000000"],
  #custom-css .dropdown-item:active my-global-icon svg path[stroke="#000000"],
  #custom-css .dropdown-item:active my-global-icon svg polygon[stroke="#000000"],
  #custom-css .dropdown-item:active my-global-icon svg rect[stroke="#000000"],
  #custom-css .dropdown-item:active my-global-icon svg ellipse[stroke="#000000"]{
    stroke: var(--whiteColor) !important;
  }
  #custom-css .dropdown-item:hover my-global-icon svg linearGradient stop,
  #custom-css .dropdown-item:active my-global-icon svg linearGradient stop{
    stop-color: var(--whiteColor) !important;
  }
  
    /* Fill */
  #custom-css  a my-global-icon svg circle[fill="#000000"],
  #custom-css  a my-global-icon svg g[fill="#000000"],
  #custom-css  a my-global-icon svg path[fill="#000000"],
  #custom-css  a my-global-icon svg polygon[fill="#000000"],
  #custom-css  a my-global-icon svg rect[fill="#000000"],
  #custom-css  span my-global-icon svg circle[fill="#000000"],
  #custom-css  span my-global-icon svg g[fill="#000000"],
  #custom-css  span my-global-icon svg path[fill="#000000"],
  #custom-css  span my-global-icon svg polygon[fill="#000000"],
  #custom-css  span my-global-icon svg rect[fill="#000000"],
  #custom-css  .notification my-global-icon svg path[fill="#000000"]{
    fill: var(--mainForegroundColor) !important;
  }
  
  #custom-css .dropdown-item:hover my-global-icon svg circle[fill="#000000"],
  #custom-css .dropdown-item:hover my-global-icon svg g[fill="#000000"],
  #custom-css .dropdown-item:hover my-global-icon svg path[fill="#000000"],
  #custom-css .dropdown-item:hover my-global-icon svg polygon[fill="#000000"],
  #custom-css .dropdown-item:hover my-global-icon svg rect[fill="#000000"],
  #custom-css .dropdown-item:active my-global-icon svg circle[fill="#000000"],
  #custom-css .dropdown-item:active my-global-icon svg g[fill="#000000"],
  #custom-css .dropdown-item:active my-global-icon svg path[fill="#000000"],
  #custom-css .dropdown-item:active my-global-icon svg polygon[fill="#000000"],
  #custom-css .dropdown-item:active my-global-icon svg rect[fill="#000000"]{
    fill: var(--whiteColor) !important;
  }
  /* Mute servers Icon */
  #custom-css .dropdown-item my-global-icon svg .st0{
    stroke: var(--mainForegroundColor);
  }
  #custom-css .dropdown-item:hover my-global-icon svg .st0,
  #custom-css .dropdown-item:active my-global-icon svg .st0 {
    stroke: var(--whiteColor);
  }
  #custom-css .dropdown-item my-global-icon svg .st1 {
    fill: var(--mainForegroundColor);
  }
  #custom-css .dropdown-item:hover my-global-icon svg .st1,
  #custom-css .dropdown-item:active my-global-icon svg .st1 {
    fill: var(--whiteColor);
  }
  /* Language Icon */
  #custom-css my-global-icon[iconname="language"] svg path,
  #custom-css .dropdown-item:hover my-global-icon[iconname="language"] svg path,
  #custom-css .dropdown-item:active my-global-icon[iconname="language"] svg path {
    fill: var(--mainForegroundColor) !important;
  }
  
  /* Pagination */
  #custom-css .ui-paginator .ui-paginator-element:hover:not(.ui-state-disabled){
    color: var(--whiteColor) !important;
    background-color: var(--mainHoverColor) !important;
  }
  
  /* Notifications Panel */
  #custom-css .popover-notifications.popover .popover-body .notifications-header,
  #custom-css .popover-notifications.popover .popover-body .notifications-header a{
    background-color: var(--menuAndHeaderBackgroundColor);
    color: var(--mainForegroundColor) !important;
  }
  #custom-css .popover-notifications.popover .popover-body .notifications-header button{
    color: var(--mainForegroundColor);
  }
  #custom-css .notification{
    background-color: var(--mainBackgroundColor);
    color: var(--mainForegroundColor);
  }
  #custom-css .notification my-global-icon .feather{
    color: var(--mainForegroundColor) !important;
  }
  #custom-css .notification.unread{
    background-color: var(--menuAndHeaderBackgroundColor);
  }
  #custom-css .popover-notifications.popover .popover-body .all-notifications{
    background-color: var(--menuBackgroundColor);
    color: var(--mainForegroundColor);
  }
  #custom-css .bs-popover-auto[x-placement^=bottom]>.arrow::after, .bs-popover-bottom>.arrow::after{
    border-bottom-color: var(--menuBackgroundColor);
  }
  #custom-css #inbox-full svg path[stroke="#333333"]{
    stroke: var(--mainForegroundColor);
  }
  
  #custom-css .popover-notifications.popover .popover-body .all-notifications svg g path[stroke="#333333"]{
    stroke: var(--mainForegroundColor);
  }
  #custom-css .popover-notifications.popover .popover-body .all-notifications svg g path[fill="#333333"]{
    fill: var(--mainForegroundColor);
  }
  
  #custom-css .header my-global-icon .feather{
    color: var(--whiteColor);
  }
  
  /* Create new playlist, url video... preview box */
  #custom-css .root .preview-container .preview.no-image{
    background-color: var(--menuAndHeaderBackgroundColor);
    border-color: var(--mainBackgroundColor);
  }
  #custom-css .preview-container .button-file.with-icon g[stroke="#000000"]{
    stroke: var(--whiteColor) !important;
  }
  
  /* Subscriptions buttons */
  #custom-css .btn-group-subscribe.unsubscribe-button .btn, .btn-group-subscribe.unsubscribe-button .btn:active, .btn-group-subscribe.unsubscribe-button .btn:focus{
    background-color: var(--mainColor);
    color: var(--whiteColor);
  }
  
  /* Upload video container */
  #custom-css .root-tabset.video-add-tabset .upload-video-container{
    border-color: var(--mainForegroundColor) !important;
  }
  #custom-css .root-tabset.video-add-tabset>.nav a.nav-link.active{
    border-color: var(--mainForegroundColor) !important;
  }
  
  /* Calendar */
  #custom-css p-calendar span input{
    color: var(--mainForegroundColor) !important;
  }
  
  #custom-css .ui-datepicker{
    background-color: var(--menuAndHeaderBackgroundColor);
    color: var(--mainForegroundColor);
  }
  
  #custom-css .ui-datepicker .ui-datepicker-header,
  #custom-css p-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
  #custom-css p-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-next{
    background-color: var(--menuAndHeaderBackgroundColor);
    color: var(--mainForegroundColor) !important;
  }
  #custom-css .ui-datepicker table td>a:hover,
  #custom-css .ui-datepicker table td>span:hover{
    background-color: var(--mainColor);
    color: var(--whiteColor);
  }
  #custom-css .ui-datepicker table td>a.ui-state-active,
  #custom-css .ui-datepicker table td>span.ui-state-active{
    background-color: var(--mainHoverColor);
    color: var(--whiteColor);
  }
  
  #custom-css p-calendar .ui-datepicker .ui-timepicker .pi.pi-chevron-down, 
  #custom-css p-calendar .ui-datepicker .ui-timepicker .pi.pi-chevron-up,
  #custom-css p-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-prev:hover,
  #custom-css p-calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-next:hover,
  #custom-css p-calendar .ui-datepicker .ui-timepicker .pi.pi-chevron-down:hover, 
  #custom-css p-calendar .ui-datepicker .ui-timepicker .pi.pi-chevron-up:hover{
    color: var(--whiteColor) !important;
  }
  
  /* 404 Not found page */
  #custom-css my-page-not-found img {
    width: 350px !important;
    margin-bottom: 0px !important;
  }
  
  /* About */
  #custom-css .anchor-link .section-title {
    color: inherit;
  }