.wtotem_item { margin-bottom: 23px; } .wtotem_holder { display: flex; justify-content: space-between; } .wtotem_holder__content { width: 70%; } .wtotem_holder__sidebar { width: 27.8431372549%; } .wtotem_option { margin-bottom: 12px; padding: 28px 24px 24px 24px; display: flex; align-items: center; justify-content: space-between; width: 100%; } .wtotem_option:last-child { margin-bottom: 0; } .wtotem_option__title { margin-bottom: 7px; color: #1d293f; font-size: 14px; font-weight: 500; } .wtotem_option__text { width: 495px; font-size: 12px; color: #5e6977; line-height: 16px; } .wtotem_control { padding: 16px 22px 24px 22px; } .wtotem_control__title { color: #1d293f; font-size: 14px; font-weight: 500; margin-bottom: 18px; } .wtotem_control__block { padding: 12px 8px; display: flex; align-items: center; background: #f3f5f6; border-radius: 5px; margin-bottom: 12px; width: 100%; } .wtotem_control__block_switch { justify-content: space-between; align-items: center; } .wtotem_control__circle { margin-right: 4px; width: 16px; height: 16px; border-radius: 100px; display: flex; align-items: center; justify-content: center; background: #4bc374; } .wtotem_control__circle img { width: 7px; height: 7px; } .wtotem_control__name { color: #5e6977; } .wtotem_control__trash { width: 15px; height: 15px; background: url("../img/trash.svg") no-repeat center center/cover; margin-left: auto; cursor: pointer; } .wtotem_control__btn { color: #fff; display: block; width: 100%; height: 42px; display: flex; align-items: center; justify-content: center; background: #4bc374; border-radius: 5px; transition: all 0.2s ease-in-out; border: none; cursor: pointer; } .wtotem_control__btn:hover { transition: all 0.2s ease-in-out; background: #f3f5f6; color: #5e6977; } .wtotem_control__label { position: relative; width: 41px; height: 23px; border-radius: 100px; background: #1f2323; padding: 4px 7px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .wtotem_control__label:before, .wtotem_control__label:after { content: ""; display: block; position: relative; z-index: 2; } .wtotem_control__label:before { width: 8px; height: 8px; background: url("../img/checkbox-sun.svg") no-repeat center center/cover; } .wtotem_control__label:after { width: 6px; height: 6px; background: url("../img/checkbox-moon.svg") no-repeat center center/cover; } .wtotem_control__switched-circle { position: absolute; left: 4px; width: 15px; height: 15px; background: #fff; border-radius: 100px; display: block; z-index: 1; transition: all 0.3s ease-in-out; } .wtotem_control__input { display: none!important; } .wtotem_control__input:checked + label { background: #fff; } .wtotem_control__input:checked + label span { left: 23px; background: #3d50df; } .onoff__input { display: none; } .onoff__label { position: relative; display: flex; align-items: center; width: 43px; height: 23px; border-radius: 100px; padding: 4px; background: #f4f4f4; overflow: hidden; cursor: pointer; } .onoff__label:before, .onoff__label:after { position: absolute; font-weight: 500; font-size: 9px; transition: all 0.3s ease-in-out; } .onoff__label:before { content: "ON"; color: #3d50df; left: -100%; } .onoff__label:after { content: "OFF"; color: #979797; right: 4px; } .onoff__circle { position: absolute; left: 4px; width: 15px; height: 15px; border-radius: 100px; background: #c4c4c4; transition: all 0.3s ease-in-out; } .onoff__input:checked + label .onoff__circle { background: #3d50df; left: 22px; } .onoff__input:checked + label:before { left: 4px; } .onoff__input:checked + label:after { right: -100%; } /* 992-1100px lg Large */ @media screen and (max-width: 1100px) { .wtotem_option__text { width: 95%; } } /* 768-992px md Medium */ @media screen and (max-width: 992px) { .wtotem_holder { flex-direction: column; } .wtotem_holder__content { width: 100%; margin-bottom: 30px; } .wtotem_holder__sidebar { width: 100%; } } /* 576-768px sm Small */ /* 375-576px Extra small */ @media screen and (max-width: 576px) { .wtotem_holder__content { margin-bottom: 20px; } } /* 320-375px Extra small */ /*# sourceMappingURL=options.css.map */