body {

  overflow-x: hidden;
  margin: 0;
  padding: 0 !important;
 }

body {
  position: relative;
  background-color: #f6f6f6;
      direction: rtl;

}


.choiceText {
	width: 300px;	
	color: #666;
}

.choiceT {
	width: 300px;
	color: #000;
}


a:focus {
    outline: thin dotted;
    outline: 0;
    outline-offset: 0;
}

ul { margin: 0; padding: 0 }
li { list-style: none; }
a, button {
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  outline: none; text-decoration:none;
}
a { text-decoration: none; display: inline-block; }

h1, h2, h3, h4, h5, h6, p {  color: #333333; }

#form1, #form2, #form3, #form4, #shareDiv, #list, #participate {
    position: absolute;
    border-radius: 8px;
    box-shadow: 0px 4px 19px 0px rgba(0, 0, 0, 0.08);
    width: 400px;
    height: auto;
    padding: 30px;
    top: 70px;
    right: calc(50% - 200px);
    background-color: #fff;
}

h1 {text-align: center; font-size: 26px;  margin-bottom: 10px; margin-top:10px;}

.labeldiv {
    margin-bottom: 10px;
    color: #777;
}

.inputdiv {     margin-bottom: 25px;
    position: relative; }

.inputdiv .short input {    width: calc(100% - 114px);}

.logo {
    margin-bottom: 25px;
}

.logo a {    float: left;
    position: relative;
    top: 16px;
    border-radius: 6px;
    color: #7ad58d; }
	
	.logo img {
		cursor: pointer;
	}


#shareDiv .logo img { margin-top: 0 !important; margin-right: 0 !important }



input, .input {
    font: normal 16px 'Tajawal';
    border: 1px solid #d4d4d4;
    padding: 10px;
    width: calc(100% - 22px);
    border-radius: 6px;
	 -webkit-appearance: none;
}

.inputdiv textarea {     resize: none;
    height: 50px; }

    .next input { width: 100%;
    background: #7ad58d;
    border: none;
    color: #fff;  
		   -webkit-appearance: none;

	-webkit-transition: all .3s ease;
  transition: all .3s ease; cursor: pointer; }


    :focus {
    outline: -webkit-focus-ring-color auto 0px;
}

    .next input:hover {     background: #4dbe65; }
.next input:disabled {
  background: #ccc;
  color:#333;
}

 button#next2:disabled {
  background: #ccc !important;
  color:#333 !important;
  cursor: not-allowed !important;
	   -webkit-appearance: none;

}


#form2 .previous {     width: 49%;
    display: inline-block; float: right; }

#form2 .previous button {    float: right;width: calc(100% - 10px);
    background: #fff;
    border: 1px solid #d4d4d4 ;
    color:  #000;  
	   -webkit-appearance: none;
	 -webkit-transition: all .3s ease;
  transition: all .3s ease; cursor: pointer;}

  #form2 .next button {    
    background: #7ad48c;
    border:none;
    color:#fff;
    cursor: pointer;
    float: left;
	  
	  	   -webkit-appearance: none;
 -webkit-appearance: none;

}

i.ri-delete-bin-6-line {
    position: absolute;
    left: 100px;
    top: 13px;
    color: #cccccc;
    cursor: pointer;
        -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

  .long i.ri-delete-bin-6-line { left: 15px }

.inputdiv div { margin-bottom: 20px; position: relative; }

i.ri-delete-bin-6-line:hover { color: #fc0000; }

    #form2 .next { width: 49%; display: inline-block; float: left } 
    #form2 .newt button { float: left;width: calc(100% - 10px);
        background: #7ad58d;
    border: none;
    color: #fff;  
		   -webkit-appearance: none;
-webkit-transition: all .3s ease;
  transition: all .3s ease; cursor: pointer; }


      #form3 .next { width: 49%; display: inline-block; float: left } 
    #form3 .newt button { float: left;width: calc(100% - 10px);
        background: #7ad58d;
    border: none;
    color: #fff;  
		   -webkit-appearance: none;
-webkit-transition: all .3s ease;
  transition: all .3s ease; cursor: pointer; }


  #form3 .previous {     width: 49%;
    display: inline-block; float: right; }

#form3 .previous button {    float: right;width: calc(100% - 10px);
       background: #fff;
    border: 1px solid #d4d4d4 ;
    color:  #000;  
		   -webkit-appearance: none;
