.coolWinSystemContainer{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:1000;
}

.coolWinSystemContainer .coolWinSystemClickhideContainer{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:1001;
}

.coolWinSystemContainer .coolWinSystemClickhideContainer.darkBackground{
    background-color:rgba(0,0,0,0.8);
}

.coolWinSystemContainer .coolWinSystemWindow{
    position: relative;
    width: 300px;
    height: 200px;
    z-index:1002;
    min-height:100px;
    max-height:98%;
    min-width:200px;
    overflow-y:auto;
}

.coolWinSystemContainer .coolWinSystemWindow.xxlType{
    width:98%;
    height:98%;
}

.coolWinSystemContainer .coolWinSystemWindow.largeType{
    width:90%;
    height:90%;
}

.coolWinSystemContainer .coolWinSystemWindow.mediumType{
    width:60%;
    height:70%;
}

.coolWinSystemContainer .coolWinSystemWindow.smallType{
    width:40%;
    max-width:450px;
    height:40%;
}

.coolWinSystemContainer .coolWinSystemWindow.extraSmallType{
    width:30%;
    max-width:350px;
    height:40%;
}

.coolWinSystemContainer .coolWinSystemWindow .closeCoolWinSystemWindowButton{
    position: absolute;
    top:15px;
    right:15px;
    width:30px;
    height:30px;
    color:#333;
    background-color:#F9F9F9;
    border-radius:5px;
    text-decoration: none;
    display: block;
    font-weight:bold;
    text-align:center;
    font-size:18px;
}

.coolWinSystemContainer .coolWinSystemWindow .closeCoolWinSystemWindowButton:hover{
    cursor: pointer;
    background-color:#CCC;
}

.coolWinSystemContainer .coolWinSystemWindow .winSystemContent{
    height:100%;
    overflow-y:auto;
}

.winSystemContent h1{
    text-align:left;
    font-size:24px;
    color:#333;
    font-weight:500;
    margin-bottom:15px;
}

@media screen and (max-width:768px) {

    .closeCoolWinSystemWindowButton{
        top:5px !important;
        right:5px !important;
        width:30px;
        height:30px;
    }

    .coolWinSystemContainer .coolWinSystemWindow{
        padding:5px !important;
        position: relative;
        min-width:96% !important;
        width: 96% !important;
        height: 96% !important;
        z-index:1002;
        overflow-y:auto;
    }

    .coolWinSystemContainer .coolWinSystemWindow.largeType{
        width: 96% !important;
        height: 96% !important;
    }

    .coolWinSystemContainer .coolWinSystemWindow.xxlType{
        width: 100% !important;
        height: 100% !important;
    }

    .coolWinSystemContainer .coolWinSystemWindow.mediumType{
        width: 96% !important;
        height: 96% !important;
    }

    .coolWinSystemContainer .coolWinSystemWindow.smallType{
        width: 96%;
        height: 96%;
        max-width: 96%;
    }

    .coolWinSystemContainer .coolWinSystemWindow.extraSmallType{
        width: 96% !important;
        height: 96% !important;
        max-width: 96% !important;
    }
}