:root {
            --border-radius: 5px;
        }

        body {background: url('/stat/img/bg-mob.jpg') repeat center center;background-attachment: fixed;background-size:100% auto;}
        .theme-toggle {z-index:3000;position:fixed;right:5px;top:3px;margin:0;width:50px;height:30px;transform:scale(.8);}
        input:checked + .theme-slider {background-color:#219653;}
        ::-webkit-scrollbar {width:9px !important;}
        h3 {width:100%;text-align:center;margin-top:0;}
        h4 {width:100%;text-align:center;}
        h4.error {background:transparent;color:#EF4444;}
        .loading {width:80px; height:80px;margin:20px auto;}
        .main-content { margin:0; }
        .main-content.collapsed {margin:0px;}
        .future { color: #1F2937;}

        .arrows {position:fixed;z-index:1000;bottom:10vh;width:12vw;max-width:90px;cursor:pointer;}
        .arrows.left {left:5px;}
        .arrows.right {right:5px;}
        .arrows img {width:100%;opacity:.8;}
        .arrows.disabled img {opacity:.2;}

        #unit-form {margin:0px auto 80px;} 
        #unit-form div.inline {position:relative;display:flex;margin:1px auto;width:80%;}
        #unit-form div.inline fieldset {position:static;display:flex;width:50%;}
        #unit-form fieldset input,
        #unit-form fieldset textarea, 
        #unit-form fieldset select {background:#ffffff90;box-shadow:1px 1px 16px #00000060;}
        #unit-form fieldset.datetime div.time {z-index:2;position:absolute;overflow:visible;top:95%;right:0px;width:100%;} 
        #unit-form fieldset.datetime div.time svg {width:40px;fill:#6B7280;position:absolute;bottom:-50px;right:10px;} 
        #unit-form fieldset {position:relative;flex-wrap:wrap;margin:1px auto;width:80%;}   
        #unit-form fieldset label {width:90%;font-size:1.1em;color:#1F2937;display:block;max-width:none;margin:24px auto 0px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} 
        #unit-form fieldset input {width:90%;max-width:none;margin:1vh auto 3vh;font-size:1.1em;color:#1F2937;text-align:center !important;padding:10px;}
        #unit-form fieldset textarea {width:90%;box-sizing:border-box;margin:1vh auto 3vh;font-size:1.1em;color:#1F2937;height:30vh;}
        #unit-form fieldset select {width:90%;max-width:none;text-align:center;font-size:1.1em;color:#1F2937;margin:1vh auto 3vh;}
        #unit-form fieldset.mb-3 {margin-bottom:3vh;}
        #unit-form fieldset.center {text-align:center;}
        #unit-form fieldset.hours label small {transform:scale(1);}
        #unit-form fieldset div.icons {position:absolute;bottom:77px;right:10px;width:200px;text-align:right;}
        #unit-form fieldset div.icons svg {width:30px;cursor:pointer;fill:#6B7280;background:#ffffff90;border-radius:var(--border-radius);padding:5px;margin-left:10px;}
        #unit-form fieldset div.icons span.copied {color:#EF4444;font-size:.9em;background:#fff;padding:5px;position:absolute;bottom:20px;right:5px;}
        #unit-form fieldset input[type=time] {width:80% !important;}
        #unit-form fieldset a.phone {margin:10px auto 20px;font-size:1.1em;}
        #id_desc {height:80px !important;}
        #stat-confirm {margin:20px auto 40px;height:60px;}
        #stat-confirm a {transform:scale(1.2);}

        #unit-form input[type=submit] {font-size:1.1em;font-weight:700;width:80%;padding:10px;margin:3vh auto 5vh;border-radius: var(--border-radius);border:groove 2px #1a252f60;box-shadow:0px 1px 3px #fff inset;}
		#opts div {flex-wrap:wrap;}
        .content {width:96%;padding: 30px 10px; min-width:none;max-width:600px;margin:20vh auto;}

        .content.p-0 {padding: 40px 0 0;}
        .content h2:first-child {background: url('/stat/img/bg-mob-head.jpg') no-repeat center bottom;background-size:100% auto;z-index:10;position:fixed;top:0px;left:0px;right:0px;width:100%;padding:10px 10px 20px 20px;font-size:1.3em;text-transform:uppercase;border-bottom:solid 1px #7f8c8d90;color:#d7d8dc;text-shadow:0px 1px 6px #1F2937, 0px -2px 2px #000000;box-shadow:0px 3px 24px #00000080;border-radius:none;}
        .content.smena {min-width:280px;width:100%;margin:120px auto 100px;border-radius:none;border:0;box-shadow:none;background:none;}
        .content.smena section {font-size:1.1em;width:100%;display:flex;flex-wrap:wrap;}
        .content.smena section date {font-size:1.16em;}
        .content.smena section h4 {display:block !important;text-align:left;min-width:220px !important;font-size:1.1em;margin:10px auto;font-weight:500;line-height:110%;}
        .content.smena section h4 span {display:block;white-space:normal;width:100%;max-width:70vw;font-size:1em;color:#6B7280;}
        .content.smena section aside {position:relative;width:85%;margin:0 auto 4vh;padding:20px 20px 10px;box-sizing:border-box;border-bottom:solid 1px #6B7280;box-shadow:2px 2px 24px #00000060;border-radius:5px;corner-shape:bevel;}
        .content.smena section aside.future {opacity:.8;background:#ffedce;}
        .content.smena section aside.past {background: url('/stat/img/bg-past.jpg') no-repeat center center;background-size:cover;}
        .content.smena section aside.past.first {background:#e8ffef;}
        .content.smena section aside p {margin-bottom:0;}
        .content.smena section date {font-weight:600;}
        .content.smena section date span.red {color:#EF4444;}
        .content.smena section date span.green {color:#10B981;}
        .content.smena section a svg {width:24px;fill:#6B7280;}
        .content.smena section a.edit {position:absolute;bottom:0px;right:5px;}
        .content.smena section a.info {position:absolute;bottom:40%;right:5px;}
        .content.smena section b {position:absolute;top:5px;right:8px;width:18px;height:18px;border-radius:5px;corner-shape:bevel;}
        .content.smena section b.success {background:#10B98180;}
        .content.smena section b.warning {background:#D17A3F80;}

        .buttons {flex-wrap:wrap;max-width:300px;}
        .buttons input[type=button], .buttons input[type=submit] {width:100%;margin-bottom:30px !important;}
        .buttons input[type=button].btn-warning {background:#D17A3F !important;}
        #logout {font-size:1.4em;font-weight:700;padding:10px;margin-top:50px !important;}
        #start-oper {font-weight:700;font-size:1.1em;text-align:center;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
        #smena-name {text-align:center;width:80%;font-size:1.1em;margin:0 auto 3vh;}
        #smena-name b {display:block;}
        #smena {font-weight:600;margin:4vh auto 2vh;}
        #start {background:#10B981 !important;font-weight:600;margin:2vh auto 6vh;}
        #start.warning {background:#D17A3F !important;}
        #install {background:#10B981;position:fixed;bottom:13vh;left:20vw;width:60vw;transform:scale(1.3);}
        ul.messages {right:30px;padding:10px 20px;font-size:1.3em;}

        
        #total {position:fixed;color:#6B7280;display:flex;justify-content:space-between;align-items:center;top:9vh;left:5vw;width:90vw;font-size:.9em;font-weight:700;}
        #total span {font-size:1.2em;}
        #total span#salary {color:#10B981;}
        div.select-wrap {display:flex;justify-content:center;margin:8vh auto 2vh;}
        div.select-wrap select {width:100px;padding:5px;margin:0 5px;border:1px solid #dcdfe6;border-radius:6px; font-size:0.95em;}

        #graphs {display:flex;flex-wrap:wrap;margin:1vh auto 5vh;}
        #graphs h5 {margin:20px auto;text-align:center;}
        #graphs div.row {color:#1F2937;background:#ffffff80;position:relative;width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;border-bottom:solid 1px #6B728040;border-radius:var(--border-radius);margin:1vh auto 2vh;padding:20px 10px;}
        #graphs div.row.head {color:#000000;font-weight:700;}
        #graphs div.row.book div.oil,
        #graphs div.row.book div.hours, 
        #graphs div.row.book div.salary {visibility:hidden;}
        #graphs div.row div {width:auto;text-align:center;font-size:1em;}
        #graphs div.row div small {font-weight:600;white-space:nowrap;font-size:1.3em;}
        #graphs div.row div.unit {width:80%;text-align:left;margin:0 0 0 auto;font-size:1.1em;color:#6B7280;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;}
        #graphs div.row div.date {font-size:1.3em;width:20%;line-height:95%;font-weight:600;box-sizing:border-box;margin:0px 10px 0 0;}
        #graphs div.row div.date span {font-size:.9em;font-weight:500;text-transform: uppercase;margin-bottom:4px;}
        #graphs div.row div.date span.red {color:#EF4444;}
        #graphs div.row div.date span.green {color:#10B981;}
        #graphs div.row div.date b {font-weight:500;font-size:1.2em;}
        #graphs div.row div.time {margin-left:-18%;}
        #graphs div.row div.salary {width:25%;font-weight:600;color:#10B981;box-sizing: border-box;padding-top:0px;font-size:1.3em;}
        #graphs div.row div.info {z-index:2;width:4%;display:flex;align-content:center;margin:13px 10px 0 -20px;}
        #graphs div.row div.info svg {min-width:25px;cursor:pointer;fill:#6B728090;}
        #graphs div.row small {font-size:1.15em;}

        #opers aside {text-align:center;color:#1F293760;background: #ffffff80;position:relative; width:90%;border-bottom: solid 1px #6B728040;border-radius: var(--border-radius);margin: 1vh auto 3vh;padding: 20px 10px;}
        #opers aside h4 {font-size:1.1em;width:100%;color:#1F293780;}
        #opers aside a:link,
        #opers aside a:visited {width:100%;color:#1F293780;font-size:1.6em;font-weight:600;}


        #checkfoto {display:none;z-index:1000;position:fixed;top:0;bottom:10vh;left:0;right:0;overflow:hidden;overflow-y:auto;background:#fff;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;}
        #checkfoto div,
        #checkfoto canvas {width:100%;margin:20px auto;text-align:center;}
        #checkfoto button {margin:20px auto;}

        #startfoto {border-radius:50%;width:70px;height:70px;border:groove 2px #1F2937;}
        #sendfoto {display:none;}

        div.output {display:flex;flex-wrap:wrap;justify-content:center;}
        div.output img {width:22%;height:auto;margin:5px;}

        #checklist {display:none;z-index:11;position:fixed;top:0;bottom:0;left:0px;right:0px;overflow:hidden;background:#fff;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:center;}
        #checklist aside {opacity:0;font-size:1.1em;line-height:110%;display:flex;justify-content:space-between;align-items:center;background:#D1D5DB;box-shadow: 0px 2px 10px #1F293780;border-radius:5px;padding:20px;box-sizing:border-box;margin:20px auto;width:90%;}
        #checklist aside button {opacity:.8;background:#10B981;padding:5px 5px 2px;border-radius:50%;transform:scale(1.3);margin-left:10px;border:1px #fff groove;}
        #checklist aside button svg {fill:#fff;width:20px;}
        #checklist aside.ready button {background:#6B7280;}

        footer {background: url('/stat/img/bg-foot.jpg') no-repeat center top;background-size:100% auto;z-index:10;position:fixed;bottom:0px;left:0px;right:0px;padding:10px 5vw 0;display:flex;justify-content:space-around;box-shadow:0px -3px 36px #00000080;}
        footer svg {width:10vw;max-width:50px;fill:#6B7280;margin:10px 20px 0px;fill:#d7d8dc;filter:drop-shadow( 1px 1px 2px rgba(0, 0, 0, .6));}
        footer svg.active {fill:#1F293790;filter:drop-shadow( 1px 1px 2px rgba(255, 255, 255, .6));}

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(100px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .fade-in {
            animation: fadeIn 1s ease forwards;
        }


        @keyframes fadeOut {
            from {
                opacity: 1;
                transform: translateY(0);
            }
            to {
                opacity: 0;
                transform: translateY(100px);
            }
        }
        .fade-out {
            animation: fadeOut 1s ease-out;
        }

        .delay-1 { animation-delay: 0.3s; }
        .delay-2 { animation-delay: 0.6s; }
        .delay-3 { animation-delay: 0.9s; }
        .delay-4 { animation-delay: 1.2s; }
        .delay-5 { animation-delay: 1.5s; }
        .delay-6 { animation-delay: 1.8s; }
        .delay-7 { animation-delay: 2.1s; }
        .delay-8 { animation-delay: 2.4s; }
        .delay-9 { animation-delay: 2.7s; }