:root{
                --orange : #FFAA23;
                --red : #FE6150;
                --blue : #124E70;
                --light-blue : #1BC0C6;
                --gray : #DFE0E5;
                --skyblue : #5DBEC5;
                --white : #fff;
            }
            @font-face {
            font-family: testfont;
            src: url(../fonts/ArbFONTS-Montserrat-Arabic-Regular.ttf);
            }
            @font-face {
                font-family: testfont2;
                src: url(../fonts/ArbFONTS-Montserrat-Arabic-ExtraLight.ttf);
            }   
body {
  background: #fff;
  color: #fff;
  font-family: testfont2;
  margin: 0;
  padding: 0;
  direction : rtl;
}

.tamoo7-flex {
  display: flex;
  width : 100%;
  /*min-height : 100vh; */
  text-align : center;
  margin : 0 auto;
  justify-content: center;
  flex-flow: row-reverse;
  align-items: center;
  overflow-x : hidden;
}
.tamoo7-col{
  width : 50%;
  overflow : hidden;
}
.tamoo7-col:nth-child(1){
    text-align : right;
    transform : translate(-5%, 0);
}
.tamoo7-col:nth-child(2){
    text-align : left;
       transform : translate(-21%, -5%);
}
.tamoo7-col-mobile{
    display : none;
}
#result {
  font-size: 26px;
  text-align : right;
  color: var(--blue);
  margin-bottom: 10px;
  text-align : center;
}
#ans {
  color: var(--blue);
  /*padding: 20px 20px 10px 20px;*/
  padding : 10px;
  font-size: 26px;
  float : right;
  background: transparent;
  border: 0; 
  border-bottom : 1px solid var(--blue);
  margin-bottom : 25px;
}
#ans:focus {
  outline: 0;
  outline-offset: 0;
}
#ans-sub,
#ans-back{
  border : 1px solid var(--blue);
  background-color : transparent;
  color : var(--blue);
  font-family : testfont;
  width : fit-content;
  margin : 0 auto;
  padding : 1vh 5vh;
  display: block;
  transition : all 0.5s;
}
#ans-sub:hover,
#ans-back:hover{
  border : 1px solid var(--white);
  background-color : var(--blue);
  color : var(--white);
}

.checkboxservice,
.checkboxcolor,
.checkboxcash,
.checkboxbrand,
.checkboxgear{
  display: none;
  width : fit-content;
  margin : auto;
}
input[type="checkbox"]{
  display: none;
}
.checkbox-label{
  font-size: 14px;
  border: 1px solid var(--blue);
  padding: 1vh 2vh;
  width : fit-content;
  min-width : 70px;
  text-align : center;
  color : var(--blue);
  cursor: pointer;
  margin: 20px 0;
  direction: rtl;
  transition: all 0.5s
}
/* .checkbox-label:hover{
  background-color: white;
  color: #50514F;
} */
input[type="checkbox"]:checked + .checkbox-label{
  background-color: var(--blue);
  border-color : var(--white);
  color: var(--white);
}
.checkbox-link{
  text-decoration: none;
  color: inherit !important;
}
::-webkit-input-placeholder { /* Edge */
  color: #e4e4e4;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #e4e4e4;
}
::placeholder {
  color: #e4e4e4;
}

@media only screen and (max-width : 850px){
    .tamoo7-flex {
      display: block;
      width : 100%;
      text-align : center;
      margin : 100px auto 0;
      justify-content: center;
      align-items: center;
    }
    .tamoo7-col{
      width : 100%;
    }
    .tamoo7-col:nth-child(1){
        display : none;
    }
    .tamoo7-col:nth-child(2){
        text-align : right;
        width : fit-content;
       transform : translate(-7.5%, -5%);
    }    
    .tamoo7-col-mobile{
        display : block;
        text-align : center;
        margin-top : -50px;
    }
    .tamoo7head{
    }
    
    #result {
      font-size: 18px;
      margin-top : 15px;
      margin-bottom: 10px;
    }
    #ans {
      color: var(--blue);
      padding : 10px;
      font-size: 20px;
      float : right;
      background: transparent;
      border: 0; 
      border-bottom : 1px solid var(--blue);
      margin-bottom : 25px;
    }
        .checkbox-label{
          font-size: 14px;
          border: 1px solid var(--blue);
          padding: 1vh 2vh;
          width : fit-content;
          min-width : 100px;
          text-align : center;
          color : var(--blue);
          cursor: pointer;
          margin: 10px 0;
          direction: rtl;
          transition: all 0.5s
        } 

}


   /* CSS talk bubble */
   .talk-bubble {
       margin: 40px auto;
       display: block;
       position: relative;
       width: 400px;
       height: 200px;
       background-color: #F6F6F6;
        box-shadow: -11px 10px 4px 0px rgba(217,217,217,1);
        -webkit-box-shadow: -11px 10px 4px 0px rgba(217,217,217,1);
        -moz-box-shadow: -11px 10px 4px 0px rgba(217,217,217,1);   
   }
   .round{
       border-radius: 20px;
       -webkit-border-radius: 20px;
       -moz-border-radius: 20px;
      }
   .tri-right.right-in:after{
       content: ' ';
       position: absolute;
       width: 0;
       height: 0;
       left: auto;
       left: -37px;
       bottom: 38px;
       border-radius :  0px 0px 5px 0px;
       transform : rotate(180deg);
       top: auto;
       border: 20px solid;
       border-color: #F6F6F6 transparent transparent #F6F6F6;
        box-shadow: 0px -3px 0px 0px rgba(217,217,217,1);
        -webkit-box-shadow: 0px -3px 0px 0px rgba(217,217,217,1);
        -moz-box-shadow: 0px -3px 0px 0px rgba(217,217,217,1);          
   }
   /* talk bubble contents */
   .talktext{
       padding: 1em;
       text-align: left;
       line-height: 1.5em;
   }
   .talktext p{
   /* remove webkit p margins */
       -webkit-margin-before: 0em;
       -webkit-margin-after: 0em;
   }
            
@media only screen and (max-width : 850px){
    
   /* CSS talk bubble */
   
   .talk-bubble {
       margin: 40px auto;
       display: block;
       width: 300px;
       height: 300px;
       background-color: #f6f6f6;
       position: relative;
       /*
       transform : translate(10%, -50%);
       */
   }
  
   .round{
       border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% ;
       /*
       border-radius:  30px;
       -webkit-border-radius: 30px;
       -moz-border-radius: 30px;  
       */
   }
   .tri-right.right-in:after{
       content: ' ';
       position: absolute;
       width: 0;
       height: 0;
       right: 80px;
       bottom: 8px;
       border-radius : 5px;
       transform : rotate(200deg);
       top: auto;
       border: 30px solid;
       border-color: #F6F6F6 transparent transparent #F6F6F6;
       border-color: #F6F6F6 transparent transparent #F6F6F6;
        box-shadow: 0px 0px 0px 0px rgba(217,217,217,1);
        -webkit-box-shadow: 0px 0px 0px 0px rgba(217,217,217,1);
        -moz-box-shadow: 0px 0px 0px 0px rgba(217,217,217,1);         
   }
   /* talk bubble contents */
   .talktext{
       padding: 1em;
       text-align: left;
       line-height: 1.5em;
   }
   .talktext p{
   /* remove webkit p margins */
       -webkit-margin-before: 0em;
       -webkit-margin-after: 0em;
   }    
    
}