{% load static %}

:root {
    --my_base_color: #b3dafa;
    --my_scroll_color: #dddddd;
    --my_secund_color: #e67e22;
    --my_light_color1: #E5F8FF;
    --my_light_color2: #F3F3F3;
    --my_light_color3: #F8FBEF;
    --my_light_color4: #F0EDF4;
    --my_light_color5: #F9E5F3;
    --my_light_color6: #FEEEF5;
    --my_dark_color1: #1e84c6;
    --my_dark_color2: #1e55aa;
    --my_base_alfa: rgba(179,218,250,0.5);
    --my_dark_alfa: rgba(30,132,198,0.5);
    --my_dark_alfa1: rgba(30,132,198,0.75);
    --bgColorMenu : #1d1d27;


    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --duration: .7s;
    --timeOut: .7s;
}
html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    margin: 0;
    padding: 0;
    font-family: "IranSanse", serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}
* {
    font-family: 'IranSanse',sans-serif;
}
.my_wrap {
    overflow: hidden;
    width:100vw;
    height:100vh;
    margin:0 ;
    padding: 0;
    background-color:#fff;
}
.my_header {
    height:7vh;
    background-color:#fff;
    direction: rtl;
    border-radius: 10px 10px 10px 10px;
    margin: 0.5vh 0.5vw;
    box-shadow: rgba(0,0,0,0.35) 3px 3px;

}

.my_search_header{
    height:8vh;
    width:68.5vw;
    margin-bottom:0.5vh;
    background-color:#fff;
    direction: rtl;
    border-radius: 10px 10px 10px 10px;
    margin-right: 25vh;
    margin-left: 25vh;
}
.my_search_service{
    height:8vh;
    width:68.5vw;
    margin-bottom:0.5vh;
    background-color:#fff;
    direction: rtl;
    border-radius: 10px 10px 10px 10px;
    margin-right: 20vh;
    margin-left: 20vh;
}

.my_content {
    width:75vw;
    height:90vh;
    background-color: #fff;
    float:left;
    border-radius: 10px 10px 10px 10px;
    margin: 0.5vh 0.5vw;
    box-shadow: rgba(0,0,0,0.35) 3px 3px;
}
.my_search_content {
    width:68.5vw;
    height:82vh;
    background-color: #fff;
    float:left;
    margin-right:25vh;
    border-radius: 10px 10px 10px 10px;
    margin-left:25vh;
}
.my_sidebar {
    width:23vw;
    height:90vh;
    background-color:#555555;
    float:right;
    border-radius: 10px 10px 10px 10px;
    margin: 0.5vh 0.5vw;
    box-shadow: rgba(0,0,0,0.35) 3px 3px;
}

.my_footer {
    height:8vh;
    margin-top:0.5vh;
    background-color:#0d7963;
    border-radius: 10px 10px 10px 10px;
    margin-right: 0.5vh;
    margin-left: 0.5vh;
}
.my_clear {
    clear:both;
}


