*{ box-sizing: border-box; 
   padding: 0;
   margin: 0;
 font-family: sans-serif;
 outline: none;
}



#cyber-content-wrapper{
    /*box-shadow:0px 2px 4px 0px rgba(0, 0, 0, 0.8); */
      background:rgba(200, 200, 200,0.05) ;
     color: rgba(255, 255, 255, 0.9);
     margin: 0 auto;
     max-width: 750px;
     background:rgba(0, 0, 0, 0.2);
     padding: 10px;
 }

#cyber-navbar{margin-bottom: 7px;}

#cyber-navbar #header-wrapper{
            display: grid;
            grid-template-columns:repeat(4, 1fr);
            grid-gap: 5px;
           list-style-type: none;
          align-items: center;
          text-align:center;
        color: white;
        font-size: 14px;
      background:rgba(200, 200, 200, 0.06);
     padding: 7px 5px;

    }

#cyber-navbar h5{font-style: italic;
                      text-shadow: 2px 3px rgba(0, 0, 0, 1);
                       padding:0  0 4px 2px;
                       color: rgba(255, 255, 255, 0.7);
                       margin: 0;
                         padding: 0;
                       margin-right: 10px;
                       border-bottom: 1px solid rgba(0, 0, 0, 0.5);
                       font-family: serif;
                       text-align: right;
                     

                       }

#cyber-navbar h5 i{
                       font-size: 14px;
                       margin-right: 5px;
                       }



#cyber-navbar #header-wrapper li{
                       cursor: pointer;
                       padding: 3px;}

.badges{background:rgb(221 ,22, 66);
                 color: white;
                  padding: 1px 1.5px;
                 border-radius:2px;
               font-size: 10px;}



#cyber-navbar #more-links-wrapper{
                        color: white;
                       list-style: none;
                        margin-top:30px;
                        margin-left: 10px;
                        display: none;
                      overflow-y:auto;
                   padding-bottom: 50px;
                   max-height:300px;
                   max-width: 400px;

                  }

#cyber-navbar #more-links-wrapper li{ 
                         padding: 20px 10px;
                           border-bottom: 1px solid rgba(255, 255, 255, 0.09);
                           word-spacing: 1.7px;
                           font-size: 15px;
                           cursor: pointer;
                          display: grid;
                         grid-template-columns: 10% 90%;
                         align-items: center;
                    text-align:left;
                  grid-gap: 2px;

                        }


#header-wrapper .active_link{color:rgba(100, 200, 197, 1.0);
                     border-bottom: 1px solid grey;
                  border-radius: 5px;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);}


@media screen and (max-width:500px){
   .hide_small{display: none;}
}



#attack-nav{background: rgba(0, 0, 0, 0.1);
             padding: 10px 5px;
            }

#attack-nav ul{ display: grid;
                 list-style: none;
                 grid-template-columns: repeat(2, 1fr);
               grid-gap: 3px;}

#attack-nav li{cursor: pointer;
            border: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 14.5px;
            text-align: center;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.9);}

#attack-nav #pending-link{color:rgb(200, 44, 44); 
                        text-align: center;}

#attack-nav #successful-link{text-align: center;
   color: rgba(0, 200, 103, 1.0);
                            }

#attack-nav span{padding-left:3px;
                  font-size: 12.3px;
                color: rgba(255, 255, 255, 0.7);
               font-weight: normal;}

#attack-title{margin: 15px 1px;
             font-weight: bold;
             word-spacing: 1.7px;
            color:lightblue;}



#attack-title i{font-size: 12px;}           

#list-wrapper{list-style: none;}
#list-wrapper li{ margin-bottom: 25px;
                  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
                  word-spacing: 1.7px;
                  font-size: 15px;
                  cursor: pointer; 
                color: rgba(255, 255, 255, 0.8);}

#list-wrapper img{width: 20px;
                  margin-right: 10px;}

.steps{display: none;}

#step-2-wrapper{}


#step-2-wrapper select{width: 100%;
                        padding:5px 10px;
                     margin-bottom: 22px;
                     border: 1px solid rgba(255, 255, 255, 0.05);
                     background: rgba(0, 0, 0, 0.1);
                     color: rgba(255, 255, 255, 0.8);
                     outline: none;
                   font-size: 15px;
                 word-spacing: 1.6px;
                 cursor: pointer;}
#step-2-wrapper select option{
 color:black;}              

#email-number-input-wrapper{}
.hide-inputs{display: none;}

#email-number-input-wrapper input{ padding: 5px 15px;
                             border: 1px solid rgba(255, 255, 255, 0.4);
                             margin-bottom: 20px;
                             background: rgba(0, 0, 0, 0.1);
                     color: rgba(255, 255, 255, 0.8);
                     width: 100%; }


.proceed-btn{ padding:5px 30px; margin-top: 5px; outline: none; border:1px solid rgba(255, 255, 255, 0.5); color:white ; background: #078; cursor: pointer;
 margin-bottom: 20px; 
 word-spacing: 1.7px;}

 #proceed-btn-1{display: none;}
  
input::placeholder{font-size: 15px;
                     color: rgba(255, 255, 255, 0.8);
                     word-spacing: 1.6px;}

  textarea::placeholder{font-size: 15px;
                     color: rgba(255, 255, 255, 0.8);
                     word-spacing: 1.6px;}


#step-3-wrapper{}


#step-3-wrapper  input{ padding: 5px 15px;
                         border: 1px solid rgba(255, 255, 255, 0.4);
                             margin-bottom: 20px;
                           background: rgba(0, 0, 0, 0.1);
                     color: rgba(255, 255, 255, 0.8);
                      width: 100%;}

