@font-face {
    font-family: 'BYekan';
    src: url('../fonts/BYekan+.svg#BYekan+') format('svg'),
         url('../fonts/BYekan+.ttf') format('truetype'),
         url('../fonts/BYekan+.woff') format('woff'),
         url('../fonts/BYekan+.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* reset */

* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
}

a{
     color: inherit;
     text-decoration: none;
}

.content_row{
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
}

.content_row .col1 , .content_row .col2 , .content_row .col3 ,.content_row .col4{
     width: 100%;
 }


.shadow{
     box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.primary_btn{
     background-color: #05B41C;
     display: flex;
     justify-content: center;
     flex-direction: row;
     align-items: center;
     padding: 10px 20px;
     font-size: 0.85em;
     border-radius: 5px;
     color: #ffffff;
     margin: 5px 0;
     height:50px;
     transition: background-color 0.3s ease, height 0.2s ease;
     cursor: pointer;
}

.primary_btn.hidden{
    height: 0;
    padding: 0;
}

.primary_btn > *{
     margin-left: 5px;
}

.action_btn{
     display: flex;
     flex-wrap: wrap;
}



.primary_btn:hover{
     background-color: #008011;
}

.warning_btn{
     background-color: #da0000;
     display: flex;
     justify-content: center;
     flex-direction: row;
     align-items: center;
     padding: 10px 20px;
     font-size: 0.85em;
     border-radius: 5px;
     color: #ffffff;
     margin: 5px 0;
     height:50px;
     transition: background-color 0.3s ease, height 0.2s ease;
     cursor: pointer;
}

.warning_btn > *{
     margin-left: 5px;
}

.warning_btn:hover{
     background-color: #930c0c;
}

.secondary_btn{
     background-color: #c4c4c4;
     display: flex;
     justify-content: center;
     flex-direction: row;
     align-items: center;
     padding: 10px 20px;
     font-size: 0.85em;
     border-radius: 5px;
     color: #000000;
     margin: 5px 0;
     transition: background-color 0.3s ease;
     cursor: pointer;
}

.secondary_btn > *{
     margin-left: 5px;
}

.secondary_btn:hover{
     background-color: #b3b3b3;
}

.action_btn > *{
     margin-right: 10px;
}

.table_wrapper{
     overflow-x: auto;
     margin: 20px 10px;
}

.table_wrapper.sub_table{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.table_wrapper.sub_table th{
     padding: 3px 10px;
     background-color:#01D6AA ;
}

.table_wrapper table{
     width: 100%;
     text-align: center;
     border-collapse: collapse;
}

.table_wrapper table tr:nth-child(odd){
     background-color: #ECEFF8;
}

.table_wrapper table tr:hover{
     background-color: #ECEFF8;
}

.table_wrapper table th{
     background-color: #21BDCA;
     color: #ffffff;
     padding: 10px 5px;
     border: 1px solid #e1e1e1;
}

.table_wrapper table td{
     color: #000000;
     padding: 7px 5px;
     border: 1px solid #e1e1e1;
     font-size: 0.9em;
}

.table_wrapper table td.empty{
     font-size: 1.1em;
     color: #737373;
}

.table_wrapper table tr.sub{
    display: none;
    width: 100%;
    background-color: #FFFFFF;
    overflow: hidden;
}

.table_wrapper table tr.sub.show{
    display:table-row ;
}

.table_wrapper table .action{
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
}

.table_wrapper table .action>*{
     margin-left: 20px;
}

.table_wrapper table .action>*>*{
     margin-left: 5px;
}

.form{
     width: 100%;
     max-width: 800px;
     display: flex;
     flex-direction: column;
}

.form .hidden{
     display: none;
}

.form img.captcha{
    width: 200px;
    margin-bottom: 1em;
}

.table_search_form{
     flex-direction: column;
     justify-content: space-between;
     align-items: baseline;
     width: 100%;
     max-width: none;
}

.table_search_form li{
     width: calc(100% - 10px);
}

.table_search_form li.submit{

     width: calc(100% - 10px);
}

.form li{
     display: flex;
     flex-direction: column;
     margin: 15px 5px;
}

.form label{
     margin-bottom: 5px;
     font-size: 1em;
     color: #737373;
}

.form li.checkbox{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 5px;
}

.form li.checkbox>*{
    margin-left: 5px;
}

.form input , .form textarea, .form select{
     padding: 10px 10px;
     font-size: 1em;
     border-radius: 5px;
     font-family: 'BYekan';
     outline: 2px solid transparent;
     border: 1px solid #b3b3b3;
     transition: outline 0.3s ease, border 0.3s ease, background-color 0.3s ease;
     color: #000000;
}

.form input[type=submit]{
     color: #fff;
}

.form input:focus, .form textarea:focus, .form select:focus{
     border: 1px solid transparent;
     outline: 2px solid #21BDCA;
}

.form textarea{
     height: auto;
}

.form .errorlist{
     color: #da0000;
     font-size: 0.9em;
     line-height: 1em;
}

.modal_wrapper{
     position: fixed;
     top: 0;
     right: 0;
     height: 100vh;
     width: 100vw;
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 10;
     justify-content: center;
     align-items: center;
     display: none;
}

.modal_wrapper.show{
     display: flex;
}

.modal_wrapper .box{
     background-color: #ffffff;
     width: calc(100% - 30px);
     max-width: 600px;
     padding: 20px 20px;
     border-radius: 8px;
     position: relative;
}

.modal_wrapper .box .close_btn{
     position: absolute;
     top: -10px;
     right: -10px;
     background-color: #21BDCA;
     color: #fff;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: border 0.3s ease;
}

.modal_wrapper .box .close_btn:hover{
     border: 5px solid #80d1d8;
}

.modal_wrapper .button_wrapper{
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     margin: 10px 0 0 0;
}

.modal_wrapper .button_wrapper > *{
     width: 100%;
     margin-left: 10px;
}

body {
     direction: rtl;
     font-family: 'BYekan';
     font-size: 14px;
     background-color: #ECEFF8;
     min-height: 100vh;
     position: relative;
}

p{
     margin: 20px 0;
     color: #262626;
     font-size: 1.1em;
}

p strong{
     color: #21BDCA;
     font-weight: bolder;
     font-size: 1.2em;
}

nav {
     background-color: #ffffff;
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 5px solid #21BDCA;
}

nav .title_wrapper{
     display: flex;
     align-items: center;
     font-size: 0.85em;
}

nav .title_wrapper .logo_wrapper{
     background-color: #21BDCA;
     width: 50px;
     height: 50px;
     margin-left: 10px;
     overflow: hidden;
     display: flex;
     justify-content: center;
     align-items: center;
}

nav .title_wrapper .logo_wrapper img{
     width: 90%;
}

nav .title_wrapper .logo_wrapper i{
     font-size: 1.2rem;
     color: #fff;
}

nav .title_wrapper span{
     font-size: 0.7em;
     display: none;
}

nav .user_action_wrapper{
     display: none;
     align-items: center;
     margin-left: 20px;
     cursor: pointer;
     position: relative;
}

nav .user_action_wrapper .sub_menu{
     position: absolute;
     width: 100%;
     top:100%;
     right: 0;
     font-size: 0.85em;
     display: none;
}

nav .user_action_wrapper .sub_menu.show{
     display: block;
}

nav .user_action_wrapper .sub_menu ul{
     list-style: none;
}

nav .user_action_wrapper .sub_menu ul li{
     padding: 10px 10px;
     background-color: #ffffff;
     color: #000000;
     transition: background-color 0.3s ease , color 0.3s ease  ;
}

nav .user_action_wrapper .sub_menu ul li:hover{
     padding: 10px 10px;
     background-color: #f4f4f4;
     color: #21BDCA;
}

nav .user_action_wrapper:hover{
     color: #737373;
}

nav .user_action_wrapper:hover .sub_menu{
     display: block;
}

nav .user_action_wrapper > *{
     margin-right: 10px;
}

nav .user_action_wrapper .avatar_wrapper{
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background-color: #21BDCA;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #ECEFF8;
     font-size: 1em;
     border: 4px solid #21BDCA;
     transition: border 0.3s ease;
     overflow: hidden;
}

nav .user_action_wrapper .avatar_wrapper img{
     width: 100%;
     height: 100%;
}
nav .user_action_wrapper .avatar_wrapper:hover{
     border: 4px solid #80d1d8;
}

nav .user_action_wrapper div{
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
}

nav .user_action_wrapper div span:nth-child(2){
     font-size: 0.7rem;
     color: #5e5e5e;
}

nav .res_menu_btn{
     margin-left: 10px;
}

.message_wrapper{
     padding: 10px;
     margin-bottom: 15px;
     border-radius: 5px;
     display: flex;
     justify-content: center;

}

.message_wrapper.success{
     background-color: #04B51C;
     color: #fff;
}

.message_wrapper.error{
     background-color: #C23101;
     color: #fff;
}

.message_wrapper.warning{
     background-color: #F2C204;
     color: #262626;
}

.message_wrapper p{
     font-size: 0.9rem;
     margin: 0;
     color: inherit;
     margin-right: 10px;
}

.center{
     display: flex;
     align-items: stretch;
     justify-content: stretch;
     width: 100%;
}

.center .side_menu{
     background-color: #ffffff;
     width: 100%;
     min-height: calc(100vh - 55px - 36px);
     font-size: 0.9em;
     position: absolute;
     display: none;
}

.center .side_menu.show{
     display: inherit;
}

.menu{
     width: 100%;
     display: flex;
     flex-direction: column;
 }

 .menu_item{
     text-align: right;
     color: #000000;
     cursor: pointer;
     transition: all 0.3s;
     background-color: #ffffff;
     border-bottom: solid 1px #e1e1e1;
     position: relative;
 }

 .menu_item a{
     position: relative;
     z-index: 2;
 }

 .menu_item::before{
      content: '';
      position: absolute;
      height: 100%;
      width: 0%;
      background-color: #21BDCA;
      top: 0;
      right: 50px;
      transition: width 0.3s ease ;
      z-index: 1;
 }

 .menu_item:hover::before{
      width: calc(100% - 50px);
      color: #ffffff;
 }

 .menu_item:hover a{
      color: #ffffff;
 }

 .menu_item a .icon_wrapper{
     width: 50px;
     height: 50px;
     background-color: #21BDCA;
     display: flex;
     justify-content: center;
     align-items: center;
     color: #ffffff;
     margin-left: 10px;
     font-size: 1.3em;
 }

 .menu_item a{
     display: flex;
     align-items: center;
 }

.menu_item.active{
     background-color: #21BDCA;
     color: #ffffff;
 }

 .submenu {
     position: relative;
     width: 100%;
     display: flex;
     flex-direction: column;
     border-bottom: solid 1px #e1e1e1;
 }

 .submenu a .arrow {
     margin-right: 10px;
     font-size: 0.8em;
     transition: all 0.5s;
 }

 .submenu_item{
     text-align: right;
     color: #000000;
     padding: 0.7rem 0.5rem;
     cursor: pointer;
     transition: all 0.3s;
     padding-right: 10px;
     background-color: #f4f4f4;
     border-right: 5px solid #21BDCA;
     font-size: 0.9em;
     color: #262626;
 }

 .submenu_item a i{
     margin-left: 10px;
 }

 .submenu_item:hover{
     background-color: #e1e1e1;
 }

 .submenu_wrapper{
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.2s ease-out;
     transition: all 0.5s;
     width: 100%;
 }

 .center .content{
     width: 100%;
     padding: 10px;
}

 .center .content .top_row{
     display: flex;
     margin: 10px 0;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
}

.content_title{
     font-size: 1.4em;
     color: #5e5e5e;
}

.content_box{
     background-color: #ffffff;
     padding: 5px 10px;
     border-radius: 8px;
}

footer{
     background-color: #262626;
     color: #ffffff;
     font-size: 0.8em;
     padding: 10px;
     display: inline-block;
     position: absolute;
     bottom: 0;
     width: 100%;
}

#pagination {
     display: flex;
     justify-content: center;
     margin: 20px 0;
 }

 #pagination .page_wrapper ul{
     display: flex;
     flex-direction: row-reverse;
     flex-wrap: wrap;
     list-style: none;
 }

 #pagination .page_wrapper a{
     border: none;
     text-transform: capitalize;
     color: inherit;
     padding: 0.5rem 1rem;
     display: inline-block;
 }

 #pagination .page_wrapper ul li{
     margin: 0 0.3rem;
     background-color: #FFFFFF;
     color: #21BDCA;
     border: #e1e1e1 solid 1px;
     height: 100%;
     transition: background-color 0.3s ease ;
 }

 #pagination .page_wrapper ul li:hover{
     background-color: #ECEFF8;
 }

 #pagination .page_wrapper ul li.active{
     color: #fff;
     background-color: #21BDCA;
 }

 #login{
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
      min-height: calc(100vh - 200px);
      padding: 20px;
 }

 .login_wrapper{
      background-color: #fff;
      width: 95%;
      max-width: 400px;
 }

 .login_wrapper .title{
      background-color: #21BDCA;
      padding: 10px;
      color: #fff;
      text-align: center;
 }

 .profile_section1_wrapper{
     padding: 20px;
 }

 .profile_avatar_wrapper{
     background-color: #21BDCA;
     width: 150px;
     height:150px ;
     max-width: 100%;
     margin: 10px auto;
     border-radius: 50%;
     overflow: hidden;
     display: flex;
     justify-content: center;
     align-items: center;
     border: 7px solid #21BDCA;
     color: #FFFFFF;
     font-size: 4rem;

 }

 .profile_avatar_wrapper img{
     width: 100%;
     transition: transform ease-in 0.3s;
 }

 .profile_avatar_wrapper img:hover{
     transform: scale(1.1);
 }

 .profile_fullname{
     color: #5e5e5e;
     border-bottom: solid 1px #5e5e5e;
     padding: 20px 0;
 }

 .profile_fullname_wrapper{
    display: flex;
    align-items: flex-end;
    border-bottom: solid 1px #5e5e5e;
    margin-bottom: 20px;
    padding: 15px 0;
    color: #5e5e5e;
 }

 .profile_detail_wrapper{
     text-align: center;
     padding: 10px 0 ;
 }

 #access_denied{
     text-align: center;
     padding: 50px 10px;
     color: #5e5e5e ;
 }

 #access_denied .col4 > *{
     margin: 10px 0;
 }

 .table_search_wrapper{
     margin: 20px 10px;
 }