body {
    background: #EEE;
    overflow-x:hidden;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

.my_container {
    position: relative;
    margin: 0 auto;
    padding: 50px 0;
    clear: both;
    font-size: 20px;
    font-family:"IranSanse", serif;
}
@media only screen and (min-width: 1200px) {
    .container {
        width: 1210px;
    }
}

@media only screen and (min-width: 960px) and (max-width: 1199px) {
    .container {
        width: 1030px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .container {
        width: 682px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .container {
        width: 428px;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 479px) {
    .container {
        width: 320px;
        margin: 0 auto;
    }
}



.mcd-menu {
    width:23vw;
    height:90vh;
    border-radius: 10px 10px 10px 10px;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
}
.mcd-menu li {
    position: relative;
    /*float:left;*/
}
.mcd-menu li a {
    display: block;
    text-decoration: none;
    padding: 12px 20px;
    color: #777;
    /*text-align: center;
    border-right: 1px solid #E7E7E7;*/

    /* == */
    text-align: right;
    height: 36px;
    position: relative;
    border-bottom: 1px solid #EEE;
    /* == */
}
.mcd-menu li a i {
    /*display: block;
    font-size: 30px;
    margin-bottom: 10px;*/

    /* == */
    float: left;
    font-size: 20px;
    margin: 0 10px 0 0;
    /* == */

}
/* == */
.mcd-menu li a p {
    float: left;
    margin: 0 ;
}
/* == */

.mcd-menu li a strong {
    display: block;
    text-transform: uppercase;
}
.mcd-menu li a small {
    display: block;
    font-size: 10px;
}

.mcd-menu li a i, .mcd-menu li a strong, .mcd-menu li a small {
    position: relative;

    transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -webkit-transition: all 300ms linear;
}
.mcd-menu li:hover > a i {
    opacity: 1;
    -webkit-animation: moveFromTop 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;
    -o-animation: moveFromTop 300ms ease-in-out;
    animation: moveFromTop 300ms ease-in-out;
}
.mcd-menu li:hover a strong {
    opacity: 1;
    -webkit-animation: moveFromLeft 300ms ease-in-out;
    -moz-animation: moveFromLeft 300ms ease-in-out;
    -ms-animation: moveFromLeft 300ms ease-in-out;
    -o-animation: moveFromLeft 300ms ease-in-out;
    animation: moveFromLeft 300ms ease-in-out;
}
.mcd-menu li:hover a small {
    opacity: 1;
    -webkit-animation: moveFromRight 300ms ease-in-out;
    -moz-animation: moveFromRight 300ms ease-in-out;
    -ms-animation: moveFromRight 300ms ease-in-out;
    -o-animation: moveFromRight 300ms ease-in-out;
    animation: moveFromRight 300ms ease-in-out;
}

.mcd-menu li:hover > a {
    color: var(--my_base_color);
}
.mcd-menu li a.active {
    position: relative;
    color: var(--my_base_color);
    border:0;
    /*border-top: 4px solid var(--my_base_color);
    border-bottom: 4px solid var(--my_base_color);
    margin-top: -4px;*/
    box-shadow: 0 0 5px #DDD;
    -moz-box-shadow: 0 0 5px #DDD;
    -webkit-box-shadow: 0 0 5px #DDD;

    /* == */
    border-left: 4px solid var(--my_base_color);
    border-right: 4px solid var(--my_base_color);
    margin: 0 -4px;
    /* == */
}
.mcd-menu li a.active:before {
    content: "";
    position: absolute;
    /*top: 0;
    left: 45%;
    border-top: 5px solid var(--my_base_color);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;*/

    /* == */
    top: 42%;
    left: 0;
    border-left: 5px solid var(--my_base_color);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    /* == */
}

/* == */
.mcd-menu li a.active:after {
    content: "";
    position: absolute;
    top: 42%;
    right: 0;
    border-right: 5px solid var(--my_base_color);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}
/* == */

/*@-webkit-keyframes moveFromTop {*/
/*    from {*/
/*        opacity: 0;*/
/*        -webkit-transform: translateY(200%);*/
/*        -moz-transform: translateY(200%);*/
/*        -ms-transform: translateY(200%);*/
/*        -o-transform: translateY(200%);*/
/*        transform: translateY(200%);*/
/*    }*/
/*    to {*/
/*        opacity: 1;*/
/*        -webkit-transform: translateY(0%);*/
/*        -moz-transform: translateY(0%);*/
/*        -ms-transform: translateY(0%);*/
/*        -o-transform: translateY(0%);*/
/*        transform: translateY(0%);*/
/*    }*/
/*}*/
/*@-webkit-keyframes moveFromLeft {*/
/*    from {*/
/*        opacity: 0;*/
/*        -webkit-transform: translateX(200%);*/
/*        -moz-transform: translateX(200%);*/
/*        -ms-transform: translateX(200%);*/
/*        -o-transform: translateX(200%);*/
/*        transform: translateX(200%);*/
/*    }*/
/*    to {*/
/*        opacity: 1;*/
/*        -webkit-transform: translateX(0%);*/
/*        -moz-transform: translateX(0%);*/
/*        -ms-transform: translateX(0%);*/
/*        -o-transform: translateX(0%);*/
/*        transform: translateX(0%);*/
/*    }*/
/*}*/
/*@-webkit-keyframes moveFromRight {*/
/*    from {*/
/*        opacity: 0;*/
/*        -webkit-transform: translateX(-200%);*/
/*        -moz-transform: translateX(-200%);*/
/*        -ms-transform: translateX(-200%);*/
/*        -o-transform: translateX(-200%);*/
/*        transform: translateX(-200%);*/
/*    }*/
/*    to {*/
/*        opacity: 1;*/
/*        -webkit-transform: translateX(0%);*/
/*        -moz-transform: translateX(0%);*/
/*        -ms-transform: translateX(0%);*/
/*        -o-transform: translateX(0%);*/
/*        transform: translateX(0%);*/
/*    }*/
/*}*/



.mcd-menu li ul,
.mcd-menu li ul li ul {
    list-style: none;
    position: absolute;
    height: auto;
    min-width: 200px;
    padding: 0;
    margin: 0;
    background: #FFF;
    /*border-top: 4px solid var(--my_base_color);*/
    opacity: 0;
    visibility: hidden;
    transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -webkit-transition: all 300ms linear;
    /*top: 130px;*/
    z-index: 1000;

    /* == */
    left:-280px;
    top: 0;
    border-right:  4px solid var(--my_base_color);
    /* == */
}
.mcd-menu li ul:before {
    content: "";
    position: absolute;
    /*top: -8px;
    left: 23%;
    border-bottom: 5px solid var(--my_base_color);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;*/

    /* == */
    top: 25px;
    left: 204px;
    border-left: 5px solid var(--my_base_color);
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    /* == */
}
.mcd-menu li:hover > ul,
.mcd-menu li ul li:hover > ul {
    display: block;
    opacity: 1;
    visibility: visible;
    /*top: 100px;*/

    /* == */
    left:-200px;
    /* == */
}
/*.mcd-menu li ul li {
  float: none;
}*/
.mcd-menu li ul li a {
    padding: 10px;
    text-align: right;


    border-left:1px solid var(--my_base_color);
    border-bottom:1px solid var(--my_base_color);

    /* == */
    height: auto;
    /* == */
}
.mcd-menu li ul li a i {
    font-size: 16px;
    display: inline-block;
    margin: 0 10px 0 0;
}
.mcd-menu li ul li ul {
    left: -230px;
    top: 0;
    border: 0;
    border-right: 4px solid var(--my_base_color);
}
.mcd-menu li ul li ul:before {
    content: "";
    position: absolute;
    top: 15px;
    /*left: -14px;*/
    /* == */
    left: 284px;
    /* == */
    border-left: 5px solid var(--my_base_color);
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
}
.mcd-menu li ul li:hover > ul {
    top: 0;
    left: -280px;
    width: 280px;
}



/*.mcd-menu li.float {
  float: right;
}*/
.mcd-menu li a.search {
    /*padding: 29px 20px 30px 10px;*/
    padding: 10px 10px 15px 10px;
    clear: both;
}
.mcd-menu li a.search i {
    margin: 0;
    display: inline-block;
    font-size: 18px;
}
.mcd-menu li a.search input {
    border: 1px solid #EEE;
    padding: 10px;
    background: #FFF;
    outline: none;
    color: #777;

    /* == */
    width:170px;
    float:left;
    /* == */
}
.mcd-menu li a.search button {
    border: 1px solid var(--my_base_color);
    /*padding: 10px;*/
    background: var(--my_base_color);
    outline: none;
    color: #FFF;
    margin-right: 20px;
    margin-top: 8px;
    /* == */
    float:right;
    padding: 10px 10px 11px 10px;
    /* == */
}
.mcd-menu li a.search input:focus {
    border: 1px solid var(--my_base_color);
}


.search-mobile {
    display:none !important;
    background:var(--my_base_color);
    border-left:1px solid var(--my_base_color);
    border-radius:0 3px 3px 0;
}
.search-mobile i {
    color:#FFF;
    margin:0 !important;
}


/*@media only screen and (min-width: 960px) and (max-width: 1199px) {*/
/*    .mcd-menu {*/
/*        margin-left:10px;*/
/*    }*/
/*}*/

/*@media only screen and (min-width: 768px) and (max-width: 959px) {*/
/*    .mcd-menu {*/
/*        width: 200px;*/
/*    }*/
/*    .mcd-menu li a {*/
/*        height:30px;*/
/*    }*/
/*    .mcd-menu li a i {*/
/*        font-size: 22px;*/
/*    }*/
/*    .mcd-menu li a strong {*/
/*        font-size: 12px;*/
/*    }*/
/*    .mcd-menu li a small {*/
/*        font-size: 10px;*/
/*    }*/
/*    .mcd-menu li a.search input {*/
/*        width: 120px;*/
/*        font-size: 12px;*/
/*    }*/
/*    .mcd-menu li a.search buton{*/
/*        padding: 8px 10px 9px 10px;*/
/*    }*/
/*    .mcd-menu li > ul {*/
/*        min-width:180px;*/
/*    }*/
/*    .mcd-menu li:hover > ul {*/
/*        min-width:180px;*/
/*        left:-200px;*/
/*    }*/
/*    .mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul {*/
/*        min-width:150px;*/
/*    }*/
/*    .mcd-menu li ul li:hover > ul {*/
/*        left:180px;*/
/*        min-width:150px;*/
/*    }*/
/*    .mcd-menu li ul li ul li:hover > ul {*/
/*        left:150px;*/
/*        min-width:150px;*/
/*    }*/
/*    .mcd-menu li ul a {*/
/*        font-size:12px;*/
/*    }*/
/*    .mcd-menu li ul a i {*/
/*        font-size:14px;*/
/*    }*/
/*}*/

/*@media only screen and (min-width: 480px) and (max-width: 767px) {*/

/*    .mcd-menu {*/
/*        width: 50px;*/
/*    }*/
/*    .mcd-menu li a {*/
/*        position: relative;*/
/*        padding: 12px 16px;*/
/*        height:20px;*/
/*    }*/
/*    .mcd-menu li a small {*/
/*        display: none;*/
/*    }*/
/*    .mcd-menu li a strong {*/
/*        display: none;*/
/*    }*/
/*    .mcd-menu li a:hover strong,.mcd-menu li a.active strong {*/
/*        display:block;*/
/*        font-size:10px;*/
/*        padding:3px 0;*/
/*        position:absolute;*/
/*        bottom:0;*/
/*        left:0;*/
/*        background:var(--my_base_color);*/
/*        color:#FFF;*/
/*        min-width:100%;*/
/*        text-transform:lowercase;*/
/*        font-weight:normal;*/
/*        text-align:center;*/
/*    }*/
/*    .mcd-menu li .search {*/
/*        display: none;*/
/*    }*/

/*    .mcd-menu li > ul {*/
/*        min-width:180px;*/
/*        left:70px;*/
/*    }*/
/*    .mcd-menu li:hover > ul {*/
/*        min-width:180px;*/
/*        left:50px;*/
/*    }*/
/*    .mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul {*/
/*        min-width:150px;*/
/*    }*/
/*    .mcd-menu li ul li:hover > ul {*/
/*        left:180px;*/
/*        min-width:150px;*/
/*    }*/
/*    .mcd-menu li ul li ul li > ul {*/
/*        left:35px;*/
/*        top: 45px;*/
/*        border:0;*/
/*        border-top:4px solid var(--my_base_color);*/
/*    }*/
/*    .mcd-menu li ul li ul li > ul:before {*/
/*        left:30px;*/
/*        top: -9px;*/
/*        border:0;*/
/*        border-bottom:5px solid var(--my_base_color);*/
/*        border-left:5px solid transparent;*/
/*        border-right:5px solid transparent;*/
/*    }*/
/*    .mcd-menu li ul li ul li:hover > ul {*/
/*        left:30px;*/
/*        min-width:150px;*/
/*        top: 35px;*/
/*    }*/
/*    .mcd-menu li ul a {*/
/*        font-size:12px;*/
/*    }*/
/*    .mcd-menu li ul a i {*/
/*        font-size:14px;*/
/*    }*/

/*}*/

/*@media only screen and (max-width: 479px) {*/
/*    .mcd-menu {*/
/*        width: 50px;*/
/*    }*/
/*    .mcd-menu li a {*/
/*        position: relative;*/
/*        padding: 12px 16px;*/
/*        height:20px;*/
/*    }*/
/*    .mcd-menu li a small {*/
/*        display: none;*/
/*    }*/
/*    .mcd-menu li a strong {*/
/*        display: none;*/
/*    }*/
/*    .mcd-menu li a:hover strong,.mcd-menu li a.active strong {*/
/*        display:block;*/
/*        font-size:10px;*/
/*        padding:3px 0;*/
/*        position:absolute;*/
/*        bottom:0px;*/
/*        left:0;*/
/*        background:var(--my_base_color);*/
/*        color:#FFF;*/
/*        min-width:100%;*/
/*        text-transform:lowercase;*/
/*        font-weight:normal;*/
/*        text-align:center;*/
/*    }*/
/*    .mcd-menu li .search {*/
/*        display: none;*/
/*    }*/

/*    .mcd-menu li > ul {*/
/*        min-width:180px;*/
/*        left:70px;*/
/*    }*/
/*    .mcd-menu li:hover > ul {*/
/*        min-width:180px;*/
/*        left:50px;*/
/*    }*/
/*    .mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul {*/
/*        min-width:150px;*/
/*    }*/
/*    .mcd-menu li ul li:hover > ul {*/
/*        left:180px;*/
/*        min-width:150px;*/
/*    }*/
/*    .mcd-menu li ul li ul li > ul {*/
/*        left:35px;*/
/*        top: 45px;*/
/*        border:0;*/
/*        border-top:4px solid var(--my_base_color);*/
/*    }*/
/*    .mcd-menu li ul li ul li > ul:before {*/
/*        left:30px;*/
/*        top: -9px;*/
/*        border:0;*/
/*        border-bottom:5px solid var(--my_base_color);*/
/*        border-left:5px solid transparent;*/
/*        border-right:5px solid transparent;*/
/*    }*/
/*    .mcd-menu li ul li ul li:hover > ul {*/
/*        left:30px;*/
/*        min-width:150px;*/
/*        top: 35px;*/
/*    }*/
/*    .mcd-menu li ul a {*/
/*        font-size:12px;*/
/*    }*/
/*    .mcd-menu li ul a i {*/
/*        font-size:14px;*/
/*    }*/

/*}*/




body {
    background: #EEE;
    overflow-x:hidden;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

.container {
    position: relative;
    margin: 0 auto;
    padding: 50px 0;
    clear: both;
}
@media only screen and (min-width: 1200px) {
    .container {
        width: 1210px;
    }
}

@media only screen and (min-width: 960px) and (max-width: 1199px) {
    .container {
        width: 1030px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .container {
        width: 682px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .container {
        width: 428px;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 479px) {
    .container {
        width: 320px;
        margin: 0 auto;
    }
}



.mcd-menu-H {
    width: 100%;
    height: 100%;
    border-radius: 10px 10px 10px 10px;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    direction: rtl;
    float: right;
    display: flex;
}

.mcd-menu-H li {
    position: relative;
    /*float:left;*/
}
.mcd-menu-H li a {
    display: block;
    text-decoration: none;
    padding: 12px 20px;
    color: #777;
    /*text-align: center;
    border-right: 1px solid #E7E7E7;*/

    /* == */
    text-align: right;
    height: 36px;
    width: 9vw;
    position: relative;
    border-right: 1px solid #EEE;
    /* == */
}
.mcd-menu-H li a i {
    /*display: block;
    font-size: 30px;
    margin-bottom: 10px;*/

    /* == */
    float: left;
    font-size: 20px;
    margin: 0 0 0 0;
    /* == */

}
/* == */
.mcd-menu-H li a p {
    float: left;
    margin: 0 ;
}
/* == */

.mcd-menu-H li a strong {
    display: block;
    font-size: 1.2rem;
}
.mcd-menu-H li a small {
    display: block;
    font-size: 0.6rem;
}

.mcd-menu-H li a i, .mcd-menu-H li a strong, .mcd-menu-H li a small {
    position: relative;
    transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -webkit-transition: all 300ms linear;
}
.mcd-menu-H li:hover > a i {
    opacity: 1;
    -webkit-animation: moveFromTop 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;
    -o-animation: moveFromTop 300ms ease-in-out;
    animation: moveFromTop 300ms ease-in-out;
}
.mcd-menu-H li:hover a strong {
    opacity: 1;
    -webkit-animation: moveFromBottom 300ms ease-in-out;
    -moz-animation: moveFromBottom 300ms ease-in-out;
    -ms-animation: moveFromBottom 300ms ease-in-out;
    -o-animation: moveFromBottom 300ms ease-in-out;
    animation: moveFromBottom 300ms ease-in-out;
}
.mcd-menu-H li:hover a small {
    opacity: 1;
    -webkit-animation: moveFromTop 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;
    -o-animation: moveFromTop 300ms ease-in-out;
    animation: moveFromTop 300ms ease-in-out;
}

.mcd-menu-H li:hover > a {
    color: var(--my_base_color);
}
.mcd-menu-H li a.active {
    position: relative;
    color: var(--my_base_color);
    border:0;
    /*border-top: 4px solid var(--my_base_color);
    border-bottom: 4px solid var(--my_base_color);
    margin-top: -4px;*/
    box-shadow: 0 0 5px #DDD;
    -moz-box-shadow: 0 0 5px #DDD;
    -webkit-box-shadow: 0 0 5px #DDD;

    /* == */
    border-left: 4px solid var(--my_base_color);
    border-right: 4px solid var(--my_base_color);
    margin: 0 -4px;

    /* == */
}
.mcd-menu-H li a.active:before {
    content: "";
    position: absolute;
    /*top: 0;
    left: 45%;
    border-top: 5px solid var(--my_base_color);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;*/

    /* == */
    top: 42%;
    left: 0;
    border-left: 5px solid var(--my_base_color);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    /* == */
}

/* == */
.mcd-menu-H li a.active:after {
    content: "";
    position: absolute;
    top: 42%;
    right: 0;
    border-right: 5px solid var(--my_base_color);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}
/* == */

@-webkit-keyframes moveFromTop {
    from {
        opacity: 0;
        -webkit-transform: translateY(200%);
        -moz-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -o-transform: translateY(200%);
        transform: translateY(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
        transform: translateY(0%);
    }
}
@-webkit-keyframes moveFromBottom {
    from {
        opacity: 0;
        -webkit-transform: translateY(-200%);
        -moz-transform: translateY(-200%);
        -ms-transform: translateY(-200%);
        -o-transform: translateY(-200%);
        transform: translateY(-200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
        transform: translateY(0%);
    }
}
@-webkit-keyframes moveFromLeft {
    from {
        opacity: 0;
        -webkit-transform: translateX(200%);
        -moz-transform: translateX(200%);
        -ms-transform: translateX(200%);
        -o-transform: translateX(200%);
        transform: translateX(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}
@-webkit-keyframes moveFromRight {
    from {
        opacity: 0;
        -webkit-transform: translateX(-200%);
        -moz-transform: translateX(-200%);
        -ms-transform: translateX(-200%);
        -o-transform: translateX(-200%);
        transform: translateX(-200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}



.mcd-menu-H li ul,
.mcd-menu-H li ul li ul {
    list-style: none;
    position: absolute;
    height: auto;
    min-width: 200px;
    padding: 0;
    margin: 0;
    background: #FFF;
    /*border-top: 4px solid var(--my_base_color);*/
    opacity: 0;
    visibility: hidden;
    transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -webkit-transition: all 300ms linear;
    /*top: 130px;*/
    z-index: 1000;

    /* == */
    left:-280px;
    top: 0;
    border-right:  4px solid var(--my_base_color);
    /* == */
}
.mcd-menu-H li ul:before {
    content: "";
    position: absolute;
    /*top: -8px;
    left: 23%;
    border-bottom: 5px solid var(--my_base_color);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;*/

    /* == */
    /*top: 25px;*/
    left: 204px;
    border-left: 5px solid var(--my_base_color);
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    /* == */
}
.mcd-menu-H li:hover > ul,
.mcd-menu-H li ul li:hover > ul {
    display: block;
    opacity: 1;
    visibility: visible;
    /*top: 100px;*/

    /* == */
    left:-200px;
    /* == */
}
/*.mcd-menu-H li ul li {
  float: none;
}*/
.mcd-menu-H li ul li a {
    padding: 10px;
    text-align: right;
    border: 0;
    border-bottom: 1px solid #EEE;

    /* == */
    height: auto;
    /* == */
}
.mcd-menu-H li ul li a i {
    font-size: 2rem;
    display: inline-block;
    margin: 0 10px 0 0;
}
.mcd-menu-H li ul li ul {
    left: -230px;
    top: 0;
    border: 0;
    border-right: 4px solid var(--my_base_color);
}
.mcd-menu-H li ul li ul:before {
    content: "";
    position: absolute;
    /*top: 15px;*/
    /*left: -14px;*/
    /* == */
    left: 204px;
    /* == */
    border-left: 5px solid var(--my_base_color);
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
}
.mcd-menu-H li ul li:hover > ul {
    top: 0;
    left: -200px;
}



/*.mcd-menu-H li.float {
  float: right;
}*/
.mcd-menu-H li a.search {
    /*padding: 29px 20px 30px 10px;*/
    padding: 10px 10px 15px 10px;
    clear: both;
}
.mcd-menu-H li a.search i {
    margin: 0;
    display: inline-block;
    font-size: 18px;
}
.mcd-menu-H li a.search input {
    border: 1px solid #EEE;
    padding: 10px;
    background: #FFF;
    outline: none;
    color: #777;

    /* == */
    width:170px;
    float:left;
    /* == */
}
.mcd-menu-H li a.search button {
    border: 1px solid var(--my_base_color);
    /*padding: 10px;*/
    background: var(--my_base_color);
    outline: none;
    color: #FFF;
    margin-left: -4px;

    /* == */
    float:left;
    padding: 10px 10px 11px 10px;
    /* == */
}
.mcd-menu-H li a.search input:focus {
    border: 1px solid var(--my_base_color);
}


.search-mobile {
    display:none !important;
    background:var(--my_base_color);
    border-left:1px solid var(--my_base_color);
    border-radius:0 3px 3px 0;
}
.search-mobile i {
    color:#FFF;
    margin:0 !important;
}


/*@media only screen and (min-width: 960px) and (max-width: 1199px) {*/
/*    .mcd-menu-H {*/
/*        margin-left:10px;*/
/*    }*/
/*}*/

/*@media only screen and (min-width: 768px) and (max-width: 959px) {*/
/*    .mcd-menu-H {*/
/*        width: 200px;*/
/*    }*/
/*    .mcd-menu-H li a {*/
/*        height:30px;*/
/*    }*/
/*    .mcd-menu-H li a i {*/
/*        font-size: 22px;*/
/*    }*/
/*    .mcd-menu-H li a strong {*/
/*        font-size: 12px;*/
/*    }*/
/*    .mcd-menu-H li a small {*/
/*        font-size: 10px;*/
/*    }*/
/*    .mcd-menu-H li a.search input {*/
/*        width: 120px;*/
/*        font-size: 12px;*/
/*    }*/
/*    .mcd-menu-H li a.search buton{*/
/*        padding: 8px 10px 9px 10px;*/
/*    }*/
/*    .mcd-menu-H li > ul {*/
/*        min-width:180px;*/
/*    }*/
/*    .mcd-menu-H li:hover > ul {*/
/*        min-width:180px;*/
/*        left:-200px;*/
/*    }*/
/*    .mcd-menu-H li ul li > ul, .mcd-menu-H li ul li ul li > ul {*/
/*        min-width:150px;*/
/*    }*/
/*    .mcd-menu-H li ul li:hover > ul {*/
/*        left:180px;*/
/*        min-width:150px;*/
/*    }*/
/*    .mcd-menu-H li ul li ul li:hover > ul {*/
/*        left:150px;*/
/*        min-width:150px;*/
/*    }*/
/*    .mcd-menu-H li ul a {*/
/*        font-size:12px;*/
/*    }*/
/*    .mcd-menu-H li ul a i {*/
/*        font-size:14px;*/
/*    }*/
/*}*/

/*@media only screen and (min-width: 480px) and (max-width: 767px) {*/

/*    .mcd-menu-H {*/
/*        width: 50px;*/
/*    }*/
/*    .mcd-menu-H li a {*/
/*        position: relative;*/
/*        padding: 12px 16px;*/
/*        height:20px;*/
/*    }*/
/*    .mcd-menu-H li a small {*/
/*        display: none;*/
/*    }*/
/*    .mcd-menu-H li a strong {*/
/*        display: none;*/
/*    }*/
/*    .mcd-menu-H li a:hover strong,.mcd-menu-H li a.active strong {*/
/*        display:block;*/
/*        font-size:10px;*/
/*        padding:3px 0;*/
/*        position:absolute;*/
/*        bottom:0;*/
/*        left:0;*/
/*        background:var(--my_base_color);*/
/*        color:#FFF;*/
/*        min-width:100%;*/
/*        text-transform:lowercase;*/
/*        font-weight:normal;*/
/*        text-align:center;*/
/*    }*/
/*    .mcd-menu-H li .search {*/
/*        display: none;*/
/*    }*/

/*    .mcd-menu-H li > ul {*/
/*        min-width:180px;*/
/*        left:70px;*/
/*    }*/
/*    .mcd-menu-H li:hover > ul {*/
/*        min-width:180px;*/
/*        left:50px;*/
/*    }*/
/*    .mcd-menu-H li ul li > ul, .mcd-menu-H li ul li ul li > ul {*/
/*        min-width:150px;*/
/*    }*/
/*    .mcd-menu-H li ul li:hover > ul {*/
/*        left:180px;*/
/*        min-width:150px;*/
/*    }*/
/*    .mcd-menu-H li ul li ul li > ul {*/
/*        left:35px;*/
/*        top: 45px;*/
/*        border:0;*/
/*        border-top:4px solid var(--my_base_color);*/
/*    }*/
/*    .mcd-menu-H li ul li ul li > ul:before {*/
/*        left:30px;*/
/*        top: -9px;*/
/*        border:0;*/
/*        border-bottom:5px solid var(--my_base_color);*/
/*        border-left:5px solid transparent;*/
/*        border-right:5px solid transparent;*/
/*    }*/
/*    .mcd-menu-H li ul li ul li:hover > ul {*/
/*        left:30px;*/
/*        min-width:150px;*/
/*        top: 35px;*/
/*    }*/
/*    .mcd-menu-H li ul a {*/
/*        font-size:12px;*/
/*    }*/
/*    .mcd-menu-H li ul a i {*/
/*        font-size:14px;*/
/*    }*/

/*}*/

/*@media only screen and (max-width: 479px) {*/
/*    .mcd-menu-H {*/
/*        width: 50px;*/
/*    }*/
/*    .mcd-menu-H li a {*/
/*        position: relative;*/
/*        padding: 12px 16px;*/
/*        height:20px;*/
/*    }*/
/*    .mcd-menu-H li a small {*/
/*        display: none;*/
/*    }*/
/*    .mcd-menu-H li a strong {*/
/*        display: none;*/
/*    }*/
/*    .mcd-menu-H li a:hover strong,.mcd-menu-H li a.active strong {*/
/*        display:block;*/
/*        font-size:10px;*/
/*        padding:3px 0;*/
/*        position:absolute;*/
/*        bottom:0px;*/
/*        left:0;*/
/*        background:var(--my_base_color);*/
/*        color:#FFF;*/
/*        min-width:100%;*/
/*        text-transform:lowercase;*/
/*        font-weight:normal;*/
/*        text-align:center;*/
/*    }*/
/*    .mcd-menu-H li .search {*/
/*        display: none;*/
/*    }*/

/*    .mcd-menu-H li > ul {*/
/*        min-width:180px;*/
/*        left:70px;*/
/*    }*/
/*    .mcd-menu-H li:hover > ul {*/
/*        min-width:180px;*/
/*        left:50px;*/
/*    }*/
/*    .mcd-menu-H li ul li > ul, .mcd-menu-H li ul li ul li > ul {*/
/*        min-width:150px;*/
/*    }*/
/*    .mcd-menu-H li ul li:hover > ul {*/
/*        left:180px;*/
/*        min-width:150px;*/
/*    }*/
/*    .mcd-menu-H li ul li ul li > ul {*/
/*        left:35px;*/
/*        top: 45px;*/
/*        border:0;*/
/*        border-top:4px solid var(--my_base_color);*/
/*    }*/
/*    .mcd-menu-H li ul li ul li > ul:before {*/
/*        left:30px;*/
/*        top: -9px;*/
/*        border:0;*/
/*        border-bottom:5px solid var(--my_base_color);*/
/*        border-left:5px solid transparent;*/
/*        border-right:5px solid transparent;*/
/*    }*/
/*    .mcd-menu-H li ul li ul li:hover > ul {*/
/*        left:30px;*/
/*        min-width:150px;*/
/*        top: 35px;*/
/*    }*/
/*    .mcd-menu-H li ul a {*/
/*        font-size:12px;*/
/*    }*/
/*    .mcd-menu-H li ul a i {*/
/*        font-size:14px;*/
/*    }*/

/*}*/



.fixTableContainer {
    overflow: auto;
    width: 100%;
    height:100%;
    direction: rtl;
    background-color: #fff;
    float:left;
    /*margin-right:0.5vh;*/
    border-radius: 10px 10px 10px 10px;
    /*margin-left:0.5vh;*/
    border-collapse: collapse;
    font-size: 15px;
    /*border: 1px solid var(--my_base_color);*/
}
.fixSearchContainer {
    display: flex;
    align-items: center;
    width: 100%;
    height:5vh;
    direction: rtl;
    background-color: #fff;
    float:left;
    border-radius: 10px 10px 10px 10px;
    border-collapse: collapse;
    font-size: 16px;
    border: 1px solid var(--my_base_color);
}
.fixCenter_Label {
    margin: 0;
    text-align: right;
    width: 50px;
    padding: 1px 10px 1px 10px;
}
.fixFormContainer {
    overflow: auto;
    width: 100%;
    height:82vh;
    direction: rtl;
    background-color: #fff;
    float:left;
    margin-right:0.5vh;
    border-radius: 10px 10px 10px 10px;
    margin-left:0.5vh;
    border-collapse: collapse;
    font-size: 16px;
    border: 1px solid var(--my_base_color);
}

.fixTableHead {
    overflow: auto;
    width: 100%;
    height:82vh;
    direction: rtl;
    background-color: #fff;
    float:right;
    margin-right:0.5vh;
    border-radius: 10px 10px 10px 10px;
    margin-left:0.5vh;
    border-collapse: collapse;
    font-size: 16px;
    border: 1px solid var(--my_base_color);
}
.fixTableHead  th{
    position: sticky;
    top: 0;
}
.fixTableHead table {
    border-collapse: collapse;
    width: 100%;

}
.fixTableHead  td {
    padding: 2px 4px;
    border-bottom: 1px solid var(--my_base_color);
    border-left: 1px solid var(--my_base_color);
    text-align: right;
}
.fixTableHead th {
    padding: 8px 15px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    text-align: center;
}
.fixTableHead th {
    background:#cccccc;
}
.fixTableHead thead tr {
    background:#cccccc;
    color: #ffffff;
    text-align: left;
    line-height: 10px;
}

.fixServiceTableHead {
    table-layout: fixed;
    overflow: auto;
    width: 200%;
    height:82vh;
    direction: rtl;
    background-color: #fff;
    float:right;
    border-radius: 10px 10px 10px 10px;
    border-collapse: collapse;
    font-size: 16px;
    font-weight: bold;
}

.fixServiceTableHead  td {
    padding: 2px 4px;
    border-bottom: 1px solid var(--my_base_color);
    border-left: 1px solid var(--my_base_color);
    text-align: right;
    min-width: 0;
}
.fixServiceTableHead  th{
    position: sticky;
    top: 0;
    padding: 8px 15px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    text-align: center;
    background:#cccccc;
    min-width: 0;
}
.fixServiceTableHead table {
    border-collapse: collapse;
    width: 100%;

}



.fixServiceTableHead thead tr {
    background:#cccccc;
    color: #ffffff;
    text-align: left;
    line-height: 10px;
    min-width: 0;
}
.fixServiceTableHead tr:hover {
    background:#cccccc;
}

.fixTableHeadRow_Col {
    table-layout: fixed;
    overflow: auto;
    width: 100%;
    direction: rtl;
    background-color: #fff;
    font-size: 16px;
    border-collapse: separate;
}
.fixTableHeadRow_Col td:empty {
    border-left: 0;
    border-right: 0;
}
.fixTableHeadRow_Col  td {
    padding: 5px;
    border: 1px solid var(--my_base_color);
    border-radius: 5px;
}

.fixTableHeadRow_Col  th{
    position: sticky;
    top: 0;
    padding: 8px 15px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    text-align: center;
    background:#cccccc;
}
.fixTableHeadRow_Col thead tr {
    background:#cccccc;
    color: #ffffff;
    text-align: left;
    max-height: 20px;
}

.fixTableHeadRow_Col table {
    border-collapse: collapse;
    width: 100%;
}

.fixTableMachineType {
    table-layout: fixed;
    overflow: auto;
    width: 100%;
    direction: rtl;
    background-color: #fff;
    font-size: 16px;
    border-collapse: separate;
    border-spacing: 5px;

}
.fixTableMachineType td:empty {
    border-left: 0;
    border-right: 0;
}
.fixTableMachineType  td {
    padding: 5px;
    border: 1px solid var(--my_base_color);
    border-radius: 10px;
    box-shadow: rgba(0,0,0,0.35) 3px 3px;
}

.fixTableMachineType  th{
    position: sticky;
    top: 0;
    padding: 8px 15px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    text-align: center;
    background:#cccccc;
}
.fixTableMachineType thead tr {
    background:#cccccc;
    color: #ffffff;
    text-align: left;
    max-height: 20px;
    margin: 5px;
}

.fixTableMachineType table {
    border-collapse: collapse;
    width: 100%;
}



.fixTableRequest{
    table-layout: fixed;
    overflow: auto;
    width: 100%;
    direction: rtl;
    background-color: #fff;
    float:right;
    border-radius: 10px 10px 10px 10px;
    border-collapse: separate;
    font-size: 16px;
    border-spacing: 1px;
}
.fixTableRequest td:empty {
    border-left: 0;
    border-right: 0;
}
.fixTableRequest  td {
    padding: 2px 4px;
    /*border-left: 1px solid var(--my_base_color);*/
    text-align: left;
}

.fixTableRequest  th{
    position: sticky;
    top: 0;
    padding: 8px 15px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    text-align: center;
    background:#cccccc;
}
.fixTableRequest thead tr {
    background:#cccccc;
    color: #ffffff;
    text-align: left;
    max-height: 20px;
}

.fixTableRequest table {
    border-collapse: collapse;
    width: 100%;
}



.fixTablePlate{
    table-layout: fixed;
    overflow: auto;
    width: 100%;
    direction: rtl;
    background-color: #fff;
    float:right;
    border-radius: 10px;
    border-collapse: collapse;
    border: 0;
    font-size: 16px;
    color: black;
}
.fixTablePlate td:empty {
    border: 0;
}
.fixTablePlate  td {
    padding: 0;
    border: 0;
    text-align: center;


}

.fixTablePlate  th{
    position: sticky;
    top: 0;
    padding: 0;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    text-align: center;
    background:#cccccc;
}
.fixTablePlate thead tr {
    background:#cccccc;
    color: #ffffff;
    text-align: center;
    max-height: 20px;
}


.fixTablePlateTD {
    text-align: center;
    border: black solid 1px;
    align-items: center;
    padding: 0;
    margin: 0;
}

.fixTablePlateInput {
    color: black;
    font-size: 14px;
    font-weight: bold;
    width: 80%;
    padding: 0;
    margin: 3px 0 3px 0;
    text-align: center;
}






.edit_form {
    overflow-y: auto;
    width: 100%;
    height:100%;
    direction: rtl;
    float:right;
    font-size: 16px;
    color: #000;
    font-family: "IranSanse", serif;
    padding: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    overflow-x: hidden;

}
.medit_form {
    overflow: auto;
    width: 100%;
    height:100%;
    direction: rtl;
    float:right;
    border-radius: 10px 10px 10px 10px;
    border-collapse: collapse;
    font-size: 16px;
    border: 1px solid var(--my_base_color);
    color: #000;
    font-family: "IranSanse", serif;
    padding: 0;
    background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(230, 126, 34, 0.7));
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
}

.text-box {
    background-color: rgba(230, 126, 34,0.8);
    border-radius: 20px;
    margin: 2em auto;
    padding: 20px;
    width: 90%;
}

h1 {
    margin: 0;
    padding: 0;
    font-size: 2.8em;
    color: #fff;
    text-align: center;
    letter-spacing: 2px;
    word-spacing: 5px;
    line-height: 1em;
    font-weight: bold;
}

p {
    display: block;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 1.2em;
    line-height: 1.2em;
}

hr {
    width: 70%;
    margin: 10px auto;
}



#personal-form {
    margin: 0 auto;
    width: 95%;
    padding: 10px;
}
.dontshow {
    display: none;
}
.labels {
    display: inline-block;
    text-align: left;
    width: 20%;
    vertical-align: middle;
    horiz-align: right;
    margin-top: 10px;
    color: #252525;
    float: right;
    background-color: transparent;
}
.mlabels_edit {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    horiz-align: right;
    margin-top: 5px;
    color: #252525;
    float: right;
    background-color: transparent;
    width: 30%;
    font-size: 12px;
}
.labels_service {
    display: inline-block;
    text-align: left;
    width: 15%;
    vertical-align: middle;
    horiz-align: right;
    margin-top: 10px;
    color: #252525;
    float: right;
    background-color: transparent;
}
.labels_rotate {
    text-align: center;
    vertical-align: center;
    horiz-align: center;
    margin-top: 1px;
    color: var(--my_dark_color1);
    float: right;
    writing-mode: vertical-lr;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    font-weight: bold;
    font-size: 13px;
}
.labels-unit {
    display: inline-block;
    text-align: right;
    width: 20%;
    vertical-align: top;
    horiz-align: right;
    margin-top: 1px;
    color: #252525;
    float: right;
    background-color: transparent;
}
.labels-text {
    display: inline-block;
    text-align: center;
    width: 100%;
    vertical-align: top;
    horiz-align: center;
    color: black;
    font-size: 25px;
    font-weight: bold;
    background-color: transparent;
    border-radius: 10px;
    margin: 10px 0 10px 0;
}
.labels-text-button {
    text-align: center;
    width: 100%;
    vertical-align: center;
    horiz-align: center;
    color: white;
    font-size: 15px;
    font-weight: bold;
    background-color: transparent;
    border-radius: 10px;
    margin: 10px 0 10px 0;
}
button.arrow{
    border:none;
    background-color: transparent;
    color: var(--my_base_color);
    margin: 0 5px 0 5px;
    font-size: 40px;
}

button.round {
    background-color: transparent;
    color: white;
    border: none;
    padding: 5px;
    border-radius: 50%;
}
button.round:hover {
    background-color: white;
    color: var(--my_dark_color1);
    border: none;
    padding: 5px;
    border-radius: 50%;
}
.labels_search_text{
    position: relative;
    right: 0;
    float: right;
    text-align: center;
    vertical-align: center;
    horiz-align: center;
    color: black;
    font-size: 25px;
    font-weight: bold;
}
.form_border {
    border-radius: 10px;
    border: solid 2px var(--my_base_color);
    margin: 3px 3px 3px 3px;
    padding: 5px;
}

.input-tab {
    display: inline-block;
    text-align: right;
    width: 60%;
    margin-right: 10px;
}

.input-select {
    display: inline-block;
    border: 1px solid var(--my_base_color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 15px;
    font-weight: bold;
    float: right;
    height: 34px;
    width: 80%;
    color: #000;
    margin: 0;
    vertical-align: bottom;
}



.jalali_date-date {
    padding: 1px 5px 1px 5px;
    border: 1px solid var(--my_base_color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 15px;
    font-weight: bold;
    float: right;
    height: 25px;
    width: 80px;
    color: #000;
    vertical-align: bottom;
    position: relative;
    margin: 0;
}
.jalali_date-time {
    padding: 1px 5px 1px 5px;
    border: 1px solid var(--my_base_color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 15px;
    font-weight: bold;
    float: right;
    height: 25px;
    width: 40px;
    color: #000;
    vertical-align: bottom;
    position: relative;
    margin: 0;
}


.input-field {
    padding: 1px 5px 1px 5px;
    border: 1px solid var(--my_base_color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 15px;
    font-weight: bold;
    float: right;
    height: 30px;
    width: 80%;
    color: #000;
    vertical-align: bottom;
}
.input-search {
    padding: 1px 5px 1px 5px;
    border: 1px solid var(--my_base_color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    font-weight: bold;
    float: right;
    height: 25px;
    width: 100%;
    color: #000;
    margin: 0;
}

.minput-field {
    padding: 1px 5px 1px 5px;
    border: 1px solid var(--my_base_color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 12px;
    font-weight: bold;
    float: right;
    height: 30px;
    width: 80%;
    color: #000;
    vertical-align: bottom;
}


.input-field-multi {
    padding: 5px 5px 1px 5px;
    border: 1px solid var(--my_base_color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 12px;
    font-weight: bold;
    float: right;
    width: 100px;
    color: #000;
    vertical-align: bottom;
    height: 90px;
    margin-right: 7px;
}

.minput-field-multi {
    padding: 5px;
    border: 1px solid var(--my_base_color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 12px;
    font-weight: bold;
    float: right;
    color: #000;
    width: 90%;
    vertical-align: bottom;
    height: 90px;
}

.input-address-multi {
    padding: 5px;
    border: 1px solid var(--my_base_color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 12px;
    font-weight: bold;
    float: right;
    color: #000;
    width: 90%;
    vertical-align: bottom;
    height: 60px;
    margin: 0;
}

#message_read_statusR{
    background-origin: content-box;
    background-position: bottom left; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: 24px;
    background-image:url("/static/assets/img/double_tick.png")
}
#message_read_statusU{
    background-origin: content-box;
    background-position: bottom left; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: 18px;
    background-image:url("/static/assets/img/tick.png")
}


.input-request-field {
    padding: 3px 5px 1px 5px;
    border: 1px solid var(--my_base_color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 12px;
    font-weight: bold;
    float: right;
    height: 25px;
    width: 90%;
    color: #000;
    vertical-align: bottom;
    margin: 0;
    position: relative;
}
.text-request-field {
    text-align: left;
    font-family: inherit;
    font-size: 15px;
    font-weight: bold;
}

.input-request-machin-type {
    padding: 1px 5px 1px 5px;
    border: 1px solid var(--my_base_color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 15px;
    font-weight: bold;
    float: right;
    height: 30px;
    width: 90%;
    color: #000;
    vertical-align: bottom;
    background-origin: content-box;
    background-position: center left; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: 24px;
    background-color: #fff;
    background-image:url("/static/assets/img/truck.png")
}
.input-rial {
    padding: 1px 5px 1px 5px;
    border: 1px solid var(--my_base_color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 15px;
    font-weight: bold;
    height: 30px;
    color: #000;
    background-origin: content-box;
    background-position: center left; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: 24px;
    background-color: #fff;
    background-image:url("/static/assets/img/rial.png")
}


::-webkit-input-placeholder {
    font-style: italic;
    font-weight: 300;
}

input {
    margin: 7px;
}

#dropdown {
    width: 100%;
    padding: 5px;
    margin: 20px 0 10px 10px;
    border: 1px solid var(--my_base_color);
    border-radius: 3px;
    font-family: inherit;
    font-size: 15px;
}
.btn {
    color: #fff;
    background-color: #398439;
    border-color: #255625;
}

.my_btn {
    color: #000;
    background-color: #fff;
    border-radius: 15px;
    font-size: 15px;
    border: solid 1px var(--my_base_color);
    padding: 14px;
}
.my_request_btn {
    color: #000;
    background-color: #fff;
    border-radius: 15px;
    border: solid 1px var(--my_base_color);
    font-size: 15px;
    height: 40px;
    width:100%;
    padding: 4px 15px 6px 15px;
    font-family: 'IranSanse',sans-serif;
}
.my_search_btn {
    height: 30px;
    width: 115px;
    color: #000;
    background-color: #fff;
    border-radius: 5px;
    font-size: 15px;
    border: solid 1px var(--my_base_color);
    padding: 1px 5px 1px 5px;
    margin-top: 7px;
}
.my_group-cirbtn{
    display: flex;
    justify-content: space-around;
}
.my_cirbtn {
    color: #000;
    background-color: #fff;
    border-radius: 15px;
    font-size: 10px;
    margin: 2px 0 0 0;
}
/*button {*/
/*    background-color: var(--my_base_color);*/
/*    border-radius: 15px;*/
/*    color: white;*/
/*    font-size: 15px;*/
/*    font-weight: bold;*/
/*    font-family: inherit;*/
/*    border: 1px solid;*/
/*}*/

/*button:hover {*/
/*    background-color: var(--my_secund_color);*/
/*}*/

footer {
    text-align: center;
    font-size: 17px;
    margin: 20px;
}

footer a {
    color: #f39c12;
    position: relative;
    text-decoration: none;
    font-weight: bold;
}

footer a:hover {
    color: #f1c40f;
}

footer p {
    margin: 0;
    font-size: 17px;
}

@media only screen and (max-width: 768px) {
    body{
        background-size: cover;
    }

    h1 {
        font-size: 2em;
    }


    .input-tab {
        width: 100%;
        float: left;
        margin-left: -10px;
    }
    .input-field {
        width: 100%;
    }
    select {
        width: 100%;
    }
    .btn {
        width: 100%;
        margin: auto;
    }
}

.top-row {
    &:after {
        content: "";
        display: table;
        clear: both;
    }

    > div {
        float:left;
        width:48%;
        margin-right:4%;
        &:last-child {
            margin:0;
        }
    }
}


#service_type1 {
    box-shadow: -8px 0 0 var(--my_base_color) inset;
}
#service_type2 {
    box-shadow: -8px 0 0 #BE5E00 inset;
}
#service_type3 {
    box-shadow: -8px 0 0 #983E00 inset;
}
#service_type4 {
    box-shadow: -8px 0 0 #741F00 inset;
}
#service_type5 {
    box-shadow: -8px 0 0 #540000 inset;
}
#service_type6 {
    box-shadow: -8px 0 0 #22E6D5 inset;
}
#service_type7 {
    box-shadow: -8px 0 0 #00B7A8 inset;
}
#service_type8 {
    box-shadow: -8px 0 0 #005F54 inset;
}
#service_type9 {
    box-shadow: -8px 0 0 #22E688 inset;
}
#service_type10 {
    box-shadow: -8px 0 0 #00B75E inset;
}
#service_type11 {
    box-shadow: -8px 0 0 #008B36 inset;
}
#service_type12 {
    box-shadow: -8px 0 0 #00600F inset;
}
#service_type13 {
    box-shadow: -8px 0 0 #003800 inset;
}
#service_type14 {
    box-shadow: -8px 0 0 #EBF600 inset;
}
#service_type15 {
    box-shadow: -8px 0 0 #7B9000 inset;
}

#service_status1 {
    background-color: green;
}
#service_status2 {
    background-color: yellow;
}
#service_status3 {
    background-color: red;
}
#service_status4 {
    background-color: orange;
}
#service_status5 {
    background-color: blue;
}
#service_status6 {
    background-color: blueviolet;
}
#service_status7 {
    background-color: darkmagenta;
}
#service_status8 {
    background-color: rebeccapurple;
}
#service_status9 {
    background-color: yellowgreen;
}
#service_status10 {
    background-color: brown;
}
#client_messageI {
    border-left: 5px solid #9FE7F5;
}
#client_messageA {
    border-left: 5px solid #FF4F1F;
}
#client_messageP {
    border-left: 5px solid #E6E8E3;
}
#client_messageR {
    border-left: 5px solid #429EBD;
}
#client_messageD {
    border-left: 5px solid #053F5C;
}


