body {
    direction: rtl;
    font-family: 'Cairo', sans-serif;
    padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
    padding-top: env(safe-area-inset-top); /* iOS 11.2 */
}

.ui-widget.ui-widget-content {
    border: none;
}

/***********************************************/
/*************** LOGIN SCREEN *****************/
/**********************************************/
#loginPage {
    text-align: center;
}

.loginLogo {
    margin-top: 10%;
    width: 60%;
}

#loginForm {
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overflow: scroll
}

#loginForm .btn-floating {
    background-color: #fff !important;
    box-shadow: 0 0 10px 1px #fbf4f5;
    margin-top: 10px;
}

#loginForm .btn-floating i {
    color : #208888 !important
}

#loginForm input:focus, #registerPage input:focus {
    box-shadow: 0 1px 10px 0px #f3f3f3;
}

#loginForm .input-field, #registerPage .input-field {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

#loginForm .input-field input, #registerPage .input-field input  {
    color: #5f5f5f !important;
    border-bottom: 1px solid #ece9e9 !important;
    box-shadow: unset !important;
    font-size: 0.8em;
    font-weight: 700;
}

#loginForm .prefix, #registerPage .prefix {
    width: 3rem;
    font-size: 1.3rem;
    top: 0.75em;
    color: #f4759f;
}

.input-field.col .prefix ~ label, .input-field.col .prefix ~ .validate ~ label {
    width: calc(100% - 1.5rem - 1.5rem);
}

#loginForm h5 {
    letter-spacing: 1px;
    font-weight: 600;
    color: #f4759f;
    margin-top: 23px;
}

#loginForm .loginBtn, #registerPage .loginBtn {
    font-size: 0.8em;
    color: #fff;
    margin-top: 0.5em;
    margin-bottom: 2em;
    border-radius: 12px;
    background: #f4759f;
    font-weight: 700;
    box-shadow: rgba(146, 0, 85, 0.0784313725490196) 0px 5px 15px 1px;
    box-shadow: 0 4px 10px 1px rgba(244, 117, 159, 0.82), 0 0px 4px rgba(244, 117, 159, 0.78);
}

#loginForm .showPass {
    width: 0;
    right: 2em;
    color: #ccc;
    font-size: 1rem;
    top: 1.2em;
}

.newMemberParagraph {
    color: #ccc;
    font-weight: 600;
}

#checkWorkerLogin {
    margin: 0
}

#checkWorkerLogin span {
    font-weight: 700;
    color: #ccc;
}

#loginForm .select-wrapper ul {
    min-height: 30px;
    height: unset;
}

#loginForm .select-wrapper ul li{
    min-height: 30px;
}

#loginForm .select-wrapper ul li img{
    height: 20px;
    width: 25px;
    margin: 5px 15px;
}

#loginForm .select-wrapper ul li span{
    color: #5f5f5f !important;
    padding: 5px;
    line-height: unset;
    font-size: 0.9em;
}

#loginForm .select-wrapper svg{
    display: none
}

.wrap-login100 {
    background: transparent
}
.input100 {
    color: #666666;
    font-size: 0.8em;
}

#mainPage {
    height: 100%
}

#modalAddLocation {
    top: 5% !important;
    height: 90%;
    min-height: 90%;
}

.reDesignselect {
    border: none;
    color: #565656 !important;
    border-bottom: 1px solid #9e9e9e;
    font-size: 0.8em;
    background-color: unset;
    outline: none;
}
.collapsible-header img {
    width: 30px;
    height: 30px;
}

.toast {
    background-color: #fff;
    color: #323232;
    font-size: 0.9rem;
    font-weight : 700;
}

