*{
    box-sizing: border-box;
    border:0px;
    margin: 0px;
    font-family: ibmr;
}
body{
    background-color: #e6e8ff;

}
@font-face {
    font-family: sans;
    src: url(/../fonts/OpenSans-Regular.ttf);
}
@font-face {
    font-family: open-sans-light;
    src: url(/../fonts/OpenSans-Light.ttf);
}
@font-face {
    font-family: montserrat-extra-light;
    src: url(/../fonts/Montserrat-ExtraLight.ttf);
}
@font-face {
    font-family: latothin;
    src: url(/../fonts/Lato-LightItalic.ttf);
}

@font-face {
    font-family: ibmr;
    src: url(/../fonts/IBMPlexSans-Regular.ttf);
}
@font-face {
    font-family: ibml;
    src: url(/../fonts/IBMPlexSans-Light.ttf);
}






body{
}
/*************************************************************[St UI irepair/index]*********************************************************/

.container{
    position: relative;
    background-color: #e6e8ff;
}
.top-header{
    background-color:rgba(36,44,50,1);
    width:100%;
    color:#fff;
    display: block;
    font-weight: 600;
    font-family: ibmr;
    position: relative;

}
.top-header img{
    width:25%;
    margin-left: 37.5%;
}
.main-menu{
    background-color:rgba(36,44,50,1);
    width:100%;
    color:#fff;
    display: flex;
    position: relative;
    justify-content: center;
    border-top:2px solid #008FB6;
    font-weight: 600;
    font-family: ibmr;
    margin-top: 0%;
    height: 55px;
}

.main-menu ul{
    list-style-type: none;
    text-transform:uppercase ;
    display: flex;
    margin-top: 15px;
    margin-bottom: 15px;

}
.fa-chevron-right,.fa-chevron-down{
    position:relative;
    left:5px;
    font-size: 0.8em !important;;
    top:3px!important;
}
.sub-menu-box{
    background-color: #080808d4;
    position:relative;
    z-index: 4;
    top:15px;
    width: 150px;
    height: 150px;
    left: -5px;
    font-weight: bolder;
    border-radius:5px;
    display: none;
}

.sub-menu-box a{
    text-decoration: none;
    color:#fff;
    text-transform: uppercase;
    line-height: 35px;
    position: relative;
    display: block;

}
.main-menu a:hover,.sub-menu-box a:hover{
    color:#008FB6;
    transition: 0.1s ease;
}
.main-menu a{
    text-decoration: none;
    color:#fff;
    display: block;
    margin-left: 20px;
}
.main-menu ul li:nth-of-type(1):hover{
    color:#008FB6;
    transition: 0.1s ease;
    cursor: pointer;
}
.slotholder{
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 0;
    width: 100%;
    height: 550px;
    backface-visibility: hidden;
    transform: translate3d(0px, -1.25px, 0px);
    visibility: inherit;
    opacity: 1;

}
.chat-now{
    background-repeat: no-repeat;
    background-image: url(/../img/wep-content/chat-pure.png);
    background-size: cover;
    background-position: center center;
    width: 100px;
    height: 100px;
    opacity: 1;
    visibility: inherit;
    position: fixed;
    top:80%;
    right:1%;
    z-index: 10;
    cursor: pointer;
}
.main-show{
    background-repeat: no-repeat;
    background-image: url(/../img/wep-content/main-show.jpg);
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: inherit;
}

.main-show img{
    float: right;
}
.main-show img:nth-of-type(2){
    margin-top: 150px;
    position: absolute;
    margin-left: 60%;
    display: none;
}
.main-show img:nth-of-type(1){
    display: none;
    position: absolute;
    margin-left: 60%;
}
.about-caption{
    display: flex;
    justify-content: center;
    position: relative;
    margin-left:0px;
    right:800px;
}
.main-show h1{
    text-transform: capitalize;
    color: #FFF;
    font-size: 4em;
    font-family: montserrat-extra-light;
    font-weight: 100;
    margin-top: 194px;
    margin-right: 510px;
}

.our-service-caption{
    display: flex;
    justify-content: center;
    position: relative;
    margin-left:0px;
}

.main-show h5{
    text-transform: uppercase;
    color: #000;
    font-size: .9em;
    font-weight: bolder;
    display: block;
    margin-right: 700px;
    margin-top: 50px;
}
.book-now-btn{
    display: flex;
    justify-content: center;
    position: relative;
    margin-left:0px;
}
.book-now-btn button{
    padding: 15px 90px;
    color: #000;
    /*background-color: #f1c40f;*/
    background-color: #009432;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.1em;
    margin-right: 800px;
    margin-top: 40px;
    font-family: montserrat-extra-light;


}
.book-now-btn button:hover{
    cursor: pointer;
    color: #fff;
    background-color: #95a5a6;
    transition: 0.3s ease;
    box-shadow: 1px 1px 2px #95a5a6 ;
}
.services-caption,.support-services-caption,.why-choose-us-caption{
    background-color: #FAFAFA;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100px;

}
.support-services-caption,.why-choose-us-caption{
    background-color: #10151d;
}
.services-caption h5,.support-services-caption h5,.why-choose-us-caption h5{
    /*color: #265579;*/

    color: #769efb;
    font-size: 1.1em;
    font-weight: bolder;
    display: block;
    margin-right: 900px;
    margin-top: 50px;
    text-transform: uppercase;
}
.what-we-repair-images,.what-we-repair-images-two{
    width: 100%;
    background-color: #FAFAFA;
    height: 150px;
    display: flex;
    justify-content: center;
}
.what-we-repair-images div,.what-we-repair-images-two div{
    background-color: #FAFAFA;
    background-repeat: no-repeat;
    background-image: url(/../img/wep-content/iphone-group.png);
    background-position: center center;
    width: 30%;
    height: 100%;
    opacity: 1;
    visibility: inherit;
    margin-left:6% ;
    background-size: cover;
}
.what-we-repair-images div:nth-of-type(2){
    background-image: url(/../img/wep-content/ipad-group.png);

}
.what-we-repair-images-two div:nth-of-type(1){
    background-image: url(/../img/wep-content/samsung-group.png);

}

.what-we-repair-images-two div:nth-of-type(2){
    background-image: url(/../img/wep-content/other.png);

}
.first-plain-caption,.second-plain-caption{
    width: 100%;
    background-color: #FAFAFA;
    height: 150px;
    display: flex;
    justify-content: center;
}
.first-plain-caption div,.second-plain-caption div{
    background-color: #FAFAFA;
    width: 30%;
    height: 100%;
    opacity: 1;
    margin-left:6% ;
}
.first-plain-caption div h3,.second-plain-caption div h3{
    color:#386384;
    text-transform: uppercase;
}
.first-plain-caption div p,.second-plain-caption div p{
    font-weight:100;
    /*color:#2a485d;*/
    color:#3c3b2e;
}

.issues,.issues-r2,.issues-r3,.issues-r4,.issues-r5,.issues-r6,.issues-r7,.issues-r8,.issues-r9,.issues-r10,.issues-r10,.issues-r11,.issues-r11{
    width: 100%;
    background-color: #10151D;
    height: 80px;
    display: flex;
    justify-content: center;
}
.issues div:nth-of-type(1),.issues div:nth-of-type(3),.issues-r2 div:nth-of-type(1),.issues-r2 div:nth-of-type(3),.issues-r3 div:nth-of-type(1),.issues-r3 div:nth-of-type(3),.issues-r4 div:nth-of-type(1),.issues-r4 div:nth-of-type(3),.issues-r5 div:nth-of-type(1),.issues-r5 div:nth-of-type(3),.issues-r6 div:nth-of-type(1),.issues-r6 div:nth-of-type(3),.issues-r7 div:nth-of-type(1),.issues-r7 div:nth-of-type(3),.issues-r8 div:nth-of-type(1),.issues-r8 div:nth-of-type(3),.issues-r9 div:nth-of-type(1),.issues-r9 div:nth-of-type(3),.issues-r10 div:nth-of-type(1),.issues-r10 div:nth-of-type(3),.issues-r11 div:nth-of-type(1),.issues-r11 div:nth-of-type(3){
    background-color: #10151D;
    background-repeat: no-repeat;
    background-image: url(/../img/wep-content/services/charging-port.png);
    background-position: center center;
    width: 10%;
    height: 100%;
    opacity: 1;
    visibility: inherit;
    background-size: contain;
    margin-right: -41px;

}

.issues div:nth-of-type(3){
    background-image: url(/../img/wep-content/services/battery.png)!important;

}
.issues-r2 div:nth-of-type(1){
    background-image: url(/../img/wep-content/services/broken-glass.png)!important;

}
.issues-r2 div:nth-of-type(3){
    background-image: url(/../img/wep-content/services/headphone.png)!important;

}
.issues-r3 div:nth-of-type(1){
    background-image: url(/../img/wep-content/services/board.png)!important;

}
.issues-r3 div:nth-of-type(3){
    background-image: url(/../img/wep-content/services/back-camera.png)!important;

}
.issues-r4 div:nth-of-type(1){
    background-image: url(/../img/wep-content/services/front-camera.png)!important;

}
.issues-r4 div:nth-of-type(3){
    background-image: url(/../img/wep-content/services/microphone.png)!important;

}
.issues-r5 div:nth-of-type(1){
    background-image: url(/../img/wep-content/services/digno.png)!important;

}
.issues-r5 div:nth-of-type(3){
    background-image: url(/../img/wep-content/services/water-damge.png)!important;

}
.issues-r6 div:nth-of-type(1){
    background-image: url(/../img/wep-content/services/speaker.png)!important;

}
.issues-r6 div:nth-of-type(3){
    background-image: url(/../img/wep-content/services/Ear-speaker.png)!important;

}
.issues-r7 div:nth-of-type(1){
    background-image: url(/../img/wep-content/services/vibrator.png)!important;

}
.issues-r7 div:nth-of-type(3){
    background-image: url(/../img/wep-content/services/volume-up-down.png)!important;

}
.issues-r8 div:nth-of-type(1){
    background-image: url(/../img/wep-content/services/power-button.png)!important;

}
.issues-r8 div:nth-of-type(3){
    background-image: url(/../img/wep-content/services/sensor.png)!important;

}
.issues-r9 div:nth-of-type(1){
    background-image: url(/../img/wep-content/services/wifi-antena.png)!important;

}
.issues-r9 div:nth-of-type(3){
    background-image: url(/../img/wep-content/services/camera-flash.png)!important;

}
.issues-r10 div:nth-of-type(1){
    background-image: url(/../img/wep-content/services/back-glass.png)!important;

}
.issues-r10 div:nth-of-type(3){
    background-image: url(/../img/wep-content/services/back-camera-glass.png)!important;

}
.issues-r11 div:nth-of-type(1){
    background-image: url(/../img/wep-content/services/touch-id-button.png)!important;

}
.issues-r11 div:nth-of-type(3){
    background-image: url(/../img/wep-content/services/mute-switch.png)!important;

}