#patient_actions_wrapper div{
     padding: 10px;
}

#dashboard_title_wrapper{
     display: flex;
     align-items: baseline;
     margin: 10px 10px;
}

#dashboard_title_wrapper h2{
     font-size: 1.7em;
}

#dashboard_title_wrapper h4{
     font-size: 0.9em;
     margin-right: 5px;
     color: #737373;
}

.dashboard_box{
     background-color: #FFFFFF;
     border-radius: 5px;
     padding: 10px 20px;
     margin: 10px 10px 10px 10px;
     display: flex;
     justify-content: center;
     align-items: center;
}
.dashboard_box > *{
     margin-left: 20px;
}

.dashboard_box .box_icon_wrapper {
     width: 40px;
     height: 40px;
     background-color: red;
     border-radius: 5px;
     display: flex;
     justify-content: center;
     align-items: center;
}

.dashboard_box .box_icon_wrapper i{
     font-size: 20px;
     color: #FFFFFF;
}

.dashboard_box .box_content_wrapper h2 {
     color: #ACB0CC;
     font-size: 1.1em;
}

.dashboard_box .box_content_wrapper h3 {
     color: #5E5E5E;
     font-size: 0.9em;
}

.quick_box{
     margin: 20px;
     border: solid 1px #b3b3b3;
     display: flex;
     justify-content: center;
     padding: 20px;
     border-radius: 5px;
     color: #262626;
     position: relative;
     z-index: 1;
     overflow: hidden;
     transition: color 0.3s ease;

}
.quick_box > *{
     z-index: 1;
}