.carousel-item img {
    height: 100%;
    margin-bottom: 60px;
}
.carousel.carousel-slider .carousel-item {
    min-height: unset;
}
.text-primary {
    color: #fff;
}
.timepicker-span-hours .text-primary {
    color: #fff !important
}
.timepicker-text-container {
    color: #ccc
}
.alertify .ajs-body .ajs-content {
    padding : 0;
}
.select-wrapper input.select-dropdown {
    height: 2.2rem;
    font-size: 0.8em;
    border-bottom: 1px solid #e8e8e8;
}
.btn-floating {
    box-shadow: 0 0px 10px 1px #e0e0e0;
    background-color: #fff !important;
}
ul.stepper .step.active::before, ul.stepper .step.done::before {
    background-color: #32d6b6;
}
ul.stepper .step.wrong::before {
    content: '\f00d';
    font-size: 12px;
    font-weight: 700;
    font-family: 'Font Awesome 5 Free';
    background-color: #ee7075 !important;
}
.clientRateSliderDiv label {
    font-size: 0.8rem;
    color: #9e9e9e;
}
ul.stepper .step.done::before {
    color: #32d6b6;
    background: #fff !important;
    content: '\f058';
    font-size: 1.3em;
    font-weight: 700;
    font-family: 'Font Awesome 5 Free';
}
.addBtn {
    font-size: 1em !important;
    padding: 6px 0;
    height: 100%;
    width: 100%;
    color: #32d6b6 !important;
    background: #32d6b6 !important;
    color: #fff !important;
    box-shadow: unset !important;
    border-radius: unset !important;
    margin: 0 !important;
} 

.footerOverlay {
    background: unset !important;
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(51, 51, 51, 0.76)) !important;
    box-shadow: none !important;
}

.headerOverlay {
    background: unset !important;
    background-image: linear-gradient(to top, rgba(245, 246, 252, 0), rgba(51, 51, 51, 0.76)) !important;
    box-shadow: none !important;
}

#modalUserImage {
    width: 11vh;
    height: 11vh;
    border: 3px solid #32d6b6;
    box-shadow: #bae8e4 0px 0px 50px 1px !important;
    display: initial;
    padding: 2px
}
.ajs-close {
    display: none !important
}
[type="radio"]:not(:checked)+span, [type="radio"]:checked+span {
    padding-left: 25px;
    padding-right: 25px;
}
@media only screen and (max-width: 992px) {
    .modal {
        width: 90%;
    }
}
#manageNewReqsTable_filter,#manageAcceptedReqsTable_filter,#manageSpecialReqsTable_filter,#manageClientReqsTable_filter {
    display: none
}
#materialbox-overlay {
    right: -36px;
    opacity: 0 !important;
}
.sidenav li>a {
    height: 40px;
}
.sidenav .user-view .name {
    margin-top: 2px;
}
.sidenav .user-view .circle {
    border-radius: 50%;
    padding: 2px;
    box-shadow: 0px 0px 10px 1px #bae8e4;
    border: 2px solid #32d6b6;
}
.active .collapsible-header {
    box-shadow: #efefef 0px 5px 5px 1px;
}
.collapsible-body {
    padding: 1em
}
.collapsible-body .row {
    margin-bottom: 0
}
.collapsible-header span {
    margin-top: 5px;
    font-size: 1em;
    margin-right: 10px;
    margin-left: 10px;
}
.collapsible-header {
    padding: 0.5em 1em 0.5em 1em;
}
.servImg {
    width: 7vh;
    height: 7vh;
    padding: 5px;
    border: 3px solid #f4759f !important;
    border-radius: 50%;
}
.servDiv p {
    font-size:0.8em;
}
.servDiv {
    text-align: center;
    margin-top: 10px;
}
.logoTopRight {
    width: 65px;
    float: right;
    margin-right: 20px;
    box-shadow: 0 1px 10px 2px #ccc;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-top: 40px;
}
.loginSignupForgetBtn {
    box-shadow: 0 0px 10px 1px #e2e2e2;
    font-weight: 700;
}
#loginPage,#forgetPassPage,#registerPage,#langPage {
    /* background: radial-gradient(#d2e0e2,#e2e5e5,#e6dbdf,#cad9da); */
    background: linear-gradient(#ced5d6,#e2e5e5,#e6dbdf,#ced5d6);
}
/* [type="checkbox"]+span:not(.lever):before, [type="checkbox"]:not(.filled-in)+span:not(.lever):after {
    border: 2px solid #fff;
} */
.serviceCenterDiv {
    font-weight: 700;
    font-size: 0.9em;
    position: absolute;
    top: 40%;
    text-align: center;
    width: 100%;
    color: #fff;
}
.fixed-action-btn {
    position: fixed;
    right: 50%;
    margin-right: -25px;
    bottom: 2%;
    padding-top: 0;
    z-index: 997;
}
.btn-floating.btn-large i {
    line-height: 46px;
    color: #fff;
    position: absolute;
    right: 0;
    margin-right: -3px;
    font-size: 3em;
}
.btn-floating.btn-large {
    width: 50px;
    height: 50px;
}
.collection a.collection-item {
    padding: 2vh;
    color: #9c9898;
    font-weight: 300;
}
.input-field.col label {
    left: 0;
}
textarea:focus, input:focus {
    border-color: #32d6b6 !important;
}
.input-field>label {
    text-shadow: none
}
.input-field>label:not(.label-icon).active {
    transform: translateY(-14px) scale(1);
}
.alertify-notifier.ajs-center {
    margin-left: -130px
}
.alertify-notifier {
    width: 260px
}
.alertify .ajs-footer .ajs-buttons.ajs-primary {
    text-align: left;
}
.alertify .ajs-dialog {
    transform: none
}
.alertify .ajs-footer .ajs-buttons .ajs-button.ajs-ok {
    background: transparent;
    color: #32d6b6 !important;
    font-size: 0.9em;
    box-shadow : none !important
}
.alertify .ajs-footer .ajs-buttons .ajs-button.ajs-cancel {
    background: transparent;
    color: #ef4545 !important;
    font-size: 0.9em;
    box-shadow : none !important
}
.alertify .ajs-footer .ajs-buttons .ajs-button {
    min-width: 40px;
    min-height: 25px;
}
.ajs-header {
    display: none
}
.alertify .ajs-commands {
    left: 4px;
}
.btn:hover, .btn-large:hover, .btn-small:hover,.btn {
    background-color: #fff;
    color: #32d6b6;
    font-weight: 700;
    box-shadow: 0 0 10px 1px #eaeaea;
    border-radius: 10px;
    font-size: 0.8em;
}
.previous-step {
    font-size: 0.8em
}
.tabs .tab,.tabs {
    height: 35px;
}
.activeMenu{
    background: #ddf3df;
}

