/*@import url("https://fonts.googleapis.com/css?family=Asset");
font-family: 'Asset';font-size: 14px;
*/

    #formBuilder{
        box-sizing: border-box;
        background-color: #f2f2f2;
        padding: 6px;
        box-sizing: border-box;
        font-size:1em;
        border: 0px solid transparent;
        
    }
    
    #QuizDiv input[type=text], #QuizDiv input[type=email], #QuizDiv input[type=name],#QuizDiv input[type=phone],#QuizDiv  select,#QuizDiv  textarea, #formBuilder input[type=text], #formBuilder input[type=email], #formBuilder input[type=phone], #formBuilder input[type=name],#formBuilder  select,#formBuilder  textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: vertical;
        font-size:.9em;
    }
    #formBuilder  select{ /* FIX FOR PADDING ISSUE */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    
    #formBuilder .inp, #QuizDiv .inp,  #formBuilder label {
        padding: 12px 12px 12px 0;
        display: inline-block;
    }
    
    #formBuilder #fbbuton, #QuizDiv input[type=button],#QuizDiv input[type=submit],#formBuilder input[type=submit] {
        background-color: #4CAF50;
        color: white;
        padding: 12px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        width:90%;
        font-size:.9em;
    }
    #formBuilder #frm_buton {
        text-align:center;
        margin:10px;
    }

    #QuizDiv .error,#formBuilder .error{
        color:red;
        font-weight: bold;
        display:none;
        font-size:.7em;
    }
    
    #QuizDiv .hover:hover,#QuizDiv input[type=button]:hover, #QuizDiv  input[type=submit]:hover, #formBuilder input[type=submit]:hover {
        background-color:#22c529;/* #45a049;*/
    }
    
    #formBuilder .fbcol-25 {
        float: left;
        width: 25%;
        margin-top: 6px;
    }
    
    #formBuilder .fbcol-75 {
        float: left;
        width: 75%;
        margin-top: 6px;
    }
    
    /* Clear floats after the columns */
    #formBuilder .row:after {
        content: "";
        display: table;
        clear: both;
    }
    




    /*--------------------------
    ----------------------------
    ----QUIZ MODULES CLASSESS---
    ****************************/


    #QuizDiv *, #QuizDiv *:before,#QuizDiv *:after {
        box-sizing: inherit;
      }
    .QuizDiv
    {
        background-color:transparent;
        height: 100%;
        width:100%;
        box-sizing: border-box;

        border:1px solid transparent;
        position: relative;


    }
  
    #QuizDiv .InnerDiv
    {
        text-align: center; 
        background-color:transparent;
        /*min-width:500px;*/
        box-sizing: border-box;
        border:0px solid transparent;
        display: inline-block;
        width: 100%;
        height:100%;
    }
    #QuizDiv .Question{
        content: "";
        display: table;
        clear: both;

        width:100%;
        margin-bottom: 1%;
        margin-top:5%;
        text-align: center;
        /*color:green;*/
        font-size: 1.5em;
        border:0px solid transparent;
        
    }

    #QuizDiv .AnswerDiv
    {
        content: "";
        clear: both;
        display: inline-block;
        margin-top:3%;
        background-color:transparent;
        color: #000;
        width:auto;
        min-width:40%;
        box-sizing: border-box;
        border:0px solid transparent;
        
        
    }
    #QuizDiv .NextButton{
        
        display: inline-block;
        clear: both;
        margin-top:2%;
        font-size: .9em;
        
    }
    #QuizDiv .NextButtonDiv{
        content: "";
        clear: both;
        display: inline-block;
        width:auto;
        min-width:40%;
        margin-top:1%;
        padding-bottom:1%;
    }

    #QuizDiv input[type=button]{
        width:100%;
    }

    #QuizDiv .hide{ display: none; }
    #QuizDiv .optionButton {
        margin-bottom:3%;
        width:100%;
        font-size: .9em;
        align-self: center;
    }

    /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 800px) {
        #formBuilder .fbcol-25, #formBuilder  .fbcol-75, #formBuilder  input[type=submit] {
            width: 100%;
            margin-top: 0;
        }

        #QuizDiv .AnswerDiv, #QuizDiv .NextButtonDiv{
            width:100%;
        }
    }