tr.scaffolding, .scaffolding td {
    border:none;
    padding-top:0;
    padding-bottom:0;
    height:0;
    margin-top:0;
    margin-bottom:0;
}
.rotate {
    writing-mode: vertical-lr;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
}



.table_title_row{
    display: table;
    background-color: #ccc;
    color: #fff;
    width: 100%;
}
.table_title{
    column-span: 9;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background-color: #fff;
}
.table_context{
    column-span: 1;
    background-color: #fff;
    display: table-cell;
    align-content: center;
}



.card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.10rem;
    font-family:"IranSanse", serif;
}

.card-header:first-child {
    border-radius: calc(0.37rem - 1px) calc(0.37rem - 1px) 0 0
}

.card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.track {
    position: relative;
    background-color: #ddd;
    height: 7px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 60px;
    margin-top: 50px;
    font-family:"IranSanse", serif;
    font-weight: normal;
}

.track .step {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: 25%;
    margin-top: -18px;
    text-align: center;
    position: relative
}

.track .step.active:before {
    background: #FF5722
}

.track .step::before {
    height: 7px;
    position: absolute;
    content: "";
    width: 100%;
    left: 0;
    top: 18px
}

.track .step.active .icon {
    background: #ee5435;
    color: #fff
}

.track .icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    position: relative;
    border-radius: 100%;
    background: #ddd
}

