/* Shared PHP widget styles. */
:root
{
    --mdc-theme-primary: rgb(237, 237, 237);
    --mdc-theme-secondary: rgb(255, 187, 0);
    --mdc-theme-logo: rgb(233, 93, 15);
    --mdc-theme-background: rgb(0, 20, 44);
    --mdc-theme-scroll: rgb(12, 36, 64);
    --mdc-theme-surface: #00142C;
    --mdc-theme-error: #b00020;
    --mdc-theme-on-primary: #fff;
    --mdc-theme-on-secondary: #fff;
    --mdc-theme-on-surface: #000;
    --mdc-theme-on-error: #fff;
    --mdc-theme-text-primary-on-background: rgba(237, 237, 237, 0.87);
    --mdc-theme-text-secondary-on-background: rgba(0, 0, 0, 0.54);
    --mdc-theme-text-hint-on-background: rgba(0, 0, 0, 0.38);
    --mdc-theme-text-disabled-on-background: rgba(0, 0, 0, 0.38);
    --mdc-theme-text-icon-on-background: rgba(0, 0, 0, 0.38);
    --mdc-theme-text-primary-on-light: rgba(0, 0, 0, 0.87);
    --mdc-theme-text-secondary-on-light: rgba(0, 0, 0, 0.54);
    --mdc-theme-text-hint-on-light: rgba(0, 0, 0, 0.38);
    --mdc-theme-text-disabled-on-light: rgba(0, 0, 0, 0.38);
    --mdc-theme-text-icon-on-light: rgba(0, 0, 0, 0.38);
    --mdc-theme-text-primary-on-dark: white;
    --mdc-theme-text-secondary-on-dark: rgba(255, 255, 255, 0.7);
    --mdc-theme-text-hint-on-dark: rgba(255, 255, 255, 0.5);
    --mdc-theme-text-disabled-on-dark: rgba(255, 255, 255, 0.5);
    --mdc-theme-text-icon-on-dark: rgba(255, 255, 255, 0.5);
    
    --mdc-text-button-with-icon-icon-size: 1.7rem;
    
    
    --mdc-text-field: rgb(237, 237, 237);
    
    
    --font-family-primary: "Marmelad", Sans-serif;
    --font-family-secondary: "JetBrains Mono", Sans-serif;

    --mdc-protected-button-background-color:rgb(255, 187, 0);
    --mdc-protected-button-label-text-color:rgb(35, 36, 52);  

}



.vertical-button {
  display: grid;
  justify-items: center;
  height: 72px;

}

.mdc-linear-progress__buffer-bar {
  background-color: #e6e6e626;
}

.mdc-menu .mdc-deprecated-list-item__graphic {
  color: var(--mdc-theme-secondary);
  font-size: 22px;
  line-height: 24px;
}

.mdc-deprecated-list-item:hover{ 
  background-color: #e6e6e626;
}

.vertical-button i{
  margin-right: 0px!important;
}

.mdc-linear-progress {
  border-radius: 5px;
}

.mdc-linear-progress__primary-bar {
   border-radius: 5px;
}

.mdc-dialog .close {
color: #aaa;
text-align: right;
font-size: 28px;
font-weight: bold;
margin-top: 10px;
width: 30px;
}

.mdc-menu .mdc-deprecated-list {
  color: rgba(227, 227, 227, 0.87);
}

.mdc-menu-surface {
 background-color: #011837;
 border: 1px solid #b0b0b021;
}

.mdc-dialog  .close:hover,
.mdc-dialog  .close:focus {
color: #8c3809;
text-decoration: none;
cursor: pointer;
}

.mdc-linear-progress__bar-inner {
  
  border-color: rgb(22, 111, 61);
}


.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__leading, .mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__notch, .mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__trailing {
  border-color: rgb(39, 55, 74);
}

.mdc-select:not(.mdc-select--disabled) .mdc-select__selected-text {
  color: rgb(237, 237, 237);
}

.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected, .mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--activated, .mdc-select__menu .mdc-list .mdc-deprecated-list-item--selected, .mdc-select__menu .mdc-list .mdc-deprecated-list-item--activated {
  color: #000;
  color: #626262;
}

.mdc-select:not(.mdc-select--disabled) .mdc-select__dropdown-icon {
  fill: rgb(116, 118, 120);
}

.mdc-text-field--textarea {
  width: 100%;
}

