/* 2022-08-18 */
@charset "utf-8";
:root {
    --blue: #2952ae;
    --blue-rgb:41, 82, 174;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #ed2024;
    --red-rgb:237, 32, 36;
    --orange: #ed5c23;
    --yellow: #ffc107;
    --green: #28a745;
    --greenright: #62ed41;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #999;
    --gray-dark: #343a40;
    --primary: #2952ae;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #e9a327;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #222;
    --black: #000;
    --btn_bright: 110%;
}

.btn{
    display: inline-block; text-align: center; vertical-align: middle; cursor: pointer;
    font-size: 1em !important; line-height: 1.5; border-radius: .375rem !important; padding: .375rem .75rem !important; min-width: 100px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    user-select: none;
    background-color: transparent; border: 1px solid transparent; 
    /* transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; */
    transition: all .15s ease-in-out;
}
.btn:hover {
    text-decoration: none;
    transition: all .15s ease-in-out;
    filter: brightness(var(--btn_bright));
}
.btn > strong{font-weight: 600;}
.btn-2x{font-size:140% !important; padding: .75rem .75rem !important; min-width:200px; font-weight: 600;}
.btn-xs{font-size: small !important; padding: .2rem .4rem !important; min-width: auto;}
.btn-inline{min-width:30%; width:auto !important; margin-right:10px; }
.btn-inline:last-child{margin-right:0;}

.btn.blue {background-color: var(--blue); color: #fff;}
.btn.blue:hover{color: #fff;}
.btn.indigo {background-color: var(--indigo); color: #fff;}
.btn.indigo:hover{color: #fff;}
.btn.purple {background-color: var(--purple); color: #fff;}
.btn.purple:hover{color: #fff;}
.btn.gray-dark {background-color: var(--gray-dark); color: #fff;}
.btn.gray-dark:hover{color: #fff;}
.btn.dark{background-color: var(--dark); color: #fff;}
.btn.dark:hover{color:#fff; filter: brightness(100%); background-color:#444;}
.btn.cancel {background-color: var(--gray); color: #fff;}
.btn.cancel:hover{color: #fff;}
.btn.primary {background-color: var(--orange); color: #fff;}
.btn.primary:hover{color: #fff;}
.btn.warning {background-color: var(--warning); color: #fff;}
.btn.warning:hover{color: #fff;}
.btn.secondary {background-color: var(--secondary); color: #fff;}
.btn.secondary:hover{color: #fff;}

.btn.orange-outline{background-color:#fff; color:#222; box-shadow:0px 0px 0px 3px var(--orange) inset; outline: none;}
.btn.dark-outline{background-color:#fff; color:#222; box-shadow:0px 0px 0px 3px var(--dark) inset; outline: none;}

.btn.inactive{cursor: default;}

a.btn{border:0;}

/* 선택초기화 */
button.btn-gray.sc-reflash,
button.btn-gray.sc-reflash2,
button.btn-gray.sc-reflash-txt{
    font-family: var(--font-pretendard);
    background-color: #ffffff !important;
    color: #5f6368 !important;
    font-weight: 300 !important;
}
button.btn-gray.sc-reflash:hover, 
button.btn-gray.sc-reflash:focus,
button.btn-gray.sc-reflash2:hover, 
button.btn-gray.sc-reflash2:focus,
button.btn-gray.sc-reflash-txt:hover, 
button.btn-gray.sc-reflash-txt:focus{
    background-color: #F9F9F9 !important;
    color: #5f6368 !important;
    font-weight: 300 !important;
    opacity: 1;
}
    /* 선택초기화 위치 고정 */
    .webRTC_survey .survey-select-arr button.btn-gray.sc-reflash,
    .webRTC_survey .survey-select-arr button.btn-gray.sc-reflash2,
    .webRTC_survey .survey-select-arr button.btn-gray.sc-reflash-txt{
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .webRTC_survey .survey-select-arr button.btn-gray.sc-reflash2{top:100%; position: relative;}
    .webRTC_survey .survey-select-arr .rank-wrap button.sc-reflash-txt{/*top: -35px;*/ position: relative;}
        /* 말하기듣기 선택초기화 위치 조정 */
        .webRTC_survey .survey-select-arr.contents-speak button.btn-gray.sc-reflash2{right: -60px;}
        @media screen and (max-width:780px){
            .webRTC_survey .survey-select-arr.contents-speak button.btn-gray.sc-reflash2{right: -24px;}
        }