.track .step.active .text {

    color: #000;
    font-family:"IranSanse", serif;
    font-weight: bold;
}

.track .text {
    display: block;
    margin-top: 7px
}

.itemside {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%
}

.itemside .aside {
    position: relative;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.img-sm {
    width: 80px;
    height: 80px;
    padding: 7px
}

ul.row,
ul.row-sm {
    list-style: none;
    padding: 0
}

.itemside .info {
    padding-left: 15px;
    padding-right: 7px
}

.itemside .title {
    display: block;
    margin-bottom: 5px;
    color: #212529
}

p {
    margin-top: 0;
    margin-bottom: 1rem
}

.btn-warning {
    color: #ffffff;
    background-color: #ee5435;
    border-color: #ee5435;
    border-radius: 1px
}

.btn-warning:hover {
    color: #ffffff;
    background-color: #ff2b00;
    border-color: #ff2b00;
    border-radius: 1px
}
.check_box_group{
    width: 100%;
    overflow: auto;
    float: right;
    direction: rtl;
}
.check_box_group p{
    width: 7em;
    text-align: right;
}
.check_box_group label{
    width: 12em;
    float: right;
    direction: rtl;
}
.check_box_group input[type=checkbox] {
    margin: 4px 4px 4px 4px;
    line-height: normal;
    width: 20px;
    height: 20px;
}
.check_box_group input[type=radio] {
    margin: 4px 4px 4px 4px;
    line-height: normal;
    width: 50px;
    height: 50px;
}
input[type="radio"] {
    display: none;
}
input[type="radio"] {
    /* remove standard background appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* create custom radiobutton appearance */
    display: inline-block;
    width: 25px;
    height: 25px;
    padding: 6px;
    /* background-color only for content */
    background-clip: content-box;
    border: 2px solid #bbb;
    background-color: #e7e6e7;
    border-radius: 50%;
    margin: 0 5px 0 5px;
}

/* appearance for checked radiobutton */
input[type="radio"]:checked {
    background-color: var(--my_base_color);
}

/* optional styles, I'm using this for centering radiobuttons */
.flex {
    display: flex;
    align-items: center;
}
div.settings {
    display:grid;
    grid-template-columns: max-content max-content;
    grid-gap:5px;
}
div.settings label {
    text-align:right;
}
div.settings label:after {
    content: ":";
}
.meter_label:after{
    content: " متر";
}
.tone_label:after{
    content: " تن";
}
.rial_label:after{
    content: " ریال";
}



.tab-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.tab {
    background-color: #ddd;
    padding: 10px 20px;
    cursor: pointer;
}

.tab-content {
    display: none;
}

.active-tab {
    background-color: var(--my_base_color);
}

.active-content {
    display: block;
}

.form-group {
    border: 1px solid #ced4da;
    padding: 5px;
    border-radius: 6px;
    width: auto;
}
.form-group:focus {
    color: #212529;
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}
.form-group input {
    display: inline-block;
    width: auto;
    border: none;
}
.form-group input:focus {
    box-shadow: none;
}
.center_div { /* or any other parent element */
    display: flex; /* flex behavior (displays children inline) */
    justify-content: center; /* horizontal centering */
    align-items: center; /* vertical centering */
    height: 100vh;
    margin: 0;
}

.center_h1 {
    text-align: center; /* comes in handy when resizing the browser width, if the text is long/big enough */
    color: #000000;
    font-family: IranSanse,serif;
    font-size: 15px;
}


label, a{
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    display: inline-block;
    color: inherit;
    transition: border 0.2s;
    border-bottom: 5px solid rgba(#8e44ad, 0.2);
    padding: 3px 2px;
    &:hover{
        border-bottom-color: var(--my_base_color);
    }
}

.layout{
    display: grid;
    height: 100%;
    width: 100%;
    overflow: hidden;
    grid-template-rows: 50px 1fr;
    grid-template-columns: 1fr 1fr 1fr;
}

.driver_layout{
    display: grid;
    height: 100%;
    width: 100%;
    overflow: hidden;
    grid-template-rows: 50px 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.client_layout{
    display: grid;
    height: 100%;
    width: 100%;
    overflow: hidden;
    grid-template-rows:  50px 1fr ;
    grid-template-columns: 1fr 1fr 1fr;
}

input[type="radio"]{
    display: none;
}

label.nav{
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-bottom: 2px solid var(--my_base_color);
    background: #ecf0f1;
    user-select: none;
    transition: background 0.4s, padding-left 0.2s;
    padding-left: 0;
    input[type="radio"]:checked + .page + &{
        background: var(--my_base_color);
        color: #ffffff;
        padding-left: 0;
        span{
            padding-left: 0
        }
        svg{
            opacity: 1;
        }
    }
    input[type="radio"]:checked + .driver_page + &{
        background: var(--my_base_color);
        color: #FFF;
        padding-left: 0;
        span{
            padding-left: 0
        }
        svg{
            opacity: 1;
        }
    }
    input[type="radio"]:checked + .client_page + &{
        background: var(--my_base_color);
        color: #FFF;
        padding-left: 0;
        span{
            padding-left: 0
        }
        svg{
            opacity: 1;
        }
        img{
            padding-right: 5px;
        }

    }
    span{
        padding-left: 0;
        position: relative;
    }
    svg{
        left: 0;
        top: -3px;
        position: absolute;
        width: 15px;
        opacity: 0;
        transition: opacity 0.2s;
    }
}

.page{
    grid-column-start: 1;
    grid-row-start: 2;
    grid-column-end: span 3;
    padding: 0 20px;
    display: flex;
    align-items: center;
}

.page-contents > *{
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.2s, transform 0.2s;

}

input[type="radio"] + .page{
    transition: transform 0.2s;
    transform: translateX(100%);
}

input[type="radio"]:checked + .page{
    transform: translateX(0%);
    .page-contents > *{
        opacity: 1;
        transform: translateY(0px);
    }
}

.page-contents{
    max-width: 100%;
    width: 500px;
    margin: 0 auto;
}


.driver_page{
    grid-column-start: 1;
    grid-row-start: 2;
    grid-column-end: span 4;
    padding: 0 20px;
    display: flex;
    align-items: center;
}

.driver_page-contents > *{
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.2s, transform 0.2s;

}

input[type="radio"] + .driver_page{
    transition: transform 0.2s;
    transform: translateX(100%);
}

input[type="radio"]:checked + .driver_page{
    transform: translateX(0%);
    .driver_page-contents > *{
        opacity: 1;
        transform: translateY(0px);
    }
}

.driver_page-contents{
    max-width: 100%;
    width: 500px;
    margin: 0 auto;
}

.client_page{
    grid-column-start: 1;
    grid-row-start: 2;
    grid-column-end: span 3;
    padding: 0 20px;
    display: flex;
    align-items: center;
}


.client_page-contents > *{
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.2s, transform 0.2s;

}

input[type="radio"] + .client_page{
    transition: transform 0.2s;
    transform: translateX(100%);
}

input[type="radio"]:checked + .client_page{
    transform: translateX(0%);
    .client_page-contents > *{
        opacity: 1;
        transform: translateY(0px);
    }
}

/*.client_page-contents{*/
/*    max-width: 100%;*/
/*    width: 500px;*/
/*    margin: 0 auto;*/
/*}*/




.swal-text {
    background-color: #FEFAE3;
    padding: 17px;
    border: 1px solid var(--my_base_color);
    border-radius: 10px;
    display: block;
    margin: 22px;
    text-align: right;
    color: #61534e;
    font-size: 14px;
}
.swal-title {
    background-color: #FEFAE3;
    padding: 10px 17px 10px 17px;
    border: 1px solid  var(--my_base_color);
    border-radius: 10px;
    display: block;
    margin: 22px;
    text-align: center;
    color: #61534e;
    font-size: 14px;
    font-weight: bold;
}


.main_body {
    background-color: #ddeefa;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
.main_button {
    padding: 10px 20px;
    font-size: 16px;
    text-align: center;
    background-color: #3498db;
    color: #fff;
    border: none;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.main_button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}
.main_button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.15) 75%);
    animation: shimmer 2s infinite linear;
}

@keyframes main_button {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}


.no-touch  .smartphone {
    position: relative;
    width: 360px;
    height: 640px;
    margin: auto;
    border: 16px black solid;
    border-top-width: 60px;
    border-bottom-width: 60px;
    border-radius: 36px;
}


/* The horizontal line on the top of the device */
.no-touch .smartphone:before {
    content: '';
    display: block;
    width: 60px;
    height: 5px;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #333;
    border-radius: 10px;
}

/* The circle on the bottom of the device */
.no-touch .smartphone:after {
    content: '';
    display: block;
    width: 35px;
    height: 35px;
    position: absolute;
    left: 50%;
    bottom: -65px;
    transform: translate(-50%, -50%);
    background: #333;
    border-radius: 50%;
}

/* The screen (or content) of the device */
.no-touch .content {
    position: absolute;
    top: 0;
    left :0;
    width: 360px;
    height: 640px;
    background-color: #FFF;
}
.middle_panel {
    position: absolute;
    top: 55px;
    left: 0;
}
.no-touch .middle_panel {
    height: 540px;

}

.touch .content {
   height: 100vh;
}
.touch .middle_panel {
    height:  calc(100vh - 105px)
}


.fieldWrapper {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}


div.scroll {
    margin: 4px 0 4px 0;
    padding: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: justify;
}
.my_td_title{
    text-align: left;
    font-size: 10px;
    color: var(--my_dark_color1);
    margin-top: 13px;
}
.my_td_text{
    text-align: right;
    font-size: 12px;
    font-weight: bold;
    font-family: inherit;
}
.my_big_span{
    color: var(--my_dark_color1);
    margin:auto 0;
}




.django-toggle-switch {
    float: right;
    display: block;
    width: 50px;
    height: 22px;
    padding: 3px;
    margin: 5px 0 5px 0;
    border-radius: 50px;
    cursor: pointer;

}
.django-toggle-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.django-toggle-switch-slider {
    position: relative;
    display: block;
    height: inherit;
    font-size: 14px;
    background: #AAAAAA;
    border-radius: inherit;
}
.django-toggle-switch-slider:before, .django-toggle-switch-slider:after {
    position: absolute;
    top: 50%;
    color: black;
    margin-top: -.5em;
    line-height: 1;
}

.django-toggle-switch-slider:after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    top: 8px;
    right: 2px;
    position: absolute;
    background: #FFF;
    border-radius: 50%;
}
.django-toggle-input:checked~.django-toggle-switch-slider {
    background: var(--my_base_color);
}

