/****** Modal Openings from right side *****/
.modal.right .modal-dialog {
  position: fixed;
  margin: auto;
  width: 620px;
  height: 100%;
  -webkit-transform: translate3d(0%, 0, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}
.modal.right .modal-content {
  height: 100%;
  overflow-y: auto;
}
.modal.right .modal-body {
  padding: 15px 15px 80px;
}

.modal.right.fade .modal-dialog {
  right: -320px;
  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
  -o-transition: opacity 0.3s linear, right 0.3s ease-out;
  transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
  right: 0;
}
/**** Done ***/

/****  floating-Lable style start ****/
.floating-label {
    position:relative;
    margin-top:5px;
}
.floating-input , .floating-select{
    font-size:14px;
    padding:4px 4px;
    display:block;
    width: 100%;
    height:30px;
    background-color: transparent;
    border:none;
    border-bottom:1px solid #353433;
}

.floating-input:focus, .floating-select:focus {
    outline:none;
    border-bottom:2px solid #3564a7;
}

label.floatlabel {
    color: #353433;
    font-size:14px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    left:5px;
    top:5px;
    transition:0.2s ease all;
    -moz-transition:0.2s ease all;
    -webkit-transition:0.2s ease all;
}

.floating-input:focus ~ label, .floating-input:not(:placeholder-shown) ~ label
, .floating-select:not([value=""]):valid ~ label{
    top:-18px;
    font-size:14px;
    color:#3564a7;
}

/* active state */
.floating-input:focus ~ .bar:before, .floating-input:focus ~ .bar:after
, .floating-select:focus ~ .bar:before, .floating-select:focus ~ .bar:after {
    width:50%;
}

/* active state */
.floating-input:focus ~ .highlight, .floating-select:focus ~ .highlight  {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
}

/*floating textbox*/
.floating-textbox {
    font-size:14px;
    padding:4px 4px;
    display:block;
    width: 90%;
    height:40px;
    color: black;
    /*background: linear-gradient(#FFFFFF, #757575);*/
    border-radius: 8px;
    resize: vertical;
}

.floating-textbox ::placeholder {
    color: #000000;
}

/*.disabled{display: none;}*/
.box{
    color: #fff;
    padding: 20px;
    display: none;
    margin-top: 20px;
}
.red{ background: #ff0000; }
.green{ background: #228B22; }
.blue{ background: #0000ff; }

.clearfix{
  border: 5px solid #DDDDDD;
  padding: 40px;
  margin: 0.7em 28px;
  width: 60%;
}