/* -----------------------------------------------------------
// Project:   Flight Logbook Generator / Preflight Checklist CSS
// Author:    Christian Marck
// Date:      14.12.2021 7:50 CET
// -----------------------------------------------------------
*/

.container {
    background-color: rgba(8.2,34.1,60,.05);
    max-width: 700px;
    width: 100%;
    display: table;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 15px;
    border: 1px solid #cfcbcc;
}

.reset {
    font-weight: bold;
    height: 35px;
    max-width: 700px;
    width: 100%;
    display: table;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 15px;
    border: 1px solid #cfcbcc;
}

.reset:hover {
    background-color: rgba(255,255,255,.7);
}

form {
    margin-bottom: 0;
}

input {
    border: none;
    display: block;
    width: calc(100% - 10px);
    line-height: 1.5;
    padding: 8px 0 8px 10px;
    border-top: 1px solid #cfcbcc;
    border-bottom: 1px solid #cfcbcc;
    outline: 0;
    background-color: rgba(255,255,255,.3);
}

::placeholder {
    color: #777;
}

h2:last-child {
    margin-bottom: 0 !important;
}
h3 {
    margin: 10px !important;
    color: #777 !important;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    h3 {
        margin-top: 15px;
    }
}

ul#list_preflight {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul#list_preflight li {
    color: #3c3a38;
    font-weight: 400;
    border-bottom: 1px solid #cfcbcc;
    line-height: 1.5;
    padding: 8px 0;
}
ul#list_preflight li:before {
    content: "\25A1";
    padding: 10px 10px;
    font-size: 20px;
}
@media only screen and (max-width: 650px) {

    ul#list_preflight li { padding: 10px 25px; }

    ul#list_preflight li:before {
        margin-right: 5px;
        margin-left: -18px;
        padding: 0;
    }
    .checked:before {
        font-size: 16px !important;
        padding: 0 !important;
    }
}
ul#list_preflight li:hover {
    text-decoration: line-through;
    cursor: pointer;
}
ul#list_preflight li:last-child {
    border-bottom: none;
}

.checked,
.checked span {
    color: #159957 !important;
}
.checked:before {
    content: "\2713";
    padding: 10px 10px;
    font-size: 20px;
}
.checked:hover {
    text-decoration: none;
}
.checked {position: relative}
.checked:hover:after {
    content: "X";
    font-size: 20px;
    font-weight: bold;
    float: right;
    top: 8px;
    right: 5px;
    color: red;
    position: absolute;
}