.django-toggle-input:checked~.django-toggle-switch-slider:after {
    opacity: 1;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    top: 8px;
    right: 27px;
    position: absolute;
    background: #FFF;
    border-radius: 50%;
}


.django-toggle-input:checked~.django-toggle-handle {
    left: 43.5px;
    box-shadow: -1px 1px 5px
    rgba(0, 0, 0, 0.2);
}
.django-toggle-switch-slider{
    transition: All 0.3s ease;
    -webkit-transition: All 0.3s ease;
    -moz-transition: All 0.3s ease;
    -o-transition: All 0.3s ease;
}

input:disabled {
    background: #ccc;
}


::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background-color: #666666;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background:#aaaaaa;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--my_base_color);
}
.fixServiceTableHead tr:hover {
    background:#cccccc;
}

.div_center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: inherit;
    height: inherit;
    background-color: #fff;
}

.client_menu{
    grid-column-start: 1;
    grid-row-start: 1;
    grid-column-end: span 3;
    padding: 0 20px;
    display: flex;
    align-items: center;
}


.client_menu-contents > *{
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.2s, transform 0.2s;

}

input[type="radio"] + .client_menu{
    transition: transform 0.2s;
    transform: translateX(100%);
}

input[type="radio"]:checked + .client_menu{
    transform: translateX(0%);
    .driver_page-contents > *{
        opacity: 1;
        transform: translateY(0px);
    }
}