.issues div:nth-of-type(2) h4,.issues div:nth-of-type(4) h4,.issues-r2 div:nth-of-type(2) h4,.issues-r2 div:nth-of-type(4) h4,.issues-r3 div:nth-of-type(2) h4,.issues-r3 div:nth-of-type(4) h4,.issues-r4 div:nth-of-type(2) h4,.issues-r4 div:nth-of-type(4) h4,.issues-r5 div:nth-of-type(2) h4,.issues-r5 div:nth-of-type(4) h4, .issues-r6 div:nth-of-type(2) h4,.issues-r6 div:nth-of-type(4) h4,.issues-r7 div:nth-of-type(2) h4,.issues-r7 div:nth-of-type(4) h4,.issues-r8 div:nth-of-type(2) h4,.issues-r8 div:nth-of-type(4) h4,.issues-r9 div:nth-of-type(2) h4,.issues-r9 div:nth-of-type(4) h4,.issues-r10 div:nth-of-type(2) h4,.issues-r10 div:nth-of-type(4) h4,.issues-r11 div:nth-of-type(2) h4,.issues-r11 div:nth-of-type(4) h4{
    color: #82caff;
    text-transform: capitalize;
    font-family: montserrat-extra-light;
    font-size: 0.8em;
}
.issues div:nth-of-type(2) ,.issues div:nth-of-type(4) ,.issues-r2 div:nth-of-type(2) ,.issues-r2 div:nth-of-type(4) ,.issues-r3 div:nth-of-type(2) ,.issues-r3 div:nth-of-type(4) ,.issues-r4 div:nth-of-type(2) ,.issues-r4 div:nth-of-type(4) ,.issues-r5 div:nth-of-type(2) ,.issues-r5 div:nth-of-type(4) , .issues-r6 div:nth-of-type(2) ,.issues-r6 div:nth-of-type(4) ,.issues-r7 div:nth-of-type(2) ,.issues-r7 div:nth-of-type(4) ,.issues-r8 div:nth-of-type(2) ,.issues-r8 div:nth-of-type(4) ,.issues-r9 div:nth-of-type(2) ,.issues-r9 div:nth-of-type(4),.issues-r10 div:nth-of-type(2) ,.issues-r10 div:nth-of-type(4) ,.issues-r11 div:nth-of-type(2) ,.issues-r11 div:nth-of-type(4) {
    height: 15%;
    margin-top: 27px;
}



.issues div:nth-of-type(1),.issues div:nth-of-type(2),.issues div:nth-of-type(3),.issues div:nth-of-type(4){
    position: relative;
    left:0px
}
.issues-r2 div:nth-of-type(1),.issues-r2 div:nth-of-type(2){

}
.issues-r2 div:nth-of-type(3),.issues-r2 div:nth-of-type(4){
    position: relative;
    left:63px
}

.issues-r3 div:nth-of-type(1),.issues-r3 div:nth-of-type(2){
    position: relative;
    right:40px
}

.issues-r3 div:nth-of-type(3),.issues-r3 div:nth-of-type(4){
    position: relative;
    left:75px
}

.issues-r4 div:nth-of-type(1),.issues-r4 div:nth-of-type(2){
    position: relative;
    left:35px
}
.issues-r4 div:nth-of-type(3),.issues-r4 div:nth-of-type(4){
    position: relative;
    left:92px
}

.issues-r5 div:nth-of-type(1),.issues-r5 div:nth-of-type(2){
    position: relative;
    right:85px
}

.issues-r5 div:nth-of-type(3),.issues-r5 div:nth-of-type(4)
{
    position: relative;
    left:33px
}

.issues-r6 div:nth-of-type(1),.issues-r6 div:nth-of-type(2){
    position: relative;
    right:15px
}

.issues-r6 div:nth-of-type(3),.issues-r6 div:nth-of-type(4)
{
    position: relative;
    left:40px
}


.issues-r7 div:nth-of-type(1),.issues-r7 div:nth-of-type(2){
    position: relative;
    right:23px
}

.issues-r7 div:nth-of-type(3),.issues-r7 div:nth-of-type(4)
{
    position: relative;
    left:75px
}



.issues-r8 div:nth-of-type(1),.issues-r8 div:nth-of-type(2){
    position: relative;
    right:35px
}

.issues-r8 div:nth-of-type(3),.issues-r8 div:nth-of-type(4)
{
    position: relative;
    left:20px
}


.issues-r9 div:nth-of-type(1),.issues-r9 div:nth-of-type(2){
    position: relative;
    left:5px
}

.issues-r9 div:nth-of-type(3),.issues-r9 div:nth-of-type(4)
{
    position: relative;
    left:70px
}

.issues-r10 div:nth-of-type(1),.issues-r10 div:nth-of-type(2){
    position: relative;
    right:5px
}

.issues-r10 div:nth-of-type(3),.issues-r10 div:nth-of-type(4)
{
    position: relative;
    left:77px
}

.issues-r11 div:nth-of-type(1),.issues-r11 div:nth-of-type(2){
    position: relative;
    left:5px
}

.issues-r11 div:nth-of-type(3),.issues-r11 div:nth-of-type(4)
{
    position: relative;
    left:66px
}

.internalphone-figure{
    height: 400px;
    background-color: #10151D;
    background-repeat: no-repeat;
    background-image: url(/../img/wep-content/services/6-plus.png);
    background-position: center center;
    position: absolute;
    opacity: 1;
    visibility: inherit;
    background-size: contain;
    top: 1600px;
    width: 400px;
    right: 72%;
}
.we-ready{
    width: 100%;
    display: flex;
    justify-content: center;
    height: 400px;
}
.we-ready div{
    width: 50%;
}
.we-ready div:nth-of-type(1) h1{
    font-size: 5em;
    font-family: montserrat-extra-light;
    font-weight: 100;
    color: #FFF;
    margin-top: 15px;
    margin-left: 40px;
}
.we-ready div:nth-of-type(1) {
    background-color: #1EA6FF;
}
.we-ready div:nth-of-type(2){
    background-repeat: no-repeat;
    background-image: url(/../img/wep-content/repair-man.jpeg);
    background-position: center center;
    opacity: 1;
    background-size: cover;}
.why-choose-us{
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #fff;
    flex-wrap: wrap;
}
.why-choose-us div{
    width: 250px;
    height: 145px;
    background-color: #1EA6FF;
    color:#000;
    margin: 20px;
    text-align: center;
    padding-top: 10px;
    box-shadow: 1px 2px 2px #1EA6FF;

}
.why-choose-us div h3{
    text-transform: capitalize;
}
.why-choose-us div p{
    font-family:sans;
    font-size: 0.9em;

}
.fa-shield-alt,.fa-wrench,.fa-money-bill,.fa-lock,.fa-box-open,.fa-clock{
    color: #2a17b9;
    font-size: 2em;
}
.how-works-caption{
    display: flex;
    justify-content: center;
    height: 100px;
    background-color: #000;
    width: 100%;
}
.how-works-caption div h2{
    color:#fff;
    font-size: 2em;
    text-transform: uppercase;
    line-height: 100px;
    font-family: sans;

}
.gif-view{
    width: 100%;
    background-color: #0071DB;
    height:400px;
}
.our-gallery-caption{
    display: flex;
    justify-content: center;
    height: 150px;
    background-color: #000;
    width: 100%;
}
.our-gallery-caption div h1{
    color:#fff;
    font-size: 3em;
    text-transform: uppercase;
    line-height: 150px;
    font-family: montserrat-extra-light;
}
.our-gallery{
    width: 100%;
    background-color: #DDDDFF;
    height:500px;
}

.clients-review-caption{
    background-color: #10151D;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100px;
}
.clients-review-caption div h2{
    color: #769efb;
    font-size: 1.1em;
    font-weight: bolder;
    display: block;
    margin-right: 900px;
    margin-top: 50px;
    text-transform: uppercase;
}

.clients-review{
    width: 100%;
    background-color: #2f2f2f;
    height:200px;
}
.looking-for-discount-caption{
    width: 100%;
    background-color:#1EA6FF;
    height:400px;
    display: flex;
    justify-content: center;
    background-repeat: no-repeat;
    background-image: url(/../img/wep-content/visitor.jpg);
    background-position: center center;
    opacity: 1;
    background-size: cover;
    opacity: 0.9;
}
.looking-for-discount-caption h1{
    color: #ff1717;
    margin-top: 10px;
    font-family: montserrat-extra-light;
    font-size: 2.5em;
    text-align: center;
    text-transform: uppercase;
    line-height: 100px;
}
.gps-location{
    width: 100%;
    height: 300px;

}
.about-us{
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #10151D;
    flex-wrap: wrap;
}
.about-us div{
    width: 150px;
    height: 150px;
    background-color: #000;
    color:#1EA6FF;
    text-align: center;
    margin: 50px;
    border-radius: 50%;
    padding-top: 50px;
}
.about-us div i {
    font-size: 1.5em;
}
.about-us div p{
    font-size: 1.5em;
    color:#7AC144
}
.about-us div h4{
    color:#FFF;
    margin-bottom: 6px;
}
.about-us div i{
    color:#7AC144;
}
.footer{
    width: 100%;
    height: 400px;
    background-color: #252C32;
    display: flex;
    justify-content: center;
    color:#fff;
    font-family: "ACS  Yaqout Extra Bold"!important;
}
.footer-img{
    background-repeat: no-repeat;
    background-image: url(/../img/wep-content/logo-orange.png);
    background-size: cover;
    background-position: center center;
    visibility: inherit;
    width: 390px;
    height: 150px;
    position: relative;
    top:155px;
    right:20px;
}

