#boxshadow_singlemovie {
      position: relative;
      -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
      -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
      box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
      padding: 3px;
      background: white;
      transition: 0.7s ease;
      border: 0px solid white;
  }
  
  .tdtext {
      font-weight: bold;
      font-size: 16px;
      color: teal !important;
  }
  
  .tdtextresult {
      color: black;
      opacity: 0.7;
  }
  
  .youtube_section {
      display: block;
      width: 100%;
      height: 400px;
      /*box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);*/
  }
  
  @media screen and (max-width: 450px) {
      .youtube_section {
          width: 100%;
          height: 230px;
      }
      .youtubeframe {
          height: 200px;
      }
      .tabcontent {
          box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0) !important;
      }
  }
  /* Style the tab */
  /* Style the tab */
  
  .tab {
      overflow: hidden;
      width: 100%;
      margin-top: 10px;
      box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075)!important;
  }
  /* Style the buttons inside the tab */
  
  .tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 10px;
      transition: 0.3s;
      font-size: 17px;
  }
  /* Change background color of buttons on hover */
  
  .tab button:hover {
      background-color: #ccc;
      color: black;
  }
  /* Create an active/current tablink class */
  
  .tab button.active {
      background-color: #003045;
      color: white;
  }
  /* Style the tab content */
  
  .tabcontent {
      display: none;
      width: 100%;
      padding: 6px 12px;
      margin-top: 30px;
      padding-left: 30px;
      padding-right: 30px;
      border-top: none;
      box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
  }
  /*advance review section*/
  
  .progress_bar {
      margin: 12px auto;
      padding: 0;
      width: 90%;
      height: 30px;
      overflow: hidden;
      background: #e5e5e5;
      border-radius: 6px;
  }
  
  .bar_red {
      position: relative;
      float: left;
      min-width: 1%;
      height: 100%;
      background: #F03347;
  }
  
  .bar_blue {
      position: relative;
      float: left;
      min-width: 1%;
      height: 100%;
      background: #695EDF;
  }
  
  .bar_green {
      position: relative;
      float: left;
      min-width: 1%;
      height: 100%;
      background: #4CCB63;
  }
  
  .bar_sky {
      position: relative;
      float: left;
      min-width: 1%;
      height: 100%;
      background: #15BEAC;
  }
  
  .percent {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin: 0;
      font-family: tahoma, arial, helvetica;
      font-size: 12px;
      color: white;
  }
  /*styling range slider*/
  
  .slidecontainer {
      width: 100%;
  }
  
  .slider {
      -webkit-appearance: none;
      width: 100%;
      height: 10px;
      border-radius: 50px;
      background: #1abc9c;
      outline: none;
      opacity: 1;
      -webkit-transition: .2s;
      transition: opacity .2s;
  }
  
  .slider:hover {
      opacity: 0.7;
  }
  
  .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: black;
      cursor: pointer;
  }
  
  .slider::-moz-range-thumb {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #4CAF50;
      cursor: pointer;
  }
  /* The lblradio */
  
  .lblradio {
      display: block;
      position: relative;
      padding-left: 35px;
      margin-bottom: 12px;
      cursor: pointer;
      font-size: 22px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }
  /* Hide the browser's default radio button */
  
  .lblradio input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
  }
  /* Create a custom radio button */
  
  .checkmark {
      position: absolute;
      top: 0;
      left: 0;
      height: 25px;
      width: 25px;
      background-color: #eee;
      border-radius: 50%;
  }
  /* On mouse-over, add a grey background color */
  
  .lblradio:hover input~.checkmark {
      background-color: #ccc;
  }
  /* When the radio button is checked, add a blue background */
  
  .lblradio input:checked~.checkmark {
      background-color: #2196F3;
  }
  /* Create the indicator (the dot/circle - hidden when not checked) */
  
  .checkmark:after {
      content: "";
      position: absolute;
      display: none;
  }
  /* Show the indicator (dot/circle) when checked */
  
  .lblradio input:checked~.checkmark:after {
      display: block;
  }
  /* Style the indicator (dot/circle) */
  
  .lblradio .checkmark:after {
      top: 9px;
      left: 9px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: white;
  }