.client_menu-contents{
    max-width: 100%;
    width: 500px;
    margin: 0 auto;
}


.driver_menu{
    grid-column-start: 1;
    grid-row-start: 1;
    grid-column-end: span 4;
    padding: 0 20px;
    display: flex;
    align-items: center;
}


.driver_menu-contents > *{
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.2s, transform 0.2s;

}

input[type="radio"] + .driver_menu{
    transition: transform 0.2s;
    transform: translateX(100%);
}

input[type="radio"]:checked + .driver_menu{
    transform: translateX(0%);
    .driver_page-contents > *{
        opacity: 1;
        transform: translateY(0px);
    }
}

.driver_menu-contents{
    max-width: 100%;
    width: 500px;
    margin: 0 auto;
}

.client_button_page{
    grid-column-start: 1;
    grid-row-start: 3;
    grid-column-end: span 3;
    padding: 0 20px;
    display: flex;
    align-items: center;
    background-color: #0dcaf0;
}





.image-container{
    position: relative;
    width: 128px;
    height: 170px;
    margin: 0;
    padding: 0;
}

/* Make the image responsive */
.image-container .img {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 5px;
    border: var(--my_base_color) solid 1px;
}

/* Style the button and place it in the middle of the container/image */
.image-container .image_btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #555;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

.image-container .image_btn:hover {
    background-color: black;
}


.image-container-input {
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0;
    z-index: 1;
}


.image-container-label {
    position: absolute;
    height: 24px;
    width: 24px;
    z-index: 0;

    /* Your styling here */
    border-radius: 50%;
    text-align: center;
    color: var(--my_base_color);
    bottom: 5px;
    left: 48px;
    margin: auto;
}

.image-container-label::after {
    content: "\f030";
    font-family:"FontAwesome",sans-serif;

    font-size: 21px;
    color: black;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    -webkit-appearance: none;
    border: 0;
    outline: 0;
    flex-grow: 0;
    text-align: center;
    transition: all .2s;
    margin: auto;
}

.image-container-checkbox {
    position: absolute;
    height: 24px;
    width: 24px;
    z-index: 0;
    bottom: 5px;
    left: 5px;
    padding: 0;
    margin: 0;
    color: var(--my_base_color);
    vertical-align: middle;
    -webkit-appearance: none;
    border: 0;
    outline: 0;
    flex-grow: 0;
    transition: background 300ms;
    cursor: pointer;
}


.image-container-checkbox:checked::before,
.image-container-checkbox:not(:checked)::before
{
    content: "";
    color: transparent;
    display: block;
    width: inherit;
    height: inherit;
    border: 0;
    background-color: transparent;
    background-size: contain;
}

.image-container-checkbox:not(:checked)::after  {
    content: "\f014";
    font-family:"FontAwesome",sans-serif;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 21px;
    color: var(--my_scroll_color);
    width: 24px;
    height: 24px;
    vertical-align: middle;
    -webkit-appearance: none;
    border: 0;
    outline: 0;
    flex-grow: 0;
    text-align: center;
    transition: all .2s;
}
.image-container-checkbox:checked::after  {
    content: "\f014";
    font-family:"FontAwesome",sans-serif;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 21px;
    border: 0;
    color: var(--my_base_color);
    width: 24px;
    height: 24px;
    vertical-align: middle;
    -webkit-appearance: none;
    outline: 0;
    flex-grow: 0;
    text-align: center;
    transition: all .2s;
}

.input-plate-field {
    padding: 1px 5px 1px 5px;
    font-family: inherit;
    font-size: 15px;
    font-weight: bold;
    height: 40px;
    width: 90%;
    color: #000;
    margin: 0;
    border: 2px black solid;
    border-radius: 10px;
    border-left: blue solid 20px;
}
.plate{
    margin: 5px 0 0 0 ;
    width: 80%;
    height: 40px;
    box-sizing: border-box;
    border: 2px black solid;
    border-radius: 10px;
    border-left: blue solid 20px;
    font-weight: bold;
    text-align: right;
    padding: 3px 4px 0 0;
}


input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}


.radio_select{
    font-size: 15px;
    color: black;
    float: right;
    text-align: right;
    padding-right: 7px;

}

/*.circle {*/
/*   width: 30px;*/
/*   height: 25px;*/
/*   background: var(--my_base_color);*/
/*   -moz-border-radius: 70px;*/
/*   -webkit-border-radius: 70px;*/
/*   border-radius: 70px;*/
/*}*/

.circle {
    background: var(--my_base_color);;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex; /* or inline-flex */
    align-items: center;
    justify-content: center;
    margin: auto;
}
.circle_menu {
    background: var(--my_base_color);;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex; /* or inline-flex */
    align-items: center;
    justify-content: center;
    margin: auto;
    cursor: pointer;
    box-shadow: rgba(0,0,0,0.35) 3px 3px;
}


.fixRequest_Table {
    table-layout: fixed;
    overflow: auto;
    width: 100%;
    direction: rtl;
    background-color: #fff;
    font-size: 16px;
    border-collapse: separate;
}
.fixRequest_Table td:empty {
    border-left: 0;
    border-right: 0;
}
.fixRequest_Table  td {
    padding: 5px;
    border-radius: 10px;
    outline: solid 1px var(--my_scroll_color);
    outline-offset: -3px;
    box-shadow: rgba(0, 0, 0, 0.35) 1px 1px 1px 1px;
}

.fixRequest_Table  tr {
    padding: 5px;
}

.fixRequest_Table  th{
    position: sticky;
    top: 0;
    padding: 8px 15px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    text-align: center;
    background:#cccccc;
}
.fixRequest_Table thead tr {
    background:#cccccc;
    color: #ffffff;
    text-align: left;
    max-height: 20px;

}

.fixRequest_Table table {
    border-collapse: collapse;
    width: 100%;

}


.shadow {
    position: relative;
}

.shadow:before,
.shadow:after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    background: linear-gradient(45deg, #333333, #cccccc, #333333, #cccccc, #333333, #cccccc, #333333, #cccccc, #333333, #cccccc);
    background-size: 200% 200%;
    width: calc(100% + 3px);
    height: calc(100% + 3px);
    border-radius: 5px;
    z-index: -1;
    animation: animate 3s ease alternate infinite;
}
.shadow:after {
    filter: blur(2px);
}

@keyframes animate {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.fix-shadow {
    position: relative;
}

.fix-shadow:before,
.fix-shadow:after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    background: linear-gradient(45deg, #333333, #cccccc);
    background-size: 200% 200%;
    width: calc(100% + 3px);
    height: calc(100% + 3px);
    border-radius: 5px;
    z-index: -1;
}
.fix-shadow:after {
    filter: blur(2px);
}




.pagination {
    display: inline-block;
}

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid #ddd;
}

.pagination a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

.pagination a:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.pagination a:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}


.switch {
    position : relative ;
    display : inline-block;
    width: 50px;
    height: 22px;
    background-color:#666666 ;
    border-radius: 20px;
}

.switch::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    top: 4px;
    right: 2px;
    transition: all 0.3s;
}

.my_checkbox:checked + .switch::after {
    right : 31px;
}

.my_checkbox:checked + .switch {
    background-color: var(--my_base_color);
}

.my_checkbox {
    display : none;
}

.my_desktop_button{
    padding: 2px 5px 2px 5px;
    border: #555555 solid 1px;
    border-radius: 3px;
    box-shadow: rgba(0,0,0,0.35) 2px 2px;
    text-align: center;
    font-size: 12px;
    color: #333333;
    margin: 0;
}
.my_desktop_button:hover{
    background-color: var(--my_base_color);
}


.fab-container {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 999;
    cursor: pointer;
}

.fab-icon-holder {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: var(--my_secund_color);
    box-shadow: rgba(0, 0, 0, 0.35) 3px 3px;
    border: white solid 2px;
}

.fab-icon-holder:hover {
    opacity: 0.8;
}

.fab-icon-holder i {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 25px;
    color: #ffffff;
}

.fab {
    width: 55px;
    height: 55px;
    background: var(--my_base_color);
    box-shadow: rgba(0, 0, 0, 0.35) 3px 3px;
    border: white solid 2px;
}

.fab-options {
    list-style-type: none;
    margin: 0;
    position: absolute;
    bottom: 70px;
    right: 0;
    display: none;
}


.fab-options li {
    display: flex;
    justify-content: flex-end;
    padding: 5px;
}

.fab-label {
    padding: 2px 5px;
    align-self: center;
    user-select: none;
    white-space: nowrap;
    border-radius: 3px;
    font-size: 16px;
    background: #666666;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    margin-right: 10px;
}

.small_button {
    font-size: 25px;
    background-color: transparent;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
}

.small_button:hover {
    background-color: var(--my_base_color);
}



.profilepic {
    position: relative;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #111;
    border: rgba(50,50,50,0.35) solid 5px;
    box-shadow: rgba(0,0,0,0.35) 3px 3px;
}

.profilepic:hover .profilepic__content {
    opacity: 1;
}

.profilepic:hover .profilepic__image {
    opacity: .5;
}

.profilepic__image {
    object-fit: cover;
    text-align: center;
    opacity: 1;
    transition: opacity .2s ease-in-out;

}

.profilepic__content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.profilepic__icon {
    color: white;
    padding-bottom: 8px;
}

.fas {
    font-size: 20px;
}

.profilepic__text {
    text-transform: uppercase;
    font-size: 12px;
    width: 50%;
    text-align: center;
}


.profile-container-checkbox {
    position: absolute;
    height: 24px;
    width: 24px;
    z-index: 0;
    bottom: 5px;
    left: 40%;
    padding: 0;
    margin: 0;
    color: var(--my_base_color);
    vertical-align: middle;
    -webkit-appearance: none;
    border: 0;
    outline: 0;
    flex-grow: 0;
    transition: background 300ms;
    cursor: pointer;
}


.profile-container-checkbox:checked::before,
.profile-container-checkbox:not(:checked)::before
{
    content: "";
    color: transparent;
    display: block;
    width: inherit;
    height: inherit;
    border: 0;
    background-color: transparent;
    background-size: contain;
}

