body{
  margin: 0;    
  padding: 0;
  background: #ede7f6;
  background-image: url('../img/pattern.png');
  font-family: 'Roboto', sans-serif;
  }header{
    background: #4983c3;
    height: auto;
    border-bottom: 2px solid #f7921e;
    }.row{
      margin: 0;
      padding: 0;
      }

.input_transparent{
  background-color: transparent;
  border: 0px;
  color: white;
  outline: none;
  padding: 5px;
  font-size: 20px;
  font-weight: bold;
  margin: 0 10px;
  }.input_transparent::placeholder{
    color: white;
    font-size: 18px;
    font-weight: bold;
    }.top-icons{
      color: white;
      cursor: pointer;
      }.top-send{
        border-radius: 4px;
        border: 0;
        font-weight: bold;
        color: #009688;
        box-shadow: 0px 2px 5px 0px #607D8B;
        }
.top-right-icons{
  padding: 0;
  margin: 0;
}.top-right-icons li{
  list-style: none;    
  display: inline-table;
  height: 40px;
  width: 40px;
  text-align: center;    
  margin: 0 3px;
  }.top-right-icons li i{
    color: white;
    cursor: pointer;
    font-size: 22px !important;
    display: table-cell;
    vertical-align: middle;
    }.top-right-icons li:active{
        background: #4e4e4e;
        border-radius: 50%;
        transition: background 0.3s ease;
      }

.nav-tabs.main_tabs > li {
    float:none;
    display:inline-grid;
}.nav-tabs.main_tabs {
    text-align:center;
    margin-bottom: -3px;
}

@media (max-width: 767px){
  .rightbtns{
    position: absolute;
    left: 30px;
    top: 5px;
  }
  .input_transparent{
    width: 340px;
  }
}
@media (min-width: 767px){
  .container{
    padding: 0;
    width: 1167px;
    width: 100%;
  }
}
.checkbox-custom label::before, .radio-custom label::before, .checkbox-custom label::after, .radio-custom label::after, .radio-custom input[type=radio], .checkbox-custom input[type=checkbox]
{
  margin-top: 0 !important;
}

.tabsBody .table tr:first-child
{
  /*background-color: #f3f3f3;*/
}
.fChild
{
  background-color: #f3f3f3;
}

.tabsBody .table tr:first-child th
{
    font-size: 12px;
    font-weight: 500;
    padding: 20px 0 0px 18px;
    width: 120px;
    color: #3e3e3e;
    vertical-align: middle;
}

.tabsBody .table tr td:first-child 
{
  font-size: 12px;
  font-weight: 400;
  width: 140px;

}
.tabsBody.tagging .table tr td:first-child 
{
  font-size: 12px;
  font-weight: 600;
}
.tabsBody.tagging .table tr td .tagBTN
{
    width: 110px;
    padding: 3px 0;
    /*text-align: center;*/

    padding: 5px;

  }
.tabsBody .table tr td
{
    padding: 10px 20px;
    vertical-align: middle;
    font-size: 12px;
}
.tabsBody .table tr td span{
  color: #ccc;
}
.tabsBody .table tr td img
{
    border: 1px solid #4983c3;
}
.tabsBody .table tr td .setting i
{
    background-color: #4983c3;
    color: white;
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, #4983c3 50%, #34547e 50%);
    -webkit-transition: background-position .5s;
    -moz-transition: background-position .5s;
    transition: background-position .5s;
  }.tabsBody .table tr td .setting i:hover{
      background-position: 0 -100%;
  }


#addToOption:before
{
  content: "\f067";
  font: normal normal normal 14px/1 FontAwesome;
}
.option_container p{
    text-align: center;
    position: relative;
    color: #f3f3f3;
    background-color: #4983c3;
    margin: 1px 0;
}
.option_container p span{
    width: 110px;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 4px;
    overflow: hidden;
    color: white !important;
    display: block;
}
.option_container p i{
    position: absolute;
    right: -15px;
    top: 4px;
    color: #768392;    
    z-index: 9;
    cursor: pointer;
}
.option_container p i:active{
  text-shadow: 0px 0px 5px black;
  color: white;
}
.main_tabs{
  background-color: white;
  font-weight: bold;
  }.main_tabs.nav-tabs-line>li.active>a, 
  .main_tabs.nav-tabs-line>li.active>a:focus, 
  .main_tabs.nav-tabs-line>li.active>a:hover{
      background-color: transparent;
    }.main_tabs.nav-tabs-line>li>a:active{
      background: #fafafa !important;
      border-radius: 0px;
    }.main_tabs.nav-tabs-line>li>a {
        padding: 30px 40px !important;
        text-transform: uppercase;
    }