.quick_box::before{
     content: '';
     position: absolute;
     width: 0;
     height: 100%;
     background-color: #21BDCA;
     top :0;
     left: 0;
     z-index: 0;
     transition: width 0.3s ease;
}

.quick_box::after{
     content: '';
     position: absolute;
     width: 0;
     height: 0;
     background-color: #21BDCA;
     top :0;
     right: 0;
     z-index: 0;
     transition: width 0.3s ease;

}

.quick_box:hover::before{
     width: 50%;
     height: 100%;
}

.quick_box:hover::after{
     width: 50%;
     height: 100%;
}

.quick_box i{
     color: #21BDCA;
     transition: color 0.3s ease;
}

.quick_box:hover{
     color: #FFFFFF;
}

.quick_box:hover i{
     color: #FFFFFF;
}

.print_wrapper{
     color: #262626;
     font-size: 12px;
}

.print_wrapper strong{
     /* background-color: red; */
     font-size: 10px;
     color: black;
}

.print_wrapper span{
     margin: 0 0 5px 0;
}

.print_wrapper hr{
     border: none;
     border-top: 1px dashed #b3b3b3;
     width: 100%;
     margin-bottom: 10px;
}

.print_wrapper .main_title{
     font-size: 1.5em;
     font-weight: bolder;
     margin: 0 0 5px 0 ;
}

