@media all and (min-width : 1201px) and (max-width : 1250px)
{
  #LeftPanel
  {
    width  :  24%; 
  }

  #Contents
  {
    width  :  72%; 
  }
}

@media all and (min-width : 768px) and (max-width : 1200px)
{
  #LeftPanel
  {
    width  :  45%; 
  }

  #LeftPanel #Steps
  {
    width    :  72%;
    padding  :  30px 1% 0 6%; 
  }

  #LeftPanel #Steps .icon
  {
    width   :  6%;
    height  :  27px;  
  }

  #Contents
  {
    width   :  60.4%;
    margin  :  auto;
    height  :  auto;  
  }

  #Contents table td
  {
    width          :  100%;
    display        :  block; 
    margin-bottom  :  40px; 
  }

  #Contents .multiSelect table td
  {
    width          :  auto !important;
    display        :  inline-block;
    margin-bottom  :  0;
    margin-right   :  0 !important; 
  }

  #Contents .multiSelect
  {
    width  :  86% !important; 
  }

  #Contents table tr:last-child td
  {
    width          :  auto; 
    margin-bottom  :  0 !important;
    display        :  inline-block !important;
  }

  #Contents table tr:last-child td:nth-of-type(1)
  {
    margin-right   :  30%;  
  }

  #Contents table tr:last-child td:nth-of-type(1), #Contents table tr:last-child td:last-child
  {
    width  :  30%;  
  }

  .line
  {
    top  :  40px;
  }

  label
  {
    width  :  90%; 
  }

  .buttonNext, .buttonPrevious
  {
    top  :  5px;
  }

  .alert, #ProfileMsg
  {
    width   :  70% !important; 
  }

  #StepSeven.buttonNext
  {
    top  :  -3px !important;
  }
}




@media (max-width: 768px)
{
  input.textbox, select
  {
    width  :  100% !important;
  }
  
  .date input
  {
    width  :  70% !important;
  }
  
  #LeftPanel
  {
    display  :  none;
  }

  #LeftPanel #Steps
  {
  	width    :  72%;
  	padding  :  30px 4% 0 24%; 
  }

  #LeftPanel #Steps .icon
  {
    width   :  6%;
    height  :  27px;  
  }

  #Contents
  {
    width   :  90%;
    margin  :  auto;
    height  :  auto;  
  }

  #Contents table td
  {
  	width          :  100%;
  	display        :  block;  
    margin-bottom  :  40px;
  }

  #Contents .multiSelect table td
  {
    width          :  auto !important;
    display        :  inline-block;
    margin-bottom  :  0;
    margin-right   :  0 !important; 
  }

  #Contents .multiSelect
  {
    width  :  86% !important; 
  }

  #Contents table tr:last-child td
  {
    width          :  auto; 
    margin-bottom  :  0 !important;
    display        :  inline-block !important; 
  }

  #Contents table tr:last-child td:nth-of-type(2)
  {
    display  :  none !important;
  }

  #Contents table tr:last-child td:nth-of-type(1), #Contents table tr:last-child td:nth-of-type(3)
  {
    width  :  49.5% !important;  
  }

  .line
  {
  	top  :  40px;
  }

  label
  {
  	width  :  90%; 
  }

  .buttonNext, .buttonPrevious
  {
    top      :  5px;
    padding  :  9px 25px;
  }

  .alert, #ProfileMsg
  {
    width   :  70% !important; 
  }

  #StepSeven.buttonNext
  {
    top  :  -3px !important;
  }

  #BtnSame
  {
    font-size   :  12px;
    width       :  90%;  
  }
  
  h1
  {
    padding-top     :  15px;
    padding-bottom  :  30px;
  }
  
  h1 span
  {
    font-size  :  26px;
    display    :  block;
  }
  
  h1 img
  {
    position  :  relative;
    left      :  auto !important;
    margin    :  0px auto 30px auto !important;
  }
  
  h2
  {
    font-size  :  22px;
  }
}



@media (max-width: 500px)
{
  #LeftPanel #Steps
  {
    width    :  78%;
    padding  :  30px 8% 0 14%;
  }

  #LeftPanel #Steps .icon
  {
  	width  :  9%; 
  }

  .line 
  {
    top  :  40px;
  }

  #Contents h1
  {
   	font-size  :  22px !important;
    width      :  87%; 
  }
}