.first,.second,.third{
    margin-top: 150px;
    margin-right: 30px;
}
.first label,.second label{
    background-color: #000;padding: 5px;
}
.second label i{
    color:#008FB6;
    transform: rotate(90deg);
}
.first p,.second p{
    margin-top: 10px;
}
.first p,.second p,.third p{
    font-family: sans;
    font-size: 0.9em;
}
.third ul{
    list-style-type: none;

}
.third ul li a{
    text-decoration: none;
    color:#FFF;
    font-size: 0.8em;
    font-family: sans;
}
.third ul li a:hover{
    color:#008FB6;
    transition: 0.3s ease;
}


/*****************************************************************************************/
/*IMAGES*/
.error-page{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 400px;
    background-repeat: no-repeat;
    background-image: url(/../img/symbols/error-man.png);
    background-size:contain;
    background-position: center center;
}
.notfound-caption{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.notfound-caption h3{
    color:#008FB6;
    font-size: 2em;
    font-family:monospace;

}
/*************************************************************[End UI irepair/index]*********************************************************/



/*************************************************************[St UI /repairs/iphone]*********************************************************/


.iphone-repairs-flex{
    display: flex;
    width: 100%;
    position: relative;
    background-color: #FFFFFF;
    padding: 10px;
    justify-content:center;
    flex-wrap: wrap;
    top:0px;
}
.iphone-repairs-flex div:not(:nth-of-type(1)){
    margin-left: 10px;
    width: 200px;
    color: #000;
    height: 300px;
    overflow: hidden;
    background-color: unset;
    border-bottom:2px solid #000;


}
.iphone-repairs-flex div:not(:nth-of-type(1)):hover{
    border-bottom:2px solid #008FB6;

}
.iphone-repairs-flex div a{
    position: relative;
    display: flex;
    font-size: unset;
    top: 3%;
    padding: 0;
}
.iphone{
    width: 150px;
    height: 200px;
    top:40px;
    left:25px;
    position: relative;
}
.iphone:hover{
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}
#iphone{
    font-size: 1em;
    color: #000;
    font-weight: 700;
    position: absolute;
    text-transform: uppercase;
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}
.mag-glass{
    position: absolute;
    width: 13vw;
    height: 23vh;
    left: 21%;
    top: 91%;
    z-index: 2;
    opacity: 0.9;
    display: none;
}
/*************************************************************[End UI /repairs/iphone]*********************************************************/
/*************************************************************[St UI /repairs/ipad]*********************************************************/



.ipad-r{
    width: 170px;
    height: 200px;
    top:40px;
    left:25px;
    position: relative;
}


.ipad-repairs-flex{
    display: flex;
    width: 100%;
    position: relative;
    background-color: #FFFFFF;
    padding: 10px;
    justify-content:center;
    flex-wrap: wrap;
}
.ipad-repairs-flex div{
    margin-left: 10px;
    margin-top: 30px;
    width: 200px;
    color: #000;
    height: 300px;
    overflow: hidden;
    background-color: unset;
    border-bottom:2px solid #000;


}

.ipad-repairs-flex div:hover{
    border-bottom:2px solid #008FB6;

}
.ipad-repairs-flex div a{
    position: relative;
    display: flex;
    font-size: unset;
    top: 3%;
    padding: 0;
}
/*-----------------------------[mini]-------------------------*/
.ipad-mini-repairs-flex{
    display: flex;
    width: 100%;
    position: relative;
    background-color: #FFFFFF;
    padding: 10px;
    justify-content:center;
    flex-wrap: wrap;

}

.ipad-mini-repairs-flex div{
    margin-left: 10px;
    margin-top: 30px;
    width: 200px;
    color: #000;
    height: 300px;
    overflow: hidden;
    background-color: unset;
    border-bottom:2px solid #000;


}
.ipad-mini-repairs-flex div:hover{
    border-bottom:2px solid #7AC144;

}
.ipad-mini-repairs-flex div a{
    position: relative;
    display: flex;
    font-size: unset;
    top: 3%;
    padding: 0;
}

/*-----------------------------[air]-------------------------*/

.ipad-air-repairs-flex{
    display: flex;
    width: 100%;
    position: relative;
    background-color: #FFFFFF;
    padding: 10px;
    justify-content:center;
    flex-wrap: wrap;

}
.ipad-air-repairs-flex div{
    margin-left: 10px;
    margin-top: 30px;
    width: 200px;
    color: #000;
    height: 300px;
    overflow: hidden;
    background-color: unset;
    border-bottom:2px solid #000;


}
.ipad-air-repairs-flex div:hover{
    border-bottom:2px solid #7AC144;

}
.ipad-air-repairs-flex div a{
    position: relative;
    display: flex;
    font-size: unset;
    top: 3%;
    padding: 0;
}


/*-----------------------------[pro]-------------------------*/

.ipad-pro-repairs-flex{
    display: flex;
    width: 100%;
    position: relative;
    background-color: #FFFFFF;
    padding: 10px;
    justify-content:center;
    flex-wrap: wrap;

}
.ipad-pro-repairs-flex div{
    margin-left: 10px;
    margin-top: 30px;
    width: 200px;
    color: #000;
    height: 300px;
    overflow: hidden;
    background-color: unset;
    border-bottom:2px solid #000;


}
.ipad-pro-repairs-flex div:hover{
    border-bottom:2px solid #7AC144;

}
.ipad-pro-repairs-flex div a{
    position: relative;
    display: flex;
    font-size: unset;
    top: 3%;
    padding: 0;
}
.ipad-mini-repairs-flex p,.ipad-repairs-flex p,.ipad-air-repairs-flex p,.ipad-pro-repairs-flex p{
    text-transform: uppercase;
    color:#000 ;
    font-weight: 900;
    position: absolute;
    left: 50px;
}
/*************************************************************[End UI /repairs/ipad]*********************************************************/






/*************************************************************[St UI /repairs/samsung]*********************************************************/
.samsung-r{
    width: 170px;
    height: 200px;
    top:40px;
    left:25px;
    position: relative;
}
.samsung-s-repairs-flex{
    display: flex;
    width: 100%;
    position: relative;
    background-color: #FFFFFF;
    padding: 10px;
    justify-content:center;
    flex-wrap: wrap;
}
.samsung-s-repairs-flex div{
    margin-left: 10px;
    margin-top: 30px;
    width: 200px;
    color: #000;
    height: 300px;
    overflow: hidden;
    background-color: unset;
    border-bottom:2px solid #000;


}

.samsung-s-repairs-flex div:hover{
    border-bottom:2px solid #008FB6;

}
.samsung-s-repairs-flex div a{
    position: relative;
    display: flex;
    font-size: unset;
    top: 3%;
    padding: 0;
}
/*************************************************************[End UI /repairs/samsung]*********************************************************/







/****************************************************[St UI /repairs/model/....]*********************************************************/
.repairs-services{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    position: relative;
    flex-wrap: wrap;
    background-color: #F4F5F5;
    padding: 25px;

}
.choose-model-caption,.choose-service-caption{
    width: 100%!important;
    display: flex!important;
    justify-content: center!important;
    position: relative!important;
    margin-bottom: 30px;
    margin-top: 15px;
}
.choose-model-caption h3,.choose-service-caption h3{
    color: #000;
    font-size: 1.8em;
    text-align: center;
    font-weight: bold;
    border-bottom: 3px solid #000;
    text-transform: uppercase;
}
#select-phone{
    color: #000;
    font-size: 1.8em;
    position: absolute;
    text-align: center;
    font-weight: bold;
    top: 25px;
    padding: 10px 20px;
    border-bottom: 3px solid #000;
    text-transform: uppercase;
    margin-bottom: 300px;
}
.repairs-services div:not(:nth-of-type(1)){
    width:225px;
    height: 260px;
    background-color: #fff;
    margin-left: 28px;
    margin-bottom: 28px;
    position: relative;
    color:#000;
    cursor: pointer;
    border-radius: 1px;
    font-size: 1.5em;
    text-align: center;
    font-weight: bold;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}
.repairs-services div:not(:nth-of-type(1)):hover{
    /*border: 2px solid #7AC144;*/
}
.repairs-services div a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 15px;
}
.service-item{
    position: relative;
    width: 105px;
    height: 105px;
    left: 0px;
    top: 25px;

}
.repairs-services div span{
    color:#000;
}
#cpc{
    background-color: #000;
    width: 196px;
    color: #fff;
    font-weight: 600;
    position: absolute;
    top: 565px;
    text-align: center;
    left: 160px;
    padding: 8px 5px;
    border-radius: 6px;
    text-shadow: 1px 4px 2px #000;
    font-family: monospace;

}
#cpc:after{
    content: "";
    background-color: #000;
    width: 10px;
    height: 10px;
    display: block;
    position:absolute;
    top:-5px;
    transform: rotate(45deg);
    left: 89px;
}
.repairs-services div span:nth-of-type(1){

    font-family: ibmr;
    font-size: 0.7em;
    text-transform: capitalize;
    line-height: 39px;
}
.repairs-services div span:nth-of-type(2){
    font-weight: bold;
    position: absolute;
    top: 160px;
    left: 35px;
    font-family: ibmr;
    font-size: 0.6em;

}
.repairs-services div span:nth-of-type(3){
    font-weight: bold;
    position: absolute;
    top: 160px;
    left: 140px;
    font-family: ibmr;
    font-size: 0.6em;
    color: #27AE60!important;
}
.repairs-services div span:nth-of-type(4) {
    font-weight: bold;
    position: absolute;
    top: 190px;
    left: 35px;
    font-family: ibmr;
    font-size: 0.6em;
    padding-bottom: 3px;

}
.repairs-services div span:nth-of-type(5)  {
    font-weight: bold;
    position: absolute;
    top: 190px;
    left: 140px;
    font-family: ibmr;
    font-size: 0.6em;



}
.repairs-services div span:nth-of-type(6) {
    font-weight: bold;
    position: absolute;
    top: 220px;
    left: 35px;
    font-family: ibmr;
    font-size: 0.6em;
    padding-bottom: 2px;


}

