.popover-body { font-family: IRANSansFaNum, sans-serif; } .logo { width: 65px; height: 65px; } .logoType { font-size: 12px; color: #f6f6f6; margin-top: 5px; } .ministry-logo { margin-bottom: 35px; } .fa-question-circle { cursor: pointer; color: #db7240; font-size: 1.4rem; } .tutorial { cursor: pointer; } .header { z-index: 500; color: #fff; position: relative; top: 0; } .header-desc { background: #015688 !important; border-top: 0; } .header-cta { background: #2070af; } ul { list-style-type: none; } ul.header-items { font-weight: 300; font-size: 14px; } ul.header-items li.header-item { cursor: pointer; position: relative; padding: 10px; margin-top: 3px; transition: 0.3s all; border-top-left-radius: 8px; border-top-right-radius: 8px; } ul.header-items li.header-item:hover { background: #015688; } .arrow-icon { width: 10px; transition: 0.3s all; } ul.header-items li.header-item:hover>.arrow-icon { transform: rotate(-90deg); } ul.header-sub-items li.header-sub-item:hover>.arrow-icon { transform: rotate(-90deg); } ul.header-sub-items { position: absolute; display: block; font-weight: 400; cursor: pointer; width: max-content; padding: 5px 0 5px 5px; top: 100%; right: 0; background: #015688; padding: 0.5rem; font-weight: 400; font-size: 14px; } ul.header-sub-items li.header-sub-item { position: relative; padding: 6px 10px; background: transparent; transition: 0.3s all; } ul.header-sub-items li.header-sub-item:hover { box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; background: #2070af; margin-right: 5px; } ul.header-item-sub-items { position: absolute; display: block; font-weight: 300; cursor: pointer; width: max-content; padding: 5px 0 5px 5px; top: -5px; right: 100%; background: #015688; padding: 0.5rem; } ul.header-item-sub-items li.header-item-sub-item { padding: 6px 10px; background: #015688; transition: 0.3s all; } ul.header-item-sub-items li.header-item-sub-item:hover { box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; background: #2070af; margin-right: 5px; } .breadcrumb-selfdesign { padding: 2px; background: #f6f6f6; border-bottom: 1px solid #015688; } .breadcrumb-selfdesign ul { display: flex; } .breadcrumb-item-selfdesign { padding: 0px 10px; font-size: 14px; font-weight: 500; color: #db7240; } .breadcrumb-item-selfdesign a { color: #172d3e; font-size: 14px; font-weight: 400; transition: .2s all; } .breadcrumb-item-selfdesign a:hover { color: #db7240; } .breadcrumb-back { padding: 5px 10px; color: #172d3e; border: none; border-radius: 5px; font-size: 14px; font-weight: 500; transition: .2s all; background: #bfbfbf; } .breadcrumb-back:hover { background: #db7240; color: #fff; } .logo-box { border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom: none; background: #015688; margin-top: -40px; } /* .btn-login { padding: 5px 10px; border: none; border-radius: 5px; font-size: 14px; transition: .2s all; background: #bfbfbf; } .btn-login:hover { background: #db7240; color: #fff; } */ .support { cursor: pointer; color: #172d3e; transition: 0.3s all; font-size: 14px; } .contactUs { cursor: pointer; color: #172d3e; transition: 0.3s all; font-size: 14px; } .support:hover, .contactUs:hover { color: #db7240; } .logo-img { width: 190px; } .date-header { color: rgb(53, 53, 53); font-size: 12px; } /* responsive part */ .header-res { width: 100%; background: #ededed; box-shadow: rgb(0 0 0 / 35%) 0px 5px 14px; } .btn-burgur { display: flex; align-items: center; justify-content: center; border: none; font-size: 20px; width: 30px; height: 30px; color: #fff; padding: 7px; margin: 5px 5px; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; background: #153b58; } .res-menu-box { position: absolute; font-size: 14px; width: 100%; height: calc(100% - 85px); padding: 20px; background: #fff; box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px; right: -100%; top: 85px; z-index: 500; background: #153b58; overflow: overlay; justify-content: flex-start; } .res-support { cursor: pointer; color: #172d3e; font-size: 12px; font-weight: 500; } .contactUs { cursor: pointer; color: #172d3e; font-size: 12px; font-weight: 500; } .btn-profile { padding: 6px 8px; border: none; border-radius: 3px; font-size: 14px; background: #bfbfbf; color: #172d3e; } .dd-item { font-size: 12px; font-weight: 500; display: flex; padding-right: 10px; justify-content: start; } .res-header-item { color: #fff; padding: 5px; text-align: center; } .res-logo-box { border-bottom: 1px solid #e1e1e1; } .res-logo-box .logo { width: 35px !important; height: 35px !important; margin: 4px 5px; } .res-header-item .item { font-size: 14px; padding: 5px 0; background: #d97140; border-radius: 5px; } .subitem { font-size: 14px; padding: 3px 0; background: #b4562a; border-radius: 5px; margin-top: 5px; } .subitem-item { font-size: 12px; padding: 1px 0; background: #8b401c; border-radius: 5px; margin-top: 5px; } .res-header-subitems { display: none; } .res-header-subitem-items { display: none; } .responsive-header { display: none; } .btn-user-data { border: none; color: #fff; margin-right: 10px; margin-top: 5px; background: transparent; font-size: 17px; } @media (max-width: 720px) { .header { display: none; } .responsive-header { display: unset; } } /* end responsive part */ /* loader */ @keyframes loader { 0% { transform: rotate(0deg); } 25% { transform: rotate(180deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } } @keyframes loader-inner { 0% { height: 0%; } 25% { height: 0%; } 50% { height: 100%; } 75% { height: 100%; } 100% { height: 0%; } } .divloader { display: none; justify-content: center; align-items: center; position: fixed; right: 0; left: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 1200; } .loader { display: inline-block; width: 40px; height: 40px; position: relative; border: 4px solid #ff5c0f; top: 0; animation: loader 2s infinite ease; } .loader-inner { vertical-align: top; display: inline-block; width: 100%; background-color: #fff; animation: loader-inner 2s infinite ease-in; } /* end loader */