﻿/*___Reset_______________________________________*/
a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, object, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, tdvideo, tt, u, ul, var { background: transparent; border: 0 none; margin: 0; padding: 0; border: 0; outline: 0; vertical-align: top; text-decoration: none; color: inherit; }

ul { list-style: none; }

blockquote, q { quotes: none; }

embed { vertical-align: top; }
.v-align { vertical-align: middle; }

a { text-decoration: none; }
    a.btn:hover { color: #ccc; }
u, .underline { text-decoration: underline !important; }
.fontsize-small { font-size: .45em; }
.fontsize-medium { font-size: .8em; }
.fontsize-large { font-size: 1.5em; }
.bold { font-weight: bold; }
.font-normal { font-weight: normal; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-justify { text-align: justify; }

.nopad { padding: 0 !important; }
.padding5 { padding: 5px !important; }
.padding10 { padding: 10px !important; }
.paddingtop20 { padding-top: 20px; }
.paddingbottom20 { padding-bottom: 20px; }


.margin10 { margin: 10px !important; }
.margintop10 { margin-top: 10px; }
.margintop20 { margin-top: 20px; }
.marginbottom20 { margin-bottom: 20px; }
.marginbottom30 { margin-bottom: 30px; }
.marginright5 { margin-right: 5px; }
.en, input[type=text].en, input[type=password] { font-family: Tahoma; text-align: left; direction: ltr; }
.transition { transition: all 2s ease 0s; }

.absolute { position: absolute !important; }
.right { right: 0 !important; }
.left { left: 0 !important; }
.top { top: 0 !important; }
.bottom { bottom: 0 !important; }

.pointer { cursor: pointer; }
.display-none { display: none; }
.border-width-1 { border-width: 1px; }
.border-solid { border-style: solid; }

@media (min-width:768px) {
    .label-container { width: 100px; float: right; }
}

.addNewItem { display: block; }
.border-left { border-left: 1px solid #555; }
/*___Tag Input Control___________________________*/
.tag-input-container, .keyword-tag-input-container, .option-group-container { width: 100%; background: #fff; border: 1px solid #ccc; }
    .keyword-tag-input-container .tag-input { border: 1px solid rgba(0,0,0,.15); float: right; margin: 2px; width: 100%; right: 2px; direction: rtl; }
    .tag-input-container .tag-input,
    .option-group-container .option-group-input { border: 1px solid rgba(0,0,0,.15); float: right; margin: 2px; width: calc(100% - 30px); }
    .tag-input-container .tag-btn, .option-group-container .option-group-btn { float: left; width: 20px !important; padding: 5px; }
    .option-group-container .option-input { border: 1px solid transparent; margin: 0px; padding: 2px; width: calc(100% - 30px); }
        .option-group-container .option-input.editable { border: 1px solid #aaa; }

    .tag-input-container .tag, .keyword-tag-input-container .tag { position: relative; background: #ccc; border-radius: 4px; float: right; margin: 5px 1px; padding: 2px 5px; }
        .tag-input-container .tag .remove, .keyword-tag-input-container .tag .remove { margin-right: 5px; padding: 3px 0; float: left; cursor: pointer; }
            .tag-input-container .tag .remove:hover, .keyword-tag-input-container .tag .remove:hover { color: #fff; }


    .option-group-container .option-list-container li { padding: 5px 0; border-bottom: 1px solid #ddd; }
        .option-group-container .option-list-container li p:first-child { }
        .option-group-container .option-list-container li p:last-child { }
/*_________________ BUTTONS _____________________*/
.icon { display: inline-block; height: 24px; width: 24px; cursor: pointer; }
.icon-bg { background-color: rgba(255, 255, 255, 0.5) !important; }
.icon-hover { position: relative; }
    .icon-hover .icon { display: none; }
    .icon-hover:hover .icon { display: inline-block; }

.edit-btn { background: url("/lib/Images/Icons/edit.svg") no-repeat 50% 50%; }
.refresh-btn { background: url("/lib/Images/Icons/refresh.svg") no-repeat 50% 50%; }

.new-icon { padding: 3px; margin: 2px; }

/*_________________ COLORS ______________________*/

.color_text { color: #2a4051; }
.color_darkBlue { color: #34495e; }
.color_orange { color: #E85623; }
.color_lightGrey { color: #e4e4e4; }
.color_Grey { color: #95a5a5; }
.border_Grey { border-color: #e4e4e4; }

.color-red { color: red; }
.color-green { color: green; }
.color-white { color: white; }

::selection { color: #fff; background: #E85623; }
::-moz-selection { color: #fff; background: #E85623; }

/*__________________ MASTER2 _______________________*/



html { font: 100%/1.5 'WMitra', Tahoma, sans-serif !important; color: #2a4051; background: #f2f2f2; }
html, body { width: 100%; height: 100%; }

@font-face { font-family: 'WMitra'; src: url('/lib/fonts/WebMitra.eot'); src: url('/lib/fonts/WebMitra.eot?#iefix') format('embedded-opentype'), url('/lib/fonts/WebMitra.woff') format('woff'), url('/lib/fonts/WebMitra.ttf') format('truetype'), url('/lib/fonts/WebMitra.svg#WebMitra') format('svg'); font-weight: normal; font-style: normal; unicode-range: U+0600–06FF; }
@font-face { font-family: 'WMitra'; font-weight: bold; font-style: normal; src: url('/lib/fonts/BMitra-Bold.eot'); src: url('/lib/fonts/BMitra-Bold.eot?#iefix') format("embedded-opentype"),url('/lib/fonts/BMitra-Bold.woff') format("woff"),url('/lib/fonts/BMitra-Bold.ttf') format("truetype"),url('/lib/fonts/BMitra-Bold.svg#Mitra') format("svg"); } h1 { font-size: 1.6em; color: #E85623; } h2 { font-size: 1.2em; } h3 { font-size: .9em; } h4 { display: inline; }
h1 { font-size: 1.6em; color: #E85623; }
h2 { font-size: 1.2em; }
h3 { font-size: .9em; }
h4 { display: inline; }

input[type=text], input[type=password], textarea, select { /*border: 1px solid #999; padding: 5px;*/ }
input[type=button], input[type=reset], .btn { font-family: inherit; background-color: rgba(0,0,0,.7); padding: 2px 10px; border: 1px solid #fff; color: #fff; /*font: inherit;*/ cursor: pointer; text-align: center; border-radius: 4px; }
input[type=checkbox], input[type="radio"] { margin-left: 2px; vertical-align: middle; }
.inp-opposit { background: #fff !important; border: 1px solid #111 !important; color: #111 !important; }

input[type=button].btn-special, input[type=reset].btn-special { background: none repeat scroll 0 0 orange; color: #000; margin-right: 15px; }

select.small { padding: 0 !important; }

.full { width: 100% !important; }
.half { width: 50% !important; }

.italic { font-style: italic; }
/*select { padding: 1px; }
    select .slctSmall { padding: 1px !important; }
    select .slctBig { padding: 3px !important; }*/


.Result { background: none repeat scroll 0 0 #FFF0A3; direction: rtl; display: none; margin: auto; padding: 10px 30px 10px 0; position: fixed; text-align: right; top: 0; width: 100%; z-index: 3000 !important; }

.loadingContainer { background-color: black; position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 2004; filter: alpha(opacity=75); opacity: 0.55; height: 100%; width: 100%; /*display: none;*/ }
.loading { position: fixed; left: 0; right: 0; top: 40%; background-color: transparent; text-align: center; z-index: 2005; /*display: none;*/ }

.defaultNotification { background: #1B725C /*#189e0a*/; border-radius: 5px; font-weight: bold; padding: 10px; }
    .defaultNotification .date { color: #ed6e43; }
    .defaultNotification ul { list-style: decimal; }
    .defaultNotification .row { border-top: 2px solid #f2f2f2; padding: 10px 0; }

.row-padding { padding-top: 5px; padding-bottom: 5px; }

.backgroundTram { background-color: #ED6E43; /*rgba(0, 0, 0, 0.1)*/ }
.backgroundTram2 { background-color: #ddd; /*rgba(0, 0, 0, 0.1)*/ }
.imgMini { width: 50px; height: 50px; margin-right: 5px; }
#userInfo { font-size: 1em; font-weight: normal; }
    #userInfo .usernameInfo { line-height: 50px; color: #fff; padding: 0 15px; }

#exitButton { padding: 13px 0; }
.helpButton { color: #fff; display: inline-block; font-size: 1.6em; margin-left: 0.5em; margin-top: 0.45em; }
.headerTitle { font-size: 1.67em; font-weight: bold; padding-top: 5px; display: inline-block; line-height: 20px; }
.navbar a, .mainMenu ul#Menu li a { text-decoration: none !important; }

.personalInfoContainer { background: #FBB695; border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); display: none; left: 0; overflow: hidden; position: absolute; top: 50px; width: 300px; border-top: none; z-index: 1; }
    .personalInfoContainer .personalInfoContainerRow { clear: both; border-top: 1px solid rgba(0, 0, 0, 0.1); }
    .personalInfoContainer p { padding: 15px 0 0 0; line-height: 1.5; }
    .personalInfoContainer img { padding: 15px; }

#btnEditPersonalInfo { margin: 4px 75px 4px 0; padding: 0 10px; width: 150px; }
    #btnEditPersonalInfo:hover { background-color: rgba(0,0,0,.4); transition: all 0.3s ease 0s; }

#btnEditPersonalInfo { margin: 4px 75px 4px 0; padding: 0 10px; width: 150px; }
    #btnEditPersonalInfo:hover { background-color: rgba(0,0,0,.4); transition: all 0.3s ease 0s; }

.main-content { position: relative; height: 100%; }

/*---Menu---------------------------------------------------------------------------------------*/
.mainMenu { background: rgba(62,47,71,.5); position: absolute; top: 0; right: 0; height: 100%; }
/*.mainMenu*/
ul#Menu li a { color: #fff; display: block; padding: 4px 0px 4px 0; margin: 4px 2px; border-bottom: 1px inset #434343; border-radius: 0; }
/***********/
#MenuContent { margin-top: 20px; }

.MenuContentDetail { background-color: #fff; border: 1px solid #cccccc; float: right; height: 110px; margin: 10px; text-align: center; width: 110px; }
    .MenuContentDetail:hover { border: 1px solid #aaa; background-color: #fff; }
        .MenuContentDetail:hover img { filter: alpha(opacity=100); opacity: 1; }
    .MenuContentDetail a { display: block; padding-top: 77px; }
        .MenuContentDetail a:hover { color: #004491; }
    .MenuContentDetail img { width: 48px; padding-top: 50px; margin-left: 10px; filter: alpha(opacity=80); opacity: 0.80; }

#MenuContent .divAddContent { background: url(images/default/new-article.png) no-repeat 50% 10%; }
#MenuContent .divLocalContentList { background: url(images/default/not-confirmed.png) no-repeat 50% 10%; }
#MenuContent .divInternetContentList { background: url(images/default/confirmed.png) no-repeat 50% 10%; }
#MenuContent .divMediaList { background: url(images/default/media-management.png) no-repeat 50% 10%; }
#MenuContent .divAddMedia { background: url(images/default/add-media.png) no-repeat 50% 10%; }
#MenuContent .divCommentList { background: url(images/default/comment-management.png) no-repeat 50% 10%; }
#MenuContent .divArtists { background: url(images/default/author-management.png) no-repeat 50% 10%; }
#MenuContent .divNewsletter { background: url("images/default/newsletter.png") no-repeat scroll 50% 10% transparent; }
#MenuContent .divUserActivity { background: url("images/default/users-statistics.png") no-repeat scroll 50% 10% transparent; }
#MenuContent .divUserManagement { background: url(images/default/users-management.png) no-repeat 50% 22% / 85%; }
#MenuContent .divServices { background: url(images/default/service-management.png) no-repeat 50% 10%; }
#MenuContent .divAboutUs { background: url(images/default/aboutUs.png) no-repeat 50% 28% /58%; }
#MenuContent .divAdsList { background: url(images/advertising-manager.jpg) no-repeat 50% 30%; }
#MenuContent .divPollList { background: url(images/poll.jpg) no-repeat 50% 30%; }
#MenuContent .divLiveResults { background: url(images/live.jpg) no-repeat 50% 30%; }
#MenuContent .divAddConductor { background: url(images/pubvlications.pnj) no-repeat 50% 30%; }
#MenuContent .divnewspapernews { background: url("images/newnew.jpg") no-repeat scroll 50% 30% transparent; }
#MenuContent .divMediaReport { background: url(images/Default/media-report3.png) no-repeat 50% 12%; }
#MenuContent .divOrderContent { background: url(images/Default/arrange-content.png) no-repeat 50% 20%; }
#MenuContent .divfirstPageOrderContent { background: url(images/Default/arrange-content.png) no-repeat 50% 20%; }

#Menu .aAddContent { background: url(images/default/new-article.png) no-repeat 100% 50% / 50px; }
#Menu .aLocalContentList { background: url(images/default/not-confirmed.png) no-repeat 100% 50% / 40px; }
#Menu .aInternetContentList { background: url(images/default/confirmed.png) no-repeat 100% 50% / 40px; }
#Menu .aMediaList { background: url(images/default/media-management.png)no-repeat 100% 50% / 40px; }
#Menu .aAddMedia { background: url(images/default/add-media.png)no-repeat 100% 50% / 40px; }
#Menu .aCommentList { background: url(images/default/comment-management.png) no-repeat 100% 50% / 40px; }
#Menu .aServices { background: url(images/default/service-management.png) no-repeat 100% 50% / 50px; }
#Menu .aUserManagement { background: url(images/default/users-management.png) no-repeat 100% 50% / 40px; }
#Menu .aUserActivity { background: url(images/default/users-statistics.png) no-repeat 100% 50% / 40px; }
#Menu .aNewsletter { background: url("images/default/newsletter.png") no-repeat 100% 50% / 40px; }
#Menu .aMediaReport { background: url(images/default/media-report3.png) no-repeat 100% 85% / 40px; }
#Menu .aAboutUs { background: url(images/default/aboutUs.png) no-repeat 95% 0 / 30px; }
#Menu .aAdsList { background: url(images/advertising-manager.png) no-repeat 94% 50%; }
#Menu .aLiveResults { background: url(images/live.png) no-repeat 94% 50%; }
#Menu .aArtists { background: url(images/art-manager.png) no-repeat 94% 50%; }
#Menu .aPollList { background: url(images/poll.png) no-repeat 94% 50%; }
#Menu .aOrderContent { background: url("images/Default/arrange-content.png") no-repeat scroll 96% 50% / 30px; }
#Menu .afirstPageOrderContent { background: url("images/Default/arrange-content.png") no-repeat scroll 96% 50% / 30px; }

.parContainer { margin-bottom: 15px; }
/*.parContainer input[type=text], .parContainer textarea { width: 100%; }*/

.LabelHolder { padding-left: 5px; }
.ObjectHolder { flex-grow: 2; }

/*---Table--------------------------------------------------------------------------------------*/
table.tbl { background-color: #fafafa; color: #111; width: 100%; border-collapse: collapse; }
    table.tbl th { padding: 5px 0; border: 1px solid #ccc; background: rgba(0,0,0,.4); color: #fff; text-align: center; }
    table.tbl tr:nth-child(2n) { background: rgba(0,0,0,.03); }
    table.tbl th.theadTitle { color: #fff; background: rgba(0,0,0,.5); }
    table.tbl tr:hover { background: rgba(0,0,0,.1); }
    table.tbl td { border: 1px solid #ccc; padding: 5px; }
        /*table.tbl td.control { text-align: center; }*/
        table.tbl td.control div { display: inline-block; width: 16px; height: 16px; cursor: pointer; }
        table.tbl td.control i, table.tbl td.control > a { margin: 0 3px; padding: 2px; }
        table.tbl td.control img, table.tbl td.control i { cursor: pointer; }
        table.tbl td.control .internetContentStatus { width: 140px; }
            table.tbl td.control .internetContentStatus div { width: 18px; height: 18px; cursor: pointer; float: right; margin: 5px; }
        /*table.tbl td.control .previewContent { background: url(images/preview.gif) no-repeat 50% 50%; }*/
        /*table.tbl td.control .previewPublication { background: url(images/preview.gif) no-repeat 50% 50%; }*/
        /*table.tbl td.control .verifyContent { background: url(images/verify.png) no-repeat 50% 50%; }*/
        table.tbl td.control .changestate { }
/*table.tbl td.control .deleteContent { background: url(images/delete.png) no-repeat 50% 50%; }*/
/*table.tbl td.control .contentLog { background: url(images/log.png) no-repeat 50% 50%; }*/
/*table.tbl td.control .loadcomments { background: url(images/comment.png) no-repeat 50% 50%; }*/

.Paging Table { width: 60px !important; }
.Paging .next { width: 18px; height: 18px; background-image: url(/lib/images/next.png); cursor: pointer; background-position: center; background-repeat: no-repeat; float: right; margin: 5px; }
.Paging .previous { width: 18px; height: 18px; background-image: url(/lib/images/previous.png); cursor: pointer; background-position: center; background-repeat: no-repeat; float: right; margin: 5px; }


/* Add Media Page --------------------------------------------------------------------------------- */
.mediaUploadedContainer { }
    .mediaUploadedContainer img { }
    .mediaUploadedContainer p { margin-top: 10px; text-align: right; text-indent: 3px; }
    .mediaUploadedContainer input { }
    .mediaUploadedContainer > select { }
.file-uploaded > img { max-height: 500px; max-width: 500px; }





/*---MediaList page---------------------------------------------*/
.balloonTools { background-color: rgba(255,255,255,0.8); border: 1px solid #ccc; border-bottom: none; border-radius: 4px 4px 0 0; position: absolute; right: 18px; top: -24px; display: none; }
    .balloonTools i { border: 1px solid transparent; margin: 0 2px; padding: 3px; }
    .balloonTools img { border: 1px solid transparent; margin: 2px; padding: 2px; width: 15px; }
        .balloonTools img:hover, .balloonTools i:hover { border: 1px solid #ccc; }

.search-panel { margin: 5px 0 10px; border: 1px solid #D4D4D4; padding: 5px 10px; }
    .search-panel .search-panel-wrapper { display: flex; flex-direction: column; gap: 1rem; }
        .search-panel .search-panel-wrapper > div { display: flex; align-items: center; gap: 1.5rem; }

@media (max-width:768px) {
    .search-panel .search-panel-wrapper > div { flex-direction: column; align-items: stretch; gap: .75rem; }
}

/*---Newsletter page -------------------------------------------*/
#NewsAttachContainer { zoom: 1; counter-reset: boxes; }
    #NewsAttachContainer li { background: rgba(1, 1, 1, 0.78); border: 1px solid #111111; color: #fff; counter-increment: boxes; cursor: pointer; font-size: 1.2em; position: relative; }
        #NewsAttachContainer li:hover .close { display: block; }
        #NewsAttachContainer li:before { color: rgba(237, 110, 67, .6) /*#ED6E43*/; content: counter(boxes, decimal); font-size: 45px; left: 5px; padding: 5px; position: absolute; top: 0; vertical-align: top; text-shadow: 0 0 1px rgba(1,1,1,.3); }

.media .close { background: none repeat scroll 0 0 #FF0000; border-left: 1px solid #9B0101; color: #FFFFFF; display: none; font-size: 12px; left: 11px; padding: 0 6px; position: absolute; top: 0; }


#MediaContainerSortable .removeIcon { background: url("images/Delete1.png") no-repeat scroll 50% 50%; cursor: pointer; height: 24px; left: 4px; position: absolute; top: -10px; width: 24px; }

.divCounter { color: #777; display: none; }

@media (max-width:900px) {
    .half, .divImagereportImages { width: 100% !important; }
}


@media (max-width:600px) {
    .headerTitle { font-size: 1.5em; }
}

@media (max-width:330px) {
    .headerSubTitle { font-size: .9em; }
}


.gallery .thumbnail .img-responsive { max-height: 150px; }
.gallery .thumb .img-responsive { max-height: 110px; }
/*for attachMedia*/
.gallery .thumbnail .caption { height: 6.5em; }
    .gallery .thumbnail .caption h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


ins { background-color: #cfc; text-decoration: inherit; }

del { color: #999; background-color: #FEC8C8; }

ins.mod { background-color: #FFE1AC; }

.divImagereportImages { float: right; width: 50%; padding: 0 10px; position: relative; }
.ui-autocomplete { max-height: 150px; overflow-y: auto; /* prevent horizontal scrollbar */ overflow-x: hidden; }
* html .ui-autocomplete { height: 150px; }

.excel-btn { background: url(Images/Icons/excel.png) top 0 right 0 no-repeat; padding-right: 37px; }
.ui-placeholder-mediareport { width: 48%; background-color: yellow; padding: 0 10px; }
.draftMsg { display: inline-block; padding: 7px; color: green; }

.recaptcha-container { transform: scale(0.89); transform-origin: 0; -webkit-transform: scale(0.89); transform: scale(0.89); -webkit-transform-origin: 278px 0 0; transform-origin: 278px 0 0; }
.systemInfo-container { color: #888; padding-top: 10px; /* background: #3a3a3a; */ border-top: 1px solid #555; margin-top: 10px; }


.section-container { background: #eee; margin-bottom: 20px; }
.section-header { background: #999; }
    .section-header label { background: #777; color: #fff; font-size: 1.2em; padding: 10px 30px; }

.selected { background-color: antiquewhite !important; }

.bg-green { background: #C8E6C9 !important; }
.bg-yellow { background: #FFF9C4 !important; }

.twitter-typeahead { width: calc(100% - 30px); }
.tt-menu { width: 100%; background: #fff; box-shadow: 0px 1px 10px 0px rgba(0,0,0,.5); right: 2px !important; max-height: 150px; overflow-y: auto; }
.tt-suggestion.tt-selectable { padding: 5px; }
    .tt-suggestion.tt-selectable:hover, .tt-suggestion.tt-cursor { background: #ddd; }


.select2-container .select2-search--inline { float: right !important; }
    .select2-container .select2-search--inline .select2-search__field { margin-top: 0 !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { margin-top: 2px !important; }

.min-padd { padding-right: 10px; padding-left: 10px; }
.min-row { margin-right: -10px; margin-left: -10px; }

.nav > li > a:hover, .nav > li > a:focus { background-color: #444; }

.select2-container .select2-selection--single { height: 32px; }

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { float: left; padding: 0 3px; }

.otherRelatedMedia-container { background: #e5e5e5; margin: 20px 0; }

.mediaUploadedContainer .thumbnail > img:first-child { min-height: 100px; }

.userAccessServices-container .service-title { padding-right: 10px; border-right: 1px solid #111; margin-right: 5px; position: relative; }
    .userAccessServices-container .service-title:after { content: " "; border-bottom: 1px solid #111; width: 7px; position: absolute; top: 57%; right: 0; }


.login-password-contianer input#txtPassword_Login { border-right: none; }
.login-password-contianer .input-group-addon:first-child { border-left: none; background: none; color: #999; }

@media (max-width:767px) {
    .site-title-container { max-width: 220px; }
        .site-title-container .headerSubTitle { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
}


.btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4; }
.btn-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c; }
.btn-info { color: #fff; background-color: #5bc0de; border-color: #46b8da; }
.btn-warning { color: #fff; background-color: #f0ad4e; border-color: #eea236; }
.btn-danger { color: #fff; background-color: #d9534f; border-color: #d43f3a; }
.btn-link { font-weight: 400; color: #337ab7; border-radius: 0; }

.modal-footer * { margin: 0 5px 0 0; }

.serviceList_con { max-height: 350px; overflow-y: scroll; background: #fafafa; padding: 5px; }

.flex { display: flex; align-items: center; }
.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.align-items-stretch { align-items: stretch; }
.narrow [class*=col] { padding-right: 7px; padding-left: 7px; }


.content-options-container { background: #555; padding-top: 10px; padding-bottom: 10px; }
    .content-options-container .labelHolderTbl { color: #fff; }

@media (min-width: 992px) {
    .content-options-container { position: sticky; top: 0; }
}

.datetime_sec { display: grid; grid-template-columns: repeat(13, 7%); grid-column-gap: .67%; text-align: center; font-size: .9rem; }
    .datetime_sec .item-1,
    .datetime_sec .item-2,
    .datetime_sec .item-3,
    .datetime_sec .item-4 { grid-row: 1; }
    .datetime_sec .item-5,
    .datetime_sec .item-6,
    .datetime_sec .item-7,
    .datetime_sec .item-8 { grid-row: 2; }

    .datetime_sec .item-1, .datetime_sec .item-5 { grid-column: 1/7; }
    .datetime_sec .item-2, .datetime_sec .item-6 { grid-column: 7/10; }
    .datetime_sec .item-3, .datetime_sec .item-7 { grid-column: 10/11; }
    .datetime_sec .item-4, .datetime_sec .item-8 { grid-column: 11/14; }


.card { background: #fff; padding: 10px; border-radius: 10px; margin-bottom: 1rem; }
    .card .card__header_sec { margin-bottom: 1rem; border-bottom: 1px solid rgb(232 86 35 / 50%); display: flex; align-items: center; justify-content: space-between; padding: 0 10px 5px; }
    .card h1 { font-size: 1rem; }
    .card .glyphicon-plus { color: forestgreen; }


#treeServices, #treeProfileServices { background-color: rgba(255,255,255,.1); }

.required-sign { vertical-align: super; color: red; }

.character__file_uploader { }
    .character__file_uploader .qq-upload-button { border-radius: 10px; padding: 3px 0 !important; width: 75px; }
    .character__file_uploader .file-uploaded { display: none; align-items: center; justify-content: space-between; width: 100%; flex-direction: row; padding: 10px; border-radius: 10px; margin-top: 5px; background: #f5f5f5; }
        .character__file_uploader .file-uploaded:hover { background: #eee; }
        .character__file_uploader .file-uploaded:has(>*) { display: flex; }
        .character__file_uploader .file-uploaded img { max-height: 75px; max-width: clamp(200px, 100%, 300px); }
        .character__file_uploader .file-uploaded video { max-height: 140px; width: auto; }
        .character__file_uploader .file-uploaded i.glyphicon-remove { color: red; }

.character__site_detail { display: flex; gap: 1rem; justify-content: space-between; padding: 0 2rem; }
    .character__site_detail > div { flex: 1 1 50%; }
        .character__site_detail > div:last-child { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.character__extra_info { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1rem; }
    .character__extra_info > div { flex: 0 0 calc(50% - .5rem); margin: 0; }

@media (max-width:768px) {
    .character__site_detail { flex-direction: column; }
}


.note_container { background: #fff; padding: 5px 15px; border-radius: 5px; margin-top: 10px; display: flex; flex-direction: column; gap: 1rem; }
.note_section { border: 2px dashed #ccc; border-radius: 5px; padding: 5px 10px; display: flex; flex-direction: column; gap: .5rem; align-items: start; }
.note_container.new { background: cornsilk; margin-bottom: 3rem; }
.note_container.archive { opacity: .7; }