/* Partay */
.partay {
    width: 100%;
    cursor: pointer;
    position: relative;
}
.partay h1 {
    color: #fff;
    font-size: 1.5em;
}
.partay i {
    position: absolute;
    display: block;
    left: 50%;
    top: 0;
    width: 5px;
    height: 10px;
    background: red;
    opacity: 0;
}
.partay:hover i:nth-of-type(1) {
    transform: translate3d(-17px, 98px, 0) rotate(263deg);
    background: #00ff88;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(2) {
    transform: translate3d(-33px, 100px, 0) rotate(145deg);
    background: #a200ff;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(3) {
    transform: translate3d(75px, -45px, 0) rotate(152deg);
    background: #eaff00;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(4) {
    transform: translate3d(-21px, -75px, 0) rotate(340deg);
    background: #00ffbf;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(5) {
    transform: translate3d(85px, -58px, 0) rotate(77deg);
    background: #15ff00;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(6) {
    transform: translate3d(-53px, -33px, 0) rotate(40deg);
    background: #b7ff00;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(7) {
    transform: translate3d(57px, -66px, 0) rotate(10deg);
    background: #ff9d00;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(8) {
    transform: translate3d(40px, -87px, 0) rotate(208deg);
    background: #0059ff;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(9) {
    transform: translate3d(-14px, -6px, 0) rotate(276deg);
    background: #006aff;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(10) {
    transform: translate3d(-82px, -10px, 0) rotate(187deg);
    background: #7b00ff;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(11) {
    transform: translate3d(-61px, -21px, 0) rotate(18deg);
    background: #26ff00;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(12) {
    transform: translate3d(44px, -95px, 0) rotate(45deg);
    background: #55ff00;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(13) {
    transform: translate3d(62px, 34px, 0) rotate(71deg);
    background: #fbff00;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(14) {
    transform: translate3d(28px, -99px, 0) rotate(185deg);
    background: #00ff51;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(15) {
    transform: translate3d(10px, -37px, 0) rotate(7deg);
    background: #ff00e1;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(16) {
    transform: translate3d(45px, 62px, 0) rotate(235deg);
    background: #ff1500;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(17) {
    transform: translate3d(52px, -59px, 0) rotate(278deg);
    background: red;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(18) {
    transform: translate3d(-84px, -47px, 0) rotate(106deg);
    background: #26ff00;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(19) {
    transform: translate3d(64px, 26px, 0) rotate(36deg);
    background: #0d00ff;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(20) {
    transform: translate3d(37px, 60px, 0) rotate(25deg);
    background: #00ff2f;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(21) {
    transform: translate3d(-43px, 89px, 0) rotate(159deg);
    background: #00f7ff;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(22) {
    transform: translate3d(-74px, -68px, 0) rotate(153deg);
    background: #00b7ff;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(23) {
    transform: translate3d(-57px, 60px, 0) rotate(118deg);
    background: #66ff00;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(24) {
    transform: translate3d(58px, -96px, 0) rotate(62deg);
    background: #00ccff;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(25) {
    transform: translate3d(-56px, 49px, 0) rotate(262deg);
    background: #00b7ff;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(26) {
    transform: translate3d(6px, -23px, 0) rotate(134deg);
    background: #00ff48;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(27) {
    transform: translate3d(65px, -80px, 0) rotate(291deg);
    background: #77ff00;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(28) {
    transform: translate3d(-32px, -47px, 0) rotate(222deg);
    background: #ffaa00;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(29) {
    transform: translate3d(-77px, -62px, 0) rotate(72deg);
    background: #ff4d00;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(30) {
    transform: translate3d(-3px, 12px, 0) rotate(102deg);
    background: #ff001e;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(31) {
    transform: translate3d(11px, -48px, 0) rotate(234deg);
    background: #00ff88;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(32) {
    transform: translate3d(-31px, -47px, 0) rotate(301deg);
    background: #e100ff;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(33) {
    transform: translate3d(84px, 5px, 0) rotate(249deg);
    background: #3cff00;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(34) {
    transform: translate3d(-25px, 67px, 0) rotate(283deg);
    background: #ffae00;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(35) {
    transform: translate3d(31px, -72px, 0) rotate(193deg);
    background: #22ff00;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(36) {
    transform: translate3d(-58px, -8px, 0) rotate(42deg);
    background: #ffb300;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(37) {
    transform: translate3d(51px, 4px, 0) rotate(35deg);
    background: #ff0062;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(38) {
    transform: translate3d(66px, 35px, 0) rotate(37deg);
    background: #00ffe6;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(39) {
    transform: translate3d(52px, 39px, 0) rotate(68deg);
    background: #00ff66;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(40) {
    transform: translate3d(78px, 84px, 0) rotate(149deg);
    background: #00ff80;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(41) {
    transform: translate3d(28px, -14px, 0) rotate(200deg);
    background: #ff00c8;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(42) {
    transform: translate3d(-40px, 12px, 0) rotate(339deg);
    background: #80ff00;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(43) {
    transform: translate3d(-28px, 54px, 0) rotate(323deg);
    background: #0022ff;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(44) {
    transform: translate3d(-92px, -83px, 0) rotate(181deg);
    background: #eaff00;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(45) {
    transform: translate3d(-69px, 23px, 0) rotate(306deg);
    background: #00ff15;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(46) {
    transform: translate3d(80px, 14px, 0) rotate(183deg);
    background: #ff7b00;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(47) {
    transform: translate3d(42px, 97px, 0) rotate(82deg);
    background: #4000ff;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(48) {
    transform: translate3d(30px, 67px, 0) rotate(333deg);
    background: #44ff00;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(49) {
    transform: translate3d(76px, -11px, 0) rotate(128deg);
    background: #ddff00;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}
.partay:hover i:nth-of-type(50) {
    transform: translate3d(68px, -93px, 0) rotate(200deg);
    background: #00ffbb;
    animation: bang 700ms ease-out forwards;
    opacity: 0;
}

@keyframes bang {
    from {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}