#email-subject{display: none;}

#step-3-wrapper textarea{ width: 100%;
                          outline: none;
                          resize: none;
                          height: 150px;
                          padding:10px;
                           border: 1px solid rgba(255, 255, 255, 0.4);
                           background: rgba(0, 0, 0, 0.1);
                     color: rgba(255, 255, 255, 0.8);
                        }


#step-4-wrapper{ margin: 5px 1px;}


#whatsapp-info{word-spacing: 1.5px;
               margin-bottom: 5px;
            color: rgba(255, 255, 255, 0.8);}

#whatsapp-info b{opacity: 0.8;
                 font-weight: normal;
                 color: crimson;}

#checkbox-wrapper{margin-top: 5px; 
                  color:teal;
                cursor: pointer;
                display: none;
                margin-left: 5px;}

#step-3-wrapper #confirm-box{width: unset; margin-right: 2px;}

#link-btn-container{text-align: center;}

#link_btn{ margin-right: 25px;
    background: #085;
     color: white;
      font-size: 15px;
   padding: 8px 25px;
   border: none;
   outline: none;
   border-radius: 3px;
  cursor: pointer;
word-spacing: 1.6px;
 margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#step-4-wrapper input{margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
                             background: rgba(0, 0, 0, 0.1);
                     color: rgba(255, 255, 255, 0.8);
                   width: 100%;
                 padding: 5px 15px;}


#color-label{color: rgba(255, 255, 255, 0.8);}

#accept-conditons-wrapper{margin-top: 10px;
                 color: rgba(255, 255, 255, 0.8);}


#conditions{margin-bottom: 20px; 
           font-size: 14.3px;
          padding: 2px 5px;
          word-spacing: 1.6px;}

#conditions b{color: crimson;}

#accept-conditons-wrapper #accept_btn{
    border: 1px solid rgba(255, 255, 255, 0.3);
   margin-right: 25px;
    background: #068;
     color: white;
      font-size: 14px;
   padding: 5px 15px;
   border: none;
   outline: none;
   border-radius: 3px;
  cursor: pointer;}

#accept-conditons-wrapper #decline_btn{
   border: 1px solid rgba(255, 255, 255, 0.3);
 color: rgba(0, 0, 0, 0.8);
padding: 4px 15px;
outline: none;
border-radius: 3px;
 cursor: pointer;
 font-size: 14px;
background: rgba(0, 0, 0, 0.1);
color:rgba(255, 255, 255, 0.5);}


#attack-btn-wrapper{text-align: center;}

#attack-now-btn{ 
   padding:5px 30px; margin-top: 5px; outline: none; border:1px solid rgba(0, 0, 0, 0.3) ; 
   color:white ;
    background:#056; 
   cursor: pointer;
 margin:20px auto; 
 word-spacing: 1.7px;
display: none;}



#link-wrapper{background: rgba(0, 0, 0, 0.1);
             color: rgba(255, 255, 255, 0.8);
              padding:20px 4px;
              text-align: left;
             word-spacing: 1.6px;
             font-size: 14.3px;}
#link-wrapper a{color:skyblue;
                text-decoration: none;}

#link-wrapper #link-btn-wrapper{
   margin-top: 7px; text-align: center;}

#link-wrapper #link-btn-wrapper button{padding: 5px 15px;
                                    color: white;
                                    background: #068;
                                   border: rgba(0, 0, 0, 0.2);
                                    outline: none;
                                    border-radius: 5px;
                                    cursor: pointer;
                                 }

.hacked-dialog-wrapper{display: none; 
                        z-index: 999;
                       position: fixed;
                        top: 0;
                        left: 0;
                        background: rgb(0, 0, 0);
                        background: rgba(0, 0, 0, 0.4);
                        width: 100%;
                        height: 100%;
                        text-align: left;}

.message-dialog-content{
                        padding: 10px 25px;
                      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.8);
                     margin: 5% auto;
                   width: 95%;}

/*modifyng the modal size on big devices*/

@media screen and (min-width: 700px){
.message-dialog-content{
                     margin: 5% auto;
                   width: 50%;}
               }

.message-dialog-content .message-title{ font-weight: bold; font-size: 15px; word-spacing: 1.7px;}

.message-dialog-content .message-content{ margin-top: 10px;
                                 word-spacing: 1.6px; 
                                line-height: 20px;}

.message-dialog-btn-wrapper{ margin-top: 20px; padding-bottom:15px ;}

#pass-modal-info{ font-weight: bold;color:rgba(0, 0, 0, 0.9);}

#pass-modal-info-notification{ font-weight: bold;color:rgba(0, 0, 0, 0.9);}

#pass-input-wrapper{margin-top: 5px;}


.delete_ok_btn{
   margin-right: 25px;
    background: #068;
     color: white;
      font-size: 14px;
   padding: 7px 15px;
   border: none;
   outline: none;
   border-radius: 3px;
  cursor: pointer;}

.cancel-delete-btn{
border: 1px solid rgba(0, 0, 0, 0.2);
 color: rgba(0, 0, 0, 0.8);
padding: 5px 15px;
outline: none;
border-radius: 3px;
 cursor: pointer;
 font-size: 14px;}




/*changing the content container's size on big screens
@media screen and (min-width: 800px){

.hacked-wrapper{margin:auto 3%;}
}


@media screen and (min-width: 550px){

 .hacked-wrapper{margin:auto 10%;}
}*/