.profile-container-checkbox:not(:checked)::after  {
    content: "\f014";
    font-family:"FontAwesome",sans-serif;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 21px;
    color: var(--my_scroll_color);
    width: 24px;
    height: 24px;
    vertical-align: middle;
    -webkit-appearance: none;
    border: 0;
    outline: 0;
    flex-grow: 0;
    text-align: center;
    transition: all .2s;
}
.profile-container-checkbox:checked::after  {
    content: "\f014";
    font-family:"FontAwesome",sans-serif;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 21px;
    border: 0;
    color: var(--my_dark_color1);
    width: 24px;
    height: 24px;
    vertical-align: middle;
    -webkit-appearance: none;
    outline: 0;
    flex-grow: 0;
    text-align: center;
    transition: all .2s;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.display_on{
    display: table;
}
.display_off{
    display: none;
}

.little_button{
    border-radius: 5px;
    padding: 0;
    color: var(--my_dark_color1);
    height: fit-content;
    margin: 0;
    width: fit-content;
}

.little_button:hover{
    color: var(--my_base_color);
}

.submit_button{
    padding: 6px 0 6px 0;
    margin-top: 5px;
    background: var(--my_dark_color1);

    color: white;
    border-radius: 30px;
    font-size: 12px;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 1px;
    transition: all .3s ease-in;
    border: 1px solid var(--my_dark_color1);
    width: 130px;
    text-align: center;
}
.submit_button:hover {
    /*background-color: var(--my_base_color);*/
    background: white;
    color: var(--my_dark_color1);
    border: 1px solid var(--my_dark_color1);
}





.inp {
    position: relative;
    margin: auto;
    width: 90%;
    max-width: 90%;
    border-radius: 3px;
    overflow: hidden;
    height: 40px;
    padding-left: 10px;
    display: flex;
    justify-content: center;
}
.inp .label {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 500;
    transform-origin: 0 0;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
    pointer-events: none;
}
.inp .focus-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
}

.inp .req {
    position: absolute;
    top: 13px;
    left: 25px;
    font-size: 25px;
    color: rgba(0, 100, 0, 0.5);
    font-weight: 500;
    transform-origin: 0 0;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
    pointer-events: none;

}

.inp .dis {
    position: absolute;
    top: 13px;
    left: 25px;
    font-size: 25px;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 500;
    transform-origin: 0 0;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
    pointer-events: none;

}

.inp input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    border: var(--my_base_alfa) solid 1px;
    font-family: inherit;
    padding: 0 12px 0 12px;
    height: 30px;
    font-size: 15px;
    font-weight: 400;
    background: rgba(0, 0, 0, 0.02);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    color: #000;
    transition: all 0.15s ease;
    border-radius: 10px;
}


.inp input:hover {
    background: var(--my_base_alfa);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.inp input:not(:-moz-placeholder-shown) + .label {
    color: var(--my_dark_alfa1);
    transform: translate3d(0, -15px, 0) scale(0.75);
    transform-origin: center;
}
.inp input:not(:-ms-input-placeholder) + .label {
    color: var(--my_dark_alfa1);
    transform: translate3d(0, -15px, 0) scale(0.75);
    transform-origin: center;
}
.inp input:not(:placeholder-shown) + .label {
    color: var(--my_dark_alfa1);
    transform: translate3d(0, -15px, 0) scale(0.75);
    transform-origin: center;
}
.inp input:focus {
    background: rgba(0, 0, 0, 0.05);
    outline: none;
    box-shadow: inset 0 -2px 0 var(--my_dark_color1);
}
.inp input:focus + .label {
    color: var(--my_dark_color1);
    transform: translate3d(0, -15px, 0) scale(0.75);
    transform-origin: center;
}
.inp input:focus + .label + .focus-bg {
    transform: scaleX(1);
    transition: all 0.1s ease;
}


.tx_area {
    position: relative;
    margin: auto;
    width: 90%;
    max-width: 90%;
    border-radius: 3px;
    overflow: hidden;
    height: 70px;
    padding-left: 10px;
    display: flex;
    justify-content: center;
}
.tx_area .label {
    position: absolute;
    top: 5px;
    right: 15px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 500;
    transform-origin: 0 0;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
    pointer-events: none;

}
.tx_area .focus-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: center;
}

.tx_area .req {
    position: absolute;
    bottom: 13px;
    left: 25px;
    font-size: 25px;
    color: rgba(0, 100, 0, 0.5);
    font-weight: 500;
    transform-origin: 0 0;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
    pointer-events: none;

}

.tx_area .dis {
    position: absolute;
    bottom: 20px;
    left: 25px;
    font-size: 25px;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 500;
    transform-origin: 0 0;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
    pointer-events: none;

}
.tx_area textarea{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    border: var(--my_base_alfa) solid 1px;
    font-family: inherit;
    padding: 10px 12px 0 12px;
    font-size: 13px;
    font-weight: 400;
    background: rgba(0, 0, 0, 0.02);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    color: #000;
    transition: all 0.15s ease;
    border-radius: 10px;
    margin-left: 8px;
}
.tx_area textarea:hover {
    background: var(--my_base_alfa);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.tx_area textarea:not(:-moz-placeholder-shown) + .label {
    color: var(--my_dark_alfa1);
    transform: translate3d(0, -5px, 0) scale(0.75);
    transform-origin: center;
}
.tx_area textarea:not(:-ms-input-placeholder) + .label {
    color: var(--my_dark_alfa1);
    transform: translate3d(0, -5px, 0) scale(0.75);
    transform-origin: center;
}
.tx_area textarea:not(:placeholder-shown) + .label {
    color: var(--my_dark_alfa1);
    transform: translate3d(0, -5px, 0) scale(0.75);
    transform-origin: center;
}
.tx_area textarea:focus {
    background: rgba(0, 0, 0, 0.05);
    outline: none;
    box-shadow: inset 0 -2px 0 var(--my_dark_color1);
}
.tx_area textarea:focus + .label {
    color: var(--my_dark_color1);
    transform: translate3d(0, -5px, 0) scale(0.75);
    transform-origin: center;
}
.tx_area input:focus + .label + .focus-bg {
    transform: scaleX(1);
    transition: all 0.1s ease;
}


.num_lbe {
    position: relative;
    margin: auto;
    width: 200px;
    border-radius: 3px;
    overflow: hidden;
    height: 40px;
    padding-left: 10px;
    display: flex;
    justify-content: center;



}
.num_lbe .label {
    position: absolute;
    top: 0;
    left: auto;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    transition: all 0.2s ease;
    pointer-events: none;
    color: var(--my_dark_color1);
    transform: scale(0.75);
}

.num_lbe .rials {
    position: absolute;
    top: 15px;
    left: 20px;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    transition: all 0.2s ease;
    pointer-events: none;
    color: rgba(0, 0, 0, 0.8);
    transform: scale(0.75);
}

.num_lbe .focus-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: center;
}

.num_lbe .dis {
    position: absolute;
    top: 13px;
    left: 10px;
    font-size: 25px;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 500;
    transform-origin: 0 0;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
    pointer-events: none;
}

.num_lbe input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    border: var(--my_base_alfa) solid 1px;
    font-family: inherit;
    padding: 0 12px 0 12px;
    height: 30px;
    font-size: 15px;
    font-weight: 400;
    background: rgba(0, 0, 0, 0.02);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    color: #000;
    transition: all 0.15s ease;
    border-radius: 10px;
    text-align: center;
}
.num_lbe input:hover {
    background: var(--my_base_alfa);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

.num_lbe input:focus {
    background: rgba(0, 0, 0, 0.05);
    outline: none;
    box-shadow: inset 0 -2px 0 var(--my_dark_color1);
}

.num_lbe input:focus + .label + .focus-bg {
    transform: scaleX(1);
    transition: all 0.1s ease;
}

.num_lbe_twoline {
    position: relative;
    margin: auto;
    width: 90%;
    border-radius: 3px;
    overflow: hidden;
    height: 40px;
    display: flex;
    justify-content: center;
}
.num_lbe_twoline .label {
    position: absolute;
    top: 0;
    left: auto;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    transition: all 0.2s ease;
    pointer-events: none;
    width: 100%;
    color: var(--my_dark_color1);
    transform: scale(0.75);
}

.num_lbe_twoline .rials {
    position: absolute;
    top: 15px;
    left: 20px;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    transition: all 0.2s ease;
    pointer-events: none;
    color: rgba(0, 0, 0, 0.8);
    transform: scale(0.75);
}

.num_lbe_twoline .focus-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: center;
}

.num_lbe_twoline .dis {
    position: absolute;
    top: 13px;
    left: 10px;
    font-size: 25px;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 500;
    transform-origin: 0 0;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
    pointer-events: none;
}

.num_lbe_twoline input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    border: var(--my_base_alfa) solid 1px;
    font-family: inherit;
    padding: 0 12px 0 12px;
    height: 30px;
    font-size: 15px;
    font-weight: 400;
    background: rgba(0, 0, 0, 0.02);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    color: #000;
    transition: all 0.15s ease;
    border-radius: 10px;
    text-align: center;
}
.num_lbe_twoline input:hover {
    background: var(--my_base_alfa);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

.num_lbe_twoline input:focus {
    background: rgba(0, 0, 0, 0.05);
    outline: none;
    box-shadow: inset 0 -2px 0 var(--my_dark_color1);
}

.num_lbe_twoline input:focus + .label + .focus-bg {
    transform: scaleX(1);
    transition: all 0.1s ease;
}


.lbe {
    position: relative;
    margin: auto;
    width: 70%;
    max-width: 70%;
    min-width: 20%;
    border-radius: 3px;
    overflow: hidden;
    height: 40px;
    padding-left: 10px;
}
.lbe .label {
    position: absolute;
    top: 15px;
    left: 40%;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 500;
    transform-origin: 0 0;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
    pointer-events: none;
}
.lbe .focus-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: center;
}

.lbe .dis {
    position: absolute;
    top: 13px;
    left: 10px;
    font-size: 25px;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 500;
    transform-origin: 0 0;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
    pointer-events: none;
}

.lbe input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    border: var(--my_base_alfa) solid 1px;
    font-family: inherit;
    padding: 0 12px 0 12px;
    height: 30px;
    font-size: 15px;
    font-weight: 400;
    background: rgba(0, 0, 0, 0.02);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    color: #000;
    transition: all 0.15s ease;
    border-radius: 10px;
    text-align: center;
}
.lbe input:hover {
    background: var(--my_base_alfa);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.lbe input:not(:-moz-placeholder-shown) + .label {
    color: var(--my_dark_alfa1);
    transform: translate3d(0, -15px, 0) scale(0.75);
    transform-origin: center;
}
.lbe input:not(:-ms-input-placeholder) + .label {
    color: var(--my_dark_alfa1);
    transform: translate3d(0, -15px, 0) scale(0.75);
    transform-origin: center;
}
.lbe input:not(:placeholder-shown) + .label {
    color: var(--my_dark_alfa1);
    transform: translate3d(0, -15px, 0) scale(0.75);
    transform-origin: center;
}
.lbe input:focus {
    background: rgba(0, 0, 0, 0.05);
    outline: none;
    box-shadow: inset 0 -2px 0 var(--my_dark_color1);
}
.lbe input:focus + .label {
    color: var(--my_dark_color1);
    transform: translate3d(0, -15px, 0) scale(0.75);
    transform-origin: center;
}
.lbe input:focus + .label + .focus-bg {
    transform: scaleX(1);
    transition: all 0.1s ease;
}

.slt {
    position: relative;
    margin: auto;
    width: 200px;
    max-width: 200px;
    min-width: 50px;
    border-radius: 3px;
    overflow: hidden;
    height: 40px;

    padding-top: 12px;
    display: flex;
    justify-content: center;
}
.slt .label {
    position: absolute;
    top: 20px;
    left: auto;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 500;
    transform-origin: 0 0;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
    pointer-events: none;


}
.slt .focus-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: center;
}

.slt .dis {
    position: absolute;
    top: 13px;
    left: 10px;
    font-size: 25px;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 500;
    transform-origin: 0 0;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
    pointer-events: none;
}

.slt select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    border: var(--my_base_alfa) solid 1px;
    font-family: inherit;
    padding: 0 12px 0 12px;
    height: 30px;
    font-size: 15px;
    font-weight: 400;
    background: rgba(0, 0, 0, 0.02);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    color: #000;
    transition: all 0.15s ease;
    border-radius: 10px;
    text-align: center;
}
.slt select:hover {
    background: var(--my_base_alfa);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.slt select:not(:-moz-placeholder-shown) + .label {
    color: var(--my_dark_alfa1);
    transform: translate3d(0, -20px, 0) scale(0.75);
    transform-origin: center;
}
.slt select:not(:-ms-input-placeholder) + .label {
    color: var(--my_dark_alfa1);
    transform: translate3d(0, -20px, 0) scale(0.75);
    transform-origin: center;
}
.slt select:not(:placeholder-shown) + .label {
    color: var(--my_dark_alfa1);
    transform: translate3d(0, -20px, 0) scale(0.75);
    transform-origin: center;
}
.slt select:focus {
    background: rgba(0, 0, 0, 0.05);
    outline: none;
    box-shadow: inset 0 -2px 0 var(--my_dark_color1);
}
.slt select:focus + .label {
    color: var(--my_dark_color1);
    transform: translate3d(0, -20px, 0) scale(0.75);
    transform-origin: center;
}
.slt select:focus + .label + .focus-bg {
    transform: scaleX(1);
    transition: all 0.1s ease;
}


.machine_type {
    position: relative;
    margin: auto;
    width: 200px;
    max-width: 70%;
    min-width: 20%;
    border-radius: 10px;
    overflow: hidden;
    height: 60px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: var(--my_base_alfa) solid 1px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    background: rgba(0, 0, 0, 0.02);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    color: #000;
    transition: all 0.15s ease;
    text-align: center;
}
.machine_type .label {
    position: absolute;
    top: 17px;
    left: 35%;
    font-size: 13px;
    font-weight: 500;
    text-align: center;

    transition: all 0.2s ease;
    pointer-events: none;
    color: var(--my_dark_color1);
    transform: translate3d(0, -20px, 0) scale(0.75);
    transform-origin: center;
}
.machine_type .focus-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: center;
}