-webkit-transition: all .3s ease;
  transition: all .3s ease; cursor: pointer;}

  #form3 .next button {    
    background: #7ad48c;
    border:none;
    color:#fff;
    cursor: pointer;
    float: left;
	   -webkit-appearance: none;
}


#form4 .inputdiv input {
    width: calc(100% - 22px);
}
      #form4 .next { width: 49%; display: inline-block; float: right } 
    #form4 .newt button { float: left;width: calc(100% - 10px);
        background: #7ad58d;
    border: none;
    color: #fff;  
		   -webkit-appearance: none;

	-webkit-transition: all .3s ease;
  transition: all .3s ease; cursor: pointer; }


  #form4 .previous {     width: 49%;
    display: inline-block; float: right; }

#form4 .previous button {    float: right;width: calc(100% - 10px);
       background: #fff;
    border: 1px solid #d4d4d4 ;
    color:  #000; 
		   -webkit-appearance: none;

	 -webkit-transition: all .3s ease;
  transition: all .3s ease; cursor: pointer;}

  #form4 .next button {    
    background: #7ad48c;
    border:none;
    color:#fff;
    cursor: pointer;
    float: left;
	   -webkit-appearance: none;
}

input#deadline {
    width: 100%;
    width: calc(100% - 22px);
    margin-top: 10px;
}

.slider:before {

    height: 22px;
    width: 22px;
    right: 4px !important;

}

.slider {

    height: 32px;
}


   button:disabled,
button[disabled]{
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
	   -webkit-appearance: none;
} 

.qs { display: block;    margin-top: 10px; margin-bottom: 20px; }

.qs input {   position: absolute;
    width: 60px !important;
    left: 0;
    top: -54px;  }

 .next input:disabled {
    background: #ccc;
    color: #333;
	   -webkit-appearance: none;
}


.add-input {
    margin-bottom: 20px;
}

.add-input input { width: 100%;
    background: #15a7ad;
    border: none;
    color: #fff; cursor: pointer;
	
	   -webkit-appearance: none;
 }


  .list-div-main {  margin-bottom: 20px }  

@media only screen and (max-width : 1200px) {}


@media only screen and (max-width : 991px) {}




/*
===================================================================================================================
                                                    end media                                                        
====================================================================================================================
*/

  body {font: normal 16px 'Tajawal'; }
  input, .input {font: normal 16px  'Tajawal'; ?>; border: 1px solid #d4d4d4; padding: 10px;}
  
  .qs {visibility: hidden; position: absolute; }
  .input-toggle {visibility: visible; position: relative; }

  .visible {visibility: visible;}
  .hidden {visibility: hidden;}
  
  
  
  
::-webkit-input-placeholder { /* Edge */
  color: #d4d4d4;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #d4d4d4;
}

::placeholder {
  color: #d4d4d4;
}

  
.switch {
  position: absolute;
  display: inline-block;
  width: 60px;
  height: 34px;
  top: -36px;
  left: 0
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";

  right: 4px;
  bottom: 5px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #7ad48c;
}

input:focus + .slider {
  box-shadow: 0 0 1px #7ad48c;
}

input:checked + .slider:before {
  -webkit-transform: translateX(-30px);
  -ms-transform: translateX(-30px);
  transform: translateX(-30px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}   


#next2 { width: calc(100% - 10px); }

#form2 .previous button { width: calc(100% - 10px); }



#shareDiv button {     position: absolute;
    left: 30px;
    width: 70px;
    text-align: center;
    border-radius:6px 0 0 6px; 
		cursor: pointer;

	}

    #shareDiv input#link { margin-bottom: 25px }
#shareDiv input.input { margin-bottom: 25px;width: 100%;
    color: #fff;
    background: #4dbe65;
    border: none;
    cursor: pointer; margin-top: 25px;
        -webkit-transition: all .3s ease;
    transition: all .3s ease; }

    #shareDiv input.input:hover {     background: #31b64d !important; }

#shareDiv img { margin-right: 10px; margin-top: 10px }

#shareDiv input.input:hover {background: #7ad58d;}


.center-content {    text-align: center;}

.ready-p { margin-bottom: 20px; text-align: center; }


@media only screen and (max-width : 767px) {

#form1, #form2, #form3, #form4, #shareDiv, #list, #participate {
    position: absolute;
    border-radius: 8px;
    width: calc(100% - 19px);
    height: auto;
    padding: 30px 10px;
    top: 0;
    right: 0;
}

#form1, #form2, #form3, #form4, #shareDiv, #list, #participate { box-shadow: none }