.print_wrapper .sub_title{
     font-size: 1.1em;
}

.print_wrapper .strip{
     background-image: linear-gradient(45deg, #e0e0e0 13.64%, #e8e8e8 13.64%, #e8e8e8 50%, #e0e0e0 50%, #e0e0e0 63.64%, #e8e8e8 63.64%, #e8e8e8 100%);
     background-size: 15.56px 15.56px;
     border-bottom: 1px #b3b3b3 solid;
}

.print_wrapper .page {
     width: 21cm;
     min-height: 29.7cm;
     padding: 0.3cm;
     margin: 1cm auto;
     border: 1px #D3D3D3 solid;
     border-radius: 5px;
     background: #ffffff;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;

}

.print_wrapper .row{
     width: 100%;
     display: flex;
     justify-content: space-between;
     overflow: hidden;
     margin-bottom: 10px;
}

.print_wrapper .row.col{
     flex-direction: column;
}

.print_wrapper .border{
     border: 1px #b3b3b3 solid;
     border-radius: 0.1cm;
}

.print_wrapper table{
     text-align: center;
     border-collapse: collapse;
}

.print_wrapper table th{
     text-align: left;
     padding: 3px 5px;
     font-size:12px;
     color: #262626;
}

.print_wrapper table td{
     text-align: center;
     padding: 3px 5px;
     font-size: 14px;
     color: black;
}

.print_wrapper table.table_col th{
     text-align: center;
}

.print_wrapper .row .row_title{
     background-color: #D3D3D3;
     padding: 5px;
}

.print_wrapper .row .row_content{
     background-color: #ffffff;
     padding: 5px;
     display: flex;
     justify-content: space-between;


}

.print_wrapper .row .row_content .content_table_wrapepr{
     width: 100%;
}

.print_wrapper .row .row_content .content_table_wrapepr table{
     width: 100%;

}

.print_wrapper .row .row_content .content_table_wrapepr td,.row .row_content .content_table_wrapepr th{
     border: solid 1px #D3D3D3;
     padding: 8px;
}

.print_wrapper .row .row_content .content_table_wrapepr th{
     background-color: #E8E8E8;
}

.print_wrapper .row .row_content .pic_wrapper{

     width: 3cm;
     max-height: 4cm;
     flex-shrink: 0;
     margin-right: 5px;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
}

.print_wrapper .row .row_content .pic_wrapper span{

     transform: rotate(-45deg);
     font-size: 2em;
     color:#737373 ;
     margin:100px 0 ;
}

.print_wrapper .row .row_content .pic_wrapper img{

     width: 100%;

}

.print_wrapper .row .head_content{
     display: flex;
     flex-direction: column;
}

.print_wrapper #sh_scan{
     max-height: 13cm;
}

.print_wrapper .prescription_scan{
     max-height: 7cm;
     max-width: 100%;
}

#er404{
     width: 95%;
     max-width: 500px;
}

@page {
     size: A4;
     margin: 3mm;
   }

@media print {
     body{
          background-color: #ffffff;
     }
     .print_wrapper .page {
       margin: 0;
       border: initial;
       border-radius: initial;
       width: initial;
       min-height: initial;
       box-shadow: initial;
       background: initial;
       page-break-after: always;
     }
   }