.repairs-services div span:nth-of-type(7) {
    font-weight: bold;
    position: absolute;
    top: 220px;
    left: 140px;
    font-family: ibmr;
    font-size: 0.6em;



}
.repairs-services div span:nth-of-type(2):after,.repairs-services div span:nth-of-type(6):after {
    content: ' →';
    position: absolute;
    left:88px;
    color:#0984e3;
}
.repairs-services div span:nth-of-type(4):after{
    content: ' →';
    position: absolute;
    left:88px;
    top:2px;
    color:#0984e3;

}

.dollarsignorder{
    position: absolute;
    top:160px;
    left:6px;
    color: #27AE60;
    transform: rotate(90deg);

}
.model-clock{
    position: absolute;
    top:192.5px;
    left:8px;
    font-size: 0.9em;
    font-weight: bold;
    color: #0984e3;

}
.model-shield{
    position: absolute;
    top:220.5px;
    left:8px;
    font-size: 0.9em;
    font-weight: bold;
    color: #0984e3;
}
.order-now{
    width: 200px;
    height: 250px;
    margin-left: 28px;
    margin-bottom: 28px;
    position: absolute;
    top: 481px;
    color: #000;
    cursor: pointer;
    border-radius: 1px;
    font-size: 1.5em;
    text-align: center;
    font-weight: bold;
    border: 2px solid #000;
    z-index: 2;
    left: 106px;
    background: rgba(255,255,255,0.5);
}

.order-now button{
    padding: 5px 10px;
    font-weight: 900;
    position: absolute;
    top: 170px;
    left: 50px;
    background-color: #27AE60;
}
.repairs-services button{
    padding: 10px 30px;
    position: absolute;
    top: 122px;
    left: 40px;
    z-index: 2;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 500;
    opacity:1;
    display: none;
    /*background: linear-gradient(#7AC144,#7AC144);*/
    background-color: #000;
    color: #FFF;
    text-decoration: none;
    text-shadow: #1c8f3d 0 1px 0;
    text-transform: uppercase;
    box-shadow: 0px 5px 5px #000;
    font-size: 0.6em;
    text-shadow: #1c8f3d 0 1px 0;
}
.repairs-services div button:hover{
}


/****************************************************[End UI /repairs/model/....]*********************************************************/
/*###########################################[ St UI  /repairs/order/../...]#############################################*/

.repair-order{
    width: 100%;
    height: auto;
    background: #F4F5F5;
    font-family: ibmr;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

}
.repair-order-caption{
    display:flex;
    width: 100%;
    justify-content: center;
}
.repair-order-caption h2{
    color: #000;
    font-size: 1.8em;
    text-align: center;
    font-weight: bold;
    padding: 10px 20px;
    border-bottom: 3px solid #000;
    text-transform: uppercase;
}
.repair-order-table-father{
    position: relative;
    margin-top:50px;
}
.repair-order-table-son-one{
    position: relative;
    margin-top:50px;
}
.repair-order-table-son-two{
    position: relative;
    margin-top:50px;
}
.repair-order-client-form {
    width:100%;
    display: flex;
    justify-content: center;
    background-color:#F4F5F5;
    flex-wrap: wrap;
}
.repair-order-client-form form{
    position: relative;
    left:75px;
    margin-bottom: 100px;
}
.repair-order-client-form form input,.repair-order-client-form form select {
    border-bottom: 2px solid #0984e3;
    height: 50px;
    width: 300px;
    background-color: #F4F5F5;
    position: relative;
    left:20px;
    display: block;

}

.fa-user-circle{
    position: relative;
    top:40px

}
#order-client-name-counter{
    position: relative;
    top:47px;
    left:270px;
    z-index:2;
    font-size: 0.8em;
}
.evs{
    color:red;
    font-size: 0.8em;
    position: absolute;
    font-family: ibml;
    z-index: 2;
    left: 20px;
    display: none;
}


.client-phone{
    position: relative;
    top:40px;
    transform: rotate(90deg);

}
#order-client-phone-counter{
    position: relative;
    top:47px;
    left:270px;
    z-index:2;
    font-size: 0.8em;
}
.evn{
    color:red;
    font-size: 0.8em;
    position: absolute;
    top:140px;
    font-family: ibml;
    z-index: 2;
    left: 20px;
    display: none;
}


.fa-at{
    position: relative;
    top:40px;
}

#order-client-email-counter{
    position: relative;
    top:-23px;
    left:290px;
    z-index:2;
    font-size: 0.8em;
}

.eve{
    color:red;
    font-size: 0.8em;
    position: absolute;
    top:215px;
    font-family: ibml;
    z-index: 2;
    left: 20px;
    display: none;
}


.fa-square{
    position: relative;
    top:45px;
    z-index: 2;
    right:30px
}

.evc{

    color:red;
    font-size: 0.8em;
    position: absolute;
    top:282px;
    font-family: ibml;
    z-index: 2;
    left: 20px;
    display: none;
}



.fa-address-card{
    position: relative;
    top:45px;
    z-index: 2;
    right:6px
}
#order-client-address-counter{
    position: relative;
    top:-34px;
    left:290px;
    z-index:2;
    font-size: 0.8em;
}
.eva{
    color:red;
    font-size: 0.8em;
    position: absolute;
    top:355px;
    font-family: ibml;
    z-index: 2;
    left: 20px;
    display: none;

}

.fa-map-marker{
    font-size: 1.4em;

}
.fa-map-marker,#order-client-location{
    position: relative;
    top:0px;
    z-index: 2;
    left:324px
}
.fa-map-marker:hover{
    cursor: pointer;
    color:#008FB6;
}
.request-order-img{
    position: relative;
    width: 65px;
    height: 65px;


}
.request-order-phone-img{
    position: relative;
    width: 90px;
    height: 130px;


}
.request-order-phone-img-temp{
    position: relative;
    width: 65px;
    height: 130px;
}

.repair-order-table-father th,.repair-order-table-son-one th,.repair-order-table-son-two th{
    padding: 5px 10px;
    background-color:#000 ;
    color:#fff;
    text-transform: uppercase;
    border-bottom: 2px solid #008FB6 ;

}
.repair-order-table-father td,.repair-order-table-son-one td,.repair-order-table-son-two td{
    background-color:#F4F5F5 ;
    color:#000;
    text-align: center;
    font-size: 1em;
    font-weight:bold;
    padding:10px 20px;
    left:20px;
    text-transform: uppercase;
}

button[name='send-repair-order']{
    /* background: linear-gradient(#43c692,#39b885);*/
    background-color: #000;
    border-radius: 4px;
    border: 1px solid #1f7c57;
    color: #FFF;
    position: relative;
    text-decoration: none;
    text-shadow: #1c8f3d 0 1px 0;
    transition: background .15s;
    cursor: pointer;
    padding: 10px 60px;
    top:50px;
    right: 260px;
    font-size: 1em;
    box-shadow:  0px 5px 5px  #DDD;
}

button[name='send-repair-order']:hover{
    background: linear-gradient(#29A775,#29A775);
    transition: background 4s;    }
#result{
    width:500px;
    height:500px;
    background-color: #DDD;
    color:red;
    position: absolute;
    z-index: 10;
    top:300px;
    left:400px;
    display:none;
}
.color-figure{
    position: absolute;
    top:520px;
    left:230px;
}

.color-figure span{
    height: 20px;
    width: 20px;
    display: inline-block;
    position: relative;
    border-radius: 50%;
    box-shadow: inset 0 2px 1.5px rgba(0,0,0,0.1);
    cursor: pointer;
    margin: 2px;


}.color-figure span:hover{
     border: 1px solid #0984e3 ;
 }
.color-figure .silver {

    background-color: #E2E3E4;
    position: relative;

}
.color-figure .space-gray{
    background-color: #B1B2B7;

}
.color-figure  .gold {

    background-color: #E3CCB4;

}
.color-figure  .rose-gold {

    background-color: #ECC6C1;

}
.color-figure  .white {
    background-color: #F3F3F3;
}
div .blue{
    background-color: #48AEE6;
}
.color-figure  .red{
    background-color: #B41325;
}
.color-figure  .coral{
    background-color: #FF6E5A;
}
.color-figure .black{
    background-color: #2E3034;
}
.color-figure  .yellow{
    background-color: #F9D045;
}
.color-figure  .blue{
    background-color: #39A6DE;
}
.color-figure  .pink{
    background-color: #FD6969;
}
.color-figure  .green{
    background-color: #96E264;
}
#anrs{
    /*
    position: relative;
    padding: 10px;
    color: #FFF;
    top: 72px;
    left: 1087px;
    background-color: #27ae60;
    cursor: pointer;*/
    background: linear-gradient(#43c692,#39b885);
    border-radius: 4px;
    border: 1px solid #1f7c57;
    box-shadow: inset 0 1px #4fd3aa;
    color: #fff;
    text-decoration: none;
    text-shadow: #1c8f3d 0 1px 0;
    transition: background .15s;
    cursor: pointer;
    padding: 10px;
    top: 300px;
    left: 1133px;
    position: fixed;
    z-index: 2;

}
#anrs:hover{
    background: linear-gradient(#29A775,#29A775);
    transition: background .15s;
}
#service-2,#service-3,#service-4,#service-5{
    display:none
}
#crs2,#crs3,#crs4,#crs5{
    /*
    position: relative;
    padding: 10px;
    color: #FFF;
    background-color: #27ae60;
    cursor: pointer;
    */

    background: linear-gradient(#43c692,#39b885);
    border-radius: 4px;
    border: 1px solid #1f7c57;
    box-shadow: inset 0 1px #4fd3aa;
    color: #fff;
    position: relative;
    text-decoration: none;
    text-shadow: #1c8f3d 0 1px 0;
    transition: background .15s;
    cursor: pointer;
    padding: 10px;
    text-transform: uppercase;
}
#crs2:hover{
    background: linear-gradient(#29A775,#29A775);
    transition: background .15s;
}
#c2,#c3{
    background: linear-gradient(#DDD,#EEE);
    border: 1px solid #CCC;
    box-shadow: inset 0px 1px #DDD;
    padding: 5px;
    width: 85px;
    height: 40px;
    border-radius: 4px;
    cursor: pointer;
    text-shadow: #fff 0px 1px;


}
#c2:hover,#c3:hover{
    background: linear-gradient(#DDD,#DDD);
    transition: background 0.15s;

}