.mdc-select--outlined:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__leading, .mdc-select--outlined:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__notch, .mdc-select--outlined:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__trailing {
  border-color: rgba(149, 149, 149, 0.87);
}

.mdc-text-field--outlined.mdc-text-field--with-leading-icon {
  padding-left: 0;
  background-color: #00142c;
}

.fullwidth {
  width:100%;
}

.mdc-list-item {
  justify-content: space-between;
  line-height: 48px;
}

.mdc-text-field {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: #00142c!important;
}

.mdc-select--outlined:not(.mdc-select--disabled) .mdc-select__anchor {
  background-color: #00142c;
}

.label-html-fields {
 text-align: left;
 font-size:12px;
 font-family: Roboto, sans-serif;
 color: rgb(128, 128, 128);
 line-height: 28px;
 margin-left:12px;
}

.mdc-dialog .mdc-dialog__title {
  color: var(--mdc-theme-secondary);
  text-transform: uppercase;
  font-size: 26px;
}

.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field-character-counter, .mdc-text-field:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-character-counter {
  color: rgba(255, 255, 255, 0.6);
}

.mdc-dialog__actions {
    padding:15px;
}

input{

    -webkit-text-fill-color: var(--mdc-theme-primary, #6200ee);
}

.mdc-dialog .mdc-dialog__scrim {
  background-color: rgba(0, 0, 0, 0.7);
}

.mdc-button .mdc-button__icon {
    color: var(--mdc-theme-secondary);
    }
    
.mdc-button .mdc-button__label {
    color: var(--mdc-theme-primary);
}

.mdc-tab .mdc-tab__text-label {
  color: rgba(242, 240, 240, 0.6);
    font-size:13px;
}

.mdc-tab .mdc-tab__icon {
  color: rgba(255, 255, 255, 0.25);
  fill: currentColor;
}

.mdc-tab--active .mdc-tab__icon {
  color: var(--mdc-theme-primary, #6200ee);
  fill: currentColor;
}

.mdc-dialog .mdc-dialog__content {
  color: rgba(255, 255, 255, 0.6);
}

.text-block {
  color: var(--mdc-theme-primary);
  font-family: "Arial", Sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.button-center {
  text-align:center;
}

.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
 color: var(--mdc-theme-primary, #6200ee);

}

.mdc-floating-label{
   color: #808080 !important;
}
.mdc-floating-label--float-above{
  color:  #808080 !important;
}
.mdc-floating-label--shake{
  color:  #808080 !important;
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading, .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch, .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
  border-color: rgba(196, 196, 196, 0.2);
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading, .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch, .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
  border-color: rgba(153, 153, 153, 0.87);
}

.mdc-text-field .mdc-text-field__icon {
 color:rgba(255, 255, 255, 0.44);
}

.mdc-form-field > label {
color: rgba(255, 255, 255, 0.71);
font-size: 12px;
}

.mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate="true"]) ~ .mdc-checkbox__background {
  border-color: rgba(196, 196, 196, 0.2)!important;

}

  .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder {
    border-color: rgba(87, 72, 72, 0.14);
  }
  
  .mdc-text-field--outlined .mdc-notched-outline {
      border-color: gold;
}



.text-block-field {
    overflow-y:auto;
    max-height:600px;
    padding: 10px;
    color: var (--mdc-theme-text-primary-on-background);
    background: linear-gradient(180deg, #fff 62.45%, rgba(0, 0, 0, 0) 99.43%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    scrollbar-width: thin;
    scrollbar-color: var(--mdc-theme-scroll) #4444441c;
    scroll-behavior: smooth;

}

.container{
  height: 350px;
  width: 430px;
  position: relative;
}
.container .wrapper{
  position: relative;
  height: 300px;
  width: 100%;
  border-radius: 10px;
  border: 2px dashed #27374a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #00142c;
}

.container .wrapper:hover{
  border: 2px dashed grey;
}



.wrapper .block-click {
    cursor:pointer;
    position: relative;
}

.wrapper.active .block-click{
 display:none;
}

.wrapper.active{
  border: none!important;
}

.wrapper .image{
  position: absolute;
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.wrapper .icon{
  font-size: 6rem!important;
  color: #c4c4c466;
  text-align:center;
}
.wrapper .text{
  font-size: 20px;
  font-weight: 500;
  color: #5B5B7B;
}
.wrapper .cancel-btn span{
  position: absolute;
  font-size: 16px;
  right: 15px;
  top: 15px;
  color: #9658fe;
  cursor: pointer;
  display: none;
  padding: 4px;
  background-color: #0000001a;
  border-radius: 50%;
}
.wrapper.active:hover .cancel-btn span{
  display: block;
  border: none;
}
.wrapper .cancel-btn span:hover{
  color: #e74c3c;
}

.mdc-button.mdc-ripple-upgraded {
 color: var(--gold-header-color);
}

.mdc-image-card {
  border: none;
  border-radius: 0;
  box-shadow: none;
  height: auto;
  max-width: 100%;
  transition-duration: 0.3s;
}

.mdc-imagetext-cards {
    padding: 15px 15px 15px 15px;
    transition: background .3s,border .3s,border-radius .3s,box-shadow .3s,transform var(--e-transform-transition-duration,.4s);
    background-color: #041C39;
    border:1px solid #041C39;
    cursor:pointer;

}

.mdc-radio .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
  border-color: rgba(255, 255, 255, 0.54);
}

.mdc-imagetext-cards:hover {
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #27374a;
  box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.5);
}


.mdc-main-text
{
  color: var( --mdc-theme-secondary );
  font-family: "Arial", Sans-serif;
  font-size: 18px;
  font-weight: 400;
  word-spacing: 0px;
  text-align:center;
  line-height:20px;
  margin-top:25px;

}

.mdc-description-text
{
  margin-top: 15px;
  color: rgb(197, 197, 197);
  font-family: "Noto Sans", Sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height:18px;
  text-align:center;

}


.wrapper .file-name{
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding: 4px 0 4px 4px;
  font-size: 12px;
  color: #fff;
  display: none;
  background: linear-gradient(135deg,#3a8ffe 0%,#9658fe 100%);
  height:20px;
}
.wrapper.active:hover .file-name{
  display: block;
}
.container #custom-btn{
  margin-top: 30px;
  display: block;
  width: 100%;
  height: 50px;
  border: none;
  outline: none;
  border-radius: 25px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  background: linear-gradient(135deg,#3a8ffe 0%,#9658fe 100%);
}

.md-group-btn {
      display: flex;
      border-radius: 4px;
      overflow: hidden;
      max-width: 400px;
      margin: 20px auto;
      border: 1px solid #27374a;
    }
    .md-group-btn input[type="radio"] {
      display: none;
    }
    .md-group-btn label {
      flex: 1 1 0;
      padding: 14px 0;
      text-align: center;
      cursor: pointer;
      color: #808080;
      font-size: 1rem;
      font-weight: 500;
      letter-spacing: 0.5px;
      transition: background 0.18s, color 0.18s;
      border-right: 1px solid #27374a;
    }
    .md-group-btn label:last-child {
      border-right: none;
    }
    .md-group-btn input[type="radio"]:checked + label {
      background: #1976d2;
      color: #fff;
      box-shadow: 0 2px 4px rgba(33, 150, 243, 0.12);
      z-index: 1;
    }
    .md-group-btn label:active {
      background: #BBDEFB;
    }

    select {
     background-color: transparent;
     color: aliceblue;
     border-color: #27374a;
     border-radius: 5px;
     padding-left:5px;
    }
    
    select .option-item {
    color:grey;
    background-color:#011837;
    border:none;
    }
     
   optgroup {
    color:rgb(255, 187, 0);
    background-color:#011837;
    }
    
    
    .audio-player {
    width: 250px;
    background: #ffffff08;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    text-align: center;
    padding: 10px 20px;
}

.upload-area {
    border: 2px dashed #ddd;
    border-radius: 12px;
    font-size:14px;
    padding:8px 5px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    position:relative; 

}

.clear_audio {
    position: absolute;
    right: 10px;
    top: 10px;
    border-radius: 50px;
    padding: 5px 10px;
    background-color: #00000038;
    cursor:pointer;
}

.file-input
 {
    display: none;
}

.no-file {
    color: #999;
    font-style: italic;
}
.file-name {
    margin: 15px 0;
    color: #666;
    font-size: 0.9rem;
    min-height: 20px;
    width: 200px;
    overflow: hidden;
    text-wrap-mode: nowrap;
}

.upload-icon {
    font-size: 2rem;
    color: #667eea;
    margin-bottom: 10px;
}
.mdc-deprecated-list-item__graphic {
  display: block !important;
}

.mdc-select--outlined .mdc-select__anchor .mdc-select__selected-text::before {
  content: "";
}

.mdc-chip-rectangle {
  border-radius: 4px;
}