html{
    width: 100vw;
}

p {
    word-break: keep-all;
}

span.title {
    color:#4C79FF;
    font-size: 1rem;
    display: inline-block;
}

h3.title {
    font-weight:bold;
}


div.title {
    text-align: center;
    margin-bottom:1rem;
}

.text-center {
    text-align: center;
    margin-bottom:1rem;
}

.body-container {
    padding:15px;
}

.notice-card {
    background-color: rgba(255, 255, 255, 1);
    border-color: lightgrey;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    margin-bottom: 6px;
    padding: 15px;
}

.custom-card {
    background-color: rgba(255, 255, 255, 1);
    border-color: lightgrey;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    margin-bottom: 6px;
    padding: 15px;
    padding-top: 30px;
    padding-bottom: 30px;
}

.custom-card:hover {
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
    border-color: gray;
}

.img-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.form-control {
    padding:0.1rem 0.45rem;
    border-radius: 0;
    width: 100%;
    text-align: right;
}

body{
    width: auto;
 }

body::-webkit-scrollbar {
    display: none;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

a:link, a:visited {
    color: #424242;
}

.no-underline {
    text-decoration: none;
}

.list {
    position: relative;
    display: block;
    padding: 0.5rem;
    color: black;
    background-color: #FBFCFC ;
}

.article {
    margin: 0px;
    padding-top: 0px;
    width: 100%;
    max-width: 992px;
}

.page {
    padding: 15px;
    width: 100%;
    max-width: 992px;
}

.sign-in-page {
    padding-top: 0px;
    width: 100%;
    max-width: 992px;
    display: flex;
    justify-content: center;
}

.sign-in-page-2 {
    padding: 15px;
    margin: 0px auto;
}

.text-lg {
    font-size: 20px;
}

.text-xmd {
    font-size: 17px;
}

.text-md {
    font-size: 15px;
}

.text-sm {
    font-size: 10px;
}

.bg-gray {
    background-color: gray;
}

.bg-red {
    background-color: #EC7063;
}

.bg-purple {
    background-color: #E8DAEF;
}

.red {
    color: #EC7063;
}

.gray {
    color: #424242;
}

.white {
    color: white;
}

.green {
    color: green;
}

.blue {
    color: #37acc9;
}

.fill-gray {
    fill: #424242;
}

.sb-border {
    border: 0.2px solid;
    border-color: gray;
}

.border-bottom {
    border-bottom: 0.1px solid;
    border-color: gray;
}

.circle {
    border-radius: 100%;
}

.signin-input {
    padding: 8px;
    font-size: 16px;
    background: #F6F6F6;
    border-width: 1px;
    border-style: solid;
    border-color: #AAA #CCC #CCC #AAA;
    border-radius: 3px;
}


.button {
    padding: 5px;
    width:100%;
    margin:1px;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    transition: 0.3s;
    background-color: gainsboro;
}

.selected {
    background-color: #C0392B;
}

.selected:hover {
    box-shadow: none;
}

.button:disabled:hover {
    box-shadow: none;
    cursor:not-allowed
}

.button:hover {
    background-color: #EC7063;
    color: white;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.button-wrap > .button-badge {
    z-index: 9;
    position:absolute;
    top:-8px;
    right:-5px;
    opacity:0;
    transition-property: opacity;
    transition-duration: 1.5s;
    font: 13px/13px Helvetica, Verdana, Tahoma;
    color:white;
    min-width:10px;
    height:10px;
    background:#C0392B;
    border-radius: 9px;
    box-shadow: 0 0 0 2px var(--white,#fff);
    text-align: center;
    padding: 1px 3px 1px 3px;
}

.list-row {
    background-color: white;
}

.list-row:hover {
    background-color: #FAFAFA;
}

.landing-sidebar-comments {
    text-decoration: none;
}

.landing-sidebar-comments:hover {
    text-decoration: underline dotted;
}

.custom-badge {
    display: inline-block;
    padding: .35em;
    font-size: 0.9em;
    line-height: 1;
    color: black;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    vertical-align: baseline;
    cursor:grab;
}

.shadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.margin { 
    margin: 5px;
}

.margin-left {
    margin-left: 5px;
}

.no-margin { 
    margin: 0px;
}

.padding {
    padding: 0.5rem;
}

.padding-sm {
    padding: 10px;
}

.padding-lg {
    padding: 20px;
}

.no-padding {
    padding: 0px
}

.align-right-in-flex {
    margin-right: 0;
    margin-left: auto;
}

.no-padding  ul {
    padding-inline-start: 0px;
    padding: 0px
}

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

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

.float-right {
    float: right;
}

.center {
    position: relative;
    margin: 0px auto;
}

.self-center {
    position: relative;
    margin: 0px auto;
}

.signup-label-text-align {
    width: 100%;
    text-align: right;
}

.signup-col-input {
    width: 33.3%
}

.signup-col-label {
    width: 16.7%
}

#spinning-progress {
    width: 100px;
    height: 100px;
    background-color: #EC7063;
    animation-name: spin;
    animation-duration: 5000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
    margin:auto;
}

#spinning-progress-container {
    position:fixed;
    display: none;
    justify-content: center;
    background:lightgray;
    width:100VW;
    height:100VH;
    opacity:0.5;
    z-index:9;
    visibility:hidden;
}
  
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.thema-wrapper {
    position:relative;
    width: 992px;
    margin:0 auto;
    background: #f2f2f2; 
    box-shadow: 0 0 21px rgba(0, 0, 0, 0.44);
    overflow-x: hidden;
}

body {
    background:#bfbfbf;
    font-family: Helvetica,Arial,Malgun Gothic,sans-serif;
}

footer {
    display:block;
    padding:20px;
    margin-top: 20px;
    width: 100%;
    background-color:#d3d3d3;
}

.page-divide-main {
    width: 70%;
}

.page-divide-sub {
    width: 30%;
    padding-left: 10px;
}

.landing-views{
    max-width:992px; 
    display:flex;
}

.notification-badge {
    z-index: 9;
    position:absolute;
    top:-8px;
    right:-5px;
    transition-property: opacity;
    transition-duration: 0.2s;
    font: 13px/13px Helvetica, Verdana, Tahoma;
    color:white;
    min-width:14px;
    height:16px;
    background:#C0392B;
    border-radius: 9px;
    box-shadow: 0 0 0 2px var(--white,#fff);
    text-align: center;
    padding: 1px 3px 1px 3px;
}

.bread-buttons {
    background-color: gainsboro;
    display:flex;
    width:100%;
    flex-wrap: nowrap;
    align-items: center;
    padding-left:10px;
}

.navbar {
    padding: 20px;
    padding-top: 50px;
    background-color: lightgray;
    flex-wrap: nowrap;
}

.navbar > .navbar-contents {
    display: flex;
    width: 100%;
    max-width: 992px;
    margin: 0 auto;
}

.navbar ul > li {
    margin-left: 10px;
    float: left;
}

.navbar-row {
    display: flex;
    flex-wrap: wrap;
}

.navbar-row-admin {
    margin-left: auto;
    margin-bottom: 5px;
}

.navbar-row-bbs {
    width:100%;
}

.navbar-row-mobile {
    width: 100%;
    height: 54px;
    display:none;
    visibility: hidden;
}

.mobile-menu {
    display:none;
    visibility: hidden;
}

.sort-wrapper {
    display:flex; width:100%;
    margin-bottom: 5px;
}

.article > .article-view-contents {
    padding: 20px 20px;
    border-top: 1px solid #eee;
}

.contents-txt {
    white-space: pre-wrap;
    font-size: 15px;
}

.comment-txt {
    font-size: 15px;
}

.comment-view{
    margin-left: 20px;
    margin-right: 20px;
}

.pagination-button {
    margin-left: 3px;
    margin-right: 3px;
    border-radius: 5px;
    min-width: 20px;
    font-size: 14px;
    text-align: center;
    padding-left: 2px;
    padding-right: 2px;
    cursor:pointer;        
}

.pagination-button:hover {
    margin-left: 3px;
    margin-right: 3px;
    border-radius: 5px;
    min-width: 20px;
    font-size: 14px;
    text-align: center;
    padding-left: 2px;
    padding-right: 2px;
    cursor:pointer;
    color:#C0392B;
}

.pagination-button-disabled {
    margin-left: 3px;
    margin-right: 3px;
    border-radius: 5px;
    min-width: 20px;
    font-size: 14px;
    text-align: center;
    padding-left: 2px;
    padding-right: 2px;
    cursor:not-allowed;
    color:gray;
}

.pagination-button-selected {
    margin-left: 3px;
    margin-right: 3px;
    border-radius: 5px;
    min-width: 20px;
    font-size: 14px;
    text-align: center;
    padding-left: 2px;
    padding-right: 2px;
    cursor:not-allowed;
    color:#C0392B;
}

.cursor-pointer {
    cursor:pointer;
}

.page-divide-sub td {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-page-avatar {
    margin:5px; 
    width: 40px; 
    height: 40px;
    -moz-border-radius: 20px; 
    -webkit-border-radius: 20px; 
    border: 3px solid lightgray; 
    border-radius: 20px;
    transition: 0.3s;
    opacity:0.4;
}

.profile-page-avatar:hover {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    cursor:pointer;
    opacity:1;
}

.profile-page-avatar-selected {
    opacity:1;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    border: 3px solid #EC7063;
}

.profile-page-avatar-main {
    border: 3px solid #EC7063;
    margin:5px auto;
    width: 200px;
    height: 200px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.adsbygoogle {
    margin-bottom: 5px;
    margin-top: 5px;
}

.profile-views {
    max-width:992px; 
    padding-left:5px; 
    padding-right:5px; 
    display:flex;
}

.profile-views-avatar-wrapper {
    width:30%;
    padding-right:5px;
    border-right: 0.5px solid green;
}

.youtube-preview {
    display: flex;
    max-width: 440px;
    max-height: 80px;
    font-size: 12px;
    border-color: lightgray;
    border-style: solid;
    border-width: 1px;
    background: white;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.youtube-info {
    width: 70%;
    display: block;
    margin: 5px;
    margin-left: 2px;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.youtube-thumbnail {
    display: block;
    max-width: 30%;
    height: 100%;
    width: 100%;
    margin-right: 2px;
}

.input-group-table {
    position:relative;
    text-align: left;
    align-items: center;
    white-space: nowrap;
    width: 100%;
}

.result-group-table {
    position:relative;
    align-items: center;
    text-align: left;
    white-space: nowrap;
    letter-spacing:-1px;
    width:100%;
}

#result-table {
    text-align:right;
}

.popup-desc{
    z-index:100;
    padding: 10px;
    min-height:100px;
    background-color:white;
    border-radius: 5px;
    align-items: end;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
    position:absolute; 
    display:none;
    max-width:300px;
    white-space: pre-wrap;
}

.close-icon {
    margin-left:auto;
    margin-right:5px;
    cursor:grab;
}

td.type {
    padding-right:5px;
    min-width: 160px;
    width: 20%
}

td.value {
    text-align: right;
}

td.unit {
    text-align: left;
    width:10%;
    min-width: 60px;
}

.input-group-text {
    padding: .1rem .3rem;
}

.input-group-text-head {
    display:grid;
    width: 140px;
}

.input-group-text-tail {
    display:grid;
    width: 60px;
}

.navbar-ad {
    display:contents;
    position:relative;
    margin-right:0;
    margin-left:auto;
}

@media (max-width: 700px) {
    .navbar-ad{
        display: none;
    }
}

@media (max-width: 992px) {
    
    #main-logo-wrapper {
        margin-right: auto;
        margin-left: 15px;
    }

    .input-group-text{
        width:auto;
        font-size:smaller;
    }

    .input-group-table{
        font-size:smaller;
    }

    .result-group-table{
        font-size:smaller;
    }

    .youtube-player{
        width: 100%;
        height:calc(100vw * 360/640);
    }

    .profile-views {
        display:inline-block;
    }

    .profile-views-avatar-wrapper {
        width: 100%;
        margin-bottom: 20px;
        border-right: 0px;
    }

    .signup-label-text-align {
        text-align: left;
    }

    .signup-col-input {
        width: 100%
    }

    .signup-col-label {
        width: 100%
    }

    .contents-txt {
        font-size: 14px;
    }

    .comment-txt {
        font-size: 14px;
    }

    .comment-view {
        margin-left: 15px;
        margin-right: 15px;
    }

    .article-popular-articles {
        margin-left: 15px;
        margin-right: 15px;
    }

    .sort-wrapper {
        margin-top: 5px;
    }

    .page {
        padding: 0px;
    }

    .navbar {
        padding: 0px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    hr {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .navbar-row-mobile {
        width: 100%;
        height: 54px;
        display: flex;
        visibility: visible;
        align-items: center;
        justify-content: center;
    }

    #navbar-menu-button {
        margin-right: 15px;
        margin-left: 15px;
        cursor:pointer;
    }

    .mobile-menu {
        background-color: white;
        position: relative;
        width: 50vw;
        top: 54px;
        right: 0;
        margin-left: auto;
        margin-right: 0;
        position:absolute;
        z-index:9;
        box-shadow: 0 0 21px rgba(0, 0, 0, 0.44);
    }

    .slidein {
        animation-name: slidein;
        animation-duration: 1s;
    }

    @keyframes slidein {
        from {
            height: 0px;
        }
      
        to {
            height: calc(100% - 54px);
        }
    }

    .page-divide-sub {
        visibility: hidden;
        display: none;
    }

    .page-divide-main {
        width: 100%;
    }

    .thema-wrapper {
        width: 100vw;
        min-width: 320px;
    }

    .mobile-menu .button {
        height: 10vh;
        width: 100%;
        margin-left: 0;
        margin-bottom: 1px;
    }

    .button {
        font-size: 14px;
        margin-right:15px;
    }

    td.type {
        max-width:6rem;
    }
    
    td.unit {
        max-width:6rem;
    }

    .popup-desc{
        padding:5px;
        font-size:smaller;
        min-height:60px;
        align-items:start;
    }

}