.top-content.first-row .first-col-content { grid-column: 3/61; } .top-content.first-row .second-col-content { grid-column: 62/89; } .top-content.first-row label { background: #df818c; } @media (max-width: 600px) { .top-content.first-row .first-col-content { grid-column: 3/101; } .top-content.first-row .second-col-content { grid-column: 3/101; } } .fdiv, .nav-link.active, .nav-link.active > .nav-title, .pane-content { background-color: #fbaab2; } .checkbox-wrapper input[type="checkbox"] { background-color: #950909; } .last-div { display: none; } .nav-tabs::-webkit-scrollbar-thumb { background: linear-gradient(90deg, rgb(199 72 86) 0%, rgb(251 170 178) 40%, rgb(199 72 86) 100%); } .disactived { pointer-events: none; opacity: 0.8; } .position-box .select2-container { text-align: right; } .position-box .select2-container--default.select2-container--disabled .select2-selection--single { background-color: #f7bfc4; } .options-type { align-self: center; text-align: center; color: #343434; font-size: 12px; } .options-check { padding: 4px 3px; border-radius: 7px; margin: 10px; box-shadow: 2px 2px 8px 0px rgb(189 53 64); background-color: #df818c; border: 1px solid #bf7079; direction: rtl; justify-content: space-around; flex-wrap: nowrap; } .options-info { text-align: center; padding: 10px; color: #894d4d; } .options-box { border-radius: 24px; box-shadow: 0px 0px 5px 0px rgb(193 50 61); height: auto; background-color: #f9bdc3; width: 100%; } .optional-wages { justify-content: space-around; } .checkbox-wrapper-2 input[type="checkbox"] { display: none; visibility: hidden; } .checkbox-wrapper-2 *, .checkbox-wrapper-2 *::before, .checkbox-wrapper-2 *::after { box-sizing: border-box; } .checkbox-wrapper-2 .toggleButton { cursor: pointer; display: block; transform-origin: 50% 50%; transform-style: preserve-3d; transition: transform 0.14s ease; } .checkbox-wrapper-2 .toggleButton:active { transform: rotateX(30deg); } .checkbox-wrapper-2 .toggleButton input + div { border: 3px solid rgb(0 255 0); border-radius: 50%; position: relative; width: 38px; height: 38px; } .checkbox-wrapper-2 .toggleButton input + div svg { fill: none; stroke-width: 4.6; stroke: #8b0808; stroke-linecap: round; stroke-linejoin: round; width: 38px; height: 38px; display: block; position: absolute; left: -3px; top: -3px; right: -3px; bottom: -3px; z-index: 1; stroke-dashoffset: 124.6; stroke-dasharray: 0 162.6 133 29.6; transition: all 0.4s ease 0s; } .checkbox-wrapper-2 .toggleButton input + div:before, .checkbox-wrapper-2 .toggleButton input + div:after { content: ""; width: 3px; height: 16px; background: #8b0808; position: absolute; left: 50%; top: 50%; border-radius: 5px; } .checkbox-wrapper-2 .toggleButton input + div:before { opacity: 0; transform: scale(0.3) translate(-50%, -50%) rotate(45deg); -webkit-animation: bounceInBefore-44 0.3s linear forwards 0.3s; animation: bounceInBefore-44 0.3s linear forwards 0.3s; } .checkbox-wrapper-2 .toggleButton input + div:after { opacity: 0; transform: scale(0.3) translate(-50%, -50%) rotate(-45deg); -webkit-animation: bounceInAfter-44 0.3s linear forwards 0.3s; animation: bounceInAfter-44 0.3s linear forwards 0.3s; } .checkbox-wrapper-2 .toggleButton input:checked + div svg { stroke-dashoffset: 162.6; stroke-dasharray: 0 162.6 28 134.6; transition: all 0.4s ease 0.2s; stroke: #0f0; } .checkbox-wrapper-2 .toggleButton input:checked + div:before { opacity: 0; transform: scale(0.3) translate(-50%, -50%) rotate(45deg); -webkit-animation: bounceInBeforeDont-44 0.3s linear forwards 0s; animation: bounceInBeforeDont-44 0.3s linear forwards 0s; stroke: #0f0; } .checkbox-wrapper-2 .toggleButton input:checked + div:after { opacity: 0; transform: scale(0.3) translate(-50%, -50%) rotate(-45deg); -webkit-animation: bounceInAfterDont-44 0.3s linear forwards 0s; animation: bounceInAfterDont-44 0.3s linear forwards 0s; stroke: #0f0; } /*.actived { border: double !important; }*/ @-webkit-keyframes bounceInBefore-44 { 0% { opacity: 0; transform: scale(0.3) translate(-50%, -50%) rotate(45deg); } 50% { opacity: 0.9; transform: scale(1.1) translate(-50%, -50%) rotate(45deg); } 80% { opacity: 1; transform: scale(0.89) translate(-50%, -50%) rotate(45deg); } 100% { opacity: 1; transform: scale(1) translate(-50%, -50%) rotate(45deg); } } @keyframes bounceInBefore-44 { 0% { opacity: 0; transform: scale(0.3) translate(-50%, -50%) rotate(45deg); } 50% { opacity: 0.9; transform: scale(1.1) translate(-50%, -50%) rotate(45deg); } 80% { opacity: 1; transform: scale(0.89) translate(-50%, -50%) rotate(45deg); } 100% { opacity: 1; transform: scale(1) translate(-50%, -50%) rotate(45deg); } } @-webkit-keyframes bounceInAfter-44 { 0% { opacity: 0; transform: scale(0.3) translate(-50%, -50%) rotate(-45deg); } 50% { opacity: 0.9; transform: scale(1.1) translate(-50%, -50%) rotate(-45deg); } 80% { opacity: 1; transform: scale(0.89) translate(-50%, -50%) rotate(-45deg); } 100% { opacity: 1; transform: scale(1) translate(-50%, -50%) rotate(-45deg); } } @keyframes bounceInAfter-44 { 0% { opacity: 0; transform: scale(0.3) translate(-50%, -50%) rotate(-45deg); } 50% { opacity: 0.9; transform: scale(1.1) translate(-50%, -50%) rotate(-45deg); } 80% { opacity: 1; transform: scale(0.89) translate(-50%, -50%) rotate(-45deg); } 100% { opacity: 1; transform: scale(1) translate(-50%, -50%) rotate(-45deg); } } @-webkit-keyframes bounceInBeforeDont-44 { 0% { opacity: 1; transform: scale(1) translate(-50%, -50%) rotate(45deg); } 100% { opacity: 0; transform: scale(0.3) translate(-50%, -50%) rotate(45deg); } } @keyframes bounceInBeforeDont-44 { 0% { opacity: 1; transform: scale(1) translate(-50%, -50%) rotate(45deg); } 100% { opacity: 0; transform: scale(0.3) translate(-50%, -50%) rotate(45deg); } } @-webkit-keyframes bounceInAfterDont-44 { 0% { opacity: 1; transform: scale(1) translate(-50%, -50%) rotate(-45deg); } 100% { opacity: 0; transform: scale(0.3) translate(-50%, -50%) rotate(-45deg); } } @keyframes bounceInAfterDont-44 { 0% { opacity: 1; transform: scale(1) translate(-50%, -50%) rotate(-45deg); } 100% { opacity: 0; transform: scale(0.3) translate(-50%, -50%) rotate(-45deg); } } @media (max-width: 1551px) { label { margin-bottom: 2px; } .checkbox-wrapper-2 .toggleButton input + div, .checkbox-wrapper-2 .toggleButton input + div svg { width: 32px; height: 32px; margin: 2px 0px 3px 0px; } .checkbox-wrapper-2 .toggleButton input + div svg { top: -5px; } } @media (max-width: 430px) { .options-type { font-size: 9px !important; } .checkbox-wrapper-2 .toggleButton input + div, .checkbox-wrapper-2 .toggleButton input + div svg { width: 25px; height: 25px; } .main-title { left: 65%; } }