input.tagBTN,
select.tagBTN
{
  border: 1px solid #4983c3;
  color: #4983c3;
  padding:  5px 20px;
  background-color: white;
  width: 120px;
}
button.tagBTN,
select.tagBTN
{
  border: 1px solid #4983c3;
  color: #4983c3;
  padding:  5px 20px;
  background-color: white;
  width: 120px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
}

button.tagBTN:hover
{
  color: white;
  background-color: #4983c3;
}
.tagBTN_gry{
  border: 1px solid #adadad;
  color: #565656;
  padding: 5px 20px;
  background-color: #cacaca;
  font-weight: 400;
}
.tagBTN_blue
{
  background-color: #4983c3;
  color: white;
  border:0;
  font-weight: 400;
  padding: 5px 20px;
  float: right;
}

section .container .tab-content{
  background-color: white;
      border: 1px solid #4983c3;
    border-top: 0;
  } 
  .firstSection{
    width: 100%;
    padding: 30px;
    border-left: 3px solid transparent;
  }.firstSection.active{    
    border-left: 3px solid #009688;
    border-bottom: 1px solid #f5f1f1;
  }
input.form-title{  
  box-sizing: content-box; 
  overflow:hidden;
  /* demo only: */
  padding:10px;
  width: 97%;
  font-size:30px;
  margin: auto;
  display:block;
  border:0;
  outline: none;
  resize: none;
  color: #353535;
  border-bottom: 2px solid transparent;
  }input.form-title::placeholder{
    color: #353535;
    }input.form-title:hover,
  input.form-title:focus{
  border-bottom: 2px solid #ccc;
  }
    textarea.form-description{  
      box-sizing: content-box; 
      overflow:hidden;
      /* demo only: */
      padding: 0 10px;
      width: 97%;
      font-size:14px;
      margin: auto;
      display:block;
      border:0;
      outline: none;
      resize: none;
      border-bottom: 1px solid transparent;
    }textarea.form-description:hover,textarea.form-description:focus{
  border-bottom: 1px solid #ccc;
  }


.questionSections{
  width: 100%;
  padding: 30px;
  border-left: 3px solid transparent;
  }.questionSections.active{    
    border-left: 3px solid #009688;
    box-shadow: 0px 0px 5px 2px #ccc;
    }div.question-title{  
      padding: 10px;
      width: 100%;
      font-size: 18px;
      margin: auto;
      display: block;
      border-bottom: 2px solid #ccc;
      border-top: 0;
      border-right: 0;
      border-left: 0;
      outline: none;
    }div.question-title::placeholder{
        color: #9E9E9E;
      }input.question-option{  
        width: 100%;
        font-size: 14px;
        margin: auto;
        display: block;
        border-bottom: 1px solid transparent;
        border-top: 0;
        border-right: 0;
        border-left: 0;
        outline: none;
        padding: 10px 0;
          }input.question-option::placeholder{
              color: #9E9E9E;
            }.Optionstyles .inputetype{
              margin: 15px 0 0;
              }.Optionstyles .inputetype label{
                width: 100%;
                cursor: auto;
                }.regotion:nth-child(1) .inputetype:first-child label i:nth-child(2){
                  display: none !important;
                  }.Optionstyles .inputetype label i{
                      font-size: 16px;
                      float: left;
                      margin: 0 5px;
                      color: #808080;
                      cursor: pointer;
                      margin-top: 10px;
                    }.Optionstyles .inputetype label i{
                      display: none;
                      }.Optionstyles .inputetype label:hover input.question-option,
                        .questionSections.active input.question-option:hover,
                        .questionSections.active input.question-option:focus{
                          border-bottom: 1px solid #ccc;
                          }.questionSections.active .Optionstyles .inputetype label:hover i,
                              .questionSections.active .Optionstyles .inputetype label:active i{
                                display: -webkit-inline-box;
                                }.questionSections.active .sectionImage{
                                    position: absolute;
                                    top: 27px;
                                    font-size: 16px;
                                    color: gray;
                                    right: 0;
                                    display: block;
                                    cursor: pointer;
                                    }.questionSections .sectionImage{
                                      display: none;
                                      }.Optionstyles .inputetype p{
                                        position: absolute;
                                        left: 0px;
                                        top: 6px;
                                        z-index: 9;
                                        background-color: white;
                                        padding: 5px;
                                        color: #ad9ead;
                                        }