[type="checkbox"]+span:not(.lever) {
    padding-right: 35px;
}
[type="checkbox"]+span:not(.lever):before, [type="checkbox"]:not(.filled-in)+span:not(.lever):after {
    right: 0;
}
[type="checkbox"]:checked+span:not(.lever):before {
    border-right: 2px solid #32d6b6;
    border-bottom: 2px solid #32d6b6;
}
.logo
{
  height: 15vh;
}
.card .card-image .card-title {
    right: 0;
    top: 0;
}
.card .card-content {
    padding: 10px 24px;
}
.card .card-action {
    padding: 0.5vh 24px;
}
.card.medium {
    height: auto;
    border-radius: 0px 0px 50px 0px;
}
.card .card-title {
    font-size: 1.5em;
}
.card-title {
    z-index: 100;
}
.card {
    margin: .2rem 0 0 0;
    border-top: 1px solid #ccc;
    box-shadow : none;
}
.stadiumDiscount {
    position: absolute;
    top: 50%;
    left: 0;
    color: #fff;
    font-size: 0.6em;
    z-index: 100;
}
.stadiumDiscount span {
    background: #f3f3f3;
    padding: 5px 20px;
    font-weight: 700;
    color: #3acaae;
    border-radius: 0px 0px 10px 0px;
}
.stadiumSize {
    position: absolute;
    top: 10px;
    right: 5px;
    color: #3acaae;
    font-size: 0.6em;
    z-index: 100;
}
.stadiumSize span {
    background: #fff;
    margin-left: 5px;
    border-radius: 0px 0px 10px 0px;
    padding: 0px 5px;
    display: inline-block;
}

.stadiumDistance {
    position: absolute;
    top: 10px;
    left: 5px;
    color: #3acaae;
    font-size: 0.8em;
    z-index: 100;
}
.stadiumDistance span {
    background: #fff;
    margin-left: 5px;
    border-radius: 10px 20px 20px 10px;
    padding: 0px 5px;
}
.stadiumAdd {
    color: #fff;
    z-index: 1;
    position: absolute;
    text-align: center;
    top: 60%;
    right: 42%;
    font-size: 21px;
    font-weight: bold;
}

#bb {
    position: fixed;
    left: 0;
    bottom: 20px;
    width: 100%;
    text-align: center;
 }
