/*برای: تکس باکس(اینپوت) تا نوشته بیاد بالای تکس باکس*/

/*input:focus ~ .floating-label, input:not(:focus):valid ~ .floating-label,
        textarea:focus ~ .floating-label, textarea:not(:focus):valid ~ .floating-label,*/
select:focus ~ .floating-label, select:not(:focus):valid ~ .floating-label, select:disabled ~ .floating-label,
input:focus ~ .floating-label, input:not(:placeholder-shown) ~ .floating-label,
textarea:focus ~ .floating-label, textarea:not(:placeholder-shown) ~ .floating-label {
    top: -8px;
    right: 20px;
    font-size: 11px;
    opacity: 1;
    background-color: white;
    padding-left: 10px;
    padding-right: 10px;
    color: #1a73e8;
}

.form-control:focus {
    border: 2px solid #1a73e8;
}

.floating-label {
    position: absolute;
    pointer-events: none;
    right: 25px;
    top: 7px;
    transition: 0.2s ease all;
    z-index: 10;
}

.floating-label {
    color: #696969; 
   
}

input:not(:focus):placeholder-shown ~ .floating-label,
select:not(:focus):placeholder-shown ~ .floating-label,
select:disabled ~ .floating-label,
textarea:not(:focus):placeholder-shown ~ .floating-label,
input:not(:focus):valid ~ .floating-label,
select:not(:focus):valid ~ .floating-label,
textarea:not(:focus):valid ~ .floating-label {
    color: #696969;
}

select:disabled ~ .floating-label {
    color: #696969;
}

/*****************  start Loadind  ******************************/
.loadingPosition {
     margin: 0;
     position: absolute;
     top: 50%;
     left: calc(50% - 138px);
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
 }

.w270 {
    width: 270px;
}

.h200 {
    height: 200px;
}

.fs1 {
    font-size: 1.3rem;
}

#divShowMyProgress {
    display: none;
}

#divShowMyProgress.ngProgress-container {
    display: block;
}
/*****************  end Loadind  ******************************/

/**************************** Cutom Checkbox *******************************/
.checkbox label:after,
.radio label:after {
    content: '';
    display: table;
    clear: both;
}

.checkbox .cr,
.radio .cr {
    position: relative;
    display: inline-block;
    border: 1px solid #a9a9a9;
    border-radius: .25em;
    width: 1.3em;
    height: 1.3em;
    float: right;
    margin-left: .5em;
}

.radio .cr {
    border-radius: 50%;
}

.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
    position: absolute;
    font-size: .8em;
    line-height: 0;
    top: 50%;
    left: 20%;
}

.radio .cr .cr-icon {
    margin-left: 0.04em;
}

.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
    display: none;
}

.checkbox label input[type="checkbox"] + .cr > .cr-icon,
.radio label input[type="radio"] + .cr > .cr-icon {
    transform: scale(3) rotateZ(-20deg);
    opacity: 0;
    transition: all .3s ease-in;
}

.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon,
.radio label input[type="radio"]:checked + .cr > .cr-icon {
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
}

.checkbox label input[type="checkbox"]:disabled + .cr,
.radio label input[type="radio"]:disabled + .cr {
    opacity: .5;
}

.border-3 {
    border-width: 3px !important;
}

.room-table {
    position: absolute;
    top: 45px;
    left: 0;
    padding: 5px 15px 5px 15px;
    background: white;
    background-color: white;
    z-index: 12;
    cursor: pointer;
    font-size: 0.78rem;
    border-color: #8e0101;
}


/****************************/

@media screen and (min-width:1024px) {
    .container {
        max-width: 960px
    }

    .container.is-fluid {
        margin-left: 32px;
        margin-right: 32px;
        max-width: none
    }
}

@media screen and (max-width:1215px) {
    .container.is-widescreen {
        max-width: 1152px
    }
}

@media screen and (max-width:1407px) {
    .container.is-fullhd {
        max-width: 1344px
    }
}

@media screen and (min-width:1216px) {
    .container {
        max-width: 1152px
    }
}

@media screen and (min-width:1408px) {
    .container {
        max-width: 1344px
    }
}