body {
       /*background-image: url(../../images/bg.png);*/
        background-repeat: no-repeat;
        background-size: cover;
        top: 0;


  }

body#ramadan .dropZone {
    width:31% !important;
    margin: 1%;
    padding: 0px 20px 20px 10px;
}

body#ramadan .draggable {
   max-width: 100%;
    padding: 10px;
    height: auto !important;
}
   
  #statementStack {
    text-align: center;
}
.draggable {
    background-color: #eaa82e;
    margin: 0.5rem 0.5rem 0 0.5rem;
    padding: 0.5rem;
    color: #32343a;
    font-family: Arial, sans-serif;
    font-size: 1.1rem;
    line-height: 1.4rem;
    display: inline-block;
    padding: 0.5rem;
    cursor: pointer;
    text-align: center;
    min-height: 45px;
    max-width: 600px;
    border-radius: 6px;
    border: 1px dotted #fff;
    z-index: 2;
}
.dropZone {
    /* border: 1px dashed #1c4c85; */
    margin: 2%;
    margin-bottom: 2rem;
    font-family: Arial, sans-serif;
    font-size: 1.5rem;
    color: #620100;
    text-align: center;
    background-color: rgba(29, 78, 137, 0.15);
    width: 46%;
    max-width: 900px;
    height: 80%;
    min-height: 450px;
}
.dropZone .draggable {
    background-color: #620100;
    margin: 0.5rem 0.5rem 0 0.5rem;
    padding: 0.5rem;
    color: #FFF;
    font-family: Arial, sans-serif;
    font-size: 1.0rem;
    line-height: 1.0rem;
    display: inline-block;
    padding: 0.5rem;
    cursor: pointer;
    width: 90%;
    text-align: center;
    min-height: 45px;
    max-width: 480px;
    border-radius: 6px;
    border: 1px dotted #fff;
    z-index: 2;
}

.section {
    display:none; /* Hide initially*/
    position: relative;

}
/*------- Table Styling -------*/

table, th, td{
    margin: 4rem auto;
    border:2px solid #1d4e89;
}

table{
    width:100%;
}


th, td{
  width:15%;
  padding:0.5rem;
  margin: 0.5rem;
  white-space:normal;
}

th{
   font-size:1.1rem;
   background-color: #1d4e89;
   color: #fff;
}

th:nth-of-type(1), th:nth-of-type(2){
  border-right:2px solid #fff;  
}

td{
    height:80px;
}
.modal-content {padding: 0px; border-radius: 5px;}
.modal-header-extension {
    color:#fff;
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #9A12B3;
    /*-webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;*/
}

.editableText {
    border: 1px dotted #0085b4;
    padding: 8px;
}

#checkCorrect{
	text-align: center;
    font-family: 'Open sans', sans-serif;
    width: 100%;
    padding: 0 0 1.8% 0;
    font-weight: bold;
    font-size: large;
    color: #620100;
    top:0;
}


.buttonbar {
    text-align: right;
}


@media print {

    .dropZone .draggable {
        background-color: #600100 !important;
        background-image: #87CAE0 !important;
        color: #000;
        font-size: 1.0rem;
        line-height: 1.0rem;
        width: 90%;
        page-break-inside: avoid;
        page-break-after:avoid;
        max-width: 380px;
}

#drag-box-true {
 

  background-image: none;
    background-size: 0%; 

  }

  #drag-box-false {
 

  background-image: none;
    background-size: 0%; 
  }

   

  .dropZone {
     border: 1px dashed #1c4c85; 
       margin-left: 4%;
    margin-bottom: 0rem;
    color: #87CAE0;
    text-align: center;
    padding: 20px 10%;
    width: 100%;
}


/*----------------------------*/

.btn {display: none}
/*footer{display: none}*/
/*#intro {display: none}
#instructions {display: none}*/








}