.login100-form-title {
    color: #f4759f;
    font-size: 2em;
    font-weight: 700;
    font-family: 'Cairo', sans-serif;
}
.login100-form-title span {
    color: #32d6b6 !important;
}
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {
    background-color: transparent;
}
.progress {
    background-color: #ccc;
    width: 100%;
}
.progress .indeterminate {
    background-color: #fff;
}
.btn-floating i {
    color: #32d6b6;
    font-size: 1.3em;
}
#getCostBtn {
    font-size: 1.2em;
    height: 100px;
    position: fixed;
    top: 60%;
    direction: ltr;
    padding-top: 33px;
    left: 50%;
    margin-left: -50px;
    width: 100px;
    color: #32d6b6;
    border-radius: 50%;
    box-shadow: 0 0px 20px 1px #cccccc42;
}
.btn-flat:focus {
    background-color : transparent;
}
.insetShadow {
    text-shadow: 2px 2px 3px rgba(255,255,255,0.5) !important;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    background-color: #565656 !important;
    color: transparent !important;
    font-weight: 700 !important
}

.insetShadowError {
    text-shadow: 2px 2px 3px rgba(255,255,255,0.5) !important;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    background-color: #ef4545 !important;
    color: transparent !important;
    font-weight: 700 !important
}

.insetShadowSuccess {
    text-shadow: 2px 2px 3px rgba(255,255,255,0.5) !important;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    background-color: #32d6b6 !important;
    color: transparent !important;
    font-weight: 700 !important
}

.insetShadowWhite {
    text-shadow: 2px 2px 3px rgba(255,255,255,0.5) !important;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    background-color: #fff !important;
    color: transparent !important;
    font-weight: 700 !important
}
.header .row,.subheader .row {
    margin-bottom: 0;
    margin-right: -15px;
    margin-left: -15px;
}
.header,.subheader {
    position: fixed;
    width: 100%;
    z-index: 1000;
    top: 0;
    padding: 20px 0px 10px 10px;
    background: #fff;
    /*box-shadow: 0px 0px 10px 2px #cccbcb !important;*/
}
td, th,tr {
    padding: 0;
    border: none
}
.modal .modal-footer {
    text-align: left
}
.wrap-input100 {
    border-bottom : 0;
}
.focus-input100::before {
    background: #3acaae;
}
.focus-input100::after {
    height: 40px;
}
.ajs-message {
    font-family: 'Cairo', sans-serif !important;
}
.alertify-notifier .ajs-message.ajs-error {
    background: #ef4545 !important;
}
.alertify-notifier .ajs-message.ajs-success {
    background: #3acaae !important;
}
textarea,.label-input100,.input100,a,button,.txt2,.txt1,p,i,select,input,span,.alertify .ajs-body .ajs-content,.alertify .ajs-footer .ajs-buttons .ajs-button.ajs-ok,.alertify .ajs-footer .ajs-buttons .ajs-button.ajs-cancel {
    font-family: 'Cairo', sans-serif;
    text-shadow: none;
}
.txt1,.txt2 {
    color: #666666 !important;
}
.login100-social-item {
    color: #fff !important;
    font-weight: 0;
}

.floatAll {
    bottom: 13vh !important;
}
.btn-floating img {
    width: 3vh;
    height: 3vh;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -1.5vh;
    margin-top: -1.5vh;
}
.showCounter {
    position: absolute;
    top: 0;
    right: 25%;
    background: #ef4545;
    border-radius: 50%;
    text-align: center;
    height: 16px;
    font-weight: 700;
    width: 16px;
    border: 1px solid #fff;
    color: #fff;
    font-size: 0.6em;
}
.icon-bar {
    width: 100%;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    box-shadow: #eaeaea 0px 0px 20px 1px;
    z-index: 100;
    background: #fff;
    display: flex;
    padding-right: 5px;
    padding-left: 5px;
    margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
    margin-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */
}
.icon-bar a {
    float: right; /* Float links side by side */
    text-align: center; /* Center-align text */
    width: 25%; /* Equal width (5 icons with 20% width each = 100%) */
    transition: all 0.3s ease; /* Add transition for hover effects */
    font-size: 1em; /* Increased font size */
    padding: 5px 0px 0px 0px;
}

.icon-bar i {
    font-size: 1.2em;
    /* color: #666666 */
}

.icon-bar a p {
    font-size: 0.7em;
    font-weight: 500;
    color: #666666
}