.multi-repair-order-one{
    width: 85%;
    height: 560px;
    margin-left: 7.5%;
    color: #000;
    top: 58px;
    z-index: 3;
    display: none;
    justify-content: center;
    flex-wrap: wrap;
    position: fixed;
    /*background: rgba(223,230,233,0.75);
    */
    background: linear-gradient(#FFF,#DFE6E9);
    border: 1px solid #DDD;

}
.multi-repair-order-one div{
    width: 150px;
    height: 150px;

    position: relative;
    top: 5px;
    color: #000;
    cursor: pointer;
    border-radius: 1px;
    font-size: 0.95em;
    text-align: center;
    font-weight: bold;
    border-bottom:3px solid #000;
    margin: 18px;
    transition:  0.5s ease;

}
.multi-repair-order-one div:hover,.multi-repair-order-two div:hover{
    border-bottom:3px solid #008FB6

}
.multi-repair-order-one div img,.multi-repair-order-two div img{
    position: relative;
    width:50px;
    height:50px;
    top:30px;
}
.t1{
    color:red;
    cursor: pointer;
    position: relative;
    top:-30px;
    left:50px;
    font-size: 1.5em;
    padding: 10px;
    border-radius: 2px;

}
/*###########################################[End  UI  /repairs/order/../...]#############################################*/
/***************************************************[St UI /trackrepairorder/order]*************************************************************/

.cancel-times{
    color:red;
    cursor: pointer;
    position: absolute;
    right:10px;
    font-size: 1.1em;
    padding: 10px;
    border-radius: 2px;
}

.success-order-request,.alert-order-id,.order-id{
    width: 100%;
    display: flex;
    justify-content: center;
}
.success-order-request h3{
    font-size: 1.1em;
    font-family: ibml;
    color:#0c7b8d;
    text-transform: uppercase;
    margin-top: 4%;
}

.alert-order-id h3{
    font-size: 1.3em;
    font-family: ibml;
    color:#e84118;
    text-transform: uppercase;
}
.order-id p{
    font-size:4em;
    font-family: ibml;
    margin-bottom: 3%;
    font-weight: bolder;

}

.track-repair-order{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #E9EBEE;
}
.track-repair-order form{
    display: grid;
    margin: 10%;
}
.track-repair-order input:nth-of-type(1){
    width: 300px;
    height: 40px;
    outline: none;
    border: 1px solid #BDC7D8;
    font-weight: 900;
    text-align: center;
    border-radius: 4px;
    font-size: 1.5em;
    text-transform: uppercase;

}

.track-repair-order input:nth-of-type(2){
    margin-top: 35px;
    height: 40px;
    outline: none;
    text-align: center;
    font-size: 1.5em;
    text-transform: uppercase;
    border-radius: 4px;
    background-color: #DFE6E9;

}
#num_0,#num_1,#num_2,#num_3,#num_4,#num_5,#num_6,#num_7,#num_8,#num_9{
    display:none;
}
.track-repair-order input:nth-of-type(2):hover{
    cursor: pointer;
    background-color:#008FB6;
    transition: all 0.3s ease;
}

.track-repair-order-client{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #EFEFEF
}
.track-repair-order-client table{
    margin: 50px;
    border-collapse: collapse;
}
.track-repair-order-client table caption h3{
    font-size: 1.8em;
    text-transform: uppercase;
    background-color: #efefef;
    padding: 23px;
    border-bottom: 5px solid #008FB6;
}
.track-repair-order-client table caption img{
    width: 275px;
    height: 100px;
    position: relative;
    top: 95px;
    right: 325px;
}

.track-repair-order-client table th {
    text-transform: uppercase;
    border: 1px solid #b2bec3;
    padding: 5px;
    background-color: #dfe6e9;
}
.track-repair-order-client table td{
    text-align: center;
    padding: 5px;
    text-transform: uppercase;
    font-weight: bold;
    border: 1px solid #b2bec3;
    background-color: #FFF;

}
.track-repair-order-client table tr:nth-of-type(20) td {
    font-weight: bolder;
}
.track-repair-order-client table tr:nth-of-type(5) td img{
    width:80px;
    height: 130px;
}
.track-repair-order-client input{
    height: 40px;
    outline: none;
    text-align: center;
    font-size: 1.5em;
    text-transform: uppercase;

}
.track-repair-order-client input:hover{
    cursor: no-drop;
}

/***************************************************[End UI /trackrepairorder/order]*************************************************************/


/*

                                                         END OF UI

 */

/*

                                                         Start OF Dashboared

 */

/*########################################## Start login page /tech-admin##################################################*/

.middle-img{
    display: block;
    margin-left: 27%;
    position: relative;
    top: 55px;
}
.login-page{
    padding: 125px;
}
.login-page form input{
    display: block;
    margin-left: 33%;
    width:300px;
    height: 35px;
    background-color: #F4F5F5;
    position: relative;
    outline: none;
    border: 1px solid #EEE;
    border-radius: 2px;
    margin-top: 20px;
    font-size: 15px;
    font-weight: bold;
}
.login-page form button{
    cursor: pointer;
    background-color: #008FB6;
    margin-top: 20px;
    transition: 0.3s ease;
    color: #FFF;
    padding: 10px 30px;
    text-transform: uppercase;
    border-radius: 3px;
    text-shadow:0px 3px 8px rgba(255, 255, 255, 0.63);
    outline:none;
    position: relative;
    left: 410px;
    width:200px;
}

.login-page form button:hover{
    background-color:#27ae60;
}
/*########################################## End  login page /tech-admin##################################################*/


/*########################################## Start tech orders interface /tech_orders##################################################*/

.tech_all_orders_main_manu{
    padding: 25px;
}
.tech_all_orders_li_sub_side{
    width: 50%;
    background-color: #dfe6e9;
    margin-left: 25%;
    border-radius: 2px;
    list-style-type: none;
    padding:10px;
    font-size: 14px;
    text-transform: capitalize;
    font-weight: 700;

}
.tech_all_orders_li_sub_side:nth-last-of-type(odd){
    border-top:2px solid #2ecc71
}
.tech_all_orders_li_sub_side:nth-last-of-type(even){
    border-top:2px solid #008FB6;
}
.tech_all_orders_li_sub_side:hover{
    border-top:2px solid #000;
    cursor: pointer;
}
.tech_all_orders_sub_side{
    background-color: #dfe6e9;
    display:none;
    width: 100%;
    list-style-type: none;
    border-radius: 5px;
}







/*########################################## End tech orders interface /tech_orders##################################################*/



/*########################################## Start side menu /irdirectorate##################################################*/

/*Continer side*/
.side-cont{
    background: #000;
    width: 25%;
    height: 1300px;
    position: relative;
    top: -6px;
    z-index: 2;
    display:none;
}
.side-controller{
    background: #000000bf;
    width:100%;
    height: 58px;
}

/*Main manu ul*/

.main-manu{
    background: none;
    position: relative;
    top:5px;
    left:-35px;
}

/*main links*/

.main-manu li a{
    text-decoration: none;
    color:#fff;
    transition:all 0.5s ease;
    background: none;
    display: inline-block;
    width: 100%;
    border-left: 3px solid #008FB6;
    z-index:1;
    margin-bottom: 14px;
    font-size: 0.9em;

}
.main-manu li a:hover{
    color:#008FB6;
}


/*sub links*/
.ul-sub-side{
    background:#6d6d6dbd;
    display:none;
    width: 112%;
    list-style-type: none;
}
.ul-sub-side li a{
    list-style-type:none;
    border-left: none;
    margin-bottom: 5px;
    margin-top: 5px;
    transition: all 0.5s ease;
    background:none;

}
.ul-sub-side li a:hover{
    padding-left: 20px;
    background: none;

}
/*In/Out Button*/

.fa-bars{
    position: relative;
    top:20px;
    float: right;
    right:20px;
    cursor: pointer;
    color:#FFF;
    font-size:1.5em;
    opacity:0.7;
    transition:all 0.5s ease;


}
.fa-angle-double-up,.fa-angle-double-down{
    position: relative;
    top:20px;
    float: right;
    right:50px;
    cursor: pointer;
    color:#FFF;
    font-size:1.5em;
    opacity:0.7;
    transition:all 0.5s ease;


}
.fa-bars:hover,.fa-angle-double-up,.fa-angle-double-down:hover{
    opacity:1;

}
/*small arrows*/

.fa-chevron-right,.fa-chevron-down{
    display: inline-block;
    float: right;
    position: relative;
    right:7px;
    font-size: 8px;
    top:6px;
}
.details{
    background: #000;
    opacity: 1;
    width:115px;
    height:25px;
    color:#FFF;
    position: relative;
    left:280px;
    border-radius:3px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    padding: 5px 0px 5px 0px;
    z-index: 1;
    display: none;
}
.details:after{
    content: '';
    display: block;
    width:10px;
    height:10px;
    background: #000;
    color:green;
    position: absolute;
    transform: rotate(45deg);
    top:8px;
    left:-4px;

}
.side-logo{
    position: relative;
    width: 160px;
    height: 60px;
}
.wrench-admin,.fa-chart-line,.fa-external-link-square-alt,.fa-boxes{
    font-size: 1.5em;
    position: relative;
    left: -2px;
}
.wrench-admin{
    color:#008FB6;
}
.ar2{
    font-size: 1.5em;
    position: relative;
    left: -2px;
    transform:rotate(180deg);
}
/*########################################## End side menu /irdirectorate##################################################*/

/*########################################## st dashboard /repair_services/[add-search]##################################################*/

.adding-new-service,.search_services{
    display:block;
    width: 100%;
    background-color: #fff;
    padding: 25px;
}