.AddNewOptions, .AddNewOptionsdroplist, .AddNewOptionsOrder, .AddNewOptionsWeight{
    color: #ccc;
}
.AddNewOptions .inputetype .addoption, 
.AddNewOptionsdroplist .inputetype .addoptiondroplist,
.AddNewOptionsOrder .inputetype .addoptionOrder,
.AddNewOptionsWeight .inputetype .addoptionWeight{
  border-bottom: 1px dotted transparent;
  cursor: pointer;
  }.AddNewOptions .inputetype .addoption:hover, 
  .AddNewOptionsdroplist .inputetype .addoptiondroplist:hover,
  .AddNewOptionsOrder .inputetype .addoptionOrder:hover,
  .AddNewOptionsWeight .inputetype .addoptionWeight:hover{
    border-bottom: 1px dotted #ccc;
    }.AddNewOptions .inputetype .addanothere{
        color: #4285f4;
        cursor: pointer;
        font-weight: bold;
        margin-left: 4px;
        tap-highlight-color: transparent;
        text-align: center;
        text-transform: uppercase;
        -webkit-tap-highlight-color: transparent;
      }

.radioOptions:first-child .inputetype label:hover i.fa-close{
  display: none;
}

.desc { color:#6b6b6b;}
.desc a {color:#0092dd;}

.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { 
  color: gray; 
  text-decoration:none; 
  outline:none;     
  font-size: 14px;
font-weight: bold;}
.dropdown a:hover { color:#353535;}
.dropdown dt a:hover { color:#353535;}
.dropdown dt a {    background: #f3f3f3 url(../img/arrow.png) no-repeat scroll right 10px center;
    display: block;
    padding-right: 20px;
    width: 100%;}
.dropdown dt a span {cursor:pointer; display:block; padding:5px;}
.dropdown dd ul { z-index:2; background:#fafafa none repeat scroll 0 0;  color:#353535; display:none;
                  left:0px; padding:0px; position:absolute; top:-80px; width:auto; width:100%; list-style:none;}
.dropdown dd ul li a { padding: 10px; display:block; cursor: pointer; margin: 0;}
.dropdown dd ul li a:hover { background-color: #e0e0e0;}
.dropdown dt a span i{
  float: left;
  padding: 7px;
  font-size: 16px;
}.dropdown dd ul li a i{
  font-size: 18px;
  padding: 0px 5px;
}
.dropdownicons { display:none;}


.responseTab{
  background-color: #fafafa;
  border-bottom: 1px solid #ccc;
  }.responseTab i{
    width: 30px;
    height: 30px;
    border-radius: 4px;
    color: white;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    background-color: #808080;
    margin-top: 15px;
    transition: border-radius 0.5s ease;
    }.responseTab i:hover{
      background-color: #009688;
      color: #ffffff;
      border-radius: 50%;
      }

.sectionfooter{
  text-align: right;
  padding-top: 10px;
  margin-top: 40px;
  height: 30px;
  }.sectionfooter i{
    cursor: pointer;
    font-size: 18px;
    margin: 5px 0px 5px 5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    padding-top: 6px;
    color: gray;
    }.sectionfooter i:active{
      background-color: #ccc;
      }

.responsetable tr td:first-child{
  text-align: left;
  }.responsetable tr td{
    text-align: center;
    }.responsetable tr td .label.label-primary{
      background-color: #009688;
      }.responsetable .table thead tr td{
        font-weight: bold;
        }

.imggallery{
  padding: 0;
  margin: 0;
  }.imggallery li{
    list-style: none;
    width: 135px;
    height: 120px;
    cursor: pointer;
    background-size: cover;
    display: inline-block;
    margin: 2px 5px;
    }.imggallery li.active{
    border: 2px solid #009688;
    }
.scroll{overflow: auto;}
.scroll::-webkit-scrollbar-track
{
  background:transparent;}
.scroll::-webkit-scrollbar
{
  width: 5px;
  background:transparent;}
.scroll::-webkit-scrollbar-thumb
{
  background-color: #CCC;
}

.buttonsToQuestion{
    background: white;
    width: auto;
    height: auto;
    position: fixed;
    right: 0;
    top: 35%;
    box-shadow: 0px 0px 6px 3px #ccc;
    z-index: 9;
  }.buttonsToQuestion ul{
    padding: 0;
    margin: 0;
    }.buttonsToQuestion ul li{
      list-style: none;
      padding: 15px ;
      font-size: 18px;    
      color: gray;
      border-bottom: 1px solid #e0e0e0;
      cursor: pointer;
      }.buttonsToQuestion ul li:last-child{
        border-bottom: 0;
        }.buttonsToQuestion ul li:hover,
        .buttonsToQuestion ul li.active{
          background-color: gray;
          color: white;
          }.buttonsToQuestion ul li:active{
            background-color: black;
            color: white;
            }.buttonsToQuestion ul li:first-child{
              border-radius: 4px 0 0 0;
              }.buttonsToQuestion ul li:last-child{
                border-radius: 0 0 0 4px;
              }

.validateQuestionoption i.active{
  color: #FFC107;
  }.validateQuestionoption i.activeHover{
  color: #FFC107;
  }.validateQuestionoption i{
    cursor: pointer;
    }.deleteOptionalert{
        width: 200px;
        height: auto;
        position: fixed;
        bottom: 0;
        background-color: #009688;
        color: white;
        text-align: center;
        padding: 30px 10px 20px;
        font-size: 16px;
        box-shadow: 0px 0px 20px 3px #969696;
      }.checkbox-custom label::before,
      .radio-custom label::before{
          border: 1px solid #cccccc;
        }.checkbox-custom label.passage::before, .radio-custom label.passage::before,
        .checkbox-custom label.passage::after, .radio-custom label.passage::after{
            display: none;
        }.checkbox-custom label::before, .radio-custom label::before,
        .checkbox-custom label::after, .radio-custom label::after,
        .radio-custom input[type=radio],
        .checkbox-custom input[type=checkbox]{
            margin-top: 10px;
          }

.timepickeroption input,
.datepickeroption input,
.shortpassageoption input,
.longpassageoption textarea,
.numberOption input,
.OrderAnswerList input,
.WeightAnswerList input{
    width: 100%;
    font-size: 14px;
    margin: auto;
    display: block;
    border-bottom: 1px solid #ccc;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    outline: none;
    padding: 10px 0;
    }.timepickeroption i, .datepickeroption i{
      font-size: 22px;
      color: #808080;
      margin-top: 10px;
    }
.OrderAnswerList input
{
  margin-left: 20px;
}
.orderList li i.fa-close {
  color: gray;
  padding: 20px 0 0 0;
  display: none;
  cursor: pointer;
}.orderList li:first-child:hover i.fa-close {
  color: gray;
  padding: 20px 0 0 0;
  display: none !important;
}.orderList li:hover i.fa-close {
  display: block;
}
@media (max-width: 766px)
{
  .questionSections .validateQuestion{
      top: -10px !important;
      }
      .questionSections .validateQuestionoption{
        top: 28px !important;
      }
}
.questionSections .validateQuestion{
      background-image: url(../img/valide.png);
      width: 30px;
      height: 30px;
      background-size: cover;
      position: absolute;
      right: 5px;
      top: 14px;
      cursor: pointer;
      display: none;
      transition: all 0.3s ease;
      }.questionSections.active .validateQuestion{
            display: block;
          }.questionSections .validateQuestionoption{
              display: none;
              z-index: 10;
              right: 10px;
              top: 48px;
              position: absolute;
              width: 170px;
              text-align: center;
            }.questionSections .validateQuestionoption ul{
                padding: 0;
                margin: 0;
                background-color: #fafafa;
              }.questionSections .validateQuestionoption ul li{
                  list-style: none;
                  color: #a79e9e;
                  padding: 5px 15px;
                  cursor: pointer;
                  font-size: 12px;
                  border: 1px solid rgba(204, 204, 204, 0.44);
                  border-bottom: 0;
                }.questionSections .validateQuestionoption ul li:hover{
                    background-color: #e0e0e0;
                    color: grey;
                  }.questionSections .validateQuestionoption::before{
                        font-family: 'FontAwesome';
                        content: "\f0de";
                        position: absolute;
                        right: 5px;
                        top: -10px;
                        color: #a79e9e;
                    }.questionSections.active .validateQuestion:hover{
                        -webkit-transform: rotate(15deg);
                        width: 35px;
                        height: 35px;
                        transition: all 0.3s ease;
                        top: 11px;
                      }.questionSections.active .validateQuestion:active{
                          -webkit-transform: rotate(0deg);
                          width: 30px;
                          height: 30px;
                          transition: all 0.3s ease;
                        }
.orderList {
  padding: 0;
  margin: 0;
  }.orderList li{
    list-style: none;
    position: relative;
    }.orderList li::before{
      font-family: 'FontAwesome';
      content: "\f0dc";
      position: absolute;
      left: 2px;
      top: 7px;
      color: #9E9E9E;
      cursor: pointer;
      background-color: #fafafa;
      padding: 5px 4px;
      border: 1px solid #dcdcdc;
        }
.WeightAnswerList .fa-close{
  display: none;
  }.WeightAnswerList:hover .fa-close{
    display: block;
    margin: 14px 0 0 0;
    color: grey;
    cursor: pointer;
    }.WeightAnswerList:hover .fa-close{
      display: none ;
      }

.tags{
  padding: 0;
  margin: 0;
  }.tags li,
  .tags div{
    list-style: none;
    display: inline-block;
    background-color: #fafafa;
    border: 1px solid #f3f3f3;
    padding: 2px 4px;
    margin: 2px;
    cursor: pointer;
    }.tags li:hover,
    .tags div:hover{
    background-color: #f3f3f3;
      }.tags li i{
        font-size: inherit;
        margin-top: inherit;
      }

      .timepicker select{
          display: inline-block;
          margin: 15px 0;
          border: 0;
      }

b, strong {
    font-weight: bold !important;
}
.btneditContent 
{
  text-align: right;
}
.btneditContent i
{ 
  cursor: pointer;
  color: #717171;
}
.note-editor.note-frame.panel.panel-default
{
  margin-bottom: 0 !important;
  border: 0 !important;
}
.note-editor.note-frame .note-statusbar .note-resizebar
{
  display: none;
}

.panel-default>.panel-heading
{
  background-color: transparent !important;
}


/* Css Added by Durrani */
.updatelogo
{
  cursor: pointer;
  opacity: 0.8;
}
.updatelogo:hover
{
  opacity: 1;
}

.valueBoxAdDis
{
  border-color: #FFF !important;
}
#loaderAd{display: none;}
.spinner 
{
  
  /*margin: 100px auto 0;*/

  width: 70px;
  text-align: center;
  position: absolute;
  left: 50%; top: 50%;
}

.spinner > div {
  width: 10px;
  height: 10px;
  background-color: #333;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}


.boxDa
{
  border: 1px solid #CCC;
  margin-top: 10px;
  margin-left: 10px;
  padding: 0px;
}

.boxHeaderDa
{
    text-align: center;
    background: #4983c3;
    color: #FFF;
    padding: 10px;
}
.div_opPattern
{
  margin: 10px;
}
/* LOADER */
#loaderDa
{
  display: none;
}
.cssload-container
{
      top: 50%;
    left: 50%;
    position: fixed;
    z-index: 1000;
}
  
.cssload-whirlpool,
.cssload-whirlpool::before,
.cssload-whirlpool::after {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgb(204,204,204);
  border-left-color: rgb(0,0,0);
  border-radius: 974px;
    -o-border-radius: 974px;
    -ms-border-radius: 974px;
    -webkit-border-radius: 974px;
    -moz-border-radius: 974px;
}

.cssload-whirlpool {
  margin: -24px 0 0 -24px;
  height: 49px;
  width: 49px;
  animation: cssload-rotate 1150ms linear infinite;
    -o-animation: cssload-rotate 1150ms linear infinite;
    -ms-animation: cssload-rotate 1150ms linear infinite;
    -webkit-animation: cssload-rotate 1150ms linear infinite;
    -moz-animation: cssload-rotate 1150ms linear infinite;
}

.cssload-whirlpool::before {
  content: "";
  margin: -22px 0 0 -22px;
  height: 43px;
  width: 43px;
  animation: cssload-rotate 1150ms linear infinite;
    -o-animation: cssload-rotate 1150ms linear infinite;
    -ms-animation: cssload-rotate 1150ms linear infinite;
    -webkit-animation: cssload-rotate 1150ms linear infinite;
    -moz-animation: cssload-rotate 1150ms linear infinite;
}

.cssload-whirlpool::after {
  content: "";
  margin: -28px 0 0 -28px;
  height: 55px;
  width: 55px;
  animation: cssload-rotate 2300ms linear infinite;
    -o-animation: cssload-rotate 2300ms linear infinite;
    -ms-animation: cssload-rotate 2300ms linear infinite;
    -webkit-animation: cssload-rotate 2300ms linear infinite;
    -moz-animation: cssload-rotate 2300ms linear infinite;
}



@keyframes cssload-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@-o-keyframes cssload-rotate {
  100% {
    -o-transform: rotate(360deg);
  }
}

@-ms-keyframes cssload-rotate {
  100% {
    -ms-transform: rotate(360deg);
  }
}

@-webkit-keyframes cssload-rotate {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes cssload-rotate {
  100% {
    -moz-transform: rotate(360deg);
  }
}

/* END LOADER */


.underlineDa
{
  cursor: pointer;
}
.underlineDa:hover
{
  text-decoration: underline !important;
}

/* Css Added by AD End*/