.rowBottom .col {
    padding: 0;
}
#ajaxLoading
{ 
    background: url(../images/ajax-loader.svg) no-repeat center center transparent;
    position: absolute;
    z-index: 3000;
    top: 45%;
    margin-top: -15%;
    right: 50%;
    margin-right: -15%;
    height: 30%;
    width: 30%;
}
.txt2 {
    font-size: 0.7em;
    padding: 10px;
    color: #fff !important;
    border-radius: 50px;
    border: 2px solid #e6e6e6;
    width: 100%;
    text-align: center;
}
.inputLabel {
    /* color : #666666 !important */
}
input {
    color :#a09d9d !important
    
}
.p-b-20 {
    padding-bottom: 2px;
}
.p-t-54 {
    padding-top: 4.5vh;
}
.col-4 {
    padding: 0;
}
#forgetPass,.txt2:hover {
    color: #fff;
    font-weight: 300;
}
#forgetPass {
    font-size: 0.7em;
}

.p-b-31 {
    padding-bottom: 0;
}
.p-t-8 {
    padding-top: 0;
}
.select-wrapper .caret {
    left: 0;
    fill : #fff;
    right: unset !important;
}
#overlaySmall {
    position: absolute; /* Sit on top of the page content */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.56); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}
#overlay {
position: absolute; /* Sit on top of the page content */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0; 
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.53); /* Black background with opacity */
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
}
/**** vertical line ****/
.wrapper {
    position: relative;
    width: 100%;
    height: 9vh;
    margin-top: 20px;
}
.line {
    position: absolute;
    left: 49%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #CCCC99;
    z-index: 1;
}

.wordwrapper {
    text-align: center;
    height: 12px;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: -12px;
    z-index: 2;
}

.word {
    color: #CCCC99;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px;
    font: bold 12px arial,sans-serif;
    background: #fff;
}
/**** vertical line ****/

/* ==================================================
    Preloader
================================================== */

#jpreOverlay,
#jSplashh,#jSplash2 {
    /* background-color: #fff;
    position: fixed; */
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.rotateY {
    -webkit-animation: circle 4s infinite forwards;
    -moz-animation: circle 4s infinite forwards;
    -ms-animation: circle 4s infinite forwards;
    animation: circle 4s infinite forwards;
}

#circle {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -12.5vh;
    margin-top: -12.5vh;
    z-index: 11;
    width: 25vh;
    height: 25vh;
    background: url("../images/lady.png");
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 1;
}

@-webkit-keyframes rotating {
    from {
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
}
@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
  

@-webkit-keyframes circle {
    0% {-webkit-transform: rotateY(0deg);
        -webkit-animation-timing-function: ease-in;
    }
    50% {-webkit-transform: rotateY(180deg);
        -webkit-animation-timing-function: ease-out;
    }
    100% {-webkit-transform: rotateY(0deg);
        -webkit-animation-timing-function: ease-in;
    }
}

@-moz-keyframes circle {
    0% {-moz-transform: rotateY(0deg);
    }
    50% {-moz-transform: rotateY(180deg);
        -moz-animation-timing-function: ease-out;
    }
    100% {-moz-transform: rotateY(0deg);
        -moz-animation-timing-function: ease-in;
    }
}

@-ms-keyframes circle {
    0% {-ms-transform: rotateY(0deg);
        -ms-animation-timing-function: ease-in;
    }
    50% {-ms-transform: rotateY(180deg);
        -ms-animation-timing-function: ease-out;
    }
    100% {-ms-transform: rotateY(0deg);
        -ms-animation-timing-function: ease-in;
    }
}

@-o-keyframes circle {
    0% {-o-transform: rotateY(0deg);
        -o-animation-timing-function: ease-in;
    }
    50% {-o-transform: rotateY(180deg);
        -o-animation-timing-function: ease-out;
    }
    100% {-o-transform: rotateY(0deg);
        -o-animation-timing-function: ease-in;
    }
}

@keyframes circle {
    0% {transform: rotateY(0deg);
        animation-timing-function: ease-in;
    }
    50% {transform: rotateY(180deg);
        animation-timing-function: ease-out;
    }
    100% {transform: rotateY(0deg);
        animation-timing-function: ease-in;
    }
}

.slider .slides,.slider {
    height:100% !important
}
.tab .active {
    background : #fff !important;
}
.tabs .tab a {
    color: #32d6b6;
    padding: 1.5vh 24px;
    font-size: 0.7em;
    text-shadow: none;
    font-weight: 700;
}

#changeLangModal {
    top: unset !important;
}