body {
    position: relative;
    background-color: #ffffff;
}
#shareDiv button {
    left: 10px;
}

}

#list .details { font-size: 16px; color:#afafaf ; text-align: center; margin-top: -7px; padding-bottom:10px}
#list .sep {margin-bottom: 15px; border-bottom: 1px solid #ddd; padding-bottom: 15px; }


div.choice {
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
}

#list .switch {

    top: 10px;

}


#list span.name {
    display: block;
    padding-right: 14px;
        color: #2e2e2e;
}

#list .names { display: block;    margin-top: 10px; }

#list .count {font-size: 14px;
    margin-top: 5px;
    display: block;}


#thank { text-align: center; }


#backtomain a{
margin-top: 20px;
    
    background: #78d48b;
    border-radius: 5px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #fff; text-align: center;}

    #backtomain a:hover {background: #44b45b;}




.cbx span:last-child {
    font-weight: 500;
    font-size: 14px;
    margin-top: -21px;
    display: -webkit-box;
    color: #383534;
    margin-bottom: 10px;
}

.cbx span:first-child {
    position: relative;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    transform: scale(1);
    vertical-align: middle;
    border: 2px solid #afafaf;
    transition: all .2s ease;
    margin-right: -30px;
}

.checkbox-item {
    padding-right: 35px;
}




.cbx {
  margin: auto;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}

.cbx span {
  display: inline-block;
  vertical-align: middle;
  transform: translate3d(0, 0, 0);
}


.cbx span:first-child svg {
    position: absolute;
    top: 2px;
    left: 1px;
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all .3s ease;
    transition-delay: .1s;
    transform: translate3d(0, 0, 0);
}

.cbx span:first-child:before {
  content: "";
  width: 100%;
  height: 100%;
  background: #cccccc;
  display: block;
  transform: scale(0);
  opacity: 1;
  border-radius: 50%;
}


.inp-cbx:checked + .cbx span:first-child {
  background: #7ad58d;
  border-color: #7ad58d;
  animation: wave .4s ease;
}

.inp-cbx:checked + .cbx span:first-child svg {
  stroke-dashoffset: 0;
}

.meen, .mine { opacity: 0; position: absolute; font-size: 0; width: 0; height: 0 }
#meen, #mine { opacity: 0; position: absolute; font-size: 0; width: 0; height: 0 }



i.ri-user-3-fill {

      float: right;
}
	.dead {color: red; }

a.logoLink {
    float: none;
    top: 0;
}

  .checkbox-item.checkbox-2 {
    float: left;
        position: relative;
    z-index: 1;
        top: 2px;
}

  .checkbox-item.checkbox-2 .cbx span:first-child {
    width: 20px;
    height: 20px;
}

 .checkbox-item.checkbox-2 .cbx span:first-child svg {

    right: 2px;
    width: 15px;
    height: 15px;
}

 .checkbox-item.checkbox-2 .inp-cbx:checked + .cbx span:first-child {
    background: #77d58c;
    border-color: #77d58c;
}

.checkbox-item.checkbox-2.dclass {
    opacity: 0.3;
}

.checkbox-item.checkbox-2.dclass .cbx span:first-child {

    cursor: not-allowed;
}

.strike {
	text-decoration: line-through;
	}
	
	.checkbox-item.dclass {
    opacity: 0.3;
}

.checkbox-item.dclass1 .inp-cbx:checked + .cbx span:first-child { opacity: 0.3 }
.ownerDel {
    top: -27px;
    text-align: left;
    position: relative;
    left: 50px;
}

.ownerDel input {
    width: 12px;
    position: absolute;
    height: 14px;
    cursor: pointer;
    opacity: 0;
}

.ownerDel span {    color: #afafaf;
    font-size: 18px;}

    .ownerDel.red-t span { color: #cd1414; }
	

.copy {z-index: 1000;}	
.nameitem .checkbox-item {     position: absolute;
    left: 75px;
    margin-top: -20px; }

.nameitem .ownerDel {
top: -20px;
    text-align: left;
    position: relative;
    left: 110px;
}
.listdetails {margin-top: 10px; text-align: center; font-size: 16px; color: #666; margin-bottom: 10px;}
.listdeadline {margin-top: 5px; text-align: center; font-size: 14px; font-weight: bold; color: #7ad48c}
.listnotes {margin-top: 5px; text-align: center; font-size: 14px; font-weight:bold; color:#7ad48c}