/* CSS Document */



#customer-chat-updates-settings {

  padding: 50px 60px;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

}



#customer-chat-updates-settings * {

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

}



#customer-chat-updates-settings .left_part {

  float: left;

  width: 48%

}



#customer-chat-updates-settings .right_part {

  width: 45%;

  float: right;

  margin-top: 32px

}



.clear {

  clear: both

}



#customer-chat-updates-settings .heading {

  border-bottom: 1px solid rgb(201,190,192);

  padding-bottom: 5px

}



#customer-chat-updates-settings .heading .text {

  float: left;

  color: #ed6e47;

  font-weight: bold;

  display: inline-block

}



#customer-chat-updates-settings .heading .switcher {

  float: right;

  margin-top: -2px

}



#customer-chat-updates-settings p {

  font-style: italic;

  line-height: 1.7em;

  margin: 30px 0px 35px 0px;

  display: inline-block

}



#customer-chat-updates-settings .form_left {

  width: 50%;

  float: left

}



#customer-chat-updates-settings .form_right {

  width: 45%;

  float: right

}



#customer-chat-updates-settings .form_left label {

  width: 100px;

  line-height: 36px;

  float: left

}



#customer-chat-updates-settings .form_right label {

  width: 110px;

  line-height: 36px;

  float: left

}





#customer-chat-updates-settings form input[type=text],

#customer-chat-updates-settings form select {

  margin-bottom: 30px

}



#customer-chat-updates-settings .form_left input[type=text] {

  width: calc(100% - 100px);

}



/*

#customer-chat-updates-settings .form_left input:nth-of-type(1) {

  width: calc(100% - 100px);

}



#customer-chat-updates-settings .form_left input:nth-of-type(2) {

  width: calc(80% - 100px);

}

*/

#customer-chat-updates-settings .form_right input {

  width: calc(100% - 120px);

}



#customer-chat-updates-settings input[name=port] {

  width: 60px

}



#customer-chat-updates-settings .connection_status {

  line-height: 30px;

}



#customer-chat-updates-settings .connection_status .icon {

  width: 30px;

  height: 30px;

  border-radius: 15px;

  color: #fff;

  font-weight: bold;

  margin-right: 20px;

  float: left

}



#customer-chat-updates-settings .connection_status .text {

  width: calc(100% - 50px);

  float: left;

  font-weight: 400;

  line-height: 1.5em;

  padding-top: 5px

}



#customer-chat-updates-settings .connection_status .success {

  color: rgb(88,185,91);

  margin-bottom: 15px

}



#customer-chat-updates-settings .connection_status .success .icon {

  background: url(../img/redesign/icon-success.png) center center no-repeat

}



#customer-chat-updates-settings .connection_status .failed {

  color: rgb(241,92,92);

}



#customer-chat-updates-settings .connection_status .failed .icon {

  background: url(../img/redesign/icon-warning.png) center center no-repeat

}



#customer-chat-updates-settings .versions {

  border: 1px solid rgb(201,190,192);

  width: 100%;

  padding: 35px 30px 40px 30px;

  margin-bottom: 45px

}



#customer-chat-updates-settings .version_available {

  width: 45%;

  float: left;

  text-align: right;

}



#customer-chat-updates-settings .version_this {

  width: 45%;

  float: right;

  text-align: left;

}





#customer-chat-updates-settings .versions .holder {

  width: 120px;

  text-align: center;

  display: inline-block;



}



#customer-chat-updates-settings .versions .name {

  width: 100%;

  display: inline-block;

}



#customer-chat-updates-settings .versions .value {

  font-size: 2.8em;

  color: rgb(84,62,64);

  font-weight: 500;

  display: inline-block;

  margin-top: 15px;

  line-height: 1.3em;

  width: 100%;

}



#customer-chat-updates-settings .versions p {

  width: 100%;

  margin-top: 40px;

  text-align: center;

  margin-bottom: 0

}



#customer-chat-updates-settings .links {

  text-align: center;;

  width: 100%

}



#customer-chat-updates-settings .links a {

  color: rgb(237,110,71);

  display: inline-block

}



#customer-chat-updates-settings .links span {

  width: 70px;

  display: inline-block;

  color: rgb(182,176,176);

}



#customer-chat-updates-settings .links a:hover {

  text-decoration: none

}



#customer-chat-updates-settings .controls {

  margin-top: 180px

}

  /* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #48aff0;
}

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

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



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



  #customer-chat-updates-settings .form_left,

  #customer-chat-updates-settings .form_right {

    width: 100%;

    float: none

  }



  #customer-chat-updates-settings .form_left label,

  #customer-chat-updates-settings .form_right label {

    width: 100px

  }



  #customer-chat-updates-settings .form_left input[type=text],

  #customer-chat-updates-settings .form_left select,

  #customer-chat-updates-settings .form_right input[type=text],

  #customer-chat-updates-settings .form_right select {

    width: calc(100% - 100px)

  }



  #customer-chat-updates-settings input[name=port] {

    width: 60px !important

  }



  #customer-chat-updates-settings .links span {

    font-size: 0.00001em;

    color: #fff;

    width: 100%;

    display: inline-block;

    clear: both

  }



  #customer-chat-updates-settings .links a {

    float: none

  }



}



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



  #customer-chat-updates-settings .left_part,

  #customer-chat-updates-settings .right_part {

    width: 100%;

    float: none

  }



  #customer-chat-updates-settings .form_left {

    width: 50%;

    float: left

  }



  #customer-chat-updates-settings .form_right {

    width: 45%;

    float: right

  }



  #customer-chat-updates-settings {

    padding: 40px 40px

  }





}



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



  #customer-chat-updates-settings .form_left,

  #customer-chat-updates-settings .form_right {

    width: 100%;

    float: none

  }



  #customer-chat-updates-settings {

    padding: 25px 25px

  }



  #customer-chat-updates-settings .versions {

    padding-left: 20px;

    padding-right: 20px;

  }



}