.machine_type .dis {
    position: absolute;
    top: 13px;
    left: 10px;
    font-size: 25px;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 500;
    transform-origin: 0 0;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
    pointer-events: none;
}

.machine_type input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    border: var(--my_base_alfa) solid 1px;
    font-family: inherit;
    padding: 0 12px 0 12px;
    height: 30px;
    font-size: 15px;
    font-weight: 400;
    background: rgba(0, 0, 0, 0.02);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    color: #000;
    transition: all 0.15s ease;
    border-radius: 10px;
    text-align: center;
}
.machine_type input:hover {
    background: var(--my_base_alfa);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.machine_type input:not(:-moz-placeholder-shown) + .label {
    color: var(--my_dark_alfa1);
    transform: translate3d(0, -20px, 0) scale(0.75);
    transform-origin: center;
}
.machine_type input:not(:-ms-input-placeholder) + .label {
    color: var(--my_dark_alfa1);
    transform: translate3d(0, -20px, 0) scale(0.75);
    transform-origin: center;
}
.machine_type input:not(:placeholder-shown) + .label {
    color: var(--my_dark_alfa1);
    transform: translate3d(0, -20px, 0) scale(0.75);
    transform-origin: center;
}
.machine_type input:focus {
    background: rgba(0, 0, 0, 0.05);
    outline: none;
    box-shadow: inset 0 -2px 0 var(--my_dark_color1);
}
.machine_type input:focus + .label {
    color: var(--my_dark_color1);
    transform: translate3d(0, -20px, 0) scale(0.75);
    transform-origin: center;
}
.machine_type input:focus + .label + .focus-bg {
    transform: scaleX(1);
    transition: all 0.1s ease;
}
.machine_type .fix_Input2 {
    width: 30px;
    margin: 0;
    padding: 0;
    font-weight: bold;
}
.machine_type .fix_Input3 {
    width: 40px;
    margin: 0;
    padding: 0;
    font-weight: bold;
}
.machine_type .fix_Input_a {
    width: 40px;
    margin: 0;
    padding: 0;
    font-weight: bold;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: var(--my_base_alfa) solid 1px;
    font-family: inherit;
    height: 30px;
    font-size: 15px;
    background: rgba(0, 0, 0, 0.02);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    color: #000;
    transition: all 0.15s ease;
    border-radius: 10px;
    text-align: center;
}
.trip_type {
    position: relative;
    margin: auto;
    width: 70%;
    max-width: 100%;
    min-width: 20%;
    border-radius: 10px;
    overflow: hidden;
    height: fit-content;
    padding-left: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: var(--my_base_alfa) solid 1px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    background: rgba(0, 0, 0, 0.02);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    color: #000;
    transition: all 0.15s ease;
    text-align: center;

    display: flex;
    justify-content: center;
}
.trip_type .label {
    position: absolute;
    top: -5px;
    left: auto;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    transition: all 0.2s ease;
    pointer-events: none;
    color: var(--my_dark_color1);
    transform: scale(0.75);
}
.trip_type .focus-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: center;
}



.trip_type input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border: var(--my_base_alfa) solid 1px;
    padding: 0 10px 0 10px;

    font-size: 15px;
    font-weight: 400;
    background: rgba(0, 0, 0, 0.02);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    color: #000;
    transition: all 0.15s ease;
    border-radius: 10px;

}
.trip_type input:hover {
    background: var(--my_base_alfa);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.trip_type input[type="checkbox"]:checked {
    background-color: var(--my_base_color);
}

.trip_type input[type="checkbox"]:checked::after {
    content: "\f00c";
    font-family:"FontAwesome",sans-serif;
    font-size: 21px;
    border: 0;
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--my_dark_color1);
    width: 24px;
    height: 24px;
    vertical-align: middle;
    -webkit-appearance: none;
    outline: 0;
    flex-grow: 0;
    text-align: right;
    transition: all .2s;
}

.fade-in{
    animation: animationFrames ease 1s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode:forwards; /*when the spec is finished*/
    -webkit-animation: animationFrames ease 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
    -moz-animation: animationFrames ease 1s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -moz-animation-fill-mode:forwards; /*FF 5+*/
    -o-animation: animationFrames ease 1s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -o-animation-fill-mode:forwards; /*Not implemented yet*/
    -ms-animation: animationFrames ease 1s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes animationFrames{
    0% {
        opacity:0;
        transform:  translate(0px,-25px)  ;
    }
    100% {
        opacity:1;
        transform:  translate(0px,0px)  ;
    }
}

@-moz-keyframes animationFrames{
    0% {
        opacity:0;
        -moz-transform:  translate(0px,-25px)  ;
    }
    100% {
        opacity:1;
        -moz-transform:  translate(0px,0px)  ;
    }
}

@-webkit-keyframes animationFrames {
    0% {
        opacity:0;
        -webkit-transform:  translate(0px,-25px)  ;
    }
    100% {
        opacity:1;
        -webkit-transform:  translate(0px,0px)  ;
    }
}

@-o-keyframes animationFrames {
    0% {
        opacity:0;
        -o-transform:  translate(0px,-25px)  ;
    }
    100% {
        opacity:1;
        -o-transform:  translate(0px,0px)  ;
    }
}

@-ms-keyframes animationFrames {
    0% {
        opacity:0;
        -ms-transform:  translate(0px,-25px)  ;
    }
    100% {
        opacity:1;
        -ms-transform:  translate(0px,0px)  ;
    }
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.blinkingDiv {
    animation: blink 1s infinite;
}

.desktop_row_span{
    position: absolute;
    right: 5px;
    top: 3px;
    font-size: 10px;
    font-weight: bold;
    flex-grow: 1;
    color: black;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-left: #aaaaaa solid 1px;
    width: 125px;
    text-align: right;
}


.service_wrapper {
    display: grid; /* establish a grid container */
    grid-template-columns: repeat(40, 1fr); /* 20 columns */
    grid-auto-rows: 25px; /* row height for illustration */
    grid-gap: 1px;
}

.service_wrapper div {
    /*border: 1px solid;*/
    grid-column: span 1; /* span two columns */
    /* flexbox to center content*/
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 5px;
}

.service_wrapper .a {
    grid-column: span 20;  /* span ten columns */
}

.service_wrapper .a1 {
    grid-column: span 40; /* span all 20 columns */
}

.service_wrapper .a2 {
    grid-row: span 5; /* span five rows */
}

.service_wrapper .a9,.service_wrapper .a10{
    grid-column: span 10; /* span five columns */
    grid-row: span 2;
}

.service_wrapper .h {
    grid-column: span 4;  /* span ten columns */
    grid-row: span 2;
}

.service_wrapper .b {
    grid-column: span 4;  /* span ten columns */
}


.currency_inp {
    position: relative;
    margin: auto;
    width: 200px;
    max-width: 90%;
    border-radius: 3px;
    overflow: hidden;
    height: 40px;
    padding-left: 10px;
    display: flex;
    justify-content: center;
}
.currency_inp .label {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 500;
    transform-origin: 0 0;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
    pointer-events: none;
}
.currency_inp .focus-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
}

.currency_inp .req {
    position: absolute;
    top: 13px;
    left: 25px;
    font-size: 25px;
    color: rgba(0, 100, 0, 0.5);
    font-weight: 500;
    transform-origin: 0 0;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
    pointer-events: none;

}

.currency_inp .dis {
    position: absolute;
    top: 13px;
    left: 25px;
    font-size: 25px;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 500;
    transform-origin: 0 0;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
    pointer-events: none;

}

.currency_inp input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    border: var(--my_base_alfa) solid 1px;
    font-family: inherit;
    padding: 0 12px 0 12px;
    height: 30px;
    font-size: 15px;
    font-weight: 400;
    background: rgba(0, 0, 0, 0.02);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    color: #000;
    transition: all 0.15s ease;
    border-radius: 10px;
}


.currency_inp input:hover {
    background: var(--my_base_alfa);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.currency_inp input:not(:-moz-placeholder-shown) + .label {
    color: var(--my_dark_alfa1);
    transform: translate3d(0, -15px, 0) scale(0.75);
    transform-origin: center;
}
.currency_inp input:not(:-ms-input-placeholder) + .label {
    color: var(--my_dark_alfa1);
    transform: translate3d(0, -15px, 0) scale(0.75);
    transform-origin: center;
}
.currency_inp input:not(:placeholder-shown) + .label {
    color: var(--my_dark_alfa1);
    transform: translate3d(0, -15px, 0) scale(0.75);
    transform-origin: center;
}
.currency_inp input:focus {
    background: rgba(0, 0, 0, 0.05);
    outline: none;
    box-shadow: inset 0 -2px 0 var(--my_dark_color1);
}
.currency_inp input:focus + .label {
    color: var(--my_dark_color1);
    transform: translate3d(0, -15px, 0) scale(0.75);
    transform-origin: center;
}
.currency_inp input:focus + .label + .focus-bg {
    transform: scaleX(1);
    transition: all 0.1s ease;
}



.menu{

    margin: 0;
    padding: 0;
    display: flex;
    /* Works well with 100% width  */

    width: 100%;
    font-size: 1.5em;
    position: relative;
    align-items: center;
    justify-content: center;
    background-color: var(--bgColorMenu);

}

.menu__item{

    all: unset;
    flex-grow: 1;
    z-index: 100;
    display: flex;
    cursor: pointer;
    position: relative;
    border-radius: 50%;
    align-items: center;
    will-change: transform;
    justify-content: center;
    padding: 0.55em 0 0.85em;
    transition: transform var(--timeOut , var(--duration));

}

.menu__item::before{

    content: "";
    z-index: -1;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: absolute;
    transform: scale(0);
    transition: background-color var(--duration), transform var(--duration);

}


.menu__item.active {

    transform: translate3d(0, -.8em , 0);

}



.icon{

    width: 48px;
    height: 48px;
    stroke: white;
    fill: transparent;
    stroke-width: 1pt;
    stroke-miterlimit: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 400;

}

.menu__item.active .icon {

    animation: strok 1.5s reverse;

}

@keyframes strok {

    100% {

        stroke-dashoffset: 400;

    }

}

.menu__border{

    left: 0;
    bottom: 99%;
    width: 40%;
    height: 55%;
    position: absolute;
    clip-path: url(#menu);
    will-change: transform;
    background-color: var(--bgColorMenu);
    transition: transform var(--timeOut , var(--duration));

}

.svg-container {
    width: 0;
    height: 0;
}
.image-container img{
    width: 80px;
    height: 80px;
    border-radius: 50%;
}
.lower-container{
    height: 280px;
    background: #FFF;
    padding: 20px;
    padding-top: 40px;
    text-align: center;
}
.lower-container h3, h4{
    box-sizing: border-box;
    line-height: .4;
    font-weight: 900;
}
.lower-container h4{
    color: var(--my_dark_color1);
    opacity: .6;
    font-weight: bold;
}
.lower-container h5{
    opacity: .6;
    font-weight: bold;
}
.lower-container p{
    font-size: 13px;
    color: gray;
    margin-bottom: 30px;
}
.lower-container .btn{
    padding: 12px 20px;
    background: var(--my_dark_color1);

    color: white;
    border-radius: 30px;
    font-size: 12px;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 1px;
    transition: all .3s ease-in;
    border: 1px solid var(--my_dark_color1);
}
.lower-container .btn:hover{
    background: transparent;
    color: var(--my_dark_color1);
    border: 1px solid var(--my_dark_color1);
}

.bottom_menu{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 10px;
    height: 55px;
    display:flex;
    background-color: transparent;
    align-items: center;
    text-align: center;
    justify-content: center;
    margin: auto;
}
.title_menu{
    position: absolute;
    top: 10px;
    right: 130px;
    font-weight: bold;
    color: white;
    font-size: 20px;
}

.title_menu::after {
  content: "«";
    font-weight: bold;
    font-style: italic;
    color: white;
}