.adding-new-service form input,.search_services form input{
    display: block;
    margin-left: 30%;
    width: 40%;
    height: 40px;
    background-color: #F4F5F5;
    position: relative;
    outline: none;
    border: 1px solid #EEE;
    border-radius: 2px;
    margin-top: 20px;
}
.adding-new-service form input[name='black_count'],
.adding-new-service form input[name='white_count'],
.adding-new-service form input[name='gold_count'],
.adding-new-service form input[name='gray_count'],
.adding-new-service form input[name='silver_count'],
.adding-new-service form input[name='blue_count'],
.adding-new-service form input[name='yellow_count'],
.adding-new-service form input[name='coral_count'],
.adding-new-service form input[name='red_count'],
.adding-new-service form input[name='rose_count'],
.adding-new-service form input[name='no_color']
{
    height: 25px!important;
    width:37px;
}
.color_checkboxes_A{
    position: relative;
    display:inline-flex;
    width:7%;
}

.adding-new-service form legend,.search_services form legend{
    position: relative;
    background-color:#00addc;
    color:#fff;
    border-bottom: 4px solid #000;
    text-align: center;
    text-transform: uppercase;
    width: 250px;
    top:-20px;
    font-size: 1.2em
}
.adding-new-service form select,.search_services form select{
    width: 400px;
    height: 35px;
    margin-bottom: 20px;
    outline: none;
    border: 1px solid #BDC7D8;
    border-radius: 8px;
    margin-right: 15px;
    display: block;
    position: relative;
    left: 470px;
    margin-top: 15px;
}
.adding-new-service form input[name='add-new-service']{
    border:none!important;
}
/*
    background-color: #008FB6;;
    border-radius: 4px;
    border: 1px solid #565656;
    color: #FFF!important;
    position: relative;
    text-decoration: none;
    text-shadow: #008FB6 0 1px 0;
    transition: background .15s;
    cursor: pointer;
    padding: 10px 60px;
    font-size: 1em;
    text-transform: uppercase;
    margin: auto;
    outline:none;
    ******[old style]*******

    */
.adding-new-service form input[name='update-service']{

    background-color: #008FB6;;
    border-radius: 4px;
    border: 1px solid #565656;
    color: #FFF!important;
    position: relative;
    text-decoration: none;
    text-shadow: #008FB6 0 1px 0;
    transition: background .15s;
    cursor: pointer;
    padding: 10px;
    font-size: 1em;
    text-transform: uppercase;
    margin: auto;
    outline:none;
    left: 0px;
    margin-bottom: 15px;
    width: 102px;
    margin-top: 36px;
}
.search_services button{

    background-color: #008FB6;;
    border-radius: 4px;
    border: 1px solid #565656;
    color: #FFF!important;
    position: relative;
    text-decoration: none;
    text-shadow: #008FB6 0 1px 0;
    transition: background .15s;
    cursor: pointer;
    padding: 10px;
    font-size: 1em;
    text-transform: uppercase;
    margin: auto;
    outline:none;
    left:620px;
    margin-bottom: 15px;
}
button[name='add-new-service']{
    background-color: #008FB6;
    border-radius: 4px;
    border: 1px solid #565656;
    color: #FFF!important;
    position: relative;
    text-decoration: none;
    text-shadow: #008fb6 0 1px 0;
    transition: background .15s;
    cursor: pointer;
    padding: 10px;
    font-size: 1em;
    text-transform: uppercase;
    margin: auto;
    outline: none;
    left: 574px;
    top: 25px;
    margin-bottom: 15px;
}
button[name='add-new-service']:hover,.search_services button:hover,.adding-new-service input[name="update-service"]:hover{
    /*
    background: linear-gradient(#008FB6,#00617b78);
    transition: background 4s;
    ******[old style]*******

    */
    background: linear-gradient(#29A775,#29A775);
    transition: background 4s;

}


.search_services{
    border-bottom: none!important;
}
.search_services label{
    text-transform: uppercase;
}
.services-options{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #000;
}
.services-options button {
    margin: 10px;
    outline: none;
    background-color:#008FB6;
    transition: 0.3s ease;
    text-transform: uppercase;
    cursor: pointer;
    border-radius:5px ;
    color:#FFF;
}
.services-options button:hover{
    background-color:#008fb6de;
}

.btn-rs{

    position: absolute;
    top: 0px;
    width: 1083px;
    height: 633px;
    left: 266px;
    background-color: #4b4b4b;
}  .btn-rs button{
       margin: 10px;
       padding: 10px 5px;
       cursor: pointer;
       background-color: #7D7D77;
       border: 1px solid #000;
       border-radius: 5px;
       width: 226px;
       font-weight: bold;
       display: block;
       position: relative;
       left: 358px;
       top: 200px;
   }




.btn-rs button:hover,.btn-other button:hover{

    background-color: #27AE60   ;

}
.rs-search-result-all{
    position: relative;
    display: flex;
    justify-content: center;
    left:0px;
    top:0px;
    background-color:#FFF;
    border-top: 3px solid #008FB6;
    width: 100%;
    zoom:.9;
    padding: 30px;
}
button[name='request_supplier_order']{
    padding: 5px;
    cursor: pointer;
}
button[name='request_supplier_order']:hover{
    background-color:#27AE60 ;
}
.rs-search-result-spe{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    left:0px;
    top:0px;
    background-color:#FFF;
    width: 100%;
    zoom:.9;
    padding: 30px;
}
.rs-search-result-all table,.rs-search-result-spe table{
    border: 1px solid #b2bec3;
    border-collapse: collapse;
}

.rs-search-result-all table th,.rs-search-result-spe table th{
    padding: 5px 10px;
    background-color:#dfe6e9 ;
    color:#000;
    text-transform: capitalize;
    border: 1px solid #b2bec3;

}
.rs-search-result-all table td,.rs-search-result-spe table td{
    padding: 10px 10px;
    background-color:#fff ;
    color:#0984e3;
    text-align: center;
    font-weight:400;
    border: 1px solid #b2bec3;
    font-size: 1em;

}
.rs-search-result-all table td:nth-of-type(10),.rs-search-result-spe table td:nth-of-type(10){
    color:green;

}

.fa-trash:hover{
    color:red;
}
.fa-pen-square:hover{
    color:#27AE60
}
.delete-alert{
    position: fixed;
    align-content: center;
    width: 390px;
    height: 122px;
    background-color: #FFF;
    left: 477px;
    top: 200px;
    display: none;
    border: 2px solid #DDD;
}
.delete-alert p{
    background-color: #b2bec3;
    width: 100%;
    height: 30px;
    text-align: center;
    font-weight: 700;
    padding: 2px;
    text-transform: uppercase;
}
.delete-alert button:nth-of-type(1){
    margin-left: 10px;
    position: absolute;
    border: 1px solid #b2bec3;
    top: 68px;
    left: 71px;
    border-radius: 5px;
    transition: all 0.5s ease;
    padding: 0px 20px;
    font-weight: bolder;
    box-shadow: 2px 2px 2px #eee;
    outline: none;


}

.delete-alert button:nth-of-type(2){
    margin-left: 10px;
    position: absolute;
    border: 1px solid #b2bec3;
    top: 68px;
    left: 220px;
    border-radius: 5px;
    transition: all 0.5s ease;
    padding: 0px 20px;
    font-weight: bolder;
    box-shadow: 2px 2px 2px #eee;
    outline: none;

}
.delete-alert button:nth-of-type(1):hover{
    background-color: red;
    cursor: pointer;
}

.delete-alert button:nth-of-type(2):hover{
    background-color: #27AE60;
    cursor: pointer;

}
.delete-complete{
    position: absolute;
    display: flex;
    align-content: center;
    width: 390px;
    height: 60px;
    background-color: #00b894;
    top: 132px;
    left: 477px;
    display: none;
}
.add-complete{
    position: absolute;
    display: flex;
    align-content: center;
    width: 390px;
    height: 60px;
    background-color: #00b894;
    top: 150px;
    left: 484px;
    text-transform: uppercase;
}
.error-notcomplete{
    position: absolute;
    display: flex;
    align-content: center;
    width: 390px;
    height: 60px;
    background-color: #ff7675;
    top: 150px;
    left: 484px;
    text-transform: uppercase;
}
.delete-complete p,.error-notcomplete p,.add-complete p{
    width:100%;
    height: 30px;
    text-align: center;
    font-weight: 600;
    padding: 2px;
    position: relative;
    top:15px;
}




/*########################################## End dashboard parts management /repair_services/[add-search]##################################################*/


/*##########################################select style##########################################*/
.custom-select select {
    display: none; /*hide original SELECT element:*/
}
.select-selected {
    background-color: #7d7d77;
}
/*style the arrow inside the select element:*/
.select-selected:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent;
    top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
    color: #ffffff;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
}
/*style items (options):*/
.select-items {
    position: absolute;
    background-color: #5d5d5d;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
    display: none;
}
.select-items div:hover, .same-as-selected {
    background-color: #7ac144
}
/*##########################################select style##########################################*/
/*########################################## St dashboard external_repair_services/##################################################*/

.box-show{
    width: 150px;
    height: 93px;
    display: inline-block;
    background-color: #fff;
    margin: 20px;
    font-weight: bold;
    text-align: center;
    border-radius: 1px solid #FFF;
    border-bottom:2px solid #3b9aeb;
    box-shadow: 2px 1px 8px linen;
}
.box-show:hover{
    cursor: pointer;
    /* background-color: #00b894;*/
    background-color: #3b9aeb;
    transition: all 0.5s ease;
    /*width: 170px;
    height: 100px;*/
}
.admin-waiting-approve-orders{

    width: 40%;
    margin-bottom: 50px;
    padding-bottom: 20px;
    background-color: #EEE;
    margin-left: 10%;
    border: 2px solid #008FB6;
    position: absolute;
    display: none;
    top: 20%;
    left: 17%;
    opacity: 0.99;

}
.admin-waiting-approve-orders table tr:nth-of-type(even) th
{
}
.admin-waiting-approve-orders table tr:nth-of-type(even) td
{
}

.client-repair-order-personal-data,.client-first-repair-order-details,.client-repair-order-options,.client-second-repair-order-details{

    width: 95%;
    margin: 2%;
}