.tabs .indicator {
    background-color: #f5a7aa;
}
.carousel {
    height:100% !important
}
.carousel .indicators {
    bottom: 12% !important;
}
.carousel .indicators .indicator-item.active {
    background-color: #4e4e4e;
    height: 7px;
    width: 7px;
}
.carousel .indicators .indicator-item {
    height: 5px;
    width: 5px;
}
.carousel .indicators .indicator-item {
    background-color: #ccc;
}
.servicesProvided i {
    color:#3acaae;
    border: 1px solid #ccc;
    padding: 10px;
    background: #f7f6f6;
}
.servicesProvided span {
    font-size: 0.8em;
}
.ticketStadium .input-field {
    direction: ltr;
}
.input-field .prefix {
    left: 0;
    color: #ccc;
    font-size: 1.5em
}
.input-field .prefix ~ input {
    width: 100%
}

.input-field .prefix.active{
    color: #3acaae
}
.registerFields .input-field,.loginFields .input-field {
    padding: 0;
    margin-bottom: 0
}

#profImg,#teamImage {
    width: 10vh;
    border: 3px solid #fff;
    box-shadow: #fff 0px 0px 50px 1px !important;
    display: initial;
}
.profImgDiv {
    position: absolute;
    top: 10vh;
    
}
.profCoverDiv {
    width: 100%;
    height: 25vh;
}
.profCoverImg {
    width: 100%;
    height: 100%;
}
.countDiv span{
    font-weight: 700;
    color: #3acaae
}
.countDiv p{
    font-weight: 700;
    color: #9c9898
}

/********** template loader *********/

.postt {
    width: 100%;
    height: 80px;
}
.postt .row .avatar {
    float: right;
    width: 52px;
    height: 52px;
    background-color: #ccc;
    border-radius: 25%;
    margin: 8px;
    background-image: linear-gradient(90deg, #F4F4F4 0px, rgba(229, 229, 229, 0.8) 40px, #F4F4F4 80px);
    background-size: 600px;
    animation: shine-avatar 2s infinite ease-out;
}
.postt .row .linee {
    float: right;
    width: 100%;
    height: 16px;
    margin-top: 12px;
    border-radius: 7px;
    background-image: linear-gradient(90deg, #F4F4F4 0px, rgba(229, 229, 229, 0.8) 40px, #F4F4F4 80px);
    background-size: 600px;
    animation: shine-lines 2s infinite ease-out;
}
.postt .row .avatar + .linee {
    margin-top: 11px;
    width: 100px;
}
.postt .linee ~ .linee {
    background-color: #ddd;
}

@keyframes shine-lines {
    0% {
        background-position: -100px;
    }
    40%, 100% {
        background-position: 400px;
    }
}
@keyframes shine-avatar {
    0% {
        background-position: -32px;
    }
    40%, 100% {
        background-position: 208px;
    }
}

/**************** Device Ready **************/
/* Portrait layout (default) */
.app {
    position:absolute;             /* position in the center of the screen */
    left:50%;
    top:50%;
    height:50px;                   /* text area height */
    width:225px;                   /* text area width */
    text-align:center;
    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
    margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
                                   /* offset horizontal: half of text area width */
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
    .app {
        background-position:left center;
        padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
        margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
                                      /* offset horizontal: half of image width and text area width */
    }
}

.event {
    border-radius:4px;
    -webkit-border-radius:4px;
    color:#FFFFFF;
    font-size:12px;
    margin:0px 30px;
    padding:2px 0px;
}

.event.listening {
    background-color:#333333;
    display:block;
}

.event.received {
    background-color:#4B946A;
    display:none;
}

@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
 
@-webkit-keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
 
.blink {
    animation:fade 3000ms infinite;
    -webkit-animation:fade 3000ms infinite;
}
#deviceready {
    opacity: 0;
}
/************************************/

@media (max-width: 576px) {
    .wrap-login100 {
        padding-left: 0;
        padding-right: 0;
    }
}

@media only screen and (max-width: 992px){
    .tabs .tab a {
        padding: 10px 12px;
    }
}