/* XX-Large devices (larger desktops, 1400px and up) */ @media (max-width: 1400px) { } /* X-Large devices (desktops, 1366px and up) */ @media (min-width: 1366px) { } /* X-Large devices (desktops, 1366px and up) */ @media (max-width: 1366px) { .btn-primary, .btn-secondary { width: 150px; padding: 10px; font-size: 14px; } /* operation btn in personal */ .table-personals .operations-btns .personal-operation-btn h4 { font-size: 12px; font-weight: 500; } .table-personals .operations-btns .personal-operation-btn p { font-size: 11px; font-weight: 300; } /* End operation btn in personal */ /* ********************************************** Start Table Workshop List ********************************************** */ .table-workshop .Rtable--collapse .Rtable-row { padding: 2px 5px; outline: none; margin: 5px 0px 0; } .table-workshop .workshop-list .Rtable--collapse .Rtable-row--head { display: flex; } .table-workshop .workshop-list .width1 { width: 10%; } .table-workshop .workshop-list .width2 { width: 20%; } .table-workshop .workshop-list .width3 { width: 20%; } .table-workshop .workshop-list .width4 { width: 20%; } .table-workshop .workshop-list .width5 { width: 15%; } .table-workshop .workshop-list .width6 { width: 15%; display: flex; justify-content: end; } .table-workshop .workshop-list .Rtable--collapse .Rtable-row .Rtable-cell:last-child .Rtable-cell--content { /*text-align: center;*/ } /* Mobile Workshop */ .table-workshop .Rtable .Rtable-row .mobile-workshop { padding: 2px 1px; margin: 0 auto; } .table-workshop .Rtable .Rtable-row .mobile-workshop .Rtable-cell--heading img { width: 50px; border-radius: 5px; border: 4px solid rgba(87, 227, 227, 0.25); } .table-workshop .Rtable .Rtable-row .mobile-workshop .Rtable-cell--heading span { color: #0B5959; text-align: center; font-size: 11px; font-style: normal; font-weight: 500; } .table-workshop .Rtable .Rtable-row .mobile-workshop .Rtable-cell--content:last-child { border-right: 1px dashed #CACACA; padding-right: 10px; display: flex; } /* Buttons */ .table-workshop .Rtable .Rtable-row .mobile-workshop .Rtable-cell--content button.btn-edit { border: 1px solid transparent; width: 30px; height: 30px; border-radius: 3px; padding: 3px 1px; color: #009EE2; margin: auto 0 auto 1px; /* background-color: #ffffff; */ background-color: rgba(52, 209, 209, 0.20); box-shadow: 0; transition: ease .2s; } .table-workshop .Rtable .Rtable-row .mobile-workshop .Rtable-cell--content button.btn-edit svg { color: #009EE2; } .table-workshop .Rtable .Rtable-row .mobile-workshop .Rtable-cell--content button.btn-edit:hover { color: #ffffff; /* background-color: #009EE2; */ background-color: rgba(52, 209, 209, 0.40); } .table-workshop .Rtable .Rtable-row .mobile-workshop .Rtable-cell--content button.btn-edit:hover svg { color: #009EE2; } .table-workshop .Rtable .Rtable-row .mobile-workshop .Rtable-cell--content button.btn-delete { border: 1px solid transparent; width: 30px; height: 30px; border-radius: 3px; padding: 3px 1px; color: #FF5151; margin: auto 1px auto 0; /* background-color: #ffffff; */ background: rgba(209, 50, 50, 0.15); transition: ease .2s; } .table-workshop .Rtable .Rtable-row .mobile-workshop .Rtable-cell--content button.btn-delete svg { color: #FF5151; } .table-workshop .Rtable .Rtable-row .mobile-workshop .Rtable-cell--content button.btn-delete:hover { color: #ffffff; /* background-color: #FF5151; */ background-color: rgba(209, 50, 50, 0.25); } .table-workshop .Rtable .Rtable-row .mobile-workshop .Rtable-cell--content button.btn-delete:hover svg { color: #FF5151; } .table-workshop .Rtable .Rtable-row .mobile-workshop .Rtable-cell--content button.btn-edit span, .table-workshop .Rtable .Rtable-row .mobile-workshop .Rtable-cell--content button.btn-delete span { display: none; } .table-workshop .Rtable .Rtable-row .mobile-workshop .Rtable-cell--content button.btn-more { height: 30px; border-radius: 3px; position: relative; overflow: hidden; color: #059669; text-align: right; font-size: 11px; padding: 3px 1px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.22px; background-color: #B6F2E1; /* margin: auto 0 auto 2px; */ margin: 2px 0; /* display: flex !important; */ } .table-workshop .Rtable .Rtable-row .employer-count, .table-workshop .Rtable .Rtable-row .mobile-workshop .employer-count { text-align: center; width: 30px; height: 30px; background-color: #B6F2E1; border: 2px solid #059669; border-radius: 50px; align-items: center; display: flex; justify-content: center; color: #0B5959; font-size: 11px; margin-left: 10px; overflow: hidden; } .table-workshop .Rtable .Rtable-row .employer-count img, .table-workshop .Rtable .Rtable-row .mobile-workshop .employer-count img { width: 100%; opacity: 0.6; } .table-workshop .Rtable .Rtable-row .employer-count span, .table-workshop .Rtable .Rtable-row .mobile-workshop .employer-count span { font-weight: 700; color: #0B5959; opacity: 1; z-index: 1; } .table-workshop .Rtable .Rtable-row .mobile-workshop .Rtable-cell--content button.btn-more span { text-align: center; margin: 0 auto !important; display: flex !important; } /* ********************************************** End Table Workshop List ********************************************** */ /*********************************** Start Table Contract List ***********************************/ .table-contracts .contract-list .Rtable--collapse .Rtable-row--head { display: flex; } .table-contracts .contract-list .width1 { width: 10%; font-size:11px; } .table-contracts .contract-list .width2 { width: 13%; font-size: 11px; } .table-contracts .contract-list .width3 { width: 13%; font-size: 11px; } .table-contracts .contract-list .width4 { width: 23%; font-size: 11px; } .table-contracts .contract-list .width5 { width: 13%; font-size: 11px; } .table-contracts .contract-list .width6 { width: 13%; font-size: 11px; } .table-contracts .contract-list .width7 { width: 10%; display: flex; justify-content: center; font-size: 11px; } .table-contracts .contract-list .width8 { width: 5%; display: flex; justify-content: end; font-size: 11px; } /*********************************** End Table Contract List ***********************************/ } /* Large devices (desktops, 1200px and up) */ @media (min-width: 992px) { } /* Large devices (desktops, 992px and up) */ @media (max-width: 992px) { /* .wrapper { height: 100vh; }*/ .table-contracts { height: auto; padding: 0 0 70px 0; } .Rtable { padding: 3px 6px; } /* ******************* Search Advance in Modal from bottom ******************* */ #searchModal.modal .modal-content .modal-header h5 { color: #292929; text-align: right; font-size: 12px; font-weight: 600; } #searchModal.modal .modal-content .modal-header .iphone-line { width: 90px; height: 6px; border-radius: 30px; background: #909090; } #searchModal.modal .modal-body .search-box { padding: 0; } #searchModal.modal .modal-body .search-box .form-control { margin: 0 0 7px !important; } #searchModal.modal .modal-body .search-box input[type="text"], #searchModal.modal .modal-body .search-box .form-select { padding: 7px; border-radius: 7px !important; } #searchModal.modal .modal-body .search-box p { font-size: 13px; } #searchModal.modal .modal-content .modal-footer { border-top: 1px solid #D5D5D5; padding: 15px 0; } /* ******************* End Search Advance in Modal from bottom ******************* */ /************** Personel Modal Info ***************/ .info-personal img { width: 60px; height: 60px; } .info-personal .info-name h5 { font-size: 14px; font-weight: 400; } .info-personal .info-name span { font-size: 10px; font-weight: 300; } .info-personal .info-personal-table .title-personal { padding: 1px 3px; } .info-personal .info-personal-table .title-personal span { font-size: 11px; font-weight: 300; } .info-personal { padding: 0px; } /************** End Personel Modal Info ***************/ /************** Start Contract Table ***************/ .table-contracts .contract-list .Rtable--collapse .Rtable-row--head { display: flex; } .table-contracts .contract-list .width1 { width: 10%; font-size: 10px !important; } .table-contracts .contract-list .width2 { width: 15%; } .table-contracts .contract-list .width3 { width: 15%; } .table-contracts .contract-list .width4 { width: 25%; } .table-contracts .contract-list .width5 { width: 15%; } .table-contracts .contract-list .width6 { width: 15%; } .table-contracts .contract-list .width7 { width: 10%; display: flex; justify-content: center; } .table-contracts .contract-list .width8 { width: 10%; display: flex; justify-content: end; } /************** End Contract Table ***************/ } /* Medium devices (tablets, 768px and up) */ @media (max-width: 767px) { .list-box { padding: 4px 10px 70px 10px; /*margin-bottom: 100px !important;*/ } /* Table Responsive ==================================== */ .is-striped { background-color: rgb(114, 20, 20); } .Rtable--collapse { display: block; width: 100%; box-shadow: none; border: 0 solid white; /* padding: 5px 10px; */ /* padding: 0 5px 10px; */ } .Rtable--collapse .Rtable-row { box-sizing: border-box; width: 100%; display: flex; flex-wrap: wrap; margin: 10px 0px 0; /* box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); */ border: 0; padding: 1em; overflow: hidden; outline: 1.8px dashed #097575; } .Rtable--collapse .Rtable-row:first-child { margin-top: 5px; } .Rtable--collapse .Rtable-row .Rtable-cell { /* width: 100% !important; */ display: flex; align-items: center; border-bottom: 0.5px dashed #CACACA; } .Rtable { padding: 0px; } .Rtable .Rtable-row .Rtable-cell { padding: 0.4em; } .Rtable--collapse .Rtable-row .Rtable-cell:last-child { border-bottom: none; } .Rtable--collapse .Rtable-row .Rtable-cell .Rtable-cell--heading { display: inline-block; flex: 1; /* max-width: 120px; min-width: 120px; */ color: #0B5959; font-size: 12px; font-weight: bold; /* border-right: 1px solid #ccc; */ /* margin-right: 1em; */ } .Rtable--collapse .Rtable-row .Rtable-cell .Rtable-cell--content { flex: 2; /* padding-left: 1em; */ color: #0B5959; font-size: 12px; text-align: end; } .Rtable--collapse .Rtable-row .Rtable-cell:last-child .Rtable-cell--content { text-align: center } .Rtable--collapse .topic-cell { background-color: #43bac0; color: white; font-weight: 400; order: -1; } .Rtable--collapse .topic-cell .Rtable-cell--content { padding-left: 0 !important; } .Rtable--collapse .Rtable-row--head { display: none; } .table-personals .Rtable--collapse .Rtable-row, .table-personals .Rtable .Rtable-row { display: block; padding: 0.2em; } .table-personals .Rtable .Rtable-row { background: #ECFFFF !important; } /* Start Workshop table */ .table-workshop .Rtable--collapse .Rtable-row { padding: 1px 5px; outline: none; margin: 5px 0px 0; } /* End Workshop table */ /* Start Personal table */ .table-personals .Rtable .Rtable-row .Rtable-personal { padding: 3px 10px; margin: 0 auto; } .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--heading img { width: 50px; border-radius: 5px; border: 4px solid rgba(87, 227, 227, 0.25); } .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--heading span { color: #0B5959; text-align: center; font-size: 13px; font-style: normal; font-weight: 500; } .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content:last-child { border-right: 1px dashed #CACACA; padding-right: 10px; display: flex; } /* Buttons */ .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content button.btn-edit { border: 1px solid transparent; width: 30px; height: 30px; border-radius: 3px; padding: 3px 1px; color: #009EE2; margin: auto 0 auto 1px; /* background-color: #ffffff; */ background-color: rgba(52, 209, 209, 0.20); box-shadow: 0; transition: ease .2s; } .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content button.btn-edit svg { color: #009EE2; } .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content button.btn-edit:hover { color: #ffffff; /* background-color: #009EE2; */ background-color: rgba(52, 209, 209, 0.40); } .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content button.btn-edit:hover svg { color: #009EE2; } .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content button.btn-delete { border: 1px solid transparent; width: 30px; height: 30px; border-radius: 3px; padding: 3px 1px; color: #FF5151; margin: auto 1px auto 0; /* background-color: #ffffff; */ background: rgba(209, 50, 50, 0.15); transition: ease .2s; } .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content button.btn-delete svg { color: #FF5151; } .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content button.btn-delete:hover { color: #ffffff; /* background-color: #FF5151; */ background-color: rgba(209, 50, 50, 0.25); } .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content button.btn-delete:hover svg { color: #FF5151; } .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content button.btn-edit span, .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content button.btn-delete span { display: none; } .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content button.btn-more { height: 30px; border-radius: 3px; position: relative; overflow: hidden; color: #059669; text-align: right; font-size: 11px; padding: 3px 1px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.22px; background-color: #B6F2E1; /* margin: auto 0 auto 2px; */ margin: 2px 3px; /* display: flex !important; */ } .table-personals .Rtable .Rtable-row .Rtable-personal .Rtable-cell--content button.btn-more span { text-align: center; margin: 0 auto !important; display: flex !important; } /* End Personal table */ /* ********************************************** Table Personal List ********************************************** */ .personalListModal .personal-list .Rtable--collapse .Rtable-row { padding: 4px 10px; outline: none; margin: 0.3em 0; } .personalListModal .personal-list .Rtable--collapse .Rtable-row--head { display: flex; } .personalListModal .personal-list .width1 { width: 10%; font-size: 11px; } .personalListModal .personal-list .width2 { font-size: 11px; } .personalListModal .personal-list .width3, .personalListModal .personal-list .width3 .Rtable-cell--content { width: 20%; font-size: 11px; justify-content: start; display: flex; } .personalListModal .personal-list .width4 { width: 10%; display: flex; justify-content: center; font-size: 11px; } .personalListModal .personal-list .width5, .personalListModal .personal-list .width5 .Rtable-cell--content{ width: 10%; display: flex; justify-content: center; font-size: 11px; } .personalListModal .personal-list .width6, .personalListModal .personal-list .width6 .Rtable-cell--content { width: 10%; display: flex; justify-content: end; font-size: 11px; } .personalListModal .personal-list .Rtable .Rtable-row .Rtable-cell, .personalListModal .personal-list .Rtable--collapse .Rtable-row .Rtable-cell { padding: 0; border: none; } .personalListModal .personal-list .Rtable--collapse .Rtable-row .Rtable-cell .Rtable-cell--content { text-align: right; } .personalListModal .personal-list .Rtable--collapse .Rtable-row .Rtable-cell .Rtable-cell--content:nth-last-child(4) { text-align: center; } .personalListModal .personal-list .Rtable--collapse .Rtable-row .Rtable-cell:nth-last-child(4) .Rtable-cell--content, .personalListModal .personal-list .Rtable--collapse .Rtable-row .Rtable-cell:last-child .Rtable-cell--content { text-align: center; } /* ********************************************** End Table Personal List ********************************************** */ /* ordanary btn for workshop & haghighi & hoghoghi */ .Rtable .Rtable-row .Rtable-cell button.btn-edit { width: 50%; padding: 7px 12px; background-color: #009EE2; margin: auto 0 auto 4px; color: #ffffff; height: auto; } .Rtable .Rtable-row .Rtable-cell button.btn-delete { width: 50%; border-radius: 3px; padding: 7px 12px; background-color: #FF5151; margin: auto 4px auto 0; color: #ffffff; height: auto; } .Rtable .Rtable-row .Rtable-cell button.btn-edit span, .Rtable .Rtable-row .Rtable-cell button.btn-delete span, button.btn-more span { display: inline-block; } .Rtable .Rtable-row .Rtable-cell button.btn-edit svg, .Rtable .Rtable-row .Rtable-cell button.btn-delete svg { color: #ffffff; } .Rtable .Rtable-row .Rtable-cell button.btn-edit:hover svg, .Rtable .Rtable-row .Rtable-cell button.btn-delete:hover svg { color: #ffffff; } .Rtable .Rtable-row .Rtable-cell button.btn-more { width: 50%; padding: 8px 12px; margin: auto 0 auto 4px; /* color: #ffffff; */ text-align: center; height: auto; } /* **************************** Contract Table ************************* */ .table-contracts .Rtable--collapse .Rtable-row { padding: 0.7em; } .table-contracts .Rtable .Rtable-row .Rtable-contract .checkbox-responsive { border-radius: 7px; background: #57E3E340; width: 70px; height: 45px; font-weight: 400; } .table-insurance .Rtable .Rtable-row .Rtable-insurance .checkbox-responsive span { border-radius: 7px; background: #57E3E340; width: 35px; height: 35px; font-weight: 400; align-items: center; display: flex; justify-content: center; } .table-insurance .Rtable .Rtable-row .Rtable-insurance .checkbox-responsive > span { font-size: 20px; font-weight: 500; margin-left: 8px; } .table-insurance .Rtable .Rtable-row .Rtable-insurance .Rtable-cell--heading { font-size: 12px; font-weight: 600; /* margin-left: 8px; */ } .table-insurance .Rtable .Rtable-row .Rtable-insurance .Rtable-cell--heading span { font-size: 10px; font-weight: 300; margin-left: 8px; } .table-insurance .Rtable .Rtable-row .Rtable-insurance .Rtable-cell--content { font-size: 14px; font-weight: 500; /* margin-left: 8px; */ padding: 0 10px 0 0; border-right: 1px dashed #CACACA; } .table-insurance .Rtable .Rtable-row .Rtable-insurance .Rtable-cell--content:last-child { border-right: none; } .table-contracts .Rtable .Rtable-row .Rtable-contract .checkbox-responsive > span { font-size: 25px; font-weight: 500; } .table-contracts .Rtable .Rtable-row .Rtable-contract .checkbox-responsive input { font-size: 20px; font-weight: 500; } .table-contracts .Rtable .Rtable-row .Rtable-contract .Rtable-cell--heading span { font-weight: 700; font-size: 14px; } .table-contracts .Rtable .Rtable-row .Rtable-contract .Rtable-cell--heading { padding: 0 10px; border-right: 1px dashed #CACACA; } .table-contracts .Rtable .Rtable-row .Rtable-contract .Rtable-cell--heading button.btn-print { width: 40px; height: 40px; border-radius: 8px; } .table-contracts .select-all label { font-size: 12px; font-style: normal; font-weight: 400; line-height: 24px; } /* **************************** End Contract Table ************************* */ /* End Buttons */ .number { display: block; right: -30px; top: -50px; font-size: 200px; color: rgba(0,0,0,0.07); text-align: right; white-space: nowrap; /* width: 50px; */ overflow: hidden; text-overflow: clip; /* border: 1px solid #000000; */ } /* Progress Step */ .step-progress p { font-size: 10px; font-weight: 200; } /* End Progress Step */ /* ==================================== End Table Responsive */ } @media all and (max-width: 750px) { } /* Small devices (landscape phones, 576px and up) */ @media (max-width: 576px) { /* **************************** Contract Table ************************* */ .table-contracts .Rtable--collapse .Rtable-row { padding: 0.7em; } .table-contracts .Rtable .Rtable-row .Rtable-contract .checkbox-responsive { width: 45px; height: 35px; padding: 0 5px; margin-left: 5px !important; font-weight: 300; } .table-contracts .Rtable .Rtable-row .Rtable-contract .checkbox-responsive > span { font-size: 14px; font-weight: 600; } .table-contracts .Rtable .Rtable-row .Rtable-contract .checkbox-responsive input { font-size: 10px; font-weight: 300; margin-left: 5px !important; } .table-contracts .Rtable .Rtable-row .Rtable-contract .Rtable-cell--heading span, .table-contracts .Rtable .Rtable-row .Rtable-contract .Rtable-cell--content { font-weight: 700; font-size: 12px; } .table-contracts .Rtable .Rtable-row .Rtable-contract .Rtable-cell--heading { padding: 0 6px; border-right: 1px dashed #CACACA; font-weight: 300; font-size: 12px; } .table-contracts .Rtable .Rtable-row .Rtable-contract .Rtable-cell--heading:last-child { padding: 0 6px 0 0; } .table-contracts .Rtable .Rtable-row .Rtable-contract .Rtable-cell--heading button.btn-print { width: 30px; height: 30px; } /* **************************** End Contract Table ************************* */ } /* X-Small devices (portrait phones, less than 576px) No media query for `xs` since this is the default in Bootstrap */ @media (max-width: 416px) { }