.client-repair-order-personal-data th,.client-first-repair-order-details th,.client-second-repair-order-details th,.client-repair-order-options th{
    border:1px solid #b2bec3;
    text-align: center;
    padding: 5px;
    background-color: #FFF;
    color:#3a46cd;
    font-weight: bolder;
    text-transform: uppercase;
    transition: all 0.2s ease ;
}
.client-repair-order-personal-data th:nth-of-type(1),.client-first-repair-order-details th:nth-of-type(1),.client-second-repair-order-details th:nth-of-type(1),.client-repair-order-options th:nth-of-type(1){
    background-color: #dfe6e9;
}

.client-repair-order-personal-data th:hover {
    cursor: pointer;
}
.client-repair-order-personal-data td,.client-first-repair-order-details td,.client-second-repair-order-details td,.client-repair-order-options td{
    border:1px solid #b2bec3;
    text-align: center;
    padding: 5px;
    background-color: #fff;
    color:#000;
}
.client-repair-order-personal-data,.client-second-repair-order-details{
    border-collapse: collapse;
    zoom:0.8;
    border-top:5px solid #008FB6;
}
.client-first-repair-order-details,.client-repair-order-options{
    border-collapse: collapse;
    zoom:0.8;
    border-top:5px solid #2ecc71;
}
.admin-waiting-approve-orders table tr:nth-of-type(1) td:nth-of-type(1) input{
    text-align: center;
    font-size: 1.2em;
}
.admin-waiting-approve-orders table tr:nth-of-type(1) td:nth-of-type(1) input:hover {
    cursor: no-drop;
}
.client-first-repair-order-details img{
    width:45px;
    height:75px;
}
.admin-waiting-approve-orders table caption h3{
    text-align: center;
    text-transform: uppercase;
    padding: 15px;
    color:#000;
    font-weight: 100;
    font-size: 1.7em;
    text-decoration: underline;
    font-family: cursive!Important;
}
.accept-order,
.cancel-order,
.reject-order,
.pass_order_to_tech,
.pass_order_to_tech_internal,
.cancel_pass_order_to_tech_internal,
.cancel_pass_order_to_tech,
.tech_accept_order,
.tech_accept_passed_order,
.tech_reject_passed_order,
.tech_withdraw_order,
.tech_arrived,.order_completed,
.order_undone,
.order_completed_internal,
.order_undone_internal,
.ex_to_in_order,
.handed_repair_order_item,
.move_order_to_pre_issues
{
    text-transform: uppercase;
    font-size: 0.9em;
    font-weight:100;
    font-family: sans;
    transition: all 0.3s ease;
    border-radius: 5px;
    color:#FFF;
    background-color:#10ac84b8;
}
select[name='pass_order_to_tech']{
    width: 355px;
    height: 38px;
    margin: 5px;
    outline: none;
    border: 1px solid #BDC7D8;
    border-radius: 8px;
    position: relative;
    padding:10px;
    text-transform: uppercase;
}
.accept-order:hover,
.pass_order_to_tech:hover,
.pass_order_to_tech_internal:hover,
.tech_accept_order:hover,
.tech_arrived:hover,
.tech_accept_passed_order:hover,
.order_completed:hover,
.order_completed_internal:hover,
.handed_repair_order_item:hover
{
    background-color: #10ac84;
    cursor: pointer;
}
.cancel-order,
.reject-order,
.cancel-order_internal,
.reject-order_internal,
.cancel_pass_order_to_tech,
.cancel_pass_order_to_tech_internal,
.tech_withdraw_order,
.tech_reject_passed_order,
.order_undone,
.order_undone_internal,
.move_order_to_pre_issues
{
    background-color:#ff6b6b!important;
}
.cancel-order:hover,
.reject-order:hover,
.cancel-order_internal:hover,
.reject-order_internal:hover,
.cancel_pass_order_to_tech:hover,
.cancel_pass_order_to_tech_internal:hover,
.tech_withdraw_order:hover,
.tech_reject_passed_order:hover,
.order_undone:hover,
.order_undone_internal:hover,
.move_order_to_pre_issues:hover
{
    background-color:#fb4f4f!important;
    cursor: pointer;
}
.ex_to_in_order{
    background-color:darkblue!important;

}
.ex_to_in_order:hover{
    background-color:#10ac84!important;
    cursor: pointer;
}
.empty-results{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #fff;
    height: 100%;
    position: relative;
    top:275px
}
.empty-results h1{
    color:red;
    text-transform: uppercase;
}
.step-caption{
    width: 270px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    height: 24px;
    position: relative;
    top: 5px;
    line-height: 29px;
    margin-left: 39%;
    border-radius: 5px;
    margin-top: 25px;
    text-shadow: 0px 4px 3px #eee;
    background-color: #fff;

}
.step-caption h1 {
    color: #000;
    text-transform: uppercase;
}
.step-caption p{
    color: #214fb9;
    display: initial;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 17px;
}
#step-0,#step-1,#step-2,#step-3,#step-4,#step-5,#step-6,#step-7,#step-8,#step-9{
    background-color: #D93025;
    color: #fff;
    padding: 2px 6px;
    border-radius: 34px;
    margin: 5px;
    font-family: monospace;
    border: 1px solid rgba(0, 0, 0, .1);
    text-shadow: 0px 3px 8px rgb(0,0,0.25);
}
#step-4{
    background-color: #e7a048;

}
#step-0-g,#step-1-g,#step-2-g,#step-3-g,#step-4-g,#step-5-g,#step-6-g,#step-7-g,#step-8-g,#step-9-g{
    background-color: #2bb74f;
    color: #fff;
    padding: 2px 6px;
    border-radius: 34px;
    margin: 5px;
    font-family: monospace;
    border: 1px solid rgba(0, 0, 0, .1);
    text-shadow: 0px 3px 8px rgb(0,0,0.25);
    display:none;
}
#step-5-g,#step-6-g,#step-7-g,#step-8-g,#step-9-g{
    background-color:#2751af;
}
/*########################################## End dashboard external_repair_services/##################################################*/
/*########################################## St dashboard internal_repairs/##################################################*/
#step-0-int,#step-1-int,#step-2-int,#step-3-int,#step-4-int,#step-5-int,#step-6-int,#step-7-int{
    background-color: #D93025;
    color: #fff;
    padding: 2px 6px;
    border-radius: 34px;
    margin: 5px;
    font-family: monospace;
    border: 1px solid rgba(0, 0, 0, .1);
    text-shadow: 0px 3px 8px rgb(0,0,0.25);
}
button[name='add-new-internal-repair-order']{
    /*
    background-color: #008FB6;;
    border-radius: 4px;
    border: 1px solid #565656;
    color: #FFF!important;
    position: relative;
    text-decoration: none;
    text-shadow: #008FB6 0 1px 0;
    transition: background .15s;
    cursor: pointer;
    padding: 10px;
    font-size: 1em;
    text-transform: uppercase;
    margin: auto;
    outline:none;
    left:490px;
    margin-bottom: 15px;
*/
    cursor: pointer;
    background-color: #008FB6;
    margin-top: 20px;
    transition: 0.3s ease;
    color: #FFF;
    padding: 10px 30px;
    text-transform: uppercase;
    border-radius: 3px;
    text-shadow:0px 3px 8px rgba(255, 255, 255, 0.63);
    outline:none;
    position: relative;
    left: 503px;
}
button[name='add-new-internal-repair-order']:hover{
    /*
    background: linear-gradient(#29A775,#29A775);
    transition: background 4s;
*/
    background-color:#27ae60;
}
/*########################################## End dashboard internal_repairs/##################################################*/

/*###########################################[ St dashboard  /administration_team]#############################################*/

.administration-options,.technician-options,.customer-support-options,.sales-options,.deliveries-options{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #000;
}
.administration-options button,.technician-options button,.customer-support-options button,.sales-options button,.deliveries-options button{
    margin: 10px;
    outline: none;
    background-color:#008FB6;
    transition: 0.3s ease;
    text-transform: uppercase;
    cursor: pointer;
    border-radius:5px ;
    color:#FFF;
}
.administration-options button:hover,.technician-options button:hover,.customer-support-options button:hover,.sales-options button:hover,.deliveries-options button:hover{
    background-color:#008fb6de;
}

.adding-new-administrator,.adding-new-technician,.adding-new-customer-support,.adding-new-sales,.adding-new-deliveries{
    display:block;
    width: 100%;
    background-color: #fff;
    padding: 10px;
}
.adding-new-administrator form{
}
.adding-new-administrator form legend,.adding-new-technician form legend,.adding-new-customer-support form legend,.adding-new-sales form legend,.adding-new-deliveries form legend{
    position: relative;
    background-color:#00addc;
    color:#fff;
    border-bottom: 4px solid #000;
    text-align: center;
    text-transform: uppercase;
    width: 250px;
    top:-20px;
    font-size: 1.2em
}
.adding-new-administrator form select,.adding-new-technician form select,.adding-new-customer-support form select,.adding-new-sales form select,.adding-new-deliveries form select{
    width: 170px;
    height: 30px;
    border: 1px solid #DDD;
    outline: none;
    border-radius:5px;
}

.adding-new-administrator form input,.adding-new-technician form input,.adding-new-customer-support form input,.adding-new-sales form input,.adding-new-deliveries form input{
    display: block;
    margin-left: 30%;
    width: 40%;
    height: 40px;
    background-color: #F4F5F5;
    position: relative;
    outline: none;
    border: 1px solid #EEE;
    border-radius: 2px;
    margin-top: 20px;
}
.adding-new-administrator form input[type="file"],.adding-new-technician form input[type="file"],.adding-new-customer-support form input[type="file"],.adding-new-sales form input[type="file"],.adding-new-deliveries form input[type="file"]{
    border:none;
}

