@import url(fonts.css);
@import url(interactive.css);
@import url(answer.css);
* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: gray;
}
body {
  overflow: hidden;
  width: 1280px;
  height: 720px;
  margin: 0;
  padding: 0;
  background-color: gray;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%);
}

body > div {
  overflow: hidden;
  width: 1280px;
  height: 720px;
  margin: 0px;
  background-image: url(../images/Composition-small.jpg);
  background-repeat: no-repeat;
}

/*-----manual column layout------------*/
div.col2-option {
  overflow: hidden;
  margin-left: 25px;
}
div.col2-option > .column {
  float: left;
  width: 53%;
  /* border: solid 1px green; */
  margin-left: 0px;
}
div.col3-option {
  overflow: hidden;
  margin-left: 26px;
}
div.col3-option > .column {
  float: left;
  width: 32%;
  border: solid 1px green;
  margin-left: 0px;
}
div.col4-option {
  overflow: hidden;
  margin-left: 25px;
}
div.col4-option > .column {
  float: left;
  width: 24%;
  /* border: solid 1px green; */
  margin-left: 0px;
}

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

/*-----Auto column layout------------*/
.column1 {
  position: absolute;
  width: 495px;
  left: 85px;
  top: 54px;
  /* border: 1px solid red; */
}
.column2 {
  position: absolute;
  width: 491px;
  left: 712px;
  top: 70px;
  /* border: 1px solid red; */
}

.autoCol div:nth-child(1) {
  column-span: all;
  -webkit-column-span: all;
  -moz-column-span: all;
  -ms-column-span: all;
  -o-column-span: all;
  height: 20px;
  overflow: hidden;
}

.autoCol div:nth-child(1) > .column:nth-child(1) {
  float: left;
  width: 500px;
  height: 20px;
  margin-left: 0px;
}
.autoCol div:nth-child(1) > .column:nth-child(2) {
  float: left;
  width: 500px;
  height: 20px;
  margin-left: 130px;
}

/*-----Single column layout------------*/
.autoCol1 {
  width: 1130px;
  height: 640px;
  margin: 35px auto;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 25px;
  box-shadow:
    2px 2px 10px #6b6b6b,
    -2px 2px 10px #6b6b6b,
    2px -2px 10px #6b6b6b,
    -2px -2px 10px #6b6b6b;
  -webkit-box-shadow:
    2px 2px 10px #6b6b6b,
    -2px 2px 10px #6b6b6b,
    2px -2px 10px #6b6b6b,
    -2px -2px 10px #6b6b6b;
  -moz-box-shadow:
    2px 2px 10px #6b6b6b,
    -2px 2px 10px #6b6b6b,
    2px -2px 10px #6b6b6b,
    -2px -2px 10px #6b6b6b;
  -ms-box-shadow:
    2px 2px 10px #6b6b6b,
    -2px 2px 10px #6b6b6b,
    2px -2px 10px #6b6b6b,
    -2px -2px 10px #6b6b6b;
  -o-box-shadow:
    2px 2px 10px #6b6b6b,
    -2px 2px 10px #6b6b6b,
    2px -2px 10px #6b6b6b,
    -2px -2px 10px #6b6b6b;
}
.bodyContent {
  position: relative;
  margin: 20px 8px 20px 17px;
  border: solid 0px red;
  height: 880px;
  overflow: hidden;
  overflow-wrap: break-word;
  overflow: -moz-hidden-unscrollable;
  font-size: 19px;
  line-height: 25px;
  font-family: "calibri";
  text-align: left;
  outline: solid 0px;
  resize: none;
}

.bodyContent_i {
  position: relative;
  margin: 15px auto;
}
.bodyContent_button {
  position: relative;
  margin: 15px auto;
  text-align: center;
}
.rubric_head {
  font-size: 21px;
  font-family: "calibri";
  line-height: 24px;
  margin-top: 3px;
  margin-bottom: 0px;
  text-align: center;
}
.rubric {
  font-size: 13px;
  font-family: "calibri";
  line-height: 16px;
  margin-top: 6px;
  margin-bottom: 3px;
}

.rubric_question {
  font-family: "calibri";
  font-size: 13px;
  line-height: 18px;
  margin-top: 5px;
  margin-bottom: 0px;
  margin-left: 25px;
}
.rubric_question1 {
  font-family: "calibri";
  font-size: 13px;
  line-height: 18px;
  margin-top: 26px;
  margin-bottom: 0px;
  margin-left: 25px;
}
.rubric_question_head {
  position: absolute;
  font-size: 13px;
  font-family: "calibri";
  line-height: 18px;
  margin-top: 3px;
  margin-bottom: 3px;
  margin-left: 6px;
}

.rubric_ques_option {
  font-family: "calibri";
  font-size: 13px;
  line-height: 21px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 43px;
}
.rubric_ques_option_in {
  font-family: "calibri";
  font-size: 13px;
  line-height: 15px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 26px;
}

.rubric_ques_option_col {
  font-family: "calibri";
  font-size: 13px;
  line-height: 15px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 18px;
}

.rubric_question_input {
  margin: 0px 0px 0px 29px;
}

.ml-50 {
  margin-left: -50px;
}
.ml-5 {
  margin-left: -15px;
}
.mt200 {
  margin-top: 250px;
}
.mt10 {
  margin-top: 5px;
}

.wd45 {
  width: 45px;
}
.wd197 {
  width: 197px;
}
.wd210 {
  width: 210px;
}
.wd215 {
  width: 215px;
}
.wd225 {
  width: 235px;
}
.wd445 {
  width: 445px;
}

.float-left {
  float: left;
  margin-left: -21px;
}
.float_right1 {
  float: right;
  margin-right: 160px;
}
.float_right2 {
  float: right;
  margin-right: 2px;
}

.col {
  display: block;
  column-count: 3;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  -ms-column-count: 3;
  -o-column-count: 3;
}

.bullet {
  background-color: /*#bf3436;*/ #fff;
  background-image: url(common_assests/images/bullet.png);
  background-size: 100% 100%;
  height: 16px;
  width: 16px;
  text-align: center;
  vertical-align: 0px;
  border-radius: 30px;
  float: left;
  margin-left: -25px;
  margin-top: 0.7pt;
  background-repeat: no-repeat;
  /* background-position: 0px 0px; */
  font-size: 13px;
  color: #000;
  line-height: 15px;
  font-weight: bold;
}
.bullet01 {
  background-color: /*#bf3436;*/ #fff;
  background-image: url(common_assests/images/bullet.png);
  background-size: 100% 100%;
  height: 16px;
  width: 16px;
  text-align: center;
  vertical-align: 0px;
  border-radius: 30px;
  float: left;
  margin-left: -25px;
  margin-top: 1.7pt;
  background-repeat: no-repeat;
  /* background-position: 0px 0px; */
  font-size: 13px;
  color: #000;
  line-height: 15px;
  font-weight: bold;
}

.bullet1 {
  float: left;
  margin-left: -18px;
}
.actvity {
  position: absolute;
}
.ml-21 {
  margin-left: -21px;
}
.mt1 {
  margin-top: 0px;
}