.modal-dialog.gimel {
  width: 90%;
}
.modal-content.gimel {
  height: 100%;
  min-height: 100%;
  height: auto;
  border-radius: 0;
}

/*area of card*/
.card {
  background:rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  display: inline-block;
  height: 170px;
  margin: 1rem;
  position: relative;
  width: 270px;
}

.card-brightness {
  height: 270px;
}

.card-white-color {
  height: 357px;
}

.card-color {
  height: 500px;
}

.card-ac {
  height: 320px;
}

.card-1 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.card-1:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card-2 {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.card-3 {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.card-4 {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card-5 {
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.loading-animate {
 
  position: absolute;
  top: 65px;
  left: 44px;
  transition: 0.5s;
}


.switch-area{
  position: relative;
  top: 65px;
  right: 50px;
}

.sending-animation-area{
  position: absolute;
  bottom: 12px;
  left: 120px;
}

.ac-mode-area {
  position: absolute;
  top: 132px;
  left: 150px;
}

.fan_strength-area {
  position: absolute;
  top: 132px;
  left: 40px;
}

.ac-temp-area {
  height: 36px;
  width: 250px;
  position: absolute;
  top: 200px;
  left: 10px;
}

.brightness-area {
  height: 36px;
  width: 250px;
  position: absolute;
  top: 155px;
  left: 10px;
}

.white-color-area {
  height: 36px;
  width: 250px;
  position: absolute;
  top: 240px;
  left: 10px;
}

.color-area {
  height: 120px;
  position: absolute;
  bottom: 50px;
  right: 20px;
}

.color-red-area {
  right: 20px;
}

.color-green-area {
  right: 60px;
}

.color-blue-area {
  right: 90px;
}

.device-name {
  position: absolute;
  top: 0px;
  right: 24px;
}

.history_value {
  position: absolute;
  bottom: 5px;
  left: 98px;
}

  .submit_value {
    position: absolute;
    bottom: 5px;
    left: 5px;
  }

  .learn_ir {
    position: absolute;
    bottom: 5px;
    left: 167px;
  }

  .learn_ir_tuggel {
    position: absolute;
    top: 5px;
    left: 5px;
  }
 
  input[type=number] {
    background-color: antiquewhite;
    color: black;
  }

  /* LOADING ANUMATION */
  #spinningSquaresG{
    position:relative;
    width:126px;
    height:15px;
    margin:auto;
  }
  
  .spinningSquaresG{
    position:absolute;
    top:0;
    background-color:rgb(0,0,0);
    width:15px;
    height:15px;
    animation-name:bounce_spinningSquaresG;
      -o-animation-name:bounce_spinningSquaresG;
      -ms-animation-name:bounce_spinningSquaresG;
      -webkit-animation-name:bounce_spinningSquaresG;
      -moz-animation-name:bounce_spinningSquaresG;
    animation-duration:1.5s;
      -o-animation-duration:1.5s;
      -ms-animation-duration:1.5s;
      -webkit-animation-duration:1.5s;
      -moz-animation-duration:1.5s;
    animation-iteration-count:infinite;
      -o-animation-iteration-count:infinite;
      -ms-animation-iteration-count:infinite;
      -webkit-animation-iteration-count:infinite;
      -moz-animation-iteration-count:infinite;
    animation-direction:normal;
      -o-animation-direction:normal;
      -ms-animation-direction:normal;
      -webkit-animation-direction:normal;
      -moz-animation-direction:normal;
    transform:scale(.3);
      -o-transform:scale(.3);
      -ms-transform:scale(.3);
      -webkit-transform:scale(.3);
      -moz-transform:scale(.3);
  }
  
  #spinningSquaresG_1{
    left:0;
    animation-delay:0.6s;
      -o-animation-delay:0.6s;
      -ms-animation-delay:0.6s;
      -webkit-animation-delay:0.6s;
      -moz-animation-delay:0.6s;
  }
  
  #spinningSquaresG_2{
    left:16px;
    animation-delay:0.75s;
      -o-animation-delay:0.75s;
      -ms-animation-delay:0.75s;
      -webkit-animation-delay:0.75s;
      -moz-animation-delay:0.75s;
  }
  
  #spinningSquaresG_3{
    left:31px;
    animation-delay:0.9s;
      -o-animation-delay:0.9s;
      -ms-animation-delay:0.9s;
      -webkit-animation-delay:0.9s;
      -moz-animation-delay:0.9s;
  }
  
  #spinningSquaresG_4{
    left:47px;
    animation-delay:1.05s;
      -o-animation-delay:1.05s;
      -ms-animation-delay:1.05s;
      -webkit-animation-delay:1.05s;
      -moz-animation-delay:1.05s;
  }
  
  #spinningSquaresG_5{
    left:63px;
    animation-delay:1.2s;
      -o-animation-delay:1.2s;
      -ms-animation-delay:1.2s;
      -webkit-animation-delay:1.2s;
      -moz-animation-delay:1.2s;
  }
  
  #spinningSquaresG_6{
    left:79px;
    animation-delay:1.35s;
      -o-animation-delay:1.35s;
      -ms-animation-delay:1.35s;
      -webkit-animation-delay:1.35s;
      -moz-animation-delay:1.35s;
  }
  
  #spinningSquaresG_7{
    left:94px;
    animation-delay:1.5s;
      -o-animation-delay:1.5s;
      -ms-animation-delay:1.5s;
      -webkit-animation-delay:1.5s;
      -moz-animation-delay:1.5s;
  }
  
  #spinningSquaresG_8{
    left:110px;
    animation-delay:1.64s;
      -o-animation-delay:1.64s;
      -ms-animation-delay:1.64s;
      -webkit-animation-delay:1.64s;
      -moz-animation-delay:1.64s;
  }
  
  
  
  @keyframes bounce_spinningSquaresG{
    0%{
      transform:scale(1);
      background-color:rgb(0,0,0);
    }
  
    100%{
      transform:scale(.3) rotate(90deg);
      background-color:rgb(255,255,255);
    }
  }
  
  @-o-keyframes bounce_spinningSquaresG{
    0%{
      -o-transform:scale(1);
      background-color:rgb(0,0,0);
    }
  
    100%{
      -o-transform:scale(.3) rotate(90deg);
      background-color:rgb(255,255,255);
    }
  }
  
  @-ms-keyframes bounce_spinningSquaresG{
    0%{
      -ms-transform:scale(1);
      background-color:rgb(0,0,0);
    }
  
    100%{
      -ms-transform:scale(.3) rotate(90deg);
      background-color:rgb(255,255,255);
    }
  }
  
  @-webkit-keyframes bounce_spinningSquaresG{
    0%{
      -webkit-transform:scale(1);
      background-color:rgb(0,0,0);
    }
  
    100%{
      -webkit-transform:scale(.3) rotate(90deg);
      background-color:rgb(255,255,255);
    }
  }
  
  @-moz-keyframes bounce_spinningSquaresG{
    0%{
      -moz-transform:scale(1);
      background-color:rgb(0,0,0);
    }
  
    100%{
      -moz-transform:scale(.3) rotate(90deg);
      background-color:rgb(255,255,255);
    }
  }

  /* loading all davices animation */
  .cssload-bell {
    width: 175px;
    height: 179px;
    border-radius: 100%;
    position: absolute;
    left: calc(50% - 88px);
  }
  
  .cssload-circle {
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .cssload-circle .cssload-inner {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 9px solid rgba(55,82,102,0.7);
    border-right: none;
    border-top: none;
    background-clip: padding;
    box-shadow: inset 0px 0px 18px rgba(107,122,158,0.15);
  }
  
  .cssload-circle:nth-of-type(0) {
    transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
  }
  .cssload-circle:nth-of-type(0) .cssload-inner {
    animation: cssload-spin 1.8s infinite linear;
      -o-animation: cssload-spin 1.8s infinite linear;
      -ms-animation: cssload-spin 1.8s infinite linear;
      -webkit-animation: cssload-spin 1.8s infinite linear;
      -moz-animation: cssload-spin 1.8s infinite linear;
  }
  
  .cssload-circle:nth-of-type(1) {
    transform: rotate(70deg);
      -o-transform: rotate(70deg);
      -ms-transform: rotate(70deg);
      -webkit-transform: rotate(70deg);
      -moz-transform: rotate(70deg);
  }
  .cssload-circle:nth-of-type(1) .cssload-inner {
    animation: cssload-spin 1.8s infinite linear;
      -o-animation: cssload-spin 1.8s infinite linear;
      -ms-animation: cssload-spin 1.8s infinite linear;
      -webkit-animation: cssload-spin 1.8s infinite linear;
      -moz-animation: cssload-spin 1.8s infinite linear;
  }
  
  .cssload-circle:nth-of-type(2) {
    transform: rotate(140deg);
      -o-transform: rotate(140deg);
      -ms-transform: rotate(140deg);
      -webkit-transform: rotate(140deg);
      -moz-transform: rotate(140deg);
  }
  .cssload-circle:nth-of-type(2) .cssload-inner {
    animation: cssload-spin 1.8s infinite linear;
      -o-animation: cssload-spin 1.8s infinite linear;
      -ms-animation: cssload-spin 1.8s infinite linear;
      -webkit-animation: cssload-spin 1.8s infinite linear;
      -moz-animation: cssload-spin 1.8s infinite linear;
  }
  
  .cssload-bell {
    animation: cssload-spin 4.5s infinite linear;
      -o-animation: cssload-spin 4.5s infinite linear;
      -ms-animation: cssload-spin 4.5s infinite linear;
      -webkit-animation: cssload-spin 4.5s infinite linear;
      -moz-animation: cssload-spin 4.5s infinite linear;
  }
  
  
  
  @keyframes cssload-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  @-o-keyframes cssload-spin {
    from {
      -o-transform: rotate(0deg);
    }
    to {
      -o-transform: rotate(360deg);
    }
  }
  
  @-ms-keyframes cssload-spin {
    from {
      -ms-transform: rotate(0deg);
    }
    to {
      -ms-transform: rotate(360deg);
    }
  }
  
  @-webkit-keyframes cssload-spin {
    from {
      -webkit-transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
    }
  }
  
  @-moz-keyframes cssload-spin {
    from {
      -moz-transform: rotate(0deg);
    }
    to {
      -moz-transform: rotate(360deg);
    }
  }