/*
==========================================================
КАЛЬКУЛЯТОР ВЫСЛУГИ МВД

assets/css/style.css

Версия 1.2
==========================================================
*/


*{

box-sizing:border-box;

}




body{


margin:0;


padding:0;


font-family:

Arial,
sans-serif;


background:#f3f5f7;


color:#222;


}





.container{


max-width:900px;


margin:20px auto;


padding:15px;


}






h1{


text-align:center;


font-size:28px;


}





h2{


margin-top:0;


font-size:22px;


}



h3{


font-size:18px;


}







.info{


background:#fff3cd;


padding:15px;


border-radius:10px;


font-size:14px;


line-height:1.5;


}







.card{


background:white;


padding:20px;


margin-bottom:20px;


border-radius:15px;


box-shadow:

0 3px 10px

rgba(0,0,0,.08);


}








.buttons{


display:flex;


gap:10px;


margin-bottom:20px;


flex-wrap:wrap;


}







.btn{


border:0;


padding:12px 18px;


border-radius:10px;


background:#2563eb;


color:white;


cursor:pointer;


font-size:15px;


}



.btn:hover{


opacity:.85;


}






.danger{


background:#dc2626;


}







.form-grid{


display:grid;


grid-template-columns:

repeat(
auto-fit,
minmax(200px,1fr)
);


gap:15px;


}






label{


display:block;


margin-bottom:6px;


font-weight:600;


}




input,
select{


width:100%;


padding:10px;


border:

1px solid #ccc;


border-radius:8px;


font-size:15px;


}








.checkbox{


display:flex;


align-items:center;


gap:8px;


}



.checkbox input{


width:auto;


}








.period-card{


border:

1px solid #ddd;


padding:15px;


border-radius:12px;


margin-bottom:15px;


background:#fafafa;


}







.period-header{


display:flex;


justify-content:space-between;


align-items:center;


margin-bottom:15px;


}








.small{


padding:

7px 12px;


font-size:13px;


}







.result-grid{


display:grid;


grid-template-columns:

repeat(
auto-fit,
minmax(220px,1fr)
);


gap:15px;


}



.result-grid div{


background:#f8fafc;


padding:15px;


border-radius:10px;


}





.result-grid strong{


display:block;


margin-top:8px;


font-size:18px;


}







.progress{


height:30px;


background:#e5e7eb;


border-radius:20px;


overflow:hidden;


}





.progress-bar{


height:100%;


width:0;


display:flex;


align-items:center;


justify-content:center;


font-size:14px;


font-weight:bold;


transition:.4s;


}





.progress{


background:#e5e7eb;


}



.progress-bar{


background:#22c55e;


}



.progress-bar.warning{


background:#f59e0b;


}



.progress-bar.danger{


background:#dc2626;


}







.warning{


background:#fee2e2;


border:

1px solid #ef4444;


}





.warning li{


margin-bottom:8px;


}









/*
----------------------------------------------------------
Мобильная версия
----------------------------------------------------------
*/


@media(max-width:600px){



.container{


padding:10px;


}




h1{


font-size:22px;


}



.card{


padding:15px;


}



.buttons{


flex-direction:column;


}



.btn{


width:100%;


}




.form-grid{


grid-template-columns:

1fr;


}




.period-header{


flex-direction:column;


align-items:flex-start;


gap:10px;


}



}