* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    font-size: 22px;
    font-family: Roboto,arial,sans-serif;
    line-height: 1.3;
    
}


.left {float: left;}
.right{float: right;}
.clear{clear: both};

.bold{font-weight: bold};
.italic{font-style: italic};

.font-small{font-size: 14px;}
.font-norm{font-size: 18px;}
.font-large{font-size: 20px;}
.font-xlarge{font-size: 22px;}

.red{color: red;}
.green{color: green;}
.blue{color: blue;}
.black{color: black;}
.white{color: white};

.align-left{text-align: left;}
.align-right{text-align: right;}
.align-center{text-align: center;}

.bg-white{background-color: white;}
.bg-black{background-color: black;}
.bg-red{background-color: red;}
.bg-blue{background-color: blue;}
.bg-green{background-color: green;}
.bg-gray{background-color: lightgray;}

.btn {
    padding: 5px 15px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 18px;
}

.btn-blue {background-color: darkblue; color: white;}
.btn-red {background-color: darkred; color: white;}
.btn-green {background-color: darkgreen; color: white}
.btn-gray {background-color: #4c4c4c; color: white}

.container {
    padding: 10px;
}

.width-25{width: 25%};
.width-50{width: 50%};
.width-75{width: 75%};
.width-100{width: 100%};

.auto {margin-left: auto; margin-right: auto; }


.title-block {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    padding: 15px 0;
}

.border-top {border-top: 1px solid black;}
.border-bottom {border-bottom: 1px solid black;}


.pointer {
    cursor: pointer;
}