.adding-new-administrator form label,.adding-new-technician form label,.adding-new-customer-support form label,.adding-new-sales form label,.adding-new-deliveries form label{
    color:#000;
}
.adding-new-administrator form button[name="add-admin"],.adding-new-technician form button[name="add-tech"],.adding-new-customer-support form button[name="add-cs"],.adding-new-sales form button[name="add-sm"],.adding-new-deliveries form button[name="add-dlv"]{
    cursor: pointer;
    background-color: #008FB6;
    margin-top: 20px;
    transition: 0.3s ease;
    color: #FFF;
    padding: 10px 30px;
    text-transform: uppercase;
    border-radius: 3px;
    text-shadow:0px 3px 8px rgba(255, 255, 255, 0.63);
    outline:none;
}

.adding-new-administrator form button[name="add-admin"]:hover,.adding-new-technician form button[name="add-tech"]:hover,.adding-new-customer-support form button[name="add-cs"]:hover,.adding-new-sales form button[name="add-sm"]:hover,.adding-new-deliveries form button[name="add-dlv"]:hover{
    background-color:#27ae60;
}

.administration_team_li-sub-side{
    width: 70%;
    background-color: #dfe6e9;
    margin-left: 15%;
    border-radius: 2px;
    list-style-type: none;
    padding:20px;
    font-size: 16px;
    text-transform: capitalize;
    font-weight: 700;

}
.administration_team_li-sub-side:nth-last-of-type(odd){
    border-top:3px solid #2ecc71
}
.administration_team_li-sub-side:nth-last-of-type(even){
    border-top:3px solid #008FB6;
}
.administration_team_li-sub-side:hover{
    border-top:3px solid #000;
    cursor: pointer;
}
.administration_team-sub-side{
    background-color: #dfe6e9;
    display:none;
    width: 100%;
    list-style-type: none;
    border-radius: 5px;
}
.administration_team-sub-side li{

}
.administration_team_list {
    width: 70%;
    height:40px;
    justify-content: center;
    background-color: #E9EBEE;
    margin-left: 15%;
    position: relative;
    border-radius: 5px;
    top: 40px;
    margin-bottom: 17px;

}
.administration_team_list table {
    border-collapse: collapse;
    width: 60%;
    margin-left: 20%;
    position: absolute;
    top: 11px;


}
.administration_team_list span:nth-of-type(odd){

}
.administration_team_list span:nth-of-type(even){

}
.administration_team_list table th {
    text-align: center;
    color: #000;
    font-weight: bolder;
    text-transform: uppercase;
    transition: all 0.2s ease;
    font-size: 14px;
}

.administration_team_list table  td {
    text-align: center;
    font-size: 12px;
    color: #000;
    font-weight: bolder;
}
.admin-list-picard{
    width: 155px;
    height: 100px;
    position: relative;
    cursor: pointer;
    padding: 9px;
    border-radius: 18px;
}
.admin-list-contract
{
    width: 83px;
    height: 127px;
    position: relative;
    cursor: pointer;
    padding: 6px;
}

.admin-cv{
    width: 20px;
    position: relative;
}
.admin-cv i{
    color:#000;
    font-size: 1.6em;
    padding:10px;
}
.pdf-source{
    width: 235px;
    height: 273px;
    position: relative;
    top: -333px;
    left: 295px;
}
#admin-photo{
    display: contents;
}
.admin-list-photo-div{
    background-size: cover;
    background-position: center center;
    width: 50px;
    height: 50px;
    opacity: 1;
    visibility: inherit;

    border-radius: 50%;
    background-color: #FFF;
    cursor: pointer;
    margin:10px;
    outline: 3px solid #DDD;
}
#admin-id{
    color: blue;
    position: relative;

}
#admin-id h4{
    color:#000;
    text-transform: uppercase;
}
#admin_name{
    color: blue;
    position: relative;

}
#admin_name h4{
    color:#000;
    text-transform: uppercase;

}
#admin-address{
    color: blue;
    position: relative;
}
#admin-address h4 {
    color:#000;
}
#admin_personal_phonenumber{
    color: blue;
    position: relative;
}
#admin_personal_phonenumber h4{
    color:#000;
}
#admin_work_phonenumber{
    color: blue;
    position: relative;
}
#admin_work_phonenumber h4 {
    color:#000
}
#admin_email{
    color: blue;
    position: relative;
}
#admin_email h4{
    color:#000;
}
#admin-register{
    color: blue;
    position: relative;
}
#admin-register h4{
    color:#000;
}
#admin_salary{
    color: blue;
    position: relative;
}
#admin_salary h4{
    color:#000;
}
#offline,#online{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #FA3E3E;
    position: relative;
    left: -194px;
    top: -154px;
    border: 1px solid rgba(0, 0, 0, .1);
    box-sizing: border-box;
}
#online{
    background-color: green!important;

}
#admin-owner{
    color: #2ecc71;
    text-transform: uppercase;
    position: relative;
    left: -163px;
    top: -175px;
    font-weight: 900;
    font-size: 1.5em;
    font-family: montserrat-extra-light;

}
.display-photo{
    background-color: #000;
    width: 80%;
    margin-left: 10%;
    height: 400px;
    background-image: url(/../img/symbols/error-man.png);
    background-repeat: no-repeat;


}


/*###########################################[ End dashboard  /administration_team]#############################################*/




/***************************************************[St /external_repair_services/add_new_online_repair]*************************************************************/
.adding-new-repair-order-oba{
    display:block;
    width: 100%;
    background-color: #fff;
    padding: 10px;

}
.adding-new-repair-order-oba form input{
    display: block;
    margin-left: 30%;
    width: 40%;
    height: 40px;
    background-color: #F4F5F5;
    position: relative;
    outline: none;
    border: 1px solid #EEE;
    border-radius: 2px;
    margin-top: 20px;
}
.adding-new-repair-order-oba form select{
    width: 400px;
    height: 35px;
    margin-bottom: 20px;
    outline: none;
    border: 1px solid #BDC7D8;
    border-radius: 8px;
    margin-right: 15px;
    display: block;
    position: relative;
    left: 470px;
    margin-top: 15px;
}


button[name='add-new-external-repair-order-oba']{
    /*
    background-color: #008FB6;;
    border-radius: 4px;
    border: 1px solid #565656;
    color: #FFF!important;
    position: relative;
    text-decoration: none;
    text-shadow: #008FB6 0 1px 0;
    transition: background .15s;
    cursor: pointer;
    padding: 10px;
    font-size: 1em;
    text-transform: uppercase;
    margin: auto;
    outline:none;
    left:490px;
    margin-bottom: 15px;
*/
    cursor: pointer;
    background-color: #008FB6;
    margin-top: 20px;
    transition: 0.3s ease;
    color: #FFF;
    padding: 10px 30px;
    text-transform: uppercase;
    border-radius: 3px;
    text-shadow:0px 3px 8px rgba(255, 255, 255, 0.63);
    outline:none;
    position: relative;
    left: 503px;
}
button[name='add-new-external-repair-order-oba']:hover{
    /*
    background: linear-gradient(#29A775,#29A775);
    transition: background 4s;
*/
    background-color:#27ae60;
}
.evname-oba{
    color:red;
    position: absolute;
    left: 961px;
    top: 100px;
}
.evnumber-oba{
    color:red;
    position: absolute;
    left: 961px;
    top: 160px;
}
.evemail-oba{
    color:red;
    position: absolute;
    left: 961px;
    top: 220px;
}
.evaddress-oba{
    color:red;
    position: absolute;
    left: 961px;
    top:280px;
}
.evcity-oba{
    color:red;
    position: absolute;
    left: 961px;
    top: 330px;
}


#order-client-name-counter-oba{

    position: absolute;
    left: 905px;
    top: 100px;
    z-index: 1;
    font-size: 15px;
}
#order-client-phone-counter-oba{
    position: absolute;
    left: 905px;
    top: 160px;
    z-index: 1;
    font-size: 15px;

}
#order-client-email-counter-oba{
    position: absolute;
    left: 905px;
    top: 220px;
    z-index: 1;
    font-size: 15px;

}
#order-client-address-counter-oba{
    position: absolute;
    left: 905px;
    top: 280px;
    z-index: 1;
    font-size: 15px;

}
.iphone-model,.ipad-model,.samsung-model{
}
.check_A{
    left: 900px;
    top: 400px;
    position: absolute;
    cursor: pointer;
    background-color: #008FB6;
    margin-top: 20px;
    transition: 0.3s ease;
    color: #FFF;
    text-transform: uppercase;
    border-radius: 3px;
    text-shadow:0px 3px 8px rgba(255, 255, 255, 0.63);
    outline:none;

}
.check_A:hover {
    background-color: #27ae60;
}
#check-validity-oba-A{
    position: absolute;
    left: 1009px;
    top: 370px;
    text-transform: uppercase;
    font-weight: bold;
}

.check_B{
    left: 900px;
    top: 550px;
    position: absolute;
    cursor: pointer;
    background-color: #008FB6;
    margin-top: 20px;
    transition: 0.3s ease;
    color: #FFF;
    text-transform: uppercase;
    border-radius: 3px;
    text-shadow:0px 3px 8px rgba(255, 255, 255, 0.63);
    outline:none;


}
.check_B:hover {
    background-color: #27ae60;
}
#check-validity-oba-B{
    position: absolute;
    left: 1009px;
    top:520px;
    text-transform: uppercase;
    font-weight: bold;
}
/***************************************************[end /external_repair_services/add_new_online_repair]*************************************************************/



























































































.color-group{
    color:#0984e3;
    color:#29A775;
    color:#585351;
    color:#7AC144;
    color:#484645;
    color:#565656;
    color:#5965fb;
    color:#27AE60;
    color:#676464;
    color:#F4F5F5;
    color:#312b2b;
}






html{
    scroll-behavior: smooth;
}


.ng-scope{
    display: flex;
    justify-content: center;
}




.loader,
.loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
}
.loader {
    margin: 280px auto;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    /*
    border-top: 1.1em solid rgba(255, 255, 255, 0.2);
    border-right: 1.1em solid rgba(255, 255, 255, 0.2);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
    border-left: 1.1em solid #ffffff;
    */
    border-top: 1.1em solid #3a46cd;
    border-right: 1.1em solid #3a46cd;
    border-bottom: 1.1em solid #3a46cd;
    border-left: 1.1em solid #ffffff;


    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
#loadingDiv {
    position:absolute;;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:#e6e8ff;
    z-index: 2;
}